@itookit/dsht 0.3.0 → 0.3.3

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/ui/chat/history-view.d.ts

@@ -0,0 +1,12 @@
+import type { HistoryRow } from '../../session/history.ts';
+/** Render a viewport with role, reasoning, tool and result colors from the selected theme.
+ *
+ * Rows are sibling text nodes rather than lines inside one text node: Ink measures and caches text per
+ * node, so a parent holding the whole viewport is re-measured and retained whenever one row changes.
+ * An empty row renders as a single space because Ink gives an empty text node no height.
+ * @param rows - Already wrapped, terminal-safe visible rows.
+ * @returns Colored rows with unchanged row geometry and plain-text role markers.
+ */
+export declare function HistoryViewport({ rows }: {
+    rows: HistoryRow[];
+}): import("react").JSX.Element;

package/dist/ui/chat/history-view.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Only visible semantic rows become React nodes; ANSI colors are applied after remote text sanitation. */
+import { Box, Text } from 'ink';
+import { useTheme } from "../theme/index.js";
+/** Render a viewport with role, reasoning, tool and result colors from the selected theme.
+ *
+ * Rows are sibling text nodes rather than lines inside one text node: Ink measures and caches text per
+ * node, so a parent holding the whole viewport is re-measured and retained whenever one row changes.
+ * An empty row renders as a single space because Ink gives an empty text node no height.
+ * @param rows - Already wrapped, terminal-safe visible rows.
+ * @returns Colored rows with unchanged row geometry and plain-text role markers.
+ */
+export function HistoryViewport({ rows }) {
+    const theme = useTheme();
+    return _jsx(Box, { flexDirection: "column", children: rows.map((row, index) => _jsx(Text, { color: theme.colors[row.kind], bold: row.bold, children: row.spans?.length ? row.spans.map((span, position) => _jsx(Text, { bold: span.bold, italic: span.italic, underline: span.underline, strikethrough: span.strikethrough, inverse: span.inverse, children: span.text }, position))
+                : row.text === '' ? ' ' : row.text }, index)) });
+}

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

