@shendeguize/dsh-agent-sidecar 0.1.0 → 0.2.0

package/src/client/board/Board.tsx

@@ -7,17 +7,28 @@
  * 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 { Button, Pill, StateDot, type StateDotState } from '@deepseek-ai/dsh-client-ui-primitives'
+import { useEffect, useRef, useState } from 'react'
 import type { ReactElement } from 'react'
 import {
   buildBoardViewModel,
-  timeWindowLabel,
   formatTemplate,
+  sliceCardsForDisplay,
+  timeWindowLabel,
+  GROUP_CARD_LIMIT,
   type BoardFilterState,
+  type BoardStatusFilter,
   type DaemonStateToken,
   type DerivedSessionCardVM,
   type ProjectGroupVM,
@@ -25,6 +36,7 @@ import {
   type StreamHealthToken,
 } from './logic.ts'
 import { BOARD_STRINGS } from './strings.ts'
+import { surfaceProps } from '../theme/parts.ts'
 import styles from './board.module.css'
 
 /** Time-window choices offered by the top bar (hours). */
@@ -41,54 +53,118 @@ 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
 }
 
+function sessionDotState(status: DerivedSessionCardVM['badge']['status']): StateDotState | null {
+  if (status === 'working') return 'ongoing'
+  if (status === 'waiting') return 'warning'
+  return null
+}
+
 function SessionCard(props: {
   card: DerivedSessionCardVM
   onSelect: (sessionId: string) => void
 }): ReactElement {
   const { card, onSelect } = props
+  const [copied, setCopied] = useState(false)
+  const copyTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const copyAliveRef = useRef(true)
+  const dotState = sessionDotState(card.badge.status)
+
+  useEffect(() => {
+    copyAliveRef.current = true
+    return () => {
+      copyAliveRef.current = false
+      if (copyTimerRef.current !== null) {
+        clearTimeout(copyTimerRef.current)
+        copyTimerRef.current = null
+      }
+    }
+  }, [])
+
+  // UX-17: opening and copying are sibling buttons inside a semantic card,
+  // so both actions are independently keyboard reachable.
+  const onCopyId = (): void => {
+    const clipboard = typeof navigator === 'undefined' ? undefined : navigator.clipboard
+    if (clipboard === undefined) return
+    clipboard.writeText(card.sessionId).then(
+      () => {
+        if (!copyAliveRef.current) return
+        if (copyTimerRef.current !== null) clearTimeout(copyTimerRef.current)
+        setCopied(true)
+        copyTimerRef.current = setTimeout(() => {
+          copyTimerRef.current = null
+          setCopied(false)
+        }, 2000)
+      },
+      () => {
+        // Clipboard permission denied: the hover title still carries the id.
+      },
+    )
+  }
+
   return (
-    <button
-      type="button"
-      className={styles['card']}
-      onClick={() => onSelect(card.sessionId)}
+    <article
+      {...surfaceProps('board-card', styles['card'])}
       data-testid="agent-sidecar-card"
     >
-      <div className={styles['cardHead']}>
-        <span className={styles['agent']}>
-          <span className={styles['glyph']} aria-hidden>
-            {card.glyph}
+      <button
+        type="button"
+        className={styles['cardOpen']}
+        onClick={() => onSelect(card.sessionId)}
+      >
+        <span className={styles['cardHead']}>
+          <span className={styles['agent']}>
+            <span className={styles['glyph']} aria-hidden>
+              {card.glyph}
+            </span>
+            {card.agent}
+          </span>
+          <span title={card.hoverTitle}>
+            <Pill className={styles['statusPill']}>
+              {dotState === null
+                ? <span className={styles['dot']} data-tone={card.badge.tone} />
+                : <StateDot state={dotState} size={8} />}
+              {card.badge.label}
+              {card.badge.attention !== null && (
+                <span className={styles['attention']} data-kind={card.badge.attention}>
+                  {card.badge.attentionLabel}
+                </span>
+              )}
+            </Pill>
           </span>
-          {card.agent}
         </span>
-        <span className={styles['badge']} data-tone={card.badge.tone} title={card.hoverTitle}>
-          <span className={styles['dot']} data-tone={card.badge.tone} />
-          {card.badge.label}
-          {card.badge.attention !== null && (
-            <span className={styles['attention']} data-kind={card.badge.attention}>
-              {card.badge.attentionLabel}
-            </span>
-          )}
+        <span className={styles['cardTitle']} title={card.title}>
+          {card.title.trim() === '' ? BOARD_STRINGS.card.untitled : card.title}
         </span>
-      </div>
-      <div className={styles['cardTitle']} title={card.title}>
-        {card.title.trim() === '' ? BOARD_STRINGS.card.untitled : card.title}
-      </div>
-      <div className={styles['cardId']} title={card.sessionId}>
+      </button>
+      <Button
+        size="sm"
+        variant="ghost"
+        className={styles['cardId']}
+        title={`${card.sessionId}\n${BOARD_STRINGS.card.copyId}`}
+        onClick={onCopyId}
+        data-testid="agent-sidecar-card-id"
+      >
         {card.shortId}
-      </div>
+        {copied && <span className={styles['copied']} role="status">{BOARD_STRINGS.card.copied}</span>}
+      </Button>
       <div className={styles['cardEvent']}>
         {card.lastEvent === null
           ? BOARD_STRINGS.card.noEvent
           : `${card.lastEvent.kind} · ${card.lastEvent.text}`}
       </div>
       <div className={styles['cardTime']}>{card.relativeTime}</div>
-    </button>
+    </article>
   )
 }
 
