salmon-loop 0.2.3

package/dist/cli/ui/components/StatusBannerLine.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { formatStatusBanner } from '../status/formatStatusBanner.js';
+export function StatusBannerLine(props) {
+    return (_jsx(Box, { height: 1, children: _jsx(Text, { color: "gray", bold: true, children: formatStatusBanner({ face: props.face, label: props.label }) }) }));
+}
+//# sourceMappingURL=StatusBannerLine.js.map

package/dist/cli/ui/components/TodoDrawer.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from 'ink';
+import { useMemo } from 'react';
+import { COLORS } from '../styles/theme.js';
+function statusIcon(status) {
+    switch (status) {
+        case 'done':
+            return '[x]';
+        case 'in_progress':
+            return '[/]';
+        case 'pending':
+            return '[ ]';
+    }
+}
+function statusColor(status) {
+    switch (status) {
+        case 'done':
+            return COLORS.semantic.cyan;
+        case 'in_progress':
+            return COLORS.semantic.yellow;
+        case 'pending':
+            return COLORS.text.muted;
+    }
+}
+function priorityIcon(priority) {
+    switch (priority) {
+        case 'high':
+            return '!';
+        case 'medium':
+            return '·';
+        case 'low':
+            return '‐';
+        default:
+            return ' ';
+    }
+}
+function priorityColor(priority) {
+    switch (priority) {
+        case 'high':
+            return COLORS.semantic.red;
+        case 'medium':
+            return COLORS.semantic.yellow;
+        case 'low':
+            return COLORS.text.muted;
+        default:
+            return COLORS.text.muted;
+    }
+}
+export function TodoDrawer({ todos, isExpanded, onToggle, hint = 'Ctrl+T', maxVisible = 8, }) {
+    useInput((input, key) => {
+        if (key.ctrl &&
+            (input === 't' || input === 'T' || input === '\u0014' || key.name === 't')) {
+            onToggle();
+        }
+    });
+    const visibleTodos = useMemo(() => todos.slice(0, Math.max(0, maxVisible)), [todos, maxVisible]);
+    const toggleLabel = isExpanded ? '▲' : '▼';
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderTop: true, borderBottom: false, borderLeft: false, borderRight: false, borderColor: COLORS.border.subtle, children: [_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", paddingX: 2, paddingY: 0, children: [_jsx(Box, { children: _jsx(Text, { color: COLORS.semantic.blue, bold: true, children: "TODO" }) }), _jsx(Box, { children: _jsxs(Text, { color: COLORS.text.muted, dimColor: true, children: [toggleLabel, " (", hint, ")"] }) })] }), isExpanded && (_jsx(Box, { flexDirection: "column", paddingX: 2, paddingY: 0, children: visibleTodos.length === 0 ? (_jsx(Text, { color: COLORS.text.muted, dimColor: true, children: "No tasks yet." })) : (visibleTodos.map((t) => (_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 4, children: _jsx(Text, { color: statusColor(t.status), children: statusIcon(t.status) }) }), _jsx(Box, { width: 2, children: _jsx(Text, { color: priorityColor(t.priority), children: priorityIcon(t.priority) }) }), _jsx(Box, { flexGrow: 1, children: _jsx(Text, { wrap: "truncate", color: COLORS.text.primary, children: t.text }) })] }, t.id)))) }))] }));
+}
+//# sourceMappingURL=TodoDrawer.js.map

package/dist/cli/ui/components/WelcomeMessage.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createRequire } from 'module';
+import { Box, Text } from 'ink';
+const require = createRequire(import.meta.url);
+const pkg = require('../../../../package.json');
+export const WelcomeMessage = () => {
+    // Logo parts split for two-tone coloring
+    const logoLine1_salmon = '█▀▀ ▄▀█ █   █▀▄▀█ █▀█ █▄ █';
+    const logoLine1_loop = '   █   █▀█ █▀█ █▀█';
+    const logoLine2_salmon = '▄▄█ █▀█ █▄▄ █ ▀ █ █▄█ █ ▀█';
+    const logoLine2_loop = '   █▄▄ █▄█ █▄█ █▀▀';
+    return (_jsxs(Box, { flexDirection: "column", paddingY: 1, children: [_jsxs(Box, { flexDirection: "row", marginBottom: 1, children: [_jsx(Text, { color: "#30363d", children: '═'.repeat(30) }), _jsxs(Text, { color: "#d95030", children: [" ", '><>', " "] }), _jsxs(Text, { color: "#30d9b9", children: [" ", '><>', " "] }), _jsxs(Text, { color: "#3095d9", children: [" ", '><>', " "] }), _jsx(Text, { color: "#30363d", children: '═'.repeat(30) })] }), _jsxs(Box, { flexDirection: "column", alignItems: "center", marginBottom: 1, children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: "#d95030", children: logoLine1_salmon }), _jsx(Text, { color: "#30d9b9", children: logoLine1_loop })] }), _jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: "#d95030", children: logoLine2_salmon }), _jsx(Text, { color: "#30d9b9", children: logoLine2_loop })] })] }), _jsxs(Box, { flexDirection: "column", alignItems: "center", marginBottom: 1, children: [_jsxs(Text, { color: "#6e7681", children: ["v", pkg.version, " \u00B7 CLI Edition"] }), _jsx(Text, { color: "#3095d9", italic: true, children: "Keep swimming upstream, loop until perfect" })] }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "#30363d", children: '─'.repeat(75) }) }), _jsxs(Box, { borderStyle: "single", borderLeft: true, borderRight: false, borderTop: false, borderBottom: false, borderColor: "#d95030", paddingLeft: 1, marginBottom: 1, flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { color: "#d95030", bold: true, children: `<><` }), _jsx(Text, { color: "#c7d1db", children: " Hey there! I'm " }), _jsx(Text, { color: "#d95030", bold: true, children: "Salmon" }), _jsx(Text, { color: "#c7d1db", children: ", your lazy-but-precise AI coding assistant." })] }), _jsxs(Text, { color: "#6e7681", children: ["(Don't worry, I won't break anything... ", _jsx(Text, { italic: true, children: "probably" }), " \uFF61\u25D5\u203F\u25D5\uFF61)"] })] }), _jsxs(Box, { flexDirection: "row", gap: 2, marginBottom: 1, children: [_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "#21262d", paddingX: 1, flexGrow: 1, children: [_jsx(Text, { color: "#3095d9", bold: true, children: "\u2192 QUICK START" }), _jsxs(Box, { flexDirection: "column", marginTop: 0, children: [_jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 10, children: _jsx(Text, { color: "#30d9b9", children: "/new" }) }), _jsx(Text, { color: "#6e7681", children: "Start a new session" })] }), _jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 10, children: _jsx(Text, { color: "#30d9b9", children: "/status" }) }), _jsx(Text, { color: "#6e7681", children: "Check progress" })] }), _jsxs(Box, { flexDirection: "row", children: [_jsx(Box, { width: 10, children: _jsx(Text, { color: "#30d9b9", children: "/help" }) }), _jsx(Text, { color: "#6e7681", children: "Show all commands" })] })] })] }), _jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: "#21262d", paddingX: 1, flexGrow: 1, children: [_jsx(Text, { color: "#3095d9", bold: true, children: "\u2192 PRO TIPS" }), _jsxs(Box, { flexDirection: "column", marginTop: 0, children: [_jsx(Text, { color: "#6e7681", children: "\u2022 Ctrl+Space to toggle commands" }), _jsx(Text, { color: "#6e7681", children: "\u2022 I'll show my thinking process" }), _jsx(Text, { color: "#6e7681", children: "\u2022 ^C to interrupt if needed" })] })] })] }), _jsxs(Box, { justifyContent: "center", marginBottom: 1, children: [_jsx(Text, { color: "#6e7681", children: "Type anything to begin, or try: " }), _jsx(Text, { color: "#d95030", children: "/new create a todo app" })] }), _jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: "#30363d", children: '═'.repeat(30) }), _jsx(Text, { color: "#6e7681", children: " Ready to code " }), _jsx(Text, { color: "#30363d", children: '═'.repeat(30) })] })] }));
+};
+//# sourceMappingURL=WelcomeMessage.js.map

