@shendeguize/dsh-agent-sidecar 0.1.1 → 0.2.0

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

@@ -1,11 +1,3 @@
-/*
- * Detail-view container + board-tab view-switcher chrome (T5.10b, design
- * §5.1): every color rides a --dsw-alias-* design token with a neutral
- * fallback. Same posture as board.module.css / dsh-tools.module.css.
- */
-
-/* ------------------------------------------------ board-tab view switcher */
-
 .switcherBar {
   display: flex;
   align-items: center;
@@ -19,31 +11,26 @@
   border-radius: 999px;
   border: 1px solid transparent;
   background: transparent;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--dsw-alias-label-secondary);
   cursor: pointer;
 }
 
 .switcherButton:hover {
-  background: var(--dsw-alias-bg-layer-1, rgba(0, 0, 0, 0.02));
+  background: var(--dsw-alias-bg-layer-1);
 }
 
 .switcherButton[data-active='true'] {
   font-weight: 600;
-  color: var(--dsw-alias-label-primary, #1f2328);
-  background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.04));
-  border-color: var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-layer-2);
+  border-color: var(--dsw-alias-border-l2);
 }
 
-/* --------------------------------------------------- detail-view chrome */
-
 .detailRoot {
   display: flex;
   flex-direction: column;
   gap: 12px;
   min-width: 0;
-  /* Own the scroll like the board/project roots do (UX-12): without a
-   * bounded height the inner timeline's overflow-y can never engage, and
-   * the UX-04 landing / listen-mode tail pinning would silently no-op. */
   height: 100%;
   overflow-y: auto;
   box-sizing: border-box;
@@ -54,59 +41,47 @@
   display: flex;
   align-items: center;
   gap: 8px;
+  flex-wrap: wrap;
 }
 
-.actionButton {
-  font-size: 12px;
-  padding: 3px 12px;
-  border-radius: 6px;
-  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);
-  cursor: pointer;
+.analysisDisabledReason {
+  max-width: 360px;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agsc-fg-secondary);
 }
 
