@shendeguize/dsh-agent-sidecar 0.1.0

package/src/client/board/project-view-logic.ts

@@ -0,0 +1,361 @@
+/**
+ * Pure view-model logic for the cross-agent project correlation view
+ * (design §4.e.2 / §5.1 M3, T5.5). No React, no I/O, no data-layer
+ * imports — plain values in, plain values out, unit-testable in a bare
+ * node environment (same discipline as `logic.ts`).
+ *
+ * Wire contract (hand-written mirror, per module-ownership rules): the
+ * input types below mirror the host's `GET <prefix>/projects` response —
+ * `{groups: ProjectGroup[]}` where `ProjectGroup` is fusion.ts
+ * `getProjectGroups()` output: `project` (normalized path, '' when
+ * unknown), `agents` (distinct, sorted), `sessions` (UnifiedSession[],
+ * camelCase, **epoch milliseconds** `lastActivityAt`, most recent first)
+ * and the group-level `lastActivityAt`. Only the fields this view renders
+ * are mirrored; extra wire fields are structurally ignored.
+ *
+ * Reuse contract (T2.2, read-only): tone/glyph/relative-time/label tools
+ * are imported from `./logic.ts` without touching its exports, so both
+ * board views speak the same visual language. Strings NEW to this view
+ * live in the module-local {@link PROJECT_VIEW_STRINGS} table (S7 unifies
+ * locales later); strings emitted by reused board tools (status labels,
+ * relative time, the unknown-project label) intentionally stay with the
+ * board table so the two views can never drift apart.
+ *
+ * @module
+ */
+
+import {
+  abbreviateSessionId,
+  agentGlyph,
+  deriveBadge,
+  formatRelativeTime,
+  formatTemplate,
+  normalizeStatus,
+  projectDisplayName,
+  statusRank,
+  type StatusBadgeVM,
+} from './logic.ts'
+
+// ---------------------------------------------------------------------------
+// Module-local strings (project-view-only vocabulary; Chinese primary).
+// ---------------------------------------------------------------------------
+
+export const PROJECT_VIEW_STRINGS = {
+  /** View heading. */
+  title: '项目关联',
+  /** Header count summary. */
+  summary: '{projects} 个项目 · {sessions} 个会话',
+  /** Cross-agent badge, shown when a project hosts 2+ agent kinds. */
+  crossAgent: '{n} 种 agent',
+  /** Group header session count. */
+  sessionCount: '{n} 个会话',
+  /** Group header recency line. */
+  lastActive: '最近活跃 {time}',
+  /** Marker on sessions live in this dsh process (UnifiedSession.live). */
+  liveChip: '实时',
+  /** Untitled-session fallback. */
+  untitled: '(无标题)',
+  /** Empty state (no groups at all). */
+  empty: {
+    title: '暂无项目关联',
+    hint: '时间窗内没有跨 agent 的项目活动;agent 在某个项目目录下开始工作后会出现在这里。',
+  },
+  /** Loading placeholder (first fetch, nothing to show yet). */
+  loading: '正在加载项目关联…',
+  /** Error banner prefix; the raw error detail is appended by the view. */
+  errorTitle: '项目关联加载失败',
+} as const
+
+export type ProjectViewStrings = typeof PROJECT_VIEW_STRINGS
+
+// ---------------------------------------------------------------------------
+// Input view models (hand-written wire mirror, see module doc).
+// ---------------------------------------------------------------------------
+
+/** One session row of a project group (mirror of `UnifiedSession` subset). */
+export interface ProjectSessionVM {
+  agent: string
+  sessionId: string
+  /** Raw observed status (open vocabulary; sidecar-inferred). */
+  status: string
+  title: string
+  /** Unix epoch MILLISECONDS (fusion already normalized the sidecar seconds). */
+  lastActivityAt: number
+  /** True when the session is live in this dsh process. */
+  live?: boolean
+  /** Sidecar-observed seq discontinuity flag. */
+  gap?: boolean
+}
+
+/** One wire project group (mirror of fusion.ts `ProjectGroup`). */
+export interface ProjectGroupVM {
+  /** Project path; '' for the unknown-project bucket. */
+  project: string
+  /** Distinct agents as reported by the host (re-derived defensively here). */
+  agents: string[]
+  sessions: ProjectSessionVM[]
+  /** Unix epoch MILLISECONDS of the freshest member session. */
+  lastActivityAt: number
+}
+
+// ---------------------------------------------------------------------------
+// Derived view models (what project-view.tsx renders).
+// ---------------------------------------------------------------------------
+
+/** A session row with every render-ready derivation attached. */
+export interface DerivedProjectSessionVM {
+  agent: string
+  sessionId: string
+  status: string
+  title: string
+  lastActivityAt: number
+  live: boolean
+  gap: boolean
+  badge: StatusBadgeVM
+  glyph: string
+  shortId: string
+  relativeTime: string
+  /** Title with the untitled fallback already resolved. */
+  displayTitle: string
+}
+
+/** One per-agent column/section inside a project group. */
+export interface AgentLaneVM {
+  agent: string
+  glyph: string
+  sessions: DerivedProjectSessionVM[]
+}
+
+/** One agent participation marker of the group header. */
+export interface AgentBadgeVM {
+  agent: string
+  glyph: string
+}
+
+/** One fully derived project section. */
+export interface DerivedProjectGroupVM {
+  /** Normalized project path; '' for the unknown-project bucket. */
+  key: string
+  /** Display name (path basename; board's 未知项目 label for ''). */
+  label: string
+  /** Full path for the hover title; '' when unknown. */
+  fullPath: string
+  /** Distinct participating agents, sorted (derived from sessions). */
+  agentBadges: AgentBadgeVM[]
+  /** Cross-agent marker text; null when a single agent kind participates. */
+  crossAgentLabel: string | null
+  sessionCount: number
+  sessionCountLabel: string
+  /** Unix epoch ms of the freshest member session. */
+  lastActivityAt: number
+  /** '最近活跃 {relative time}'; empty when the group has no finite time. */
+  lastActiveLabel: string
+  /** Per-agent lanes, sorted by agent name (same order as agentBadges). */
+  lanes: AgentLaneVM[]
+}
+
+/** Full render model for the project view. */
+export interface ProjectViewModel {
+  groups: DerivedProjectGroupVM[]
+  /** Non-null exactly when there is no group to render. */
+  emptyState: { title: string; hint: string } | null
+  projectCount: number
+  sessionCount: number
+  /** Header summary line ('{projects} 个项目 · {sessions} 个会话'). */
+  summaryLabel: string
+}
+
+// ---------------------------------------------------------------------------
+// Normalization helpers.
+// ---------------------------------------------------------------------------
+
+const KEY_SEP = '\u0000'
+
+/**
+ * Group-key normalization, aligned with fusion's correlation key: trim,
+ * strip trailing slashes (keeping root '/'), whitespace-only → '' (the
+ * unknown bucket). The host already normalizes; this re-run makes the
+ * view robust to hand-fed or merged inputs.
+ */
+export function normalizeProjectKey(project: string): string {
+  const trimmed = project.trim()
+  if (trimmed === '') return ''
+  if (trimmed.length > 1 && trimmed.endsWith('/')) {
+    const stripped = trimmed.replace(/\/+$/, '')
+    return stripped === '' ? '/' : stripped
+  }
+  return trimmed
+}
+
+/**
+ * Distinct participating agents of a session list, sorted by name. This
+ * is derived from the sessions themselves (not the wire `agents` field)
+ * so the badge row can never disagree with the lanes actually rendered —
+ * notably after two wire groups merge under one normalized key.
+ */
+export function deriveAgentBadges(
+  sessions: ReadonlyArray<{ agent: string }>,
+): AgentBadgeVM[] {
+  const names = new Set<string>()
+  for (const session of sessions) names.add(session.agent)
+  return [...names].sort().map((agent) => ({ agent, glyph: agentGlyph(agent) }))
+}
+
+/**
+ * Session ordering inside a lane, mirroring the board's card order so
+ * both views read the same way: status rank (working first, dead last),
+ * then recency, then id as the deterministic tiebreak.
+ */
+export function compareProjectSessions(a: ProjectSessionVM, b: ProjectSessionVM): number {
+  const rankDelta = statusRank(normalizeStatus(a.status)) - statusRank(normalizeStatus(b.status))
+  if (rankDelta !== 0) return rankDelta
+  if (a.lastActivityAt !== b.lastActivityAt) return b.lastActivityAt - a.lastActivityAt
+  return a.sessionId.localeCompare(b.sessionId)
+}
+
+function deriveSession(session: ProjectSessionVM, nowMs: number): DerivedProjectSessionVM {
+  const live = session.live === true
+  const gap = session.gap === true
+  return {
+    agent: session.agent,
+    sessionId: session.sessionId,
+    status: session.status,
+    title: session.title,
+    lastActivityAt: session.lastActivityAt,
+    live,
+    gap,
+    // 'ok' stream health: the project view has no global stream signal,
+    // so badge attention reflects only the per-session gap marker.
+    badge: deriveBadge(session.status, gap, 'ok'),
+    glyph: agentGlyph(session.agent),
+    shortId: abbreviateSessionId(session.sessionId),
+    relativeTime: formatRelativeTime(session.lastActivityAt, nowMs),
+    displayTitle: session.title.trim() === '' ? PROJECT_VIEW_STRINGS.untitled : session.title,
+  }
+}
+
+/**
+ * Split a group's sessions into per-agent lanes. Lanes are sorted by
+ * agent name (matching the header badge order); sessions inside a lane
+ * follow {@link compareProjectSessions}.
+ */
+export function buildAgentLanes(
+  sessions: readonly ProjectSessionVM[],
+  nowMs: number,
+): AgentLaneVM[] {
+  const byAgent = new Map<string, ProjectSessionVM[]>()
+  for (const session of sessions) {
+    const lane = byAgent.get(session.agent)
+    if (lane === undefined) byAgent.set(session.agent, [session])
+    else lane.push(session)
+  }
+  return [...byAgent.keys()].sort().map((agent) => {
+    const members = byAgent.get(agent) ?? []
+    members.sort(compareProjectSessions)
+    return {
+      agent,
+      glyph: agentGlyph(agent),
+      sessions: members.map((session) => deriveSession(session, nowMs)),
+    }
+  })
+}
+
+// ---------------------------------------------------------------------------
+// Full pipeline.
+// ---------------------------------------------------------------------------
+
+export interface ProjectViewComputeInput {
+  groups: readonly ProjectGroupVM[]
+  /** Clock injection (epoch ms) for deterministic derivation. */
+  nowMs: number
+}
+
+/**
+ * normalize/merge → derive → sort; the one call project-view.tsx renders
+ * from.
+ *
+ * Normalization: groups collapsing onto the same normalized key are
+ * merged; duplicate sessions (same agent + sessionId) within a merged
+ * group keep the freshest copy. Group order is `lastActivityAt`
+ * descending (recomputed from member sessions, so a stale wire value
+ * cannot misplace a group), with the unknown-project bucket ('') always
+ * last — same rule as the board.
+ */
+export function buildProjectViewModel(input: ProjectViewComputeInput): ProjectViewModel {
+  const { groups, nowMs } = input
+
+  interface Bucket {
+    sessions: Map<string, ProjectSessionVM>
+    wireLastActivityAt: number
+  }
+  const buckets = new Map<string, Bucket>()
+  for (const group of groups) {
+    const key = normalizeProjectKey(group.project)
+    let bucket = buckets.get(key)
+    if (bucket === undefined) {
+      bucket = { sessions: new Map(), wireLastActivityAt: Number.NEGATIVE_INFINITY }
+      buckets.set(key, bucket)
+    }
+    if (Number.isFinite(group.lastActivityAt)) {
+      bucket.wireLastActivityAt = Math.max(bucket.wireLastActivityAt, group.lastActivityAt)
+    }
+    for (const session of group.sessions) {
+      const id = `${session.agent}${KEY_SEP}${session.sessionId}`
+      const existing = bucket.sessions.get(id)
+      if (existing === undefined || session.lastActivityAt > existing.lastActivityAt) {
+        bucket.sessions.set(id, session)
+      }
+    }
+  }
+
+  const derived: DerivedProjectGroupVM[] = []
+  let sessionCount = 0
+  for (const [key, bucket] of buckets) {
+    const sessions = [...bucket.sessions.values()]
+    sessionCount += sessions.length
+    const memberMax = sessions.reduce(
+      (max, s) => (Number.isFinite(s.lastActivityAt) ? Math.max(max, s.lastActivityAt) : max),
+      Number.NEGATIVE_INFINITY,
+    )
+    const lastActivityAt = Math.max(memberMax, bucket.wireLastActivityAt)
+    const agentBadges = deriveAgentBadges(sessions)
+    derived.push({
+      key,
+      label: projectDisplayName(key),
+      fullPath: key,
+      agentBadges,
+      crossAgentLabel:
+        agentBadges.length > 1
+          ? formatTemplate(PROJECT_VIEW_STRINGS.crossAgent, { n: agentBadges.length })
+          : null,
+      sessionCount: sessions.length,
+      sessionCountLabel: formatTemplate(PROJECT_VIEW_STRINGS.sessionCount, {
+        n: sessions.length,
+      }),
+      lastActivityAt: Number.isFinite(lastActivityAt) ? lastActivityAt : 0,
+      lastActiveLabel: Number.isFinite(lastActivityAt)
+        ? formatTemplate(PROJECT_VIEW_STRINGS.lastActive, {
+            time: formatRelativeTime(lastActivityAt, nowMs),
+          })
+        : '',
+      lanes: buildAgentLanes(sessions, nowMs),
+    })
+  }
+
+  derived.sort((a, b) => {
+    if (a.key === '') return b.key === '' ? 0 : 1
+    if (b.key === '') return -1
+    return b.lastActivityAt - a.lastActivityAt || a.key.localeCompare(b.key)
+  })
+
+  return {
+    groups: derived,
+    emptyState: derived.length === 0 ? { ...PROJECT_VIEW_STRINGS.empty } : null,
+    projectCount: derived.length,
+    sessionCount,
+    summaryLabel: formatTemplate(PROJECT_VIEW_STRINGS.summary, {
+      projects: derived.length,
+      sessions: sessionCount,
+    }),
+  }
+}