@@ -0,0 +1,91 @@
+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 with today's spend in parentheses, the only money the bar reports. */
+    cost?: StatusSegment;
+    /** Context share, labelled because a bare percentage next to money reads as a budget. */
+    context?: StatusSegment;
+    /** The same share drawn as a bar; used only where it still fits beside every other kept group. */
+    contextBar?: 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;
+    /** Cache-hit share of billed prompt input; it restates the token total, so the packer drops it first. */
+    cache?: StatusSegment;
+}
+/** Cache-hit share of billed prompt input, without reporting a partial hit as a full one.
+ *
+ * A prefix served from cache is what the provider charges least for, so the share is the reading
+ * that explains a cheap session; rounding it up to `100%` would instead claim that input stopped
+ * being billed, so the display gains precision until the number it shows is below a full hit.
+ * @param cacheReadTokens - Prompt tokens the provider served from cache.
+ * @param billedInputTokens - Uncached input, cache read and cache write, the prompt tokens that were billed.
+ * @returns Percentage text, or undefined when no prompt input has been billed yet.
+ */
+export declare function cacheHitText(cacheReadTokens: number | undefined, billedInputTokens: number | undefined): string | undefined;
+/** 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,386 @@
+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])}`,
+    ];
+}
+/** Cache-hit share of billed prompt input, without reporting a partial hit as a full one.
+ *
+ * A prefix served from cache is what the provider charges least for, so the share is the reading
+ * that explains a cheap session; rounding it up to `100%` would instead claim that input stopped
+ * being billed, so the display gains precision until the number it shows is below a full hit.
+ * @param cacheReadTokens - Prompt tokens the provider served from cache.
+ * @param billedInputTokens - Uncached input, cache read and cache write, the prompt tokens that were billed.
+ * @returns Percentage text, or undefined when no prompt input has been billed yet.
+ */
+export function cacheHitText(cacheReadTokens, billedInputTokens) {
+    if (cacheReadTokens === undefined || billedInputTokens === undefined || billedInputTokens <= 0)
+        return undefined;
+    if (cacheReadTokens >= billedInputTokens)
+        return '100%';
+    for (let digits = 0; digits <= 3; digits++) {
+        const text = (cacheReadTokens / billedInputTokens * 100).toFixed(digits);
+        if (Number(text) < 100)
+            return `${text}%`;
+    }
+    return '<100%';
+}
+/** 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), cost: clean(groups.cost),
+        context: clean(groups.context), contextBar: clean(groups.contextBar),
+        model: clean(groups.model), effort: clean(groups.effort), turns: clean(groups.turns), tokens: clean(groups.tokens),
+        cache: clean(groups.cache) };
+    const cluster = [groups.state, groups.phase, groups.stop].filter(Boolean);
+    // The cost is one group carrying two scopes: this session's spend, with today's in parentheses.
+    // Display order reads the model beside its effort and the money after the share it sits next to;
+    // keep order is by value, so a narrow bar holds the cost and the share before a model it cannot
+    // show, and the cache share goes before the token total it restates.
+    const order = [groups.model, groups.effort, groups.context, groups.cost, groups.turns, groups.tokens, groups.cache].filter(Boolean);
+    const rank = [groups.cost, groups.context, groups.model, groups.effort, groups.turns, groups.tokens, groups.cache].filter(Boolean);
+    // One row while enough of the sequence fits; each step drops the least valuable group first. The
+    // cost is never dropped while a row can hold it, only moved to the second one, so the search stops
+    // above it; a second row that cannot hold even the cost is not opened.
+    const floor = groups.cost === undefined ? 0 : 1;
+    for (let keep = rank.length; keep >= floor; keep--) {
+        const kept = new Set(rank.slice(0, keep));
+        const row = pack(cluster, order.filter(group => kept.has(group)));
+        if (measure(row) <= width)
+            return [keep > floor ? widen(row, groups, width) : row];
+    }
+    if (groups.cost === 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.
+    const first = fitCluster(cluster, width);
+    const second = widen(packGreedy(rank, width), groups, width);
+    return second.length === 0 ? [first] : [first, second];
+}
+/** Offer the clearer reading of a group already on the row: the ten-cell context share.
+ *
+ * The bar is a rendering of the same share the plain percentage reports, not an additional group, so
+ * it never displaces a group that fits: below the width that holds it, the plain form keeps its place.
+ * @param row - A packed row that already fits.
+ * @param groups - Cleaned groups, used to find the pair by identity.
+ * @param width - Available terminal columns.
+ * @returns The row with the reading that fits.
+ */
+function widen(row, groups, width) {
+    return swap(row, groups.context, groups.contextBar, width);
+}
+/** Replace one group with its fuller rendering where the whole row still fits.
+ * @param row - A packed row that already fits.
+ * @param from - Group to replace, matched by identity.
+ * @param to - Fuller rendering of that group.
+ * @param width - Available terminal columns.
+ * @returns The row with the replacement, or the row unchanged where it does not fit.
+ */
+function swap(row, from, to, width) {
+    if (from === undefined || to === undefined)
+        return row;
+    const index = row.indexOf(from);
+    if (index < 0)
+        return row;
+    const replaced = [...row.slice(0, index), to, ...row.slice(index + 1)];
+    return measure(replaced) <= width ? replaced : row;
+}
+/** 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 (paused)
+            return;
+        // An idle bar still re-reads the clock, so a day rollover reaches the cost it reports without
+        // waiting for an unrelated render; a running bar keeps its per-second clock.
+        const timer = setInterval(() => setNow(Date.now()), running ? 1000 : 60_000);
+        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.today()) : '?';
+    // `*` 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;
+        // Billed prompt input is the three disjoint prompt buckets; a provider that reports no cache
+        // write has not billed one, which is how the ledger reads the same projection.
+        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 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 };
+        // 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';
+        const money = (session, today) => `¥: ${session === undefined ? '?' : session.amount.toFixed(2)}(${today.amount.toFixed(2)})${session?.unknown || today.unknown || inexact ? '*' : ''}`;
+        const todayTotal = costs?.today();
+        const sessionTotal = costs !== undefined && costs.hasSession(state.sessionId) ? costs.total(state.sessionId) : undefined;
+        const contextColor = percent === undefined ? theme.status.usage
+            : percent >= 95 ? theme.status.critical : percent >= 80 ? theme.status.warning : theme.status.context;
+        // Ten cells resolve context to tenths, the same resolution the percentage beside them reports.
+        const cells = percent === undefined ? 0 : Math.round(percent / 10);
+        const groups = {
+            state: stateToken,
+            // A paused bar keeps the phase: the reason already says why the clock stopped, and dropping the
+            // running tool would leave the one question this bar exists to answer unanswered. A ready bar
+            // has none: the transcript keeps the last event it saw, and only the host knows the turn ended.
+            ...(phaseLabel === undefined || !running ? {} : { phase: { text: phaseLabel } }),
+            ...(running && pauseReason === undefined ? { stop: { text: '^C' } } : {}),
+            ...(todayTotal === undefined ? {} : { cost: { text: money(sessionTotal, todayTotal), color: theme.status.cost } }),
+            ...(percent === undefined ? {} : {
+                context: { text: `ctx ${percent}%`, color: contextColor },
+                contextBar: { text: `ctx: ${'█'.repeat(cells)}${'░'.repeat(10 - cells)} ~${percent}%`, color: contextColor }
+            }),
+            ...(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 } }),
+            ...(hit === undefined ? {} : { cache: { text: `hit ${hit}`, 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.today()) : '?';
+    // `*` 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 ? '*' : ''}`;
+}

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' })] });
+}