@aria-cli/cli 1.0.50 → 1.0.51

package/dist/ui/components/overlays/ModelSelector.js

@@ -0,0 +1,211 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import { isEscapeInput } from "../../utils/keys.js";
+import { getModelColor, getProviderStyle } from "../../theme.js";
+const PROVIDER_LABELS = {
+    anthropic: "Anthropic",
+    "openai-codex": "OpenAI Codex",
+    google: "Google",
+    bedrock: "AWS Bedrock",
+    "bedrock-converse": "AWS Bedrock (Converse)",
+    "github-copilot": "GitHub Copilot",
+    openai: "OpenAI",
+    local: "Local",
+};
+/** Display order for provider groups in the model selector. */
+const PROVIDER_ORDER = [
+    "anthropic",
+    "openai-codex",
+    "google",
+    "bedrock",
+    "bedrock-converse",
+    "github-copilot",
+    "openai",
+    "local",
+];
+function getProviderLabel(provider) {
+    return PROVIDER_LABELS[provider] || provider;
+}
+function getProviderSortKey(provider) {
+    const idx = PROVIDER_ORDER.indexOf(provider);
+    return idx >= 0 ? idx : PROVIDER_ORDER.length;
+}
+function buildProviderGroups(models, items, selectableIndices) {
+    const groups = new Map();
+    for (const model of models) {
+        const key = model.provider || "other";
+        const group = groups.get(key) ?? [];
+        group.push(model);
+        groups.set(key, group);
+    }
+    // Sort groups by PROVIDER_ORDER, models by tier (powerful first)
+    const TIER_PRIORITY = {
+        powerful: 0,
+        balanced: 1,
+        fast: 2,
+        ensemble: 3,
+    };
+    const sortedEntries = [...groups.entries()].sort(([a], [b]) => getProviderSortKey(a) - getProviderSortKey(b));
+    for (const [provider, groupModels] of sortedEntries) {
+        items.push({ type: "header", label: getProviderLabel(provider), provider });
+        const tierFromDesc = (desc) => {
+            if (!desc)
+                return "balanced";
+            const d = desc.toLowerCase();
+            if (d.includes("deep"))
+                return "powerful";
+            if (d.includes("quick"))
+                return "fast";
+            return "balanced";
+        };
+        // Model family order: Claude first, then OpenAI/GPT, then Gemini, then others
+        // Within Claude: opus > sonnet > haiku (via bedrock-opus > bedrock-sonnet > bedrock-haiku)
+        const MODEL_FAMILY_ORDER = [
+            /^claude-opus-|^opus-|^bedrock-opus-/,
+            /^claude-sonnet-|^sonnet-|^bedrock-sonnet-/,
+            /^claude-haiku-|^haiku-|^bedrock-haiku-/,
+            /^claude-/,
+            /^gpt-/,
+            /^o[0-9]/,
+            /^gemini-/,
+        ];
+        const familyRank = (name) => {
+            const lower = name.toLowerCase();
+            for (let i = 0; i < MODEL_FAMILY_ORDER.length; i++) {
+                if (MODEL_FAMILY_ORDER[i].test(lower))
+                    return i;
+            }
+            return MODEL_FAMILY_ORDER.length;
+        };
+        const sorted = [...groupModels].sort((a, b) => {
+            // Primary: family group (Claude > GPT > Gemini)
+            const fa = familyRank(a.name);
+            const fb = familyRank(b.name);
+            if (fa !== fb)
+                return fa - fb;
+            // Secondary: higher version first (4.6 > 4.5, 5.3 > 5.2)
+            // Then tier within same version
+            return b.name.localeCompare(a.name);
+        });
+        for (const model of sorted) {
+            selectableIndices.push(items.length);
+            items.push({ type: "model", model });
+        }
+    }
+}
+const EFFORT_LEVELS = ["low", "medium", "high", "max"];
+const EFFORT_BARS = {
+    low: "▌",
+    medium: "▌▌",
+    high: "▌▌▌",
+    max: "▌▌▌▌",
+};
+const EFFORT_LABELS = {
+    low: "Low",
+    medium: "Medium",
+    high: "High",
+    max: "Max",
+};
+const EFFORT_COLORS = {
+    low: "blue",
+    medium: "cyan",
+    high: "yellow",
+    max: "magenta",
+};
+export function ModelSelector({ models, initialFilter = "", effortLevel, onSelect, onCancel, }) {
+    const [filter, setFilter] = useState(initialFilter);
+    const [effort, setEffort] = useState(effortLevel ?? "high");
+    const allFiltered = models.filter((m) => m.name.toLowerCase().includes(filter.toLowerCase()));
+    const visibleModels = allFiltered;
+    const { items, selectableIndices } = useMemo(() => {
+        const hasProviders = visibleModels.some((m) => m.provider);
+        if (!hasProviders) {
+            return {
+                items: visibleModels.map((m) => ({ type: "model", model: m })),
+                selectableIndices: visibleModels.map((_, i) => i),
+            };
+        }
+        const items = [];
+        const selectableIndices = [];
+        buildProviderGroups(visibleModels, items, selectableIndices);
+        return { items, selectableIndices };
+    }, [visibleModels]);
+    const currentSelectableIdx = selectableIndices.findIndex((itemIdx) => {
+        const item = items[itemIdx];
+        return item?.type === "model" && item.model.isCurrent;
+    });
+    const [selectedIndex, setSelectedIndex] = useState(currentSelectableIdx >= 0 ? currentSelectableIdx : 0);
+    useEffect(() => {
+        setSelectedIndex((i) => Math.min(i, Math.max(0, selectableIndices.length - 1)));
+    }, [selectableIndices.length]);
+    const safeIndex = selectableIndices.length > 0 ? Math.min(selectedIndex, selectableIndices.length - 1) : 0;
+    const isRawModeSupported = process.stdin.isTTY ?? false;
+    useInput((input, key) => {
+        if (isEscapeInput(input, key)) {
+            onCancel();
+            return;
+        }
+        if (key.return && selectableIndices.length > 0) {
+            const itemIdx = selectableIndices[safeIndex];
+            const item = items[itemIdx];
+            if (item.type === "model") {
+                onSelect(item.model, effort);
+            }
+            return;
+        }
+        if (key.leftArrow) {
+            setEffort((prev) => {
+                const idx = EFFORT_LEVELS.indexOf(prev);
+                return EFFORT_LEVELS[Math.max(0, idx - 1)];
+            });
+            return;
+        }
+        if (key.rightArrow) {
+            setEffort((prev) => {
+                const idx = EFFORT_LEVELS.indexOf(prev);
+                return EFFORT_LEVELS[Math.min(EFFORT_LEVELS.length - 1, idx + 1)];
+            });
+            return;
+        }
+        if (key.upArrow) {
+            setSelectedIndex((i) => Math.max(0, i - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setSelectedIndex((i) => Math.min(selectableIndices.length - 1, i + 1));
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setFilter((f) => f.slice(0, -1));
+            return;
+        }
+        if (input && !key.ctrl && !key.meta) {
+            setFilter((f) => f + input);
+        }
+    }, { isActive: isRawModeSupported });
+    const positionIndicator = selectableIndices.length > 0 ? ` [${safeIndex + 1}/${selectableIndices.length}]` : "";
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "gray", paddingX: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, children: "Model" }), _jsx(Text, { dimColor: true, children: positionIndicator }), _jsx(Text, { children: "  " }), filter ? _jsx(Text, { color: "cyan", children: filter }) : _jsx(Text, { dimColor: true, children: "Type to search..." })] }), visibleModels.length === 0 && _jsx(Text, { dimColor: true, children: "No matching models" }), (() => {
+                // Compute max model name width for aligned descriptions
+                const maxNameLen = items.reduce((max, item) => {
+                    if (item.type !== "model")
+                        return max;
+                    return Math.max(max, item.model.name.length);
+                }, 0);
+                return items.map((item, i) => {
+                    if (item.type === "header") {
+                        const style = getProviderStyle(item.provider);
+                        return (_jsxs(Box, { marginTop: i > 0 ? 1 : 0, children: [_jsxs(Text, { color: style.color, children: [style.icon, " "] }), _jsx(Text, { bold: true, color: style.color, children: item.label })] }, `header-${item.label}-${i}`));
+                    }
+                    if (item.type === "hint") {
+                        return (_jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, italic: true, children: item.label }) }, "hint"));
+                    }
+                    const isSelected = selectableIndices[safeIndex] === i;
+                    const showDescription = item.model.description;
+                    const padded = item.model.name.padEnd(maxNameLen);
+                    const modelColor = getModelColor(item.model.name);
+                    return (_jsxs(Box, { children: [_jsxs(Text, { inverse: isSelected, color: isSelected ? undefined : modelColor, dimColor: isSelected ? false : !modelColor, children: [item.model.isCurrent ? "●" : "○", " ", padded] }), showDescription && _jsxs(Text, { dimColor: true, children: [" ", item.model.description] })] }, item.model.value ?? `${item.model.provider}-${item.model.name}`));
+                });
+            })(), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Box, { children: [_jsxs(Text, { color: EFFORT_COLORS[effort], children: [EFFORT_BARS[effort], " "] }), _jsxs(Text, { color: EFFORT_COLORS[effort], bold: true, children: [EFFORT_LABELS[effort], " effort"] }), effort === "high" && _jsx(Text, { dimColor: true, children: " (default)" }), _jsx(Text, { dimColor: true, children: " \u2190 \u2192 to adjust" })] }), _jsx(Box, { marginTop: 0, children: _jsx(Text, { dimColor: true, children: "\u2191\u2193 navigate \u2190 \u2192 effort \u23CE select esc cancel" }) })] })] }));
+}
+//# sourceMappingURL=ModelSelector.js.map

