auq-mcp-server 2.7.0 → 2.7.2

package/dist/src/tui-opentui/components/StepperView.js

@@ -0,0 +1,493 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { t } from "../../i18n/index.js";
+import { ResponseFormatter } from "../../session/ResponseFormatter.js";
+import { SessionManager } from "../../session/SessionManager.js";
+import { getSessionDirectory } from "../../session/utils.js";
+import { useTheme } from "../ThemeProvider.js";
+import { useConfig } from "../ConfigContext.js";
+import { useTerminalDimensions } from "../hooks/useTerminalDimensions.js";
+import { isRecommendedOption } from "../../tui/shared/utils/recommended.js";
+import { KEYS } from "../../tui/constants/keybindings.js";
+import { ConfirmationDialog } from "./ConfirmationDialog.js";
+import { QuestionDisplay } from "./QuestionDisplay.js";
+import { ReviewScreen } from "./ReviewScreen.js";
+/**
+ * StepperView orchestrates the question-answering flow.
+ * Manages state for current question, answers, and navigation.
+ */
+export const StepperView = ({ onComplete, onProgress, hasMultipleSessions, initialState, onStateSnapshot, onFlowStateChange, sessionId, sessionRequest, isAbandoned, onAbandonedCancel, }) => {
+    const { theme } = useTheme();
+    const config = useConfig();
+    const { height: terminalRows } = useTerminalDimensions();
+    const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+    const [answers, setAnswers] = useState(new Map());
+    const [showReview, setShowReview] = useState(false);
+    const [submitting, setSubmitting] = useState(false);
+    const [showRejectionConfirm, setShowRejectionConfirm] = useState(false);
+    const [showAbandonedConfirm, setShowAbandonedConfirm] = useState(false);
+    const [abandonedConfirmed, setAbandonedConfirmed] = useState(false);
+    const [abandonedFocusedIndex, setAbandonedFocusedIndex] = useState(0);
+    const [elapsedSeconds, setElapsedSeconds] = useState(0);
+    const [focusContext, setFocusContext] = useState("option");
+    const [focusedOptionIndex, setFocusedOptionIndex] = useState(0);
+    const [hasRecommendedOptions, setHasRecommendedOptions] = useState(false);
+    const [hasAnyRecommendedInSession, setHasAnyRecommendedInSession] = useState(false);
+    const [elaborateMarks, setElaborateMarks] = useState(new Map());
+    const safeIndex = Math.min(currentQuestionIndex, sessionRequest.questions.length - 1);
+    const currentQuestion = sessionRequest.questions[safeIndex];
+    const sessionCreatedAt = useMemo(() => {
+        const parsed = Date.parse(sessionRequest.timestamp);
+        return Number.isNaN(parsed) ? Date.now() : parsed;
+    }, [sessionRequest.timestamp]);
+    const elapsedLabel = useMemo(() => {
+        const hours = Math.floor(elapsedSeconds / 3600);
+        const minutes = Math.floor((elapsedSeconds % 3600) / 60);
+        const seconds = elapsedSeconds % 60;
+        return [hours, minutes, seconds]
+            .map((value) => value.toString().padStart(2, "0"))
+            .join(":");
+    }, [elapsedSeconds]);
+    // Detect content overflow to pause periodic re-renders
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    const isOverflowingRef = useRef(isOverflowing);
+    isOverflowingRef.current = isOverflowing;
+    // Report progress when question index changes
+    useEffect(() => {
+        if (onProgress) {
+            const answered = showReview
+                ? sessionRequest.questions.length
+                : currentQuestionIndex;
+            onProgress(answered, sessionRequest.questions.length);
+        }
+    }, [
+        currentQuestionIndex,
+        showReview,
+        sessionRequest.questions.length,
+        onProgress,
+    ]);
+    // Reset focused option to first when switching between questions
+    useEffect(() => {
+        setFocusedOptionIndex(0);
+    }, [currentQuestionIndex]);
+    // Handle option selection (single-select mode)
+    const handleSelectOption = (label) => {
+        setAnswers((prev) => {
+            const newAnswers = new Map(prev);
+            const existing = newAnswers.get(currentQuestionIndex) || {};
+            newAnswers.set(currentQuestionIndex, {
+                ...existing,
+                selectedOption: label,
+            });
+            return newAnswers;
+        });
+        // Clear elaborate mark when selecting a regular option (single-select behavior)
+        setElaborateMarks((prev) => {
+            if (prev.has(currentQuestionIndex)) {
+                const newMarks = new Map(prev);
+                newMarks.delete(currentQuestionIndex);
+                return newMarks;
+            }
+            return prev;
+        });
+    };
+    const handleToggleOption = (label) => {
+        setAnswers((prev) => {
+            const newAnswers = new Map(prev);
+            const existing = newAnswers.get(currentQuestionIndex) || {};
+            const currentSelections = existing.selectedOptions || [];
+            const isAdding = !currentSelections.includes(label);
+            const newSelections = isAdding
+                ? [...currentSelections, label]
+                : currentSelections.filter((l) => l !== label);
+            newAnswers.set(currentQuestionIndex, {
+                selectedOptions: newSelections,
+                customText: existing.customText,
+            });
+            return newAnswers;
+        });
+        // Clear elaboration when selecting a regular option (mutually exclusive)
+        const currentSelections = answers.get(currentQuestionIndex)?.selectedOptions || [];
+        const isAdding = !currentSelections.includes(label);
+        if (isAdding && elaborateMarks.has(currentQuestionIndex)) {
+            setElaborateMarks((prev) => {
+                const newMarks = new Map(prev);
+                newMarks.delete(currentQuestionIndex);
+                return newMarks;
+            });
+        }
+    };
+    // Handle custom answer text
+    const handleChangeCustomAnswer = (text) => {
+        setAnswers((prev) => {
+            const newAnswers = new Map(prev);
+            const existing = newAnswers.get(currentQuestionIndex) || {};
+            newAnswers.set(currentQuestionIndex, {
+                ...existing,
+                customText: text,
+            });
+            return newAnswers;
+        });
+        // Clear elaboration when typing custom text (mutually exclusive)
+        if (text.trim().length > 0 && elaborateMarks.has(currentQuestionIndex)) {
+            setElaborateMarks((prev) => {
+                const newMarks = new Map(prev);
+                newMarks.delete(currentQuestionIndex);
+                return newMarks;
+            });
+        }
+    };
+    // Track mount status to avoid state updates after unmount
+    const isMountedRef = useRef(true);
+    const skipSnapshotRef = useRef(true);
+    const sessionIdRef = useRef(null);
+    useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+    // Reset internal stepper state when the session changes
+    useEffect(() => {
+        // Only run full initialization when the session actually changes.
+        // When a snapshot is saved (cursor movement), initialState prop changes but
+        // sessionId stays the same — skip the reset to avoid resetting the timer.
+        if (sessionId === sessionIdRef.current)
+            return;
+        sessionIdRef.current = sessionId;
+        const maxQuestionIndex = Math.max(0, sessionRequest.questions.length - 1);
+        if (initialState) {
+            const hydratedQuestionIndex = Math.min(Math.max(initialState.currentQuestionIndex, 0), maxQuestionIndex);
+            const hydratedQuestion = sessionRequest.questions[hydratedQuestionIndex];
+            const maxFocusedOptionIndex = (hydratedQuestion?.options.length ?? 0) + 1;
+            setCurrentQuestionIndex(hydratedQuestionIndex);
+            setAnswers(new Map(initialState.answers));
+            setElaborateMarks(new Map(initialState.elaborateMarks));
+            setFocusContext(initialState.focusContext);
+            setFocusedOptionIndex(Math.min(Math.max(initialState.focusedOptionIndex, 0), Math.max(0, maxFocusedOptionIndex)));
+            setShowReview(initialState.showReview);
+        }
+        else {
+            setCurrentQuestionIndex(0);
+            setAnswers(new Map());
+            setElaborateMarks(new Map());
+            setFocusContext("option");
+            setFocusedOptionIndex(0);
+            setShowReview(false);
+        }
+        setSubmitting(false);
+        setShowRejectionConfirm(false);
+        setElapsedSeconds(0);
+        skipSnapshotRef.current = true;
+        // Compute session-level recommended flag
+        const anyHasRecommended = sessionRequest.questions.some((question) => question.options.some((opt) => isRecommendedOption(opt.label)));
+        setHasAnyRecommendedInSession(anyHasRecommended);
+    }, [initialState, sessionId, sessionRequest.questions]);
+    // Show abandoned confirmation when entering an abandoned session
+    useEffect(() => {
+        if (isAbandoned && !abandonedConfirmed) {
+            setShowAbandonedConfirm(true);
+            setAbandonedFocusedIndex(0);
+        }
+        else {
+            setShowAbandonedConfirm(false);
+        }
+    }, [sessionId, isAbandoned, abandonedConfirmed]);
+    // Emit state snapshot on changes
+    useEffect(() => {
+        if (!onStateSnapshot) {
+            return;
+        }
+        if (skipSnapshotRef.current) {
+            skipSnapshotRef.current = false;
+            return;
+        }
+        onStateSnapshot(sessionId, {
+            currentQuestionIndex,
+            answers: new Map(answers),
+            elaborateMarks: new Map(elaborateMarks),
+            focusContext,
+            focusedOptionIndex,
+            showReview,
+        });
+    }, [
+        answers,
+        currentQuestionIndex,
+        elaborateMarks,
+        focusContext,
+        focusedOptionIndex,
+        onStateSnapshot,
+        sessionId,
+        showReview,
+    ]);
+    // Emit flow state changes
+    useEffect(() => {
+        onFlowStateChange?.({ showReview, showRejectionConfirm, showAbandonedConfirm });
+    }, [onFlowStateChange, showRejectionConfirm, showReview, showAbandonedConfirm]);
+    // Update elapsed time since session creation
+    useEffect(() => {
+        const timer = setInterval(() => {
+            if (isOverflowingRef.current)
+                return;
+            const elapsed = Math.floor((Date.now() - sessionCreatedAt) / 1000);
+            setElapsedSeconds(elapsed >= 0 ? elapsed : 0);
+        }, 1000);
+        return () => clearInterval(timer);
+    }, [sessionCreatedAt]);
+    // Detect overflow: estimate content height vs terminal rows
+    useEffect(() => {
+        const currentQ = sessionRequest.questions[safeIndex];
+        const optionCount = currentQ?.options?.length ?? 0;
+        const estimatedContentHeight = 2 + 3 + 3 + optionCount * 2 + 2 + 6 + 2;
+        const nextOverflow = estimatedContentHeight > terminalRows;
+        setIsOverflowing((prev) => (prev === nextOverflow ? prev : nextOverflow));
+    }, [safeIndex, sessionRequest.questions, terminalRows]);
+    // Handle answer confirmation
+    const handleConfirm = async (userAnswers) => {
+        setSubmitting(true);
+        try {
+            const sessionManager = new SessionManager({
+                baseDir: getSessionDirectory(),
+            });
+            // Add elaborate requests for marked questions
+            const allAnswers = [...userAnswers];
+            elaborateMarks.forEach((customExplanation, questionIndex) => {
+                const question = sessionRequest.questions[questionIndex];
+                if (question) {
+                    const elaborateRequest = ResponseFormatter.formatElaborateRequest(questionIndex, question.title, question.prompt, customExplanation || undefined);
+                    allAnswers.push({
+                        questionIndex,
+                        customText: elaborateRequest,
+                        timestamp: new Date().toISOString(),
+                    });
+                }
+            });
+            await sessionManager.saveSessionAnswers(sessionId, {
+                answers: allAnswers,
+                sessionId,
+                timestamp: new Date().toISOString(),
+                callId: sessionRequest.callId,
+            });
+            onComplete?.(false);
+        }
+        catch (error) {
+            console.error("Failed to save answers:", error);
+        }
+        finally {
+            if (isMountedRef.current) {
+                setSubmitting(false);
+            }
+        }
+    };
+    // Handle going back from review
+    const handleGoBack = () => {
+        setShowReview(false);
+    };
+    // Handle advance to next question or review
+    const handleAdvanceToNext = () => {
+        if (currentQuestionIndex < sessionRequest.questions.length - 1) {
+            setCurrentQuestionIndex((prev) => prev + 1);
+        }
+        else {
+            setShowReview(true);
+        }
+    };
+    // Handle session rejection
+    const handleRejectSession = async (reason) => {
+        try {
+            const sessionManager = new SessionManager({
+                baseDir: getSessionDirectory(),
+            });
+            await sessionManager.rejectSession(sessionId, reason);
+            if (onComplete) {
+                onComplete(true, reason);
+            }
+        }
+        catch (error) {
+            console.error("Failed to reject session:", error);
+            setShowRejectionConfirm(false);
+        }
+    };
+    // Handle elaborate option selection
+    const handleElaborateSelect = () => {
+        const isMarking = !elaborateMarks.has(currentQuestionIndex);
+        setElaborateMarks((prev) => {
+            const newMarks = new Map(prev);
+            if (newMarks.has(currentQuestionIndex)) {
+                newMarks.delete(currentQuestionIndex);
+            }
+            else {
+                const existingText = prev.get(currentQuestionIndex) || "";
+                newMarks.set(currentQuestionIndex, existingText);
+            }
+            return newMarks;
+        });
+        // In single-select mode, clear selected option when marking elaborate
+        if (isMarking && !currentQuestion.multiSelect) {
+            setAnswers((prev) => {
+                const existing = prev.get(currentQuestionIndex);
+                if (existing?.selectedOption) {
+                    const newAnswers = new Map(prev);
+                    newAnswers.set(currentQuestionIndex, {
+                        ...existing,
+                        selectedOption: undefined,
+                    });
+                    return newAnswers;
+                }
+                return prev;
+            });
+        }
+    };
+    // Handle elaborate text change
+    const handleElaborateTextChange = (text) => {
+        setElaborateMarks((prev) => {
+            const newMarks = new Map(prev);
+            newMarks.set(currentQuestionIndex, text);
+            return newMarks;
+        });
+    };
+    // Keyboard handling for abandoned confirmation dialog
+    useKeyboard((key) => {
+        if (!showAbandonedConfirm)
+            return;
+        if (key.name === "up") {
+            setAbandonedFocusedIndex((prev) => Math.max(0, prev - 1));
+        }
+        if (key.name === "down") {
+            setAbandonedFocusedIndex((prev) => Math.min(1, prev + 1));
+        }
+        if (key.name === "return") {
+            if (abandonedFocusedIndex === 0) {
+                setAbandonedConfirmed(true);
+                setShowAbandonedConfirm(false);
+            }
+            else {
+                onAbandonedCancel?.();
+            }
+        }
+        if (key.name === "escape") {
+            onAbandonedCancel?.();
+        }
+    });
+    // Global keyboard shortcuts and navigation
+    useKeyboard((key) => {
+        // Don't handle navigation when showing review, submitting, or confirming
+        if (showReview || submitting || showRejectionConfirm || showAbandonedConfirm)
+            return;
+        // Derive text-input state from both focusContext and focusedOptionIndex
+        const isInTextInput = focusContext !== "option" ||
+            focusedOptionIndex >= currentQuestion.options.length;
+        // Esc key - show rejection confirmation
+        if (key.name === "escape") {
+            setShowRejectionConfirm(true);
+            return;
+        }
+        // Ctrl+R: Quick submit with recommended options
+        if (key.name?.toLowerCase() === KEYS.QUICK_SUBMIT &&
+            key.ctrl &&
+            hasAnyRecommendedInSession &&
+            !isInTextInput) {
+            const newAnswers = new Map(answers);
+            for (let i = 0; i < sessionRequest.questions.length; i++) {
+                const question = sessionRequest.questions[i];
+                const existingAnswer = newAnswers.get(i);
+                // Skip if already answered
+                if (existingAnswer?.selectedOption ||
+                    existingAnswer?.selectedOptions?.length ||
+                    existingAnswer?.customText) {
+                    continue;
+                }
+                const recommendedOptions = question.options.filter((opt) => isRecommendedOption(opt.label));
+                if (recommendedOptions.length > 0) {
+                    if (question.multiSelect) {
+                        newAnswers.set(i, {
+                            selectedOptions: recommendedOptions.map((opt) => opt.label),
+                        });
+                    }
+                    else {
+                        newAnswers.set(i, {
+                            selectedOption: recommendedOptions[0].label,
+                        });
+                    }
+                }
+            }
+            setAnswers(newAnswers);
+            setShowReview(true);
+            return;
+        }
+        // R key: Select recommended options for current question
+        if (key.name?.toLowerCase() === KEYS.RECOMMEND &&
+            !key.ctrl &&
+            !isInTextInput &&
+            hasRecommendedOptions) {
+            const question = currentQuestion;
+            const recommendedOptions = question.options.filter((opt) => isRecommendedOption(opt.label));
+            if (recommendedOptions.length > 0) {
+                if (question.multiSelect) {
+                    setAnswers((prev) => {
+                        const newAnswers = new Map(prev);
+                        newAnswers.set(currentQuestionIndex, {
+                            ...newAnswers.get(currentQuestionIndex),
+                            selectedOptions: recommendedOptions.map((opt) => opt.label),
+                        });
+                        return newAnswers;
+                    });
+                }
+                else {
+                    handleSelectOption(recommendedOptions[0].label);
+                }
+            }
+            return;
+        }
+        // Tab/Shift+Tab: Global question navigation
+        if (key.name === "tab" && !isInTextInput) {
+            if (key.shift) {
+                setCurrentQuestionIndex((prev) => Math.max(0, prev - 1));
+            }
+            else {
+                setCurrentQuestionIndex((prev) => Math.min(sessionRequest.questions.length - 1, prev + 1));
+            }
+            return;
+        }
+        // Left/Right arrow: question navigation (only when NOT in text input)
+        if (!isInTextInput && key.name === "left" && currentQuestionIndex > 0) {
+            setCurrentQuestionIndex((prev) => prev - 1);
+        }
+        if (!isInTextInput &&
+            key.name === "right" &&
+            currentQuestionIndex < sessionRequest.questions.length - 1) {
+            setCurrentQuestionIndex((prev) => prev + 1);
+        }
+    });
+    const currentAnswer = answers.get(currentQuestionIndex);
+    // Show abandoned session confirmation
+    if (showAbandonedConfirm) {
+        const abandonedOptions = [
+            { label: t("abandoned.continue") },
+            { label: t("abandoned.cancel") },
+        ];
+        return (_jsx("box", { style: { flexDirection: "column", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1 }, children: _jsxs("box", { style: {
+                    borderStyle: "rounded",
+                    borderColor: theme.borders.warning,
+                    flexDirection: "column",
+                    padding: 1,
+                }, children: [_jsx("box", { style: { marginBottom: 1 }, children: _jsx("text", { style: { fg: theme.colors.warning, bold: true }, children: t("abandoned.title") }) }), _jsx("box", { style: { marginBottom: 1 }, children: _jsx("text", { children: t("abandoned.message") }) }), abandonedOptions.map((option, index) => {
+                        const isFocused = index === abandonedFocusedIndex;
+                        const rowBg = isFocused
+                            ? theme.components.options.focusedBg
+                            : undefined;
+                        return (_jsx("box", { style: { marginTop: index > 0 ? 1 : 0 }, children: _jsx("text", { bg: rowBg, fg: isFocused ? theme.colors.focused : theme.colors.text, style: { bold: isFocused }, children: `${isFocused ? "> " : "  "}${option.label}` }) }, index));
+                    }), _jsx("box", { style: { marginTop: 1 }, children: _jsx("text", { fg: theme.colors.textDim, children: "\u2191\u2193 Navigate | Enter Select" }) })] }) }));
+    }
+    // Show rejection confirmation
+    if (showRejectionConfirm) {
+        return (_jsx("box", { style: { flexDirection: "column", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1 }, children: _jsx(ConfirmationDialog, { message: t("confirmation.rejectMessage"), onCancel: () => setShowRejectionConfirm(false), onQuit: () => process.exit(0), onReject: handleRejectSession }) }));
+    }
+    // Show review screen
+    if (showReview) {
+        return (_jsx("box", { style: { flexDirection: "column", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1 }, children: _jsx(ReviewScreen, { isSubmitting: submitting, answers: answers, elapsedLabel: elapsedLabel, onConfirm: handleConfirm, onGoBack: handleGoBack, questions: sessionRequest.questions, sessionId: sessionId, elaborateMarks: elaborateMarks }) }));
+    }
+    // Show question display (default)
+    return (_jsx("box", { style: { flexDirection: "column", paddingLeft: 2, paddingRight: 2 }, children: _jsx(QuestionDisplay, { currentQuestion: currentQuestion, currentQuestionIndex: currentQuestionIndex, customAnswer: currentAnswer?.customText, elapsedLabel: elapsedLabel, onAdvanceToNext: handleAdvanceToNext, onChangeCustomAnswer: handleChangeCustomAnswer, onSelectOption: handleSelectOption, onToggleOption: handleToggleOption, multiSelect: currentQuestion.multiSelect, questions: sessionRequest.questions, selectedOption: currentAnswer?.selectedOption, answers: answers, focusContext: focusContext, onFocusContextChange: setFocusContext, focusedOptionIndex: focusedOptionIndex, onFocusedOptionIndexChange: setFocusedOptionIndex, workingDirectory: sessionRequest.workingDirectory, onRecommendedDetected: setHasRecommendedOptions, hasRecommendedOptions: hasRecommendedOptions, hasAnyRecommendedInSession: hasAnyRecommendedInSession, elaborateMarks: elaborateMarks, onElaborateSelect: handleElaborateSelect, elaborateText: elaborateMarks.get(currentQuestionIndex) || "", onElaborateTextChange: handleElaborateTextChange, onSelectIndex: (idx) => setCurrentQuestionIndex(Math.max(0, Math.min(idx, sessionRequest.questions.length - 1))), showSessionSwitching: hasMultipleSessions && !showReview && !showRejectionConfirm }) }));
+};