@@ -97,9 +173,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 +201,41 @@ 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
+              size="sm"
+              variant="outline"
+              className={styles['showMore']}
+              onClick={() => { setExpanded(true) }}
+            >
+              {formatTemplate(BOARD_STRINGS.group.showAll, { n: group.cards.length })}
+            </Button>
+          )}
+          {expanded && group.cards.length > GROUP_CARD_LIMIT && (
+            <Button
+              size="sm"
+              variant="outline"
+              className={styles['showMore']}
+              onClick={() => { setExpanded(false) }}
+            >
+              {formatTemplate(BOARD_STRINGS.group.showLess, { n: GROUP_CARD_LIMIT })}
+            </Button>
+          )}
+        </>
+      )}
     </section>
   )
 }
@@ -136,17 +257,88 @@ 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],
+        })
+  const daemonDotState: StateDotState =
+    props.daemonState === 'failed'
+      ? 'error'
+      : props.daemonState === 'defer' || props.daemonState === 'backoff'
+        ? 'warning'
+        : props.daemonState === 'adopted' || props.daemonState === 'hosted'
+          ? 'done'
+          : 'ongoing'
+  const streamDotState: StateDotState =
+    props.streamHealth === 'ok' ? 'done' : props.streamHealth === 'degraded' ? 'warning' : 'ongoing'
+
   return (
-    <div className={styles['root']} data-testid="agent-sidecar-board">
-      <header className={styles['topbar']}>
+    <div {...surfaceProps('board', styles['root'])} data-testid="agent-sidecar-board">
+      <header {...surfaceProps('board-toolbar', styles['topbar'])}>
         <span className={styles['title']}>{BOARD_STRINGS.topbar.title}</span>
-        <span className={styles['badge']} data-tone={vm.daemonBadge.tone} title={props.daemonDetail}>
-          <span className={styles['dot']} data-tone={vm.daemonBadge.tone} />
-          {vm.daemonBadge.label}
+        <span title={props.daemonDetail}>
+          <Pill>
+            <StateDot state={daemonDotState} size={8} />
+            {vm.daemonBadge.label}
+          </Pill>
         </span>
-        <span className={styles['badge']} data-tone={vm.streamTone}>
-          <span className={styles['dot']} data-tone={vm.streamTone} />
+        <Pill>
+          <StateDot state={streamDotState} size={8} />
           {vm.streamLabel}
+        </Pill>
+        <Pill
+          className={styles['countBadge']}
+          active={props.filters.statusFilter === 'working'}
+          aria-pressed={props.filters.statusFilter === 'working'}
+          title={statusBadgeTitle('working')}
+          onClick={() => { toggleStatusFilter('working') }}
+          data-testid="agent-sidecar-count-working"
+        >
+          {vm.workingCount > 0
+            ? <StateDot state="ongoing" size={8} />
+            : <span className={styles['dot']} data-tone="neutral" />}
+          {formatTemplate(BOARD_STRINGS.topbar.countWorking, { n: vm.workingCount })}
+        </Pill>
+        <Pill
+          className={styles['countBadge']}
+          active={props.filters.statusFilter === 'waiting'}
+          aria-pressed={props.filters.statusFilter === 'waiting'}
+          title={statusBadgeTitle('waiting')}
+          onClick={() => { toggleStatusFilter('waiting') }}
+          data-testid="agent-sidecar-count-waiting"
+        >
+          {vm.waitingCount > 0
+            ? <StateDot state="warning" size={8} />
+            : <span className={styles['dot']} data-tone="neutral" />}
+          {formatTemplate(BOARD_STRINGS.topbar.countWaiting, { n: vm.waitingCount })}
+        </Pill>
+        <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']}>
@@ -179,16 +371,31 @@ export function Board(props: BoardProps): ReactElement {
           />
           {BOARD_STRINGS.topbar.showDead}
         </label>
-        <button
-          type="button"
-          className={styles['refresh']}
+        <Button
+          size="sm"
+          variant="toolbar"
           title={BOARD_STRINGS.topbar.refreshTitle}
-          onClick={props.onRefresh}
+          disabled={refreshing}
+          onClick={onRefreshClick}
         >
-          {BOARD_STRINGS.topbar.refresh}
-        </button>
+          {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
+            size="sm"
+            variant="ghost"
+            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}