sonex-agent 0.1.0-alpha.1

package/dist/components.js

@@ -0,0 +1,662 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import { Box, Static, Text, Transform, measureElement } from 'ink';
+import TextInput from 'ink-text-input';
+import stringWidth from 'string-width';
+import { chatDocumentSegments } from './chat-document.js';
+import { CHAT_SYSTEM_MARKER_COLOR, CHAT_USER_MARKER_COLOR, resolveChatContentColor, resolveChatMarkerColor, wrapChatMessageContent, wrapChatMessageSegments } from './chat-message.js';
+import { resolveAgentChatTheme } from './chat-theme.js';
+import { APP_VERSION, BORDER_BLUE, BORDER_BLUE_SOFT, FALLBACK_MODEL_NAME, MAX_VISIBLE_MODEL_CHOICES, MAX_VISIBLE_SLASH_COMMANDS, SONEX_MASCOT, SONEX_MASCOT_MICRO, SPOTIFY_GREEN, TOOL_NAVY, TOOL_VALUE } from './constants.js';
+import { HELP_PANEL_VISIBLE_COMMANDS, helpPanelCommands, visibleCommandWindow } from './command-panel.js';
+import { getVisibleConfirmChoices, resolveConfirmChoiceDisplayIndex } from './confirm-choice.js';
+import { buildProgressBar, formatDuration, formatMiniTrackSubtitle, formatMusicCandidateDisplayLabel } from './format.js';
+import { formatWorkingDirectory } from './info-banner.js';
+import { isHttpCoverSource, useCoverArt } from './hooks.js';
+import { hideInputCursor, INPUT_CURSOR_BLINK_INTERVAL_MS } from './input-cursor.js';
+import { languageLabel, t } from './i18n.js';
+import { coverVisualFromSource } from './cover-visual.js';
+import { renderCoverPatternHalfBlocks, resolveCoverPatternDisplay } from './cover-pattern.js';
+import { resolveMiniPlayerLayout } from './layout.js';
+import { filterModelChoices, formatModelPanelLabel, modelPanelLabelWidth } from './model-selection.js';
+import { buildPlaybackStatusIconLine } from './mini-progress-writer.js';
+import { PANEL_BACKGROUND, PANEL_PRIMARY, PANEL_SECONDARY, PanelChoiceList, PanelEmptyRow, PanelFrame, PanelRow, resolvePanelChoiceSegments } from './panel-frame.js';
+import { SONEX_LOGO } from './sonex-logo.js';
+import { formatTrackPanelLine, trackPanelTrackKey } from './track-panel.js';
+import { withTrueColorBackground } from './terminal-frame-writer.js';
+import { ExtensionPanelOverlay } from './extension-panel.js';
+const Mascot = () => {
+    return (_jsx(Box, { width: 16, flexDirection: "column", marginRight: 3, children: SONEX_MASCOT.map((row, rowIndex) => (_jsx(Text, { children: row.map((segment, segmentIndex) => (_jsx(Text, { color: segment.fg, backgroundColor: segment.bg, children: segment.text }, segmentIndex))) }, rowIndex))) }));
+};
+export const SonexLogo = () => {
+    const useColor = process.env.NO_COLOR === undefined;
+    return (_jsx(Box, { width: "100%", flexDirection: "column", children: SONEX_LOGO.map((line, rowIndex) => (_jsx(Text, { color: useColor ? BORDER_BLUE_SOFT : undefined, wrap: "truncate-end", children: line }, rowIndex))) }));
+};
+const MiniMascotStatus = () => {
+    return (_jsx(Box, { height: 1, flexShrink: 0, paddingLeft: 1, paddingRight: 1, flexDirection: "column", alignItems: "flex-start", children: SONEX_MASCOT_MICRO.map((row, rowIndex) => (_jsx(Text, { children: row.map((segment, segmentIndex) => (_jsx(Text, { color: segment.fg, backgroundColor: segment.bg, children: segment.text }, segmentIndex))) }, rowIndex))) }));
+};
+const WORKING_SPINNER_FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+const WORKING_SPINNER_INTERVAL_MS = 100;
+export const AgentWorkingStatus = () => {
+    const [frame, setFrame] = React.useState(0);
+    React.useEffect(() => {
+        const timer = setInterval(() => setFrame((current) => (current + 1) % WORKING_SPINNER_FRAMES.length), WORKING_SPINNER_INTERVAL_MS);
+        return () => clearInterval(timer);
+    }, []);
+    return (_jsxs(Box, { height: 1, flexShrink: 0, paddingLeft: 1, paddingRight: 1, alignItems: "flex-start", children: [_jsxs(Text, { color: CHAT_SYSTEM_MARKER_COLOR, children: [WORKING_SPINNER_FRAMES[frame], " "] }), _jsx(Text, { color: CHAT_SYSTEM_MARKER_COLOR, italic: true, children: "Working" }), _jsx(Text, { color: "#808791", bold: true, children: " \u2022 Esc to interrupt" })] }));
+};
+export const formatAuthLabel = (state) => {
+    if (state.credential_source === "local" || state.auth_type === "local") {
+        return "local";
+    }
+    if (!state.ready) {
+        return "sign-in required";
+    }
+    if (state.auth_type === "api_key") {
+        return "API billing";
+    }
+    if (state.auth_type === "oauth") {
+        return "OAuth";
+    }
+    return state.auth_type || state.credential_source || "auth";
+};
+export const HeaderFrame = ({ authState, cwd, sessionId, variant, language = "en" }) => {
+    const identityModel = authState.model_label || authState.model || authState.provider || FALLBACK_MODEL_NAME;
+    const displayCwd = formatWorkingDirectory(cwd);
+    const runtimeInformation = (_jsxs(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, minWidth: 0, children: [_jsxs(Text, { wrap: "truncate-end", children: [_jsx(Text, { bold: true, color: "#fff4f6", children: "Sonex CLI" }), " ", _jsxs(Text, { bold: true, color: BORDER_BLUE, children: ["v", APP_VERSION] })] }), _jsx(Box, { height: 1 }), _jsxs(Text, { color: "#d8bcc7", wrap: "truncate-end", children: [identityModel, " \u2022 ", authState.ready
+                        ? formatAuthLabel(authState)
+                        : _jsx(Text, { color: "#facc15", bold: true, children: "Not logged in" })] }), _jsx(Text, { color: "#fff4f6", wrap: "truncate-end", children: displayCwd }), sessionId ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: "#808791", children: "session id:" }), _jsx(Text, { color: "#fff4f6", wrap: "truncate-end", children: sessionId })] })) : null] }));
+    if (variant === 'compact') {
+        return (_jsx(Box, { width: "100%", flexDirection: "column", marginBottom: 2, children: runtimeInformation }));
+    }
+    return (_jsxs(Box, { width: "100%", marginBottom: 2, children: [_jsx(Mascot, {}), runtimeInformation] }));
+};
+export const isGenericAuthSetup = (setup) => {
+    return Boolean(setup?.active);
+};
+const LoginChoiceList = ({ choices, selectedIndex, visibleLimit, showConnectionStatus = false }) => {
+    return (_jsx(PanelChoiceList, { items: choices.map((choice) => {
+            const detail = choice.description
+                ? [{ text: `  ${choice.description}`, color: PANEL_SECONDARY }]
+                : [];
+            const connectionStatus = choice.connection_status ?? (choice.connected ? "active" : "missing");
+            const connectionColor = connectionStatus === "active"
+                ? SPOTIFY_GREEN
+                : connectionStatus === "missing"
+                    ? "#ef4444"
+                    : PANEL_SECONDARY;
+            return {
+                key: choice.value,
+                segments: showConnectionStatus
+                    ? [
+                        {
+                            text: "• ",
+                            color: connectionColor,
+                            preserveColorWhenSelected: true,
+                        },
+                        { text: choice.label, color: PANEL_PRIMARY },
+                    ]
+                    : [{ text: choice.label, color: PANEL_PRIMARY }, ...detail],
+            };
+        }), selectedIndex: selectedIndex, visibleLimit: visibleLimit, width: 74, paddingX: 2 }));
+};
+export const MAX_VISIBLE_LOGIN_PROVIDERS = 8;
+export const LoginScreen = ({ authSetup, selectedIndex, apiKeyInput, setApiKeyInput, onApiKeySubmit, inputFocus = true, language = "en", }) => {
+    if (!authSetup)
+        return null;
+    const providerChoices = authSetup.providers ?? [];
+    const methodChoices = authSetup.methods ?? [];
+    const isProviderStep = authSetup.step === "provider";
+    const isMethodStep = authSetup.step === "method";
+    const modelChoices = authSetup.models ?? [];
+    const isApiKeyStep = authSetup.step === "api_key";
+    const isModelStep = authSetup.step === "model";
+    const isOauthWait = authSetup.step === "oauth_wait";
+    const isTextStep = !isProviderStep && !isMethodStep && !isModelStep && !isOauthWait;
+    const choices = isProviderStep ? providerChoices : isMethodStep ? methodChoices : isModelStep ? modelChoices : [];
+    const showProviderConnectionStatus = isProviderStep
+        && providerChoices.length > 0
+        && providerChoices.every((choice) => Boolean(choice.connection_status) || typeof choice.connected === "boolean");
+    const displayMessage = isProviderStep
+        ? t(language, "login.warmup")
+        : authSetup.message;
+    const helpRows = authSetup.help_text
+        ? wrapChatMessageContent(authSetup.help_text, 70)
+        : [];
+    return (_jsxs(PanelFrame, { width: 74, paddingX: 2, title: authSetup.title, hint: displayMessage, children: [(isProviderStep || isMethodStep || isModelStep) ? (_jsxs(_Fragment, { children: [_jsx(LoginChoiceList, { choices: choices, selectedIndex: selectedIndex, visibleLimit: isProviderStep ? MAX_VISIBLE_LOGIN_PROVIDERS : isModelStep ? MAX_VISIBLE_MODEL_CHOICES : undefined, showConnectionStatus: showProviderConnectionStatus }), _jsx(PanelRow, { width: 74, paddingX: 2, segments: [{ text: t(language, "login.continue"), color: PANEL_SECONDARY, bold: true }] })] })) : null, isTextStep ? (_jsxs(_Fragment, { children: [_jsx(PanelRow, { width: 74, paddingX: 2, segments: [{ text: authSetup.prompt ?? "Value", color: PANEL_SECONDARY }] }), _jsx(PromptInput, { input: apiKeyInput, setInput: setApiKeyInput, onSubmit: onApiKeySubmit, focus: inputFocus, placeholder: authSetup.placeholder ?? authSetup.prompt ?? "Value", mask: authSetup.mask || isApiKeyStep ? "*" : undefined, backgroundColor: PANEL_BACKGROUND, backgroundWidth: 74, backgroundPaddingX: 2 }), helpRows.map((row, index) => (_jsx(PanelRow, { width: 74, paddingX: 2, segments: [{ text: row, color: PANEL_SECONDARY, italic: true }] }, `auth-help-${index}`)))] })) : null, isOauthWait ? (_jsxs(_Fragment, { children: [_jsx(PanelRow, { width: 74, paddingX: 2, segments: [{ text: t(language, "auth.oauth.waiting"), color: BORDER_BLUE_SOFT }] }), _jsx(PanelRow, { width: 74, paddingX: 2, segments: [{ text: t(language, "auth.oauth.return"), color: PANEL_SECONDARY }] })] })) : null] }));
+};
+const fillPromptInputBackground = (output, backgroundWidth, backgroundPaddingX = 0) => {
+    if (!backgroundWidth)
+        return output;
+    const width = Math.max(1, Math.floor(backgroundWidth));
+    const paddingX = Math.max(0, Math.min(Math.floor(backgroundPaddingX), Math.floor(width / 2)));
+    return output.split("\n").map((line) => (`${" ".repeat(paddingX)}${line}${" ".repeat(Math.max(paddingX, width - paddingX - stringWidth(line)))}`)).join("\n");
+};
+const PromptInput = ({ input, setInput, onSubmit, focus, placeholder, mask, inputRevision, backgroundColor, backgroundWidth, backgroundPaddingX = 0, }) => {
+    const [cursorVisible, setCursorVisible] = React.useState(true);
+    React.useEffect(() => {
+        setCursorVisible(true);
+        if (!focus)
+            return;
+        const timer = setInterval(() => setCursorVisible((visible) => !visible), INPUT_CURSOR_BLINK_INTERVAL_MS);
+        return () => clearInterval(timer);
+    }, [focus, input, inputRevision]);
+    return (_jsx(Text, { children: _jsx(Transform, { transform: (output) => {
+                const visibleOutput = focus && cursorVisible ? output : hideInputCursor(output);
+                const filledOutput = fillPromptInputBackground(visibleOutput, backgroundWidth, backgroundPaddingX);
+                return backgroundColor
+                    ? withTrueColorBackground(filledOutput, backgroundColor)
+                    : filledOutput;
+            }, children: _jsx(TextInput, { value: input, onChange: setInput, onSubmit: onSubmit, focus: focus, placeholder: placeholder, mask: mask }, inputRevision) }) }));
+};
+const COMMAND_LIST_LABEL_WIDTH = 12;
+const CONFIRM_CHOICE_LABEL_WIDTH = 18;
+const CONFIRM_CHOICE_ROW_LABEL_WIDTH = 102;
+const PLAYLIST_BROWSE_NAME_WIDTH = 32;
+const MEMORY_SETTING_LABEL_WIDTH = 48;
+const TRACK_PANEL_ROW_WIDTH = 96;
+const truncateDisplayWidth = (value, width) => {
+    const normalized = value.trim() || "-";
+    let rendered = "";
+    for (const char of normalized) {
+        if (stringWidth(rendered + char) > width)
+            break;
+        rendered += char;
+    }
+    return rendered || "-";
+};
+const fitDisplayWidth = (value, width) => {
+    const rendered = truncateDisplayWidth(value, width);
+    return rendered + " ".repeat(Math.max(0, width - stringWidth(rendered)));
+};
+const formatMemorySettingRow = (label, value) => (`${fitDisplayWidth(label, MEMORY_SETTING_LABEL_WIDTH)}${value}`);
+const formatCommandListLabel = (command) => (`/${command.name}`.slice(0, COMMAND_LIST_LABEL_WIDTH).padEnd(COMMAND_LIST_LABEL_WIDTH, " "));
+const formatPlaylistBrowseName = (label) => (fitDisplayWidth(label, PLAYLIST_BROWSE_NAME_WIDTH));
+const playlistBrowseTrackCount = (choice) => {
+    const numericCount = typeof choice.track_count === "number"
+        ? choice.track_count
+        : Number.parseInt(choice.description ?? "", 10);
+    const count = Number.isFinite(numericCount) && numericCount > 0 ? Math.trunc(numericCount) : 0;
+    return `${count} track${count === 1 ? "" : "s"}`;
+};
+const formatConfirmChoiceLabel = (row) => (row.display?.kind === "music_candidate"
+    ? formatMusicCandidateDisplayLabel(row.display, CONFIRM_CHOICE_ROW_LABEL_WIDTH, row.description)
+    : row.labelWidth
+        ? row.label + " ".repeat(Math.max(0, row.labelWidth - stringWidth(row.label)))
+        : row.label);
+const SlashCommandList = ({ suggestions, selectedIndex, spotifyTheme = false }) => {
+    if (suggestions.length === 0)
+        return null;
+    const { items: visibleSuggestions, boundedIndex, startIndex } = visibleCommandWindow(suggestions, selectedIndex, MAX_VISIBLE_SLASH_COMMANDS);
+    return (_jsx(Box, { flexDirection: "column", children: visibleSuggestions.map((command, index) => {
+            const absoluteIndex = startIndex + index;
+            const selected = absoluteIndex === boundedIndex;
+            const commandColor = selected ? (spotifyTheme ? SPOTIFY_GREEN : BORDER_BLUE) : "#fff4f6";
+            const descriptionColor = selected ? commandColor : "#808791";
+            return (_jsxs(Text, { color: commandColor, bold: selected, wrap: "truncate-end", children: [_jsx(Text, { children: formatCommandListLabel(command) }), _jsx(Text, { color: descriptionColor, children: command.description })] }, command.name));
+        }) }));
+};
+const HelpPanel = ({ panel, selectedIndex, width, language = "en" }) => {
+    if (!panel)
+        return null;
+    const commands = helpPanelCommands(panel.commands);
+    const items = commands.map((command) => ({
+        key: command.name,
+        segments: [
+            { text: formatCommandListLabel(command), color: PANEL_PRIMARY },
+            { text: command.description, color: PANEL_SECONDARY },
+        ],
+    }));
+    return (_jsx(PanelFrame, { width: width, title: panel.title, hint: panel.hint, children: panel.commands.length === 0 ? (_jsx(PanelRow, { width: width, segments: [{ text: t(language, "help.empty"), color: PANEL_SECONDARY }] })) : (_jsx(PanelChoiceList, { items: items, selectedIndex: selectedIndex, visibleLimit: HELP_PANEL_VISIBLE_COMMANDS, width: width })) }));
+};
+export const ChatBubble = ({ role, content, contentWidth, theme = null, tone = null, segments = null, document = null, showDivider = true }) => {
+    const isUser = role === "user";
+    const markerColor = resolveChatMarkerColor(role, theme, tone);
+    const contentColor = resolveChatContentColor(role, tone);
+    const semanticTheme = resolveAgentChatTheme(theme);
+    const useToolSegmentStyles = !isUser && tone === null;
+    const semanticSegments = !isUser && tone === null && document?.version === 1
+        ? chatDocumentSegments(document)
+        : null;
+    const candidateSegments = semanticSegments ?? segments;
+    const validSegments = candidateSegments && candidateSegments.map((segment) => segment.text).join("") === content
+        ? candidateSegments
+        : null;
+    const richLines = validSegments ? wrapChatMessageSegments(validSegments, contentWidth) : null;
+    const lines = richLines ?? wrapChatMessageContent(content, contentWidth);
+    return (_jsxs(Box, { marginBottom: 1, flexDirection: "column", width: "100%", children: [lines.map((line, index) => {
+                const marker = index === 0 ? "•" : " ";
+                if (typeof line === "string") {
+                    return (_jsxs(Text, { children: [_jsx(Text, { bold: true, color: markerColor, children: marker }), _jsx(Text, { color: contentColor, children: ` ${line}` })] }, `${index}_${line}`));
+                }
+                return (_jsxs(Text, { children: [_jsx(Text, { bold: true, color: markerColor, children: marker }), _jsx(Text, { color: contentColor, children: " " }), line.map((segment, segmentIndex) => (_jsx(Text, { color: useToolSegmentStyles && segment.style === "tool_name"
+                                ? TOOL_NAVY
+                                : segment.style === "heading" || segment.style === "strong" || segment.style === "list_marker"
+                                    ? semanticTheme.strongText
+                                    : segment.style === "link"
+                                        ? semanticTheme.linkText
+                                        : contentColor, backgroundColor: segment.style === "highlight"
+                                ? semanticTheme.highlightBackground
+                                : segment.style === "code"
+                                    ? semanticTheme.codeBackground
+                                    : undefined, bold: (useToolSegmentStyles && segment.style === "tool_name")
+                                || ["heading", "strong", "highlight", "list_marker"].includes(segment.style), underline: segment.style === "link", children: segment.text }, `${segmentIndex}_${segment.text}`)))] }, `${index}_${line.map((segment) => segment.text).join("")}`));
+            }), showDivider ? (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: CHAT_USER_MARKER_COLOR, children: "─".repeat(contentWidth + 2) }) })) : null] }));
+};
+export const CommittedRecord = ({ record, }) => (_jsx(Box, { flexDirection: "column", paddingX: 1, children: record.item.type === "info_banner" ? (_jsxs(_Fragment, { children: [record.item.showLogo ? (_jsxs(_Fragment, { children: [_jsx(SonexLogo, {}), _jsx(Box, { height: 1 })] })) : null, _jsx(HeaderFrame, { authState: record.item.authState, cwd: record.item.cwd, sessionId: record.item.sessionId, variant: record.presentation.headerVariant, language: record.presentation.language })] })) : (_jsx(ChatBubble, { role: record.item.role, content: record.item.content, contentWidth: record.presentation.contentWidth, theme: record.item.theme, tone: record.item.tone, segments: record.item.segments, document: record.item.document })) }));
+export const CommittedTranscript = ({ records, }) => (_jsx(Static, { items: records, children: (record) => (_jsx(CommittedRecord, { record: record }, record.sequence)) }));
+const localizeTrackPanelTitle = (panel, language) => {
+    if (panel.panel === "queue")
+        return t(language, "trackPanel.queue");
+    const playlistPrefix = "Playlist:";
+    if (panel.title.startsWith(playlistPrefix)) {
+        const playlistName = panel.title.slice(playlistPrefix.length).trim();
+        return playlistName ? `${t(language, "trackPanel.playlist")}: ${playlistName}` : t(language, "trackPanel.playlist");
+    }
+    if (panel.title === "Playlist")
+        return t(language, "trackPanel.playlist");
+    return panel.title;
+};
+const trackPanelEmptyText = (panel, language) => (panel.panel === "queue" ? t(language, "trackPanel.queueEmpty") : t(language, "trackPanel.playlistEmpty"));
+const TRACK_PANEL_MIN_VISIBLE_ROWS = 4;
+const TrackPanel = ({ panel, panelWidth, expanded = false, selectedIndex = 0, spotifyTheme = false, language = "en", }) => {
+    if (!panel)
+        return null;
+    const panelRef = React.useRef(null);
+    const [panelHeight, setPanelHeight] = React.useState(0);
+    React.useEffect(() => {
+        if (!panelRef.current)
+            return;
+        const { height } = measureElement(panelRef.current);
+        if (height > 0 && height !== panelHeight) {
+            setPanelHeight(height);
+        }
+    });
+    const panelTitle = localizeTrackPanelTitle(panel, language);
+    const titleRows = 1;
+    const hintRows = panel.hint ? 1 : 0;
+    const paddingRows = 1;
+    const availableRows = Math.max(TRACK_PANEL_MIN_VISIBLE_ROWS, panelHeight > 0 ? panelHeight - titleRows - hintRows - paddingRows - 2 : TRACK_PANEL_MIN_VISIBLE_ROWS);
+    const visibleRowCount = panel.tracks.length === 0
+        ? 1
+        : Math.min(panel.tracks.length, availableRows);
+    const fillerRowCount = Math.max(0, availableRows - visibleRowCount);
+    const items = panel.tracks.map((track) => ({
+        key: `${track.index}-${trackPanelTrackKey(track)}`,
+        segments: [{
+                text: formatTrackPanelLine(track, TRACK_PANEL_ROW_WIDTH),
+                color: PANEL_PRIMARY,
+            }],
+    }));
+    return (_jsx(Box, { ref: panelRef, flexDirection: "column", flexGrow: expanded ? 1 : 0, flexShrink: 0, minHeight: 0, height: expanded ? "100%" : undefined, children: _jsxs(PanelFrame, { width: panelWidth, paddingX: 2, title: panelTitle, hint: panel.hint ? `${panel.hint}; Esc to hide` : null, children: [panel.tracks.length === 0 ? (_jsx(PanelRow, { width: panelWidth, paddingX: 2, segments: [{ text: trackPanelEmptyText(panel, language), color: PANEL_SECONDARY }] })) : (_jsx(PanelChoiceList, { items: items, selectedIndex: selectedIndex, visibleLimit: availableRows, width: panelWidth, paddingX: 2, spotifyTheme: spotifyTheme })), Array.from({ length: fillerRowCount }, (_unused, index) => (_jsx(PanelEmptyRow, { width: panelWidth }, `track-panel-filler-${index}`)))] }) }));
+};
+const TrackPanelOverlay = ({ trackPanel, selectedIndex = 0, panelWidth, spotifyTheme = false, language = "en", }) => (_jsx(Box, { width: "100%", height: "100%", flexDirection: "column", flexGrow: 1, flexShrink: 1, minHeight: 0, children: _jsx(TrackPanel, { panel: trackPanel, panelWidth: panelWidth, expanded: true, selectedIndex: selectedIndex, spotifyTheme: spotifyTheme, language: language }) }));
+const MemoryPanelOverlay = ({ panel, selectedIndex = 0, searchQuery = "", editor = null, panelWidth = 74 }) => {
+    if (!panel)
+        return null;
+    const width = Math.max(3, Math.min(74, Math.floor(panelWidth)));
+    if (editor) {
+        return (_jsx(Box, { width: "100%", flexDirection: "column", flexShrink: 0, paddingX: 1, children: _jsx(PanelFrame, { width: width, paddingX: 2, title: editor.mode === "search"
+                    ? "Search memory"
+                    : editor.mode === "add"
+                        ? "Add memory"
+                        : editor.mode === "edit"
+                            ? "Edit memory"
+                            : "Change memory setting", hint: editor.mode === "search" || editor.mode === "setting"
+                    ? "Enter to apply; Esc to cancel"
+                    : "Ctrl+S to save; Enter for a new line; Esc to cancel", children: _jsx(PanelRow, { width: width, paddingX: 2, segments: [{ text: `${editor.mode === "search" ? "/" : ""}${editor.value || " "}`, color: PANEL_PRIMARY }] }) }) }));
+    }
+    const rootItems = panel.view === "root"
+        ? ["view memory entries", "reset memory"]
+        : panel.view === "sources"
+            ? ["USER.md", "MEMORY.md", "Memory Dump"]
+            : panel.view === "format"
+                ? ["USER.md", "MEMORY.md", "All memory"]
+                : panel.view === "settings"
+                    ? [
+                        formatMemorySettingRow("Forget retention", `${panel.settings?.forget_retention_days ?? 7} days`),
+                        formatMemorySettingRow("USER.md capacity", String(panel.settings?.user_capacity ?? "Unlimited")),
+                        formatMemorySettingRow("MEMORY.md capacity", String(panel.settings?.memory_capacity ?? "Unlimited")),
+                        formatMemorySettingRow("Automatic forgetting", String(panel.settings?.automatic_forgetting ?? "off")),
+                        formatMemorySettingRow("Idle threshold", `${panel.settings?.idle_threshold_days ?? 30} days`),
+                        formatMemorySettingRow("Automatic refinement", panel.settings?.automatic_refinement === false ? "Off" : "On"),
+                        formatMemorySettingRow("USER.md refinement window", String(panel.settings?.user_refinement_window ?? 8)),
+                        formatMemorySettingRow("MEMORY.md refinement window", String(panel.settings?.memory_refinement_window ?? 12)),
+                    ]
+                    : [];
+    if (panel.view === "detail") {
+        const entry = panel.entries[0];
+        const revisions = Array.isArray(panel.settings?.revisions) ? panel.settings.revisions : [];
+        return (_jsx(Box, { width: "100%", flexDirection: "column", flexShrink: 0, paddingX: 1, children: _jsx(PanelFrame, { width: width, paddingX: 2, title: `${panel.title}${panel.readOnly ? " · Read only" : ""}`, hint: panel.hint, children: entry ? (_jsxs(Box, { flexDirection: "column", paddingX: 2, children: [_jsx(Text, { color: PANEL_PRIMARY, children: entry.content }), _jsxs(Text, { color: PANEL_SECONDARY, children: [entry.protected ? "Protected" : "Inferred", " \u00B7 ", entry.source] }), _jsxs(Text, { color: PANEL_SECONDARY, children: ["Updated: ", entry.updated_at ?? "Never"] }), _jsxs(Text, { color: PANEL_SECONDARY, children: ["Recalled: ", entry.recall_count ?? 0, " \u00B7 Last: ", entry.last_recalled_at ?? "Never"] }), entry.reason ? _jsxs(Text, { color: PANEL_SECONDARY, children: ["Reason: ", entry.reason] }) : null, entry.expires_at ? _jsxs(Text, { color: PANEL_SECONDARY, children: ["Expires: ", entry.expires_at] }) : null, entry.review_pending ? _jsx(Text, { color: "#facc15", bold: true, children: "Review pending" }) : null, _jsxs(Text, { color: PANEL_SECONDARY, children: ["Revisions: ", revisions.length] })] })) : _jsx(PanelRow, { width: width, paddingX: 2, segments: [{ text: "Memory entry is unavailable.", color: PANEL_SECONDARY }] }) }) }));
+    }
+    const items = rootItems.length > 0
+        ? rootItems.map((label) => ({ key: label, segments: [{ text: label, color: PANEL_PRIMARY }] }))
+        : panel.entries
+            .filter((entry) => entry.content.toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase()))
+            .map((entry) => ({
+            key: entry.entry_id,
+            segments: [{
+                    text: panel.view === "revisions"
+                        ? `${entry.content.replaceAll("\n", " ").slice(0, 56)}  ${entry.source ?? "unknown"}`
+                        : `${entry.content.replaceAll("\n", " ").slice(0, 64)}  ${entry.protected ? "Protected" : "Inferred"}${entry.review_pending ? " · Review pending" : ""}`,
+                    color: PANEL_PRIMARY,
+                }],
+        }));
+    return (_jsx(Box, { width: "100%", flexDirection: "column", flexShrink: 0, paddingX: 1, children: _jsx(PanelFrame, { width: width, paddingX: 2, title: `${panel.title}${panel.readOnly ? " · Read only" : ""}`, hint: searchQuery ? `Filter: /${searchQuery} · ${panel.hint ?? ""}` : panel.hint, children: items.length > 0 ? (_jsx(PanelChoiceList, { items: items, selectedIndex: selectedIndex, visibleLimit: 12, width: width, paddingX: 2 })) : (_jsx(PanelRow, { width: width, paddingX: 2, segments: [{ text: "No memory entries.", color: PANEL_SECONDARY }] })) }) }));
+};
+const CoverAtmosphere = ({ visual, art, compact }) => {
+    if (!compact && art) {
+        return _jsx(Text, { children: art });
+    }
+    const rows = compact ? visual.blocks.slice(0, 5) : visual.blocks;
+    const columns = compact ? 7 : 14;
+    return (_jsx(Box, { flexDirection: "column", children: rows.map((row, rowIndex) => (_jsx(Text, { children: row.slice(0, columns).map((color, columnIndex) => (_jsx(Text, { backgroundColor: color, children: "  " }, `${rowIndex}-${columnIndex}`))) }, rowIndex))) }));
+};
+const CoverPatternArt = React.memo(({ pattern, variant }) => {
+    const rows = React.useMemo(() => renderCoverPatternHalfBlocks(variant.grid, pattern.palette), [variant, pattern.palette]);
+    return (_jsx(Box, { flexDirection: "column", children: rows.map((row, rowIndex) => (_jsx(Text, { children: row.map((cell, columnIndex) => (_jsx(Text, { color: cell.foreground, backgroundColor: cell.background, children: cell.char }, `${rowIndex}-${columnIndex}`))) }, rowIndex))) }));
+});
+const MINI_COVER_PATTERN_MAX_SIZE = 80;
+const StaticCover = React.memo(({ visual, coverUrl, coverPattern, terminalSpace, compact, maxPatternSize }) => {
+    const maxSize = maxPatternSize ?? (compact ? MINI_COVER_PATTERN_MAX_SIZE : 32);
+    const patternDisplay = coverPattern
+        ? resolveCoverPatternDisplay(coverPattern, terminalSpace, maxSize ? { maxSize } : undefined)
+        : resolveCoverPatternDisplay(null, terminalSpace);
+    const compactCoverWidth = Math.max(22, Math.min(48, (terminalSpace?.columns ?? 40) - 6));
+    const compactCoverHeight = Math.max(8, Math.min(24, (terminalSpace?.rows ?? 22) - 8));
+    const fetchableCoverUrl = patternDisplay.status === 'none' && isHttpCoverSource(coverUrl) ? coverUrl : null;
+    const { art, failed } = useCoverArt(fetchableCoverUrl, compact ? compactCoverWidth : 32, compact ? compactCoverHeight : 16);
+    const resolvedVisual = React.useMemo(() => coverVisualFromSource(coverUrl, failed), [coverUrl, failed]);
+    const patternRequestedAt = React.useRef(null);
+    React.useEffect(() => {
+        if (process.env.SONEX_PLAYER_DEBUG !== '1')
+            return;
+        if (!coverUrl) {
+            patternRequestedAt.current = null;
+            return;
+        }
+        if (!coverPattern) {
+            if (patternRequestedAt.current === null) {
+                patternRequestedAt.current = Date.now();
+            }
+            return;
+        }
+        if (patternRequestedAt.current !== null) {
+            console.error(`[sonex-player-debug] cover pattern arrived in ${Date.now() - patternRequestedAt.current}ms url=${coverUrl}`);
+            patternRequestedAt.current = null;
+        }
+    }, [coverUrl, coverPattern]);
+    if (patternDisplay.status === 'unavailable') {
+        return compact
+            ? _jsx(Box, { flexGrow: 1, flexShrink: 1, minHeight: compactCoverHeight })
+            : _jsx(Box, { width: 36, paddingRight: 2 });
+    }
+    if (patternDisplay.status === 'renderable' && coverPattern) {
+        return (_jsx(Box, { flexGrow: compact ? 1 : 0, flexShrink: 1, minHeight: compact ? compactCoverHeight : undefined, alignItems: "center", justifyContent: compact ? 'flex-end' : 'center', children: _jsx(CoverPatternArt, { pattern: coverPattern, variant: patternDisplay.variant }) }));
+    }
+    if (patternDisplay.status === 'unfit') {
+        return compact
+            ? _jsx(Box, { flexGrow: 1, flexShrink: 1, minHeight: compactCoverHeight })
+            : _jsx(Box, { width: 36, paddingRight: 2 });
+    }
+    if (compact) {
+        return (_jsx(Box, { flexGrow: 1, flexShrink: 1, minHeight: compactCoverHeight, alignItems: "center", justifyContent: "center", children: _jsx(CoverAtmosphere, { visual: resolvedVisual, art: art, compact: compact }) }));
+    }
+    return (_jsxs(Box, { width: 36, paddingRight: 2, flexDirection: "column", children: [_jsx(CoverAtmosphere, { visual: resolvedVisual, art: art, compact: compact }), _jsx(Text, { color: visual.muted, children: resolvedVisual.status === "fallback" ? "cover atmosphere" : "cover palette" })] }));
+});
+const PlayerMascot = ({ visual, frame, compact }) => {
+    const pulse = ["▁", "▃", "▅", "▃"];
+    const left = pulse[frame] ?? "▁";
+    const right = pulse[(frame + 2) % pulse.length] ?? "▁";
+    if (compact) {
+        return (_jsxs(Text, { children: [_jsx(Text, { color: visual.secondary, children: left }), _jsx(Text, { color: visual.accent, children: " sonex " }), _jsx(Text, { color: visual.secondary, children: right })] }));
+    }
+    const lift = frame === 1 || frame === 2 ? "  " : " ";
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: [_jsxs(Text, { color: visual.secondary, children: [left, left] }), _jsx(Text, { color: visual.accent, children: "  sonex signal  " }), _jsxs(Text, { color: visual.secondary, children: [right, right] })] }), _jsxs(Text, { children: [_jsx(Text, { color: visual.muted, children: lift }), _jsx(Text, { color: visual.primary, children: "\u256D\u2500\u256E" }), _jsx(Text, { color: visual.accent, children: "\u25CF" }), _jsx(Text, { color: visual.primary, children: "\u256D\u2500\u256E" })] }), _jsxs(Text, { children: [_jsx(Text, { color: visual.muted, children: frame === 3 ? " " : "  " }), _jsx(Text, { color: visual.primary, children: "\u2570\u2565\u256F" }), _jsx(Text, { color: visual.secondary, children: "\u2594" }), _jsx(Text, { color: visual.primary, children: "\u2570\u2565\u256F" })] })] }));
+};
+const TrackDetails = React.memo(({ player, compact }) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, color: "#fff4f6", children: player.name }), _jsx(Text, { color: "#bf98a7", children: player.artist }), !compact || player.album !== "-" ? _jsx(Text, { color: "#bf98a7", children: player.album }) : null] })));
+const MiniPlayerStaticBody = React.memo(({ player, visual, coverUrl, coverPattern, layout, }) => {
+    const infoInnerWidth = Math.max(0, layout.infoWidth - layout.infoLeftPadding);
+    const statusLine = buildPlaybackStatusIconLine(player, infoInnerWidth, Date.now());
+    return (_jsxs(Box, { flexDirection: "row", width: layout.contentColumns, height: layout.contentRows, children: [_jsxs(Box, { flexDirection: "column", width: layout.infoWidth, flexShrink: 0, paddingTop: layout.infoTop, paddingLeft: layout.infoLeftPadding, children: [_jsx(Box, { width: infoInnerWidth, justifyContent: "center", children: _jsx(Text, { bold: true, color: BORDER_BLUE_SOFT, wrap: "truncate-end", children: player.name }) }), _jsx(Box, { width: infoInnerWidth, justifyContent: "center", children: _jsx(Text, { color: "#ffffff", wrap: "truncate-end", children: formatMiniTrackSubtitle(player.artist, player.album) }) }), _jsx(Text, { children: ' '.repeat(infoInnerWidth) }), _jsx(Box, { width: infoInnerWidth, children: _jsx(Text, { children: statusLine.segments.map((segment, index) => (_jsx(Text, { color: segment.color, children: segment.text }, index))) }) })] }), layout.mode === 'artwork' ? (_jsx(Box, { marginLeft: layout.gap, width: layout.coverWidth, height: layout.contentRows, alignItems: "center", justifyContent: "flex-end", flexShrink: 0, children: _jsx(StaticCover, { visual: visual, coverUrl: coverUrl, coverPattern: coverPattern, terminalSpace: { columns: layout.coverWidth, rows: layout.contentRows }, compact: true }) })) : null] }));
+}, (prev, next) => (prev.player === next.player
+    && prev.visual === next.visual
+    && prev.coverUrl === next.coverUrl
+    && prev.coverPattern === next.coverPattern
+    && prev.layout === next.layout));
+const PlaybackMeter = ({ player, visual, compact = false, active = true }) => {
+    const progressMs = player.progress_ms ?? 0;
+    const progress = formatDuration(progressMs);
+    const duration = formatDuration(player.duration_ms);
+    const progressBar = buildProgressBar(progressMs, player.duration_ms, 18);
+    const isPlaying = active && player.is_playing === true;
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: [_jsx(Text, { color: "#bf98a7", children: progress }), " ", _jsx(Text, { color: visual.secondary, children: progressBar }), " ", _jsx(Text, { color: "#bf98a7", children: duration })] }), _jsx(Text, { color: isPlaying ? visual.accent : "#7f5d6b", children: isPlaying ? "playing" : "paused" })] }));
+};
+const PlayerPane = ({ player, coverUrl, coverPattern, terminalSpace, miniLayout, variant = "full", active = true }) => {
+    const compact = variant === "compact";
+    const visual = React.useMemo(() => coverVisualFromSource(coverUrl, false), [coverUrl]);
+    if (compact) {
+        const layout = miniLayout ?? resolveMiniPlayerLayout(terminalSpace ?? { columns: null, rows: null });
+        return (_jsx(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, minHeight: 0, children: _jsx(MiniPlayerStaticBody, { player: player, visual: visual, coverUrl: coverUrl, coverPattern: coverPattern ?? null, layout: layout }) }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", flexGrow: compact ? 1 : 1, flexShrink: 1, minHeight: compact ? 8 : 20, padding: 1, paddingX: compact ? 1 : 2, children: [!compact ? (_jsx(Box, { marginBottom: 1, children: _jsx(Text, { bold: true, color: visual.accent, children: "Now playing" }) })) : null, _jsxs(Box, { marginTop: compact ? 0 : 1, children: [!compact ? _jsx(StaticCover, { visual: visual, coverUrl: coverUrl, coverPattern: coverPattern ?? null, terminalSpace: terminalSpace, compact: compact }) : null, _jsxs(Box, { flexDirection: "column", flexGrow: compact ? 0 : 1, flexShrink: 0, paddingTop: compact ? 1 : 1, children: [_jsx(TrackDetails, { player: player, compact: compact }), _jsx(PlaybackMeter, { player: player, visual: visual, compact: compact, active: active }), !compact ? _jsx(PlayerMascot, { visual: visual, frame: 0, compact: compact }) : null] })] })] }));
+};
+const LANGUAGE_CHOICES = ["en", "zh-CN"];
+const orderedLanguageChoices = (current) => [
+    current,
+    ...LANGUAGE_CHOICES.filter((choice) => choice !== current),
+];
+const confirmCancelHint = (choices) => (choices.some((choice) => choice.value === "deny" || choice.value === "cancel")
+    ? "press Esc to cancel"
+    : "press Esc to close");
+export const CompactConfirm = ({ confirm, confirmIndex, input, setInput, onSubmit, inputFocus, inputRevision, panelWidth, spotifyTheme = false, }) => {
+    if (!confirm)
+        return null;
+    const includeCancelChoice = confirm.tool_name === "provider_mode_exit";
+    const visibleChoices = getVisibleConfirmChoices(confirm.choices, includeCancelChoice);
+    const selectedDisplayIndex = resolveConfirmChoiceDisplayIndex(confirm.choices, confirmIndex, includeCancelChoice);
+    const isSpotifyConfirm = spotifyTheme || confirm.tool_name === "spotify_device";
+    const isSongCandidateConfirm = confirm.tool_name === "song_candidate";
+    if (confirm.variant === "tool_call_review") {
+        const contentWidth = Math.max(1, panelWidth - 2);
+        return (_jsxs(PanelFrame, { width: panelWidth, title: confirm.message, hint: confirm.warning ?? "Please review the Bash command(s) below before permission.", hintColor: "#facc15", children: [(confirm.commands ?? []).map((command, commandIndex) => (_jsxs(React.Fragment, { children: [commandIndex > 0 ? _jsx(PanelEmptyRow, { width: panelWidth }) : null, wrapChatMessageContent(command, contentWidth).map((row, rowIndex) => (_jsx(PanelRow, { width: panelWidth, segments: [{ text: row, color: TOOL_VALUE }] }, `${commandIndex}-${rowIndex}-${row}`)))] }, `${commandIndex}-${command}`))), _jsx(PanelEmptyRow, { width: panelWidth }), _jsx(PanelChoiceList, { items: visibleChoices.map((choice) => ({
+                        key: choice.value,
+                        segments: [{ text: choice.label, color: PANEL_PRIMARY }],
+                    })), selectedIndex: selectedDisplayIndex, width: panelWidth })] }));
+    }
+    if (isSongCandidateConfirm) {
+        const contentWidth = Math.max(1, panelWidth - 2);
+        const boundedIndex = selectedDisplayIndex;
+        return (_jsx(PanelFrame, { width: panelWidth, title: confirm.message, hint: "press Esc to cancel", children: visibleChoices.map((choice, index) => {
+                const selected = index === boundedIndex;
+                const isSupplementChoice = Boolean(choice.input);
+                const label = formatConfirmChoiceLabel({
+                    key: choice.value,
+                    label: choice.label,
+                    description: choice.description,
+                    display: choice.display,
+                    labelWidth: CONFIRM_CHOICE_LABEL_WIDTH,
+                });
+                const visibleLabel = truncateDisplayWidth(label, contentWidth);
+                const item = {
+                    key: choice.value,
+                    segments: [{
+                            text: visibleLabel,
+                            color: isSupplementChoice ? PANEL_SECONDARY : PANEL_PRIMARY,
+                        }],
+                    unselectedBold: isSupplementChoice,
+                };
+                return (_jsxs(React.Fragment, { children: [isSupplementChoice ? (_jsx(PanelEmptyRow, { width: panelWidth })) : null, isSupplementChoice && selected ? (_jsx(PromptInput, { input: input, setInput: setInput, onSubmit: onSubmit, focus: selected && inputFocus, placeholder: "", inputRevision: inputRevision, backgroundColor: PANEL_BACKGROUND, backgroundWidth: panelWidth, backgroundPaddingX: 1 })) : (_jsx(PanelRow, { width: panelWidth, segments: resolvePanelChoiceSegments(item, selected, false) }))] }, choice.value));
+            }) }));
+    }
+    const choiceItems = visibleChoices.map((choice) => ({
+        key: choice.value,
+        segments: choice.display?.kind === "music_candidate"
+            ? [{ text: formatMusicCandidateDisplayLabel(choice.display, CONFIRM_CHOICE_ROW_LABEL_WIDTH, choice.description), color: PANEL_PRIMARY }]
+            : [
+                {
+                    text: choice.label + " ".repeat(Math.max(0, CONFIRM_CHOICE_LABEL_WIDTH - stringWidth(choice.label))),
+                    color: choice.disabled ? PANEL_SECONDARY : PANEL_PRIMARY,
+                },
+                ...((choice.disabled_reason ?? choice.description)
+                    ? [{ text: choice.disabled_reason ?? choice.description ?? "", color: PANEL_SECONDARY }]
+                    : []),
+            ],
+    }));
+    if (confirm.tool_name === "playlist_browse") {
+        const playlistItems = visibleChoices.map((choice) => ({
+            key: choice.value,
+            segments: [
+                { text: formatPlaylistBrowseName(choice.label), color: PANEL_PRIMARY },
+                { text: ` ${playlistBrowseTrackCount(choice)}`, color: PANEL_SECONDARY },
+            ],
+        }));
+        return (_jsx(PanelFrame, { width: panelWidth, title: confirm.message, hint: confirmCancelHint(confirm.choices), children: _jsx(PanelChoiceList, { items: playlistItems, selectedIndex: selectedDisplayIndex, width: panelWidth, spotifyTheme: isSpotifyConfirm }) }));
+    }
+    if (confirm.tool_name === "provider_mode_exit") {
+        return (_jsx(PanelFrame, { width: panelWidth, title: confirm.message, hint: null, titleDetailSegments: confirm.warning ? [
+                { text: "Warning: ", color: "#facc15", bold: true },
+                { text: confirm.warning, color: "#facc15", italic: true },
+            ] : null, children: _jsx(PanelChoiceList, { items: choiceItems, selectedIndex: selectedDisplayIndex, width: panelWidth, spotifyTheme: isSpotifyConfirm }) }));
+    }
+    return (_jsx(PanelFrame, { width: panelWidth, title: confirm.message, hint: confirm.hide_hint ? null : confirmCancelHint(confirm.choices), children: _jsx(PanelChoiceList, { items: choiceItems, selectedIndex: selectedDisplayIndex, width: panelWidth, spotifyTheme: isSpotifyConfirm }) }));
+};
+const LanguagePanel = ({ panel, selectedIndex, width, language = "en" }) => {
+    if (!panel)
+        return null;
+    const choices = orderedLanguageChoices(panel.selected);
+    const boundedIndex = Math.min(Math.max(selectedIndex, 0), choices.length - 1);
+    return (_jsxs(PanelFrame, { width: width, title: t(language, "language.title"), hint: t(language, "language.hint"), children: [_jsx(PanelChoiceList, { items: choices.map((choice) => ({
+                    key: choice,
+                    segments: [{
+                            text: choice === panel.selected ? `* ${languageLabel(choice)}` : languageLabel(choice),
+                            color: PANEL_PRIMARY,
+                        }],
+                })), selectedIndex: boundedIndex, width: width }), panel.saveError ? (_jsx(PanelRow, { width: width, segments: [{ text: panel.saveError, color: "#ff9c9c" }] })) : null] }));
+};
+const setupDoneHint = (setupPanel, _language) => {
+    if (setupPanel.active)
+        return null;
+    return "press Esc to hide";
+};
+const setupMessageColor = (setupPanel) => {
+    const text = `${setupPanel.title} ${setupPanel.message}`.toLowerCase();
+    if (text.includes("failed") || text.includes("失败"))
+        return "#ff6b6b";
+    if (text.includes("connected") || text.includes("success") || text.includes("成功"))
+        return BORDER_BLUE_SOFT;
+    return "#bf98a7";
+};
+const CompactSetup = ({ setupPanel, input, setInput, onSubmit, inputPlaceholder, inputMask, inputFocus, inputRevision, terminalColumns, language = "en", }) => {
+    if (!setupPanel)
+        return null;
+    const panelWidth = Math.max(3, Math.floor(terminalColumns ?? 80));
+    const contentWidth = Math.max(1, panelWidth - 2);
+    const messageRows = wrapChatMessageContent(setupPanel.message, contentWidth);
+    return (_jsxs(PanelFrame, { width: panelWidth, title: setupPanel.title, children: [messageRows.map((row, index) => (_jsx(PanelRow, { width: panelWidth, segments: [{
+                        text: row,
+                        color: setupMessageColor(setupPanel),
+                    }] }, `setup-message-${index}`))), setupDoneHint(setupPanel, language) ? (_jsx(PanelRow, { width: panelWidth, segments: [{ text: setupDoneHint(setupPanel, language) ?? "", color: PANEL_SECONDARY }] })) : null, "provider" in setupPanel && setupPanel.providers && setupPanel.providers.length > 0 ? (_jsx(PanelRow, { width: panelWidth, segments: [{
+                        text: `${t(language, "providers.label")}: ${setupPanel.providers.map((provider) => provider.value).join(" / ")}`,
+                        color: PANEL_SECONDARY,
+                    }] })) : null, "provider" in setupPanel && setupPanel.methods && setupPanel.methods.length > 0 ? (_jsx(PanelRow, { width: panelWidth, segments: [{
+                        text: `${t(language, "methods.label")}: ${setupPanel.methods.map((method) => method.value).join(" / ")}`,
+                        color: PANEL_SECONDARY,
+                    }] })) : null, setupPanel.active && setupPanel.prompt ? (_jsx(PromptInput, { input: input, setInput: setInput, onSubmit: onSubmit, focus: inputFocus, placeholder: setupPanel.prompt ?? inputPlaceholder, mask: setupPanel.mask ? "*" : inputMask, inputRevision: inputRevision, backgroundColor: PANEL_BACKGROUND, backgroundWidth: panelWidth, backgroundPaddingX: 1 })) : null] }));
+};
+const InputDock = ({ input, setInput, onSubmit, inputPlaceholder, inputMask, inputFocus, inputRevision, confirm, confirmIndex, spotifyMode, providerMode, spotifySetup, authSetup, modelStatus, slashSuggestions, slashIndex, helpPanel, helpPanelIndex, languagePanel, languagePanelIndex, modelPanelIndex, terminalColumns, minimal = false, switchHint = null, language = "en", }) => {
+    const selectedChoice = confirm?.choices[Math.min(confirmIndex, Math.max(0, confirm.choices.length - 1))] ?? null;
+    const setupPanel = spotifySetup ?? (authSetup && authSetup.step !== "model" ? authSetup : null);
+    const spotifyTheme = Boolean(spotifyMode?.enabled || spotifySetup);
+    const isSongCandidateConfirm = confirm?.tool_name === "song_candidate";
+    const insetPanelWidth = Math.max(3, Math.floor(terminalColumns ?? 80) - 2);
+    const allModelChoices = authSetup?.models ?? [];
+    const filteredModelChoices = filterModelChoices(allModelChoices, input);
+    const modelLabelWidth = modelPanelLabelWidth(allModelChoices);
+    const modelPanel = authSetup?.active && authSetup.step === "model"
+        ? {
+            title: authSetup.title,
+            hint: authSetup.message,
+            items: filteredModelChoices.map((model) => ({
+                key: model.value,
+                segments: [
+                    { text: formatModelPanelLabel(model, modelLabelWidth), color: PANEL_PRIMARY },
+                    { text: model.provider ?? model.value, color: PANEL_SECONDARY },
+                ],
+            })),
+        }
+        : null;
+    const showInput = !setupPanel
+        && !helpPanel
+        && !languagePanel
+        && !modelPanel
+        && (!confirm || Boolean(selectedChoice?.input) && !isSongCandidateConfirm);
+    const spotifyModeBorderLabel = " 🎧 Spotify Mode ";
+    return (_jsxs(Box, { flexDirection: "column", children: [!minimal ? (_jsxs(Box, { flexDirection: "column", flexShrink: 0, paddingX: 1, children: [_jsx(HelpPanel, { panel: helpPanel, selectedIndex: helpPanelIndex, width: insetPanelWidth, language: language }), _jsx(SlashCommandList, { suggestions: slashSuggestions, selectedIndex: slashIndex, spotifyTheme: spotifyTheme }), !isSongCandidateConfirm ? (_jsx(CompactConfirm, { confirm: confirm, confirmIndex: confirmIndex, input: input, setInput: setInput, onSubmit: onSubmit, inputFocus: inputFocus, inputRevision: inputRevision, panelWidth: insetPanelWidth, spotifyTheme: spotifyTheme })) : null, _jsx(LanguagePanel, { panel: languagePanel, selectedIndex: languagePanelIndex, width: insetPanelWidth, language: language }), modelPanel ? (_jsxs(PanelFrame, { width: insetPanelWidth, title: modelPanel.title, hint: modelPanel.hint, children: [_jsx(PanelRow, { width: insetPanelWidth, segments: [
+                                    { text: "Search: ", color: PANEL_SECONDARY },
+                                    { text: input || "type to filter", color: input ? PANEL_PRIMARY : PANEL_SECONDARY },
+                                ] }), _jsx(PanelChoiceList, { items: modelPanel.items, selectedIndex: modelPanelIndex, visibleLimit: MAX_VISIBLE_MODEL_CHOICES, width: insetPanelWidth, spotifyTheme: spotifyTheme }), _jsx(PanelRow, { width: insetPanelWidth, segments: [{ text: t(language, "login.continue"), color: PANEL_SECONDARY, bold: true }] })] })) : null] })) : null, isSongCandidateConfirm || minimal ? (_jsx(CompactConfirm, { confirm: confirm, confirmIndex: confirmIndex, input: input, setInput: setInput, onSubmit: onSubmit, inputFocus: inputFocus, inputRevision: inputRevision, panelWidth: isSongCandidateConfirm
+                    ? Math.max(3, Math.floor(terminalColumns ?? 80))
+                    : insetPanelWidth, spotifyTheme: spotifyTheme })) : null, setupPanel ? _jsx(CompactSetup, { setupPanel: setupPanel, input: input, setInput: setInput, onSubmit: onSubmit, inputPlaceholder: inputPlaceholder, inputMask: inputMask, inputFocus: inputFocus, inputRevision: inputRevision, terminalColumns: terminalColumns, language: language }) : null, showInput ? (_jsxs(_Fragment, { children: [_jsx(Box, { borderTop: true, borderBottom: true, borderLeft: false, borderRight: false, borderStyle: "single", borderColor: "#808791", paddingX: 1, paddingTop: 0, flexDirection: "column", minHeight: 3, flexShrink: 0, children: _jsxs(Box, { flexDirection: "row", children: [_jsx(Text, { color: "#7f5d6b", children: minimal && switchHint ? `${switchHint} · ` : "" }), _jsx(PromptInput, { input: input, setInput: setInput, onSubmit: onSubmit, focus: inputFocus, placeholder: inputPlaceholder, mask: inputMask, inputRevision: inputRevision })] }) }), _jsxs(Box, { height: 1, paddingX: 1, flexDirection: "row", children: [_jsx(Box, { flexGrow: 1, minWidth: 0, children: modelStatus ? (_jsx(Text, { color: "#808791", wrap: "truncate-end", children: modelStatus })) : null }), _jsx(Box, { flexShrink: 0, children: spotifyMode?.enabled ? (_jsx(Text, { bold: true, color: SPOTIFY_GREEN, children: spotifyModeBorderLabel })) : null })] })] })) : null] }));
+};
+export const DynamicTail = ({ input, setInput, onSubmit, inputPlaceholder, inputMask, inputFocus, inputRevision, confirm, confirmIndex, spotifyMode, providerMode, spotifySetup, authSetup, modelStatus, slashSuggestions, slashIndex, helpPanel, helpPanelIndex, languagePanel, languagePanelIndex, modelPanelIndex, memoryPanel, memoryPanelIndex, memorySearchQuery, memoryEditor, terminalColumns, agentWorking, streamingMessage, language = "en", }) => {
+    const selectedChoice = confirm?.choices[Math.min(confirmIndex, Math.max(0, confirm.choices.length - 1))] ?? null;
+    const hasModelPanel = authSetup?.active && authSetup.step === "model";
+    const hasSetupPanel = Boolean(spotifySetup) || Boolean(authSetup && authSetup.step !== "model");
+    const hasSlashPanel = slashSuggestions.length > 0;
+    const showInput = !helpPanel && !languagePanel && !hasModelPanel && !memoryPanel && (!confirm || Boolean(selectedChoice?.input));
+    const showMiniMascotStatus = showInput && !confirm && !hasSlashPanel && !hasSetupPanel;
+    return (_jsxs(Box, { flexDirection: "column", children: [streamingMessage ? (_jsx(Box, { flexDirection: "column", paddingX: 1, children: _jsx(ChatBubble, { role: streamingMessage.role, content: streamingMessage.content, contentWidth: Math.max(1, (terminalColumns ?? 80) - 4), theme: streamingMessage.theme, tone: streamingMessage.tone, showDivider: false }) })) : null, showMiniMascotStatus ? (agentWorking ? _jsx(AgentWorkingStatus, {}) : _jsx(MiniMascotStatus, {})) : null, memoryPanel ? (_jsx(MemoryPanelOverlay, { panel: memoryPanel, selectedIndex: memoryPanelIndex, searchQuery: memorySearchQuery, editor: memoryEditor, panelWidth: Math.max(3, Math.floor(terminalColumns ?? 80) - 2) })) : null, !memoryPanel ? (_jsx(InputDock, { input: input, setInput: setInput, onSubmit: onSubmit, inputPlaceholder: inputPlaceholder, inputMask: inputMask, inputFocus: inputFocus, inputRevision: inputRevision, confirm: confirm, confirmIndex: confirmIndex, spotifyMode: spotifyMode, providerMode: providerMode, spotifySetup: spotifySetup, authSetup: authSetup, modelStatus: modelStatus, slashSuggestions: slashSuggestions, slashIndex: slashIndex, helpPanel: helpPanel, helpPanelIndex: helpPanelIndex, languagePanel: languagePanel, languagePanelIndex: languagePanelIndex, modelPanelIndex: modelPanelIndex, terminalColumns: terminalColumns, language: language })) : null] }));
+};
+/**
+ * Coordinates the use visible snapshot on revision operation for the CLI UI runtime.
+ *
+ * @param value Input value used by the use visible snapshot on revision operation.
+ * @param active Input value used by the use visible snapshot on revision operation.
+ * @param snapshotRevision Input value used by the use visible snapshot on revision operation.
+ * @returns The computed result for the surrounding CLI UI flow.
+ */
+function useVisibleSnapshotOnRevision(value, active, snapshotRevision) {
+    const snapshotRef = React.useRef(value);
+    const revisionRef = React.useRef(null);
+    if (active && revisionRef.current !== snapshotRevision) {
+        snapshotRef.current = value;
+        revisionRef.current = snapshotRevision;
+        return value;
+    }
+    if (!active) {
+        revisionRef.current = null;
+    }
+    return snapshotRef.current;
+}
+const MiniPlayerRegion = ({ player, coverUrl, coverPattern, terminalSpace, miniLayout, snapshotRevision, }) => {
+    const miniSnapshot = useVisibleSnapshotOnRevision({
+        player,
+        coverUrl,
+        coverPattern,
+        terminalSpace,
+        miniLayout,
+    }, true, snapshotRevision);
+    return (_jsx(Box, { width: "100%", height: "100%", padding: 0, flexDirection: "column", flexGrow: 1, flexShrink: 1, minHeight: 0, children: _jsx(PlayerPane, { player: miniSnapshot.player, coverUrl: miniSnapshot.coverUrl, coverPattern: miniSnapshot.coverPattern, terminalSpace: miniSnapshot.terminalSpace, miniLayout: miniSnapshot.miniLayout, variant: "compact", active: true }) }));
+};
+const ProviderImmersiveRegion = ({ player, spotifyMode, providerMode, spotifyImmersiveLayout, }) => {
+    const deviceName = spotifyMode.device_name ?? "Spotify Connect";
+    const deviceStatus = player.is_playing ? "playing" : "paused";
+    const topPadding = spotifyImmersiveLayout.topPadding;
+    const deviceWidth = spotifyImmersiveLayout.deviceSlot.width;
+    return (_jsxs(Box, { width: "100%", height: "100%", flexDirection: "column", flexGrow: 1, flexShrink: 1, minHeight: 0, paddingX: 2, paddingTop: topPadding, children: [_jsx(Box, { justifyContent: "center", children: _jsx(Text, { bold: true, color: SPOTIFY_GREEN, children: "Spotify Mode" }) }), _jsx(Box, { justifyContent: "center", marginTop: 1, children: _jsx(Text, { color: "#fff4f6", wrap: "truncate-end", children: player.name }) }), _jsx(Box, { justifyContent: "center", children: _jsx(Text, { color: "#bf98a7", wrap: "truncate-end", children: formatMiniTrackSubtitle(player.artist, player.album) }) }), _jsx(Box, { height: 1, marginTop: 1 }), _jsx(Box, { justifyContent: "center", children: _jsx(Box, { width: deviceWidth > 0 ? deviceWidth : undefined, justifyContent: "center", children: _jsx(Text, { color: SPOTIFY_GREEN, wrap: "truncate-end", children: providerMode.connection_status === "disconnected" ? "reconnecting" : `${deviceStatus} on ${deviceName}` }) }) })] }));
+};
+export const DynamicShell = ({ input, setInput, onSubmit, inputPlaceholder, inputMask, inputFocus, inputRevision, player, coverUrl, coverPattern, confirm, confirmIndex, spotifyMode, providerMode, spotifySetup, authSetup, modelStatus, slashSuggestions, slashIndex, helpPanel, helpPanelIndex, languagePanel, languagePanelIndex, modelPanelIndex, trackPanel, trackPanelIndex, extensionPanel, extensionPanelIndex, extensionInputFocused, memoryPanel, memoryPanelIndex, memorySearchQuery, memoryEditor, activeRegion, miniSnapshotRevision, miniLayout, spotifyImmersiveLayout, terminalSpace, agentWorking, streamingMessage, language = "en", }) => {
+    if (activeRegion === "miniPlayer") {
+        return (_jsx(MiniPlayerRegion, { player: player, coverUrl: coverUrl, coverPattern: coverPattern, terminalSpace: terminalSpace, miniLayout: miniLayout, snapshotRevision: miniSnapshotRevision }));
+    }
+    if (activeRegion === "spotifyImmersive" || activeRegion === "providerImmersive") {
+        return (_jsx(ProviderImmersiveRegion, { player: player, spotifyMode: spotifyMode, providerMode: providerMode, spotifyImmersiveLayout: spotifyImmersiveLayout }));
+    }
+    if (activeRegion === "trackPanel" && trackPanel) {
+        return (_jsx(TrackPanelOverlay, { trackPanel: trackPanel, selectedIndex: trackPanelIndex, panelWidth: Math.max(3, Math.floor(terminalSpace.columns ?? 80)), spotifyTheme: spotifyMode.enabled, language: language }));
+    }
+    if (extensionPanel) {
+        return (_jsx(ExtensionPanelOverlay, { panel: extensionPanel, selectedIndex: extensionPanelIndex, width: Math.max(3, Math.floor(terminalSpace.columns ?? 80) - 2), input: input, setInput: setInput, onSubmit: onSubmit, inputFocus: extensionPanel.view === "setup" && extensionInputFocused }));
+    }
+    return (_jsx(DynamicTail, { input: input, setInput: setInput, onSubmit: onSubmit, inputPlaceholder: inputPlaceholder, inputMask: inputMask, inputFocus: inputFocus, inputRevision: inputRevision, confirm: confirm, confirmIndex: confirmIndex, spotifyMode: spotifyMode, providerMode: providerMode, spotifySetup: spotifySetup, authSetup: authSetup, modelStatus: modelStatus, slashSuggestions: slashSuggestions, slashIndex: slashIndex, helpPanel: helpPanel, helpPanelIndex: helpPanelIndex, languagePanel: languagePanel, languagePanelIndex: languagePanelIndex, modelPanelIndex: modelPanelIndex, memoryPanel: activeRegion === "memoryPanel" ? memoryPanel : null, memoryPanelIndex: memoryPanelIndex, memorySearchQuery: memorySearchQuery, memoryEditor: memoryEditor, terminalColumns: terminalSpace.columns, agentWorking: agentWorking, streamingMessage: streamingMessage, language: language }));
+};