@itookit/dsht 0.2.4 → 0.3.2

package/dist/ui/chat/header.d.ts

@@ -0,0 +1,11 @@
+/** Session title and optional preset label above the divider.
+ * @param props - Title, preset label, geometry and freeze identity.
+ * @returns The header rows.
+ */
+export declare function ChatHeader({ title, mode, width, frozen, identity }: {
+    title: string;
+    mode?: string;
+    width: number;
+    frozen: boolean;
+    identity: string;
+}): import("react").JSX.Element;

package/dist/ui/chat/header.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Fixed conversation header: session title, workspace, and the agent-preset label. */
+import { Box, Text } from 'ink';
+import { toolLine } from "../../session/transcript.js";
+import { Frozen } from "../frozen.js";
+import { useTheme } from "../theme/index.js";
+/** Session title and optional preset label above the divider.
+ * @param props - Title, preset label, geometry and freeze identity.
+ * @returns The header rows.
+ */
+export function ChatHeader({ title, mode, width, frozen, identity }) {
+    const theme = useTheme();
+    return _jsx(Frozen, { frozen: frozen, identity: identity, children: _jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsxs(Box, { width: width, children: [_jsx(Box, { flexGrow: 1, flexShrink: 1, minWidth: 0, children: _jsx(Text, { bold: true, color: theme.accent, wrap: "truncate-end", children: toolLine(title, width) }) }), width >= 60 && mode && _jsx(Box, { flexShrink: 0, marginLeft: 2, children: _jsx(Text, { color: theme.accent, children: toolLine(mode, Math.min(24, Math.floor(width / 3))) }) })] }), _jsx(Text, { dimColor: true, children: '─'.repeat(width) })] }) });
+}

package/dist/{history-view.d.ts → ui/chat/history-view.d.ts}

@@ -1,4 +1,4 @@
-import type { HistoryRow } from './history.ts';
+import type { HistoryRow } from '../../session/history.ts';
 /** Render a viewport with role, reasoning, tool and result colors from the selected theme.
  * @param rows - Already wrapped, terminal-safe visible rows.
  * @returns Colored text with unchanged row geometry and plain-text role markers.

package/dist/{history-view.js → ui/chat/history-view.js}

@@ -1,12 +1,12 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Only visible semantic rows become React nodes; ANSI colors are applied after remote text sanitation. */
 import { Text } from 'ink';
-import { useTheme } from "./theme.js";
+import { useTheme } from "../theme/index.js";
 /** Render a viewport with role, reasoning, tool and result colors from the selected theme.
  * @param rows - Already wrapped, terminal-safe visible rows.
  * @returns Colored text with unchanged row geometry and plain-text role markers.
  */
 export function HistoryViewport({ rows }) {
     const theme = useTheme();
-    return _jsx(Text, { children: rows.map((row, index) => _jsxs(Text, { color: theme.colors[row.kind], bold: row.bold, children: [row.text, index < rows.length - 1 ? '\n' : ''] }, index)) });
+    return _jsx(Text, { children: rows.map((row, index) => _jsxs(Text, { color: theme.colors[row.kind], bold: row.bold, children: [row.spans ? row.spans.map((span, index) => _jsx(Text, { bold: span.bold, italic: span.italic, underline: span.underline, strikethrough: span.strikethrough, inverse: span.inverse, children: span.text }, index)) : row.text, index < rows.length - 1 ? '\n' : ''] }, index)) });
 }

package/dist/ui/chat/status.d.ts

