@deepseek-harness-tui/dsh-tui 0.12.0 → 0.14.0

package/lib/types/components/sidePanel/TrajectoryPanel.js

@@ -0,0 +1,327 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text } from '../../ui.js';
+import { useAnimationFrame } from '../../ink/hooks/use-animation-frame.js';
+import { WaveBand } from '../trajectory/WaveBand.js';
+import { Ledger } from '../trajectory/Ledger.js';
+import { Inspector } from '../trajectory/Inspector.js';
+import { HotspotView, hotspotRows } from '../trajectory/HotspotView.js';
+import { Divider } from '../design-system/Divider.js';
+import { MOTION_TICK_MS } from '../../trajectory/motion.js';
+import { ledgerWindow } from '../../trajectory/window.js';
+import { truncateWidth } from '../../trajectory/format.js';
+import { stringWidth } from '../../ink/stringWidth.js';
+import { t } from '../../i18n.js';
+import { aggregate, columnOfIndex, emptyTrajectory, inspectNode, projectWave, HOTSPOT_SORTS, WAVE_PROJECTIONS, } from '../../dsh-adapter/trajectory/index.js';
+import { SidePanelRuntimeContext, useSidePanelTrajectory } from './SidePanelRuntimeContext.js';
+import { usePanelInput } from './usePanelInput.js';
+import { useTrajectoryScope } from '../trajectory/useTrajectoryScope.js';
+import { scopeChipParts } from '../trajectory/scope.js';
+/**
+ * The trajectory as a side-panel form of the fullscreen TrajectoryScene.
+ *
+ * This is deliberately a THIN ADAPTER, not a variant of the scene: the scene
+ * is tuned end-to-end for owning the whole alternate screen (its own query
+ * editor, exit chrome, page-sized chrome math against the terminal size), and
+ * re-parameterizing every one of those decisions would risk drifting the
+ * fullscreen behavior. Instead the panel composes the very same leaf regions
+ * — WaveBand / Ledger / Inspector / HotspotView — over the same projection
+ * utilities (aggregate / projectWave / inspectNode / columnOfIndex), so the
+ * two forms can never disagree about what a session looks like.
+ *
+ * What changes for the narrow column: no query line, no exit chrome (the host
+ * PanelBar owns ⤢ / Esc), Enter expands the inspector in place, and every
+ * line is clipped to the panel width via truncateWidth — never bare slice.
+ */
+/** Inspector rows in the collapsed layout (header + 3 body lines). */
+const INSPECTOR_ROWS = 4;
+/** Tabs row, the wake's two rows, the ledger/inspector divider, the hint. */
+const CHROME_ROWS = 5;
+/** Shared read-only identity for a panel mounted before any fold exists. */
+const EMPTY_BUILD = emptyTrajectory();
+export function TrajectoryPanel({ width, height, focused, visible }) {
+    // The channel comes from the same runtime context the trajectory build
+    // does. Reading it tolerantly (rather than via useSidePanelChannel, which
+    // throws) keeps the component mountable in headless fallback probes.
+    const channel = React.useContext(SidePanelRuntimeContext)?.channel;
+    const mainBuild = useSidePanelTrajectory();
+    const build = mainBuild ?? EMPTY_BUILD;
+    // 跨 Agent 下钻：面板与全屏场景共用同一个 scope 数据面，波形/账本/检视器
+    // 随 scope 一起切换。面板不消费 Esc，范围循环走 a 键与 chip 点击。
+    const { scope, lanes, scoped, drill } = useTrajectoryScope(channel, build);
+    const nodes = scoped.build.nodes;
+    // The empty-state copy promises "data once turns happen" — that is only
+    // honest for the SESSION scope; a scoped view of an eventless lane falls
+    // through to the normal chrome (tabs + chip + the ledger's own '—').
+    const empty = mainBuild === undefined || (scope.kind === 'session' && scoped.build.nodes.length === 0);
+    // visible=false (inactive tab / collapsed sidebar) stops the motion clock:
+    // zero animation-frame subscriptions, the store keeps folding underneath.
+    const [ref, time] = useAnimationFrame(visible && !empty ? MOTION_TICK_MS : null);
+    const tick = Math.floor(time / MOTION_TICK_MS);
+    const [view, setView] = React.useState('timeline');
+    const [cursor, setCursor] = React.useState(0);
+    const [hotCursor, setHotCursor] = React.useState(0);
+    const [projection, setProjection] = React.useState('compressed');
+    const [sort, setSort] = React.useState('duration');
+    const [expanded, setExpanded] = React.useState(false);
+    const [inspectScroll, setInspectScroll] = React.useState(0);
+    const [switchTick, setSwitchTick] = React.useState(0);
+    const [alertTick, setAlertTick] = React.useState(0);
+    const [arrivalTick, setArrivalTick] = React.useState(0);
+    const [arrivalFrom, setArrivalFrom] = React.useState(Number.MAX_SAFE_INTEGER);
+    /** Cursor pinned to the tail until the user scrolls away from it. */
+    const [follow, setFollow] = React.useState(true);
+    const [hoverTab, setHoverTab] = React.useState(null);
+    const [hoverAxis, setHoverAxis] = React.useState(false);
+    // ── projection (no query in the panel form: the filtered list is the
+    //    ledger itself, and the column index map is the identity) ─────────────
+    const filtered = nodes;
+    const indexes = React.useMemo(() => filtered.map((_, index) => index), [filtered.length]);
+    // EMPTY_BUILD (shared read-only identity) keeps the memo body total: hooks run before the
+    // empty-state early return, so the aggregators must tolerate a missing
+    // build rather than throwing on first paint.
+    const agg = React.useMemo(
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    () => aggregate(scoped.build, sort), [scoped.build, filtered.length, sort]);
+    // A scope switch swaps the row list: re-arm arrival at the scoped head.
+    const scopeKey = scope.kind === 'session' ? 's'
+        : scope.kind === 'parent-turn' ? 'p:' + scope.agentId + ':' + scope.turn
+            : (scope.kind === 'agent' ? 'a:' : 'd:') + scope.agentId;
+    React.useEffect(() => {
+        seenRef.current = 0;
+        errorsRef.current = agg.totals.errors;
+        setCursor(0);
+        setFollow(true);
+        setInspectScroll(0);
+        // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [scopeKey]);
+    // ── arrival + alert detection (same contract as the scene) ───────────────
+    const seenRef = React.useRef(0);
+    const errorsRef = React.useRef(0);
+    React.useEffect(() => {
+        if (empty)
+            return;
+        if (filtered.length > seenRef.current) {
+            setArrivalFrom(seenRef.current);
+            setArrivalTick(tick);
+            seenRef.current = filtered.length;
+            if (follow)
+                setCursor(Math.max(0, filtered.length - 1));
+        }
+        if (agg.totals.errors > errorsRef.current) {
+            errorsRef.current = agg.totals.errors;
+            setAlertTick(tick);
+        }
+        // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [filtered.length, agg.totals.errors, tick, follow]);
+    // ── geometry (all against the panel's own width/height, never the screen)
+    const contentWidth = Math.max(1, width - 2);
+    const bandWidth = contentWidth;
+    const inspectorRows = expanded
+        ? Math.max(4, height - CHROME_ROWS - 1)
+        : Math.max(3, Math.min(INSPECTOR_ROWS, height - CHROME_ROWS - 2));
+    const ledgerRows = Math.max(1, height - CHROME_ROWS - inspectorRows);
+    const clampedCursor = filtered.length === 0 ? 0 : Math.min(cursor, filtered.length - 1);
+    // The same windowing as the scene: one viewport's worth of rows at any
+    // session length.
+    const windowStart = ledgerWindow(filtered.length, clampedCursor, ledgerRows).start;
+    const band = React.useMemo(
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    () => projectWave(scoped.build.nodes, bandWidth, projection), [scoped.build, filtered.length, bandWidth, projection]);
+    const focusedNode = filtered[clampedCursor];
+    const detail = React.useMemo(() => focusedNode === undefined || channel === undefined
+        ? undefined
+        : inspectNode(focusedNode, scoped.events), [focusedNode, scoped.events]);
+    // ── navigation helpers (mirroring the scene's semantics) ─────────────────
+    const move = React.useCallback((delta) => {
+        setExpanded(false);
+        setInspectScroll(0);
+        setCursor(previous => {
+            const next = Math.max(0, Math.min(filtered.length - 1, previous + delta));
+            setFollow(next >= filtered.length - 1);
+            return next;
+        });
+    }, [filtered.length]);
+    const switchView = React.useCallback((next) => {
+        setView(next);
+        setSwitchTick(tick);
+        setExpanded(false);
+        setInspectScroll(0);
+        // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [tick]);
+    /** Jump back to the timeline positioned on a hotspot group's first member. */
+    const jumpFromHotspot = React.useCallback((row) => {
+        switchView('timeline');
+        if (row !== undefined) {
+            const target = indexes.indexOf(row.firstIndex);
+            setCursor(target >= 0 ? target : 0);
+            setFollow(false);
+        }
+    }, [indexes, switchView]);
+    const jumpTo = React.useCallback((index) => {
+        setInspectScroll(0);
+        setCursor(index);
+        setFollow(index >= filtered.length - 1);
+    }, [filtered.length]);
+    const handleWheel = React.useCallback((event) => {
+        if (view === 'hotspot') {
+            const total = hotspotRows(agg).length;
+            const direction = event.deltaY >= 0 ? 1 : -1;
+            setHotCursor(previous => Math.max(0, Math.min(total - 1, previous + direction)));
+            return;
+        }
+        if (expanded) {
+            const direction = event.deltaY >= 0 ? 1 : -1;
+            setInspectScroll(previous => Math.max(0, previous + direction * Math.max(1, inspectorRows - 2)));
+            return;
+        }
+        move(event.deltaY);
+    }, [view, agg, expanded, inspectorRows, move]);
+    // ── keys (v2.1 panel contract: true = consumed; Esc is NEVER consumed —
+    //    the host owns the return-to-chat key) ────────────────────────────────
+    const onKey = React.useCallback((input, key) => {
+        if (key.escape)
+            return false;
+        // Tab toggles the two views. ←/→ are deliberately NOT consumed: the
+        // host owns them for cycling the ACTIVE PANEL (v2.1 contract — the
+        // user expects ←/→ to switch panels everywhere in the column, and the
+        // tabs above are already the mouse path). ink delivers Tab as
+        // input='' + key.tab (no '\t' character) and the host's
+        // SidePanelKeyFlags does not carry a tab field, so both shapes count.
+        const tabKey = key.tab === true || input === '\t';
+        if (tabKey) {
+            switchView(view === 'timeline' ? 'hotspot' : 'timeline');
+            return true;
+        }
+        if (view === 'hotspot') {
+            const total = hotspotRows(agg).length;
+            if (key.upArrow) {
+                setHotCursor(previous => Math.max(0, previous - 1));
+                return true;
+            }
+            if (key.downArrow) {
+                setHotCursor(previous => Math.min(total - 1, previous + 1));
+                return true;
+            }
+            if (input === 't' && !key.ctrl && !key.meta) {
+                setSort(previous => HOTSPOT_SORTS[(HOTSPOT_SORTS.indexOf(previous) + 1) % HOTSPOT_SORTS.length]);
+                setSwitchTick(tick);
+                return true;
+            }
+            if (key.return_) {
+                jumpFromHotspot(hotspotRows(agg)[hotCursor]);
+                return true;
+            }
+            return false;
+        }
+        if (key.upArrow) {
+            move(-1);
+            return true;
+        }
+        if (key.downArrow) {
+            move(1);
+            return true;
+        }
+        if (key.pageUp) {
+            move(-ledgerRows);
+            return true;
+        }
+        if (key.pageDown) {
+            move(ledgerRows);
+            return true;
+        }
+        if (input === 'm' && !key.ctrl && !key.meta) {
+            setProjection(previous => WAVE_PROJECTIONS[(WAVE_PROJECTIONS.indexOf(previous) + 1) % WAVE_PROJECTIONS.length]);
+            setSwitchTick(tick);
+            return true;
+        }
+        // 会话范围内 a 下钻到焦点行所指的 lane；已在范围内则循环
+        // 当前 Agent → 父回合 → 全部后代 → 会话。面板不消费 Esc，循环也可以
+        // 点 scope chip。
+        if (input === 'a' && !key.ctrl && !key.meta && lanes.length > 0) {
+            drill(filtered[clampedCursor]);
+            return true;
+        }
+        if (key.return_) {
+            setExpanded(previous => !previous);
+            setInspectScroll(0);
+            return true;
+        }
+        if (expanded && (input === 'j' || input === 'k')) {
+            setInspectScroll(previous => Math.max(0, previous + (input === 'j' ? inspectorRows - 2 : -(inspectorRows - 2))));
+            return true;
+        }
+        return false;
+        // oxlint-disable-next-line react-hooks/exhaustive-deps
+    }, [view, agg, hotCursor, expanded, inspectorRows, ledgerRows, move, switchView, jumpFromHotspot, tick, lanes, drill, filtered, clampedCursor]);
+    usePanelInput(onKey, { active: focused && visible });
+    // ── unsupported state ──────────────────────────────────────────────────────
+    // The channel's trajectorySource() decides, not the node count: a session
+    // with no trajectory source must not read as "no turns yet". Every
+    // in-tree composition mounts one (DSH: raw history; other backends: the
+    // AgentEvent fold), so only fixtures reach this branch today. The ⤢
+    // outlet is hidden for it (SidePanelColumn) and the second line says
+    // why. A channel without the report (partial fixtures) keeps the old
+    // behavior.
+    const source = channel?.trajectorySource?.();
+    if (source === 'unsupported') {
+        // Copy selection only: unsupported sources share the same explanation.
+        const unsupportedLine = t('trajectory-unsupported');
+        return (_jsxs(Box, { ref: ref, flexDirection: "column", width: "100%", paddingX: 1, children: [_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "subtle", wrap: "truncate", children: truncateWidth(unsupportedLine, contentWidth) }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, italic: true, wrap: "truncate", children: truncateWidth(t('trajectory-unsupported-fullscreen'), contentWidth) }) })] }));
+    }
+    // ── empty state (supported + no events yet — the ONLY state allowed to
+    //    promise data once turns happen) ────────────────────────────────────────
+    if (empty) {
+        return (_jsxs(Box, { ref: ref, flexDirection: "column", width: "100%", paddingX: 1, children: [_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "subtle", wrap: "truncate", children: t('panel-trajectory-empty') }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, italic: true, wrap: "truncate", children: truncateWidth(t('panel-trajectory-hint'), contentWidth) }) })] }));
+    }
+    // ── tabs row: two clickable segments + the axis label (cycle on click) ───
+    const tabTimelineText = `${view === 'timeline' ? '●' : '○'} ${t('traj-tab-timeline')}`;
+    const tabHotspotText = `${view === 'hotspot' ? '●' : '○'} ${t('traj-tab-hotspot')}`;
+    // The scope chip: shown exactly while a non-session scope
+    // is active; its width is charged to the axis label's budget so a narrow
+    // panel drops the axis before it drops the scope identity.
+    const scopeChip = scopeChipParts(scope);
+    const scopeChipText = scopeChip === undefined ? '' : '◆ ' + t(scopeChip.key, scopeChip.params);
+    const axisText = view === 'hotspot' ? t(`traj-sort-${sort}`) : t(`traj-proj-${projection}`);
+    const axisRoom = contentWidth - stringWidth(tabTimelineText) - stringWidth(tabHotspotText) - stringWidth(scopeChipText) - 3;
+    const axisShown = axisRoom >= stringWidth(axisText) ? axisText : '';
+    const tabs = (_jsxs(Box, { width: "100%", height: 1, flexShrink: 0, children: [_jsx(Box, { flexShrink: 0, width: stringWidth(tabTimelineText), onClick: (event) => {
+                    event.stopImmediatePropagation();
+                    switchView('timeline');
+                }, onMouseEnter: () => setHoverTab('timeline'), onMouseLeave: () => setHoverTab(previous => (previous === 'timeline' ? null : previous)), children: _jsx(Text, { color: view === 'timeline' ? 'permission' : hoverTab === 'timeline' ? 'text' : 'subtle', bold: view === 'timeline', children: tabTimelineText }) }), _jsx(Box, { flexShrink: 0, width: stringWidth(tabHotspotText), onClick: (event) => {
+                    event.stopImmediatePropagation();
+                    switchView('hotspot');
+                }, onMouseEnter: () => setHoverTab('hotspot'), onMouseLeave: () => setHoverTab(previous => (previous === 'hotspot' ? null : previous)), children: _jsx(Text, { color: view === 'hotspot' ? 'permission' : hoverTab === 'hotspot' ? 'text' : 'subtle', bold: view === 'hotspot', children: tabHotspotText }) }), scopeChipText !== '' && (_jsx(Box, { flexShrink: 0, width: stringWidth(scopeChipText), 
+                // 点击 scope chip = a 键的鼠标等价（循环 当前 Agent → 父回合 →
+                // 全部后代 → 会话）。
+                onClick: (event) => {
+                    event.stopImmediatePropagation();
+                    drill(undefined);
+                }, children: _jsx(Text, { color: "accent", bold: true, children: scopeChipText }) })), _jsx(Box, { flexGrow: 1, flexShrink: 1, children: _jsx(Text, { children: " " }) }), axisShown !== '' && (_jsx(Box, { flexShrink: 0, width: stringWidth(axisShown) + 1, onClick: (event) => {
+                    event.stopImmediatePropagation();
+                    if (view === 'hotspot') {
+                        setSort(previous => HOTSPOT_SORTS[(HOTSPOT_SORTS.indexOf(previous) + 1) % HOTSPOT_SORTS.length]);
+                    }
+                    else {
+                        setProjection(previous => WAVE_PROJECTIONS[(WAVE_PROJECTIONS.indexOf(previous) + 1) % WAVE_PROJECTIONS.length]);
+                    }
+                    setSwitchTick(tick);
+                }, onMouseEnter: () => setHoverAxis(true), onMouseLeave: () => setHoverAxis(false), children: _jsx(Text, { color: hoverAxis ? 'text' : 'subtle', children: axisShown }) }))] }));
+    return (_jsxs(Box, { ref: ref, flexDirection: "column", width: "100%", height: height, paddingX: 1, overflow: "hidden", children: [tabs, _jsx(WaveBand, { band: band, width: bandWidth, cursorColumn: columnOfIndex(band, clampedCursor), viewportStart: columnOfIndex(band, windowStart), viewportEnd: columnOfIndex(band, Math.min(filtered.length - 1, windowStart + ledgerRows - 1)), tick: tick, alertTick: alertTick, onColumnClick: (column, event) => {
+                    event.stopImmediatePropagation();
+                    const nodeIndex = band.buckets[column]?.firstIndex ?? -1;
+                    if (nodeIndex < 0)
+                        return;
+                    const target = indexes.indexOf(nodeIndex);
+                    if (target >= 0)
+                        jumpTo(target);
+                } }), _jsx("ink-box", { style: { flexDirection: 'column', flexGrow: 1, flexShrink: 1, overflow: 'hidden', width: '100%' }, onWheel: handleWheel, children: view === 'timeline' ? (_jsxs(_Fragment, { children: [_jsx(Ledger, { rows: filtered, start: windowStart, height: ledgerRows, cursor: clampedCursor, width: contentWidth, tick: tick, arrivalTick: arrivalTick, arrivalFrom: arrivalFrom, onRowClick: (index, event) => {
+                                event.stopImmediatePropagation();
+                                jumpTo(index);
+                            } }), _jsx(Divider, { color: "permission", width: bandWidth }), _jsx(Inspector, { node: focusedNode, detail: detail, height: inspectorRows, width: contentWidth, expanded: expanded, scroll: inspectScroll })] })) : (_jsx(HotspotView, { agg: agg, sort: sort, width: contentWidth, height: ledgerRows + inspectorRows + 1, cursor: hotCursor, tick: tick, switchTick: switchTick, onRowClick: index => jumpFromHotspot(hotspotRows(agg)[index]) })) }), _jsx(Box, { width: "100%", height: 1, flexShrink: 0, children: _jsx(Text, { dimColor: true, italic: true, wrap: "truncate", children: truncateWidth(
+                    // 有 lane 可下钻时教一次 a 键；进入范围后改说怎么出来（面板
+                    // 不消费 Esc，循环回会话也是出口）。
+                    lanes.length === 0 ? t('panel-trajectory-hint')
+                        : scope.kind === 'session' ? t('panel-trajectory-hint') + ' · ' + t('trajectory-drill-hint')
+                            : t('trajectory-scope-hint-panel'), contentWidth) }) })] }));
+}

