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

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

@@ -0,0 +1,17 @@
+/**
+ * InfoPanel — 侧栏「信息」面板：把当前会话的运行信息分组、紧凑地列出。
+ *
+ * 口径与状态栏完全一致：上下文占用（formatContextUsage + contextPressureStep
+ * 阈值配色）、缓存命中（formatCacheHitRate）、TPS（tpsStats / speedColor）、
+ * 花费（estimateSessionCostSnapshotCny 同一套门控）、模式名（modeDisplayName）、
+ * cwd 展示折叠（formatProject）。本组件不推导任何新口径，只重排布局。
+ *
+ * 布局：键值两列，标签列定宽截断、值列悬挂缩进并 truncate——长 cwd /
+ * 长标题在 28 列也不会把列挤爆。内容超高时 ScrollBox 滚动：滚轮由
+ * ScrollBox 自带（位置路由），↑/↓ 经 usePanelInput（v2.1 键盘契约）。
+ * visible=false 时不挂任何定时器 / 高频订阅（本面板本来就是纯读渲染）。
+ */
+import React from 'react';
+import type { PanelProps } from './types.js';
+export declare function InfoPanel({ width, height, focused, visible }: PanelProps): React.ReactNode;
+//# sourceMappingURL=InfoPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InfoPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/sidePanel/InfoPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,MAAM,OAAO,CAAA;AAezB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAwB5C,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,UAAU,GAAG,KAAK,CAAC,SAAS,CA2J1F"}

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

