@itookit/dsht 0.3.3 → 0.3.7

package/dist/ui/chat/status.js

@@ -236,7 +236,7 @@ export const StatusBar = memo(function StatusBar({ controller, expanded = false,
     const workspace = state.workspaces.find(item => item.workspaceId === state.workspaceId);
     const view = controller.telemetry.view(state.sessionId);
     const costs = controller.costs;
-    const sessionCost = costs?.hasSession(state.sessionId) ? costText(costs.total(state.sessionId)) : '?';
+    const sessionCost = controller.sessionCostText;
     const todayCost = costs ? costText(costs.today()) : '?';
     // `*` belongs to costText alone; incomplete coverage is a separate degradation, reported by `!`.
     const coverage = costs?.coverage ?? 'complete';
@@ -258,20 +258,23 @@ export const StatusBar = memo(function StatusBar({ controller, expanded = false,
         const billed = buckets[0] === undefined || buckets[2] === undefined ? undefined : buckets[0] + buckets[2] + (buckets[3] ?? 0);
         const hit = cacheHitText(buckets[2], billed);
         const compactCount = (value) => value === undefined ? '?' : compactNumber.format(value);
-        const phase = state.transcript.livePhase;
+        const phase = state.session.record.livePhase;
         const clock = running && since !== undefined ? ` ${clockText(now - since)}` : '';
         const phaseLabel = phase === undefined ? undefined
             : phase.kind === 'tool' ? `${phase.name ?? 'tool'} ${phaseText(now - phase.startedAt)}`
                 : `${phase.kind === 'thinking' ? 'think' : 'write'} ${phaseText(now - phase.startedAt)}`;
         // The state token reports a fact and never guesses: a paused clock is named, offline and errors
-        // take the token over, and an unknown phase simply leaves the phase group empty.
+        // take the token over, and an unknown phase simply leaves the phase group empty. An answer this
+        // client still owes outranks the paused reason, because that reason is only why the clock stopped.
         const stateToken = !state.online
             ? { text: '! Offline', color: theme.status.offline }
             : state.controlError || state.modelError
                 ? { text: '⚠ Error', color: theme.status.warning }
-                : pauseReason !== undefined
-                    ? { text: `⏸ ${pauseReason}${clock}`, color: theme.colors.muted }
-                    : running ? { text: `◐${clock}`, color: theme.status.working } : { text: '● Ready', color: theme.status.ready };
+                : state.pending.length > 0
+                    ? { text: '? Needs you', color: theme.status.critical }
+                    : pauseReason !== undefined
+                        ? { text: `⏸ ${pauseReason}${clock}`, color: theme.colors.muted }
+                        : running ? { text: `◐${clock}`, color: theme.status.working } : { text: '● Ready', color: theme.status.ready };
         // One marker covers both scopes, because either an unpriceable record or a scan that has not
         // covered every session makes the pair inexact as a reading.
         const inexact = coverage !== 'complete';
@@ -322,7 +325,7 @@ const StatusDetails = memo(function StatusDetails({ controller, theme, width, no
     const workspace = state.workspaces.find(item => item.workspaceId === state.workspaceId);
     const view = controller.telemetry.view(state.sessionId);
     const costs = controller.costs;
-    const sessionCost = costs?.hasSession(state.sessionId) ? costText(costs.total(state.sessionId)) : '?';
+    const sessionCost = controller.sessionCostText;
     const todayCost = costs ? costText(costs.today()) : '?';
     // `*` belongs to costText alone; incomplete coverage is a separate degradation, reported by `!`.
     const coverage = costs?.coverage ?? 'complete';
@@ -334,9 +337,11 @@ const StatusDetails = memo(function StatusDetails({ controller, theme, width, no
     const turns = count(numeric(record(view.values.sessionStats).turns));
     const duration = since === undefined ? 'unknown duration' : elapsedTime(now - since);
     const detail = [
-        { key: 'activity', color: running ? theme.colors.context : theme.colors.muted, text: running
-                ? `◐ Working · ${duration}${state.transcript.activeTurnStartedAt === undefined ? ' (observed)' : ''} · Ctrl+C Stop`
-                : '● Ready · Ctrl+C exit' },
+        { key: 'activity', color: state.pending.length > 0 ? theme.status.critical : running ? theme.colors.context : theme.colors.muted, text: state.pending.length > 0
+                ? '? Needs you · answer the request above to continue'
+                : running
+                    ? `◐ Working · ${duration}${state.session.record.activeTurnStartedAt === undefined ? ' (observed)' : ''} · Ctrl+C Stop`
+                    : '● Ready · Ctrl+C exit' },
         { key: 'host', text: `${safeText(controller.base)} · ${safeText(state.status)}${!state.online ? ' · offline, last known status' : ''}` },
         ...state.sessionId
             ? [{ key: 'session', text: `Session ${safeText(state.sessionId)}${controller.sessionMode ? ` · ${safeText(controller.sessionMode)}` : ''}` }] : [],

package/dist/ui/dialogs/index.d.ts

@@ -27,12 +27,9 @@ export declare function RemovalDialog({ removal, enabled, canSelect, onCancel, o
     onCancel(): void;
     onConfirm(): void;
 }): import("react").JSX.Element;
-/** Two-step model and reasoning-effort selector. */
-export interface ModelState {
-    catalog: ObjectValue;
-    provider?: string;
-    model?: ObjectValue;
-}
+import type { ModelState } from '../../session/index.ts';
+/** Two-step model and reasoning-effort selector; the state shape is shared with the session. */
+export type { ModelState };
 /** Model routes and adapter-owned reasoning efforts.
  * @param props - Catalog, current step and its selection actions.
  * @returns The model or effort picker.
@@ -63,15 +60,19 @@ export declare function SearchResultsDialog({ query, items, hasMore, width, enab
     onClose(): void;
 }): import("react").JSX.Element;
 /** Title, current selection and confirm action for a picker screen.
- * @param props - Screen title, list identity and navigation state.
+ * @param props - Screen title, list identity, navigation state, usable width and marker key.
  * @returns The picker screen.
  */
-export declare function PickerScreen({ title, identity, choices, enabled, canSelect }: {
+export declare function PickerScreen({ title, identity, choices, enabled, canSelect, width, legend }: {
     title: string;
     identity: string;
     choices: Choice[];
     enabled: boolean;
     canSelect(): boolean;
+    /** Columns the list may occupy inside the composer frame. */
+    width?: number;
+    /** Marker key shown above the list, for a rollup too compact to spell its states out. */
+    legend?: string;
 }): import("react").JSX.Element;
 /** Newest-first reasoning summaries with the preceding user prompt.
  * @param props - Loaded entries and lazy paging action.

package/dist/ui/dialogs/index.js

@@ -64,11 +64,11 @@ export function SearchResultsDialog({ query, items, hasMore, width, enabled, can
                         action: () => onOpen(string(item.sessionId)) })), { key: 'close', label: '← Back', action: onClose }], enabled: enabled, canSelect: canSelect })] });
 }
 /** Title, current selection and confirm action for a picker screen.
- * @param props - Screen title, list identity and navigation state.
+ * @param props - Screen title, list identity, navigation state, usable width and marker key.
  * @returns The picker screen.
  */
-export function PickerScreen({ title, identity, choices, enabled, canSelect }) {
-    return _jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Text, { bold: true, children: title }), _jsx(Picker, { choices: choices, enabled: enabled, canSelect: canSelect }, identity)] });
+export function PickerScreen({ title, identity, choices, enabled, canSelect, width, legend }) {
+    return _jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Text, { bold: true, children: title }), legend !== undefined && _jsx(Text, { dimColor: true, wrap: "truncate-end", children: legend }), _jsx(Picker, { choices: choices, enabled: enabled, canSelect: canSelect, width: width }, identity)] });
 }
 /** Newest-first reasoning summaries with the preceding user prompt.
  * @param props - Loaded entries and lazy paging action.

package/dist/ui/dialogs/picker.d.ts

@@ -1,18 +1,36 @@
-/** One selectable row; a `remove` action adds the archive/delete affordance. */
+/** One cell of a table row, optionally coloured by the state it reports. */
+export interface ChoiceCell {
+    text: string;
+    color?: string;
+    bold?: boolean;
+}
+/** One selectable row; a `remove` action adds the archive/delete affordance.
+ *
+ * A row with `title`/`cells`/`detail` is laid out as a table so the state and path columns line up
+ * across rows; a row with only `label` keeps the plain single-text form every dialog uses.
+ */
 export interface Choice {
     key: string;
     label: string;
+    /** Leading table column; the row falls back to `label` when this is absent. */
+    title?: string;
+    /** Cells after the title, each carrying its own colour. */
+    cells?: readonly ChoiceCell[];
+    /** Trailing column, right-aligned and truncated from its start so a path keeps its tail. */
+    detail?: string;
     action(): void;
     remove?(): void;
 }
 /** Keyboard-driven list with paging and optional removal.
- * @param props - Choices, availability, page size and hint text.
+ * @param props - Choices, availability, page size, hint text and the usable column count.
  * @returns The rendered list rows and its navigation hint.
  */
-export declare function Picker({ choices, enabled, canSelect, pageSize, hint }: {
+export declare function Picker({ choices, enabled, canSelect, pageSize, hint, width }: {
     choices: Choice[];
     enabled: boolean;
     canSelect(): boolean;
     pageSize?: number;
     hint?: string;
+    /** Columns this list may occupy inside its frame; defaults to the composer's inner width. */
+    width?: number;
 }): import("react").JSX.Element;

package/dist/ui/dialogs/picker.js

@@ -1,20 +1,26 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /** Shared list selector used by every picker and dialog. */
 import { useEffect, useRef, useState } from 'react';
-import { Box, Text, useInput, useStdin } from 'ink';
+import { Box, Text, useInput, useStdin, useStdout } from 'ink';
+import stringWidth from 'string-width';
 import { safeText } from "../../transport/wire.js";
 import { useCopyMode } from "../copy-mode.js";
 import { useTheme } from "../theme/index.js";
+/** Display width of one cell list, so wide characters count as two columns. */
+function cellsWidth(cells) {
+    return (cells ?? []).reduce((sum, cell) => sum + stringWidth(cell.text), 0);
+}
 /** Keyboard-driven list with paging and optional removal.
- * @param props - Choices, availability, page size and hint text.
+ * @param props - Choices, availability, page size, hint text and the usable column count.
  * @returns The rendered list rows and its navigation hint.
  */
-export function Picker({ choices, enabled, canSelect, pageSize = 12, hint }) {
+export function Picker({ choices, enabled, canSelect, pageSize = 12, hint, width }) {
     const theme = useTheme();
     const copyMode = useCopyMode();
+    const { internal_eventEmitter } = useStdin();
+    const { stdout } = useStdout();
     const [selected, setSelected] = useState(0);
     const current = Math.min(selected, choices.length - 1);
-    const { internal_eventEmitter } = useStdin();
     const rawKey = useRef('');
     useEffect(() => {
         const remember = (raw) => { rawKey.current = raw; };
@@ -34,5 +40,31 @@ export function Picker({ choices, enabled, canSelect, pageSize = 12, hint }) {
             choices[current]?.action();
     }, { isActive: enabled && !copyMode });
     const start = Math.max(0, current - Math.max(0, pageSize - 1));
-    return _jsxs(Box, { flexDirection: "column", children: [choices.slice(start, start + pageSize).map((choice, index) => _jsxs(Text, { color: start + index === current ? theme.accent : undefined, children: [start + index === current ? '❯ ' : '  ', safeText(choice.label)] }, choice.key)), _jsx(Text, { dimColor: true, children: hint ?? `↑ ↓ select · Enter open${choices.some(choice => choice.remove) ? ' · d/Delete remove / archive' : ''} · Ctrl+C stop / exit` })] });
+    const rows = choices.slice(start, start + pageSize);
+    // The picker sits inside the composer frame, whose border and padding take six columns that Ink
+    // never gives to the content, so a row measured against the terminal width would still wrap.
+    const columns = width ?? Math.max(16, (stdout.columns ?? 80) - 6);
+    // Only a row carrying a table column is measured: an entry such as `+ Add workspace` keeps the
+    // plain full-width form and must not widen the columns the workspace rows share.
+    const tableRows = rows.filter(choice => choice.title !== undefined || choice.cells !== undefined || choice.detail !== undefined);
+    const table = tableRows.length > 0;
+    // Two columns go to the cursor and two separate the title from the cells that follow it. A trailing
+    // path column keeps a readable minimum, so the title yields to it rather than pushing it off screen;
+    // when no row has a path, the title column may use everything the cells do not need.
+    const wantsDetail = tableRows.some(choice => choice.detail !== undefined);
+    const titleWidth = 4 + Math.max(0, ...tableRows.map(choice => stringWidth(choice.title ?? choice.label)));
+    const cellWidth = Math.max(0, ...tableRows.map(choice => cellsWidth(choice.cells)));
+    const available = Math.max(0, columns - (wantsDetail ? 12 : 0));
+    const titleColumn = table ? Math.min(titleWidth, Math.max(Math.min(available, 8), available - cellWidth)) : 0;
+    const cellColumn = table ? Math.min(cellWidth, Math.max(0, available - titleColumn)) : 0;
+    const detailColumn = table ? Math.max(0, columns - titleColumn - cellColumn) : 0;
+    const detailShown = detailColumn >= 8 && wantsDetail;
+    return _jsxs(Box, { flexDirection: "column", children: [rows.map((choice, index) => {
+                const isCurrent = start + index === current;
+                const cursor = isCurrent ? '❯ ' : '  ';
+                const isTableRow = choice.title !== undefined || choice.cells !== undefined || choice.detail !== undefined;
+                if (!table || !isTableRow)
+                    return _jsxs(Text, { color: isCurrent ? theme.accent : undefined, wrap: "truncate-end", children: [cursor, safeText(choice.label)] }, choice.key);
+                return _jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: titleColumn, flexShrink: 0, children: _jsxs(Text, { color: isCurrent ? theme.accent : undefined, wrap: "truncate-end", children: [cursor, safeText(choice.title ?? choice.label)] }) }), _jsx(Box, { width: cellColumn, flexShrink: 0, children: _jsx(Text, { wrap: "truncate-end", children: choice.cells?.map((cell, position) => _jsx(Text, { color: cell.color, bold: cell.bold, children: safeText(cell.text) }, position)) }) }), detailShown && choice.detail !== undefined && _jsx(Box, { width: detailColumn, flexShrink: 0, justifyContent: "flex-end", children: _jsx(Text, { dimColor: true, wrap: "truncate-start", children: safeText(choice.detail) }) })] }, choice.key);
+            }), _jsx(Text, { dimColor: true, children: hint ?? `↑ ↓ select · Enter open${choices.some(choice => choice.remove) ? ' · d/Delete remove / archive' : ''} · Ctrl+C stop / exit` })] });
 }

package/dist/ui/input/input.d.ts

@@ -1,3 +1,4 @@
+import { type FoldRegion } from './viewport.ts';
 import { type Key } from 'ink';
 /** Editor offsets are UTF-16 positions at grapheme boundaries; killed text stays local. */
 export interface EditState {
@@ -9,11 +10,17 @@ export interface EditState {
  * @param state - Current text, cursor, and most recently killed text.
  * @param input - Decoded text or control-key letter.
  * @param key - Ink's VT/terminal key flags.
+ * @param regions - Source ranges rendered as a single folded row.
  * @returns The next editor state, without sending a message or exiting.
  */
-export declare function editInput(state: EditState, input: string, key: Partial<Key>): EditState;
-/** Controlled composer with local cursor and kill buffer; Enter submission belongs to the caller. */
-export declare function TextInput({ value, onChange, onCursorChange, onSubmit, focus, placeholder, reservedKeys }: {
+export declare function editInput(state: EditState, input: string, key: Partial<Key>, regions?: readonly FoldRegion[]): EditState;
+/** Controlled composer with local cursor, kill buffer and a cursor-following row window.
+ *
+ * Enter submission belongs to the caller. A draft taller than `maxRows` scrolls inside the composer
+ * so the conversation above it keeps its space; a multiline block taller than the window folds to a
+ * single summary row whose text is still sent in full.
+ */
+export declare function TextInput({ value, onChange, onCursorChange, onSubmit, focus, placeholder, reservedKeys, width, maxRows, prompt, promptColor }: {
     value: string;
     onChange(value: string): void;
     onCursorChange(cursor: number): void;
@@ -22,4 +29,12 @@ export declare function TextInput({ value, onChange, onCursorChange, onSubmit, f
     placeholder: string;
     /** Keys owned by the surrounding picker while the composer is empty. */
     reservedKeys?: readonly string[];
+    /** Cells available to the draft, excluding the prompt and the composer border. */
+    width: number;
+    /** Content rows shown before the composer scrolls. */
+    maxRows: number;
+    /** Prompt drawn on the first visible row. */
+    prompt?: string;
+    /** Prompt colour, which dims while an answer dialog parks the draft. */
+    promptColor?: string;
 }): import("react").JSX.Element;

package/dist/ui/input/input.js

@@ -1,31 +1,46 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** Single-line terminal editing with explicit cursor ownership and Unicode grapheme movement. */
-import { useEffect, useRef, useState } from 'react';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/** Terminal editing with explicit cursor ownership, Unicode movement and a bounded multi-row window. */
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { isMouseReport } from "./mouse.js";
-import { Text, useInput, useStdin } from 'ink';
+import { cursorPlace, foldLabel, planDraft, windowRows } from "./viewport.js";
+import { Box, Text, useInput, useStdin } from 'ink';
 const segments = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+/** A cursor position strictly inside a folded block is pulled to the nearer edge, so movement
+ * never parks inside a block that renders as one summary row. */
+function snap(position, regions, direction) {
+    for (const region of regions) {
+        if (position > region.start && position < region.end)
+            return direction < 0 ? region.start : region.end;
+    }
+    return position;
+}
 /** Apply one Ink-decoded terminal key; application commands remain owned by the parent.
  * @param state - Current text, cursor, and most recently killed text.
  * @param input - Decoded text or control-key letter.
  * @param key - Ink's VT/terminal key flags.
+ * @param regions - Source ranges rendered as a single folded row.
  * @returns The next editor state, without sending a message or exiting.
  */
-export function editInput(state, input, key) {
+export function editInput(state, input, key, regions = []) {
     const { text, cursor, killed } = state;
     if (key.eventType === 'release' || key.return || key.tab || key.escape || key.upArrow || key.downArrow || key.pageUp || key.pageDown)
         return state;
-    const previous = () => segments.segment(text).containing(cursor - 1)?.index ?? 0;
+    const previous = () => snap(segments.segment(text).containing(cursor - 1)?.index ?? 0, regions, -1);
     const next = () => {
         const part = segments.segment(text).containing(cursor);
-        return part ? part.index + part.segment.length : text.length;
+        return snap(part ? part.index + part.segment.length : text.length, regions, 1);
     };
-    const wordStart = () => text.slice(0, cursor).replace(/\s+$/u, '').replace(/\S+$/u, '').length;
-    const wordEnd = () => cursor + (/^\s*\S+/u.exec(text.slice(cursor))?.[0].length ?? text.length - cursor);
+    const wordStart = () => snap(text.slice(0, cursor).replace(/\s+$/u, '').replace(/\S+$/u, '').length, regions, -1);
+    const wordEnd = () => snap(cursor + (/^\s*\S+/u.exec(text.slice(cursor))?.[0].length ?? text.length - cursor), regions, 1);
     const move = (position) => position === cursor ? state : ({ ...state, cursor: position });
     const remove = (start, end, kill = false) => ({
         text: text.slice(0, start) + text.slice(end), cursor: start,
         killed: kill && start !== end ? text.slice(start, end) : killed,
     });
+    // A folded block is one object: crossing it is one step, and backspace or delete at its edge
+    // removes the whole block rather than one character of hidden text.
+    const trailingFold = regions.find(region => region.end === cursor);
+    const leadingFold = regions.find(region => region.start === cursor);
     if (key.home || key.ctrl && input === 'a')
         return move(0);
     if (key.end || key.ctrl && input === 'e')
@@ -47,20 +62,26 @@ export function editInput(state, input, key) {
     if (key.meta && input === 'd')
         return remove(cursor, wordEnd(), true);
     if (key.backspace || key.ctrl && input === 'h')
-        return remove(previous(), cursor);
+        return trailingFold ? remove(trailingFold.start, trailingFold.end) : remove(previous(), cursor);
     if (key.delete || key.ctrl && input === 'd')
-        return remove(cursor, next());
+        return leadingFold ? remove(leadingFold.start, leadingFold.end) : remove(cursor, next());
     if (key.ctrl && input === 'y')
         return { ...state, text: text.slice(0, cursor) + killed + text.slice(cursor), cursor: cursor + killed.length };
     if (key.ctrl || key.meta || key.super || key.hyper)
         return state;
-    const inserted = input.replace(/[\r\n\t]+/g, ' ').replace(/[\u0000-\u001f\u007f-\u009f]/g, '');
+    // A paste keeps its line breaks and tabs; the display row is where they are turned into layout.
+    const inserted = input.replace(/\r\n?/g, '\n').replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f-\u009f]/g, '');
     if (!inserted)
         return state;
     return { ...state, text: text.slice(0, cursor) + inserted + text.slice(cursor), cursor: cursor + inserted.length };
 }
-/** Controlled composer with local cursor and kill buffer; Enter submission belongs to the caller. */
-export function TextInput({ value, onChange, onCursorChange, onSubmit, focus, placeholder, reservedKeys }) {
+/** Controlled composer with local cursor, kill buffer and a cursor-following row window.
+ *
+ * Enter submission belongs to the caller. A draft taller than `maxRows` scrolls inside the composer
+ * so the conversation above it keeps its space; a multiline block taller than the window folds to a
+ * single summary row whose text is still sent in full.
+ */
+export function TextInput({ value, onChange, onCursorChange, onSubmit, focus, placeholder, reservedKeys, width, maxRows, prompt = '❯ ', promptColor }) {
     const { internal_eventEmitter } = useStdin();
     const rawKey = useRef('');
     useEffect(() => {
@@ -74,6 +95,12 @@ export function TextInput({ value, onChange, onCursorChange, onSubmit, focus, pl
     const [, redraw] = useState(0);
     if (current.current.text !== value)
         current.current = { ...current.current, text: value, cursor: value.length };
+    const { text, cursor } = current.current;
+    const plan = useMemo(() => planDraft(text, width, maxRows), [text, width, maxRows]);
+    // Input callbacks run before Ink refreshes the controlled field, so the handler reads the
+    // freshest regions through a ref instead of the closure it was created with.
+    const regions = useRef(plan.regions);
+    regions.current = plan.regions;
     useInput((input, key) => {
         if (key.eventType === 'release' || isMouseReport(rawKey.current))
             return;
@@ -86,7 +113,7 @@ export function TextInput({ value, onChange, onCursorChange, onSubmit, focus, pl
         const before = current.current;
         const backspace = rawKey.current === '\x7f' || rawKey.current === '\x1b\x7f'
             || /^\x1b\[127(?:;[\d:]+)?u$/.test(rawKey.current);
-        const after = editInput(before, input, key.delete && backspace ? { ...key, delete: false, backspace: true } : key);
+        const after = editInput(before, input, key.delete && backspace ? { ...key, delete: false, backspace: true } : key, regions.current);
         current.current = after;
         if (after.text !== before.text)
             onChange(after.text);
@@ -95,11 +122,23 @@ export function TextInput({ value, onChange, onCursorChange, onSubmit, focus, pl
         if (after.text === before.text && after.cursor !== before.cursor)
             redraw(value => value + 1);
     }, { isActive: focus });
-    const { text, cursor } = current.current;
-    const character = segments.segment(text).containing(cursor)?.segment ?? ' ';
-    if (!text && !focus)
-        return _jsx(Text, { dimColor: true, children: placeholder });
-    if (!text)
-        return _jsxs(Text, { children: [_jsx(Text, { inverse: true, children: placeholder[0] ?? ' ' }), _jsx(Text, { dimColor: true, children: placeholder.slice(1) })] });
-    return _jsxs(Text, { children: [text.slice(0, cursor), _jsx(Text, { inverse: focus, children: character }), text.slice(cursor + character.length)] });
+    if (!text) {
+        if (!focus)
+            return _jsxs(Text, { dimColor: true, children: [prompt, placeholder] });
+        return _jsxs(Text, { children: [_jsx(Text, { color: promptColor, children: prompt }), _jsx(Text, { inverse: true, children: placeholder[0] ?? ' ' }), _jsx(Text, { dimColor: true, children: placeholder.slice(1) })] });
+    }
+    const place = cursorPlace(plan.rows, cursor);
+    const window = windowRows(plan.rows.length, place.row, maxRows);
+    return _jsx(Box, { flexDirection: "column", flexShrink: 0, children: plan.rows.slice(window.start, window.end).map((row, offset) => {
+            const index = window.start + offset;
+            const lead = index === window.start ? prompt : ' '.repeat(prompt.length);
+            const key = `${row.start}:${index}`;
+            if (row.fold)
+                return _jsxs(Text, { dimColor: true, children: [_jsx(Text, { color: promptColor, children: lead }), foldLabel(row.fold)] }, key);
+            if (index !== place.row)
+                return _jsxs(Text, { children: [_jsx(Text, { color: promptColor, children: lead }), row.text] }, key);
+            const at = Math.min(place.index, row.text.length);
+            const end = row.map[cursor - row.start + 1] ?? row.text.length;
+            return _jsxs(Text, { children: [_jsx(Text, { color: promptColor, children: lead }), row.text.slice(0, at), _jsx(Text, { inverse: focus, children: row.text.slice(at, end) || ' ' }), row.text.slice(end)] }, key);
+        }) });
 }

package/dist/ui/input/viewport.d.ts

@@ -0,0 +1,96 @@
+/** Cells a tab advances to; every stop is a multiple of this width. */
+export declare const TAB_WIDTH = 4;
+/** Source range of one block that renders as a summary row instead of its text. */
+export interface FoldRegion {
+    start: number;
+    end: number;
+}
+/** One rendered draft row and the source range it came from. */
+export interface DraftRow {
+    /** Display text; tabs are already expanded to spaces. */
+    text: string;
+    /** First source offset covered by this row. */
+    start: number;
+    /** One past the last source offset covered by this row. */
+    end: number;
+    /** `map[k]` is the index in `text` of source offset `start + k`. */
+    map: number[];
+    /** Present when this row summarizes a folded block rather than showing its text. */
+    fold?: {
+        from: number;
+        to: number;
+        lines: number;
+        bytes: number;
+    };
+}
+/** Where the cursor lands among the rendered rows. */
+export interface CursorPlace {
+    row: number;
+    index: number;
+    column: number;
+}
+/** Rendered rows plus the blocks the editor must treat as single objects. */
+export interface DraftPlan {
+    rows: DraftRow[];
+    regions: FoldRegion[];
+}
+/** Spaces a tab adds to reach the next stop after the given column.
+ * @param column - Cells already used on the row.
+ * @param width - Tab stop width in cells.
+ * @returns Cell count for one tab, always at least one.
+ */
+export declare function tabStop(column: number, width?: number): number;
+/** Byte length of draft text, used for the folded-block size label.
+ * @param text - Source text.
+ * @returns UTF-8 byte length.
+ */
+export declare function byteLength(text: string): number;
+/** Compact size label for a folded block.
+ * @param bytes - UTF-8 byte length.
+ * @returns Bytes, kilobytes or megabytes with one decimal.
+ */
+export declare function formatBytes(bytes: number): string;
+/** Wrap a draft into display rows, expanding tabs and hard-breaking long segments.
+ *
+ * A newline belongs to the end of the row it closes, so a cursor parked on it renders at that row's
+ * end and a cursor just after it renders at the next row's start.
+ * @param text - Source text, including newlines and tabs.
+ * @param width - Row width in cells.
+ * @param tabWidth - Tab stop width in cells.
+ * @returns One entry per rendered row, in order.
+ */
+export declare function wrapDraft(text: string, width: number, tabWidth?: number): DraftRow[];
+/** Locate the cursor among rendered rows.
+ * @param rows - Rendered rows from `wrapDraft`.
+ * @param cursor - Source offset of the cursor.
+ * @returns Row index, display index within that row, and its cell column.
+ */
+export declare function cursorPlace(rows: readonly DraftRow[], cursor: number): CursorPlace;
+/** Choose the visible slice of rows that keeps the cursor on screen.
+ * @param count - Total rendered row count.
+ * @param cursorRow - Row index the cursor occupies.
+ * @param maxRows - Content rows the composer may show.
+ * @returns Half-open row range to render.
+ */
+export declare function windowRows(count: number, cursorRow: number, maxRows: number): {
+    start: number;
+    end: number;
+};
+/** Wrap and fold a draft for display.
+ *
+ * A block is folded only when the draft has interior lines to hide and its whole wrapped height
+ * exceeds the composer window. The decision reads the unfolded height, so folding can never feed
+ * back into itself and oscillate. When the logical line count alone already exceeds the window the
+ * interior is never wrapped, which keeps a very large paste cheap to re-plan on every keystroke.
+ * @param text - Source text, including newlines and tabs.
+ * @param width - Row width in cells.
+ * @param maxRows - Content rows the composer may show.
+ * @param tabWidth - Tab stop width in cells.
+ * @returns Rows to render and the source range of every folded block.
+ */
+export declare function planDraft(text: string, width: number, maxRows: number, tabWidth?: number): DraftPlan;
+/** Display label for a folded block.
+ * @param fold - Folded-block facts.
+ * @returns A single-line summary such as `[84 lines · 6.1 KB]`.
+ */
+export declare function foldLabel(fold: NonNullable<DraftRow['fold']>): string;