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

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

@@ -0,0 +1,26 @@
+/**
+ * 侧栏 context 两件套：
+ * - SidePanelRuntimeContext：useSidePanel 创建的运行时（键盘分发）+
+ *   当前 channel（内置 Adapter 的数据源；插件 Panel 不经过这里，它们
+ *   在 Phase 6 拿策展快照）。
+ * - PanelContext：PanelHost 为每个 Panel 子树提供的身份（panelId），
+ *   usePanelInput 据此把业务键注册进分发器；不在 Panel 里（整屏
+ *   形态）时为 null，usePanelInput 退化为普通 useInput。
+ */
+import React from 'react';
+export const SidePanelRuntimeContext = React.createContext(null);
+export function useSidePanelChannel() {
+    const ctx = React.useContext(SidePanelRuntimeContext);
+    if (ctx === null)
+        throw new Error('useSidePanelChannel must be used under PanelHost');
+    return ctx.channel;
+}
+/** 会话轨迹投影；Chat 还没折叠出来（或不在 PanelHost 下）时 undefined。 */
+export function useSidePanelTrajectory() {
+    return React.useContext(SidePanelRuntimeContext)?.trajectory;
+}
+/** 「全屏」出口：宿主没接时返回 undefined（按钮点击静默无效）。 */
+export function useSidePanelFullscreen() {
+    return React.useContext(SidePanelRuntimeContext)?.openFullscreen;
+}
+export const PanelContext = React.createContext(null);

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { PanelProps } from './types.js';
+type TrajectoryView = 'timeline' | 'hotspot';
+export declare function TrajectoryPanel({ width, height, focused, visible }: PanelProps): React.ReactNode;
+/** Re-exported for the host/verify fixtures (same union the scene exports). */
+export type { TrajectoryView };
+//# sourceMappingURL=TrajectoryPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TrajectoryPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/sidePanel/TrajectoryPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AA0BzB,OAAO,KAAK,EAAmB,UAAU,EAAE,MAAM,YAAY,CAAA;AAwB7D,KAAK,cAAc,GAAG,UAAU,GAAG,SAAS,CAAA;AAE5C,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,UAAU,GAAG,KAAK,CAAC,SAAS,CAuYhG;AAED,+EAA+E;AAC/E,YAAY,EAAE,cAAc,EAAE,CAAA"}

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

@@ -0,0 +1,263 @@
+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 { 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';
+/**
+ * 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;
+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 build = useSidePanelTrajectory();
+    const nodes = build?.nodes;
+    const empty = nodes === undefined || 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]);
+    // `emptyTrajectory()` 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(build ?? emptyTrajectory(), sort), [build, filtered.length, sort]);
+    // ── 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);
+    const windowStart = Math.max(0, Math.min(clampedCursor - Math.floor(ledgerRows / 2), filtered.length - ledgerRows));
+    const band = React.useMemo(
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    () => projectWave(nodes ?? emptyTrajectory().nodes, bandWidth, projection), [nodes, filtered.length, bandWidth, projection]);
+    const focusedNode = filtered[clampedCursor];
+    const detail = React.useMemo(() => focusedNode === undefined || channel === undefined
+        ? undefined
+        : inspectNode(focusedNode, channel.traceEvents()), [focusedNode, channel]);
+    // ── 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;
+        }
+        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]);
+    usePanelInput(onKey, { active: focused && visible });
+    // ── empty state ───────────────────────────────────────────────────────────
+    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')}`;
+    const axisText = view === 'hotspot' ? t(`traj-sort-${sort}`) : t(`traj-proj-${projection}`);
+    const axisRoom = contentWidth - stringWidth(tabTimelineText) - stringWidth(tabHotspotText) - 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 }) }), _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(t('panel-trajectory-hint'), 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/builtinPanels.d.ts

@@ -0,0 +1,3 @@
+/** 幂等：重复调用（夹具多次挂载）不再注册。 */
+export declare function registerBuiltinPanels(): void;
+//# sourceMappingURL=builtinPanels.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"builtinPanels.d.ts","sourceRoot":"","sources":["../../../../src/components/sidePanel/builtinPanels.tsx"],"names":[],"mappings":"AAsLA,2BAA2B;AAC3B,wBAAgB,qBAAqB,IAAI,IAAI,CAwF5C"}