@@ -0,0 +1,129 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * InfoPanel — 侧栏「信息」面板：把当前会话的运行信息分组、紧凑地列出。
+ *
+ * 口径与状态栏完全一致：上下文占用（formatContextUsage + contextPressureStep
+ * 阈值配色）、缓存命中（formatCacheHitRate）、TPS（tpsStats / speedColor）、
+ * 花费（estimateSessionCostSnapshotCny 同一套门控）、模式名（modeDisplayName）、
+ * cwd 展示折叠（formatProject）。本组件不推导任何新口径，只重排布局。
+ *
+ * 布局：键值两列，标签列定宽截断、值列悬挂缩进并 truncate——长 cwd /
+ * 长标题在 28 列也不会把列挤爆。内容超高时 ScrollBox 滚动：滚轮由
+ * ScrollBox 自带（位置路由），↑/↓ 经 usePanelInput（v2.1 键盘契约）。
+ * visible=false 时不挂任何定时器 / 高频订阅（本面板本来就是纯读渲染）。
+ */
+import React from 'react';
+import { Box, Text, ScrollBox } from '../../ui.js';
+import { stringWidth } from '../../ink/stringWidth.js';
+import { t } from '../../i18n.js';
+import { formatTokens } from '../../terminal-utils/format.js';
+import { formatContextUsage } from '../../tuiDisplayPrefs.js';
+import { modeDisplayName } from '../../sessionModes.js';
+import { estimateSessionCostSnapshotCny, isDeepSeekOfficialProvider, isPeakHour } from '../../deepseekPricing.js';
+import { formatCacheHitRate, formatCostReport } from '../../screens/StatusLine.js';
+import { contextPressureStep, speedColor } from '../../screens/StatusMetrics.js';
+import { formatProject } from '../../sessions/format.js';
+import { homeDir } from '../../utils/paths.js';
+import { Divider } from '../design-system/Divider.js';
+import { useSidePanelChannel } from './SidePanelRuntimeContext.js';
+import { usePanelInput } from './usePanelInput.js';
+/** 与状态栏同一口径的上下文已用量：最近一次请求的 input+cacheRead+cacheWrite。 */
+function contextUsedOf(channel) {
+    const usage = channel.lastUsage;
+    if (usage === undefined)
+        return undefined;
+    return usage.input + usage.cacheRead + usage.cacheWrite;
+}
+/** 权限行取值：durable preset 身份优先，否则 sandbox·approval 原子拼合。 */
+function approvalOf(mode) {
+    if (mode.permission !== undefined)
+        return mode.permission;
+    if (mode.sandbox === undefined && mode.approval === undefined)
+        return undefined;
+    return [mode.sandbox, mode.approval].filter(Boolean).join('·');
+}
+/** 非默认模式的显式标记（与状态栏 modeNeedsExplicitMarker 同判）。 */
+function modeNeedsExplicitMarker(mode) {
+    return mode.plan === true
+        || mode.sandbox === 'danger-full-access'
+        || mode.approval === 'never';
+}
+export function InfoPanel({ width, height, focused, visible }) {
+    const channel = useSidePanelChannel();
+    const scrollRef = React.useRef(null);
+    // 面板业务键：↑/↓ 滚动（内容超高才有意义）；Esc 等一律让出给宿主回退。
+    const panelKeyHandler = (input, key) => {
+        if (key.escape === true || (key.ctrl === true && input === 'c'))
+            return false;
+        if (key.upArrow === true) {
+            scrollRef.current?.scrollBy(-1);
+            return true;
+        }
+        if (key.downArrow === true) {
+            scrollRef.current?.scrollBy(1);
+            return true;
+        }
+        return false;
+    };
+    usePanelInput(panelKeyHandler, { active: focused && visible });
+    const usage = channel.lastUsage;
+    const used = contextUsedOf(channel);
+    const displayCwd = channel.displayCwd === channel.cwd
+        ? formatProject(channel.displayCwd, homeDir())
+        : channel.displayCwd;
+    // --- 值构造（全部复用状态栏口径） -------------------------------------
+    const none = t('info-value-none');
+    const modeName = modeDisplayName(channel.mode);
+    const approval = approvalOf(channel.mode);
+    const contextText = formatContextUsage(used, channel.contextWindow, true);
+    const contextPct = used !== undefined && channel.contextWindow !== undefined && channel.contextWindow > 0
+        ? (used / channel.contextWindow) * 100
+        : undefined;
+    const contextStep = contextPct !== undefined ? contextPressureStep(contextPct) : undefined;
+    const cacheText = formatCacheHitRate(usage) ?? none;
+    // 花费：与状态栏同一规则——后端自报的会话花费（Claude `total_cost_usd`）
+    // 优先；否则官方 DeepSeek 路由 + 有计价金额或未计价 token。
+    // oxlint-disable-next-line typescript/no-unnecessary-condition -- partial embedder channels omit the report
+    const costReport = channel.costReport;
+    const estimate = costReport === undefined && isDeepSeekOfficialProvider(channel.provider)
+        ? estimateSessionCostSnapshotCny({
+            provider: channel.provider,
+            main: channel.mainCost ?? {},
+            subagents: channel.subagentCost ?? [],
+            fallbackTokens: channel.tokens,
+            fallbackModel: channel.model,
+        })
+        : undefined;
+    const costText = costReport !== undefined
+        ? formatCostReport(costReport)
+        : estimate !== undefined && (estimate.total > 0 || estimate.unpricedTokens > 0)
+            ? estimate.total > 0
+                ? '¥' + estimate.total.toFixed(2) + ' ' + t(isPeakHour() ? 'cost-now-peak' : 'cost-now-idle')
+                : t('cost-unpriced', { tokens: formatTokens(estimate.unpricedTokens) })
+            : none;
+    const tpsText = channel.tps !== undefined
+        ? speedColor(channel.tps, String(Math.round(channel.tps))) + ' tps'
+        : none;
+    const jobs = channel.backgroundJobs;
+    const jobsLive = (jobs ?? []).filter(job => job.status === 'running' || job.status === 'stopping').length;
+    const jobsText = jobs !== undefined ? jobsLive + '/' + jobs.length : none;
+    const subagents = channel.subagents;
+    const subagentsText = subagents !== undefined ? String(subagents.length) : none;
+    // 标签列取「本语言最长标签」与「内容宽一半」的较小者：28 列时标签
+    // 先让路（截断），值列保住至少一半——点名字段的前缀必须仍可读。
+    const contentWidth = Math.max(10, width - 2);
+    const labelWidth = Math.min(Math.max(...[
+        t('info-row-title'), t('info-row-session-id'), t('info-row-agent-id'), t('info-row-cwd'),
+        t('info-row-branch'), t('info-row-model'), t('info-row-effort'), t('info-row-mode'),
+        t('info-row-approval'), t('info-row-context'), t('info-row-window'), t('info-row-tokens'),
+        t('info-row-cache'), t('info-row-cost'), t('info-row-tps'), t('info-row-status'),
+        t('info-row-activity'), t('info-row-jobs'), t('info-row-subagents'),
+    ].map(s => stringWidth(s))), Math.max(6, Math.floor(contentWidth / 2)));
+    function Row({ label, value, valueColor }) {
+        return (_jsxs(Box, { flexDirection: "row", gap: 1, width: "100%", children: [_jsx(Box, { width: labelWidth, flexShrink: 0, children: _jsx(Text, { dimColor: true, wrap: "truncate-end", children: label }) }), _jsx(Box, { flexGrow: 1, flexShrink: 1, overflow: "hidden", children: _jsx(Text, { color: valueColor, wrap: "truncate-end", children: value }) })] }));
+    }
+    function Section({ title, children }) {
+        return (_jsxs(Box, { flexDirection: "column", marginTop: 1, width: "100%", children: [_jsx(Divider, { title: title }), _jsx(Box, { flexDirection: "column", marginTop: 0, width: "100%", children: children })] }));
+    }
+    return (_jsx(Box, { flexDirection: "column", paddingLeft: 1, paddingRight: 1, width: width, flexShrink: 0, children: _jsxs(ScrollBox, { ref: scrollRef, flexDirection: "column", maxHeight: Math.max(3, height), flexGrow: 1, children: [_jsxs(Section, { title: t('info-section-session'), children: [_jsx(Row, { label: t('info-row-title'), value: channel.sessionTitle !== '' ? channel.sessionTitle : none }), _jsx(Row, { label: t('info-row-session-id'), value: channel.sessionId !== '' ? '#' + channel.sessionId.slice(0, 8) : none }), _jsx(Row, { label: t('info-row-agent-id'), value: channel.agentId !== '' ? '#' + channel.agentId.slice(0, 8) : none }), _jsx(Row, { label: t('info-row-cwd'), value: displayCwd !== '' ? displayCwd : none }), _jsx(Row, { label: t('info-row-branch'), value: channel.gitBranch !== undefined && channel.gitBranch !== '' ? channel.gitBranch : none })] }), _jsxs(Section, { title: t('info-section-model'), children: [_jsx(Row, { label: t('info-row-model'), value: channel.model !== '' ? channel.model : none }), _jsx(Row, { label: t('info-row-effort'), value: channel.reasoningEffort !== undefined && channel.reasoningEffort !== '' ? channel.reasoningEffort : none }), _jsx(Row, { label: t('info-row-mode'), value: modeName, valueColor: channel.mode.plan === true ? 'planMode' : modeNeedsExplicitMarker(channel.mode) ? 'warning' : undefined }), _jsx(Row, { label: t('info-row-approval'), value: approval !== undefined && approval !== '' ? approval : none, valueColor: modeNeedsExplicitMarker(channel.mode) ? 'warning' : undefined })] }), _jsxs(Section, { title: t('info-section-context'), children: [_jsx(Row, { label: t('info-row-context'), value: contextText ?? none, valueColor: contextStep }), _jsx(Row, { label: t('info-row-window'), value: channel.contextWindow !== undefined ? formatTokens(channel.contextWindow) : none }), _jsx(Row, { label: t('info-row-tokens'), value: formatTokens(channel.tokens.input) + '→' + formatTokens(channel.tokens.output) }), _jsx(Row, { label: t('info-row-cache'), value: cacheText }), _jsx(Row, { label: t('info-row-cost'), value: costText }), _jsx(Row, { label: t('info-row-tps'), value: tpsText })] }), _jsxs(Section, { title: t('info-section-runtime'), children: [_jsx(Row, { label: t('info-row-status'), value: String(channel.status) }), _jsx(Row, { label: t('info-row-activity'), value: channel.working ? channel.spinnerMode : none, valueColor: channel.working ? 'success' : undefined }), _jsx(Row, { label: t('info-row-jobs'), value: jobsText }), _jsx(Row, { label: t('info-row-subagents'), value: subagentsText })] })] }) }));
+}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+export type PanelBadgeLevel = 'info' | 'warning' | 'error';
+export interface PanelBarTab {
+    readonly id: string;
+    readonly title: string;
+    readonly badge?: {
+        readonly level: PanelBadgeLevel;
+        readonly unread: number;
+    } | null;
+}
+export interface PanelBarProps {
+    readonly tabs: readonly PanelBarTab[];
+    readonly activeId: string | undefined;
+    readonly width: number;
+    readonly focused: boolean;
+    readonly canExpand?: boolean;
+    readonly onExpand?: () => void;
+    readonly onSelect?: (id: string) => void;
+}
+export declare function PanelBar({ tabs, activeId, width, focused, canExpand, onExpand, onSelect }: PanelBarProps): React.ReactNode;
+//# sourceMappingURL=PanelBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelBar.d.ts","sourceRoot":"","sources":["../../../../src/components/sidePanel/PanelBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAA;AAE1D,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,CAAC,EAAE;QAAE,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC;QAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;CACrF;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,IAAI,EAAE,SAAS,WAAW,EAAE,CAAA;IACrC,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;IACrC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAA;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACzC;AAuED,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,aAAa,GAAG,KAAK,CAAC,SAAS,CAkG1H"}

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

