@rubixkube/rubix 0.0.5 → 0.0.7

package/dist/ui/components/ChatTranscript.js

@@ -67,9 +67,82 @@ function tryPrettyJson(raw) {
         return s;
     }
 }
-function buildTimelineRows(workflow, fullContent) {
+/** Format tool response: unwrap double-encoded JSON and expand nested JSON strings in common keys. */
+function formatToolResultContent(raw) {
+    const s = (raw ?? "").trim();
+    if (!s)
+        return s;
+    try {
+        let parsed = JSON.parse(s);
+        // Unwrap one level if the backend sent a string containing JSON
+        if (typeof parsed === "string") {
+            const inner = parsed.trim();
+            if (inner.startsWith("{") || inner.startsWith("[")) {
+                try {
+                    parsed = JSON.parse(inner);
+                }
+                catch {
+                    return JSON.stringify(parsed, null, 2);
+                }
+            }
+            else {
+                return JSON.stringify(parsed, null, 2);
+            }
+        }
+        // Expand nested string values that look like JSON (e.g. result, data.content from observer tools)
+        if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+            const obj = parsed;
+            const keysToUnwrap = ["result", "content", "data", "output", "message"];
+            for (const key of keysToUnwrap) {
+                const val = obj[key];
+                if (typeof val === "string") {
+                    const trimmed = val.trim();
+                    if ((trimmed.startsWith("{") || trimmed.startsWith("[")) && trimmed.length > 1) {
+                        try {
+                            obj[key] = JSON.parse(trimmed);
+                        }
+                        catch {
+                            // leave as string
+                        }
+                    }
+                }
+            }
+            // If data is an object with a string result/content, expand that too
+            const data = obj.data;
+            if (data && typeof data === "object" && !Array.isArray(data)) {
+                const d = data;
+                for (const k of ["result", "content", "message"]) {
+                    const v = d[k];
+                    if (typeof v === "string") {
+                        const t = v.trim();
+                        if ((t.startsWith("{") || t.startsWith("[")) && t.length > 1) {
+                            try {
+                                d[k] = JSON.parse(t);
+                            }
+                            catch {
+                                // leave as string
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        return JSON.stringify(parsed, null, 2);
+    }
+    catch {
+        return tryPrettyJson(raw) || raw;
+    }
+}
+function buildTimelineRows(workflow, fullContent, getSegmentIndex) {
     const rows = [];
+    const paired = new Set(); // indices of function_response events already consumed
+    const withSegment = (row, primaryIndex) => ({
+        ...row,
+        ...(getSegmentIndex ? { segmentIndex: getSegmentIndex(primaryIndex) } : {}),
+    });
     for (let index = 0; index < workflow.length; index += 1) {
+        if (paired.has(index))
+            continue;
         const event = workflow[index];
         const previous = rows[rows.length - 1];
         const name = typeof event.details?.name === "string" ? event.details.name : "";
@@ -80,12 +153,12 @@ function buildTimelineRows(workflow, fullContent) {
             const content = fullContent ? (event.content ?? "").trim() : extractThoughtTitle(event.content);
             if (!fullContent && previous?.label === "thought" && previous.content === content)
                 continue;
-            rows.push({
+            rows.push(withSegment({
                 key: `${event.id}-${index}`,
                 label: "thought",
                 content: content || "Thinking",
                 color: RUBIX_THEME.colors.thought,
-            });
+            }, index));
             continue;
         }
         if (event.type === "function_call") {
@@ -95,59 +168,105 @@ function buildTimelineRows(workflow, fullContent) {
                     ? `${toolLabel}\n${tryPrettyJson(event.content) || event.content}`
                     : toolLabel
                 : name || compact(event.content, 80) || "tool";
-            if (!fullContent && previous?.label === "tool call" && previous.content === callContent)
+            // Look ahead for the matching function_response (by ID first, then by name)
+            let matchedIdx = -1;
+            for (let j = index + 1; j < workflow.length; j += 1) {
+                if (paired.has(j))
+                    continue;
+                const candidate = workflow[j];
+                if (candidate.type !== "function_response")
+                    continue;
+                const candidateId = typeof candidate.details?.id === "string" || typeof candidate.details?.id === "number"
+                    ? String(candidate.details.id)
+                    : "";
+                const candidateName = typeof candidate.details?.name === "string" ? candidate.details.name : "";
+                if (eventId && candidateId && eventId === candidateId) {
+                    matchedIdx = j;
+                    break;
+                }
+                if (!matchedIdx && name && candidateName === name) {
+                    matchedIdx = j;
+                    break;
+                }
+            }
+            let response;
+            if (matchedIdx !== -1) {
+                paired.add(matchedIdx);
+                const respEvent = workflow[matchedIdx];
+                const respName = typeof respEvent.details?.name === "string" ? respEvent.details.name : "";
+                const respId = typeof respEvent.details?.id === "string" || typeof respEvent.details?.id === "number"
+                    ? String(respEvent.details.id)
+                    : "";
+                const raw = respEvent.content || `[${respName || respId || "tool"}]`;
+                // create_ui_component responses are rendered as uiData cards; handle them on this call too
+                if (respName === "create_ui_component") {
+                    try {
+                        const cleaned = raw.startsWith("[create_ui_component]\n")
+                            ? raw.replace("[create_ui_component]\n", "")
+                            : raw;
+                        const parsed = JSON.parse(cleaned);
+                        if (parsed.status !== "failed" && !parsed.error && (parsed.title || parsed.body)) {
+                            rows.push(withSegment({
+                                key: `${event.id}-${index}`,
+                                label: "ui component",
+                                content: "",
+                                color: RUBIX_THEME.colors.thought,
+                                uiData: { title: parsed.title, description: parsed.description, body: parsed.body },
+                            }, index));
+                            continue;
+                        }
+                        // eslint-disable-next-line no-empty
+                    }
+                    catch { }
+                }
+                const isError = /^Error:/i.test(raw.trim());
+                const responseContent = fullContent ? formatToolResultContent(raw) || raw : compact(raw, 88);
+                response = { content: responseContent, isError };
+            }
+            if (!fullContent && previous?.label === "action" && previous.content === callContent && !response)
                 continue;
-            rows.push({
+            rows.push(withSegment({
                 key: `${event.id}-${index}`,
-                label: "tool call",
+                label: "action",
                 content: callContent,
-                color: RUBIX_THEME.colors.tool,
-            });
+                color: response?.isError ? "red" : RUBIX_THEME.colors.tool,
+                response,
+            }, index));
             continue;
         }
+        // Unmatched function_response (no preceding call, or call already consumed it)
         if (event.type === "function_response") {
             const raw = event.content || `[${name || eventId || "tool"}]`;
-            // Intercept Web UI component structures specifically mapped from Web Console
             if (name === "create_ui_component") {
                 try {
-                    // Remove the outer "[create_ui_component]" wrapper if present from stringification
                     const cleaned = raw.startsWith("[create_ui_component]\n")
                         ? raw.replace("[create_ui_component]\n", "")
                         : raw;
                     const parsed = JSON.parse(cleaned);
                     if (parsed.status !== "failed" && !parsed.error && (parsed.title || parsed.body)) {
-                        rows.push({
+                        rows.push(withSegment({
                             key: `${event.id}-${index}`,
                             label: "ui component",
                             content: "",
                             color: RUBIX_THEME.colors.thought,
-                            uiData: {
-                                title: parsed.title,
-                                description: parsed.description,
-                                body: parsed.body,
-                            }
-                        });
-                        // Drop the preceding function_call for create_ui_component so the terminal won't get messy
-                        if (rows.length > 1 && rows[rows.length - 2].label === "tool call" && rows[rows.length - 2].content.includes("create_ui_component")) {
-                            rows.splice(rows.length - 2, 1);
-                        }
+                            uiData: { title: parsed.title, description: parsed.description, body: parsed.body },
+                        }, index));
                         continue;
                     }
                     // eslint-disable-next-line no-empty
                 }
                 catch { }
             }
-            const responseContent = fullContent ? tryPrettyJson(raw) || raw : compact(raw, 88);
-            const isError = /error|failed|exception|denied|invalid/i.test(responseContent);
-            if (!fullContent && previous?.label === "tool result" && previous.content === responseContent)
+            const responseContent = fullContent ? formatToolResultContent(raw) || raw : compact(raw, 88);
+            const isError = /^Error:/i.test(raw.trim());
+            if (!fullContent && previous?.label === "result" && previous.content === responseContent)
                 continue;
-            rows.push({
+            rows.push(withSegment({
                 key: `${event.id}-${index}`,
-                label: isError ? "tool error" : "tool result",
+                label: isError ? "error" : "result",
                 content: responseContent,
                 color: isError ? "red" : RUBIX_THEME.colors.assistantText,
-            });
-            continue;
+            }, index));
         }
     }
     return rows;
@@ -173,18 +292,25 @@ export const ChatTranscript = React.memo(function ChatTranscript({ messages, wor
     if (messages.length === 0) {
         return _jsx(Box, {});
     }
-    const cumulativeStatsByIndex = React.useMemo(() => {
+    // Per-turn stats: for each assistant message, sum stats from all assistant messages
+    // since the last user message (i.e. just this turn, not the whole session).
+    const turnStatsByIndex = React.useMemo(() => {
         const result = new Map();
-        let cumTools = 0;
-        let cumThoughts = 0;
-        let cumDuration = 0;
+        let turnTools = 0;
+        let turnThoughts = 0;
+        let turnDuration = 0;
         messages.forEach((m, idx) => {
-            if (m.role === "assistant") {
+            if (m.role === "user") {
+                turnTools = 0;
+                turnThoughts = 0;
+                turnDuration = 0;
+            }
+            else if (m.role === "assistant") {
                 const s = buildWorkflowStats(m.workflow ?? []);
-                cumTools += s.toolCalls;
-                cumThoughts += s.thoughtCount;
-                cumDuration += s.durationSec ?? 0;
-                result.set(idx, { toolCalls: cumTools, thoughtCount: cumThoughts, durationSec: cumDuration });
+                turnTools += s.toolCalls;
+                turnThoughts += s.thoughtCount;
+                turnDuration += s.durationSec ?? 0;
+                result.set(idx, { toolCalls: turnTools, thoughtCount: turnThoughts, durationSec: turnDuration });
             }
         });
         return result;
@@ -205,7 +331,7 @@ export const ChatTranscript = React.memo(function ChatTranscript({ messages, wor
             if (message.role === "assistant") {
                 const workflow = message.workflow ?? [];
                 const stats = buildWorkflowStats(workflow);
-                const cumStats = cumulativeStatsByIndex.get(msgIndex);
+                const cumStats = turnStatsByIndex.get(msgIndex);
                 const isDetailed = workflowViewMode === "detailed";
                 const timelineRows = buildTimelineRows(workflow, isDetailed);
                 const rawContent = message.content || "";
@@ -220,10 +346,13 @@ export const ChatTranscript = React.memo(function ChatTranscript({ messages, wor
                     const renderSummaryFooter = () => {
                         if (isStreaming || !hasCollapsibleItems)
                             return null;
+                        const nextNonSystem = messages.slice(msgIndex + 1).find((m) => m.role !== "system");
+                        if (nextNonSystem?.role === "assistant")
+                            return null;
                         const c = cumStats ?? { toolCalls: stats.toolCalls, thoughtCount: stats.thoughtCount, durationSec: stats.durationSec ?? 0 };
                         const parts = [];
                         if (c.toolCalls > 0)
-                            parts.push(`${c.toolCalls} tool call${c.toolCalls !== 1 ? "s" : ""}`);
+                            parts.push(`${c.toolCalls} action${c.toolCalls !== 1 ? "s" : ""}`);
                         if (c.thoughtCount > 0)
                             parts.push(`${c.thoughtCount} thought${c.thoughtCount !== 1 ? "s" : ""}`);
                         const summaryText = parts.join(", ");
@@ -233,28 +362,70 @@ export const ChatTranscript = React.memo(function ChatTranscript({ messages, wor
                     const renderRow = (row, isFirstInBlock) => {
                         const rowMargin = isFirstInBlock ? 0 : 1;
                         if (row.uiData) {
-                            return (_jsxs(Box, { flexDirection: "column", marginTop: rowMargin, marginBottom: 1, marginLeft: 4, paddingX: 2, paddingY: 1, borderStyle: "round", borderColor: row.uiData.color || "gray", children: [_jsx(Text, { bold: true, children: row.uiData.title }), row.uiData.description ? _jsx(Text, { dimColor: true, children: row.uiData.description }) : null, row.uiData.body ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { children: row.uiData.body }) })) : null] }, `ui-${row.key}`));
+                            return (_jsxs(Box, { flexDirection: "column", marginTop: rowMargin, marginBottom: 1, marginLeft: 4, paddingX: 2, paddingY: 1, borderStyle: "round", borderColor: row.uiData.color || "gray", children: [_jsx(Text, { bold: true, children: row.uiData.title }), row.uiData.description ? _jsx(Text, { dimColor: true, children: row.uiData.description }) : null, row.uiData.body ? _jsx(Box, { marginTop: 1, children: _jsx(Text, { children: row.uiData.body }) }) : null] }, `ui-${row.key}`));
                         }
-                        if (!shouldShowTimeline && row.label !== "thought" && row.label !== "tool call" && row.label !== "tool error") {
+                        if (!shouldShowTimeline && row.label !== "thought" && row.label !== "action" && row.label !== "error")
                             return null;
-                        }
                         const lines = row.content.split("\n");
                         const firstLine = lines[0] || "";
+                        const hasResponse = !!row.response;
+                        const statusGlyph = hasResponse ? (row.response.isError ? " ✗" : " ✓") : "";
                         if (!shouldShowTimeline) {
-                            const displayTitle = row.label === "tool call"
-                                ? `${row.label}: ${firstLine}()`
-                                : row.label === "thought"
-                                    ? `${row.label}: ${firstLine} ...`
-                                    : `${row.label}`;
+                            const displayTitle = row.label === "action"
+                                ? `${row.label}: ${firstLine}()${statusGlyph}`
+                                : row.label === "thought" ? `${row.label}: ${firstLine} ...` : row.label;
                             return (_jsx(Box, { marginTop: rowMargin, children: _jsx(Text, { dimColor: true, children: _jsxs(Text, { color: row.color, children: ["\u25CF ", displayTitle] }) }) }, `condensed-${row.key}`));
                         }
-                        return (_jsx(Box, { flexDirection: "column", marginTop: rowMargin, children: lines.map((line, i) => (_jsx(Text, { children: i === 0 ? (_jsxs(_Fragment, { children: [_jsxs(Text, { color: row.color, children: ["\u25CF ", row.label, ": "] }), _jsx(Text, { italic: true, dimColor: true, children: line })] })) : row.label === "thought" ? (_jsxs(Text, { dimColor: true, children: ["  ", line] })) : (_jsxs(Text, { dimColor: true, children: ["    ", line] })) }, `${row.key}-${i}`))) }, row.key));
+                        return (_jsxs(Box, { flexDirection: "column", marginTop: rowMargin, children: [lines.map((line, i) => (_jsx(Text, { children: i === 0 ? (_jsxs(_Fragment, { children: [_jsxs(Text, { color: row.color, children: ["\u25CF ", row.label, ": "] }), _jsxs(Text, { italic: true, dimColor: true, children: [line, i === 0 && lines.length === 1 ? statusGlyph : ""] })] })) : row.label === "thought" ? (_jsxs(Text, { dimColor: true, children: ["  ", line] })) : (_jsxs(Text, { dimColor: true, children: ["    ", line] })) }, `${row.key}-${i}`))), hasResponse && row.response.content && (_jsx(Box, { flexDirection: "column", marginLeft: 4, children: row.response.content.split("\n").map((line, i) => (_jsx(Text, { dimColor: true, color: row.response.isError ? "red" : undefined, children: line || " " }, `${row.key}-resp-${i}`))) }))] }, row.key));
                     };
+                    const renderTextBlock = (text, segKey, isFirst) => {
+                        const ansi = markdownToAnsi(text);
+                        const lines = ansi.split("\n");
+                        return (_jsx(Box, { flexDirection: "column", marginTop: isFirst ? 0 : 1, children: lines.map((line, i) => (_jsxs(Text, { children: [_jsx(Text, { color: RUBIX_THEME.colors.assistantText, children: i === 0 && isFirst && !hasWorkflow ? "● " : "  " }), line.length > 0 ? line : " "] }, `${segKey}-${i}`))) }, segKey));
+                    };
+                    // Segment-aware rendering: collect ALL workflow events across segments for proper
+                    // call+response pairing. Events split by text would otherwise never pair.
+                    const segments = message.segments;
+                    if (segments && segments.length > 0) {
+                        const allEvents = [];
+                        const eventToSegment = [];
+                        for (let sIdx = 0; sIdx < segments.length; sIdx += 1) {
+                            const seg = segments[sIdx];
+                            if (seg.kind === "workflow") {
+                                for (const e of seg.events) {
+                                    allEvents.push(e);
+                                    eventToSegment.push(sIdx);
+                                }
+                            }
+                        }
+                        const getSegmentIndex = (idx) => eventToSegment[idx] ?? 0;
+                        const allRows = buildTimelineRows(allEvents, isDetailed, getSegmentIndex);
+                        const rowsBySegment = new Map();
+                        for (const row of allRows) {
+                            const segIdx = row.segmentIndex ?? 0;
+                            const list = rowsBySegment.get(segIdx) ?? [];
+                            list.push(row);
+                            rowsBySegment.set(segIdx, list);
+                        }
+                        return (_jsxs(Box, { flexDirection: "column", children: [segments.map((seg, sIdx) => {
+                                    const isFirst = sIdx === 0;
+                                    if (seg.kind === "workflow") {
+                                        const rows = rowsBySegment.get(sIdx) ?? [];
+                                        if (rows.length === 0)
+                                            return null;
+                                        return (_jsx(Box, { flexDirection: "column", marginTop: isFirst ? 0 : 1, children: rows.map((row, idx) => renderRow(row, idx === 0)) }, `${message.id}-seg-wf-${sIdx}`));
+                                    }
+                                    return renderTextBlock(seg.content, `${message.id}-seg-txt-${sIdx}`, isFirst);
+                                }), renderSummaryFooter()] }));
+                    }
+                    // Fallback: legacy workflow-then-text layout (for messages without segments)
                     const hasVisibleRows = timelineRows.length > 0;
                     return (_jsxs(Box, { flexDirection: "column", children: [hasVisibleRows && (_jsx(Box, { flexDirection: "column", children: timelineRows.map((row, idx) => renderRow(row, idx === 0)) })), hasNonEmptyContent && (_jsx(Box, { flexDirection: "column", marginTop: hasVisibleRows ? 1 : 0, children: contentLines.map((line, index) => (_jsxs(Text, { children: [_jsx(Text, { color: RUBIX_THEME.colors.assistantText, children: (index === 0 && (!shouldShowTimeline || !hasVisibleRows)) ? "● " : "  " }), line.length > 0 ? line : " "] }, `${message.id}-text-${index}`))) })), renderSummaryFooter()] }));
                 };
-                // Consistent gap between user and agent turn for both streaming and history
-                const gapAfterUser = 1;
+                // Only add a top gap when this assistant message follows a user message.
+                // Consecutive assistant messages in the same turn get no gap between them.
+                const prevNonSystem = messages.slice(0, msgIndex).reverse().find((m) => m.role !== "system");
+                const gapAfterUser = prevNonSystem?.role === "user" ? 1 : 0;
                 return (_jsx(Box, { flexDirection: "column", marginTop: gapAfterUser, marginBottom: 0, children: renderMixedView() }, message.id));
             }
             if (isSessionMetadata(message.content || ""))

package/dist/ui/components/Composer.js

@@ -4,11 +4,26 @@ import { Box, Text, useInput } from "ink";
 import { Spinner } from "@inkjs/ui";
 import { MultilineInput } from "ink-multiline-input";
 import { RUBIX_THEME } from "../theme.js";
+import { AnimatedGlyph } from "./AnimatedGlyph.js";
+import { getFramesForState, getIntervalForState } from "../sprite-frames.js";
 /** Ctrl+letter shortcuts used by App — don't insert into composer. */
 const GLOBAL_CTRL_KEYS = ["c", "d", "l", "o", "x"];
-export const Composer = React.memo(function Composer({ value, resetToken, disabled, shellMode = false, placeholder = "Ask anything, / for commands, @ for files, '! ' for shell", rightStatus = "", busy = false, suggestion = "", suggestions = [], captureArrowKeys = false, onChange, onSubmit, }) {
+export const Composer = React.memo(function Composer({ value, resetToken, disabled, isStreaming = false, isCommandRunning = false, isWaitingForResponse = false, shellMode = false, placeholder = "Ask anything, / for commands, @ for files, '! ' for shell", rightStatus = "", busy = false, suggestion = "", suggestions = [], captureArrowKeys = false, onChange, onSubmit, }) {
     const effectivePlaceholder = disabled ? "busy..." : placeholder;
     const bashMode = shellMode;
+    // Sprite = at-a-glance “what’s happening?”. Use explicit activity flags so we
+    // don’t depend on rightStatus (which is cleared when liveActivity is set).
+    const spriteState = isStreaming && isWaitingForResponse
+        ? "thinking"
+        : isStreaming
+            ? "streaming"
+            : isCommandRunning
+                ? "running"
+                : disabled
+                    ? "waiting"
+                    : "listening";
+    const spriteFrames = getFramesForState(spriteState);
+    const spriteInterval = getIntervalForState(spriteState);
     // ── Fast-typing fix ──────────────────────────────────────────────────────
     // `MultilineInput` reads `value` *inside* its input handler closure.
     // When typing quickly, React hasn't re-rendered yet, so the next character
@@ -91,8 +106,8 @@ export const Composer = React.memo(function Composer({ value, resetToken, disabl
     }, { isActive }), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [captureArrowKeys, onChange]);
-    return (_jsxs(Box, { flexDirection: "column", width: "100%", children: [_jsxs(Box, { borderStyle: "single", borderColor: bashMode ? RUBIX_THEME.colors.bash : RUBIX_THEME.colors.brand, paddingX: 1, flexDirection: "row", alignItems: "flex-start", children: [_jsx(Text, { color: bashMode ? RUBIX_THEME.colors.bashPrompt : RUBIX_THEME.colors.userPrompt, children: bashMode ? "! " : "❯ " }), _jsx(MultilineInput, { value: effectiveValue, onChange: handleChange, onSubmit: onSubmit, placeholder: effectivePlaceholder, focus: !disabled, rows: 1, maxRows: 10, textStyle: { color: bashMode ? RUBIX_THEME.colors.bash : RUBIX_THEME.colors.assistantText }, keyBindings: {
-                            submit: (key) => !!key.return && !key.shift && !key.meta && !key.alt,
-                            newline: (key) => !!key.return && (!!key.shift || !!key.meta || !!key.alt),
-                        }, useCustomInput: useFilteredInput }, `composer-${resetToken}`)] }), _jsxs(Box, { justifyContent: "space-between", paddingX: 1, flexDirection: "column", children: [bashMode ? (_jsx(Text, { color: RUBIX_THEME.colors.bash, children: "Shell mode \u00B7 Esc to switch back" })) : null, _jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { dimColor: true, children: suggestion || "? for shortcuts" }), busy ? _jsx(Spinner, { label: rightStatus }) : _jsx(Text, { dimColor: true, children: rightStatus })] })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", width: "100%", children: [_jsxs(Box, { borderStyle: "single", borderColor: bashMode ? RUBIX_THEME.colors.bash : RUBIX_THEME.colors.brand, paddingX: 1, flexDirection: "row", alignItems: "flex-start", children: [_jsx(Box, { marginRight: 1, children: _jsx(AnimatedGlyph, { frames: spriteFrames, intervalMs: spriteInterval, color: RUBIX_THEME.colors.brand }) }), _jsx(Text, { color: bashMode ? RUBIX_THEME.colors.bashPrompt : RUBIX_THEME.colors.userPrompt, children: bashMode ? "! " : "❯ " }), _jsx(Box, { flexGrow: 1, minWidth: 10, children: _jsx(MultilineInput, { value: effectiveValue, onChange: handleChange, onSubmit: onSubmit, placeholder: effectivePlaceholder, focus: !disabled, rows: 1, maxRows: 10, textStyle: { color: bashMode ? RUBIX_THEME.colors.bash : RUBIX_THEME.colors.assistantText }, keyBindings: {
+                                submit: (key) => !!key.return && !key.shift && !key.meta && !key.alt,
+                                newline: (key) => !!key.return && (!!key.shift || !!key.meta || !!key.alt),
+                            }, useCustomInput: useFilteredInput }, `composer-${resetToken}`) })] }), _jsxs(Box, { justifyContent: "space-between", paddingX: 1, flexDirection: "column", children: [bashMode ? (_jsx(Text, { color: RUBIX_THEME.colors.bash, children: "Shell mode \u00B7 Esc to switch back" })) : null, _jsxs(Box, { justifyContent: "space-between", children: [_jsx(Text, { dimColor: true, children: suggestion || "? for shortcuts" }), busy ? _jsx(Spinner, { label: rightStatus }) : _jsx(Text, { dimColor: true, children: rightStatus })] })] })] }));
 });

package/dist/ui/components/DashboardPanel.js

@@ -82,5 +82,5 @@ export const DashboardPanel = React.memo(function DashboardPanel({ user, agentNa
         .slice(0, 2);
     const envName = selectedEnvironment?.name;
     const envStatus = selectedEnvironment?.status;
-    return (_jsx(Box, { flexDirection: "column", width: "100%", marginTop: 1, paddingX: 2, paddingY: 1, children: _jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: RUBIX_THEME.colors.brand, paddingX: 2, paddingY: 1, children: [_jsx(Box, { flexDirection: "row", marginBottom: 1, children: _jsxs(Text, { color: RUBIX_THEME.colors.brand, bold: true, children: ["\u25C8 ", agentName, " v", VERSION] }) }), _jsxs(Box, { flexDirection: "column", children: [envName ? (_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: RUBIX_THEME.colors.assistantText, children: envName }), _jsx(Text, { color: RUBIX_THEME.colors.border, children: "\u00B7" }), _jsx(Text, { color: RUBIX_THEME.colors.brand, children: envStatus }), _jsx(Text, { color: RUBIX_THEME.colors.border, children: "\u00B7" }), _jsx(Text, { dimColor: true, children: "Run /environments to switch" })] })) : null, stats ? (_jsx(Text, { dimColor: true, children: statsLine(stats) })) : (_jsxs(Text, { dimColor: true, children: ["Hello, ", greetingName, ". What's happening in your infrastructure?"] }))] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: RUBIX_THEME.colors.border, dimColor: true, children: "─".repeat(64) }) }), _jsxs(Box, { flexDirection: "row", marginTop: 1, width: "100%", alignItems: "flex-start", children: [_jsxs(Box, { flexDirection: "column", width: 42, children: [!envName ? (_jsx(Box, { marginTop: 0, children: _jsx(Text, { dimColor: true, children: "no environment \u00B7 /environments to select" }) })) : null, workspace ? (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: workspace }) })) : null, _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: RUBIX_THEME.colors.brand, bold: true, children: "Try asking" }), SUGGESTIONS.map((item) => (_jsxs(Text, { children: [_jsx(Text, { color: RUBIX_THEME.colors.brand, children: "\u203A" }), _jsxs(Text, { dimColor: true, children: [" ", item] })] }, item)))] })] }), _jsx(Box, { paddingX: 2, flexDirection: "column", children: Array.from({ length: 10 }).map((_, i) => (_jsx(Text, { color: RUBIX_THEME.colors.border, children: "\u2502" }, i))) }), _jsxs(Box, { flexGrow: 1, flexDirection: "column", minWidth: 26, children: [_jsx(Text, { color: RUBIX_THEME.colors.brand, bold: true, children: "Quick nav" }), NAV_TIPS.map(({ cmd, desc }) => (_jsxs(Text, { children: [_jsx(Text, { color: RUBIX_THEME.colors.assistantText, children: cmd.padEnd(16) }), _jsx(Text, { dimColor: true, children: desc })] }, cmd))), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: RUBIX_THEME.colors.brand, bold: true, children: "Recent" }), latest.length === 0 ? (_jsx(Text, { dimColor: true, children: "no sessions yet \u00B7 /new to start" })) : (latest.map((session, i) => (_jsxs(Box, { flexDirection: "column", marginTop: i > 0 ? 1 : 0, children: [_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "\u25CB " }), _jsx(Text, { children: oneLine(session.title) ?? "Untitled session" })] }), _jsxs(Text, { dimColor: true, children: ["  ", relativeTime(session.updatedAt) || compactSessionId(session.id)] })] }, session.id))))] })] })] })] }) }));
+    return (_jsx(Box, { flexDirection: "column", width: "100%", marginTop: 1, paddingX: 2, paddingY: 1, children: _jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: RUBIX_THEME.colors.brand, paddingX: 2, paddingY: 1, children: [_jsx(Box, { flexDirection: "row", marginBottom: 1, children: _jsxs(Text, { color: RUBIX_THEME.colors.brand, bold: true, children: ["\u25C8 ", agentName, " v", VERSION] }) }), _jsxs(Box, { flexDirection: "column", children: [envName ? (_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: RUBIX_THEME.colors.assistantText, children: envName }), _jsx(Text, { color: RUBIX_THEME.colors.border, children: "\u00B7" }), _jsx(Text, { color: RUBIX_THEME.colors.brand, children: envStatus }), _jsx(Text, { color: RUBIX_THEME.colors.border, children: "\u00B7" }), _jsx(Text, { dimColor: true, children: "Run /environments to switch" })] })) : null, stats ? (_jsx(Text, { dimColor: true, children: statsLine(stats) })) : (_jsxs(Text, { dimColor: true, children: ["Hello, ", greetingName, ". What's happening in your infrastructure?"] }))] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: RUBIX_THEME.colors.border, dimColor: true, children: "─".repeat(64) }) }), _jsxs(Box, { flexDirection: "row", marginTop: 1, width: "100%", alignItems: "flex-start", children: [_jsxs(Box, { flexDirection: "column", width: 42, children: [!envName ? (_jsx(Box, { marginTop: 0, children: _jsx(Text, { dimColor: true, children: "no environment \u00B7 /environments to select" }) })) : null, workspace ? (_jsx(Box, { children: _jsx(Text, { dimColor: true, children: workspace }) })) : null, _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: RUBIX_THEME.colors.brand, bold: true, children: "Try asking" }), SUGGESTIONS.map((item) => (_jsxs(Text, { children: [_jsx(Text, { color: RUBIX_THEME.colors.brand, children: "\u203A" }), _jsxs(Text, { dimColor: true, children: [" ", item] })] }, item)))] })] }), _jsx(Box, { paddingX: 2, flexDirection: "column", children: Array.from({ length: 10 }).map((_, i) => (_jsx(Text, { color: RUBIX_THEME.colors.border, children: "\u2502" }, i))) }), _jsxs(Box, { flexGrow: 1, flexDirection: "column", minWidth: 26, children: [_jsx(Text, { color: RUBIX_THEME.colors.brand, bold: true, children: "Quick nav" }), NAV_TIPS.map(({ cmd, desc }) => (_jsxs(Text, { children: [_jsx(Text, { color: RUBIX_THEME.colors.assistantText, children: cmd.padEnd(16) }), _jsx(Text, { dimColor: true, children: desc })] }, cmd))), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: RUBIX_THEME.colors.brand, bold: true, children: "Recent" }), latest.length === 0 ? (_jsxs(Text, { children: [_jsx(Text, { color: RUBIX_THEME.colors.brand, children: "^_^ " }), _jsx(Text, { dimColor: true, children: "no sessions yet \u00B7 /new to start" })] })) : (latest.map((session, i) => (_jsxs(Box, { flexDirection: "column", marginTop: i > 0 ? 1 : 0, children: [_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "\u25CB " }), _jsx(Text, { children: oneLine(session.title) ?? "Untitled session" })] }), _jsxs(Text, { dimColor: true, children: ["  ", relativeTime(session.updatedAt) || compactSessionId(session.id)] })] }, session.id))))] })] })] })] }) }));
 });

