ompchamber 1.2.1 → 2.0.0

package/src/client/hooks/chat/timeline/ask-frames.ts

@@ -18,6 +18,17 @@
  * Any frame left over is modal material — including an ask-shaped frame whose
  * tool call the timeline has not seen, which must stay answerable rather than
  * silently vanish.
+ *
+ * That fallback must wait for the session's own history, though. Ownership is
+ * decided against the ask tool calls in `messages`, and on session open the
+ * pending dialogs are replayed from the agent-state probe — which answers out
+ * of the wrapper's local flags — long before the JSONL fetch lands. Every
+ * replayed frame therefore looks unowned for that window, and rendering one as
+ * a modal painted the question on screen and yanked it away the instant the
+ * timeline arrived and its card claimed it: the flash seen when switching to a
+ * session parked on an ask. `historyLoaded` holds the modal — never the card
+ * claim — until there is a timeline to decide against; a frame no card claims
+ * after that still gets its modal.
  */
 
 import { createContext, useContext } from 'preact/compat';
@@ -51,6 +62,9 @@ export function useAskFrames(): AskFramesHandle {
 export function splitAskFrames(
   messages: ChatMessageData[],
   pending: ExtensionUiDialogRequest[],
+  /** Whether `messages` is the session's committed history yet (see the module
+   *  note). False holds the modal back; it never blocks a card from claiming. */
+  historyLoaded: boolean,
 ): AskFramesSplit {
   const framesByTool = new Map<string, ExtensionUiDialogRequest[][]>();
   if (pending.length === 0) return { framesByTool, modalRequest: null };
@@ -98,5 +112,10 @@ export function splitAskFrames(
     framesByTool.set(toolId, groupAskFrames(openAsks.get(toolId) ?? [], frames));
   }
 
-  return { framesByTool, modalRequest: pending.find((request) => !claimed.has(request)) ?? null };
+  // The frame stays queued either way — only the modal waits for the history,
+  // so nothing is dropped and nothing flashes.
+  return {
+    framesByTool,
+    modalRequest: historyLoaded ? pending.find((request) => !claimed.has(request)) ?? null : null,
+  };
 }

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

@@ -10,6 +10,14 @@
  * because every other trigger lives in the streaming callbacks. This jumps to
  * the tail exactly once per session, on the commit where that session's
  * messages appear.
+ *
+ * The jump is the UNCONDITIONAL one (`jumpToBottom`), not the follow-gated
+ * `scrollToBottom`. Follow mode is a property of this mounted view, not of the
+ * session being opened: a user who scrolled up before switching left it
+ * disengaged, and the open then painted the top of the new session with no
+ * scroll event to re-engage it — the session stayed at the head until the
+ * button was clicked (reproduced: scroll up in session A, open session B,
+ * `scrollTop` pinned at 0 with the jump button showing).
  */
 
 import type { RefObject } from 'preact/compat';
@@ -24,14 +32,15 @@ export interface UseTimelineAutoScrollDeps {
   messages: ChatMessageData[];
   /** Scroll container owned by useChatTimelineScroll. */
   scrollRef: RefObject<HTMLDivElement>;
-  scrollToBottom: (behavior?: ScrollBehavior) => void;
+  /** Unconditional tail jump (bypasses follow mode, re-engages it). */
+  jumpToBottom: (behavior?: ScrollBehavior) => void;
   /** Pending "new-…" sessions render the workspace picker, which owns its own
    *  timeline and scroll handling. */
   enabled: boolean;
 }
 
 export function useTimelineAutoScroll(deps: UseTimelineAutoScrollDeps): void {
-  const { sessionId, messages, scrollRef, scrollToBottom, enabled } = deps;
+  const { sessionId, messages, scrollRef, jumpToBottom, enabled } = deps;
   // Session the container was last rendering. On the commit where this flips
   // the DOM still holds the previous session's rows, so scrolling then would
   // aim at content that is about to be replaced.
@@ -53,6 +62,6 @@ export function useTimelineAutoScroll(deps: UseTimelineAutoScrollDeps): void {
     // scrollHeight forces layout, so the jump lands before the browser paints.
     // 'instant' is required because the container carries Tailwind's
     // `scroll-smooth`, which 'auto' would resolve to.
-    scrollToBottom('instant');
-  }, [sessionId, messages, enabled, scrollRef, scrollToBottom]);
+    jumpToBottom('instant');
+  }, [sessionId, messages, enabled, scrollRef, jumpToBottom]);
 }

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