@@ -0,0 +1,82 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text } from '../../ui.js';
+import { stringWidth } from '../../ink/stringWidth.js';
+import { useTooltip } from '../Tooltip.js';
+function badgeColor(level) {
+    if (level === 'warning')
+        return 'warning';
+    if (level === 'error')
+        return 'error';
+    return 'accent';
+}
+function truncateCells(text, maxCells) {
+    if (stringWidth(text) <= maxCells)
+        return text;
+    let out = '';
+    let cells = 0;
+    for (const char of text) {
+        const width = stringWidth(char);
+        if (cells + width > Math.max(1, maxCells - 1))
+            break;
+        out += char;
+        cells += width;
+    }
+    return out + '…';
+}
+function ActiveTitle({ title, left, width, focused }) {
+    const clipped = stringWidth(title) > width;
+    const tooltip = useTooltip(title);
+    return (_jsx(Box, { position: "absolute", left: left, top: 0, width: width, height: 1, justifyContent: "center", overflow: "hidden", ...(clipped ? tooltip : {}), children: _jsx(Text, { bold: true, color: focused ? 'accent' : 'inactive', wrap: "truncate-end", children: truncateCells(title, width) }) }));
+}
+function PanelDot({ tab, left, width, focused, hovered, onHover, onSelect }) {
+    const tooltip = useTooltip(tab.title);
+    const unread = tab.badge?.unread ?? 0;
+    const label = (tab.badge == null ? '○' : '●') + (unread > 0 ? String(unread) : '');
+    return (_jsx(Box, { position: "absolute", left: left, top: 0, width: width, height: 1, flexShrink: 0, justifyContent: "center", ...tooltip, onMouseEnter: event => { tooltip.onMouseEnter(event); onHover(tab.id); }, onMouseLeave: () => { tooltip.onMouseLeave(); onHover(null); }, onClick: onSelect === undefined ? undefined : event => {
+            event.stopImmediatePropagation();
+            onSelect(tab.id);
+        }, children: _jsx(Text, { bold: hovered, dimColor: !hovered && tab.badge == null && !focused, color: tab.badge != null ? badgeColor(tab.badge.level) : hovered || focused ? 'accent' : undefined, children: label }) }));
+}
+export function PanelBar({ tabs, activeId, width, focused, canExpand, onExpand, onSelect }) {
+    const [expandHovered, setExpandHovered] = React.useState(false);
+    const [hoveredTab, setHoveredTab] = React.useState(null);
+    const activeIndex = Math.max(0, tabs.findIndex(tab => tab.id === activeId));
+    const active = tabs[activeIndex];
+    const hasArrows = tabs.length > 1;
+    const contentWidth = Math.max(0, width - 2);
+    const arrowWidth = hasArrows ? 1 : 0;
+    const expandWidth = canExpand === true ? 2 : 0;
+    const middleStart = arrowWidth;
+    const middleWidth = Math.max(0, contentWidth - arrowWidth * 2 - expandWidth);
+    const dots = [];
+    for (let distance = 1; dots.length < tabs.length - 1; distance += 1) {
+        dots.push({ tab: tabs[(activeIndex + distance) % tabs.length], side: 'right' });
+        if (dots.length < tabs.length - 1) {
+            dots.push({ tab: tabs[(activeIndex - distance + tabs.length) % tabs.length], side: 'left' });
+        }
+    }
+    const dotWidth = Math.max(2, ...dots.map(dot => stringWidth((dot.tab.badge == null ? '○' : '●') + (dot.tab.badge !== undefined && dot.tab.badge !== null && dot.tab.badge.unread > 0 ? String(dot.tab.badge.unread) : ''))));
+    const titleWidth = active === undefined
+        ? 0
+        : Math.max(6, Math.min(stringWidth(active.title), Math.max(6, middleWidth - dots.length * dotWidth)));
+    const pitch = dots.length === 0 ? 0 : Math.max(2, Math.floor((middleWidth - titleWidth) / dots.length));
+    const titleLeft = middleStart + Math.floor((middleWidth - titleWidth) / 2);
+    let rightIndex = 0;
+    let leftIndex = 0;
+    const dotPositions = dots.map(dot => {
+        const index = dot.side === 'right' ? rightIndex++ : leftIndex++;
+        return {
+            ...dot,
+            left: dot.side === 'right'
+                ? titleLeft + titleWidth + index * pitch
+                : titleLeft - (index + 1) * pitch,
+        };
+    });
+    const changePanel = (delta) => {
+        if (active === undefined || tabs.length <= 1)
+            return;
+        onSelect?.(tabs[(activeIndex + delta + tabs.length) % tabs.length].id);
+    };
+    return (_jsx(Box, { height: 1, flexShrink: 0, paddingX: 1, overflow: "hidden", children: _jsxs(Box, { width: contentWidth, height: 1, position: "relative", overflow: "hidden", flexShrink: 0, children: [active !== undefined && _jsx(ActiveTitle, { title: active.title, left: titleLeft, width: titleWidth, focused: focused }), dotPositions.map(dot => (_jsx(PanelDot, { tab: dot.tab, left: dot.left, width: pitch, focused: focused, hovered: hoveredTab === dot.tab.id, onHover: setHoveredTab, onSelect: onSelect }, dot.tab.id))), hasArrows && (_jsxs(_Fragment, { children: [_jsx(Box, { position: "absolute", left: 0, top: 0, width: 1, height: 1, justifyContent: "center", onClick: event => { event.stopImmediatePropagation(); changePanel(-1); }, children: _jsx(Text, { color: focused ? 'accent' : 'inactive', children: "\u25C0" }) }), _jsx(Box, { position: "absolute", left: contentWidth - expandWidth - 1, top: 0, width: 1, height: 1, justifyContent: "center", onClick: event => { event.stopImmediatePropagation(); changePanel(1); }, children: _jsx(Text, { color: focused ? 'accent' : 'inactive', children: "\u25B6" }) })] })), canExpand === true && (_jsx(Box, { position: "absolute", left: contentWidth - 1, top: 0, width: 1, height: 1, onMouseEnter: () => { setExpandHovered(true); }, onMouseLeave: () => { setExpandHovered(false); }, onClick: event => { event.stopImmediatePropagation(); onExpand?.(); }, children: _jsx(Text, { bold: expandHovered, color: expandHovered || focused ? 'accent' : 'inactive', children: "\u2922" }) }))] }) }));
+}

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

