mirror of
https://github.com/z-fab/agentmd-obsidian.git
synced 2026-07-22 07:32:24 +00:00
d5c2fc0162
- Add eslint (typescript-eslint + eslint-plugin-obsidianmd) with a lint script and run it in the release workflow - Replace direct element.style assignments with CSS utility classes - Use window timers, activeDocument, and FileSystemAdapter for popout/window compatibility and to drop unsafe any casts - Use Notice.messageEl (was deprecated noticeEl) and await revealLeaf; bump minAppVersion to 1.8.7 accordingly - Replace electron require() with a typed import + ambient module declaration - Mark fire-and-forget promises with void; tidy command name - Provide window in the test setup so window-timer code runs under Node
902 lines
28 KiB
CSS
902 lines
28 KiB
CSS
/* ============================================================
|
|
agentmd-obsidian — Full style system
|
|
Color tokens, view layouts, and component styles.
|
|
============================================================ */
|
|
|
|
/* ---------- Color tokens (single source of truth) ---------- */
|
|
.agentmd-status-running { color: #3b82f6; }
|
|
.agentmd-status-success { color: #10b981; }
|
|
.agentmd-status-failed { color: #ef4444; }
|
|
.agentmd-status-aborted { color: #f59e0b; }
|
|
.agentmd-status-waiting { color: #f59e0b; }
|
|
.agentmd-trigger-manual { color: #888888; }
|
|
.agentmd-trigger-scheduler { color: #fbbf24; }
|
|
.agentmd-trigger-watch { color: #06b6d4; }
|
|
|
|
.agentmd-panel { min-width: 240px; }
|
|
|
|
.agentmd-panel-body { padding-top: 10px; }
|
|
|
|
/* ---------- Status bar ---------- */
|
|
.agentmd-status-bar {
|
|
font-variant-numeric: tabular-nums;
|
|
cursor: pointer;
|
|
}
|
|
.agentmd-status-dot {
|
|
margin-right: 4px;
|
|
}
|
|
.agentmd-status-online .agentmd-status-dot {
|
|
animation: agentmd-pulse 2s ease-in-out infinite;
|
|
}
|
|
.agentmd-status-fallback .agentmd-status-dot {
|
|
animation: none;
|
|
}
|
|
@keyframes agentmd-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.4; }
|
|
}
|
|
.agentmd-status-bar.agentmd-status-online {
|
|
color: #10b981;
|
|
}
|
|
.agentmd-status-bar.agentmd-status-fallback {
|
|
color: #f59e0b;
|
|
}
|
|
.agentmd-status-bar.agentmd-status-offline {
|
|
color: var(--text-faint);
|
|
}
|
|
.agentmd-statusbar-waiting { color: #f59e0b; font-weight: var(--font-semibold); margin-left: 8px; display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
|
|
.agentmd-statusbar-waiting svg { width: 12px; height: 12px; }
|
|
|
|
/* ---------- Panel header ---------- */
|
|
.agentmd-panel-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 9px 12px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
.agentmd-brand { display: flex; align-items: center; gap: 6px; font-weight: var(--font-semibold); color: #8b5cf6; }
|
|
.agentmd-brand-icon { display: inline-flex; align-items: center; color: #8b5cf6; }
|
|
.agentmd-brand-icon svg { width: 16px; height: 16px; }
|
|
.agentmd-panel-header .agentmd-status-dot { margin-left: auto; color: var(--text-faint); font-size: 9px; }
|
|
.agentmd-panel-header .agentmd-status-dot.is-online { color: #10b981; }
|
|
|
|
/* ---------- Panel footer ---------- */
|
|
.agentmd-panel-footer { display: flex; justify-content: center; padding: 10px; }
|
|
.agentmd-footer-btn {
|
|
display: inline-flex; align-items: center; gap: 6px;
|
|
padding: 5px 14px; border-radius: 6px;
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
color: var(--text-muted); cursor: pointer; font-size: var(--font-ui-smaller);
|
|
}
|
|
.agentmd-footer-btn:hover { background: var(--background-modifier-hover); color: var(--text-normal); }
|
|
.agentmd-footer-btn-icon { display: inline-flex; }
|
|
.agentmd-footer-btn-icon svg { width: 14px; height: 14px; }
|
|
|
|
/* ---------- Tabs ---------- */
|
|
.agentmd-tabrow { display: flex; border-bottom: 1px solid var(--background-modifier-border); }
|
|
/* Scoped under .agentmd-tabrow to override Obsidian's default <button> chrome
|
|
(bg + shadow) without !important — the descendant selector adds specificity. */
|
|
.agentmd-tabrow .agentmd-tab {
|
|
flex: 1;
|
|
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
|
|
padding: 11px 4px;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
border: none;
|
|
border-bottom: 2px solid transparent; /* only the bottom edge */
|
|
border-radius: 0;
|
|
margin-bottom: -1px; /* overlap the row's bottom border */
|
|
color: var(--text-muted); font-size: var(--font-ui-small); cursor: pointer;
|
|
}
|
|
.agentmd-tabrow .agentmd-tab:hover {
|
|
color: var(--text-normal);
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
.agentmd-tabrow .agentmd-tab.active {
|
|
color: var(--text-normal);
|
|
border-bottom-color: var(--agentmd-accent, #8b5cf6);
|
|
font-weight: var(--font-semibold);
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
}
|
|
.agentmd-tab-count {
|
|
font-size: 10px;
|
|
line-height: 1;
|
|
padding: 1px 6px;
|
|
border-radius: 8px;
|
|
background: var(--background-modifier-border);
|
|
color: var(--text-muted);
|
|
}
|
|
.agentmd-tab-count.waiting { background: rgba(245,158,11,0.22); color: #f59e0b; font-weight: var(--font-semibold); }
|
|
|
|
/* ---------- Back bar ---------- */
|
|
.agentmd-back-bar {
|
|
padding: 7px 12px;
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
cursor: pointer;
|
|
}
|
|
.agentmd-back-bar:hover { color: var(--text-normal); }
|
|
|
|
/* ---------- Chips ---------- */
|
|
.agentmd-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
padding: 2px 9px;
|
|
border-radius: 10px;
|
|
font-size: var(--font-ui-smaller);
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
color: var(--text-muted);
|
|
white-space: nowrap;
|
|
}
|
|
.agentmd-chip.running { background: rgba(59,130,246,0.18); color: #60a5fa; font-weight: var(--font-semibold); }
|
|
.agentmd-chip.scheduled { background: rgba(251,191,36,0.14); color: #fbbf24; }
|
|
.agentmd-chip.watch { background: rgba(6,182,212,0.14); color: #06b6d4; }
|
|
.agentmd-chip.manual { background: var(--background-secondary); color: var(--text-faint); }
|
|
.agentmd-chip.waiting { background: rgba(245,158,11,0.16); color: #f59e0b; font-weight: var(--font-semibold); }
|
|
.agentmd-chip.waiting svg { width: 11px; height: 11px; vertical-align: -1px; }
|
|
.agentmd-chip.model { background: transparent; color: var(--text-faint); border: 1px solid var(--background-modifier-border); }
|
|
.agentmd-chip .agentmd-chip-icon { display: inline-flex; }
|
|
.agentmd-chip svg { width: 12px; height: 12px; }
|
|
|
|
/* ---------- Status pills (running / waiting / result) ---------- */
|
|
.agentmd-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 9px;
|
|
border-radius: 10px;
|
|
font-size: var(--font-ui-smaller);
|
|
font-weight: var(--font-semibold);
|
|
line-height: 1.4;
|
|
white-space: nowrap;
|
|
}
|
|
.agentmd-pill.clickable { cursor: pointer; }
|
|
.agentmd-pill.run { background: rgba(59,130,246,0.16); color: #60a5fa; }
|
|
.agentmd-pill.wait { background: rgba(245,158,11,0.16); color: #f59e0b; }
|
|
.agentmd-pill.ok { background: rgba(16,185,129,0.16); color: #34d399; }
|
|
.agentmd-pill.err { background: rgba(239,68,68,0.16); color: #f87171; }
|
|
.agentmd-pill.ab { background: rgba(245,158,11,0.16); color: #fbbf24; }
|
|
.agentmd-pill .agentmd-pill-icon { display: inline-flex; }
|
|
.agentmd-pill svg { width: 11px; height: 11px; }
|
|
.agentmd-spin {
|
|
width: 9px; height: 9px;
|
|
border-radius: 50%;
|
|
border: 1.6px solid rgba(96,165,250,0.30);
|
|
border-top-color: #60a5fa;
|
|
animation: agentmd-spin .8s linear infinite;
|
|
flex: 0 0 auto;
|
|
}
|
|
@keyframes agentmd-spin { to { transform: rotate(360deg); } }
|
|
|
|
/* ---------- Kebab (card options menu trigger) ---------- */
|
|
.agentmd-kebab {
|
|
margin-left: auto;
|
|
width: 26px; height: 26px;
|
|
border-radius: 6px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-faint);
|
|
cursor: pointer;
|
|
flex: 0 0 auto;
|
|
}
|
|
.agentmd-kebab:hover { background: var(--background-secondary); color: var(--text-normal); }
|
|
.agentmd-kebab svg { width: 16px; height: 16px; }
|
|
|
|
/* ---------- Action buttons ---------- */
|
|
.agentmd-btn {
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
padding: 3px 8px;
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-smaller);
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
}
|
|
.agentmd-btn:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
.agentmd-btn.primary {
|
|
background: color-mix(in srgb, var(--agentmd-accent, #8b5cf6) 20%, transparent);
|
|
border-color: color-mix(in srgb, var(--agentmd-accent, #8b5cf6) 45%, transparent);
|
|
}
|
|
.agentmd-btn.primary:hover {
|
|
background: color-mix(in srgb, var(--agentmd-accent, #8b5cf6) 30%, transparent);
|
|
}
|
|
.agentmd-btn:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* ---------- Small utilities ---------- */
|
|
.agentmd-push-right { margin-left: auto; }
|
|
.agentmd-notice-clickable { cursor: pointer; }
|
|
|
|
/* ---------- Elevated cards + running animation ---------- */
|
|
|
|
/* CSS @property for animatable conic-gradient angle */
|
|
@property --agentmd-bd { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
|
|
|
|
.agentmd-card {
|
|
position: relative;
|
|
background: var(--background-modifier-hover);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 8px;
|
|
padding: 10px 11px;
|
|
cursor: pointer;
|
|
}
|
|
.agentmd-card:hover {
|
|
background: var(--background-modifier-active-hover, var(--background-secondary-alt, var(--background-modifier-hover)));
|
|
border-color: var(--background-modifier-border-hover, var(--background-modifier-border));
|
|
}
|
|
|
|
/* Thin rotating blue border via a conic gradient painted on the border-box.
|
|
No CSS masks (only partially supported by older Obsidian); the padding-box
|
|
layer keeps the card fill, the border-box layer animates the 1px edge. */
|
|
.agentmd-card.is-running {
|
|
border-color: transparent;
|
|
background:
|
|
linear-gradient(var(--background-modifier-hover), var(--background-modifier-hover)) padding-box,
|
|
conic-gradient(from var(--agentmd-bd), rgba(59,130,246,0.18) 0 60%, #3b82f6 84%, #93c5fd 90%, rgba(59,130,246,0.18) 100%) border-box;
|
|
animation: agentmd-rot 3.4s linear infinite;
|
|
}
|
|
.agentmd-card.is-running:hover {
|
|
border-color: transparent;
|
|
background:
|
|
linear-gradient(var(--background-secondary), var(--background-secondary)) padding-box,
|
|
conic-gradient(from var(--agentmd-bd), rgba(59,130,246,0.18) 0 60%, #3b82f6 84%, #93c5fd 90%, rgba(59,130,246,0.18) 100%) border-box;
|
|
}
|
|
@keyframes agentmd-rot { to { --agentmd-bd: 360deg; } }
|
|
|
|
/* Fallback for engines without @property: static subtle blue border */
|
|
@supports not (background: conic-gradient(from 0deg, red, red)) {
|
|
.agentmd-card.is-running { border-color: rgba(59,130,246,0.6); background: var(--background-modifier-hover); }
|
|
}
|
|
|
|
.agentmd-card.is-waiting {
|
|
border-color: #f59e0b;
|
|
animation: agentmd-wait-pulse 2.6s ease-in-out infinite;
|
|
}
|
|
@keyframes agentmd-wait-pulse {
|
|
0%, 100% { border-color: rgba(245,158,11,0.85); }
|
|
50% { border-color: rgba(245,158,11,0.25); }
|
|
}
|
|
|
|
/* ---------- Emoji box ---------- */
|
|
.agentmd-emoji-box {
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 7px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
background: var(--background-modifier-border);
|
|
line-height: 1;
|
|
flex: 0 0 auto;
|
|
}
|
|
.agentmd-emoji-box.is-running { animation: agentmd-epulse 2.8s ease-in-out infinite; }
|
|
@keyframes agentmd-epulse {
|
|
0%, 100% { background: rgba(59,130,246,0.16); }
|
|
50% { background: rgba(59,130,246,0.40); }
|
|
}
|
|
.agentmd-emoji-box.is-waiting { background: rgba(245,158,11,0.22); }
|
|
.agentmd-emoji-box.is-success { background: rgba(16,185,129,0.22); }
|
|
.agentmd-emoji-box.is-error { background: rgba(239,68,68,0.22); }
|
|
.agentmd-emoji-box.is-aborted { background: rgba(245,158,11,0.22); }
|
|
|
|
/* ---------- Stop pill (hover-only) ---------- */
|
|
.agentmd-stop-pill {
|
|
margin-left: auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 3px 10px;
|
|
border-radius: 13px;
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-smaller);
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition: opacity .15s, color .15s, background .15s, border-color .15s;
|
|
}
|
|
.agentmd-card:hover .agentmd-stop-pill { opacity: 1; }
|
|
.agentmd-stop-pill:hover {
|
|
background: rgba(239,68,68,0.16);
|
|
border-color: rgba(239,68,68,0.5);
|
|
color: #ef4444;
|
|
}
|
|
|
|
/* ---------- Card list container ---------- */
|
|
/* Responsive grid: 1 column in a narrow sidebar, tiles side-by-side when wide. */
|
|
.agentmd-card-list {
|
|
padding: 8px;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
|
|
gap: 8px;
|
|
align-items: start;
|
|
}
|
|
|
|
/* ---------- Card row / name / desc / footer ---------- */
|
|
.agentmd-card-row { display: flex; align-items: center; gap: 8px; }
|
|
.agentmd-card-name { font-weight: var(--font-semibold); color: var(--text-normal); }
|
|
.agentmd-card-id { color: var(--text-faint); font-size: var(--font-ui-smaller); }
|
|
.agentmd-card-desc { color: var(--text-muted); font-size: var(--font-ui-smaller); line-height: 1.35; margin-top: 4px; }
|
|
.agentmd-card-footer { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; row-gap: 6px; }
|
|
.agentmd-card-footer .agentmd-actions { margin-left: auto; display: flex; gap: 4px; }
|
|
|
|
/* ---------- Card meta line (status text + duration/tokens/cost) ---------- */
|
|
.agentmd-meta-line {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
margin-top: 8px;
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-faint);
|
|
font-family: var(--font-monospace);
|
|
}
|
|
.agentmd-meta-line .agentmd-meta-status { font-weight: var(--font-semibold); }
|
|
.agentmd-meta-status svg { width: 12px; height: 12px; vertical-align: -2px; }
|
|
|
|
.agentmd-activity {
|
|
margin-top: 7px;
|
|
padding: 4px 7px;
|
|
border-radius: 5px;
|
|
background: var(--background-primary-alt);
|
|
font-family: var(--font-monospace);
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-muted);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* ---------- Config rows (agent detail) ---------- */
|
|
.agentmd-config-section { border-bottom: 1px solid var(--background-modifier-border); }
|
|
.agentmd-config-row {
|
|
display: flex;
|
|
padding: 5px 12px;
|
|
font-size: var(--font-ui-smaller);
|
|
gap: 8px;
|
|
}
|
|
.agentmd-config-row .agentmd-config-label { color: var(--text-faint); min-width: 84px; }
|
|
.agentmd-config-row .agentmd-config-value { color: var(--text-normal); word-break: break-word; }
|
|
.agentmd-config-pill {
|
|
display: inline-block;
|
|
background: var(--background-secondary);
|
|
border-radius: 5px;
|
|
padding: 1px 6px;
|
|
margin: 0 3px 3px 0;
|
|
font-size: 10px;
|
|
font-family: var(--font-monospace);
|
|
}
|
|
.agentmd-section-header {
|
|
padding: 8px 12px;
|
|
font-size: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: .4px;
|
|
color: var(--text-faint);
|
|
font-weight: var(--font-semibold);
|
|
background: var(--background-secondary);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* ---------- Shared header pattern (Execution Detail + Agent Detail) ---------- */
|
|
.exec-header {
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
.exec-header.streaming {
|
|
background: rgba(59,130,246,0.06);
|
|
border-bottom-color: rgba(59,130,246,0.15);
|
|
}
|
|
.exec-header.success {
|
|
background: rgba(16,185,129,0.06);
|
|
border-bottom-color: rgba(16,185,129,0.15);
|
|
}
|
|
.exec-header.failed {
|
|
background: rgba(239,68,68,0.06);
|
|
border-bottom-color: rgba(239,68,68,0.15);
|
|
}
|
|
.exec-header.aborted {
|
|
background: rgba(245,158,11,0.06);
|
|
border-bottom-color: rgba(245,158,11,0.15);
|
|
}
|
|
.exec-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: var(--font-ui-medium);
|
|
font-weight: var(--font-semibold);
|
|
color: var(--text-normal);
|
|
margin-bottom: 6px;
|
|
}
|
|
.exec-title .agentmd-status-waiting svg { width: 16px; height: 16px; vertical-align: -3px; }
|
|
.exec-name {
|
|
/* inherit weight from parent */
|
|
}
|
|
.exec-id {
|
|
color: var(--text-faint);
|
|
font-weight: normal;
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
/* Inline meta line — used for trigger·status·duration and token stats */
|
|
.exec-meta-line {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-muted);
|
|
margin-top: 4px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.exec-meta-sep {
|
|
color: var(--text-faint);
|
|
margin: 0 2px;
|
|
}
|
|
.exec-meta-item {
|
|
white-space: nowrap;
|
|
}
|
|
.exec-meta-highlight {
|
|
font-weight: var(--font-semibold);
|
|
color: var(--text-normal);
|
|
}
|
|
.exec-stats-line {
|
|
font-family: var(--font-monospace);
|
|
font-size: 11px;
|
|
}
|
|
.exec-error-line {
|
|
margin-top: 6px;
|
|
padding: 4px 8px;
|
|
background: rgba(239,68,68,0.08);
|
|
border-radius: 4px;
|
|
color: #ef4444;
|
|
font-size: var(--font-ui-smaller);
|
|
}
|
|
|
|
/* Agent Detail stats section (inline) */
|
|
.agent-detail-stats-section {
|
|
padding: 10px 16px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
background: var(--background-secondary);
|
|
}
|
|
|
|
/* ---------- Execution Detail: Final Answer ---------- */
|
|
.agentmd-exec-detail .exec-final-answer {
|
|
padding: 16px;
|
|
background: rgba(16,185,129,0.04);
|
|
border-bottom: 1px solid rgba(16,185,129,0.12);
|
|
}
|
|
.agentmd-exec-detail .exec-final-answer .final-label {
|
|
font-size: 11px;
|
|
color: #10b981;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
margin-bottom: 10px;
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
.agentmd-exec-detail .exec-final-answer .final-content {
|
|
color: var(--text-normal);
|
|
font-size: var(--font-ui-small);
|
|
line-height: 1.7;
|
|
}
|
|
/* Markdown rendered inside final-content */
|
|
.agentmd-exec-detail .exec-final-answer .final-content p {
|
|
margin: 0 0 8px 0;
|
|
}
|
|
.agentmd-exec-detail .exec-final-answer .final-content p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* ---------- Execution Detail: Action needed (HILT) ---------- */
|
|
.exec-header.waiting {
|
|
background: rgba(245,158,11,0.06);
|
|
border-bottom-color: rgba(245,158,11,0.16);
|
|
}
|
|
.exec-action-needed {
|
|
padding: 16px;
|
|
background: rgba(245,158,11,0.06);
|
|
border-bottom: 1px solid rgba(245,158,11,0.18);
|
|
}
|
|
.exec-action-needed .an-label {
|
|
font-size: 11px; color: #f59e0b; text-transform: uppercase; letter-spacing: .5px;
|
|
font-weight: var(--font-semibold); display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
|
|
}
|
|
.exec-action-needed .an-label svg { width: 13px; height: 13px; }
|
|
.exec-action-needed .an-q { color: var(--text-normal); font-size: var(--font-ui-small); line-height: 1.6; font-weight: var(--font-semibold); margin-bottom: 9px; }
|
|
.exec-action-needed .an-tool { font-family: var(--font-monospace); font-size: 11px; color: var(--text-faint); background: var(--background-primary-alt); padding: 7px 9px; border-radius: 5px; margin-bottom: 12px; word-break: break-word; }
|
|
.exec-action-needed .an-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
|
|
.exec-action-needed .an-sending { color: var(--text-faint); font-size: var(--font-ui-smaller); margin-left: 4px; }
|
|
.agentmd-btn.danger { background: rgba(239,68,68,0.14); border-color: rgba(239,68,68,0.45); color: #f08a8a; }
|
|
.agentmd-btn.ghost { background: transparent; color: var(--text-faint); }
|
|
.agentmd-input { flex: 1; min-width: 150px; background: var(--background-primary); border: 1px solid var(--background-modifier-border); border-radius: 4px; padding: 5px 9px; color: var(--text-normal); font-size: var(--font-ui-smaller); }
|
|
.exec-action-needed .agentmd-input.an-reason { width: 100%; flex: none; margin-bottom: 10px; }
|
|
.exec-action-needed .agentmd-chip { cursor: pointer; }
|
|
.exec-action-needed .agentmd-chip.sel { background: color-mix(in srgb, var(--agentmd-accent, #8b5cf6) 16%, transparent); border-color: color-mix(in srgb, var(--agentmd-accent, #8b5cf6) 45%, transparent); color: var(--text-normal); }
|
|
|
|
/* ---------- Execution Detail: Log ---------- */
|
|
.agentmd-exec-detail .exec-log-wrapper {
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
.agentmd-exec-detail .exec-log-title {
|
|
padding: 8px 16px;
|
|
font-size: 11px;
|
|
color: var(--text-faint);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
font-weight: var(--font-semibold);
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
background: var(--background-secondary);
|
|
}
|
|
.agentmd-exec-detail .exec-log-title.clickable {
|
|
cursor: pointer;
|
|
}
|
|
.agentmd-exec-detail .exec-log-title.clickable:hover {
|
|
color: var(--text-muted);
|
|
}
|
|
.agentmd-exec-detail .exec-log {
|
|
padding: 12px 16px;
|
|
font-family: var(--font-monospace);
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-muted);
|
|
line-height: 1.8;
|
|
background: var(--background-primary-alt);
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
.agentmd-exec-detail .exec-log.collapsed {
|
|
display: none;
|
|
}
|
|
.agentmd-exec-detail .exec-log .log-line {
|
|
padding: 1px 0;
|
|
}
|
|
.agentmd-exec-detail .exec-log .log-tool-call {
|
|
color: #10b981;
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
.agentmd-exec-detail .exec-log .log-tool-result {
|
|
color: var(--agentmd-accent, #8b5cf6);
|
|
}
|
|
.agentmd-exec-detail .exec-log .log-args,
|
|
.agentmd-exec-detail .exec-log .log-result-content {
|
|
color: var(--text-faint);
|
|
}
|
|
.agentmd-exec-detail .exec-log .log-ai {
|
|
color: var(--text-normal);
|
|
}
|
|
.agentmd-exec-detail .exec-log .log-ai-line {
|
|
margin-top: 4px;
|
|
}
|
|
.agentmd-exec-detail .exec-log .log-system-line {
|
|
margin-bottom: 6px;
|
|
padding-bottom: 6px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
.agentmd-exec-detail .exec-log .log-system-label {
|
|
color: #f59e0b;
|
|
font-weight: var(--font-semibold);
|
|
cursor: pointer;
|
|
}
|
|
.agentmd-exec-detail .exec-log .log-system-label:hover {
|
|
color: #fbbf24;
|
|
}
|
|
.agentmd-exec-detail .exec-log .log-system-content {
|
|
margin-top: 4px;
|
|
padding: 6px 8px;
|
|
background: rgba(245,158,11,0.06);
|
|
border-radius: 4px;
|
|
color: var(--text-muted);
|
|
white-space: pre-wrap;
|
|
font-size: 11px;
|
|
line-height: 1.5;
|
|
}
|
|
.agentmd-exec-detail .exec-log .log-system-content.collapsed {
|
|
display: none;
|
|
}
|
|
.agentmd-exec-detail .exec-log .log-human {
|
|
color: #3b82f6;
|
|
}
|
|
.agentmd-exec-detail .exec-log .log-human-line {
|
|
margin-bottom: 4px;
|
|
}
|
|
.agentmd-exec-detail .exec-log .log-final-line {
|
|
margin-top: 6px;
|
|
padding-top: 6px;
|
|
border-top: 1px solid var(--background-modifier-border);
|
|
}
|
|
.agentmd-exec-detail .exec-log .log-cursor {
|
|
color: var(--text-faint);
|
|
animation: agentmd-blink 1s step-end infinite;
|
|
}
|
|
@keyframes agentmd-blink {
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
/* ---------- Filter area (ExecutionsView) ---------- */
|
|
.agentmd-filter-area {
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
background: var(--background-secondary);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.agentmd-filter-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.agentmd-filter-label {
|
|
font-size: 10px;
|
|
color: var(--text-faint);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
min-width: 42px;
|
|
}
|
|
.agentmd-segmented { display: flex; gap: 4px; flex-wrap: wrap; }
|
|
.agentmd-seg-btn {
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
padding: 3px 10px;
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-muted);
|
|
cursor: pointer;
|
|
}
|
|
.agentmd-seg-btn:hover { background: var(--background-modifier-hover); }
|
|
.agentmd-seg-btn.active {
|
|
background: color-mix(in srgb, var(--agentmd-accent, #8b5cf6) 20%, transparent);
|
|
color: var(--agentmd-accent, #8b5cf6);
|
|
border-color: color-mix(in srgb, var(--agentmd-accent, #8b5cf6) 45%, transparent);
|
|
font-weight: var(--font-semibold);
|
|
}
|
|
.agentmd-filter-select {
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
padding: 3px 8px;
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-normal);
|
|
cursor: pointer;
|
|
flex: 1;
|
|
max-width: 200px;
|
|
}
|
|
|
|
/* ---------- Execution rows (shared: ExecutionsView + AgentDetailView) ---------- */
|
|
.agentmd-exec-row {
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
cursor: pointer;
|
|
}
|
|
.agentmd-exec-row:hover {
|
|
background: var(--background-secondary);
|
|
}
|
|
.exec-row-line1 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: var(--font-ui-small);
|
|
margin-bottom: 2px;
|
|
}
|
|
.exec-row-agent {
|
|
font-weight: var(--font-semibold);
|
|
color: var(--text-normal);
|
|
}
|
|
.exec-row-id {
|
|
color: var(--text-faint);
|
|
font-size: var(--font-ui-smaller);
|
|
}
|
|
/* Error display in exec rows — inline, truncated */
|
|
.exec-row-error-inline {
|
|
color: #ef4444;
|
|
font-size: 10px;
|
|
margin-left: auto;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
max-width: 140px;
|
|
}
|
|
.agentmd-exec-row.has-error {
|
|
border-left: 2px solid rgba(239,68,68,0.4);
|
|
}
|
|
.exec-row-time {
|
|
color: var(--text-faint);
|
|
font-size: var(--font-ui-smaller);
|
|
margin-left: auto;
|
|
}
|
|
.exec-row-line2 {
|
|
display: flex;
|
|
gap: 8px;
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-faint);
|
|
padding-left: 14px;
|
|
}
|
|
.exec-row-trigger {
|
|
font-size: 10px;
|
|
}
|
|
.exec-row-trigger-icon {
|
|
font-size: 10px;
|
|
color: var(--text-faint);
|
|
}
|
|
|
|
/* ---------- Load more ---------- */
|
|
.agentmd-load-more {
|
|
padding: 10px;
|
|
text-align: center;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
/* ---------- Agent Detail View ---------- */
|
|
.agentmd-agent-detail .agent-detail-header {
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
.exec-title .agent-detail-name {
|
|
font-size: var(--font-ui-large);
|
|
}
|
|
.agent-detail-desc {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-ui-small);
|
|
line-height: 1.5;
|
|
margin-bottom: 12px;
|
|
}
|
|
.agent-detail-actions {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
/* agent-detail-stats removed — now uses shared exec-meta-line pattern */
|
|
.agent-detail-section {
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
.agent-detail-section-header {
|
|
padding: 10px 16px;
|
|
font-size: 11px;
|
|
color: var(--text-faint);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
font-weight: var(--font-semibold);
|
|
background: var(--background-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.agent-detail-link {
|
|
color: #3b82f6;
|
|
cursor: pointer;
|
|
font-size: 10px;
|
|
text-transform: none;
|
|
letter-spacing: 0;
|
|
}
|
|
.agent-detail-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.agent-detail-config {
|
|
padding: 8px 0;
|
|
}
|
|
.agent-detail-config-row {
|
|
display: flex;
|
|
padding: 5px 16px;
|
|
font-size: var(--font-ui-smaller);
|
|
}
|
|
.agent-detail-config-row .config-label {
|
|
color: var(--text-faint);
|
|
min-width: 120px;
|
|
}
|
|
.agent-detail-config-row .config-value {
|
|
color: var(--text-normal);
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
/* ---------- Empty states ---------- */
|
|
.agentmd-empty {
|
|
padding: 24px 16px;
|
|
text-align: center;
|
|
color: var(--text-faint);
|
|
font-size: var(--font-ui-small);
|
|
}
|
|
|
|
/* ---------- Offline state (replaces all content when backend is down) ---------- */
|
|
/* ---------- Empty states (tabs with no content) ---------- */
|
|
.agentmd-empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 48px 24px;
|
|
min-height: 200px;
|
|
}
|
|
.agentmd-empty-icon {
|
|
color: var(--text-faint);
|
|
margin-bottom: 10px;
|
|
}
|
|
.agentmd-empty-icon svg {
|
|
width: 34px;
|
|
height: 34px;
|
|
}
|
|
.agentmd-empty-title {
|
|
font-size: var(--font-ui-medium);
|
|
font-weight: var(--font-semibold);
|
|
color: var(--text-muted);
|
|
margin-bottom: 6px;
|
|
}
|
|
.agentmd-empty-desc {
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-faint);
|
|
max-width: 280px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.agentmd-offline-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 48px 24px;
|
|
min-height: 200px;
|
|
text-align: center;
|
|
}
|
|
.agentmd-offline-icon {
|
|
color: var(--text-faint);
|
|
margin-bottom: 12px;
|
|
}
|
|
.agentmd-offline-icon svg {
|
|
width: 42px;
|
|
height: 42px;
|
|
}
|
|
.agentmd-offline-title {
|
|
font-size: var(--font-ui-medium);
|
|
font-weight: var(--font-semibold);
|
|
color: var(--text-muted);
|
|
margin-bottom: 8px;
|
|
}
|
|
.agentmd-offline-desc {
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-muted);
|
|
max-width: 300px;
|
|
line-height: 1.5;
|
|
margin-bottom: 4px;
|
|
}
|
|
.agentmd-offline-help {
|
|
margin-top: 16px;
|
|
font-size: var(--font-ui-smaller);
|
|
color: var(--text-faint);
|
|
}
|
|
.agentmd-offline-link {
|
|
color: var(--text-accent);
|
|
}
|
|
.agentmd-offline-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.agentmd-offline-cmd {
|
|
font-size: var(--font-ui-small);
|
|
color: var(--text-faint);
|
|
}
|
|
.agentmd-offline-cmd code {
|
|
background: var(--background-secondary);
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-family: var(--font-monospace);
|
|
color: var(--text-muted);
|
|
}
|
|
.agentmd-offline-start-btn {
|
|
margin-top: 12px;
|
|
padding: 6px 16px;
|
|
font-size: var(--font-ui-small);
|
|
}
|