package/dist/cli/ui/components/animations/StretchingThinking.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text, Box } from 'ink';
+import { useState, useEffect } from 'react';
+/**
+ * StretchingThinking Animation Component
+ *
+ * Sequence:
+ * 1 -> 2 -> 3 -> 2 -> 1
+ *
+ * 1: _(:з｣∠)_
+ * 2: _(:з｣                   ∠)_ (Internal body uses spaces)
+ * 3:                   _(:з｣∠)_
+ */
+export const StretchingThinking = () => {
+    const [frame, setFrame] = useState(0);
+    const maxUnderscores = 19;
+    // Phases:
+    // 0 to max: 1 -> 2 (Stretch with spaces)
+    // max+1 to 2*max: 2 -> 3 (Shift Right)
+    // 2*max+1 to 3*max: 3 -> 2 (Shift Left)
+    // 3*max+1 to 4*max-1: 2 -> 1 (Shrink)
+    const totalFrames = maxUnderscores * 4;
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setFrame((f) => (f + 1) % totalFrames);
+        }, 60);
+        return () => clearInterval(timer);
+    }, [totalFrames]);
+    let content = '';
+    if (frame <= maxUnderscores) {
+        // Phase 1: 1 -> 2 (Stretch with spaces)
+        content = `_(:з｣${' '.repeat(frame)}∠)_`;
+    }
+    else if (frame <= maxUnderscores * 2) {
+        // Phase 2: 2 -> 3 (Shift Right)
+        const shift = frame - maxUnderscores;
+        content = `${' '.repeat(shift)}_(:з｣${' '.repeat(maxUnderscores - shift)}∠)_`;
+    }
+    else if (frame <= maxUnderscores * 3) {
+        // Phase 3: 3 -> 2 (Shift Left)
+        const shift = maxUnderscores * 3 - frame;
+        content = `${' '.repeat(shift)}_(:з｣${' '.repeat(maxUnderscores - shift)}∠)_`;
+    }
+    else {
+        // Phase 4: 2 -> 1 (Shrink)
+        const stretch = maxUnderscores * 4 - frame;
+        content = `_(:з｣${' '.repeat(stretch)}∠)_`;
+    }
+    return (_jsx(Box, { height: 1, children: _jsx(Text, { color: "gray", bold: true, children: content }) }));
+};
+//# sourceMappingURL=StretchingThinking.js.map