package/dist/ui/sprite-frames.js

@@ -0,0 +1,28 @@
+/** How long to hold the success glyph before transitioning to main UI. */
+export const SUCCESS_HOLD_MS = 1200;
+/** Per-frame hold times for booting — slower start, faster as it nears completion. */
+export const BOOT_FRAME_MS = [800, 800, 700, 600, 500];
+const S = {
+    // Boot: scanning/curious — not happy yet, just waking up and waiting
+    booting: { f: ["-_-", "o_.", "o_o", ".o_", "o_o"], i: 700, animated: true },
+    // Active states: animate — re-renders are already happening for streaming/running anyway
+    thinking: { f: ["o_O", "0_0", "o_o", "-_-"], i: 520, animated: true },
+    streaming: { f: ["O_o", "o_O", "O_O", "o_o"], i: 320, animated: true },
+    running: { f: [".  ", ".. ", "...", ".. ", ".  "], i: 400, animated: true },
+    // Idle states: static — no timer so no extra re-renders that would scroll the terminal
+    listening: { f: ["^_^"], i: 0, animated: false },
+    waiting: { f: ["-_-"], i: 0, animated: false },
+};
+export function getFramesForState(state) {
+    return S[state]?.f ?? S.listening.f;
+}
+export function getIntervalForState(state) {
+    return S[state]?.i ?? 0;
+}
+export function isAnimatedState(state) {
+    return S[state]?.animated ?? false;
+}
+/** Per-frame intervals for states that support easing (e.g. booting). Returns undefined for others. */
+export function getIntervalsForState(state) {
+    return state === "booting" ? BOOT_FRAME_MS : undefined;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rubixkube/rubix",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Chat with your infrastructure from the terminal. RubixKube CLI for Site Reliability Intelligence—predict, prevent, and fix failures with AI.",
   "type": "module",
   "bin": {