@@ -0,0 +1,79 @@
+import type { Controller } from '../../controller/controller.ts';
+import { type ObjectValue } from '../../transport/wire.ts';
+/** Format elapsed wall time, clamping clock skew instead of displaying negative durations.
+ * @param milliseconds - Elapsed duration.
+ * @returns Minute/second display, with hours when needed.
+ */
+export declare function elapsedTime(milliseconds: number): string;
+/** Produce compact metadata lines without inferring missing provider measurements.
+ *
+ * Counts use the compact form the single-row bar already uses, because a full count of a long
+ * session is eight digits wide and pushes each line past the terminal width on its own.
+ * @param values - Current host projection values.
+ * @param defaultModel - Host catalog default used before a session selects a route.
+ * @param running - Whether the current route or next route is primary.
+ * @returns Model, approximate context occupancy, and cumulative token buckets.
+ */
+export declare function metricLines(values: ObjectValue, defaultModel: ObjectValue | undefined, running: boolean): string[];
+/** The stripe of work the live attempt is in, as the status bar shows it. */
+export interface StatusSegment {
+    text: string;
+    color?: string;
+}
+/** Every group the single-row bar can show, in the order the packer keeps them. */
+export interface StatusGroups {
+    /** Always shown: the running clock, Ready, a freeze reason, or the offline/error takeover. */
+    state: StatusSegment;
+    /** What the live attempt is doing now, e.g. `bash 1:08` or `think 28s`. */
+    phase?: StatusSegment;
+    /** How to stop the running turn. */
+    stop?: StatusSegment;
+    /** This session's cost, scope-labelled so it cannot read as a share of the day total. */
+    session?: StatusSegment;
+    /** Context share, labelled because a bare percentage next to money reads as a budget. */
+    context?: StatusSegment;
+    /** Today's cost across sessions; shown only where the width allows it. */
+    day?: StatusSegment;
+    /** Model name without its reasoning effort, which is dropped first. */
+    model?: StatusSegment;
+    /** Reasoning effort, kept only while the model name still fits beside it. */
+    effort?: StatusSegment;
+    /** Completed turns. */
+    turns?: StatusSegment;
+    /** Cumulative tokens. */
+    tokens?: StatusSegment;
+}
+/** Elapsed time as `m:ss`, adding hours only when they exist.
+ * @param milliseconds - Duration to format.
+ * @returns Clock text without a leading zero on minutes.
+ */
+export declare function clockText(milliseconds: number): string;
+/** Age of a phase, in seconds while it is short and as a clock afterwards.
+ * @param milliseconds - Phase duration to format.
+ * @returns `28s` below a minute, otherwise `1:08`.
+ */
+export declare function phaseText(milliseconds: number): string;
+/** Fit the status groups into one row, or two when the state and the cost cannot share one.
+ *
+ * Groups are kept by value, not by column: the least valuable group is dropped first, so any width
+ * degrades continuously instead of snapping to a fixed layout. The cost is never dropped, only
+ * moved to the second row, because it is one of the few answers this bar exists to give.
+ * @param groups - Group texts, each already formatted for display.
+ * @param width - Available terminal columns.
+ * @returns One or two rows of segments; separators carry no colour of their own.
+ */
+export declare function compactStatusRows(groups: StatusGroups, width: number): StatusSegment[][];
+/** Render a live clock and selected-session metadata; the timer belongs to this mounted bar. */
+export declare const StatusBar: import("react").NamedExoticComponent<{
+    controller: Controller;
+    expanded?: boolean;
+    width?: number;
+    revision?: number;
+    scroll?: number;
+    pageSize?: number;
+    onScroll?(next: number): void;
+    onOverflow?(overflow: boolean): void;
+    onRows?(rows: number): void;
+    /** Why the display is paused, so a frozen clock can say so instead of looking stalled. */
+    pauseReason?: "copy" | "dialog" | "history";
+}>;

package/dist/ui/chat/status.js