package/lib/types/components/sidePanel/WorkspacePanel.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { PanelProps } from './types.js';
+export declare function WorkspacePanel({ width, height, focused, visible }: PanelProps): React.ReactNode;
+//# sourceMappingURL=WorkspacePanel.d.ts.map

package/lib/types/components/sidePanel/WorkspacePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkspacePanel.d.ts","sourceRoot":"","sources":["../../../../src/components/sidePanel/WorkspacePanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAgD5C,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,UAAU,GAAG,KAAK,CAAC,SAAS,CAgK/F"}

package/lib/types/components/sidePanel/WorkspacePanel.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text } from '../../ui.js';
+import { t } from '../../i18n.js';
+import { truncateWidth, spreadRow } from '../../sessions/format.js';
+import { stringWidth } from '../../ink/stringWidth.js';
+import { normalizeWorkspaceCwd } from '../../sessions/view.js';
+import { useSidePanelChannel, useSidePanelFullscreen } from './SidePanelRuntimeContext.js';
+import { usePanelInput } from './usePanelInput.js';
+/**
+ * 工作目录（工作区）面板：侧栏里的当前 cwd 概览 + 持久工作区账本
+ * （channel.listWorkspaceRegistry()——整屏工作区主页左栏用的同一份数据，
+ * 见 SessionSupervisor），同时是进入整屏「工作区主页」的入口
+ * （Enter → openFullscreen('workspace')；⬢ 按钮由宿主 PanelBar 画）。
+ *
+ * 行契约：每行恒定 2 行（标题+会话数 / 路径+缺失标记），所有文本经
+ * truncateWidth / spreadRow / elideMiddle 按列宽裁剪——28 列也不折行、
+ * 不裸 slice。当前工作区行用 normalizeWorkspaceCwd 归一化后比较（与
+ * /resume 的工作区分组同一口径，不自己写路径比较）。
+ */
+/** Each ledger row is exactly two terminal lines (selection math depends on it). */
+const ROW_LINES = 2;
+/** Middle elision for one unbreakable path line: keep both ends, drop the
+ * middle. Cheaper to scan than a two-line hanging indent and keeps the
+ * drive prefix and the leaf directory visible at once. CJK-aware via
+ * stringWidth; never a bare slice. */
+function elideMiddle(text, maxWidth) {
+    if (maxWidth <= 1)
+        return maxWidth <= 0 ? '' : '…';
+    if (stringWidth(text) <= maxWidth)
+        return text;
+    const chars = [...text];
+    // Keep roughly 40% head / 60% tail (the leaf matters more than the root).
+    const headRoom = Math.max(1, Math.floor((maxWidth - 1) * 0.4));
+    let head = '';
+    let headWidth = 0;
+    for (const char of chars) {
+        const w = stringWidth(char);
+        if (headWidth + w > headRoom)
+            break;
+        head += char;
+        headWidth += w;
+    }
+    let tail = '';
+    let tailWidth = 0;
+    const tailRoom = maxWidth - 1 - headWidth;
+    for (let at = chars.length - 1; at >= 0; at -= 1) {
+        const char = chars[at];
+        const w = stringWidth(char);
+        if (tailWidth + w > tailRoom)
+            break;
+        tail = char + tail;
+        tailWidth += w;
+    }
+    return head + '…' + tail;
+}
+export function WorkspacePanel({ width, height, focused, visible }) {
+    const channel = useSidePanelChannel();
+    const openFullscreen = useSidePanelFullscreen();
+    // ── 数据：只在首次 visible 时起第一次拉取（visible=false 不发请求）；
+    //    'r' 手动重拉；nonce 过期或卸载后不落 state。 ───────────────────────
+    const [entries, setEntries] = React.useState(null);
+    const [loadError, setLoadError] = React.useState(null);
+    const [fetchTick, setFetchTick] = React.useState(0);
+    const startedRef = React.useRef(false);
+    const nonceRef = React.useRef(0);
+    React.useEffect(() => {
+        if (visible === false || startedRef.current)
+            return;
+        startedRef.current = true;
+        setFetchTick(tick => tick + 1);
+    }, [visible]);
+    React.useEffect(() => {
+        if (fetchTick === 0)
+            return;
+        const nonce = nonceRef.current + 1;
+        nonceRef.current = nonce;
+        let live = true;
+        setLoadError(null);
+        channel.listWorkspaceRegistry()
+            .then(list => {
+            if (!live || nonce !== nonceRef.current)
+                return;
+            setEntries(list);
+        })
+            .catch((error) => {
+            if (!live || nonceRef.current !== nonce)
+                return;
+            setLoadError(error instanceof Error ? error.message : String(error));
+        });
+        return () => { live = false; };
+    }, [channel, fetchTick]);
+    // ── 选中 / hover / 自管窗口滚动 ──────────────────────────────────────────
+    // 不用 ScrollBox：它的内容平移/裁剪会让滚动后的指针事件错位
+    // （TrajectoryPanel 的 ledger 同样自己管窗口）。行恒定 2 行，
+    // 窗口按面板高度算出，滚轮/↑↓/点击都在同一个 scrollTop 上收口。
+    const [selected, setSelected] = React.useState(0);
+    const [hovered, setHovered] = React.useState(null);
+    const [scrollTop, setScrollTop] = React.useState(0);
+    const list = entries ?? [];
+    const listEmpty = entries !== null && entries.length === 0;
+    const currentKey = normalizeWorkspaceCwd(channel.cwd);
+    const focus = list.length === 0 ? 0 : Math.min(selected, list.length - 1);
+    const contentWidth = Math.max(4, width - 2);
+    const branch = channel.gitBranch;
+    // header(1) + cwd(1) + branch(0/1) + margin(1) + list title(1) + hint(1)
+    const chromeRows = 5 + (branch !== undefined && branch !== '' ? 1 : 0);
+    const visibleRows = Math.max(1, Math.floor(Math.max(4, height - chromeRows) / ROW_LINES));
+    const maxScroll = Math.max(0, list.length - visibleRows);
+    const top = Math.min(scrollTop, maxScroll);
+    const clampScroll = (next) => Math.max(0, Math.min(maxScroll, next));
+    // 选中跟随：↑/↓ 把窗口带过去。
+    const bringIntoView = (index) => {
+        setScrollTop(current => {
+            const base = Math.min(current, maxScroll);
+            if (index < base)
+                return index;
+            if (index >= base + visibleRows)
+                return index - visibleRows + 1;
+            return current;
+        });
+    };
+    React.useEffect(() => { bringIntoView(focus); }, [focus]); // eslint-disable-line react-hooks/exhaustive-deps -- 窗口跟随只看选中位
+    // ── 键盘（v2.1 分发器）：↑/↓ 移动选中、Enter 开整屏主页、r 重拉；
+    //    Esc 返回 false 让宿主把焦点还回聊天。 ─────────────────────────────────────
+    usePanelInput((input, key) => {
+        if (key.escape === true)
+            return false;
+        if (key.upArrow === true) {
+            setSelected(i => Math.max(0, (list.length === 0 ? 0 : Math.min(i, list.length - 1)) - 1));
+            return true;
+        }
+        if (key.downArrow === true) {
+            setSelected(i => list.length === 0 ? 0 : Math.min(list.length - 1, Math.min(i, list.length - 1) + 1));
+            return true;
+        }
+        if (key.return_ === true) {
+            openFullscreen?.('workspace');
+            return true;
+        }
+        // ctrl/meta 修饰时不认（Ctrl+R 是输入历史搜索，落到面板会变成误重拉）。
+        if (input === 'r' && !key.ctrl && !key.meta) {
+            setFetchTick(tick => tick + 1);
+            return true;
+        }
+        return false;
+    }, { active: focused && visible });
+    // ── 几何：只按面板自身的 width/height，不读终端尺寸 ─────────────────────────────
+    const cwd = channel.displayCwd !== '' ? channel.displayCwd : channel.cwd;
+    const branchLabel = t('info-row-branch');
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, width: width, height: height, overflow: "hidden", children: [_jsxs(Box, { flexDirection: "column", flexShrink: 0, marginBottom: 1, children: [_jsx(Text, { color: "accent", bold: true, children: t('panel-workspace-current') }), _jsx(Box, { paddingLeft: 1, children: _jsx(Text, { color: "inactive", wrap: "truncate", children: elideMiddle(cwd, contentWidth - 1) }) }), branch !== undefined && branch !== '' && (_jsxs(Box, { paddingLeft: 1, flexDirection: "row", gap: 1, children: [_jsx(Text, { color: "inactive", children: branchLabel }), _jsx(Text, { wrap: "truncate", children: truncateWidth(branch, Math.max(1, contentWidth - stringWidth(branchLabel) - 3)) })] }))] }), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { dimColor: true, children: truncateWidth(t('panel-workspace-list', { n: list.length }), contentWidth) }) }), loadError !== null ? (_jsx(Box, { paddingLeft: 1, marginTop: 1, children: _jsx(Text, { color: "error", wrap: "truncate", children: truncateWidth(t('panel-workspace-failed', { err: loadError }), contentWidth - 1) }) })) : entries === null ? (_jsx(Box, { paddingLeft: 1, marginTop: 1, children: _jsx(Text, { dimColor: true, children: truncateWidth(t('panel-workspace-loading'), contentWidth - 1) }) })) : listEmpty ? (_jsx(Box, { paddingLeft: 1, marginTop: 1, children: _jsx(Text, { dimColor: true, wrap: "truncate", children: truncateWidth(t('panel-workspace-empty'), contentWidth - 1) }) })) : (_jsx(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, overflow: "hidden", onWheel: (event) => {
+                    setScrollTop(current => clampScroll(Math.min(current, maxScroll) + (event.deltaY > 0 ? 1 : event.deltaY < 0 ? -1 : 0)));
+                }, children: list.slice(top, top + visibleRows).map((entry, offset) => {
+                    const index = top + offset;
+                    return (_jsx(WorkspaceRow, { index: index, entry: entry, current: normalizeWorkspaceCwd(entry.path) === currentKey, selected: index === focus, hovered: hovered === index, width: contentWidth, onSelect: () => { setSelected(index); setScrollTop(clampScroll(Math.min(top, maxScroll))); setHovered(index); }, onHoverChange: setHovered }, entry.id));
+                }) })), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { dimColor: true, italic: true, wrap: "truncate", children: truncateWidth(t('panel-workspace-hint'), contentWidth) }) })] }));
+}
+/** One registered-workspace ledger row: title + session count on line 1,
+ * directory (dim) + missing marker on line 2. Exactly two lines, always —
+ * spreadRow/truncateWidth everywhere, never a bare slice, never a fold. */
+function WorkspaceRow({ entry, index, current, selected, hovered, width, onSelect, onHoverChange }) {
+    const body = Math.max(4, width - 2);
+    const countLabel = t('panel-workspace-sessions', { n: entry.sessionCount });
+    const head = spreadRow(entry.title, countLabel, body);
+    const missingLabel = entry.present === false ? t('panel-workspace-missing') : '';
+    const tail = spreadRow(entry.path, missingLabel, body);
+    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, onClick: (event) => {
+            event.stopImmediatePropagation();
+            onSelect();
+        }, onMouseEnter: () => onHoverChange(index), onMouseLeave: () => onHoverChange(prev => (prev === index ? null : prev)), children: [_jsxs(Box, { height: 1, flexShrink: 0, overflow: "hidden", children: [_jsx(Box, { width: 2, flexShrink: 0, children: _jsxs(Text, { color: selected || hovered ? 'accent' : undefined, children: [selected || hovered ? '❯' : ' ', current ? '●' : ' '] }) }), _jsx(Text, { bold: selected, color: selected || hovered ? 'accent' : undefined, wrap: "truncate-end", children: head.left + ' '.repeat(head.gap) + head.right })] }), _jsxs(Box, { height: 1, paddingLeft: 2, flexShrink: 0, overflow: "hidden", children: [_jsx(Text, { dimColor: true, wrap: "truncate-end", children: tail.left + ' '.repeat(tail.gap) }), tail.right !== '' && _jsx(Text, { color: "warning", children: tail.right })] })] }));
+}

