cli-jaw 2.0.3 → 2.0.5

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

@@ -0,0 +1,235 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { ManagerEvent } from '../types';
+import {
+    continueJawCeoCompletion,
+    fetchJawCeoState,
+    refreshJawCeoEvents,
+    sendJawCeoMessage,
+    summarizeJawCeoCompletion,
+    updateJawCeoCompletionStatus,
+} from './api';
+import type {
+    JawCeoAuditRecord,
+    JawCeoCompletion,
+    JawCeoManagerEvent,
+    JawCeoMessageData,
+    JawCeoPublicState,
+    JawCeoResponseMode,
+    JawCeoToolResult,
+} from './types';
+
+const POLL_INTERVAL_MS = 5_000;
+
+function nowIso(): string {
+    return new Date().toISOString();
+}
+
+function emptyState(selectedPort: number | null): JawCeoPublicState {
+    return {
+        session: {
+            sessionId: 'pending',
+            inputMode: 'text',
+            responseMode: 'text',
+            selectedPort,
+            openedAt: nowIso(),
+            lastUserActivityAt: nowIso(),
+            voiceArmed: false,
+            frontendPresence: 'visible',
+            autoRead: false,
+        },
+        transcript: [],
+        watches: [],
+        pending: [],
+        auditTail: [],
+        voice: {
+            status: 'idle',
+            sessionId: null,
+            model: 'gpt-realtime-2',
+            voice: 'marin',
+            error: null,
+        },
+    };
+}
+
+function normalizeState(raw: Partial<JawCeoPublicState>, selectedPort: number | null): JawCeoPublicState {
+    const fallback = emptyState(selectedPort);
+    return {
+        ...fallback,
+        ...raw,
+        session: {
+            ...fallback.session,
+            ...(raw.session ?? {}),
+            selectedPort: raw.session?.selectedPort ?? selectedPort,
+        },
+        transcript: Array.isArray(raw.transcript) ? raw.transcript : [],
+        watches: Array.isArray(raw.watches) ? raw.watches : [],
+        pending: Array.isArray(raw.pending) ? raw.pending : [],
+        auditTail: Array.isArray(raw.auditTail) ? raw.auditTail : [],
+        voice: {
+            ...fallback.voice,
+            ...(raw.voice ?? {}),
+        },
+    };
+}
+
+function eventKey(event: JawCeoManagerEvent): string {
+    if (event.kind === 'instance-completed') {
+        return `${event.kind}:${event.port}:${event.requestId || ''}:${event.messageId || ''}:${event.at}`;
+    }
+    return `${event.kind}:${event.port}:${event.messageId}:${event.role}:${event.at}`;
+}
+
+function toJawCeoEvent(event: ManagerEvent): JawCeoManagerEvent | null {
+    if (event.kind !== 'instance-message') return null;
+    return {
+        kind: 'instance-message',
+        port: event.port,
+        messageId: event.messageId,
+        role: event.role,
+        at: event.at,
+    };
+}
+
+export type UseJawCeoArgs = {
+    selectedPort: number | null;
+    documentVisible: boolean;
+    managerEvents: ManagerEvent[];
+};
+
+export type JawCeoController = {
+    state: JawCeoPublicState;
+    pending: JawCeoCompletion[];
+    audit: JawCeoAuditRecord[];
+    busy: boolean;
+    error: string | null;
+    lastResponse: string | null;
+    refresh: () => Promise<void>;
+    sendText: (text: string, responseMode?: JawCeoResponseMode) => Promise<JawCeoToolResult<JawCeoMessageData>>;
+    continueCompletion: typeof continueJawCeoCompletion;
+    summarizeCompletion: typeof summarizeJawCeoCompletion;
+    ackCompletion: (completionKey: string) => Promise<void>;
+    dismissCompletion: (completionKey: string) => Promise<void>;
+};
+
+export function useJawCeo(args: UseJawCeoArgs): JawCeoController {
+    const [state, setState] = useState<JawCeoPublicState>(() => emptyState(args.selectedPort));
+    const [busyAction, setBusyAction] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [lastResponse, setLastResponse] = useState<string | null>(null);
+    const seenEventKeysRef = useRef<Set<string>>(new Set());
+    const stateRef = useRef(state);
+
+    useEffect(() => {
+        stateRef.current = state;
+    }, [state]);
+
+    const refresh = useCallback(async () => {
+        setBusyAction(current => current || 'refresh');
+        try {
+            const currentState = normalizeState(await fetchJawCeoState(), args.selectedPort);
+            const ports = Array.from(new Set(currentState.watches.map(watch => watch.port)));
+            if (ports.length > 0) await refreshJawCeoEvents({ ports });
+            const nextState = normalizeState(await fetchJawCeoState(), args.selectedPort);
+            setState(nextState);
+            setError(null);
+        } catch (err) {
+            setError((err as Error).message);
+        } finally {
+            setBusyAction(current => current === 'refresh' ? null : current);
+        }
+    }, [args.selectedPort]);
+
+    useEffect(() => {
+        if (!args.documentVisible) return undefined;
+        let cancelled = false;
+        let timer: ReturnType<typeof setInterval> | null = null;
+        async function tick(): Promise<void> {
+            if (cancelled) return;
+            await refresh();
+        }
+        void tick();
+        timer = setInterval(() => { void tick(); }, POLL_INTERVAL_MS);
+        return () => {
+            cancelled = true;
+            if (timer) clearInterval(timer);
+        };
+    }, [args.documentVisible, refresh]);
+
+    useEffect(() => {
+        const freshEvents: JawCeoManagerEvent[] = [];
+        for (const managerEvent of args.managerEvents) {
+            const event = toJawCeoEvent(managerEvent);
+            if (!event) continue;
+            const key = eventKey(event);
+            if (seenEventKeysRef.current.has(key)) continue;
+            seenEventKeysRef.current.add(key);
+            freshEvents.push(event);
+        }
+        if (freshEvents.length === 0) return;
+        void (async () => {
+            try {
+                await refreshJawCeoEvents({ events: freshEvents });
+                await refresh();
+            } catch (err) {
+                setError((err as Error).message);
+            }
+        })();
+    }, [args.managerEvents, refresh]);
+
+    const sendText = useCallback(async (text: string, responseMode: JawCeoResponseMode = 'text') => {
+        setBusyAction('message');
+        try {
+            const result = await sendJawCeoMessage({
+                text,
+                responseMode,
+                selectedPort: args.selectedPort,
+                ...(stateRef.current.session.sessionId === 'pending' ? {} : { sessionId: stateRef.current.session.sessionId }),
+            });
+            const response = result.data?.response || result.error?.message || result.message || 'Jaw CEO message completed.';
+            setLastResponse(response);
+            await refresh();
+            return result;
+        } catch (err) {
+            const message = (err as Error).message;
+            setError(message);
+            throw err;
+        } finally {
+            setBusyAction(null);
+        }
+    }, [args.selectedPort, refresh]);
+
+    const ackCompletion = useCallback(async (completionKey: string) => {
+        setBusyAction(`ack:${completionKey}`);
+        try {
+            await updateJawCeoCompletionStatus(completionKey, 'ack');
+            await refresh();
+        } finally {
+            setBusyAction(null);
+        }
+    }, [refresh]);
+
+    const dismissCompletion = useCallback(async (completionKey: string) => {
+        setBusyAction(`dismiss:${completionKey}`);
+        try {
+            await updateJawCeoCompletionStatus(completionKey, 'dismiss');
+            await refresh();
+        } finally {
+            setBusyAction(null);
+        }
+    }, [refresh]);
+
+    return {
+        state,
+        pending: state.pending,
+        audit: state.auditTail,
+        busy: busyAction !== null,
+        error,
+        lastResponse,
+        refresh,
+        sendText,
+        continueCompletion: continueJawCeoCompletion,
+        summarizeCompletion: summarizeJawCeoCompletion,
+        ackCompletion,
+        dismissCompletion,
+    };
+}

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