package/src/client/board/project-view.module.css

@@ -0,0 +1,307 @@
+/*
+ * Project correlation view styles (T5.5): same visual language as
+ * board.module.css — every color rides a --dsw-alias-* design token with
+ * a neutral fallback, flex top bar, grouped sections. Sessions render as
+ * compact rows inside per-agent lanes instead of the board's card grid.
+ */
+
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  height: 100%;
+  min-height: 320px;
+  padding: 16px 20px;
+  box-sizing: border-box;
+  overflow-y: auto;
+  color: var(--dsw-alias-label-primary, #1f2328);
+  background: var(--dsw-alias-bg-base, transparent);
+}
+
+/* ------------------------------------------------------------- top bar */
+
+.topbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.title {
+  font-size: 15px;
+  font-weight: 650;
+  color: var(--dsw-alias-label-primary, #1f2328);
+}
+
+.summary {
+  font-size: 12px;
+  color: var(--dsw-alias-label-secondary, #57606a);
+}
+
+.loadingChip {
+  font-size: 11px;
+  line-height: 18px;
+  padding: 0 8px;
+  border-radius: 999px;
+  color: var(--dsw-alias-label-secondary, #57606a);
+  background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.04));
+}
+
+/* -------------------------------------------------------------- banner */
+
+.banner {
+  font-size: 12px;
+  line-height: 18px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.08));
+}
+
+.banner[data-tone='danger'] {
+  color: var(--dsw-alias-state-error-primary, #cf222e);
+  background: var(--dsw-alias-state-error-secondary, rgba(207, 34, 46, 0.08));
+  border-color: var(--dsw-alias-state-error-secondary, rgba(207, 34, 46, 0.24));
+}
+
+/* -------------------------------------------------------- empty states */
+
+.empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  flex: 1;
+  min-height: 160px;
+  text-align: center;
+  padding: 24px;
+}
+
+.emptyTitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary, #1f2328);
+}
+
+.emptyHint {
+  font-size: 12px;
+  max-width: 420px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-secondary, #57606a);
+}
+
+/* -------------------------------------------------------- group blocks */
+
+.group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.08));
+  background: var(--dsw-alias-bg-layer-1, rgba(0, 0, 0, 0.02));
+}
+
+.groupHead {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+
+.groupName {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary, #1f2328);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.agentBadges {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+}
+
+.agentBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  line-height: 18px;
+  padding: 0 7px;
+  border-radius: 999px;
+  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.08));
+  background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.04));
+  color: var(--dsw-alias-label-secondary, #57606a);
+  white-space: nowrap;
+}
+
+.crossBadge {
+  font-size: 11px;
+  line-height: 18px;
+  padding: 0 7px;
+  border-radius: 999px;
+  color: var(--dsw-alias-static-white, #fff);
+  background: var(--dsw-alias-brand-primary, #4d6bfe);
+  white-space: nowrap;
+}
+
+.spacer {
+  flex: 1;
+}
+
+.groupMeta {
+  font-size: 11px;
+  flex: none;
+  color: var(--dsw-alias-label-tertiary, #6e7781);
+  white-space: nowrap;
+}
+
+/* --------------------------------------------------------- agent lanes */
+
+.lanes {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.lane {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.laneHead {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary, #1f2328);
+}
+
+.glyph {
+  flex: none;
+  color: var(--dsw-alias-brand-primary, #4d6bfe);
+}
+
+.laneSessions {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+/* -------------------------------------------------------- session rows */
+
+.session {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  text-align: left;
+  font-family: inherit;
+  font-size: 12px;
+  padding: 5px 8px;
+  border-radius: 7px;
+  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.08));
+  background: var(--dsw-alias-bg-base, transparent);
+  color: var(--dsw-alias-label-primary, #1f2328);
+  cursor: pointer;
+}
+
+.session:hover {
+  border-color: var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
+  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.04));
+}
+
+.session:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary, #4d6bfe);
+  outline-offset: 1px;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex: none;
+  font-size: 11px;
+  line-height: 18px;
+  padding: 0 7px;
+  border-radius: 999px;
+  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.08));
+  background: var(--dsw-alias-bg-layer-1, rgba(0, 0, 0, 0.03));
+  color: var(--dsw-alias-label-secondary, #57606a);
+  white-space: nowrap;
+}
+
+.dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex: none;
+  background: var(--dsw-alias-label-tertiary, #6e7781);
+}
+
+.dot[data-tone='success'] {
+  background: var(--dsw-alias-state-success-primary, #1a7f37);
+}
+
+.dot[data-tone='warn'] {
+  background: var(--dsw-alias-state-warn-primary, #9a6700);
+}
+
+.dot[data-tone='danger'] {
+  background: var(--dsw-alias-state-error-primary, #cf222e);
+}
+
+.dot[data-tone='neutral'] {
+  background: var(--dsw-alias-label-tertiary, #6e7781);
+}
+
+.dot[data-tone='muted'] {
+  background: var(--dsw-alias-label-dimmed, #8c959f);
+}
+
+.attention {
+  font-size: 11px;
+  color: var(--dsw-alias-state-warn-primary, #9a6700);
+}
+
+.attention[data-kind='gap'] {
+  color: var(--dsw-alias-state-error-primary, #cf222e);
+}
+
+.sessionTitle {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.liveChip {
+  flex: none;
+  font-size: 10px;
+  line-height: 16px;
+  padding: 0 6px;
+  border-radius: 999px;
+  color: var(--dsw-alias-state-success-primary, #1a7f37);
+  border: 1px solid var(--dsw-alias-state-success-primary, rgba(26, 127, 55, 0.4));
+}
+
+.sessionId {
+  flex: none;
+  font-size: 11px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: var(--dsw-alias-label-tertiary, #6e7781);
+}
+
+.sessionTime {
+  flex: none;
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--dsw-alias-label-caption, var(--dsw-alias-label-tertiary, #6e7781));
+}