@askdkc/dsh-cli 0.11.3

package/lib/types/components/HelpMenu.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box, ScrollBox, Text } from '../ui.js';
+import { localizedDescription } from '../commands.js';
+import { t } from '../i18n.js';
+import { modLabel } from '../utils/modifiers.js';
+/**
+ * The `?` help menu with a three-column shortcut layout, trimmed to the keys
+ * dsh-tui actually binds.
+ * The command column lists the merged slash-command surface: built-in
+ * commands plus plugin-registered ones from the DSH registry (plan/goal/…).
+ * Skill entries (user-invocable skills merged for `/` completion, issue
+ * #86) are hidden — a skills directory can hold dozens of entries and the
+ * menu is for chrome commands. Modifier labels follow the platform
+ * convention: ⌘ on macOS, ctrl elsewhere.
+ */
+export function HelpMenu({ commands, viewportHeight, viewportWidth, scrollRef, onCommandPick, }) {
+    const chrome = commands.filter(command => !command.skill);
+    const primaryShortcuts = (_jsxs(Box, { flexDirection: "column", width: 26, flexShrink: 0, children: [_jsx(Box, { children: _jsx(Text, { dimColor: true, children: t('help-for-commands') }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: t('help-this-help') }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: t('help-verbose-output', { mod: modLabel }) }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: t('help-open-trajectory', { mod: modLabel }) }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: t('help-search-history', { mod: modLabel }) }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: t('help-interrupt') }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: t('help-exit') }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: t('help-redraw', { mod: modLabel }) }) })] }));
+    const secondaryShortcuts = (_jsxs(Box, { flexDirection: "column", width: 24, flexShrink: 0, children: [_jsx(Box, { children: _jsx(Text, { dimColor: true, children: t('help-clear-input') }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: t('help-history-nav') }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: t('help-move-cursor') }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: t('help-word-jumps', { mod: modLabel }) }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: t('help-complete-command') }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: t('help-cycle-mode') }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: t('help-open-editor') }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: t('help-fold-todos', { mod: modLabel }) }) })] }));
+    const commandRows = chrome.map(command => (_jsx(HelpCommandRow, { command: command, onPick: onCommandPick }, command.name)));
+    const compactCommandRows = chrome.map(command => (_jsx(HelpCommandRow, { command: command, onPick: onCommandPick }, command.name)));
+    const commandList = (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsx(Text, { dimColor: true, children: t('help-commands-title') }), commandRows] }));
+    const content = (_jsxs(Box, { paddingX: 2, flexDirection: "row", gap: 4, children: [primaryShortcuts, secondaryShortcuts, _jsx(Box, { flexDirection: "column", flexShrink: 1, children: commandList })] }));
+    // Standalone renders (notably the i18n verifier) keep the historical
+    // intrinsic-height layout. The real prompt overlay supplies an explicit
+    // height so a growing command registry cannot escape the terminal.
+    if (viewportHeight === undefined)
+        return content;
+    const compact = viewportWidth !== undefined && viewportWidth < 72;
+    return (_jsxs(Box, { height: viewportHeight, flexDirection: "column", children: [compact ? (_jsxs(ScrollBox, { ref: scrollRef, flexDirection: "column", flexGrow: 1, flexShrink: 1, paddingX: 2, children: [primaryShortcuts, secondaryShortcuts, _jsx(Text, { dimColor: true, children: t('help-commands-title') }), compactCommandRows] })) : (_jsxs(Box, { paddingX: 2, flexDirection: "row", gap: 4, flexGrow: 1, children: [primaryShortcuts, secondaryShortcuts, _jsx(ScrollBox, { ref: scrollRef, flexDirection: "column", flexGrow: 1, flexShrink: 1, children: commandList })] })), _jsx(Box, { paddingX: 2, flexShrink: 0, children: _jsx(Text, { dimColor: true, wrap: "truncate-end", children: t('help-scroll-hint') }) })] }));
+}
+/** One `/name — description` row; clickable (hover background) when the
+ *  host wired a pick handler — the menu IS a control surface. */
+function HelpCommandRow({ command, onPick, }) {
+    const [hovered, setHovered] = React.useState(false);
+    const clickable = onPick !== undefined;
+    return (_jsx(Box, { flexShrink: 0, onClick: clickable ? () => onPick(command.name) : undefined, onMouseEnter: clickable ? () => setHovered(true) : undefined, onMouseLeave: clickable ? () => setHovered(false) : undefined, backgroundColor: clickable && hovered ? 'userMessageBackgroundHover' : undefined, children: _jsxs(Text, { dimColor: true, wrap: "truncate-end", children: ["/", command.name, " \u2014 ", localizedDescription(command)] }) }));
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { type HistoryEntry } from '../history.js';
+/**
+ * The ctrl+r history search dialog: a permission-colored Pane with a bold
+ * title, the ⌕ SearchBox, the filtered history as ListItem rows (newest
+ * first), and the ↑/↓ · Enter · Esc hint line. Keyboard handling lives in
+ * the caller (Chat).
+ */
+export declare function HistorySearchDialog({ query, cursorOffset, matches, focusIndex, onPick, }: {
+    query: string;
+    cursorOffset: number;
+    matches: readonly HistoryEntry[];
+    focusIndex: number;
+    /** 鼠标点击行（fullscreen）：上报绝对索引——Chat 用与 Enter 相同的
+     *  填入/提交路径处理。 */
+    onPick?: (index: number) => void;
+}): React.ReactNode;
+//# sourceMappingURL=HistorySearchDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HistorySearchDialog.d.ts","sourceRoot":"","sources":["../../../src/components/HistorySearchDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,EAAkB,KAAK,YAAY,EAAE,MAAM,eAAe,CAAA;AAEjE;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,YAAY,EACZ,OAAO,EACP,UAAU,EACV,MAAM,GACP,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;IAChC,UAAU,EAAE,MAAM,CAAA;IAClB;qBACiB;IACjB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC,GAAG,KAAK,CAAC,SAAS,CAyDlB"}

package/lib/types/components/HistorySearchDialog.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from '../i18n.js';
+import { Box, Text } from '../ui.js';
+import { useTerminalFocus } from '../ink/hooks/use-terminal-focus.js';
+import { Pane } from './design-system/Pane.js';
+import { ListItem } from './design-system/ListItem.js';
+import { HintLine } from './design-system/HintLine.js';
+import { SearchBox } from './SearchBox.js';
+import { listWindow } from './listWindow.js';
+import { useOverlayListRows } from './OverlayAbove.js';
+import { historyEntryId } from '../history.js';
+/**
+ * The ctrl+r history search dialog: a permission-colored Pane with a bold
+ * title, the ⌕ SearchBox, the filtered history as ListItem rows (newest
+ * first), and the ↑/↓ · Enter · Esc hint line. Keyboard handling lives in
+ * the caller (Chat).
+ */
+export function HistorySearchDialog({ query, cursorOffset, matches, focusIndex, onPick, }) {
+    const isTerminalFocused = useTerminalFocus();
+    // 焦点窗口化按行预算：每项恒 2 行（命令 + age 描述，ListItem 保证单行
+    // 截断），容器 gap={1} 项间再空 1 行。只数项数会把焦点裁出浮层（二次
+    // 审查实证）。
+    // 预算来自最近一层 OverlayAbove 的有效高度，减去框架行（按实际渲染数）：
+    // 挂载包裹 marginTop 1 + Pane 2 + 标题 1 + gap 1 + SearchBox 3（圆角边框）
+    // + gap 1 + gap 1 + 页脚 1 = 11。
+    const listRows = useOverlayListRows(11);
+    const { start, end } = listWindow(matches.map(() => 2), focusIndex, listRows, 1);
+    return (_jsx(Pane, { color: "permission", children: _jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { bold: true, color: "permission", children: t('history-search-title') }), _jsx(SearchBox, { query: query, cursorOffset: cursorOffset, isFocused: true, isTerminalFocused: isTerminalFocused, placeholder: t('history-search-placeholder') }), matches.length === 0 ? (_jsx(Text, { dimColor: true, children: t('history-search-empty') })) : (matches.slice(start, end).map((entry, index) => {
+                    const absoluteIndex = start + index;
+                    return (_jsx(ListItem, { isFocused: absoluteIndex === focusIndex, 
+                        // The SearchBox owns the native-cursor declaration while this
+                        // dialog is open — result rows must not park the cursor on
+                        // themselves, or IME preedit lands on a list row.
+                        declareCursor: false, description: formatRelativeAge(entry.ts), showScrollUp: absoluteIndex === start && start > 0, showScrollDown: absoluteIndex === end - 1 && end < matches.length, onClick: onPick ? () => onPick(absoluteIndex) : undefined, children: entry.text }, historyEntryId(entry, absoluteIndex)));
+                })), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: t('hint-history-search') }) })] }) }));
+}
+/** Localized relative-age labels such as "now" and "5m ago". */
+function formatRelativeAge(ts) {
+    const elapsed = Date.now() - ts;
+    if (elapsed < 60_000)
+        return t('time-now');
+    if (elapsed < 3_600_000)
+        return t('time-minutes-ago', { n: Math.floor(elapsed / 60_000) });
+    if (elapsed < 86_400_000)
+        return t('time-hours-ago', { n: Math.floor(elapsed / 3_600_000) });
+    return t('time-days-ago', { n: Math.floor(elapsed / 86_400_000) });
+}

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import type { TranscriptImage } from '../dsh-adapter/transcript-images.js';
+/**
+ * The shared modal image preview: one centered card over a click-catcher
+ * over the visible part of its parent, used by the composer's `[Image #N]`
+ * tokens and the transcript thumbnails. Chat mounts it inside the
+ * transcript row, so the prompt, status rows and sticky header stay visible
+ * and untouched; only while the fullscreen draft editor is open does it sit
+ * at the root and cover the whole screen. The card is sized from the
+ * region the caller reports (the transcript viewport), refined by the
+ * parent's visible cell box on later commits; it renders on the layer's
+ * first frame.
+ *
+ * The card's title sits in its top border, centered: `Image #N — PNG ·
+ * 361×379 · 19.0 KB · name.png`. The card is at least as wide as its
+ * title, so a small image never squeezes the file name; when even the
+ * region is too narrow, the name is shortened in its middle first and
+ * dropped from the title last. Images staged from a file or the clipboard
+ * in this process show their source path on the card's bottom row, head
+ * and tail kept and the middle elided. Controls sit below the image;
+ * Esc and a click outside close (Chat's key chain and the catcher).
+ * Catcher and card are sibling absolute nodes — see the comment at the
+ * card for why the card is not the catcher's child. The layer only paints
+ * themed cells — terminal graphics stay inside the host `Image` primitive,
+ * which keeps its own capability fallback.
+ */
+export declare function ImagePreviewOverlay({ image, onClose, region, title, navigation, }: {
+    readonly image: TranscriptImage;
+    readonly onClose: () => void;
+    /**
+     * Cell box of the region the layer fills, known to the caller before the
+     * first paint (Chat passes the transcript viewport). The card renders at
+     * this size on its first frame; without it the first frame falls back to
+     * the terminal size. Either way the parent's visible box refines it on
+     * the next commit.
+     */
+    readonly region?: {
+        readonly columns: number;
+        readonly rows: number;
+    };
+    /** Leading title text, e.g. the composer token `Image #2`. Defaults to
+     *  the generic image label. */
+    readonly title?: string;
+    readonly navigation?: {
+        readonly index: number;
+        readonly total: number;
+        readonly onPrevious: () => void;
+        readonly onNext: () => void;
+    };
+}): React.ReactNode;
+//# sourceMappingURL=ImagePreviewOverlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImagePreviewOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/ImagePreviewOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAA;AAiC1E;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,OAAO,EACP,MAAM,EACN,KAAK,EACL,UAAU,GACX,EAAE;IACD,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAA;IAC/B,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAA;IAC5B;;;;;;OAMG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE;QAAE,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IACrE;mCAC+B;IAC/B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,UAAU,CAAC,EAAE;QACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;QACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;QACtB,QAAQ,CAAC,UAAU,EAAE,MAAM,IAAI,CAAA;QAC/B,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAA;KAC5B,CAAA;CACF,GAAG,KAAK,CAAC,SAAS,CAwNlB"}