@@ -0,0 +1,67 @@
+import { useState } from 'react';
+import type { FormEvent } from 'react';
+import type { JawCeoController } from './useJawCeo';
+import type { JawCeoCompletion, JawCeoConsoleTab, JawCeoResponseMode } from './types';
+
+export type JawCeoConsoleModel = {
+    tab: JawCeoConsoleTab;
+    setTab: (tab: JawCeoConsoleTab) => void;
+    message: string;
+    setMessage: (value: string) => void;
+    responseMode: JawCeoResponseMode;
+    setResponseMode: (mode: JawCeoResponseMode) => void;
+    submitMessage: (event: FormEvent<HTMLFormElement>) => Promise<void>;
+    summarize: (completion: JawCeoCompletion) => Promise<void>;
+    continueCompletion: (completion: JawCeoCompletion) => Promise<void>;
+};
+
+function createSubmitMessage(args: {
+    ceo: JawCeoController;
+    message: string;
+    responseMode: JawCeoResponseMode;
+    setMessage: (value: string) => void;
+    setTab: (tab: JawCeoConsoleTab) => void;
+}) {
+    return async (event: FormEvent<HTMLFormElement>): Promise<void> => {
+        event.preventDefault();
+        const text = args.message.trim();
+        if (!text) return;
+        args.setMessage('');
+        try {
+            await args.ceo.sendText(text, args.responseMode);
+            args.setTab('chat');
+        } catch (error) {
+            void error;
+        }
+    };
+}
+
+function createCompletionActions(args: {
+    ceo: JawCeoController;
+    responseMode: JawCeoResponseMode;
+    setTab: (tab: JawCeoConsoleTab) => void;
+}) {
+    return {
+        summarize: async (completion: JawCeoCompletion): Promise<void> => {
+            await args.ceo.summarizeCompletion(completion.completionKey, 'short');
+            await args.ceo.refresh();
+            args.setTab('chat');
+        },
+        continueCompletion: async (completion: JawCeoCompletion): Promise<void> => {
+            const mode = args.responseMode === 'voice' || args.responseMode === 'both' || args.responseMode === 'silent' ? args.responseMode : 'text';
+            await args.ceo.continueCompletion(completion.completionKey, mode);
+            await args.ceo.refresh();
+            args.setTab('chat');
+        },
+    };
+}
+
+export function useJawCeoConsoleModel(args: { ceo: JawCeoController }): JawCeoConsoleModel {
+    const [tab, setTab] = useState<JawCeoConsoleTab>('chat'), [message, setMessage] = useState(''), [responseMode, setResponseMode] = useState<JawCeoResponseMode>('text');
+    const completionActions = createCompletionActions({ ceo: args.ceo, responseMode, setTab });
+    return {
+        tab, setTab, message, setMessage, responseMode, setResponseMode,
+        submitMessage: createSubmitMessage({ ceo: args.ceo, message, responseMode, setMessage, setTab }),
+        ...completionActions,
+    };
+}

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

