ompchamber 0.8.0 → 1.0.0

package/src/client/components/workspace/terminal-panel/mount.ts

@@ -0,0 +1,275 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Mounts an xterm instance on a container and keeps it bound to a PTY.
+ *
+ * Extracted from the view component so the mount lifecycle (xterm import, fit
+ * addon, input wiring, observers) stays readable and the component remains a
+ * render layer. Everything the caller must know travels through `callbacks`;
+ * the returned handle is the only way back in.
+ *
+ * Two behaviours here are deliberate:
+ *
+ * - **Attach waits for a real grid.** The terminal panel stays mounted while
+ *   its view is CSS-hidden (that is what keeps a shell alive across panel
+ *   switches), and a hidden container measures 0px — fitting is skipped and
+ *   xterm keeps its 80x24 default. Attaching then would create the shell at a
+ *   size the panel never had, and the retained scrollback would replay at that
+ *   width forever. So attach is driven by the same ResizeObserver that detects
+ *   the panel becoming visible.
+ * - **Raw bytes in, raw bytes out.** `onData`/`onBinary` forward keystrokes
+ *   untouched, and `write` takes a `Uint8Array` so xterm's streaming UTF-8
+ *   decoder reassembles a character split across two PTY reads.
+ * - **xterm and the WebGL addon are dynamically imported on purpose.** xterm is
+ *   ~300 KB and the addon pulls a WebGL context into the panel; both stay out
+ *   of the initial client bundle until the terminal panel is actually opened.
+ *   The module shape varies by build, hence the probe pattern below.
+ */
+
+import type { Terminal } from '@xterm/xterm';
+import type { FitAddon } from '@xterm/addon-fit';
+import type { WebglAddon } from '@xterm/addon-webgl';
+import {
+  getXtermTheme,
+  XTERM_FONT_FAMILY,
+  safePatchFitAddon,
+  safePatchRenderService,
+  type XtermCore,
+  type XtermModule,
+} from '@/client/data/theme/terminal';
+
+export interface XtermMountCallbacks {
+  /** Keystrokes, paste, mouse reports — straight to the PTY. */
+  onInput: (data: string) => void;
+  /** Non-UTF-8 payloads xterm reports separately (some mouse reports). */
+  onBinaryInput: (data: string) => void;
+  /** The grid changed; the PTY must be resized to match. */
+  onGridChange: (cols: number, rows: number) => void;
+  /** The terminal is measurable and knows its size; attach with these. */
+  onReady: (cols: number, rows: number) => void;
+  /** Viewport scrolled away from the live bottom. */
+  onScrolledUpChange: (scrolledUp: boolean) => void;
+}
+
+export interface XtermMount {
+  term: Terminal;
+  fitAddon: FitAddon;
+  /**
+   * Lay the retained scrollback out at the size it was drawn for, then fit the
+   * panel. Grid reports are suppressed until the replay has been consumed.
+   */
+  writeReplay: (bytes: Uint8Array, cols: number, rows: number) => void;
+  dispose: () => void;
+}
+
+/**
+ * Mount xterm inside `container`. Resolves to null when the module could not be
+ * loaded or the component unmounted while importing.
+ */
+export async function mountXterm(
+  container: HTMLElement,
+  isDark: boolean,
+  callbacks: XtermMountCallbacks,
+  isCancelled: () => boolean,
+): Promise<XtermMount | null> {
+  // Dynamic on purpose: xterm is ~300 KB and is only needed once the terminal
+  // panel is actually opened, so it stays out of the initial client bundle
+  // (the module shape varies by build, hence the probes).
+  const xtermModule = (await import('@xterm/xterm')) as unknown as XtermModule<typeof Terminal>;
+  const fitModule = (await import('@xterm/addon-fit')) as unknown as XtermModule<typeof FitAddon>;
+
+  const TerminalClass = xtermModule.Terminal || xtermModule.default?.Terminal || xtermModule.default;
+  const FitAddonClass = fitModule.FitAddon || fitModule.default?.FitAddon || fitModule.default;
+  if (!TerminalClass || !FitAddonClass || isCancelled()) return null;
+
+  safePatchFitAddon(FitAddonClass);
+
+  const term = new TerminalClass({
+    cursorBlink: true,
+    cursorStyle: 'block',
+    fontSize: 12,
+    lineHeight: 1.25,
+    fontFamily: XTERM_FONT_FAMILY,
+    theme: getXtermTheme(isDark),
+    // No `convertEol`: the PTY already emits CRLF, and converting a lone LF
+    // would re-introduce the line-feed doubling a real terminal avoids.
+    scrollback: 10000,
+    scrollSensitivity: 1.5,
+    fastScrollSensitivity: 5,
+    smoothScrollDuration: 0,
+    allowProposedApi: true,
+  }) as Terminal;
+
+  term.open(container);
+  safePatchRenderService(term);
+
+  // WebGL renderer: draws powerline glyphs (U+E0B0 etc.) as full-cell vector
+  // paths, so segmented prompts stay seamless the way a local terminal does.
+  // The DOM renderer draws them as ordinary glyphs inside the font box, which
+  // leaves notches at every segment joint. WebGL can fail (no GPU context,
+  // context-lost), and the DOM renderer is the automatic fallback.
+  try {
+    const webglModule = (await import('@xterm/addon-webgl')) as unknown as {
+      WebglAddon?: typeof WebglAddon;
+      default?: { WebglAddon?: typeof WebglAddon } & typeof WebglAddon;
+    };
+    const WebglAddonClass = webglModule.WebglAddon || webglModule.default?.WebglAddon || webglModule.default;
+    if (WebglAddonClass) {
+      const webgl = new WebglAddonClass() as WebglAddon;
+      webgl.onContextLoss(() => webgl.dispose());
+      term.loadAddon(webgl);
+    }
+  } catch {}
+
+  const fitAddon = new FitAddonClass() as FitAddon;
+  term.loadAddon(fitAddon);
+
+  term.attachCustomKeyEventHandler((event: globalThis.KeyboardEvent) => handleKeyNavigation(term, event));
+
+  const disposables = [
+    term.onScroll(() => {
+      const buffer = term.buffer.active;
+      callbacks.onScrolledUpChange(buffer.viewportY < buffer.baseY);
+    }),
+    term.onData((data: string) => callbacks.onInput(data)),
+    term.onBinary((data: string) => callbacks.onBinaryInput(data)),
+    // FitAddon changes the grid on fit; the shell has to hear about it or a TUI
+    // keeps drawing at the old width. Reports are dropped while the replay is
+    // being laid out: that grid belongs to the recorded history, not the panel.
+    term.onResize(({ cols, rows }) => {
+      if (replaying) return;
+      callbacks.onGridChange(cols, rows);
+    }),
+  ];
+
+  let attached = false;
+  let fitTimer: ReturnType<typeof setTimeout> | null = null;
+  let frame: number | null = null;
+  /**
+   * Set while the retained scrollback is being laid out at its recorded size.
+   * That transient grid is not the panel's, so it must not be reported as a
+   * resize — the shell would answer with a prompt repaint for a size the user
+   * never chose, which is how a reattach used to print a second prompt.
+   */
+  let replaying = false;
+
+  const safeFit = () => {
+    if (isCancelled()) return;
+    if (container.clientWidth <= 0 || container.clientHeight <= 0) return;
+    const core = (term as unknown as XtermCore)._core;
+    const dims = core?._renderService?.dimensions;
+    if (!dims?.css?.cell?.width || !dims?.css?.cell?.height) return;
+    try {
+      fitAddon.fit();
+    } catch {}
+  };
+
+  /** Fit now, once xterm has consumed everything already queued. */
+  const fitAfterWrites = () => {
+    term.write('', () => {
+      if (isCancelled()) return;
+      replaying = false;
+      safeFit();
+    });
+  };
+
+  /**
+   * Lay the retained scrollback out at the size it was drawn for, then converge
+   * on the panel's grid. Re-wrapping history at another width leaves wrapped
+   * fragments the shell's own redraw never clears.
+   */
+  const writeReplay = (bytes: Uint8Array, cols: number, rows: number) => {
+    replaying = true;
+    if (term.cols !== cols || term.rows !== rows) term.resize(cols, rows);
+    if (bytes.length === 0) {
+      fitAfterWrites();
+      return;
+    }
+    term.write(bytes, fitAfterWrites);
+  };
+
+  const attachIfSized = () => {
+    if (attached || isCancelled()) return;
+    if (container.clientWidth <= 0 || container.clientHeight <= 0) return;
+    const core = (term as unknown as XtermCore)._core;
+    if (!core?._renderService?.dimensions?.css?.cell?.width) return;
+    attached = true;
+    callbacks.onReady(term.cols, term.rows);
+    term.focus();
+  };
+
+  const resizeObserver = new ResizeObserver(() => {
+    if (fitTimer) clearTimeout(fitTimer);
+    fitTimer = setTimeout(() => {
+      safeFit();
+      // A panel that was hidden at mount becomes measurable here, which is when
+      // the shell should be created — at its real size.
+      attachIfSized();
+    }, 35);
+  });
+  resizeObserver.observe(container);
+
+  const touch = attachTouchScroll(container, term);
+
+  // The container may already be measurable (the view was active at mount), in
+  // which case the observer never fires a first time.
+  frame = requestAnimationFrame(() => {
+    safeFit();
+    attachIfSized();
+  });
+
+  return {
+    term,
+    fitAddon,
+    writeReplay,
+    dispose() {
+      if (frame !== null) cancelAnimationFrame(frame);
+      clearTimeout(fitTimer ?? undefined);
+      touch();
+      for (const disposable of disposables) disposable.dispose();
+      resizeObserver.disconnect();
+      try {
+        fitAddon.dispose();
+      } catch {}
+      try {
+        term.dispose();
+      } catch {}
+    },
+  };
+}
+
+/** Shift+PageUp/Home/End scroll the viewport instead of reaching the shell. */
+function handleKeyNavigation(term: Terminal, event: globalThis.KeyboardEvent): boolean {
+  if (event.type !== 'keydown' || !event.shiftKey) return true;
+  if (event.key === 'PageUp') { term.scrollPages(-1); return false; }
+  if (event.key === 'PageDown') { term.scrollPages(1); return false; }
+  if (event.key === 'Home') { term.scrollToTop(); return false; }
+  if (event.key === 'End') { term.scrollToBottom(); return false; }
+  if (event.key === 'ArrowUp') { term.scrollLines(-1); return false; }
+  if (event.key === 'ArrowDown') { term.scrollLines(1); return false; }
+  return true;
+}
+
+/** Touch drags scroll the scrollback; xterm has no touch handling of its own. */
+function attachTouchScroll(container: HTMLElement, term: Terminal): () => void {
+  let startY = 0;
+  const onStart = (event: globalThis.TouchEvent) => {
+    if (event.touches.length === 1) startY = event.touches[0].clientY;
+  };
+  const onMove = (event: globalThis.TouchEvent) => {
+    if (event.touches.length !== 1) return;
+    const deltaY = startY - event.touches[0].clientY;
+    if (Math.abs(deltaY) < 16) return;
+    term.scrollLines(Math.trunc(deltaY / 16));
+    startY = event.touches[0].clientY;
+  };
+  container.addEventListener('touchstart', onStart, { passive: true });
+  container.addEventListener('touchmove', onMove, { passive: true });
+  return () => {
+    container.removeEventListener('touchstart', onStart);
+    container.removeEventListener('touchmove', onMove);
+  };
+}

