@rubixkube/rubix 0.0.1 → 0.0.3

package/dist/ui/App.js

@@ -6,9 +6,14 @@ import { exec, execSync, spawn } from "child_process";
 import { Box, Text, useApp, useInput } from "ink";
 import { Select, Spinner, StatusMessage } from "@inkjs/ui";
 import { clearAuthConfig, loadAuthConfig, saveAuthConfig } from "../core/auth-store.js";
-import { authenticateWithDeviceFlow } from "../core/device-auth.js";
+import { authenticateWithDeviceFlow, isTokenNearExpiry } from "../core/device-auth.js";
 import { isFolderTrusted, trustFolder, untrustFolder } from "../core/trust-store.js";
-import { createSession, fetchChatHistory, firstHealthyCluster, getOrCreateSession, listClusters, listSessions, streamChat, StreamError, updateSessionState, } from "../core/rubix-api.js";
+import { clearLocalSessions, loadLocalSessions, saveLocalSessions } from "../core/session-store.js";
+import { loadSettings, saveSettings } from "../core/settings.js";
+import { loadWhatsNew } from "../core/whats-new.js";
+import { checkForUpdate } from "../core/update-check.js";
+import { VERSION } from "../version.js";
+import { createSession, fetchChatHistory, firstHealthyCluster, getOrCreateSession, listClusters, listModels, listSessions, listApps, refreshAndUpdateAuth, streamChat, StreamError, updateSessionState, } from "../core/rubix-api.js";
 import { readFileContext, fetchUrlContext, formatContextBlock, } from "../core/file-context.js";
 import { ChatTranscript } from "./components/ChatTranscript.js";
 import { Composer } from "./components/Composer.js";
@@ -17,6 +22,7 @@ import { SplashScreen } from "./components/SplashScreen.js";
 import { TrustDisclaimer } from "./components/TrustDisclaimer.js";
 import { getConfig } from "../config/env.js";
 import { RUBIX_THEME } from "./theme.js";
