ompchamber 0.3.0

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

@@ -0,0 +1,150 @@
+export const XTERM_LIGHT_THEME = {
+  background: '#f4f1ea',
+  foreground: '#141310',
+  cursor: '#141310',
+  cursorAccent: '#f4f1ea',
+  selectionBackground: '#ded8ce',
+  selectionForeground: '#141310',
+  black: '#141310',
+  red: '#c8321e',
+  green: '#047857',
+  yellow: '#b45309',
+  blue: '#1d4ed8',
+  magenta: '#9333ea',
+  cyan: '#0284c7',
+  white: '#faf8f3',
+  brightBlack: '#78716c',
+  brightRed: '#dc2626',
+  brightGreen: '#059669',
+  brightYellow: '#d97706',
+  brightBlue: '#2563eb',
+  brightMagenta: '#a855f7',
+  brightCyan: '#0ea5e9',
+  brightWhite: '#292524',
+};
+
+export const XTERM_DARK_THEME = {
+  background: '#21252b',
+  foreground: '#abb2bf',
+  cursor: '#528bff',
+  cursorAccent: '#21252b',
+  selectionBackground: '#3e4451',
+  selectionForeground: '#abb2bf',
+  black: '#282c34',
+  red: '#e06c75',
+  green: '#98c379',
+  yellow: '#e5c07b',
+  blue: '#61afef',
+  magenta: '#c678dd',
+  cyan: '#56b6c2',
+  white: '#abb2bf',
+  brightBlack: '#5c6370',
+  brightRed: '#e06c75',
+  brightGreen: '#98c379',
+  brightYellow: '#e5c07b',
+  brightBlue: '#61afef',
+  brightMagenta: '#c678dd',
+  brightCyan: '#56b6c2',
+  brightWhite: '#ffffff',
+};
+
+export function getXtermTheme(isDark: boolean) {
+  return isDark ? XTERM_DARK_THEME : XTERM_LIGHT_THEME;
+}
+
+export const XTERM_THEME = XTERM_DARK_THEME;
+
+export const XTERM_FONT_FAMILY = "'Fira Code', Menlo, Monaco, 'Courier New', monospace";
+
+/** xterm's private render service, read only to size-check before fitting. */
+export interface XtermCore {
+  _core?: { _renderService?: { dimensions?: { css?: { cell?: { width?: number; height?: number } } } } };
+}
+
+/** Interop shape of the dynamically imported xterm modules: the class sits at
+ *  the root export on some builds and under `.default` on others. */
+export interface XtermModule<T> {
+  Terminal?: T;
+  FitAddon?: T;
+  default?: { Terminal?: T; FitAddon?: T } & T;
+}
+
+export function safePatchFitAddon(FitAddonClass: any) {
+  try {
+    const fitProto = FitAddonClass?.prototype;
+    if (fitProto && !fitProto.__safePatched) {
+      fitProto.__safePatched = true;
+      const origPropose = fitProto.proposeDimensions;
+      fitProto.proposeDimensions = function () {
+        try {
+          const core = this._terminal?._core;
+          if (!core?._renderService) return undefined;
+          const dims = core._renderService.dimensions;
+          if (!dims?.css?.cell?.width || !dims?.css?.cell?.height) return undefined;
+          return origPropose?.call(this);
+        } catch {
+          return undefined;
+        }
+      };
+    }
+  } catch {}
+}
+
+const DEFAULT_DIMENSIONS = {
+  device: { char: { width: 9, height: 17, left: 0, top: 0 }, cell: { width: 9, height: 17 }, canvas: { width: 0, height: 0 } },
+  css: { canvas: { width: 0, height: 0 }, cell: { width: 9, height: 17 } }
+};
+
+export function safePatchRenderService(term: any) {
+  try {
+    const core = term?._core;
+    if (core?._renderService) {
+      const proto = Object.getPrototypeOf(core._renderService);
+      const desc = Object.getOwnPropertyDescriptor(proto, 'dimensions');
+      if (desc?.get && !proto.__safePatched) {
+        proto.__safePatched = true;
+        const origGet = desc.get;
+        Object.defineProperty(proto, 'dimensions', {
+          get() {
+            try {
+              if (!this._renderer?.value) return DEFAULT_DIMENSIONS;
+              return origGet.call(this);
+            } catch {
+              return DEFAULT_DIMENSIONS;
+            }
+          },
+          configurable: true,
+          enumerable: true
+        });
+      }
+    }
+  } 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/browser/use-screencast.ts

@@ -0,0 +1,178 @@
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { useSessionStateContext } from '@/client/hooks/workspace/session-state/context';
+import type { BrowserPanelAction, BrowserTabInfo, BrowserViewFrame, BrowserViewState, BrowserViewStatus } from '@/shared/types';
+
+interface UseScreencastResult {
+  status: BrowserViewStatus;
+  url?: string;
+  title?: string;
+  tabs: BrowserTabInfo[];
+  targetId?: string;
+  frameSrc?: string;
+  actions: BrowserPanelAction[];
+  /** Pin the viewer to one tab id; pass an empty string to follow the newest owned tab. */
+  selectTarget: (targetId: string) => void;
+  /** Drop the current SSE connection and open a fresh one. */
+  reconnect: () => void;
+}
+
+const INITIAL_STATE: BrowserViewState = { status: 'agent-offline', tabs: [] };
+const MAX_RETRY_DELAY_MS = 5_000;
+const TOAST_VISIBLE_MS = 4_000;
+const TOAST_DRAIN_MS = 500;
+const MAX_VISIBLE_ACTIONS = 3;
+const MAX_QUEUED_ACTIONS = 16;
+
+type VisibleAction = BrowserPanelAction & { expiresAt: number };
+
+/**
+ * Live screencast of the browser tab this session's agent is driving, plus the
+ * activity toasts parsed from agent intents and live page interactions.
+ *
+ * Opens an EventSource against `/api/browser/:sessionId/stream`, keeps only the
+ * newest frame in memory, and reconnects with capped backoff when the stream is
+ * closed. The server never 404s: status changes arrive as `state` events.
+ *
+ * `active=false` (panel hidden on desktop/mobile) fully closes the EventSource
+ * instead of letting it idle — the server-side viewer/watcher release through
+ * the request-abort close path — and reconnects once when the panel activates.
+ * No reconnect timers run while paused.
+ */
+export function useScreencast(active = true): UseScreencastResult {
+  const { sessionId, ready } = useSessionStateContext();
+  const [state, setState] = useState<BrowserViewState>(INITIAL_STATE);
+  const [frameSrc, setFrameSrc] = useState<string | undefined>(undefined);
+  const [actions, setActions] = useState<VisibleAction[]>([]);
+  const [selectedTarget, setSelectedTarget] = useState<string>('');
+  const [nonce, setNonce] = useState(0);
+
+  const sourceRef = useRef<EventSource | null>(null);
+  const retryRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const currentTargetRef = useRef<string | undefined>(undefined);
+  const attemptRef = useRef(0);
+  const queueRef = useRef<BrowserPanelAction[]>([]);
+
+  const selectTarget = useCallback((targetId: string) => {
+    setSelectedTarget(targetId.trim());
+  }, []);
+
+  const reconnect = useCallback(() => {
+    setNonce((value) => value + 1);
+  }, []);
+
+  // Pace queued actions into visible toasts (one per tick) and expire old ones.
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setActions((prev) => {
+        const now = Date.now();
+        const alive = prev.filter((action) => action.expiresAt > now);
+        const next = queueRef.current.shift();
+        if (!next) return alive.length === prev.length ? prev : alive;
+        return [...alive.slice(-(MAX_VISIBLE_ACTIONS - 1)), { ...next, expiresAt: now + TOAST_VISIBLE_MS }];
+      });
+    }, TOAST_DRAIN_MS);
+    return () => clearInterval(timer);
+  }, []);
+
+  useEffect(() => {
+    setState(INITIAL_STATE);
+    setFrameSrc(undefined);
+    setSelectedTarget('');
+    queueRef.current = [];
+    setActions([]);
+  }, [sessionId]);
+
+  useEffect(() => {
+    if (!ready || !sessionId || !active) return;
+    let disposed = false;
+
+    const connect = () => {
+      if (disposed) return;
+      const query = selectedTarget ? `?target=${encodeURIComponent(selectedTarget)}` : '';
+      const source = new EventSource(`/api/browser/${encodeURIComponent(sessionId)}/stream${query}`);
+      sourceRef.current = source;
+
+      source.addEventListener('open', () => {
+        attemptRef.current = 0;
+      });
+
+      source.addEventListener('state', (event) => {
+        try {
+          const next = JSON.parse((event as MessageEvent).data) as BrowserViewState;
+          if (next.targetId !== currentTargetRef.current) setFrameSrc(undefined);
+          currentTargetRef.current = next.targetId;
+          setState(next);
+          if (next.status !== 'live') setFrameSrc(undefined);
+        } catch {
+          // Ignore malformed state frames.
+        }
+      });
+
+      source.addEventListener('frame', (event) => {
+        try {
+          const frame = JSON.parse((event as MessageEvent).data) as BrowserViewFrame;
+          const current = currentTargetRef.current;
+          if (current && frame.targetId && frame.targetId !== current) return;
+          setFrameSrc(`data:${frame.mimeType};base64,${frame.data}`);
+        } catch {
+          // Ignore malformed frame payloads.
+        }
+      });
+
+      source.addEventListener('action', (event) => {
+        try {
+          const action = JSON.parse((event as MessageEvent).data) as BrowserPanelAction;
+          if (typeof action?.label !== 'string' || !action.label) return;
+          queueRef.current.push(action);
+          if (queueRef.current.length > MAX_QUEUED_ACTIONS) {
+            queueRef.current.splice(0, queueRef.current.length - MAX_QUEUED_ACTIONS);
+          }
+        } catch {
+          // Ignore malformed action payloads.
+        }
+      });
+
+      source.addEventListener('error', () => {
+        // EventSource reconnects on transient drops by itself; only a fatal
+        // close (server closed the stream) needs a fresh instance.
+        if (source.readyState === EventSource.CLOSED) scheduleReconnect();
+      });
+    };
+
+    const scheduleReconnect = () => {
+      if (disposed || retryRef.current) return;
+      const attempt = Math.min(attemptRef.current + 1, MAX_RETRY_DELAY_MS / 1_000);
+      attemptRef.current = attempt;
+      retryRef.current = setTimeout(() => {
+        retryRef.current = null;
+        sourceRef.current?.close();
+        sourceRef.current = null;
+        connect();
+      }, Math.min(attempt * 1_000, MAX_RETRY_DELAY_MS));
+    };
+
+    connect();
+
+    return () => {
+      disposed = true;
+      if (retryRef.current) {
+        clearTimeout(retryRef.current);
+        retryRef.current = null;
+      }
+      sourceRef.current?.close();
+      sourceRef.current = null;
+    };
+  }, [ready, sessionId, selectedTarget, nonce, active]);
+
+  return {
+    status: state.status,
+    url: state.url,
+    title: state.title,
+    tabs: state.tabs,
+    targetId: state.targetId,
+    frameSrc,
+    actions,
+    selectTarget,
+    reconnect,
+  };
+}

