cli-jaw 2.0.5 → 2.0.6

package/public/manager/src/InstancePreview.tsx

@@ -39,13 +39,45 @@ function postPreviewTheme(frame: HTMLIFrameElement | null, src: string, theme: P
     }
 }
 
+function postPreviewSttToggle(frame: HTMLIFrameElement | null, src: string): void {
+    const targetWindow = frame?.contentWindow;
+    if (!targetWindow) return;
+    const targetOrigin = previewTargetOrigin(src, frame);
+    if (!targetOrigin || targetOrigin === 'null') return;
+    try {
+        targetWindow.postMessage(
+            { type: 'jaw-preview-stt-toggle' },
+            targetOrigin,
+        );
+    } catch (error) {
+        console.warn('[manager-preview] STT shortcut sync skipped', error);
+    }
+}
+
+function isEditableShortcutTarget(target: EventTarget | null): boolean {
+    if (!(target instanceof HTMLElement)) return false;
+    if (target.isContentEditable) return true;
+    const tag = target.tagName.toLowerCase();
+    if (tag === 'input' || tag === 'textarea' || tag === 'select') return true;
+    return Boolean(target.closest('[contenteditable="true"], .cm-editor, .ProseMirror, [data-milkdown-root]'));
+}
+
+function isPreviewSttShortcut(event: KeyboardEvent): boolean {
+    const primarySpace = (event.ctrlKey || event.metaKey) && event.shiftKey && event.code === 'Space';
+    const fallbackMic = event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey && event.code === 'KeyM';
+    return primarySpace || fallbackMic;
+}
+
 export function InstancePreview(props: InstancePreviewProps) {
     const iframeRef = useRef<HTMLIFrameElement | null>(null);
     const loadedSrcRef = useRef<string | null>(null);
     const state = buildPreviewState(
         props.instance,
         props.data,
-        props.theme,
+        // Keep the dedicated preview origin as the default. The legacy `/i`
+        // path is only a fallback because root-relative `/api` and `/ws`
+        // requests must keep targeting the managed instance.
+        { theme: props.theme },
     );
     const disabledReason = props.instance?.ok
         ? 'Preview is off. Turn it on from the header to mount the iframe.'
@@ -60,6 +92,19 @@ export function InstancePreview(props: InstancePreviewProps) {
         syncTheme();
     }, [syncTheme]);
 
