auq-mcp-server 2.1.0 → 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.0",
+    "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

@@ -4,25 +4,62 @@ import { t } from "../../i18n/index.js";
 import { useConfig } from "../ConfigContext.js";
 import { useTheme } from "../ThemeContext.js";
 import { isRecommendedOption } from "../utils/recommended.js";
-import { fitToVisualWidth } from "../utils/visualWidth.js";
+import { fitToVisualWidth, getVisualWidth, padToVisualWidth, } from "../utils/visualWidth.js";
 import { MultiLineTextInput } from "./MultiLineTextInput.js";
 // isRecommendedOption is imported from ../utils/recommended.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);
     const fitRow = (text) => {
         return fitToVisualWidth(text, rowWidth);
     };
+    // Wrap text to multiple lines respecting visual width and explicit newlines
+    const wrapText = (text, width) => {
+        // First split on explicit newlines, then wrap each segment by visual width
+        const segments = text.split("\n");
+        const lines = [];
+        for (const segment of segments) {
+            if (getVisualWidth(segment) <= width) {
+                lines.push(segment);
+                continue;
+            }
+            let currentLine = "";
+            let currentWidth = 0;
+            for (const char of segment) {
+                const charWidth = getVisualWidth(char);
+                if (currentWidth + charWidth > width && currentLine.length > 0) {
+                    lines.push(currentLine);
+                    currentLine = char;
+                    currentWidth = charWidth;
+                }
+                else {
+                    currentLine += char;
+                    currentWidth += charWidth;
+                }
+            }
+            if (currentLine)
+                lines.push(currentLine);
+        }
+        return lines;
+    };
     // Calculate max index: include custom input and elaborate options if enabled
     // Options: [0..n-1] = regular options, [n] = custom input, [n+1] = elaborate
     const customInputIndex = options.length;
@@ -50,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));
@@ -72,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;
         }
@@ -141,11 +183,41 @@ export const OptionsList = ({ isFocused, onSelect, options, selectedOption, show
                 : `${isFocusedOption ? ">" : " "} ${option.label}${isSelected ? " ✓" : ""}${starSuffix}`;
             return (React.createElement(Box, { key: index, flexDirection: "column" },
                 React.createElement(Text, { backgroundColor: rowBg, bold: isFocusedOption || isSelected, color: rowColor }, fitRow(mainLine)),
-                option.description && (React.createElement(Text, { backgroundColor: isFocusedOption
-                        ? theme.components.options.focusedBg
-                        : isSelected
-                            ? theme.components.options.selectedBg
-                            : undefined, color: theme.components.options.description, dimColor: !isFocusedOption && !isSelected }, fitRow(`   ${option.description}`)))));
+                option.description &&
+                    (() => {
+                        const descText = `   ${option.description}`;
+                        const descBg = isFocusedOption
+                            ? theme.components.options.focusedBg
+                            : isSelected
+                                ? theme.components.options.selectedBg
+                                : undefined;
+                        const wouldWrap = descText.includes("\n") ||
+                            getVisualWidth(descText) > rowWidth;
+                        if (isFocusedOption && wouldWrap) {
+                            // Focused + multi-line: show full description wrapped across lines
+                            const wrappedLines = wrapText(descText, rowWidth);
+                            return (React.createElement(Box, { flexDirection: "column" }, wrappedLines.map((line, lineIdx) => (React.createElement(Text, { key: lineIdx, backgroundColor: descBg, color: theme.components.options.description, dimColor: false }, padToVisualWidth(line, rowWidth))))));
+                        }
+                        else if (!isFocusedOption && wouldWrap) {
+                            // Not focused + would wrap: truncate to 1 line with "..."
+                            const maxWidth = rowWidth - 3; // Reserve 3 chars for "..."
+                            let result = "";
+                            let width = 0;
+                            for (const char of descText) {
+                                const charWidth = getVisualWidth(char);
+                                if (width + charWidth > maxWidth)
+                                    break;
+                                result += char;
+                                width += charWidth;
+                            }
+                            const finalText = `${result}...`;
+                            return (React.createElement(Text, { backgroundColor: descBg, color: theme.components.options.description, dimColor: true }, padToVisualWidth(finalText, rowWidth)));
+                        }
+                        else {
+                            // Fits in 1 line (focused or not): show normally with padding
+                            return (React.createElement(Text, { backgroundColor: descBg, color: theme.components.options.description, dimColor: !isFocusedOption && !isSelected }, fitRow(descText)));
+                        }
+                    })()));
         }),
         showCustomInput && (React.createElement(Box, { marginTop: 0 },
             React.createElement(Box, { flexDirection: "column" },

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)));
+    })));
+};