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

package/lib/types/components/GoalTodoPanel.js

@@ -1,8 +1,10 @@
-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';
+import { formatGoalBudget, formatGoalBudgetCompact } from '../channel/goal-command.js';
 /** Maximum todo rows shown before the overflow line. */
 const MAX_TODOS = 8;
 const PHASE_LABEL = {
@@ -33,17 +35,22 @@ function formatDuration(ms) {
     return seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m${seconds % 60}s`;
 }
 /**
- * Compact goal chip for the status footer: phase glyph + rounds, colored by
+ * Compact goal chip for the status footer: phase glyph + rounds (a goal a
+ * backend budgets by tokens: tokens used / budget instead), colored by
  * phase. `minimal` swaps the glyph for a text form, per the minimal-mode
  * no-emoji contract.
  */
 export function GoalStatusChip({ goal, minimal = false }) {
+    const progress = goal.budget === undefined ? `${goal.roundsStarted}/${goal.maxGoalRounds}` : formatGoalBudgetCompact(goal.budget);
     return (_jsx(Text, { color: phaseColor(goal.phase), dimColor: goal.phase === 'complete', children: minimal
-            ? `goal ${goal.roundsStarted}/${goal.maxGoalRounds}`
-            : `${PHASE_GLYPH[goal.phase]} ${goal.roundsStarted}/${goal.maxGoalRounds}` }));
+            ? `goal ${progress}`
+            : `${PHASE_GLYPH[goal.phase]} ${progress}` }));
 }
-function PhaseBadge({ phase, roundsStarted, maxGoalRounds, elapsed, }) {
+function PhaseBadge({ phase, roundsStarted, maxGoalRounds, budget, elapsed, }) {
     const color = phaseColor(phase);
+    if (budget !== undefined) {
+        return (_jsxs(Text, { color: color, dimColor: phase === 'complete', children: [PHASE_LABEL[phase], " \u00B7 ", formatGoalBudget(budget)] }));
+    }
     return (_jsxs(Text, { color: color, dimColor: phase === 'complete', children: [PHASE_LABEL[phase], " \u00B7 ", roundsStarted, "/", maxGoalRounds, elapsed !== undefined ? ` · ${elapsed}` : ''] }));
 }
 function TodoGlyph({ status }) {
@@ -82,16 +89,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 +115,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, budget: goal.budget, 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/InlineMathParagraph.js

@@ -70,7 +70,7 @@ export function InlineMathParagraph({ token, highlight }) {
                         // slot at all, and crops instead of dropping it at a viewport
                         // edge — the same contract block formulas use.
                         const formulaRequest = requests?.[piece.index];
-                        const painted = (_jsx(Image, { ...(composited ? {} : { transparent: true }), presentation: "transcript", source: raster.source, width: piece.columns, height: 1, alt: formula.text, copyText: formula.raw, children: _jsx(Text, { dimColor: true, wrap: "truncate", children: renderInlineMath(formula.text) ?? formula.raw }) }));
+                        const painted = (_jsx(Image, { ...(composited ? {} : { transparent: true }), lineArt: true, presentation: "transcript", source: raster.source, width: piece.columns, height: 1, alt: formula.text, copyText: formula.raw, children: _jsx(Text, { dimColor: true, wrap: "truncate", children: renderInlineMath(formula.text) ?? formula.raw }) }));
                         const image = composited
                             ? (_jsx(Box, { width: piece.columns, height: 1, flexShrink: 0, backgroundColor: terminalBackground, children: painted }))
                             : painted;

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

@@ -1,10 +1,49 @@
 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. In the side panel, the command gets a wrapped row under the id and
+ * status header; full-screen keeps the flexible inline label column.
+ */
+export interface JobsRowColumns {
+    readonly showProgress: boolean;
+    readonly showDuration: boolean;
+    readonly showStatus: boolean;
+    readonly idWidth: number;
+    readonly statusWidth: number;
+    /** Full-screen keeps the label in the header; panel rows place it below. */
+    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;
+    /** Keep the focused job's output tail fresh while the panel shows it
+     *  (a backend whose output is read on demand); returns the unwatch. */
+    onWatchOutput?: (id: string) => () => void;
+    /** Attach the focused job to the next submitted message. Panel mode only. */
+    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 +52,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, onWatchOutput }: 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,EAA4C,KAAK,kBAAkB,EAAmD,MAAM,wBAAwB,CAAA;AAY3J;;;;;GAKG;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,4EAA4E;IAC5E,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;2EACuE;IACvE,aAAa,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,IAAI,CAAA;IAC1C,6EAA6E;IAC7E,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;AAiRD;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,OAAmB,EAAE,OAAc,EAAE,OAAc,EAAE,aAAa,EAAE,EAAE,cAAc,GAAG,KAAK,CAAC,SAAS,CA0SpM"}

package/lib/types/components/JobsPanel.js

@@ -1,14 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import { Box, Text, useInput, ScrollBox, useTerminalSize, useAnimationFrame } from '../ui.js';
-import { formatJobDuration } from '../dsh-adapter/jobs.js';
-import { JobProgress } from './Chat/JobCard.js';
+import { formatJobDuration, JOBS_MAX_OUTPUT_LINES } from '../dsh-adapter/jobs.js';
+import { JobProgress, JobSection, jobCommandRows } from './Chat/JobCard.js';
 import { Markdown } from './Markdown.js';
 import { t } from '../i18n.js';
 import { Divider } from './design-system/Divider.js';
 import { ExitButton } from './SubagentDashboard.js';
 import { isPlainReturnInput } from '../utils/modifiers.js';
 import { isMinimalUiMode } from '../minimalUiMode.js';
+import { usePanelInput } from './sidePanel/usePanelInput.js';
+export function resolveJobsRowColumns(width) {
+    if (width >= 52)
+        return { showProgress: true, showDuration: true, showStatus: true, idWidth: 9, statusWidth: 9, labelWrap: false };
+    if (width >= 44)
+        return { showProgress: false, showDuration: true, showStatus: true, idWidth: 9, statusWidth: 9, labelWrap: false };
+    if (width >= 34)
+        return { showProgress: false, showDuration: true, showStatus: true, idWidth: 8, statusWidth: 6, labelWrap: false };
+    return { showProgress: false, showDuration: false, showStatus: true, idWidth: 7, statusWidth: 6, labelWrap: false };
+}
 function statusInfo(status) {
     const minimalUi = isMinimalUiMode();
     switch (status) {
@@ -44,7 +54,7 @@ function renderOutputRuns(job) {
         runs.push({ kind: 'markdown', text: markdown.join('\n') });
         markdown = [];
     };
-    for (const line of job.outputLines) {
+    for (const line of job.outputLines ?? []) {
         if (line.gapBefore === true) {
             flush();
             runs.push({ kind: 'gap' });
@@ -64,17 +74,25 @@ function renderOutputRuns(job) {
     flush();
     return runs;
 }
-function JobRowLine({ job, focused, armed, showProgress, onFocus }) {
+function JobRowLine({ job, focused, armed, columns, onFocus, expanded, onToggle, width }) {
     const info = statusInfo(job.status);
     const duration = formatJobDuration(job);
     const live = !isTerminalStatus(job.status);
     const progress = live && job.progress !== undefined && job.progress !== '' ? job.progress : undefined;
-    return (_jsxs(Box, { flexDirection: "column", onClick: onFocus, children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsxs(Box, { width: 2, flexShrink: 0, children: [_jsx(Text, { color: focused ? 'accent' : undefined, children: focused ? '❯' : ' ' }), _jsx(Text, { color: info.color, children: info.glyph })] }), _jsx(Box, { width: 9, flexShrink: 0, children: _jsx(Text, { bold: focused, color: focused ? 'accent' : undefined, wrap: "truncate-end", children: job.id }) }), _jsx(Box, { flexGrow: 1, flexShrink: 1, children: _jsx(Text, { bold: focused, wrap: "truncate-end", children: job.label }) }), showProgress === true && (_jsx(Box, { width: 11, flexShrink: 0, justifyContent: "flex-end", children: progress !== undefined ? _jsx(JobProgress, { progress: progress }) : _jsx(Text, { children: " " }) })), armed === true ? (_jsx(Text, { bold: true, color: "error", wrap: "truncate-end", children: t('jobs-kill-armed') })) : (_jsxs(_Fragment, { children: [_jsx(Box, { width: 6, flexShrink: 0, justifyContent: "flex-end", children: _jsx(Text, { dimColor: true, children: duration }) }), _jsx(Box, { width: 9, flexShrink: 0, justifyContent: "flex-end", children: _jsx(Text, { color: info.color, wrap: "truncate-end", children: info.label }) })] }))] }), focused && (_jsxs(Box, { flexDirection: "column", paddingLeft: 4, children: [job.command !== undefined && job.command !== '' && job.command !== job.label && (_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Box, { width: 7, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: t('jobs-panel-command') }) }), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: job.command })] })), _jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Box, { width: 7, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: t('jobs-panel-started') }) }), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: timeOf(job.startedAt)
+    const labelRows = jobCommandRows(job.label, width - 2, expanded);
+    const command = job.command !== undefined && job.command !== '' ? job.command : job.label;
+    const commandRows = focused ? jobCommandRows(command, width - 2, expanded) : [];
+    return (_jsxs(Box, { flexDirection: "column", onClick: onFocus, children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsxs(Box, { width: 2, flexShrink: 0, children: [_jsx(Text, { color: focused ? 'accent' : undefined, children: focused ? '❯' : ' ' }), _jsx(Text, { color: info.color, children: info.glyph })] }), _jsx(Box, { width: columns.idWidth, flexShrink: 0, children: _jsx(Text, { bold: focused, color: focused ? 'accent' : undefined, wrap: "truncate-end", children: job.id }) }), _jsx(Box, { flexGrow: 1, flexShrink: 1, children: _jsx(Text, { bold: focused, wrap: columns.labelWrap && expanded ? 'wrap' : 'truncate-end', children: job.label }) }), columns.showProgress && (_jsx(Box, { width: 11, flexShrink: 0, justifyContent: "flex-end", children: progress !== undefined ? _jsx(JobProgress, { progress: progress }) : _jsx(Text, { children: " " }) })), armed === true ? (_jsx(Text, { bold: true, color: "error", wrap: "truncate-end", children: t('jobs-kill-armed') })) : (_jsxs(_Fragment, { children: [columns.showDuration && (_jsx(Box, { width: 6, flexShrink: 0, justifyContent: "flex-end", children: _jsx(Text, { dimColor: true, children: duration }) })), columns.showStatus && (_jsx(Box, { width: columns.statusWidth, flexShrink: 0, justifyContent: "flex-end", children: _jsx(Text, { color: info.color, wrap: "truncate-end", children: info.label }) }))] }))] }), (!columns.labelWrap || focused) && (_jsx(JobSection, { rows: focused ? commandRows : labelRows, color: "accent", onToggle: onToggle })), focused && (_jsxs(Box, { flexDirection: "column", paddingLeft: 4, children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Box, { width: 7, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: t('jobs-panel-started') }) }), _jsx(Text, { dimColor: true, children: timeOf(job.startedAt)
                                     + (job.finishedAt !== undefined ? ` · ${t('jobs-panel-finished')} ${timeOf(job.finishedAt)}` : '')
-                                    + (job.lastOutputAt !== undefined ? ` · ${t('jobs-panel-output-at')} ${timeOf(job.lastOutputAt)}` : '') })] }), (job.outputTotalBytes !== undefined || job.outputDropped === true) && (_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Box, { width: 7, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: t('jobs-panel-output') }) }), _jsx(Text, { dimColor: true, wrap: "truncate-end", children: (job.outputTotalBytes !== undefined ? formatBytes(job.outputTotalBytes) : '')
+                                    + (job.lastOutputAt !== undefined ? ` · ${t('jobs-panel-output-at')} ${timeOf(job.lastOutputAt)}` : '') })] }), (job.outputTotalBytes !== undefined || job.outputDropped === true || (job.outputLines?.length ?? 0) >= JOBS_MAX_OUTPUT_LINES) && (_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Box, { width: 7, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: t('jobs-panel-output') }) }), _jsx(Text, { dimColor: true, children: (job.outputTotalBytes !== undefined ? formatBytes(job.outputTotalBytes) : '')
                                     + (job.outputDropped === true
                                         ? `${job.outputTotalBytes !== undefined ? ' · ' : ''}${t('jobs-output-dropped')}`
-                                        : '') })] })), job.spillPaths !== undefined && job.spillPaths.length > 0 && (_jsx(Box, { paddingLeft: 8, children: _jsx(Text, { dimColor: true, wrap: "truncate-end", children: t('jobs-output-spill', { path: job.spillPaths[job.spillPaths.length - 1] ?? '' }) }) })), job.outputLines.length > 0 ? (_jsx(Box, { flexDirection: "column", marginTop: 1, children: renderOutputRuns(job).map((run, runIndex) => (_jsxs(Box, { flexDirection: "column", marginTop: runIndex === 0 ? 0 : 1, children: [run.kind === 'gap' && (_jsx(Text, { dimColor: true, italic: true, wrap: "truncate-end", children: t('jobs-output-gap') })), run.kind === 'markdown' && (_jsx(Markdown, { cacheTokens: true, children: run.text })), run.kind === 'stderr' && (_jsx(Text, { color: "error", wrap: "truncate-end", children: `│ ${run.text}` })), run.kind === 'log' && (_jsx(Text, { dimColor: true, italic: true, wrap: "truncate-end", children: `│ ${run.text}` }))] }, `${job.id}-run-${runIndex}`))) })) : (_jsx(Text, { dimColor: true, wrap: "truncate-end", children: t('jobs-panel-no-output-yet') }))] }))] }));
+                                        : '')
+                                    // At the retention cap the visible tail is provably partial:
+                                    // say so instead of letting it read as the whole stream.
+                                    + ((job.outputLines?.length ?? 0) >= JOBS_MAX_OUTPUT_LINES
+                                        ? `${job.outputTotalBytes !== undefined || job.outputDropped === true ? ' · ' : ''}${t('jobs-output-retained-tail', { n: job.outputLines?.length ?? 0 })}`
+                                        : '') })] })), job.lastProgress !== undefined && (_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Box, { width: 7, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: t('jobs-progress-latest') }) }), _jsxs(Text, { dimColor: true, children: [job.lastProgress, job.lastProgressAt !== undefined ? ` · ${t('jobs-progress-updated-at', { time: timeOf(job.lastProgressAt) })}` : '', ` · ${t('jobs-progress-source', { source: job.kind })}`] })] })), job.spillPaths !== undefined && job.spillPaths.length > 0 && (_jsx(Box, { paddingLeft: 8, children: _jsx(Text, { dimColor: true, children: t('jobs-output-spill', { path: job.spillPaths[job.spillPaths.length - 1] ?? '' }) }) })), (job.outputLines?.length ?? 0) > 0 ? (_jsx(JobSection, { rows: [], color: "success", children: _jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 2, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: "\u2261 " }) }), _jsx(Box, { flexDirection: "column", flexGrow: 1, children: renderOutputRuns(job).map((run, runIndex) => (_jsxs(Box, { flexDirection: "column", marginTop: runIndex === 0 ? 0 : 1, children: [run.kind === 'gap' && (_jsx(Text, { dimColor: true, italic: true, children: t('jobs-output-gap') })), run.kind === 'markdown' && (_jsx(Markdown, { cacheTokens: true, children: run.text })), run.kind === 'stderr' && (_jsx(Text, { dimColor: true, children: run.text })), run.kind === 'log' && (_jsx(Text, { dimColor: true, italic: true, children: run.text }))] }, `${job.id}-run-${runIndex}`))) })] }) })) : (_jsx(Text, { dimColor: true, children: t('jobs-panel-no-output-yet') })), _jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { dimColor: true, bold: true, children: t('jobs-timeline') }), (job.timeline?.length ?? 0) === 0 ? (_jsx(Text, { dimColor: true, italic: true, children: t('jobs-timeline-events-unavailable') })) : (_jsxs(_Fragment, { children: [(job.gapCount ?? 0) > 0 && (_jsx(Text, { dimColor: true, italic: true, children: t('jobs-timeline-gap-count', { n: job.gapCount ?? 0 }) })), (job.timeline?.length ?? 0) > JOBS_TIMELINE_DISPLAY && (_jsx(Text, { dimColor: true, children: `… +${(job.timeline?.length ?? 0) - JOBS_TIMELINE_DISPLAY}` })), (job.timeline ?? []).slice(-JOBS_TIMELINE_DISPLAY).map((event, index) => (_jsx(Text, { dimColor: true, children: timelineLine(event) }, index)))] }))] })] }))] }));
 }
 /** HH:MM:SS wall-clock of an epoch ms value (locale-independent). */
 function timeOf(ms) {
@@ -82,6 +100,30 @@ function timeOf(ms) {
     const pad = (value) => String(value).padStart(2, '0');
     return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
 }
+/** The rendered form of one timeline observation: `HH:MM:SS <what>`.
+ * Progress keeps the producer's own line verbatim (never re-parsed into a
+ * percentage); an output drain names its byte advance and channel when the
+ * kernel labelled one. */
+function timelineLine(event) {
+    const time = timeOf(event.at);
+    switch (event.kind) {
+        case 'started':
+            return `${time} ${t('jobs-timeline-started')}`;
+        case 'progress':
+            return `${time} ${t('jobs-timeline-progress')} ${event.text ?? ''}`;
+        case 'output':
+            return `${time} ${event.channel === 'stderr' ? 'stderr' : event.channel === 'log' ? 'log' : t('jobs-timeline-output')}${event.bytes === undefined ? '' : ` +${formatBytes(event.bytes)}`}`;
+        case 'gap':
+            return `${time} ${t('jobs-timeline-gap')}`;
+        case 'stopping':
+            return `${time} ${t('jobs-status-stopping')}`;
+        case 'settled':
+            return `${time} ${t('jobs-timeline-settled')}${event.text === undefined || event.text === '' ? '' : ` · ${event.text}`}`;
+    }
+}
+/** Latest timeline slice shown in the focused detail: enough to read the
+ * recent shape of the job without the block swallowing the panel. */
+const JOBS_TIMELINE_DISPLAY = 8;
 /**
  * `/jobs` overlay panel — every background job of the current session with
  * live status, elapsed/total duration and terminal detail (exit code).
@@ -89,16 +131,87 @@ function timeOf(ms) {
  * 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 function JobsPanel({ jobs, onClose, onKill }) {
-    const [focusIndex, setFocusIndex] = React.useState(0);
+export function JobsPanel({ jobs, onClose, onKill, onSendToChat, initialFocusId, focusRequest, variant = 'default', focused = true, visible = true, onWatchOutput }) {
+    const panelMode = variant === 'panel';
+    const [expandedJobs, setExpandedJobs] = React.useState(new Set());
+    const toggleDetails = (id) => {
+        setExpandedJobs(previous => {
+            const next = new Set(previous);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    };
+    const [focusIndex, setFocusIndex] = React.useState(() => {
+        if (initialFocusId === undefined)
+            return 0;
+        const found = jobs.findIndex(job => job.id === initialFocusId);
+        return found >= 0 ? found : 0;
+    });
+    // A card click may race the roster: the id can land after the panel opened
+    // (late kernel push), so re-apply once when it first becomes findable.
+    const initialFocusApplied = React.useRef(initialFocusId === undefined);
+    React.useEffect(() => {
+        if (initialFocusApplied.current || initialFocusId === undefined)
+            return;
+        const found = jobs.findIndex(job => job.id === initialFocusId);
+        if (found < 0)
+            return;
+        initialFocusApplied.current = true;
+        setFocusIndex(found);
+        scrollRef.current?.scrollTo(Math.max(0, found - 2));
+    }, [jobs, initialFocusId]);
+    // Panel-variant focus lane: the same "open AT this job" intent, but each
+    // request carries a nonce so re-clicking the same card refocuses. The
+    // nonce is only consumed once the id resolves against the roster (the
+    // late-kernel-push race from initialFocusId applies here too).
+    const focusRequestNonceRef = React.useRef(-1);
+    React.useEffect(() => {
+        if (panelMode === false || focusRequest === undefined || focusRequest === null)
+            return;
+        if (focusRequestNonceRef.current === focusRequest.nonce)
+            return;
+        if (focusRequest.id === null) {
+            focusRequestNonceRef.current = focusRequest.nonce;
+            return;
+        }
+        const found = jobs.findIndex(job => job.id === focusRequest.id);
+        if (found < 0)
+            return;
+        focusRequestNonceRef.current = focusRequest.nonce;
+        initialFocusApplied.current = true;
+        setFocusIndex(found);
+        scrollRef.current?.scrollTo(Math.max(0, found - 2));
+    }, [jobs, focusRequest, panelMode]);
     /** Armed kill: first `k` primes, second within the window confirms; any
      *  navigation or other key disarms. Mirrors the web two-press stop. */
     const [killArmed, setKillArmed] = React.useState(undefined);
     const scrollRef = React.useRef(null);
-    const { rows } = useTerminalSize();
-    // 1s tick keeps live durations counting while the panel is open.
-    const [clockRef] = useAnimationFrame(1000);
+    // PanelHost overrides the terminal-size context to the panel's own
+    // columns/rows, so the same hook reports the panel geometry in panel mode.
+    const { columns: terminalColumns, rows } = useTerminalSize();
+    // 1s tick keeps live durations counting while the panel is open (a hidden
+    // panel variant suspends the clock — zero subscriptions when invisible).
+    const [clockRef] = useAnimationFrame(panelMode ? (visible ? 1000 : null) : 1000);
+    // Bring an initial deep focus into view on mount (rows are ~1 line each;
+    // two rows of headroom above reads better than pinning to the top edge).
+    React.useEffect(() => {
+        if (initialFocusId === undefined || initialFocusApplied.current === false)
+            return;
+        if (initialFocusId !== undefined && jobs.findIndex(job => job.id === initialFocusId) > 2) {
+            scrollRef.current?.scrollTo(Math.max(0, jobs.findIndex(job => job.id === initialFocusId) - 2));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only scroll placement
+    }, []);
     const focus = Math.min(focusIndex, Math.max(0, jobs.length - 1));
+    // The focused job's detail shows its output: keep that tail fresh while
+    // the panel is open and visible (a hidden side-panel instance keeps its
+    // state but reads nothing; a settled job is read once more, then left
+    // alone).
+    const focusedId = jobs[focus]?.id;
+    React.useEffect(() => (focusedId === undefined || onWatchOutput === undefined || !visible ? undefined : onWatchOutput(focusedId)), [focusedId, onWatchOutput, visible]);
     // The armed confirmation decays after 4s so a stray later `k` never kills.
     React.useEffect(() => {
         if (killArmed === undefined)
@@ -106,10 +219,13 @@ export function JobsPanel({ jobs, onClose, onKill }) {
         const timer = setTimeout(() => setKillArmed(undefined), 4000);
         return () => clearTimeout(timer);
     }, [killArmed]);
+    // Full-screen input stays registered but inactive when the panel dispatcher owns keys.
     useInput((input, key, event) => {
+        if (panelMode)
+            return;
         if (key.escape || (key.ctrl && input === 'c')) {
             event.stopImmediatePropagation();
-            onClose();
+            onClose?.();
             return;
         }
         if (key.upArrow) {
@@ -140,6 +256,13 @@ export function JobsPanel({ jobs, onClose, onKill }) {
             }
             return;
         }
+        if (input === 'e' && !key.ctrl && !key.meta) {
+            event.stopImmediatePropagation();
+            setKillArmed(undefined);
+            if (focusedId !== undefined)
+                toggleDetails(focusedId);
+            return;
+        }
         // Enter on a live job does nothing extra (the card/panel IS the view);
         // keep the key consumed while the panel owns the keyboard.
         if (isPlainReturnInput(input, key)) {
@@ -147,12 +270,81 @@ export function JobsPanel({ jobs, onClose, onKill }) {
             return;
         }
         event.stopImmediatePropagation();
-    });
+    }, { isActive: !panelMode });
+    // Panel form: same business keys through the host dispatcher. Esc/Ctrl+C
+    // RETURN FALSE — the host fallback then walks the focus back to chat (the
+    // panel never closes the sidebar itself); everything unconsumed also
+    // returns false so [/]/z/+/-/digits keep working.
+    const panelKeyHandler = (input, key) => {
+        if (key.escape === true || (key.ctrl === true && input === 'c'))
+            return false;
+        if (key.upArrow === true) {
+            setKillArmed(undefined);
+            setFocusIndex(i => Math.max(0, i - 1));
+            scrollRef.current?.scrollBy(-1);
+            return true;
+        }
+        if (key.downArrow === true) {
+            setKillArmed(undefined);
+            setFocusIndex(i => Math.min(jobs.length - 1, i + 1));
+            scrollRef.current?.scrollBy(1);
+            return true;
+        }
+        if (input === 'k') {
+            const selected = jobs[focus];
+            if (selected !== undefined && (selected.status === 'running' || selected.status === 'stopping')) {
+                if (killArmed === selected.id) {
+                    setKillArmed(undefined);
+                    onKill(selected.id);
+                }
+                else {
+                    setKillArmed(selected.id);
+                }
+            }
+            return true;
+        }
+        if (input === 'e' && !key.ctrl && !key.meta) {
+            setKillArmed(undefined);
+            if (focusedId !== undefined)
+                toggleDetails(focusedId);
+            return true;
+        }
+        // 's' = Send to Chat：焦点任务附为下一次提交的上下文（chip 在输入框
+        // 上方，Esc 可撤）。未接通道时让出。
+        if (input === 's') {
+            if (onSendToChat === undefined)
+                return false;
+            const selected = jobs[focus];
+            if (selected === undefined)
+                return true;
+            onSendToChat(selected);
+            return true;
+        }
+        // Enter keeps the same "panel owns the keyboard" semantics (no extra
+        // action on a live job — the row IS the view).
+        if (key.return_ === true)
+            return true;
+        return false;
+    };
+    usePanelInput(panelKeyHandler, { active: panelMode && focused && visible });
     const running = jobs.filter(job => job.status === 'running' || job.status === 'stopping').length;
     // One live job with a progress line reserves the column on every row, so the
     // right-hand grid does not shift as jobs start and finish.
-    const showProgress = jobs.some(job => (job.status === 'running' || job.status === 'stopping') && job.progress !== undefined && job.progress !== '');
+    const progressEligible = jobs.some(job => (job.status === 'running' || job.status === 'stopping') && job.progress !== undefined && job.progress !== '');
+    // Column allocation: the full-screen form keeps the historical layout
+    // (progress eligible as computed, duration and status always shown); the
+    // panel form derives everything from the panel width.
+    const rowColumns = panelMode
+        ? resolveJobsRowColumns(terminalColumns)
+        : { showProgress: progressEligible, showDuration: true, showStatus: true, idWidth: 9, statusWidth: 9, labelWrap: true };
     const completed = jobs.filter(job => job.status === 'completed').length;
     const failed = jobs.filter(job => job.status === 'failed' || job.status === 'killed').length;
-    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, ref: clockRef, children: [_jsx(Divider, { color: "accent", title: t('jobs-panel-title') }), _jsxs(Box, { flexDirection: "row", gap: 3, marginTop: 1, marginBottom: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: "accent", children: running }), _jsxs(Text, { dimColor: true, children: [" ", t('jobs-panel-count-running')] })] }), _jsxs(Text, { children: [_jsx(Text, { color: "success", children: completed }), _jsxs(Text, { dimColor: true, children: [" ", t('jobs-panel-count-completed')] })] }), failed > 0 && (_jsxs(Text, { children: [_jsx(Text, { color: "error", children: failed }), _jsxs(Text, { dimColor: true, children: [" ", t('jobs-panel-count-failed')] })] })), _jsx(Box, { flexGrow: 1 }), _jsx(ExitButton, { onClick: onClose })] }), _jsx(Box, { flexDirection: "column", maxHeight: Math.max(10, rows - 10), marginTop: 1, children: _jsx(ScrollBox, { ref: scrollRef, flexDirection: "column", flexGrow: 1, children: jobs.length === 0 ? (_jsxs(Box, { flexDirection: "column", alignItems: "center", marginTop: Math.max(2, Math.floor((rows - 16) / 3)), children: [_jsx(Text, { dimColor: true, children: '○' }), _jsx(Text, { dimColor: true, children: t('jobs-panel-empty') }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: t('jobs-panel-empty-hint') }) })] })) : (jobs.map((job, index) => (_jsx(JobRowLine, { job: job, focused: index === focus, armed: killArmed === job.id, showProgress: showProgress, onFocus: () => { setKillArmed(undefined); setFocusIndex(index); } }, job.id)))) }) }), _jsx(Divider, { color: "subtle", title: "" }), _jsx(Box, { marginTop: 0, children: _jsx(Text, { dimColor: true, children: t('jobs-panel-hint') }) })] }));
+    if (panelMode) {
+        // Panel layout aligned with TodoPanelAdapter: no outer padding beyond
+        // one left/right cell, no title divider / exit button / hint footer
+        // (PanelBar + the host hint row already carry that chrome), the summary
+        // line kept but tightened for narrow widths.
+        return (_jsxs(Box, { flexDirection: "column", paddingLeft: 1, paddingRight: 1, paddingTop: 0, flexGrow: 1, ref: clockRef, children: [_jsxs(Box, { flexDirection: "row", gap: 1, marginTop: 0, marginBottom: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: "accent", children: running }), _jsxs(Text, { dimColor: true, children: [" ", t('jobs-panel-count-running')] })] }), (terminalColumns >= 34 || failed > 0) && (_jsxs(Text, { children: [_jsx(Text, { color: failed > 0 ? 'error' : 'success', children: failed > 0 ? failed : completed }), _jsxs(Text, { dimColor: true, children: [" ", failed > 0 ? t('jobs-panel-count-failed') : t('jobs-panel-count-completed')] })] }))] }), _jsx(Box, { flexDirection: "column", maxHeight: Math.max(6, rows - 4), marginTop: 0, children: _jsx(ScrollBox, { ref: scrollRef, flexDirection: "column", flexGrow: 1, children: jobs.length === 0 ? (_jsxs(Box, { flexDirection: "column", alignItems: "center", marginTop: 2, children: [_jsx(Text, { dimColor: true, children: '○' }), _jsx(Text, { dimColor: true, children: t('jobs-panel-empty') })] })) : (jobs.map((job, index) => (_jsx(JobRowLine, { job: job, focused: index === focus, armed: killArmed === job.id, columns: rowColumns, expanded: expandedJobs.has(job.id), width: terminalColumns - (panelMode ? 2 : 4), onToggle: () => { setKillArmed(undefined); setFocusIndex(index); toggleDetails(job.id); }, onFocus: () => { setKillArmed(undefined); setFocusIndex(index); } }, job.id)))) }) })] }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, ref: clockRef, children: [_jsx(Divider, { color: "accent", title: t('jobs-panel-title') }), _jsxs(Box, { flexDirection: "row", gap: 3, marginTop: 1, marginBottom: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: "accent", children: running }), _jsxs(Text, { dimColor: true, children: [" ", t('jobs-panel-count-running')] })] }), _jsxs(Text, { children: [_jsx(Text, { color: "success", children: completed }), _jsxs(Text, { dimColor: true, children: [" ", t('jobs-panel-count-completed')] })] }), failed > 0 && (_jsxs(Text, { children: [_jsx(Text, { color: "error", children: failed }), _jsxs(Text, { dimColor: true, children: [" ", t('jobs-panel-count-failed')] })] })), _jsx(Box, { flexGrow: 1 }), _jsx(ExitButton, { onClick: () => onClose?.() })] }), _jsx(Box, { flexDirection: "column", maxHeight: Math.max(10, rows - 10), marginTop: 1, children: _jsx(ScrollBox, { ref: scrollRef, flexDirection: "column", flexGrow: 1, children: jobs.length === 0 ? (_jsxs(Box, { flexDirection: "column", alignItems: "center", marginTop: Math.max(2, Math.floor((rows - 16) / 3)), children: [_jsx(Text, { dimColor: true, children: '○' }), _jsx(Text, { dimColor: true, children: t('jobs-panel-empty') }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: t('jobs-panel-empty-hint') }) })] })) : (jobs.map((job, index) => (_jsx(JobRowLine, { job: job, focused: index === focus, armed: killArmed === job.id, columns: rowColumns, expanded: expandedJobs.has(job.id), width: terminalColumns - (panelMode ? 2 : 4), onToggle: () => { setKillArmed(undefined); setFocusIndex(index); toggleDetails(job.id); }, onFocus: () => { setKillArmed(undefined); setFocusIndex(index); } }, job.id)))) }) }), _jsx(Divider, { color: "subtle", title: "" }), _jsx(Box, { marginTop: 0, children: _jsx(Text, { dimColor: true, children: t('jobs-panel-hint') }) })] }));
 }

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { type KernelOption } from './kernelCatalog.js';
+/**
+ * 内核选择器（launchpad 的「内核」入口、/kernel 与右下角内核区三条入口共用
+ * 同一个浮层）——一行一个内核：名字 + 副标题（版本 / 置灰原因），当前内核打
+ * 勾，不可选的置灰。
+ *
+ * 视觉照 ModePicker（Pane color=permission + 标题 + 行列表 + Enter/Esc 提示行，
+ * 第五版那套 picker 的统一姿态）；键盘归宿主（Chat 的 overlay 分支）：↑/↓ 移
+ * 焦点、Enter 走确认路径、Esc 关掉，本组件不碰 useInput。
+ *
+ * 行是 ListItem，但 **styled=false**：文本样式由这里自己画。原因是不可选行
+ * 必须变暗，而 ListItem 的 disabled 会把 ❯ 焦点指针一起吞掉（renderIndicator
+ * 在 disabled 时只画一格空格）——那样键盘走上来就看不见自己在哪一行了。
+ * 于是禁用态用 dimColor 表达、指针留给 isFocused，两者互不干扰。
+ *
+ * 鼠标契约照仓库规矩：给了 onPick 行才可点（ListItem 的 hover 底色随之出现），
+ * 点击回的是**行号**——宿主把它喂给与键盘 Enter 完全相同的那条确认路径。
+ */
+export declare function KernelPicker({ options, focusIndex, pinned, onPick }: {
+    options: readonly KernelOption[];
+    focusIndex: number;
+    /** 启动参数锁定了内核：多画一行提示 */
+    pinned?: boolean;
+    /** 鼠标点行（落到 Chat 同一条确认路径） */
+    onPick?: (index: number) => void;
+}): React.ReactNode;
+//# sourceMappingURL=KernelPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KernelPicker.d.ts","sourceRoot":"","sources":["../../../src/components/KernelPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAA;AAEtE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE;IACpE,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;IAChC,UAAU,EAAE,MAAM,CAAA;IAClB,uBAAuB;IACvB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC,GAAG,KAAK,CAAC,SAAS,CAiDlB"}

package/lib/types/components/KernelPicker.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from '../i18n.js';
+import { Box, Text } from '../ui.js';
+import { Pane } from './design-system/Pane.js';
+import { ListItem } from './design-system/ListItem.js';
+import { HintLine } from './design-system/HintLine.js';
+import { kernelSubtitle } from './kernelCatalog.js';
+/**
+ * 内核选择器（launchpad 的「内核」入口、/kernel 与右下角内核区三条入口共用
+ * 同一个浮层）——一行一个内核：名字 + 副标题（版本 / 置灰原因），当前内核打
+ * 勾，不可选的置灰。
+ *
+ * 视觉照 ModePicker（Pane color=permission + 标题 + 行列表 + Enter/Esc 提示行，
+ * 第五版那套 picker 的统一姿态）；键盘归宿主（Chat 的 overlay 分支）：↑/↓ 移
+ * 焦点、Enter 走确认路径、Esc 关掉，本组件不碰 useInput。
+ *
+ * 行是 ListItem，但 **styled=false**：文本样式由这里自己画。原因是不可选行
+ * 必须变暗，而 ListItem 的 disabled 会把 ❯ 焦点指针一起吞掉（renderIndicator
+ * 在 disabled 时只画一格空格）——那样键盘走上来就看不见自己在哪一行了。
+ * 于是禁用态用 dimColor 表达、指针留给 isFocused，两者互不干扰。
+ *
+ * 鼠标契约照仓库规矩：给了 onPick 行才可点（ListItem 的 hover 底色随之出现），
+ * 点击回的是**行号**——宿主把它喂给与键盘 Enter 完全相同的那条确认路径。
+ */
+export function KernelPicker({ options, focusIndex, pinned, onPick }) {
+    return (_jsx(Pane, { color: "permission", children: _jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "remember", bold: true, children: t('kernel-picker-title') }) }), options.map((option, index) => {
+                    const focused = index === focusIndex;
+                    const subtitle = kernelSubtitle(option, key => t(key));
+                    return (_jsx(ListItem, { isFocused: focused, isSelected: option.current, description: subtitle, styled: false, onClick: onPick === undefined ? undefined : () => onPick(index), children: _jsx(Text
+                        // 不可选 = 变暗（**始终**变暗，焦点落上来也只是多一个 ❯ 指针，
+                        // 不把「这一行选不了」这件事照亮成可选的假象）。
+                        , { 
+                            // 不可选 = 变暗（**始终**变暗，焦点落上来也只是多一个 ❯ 指针，
+                            // 不把「这一行选不了」这件事照亮成可选的假象）。
+                            dimColor: !option.selectable, color: option.current ? 'success' : focused && option.selectable ? 'suggestion' : undefined, bold: focused && option.selectable, wrap: "truncate-end", children: t(option.labelKey) }) }, option.id));
+                }), pinned === true && (_jsx(Box, { paddingLeft: 2, children: _jsx(Text, { dimColor: true, wrap: "wrap", children: t('kernel-pinned-hint') }) })), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: t('hint-confirm-exit') }) })] }) }));
+}