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

package/lib/types/components/Chat/JobCard.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import { Box, Text, useAnimationFrame, useTerminalSize } from '../../ui.js';
 import { formatJobDuration } from '../../dsh-adapter/jobs.js';
 import { t } from '../../i18n.js';
+import wrapText from '../../ink/wrap-text.js';
 import { stringWidth } from '../../ink/stringWidth.js';
 import { isMinimalUiMode } from '../../minimalUiMode.js';
 import { ProgressBar } from '../design-system/ProgressBar.js';
@@ -46,23 +47,34 @@ export function JobProgress({ progress }) {
     }
     return (_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(ProgressBar, { ratio: Math.min(current, total) / total, width: 5, fillColor: "accent", emptyColor: "inactive" }), _jsx(Text, { color: "accent", children: progress.trim() })] }));
 }
-/** Hard single-line clip by display width — a wrapped waterfall row would
- *  break the constant-height window. */
-function clipLine(text, maxWidth) {
-    if (maxWidth <= 1)
-        return '';
-    let width = 0;
-    let index = 0;
-    while (index < text.length) {
-        const next = text.codePointAt(index);
-        const char = String.fromCodePoint(next);
-        const charWidth = stringWidth(char);
-        if (width + charWidth > maxWidth - 1)
-            break;
-        width += charWidth;
-        index += char.length;
+/**
+ * The waterfall window: every entry is WRAPPED at the card width FIRST, then
+ * the last `budget` VISUAL rows are kept. A 400-cell JSON line therefore
+ * shows its ending folded over the rows instead of a clipped head — and the
+ * window still costs a constant number of rows, which is what the
+ * transcript's virtualization measures.
+ */
+function waterfallWindow(entries, width, budget) {
+    const rows = [];
+    // One cell of slack: a line that lands exactly on the boundary is re-wrapped
+    // by ink's own renderer, which would silently double that row's height.
+    const textWidth = Math.max(1, width - 1);
+    for (let index = entries.length - 1; index >= 0 && rows.length < budget; index--) {
+        const entry = entries[index];
+        if (entry.kind === 'gap') {
+            rows.unshift({ key: `gap-${index}`, text: '', gap: true });
+            continue;
+        }
+        const wrapped = wrapText(entry.line.text, textWidth, 'wrap').split('\n');
+        for (let row = wrapped.length - 1; row >= 0 && rows.length < budget; row--) {
+            rows.unshift({
+                key: `${index}-${row}`,
+                text: wrapped[row] ?? '',
+                ...(entry.line.channel === undefined ? {} : { channel: entry.line.channel }),
+            });
+        }
     }
-    return index < text.length ? `${text.slice(0, index)}…` : text;
+    return rows;
 }
 /**
  * Live background-job card embedded in the transcript (`kind: 'job'`),
@@ -78,8 +90,20 @@ function clipLine(text, maxWidth) {
  * is consuming and reserved for the owning agent, so the card shows the
  * tail of the agent's own job_output results as they stream through the
  * transcript.
+ *
+ * `rail` marks the card as a member of a job GROUP (see JobGroupRow): the
+ * card gets a 2-cell chain column on its left, and `rail.open` / `rail.close`
+ * round its ends (`╭` on the first line, `╰` on the last) so the run reads as
+ * one bracket from the first card to the last — the group's summary line stays
+ * OUTSIDE it. A lone card renders as before.
+ *
+ * The rail is drawn per line, which means this component owns the card's
+ * HEIGHT: the label is pre-wrapped against an explicit column width (so the
+ * wrap count is known, not guessed from the flex result), and the rail column
+ * paints exactly that many glyphs. Both use ink's own `wrapText`/`stringWidth`,
+ * so the pre-wrap breaks where the renderer would have broken.
  */
-export function JobCard({ job, marginTopOnTurn, onClick }) {
+export function JobCard({ job, marginTopOnTurn, onClick, rail }) {
     const settled = job.status === 'completed' || job.status === 'failed' || job.status === 'killed';
     // 动画订阅仅限存活卡片：settled 后退订共享 clock（同 SubagentMessage 的
     // 约定）。1s tick 只驱动运行时长跳动——状态标是静态的（见 statusInfo）。
@@ -88,7 +112,13 @@ export function JobCard({ job, marginTopOnTurn, onClick }) {
     const info = statusInfo(job.status);
     const [hovered, setHovered] = React.useState(false);
     const clickable = onClick !== undefined;
-    const rowWidth = Math.max(20, (columns ?? 80) - WATERFALL_GUTTER);
+    const grouped = rail !== undefined;
+    const cardColumns = columns ?? 80;
+    // A grouped card spends two columns on the rail — the glyph column plus its
+    // 1-cell gutter. Every width below is measured against that, or the rows
+    // would wrap a second time inside ink and the card would grow past the
+    // height the rail was painted for.
+    const rowWidth = Math.max(20, cardColumns - WATERFALL_GUTTER - (grouped ? 2 : 0));
     // Waterfall entries: gap banners interleave as their own rows, then the
     // window keeps the LAST WATERFALL_ROWS entries so a banner never pushes a
     // fresher line out — the card stays constant-height.
@@ -98,7 +128,7 @@ export function JobCard({ job, marginTopOnTurn, onClick }) {
             waterfall.push({ kind: 'gap' });
         waterfall.push({ kind: 'line', line });
     }
-    const activity = waterfall.slice(-WATERFALL_ROWS);
+    const activity = waterfallWindow(waterfall, rowWidth, WATERFALL_ROWS);
     // A settled job's terminal detail ('exit code: 0') rides the header; a
     // failed/killed one also keeps it as the explanatory tail line.
     const headerDetail = job.detail !== undefined && job.detail !== '' ? job.detail : undefined;
@@ -107,14 +137,52 @@ export function JobCard({ job, marginTopOnTurn, onClick }) {
     // Only a LIVE job carries a progress chip; a settled one has dropped it, so
     // reserving width for it unconditionally would clip the label for nothing.
     const liveProgress = settled || job.progress === undefined || job.progress === '' ? undefined : job.progress;
+    // A grouped card paints its rail line by line, so its HEIGHT must be known
+    // before the render: measure every fixed column and pre-wrap the label into
+    // whatever is left. The label column is then given that width EXPLICITLY —
+    // never a flex leftover — so the pre-wrapped line count is exactly what the
+    // renderer paints (both sides use ink's own wrapText/stringWidth, so the
+    // breaks match the ones a plain wrapping Text would have chosen).
+    const railBody = settled && job.status !== 'completed' && headerDetail !== undefined;
+    const fixedWidths = [
+        stringWidth(info.glyph),
+        stringWidth(headerName),
+        stringWidth(job.kind),
+        ...(liveProgress === undefined ? [] : [12]),
+        stringWidth(duration),
+        ...(headerDetail === undefined ? [] : [stringWidth(headerDetail)]),
+        stringWidth(info.label),
+    ];
+    // One gap between each pair of columns: (fixed + label) - 1 = fixed count.
+    const labelWidth = Math.max(8, cardColumns - (grouped ? 2 : 0) - fixedWidths.reduce((sum, width) => sum + width, 0) - fixedWidths.length);
+    // wrapText returns the wrapped STRING (newline separated), so the line
+    // count comes straight out of it.
+    const labelLines = grouped ? wrapText(job.label, labelWidth, 'wrap').split('\n') : undefined;
+    const contentLines = (labelLines?.length ?? 1) + activity.length + (railBody ? 1 : 0);
+    const railGlyphs = [];
+    if (grouped) {
+        for (let index = 0; index < contentLines; index++) {
+            const opens = index === 0 && rail?.open === true;
+            const closes = index === contentLines - 1 && rail?.close === true;
+            railGlyphs.push(opens ? '╭' : closes ? '╰' : '│');
+        }
+    }
     // 点击打开 /jobs 面板；hover 不刷整行背景（转录视觉保持安静），只把
     // 状态 glyph 提亮为品牌色作为可点指示。无外层缩进：任务卡是上方工具
     // 调用（run_in_background 卡）的延续，与工具卡通栏左对齐；子代理卡才
     // 是嵌套子实体、保留缩进。瀑布的 `  │ ` 槽自带两格，正好与工具卡正文
     // 的 `  ⎿ ` 槽位一致。
-    return _jsxs(Box, { flexDirection: "column", marginTop: marginTopOnTurn ? 1 : 0, ref: viewportRef, onClick: onClick, onMouseEnter: clickable ? () => setHovered(true) : undefined, onMouseLeave: clickable ? () => setHovered(false) : undefined, children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: hovered && clickable ? 'accent' : info.color, children: info.glyph }), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { bold: true, color: hovered && clickable ? 'accent' : undefined, children: headerName }) }), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { dimColor: true, children: job.kind }) }), _jsx(Box, { flexGrow: 1, flexShrink: 1, children: _jsx(Text, { wrap: "truncate-end", children: job.label }) }), liveProgress !== undefined && (_jsx(Box, { width: 12, flexShrink: 0, children: _jsx(JobProgress, { progress: liveProgress }) })), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { dimColor: true, children: duration }) }), headerDetail !== undefined && _jsx(Box, { flexShrink: 0, children: _jsx(Text, { dimColor: true, wrap: "truncate-end", children: headerDetail }) }), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: info.color, children: info.label }) })] }), !settled && activity.length > 0 && activity.map((entry, index) => (
+    //
+    // 成组时的竖线不在 body 里：继续中的成员把 body 包进一个只有左边框的
+    // Box（见下方 bordered），边框覆盖整张卡的每一行——标签折行出的续行也
+    // 有线，链条不断。收口的尾成员用 `└ ` 字形 + 2 格空槽，两者都把正文
+    // 落在第 2 列。
+    const body = (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: hovered && clickable ? 'accent' : info.color, children: info.glyph }) }), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { bold: true, color: hovered && clickable ? 'accent' : undefined, children: headerName }) }), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { dimColor: true, children: job.kind }) }), labelLines === undefined ? (_jsx(Box, { flexGrow: 1, flexShrink: 1, children: _jsx(Text, { children: job.label }) })) : (_jsx(Box, { width: labelWidth, flexShrink: 0, flexDirection: "column", children: labelLines.map((line, index) => _jsx(Text, { children: line }, index)) })), liveProgress !== undefined && (_jsx(Box, { width: 12, flexShrink: 0, children: _jsx(JobProgress, { progress: liveProgress }) })), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { dimColor: true, children: duration }) }), headerDetail !== undefined && _jsx(Box, { flexShrink: 0, children: _jsx(Text, { dimColor: true, wrap: "truncate-end", children: headerDetail }) }), _jsx(Box, { flexShrink: 0, children: _jsx(Text, { color: info.color, children: info.label }) })] }), !settled && activity.length > 0 && activity.map(entry => (
             // key 不含 time（同 SubagentMessage 的约定）：内容更新走 in-place
             // diff，避免每个 tick 都 unmount+mount。瀑布只在有镜像输出时出现
             // （后台任务静默是常态——无输出时卡片就是头行，不摆空 gutter）。
-            entry.kind === 'gap' ? (_jsx(Text, { dimColor: true, italic: true, wrap: "truncate", children: `  · ${clipLine(t('jobs-output-gap'), rowWidth)}` }, `${job.id}-wf-gap-${index}`)) : (_jsx(Text, { color: entry.line.channel === 'stderr' ? 'error' : undefined, dimColor: entry.line.channel !== 'stderr', wrap: "truncate", children: `  │ ${clipLine(entry.line.text, rowWidth)}` }, `${job.id}-wf-${index}`)))), settled && job.status !== 'completed' && headerDetail !== undefined && (_jsx(Text, { dimColor: true, wrap: "truncate", children: `  └ ${clipLine(headerDetail, rowWidth)}` }))] });
+            // Rows are pre-wrapped to the row width, so truncate is a belt-and-braces
+            // guard against a re-wrap (which would break the constant height).
+            entry.gap === true ? (_jsx(Text, { dimColor: true, italic: true, wrap: "truncate", children: `  · ${t('jobs-output-gap')}` }, entry.key)) : (_jsx(Text, { color: entry.channel === 'stderr' ? 'error' : undefined, dimColor: entry.channel !== 'stderr', wrap: "truncate", children: `  │ ${entry.text}` }, entry.key)))), railBody && (_jsx(Text, { dimColor: true, children: `  └ ${headerDetail}` }))] }));
+    return _jsx(Box, { flexDirection: "column", marginTop: marginTopOnTurn ? 1 : 0, ref: viewportRef, onClick: onClick, onMouseEnter: clickable ? () => setHovered(true) : undefined, onMouseLeave: clickable ? () => setHovered(false) : undefined, children: grouped ? (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 1, flexShrink: 0, children: _jsx(Text, { color: "inactive", children: railGlyphs.join('\n') }) }), _jsx(Box, { flexDirection: "column", flexGrow: 1, paddingLeft: 1, children: body })] })) : body });
 }

