auq-mcp-server 2.7.1 → 2.7.2

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useTheme } from "../ThemeProvider.js";
+/** Hex string → [r, g, b] tuple */
+function hexToRgb(hex) {
+    const h = hex.replace("#", "");
+    return [parseInt(h.slice(0, 2), 16), parseInt(h.slice(2, 4), 16), parseInt(h.slice(4, 6), 16)];
+}
+/** [r, g, b] tuple → hex string */
+function rgbToHex(r, g, b) {
+    return ("#" +
+        [r, g, b]
+            .map((v) => Math.max(0, Math.min(255, Math.round(v))).toString(16).padStart(2, "0"))
+            .join(""));
+}
+/** Linear interpolation between two hex colours */
+function lerpColor(a, b, t) {
+    const [ar, ag, ab] = hexToRgb(a);
+    const [br, bg, bb] = hexToRgb(b);
+    return rgbToHex(ar + (br - ar) * t, ag + (bg - ag) * t, ab + (bb - ab) * t);
+}
+/**
+ * AnimatedGradient – flowing gradient text for OpenTUI.
+ *
+ * Renders each character in its own <text> element with a per-character
+ * foreground colour derived from the theme gradient palette, animated
+ * with a sine-wave shimmer at `fps` frames/sec.
+ *
+ * IMPORTANT: We do NOT use gradient-string here because that library
+ * produces ANSI escape sequences which OpenTUI renders as literal text.
+ * Instead each character gets its own <text style={{ fg: hexColor }}> leaf.
+ */
+export const AnimatedGradient = ({ text, flowSpeed = 0.5, fps = 30, }) => {
+    const { theme } = useTheme();
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+        const id = setInterval(() => {
+            setFrame((f) => f + 1);
+        }, 1000 / fps);
+        return () => clearInterval(id);
+    }, [fps]);
+    const chars = text.split("");
+    const total = chars.length || 1;
+    const elements = chars.map((char, i) => {
+        // Sine-wave phase: each char has a different phase offset, frame advances it
+        const phase = (i / total) * Math.PI * 2 + frame * flowSpeed * 0.1;
+        const t = (Math.sin(phase) + 1) / 2; // 0..1
+        // Interpolate start→middle in first half, middle→end in second half
+        const color = t < 0.5
+            ? lerpColor(theme.gradient.start, theme.gradient.middle, t * 2)
+            : lerpColor(theme.gradient.middle, theme.gradient.end, (t - 0.5) * 2);
+        return (_jsx("text", { style: { fg: color }, children: char }, i));
+    });
+    // <box flexDirection="row"> arranges the per-character <text> nodes side by side
+    return _jsx("box", { style: { flexDirection: "row" }, children: elements });
+};

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

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { TextAttributes } from "@opentui/core";
+import { useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { t } from "../../i18n/index.js";
+import { useTheme } from "../ThemeProvider.js";
+import { KEYS } from "../../tui/constants/keybindings.js";
+import { SingleLineTextInput } from "./SingleLineTextInput.js";
+/**
+ * ConfirmationDialog shows a 3-option prompt for session rejection.
+ * Options: Reject & inform AI, Cancel, or Quit CLI.
+ * If user chooses to reject, shows a two-step flow to optionally collect rejection reason.
+ */
+export const ConfirmationDialog = ({ message, onReject, onCancel, onQuit, }) => {
+    const { theme } = useTheme();
+    const [focusedIndex, setFocusedIndex] = useState(0);
+    const [showReasonInput, setShowReasonInput] = useState(false);
+    const [rejectionReason, setRejectionReason] = useState("");
+    const handleReasonSubmit = () => {
+        onReject(rejectionReason.trim() || null);
+    };
+    const handleSkipReason = () => {
+        onReject(null);
+    };
+    const options = [
+        {
+            key: "y",
+            label: t("confirmation.rejectYes"),
+            action: () => setShowReasonInput(true),
+        },
+        { key: "n", label: t("confirmation.rejectNo"), action: onCancel },
+    ];
+    useKeyboard((key) => {
+        // If in reason input mode, handle Esc to skip
+        if (showReasonInput) {
+            if (key.name === "escape") {
+                handleSkipReason();
+            }
+            return; // Let native input handle other keys
+        }
+        // Arrow key navigation
+        if (key.name === "up") {
+            setFocusedIndex((prev) => Math.max(0, prev - 1));
+        }
+        if (key.name === "down") {
+            setFocusedIndex((prev) => Math.min(options.length - 1, prev + 1));
+        }
+        // Enter key - select focused option
+        if (key.name === "return") {
+            options[focusedIndex].action();
+        }
+        // Letter shortcuts
+        if (KEYS.CONFIRM_YES.test(key.sequence || key.name)) {
+            setShowReasonInput(true);
+        }
+        if (KEYS.CONFIRM_NO.test(key.sequence || key.name)) {
+            onCancel();
+        }
+        // Esc key - same as quit
+        if (key.name === "escape") {
+            onQuit();
+        }
+    });
+    // Step 2: Reason input screen
+    if (showReasonInput) {
+        return (_jsxs("box", { style: {
+                borderColor: theme.borders.warning,
+                borderStyle: "rounded",
+                flexDirection: "column",
+                padding: 1,
+            }, children: [_jsx("box", { style: { marginBottom: 1 }, children: _jsx("text", { style: { attributes: TextAttributes.BOLD, fg: theme.colors.warning }, children: t("confirmation.rejectTitle") }) }), _jsx("box", { style: { marginBottom: 1 }, children: _jsx("text", { style: { attributes: TextAttributes.DIM }, children: t("confirmation.rejectMessage") }) }), _jsx("box", { style: { marginBottom: 1 }, children: _jsx(SingleLineTextInput, { isFocused: true, onChange: setRejectionReason, onSubmit: handleReasonSubmit, placeholder: "Type your reason here...", value: rejectionReason }) }), _jsx("box", { style: { marginTop: 1 }, children: _jsx("text", { style: { attributes: TextAttributes.DIM }, children: `Enter ${t("footer.submit")} | Esc ${t("footer.cancel")}` }) })] }));
+    }
+    // Step 1: Confirmation options
+    return (_jsxs("box", { style: {
+            borderColor: theme.borders.warning,
+            borderStyle: "rounded",
+            flexDirection: "column",
+            padding: 1,
+        }, children: [_jsx("box", { style: { marginBottom: 1 }, children: _jsx("text", { style: { attributes: TextAttributes.BOLD, fg: theme.colors.warning }, children: message }) }), options.map((option, index) => {
+                const isFocused = index === focusedIndex;
+                return (_jsx("box", { style: { marginTop: index > 0 ? 1 : 0 }, children: _jsx("text", { style: {
+                            bg: isFocused
+                                ? theme.components.options.focusedBg
+                                : undefined,
+                            attributes: isFocused ? TextAttributes.BOLD : TextAttributes.NONE,
+                            fg: isFocused ? theme.colors.focused : theme.colors.text,
+                        }, children: `${isFocused ? "> " : "  "}${index + 1}. ${option.label} (${option.key})` }) }, index));
+            }), _jsx("box", { style: { marginTop: 1 }, children: _jsx("text", { style: { attributes: TextAttributes.DIM }, children: "\u2191\u2193 " + t("confirmation.keybindings") }) })] }));
+};

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

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { TextAttributes } from "@opentui/core";
+import { t } from "../../i18n/index.js";
+import { useTheme } from "../ThemeProvider.js";
+/**
+ * CustomInput allows users to type free-text answers.
+ * Uses OpenTUI's native <input> component with visual focus indicator.
+ */
+export const CustomInput = ({ isFocused, onChange, value, }) => {
+    const { theme } = useTheme();
+    return (_jsxs("box", { style: {
+            borderColor: isFocused
+                ? theme.components.input.borderFocused
+                : theme.components.input.border,
+            borderStyle: "rounded",
+            flexDirection: "column",
+            marginTop: 1,
+            padding: 1,
+        }, children: [_jsx("text", { style: {
+                    fg: theme.colors.textDim,
+                    attributes: !isFocused ? TextAttributes.DIM : TextAttributes.NONE,
+                }, children: `${isFocused ? ">" : " "} ${t("input.customAnswerLabel")}` }), _jsx("box", { style: { marginTop: 1 }, children: isFocused ? (_jsx("input", { placeholder: "Type your answer here...", value: value, focused: isFocused, onInput: (val) => onChange(val) })) : (_jsx("text", { style: {
+                        fg: value ? theme.colors.text : theme.colors.textDim,
+                    }, children: value || t("input.customAnswerHint") })) })] }));
+};

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

@@ -0,0 +1,26 @@
+import React from "react";
+/**
+ * Error boundary for OpenTUI renderer errors.
+ * On error, renders nothing (silent fail) — fallback handled at entry point level.
+ */
+export class ErrorBoundary extends React.Component {
+    state = { hasError: false, error: null };
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, info) {
+        // Always log to stderr so the error is visible even if rendering fails
+        process.stderr.write(`\n[OpenTUI Error] ${error.message}\n${error.stack ?? ""}\n`);
+        if (info?.componentStack) {
+            process.stderr.write(`Component stack: ${info.componentStack}\n`);
+        }
+        this.props.onError?.(error);
+    }
+    render() {
+        if (this.state.hasError) {
+            // Show error message instead of blank screen
+            return null;
+        }
+        return this.props.children;
+    }
+}

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

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { t } from "../../i18n/index.js";
+import { useTheme } from "../ThemeProvider.js";
+import { KEY_LABELS } from "../../tui/constants/keybindings.js";
+const SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+/**
+ * Footer component — displays context-aware keybinding hints.
+ * Shows different shortcuts based on current focus context and question type.
+ */
+export const Footer = ({ focusContext, multiSelect, isReviewScreen = false, showSessionSwitching = false, customInputValue: _customInputValue = "", hasRecommendedOptions = false, hasAnyRecommendedInSession = false, isSubmitting = false, hasUpdate = false, }) => {
+    const { theme } = useTheme();
+    const [spinnerFrame, setSpinnerFrame] = useState(0);
+    // Animate spinner when submitting
+    useEffect(() => {
+        if (!isSubmitting)
+            return;
+        const interval = setInterval(() => {
+            setSpinnerFrame((prev) => (prev + 1) % SPINNER_FRAMES.length);
+        }, 80);
+        return () => clearInterval(interval);
+    }, [isSubmitting]);
+    const getKeybindings = () => {
+        // Review screen mode
+        if (isReviewScreen) {
+            return [
+                { key: KEY_LABELS.SUBMIT, action: t("footer.submit") },
+                { key: KEY_LABELS.BACK, action: t("footer.back") },
+            ];
+        }
+        // Custom input focused
+        if (focusContext === "custom-input") {
+            return [
+                { key: KEY_LABELS.NAVIGATE_OPTIONS, action: t("footer.options") },
+                { key: KEY_LABELS.CURSOR, action: t("footer.cursor") },
+                { key: KEY_LABELS.NAVIGATE_QUESTIONS_TAB, action: t("footer.questions") },
+                { key: KEY_LABELS.NEWLINE, action: t("footer.newline") },
+                { key: KEY_LABELS.REJECT, action: t("footer.reject") },
+            ];
+        }
+        // Elaborate input focused (Enter skips, not newline)
+        if (focusContext === "elaborate-input") {
+            return [
+                { key: KEY_LABELS.NAVIGATE_OPTIONS, action: t("footer.options") },
+                { key: KEY_LABELS.CURSOR, action: t("footer.cursor") },
+                { key: "Enter/Tab", action: t("footer.next") },
+                { key: KEY_LABELS.REJECT, action: t("footer.reject") },
+            ];
+        }
+        // Option focused
+        if (focusContext === "option") {
+            const bindings = [
+                { key: KEY_LABELS.NAVIGATE_OPTIONS, action: t("footer.options") },
+                { key: KEY_LABELS.NAVIGATE_QUESTIONS, action: t("footer.questions") },
+                { key: KEY_LABELS.NAVIGATE_QUESTIONS_TAB, action: t("footer.questions") },
+            ];
+            if (multiSelect) {
+                bindings.push({ key: KEY_LABELS.SELECT, action: t("footer.toggle") });
+                bindings.push({ key: KEY_LABELS.NEXT, action: t("footer.next") });
+            }
+            else {
+                bindings.push({ key: KEY_LABELS.SELECT, action: t("footer.select") });
+                bindings.push({ key: KEY_LABELS.SELECT_NEXT, action: t("footer.selectNext") });
+            }
+            if (hasRecommendedOptions) {
+                bindings.push({ key: KEY_LABELS.RECOMMEND, action: t("footer.recommended") });
+            }
+            // Ctrl+R shows when ANY question in session has recommended (not just current)
+            if (hasAnyRecommendedInSession) {
+                bindings.push({ key: KEY_LABELS.QUICK_SUBMIT, action: t("footer.quickSubmit") });
+            }
+            if (showSessionSwitching) {
+                bindings.push({ key: KEY_LABELS.SESSION_SWITCH, action: t("footer.sessions") });
+                bindings.push({ key: "1-9", action: t("footer.jump") });
+                bindings.push({ key: KEY_LABELS.SESSION_LIST, action: t("footer.list") });
+            }
+            bindings.push({ key: KEY_LABELS.THEME, action: t("footer.theme") });
+            if (hasUpdate) {
+                bindings.push({ key: KEY_LABELS.UPDATE, action: "Update" });
+            }
+            bindings.push({ key: KEY_LABELS.REJECT, action: t("footer.reject") });
+            return bindings;
+        }
+        return [];
+    };
+    const keybindings = getKeybindings();
+    return (_jsx("box", { style: { paddingLeft: 2, paddingRight: 2, flexDirection: "row", flexWrap: "wrap", border: true, borderStyle: "rounded", borderColor: theme.colors.surface }, children: keybindings.map((binding, idx) => (_jsxs("box", { style: { paddingRight: 2 }, children: [_jsx("text", { style: {
+                        bg: theme.components.footer.keyBg,
+                        fg: theme.components.footer.keyFg,
+                        bold: true,
+                    }, children: ` ${binding.key} ` }), _jsx("text", { style: { fg: theme.components.footer.action, dim: true }, children: ` ${binding.action}` }), isSubmitting && binding.key === "Enter" && isReviewScreen ? (_jsx("text", { style: { fg: theme.colors.pending, bold: true }, children: ` ${SPINNER_FRAMES[spinnerFrame]}` })) : null] }, idx))) }));
+};

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { t } from "../../i18n/index.js";
+import packageJson from "../../../package.json" with { type: "json" };
+import { useTheme } from "../ThemeProvider.js";
+import { UpdateBadge as _UpdateBadge } from "./UpdateBadge.js";
+// Cast to FC to avoid React type mismatch between @opentui/react bundled React
+// and the project's @types/react (structural type incompatibility).
+const UpdateBadge = _UpdateBadge;
+/**
+ * Header component — displays app logo and status.
+ * Shows at the top of the TUI with solid accent branding and live-updating
+ * pending queue count pill.
+ */
+export const Header = ({ pendingCount, isCheckingUpdate, updateInfo, onUpdateBadgeActivate: _onUpdateBadgeActivate, }) => {
+    const { theme } = useTheme();
+    const [flash, setFlash] = useState(false);
+    const [prevCount, setPrevCount] = useState(pendingCount);
+    // Flash effect when count changes
+    useEffect(() => {
+        if (pendingCount !== prevCount) {
+            setFlash(true);
+            setPrevCount(pendingCount);
+            const timer = setTimeout(() => setFlash(false), 300);
+            return () => clearTimeout(timer);
+        }
+    }, [pendingCount, prevCount]);
+    const version = useMemo(() => {
+        return packageJson.version || "unknown";
+    }, []);
+    const tagline = t("header.title");
+    // Queue pill color: flash > active > empty
+    const queueColor = flash
+        ? theme.components.header.queueFlash
+        : pendingCount > 0
+            ? theme.components.header.queueActive
+            : theme.components.header.queueEmpty;
+    const queueLabel = pendingCount > 0
+        ? ` ${pendingCount} queued `
+        : " idle ";
+    return (_jsxs("box", { style: { flexDirection: "row", justifyContent: "space-between", paddingLeft: 2, paddingRight: 2, border: true, borderStyle: "rounded", borderColor: theme.colors.surface }, children: [_jsxs("box", { style: { flexDirection: "row", alignItems: "center" }, children: [_jsx("text", { style: { bold: true, fg: theme.colors.primary }, children: "AUQ" }), _jsx("text", { style: { fg: "#8A949E" }, children: ` ⋆ ${tagline}` })] }), _jsxs("box", { style: { flexDirection: "row", alignItems: "center" }, children: [_jsx("text", { style: { fg: theme.colors.textDim }, children: `v${version}` }), updateInfo ? (_jsx(UpdateBadge, { updateType: updateInfo.updateType, latestVersion: updateInfo.latestVersion })) : null, _jsx("text", { style: { fg: theme.colors.textDim }, children: " " }), isCheckingUpdate ? (_jsx("text", { style: { fg: theme.colors.textDim }, children: " checking... " })) : null, _jsx("text", { style: {
+                            bg: theme.components.header.pillBg,
+                            fg: queueColor,
+                            bold: flash,
+                        }, children: queueLabel })] })] }));
+};

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "@opentui/react/jsx-runtime";
+import { useTheme } from "../ThemeProvider.js";
+/**
+ * MarkdownPrompt renders markdown text using OpenTUI's native <markdown> element.
+ * Uses the theme-derived SyntaxStyle for code highlighting.
+ */
+export const MarkdownPrompt = ({ text }) => {
+    const { syntaxStyle } = useTheme();
+    if (!text || text.trim().length === 0) {
+        return _jsx("text", { children: text });
+    }
+    return _jsx("markdown", { content: text, syntaxStyle: syntaxStyle });
+};

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

