cli-jaw 2.0.4 → 2.0.5

package/public/manager/src/jaw-ceo/useJawCeoVoice.ts

@@ -0,0 +1,219 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { closeJawCeoVoice, continueJawCeoCompletion, sendJawCeoMessage } from './api';
+import type { JawCeoCompletion, JawCeoResponseMode, JawCeoVoiceStatus } from './types';
+import { playJawCeoVoiceCue } from './voice-cues';
+import { createJawCeoVoicePeerSession, type JawCeoVoicePeerSession } from './voice-session';
+
+const SILENT_STATE_AFTER_MS = 4_000;
+const SILENT_CUE_MIN_INTERVAL_MS = 30_000;
+
+export type UseJawCeoVoiceArgs = {
+    selectedPort: number | null;
+    sessionId?: string;
+    autoRead: boolean;
+    documentVisible: boolean;
+    onTranscript: (text: string) => void;
+    onSpokenCompletion: (completionKey: string) => void;
+};
+
+export type JawCeoVoiceController = {
+    status: JawCeoVoiceStatus;
+    error: string | null;
+    lastEventType: string | null;
+    lastTranscript: string | null;
+    talk: () => Promise<void>;
+    stop: () => Promise<void>;
+    end: () => Promise<void>;
+    sendText: (text: string, responseMode: JawCeoResponseMode) => Promise<void>;
+    speakCompletion: (completion: JawCeoCompletion) => Promise<void>;
+};
+
+function transcriptFromRealtimeEvent(event: unknown): string | null {
+    if (!event || typeof event !== 'object') return null;
+    const record = event as Record<string, unknown>;
+    const type = String(record["type"] || '');
+    if (typeof record["delta"] === 'string' && (
+        type === 'response.audio_transcript.delta'
+        || type === 'response.text.delta'
+        || type === 'response.output_text.delta'
+    )) return record["delta"];
+    if (typeof record["transcript"] === 'string') return record["transcript"];
+    if (typeof record["text"] === 'string' && (type.includes('transcript') || type.includes('text'))) return record["text"];
+    if (typeof record["output"] === 'string') return record["output"];
+    return null;
+}
+
+function shouldAppendRealtimeText(eventType: string | null): boolean {
+    return eventType === 'response.audio_transcript.delta'
+        || eventType === 'response.text.delta'
+        || eventType === 'response.output_text.delta';
+}
+
+function eventTypeFromRealtimeEvent(event: unknown): string | null {
+    if (!event || typeof event !== 'object') return null;
+    const type = (event as Record<string, unknown>)["type"];
+    return typeof type === 'string' ? type : null;
+}
+
+export function useJawCeoVoice(args: UseJawCeoVoiceArgs): JawCeoVoiceController {
+    const [status, setStatus] = useState<JawCeoVoiceStatus>('idle');
+    const [error, setError] = useState<string | null>(null);
+    const [lastEventType, setLastEventType] = useState<string | null>(null);
+    const [lastTranscript, setLastTranscript] = useState<string | null>(null);
+    const sessionRef = useRef<JawCeoVoicePeerSession | null>(null);
+    const argsRef = useRef(args);
+    const connectTokenRef = useRef(0);
+    const lastActivityAtRef = useRef(Date.now());
+    const lastSilentCueAtRef = useRef(0);
+    const responseTranscriptRef = useRef('');
+
+    useEffect(() => {
+        argsRef.current = args;
+    }, [args]);
+
+    function markActivity(eventType: string | null, transcript?: string | null): void {
+        lastActivityAtRef.current = Date.now();
+        if (eventType) setLastEventType(eventType);
+        if (transcript) setLastTranscript(transcript.length > 180 ? `${transcript.slice(0, 177)}...` : transcript);
+        setStatus(current => current === 'silent' ? 'active' : current);
+    }
+
+    const closePhysicalSession = useCallback(async () => {
+        connectTokenRef.current += 1;
+        const current = sessionRef.current;
+        sessionRef.current = null;
+        if (current) {
+            current.close();
+            await closeJawCeoVoice(current.sessionId).catch(() => undefined);
+        }
+        setStatus('sleeping');
+    }, []);
+
+    const stop = useCallback(async () => {
+        if (status === 'connecting' && !sessionRef.current) {
+            connectTokenRef.current += 1;
+            playJawCeoVoiceCue('stop');
+            setStatus('paused');
+            return;
+        }
+        sessionRef.current?.setMicEnabled(false);
+        playJawCeoVoiceCue('stop');
+        setStatus('paused');
+    }, [status]);
+
+    const end = useCallback(async () => {
+        await closePhysicalSession();
+        playJawCeoVoiceCue('stop');
+    }, [closePhysicalSession]);
+
+    const talk = useCallback(async () => {
+        if (sessionRef.current) {
+            sessionRef.current.setMicEnabled(true);
+            lastActivityAtRef.current = Date.now();
+            setError(null);
+            playJawCeoVoiceCue('start');
+            setStatus('active');
+            return;
+        }
+        if (status === 'connecting') return;
+        const token = connectTokenRef.current + 1;
+        connectTokenRef.current = token;
+        setStatus('connecting');
+        setError(null);
+        setLastEventType(null);
+        setLastTranscript(null);
+        responseTranscriptRef.current = '';
+        playJawCeoVoiceCue('start');
+        try {
+            const session = await createJawCeoVoicePeerSession({
+                selectedPort: argsRef.current.selectedPort,
+                ...(argsRef.current.sessionId ? { sessionId: argsRef.current.sessionId } : {}),
+                onRealtimeEvent: event => {
+                    const eventType = eventTypeFromRealtimeEvent(event);
+                    const rawTranscript = transcriptFromRealtimeEvent(event);
+                    const transcript = rawTranscript && shouldAppendRealtimeText(eventType)
+                        ? `${responseTranscriptRef.current}${rawTranscript}`
+                        : rawTranscript;
+                    if (rawTranscript && shouldAppendRealtimeText(eventType)) responseTranscriptRef.current = transcript || '';
+                    if (eventType === 'response.created') responseTranscriptRef.current = '';
+                    markActivity(eventType, transcript);
+                    if (transcript) argsRef.current.onTranscript(transcript);
+                },
+            });
+            if (connectTokenRef.current !== token) {
+                session.close();
+                await closeJawCeoVoice(session.sessionId).catch(() => undefined);
+                return;
+            }
+            sessionRef.current = session;
+            lastActivityAtRef.current = Date.now();
+            setStatus('active');
+        } catch (err) {
+            if (connectTokenRef.current !== token) return;
+            setError((err as Error).message);
+            playJawCeoVoiceCue('error');
+            setStatus((err as Error).message.includes('OPENAI_API_KEY') ? 'disabled' : 'error');
+            sessionRef.current?.close();
+            sessionRef.current = null;
+        }
+    }, [status]);
+
+    const sendText = useCallback(async (text: string, responseMode: JawCeoResponseMode) => {
+        const trimmed = text.trim();
+        if (!trimmed) return;
+        await sendJawCeoMessage({
+            text: trimmed,
+            selectedPort: argsRef.current.selectedPort,
+            ...(argsRef.current.sessionId ? { sessionId: argsRef.current.sessionId } : {}),
+            inputMode: 'voice',
+            responseMode,
+        });
+    }, []);
+
+    const speakCompletion = useCallback(async (completion: JawCeoCompletion) => {
+        await continueJawCeoCompletion(completion.completionKey, 'voice');
+        argsRef.current.onSpokenCompletion(completion.completionKey);
+    }, []);
+
+    useEffect(() => {
+        return () => {
+            connectTokenRef.current += 1;
+            const current = sessionRef.current;
+            sessionRef.current = null;
+            if (current) {
+                current.close();
+                void closeJawCeoVoice(current.sessionId).catch(() => undefined);
+            }
+        };
+    }, []);
+
+    useEffect(() => {
+        if (args.documentVisible) return;
+        const current = sessionRef.current;
+        if (!current) return;
+        connectTokenRef.current += 1;
+        sessionRef.current = null;
+        current.close();
+        void closeJawCeoVoice(current.sessionId).catch(() => undefined);
+        setStatus('sleeping');
+    }, [args.documentVisible]);
+
+    useEffect(() => {
+        if (status !== 'active' && status !== 'silent') return undefined;
+        const timer = window.setInterval(() => {
+            if (!sessionRef.current) return;
+            const now = Date.now();
+            if (now - lastActivityAtRef.current < SILENT_STATE_AFTER_MS) return;
+            setStatus('silent');
+            if (now - lastSilentCueAtRef.current >= SILENT_CUE_MIN_INTERVAL_MS) {
+                playJawCeoVoiceCue('silent');
+                lastSilentCueAtRef.current = now;
+            }
+        }, 1_000);
+        return () => window.clearInterval(timer);
+    }, [status]);
+
+    void args.autoRead;
+
+    return { status, error, lastEventType, lastTranscript, talk, stop, end, sendText, speakCompletion };
+}