-.actionButton:hover {
-  background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.04));
-}
-
-.actionButton:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* dsh deep-query tools: collapsible segment between the actions row and
- * the timeline (UX-09 — previously buried below a possibly very long
- * list, outside the viewport on long sessions). */
 .toolsSection {
   display: flex;
   flex-direction: column;
   gap: 16px;
-  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, 0.08));
-  border-radius: 8px;
+  border: 1px solid var(--agsc-border);
+  border-radius: var(--agsc-radius-control);
   padding: 8px 12px;
 }
 
 .toolsToggle {
   align-self: flex-start;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 12px;
-  font-family: inherit;
-  color: var(--dsw-alias-label-secondary, #57606a);
-  background: transparent;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-}
-
-.toolsToggle:hover {
-  color: var(--dsw-alias-label-primary, #1f2328);
 }
 
 .toolsToggleGlyph {
   flex: none;
   font-size: 10px;
-  color: var(--dsw-alias-label-tertiary, #6e7781);
+  color: var(--agsc-fg-dimmed);
+}
+
+.injectDialog {
+  gap: 0;
+  width: min(560px, 100%);
+  max-height: min(85vh, 720px);
+  padding: 0;
+  overflow: auto;
+}
+
+.injectDialog > [data-dsh-part='inject-panel'] {
+  width: 100%;
+  max-width: none;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
 }

package/src/client/detail-view.tsx

@@ -1,27 +1,16 @@
 /**
- * Session-detail container (T5.10b, design §5.1 view 2): the full-tab
- * detail surface opened by clicking a session card on the board or in the
- * project view. Composes the M3 presentational components over their glue
- * stores:
+ * Session-detail React container. It composes the timeline, lineage,
+ * search, analysis, and optional injection surfaces over stores supplied
+ * by {@link DetailUiPort}.
  *
- * - SessionDetail (timeline) ← DetailStore (fetchSessionDetail +
- *   fetchTimelinePage pagination + SSE-triggered listen refetch);
- * - action row: 注入 (M2 InjectPanel as a modal, reused verbatim) and
- *   AI 分析 (AnalysisPanel over AnalysisStore; disabled with an honest
- *   hint while `analysis.enabled` is off);
- * - dsh 会话专属区: LineageTree ← the DetailStore lineage slice (non-dsh
- *   sessions degrade client-side, no dialing) and SearchPanel ←
- *   SearchStore (full-text or filter-only degradation; a result click
- *   navigates the detail view to that session).
- *
- * The stores live in component state (one set per opened session id — the
- * owner keys this component by session id) and are disposed on unmount.
- * SSE coupling: the controller's subscribe seam notifies the DetailStore
- * on every state frame (header refresh + listen-mode refetch trigger).
+ * Stores are scoped to one opened session and disposed on unmount. Each
+ * controller state frame refreshes the header hint and drives the
+ * detail store's bounded listen-mode refetch.
  *
  * @module
  */
 
+import { Button, Modal } from '@deepseek-ai/dsh-client-ui-primitives'
 import { useEffect, useState, useSyncExternalStore } from 'react'
 import type { ReactElement } from 'react'
 import { SessionDetail } from './detail/SessionDetail.tsx'
@@ -29,58 +18,28 @@ import { LineageTree } from './dsh-tools/LineageTree.tsx'
 import { SearchPanel } from './dsh-tools/SearchPanel.tsx'
 import { AnalysisPanel } from './analysis/AnalysisPanel.tsx'
 import { InjectPanel } from './inject/InjectPanel.tsx'
-import { DetailStore, findCardHint, type DetailHeaderHint } from './detail-glue.ts'
-import { SearchStore } from './search-glue.ts'
-import { AnalysisStore } from './analysis-glue.ts'
-import { ProjectsStore } from './project-glue.ts'
+import { findCardHint, type DetailHeaderHint } from './detail-glue.ts'
 import type { SidecarController } from './controller.ts'
-import { isDeliveredResult, type InjectMode } from './inject/logic.ts'
+import { isDeliveredResult } from './inject/logic.ts'
 import type { InjectActions } from './inject-glue.ts'
+import type {
+  AnalysisStorePort,
+  DetailStorePort,
+  DetailUiPort,
+  SearchStorePort,
+} from './ui-integration.ts'
 import { t } from './locales/index.ts'
+import { surfaceProps } from './theme/parts.ts'
 import css from './detail-view.module.css'
-import overlay from './inject/overlay.module.css'
-
-/**
- * Everything the integrated M3 surfaces need from the entry (index.ts
- * builds one; mount.tsx and this container share it). Store factories are
- * seams so tests/materialization can substitute injected transports.
- */
-export interface SidecarUiIntegration {
-  /** M2 injection wiring; absent = injection not assembled (entry hidden). */
-  inject?: {
-    actions: InjectActions
-    getDefaultMode: () => InjectMode
-  }
-  /** Live `analysis.enabled` reader (settings scope box; default false). */
-  getAnalysisEnabled: () => boolean
-  createDetailStore: (sessionId: string, hint: DetailHeaderHint | null) => DetailStore
-  createSearchStore: () => SearchStore
-  createAnalysisStore: () => AnalysisStore
-  createProjectsStore: () => ProjectsStore
-}
 
-/** Default integration over the real transports (analysis off until read). */
-export function createDefaultIntegration(
-  base: Omit<
-    SidecarUiIntegration,
-    'createDetailStore' | 'createSearchStore' | 'createAnalysisStore' | 'createProjectsStore'
-  >,
-): SidecarUiIntegration {
-  return {
-    ...base,
-    createDetailStore: (sessionId, hint) => new DetailStore(sessionId, { hint }),
-    createSearchStore: () => new SearchStore(),
-    createAnalysisStore: () => new AnalysisStore(),
-    createProjectsStore: () => new ProjectsStore(),
-  }
-}
+const ANALYSIS_DISABLED_REASON_ID = 'agent-sidecar-analysis-disabled-reason'
 
 export interface SidecarDetailViewProps {
   sessionId: string
   /** Header seed from the opening surface (board card / project row). */
   hint: DetailHeaderHint | null
   controller: SidecarController
-  integration: SidecarUiIntegration
+  integration: DetailUiPort
   onClose: () => void
   /** Provenance/search jump: navigate the detail view to another session. */
   onSelectSession: (sessionId: string) => void
@@ -92,9 +51,11 @@ export interface SidecarDetailViewProps {
  */
 export function SidecarDetailView(props: SidecarDetailViewProps): ReactElement {
   const { controller, integration, sessionId } = props
-  const [detailStore] = useState(() => integration.createDetailStore(sessionId, props.hint))
-  const [searchStore] = useState(() => integration.createSearchStore())
-  const [analysisStore] = useState(() => integration.createAnalysisStore())
+  const [detailStore] = useState<DetailStorePort>(
+    () => integration.createDetailStore(sessionId, props.hint),
+  )
+  const [searchStore] = useState<SearchStorePort>(() => integration.createSearchStore())
+  const [analysisStore] = useState<AnalysisStorePort>(() => integration.createAnalysisStore())
   const [injectOpen, setInjectOpen] = useState(false)
   const [analysisOpen, setAnalysisOpen] = useState(false)
   const [toolsOpen, setToolsOpen] = useState(false)
@@ -127,15 +88,14 @@ export function SidecarDetailView(props: SidecarDetailViewProps): ReactElement {
   )
 
   const analysisEnabled = integration.getAnalysisEnabled()
+  const analysisDisabledHint =
+    analysisEnabled ? undefined : t('detail.actions.analyzeDisabledHint')
   const injectIntegration = props.integration.inject
   const closeInject = (): void => { setInjectOpen(false) }
   const title = detail.header.title.trim()
 
-  // UX-05 observation loop, part 1: a delivered execute refetches the
-  // newest timeline window at once, so closing the panel never lands on a
-  // stale pre-injection timeline. Wraps (not replaces) the integration
-  // callback — the two-phase flow and the owner's onDelivered hook (board
-  // snapshot refresh) stay untouched.
+  // A delivered execute refreshes the newest timeline while preserving
+  // the integration-owned two-phase flow and delivery callback.
   const injectActions: InjectActions | undefined =
     injectIntegration === undefined
       ? undefined
@@ -148,43 +108,55 @@ export function SidecarDetailView(props: SidecarDetailViewProps): ReactElement {
           },
         }
 
-  // UX-05 part 2: the delivered result page offers「开启监听观察反应」—
-  // flip listen mode on (if off) and hand the view back to the timeline.
   const observeReaction = (): void => {
     if (!detailStore.getState().listening) detailStore.toggleListen()
     closeInject()
   }
 
   return (
-    <div className={css['detailRoot']} data-testid="agent-sidecar-detail-view">
+    <div
+      {...surfaceProps('detail', css['detailRoot'])}
+      data-testid="agent-sidecar-detail-view"
+    >
       <div className={css['actionsRow']}>
         {injectIntegration !== undefined && (
-          <button
-            type="button"
-            className={css['actionButton']}
+          <Button
+            size="sm"
+            variant="outline"
             onClick={() => { setInjectOpen(true) }}
             data-testid="agent-sidecar-detail-inject"
           >
             {t('detail.actions.inject')}
-          </button>
+          </Button>
         )}
-        <button
-          type="button"
-          className={css['actionButton']}
+        <Button
+          size="sm"
+          variant="outline"
           disabled={!analysisEnabled}
-          title={analysisEnabled ? undefined : t('detail.actions.analyzeDisabledHint')}
+          title={analysisDisabledHint}
+          aria-describedby={analysisEnabled ? undefined : ANALYSIS_DISABLED_REASON_ID}
           onClick={() => { setAnalysisOpen(true) }}
           data-testid="agent-sidecar-detail-analyze"
         >
           {t('detail.actions.analyze')}
-        </button>
+        </Button>
+        {!analysisEnabled && (
+          <span
+            id={ANALYSIS_DISABLED_REASON_ID}
+            className={css['analysisDisabledReason']}
+          >
+            {analysisDisabledHint}
+          </span>
+        )}
       </div>
 
-      {/* Collapsible dsh deep-query tools ABOVE the timeline (UX-09):
-          discoverable without scrolling past a long event list. */}
-      <div className={css['toolsSection']} data-testid="agent-sidecar-detail-tools">
-        <button
-          type="button"
+      <div
+        {...surfaceProps('dsh-tools', css['toolsSection'])}
+        data-testid="agent-sidecar-detail-tools"
+      >
+        <Button
+          size="sm"
+          variant="ghost"
           className={css['toolsToggle']}
           aria-expanded={toolsOpen}
           onClick={() => { setToolsOpen((open) => !open) }}
@@ -196,7 +168,7 @@ export function SidecarDetailView(props: SidecarDetailViewProps): ReactElement {
           <span className={css['toolsToggleGlyph']}>
             {toolsOpen ? t('detail.tools.hide') : t('detail.tools.show')}
           </span>
-        </button>
+        </Button>
         {toolsOpen && (
           <>
             <LineageTree
@@ -252,29 +224,29 @@ export function SidecarDetailView(props: SidecarDetailViewProps): ReactElement {
         />
       )}
 
-      {injectIntegration !== undefined && injectActions !== undefined && injectOpen && (
-        <div className={overlay['backdrop']} role="presentation" onClick={closeInject}>
-          <div
-            className={overlay['dialog']}
-            role="dialog"
-            aria-modal="true"
-            onClick={(event) => { event.stopPropagation() }}
-          >
-            <InjectPanel
-              capability={{ inject: view.injectCapability }}
-              target={{
-                agent: detail.header.agent,
-                sessionId,
-                ...(title !== '' ? { title } : {}),
-              }}
-              defaultMode={injectIntegration.getDefaultMode()}
-              onPrepare={injectActions.onPrepare}
-              onExecute={injectActions.onExecute}
-              onClose={closeInject}
-              onObserve={observeReaction}
-            />
-          </div>
-        </div>
+      {injectIntegration !== undefined && injectActions !== undefined && (
+        <Modal
+          open={injectOpen}
+          onClose={closeInject}
+          title={t('inject.title')}
+          closeLabel={t('inject.close')}
+          className={css['injectDialog']}
+          headless
+        >
+          <InjectPanel
+            capability={{ inject: view.injectCapability }}
+            target={{
+              agent: detail.header.agent,
+              sessionId,
+              ...(title !== '' ? { title } : {}),
+            }}
+            defaultMode={injectIntegration.getDefaultMode()}
+            onPrepare={injectActions.onPrepare}
+            onExecute={injectActions.onExecute}
+            onClose={closeInject}
+            onObserve={observeReaction}
+          />
+        </Modal>
       )}
     </div>
   )

package/src/client/dsh-tools/LineageTree.tsx

@@ -13,8 +13,11 @@
  * ./logic.ts and is unit-tested there.
  */
 
+import { Button, Pill } from '@deepseek-ai/dsh-client-ui-primitives'
 import { useState } from 'react'
 import type { ReactElement } from 'react'
+import { StaticPill } from '../primitives/StaticPill.tsx'
+import { surfaceProps } from '../theme/parts.ts'
 import css from './dsh-tools.module.css'
 import {
   deriveLineageView,
@@ -64,20 +67,24 @@ function TreeRow(props: {
       data-role={node.role}
     >
       {node.hasChildren ? (
-        <button
+        <Button
           type="button"
+          size="sm"
+          variant="ghost"
           className={css['toggle']}
           aria-expanded={!collapsed}
           aria-label={collapsed ? S.expand : S.collapse}
           onClick={() => props.onToggle(node.id)}
         >
           {collapsed ? '▸' : '▾'}
-        </button>
+        </Button>
       ) : (
         <span className={css['toggleSpacer']} aria-hidden />
       )}
-      <button
+      <Button
         type="button"
+        size="sm"
+        variant="ghost"
         className={css['node']}
         data-current={node.isCurrent ? 'true' : 'false'}
         aria-current={node.isCurrent ? 'true' : undefined}
@@ -91,17 +98,17 @@ function TreeRow(props: {
           {node.shortId}
         </span>
         {node.isCurrent && (
-          <span className={css['nodeBadge']} data-kind="current">
+          <StaticPill className={css['nodeBadge']} data-kind="current">
             {S.currentBadge}
-          </span>
+          </StaticPill>
         )}
         {node.live && (
-          <span className={css['nodeBadge']} data-kind="live">
+          <StaticPill className={css['nodeBadge']} data-kind="live">
             {S.liveBadge}
-          </span>
+          </StaticPill>
         )}
-        {!node.persisted && <span className={css['nodeBadge']}>{S.notPersistedBadge}</span>}
-      </button>
+        {!node.persisted && <Pill className={css['nodeBadge']}>{S.notPersistedBadge}</Pill>}
+      </Button>
     </div>
   )
 }
@@ -163,17 +170,19 @@ export function LineageTree(props: LineageTreeProps): ReactElement {
   })
 
   return (
-    <section className={css['panel']} data-testid="agent-sidecar-lineage">
+    <section {...surfaceProps('dsh-tools', css['panel'])} data-testid="agent-sidecar-lineage">
       <div className={css['panelHead']}>
         <span className={css['panelTitle']}>{S.title}</span>
         {view.kind === 'tree' && (
-          <span className={css['panelCount']}>
+          <Pill className={css['panelCount']}>
             {formatTemplate(S.nodeCount, { n: view.tree.nodeCount })}
-          </span>
+          </Pill>
         )}
       </div>
 
-      {view.kind === 'loading' && <div className={css['mutedLine']}>{view.text}</div>}
+      {view.kind === 'loading' && (
+        <div className={css['mutedLine']} role="status">{view.text}</div>
+      )}
 
       {view.kind === 'error' && (
         <div className={css['errorCard']} role="alert">

package/src/client/dsh-tools/SearchPanel.tsx

@@ -14,7 +14,10 @@
  * injection); full-text hits carry them, filter hits render without.
  */
 
+import { Button, Input } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ReactElement } from 'react'
+import { StaticPill } from '../primitives/StaticPill.tsx'
+import { surfaceProps } from '../theme/parts.ts'
 import css from './dsh-tools.module.css'
 import {
   deriveSearchView,
@@ -50,8 +53,10 @@ function ResultItem(props: {
 }): ReactElement {
   const { item } = props
   return (
-    <button
+    <Button
       type="button"
+      size="sm"
+      variant="ghost"
       className={css['resultItem']}
       onClick={() => props.onSelectSession(item.sessionId)}
       data-testid="agent-sidecar-search-item"
@@ -61,9 +66,9 @@ function ResultItem(props: {
         <span className={css['resultTitle']} title={item.title}>
           {item.titleLabel}
         </span>
-        <span className={css['matchTag']} data-kind={item.matchedBy}>
+        <StaticPill className={css['matchTag']} data-kind={item.matchedBy}>
           {item.matchedByLabel}
-        </span>
+        </StaticPill>
       </span>
       <span className={css['resultMeta']}>
         <span className={css['resultProject']} title={item.project}>
@@ -86,7 +91,7 @@ function ResultItem(props: {
           )}
         </span>
       )}
-    </button>
+    </Button>
   )
 }
 
@@ -102,7 +107,7 @@ export function SearchPanel(props: SearchPanelProps): ReactElement {
   const project = props.project ?? null
 
   return (
-    <section className={css['panel']} data-testid="agent-sidecar-search">
+    <section {...surfaceProps('dsh-tools', css['panel'])} data-testid="agent-sidecar-search">
       <div className={css['panelHead']}>
         <span className={css['panelTitle']}>{S.title}</span>
       </div>
@@ -114,22 +119,22 @@ export function SearchPanel(props: SearchPanelProps): ReactElement {
           props.onSubmit()
         }}
       >
-        <input
+        <Input
           type="search"
           className={css['searchInput']}
           value={props.query}
           placeholder={S.placeholder}
           onChange={(ev) => props.onQueryChange(ev.target.value)}
         />
-        <button type="submit" className={css['searchSubmit']}>
+        <Button type="submit" size="sm" variant="outline">
           {S.submit}
-        </button>
+        </Button>
       </form>
 
       {project !== null && project !== '' && (
-        <span className={css['projectChip']} title={project}>
+        <StaticPill className={css['projectChip']} title={project}>
           {formatTemplate(S.projectFilter, { project })}
-        </span>
+        </StaticPill>
       )}
 
       {view.notice !== null && (
@@ -142,7 +147,9 @@ export function SearchPanel(props: SearchPanelProps): ReactElement {
         </div>
       )}
 
-      {view.body === 'loading' && <div className={css['mutedLine']}>{view.text}</div>}
+      {view.body === 'loading' && (
+        <div className={css['mutedLine']} role="status">{view.text}</div>
+      )}
 
       {view.body === 'error' && (
         <div className={css['errorCard']} role="alert">