@@ -15,10 +15,8 @@ import { useBrowserPageContextInsert } from '@/client/hooks/chat/timeline/browse
 import { createOmpAgentCallbacks } from '@/shared/lib/chat/timeline/omp-callbacks';
 import { cancelStreamingCoalescer } from '@/shared/lib/chat/timeline/stream-coalescer';
 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 { useChatTimelineAccessMode } from '@/client/hooks/chat/timeline/access-mode';
 import { useSessionState } from '@/client/hooks/workspace/session-state';
-import { writeSetting } from '@/shared/lib/settings/client';
 
 interface UseChatTimelineOptions {
   folders?: any[];
@@ -51,7 +49,7 @@ export function useChatTimeline({ folders = [], appSettings = {} }: UseChatTimel
   // without re-creating it (useSessionLoad is defined below the scroll hook).
   const loadOlderRef = useRef<() => void>(() => {});
 
-  const { scrollRef, contentRef, showScrollBottom, isScrolling, handleScroll, scrollToBottom, jumpToBottom } = useChatTimelineScroll({
+  const { scrollRef, contentRef, showScrollBottom, isScrolling, handleScroll, scrollToBottom, jumpToBottom, jumpActiveRef, jumpCountRef } = useChatTimelineScroll({
     onScrollTop: () => loadOlderRef.current(),
   });
 
@@ -65,11 +63,12 @@ export function useChatTimeline({ folders = [], appSettings = {} }: UseChatTimel
   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.
+  // Unconditional: follow mode is this view's, not the opened session's.
   useTimelineAutoScroll({
     sessionId,
     messages: localMessages,
     scrollRef,
-    scrollToBottom,
+    jumpToBottom,
     enabled: !isPendingSession,
   });
 
@@ -135,6 +134,8 @@ export function useChatTimeline({ folders = [], appSettings = {} }: UseChatTimel
     cancelStreamingCoalescer,
     metaRefreshedRef,
     scrollRef,
+    jumpActiveRef,
+    jumpCountRef,
   });
   loadOlderRef.current = loadOlder;
 
@@ -165,21 +166,8 @@ export function useChatTimeline({ folders = [], appSettings = {} }: UseChatTimel
   }, [sessionId]);
 
   // 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);
-  }, []);
+  // per-session model/thinking picks).
+  const { accessMode, accessModeRef, setAccessMode: handleAccessModeChange } = useChatTimelineAccessMode(appSettings);
 
   const persistMessages = useCallback((messagesToSave: any[]) => {
     if (!sessionId) return;

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

@@ -23,6 +23,24 @@ import { useSessionState } from '@/client/hooks/workspace/session-state';
 
 const STEERING_STATE_KEY = 'chat.steeringQueue';
 
+/**
+ * How often a mounted session with a non-empty queue re-offers a delivery slot.
+ *
+ * This is the safety net for a server whose own timers have stopped firing: a
+ * long-lived `bun --hot` process can stop running `setTimeout` callbacks
+ * entirely while still answering HTTP normally (observed live — a 4-hour dev
+ * server whose SSE heartbeat never fired and whose queued follow-ups never
+ * drained, while every request returned in 0.01s). Auto-delivery is timer-driven
+ * server-side, so it dies with those timers; a client poll runs in a different
+ * process and is immune.
+ *
+ * Only armed while something is actually queued, and each tick is one POST that
+ * doubles as the panel's reconcile, so an idle session costs nothing. 3s is a
+ * deliberate compromise: slow enough to be invisible on the wire, fast enough
+ * that a stranded item lands before the user wonders about it.
+ */
+const QUEUE_POLL_INTERVAL_MS = 3_000;
+
 function queueUrl(sessionId: string): string {
   return `/api/sessions/${encodeURIComponent(sessionId)}/queue`;
 }
@@ -74,25 +92,64 @@ export function useChatTimelineQueue(sessionId: string | null): ChatTimelineQueu
       })
       .catch(() => {});
   }, [sessionId]);
