ompchamber 0.3.0

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

@@ -0,0 +1,333 @@
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { useSearchParams } from '@/client/lib/router/search-params';
+import type { Attachment, ChatMessageData } from '@/shared/types';
+import { useOmpAgent } from '@/client/hooks/chat/omp';
+import { useChatTimelineQueue } from '@/client/hooks/chat/timeline/queue';
+import { useExtensionDialogQueue } from '@/client/hooks/chat/timeline/extension-dialog';
+import { useChatTimelineScroll } from '@/client/hooks/chat/timeline/scroll';
+import { useTimelineAutoScroll } from '@/client/hooks/chat/timeline/auto-scroll';
+import { useChatTimelineActions } from '@/client/hooks/chat/timeline/actions';
+import { useChatTimelineSend } from '@/client/hooks/chat/timeline/send';
+import { useSessionLoad } from '@/client/hooks/chat/timeline/session-load';
+import { useBrowserPageContextInsert } from '@/client/hooks/chat/timeline/browser-context';
+import { cancelStreamingCoalescer, createOmpAgentCallbacks } from '@/shared/lib/chat/timeline/omp-callbacks';
+import { readStreamTransport } from '@/shared/lib/chat/omp/transport';
+import { ACCESS_MODE_SETTING_KEY, normalizeApprovalMode } from '@/shared/lib/omp/config/access-mode';
+import type { ApprovalMode } from '@/shared/lib/omp/config/access-mode';
+import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { writeSetting } from '@/shared/lib/settings/client';
+
+interface UseChatTimelineOptions {
+  folders?: any[];
+  appSettings?: Record<string, any>;
+}
+
+export function useChatTimeline({ folders = [], appSettings = {} }: UseChatTimelineOptions = {}) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const sessionId = searchParams.get('sessionId');
+  const folderId = searchParams.get('folderId');
+
+  const [selectedFolderId, setSelectedFolderId] = useState<number | null>(null);
+
+  useEffect(() => {
+    setSelectedFolderId(folderId ? parseInt(folderId, 10) : null);
+  }, [folderId]);
+
+  // Choosing a workspace context mirrors it to the `folderId` URL param so the
+  // layout (right-panel scoping) can react to the same selection.
+  const selectContextFolder = useCallback((id: number | null) => {
+    setSelectedFolderId(id);
+    setSearchParams(prev => {
+      if (id) prev.set('folderId', String(id));
+      else prev.delete('folderId');
+      return prev;
+    }, { replace: true });
+  }, [setSearchParams]);
+
+  // Ref mirror of loadOlder so the scroll handler can call the latest one
+  // without re-creating it (useSessionLoad is defined below the scroll hook).
+  const loadOlderRef = useRef<() => void>(() => {});
+
+  const { scrollRef, contentRef, showScrollBottom, isScrolling, handleScroll, scrollToBottom, jumpToBottom } = useChatTimelineScroll({
+    onScrollTop: () => loadOlderRef.current(),
+  });
+
+  const [inputValue, setInputValue] = useSessionState<string>('chat.draft', '');
+  useBrowserPageContextInsert(setInputValue);
+  const [inputAttachments, setInputAttachments] = useSessionState<Attachment[]>('chat.draftAttachments', []);
+  const [localMessages, setLocalMessages] = useState<ChatMessageData[]>([]);
+
+  // A pending "new-…" session renders the workspace picker, which owns its own
+  // timeline and scroll handling.
+  const isPendingSession = Boolean(sessionId?.startsWith('new-'));
+  // Committed history lands asynchronously (session-load.ts), so the container
+  // paints at the top first; jump to the tail once per session when it does.
+  useTimelineAutoScroll({
+    sessionId,
+    messages: localMessages,
+    scrollRef,
+    scrollToBottom,
+    enabled: !isPendingSession,
+  });
+
+  const [isGenerating, setIsGenerating] = useState(false);
+  const isGeneratingRef = useRef(false);
+  // Mirror of localMessages for non-reactive reads (session-load merge path).
+  const localMessagesRef = useRef<ChatMessageData[]>([]);
+  localMessagesRef.current = localMessages;
+  const [generatingVerb, setGeneratingVerb] = useState('');
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const sessionIdRef = useRef(sessionId);
+  sessionIdRef.current = sessionId;
+  // Single throat through which every generation state transition flows
+  // (send, queue, steer, retry, undo, agent start/end, stream done/error).
+  // Sidebar subscribes here to paint spinner/check on the session item.
+  //
+  // Stable identity is load-bearing: this is a dependency of the session-load
+  // effect, which re-fetches history and replaces the timeline. A fresh
+  // function per render made that effect re-run every render, and its
+  // setLocalMessages(fetched) then re-rendered again — an unbounded fetch loop.
+  const setGenerating = useCallback((v: boolean) => {
+    isGeneratingRef.current = v;
+    setIsGenerating(v);
+  }, []);
+  // Set when the user presses Stop; the queue auto-process effect holds off
+  // while this is armed so a stopped run does NOT trigger the next queued
+  // item (stop-all semantics). Disarmed by any explicit send.
+  const stopHoldRef = useRef(false);
+  // Fire the sidebar/metadata refresh once per session when the AI starts
+  // responding (agent_start = first chunk) — the omp JSONL now carries the
+  // user turn, so the sidebar item + real title appear immediately.
+  const metaRefreshedRef = useRef<string | null>(null);
+  // Optimistic user bubble awaiting omp's echo (reconciled by the callbacks).
+  const optimisticUserIdRef = useRef<string | null>(null);
+  // Raw composer text for steer/follow-up echoes (those paths have no bubble).
+  const pendingUserDisplaysRef = useRef<{ sent: string; display: string }[]>([]);
+
+  // omp sessions are string UUIDs; chamber-created (mock/numeric) sessions are
+  // integers. Only omp UUIDs route through the live agent bridge. Pending
+  // client-side sessions ("new-…", created before the omp spawn) are treated
+  // as not-yet-omp so executeSend spawns the real session on first send.
+  const isOmpSession = Boolean(sessionId) && !String(sessionId).startsWith('new-') && Number.isNaN(Number(sessionId));
+
+  const aiPlaceholderIdRef = useRef<string | null>(null);
+
+  const {
+    sessionData,
+    adoptedSessionIdRef,
+    refreshSessionMeta,
+    setSessionModel,
+    hasMore,
+    loadingOlder,
+    loadOlderError,
+    sessionLoading,
+    loadOlder,
+  } = useSessionLoad({
+    sessionId,
+    setLocalMessages,
+    setGenerating,
+    isGeneratingRef,
+    aiPlaceholderIdRef,
+    localMessagesRef,
+    optimisticUserIdRef,
+    cancelStreamingCoalescer,
+    metaRefreshedRef,
+    scrollRef,
+  });
+  loadOlderRef.current = loadOlder;
+
+  // Composer picks made BEFORE the omp session exists (pending "new-…" view):
+  // there is no live session to receive the RPC yet, so the selection is held
+  // here and applied to the spawn command on first send.
+  const pendingComposerModelRef = useRef<{ provider: string; modelId: string } | null>(null);
+  const pendingThinkingLevelRef = useRef<string | null>(null);
+  // Live mirror of the composer's model/thinking pick: the enqueue path
+  // snapshots it onto queued items so auto-delivery replays those settings.
+  const composerModelRef = useRef<{ provider: string; modelId: string; thinkingLevel: string } | null>(null);
+
+  // Access-control mode is a global, persisted user preference (unlike the
+  // per-session model/thinking picks): it hydrates from appSettings at first
+  // paint and is mirrored into a ref so the send path reads the latest value
+  // without re-creating executeSend.
+  const [accessMode, setAccessMode] = useState<ApprovalMode>(() => normalizeApprovalMode(appSettings.omp_access_mode));
+  const accessModeRef = useRef<ApprovalMode>(accessMode);
+  accessModeRef.current = accessMode;
+
+  const handleAccessModeChange = useCallback((mode: ApprovalMode) => {
+    setAccessMode(mode);
+    accessModeRef.current = mode;
+    // Persist the last selection; the server reads this key as the spawn-time
+    // default. Fire-and-forget: the in-memory value is already authoritative
+    // for this session's requests, which carry it explicitly.
+    writeSetting(ACCESS_MODE_SETTING_KEY, mode);
+  }, []);
+
+  const persistMessages = useCallback((messagesToSave: any[]) => {
+    if (!sessionId) return;
+    fetch(`/api/chat/${sessionId}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ messages: messagesToSave }),
+    }).catch(err => console.error('Error persisting messages via API:', err));
+  }, [sessionId]);
+
+  const {
+    messageQueue,
+    setMessageQueue,
+    steeringQueue,
+    setSteeringQueue,
+    removeDeliveredFromQueue,
+  } = useChatTimelineQueue(sessionId);
+  const {
+    dialog: extensionDialog,
+    enqueue: enqueueExtensionDialog,
+    dismiss: dismissExtensionDialog,
+    withdraw: withdrawExtensionDialog,
+  } = useExtensionDialogQueue(sessionId);
+
+  const ompAgent = useOmpAgent(isOmpSession ? sessionId : null, createOmpAgentCallbacks({
+    removeDeliveredFromQueue,
+    setGenerating,
+    setGeneratingVerb,
+    scrollToBottom,
+    adoptedSessionIdRef,
+    sessionIdRef,
+    metaRefreshedRef,
+    refreshSessionMeta,
+    setLocalMessages,
+    aiPlaceholderIdRef,
+    optimisticUserIdRef,
+    pendingUserDisplaysRef,
+    persistMessages,
+    abortControllerRef,
+    appSettings,
+    enqueueExtensionDialog,
+    withdrawExtensionDialog,
+  }), readStreamTransport(appSettings));
+  const { steerOmpAgent, executeSend } = useChatTimelineSend({
+    folders,
+    selectedFolderId,
+    sessionId,
+    isOmpSession,
+    appSettings,
+    ompAgent,
+    setLocalMessages,
+    persistMessages,
+    setGenerating,
+    setGeneratingVerb,
+    scrollToBottom,
+    jumpToBottom,
+    aiPlaceholderIdRef,
+    adoptedSessionIdRef,
+    optimisticUserIdRef,
+    pendingUserDisplaysRef,
+    setSessionModel,
+    pendingComposerModelRef,
+    pendingThinkingLevelRef,
+    composerModelRef,
+    accessModeRef,
+    abortControllerRef,
+    setInputValue,
+    setSearchParams,
+  });
+
+  // Auto-process queue: when the run ends (or was never active), deliver the
+  // head item. Both modes queue client-side now — omp sends it as a normal
+  // prompt via executeSend (which routes to the omp bridge); the mock path
+  // streams the same way. A user Stop arms `stopHoldRef`: the run ends but the
+  // queue stays put (stop-all semantics — the toast offers Send now); the next
+  // explicit send disarms it.
+  useEffect(() => {
+    if (stopHoldRef.current) return;
+    if (!isGenerating && messageQueue.length > 0) {
+      const nextMessage = messageQueue[0];
+      setMessageQueue(q => q.slice(1));
+      // The queued snapshot re-applies model/thinking/access before the prompt.
+      executeSend(nextMessage.text, nextMessage.attachments, { model: nextMessage.model });
+    }
+  }, [isGenerating, messageQueue, executeSend, setMessageQueue]);
+
+  const {
+    handleSend,
+    handleEditQueueItem,
+    handleSendNowQueueItem,
+    handleUndo,
+    handleRetry,
+    submitNewChat,
+    stopGenerating,
+    handleThinkingLevelChange,
+    handleModelChange,
+    closeExtensionDialog,
+  } = useChatTimelineActions({
+    inputValue,
+    setInputValue,
+    setInputAttachments,
+    isGenerating,
+    isOmpSession,
+    sessionId,
+    appSettings,
+    messageQueue,
+    setMessageQueue,
+    executeSend,
+    steerOmpAgent,
+    ompAgent,
+    abortControllerRef,
+    setGenerating,
+    stopHoldRef,
+    persistMessages,
+    setLocalMessages,
+    pendingComposerModelRef,
+    pendingThinkingLevelRef,
+    composerModelRef,
+    accessModeRef,
+    setSearchParams,
+    dismissExtensionDialog,
+  });
+
+  return {
+    sessionId,
+    folderId,
+    isOmpSession,
+    selectedFolderId,
+    setSelectedFolderId: selectContextFolder,
+    sessionData,
+    localMessages,
+    isGenerating,
+    hasMore,
+    loadingOlder,
+    loadOlderError,
+    sessionLoading,
+    loadOlder,
+    generatingVerb,
+    messageQueue,
+    setMessageQueue,
+    steeringQueue,
+    setSteeringQueue,
+    inputValue,
+    setInputValue,
+    inputAttachments,
+    setInputAttachments,
+    scrollRef,
+    contentRef,
+    showScrollBottom,
+    isScrolling,
+    handleScroll,
+    scrollToBottom,
+    jumpToBottom,
+    handleSend,
+    handleEditQueueItem,
+    handleSendNowQueueItem,
+    handleUndo,
+    handleRetry,
+    submitNewChat,
+    stopGenerating,
+    handleThinkingLevelChange,
+    handleModelChange,
+    accessMode,
+    handleAccessModeChange,
+    composerModelRef,
+    extensionDialog,
+    closeExtensionDialog,
+    respondToExtensionUi: ompAgent.respondToExtensionUi,
+  };
+}

package/src/client/hooks/chat/timeline/queue.ts

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Follow-up + steering queue state for the chamber chat, backed by the SQLite
+ * `queued_messages` table via /api/sessions/:id/queue (one row per item with a
+ * model snapshot, so auto-delivery replays the settings the item was queued
+ * with).
+ *
+ * The client panel stays the source of truth while the session is open: every
+ * mutation updates React state first, then PUTs the full remaining list to the
+ * route (replace-on-write keeps ids stable for reorder/edit/delete). The queue
+ * hydrates from the table on mount — a page reload mid-stream restores it.
+ * Steering mirrors live in the session-state blob under a separate key.
+ *
+ * Kept out of useChatTimeline so that hook stays under the size ceiling.
+ */
+
+import type { SetStateAction } from 'preact/compat';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import type { QueuedMessage } from '@/shared/types';
+import { useSessionState } from '@/client/hooks/workspace/session-state';
+
+const STEERING_STATE_KEY = 'chat.steeringQueue';
+
+export interface ChatTimelineQueueResult {
+  messageQueue: QueuedMessage[];
+  setMessageQueue: (updater: SetStateAction<QueuedMessage[]>) => void;
+  steeringQueue: QueuedMessage[];
+  setSteeringQueue: (updater: SetStateAction<QueuedMessage[]>) => void;
+  /** Drop an exactly-matching text from whichever mirror queue holds it. */
+  removeDeliveredFromQueue: (text: string) => void;
+}
+
+export function useChatTimelineQueue(sessionId: string | null): ChatTimelineQueueResult {
+  const [messageQueue, setMessageQueueState] = useState<QueuedMessage[]>([]);
+  const [steeringQueue, setSteeringQueue] = useSessionState<QueuedMessage[]>(STEERING_STATE_KEY, []);
+
+  // Hydrate from the table once per session. A generation-safe ref skips the
+  // stale-response race when the user switches sessions quickly.
+  const hydrateEpochRef = useRef(0);
+  useEffect(() => {
+    if (!sessionId) {
+      setMessageQueueState([]);
+      return;
+    }
+    const epoch = ++hydrateEpochRef.current;
+    let cancelled = false;
+    fetch(`/api/sessions/${encodeURIComponent(sessionId)}/queue`)
+      .then(res => (res.ok ? res.json() : { queue: [] }))
+      .then((data: { queue?: QueuedMessage[] }) => {
+        if (cancelled || hydrateEpochRef.current !== epoch) return;
+        setMessageQueueState(Array.isArray(data.queue) ? data.queue : []);
+      })
+      .catch(() => {});
+    return () => { cancelled = true; };
+  }, [sessionId]);
+
+  // Replace-on-write mirror: every client mutation PUTs the full list so the
+  // table always matches the panel (order, edits, deletions included).
+  const mirrorQueue = useCallback((next: QueuedMessage[]) => {
+    if (!sessionId) return;
+    fetch(`/api/sessions/${encodeURIComponent(sessionId)}/queue`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ queue: next }),
+    }).catch(console.error);
+  }, [sessionId]);
+
+  const setMessageQueue = useCallback((updater: SetStateAction<QueuedMessage[]>) => {
+    setMessageQueueState(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      mirrorQueue(next);
+      return next;
+    });
+  }, [mirrorQueue]);
+
+  const removeDeliveredFromQueue = useCallback((text: string) => {
+    const exact = (q: QueuedMessage[]) => q.some(i => i.text === text);
+    setSteeringQueue(q => (exact(q) ? q.filter(i => i.text !== text) : q));
+    setMessageQueue(q => (exact(q) ? q.filter(i => i.text !== text) : q));
+  }, [setSteeringQueue, setMessageQueue]);
+
+  return { messageQueue, setMessageQueue, steeringQueue, setSteeringQueue, removeDeliveredFromQueue };
+}

package/src/client/hooks/chat/timeline/scroll.ts

@@ -0,0 +1,134 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Chat timeline scroll container state (auto-fading scrollbar + follow-bottom
+ * affordance). Extracted from useChatTimeline so that hook stays under the
+ * repo's per-file size ceiling.
+ *
+ * The follow-bottom affordance is geometry, not an event: content that grows
+ * without the user scrolling (history lands, an accordion expands, an image
+ * decodes, the panel is resized) never fires `scroll`. Both the container and
+ * the content wrapper are therefore observed, so a session opened at the top
+ * shows the button without a single scroll event.
+ *
+ * Streaming auto-scroll is stick-to-bottom: `scrollToBottom` only actually
+ * moves the viewport while `follow` is engaged. The user scrolling away from
+ * the tail disengages it (the scroll fight is gone — they can read while the
+ * AI generates); scrolling back near the tail, or clicking the scroll-bottom
+ * button, re-engages it. Programmatic jumps (`scrollTo`) never flip the mode.
+ */
+
+import type { RefObject } from 'preact/compat';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+
+/** Distance from the tail, in pixels, that still counts as "at the bottom". */
+const FOLLOW_BOTTOM_THRESHOLD_PX = 100;
+
+export interface ChatTimelineScrollOptions {
+  /** Called when the viewport reaches the top (history paging trigger).
+   *  Ref-indirect; the hook never depends on the callback's identity. */
+  onScrollTop?: () => void;
+}
+
+export interface ChatTimelineScrollResult {
+  scrollRef: RefObject<HTMLDivElement>;
+  /** Attach to the timeline's inner content wrapper so its growth is observed. */
+  contentRef: (node: HTMLDivElement | null) => void;
+  showScrollBottom: boolean;
+  isScrolling: boolean;
+  /** Streaming auto-scroll gates on this: pinned to the tail = true. */
+  followRef: RefObject<boolean>;
+  handleScroll: () => void;
+  scrollToBottom: (behavior?: ScrollBehavior) => void;
+  /** Jump to the tail and re-engage follow mode (scroll-bottom button). */
+  jumpToBottom: (behavior?: ScrollBehavior) => void;
+}
+
+/** Distance from the top that counts as "reached the history boundary". */
+const SCROLL_TOP_TRIGGER_PX = 40;
+
+export function useChatTimelineScroll(options: ChatTimelineScrollOptions = {}): ChatTimelineScrollResult {
+  const onScrollTopRef = useRef<(() => void) | undefined>(options.onScrollTop);
+  onScrollTopRef.current = options.onScrollTop ?? onScrollTopRef.current;
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [contentNode, setContentNode] = useState<HTMLDivElement | null>(null);
+  const [showScrollBottom, setShowScrollBottom] = useState(false);
+  const [isScrolling, setIsScrolling] = useState(false);
+  const scrollTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  // True while the viewport is (or should stay) pinned to the tail. A ref, not
+  // state: scroll chunks read it every frame and a flip must not re-render.
+  const followRef = useRef(true);
+  // Previous scrollTop, for upward-scroll detection in handleScroll.
+  const lastScrollTopRef = useRef(0);
+
+  const contentRef = useCallback((node: HTMLDivElement | null) => {
+    setContentNode(node);
+  }, []);
+
+  const syncFollowBottom = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setShowScrollBottom(el.scrollHeight - el.scrollTop - el.clientHeight >= FOLLOW_BOTTOM_THRESHOLD_PX);
+  }, []);
+
+  const handleScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (el) {
+      // Disengage only on upward scroll (the user reading back): a decreasing
+      // scrollTop is the one signal that separates a user's intent from the
+      // programmatic downward scrolls — smooth follow animations produce only
+      // increasing scrollTop, so a geometry check alone would flip the flag
+      // mid-animation as content outgrows the animation. Re-engage whenever
+      // the viewport is back near the tail, whichever way it got there.
+      if (el.scrollTop < lastScrollTopRef.current - 1) followRef.current = false;
+      if (el.scrollHeight - el.scrollTop - el.clientHeight < FOLLOW_BOTTOM_THRESHOLD_PX) followRef.current = true;
+      lastScrollTopRef.current = el.scrollTop;
+      // History paging: the viewport hit the top — ask for the older window.
+      // Idempotent: the loader ignores calls while a page is in flight.
+      if (el.scrollTop <= SCROLL_TOP_TRIGGER_PX) onScrollTopRef.current?.();
+    }
+    syncFollowBottom();
+    setIsScrolling(true);
+    if (scrollTimerRef.current) clearTimeout(scrollTimerRef.current);
+    scrollTimerRef.current = setTimeout(() => setIsScrolling(false), 600);
+  }, [syncFollowBottom]);
+
+  const scrollToBottom = useCallback((behavior: ScrollBehavior = 'smooth') => {
+    const el = scrollRef.current;
+    if (!el) return;
+    // Follow-gated: a stream chunk in read mode (user scrolled away) must not
+    // yank the viewport down. jumpToBottom is the explicit bypass.
+    if (!followRef.current) return;
+    el.scrollTo({ top: el.scrollHeight, behavior });
+  }, []);
+
+  const jumpToBottom = useCallback((behavior: ScrollBehavior = 'smooth') => {
+    const el = scrollRef.current;
+    if (!el) return;
+    followRef.current = true;
+    el.scrollTo({ top: el.scrollHeight, behavior });
+  }, []);
+
+  // Re-sync whenever an observed box changes size. `contentNode` is a dep so the
+  // observer is rebuilt when the timeline mounts — a session picked from the
+  // workspace picker swaps the whole subtree in, and the callback ref fires
+  // before this effect, so the node is always available here.
+  useEffect(() => {
+    syncFollowBottom();
+    if (typeof ResizeObserver === 'undefined') return;
+    const container = scrollRef.current;
+    const observer = new ResizeObserver(syncFollowBottom);
+    if (container) observer.observe(container);
+    if (contentNode) observer.observe(contentNode);
+    return () => observer.disconnect();
+  }, [contentNode, syncFollowBottom]);
+
+  useEffect(() => () => {
+    if (scrollTimerRef.current) clearTimeout(scrollTimerRef.current);
+  }, []);
+
+  return { scrollRef, contentRef, showScrollBottom, isScrolling, followRef, handleScroll, scrollToBottom, jumpToBottom };
+}