cli-jaw 2.0.4 → 2.0.5

package/public/manager/src/hooks/useDashboardView.ts

@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import type { DashboardDetailTab, DashboardLocale, DashboardNotesAuthoringMode, DashboardNotesViewMode, DashboardSidebarMode } from '../types';
+import { DEFAULT_MANAGER_SHORTCUT_KEYMAP, normalizeManagerShortcutKeymap } from '../manager-shortcuts';
+import type { DashboardDetailTab, DashboardLocale, DashboardNotesAuthoringMode, DashboardNotesViewMode, DashboardShortcutKeymap, DashboardSidebarMode } from '../types';
 
 export function useDashboardView() {
     const [selectedPort, setSelectedPort] = useState<number | null>(null);
@@ -18,8 +19,14 @@ export function useDashboardView() {
     const [showInlineLabelEditor, setShowInlineLabelEditor] = useState(true);
     const [showSidebarRuntimeLine, setShowSidebarRuntimeLine] = useState(true);
     const [showSelectedRowActions, setShowSelectedRowActions] = useState(true);
+    const [dashboardShortcutsEnabled, setDashboardShortcutsEnabled] = useState(true);
+    const [dashboardShortcutKeymap, setDashboardShortcutKeymapState] = useState<DashboardShortcutKeymap>({ ...DEFAULT_MANAGER_SHORTCUT_KEYMAP });
     const [locale, setLocale] = useState<DashboardLocale>('ko');
 
+    function setDashboardShortcutKeymap(value: unknown): void {
+        setDashboardShortcutKeymapState(normalizeManagerShortcutKeymap(value));
+    }
+
     return {
         selectedPort,
         setSelectedPort,
@@ -53,6 +60,10 @@ export function useDashboardView() {
         setShowSidebarRuntimeLine,
         showSelectedRowActions,
         setShowSelectedRowActions,
+        dashboardShortcutsEnabled,
+        setDashboardShortcutsEnabled,
+        dashboardShortcutKeymap,
+        setDashboardShortcutKeymap,
         locale,
         setLocale,
     };

package/public/manager/src/hooks/useInstanceMessageEvents.ts

@@ -13,6 +13,7 @@ export type MessageRow = {
     id: number;
     role: string;
     created_at?: string;
+    text?: string;
 };
 
 export type MessageEnvelope = {
@@ -78,7 +79,7 @@ async function fetchLatestAssistantMessage(port: number): Promise<{
     support: DashboardActivityTitleSupportStatus;
     busy: boolean;
 }> {
-    const response = await fetch(`/i/${port}/api/messages/latest`);
+    const response = await fetch(`/i/${port}/api/messages/latest?includeContent=1`);
     if (!response.ok) return { latest: null, title: null, support: 'offline', busy: false };
     const body = await response.json() as MessageEnvelope;
     return {
@@ -148,6 +149,7 @@ export function useInstanceMessageEvents(instances: DashboardInstance[]): Instan
                     at: latest.created_at && !Number.isNaN(Date.parse(latest.created_at))
                         ? latest.created_at
                         : new Date().toISOString(),
+                    ...(title ? { title } : {}),
                 });
             }
             if (cancelled) return;

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

@@ -0,0 +1,108 @@
+import { useEffect, useRef } from 'react';
+import type { JawCeoController } from './useJawCeo';
+import type { JawCeoVoiceController } from './useJawCeoVoice';
+import { JawCeoConsoleBody } from './JawCeoConsolePanels';
+import { JawCeoTabs } from './JawCeoTabs';
+import { useJawCeoConsoleModel } from './useJawCeoConsoleModel';
+
+const RefreshIcon = () => (
+    <svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+        <path d="M13.2 8a5.2 5.2 0 1 1-1.5-3.7" />
+        <path d="M13.2 3.2v3.2H10" />
+    </svg>
+);
+
+const CloseIcon = () => (
+    <svg viewBox="0 0 16 16" width="17" height="17" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
+        <path d="M4 4l8 8M12 4l-8 8" />
+    </svg>
+);
+
+function voiceFooterLabel(status: JawCeoVoiceController['status']): string {
+    if (status === 'connecting') return 'connecting';
+    if (status === 'active') return 'listening';
+    if (status === 'silent') return 'silent';
+    if (status === 'paused') return 'paused';
+    if (status === 'sleeping') return 'sleeping';
+    if (status === 'disabled') return 'disabled';
+    if (status === 'error') return 'error';
+    return 'idle';
+}
+
+function canPauseVoice(status: JawCeoVoiceController['status']): boolean {
+    return status === 'active' || status === 'connecting' || status === 'silent';
+}
+
+function voiceTone(status: JawCeoVoiceController['status']): string {
+    if (status === 'active' || status === 'connecting' || status === 'silent') return 'live';
+    if (status === 'paused' || status === 'sleeping') return 'paused';
+    if (status === 'disabled' || status === 'error') return 'issue';
+    return 'idle';
+}
+
+export function JawCeoConsole(props: {
+    open: boolean;
+    selectedPort: number | null;
+    ceo: JawCeoController;
+    voice: JawCeoVoiceController;
+    onClose: () => void;
+    onOpenWorker: (port: number, messageId?: number) => void;
+}) {
+    const closeRef = useRef<HTMLButtonElement | null>(null);
+    const model = useJawCeoConsoleModel({ ceo: props.ceo });
+
+    useEffect(() => {
+        if (!props.open) return undefined;
+        closeRef.current?.focus();
+        function onKeyDown(event: KeyboardEvent): void {
+            if (event.key !== 'Escape') return;
+            if (canPauseVoice(props.voice.status)) {
+                event.preventDefault();
+                void props.voice.stop();
+                return;
+            }
+            props.onClose();
+        }
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [props]);
+
+    if (!props.open) return null;
+    const target = props.selectedPort == null ? 'Dashboard' : `Worker :${props.selectedPort}`;
+    const voiceLabel = voiceFooterLabel(props.voice.status);
+    return (
+        <>
+            <div className="jaw-ceo-console-overlay" onClick={props.onClose} aria-hidden="true" />
+            <aside className="jaw-ceo-console" role="dialog" aria-modal="true" aria-label="Jaw CEO console">
+                <header className="jaw-ceo-console-header">
+                    <div className="jaw-ceo-console-titlebar">
+                        <span className={`jaw-ceo-console-mark status-${props.voice.status}`} aria-hidden="true">CEO</span>
+                        <div className="jaw-ceo-console-heading">
+                            <span>Dashboard coordinator</span>
+                            <h3>Jaw CEO</h3>
+                        </div>
+                    </div>
+                    <div className="jaw-ceo-console-header-actions">
+                        <button type="button" className="jaw-ceo-icon-btn" onClick={() => void props.ceo.refresh()} aria-label="Refresh Jaw CEO"><RefreshIcon /></button>
+                        <button ref={closeRef} type="button" className="jaw-ceo-console-close" onClick={props.onClose} aria-label="Close Jaw CEO"><CloseIcon /></button>
+                    </div>
+                    <div className="jaw-ceo-console-summary" aria-label="Jaw CEO status summary">
+                        <span>{target}</span>
+                        <span>Single session</span>
+                        <span className={`voice-tone-${voiceTone(props.voice.status)}`}>Voice {voiceLabel}</span>
+                    </div>
+                </header>
+                <JawCeoTabs active={model.tab} onChange={model.setTab} />
+                <div className="jaw-ceo-console-body"><JawCeoConsoleBody model={model} ceo={props.ceo} voice={props.voice} selectedPort={props.selectedPort} onOpenWorker={props.onOpenWorker} /></div>
+                <footer className={`jaw-ceo-console-footer voice-${props.voice.status}`}>
+                    <div className="jaw-ceo-realtime-status">
+                        <span className="jaw-ceo-realtime-dot" aria-hidden="true" />
+                        <span>Voice: {voiceLabel}{props.voice.error ? ` - ${props.voice.error}` : ''}</span>
+                        {props.voice.lastTranscript ? <small>{props.voice.lastTranscript}</small> : props.voice.lastEventType ? <small>{props.voice.lastEventType}</small> : null}
+                    </div>
+                    <button type="button" className="jaw-ceo-voice-action" onClick={() => canPauseVoice(props.voice.status) ? void props.voice.stop() : void props.voice.talk()}>{canPauseVoice(props.voice.status) ? 'Stop voice' : 'Start voice'}</button>
+                </footer>
+            </aside>
+        </>
+    );
+}

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

@@ -0,0 +1,331 @@
+import { useCallback, useMemo, type ReactElement } from 'react';
+import type { JawCeoController } from './useJawCeo';
+import type { JawCeoVoiceController } from './useJawCeoVoice';
+import type { JawCeoAuditRecord, JawCeoCompletion, JawCeoResponseMode, JawCeoWatch } from './types';
+import type { JawCeoConsoleModel } from './useJawCeoConsoleModel';
+import { useJawCeoVirtualTimeline } from './useJawCeoVirtualTimeline';
+import { JawCeoSettingsPanel } from './JawCeoSettingsPanel';
+
+type TimelineEntry =
+    | { kind: 'chat'; id: string; at: string; role: 'user' | 'ceo' | 'tool'; text: string }
+    | { kind: 'result'; id: string; at: string; completion: JawCeoCompletion }
+    | { kind: 'watch'; id: string; at: string; watch: JawCeoWatch }
+    | { kind: 'tool'; id: string; at: string; record: JawCeoAuditRecord }
+    | { kind: 'live'; id: string; at: string; text: string; eventType: string | null };
+
+type ActivityEntry = Extract<TimelineEntry, { kind: 'result' | 'watch' | 'tool' }>;
+type RenderItem =
+    | Extract<TimelineEntry, { kind: 'chat' | 'live' }>
+    | { kind: 'activity-group'; id: string; at: string; entries: ActivityEntry[] };
+type ActivityTone = 'tool' | 'thinking' | 'subagent';
+
+function formatTime(raw: string): string {
+    const date = new Date(raw);
+    if (Number.isNaN(date.getTime())) return raw;
+    return date.toLocaleTimeString();
+}
+
+function completionLabel(completion: JawCeoCompletion): string {
+    return completion.summary || `Worker :${completion.port} has a result ready.`;
+}
+
+function quickPrompts(selectedPort: number | null): Array<{ label: string; text: string }> {
+    return [
+        {
+            label: selectedPort == null ? 'Inspect dashboard' : `Inspect :${selectedPort}`,
+            text: selectedPort == null ? 'What needs attention on this dashboard right now?' : `What is worker :${selectedPort} doing right now?`,
+        },
+        { label: 'Summarize results', text: 'Summarize the worker results and tell me what needs action.' },
+        {
+            label: selectedPort == null ? 'Route work' : `Send to :${selectedPort}`,
+            text: selectedPort == null ? 'Create or choose the right worker for this task: ' : `Send this task to worker :${selectedPort}: `,
+        },
+    ];
+}
+
+function buildTimeline(args: { model: JawCeoConsoleModel; ceo: JawCeoController; voice: JawCeoVoiceController }): TimelineEntry[] {
+    const transcript = Array.isArray(args.ceo.state.transcript) ? args.ceo.state.transcript : [];
+    const watches = Array.isArray(args.ceo.state.watches) ? args.ceo.state.watches : [];
+    const audit = Array.isArray(args.ceo.audit) ? args.ceo.audit : [];
+    const entries: TimelineEntry[] = [
+        ...transcript.map(entry => ({ kind: 'chat' as const, id: entry.id, at: entry.at, role: entry.role, text: entry.text })),
+        ...args.ceo.pending
+            .filter(completion => completion.status === 'pending' || completion.status === 'spoken')
+            .map(completion => ({ kind: 'result' as const, id: `result-${completion.completionKey}`, at: completion.detectedAt, completion })),
+        ...watches.map(watch => ({ kind: 'watch' as const, id: `watch-${watch.watchId}`, at: watch.createdAt, watch })),
+        ...audit.slice(-24).map(record => ({ kind: 'tool' as const, id: `audit-${record.id}`, at: record.at, record })),
+    ];
+    entries.sort((a, b) => {
+        const diff = Date.parse(a.at) - Date.parse(b.at);
+        return diff === 0 ? a.id.localeCompare(b.id) : diff;
+    });
+    if (args.voice.lastTranscript) {
+        entries.push({ kind: 'live', id: 'live-voice-transcript', at: new Date().toISOString(), text: args.voice.lastTranscript, eventType: args.voice.lastEventType });
+    }
+    return entries;
+}
+
+function estimateTimelineItemSize(entry: RenderItem | undefined): number {
+    if (!entry) return 76;
+    if (entry.kind === 'activity-group') return 52;
+    const lineCount = Math.max(1, entry.text.split(/\r?\n/).filter(Boolean).length);
+    return Math.min(220, 54 + lineCount * 18);
+}
+
+function groupTimeline(entries: TimelineEntry[]): RenderItem[] {
+    const items: RenderItem[] = [];
+    let group: ActivityEntry[] = [];
+    function flush(): void {
+        if (group.length === 0) return;
+        items.push({ kind: 'activity-group', id: `activity-${group[0].id}-${group.length}`, at: group[0].at, entries: group });
+        group = [];
+    }
+    for (const entry of entries) {
+        if (entry.kind === 'chat' || entry.kind === 'live') {
+            flush();
+            items.push(entry);
+        } else {
+            group.push(entry);
+        }
+    }
+    flush();
+    return items;
+}
+
+function activityTone(entry: ActivityEntry): ActivityTone {
+    if (entry.kind === 'result') return 'subagent';
+    if (entry.kind === 'watch') return 'thinking';
+    if (entry.record.kind === 'tool') return 'tool';
+    if (entry.record.kind === 'completion') return 'subagent';
+    return 'thinking';
+}
+
+function activityTitle(entry: ActivityEntry): string {
+    if (entry.kind === 'result') return `Worker :${entry.completion.port} result`;
+    if (entry.kind === 'watch') return `Listening to worker :${entry.watch.port}`;
+    if (entry.record.kind === 'completion') return 'Worker completion';
+    if (entry.record.kind === 'docs_edit') return 'Docs edit';
+    if (entry.record.kind === 'lifecycle') return 'Lifecycle';
+    if (entry.record.kind === 'policy') return 'Policy check';
+    return entry.record.action || 'Tool use';
+}
+
+function activityPreview(entry: ActivityEntry): string {
+    if (entry.kind === 'result') return entry.completion.resultText || completionLabel(entry.completion);
+    if (entry.kind === 'watch') return `${entry.watch.reason} · fallback ${entry.watch.latestMessageFallback.mode}`;
+    return entry.record.message;
+}
+
+function activityTime(entry: ActivityEntry): string {
+    if (entry.kind === 'result') return entry.completion.detectedAt;
+    if (entry.kind === 'watch') return entry.watch.createdAt;
+    return entry.record.at;
+}
+
+function activityIsError(entry: ActivityEntry): boolean {
+    return entry.kind === 'tool' && !entry.record.ok;
+}
+
+function activitySummary(entries: ActivityEntry[]): string {
+    const counts = entries.reduce((acc, entry) => {
+        acc[activityTone(entry)] += 1;
+        return acc;
+    }, { tool: 0, thinking: 0, subagent: 0 });
+    return [
+        counts.tool > 0 ? `Tool×${counts.tool}` : null,
+        counts.thinking > 0 ? `Thinking×${counts.thinking}` : null,
+        counts.subagent > 0 ? `Subagent×${counts.subagent}` : null,
+    ].filter(Boolean).join(' + ');
+}
+
+function MessageText(props: { text: string }) {
+    const lines = props.text.split(/\r?\n/).map(line => line.trim()).filter(Boolean);
+    if (lines.length === 0) return <p>...</p>;
+    const blocks: ReactElement[] = [];
+    let bullets: string[] = [];
+    function flushBullets(): void {
+        if (bullets.length === 0) return;
+        blocks.push(<ul key={`ul-${blocks.length}`}>{bullets.map((bullet, index) => <li key={`${bullet}-${index}`}>{bullet}</li>)}</ul>);
+        bullets = [];
+    }
+    lines.forEach((line, index) => {
+        const bullet = line.match(/^[-*]\s+(.+)$/);
+        if (bullet) {
+            bullets.push(bullet[1]);
+            return;
+        }
+        flushBullets();
+        blocks.push(<p key={`p-${index}`}>{line}</p>);
+    });
+    flushBullets();
+    return <>{blocks}</>;
+}
+
+function ActivityIcon(props: { tone: ActivityTone }) {
+    if (props.tone === 'tool') {
+        return (
+            <svg viewBox="0 0 16 16" aria-hidden="true">
+                <path d="M10.5 2.5 13 5l-2.4 2.4-1.2-1.2-4.8 4.8-1.7.2.2-1.7 4.8-4.8-1.1-1.1L9.2 1.2l1.3 1.3Z" />
+            </svg>
+        );
+    }
+    if (props.tone === 'subagent') {
+        return (
+            <svg viewBox="0 0 16 16" aria-hidden="true">
+                <path d="M3 4.5h10v7H3z" />
+                <path d="M6 4.5V3h4v1.5M5.2 8h.1M10.7 8h.1" />
+            </svg>
+        );
+    }
+    return (
+        <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path d="M3 4.5h10v7H5.7L3 13.4z" />
+        </svg>
+    );
+}
+
+function ActivityGroup(props: {
+    entries: ActivityEntry[];
+    model: JawCeoConsoleModel;
+    ceo: JawCeoController;
+    voice: JawCeoVoiceController;
+    onOpenWorker: (port: number, messageId?: number) => void;
+}) {
+    return (
+        <section className="jaw-ceo-activity-shell" aria-label="CEO activity">
+            <span className="jaw-ceo-activity-avatar" aria-hidden="true">CEO</span>
+            <details className="jaw-ceo-activity-group">
+                <summary>
+                    <span className="jaw-ceo-activity-status" aria-hidden="true" />
+                    <strong>{activitySummary(props.entries) || 'Activity'}</strong>
+                </summary>
+                <div className="jaw-ceo-activity-list">
+                    {props.entries.map(entry => {
+                        const tone = activityTone(entry);
+                        return (
+                            <article key={entry.id} className={`jaw-ceo-activity-row tone-${tone}${activityIsError(entry) ? ' is-error' : ''}`}>
+                                <span className="jaw-ceo-activity-dot" aria-hidden="true" />
+                                <span className="jaw-ceo-activity-icon"><ActivityIcon tone={tone} /></span>
+                                <span className="jaw-ceo-activity-badge">{tone}</span>
+                                <div className="jaw-ceo-activity-copy">
+                                    <strong>{activityTitle(entry)}</strong>
+                                    <p>{activityPreview(entry)}</p>
+                                    <small>{formatTime(activityTime(entry))}</small>
+                                </div>
+                                {entry.kind === 'result' ? (
+                                    <div className="jaw-ceo-activity-actions">
+                                        <button type="button" onClick={() => props.onOpenWorker(entry.completion.port, entry.completion.messageId)}>Open</button>
+                                        <button type="button" onClick={() => void props.model.summarize(entry.completion)}>Summary</button>
+                                        <button type="button" onClick={() => void props.model.continueCompletion(entry.completion)}>Continue</button>
+                                        <button type="button" onClick={() => void props.voice.speakCompletion(entry.completion)}>Speak</button>
+                                        <button type="button" onClick={() => void props.ceo.ackCompletion(entry.completion.completionKey)}>Ack</button>
+                                    </div>
+                                ) : <span className="jaw-ceo-trace-chip">Trace</span>}
+                            </article>
+                        );
+                    })}
+                </div>
+            </details>
+        </section>
+    );
+}
+
+function TimelineEntryView(props: {
+    entry: RenderItem;
+    model: JawCeoConsoleModel;
+    ceo: JawCeoController;
+    voice: JawCeoVoiceController;
+    onOpenWorker: (port: number, messageId?: number) => void;
+}) {
+    const entry = props.entry;
+    if (entry.kind === 'activity-group') {
+        return <ActivityGroup entries={entry.entries} model={props.model} ceo={props.ceo} voice={props.voice} onOpenWorker={props.onOpenWorker} />;
+    }
+    if (entry.kind === 'chat') {
+        return (
+            <article className={`jaw-ceo-message-row role-${entry.role}`}>
+                <span className="jaw-ceo-message-avatar" aria-hidden="true">{entry.role === 'user' ? 'You' : entry.role === 'ceo' ? 'CEO' : 'Log'}</span>
+                <div className="jaw-ceo-message-bubble">
+                    <div className="jaw-ceo-message-meta"><strong>{entry.role === 'user' ? 'You' : entry.role === 'ceo' ? 'Jaw CEO' : 'Tool output'}</strong><small>{formatTime(entry.at)}</small></div>
+                    <div className="jaw-ceo-message-text"><MessageText text={entry.text} /></div>
+                </div>
+            </article>
+        );
+    }
+    if (entry.kind === 'live') {
+        return (
+            <article className="jaw-ceo-message-row role-ceo is-live" aria-live="polite">
+                <span className="jaw-ceo-message-avatar is-live" aria-hidden="true">CEO</span>
+                <div className="jaw-ceo-message-bubble">
+                    <div className="jaw-ceo-message-meta"><strong>Jaw CEO live</strong><small>{entry.eventType || 'realtime'}</small></div>
+                    <div className="jaw-ceo-message-text"><MessageText text={entry.text} /></div>
+                </div>
+            </article>
+        );
+    }
+    return null;
+}
+
+function ChatPanel(props: { model: JawCeoConsoleModel; ceo: JawCeoController; voice: JawCeoVoiceController; selectedPort: number | null; onOpenWorker: (port: number, messageId?: number) => void }) {
+    const timeline = useMemo(() => groupTimeline(buildTimeline({ model: props.model, ceo: props.ceo, voice: props.voice })), [
+        props.model,
+        props.ceo.state.transcript,
+        props.ceo.pending,
+        props.ceo.state.watches,
+        props.ceo.audit,
+        props.voice.lastTranscript,
+        props.voice.lastEventType,
+    ]);
+    const getItemKey = useCallback((index: number) => timeline[index]?.id || index, [timeline]);
+    const estimateSize = useCallback((index: number) => estimateTimelineItemSize(timeline[index]), [timeline]);
+    const virtual = useJawCeoVirtualTimeline({ count: timeline.length, getItemKey, estimateSize });
+    return (
+        <section className="jaw-ceo-chat-panel" aria-label="Jaw CEO chat">
+            <div ref={virtual.scrollRef} onScroll={virtual.onScroll} className="jaw-ceo-chat-log jaw-ceo-timeline is-virtual" aria-live="polite">
+                {timeline.length === 0 ? (
+                    <div className="jaw-ceo-empty-state">
+                        <span className="jaw-ceo-empty-kicker">Ready</span>
+                        <strong>{props.selectedPort == null ? 'Dashboard context' : `Worker :${props.selectedPort} selected`}</strong>
+                        <div className="jaw-ceo-quick-prompts">
+                            {quickPrompts(props.selectedPort).map(prompt => (
+                                <button key={prompt.label} type="button" onClick={() => props.model.setMessage(prompt.text)}>{prompt.label}</button>
+                            ))}
+                        </div>
+                    </div>
+                ) : (
+                    <div className="jaw-ceo-virtual-spacer" style={{ height: `${virtual.totalSize}px` }}>
+                        {virtual.virtualItems.map(virtualItem => {
+                            const entry = timeline[virtualItem.index];
+                            if (!entry) return null;
+                            return (
+                                <div
+                                    key={virtualItem.key}
+                                    ref={virtual.measureElement}
+                                    className="jaw-ceo-virtual-row"
+                                    data-jaw-ceo-idx={virtualItem.index}
+                                    style={{ transform: `translateY(${virtualItem.start}px)` }}
+                                >
+                                    <TimelineEntryView entry={entry} model={props.model} ceo={props.ceo} voice={props.voice} onOpenWorker={props.onOpenWorker} />
+                                </div>
+                            );
+                        })}
+                    </div>
+                )}
+            </div>
+            <form className="jaw-ceo-message-form" onSubmit={(event) => void props.model.submitMessage(event)}>
+                <textarea value={props.model.message} rows={3} placeholder="Send a task to the selected worker or ask about the dashboard." onChange={event => props.model.setMessage(event.target.value)} />
+                <div className="jaw-ceo-form-row">
+                    <select value={props.model.responseMode} aria-label="Response mode" onChange={event => props.model.setResponseMode(event.target.value as JawCeoResponseMode)}>
+                        <option value="text">Text</option><option value="voice">Voice</option><option value="both">Both</option><option value="silent">Silent</option>
+                    </select>
+                    <button type="submit" disabled={props.ceo.busy || !props.model.message.trim()}>Send</button>
+                </div>
+            </form>
+        </section>
+    );
+}
+
+export function JawCeoConsoleBody(props: { model: JawCeoConsoleModel; ceo: JawCeoController; voice: JawCeoVoiceController; selectedPort: number | null; onOpenWorker: (port: number, messageId?: number) => void }) {
+    if (props.model.tab === 'settings') return <JawCeoSettingsPanel />;
+    return <ChatPanel model={props.model} ceo={props.ceo} voice={props.voice} selectedPort={props.selectedPort} onOpenWorker={props.onOpenWorker} />;
+}

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

@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react';
+import { fetchJawCeoSettings, updateJawCeoSettings } from './api';
+import type { JawCeoVoiceSettings } from './types';
+
+function keyLabel(settings: JawCeoVoiceSettings | null): string {
+    if (settings?.openaiKeyInvalid) return 'Invalid saved key';
+    if (!settings?.openaiKeySet) return 'No key saved';
+    const suffix = settings.openaiKeyLast4 ? `•••• ${settings.openaiKeyLast4}` : 'saved';
+    if (settings.openaiKeySource === 'env') return `Env key ${suffix}`;
+    if (settings.openaiKeySource === 'deps') return `Runtime key ${suffix}`;
+    return `Saved key ${suffix}`;
+}
+
+export function JawCeoSettingsPanel() {
+    const [settings, setSettings] = useState<JawCeoVoiceSettings | null>(null);
+    const [keyInput, setKeyInput] = useState('');
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const canClearSaved = Boolean(settings?.openaiKeyInvalid || (settings?.openaiKeySet && settings.openaiKeySource !== 'env'));
+
+    useEffect(() => {
+        let cancelled = false;
+        void fetchJawCeoSettings()
+            .then(next => {
+                if (!cancelled) setSettings(next);
+            })
+            .catch(err => {
+                if (!cancelled) setError((err as Error).message);
+            });
+        return () => { cancelled = true; };
+    }, []);
+
+    async function saveKey(): Promise<void> {
+        const trimmed = keyInput.trim();
+        if (!trimmed) return;
+        setSaving(true);
+        try {
+            const next = await updateJawCeoSettings({ openaiApiKey: trimmed });
+            setSettings(next);
+            setKeyInput('');
+            setError(null);
+        } catch (err) {
+            setError((err as Error).message);
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    async function clearKey(): Promise<void> {
+        setSaving(true);
+        try {
+            const next = await updateJawCeoSettings({ clearOpenAiApiKey: true });
+            setSettings(next);
+            setKeyInput('');
+            setError(null);
+        } catch (err) {
+            setError((err as Error).message);
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <section className="jaw-ceo-settings-panel" aria-label="Jaw CEO settings">
+            <form className="jaw-ceo-settings-form" onSubmit={(event) => { event.preventDefault(); void saveKey(); }}>
+                <div className="jaw-ceo-settings-status">
+                    <strong>Realtime voice</strong>
+                    <span>{keyLabel(settings)}</span>
+                </div>
+                <label>
+                    <span>OpenAI API key</span>
+                    <input
+                        value={keyInput}
+                        type="password"
+                        autoComplete="off"
+                        spellCheck={false}
+                        placeholder={settings?.openaiKeySet ? 'sk-... replace saved key' : 'sk-...'}
+                        onChange={event => setKeyInput(event.target.value)}
+                    />
+                </label>
+                <div className="jaw-ceo-settings-meta">
+                    <span>{settings?.model || 'gpt-realtime-2'}</span>
+                    <span>{settings?.voice || 'marin'}</span>
+                </div>
+                {settings?.openaiKeyInvalid ? <p className="jaw-ceo-inline-error">Saved value is not an OpenAI API key. Paste a key that starts with sk-.</p> : null}
+                {error ? <p className="jaw-ceo-inline-error">{error}</p> : null}
+                <div className="jaw-ceo-form-row">
+                    <button type="button" disabled={saving || !canClearSaved} onClick={() => void clearKey()}>Clear saved</button>
+                    <button type="submit" disabled={saving || !keyInput.trim()}>{saving ? 'Saving' : 'Save key'}</button>
+                </div>
+            </form>
+        </section>
+    );
+}

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

@@ -0,0 +1,28 @@
+import type { JawCeoConsoleTab } from './types';
+
+const TABS: Array<{ id: JawCeoConsoleTab; label: string }> = [
+    { id: 'chat', label: 'Chat' },
+    { id: 'settings', label: 'Settings' },
+];
+
+export function JawCeoTabs(props: {
+    active: JawCeoConsoleTab;
+    onChange: (tab: JawCeoConsoleTab) => void;
+}) {
+    return (
+        <div className="jaw-ceo-tabs" role="tablist" aria-label="Jaw CEO console tabs">
+            {TABS.map(tab => (
+                <button
+                    key={tab.id}
+                    type="button"
+                    role="tab"
+                    className={props.active === tab.id ? 'is-active' : ''}
+                    aria-selected={props.active === tab.id}
+                    onClick={() => props.onChange(tab.id)}
+                >
+                    <span>{tab.label}</span>
+                </button>
+            ))}
+        </div>
+    );
+}

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

@@ -0,0 +1,34 @@
+import type { JawCeoVoiceStatus } from './types';
+
+function statusLabel(status: JawCeoVoiceStatus): string {
+    if (status === 'connecting') return 'Connecting voice';
+    if (status === 'silent') return 'Listening';
+    return 'Voice active';
+}
+
+export function JawCeoVoiceOverlay(props: {
+    status: JawCeoVoiceStatus;
+    selectedPort: number | null;
+    lastEventType: string | null;
+    lastTranscript: string | null;
+    onStop: () => void;
+}) {
+    if (props.status !== 'connecting' && props.status !== 'active' && props.status !== 'silent') return null;
+    const label = statusLabel(props.status);
+    const target = props.selectedPort == null ? 'Dashboard' : `Worker :${props.selectedPort}`;
+    return (
+        <div className={`jaw-ceo-voice-overlay status-${props.status}`} role="status" aria-live="polite">
+            <div className="jaw-ceo-voice-overlay-card">
+                <div className="jaw-ceo-voice-wave" aria-hidden="true"><span /><span /><span /></div>
+                <div className="jaw-ceo-voice-overlay-copy">
+                    <strong>{label}</strong>
+                    <span>{props.status === 'silent' ? 'No speech detected. Session is still open.' : target}</span>
+                    {props.lastTranscript ? <small>{props.lastTranscript}</small> : props.lastEventType ? <small>{props.lastEventType}</small> : null}
+                </div>
+                <button type="button" className="jaw-ceo-voice-stop" aria-label="Stop Jaw CEO voice" onClick={props.onStop}>
+                    Stop
+                </button>
+            </div>
+        </div>
+    );
+}