package/dist/cli/ui/components/animations/ThinkingWave.js

@@ -0,0 +1,15 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from 'ink';
+import { useState, useEffect } from 'react';
+export const ThinkingWave = () => {
+    const [frame, setFrame] = useState(0);
+    const waves = ['.', 'o', 'O', 'o'];
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setFrame((f) => (f + 1) % waves.length);
+        }, 200);
+        return () => clearInterval(timer);
+    }, []);
+    return (_jsxs(Text, { color: "cyan", bold: true, children: [waves[frame], waves[(frame + 1) % waves.length], waves[(frame + 2) % waves.length]] }));
+};
+//# sourceMappingURL=ThinkingWave.js.map

package/dist/cli/ui/components/animations/TypeIndicator.js

@@ -0,0 +1,30 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from 'ink';
+import { useState, useEffect } from 'react';
+import { COLORS } from '../../styles/theme.js';
+/**
+ * Type indicator with animated dots for various AI operations
+ * Based on Figma design color scheme
+ */
+export const TypeIndicator = ({ type }) => {
+    const [frame, setFrame] = useState(0);
+    const colorMap = {
+        thinking: COLORS.semantic.salmon, // Salmon pink for AI thinking
+        tool: COLORS.semantic.orange, // Orange for tool execution
+        plan: COLORS.semantic.blue, // Blue for planning
+    };
+    const labelMap = {
+        thinking: 'THINKING',
+        tool: 'TOOL',
+        plan: 'PLAN',
+    };
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setFrame((f) => (f + 1) % 4);
+        }, 400);
+        return () => clearInterval(interval);
+    }, []);
+    const dots = '.'.repeat(frame);
+    return (_jsxs(Text, { color: colorMap[type], bold: true, children: [labelMap[type], dots] }));
+};
+//# sourceMappingURL=TypeIndicator.js.map

package/dist/cli/ui/components/layout/SplitPane.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useUIStore } from '../../store/context.js';
+export const SplitPane = ({ left, right }) => {
+    const { state } = useUIStore();
+    const { isSidebarVisible } = state;
+    const isDesktop = true;
+    const showSidebar = isSidebarVisible && isDesktop;
+    return (_jsxs(Box, { flexDirection: "row", flexGrow: 1, width: "100%", alignItems: "flex-end", children: [_jsx(Box, { flexDirection: "column", flexGrow: showSidebar ? 0.75 : 1, flexBasis: showSidebar ? '75%' : '100%', paddingRight: showSidebar ? 1 : 0, children: left }), showSidebar && (_jsxs(_Fragment, { children: [_jsx(Box, { paddingX: 1, flexShrink: 0, children: _jsx(Text, { color: "gray", dimColor: true, children: "\u250A" }) }), _jsx(Box, { flexDirection: "column", flexGrow: 0.25, flexBasis: "25%", children: right })] }))] }));
+};
+//# sourceMappingURL=SplitPane.js.map