package/src/client/hooks/browser/use-user-browser.ts

@@ -0,0 +1,105 @@
+import { useCallback, useState } from 'preact/hooks';
+import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { normalizeUrl } from '@/shared/lib/browser/url';
+
+interface UseUserBrowserResult {
+  /** URL currently loaded in the frame ('' when nothing was opened yet). */
+  url: string;
+  /** Address-bar text; persisted per session. */
+  input: string;
+  setInput: (value: string) => void;
+  /** Bumped to force the frame to reload the same URL. */
+  frameKey: number;
+  loading: boolean;
+  error?: string;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  submit: (raw: string) => void;
+  goBack: () => void;
+  goForward: () => void;
+  reload: () => void;
+  markLoaded: () => void;
+}
+
+const HISTORY_KEY = 'userBrowser.history';
+const HISTORY_INDEX_KEY = 'userBrowser.historyIndex';
+const INPUT_KEY = 'userBrowser.inputUrl';
+
+/**
+ * Address bar + navigation history for the user's iframe browser.
+ *
+ * History is the list of addresses the user typed (in-page navigations inside a
+ * cross-origin frame are not observable), which is exactly what back/forward
+ * need to feel right. Persisted per session so a panel reopen restores the page.
+ */
+export function useUserBrowser(): UseUserBrowserResult {
+  const [history, setHistory] = useSessionState<string[]>(HISTORY_KEY, []);
+  const [historyIndex, setHistoryIndex] = useSessionState<number>(HISTORY_INDEX_KEY, -1);
+  const [input, setInput] = useSessionState<string>(INPUT_KEY, '');
+  const [frameKey, setFrameKey] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | undefined>(undefined);
+
+  const url = historyIndex >= 0 && historyIndex < history.length ? history[historyIndex] ?? '' : '';
+
+  const submit = useCallback(
+    (raw: string) => {
+      const trimmed = raw.trim();
+      if (!trimmed) return;
+      let next: string;
+      try {
+        next = normalizeUrl(trimmed);
+      } catch (normalizeError) {
+        setError(normalizeError instanceof Error ? normalizeError.message : 'Alamat tidak valid');
+        return;
+      }
+      setError(undefined);
+      setLoading(true);
+      const truncated = history.slice(0, historyIndex + 1);
+      const nextHistory = [...truncated, next];
+      setHistory(nextHistory);
+      setHistoryIndex(nextHistory.length - 1);
+      setInput(next);
+      setFrameKey((key) => key + 1);
+    },
+    [history, historyIndex, setHistory, setHistoryIndex, setInput],
+  );
+
+  const goBack = useCallback(() => {
+    if (historyIndex <= 0) return;
+    setLoading(true);
+    setHistoryIndex(historyIndex - 1);
+  }, [historyIndex, setHistoryIndex]);
+
+  const goForward = useCallback(() => {
+    if (historyIndex >= history.length - 1) return;
+    setLoading(true);
+    setHistoryIndex(historyIndex + 1);
+  }, [history.length, historyIndex, setHistoryIndex]);
+
+  const reload = useCallback(() => {
+    if (!url) return;
+    setLoading(true);
+    setFrameKey((key) => key + 1);
+  }, [url]);
+
+  const markLoaded = useCallback(() => {
+    setLoading(false);
+  }, []);
+
+  return {
+    url,
+    input,
+    setInput,
+    frameKey,
+    loading,
+    error,
+    canGoBack: historyIndex > 0,
+    canGoForward: historyIndex >= 0 && historyIndex < history.length - 1,
+    submit,
+    goBack,
+    goForward,
+    reload,
+    markLoaded,
+  };
+}

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