package/lib/types/components/sidePanel/agentViewStore.d.ts

@@ -0,0 +1,20 @@
+/**
+ * agentViewStore：面板/详情 → Chat 的主屏 Agent View 打开请求通道（镜像
+ * jobsFocusStore 的三行 store 模式）。agents 侧栏面板与 Detail 场景自己没有
+ * Chat 的场景 state，主屏查看动作经这里请求；Chat 订阅后压入来源栈。
+ *
+ * surface 记录请求来自侧栏面板还是整屏形态，Esc 返回时回到同一形态。
+ */
+export interface AgentViewRequest {
+    readonly agentId: string;
+    readonly source: 'agents-dashboard' | 'agent-detail';
+    /** 请求来自侧栏 agents 面板（Esc 返回面板而非整屏形态）。 */
+    readonly panel: boolean;
+    readonly nonce: number;
+}
+export declare const agentViewStore: {
+    subscribe(listener: () => void): () => void;
+    get(): AgentViewRequest | null;
+    request(agentId: string, source: AgentViewRequest["source"], panel: boolean): void;
+};
+//# sourceMappingURL=agentViewStore.d.ts.map

package/lib/types/components/sidePanel/agentViewStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"agentViewStore.d.ts","sourceRoot":"","sources":["../../../../src/components/sidePanel/agentViewStore.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,MAAM,EAAE,kBAAkB,GAAG,cAAc,CAAA;IACpD,wCAAwC;IACxC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CACvB;AASD,eAAO,MAAM,cAAc;wBACL,MAAM,IAAI,GAAG,MAAM,IAAI;WAIpC,gBAAgB,GAAG,IAAI;qBAGb,MAAM,UAAU,gBAAgB,CAAC,QAAQ,CAAC,SAAS,OAAO,GAAG,IAAI;CAInF,CAAA"}

