@shendeguize/dsh-agent-sidecar 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shendeguize/dsh-agent-sidecar",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Agent Sidecar as a native DSH plugin: cross-agent monitoring, injection and bypass analysis / 跨 agent 监控、注入与旁路分析",
   "type": "module",
   "main": "lib/index.js",
@@ -86,6 +86,8 @@
     "@deepseek-ai/cordis": "4.0.1",
     "@deepseek-ai/dsh-client-runtime": "0.1.1-rc.2",
     "@deepseek-ai/dsh-client-ui-conversation": "0.1.1-rc.2",
+    "@deepseek-ai/dsh-client-ui-layout": "0.1.1-rc.2",
+    "@deepseek-ai/dsh-client-ui-primitives": "0.1.1-rc.2",
     "@deepseek-ai/dsh-client-ui-settings-plugins": "0.1.1-rc.2",
     "@deepseek-ai/dsh-client-ui-sidebar": "0.1.1-rc.2",
     "@deepseek-ai/dsh-client-ui-slots": "0.1.1-rc.2",

package/src/client/analysis/AnalysisPanel.tsx

@@ -1,21 +1,9 @@
-/**
- * AI bypass-analysis panel (T5.10b, design §4.e.3 / §5.1 view 2): fully
- * controlled presentation over an {@link AnalysisGlueState} — the owner
- * (detail view) holds the AnalysisStore and passes state + intents down.
- *
- * Honesty posture (§5.3): the engine disclaimer (fallback copy when a
- * settle never happened) renders with every result, truncation is called
- * out per exchange, terminal errors carry the vocabulary code, and the
- * capability-off state explains where to enable analysis instead of
- * hiding the entry. Strings ride the main locale table (`analysis.*`).
- *
- * @module
- */
-
+import { Button, Input } from '@deepseek-ai/dsh-client-ui-primitives'
 import { useState } from 'react'
 import type { ReactElement } from 'react'
 import { t } from '../locales/index.ts'
 import type { AnalysisExchange, AnalysisGlueState } from '../analysis-glue.ts'
