ompchamber 0.3.0

package/src/client/hooks/chat/omp/index.ts

@@ -0,0 +1,348 @@
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import type { ChatMessageData, OmpAgentCallbacks, OmpAgentHandle, OmpAgentState, StreamTransport } from '@/shared/types';
+import type { ExtensionUiDialogRequest } from '@/shared/types/omp/agent';
+import type { ApprovalMode } from '@/shared/lib/omp/config/access-mode';
+import { type ToolResultRecord, useOmpAgentStream } from '@/client/hooks/chat/omp/stream';
+
+/**
+ * Live omp agent bridge for the chamber chat (real mode, MOCK=false). Mirrors
+ * the omp-web useAgentSession streaming surface: send a prompt over the RPC
+ * bridge (POST /api/agent/:sessionId), consume agent events over the configured
+ * transport, and fold them into ChatMessageData — one "current assistant
+ * message" replaced per message_update, finalized on message_end / agent_end.
+ */
+
+export type { ExtensionUiDialogMethod, ExtensionUiDialogRequest, IncomingExtensionUiRequest } from '@/shared/types/omp/agent';
+export type { OmpAgentCallbacks, OmpAgentEvent, OmpAgentState } from '@/shared/types/omp/agent';
+
+export function useOmpAgent(sessionId: string | null, callbacks: OmpAgentCallbacks, transport: StreamTransport): OmpAgentHandle {
+  const [state, setState] = useState<OmpAgentState>({ isGenerating: false, connected: false, error: null });
+  const callbacksRef = useRef(callbacks);
+  callbacksRef.current = callbacks;
+  const sessionIdRef = useRef(sessionId);
+  sessionIdRef.current = sessionId;
+  // Tool results arrive as separate events (tool_execution_end) or as
+  // toolResult messages AFTER the assistant message with the toolCall block.
+  // Accumulate them here and merge into the matching tool call on message_end.
+  const toolResultsRef = useRef<Map<string, ToolResultRecord>>(new Map());
+  // Last assistant message that carried tool calls, so tool_execution_end
+  // events arriving after message_end can re-emit it with the result paired.
+  const lastToolMessageRef = useRef<ChatMessageData | null>(null);
+  const interruptPendingRef = useRef(false);
+  // Last phrase handed to the indicator; the fold compares against it so
+  // per-token frames cannot spam state updates with the same string.
+  const activityRef = useRef('');
+  const currentThinkingLevelRef = useRef<string | undefined>(undefined); // live thinking level (last `thinking_level_changed`)
+  // toolCallIds of in-flight file-mutating tool calls; cleared per run in the
+  // fold so a completed edit/write/bash signals the right panels once.
+  const fileMutatingCallsRef = useRef<Set<string>>(new Set());
+
+  const { connect, disconnect } = useOmpAgentStream({
+    setState,
+    callbacksRef,
+    toolResultsRef,
+    lastToolMessageRef,
+    interruptPendingRef,
+    activityRef,
+    currentThinkingLevelRef,
+    fileMutatingCallsRef,
+    transport,
+  });
+
+  useEffect(() => {
+    if (!sessionId) return;
+    // Session changed (or first mount): drop the previous session's tool
+    // results. On first mount the refs are already empty, so this cannot disturb
+    // a resumed session's reattach below.
+    toolResultsRef.current.clear();
+    fileMutatingCallsRef.current.clear();
+    lastToolMessageRef.current = null;
+    activityRef.current = '';
+    // Do NOT auto-connect here: the stream endpoint refuses (409) until the
+    // session's omp process is spawned (POST /api/agent/:id), and a client
+    // dialing a refused endpoint loops network errors in the console.
+    // connect() is called lazily by sendPrompt after the spawn succeeds.
+    let cancelled = false;
+    // Reload/remount recovery: the omp process keeps running server-side
+    // after a page refresh, so a mid-run session must reattach its event
+    // stream or the in-flight response appears frozen. Probe get_state; when the
+    // wrapper reports streaming/prompt-running, reconnect and let the caller
+    // resume the generating UI.
+    fetch(`/api/agent/${encodeURIComponent(sessionId)}`)
+      .then(res => (res.ok ? res.json() : null))
+      .then((data: {
+        running?: boolean;
+        state?: { isStreaming?: boolean; isPromptRunning?: boolean };
+        pendingUiRequests?: ExtensionUiDialogRequest[];
+      } | null) => {
+        if (cancelled || !data?.running) return;
+        const probe = data.state;
+        if (probe && (probe.isStreaming || probe.isPromptRunning)) {
+          connect(sessionId);
+          callbacksRef.current.onResumeStream?.();
+        }
+        // An ask/approval dialog raised before the reload is still blocking the
+        // agent, and omp never re-sends the frame: replay what the server
+        // remembered so the modal reappears instead of the run hanging.
+        for (const request of data.pendingUiRequests ?? []) {
+          callbacksRef.current.onExtensionUiRequest?.(request);
+        }
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+      disconnect();
+    };
+  }, [sessionId, disconnect, connect]);
+
+  /** Send a prompt to the omp session via the RPC bridge. */
+  const sendPrompt = useCallback(async (
+    message: string,
+    images?: { data: string; mimeType: string }[],
+    options?: { accessMode?: ApprovalMode },
+  ) => {
+    const sid = sessionIdRef.current;
+    if (!sid) return false;
+    setState((prev) => ({ ...prev, isGenerating: true, error: null }));
+    try {
+      // Mirror omp-web handleSend: warm the session process up with get_state
+      // (spawns it on first use), then attach the event stream before sending
+      // the prompt so no agent events are missed.
+      const warmup = await fetch(`/api/agent/${encodeURIComponent(sid)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        // The mode rides the warmup too: this is the request that lazily spawns
+        // an idle session, and omp only accepts --approval-mode at spawn time.
+        body: JSON.stringify({
+          type: 'get_state',
+          ...(options?.accessMode ? { accessMode: options.accessMode } : {}),
+        }),
+      });
+      if (warmup.ok) connect(sid);
+
+      const res = await fetch(`/api/agent/${encodeURIComponent(sid)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          type: 'prompt',
+          message,
+          ...(images?.length ? { images } : {}),
+          ...(options?.accessMode ? { accessMode: options.accessMode } : {}),
+        }),
+      });
+      const body = (await res.json().catch(() => ({}))) as { success?: boolean; error?: string };
+      if (!res.ok || body.error) {
+        setState((prev) => ({ ...prev, isGenerating: false, error: body.error ?? `HTTP ${res.status}` }));
+        return false;
+      }
+      return true;
+    } catch (e) {
+      setState((prev) => ({ ...prev, isGenerating: false, error: e instanceof Error ? e.message : String(e) }));
+      return false;
+    }
+  }, [connect]);
+
+  /** Spawn a brand-new omp session and send the first prompt: ensure_session
+   *  first (returns omp's real session id), attach the event stream, then send
+   *  the prompt through the existing session route so no agent events are
+   *  missed. Model/thinking picks ride the ensure_session body so omp applies
+   *  them BEFORE the first prompt (and their JSONL change entries are written
+   *  up front, not after the run starts). Returns the new session id on
+   *  success, or null on failure — the caller adopts the id as the active
+   *  session. */
+  const sendNewPrompt = useCallback(async (
+    message: string,
+    cwd: string,
+    images?: { data: string; mimeType: string }[],
+    composerOptions?: { model?: { provider: string; modelId: string } | null; thinkingLevel?: string | null; accessMode?: ApprovalMode },
+  ): Promise<{ sessionId: string; model: { provider: string; modelId: string } | null } | null> => {
+    setState((prev) => ({ ...prev, isGenerating: true, error: null }));
+    try {
+      const created = await fetch('/api/agent/new', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          type: 'ensure_session',
+          cwd,
+          ...(composerOptions?.model ? composerOptions.model : {}),
+          ...(composerOptions?.thinkingLevel ? { thinkingLevel: composerOptions.thinkingLevel } : {}),
+          ...(composerOptions?.accessMode ? { accessMode: composerOptions.accessMode } : {}),
+        }),
+      });
+      const createdBody = (await created.json().catch(() => ({}))) as {
+        success?: boolean;
+        sessionId?: string;
+        model?: { provider: string; modelId: string } | null;
+        error?: string;
+      };
+      if (!created.ok || !createdBody.sessionId) {
+        setState((prev) => ({ ...prev, isGenerating: false, error: createdBody.error ?? `HTTP ${created.status}` }));
+        return null;
+      }
+      const sid = createdBody.sessionId;
+      connect(sid);
+      const res = await fetch(`/api/agent/${encodeURIComponent(sid)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          type: 'prompt',
+          message,
+          ...(images?.length ? { images } : {}),
+        }),
+      });
+      const body = (await res.json().catch(() => ({}))) as { success?: boolean; error?: string };
+      if (!res.ok || body.error) {
+        setState((prev) => ({ ...prev, isGenerating: false, error: body.error ?? `HTTP ${res.status}` }));
+        return null;
+      }
+      return { sessionId: sid, model: createdBody.model ?? null };
+    } catch (e) {
+      setState((prev) => ({ ...prev, isGenerating: false, error: e instanceof Error ? e.message : String(e) }));
+      return null;
+    }
+  }, [connect]);
+
+  /** Abort the running agent turn. */
+  const abort = useCallback(async () => {
+    const sid = sessionIdRef.current;
+    if (!sid) return;
+    // A user stop supersedes an in-flight interrupt-and-reply: clearing the
+    // guard lets the aborted turn's agent_end reach onAgentEnd (no stuck spinner).
+    interruptPendingRef.current = false;
+    try {
+      await fetch(`/api/agent/${encodeURIComponent(sid)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ type: 'abort' }),
+      });
+    } catch {
+      // Abort is best-effort; the event stream surfaces the terminal state.
+    }
+    setState((prev) => ({ ...prev, isGenerating: false }));
+  }, []);
+
+  /** Interrupt the running agent and immediately start the message as a fresh
+   *  prompt (abort_and_prompt). Keeps the run alive until the new agent_start
+   *  arrives via the interruptPending guard. */
+  const sendInterruptAndReply = useCallback(async (
+    message: string,
+    images?: { data: string; mimeType: string }[],
+  ): Promise<boolean> => {
+    const sid = sessionIdRef.current;
+    if (!sid) return false;
+    interruptPendingRef.current = true;
+    setState((prev) => ({ ...prev, isGenerating: true, error: null }));
+    try {
+      const res = await fetch(`/api/agent/${encodeURIComponent(sid)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          type: 'abort_and_prompt',
+          message,
+          ...(images?.length ? { images } : {}),
+        }),
+      });
+      const body = (await res.json().catch(() => ({}))) as { success?: boolean; error?: string };
+      if (!res.ok || body.error) {
+        interruptPendingRef.current = false;
+        setState((prev) => ({ ...prev, isGenerating: false, error: body.error ?? `HTTP ${res.status}` }));
+        return false;
+      }
+      return true;
+    } catch (e) {
+      interruptPendingRef.current = false;
+      setState((prev) => ({ ...prev, isGenerating: false, error: e instanceof Error ? e.message : String(e) }));
+      return false;
+    }
+  }, []);
+
+  /** Enqueue a follow-up message the agent processes after the current turn. */
+  const sendFollowUp = useCallback(async (
+    message: string,
+    images?: { data: string; mimeType: string }[],
+  ): Promise<boolean> => {
+    const sid = sessionIdRef.current;
+    if (!sid) return false;
+    try {
+      const res = await fetch(`/api/agent/${encodeURIComponent(sid)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          type: 'follow_up',
+          message,
+          ...(images?.length ? { images } : {}),
+        }),
+      });
+      const body = (await res.json().catch(() => ({}))) as { success?: boolean; error?: string };
+      if (!res.ok || body.error) {
+        setState((prev) => ({ ...prev, error: body.error ?? `HTTP ${res.status}` }));
+        return false;
+      }
+      return true;
+    } catch (e) {
+      setState((prev) => ({ ...prev, error: e instanceof Error ? e.message : String(e) }));
+      return false;
+    }
+  }, []);
+
+  /** Set the model for the live session (set_model RPC). */
+  const setModel = useCallback(async (provider: string, modelId: string) => {
+    const sid = sessionIdRef.current;
+    if (!sid) return;
+    try {
+      await fetch(`/api/agent/${encodeURIComponent(sid)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ type: 'set_model', provider, modelId }),
+      });
+    } catch {
+      // Model change is best-effort; the next get_state reconciles.
+    }
+  }, []);
+
+  /** Set the thinking level for the live session (set_thinking_level RPC). */
+  const setThinkingLevel = useCallback(async (level: string) => {
+    const sid = sessionIdRef.current;
+    if (!sid) return;
+    try {
+      await fetch(`/api/agent/${encodeURIComponent(sid)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ type: 'set_thinking_level', level }),
+      });
+    } catch {
+      // Best-effort; "auto" leaves omp's current setting untouched.
+    }
+  }, []);
+
+  /** Jawab dialog ask/approval (extension_ui_response) — melepas blocking tool call. */
+  const respondToExtensionUi = useCallback(async (
+    request: ExtensionUiDialogRequest,
+    response: { value: string } | { confirmed: boolean } | { cancelled: true },
+  ): Promise<void> => {
+    const sid = sessionIdRef.current;
+    if (!sid) return;
+    try {
+      await fetch(`/api/agent/${encodeURIComponent(sid)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ type: 'extension_ui_response', id: request.id, ...response }),
+      });
+    } catch {
+      // Best-effort; omp surfaces the failure on its side.
+    }
+  }, []);
+
+  return {
+    ...state,
+    sendPrompt,
+    sendNewPrompt,
+    sendInterruptAndReply,
+    sendFollowUp,
+    abort,
+    setModel,
+    setThinkingLevel,
+    respondToExtensionUi,
+    disconnect,
+  };
+}

package/src/client/hooks/chat/omp/revalidation-throttle.ts

@@ -0,0 +1,71 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Throttled revalidation for the session sidebars.
+ *
+ * `omp:session-updated` arrives in bursts while a run is active (agent start,
+ * JSONL write, spawn adoption, agent end) — and the chat timeline's metadata
+ * retry loop can emit one every 250ms until the session file carries the user
+ * turn. Each dispatch would otherwise trigger a full loader revalidation, and
+ * with two sidebars mounted (desktop + mobile layouts keep theirs alive) a busy
+ * run could revalidate several times per second.
+ *
+ * Implemented as a LEADING + TRAILING throttle, not a trailing debounce:
+ *
+ *   - the first event of a quiet period revalidates IMMEDIATELY, so a spawn or
+ *     title change lands without the ~1s lag a pure debounce would add;
+ *   - further events inside the window collapse into a single trailing call.
+ *
+ * The leading edge is what makes this safe under a sustained burst. A trailing
+ * debounce resets its timer on every event, so a steady 250ms stream would push
+ * the revalidation out forever and the sidebar would go stale for the whole
+ * spawn — the exact case this hook exists to cover.
+ */
+
+import { useEffect, useRef } from 'preact/hooks';
+import { SIDEBAR_REVALIDATE_THROTTLE_MS } from '@/shared/lib/workspace/refresh-cadence';
+
+export function useSidebarRevalidation(revalidate: () => void): void {
+  const revalidateRef = useRef(revalidate);
+  revalidateRef.current = revalidate;
+  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  // Timestamp of the last revalidation, so the leading edge can be decided
+  // synchronously inside the event handler.
+  const lastFiredRef = useRef(0);
+
+  useEffect(() => {
+    const fire = () => {
+      lastFiredRef.current = Date.now();
+      revalidateRef.current();
+    };
+
+    const schedule = () => {
+      const elapsed = Date.now() - lastFiredRef.current;
+      if (elapsed >= SIDEBAR_REVALIDATE_THROTTLE_MS) {
+        // Leading edge: nothing recent, so refresh now.
+        clearTimeout(timerRef.current);
+        timerRef.current = undefined;
+        fire();
+        return;
+      }
+      // Inside the window: collapse the burst into one trailing call.
+      clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => {
+        timerRef.current = undefined;
+        fire();
+      }, SIDEBAR_REVALIDATE_THROTTLE_MS - elapsed);
+    };
+
+    window.addEventListener('omp:session-updated', schedule);
+    return () => {
+      window.removeEventListener('omp:session-updated', schedule);
+      if (timerRef.current !== undefined) {
+        clearTimeout(timerRef.current);
+        timerRef.current = undefined;
+      }
+    };
+  }, []);
+}

package/src/client/hooks/chat/omp/session-list.tsx

@@ -0,0 +1,148 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Client-side session-list fetcher. Owns the single `useFetcher` against
+ * `GET /api/sessions/list` and exposes it through a React context so every
+ * consumer (desktop sidebar, mobile sidebar, chat timeline, layout headers)
+ * shares one in-flight request and one `folders` snapshot.
+ *
+ * Refresh contract: the leading+trailing throttled stream-event hook, the
+ * stream poll, the status-ack hook, and per-item mutations all call
+ * `refresh()` — a plain `fetcher.load` that no longer revalidates the whole
+ * document route.
+ */
+
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { createContext } from 'preact/compat';
+import type { ReactNode } from 'preact/compat';
+import { useFetcher } from '@/client/lib/router/fetcher';
+import { usePanelRefresh } from '@/client/hooks/workspace/panel-refresh';
+import { SIDEBAR_IDLE_REFRESH_MS } from '@/shared/lib/workspace/refresh-cadence';
+import type { WorkspaceFolderData } from '@/shared/types';
+import type { SessionListPayload } from '@/server/lib/omp/session/sidebar-data.server';
+
+export interface SidebarDataHandle {
+  folders: WorkspaceFolderData[];
+  isMock: boolean;
+  /** True only before the FIRST successful load — drives the skeleton. */
+  initializing: boolean;
+  /** Fire a refresh (dedup: while a load is in flight this is a no-op). */
+  refresh: () => void;
+  /**
+   * Mark a session's one-shot terminal badge as seen NOW: strips the check
+   * optimistically for this mount and POSTs the server ack. No-op unless the
+   * session currently carries a terminal (`finish`/`abort`/`error`) status.
+   */
+  markSeen: (sessionId: number | string) => void;
+  /** True when markSeen already ran for this session on this mount. */
+  hasSeen: (sessionId: number | string) => boolean;
+}
+
+const SidebarDataContext = createContext<SidebarDataHandle | null>(null);
+
+export function SidebarDataProvider({ children, initialFolders = [] }: { children: ReactNode; initialFolders?: WorkspaceFolderData[] }) {
+  const fetcher = useFetcher<SessionListPayload>();
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const firstLoadRef = useRef(false);
+  // Session ids whose badge the user has already dismissed on this mount.
+  // Optimistic strip: keeps the click→disappearance instant and stops the
+  // pending ack effect in useSessionStatusAck from double-POSTing.
+  const seenRef = useRef<Set<string>>(new Set());
+
+  // Kick the first fetch on mount; the SSR document no longer carries folders.
+  useEffect(() => {
+    if (firstLoadRef.current) return;
+    firstLoadRef.current = true;
+    void fetcher.load('/api/sessions/list');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (fetcher.data) setHasLoaded(true);
+  }, [fetcher.data]);
+
+  const refresh = useMemo(() => {
+    return () => {
+      // Serialize loads: a second call while one is in flight would just
+      // queue an identical payload. The events that fire refresh are
+      // throttled upstream (1s trailing) so dropping the overlap is safe.
+      if (fetcher.state === 'idle') void fetcher.load('/api/sessions/list');
+    };
+  }, [fetcher]);
+
+  // Idle keep-alive: the throttled stream-event hook and useStreamPoll only
+  // fire while THIS client streams, so changes made elsewhere (another tab,
+  // a background omp process finishing, an archive from a second browser)
+  // never surfaced until the user interacted. A slow poll closes that gap;
+  // the idle-check above keeps it from piling onto a load the event path
+  // just started.
+  //
+  // Gated off while anything streams: `useStreamPoll` already covers that
+  // state on a tighter cadence, so the idle tick would be pure overlap.
+  const hasStreaming = Boolean(
+    fetcher.data?.folders?.some((folder) =>
+      folder.sessions?.some((session) => session.streamStatus === 'stream'),
+    ),
+  );
+  usePanelRefresh(refresh, !hasStreaming, SIDEBAR_IDLE_REFRESH_MS);
+
+  const markSeen = useCallback((sessionId: number | string) => {
+    const key = String(sessionId);
+    const status = fetcher.data?.folders
+      ?.flatMap((f) => f.sessions ?? [])
+      .find((s) => String(s.id) === key)?.streamStatus;
+    // Only terminal badges ack; `stream` rows must survive until agent_end.
+    if (!status || status === 'stream' || seenRef.current.has(key)) return;
+    seenRef.current.add(key);
+    fetch(`/api/sessions/${encodeURIComponent(key)}/stream-seen`, { method: 'POST' })
+      .then(() => {
+        // Pull the authoritative list (row deleted server-side) and let the
+        // pending-session ack effect observe an already-stripped status.
+        if (fetcher.state === 'idle') void fetcher.load('/api/sessions/list');
+      })
+      .catch(() => {
+        // Server still owns the badge; the next open re-acks.
+        seenRef.current.delete(key);
+      });
+  }, [fetcher]);
+
+  const value = useMemo<SidebarDataHandle>(() => {
+    const data = fetcher.data;
+    const seen = seenRef.current;
+    return {
+      folders: ((data?.folders ?? initialFolders) as WorkspaceFolderData[])
+        // Optimistic badge strip for sessions marked seen this mount.
+        .map((f) => seen.size
+          ? { ...f, sessions: (f.sessions ?? []).map((s) => (seen.has(String(s.id)) ? { ...s, streamStatus: undefined } : s)) }
+          : f),
+      isMock: data?.isMock ?? false,
+      initializing: !hasLoaded,
+      refresh,
+      markSeen,
+      hasSeen: (id) => seen.has(String(id)),
+    };
+  }, [fetcher.data, initialFolders, hasLoaded, refresh, markSeen]);
+
+  return <SidebarDataContext.Provider value={value}>{children}</SidebarDataContext.Provider>;
+}
+
+/**
+ * Context accessor with a graceful fallback for consumers mounted outside the
+ * provider (keeps legacy prop-driven trees working during the transition).
+ */
+export function useSidebarData(): SidebarDataHandle {
+  const ctx = useContext(SidebarDataContext);
+  if (ctx) return ctx;
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- single hook call site
+  return {
+    folders: [],
+    isMock: false,
+    initializing: true,
+    refresh: () => {},
+    markSeen: () => {},
+    hasSeen: () => false,
+  };
+}