+  // Offer the server a delivery slot for this session. The server-side claim
+  // makes this harmless when a run is active or another tab already took the
+  // head — this used to be the client auto-delivery effect, which fired into
+  // whatever session was open at the time.
+  //
+  // The response carries the canonical queue, so this doubles as a reconcile.
+  const nudgeDelivery = useCallback(() => {
+    if (!sessionId) return;
+    const epoch = hydrateEpochRef.current;
+    fetch(`${queueUrl(sessionId)}/deliver`, { method: 'POST' })
+      .then((res) => readQueueResponse(res))
+      .then((queue) => {
+        // Only reconcile when this is still the session on screen: the poll can
+        // outlive a switch, and writing another session's queue here is the
+        // exact cross-session bug the server-owned store was built to stop.
+        if (cancelledRef.current || hydrateEpochRef.current !== epoch) return;
+        if (queue) setMessageQueueState(queue);
+      })
+      .catch(() => {});
+  }, [sessionId]);
+
   useEffect(() => {
     cancelledRef.current = false;
     refresh();
-    const onFocus = () => refresh();
+    // Mount and every focus regain offer a delivery slot. Focus is the trigger
+    // the recovery path depends on, so it must re-nudge even when the queue
+    // length is unchanged: keying this on `messageQueue.length > 0` (a boolean
+    // that stays true while the item is stranded) meant the effect never re-ran
+    // and a stuck queue stayed stuck.
+    nudgeDelivery();
+    const onFocus = () => {
+      refresh();
+      nudgeDelivery();
+    };
     window.addEventListener('focus', onFocus);
     return () => {
       cancelledRef.current = true;
       window.removeEventListener('focus', onFocus);
     };
-  }, [refresh]);
+  }, [refresh, nudgeDelivery]);
+
+  // Items appearing while the session is already mounted (a send while
+  // streaming, or another tab's write): offer a slot without waiting for focus.
+  useEffect(() => {
+    if (messageQueue.length > 0) nudgeDelivery();
+  }, [messageQueue.length, nudgeDelivery]);
 