package/dist/cli/ui/components/messageList/MessageItem.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { getMessageLevel } from '../../store/types.js';
+import { shouldShowSeparator } from '../../styles/theme.js';
+import { EmphasisMessageItem } from './items/EmphasisMessageItem.js';
+import { InterruptMessageItem } from './items/InterruptMessageItem.js';
+import { LightweightMessageItem } from './items/LightweightMessageItem.js';
+import { StandardMessageItem } from './items/StandardMessageItem.js';
+import { WelcomeMessageItem } from './items/WelcomeMessageItem.js';
+export const MessageItem = React.memo(({ msg, nextMsg, ctx }) => {
+    if (msg.type === 'welcome' || msg.content === 'WELCOME_LOGO') {
+        return _jsx(WelcomeMessageItem, {});
+    }
+    if (msg.type === 'interrupt' || msg.content.includes('^C [SPLATTED]')) {
+        return (_jsx(InterruptMessageItem, { msg: msg, markdownTheme: ctx.markdownTheme, markdownRenderMode: ctx.markdownRenderMode, containerWidth: ctx.containerWidth }));
+    }
+    const level = getMessageLevel(msg.type);
+    const showSeparator = ctx.logView === 'compact' ? false : shouldShowSeparator(msg.type, nextMsg?.type);
+    if (level === 'emphasis') {
+        return _jsx(EmphasisMessageItem, { msg: msg, ctx: ctx, showSeparator: showSeparator });
+    }
+    if (level === 'standard') {
+        return _jsx(StandardMessageItem, { msg: msg, ctx: ctx, showSeparator: showSeparator });
+    }
+    return _jsx(LightweightMessageItem, { msg: msg, ctx: ctx });
+});
+//# sourceMappingURL=MessageItem.js.map

package/dist/cli/ui/components/messageList/QueuePreviewList.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import React from 'react';
+import { formatQueuePreview, orderQueueMessages } from './messageListLayout.js';
+export const QueuePreviewList = React.memo(({ queueMessages }) => {
+    const orderedQueueMessages = React.useMemo(() => orderQueueMessages(queueMessages), [queueMessages]);
+    if (orderedQueueMessages.length === 0)
+        return null;
+    return (_jsx(_Fragment, { children: orderedQueueMessages.map((msg) => (_jsx(Box, { flexDirection: "column", marginBottom: 0, children: _jsx(Text, { color: "gray", dimColor: true, children: formatQueuePreview(msg.content) }) }, msg.id))) }));
+});
+//# sourceMappingURL=QueuePreviewList.js.map

package/dist/cli/ui/components/messageList/items/EmphasisMessageItem.js

@@ -0,0 +1,20 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import React from 'react';
+import { COLORS, MESSAGE_STYLES } from '../../../styles/theme.js';
+import { Markdown } from '../../Markdown.js';
+import { StreamIndicator, StreamingCursor, StreamingText } from '../streaming.js';
+import { formatTime } from '../utils.js';
+export const EmphasisMessageItem = React.memo(({ msg, ctx, showSeparator }) => {
+    const style = MESSAGE_STYLES[msg.type] || MESSAGE_STYLES.system;
+    const isStreaming = msg.streamState === 'streaming';
+    const timestamp = formatTime(msg.timestamp);
+    const showStreamIndicator = ctx.logView === 'full';
+    const bgColor = msg.type === 'error'
+        ? COLORS.bg.errorBg
+        : msg.type === 'warning'
+            ? COLORS.bg.warningBg
+            : COLORS.bg.highlight;
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, width: ctx.containerWidth, children: [_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderLeft: true, borderRight: false, borderTop: false, borderBottom: false, borderColor: style.inkColor, paddingLeft: 1, paddingTop: 1, paddingBottom: 1, backgroundColor: bgColor, width: ctx.containerWidth, children: [_jsx(Box, { marginBottom: 0, children: _jsxs(Text, { children: [_jsxs(Text, { color: COLORS.text.muted, dimColor: false, children: [' ', timestamp] }), _jsxs(Text, { color: style.inkColor, bold: true, children: [' ', style.label] }), isStreaming && showStreamIndicator && (_jsxs(Text, { children: [' ', _jsx(StreamIndicator, {})] })), msg.streamState === 'paused' && _jsx(Text, { color: COLORS.semantic.red, children: " [||]" }), _jsx(Text, { children: " " })] }) }), _jsx(Box, { marginTop: 1, marginBottom: 0, paddingLeft: 2, children: isStreaming ? (_jsxs(Box, { flexDirection: "column", children: [_jsx(StreamingText, { content: msg.content, maxLines: ctx.streamingMaxLines }), _jsx(StreamingCursor, {})] })) : (_jsx(Markdown, { theme: ctx.markdownTheme, mode: ctx.markdownRenderMode, children: msg.content })) }), msg.metadata?.error && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: ["Error: ", msg.metadata.error] }) }))] }), showSeparator && (_jsx(Box, { marginTop: 0, marginBottom: 0, paddingLeft: 2, children: _jsx(Text, { color: "gray", dimColor: true, children: ctx.separatorLine }) }))] }));
+});
+//# sourceMappingURL=EmphasisMessageItem.js.map