package/dist/ui/components/overlays/PairRequestOverlay.js

@@ -0,0 +1,42 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Pair request overlay — shown when another ARIA instance requests connection.
+ *
+ * Displays the requester's name and signing key fingerprint for visual
+ * verification, with Accept/Reject buttons.
+ */
+import { useState, useRef } from "react";
+import { Box, Text, useInput } from "ink";
+import { getTheme } from "../../theme/index.js";
+import { isEscapeInput } from "../../utils/keys.js";
+export function PairRequestOverlay({ request, onAccept, onReject }) {
+    const [selected, setSelected] = useState("accept");
+    const submittedRef = useRef(false);
+    const theme = getTheme();
+    const isRawModeSupported = process.stdin.isTTY ?? false;
+    const formatFp = (fp) => `${fp.slice(0, 4)} ${fp.slice(4, 8)} ${fp.slice(8, 12)} ${fp.slice(12, 16)}`;
+    useInput((input, key) => {
+        if (submittedRef.current)
+            return;
+        if (key.return) {
+            submittedRef.current = true;
+            if (selected === "accept") {
+                onAccept();
+            }
+            else {
+                onReject();
+            }
+            return;
+        }
+        if (isEscapeInput(input, key)) {
+            submittedRef.current = true;
+            onReject();
+            return;
+        }
+        if (key.leftArrow || key.rightArrow || key.tab) {
+            setSelected((s) => (s === "accept" ? "reject" : "accept"));
+        }
+    }, { isActive: isRawModeSupported });
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.colors.warning, paddingX: 2, paddingY: 1, children: [_jsxs(Text, { bold: true, color: theme.colors.warning, children: [" ", "Connection Request", " "] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: [_jsx(Text, { bold: true, children: request.displayNameSnapshot ?? request.nodeId }), " wants to connect"] }) }), _jsx(Box, { children: _jsxs(Text, { dimColor: true, children: ["Fingerprint: ", formatFp(request.principalFingerprint)] }) }), _jsxs(Box, { marginTop: 1, gap: 2, children: [_jsxs(Text, { inverse: selected === "accept", color: selected === "accept" ? theme.colors.success : undefined, children: [" ", "Accept", " "] }), _jsxs(Text, { inverse: selected === "reject", color: selected === "reject" ? theme.colors.error : undefined, children: [" ", "Reject", " "] })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "\u2190\u2192 select \u23CE confirm esc reject" }) })] }));
+}
+//# sourceMappingURL=PairRequestOverlay.js.map