package/src/client/data/theme/terminal.ts

@@ -54,7 +54,33 @@ export function getXtermTheme(isDark: boolean) {
 
 export const XTERM_THEME = XTERM_DARK_THEME;
 
-export const XTERM_FONT_FAMILY = "'Fira Code', Menlo, Monaco, 'Courier New', monospace";
+/**
+ * Font stack for the terminal canvas.
+ *
+ * The glyph fallbacks after the text faces are load-bearing. A shell prompt is
+ * usually drawn with private-use symbols (powerline separators, devicons,
+ * Material Design icons) that **no** coding webfont contains — `@fontsource/
+ * fira-code`'s latin subset maps 226 codepoints and not one of them is above
+ * U+FFFF — so without a face that supplies them the browser paints a hollow
+ * tofu box for every prompt segment. The names below cover the Nerd Font
+ * families a user is most likely to have installed (plus the *fontconfig*
+ * symbol faces on Linux); a face that is absent is simply skipped by the
+ * normal fallback chain, so listing many costs nothing.
+ *
+ * This is the same shape OpenChamber ships (`TERMINAL_GLYPH_FALLBACKS` in its
+ * `ghostty/surface.ts`), which additionally bundles `SymbolsNerdFontMono` as a
+ * webfont so the coverage never depends on the machine.
+ *
+ * Only glyphs the text face lacks reach these entries, so Latin metrics are
+ * untouched — verified: `A`/`m`/`W` keep identical advance and ink.
+ */
+export const XTERM_GLYPH_FALLBACKS =
+  "'FiraCode Nerd Font Mono', 'FiraCode Nerd Font', 'JetBrainsMono Nerd Font', " +
+  "'JetBrainsMono NF', 'JetBrains Mono Nerd Font', 'Hack Nerd Font', 'MesloLGS NF', " +
+  "'MesloLGM Nerd Font', 'CaskaydiaCove Nerd Font', 'SauceCodePro Nerd Font', " +
+  "'Symbols Nerd Font Mono', 'Symbols Nerd Font', 'PowerlineSymbols'";
+
+export const XTERM_FONT_FAMILY = `'Fira Code', ${XTERM_GLYPH_FALLBACKS}, Menlo, Monaco, 'Courier New', monospace`;
 
 /** xterm's private render service, read only to size-check before fitting. */
 export interface XtermCore {
@@ -120,31 +146,3 @@ export function safePatchRenderService(term: any) {
     }
   } catch {}
 }