-  // Mounted session with queued items: offer the server a delivery slot. The
-  // server-side claim makes this harmless when a run is active or another tab
-  // already took the head — this used to be the client auto-delivery effect,
-  // which fired into whatever session was open at the time.
+  // Safety net: while anything is queued, keep offering a slot on an interval.
+  // Server-side auto-delivery is timer-driven and a long-lived `--hot` server
+  // can lose that capability silently; this poll lives in the browser and is
+  // unaffected. The effect is torn down the moment the queue empties, so a
+  // session with nothing queued never polls.
+  const hasQueued = messageQueue.length > 0;
   useEffect(() => {
-    if (!sessionId || messageQueue.length === 0) return;
-    fetch(`${queueUrl(sessionId)}/deliver`, { method: 'POST' }).catch(() => {});
-  }, [sessionId, messageQueue.length > 0]);
+    if (!sessionId || !hasQueued) return;
+    const timer = setInterval(nudgeDelivery, QUEUE_POLL_INTERVAL_MS);
+    return () => clearInterval(timer);
+  }, [sessionId, hasQueued, nudgeDelivery]);
 
   const enqueueMessage = useCallback((item: Omit<QueuedMessage, 'id'>) => {
     if (!sessionId) return;

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

@@ -0,0 +1,260 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Chat timeline scroll contract. Both behaviours here were the bug:
+ *
+ * 1. The jump that follows a session's committed history used the follow-gated
+ *    `scrollToBottom`, and follow mode belongs to the mounted view, not to the
+ *    session being opened — a user who scrolled up before switching left it
+ *    disengaged, so the newly opened session painted at `scrollTop = 0` with no
+ *    scroll event to re-engage it and stayed there. Verified live in the
+ *    chamber: scroll up in session A, open session B, viewport pinned at the
+ *    head with the jump button showing until it was clicked.
+ * 2. Nothing re-pinned the tail when content grew while the viewport was
+ *    pinned (a prepended window, a late Shiki/mermaid/image layout), so a jump
+ *    target measured a frame earlier — or at open time — was stranded.
+ *
+ * Runs against a real DOM (happy-dom) because these are Preact hooks; geometry
+ * is faked on the container, since happy-dom does no layout.
+ */
+
+import { afterAll, beforeAll, describe, expect, jest as fakeTimers, test } from 'bun:test';
+import { Window } from 'happy-dom';
+import type { h as PreactH, render as PreactRender } from 'preact';
+import type { act as PreactAct } from 'preact/test-utils';
+import type { useChatTimelineScroll as UseScroll, ChatTimelineScrollResult } from '@/client/hooks/chat/timeline/scroll';
+import type { useTimelineAutoScroll as UseAuto } from '@/client/hooks/chat/timeline/auto-scroll';
+import type { ChatMessageData } from '@/shared/types';
+
+let useChatTimelineScroll: typeof UseScroll;
+let useTimelineAutoScroll: typeof UseAuto;
+let h: typeof PreactH;
+let render: typeof PreactRender;
+let act: typeof PreactAct;
+
+let win: Window;
+const scrolled: Array<{ top: number; behavior?: ScrollBehavior }> = [];
+const geometry = { top: 0, height: 5000, viewport: 500 };
+
+/** Observe what the hook asks for; 'instant' also lands (a smooth scroll would
+ *  animate in a browser, so the fake keeps it as a recorded intent only). */
+function applyTop(el: HTMLDivElement, value: number) {
+  geometry.top = Math.max(0, Math.min(value, geometry.height - geometry.viewport));
+  // The global `Event` the hook's listener expects: happy-dom's, installed
+  // into globalThis in beforeAll.
+  el.dispatchEvent(new Event('scroll'));
+}
+
+function installScroller(el: HTMLDivElement) {
+  Object.defineProperty(el, 'scrollHeight', { get: () => geometry.height, configurable: true });
+  Object.defineProperty(el, 'clientHeight', { get: () => geometry.viewport, configurable: true });
+  Object.defineProperty(el, 'scrollTop', {
+    get: () => geometry.top,
+    set: (value: number) => applyTop(el, value),
+    configurable: true,
+  });
+  Object.defineProperty(el, 'scrollTo', {
+    value: (options: { top: number; behavior?: ScrollBehavior }) => {
+      scrolled.push(options);
+      if (options.behavior !== 'smooth') applyTop(el, options.top);
+    },
+    configurable: true,
+  });
+}
+
+/** ResizeObserver the tests drive by hand — the hook rebuilds one per content
+ *  node, so the last instance of the current mount is the live one. */
+class StubResizeObserver {
+  static instances: StubResizeObserver[] = [];
+  static latest(): StubResizeObserver { return StubResizeObserver.instances[StubResizeObserver.instances.length - 1]; }
+  constructor(private readonly callback: () => void) {
+    StubResizeObserver.instances.push(this);
+  }
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+  fire() { this.callback(); }
+}
+
+interface ProbeProps {
+  sessionId: string;
+  messages: ChatMessageData[];
+  /** Holder owned by ONE test: a stale tree can only write its own hook result. */
+  holder: { current: ChatTimelineScrollResult | null };
+}
+
+function Probe(props: ProbeProps) {
+  const scroll = useChatTimelineScroll({});
+  useTimelineAutoScroll({
+    sessionId: props.sessionId,
+    messages: props.messages,
+    scrollRef: scroll.scrollRef,
+    jumpToBottom: scroll.jumpToBottom,
+    enabled: true,
+  });
+  props.holder.current = scroll;
+  return h('div', { ref: scroll.scrollRef, onScroll: scroll.handleScroll },
+    h('div', { ref: scroll.contentRef }));
+}
+
+interface ProbeHandle {
+  holder: { current: ChatTimelineScrollResult | null };
+  node: HTMLDivElement;
+  el: HTMLDivElement;
+}
+
+const message = (id: string) => ({ id, role: 'user', content: id } as unknown as ChatMessageData);
+
+/** Fresh mount, own container: `follow`, the jump counter and the observers are
+ *  per-hook state, so sharing them across tests would hide the behaviour. */
+async function mountProbe(sessionId: string, messages: ChatMessageData[]): Promise<ProbeHandle> {
+  const holder: ProbeHandle['holder'] = { current: null };
+  const node = document.createElement('div');
+  document.body.appendChild(node);
+  await act(async () => { render(h(Probe, { sessionId, messages, holder }), node); });
+  const el = holder.current!.scrollRef.current!;
+  installScroller(el);
+  return { holder, node, el };
+}
+
+/** Re-render with new props: a session switch, then that session's history. */
+async function updateProbe(probe: ProbeHandle, sessionId: string, messages: ChatMessageData[]) {
+  await act(async () => {
+    render(h(Probe, { sessionId, messages, holder: probe.holder }), probe.node);
+  });
+}
+
+async function unmountProbe(probe: ProbeHandle) {
+  await act(async () => { render(null, probe.node); });
+  probe.node.remove();
+}
+
+beforeAll(async () => {
+  win = new Window({ url: 'http://localhost' });
+  for (const key of ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'Event'] as const) {
+    (globalThis as Record<string, unknown>)[key] = (win as unknown as Record<string, unknown>)[key];
+  }
+  (globalThis as Record<string, unknown>).ResizeObserver = StubResizeObserver;
+  // Static imports cannot work here: Preact binds its environment at module
+  // evaluation time, so the modules below must load after those DOM globals.
+  ({ useChatTimelineScroll } = await import('@/client/hooks/chat/timeline/scroll'));
+  ({ useTimelineAutoScroll } = await import('@/client/hooks/chat/timeline/auto-scroll'));
+  ({ h, render } = await import('preact'));
+  ({ act } = await import('preact/test-utils'));
+});
+
+afterAll(() => {
+  for (const key of ['window', 'document', 'navigator', 'Node', 'Element', 'HTMLElement', 'Event', 'ResizeObserver']) {
+    delete (globalThis as Record<string, unknown>)[key];
+  }
+});
+
+describe('timeline scroll', () => {
+  test('opening a session jumps to the tail even after the user scrolled up', async () => {
+    scrolled.length = 0;
+    geometry.top = 0;
+    geometry.height = 5000;
+    const probe = await mountProbe('a', [message('a1')]);
+    const scroll = () => probe.holder.current!;
+
+    await updateProbe(probe, 'a', [message('a1'), message('a2')]);
+    expect(probe.el.scrollTop).toBe(geometry.height - geometry.viewport);
+
+    // The user reads back — follow disengages, and that state outlives the
+    // session it was set in.
+    probe.el.scrollTop = 100;
+    expect(scroll().followRef.current).toBe(false);
+
+    // Session switch: the container paints empty first (the skeleton), the
+    // committed history lands a commit later.
+    await updateProbe(probe, 'b', []);
+    scrolled.length = 0;
+    await updateProbe(probe, 'b', [message('b1')]);
+
+    expect(scroll().followRef.current).toBe(true);
+    expect(scrolled.length).toBe(1);
+    expect(scrolled[0].behavior).toBe('instant');
+    expect(scrolled[0].top).toBe(geometry.height);
+    expect(probe.el.scrollTop).toBe(geometry.height - geometry.viewport);
+    await unmountProbe(probe);
+  });
+
+  test('a stream chunk may not move an unpinned viewport, a jump may', async () => {
+    scrolled.length = 0;
+    geometry.top = 0;
+    geometry.height = 5000;
+    const probe = await mountProbe('a', [message('a1')]);
+    const scroll = () => probe.holder.current!;
+
+    await act(async () => { scroll().jumpToBottom('instant'); });
+    expect(scroll().followRef.current).toBe(true);
+    expect(probe.el.scrollTop).toBe(geometry.height - geometry.viewport);
+    expect(scroll().jumpCountRef.current).toBe(1);
+    expect(scroll().jumpActiveRef.current).toBe(true);
+
+    // The user reads back. A stream chunk must not yank the viewport down...
+    probe.el.scrollTop = 100;
+    expect(scroll().followRef.current).toBe(false);
+    scrolled.length = 0;
+    await act(async () => { scroll().scrollToBottom('smooth'); });
+    expect(scrolled.length).toBe(0);
+
+    // ...while the explicit jump bypasses the gate and re-engages it.
+    await act(async () => { scroll().jumpToBottom('instant'); });
+    expect(scrolled.length).toBe(1);
+    expect(scroll().followRef.current).toBe(true);
+    expect(probe.el.scrollTop).toBe(geometry.height - geometry.viewport);
+    expect(scroll().jumpCountRef.current).toBe(2);
+    await unmountProbe(probe);
+  });
+
+  test('the jump guard releases so history paging is not blocked for good', async () => {
+    scrolled.length = 0;
+    geometry.top = 0;
+    geometry.height = 5000;
+    const probe = await mountProbe('a', [message('a1')]);
+    const scroll = () => probe.holder.current!;
+
+    fakeTimers.useFakeTimers();
+    await act(async () => { scroll().jumpToBottom('instant'); });
+    expect(scroll().jumpActiveRef.current).toBe(true);
+
+    await act(async () => { fakeTimers.advanceTimersByTime(1000); });
+    expect(scroll().jumpActiveRef.current).toBe(false);
+    fakeTimers.useRealTimers();
+    await unmountProbe(probe);
+  });
+
+  test('content growing while pinned re-pins the tail; while reading it does not', async () => {
+    scrolled.length = 0;
+    geometry.top = 0;
+    geometry.height = 5000;
+    const probe = await mountProbe('a', [message('a1')]);
+    const scroll = () => probe.holder.current!;
+
+    await updateProbe(probe, 'a', [message('a1')]);
+    expect(probe.el.scrollTop).toBe(geometry.height - geometry.viewport);
+
+    // A prepended window / a late layout: the tail moved down by 800px.
+    geometry.height += 800;
+    const observer = StubResizeObserver.latest();
+    scrolled.length = 0;
+    await act(async () => { observer.fire(); });
+    expect(scrolled.length).toBe(1);
+    expect(scrolled[0].behavior).toBe('instant');
+    expect(probe.el.scrollTop).toBe(geometry.height - geometry.viewport);
+
+    // Reading back: the same growth must leave the viewport alone.
+    probe.el.scrollTop = 400;
+    scrolled.length = 0;
+    geometry.height += 800;
+    await act(async () => { StubResizeObserver.latest().fire(); });
+    expect(scrolled.length).toBe(0);
+    expect(probe.el.scrollTop).toBe(400);
+    expect(scroll().followRef.current).toBe(false);
+    await unmountProbe(probe);
+  });
+});