package/lib/types/components/Chat/JobGroupHeader.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { JobGroupRow } from '../../adapter/ports/channel-view.js';
+/**
+ * Header line of a consecutive-job group (`row.jobGroup`): the run summary
+ * while the group is open, and the fold line once it is closed.
+ *
+ *   ▾ 后台任务 ×6 · 2 运行中 · 4 已完成 · 合计 12.3s
+ *   ▸ 已折叠 6 个后台任务 · 4 已完成 · 2 失败 · 合计 12.3s · 点击展开
+ *
+ * The fold line keeps the header's row and glyph slot, so a settling group
+ * reads as the SAME block tucking its body away (the thinking/compact fold
+ * convention) instead of a new row appearing. The whole line is clickable
+ * and brightens on hover — the same mouse gesture the job cards use — and
+ * Ctrl+O expands every group at once.
+ *
+ * The summary line sits OUTSIDE the group's rail: the cards below it carry
+ * the bracket (`╭` on the first card, `╰` on the last), so this line reads as
+ * the run's title rather than its first row.
+ *
+ * Failures stay LOUD while folded: the failed/killed counts are painted in
+ * the error color, because folding must never bury a job that died.
+ */
+export declare function JobGroupHeader({ group, onToggle }: {
+    group: JobGroupRow;
+    onToggle?(): void;
+}): React.ReactNode;
+//# sourceMappingURL=JobGroupHeader.d.ts.map

