@rubixkube/rubix 0.0.5 → 0.0.6

package/dist/ui/App.js

@@ -5,6 +5,7 @@ import path from "node:path";
 import { exec, execSync, spawn } from "child_process";
 import { Box, Text, useApp, useInput } from "ink";
 import { Select, Spinner, StatusMessage } from "@inkjs/ui";
+import { addWorkflowEvent, mergeOlderSegments, replaceLastThought, updateStreamingText } from "../core/segments.js";
 import { clearAuthConfig, loadAuthConfig, saveAuthConfig } from "../core/auth-store.js";
 import { authenticateWithDeviceFlow, isTokenNearExpiry } from "../core/device-auth.js";
 import { isFolderTrusted, trustFolder, untrustFolder } from "../core/trust-store.js";
@@ -15,11 +16,13 @@ import { checkForUpdate } from "../core/update-check.js";
 import { VERSION } from "../version.js";
 import { createSession, fetchChatHistory, fetchSystemStats, firstHealthyEnvironment, getOrCreateSession, listEnvironments, listModels, listSessions, listApps, refreshAndUpdateAuth, streamChat, StreamError, updateSessionState, } from "../core/rubix-api.js";
 import { readFileContext, fetchUrlContext, formatContextBlock, } from "../core/file-context.js";
+import { AnimatedGlyph } from "./components/AnimatedGlyph.js";
 import { ChatTranscript } from "./components/ChatTranscript.js";
 import { Composer } from "./components/Composer.js";
 import { DashboardPanel } from "./components/DashboardPanel.js";
 import { SplashScreen } from "./components/SplashScreen.js";
 import { TrustDisclaimer } from "./components/TrustDisclaimer.js";
+import { getFramesForState, getIntervalForState, getIntervalsForState, SUCCESS_HOLD_MS } from "./sprite-frames.js";
 import { getConfig } from "../config/env.js";
 import { compactSessionId, RUBIX_THEME } from "./theme.js";
 import { useBracketedPaste } from "./hooks/useBracketedPaste.js";