+    useEffect(() => {
+        if (!props.active || !props.enabled || !state.canPreview || !state.src) return undefined;
+        function onKeyDown(event: KeyboardEvent): void {
+            if (event.defaultPrevented) return;
+            if (isEditableShortcutTarget(event.target)) return;
+            if (!isPreviewSttShortcut(event)) return;
+            event.preventDefault();
+            postPreviewSttToggle(iframeRef.current, state.src || '');
+        }
+        document.addEventListener('keydown', onKeyDown, true);
+        return () => document.removeEventListener('keydown', onKeyDown, true);
+    }, [props.active, props.enabled, state.canPreview, state.src]);
+
     const prevActiveRef = useRef(false);
     useEffect(() => {
         const wasActive = prevActiveRef.current;

package/public/manager/src/components/InstanceDetailPanel.tsx

@@ -6,6 +6,7 @@ import type {
 } from '../types';
 import { SettingsShell } from '../settings/SettingsShell';
 import { ProcessControlPanel } from './ProcessControlPanel';
+import { InstanceLogsPanel } from './InstanceLogsPanel';
 
 type InstanceDetailPanelProps = {
     instance: DashboardInstance | null;
@@ -36,9 +37,13 @@ export function InstanceDetailPanel(props: InstanceDetailPanelProps) {
                     </>
                 )}
 
-                {props.activeTab === 'logs' && (
+                {props.activeTab === 'logs' && instance && (
+                    <InstanceLogsPanel port={instance.port} />
+                )}
+
+                {props.activeTab === 'logs' && !instance && (
                     <div className="detail-empty">
-                        Logs stream is planned for phase 10.7. Recent dashboard events are available in the activity dock.
+                        Select an instance to view its logs.
                     </div>
                 )}
 

package/public/manager/src/components/InstanceLogsPanel.tsx

@@ -0,0 +1,138 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+type LogLevel = 'info' | 'warn' | 'error';
+
+type LogLine = {
+    ts: string;
+    level: LogLevel;
+    text: string;
+};
+
+type LogSnapshot = {
+    port: number;
+    fetchedAt: string;
+    lines: LogLine[];
+    truncated: boolean;
+    source: 'runtime' | 'health' | 'none';
+    reason?: string;
+};
+
+type InstanceLogsPanelProps = {
+    port: number;
+};
+
+const POLL_INTERVAL_MS = 4000;
+const LEVEL_CLASS: Record<LogLevel, string> = {
+    info: 'log-level-info',
+    warn: 'log-level-warn',
+    error: 'log-level-error',
+};
+
+function formatTs(iso: string): string {
+    try {
+        const d = new Date(iso);
+        return d.toLocaleTimeString('en-GB', { hour12: false });
+    } catch {
+        return iso.slice(11, 19);
+    }
+}
+
+export function InstanceLogsPanel({ port }: InstanceLogsPanelProps) {
+    const [snapshot, setSnapshot] = useState<LogSnapshot | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [autoScroll, setAutoScroll] = useState(true);
+    const [levelFilter, setLevelFilter] = useState<LogLevel | 'all'>('all');
+    const containerRef = useRef<HTMLDivElement>(null);
+    const pollingRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+    const fetchLogs = useCallback(async () => {
+        try {
+            const res = await fetch(`/api/manager/instance-logs/${port}`);
+            if (!res.ok) {
+                setError(`HTTP ${res.status}`);
+                return;
+            }
+            const json = await res.json() as { ok: boolean; snapshot?: LogSnapshot; error?: string };
+            if (json.ok && json.snapshot) {
+                setSnapshot(json.snapshot);
+                setError(null);
+            } else {
+                setError(json.error || 'Unknown error');
+            }
+        } catch (e) {
+            setError((e as Error).message);
+        }
+    }, [port]);
+
+    useEffect(() => {
+        fetchLogs();
+        pollingRef.current = setInterval(fetchLogs, POLL_INTERVAL_MS);
+        return () => {
+            if (pollingRef.current) clearInterval(pollingRef.current);
+        };
+    }, [fetchLogs]);
+
+    useEffect(() => {
+        if (autoScroll && containerRef.current) {
+            containerRef.current.scrollTop = containerRef.current.scrollHeight;
+        }
+    }, [snapshot, autoScroll]);
+
+    const filteredLines = snapshot?.lines.filter(
+        l => levelFilter === 'all' || l.level === levelFilter,
+    ) ?? [];
+
+    if (error && !snapshot) {
+        return <div className="detail-empty">Failed to load logs: {error}</div>;
+    }
+
+    if (snapshot?.source === 'none') {
+        return (
+            <div className="detail-empty">
+                {snapshot.reason || 'No log source reachable for this instance.'}
+            </div>
+        );
+    }
+
+    return (
+        <div className="logs-panel">
+            <div className="logs-toolbar">
+                <select
+                    className="logs-filter"
+                    value={levelFilter}
+                    onChange={e => setLevelFilter(e.target.value as LogLevel | 'all')}
+                >
+                    <option value="all">All levels</option>
+                    <option value="info">Info</option>
+                    <option value="warn">Warn</option>
+                    <option value="error">Error</option>
+                </select>
+                <label className="logs-autoscroll">
+                    <input
+                        type="checkbox"
+                        checked={autoScroll}
+                        onChange={e => setAutoScroll(e.target.checked)}
+                    />
+                    Auto-scroll
+                </label>
+                <span className="logs-meta">
+                    {snapshot ? `${snapshot.lines.length} lines · source: ${snapshot.source}` : 'Loading…'}
+                    {snapshot?.truncated && ' · truncated'}
+                </span>
+            </div>
+            <div className="logs-container" ref={containerRef}>
+                {filteredLines.length === 0 ? (
+                    <div className="logs-empty">No log lines available.</div>
+                ) : (
+                    filteredLines.map((line, i) => (
+                        <div key={i} className={`log-line ${LEVEL_CLASS[line.level]}`}>
+                            <span className="log-ts">{formatTs(line.ts)}</span>
+                            <span className="log-level">{line.level.toUpperCase()}</span>
+                            <span className="log-text">{line.text}</span>
+                        </div>
+                    ))
+                )}
+            </div>
+        </div>
+    );
+}

package/public/manager/src/dashboard-settings/DashboardEmbeddingSection.tsx

@@ -5,8 +5,10 @@ type EmbedConfig = {
     provider?: string;
     model?: string;
     apiKey?: string;
+    apiKeyPresent?: boolean;
     searchMode?: string;
     baseUrl?: string;
+    dimensions?: number;
 };
 
 type EmbedState = {
@@ -60,6 +62,14 @@ const SEARCH_MODES = [
     { value: 'fts5', label: 'FTS5 only (no vectors)' },
 ];
 
+const PROVIDER_PRESETS: Record<string, { model: string; dimensions: number }> = {
+    openai: { model: 'text-embedding-3-small', dimensions: 1536 },
+    gemini: { model: 'gemini-embedding-001', dimensions: 768 },
+    voyage: { model: 'voyage-3-lite', dimensions: 512 },
+    vertex: { model: 'text-embedding-005', dimensions: 768 },
+    local: { model: 'nomic-embed-text', dimensions: 768 },
+};
+
 async function apiFetch<T>(path: string, init?: RequestInit): Promise<T> {
     const res = await fetch(`${API}${path}`, {
         credentials: 'same-origin',
@@ -72,7 +82,7 @@ async function apiFetch<T>(path: string, init?: RequestInit): Promise<T> {
 
 function resolveStep(config: EmbedConfig | null, state: EmbedState | null, testOk: boolean | null): Step {
     if (!config?.provider) return 'provider';
-    if (config.provider !== 'local' && !config.apiKey) return 'apikey';
+    if (config.provider !== 'local' && !config.apiKey && !config.apiKeyPresent) return 'apikey';
     if (state?.state === 'ACTIVE_HYBRID' || state?.state === 'ACTIVE_EMBEDDING') return 'active';
     if (state?.state === 'INDEXING') return 'indexing';
     if (!testOk) return 'test';
@@ -106,6 +116,8 @@ export function DashboardEmbeddingSection() {
     const [loading, setLoading] = useState(true);
 
     const [provider, setProvider] = useState('');
+    const [model, setModel] = useState('');
+    const [dimensions, setDimensions] = useState(1536);
     const [apiKey, setApiKey] = useState('');
     const [searchMode, setSearchMode] = useState('hybrid');
     const [baseUrl, setBaseUrl] = useState('');
@@ -140,6 +152,8 @@ export function DashboardEmbeddingSection() {
     useEffect(() => {
         if (!config) return;
         setProvider(config.provider || '');
+        setModel(config.model || PROVIDER_PRESETS[config.provider || '']?.model || '');
+        setDimensions(config.dimensions ?? PROVIDER_PRESETS[config.provider || '']?.dimensions ?? 1536);
         setApiKey(config.apiKey || '');
         setSearchMode(config.searchMode || 'hybrid');
         setBaseUrl(config.baseUrl || '');
@@ -164,10 +178,10 @@ export function DashboardEmbeddingSection() {
         if (!provider) return;
         setTestOk(null);
         setTestMsg('');
-        const patch: Partial<EmbedConfig> = { provider, searchMode };
+        const patch: Partial<EmbedConfig> = { provider, model, dimensions, searchMode };
         if (baseUrl) patch.baseUrl = baseUrl;
         void saveConfig(patch);
-    }, [provider, searchMode, baseUrl, saveConfig]);
+    }, [provider, model, dimensions, searchMode, baseUrl, saveConfig]);
 
     const onKeySave = useCallback(() => {
         void saveConfig({ apiKey });
@@ -178,9 +192,11 @@ export function DashboardEmbeddingSection() {
         setTestMsg('Testing...');
         setError(null);
         try {
+            const testBody: Record<string, unknown> = { provider, model, dimensions, test: true };
+            if (apiKey.trim()) testBody['apiKey'] = apiKey.trim();
             const res = await apiFetch<{ ok: boolean; testResult?: string; testError?: string }>(
                 '/embed-config',
-                { method: 'POST', body: JSON.stringify({ provider, apiKey, test: true }) },
+                { method: 'POST', body: JSON.stringify(testBody) },
             );
             if (res.testResult === 'ok') {
                 setTestOk(true);
@@ -193,7 +209,7 @@ export function DashboardEmbeddingSection() {
             setTestOk(false);
             setTestMsg(err instanceof Error ? err.message : String(err));
         }
-    }, [provider, apiKey]);
+    }, [provider, model, dimensions, apiKey]);
 
     const onStartIndexing = useCallback(async () => {
         setIndexing(true);
@@ -260,7 +276,13 @@ export function DashboardEmbeddingSection() {
                 <legend>Provider</legend>
                 <div className="dashboard-embed-field">
                     <label htmlFor="embed-provider">Provider</label>
-                    <select id="embed-provider" value={provider} onChange={e => { setProvider(e.target.value); setTestOk(null); }}>
+                    <select id="embed-provider" value={provider} onChange={e => {
+                        const p = e.target.value;
+                        setProvider(p);
+                        setTestOk(null);
+                        const preset = PROVIDER_PRESETS[p];
+                        if (preset) { setModel(preset.model); setDimensions(preset.dimensions); }
+                    }}>
                         {PROVIDERS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
                     </select>
                 </div>
@@ -270,6 +292,14 @@ export function DashboardEmbeddingSection() {
                         {SEARCH_MODES.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
                     </select>
                 </div>
+                <div className="dashboard-embed-field">
+                    <label htmlFor="embed-model">Model</label>
+                    <input id="embed-model" type="text" value={model} onChange={e => setModel(e.target.value)} placeholder={PROVIDER_PRESETS[provider]?.model || 'model name'} />
+                </div>
+                <div className="dashboard-embed-field">
+                    <label htmlFor="embed-dimensions">Dimensions</label>
+                    <input id="embed-dimensions" type="number" min={64} max={4096} value={dimensions} onChange={e => setDimensions(Number(e.target.value) || 1536)} />
+                </div>
                 {(provider === 'local' || provider === 'vertex') && (
                     <div className="dashboard-embed-field">
                         <label htmlFor="embed-base-url">{provider === 'vertex' ? 'Project ID / Region' : 'Base URL'}</label>
@@ -298,7 +328,7 @@ export function DashboardEmbeddingSection() {
 
             <fieldset className="dashboard-embed-fieldset">
                 <legend>Connection test</legend>
-                <button type="button" className="dashboard-embed-btn" disabled={!provider || (!apiKey && provider !== 'local')} onClick={() => void onTestConnection()}>
+                <button type="button" className="dashboard-embed-btn" disabled={!provider || (!apiKey && !config?.apiKeyPresent && provider !== 'local')} onClick={() => void onTestConnection()}>
                     Test connection
                 </button>
                 {testMsg && (

package/public/manager/src/jaw-ceo/useJawCeoDashboardBridge.tsx

@@ -69,6 +69,7 @@ export function useJawCeoDashboardBridge(args: {
     ) : null;
 
     return {
+        voice,
         workbenchButton,
         voiceOverlay,
         consoleContent,

package/public/manager/src/manager-components.css

@@ -531,6 +531,82 @@ h2 { font-size: 13px; }
     font-size: 14px;
     font-weight: 500;
 }
+/* ─── Logs Panel ──────────────────────────────── */
+.logs-panel {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+.logs-toolbar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--border-subtle);
+    flex-shrink: 0;
+}
+.logs-filter {
+    font-size: 12px;
+    padding: 3px 6px;
+    border-radius: 4px;
+    border: 1px solid var(--border-subtle);
+    background: var(--canvas-mid);
+    color: var(--text-primary);
+}
+.logs-autoscroll {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    color: var(--text-secondary);
+    cursor: pointer;
+}
+.logs-meta {
+    margin-left: auto;
+    font-size: 11px;
+    color: var(--text-secondary);
+}
+.logs-container {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 6px 12px;
+    font-family: var(--font-mono, 'SF Mono', 'Menlo', monospace);
+    font-size: 12px;
+    line-height: 1.6;
+}
+.logs-empty {
+    color: var(--text-secondary);
+    padding: 20px 0;
+    text-align: center;
+}
+.log-line {
+    display: flex;
+    gap: 8px;
+    white-space: pre-wrap;
+    word-break: break-all;
+}
+.log-ts {
+    flex-shrink: 0;
+    color: var(--text-secondary);
+    opacity: 0.7;
+}
+.log-level {
+    flex-shrink: 0;
+    width: 42px;
+    font-weight: 600;
+}
+.log-level-info .log-level { color: var(--text-secondary); }
+.log-level-warn .log-level { color: var(--status-warn, #e5a100); }
+.log-level-error .log-level { color: var(--status-error, #e53935); }
+.log-level-warn { background: color-mix(in srgb, var(--status-warn, #e5a100) 6%, transparent); }
+.log-level-error { background: color-mix(in srgb, var(--status-error, #e53935) 8%, transparent); }
+.log-text {
+    flex: 1;
+    min-width: 0;
+}
+
 .process-control-panel {
     margin-top: 12px;
     border: 1px solid var(--border-subtle);

package/public/manager/src/preview.ts

@@ -10,8 +10,17 @@ export type PreviewState = {
 
 export type PreviewTheme = 'dark' | 'light';
 export type PreviewTransport = 'origin-port' | 'legacy-path' | 'none';
+export type PreviewTransportPreference = 'origin-port' | 'legacy-path';
 
-type PreviewArgument = PreviewTheme | 'proxy' | 'direct' | undefined;
+type PreviewArgument =
+    | PreviewTheme
+    | 'proxy'
+    | 'direct'
+    | {
+        theme?: PreviewTheme | null;
+        transport?: PreviewTransportPreference | null;
+    }
+    | undefined;
 
 function isLoopbackHost(hostname: string): boolean {
     return hostname === '127.0.0.1' || hostname === 'localhost' || hostname === '::1' || hostname === '[::1]';
@@ -21,6 +30,20 @@ function isPreviewTheme(value: PreviewArgument): value is PreviewTheme {
     return value === 'dark' || value === 'light';
 }
 
+function resolvePreviewArgument(value: PreviewArgument): { theme: PreviewTheme | null; transport: PreviewTransportPreference | null } {
+    if (value && typeof value === 'object') {
+        const theme = value.theme === 'dark' || value.theme === 'light' ? value.theme : null;
+        return {
+            theme,
+            transport: value.transport === 'legacy-path' || value.transport === 'origin-port' ? value.transport : null,
+        };
+    }
+    return {
+        theme: isPreviewTheme(value) ? value : null,
+        transport: value === 'proxy' ? 'legacy-path' : null,
+    };
+}
+
 export function normalizePreviewUrlForCurrentHost(src: string, currentHref?: string): string {
     const href = currentHref || (typeof window !== 'undefined' ? window.location.href : '');
     if (!href || src.startsWith('/')) return src;
@@ -66,8 +89,8 @@ export function buildPreviewState(
         return { canPreview: false, src: null, reason: 'This port is outside the proxy allowlist.', transport: 'none', warning: null };
     }
     const originPreview = proxy.preview?.instances[String(instance.port)];
-    const theme = isPreviewTheme(previewArgument) ? previewArgument : null;
-    if (proxy.preview?.enabled && originPreview?.status === 'ready' && originPreview.url) {
+    const { theme, transport } = resolvePreviewArgument(previewArgument);
+    if (transport !== 'legacy-path' && proxy.preview?.enabled && originPreview?.status === 'ready' && originPreview.url) {
         return {
             canPreview: true,
             src: appendPreviewTheme(normalizePreviewUrlForCurrentHost(originPreview.url), theme),

package/public/manager/src/settings/fields/SelectField.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, useEffect, useMemo, useRef, useState } from 'react';
 import type { KeyboardEvent } from 'react';
 
 type Option = { value: string; label: string };
@@ -11,13 +11,27 @@ type Props = {
     onChange: (next: string) => void;
     disabled?: boolean;
     error?: string | null;
+    collapsedAfter?: number;
 };
 
-export function SelectField({ id, label, value, options, onChange, disabled, error }: Props) {
+export function SelectField({ id, label, value, options, onChange, disabled, error, collapsedAfter }: Props) {
     const [open, setOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(0);
+    const [moreExpanded, setMoreExpanded] = useState(false);
     const rootRef = useRef<HTMLDivElement | null>(null);
-    const selectedIndex = options.findIndex((opt) => opt.value === value);
+
+    const needsExpand = collapsedAfter != null && collapsedAfter < options.length
+        && options.findIndex((o) => o.value === value) >= collapsedAfter;
+
+    const visibleOptions = useMemo(() => {
+        if (collapsedAfter == null || moreExpanded || needsExpand) return options;
+        return options.slice(0, collapsedAfter);
+    }, [options, collapsedAfter, moreExpanded, needsExpand]);
+
+    const hasMore = collapsedAfter != null && collapsedAfter < options.length;
+    const isExpanded = moreExpanded || needsExpand;
+
+    const selectedIndex = visibleOptions.findIndex((opt) => opt.value === value);
     const selected = useMemo(
         () => options.find((opt) => opt.value === value) || options[0],
         [options, value],
@@ -33,6 +47,10 @@ export function SelectField({ id, label, value, options, onChange, disabled, err
         return () => document.removeEventListener('mousedown', onPointerDown);
     }, []);
 
+    useEffect(() => {
+        if (!open) setMoreExpanded(false);
+    }, [open]);
+
     useEffect(() => {
         if (selectedIndex >= 0) setActiveIndex(selectedIndex);
     }, [selectedIndex]);
@@ -43,8 +61,8 @@ export function SelectField({ id, label, value, options, onChange, disabled, err
     };
 
     const move = (delta: number) => {
-        if (options.length === 0) return;
-        setActiveIndex((current) => (current + delta + options.length) % options.length);
+        if (visibleOptions.length === 0) return;
+        setActiveIndex((current) => (current + delta + visibleOptions.length) % visibleOptions.length);
     };
 
     const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
@@ -67,12 +85,12 @@ export function SelectField({ id, label, value, options, onChange, disabled, err
         }
         if (event.key === 'End') {
             event.preventDefault();
-            setActiveIndex(Math.max(0, options.length - 1));
+            setActiveIndex(Math.max(0, visibleOptions.length - 1));
             return;
         }
         if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
-            if (open && options[activeIndex]) commit(options[activeIndex]);
+            if (open && visibleOptions[activeIndex]) commit(visibleOptions[activeIndex]);
             else setOpen(true);
             return;
         }
@@ -107,20 +125,36 @@ export function SelectField({ id, label, value, options, onChange, disabled, err
             </button>
             {open ? (
                 <div className="settings-select-menu" id={listId} role="listbox" aria-labelledby={labelId}>
-                    {options.map((opt, index) => (
+                    {visibleOptions.map((opt, index) => (
+                        <Fragment key={opt.value}>
+                            {hasMore && index === collapsedAfter ? (
+                                <hr className="settings-select-divider" />
+                            ) : null}
+                            <button
+                                type="button"
+                                role="option"
+                                aria-selected={opt.value === value}
+                                className={`settings-select-option${index === activeIndex ? ' is-active' : ''}${opt.value === value ? ' is-selected' : ''}`}
+                                onMouseEnter={() => setActiveIndex(index)}
+                                onClick={() => commit(opt)}
+                            >
+                                <span>{opt.label}</span>
+                                {opt.value === value ? <span aria-hidden="true">✓</span> : null}
+                            </button>
+                        </Fragment>
+                    ))}
+                    {hasMore && !isExpanded ? (
                         <button
-                            key={opt.value}
                             type="button"
-                            role="option"
-                            aria-selected={opt.value === value}
-                            className={`settings-select-option${index === activeIndex ? ' is-active' : ''}${opt.value === value ? ' is-selected' : ''}`}
-                            onMouseEnter={() => setActiveIndex(index)}
-                            onClick={() => commit(opt)}
+                            className="settings-select-more"
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                setMoreExpanded(true);
+                            }}
                         >
-                            <span>{opt.label}</span>
-                            {opt.value === value ? <span aria-hidden="true">✓</span> : null}
+                            더 보기 ▸
                         </button>
-                    ))}
+                    ) : null}
                 </div>
             ) : null}
             {error ? <span className="settings-field-error">{error}</span> : null}