@bolloon/bolloon-agent 0.1.34 → 0.1.36

package/src/web/style.css

@@ -39,6 +39,13 @@
   --warning-bg: rgba(245, 158, 11, 0.1);
   --info: #2196f3;
   --info-bg: rgba(33, 150, 243, 0.1);
+
+  /* 二级 / 三级面 (次级背景, 嵌套层) — 补全未定义变量, 此前引用处 fallback 到 unset */
+  --bg-secondary: #252522;
+  --bg-tertiary: #2f2f2a;
+  --text-primary: #e8e8e0;
+  --font-mono: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  --accent-light: #e8f060;
 }
 
 [data-theme="light"] {
@@ -58,6 +65,13 @@
   --ai-text: #2a2a20;
   --border: #d0d0c0;
   --border-light: #c0c0b0;
+
+  /* 二级 / 三级面 — 补全未定义变量 */
+  --bg-secondary: #f5f5ed;
+  --bg-tertiary: #fafaf2;
+  --text-primary: #1a1a18;
+  --font-mono: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+  --accent-light: #c4d240;
 }
 
 body {
@@ -472,6 +486,63 @@ body {
   font-weight: 500;
 }
 
+/* 2026-06-16: P2P 远端 header 紧凑变体 + mini 按钮 (替代 HTML L66-74 内联) */
+.section-header.is-compact {
+  margin-bottom: 8px;
+  padding-bottom: 0;
+  position: static;
+}
+.section-header.is-compact::after {
+  display: none;
+}
+.section-header.is-clickable {
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s;
+}
+.section-header.is-clickable:hover {
+  background: var(--bg-hover);
+}
+.section-header-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.section-header-row .section-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+}
+.section-header-actions {
+  display: flex;
+  gap: 4px;
+}
+.sidebar-mini-btn {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 11px;
+  line-height: 1;
+  transition: var(--transition);
+}
+.sidebar-mini-btn:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+  border-color: var(--border-light);
+}
+.sidebar-empty-hint {
+  color: var(--text-muted);
+  font-size: 11px;
+  padding: 8px 4px;
+  text-align: center;
+  list-style: none;
+}
+
 .channel-icon {
   width: 28px;
   height: 28px;
@@ -938,8 +1009,12 @@ body {
 .bubble {
   padding: 14px 18px;
   border-radius: var(--radius);
-  line-height: 1.6;
-  white-space: pre-wrap;
+  line-height: 1.7;
+  /* 2026-06-16: pre-wrap 改为 pre-line — 保留换行, 但折叠 token 间的多余空格.
+     pre-wrap 模式下 marked 输出里 "\n\n" 之外的 token 边界空格被原样保留,
+     视觉上字符间隔过大. pre-line 保持段落结构 (换行生效), 不再放大空格.
+     重要: .bubble pre 子元素走 pre-wrap (见 .bubble pre), 代码块缩进不受影响. */
+  white-space: pre-line;
   word-break: break-word;
   font-size: 15px;
 }
@@ -958,6 +1033,21 @@ body {
   border-bottom-left-radius: 4px;
 }
 
+/* System / Error 变体 — 2026-06-16 补全, 之前 system/error 走 addMessage 缺样式
+   - system: 信息提示感, 左色条
+   - error: 错误提示, 红边 */
+.bubble-system {
+  background: var(--bg-secondary);
+  border-left: 3px solid var(--accent-dark);
+  color: var(--text);
+}
+.bubble-error {
+  background: #3a2a2a;
+  border: 1px solid var(--error);
+  border-left: 3px solid var(--error);
+  color: #f0d0d0;
+}
+
 .message-header {
   font-family: 'JetBrains Mono', monospace;
   font-size: 12px;
@@ -1139,10 +1229,6 @@ body {
 }
 
 /* Markdown Styles */
-.bubble {
-  line-height: 1.7;
-}
-
 .bubble h1, .bubble h2, .bubble h3, .bubble h4, .bubble h5, .bubble h6 {
   margin-top: 16px;
   margin-bottom: 8px;
@@ -1225,96 +1311,6 @@ body {
   max-width: 100%;
   border-radius: var(--radius-sm);
 }
-.workflow-display {
-  background: var(--bg-secondary);
-  border: 1px solid var(--accent);
-  border-radius: var(--radius);
-  padding: 12px 16px;
-  margin: 8px 0;
-  animation: fadeIn 0.3s ease;
-}
-
-.workflow-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 12px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--border);
-}
-
-.workflow-icon {
-  font-size: 18px;
-  animation: pulse 1.5s infinite;
-}
-
-.workflow-title {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--text-primary);
-}
-
-.workflow-loop-count {
-  font-size: 12px;
-  color: var(--accent);
-  background: var(--bg-tertiary);
-  padding: 2px 8px;
-  border-radius: 10px;
-  display: none;
-}
-
-.workflow-steps-list {
-  margin-bottom: 10px;
-}
-
-.workflow-step-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 13px;
-  color: var(--text-secondary);
-  padding: 4px 0;
-}
-
-.step-running {
-  animation: spin 1s linear infinite;
-  color: var(--accent);
-}
-
-.workflow-streams {
-  max-height: 200px;
-  overflow-y: auto;
-}
-
-.workflow-step-stream {
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 8px 12px;
-  margin-bottom: 8px;
-}
-
-.workflow-step-stream .step-label {
-  font-size: 12px;
-  color: var(--accent);
-  margin-bottom: 4px;
-}
-
-.workflow-step-stream .step-content {
-  font-size: 13px;
-  color: var(--text-secondary);
-  white-space: pre-wrap;
-}
-
-.workflow-loop-item {
-  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-tertiary) 100%);
-  border: 1px solid var(--accent);
-  border-radius: var(--radius-sm);
-  padding: 10px 14px;
-  margin-bottom: 8px;
-  animation: slideIn 0.3s ease;
-}
-
 /* User Command Display - inside message div */
 .message-user .user-command-display {
   background: linear-gradient(135deg, var(--bg) 0%, var(--bg-tertiary) 100%);
@@ -1351,120 +1347,11 @@ body {
   margin: 0;
 }
 
-@keyframes blink {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.3; }
-}
-
-/* Tool Results Container */
-.tool-results-container {
-  margin: 8px 0;
-}
-
-.tool-result-item {
-  background: var(--bg-secondary);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  margin-bottom: 6px;
-  overflow: hidden;
-}
-
-.tool-result-item.collapsed .tool-result-content {
-  display: none;
-}
-
-.tool-result-item.expanded {
-  border-color: var(--accent);
-}
-
-.tool-result-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  cursor: pointer;
-  background: var(--bg-tertiary);
-  transition: background 0.2s;
-}
-
-.tool-result-header:hover {
-  background: var(--bg);
-}
-
-.tool-result-icon {
-  font-size: 14px;
-}
-
-.tool-result-name {
-  font-size: 12px;
-  color: var(--text-secondary);
-  flex: 1;
-}
-
-.tool-result-toggle {
-  font-size: 10px;
-  color: var(--text-muted);
-  transition: transform 0.2s;
-}
-
-.tool-result-item.expanded .tool-result-toggle {
-  transform: rotate(90deg);
-}
-
-.tool-result-content {
-  padding: 10px 12px;
-  background: var(--bg);
-}
-
-.tool-result-content pre {
-  font-family: 'JetBrains Mono', monospace;
-  font-size: 11px;
-  color: var(--text-secondary);
-  margin: 0;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-.loop-header {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 6px;
-}
-
-.loop-icon {
-  font-size: 16px;
-}
-
-.loop-status {
-  font-size: 11px;
-  color: var(--accent);
-  background: var(--bg-tertiary);
-  padding: 2px 6px;
-  border-radius: 4px;
-}
-
-.loop-content {
-  font-size: 13px;
-  color: var(--text-secondary);
-  white-space: pre-wrap;
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.7; transform: scale(1.1); }
-}
-
 @keyframes slideIn {
   from { opacity: 0; transform: translateY(-10px); }
   to { opacity: 1; transform: translateY(0); }
 }
 
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
 /* Typing Indicator */
 .typing {
   display: flex;
@@ -1488,10 +1375,6 @@ body {
   font-size: 14px;
 }
 
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
 /* Streaming Indicator */
 .streaming-content {
   display: flex;
@@ -1605,13 +1488,138 @@ body {
     -webkit-text-fill-color: var(--text-secondary);
   }
 }
-
-/* Input Area */
-.input-area {
-  padding: 20px 24px;
-  border-top: 1px solid var(--border);
-  background: var(--bg-sidebar);
+
+/* Input Area */
+.input-area {
+  padding: 20px 24px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-sidebar);
+  flex-shrink: 0;
+}
+
+/* 2026-06-16: 循环 status bar — 三态机 (loading / error / done)
+   loading: spinner + 描述文本
+   error:   🔴 提示 + 「重试」按钮 → POST /api/loop/retry
+   done:    ✓ 提示 + 「检查」按钮 → GET /api/loop/inspect (弹 modal 看循环产出)
+   不再显示循环计数, 不再显示百分比. */
+.loop-status-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 24px;
+  background: var(--bg-tertiary);
+  border-top: 1px solid var(--border);
+  font-size: 12px;
+  color: var(--text-secondary);
+  flex-shrink: 0;
+  transition: opacity 0.2s ease, max-height 0.2s ease, background 0.2s ease;
+  max-height: 60px;
+  overflow: hidden;
+}
+.loop-status-bar[hidden] {
+  display: none !important;
+}
+.loop-status-bar[data-tone="warn"] {
+  background: rgba(245, 158, 11, 0.12);
+  color: var(--warning, #f59e0b);
+  border-top-color: rgba(245, 158, 11, 0.35);
+}
+.loop-status-bar[data-state="error"] {
+  background: rgba(239, 68, 68, 0.12);
+  color: var(--error, #ef4444);
+  border-top-color: rgba(239, 68, 68, 0.35);
+  animation: loop-status-shake 0.4s ease-out;
+}
+.loop-status-bar[data-state="retrying"] {
+  background: rgba(245, 158, 11, 0.12);
+  color: var(--warning, #f59e0b);
+  border-top-color: rgba(245, 158, 11, 0.35);
+}
+.loop-status-bar[data-state="done"] {
+  background: rgba(34, 197, 94, 0.12);
+  color: var(--success, #22c55e);
+  border-top-color: rgba(34, 197, 94, 0.35);
+  animation: loop-status-fade-in 0.3s ease-out;
+}
+@keyframes loop-status-shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-3px); }
+  75% { transform: translateX(3px); }
+}
+@keyframes loop-status-fade-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.loop-status-spinner {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: loop-status-spin 0.7s linear infinite;
+  flex-shrink: 0;
+  opacity: 0.85;
+}
+.loop-status-bar[data-state="done"] .loop-status-spinner {
+  animation: none;
+  border-right-color: currentColor;
+  opacity: 1;
+}
+.loop-status-icon {
+  display: none;
+  font-size: 14px;
+  flex-shrink: 0;
+  line-height: 1;
+}
+.loop-status-bar[data-state="done"] .loop-status-icon::before { content: '✓'; }
+.loop-status-bar[data-state="done"] .loop-status-icon {
+  display: inline-block;
+}
+.loop-status-retry {
+  flex-shrink: 0;
+  font-size: 11px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  padding: 2px 8px;
+  background: rgba(245, 158, 11, 0.2);
+  border-radius: 3px;
+  letter-spacing: 0.3px;
+}
+@keyframes loop-status-spin {
+  to { transform: rotate(360deg); }
+}
+.loop-status-text {
+  flex: 1;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.loop-status-action {
   flex-shrink: 0;
+  padding: 4px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  border: 1px solid currentColor;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  transition: background 0.15s ease, transform 0.1s ease;
+}
+.loop-status-action:hover {
+  background: currentColor;
+  color: var(--bg);
+}
+.loop-status-action:active {
+  transform: scale(0.96);
+}
+.loop-status-action:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
 .input-wrapper {
@@ -1667,6 +1675,24 @@ body {
   transform: scale(0.95);
 }
 
+/* 2026-06-15: 流式期间切到 abort 状态 — 红色边框 + 终止图标 */
+.send-btn[data-state="abort"] {
+  background: var(--bg-main);
+  border: 1.5px solid var(--warning);
+  color: var(--warning);
+}
+.send-btn[data-state="abort"]:hover {
+  background: color-mix(in srgb, var(--warning) 12%, var(--bg-main));
+  transform: scale(1.05);
+}
+.send-btn[data-state="aborting"] {
+  background: var(--bg-main);
+  border: 1.5px solid var(--warning);
+  color: var(--warning);
+  opacity: 0.7;
+  cursor: wait;
+}
+
 /* Responsive */
 @media (max-width: 768px) {
   .sidebar {
@@ -1706,6 +1732,125 @@ body {
   display: flex;
 }
 
+/* 2026-06-16: Judgment Modal tabs (替换 HTML L233-258 内联) */
+.judgment-tab-bar {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  margin-top: 20px;
+}
+.judgment-tab {
+  flex: 1;
+  padding: 10px 12px;
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--text-secondary);
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: var(--transition);
+}
+.judgment-tab:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+.judgment-tab.active {
+  color: var(--accent-hover);
+  border-bottom-color: var(--accent-hover);
+}
+.judgment-tab .tab-channel-name {
+  font-weight: normal;
+  color: var(--text-muted);
+}
+.judgment-status-bar {
+  display: flex;
+  gap: 6px;
+  margin-top: 10px;
+  font-size: 12px;
+  align-items: center;
+}
+.judgment-status-bar .label {
+  color: var(--text-muted);
+}
+.judgment-status-tab {
+  background: var(--bg-hover);
+  color: var(--text-secondary);
+  border: none;
+  padding: 3px 10px;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 11px;
+  transition: var(--transition);
+}
+.judgment-status-tab:hover {
+  background: var(--bg-active);
+  color: var(--text-primary);
+}
+.judgment-status-tab.active {
+  background: var(--accent);
+  color: var(--bg);
+}
+.judgment-form-row {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+.judgment-form-row label {
+  margin: 0;
+}
+.judgment-form-row label + label {
+  margin-left: 16px;
+}
+.judgment-list-header {
+  margin-top: 16px;
+  font-size: 14px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.judgment-list-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+  font-size: 12px;
+  font-weight: normal;
+}
+.judgment-select-all-label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  color: var(--text-muted);
+}
+.judgment-bulk-delete {
+  background: transparent;
+  border: 1px solid var(--error);
+  color: var(--error);
+  padding: 1px 8px;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 11px;
+  opacity: 0.5;
+}
+.judgment-bulk-delete:not(:disabled):hover {
+  opacity: 1;
+  background: var(--error-bg);
+}
+.judgment-bulk-delete:disabled {
+  cursor: not-allowed;
+}
+.judgment-error {
+  color: var(--error);
+  display: none;
+}
+.judgment-list {
+  max-height: 420px;
+  overflow-y: auto;
+}
+
 .modal-content {
   background: var(--bg);
   border: 1px solid var(--border);
@@ -2775,10 +2920,6 @@ body {
 .btn-save:hover {
   opacity: 0.9;
 }
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
   background: var(--bg-sidebar);
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
@@ -3094,10 +3235,6 @@ body:has(> .api-config-page) {
   will-change: transform;
 }
 
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
 .error-state {
   display: flex;
   flex-direction: column;
@@ -3238,11 +3375,6 @@ body:has(> .api-config-page) {
   display: block;
 }
 
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
 /* P2P Identity Card */
 .p2p-identity-card {
   background: var(--bg-secondary);
@@ -3280,11 +3412,6 @@ body:has(> .api-config-page) {
   background: var(--text-muted);
 }
 
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.5; }
-}
-
 .identity-info {
   margin-bottom: 16px;
 }
@@ -3862,11 +3989,6 @@ body:has(> .api-config-page) {
   animation: pulse 2s infinite;
 }
 
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.6; }
-}
-
 .peer-status-indicator {
   flex-shrink: 0;
 }
@@ -4356,18 +4478,8 @@ body:has(> .api-config-page) {
 }
 
 /* ============================================================
- * 2026-06-10: Toast 入场动画 (simple-toast 用)
+ * 2026-06-10: Toast 入场动画 (simple-toast 用 — 实际用 toastFade @ L3992, toast-in 是死代码)
  * ============================================================ */
-@keyframes toast-in {
-  from {
-    opacity: 0;
-    transform: translateX(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
 
 /* ============================================================
  * 2026-06-10: P2P peer-group 可折叠 — 复用 #remote-agents-section.collapsed 模式
@@ -4453,3 +4565,173 @@ body:has(> .api-config-page) {
   margin-top: 2px;
   font-family: 'JetBrains Mono', monospace;
 }
+
+/* ============================================================================
+ * 2026-06-15: step-timeline — 气泡内 4 状态步骤条
+ *   摘要条 (折叠态) + 详情区 (展开态) 共用同一份 steps: Step[] 数据
+ *   状态: idle ○ / active ● / done 🟢 / error 🔴
+ * ========================================================================== */
+
+.step-timeline {
+  margin: 8px 0 4px 0;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-hover);
+  font-size: 12px;
+  color: var(--text);
+  overflow: hidden;
+}
+
+.step-timeline-summary {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 10px;
+  cursor: pointer;
+  user-select: none;
+  transition: background 0.15s;
+}
+.step-timeline-summary:hover { background: var(--bg-main); }
+
+.step-timeline-title {
+  font-weight: 500;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+}
+
+.step-timeline-dots {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.step-dot {
+  display: inline-block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  flex-shrink: 0;
+  transition: background 0.2s, box-shadow 0.2s;
+}
+.step-dot[data-status="active"] {
+  background: var(--accent);
+  box-shadow: 0 0 0 0 var(--accent);
+  animation: step-dot-pulse 1.4s infinite;
+}
+.step-dot[data-status="done"]   { background: var(--success); }
+.step-dot[data-status="error"]  { background: var(--warning); }
+
+@keyframes step-dot-pulse {
+  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
+  70%  { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 0%, transparent); }
+  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
+}
+
+.step-timeline-arrow {
+  font-size: 10px;
+  color: var(--text-muted);
+  transition: transform 0.2s;
+  flex-shrink: 0;
+}
+
+.step-timeline-body {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-in-out;
+  border-top: 1px solid transparent;
+}
+.step-timeline:not([data-empty]) .step-timeline-body {
+  /* 内容存在时给 body 一个合理上限, 避免长任务撑爆 */
+  max-height: 320px;
+  overflow-y: auto;
+  border-top-color: var(--border);
+}
+
+.step-timeline-list {
+  list-style: none;
+  margin: 0;
+  padding: 6px 10px 8px 24px;
+  position: relative;
+}
+/* 详情区垂直时间轴线 */
+.step-timeline-list::before {
+  content: '';
+  position: absolute;
+  left: 14px;
+  top: 12px;
+  bottom: 12px;
+  width: 1px;
+  background: var(--border);
+}
+
+.step-timeline-node {
+  position: relative;
+  padding: 4px 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.step-timeline-node:last-child { padding-bottom: 2px; }
+
+.step-timeline-marker {
+  position: absolute;
+  left: -18px;
+  top: 9px;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  border: 2px solid var(--bg-hover);
+  box-shadow: 0 0 0 1px var(--border);
+  flex-shrink: 0;
+  transition: background 0.2s, box-shadow 0.2s;
+}
+.step-timeline-node[data-status="active"] .step-timeline-marker {
+  background: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent);
+  animation: step-dot-pulse 1.4s infinite;
+}
+.step-timeline-node[data-status="done"]  .step-timeline-marker { background: var(--success); box-shadow: 0 0 0 1px var(--success); }
+.step-timeline-node[data-status="error"] .step-timeline-marker { background: var(--warning); box-shadow: 0 0 0 1px var(--warning); }
+
+.step-timeline-label {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  color: var(--text);
+  flex-shrink: 0;
+}
+.step-timeline-node[data-status="error"] .step-timeline-label { color: var(--warning); }
+.step-timeline-node[data-status="done"]  .step-timeline-label { color: var(--success); }
+
+.step-timeline-args {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 10px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+
+.step-timeline-more {
+  list-style: none;
+  padding: 4px 0 4px 0;
+  margin: 0;
+  font-size: 11px;
+  color: var(--accent);
+  cursor: pointer;
+  user-select: none;
+  font-family: 'JetBrains Mono', monospace;
+}
+.step-timeline-more:hover { text-decoration: underline; }
+