cx-viewer 1.0.2 → 1.0.4

package/src/components/viewers/WorkflowPanel.jsx

@@ -0,0 +1,243 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Segmented } from 'antd';
+import { t } from '../../i18n';
+import { apiUrl } from '../../utils/apiUrl';
+import { getModelShort, getModelMaxTokens } from '../../utils/helpers';
+import { subscribe, getLatest } from '../../utils/workflowStore';
+import { TERMINAL_STATES, STATUS_KEYS, fmtDuration, fmtTokens, stateGlyph } from '../../utils/workflowFormat';
+import WorkflowTimeline from './WorkflowTimeline';
+import styles from './WorkflowPanel.module.css';
+
+function stateClass(state) {
+  if (state === 'done' || state === 'completed') return styles.stateDone;
+  if (state === 'failed' || state === 'error') return styles.stateFailed;
+  if (state === 'queued') return styles.stateQueued;
+  return styles.stateRunning;
+}
+
+function AgentRow({ agent }) {
+  const model = getModelShort(agent.model);
+  const is1M = agent.model && getModelMaxTokens(agent.model) >= 1000000;
+  const running = !TERMINAL_STATES.has(agent.state);
+  const dur = fmtDuration(agent.durationMs);
+  // 运行中显示「在干嘛」：最近一次工具名（hover 看摘要）
+  const doing = running && agent.lastToolName ? agent.lastToolName : '';
+  return (
+    <div className={styles.agentRow}>
+      <span className={`${styles.stateDot} ${stateClass(agent.state)} ${running ? styles.statePulse : ''}`} title={agent.state}>
+        {stateGlyph(agent.state)}
+      </span>
+      <span className={styles.labelCell}>
+        <span className={styles.agentLabel} title={agent.label}>{agent.label || agent.agentType || agent.agentId}</span>
+        {doing && <span className={styles.agentDoing} title={agent.lastToolSummary || doing}>{doing}</span>}
+      </span>
+      <span className={styles.agentModel} title={model ? `${model}${is1M ? ' · 1M' : ''}` : ''}>
+        {model ? `${model}${is1M ? ' · 1M' : ''}` : ''}
+      </span>
+      <span className={styles.metaTok}>{fmtTokens(agent.tokens)}</span>
+      <span className={styles.metaTool}>{agent.toolCalls}</span>
+      <span className={styles.metaDur}>{dur || ''}</span>
+    </div>
+  );
+}
+
+function AgentHead({ title }) {
+  return (
+    <div className={`${styles.agentRow} ${styles.agentHead}`}>
+      <span className={styles.stateDot} />
+      <span className={styles.labelCell}>{title}</span>
+      <span className={styles.agentModel}>{t('ui.workflow.colModel')}</span>
+      <span className={styles.metaTok}>{t('ui.workflow.colTokens')}</span>
+      <span className={styles.metaTool}>{t('ui.workflow.tools')}</span>
+      <span className={styles.metaDur}>{t('ui.workflow.colDur')}</span>
+    </div>
+  );
+}
+
+function WorkflowBody({ data, view, now }) {
+  if (view === 'timeline') return <WorkflowTimeline data={data} now={now} />;
+  return <WorkflowList data={data} />;
+}
+
+function WorkflowList({ data }) {
+  const activePhaseIndex = useMemo(() => {
+    const running = (data.agents || []).filter(a => !TERMINAL_STATES.has(a.state) && typeof a.phaseIndex === 'number');
+    if (running.length) return Math.max(...running.map(a => a.phaseIndex));
+    return null;
+  }, [data]);
+
+  const phases = data.phases || [];
+  const agents = data.agents || [];
+
+  // 运行中（live）有 phases 但 agent 的 phaseIndex 恒 null（无权威 agent→phase 映射）→ 不分组，
+  // 走扁平 agent 列表（phases 列仍显示）；完成态权威快照 agent 带 numeric phaseIndex → 分组。
+  const grouped = phases.length > 0 && agents.some(a => typeof a.phaseIndex === 'number');
+
+  // 按 phaseIndex 分组；无 phase 的 agent 归到 0 组（少见）。
+  const byPhase = useMemo(() => {
+    const m = new Map();
+    for (const a of agents) {
+      const k = typeof a.phaseIndex === 'number' ? a.phaseIndex : 0;
+      if (!m.has(k)) m.set(k, []);
+      m.get(k).push(a);
+    }
+    return m;
+  }, [agents]);
+
+  // 分组态下 phaseIndex 不落在任一 phase 的剩余 agent（含归到 0 组者）——尾部无标题兜底渲染，
+  // 避免 phases.map 只遍历 1..N 时把它们丢弃。
+  const orphanAgents = useMemo(() => {
+    if (!grouped) return [];
+    const known = new Set(phases.map(p => p.index));
+    return agents.filter(a => !(typeof a.phaseIndex === 'number' && known.has(a.phaseIndex)));
+  }, [grouped, phases, agents]);
+
+  return (
+    <div className={styles.body}>
+      {phases.length > 0 && (
+        <div className={styles.phasesCol}>
+          <div className={styles.colTitle}>{t('ui.workflow.phases')}</div>
+          {phases.map(p => (
+            <div
+              key={p.index}
+              className={`${styles.phaseItem} ${p.index === activePhaseIndex ? styles.phaseActive : ''}`}
+              title={p.detail}
+            >
+              <span className={styles.phaseIdx}>{p.index}</span>
+              <span className={styles.phaseTitle}>{p.title}</span>
+            </div>
+          ))}
+        </div>
+      )}
+      <div className={styles.agentsCol}>
+        <AgentHead title={t('ui.workflow.agents', { count: agents.length })} />
+        {grouped
+          ? (<>
+              {phases.map(p => {
+                const list = byPhase.get(p.index) || [];
+                if (!list.length) return null;
+                const groupTitle = p.detail ? `${p.title}: ${p.detail}` : p.title;
+                return (
+                  <div key={p.index} className={styles.phaseGroup}>
+                    <div className={styles.phaseGroupTitle} title={groupTitle}>{groupTitle}</div>
+                    {list.map((a, i) => <AgentRow key={a.agentId || i} agent={a} />)}
+                  </div>
+                );
+              })}
+              {orphanAgents.map((a, i) => <AgentRow key={a.agentId || `orphan-${i}`} agent={a} />)}
+            </>)
+          : agents.map((a, i) => <AgentRow key={a.agentId || i} agent={a} />)}
+      </div>
+    </div>
+  );
+}
+
+export default function WorkflowPanel({ workflow, resultText, defaultCollapsed, collapsible = true }) {
+  const runId = workflow?.runId || null;
+  const taskId = workflow?.taskId || null;
+  const session = workflow?.sessionId || null;
+  const project = workflow?.project || null;
+  const key = runId || taskId;
+
+  const [collapsed, setCollapsed] = useState(defaultCollapsed ?? false);
+  const [data, setData] = useState(() => getLatest(key));
+  const [error, setError] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [view, setView] = useState('list');  // 'list' | 'timeline'
+  const [now, setNow] = useState(() => Date.now());
+
+  // 时间轴模式下、运行中时每秒走一帧，让进行中横条延伸
+  useEffect(() => {
+    if (view !== 'timeline' || !data?.live) return undefined;
+    const id = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(id);
+  }, [view, data?.live]);
+
+  // REST 首拉
+  useEffect(() => {
+    if (!session || (!runId && !taskId)) return;
+    let alive = true;
+    setLoading(true);
+    setError(false);
+    const params = new URLSearchParams();
+    params.set('session', session);
+    if (runId) params.set('runId', runId);
+    else if (taskId) params.set('taskId', taskId);
+    if (project) params.set('project', project);
+    fetch(apiUrl(`/api/workflow-journal?${params.toString()}`))
+      .then(r => r.json())
+      .then(j => {
+        if (!alive) return;
+        if (j && j.ok && j.data) {
+          // 若 SSE 已先送达权威完成快照（live!==true），别用可能滞后的 REST（含运行中）覆盖回退。
+          // 用 `prev.live !== true` 判权威，不依赖完成快照是否显式带 live:false。
+          setData(prev => (prev && prev.live !== true && j.data.live) ? prev : j.data);
+        } else setError(true);
+      })
+      .catch(() => { if (alive) setError(true); })
+      .finally(() => { if (alive) setLoading(false); });
+    return () => { alive = false; };
+  }, [session, runId, taskId, project]);
+
+  // SSE 实时跟随
+  useEffect(() => {
+    if (!key) return undefined;
+    return subscribe(key, (next) => setData(next));
+  }, [key]);
+
+  // 没拿到结构化 id（旧条目）→ 回退纯文本，保持原行为
+  if (!session || (!runId && !taskId)) {
+    return <pre className={styles.fallback}>{resultText}</pre>;
+  }
+
+  const title = data?.workflowName || t('ui.workflow.title');
+  const statusLabel = data?.status ? (STATUS_KEYS[data.status] ? t(STATUS_KEYS[data.status]) : data.status) : '';
+
+  return (
+    <div className={styles.panel}>
+      <div
+        className={styles.header}
+        onClick={collapsible ? () => setCollapsed(c => !c) : undefined}
+        style={collapsible ? undefined : { cursor: 'default' }}
+      >
+        <div className={styles.headerMain}>
+          <span className={styles.wfName}>{title}</span>
+          {data?.summary && <span className={styles.wfSummary}>{data.summary}</span>}
+        </div>
+        <div className={styles.headerMeta}>
+          {data?.live && <span className={`${styles.liveDot} ${styles.statePulse}`} title={statusLabel} />}
+          {data && (
+            <span className={styles.headerStat}>
+              {t('ui.workflow.agentsShort', { count: data.agentCount || 0 })}
+              {data.totalTokens ? ` · ${fmtTokens(data.totalTokens)} ${t('ui.workflow.tok')}` : ''}
+              {statusLabel ? ` · ${statusLabel}` : ''}
+            </span>
+          )}
+          {data && !collapsed && (
+            <span className={styles.viewToggle} onClick={(e) => e.stopPropagation()}>
+              <Segmented
+                size="small"
+                value={view}
+                onChange={(val) => { if (val === 'timeline') setNow(Date.now()); setView(val); }}
+                options={[
+                  { label: t('ui.workflow.viewList'), value: 'list' },
+                  { label: t('ui.workflow.viewTimeline'), value: 'timeline' },
+                ]}
+              />
+            </span>
+          )}
+          {collapsible && (
+            <span className={styles.toggle}>{collapsed ? t('ui.expand') : t('ui.collapse')}</span>
+          )}
+        </div>
+      </div>
+      {!collapsed && (
+        <>
+          {error && !data && <div className={styles.notice}>{t('ui.workflow.loadFailed')}</div>}
+          {loading && !data && <div className={styles.notice}>{t('ui.workflow.loading')}</div>}
+          {data && <WorkflowBody data={data} view={view} now={now} />}
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/viewers/WorkflowPanel.module.css

@@ -0,0 +1,265 @@
+.panel {
+  border: 1px solid var(--border-secondary);
+  border-radius: 6px;
+  background: var(--bg-container);
+  overflow: hidden;
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 8px 12px;
+  cursor: pointer;
+  border-bottom: 1px solid var(--border-secondary);
+}
+
+.headerMain {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.wfName {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--color-primary);
+  word-break: break-word;
+}
+
+.wfSummary {
+  font-size: 12px;
+  color: var(--text-secondary);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.headerMeta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.headerStat {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.toggle {
+  font-size: 12px;
+  color: var(--color-primary);
+}
+
+.notice {
+  padding: 10px 12px;
+  font-size: 12px;
+  color: var(--text-gray);
+}
+
+.body {
+  display: flex;
+  gap: 0;
+  align-items: stretch;
+}
+
+.colTitle {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-gray);
+  padding: 6px 12px 4px;
+}
+
+.phasesCol {
+  flex: 0 0 auto;
+  min-width: 140px;
+  max-width: 200px;
+  border-right: 1px solid var(--border-secondary);
+  padding-bottom: 8px;
+}
+
+.phaseItem {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 4px 12px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.phaseActive {
+  color: var(--color-primary);
+  font-weight: 600;
+  background: var(--color-primary-pale);
+}
+
+.phaseIdx {
+  color: var(--text-gray);
+  font-variant-numeric: tabular-nums;
+}
+
+.phaseTitle {
+  word-break: break-word;
+}
+
+.agentsCol {
+  flex: 1 1 auto;
+  min-width: 0;
+  padding-bottom: 8px;
+}
+
+.phaseGroup {
+  margin-top: 2px;
+}
+
+.phaseGroupTitle {
+  font-size: 11px;
+  color: var(--text-gray);
+  padding: 4px 12px 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.agentRow {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 3px 12px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+/* 阶段分组内的 agent 行相对组标题缩进 ~10px，体现层级（表头/无阶段扁平列表不缩进） */
+.phaseGroup .agentRow {
+  padding-left: 22px;
+}
+
+/* 列标题行：与数据行同列宽，整列对齐 */
+.agentHead {
+  color: var(--text-gray);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  border-bottom: 1px solid var(--border-secondary);
+  padding-top: 6px;
+  padding-bottom: 5px;
+  margin-bottom: 2px;
+}
+
+.labelCell {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  overflow: hidden;
+}
+
+.stateDot {
+  flex: 0 0 auto;
+  width: 1em;
+  text-align: center;
+  font-size: 11px;
+}
+
+.stateDone { color: var(--color-success, #3fb950); }
+.stateFailed { color: var(--color-error, #f85149); }
+.stateRunning { color: var(--text-secondary); }
+.stateQueued { color: var(--text-gray); }
+
+.statePulse { animation: cxvWfPulse 1.1s ease-in-out infinite; }
+
+@keyframes cxvWfPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+.liveDot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-success, #3fb950);
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .statePulse { animation: none; }
+}
+
+.agentLabel {
+  flex: 1 1 auto;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--color-primary);
+}
+
+.agentHead .labelCell { color: var(--text-gray); }
+
+.agentDoing {
+  flex: 0 0 auto;
+  max-width: 160px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background: var(--color-primary);
+  border-radius: 4px;
+  padding: 0 6px;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.96);
+}
+
+.agentModel {
+  flex: 0 0 104px;
+  color: var(--text-gray);
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 视图切换（列表 / 时间轴）—— 用 antd Segmented，自带滑块切换动画 */
+.viewToggle {
+  flex: 0 0 auto;
+  display: inline-flex;
+}
+
+/* 数值列：固定宽 + 右对齐 + 等宽数字，逐列对齐成表格 */
+.metaTok, .metaTool, .metaDur {
+  flex: 0 0 auto;
+  text-align: right;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.metaTok { flex-basis: 64px; color: var(--text-secondary); }
+.metaTool { flex-basis: 48px; color: var(--text-secondary); }
+.metaDur { flex-basis: 56px; color: var(--text-gray); }
+
+.fallback {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-size: 12px;
+}
+
+@media (max-width: 768px) {
+  .body { flex-direction: column; }
+  .phasesCol {
+    max-width: none;
+    border-right: none;
+    border-bottom: 1px solid var(--border-secondary);
+  }
+  .agentRow { gap: 6px; }
+  .agentModel { display: none; }
+  .agentDoing { display: none; }
+}

package/src/components/viewers/WorkflowTimeline.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { t } from '../../i18n';
+import { TERMINAL_STATES, fmtDuration, phaseColor } from '../../utils/workflowFormat';
+import { usePreviewTip } from '../common/HoverPreviewTip';
+import styles from './WorkflowTimeline.module.css';
+
+// 失败/运行中/排队走语义色类；完成条按阶段着色（内联 background）。
+function barClass(state) {
+  if (state === 'failed' || state === 'error') return styles.barFailed;
+  if (state === 'queued') return styles.barQueued;
+  if (state === 'done' || state === 'completed') return '';  // 完成 → 阶段色（内联）
+  return styles.barRunning;                                   // 运行中
+}
+
+/**
+ * 时间轴/甘特：每个 agent 一条 startedAt→duration 横条，直观看出并行与长尾瓶颈。
+ * 运行中的横条延伸到 now（调用方每秒喂一帧）。完成条按 phaseIndex 着色。
+ * compact: HUD 紧凑版（更窄标签、更矮横条）。
+ */
+export default function WorkflowTimeline({ data, now, compact }) {
+  // 菱形 prompt/result 预览：共享 usePreviewTip（事件委托 + 单实例 portal 浮层，与 TeamSessionPanel 甘特同源）。
+  const { previewHandlers, previewNode } = usePreviewTip();
+
+  const agents = (data.agents || []).filter(a => typeof a.startedAt === 'number');
+  if (!agents.length) return <div className={styles.notice}>{t('ui.workflow.noTimeline')}</div>;
+
+  const endOf = (a) => a.startedAt + (typeof a.durationMs === 'number' ? a.durationMs : Math.max(0, now - a.startedAt));
+  const start = Math.min(...agents.map(a => a.startedAt));
+  const end = Math.max(...agents.map(endOf));
+  const span = Math.max(1, end - start);
+  const sorted = [...agents].sort((x, y) => x.startedAt - y.startedAt);
+
+  return (
+    <>
+    <div
+      className={`${styles.timeline} ${compact ? styles.compact : ''}`}
+      {...previewHandlers}
+    >
+      {sorted.map((a, i) => {
+        const running = !TERMINAL_STATES.has(a.state);
+        const done = a.state === 'done' || a.state === 'completed';
+        const aEnd = endOf(a);
+        const left = ((a.startedAt - start) / span) * 100;
+        const width = Math.max(1.5, ((aEnd - a.startedAt) / span) * 100);
+        const d = fmtDuration(a.durationMs ?? Math.max(0, now - a.startedAt));
+        const barStyle = { left: `${left}%`, width: `${width}%` };
+        if (done) barStyle.background = phaseColor(a.phaseIndex);
+        const tailLeft = Math.min(100, left + width);
+        // 菱形参照 AgentTeam 时间轴：◆ 字形 + 投影 + hover 放大；颜色沿用本条着色（按阶段/语义）
+        const barColor = done
+          ? phaseColor(a.phaseIndex)
+          : (a.state === 'failed' || a.state === 'error') ? 'var(--color-error, #f85149)'
+          : a.state === 'queued' ? 'var(--text-gray)'
+          : 'var(--color-primary)';
+        return (
+          <div key={a.agentId || i} className={styles.ganttRow}>
+            <span className={styles.ganttLabel} title={a.label}>{a.label || a.agentType || a.agentId}</span>
+            <div className={styles.ganttTrack}>
+              <div
+                className={`${styles.ganttBar} ${barClass(a.state)} ${running ? styles.statePulse : ''}`}
+                style={barStyle}
+                title={`${a.label || ''}${a.phaseTitle ? ` · ${a.phaseTitle}` : ''} · ${d}`}
+              >
+                <span className={styles.ganttDur}>{d}</span>
+              </div>
+              {/* 头部菱形 → prompt 预览；尾部菱形 → result 预览。走 data-preview + usePreviewTip 委托浮层
+                  （不用原生 title：菱形 :hover scale 会重置其计时器、且会与自渲浮层双重弹出）。
+                  注：resultPreview 仅完成快照(journal)有值，live 推导恒为空 → 运行中只显示头部菱形。 */}
+              {a.promptPreview && (
+                <span className={styles.marker} style={{ left: `${left}%`, color: barColor }} data-preview={a.promptPreview}>◆</span>
+              )}
+              {a.resultPreview && (
+                <span className={styles.marker} style={{ left: `${tailLeft}%`, color: barColor }} data-preview={a.resultPreview}>◆</span>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+    {previewNode}
+    </>
+  );
+}

package/src/components/viewers/WorkflowTimeline.module.css

@@ -0,0 +1,116 @@
+/* 时间轴 / 甘特（WorkflowPanel 与 WorkflowLiveHud 共用） */
+.timeline {
+  padding: 8px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.ganttRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ganttLabel {
+  flex: 0 0 auto;
+  width: 180px;
+  min-width: 120px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--color-primary);
+  font-size: 12px;
+}
+
+.ganttTrack {
+  flex: 1 1 auto;
+  position: relative;
+  height: 16px;
+  background: var(--bg-sub-avatar, rgba(127, 127, 127, 0.12));
+  border-radius: 4px;
+}
+
+.ganttBar {
+  position: absolute;
+  top: 1px;
+  bottom: 1px;
+  border-radius: 3px;
+  min-width: 3px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.ganttDur {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.95);
+  padding: 0 4px 0 11px;  /* 左侧留白避开头部菱形遮挡 */
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+/* 头/尾菱形标记：参照 AgentTeam 时间轴的 ◆ 字形 + 投影 + hover 放大。
+   定位在 track 端点上（track 无 overflow:hidden，端点处不被裁切）；颜色由 JS 内联沿用本条着色。 */
+.marker {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 12px;
+  line-height: 1;
+  cursor: pointer;
+  z-index: 2;
+  filter: drop-shadow(0 0 2px var(--overlay-dark-strong));
+  transition: transform 0.15s;
+}
+
+.marker:hover { transform: translate(-50%, -50%) scale(1.4); }
+/* 预览浮层 .previewTip 已抽到 common/HoverPreviewTip.module.css（与 TeamSessionPanel 甘特共用）。 */
+
+.compact .marker { font-size: 10px; }
+
+/* 完成条由 JS 内联 background（phaseColor）着色；以下为非完成态语义色 */
+.barFailed { background: var(--color-error, #f85149); }
+.barRunning { background: var(--color-primary); }
+.barQueued { background: var(--text-gray); }
+
+.statePulse { animation: cxvTlPulse 1.1s ease-in-out infinite; }
+
+@keyframes cxvTlPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.45; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .statePulse { animation: none; }
+}
+
+.notice {
+  padding: 10px 12px;
+  font-size: 12px;
+  color: var(--text-gray);
+}
+
+/* HUD 紧凑版：更窄标签、更矮横条、更密的行距 */
+.compact {
+  padding: 4px 10px;
+  gap: 3px;
+}
+
+.compact .ganttLabel {
+  width: 120px;
+  min-width: 80px;
+  font-size: 11px;
+}
+
+.compact .ganttTrack {
+  height: 12px;
+}
+
+.compact .ganttDur {
+  font-size: 9px;
+}
+
+@media (max-width: 768px) {
+  .ganttLabel { width: 110px; min-width: 90px; }
+}