@@ -0,0 +1,311 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Terminal status from host projections; cumulative usage and estimated context stay distinct. */
+import { useTheme } from "../theme/index.js";
+import { memo, useEffect, useState } from 'react';
+import { Box, Text, useStdout } from 'ink';
+import wrapAnsi from 'wrap-ansi';
+import stringWidth from 'string-width';
+import { costText } from "../../cost/index.js";
+import { toolLine } from "../../session/transcript.js";
+import { safeText } from "../../transport/wire.js";
+/** Format elapsed wall time, clamping clock skew instead of displaying negative durations.
+ * @param milliseconds - Elapsed duration.
+ * @returns Minute/second display, with hours when needed.
+ */
+export function elapsedTime(milliseconds) {
+    const seconds = Math.max(0, Math.floor(milliseconds / 1000));
+    const minutes = Math.floor(seconds / 60);
+    if (minutes === 0)
+        return `${seconds}s`;
+    return `${minutes >= 60 ? `${Math.floor(minutes / 60)}h ` : ''}${minutes % 60}m ${seconds % 60}s`;
+}
+/** Compact token counts; one formatter is reused because construction dominates the format cost. */
+const compactNumber = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });
+/** Produce compact metadata lines without inferring missing provider measurements.
+ *
+ * Counts use the compact form the single-row bar already uses, because a full count of a long
+ * session is eight digits wide and pushes each line past the terminal width on its own.
+ * @param values - Current host projection values.
+ * @param defaultModel - Host catalog default used before a session selects a route.
+ * @param running - Whether the current route or next route is primary.
+ * @returns Model, approximate context occupancy, and cumulative token buckets.
+ */
+export function metricLines(values, defaultModel, running) {
+    const selection = record(values.modelSelection);
+    const current = running ? selection.lastUsed ?? selection.next ?? defaultModel : selection.next ?? selection.lastUsed ?? defaultModel;
+    const model = modelName(current);
+    const next = modelName(selection.next);
+    const compact = (value) => value === undefined ? '?' : compactNumber.format(value);
+    const pressure = record(values.contextPressure);
+    const used = numeric(pressure.projectedTokens) ?? numeric(pressure.pressureTokens);
+    const capacity = numeric(pressure.contextWindow);
+    const context = used !== undefined && capacity !== undefined && capacity > 0
+        ? `~${Math.min(100, Math.round(used / capacity * 100))}% (${compact(used)}/${compact(capacity)})`
+        : 'unknown';
+    const usage = record(values.tokenUsage);
+    const buckets = [usage.uncachedInputTokens, usage.outputTokens, usage.cacheReadTokens, usage.cacheWriteTokens].map(numeric);
+    const total = buckets.every(value => value !== undefined) ? buckets.reduce((a, b) => a + b, 0) : undefined;
+    return [
+        `Model: ${model}${running && next !== 'unknown' && next !== model ? ` · Next: ${next}` : ''}`,
+        `Context ${context} · ${compact(total)} tok`,
+        `In ${compact(buckets[0])} · Out ${compact(buckets[1])} · Cache ${compact(buckets[2])}/${compact(buckets[3])}`,
+    ];
+}
+/** Elapsed time as `m:ss`, adding hours only when they exist.
+ * @param milliseconds - Duration to format.
+ * @returns Clock text without a leading zero on minutes.
+ */
+export function clockText(milliseconds) {
+    const seconds = Math.max(0, Math.floor(milliseconds / 1000));
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60)
+        return `${minutes}:${String(seconds % 60).padStart(2, '0')}`;
+    return `${Math.floor(minutes / 60)}:${String(minutes % 60).padStart(2, '0')}:${String(seconds % 60).padStart(2, '0')}`;
+}
+/** Age of a phase, in seconds while it is short and as a clock afterwards.
+ * @param milliseconds - Phase duration to format.
+ * @returns `28s` below a minute, otherwise `1:08`.
+ */
+export function phaseText(milliseconds) {
+    const seconds = Math.max(0, Math.floor(milliseconds / 1000));
+    return seconds < 60 ? `${seconds}s` : clockText(milliseconds);
+}
+/** Fit the status groups into one row, or two when the state and the cost cannot share one.
+ *
+ * Groups are kept by value, not by column: the least valuable group is dropped first, so any width
+ * degrades continuously instead of snapping to a fixed layout. The cost is never dropped, only
+ * moved to the second row, because it is one of the few answers this bar exists to give.
+ * @param groups - Group texts, each already formatted for display.
+ * @param width - Available terminal columns.
+ * @returns One or two rows of segments; separators carry no colour of their own.
+ */
+export function compactStatusRows(groups, width) {
+    if (width <= 0)
+        return [];
+    // Remote text reaches this bar, so every group is stripped of control characters before packing.
+    const clean = (group) => group === undefined ? undefined : { ...group, text: safeText(group.text).replace(/[\r\n\t]+/g, ' ') };
+    groups = { state: clean(groups.state), phase: clean(groups.phase), stop: clean(groups.stop), session: clean(groups.session),
+        context: clean(groups.context), day: clean(groups.day), model: clean(groups.model), effort: clean(groups.effort),
+        turns: clean(groups.turns), tokens: clean(groups.tokens) };
+    const cluster = [groups.state, groups.phase, groups.stop].filter(Boolean);
+    const rest = [groups.session, groups.context, groups.day, groups.model, groups.effort, groups.turns, groups.tokens].filter(Boolean);
+    // One row while enough of the sequence fits; each step drops the least valuable group first.
+    // The cost is never dropped, only moved to the second row, so the search stops above it.
+    const floor = groups.session === undefined ? 0 : 1;
+    for (let keep = rest.length; keep >= floor; keep--) {
+        const row = pack(cluster, rest.slice(0, keep));
+        if (measure(row) <= width)
+            return [row];
+    }
+    if (groups.session === undefined && measure(pack(cluster, [])) > width)
+        return [fitCluster(cluster, width)];
+    // Not even the state cluster and the cost share a row, so the cost opens the second one.
+    return [fitCluster(cluster, width), packGreedy(rest, width)];
+}
+/** Fit the state cluster, dropping the phase and then the stop hint before truncating the state.
+ * @param cluster - State, phase and stop hint in that order.
+ * @param width - Available terminal columns.
+ * @returns The cluster as far as it fits.
+ */
+function fitCluster(cluster, width) {
+    for (let keep = cluster.length; keep >= 1; keep--) {
+        const row = pack(cluster.slice(0, keep), []);
+        if (measure(row) <= width)
+            return row;
+    }
+    const [first] = cluster;
+    return first === undefined ? [] : [{ ...first, text: toolLine(first.text, width) }];
+}
+/** Join the state cluster and the groups that follow it with their boundary separator.
+ * @param cluster - State, phase and stop hint, separated by middots.
+ * @param rest - Remaining groups, separated from the cluster by a bar.
+ * @returns The packed row.
+ */
+function pack(cluster, rest) {
+    return [...cluster, ...rest].flatMap((group, index) => index === 0 ? [group]
+        : [{ text: index === cluster.length ? ' │ ' : ' · ' }, group]);
+}
+/** Add leading groups while they fit, stopping at the first that does not.
+ * @param groups - Groups in keep order.
+ * @param width - Available terminal columns.
+ * @returns The groups that fit.
+ */
+function packGreedy(groups, width) {
+    let row = [];
+    for (const group of groups) {
+        const next = row.length === 0 ? [group] : [...row, { text: ' · ' }, group];
+        if (measure(next) > width)
+            break;
+        row = next;
+    }
+    return row;
+}
+/** Join groups with a separator, keeping the separator uncoloured.
+ * @param groups - Groups to join.
+ * @param separator - Separator text between them.
+ * @returns The groups with separators interleaved.
+ */
+function joinSegments(groups, separator) {
+    return groups.flatMap((group, index) => index === 0 ? [group] : [{ text: separator }, group]);
+}
+/** Display width of one packed row, so wide characters count as two columns.
+ * @param row - Segments already joined with their separators.
+ * @returns Columns the row occupies.
+ */
+function measure(row) {
+    return row.reduce((sum, segment) => sum + stringWidth(segment.text), 0);
+}
+/** Render a live clock and selected-session metadata; the timer belongs to this mounted bar. */
+export const StatusBar = memo(function StatusBar({ controller, expanded = false, width, scroll = 0, pageSize, onScroll, onOverflow, onRows, pauseReason }) {
+    const paused = pauseReason !== undefined;
+    const theme = useTheme();
+    const { stdout } = useStdout();
+    const [now, setNow] = useState(Date.now);
+    const [reported, setReported] = useState(1);
+    const running = controller.running;
+    const since = controller.workingSince;
+    useEffect(() => {
+        setNow(Date.now());
+        if (!running || paused)
+            return;
+        const timer = setInterval(() => setNow(Date.now()), 1000);
+        return () => clearInterval(timer);
+    }, [running, since, paused]);
+    const state = controller.state;
+    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 todayCost = costs ? costText(costs.total(undefined, 1, Date.now())) : '?';
+    // `*` belongs to costText alone; incomplete coverage is a separate degradation, reported by `!`.
+    const coverage = costs?.coverage ?? 'complete';
+    const label = workspace ? `${workspace.title} · ${workspace.path}` : 'none selected';
+    if (!expanded) {
+        const selection = record(view.values.modelSelection);
+        const route = record(running ? selection.lastUsed ?? selection.next ?? state.defaultModel : selection.next ?? selection.lastUsed ?? state.defaultModel);
+        const model = typeof route.model === 'string' ? route.model.replace(/^deepseek-/, '') : undefined;
+        const effort = typeof route.reasoningEffort === 'string' ? route.reasoningEffort : undefined;
+        const pressure = record(view.values.contextPressure);
+        const used = numeric(pressure.projectedTokens) ?? numeric(pressure.pressureTokens);
+        const capacity = numeric(pressure.contextWindow);
+        const percent = used !== undefined && capacity !== undefined && capacity > 0 ? Math.min(100, Math.round(used / capacity * 100)) : undefined;
+        const usage = record(view.values.tokenUsage);
+        const buckets = [usage.uncachedInputTokens, usage.outputTokens, usage.cacheReadTokens, usage.cacheWriteTokens].map(numeric);
+        const total = buckets.every(value => value !== undefined) ? buckets.reduce((a, b) => a + b, 0) : undefined;
+        const compactCount = (value) => value === undefined ? '?' : compactNumber.format(value);
+        const phase = state.transcript.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.
+        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 };
+        // The marker names the scope it belongs to: a subtotal is inexact when a record could not be
+        // priced, when it is only estimated, or when the scan has not covered every session yet.
+        const inexact = coverage !== 'complete';
+        const money = (value) => `¥${value.amount.toFixed(2)}${value.unknown || value.estimated || inexact ? '*' : ''}`;
+        const sessionTotal = costs !== undefined && costs.hasSession(state.sessionId) ? costs.total(state.sessionId) : undefined;
+        const groups = {
+            state: stateToken,
+            ...(phaseLabel === undefined || pauseReason !== undefined ? {} : { phase: { text: phaseLabel } }),
+            ...(running && pauseReason === undefined ? { stop: { text: '^C' } } : {}),
+            ...(sessionTotal === undefined ? {} : { session: { text: `S${money(sessionTotal)}`, color: theme.status.cost } }),
+            ...(percent === undefined ? {} : { context: { text: `ctx ${percent}%`,
+                    color: percent >= 95 ? theme.status.critical : percent >= 80 ? theme.status.warning : theme.status.context } }),
+            ...(costs === undefined ? {} : { day: { text: `D${money(costs.total(undefined, 1, Date.now()))}`, color: theme.status.cost } }),
+            ...(model === undefined ? {} : { model: { text: model, color: theme.status.model } }),
+            ...(model === undefined || effort === undefined ? {} : { effort: { text: effort, color: theme.status.model } }),
+            ...(numeric(record(view.values.sessionStats).turns) === undefined ? {} : { turns: { text: `${count(numeric(record(view.values.sessionStats).turns))} turns`, color: theme.status.usage } }),
+            ...(total === undefined ? {} : { tokens: { text: `${compactCount(total)} tok`, color: theme.status.usage } }),
+        };
+        const rows = compactStatusRows(groups, width ?? Math.max(1, (stdout.columns ?? 80) - 2));
+        if (rows.length !== reported) {
+            setReported(rows.length);
+            onRows?.(rows.length);
+        }
+        return _jsx(Box, { flexDirection: "column", children: rows.map((row, index) => _jsx(Text, { wrap: "truncate-end", children: row.map((segment, position) => _jsx(Text, { color: segment.color ?? theme.colors.muted, bold: index === 0 && position === 0, children: segment.text }, position)) }, index)) });
+    }
+    return _jsx(StatusDetails, { controller: controller, theme: theme, width: width, now: now, scroll: scroll, pageSize: pageSize, onScroll: onScroll, onOverflow: onOverflow });
+});
+/** Expanded detail panel.
+ *
+ * It is a separate component because it is the only branch that scrolls, and a hook behind the
+ * collapsed branch's early return would change the hook order between the two states.
+ */
+const StatusDetails = memo(function StatusDetails({ controller, theme, width, now, scroll, pageSize, onScroll, onOverflow }) {
+    const { stdout } = useStdout();
+    const state = controller.state;
+    const running = controller.running;
+    const since = controller.workingSince;
+    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 todayCost = costs ? costText(costs.total(undefined, 1, Date.now())) : '?';
+    // `*` belongs to costText alone; incomplete coverage is a separate degradation, reported by `!`.
+    const coverage = costs?.coverage ?? 'complete';
+    const label = workspace ? `${workspace.title} · ${workspace.path}` : 'none selected';
+    // Every detail row wraps to the terminal width, so a narrow terminal loses nothing; lines that
+    // still do not fit are scrolled rather than dropped, because the panel shares the screen height.
+    // Rows are merged and labelled compactly so a normal terminal shows every detail on one screen;
+    // the wrap and the scroll offset remain the fallback for a short or very narrow terminal.
+    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: '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)}` : ''}` }] : [],
+        { key: 'workspace', text: `Workspace ${safeText(label)}` },
+        ...metricLines(view.values, state.defaultModel, running).map((line, index) => ({ key: `metric-${index}`, text: safeText(line), dim: true })),
+        ...costs ? [{ key: 'cost', text: `Cost ${sessionCost} session · ${todayCost} today · ${turns} turns`, dim: true }] : [],
+        { key: 'queued', text: `Queued ${count(view.queued)} · Jobs ${count(view.jobs)}${costs ? '' : ` · ${turns} turns`}`, dim: true },
+        ...costs && coverage === 'partial'
+            ? [{ key: 'coverage', color: theme.colors.context, text: `Cost coverage incomplete: ${costs.error ? safeText(costs.error) : 'no complete scan yet'}` }] : [],
+        ...state.controlError ? [{ key: 'control-error', color: theme.colors.context, text: safeText(state.controlError) }] : [],
+        ...state.presetError ? [{ key: 'preset-error', color: theme.colors.context, text: `Preset names unavailable: ${safeText(state.presetError)}` }] : [],
+        ...state.modelError ? [{ key: 'model-error', color: theme.colors.context, text: `Model catalog unavailable: ${safeText(state.modelError)}` }] : [],
+    ];
+    // Border and horizontal padding take four columns, so a detail row wraps inside what is left.
+    const inner = Math.max(1, (width ?? Math.max(3, (stdout.columns ?? 80) - 2)) - 4);
+    const measured = (text) => wrapAnsi(text, inner, { trim: false, hard: true }).split('\n').length;
+    const lines = detail.flatMap(row => wrapAnsi(row.text, inner, { trim: false, hard: true }).split('\n')
+        .map((text, index) => ({ ...row, key: `${row.key}:${index}`, text })));
+    const budget = Math.max(1, pageSize ?? lines.length);
+    const hint = (first, last, total) => `Status ${first}-${last}/${total} · ↑↓ scroll · Esc close`;
+    // A footer that wraps takes rows from the view, so its height is reserved before sizing it.
+    const size = Math.max(1, budget - (lines.length > budget ? measured(hint(0, 0, lines.length)) : 0));
+    const start = Math.max(0, Math.min(scroll, Math.max(0, lines.length - size)));
+    // Arrows and the wheel can ask for a line past either end; report the settled position back.
+    useEffect(() => { if (start !== scroll)
+        onScroll?.(start); }, [start, scroll, onScroll]);
+    // The caller needs to know whether this panel owns the arrows or has nothing to scroll.
+    useEffect(() => { onOverflow?.(lines.length > size); }, [lines.length, size, onOverflow]);
+    const visible = lines.slice(start, start + size);
+    return _jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.border, paddingX: 1, children: [visible.map(line => _jsx(Text, { color: line.color, dimColor: line.dim, children: line.text }, line.key)), lines.length > size && _jsx(Text, { dimColor: true, children: hint(start + 1, start + visible.length, lines.length) })] });
+});
+function record(value) {
+    return value !== null && typeof value === 'object' && !Array.isArray(value) ? value : {};
+}
+function numeric(value) {
+    return typeof value === 'number' && Number.isFinite(value) && value >= 0 ? value : undefined;
+}
+function count(value) { return value === undefined ? '?' : value.toLocaleString('en-US'); }
+function modelName(value) {
+    const model = record(value);
+    if (typeof model.model !== 'string' || typeof model.provider !== 'string')
+        return 'unknown';
+    return safeText(`${model.provider}/${model.model}${typeof model.reasoningEffort === 'string' ? ` (${model.reasoningEffort})` : ''}`);
+}
+function compactCost(total) {
+    return `~¥${total.amount.toFixed(2)}${total.unknown || total.estimated ? '*' : ''}`;
+}

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