package/dist/cli/ui/components/messageList/items/InterruptMessageItem.js

@@ -0,0 +1,10 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import React from 'react';
+import { Markdown } from '../../Markdown.js';
+import { formatTime } from '../utils.js';
+export const InterruptMessageItem = React.memo(({ msg, markdownTheme, markdownRenderMode, containerWidth }) => {
+    const content = msg.content.replace('^C [SPLATTED]', '').trim();
+    return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, width: containerWidth, children: [_jsxs(Text, { color: "gray", dimColor: true, children: ["[", formatTime(msg.timestamp), "]"] }), content && (_jsx(Box, { paddingLeft: 2, children: _jsx(Markdown, { theme: markdownTheme, mode: markdownRenderMode, children: content }) })), _jsx(Box, { paddingLeft: 2, children: _jsx(Text, { color: "red", bold: true, children: "^C [SPLATTED]" }) })] }));
+});
+//# sourceMappingURL=InterruptMessageItem.js.map

package/dist/cli/ui/components/messageList/items/LightweightMessageItem.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import React from 'react';
+import { COLORS, MESSAGE_STYLES } from '../../../styles/theme.js';
+import { formatTime } from '../utils.js';
+export const LightweightMessageItem = React.memo(({ msg, ctx }) => {
+    const style = MESSAGE_STYLES[msg.type] || MESSAGE_STYLES.system;
+    const showTimestamp = ctx.logView === 'full';
+    const leftPad = ctx.logView === 'compact' ? 1 : ctx.logView === 'standard' ? 2 : 3;
+    return (_jsx(Box, { flexDirection: "column", marginBottom: style.marginBottom, paddingLeft: leftPad, width: ctx.containerWidth, children: _jsxs(Box, { flexDirection: "row", children: [showTimestamp && (_jsx(Box, { width: 9, flexShrink: 0, children: _jsx(Text, { color: COLORS.text.muted, dimColor: false, children: formatTime(msg.timestamp) }) })), _jsx(Box, { paddingLeft: showTimestamp ? 1 : 0, flexGrow: 1, children: _jsx(Text, { color: COLORS.text.muted, dimColor: false, children: msg.content }) })] }) }));
+});
+//# sourceMappingURL=LightweightMessageItem.js.map

package/dist/cli/ui/components/messageList/items/StandardMessageItem.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import React from 'react';
+import { COLORS, MESSAGE_STYLES } from '../../../styles/theme.js';
+import { Markdown } from '../../Markdown.js';
+import { formatTime } from '../utils.js';
+export const StandardMessageItem = React.memo(({ msg, ctx, showSeparator }) => {
+    const style = MESSAGE_STYLES[msg.type] || MESSAGE_STYLES.system;
+    const isMultiline = msg.content.length > 60 || msg.content.includes('\n');
+    const isStep = msg.type.endsWith('_step');
+    const showTimestamp = ctx.logView === 'full' || (!isStep && ctx.logView !== 'compact');
+    const showLabel = ctx.logView === 'full' || !(msg.type === 'tool_result' && msg.metadata?.toolName);
+    const multilineIndent = ctx.logView === 'full'
+        ? msg.type === 'user' || msg.type === 'tool_result'
+            ? 20
+            : 0
+        : ctx.logView === 'standard'
+            ? 2
+            : 0;
+    const leftPad = ctx.logView === 'compact' ? 1 : ctx.logView === 'standard' ? 2 : 3;
+    return (_jsxs(Box, { flexDirection: "column", paddingLeft: leftPad, width: ctx.containerWidth, children: [_jsxs(Box, { flexDirection: "column", marginBottom: style.marginBottom, children: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [showTimestamp && (_jsx(Box, { width: 9, children: _jsx(Text, { color: COLORS.text.muted, dimColor: false, children: formatTime(msg.timestamp) }) })), showLabel && style.label && (_jsx(Box, { width: 8, children: _jsxs(Text, { color: style.inkColor, bold: true, children: ["[", style.label, "]"] }) })), msg.metadata?.toolName && (_jsx(Box, { marginRight: 1, children: _jsxs(Text, { color: "gray", children: ["(", msg.metadata.toolName, ")"] }) })), !isMultiline && (_jsx(Box, { flexGrow: 1, children: _jsx(Markdown, { theme: ctx.markdownTheme, mode: ctx.markdownRenderMode, children: msg.content }) }))] }), isMultiline && (_jsx(Box, { paddingLeft: multilineIndent, children: _jsx(Markdown, { theme: ctx.markdownTheme, mode: ctx.markdownRenderMode, children: msg.content }) }))] }), showSeparator && (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: "gray", dimColor: true, children: ctx.separatorLine }) }))] }));
+});
+//# sourceMappingURL=StandardMessageItem.js.map