package/lib/types/components/sidePanel/agentViewStore.js

@@ -0,0 +1,26 @@
+/**
+ * agentViewStore：面板/详情 → Chat 的主屏 Agent View 打开请求通道（镜像
+ * jobsFocusStore 的三行 store 模式）。agents 侧栏面板与 Detail 场景自己没有
+ * Chat 的场景 state，主屏查看动作经这里请求；Chat 订阅后压入来源栈。
+ *
+ * surface 记录请求来自侧栏面板还是整屏形态，Esc 返回时回到同一形态。
+ */
+let snapshot = null;
+const listeners = new Set();
+function emit() {
+    for (const listener of [...listeners])
+        listener();
+}
+export const agentViewStore = {
+    subscribe(listener) {
+        listeners.add(listener);
+        return () => { listeners.delete(listener); };
+    },
+    get() {
+        return snapshot;
+    },
+    request(agentId, source, panel) {
+        snapshot = Object.freeze({ agentId, source, panel, nonce: (snapshot?.nonce ?? 0) + 1 });
+        emit();
+    },
+};

package/lib/types/components/sidePanel/btw/BtwComposer.d.ts

@@ -0,0 +1,50 @@
+/**
+ * BtwComposer：btw 线程的追问输入框。草稿存在线程 store 里（面板与全屏
+ * 共享），Enter 发送，Esc 退出编辑焦点但保留草稿，失败或忙时草稿原样保留。
+ * 没有 steer/queue：sideQuery 是一次旁路问答，不进父会话。
+ *
+ * 键处理是纯函数 btwComposerKey，面板（usePanelInput 分发）与全屏场景
+ * （useInput）共用；组件本身受控渲染（text 在 store，caret 是各处自己的）。
+ */
+import React from 'react';
+import type { SidePanelKeyFlags } from '../types.js';
+/** 编辑态（text 来自线程 store；caret 属于当前 surface）。 */
+export interface BtwComposerState {
+    readonly text: string;
+    readonly caret: number;
+}
+/** btwComposerKey 的结果：undefined 字段 = 无此动作；整体为 null = 键未消费。 */
+export interface BtwComposerKeyResult {
+    readonly state?: BtwComposerState;
+    readonly submit?: boolean;
+    /** Esc/Tab：退出编辑焦点（草稿保留），焦点回落线程列表/宿主。 */
+    readonly exitFocus?: boolean;
+}
+/** 运行时补充键位（ink Key 实际携带；SidePanelKeyFlags 类型面未列）。 */
+type BtwKeyFlags = SidePanelKeyFlags & {
+    readonly tab?: boolean;
+    readonly backspace?: boolean;
+    readonly delete?: boolean;
+    readonly home?: boolean;
+    readonly end?: boolean;
+    readonly return?: boolean;
+};
+/**
+ * 单行 composer 的键语义。返回 null = 未消费（面板形态交宿主回退键，
+ * 全屏形态交场景其余分支）；返回对象按 exitFocus > submit > 编辑 写回。
+ */
+export declare function btwComposerKey(state: BtwComposerState, input: string, key: BtwKeyFlags): BtwComposerKeyResult | null;
+export declare function BtwComposer({ state, focused, busy, notice, }: {
+    readonly state: BtwComposerState;
+    /** 编辑焦点（决定 caret 反白块的画法）。 */
+    readonly focused: boolean;
+    /** 线程在途：Enter 不发送，提示稍候。 */
+    readonly busy: boolean;
+    /** 提交失败/忙的本地提示（显示到下一次动作）。 */
+    readonly notice?: {
+        readonly text: string;
+        readonly failure: boolean;
+    } | undefined;
+}): React.ReactNode;
+export {};
+//# sourceMappingURL=BtwComposer.d.ts.map

package/lib/types/components/sidePanel/btw/BtwComposer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BtwComposer.d.ts","sourceRoot":"","sources":["../../../../../src/components/sidePanel/btw/BtwComposer.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAGpD,+CAA+C;AAC/C,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CACvB;AAED,8DAA8D;AAC9D,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACjC,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB,wCAAwC;IACxC,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,qDAAqD;AACrD,KAAK,WAAW,GAAG,iBAAiB,GAAG;IACrC,QAAQ,CAAC,GAAG,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,GAAG,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,WAAW,GAAG,oBAAoB,GAAG,IAAI,CAuBpH;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,IAAI,EACJ,MAAM,GACP,EAAE;IACD,QAAQ,CAAC,KAAK,EAAE,gBAAgB,CAAA;IAChC,6BAA6B;IAC7B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB,2BAA2B;IAC3B,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAA;IACtB,6BAA6B;IAC7B,QAAQ,CAAC,MAAM,CAAC,EAAE;QAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;KAAE,GAAG,SAAS,CAAA;CACnF,GAAG,KAAK,CAAC,SAAS,CAsBlB"}