@deepseek-harness-tui/dsh-tui 0.5.0

package/lib/types/components/MarkdownTable.js

@@ -0,0 +1,272 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import wrapAnsi from 'wrap-ansi';
+import { useTerminalSize } from '../ink/hooks/use-terminal-size.js';
+import Text from '../ink/components/Text.js';
+import { stringWidth } from '../ink/stringWidth.js';
+import stripAnsi from 'strip-ansi';
+import { formatToken, padAligned } from '../cc/markdown.js';
+/** Accounts for parent indentation and terminal resize races (from the leak). */
+const SAFETY_MARGIN = 4;
+/** Minimum column width to prevent degenerate layouts */
+const MIN_COLUMN_WIDTH = 3;
+/**
+ * Maximum number of lines per row before switching to vertical format.
+ */
+const MAX_ROW_LINES = 4;
+/** ANSI escape codes for text formatting */
+const ANSI_BOLD_START = '\x1b[1m';
+const ANSI_BOLD_END = '\x1b[22m';
+/**
+ * Wrap text to fit within a given width, returning array of lines.
+ * ANSI-aware: preserves styling across line breaks.
+ *
+ * @param hard - If true, break words that exceed width. Default false.
+ */
+function wrapText(text, width, options) {
+    if (width <= 0)
+        return [text];
+    // Strip trailing whitespace/newlines before wrapping.
+    const trimmedText = text.trimEnd();
+    const wrapped = wrapAnsi(trimmedText, width, {
+        hard: options?.hard ?? false,
+        trim: false,
+        wordWrap: true,
+    });
+    // Filter out empty lines that result from trailing newlines.
+    const lines = wrapped.split('\n').filter(line => line.length > 0);
+    // Ensure we always return at least one line (empty string for empty cells)
+    return lines.length > 0 ? lines : [''];
+}
+/**
+ * Renders a markdown table with proper column sizing, cell wrapping and box
+ * borders (ported from the leak's `MarkdownTable.tsx`). Falls back to a
+ * vertical key-value format on narrow terminals.
+ */
+export function MarkdownTable({ token, highlight, forceWidth, }) {
+    const { columns: actualTerminalWidth } = useTerminalSize();
+    const terminalWidth = forceWidth ?? actualTerminalWidth;
+    // Format cell content to ANSI string
+    function formatCell(tokens) {
+        return (tokens
+            ?.map(_ => formatToken(_, 0, null, null, highlight))
+            .join('') ?? '');
+    }
+    // Get plain text (stripped of ANSI codes)
+    function getPlainText(tokens) {
+        return stripAnsi(formatCell(tokens));
+    }
+    // Get the longest word width in a cell (minimum width to avoid breaking words)
+    function getMinWidth(tokens) {
+        const text = getPlainText(tokens);
+        const words = text.split(/\s+/).filter(w => w.length > 0);
+        if (words.length === 0)
+            return MIN_COLUMN_WIDTH;
+        return Math.max(...words.map(w => stringWidth(w)), MIN_COLUMN_WIDTH);
+    }
+    // Get ideal width (full content without wrapping)
+    function getIdealWidth(tokens) {
+        return Math.max(stringWidth(getPlainText(tokens)), MIN_COLUMN_WIDTH);
+    }
+    // Calculate column widths
+    // Step 1: Get minimum (longest word) and ideal (full content) widths
+    const minWidths = token.header.map((header, colIndex) => {
+        let maxMinWidth = getMinWidth(header.tokens);
+        for (const row of token.rows) {
+            maxMinWidth = Math.max(maxMinWidth, getMinWidth(row[colIndex]?.tokens));
+        }
+        return maxMinWidth;
+    });
+    const idealWidths = token.header.map((header, colIndex) => {
+        let maxIdeal = getIdealWidth(header.tokens);
+        for (const row of token.rows) {
+            maxIdeal = Math.max(maxIdeal, getIdealWidth(row[colIndex]?.tokens));
+        }
+        return maxIdeal;
+    });
+    // Step 2: Calculate available space
+    // Border overhead: │ content │ content │ = 1 + (width + 3) per column
+    const numCols = token.header.length;
+    const borderOverhead = 1 + numCols * 3; // │ + (2 padding + 1 border) per col
+    // Account for SAFETY_MARGIN to avoid triggering the fallback safety check
+    const availableWidth = Math.max(terminalWidth - borderOverhead - SAFETY_MARGIN, numCols * MIN_COLUMN_WIDTH);
+    // Step 3: Calculate column widths that fit available space
+    const totalMin = minWidths.reduce((sum, w) => sum + w, 0);
+    const totalIdeal = idealWidths.reduce((sum, w) => sum + w, 0);
+    // Track whether columns are narrower than longest words (needs hard wrap)
+    let needsHardWrap = false;
+    let columnWidths;
+    if (totalIdeal <= availableWidth) {
+        // Everything fits - use ideal widths
+        columnWidths = idealWidths;
+    }
+    else if (totalMin <= availableWidth) {
+        // Need to shrink - give each column its min, distribute remaining space
+        const extraSpace = availableWidth - totalMin;
+        const overflows = idealWidths.map((ideal, i) => ideal - minWidths[i]);
+        const totalOverflow = overflows.reduce((sum, o) => sum + o, 0);
+        columnWidths = minWidths.map((min, i) => {
+            if (totalOverflow === 0)
+                return min;
+            const extra = Math.floor((overflows[i] / totalOverflow) * extraSpace);
+            return min + extra;
+        });
+    }
+    else {
+        // Table wider than terminal at minimum widths
+        // Shrink columns proportionally to fit, allowing word breaks
+        needsHardWrap = true;
+        const scaleFactor = availableWidth / totalMin;
+        columnWidths = minWidths.map(w => Math.max(Math.floor(w * scaleFactor), MIN_COLUMN_WIDTH));
+    }
+    // Step 4: Calculate max row lines to determine if vertical format is needed
+    function calculateMaxRowLines() {
+        let maxLines = 1;
+        // Check header
+        for (let i = 0; i < token.header.length; i++) {
+            const content = formatCell(token.header[i].tokens);
+            const wrapped = wrapText(content, columnWidths[i], {
+                hard: needsHardWrap,
+            });
+            maxLines = Math.max(maxLines, wrapped.length);
+        }
+        // Check rows
+        for (const row of token.rows) {
+            for (let i = 0; i < row.length; i++) {
+                const content = formatCell(row[i]?.tokens);
+                const wrapped = wrapText(content, columnWidths[i], {
+                    hard: needsHardWrap,
+                });
+                maxLines = Math.max(maxLines, wrapped.length);
+            }
+        }
+        return maxLines;
+    }
+    // Use vertical format if wrapping would make rows too tall
+    const maxRowLines = calculateMaxRowLines();
+    const useVerticalFormat = maxRowLines > MAX_ROW_LINES;
+    // Render a single row with potential multi-line cells
+    // Returns an array of strings, one per line of the row
+    function renderRowLines(cells, isHeader) {
+        // Get wrapped lines for each cell (preserving ANSI formatting)
+        const cellLines = cells.map((cell, colIndex) => {
+            const formattedText = formatCell(cell.tokens);
+            const width = columnWidths[colIndex];
+            return wrapText(formattedText, width, { hard: needsHardWrap });
+        });
+        // Find max number of lines in this row
+        const maxLines = Math.max(...cellLines.map(lines => lines.length), 1);
+        // Calculate vertical offset for each cell (to center vertically)
+        const verticalOffsets = cellLines.map(lines => Math.floor((maxLines - lines.length) / 2));
+        // Build each line of the row as a single string
+        const result = [];
+        for (let lineIdx = 0; lineIdx < maxLines; lineIdx++) {
+            let line = '│';
+            for (let colIndex = 0; colIndex < cells.length; colIndex++) {
+                const lines = cellLines[colIndex];
+                const offset = verticalOffsets[colIndex];
+                const contentLineIdx = lineIdx - offset;
+                const lineText = contentLineIdx >= 0 && contentLineIdx < lines.length
+                    ? lines[contentLineIdx]
+                    : '';
+                const width = columnWidths[colIndex];
+                // Headers always centered; data uses table alignment
+                const align = isHeader ? 'center' : (token.align?.[colIndex] ?? 'left');
+                line +=
+                    ' ' + padAligned(lineText, stringWidth(lineText), width, align) + ' │';
+            }
+            result.push(line);
+        }
+        return result;
+    }
+    // Render horizontal border as a single string
+    function renderBorderLine(type) {
+        const [left, mid, cross, right] = {
+            top: ['┌', '─', '┬', '┐'],
+            middle: ['├', '─', '┼', '┤'],
+            bottom: ['└', '─', '┴', '┘'],
+        }[type];
+        let line = left;
+        columnWidths.forEach((width, colIndex) => {
+            line += mid.repeat(width + 2);
+            line += colIndex < columnWidths.length - 1 ? cross : right;
+        });
+        return line;
+    }
+    // Render vertical format (key-value pairs) for extra-narrow terminals
+    function renderVerticalFormat() {
+        const lines = [];
+        const headers = token.header.map(h => getPlainText(h.tokens));
+        const separatorWidth = Math.min(terminalWidth - 1, 40);
+        const separator = '─'.repeat(separatorWidth);
+        // Small indent for wrapped lines (just 2 spaces)
+        const wrapIndent = '  ';
+        token.rows.forEach((row, rowIndex) => {
+            if (rowIndex > 0) {
+                lines.push(separator);
+            }
+            row.forEach((cell, colIndex) => {
+                const label = headers[colIndex] || `Column ${colIndex + 1}`;
+                // Clean value: trim, remove extra internal whitespace/newlines
+                const rawValue = formatCell(cell.tokens).trimEnd();
+                const value = rawValue.replace(/\n+/g, ' ').replace(/\s+/g, ' ').trim();
+                // Wrap value to fit terminal, accounting for label on first line
+                const firstLineWidth = terminalWidth - stringWidth(label) - 3;
+                const subsequentLineWidth = terminalWidth - wrapIndent.length - 1;
+                // Two-pass wrap: first line is narrower (label takes space),
+                // continuation lines get the full width minus indent.
+                const firstPassLines = wrapText(value, Math.max(firstLineWidth, 10));
+                const firstLine = firstPassLines[0] || '';
+                let wrappedValue;
+                if (firstPassLines.length <= 1 ||
+                    subsequentLineWidth <= firstLineWidth) {
+                    wrappedValue = firstPassLines;
+                }
+                else {
+                    // Re-join remaining text and re-wrap to the wider continuation width
+                    const remainingText = firstPassLines
+                        .slice(1)
+                        .map(l => l.trim())
+                        .join(' ');
+                    const rewrapped = wrapText(remainingText, subsequentLineWidth);
+                    wrappedValue = [firstLine, ...rewrapped];
+                }
+                // First line: bold label + value
+                lines.push(`${ANSI_BOLD_START}${label}:${ANSI_BOLD_END} ${wrappedValue[0] || ''}`);
+                // Subsequent lines with small indent (skip empty lines)
+                for (let i = 1; i < wrappedValue.length; i++) {
+                    const line = wrappedValue[i];
+                    if (!line.trim())
+                        continue;
+                    lines.push(`${wrapIndent}${line}`);
+                }
+            });
+        });
+        return lines.join('\n');
+    }
+    // Choose format based on available width
+    if (useVerticalFormat) {
+        return _jsx(Text, { children: renderVerticalFormat() });
+    }
+    // Build the complete horizontal table as an array of strings
+    const tableLines = [];
+    tableLines.push(renderBorderLine('top'));
+    tableLines.push(...renderRowLines(token.header, true));
+    tableLines.push(renderBorderLine('middle'));
+    token.rows.forEach((row, rowIndex) => {
+        tableLines.push(...renderRowLines(row, false));
+        if (rowIndex < token.rows.length - 1) {
+            tableLines.push(renderBorderLine('middle'));
+        }
+    });
+    tableLines.push(renderBorderLine('bottom'));
+    // Safety check: verify no line exceeds terminal width.
+    const maxLineWidth = Math.max(...tableLines.map(line => stringWidth(stripAnsi(line))));
+    // If we're within SAFETY_MARGIN characters of the edge, use vertical format
+    // to account for terminal resize race conditions.
+    if (maxLineWidth > terminalWidth - SAFETY_MARGIN) {
+        return _jsx(Text, { children: renderVerticalFormat() });
+    }
+    // Render as a single Text block to prevent Ink from wrapping mid-row.
+    // Raw Text (not Ansi) so the fork's span parser doesn't drop SGR 1 bold.
+    return _jsx(Text, { children: tableLines.join('\n') });
+}

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { type ScrollBoxHandle } from '../ui.js';
+import type { ChatRow } from '../channel.js';
+import type { DOMElement } from '../ink/dom.js';
+export declare function MessageList({ rows, expanded, expandedRows, selectedId, onToggleRow, model, showAll, onToggleAll, onLoadOlder, thinkingVisible, registerRowRef, scrollHandle, forceMountRowId, newSinceRowId, onUnseenCount, }: {
+    rows: readonly ChatRow[];
+    expanded: boolean;
+    expandedRows: ReadonlySet<number>;
+    selectedId: number | null;
+    onToggleRow: (rowId: number) => void;
+    model: string;
+    showAll: boolean;
+    onToggleAll: () => void;
+    /** Restore folded-away older rows from the session log (CC-style "load
+     *  earlier messages" affordance; shown only when rows were folded). */
+    onLoadOlder?: () => void;
+    thinkingVisible?: boolean;
+    /** Transcript search: register each row's DOM element for scroll-to-match. */
+    registerRowRef?: (rowId: number, el: DOMElement | null) => void;
+    /** Scroll viewport the list virtualizes against. */
+    scrollHandle?: ScrollBoxHandle | null;
+    /** Row that must be mounted this pass (seek target for scrollToElement). */
+    forceMountRowId?: number | null;
+    /** "Seen up to" anchor for the new-messages pill: rows with id greater
+     *  than this are new. Null when pinned to the bottom (nothing unseen). */
+    newSinceRowId?: number | null;
+    /** Reports how many new rows still sit below the viewport bottom edge. */
+    onUnseenCount?: (count: number) => void;
+}): React.JSX.Element;
+/**
+ * The header block pinned above the transcript: the DeepSeek pixel whale
+ * with the wordmark, tagline, model/effort and cwd (`LogoV2`), plus the
+ * welcome line. It scrolls away with the transcript once the conversation
+ * fills the viewport (Claude Code shows its ✦ logo in the same slot).
+ */
+export declare function LogoHeader({ model, effort, cwd, }: {
+    model: string;
+    effort?: string | undefined;
+    cwd: string;
+}): React.ReactNode;
+//# sourceMappingURL=MessageList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MessageList.d.ts","sourceRoot":"","sources":["../../../src/components/MessageList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAA8B,KAAK,eAAe,EAAE,MAAM,UAAU,CAAA;AAC3E,OAAO,KAAK,EAAE,OAAO,EAAyC,MAAM,eAAe,CAAA;AACnF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAwC/C,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,WAAW,EACX,KAAK,EACL,OAAO,EACP,WAAW,EACX,WAAW,EACX,eAAsB,EACtB,cAAc,EACd,YAAY,EACZ,eAAe,EACf,aAAa,EACb,aAAa,GACd,EAAE;IACD,IAAI,EAAE,SAAS,OAAO,EAAE,CAAA;IACxB,QAAQ,EAAE,OAAO,CAAA;IACjB,YAAY,EAAE,WAAW,CAAC,MAAM,CAAC,CAAA;IACjC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB;2EACuE;IACvE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,8EAA8E;IAC9E,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE,UAAU,GAAG,IAAI,KAAK,IAAI,CAAA;IAC/D,oDAAoD;IACpD,YAAY,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;IACrC,4EAA4E;IAC5E,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B;8EAC0E;IAC1E,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,0EAA0E;IAC1E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC,qBAyOA;AAiQD;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,MAAM,EACN,GAAG,GACJ,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,GAAG,EAAE,MAAM,CAAA;CACZ,GAAG,KAAK,CAAC,SAAS,CAMlB"}