package/dist/cli/ui/components/messageList/items/WelcomeMessageItem.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { WelcomeMessage } from '../../WelcomeMessage.js';
+export const WelcomeMessageItem = React.memo(() => {
+    return _jsx(WelcomeMessage, {});
+});
+//# sourceMappingURL=WelcomeMessageItem.js.map

package/dist/cli/ui/components/messageList/messageListLayout.js

@@ -0,0 +1,27 @@
+import { UI_CONFIG } from '../../config.js';
+export function computeStreamingMaxLines(opts) {
+    const height = opts.terminalHeight || UI_CONFIG.DEFAULT_HEIGHT;
+    const reservedRows = 10;
+    const raw = height - reservedRows;
+    const min = opts.logMode === 'debug' ? 8 : opts.logMode === 'normal' ? 4 : 1;
+    const max = opts.logMode === 'debug' ? 24 : opts.logMode === 'normal' ? 6 : 3;
+    return Math.max(min, Math.min(max, raw));
+}
+export function computeContainerWidth(terminalWidth) {
+    const width = terminalWidth || UI_CONFIG.DEFAULT_WIDTH;
+    const padded = Math.max(0, width - UI_CONFIG.MESSAGE_AREA_PADDING_X * 2);
+    return Math.min(width, Math.max(10, padded));
+}
+export function computeSeparatorLine(containerWidth) {
+    return '─'.repeat(Math.max(10, containerWidth - 2));
+}
+export function formatQueuePreview(content) {
+    const singleLine = content.replace(/\s+/g, ' ').trim();
+    if (singleLine.length <= UI_CONFIG.QUEUE_PREVIEW_MAX_CHARS)
+        return singleLine;
+    return singleLine.slice(0, UI_CONFIG.QUEUE_PREVIEW_MAX_CHARS - 3) + '...';
+}
+export function orderQueueMessages(queueMessages) {
+    return [...queueMessages].sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
+}
+//# sourceMappingURL=messageListLayout.js.map

package/dist/cli/ui/components/messageList/streaming.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from 'ink';
+import React, { useEffect, useState } from 'react';
+import { COLORS } from '../../styles/theme.js';
+function tailByLines(input, maxLines) {
+    if (!input)
+        return { tail: '', truncated: false };
+    if (!Number.isFinite(maxLines) || maxLines <= 0)
+        return { tail: '', truncated: true };
+    let newlineCount = 0;
+    for (let i = input.length - 1; i >= 0; i -= 1) {
+        if (input[i] !== '\n')
+            continue;
+        newlineCount += 1;
+        if (newlineCount === maxLines) {
+            return { tail: input.slice(i + 1), truncated: true };
+        }
+    }
+    return { tail: input, truncated: false };
+}
+export const StreamingCursor = () => {
+    const enableBlink = process.env.SALMONLOOP_UI_BLINK_STREAMING === '1';
+    const [visible, setVisible] = useState(true);
+    useEffect(() => {
+        if (!enableBlink)
+            return;
+        const interval = setInterval(() => setVisible((v) => !v), 530);
+        return () => clearInterval(interval);
+    }, [enableBlink]);
+    return _jsx(Text, { color: COLORS.semantic.blue, children: !enableBlink || visible ? '█' : ' ' });
+};
+export const StreamIndicator = () => {
+    const enableBlink = process.env.SALMONLOOP_UI_BLINK_STREAMING === '1';
+    const [visible, setVisible] = useState(true);
+    useEffect(() => {
+        if (!enableBlink)
+            return;
+        const interval = setInterval(() => setVisible((v) => !v), 500);
+        return () => clearInterval(interval);
+    }, [enableBlink]);
+    return _jsx(Text, { color: COLORS.semantic.salmon, children: !enableBlink || visible ? '[*]' : '[ ]' });
+};
+export const StreamingText = React.memo(({ content, maxLines }) => {
+    const { tail, truncated } = tailByLines(content, maxLines);
+    if (!truncated)
+        return _jsx(Text, { children: tail });
+    if (!tail)
+        return _jsx(Text, { color: "gray", children: "\u2026" });
+    return (_jsxs(Text, { children: [_jsx(Text, { color: "gray", dimColor: true, children: '…\n' }), tail] }));
+});
+//# sourceMappingURL=streaming.js.map