package/lib/types/components/Chat/JobGroupHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JobGroupHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/JobGroupHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAA;AAQtE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAClD,KAAK,EAAE,WAAW,CAAA;IAClB,QAAQ,CAAC,IAAI,IAAI,CAAA;CAClB,GAAG,KAAK,CAAC,SAAS,CAoElB"}

package/lib/types/components/Chat/JobGroupHeader.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Text, useAnimationFrame } from '../../ui.js';
+import { formatJobDuration } from '../../dsh-adapter/jobs.js';
+import { t } from '../../i18n.js';
+import { isMinimalUiMode } from '../../minimalUiMode.js';
+/**
+ * Header line of a consecutive-job group (`row.jobGroup`): the run summary
+ * while the group is open, and the fold line once it is closed.
+ *
+ *   ▾ 后台任务 ×6 · 2 运行中 · 4 已完成 · 合计 12.3s
+ *   ▸ 已折叠 6 个后台任务 · 4 已完成 · 2 失败 · 合计 12.3s · 点击展开
+ *
+ * The fold line keeps the header's row and glyph slot, so a settling group
+ * reads as the SAME block tucking its body away (the thinking/compact fold
+ * convention) instead of a new row appearing. The whole line is clickable
+ * and brightens on hover — the same mouse gesture the job cards use — and
+ * Ctrl+O expands every group at once.
+ *
+ * The summary line sits OUTSIDE the group's rail: the cards below it carry
+ * the bracket (`╭` on the first card, `╰` on the last), so this line reads as
+ * the run's title rather than its first row.
+ *
+ * Failures stay LOUD while folded: the failed/killed counts are painted in
+ * the error color, because folding must never bury a job that died.
+ */
+export function JobGroupHeader({ group, onToggle }) {
+    const minimalUi = isMinimalUiMode();
+    const [hovered, setHovered] = React.useState(false);
+    // Only a LIVE group ticks: its elapsed keeps counting. A settled group's
+    // duration is frozen, so it must not keep re-rendering the row.
+    const [tickRef] = useAnimationFrame(group.running > 0 ? 1000 : null);
+    const clickable = onToggle !== undefined;
+    const duration = formatJobDuration({
+        startedAt: group.startedAt,
+        ...(group.endedAt === undefined ? {} : { finishedAt: group.endedAt }),
+    });
+    const chipColor = (color) => minimalUi ? undefined : color;
+    const chips = [];
+    if (group.running > 0)
+        chips.push({ key: 'running', text: t('jobs-group-running', { count: group.running }), color: chipColor('warning') });
+    if (group.failed > 0)
+        chips.push({ key: 'failed', text: t('jobs-group-failed', { count: group.failed }), color: chipColor('error') });
+    if (group.killed > 0)
+        chips.push({ key: 'killed', text: t('jobs-group-killed', { count: group.killed }), color: chipColor('error') });
+    if (group.folded && group.running === 0 && group.failed === 0 && group.killed === 0) {
+        // Folded and clean: "全部完成" says more than "6 已完成" — the group is
+        // the unit being reported on now.
+        chips.push({ key: 'all', text: t('jobs-group-all-completed'), color: chipColor('success') });
+    }
+    else if (group.completed > 0) {
+        chips.push({ key: 'completed', text: t('jobs-group-completed', { count: group.completed }), color: undefined });
+    }
+    // The mouse affordance: a folded line always teaches the way back in; an
+    // open group only says it while hovered (its ▾ already carries the hint).
+    const hint = group.folded
+        ? t('jobs-group-hint-expand')
+        : hovered && clickable ? t('jobs-group-hint-fold') : undefined;
+    return (_jsxs(Box, { flexDirection: "row", gap: 1, ref: tickRef, onClick: clickable ? onToggle : undefined, onMouseEnter: clickable ? () => setHovered(true) : undefined, onMouseLeave: clickable ? () => setHovered(false) : undefined, children: [_jsx(Text, { color: hovered && clickable && !minimalUi ? 'accent' : 'inactive', children: group.folded ? '▸' : '▾' }), _jsx(Text, { wrap: "truncate-end", color: hovered && clickable ? 'text' : undefined, dimColor: !(hovered && clickable), children: group.folded
+                    ? t('jobs-group-folded', { count: group.count })
+                    : t('jobs-group-title', { count: group.count }) }), chips.map(chip => (_jsxs(React.Fragment, { children: [_jsx(Text, { color: "inactive", children: "\u00B7" }), _jsx(Text, { color: chip.color, dimColor: chip.color === undefined, children: chip.text })] }, chip.key))), _jsx(Text, { color: "inactive", children: "\u00B7" }), _jsx(Text, { dimColor: true, children: t('jobs-group-elapsed', { duration }) }), hint !== undefined && (_jsxs(React.Fragment, { children: [_jsx(Text, { color: "inactive", children: "\u00B7" }), _jsx(Text, { color: group.folded ? 'inactive' : 'accent', children: hint })] }))] }));
+}