package/lib/types/components/MessageList.js

@@ -0,0 +1,303 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { t } from '../i18n.js';
+import { Box, Text, useTerminalSize } from '../ui.js';
+import { Divider } from './design-system/Divider.js';
+import { KeyboardShortcutHint } from './design-system/KeyboardShortcutHint.js';
+import { UserPromptMessage } from './messages/UserPromptMessage.js';
+import { AssistantTextMessage } from './messages/AssistantTextMessage.js';
+import { AssistantThinkingMessage } from './messages/AssistantThinkingMessage.js';
+import { AssistantToolUseMessage } from './messages/AssistantToolUseMessage.js';
+import { InterruptedByUser } from './InterruptedByUser.js';
+import { LogoV2 } from './LogoV2.js';
+import { StreamingMarkdown } from './StreamingMarkdown.js';
+import { MessageMetadata } from './messages/MessageMetadata.js';
+import { stripNarration } from '../utils/narration.js';
+import { stringWidth } from '../ink/stringWidth.js';
+import { truncateToWidth } from '../ink/truncateToWidth.js';
+/**
+ * Transcript rows rendered in the Claude Code visual language: user prompts
+ * on a grey bubble with a `❯` pointer, assistant text with a `●` bullet and
+ * markdown, thinking folded to `∴ Thinking (ctrl+o to expand)`, tool calls as
+ * status-dot cards. `expanded` (Ctrl+O) shows full reasoning + full tool
+ * args/results; `expandedRows` (message-selection mode, Enter) expands single
+ * rows; `selectedId` highlights the selected row.
+ */
+/** Render cap for very long sessions (CC's MAX_MESSAGES_WITHOUT_VIRTUALIZATION
+ *  equivalent): older rows fold behind a Divider until Ctrl+E expands them. */
+const MAX_RENDERED_ROWS = 300;
+// --- layout virtualization constants -------------------------------------
+// Offscreen rows render as fixed-height spacers whose heights come from the
+// previous commit's Yoga layout, so the pure-JS Yoga engine never walks
+// their subtrees. Spacers preserve the scroll geometry (content height,
+// sticky follow, scrollbar) of a fully-mounted list.
+/** Lines of extra content mounted above/below the visible window. */
+const OVERSCAN_LINES = 8;
+/** Fallback row height before the first measurement (terminal lines). */
+const DEFAULT_ROW_HEIGHT = 2;
+/** Cold-start estimate of the header block above the rows; corrected by the
+ *  first layout measurement. */
+const DEFAULT_HEADER_LINES = 14;
+export function MessageList({ rows, expanded, expandedRows, selectedId, onToggleRow, model, showAll, onToggleAll, onLoadOlder, thinkingVisible = true, registerRowRef, scrollHandle, forceMountRowId, newSinceRowId, onUnseenCount, }) {
+    const hiddenCount = rows.length - MAX_RENDERED_ROWS;
+    // The thinking filter runs BEFORE virtualization so window indices line up.
+    const visibleRows = (showAll || hiddenCount <= 0
+        ? rows
+        : rows.slice(hiddenCount)).filter(row => thinkingVisible || row.kind !== 'reasoning');
+    // CC addMargin: every rendered block gets a 1-row top margin except the
+    // first. Pre-pass over the FULL list so a windowed row keeps the exact
+    // spacing it would have in a fully-mounted list.
+    const margins = new Map();
+    {
+        let prev;
+        for (const row of visibleRows) {
+            margins.set(row.id, prev !== undefined);
+            prev = row.kind;
+        }
+    }
+    // CC's expanded rows keep a persistent hover-grey background (VirtualItem:
+    // `expanded ? userMessageBackgroundHover : undefined`).
+    const rowBackground = (rowId) => {
+        const isSelected = selectedId === rowId;
+        if (isSelected)
+            return 'messageActionsBackground';
+        if (expandedRows.has(rowId))
+            return 'userMessageBackgroundHover';
+        return undefined;
+    };
+    // --- layout virtualization ---------------------------------------------
+    const { columns } = useTerminalSize();
+    // Measured row heights, remembered after a row unmounts so virtualization
+    // can compute total content height. Bounded: row ids grow monotonically
+    // and rows are never removed from the transcript (foldRows keeps the
+    // row), so without a cap this Map grew by one entry per row forever.
+    // Eviction is FIFO (oldest row first); a forgotten height falls back to
+    // DEFAULT_ROW_HEIGHT, which only perturbs deep scrollback estimates.
+    const HEIGHTS_CACHE_MAX = 5000;
+    const heightsRef = React.useRef(new Map());
+    const localRefs = React.useRef(new Map());
+    /** Content-space offset of visibleRows[0] (header + dividers), measured. */
+    const baseRef = React.useRef(null);
+    const [, setMeasureTick] = React.useState(0);
+    const [, setScrollTick] = React.useState(0);
+    // A width change reflows every row — all measurements are stale.
+    const lastColumns = React.useRef(columns);
+    if (lastColumns.current !== columns) {
+        lastColumns.current = columns;
+        heightsRef.current.clear();
+        baseRef.current = null;
+    }
+    // Scrolling bypasses React (imperative DOM scrollTop): subscribe so the
+    // window follows the viewport.
+    React.useEffect(() => {
+        if (!scrollHandle)
+            return;
+        const tick = () => { setScrollTick(t => t + 1); };
+        return scrollHandle.subscribe(tick);
+    }, [scrollHandle]);
+    const heightOf = (row) => heightsRef.current.get(row.id) ?? DEFAULT_ROW_HEIGHT;
+    const offsets = new Array(visibleRows.length);
+    let total = 0;
+    for (let i = 0; i < visibleRows.length; i++) {
+        offsets[i] = total;
+        total += heightOf(visibleRows[i]);
+    }
+    const scrollTop = scrollHandle?.getScrollTop() ?? 0;
+    const pending = scrollHandle?.getPendingDelta() ?? 0;
+    const viewport = scrollHandle?.getViewportHeight() ?? 24;
+    const sticky = scrollHandle?.isSticky() ?? true;
+    const base = baseRef.current ?? DEFAULT_HEADER_LINES;
+    // Mount the union of the committed position and any in-flight pending
+    // delta, plus overscan; when sticky, always reach the tail (streaming row).
+    const relTop = Math.min(scrollTop, scrollTop + pending) - OVERSCAN_LINES - base;
+    const relBottom = Math.max(scrollTop, scrollTop + pending) + viewport + OVERSCAN_LINES - base;
+    let start = 0;
+    while (start < visibleRows.length && offsets[start] + heightOf(visibleRows[start]) <= relTop)
+        start++;
+    let end = start;
+    while (end < visibleRows.length && offsets[end] < relBottom)
+        end++;
+    if (sticky || !scrollHandle)
+        end = visibleRows.length;
+    // Pinned to bottom: the tail row must stay mounted EVERY pass. The
+    // streaming row's measured height only lands in heightsRef when it
+    // survives mounted across two consecutive commits (useLayoutEffect reads
+    // the previous Yoga pass). If an underestimated `total` ever lets relTop
+    // overshoot it, start=len unmounts everything → content collapses to the
+    // header → follow yanks scrollTop to 0 → next pass remounts all → follow
+    // back to the real bottom: a self-sustaining ping-pong that blanks the
+    // transcript mid-stream.
+    if (sticky && visibleRows.length > 0) {
+        start = Math.min(start, visibleRows.length - 1);
+    }
+    if (forceMountRowId !== undefined && forceMountRowId !== null) {
+        const idx = visibleRows.findIndex(row => row.id === forceMountRowId);
+        if (idx !== -1) {
+            start = Math.min(start, idx);
+            end = Math.max(end, idx + 1);
+        }
+    }
+    const topPad = offsets[start] ?? 0;
+    const mountedBottom = end < visibleRows.length ? offsets[end] : total;
+    const bottomPad = total - mountedBottom;
+    // New-messages pill count: rows past the seen-anchor whose top edge is
+    // still below the viewport bottom. Same rows-space math as the window
+    // (offsets are rows-space, scrollTop content-space — subtract the header
+    // base). Decrements as the user scrolls down through the new rows; 0 once
+    // every new row has appeared on screen. Reported post-commit (parent
+    // setState with an unchanged value is a React no-op, so the per-render
+    // effect only re-renders on actual count changes).
+    let unseenCount = 0;
+    if (newSinceRowId !== null && newSinceRowId !== undefined) {
+        const firstNew = visibleRows.findIndex(row => row.id > newSinceRowId);
+        if (firstNew !== -1) {
+            const seenBottom = scrollTop + viewport - base;
+            for (let i = firstNew; i < visibleRows.length; i++) {
+                if (offsets[i] >= seenBottom)
+                    unseenCount++;
+            }
+        }
+    }
+    React.useEffect(() => {
+        onUnseenCount?.(unseenCount);
+    });
+    // Post-commit: measure mounted rows, derive the content-space base from
+    // the first mounted row's Yoga top, and clamp render-time scrollTop to the
+    // mounted coverage so burst scrolls never show blank spacer.
+    React.useLayoutEffect(() => {
+        let changed = false;
+        for (const [id, el] of localRefs.current) {
+            const h = el.yogaNode?.getComputedHeight();
+            if (h !== undefined && h > 0 && heightsRef.current.get(id) !== h) {
+                if (heightsRef.current.size >= HEIGHTS_CACHE_MAX) {
+                    const oldest = heightsRef.current.keys().next().value;
+                    if (oldest !== undefined)
+                        heightsRef.current.delete(oldest);
+                }
+                heightsRef.current.set(id, h);
+                changed = true;
+            }
+        }
+        const firstMounted = visibleRows[start];
+        // oxlint-disable-next-line typescript/no-unnecessary-condition -- runtime guard: empty list window
+        const firstEl = firstMounted ? localRefs.current.get(firstMounted.id) : undefined;
+        const top = firstEl?.yogaNode?.getComputedTop();
+        if (top !== undefined) {
+            const measured = top - (offsets[start] ?? 0);
+            if (baseRef.current !== measured) {
+                baseRef.current = measured;
+                changed = true;
+            }
+        }
+        if (scrollHandle) {
+            if (sticky || (start === 0 && end >= visibleRows.length)) {
+                scrollHandle.setClampBounds(undefined, undefined);
+            }
+            else {
+                const min = Math.max(0, base + topPad - viewport);
+                scrollHandle.setClampBounds(min, Math.max(min, base + mountedBottom - viewport));
+            }
+        }
+        if (changed)
+            setMeasureTick(t => t + 1);
+    });
+    // useCallback: the reference feeds MemoRow's shallow compare; a fresh
+    // closure per render would defeat every row's memo.
+    const setRowRef = React.useCallback((rowId, el) => {
+        if (el)
+            localRefs.current.set(rowId, el);
+        else
+            localRefs.current.delete(rowId);
+        registerRowRef?.(rowId, el);
+    }, [registerRowRef]);
+    // Second-resolution clock for the running tool card's live elapsed time.
+    // Computed per render (cheap) but only forwarded to running rows, so
+    // settled rows never see a changing prop.
+    const nowSec = Math.floor(Date.now() / 1000);
+    return (_jsxs(_Fragment, { children: [rows.some(row => row.folded) && (_jsx(Box, { marginTop: 1, onClick: onLoadOlder, children: _jsx(Divider, { title: t('load-earlier') }) })), !showAll && hiddenCount > 0 && (_jsx(Box, { marginTop: 1, onClick: onToggleAll, children: _jsx(Divider, { title: ` ctrl+e to show ${hiddenCount} previous messages ` }) })), topPad > 0 && _jsx(Box, { height: topPad, flexShrink: 0 }), visibleRows
+                .slice(start, end)
+                .map((row) => {
+                // CC addMargin: pre-pass result keeps windowed rows at full-mount
+                // spacing; only the very first row of the whole list has none.
+                const addMargin = margins.get(row.id) === true;
+                const tool = row.tool;
+                return (_jsx(MemoRow, { rowId: row.id, kind: row.kind, text: row.text, streaming: row.streaming === true, durationMs: row.durationMs, time: row.time, addMargin: addMargin, isSelected: selectedId === row.id, isExpanded: expandedRows.has(row.id), expanded: expanded, model: model, background: rowBackground(row.id), toolCallId: tool?.callId, toolName: tool?.name, toolArgsText: tool?.argsText, toolArgsFull: tool?.argsFull, toolStatus: tool?.status, toolResultText: tool?.resultText, toolResultFull: tool?.resultFull, toolErrorText: tool?.errorText, toolCallView: tool?.callView, toolResultView: tool?.resultView, toolStartedAt: tool?.startedAt, toolDurationMs: tool?.durationMs, nowSec: tool?.status === 'running' ? nowSec : undefined, onToggleRow: onToggleRow, setRowRef: setRowRef }, row.id));
+            }), bottomPad > 0 && _jsx(Box, { height: bottomPad, flexShrink: 0 })] }));
+}
+function TranscriptRow({ rowId, kind, text, streaming, durationMs, time, addMargin, isSelected, isExpanded, expanded, model, background, toolCallId, toolName, toolArgsText, toolArgsFull, toolStatus, toolResultText, toolResultFull, toolErrorText, toolCallView, toolResultView, toolStartedAt, toolDurationMs, onToggleRow, setRowRef, }) {
+    const ref = React.useCallback((el) => {
+        setRowRef(rowId, el);
+    }, [setRowRef, rowId]);
+    const onClick = React.useCallback(() => {
+        onToggleRow(rowId);
+    }, [onToggleRow, rowId]);
+    switch (kind) {
+        case 'user':
+            return (_jsx(Box, { flexDirection: "column", ref: ref, children: _jsx(UserPromptMessage, { text: text, addMargin: addMargin, isSelected: isSelected, isExpanded: isExpanded, onClick: onClick }) }));
+        case 'assistant':
+            return streaming ? (_jsxs(Box, { alignItems: "flex-start", flexDirection: "row", marginTop: addMargin ? 1 : 0, width: "100%", backgroundColor: background, children: [_jsx(Box, { minWidth: 2, children: _jsx(Text, { color: "text", children: "\u25CF" }) }), _jsx(Box, { flexDirection: "column", children: _jsx(StreamingMarkdown, { children: stripNarration(text) }) })] })) : (_jsxs(Box, { width: "100%", flexDirection: "column", backgroundColor: background, ref: ref, children: [expanded && (_jsx(Box, { flexDirection: "row", justifyContent: "flex-end", gap: 1, marginTop: 1, children: _jsx(MessageMetadata, { timestamp: time, model: model }) })), _jsx(AssistantTextMessage, { text: stripNarration(text), addMargin: addMargin, isSelected: isSelected, isExpanded: isExpanded, onClick: onClick })] }));
+        case 'reasoning':
+            return (_jsx(Box, { flexDirection: "column", ref: ref, children: _jsx(AssistantThinkingMessage, { thinking: text, addMargin: addMargin, 
+                    // Streaming reasoning shows expanded live, then folds
+                    // automatically once the turn settles (unless Ctrl+O or a
+                    // single-row expansion keeps it open).
+                    verbose: isExpanded || expanded || streaming, durationMs: durationMs, isSelected: isSelected, onClick: onClick }) }));
+        case 'tool': {
+            if (toolCallId === undefined ||
+                toolName === undefined ||
+                toolArgsText === undefined ||
+                toolStatus === undefined ||
+                toolStartedAt === undefined) {
+                return null;
+            }
+            // Rebuilt per render from the flattened props — cheap object literal,
+            // and AssistantToolUseMessage is only reached when memo let us through.
+            const tool = {
+                callId: toolCallId,
+                name: toolName,
+                argsText: toolArgsText,
+                argsFull: toolArgsFull,
+                status: toolStatus,
+                resultText: toolResultText,
+                resultFull: toolResultFull,
+                errorText: toolErrorText,
+                callView: toolCallView,
+                resultView: toolResultView,
+                startedAt: toolStartedAt,
+                durationMs: toolDurationMs,
+            };
+            return (_jsx(Box, { flexDirection: "column", ref: ref, children: _jsx(AssistantToolUseMessage, { tool: tool, addMargin: addMargin, verbose: isExpanded || expanded, isSelected: isSelected, isExpanded: isExpanded }) }));
+        }
+        case 'notice':
+            return (_jsx(Box, { marginTop: 1, ref: ref, children: _jsx(Divider, { title: ` ${text} ` }) }));
+        case 'interrupt':
+            return (_jsx(Box, { marginTop: 1, ref: ref, children: _jsx(InterruptedByUser, {}) }));
+        case 'local':
+            // `!` mode command echo, like CC's UserBashInputMessage.
+            return (_jsx(Box, { marginTop: 1, backgroundColor: background, ref: ref, children: _jsxs(Text, { color: "bashBorder", children: ["! ", text] }) }));
+        case 'local-output':
+            return (_jsx(Box, { paddingLeft: 2, backgroundColor: background, ref: ref, children: _jsx(Text, { dimColor: true, children: text }) }));
+        case 'compact':
+            // The post-compaction summary defaults to a folded one-liner with a
+            // text preview; Ctrl+O (global) or message-selection Enter reveals
+            // the full summary.
+            return (_jsx(Box, { marginTop: addMargin ? 1 : 0, paddingLeft: 2, backgroundColor: background, ref: ref, onClick: onClick, children: expanded || isExpanded ? (_jsx(Text, { dimColor: true, children: text })) : (_jsxs(Text, { dimColor: true, italic: true, children: ["\u2234 ", t('compact-summary-folded'), " \u00B7 ", compactPreview(text), ' ', _jsx(KeyboardShortcutHint, { shortcut: "ctrl+o", action: "expand", parens: true })] })) }));
+    }
+}
+/** Folded compact-summary preview: whitespace flattened, capped with an
+ *  ellipsis so the fold line never wraps. `limit` is terminal cells, so
+ *  CJK wide chars count double and never split mid-glyph. */
+function compactPreview(text, limit = 60) {
+    const flat = text.replace(/\s+/g, ' ').trim();
+    return stringWidth(flat) <= limit ? flat : `${truncateToWidth(flat, limit - 1)}…`;
+}
+const MemoRow = React.memo(TranscriptRow);
+/**
+ * The header block pinned above the transcript: the DeepSeek pixel whale
+ * with the wordmark, tagline, model/effort and cwd (`LogoV2`), plus the
+ * welcome line. It scrolls away with the transcript once the conversation
+ * fills the viewport (Claude Code shows its ✦ logo in the same slot).
+ */
+export function LogoHeader({ model, effort, cwd, }) {
+    return (_jsx(Box, { flexDirection: "column", marginBottom: 1, children: _jsx(LogoV2, { model: model, effort: effort, cwd: cwd }) }));
+}

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { LlmModelInfo } from '@deepseek-ai/dsh-llm';
+/**
+ * Model picker in the CC ModelPicker style: a permission-colored Pane with
+ * the model list as Select rows (❯ focus pointer, ✓ on the active model,
+ * descriptions), plus the Enter/Esc hint line. The DSH agent's model is
+ * fixed at creation time, so a selection notifies "restart to apply".
+ */
+export declare function ModelPicker({ models, focusIndex, currentModel, }: {
+    models: readonly LlmModelInfo[];
+    focusIndex: number;
+    currentModel: string;
+}): React.ReactNode;
+//# sourceMappingURL=ModelPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModelPicker.d.ts","sourceRoot":"","sources":["../../../src/components/ModelPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAMxD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,UAAU,EACV,YAAY,GACb,EAAE;IACD,MAAM,EAAE,SAAS,YAAY,EAAE,CAAA;IAC/B,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,CAAA;CACrB,GAAG,KAAK,CAAC,SAAS,CA4BlB"}