@@ -0,0 +1,17 @@
+/** Measured conversation viewport: only visible rows become React nodes. */
+import { type DOMElement } from 'ink';
+import type { RefObject } from 'react';
+import type { HistoryRow } from '../../session/history.ts';
+/** Visible conversation rows plus the scroll hint.
+ * @param props - Rows, hint state, freeze identity and the measured box.
+ * @returns The scrollable conversation area.
+ */
+export declare function ChatViewport({ rows, showHistoryHint, dialogOpen, historyWindow, frozen, identity, boxRef }: {
+    rows: HistoryRow[];
+    showHistoryHint: boolean;
+    dialogOpen: boolean;
+    historyWindow: boolean;
+    frozen: boolean;
+    identity: string;
+    boxRef: RefObject<DOMElement | null>;
+}): import("react").JSX.Element;

package/dist/ui/chat/viewport.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Measured conversation viewport: only visible rows become React nodes. */
+import { Box, Text } from 'ink';
+import { Frozen } from "../frozen.js";
+import { useTheme } from "../theme/index.js";
+import { HistoryViewport } from "./history-view.js";
+/** Visible conversation rows plus the scroll hint.
+ * @param props - Rows, hint state, freeze identity and the measured box.
+ * @returns The scrollable conversation area.
+ */
+export function ChatViewport({ rows, showHistoryHint, dialogOpen, historyWindow, frozen, identity, boxRef }) {
+    const theme = useTheme();
+    return _jsxs(Box, { ref: boxRef, flexDirection: "column", flexGrow: 1, flexShrink: 1, minHeight: 0, overflowY: "hidden", marginY: dialogOpen ? 0 : 1, children: [rows.length ? _jsx(Frozen, { frozen: frozen, identity: identity, children: _jsx(HistoryViewport, { rows: rows }) }) : _jsx(Text, { color: theme.colors.muted, children: "Start a conversation with the host agent." }), showHistoryHint && _jsx(Text, { dimColor: true, wrap: "truncate-end", children: dialogOpen ? 'Wheel/PgUp/PgDn · Scroll history' : historyWindow ? 'Earlier history · /latest returns to live conversation' : 'Scroll up or /older to load earlier history' })] });
+}