package/lib/types/components/GoalTodoPanel.d.ts

@@ -28,11 +28,23 @@ export declare function GoalStatusChip({ goal, minimal }: {
  * id first appears, frozen on completion) — deliberately not derived from
  * session-event timestamps.
  */
-export declare function GoalTodoPanel({ channel, collapsed, onToggle, }: {
+export declare function GoalTodoPanel({ channel, collapsed, onToggle, variant, visible, maxTodos, wrapWidth, }: {
     channel: Channel;
     /** Fold the whole todo section to its summary header line. */
     collapsed?: boolean;
     /** Toggle the fold (click on the header row; shares the hotkey state). */
     onToggle?: () => void;
+    /** 'panel' = 侧栏 Todo Panel 形态：更紧凑（去外层 padding 与折叠
+     *  提示行），计时走共享动画时钟（visible=false 时零订阅）。 */
+    variant?: 'default' | 'panel';
+    /** 侧栏 visible 契约：非 active Panel 时 false——暂停本地计时，
+     *  store（channel.goal/todos）照常更新，重新打开直接读最新值。 */
+    visible?: boolean;
+    /** 覆盖 MAX_TODOS（panel variant 按宿主高度传入）。 */
+    maxTodos?: number;
+    /** panel variant：todo 行按此宽度折行——单条最多 2 行，超出部分截断
+     *  加省略号；maxTodos 预算按「行」折算，放不下仍走「…N more」。缺省
+     *  （default 形态）不折行，保持单行 truncate 的 chat 页现状。 */
+    wrapWidth?: number;
 }): React.ReactNode;
 //# sourceMappingURL=GoalTodoPanel.d.ts.map

package/lib/types/components/GoalTodoPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GoalTodoPanel.d.ts","sourceRoot":"","sources":["../../../src/components/GoalTodoPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,SAAS,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAA;AAC3E,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,2BAA2B,CAAA;AAmC3E;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,OAAe,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,SAAS,CAQnH;AA2CD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,SAAiB,EACjB,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB,GAAG,KAAK,CAAC,SAAS,CAwIlB"}
+{"version":3,"file":"GoalTodoPanel.d.ts","sourceRoot":"","sources":["../../../src/components/GoalTodoPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,KAAK,EAAE,SAAS,IAAI,OAAO,EAAE,MAAM,iCAAiC,CAAA;AAC3E,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,2BAA2B,CAAA;AAmC3E;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,OAAe,EAAE,EAAE;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GAAG,KAAK,CAAC,SAAS,CAQnH;AA2CD;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,SAAiB,EACjB,QAAQ,EACR,OAAmB,EACnB,OAAc,EACd,QAAQ,EACR,SAAS,GACV,EAAE;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB;8CAC0C;IAC1C,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B;oDACgD;IAChD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;oDAEgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,KAAK,CAAC,SAAS,CAiMlB"}

package/lib/types/components/GoalTodoPanel.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { Box, Text, useAnimationFrame } from '../ui.js';
+import wrapText from '../ink/wrap-text.js';
 import { t } from '../i18n.js';
 import { primaryComboString } from '../utils/keymap.js';
 /** Maximum todo rows shown before the overflow line. */
@@ -82,16 +83,22 @@ function BranchPrefix({ last }) {
  * id first appears, frozen on completion) — deliberately not derived from
  * session-event timestamps.
  */
-export function GoalTodoPanel({ channel, collapsed = false, onToggle, }) {
+export function GoalTodoPanel({ channel, collapsed = false, onToggle, variant = 'default', visible = true, maxTodos, wrapWidth, }) {
     const goal = channel.goal;
     const allTodos = channel.todos ?? [];
     const doneCount = allTodos.filter(todo => todo.status === 'completed').length;
     // Completed rows are useful progress while a turn is running, but become
     // stale footer noise once the agent is idle. Keep unfinished work visible;
     // the header count carries the done summary either way.
-    const todos = channel.working
+    // panel 形态不自动隐藏完成行：侧栏折叠头常驻显示 ✓ done/total，用户
+    // 「点开」是显式展开动作——idle 时把完成行过滤光就是「明明有 9 个、
+    // 点开一条都没有」（完成行以 dim 呈现，进度语义不丢）。default 形态
+    // （chat 页底部 chrome）保留原 auto-fold。
+    const todos = variant === 'panel'
         ? allTodos
-        : allTodos.filter(todo => todo.status !== 'completed');
+        : channel.working
+            ? allTodos
+            : allTodos.filter(todo => todo.status !== 'completed');
     // Local goal timer: remember when this goal id first rendered. Written in
     // render (idempotent lazy ref init) so a fresh mount with a live goal
     // starts counting immediately.
@@ -102,30 +109,64 @@ export function GoalTodoPanel({ channel, collapsed = false, onToggle, }) {
     const [now, setNow] = React.useState(() => Date.now());
     // Hover tint for the clickable todo fold header (mouse affordance).
     const [headerHovered, setHeaderHovered] = React.useState(false);
+    const goalOpen = goal !== undefined && goal.phase !== 'complete';
+    // Panel 形态：计时挂在共享动画时钟上（ClockProvider 单一定时源，
+    // 终端失焦自动降频），visible=false 时传 null——零订阅。时钟只负责
+    // 驱动重渲染；读数仍按墙钟（Date.now()）算，隐藏期间计时冻结的只是
+    // 显示，重新打开立刻显示真实经过时间（mountPolicy=enabled 下面板
+    // 保持挂载，startRef 不会重置）。
+    const [clockRef] = useAnimationFrame(variant === 'panel' && goalOpen && visible ? 1000 : null);
     React.useEffect(() => {
+        // default 形态保留原来的本地 1s 计时（底部 chrome 的既有行为）。
+        if (variant === 'panel')
+            return;
         // Tick only while the goal is open; a complete goal freezes the last
         // elapsed reading instead of counting past the finish line.
         if (goal === undefined || goal.phase === 'complete')
             return;
         const timer = setInterval(() => setNow(Date.now()), 1000);
         return () => clearInterval(timer);
-    }, [goal]);
+    }, [goal, variant]);
     const elapsed = goal !== undefined && startRef.current !== undefined
-        ? formatDuration(now - startRef.current.at)
+        ? formatDuration((variant === 'panel' ? Date.now() : now) - startRef.current.at)
         : undefined;
     // All-completed idle snapshot with no goal: nothing left to narrate —
     // the whole panel folds away (historical behavior).
     const anyUnfinished = allTodos.some(todo => todo.status !== 'completed');
-    const showTodoSection = allTodos.length > 0 && (channel.working || anyUnfinished || goal !== undefined);
+    const showTodoSection = allTodos.length > 0 &&
+        (channel.working || anyUnfinished || goal !== undefined || variant === 'panel');
     if (goal === undefined && !showTodoSection)
         return null;
-    const visible = todos.slice(0, MAX_TODOS);
-    const hidden = todos.length - visible.length;
+    const budget = maxTodos ?? MAX_TODOS;
+    // 折行形态（panel）：每条 todo 占 1~2 行，预算按「行」折算——放不下
+    // 的整条让位给「…N more」，不撑破面板高度（§16.6 盒高恒定）。cap：
+    // 折出 >2 行时保留第一行、其余拼回一行截断加省略号（wrapText truncate）。
+    // 单行形态（default）：与原 slice 语义逐字节一致。
+    const display = [];
+    if (wrapWidth !== undefined && wrapWidth > 4) {
+        let used = 0;
+        for (const todo of todos) {
+            const wrapped = wrapText(todo.content, wrapWidth, 'wrap').split('\n');
+            const lines = wrapped.length <= 2
+                ? wrapped
+                : [wrapped[0], wrapText(wrapped.slice(1).join(''), wrapWidth, 'truncate')];
+            if (display.length > 0 && used + lines.length > budget)
+                break;
+            display.push({ todo, lines });
+            used += lines.length;
+        }
+    }
+    else {
+        for (const todo of todos.slice(0, budget))
+            display.push({ todo, lines: [todo.content] });
+    }
+    const visibleTodos = display;
+    const hidden = todos.length - display.length;
     // Collapsed preview: the live task when one runs, else the next open row.
     const preview = allTodos.find(todo => todo.status === 'in_progress')
         ?? allTodos.find(todo => todo.status !== 'completed');
-    return (_jsxs(Box, { flexDirection: "column", paddingLeft: 2, paddingRight: 2, paddingTop: 1, children: [goal !== undefined && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", width: "100%", height: 1, children: [_jsx(Text, { color: "suggestion", children: "\uD83C\uDFAF " }), _jsx(Box, { flexGrow: 1, flexShrink: 1, children: _jsx(Text, { bold: true, wrap: "truncate", children: goal.objective }) }), _jsx(Box, { flexShrink: 0, marginLeft: 1, children: _jsx(PhaseBadge, { phase: goal.phase, roundsStarted: goal.roundsStarted, maxGoalRounds: goal.maxGoalRounds, elapsed: elapsed }) })] }), goal.phase === 'blocked' && goal.blockedReason !== undefined && (_jsxs(Box, { flexDirection: "row", marginTop: 1, height: 1, children: [_jsx(Text, { dimColor: true, children: "\u2502 " }), _jsx(Text, { color: "error", wrap: "truncate", children: goal.blockedReason.message })] }))] })), showTodoSection && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", height: 1, onClick: onToggle, onMouseEnter: () => setHeaderHovered(true), onMouseLeave: () => setHeaderHovered(false), backgroundColor: headerHovered ? 'userMessageBackgroundHover' : undefined, children: [_jsxs(Text, { dimColor: true, children: [collapsed ? '▸' : '▾', " "] }), _jsxs(Text, { dimColor: true, children: ["\u2713 ", doneCount, "/", allTodos.length] }), collapsed && preview !== undefined && (_jsx(Box, { flexGrow: 1, flexShrink: 1, marginLeft: 1, children: preview.status === 'in_progress' ? (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: "suggestion", children: "\u25CF " }), preview.content] })) : (_jsxs(Text, { wrap: "truncate", dimColor: true, children: ["\u25CB ", preview.content] })) }))] }), !collapsed && (_jsxs(Box, { flexDirection: "column", children: [visible.map((todo, index) => {
-                                const last = index === visible.length - 1 && hidden === 0;
-                                return (_jsxs(Box, { flexDirection: "row", height: 1, children: [_jsx(BranchPrefix, { last: last }), _jsx(TodoGlyph, { status: todo.status }), _jsx(Text, { wrap: "truncate", dimColor: todo.status === 'completed', children: todo.content })] }, index));
-                            }), hidden > 0 && (_jsxs(Box, { flexDirection: "row", height: 1, children: [_jsx(BranchPrefix, { last: true }), _jsxs(Text, { dimColor: true, children: ["\u2026 ", hidden, " more"] })] })), _jsxs(Text, { dimColor: true, children: ["  ", t('goal-todo-fold-hint', { key: primaryComboString('todoFold') })] })] }))] }))] }));
+    return (_jsxs(Box, { ref: variant === 'panel' ? clockRef : undefined, flexDirection: "column", paddingLeft: variant === 'panel' ? 1 : 2, paddingRight: variant === 'panel' ? 1 : 2, paddingTop: 1, children: [goal !== undefined && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", width: "100%", height: 1, children: [_jsx(Text, { color: "suggestion", children: "\uD83C\uDFAF " }), _jsx(Box, { flexGrow: 1, flexShrink: 1, children: _jsx(Text, { bold: true, wrap: "truncate", children: goal.objective }) }), _jsx(Box, { flexShrink: 0, marginLeft: 1, children: _jsx(PhaseBadge, { phase: goal.phase, roundsStarted: goal.roundsStarted, maxGoalRounds: goal.maxGoalRounds, elapsed: elapsed }) })] }), goal.phase === 'blocked' && goal.blockedReason !== undefined && (_jsxs(Box, { flexDirection: "row", marginTop: 1, height: 1, children: [_jsx(Text, { dimColor: true, children: "\u2502 " }), _jsx(Text, { color: "error", wrap: "truncate", children: goal.blockedReason.message })] }))] })), showTodoSection && (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", height: 1, onClick: onToggle, onMouseEnter: () => setHeaderHovered(true), onMouseLeave: () => setHeaderHovered(false), backgroundColor: headerHovered ? 'userMessageBackgroundHover' : undefined, children: [_jsxs(Text, { dimColor: true, children: [collapsed ? '▸' : '▾', " "] }), _jsxs(Text, { dimColor: true, children: ["\u2713 ", doneCount, "/", allTodos.length] }), collapsed && preview !== undefined && (_jsx(Box, { flexGrow: 1, flexShrink: 1, marginLeft: 1, children: preview.status === 'in_progress' ? (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: "suggestion", children: "\u25CF " }), preview.content] })) : (_jsxs(Text, { wrap: "truncate", dimColor: true, children: ["\u25CB ", preview.content] })) }))] }), !collapsed && (_jsxs(Box, { flexDirection: "column", children: [visibleTodos.map((item, index) => {
+                                const last = index === visibleTodos.length - 1 && hidden === 0;
+                                return item.lines.map((line, li) => (_jsxs(Box, { flexDirection: "row", height: 1, children: [li === 0 ? (_jsxs(_Fragment, { children: [_jsx(BranchPrefix, { last: last }), _jsx(TodoGlyph, { status: item.todo.status })] })) : (_jsx(Text, { dimColor: true, children: last ? '     ' : '\u2502    ' })), _jsx(Text, { wrap: "truncate", dimColor: item.todo.status === 'completed', children: line })] }, li)));
+                            }), hidden > 0 && (_jsxs(Box, { flexDirection: "row", height: 1, children: [_jsx(BranchPrefix, { last: true }), _jsxs(Text, { dimColor: true, children: ["\u2026 ", hidden, " more"] })] })), variant !== 'panel' && (_jsxs(Text, { dimColor: true, children: ["  ", t('goal-todo-fold-hint', { key: primaryComboString('todoFold') })] }))] }))] }))] }));
 }

