@rubixkube/rubix 0.0.2 → 0.0.4

package/dist/ui/components/BrandPanel.js

@@ -9,5 +9,5 @@ const LOGO_LINES = [
     "\\_| \\_\\__,_|_.__/|_/_/\\_\\_| |_|\\__,_.__/ \\___|",
 ];
 export function BrandPanel({ cwd, model, user }) {
-    return (_jsx(Box, { borderStyle: "round", borderColor: "yellow", paddingX: 1, paddingY: 0, marginBottom: 1, children: _jsxs(Box, { flexDirection: "row", width: "100%", children: [_jsxs(Box, { flexDirection: "column", width: 58, children: [LOGO_LINES.map((line, index) => (_jsx(Text, { color: index % 2 === 0 ? "cyan" : "magenta", children: line }, line))), _jsx(Text, { bold: true, color: "yellow", children: "RubixKube Agent CLI" }), _jsxs(Text, { dimColor: true, children: [model, "  •  ", user ? `logged in as ${user}` : "not logged in"] }), _jsx(Text, { dimColor: true, children: cwd })] }), _jsx(Box, { marginX: 1, children: _jsx(Text, { dimColor: true, children: "\u2502" }) }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Text, { color: "yellow", bold: true, children: "Tips for getting started" }), _jsx(Text, { dimColor: true, children: "1. Use /login to authenticate first." }), _jsx(Text, { dimColor: true, children: "2. Press / to open command search." }), _jsx(Text, { dimColor: true, children: "3. Use @ to mention files and ! for shell mode." }), _jsx(Box, { marginTop: 1 }), _jsx(Text, { color: "yellow", bold: true, children: "Recent activity" }), _jsx(Text, { dimColor: true, children: "No recent activity" })] })] }) }));
+    return (_jsx(Box, { borderStyle: "round", borderColor: "yellow", paddingX: 1, paddingY: 0, marginBottom: 1, children: _jsxs(Box, { flexDirection: "row", width: "100%", children: [_jsxs(Box, { flexDirection: "column", width: 58, children: [LOGO_LINES.map((line, index) => (_jsx(Text, { color: index % 2 === 0 ? "cyan" : "magenta", children: line }, line))), _jsx(Text, { bold: true, color: "yellow", children: "RubixKube Agent CLI" }), _jsxs(Text, { dimColor: true, children: [model, "  •  ", user ? `logged in as ${user}` : "not logged in"] }), _jsx(Text, { dimColor: true, children: cwd })] }), _jsx(Box, { marginX: 1, children: _jsx(Text, { dimColor: true, children: "\u2502" }) }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Text, { color: "yellow", bold: true, children: "Tips for getting started" }), _jsx(Text, { dimColor: true, children: "1. Use /login to authenticate first." }), _jsx(Text, { dimColor: true, children: "2. Press / to open command search." }), _jsx(Text, { dimColor: true, children: "3. Use @ to mention files and '! ' (exclamation + space) for shell mode." }), _jsx(Box, { marginTop: 1 }), _jsx(Text, { color: "yellow", bold: true, children: "Recent activity" }), _jsx(Text, { dimColor: true, children: "No recent activity" })] })] }) }));
 }

package/dist/ui/components/ChatTranscript.js