package/public/manager/src/jaw-ceo/voice-cues.ts

@@ -0,0 +1,34 @@
+export type JawCeoVoiceCue = 'start' | 'silent' | 'stop' | 'error';
+
+const cueTones: Record<JawCeoVoiceCue, number[]> = {
+    start: [523.25, 659.25],
+    silent: [392.0],
+    stop: [659.25, 392.0],
+    error: [220.0, 196.0],
+};
+
+export function playJawCeoVoiceCue(cue: JawCeoVoiceCue): void {
+    const AudioContextCtor = window.AudioContext || (window as Window & { webkitAudioContext?: typeof AudioContext }).webkitAudioContext;
+    if (!AudioContextCtor) return;
+    try {
+        const context = new AudioContextCtor();
+        const now = context.currentTime;
+        cueTones[cue].forEach((frequency, index) => {
+            const oscillator = context.createOscillator();
+            const gain = context.createGain();
+            const start = now + index * 0.085;
+            oscillator.type = cue === 'silent' ? 'sine' : 'triangle';
+            oscillator.frequency.setValueAtTime(frequency, start);
+            gain.gain.setValueAtTime(0.0001, start);
+            gain.gain.exponentialRampToValueAtTime(cue === 'silent' ? 0.015 : 0.024, start + 0.012);
+            gain.gain.exponentialRampToValueAtTime(0.0001, start + 0.105);
+            oscillator.connect(gain);
+            gain.connect(context.destination);
+            oscillator.start(start);
+            oscillator.stop(start + 0.12);
+        });
+        window.setTimeout(() => void context.close().catch(() => undefined), 420);
+    } catch {
+        // Audio cues are non-critical visual-state helpers.
+    }
+}