package/lib/types/components/ModelPicker.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from '../ui.js';
+import { Pane } from './design-system/Pane.js';
+import { ListItem } from './design-system/ListItem.js';
+import { Byline } from './design-system/Byline.js';
+import { KeyboardShortcutHint } from './design-system/KeyboardShortcutHint.js';
+/**
+ * Model picker in the CC ModelPicker style: a permission-colored Pane with
+ * the model list as Select rows (❯ focus pointer, ✓ on the active model,
+ * descriptions), plus the Enter/Esc hint line. The DSH agent's model is
+ * fixed at creation time, so a selection notifies "restart to apply".
+ */
+export function ModelPicker({ models, focusIndex, currentModel, }) {
+    return (_jsxs(Pane, { color: "permission", children: [_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "remember", bold: true, children: "Model" }) }), models.map((model, index) => (_jsxs(ListItem, { isFocused: index === focusIndex, isSelected: `${model.provider}/${model.id}` === currentModel, description: model.description, children: [model.provider, " / ", model.name] }, `${model.provider}/${model.id}`)))] }), _jsx(Text, { dimColor: true, italic: true, children: _jsxs(Byline, { children: [_jsx(KeyboardShortcutHint, { shortcut: "Enter", action: "confirm", bold: true }), _jsx(KeyboardShortcutHint, { shortcut: "Esc", action: "exit" })] }) })] }));
+}