package/dist/cli/ui/components/messageList/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/cli/ui/components/messageList/utils.js

@@ -0,0 +1,7 @@
+export function formatTime(timestamp) {
+    const hours = String(timestamp.getHours()).padStart(2, '0');
+    const minutes = String(timestamp.getMinutes()).padStart(2, '0');
+    const seconds = String(timestamp.getSeconds()).padStart(2, '0');
+    return `${hours}:${minutes}:${seconds}`;
+}
+//# sourceMappingURL=utils.js.map

package/dist/cli/ui/components/sidebar/FileContext.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useUIStore } from '../../store/context.js';
+export const FileContext = () => {
+    const { state } = useUIStore();
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: "white", children: "File Context" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: state.changedFiles.length === 0 ? (_jsx(Text, { color: "gray", dimColor: true, children: "No changes detected." })) : (state.changedFiles.map((file) => (_jsxs(Box, { children: [_jsx(Text, { color: "yellow", children: "M " }), _jsx(Text, { color: "white", children: file })] }, file)))) })] }));
+};
+//# sourceMappingURL=FileContext.js.map

package/dist/cli/ui/components/sidebar/MissionControl.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { useUIStore } from '../../store/context.js';
+export const MissionControl = () => {
+    const { state } = useUIStore();
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: "white", children: "Mission Control" }), _jsx(Box, { flexDirection: "column", marginTop: 1, children: state.missionTasks.length === 0 ? (_jsx(Text, { color: "gray", dimColor: true, children: "No active tasks." })) : (state.missionTasks.map((task) => (_jsxs(Box, { children: [_jsx(Text, { color: task.status === 'completed' ? 'gray' : 'cyan', children: task.status === 'completed' ? '[x] ' : '[ ] ' }), _jsx(Text, { color: task.status === 'completed' ? 'gray' : 'white', strikethrough: task.status === 'completed', children: task.content })] }, task.id)))) })] }));
+};
+//# sourceMappingURL=MissionControl.js.map

package/dist/cli/ui/config.js

@@ -0,0 +1,59 @@
+/**
+ * Centralized UI configuration for the CLI.
+ * Strictly follows AGENTS.md for English-only comments and standardized constants.
+ */
+export const UI_CONFIG = {
+    /**
+     * Character limit for system log messages in the UI.
+     * Prevents TUI performance degradation from massive strings.
+     */
+    LOG_CHAR_LIMIT: 1000,
+    /**
+     * Character limit for structured content like code blocks.
+     * Large enough to show significant diffs but capped for stability.
+     */
+    STRUCTURED_CONTENT_LIMIT: 10000,
+    /**
+     * Character limit for AI/user conversational content.
+     * This avoids truncating normal model replies that are not markdown code blocks.
+     */
+    CONVERSATION_CONTENT_LIMIT: 10000,
+    /**
+     * Throttle delay (ms) for terminal resize events.
+     * Reducing this value makes the UI more responsive to resizing,
+     * while increasing it reduces rendering overhead.
+     */
+    RESIZE_THROTTLE_MS: 100,
+    /**
+     * Animation frame interval (ms) for ThinkingWave.
+     */
+    ANIMATION_INTERVAL_MS: 200,
+    /**
+     * Horizontal padding for the main message display area.
+     */
+    MESSAGE_AREA_PADDING_X: 4,
+    /**
+     * Vertical padding (specifically bottom) for the main message display area
+     * to separate it from the thinking status.
+     */
+    MESSAGE_AREA_PADDING_BOTTOM: 1,
+    /**
+     * Horizontal padding for the input/active row.
+     */
+    INPUT_ROW_PADDING_X: 1,
+    /**
+     * Default terminal dimensions if detection fails.
+     */
+    DEFAULT_WIDTH: 80,
+    DEFAULT_HEIGHT: 24,
+    /**
+     * Maximum number of autocomplete suggestions to display at once.
+     * If exceeded, the list becomes scrollable.
+     */
+    MAX_SUGGESTIONS: 10,
+    /**
+     * Maximum characters for queue preview lines in the message area.
+     */
+    QUEUE_PREVIEW_MAX_CHARS: 80,
+};
+//# sourceMappingURL=config.js.map