package/public/manager/src/jaw-ceo/voice-session.ts

@@ -0,0 +1,87 @@
+import { connectJawCeoVoice } from './api';
+
+export type JawCeoVoicePeerSession = {
+    sessionId: string;
+    peer: RTCPeerConnection;
+    dataChannel: RTCDataChannel;
+    micStream: MediaStream;
+    audio: HTMLAudioElement;
+    setMicEnabled: (enabled: boolean) => void;
+    close: () => void;
+};
+
+export async function createJawCeoVoicePeerSession(args: {
+    sessionId?: string;
+    selectedPort: number | null;
+    onRealtimeEvent: (event: unknown) => void;
+}): Promise<JawCeoVoicePeerSession> {
+    if (!navigator.mediaDevices?.getUserMedia) {
+        throw new Error('Microphone capture is not available in this browser.');
+    }
+    const peer = new RTCPeerConnection();
+    const dataChannel = peer.createDataChannel('oai-events');
+    dataChannel.onmessage = event => {
+        try {
+            args.onRealtimeEvent(JSON.parse(event.data as string));
+        } catch {
+            args.onRealtimeEvent({ type: 'raw', text: String(event.data) });
+        }
+    };
+
+    const remoteStream = new MediaStream();
+    const audio = document.createElement('audio');
+    audio.autoplay = true;
+    audio.setAttribute('playsinline', '');
+    audio.srcObject = remoteStream;
+    audio.className = 'jaw-ceo-voice-audio';
+    audio.setAttribute('aria-hidden', 'true');
+    document.body.appendChild(audio);
+
+    peer.ontrack = event => {
+        for (const track of event.streams[0]?.getTracks() || [event.track]) {
+            if (!remoteStream.getTracks().includes(track)) remoteStream.addTrack(track);
+        }
+    };
+
+    const micStream = await navigator.mediaDevices.getUserMedia({
+        audio: {
+            noiseSuppression: true,
+            echoCancellation: true,
+            autoGainControl: true,
+        },
+    });
+    for (const track of micStream.getTracks()) peer.addTrack(track, micStream);
+
+    const offer = await peer.createOffer();
+    await peer.setLocalDescription(offer);
+    if (!offer.sdp) throw new Error('Browser did not create a voice SDP offer.');
+
+    const connected = await connectJawCeoVoice({
+        offerSdp: offer.sdp,
+        selectedPort: args.selectedPort,
+        ...(args.sessionId ? { sessionId: args.sessionId } : {}),
+        responseMode: 'voice',
+    });
+    await peer.setRemoteDescription({ type: 'answer', sdp: connected.answerSdp });
+
+    function close(): void {
+        dataChannel.close();
+        for (const track of micStream.getTracks()) track.stop();
+        peer.close();
+        audio.remove();
+    }
+
+    function setMicEnabled(enabled: boolean): void {
+        for (const track of micStream.getAudioTracks()) track.enabled = enabled;
+    }
+
+    return {
+        sessionId: connected.sessionId,
+        peer,
+        dataChannel,
+        micStream,
+        audio,
+        setMicEnabled,
+        close,
+    };
+}