@@ -0,0 +1,21 @@
+/**
+ * PanelErrorBoundary（照 PluginStatusViewBoundary 的约定）：出错只隐藏
+ * 该 Panel、记 reportError，同 key 重注册用 registrationId 重挂。插件
+ * Panel 崩溃时，Chat 的输入、流式、工具卡必须完全不受影响——硬要求。
+ */
+import React from 'react';
+interface BoundaryProps {
+    readonly panelId: string;
+    readonly children: React.ReactNode;
+}
+interface BoundaryState {
+    readonly error: Error | null;
+}
+export declare class PanelErrorBoundary extends React.Component<BoundaryProps, BoundaryState> {
+    state: BoundaryState;
+    static getDerivedStateFromError(error: Error): BoundaryState;
+    componentDidCatch(error: Error): void;
+    render(): React.ReactNode;
+}
+export {};
+//# sourceMappingURL=PanelErrorBoundary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelErrorBoundary.d.ts","sourceRoot":"","sources":["../../../../src/components/sidePanel/PanelErrorBoundary.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,UAAU,aAAa;IACrB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CACnC;AAED,UAAU,aAAa;IACrB,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAA;CAC7B;AAED,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,EAAE,aAAa,CAAC;IAC1E,KAAK,EAAE,aAAa,CAAkB;IAE/C,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,aAAa;IAInD,iBAAiB,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAOrC,MAAM,IAAI,KAAK,CAAC,SAAS;CAenC"}

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * PanelErrorBoundary（照 PluginStatusViewBoundary 的约定）：出错只隐藏
+ * 该 Panel、记 reportError，同 key 重注册用 registrationId 重挂。插件
+ * Panel 崩溃时，Chat 的输入、流式、工具卡必须完全不受影响——硬要求。
+ */
+import React from 'react';
+import { Box, Text } from '../../ui.js';
+import { t } from '../../i18n.js';
+import { logError } from '../../utils/log.js';
+import { panelStore } from './PanelStore.js';
+export class PanelErrorBoundary extends React.Component {
+    state = { error: null };
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error) {
+        // 卡片上只显示截断的 message，卸载即失忆——落盘一份带边界的完整
+        // 错误（含堆栈），否则"面板渲染出错"永远无法事后归因。
+        logError(new Error(`side panel "${this.props.panelId}" render error: ${error.message}`, { cause: error }));
+        panelStore.reportError(this.props.panelId, error);
+    }
+    render() {
+        const { error } = this.state;
+        if (error !== null) {
+            return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, alignItems: "center", justifyContent: "center", paddingX: 1, children: [_jsx(Text, { color: "error", children: t('panel-error-title') }), _jsx(Box, { height: 1 }), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: error.message }), _jsx(Box, { height: 1 }), _jsx(Text, { dimColor: true, children: t('panel-error-hint') })] }));
+        }
+        return this.props.children;
+    }
+}

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