package/lib/types/components/JobsPanel.d.ts

@@ -1,10 +1,50 @@
 import React from 'react';
 import { type BackgroundJobState } from '../dsh-adapter/jobs.js';
+/**
+ * Pure width→column allocation for the roster row (kept side-effect free so
+ * regressions can assert the table directly). There is no pid column in this
+ * roster. Side-panel tiers: the label always truncates and every column
+ * leaves it ≥8 cells — progress drops first, then duration, then the
+ * id/status columns narrow — so a 38-col panel never folds a command into
+ * per-word lines. The full-screen form keeps its wrap-the-label contract.
+ */
+export interface JobsRowColumns {
+    readonly showProgress: boolean;
+    readonly showDuration: boolean;
+    readonly showStatus: boolean;
+    readonly idWidth: number;
+    readonly statusWidth: number;
+    /** 整屏形态 label 折行（长命令可读全文）；panel 形态 truncate-end
+     *  （行高恒定，全文由焦点行的 detail 块承担）。 */
+    readonly labelWrap: boolean;
+}
+export declare function resolveJobsRowColumns(width: number): JobsRowColumns;
 export interface JobsPanelProps {
     jobs: readonly BackgroundJobState[];
-    onClose: () => void;
+    /** Focus this job on open (a transcript card click opens the panel AT its
+     *  job); absent or unknown ids fall back to the roster head. */
+    initialFocusId?: string;
+    /** Panel-variant focus lane: same intent as initialFocusId but re-fireable
+     *  (nonce bumps on every request, so clicking the same card twice refocuses).
+     *  Ignored by the default (full-screen) variant. */
+    focusRequest?: {
+        readonly id: string | null;
+        readonly nonce: number;
+    } | null;
+    onClose?: () => void;
     /** Kill the focused live job (`job_kill` with the session's authority). */
     onKill: (id: string) => void;
+    /** Send to Chat（§6.7）：把焦点任务作为附加上下文送进草稿（chip 出现在
+     *  输入框上方，随下一次提交附给模型）。仅 panel 形态；未接时不提供 's'。 */
+    onSendToChat?: (job: BackgroundJobState) => void;
+    /** 'panel' mounts inside the side-panel host (no outer padding, host-owned
+     *  chrome, keyboard via usePanelInput). Default keeps the full-screen
+     *  behavior byte-for-byte. */
+    variant?: 'default' | 'panel';
+    /** Panel variant: the host reports focus/visibility; inactive panels keep
+     *  their state but receive no keys and pause the clock. */
+    focused?: boolean;
+    visible?: boolean;
 }
 /**
  * `/jobs` overlay panel — every background job of the current session with
@@ -13,5 +53,5 @@ export interface JobsPanelProps {
  * row expands a detail block (full label, start/finish times, mirrored
  * output tail). The panel is the deep view behind the transcript job cards.
  */
