@shendeguize/dsh-agent-sidecar 0.1.0 → 0.1.1

package/src/client/board/project-view.tsx

@@ -14,15 +14,18 @@
  * blanking data the user already has.
  */
 
+import { useState } from 'react'
 import type { ReactElement } from 'react'
 import {
   buildProjectViewModel,
+  LANE_SESSION_LIMIT,
   PROJECT_VIEW_STRINGS,
   type AgentLaneVM,
   type DerivedProjectGroupVM,
   type DerivedProjectSessionVM,
   type ProjectGroupVM,
 } from './project-view-logic.ts'
+import { formatTemplate, sliceCardsForDisplay } from './logic.ts'
 import styles from './project-view.module.css'
 
 export interface ProjectViewProps {
@@ -74,6 +77,11 @@ function AgentLane(props: {
   onSelect: (sessionId: string) => void
 }): ReactElement {
   const { lane, onSelect } = props
+  // UX-20: lanes fold past the row limit — ephemeral view state, same
+  // pattern as the board's group truncation. Rows are status-sorted, so
+  // the fold never hides a leading working/waiting run (slice guard).
+  const [expanded, setExpanded] = useState(false)
+  const { shown, hiddenCount } = sliceCardsForDisplay(lane.sessions, LANE_SESSION_LIMIT, expanded)
   return (
     <div className={styles['lane']}>
       <div className={styles['laneHead']}>
@@ -83,7 +91,7 @@ function AgentLane(props: {
         {lane.agent}
       </div>
       <div className={styles['laneSessions']}>
-        {lane.sessions.map((session) => (
+        {shown.map((session) => (
           <SessionRow
             key={`${session.agent}:${session.sessionId}`}
             session={session}
@@ -91,6 +99,24 @@ function AgentLane(props: {
           />
         ))}
       </div>
+      {hiddenCount > 0 && (
+        <button
+          type="button"
+          className={styles['showMore']}
+          onClick={() => { setExpanded(true) }}
+        >
+          {formatTemplate(PROJECT_VIEW_STRINGS.showAllSessions, { n: lane.sessions.length })}
+        </button>
+      )}
+      {expanded && lane.sessions.length > LANE_SESSION_LIMIT && (
+        <button
+          type="button"
+          className={styles['showMore']}
+          onClick={() => { setExpanded(false) }}
+        >
+          {formatTemplate(PROJECT_VIEW_STRINGS.showLessSessions, { n: LANE_SESSION_LIMIT })}
+        </button>
+      )}
     </div>
   )
 }

package/src/client/board/strings.ts

@@ -22,10 +22,13 @@ export const BOARD_STRINGS = {
     dead: '已结束',
     unknown: '未知',
   },
-  /** Badge attention markers; gap outranks stale (per-session > global). */
+  /**
+   * Badge attention markers. Only the per-session gap marker renders at
+   * card level; the global stream-health notice lives in the top banner
+   * alone (UX-18: repeating it on every card was pure noise).
+   */
   attention: {
     gap: '事件缺口',
-    stale: '可能滞后',
   },
   /** Daemon supervisor state labels for the top-bar badge. */
   daemon: {
@@ -58,7 +61,7 @@ export const BOARD_STRINGS = {
     daemonDeferHint:
       '检测到 LaunchAgent 托管,插件不会自行启动 daemon;服务拉起后看板会自动出数。',
     filteredTitle: '当前过滤条件下没有会话',
-    filteredHint: '试试放宽时间窗,或打开「显示已结束」。',
+    filteredHint: '试试放宽时间窗、取消状态过滤,或打开「显示已结束」。',
     noSessionsTitle: '暂无被观测的会话',
     noSessionsHint:
       '本机 agent(claude / codex / cursor / dsh …)开始工作后会自动出现在这里。',
@@ -67,9 +70,25 @@ export const BOARD_STRINGS = {
   topbar: {
     title: 'Sidecar 多 agent 看板',
     refresh: '刷新',
+    refreshing: '刷新中…',
     refreshTitle: '手动拉取最新快照',
+    refreshFailed: '手动刷新失败,看板仍显示原有快照',
+    dismiss: '知道了',
     showDead: '显示已结束',
     timeWindow: '时间窗',
+    /** Count badges (UX-01); working/waiting are clickable status filters. */
+    countWorking: '{n} 工作中',
+    countWaiting: '{n} 等待中',
+    countTotal: '共 {n} 个会话',
+    filterByStatusTitle: '只看「{label}」的会话',
+    clearStatusFilterTitle: '取消状态过滤,显示全部会话',
+  },
+  /** Group collapse / truncation controls (UX-02). */
+  group: {
+    collapseTitle: '收起该分组',
+    expandTitle: '展开该分组',
+    showAll: '展开全部 {n} 个会话',
+    showLess: '只看前 {n} 个',
   },
   /** Session card texts. */
   card: {
@@ -80,13 +99,18 @@ export const BOARD_STRINGS = {
     observedValue: '观察值: {status}',
     lastReconcile: '最近对账: {time}',
     neverReconciled: '尚未对账',
+    copyId: '点击复制完整会话 id',
+    copied: '已复制',
   },
-  /** Relative time templates. */
+  /**
+   * Relative time templates. Ages ≥ 24h render as an absolute short date
+   * (`MM-DD HH:mm`, see formatRelativeTime) instead of a `{n} 天前` bucket
+   * (UX-13: whole columns of "3 天前" carried zero information).
+   */
   time: {
     justNow: '刚刚',
     minutesAgo: '{n} 分钟前',
     hoursAgo: '{n} 小时前',
-    daysAgo: '{n} 天前',
   },
   /** Time-window option templates. */
   timeWindow: {

package/src/client/controller.ts

@@ -169,7 +169,11 @@ function defaultStorage(): StorageLike | null {
   }
 }
 
-/** Parse + validate persisted filters; anything malformed reads as absent. */
+/**
+ * Parse + validate persisted filters; anything malformed reads as absent.
+ * The optional statusFilter (UX-01) survives only as one of its two legal
+ * values — an unrecognized token is dropped, not the whole record.
+ */
 export function readStoredFilters(storage: StorageLike | null): BoardFilterState | null {
   if (storage === null) return null
   try {
@@ -177,7 +181,11 @@ export function readStoredFilters(storage: StorageLike | null): BoardFilterState
     if (raw === null) return null
     const parsed: unknown = JSON.parse(raw)
     if (typeof parsed !== 'object' || parsed === null) return null
-    const candidate = parsed as { timeWindowHours?: unknown; showDead?: unknown }
+    const candidate = parsed as {
+      timeWindowHours?: unknown
+      showDead?: unknown
+      statusFilter?: unknown
+    }
     if (
       typeof candidate.timeWindowHours !== 'number'
       || !Number.isFinite(candidate.timeWindowHours)
@@ -186,7 +194,14 @@ export function readStoredFilters(storage: StorageLike | null): BoardFilterState
     ) {
       return null
     }
-    return { timeWindowHours: candidate.timeWindowHours, showDead: candidate.showDead }
+    const filters: BoardFilterState = {
+      timeWindowHours: candidate.timeWindowHours,
+      showDead: candidate.showDead,
+    }
+    if (candidate.statusFilter === 'working' || candidate.statusFilter === 'waiting') {
+      filters.statusFilter = candidate.statusFilter
+    }
+    return filters
   } catch {
     return null
   }
@@ -326,15 +341,20 @@ export class SidecarController {
     this.notify()
   }
 
-  /** Manual refresh (board's refresh button): one out-of-band snapshot pull. */
-  async refresh(): Promise<void> {
+  /**
+   * Manual refresh (board's refresh button): one out-of-band snapshot
+   * pull. Resolves true when the snapshot applied, false on failure so
+   * the button can surface honest feedback (UX-07) — never rejects; the
+   * stream (and its status surface) remains the health authority.
+   */
+  async refresh(): Promise<boolean> {
     try {
       const snapshot = await this.fetchFn({})
       this.applySnapshot(snapshot)
+      return true
     } catch (err) {
-      // The stream (and its status surface) remains the health authority;
-      // a failed manual pull only logs.
       console.error('agent-sidecar: manual refresh failed', err)
+      return false
     }
   }
 

package/src/client/detail/SessionDetail.tsx

@@ -5,25 +5,37 @@
  * imports. The integration layer (S7) owns transport and accumulation —
  * it feeds the {@link TimelineVM} built via logic.ts (`applyTimelinePage`
  * for history pages, `applyListenPage` for listen-mode refetches) and
- * handles `onLoadMore` / `onToggleListen`.
+ * handles `onLoadMore` / `onToggleListen` / `onRefresh`.
+ *
+ * Row pipeline (all pure, logic.ts): buildTimelineRows (gaps on the FULL
+ * entry list) → filterTimelineRows (UX-03 kind filter, conversation-first
+ * by default with an honest hidden count) → aggregateChunkRows (UX-03
+ * adjacent empty streaming chunks collapse into one expandable run) →
+ * limitTimelineRows (render cap with a 全部显示 escape hatch).
  *
  * Long-list posture (task report): no full virtualization — history only
  * grows page-by-page on explicit 加载更多, and rendering is additionally
- * capped at {@link DEFAULT_MAX_RENDER_ROWS} newest rows behind a collapse
- * notice with a 全部显示 escape hatch. View-local concerns (expanded
- * bodies, the lift-cap flag, auto-scroll) are component state; everything
+ * capped at {@link DEFAULT_MAX_RENDER_ROWS} newest rows. View-local
+ * concerns (expanded bodies/runs, filter mode, the lift-cap flag, the
+ * UX-04 initial landing, copy feedback) are component state; everything
  * else comes through props.
  */
 
-import { useEffect, useRef, useState, type ReactElement } from 'react'
+import { Fragment, useEffect, useRef, useState, type ReactElement } from 'react'
 import {
+  aggregateChunkRows,
   buildTimelineRows,
   deriveDetailBodyState,
   deriveDetailStatus,
   deriveSourceBadges,
   agentGlyph,
+  filterTimelineRows,
+  formatTemplate,
   limitTimelineRows,
+  shouldStickToLatest,
   DEFAULT_MAX_RENDER_ROWS,
+  type TimelineEventRowVM,
+  type TimelineFilterMode,
   type TimelineRowVM,
   type TimelineVM,
 } from './logic.ts'
@@ -51,8 +63,12 @@ export interface SessionDetailProps {
   hasMore: boolean
   /** Listen mode (SSE-triggered newest-page refetch) currently on. */
   listening: boolean
+  /** True while a manual newest-window refresh is in flight (UX-07). */
+  refreshing?: boolean
   onLoadMore: () => void
   onToggleListen: () => void
+  /** Manual newest-window refetch; the button renders only when given. */
+  onRefresh?: () => void
   onClose?: () => void
   /** Clock injection for deterministic rendering; defaults to Date.now(). */
   nowMs?: number
@@ -61,7 +77,7 @@ export interface SessionDetailProps {
 }
 
 function EventRow(props: {
-  row: Extract<TimelineRowVM, { type: 'event' }>
+  row: TimelineEventRowVM
   expanded: boolean
   onToggleExpand: (key: string) => void
 }): ReactElement {
@@ -86,7 +102,7 @@ function EventRow(props: {
         )}
         {row.isNew && <span className={styles['eventNew']}>{DETAIL_STRINGS.timeline.newBadge}</span>}
         <span className={styles['eventSpacer']} />
-        <span className={styles['eventTime']}>{row.relativeTime}</span>
+        <span className={styles['eventTime']}>{row.timeLabel}</span>
       </div>
       {entry.summary !== '' && <div className={styles['eventSummary']}>{entry.summary}</div>}
       {entry.expandable && (
@@ -105,12 +121,58 @@ function EventRow(props: {
   )
 }
 
+/** Collapsed run of adjacent streaming chunks (UX-03); expandable lossless. */
+function ChunkRunRow(props: {
+  row: Extract<TimelineRowVM, { type: 'chunks' }>
+  expanded: boolean
+  onToggleRun: (key: string) => void
+  expandedKeys: ReadonlySet<string>
+  onToggleExpand: (key: string) => void
+}): ReactElement {
+  const { row } = props
+  return (
+    <Fragment>
+      <li
+        className={styles['chunkRun']}
+        data-new={row.isNew || undefined}
+        title={row.hoverTitle}
+        data-testid="agent-sidecar-detail-chunks"
+      >
+        <span className={styles['chunkRunLabel']}>{row.label}</span>
+        <button
+          type="button"
+          className={styles['expandButton']}
+          onClick={() => props.onToggleRun(row.key)}
+        >
+          {props.expanded ? DETAIL_STRINGS.timeline.collapse : DETAIL_STRINGS.timeline.expand}
+        </button>
+        <span className={styles['eventSpacer']} />
+        <span className={styles['eventTime']}>{row.timeLabel}</span>
+      </li>
+      {props.expanded &&
+        row.members.map((member) => (
+          <EventRow
+            key={member.key}
+            row={member}
+            expanded={props.expandedKeys.has(member.key)}
+            onToggleExpand={props.onToggleExpand}
+          />
+        ))}
+    </Fragment>
+  )
+}
+
 /** The session-detail view. Pure render of the logic.ts pipelines over props. */
 export function SessionDetail(props: SessionDetailProps): ReactElement {
   const nowMs = props.nowMs ?? Date.now()
   const [expandedKeys, setExpandedKeys] = useState<ReadonlySet<string>>(new Set())
+  const [expandedRuns, setExpandedRuns] = useState<ReadonlySet<string>>(new Set())
+  const [filterMode, setFilterMode] = useState<TimelineFilterMode>('conversation')
   const [renderAll, setRenderAll] = useState(false)
+  const [copied, setCopied] = useState(false)
   const listRef = useRef<HTMLOListElement | null>(null)
+  const positionedRef = useRef(false)
+  const copyTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   const status = deriveDetailStatus(props.header.status)
   const sourceBadges = deriveSourceBadges(props.timeline.sources)
@@ -121,19 +183,39 @@ export function SessionDetail(props: SessionDetailProps): ReactElement {
   })
 
   const allRows = buildTimelineRows(props.timeline, nowMs)
+  const filtered = filterTimelineRows(allRows, filterMode)
+  const aggregated = aggregateChunkRows(filtered.rows)
   const limited = renderAll
-    ? { rows: allRows, hiddenCount: 0, notice: null }
-    : limitTimelineRows(allRows, props.maxRenderRows ?? DEFAULT_MAX_RENDER_ROWS)
+    ? { rows: aggregated, hiddenCount: 0, notice: null }
+    : limitTimelineRows(aggregated, props.maxRenderRows ?? DEFAULT_MAX_RENDER_ROWS)
 
   const entryCount = props.timeline.entries.length
   const listening = props.listening
   useEffect(() => {
-    // Listen mode appends at the tail: keep the newest events in view.
-    if (!listening) return
+    // UX-04 landing + listen-mode tail pinning (shouldStickToLatest):
+    // first non-empty render lands on the newest events; listen appends
+    // keep them in view; paging back never yanks the viewport.
     const list = listRef.current
-    if (list !== null) list.scrollTop = list.scrollHeight
+    if (list === null) return
+    if (
+      shouldStickToLatest({
+        entryCount,
+        positioned: positionedRef.current,
+        listening,
+      })
+    ) {
+      list.scrollTop = list.scrollHeight
+      positionedRef.current = true
+    }
   }, [listening, entryCount])
 
+  useEffect(
+    () => () => {
+      if (copyTimerRef.current !== null) clearTimeout(copyTimerRef.current)
+    },
+    [],
+  )
+
   const toggleExpand = (key: string): void => {
     setExpandedKeys((prev) => {
       const next = new Set(prev)
@@ -143,6 +225,32 @@ export function SessionDetail(props: SessionDetailProps): ReactElement {
     })
   }
 
+  const toggleRun = (key: string): void => {
+    setExpandedRuns((prev) => {
+      const next = new Set(prev)
+      if (next.has(key)) next.delete(key)
+      else next.add(key)
+      return next
+    })
+  }
+
+  const copySessionId = (): void => {
+    const clipboard = typeof navigator === 'undefined' ? undefined : navigator.clipboard
+    if (clipboard === undefined) return
+    clipboard.writeText(props.sessionId).then(
+      () => {
+        setCopied(true)
+        if (copyTimerRef.current !== null) clearTimeout(copyTimerRef.current)
+        copyTimerRef.current = setTimeout(() => {
+          setCopied(false)
+        }, 2000)
+      },
+      () => {
+        // Clipboard permission denied: silently keep the plain id display.
+      },
+    )
+  }
+
   return (
     <div className={styles['root']} data-testid="agent-sidecar-detail">
       <header className={styles['header']}>
@@ -163,6 +271,20 @@ export function SessionDetail(props: SessionDetailProps): ReactElement {
             {status.label}
           </span>
           <span className={styles['spacer']} />
+          {props.onRefresh !== undefined && (
+            <button
+              type="button"
+              className={styles['refreshButton']}
+              disabled={props.refreshing === true}
+              title={DETAIL_STRINGS.header.refreshHint}
+              onClick={props.onRefresh}
+              data-testid="agent-sidecar-detail-refresh"
+            >
+              {props.refreshing === true
+                ? DETAIL_STRINGS.header.refreshing
+                : DETAIL_STRINGS.header.refresh}
+            </button>
+          )}
           <button
             type="button"
             className={styles['listenButton']}
@@ -183,9 +305,20 @@ export function SessionDetail(props: SessionDetailProps): ReactElement {
               ? DETAIL_STRINGS.header.unknownProject
               : props.header.project}
           </span>
-          <span className={styles['sessionId']} title={props.sessionId}>
+          <button
+            type="button"
+            className={styles['sessionId']}
+            title={`${props.sessionId} · ${DETAIL_STRINGS.header.copyIdTitle}`}
+            onClick={copySessionId}
+            data-testid="agent-sidecar-detail-copy-id"
+          >
             {props.sessionId}
-          </span>
+          </button>
+          {copied && (
+            <span className={styles['copiedBubble']} role="status">
+              {DETAIL_STRINGS.header.copied}
+            </span>
+          )}
         </div>
         <div className={styles['metaRow']}>
           <span className={styles['disclaimer']}>{DETAIL_STRINGS.header.observedDisclaimer}</span>
@@ -214,6 +347,27 @@ export function SessionDetail(props: SessionDetailProps): ReactElement {
         </div>
       ) : (
         <>
+          <div className={styles['filterRow']} data-testid="agent-sidecar-detail-filter">
+            {(['conversation', 'all'] as const).map((mode) => (
+              <button
+                key={mode}
+                type="button"
+                className={styles['filterChip']}
+                data-active={filterMode === mode || undefined}
+                aria-pressed={filterMode === mode}
+                onClick={() => {
+                  setFilterMode(mode)
+                }}
+              >
+                {DETAIL_STRINGS.filter[mode]}
+              </button>
+            ))}
+            {filtered.hiddenCount > 0 && (
+              <span className={styles['filterHiddenNote']}>
+                {formatTemplate(DETAIL_STRINGS.filter.hiddenNotice, { n: filtered.hiddenCount })}
+              </span>
+            )}
+          </div>
           <div className={styles['pager']}>
             {props.hasMore ? (
               <button
@@ -253,6 +407,15 @@ export function SessionDetail(props: SessionDetailProps): ReactElement {
                 >
                   {row.label}
                 </li>
+              ) : row.type === 'chunks' ? (
+                <ChunkRunRow
+                  key={row.key}
+                  row={row}
+                  expanded={expandedRuns.has(row.key)}
+                  onToggleRun={toggleRun}
+                  expandedKeys={expandedKeys}
+                  onToggleExpand={toggleExpand}
+                />
               ) : (
                 <EventRow
                   key={row.key}

package/src/client/detail/detail.module.css

@@ -128,7 +128,30 @@
 .listenButton[data-active] {
   color: var(--dsw-alias-brand-primary, #4d6bfe);
   border-color: var(--dsw-alias-brand-primary, #4d6bfe);
-  background: var(--dsw-alias-brand-tertiary, rgba(77, 107, 254, 0.08));
+  /* brand tint from the real token (brand-secondary/tertiary do not exist
+   * in the dsh token table — UX-15). */
+  background: color-mix(in srgb, var(--dsw-alias-brand-primary, #4d6bfe) 8%, transparent);
+}
+
+.refreshButton {
+  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: 999px;
+  padding: 2px 12px;
+  cursor: pointer;
+}
+
+.refreshButton:hover:enabled {
+  color: var(--dsw-alias-label-primary, #1f2328);
+  border-color: var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
+}
+
+.refreshButton:disabled {
+  cursor: default;
+  opacity: 0.6;
 }
 
 .title {
@@ -155,15 +178,35 @@
   white-space: nowrap;
 }
 
+/* Click-to-copy session id (UX-17): plain-text look, button semantics. */
 .sessionId {
   font-size: 11px;
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   color: var(--dsw-alias-label-tertiary, #6e7781);
+  background: transparent;
+  border: none;
+  padding: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   flex: none;
   max-width: 40%;
+  cursor: pointer;
+}
+
+.sessionId:hover {
+  color: var(--dsw-alias-label-primary, #1f2328);
+  text-decoration: underline;
+}
+
+.copiedBubble {
+  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-secondary, rgba(26, 127, 55, 0.24));
 }
 
 .metaRow {
@@ -247,6 +290,43 @@
   color: var(--dsw-alias-label-secondary, #57606a);
 }
 
+/* --------------------------------------- kind filter chips (UX-03) */
+
+.filterRow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.filterChip {
+  font-size: 11px;
+  font-family: inherit;
+  line-height: 18px;
+  padding: 0 10px;
+  border-radius: 999px;
+  color: var(--dsw-alias-label-secondary, #57606a);
+  background: transparent;
+  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.08));
+  cursor: pointer;
+}
+
+.filterChip:hover {
+  color: var(--dsw-alias-label-primary, #1f2328);
+  border-color: var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
+}
+
+.filterChip[data-active] {
+  color: var(--dsw-alias-brand-primary, #4d6bfe);
+  border-color: var(--dsw-alias-brand-primary, #4d6bfe);
+  background: color-mix(in srgb, var(--dsw-alias-brand-primary, #4d6bfe) 8%, transparent);
+}
+
+.filterHiddenNote {
+  font-size: 11px;
+  color: var(--dsw-alias-label-tertiary, #6e7781);
+}
+
 /* --------------------------------------------------------------- pager */
 
 .pager {
@@ -325,7 +405,30 @@
 
 .event[data-new] {
   border-color: var(--dsw-alias-brand-primary, #4d6bfe);
-  background: var(--dsw-alias-brand-tertiary, rgba(77, 107, 254, 0.06));
+  /* brand tint from the real token (UX-15). */
+  background: color-mix(in srgb, var(--dsw-alias-brand-primary, #4d6bfe) 6%, transparent);
+}
+
+/* Aggregated streaming-chunk run (UX-03): quiet one-line stand-in. */
+.chunkRun {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  line-height: 16px;
+  padding: 4px 10px;
+  border-radius: 6px;
+  color: var(--dsw-alias-label-tertiary, #6e7781);
+  background: var(--dsw-alias-bg-layer-1, rgba(0, 0, 0, 0.02));
+  border: 1px dashed var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
+}
+
+.chunkRun[data-new] {
+  border-color: var(--dsw-alias-brand-primary, #4d6bfe);
+}
+
+.chunkRunLabel {
+  flex: none;
 }
 
 .eventHead {