package/dist/ui/components/overlays/PeerSelector.js

@@ -0,0 +1,84 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * AirDrop-style peer selection overlay.
+ *
+ * Shows nearby ARIA instances discovered via mDNS/Bonjour.
+ * User navigates with arrow keys, presses Enter to initiate pairing.
+ */
+import { useState, useEffect, useMemo } from "react";
+import { Box, Text, useInput } from "ink";
+import { getTheme } from "../../theme/index.js";
+import { isEscapeInput } from "../../utils/keys.js";
+function peerMatchesFilter(peer, filter) {
+    const normalizedFilter = filter.trim().toLowerCase();
+    if (!normalizedFilter) {
+        return true;
+    }
+    const searchFields = [
+        peer.displayNameSnapshot,
+        peer.nodeId,
+        peer.host,
+        peer.port?.toString(),
+        peer.principalFingerprint,
+        peer.transport,
+        peer.status,
+    ]
+        .filter((value) => typeof value === "string" && value.length > 0)
+        .map((value) => value.toLowerCase());
+    return searchFields.some((field) => field.includes(normalizedFilter));
+}
+function clampSelectedIndex(index, length) {
+    if (length <= 0) {
+        return 0;
+    }
+    return Math.min(index, length - 1);
+}
+export function PeerSelector({ peers, sameHomeClientsAvailable = false, onSelect, onCancel, }) {
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [filter, setFilter] = useState("");
+    const theme = getTheme();
+    const filteredPeers = useMemo(() => peers.filter((peer) => peerMatchesFilter(peer, filter)), [peers, filter]);
+    // Clamp index when peer list changes
+    useEffect(() => {
+        setSelectedIndex((i) => clampSelectedIndex(i, filteredPeers.length));
+    }, [filteredPeers.length]);
+    const safeIndex = clampSelectedIndex(selectedIndex, filteredPeers.length);
+    const isRawModeSupported = process.stdin.isTTY ?? false;
+    useInput((input, key) => {
+        if (isEscapeInput(input, key)) {
+            onCancel();
+            return;
+        }
+        if (key.return) {
+            if (filteredPeers.length > 0) {
+                onSelect(filteredPeers[safeIndex]);
+            }
+            return;
+        }
+        if (key.upArrow) {
+            setSelectedIndex((i) => Math.max(0, i - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setSelectedIndex((i) => clampSelectedIndex(i + 1, filteredPeers.length));
+            return;
+        }
+        if (key.backspace || key.delete) {
+            setFilter((current) => current.slice(0, -1));
+            setSelectedIndex(0);
+            return;
+        }
+        if (input && !key.ctrl && !key.meta) {
+            setFilter((current) => current + input);
+            setSelectedIndex(0);
+            return;
+        }
+    }, { isActive: isRawModeSupported });
+    const formatFp = (fp) => `${fp.slice(0, 4)} ${fp.slice(4, 8)} ${fp.slice(8, 12)} ${fp.slice(12, 16)}`;
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.colors.secondary, paddingX: 1, children: [_jsxs(Text, { bold: true, color: theme.colors.primary, children: [" ", "Nearby Peers", " "] }), filter ? _jsxs(Text, { dimColor: true, children: [" (filter: \"", filter, "\")"] }) : null, filteredPeers.length === 0 && (_jsx(Text, { dimColor: true, children: filter
+                    ? "No peers match your filter."
+                    : sameHomeClientsAvailable
+                        ? "No peer nodes. Use /clients for same-home terminals."
+                        : "Scanning... no peers found yet" })), filteredPeers.map((peer, i) => (_jsxs(Box, { children: [_jsxs(Text, { inverse: i === safeIndex, color: i === safeIndex ? theme.colors.primary : undefined, children: [i === safeIndex ? " ▸ " : "   ", peer.displayNameSnapshot] }), peer.status === "connected" ? (_jsx(Text, { color: "green", children: " \u2713 connected" })) : (_jsxs(Text, { dimColor: true, children: ["  ", peer.host, ":", peer.port] })), peer.principalFingerprint ? (_jsxs(Text, { color: theme.colors.secondary, children: ["  ", formatFp(peer.principalFingerprint)] })) : null] }, `${peer.displayNameSnapshot}-${peer.nodeId}-${i}`))), _jsx(Box, { marginTop: filteredPeers.length > 0 ? 1 : 0, children: _jsx(Text, { dimColor: true, children: "type to search \u2191\u2193 navigate \u23CE connect esc cancel" }) })] }));
+}
+//# sourceMappingURL=PeerSelector.js.map