-export declare function JobsPanel({ jobs, onClose, onKill }: JobsPanelProps): React.ReactNode;
+export declare function JobsPanel({ jobs, onClose, onKill, onSendToChat, initialFocusId, focusRequest, variant, focused, visible }: JobsPanelProps): React.ReactNode;
 //# sourceMappingURL=JobsPanel.d.ts.map

package/lib/types/components/JobsPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"JobsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/JobsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAqB,KAAK,kBAAkB,EAA4B,MAAM,wBAAwB,CAAA;AAU7G,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,SAAS,kBAAkB,EAAE,CAAA;IACnC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,2EAA2E;IAC3E,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAC7B;AAuMD;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,cAAc,GAAG,KAAK,CAAC,SAAS,CAwHpF"}
+{"version":3,"file":"JobsPanel.d.ts","sourceRoot":"","sources":["../../../src/components/JobsPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAqB,KAAK,kBAAkB,EAA4B,MAAM,wBAAwB,CAAA;AAY7G;;;;;;;GAOG;AACH,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;IAC5B;qCACiC;IACjC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAA;CAC5B;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,CAKnE;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,SAAS,kBAAkB,EAAE,CAAA;IACnC;oEACgE;IAChE,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;wDAEoD;IACpD,YAAY,CAAC,EAAE;QAAE,QAAQ,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAA;IAC5E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,2EAA2E;IAC3E,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5B;mDAC+C;IAC/C,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAChD;;kCAE8B;IAC9B,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B;+DAC2D;IAC3D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAoND;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,OAAmB,EAAE,OAAc,EAAE,OAAc,EAAE,EAAE,cAAc,GAAG,KAAK,CAAC,SAAS,CA6QrL"}