package/dist/src/tui-opentui/components/TabBar.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useTheme } from "../ThemeProvider.js";
+import { useTerminalDimensions } from "../hooks/useTerminalDimensions.js";
+/* ------------------------------------------------------------------ */
+/*  Helpers                                                           */
+/* ------------------------------------------------------------------ */
+/** Simple visual-width truncation with ellipsis. */
+function truncate(value, maxChars) {
+    if (maxChars <= 0)
+        return "";
+    if (value.length <= maxChars)
+        return value;
+    return value.slice(0, maxChars - 1) + "…";
+}
+const isAnswerPresent = (answer) => {
+    if (!answer)
+        return false;
+    if (answer.selectedOption)
+        return true;
+    if (answer.customText)
+        return true;
+    if (answer.selectedOptions && answer.selectedOptions.length > 0)
+        return true;
+    return false;
+};
+/* ------------------------------------------------------------------ */
+/*  Component                                                         */
+/* ------------------------------------------------------------------ */
+/**
+ * TabBar — minimal question tab strip with progress indicators.
+ *
+ * Active tab is clearly indicated; answered state is shown subtly via color.
+ * Status symbols: ✓ answered, ⟲ elaborate, · unanswered
+ */
+export const TabBar = ({ currentIndex, questions, answers, tabLabel, elaborateMarks, onSelectIndex, }) => {
+    const { theme } = useTheme();
+    const { width: columns } = useTerminalDimensions();
+    // A little breathing room at both edges.
+    const paddingX = 2;
+    const innerWidth = Math.max(0, columns - paddingX * 2);
+    const answeredCount = questions.reduce((count, _q, index) => {
+        const answer = answers.get(index);
+        return count + (isAnswerPresent(answer) ? 1 : 0);
+    }, 0);
+    const progressText = `${answeredCount}/${questions.length}`;
+    const separator = " │ ";
+    const separatorLen = separator.length;
+    // Build labels and keep the entire bar to a single line.
+    const labelCount = Math.max(questions.length, 1);
+    const maxLeftWidth = Math.max(0, innerWidth - progressText.length - 1);
+    const availableForLabels = Math.max(0, maxLeftWidth - separatorLen * (labelCount - 1));
+    const maxLabelChars = Math.max(4, Math.floor(availableForLabels / labelCount));
+    const tabs = questions.map((question, index) => {
+        const isActive = index === currentIndex;
+        const answer = answers.get(index);
+        const isAnswered = isAnswerPresent(answer);
+        const isElaborate = elaborateMarks?.has(index) ?? false;
+        const baseLabel = tabLabel || question.title || `Question ${index + 1}`;
+        const label = truncate(baseLabel, maxLabelChars - 2);
+        const status = isElaborate ? "⟲" : isAnswered ? "✓" : "·";
+        return { index, isActive, isAnswered, isElaborate, label, status };
+    });
+    return (_jsxs("box", { style: { flexDirection: "row", width: columns, paddingLeft: paddingX, paddingRight: paddingX, justifyContent: "space-between" }, children: [_jsx("box", { style: { flexDirection: "row" }, children: tabs.map((tab, idx) => (_jsxs("box", { style: { flexDirection: "row", backgroundColor: tab.isActive ? theme.colors.surfaceAlt : undefined, paddingLeft: tab.isActive ? 1 : 0, paddingRight: tab.isActive ? 1 : 0 }, onMouseDown: () => onSelectIndex?.(tab.index), children: [_jsx("text", { style: {
+                                fg: tab.isElaborate
+                                    ? theme.colors.warning
+                                    : tab.isAnswered
+                                        ? theme.components.tabBar.answered
+                                        : theme.colors.unansweredHighlight,
+                            }, children: tab.status }), _jsx("text", { children: " " }), _jsx("text", { style: {
+                                bold: tab.isActive,
+                                underline: tab.isActive,
+                                fg: tab.isActive
+                                    ? theme.colors.primary
+                                    : tab.isAnswered
+                                        ? theme.components.tabBar.answered
+                                        : theme.components.tabBar.unanswered,
+                                dim: !tab.isActive && !tab.isAnswered,
+                            }, children: tab.label }), idx < tabs.length - 1 ? (_jsx("text", { style: { fg: theme.components.tabBar.divider }, children: separator })) : null] }, tab.index))) }), _jsx("text", { style: { fg: theme.colors.textDim, dim: true }, children: progressText })] }));
+};

