auq-mcp-server 2.1.1 → 2.2.0

package/dist/bin/tui-app.js

@@ -1,7 +1,10 @@
-import { Box, render, Text } from "ink";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Box, render, Text, useInput } from "ink";
+import { promises as fs } from "fs";
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { ensureDirectoryExists, getSessionDirectory, } from "../src/session/utils.js";
 import { Header } from "../src/tui/components/Header.js";
+import { SessionDots } from "../src/tui/components/SessionDots.js";
+import { SessionPicker } from "../src/tui/components/SessionPicker.js";
 import { StepperView } from "../src/tui/components/StepperView.js";
 import { ThemeIndicator } from "../src/tui/components/ThemeIndicator.js";
 import { Toast } from "../src/tui/components/Toast.js";
@@ -10,12 +13,17 @@ import { createNotificationBatcher, showProgress, clearProgress, calculateProgre
 import { createTUIWatcher } from "../src/tui/session-watcher.js";
 import { ThemeProvider } from "../src/tui/ThemeProvider.js";
 import { ConfigProvider } from "../src/tui/ConfigContext.js";
+import { getAdjustedIndexAfterRemoval, getDirectJumpIndex, getNextSessionIndex, getPrevSessionIndex, } from "../src/tui/utils/sessionSwitching.js";
 const App = ({ config }) => {
     const [state, setState] = useState({ mode: "WAITING" });
     const [sessionQueue, setSessionQueue] = useState([]);
+    const [activeSessionIndex, setActiveSessionIndex] = useState(0);
+    const [sessionUIStates, setSessionUIStates] = useState({});
     const [isInitialized, setIsInitialized] = useState(false);
     const [toast, setToast] = useState(null);
     const [showSessionLog, setShowSessionLog] = useState(true);
+    const [showSessionPicker, setShowSessionPicker] = useState(false);
+    const [isInReviewOrRejection, setIsInReviewOrRejection] = useState(false);
     // Get session directory for logging
     const sessionDir = getSessionDirectory();
     // Notification configuration from config
@@ -109,20 +117,172 @@ const App = ({ config }) => {
         if (!isInitialized)
             return;
         if (state.mode === "WAITING" && sessionQueue.length > 0) {
-            const [nextSession, ...rest] = sessionQueue;
-            setSessionQueue(rest);
-            setState({ mode: "PROCESSING", session: nextSession });
+            setState({ mode: "PROCESSING" });
+            setActiveSessionIndex(0);
+            return;
+        }
+        if (state.mode === "PROCESSING" && sessionQueue.length === 0) {
+            setState({ mode: "WAITING" });
+            setActiveSessionIndex(0);
         }
-    }, [state, sessionQueue, isInitialized]);
+    }, [state.mode, sessionQueue.length, isInitialized]);
     // Show toast notification
     const showToast = (message, type = "success", title) => {
         setToast({ message, type, title });
     };