@@ -0,0 +1,36 @@
+/**
+ * PanelHost（设计文档 §6.3 + v2.1 修订）：
+ * - 计算 bounds 并以 PanelProps 传入；为 Panel 子树再嵌套一层
+ *   TerminalSizeContext（columns = panel width），现有组件直接放进来
+ *   就能拿到正确宽度。
+ * - 每个 Panel 独立 PanelErrorBoundary（registrationId 重挂）。
+ * - mountPolicy（v2.1）：active=只挂 active（插件默认）；enabled=启用
+ *   即挂载，非 active 时 display:none + focused/visible=false——状态
+ *   保留但不动画、不收键（内置 todo/jobs/agents/companion）。
+ * - 不自动包 ScrollBox（v2.1）：滚动由 Panel 自己决定（右栏内的
+ *   ScrollBox 按命中节点接收滚轮）。
+ * - 打开某 Panel 时清它的 badge（soft follow：后台更新只亮点不切换）。
+ * - 键盘：焦点在右栏时，useSidePanel 先经 SidePanelRuntime.dispatchKey
+ *   问活动 Panel（usePanelInput 注册），Panel 没吃才轮到宿主回退键。
+ * - 不知道 Chat 消息、输入、Thinking、工具。
+ */
+import React from 'react';
+import type { ChannelUi } from '../../adapter/channel/ui-policy.js';
+import type { SidePanelController } from './useSidePanel.js';
+export interface PanelHostProps {
+    readonly controller: SidePanelController;
+    readonly channel: ChannelUi;
+    readonly width: number;
+    readonly height: number;
+    readonly activity?: import('../../dsh-adapter/activity-store.js').ActivityView;
+    readonly attention?: {
+        readonly approvals: number;
+        readonly questions: number;
+    };
+    /** 会话轨迹投影（Chat 折好的那一份；轨迹 Panel 直接渲染）。 */
+    readonly trajectory?: import('../../dsh-adapter/trajectory/index.js').TrajBuild;
+    /** 宿主「全屏」出口（PanelBar 的 ⤢ 经 SidePanelColumn 传进来）。 */
+    readonly openFullscreen?: (panelId: string) => void;
+}
+export declare function PanelHost({ controller, channel, width, height, activity, attention, trajectory, openFullscreen }: PanelHostProps): React.ReactNode;
+//# sourceMappingURL=PanelHost.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelHost.d.ts","sourceRoot":"","sources":["../../../../src/components/sidePanel/PanelHost.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAA;AAKnE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAE5D,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,UAAU,EAAE,mBAAmB,CAAA;IACxC,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAA;IAC3B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,qCAAqC,EAAE,YAAY,CAAA;IAC9E,QAAQ,CAAC,SAAS,CAAC,EAAE;QAAE,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAA;IAC/E,yCAAyC;IACzC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,uCAAuC,EAAE,SAAS,CAAA;IAC/E,oDAAoD;IACpD,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACpD;AA4BD,wBAAgB,SAAS,CAAC,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,cAAc,EAAE,EAAE,cAAc,GAAG,KAAK,CAAC,SAAS,CAiFlJ"}

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

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * PanelHost（设计文档 §6.3 + v2.1 修订）：
+ * - 计算 bounds 并以 PanelProps 传入；为 Panel 子树再嵌套一层
+ *   TerminalSizeContext（columns = panel width），现有组件直接放进来
+ *   就能拿到正确宽度。
+ * - 每个 Panel 独立 PanelErrorBoundary（registrationId 重挂）。
+ * - mountPolicy（v2.1）：active=只挂 active（插件默认）；enabled=启用
+ *   即挂载，非 active 时 display:none + focused/visible=false——状态
+ *   保留但不动画、不收键（内置 todo/jobs/agents/companion）。
+ * - 不自动包 ScrollBox（v2.1）：滚动由 Panel 自己决定（右栏内的
+ *   ScrollBox 按命中节点接收滚轮）。
+ * - 打开某 Panel 时清它的 badge（soft follow：后台更新只亮点不切换）。
+ * - 键盘：焦点在右栏时，useSidePanel 先经 SidePanelRuntime.dispatchKey
+ *   问活动 Panel（usePanelInput 注册），Panel 没吃才轮到宿主回退键。
+ * - 不知道 Chat 消息、输入、Thinking、工具。
+ */
+import React from 'react';
+import { Box, Text } from '../../ui.js';
+import { t } from '../../i18n.js';
+import { TerminalSizeContext } from '../../ink/components/TerminalSizeContext.js';
+import { useTerminalSize } from '../../ink/hooks/use-terminal-size.js';
+import { panelStore } from './PanelStore.js';
+import { PanelContext, SidePanelRuntimeContext } from './SidePanelRuntimeContext.js';
+import { PanelErrorBoundary } from './PanelErrorBoundary.js';
+function TooNarrow({ minColumns }) {
+    return (_jsx(Box, { flexDirection: "column", flexGrow: 1, alignItems: "center", justifyContent: "center", paddingX: 1, children: _jsx(Text, { dimColor: true, wrap: "truncate-end", children: t('panel-too-narrow', { min: minColumns }) }) }));
+}
+/** 插件 Panel 连续崩溃后的会话内禁用卡（§18.4）：不再挂载插件组件，只
+ * 提示原因；toast 一次（每 Panel 每会话）。 */
+const disabledToasted = new Set();
+function PluginDisabled({ panelId, channel }) {
+    React.useEffect(() => {
+        if (disabledToasted.has(panelId))
+            return;
+        disabledToasted.add(panelId);
+        channel.notify(t('panel-plugin-disabled-toast'));
+    }, [panelId, channel]);
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: 1, alignItems: "center", justifyContent: "center", paddingX: 1, children: [_jsx(Text, { color: "warning", children: t('panel-plugin-disabled') }), _jsx(Box, { height: 1 }), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: t('panel-plugin-disabled-hint') })] }));
+}
+export function PanelHost({ controller, channel, width, height, activity, attention, trajectory, openFullscreen }) {
+    const entries = React.useSyncExternalStore(panelStore.subscribe, () => panelStore.list());
+    // Forward the real screen rows so panel animations (useAnimationFrame →
+    // useTerminalViewport) measure visibility against the screen, not the
+    // host's narrowed rows.
+    const parentSize = useTerminalSize();
+    const screenRows = parentSize.screenRows ?? parentSize.rows;
+    const enabledIds = controller.enabledPanelIds;
+    // 只画「已启用 ∩ 已注册」的 Panel，顺序 = 设置里的启用顺序。
+    const visibleEntries = React.useMemo(() => enabledIds
+        .map(id => entries.find(entry => entry.definition.id === id))
+        .filter((entry) => entry !== undefined), [enabledIds, entries]);
+    const activeEntry = visibleEntries.find(entry => entry.definition.id === controller.activePanelId)
+        ?? visibleEntries[0];
+    // Soft follow：后台更新只亮 PanelBar 状态点；用户打开该 Panel 时清零。
+    const activeId = activeEntry?.definition.id;
+    React.useEffect(() => {
+        if (activeId !== undefined)
+            panelStore.clearBadge(activeId);
+    }, [activeId]);
+    const mode = controller.zoom ? 'zoom' : 'split';
+    const runtimeContext = React.useMemo(() => ({ runtime: controller.runtime, channel, activity, attention, trajectory, openFullscreen }), [controller.runtime, channel, activity, attention, trajectory, openFullscreen]);
+    return (_jsx(SidePanelRuntimeContext.Provider, { value: runtimeContext, children: visibleEntries.map(entry => {
+            const def = entry.definition;
+            const isActive = activeEntry !== undefined && def.id === activeEntry.definition.id;
+            if (!isActive && def.mountPolicy !== 'enabled')
+                return null;
+            if (entry.disabled === true) {
+                return (_jsx(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", display: isActive ? 'flex' : 'none', children: _jsx(PluginDisabled, { panelId: def.id, channel: channel }) }, def.id));
+            }
+            const tooNarrow = def.minColumns !== undefined && width < def.minColumns;
+            const body = tooNarrow ? (_jsx(TooNarrow, { minColumns: def.minColumns })) : (_jsx(PanelErrorBoundary, { panelId: def.id, children: _jsx(PanelContext.Provider, { value: { panelId: def.id }, children: _jsx(TerminalSizeContext.Provider, { value: { columns: width, rows: height, screenRows }, children: React.createElement(def.component, {
+                            width,
+                            height,
+                            focused: controller.focus === 'panel' && isActive,
+                            visible: isActive,
+                            mode,
+                        }) }) }) }, entry.registrationId));
+            return (_jsx(Box, { flexDirection: "column", flexGrow: 1, overflow: "hidden", display: isActive ? 'flex' : 'none', children: body }, def.id));
+        }) }));
+}

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

@@ -0,0 +1,24 @@
+/**
+ * /panel 无参的面板选择器：Pane + Select 行列出「已启用 ∩ 已注册」的
+ * 面板（内置与插件同席——图标、标题、badge 状态点都来自 PanelStore），
+ * 当前活动面板带 current 标记。Enter 打开并聚焦，Esc 取消。
+ */
+import React from 'react';
+import type { SidePanelController } from './useSidePanel.js';
+export interface PanelPickerRow {
+    readonly id: string;
+    readonly title: string;
+    readonly icon?: string;
+    readonly badge?: {
+        readonly level: 'info' | 'warning' | 'error';
+        readonly unread: number;
+    } | null;
+}
+export declare function usePanelPickerRows(controller: SidePanelController): readonly PanelPickerRow[];
+export declare function PanelPicker({ rows, focusIndex, activeId, onPick, }: {
+    readonly rows: readonly PanelPickerRow[];
+    readonly focusIndex: number;
+    readonly activeId: string | undefined;
+    readonly onPick?: (index: number) => void;
+}): React.ReactNode;
+//# sourceMappingURL=PanelPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/sidePanel/PanelPicker.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAE5D,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,CAAC,EAAE;QAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;QAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;CAClG;AAcD,wBAAgB,kBAAkB,CAAC,UAAU,EAAE,mBAAmB,GAAG,SAAS,cAAc,EAAE,CAW7F;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,MAAM,GACP,EAAE;IACD,QAAQ,CAAC,IAAI,EAAE,SAAS,cAAc,EAAE,CAAA;IACxC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAA;IACrC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAC1C,GAAG,KAAK,CAAC,SAAS,CAgClB"}

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * /panel 无参的面板选择器：Pane + Select 行列出「已启用 ∩ 已注册」的
+ * 面板（内置与插件同席——图标、标题、badge 状态点都来自 PanelStore），
+ * 当前活动面板带 current 标记。Enter 打开并聚焦，Esc 取消。
+ */
+import React from 'react';
+import { Box, Text } from '../../ui.js';
+import { t } from '../../i18n.js';
+import { Pane } from '../design-system/Pane.js';
+import { Select } from '../Select.js';
+import { HintLine } from '../design-system/HintLine.js';
+import { panelStore } from './PanelStore.js';
+function badgeGlyph(level) {
+    if (level === 'warning')
+        return '!';
+    if (level === 'error')
+        return '×';
+    return '●';
+}
+function badgeColor(level) {
+    if (level === 'warning')
+        return 'warning';
+    if (level === 'error')
+        return 'error';
+    return 'accent';
+}
+export function usePanelPickerRows(controller) {
+    const entries = React.useSyncExternalStore(panelStore.subscribe, () => panelStore.list());
+    return controller.enabledPanelIds
+        .map(id => entries.find(entry => entry.definition.id === id))
+        .filter((entry) => entry !== undefined)
+        .map(entry => ({
+        id: entry.definition.id,
+        title: entry.definition.titleKey !== undefined ? t(entry.definition.titleKey) : entry.definition.title ?? entry.definition.id,
+        icon: entry.definition.icon,
+        badge: entry.badge,
+    }));
+}
+export function PanelPicker({ rows, focusIndex, activeId, onPick, }) {
+    return (_jsx(Pane, { color: "accent", children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "remember", bold: true, children: t('picker-title-panel') }) }), _jsx(Select, { options: rows.map(row => ({
+                        value: row.id,
+                        label: (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: (row.icon ?? row.title.slice(0, 1)) + ' ' }), row.title, row.badge != null && (_jsx(Text, { color: badgeColor(row.badge.level), children: ' ' + badgeGlyph(row.badge.level) }))] })),
+                    })), focusIndex: focusIndex, selectedValue: activeId, onPick: onPick }), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: t('hint-confirm-exit') }) })] }) }));
+}

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