package/dist/ui/components/overlays/SessionSelector.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// packages/cli/src/ui/components/overlays/SessionSelector.tsx
+import { useState, useEffect } from "react";
+import { Box, Text, useInput } from "ink";
+import { isEscapeInput } from "../../utils/keys.js";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+function formatRelativeTime(date) {
+    const now = Date.now();
+    const diff = now - date.getTime();
+    const minutes = Math.floor(diff / 60000);
+    const hours = Math.floor(diff / 3600000);
+    const days = Math.floor(diff / 86400000);
+    if (minutes < 1)
+        return "just now";
+    if (minutes < 60)
+        return `${minutes}m ago`;
+    if (hours < 24)
+        return `${hours}h ago`;
+    if (days < 7)
+        return `${days}d ago`;
+    return date.toLocaleDateString();
+}
+export function SessionSelector({ sessions, onSelect, onCancel, onSearch, onPageChange, }) {
+    const { columns } = useTerminalSize();
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [page, setPage] = useState(0);
+    const pageSize = 8;
+    const totalPages = Math.max(1, Math.ceil(sessions.length / pageSize));
+    const pageItems = sessions.slice(page * pageSize, (page + 1) * pageSize);
+    // Clamp selection when sessions change
+    useEffect(() => {
+        setSelectedIndex((i) => Math.min(i, Math.max(0, pageItems.length - 1)));
+    }, [pageItems.length]);
+    // Clamp page when session list size changes
+    useEffect(() => {
+        setPage((p) => Math.min(p, Math.max(0, totalPages - 1)));
+    }, [totalPages]);
+    // Safe index that's always in bounds (sync guard against async useEffect lag)
+    const safeIndex = pageItems.length > 0 ? Math.min(selectedIndex, pageItems.length - 1) : 0;
+    // Only use input handling when stdin supports raw mode
+    const isRawModeSupported = process.stdin.isTTY ?? false;
+    useInput((input, key) => {
+        if (isEscapeInput(input, key)) {
+            onCancel();
+        }
+        else if (key.return && pageItems.length > 0) {
+            onSelect(pageItems[safeIndex].id);
+        }
+        else if (key.upArrow) {
+            setSelectedIndex((i) => Math.max(0, i - 1));
+        }
+        else if (key.downArrow) {
+            setSelectedIndex((i) => Math.min(pageItems.length - 1, i + 1));
+        }
+        else if (key.leftArrow && page > 0) {
+            setPage((p) => p - 1);
+            setSelectedIndex(0);
+        }
+        else if (key.leftArrow && page === 0) {
+            onPageChange?.("prev");
+            setSelectedIndex(0);
+        }
+        else if (key.rightArrow && page < totalPages - 1) {
+            setPage((p) => p + 1);
+            setSelectedIndex(0);
+        }
+        else if (key.rightArrow && page === totalPages - 1) {
+            onPageChange?.("next");
+            setSelectedIndex(0);
+        }
+        else if (key.backspace || key.delete) {
+            const next = searchQuery.slice(0, -1);
+            setSearchQuery(next);
+            setPage(0);
+            setSelectedIndex(0);
+            onSearch(next);
+        }
+        else if (input && !key.ctrl && !key.meta) {
+            const next = searchQuery + input;
+            setSearchQuery(next);
+            setPage(0);
+            setSelectedIndex(0);
+            onSearch(next);
+        }
+    }, { isActive: isRawModeSupported });
+    function truncate(str, len) {
+        if (str.length <= len)
+            return str;
+        return str.slice(0, len - 3) + "...";
+    }
+    // Use available terminal width so session titles don't feel artificially clipped.
+    const titleMaxLen = Math.max(30, Math.min(120, columns - 28));
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "cyan", paddingX: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: "cyan", children: "Sessions" }), searchQuery && _jsxs(Text, { dimColor: true, children: [" (filter: \"", searchQuery, "\")"] }), _jsxs(Text, { dimColor: true, children: [" - ", sessions.length, " sessions"] })] }), sessions.length === 0 ? (_jsx(Text, { dimColor: true, children: searchQuery ? "No sessions match your filter." : "No sessions yet." })) : (pageItems.map((session, index) => {
+                const isSelected = index === safeIndex;
+                const timeStr = formatRelativeTime(session.updatedAt);
+                const title = session.title ?? session.preview ?? "Untitled session";
+                const globalIndex = page * pageSize + index;
+                return (_jsxs(Box, { flexDirection: "column", marginBottom: index < pageItems.length - 1 ? 1 : 0, children: [_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { inverse: isSelected, children: [isSelected ? ">" : " ", " ", globalIndex + 1, ". ", truncate(title, titleMaxLen)] }), _jsxs(Text, { dimColor: true, children: [" [", timeStr, "]"] })] }), _jsxs(Text, { dimColor: true, children: ["   ", session.arion, " | ", session.model, " | ", session.messageCount, " messages"] })] }, session.id));
+            })), sessions.length > 0 && totalPages > 1 && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["Page ", page + 1, "/", totalPages] }) })), _jsx(Box, { marginTop: 1, children: _jsx(Text, { dimColor: true, children: "type to search arrows navigate enter resume esc cancel" }) })] }));
+}
+//# sourceMappingURL=SessionSelector.js.map