package/dist/cli/ui/hooks/useCommandLifecycle.js

@@ -0,0 +1,110 @@
+import { useInput } from 'ink';
+import { useState, useCallback, useRef, useEffect } from 'react';
+import { KAOMOJI } from '../../../core/ui/kaomoji.js';
+import { text } from '../../locales/index.js';
+import { useUIStore } from '../store/context.js';
+/**
+ * Custom hook to manage the lifecycle of CLI commands, including
+ * interruption signals (AbortController) and exit logic.
+ */
+export function useCommandLifecycle(status, onExit) {
+    const { dispatch } = useUIStore();
+    const [abortController, setAbortController] = useState(new AbortController());
+    const [isExiting, setIsExiting] = useState(false);
+    const exitTimer = useRef(null);
+    const escTimer = useRef(null);
+    const statusBannerTimer = useRef(null);
+    const interruptFinalizeTimer = useRef(null);
+    const escCountRef = useRef(0);
+    useEffect(() => {
+        return () => {
+            if (exitTimer.current)
+                clearTimeout(exitTimer.current);
+            if (escTimer.current)
+                clearTimeout(escTimer.current);
+            if (statusBannerTimer.current)
+                clearTimeout(statusBannerTimer.current);
+            if (interruptFinalizeTimer.current)
+                clearTimeout(interruptFinalizeTimer.current);
+        };
+    }, []);
+    /**
+     * Generates a new AbortController and returns its signal.
+     * Useful when starting a new task after the previous one was aborted.
+     */
+    const renewSignal = useCallback(() => {
+        const newController = new AbortController();
+        setAbortController(newController);
+        return newController.signal;
+    }, []);
+    const splatInterrupt = useCallback(() => {
+        abortController.abort();
+        dispatch({
+            type: 'INTERRUPT_STREAM',
+            payload: { timestamp: new Date() },
+        });
+        dispatch({
+            type: 'SET_STATUS_BANNER',
+            payload: {
+                face: KAOMOJI.cleanupWorking,
+                label: text.ui.status.stopping,
+                source: 'lifecycle',
+            },
+        });
+        if (statusBannerTimer.current)
+            clearTimeout(statusBannerTimer.current);
+        statusBannerTimer.current = setTimeout(() => {
+            dispatch({ type: 'CLEAR_STATUS_BANNER', payload: { source: 'lifecycle' } });
+        }, 15_000);
+        if (interruptFinalizeTimer.current)
+            clearTimeout(interruptFinalizeTimer.current);
+        interruptFinalizeTimer.current = setTimeout(() => {
+            dispatch({ type: 'FINALIZE_INTERRUPT' });
+        }, 30_000);
+        renewSignal();
+    }, [abortController, dispatch, renewSignal]);
+    const armExit = useCallback(() => {
+        setIsExiting(true);
+        if (exitTimer.current)
+            clearTimeout(exitTimer.current);
+        exitTimer.current = setTimeout(() => {
+            setIsExiting(false);
+        }, 2000);
+    }, []);
+    useInput((input, key) => {
+        if (key.ctrl && input === 'c') {
+            if (isExiting) {
+                // Double tap Ctrl+C: Force exit
+                onExit();
+                return;
+            }
+            if (status === 'running') {
+                // First tap while running: Splat interrupt
+                splatInterrupt();
+                armExit();
+                return;
+            }
+            // First tap while idle: Prepare for exit
+            armExit();
+            return;
+        }
+        if (key.escape && status === 'running') {
+            escCountRef.current += 1;
+            if (escTimer.current)
+                clearTimeout(escTimer.current);
+            escTimer.current = setTimeout(() => {
+                escCountRef.current = 0;
+            }, 600);
+            if (escCountRef.current >= 2) {
+                escCountRef.current = 0;
+                splatInterrupt();
+            }
+        }
+    });
+    return {
+        signal: abortController.signal,
+        isExiting,
+        renewSignal,
+    };
+}
+//# sourceMappingURL=useCommandLifecycle.js.map