+    useEffect(() => {
+        if (state.mode !== "PROCESSING" || sessionQueue.length <= 1) {
+            return;
+        }
+        let isCancelled = false;
+        let isChecking = false;
+        const checkPausedSessionStatuses = async () => {
+            if (isCancelled || isChecking) {
+                return;
+            }
+            isChecking = true;
+            try {
+                const checks = await Promise.all(sessionQueue.map(async (session, index) => {
+                    if (index === activeSessionIndex) {
+                        return null;
+                    }
+                    const statusPath = `${sessionDir}/${session.sessionId}/status.json`;
+                    try {
+                        const content = await fs.readFile(statusPath, "utf8");
+                        const parsed = JSON.parse(content);
+                        if (parsed.status === "timed_out" ||
+                            parsed.status === "completed" ||
+                            parsed.status === "rejected" ||
+                            parsed.status === "abandoned") {
+                            return {
+                                notifyAsTimedOut: parsed.status === "timed_out",
+                                session,
+                            };
+                        }
+                        return null;
+                    }
+                    catch {
+                        return {
+                            notifyAsTimedOut: true,
+                            session,
+                        };
+                    }
+                }));
+                if (isCancelled) {
+                    return;
+                }
+                const sessionsToRemove = checks.filter((entry) => entry !== null);
+                if (sessionsToRemove.length === 0) {
+                    return;
+                }
+                const timedOutSession = sessionsToRemove.find((entry) => entry.notifyAsTimedOut);
+                if (timedOutSession) {
+                    const title = timedOutSession.session.sessionRequest.questions[0]?.title ||
+                        timedOutSession.session.sessionId.slice(0, 8);
+                    showToast(`Session '${title}' timed out`, "info");
+                }
+                const idsToRemove = new Set(sessionsToRemove.map((entry) => entry.session.sessionId));
+                setSessionUIStates((prev) => {
+                    const next = { ...prev };
+                    for (const sessionId of idsToRemove) {
+                        delete next[sessionId];
+                    }
+                    return next;
+                });
+                setSessionQueue((prev) => {
+                    let nextQueue = [...prev];
+                    let nextActiveIndex = activeSessionIndex;
+                    const removalIndices = Array.from(idsToRemove)
+                        .map((sessionId) => nextQueue.findIndex((session) => session.sessionId === sessionId))
+                        .filter((idx) => idx !== -1)
+                        .sort((a, b) => b - a);
+                    for (const removalIndex of removalIndices) {
+                        nextQueue = nextQueue.filter((_, idx) => idx !== removalIndex);
+                        nextActiveIndex = getAdjustedIndexAfterRemoval(removalIndex, nextActiveIndex, nextQueue.length);
+                    }
+                    setActiveSessionIndex(nextActiveIndex);
+                    setState(nextQueue.length === 0
+                        ? { mode: "WAITING" }
+                        : { mode: "PROCESSING" });
+                    return nextQueue;
+                });
+            }
+            finally {
+                isChecking = false;
+            }
+        };
+        const interval = setInterval(() => {
+            void checkPausedSessionStatuses();
+        }, 2000);
+        return () => {
+            isCancelled = true;
+            clearInterval(interval);
+        };
+    }, [activeSessionIndex, sessionDir, sessionQueue, state.mode]);
     // Handle progress updates from StepperView
     const handleProgressUpdate = (answered, total) => {
         const percent = calculateProgress(answered, total);
         showProgress(percent, notificationConfig);
     };
