@shendeguize/dsh-agent-sidecar 0.1.0

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

@@ -0,0 +1,79 @@
+/*
+ * 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;
+  gap: 4px;
+  padding: 8px 12px 0;
+}
+
+.switcherButton {
+  font-size: 12px;
+  padding: 3px 10px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, #57606a);
+  cursor: pointer;
+}
+
+.switcherButton:hover {
+  background: var(--dsw-alias-bg-layer-1, rgba(0, 0, 0, 0.02));
+}
+
+.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));
+}
+
+/* --------------------------------------------------- detail-view chrome */
+
+.detailRoot {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  padding: 12px;
+}
+
+.actionsRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.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;
+}
+
+.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 section under the timeline. */
+.toolsSection {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  border-top: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.08));
+  padding-top: 12px;
+}

package/src/client/detail-view.tsx

@@ -0,0 +1,233 @@
+/**
+ * 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:
+ *
+ * - 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).
+ *
+ * @module
+ */
+
+import { useEffect, useState, useSyncExternalStore } from 'react'
+import type { ReactElement } from 'react'
+import { SessionDetail } from './detail/SessionDetail.tsx'
+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 type { SidecarController } from './controller.ts'
+import type { InjectMode } from './inject/logic.ts'
+import type { InjectActions } from './inject-glue.ts'
+import { t } from './locales/index.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(),
+  }
+}
+
+export interface SidecarDetailViewProps {
+  sessionId: string
+  /** Header seed from the opening surface (board card / project row). */
+  hint: DetailHeaderHint | null
+  controller: SidecarController
+  integration: SidecarUiIntegration
+  onClose: () => void
+  /** Provenance/search jump: navigate the detail view to another session. */
+  onSelectSession: (sessionId: string) => void
+}
+
+/**
+ * The detail view. Owner remounts it per session id (`key={sessionId}`),
+ * so every store below is scoped to exactly one session.
+ */
+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 [injectOpen, setInjectOpen] = useState(false)
+  const [analysisOpen, setAnalysisOpen] = useState(false)
+
+  useEffect(() => {
+    void detailStore.open()
+    // One notification per SSE state frame / poll settle: header refresh
+    // from the live board card + listen-mode newest-window refetch.
+    const unsubscribe = controller.subscribe(() => {
+      detailStore.notifySnapshot(findCardHint(controller.getState().sessions, sessionId))
+    })
+    return () => {
+      unsubscribe()
+      detailStore.dispose()
+      searchStore.dispose()
+      analysisStore.dispose()
+    }
+  }, [controller, detailStore, searchStore, analysisStore, sessionId])
+
+  const detail = useSyncExternalStore(
+    detailStore.subscribe, detailStore.getState, detailStore.getState)
+  const search = useSyncExternalStore(
+    searchStore.subscribe, searchStore.getState, searchStore.getState)
+  const analysis = useSyncExternalStore(
+    analysisStore.subscribe, analysisStore.getState, analysisStore.getState)
+  const view = useSyncExternalStore(
+    (cb) => controller.subscribe(cb),
+    () => controller.getState(),
+    () => controller.getState(),
+  )
+
+  const analysisEnabled = integration.getAnalysisEnabled()
+  const injectIntegration = props.integration.inject
+  const closeInject = (): void => { setInjectOpen(false) }
+  const title = detail.header.title.trim()
+
+  return (
+    <div className={css['detailRoot']} data-testid="agent-sidecar-detail-view">
+      <div className={css['actionsRow']}>
+        {injectIntegration !== undefined && (
+          <button
+            type="button"
+            className={css['actionButton']}
+            onClick={() => { setInjectOpen(true) }}
+            data-testid="agent-sidecar-detail-inject"
+          >
+            {t('detail.actions.inject')}
+          </button>
+        )}
+        <button
+          type="button"
+          className={css['actionButton']}
+          disabled={!analysisEnabled}
+          title={analysisEnabled ? undefined : t('detail.actions.analyzeDisabledHint')}
+          onClick={() => { setAnalysisOpen(true) }}
+          data-testid="agent-sidecar-detail-analyze"
+        >
+          {t('detail.actions.analyze')}
+        </button>
+      </div>
+
+      <SessionDetail
+        sessionId={sessionId}
+        header={detail.header}
+        timeline={detail.timeline}
+        loading={detail.loading}
+        error={detail.error}
+        hasMore={detail.hasMore}
+        listening={detail.listening}
+        onLoadMore={() => { void detailStore.loadMore() }}
+        onToggleListen={() => { detailStore.toggleListen() }}
+        onClose={props.onClose}
+      />
+
+      {analysisOpen && (
+        <AnalysisPanel
+          enabled={analysisEnabled}
+          state={analysis}
+          onStart={() => {
+            void analysisStore.start({ targetKind: 'session', targetId: sessionId })
+          }}
+          onFollowup={(question) => { void analysisStore.followup(question) }}
+          onStop={() => { void analysisStore.stop() }}
+          onClose={() => { setAnalysisOpen(false) }}
+        />
+      )}
+
+      <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>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,210 @@
+/**
+ * dsh lineage tree (design §5.1 view 2 dsh 会话专属区: 谱系树 + 溯源跳转).
+ *
+ * Fully controlled and presentational — the component does NO data
+ * fetching; the integration layer calls `GET <prefix>/lineage/<id>` (or
+ * short-circuits with `externalLineageFallback` for non-dsh sessions) and
+ * feeds the always-200 body straight into the props. `available:false` is
+ * rendered as an honest degradation card per reason (§5.3), never as an
+ * error and never faked into an empty tree.
+ *
+ * The only component-owned state is the collapse set of the tree rows; it
+ * resets whenever the traced target changes. Every derivation lives in
+ * ./logic.ts and is unit-tested there.
+ */
+
+import { useState } from 'react'
+import type { ReactElement } from 'react'
+import css from './dsh-tools.module.css'
+import {
+  deriveLineageView,
+  formatTemplate,
+  resolveJumpTarget,
+  visibleLineageNodes,
+  type LineageNodeVM,
+  type LineageTraceVM,
+  type LineageTreeVM,
+} from './logic.ts'
+import { DSH_TOOLS_STRINGS } from './strings.ts'
+
+export interface LineageTreeProps {
+  /** Wire trace of `GET lineage/<id>` (null while degraded/empty). */
+  trace: LineageTraceVM | null
+  /** Wire `available` bit; false renders a degradation card, not an error. */
+  available: boolean
+  /** Wire degradation reason, or the client-side `not_dsh_session`. */
+  reason?: string | null
+  /** Wire degradation detail (trace_failed carries the engine error). */
+  detail?: string | null
+  /** The session the user is inspecting — highlighted, click is a no-op. */
+  currentSessionId: string | null
+  /** Provenance jump: click on any other node navigates to that session. */
+  onSelectSession: (sessionId: string) => void
+  loading: boolean
+  /** Transport/HTTP failure text from the integration, or null. */
+  error: string | null
+}
+
+const S = DSH_TOOLS_STRINGS.lineage
+
+function TreeRow(props: {
+  node: LineageNodeVM
+  collapsed: boolean
+  currentSessionId: string | null
+  onToggle: (id: string) => void
+  onSelectSession: (sessionId: string) => void
+}): ReactElement {
+  const { node, collapsed } = props
+  const jump = resolveJumpTarget(node.id, props.currentSessionId)
+  return (
+    <div
+      className={css['treeRow']}
+      style={{ paddingLeft: node.depth * 16 }}
+      data-testid="agent-sidecar-lineage-row"
+      data-role={node.role}
+    >
+      {node.hasChildren ? (
+        <button
+          type="button"
+          className={css['toggle']}
+          aria-expanded={!collapsed}
+          aria-label={collapsed ? S.expand : S.collapse}
+          onClick={() => props.onToggle(node.id)}
+        >
+          {collapsed ? '▸' : '▾'}
+        </button>
+      ) : (
+        <span className={css['toggleSpacer']} aria-hidden />
+      )}
+      <button
+        type="button"
+        className={css['node']}
+        data-current={node.isCurrent ? 'true' : 'false'}
+        aria-current={node.isCurrent ? 'true' : undefined}
+        title={jump.kind === 'current' ? S.currentTitle : S.jumpTitle}
+        onClick={() => {
+          if (jump.kind === 'select') props.onSelectSession(jump.sessionId)
+        }}
+      >
+        <span className={css['nodeRole']}>{node.roleLabel}</span>
+        <span className={css['nodeId']} title={node.id}>
+          {node.shortId}
+        </span>
+        {node.isCurrent && (
+          <span className={css['nodeBadge']} data-kind="current">
+            {S.currentBadge}
+          </span>
+        )}
+        {node.live && (
+          <span className={css['nodeBadge']} data-kind="live">
+            {S.liveBadge}
+          </span>
+        )}
+        {!node.persisted && <span className={css['nodeBadge']}>{S.notPersistedBadge}</span>}
+      </button>
+    </div>
+  )
+}
+
+function Tree(props: {
+  tree: LineageTreeVM
+  currentSessionId: string | null
+  onSelectSession: (sessionId: string) => void
+}): ReactElement {
+  const { tree } = props
+  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(new Set())
+  // Collapse state belongs to one trace; a new target starts expanded.
+  const [seenTarget, setSeenTarget] = useState(tree.targetId)
+  if (seenTarget !== tree.targetId) {
+    setSeenTarget(tree.targetId)
+    setCollapsed(new Set())
+  }
+  const toggle = (id: string): void => {
+    setCollapsed((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+  return (
+    <>
+      {tree.incompleteNotice !== null && (
+        <div className={css['noticeBar']} role="status">
+          {tree.incompleteNotice}
+        </div>
+      )}
+      <div className={css['tree']} role="tree" data-testid="agent-sidecar-lineage-tree">
+        {visibleLineageNodes(tree.nodes, collapsed).map((node) => (
+          <TreeRow
+            key={node.id}
+            node={node}
+            collapsed={collapsed.has(node.id)}
+            currentSessionId={props.currentSessionId}
+            onToggle={toggle}
+            onSelectSession={props.onSelectSession}
+          />
+        ))}
+      </div>
+    </>
+  )
+}
+
+/** The lineage panel. Pure render of `deriveLineageView` over the props. */
+export function LineageTree(props: LineageTreeProps): ReactElement {
+  const view = deriveLineageView({
+    loading: props.loading,
+    error: props.error,
+    available: props.available,
+    reason: props.reason ?? null,
+    detail: props.detail ?? null,
+    trace: props.trace,
+    currentSessionId: props.currentSessionId,
+  })
+
+  return (
+    <section className={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']}>
+            {formatTemplate(S.nodeCount, { n: view.tree.nodeCount })}
+          </span>
+        )}
+      </div>
+
+      {view.kind === 'loading' && <div className={css['mutedLine']}>{view.text}</div>}
+
+      {view.kind === 'error' && (
+        <div className={css['errorCard']} role="alert">
+          {view.text}
+          {view.detail !== null && <span className={css['errorDetail']}>{view.detail}</span>}
+        </div>
+      )}
+
+      {view.kind === 'degraded' && (
+        <div
+          className={css['degradeCard']}
+          data-reason={view.card.reason}
+          data-testid="agent-sidecar-lineage-degraded"
+        >
+          <span className={css['degradeTitle']}>{view.card.title}</span>
+          <span className={css['degradeBody']}>{view.card.body}</span>
+          {view.card.detail !== null && (
+            <span className={css['degradeDetail']}>{view.card.detail}</span>
+          )}
+        </div>
+      )}
+
+      {view.kind === 'empty' && <div className={css['mutedLine']}>{view.text}</div>}
+
+      {view.kind === 'tree' && (
+        <Tree
+          tree={view.tree}
+          currentSessionId={props.currentSessionId}
+          onSelectSession={props.onSelectSession}
+        />
+      )}
+    </section>
+  )
+}

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

@@ -0,0 +1,169 @@
+/**
+ * Cross-agent session search panel (design §4.e.4 / §5.1: dsh 全文检索,
+ * 外部会话标题/项目过滤降级).
+ *
+ * Fully controlled and presentational — the component does NO data
+ * fetching; the integration layer owns the query state, calls
+ * `GET <prefix>/search?q=&project=&limit=`, maps the response through
+ * `normalizeSearchItems` (./logic.ts) and feeds the rows plus the wire
+ * `mode` back in. `mode: 'filter-only'` renders the honest degradation
+ * bar (§5.3) — the panel keeps working as a title/project filter and
+ * never pretends full-text ran.
+ *
+ * Snippets arrive pre-split into highlight segments (React-safe, no HTML
+ * injection); full-text hits carry them, filter hits render without.
+ */
+
+import type { ReactElement } from 'react'
+import css from './dsh-tools.module.css'
+import {
+  deriveSearchView,
+  formatTemplate,
+  type SearchItemVM,
+  type SearchMode,
+} from './logic.ts'
+import { DSH_TOOLS_STRINGS } from './strings.ts'
+
+export interface SearchPanelProps {
+  /** Controlled query text (owner persists/submits it). */
+  query: string
+  /** Active project filter echoed by the backend, if any. */
+  project?: string | null
+  /** Wire search mode; 'filter-only' shows the degradation bar. */
+  mode: SearchMode
+  /** Normalized result rows (owner maps the wire body via logic.ts). */
+  items: SearchItemVM[]
+  loading: boolean
+  /** Transport/HTTP failure text from the integration, or null. */
+  error: string | null
+  onQueryChange: (query: string) => void
+  onSubmit: () => void
+  /** Result click → open that session (same seam as the board cards). */
+  onSelectSession: (sessionId: string) => void
+}
+
+const S = DSH_TOOLS_STRINGS.search
+
+function ResultItem(props: {
+  item: SearchItemVM
+  onSelectSession: (sessionId: string) => void
+}): ReactElement {
+  const { item } = props
+  return (
+    <button
+      type="button"
+      className={css['resultItem']}
+      onClick={() => props.onSelectSession(item.sessionId)}
+      data-testid="agent-sidecar-search-item"
+    >
+      <span className={css['resultHead']}>
+        <span className={css['resultAgent']}>{item.agent}</span>
+        <span className={css['resultTitle']} title={item.title}>
+          {item.titleLabel}
+        </span>
+        <span className={css['matchTag']} data-kind={item.matchedBy}>
+          {item.matchedByLabel}
+        </span>
+      </span>
+      <span className={css['resultMeta']}>
+        <span className={css['resultProject']} title={item.project}>
+          {item.project}
+        </span>
+        <span className={css['resultId']} title={item.sessionId}>
+          {item.shortId}
+        </span>
+      </span>
+      {item.snippet !== null && (
+        <span className={css['snippet']}>
+          {item.snippet.map((segment, index) =>
+            segment.highlight ? (
+              <mark key={index} className={css['snippetMark']}>
+                {segment.text}
+              </mark>
+            ) : (
+              <span key={index}>{segment.text}</span>
+            ),
+          )}
+        </span>
+      )}
+    </button>
+  )
+}
+
+/** The search panel. Pure render of `deriveSearchView` over the props. */
+export function SearchPanel(props: SearchPanelProps): ReactElement {
+  const view = deriveSearchView({
+    loading: props.loading,
+    error: props.error,
+    mode: props.mode,
+    itemCount: props.items.length,
+    query: props.query,
+  })
+  const project = props.project ?? null
+
+  return (
+    <section className={css['panel']} data-testid="agent-sidecar-search">
+      <div className={css['panelHead']}>
+        <span className={css['panelTitle']}>{S.title}</span>
+      </div>
+
+      <form
+        className={css['searchForm']}
+        onSubmit={(ev) => {
+          ev.preventDefault()
+          props.onSubmit()
+        }}
+      >
+        <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']}>
+          {S.submit}
+        </button>
+      </form>
+
+      {project !== null && project !== '' && (
+        <span className={css['projectChip']} title={project}>
+          {formatTemplate(S.projectFilter, { project })}
+        </span>
+      )}
+
+      {view.notice !== null && (
+        <div
+          className={css['noticeBar']}
+          role="status"
+          data-testid="agent-sidecar-search-degraded"
+        >
+          {view.notice}
+        </div>
+      )}
+
+      {view.body === 'loading' && <div className={css['mutedLine']}>{view.text}</div>}
+
+      {view.body === 'error' && (
+        <div className={css['errorCard']} role="alert">
+          {view.text}
+          {view.detail !== null && <span className={css['errorDetail']}>{view.detail}</span>}
+        </div>
+      )}
+
+      {view.body === 'empty' && <div className={css['mutedLine']}>{view.text}</div>}
+
+      {view.body === 'results' && (
+        <div className={css['resultList']}>
+          {props.items.map((item) => (
+            <ResultItem
+              key={`${item.agent}:${item.sessionId}`}
+              item={item}
+              onSelectSession={props.onSelectSession}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  )
+}