@@ -0,0 +1,258 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { TextAttributes } from "@opentui/core";
+import { useEffect, useState } from "react";
+import { useKeyboard } from "@opentui/react";
+import { t } from "../../i18n/index.js";
+import { useConfig } from "../ConfigContext.js";
+import { useTheme } from "../ThemeProvider.js";
+import { isRecommendedOption } from "../../tui/shared/utils/recommended.js";
+import { useTerminalDimensions } from "../hooks/useTerminalDimensions.js";
+/**
+ * OptionsList displays answer choices and handles arrow key navigation.
+ * Uses \u2191\u2193 to navigate, Enter to select.
+ *
+ * Custom multi-select built with <box>, <text>, useKeyboard().
+ * NO native <select> \u2014 spec requires custom for multi-select.
+ */
+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();
+    const { width: termWidth } = useTerminalDimensions();
+    const rowWidth = Math.max(20, termWidth - 6);
+    // Use prop if provided, otherwise use config value
+    const autoSelectRecommended = autoSelectRecommendedProp ?? config.autoSelectRecommended;
+    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);
+    };
+    // 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;
+    const elaborateIndex = options.length + 1;
+    const maxIndex = showCustomInput ? elaborateIndex : options.length - 1;
+    const isCustomInputFocused = showCustomInput && focusedIndex === customInputIndex;
+    const isElaborateFocused = showCustomInput && focusedIndex === elaborateIndex;
+    const customLines = customValue.replace(/\r\n?/g, "\n").split("\n");
+    const elaborateLines = elaborateText.replace(/\r\n?/g, "\n").split("\n");
+    // Track and emit focus context changes
+    useEffect(() => {
+        const newContext = isElaborateFocused
+            ? "elaborate-input"
+            : isCustomInputFocused
+                ? "custom-input"
+                : "option";
+        onFocusContextChange?.(newContext);
+    }, [
+        focusedIndex,
+        isCustomInputFocused,
+        isElaborateFocused,
+        onFocusContextChange,
+    ]);
+    // Reset focus when question changes
+    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));
+        const hasRecommended = recommendedOptions.length > 0;
+        onRecommendedDetected?.(hasRecommended);
+    }, [options, onRecommendedDetected]);
+    useKeyboard((key) => {
+        if (!isFocused)
+            return;
+        // Handle up/down navigation even when custom input is focused
+        if (key.name === "up") {
+            const newIndex = Math.max(0, focusedIndex - 1);
+            setFocusedIndex(newIndex);
+            return;
+        }
+        if (key.name === "down") {
+            const newIndex = Math.min(maxIndex, focusedIndex + 1);
+            setFocusedIndex(newIndex);
+            return;
+        }
+        // When custom input is focused, only handle escape and tab to exit
+        if (isCustomInputFocused) {
+            if (key.name === "escape") {
+                setFocusedIndex(Math.max(0, options.length - 1));
+            }
+            else if (key.name === "tab" && !key.shift) {
+                onAdvance?.();
+            }
+            return;
+        }
+        // When elaborate input is focused, only handle escape and tab to exit
+        if (isElaborateFocused) {
+            if (key.name === "escape") {
+                setFocusedIndex(customInputIndex);
+            }
+            else if (key.name === "tab" && !key.shift) {
+                onAdvance?.();
+            }
+            return;
+        }
+        // Spacebar: Select/toggle WITHOUT advancing (works for both modes)
+        if (key.name === "space") {
+            if (!isCustomInputFocused && !isElaborateFocused) {
+                if (multiSelect) {
+                    onToggle?.(options[focusedIndex].label);
+                }
+                else {
+                    onSelect(options[focusedIndex].label);
+                }
+            }
+        }
+        // Enter: Advance to next question
+        if (key.name === "return") {
+            if (isCustomInputFocused || isElaborateFocused) {
+                return;
+            }
+            if (multiSelect) {
+                // Multi-select: Enter just advances (spacebar toggles)
+                if (onAdvance) {
+                    onAdvance();
+                }
+            }
+            else {
+                // Single-select: Enter selects AND advances
+                onSelect(options[focusedIndex].label);
+                if (onAdvance) {
+                    onAdvance();
+                }
+            }
+        }
+    });
+    // ── Helper: Truncate text to fit row width ─────────────────────────────────────────
+    const fitRow = (text) => {
+        if (text.length > rowWidth) {
+            return text.slice(0, rowWidth - 1) + "\u2026";
+        }
+        return text; // Background is filled by parent <box>, no manual padding needed
+    };
+    return (_jsxs("box", { style: { flexDirection: "column" }, children: [options.map((option, index) => {
+                const isFocusedOption = isFocused && index === focusedIndex;
+                const isRecommended = isRecommendedOption(option.label);
+                // Different icons for single vs multi-select
+                const isSelected = multiSelect
+                    ? selectedOptions?.includes(option.label) || false
+                    : selectedOption === option.label;
+                const rowBg = isFocusedOption
+                    ? theme.components.options.focusedBg
+                    : isSelected
+                        ? theme.components.options.selectedBg
+                        : undefined;
+                const rowColor = isFocusedOption
+                    ? theme.components.options.focused
+                    : isSelected
+                        ? theme.components.options.selected
+                        : theme.components.options.default;
+                const starSuffix = isRecommended ? " \u2605" : "";
+                const mainLine = multiSelect
+                    ? `${isFocusedOption ? ">" : " "} ${isSelected ? "[\u2713]" : "[ ]"} ${option.label}${starSuffix}`
+                    : `${isFocusedOption ? ">" : " "} ${option.label}${isSelected ? " \u2713" : ""}${starSuffix}`;
+                return (_jsxs("box", { style: { flexDirection: "column" }, onMouseDown: () => {
+                        setFocusedIndex(index);
+                        if (multiSelect) {
+                            onToggle?.(option.label);
+                        }
+                        else {
+                            onSelect(option.label);
+                        }
+                    }, children: [_jsx("box", { style: { backgroundColor: rowBg }, children: _jsx("text", { style: {
+                                    attributes: (isFocusedOption || isSelected) ? TextAttributes.BOLD : TextAttributes.NONE,
+                                    fg: rowColor,
+                                }, children: fitRow(mainLine) }) }), option.description && (_jsx("box", { style: { backgroundColor: isFocusedOption ? theme.components.options.focusedBg : isSelected ? theme.components.options.selectedBg : undefined }, children: _jsx("text", { style: {
+                                    fg: theme.components.options.description,
+                                    attributes: (!isFocusedOption && !isSelected) ? TextAttributes.DIM : TextAttributes.NONE,
+                                }, children: fitRow(`   ${option.description}`) }) }))] }, index));
+            }), showCustomInput && (_jsx("box", { style: { marginTop: 0 }, children: _jsxs("box", { style: { flexDirection: "column" }, children: [(() => {
+                            const isSelected = customValue.trim().length > 0;
+                            const rowBg = isCustomInputFocused
+                                ? theme.components.options.focusedBg
+                                : isSelected
+                                    ? theme.components.options.selectedBg
+                                    : undefined;
+                            const rowColor = isCustomInputFocused
+                                ? theme.components.options.focused
+                                : isSelected
+                                    ? theme.components.options.selected
+                                    : theme.components.options.default;
+                            const mainLine = multiSelect
+                                ? `${isCustomInputFocused ? ">" : " "} ${isSelected ? "[\u2713]" : "[ ]"} ${t("input.otherCustom")}`
+                                : `${isCustomInputFocused ? ">" : " "} ${t("input.otherCustom")}${isSelected ? " \u2713" : ""}`;
+                            return (_jsx("box", { style: { backgroundColor: rowBg }, onMouseDown: () => { setFocusedIndex(customInputIndex); }, children: _jsx("text", { style: {
+                                        attributes: (isCustomInputFocused || isSelected) ? TextAttributes.BOLD : TextAttributes.NONE,
+                                        fg: rowColor,
+                                    }, children: fitRow(mainLine) }) }));
+                        })(), isCustomInputFocused && onCustomChange && (_jsx("box", { style: {
+                                borderColor: theme.components.input.borderFocused,
+                                borderStyle: "rounded",
+                                marginBottom: 1,
+                                marginLeft: 2,
+                                marginTop: 0,
+                                paddingX: 1,
+                                paddingY: 0,
+                            }, children: _jsx("input", { placeholder: t("input.placeholder"), value: customValue, focused: true, onInput: (val) => {
+                                    // Filter SGR mouse escape sequences that leak through stdin parser
+                                    const sanitized = val
+                                        .replace(/\x1b?\[<[\d;]*[Mm]/g, '')
+                                        .replace(/\[?[OI]/g, '');
+                                    if (sanitized !== val && sanitized.length === 0)
+                                        return;
+                                    onCustomChange?.(sanitized);
+                                }, onSubmit: () => onAdvance?.() }) })), !isCustomInputFocused && customValue && (_jsx("box", { style: { marginLeft: 2, marginTop: 0 }, children: _jsxs("text", { style: { fg: theme.components.options.hint, attributes: TextAttributes.DIM }, children: ["   ", customLines.slice(0, 3).join("\n   "), customLines.length > 3 ? "\n   \u2026" : ""] }) }))] }) })), showCustomInput && (_jsx("box", { style: { marginTop: 0 }, children: _jsxs("box", { style: { flexDirection: "column" }, children: [(() => {
+                            const rowBg = isElaborateFocused
+                                ? theme.components.options.focusedBg
+                                : isElaborateMarked
+                                    ? theme.components.options.selectedBg
+                                    : undefined;
+                            const rowColor = isElaborateFocused
+                                ? theme.components.options.focused
+                                : isElaborateMarked
+                                    ? theme.colors.warning
+                                    : theme.components.options.default;
+                            const mainLine = multiSelect
+                                ? `${isElaborateFocused ? ">" : " "} ${isElaborateMarked ? "[\u2605]" : "[ ]"} ${t("footer.elaborate")}`
+                                : `${isElaborateFocused ? ">" : " "} ${t("footer.elaborate")}${isElaborateMarked ? " \u2605" : ""}`;
+                            return (_jsx("box", { style: { backgroundColor: rowBg }, onMouseDown: () => {
+                                    setFocusedIndex(elaborateIndex);
+                                    onElaborateSelect?.();
+                                }, children: _jsx("text", { style: {
+                                        attributes: (isElaborateFocused || isElaborateMarked) ? TextAttributes.BOLD : TextAttributes.NONE,
+                                        fg: rowColor,
+                                    }, children: fitRow(mainLine) }) }));
+                        })(), isElaborateFocused && onElaborateTextChange && (_jsx("box", { style: {
+                                borderColor: theme.components.input.borderFocused,
+                                borderStyle: "rounded",
+                                marginBottom: 1,
+                                marginLeft: 2,
+                                marginTop: 0,
+                                paddingX: 1,
+                                paddingY: 0,
+                            }, children: _jsx("input", { placeholder: t("input.elaboratePlaceholder"), value: elaborateText, focused: true, onInput: (val) => {
+                                    // Filter SGR mouse escape sequences that leak through stdin parser
+                                    const sanitized = val
+                                        .replace(/\x1b?\[<[\d;]*[Mm]/g, '')
+                                        .replace(/\[?[OI]/g, '');
+                                    if (sanitized !== val && sanitized.length === 0)
+                                        return;
+                                    onElaborateTextChange?.(sanitized);
+                                }, onSubmit: () => {
+                                    // Enter submits and advance
+                                    if (!elaborateText.trim()) {
+                                        onElaborateSelect?.();
+                                    }
+                                    onAdvance?.();
+                                } }) })), !isElaborateFocused && elaborateText && (_jsx("box", { style: { marginLeft: 2, marginTop: 0 }, children: _jsxs("text", { style: { fg: theme.components.options.hint, attributes: TextAttributes.DIM }, children: ["   ", elaborateLines.slice(0, 3).join("\n   "), elaborateLines.length > 3 ? "\n   \u2026" : ""] }) }))] }) }))] }));
+};

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
+import { t } from "../../i18n/index.js";
+import { useTheme } from "../ThemeProvider.js";
+import { Footer } from "./Footer.js";
+import { MarkdownPrompt } from "./MarkdownPrompt.js";
+import { OptionsList } from "./OptionsList.js";
+import { TabBar } from "./TabBar.js";
+/**
+ * QuestionDisplay shows a single question with its options.
+ * Composes TabBar, MarkdownPrompt, OptionsList, and Footer.
+ */
+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, onSelectIndex, }) => {
+    const { theme } = useTheme();
+    // Handle option selection
+    const handleSelectOption = (label) => {
+        onSelectOption(label);
+    };
+    // Handle custom answer change
+    const handleCustomAnswerChange = (text) => {
+        onChangeCustomAnswer(text);
+    };
+    return (_jsxs("box", { style: { flexDirection: "column" }, children: [workingDirectory && (_jsxs("box", { style: { flexDirection: "row" }, children: [_jsx("text", { fg: theme.components.directory.label, children: "📁" }), _jsx("text", { style: { fg: theme.components.directory.path }, children: ` ${workingDirectory}` })] })), _jsx(TabBar, { currentIndex: currentQuestionIndex, questions: questions, answers: answers, elaborateMarks: elaborateMarks, onSelectIndex: onSelectIndex }), _jsxs("box", { style: { flexDirection: "column" }, children: [_jsxs("box", { style: { flexDirection: "row" }, children: [_jsx(MarkdownPrompt, { text: currentQuestion.prompt }), _jsx("text", { style: { fg: theme.components.questionDisplay.typeIndicator }, children: ` [${multiSelect ? t("question.multipleChoice") : t("question.singleChoice")}]` })] }), _jsx("box", { children: _jsx("text", { fg: theme.components.questionDisplay.elapsed, children: elapsedLabel }) })] }), _jsx(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 }), _jsx("box", { style: { marginTop: 1 }, children: _jsx(Footer, { focusContext: focusContext, multiSelect: multiSelect ?? false, customInputValue: customAnswer, hasRecommendedOptions: hasRecommendedOptions, hasAnyRecommendedInSession: hasAnyRecommendedInSession, showSessionSwitching: showSessionSwitching }) })] }));
+};