@shendeguize/dsh-agent-sidecar 0.1.0 → 0.2.0

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

@@ -1,9 +1,4 @@
-/*
- * 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.
- */
+/* Project correlation layout consumes the shared Agent Sidecar theme. */
 
 .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,21 +25,12 @@
 .title {
   font-size: 15px;
   font-weight: 650;
-  color: var(--dsw-alias-label-primary, #1f2328);
+  color: var(--agsc-fg);
 }
 
 .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));
+  color: var(--agsc-fg-secondary);
 }
 
 /* -------------------------------------------------------------- banner */
@@ -53,14 +39,14 @@
   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='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);
 }
 
 /* -------------------------------------------------------- empty states */
@@ -80,14 +66,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 */
@@ -97,9 +83,9 @@
   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));
+  border-radius: var(--agsc-radius-card);
+  border: 1px solid var(--agsc-border-strong);
+  background: var(--agsc-bg-raised);
 }
 
 .groupHead {
@@ -113,7 +99,7 @@
 .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;
@@ -134,9 +120,9 @@
   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);
+  border: 1px solid var(--agsc-border);
+  background: var(--dsw-alias-bg-layer-2);
+  color: var(--agsc-fg-secondary);
   white-space: nowrap;
 }
 
@@ -145,8 +131,8 @@
   line-height: 18px;
   padding: 0 7px;
   border-radius: 999px;
-  color: var(--dsw-alias-static-white, #fff);
-  background: var(--dsw-alias-brand-primary, #4d6bfe);
+  color: var(--dsw-alias-label-primary-foreground);
+  background: var(--agsc-accent);
   white-space: nowrap;
 }
 
@@ -157,7 +143,7 @@
 .groupMeta {
   font-size: 11px;
   flex: none;
-  color: var(--dsw-alias-label-tertiary, #6e7781);
+  color: var(--agsc-fg-dimmed);
   white-space: nowrap;
 }
 
@@ -181,12 +167,12 @@
   gap: 5px;
   font-size: 12px;
   font-weight: 600;
-  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);
 }
 
 .laneSessions {
@@ -195,6 +181,11 @@
   gap: 4px;
 }
 
+/* UX-20: lane truncation fold (same look as the board's group fold). */
+.showMore {
+  align-self: flex-start;
+}
+
 /* -------------------------------------------------------- session rows */
 
 .session {
@@ -206,36 +197,25 @@
   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);
+  border-radius: var(--agsc-radius-control);
+  border: 1px solid var(--agsc-border);
+  background: var(--dsw-alias-bg-base);
+  color: var(--agsc-fg);
   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));
+  border-color: var(--agsc-border-strong);
+  background: var(--dsw-alias-interactive-bg-hover);
 }
 
 .session:focus-visible {
-  outline: 2px solid var(--dsw-alias-brand-primary, #4d6bfe);
+  outline: 2px solid var(--agsc-accent);
   outline-offset: 1px;
 }
 
-.badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
+.statusPill {
   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 {
@@ -243,36 +223,24 @@
   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);
+  background: var(--dsw-alias-label-tertiary);
 }
 
 .dot[data-tone='neutral'] {
-  background: var(--dsw-alias-label-tertiary, #6e7781);
+  background: var(--dsw-alias-label-tertiary);
 }
 
 .dot[data-tone='muted'] {
-  background: var(--dsw-alias-label-dimmed, #8c959f);
+  background: var(--agsc-fg-dimmed);
 }
 
 .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);
 }
 
 .sessionTitle {
@@ -284,24 +252,19 @@
 
 .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));
