{error}
diff --git a/src/client/Sidebar.tsx b/src/client/Sidebar.tsx
index 67c3083..58015bb 100644
--- a/src/client/Sidebar.tsx
+++ b/src/client/Sidebar.tsx
@@ -13,7 +13,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { useSyncExternalStore } from 'react'
import clsx from 'clsx'
import { IconChevronRightOutline14, IconFullscreenOutline16, IconPanelLeftOutline16, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives'
-import type { Context, SidebarConversation } from '../context-types.ts'
+import type { Context, SidebarConversation, SidebarSessionList } from '../context-types.ts'
import {
allLeaves, closeTab, leafWithTab, mapLeaf, moveTab, moveTabToEdge, openTab,
resizeSplit, setWidth, toggleExpanded, togglePanel,
@@ -28,6 +28,8 @@ import { ExplorerView } from './ExplorerView.tsx'
import { EditorView } from './EditorView.tsx'
import { TerminalView } from './TerminalView.tsx'
import { GitView } from './GitView.tsx'
+import { SubagentView } from './SubagentView.tsx'
+import { detectNewDirectSubagent } from './subagent-detect.ts'
import { t } from './locales.ts'
import { api } from './api.ts'
import { openSidebarFile } from './intercept.tsx'
@@ -43,8 +45,12 @@ function TabContent(props: {
onReferenceFile: (path: string) => void
ctx: Context
store: SidebarStore
+ /** Whether this tab is the active one AND the panel is open (live views pause otherwise). */
+ visible: boolean
+ /** Fired before a topology node jumps to its child session (see Sidebar). */
+ onSubagentJump: (childSessionId: string) => void
}) {
- const { tab, sessionId, cwd, expanded, onToggleDir, onReferenceFile, ctx, store } = props
+ const { tab, sessionId, cwd, expanded, onToggleDir, onReferenceFile, ctx, store, visible, onSubagentJump } = props
const scope = { sessionId, cwd }
switch (tab.type) {
case 'explorer':
@@ -64,6 +70,15 @@ function TabContent(props: {
return
case 'editor':
return
+ case 'subagent':
+ return (
+
{ onSubagentJump(address.childSessionId) }}
+ />
+ )
}
}
@@ -75,6 +90,7 @@ function buildNewTabOptions(state: SidebarState): NewTabOption[] {
return [
{ id: 'explorer', label: t('openExplorer'), icon: tabTypeIcon('explorer', 16) },
{ id: 'git', label: t('openGit'), icon: tabTypeIcon('git', 16) },
+ { id: 'subagent', label: t('openSubagent'), icon: tabTypeIcon('subagent', 16) },
{
id: 'terminal',
label: terminalCount >= TERMINAL_LIMIT ? `${t('newTerminal')} (${t('terminalLimit')})` : t('newTerminal'),
@@ -121,6 +137,52 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
}, [sessionId, summaryCwd])
const cwd = summaryCwd ?? fetchedCwd
+ /**
+ * Subagent auto-activation: the moment the current conversation spawns its
+ * FIRST direct subagent (a 0 → N transition on the list feed) and the
+ * "auto open" pref is on, open the panel (if collapsed) and focus the
+ * Subagent page (single-instance: an existing tab is focused, never
+ * duplicated). Switching to a session that already has subagents never
+ * triggers — its baseline starts at the current count — so a deliberate
+ * layout is never fought.
+ */
+ const listBaselineRef = useRef(undefined)
+ useEffect(() => {
+ const prev = listBaselineRef.current
+ listBaselineRef.current = sessionList
+ if (sessionId === undefined || prev === undefined) return
+ if (!detectNewDirectSubagent(prev, sessionList, sessionId)) return
+ if (!store.getPrefs().autoOpenSubagent) return
+ store.reduce(s => openTab(s.panelOpen ? s : togglePanel(s), {
+ id: 'subagent',
+ type: 'subagent',
+ title: t('subagent'),
+ }))
+ }, [sessionList, sessionId, store])
+
+ /**
+ * Topology jump-back: clicking a subagent node on the Subagent page calls
+ * the official `openSubagent`, which switches the sidebar to that child
+ * session's OWN layout (a fresh child session defaults to the explorer).
+ * The README contract says the Subagent page must stay open with the jumped
+ * node highlighted — so once the current session becomes the recorded jump
+ * target, re-open the Subagent page on top of the child's layout (expanding
+ * the panel first if it is collapsed). Only this explicit node click arms
+ * the flag, so switching to a subagent session by any other means keeps
+ * that session's own layout untouched.
+ */
+ const subagentJumpRef = useRef(undefined)
+ useEffect(() => {
+ const pending = subagentJumpRef.current
+ if (pending === undefined || sessionId !== pending) return
+ subagentJumpRef.current = undefined
+ store.reduce(s => openTab(s.panelOpen ? s : togglePanel(s), {
+ id: 'subagent',
+ type: 'subagent',
+ title: t('subagent'),
+ }))
+ }, [sessionId, store])
+
// Panel width drag (left edge strip).
const widthDrag = useRef({ startX: 0, startWidth: 0 })
const [draggingWidth, setDraggingWidth] = useState(false)
@@ -231,6 +293,9 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
if (optionId === 'git') {
return openTab(s, { id: 'git', type: 'git', title: t('git') })
}
+ if (optionId === 'subagent') {
+ return openTab(s, { id: 'subagent', type: 'subagent', title: t('subagent') })
+ }
if (optionId === 'terminal') {
const count = allLeaves(s.splits).flatMap(leaf => leaf.tabs).filter(tab => tab.type === 'terminal').length
if (count >= TERMINAL_LIMIT) return s
@@ -251,7 +316,13 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
* ctx and the conversation input service at click time; a missing service
* or scope degrades to a logged no-op, never a crash.
*/
- const renderTab = (tab: SidebarTab) => (
+ /**
+ * Render one tab's content. `active` (from the workbench) tells whether
+ * this tab is the active one in its pane; combined with the panel's
+ * open/closed state it gates live views (the Subagent topology pauses its
+ * polling while the page is not actually visible).
+ */
+ const renderTab = (tab: SidebarTab, active: boolean) => (
{ subagentJumpRef.current = childSessionId }}
/>
)
diff --git a/src/client/SubagentView.module.css b/src/client/SubagentView.module.css
new file mode 100644
index 0000000..bd032e6
--- /dev/null
+++ b/src/client/SubagentView.module.css
@@ -0,0 +1,275 @@
+/* Subagent page: main-agent topology tree. Row/card chrome mirrors the
+ official ui-subagent catalog row (min-height 50, 7/8/11 padding, radius 8,
+ flex-start alignment, tree connector lines via border-left hairlines). */
+.subagent {
+ flex: 1;
+ min-height: 0;
+ display: flex;
+ flex-direction: column;
+}
+
+.subagentHeader {
+ flex: none;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ height: 36px;
+ padding: 0 8px 0 12px;
+}
+
+.subagentTitle {
+ flex: 1;
+ min-width: 0;
+ font: var(--dsw-font-s-14);
+ color: var(--dsw-alias-label-secondary);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+/* The descendant count badge ("3 · 1 运行中") beside the title. */
+.subagentCount {
+ flex: none;
+ font: var(--dsw-font-xxxs-11);
+ color: var(--dsw-alias-label-tertiary);
+}
+
+.subagentRefresh {
+ flex: none;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 24px;
+ height: 24px;
+ border: none;
+ border-radius: 6px;
+ background: transparent;
+ color: var(--dsw-alias-label-secondary);
+ cursor: pointer;
+}
+
+.subagentRefresh:hover {
+ background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.subagentBody {
+ flex: 1;
+ min-height: 0;
+ overflow-y: auto;
+ padding: 2px 6px 8px;
+}
+
+/* One node card: state dot + label + secondary + (running) live lines. */
+.subagentRow {
+ position: relative;
+ display: flex;
+ align-items: flex-start;
+ gap: 8px;
+ box-sizing: border-box;
+ width: 100%;
+ min-height: 50px;
+ padding: 7px 8px 7px 11px;
+ border: none;
+ border-radius: 8px;
+ background: transparent;
+ font: var(--dsw-font-s-14);
+ color: var(--dsw-alias-label-primary);
+ text-align: left;
+ cursor: pointer;
+ outline: none;
+}
+
+.subagentRow:hover {
+ background: var(--dsw-alias-interactive-bg-hover);
+}
+
+/* Keyboard focus (mirror of the official catalog row): a visible fill only
+ when focused via keyboard; the selected state below still wins on top. */
+.subagentRow:focus-visible {
+ background: var(--dsw-alias-interactive-bg-hover);
+}
+
+/* The currently-open session, highlighted in place (mirror of the workspace
+ `.sessionRow.selected` — declared after the hover/focus rules so it wins). */
+.subagentRowActive,
+.subagentRowActive:hover,
+.subagentRowActive:focus-visible {
+ background: var(--dsw-alias-interactive-bg-active);
+}
+
+.subagentRowDisabled {
+ color: var(--dsw-alias-label-dimmed);
+ cursor: not-allowed;
+}
+
+.subagentRowDisabled:hover {
+ background: transparent;
+}
+
+/* Loading placeholders are disabled but keep the default cursor (official
+ `.loadingRow` distinction from `.disabled`). */
+.subagentRowLoading {
+ cursor: default;
+}
+
+/* The state dot aligns to the first text line (official catalog detail). */
+.subagentDot {
+ margin-top: 4px;
+}
+
+.subagentContent {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ min-width: 0;
+ gap: 2px;
+}
+
+.subagentLabel,
+.subagentSecondary {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.subagentLabel {
+ color: inherit;
+ font-weight: 400;
+}
+
+.subagentSecondary {
+ font: var(--dsw-font-xxxs-11);
+ color: var(--dsw-alias-label-tertiary);
+}
+
+/* ── Live lines (running cards only) ──────────────────────────────────── */
+
+.subagentLive {
+ display: flex;
+ align-items: baseline;
+ gap: 4px;
+ min-width: 0;
+ font: var(--dsw-font-xxxs-11);
+ color: var(--dsw-alias-label-tertiary);
+ overflow: hidden;
+}
+
+.subagentLiveTool {
+ flex: none;
+ font: var(--dsw-font-xxxs-strong-11);
+ color: var(--dsw-alias-label-secondary);
+}
+
+.subagentLiveArgs {
+ min-width: 0;
+ font-family: var(--ds-font-family-code);
+ font-size: var(--dsw-font-xxxs-11-font-size);
+ line-height: var(--dsw-font-xxxs-11-line-height);
+ color: var(--dsw-alias-label-tertiary);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.subagentLiveText {
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ font: var(--dsw-font-xxxs-11);
+ color: var(--dsw-alias-label-secondary);
+}
+
+/* ── Tree connector lines (official catalog recipe) ────────────────────── */
+
+.subagentNode {
+ position: relative;
+ min-width: 0;
+}
+
+.subagentChildren {
+ position: relative;
+ margin-left: 18px;
+ padding-left: 4px;
+}
+
+.subagentChildren::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: -26px;
+ height: 26px;
+ border-left: 1px solid var(--dsw-alias-border-l2);
+}
+
+.subagentChildren[aria-busy='true']::before {
+ content: none;
+}
+
+.subagentChildren > .subagentNode::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: -4px;
+ border-left: 1px solid var(--dsw-alias-border-l2);
+}
+
+.subagentChildren > .subagentNode:last-child::before {
+ bottom: auto;
+ height: 17px;
+}
+
+.subagentChildren > .subagentNode > .subagentRow::before {
+ content: '';
+ position: absolute;
+ top: 16px;
+ left: -4px;
+ width: 14px;
+ border-top: 1px solid var(--dsw-alias-border-l2);
+}
+
+.subagentEmpty {
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ padding: 16px;
+ font: var(--dsw-font-xxs-12);
+ color: var(--dsw-alias-label-tertiary);
+ text-align: center;
+}
+
+.subagentEmptyHint {
+ font: var(--dsw-font-xxxs-11);
+ color: var(--dsw-alias-label-dimmed);
+}
+
+.subagentError {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 8px;
+ padding: 8px 10px;
+ font: var(--dsw-font-xxs-12);
+ color: var(--dsw-alias-state-error-primary);
+}
+
+.subagentErrorRetry {
+ flex: none;
+ display: inline-flex;
+ align-items: center;
+ gap: 4px;
+ height: 24px;
+ padding: 0 8px;
+ border: none;
+ border-radius: 6px;
+ background: transparent;
+ color: var(--dsw-alias-label-secondary);
+ font: var(--dsw-font-xxxs-strong-11);
+ cursor: pointer;
+}
+
+.subagentErrorRetry:hover {
+ background: var(--dsw-alias-interactive-bg-hover);
+ color: var(--dsw-alias-label-primary);
+}
diff --git a/src/client/SubagentView.tsx b/src/client/SubagentView.tsx
new file mode 100644
index 0000000..414b570
--- /dev/null
+++ b/src/client/SubagentView.tsx
@@ -0,0 +1,584 @@
+/**
+ * Subagent page: the FULL agent topology of the current tree's main session.
+ *
+ * The root is resolved by walking the durable parent chain upward from the
+ * current session to the first non-subagent session — the MAIN session — and
+ * every subagent under it shares this one topology view, no matter how deep
+ * the current selection is (including a subagent transcript opened in the
+ * main view). The main agent renders as the root node card (click it to jump
+ * back to the main session), with its subagents hanging below it in clearly
+ * LAYERED levels: tree connector lines (first level included) and per-level
+ * indentation show the hierarchy, and the currently-open session is
+ * highlighted in place. Every branch is expanded automatically (lazy
+ * catalogs hydrate on demand and consume live membership while visible).
+ *
+ * Each node card carries live status (state dot, durable label, mode and
+ * activity); while a child RUNS, its card additionally shows the LAST text
+ * output and LAST tool call pulled from its history tail, auto-refreshing
+ * every few seconds while the page is visible. Clicking a card jumps
+ * straight into the child transcript (`openSubagent`); the page stays open
+ * and the topology remains rooted at the main session.
+ */
+import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent } from 'react'
+import { useSyncExternalStore } from 'react'
+import clsx from 'clsx'
+import {
+ IconRefreshOutline14, StateDot,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import type {
+ Context,
+ SidebarSessionSummary,
+ SidebarSubagentAddress,
+ SidebarSubagentCatalog,
+ SidebarSubagentChildEntry,
+ SidebarSubagentDiagnosticEntry,
+} from '../context-types.ts'
+import {
+ collectBranchIds,
+ countSubagentDescendants,
+ rootAncestor,
+} from './subagent-detect.ts'
+import { lastActivity } from './subagent-activity.ts'
+import { t } from './locales.ts'
+import css from './SubagentView.module.css'
+
+/** Refresh cadence of the live "last text + tool call" lines while a child runs. */
+const POLL_MS = 3000
+/** Preview cap of one tool-call argument line. */
+const ARGS_PREVIEW = 60
+
+/** The direct subagent children of one parent (durable `origin` rows). */
+function directChildren(
+ byId: Readonly>,
+ parentSessionId: string,
+): SidebarSessionSummary[] {
+ return Object.values(byId).filter(
+ summary => summary.origin === 'subagent' && summary.parentId === parentSessionId,
+ )
+}
+
+/** Human label of one catalog child: durable label, then summary title, then id. */
+function childLabel(
+ entry: SidebarSubagentChildEntry,
+ summary: SidebarSessionSummary | undefined,
+): string {
+ return entry.label ?? summary?.displayTitle ?? entry.id
+}
+
+function diagnosticReason(entry: SidebarSubagentDiagnosticEntry): string {
+ switch (entry.reason) {
+ case 'corrupt': return t('subagentDiagCorrupt')
+ case 'unsupported': return t('subagentDiagUnsupported')
+ case 'unavailable': return t('subagentDiagUnavailable')
+ }
+}
+
+/** The secondary line of one card: title · mode · activity (skips empty parts). */
+function cardSecondary(
+ summary: SidebarSessionSummary | undefined,
+ entry: SidebarSubagentChildEntry,
+): string {
+ return [
+ summary?.displayTitle,
+ entry.mode === 'one-shot' ? t('subagentModeOneShot') : t('subagentModeContinuable'),
+ entry.activity === 'running' ? t('subagentRunning') : t('subagentInactive'),
+ ].filter(Boolean).join(' · ')
+}
+
+/** First `limit` characters with an ellipsis when truncated. */
+function preview(text: string, limit: number): string {
+ return text.length > limit ? `${text.slice(0, limit)}…` : text
+}
+
+/** Collapse whitespace for the single-paragraph live-text preview. */
+function flatten(text: string): string {
+ return text.replace(/\s+/g, ' ').trim()
+}
+
+/** Disabled "loading…" cards backed by the summary mirror while a catalog hydrates. */
+function CatalogLoadingRows(props: {
+ parentSessionId: string
+ byId: Readonly>
+ level: number
+}) {
+ const { parentSessionId, byId, level } = props
+ const children = directChildren(byId, parentSessionId)
+ if (children.length === 0) {
+ return {t('loading')}
+ }
+ return (
+ <>
+ {children.map(summary => (
+
+
+
+ {t('loading')}
+
+
+ ))}
+
+ )
+}
+
+/**
+ * The live lines of one RUNNING subagent card: the last text output and the
+ * last tool call of the child's history tail, refreshed every few seconds
+ * while the page is visible. Idle cards render nothing (a quiet topology); a
+ * running child with neither output yet reads "thinking…".
+ */
+function SubagentLiveLines(props: {
+ ctx: Context
+ parentSessionId: string
+ childSessionId: string
+ mode: SidebarSubagentAddress['mode']
+ running: boolean
+ /** The page is visible (active tab + open panel): skip polling otherwise. */
+ active: boolean
+}) {
+ const { ctx, parentSessionId, childSessionId, mode, running, active } = props
+ const [live, setLive] = useState>({})
+ const controllerRef = useRef(undefined)
+ const address = useMemo(
+ () => ({ parentSessionId, childSessionId, mode }),
+ [parentSessionId, childSessionId, mode],
+ )
+
+ const load = useCallback(async (): Promise => {
+ controllerRef.current?.abort()
+ const controller = new AbortController()
+ controllerRef.current = controller
+ try {
+ const response = await ctx.connection.api.subagents.history(
+ { ...address, maxMessages: 12 },
+ controller.signal,
+ )
+ if (!response.result.ok) return
+ setLive(lastActivity(response.result.value.events))
+ } catch {
+ // Aborted by a newer pull or a wire failure: keep the last known lines.
+ }
+ }, [ctx, address])
+
+ useEffect(() => {
+ if (!active) return
+ void load()
+ if (!running) return
+ const timer = window.setInterval(() => { void load() }, POLL_MS)
+ return () => { window.clearInterval(timer) }
+ }, [load, running, active])
+
+ useEffect(() => () => { controllerRef.current?.abort() }, [])
+
+ if (!running) return null
+ if (live.text === undefined && live.tool === undefined) {
+ return {t('subagentThinking')}
+ }
+ return (
+ <>
+ {live.tool !== undefined && (
+
+ {live.tool.name}
+ {live.tool.args !== '' && (
+ {preview(live.tool.args, ARGS_PREVIEW)}
+ )}
+
+ )}
+ {live.text !== undefined && (
+ {flatten(live.text)}
+ )}
+
+ )
+}
+
+interface RowsProps {
+ parentSessionId: string
+ catalog: SidebarSubagentCatalog | undefined
+ catalogs: Readonly>
+ byId: Readonly>
+ level: number
+ /** The currently-open session id (highlighted in the topology). */
+ currentSessionId: string
+ /** The page is visible (active tab + open panel): live polling pauses otherwise. */
+ active: boolean
+ ctx: Context
+ openChild: (address: SidebarSubagentAddress) => void
+ refresh: (parentSessionId: string) => void
+}
+
+/** Render one topology level; branches are always expanded (lazy catalogs). */
+function CatalogRows({
+ parentSessionId, catalog, catalogs, byId, level, currentSessionId, active, ctx,
+ openChild, refresh,
+}: RowsProps) {
+ const emptyLoading = catalog?.state === 'loading' && catalog.entries.length === 0
+ return (
+ <>
+ {emptyLoading && (
+
+ )}
+ {catalog?.state === 'error' && (
+
+ {catalog.error?.message ?? t('error')}
+
+
+ )}
+ {(catalog?.entries ?? []).map((entry) => {
+ if (entry.kind === 'diagnostic') {
+ return (
+
+
+
+
+ {entry.id}
+ {diagnosticReason(entry)}
+
+
+
+
{ openChild(address) }}
+ onKeyDown={(event) => {
+ if (event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault()
+ event.stopPropagation()
+ openChild(address)
+ }
+ }}
+ >
+
+
+ {label}
+ {secondary}
+
+
+
+ {!knownLeaf && (
+
+ {childCatalog === undefined
+ ? (
+
+ )
+ : (
+
+ )}
+
+ )}
+
+
+
+ {t('subagent')}
+ {rootSummary?.displayTitle !== undefined && rootSummary.displayTitle !== ''
+ ? ` · ${rootSummary.displayTitle}`
+ : ''}
+
+ {countLabel !== undefined && {countLabel}}
+
+
+
+ {rootId !== undefined && rootSummary !== undefined && (
+
{
+ if (event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault()
+ event.stopPropagation()
+ openMain()
+ }
+ }}
+ >
+
+
+
+ {rootSummary.displayTitle !== '' ? rootSummary.displayTitle : t('subagentMainAgent')}
+
+
+ {`${t('subagentMainAgent')} · ${rootSummary.running === true ? t('subagentRunning') : t('subagentInactive')}`}
+
+
+
+ )}
+ {rootId !== undefined && (
+
+ {summaryBackedLoading && (
+
+ )}
+ {!summaryBackedLoading && (
+
+ )}
+
+ )}
+ {readyEmpty && (
+
+
{t('subagentEmpty')}
+
{t('subagentEmptyDesc')}
+
+ )}
+
+