@joekytc/dsh-swarm 0.1.1 → 0.1.2

package/client/TaskDrawer.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import type { Chain, Handoff, KanbanEvent, SpecCard, Task } from '../src/domain/types.js';
 import { statusLabelOf } from './workflow-model.js';
+import { foldTimeline } from './timeline-model.js';
 
 const ROLE_NAME: Record<Task['assignee'], string> = {
   v: 'orchestrator', p: 'planner', w: 'wiki-bridge', d: 'fullstack-dev', pt: 'plan-review', dt: 'impl-review',
@@ -138,11 +139,34 @@ export function TaskDrawer(props: {
       )}
       {tab === 'timeline' && (
         <section role="tabpanel">
-          <ol>
-            {timeline.map((event) => (
-              <li key={event.seq}><code>{event.kind}</code><span>seq {event.seq} · {event.author} · {event.at}</span></li>
-            ))}
-          </ol>
+          {(() => {
+            const items = foldTimeline(timeline);
+            return (
+              <ol className="dsh-kb-timeline">
+                {items.map((item, i) => (
+                  <li
+                    key={item.seq}
+                    className={`dsh-kb-timeline__item dsh-kb-timeline__item--${item.status}${i === 0 ? ' dsh-kb-timeline__item--latest' : ''}`}
+                    data-exception={item.exception || undefined}
+                  >
+                    <div className="dsh-kb-timeline__axis">
+                      <span className="dsh-kb-timeline__dot" aria-hidden="true" />
+                    </div>
+                    <div className="dsh-kb-timeline__body">
+                      <div className="dsh-kb-timeline__row">
+                        <strong className="dsh-kb-timeline__label">
+                          {item.count ? `${item.label}（${item.count} 次）` : item.label}
+                        </strong>
+                        <time dateTime={new Date(item.at).toISOString()}>{formatTime(item.at)}</time>
+                      </div>
+                      {item.summary && <p className="dsh-kb-timeline__summary" title={item.summary}>{item.summary}</p>}
+                      <span className="dsh-kb-timeline__author">{item.author}</span>
+                    </div>
+                  </li>
+                ))}
+              </ol>
+            );
+          })()}
         </section>
       )}
       {tab === 'handoff' && (

package/client/kanban.css

@@ -511,6 +511,121 @@
 .dsh-kb-detail dd { margin: 0; }
 .dsh-kb-detail time { opacity: 0.6; font-size: 12px; margin-inline-end: 4px; }
 
+/* 轨迹 tab 可读化：物流式纵向时间轴（四态配色 + 最新节点高亮；异常整行标红） */
+.dsh-kb-timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+.dsh-kb-timeline__item {
+  position: relative;
+  display: grid;
+  grid-template-columns: 16px 1fr;
+  gap: 8px;
+  padding: 0 0 14px;
+}
+.dsh-kb-timeline__item:last-child {
+  padding-bottom: 0;
+}
+/* 纵向时间线：贯穿节点（最新节点上方线不延伸，模拟物流头节点） */
+.dsh-kb-timeline__axis {
+  position: relative;
+}
+.dsh-kb-timeline__item:not(:last-child) .dsh-kb-timeline__axis::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 14px;
+  bottom: -4px;
+  width: 2px;
+  transform: translateX(-50%);
+  background: var(--dsh-kb-border);
+}
+.dsh-kb-timeline__dot {
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 10px;
+  height: 10px;
+  /* 水平居中于 16px 轴列（中心=8px），与 left:50% 连接线对齐 */
+  margin: 2px auto 0;
+  border-radius: 50%;
+  border: 2px solid var(--dsh-kb-surface);
+  box-sizing: border-box;
+  background: var(--dsh-kb-text-tertiary);
+}
+/* 四态配色：neutral 灰 / running 蓝 / success 绿 / exception 红 */
+.dsh-kb-timeline__item--running .dsh-kb-timeline__dot {
+  background: var(--dsh-kb-active);
+}
+.dsh-kb-timeline__item--success .dsh-kb-timeline__dot {
+  background: var(--dsh-kb-complete);
+}
+.dsh-kb-timeline__item--exception .dsh-kb-timeline__dot {
+  background: var(--dsh-kb-blocked);
+}
+/* 最新节点高亮：主色圆点放大 + 柔和辉光 */
+.dsh-kb-timeline__item--latest .dsh-kb-timeline__dot {
+  width: 12px;
+  height: 12px;
+  margin-top: 0;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dsh-kb-active) 22%, transparent);
+}
+.dsh-kb-timeline__item--latest.dsh-kb-timeline__item--success .dsh-kb-timeline__dot {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dsh-kb-complete) 22%, transparent);
+}
+.dsh-kb-timeline__item--latest.dsh-kb-timeline__item--exception .dsh-kb-timeline__dot {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dsh-kb-blocked) 22%, transparent);
+}
+/* 异常行：浅红底 + 左侧红条，摘要红加粗 */
+.dsh-kb-timeline__item--exception .dsh-kb-timeline__body {
+  background: color-mix(in srgb, var(--dsh-kb-blocked) 8%, transparent);
+  border-left: 3px solid var(--dsh-kb-blocked);
+  border-radius: var(--dsh-kb-radius-sm);
+  padding: 6px 8px;
+}
+.dsh-kb-timeline__body {
+  min-width: 0;
+}
+.dsh-kb-timeline__row {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.dsh-kb-timeline__label {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--dsh-kb-text-primary);
+}
+.dsh-kb-timeline__item--success .dsh-kb-timeline__label {
+  color: var(--dsh-kb-complete);
+}
+.dsh-kb-timeline__item--exception .dsh-kb-timeline__label {
+  color: var(--dsh-kb-blocked);
+}
+.dsh-kb-timeline__summary {
+  margin: 2px 0 0;
+  font-size: 12px;
+  color: var(--dsh-kb-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dsh-kb-timeline__item--exception .dsh-kb-timeline__summary {
+  color: var(--dsh-kb-blocked);
+  font-weight: 600;
+}
+.dsh-kb-timeline__author {
+  display: block;
+  margin-top: 2px;
+  font-size: 11px;
+  opacity: 0.7;
+  color: var(--dsh-kb-text-tertiary);
+}
+
 .dsh-kb-spec-attachments {
   list-style: none;
   margin: 4px 0;

package/client/timeline-model.ts

@@ -0,0 +1,201 @@
+// client/timeline-model.ts — 轨迹 tab 纯投影（TDD）：事件 → 人类可读时间线条目。
+// 只做展示层派生，不触碰领域事件结构。
+import type { EventKind, KanbanEvent } from '../src/domain/types.js';
+
+/** 轨迹单条目：心跳折叠后的事件 + 展示派生字段。 */
+export interface TimelineItem {
+  seq: number;
+  kind: EventKind;
+  label: string;
+  author: string;
+  at: number;
+  /** 心跳折叠：连续心跳数量（非心跳条目为 undefined）。 */
+  count?: number;
+  /** 心跳折叠：末条心跳时间。 */
+  lastAt?: number;
+  /** 摘要（payload 关键字段），无可展示则为空串。 */
+  summary: string;
+  /** 异常事件（阻塞/失败/评审驳回/超限放弃/越权警告）醒目标红。 */
+  exception: boolean;
+  /** 状态语义（物流式四态配色）。 */
+  status: TimelineStatus;
+}
+
+/** 节点状态语义：neutral 常规 / running 进行中 / success 成功 / exception 异常。 */
+export type TimelineStatus = 'neutral' | 'running' | 'success' | 'exception';
+
+/** 异常事件全集（红系高亮）。 */
+const EXCEPTION_KINDS: ReadonlySet<EventKind> = new Set<EventKind>([
+  'task/blocked', 'task/failed', 'review/failed', 'review/gave-up', 'chain/audit-warning', 'chain/aborted',
+]);
+
+/** 四态状态映射：异常集优先，其余按成功/进行中/中性归类。 */
+const STATUS_OF: Record<EventKind, TimelineStatus> = {
+  'chain/created': 'neutral',
+  'chain/executing': 'running',
+  'chain/completed': 'success',
+  'chain/aborted': 'exception',
+  'chain/root-task-set': 'neutral',
+  'chain/audit-warning': 'exception',
+  'chain/audit-confirmed': 'neutral',
+  'chain/title-updated': 'neutral',
+  'spec-card/created': 'neutral',
+  'spec-card/edited': 'neutral',
+  'spec-card/approved': 'success',
+  'task/created': 'neutral',
+  'task/claimed': 'running',
+  'task/heartbeat': 'running',
+  'task/commented': 'neutral',
+  'task/completed': 'success',
+  'task/blocked': 'exception',
+  'task/unblocked': 'neutral',
+  'task/archived': 'neutral',
+  'task/failed': 'exception',
+  'task/renamed': 'neutral',
+  'review/passed': 'success',
+  'review/failed': 'exception',
+  'review/gave-up': 'exception',
+};
+
+export function timelineStatusOf(kind: EventKind): TimelineStatus {
+  return STATUS_OF[kind] ?? 'neutral';
+}
+
+/** kind → 中文动作标签（缺省回退裸 kind）。 */
+const KIND_LABEL: Record<EventKind, string> = {
+  'chain/created': '链路创建',
+  'chain/executing': '链路开始执行',
+  'chain/completed': '链路完成',
+  'chain/aborted': '链路中止',
+  'chain/root-task-set': '设为根任务',
+  'chain/audit-warning': '越权警告',
+  'chain/audit-confirmed': '越权已确认',
+  'chain/title-updated': '链路改名',
+  'spec-card/created': '规格卡创建',
+  'spec-card/edited': '规格卡编辑',
+  'spec-card/approved': '规格卡批准',
+  'task/created': '任务创建',
+  'task/claimed': '任务认领',
+  'task/heartbeat': '任务心跳',
+  'task/commented': '评论',
+  'task/completed': '任务完成',
+  'task/blocked': '任务阻塞',
+  'task/unblocked': '解除阻塞',
+  'task/archived': '任务归档',
+  'task/failed': '任务失败',
+  'task/renamed': '任务改名',
+  'review/passed': '评审通过',
+  'review/failed': '评审驳回',
+  'review/gave-up': '评审超限放弃',
+};
+
+/** author id → 友好名（复用 ROLE_NAME 语义，system/human 另映射）。 */
+const AUTHOR_NAME: Record<string, string> = {
+  v: 'orchestrator', p: 'planner', w: 'wiki-bridge', d: 'fullstack-dev',
+  pt: 'plan-review', dt: 'impl-review', system: '系统', human: '你',
+};
+
+export function eventLabelOf(kind: EventKind): string {
+  return KIND_LABEL[kind] ?? kind;
+}
+
+export function isExceptionEvent(e: KanbanEvent): boolean {
+  return EXCEPTION_KINDS.has(e.kind);
+}
+
+export function authorNameOf(author: string): string {
+  return AUTHOR_NAME[author] ?? author;
+}
+
+function asRecord(value: unknown): Record<string, unknown> {
+  return typeof value === 'object' && value !== null ? (value as Record<string, unknown>) : {};
+}
+
+/** 取字符串字段，缺失/非字符串返回 ''（优雅降级）。 */
+function strField(rec: Record<string, unknown>, key: string): string {
+  const v = rec[key];
+  return typeof v === 'string' ? v : '';
+}
+
+/** 截断长文本（>120 字），不截断短文本。 */
+function truncate(text: string, max = 120): string {
+  return text.length <= max ? text : `${text.slice(0, max)}…`;
+}
+
+/** 提取事件 payload 的展示摘要（按 kind 分支，缺失字段降级为空）。 */
+export function eventSummary(e: KanbanEvent): string {
+  const payload = asRecord(e.payload);
+  switch (e.kind) {
+    case 'task/completed': {
+      const summary = truncate(strField(payload, 'summary'));
+      return summary;
+    }
+    case 'task/blocked':
+    case 'task/failed':
+      return truncate(strField(payload, 'reason'));
+    case 'task/commented':
+      return truncate(strField(payload, 'body'));
+    case 'task/renamed':
+    case 'chain/title-updated': {
+      const from = strField(payload, 'from');
+      const to = strField(payload, 'to');
+      return from || to ? `${from} → ${to}` : '';
+    }
+    case 'review/passed':
+    case 'review/failed':
+    case 'review/gave-up': {
+      const evidence = asRecord(payload['evidence']);
+      const verdict = strField(evidence, 'verdict') || strField(payload, 'verdict');
+      const issues = Array.isArray(evidence['issues']) ? (evidence['issues'] as unknown[]).length : undefined;
+      const parts: string[] = [];
+      if (verdict) parts.push(`verdict: ${verdict}`);
+      if (issues !== undefined) parts.push(`issues: ${issues}`);
+      const reason = strField(payload, 'reason');
+      if (reason) parts.push(reason);
+      return truncate(parts.join(' · '));
+    }
+    default:
+      return '';
+  }
+}
+
+/** 相邻连续心跳折叠为一条（count + lastAt），其余事件原样透传；最新在上（seq 降序）。 */
+export function foldTimeline(events: KanbanEvent[]): TimelineItem[] {
+  const sorted = [...events].sort((a, b) => b.seq - a.seq);
+  const items: TimelineItem[] = [];
+  for (const e of sorted) {
+    if (e.kind !== 'task/heartbeat') {
+      items.push({
+        seq: e.seq,
+        kind: e.kind,
+        label: eventLabelOf(e.kind),
+        author: authorNameOf(e.author),
+        at: e.at,
+        summary: eventSummary(e),
+        exception: isExceptionEvent(e),
+        status: timelineStatusOf(e.kind),
+      });
+      continue;
+    }
+    // 与上一条（seq 更大、更晚）同为心跳 → 折叠计数
+    const prev = items[items.length - 1];
+    if (prev && prev.kind === 'task/heartbeat') {
+      prev.count = (prev.count ?? 1) + 1;
+      prev.lastAt = e.at;
+    } else {
+      items.push({
+        seq: e.seq,
+        kind: e.kind,
+        label: eventLabelOf(e.kind),
+        author: authorNameOf(e.author),
+        at: e.at,
+        lastAt: e.at,
+        count: 1,
+        summary: '',
+        exception: false,
+        status: timelineStatusOf(e.kind),
+      });
+    }
+  }
+  return items;
+}