auq-mcp-server 2.3.0 → 2.5.0

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

@@ -1,4 +1,4 @@
-import { Box, useApp, useInput, useStdout } from "ink";
+import { Box, Text, useApp, useInput, useStdout } from "ink";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { t } from "../../i18n/index.js";
 import { ResponseFormatter } from "../../session/ResponseFormatter.js";
@@ -15,7 +15,7 @@ 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, }) => {
+export const StepperView = ({ onComplete, onProgress, hasMultipleSessions, initialState, onStateSnapshot, onFlowStateChange, sessionId, sessionRequest, isAbandoned, onAbandonedCancel, }) => {
     const { theme } = useTheme();
     const config = useConfig();
     const { exit } = useApp();
@@ -24,6 +24,9 @@ export const StepperView = ({ onComplete, onProgress, hasMultipleSessions, initi
     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);
@@ -180,6 +183,16 @@ export const StepperView = ({ onComplete, onProgress, hasMultipleSessions, initi
         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]);
     useEffect(() => {
         if (!onStateSnapshot) {
             return;
@@ -207,8 +220,8 @@ export const StepperView = ({ onComplete, onProgress, hasMultipleSessions, initi
         showReview,
     ]);
     useEffect(() => {
-        onFlowStateChange?.({ showReview, showRejectionConfirm });
-    }, [onFlowStateChange, showRejectionConfirm, showReview]);
+        onFlowStateChange?.({ showReview, showRejectionConfirm, showAbandonedConfirm });
+    }, [onFlowStateChange, showRejectionConfirm, showReview, showAbandonedConfirm]);
     // Update elapsed time since session creation
     // IMPORTANT: Pause when content overflows terminal to prevent scroll-snapping
     useEffect(() => {
@@ -343,10 +356,35 @@ export const StepperView = ({ onComplete, onProgress, hasMultipleSessions, initi
             return newMarks;
         });
     };
+    // Keyboard handling for abandoned confirmation dialog
+    useInput((input, key) => {
+        if (!showAbandonedConfirm)
+            return;
+        if (key.upArrow) {
+            setAbandonedFocusedIndex((prev) => Math.max(0, prev - 1));
+        }
+        if (key.downArrow) {
+            setAbandonedFocusedIndex((prev) => Math.min(1, prev + 1));
+        }
+        if (key.return) {
+            if (abandonedFocusedIndex === 0) {
+                // "Answer anyway"
+                setAbandonedConfirmed(true);
+                setShowAbandonedConfirm(false);
+            }
+            else {
+                // "Cancel"
+                onAbandonedCancel?.();
+            }
+        }
+        if (key.escape) {
+            onAbandonedCancel?.();
+        }
+    });
     // Global keyboard shortcuts and navigation
     useInput((input, key) => {
         // Don't handle navigation when showing review, submitting, or confirming rejection
-        if (showReview || submitting || showRejectionConfirm)
+        if (showReview || submitting || showRejectionConfirm || showAbandonedConfirm)
             return;
         // Derive text-input state from both focusContext and focusedOptionIndex
         // focusContext may lag by one render cycle (set via useEffect in OptionsList)
@@ -481,6 +519,31 @@ export const StepperView = ({ onComplete, onProgress, hasMultipleSessions, initi
             }
         }
     };
+    // Show abandoned session confirmation
+    if (showAbandonedConfirm) {
+        const abandonedOptions = [
+            { label: t("abandoned.continue"), action: () => { setAbandonedConfirmed(true); setShowAbandonedConfirm(false); } },
+            { label: t("abandoned.cancel"), action: () => { onAbandonedCancel?.(); } },
+        ];
+        return (React.createElement(Box, { flexDirection: "column", padding: 1 },
+            React.createElement(Box, { borderColor: theme.borders.warning, borderStyle: "round", flexDirection: "column", padding: 1 },
+                React.createElement(Box, { marginBottom: 1 },
+                    React.createElement(Text, { bold: true, color: theme.colors.warning }, t("abandoned.title"))),
+                React.createElement(Box, { marginBottom: 1 },
+                    React.createElement(Text, null, t("abandoned.message"))),
+                abandonedOptions.map((option, index) => {
+                    const isFocused = index === abandonedFocusedIndex;
+                    const rowBg = isFocused
+                        ? theme.components.options.focusedBg
+                        : undefined;
+                    return (React.createElement(Box, { key: index, marginTop: index > 0 ? 0.5 : 0 },
+                        React.createElement(Text, { backgroundColor: rowBg, bold: isFocused, color: isFocused ? theme.colors.focused : theme.colors.text },
+                            isFocused ? "> " : "  ",
+                            option.label)));
+                }),
+                React.createElement(Box, { marginTop: 1 },
+                    React.createElement(Text, { dimColor: true }, "↑↓ Navigate | Enter Select")))));
+    }
     // Show rejection confirmation
     if (showRejectionConfirm) {
         return (React.createElement(Box, { flexDirection: "column", padding: 1 },

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

@@ -0,0 +1,29 @@
+import { Box, Text } from "ink";
+import React from "react";
+import { useTheme } from "../ThemeContext.js";
+/**
+ * UpdateBadge — compact header indicator shown when a new version is available.
+ *
+ * Color-coding by severity:
+ *   patch  → success (green)  — minor fix, can auto-install
+ *   minor  → warning (yellow) — new features
+ *   major  → error  (red)     — possible breaking changes
+ *
+ * Rendered inside Header next to the version text.
+ */
+export const UpdateBadge = ({ updateType, latestVersion, }) => {
+    const { theme } = useTheme();
+    // Map update severity to theme colors
+    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 (they auto-install); minor/major show the target version
+    const label = updateType === "patch"
+        ? "↑ Update"
+        : `↑ v${latestVersion}`;
+    return (React.createElement(Box, { marginLeft: 1 },
+        React.createElement(Text, { backgroundColor: color, bold: true, color: "#000000" }, ` ${label} `)));
+};

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

@@ -0,0 +1,199 @@
+import { Box, Text, useInput, useStdout } from "ink";
+import React, { useState } from "react";
+import Markdown from "ink-markdown-es";
+import { lexer } from "marked";
+import { useTheme } from "../ThemeContext.js";
+import { detectPackageManager } from "../../update/package-manager.js";
+import { getManualCommand } from "../../update/installer.js";
+/**
+ * UpdateOverlay — fullscreen modal for minor/major update prompts.
+ *
+ * Displays version information, changelog (rendered as Markdown), and
+ * action buttons. Major updates show a breaking-change warning badge.
+ *
+ * Navigation:
+ *   Tab / →  : next button
+ *   Shift+Tab / ← : previous button
+ *   Enter    : trigger focused action
+ *   Esc      : same as "Remind me later"
+ */
+export const UpdateOverlay = ({ isOpen, currentVersion, latestVersion, updateType, changelog, changelogUrl, isInstalling, installError, onInstall, onSkipVersion, onRemindLater, }) => {
+    const { theme } = useTheme();
+    const { stdout } = useStdout();
+    const termWidth = stdout?.columns ?? 80;
+    const [focusedButton, setFocusedButton] = useState(0);
+    // ── Actions bound to button indices ──────────────────────────────
+    const actions = [onInstall, onSkipVersion, onRemindLater];
+    const buttonLabels = ["Yes, update", "Skip this version", "Remind me later"];
+    const buttonCount = buttonLabels.length;
+    // ── Keyboard handling (only active when overlay is open) ────────
+    useInput((input, key) => {
+        // Installing or error state — only Esc closes
+        if (isInstalling)
+            return;
+        if (installError) {
+            if (key.return || key.escape) {
+                onRemindLater();
+            }
+            return;
+        }
+        // Tab / Right arrow: next button
+        if (key.tab && !key.shift) {
+            setFocusedButton((prev) => (prev + 1) % buttonCount);
+            return;
+        }
+        if (key.rightArrow) {
+            setFocusedButton((prev) => (prev + 1) % buttonCount);
+            return;
+        }
+        // Shift+Tab / Left arrow: previous button
+        if (key.tab && key.shift) {
+            setFocusedButton((prev) => (prev - 1 + buttonCount) % buttonCount);
+            return;
+        }
+        if (key.leftArrow) {
+            setFocusedButton((prev) => (prev - 1 + buttonCount) % buttonCount);
+            return;
+        }
+        // Enter: trigger focused button
+        if (key.return) {
+            actions[focusedButton]();
+            return;
+        }
+        // Escape: remind me later
+        if (key.escape) {
+            onRemindLater();
+            return;
+        }
+    }, { isActive: isOpen });
+    // ── Render nothing when closed ──────────────────────────────────
+    if (!isOpen)
+        return null;
+    // ── Color mapping for update type badges ────────────────────────
+    const typeColorMap = {
+        patch: theme.colors.success,
+        minor: theme.colors.warning,
+        major: theme.colors.error,
+    };
+    const typeColor = typeColorMap[updateType] ?? theme.colors.info;
+    const overlayWidth = Math.min(64, termWidth - 4);
+    const innerWidth = overlayWidth - 6; // account for border + paddingX
+    // ── Package manager info for error display ──────────────────────
+    const packageManager = detectPackageManager();
+    const manualCommand = getManualCommand(packageManager);
+    // ── Markdown styles matching MarkdownPrompt ─────────────────────
+    const markdownStyles = {
+        code: {
+            backgroundColor: theme.components.markdown.codeBlockBg,
+            color: theme.components.markdown.codeBlockText,
+            borderColor: theme.components.markdown.codeBlockBorder,
+            borderStyle: "round",
+            paddingX: 1,
+        },
+        codespan: {
+            backgroundColor: theme.components.markdown.codeBlockBg,
+            color: theme.components.markdown.codeBlockText,
+        },
+    };
+    // ── Render changelog section ────────────────────────────────────
+    const renderChangelog = () => {
+        if (changelog) {
+            // Determine if changelog has block elements (like MarkdownPrompt)
+            let hasBlockElements = false;
+            try {
+                const tokens = lexer(changelog);
+                hasBlockElements = tokens.some((token) => ["code", "list", "blockquote", "heading", "hr", "table"].includes(token.type));
+            }
+            catch {
+                // fall through, treat as inline
+            }
+            const renderers = {
+                link: (linkText, href) => (React.createElement(Text, null,
+                    linkText,
+                    " (",
+                    href,
+                    ")")),
+                ...(!hasBlockElements
+                    ? {
+                        paragraph: (content) => (React.createElement(Text, null, content)),
+                    }
+                    : {}),
+            };
+            return (React.createElement(Box, { borderStyle: "round", borderColor: theme.borders.neutral, flexDirection: "column", paddingX: 1, paddingY: 1, width: innerWidth },
+                React.createElement(Markdown, { styles: markdownStyles, renderers: renderers, highlight: true }, changelog)));
+        }
+        // No changelog — show fallback link
+        return (React.createElement(Box, { borderStyle: "round", borderColor: theme.borders.neutral, paddingX: 1, paddingY: 1, width: innerWidth },
+            React.createElement(Text, { dimColor: true },
+                "View changelog: ",
+                changelogUrl)));
+    };
+    // ── Installing state ────────────────────────────────────────────
+    if (isInstalling) {
+        return (React.createElement(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center" },
+            React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.borders.primary, paddingX: 2, paddingY: 1, width: overlayWidth, alignItems: "center" },
+                React.createElement(Box, { marginBottom: 1 },
+                    React.createElement(Text, { bold: true, color: theme.colors.primary }, "Installing Update")),
+                React.createElement(Box, { marginBottom: 1 },
+                    React.createElement(Text, null,
+                        React.createElement(Text, { color: theme.colors.info }, "\u280B "),
+                        "Installing v",
+                        latestVersion,
+                        "\u2026")),
+                React.createElement(Box, null,
+                    React.createElement(Text, { dimColor: true },
+                        "Running: ",
+                        manualCommand)))));
+    }
+    // ── Error state ─────────────────────────────────────────────────
+    if (installError) {
+        return (React.createElement(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center" },
+            React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.borders.error, paddingX: 2, paddingY: 1, width: overlayWidth },
+                React.createElement(Box, { marginBottom: 1 },
+                    React.createElement(Text, { bold: true, color: theme.colors.error }, "Update Failed")),
+                React.createElement(Box, { marginBottom: 1 },
+                    React.createElement(Text, { color: theme.colors.error }, installError)),
+                React.createElement(Box, { marginBottom: 1, flexDirection: "column" },
+                    React.createElement(Text, { dimColor: true }, "Try running manually:"),
+                    React.createElement(Box, { marginTop: 0 },
+                        React.createElement(Text, { bold: true, color: theme.colors.info },
+                            "  ",
+                            manualCommand))),
+                React.createElement(Box, { justifyContent: "center", marginTop: 1 },
+                    React.createElement(Text, { bold: true, backgroundColor: theme.components.options.focusedBg, color: theme.colors.focused }, " Close ")),
+                React.createElement(Box, { justifyContent: "center", marginTop: 1 },
+                    React.createElement(Text, { dimColor: true }, "Enter or Esc to close")))));
+    }
+    // ── Default state: update prompt with buttons ───────────────────
+    return (React.createElement(Box, { flexDirection: "column", alignItems: "center", justifyContent: "center" },
+        React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.borders.primary, paddingX: 2, paddingY: 1, width: overlayWidth },
+            React.createElement(Box, { justifyContent: "center", marginBottom: 1 },
+                React.createElement(Text, { bold: true, color: theme.colors.primary }, "Update Available")),
+            React.createElement(Box, { justifyContent: "center", marginBottom: 1 },
+                React.createElement(Text, null,
+                    React.createElement(Text, { dimColor: true }, "Current: "),
+                    React.createElement(Text, null, currentVersion),
+                    React.createElement(Text, { dimColor: true }, " \u2192 "),
+                    React.createElement(Text, { dimColor: true }, "Latest: "),
+                    React.createElement(Text, { bold: true, color: typeColor }, latestVersion),
+                    React.createElement(Text, null, " "),
+                    React.createElement(Text, { backgroundColor: typeColor, color: "#000000", bold: true },
+                        " ",
+                        updateType.toUpperCase(),
+                        " "))),
+            updateType === "major" && (React.createElement(Box, { borderStyle: "round", borderColor: theme.borders.warning, paddingX: 1, marginBottom: 1, width: innerWidth },
+                React.createElement(Text, { color: theme.colors.warning, bold: true }, "\u26A0 Breaking changes may be included"))),
+            React.createElement(Box, { marginBottom: 1 }, renderChangelog()),
+            React.createElement(Box, { justifyContent: "center", gap: 1 }, buttonLabels.map((label, index) => {
+                const isFocused = index === focusedButton;
+                return (React.createElement(Box, { key: label },
+                    React.createElement(Text, { bold: isFocused, backgroundColor: isFocused
+                            ? theme.components.options.focusedBg
+                            : undefined, color: isFocused ? theme.colors.focused : theme.colors.text },
+                        isFocused ? " ▸ " : " ",
+                        label,
+                        isFocused ? " " : " ")));
+            })),
+            React.createElement(Box, { justifyContent: "center", marginTop: 1 },
+                React.createElement(Text, { dimColor: true }, "\u2190\u2192/Tab navigate \u00B7 Enter select \u00B7 Esc dismiss")))));
+};

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

@@ -15,7 +15,7 @@ function renderWithTheme(ui) {
 function getOutput(frame) {
     return (frame ?? "").replace(/\x1b\[[0-9;]*m/g, "").replace(/\r/g, "");
 }
-function createSession(id) {
+function createSession(id, overrides) {
     return {
         sessionId: `test-id-${id}`,
         sessionRequest: {
@@ -33,6 +33,7 @@ function createSession(id) {
             ],
         },
         timestamp: new Date("2026-01-01T00:00:00.000Z"),
+        ...overrides,
     };
 }
 afterEach(() => {
@@ -89,4 +90,162 @@ describe("SessionDots", () => {
         expect(output).toContain("3");
         expect(output).toContain("4");
     });
+    describe("abandoned sessions", () => {
+        it("renders abandoned session with ✕ symbol when inactive", () => {
+            const sessions = [
+                createSession(1),
+                createSession(2, { isAbandoned: true }),
+                createSession(3),
+            ];
+            const instance = renderWithTheme(React.createElement(SessionDots, { sessions: sessions, activeIndex: 0, sessionUIStates: {} }));
+            const output = getOutput(instance.lastFrame());
+            // Abandoned inactive session uses ✕ instead of ○
+            expect(output).toContain("✕");
+            // Active session still uses ●
+            expect(output).toContain("●");
+            // Non-abandoned inactive session still uses ○
+            expect(output).toContain("○");
+        });
+        it("renders abandoned session with different ANSI styling than normal", () => {
+            // Render with abandoned session
+            const abandonedSessions = [
+                createSession(1),
+                createSession(2, { isAbandoned: true }),
+            ];
+            const abandoned = renderWithTheme(React.createElement(SessionDots, { sessions: abandonedSessions, activeIndex: 0, sessionUIStates: {} }));
+            const abandonedRaw = abandoned.lastFrame() ?? "";
+            // Render with normal session
+            const normalSessions = [createSession(1), createSession(2)];
+            const normal = renderWithTheme(React.createElement(SessionDots, { sessions: normalSessions, activeIndex: 0, sessionUIStates: {} }));
+            const normalRaw = normal.lastFrame() ?? "";
+            // Abandoned session should render differently from normal
+            // (different ANSI codes due to error color)
+            expect(abandonedRaw).not.toBe(normalRaw);
+        });
+        it('shows "(AI disconnected)" text when active session is abandoned', () => {
+            const sessions = [
+                createSession(1),
+                createSession(2, { isAbandoned: true }),
+            ];
+            const instance = renderWithTheme(React.createElement(SessionDots, { sessions: sessions, activeIndex: 1, sessionUIStates: {} }));
+            const output = getOutput(instance.lastFrame());
+            expect(output).toContain("(AI disconnected)");
+        });
+        it('does NOT show "(AI disconnected)" when abandoned session is inactive', () => {
+            const sessions = [
+                createSession(1),
+                createSession(2, { isAbandoned: true }),
+            ];
+            const instance = renderWithTheme(React.createElement(SessionDots, { sessions: sessions, activeIndex: 0, sessionUIStates: {} }));
+            const output = getOutput(instance.lastFrame());
+            expect(output).not.toContain("(AI disconnected)");
+        });
+        it("uses ● for active abandoned session (not ✕)", () => {
+            const sessions = [
+                createSession(1),
+                createSession(2, { isAbandoned: true }),
+            ];
+            const instance = renderWithTheme(React.createElement(SessionDots, { sessions: sessions, activeIndex: 1, sessionUIStates: {} }));
+            const output = getOutput(instance.lastFrame());
+            // Active abandoned session should still use ● (filled dot), not ✕
+            expect(output).toContain("●");
+        });
+    });
+    describe("stale sessions", () => {
+        it("renders stale session with ○ symbol (unchanged from normal)", () => {
+            const sessions = [
+                createSession(1),
+                createSession(2, { isStale: true }),
+                createSession(3),
+            ];
+            const instance = renderWithTheme(React.createElement(SessionDots, { sessions: sessions, activeIndex: 0, sessionUIStates: {} }));
+            const output = getOutput(instance.lastFrame());
+            // Stale sessions keep ○ but with yellow color
+            // Count: 1 active ●, 2 inactive ○ (one stale, one normal)
+            expect((output.match(/○/g) ?? []).length).toBe(2);
+        });
+        it("applies stale color when session is stale (color differs from untouched)", () => {
+            // When a stale session is active, it gets the stale/warning color
+            // and shows a "(stale)" label — verifying the flag is correctly consumed.
+            // Since ink-testing-library may strip ANSI in some envs, we verify
+            // that stale active sessions show the label as a proxy for color.
+            const sessions = [
+                createSession(1),
+                createSession(2, { isStale: true }),
+            ];
+            const instance = renderWithTheme(React.createElement(SessionDots, { sessions: sessions, activeIndex: 1, sessionUIStates: {} }));
+            const output = getOutput(instance.lastFrame());
+            // Active stale session should have the filled dot and stale label
+            expect(output).toContain("●");
+            expect(output).toContain("(stale)");
+            // Stale sessions don't use ✕ (that's only for abandoned)
+            expect(output).not.toContain("✕");
+        });
+        it('shows "(stale)" text when active session is stale', () => {
+            const sessions = [
+                createSession(1),
+                createSession(2, { isStale: true }),
+            ];
+            const instance = renderWithTheme(React.createElement(SessionDots, { sessions: sessions, activeIndex: 1, sessionUIStates: {} }));
+            const output = getOutput(instance.lastFrame());
+            expect(output).toContain("(stale)");
+        });
+        it('does NOT show "(stale)" when stale session is inactive', () => {
+            const sessions = [
+                createSession(1),
+                createSession(2, { isStale: true }),
+            ];
+            const instance = renderWithTheme(React.createElement(SessionDots, { sessions: sessions, activeIndex: 0, sessionUIStates: {} }));
+            const output = getOutput(instance.lastFrame());
+            expect(output).not.toContain("(stale)");
+        });
+    });
+    describe("mixed states", () => {
+        it("renders multiple sessions with mixed states correctly", () => {
+            const sessions = [
+                createSession(1), // normal (active)
+                createSession(2, { isAbandoned: true }), // abandoned
+                createSession(3, { isStale: true }), // stale
+                createSession(4), // normal
+            ];
+            const instance = renderWithTheme(React.createElement(SessionDots, { sessions: sessions, activeIndex: 0, sessionUIStates: {} }));
+            const output = getOutput(instance.lastFrame());
+            // Active session shows ●
+            expect(output).toContain("●");
+            // Abandoned inactive shows ✕
+            expect(output).toContain("✕");
+            // Normal and stale inactive show ○
+            expect((output.match(/○/g) ?? []).length).toBe(2);
+            // All 4 session numbers rendered
+            expect(output).toContain("1");
+            expect(output).toContain("2");
+            expect(output).toContain("3");
+            expect(output).toContain("4");
+        });
+        it("abandoned takes priority over stale", () => {
+            const sessions = [
+                createSession(1),
+                createSession(2, { isAbandoned: true, isStale: true }),
+            ];
+            const instance = renderWithTheme(React.createElement(SessionDots, { sessions: sessions, activeIndex: 1, sessionUIStates: {} }));
+            const output = getOutput(instance.lastFrame());
+            // When both abandoned and stale, show abandoned status
+            expect(output).toContain("(AI disconnected)");
+            expect(output).not.toContain("(stale)");
+        });
+        it("normal sessions remain unchanged (regression)", () => {
+            const sessions = [createSession(1), createSession(2), createSession(3)];
+            const instance = renderWithTheme(React.createElement(SessionDots, { sessions: sessions, activeIndex: 1, sessionUIStates: {} }));
+            const output = getOutput(instance.lastFrame());
+            // No stale/abandoned indicators for normal sessions
+            expect(output).not.toContain("✕");
+            expect(output).not.toContain("(AI disconnected)");
+            expect(output).not.toContain("(stale)");
+            // Normal rendering still works
+            expect(output).toContain("●");
+            expect(output).toContain("○");
+            expect((output.match(/●/g) ?? []).length).toBe(1);
+            expect((output.match(/○/g) ?? []).length).toBe(2);
+        });
+    });
 });

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

@@ -29,7 +29,7 @@ function renderWithTheme(ui) {
 function getOutput(frame) {
     return (frame ?? "").replace(/\x1b\[[0-9;]*m/g, "").replace(/\r/g, "");
 }
-function createSession(id) {
+function createSession(id, overrides) {
     return {
         sessionId: `picker-id-${id}`,
         sessionRequest: {
@@ -47,6 +47,7 @@ function createSession(id) {
             ],
         },
         timestamp: new Date("2026-01-01T00:00:00.000Z"),
+        ...overrides,
     };
 }
 afterEach(() => {
@@ -122,4 +123,45 @@ describe("SessionPicker", () => {
         expect(onClose).toHaveBeenCalledTimes(1);
         expect(onSelectIndex).not.toHaveBeenCalled();
     });
+    describe("stale/abandoned session indicators", () => {
+        it("shows ⚠ icon for stale sessions", () => {
+            const sessions = [createSession(1), createSession(2, { isStale: true })];
+            const instance = renderWithTheme(React.createElement(SessionPicker, { isOpen: true, sessions: sessions, activeIndex: 0, sessionUIStates: {}, onSelectIndex: () => { }, onClose: () => { } }));
+            const output = getOutput(instance.lastFrame());
+            expect(output).toContain("⚠");
+            expect(output).toContain("Title 2");
+        });
+        it("shows 'may be orphaned' subtitle for stale sessions", () => {
+            const sessions = [createSession(1, { isStale: true })];
+            const instance = renderWithTheme(React.createElement(SessionPicker, { isOpen: true, sessions: sessions, activeIndex: 0, sessionUIStates: {}, onSelectIndex: () => { }, onClose: () => { } }));
+            const output = getOutput(instance.lastFrame());
+            expect(output).toContain("may be orphaned");
+        });
+        it("shows 'session abandoned' subtitle for abandoned sessions", () => {
+            const sessions = [createSession(1, { isAbandoned: true })];
+            const instance = renderWithTheme(React.createElement(SessionPicker, { isOpen: true, sessions: sessions, activeIndex: 0, sessionUIStates: {}, onSelectIndex: () => { }, onClose: () => { } }));
+            const output = getOutput(instance.lastFrame());
+            expect(output).toContain("⚠");
+            expect(output).toContain("session abandoned");
+        });
+        it("stale sessions remain selectable via Enter", async () => {
+            const sessions = [createSession(1, { isStale: true }), createSession(2)];
+            const onSelectIndex = vi.fn();
+            const onClose = vi.fn();
+            renderWithTheme(React.createElement(SessionPicker, { isOpen: true, sessions: sessions, activeIndex: 0, sessionUIStates: {}, onSelectIndex: onSelectIndex, onClose: onClose }));
+            expect(inputState.handler).not.toBeNull();
+            inputState.handler("", { return: true });
+            await Promise.resolve();
+            expect(onSelectIndex).toHaveBeenCalledWith(0);
+            expect(onClose).toHaveBeenCalled();
+        });
+        it("non-stale sessions render normally without ⚠ or subtitles", () => {
+            const sessions = [createSession(1), createSession(2)];
+            const instance = renderWithTheme(React.createElement(SessionPicker, { isOpen: true, sessions: sessions, activeIndex: 0, sessionUIStates: {}, onSelectIndex: () => { }, onClose: () => { } }));
+            const output = getOutput(instance.lastFrame());
+            expect(output).not.toContain("⚠");
+            expect(output).not.toContain("may be orphaned");
+            expect(output).not.toContain("session abandoned");
+        });
+    });
 });