@@ -107,6 +107,36 @@ function buildTimelineRows(workflow, fullContent) {
         }
         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({
+                            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);
+                        }
+                        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)
@@ -123,33 +153,59 @@ function buildTimelineRows(workflow, fullContent) {
     return rows;
 }
 function buildWorkflowStats(workflow) {
-    const toolCalls = workflow.filter((e) => e.type === "function_call").length;
+    const toolCalls = workflow.filter((e) => e.type === "function_call" && !e.content.includes("create_ui_component")).length;
+    const thoughtCount = workflow.filter((e) => e.type === "thought").length;
     const withTs = workflow.filter((e) => e.ts != null && e.ts > 0);
     const durationSec = withTs.length >= 2
         ? Math.round((Math.max(...withTs.map((e) => e.ts)) - Math.min(...withTs.map((e) => e.ts))) / 1000)
         : null;
-    return { toolCalls, durationSec };
+    return { toolCalls, thoughtCount, durationSec };
+}
+/** System messages that are session metadata; shown in SessionBar instead. */
+function isSessionMetadata(content) {
+    const c = (content || "").trim();
+    return (/^Session\s+.+·.+messages?/i.test(c) ||
+        /^Switched to session\s+/i.test(c) ||
+        /^You're in\.\s+Session\s+/i.test(c) ||
+        /^Fresh thread\.\s+/i.test(c));
 }
 export const ChatTranscript = React.memo(function ChatTranscript({ messages, workflowViewMode = "detailed", }) {
     if (messages.length === 0) {
         return _jsx(Box, {});
     }
-    return (_jsx(Box, { flexDirection: "column", width: "100%", children: messages.map((message) => {
+    const cumulativeStatsByIndex = React.useMemo(() => {
+        const result = new Map();
+        let cumTools = 0;
+        let cumThoughts = 0;
+        let cumDuration = 0;
+        messages.forEach((m, idx) => {
+            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 });
+            }
+        });
+        return result;
+    }, [messages]);
+    return (_jsx(Box, { flexDirection: "column", width: "100%", children: messages.map((message, msgIndex) => {
             if (message.role === "user") {
                 const { mainMessage, contextParts } = parseContextParts(message.content || "");
                 const hasContext = contextParts.length > 0;
-                return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [mainMessage ? (_jsx(Box, { flexDirection: "column", children: mainMessage.split("\n").map((line, i) => (_jsxs(Text, { children: [_jsx(Text, { color: RUBIX_THEME.colors.brand, children: i === 0 ? "● " : "  " }), _jsx(Text, { color: RUBIX_THEME.colors.userText, children: line })] }, `${message.id}-main-${i}`))) })) : null, hasContext
-                            ? contextParts.map((ctx, i) => {
-                                const labelMatch = ctx.match(/^\[CONTEXT\]\s*\*\*([^*]+)\*\*/);
-                                const label = labelMatch ? labelMatch[1] : `Context ${i + 1}`;
-                                const preview = previewContext(ctx);
-                                return (_jsxs(Text, { dimColor: true, children: ["  ", _jsx(Text, { color: RUBIX_THEME.colors.brand, children: "\u25CB" }), " ", label, " \u2014 ", preview] }, `${message.id}-ctx-${i}`));
-                            })
-                            : null] }, message.id));
+                return (_jsx(Box, { flexDirection: "column", marginTop: 1, children: _jsxs(Box, { flexDirection: "column", backgroundColor: RUBIX_THEME.colors.userBlockBg, paddingX: 1, paddingY: 1, children: [mainMessage ? (_jsx(Box, { flexDirection: "column", children: mainMessage.split("\n").map((line, i) => (_jsxs(Text, { children: [_jsx(Text, { color: RUBIX_THEME.colors.userPrompt, children: i === 0 ? "❯ " : "  " }), _jsx(Text, { color: RUBIX_THEME.colors.userText, children: line })] }, `${message.id}-main-${i}`))) })) : null, hasContext
+                                ? contextParts.map((ctx, i) => {
+                                    const labelMatch = ctx.match(/^\[CONTEXT\]\s*\*\*([^*]+)\*\*/);
+                                    const label = labelMatch ? labelMatch[1] : `Context ${i + 1}`;
+                                    const preview = previewContext(ctx);
+                                    return (_jsxs(Text, { dimColor: true, children: ["  ", _jsx(Text, { color: RUBIX_THEME.colors.userPrompt, children: "\u25CB" }), " ", label, " \u2014 ", preview] }, `${message.id}-ctx-${i}`));
+                                })
+                                : null] }) }, message.id));
             }
             if (message.role === "assistant") {
                 const workflow = message.workflow ?? [];
                 const stats = buildWorkflowStats(workflow);
+                const cumStats = cumulativeStatsByIndex.get(msgIndex);
                 const isDetailed = workflowViewMode === "detailed";
                 const timelineRows = buildTimelineRows(workflow, isDetailed);
                 const rawContent = message.content || "";
@@ -158,21 +214,51 @@ export const ChatTranscript = React.memo(function ChatTranscript({ messages, wor
                 const hasNonEmptyContent = rawContent.trim().length > 0;
                 const isStreaming = message.isAccumulating === true;
                 const hasWorkflow = workflow.length > 0;
-                // Build mixed timeline: interleave workflow events with text response
                 const renderMixedView = () => {
-                    // Show timeline during streaming if workflow exists, or after streaming in detailed mode
                     const shouldShowTimeline = (isStreaming && hasWorkflow) || (!isStreaming && isDetailed && hasWorkflow);
-                    if (shouldShowTimeline) {
-                        return (_jsxs(Box, { flexDirection: "column", children: [timelineRows.map((row) => {
-                                    const lines = row.content.split("\n");
-                                    return (_jsx(Box, { flexDirection: "column", 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));
-                                }), hasNonEmptyContent ? (_jsx(Box, { flexDirection: "column", children: contentLines.map((line, index) => (_jsxs(Text, { children: [_jsx(Text, { color: RUBIX_THEME.colors.assistantText, children: index === 0 ? "  ● " : "    " }), line.length > 0 ? line : " "] }, `${message.id}-text-${index}`))) })) : null, !isStreaming && (_jsxs(Text, { dimColor: true, children: ["  \u00B7\u00B7\u00B7 ", stats.toolCalls, " tool call", stats.toolCalls !== 1 ? "s" : "", stats.durationSec != null ? ` · ${stats.durationSec}s` : "", " (Ctrl+O to collapse)"] }))] }));
-                    }
-                    // Minimal view: text + summary stat
-                    return (_jsxs(Box, { flexDirection: "column", children: [hasNonEmptyContent ? (_jsx(_Fragment, { children: contentLines.map((line, index) => (_jsxs(Text, { children: [_jsx(Text, { color: RUBIX_THEME.colors.assistantText, children: index === 0 ? "● " : "  " }), line.length > 0 ? line : " "] }, `${message.id}-${index}`))) })) : null, hasWorkflow ? (_jsxs(Text, { dimColor: true, children: ["  ", stats.toolCalls > 0 && `${stats.toolCalls} tool call${stats.toolCalls !== 1 ? "s" : ""}`, stats.toolCalls > 0 && stats.durationSec != null && " · ", stats.durationSec != null && `${stats.durationSec}s`, hasWorkflow && " · Ctrl+O for timeline"] })) : null] }));
+                    const hasCollapsibleItems = stats.toolCalls > 0 || stats.thoughtCount > 0;
+                    const renderSummaryFooter = () => {
+                        if (isStreaming || !hasCollapsibleItems)
+                            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" : ""}`);
+                        if (c.thoughtCount > 0)
+                            parts.push(`${c.thoughtCount} thought${c.thoughtCount !== 1 ? "s" : ""}`);
+                        const summaryText = parts.join(", ");
+                        const timeText = c.durationSec > 0 ? ` · ${c.durationSec}s` : "";
+                        return (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["  ··· ", summaryText, timeText, " ", isDetailed ? "(Ctrl+O to collapse)" : "(Ctrl+O for timeline)"] }) }));
+                    };
+                    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}`));
+                        }
+                        if (!shouldShowTimeline && row.label !== "thought" && row.label !== "tool call" && row.label !== "tool error") {
+                            return null;
+                        }
+                        const lines = row.content.split("\n");
+                        const firstLine = lines[0] || "";
+                        if (!shouldShowTimeline) {
+                            const displayTitle = row.label === "tool call"
+                                ? `${row.label}: ${firstLine}()`
+                                : 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));
+                    };
+                    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()] }));
                 };
-                return (_jsx(Box, { flexDirection: "column", marginBottom: 0, children: renderMixedView() }, message.id));
+                // Consistent gap between user and agent turn for both streaming and history
+                const gapAfterUser = 1;
+                return (_jsx(Box, { flexDirection: "column", marginTop: gapAfterUser, marginBottom: 0, children: renderMixedView() }, message.id));
             }
+            if (isSessionMetadata(message.content || ""))
+                return null;
             const isError = /error|failed|timed out|unable/i.test(message.content);
             return (_jsxs(Text, { color: isError ? "red" : undefined, dimColor: !isError, children: [isError ? "! " : "", message.content || ""] }, message.id));
         }) }));

package/dist/ui/components/Composer.js

@@ -6,33 +6,92 @@ import { MultilineInput } from "ink-multiline-input";
 import { RUBIX_THEME } from "../theme.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, 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;
-    // Buffer value locally so MultilineInput always receives the latest on fast typing.
-    // Parent state updates can lag; without this, MultilineInput's closure uses stale value
-    // and drops characters (e.g. "different" -> "diffrnt").
-    const [bufferedValue, setBufferedValue] = useState(value);
+    // ── Fast-typing fix ──────────────────────────────────────────────────────
+    // `MultilineInput` reads `value` *inside* its input handler closure.
+    // When typing quickly, React hasn't re-rendered yet, so the next character
+    // is inserted into the previous (stale) value — dropping characters.
+    //
+    // We keep `latestValueRef` synchronously up-to-date on every onChange so
+    // the effective value fed to `MultilineInput` on re-render is always fresh.
+    const latestValueRef = React.useRef(value);
     const lastResetTokenRef = React.useRef(resetToken);
-    const effectiveValue = resetToken !== lastResetTokenRef.current ? value : bufferedValue;
+    const [bufferedValue, setBufferedValue] = useState(value);
+    // On external reset (e.g. submit) propagate down.
     useEffect(() => {
         if (resetToken !== lastResetTokenRef.current) {
             lastResetTokenRef.current = resetToken;
+            latestValueRef.current = value;
             setBufferedValue(value);
         }
     }, [value, resetToken]);
+    const effectiveValue = resetToken !== lastResetTokenRef.current ? value : bufferedValue;
     const handleChange = (newValue) => {
+        latestValueRef.current = newValue;
         setBufferedValue(newValue);
         onChange(newValue);
     };
+    // Ref that always holds the latest buffered value so the paste handler below
+    // can append to it without a stale closure.
+    const bufferedValueRef = React.useRef(bufferedValue);
+    bufferedValueRef.current = bufferedValue;
+    // Accumulates paste content while between [200~ and [201~ markers.
+    // null = not currently in a paste; string = accumulating paste.
+    const pasteBufferRef = React.useRef(null);
     const useFilteredInput = useCallback((handler, isActive) => useInput((input, key) => {
         if (key.ctrl && GLOBAL_CTRL_KEYS.includes((input ?? "").toLowerCase()))
             return;
         if (captureArrowKeys && (key.upArrow || key.downArrow))
             return;
+        // ── Bracketed Paste Mode (primary path) ─────────────────────────────
+        // Terminal BPM wraps pastes in \x1b[200~...\x1b[201~.
+        // Ink's key parser consumes the leading \x1b and delivers the rest as
+        // bare input strings: "[200~" and "[201~".
+        if (input === "[200~") {
+            pasteBufferRef.current = ""; // start accumulating
+            return;
+        }
+        if (input === "[201~") {
+            const pasted = pasteBufferRef.current;
+            pasteBufferRef.current = null;
+            if (pasted !== null && pasted.length > 0) {
+                const normalised = pasted.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+                const next = bufferedValueRef.current + normalised;
+                setBufferedValue(next);
+                onChange(next);
+            }
+            return;
+        }
+        // While accumulating a bracketed paste, absorb all input here so
+        // nothing reaches MultilineInput (which fires onSubmit on every \n).
+        if (pasteBufferRef.current !== null) {
+            if (key.return) {
+                pasteBufferRef.current += "\n";
+            }
+            else if (typeof input === "string" && input.length > 0) {
+                pasteBufferRef.current += input;
+            }
+            return;
+        }
+        // ────────────────────────────────────────────────────────────────────
+        // ── Fallback: heuristic for terminals without BPM ───────────────────
+        // A real Enter key arrives with key.return===true and input="" / "\r".
+        // A pasted chunk is a longer string that contains "\n".
+        if (typeof input === "string" && input.includes("\n") && input.length > 1) {
+            const normalised = input.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+            const next = bufferedValueRef.current + normalised;
+            setBufferedValue(next);
+            onChange(next);
+            return;
+        }
+        // ────────────────────────────────────────────────────────────────────
         handler(input, key);
-    }, { isActive }), [captureArrowKeys]);
-    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.assistantText, 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: {
+    }, { 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 })] })] })] }));

package/dist/ui/components/DashboardPanel.js

@@ -2,6 +2,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { Box, Text } from "ink";
 import { compactSessionId, RUBIX_THEME } from "../theme.js";
+import { VERSION } from "../../version.js";
 function displayName(user) {
     const normalized = (user ?? "").trim();
     if (!normalized)
@@ -44,20 +45,42 @@ function oneLine(input, max = 40) {
     return value.length <= max ? value : `${value.slice(0, max - 3)}...`;
 }
 const SUGGESTIONS = [
-    "check cluster health",
+    "what's the current state of my environment?",
+    "any critical issues right now?",
     "run a security audit",
-    "inspect performance metrics",
-    "debug active issues",
+    "debug active insights",
 ];
 const NAV_TIPS = [
-    { cmd: "/sessions", desc: "reopen a thread" },
-    { cmd: "/new", desc: "start fresh" },
-    { cmd: "/cluster", desc: "switch cluster" },
+    { cmd: "/resume", desc: "resume a thread" },
+    { cmd: "/environments", desc: "switch environment" },
     { cmd: "?", desc: "show shortcuts" },
 ];
-export const DashboardPanel = React.memo(function DashboardPanel({ user, agentName, cwd, recentSessions, selectedCluster }) {
+function statsLine(stats) {
+    const parts = [];
+    if (stats.activeInsights > 0) {
+        parts.push(`${stats.activeInsights} active insight${stats.activeInsights !== 1 ? "s" : ""}`);
+    }
+    else {
+        parts.push("0 active insights");
+    }
+    if (stats.rcaReports > 0) {
+        parts.push(`${stats.rcaReports} RCA${stats.rcaReports !== 1 ? "s" : ""} completed`);
+    }
+    if (stats.resolvedInsights > 0) {
+        parts.push(`${stats.resolvedInsights} resolved`);
+    }
+    if (stats.lastUpdated) {
+        parts.push(`updated ${relativeTime(stats.lastUpdated)}`);
+    }
+    return parts.join(" · ");
+}
+export const DashboardPanel = React.memo(function DashboardPanel({ user, agentName, cwd, recentSessions, selectedEnvironment, stats, }) {
     const greetingName = displayName(user);
     const workspace = compactWorkspace(cwd);
-    const latest = recentSessions.slice(0, 2);
-    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: [_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { bold: true, children: ["Hello, ", greetingName] }), _jsx(Text, { dimColor: true, children: "Welcome to Site Reliability Intelligence" })] }), _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: [_jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { color: RUBIX_THEME.colors.brand, bold: true, children: "\u25C8" }), _jsx(Text, { color: RUBIX_THEME.colors.assistantText, bold: true, children: agentName })] }), selectedCluster ? (_jsxs(Box, { flexDirection: "row", gap: 1, marginTop: 1, children: [_jsx(Text, { color: RUBIX_THEME.colors.brand, children: selectedCluster.name }), _jsx(Text, { color: RUBIX_THEME.colors.border, children: "\u00B7" }), _jsx(Text, { dimColor: true, children: selectedCluster.status }), _jsx(Text, { color: RUBIX_THEME.colors.border, children: "\u00B7" }), _jsx(Text, { dimColor: true, children: "/cluster to switch" })] })) : (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "no cluster \u00B7 /cluster to select" }) })), workspace ? (_jsx(Box, { marginTop: 1, 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(11) }), _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))))] })] })] })] }) }));
+    const latest = [...recentSessions]
+        .sort((a, b) => new Date(b.updatedAt ?? 0).getTime() - new Date(a.updatedAt ?? 0).getTime())
+        .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))))] })] })] })] }) }));
 });

package/dist/ui/components/SplashScreen.js

@@ -7,17 +7,11 @@ import { Select } from "@inkjs/ui";
 import { RUBIX_THEME } from "../theme.js";
 import { VERSION } from "../../version.js";
 const GRAD_BLUE = ["#4ea8ff", "#7f88ff"];
-const WHATS_NEW = [
-    "Multi-cluster support with /cluster",
-    "Session history with auto-resume",
-    "Streaming workflow event tracing",
-    "/console opens the web dashboard",
-];
 const SPLASH_OPTIONS = [
     { label: "Login to RubixKube", value: "login" },
     { label: "Exit", value: "exit" },
 ];
-export const SplashScreen = React.memo(function SplashScreen({ agentName, onActionSelect, selectDisabled = false, }) {
+export const SplashScreen = React.memo(function SplashScreen({ agentName, whatsNew, onActionSelect, selectDisabled = false, }) {
     const handleChange = useCallback((value) => onActionSelect(value), [onActionSelect]);
-    return (_jsx(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: _jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: RUBIX_THEME.colors.brand, paddingX: 2, paddingY: 1, children: [_jsx(Box, { flexDirection: "column", children: _jsx(Gradient, { colors: GRAD_BLUE, children: _jsx(BigText, { text: "RUBIXKUBE", font: "block" }) }) }), _jsx(Box, { flexDirection: "row", marginTop: 1, children: _jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { dimColor: true, children: agentName }), _jsx(Text, { color: RUBIX_THEME.colors.border, children: "\u00B7" }), _jsx(Text, { dimColor: true, children: "Site Reliability Intelligence" })] }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: RUBIX_THEME.colors.border, dimColor: true, children: "─".repeat(64) }) }), _jsxs(Box, { flexDirection: "row", marginTop: 1, children: [_jsxs(Box, { flexDirection: "column", width: 38, children: [_jsxs(Text, { color: RUBIX_THEME.colors.brand, bold: true, children: ["What's New \u00B7 v", VERSION] }), WHATS_NEW.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: 6 }).map((_, i) => (_jsx(Text, { color: RUBIX_THEME.colors.border, children: "\u2502" }, i))) }), _jsxs(Box, { flexGrow: 1, flexDirection: "column", children: [_jsx(Text, { color: RUBIX_THEME.colors.brand, bold: true, children: "Setup" }), _jsx(Text, { dimColor: true, children: "1. Choose Login below or type /login." }), _jsx(Text, { dimColor: true, children: "2. Open the verification URL." }), _jsx(Text, { dimColor: true, children: "3. Enter the shown device code." }), _jsx(Box, { marginTop: 1 }), _jsx(Text, { color: RUBIX_THEME.colors.brand, bold: true, children: "Prompt" }), _jsx(Text, { dimColor: true, children: "/  commands  \u00B7  @  files  \u00B7  !  shell" })] })] }), _jsxs(Box, { marginTop: 2, flexDirection: "column", children: [_jsx(Text, { color: RUBIX_THEME.colors.brand, bold: true, children: "What would you like to do?" }), _jsx(Box, { marginTop: 1, children: _jsx(Select, { options: SPLASH_OPTIONS, visibleOptionCount: 2, isDisabled: selectDisabled, onChange: handleChange }) })] })] }) }));
+    return (_jsx(Box, { flexDirection: "column", paddingX: 2, paddingY: 1, children: _jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: RUBIX_THEME.colors.brand, paddingX: 2, paddingY: 1, children: [_jsx(Box, { flexDirection: "column", children: _jsx(Gradient, { colors: GRAD_BLUE, children: _jsx(BigText, { text: "RUBIXKUBE", font: "block" }) }) }), _jsx(Box, { flexDirection: "row", marginTop: 1, children: _jsxs(Box, { flexDirection: "row", gap: 1, children: [_jsx(Text, { dimColor: true, children: agentName }), _jsx(Text, { color: RUBIX_THEME.colors.border, children: "\u00B7" }), _jsx(Text, { dimColor: true, children: "Site Reliability Intelligence" })] }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: RUBIX_THEME.colors.border, dimColor: true, children: "─".repeat(64) }) }), _jsxs(Box, { flexDirection: "row", marginTop: 1, children: [whatsNew.length > 0 && (_jsxs(Box, { flexDirection: "column", width: 38, children: [_jsxs(Text, { color: RUBIX_THEME.colors.brand, bold: true, children: ["What's New \u00B7 v", VERSION] }), whatsNew.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: 6 }).map((_, i) => (_jsx(Text, { color: RUBIX_THEME.colors.border, children: "\u2502" }, i))) }), _jsxs(Box, { flexGrow: 1, flexDirection: "column", children: [_jsx(Text, { color: RUBIX_THEME.colors.brand, bold: true, children: "Setup" }), _jsx(Text, { dimColor: true, children: "1. Choose Login below or type /login." }), _jsx(Text, { dimColor: true, children: "2. Open the verification URL." }), _jsx(Text, { dimColor: true, children: "3. Enter the shown device code." }), _jsx(Box, { marginTop: 1 }), _jsx(Text, { color: RUBIX_THEME.colors.brand, bold: true, children: "Prompt" }), _jsx(Text, { dimColor: true, children: "/  commands  \u00B7  @  files  \u00B7  !  shell" })] })] }), _jsxs(Box, { marginTop: 2, flexDirection: "column", children: [_jsx(Text, { color: RUBIX_THEME.colors.brand, bold: true, children: "What would you like to do?" }), _jsx(Box, { marginTop: 1, children: _jsx(Select, { options: SPLASH_OPTIONS, visibleOptionCount: 2, isDisabled: selectDisabled, onChange: handleChange }) })] })] }) }));
 });

package/dist/ui/hooks/useBracketedPaste.js

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+/**
+ * useBracketedPaste
+ *
+ * Enables / disables terminal Bracketed Paste Mode (BPM).
+ * When BPM is active the terminal wraps every CMD+V paste in
+ * the escape sequences \x1b[200~ ... \x1b[201~, which Composer
+ * detects inside `useFilteredInput` to accumulate the full paste
+ * block before delivering it to the input value.
+ *
+ * This hook only handles the terminal toggle — all accumulation
+ * logic lives in Composer.tsx so there is a single stdin consumer.
+ */
+export function useBracketedPaste() {
+    useEffect(() => {
+        if (!process.stdout.isTTY)
+            return;
+        // Enable bracketed paste mode.
+        process.stdout.write("\x1b[?2004h");
+        return () => {
+            if (process.stdout.isTTY) {
+                // Disable bracketed paste mode on cleanup.
+                process.stdout.write("\x1b[?2004l");
+            }
+        };
+    }, []);
+}

package/dist/ui/theme.js

@@ -2,7 +2,9 @@ export const RUBIX_THEME = {
     colors: {
         brand: "#5b8def",
         border: "#4a5568",
-        userText: "#a0aec0",
+        userPrompt: "#5b8def", // Blue for user > prefix
+        userText: "#e2e8f0", // Light text for user body
+        userBlockBg: "#1a2942", // Subtle blue-tinted bg for user turn (Claude-style)
         assistantText: "#e2e8f0",
         thought: "#ff9f6b",
         tool: "#63b3ed",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rubixkube/rubix",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Chat with your infrastructure from the terminal. RubixKube CLI for Site Reliability Intelligence—predict, prevent, and fix failures with AI.",
   "type": "module",
   "bin": {
@@ -9,7 +9,9 @@
   "files": [
     "dist",
     "patches",
-    "README.md"
+    "CHANGELOG.md",
+    "README.md",
+    "LICENSE"
   ],
   "scripts": {
     "postinstall": "patch-package",
@@ -33,7 +35,7 @@
     "mttr",
     "ai-agent"
   ],
-  "license": "MIT",
+  "license": "SEE LICENSE IN LICENSE",
   "repository": {
     "type": "git",
     "url": "https://github.com/rubixkube-io/rubix-cli"
@@ -65,4 +67,4 @@
     "url": "https://github.com/rubixkube-io/rubix-cli/issues"
   },
   "author": "RubixKube <connect@rubixkube.ai>"
-}
+}