@zergai/ztc 0.5.0-beta.1 → 0.6.0-beta.1

package/dist/ui/views/app.js

@@ -74,7 +74,7 @@ function splitAuxiliaryBudget(budget, rawQueueHeight, rawTodoHeight) {
     }
     return { queueHeight, todoHeight };
 }
-export function getAppLayoutMetrics({ rows, cols, inputState, commands = [], completion, showHeader = true, showTodos = true, todoCount = 0, widgetActive = false, queueTotal = 0, externalTranscript = false, compactWidget = false, widgetContentRows, agentActive = false, statusLine, }) {
+export function getAppLayoutMetrics({ rows, cols, inputState, commands = [], completion, showHeader = true, showTodos = true, todoCount = 0, widgetActive = false, queueTotal = 0, externalTranscript = false, compactWidget = false, widgetContentRows, transcriptRows, agentActive = false, statusLine, }) {
     const headerHeight = showHeader ? 1 : 0;
     const statusHeight = resolveStatusLineSettings(statusLine).enabled ? 1 : 0;
     const activityHeight = agentActive ? 1 : 0;
@@ -126,6 +126,9 @@ export function getAppLayoutMetrics({ rows, cols, inputState, commands = [], com
                 // hand the rest to the transcript.
                 widgetHeight = Math.max(0, Math.min(Math.floor(widgetContentRows), contentAreaHeight - minTranscript));
                 transcriptHeight = Math.max(0, contentAreaHeight - widgetHeight);
+                if (compactWidget && typeof transcriptRows === 'number' && Number.isFinite(transcriptRows) && transcriptRows < transcriptHeight) {
+                    transcriptHeight = Math.max(0, Math.floor(transcriptRows));
+                }
             }
             else {
                 transcriptHeight = minTranscript;
@@ -149,7 +152,7 @@ export function getAppLayoutMetrics({ rows, cols, inputState, commands = [], com
         transcriptHeight,
     };
 }
-export function buildAppView({ messages, agentState, inputState, canYank, sessionId, sessionName, cols, rows, commands, completion, hasApiKey, version = '0.1.0', contextLength, contextEstimated, contextStatus, provider, model, emulationId, inputMode = 'steer', escapeHint, toast, spinnerLabel, spinnerFrame, lastEventAt, stallHintMs, debug = false, expandToolOutputs = false, showThinking = true, showTurnMetadata = true, renderer, showHeader = true, showMessages = true, isRecording = false, recordingDevice, audioLevel = -60, partialTranscript = '', todos = [], showTodos = true, activeTask = null, taskStartedAt = null, mode = 'normal', authEmail, authWorkspace, backgroundRunning = 0, widgetContent = null, widgetView: providedWidgetView = null, queuePreview = [], queueTotal = 0, queueSelectedIndex = null, externalTranscript = false, compactWidget = false, agentActive = agentState.status === 'thinking'
+export function buildAppView({ messages, agentState, inputState, sessionId, sessionName, cols, rows, commands, completion, hasApiKey, version = '0.1.0', contextLength, contextEstimated, contextStatus, provider, model, emulationId, inputMode = 'steer', escapeHint, toast, spinnerLabel, spinnerFrame, lastEventAt, stallHintMs, debug = false, expandToolOutputs = false, showThinking = true, showTurnMetadata = true, renderer, showHeader = true, showMessages = true, isRecording = false, recordingDevice, audioLevel = -60, partialTranscript = '', todos = [], showTodos = true, activeTask = null, taskStartedAt = null, mode = 'normal', authEmail, authWorkspace, backgroundRunning = 0, widgetContent = null, widgetView: providedWidgetView = null, queuePreview = [], queueTotal = 0, queueSelectedIndex = null, externalTranscript = false, transcriptAnchor = 'bottom', compactWidget = false, transcriptRows, agentActive = agentState.status === 'thinking'
     || agentState.status === 'streaming'
     || agentState.status === 'tool_use', statusLine, effort, unsupportedEffort, }) {
     // A compact widget (the question form) sizes to its own content. Deriving the
@@ -172,6 +175,7 @@ export function buildAppView({ messages, agentState, inputState, canYank, sessio
         externalTranscript,
         compactWidget,
         widgetContentRows,
+        transcriptRows,
         agentActive,
         statusLine,
     });
@@ -183,7 +187,7 @@ export function buildAppView({ messages, agentState, inputState, canYank, sessio
         visibleRows: Math.max(1, completionHeight - 1),
     } : null;
     const placeholder = !hasApiKey
-        ? 'Set API key with /config key <key>'
+        ? 'Connect a model with /connect (ZergAI or your local API keys)'
         : getAgentActivityPlaceholder(agentState) ?? 'Type a message or /help for commands...';
     // Build widget view if active (renders in place of message list)
     // Widget renders directly in content area without flexGrow spacer
@@ -213,13 +217,17 @@ export function buildAppView({ messages, agentState, inputState, canYank, sessio
         showTurnMetadata,
         cols,
         externalTranscript,
+        anchor: transcriptAnchor,
     });
     const widgetRegionView = paddedWidgetView
         ? box([paddedWidgetView], { flexDirection: 'column', height: widgetHeight })
         : null;
+    // A compact widget that follows a short transcript leaves its spare rows
+    // under itself, so it sits right after the transcript's last row.
+    const spareRows = Math.max(0, contentAreaHeight - transcriptHeight - widgetHeight);
     const compressedWidgetContent = widgetRegionView && (externalTranscript || compactWidget)
         ? box(compactWidget
-            ? [buildTranscriptRegion(), widgetRegionView]
+            ? [buildTranscriptRegion(), widgetRegionView, ...(spareRows > 0 ? [box([], { height: spareRows })] : [])]
             : [widgetRegionView, buildTranscriptRegion()], { flexDirection: 'column', height: contentAreaHeight })
         : null;
     return box([
@@ -229,7 +237,7 @@ export function buildAppView({ messages, agentState, inputState, canYank, sessio
             ? compressedWidgetContent
             : (paddedWidgetView
                 ? box([paddedWidgetView], { flexDirection: 'column', height: contentAreaHeight })
-                : (showMessages ? buildMessageListView({ messages, height: contentHeight, width: cols, debug, expandToolOutputs, showThinking, showTurnMetadata, cols, externalTranscript }) : box([], { flexGrow: 1 }))),
+                : (showMessages ? buildMessageListView({ messages, height: contentHeight, width: cols, debug, expandToolOutputs, showThinking, showTurnMetadata, cols, externalTranscript, anchor: transcriptAnchor }) : box([], { flexGrow: 1 }))),
         // Activity line with task metadata (Claude Code style)
         buildActivityLineView({
             cols,
@@ -254,7 +262,6 @@ export function buildAppView({ messages, agentState, inputState, canYank, sessio
             : buildQueuePanelView({ entries: queuePreview, total: queueTotal, selectedIndex: queueSelectedIndex, cols, maxLines: queueHeight }),
         buildInputAreaView({
             state: inputState,
-            canYank,
             mode,
             isRunning: agentState.status !== 'idle' && agentState.status !== 'error',
             placeholder,

package/dist/ui/views/completion_menu.js

@@ -1,6 +1,7 @@
 import { box, text } from '../core/index.js';
 import { displayWidth, padEndDisplay, sanitizeTerminalText } from '../core/text_width.js';
 import { SELECTION_VISIBLE_ROWS } from '../../app/selection_completion.js';
+import { formatRelativeTime } from '../widgets/panel_frame.js';
 const graphemes = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
 function clip(value, width) {
     const clean = sanitizeTerminalText(value).replace(/\s+/g, ' ');
@@ -46,14 +47,19 @@ export function buildCompletionMenu(view, cols) {
     const first = Math.min(Math.max(0, view.candidates.length - rowCount), Math.max(0, view.selected - rowCount + 1, Math.min(view.firstVisible ?? 0, view.selected)));
     const kind = view.kind ?? (view.provider ? 'model' : 'provider');
     const title = kind === 'reasoning' ? [view.command === 'thinking' ? 'Thinking' : 'Effort', view.model].filter(Boolean).join(' · ')
-        : kind === 'model' ? `Models · ${view.provider ?? ''}` : kind === 'command' ? 'Commands' : view.mixed ? 'Providers & models' : 'Providers';
+        : kind === 'model' ? `Models · ${view.provider ?? ''}` : kind === 'command' ? 'Commands' : view.mixed ? 'Routes & models'
+            : view.route === 'zergrouter' ? 'ZergRouter · providers' : view.route === 'direct' ? 'Local API key · providers' : 'Providers';
     const count = view.candidates.length ? `${view.selected + 1}/${view.candidates.length}` : '0 results';
-    const state = view.loading ? ' · loading' : view.unavailable ? kind === 'reasoning' ? ' · unavailable' : ' · cached' : '';
+    const saved = view.savedAt === undefined ? '' : ` · saved ${formatRelativeTime(new Date(view.savedAt).toISOString(), Date.now())}`;
+    const state = view.loading ? ' · loading' : view.unavailable ? kind === 'reasoning' ? ' · unavailable' : ' · cached' : saved;
     const heading = clip(title + state, Math.max(1, width - displayWidth(count) - 2));
     const rows = [box([
             text(padEndDisplay(heading, Math.max(0, width - displayWidth(count))), muted), text(count, muted),
         ], { flexDirection: 'row', height: 1 })];
-    const names = view.candidates.map(candidate => kind === 'model' ? candidate.value : candidate.label);
+    // A model row shows the ID typed after /model, without the provider the title already names.
+    const prefix = view.provider ? `${view.provider}/` : '';
+    const names = view.candidates.map(candidate => kind !== 'model' || candidate.submitsInput ? candidate.label
+        : prefix && candidate.value.startsWith(prefix) ? candidate.value.slice(prefix.length) : candidate.value);
     // All candidates determine the column width, so navigating does not shift descriptions.
     const nameWidth = Math.min(Math.max(12, ...names.map(displayWidth)), Math.max(12, Math.floor(width * 0.48)));
     if (view.candidates.length) {
@@ -88,13 +94,15 @@ export function buildCompletionMenu(view, cols) {
         rows.push(text(clip(empty, width), muted));
     }
     const selected = view.candidates[view.selected];
-    const enterAction = selected && !selected.needsArgument && (kind === 'model' || kind === 'reasoning' || view.mixed || view.query === selected.value) ? 'run' : 'fill';
-    const hints = view.candidates.length ? [
-        enterAction === 'run' ? '↑↓ move · Tab fill · Enter run · Esc close' : '↑↓ move · Tab/Enter fill · Esc close',
-        enterAction === 'run' ? '↑↓ · Tab fill · ↵ run · Esc' : '↑↓ · Tab/↵ fill · Esc',
-        '↑↓  Tab  ↵  Esc',
-    ] : kind === 'reasoning' ? ['Enter shows settings · Esc close', '↵ settings · Esc', '↵  Esc']
-        : [kind === 'command' ? 'Keep typing · Esc close' : 'Enter exact ID · Esc close', '↵ exact ID · Esc', '↵  Esc'];
+    const enterAction = selected && !selected.needsArgument
+        && (selected.submitsInput || kind === 'model' || kind === 'reasoning' || view.mixed || view.query === selected.value) ? 'run' : 'fill';
+    const hints = selected?.submitsInput ? ['Enter log in · Esc close', '↵ log in · Esc', '↵  Esc']
+        : selected?.toggle ? ['↑↓ move · Enter toggle · Esc close', '↑↓ · ↵ toggle · Esc', '↑↓  ↵  Esc'] : view.candidates.length ? [
+            enterAction === 'run' ? '↑↓ move · Tab fill · Enter run · Esc close' : '↑↓ move · Tab/Enter fill · Esc close',
+            enterAction === 'run' ? '↑↓ · Tab fill · ↵ run · Esc' : '↑↓ · Tab/↵ fill · Esc',
+            '↑↓  Tab  ↵  Esc',
+        ] : kind === 'reasoning' ? ['Enter shows settings · Esc close', '↵ settings · Esc', '↵  Esc']
+            : [kind === 'command' ? 'Keep typing · Esc close' : 'Enter exact ID · Esc close', '↵ exact ID · Esc', '↵  Esc'];
     const hint = hints.find(value => displayWidth(value) <= width) ?? hints.at(-1);
     return {
         menu: box(rows, { flexDirection: 'column', paddingX: 2, flexShrink: 0 }),

package/dist/ui/views/input_area.d.ts

@@ -9,7 +9,6 @@ interface InputAreaViewProps {
     disabled?: boolean;
     mode?: string;
     isRunning?: boolean;
-    canYank?: boolean;
     commands?: SlashCommandUsage[];
     completion?: SelectionCompletionView | null;
     cols?: number;
@@ -48,5 +47,5 @@ export declare function wrapInputSegments(segments: InputSegment[], cursor: {
 };
 export declare function renderLineWithCursorTokens(line: RenderToken[], cursorCol: number, isCursorLine: boolean): RenderToken[];
 export declare function estimateInputLines(segments: InputSegment[], cols: number): number;
-export declare function buildInputAreaView({ state, placeholder, disabled, mode, isRunning, canYank, commands, completion, cols, maxInputLines, badgePreview, showBadgePreview, debug, renderContent, spinnerLabel, spinnerFrame }: InputAreaViewProps): LayoutNode;
+export declare function buildInputAreaView({ state, placeholder, disabled, mode, isRunning, commands, completion, cols, maxInputLines, badgePreview, showBadgePreview, debug, renderContent, spinnerLabel, spinnerFrame }: InputAreaViewProps): LayoutNode;
 export {};

package/dist/ui/views/input_area.js

@@ -183,7 +183,7 @@ export function renderLineWithCursorTokens(line, cursorCol, isCursorLine) {
 export function estimateInputLines(segments, cols) {
     return wrapInputSegments(segments, { index: segments.length, offset: 0 }, cols).lines.length;
 }
-export function buildInputAreaView({ state, placeholder, disabled = false, mode = 'normal', isRunning = false, canYank = false, commands = [], completion, cols = 80, maxInputLines, badgePreview, showBadgePreview = false, debug = false, renderContent = true, spinnerLabel, spinnerFrame }) {
+export function buildInputAreaView({ state, placeholder, disabled = false, mode = 'normal', isRunning = false, commands = [], completion, cols = 80, maxInputLines, badgePreview, showBadgePreview = false, debug = false, renderContent = true, spinnerLabel, spinnerFrame }) {
     if (!renderContent) {
         return box([text('')], { flexDirection: 'column', flexShrink: 0, height: 5 });
     }
@@ -248,7 +248,7 @@ export function buildInputAreaView({ state, placeholder, disabled = false, mode
     const separatorTop = plan
         ? box([text(' PLAN ', { bold: true, dimColor: false }), text('─'.repeat(Math.max(0, cols - 8)), { color: PLAN_ACCENT })], { flexDirection: 'row' })
         : text('─'.repeat(Math.max(1, cols - 2)), { color: 'gray', dimColor: true });
-    const expansionHint = disabled ? (isRunning ? 'Ctrl+C stop' : null) : getInputShortcutHint(state, isRunning, canYank);
+    const expansionHint = disabled ? (isRunning ? 'Ctrl+C stop' : null) : getInputShortcutHint(state, isRunning);
     const separatorBottom = text(expansionHint ?? '─'.repeat(Math.max(1, cols - 2)), { color: plan && !expansionHint ? PLAN_ACCENT : 'gray', dimColor: !plan || !!expansionHint, wrap: 'truncate-end' });
     // Build the content array
     const content = [];

package/dist/ui/views/message_list.d.ts

@@ -12,6 +12,13 @@ interface MessageListProps {
     showThinking?: boolean;
     showTurnMetadata?: boolean;
     cols?: number;
+    /**
+     * Where a conversation shorter than the region sits: 'bottom', over the
+     * composer (a terminal's inline frame), or 'top', drawn top down as zmux
+     * draws the CLI's transcript. Once it fills the region the newest message
+     * sits over the composer either way.
+     */
+    anchor?: 'top' | 'bottom';
 }
-export declare function buildMessageListView({ messages, height, width, maxMessages, debug, expandToolOutputs, scrollback, externalTranscript, showThinking, showTurnMetadata, cols, }: MessageListProps): LayoutNode;
+export declare function buildMessageListView({ messages, height, width, maxMessages, debug, expandToolOutputs, scrollback, externalTranscript, showThinking, showTurnMetadata, cols, anchor, }: MessageListProps): LayoutNode;
 export {};

package/dist/ui/views/message_list.js

@@ -1,4 +1,5 @@
-import { isToolResultMessage } from '../../utils/tool_result_message.js';
+import { isCommandObservationMessage, isHostPromptMessage, isToolResultMessage } from '../../utils/tool_result_message.js';
+import { displayAskUserResponse } from '../../app/ask_user_response.js';
 import { box, text, computeLayout } from '../core/index.js';
 import { isToolUsePlaceholderMessage } from '../../utils/assistant_message.js';
 import { wrapText } from '../core/wrap_text.js';
@@ -7,7 +8,7 @@ import { RECAP_PREFIX, THINKING_BODY_INDENT, TRANSCRIPT_INDENT_STEP } from '../i
 import { formatTranscriptTime } from '../core/time_format.js';
 import { messageHeaderSuffix } from '../core/turn_metadata.js';
 import { displayWidth } from '../core/text_width.js';
-import { wordWrapAnsi } from '../scrollback.js';
+import { wordWrapAnsi, wordmarkWelcomeRows } from '../scrollback.js';
 import { measureText } from '../core/layout_yoga.js';
 const MESSAGE_LIST_PADDING = 1;
 const transcriptGraphemes = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
@@ -24,6 +25,10 @@ function toDate(value) {
         return null;
     return parsed;
 }
+/** The launch welcome that opens on the ZTC wordmark (createFirstRunLaunchMessage). */
+function isWordmarkWelcome(message) {
+    return message.role === 'system' && message.metadata?.wordmark === true;
+}
 function isRecapMessage(message) {
     return message.role === 'system' && message.metadata?.recap === true;
 }
@@ -230,32 +235,136 @@ function parseInlineMarkdown(line) {
     }
     return parts.length > 0 ? parts : [{ text: line.replace(/\*\*/g, '') }];
 }
-function inlinePartNodes(line) {
-    return parseInlineMarkdown(line).map(part => text(part.text, { ...part.style, wrap: 'wrap' }));
-}
-function renderInlineMarkdown(line) {
-    const parts = parseInlineMarkdown(line);
-    if (parts.length === 1 && !parts[0].style) {
-        return text(parts[0].text, { wrap: 'wrap' });
+/**
+ * Styled runs wrapped into rows of at most `width` cells. Rows break between
+ * words; a word wider than a row is split, and the spaces at a break are
+ * dropped. Leading spaces stay on the first row (code indentation).
+ */
+function wrapInlineParts(parts, width) {
+    const tokens = [];
+    for (const part of parts) {
+        for (const piece of part.text.split(/(\s+)/)) {
+            if (!piece)
+                continue;
+            const space = /^\s+$/.test(piece);
+            const fragment = { text: piece, ...(part.style ? { style: part.style } : {}) };
+            const last = tokens[tokens.length - 1];
+            if (last && last.space === space) {
+                last.fragments.push(fragment);
+                last.width += displayWidth(piece);
+            }
+            else {
+                tokens.push({ space, fragments: [fragment], width: displayWidth(piece) });
+            }
+        }
     }
-    return box(inlinePartNodes(line), { flexDirection: 'row' });
+    const rows = [];
+    let row = [];
+    let rowWidth = 0;
+    let gap = null;
+    const append = (fragment) => {
+        const previous = row[row.length - 1];
+        if (previous && previous.style === fragment.style)
+            previous.text += fragment.text;
+        else
+            row.push({ ...fragment });
+    };
+    const flush = () => {
+        rows.push(row);
+        row = [];
+        rowWidth = 0;
+    };
+    for (const token of tokens) {
+        if (token.space) {
+            if (rowWidth === 0 && rows.length === 0) {
+                token.fragments.forEach(append);
+                rowWidth += token.width;
+            }
+            else {
+                gap = token;
+            }
+            continue;
+        }
+        const gapWidth = gap && rowWidth > 0 ? gap.width : 0;
+        if (rowWidth > 0 && rowWidth + gapWidth + token.width > width) {
+            flush();
+        }
+        else if (gap && rowWidth > 0) {
+            gap.fragments.forEach(append);
+            rowWidth += gapWidth;
+        }
+        gap = null;
+        if (token.width <= width - rowWidth) {
+            token.fragments.forEach(append);
+            rowWidth += token.width;
+            continue;
+        }
+        for (const fragment of token.fragments) {
+            for (const char of fragment.text) {
+                const cells = displayWidth(char);
+                if (rowWidth > 0 && rowWidth + cells > width)
+                    flush();
+                append({ ...fragment, text: char });
+                rowWidth += cells;
+            }
+        }
+    }
+    if (row.length > 0 || rows.length === 0)
+        rows.push(row);
+    return rows;
 }
-function renderPrefixedInline(prefix, value, prefixStyle) {
-    return box([
-        text(prefix, prefixStyle),
-        ...inlinePartNodes(value),
-    ], { flexDirection: 'row' });
+/**
+ * A markdown line as rows that fit `width`, each row's text nodes on one line.
+ * `first` leads the first row and `rest` every later one (a bullet, then spaces
+ * under it; a quote bar or code gutter on every row), so wrapped text lines up
+ * under its own start. Every row fits, so no renderer has to break it again.
+ */
+function renderWrappedInline(parts, width, lead = { first: [], rest: [] }) {
+    const leadWidth = displayWidth(lead.first.map(part => part.text).join(''));
+    const rows = wrapInlineParts(parts, Math.max(1, width - leadWidth));
+    const nodes = rows.map((row, index) => {
+        // Runs that share a style paint as one node, so a plain row stays one line of text.
+        const merged = [];
+        for (const part of [...(index === 0 ? lead.first : lead.rest), ...row]) {
+            const previous = merged[merged.length - 1];
+            if (part.text === '')
+                continue;
+            if (previous && previous.style === part.style)
+                previous.text += part.text;
+            else
+                merged.push({ ...part });
+        }
+        // Rows already fit; `wrap` only guards against clipping should one not.
+        return merged.map(part => text(part.text, { ...part.style, wrap: 'wrap' }));
+    });
+    if (nodes.length === 1 && nodes[0].length === 1)
+        return nodes[0][0];
+    const lines = nodes.map(row => box(row, { flexDirection: 'row' }));
+    return lines.length === 1 ? lines[0] : box(lines, { flexDirection: 'column' });
+}
+function renderInlineMarkdown(line, width) {
+    return renderWrappedInline(parseInlineMarkdown(line), width);
+}
+/**
+ * A prefixed line (list item, checkbox, quote). Wrapped rows hang under the
+ * text after the prefix, or repeat the prefix itself (`repeat`, for quotes).
+ */
+function renderPrefixedInline(prefix, value, width, { prefixStyle, indent = '', repeat = false } = {}) {
+    const lead = { text: `${indent}${prefix}`, ...(prefixStyle ? { style: prefixStyle } : {}) };
+    const hang = repeat ? lead : { text: ' '.repeat(displayWidth(lead.text)) };
+    return renderWrappedInline(parseInlineMarkdown(value), width, { first: [lead], rest: [hang] });
 }
 function renderCodeBoundary(kind, language) {
     const label = kind === 'open' ? `┌─ ${language || 'code'} ` : '└';
     return text(`${label}${'─'.repeat(36)}`, { color: 'gray', dimColor: true });
 }
-function renderCodeLine(line, language) {
-    const segments = highlightLine(line, { mode: 'code', language });
-    return box([
-        text('│ ', { color: 'gray', dimColor: true }),
-        ...highlightSegmentNodes(segments),
-    ], { flexDirection: 'row' });
+function renderCodeLine(line, language, width) {
+    const gutter = { text: '│ ', style: { color: 'gray', dimColor: true } };
+    const parts = highlightLine(line, { mode: 'code', language }).map(segment => {
+        const base = styleForIntent(segment.intent);
+        return { text: segment.text, style: { ...base, bold: segment.bold || base.bold } };
+    });
+    return box([renderWrappedInline(parts, width, { first: [gutter], rest: [gutter] })], { flexDirection: 'column' });
 }
 /**
  * Text nodes for one highlighted line, one node per styled segment.
@@ -289,33 +398,36 @@ function renderToolOutputLine(line, options, marginLeft = 0) {
         ...(marginLeft > 0 ? { marginLeft } : {}),
     });
 }
-function renderMarkdownLine(line) {
+function renderMarkdownLine(line, width) {
     const trimmed = line.trimStart();
-    if (trimmed.startsWith('### ')) {
-        return text(trimmed.slice(4), { bold: true, color: 'cyan', wrap: 'wrap' });
-    }
-    if (trimmed.startsWith('## ')) {
-        return text(trimmed.slice(3), { bold: true, color: 'cyan', wrap: 'wrap' });
-    }
-    if (trimmed.startsWith('# ')) {
-        return text(trimmed.slice(2), { bold: true, color: 'cyan', wrap: 'wrap' });
+    // A nested item keeps its depth; its wrapped rows hang under its own text.
+    const indent = ' '.repeat(displayWidth(line.slice(0, line.length - trimmed.length).replace(/\t/g, '  ')));
+    const heading = /^(#{1,3}) /.exec(trimmed);
+    if (heading) {
+        return renderWrappedInline([{ text: trimmed.slice(heading[0].length), style: { bold: true, color: 'cyan' } }], width);
     }
     if (trimmed.startsWith('> ')) {
-        return renderPrefixedInline('│ ', trimmed.slice(2), { color: 'gray', dimColor: true });
+        return renderPrefixedInline('│ ', trimmed.slice(2), width, { prefixStyle: { color: 'gray', dimColor: true }, indent, repeat: true });
     }
     if (trimmed.startsWith('- [ ] ')) {
-        return renderPrefixedInline('☐ ', trimmed.slice(6));
+        return renderPrefixedInline('☐ ', trimmed.slice(6), width, { indent });
     }
     if (trimmed.startsWith('- [x] ') || trimmed.startsWith('- [X] ')) {
-        return renderPrefixedInline('☑ ', trimmed.slice(6), { color: 'green' });
+        return renderPrefixedInline('☑ ', trimmed.slice(6), width, { prefixStyle: { color: 'green' }, indent });
     }
     if (trimmed.startsWith('- ') || trimmed.startsWith('* ')) {
-        return renderPrefixedInline('• ', trimmed.slice(2));
+        return renderPrefixedInline('• ', trimmed.slice(2), width, { indent });
+    }
+    const numbered = /^(\d+[.)]) /.exec(trimmed);
+    if (numbered) {
+        return renderPrefixedInline(numbered[0], trimmed.slice(numbered[0].length), width, { indent });
     }
     if (trimmed.startsWith('---') || trimmed.startsWith('***') || trimmed.startsWith('___')) {
         return text('────────────────────────────────────────────────────', { color: 'gray', dimColor: true });
     }
-    return renderInlineMarkdown(line);
+    return indent
+        ? renderPrefixedInline('', trimmed, width, { indent })
+        : renderInlineMarkdown(line, width);
 }
 function isTableSeparator(line) {
     const trimmed = line.trim();
@@ -352,7 +464,7 @@ function renderTable(lines) {
     });
     return rendered;
 }
-function renderMarkdownLines(lines) {
+function renderMarkdownLines(lines, width) {
     const normalized = [];
     let inCodeBlock = false;
     lines.forEach(line => {
@@ -407,7 +519,7 @@ function renderMarkdownLines(lines) {
             continue;
         }
         if (inCode) {
-            nodes.push(renderCodeLine(line, codeLanguage));
+            nodes.push(renderCodeLine(line, codeLanguage, width));
             i += 1;
             continue;
         }
@@ -437,13 +549,13 @@ function renderMarkdownLines(lines) {
             i = j;
             continue;
         }
-        nodes.push(renderMarkdownLine(line));
+        nodes.push(renderMarkdownLine(line, width));
         i += 1;
     }
     return nodes;
 }
 function messageView(message, expandToolOutputs = false, cols = 80, showTurnMetadata = true) {
-    if (isToolResultMessage(message)) {
+    if (isToolResultMessage(message) || isCommandObservationMessage(message) || isHostPromptMessage(message)) {
         return box([], {});
     }
     // Special handling for widget messages - render raw without chrome
@@ -452,6 +564,13 @@ function messageView(message, expandToolOutputs = false, cols = 80, showTurnMeta
         const lines = message.content.split('\n');
         return box(lines.map(line => text(line, {})), { flexDirection: 'column' });
     }
+    // The launch welcome reads as the scrollback prints it: the ZTC wordmark
+    // with the readout beside it, and no header. A frame too short for it (see
+    // clipMessage) shows the readout alone.
+    if (isWordmarkWelcome(message)) {
+        const rows = wordmarkWelcomeRows(message.content, cols - MESSAGE_LIST_PADDING * 2, message.metadata?.wordmarkHidden !== true);
+        return box(rows.map(row => box(row.map(run => text(run.text, run.style ?? {})), { flexDirection: 'row', height: 1, flexShrink: 0 })), { flexDirection: 'column', marginTop: 1, flexShrink: 0 });
+    }
     // Recap messages render without role/time chrome and hug the prior message.
     if (message.role === 'system' && message.metadata?.recap === true) {
         return box([
@@ -485,7 +604,7 @@ function messageView(message, expandToolOutputs = false, cols = 80, showTurnMeta
         ? (toolOutput.full || message.content || toolOutput.preview)
         : toolOutput && toolOutput.preview
             ? toolOutput.preview
-            : message.content) ?? '';
+            : message.metadata?.askUserAnswer === true ? displayAskUserResponse(message.content) : message.content) ?? '';
     const lines = content.split('\n');
     // Tool bodies are command/file output, not prose: each line goes through the
     // tool-specific highlighter instead of markdown, so flags, paths and matches
@@ -494,6 +613,9 @@ function messageView(message, expandToolOutputs = false, cols = 80, showTurnMeta
     const toolBodyPlan = message.role === 'tool' && toolOutput
         ? toolBodyHighlightPlan(toolOutput)
         : null;
+    const bodyIndent = meta?.reasoning === true ? THINKING_BODY_INDENT.length : TRANSCRIPT_INDENT_STEP;
+    // Prose is wrapped here, between words, to the body's own width.
+    const bodyWidth = Math.max(1, cols - MESSAGE_LIST_PADDING * 2 - bodyIndent);
     return box([
         box([
             text(`${config.icon} ${config.label}`, { color: config.color, bold: true }),
@@ -502,9 +624,9 @@ function messageView(message, expandToolOutputs = false, cols = 80, showTurnMeta
         ], { flexDirection: 'row' }),
         box(toolBodyPlan
             ? lines.map((line, index) => renderToolOutputLine(line, toolBodyLineOptions(toolBodyPlan, index)))
-            : renderMarkdownLines(lines), {
+            : renderMarkdownLines(lines, bodyWidth), {
             flexDirection: 'column',
-            marginLeft: meta?.reasoning === true ? THINKING_BODY_INDENT.length : TRANSCRIPT_INDENT_STEP,
+            marginLeft: bodyIndent,
         }),
         message.toolCalls && message.toolCalls.length > 0 && !meta?.toolCallsInTranscript
             ? box(message.toolCalls.map(tool => toolCallView(tool)), { flexDirection: 'column' })
@@ -549,6 +671,11 @@ function clipMessage(message, available, width, expandToolOutputs = false, showT
         return null;
     if (isToolResultMessage(message))
         return null;
+    // The welcome is never cut: without room for the wordmark it shows the readout alone.
+    if (isWordmarkWelcome(message)) {
+        const readout = { ...message, metadata: { ...message.metadata, wordmarkHidden: true } };
+        return estimateMessageLines(readout, width, expandToolOutputs, showTurnMetadata) <= available ? readout : null;
+    }
     // Don't clip widget messages
     if (message.id === 'form-widget' || message.id === 'select-widget' || message.id === 'text-input-widget') {
         return message;
@@ -609,7 +736,7 @@ function clipMessage(message, available, width, expandToolOutputs = false, showT
 function onlyRecapsVisible(messages) {
     return messages.length > 0 && messages.every(isRecapMessage);
 }
-export function buildMessageListView({ messages, height, width, maxMessages = 50, debug = false, expandToolOutputs = false, scrollback = false, externalTranscript = false, showThinking = true, showTurnMetadata = true, cols, }) {
+export function buildMessageListView({ messages, height, width, maxMessages = 50, debug = false, expandToolOutputs = false, scrollback = false, externalTranscript = false, showThinking = true, showTurnMetadata = true, cols, anchor = 'bottom', }) {
     if (externalTranscript) {
         return box([], {
             flexDirection: 'column',
@@ -622,11 +749,13 @@ export function buildMessageListView({ messages, height, width, maxMessages = 50
     }
     const viewportCols = width ?? cols;
     const recentMessages = messages
-        .filter(message => !isToolResultMessage(message) && message.metadata?.toolUseOnly !== true)
+        .filter(message => !isToolResultMessage(message) && !isHostPromptMessage(message) && message.metadata?.toolUseOnly !== true)
         .filter(message => !isToolUsePlaceholderMessage(message))
         .filter(message => showThinking || message.metadata?.reasoning !== true)
         .slice(-maxMessages);
     let visibleMessages = recentMessages;
+    // Whether some earlier message or part of one did not fit.
+    let overflowed = false;
     if (!scrollback && typeof height === 'number') {
         visibleMessages = [];
         let remaining = height;
@@ -641,6 +770,7 @@ export function buildMessageListView({ messages, height, width, maxMessages = 50
                 remaining -= estimate;
                 continue;
             }
+            overflowed = true;
             const output = msg.metadata?.toolOutput;
             const expandedTool = output && (expandToolOutputs || msg.content !== output.preview);
             if (visibleMessages.length === 0 || onlyRecapsVisible(visibleMessages) || expandedTool || reservedHistory) {
@@ -672,8 +802,9 @@ export function buildMessageListView({ messages, height, width, maxMessages = 50
     visibleMessages.forEach((msg) => {
         messageNodes.push(messageView(msg, expandToolOutputs, viewportCols, showTurnMetadata));
     });
+    const topAnchored = anchor === 'top' && !overflowed;
     return box([
-        !scrollback ? box([], { flexGrow: 1 }) : box([], {}),
+        !scrollback && !topAnchored ? box([], { flexGrow: 1 }) : box([], {}),
         box(messageNodes, { flexDirection: 'column' }),
         messages.length === 0
             ? box([text('No messages yet. Type something to begin.', { color: 'gray', dimColor: true })], {

package/dist/ui/views/status_bar.js

@@ -340,7 +340,13 @@ export function buildStatusBarView(rawProps) {
     }
     left = [...left, ...alerts];
     const availableWidth = Math.max(0, props.cols - 2);
-    ({ left, right } = compactSegments(left, right, settings.separator, availableWidth));
+    // A toast says what just happened (a cleared draft and the key that brings
+    // it back), so it keeps its whole width, up to half the line; lower-priority
+    // items step aside until it clears.
+    const toastWidth = props.toast
+        ? Math.min(displayWidth(sanitizeTerminalText(props.toast)) + 2, Math.floor(availableWidth / 2))
+        : 0;
+    ({ left, right } = compactSegments(left, right, settings.separator, availableWidth - toastWidth));
     const usedWidth = groupWidth(left, settings.separator) + groupWidth(right, settings.separator);
     const notification = notificationNode(props.toast, Math.max(0, availableWidth - usedWidth), settings.useColors);
     return box([

package/dist/ui/views/theme.d.ts

@@ -11,6 +11,8 @@ export declare const TERMINAL_THEME: {
     readonly info: "#39c5cf";
     readonly error: "#f85149";
     readonly success: "#3fb950";
+    /** ZTC's own accent, the orange of the site's First Contact film: a select's title, pointer and choice. */
+    readonly accent: "#eb9a5d";
 };
 /** Rules and glyphs remain distinct on both dark and light terminal backgrounds. */
 export declare const PLAN_ACCENT = "#b7791f";

package/dist/ui/views/theme.js

@@ -11,6 +11,8 @@ export const TERMINAL_THEME = {
     info: '#39c5cf',
     error: '#f85149',
     success: '#3fb950',
+    /** ZTC's own accent, the orange of the site's First Contact film: a select's title, pointer and choice. */
+    accent: '#eb9a5d',
 };
 /** Rules and glyphs remain distinct on both dark and light terminal backgrounds. */
 export const PLAN_ACCENT = '#b7791f';

package/dist/ui/widgets/color_panel.js

@@ -26,6 +26,7 @@ import { TERMINAL_THEME } from '../views/theme.js';
 import { COLOR_PRESETS, blendOver, formatColor, parseColor } from '../../config/colors.js';
 import { fuzzyMatch } from '../../utils/fuzzy_match.js';
 import { widgetFrameGeometry, bodyBand, bottomBorder, clipText, dropLastGrapheme, framedLine, isInsideBand, lineText, planPanelSplit, sideBySideBands, stackedBands, topBorder, WHEEL_LINES, } from './panel_frame.js';
+import { isControlKey } from '../core/input.js';
 const CHANNEL_ORDER = ['hex', 'r', 'g', 'b', 'a'];
 const CHANNEL_LABELS = {
     hex: 'Hex',
@@ -223,7 +224,7 @@ export class ColorPanelWidget {
             return;
         }
         if (this.filterMode) {
-            if (key.ctrl && input.toLowerCase() === 'c') {
+            if (isControlKey(input, key, 'c')) {
                 this.cancel();
                 return;
             }
@@ -232,7 +233,7 @@ export class ColorPanelWidget {
                 this.host.render();
                 return;
             }
-            if (key.ctrl && input.toLowerCase() === 'u')
+            if (isControlKey(input, key, 'u'))
                 this.filterText = '';
             else if (key.backspace || key.delete)
                 this.filterText = dropLastGrapheme(this.filterText);
@@ -326,7 +327,7 @@ export class ColorPanelWidget {
             this.host.render();
             return;
         }
-        if (key.ctrl && input.toLowerCase() === 'u')
+        if (isControlKey(input, key, 'u'))
             this.hexValue = '';
         else if (key.backspace || key.delete)
             this.hexValue = dropLastGrapheme(this.hexValue);