@shendeguize/dsh-agent-sidecar 0.1.0

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

@@ -0,0 +1,189 @@
+/**
+ * Cross-agent project correlation view (design §4.e.2 / §5.1 M3, T5.5).
+ *
+ * Presentation-only and fully controlled: no data fetching, no api/sse
+ * imports. The owner fetches `GET <prefix>/projects`, hands the wire
+ * groups in as props (the wire shape IS the input view model — camelCase,
+ * epoch-ms `lastActivityAt`), and receives session clicks back through
+ * `onSelectSession` (pass-through to the detail view, same as Board).
+ *
+ * Render precedence when there is nothing to show: error > loading >
+ * empty state. When groups ARE available, an error renders as a banner
+ * above the (possibly stale) content instead of replacing it, and
+ * `loading` shows as a quiet header chip — honest degradation without
+ * blanking data the user already has.
+ */
+
+import type { ReactElement } from 'react'
+import {
+  buildProjectViewModel,
+  PROJECT_VIEW_STRINGS,
+  type AgentLaneVM,
+  type DerivedProjectGroupVM,
+  type DerivedProjectSessionVM,
+  type ProjectGroupVM,
+} from './project-view-logic.ts'
+import styles from './project-view.module.css'
+
+export interface ProjectViewProps {
+  /** Wire groups of `GET projects` (owner passes the response through). */
+  groups: ProjectGroupVM[]
+  loading: boolean
+  /** Human-readable fetch error, or null. */
+  error: string | null
+  onSelectSession: (sessionId: string) => void
+  /** Clock injection for deterministic rendering; defaults to Date.now(). */
+  nowMs?: number
+}
+
+function SessionRow(props: {
+  session: DerivedProjectSessionVM
+  onSelect: (sessionId: string) => void
+}): ReactElement {
+  const { session, onSelect } = props
+  return (
+    <button
+      type="button"
+      className={styles['session']}
+      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} />
+        {session.badge.label}
+        {session.badge.attention !== null && (
+          <span className={styles['attention']} data-kind={session.badge.attention}>
+            {session.badge.attentionLabel}
+          </span>
+        )}
+      </span>
+      <span className={styles['sessionTitle']} title={session.title}>
+        {session.displayTitle}
+      </span>
+      {session.live && <span className={styles['liveChip']}>{PROJECT_VIEW_STRINGS.liveChip}</span>}
+      <span className={styles['sessionId']} title={session.sessionId}>
+        {session.shortId}
+      </span>
+      <span className={styles['sessionTime']}>{session.relativeTime}</span>
+    </button>
+  )
+}
+
+function AgentLane(props: {
+  lane: AgentLaneVM
+  onSelect: (sessionId: string) => void
+}): ReactElement {
+  const { lane, onSelect } = props
+  return (
+    <div className={styles['lane']}>
+      <div className={styles['laneHead']}>
+        <span className={styles['glyph']} aria-hidden>
+          {lane.glyph}
+        </span>
+        {lane.agent}
+      </div>
+      <div className={styles['laneSessions']}>
+        {lane.sessions.map((session) => (
+          <SessionRow
+            key={`${session.agent}:${session.sessionId}`}
+            session={session}
+            onSelect={onSelect}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+function ProjectSection(props: {
+  group: DerivedProjectGroupVM
+  onSelect: (sessionId: string) => void
+}): ReactElement {
+  const { group, onSelect } = props
+  return (
+    <section className={styles['group']} data-testid="agent-sidecar-project-group">
+      <div className={styles['groupHead']}>
+        <span
+          className={styles['groupName']}
+          title={group.fullPath === '' ? undefined : group.fullPath}
+        >
+          {group.label}
+        </span>
+        <span className={styles['agentBadges']}>
+          {group.agentBadges.map((badge) => (
+            <span key={badge.agent} className={styles['agentBadge']} title={badge.agent}>
+              <span className={styles['glyph']} aria-hidden>
+                {badge.glyph}
+              </span>
+              {badge.agent}
+            </span>
+          ))}
+          {group.crossAgentLabel !== null && (
+            <span className={styles['crossBadge']}>{group.crossAgentLabel}</span>
+          )}
+        </span>
+        <span className={styles['spacer']} />
+        <span className={styles['groupMeta']}>{group.sessionCountLabel}</span>
+        <span className={styles['groupMeta']}>{group.lastActiveLabel}</span>
+      </div>
+      <div className={styles['lanes']}>
+        {group.lanes.map((lane) => (
+          <AgentLane key={lane.agent} lane={lane} onSelect={onSelect} />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+/** The project correlation view. Pure render of `buildProjectViewModel`. */
+export function ProjectView(props: ProjectViewProps): ReactElement {
+  const nowMs = props.nowMs ?? Date.now()
+  const vm = buildProjectViewModel({ groups: props.groups, nowMs })
+  const hasContent = vm.groups.length > 0
+
+  return (
+    <div className={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>
+        )}
+      </header>
+
+      {props.error !== null && hasContent && (
+        <div className={styles['banner']} data-tone="danger" role="alert">
+          {PROJECT_VIEW_STRINGS.errorTitle}: {props.error}
+        </div>
+      )}
+
+      {hasContent ? (
+        vm.groups.map((group) => (
+          <ProjectSection
+            key={group.key === '' ? '\u0000unknown' : group.key}
+            group={group}
+            onSelect={props.onSelectSession}
+          />
+        ))
+      ) : props.error !== null ? (
+        <div className={styles['empty']} data-kind="error" role="alert">
+          <div className={styles['emptyTitle']}>{PROJECT_VIEW_STRINGS.errorTitle}</div>
+          <div className={styles['emptyHint']}>{props.error}</div>
+        </div>
+      ) : props.loading ? (
+        <div className={styles['empty']} data-kind="loading" role="status">
+          <div className={styles['emptyHint']}>{PROJECT_VIEW_STRINGS.loading}</div>
+        </div>
+      ) : (
+        vm.emptyState !== null && (
+          <div className={styles['empty']} data-kind="no-projects">
+            <div className={styles['emptyTitle']}>{vm.emptyState.title}</div>
+            <div className={styles['emptyHint']}>{vm.emptyState.hint}</div>
+          </div>
+        )
+      )}
+    </div>
+  )
+}

package/src/client/board/strings.ts

@@ -0,0 +1,112 @@
+/**
+ * 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
+ */
+
+export const BOARD_STRINGS = {
+  /** Session status badge labels (observed values, see hover disclaimer). */
+  status: {
+    working: '工作中',
+    waiting: '等待中',
+    idle: '空闲',
+    dead: '已结束',
+    unknown: '未知',
+  },
+  /** Badge attention markers; gap outranks stale (per-session > global). */
+  attention: {
+    gap: '事件缺口',
+    stale: '可能滞后',
+  },
+  /** Daemon supervisor state labels for the top-bar badge. */
+  daemon: {
+    probe: '探测中',
+    adopted: '已连接 · 领养',
+    defer: '等待系统服务',
+    reprobe: '重新探测中',
+    hosting: '正在启动',
+    hosted: '已连接 · 托管',
+    backoff: '重启退避中',
+    failed: '离线',
+  },
+  /** Stream health indicator labels. */
+  stream: {
+    ok: '实时流正常',
+    degraded: '实时流重连中',
+    unknown: '实时流未建立',
+  },
+  /** Top banner texts (design §5.3: degraded warning / FAILED red banner). */
+  banner: {
+    daemonFailed: 'sidecar 离线:看板显示最后一次快照,数据不再更新',
+    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 …)开始工作后会自动出现在这里。',
+  },
+  /** Top bar controls. */
+  topbar: {
+    title: 'Sidecar 多 agent 看板',
+    refresh: '刷新',
+    refreshTitle: '手动拉取最新快照',
+    showDead: '显示已结束',
+    timeWindow: '时间窗',
+  },
+  /** Session card texts. */
+  card: {
+    noEvent: '暂无事件',
+    untitled: '(无标题)',
+    /** Design §5.3 / SKILL.md wording: statuses are inferred observations. */
+    observedDisclaimer: '状态为从持久化数据推断的观察值,可能滞后',
+    observedValue: '观察值: {status}',
+    lastReconcile: '最近对账: {time}',
+    neverReconciled: '尚未对账',
+  },
+  /** Relative time templates. */
+  time: {
+    justNow: '刚刚',
+    minutesAgo: '{n} 分钟前',
+    hoursAgo: '{n} 小时前',
+    daysAgo: '{n} 天前',
+  },
+  /** Time-window option templates. */
+  timeWindow: {
+    hours: '{n} 小时',
+    days: '{n} 天',
+  },
+  /** Group header session count. */
+  groupCount: '{n} 个会话',
+  /** Sessions with an empty `project` fall into this group (task spec). */
+  unknownProject: '未知项目',
+  /** Footer widget. */
+  widget: {
+    label: 'Sidecar',
+    connection: {
+      ok: '已连接',
+      degraded: '连接不稳定',
+      off: '离线',
+    },
+    working: '{n} 个会话工作中',
+  },
+} as const
+
+export type BoardStrings = typeof BOARD_STRINGS