@shendeguize/dsh-agent-sidecar 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shendeguize/dsh-agent-sidecar",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Agent Sidecar as a native DSH plugin: cross-agent monitoring, injection and bypass analysis / 跨 agent 监控、注入与旁路分析",
   "type": "module",
   "main": "lib/index.js",

package/src/client/board/Board.tsx

@@ -7,17 +7,27 @@
  * from the host wire types (epoch-seconds → epoch-ms conversion included).
  *
  * Interaction surface handed back to the owner:
- * - `onFiltersChange` — time-window select / show-dead checkbox (controlled);
- * - `onRefresh`      — manual snapshot pull button;
+ * - `onFiltersChange` — time-window select / show-dead checkbox / the
+ *   top-bar status-filter badges (controlled, UX-01);
+ * - `onRefresh`      — manual snapshot pull button; a Promise<boolean>
+ *   return drives the in-flight/failure feedback (UX-07);
  * - `onSelectSession` — card click, pass-through for the M3 detail view.
+ *
+ * Local UI state (deliberately NOT lifted into the controller stores):
+ * group collapse and per-group truncation (UX-02) are ephemeral view
+ * concerns — useState here, reset on tab remount.
  */
 
-import type { ReactElement } from 'react'
+import { useState } from 'react'
+import type { MouseEvent, ReactElement } from 'react'
 import {
   buildBoardViewModel,
-  timeWindowLabel,
   formatTemplate,
+  sliceCardsForDisplay,
+  timeWindowLabel,
+  GROUP_CARD_LIMIT,
   type BoardFilterState,
+  type BoardStatusFilter,
   type DaemonStateToken,
   type DerivedSessionCardVM,
   type ProjectGroupVM,
@@ -41,7 +51,12 @@ export interface BoardProps {
   /** Controlled filter state (owner persists it to the settings namespace). */
   filters: BoardFilterState
   onFiltersChange: (next: BoardFilterState) => void
-  onRefresh: () => void
+  /**
+   * Manual snapshot pull. A `Promise<boolean>` return (true = snapshot
+   * applied) lets the board render the in-flight state and a dismissible
+   * failure notice; a void return keeps the button fire-and-forget.
+   */
+  onRefresh: () => void | Promise<boolean>
   onSelectSession: (sessionId: string) => void
   /** Clock injection for deterministic rendering; defaults to Date.now(). */
   nowMs?: number
@@ -52,6 +67,26 @@ function SessionCard(props: {
   onSelect: (sessionId: string) => void
 }): ReactElement {
   const { card, onSelect } = props
+  const [copied, setCopied] = useState(false)
+
+  // UX-17: click the id row to copy the full session id. stopPropagation
+  // keeps the card's open-detail click intact; the row stays a non-focusable
+  // span because the card itself is already a <button> (no nested controls).
+  const onCopyId = (ev: MouseEvent): void => {
+    ev.stopPropagation()
+    const clipboard = typeof navigator === 'undefined' ? undefined : navigator.clipboard
+    if (clipboard === undefined) return
+    clipboard.writeText(card.sessionId).then(
+      () => {
+        setCopied(true)
+        setTimeout(() => { setCopied(false) }, 2000)
+      },
+      () => {
+        // Clipboard permission denied: the hover title still carries the id.
+      },
+    )
+  }
+
   return (
     <button
       type="button"
@@ -79,8 +114,14 @@ function SessionCard(props: {
       <div className={styles['cardTitle']} title={card.title}>
         {card.title.trim() === '' ? BOARD_STRINGS.card.untitled : card.title}
       </div>
-      <div className={styles['cardId']} title={card.sessionId}>
+      <div
+        className={styles['cardId']}
+        title={`${card.sessionId}\n${BOARD_STRINGS.card.copyId}`}
+        onClick={onCopyId}
+        data-testid="agent-sidecar-card-id"
+      >
         {card.shortId}
+        {copied && <span className={styles['copied']} role="status">{BOARD_STRINGS.card.copied}</span>}
       </div>
       <div className={styles['cardEvent']}>
         {card.lastEvent === null
@@ -97,9 +138,25 @@ function ProjectGroup(props: {
   onSelect: (sessionId: string) => void
 }): ReactElement {
   const { group, onSelect } = props
+  // UX-02: collapse + truncation are per-group ephemeral view state.
+  const [collapsed, setCollapsed] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+  const { shown, hiddenCount } = sliceCardsForDisplay(group.cards, GROUP_CARD_LIMIT, expanded)
+  // Honesty guard: a collapsed group must not silently hide waiting
+  // sessions, so the header keeps a waiting counter while folded.
+  const waitingInGroup = group.cards.filter((card) => card.badge.status === 'waiting').length
   return (
     <section className={styles['group']}>
-      <div className={styles['groupHead']}>
+      <button
+        type="button"
+        className={styles['groupHead']}
+        aria-expanded={!collapsed}
+        title={collapsed ? BOARD_STRINGS.group.expandTitle : BOARD_STRINGS.group.collapseTitle}
+        onClick={() => { setCollapsed(!collapsed) }}
+      >
+        <span className={styles['chevron']} aria-hidden>
+          {collapsed ? '▸' : '▾'}
+        </span>
         <span
           className={styles['groupName']}
           title={group.fullPath === '' ? undefined : group.fullPath}
@@ -109,12 +166,39 @@ function ProjectGroup(props: {
         <span className={styles['groupCount']}>
           {formatTemplate(BOARD_STRINGS.groupCount, { n: group.cards.length })}
         </span>
-      </div>
-      <div className={styles['grid']}>
-        {group.cards.map((card) => (
-          <SessionCard key={`${card.agent}:${card.sessionId}`} card={card} onSelect={onSelect} />
-        ))}
-      </div>
+        {collapsed && waitingInGroup > 0 && (
+          <span className={styles['groupAttention']}>
+            {formatTemplate(BOARD_STRINGS.topbar.countWaiting, { n: waitingInGroup })}
+          </span>
+        )}
+      </button>
+      {!collapsed && (
+        <>
+          <div className={styles['grid']}>
+            {shown.map((card) => (
+              <SessionCard key={`${card.agent}:${card.sessionId}`} card={card} onSelect={onSelect} />
+            ))}
+          </div>
+          {hiddenCount > 0 && (
+            <button
+              type="button"
+              className={styles['showMore']}
+              onClick={() => { setExpanded(true) }}
+            >
+              {formatTemplate(BOARD_STRINGS.group.showAll, { n: group.cards.length })}
+            </button>
+          )}
+          {expanded && group.cards.length > GROUP_CARD_LIMIT && (
+            <button
+              type="button"
+              className={styles['showMore']}
+              onClick={() => { setExpanded(false) }}
+            >
+              {formatTemplate(BOARD_STRINGS.group.showLess, { n: GROUP_CARD_LIMIT })}
+            </button>
+          )}
+        </>
+      )}
     </section>
   )
 }
@@ -136,6 +220,36 @@ export function Board(props: BoardProps): ReactElement {
     ? TIME_WINDOW_OPTIONS
     : [...TIME_WINDOW_OPTIONS, props.filters.timeWindowHours].sort((a, b) => a - b)
 
+  // UX-07: manual-refresh feedback (in-flight + dismissible failure line).
+  const [refreshing, setRefreshing] = useState(false)
+  const [refreshFailed, setRefreshFailed] = useState(false)
+  const onRefreshClick = (): void => {
+    if (refreshing) return
+    setRefreshFailed(false)
+    const result = props.onRefresh()
+    if (result instanceof Promise) {
+      setRefreshing(true)
+      result
+        .then((ok) => { setRefreshFailed(!ok) })
+        .catch(() => { setRefreshFailed(true) })
+        .finally(() => { setRefreshing(false) })
+    }
+  }
+
+  // UX-01: the working/waiting badges toggle the status-only view.
+  const toggleStatusFilter = (status: BoardStatusFilter): void => {
+    const next: BoardFilterState = { ...props.filters }
+    if (next.statusFilter === status) delete next.statusFilter
+    else next.statusFilter = status
+    props.onFiltersChange(next)
+  }
+  const statusBadgeTitle = (status: BoardStatusFilter): string =>
+    props.filters.statusFilter === status
+      ? BOARD_STRINGS.topbar.clearStatusFilterTitle
+      : formatTemplate(BOARD_STRINGS.topbar.filterByStatusTitle, {
+          label: BOARD_STRINGS.status[status],
+        })
+
   return (
     <div className={styles['root']} data-testid="agent-sidecar-board">
       <header className={styles['topbar']}>
@@ -148,6 +262,31 @@ export function Board(props: BoardProps): ReactElement {
           <span className={styles['dot']} data-tone={vm.streamTone} />
           {vm.streamLabel}
         </span>
+        <button
+          type="button"
+          className={styles['countBadge']}
+          aria-pressed={props.filters.statusFilter === 'working'}
+          title={statusBadgeTitle('working')}
+          onClick={() => { toggleStatusFilter('working') }}
+          data-testid="agent-sidecar-count-working"
+        >
+          <span className={styles['dot']} data-tone={vm.workingCount > 0 ? 'success' : 'neutral'} />
+          {formatTemplate(BOARD_STRINGS.topbar.countWorking, { n: vm.workingCount })}
+        </button>
+        <button
+          type="button"
+          className={styles['countBadge']}
+          aria-pressed={props.filters.statusFilter === 'waiting'}
+          title={statusBadgeTitle('waiting')}
+          onClick={() => { toggleStatusFilter('waiting') }}
+          data-testid="agent-sidecar-count-waiting"
+        >
+          <span className={styles['dot']} data-tone={vm.waitingCount > 0 ? 'warn' : 'neutral'} />
+          {formatTemplate(BOARD_STRINGS.topbar.countWaiting, { n: vm.waitingCount })}
+        </button>
+        <span className={styles['countTotal']} data-testid="agent-sidecar-count-total">
+          {formatTemplate(BOARD_STRINGS.topbar.countTotal, { n: vm.totalCount })}
+        </span>
         <span className={styles['spacer']} />
         <label className={styles['control']}>
           {BOARD_STRINGS.topbar.timeWindow}
@@ -183,12 +322,26 @@ export function Board(props: BoardProps): ReactElement {
           type="button"
           className={styles['refresh']}
           title={BOARD_STRINGS.topbar.refreshTitle}
-          onClick={props.onRefresh}
+          disabled={refreshing}
+          onClick={onRefreshClick}
         >
-          {BOARD_STRINGS.topbar.refresh}
+          {refreshing ? BOARD_STRINGS.topbar.refreshing : BOARD_STRINGS.topbar.refresh}
         </button>
       </header>
 
+      {refreshFailed && (
+        <div className={styles['banner']} data-tone="warn" role="status">
+          {BOARD_STRINGS.topbar.refreshFailed}
+          <button
+            type="button"
+            className={styles['bannerDismiss']}
+            onClick={() => { setRefreshFailed(false) }}
+          >
+            {BOARD_STRINGS.topbar.dismiss}
+          </button>
+        </div>
+      )}
+
       {vm.banner !== null && (
         <div className={styles['banner']} data-tone={vm.banner.tone} role="status">
           {vm.banner.text}

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

@@ -76,6 +76,41 @@
   background: var(--dsw-alias-label-dimmed, #8c959f);
 }
 
+/* UX-01: clickable working/waiting count badges + the total counter. */
+
+.countBadge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 12px;
+  font-family: inherit;
+  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;
+  cursor: pointer;
+}
+
+.countBadge: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));
+}
+
+.countBadge[aria-pressed='true'] {
+  color: var(--dsw-alias-brand-primary, #4d6bfe);
+  border-color: var(--dsw-alias-brand-primary, #4d6bfe);
+}
+
+.countTotal {
+  font-size: 12px;
+  color: var(--dsw-alias-label-secondary, #57606a);
+  white-space: nowrap;
+}
+
 .spacer {
   flex: 1;
 }
@@ -121,6 +156,11 @@
   background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.04));
 }
 
+.refresh:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
 /* -------------------------------------------------------------- banner */
 
 .banner {
@@ -143,6 +183,18 @@
   border-color: var(--dsw-alias-state-error-secondary, rgba(207, 34, 46, 0.24));
 }
 
+.bannerDismiss {
+  margin-left: 10px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-size: 12px;
+  font-family: inherit;
+  color: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
 /* -------------------------------------------------------- empty states */
 
 .empty {
@@ -178,11 +230,48 @@
   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(--dsw-alias-label-tertiary, #6e7781);
+}
+
+.groupAttention {
+  flex: none;
+  font-size: 11px;
+  color: var(--dsw-alias-state-warn-primary, #9a6700);
+}
+
+.showMore {
+  align-self: flex-start;
+  font-size: 12px;
+  font-family: inherit;
+  color: var(--dsw-alias-label-secondary, #57606a);
+  background: transparent;
+  border: 1px dashed var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
+  border-radius: 6px;
+  padding: 2px 10px;
+  cursor: pointer;
+}
+
+.showMore:hover {
+  color: var(--dsw-alias-label-primary, #1f2328);
+  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.04));
 }
 
 .groupName {
@@ -286,6 +375,17 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  cursor: copy;
+}
+
+.cardId:hover {
+  color: var(--dsw-alias-label-secondary, #57606a);
+}
+
+.copied {
+  margin-left: 6px;
+  font-family: inherit;
+  color: var(--dsw-alias-state-success-primary, #1a7f37);
 }
 
 .cardEvent {

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

@@ -55,6 +55,9 @@ export const PROJECT_VIEW_STRINGS = {
   liveChip: '实时',
   /** Untitled-session fallback. */
   untitled: '(无标题)',
+  /** Lane truncation fold (UX-20; mirrors the board's group fold). */
+  showAllSessions: '展开全部 {n} 个会话',
+  showLessSessions: '只看前 {n} 个',
   /** Empty state (no groups at all). */
   empty: {
     title: '暂无项目关联',
@@ -68,6 +71,9 @@ export const PROJECT_VIEW_STRINGS = {
 
 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 +230,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),

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

@@ -195,6 +195,24 @@
   gap: 4px;
 }
 
+/* UX-20: lane truncation fold (same look as the board's group fold). */
+.showMore {
+  align-self: flex-start;
+  font-size: 12px;
+  font-family: inherit;
+  color: var(--dsw-alias-label-secondary, #57606a);
+  background: transparent;
+  border: 1px dashed var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
+  border-radius: 6px;
+  padding: 2px 10px;
+  cursor: pointer;
+}
+
+.showMore:hover {
+  color: var(--dsw-alias-label-primary, #1f2328);
+  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, 0.04));
+}
+
 /* -------------------------------------------------------- session rows */
 
 .session {