@@ -0,0 +1,57 @@
+/**
+ * PanelStore：Panel 定义 + 运行时状态（badge / 最近错误）一个 store
+ * （设计文档 §6.4 / §16.2——注册即有 badge 槽，释放即清，没有第二条
+ * 内置专用路径；插件 API 只是给它加准入外壳）。
+ *
+ * 通知不轮询：各业务 store（channel / BackgroundJobStore / …）的订阅
+ * 回调里由 Adapter 调 setBadge。有界：每 Panel 一条 badge，无历史列表，
+ * unread 饱和到 99。
+ */
+import type { PanelBadge, PanelDefinition, PanelEntry, PanelOwner } from './types.js';
+export declare const PANEL_UNREAD_CAP = 99;
+/** 连续崩溃禁用阈值（会话内，时间窗内累计；设计文档 §18.4）。 */
+export declare const PANEL_CRASH_DISABLE_THRESHOLD = 3;
+/** 崩溃计数的滑动时间窗。 */
+export declare const PANEL_CRASH_WINDOW_MS = 60000;
+/** PanelStore 对外事件（subscribe 的 listener 参数；useSyncExternalStore
+ *  的 () => void 订阅者可安全忽略）。opened/closed/focused/blurred 等
+ *  useSidePanel 侧的事件本阶段尚未接入（TODO §18.3）。 */
+export type PanelStoreEvent = {
+    readonly type: 'registered';
+    readonly id: string;
+} | {
+    readonly type: 'unregistered';
+    readonly id: string;
+} | {
+    readonly type: 'badge';
+    readonly id: string;
+} | {
+    readonly type: 'error';
+    readonly id: string;
+} | {
+    readonly type: 'disabled';
+    readonly id: string;
+};
+export declare class PanelStore {
+    private entries;
+    private listeners;
+    private snapshot;
+    private sequence;
+    /** source='plugin' 的连续崩溃时间戳（会话内；注册/重注册即清零）。 */
+    private crashTimes;
+    /** 重复 id → DUPLICATE_CONTRIBUTION_ID（与 tuiStatus 同一约定）。 */
+    register(definition: PanelDefinition, owner: PanelOwner): () => void;
+    list(): readonly PanelEntry[];
+    get(id: string): PanelEntry | undefined;
+    /** 只允许 owner 或宿主调用（调用侧自律，与 tuiStatus 相同）。
+     *  level/unread 都没变时不通知：适配器在每次 channel 变化（流式时每个
+     *  delta）都会调这里，每次通知都会让订阅 list() 的宿主重渲染。 */
+    setBadge(id: string, badge: Omit<PanelBadge, 'latestAt'> | null): void;
+    clearBadge(id: string): void;
+    reportError(id: string, error: unknown): void;
+    subscribe: (listener: (event: PanelStoreEvent) => void) => (() => void);
+    private emit;
+}
+/** 进程级单例（内置经 registerBuiltinPanels，插件经 Phase 6 的准入外壳）。 */
+export declare const panelStore: PanelStore;
+//# sourceMappingURL=PanelStore.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelStore.d.ts","sourceRoot":"","sources":["../../../../src/components/sidePanel/PanelStore.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAErF,eAAO,MAAM,gBAAgB,KAAK,CAAA;AAElC,uCAAuC;AACvC,eAAO,MAAM,6BAA6B,IAAI,CAAA;AAC9C,kBAAkB;AAClB,eAAO,MAAM,qBAAqB,QAAS,CAAA;AAE3C;;4CAE4C;AAC5C,MAAM,MAAM,eAAe,GACvB;IAAE,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAC;IAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GACpD;IAAE,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAC;IAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GACtD;IAAE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC/C;IAAE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC/C;IAAE,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;IAAC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAA;AAatD,qBAAa,UAAU;IACrB,OAAO,CAAC,OAAO,CAAgC;IAC/C,OAAO,CAAC,SAAS,CAA8C;IAC/D,OAAO,CAAC,QAAQ,CAA2C;IAC3D,OAAO,CAAC,QAAQ,CAAI;IACpB,+CAA+C;IAC/C,OAAO,CAAC,UAAU,CAA8B;IAEhD,2DAA2D;IAC3D,QAAQ,CAAC,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,UAAU,GAAG,MAAM,IAAI;IA0BpE,IAAI,IAAI,SAAS,UAAU,EAAE;IAI7B,GAAG,CAAC,EAAE,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS;IAIvC;;+CAE2C;IAC3C,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC,GAAG,IAAI,GAAG,IAAI;IAWtE,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAO5B,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAsB7C,SAAS,GAAI,UAAU,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,KAAG,CAAC,MAAM,IAAI,CAAC,CAGrE;IAED,OAAO,CAAC,IAAI;CAIb;AAED,0DAA0D;AAC1D,eAAO,MAAM,UAAU,YAAmB,CAAA"}