package/lib/types/components/ImagePreviewOverlay.js

@@ -0,0 +1,269 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Image, Text, useTerminalImages, useTerminalSize, useTerminalImageCellSize } from '../ui.js';
+import measureElement from '../ink/measure-element.js';
+import useApp from '../ink/hooks/use-app.js';
+import { stringWidth } from '../ink/stringWidth.js';
+import { truncateToWidth } from '../ink/truncateToWidth.js';
+import { DEFAULT_TERMINAL_CELL_SIZE } from '../ink/terminal-image.js';
+import { transcriptImageLabel } from './messages/TranscriptImages.js';
+import { formatBytes } from '../sessions/format.js';
+import { truncateMiddle } from '../utils/truncateMiddle.js';
+import { getLang, subscribeLang, t } from '../i18n.js';
+import { inspectionCells, IMAGE_ZOOM_LEVELS } from './messages/imageInspection.js';
+import { useImageInspection } from './messages/useImageInspection.js';
+import { exportOriginalImage } from './messages/originalImage.js';
+import { openFile } from '../utils/openExternal.js';
+import { useTooltip } from './Tooltip.js';
+/** Below these viewport sizes the card is metadata-only: an image box would
+ *  be too small to read and the chrome itself barely fits. */
+const MIN_GRAPHICS_COLUMNS = 40;
+const MIN_GRAPHICS_ROWS = 12;
+/** The card is a floating layer, not a screen: its IMAGE may take at most
+ *  this share of its region's width and height, so the conversation stays
+ *  visible around it. The card itself may be wider than the image when the
+ *  title needs the room. Card chrome outside the image box: title row +
+ *  bottom border + toolbar + 1 padding row above and below = 5 rows; 2 border cols +
+ *  2×2 padding = 6 cols. */
+const PREVIEW_MAX_WIDTH_RATIO = 0.95;
+const PREVIEW_MAX_HEIGHT_RATIO = 0.95;
+const CARD_CHROME_ROWS = 5;
+const CARD_CHROME_COLS = 6;
+/** Metadata-only card (no image box): title row + one body row + bottom border. */
+const CAPTION_ONLY_ROWS = 3;
+/** Narrowest card: room for a readable title. */
+const MIN_CARD_COLUMNS = 40;
+/** A file name shortened below this many cells reads as noise; the title
+ *  drops it instead (the path row still names the file when known). */
+const MIN_TITLE_NAME_COLUMNS = 8;
+/**
+ * The shared modal image preview: one centered card over a click-catcher
+ * over the visible part of its parent, used by the composer's `[Image #N]`
+ * tokens and the transcript thumbnails. Chat mounts it inside the
+ * transcript row, so the prompt, status rows and sticky header stay visible
+ * and untouched; only while the fullscreen draft editor is open does it sit
+ * at the root and cover the whole screen. The card is sized from the
+ * region the caller reports (the transcript viewport), refined by the
+ * parent's visible cell box on later commits; it renders on the layer's
+ * first frame.
+ *
+ * The card's title sits in its top border, centered: `Image #N — PNG ·
+ * 361×379 · 19.0 KB · name.png`. The card is at least as wide as its
+ * title, so a small image never squeezes the file name; when even the
+ * region is too narrow, the name is shortened in its middle first and
+ * dropped from the title last. Images staged from a file or the clipboard
+ * in this process show their source path on the card's bottom row, head
+ * and tail kept and the middle elided. Controls sit below the image;
+ * Esc and a click outside close (Chat's key chain and the catcher).
+ * Catcher and card are sibling absolute nodes — see the comment at the
+ * card for why the card is not the catcher's child. The layer only paints
+ * themed cells — terminal graphics stay inside the host `Image` primitive,
+ * which keeps its own capability fallback.
+ */
+export function ImagePreviewOverlay({ image, onClose, region, title, navigation, }) {
+    // The card must exist on the layer's FIRST frame. A frame with an empty
+    // catcher followed by a frame with the card marks the catcher dirty, and
+    // the renderer clears a dirty absolute node's whole rect before repainting
+    // it — the transparent catcher covers the transcript row, so that clear
+    // wiped the conversation underneath (visible as a blank flash on the
+    // first open and as a blank transcript on every reopen).
+    // Re-measure on every commit: the transcript row also changes height when
+    // bottom-chrome rows (spinner, pill, panels) come and go, not only on
+    // terminal resize. setState with an equal box is a no-op, so this settles.
+    const terminal = useTerminalSize();
+    const { stdout } = useApp();
+    React.useSyncExternalStore(subscribeLang, getLang);
+    const catcherRef = React.useRef(null);
+    const [bounds, setBounds] = React.useState(() => region ?? { columns: terminal.columns, rows: terminal.rows });
+    React.useLayoutEffect(() => {
+        const node = catcherRef.current;
+        const parent = node?.parentNode;
+        if (!node || !parent)
+            return;
+        const { width } = measureElement(node);
+        const { height } = measureElement(parent);
+        if (width <= 0 || height <= 0)
+            return;
+        // Inline layouts extend into scrollback. Anchor the layer to the
+        // parent's visible tail, using Ink's extra cursor-restore row when the
+        // root overflows. Measuring the parent keeps our own height out of the
+        // next pass's input.
+        let bottom = height;
+        let rootHeight = height;
+        for (let ancestor = parent; ancestor; ancestor = ancestor.parentNode) {
+            bottom += ancestor.yogaNode?.getComputedTop() ?? 0;
+            rootHeight = ancestor.yogaNode?.getComputedHeight() ?? rootHeight;
+        }
+        const terminalRows = stdout.rows ?? terminal.rows;
+        const viewportTop = rootHeight > terminalRows ? rootHeight - terminalRows + 1 : 0;
+        const visibleHeight = Math.max(1, Math.min(height, bottom - viewportTop));
+        setBounds(previous => previous.columns === width && previous.rows === visibleHeight
+            ? previous
+            : { columns: width, rows: visibleHeight });
+    });
+    const columns = bounds.columns;
+    const rows = bounds.rows;
+    const graphicsFit = columns >= MIN_GRAPHICS_COLUMNS && rows >= MIN_GRAPHICS_ROWS;
+    const graphicsAvailable = useTerminalImages(graphicsFit);
+    const cell = useTerminalImageCellSize();
+    // Zoom belongs to the attachment (`image.id`), not to the facade object:
+    // a caller may hand a fresh facade for the same attachment on every
+    // render, and keying on the object would reset the view each commit (#885).
+    const imageId = image.id;
+    const [view, setView] = React.useState({ imageId, zoom: 0 });
+    React.useEffect(() => {
+        setView(previous => previous.imageId === imageId ? previous : { imageId, zoom: 0 });
+    }, [imageId]);
+    const zoom = view.imageId === imageId && cell && graphicsAvailable ? view.zoom : 0;
+    const setZoom = (value) => setView({ imageId, zoom: value });
+    const maxImageColumns = Math.max(1, Math.min(columns - 2, Math.floor(columns * PREVIEW_MAX_WIDTH_RATIO)) - CARD_CHROME_COLS);
+    const navigationRows = navigation && navigation.total > 1 && rows >= 6 ? 1 : 0;
+    const maxImageRows = Math.max(1, Math.min(rows - 2, Math.floor(rows * PREVIEW_MAX_HEIGHT_RATIO)) - CARD_CHROME_ROWS - 1 - navigationRows);
+    const [imageWidth, imageHeight] = !graphicsFit ? [0, 0] : zoom === 0
+        ? fitPreviewCells(image, maxImageColumns, maxImageRows, cell ?? DEFAULT_TERMINAL_CELL_SIZE)
+        : inspectionCells(maxImageColumns, maxImageRows, cell);
+    const inspection = useImageInspection(image, graphicsAvailable, imageWidth, imageHeight, cell, zoom);
+    // Title: `Image #N — PNG · 361×379 · 19.0 KB · name.png`, fitted to the
+    // widest card the region allows. The attachment id is a content hash from
+    // the host attachment store, not a path, so it is not shown; the source
+    // path, when this process staged the image, gets its own row.
+    const label = transcriptImageLabel(image);
+    const format = image.mediaType === undefined
+        ? undefined
+        : image.mediaType.replace(/^image\//u, '').replace(/\+xml$/u, '').toUpperCase();
+    const details = [
+        format,
+        `${image.width}×${image.height}`,
+        formatBytes(image.bytes),
+        zoom === 0 ? undefined : `${zoom * 100}%`,
+    ].filter((part) => part !== undefined && part !== '');
+    const maxCardColumns = Math.max(1, columns);
+    const fullTitle = fitTitle(title ?? t('transcript-image'), details, image.name, Math.max(0, maxCardColumns - CARD_CHROME_COLS));
+    const stateLine = !graphicsAvailable || inspection.source !== undefined
+        ? t('transcript-image-ready', { name: label })
+        : inspection.failed
+            ? t('transcript-image-unavailable', { name: label })
+            : t('transcript-image-loading', { name: label });
+    const pathRows = 1 + navigationRows;
+    // The card is positioned by hand, as an absolute SIBLING of the catcher
+    // rather than its child. Any update inside the card (image decoded, size
+    // refined) marks its ancestors dirty, and the renderer clears a dirty
+    // absolute node's whole rect before repainting it: a transparent parent
+    // spanning the transcript row would wipe the conversation underneath.
+    // The catcher has no children, so image decoding does not dirty it.
+    // Width: the image plus chrome, never narrower than the title needs.
+    const cardColumns = Math.max(1, Math.min(maxCardColumns, Math.max(graphicsFit ? imageWidth + CARD_CHROME_COLS : 0, stringWidth(fullTitle) + CARD_CHROME_COLS, MIN_CARD_COLUMNS)));
+    const pathLabel = t('image-preview-open-original');
+    const pathRow = `${pathLabel}: ${truncateMiddle(image.path ?? label, Math.max(1, cardColumns - CARD_CHROME_COLS - stringWidth(pathLabel) - 2))}`;
+    const cardRows = Math.max(1, Math.min(rows, (graphicsFit
+        ? imageHeight + CARD_CHROME_ROWS
+        : CAPTION_ONLY_ROWS) + pathRows));
+    const cardLeft = Math.max(0, Math.floor((columns - cardColumns) / 2));
+    const cardBottom = Math.max(0, Math.ceil((rows - cardRows) / 2));
+    const titleRow = borderTitleRow(fullTitle, cardColumns);
+    // Stable click handler: a new function identity each render would count
+    // as a prop change and dirty the catcher.
+    const onCloseRef = React.useRef(onClose);
+    React.useLayoutEffect(() => { onCloseRef.current = onClose; }, [onClose]);
+    const closeFromCatcher = React.useCallback((event) => {
+        // Click outside the card (anywhere on the catcher) closes. The card is a
+        // later sibling in paint order, so its own clicks never reach here.
+        event.stopImmediatePropagation();
+        onCloseRef.current();
+    }, []);
+    const swallow = React.useCallback((event) => {
+        event.stopImmediatePropagation();
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { ref: catcherRef, position: "absolute", bottom: 0, left: 0, width: "100%", height: rows, flexShrink: 0, overflow: "hidden", backdrop: "dim", onClick: closeFromCatcher }), _jsxs(Box, { position: "absolute", bottom: cardBottom, left: cardLeft, width: cardColumns, height: cardRows, flexDirection: "column", flexShrink: 0, overflow: "hidden", backgroundColor: "toolCardBackground", opaque: true, onClick: swallow, children: [_jsx(Text, { color: "text", wrap: "truncate", children: titleRow }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, borderStyle: "round", borderColor: "inactive", borderTop: false, paddingX: 2, children: [_jsx(Box, { flexGrow: 1, alignItems: "center", justifyContent: "center", onDragStart: inspection.drag, onDragMove: inspection.drag, onDragEnd: inspection.drag, onWheel: event => { event.stopImmediatePropagation(); if (zoom > 0)
+                                    inspection.pan(event.deltaX, event.deltaY); }, children: graphicsFit ? (_jsx(Image, { presentation: "preview", source: inspection.source, width: imageWidth, height: imageHeight, alt: label, children: _jsx(Box, { width: imageWidth, height: imageHeight, alignItems: "center", justifyContent: "center", children: _jsxs(Text, { dimColor: true, wrap: "truncate", children: ["[", stateLine, "]"] }) }) })) : (_jsx(Text, { dimColor: true, wrap: "truncate", children: label })) }), graphicsFit ? _jsxs(Box, { height: 1, flexShrink: 0, children: [_jsx(PreviewControl, { label: t('image-preview-fit'), title: t('image-preview-fit'), active: zoom === 0, onClick: () => setZoom(0) }), _jsx(PreviewControl, { label: "100%", title: cell ? t('image-preview-actual') : t('image-preview-no-metrics'), active: zoom === 1, disabled: !cell || !graphicsAvailable, onClick: () => setZoom(1) }), _jsx(PreviewControl, { label: "-", title: t('image-preview-zoom-out'), disabled: zoom <= 1, onClick: () => setZoom(Math.max(1, zoom / 2)) }), _jsx(PreviewControl, { label: "+", title: t('image-preview-zoom-in'), disabled: !cell || !graphicsAvailable || zoom >= IMAGE_ZOOM_LEVELS.at(-1), onClick: () => setZoom(zoom === 0 ? 1 : zoom * 2) }), _jsx(PreviewControl, { label: "\u2190", title: t('image-preview-left'), disabled: zoom === 0, onClick: () => inspection.pan(-1, 0) }), _jsx(PreviewControl, { label: "\u2191", title: t('image-preview-up'), disabled: zoom === 0, onClick: () => inspection.pan(0, -1) }), _jsx(PreviewControl, { label: "\u2193", title: t('image-preview-down'), disabled: zoom === 0, onClick: () => inspection.pan(0, 1) }), _jsx(PreviewControl, { label: "\u2192", title: t('image-preview-right'), disabled: zoom === 0, onClick: () => inspection.pan(1, 0) })] }) : null, navigationRows && navigation ? _jsxs(Box, { height: 1, flexShrink: 0, justifyContent: "center", children: [_jsx(PreviewControl, { label: "\u2039", title: t('image-preview-previous'), disabled: navigation.index <= 0, onClick: navigation.onPrevious }), _jsxs(Text, { children: [navigation.index + 1, "/", navigation.total] }), _jsx(PreviewControl, { label: "\u203A", title: t('image-preview-next'), disabled: navigation.index >= navigation.total - 1, onClick: navigation.onNext })] }) : null, _jsx(OriginalImageLink, { image: image, label: pathRow }, image.id)] })] })] }));
+}
+/**
+ * `lead — a · b · c · name` fitted to `maxWidth` cells. The name yields
+ * first: shortened in its middle (stem start and extension survive), then
+ * dropped when fewer than {@link MIN_TITLE_NAME_COLUMNS} cells remain for
+ * it. Only after that is the rest cut from the end.
+ */
+function fitTitle(lead, details, name, maxWidth) {
+    const base = details.length === 0 ? lead : `${lead} — ${details.join(' · ')}`;
+    if (name === undefined || name === '')
+        return truncateEnd(base, maxWidth);
+    const prefix = details.length === 0 ? `${lead} — ` : `${base} · `;
+    const full = prefix + name;
+    if (stringWidth(full) <= maxWidth)
+        return full;
+    const room = maxWidth - stringWidth(prefix);
+    if (room >= MIN_TITLE_NAME_COLUMNS)
+        return prefix + truncateMiddle(name, room);
+    return truncateEnd(base, maxWidth);
+}
+function truncateEnd(text, maxWidth) {
+    if (stringWidth(text) <= maxWidth)
+        return text;
+    return maxWidth <= 1 ? '' : `${truncateToWidth(text, maxWidth - 1)}…`;
+}
+/**
+ * `╭─── title ───╮` sized to the card width. The title is already fitted
+ * by {@link fitTitle}; this only guards the degenerate case and keeps one
+ * dash on each side of the corners so the row still reads as a border.
+ */
+function borderTitleRow(title, cardColumns) {
+    if (cardColumns < 2)
+        return cardColumns === 1 ? '╭' : '';
+    const inner = Math.max(0, cardColumns - 2);
+    const text = truncateEnd(title, Math.max(0, inner - 4));
+    const labelled = text === '' ? '' : ` ${text} `;
+    const fill = Math.max(0, inner - stringWidth(labelled));
+    const left = Math.floor(fill / 2);
+    return `╭${'─'.repeat(left)}${labelled}${'─'.repeat(fill - left)}╮`;
+}
+/** Aspect-preserving layout using measured cell pixels, or the conventional
+ *  1:2 cell when unavailable. The host independently fits the actual raster. */
+function fitPreviewCells(image, maxWidth, maxHeight, cell) {
+    const ratio = Math.max(0.1, Math.min(10, image.width / image.height));
+    let width = Math.max(1, maxWidth);
+    const cellRatio = cell.height / cell.width;
+    let height = Math.max(1, Math.round(width / (cellRatio * ratio)));
+    if (height > maxHeight) {
+        height = Math.max(1, maxHeight);
+        width = Math.max(1, Math.min(maxWidth, Math.round(cellRatio * height * ratio)));
+    }
+    return [width, height];
+}
+function PreviewControl({ label, title, disabled = false, active = false, onClick }) {
+    const tooltip = useTooltip(title);
+    return _jsx(Box, { width: stringWidth(label) + 2, height: 1, flexShrink: 0, justifyContent: "center", ...tooltip, onDragStart: stopControlDrag, onClick: event => { event.stopImmediatePropagation(); if (!disabled)
+            onClick(); }, children: _jsx(Text, { dimColor: disabled, bold: active, underline: active, children: label }) });
+}
+// Capture an unmodified press as a button gesture. Repeated +/- clicks must
+// not become terminal word selection; moving off a button cancels its click.
+function stopControlDrag(event) {
+    event.stopImmediatePropagation();
+}
+function OriginalImageLink({ image, label }) {
+    const [status, setStatus] = React.useState('idle');
+    const pending = React.useRef(null);
+    React.useEffect(() => {
+        setStatus('idle');
+        return () => { pending.current?.abort(); pending.current = null; };
+    }, [image.id]);
+    const tooltip = useTooltip(image.path ?? image.name ?? t('image-preview-open-original'));
+    return _jsx(Box, { height: 1, flexShrink: 0, ...tooltip, onDragStart: stopControlDrag, onClick: event => {
+            event.stopImmediatePropagation();
+            if (pending.current && !pending.current.signal.aborted)
+                return;
+            const controller = new AbortController();
+            pending.current = controller;
+            setStatus('loading');
+            void exportOriginalImage(image, controller.signal).then(path => {
+                if (controller.signal.aborted)
+                    return;
+                openFile(path);
+                setStatus('idle');
+            }, () => { if (!controller.signal.aborted)
+                setStatus('failed'); }).finally(() => {
+                if (pending.current === controller)
+                    pending.current = null;
+            });
+        }, children: _jsx(Text, { underline: true, wrap: "truncate", children: status === 'loading' ? t('image-preview-opening') :
+                status === 'failed' ? t('image-preview-open-failed') : label }) });
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { type BackgroundJobState } from '../dsh-adapter/jobs.js';
+export interface JobsPanelProps {
+    jobs: readonly BackgroundJobState[];
+    onClose: () => void;
+    /** Kill the focused live job (`job_kill` with the session's authority). */
+    onKill: (id: string) => void;
+}
+/**
+ * `/jobs` overlay panel — every background job of the current session with
+ * live status, elapsed/total duration and terminal detail (exit code).
+ * Keyboard: ↑/↓ move, k kills the focused live job, Esc closes; the focused
+ * 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;
+//# sourceMappingURL=JobsPanel.d.ts.map

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

@@ -0,0 +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;AAS7G,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;AAkGD;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,cAAc,GAAG,KAAK,CAAC,SAAS,CA2FpF"}

package/lib/types/components/JobsPanel.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 { t } from '../i18n.js';
+import { Divider } from './design-system/Divider.js';
+import { ExitButton } from './SubagentDashboard.js';
+import { isPlainReturnInput } from '../utils/modifiers.js';
+import { isMinimalMode } from '../minimalMode.js';
+import { stringWidth } from '../ink/stringWidth.js';
+function statusInfo(status) {
+    const minimal = isMinimalMode();
+    switch (status) {
+        case 'completed':
+            return { glyph: minimal ? '✓' : '●', label: t('jobs-status-completed'), color: minimal ? undefined : 'success' };
+        case 'failed':
+            return { glyph: minimal ? '×' : '●', label: t('jobs-status-failed'), color: minimal ? undefined : 'error' };
+        case 'killed':
+            return { glyph: minimal ? '×' : '●', label: t('jobs-status-killed'), color: minimal ? undefined : 'error' };
+        case 'stopping':
+            return { glyph: minimal ? '·' : '●', label: t('jobs-status-stopping'), color: minimal ? undefined : 'warning' };
+        default:
+            return { glyph: minimal ? '·' : '●', label: t('jobs-status-running'), color: minimal ? undefined : 'warning' };
+    }
+}
+/** Hard single-line clip by display width (shared rule with the job card). */
+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;
+    }
+    return index < text.length ? `${text.slice(0, index)}…` : text;
+}
+function JobRowLine({ job, focused }) {
+    const { columns } = useTerminalSize();
+    const info = statusInfo(job.status);
+    const duration = formatJobDuration(job);
+    const detail = job.detail !== undefined && job.detail !== '' ? job.detail : undefined;
+    // Reserve: glyph(2) id(~9) kind(~7) duration(~7) status(~6) separators(5×2)
+    // — the label takes the rest and hard-clips instead of wrapping.
+    const labelWidth = Math.max(10, (columns ?? 80) - 46);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: focused ? 'accent' : undefined, children: focused ? '❯' : ' ' }), _jsx(Text, { color: info.color, children: info.glyph }), _jsx(Text, { bold: focused, color: focused ? 'accent' : undefined, children: job.id }), _jsx(Text, { dimColor: true, children: "\u00B7" }), _jsx(Text, { dimColor: true, children: job.kind }), _jsx(Text, { dimColor: true, children: "\u00B7" }), _jsx(Text, { bold: focused, children: clipLine(job.label, labelWidth) }), _jsx(Box, { flexGrow: 1 }), _jsx(Text, { dimColor: true, children: duration }), detail !== undefined && _jsxs(_Fragment, { children: [_jsx(Text, { dimColor: true, children: "\u00B7" }), _jsx(Text, { dimColor: true, children: detail })] }), _jsx(Text, { dimColor: true, children: "\u00B7" }), _jsx(Text, { color: info.color, children: info.label })] }), focused && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, wrap: "truncate", children: `    ${t('jobs-card-prefix')}${clipLine(job.label, Math.max(10, labelWidth + 24))}` }), job.command !== undefined && (_jsx(Text, { dimColor: true, wrap: "truncate", children: `    ${t('jobs-panel-command')} ${clipLine(job.command, Math.max(10, labelWidth + 24))}` })), _jsxs(Text, { dimColor: true, wrap: "truncate", children: [`    ${t('jobs-panel-started')} ${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.outputLines.length > 0 ? (job.outputLines.map((line, index) => (_jsx(Text, { dimColor: true, wrap: "truncate", children: `    │ ${clipLine(line, Math.max(10, labelWidth + 24))}` }, `${job.id}-detail-${index}`)))) : (_jsx(Text, { dimColor: true, wrap: "truncate", children: `    └ ${t('jobs-panel-no-output-yet')}` }))] }))] }));
+}
+/** HH:MM:SS wall-clock of an epoch ms value (locale-independent). */
+function timeOf(ms) {
+    const date = new Date(ms);
+    const pad = (value) => String(value).padStart(2, '0');
+    return `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
+}
+/**
+ * `/jobs` overlay panel — every background job of the current session with
+ * live status, elapsed/total duration and terminal detail (exit code).
+ * Keyboard: ↑/↓ move, k kills the focused live job, Esc closes; the focused
+ * 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);
+    const scrollRef = React.useRef(null);
+    const { rows } = useTerminalSize();
+    // 1s tick keeps live durations counting while the panel is open.
+    const [clockRef] = useAnimationFrame(1000);
+    const focus = Math.min(focusIndex, Math.max(0, jobs.length - 1));
+    useInput((input, key, event) => {
+        if (key.escape || (key.ctrl && input === 'c')) {
+            event.stopImmediatePropagation();
+            onClose();
+            return;
+        }
+        if (key.upArrow) {
+            event.stopImmediatePropagation();
+            setFocusIndex(i => Math.max(0, i - 1));
+            scrollRef.current?.scrollBy(-1);
+            return;
+        }
+        if (key.downArrow) {
+            event.stopImmediatePropagation();
+            setFocusIndex(i => Math.min(jobs.length - 1, i + 1));
+            scrollRef.current?.scrollBy(1);
+            return;
+        }
+        if (input === 'k') {
+            const selected = jobs[focus];
+            if (selected !== undefined && (selected.status === 'running' || selected.status === 'stopping')) {
+                event.stopImmediatePropagation();
+                onKill(selected.id);
+            }
+            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)) {
+            event.stopImmediatePropagation();
+            return;
+        }
+        event.stopImmediatePropagation();
+    });
+    const running = jobs.filter(job => job.status === 'running' || job.status === 'stopping').length;
+    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 }, 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/LangPicker.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type Lang } from '../i18n.js';
+/**
+ * `/lang` en/zh picker: bare `/lang` opens this picker (the current language
+ * marked) and Enter applies the choice through the same path as `/lang <id>`.
+ */
+export declare function LangPicker({ focusIndex, currentLang, onPick, }: {
+    focusIndex: number;
+    currentLang: Lang;
+    /** Mouse pick (fullscreen): clicked row's absolute index (Chat applies
+     *  the same code path as the keyboard Enter). */
+    onPick?: (index: number) => void;
+}): React.ReactNode;
+//# sourceMappingURL=LangPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LangPicker.d.ts","sourceRoot":"","sources":["../../../src/components/LangPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAY,KAAK,IAAI,EAAE,MAAM,YAAY,CAAA;AAMhD;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,UAAU,EACV,WAAW,EACX,MAAM,GACP,EAAE;IACD,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,IAAI,CAAA;IACjB;qDACiD;IACjD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC,GAAG,KAAK,CAAC,SAAS,CAyBlB"}

package/lib/types/components/LangPicker.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LANGS, t } from '../i18n.js';
+import { Box, Text } from '../ui.js';
+import { Pane } from './design-system/Pane.js';
+import { Select } from './Select.js';
+import { HintLine } from './design-system/HintLine.js';
+/**
+ * `/lang` en/zh picker: bare `/lang` opens this picker (the current language
+ * marked) and Enter applies the choice through the same path as `/lang <id>`.
+ */
+export function LangPicker({ focusIndex, currentLang, 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('lang-picker-title') }) }), _jsx(Select, { options: LANGS.map(lang => ({
+                        value: lang,
+                        label: lang === 'zh' ? '中文' : 'English',
+                        description: t(lang === 'zh' ? 'lang-zh-desc' : 'lang-en-desc'),
+                    })), focusIndex: focusIndex, selectedValue: currentLang, onPick: onPick ? index => onPick(index) : undefined }), _jsx(Text, { dimColor: true, italic: true, children: _jsx(HintLine, { text: t('hint-confirm-exit') }) })] }) }));
+}