+    const handleStateSnapshot = useCallback((sessionId, ui) => {
+        setSessionUIStates((prev) => ({
+            ...prev,
+            [sessionId]: ui,
+        }));
+    }, []);
+    const handleFlowStateChange = useCallback((flowState) => {
+        setIsInReviewOrRejection(flowState.showReview || flowState.showRejectionConfirm);
+    }, []);
+    const switchToSession = useCallback((targetIndex) => {
+        if (state.mode !== "PROCESSING" || sessionQueue.length <= 1) {
+            return;
+        }
+        const clampedIndex = Math.max(0, Math.min(targetIndex, sessionQueue.length - 1));
+        if (clampedIndex === activeSessionIndex) {
+            return;
+        }
+        const targetSession = sessionQueue[clampedIndex];
+        if (!targetSession) {
+            return;
+        }
+        setActiveSessionIndex(clampedIndex);
+        setShowSessionPicker(false);
+    }, [activeSessionIndex, sessionQueue, state.mode]);
+    const activeSession = state.mode === "PROCESSING" ? sessionQueue[activeSessionIndex] : undefined;
+    const canUseDirectJump = !activeSession ||
+        sessionUIStates[activeSession.sessionId]?.focusContext === "option" ||
+        sessionUIStates[activeSession.sessionId] === undefined;
+    useInput((input, key) => {
+        if (key.ctrl && input === "s") {
+            setShowSessionPicker(true);
+            return;
+        }
+        if (key.ctrl && input === "]") {
+            const nextIndex = getNextSessionIndex(activeSessionIndex, sessionQueue.length);
+            switchToSession(nextIndex);
+            return;
+        }
+        if (key.ctrl && input === "[") {
+            const prevIndex = getPrevSessionIndex(activeSessionIndex, sessionQueue.length);
+            switchToSession(prevIndex);
+            return;
+        }
+        if (!key.ctrl && !key.meta && /^[1-9]$/.test(input)) {
+            if (!canUseDirectJump) {
+                return;
+            }
+            const keyNumber = Number(input);
+            const targetIndex = getDirectJumpIndex(keyNumber, activeSessionIndex, sessionQueue.length);
+            if (targetIndex !== null) {
+                switchToSession(targetIndex);
+            }
+        }
+    }, {
+        isActive: state.mode === "PROCESSING" &&
+            !isInReviewOrRejection &&
+            !showSessionPicker &&
+            sessionQueue.length >= 2,
+    });
     // Handle session completion
     const handleSessionComplete = (wasRejected = false, rejectionReason) => {
         // Clear progress bar on session completion
@@ -139,16 +299,25 @@ const App = ({ config }) => {
         else {
             showToast("✅ Answers submitted successfully!", "success");
         }
-        if (sessionQueue.length > 0) {
-            // Auto-load next session
-            const [nextSession, ...rest] = sessionQueue;
-            setSessionQueue(rest);
-            setState({ mode: "PROCESSING", session: nextSession });
-        }
-        else {
-            // Return to WAITING
-            setState({ mode: "WAITING" });
+        const completedSession = sessionQueue[activeSessionIndex];
+        if (completedSession) {
+            setSessionUIStates((prev) => {
+                if (!(completedSession.sessionId in prev)) {
+                    return prev;
+                }
+                const next = { ...prev };
+                delete next[completedSession.sessionId];
+                return next;
+            });
         }
+        setSessionQueue((prev) => {
+            const removedIndex = activeSessionIndex;
+            const nextQueue = prev.filter((_, i) => i !== removedIndex);
+            const nextActiveIndex = getAdjustedIndexAfterRemoval(removedIndex, activeSessionIndex, nextQueue.length);
+            setActiveSessionIndex(nextActiveIndex);
+            setState(nextQueue.length === 0 ? { mode: "WAITING" } : { mode: "PROCESSING" });
+            return nextQueue;
+        });
     };
     // Render based on state
     if (!isInitialized) {
@@ -160,8 +329,13 @@ const App = ({ config }) => {
     }
     else {
         // PROCESSING mode
-        const { session } = state;
-        mainContent = (React.createElement(StepperView, { key: session.sessionId, onComplete: handleSessionComplete, onProgress: handleProgressUpdate, sessionId: session.sessionId, sessionRequest: session.sessionRequest }));
+        const session = sessionQueue[activeSessionIndex];
+        if (!session) {
+            mainContent = React.createElement(WaitingScreen, { queueCount: sessionQueue.length });
+        }
+        else {
+            mainContent = (React.createElement(StepperView, { key: session.sessionId, onComplete: handleSessionComplete, onProgress: handleProgressUpdate, initialState: sessionUIStates[session.sessionId], onStateSnapshot: handleStateSnapshot, onFlowStateChange: handleFlowStateChange, hasMultipleSessions: sessionQueue.length >= 2, sessionId: session.sessionId, sessionRequest: session.sessionRequest }));
+        }
     }
     // Render with header, toast overlay, and main content
     // Use theme from config, falling back to "system" if not specified
@@ -169,14 +343,21 @@ const App = ({ config }) => {
     return (React.createElement(ConfigProvider, { config: config },
         React.createElement(ThemeProvider, { initialTheme: initialTheme },
             React.createElement(Box, { flexDirection: "column", paddingX: 1 },
-                React.createElement(Header, { pendingCount: sessionQueue.length }),
+                React.createElement(Header, { pendingCount: state.mode === "PROCESSING"
+                        ? Math.max(0, sessionQueue.length - 1)
+                        : sessionQueue.length }),
                 mainContent,
+                state.mode === "PROCESSING" && sessionQueue.length >= 2 && (React.createElement(SessionDots, { sessions: sessionQueue, activeIndex: activeSessionIndex, sessionUIStates: sessionUIStates })),
                 toast && (React.createElement(Box, { marginTop: 1, justifyContent: "center" },
                     React.createElement(Toast, { message: toast.message, onDismiss: () => setToast(null), type: toast.type, title: toast.title, duration: 5000 }))),
                 showSessionLog && (React.createElement(Box, { marginTop: 1 },
                     React.createElement(Text, { dimColor: true },
                         "[AUQ] Session directory: ",
                         sessionDir))),
+                state.mode === "PROCESSING" && (React.createElement(SessionPicker, { isOpen: showSessionPicker, sessions: sessionQueue, activeIndex: activeSessionIndex, sessionUIStates: sessionUIStates, onSelectIndex: (idx) => {
+                        switchToSession(idx);
+                        setShowSessionPicker(false);
+                    }, onClose: () => setShowSessionPicker(false) })),
                 React.createElement(ThemeIndicator, null)))));
 };
 export const runTui = (config) => {

package/dist/package.json

@@ -1,6 +1,6 @@
 {
     "name": "auq-mcp-server",
-    "version": "2.1.1",
+    "version": "2.2.0",
     "main": "dist/index.js",
     "bin": {
         "auq": "dist/bin/auq.js"

package/dist/src/i18n/locales/en.js

@@ -2,6 +2,9 @@ export const en = {
     footer: {
         options: "Options",
         questions: "Questions",
+        sessions: "Sessions",
+        jump: "Jump",
+        list: "List",
         select: "Select",
         selectNext: "Select & Next",
         toggle: "Toggle",

package/dist/src/i18n/locales/ko.js

@@ -2,6 +2,9 @@ export const ko = {
     footer: {
         options: "옵션",
         questions: "질문",
+        sessions: "세션",
+        jump: "이동",
+        list: "목록",
         select: "선택",
         selectNext: "선택 후 다음",
         toggle: "토글",

package/dist/src/tui/components/Footer.js

@@ -7,7 +7,7 @@ const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧",
  * Footer component - displays context-aware keybindings
  * Shows different shortcuts based on current focus context and question type
  */
-export const Footer = ({ focusContext, multiSelect, isReviewScreen = false, customInputValue = "", hasRecommendedOptions = false, hasAnyRecommendedInSession = false, isSubmitting = false, }) => {
+export const Footer = ({ focusContext, multiSelect, isReviewScreen = false, showSessionSwitching = false, customInputValue = "", hasRecommendedOptions = false, hasAnyRecommendedInSession = false, isSubmitting = false, }) => {
     const { theme } = useTheme();
     const [spinnerFrame, setSpinnerFrame] = useState(0);
     // Animate spinner when submitting
@@ -68,6 +68,11 @@ export const Footer = ({ focusContext, multiSelect, isReviewScreen = false, cust
             if (hasAnyRecommendedInSession) {
                 bindings.push({ key: "Ctrl+R", action: t("footer.quickSubmit") });
             }
+            if (showSessionSwitching) {
+                bindings.push({ key: "Ctrl+]/[", action: t("footer.sessions") });
+                bindings.push({ key: "1-9", action: t("footer.jump") });
+                bindings.push({ key: "Ctrl+S", action: t("footer.list") });
+            }
             bindings.push({ key: "Ctrl+T", action: t("footer.theme") });
             bindings.push({ key: "Esc", action: t("footer.reject") });
             return bindings;

package/dist/src/tui/components/OptionsList.js

@@ -11,12 +11,20 @@ import { MultiLineTextInput } from "./MultiLineTextInput.js";
  * OptionsList displays answer choices and handles arrow key navigation
  * Uses ↑↓ to navigate, Enter to select
  */
-export const OptionsList = ({ isFocused, onSelect, options, selectedOption, showCustomInput = false, customValue = "", onCustomChange, onAdvance, multiSelect = false, onToggle, selectedOptions = [], onFocusContextChange, onRecommendedDetected, questionKey, autoSelectRecommended: autoSelectRecommendedProp, isElaborateMarked = false, onElaborateSelect, elaborateText = "", onElaborateTextChange, }) => {
+export const OptionsList = ({ isFocused, onSelect, options, selectedOption, showCustomInput = false, customValue = "", onCustomChange, onAdvance, multiSelect = false, onToggle, selectedOptions = [], focusedIndex: focusedIndexProp, onFocusedIndexChange, onFocusContextChange, onRecommendedDetected, questionKey, autoSelectRecommended: autoSelectRecommendedProp, isElaborateMarked = false, onElaborateSelect, elaborateText = "", onElaborateTextChange, }) => {
     const { theme } = useTheme();
     const config = useConfig();
     // Use prop if provided, otherwise use config value
     const autoSelectRecommended = autoSelectRecommendedProp ?? config.autoSelectRecommended;
-    const [focusedIndex, setFocusedIndex] = useState(0);
+    const [internalFocusedIndex, setInternalFocusedIndex] = useState(0);
+    const focusedIndex = focusedIndexProp ?? internalFocusedIndex;
+    const setFocusedIndex = (nextIndex) => {
+        const resolvedIndex = typeof nextIndex === "function" ? nextIndex(focusedIndex) : nextIndex;
+        if (focusedIndexProp === undefined) {
+            setInternalFocusedIndex(resolvedIndex);
+        }
+        onFocusedIndexChange?.(resolvedIndex);
+    };
     const { stdout } = useStdout();
     const columns = stdout?.columns ?? 80;
     const rowWidth = Math.max(20, columns - 2);
@@ -79,6 +87,11 @@ export const OptionsList = ({ isFocused, onSelect, options, selectedOption, show
     useEffect(() => {
         setFocusedIndex(0);
     }, [questionKey]);
+    useEffect(() => {
+        if (focusedIndex > maxIndex) {
+            setFocusedIndex(maxIndex);
+        }
+    }, [focusedIndex, maxIndex]);
     // Detect recommended options and notify parent
     useEffect(() => {
         const recommendedOptions = options.filter((opt) => isRecommendedOption(opt.label));
@@ -101,7 +114,7 @@ export const OptionsList = ({ isFocused, onSelect, options, selectedOption, show
         if (isCustomInputFocused) {
             if (key.escape) {
                 // Escape: Exit custom input mode and go back to option navigation
-                setFocusedIndex(options.length - 1); // Focus on last option
+                setFocusedIndex(Math.max(0, options.length - 1)); // Focus on last option
             }
             return;
         }

package/dist/src/tui/components/QuestionDisplay.js

@@ -1,5 +1,5 @@
 import { Box, Text } from "ink";
-import React, { useState } from "react";
+import React from "react";
 import { t } from "../../i18n/index.js";
 import { useTheme } from "../ThemeContext.js";
 import { Footer } from "./Footer.js";
@@ -10,13 +10,9 @@ import { TabBar } from "./TabBar.js";
  * QuestionDisplay shows a single question with its options
  * Includes TabBar, question prompt, options list, and footer
  */
-export const QuestionDisplay = ({ currentQuestion, currentQuestionIndex, customAnswer = "", elapsedLabel, onChangeCustomAnswer, onSelectOption, questions, selectedOption, onAdvanceToNext, answers, onToggleOption, multiSelect, onFocusContextChange, workingDirectory, onRecommendedDetected, hasRecommendedOptions, hasAnyRecommendedInSession, elaborateMarks, onElaborateSelect, elaborateText = "", onElaborateTextChange, }) => {
+export const QuestionDisplay = ({ currentQuestion, currentQuestionIndex, customAnswer = "", showSessionSwitching, elapsedLabel, onChangeCustomAnswer, onSelectOption, questions, selectedOption, onAdvanceToNext, answers, onToggleOption, multiSelect, focusContext, onFocusContextChange, focusedOptionIndex, onFocusedOptionIndexChange, workingDirectory, onRecommendedDetected, hasRecommendedOptions, hasAnyRecommendedInSession, elaborateMarks, onElaborateSelect, elaborateText = "", onElaborateTextChange, }) => {
     const { theme } = useTheme();
-    const [focusContext, setFocusContext] = useState("option");
-    const handleFocusContextChange = (context) => {
-        setFocusContext(context);
-        onFocusContextChange?.(context);
-    };
+    const FooterWithSessionSwitching = Footer;
     // Handle option selection - clears custom answer only in single-select mode
     const handleSelectOption = (label) => {
         onSelectOption(label);
@@ -48,6 +44,6 @@ export const QuestionDisplay = ({ currentQuestion, currentQuestionIndex, customA
                     "]")),
             React.createElement(Box, null,
                 React.createElement(Text, { color: theme.components.questionDisplay.elapsed, dimColor: true }, elapsedLabel))),
-        React.createElement(OptionsList, { customValue: customAnswer, isFocused: true, onAdvance: onAdvanceToNext, onCustomChange: handleCustomAnswerChange, onSelect: handleSelectOption, options: currentQuestion.options, selectedOption: selectedOption, showCustomInput: true, onToggle: onToggleOption, multiSelect: multiSelect, selectedOptions: answers.get(currentQuestionIndex)?.selectedOptions, onFocusContextChange: handleFocusContextChange, onRecommendedDetected: onRecommendedDetected, questionKey: currentQuestionIndex, isElaborateMarked: elaborateMarks?.has(currentQuestionIndex), onElaborateSelect: onElaborateSelect, elaborateText: elaborateText, onElaborateTextChange: onElaborateTextChange }),
-        React.createElement(Footer, { focusContext: focusContext, multiSelect: multiSelect ?? false, customInputValue: customAnswer, hasRecommendedOptions: hasRecommendedOptions, hasAnyRecommendedInSession: hasAnyRecommendedInSession })));
+        React.createElement(OptionsList, { customValue: customAnswer, isFocused: true, onAdvance: onAdvanceToNext, onCustomChange: handleCustomAnswerChange, onSelect: handleSelectOption, options: currentQuestion.options, selectedOption: selectedOption, showCustomInput: true, onToggle: onToggleOption, multiSelect: multiSelect, selectedOptions: answers.get(currentQuestionIndex)?.selectedOptions, onFocusContextChange: onFocusContextChange, focusedIndex: focusedOptionIndex, onFocusedIndexChange: onFocusedOptionIndexChange, onRecommendedDetected: onRecommendedDetected, questionKey: currentQuestionIndex, isElaborateMarked: elaborateMarks?.has(currentQuestionIndex), onElaborateSelect: onElaborateSelect, elaborateText: elaborateText, onElaborateTextChange: onElaborateTextChange }),
+        React.createElement(FooterWithSessionSwitching, { focusContext: focusContext, multiSelect: multiSelect ?? false, customInputValue: customAnswer, hasRecommendedOptions: hasRecommendedOptions, hasAnyRecommendedInSession: hasAnyRecommendedInSession, showSessionSwitching: showSessionSwitching })));
 };

package/dist/src/tui/components/SessionDots.js

@@ -0,0 +1,65 @@
+import { Box, Text } from "ink";
+import React from "react";
+import { useTheme } from "../ThemeContext.js";
+/* ------------------------------------------------------------------ */
+/*  Helpers                                                           */
+/* ------------------------------------------------------------------ */
+/** Check whether at least one answer in the map has meaningful content. */
+function hasAnswers(answers) {
+    if (!answers || answers.size === 0)
+        return false;
+    for (const ans of answers.values()) {
+        if (ans.selectedOption || ans.customText)
+            return true;
+        if (ans.selectedOptions && ans.selectedOptions.length > 0)
+            return true;
+    }
+    return false;
+}
+/* ------------------------------------------------------------------ */
+/*  Component                                                         */
+/* ------------------------------------------------------------------ */
+/**
+ * SessionDots — a compact row of numbered dots rendered below the footer.
+ *
+ * Visual language:
+ *   ● 1  ○ 2  ○ 3
+ *
+ * • Active session:   filled ● + bold number in theme primary
+ * • Has answers:      green (theme.success)
+ * • Touched/no answers: yellow (theme.warning)
+ * • Untouched:        dim   (theme.textDim)
+ */
+export const SessionDots = ({ sessions, activeIndex, sessionUIStates, }) => {
+    const { theme } = useTheme();
+    // Don't render when fewer than 2 sessions
+    if (sessions.length < 2)
+        return null;
+    return (React.createElement(Box, { justifyContent: "center", paddingX: 1 }, sessions.map((session, idx) => {
+        const isActive = idx === activeIndex;
+        const uiState = sessionUIStates[session.sessionId];
+        // Determine the progress color for this session's dot
+        let dotColor;
+        if (isActive) {
+            dotColor = theme.components.sessionDots.active;
+        }
+        else if (uiState && hasAnswers(uiState.answers)) {
+            dotColor = theme.components.sessionDots.answered;
+        }
+        else if (uiState) {
+            dotColor = theme.components.sessionDots.inProgress;
+        }
+        else {
+            dotColor = theme.components.sessionDots.untouched;
+        }
+        const dot = isActive ? "●" : "○";
+        const numberColor = isActive
+            ? theme.components.sessionDots.activeNumber
+            : theme.components.sessionDots.number;
+        return (React.createElement(Box, { key: session.sessionId, paddingRight: idx < sessions.length - 1 ? 1 : 0 },
+            React.createElement(Text, { color: dotColor, bold: isActive }, dot),
+            React.createElement(Text, { color: numberColor, bold: isActive },
+                " ",
+                idx + 1)));
+    })));
+};

package/dist/src/tui/components/SessionPicker.js

@@ -0,0 +1,159 @@
+import { Box, Text, useInput, useStdout } from "ink";
+import React, { useEffect, useState } from "react";
+import { useTheme } from "../ThemeContext.js";
+import { formatRelativeTime } from "../utils/relativeTime.js";
+/* ------------------------------------------------------------------ */
+/*  Helpers                                                           */
+/* ------------------------------------------------------------------ */
+function countAnswered(answers) {
+    if (!answers)
+        return 0;
+    let count = 0;
+    for (const ans of answers.values()) {
+        if (ans.selectedOption || ans.customText) {
+            count++;
+            continue;
+        }
+        if (ans.selectedOptions && ans.selectedOptions.length > 0)
+            count++;
+    }
+    return count;
+}
+function truncate(text, max) {
+    if (text.length <= max)
+        return text;
+    return text.slice(0, max - 1) + "…";
+}
+/* ------------------------------------------------------------------ */
+/*  Component                                                         */
+/* ------------------------------------------------------------------ */
+/**
+ * SessionPicker — a modal overlay listing all queued sessions.
+ *
+ * Opened via Ctrl+S. Each row shows:
+ *   {index}. {title} — {workDir}  [{answered}/{total}]  {age}
+ *
+ * Navigation:
+ *   ↑ / ↓ : move highlight
+ *   Enter  : select highlighted session
+ *   Esc    : close without switching
+ */
+export const SessionPicker = ({ isOpen, sessions, activeIndex, sessionUIStates, onSelectIndex, onClose, }) => {
+    const { theme } = useTheme();
+    const { stdout } = useStdout();
+    const termHeight = stdout?.rows ?? 24;
+    const termWidth = stdout?.columns ?? 80;
+    // ── Highlight state ──────────────────────────────────────────────
+    const [highlightIndex, setHighlightIndex] = useState(activeIndex);
+    // Reset highlight to active index each time the picker opens
+    useEffect(() => {
+        if (isOpen) {
+            setHighlightIndex(activeIndex);
+        }
+    }, [isOpen, activeIndex]);
+    // ── Keyboard handling (only active when overlay is open) ────────
+    useInput((input, key) => {
+        if (key.upArrow) {
+            setHighlightIndex((prev) => Math.max(0, prev - 1));
+        }
+        else if (key.downArrow) {
+            setHighlightIndex((prev) => Math.min(sessions.length - 1, prev + 1));
+        }
+        else if (key.return) {
+            onSelectIndex(highlightIndex);
+            onClose();
+        }
+        else if (key.escape) {
+            onClose();
+        }
+        else {
+            // Direct number jump (1-9)
+            const num = parseInt(input, 10);
+            if (num >= 1 && num <= sessions.length) {
+                onSelectIndex(num - 1);
+                onClose();
+            }
+        }
+    }, { isActive: isOpen });
+    // ── Render nothing when closed ──────────────────────────────────
+    if (!isOpen)
+        return null;
+    // ── Scrolling logic ─────────────────────────────────────────────
+    // Reserve lines for border (2), title (1), padding (2), footer hint (2)
+    const chromeLines = 7;
+    const maxVisibleRows = Math.max(1, termHeight - chromeLines);
+    const needsScroll = sessions.length > maxVisibleRows;
+    let scrollOffset = 0;
+    if (needsScroll) {
+        // Keep highlighted row centred in the visible window
+        scrollOffset = Math.max(0, Math.min(highlightIndex - Math.floor(maxVisibleRows / 2), sessions.length - maxVisibleRows));
+    }
+    const visibleSessions = sessions.slice(scrollOffset, scrollOffset + maxVisibleRows);
+    // ── Derive max label widths from terminal size ──────────────────
+    // Layout: " {idx}. {title} — {dir}  [{x}/{y}]  {age} "
+    // We cap the variable-width parts to fit a single line.
+    const innerWidth = Math.max(30, termWidth - 6); // 6 for border + padding
+    const fixedOverhead = 18; // " 1. " + " — " + "  [x/y]  " + " Xm ago"
+    const dynamicWidth = Math.max(10, innerWidth - fixedOverhead);
+    const titleMax = Math.max(6, Math.floor(dynamicWidth * 0.55));
+    const dirMax = Math.max(4, dynamicWidth - titleMax);
+    return (React.createElement(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center" },
+        React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.components.sessionPicker.border, paddingX: 2, paddingY: 1, width: Math.min(innerWidth + 6, termWidth) },
+            React.createElement(Box, { justifyContent: "center", marginBottom: 1 },
+                React.createElement(Text, { bold: true, color: theme.components.sessionPicker.title }, "Switch Session"),
+                React.createElement(Text, { color: theme.components.sessionPicker.rowDim },
+                    "  ",
+                    "(",
+                    sessions.length,
+                    " queued)")),
+            needsScroll && scrollOffset > 0 && (React.createElement(Box, { justifyContent: "center" },
+                React.createElement(Text, { color: theme.components.sessionPicker.rowDim }, "\u25B2 more"))),
+            visibleSessions.map((session, visibleIdx) => {
+                const realIdx = scrollOffset + visibleIdx;
+                const isHighlighted = realIdx === highlightIndex;
+                const isActive = realIdx === activeIndex;
+                const uiState = sessionUIStates[session.sessionId];
+                const questions = session.sessionRequest.questions;
+                const title = truncate(questions[0]?.title || "Untitled", titleMax);
+                const dir = truncate(session.sessionRequest.workingDirectory || "unknown", dirMax);
+                const total = questions.length;
+                const answered = countAnswered(uiState?.answers);
+                const age = formatRelativeTime(session.timestamp);
+                // Row colors
+                const rowBg = isHighlighted
+                    ? theme.components.sessionPicker.highlightBg
+                    : undefined;
+                const textColor = isHighlighted
+                    ? theme.components.sessionPicker.highlightFg
+                    : isActive
+                        ? theme.components.sessionPicker.activeMark
+                        : theme.components.sessionPicker.rowText;
+                // Progress color
+                const progressColor = answered === total && total > 0
+                    ? theme.components.sessionPicker.progress
+                    : answered > 0
+                        ? theme.components.sessionPicker.progress
+                        : theme.components.sessionPicker.rowDim;
+                return (React.createElement(Box, { key: session.sessionId },
+                    React.createElement(Text, { backgroundColor: rowBg, bold: isHighlighted, color: textColor },
+                        isActive ? "►" : " ",
+                        " ",
+                        realIdx + 1,
+                        ". ",
+                        title),
+                    React.createElement(Text, { backgroundColor: rowBg, color: theme.components.sessionPicker.rowDim },
+                        " — ",
+                        dir),
+                    React.createElement(Text, { backgroundColor: rowBg, color: progressColor },
+                        "  [",
+                        answered,
+                        "/",
+                        total,
+                        "]"),
+                    React.createElement(Text, { backgroundColor: rowBg, color: theme.components.sessionPicker.rowDim, dimColor: true }, age)));
+            }),
+            needsScroll && scrollOffset + maxVisibleRows < sessions.length && (React.createElement(Box, { justifyContent: "center" },
+                React.createElement(Text, { color: theme.components.sessionPicker.rowDim }, "\u25BC more"))),
+            React.createElement(Box, { justifyContent: "center", marginTop: 1 },
+                React.createElement(Text, { color: theme.components.sessionPicker.rowDim, dimColor: true }, "\u2191\u2193 navigate \u00B7 Enter select \u00B7 Esc close \u00B7 1-9 jump")))));
+};