@@ -0,0 +1,76 @@
+import { useEffect, useMemo, useState } from 'react';
+import type { ManagerEvent } from '../types';
+import { JawCeoConsole } from './JawCeoConsole';
+import { JawCeoWorkbenchButton } from './JawCeoWorkbenchButton';
+import { JawCeoVoiceOverlay } from './JawCeoVoiceOverlay';
+import { useJawCeo } from './useJawCeo';
+import { useJawCeoVoice } from './useJawCeoVoice';
+
+function useDocumentVisible(): boolean {
+    const [visible, setVisible] = useState(() => typeof document === 'undefined' || document.visibilityState === 'visible');
+    useEffect(() => {
+        function onVisibilityChange(): void {
+            setVisible(document.visibilityState === 'visible');
+        }
+        document.addEventListener('visibilitychange', onVisibilityChange);
+        return () => document.removeEventListener('visibilitychange', onVisibilityChange);
+    }, []);
+    return visible;
+}
+
+export function useJawCeoDashboardBridge(args: {
+    selectedPort: number | null;
+    managerEvents: ManagerEvent[];
+    messageEvents: ManagerEvent[];
+    onOpenWorker: (port: number, messageId?: number) => void;
+}) {
+    const [open, setOpen] = useState(false);
+    const documentVisible = useDocumentVisible();
+    const events = useMemo(() => [...args.managerEvents, ...args.messageEvents], [args.managerEvents, args.messageEvents]);
+    const ceo = useJawCeo({ selectedPort: args.selectedPort, documentVisible, managerEvents: events });
+    const sessionId = ceo.state.session.sessionId === 'pending' ? null : ceo.state.session.sessionId;
+    const voice = useJawCeoVoice({
+        selectedPort: args.selectedPort,
+        ...(sessionId ? { sessionId } : {}),
+        autoRead: ceo.state.session.autoRead,
+        documentVisible,
+        onTranscript: () => undefined,
+        onSpokenCompletion: (completionKey) => { void ceo.ackCompletion(completionKey); },
+    });
+    const voiceActive = voice.status === 'active' || voice.status === 'connecting' || voice.status === 'silent';
+    const workbenchButton = (
+        <JawCeoWorkbenchButton
+            open={open}
+            voiceStatus={voice.status}
+            busy={ceo.busy}
+            error={ceo.error || voice.error}
+            onOpenConsole={() => setOpen(true)}
+            onToggleVoice={() => { voiceActive ? void voice.stop() : void voice.talk(); }}
+        />
+    );
+    const voiceOverlay = (
+        <JawCeoVoiceOverlay
+            status={voice.status}
+            selectedPort={args.selectedPort}
+            lastEventType={voice.lastEventType}
+            lastTranscript={voice.lastTranscript}
+            onStop={() => void voice.stop()}
+        />
+    );
+    const consoleContent = open ? (
+        <JawCeoConsole
+            open
+            selectedPort={args.selectedPort}
+            ceo={ceo}
+            voice={voice}
+            onClose={() => setOpen(false)}
+            onOpenWorker={args.onOpenWorker}
+        />
+    ) : null;
+
+    return {
+        workbenchButton,
+        voiceOverlay,
+        consoleContent,
+    };
+}

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