package/dist/src/tui-opentui/components/ThemeIndicator.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { t } from "../../i18n/index.js";
+import { useTheme } from "../ThemeProvider.js";
+/**
+ * ThemeIndicator — shows a temporary centered notification when theme changes.
+ * Displays for 1.5 seconds then hides.
+ */
+export const ThemeIndicator = () => {
+    const { theme, themeName } = useTheme();
+    const [visible, setVisible] = useState(false);
+    const prevThemeRef = useRef(themeName);
+    const isFirstRender = useRef(true);
+    useEffect(() => {
+        // Skip showing indicator on first render
+        if (isFirstRender.current) {
+            isFirstRender.current = false;
+            prevThemeRef.current = themeName;
+            return;
+        }
+        // Only show when theme actually changes
+        if (themeName !== prevThemeRef.current) {
+            prevThemeRef.current = themeName;
+            setVisible(true);
+            const timer = setTimeout(() => {
+                setVisible(false);
+            }, 1500);
+            return () => clearTimeout(timer);
+        }
+    }, [themeName]);
+    if (!visible) {
+        return null;
+    }
+    return (_jsx("box", { style: { justifyContent: "center", marginTop: 0, marginBottom: 0 }, children: _jsxs("box", { style: { flexDirection: "row" }, children: [_jsx("text", { style: { fg: theme.colors.textDim }, children: `${t("ui.themeLabel")} ` }), _jsx("text", { style: { fg: theme.colors.primary }, children: themeName })] }) }));
+};