-
-let terminalSessionOutput = '';
-
-export function getTerminalSessionOutput(): string {
-  return terminalSessionOutput;
-}
-
-export function appendTerminalSessionOutput(chunk: string): void {
-  terminalSessionOutput += chunk;
-  if (terminalSessionOutput.length > 250000) {
-    terminalSessionOutput = terminalSessionOutput.slice(-200000);
-  }
-}
-
-export function clearTerminalSessionOutput(): void {
-  terminalSessionOutput = '';
-}
-
-const TERMINAL_OUTPUT_SNAPSHOT_LIMIT = 8000;
-
-export function getTerminalOutputSnapshot(): string {
-  if (terminalSessionOutput.length <= TERMINAL_OUTPUT_SNAPSHOT_LIMIT) return terminalSessionOutput;
-  return terminalSessionOutput.slice(-TERMINAL_OUTPUT_SNAPSHOT_LIMIT);
-}
-
-export function setTerminalOutputSnapshot(value: string): void {
-  terminalSessionOutput = value;
-}

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

@@ -116,11 +116,28 @@ export function SidebarDataProvider({ children, initialFolders = [] }: { childre
   const value = useMemo<SidebarDataHandle>(() => {
     const data = fetcher.data;
     const seen = seenRef.current;
+    // A session that streams again earns a fresh badge lifecycle: forget the
+    // ack from an earlier run. Without this, a session opened with a terminal
+    // badge stays stripped for the whole mount — its spinner never renders no
+    // matter how many times the list refetches, and only a page reload (fresh
+    // mount) brings it back.
+    if (seen.size && data?.folders) {
+      for (const folder of data.folders) {
+        for (const session of folder.sessions ?? []) {
+          if (session.streamStatus === 'stream') seen.delete(String(session.id));
+        }
+      }
+    }
     return {
       folders: ((data?.folders ?? initialFolders) as WorkspaceFolderData[])
-        // Optimistic badge strip for sessions marked seen this mount.
+        // Optimistic badge strip for sessions marked seen this mount. NEVER
+        // strip a live `stream` row — the spinner must always render.
         .map((f) => seen.size
-          ? { ...f, sessions: (f.sessions ?? []).map((s) => (seen.has(String(s.id)) ? { ...s, streamStatus: undefined } : s)) }
+          ? { ...f, sessions: (f.sessions ?? []).map((s) => (
+              seen.has(String(s.id)) && s.streamStatus && s.streamStatus !== 'stream'
+                ? { ...s, streamStatus: undefined }
+                : s
+            )) }
           : f),
       isMock: data?.isMock ?? false,
       initializing: !hasLoaded,

package/src/client/hooks/chat/omp/session-sidebar-controller.ts

@@ -62,7 +62,7 @@ export interface SessionSidebarController {
   sortOption: SessionSortOption;
   handleSortChange: (opt: SessionSortOption) => void;
   processedFolders: WorkspaceFolderData[];
-  sessionStatus: Record<string, 'stream' | 'finish' | 'abort' | 'error'>;
+  sessionStatus: Record<string, 'stream' | 'finish' | 'abort'>;
   handleSelectSession: (id: number | string) => void;
 }
 

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

@@ -28,7 +28,9 @@ export interface ChatTimelineActionsDeps {
   sessionId: string | null;
   appSettings: Record<string, any>;
   messageQueue: QueuedMessage[];
-  setMessageQueue: (updater: SetStateAction<QueuedMessage[]>) => void;
+  /** Server-backed per-item queue ops (append/remove/reorder). */
+  enqueueMessage: (item: Omit<QueuedMessage, 'id'>) => void;
+  removeMessage: (id: string) => void;
   executeSend: (text: string, attachments: Attachment[], options?: { model?: QueuedMessageModel | null }) => Promise<void>;
   steerOmpAgent: (text: string, attachments: Attachment[]) => Promise<void>;
   ompAgent: OmpAgentHandle;
@@ -74,7 +76,8 @@ export function useChatTimelineActions(deps: ChatTimelineActionsDeps): ChatTimel
     sessionId,
     appSettings,
     messageQueue,
-    setMessageQueue,
+    enqueueMessage,
+    removeMessage,
     executeSend,
     steerOmpAgent,
     ompAgent,
@@ -123,41 +126,36 @@ export function useChatTimelineActions(deps: ChatTimelineActionsDeps): ChatTimel
         return;
       }
       const composerPick = composerModelRef.current;
-      const queuedItem: QueuedMessage = {
-        id: `queue-${Date.now()}`,
-        text: textToSend,
-        attachments,
-        // Snapshot the composer's model/thinking plus the live access mode so
-        // auto-delivery runs the item with exactly these settings.
-        model: composerPick
-          ? { ...composerPick, accessMode: accessModeRef.current }
-          : null,
-      };
-      // Both modes: hold the follow-up in the client queue. The panel is the
-      // source of truth (editable, removable, survives reload via the
-      // session-state blob); delivery happens when the run ends — the
-      // auto-process effect sends the head item. For omp this replaces the
-      // old immediate `follow_up` RPC, whose server-side queue the client
-      // could never cancel (Stop kept executing it).
+      // Snapshot the composer's model/thinking plus the live access mode so
+      // server-side auto-delivery runs the item with exactly these settings.
+      const model = composerPick
+        ? { ...composerPick, accessMode: accessModeRef.current }
+        : null;
+      // Both modes: the item is stored server-side (`queued_messages`) and the
+      // panel is a view of it. Delivery happens when the run ends — the
+      // wrapper's terminal `agent_end` claims the head and dispatches it.
       setInputValue('');
-      setMessageQueue(prev => [...prev, queuedItem]);
+      enqueueMessage({ text: textToSend, attachments, model });
       return;
     }
 
     setInputValue('');
     executeSend(textToSend, attachments);
-  }, [inputValue, isGenerating, executeSend, setMessageQueue, isOmpSession, appSettings, steerOmpAgent, setInputValue, abortControllerRef, setGenerating, stopHoldRef, composerModelRef, accessModeRef]);
+  }, [inputValue, isGenerating, executeSend, enqueueMessage, isOmpSession, appSettings, steerOmpAgent, setInputValue, abortControllerRef, setGenerating, stopHoldRef, composerModelRef, accessModeRef]);
 
   const handleEditQueueItem = useCallback((item: QueuedMessage) => {
-    setMessageQueue(q => q.filter(i => i.id !== item.id));
+    // Lift the text into the composer and drop the row. If the user never
+    // re-submits, the delete (below) already removed it — the old flow had a
+    // dead window here where removing from the local list was the only edit.
     setInputValue(item.text);
     setInputAttachments(item.attachments);
-  }, [setMessageQueue, setInputValue, setInputAttachments]);
+    removeMessage(item.id);
+  }, [removeMessage, setInputValue, setInputAttachments]);
 
   const handleSendNowQueueItem = useCallback(async (item: QueuedMessage) => {
-    // Explicit delivery also lifts the Stop hold.
+    // Explicit delivery also lifts the Stop hold (mock path).
     stopHoldRef.current = false;
-    setMessageQueue(q => q.filter(i => i.id !== item.id));
+    removeMessage(item.id);
 
     if (isGenerating) {
       if (isOmpSession) {
@@ -173,7 +171,7 @@ export function useChatTimelineActions(deps: ChatTimelineActionsDeps): ChatTimel
     } else {
       executeSend(item.text, item.attachments, { model: item.model });
     }
-  }, [isGenerating, executeSend, setMessageQueue, isOmpSession, steerOmpAgent, abortControllerRef, setGenerating, stopHoldRef]);
+  }, [isGenerating, executeSend, removeMessage, isOmpSession, steerOmpAgent, abortControllerRef, setGenerating, stopHoldRef]);
 
   const handleUndo = useCallback(async (msgId: string, content?: string): Promise<boolean> => {
     if (isGenerating) {

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

@@ -177,10 +177,11 @@ export function useChatTimeline({ folders = [], appSettings = {} }: UseChatTimel
 
   const {
     messageQueue,
-    setMessageQueue,
+    enqueueMessage,
+    removeMessage,
+    reorderMessages,
     steeringQueue,
     setSteeringQueue,
-    removeDeliveredFromQueue,
   } = useChatTimelineQueue(sessionId);
   const {
     pending: extensionDialogs,
@@ -190,7 +191,6 @@ export function useChatTimeline({ folders = [], appSettings = {} }: UseChatTimel
   } = useExtensionDialogQueue(sessionId);
 
   const ompAgent = useOmpAgent(isOmpSession ? sessionId : null, createOmpAgentCallbacks({
-    removeDeliveredFromQueue,
     setGenerating,
     setGeneratingVerb,
     scrollToBottom,
@@ -236,21 +236,11 @@ export function useChatTimeline({ folders = [], appSettings = {} }: UseChatTimel
     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]);
+  // Queue auto-delivery moved server-side: the wrapper's terminal `agent_end`
+  // schedules the next queued prompt (`lib/queue/delivery.server.ts`), with a
+  // transactional head claim so no reload/tab race can double-send or wipe the
+  // table. The client panel is a view; the mount nudge lives in the queue
+  // hook. `stopHoldRef` remains only for the mock path below.
 
   const {
     handleSend,
@@ -271,7 +261,8 @@ export function useChatTimeline({ folders = [], appSettings = {} }: UseChatTimel
     sessionId,
     appSettings,
     messageQueue,
-    setMessageQueue,
+    enqueueMessage,
+    removeMessage,
     executeSend,
     steerOmpAgent,
     ompAgent,
@@ -303,7 +294,8 @@ export function useChatTimeline({ folders = [], appSettings = {} }: UseChatTimel
     loadOlder,
     generatingVerb,
     messageQueue,
-    setMessageQueue,
+    removeMessage,
+    reorderMessages,
     steeringQueue,
     setSteeringQueue,
     inputValue,