package/dist/ui/commands/parse.d.ts

@@ -0,0 +1,96 @@
+import type { State } from '../../state.ts';
+/** One classified submission; every side effect stays with the caller. */
+export type Submission = {
+    kind: 'ignore';
+} | {
+    kind: 'reference';
+} | {
+    kind: 'copy';
+} | {
+    kind: 'quit';
+} | {
+    kind: 'panel';
+    panel: 'cost' | 'status' | 'help';
+} | {
+    kind: 'remove';
+    target: 'workspace' | 'session';
+    query: string;
+} | {
+    kind: 'navigate';
+    target: 'workspace' | 'session';
+    query?: string;
+} | {
+    kind: 'path';
+    value: string;
+} | {
+    kind: 'latest';
+} | {
+    kind: 'models';
+    args: string[];
+} | {
+    kind: 'queue';
+} | {
+    kind: 'newSession';
+} | {
+    kind: 'history';
+    query: string;
+} | {
+    kind: 'sessionSearch';
+    command: '/ssearch' | '/wsearch';
+    query: string;
+} | {
+    kind: 'historySearch';
+    query: string;
+} | {
+    kind: 'think';
+    target: string;
+} | {
+    kind: 'older';
+} | {
+    kind: 'compact';
+} | {
+    kind: 'cancel';
+} | {
+    kind: 'approval';
+    allowed: boolean;
+} | {
+    kind: 'hostCommand';
+    line: string;
+} | {
+    kind: 'export';
+    destination?: string;
+} | {
+    kind: 'exportHtml';
+    destination?: string;
+} | {
+    kind: 'answer';
+    text: string;
+} | {
+    kind: 'error';
+    message: string;
+} | {
+    kind: 'prompt';
+    text: string;
+};
+/** UI facts the classification reads; everything else stays with the caller. */
+export interface SubmissionContext {
+    /** Completion menu owns the draft while open. */
+    referenceOpen: boolean;
+    /** Copy mode ignores submissions entirely. */
+    copyMode: boolean;
+    /** A question or approval of the selected session is pending. */
+    pending: boolean;
+    /** The pending interaction is a question. */
+    question: boolean;
+    screen: State['screen'];
+}
+/** Classify one composer draft without performing any of its effects.
+ *
+ * The order of the checks is the command precedence: reference completion, copy mode, the panels
+ * that toggle in place, navigation and removal, then the session and host commands, then answers,
+ * then a plain prompt.
+ * @param raw - Draft exactly as submitted.
+ * @param context - Current UI facts.
+ * @returns The action to perform.
+ */
+export declare function classifySubmission(raw: string, context: SubmissionContext): Submission;