package/dist/src/tui-opentui/components/Toast.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { TextAttributes } from "@opentui/core";
+import { useTheme } from "../ThemeProvider.js";
+/**
+ * Toast component for brief non-blocking notifications.
+ * Auto-dismisses after specified duration (default 3000ms).
+ * Uses OpenTUI Timeline for smooth lifecycle management.
+ */
+export const Toast = ({ message, type = "success", onDismiss, duration = 3000, title, variant = "default", }) => {
+    const { theme } = useTheme();
+    const [visible, setVisible] = useState(true);
+    // Auto-dismiss after duration
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            setVisible(false);
+            onDismiss();
+        }, duration);
+        return () => clearTimeout(timer);
+    }, [duration, onDismiss]);
+    if (!visible)
+        return null;
+    // Color based on type
+    const colorMap = {
+        success: theme.components.toast.success,
+        error: theme.components.toast.error,
+        info: theme.components.toast.info,
+        warning: theme.colors.warning,
+    };
+    const color = colorMap[type] ?? theme.components.toast.info;
+    const isPill = variant === "pill";
+    const backgroundColor = isPill && type === "success"
+        ? theme.components.toast.successPillBg
+        : undefined;
+    return (_jsxs("box", { style: {
+            borderColor: theme.components.toast.border,
+            borderStyle: isPill ? undefined : "rounded",
+            backgroundColor: backgroundColor,
+            justifyContent: isPill ? "center" : undefined,
+            paddingX: 2,
+            paddingY: 0,
+            flexDirection: "column",
+        }, children: [title && (_jsx("text", { style: { fg: color, attributes: TextAttributes.BOLD }, children: title })), message && (_jsx("text", { style: { fg: theme.colors.text }, children: message }))] }));
+};

package/dist/src/tui-opentui/components/UpdateBadge.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { useTheme } from "../ThemeProvider.js";
+/**
+ * UpdateBadge — compact header indicator when a new version is available.
+ *
+ * Color-coding by severity:
+ *   patch  → success (green)  — minor fix
+ *   minor  → warning (yellow) — new features
+ *   major  → error  (red)     — possible breaking changes
+ */
+export const UpdateBadge = ({ updateType, latestVersion, }) => {
+    const { theme } = useTheme();
+    const colorMap = {
+        patch: theme.colors.success,
+        minor: theme.colors.warning,
+        major: theme.colors.error,
+    };
+    const color = colorMap[updateType] ?? theme.colors.info;
+    // Patch updates are concise; minor/major show the target version
+    const label = updateType === "patch"
+        ? "↑ Update"
+        : `↑ v${latestVersion}`;
+    return (_jsx("box", { style: { marginLeft: 1 }, children: _jsx("text", { style: { bg: color, fg: "#000000", bold: true }, children: ` ${label} ` }) }));
+};