@@ -0,0 +1,181 @@
+import { useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
+import type { ChangeEvent, RefObject } from 'preact/compat';
+import type { TargetedKeyboardEvent } from 'preact';
+import type { ComposerMatchItem, ComposerPickItem, ComposerTrigger } from '@/shared/types';
+import { detectComposerTrigger, insertToken, tokenForItem } from '@/shared/lib/chat/composer/trigger';
+import { filterComposerItems } from '@/shared/lib/chat/composer/filter';
+import { useComposerItems } from '@/client/hooks/chat/composer/items';
+
+export interface UseComposerTriggerOptions {
+  value: string;
+  setValue: (value: string) => void;
+  textareaRef: RefObject<HTMLTextAreaElement>;
+  disabled?: boolean;
+  /** Workspace root to scope `@` file mentions to (null → app root). */
+  rootPath?: string | null;
+}
+
+export interface ComposerTriggerController {
+  trigger: ComposerTrigger | null;
+  isOpen: boolean;
+  matches: ComposerMatchItem[];
+  loading: boolean;
+  error: string | null;
+  activeIndex: number;
+  setActiveIndex: (index: number) => void;
+  handleChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  handleCompositionStart: () => void;
+  handleCompositionEnd: () => void;
+  handleKeyDown: (e: TargetedKeyboardEvent<HTMLTextAreaElement>) => boolean;
+  selectItem: (item: ComposerPickItem) => void;
+  close: () => void;
+  listboxId: string;
+  optionId: (index: number) => string;
+}
+
+function isComposingInput(native: Event): boolean {
+  const input = native as InputEvent;
+  return (
+    input.isComposing === true ||
+    input.inputType?.startsWith('insertFromPaste') === true ||
+    input.inputType?.startsWith('insertFromDrop') === true
+  );
+}
+
+/** Orchestrates the composer `@`-agent / `/`-command autocomplete flow. */
+export function useComposerTrigger(options: UseComposerTriggerOptions): ComposerTriggerController {
+  const { value, setValue, textareaRef, disabled = false, rootPath } = options;
+
+  const [trigger, setTrigger] = useState<ComposerTrigger | null>(null);
+  const [activeIndex, setActiveIndexState] = useState(0);
+  const composingRef = useRef(false);
+  const pendingCaretRef = useRef<number | null>(null);
+
+  const { items, loading, error } = useComposerItems(trigger?.kind ?? null, rootPath ?? null);
+
+  const matches = useMemo(
+    () => filterComposerItems(items, trigger?.query ?? ''),
+    [items, trigger?.query],
+  );
+
+  const clampedIndex = matches.length > 0
+    ? Math.min(Math.max(activeIndex, 0), matches.length - 1)
+    : -1;
+
+  const listboxId = useId();
+
+  const optionId = useCallback((index: number) => `${listboxId}-option-${index}`, [listboxId]);
+
+  const close = useCallback(() => {
+    setTrigger(null);
+    setActiveIndexState(0);
+  }, []);
+
+  const setActiveIndex = useCallback((index: number) => {
+    setActiveIndexState(index);
+  }, []);
+
+  const handleCompositionStart = useCallback(() => {
+    composingRef.current = true;
+  }, []);
+
+  const handleCompositionEnd = useCallback(() => {
+    composingRef.current = false;
+  }, []);
+
+  const handleChange = useCallback(
+    (e: ChangeEvent<HTMLTextAreaElement>) => {
+      const el = e.currentTarget;
+      const text = el.value;
+      const caret = el.selectionStart ?? text.length;
+
+      if (composingRef.current || isComposingInput(e)) {
+        setValue(text);
+        close();
+        return;
+      }
+
+      setValue(text);
+      if (disabled) {
+        close();
+        return;
+      }
+      setTrigger(detectComposerTrigger(text, caret));
+      setActiveIndexState(0);
+    },
+    [setValue, close, disabled],
+  );
+
+  const selectItem = useCallback(
+    (item: ComposerPickItem) => {
+      if (!trigger) return;
+      const next = insertToken(value, trigger, tokenForItem(item));
+      pendingCaretRef.current = next.caret;
+      setValue(next.value);
+      close();
+    },
+    [value, trigger, setValue, close],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: TargetedKeyboardEvent<HTMLTextAreaElement>): boolean => {
+      if (composingRef.current || e.keyCode === 229) return false;
+      if (!trigger) return false;
+
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        if (matches.length > 0) {
+          const delta = e.key === 'ArrowDown' ? 1 : -1;
+          setActiveIndexState((clampedIndex + delta + matches.length) % matches.length);
+        }
+        return true;
+      }
+
+      if ((e.key === 'Enter' || e.key === 'Tab') && matches.length > 0) {
+        e.preventDefault();
+        e.stopPropagation();
+        selectItem(matches[clampedIndex]);
+        return true;
+      }
+
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        close();
+        return true;
+      }
+
+      return false;
+    },
+    [trigger, matches, clampedIndex, selectItem, close],
+  );
+
+  useLayoutEffect(() => {
+    if (pendingCaretRef.current == null) return;
+    const caret = pendingCaretRef.current;
+    pendingCaretRef.current = null;
+    const el = textareaRef.current;
+    if (el) {
+      el.focus();
+      el.setSelectionRange(caret, caret);
+    }
+  }, [value, textareaRef]);
+
+  return {
+    trigger,
+    isOpen: trigger !== null,
+    matches,
+    loading,
+    error,
+    activeIndex: clampedIndex,
+    setActiveIndex,
+    handleChange,
+    handleCompositionStart,
+    handleCompositionEnd,
+    handleKeyDown,
+    selectItem,
+    close,
+    listboxId,
+    optionId,
+  };
+}

package/src/client/hooks/chat/composer/items.ts

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'preact/hooks';
+import type { ComposerPickItem, ComposerPickKind } from '@/shared/types';
+import { loadComposerItems } from '@/shared/lib/chat/composer/client';
+
+interface ComposerItemsState {
+  items: ComposerPickItem[];
+  loading: boolean;
+  error: string | null;
+}
+
+/** Fetch composer pick items for a kind; null kind skips the fetch. */
+export function useComposerItems(
+  kind: ComposerPickKind | null,
+  root?: string | null,
+): ComposerItemsState {
+  const [state, setState] = useState<ComposerItemsState>({ items: [], loading: false, error: null });
+
+  useEffect(() => {
+    if (!kind) {
+      setState({ items: [], loading: false, error: null });
+      return;
+    }
+
+    let cancelled = false;
+    setState({ items: [], loading: true, error: null });
+
+    loadComposerItems(kind, root ?? null)
+      .then((items) => {
+        if (cancelled) return;
+        setState({ items, loading: false, error: null });
+      })
+      .catch((err: unknown) => {
+        if (cancelled) return;
+        setState({
+          items: [],
+          loading: false,
+          error: err instanceof Error ? err.message : String(err),
+        });
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [kind, root]);
+
+  return state;
+}