package/public/manager/src/main.tsx

@@ -12,15 +12,25 @@ import './manager-p0-1-1.css';
 import './manager-dashboard-settings.css';
 import 'katex/dist/katex.min.css';
 import './manager-notes.css';
+import './notes/notes-tags.css';
+import './notes/notes-quick-switcher.css';
 import './notes/notes-search.css';
 import './manager-dashboard-board.css';
 import './manager-dashboard-board-stages.css';
 import './manager-dashboard-board-interactions.css';
+import './manager-dashboard-board-sidebar-scroll.css';
 import './manager-help.css';
 import './manager-dashboard-schedule.css';
+import './manager-dashboard-reminders.css';
+import './manager-dashboard-reminders-priority.css';
+import './manager-dashboard-reminders-parity.css';
 import './settings-shell.css';
 import './settings-controls.css';
 import './settings-agent.css';
+import './settings-embedding.css';
+import './jaw-ceo/jaw-ceo.css';
+import './jaw-ceo/jaw-ceo-console.css';
+import './jaw-ceo/jaw-ceo-virtual.css';
 
 const root = document.getElementById('manager-root');
 if (!root) throw new Error('manager-root not found');

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

@@ -423,6 +423,13 @@ h2 { font-size: 13px; }
     gap: 6px;
     justify-content: flex-end;
 }