+import { surfaceProps } from '../theme/parts.ts'
 import css from './analysis.module.css'
 
 export interface AnalysisPanelProps {
@@ -87,24 +75,25 @@ export function AnalysisPanel(props: AnalysisPanelProps): ReactElement {
   }
 
   return (
-    <section className={css['panel']} data-testid="agent-sidecar-analysis">
+    <section {...surfaceProps('analysis-panel', css['panel'])} data-testid="agent-sidecar-analysis">
       <div className={css['head']}>
         <span className={css['title']}>{t('analysis.title')}</span>
         <span className={css['spacer']} />
         {conversationLive && (
-          <button
+          <Button
             type="button"
-            className={css['textButton']}
+            size="sm"
+            variant="ghost"
             disabled={!enabled}
             onClick={props.onStop}
             data-testid="agent-sidecar-analysis-stop"
           >
             {t('analysis.stop')}
-          </button>
+          </Button>
         )}
-        <button type="button" className={css['closeButton']} onClick={props.onClose}>
+        <Button type="button" size="sm" variant="ghost" onClick={props.onClose}>
           {t('analysis.close')}
-        </button>
+        </Button>
       </div>
 
       {!enabled && (
@@ -136,14 +125,16 @@ export function AnalysisPanel(props: AnalysisPanelProps): ReactElement {
           {state.phase === 'idle' && (
             <div className={css['mutedLine']}>{t('analysis.idleHint')}</div>
           )}
-          <button
+          <Button
             type="button"
-            className={css['primaryButton']}
+            size="sm"
+            variant="primary"
+            className={css['startButton']}
             onClick={props.onStart}
             data-testid="agent-sidecar-analysis-start"
           >
             {state.phase === 'idle' ? t('analysis.start') : t('analysis.restart')}
-          </button>
+          </Button>
         </>
       )}
 
@@ -156,7 +147,7 @@ export function AnalysisPanel(props: AnalysisPanelProps): ReactElement {
 
       {conversationLive && (
         <div className={css['followupForm']}>
-          <input
+          <Input
             className={css['followupInput']}
             value={question}
             placeholder={t('analysis.followupPlaceholder')}
@@ -169,15 +160,16 @@ export function AnalysisPanel(props: AnalysisPanelProps): ReactElement {
             }}
             data-testid="agent-sidecar-analysis-question"
           />
-          <button
+          <Button
             type="button"
-            className={css['textButton']}
+            size="sm"
+            variant="ghost"
             disabled={!enabled || state.phase !== 'ready' || question.trim() === ''}
             onClick={submitFollowup}
             data-testid="agent-sidecar-analysis-followup"
           >
             {t('analysis.followupSubmit')}
-          </button>
+          </Button>
         </div>
       )}
 

package/src/client/analysis/analysis.module.css

@@ -1,20 +1,13 @@
-/*
- * AI bypass-analysis panel styles (design §4.e.3 / §5.1 view 2): every
- * color rides a --dsw-alias-* design token with a neutral fallback — no
- * theme colors are hardcoded as the only value. Same posture as
- * dsh-tools.module.css.
- */
-
 .panel {
   display: flex;
   flex-direction: column;
   gap: 8px;
   min-width: 0;
   padding: 10px 12px;
-  border-radius: 10px;
-  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
-  background: var(--dsw-alias-bg-layer-1, rgba(0, 0, 0, 0.02));
-  color: var(--dsw-alias-label-primary, #1f2328);
+  border: 1px solid var(--agsc-border-strong);
+  border-radius: var(--agsc-radius-control);
+  background: var(--agsc-bg);
+  color: var(--agsc-fg);
 }
 
 .head {
@@ -27,84 +20,43 @@
 .title {
   font-size: 13px;
   font-weight: 600;
-  color: var(--dsw-alias-label-primary, #1f2328);
+  color: var(--agsc-fg);
 }
 
 .spacer {
   flex: 1;
 }
 
-.closeButton,
-.textButton {
-  flex: none;
-  font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 6px;
-  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
-  background: transparent;
-  color: var(--dsw-alias-label-secondary, #57606a);
-  cursor: pointer;
-}
-
-.closeButton:hover,
-.textButton:hover {
-  background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.04));
-}
-
-.primaryButton {
+.startButton {
   align-self: flex-start;
-  font-size: 12px;
-  font-weight: 600;
-  padding: 4px 12px;
-  border-radius: 6px;
-  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
-  background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.04));
-  color: var(--dsw-alias-label-primary, #1f2328);
-  cursor: pointer;
-}
-
-.primaryButton:disabled,
-.textButton:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
 }
 
 .mutedLine {
   font-size: 12px;
   line-height: 18px;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--agsc-fg-secondary);
 }
 
-/* Capability-off / terminal-error note. */
-.noteCard {
+.noteCard,
+.errorCard,
+.noticeBar {
+  padding: 8px 10px;
+  border: 1px solid var(--agsc-border-strong);
+  border-radius: var(--agsc-radius-control);
+  background: var(--agsc-bg-raised);
   font-size: 12px;
   line-height: 18px;
-  padding: 8px 10px;
-  border-radius: 8px;
-  border: 1px dashed var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
-  background: var(--dsw-alias-bg-layer-1, rgba(0, 0, 0, 0.02));
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--agsc-fg-secondary);
 }
 
 .errorCard {
-  font-size: 12px;
-  line-height: 18px;
-  padding: 8px 10px;
-  border-radius: 8px;
-  color: var(--dsw-alias-state-error-primary, #cf222e);
-  background: var(--dsw-alias-state-error-secondary, rgba(207, 34, 46, 0.08));
-  border: 1px solid var(--dsw-alias-state-error-secondary, rgba(207, 34, 46, 0.24));
+  border-color: var(--agsc-err);
+  color: var(--agsc-err);
 }
 
-/* Non-terminal retryable notice. */
 .noticeBar {
-  font-size: 12px;
-  line-height: 18px;
-  padding: 6px 10px;
-  border-radius: 8px;
-  color: var(--dsw-alias-state-warning-primary, #9a6700);
-  background: var(--dsw-alias-state-warning-secondary, rgba(154, 103, 0, 0.1));
-  border: 1px solid var(--dsw-alias-state-warning-secondary, rgba(154, 103, 0, 0.28));
+  border-color: var(--agsc-warn);
+  color: var(--agsc-warn);
 }
 
 .exchange {
@@ -116,48 +68,47 @@
 .exchangeLabel {
   font-size: 11px;
   font-weight: 600;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--agsc-fg-secondary);
 }
 
 .question {
+  padding: 6px 10px;
+  border-radius: var(--agsc-radius-control);
+  background: var(--agsc-bg-raised);
+  color: var(--agsc-fg);
   font-size: 12px;
   line-height: 18px;
-  padding: 6px 10px;
-  border-radius: 8px;
-  background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.04));
-  color: var(--dsw-alias-label-primary, #1f2328);
   white-space: pre-wrap;
   word-break: break-word;
 }
 
 .summary {
   margin: 0;
+  max-height: 320px;
+  overflow: auto;
+  padding: 8px 10px;
+  border: 1px solid var(--agsc-border-strong);
+  border-radius: var(--agsc-radius-control);
+  background: var(--agsc-bg-raised);
+  color: var(--agsc-fg);
+  font-family: inherit;
   font-size: 12px;
   line-height: 18px;
-  padding: 8px 10px;
-  border-radius: 8px;
-  background: var(--dsw-alias-bg-layer-1, rgba(0, 0, 0, 0.02));
-  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
-  color: var(--dsw-alias-label-primary, #1f2328);
   white-space: pre-wrap;
   word-break: break-word;
-  font-family: inherit;
-  max-height: 320px;
-  overflow: auto;
 }
 
 .truncated {
+  color: var(--agsc-warn);
   font-size: 11px;
-  color: var(--dsw-alias-state-warning-primary, #9a6700);
 }
 
-/* The §5.3 honesty line — always visible with results. */
 .disclaimer {
+  padding-top: 6px;
+  border-top: 1px solid var(--agsc-border-strong);
+  color: var(--agsc-fg-secondary);
   font-size: 11px;
   line-height: 16px;
-  color: var(--dsw-alias-label-secondary, #57606a);
-  border-top: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.08));
-  padding-top: 6px;
 }
 
 .followupForm {
@@ -168,16 +119,4 @@
 .followupInput {
   flex: 1;
   min-width: 0;
-  font-size: 12px;
-  padding: 4px 8px;
-  border-radius: 6px;
-  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.16));
-  background: var(--dsw-alias-bg-layer-0, #fff);
-  color: var(--dsw-alias-label-primary, #1f2328);
-}
-
-.actionsRow {
-  display: flex;
-  align-items: center;
-  gap: 8px;
 }

package/src/client/board/Board.tsx

@@ -18,8 +18,9 @@
  * concerns — useState here, reset on tab remount.
  */
 
-import { useState } from 'react'
-import type { MouseEvent, ReactElement } from 'react'
+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,
   formatTemplate,
@@ -35,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). */
@@ -62,24 +64,47 @@ export interface BoardProps {
   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: 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()
+  // 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)
-        setTimeout(() => { setCopied(false) }, 2000)
+        copyTimerRef.current = setTimeout(() => {
+          copyTimerRef.current = null
+          setCopied(false)
+        }, 2000)
       },
       () => {
         // Clipboard permission denied: the hover title still carries the id.
@@ -88,33 +113,43 @@ function SessionCard(props: {
   }
 
   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
+      </button>
+      <Button
+        size="sm"
+        variant="ghost"
         className={styles['cardId']}
         title={`${card.sessionId}\n${BOARD_STRINGS.card.copyId}`}
         onClick={onCopyId}
@@ -122,14 +157,14 @@ function SessionCard(props: {
       >
         {card.shortId}
         {copied && <span className={styles['copied']} role="status">{BOARD_STRINGS.card.copied}</span>}
-      </div>
+      </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>
   )
 }
 
@@ -180,22 +215,24 @@ function ProjectGroup(props: {
             ))}
           </div>
           {hiddenCount > 0 && (
-            <button
-              type="button"
+            <Button
+              size="sm"
+              variant="outline"
               className={styles['showMore']}
               onClick={() => { setExpanded(true) }}
             >
               {formatTemplate(BOARD_STRINGS.group.showAll, { n: group.cards.length })}
-            </button>
+            </Button>
           )}
           {expanded && group.cards.length > GROUP_CARD_LIMIT && (
-            <button
-              type="button"
+            <Button
+              size="sm"
+              variant="outline"
               className={styles['showMore']}
               onClick={() => { setExpanded(false) }}
             >
               {formatTemplate(BOARD_STRINGS.group.showLess, { n: GROUP_CARD_LIMIT })}
-            </button>
+            </Button>
           )}
         </>
       )}
@@ -249,41 +286,57 @@ export function Board(props: BoardProps): ReactElement {
       : 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}
-        </span>
-        <button
-          type="button"
+        </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"
         >
-          <span className={styles['dot']} data-tone={vm.workingCount > 0 ? 'success' : 'neutral'} />
+          {vm.workingCount > 0
+            ? <StateDot state="ongoing" size={8} />
+            : <span className={styles['dot']} data-tone="neutral" />}
           {formatTemplate(BOARD_STRINGS.topbar.countWorking, { n: vm.workingCount })}
-        </button>
-        <button
-          type="button"
+        </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"
         >
-          <span className={styles['dot']} data-tone={vm.waitingCount > 0 ? 'warn' : 'neutral'} />
+          {vm.waitingCount > 0
+            ? <StateDot state="warning" size={8} />
+            : <span className={styles['dot']} data-tone="neutral" />}
           {formatTemplate(BOARD_STRINGS.topbar.countWaiting, { n: vm.waitingCount })}
-        </button>
+        </Pill>
         <span className={styles['countTotal']} data-testid="agent-sidecar-count-total">
           {formatTemplate(BOARD_STRINGS.topbar.countTotal, { n: vm.totalCount })}
         </span>
@@ -318,27 +371,28 @@ 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}
           disabled={refreshing}
           onClick={onRefreshClick}
         >
           {refreshing ? BOARD_STRINGS.topbar.refreshing : BOARD_STRINGS.topbar.refresh}
-        </button>
+        </Button>
       </header>
 
       {refreshFailed && (
         <div className={styles['banner']} data-tone="warn" role="status">
           {BOARD_STRINGS.topbar.refreshFailed}
-          <button
-            type="button"
+          <Button
+            size="sm"
+            variant="ghost"
             className={styles['bannerDismiss']}
             onClick={() => { setRefreshFailed(false) }}
           >
             {BOARD_STRINGS.topbar.dismiss}
-          </button>
+          </Button>
         </div>
       )}