@shendeguize/dsh-agent-sidecar 0.1.0 → 0.2.0

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 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,11 +51,14 @@ 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)
 
   useEffect(() => {
     void detailStore.open()
@@ -126,33 +88,112 @@ 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()
 
+  // 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
+      : {
+          onPrepare: injectIntegration.actions.onPrepare,
+          onExecute: async (req) => {
+            const result = await injectIntegration.actions.onExecute(req)
+            if (isDeliveredResult(result)) void detailStore.refreshNewest()
+            return result
+          },
+        }
+
+  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>
+
+      <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) }}
+        >
+          <span className={css['toolsToggleGlyph']} aria-hidden>
+            {toolsOpen ? '▾' : '▸'}
+          </span>
+          {t('detail.tools.title')}
+          <span className={css['toolsToggleGlyph']}>
+            {toolsOpen ? t('detail.tools.hide') : t('detail.tools.show')}
+          </span>
+        </Button>
+        {toolsOpen && (
+          <>
+            <LineageTree
+              trace={detail.lineage.trace}
+              available={detail.lineage.available}
+              reason={detail.lineage.reason}
+              detail={detail.lineage.detail}
+              currentSessionId={sessionId}
+              onSelectSession={props.onSelectSession}
+              loading={detail.lineage.loading}
+              error={detail.lineage.error}
+            />
+            <SearchPanel
+              query={search.query}
+              project={search.project}
+              mode={search.mode}
+              items={search.items}
+              loading={search.loading}
+              error={search.error}
+              onQueryChange={(query) => { searchStore.setQuery(query) }}
+              onSubmit={() => { void searchStore.submit() }}
+              onSelectSession={props.onSelectSession}
+            />
+          </>
+        )}
       </div>
 
       <SessionDetail
@@ -163,8 +204,10 @@ export function SidecarDetailView(props: SidecarDetailViewProps): ReactElement {
         error={detail.error}
         hasMore={detail.hasMore}
         listening={detail.listening}
+        refreshing={detail.refreshing}
         onLoadMore={() => { void detailStore.loadMore() }}
         onToggleListen={() => { detailStore.toggleListen() }}
+        onRefresh={() => { void detailStore.refreshNewest() }}
         onClose={props.onClose}
       />
 
@@ -181,52 +224,29 @@ export function SidecarDetailView(props: SidecarDetailViewProps): ReactElement {
         />
       )}
 
-      <div className={css['toolsSection']} data-testid="agent-sidecar-detail-tools">
-        <LineageTree
-          trace={detail.lineage.trace}
-          available={detail.lineage.available}
-          reason={detail.lineage.reason}
-          detail={detail.lineage.detail}
-          currentSessionId={sessionId}
-          onSelectSession={props.onSelectSession}
-          loading={detail.lineage.loading}
-          error={detail.lineage.error}
-        />
-        <SearchPanel
-          query={search.query}
-          project={search.project}
-          mode={search.mode}
-          items={search.items}
-          loading={search.loading}
-          error={search.error}
-          onQueryChange={(query) => { searchStore.setQuery(query) }}
-          onSubmit={() => { void searchStore.submit() }}
-          onSelectSession={props.onSelectSession}
-        />
-      </div>
-
-      {injectIntegration !== 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={injectIntegration.actions.onPrepare}
-              onExecute={injectIntegration.actions.onExecute}
-              onClose={closeInject}
-            />
-          </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">