@shendeguize/dsh-agent-sidecar 0.1.0 → 0.2.0

package/src/client/board/board.module.css

@@ -1,9 +1,4 @@
-/*
- * Board styles (design §5.4): every color rides a --dsw-alias-* design
- * token with a neutral fallback — no theme colors are hardcoded as the
- * only value. Layout follows the dsh-project-kanban blueprint (flex top
- * bar, grouped sections, auto-fill card grid).
- */
+/* Board layout consumes the public Agent Sidecar theme contract. */
 
 .root {
   display: flex;
@@ -14,8 +9,8 @@
   padding: 16px 20px;
   box-sizing: border-box;
   overflow-y: auto;
-  color: var(--dsw-alias-label-primary, #1f2328);
-  background: var(--dsw-alias-bg-base, transparent);
+  color: var(--agsc-fg);
+  background: var(--agsc-bg);
 }
 
 /* ------------------------------------------------------------- top bar */
@@ -30,50 +25,36 @@
 .title {
   font-size: 15px;
   font-weight: 650;
-  color: var(--dsw-alias-label-primary, #1f2328);
+  color: var(--agsc-fg);
   margin-right: 2px;
 }
 
-.badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 12px;
-  line-height: 20px;
-  padding: 0 8px;
-  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: 8px;
   height: 8px;
   border-radius: 50%;
   flex: none;
-  background: var(--dsw-alias-label-tertiary, #6e7781);
+  background: var(--dsw-alias-label-tertiary);
 }
 
-.dot[data-tone='success'] {
-  background: var(--dsw-alias-state-success-primary, #1a7f37);
+.dot[data-tone='neutral'] {
+  background: var(--dsw-alias-label-tertiary);
 }
 
-.dot[data-tone='warn'] {
-  background: var(--dsw-alias-state-warn-primary, #9a6700);
+.dot[data-tone='muted'] {
+  background: var(--agsc-fg-dimmed);
 }
 
-.dot[data-tone='danger'] {
-  background: var(--dsw-alias-state-error-primary, #cf222e);
-}
+/* UX-01: clickable working/waiting count badges + the total counter. */
 
-.dot[data-tone='neutral'] {
-  background: var(--dsw-alias-label-tertiary, #6e7781);
+.countBadge {
+  white-space: nowrap;
 }
 
-.dot[data-tone='muted'] {
-  background: var(--dsw-alias-label-dimmed, #8c959f);
+.countTotal {
+  font-size: 12px;
+  color: var(--agsc-fg-secondary);
+  white-space: nowrap;
 }
 
 .spacer {
@@ -85,62 +66,52 @@
   align-items: center;
   gap: 5px;
   font-size: 12px;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--agsc-fg-secondary);
   white-space: nowrap;
 }
 
 .select {
+  height: 28px;
   font-size: 12px;
   font-family: inherit;
-  color: var(--dsw-alias-label-primary, #1f2328);
-  background: var(--dsw-alias-bg-layer-1, transparent);
-  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
-  border-radius: 6px;
-  padding: 2px 6px;
+  color: var(--agsc-fg);
+  background: var(--agsc-bg-raised);
+  border: 1px solid var(--agsc-border-strong);
+  border-radius: 14px;
+  padding: 0 10px;
 }
 
 .checkbox {
-  accent-color: var(--dsw-alias-brand-primary, #4d6bfe);
+  accent-color: var(--agsc-accent);
   margin: 0;
 }
 
-.refresh {
-  font-size: 12px;
-  font-family: inherit;
-  color: var(--dsw-alias-label-secondary, #57606a);
-  background: transparent;
-  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.08));
-  border-radius: 6px;
-  padding: 2px 10px;
-  cursor: pointer;
-}
-
-.refresh:hover {
-  color: var(--dsw-alias-label-primary, #1f2328);
-  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));
-}
-
 /* -------------------------------------------------------------- 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));
+  border-radius: var(--agsc-radius-control);
+  border: 1px solid var(--agsc-border);
 }
 
 .banner[data-tone='warn'] {
-  color: var(--dsw-alias-state-warn-label, var(--dsw-alias-state-warn-primary, #9a6700));
-  background: var(--dsw-alias-state-warn-tertiary, rgba(154, 103, 0, 0.08));
-  border-color: var(--dsw-alias-state-warn-secondary, rgba(154, 103, 0, 0.24));
+  color: var(--agsc-warn);
+  background: var(--dsw-alias-state-warn-tertiary);
+  border-color: var(--dsw-alias-state-warn-secondary);
 }
 
 .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));
+  color: var(--agsc-err);
+  background: var(--dsw-alias-state-error-secondary);
+  border-color: var(--dsw-alias-state-error-secondary);
+}
+
+.bannerDismiss {
+  margin-left: 10px;
+  color: inherit;
+  text-decoration: underline;
 }
 
 /* -------------------------------------------------------- empty states */
@@ -160,14 +131,14 @@
 .emptyTitle {
   font-size: 14px;
   font-weight: 600;
-  color: var(--dsw-alias-label-primary, #1f2328);
+  color: var(--agsc-fg);
 }
 
 .emptyHint {
   font-size: 12px;
   max-width: 420px;
   line-height: 20px;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--agsc-fg-secondary);
 }
 
 /* -------------------------------------------------------- group blocks */
@@ -178,17 +149,41 @@
   gap: 8px;
 }
 
+/* Collapsible group header (UX-02): a full-width transparent button. */
 .groupHead {
   display: flex;
   align-items: baseline;
   gap: 8px;
   min-width: 0;
+  width: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.chevron {
+  flex: none;
+  font-size: 10px;
+  color: var(--agsc-fg-dimmed);
+}
+
+.groupAttention {
+  flex: none;
+  font-size: 11px;
+  color: var(--agsc-warn);
+}
+
+.showMore {
+  align-self: flex-start;
 }
 
 .groupName {
   font-size: 13px;
   font-weight: 600;
-  color: var(--dsw-alias-label-primary, #1f2328);
+  color: var(--agsc-fg);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -197,8 +192,8 @@
 .groupCount {
   font-size: 11px;
   flex: none;
-  color: var(--dsw-alias-label-secondary, #57606a);
-  background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.04));
+  color: var(--agsc-fg-secondary);
+  background: var(--dsw-alias-bg-layer-2);
   border-radius: 999px;
   padding: 0 8px;
   line-height: 18px;
@@ -216,24 +211,37 @@
   display: flex;
   flex-direction: column;
   gap: 6px;
-  text-align: left;
-  font-family: inherit;
   min-width: 0;
   padding: 10px 12px;
-  border-radius: 8px;
-  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));
-  cursor: pointer;
+  border-radius: var(--agsc-radius-card);
+  border: 1px solid var(--agsc-border-strong);
+  background: var(--agsc-bg-raised);
 }
 
 .card: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));
+  border-color: var(--dsw-alias-label-dimmed);
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.cardOpen {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: 100%;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--agsc-radius-control);
+  color: inherit;
+  background: none;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
 }
 
-.card:focus-visible {
-  outline: 2px solid var(--dsw-alias-brand-primary, #4d6bfe);
-  outline-offset: 1px;
+.cardOpen:focus-visible {
+  outline: 2px solid var(--agsc-accent);
+  outline-offset: 2px;
 }
 
 .cardHead {
@@ -254,43 +262,56 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--dsw-alias-label-primary, #1f2328);
+  color: var(--agsc-fg);
 }
 
 .glyph {
   flex: none;
-  color: var(--dsw-alias-brand-primary, #4d6bfe);
+  color: var(--agsc-accent);
+}
+
+.statusPill {
+  max-width: 100%;
 }
 
 .attention {
   font-size: 11px;
-  color: var(--dsw-alias-state-warn-primary, #9a6700);
+  color: var(--agsc-warn);
 }
 
 .attention[data-kind='gap'] {
-  color: var(--dsw-alias-state-error-primary, #cf222e);
+  color: var(--agsc-err);
 }
 
 .cardTitle {
   font-size: 13px;
-  color: var(--dsw-alias-label-primary, #1f2328);
+  color: var(--agsc-fg);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .cardId {
+  align-self: flex-start;
+  max-width: 100%;
+  justify-content: flex-start;
   font-size: 11px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  color: var(--dsw-alias-label-tertiary, #6e7781);
+  font-family: var(--agsc-font-mono);
+  color: var(--agsc-fg-secondary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.copied {
+  margin-left: 6px;
+  font-family: inherit;
+  color: var(--agsc-ok);
+}
+
 .cardEvent {
   font-size: 12px;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--agsc-fg-secondary);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -298,5 +319,5 @@
 
 .cardTime {
   font-size: 11px;
-  color: var(--dsw-alias-label-caption, var(--dsw-alias-label-tertiary, #6e7781));
+  color: var(--agsc-fg-secondary);
 }

package/src/client/board/logic.ts

@@ -58,10 +58,20 @@ export interface SessionCardVM {
   gap: boolean
 }
 
+/** Statuses the top-bar count badges can filter down to (UX-01). */
+export type BoardStatusFilter = 'working' | 'waiting'
+
 /** Board filter controls (wired to ui.time-window-hours / ui.show-dead). */
 export interface BoardFilterState {
   timeWindowHours: number
   showDead: boolean
+  /**
+   * Status-only view toggled by the top-bar count badges (UX-01). While
+   * set, ONLY sessions of this status are visible — the time window and
+   * showDead do not apply (the user explicitly asked for the全板 answer
+   * to "who is working/waiting"). Absent = no status filter.
+   */
+  statusFilter?: BoardStatusFilter
 }
 
 /** Derived status badge: color token + label + attention marker. */
@@ -69,8 +79,11 @@ export interface StatusBadgeVM {
   status: SessionStatusToken
   tone: BadgeTone
   label: string
-  /** 'gap' (per-session data hole) outranks 'stale' (global stream health). */
-  attention: 'gap' | 'stale' | null
+  /**
+   * Per-session data-hole marker. The global stream-health notice is NOT
+   * mirrored here (UX-18): the top banner already carries it once.
+   */
+  attention: 'gap' | null
   attentionLabel: string | null
 }
 
@@ -138,7 +151,9 @@ export interface BoardViewModel {
   streamTone: BadgeTone
   visibleCount: number
   totalCount: number
+  /** Whole-board counts (window/filter independent — the honest answer). */
   workingCount: number
+  waitingCount: number
 }
 
 // ---------------------------------------------------------------------------
@@ -204,6 +219,9 @@ const STATUS_TONE: Record<SessionStatusToken, BadgeTone> = {
 
 /**
  * Visibility rules (task spec):
+ * - an active `statusFilter` (UX-01) overrides everything: only sessions
+ *   of that status are visible, regardless of window or showDead — the
+ *   count badge and the filtered board therefore always agree;
  * - dead sessions are hidden unless `showDead`;
  * - working sessions are always visible (even outside the window);
  * - everything else hides once `updatedAtMs` falls strictly beyond the
@@ -216,6 +234,7 @@ export function isSessionVisible(
   nowMs: number,
 ): boolean {
   const status = normalizeStatus(session.status)
+  if (filters.statusFilter !== undefined) return status === filters.statusFilter
   if (status === 'dead' && !filters.showDead) return false
   if (status === 'working') return true
   const windowMs = filters.timeWindowHours * HOUR_MS
@@ -295,18 +314,15 @@ export function groupSessions<T extends SessionCardVM>(
 // ---------------------------------------------------------------------------
 
 /**
- * status + gap + streamHealth → badge tone/label/attention.
+ * status + gap → badge tone/label/attention.
  *
- * Priority: a per-session `gap` marker (a known data hole for THIS session)
- * outranks the global stale marker (stream reconnecting affects everyone
- * and is already surfaced by the top banner). Unknown raw statuses keep
+ * Card-level attention carries ONLY the per-session `gap` marker (a known
+ * data hole for THIS session). The global stream-health state is a
+ * board-wide fact and lives in the top banner alone — repeating it on
+ * every card was noise, not signal (UX-18). Unknown raw statuses keep
  * their raw text as the label — the board never invents a state.
  */
-export function deriveBadge(
-  rawStatus: string,
-  gap: boolean,
-  streamHealth: StreamHealthToken,
-): StatusBadgeVM {
+export function deriveBadge(rawStatus: string, gap: boolean): StatusBadgeVM {
   const status = normalizeStatus(rawStatus)
   const trimmed = rawStatus.trim()
   const label =
@@ -315,9 +331,7 @@ export function deriveBadge(
         ? BOARD_STRINGS.status.unknown
         : trimmed
       : BOARD_STRINGS.status[status]
-  let attention: StatusBadgeVM['attention'] = null
-  if (gap) attention = 'gap'
-  else if (streamHealth !== 'ok') attention = 'stale'
+  const attention: StatusBadgeVM['attention'] = gap ? 'gap' : null
   return {
     status,
     tone: STATUS_TONE[status],
@@ -355,8 +369,22 @@ export function badgeHoverTitle(
 // ---------------------------------------------------------------------------
 
 /**
- * Coarse relative time: <60s (including clock skew into the future) is
- * 刚刚, then whole minutes/hours/days. Non-finite input renders empty.
+ * Absolute short timestamp in local time: `MM-DD HH:mm`. Used for ages
+ * beyond 24h where relative buckets stop discriminating (UX-13).
+ */
+export function formatAbsoluteShort(thenMs: number): string {
+  const date = new Date(thenMs)
+  const pad = (n: number): string => String(n).padStart(2, '0')
+  return `${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(
+    date.getMinutes(),
+  )}`
+}
+
+/**
+ * Card time: <60s (including clock skew into the future) is 刚刚, then
+ * whole minutes/hours; from 24h on the absolute short date takes over —
+ * a column of "3 天前" carries no information, "08-22 14:03" does
+ * (UX-13). Non-finite input renders empty.
  */
 export function formatRelativeTime(thenMs: number, nowMs: number): string {
   if (!Number.isFinite(thenMs)) return ''
@@ -368,7 +396,7 @@ export function formatRelativeTime(thenMs: number, nowMs: number): string {
   if (delta < DAY_MS) {
     return formatTemplate(BOARD_STRINGS.time.hoursAgo, { n: Math.floor(delta / HOUR_MS) })
   }
-  return formatTemplate(BOARD_STRINGS.time.daysAgo, { n: Math.floor(delta / DAY_MS) })
+  return formatAbsoluteShort(thenMs)
 }
 
 /** Label for a time-window option: whole days as 天, otherwise 小时. */
@@ -490,6 +518,47 @@ export function abbreviateSessionId(id: string, max = 20): string {
   return `${id.slice(0, 12)}…${id.slice(-6)}`
 }
 
+// ---------------------------------------------------------------------------
+// Display truncation (UX-02 board groups / UX-20 project lanes).
+// ---------------------------------------------------------------------------
+
+/** Cards a board group renders before the 「展开全部」 fold (UX-02). */
+export const GROUP_CARD_LIMIT = 20
+
+/** A truncated card list plus how many items the fold is hiding. */
+export interface DisplaySlice<T> {
+  shown: T[]
+  hiddenCount: number
+}
+
+/**
+ * Slice a status-sorted card list down to `limit` for display, unless
+ * `expanded`. The cut never lands inside the leading working/waiting run:
+ * attention-worthy sessions are the reason the board exists, so the
+ * effective limit grows to cover all of them (an all-active group renders
+ * fully — honest, and rare). Non-positive limits disable truncation.
+ */
+export function sliceCardsForDisplay<T extends { status: string }>(
+  cards: readonly T[],
+  limit: number,
+  expanded: boolean,
+): DisplaySlice<T> {
+  if (expanded || limit <= 0 || cards.length <= limit) {
+    return { shown: [...cards], hiddenCount: 0 }
+  }
+  let activeRun = 0
+  while (activeRun < cards.length) {
+    const status = normalizeStatus(cards[activeRun]!.status)
+    if (status !== 'working' && status !== 'waiting') break
+    activeRun += 1
+  }
+  const effectiveLimit = Math.max(limit, activeRun)
+  return {
+    shown: cards.slice(0, effectiveLimit),
+    hiddenCount: cards.length - Math.min(cards.length, effectiveLimit),
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Footer widget derivation.
 // ---------------------------------------------------------------------------
@@ -510,15 +579,23 @@ export function deriveWidgetConnection(
   return 'degraded'
 }
 
-/** Count of sessions currently observed as working. */
-export function countWorking(sessions: ReadonlyArray<{ status: string }>): number {
+/** Count of sessions observed in one normalized status. */
+export function countByStatus(
+  sessions: ReadonlyArray<{ status: string }>,
+  status: SessionStatusToken,
+): number {
   let count = 0
   for (const session of sessions) {
-    if (normalizeStatus(session.status) === 'working') count += 1
+    if (normalizeStatus(session.status) === status) count += 1
   }
   return count
 }
 
+/** Count of sessions currently observed as working. */
+export function countWorking(sessions: ReadonlyArray<{ status: string }>): number {
+  return countByStatus(sessions, 'working')
+}
+
 /** Widget hover/aria text: connection state, plus the count when nonzero. */
 export function widgetTitle(connection: WidgetConnection, workingCount: number): string {
   const base = `${BOARD_STRINGS.widget.label}: ${BOARD_STRINGS.widget.connection[connection]}`
@@ -536,7 +613,7 @@ export function buildBoardViewModel(input: BoardComputeInput): BoardViewModel {
   const visible = filterSessions(sessions, filters, nowMs)
   const derived: DerivedSessionCardVM[] = visible.map((session) => ({
     ...session,
-    badge: deriveBadge(session.status, session.gap, streamHealth),
+    badge: deriveBadge(session.status, session.gap),
     glyph: agentGlyph(session.agent),
     shortId: abbreviateSessionId(session.sessionId),
     relativeTime: formatRelativeTime(session.updatedAtMs, nowMs),
@@ -552,5 +629,6 @@ export function buildBoardViewModel(input: BoardComputeInput): BoardViewModel {
     visibleCount: visible.length,
     totalCount: sessions.length,
     workingCount: countWorking(sessions),
+    waitingCount: countByStatus(sessions, 'waiting'),
   }
 }

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

@@ -13,13 +13,10 @@
  * 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.
+ * Reuse contract (T2.2): tone/glyph/relative-time/label tools are imported
+ * from `./logic.ts`, so both board views speak the same visual language.
+ * Project-only copy is exposed through the dynamic
+ * {@link PROJECT_VIEW_STRINGS} locale facade.
  *
  * @module
  */
@@ -35,39 +32,35 @@ import {
   statusRank,
   type StatusBadgeVM,
 } from './logic.ts'
+import { createLocaleView } from '../locales/view.ts'
 
 // ---------------------------------------------------------------------------
-// Module-local strings (project-view-only vocabulary; Chinese primary).
+// Project-view-only locale facade.
 // ---------------------------------------------------------------------------
 
-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). */
+export const PROJECT_VIEW_STRINGS = createLocaleView({
+  title: 'project.title',
+  summary: 'project.summary',
+  crossAgent: 'project.crossAgent',
+  sessionCount: 'project.sessionCount',
+  lastActive: 'project.lastActive',
+  liveChip: 'project.liveChip',
+  untitled: 'project.untitled',
+  showAllSessions: 'project.showAllSessions',
+  showLessSessions: 'project.showLessSessions',
   empty: {
-    title: '暂无项目关联',
-    hint: '时间窗内没有跨 agent 的项目活动;agent 在某个项目目录下开始工作后会出现在这里。',
+    title: 'project.empty.title',
+    hint: 'project.empty.hint',
   },
-  /** Loading placeholder (first fetch, nothing to show yet). */
-  loading: '正在加载项目关联…',
-  /** Error banner prefix; the raw error detail is appended by the view. */
-  errorTitle: '项目关联加载失败',
-} as const
+  loading: 'project.loading',
+  errorTitle: 'project.errorTitle',
+} as const)
 
 export type ProjectViewStrings = typeof PROJECT_VIEW_STRINGS
 
+/** Rows a lane renders before the 「展开全部」 fold (UX-20). */
+export const LANE_SESSION_LIMIT = 10
+
 // ---------------------------------------------------------------------------
 // Input view models (hand-written wire mirror, see module doc).
 // ---------------------------------------------------------------------------
@@ -224,9 +217,9 @@ function deriveSession(session: ProjectSessionVM, nowMs: number): DerivedProject
     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'),
+    // Badge attention reflects only the per-session gap marker (the badge
+    // vocabulary has no global-stream mirror at card level, UX-18).
+    badge: deriveBadge(session.status, gap),
     glyph: agentGlyph(session.agent),
     shortId: abbreviateSessionId(session.sessionId),
     relativeTime: formatRelativeTime(session.lastActivityAt, nowMs),