+.workbench-mode-bar {
+    min-width: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+}
 .workbench-mode-tabs button {
     min-height: 28px;
     padding: 5px 9px;

package/public/manager/src/manager-dashboard-board-sidebar-scroll.css

@@ -0,0 +1,64 @@
+.dashboard-board-sidebar {
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.dashboard-board-sidebar-running {
+    min-height: 0;
+}
+
+.dashboard-board-sidebar-running-list {
+    max-height: min(260px, 34dvh);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding-right: 2px;
+}
+
+.dashboard-board-sidebar-list {
+    min-height: 0;
+    overflow-y: auto;
+}
+
+.dashboard-board-sidebar-running .dashboard-board-running-chip {
+    box-sizing: border-box;
+    min-height: 52px;
+    max-width: 100%;
+    grid-template-columns: 44px minmax(0, 1fr) max-content;
+    grid-template-rows: minmax(16px, auto) minmax(16px, auto);
+    align-items: start;
+    overflow: hidden;
+}
+
+.dashboard-board-sidebar-running .dashboard-board-running-chip-port {
+    grid-column: 1;
+    grid-row: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.dashboard-board-sidebar-running .dashboard-board-running-chip-label {
+    grid-column: 2;
+    grid-row: 1;
+}
+
+.dashboard-board-sidebar-running .dashboard-board-running-chip-state {
+    grid-column: 3;
+    grid-row: 1;
+    justify-self: end;
+    max-width: 64px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.dashboard-board-sidebar-running .dashboard-board-running-chip-activity {
+    grid-column: 2 / 4;
+    grid-row: 2;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

package/public/manager/src/manager-dashboard-reminders-parity.css

@@ -0,0 +1,156 @@
+.dashboard-reminders-row-more {
+    border: 0;
+    background: transparent;
+    color: var(--ink-muted);
+    cursor: pointer;
+    border-radius: 6px;
+    min-width: 28px;
+    min-height: 28px;
+}
+
+.dashboard-reminders-row-more:hover,
+.dashboard-reminders-row-more:focus-visible {
+    color: var(--ink-primary);
+    background: color-mix(in srgb, var(--ink-primary) 8%, transparent);
+    outline: none;
+}
+
+.dashboard-reminders-inline-title {
+    min-width: 0;
+    max-width: 100%;
+    border: 0;
+    padding: 0;
+    background: transparent;
+    color: inherit;
+    cursor: text;
+    font: inherit;
+    font-weight: 700;
+    line-height: 1.25;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.dashboard-reminders-inline-title:hover,
+.dashboard-reminders-inline-title:focus-visible {
+    color: var(--accent);
+    outline: none;
+}
+
+.dashboard-reminders-inline-title-input {
+    width: 100%;
+    min-width: 0;
+    border: 1px solid var(--accent);
+    border-radius: 6px;
+    background: var(--surface-raised);
+    color: var(--ink-primary);
+    font: inherit;
+    font-weight: 700;
+    padding: 3px 6px;
+}
+
+.dashboard-reminders-row[data-drop-target="true"] {
+    outline: 2px solid var(--accent);
+    outline-offset: -2px;
+    background: color-mix(in srgb, var(--accent) 9%, transparent);
+}
+
+.dashboard-reminder-popover-scrim {
+    position: fixed;
+    inset: 0;
+    z-index: 90;
+    background: color-mix(in srgb, var(--surface-base) 72%, transparent);
+    display: grid;
+    place-items: center;
+    padding: 24px;
+}
+
+.dashboard-reminder-popover {
+    width: min(520px, 100%);
+    max-height: min(680px, calc(100dvh - 48px));
+    overflow: auto;
+    background: var(--surface-panel);
+    border: 1px solid var(--border-subtle);
+    border-radius: 10px;
+    padding: 16px;
+    color: var(--ink-primary);
+}
+
+.dashboard-reminder-popover form,
+.dashboard-reminder-popover label {
+    display: grid;
+    gap: 8px;
+}
+
+.dashboard-reminder-popover form {
+    gap: 14px;
+}
+
+.dashboard-reminder-popover header,
+.dashboard-reminder-popover footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.dashboard-reminder-popover header span {
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.dashboard-reminder-popover label span {
+    color: var(--ink-muted);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+}
+
+.dashboard-reminder-popover input,
+.dashboard-reminder-popover textarea {
+    width: 100%;
+    box-sizing: border-box;
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    background: var(--surface-raised);
+    color: var(--ink-primary);
+    padding: 8px 10px;
+    font: inherit;
+}
+
+.dashboard-reminder-popover textarea {
+    resize: vertical;
+}
+
+.dashboard-reminder-popover-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+}
+
+.dashboard-reminder-popover button {
+    border: 1px solid var(--border-subtle);
+    border-radius: 7px;
+    background: var(--surface-raised);
+    color: var(--ink-primary);
+    cursor: pointer;
+    padding: 7px 10px;
+}
+
+.dashboard-reminder-popover button:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.dashboard-reminders-quadrant[data-drop-target="true"] {
+    outline: 2px dashed var(--accent);
+    outline-offset: -2px;
+    background: color-mix(in srgb, var(--accent) 8%, transparent);
+}
+
+@media (max-width: 720px) {
+    .dashboard-reminder-popover-grid {
+        grid-template-columns: 1fr;
+    }
+}