@@ -31,6 +34,7 @@ const SLASH_COMMANDS = [
     { name: "/resume", description: "Resume a previous conversation" },
     { name: "/new", description: "Start a fresh conversation" },
     { name: "/environments", description: "Switch active environment" },
+    { name: "/refresh", description: "Refresh environments and dashboard stats" },
     { name: "/models", description: "Switch AI model for this session" },
     { name: "/agents", description: "Switch agent (app) for new sessions" },
     { name: "/paste", description: "Insert clipboard content (avoids terminal paste truncation)" },
@@ -54,13 +58,15 @@ const SHORTCUT_ROWS = [
     { key: "Ctrl+D", action: "exit when composer empty" },
     { key: "Ctrl+O", action: "toggle full workflow on last response" },
     { key: "Ctrl+A / Ctrl+E", action: "cursor to start / end of line" },
-    { key: "Ctrl+K / Ctrl+U", action: "kill to end / start of line" },
+    { key: "Ctrl+K", action: "kill to end of line" },
+    { key: "Ctrl+U", action: "load older messages (when composer empty)" },
     { key: "?", action: "toggle shortcuts" },
     { key: "Ctrl+X then H/C/Q", action: "help / clear / quit" },
 ];
 const SESSION_PAGE_SIZE = 100;
 const SESSION_MAX_PAGES = 10;
-const STREAM_THROTTLE_MS = 80;
+const STREAM_THROTTLE_MS = 400;
+const DASHBOARD_REFRESH_MS = 120000;
 const GOODBYE_MESSAGES = [
     "◈ Watching.",
     "◈ Rubix continues monitoring in the cloud.",
@@ -214,6 +220,8 @@ export function App({ initialSessionId, seedPrompt }) {
     const [isStreaming, setIsStreaming] = useState(false);
     const [isAuthLoading, setIsAuthLoading] = useState(true);
     const [isAuthenticated, setIsAuthenticated] = useState(false);
+    // "loading" → "success" (brief happy flash) → "done" (real UI appears)
+    const [bootPhase, setBootPhase] = useState("loading");
     const [folderTrustCheckComplete, setFolderTrustCheckComplete] = useState(false);
     const [isFolderTrustedStatus, setIsFolderTrustedStatus] = useState(false);
     const [showTrustDisclaimer, setShowTrustDisclaimer] = useState(false);
@@ -235,6 +243,10 @@ export function App({ initialSessionId, seedPrompt }) {
     const [escClearArmed, setEscClearArmed] = useState(false);
     const [ctrlCArmed, setCtrlCArmed] = useState(false);
     const [messages, setMessages] = useState([]);
+    const [hasMoreHistory, setHasMoreHistory] = useState(false);
+    const [historyOffset, setHistoryOffset] = useState(0);
+    const [isLoadingOlderHistory, setIsLoadingOlderHistory] = useState(false);
+    const [historyPageSize, setHistoryPageSize] = useState(20);
     const [recentActivity, setRecentActivity] = useState([]);
     const [environments, setEnvironments] = useState([]);
     const [selectedEnvironment, setSelectedEnvironment] = useState(null);
@@ -288,6 +300,18 @@ export function App({ initialSessionId, seedPrompt }) {
             // Non-critical — swallow errors silently so UI is never blocked.
         }
     }, []);
+    // When auth loading finishes: flash a happy sprite for ~700ms if authenticated, then reveal the UI.
+    // If not authenticated, skip the flash and go straight to done (splash screen handles it).
+    useEffect(() => {
+        if (isAuthLoading)
+            return;
+        if (isAuthenticated) {
+            setBootPhase("success");
+            const t = setTimeout(() => setBootPhase("done"), SUCCESS_HOLD_MS);
+            return () => clearTimeout(t);
+        }
+        setBootPhase("done");
+    }, [isAuthLoading, isAuthenticated]);
     useEffect(() => {
         loadSettings()
             .then((cfg) => {
@@ -296,6 +320,8 @@ export function App({ initialSessionId, seedPrompt }) {
                 setWorkflowViewMode(cfg.workflowViewMode);
             if (cfg.agentId)
                 setCurrentAgent(cfg.agentId);
+            if (cfg.historyPageSize)
+                setHistoryPageSize(Math.min(Math.max(cfg.historyPageSize, 1), 500));
             // model and environment will be applied after their lists are fetched
             // Check for updates
             checkForUpdate(VERSION, cfg.lastUpdateCheck)
@@ -713,15 +739,19 @@ export function App({ initialSessionId, seedPrompt }) {
         setSessionId(selected.id);
         setSessionTitle(selected.title ?? null);
         setMessages([]);
+        setHasMoreHistory(false);
+        setHistoryOffset(0);
         setShowSessionsPanel(false);
         setSessionsSearchQuery("");
         setSessionsSelectedIndex(0);
         setLastError(null);
         setStatus("loading history");
         if (authConfig) {
-            fetchChatHistory(authConfig, selected.id)
-                .then((history) => {
+            fetchChatHistory(authConfig, selected.id, historyPageSize, selected.appName)
+                .then(({ messages: history, hasMore }) => {
                 setMessages(history.length > 0 ? history : []);
+                setHistoryOffset(historyPageSize);
+                setHasMoreHistory(hasMore);
                 setStatus("ready");
             })
                 .catch((err) => {
@@ -733,6 +763,47 @@ export function App({ initialSessionId, seedPrompt }) {
             setStatus("ready");
         }
     }, [addSystemMessage, authConfig, sessionItems]);
+    const loadOlderMessages = useCallback(async () => {
+        if (!authConfig || !sessionId || !hasMoreHistory || isLoadingOlderHistory)
+            return;
+        const selected = sessionItems.find((s) => s.id === sessionId);
+        const appName = selected?.appName ?? currentAgent;
+        setIsLoadingOlderHistory(true);
+        try {
+            const { messages: older, hasMore } = await fetchChatHistory(authConfig, sessionId, historyPageSize, appName, historyOffset);
+            if (older.length > 0) {
+                setMessages((prev) => {
+                    const existingById = new Map(prev.map((m) => [m.id, m]));
+                    // Messages that don't exist yet → prepend as new
+                    const newMsgs = [];
+                    for (const msg of older) {
+                        const existing = existingById.get(msg.id);
+                        if (existing) {
+                            // Same invocation spans a batch boundary — older items go first
+                            existingById.set(msg.id, {
+                                ...existing,
+                                content: existing.content || msg.content,
+                                workflow: [...(msg.workflow ?? []), ...(existing.workflow ?? [])],
+                                segments: mergeOlderSegments(existing.segments, msg.segments),
+                            });
+                        }
+                        else {
+                            newMsgs.push(msg);
+                        }
+                    }
+                    return [...newMsgs, ...prev.map((m) => existingById.get(m.id) ?? m)];
+                });
+                setHistoryOffset((o) => o + historyPageSize);
+            }
+            setHasMoreHistory(hasMore);
+        }
+        catch (err) {
+            addSystemMessage(`Could not load older messages: ${err instanceof Error ? err.message : String(err)}`);
+        }
+        finally {
+            setIsLoadingOlderHistory(false);
+        }
+    }, [authConfig, sessionId, hasMoreHistory, isLoadingOlderHistory, historyOffset, historyPageSize, sessionItems, currentAgent, addSystemMessage]);
     useEffect(() => {
         let cancelled = false;
         const loadAuth = async () => {
@@ -855,6 +926,46 @@ export function App({ initialSessionId, seedPrompt }) {
             .catch(() => { });
         return () => { cancelled = true; };
     }, [authConfig, isAuthenticated, showDashboard, showTrustDisclaimer, messages.length]);
+    const refreshDashboardData = useCallback(async (options) => {
+        if (!authConfig || !isAuthenticated) {
+            if (!options?.silent)
+                addSystemMessage("Not logged in. /login to connect.");
+            return;
+        }
+        if (!options?.silent)
+            addSystemMessage("Refreshing environments and stats...");
+        const envList = await listEnvironments(authConfig).catch((err) => {
+            if (!options?.silent) {
+                addSystemMessage(`Could not load environments: ${err instanceof Error ? err.message : String(err)}`);
+            }
+            return null;
+        });
+        if (envList) {
+            const firstEnv = firstHealthyEnvironment(envList);
+            const nextSelected = selectedEnvironment?.environment_id
+                ? envList.find((c) => c.environment_id === selectedEnvironment.environment_id) ?? firstEnv
+                : firstEnv;
+            setEnvironments(envList);
+            setSelectedEnvironment(nextSelected);
+        }
+        const stats = await fetchSystemStats(authConfig);
+        if (stats) {
+            setSystemStats(stats);
+        }
+        else if (!options?.silent) {
+            addSystemMessage("Could not refresh dashboard stats right now.");
+        }
+    }, [authConfig, isAuthenticated, addSystemMessage, selectedEnvironment?.environment_id]);
+    useEffect(() => {
+        if (!authConfig || !isAuthenticated || showTrustDisclaimer)
+            return;
+        const id = setInterval(() => {
+            void refreshDashboardData({ silent: true });
+        }, DASHBOARD_REFRESH_MS);
+        return () => {
+            clearInterval(id);
+        };
+    }, [authConfig, isAuthenticated, showTrustDisclaimer, refreshDashboardData]);
     // Check folder trust status after authentication
     useEffect(() => {
         if (!isAuthenticated || folderTrustCheckComplete)
@@ -1052,6 +1163,10 @@ export function App({ initialSessionId, seedPrompt }) {
                 await openEnvironmentPanel();
                 return;
             }
+            case "/refresh": {
+                await refreshDashboardData();
+                return;
+            }
             case "/models": {
                 addSystemMessage("Loading models...");
                 await openModelPanel();
@@ -1184,6 +1299,7 @@ export function App({ initialSessionId, seedPrompt }) {
         openModelPanel,
         currentAgent,
         currentSessionModel,
+        refreshDashboardData,
         selectedEnvironment,
         recordActivity,
         resetComposer,
@@ -1227,14 +1343,37 @@ export function App({ initialSessionId, seedPrompt }) {
         streamController.current = controller;
         const throttle = { pending: "", timer: null };
         streamThrottleRef.current = throttle;
+        // Workflow events are batched separately so they don't each trigger an immediate redraw.
+        // pendingWorkflowEvents accumulates events; a shared timer flushes them together.
+        const pendingWorkflowEvents = { pending: "", timer: null, events: [] };
+        // Tracks where the current text segment starts within the full accumulated text string.
+        // Reset to 0 at stream start; updated each time a workflow event arrives so the text
+        // that follows is stored as a new segment.
+        let segmentTextStart = 0;
+        const flushWorkflow = () => {
+            pendingWorkflowEvents.timer = null;
+            const updaters = [...pendingWorkflowEvents.events];
+            pendingWorkflowEvents.events = [];
+            if (updaters.length === 0)
+                return;
+            // Apply all accumulated workflow updaters in a single setState call
+            updateAssistantMessage(assistantId, (message) => {
+                let m = message;
+                for (const fn of updaters)
+                    m = fn(m);
+                return m;
+            });
+        };
         const throttledOnText = (text) => {
             throttle.pending = text;
             if (!throttle.timer) {
                 throttle.timer = setTimeout(() => {
                     throttle.timer = null;
+                    const start = segmentTextStart;
                     updateAssistantMessage(assistantId, (message) => ({
                         ...message,
                         content: throttle.pending,
+                        segments: updateStreamingText(message.segments ?? [], throttle.pending, start),
                         isAccumulating: true,
                     }));
                 }, STREAM_THROTTLE_MS);
@@ -1268,36 +1407,50 @@ export function App({ initialSessionId, seedPrompt }) {
                         return;
                     sawWorkflowEvent = true;
                     workflowSeen.add(signature);
-                    updateAssistantMessage(assistantId, (message) => ({
-                        ...message,
-                        workflow: (() => {
-                            const existing = [...(message.workflow ?? [])];
-                            const last = existing[existing.length - 1];
-                            if (event.type === "thought") {
-                                if (last?.type === "thought") {
-                                    const incoming = event.content.trim();
-                                    const previous = last.content.trim();
-                                    const isPartial = event.details?.partial === true;
-                                    if (incoming.length > 0 &&
-                                        (isPartial || incoming.startsWith(previous) || previous.startsWith(incoming))) {
-                                        existing[existing.length - 1] = {
-                                            ...last,
-                                            content: incoming.length >= previous.length ? incoming : previous,
-                                            ts: event.ts,
-                                            details: { ...(last.details ?? {}), ...(event.details ?? {}) },
-                                        };
-                                        return existing;
-                                    }
-                                    if (incoming === previous) {
-                                        return existing;
-                                    }
-                                }
+                    // Text arriving after this workflow event starts a new segment.
+                    segmentTextStart = throttle.pending.length;
+                    pendingWorkflowEvents.events.push((message) => {
+                        const existing = [...(message.workflow ?? [])];
+                        const last = existing[existing.length - 1];
+                        const incomingTrim = event.content.trim();
+                        // Exact duplicate — skip
+                        if (last && last.type === event.type && (last.content ?? "").trim() === incomingTrim) {
+                            return message;
+                        }
+                        // Streaming thought update: extend rather than duplicate
+                        if (event.type === "thought" && last?.type === "thought") {
+                            const incoming = event.content.trim();
+                            const previous = last.content.trim();
+                            const isPartial = event.details?.partial === true;
+                            if (incoming.length > 0 && (isPartial || incoming.startsWith(previous) || previous.startsWith(incoming))) {
+                                const merged = {
+                                    ...last,
+                                    content: incoming.length >= previous.length ? incoming : previous,
+                                    ts: event.ts,
+                                    details: { ...(last.details ?? {}), ...(event.details ?? {}) },
+                                };
+                                existing[existing.length - 1] = merged;
+                                return {
+                                    ...message,
+                                    workflow: existing,
+                                    segments: replaceLastThought(message.segments ?? [], merged),
+                                    isAccumulating: true,
+                                };
                             }
-                            existing.push(event);
-                            return existing;
-                        })(),
-                        isAccumulating: true,
-                    }));
+                            if (incoming === previous)
+                                return message;
+                        }
+                        existing.push(event);
+                        return {
+                            ...message,
+                            workflow: existing,
+                            segments: addWorkflowEvent(message.segments ?? [], event),
+                            isAccumulating: true,
+                        };
+                    });
+                    if (!pendingWorkflowEvents.timer) {
+                        pendingWorkflowEvents.timer = setTimeout(flushWorkflow, STREAM_THROTTLE_MS);
+                    }
                 },
                 onSessionMetadata: (metadata) => {
                     if (metadata.title && sessionId) {
@@ -1322,9 +1475,14 @@ export function App({ initialSessionId, seedPrompt }) {
                 },
             });
             const result = await streamAttempt(resolvedSession, messageParts);
+            // Update both content and segments so segment-based render shows full text.
+            // ChatTranscript prefers segments over content when both exist; without this,
+            // the final text (after last throttle flush) would never render.
+            const finalText = result.text || "";
             updateAssistantMessage(assistantId, (message) => ({
                 ...message,
-                content: result.text || message.content,
+                content: finalText || message.content,
+                segments: updateStreamingText(message.segments ?? [], finalText, segmentTextStart),
                 isAccumulating: false,
             }));
             if (!(result.text ?? "").trim()) {
@@ -1345,8 +1503,14 @@ export function App({ initialSessionId, seedPrompt }) {
         catch (error) {
             const streamError = error instanceof StreamError ? error : undefined;
             if (streamError?.reason === "user_cancelled" && !didTimeOut) {
+                // Flush any pending throttled text so we don't lose the last ~400ms of response
+                const pendingText = throttle.pending;
                 updateAssistantMessage(assistantId, (message) => ({
                     ...message,
+                    content: pendingText?.trim() ? pendingText : message.content,
+                    segments: pendingText?.trim()
+                        ? updateStreamingText(message.segments ?? [], pendingText, segmentTextStart)
+                        : message.segments,
                     isAccumulating: false,
                 }));
                 setLastError("Paused.");
@@ -1364,6 +1528,11 @@ export function App({ initialSessionId, seedPrompt }) {
                 clearTimeout(streamThrottleRef.current.timer);
                 streamThrottleRef.current = null;
             }
+            // Flush any buffered workflow events that didn't fire before stream ended
+            if (pendingWorkflowEvents.timer) {
+                clearTimeout(pendingWorkflowEvents.timer);
+            }
+            flushWorkflow();
             if (streamController.current === controller) {
                 streamController.current = null;
             }
@@ -1777,6 +1946,10 @@ export function App({ initialSessionId, seedPrompt }) {
             });
             return;
         }
+        if (key.ctrl && input === "u" && composer.trim().length === 0 && hasMoreHistory && !isLoadingOlderHistory) {
+            void loadOlderMessages();
+            return;
+        }
         if (key.ctrl && input === "x") {
             setLeaderMode(true);
             return;
@@ -2034,7 +2207,13 @@ export function App({ initialSessionId, seedPrompt }) {
                         : currentSessionModel
                             ? `model: ${currentSessionModel.displayName}`
                             : "";
-    return (_jsxs(Box, { flexDirection: "column", children: [showSetupSplash ? (_jsx(SplashScreen, { agentName: agentName, cwd: cwd, whatsNew: whatsNew, onActionSelect: handleSplashAction, selectDisabled: splashSelectionMade })) : null, showTrustDisclaimer ? (_jsx(TrustDisclaimer, { folderPath: cwd, onActionSelect: handleTrustDisclaimer })) : null, showDashboard && !showTrustDisclaimer ? (_jsxs(_Fragment, { children: [_jsx(DashboardPanel, { user: activeUser, agentName: agentName, cwd: cwd, recentSessions: recentSessions, selectedEnvironment: selectedEnvironment, stats: systemStats }), updateVersion && (_jsx(Box, { marginTop: 1, paddingX: 3, children: _jsxs(Box, { paddingX: 1, borderStyle: "round", borderColor: "yellow", children: [_jsx(Text, { color: "yellow", bold: true, children: "Update Available!" }), _jsxs(Text, { children: [" v", updateVersion, " (current: v", VERSION, ")"] }), _jsx(Text, { dimColor: true, children: " \u00B7 run " }), _jsx(Text, { color: "cyan", children: "npm i -g @rubixkube/rubix" })] }) }))] })) : null, showTranscript ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [sessionId ? (_jsx(Box, { paddingX: 1, marginBottom: 1, children: _jsxs(Text, { dimColor: true, children: ["Session ", compactSessionId(sessionId), sessionTitle ? ` — ${sessionTitle}` : "", " · ", messages.filter((m) => m.role === "user" || m.role === "assistant").length, " messages"] }) })) : null, _jsx(ChatTranscript, { messages: messages, workflowViewMode: workflowViewMode })] })) : null, !showTrustDisclaimer ? (_jsx(Box, { marginTop: 1, paddingX: 1, gap: 1, minHeight: 1, children: liveActivity ? (_jsxs(_Fragment, { children: [liveActivity.spinning ? _jsx(Spinner, {}) : _jsx(Text, { color: liveActivity.color ?? "red", children: "!" }), _jsx(Text, { color: liveActivity.color ?? RUBIX_THEME.colors.assistantText, children: liveActivity.text }), liveActivity.detail ? _jsxs(Text, { dimColor: true, children: [" ", liveActivity.detail] }) : null] })) : (_jsx(Text, { dimColor: true, children: " " })) })) : null, lastError ? (_jsx(Box, { marginTop: 1, paddingX: 1, children: _jsx(StatusMessage, { variant: lastError === "Paused." ? "info" : "error", children: lastError }) })) : null, !showSetupSplash && !showTrustDisclaimer ? (_jsx(Box, { marginTop: 1, children: _jsx(Composer, { value: composer, resetToken: composerResetToken, disabled: isCommandRunning || isAuthLoading || !!pendingEnvironmentSwitch || showTrustDisclaimer, placeholder: dynamicPlaceholder, shellMode: shellMode, captureArrowKeys: showAtFilePanel, onChange: handleComposerChange, onSubmit: submitComposer, suggestions: composerSuggestions, busy: composerStatusBusy, rightStatus: composerRightStatus, suggestion: slashModeActive
+    /** True when we're in the IDLE_ACTIVITY_WORDS phase (message sent, no response content yet). */
+    const isWaitingForResponse = Boolean(liveActivity?.text?.endsWith("…"));
+    return (_jsxs(Box, { flexDirection: "column", children: [bootPhase !== "done" ? (_jsxs(Box, { paddingX: 2, paddingY: 1, flexDirection: "column", gap: 0, children: [_jsx(AnimatedGlyph, { frames: bootPhase === "success" ? ["^_^"] : getFramesForState("booting"), intervalMs: bootPhase === "success" ? 0 : getIntervalForState("booting"), intervalsMs: bootPhase === "loading" ? [...getIntervalsForState("booting")] : undefined, color: RUBIX_THEME.colors.brand }), _jsxs(Box, { gap: 1, children: [_jsx(Text, { color: RUBIX_THEME.colors.brand, children: "Rubix" }), _jsx(Text, { dimColor: true, children: bootPhase === "success"
+                                    ? "ready when you are"
+                                    : status === "loading environments"
+                                        ? "finding your workspace…"
+                                        : "waking up…" })] })] })) : null, showSetupSplash ? (_jsx(SplashScreen, { agentName: agentName, cwd: cwd, whatsNew: whatsNew, onActionSelect: handleSplashAction, selectDisabled: splashSelectionMade })) : null, showTrustDisclaimer ? (_jsx(TrustDisclaimer, { folderPath: cwd, onActionSelect: handleTrustDisclaimer })) : null, showDashboard && !showTrustDisclaimer ? (_jsxs(_Fragment, { children: [_jsx(DashboardPanel, { user: activeUser, agentName: agentName, cwd: cwd, recentSessions: recentSessions, selectedEnvironment: selectedEnvironment, stats: systemStats }), updateVersion && (_jsx(Box, { marginTop: 1, paddingX: 3, children: _jsxs(Box, { paddingX: 1, borderStyle: "round", borderColor: "yellow", children: [_jsx(Text, { color: "yellow", bold: true, children: "Update Available!" }), _jsxs(Text, { children: [" v", updateVersion, " (current: v", VERSION, ")"] }), _jsx(Text, { dimColor: true, children: " \u00B7 run " }), _jsx(Text, { color: "cyan", children: "npm i -g @rubixkube/rubix" })] }) }))] })) : null, showTranscript ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [sessionId ? (_jsx(Box, { paddingX: 1, marginBottom: 1, children: _jsxs(Text, { dimColor: true, children: ["Session ", compactSessionId(sessionId), sessionTitle ? ` — ${sessionTitle}` : "", " · ", messages.filter((m) => m.role === "user" || m.role === "assistant").length, " messages"] }) })) : null, hasMoreHistory ? (_jsx(Box, { paddingX: 1, marginBottom: 1, gap: 1, children: isLoadingOlderHistory ? (_jsxs(_Fragment, { children: [_jsx(Spinner, {}), _jsx(Text, { dimColor: true, children: "loading older messages\u2026" })] })) : (_jsx(Text, { dimColor: true, children: "\u2500\u2500 older messages available \u00B7 Ctrl+U to load \u2500\u2500" })) })) : null, _jsx(ChatTranscript, { messages: messages, workflowViewMode: workflowViewMode })] })) : null, bootPhase === "done" && !showTrustDisclaimer ? (_jsx(Box, { marginTop: 1, paddingX: 1, gap: 1, minHeight: 1, children: liveActivity ? (_jsxs(_Fragment, { children: [liveActivity.spinning ? _jsx(Spinner, {}) : _jsx(Text, { color: liveActivity.color ?? "red", children: "!" }), _jsx(Text, { color: liveActivity.color ?? RUBIX_THEME.colors.assistantText, children: liveActivity.text }), liveActivity.detail ? _jsxs(Text, { dimColor: true, children: [" ", liveActivity.detail] }) : null] })) : (_jsx(Text, { dimColor: true, children: " " })) })) : null, lastError ? (_jsx(Box, { marginTop: 1, paddingX: 1, children: _jsx(StatusMessage, { variant: lastError === "Paused." ? "info" : "error", children: lastError }) })) : null, bootPhase === "done" && !showSetupSplash && !showTrustDisclaimer ? (_jsx(Box, { marginTop: 1, children: _jsx(Composer, { value: composer, resetToken: composerResetToken, disabled: isCommandRunning || bootPhase !== "done" || !!pendingEnvironmentSwitch || showTrustDisclaimer, isStreaming: isStreaming, isCommandRunning: isCommandRunning, isWaitingForResponse: isWaitingForResponse, placeholder: dynamicPlaceholder, shellMode: shellMode, captureArrowKeys: showAtFilePanel, onChange: handleComposerChange, onSubmit: submitComposer, suggestions: composerSuggestions, busy: composerStatusBusy, rightStatus: composerRightStatus, suggestion: slashModeActive
                         ? selectedSlashCandidate
                             ? `${selectedSlashCandidate.name}  ${selectedSlashCandidate.description}`
                             : "No matching command"
@@ -2073,5 +2252,5 @@ export function App({ initialSessionId, seedPrompt }) {
                             handleModelChange(value);
                         } })), _jsxs(Text, { dimColor: true, children: [availableModels.length, " model", availableModels.length === 1 ? "" : "s", " \u00B7 \u2191\u2193 navigate \u00B7 Enter select \u00B7 Esc close"] })] })) : null, showAgentPanel ? (_jsxs(Box, { borderStyle: "single", borderColor: RUBIX_THEME.colors.brand, paddingX: 1, flexDirection: "column", children: [_jsxs(Text, { color: RUBIX_THEME.colors.brand, children: ["Agents", " · active: " + currentAgent] }), agentPanelLoading ? (_jsx(Spinner, { label: "loading agents..." })) : agentPanelError ? (_jsxs(Text, { color: "red", children: ["Failed to load agents: ", agentPanelError] })) : availableAgents.length === 0 ? (_jsx(Text, { dimColor: true, children: "No agents available." })) : (_jsx(Select, { options: availableAgents.map((a) => ({ label: a, value: a })), visibleOptionCount: 7, onChange: (value) => {
                             void handleAgentChange(value);
-                        } })), _jsxs(Text, { dimColor: true, children: [availableAgents.length, " agent", availableAgents.length === 1 ? "" : "s", " \u00B7 \u2191\u2193 navigate \u00B7 Enter select \u00B7 Esc close"] })] })) : null, showShortcutPanel ? (_jsxs(Box, { borderStyle: "single", borderColor: RUBIX_THEME.colors.brand, paddingX: 1, flexDirection: "column", children: [_jsx(Text, { color: RUBIX_THEME.colors.brand, children: "Shortcuts" }), SHORTCUT_ROWS.map((row) => (_jsxs(Text, { dimColor: true, children: [row.key.padEnd(24), " ", row.action] }, row.key))), _jsx(Text, { dimColor: true, children: "/login /logout /status /resume /new /environments /models /paste /send /clear /rename /console /docs /help /exit /quit" })] })) : null] }));
+                        } })), _jsxs(Text, { dimColor: true, children: [availableAgents.length, " agent", availableAgents.length === 1 ? "" : "s", " \u00B7 \u2191\u2193 navigate \u00B7 Enter select \u00B7 Esc close"] })] })) : null, showShortcutPanel ? (_jsxs(Box, { borderStyle: "single", borderColor: RUBIX_THEME.colors.brand, paddingX: 1, flexDirection: "column", children: [_jsx(Text, { color: RUBIX_THEME.colors.brand, children: "Shortcuts" }), SHORTCUT_ROWS.map((row) => (_jsxs(Text, { dimColor: true, children: [row.key.padEnd(24), " ", row.action] }, row.key))), _jsx(Text, { dimColor: true, children: "/login /logout /status /resume /new /environments /refresh /models /paste /send /clear /rename /console /docs /help /exit /quit" })] })) : null] }));
 }

package/dist/ui/components/AnimatedGlyph.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Text } from "ink";
+/**
+ * Renders a glyph sprite.
+ * When intervalMs is 0 (or frames has only one entry), renders a static glyph with no timer
+ * so it never triggers a re-render on its own — safe to use during idle without causing scroll jump.
+ * With intervalsMs, each frame can have a different hold time for easing (slower start, faster end).
+ */
+export function AnimatedGlyph({ frames, intervalMs = 0, intervalsMs, color, }) {
+    const usePerFrame = intervalsMs && intervalsMs.length >= frames.length;
+    const animated = (usePerFrame || intervalMs > 0) && frames.length > 1;
+    const [index, setIndex] = useState(0);
+    useEffect(() => {
+        if (!animated)
+            return;
+        let cancelled = false;
+        let timeoutId;
+        const scheduleNext = (currentIdx) => {
+            if (cancelled)
+                return;
+            const nextIdx = (currentIdx + 1) % frames.length;
+            const delay = usePerFrame
+                ? (intervalsMs[currentIdx] ?? intervalsMs[0] ?? intervalMs)
+                : intervalMs;
+            timeoutId = setTimeout(() => {
+                if (cancelled)
+                    return;
+                setIndex(nextIdx);
+                scheduleNext(nextIdx);
+            }, delay);
+        };
+        const firstDelay = usePerFrame ? (intervalsMs[0] ?? intervalMs) : intervalMs;
+        timeoutId = setTimeout(() => {
+            if (cancelled)
+                return;
+            setIndex(1 % frames.length);
+            scheduleNext(1 % frames.length);
+        }, firstDelay);
+        return () => {
+            cancelled = true;
+            clearTimeout(timeoutId);
+        };
+    }, [animated, frames.length, intervalMs, intervalsMs, usePerFrame]);
+    const frame = frames[animated ? index : 0] ?? frames[0] ?? "";
+    return (_jsx(Text, { color: color, children: frame }));
+}