@@ -0,0 +1,109 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import {
+    Virtualizer,
+    elementScroll,
+    measureElement,
+    observeElementOffset,
+    observeElementRect,
+    type VirtualItem,
+} from '@tanstack/virtual-core';
+
+const ESTIMATED_ROW_HEIGHT = 76;
+const OVERSCAN = 8;
+const FOLLOW_BOTTOM_THRESHOLD_PX = 96;
+
+type Snapshot = {
+    virtualItems: VirtualItem[];
+    totalSize: number;
+};
+
+export type JawCeoVirtualTimeline = {
+    scrollRef: (element: HTMLDivElement | null) => void;
+    onScroll: () => void;
+    measureElement: (element: HTMLDivElement | null) => void;
+    virtualItems: VirtualItem[];
+    totalSize: number;
+};
+
+function isNearBottom(element: HTMLElement | null): boolean {
+    if (!element) return true;
+    return element.scrollHeight - element.scrollTop - element.clientHeight < FOLLOW_BOTTOM_THRESHOLD_PX;
+}
+
+export function useJawCeoVirtualTimeline(args: {
+    count: number;
+    getItemKey: (index: number) => string | number;
+    estimateSize?: (index: number) => number;
+}): JawCeoVirtualTimeline {
+    const scrollElementRef = useRef<HTMLDivElement | null>(null);
+    const followBottomRef = useRef(true);
+    const previousCountRef = useRef(args.count);
+    const [{ virtualItems, totalSize }, setSnapshot] = useState<Snapshot>({ virtualItems: [], totalSize: 0 });
+    const virtualizerRef = useRef<Virtualizer<HTMLElement, HTMLElement> | null>(null);
+
+    if (!virtualizerRef.current) {
+        virtualizerRef.current = new Virtualizer<HTMLElement, HTMLElement>({
+            count: args.count,
+            getScrollElement: () => scrollElementRef.current,
+            estimateSize: args.estimateSize || (() => ESTIMATED_ROW_HEIGHT),
+            overscan: OVERSCAN,
+            getItemKey: args.getItemKey,
+            indexAttribute: 'data-jaw-ceo-idx',
+            useAnimationFrameWithResizeObserver: true,
+            observeElementRect,
+            observeElementOffset,
+            scrollToFn: elementScroll,
+            measureElement,
+            onChange: instance => {
+                setSnapshot({
+                    virtualItems: instance.getVirtualItems(),
+                    totalSize: instance.getTotalSize(),
+                });
+            },
+        });
+    }
+
+    const virtualizer = virtualizerRef.current;
+
+    const scrollRef = useCallback((element: HTMLDivElement | null): void => {
+        scrollElementRef.current = element;
+        followBottomRef.current = isNearBottom(element);
+        virtualizer._willUpdate();
+    }, [virtualizer]);
+
+    const onScroll = useCallback((): void => {
+        followBottomRef.current = isNearBottom(scrollElementRef.current);
+    }, []);
+
+    const measureVirtualElement = useCallback((element: HTMLDivElement | null): void => {
+        if (element) virtualizer.measureElement(element);
+    }, [virtualizer]);
+
+    useEffect(() => virtualizer._didMount(), [virtualizer]);
+
+    useLayoutEffect(() => {
+        virtualizer.setOptions({
+            ...virtualizer.options,
+            count: args.count,
+            getItemKey: args.getItemKey,
+            estimateSize: args.estimateSize || (() => ESTIMATED_ROW_HEIGHT),
+        });
+        virtualizer._willUpdate();
+        setSnapshot({
+            virtualItems: virtualizer.getVirtualItems(),
+            totalSize: virtualizer.getTotalSize(),
+        });
+    }, [args.count, args.estimateSize, args.getItemKey, virtualizer]);
+
+    useLayoutEffect(() => {
+        const previous = previousCountRef.current;
+        previousCountRef.current = args.count;
+        if (args.count === 0) return;
+        if (previous > 0 && !followBottomRef.current) return;
+        requestAnimationFrame(() => {
+            virtualizer.scrollToIndex(args.count - 1, { align: 'end' });
+        });
+    }, [args.count, virtualizer]);
+
+    return { scrollRef, onScroll, measureElement: measureVirtualElement, virtualItems, totalSize };
+}