+import { useBracketedPaste } from "./hooks/useBracketedPaste.js";
 // Auth | Session | Input | Navigation | Help
 const SLASH_COMMANDS = [
     { name: "/login", description: "Authenticate with device code flow" },
@@ -25,6 +31,8 @@ const SLASH_COMMANDS = [
     { name: "/resume", description: "Resume a previous conversation" },
     { name: "/new", description: "Start a fresh conversation" },
     { name: "/cluster", description: "Switch active cluster" },
+    { 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)" },
     { name: "/send-shell-output", description: "Send last shell command output to Rubix" },
     { name: "/clear", description: "Clear current conversation history" },
@@ -84,7 +92,7 @@ const IDLE_ACTIVITY_WORDS = [
 ];
 function createMessage(role, content) {
     return {
-        id: `${Date.now()}-${Math.random().toString(16).slice(2)}`,
+        id: `${Date.now()} -${Math.random().toString(16).slice(2)} `,
         role,
         content,
         ts: Date.now(),
@@ -125,7 +133,7 @@ function sessionLabel(sessionId) {
 }
 function setTerminalTitle(title) {
     if (typeof process.stdout?.write === "function") {
-        process.stdout.write(`\x1b]0;${title}\x07`);
+        process.stdout.write(`\x1b]0;${title} \x07`);
     }
 }
 function compactLine(value, max = 64) {
@@ -138,8 +146,8 @@ function compactLine(value, max = 64) {
 }
 function extractThoughtTitle(content, max = 58) {
     const plain = (content ?? "")
-        .replace(/```[\s\S]*?```/g, "")
-        .replace(/`([^`]*)`/g, "$1")
+        .replace(/```[\s\S]*? ```/g, "")
+        .replace(/`([^ `]*)` /g, "$1")
         .replace(/\*\*([^*]+)\*\*/g, "$1")
         .replace(/\*([^*]+)\*/g, "$1")
         .replace(/^#+\s+/gm, "")
@@ -211,6 +219,18 @@ export function App({ initialSessionId, seedPrompt }) {
     const [clusterPanelLoading, setClusterPanelLoading] = useState(false);
     const [clusterPanelError, setClusterPanelError] = useState(null);
     const [pendingClusterSwitch, setPendingClusterSwitch] = useState(null);
+    const [availableModels, setAvailableModels] = useState([]);
+    const [currentSessionModel, setCurrentSessionModel] = useState(null);
+    const [showModelPanel, setShowModelPanel] = useState(false);
+    const [modelPanelLoading, setModelPanelLoading] = useState(false);
+    const [modelPanelError, setModelPanelError] = useState(null);
+    const [modelSelectedIndex, setModelSelectedIndex] = useState(0);
+    const [availableAgents, setAvailableAgents] = useState([]);
+    const [currentAgent, setCurrentAgent] = useState("SRI Agent");
+    const [showAgentPanel, setShowAgentPanel] = useState(false);
+    const [agentPanelLoading, setAgentPanelLoading] = useState(false);
+    const [agentPanelError, setAgentPanelError] = useState(null);
+    const [agentSelectedIndex, setAgentSelectedIndex] = useState(0);
     const [slashSelectedIndex, setSlashSelectedIndex] = useState(0);
     const [sessionsSelectedIndex, setSessionsSelectedIndex] = useState(0);
     const [atFilePanelDismissed, setAtFilePanelDismissed] = useState(false);
@@ -218,7 +238,9 @@ export function App({ initialSessionId, seedPrompt }) {
     const [atFileList, setAtFileList] = useState([]);
     const [atFileSelectedIndex, setAtFileSelectedIndex] = useState(0);
     const [shellMode, setShellMode] = useState(false);
-    const [workflowViewMode, setWorkflowViewMode] = useState("detailed");
+    const [workflowViewMode, setWorkflowViewMode] = useState("minimal");
+    const [whatsNew] = useState(() => loadWhatsNew(VERSION));
+    const [updateVersion, setUpdateVersion] = useState(null);
     const streamController = useRef(null);
     const streamAssistantRef = useRef(null);
     const lastShellRef = useRef(null);
@@ -230,6 +252,42 @@ export function App({ initialSessionId, seedPrompt }) {
     const [workflowExpandedIds, setWorkflowExpandedIds] = useState(new Set());
     const [messageQueue, setMessageQueue] = useState([]);
     const [historyIndex, setHistoryIndex] = useState(-1);
+    // --- Persistent User Settings ---
+    const currentSettingsRef = useRef({});
+    const updateSetting = useCallback(async (partial) => {
+        const next = { ...currentSettingsRef.current, ...partial };
+        currentSettingsRef.current = next;
+        try {
+            await saveSettings(next);
+        }
+        catch {
+            // Non-critical — swallow errors silently so UI is never blocked.
+        }
+    }, []);
+    useEffect(() => {
+        loadSettings()
+            .then((cfg) => {
+            currentSettingsRef.current = cfg;
+            if (cfg.workflowViewMode)
+                setWorkflowViewMode(cfg.workflowViewMode);
+            if (cfg.agentId)
+                setCurrentAgent(cfg.agentId);
+            // model and cluster will be applied after their lists are fetched
+            // Check for updates
+            checkForUpdate(VERSION, cfg.lastUpdateCheck)
+                .then((newVer) => {
+                if (newVer) {
+                    setUpdateVersion(newVer);
+                }
+                void updateSetting({ lastUpdateCheck: Date.now() });
+            })
+                .catch(() => { });
+        })
+            .catch(() => {
+            // No settings file yet — use defaults.
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     const promptHistory = useMemo(() => {
         const userContents = messages
             .filter((m) => m.role === "user")
@@ -299,9 +357,15 @@ export function App({ initialSessionId, seedPrompt }) {
         setComposer(nextValue);
         setComposerResetToken((prev) => prev + 1);
     }, []);
+    // Bracketed paste mode: enable \x1b[?2004h so the terminal wraps paste
+    // in \x1b[200~...\x1b[201~. Composer.tsx's useFilteredInput handles
+    // the actual accumulation so there is only one stdin consumer.
+    useBracketedPaste();
     const handleComposerChange = useCallback((newValue) => {
         setHistoryIndex(-1);
-        if (!shellMode && newValue === "!") {
+        if (!shellMode && newValue === "! ") {
+            // Require "! " (exclamation + space) to avoid accidentally entering
+            // shell mode when pasting content that starts with "!" (e.g. "!kubectl ...").
             setShellMode(true);
             setComposer("");
             setComposerResetToken((prev) => prev + 1);
@@ -366,17 +430,19 @@ export function App({ initialSessionId, seedPrompt }) {
         setSlashSelectedIndex(0);
     }, [visibleSlashCandidates]);
     useEffect(() => {
-        if (slashModeActive && (showSessionsPanel || showClusterPanel)) {
+        if (slashModeActive && (showSessionsPanel || showClusterPanel || showModelPanel)) {
             setShowSessionsPanel(false);
             setShowClusterPanel(false);
+            setShowModelPanel(false);
         }
-    }, [showSessionsPanel, showClusterPanel, slashModeActive]);
+    }, [showSessionsPanel, showClusterPanel, showModelPanel, slashModeActive]);
     useEffect(() => {
-        if (atModeActive && (showSessionsPanel || showClusterPanel)) {
+        if (atModeActive && (showSessionsPanel || showClusterPanel || showModelPanel)) {
             setShowSessionsPanel(false);
             setShowClusterPanel(false);
+            setShowModelPanel(false);
         }
-    }, [atModeActive, showSessionsPanel, showClusterPanel]);
+    }, [atModeActive, showSessionsPanel, showClusterPanel, showModelPanel]);
     const prevShowSetupSplash = useRef(showSetupSplash);
     useEffect(() => {
         if (showSetupSplash && !prevShowSetupSplash.current) {
@@ -426,10 +492,10 @@ export function App({ initialSessionId, seedPrompt }) {
     }, [addSystemMessage, updateAssistantMessage]);
     const ensureSession = useCallback(async (config, preferredId, clusterIdOverride) => {
         const clusterId = clusterIdOverride ?? selectedCluster?.cluster_id;
-        const resolved = await getOrCreateSession(config, preferredId, clusterId);
+        const resolved = await getOrCreateSession(config, preferredId, clusterId, currentAgent);
         setSessionId(resolved);
         return resolved;
-    }, [selectedCluster?.cluster_id]);
+    }, [selectedCluster?.cluster_id, currentAgent]);
     const openSessionsPanel = useCallback(async () => {
         if (!authConfig || !isAuthenticated) {
             addSystemMessage("Not authenticated. Run /login first.");
@@ -460,6 +526,7 @@ export function App({ initialSessionId, seedPrompt }) {
             setSessionItems(loaded);
             setSessionsHasMore(reachedLimit);
             setRecentSessions(loaded.slice(0, 2));
+            void saveLocalSessions(loaded.slice(0, 20));
             setLastError(null);
             setStatus("ready");
         }
@@ -501,9 +568,10 @@ export function App({ initialSessionId, seedPrompt }) {
         const cluster = pendingClusterSwitch;
         setPendingClusterSwitch(null);
         setSelectedCluster(cluster);
+        void updateSetting({ clusterId: cluster.cluster_id });
         setStatus("creating session");
         try {
-            const nextSession = await createSession(authConfig, undefined, cluster.cluster_id);
+            const nextSession = await createSession(authConfig, currentAgent, cluster.cluster_id, currentSessionModel?.modelId);
             setSessionId(nextSession);
             setSessionTitle(null);
             const latestSessions = await listSessions(authConfig, 20, 0).catch(() => []);
@@ -516,7 +584,104 @@ export function App({ initialSessionId, seedPrompt }) {
             setStatus("ready");
             addSystemMessage(`Failed to start session for cluster: ${error instanceof Error ? error.message : String(error)}`);
         }
-    }, [pendingClusterSwitch, authConfig, addSystemMessage]);
+    }, [pendingClusterSwitch, authConfig, addSystemMessage, currentAgent, currentSessionModel]);
+    const openModelPanel = useCallback(async () => {
+        if (!authConfig || !isAuthenticated) {
+            addSystemMessage("Not authenticated. Run /login first.");
+            return;
+        }
+        if (!sessionId) {
+            addSystemMessage("No active session. Use /new or /resume to start a conversation first.");
+            return;
+        }
+        setShowHelp(false);
+        setShowSessionsPanel(false);
+        setShowClusterPanel(false);
+        setShowModelPanel(true);
+        setModelPanelLoading(true);
+        setModelPanelError(null);
+        try {
+            const loaded = await listModels(authConfig);
+            setAvailableModels(loaded);
+            setModelPanelError(null);
+            setModelSelectedIndex(0);
+        }
+        catch (error) {
+            setModelPanelError(error instanceof Error ? error.message : String(error));
+        }
+        finally {
+            setModelPanelLoading(false);
+        }
+    }, [authConfig, isAuthenticated, sessionId, addSystemMessage]);
+    const handleModelChange = useCallback((modelId) => {
+        if (!sessionId) {
+            addSystemMessage("No active session. Cannot switch model.");
+            return;
+        }
+        const selected = availableModels.find((m) => m.id === modelId);
+        if (!selected) {
+            addSystemMessage(`Model not found: ${modelId}`);
+            return;
+        }
+        const sessionModel = {
+            modelId: selected.id,
+            model: selected.model,
+            displayName: selected.display_name,
+            thinkingSupported: selected.thinking_supported,
+        };
+        setCurrentSessionModel(sessionModel);
+        void updateSetting({ modelId: selected.id });
+        setShowModelPanel(false);
+        addSystemMessage(`Switched to: ${sessionModel.displayName}`);
+    }, [sessionId, availableModels, addSystemMessage]);
+    const openAgentPanel = useCallback(async () => {
+        if (!authConfig || !isAuthenticated) {
+            addSystemMessage("Not authenticated. Run /login first.");
+            return;
+        }
+        setShowHelp(false);
+        setShowSessionsPanel(false);
+        setShowClusterPanel(false);
+        setShowModelPanel(false);
+        setShowAgentPanel(true);
+        setAgentPanelLoading(true);
+        setAgentPanelError(null);
+        try {
+            const loaded = await listApps(authConfig);
+            setAvailableAgents(loaded);
+            setAgentPanelError(null);
+            setAgentSelectedIndex(0);
+        }
+        catch (error) {
+            setAgentPanelError(error instanceof Error ? error.message : String(error));
+        }
+        finally {
+            setAgentPanelLoading(false);
+        }
+    }, [authConfig, isAuthenticated, addSystemMessage]);
+    const handleAgentChange = useCallback(async (agent) => {
+        setShowAgentPanel(false);
+        setCurrentAgent(agent);
+        void updateSetting({ agentId: agent });
+        addSystemMessage(`Switched agent to: ${agent}. Starting new session.`);
+        setSessionId(null);
+        setSessionTitle(null);
+        setMessages([]);
+        if (!authConfig)
+            return;
+        try {
+            setStatus("creating session");
+            const nextSession = await createSession(authConfig, agent, selectedCluster?.cluster_id, currentSessionModel?.modelId);
+            setSessionId(nextSession);
+            const latestSessions = await listSessions(authConfig, 20, 0).catch(() => []);
+            setRecentSessions(latestSessions.slice(0, 2));
+            setStatus("ready");
+        }
+        catch (err) {
+            setStatus("ready");
+            addSystemMessage(`Failed to create session with agent ${agent}: ` + String(err));
+        }
+    }, [authConfig, selectedCluster, currentSessionModel, addSystemMessage]);
     const activateSessionById = useCallback((selectedId) => {
         const selected = sessionItems.find((item) => item.id === selectedId);
         if (!selected)
@@ -550,18 +715,39 @@ export function App({ initialSessionId, seedPrompt }) {
         let cancelled = false;
         const loadAuth = async () => {
             try {
-                const cfg = await loadAuthConfig();
+                let cfg = await loadAuthConfig();
                 if (cancelled)
                     return;
-                const loggedIn = !!cfg?.isAuthenticated && !!(cfg?.idToken ?? cfg?.authToken);
+                let loggedIn = !!cfg?.isAuthenticated && !!(cfg?.idToken ?? cfg?.authToken);
+                // Proactive token refresh if near/at expiration
+                if (loggedIn && cfg && isTokenNearExpiry(cfg.idToken ?? cfg.authToken)) {
+                    try {
+                        cfg = await refreshAndUpdateAuth(cfg);
+                        // Successfully refreshed, continue with fresh token
+                    }
+                    catch (error) {
+                        // Refresh failed - token is invalid/expired, force re-login
+                        const errMsg = error instanceof Error ? error.message : String(error);
+                        if (!cancelled) {
+                            addSystemMessage(`Session expired (${errMsg}). Use /login to refresh.`);
+                        }
+                        loggedIn = false;
+                        cfg = null;
+                    }
+                }
                 setAuthConfig(cfg);
                 setIsAuthenticated(loggedIn);
                 setActiveUser(cfg?.userName ?? cfg?.userEmail ?? null);
                 if (loggedIn && cfg) {
                     setStatus("loading clusters");
                     try {
+                        const localSess = await loadLocalSessions().catch(() => []);
+                        if (!cancelled && localSess.length > 0) {
+                            setRecentSessions(localSess.slice(0, 2));
+                            setSessionItems(localSess);
+                        }
                         // Load clusters and recent sessions for dashboard display
-                        const [clusterList, recentList] = await Promise.all([
+                        const [clusterList, recentList, appList] = await Promise.all([
                             listClusters(cfg).catch((err) => {
                                 if (!cancelled) {
                                     addSystemMessage(`Could not load clusters: ${err instanceof Error ? err.message : String(err)}`);
@@ -574,12 +760,31 @@ export function App({ initialSessionId, seedPrompt }) {
                                 }
                                 return [];
                             }),
+                            listApps(cfg).catch(() => []),
                         ]);
                         const firstCluster = firstHealthyCluster(clusterList);
                         if (!cancelled) {
-                            setClusters(clusterList);
-                            setSelectedCluster(firstCluster);
                             setRecentSessions(recentList.slice(0, 2));
+                            setSessionItems(recentList);
+                            void saveLocalSessions(recentList);
+                            if (appList && appList.length > 0) {
+                                setAvailableAgents(appList);
+                                // Prefer saved agentId from settings, then SRI Agent, then first available
+                                const saved = currentSettingsRef.current;
+                                const savedAgent = saved.agentId && appList.includes(saved.agentId) ? saved.agentId : null;
+                                const preferApp = savedAgent ?? (appList.includes("SRI Agent") ? "SRI Agent" : appList[0]);
+                                if (preferApp)
+                                    setCurrentAgent(preferApp);
+                            }
+                            // Apply saved cluster preference from settings
+                            const savedClusterId = currentSettingsRef.current.clusterId;
+                            const preferredCluster = savedClusterId
+                                ? clusterList.find((c) => c.cluster_id === savedClusterId) ?? firstCluster
+                                : firstCluster;
+                            if (!cancelled) {
+                                setClusters(clusterList);
+                                setSelectedCluster(preferredCluster);
+                            }
                             setStatus("ready");
                         }
                     }
@@ -700,19 +905,34 @@ export function App({ initialSessionId, seedPrompt }) {
             case "/quit":
                 exit();
                 return;
-            case "/status":
+            case "/status": {
+                const workspace = cwd.replace(process.env.HOME ?? "", "~");
+                const clusterStr = selectedCluster
+                    ? `${selectedCluster.name} (${selectedCluster.status})`
+                    : "no cluster selected";
+                const modelStr = currentSessionModel
+                    ? `${currentSessionModel.displayName}${currentSessionModel.thinkingSupported ? " (thinking supported)" : ""}`
+                    : "default";
                 addSystemMessage([
+                    `Version: ${VERSION}`,
+                    `Workspace: ${workspace}`,
                     `Auth: ${isAuthenticated ? `logged in as ${activeUser ?? "unknown user"}` : "not logged in"}`,
-                    `Session: ${sessionLabel(sessionId)}`,
+                    `Agent: ${currentAgent}`,
+                    `Cluster: ${clusterStr}`,
+                    `Model: ${modelStr}`,
+                    `Session: ${sessionId ?? "no session"}`,
                     `State: ${status}`,
                 ].join("\n"));
                 return;
+            }
             case "/logout":
                 streamController.current?.abort();
                 streamController.current = null;
                 await clearAuthConfig();
+                await clearLocalSessions();
                 setAuthConfig(null);
-                setIsAuthenticated(false);
+                setRecentSessions([]);
+                setSessionItems([]);
                 setActiveUser(null);
                 setSessionId(null);
                 setSessionTitle(null);
@@ -722,7 +942,7 @@ export function App({ initialSessionId, seedPrompt }) {
                 return;
             case "/login": {
                 if (isAuthenticated && authConfig) {
-                    addSystemMessage(`Already logged in as ${activeUser ?? "user"}.`);
+                    addSystemMessage(`Already logged in as ${activeUser ?? "user"}. Type /logout first to switch accounts.`);
                     return;
                 }
                 setStatus("auth");
@@ -733,12 +953,18 @@ export function App({ initialSessionId, seedPrompt }) {
                     setAuthConfig(nextAuth);
                     setIsAuthenticated(true);
                     setActiveUser(nextAuth.userName ?? nextAuth.userEmail ?? null);
-                    const clusterList = await listClusters(nextAuth).catch(() => []);
+                    const clusterList = await listClusters(nextAuth).catch((err) => {
+                        addSystemMessage(`Could not load clusters: ${err instanceof Error ? err.message : String(err)}`);
+                        return [];
+                    });
                     const firstCluster = firstHealthyCluster(clusterList);
                     setClusters(clusterList);
                     setSelectedCluster(firstCluster);
                     const resolved = await ensureSession(nextAuth, undefined, firstCluster?.cluster_id);
-                    const latestSessions = await listSessions(nextAuth, 20, 0).catch(() => []);
+                    const latestSessions = await listSessions(nextAuth, 20, 0).catch((err) => {
+                        addSystemMessage(`Could not load recent sessions: ${err instanceof Error ? err.message : String(err)}`);
+                        return [];
+                    });
                     setSessionId(resolved);
                     setRecentSessions(latestSessions.slice(0, 2));
                     const currentSession = latestSessions.find((s) => s.id === resolved);
@@ -765,7 +991,7 @@ export function App({ initialSessionId, seedPrompt }) {
                 }
                 setStatus("creating session");
                 try {
-                    const nextSession = await createSession(authConfig, undefined, selectedCluster?.cluster_id);
+                    const nextSession = await createSession(authConfig, currentAgent, selectedCluster?.cluster_id, currentSessionModel?.modelId);
                     setSessionId(nextSession);
                     setSessionTitle(null);
                     setMessages([]);
@@ -773,7 +999,7 @@ export function App({ initialSessionId, seedPrompt }) {
                         const now = new Date().toISOString();
                         const next = {
                             id: nextSession,
-                            appName: "SRI Agent",
+                            appName: currentAgent,
                             createdAt: now,
                             updatedAt: now,
                         };
@@ -792,6 +1018,15 @@ export function App({ initialSessionId, seedPrompt }) {
                 await openClusterPanel();
                 return;
             }
+            case "/models": {
+                addSystemMessage("Opening model selector...");
+                await openModelPanel();
+                return;
+            }
+            case "/agents": {
+                await openAgentPanel();
+                return;
+            }
             case "/rename": {
                 if (!authConfig || !isAuthenticated) {
                     addSystemMessage("Not authenticated. Run /login first.");
@@ -911,6 +1146,11 @@ export function App({ initialSessionId, seedPrompt }) {
         isAuthenticated,
         openClusterPanel,
         openSessionsPanel,
+        openAgentPanel,
+        openModelPanel,
+        currentAgent,
+        currentSessionModel,
+        selectedCluster,
         recordActivity,
         resetComposer,
         sessionId,
@@ -939,6 +1179,11 @@ export function App({ initialSessionId, seedPrompt }) {
             try {
                 resolvedSession = await ensureSession(authConfig);
                 setSessionId(resolvedSession);
+                // If we created a brand‑new session (not the most recent empty one), inform the user.
+                const prevRecent = recentSessions[0];
+                if (!prevRecent || prevRecent.id !== resolvedSession) {
+                    addSystemMessage(`New session ${sessionLabel(resolvedSession)} started.`);
+                }
             }
             catch (error) {
                 failAssistantMessage(assistantId, `Failed to initialize session: ${error instanceof Error ? error.message : String(error)}`);
@@ -981,6 +1226,7 @@ export function App({ initialSessionId, seedPrompt }) {
                 message: prompt,
                 messageParts: parts,
                 signal: controller.signal,
+                ...(currentSessionModel ? { stateDelta: { model_id: currentSessionModel.modelId } } : {}),
             }, {
                 onText: throttledOnText,
                 onWorkflow: (event) => {
@@ -1103,6 +1349,7 @@ export function App({ initialSessionId, seedPrompt }) {
     }, [
         addSystemMessage,
         authConfig,
+        currentSessionModel,
         ensureSession,
         failAssistantMessage,
         isAuthenticated,
@@ -1381,7 +1628,7 @@ export function App({ initialSessionId, seedPrompt }) {
         }
         // Arrow navigation for sessions panel
         const isShowingSlashPanel = slashModeActive && !slashPanelDismissed;
-        if (showSessionsPanel && !isShowingSlashPanel && !showClusterPanel) {
+        if (showSessionsPanel && !isShowingSlashPanel && !showClusterPanel && !showModelPanel) {
             const query = sessionsSearchQuery.toLowerCase();
             const filtered = sessionItems.filter((item) => {
                 const title = (item.title ?? "").toLowerCase();
@@ -1415,7 +1662,7 @@ export function App({ initialSessionId, seedPrompt }) {
             return;
         }
         // Up/Down: prompt history when composer empty, no interactive panels
-        const hasInteractivePanelOpen = showHelp || (slashModeActive && !slashPanelDismissed) || showAtFilePanel || showSessionsPanel || showClusterPanel;
+        const hasInteractivePanelOpen = showHelp || (slashModeActive && !slashPanelDismissed) || showAtFilePanel || showSessionsPanel || showClusterPanel || showModelPanel;
         if (!hasInteractivePanelOpen &&
             composer.trim().length === 0 &&
             messageQueue.length === 0 &&
@@ -1490,7 +1737,11 @@ export function App({ initialSessionId, seedPrompt }) {
             return;
         }
         if (key.ctrl && input === "o") {
-            setWorkflowViewMode((prev) => (prev === "detailed" ? "minimal" : "detailed"));
+            setWorkflowViewMode((prev) => {
+                const next = prev === "detailed" ? "minimal" : "detailed";
+                void updateSetting({ workflowViewMode: next });
+                return next;
+            });
             return;
         }
         if (key.ctrl && input === "x") {
@@ -1509,7 +1760,7 @@ export function App({ initialSessionId, seedPrompt }) {
                 return;
             }
             const hasOverlayOpen = showHelp || (slashModeActive && !slashPanelDismissed) || showAtFilePanel;
-            const hasInteractivePanelOpen = hasOverlayOpen || showSessionsPanel || showClusterPanel;
+            const hasInteractivePanelOpen = hasOverlayOpen || showSessionsPanel || showClusterPanel || showModelPanel;
             if (hasInteractivePanelOpen) {
                 setShowHelp(false);
                 setSlashPanelDismissed(true);
@@ -1607,7 +1858,8 @@ export function App({ initialSessionId, seedPrompt }) {
     const showSlashPanel = slashModeActive && !slashPanelDismissed;
     const showClusterInteractivePanel = showClusterPanel && !showSlashPanel;
     const showSessionsInteractivePanel = showSessionsPanel && !showSlashPanel && !showClusterInteractivePanel;
-    const showShortcutPanel = showHelp && !showSlashPanel && !showSessionsInteractivePanel && !showClusterInteractivePanel;
+    const showModelInteractivePanel = showModelPanel && !showSlashPanel && !showSessionsInteractivePanel && !showClusterInteractivePanel;
+    const showShortcutPanel = showHelp && !showSlashPanel && !showSessionsInteractivePanel && !showClusterInteractivePanel && !showModelInteractivePanel;
     const latestAssistantMessage = useMemo(() => {
         for (let index = messages.length - 1; index >= 0; index -= 1) {
             const message = messages[index];
@@ -1645,7 +1897,10 @@ export function App({ initialSessionId, seedPrompt }) {
             const toolName = typeof latestCall.details?.name === "string" && latestCall.details.name.trim().length > 0
                 ? latestCall.details.name
                 : "tool";
-            const thoughtDetail = latestThought ? extractThoughtTitle(latestThought.content) : undefined;
+            // Only show thought as detail if it's the same or very close timestamp (part of the same logical step)
+            const thoughtDetail = latestThought && latestThought.ts >= latestCall.ts - 1000
+                ? extractThoughtTitle(latestThought.content)
+                : undefined;
             return {
                 text: toolName,
                 detail: thoughtDetail,
@@ -1693,6 +1948,10 @@ export function App({ initialSessionId, seedPrompt }) {
         label: `${c.name}  ${c.status}${c.region ? ` · ${c.region}` : ""}${c.cluster_id !== c.name ? ` · ${c.cluster_id}` : ""}`,
         value: c.cluster_id,
     })), [clusters]);
+    const modelSelectOptions = useMemo(() => availableModels.map((m) => ({
+        label: `${m.default ? "●" : " "} ${m.display_name}  ${m.thinking_supported ? "·thinking" : ""}${m.experimental ? " ·experimental" : ""}`,
+        value: m.id,
+    })), [availableModels]);
     const sessionSelectOptions = useMemo(() => {
         const query = sessionsSearchQuery.toLowerCase();
         return sessionItems
@@ -1727,8 +1986,10 @@ export function App({ initialSessionId, seedPrompt }) {
                     ? "running"
                     : status.includes("auth") || status.includes("session")
                         ? status
-                        : "";
-    return (_jsxs(Box, { flexDirection: "column", children: [showSetupSplash ? (_jsx(SplashScreen, { agentName: agentName, cwd: cwd, onActionSelect: handleSplashAction, selectDisabled: splashSelectionMade })) : null, showTrustDisclaimer ? (_jsx(TrustDisclaimer, { folderPath: cwd, onActionSelect: handleTrustDisclaimer })) : null, showDashboard && !showTrustDisclaimer ? (_jsx(DashboardPanel, { user: activeUser, agentName: agentName, cwd: cwd, recentSessions: recentSessions, selectedCluster: selectedCluster })) : null, showTranscript ? (_jsx(Box, { marginTop: 1, children: _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 === "Conversation paused." ? "info" : "error", children: lastError }) })) : null, !showSetupSplash && !showTrustDisclaimer ? (_jsx(Box, { marginTop: 1, children: _jsx(Composer, { value: composer, resetToken: composerResetToken, disabled: isCommandRunning || isAuthLoading || !!pendingClusterSwitch || showTrustDisclaimer, placeholder: isStreaming ? "Type to queue (Enter to add)" : "What would you like to do today?", shellMode: shellMode, captureArrowKeys: showAtFilePanel, onChange: handleComposerChange, onSubmit: submitComposer, suggestions: composerSuggestions, busy: composerStatusBusy, rightStatus: composerRightStatus, suggestion: slashModeActive
+                        : 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, selectedCluster: selectedCluster }), 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 ? (_jsx(Box, { marginTop: 1, children: _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 === "Conversation paused." ? "info" : "error", children: lastError }) })) : null, !showSetupSplash && !showTrustDisclaimer ? (_jsx(Box, { marginTop: 1, children: _jsx(Composer, { value: composer, resetToken: composerResetToken, disabled: isCommandRunning || isAuthLoading || !!pendingClusterSwitch || showTrustDisclaimer, placeholder: isStreaming ? "Type to queue (Enter to add)" : "What would you like to do today?", shellMode: shellMode, captureArrowKeys: showAtFilePanel, onChange: handleComposerChange, onSubmit: submitComposer, suggestions: composerSuggestions, busy: composerStatusBusy, rightStatus: composerRightStatus, suggestion: slashModeActive
                         ? selectedSlashCandidate
                             ? `${selectedSlashCandidate.name}  ${selectedSlashCandidate.description}`
                             : "No matching command"
@@ -1738,7 +1999,7 @@ export function App({ initialSessionId, seedPrompt }) {
                                 ? messageQueue.length > 0
                                     ? `Enter to queue · ${messageQueue.length} queued · ↑ to edit`
                                     : "Enter to queue"
-                                : "Shift+Enter new line · / for commands, @ for files, ! for shell" }) })) : null, showSlashPanel ? (_jsxs(Box, { borderStyle: "single", borderColor: RUBIX_THEME.colors.brand, paddingX: 1, flexDirection: "column", children: [visibleSlashCandidates.length === 0 ? (_jsx(Text, { dimColor: true, children: "No matching command" })) : (visibleSlashCandidates.map((item, index) => (_jsxs(Text, { children: [_jsx(Text, { color: index === slashSelectedIndex ? RUBIX_THEME.colors.brand : undefined, children: index === slashSelectedIndex ? "› " : "  " }), _jsx(Text, { bold: index === slashSelectedIndex, color: index === slashSelectedIndex ? RUBIX_THEME.colors.brand : undefined, children: item.name }), _jsxs(Text, { dimColor: true, children: ["  ", item.description] })] }, item.name)))), _jsx(Text, { dimColor: true, children: "\u2191\u2193 navigate \u2022 Enter select \u2022 Tab autocomplete" })] })) : null, showAtFilePanel ? (_jsxs(Box, { borderStyle: "single", borderColor: RUBIX_THEME.colors.brand, paddingX: 1, flexDirection: "column", children: [_jsxs(Text, { color: RUBIX_THEME.colors.brand, children: ["Add file context", atFileCurrentDir !== cwd ? ` · ${path.relative(cwd, atFileCurrentDir)}/` : "", atFileQuery ? ` · filter: "${atFileQuery}"` : ""] }), atFileFiltered.length === 0 ? (_jsx(Text, { dimColor: true, children: atFileQuery ? "No matching files" : "No files in directory" })) : ((() => {
+                                : "Shift+Enter new line · / for commands, @ for files, '! ' for shell" }) })) : null, showSlashPanel ? (_jsxs(Box, { borderStyle: "single", borderColor: RUBIX_THEME.colors.brand, paddingX: 1, flexDirection: "column", children: [visibleSlashCandidates.length === 0 ? (_jsx(Text, { dimColor: true, children: "No matching command" })) : (visibleSlashCandidates.map((item, index) => (_jsxs(Text, { children: [_jsx(Text, { color: index === slashSelectedIndex ? RUBIX_THEME.colors.brand : undefined, children: index === slashSelectedIndex ? "› " : "  " }), _jsx(Text, { bold: index === slashSelectedIndex, color: index === slashSelectedIndex ? RUBIX_THEME.colors.brand : undefined, children: item.name }), _jsxs(Text, { dimColor: true, children: ["  ", item.description] })] }, item.name)))), _jsx(Text, { dimColor: true, children: "\u2191\u2193 navigate \u2022 Enter select \u2022 Tab autocomplete" })] })) : null, showAtFilePanel ? (_jsxs(Box, { borderStyle: "single", borderColor: RUBIX_THEME.colors.brand, paddingX: 1, flexDirection: "column", children: [_jsxs(Text, { color: RUBIX_THEME.colors.brand, children: ["Add file context", atFileCurrentDir !== cwd ? ` · ${path.relative(cwd, atFileCurrentDir)}/` : "", atFileQuery ? ` · filter: "${atFileQuery}"` : ""] }), atFileFiltered.length === 0 ? (_jsx(Text, { dimColor: true, children: atFileQuery ? "No matching files" : "No files in directory" })) : ((() => {
                         const visibleCount = 7;
                         const start = Math.max(0, Math.min(atFileSelectedIndex - 6, atFileFiltered.length - visibleCount));
                         return atFileFiltered.slice(start, start + visibleCount).map((name, i) => {
@@ -1762,5 +2023,10 @@ export function App({ initialSessionId, seedPrompt }) {
                                 return;
                             setShowClusterPanel(false);
                             setPendingClusterSwitch(cluster);
-                        } })), _jsxs(Text, { dimColor: true, children: [clusters.length, " cluster", clusters.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 /cluster /paste /send-shell-output /clear /rename /console /docs /help /exit /quit" })] })) : null] }));
+                        } })), _jsxs(Text, { dimColor: true, children: [clusters.length, " cluster", clusters.length === 1 ? "" : "s", " \u00B7 \u2191\u2193 navigate \u00B7 Enter select \u00B7 Esc close"] })] })) : null, showModelInteractivePanel ? (_jsxs(Box, { borderStyle: "single", borderColor: RUBIX_THEME.colors.brand, paddingX: 1, flexDirection: "column", children: [_jsxs(Text, { color: RUBIX_THEME.colors.brand, children: ["Models", currentSessionModel ? ` · active: ${currentSessionModel.displayName}` : ""] }), modelPanelLoading ? (_jsx(Spinner, { label: "loading models..." })) : modelPanelError ? (_jsxs(Text, { color: "red", children: ["Failed to load models: ", modelPanelError] })) : availableModels.length === 0 ? (_jsx(Text, { dimColor: true, children: "No models available." })) : (_jsx(Select, { options: modelSelectOptions, visibleOptionCount: 7, onChange: (value) => {
+                            setShowModelPanel(false);
+                            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 /cluster /models /paste /send-shell-output /clear /rename /console /docs /help /exit /quit" })] })) : null] }));
 }