@build-astron-co/nimbus 0.2.0 → 0.4.0

package/dist/src/ui/MessageList.js

@@ -0,0 +1,795 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * MessageList Component
+ *
+ * Renders the scrollable conversation history. User messages get a cyan "You:"
+ * prefix, assistant messages show "Agent ({mode}):" in green, and system
+ * messages are rendered in dim italic text. Code blocks are wrapped in a
+ * bordered Box with syntax highlighting.
+ */
+import React, { useMemo } from 'react';
+import { Box, Text } from 'ink';
+/** Raw (uncached) parse implementation. */
+function _parseContentRaw(raw) {
+    const segments = [];
+    const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/g;
+    let lastIndex = 0;
+    let match;
+    while ((match = codeBlockRegex.exec(raw)) !== null) {
+        // Text before the code block
+        if (match.index > lastIndex) {
+            segments.push({ type: 'text', content: raw.slice(lastIndex, match.index) });
+        }
+        segments.push({
+            type: 'code',
+            content: match[2].trimEnd(),
+            language: match[1],
+        });
+        lastIndex = match.index + match[0].length;
+    }
+    // Trailing text after the last code block (or entire string if no blocks)
+    if (lastIndex < raw.length) {
+        segments.push({ type: 'text', content: raw.slice(lastIndex) });
+    }
+    return segments;
+}
+/**
+ * Module-level LRU-ish cache for parsed content segments.
+ * Hard cap at 200 entries with FIFO eviction to bound memory usage during streaming.
+ * Exported for testing.
+ */
+export const _parseContentCache = new Map();
+const _PARSE_CACHE_MAX = 200;
+function parseContent(raw) {
+    const cached = _parseContentCache.get(raw);
+    if (cached !== undefined)
+        return cached;
+    const result = _parseContentRaw(raw);
+    if (_parseContentCache.size >= _PARSE_CACHE_MAX) {
+        // FIFO eviction: delete the oldest entry
+        const firstKey = _parseContentCache.keys().next().value;
+        if (firstKey !== undefined)
+            _parseContentCache.delete(firstKey);
+    }
+    _parseContentCache.set(raw, result);
+    return result;
+}
+/** Exported for testing only. */
+export function _parseContentForTesting(raw) {
+    return parseContent(raw);
+}
+const TOKEN_COLORS = {
+    keyword: 'magenta',
+    string: 'green',
+    comment: 'gray',
+    number: 'yellow',
+    type: 'cyan',
+    plain: undefined,
+};
+const JS_TS_KEYWORDS = new Set([
+    'async',
+    'await',
+    'break',
+    'case',
+    'catch',
+    'class',
+    'const',
+    'continue',
+    'debugger',
+    'default',
+    'delete',
+    'do',
+    'else',
+    'enum',
+    'export',
+    'extends',
+    'finally',
+    'for',
+    'from',
+    'function',
+    'if',
+    'import',
+    'in',
+    'instanceof',
+    'interface',
+    'let',
+    'new',
+    'of',
+    'return',
+    'static',
+    'super',
+    'switch',
+    'this',
+    'throw',
+    'try',
+    'type',
+    'typeof',
+    'var',
+    'void',
+    'while',
+    'with',
+    'yield',
+    'true',
+    'false',
+    'null',
+    'undefined',
+]);
+const PYTHON_KEYWORDS = new Set([
+    'and',
+    'as',
+    'assert',
+    'async',
+    'await',
+    'break',
+    'class',
+    'continue',
+    'def',
+    'del',
+    'elif',
+    'else',
+    'except',
+    'False',
+    'finally',
+    'for',
+    'from',
+    'global',
+    'if',
+    'import',
+    'in',
+    'is',
+    'lambda',
+    'None',
+    'nonlocal',
+    'not',
+    'or',
+    'pass',
+    'raise',
+    'return',
+    'True',
+    'try',
+    'while',
+    'with',
+    'yield',
+]);
+const GO_KEYWORDS = new Set([
+    'break',
+    'case',
+    'chan',
+    'const',
+    'continue',
+    'default',
+    'defer',
+    'else',
+    'fallthrough',
+    'for',
+    'func',
+    'go',
+    'goto',
+    'if',
+    'import',
+    'interface',
+    'map',
+    'package',
+    'range',
+    'return',
+    'select',
+    'struct',
+    'switch',
+    'type',
+    'var',
+    'true',
+    'false',
+    'nil',
+]);
+const HCL_KEYWORDS = new Set([
+    'resource',
+    'data',
+    'variable',
+    'output',
+    'module',
+    'provider',
+    'terraform',
+    'locals',
+    'for_each',
+    'count',
+    'depends_on',
+    'lifecycle',
+    'dynamic',
+    'true',
+    'false',
+    'null',
+]);
+const JS_TS_TYPES = new Set([
+    'string',
+    'number',
+    'boolean',
+    'object',
+    'any',
+    'void',
+    'never',
+    'unknown',
+    'Array',
+    'Promise',
+    'Record',
+    'Partial',
+    'Required',
+    'Map',
+    'Set',
+    'Error',
+    'Date',
+    'RegExp',
+    'Buffer',
+]);
+const BASH_KEYWORDS = new Set([
+    'if', 'then', 'else', 'elif', 'fi', 'for', 'while', 'do', 'done',
+    'case', 'esac', 'in', 'function', 'return', 'exit', 'echo', 'export',
+    'source', 'local', 'readonly', 'declare', 'unset', 'shift', 'break',
+    'continue', 'trap', 'set', 'unset', 'true', 'false',
+]);
+const DOCKERFILE_INSTRUCTIONS = new Set([
+    'FROM', 'RUN', 'COPY', 'ADD', 'ENV', 'ARG', 'EXPOSE', 'CMD',
+    'ENTRYPOINT', 'WORKDIR', 'LABEL', 'USER', 'VOLUME', 'ONBUILD',
+    'HEALTHCHECK', 'STOPSIGNAL', 'SHELL',
+]);
+const SQL_KEYWORDS = new Set([
+    'SELECT', 'FROM', 'WHERE', 'JOIN', 'LEFT', 'RIGHT', 'INNER', 'OUTER',
+    'ON', 'AND', 'OR', 'NOT', 'IN', 'IS', 'NULL', 'AS', 'DISTINCT',
+    'ORDER', 'BY', 'GROUP', 'HAVING', 'LIMIT', 'OFFSET',
+    'INSERT', 'INTO', 'VALUES', 'UPDATE', 'SET', 'DELETE',
+    'CREATE', 'DROP', 'ALTER', 'TABLE', 'INDEX', 'VIEW', 'DATABASE',
+    'PRIMARY', 'KEY', 'FOREIGN', 'REFERENCES', 'UNIQUE', 'DEFAULT',
+    'CONSTRAINT', 'CASCADE', 'BEGIN', 'COMMIT', 'ROLLBACK', 'TRANSACTION',
+    'select', 'from', 'where', 'join', 'left', 'right', 'inner', 'outer',
+    'on', 'and', 'or', 'not', 'in', 'is', 'null', 'as', 'distinct',
+    'order', 'by', 'group', 'having', 'limit', 'offset',
+    'insert', 'into', 'values', 'update', 'set', 'delete',
+    'create', 'drop', 'alter', 'table', 'index', 'view', 'database',
+]);
+function getKeywords(language) {
+    if (!language) {
+        return JS_TS_KEYWORDS;
+    }
+    const lang = language.toLowerCase();
+    if (lang === 'python' || lang === 'py') {
+        return PYTHON_KEYWORDS;
+    }
+    if (lang === 'go' || lang === 'golang') {
+        return GO_KEYWORDS;
+    }
+    if (lang === 'hcl' || lang === 'terraform' || lang === 'tf') {
+        return HCL_KEYWORDS;
+    }
+    if (lang === 'bash' || lang === 'sh' || lang === 'shell' || lang === 'zsh') {
+        return BASH_KEYWORDS;
+    }
+    if (lang === 'sql') {
+        return SQL_KEYWORDS;
+    }
+    // yaml, json, dockerfile use custom tokenizers — return empty set
+    if (lang === 'yaml' || lang === 'yml' || lang === 'json' || lang === 'dockerfile' || lang === 'docker') {
+        return new Set();
+    }
+    return JS_TS_KEYWORDS;
+}
+function getTypes(language) {
+    if (!language) {
+        return JS_TS_TYPES;
+    }
+    const lang = language.toLowerCase();
+    if (lang === 'typescript' ||
+        lang === 'ts' ||
+        lang === 'javascript' ||
+        lang === 'js' ||
+        lang === 'tsx' ||
+        lang === 'jsx') {
+        return JS_TS_TYPES;
+    }
+    return new Set();
+}
+/** Tokenize a YAML line. Keys are cyan, values green, anchors magenta, --- gray. */
+function tokenizeYamlLine(line) {
+    const tokens = [];
+    const trimmed = line.trim();
+    // Document separator
+    if (trimmed === '---' || trimmed === '...') {
+        return [{ type: 'comment', text: line }];
+    }
+    // Comments
+    if (trimmed.startsWith('#')) {
+        return [{ type: 'comment', text: line }];
+    }
+    // Anchors and aliases
+    if (trimmed.startsWith('&') || trimmed.startsWith('*')) {
+        return [{ type: 'type', text: line }];
+    }
+    // Key: value pattern
+    const keyMatch = line.match(/^(\s*)([\w\-./]+)(\s*:\s*)(.*)/);
+    if (keyMatch) {
+        const [, indent, key, colon, value] = keyMatch;
+        if (indent)
+            tokens.push({ type: 'plain', text: indent });
+        tokens.push({ type: 'type', text: key });
+        tokens.push({ type: 'plain', text: colon });
+        if (value) {
+            if (value.startsWith('"') || value.startsWith("'")) {
+                tokens.push({ type: 'string', text: value });
+            }
+            else if (/^\d/.test(value) || value === 'true' || value === 'false' || value === 'null') {
+                tokens.push({ type: 'number', text: value });
+            }
+            else {
+                tokens.push({ type: 'plain', text: value });
+            }
+        }
+        return tokens;
+    }
+    // List items
+    if (trimmed.startsWith('-')) {
+        const dashIdx = line.indexOf('-');
+        tokens.push({ type: 'plain', text: line.slice(0, dashIdx + 1) });
+        const rest = line.slice(dashIdx + 1);
+        if (rest.trim())
+            tokens.push({ type: 'string', text: rest });
+        return tokens;
+    }
+    return [{ type: 'plain', text: line }];
+}
+/** Tokenize a JSON line. Keys cyan, string values green, numbers/booleans yellow/magenta. */
+function tokenizeJsonLine(line) {
+    const tokens = [];
+    let i = 0;
+    while (i < line.length) {
+        // String — could be key or value
+        if (line[i] === '"') {
+            let j = i + 1;
+            while (j < line.length && line[j] !== '"') {
+                if (line[j] === '\\')
+                    j++;
+                j++;
+            }
+            j = Math.min(j + 1, line.length);
+            const str = line.slice(i, j);
+            // Check if it's a key (followed by optional space and colon)
+            const afterStr = line.slice(j).trimStart();
+            if (afterStr.startsWith(':')) {
+                tokens.push({ type: 'type', text: str });
+            }
+            else {
+                tokens.push({ type: 'string', text: str });
+            }
+            i = j;
+            continue;
+        }
+        // Numbers
+        if (/[0-9\-]/.test(line[i]) && (i === 0 || /[\s,\[{:]/.test(line[i - 1]))) {
+            let j = i;
+            while (j < line.length && /[0-9.\-eE+]/.test(line[j]))
+                j++;
+            tokens.push({ type: 'number', text: line.slice(i, j) });
+            i = j;
+            continue;
+        }
+        // Keywords: true, false, null
+        if (/[a-z]/.test(line[i])) {
+            let j = i;
+            while (j < line.length && /[a-z]/.test(line[j]))
+                j++;
+            const word = line.slice(i, j);
+            if (word === 'true' || word === 'false' || word === 'null') {
+                tokens.push({ type: 'type', text: word });
+            }
+            else {
+                tokens.push({ type: 'plain', text: word });
+            }
+            i = j;
+            continue;
+        }
+        tokens.push({ type: 'plain', text: line[i] });
+        i++;
+    }
+    return tokens;
+}
+/** Tokenize a Dockerfile line. Instructions are magenta. */
+function tokenizeDockerfileLine(line) {
+    const trimmed = line.trim();
+    if (trimmed.startsWith('#')) {
+        return [{ type: 'comment', text: line }];
+    }
+    const instrMatch = trimmed.match(/^([A-Z]+)(\s+.*)?$/);
+    if (instrMatch && DOCKERFILE_INSTRUCTIONS.has(instrMatch[1])) {
+        const tokens = [];
+        const leadingSpaces = line.length - line.trimStart().length;
+        if (leadingSpaces > 0)
+            tokens.push({ type: 'plain', text: line.slice(0, leadingSpaces) });
+        tokens.push({ type: 'keyword', text: instrMatch[1] });
+        if (instrMatch[2])
+            tokens.push({ type: 'plain', text: instrMatch[2] });
+        return tokens;
+    }
+    return [{ type: 'plain', text: line }];
+}
+/** Tokenize a bash line with variable references and flags. */
+function tokenizeBashLine(line, keywords) {
+    const tokens = [];
+    let i = 0;
+    while (i < line.length) {
+        // Comments
+        if (line[i] === '#' && (i === 0 || /\s/.test(line[i - 1]))) {
+            tokens.push({ type: 'comment', text: line.slice(i) });
+            return tokens;
+        }
+        // Variable references $VAR or ${VAR}
+        if (line[i] === '$') {
+            let j = i + 1;
+            if (line[j] === '{') {
+                j++;
+                while (j < line.length && line[j] !== '}')
+                    j++;
+                j = Math.min(j + 1, line.length);
+            }
+            else {
+                while (j < line.length && /[a-zA-Z0-9_]/.test(line[j]))
+                    j++;
+            }
+            tokens.push({ type: 'number', text: line.slice(i, j) });
+            i = j;
+            continue;
+        }
+        // Strings
+        if (line[i] === '"' || line[i] === "'") {
+            const quote = line[i];
+            let j = i + 1;
+            while (j < line.length && line[j] !== quote) {
+                if (line[j] === '\\')
+                    j++;
+                j++;
+            }
+            j = Math.min(j + 1, line.length);
+            tokens.push({ type: 'string', text: line.slice(i, j) });
+            i = j;
+            continue;
+        }
+        // Flags (words starting with -)
+        if (line[i] === '-' && i > 0 && /\s/.test(line[i - 1])) {
+            let j = i;
+            while (j < line.length && !/\s/.test(line[j]))
+                j++;
+            tokens.push({ type: 'comment', text: line.slice(i, j) });
+            i = j;
+            continue;
+        }
+        // Words / keywords
+        if (/[a-zA-Z_]/.test(line[i])) {
+            let j = i;
+            while (j < line.length && /[a-zA-Z0-9_]/.test(line[j]))
+                j++;
+            const word = line.slice(i, j);
+            if (keywords.has(word)) {
+                tokens.push({ type: 'keyword', text: word });
+            }
+            else {
+                tokens.push({ type: 'plain', text: word });
+            }
+            i = j;
+            continue;
+        }
+        tokens.push({ type: 'plain', text: line[i] });
+        i++;
+    }
+    return tokens;
+}
+/**
+ * Tokenize a single line of code into typed tokens for syntax highlighting.
+ */
+function tokenizeLine(line, keywords, types, language) {
+    // Language-specific fast paths
+    if (language) {
+        const lang = language.toLowerCase();
+        if (lang === 'yaml' || lang === 'yml')
+            return tokenizeYamlLine(line);
+        if (lang === 'json')
+            return tokenizeJsonLine(line);
+        if (lang === 'dockerfile' || lang === 'docker')
+            return tokenizeDockerfileLine(line);
+        if (lang === 'bash' || lang === 'sh' || lang === 'shell' || lang === 'zsh')
+            return tokenizeBashLine(line, keywords);
+    }
+    // Generic tokenizer below
+    /* falls through */
+    const tokens = [];
+    let i = 0;
+    while (i < line.length) {
+        // Single-line comments: // or #
+        if ((line[i] === '/' && line[i + 1] === '/') ||
+            (line[i] === '#' && i === line.trimStart().length - line.length + line.indexOf('#'))) {
+            if (line[i] === '/' && line[i + 1] === '/') {
+                tokens.push({ type: 'comment', text: line.slice(i) });
+                return tokens;
+            }
+            if (line[i] === '#') {
+                tokens.push({ type: 'comment', text: line.slice(i) });
+                return tokens;
+            }
+        }
+        // Strings: "...", '...', `...`
+        if (line[i] === '"' || line[i] === "'" || line[i] === '`') {
+            const quote = line[i];
+            let j = i + 1;
+            while (j < line.length && line[j] !== quote) {
+                if (line[j] === '\\') {
+                    j++;
+                } // skip escaped char
+                j++;
+            }
+            j = Math.min(j + 1, line.length);
+            tokens.push({ type: 'string', text: line.slice(i, j) });
+            i = j;
+            continue;
+        }
+        // Numbers
+        if (/[0-9]/.test(line[i]) && (i === 0 || /[\s(,=+\-*/<>[\]{};:]/.test(line[i - 1]))) {
+            let j = i;
+            while (j < line.length && /[0-9._xXa-fA-Fn]/.test(line[j])) {
+                j++;
+            }
+            tokens.push({ type: 'number', text: line.slice(i, j) });
+            i = j;
+            continue;
+        }
+        // Words (identifiers/keywords)
+        if (/[a-zA-Z_$]/.test(line[i])) {
+            let j = i;
+            while (j < line.length && /[a-zA-Z0-9_$]/.test(line[j])) {
+                j++;
+            }
+            const word = line.slice(i, j);
+            if (keywords.has(word)) {
+                tokens.push({ type: 'keyword', text: word });
+            }
+            else if (types.has(word)) {
+                tokens.push({ type: 'type', text: word });
+            }
+            else {
+                tokens.push({ type: 'plain', text: word });
+            }
+            i = j;
+            continue;
+        }
+        // Other characters (operators, punctuation, whitespace)
+        tokens.push({ type: 'plain', text: line[i] });
+        i++;
+    }
+    return tokens;
+}
+/**
+ * Render a single code block inside a dim bordered Box with syntax highlighting.
+ */
+function CodeBlock({ content, language }) {
+    const keywords = getKeywords(language);
+    const types = getTypes(language);
+    const lines = content.split('\n');
+    // useMemo avoids re-tokenizing all lines on every render (PERF-3c).
+    // Invalidated only when content or language changes.
+    const tokenizedLines = useMemo(() => lines.map(line => tokenizeLine(line, keywords, types, language)), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [content, language]);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "gray", paddingX: 1, marginY: 0, children: [language && (_jsx(Text, { dimColor: true, italic: true, children: language })), tokenizedLines.map((tokens, lineIdx) => (_jsx(Text, { children: tokens.map((token, tokenIdx) => {
+                    const color = TOKEN_COLORS[token.type];
+                    if (color) {
+                        return (_jsx(Text, { color: color, children: token.text }, tokenIdx));
+                    }
+                    return _jsx(Text, { children: token.text }, tokenIdx);
+                }) }, lineIdx)))] }));
+}
+/**
+ * Render a plain text segment with basic markdown formatting:
+ * - **bold**, *italic*, `inline code`
+ * - # headings (h1-h3)
+ * - - bullet lists
+ */
+function FormattedText({ text }) {
+    const lines = text.split('\n');
+    const elements = [];
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        // Headings
+        const headingMatch = line.match(/^(#{1,3})\s+(.+)$/);
+        if (headingMatch) {
+            const level = headingMatch[1].length;
+            elements.push(_jsx(Text, { bold: true, color: level === 1 ? 'yellow' : level === 2 ? 'cyan' : 'white', children: headingMatch[2] }, i));
+            continue;
+        }
+        // Bullet list items
+        const bulletMatch = line.match(/^(\s*)[-*]\s+(.+)$/);
+        if (bulletMatch) {
+            elements.push(_jsxs(Text, { wrap: "wrap", children: [bulletMatch[1], '  - ', renderInlineMarkdown(bulletMatch[2])] }, i));
+            continue;
+        }
+        // Numbered list items
+        const numMatch = line.match(/^(\s*)\d+\.\s+(.+)$/);
+        if (numMatch) {
+            elements.push(_jsx(Text, { wrap: "wrap", children: line }, i));
+            continue;
+        }
+        // Regular line with inline formatting
+        elements.push(_jsx(Text, { wrap: "wrap", children: renderInlineMarkdown(line) }, i));
+    }
+    return _jsx(_Fragment, { children: elements });
+}
+/**
+ * Render inline markdown: **bold**, *italic*, `code`
+ * Returns a flat array of React nodes.
+ */
+function renderInlineMarkdown(text) {
+    // Split on inline formatting patterns
+    const parts = [];
+    const regex = /(\*\*(.+?)\*\*|\*(.+?)\*|`([^`]+?)`)/g;
+    let lastIndex = 0;
+    let match;
+    let key = 0;
+    while ((match = regex.exec(text)) !== null) {
+        // Text before this match
+        if (match.index > lastIndex) {
+            parts.push(text.slice(lastIndex, match.index));
+        }
+        if (match[2]) {
+            // **bold**
+            parts.push(_jsx(Text, { bold: true, children: match[2] }, key++));
+        }
+        else if (match[3]) {
+            // *italic*
+            parts.push(_jsx(Text, { italic: true, children: match[3] }, key++));
+        }
+        else if (match[4]) {
+            // `inline code`
+            parts.push(_jsx(Text, { color: "yellow", children: match[4] }, key++));
+        }
+        lastIndex = match.index + match[0].length;
+    }
+    // Trailing text
+    if (lastIndex < text.length) {
+        parts.push(text.slice(lastIndex));
+    }
+    return parts.length === 1 ? parts[0] : _jsx(_Fragment, { children: parts });
+}
+/**
+ * Render the segments of a single message body (interleaving text and code).
+ */
+function MessageBody({ content }) {
+    const segments = parseContent(content);
+    return (_jsx(Box, { flexDirection: "column", children: segments.map((seg, idx) => {
+            if (seg.type === 'code') {
+                return _jsx(CodeBlock, { content: seg.content, language: seg.language }, idx);
+            }
+            return (_jsx(Box, { flexDirection: "column", children: _jsx(FormattedText, { text: seg.content }) }, idx));
+        }) }));
+}
+/**
+ * H2: Highlight occurrences of `query` within `text` in yellow/bold.
+ * Returns a React node with matching portions highlighted.
+ */
+function highlightText(text, query) {
+    if (!query || !text.toLowerCase().includes(query.toLowerCase()))
+        return text;
+    const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const parts = text.split(new RegExp(`(${escaped})`, 'gi'));
+    return (_jsx(_Fragment, { children: parts.map((p, i) => p.toLowerCase() === query.toLowerCase() ? (_jsx(Text, { color: "yellow", bold: true, children: p }, i)) : (_jsx(Text, { children: p }, i))) }));
+}
+/**
+ * M6: Parse a subagent tag from message content.
+ * Returns the subagent name if the content starts with "[subagent:<name>]",
+ * otherwise returns null.
+ */
+function parseSubagentTag(content) {
+    const match = content.match(/^\[subagent:(\w+)\]/);
+    if (match)
+        return match[1];
+    return null;
+}
+/**
+ * M6: Strip the subagent tag prefix from content for clean rendering.
+ */
+function stripSubagentTag(content) {
+    return content.replace(/^\[subagent:\w+\]\s*/, '');
+}
+/**
+ * Render a single message row with role label and body.
+ */
+function MessageRow({ message, mode, searchQuery }) {
+    if (message.role === 'system') {
+        return (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, italic: true, wrap: "wrap", children: searchQuery ? highlightText(message.content, searchQuery) : message.content }) }));
+    }
+    const isUser = message.role === 'user';
+    // M6: Detect subagent messages — assistant messages whose content starts with [subagent:<name>]
+    const subagentName = !isUser ? parseSubagentTag(message.content) : null;
+    const displayContent = subagentName ? stripSubagentTag(message.content) : message.content;
+    const label = isUser
+        ? 'You: '
+        : subagentName
+            ? `[@${subagentName}]: `
+            : `Agent (${mode}): `;
+    const labelColor = isUser ? 'cyan' : subagentName ? 'magenta' : 'green';
+    const time = message.timestamp.toLocaleTimeString();
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, color: labelColor, children: label }), subagentName && (_jsx(Text, { dimColor: true, italic: true, children: `subagent ` })), _jsx(Text, { dimColor: true, children: time })] }), _jsx(Box, { marginLeft: 2, children: searchQuery
+                    ? _jsx(Text, { wrap: "wrap", children: highlightText(displayContent, searchQuery) })
+                    : _jsx(MessageBody, { content: displayContent }) })] }));
+}
+/**
+ * Renders all-but-the-last visible messages with React.memo to prevent
+ * re-rendering historical messages during streaming of the latest message.
+ * The custom comparator returns true (skip re-render) when the messages array
+ * reference and length are both unchanged and mode hasn't changed.
+ */
+const HistoricalMessages = React.memo(function HistoricalMessages({ messages, mode, searchQuery }) {
+    return (_jsx(_Fragment, { children: messages.map((msg, idx) => {
+            // M3: Insert a dim turn boundary separator after an assistant message
+            // that is immediately followed by a user message (new conversation turn).
+            const nextMsg = messages[idx + 1];
+            const showSeparator = msg.role === 'assistant' &&
+                nextMsg !== undefined &&
+                nextMsg.role === 'user';
+            return (_jsxs(React.Fragment, { children: [_jsx(MessageRow, { message: msg, mode: mode, searchQuery: searchQuery }), showSeparator && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { dimColor: true, children: '─'.repeat(40) }) }))] }, msg.id));
+        }) }));
+}, (prev, next) => prev.messages === next.messages &&
+    prev.messages.length === next.messages.length &&
+    prev.mode === next.mode &&
+    prev.searchQuery === next.searchQuery);
+/** Copy text to clipboard using platform-native CLI tools. */
+function copyToClipboard(text) {
+    try {
+        const { execSync } = require('node:child_process');
+        const { platform } = process;
+        if (platform === 'darwin') {
+            execSync('pbcopy', { input: text, stdio: ['pipe', 'ignore', 'ignore'] });
+        }
+        else if (platform === 'linux') {
+            try {
+                execSync('xclip -selection clipboard', { input: text, stdio: ['pipe', 'ignore', 'ignore'] });
+            }
+            catch {
+                execSync('xdg-open', { stdio: 'ignore' }); // fallback: at least don't crash
+            }
+        }
+        else if (platform === 'win32') {
+            execSync('clip', { input: text, stdio: ['pipe', 'ignore', 'ignore'] });
+        }
+    }
+    catch {
+        // Clipboard unavailable — silently ignore
+    }
+}
+/** Exported alias for testing (H1). */
+export const _copyToClipboard = copyToClipboard;
+/**
+ * MessageList displays the most recent messages that fit the display limit.
+ * Older messages are trimmed from the top so the view always shows the latest
+ * conversation turns.
+ *
+ * PERF-3a: Splits visible messages into HistoricalMessages (memoised) +
+ * the last message rendered inline, so streaming tokens only cause the last
+ * message to re-render.
+ */
+export function MessageList({ messages, mode, maxVisible, scrollOffset = 0, searchQuery, columns }) {
+    // C2: Dynamic default — show 2.5x the terminal row height, minimum 50
+    const effectiveMaxVisible = maxVisible ?? Math.max(50, Math.floor((process.stdout.rows ?? 40) * 2.5));
+    const truncated = messages.length > effectiveMaxVisible;
+    const visible = useMemo(() => truncated ? messages.slice(messages.length - effectiveMaxVisible) : messages, [messages, truncated, effectiveMaxVisible]);
+    // M1: Filter messages by search query when set
+    const filteredVisible = searchQuery
+        ? visible.filter(m => m.content.toLowerCase().includes(searchQuery.toLowerCase()))
+        : visible;
+    // C1: Apply scroll offset — trim from the bottom so the user can read history
+    const scrolledVisible = scrollOffset > 0
+        ? filteredVisible.slice(0, Math.max(0, filteredVisible.length - scrollOffset))
+        : filteredVisible;
+    // DevOps-first welcome splash when no messages yet
+    if (scrolledVisible.length === 0) {
+        if (searchQuery) {
+            return (_jsx(Box, { paddingX: 1, paddingY: 1, children: _jsxs(Text, { dimColor: true, children: ["No messages match \"", searchQuery, "\""] }) }));
+        }
+        return (_jsxs(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "What would you like to do?" }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "Infrastructure:" }), _jsx(Text, { dimColor: true, children: "  run terraform plan and show me what will change" }), _jsx(Text, { dimColor: true, children: "  check for pod restarts in the production namespace" }), _jsx(Text, { dimColor: true, children: "  upgrade the nginx helm release to the latest chart" }), _jsx(Text, { dimColor: true, children: "  show me infrastructure drift in this workspace" }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "Incident response:" }), _jsx(Text, { dimColor: true, children: "  high CPU on api-service pods \u2014 investigate and suggest fixes" }), _jsx(Text, { dimColor: true, children: "  the staging deployment is failing \u2014 show me the logs" }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "Generation:" }), _jsx(Text, { dimColor: true, children: "  generate terraform for an RDS PostgreSQL instance in us-east-1" }), _jsx(Text, { dimColor: true, children: "  create k8s manifests for a 3-replica nginx deployment" }), _jsx(Text, { children: " " }), _jsx(Text, { dimColor: true, children: "Press ? for keyboard shortcuts  |  /help for commands  |  /init to set up context" })] }));
+    }
+    const historical = scrolledVisible.slice(0, -1);
+    const last = scrolledVisible[scrolledVisible.length - 1];
+    return (_jsxs(Box, { flexDirection: "column", paddingX: 1, children: [truncated && !searchQuery && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { dimColor: true, italic: true, children: ["\u2191 ", messages.length - effectiveMaxVisible, " earlier messages \u2014 /compact to summarize or /clear to reset"] }) })), searchQuery && (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { dimColor: true, italic: true, children: ["Search: \"", searchQuery, "\" \u2014 showing ", filteredVisible.length, " of ", visible.length, " messages"] }) })), historical.length > 0 && (_jsx(HistoricalMessages, { messages: historical, mode: mode, searchQuery: searchQuery })), _jsx(MessageRow, { message: last, mode: mode, searchQuery: searchQuery }, last.id)] }));
+}