package/dist/ui/components/overlays/SoundSelector.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { Box, Text, useInput } from "ink";
+import { isEscapeInput } from "../../utils/keys.js";
+import { getTheme } from "../../theme/index.js";
+import * as sounds from "../../../sounds.js";
+import { loadConfig, saveConfig } from "../../../config.js";
+const SOUND_OPTIONS = [
+    {
+        id: "toggle",
+        label: "Toggle sounds",
+        description: "Turn sound notifications on or off",
+        icon: "🔊",
+    },
+    {
+        id: "preview",
+        label: "Preview sound",
+        description: "Play a sample notification sound",
+        icon: "▶",
+    },
+];
+export function SoundSelector({ onClose }) {
+    const theme = getTheme();
+    const c = theme.colors;
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [enabled, setEnabled] = useState(sounds.isEnabled());
+    const [previewState, setPreviewState] = useState("idle");
+    const handleToggle = useCallback(() => {
+        const next = !enabled;
+        sounds.setEnabled(next);
+        const cfg = loadConfig();
+        cfg.soundEnabled = next;
+        saveConfig(cfg);
+        setEnabled(next);
+        if (next) {
+            // Play a sound to confirm
+            sounds.onSessionStart();
+        }
+    }, [enabled]);
+    const handlePreview = useCallback(() => {
+        const previous = enabled;
+        if (!previous) {
+            sounds.setEnabled(true);
+        }
+        const played = sounds.previewSound();
+        if (!previous) {
+            sounds.setEnabled(false);
+        }
+        setPreviewState(played ? "playing" : "unavailable");
+        setTimeout(() => setPreviewState("idle"), 1500);
+    }, [enabled]);
+    const isRawModeSupported = process.stdin.isTTY ?? false;
+    useInput((input, key) => {
+        if (isEscapeInput(input, key)) {
+            onClose();
+            return;
+        }
+        if (key.upArrow) {
+            setSelectedIndex((i) => Math.max(0, i - 1));
+            return;
+        }
+        if (key.downArrow) {
+            setSelectedIndex((i) => Math.min(SOUND_OPTIONS.length - 1, i + 1));
+            return;
+        }
+        if (key.return) {
+            const option = SOUND_OPTIONS[selectedIndex];
+            if (option?.id === "toggle") {
+                handleToggle();
+            }
+            else if (option?.id === "preview") {
+                handlePreview();
+            }
+            return;
+        }
+    }, { isActive: isRawModeSupported });
+    const available = sounds.isSoundAvailable();
+    const hasAssets = sounds.hasSoundAssets();
+    const engineLabel = sounds.getPlaybackEngineLabel();
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: c.primary, paddingX: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { bold: true, color: c.primary, children: "🔔 Sound" }), _jsxs(Text, { color: c.textMuted, children: [" ", theme.symbols.arrow, " notification preferences"] })] }), _jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: c.textMuted, children: "Status " }), hasAssets ? (_jsx(Text, { bold: true, color: enabled ? c.success : c.textMuted, children: enabled ? "● ON" : "○ OFF" })) : (_jsx(Text, { color: c.warning, children: "\u26A0 Sound files not found" }))] }), _jsxs(Box, { children: [_jsx(Text, { color: c.textMuted, children: "Engine " }), _jsx(Text, { color: available ? c.text : c.warning, children: engineLabel })] }), _jsxs(Box, { children: [_jsx(Text, { color: c.textMuted, children: "Assets " }), _jsx(Text, { color: hasAssets ? c.text : c.warning, children: hasAssets ? "Warcraft II pack found" : "missing" })] })] }), _jsx(Box, { marginBottom: 1, children: _jsx(Text, { color: c.border, children: "─".repeat(40) }) }), _jsx(Box, { flexDirection: "column", children: SOUND_OPTIONS.map((option, i) => {
+                    const isHighlighted = i === selectedIndex;
+                    const isToggle = option.id === "toggle";
+                    return (_jsxs(Box, { paddingX: 1, children: [_jsxs(Text, { inverse: isHighlighted, color: isHighlighted ? c.primary : c.text, children: [option.icon, " ", isToggle ? (enabled ? "Turn off" : "Turn on") : option.label] }), isToggle && isHighlighted && (_jsxs(Text, { color: c.textMuted, children: [" ", enabled ? "→ disable notifications" : "→ enable notifications"] })), option.id === "preview" && previewState === "playing" && (_jsx(Text, { color: c.success, children: " \u266A playing..." })), option.id === "preview" && previewState === "unavailable" && (_jsx(Text, { color: c.warning, children: " \u26A0 preview unavailable" }))] }, option.id));
+                }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: c.textMuted, children: ["↑↓", " navigate ", "⏎", " select ", "esc", " close"] }) })] }));
+}
+//# sourceMappingURL=SoundSelector.js.map