+  color: var(--agsc-ok);
 }
 
 .sessionId {
   flex: none;
   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-dimmed);
 }
 
 .sessionTime {
   flex: none;
   margin-left: auto;
   font-size: 11px;
-  color: var(--dsw-alias-label-caption, var(--dsw-alias-label-tertiary, #6e7781));
+  color: var(--agsc-fg-dimmed);
 }

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

@@ -14,15 +14,20 @@
  * blanking data the user already has.
  */
 
+import { Button, Pill, StateDot, type StateDotState } from '@deepseek-ai/dsh-client-ui-primitives'
+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 { surfaceProps } from '../theme/parts.ts'
 import styles from './project-view.module.css'
 
 export interface ProjectViewProps {
@@ -36,11 +41,18 @@ export interface ProjectViewProps {
   nowMs?: number
 }
 
+function sessionDotState(status: DerivedProjectSessionVM['badge']['status']): StateDotState | null {
+  if (status === 'working') return 'ongoing'
+  if (status === 'waiting') return 'warning'
+  return null
+}
+
 function SessionRow(props: {
   session: DerivedProjectSessionVM
   onSelect: (sessionId: string) => void
 }): ReactElement {
   const { session, onSelect } = props
+  const dotState = sessionDotState(session.badge.status)
   return (
     <button
       type="button"
@@ -48,19 +60,21 @@ function SessionRow(props: {
       onClick={() => onSelect(session.sessionId)}
       data-testid="agent-sidecar-project-session"
     >
-      <span className={styles['badge']} data-tone={session.badge.tone}>
-        <span className={styles['dot']} data-tone={session.badge.tone} />
+      <Pill className={styles['statusPill']}>
+        {dotState === null
+          ? <span className={styles['dot']} data-tone={session.badge.tone} />
+          : <StateDot state={dotState} size={8} />}
         {session.badge.label}
         {session.badge.attention !== null && (
           <span className={styles['attention']} data-kind={session.badge.attention}>
             {session.badge.attentionLabel}
           </span>
         )}
-      </span>
+      </Pill>
       <span className={styles['sessionTitle']} title={session.title}>
         {session.displayTitle}
       </span>
-      {session.live && <span className={styles['liveChip']}>{PROJECT_VIEW_STRINGS.liveChip}</span>}
+      {session.live && <Pill className={styles['liveChip']}>{PROJECT_VIEW_STRINGS.liveChip}</Pill>}
       <span className={styles['sessionId']} title={session.sessionId}>
         {session.shortId}
       </span>
@@ -74,6 +88,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 +102,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 +110,26 @@ function AgentLane(props: {
           />
         ))}
       </div>
+      {hiddenCount > 0 && (
+        <Button
+          size="sm"
+          variant="outline"
+          className={styles['showMore']}
+          onClick={() => { setExpanded(true) }}
+        >
+          {formatTemplate(PROJECT_VIEW_STRINGS.showAllSessions, { n: lane.sessions.length })}
+        </Button>
+      )}
+      {expanded && lane.sessions.length > LANE_SESSION_LIMIT && (
+        <Button
+          size="sm"
+          variant="outline"
+          className={styles['showMore']}
+          onClick={() => { setExpanded(false) }}
+        >
+          {formatTemplate(PROJECT_VIEW_STRINGS.showLessSessions, { n: LANE_SESSION_LIMIT })}
+        </Button>
+      )}
     </div>
   )
 }
@@ -142,13 +181,16 @@ export function ProjectView(props: ProjectViewProps): ReactElement {
   const hasContent = vm.groups.length > 0
 
   return (
-    <div className={styles['root']} data-testid="agent-sidecar-project-view">
+    <div
+      {...surfaceProps('project-view', styles['root'])}
+      data-testid="agent-sidecar-project-view"
+    >
       <header className={styles['topbar']}>
         <span className={styles['title']}>{PROJECT_VIEW_STRINGS.title}</span>
         <span className={styles['summary']}>{vm.summaryLabel}</span>
         {props.loading && (
-          <span className={styles['loadingChip']} role="status">
-            {PROJECT_VIEW_STRINGS.loading}
+          <span role="status">
+            <Pill>{PROJECT_VIEW_STRINGS.loading}</Pill>
           </span>
         )}
       </header>

package/src/client/board/strings.ts

@@ -1,112 +1,97 @@
-/**
- * Centralized user-facing strings for the board view and the footer widget
- * (design §5.1 view 1 / view 4, §5.3 honesty wording).
- *
- * Chinese is the primary UI language for now; every string the components
- * render lives in this single table so the i18n skeleton (T2.3,
- * `ctx.locale.register`) can take it over without hunting through JSX.
- * Templates use `{name}` placeholders resolved by `formatTemplate` in
- * `logic.ts` — plain message strings, locale-registry friendly.
- *
- * Pure data module: no imports, no logic.
- *
- * @module
- */
+import { createLocaleView } from '../locales/view.ts'
 
-export const BOARD_STRINGS = {
-  /** Session status badge labels (observed values, see hover disclaimer). */
+/** Dynamic board vocabulary; template leaves are interpolated by `formatTemplate`. */
+export const BOARD_STRINGS = createLocaleView({
   status: {
-    working: '工作中',
-    waiting: '等待中',
-    idle: '空闲',
-    dead: '已结束',
-    unknown: '未知',
+    working: 'board.status.working',
+    waiting: 'board.status.waiting',
+    idle: 'board.status.idle',
+    dead: 'board.status.dead',
+    unknown: 'board.status.unknown',
   },
-  /** Badge attention markers; gap outranks stale (per-session > global). */
   attention: {
-    gap: '事件缺口',
-    stale: '可能滞后',
+    gap: 'board.attention.gap',
   },
-  /** Daemon supervisor state labels for the top-bar badge. */
   daemon: {
-    probe: '探测中',
-    adopted: '已连接 · 领养',
-    defer: '等待系统服务',
-    reprobe: '重新探测中',
-    hosting: '正在启动',
-    hosted: '已连接 · 托管',
-    backoff: '重启退避中',
-    failed: '离线',
+    probe: 'board.daemon.probe',
+    adopted: 'board.daemon.adopted',
+    defer: 'board.daemon.defer',
+    reprobe: 'board.daemon.reprobe',
+    hosting: 'board.daemon.hosting',
+    hosted: 'board.daemon.hosted',
+    backoff: 'board.daemon.backoff',
+    failed: 'board.daemon.failed',
   },
-  /** Stream health indicator labels. */
   stream: {
-    ok: '实时流正常',
-    degraded: '实时流重连中',
-    unknown: '实时流未建立',
+    ok: 'board.stream.ok',
+    degraded: 'board.stream.degraded',
+    unknown: 'board.stream.unknown',
   },
-  /** Top banner texts (design §5.3: degraded warning / FAILED red banner). */
   banner: {
-    daemonFailed: 'sidecar 离线:看板显示最后一次快照,数据不再更新',
-    streamDegraded: '实时流重连中,数据可能滞后',
+    daemonFailed: 'board.banner.daemonFailed',
+    streamDegraded: 'board.banner.streamDegraded',
   },
-  /** Empty-state guidance blocks. */
   empty: {
-    daemonFailedTitle: 'sidecar 已离线',
-    daemonFailedHint:
-      'daemon 连续启动失败已熔断。可在设置卡重试,或手动运行 agent-sidecar daemon start 后等待自动领养。',
-    daemonDeferTitle: '等待系统服务拉起 daemon',
-    daemonDeferHint:
-      '检测到 LaunchAgent 托管,插件不会自行启动 daemon;服务拉起后看板会自动出数。',
-    filteredTitle: '当前过滤条件下没有会话',
-    filteredHint: '试试放宽时间窗,或打开「显示已结束」。',
-    noSessionsTitle: '暂无被观测的会话',
-    noSessionsHint:
-      '本机 agent(claude / codex / cursor / dsh …)开始工作后会自动出现在这里。',
+    daemonFailedTitle: 'board.empty.daemonFailedTitle',
+    daemonFailedHint: 'board.empty.daemonFailedHint',
+    daemonDeferTitle: 'board.empty.daemonDeferTitle',
+    daemonDeferHint: 'board.empty.daemonDeferHint',
+    filteredTitle: 'board.empty.filteredTitle',
+    filteredHint: 'board.empty.filteredHint',
+    noSessionsTitle: 'board.empty.noSessionsTitle',
+    noSessionsHint: 'board.empty.noSessionsHint',
   },
-  /** Top bar controls. */
   topbar: {
-    title: 'Sidecar 多 agent 看板',
-    refresh: '刷新',
-    refreshTitle: '手动拉取最新快照',
-    showDead: '显示已结束',
-    timeWindow: '时间窗',
+    title: 'board.topbar.title',
+    refresh: 'board.topbar.refresh',
+    refreshing: 'board.topbar.refreshing',
+    refreshTitle: 'board.topbar.refreshTitle',
+    refreshFailed: 'board.topbar.refreshFailed',
+    dismiss: 'board.topbar.dismiss',
+    showDead: 'board.topbar.showDead',
+    timeWindow: 'board.topbar.timeWindow',
+    countWorking: 'board.topbar.countWorking',
+    countWaiting: 'board.topbar.countWaiting',
+    countTotal: 'board.topbar.countTotal',
+    filterByStatusTitle: 'board.topbar.filterByStatusTitle',
+    clearStatusFilterTitle: 'board.topbar.clearStatusFilterTitle',
+  },
+  group: {
+    collapseTitle: 'board.group.collapseTitle',
+    expandTitle: 'board.group.expandTitle',
+    showAll: 'board.group.showAll',
+    showLess: 'board.group.showLess',
   },
-  /** Session card texts. */
   card: {
-    noEvent: '暂无事件',
-    untitled: '(无标题)',
-    /** Design §5.3 / SKILL.md wording: statuses are inferred observations. */
-    observedDisclaimer: '状态为从持久化数据推断的观察值,可能滞后',
-    observedValue: '观察值: {status}',
-    lastReconcile: '最近对账: {time}',
-    neverReconciled: '尚未对账',
+    noEvent: 'board.card.noEvent',
+    untitled: 'board.card.untitled',
+    observedDisclaimer: 'board.card.observedDisclaimer',
+    observedValue: 'board.card.observedValue',
+    lastReconcile: 'board.card.lastReconcile',
+    neverReconciled: 'board.card.neverReconciled',
+    copyId: 'board.card.copyId',
+    copied: 'board.card.copied',
   },
-  /** Relative time templates. */
   time: {
-    justNow: '刚刚',
-    minutesAgo: '{n} 分钟前',
-    hoursAgo: '{n} 小时前',
-    daysAgo: '{n} 天前',
+    justNow: 'board.time.justNow',
+    minutesAgo: 'board.time.minutesAgo',
+    hoursAgo: 'board.time.hoursAgo',
   },
-  /** Time-window option templates. */
   timeWindow: {
-    hours: '{n} 小时',
-    days: '{n} 天',
+    hours: 'board.timeWindow.hours',
+    days: 'board.timeWindow.days',
   },
-  /** Group header session count. */
-  groupCount: '{n} 个会话',
-  /** Sessions with an empty `project` fall into this group (task spec). */
-  unknownProject: '未知项目',
-  /** Footer widget. */
+  groupCount: 'board.groupCount',
+  unknownProject: 'board.unknownProject',
   widget: {
-    label: 'Sidecar',
+    label: 'board.widget.label',
     connection: {
-      ok: '已连接',
-      degraded: '连接不稳定',
-      off: '离线',
+      ok: 'board.widget.connection.ok',
+      degraded: 'board.widget.connection.degraded',
+      off: 'board.widget.connection.off',
     },
-    working: '{n} 个会话工作中',
+    working: 'board.widget.working',
   },
-} as const
+} as const)
 
 export type BoardStrings = typeof BOARD_STRINGS