ompchamber 0.3.0

package/src/shared/lib/browser/cdp.ts

@@ -0,0 +1,201 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Minimal dependency-free Chrome DevTools Protocol client over the process-wide
+ * `WebSocket` global (Node >= 22). It implements only what the browser viewer
+ * needs: numeric JSON-RPC request/response correlation, flattened session
+ * routing (`sessionId` on commands and events), and event fan-out. No
+ * Playwright/Puppeteer — CDP is a stable wire protocol.
+ */
+
+import { readString } from '@/shared/lib/browser/util';
+import { isRecord } from '@/shared/lib/util/guards';
+
+const DEFAULT_TIMEOUT_MS = 15_000;
+
+type CdpEventHandler = (method: string, params: unknown, sessionId?: string) => void;
+
+interface PendingCommand {
+  method: string;
+  resolve: (value: unknown) => void;
+  reject: (error: Error) => void;
+  timer: ReturnType<typeof setTimeout>;
+}
+
+export class CdpConnection {
+  private readonly ws: WebSocket;
+  private readonly timeoutMs: number;
+  private readonly pending = new Map<number, PendingCommand>();
+  private readonly eventHandlers = new Set<CdpEventHandler>();
+  private readonly closeHandlers = new Set<() => void>();
+  private nextId = 1;
+  private _closed = false;
+
+  private constructor(ws: WebSocket, timeoutMs: number) {
+    this.ws = ws;
+    this.timeoutMs = timeoutMs;
+    ws.addEventListener('message', (event) => this.handleMessage(event.data));
+    ws.addEventListener('close', () => this.handleClose());
+    ws.addEventListener('error', () => this.handleClose());
+  }
+
+  /** Open a CDP WebSocket; resolves once connected or rejects on timeout/error. */
+  static connect(wsUrl: string, opts: { timeoutMs?: number } = {}): Promise<CdpConnection> {
+    const timeoutMs = opts.timeoutMs ?? DEFAULT_TIMEOUT_MS;
+    return new Promise((resolve, reject) => {
+      let settled = false;
+      const ws = new WebSocket(wsUrl);
+      const connection = new CdpConnection(ws, timeoutMs);
+      const timer = setTimeout(() => {
+        if (settled) return;
+        settled = true;
+        safeClose(ws);
+        reject(new Error(`CDP connect timed out after ${timeoutMs}ms: ${wsUrl}`));
+      }, timeoutMs);
+      timer.unref?.();
+      ws.addEventListener(
+        'open',
+        () => {
+          if (settled) {
+            safeClose(ws);
+            return;
+          }
+          settled = true;
+          clearTimeout(timer);
+          resolve(connection);
+        },
+        { once: true },
+      );
+      ws.addEventListener(
+        'error',
+        () => {
+          if (settled) return;
+          settled = true;
+          clearTimeout(timer);
+          reject(new Error(`CDP connect failed: ${wsUrl}`));
+        },
+        { once: true },
+      );
+    });
+  }
+
+  get closed(): boolean {
+    return this._closed;
+  }
+
+  /** Send a CDP command; rejects on protocol error, socket close, or timeout. */
+  send(method: string, params: Record<string, unknown> = {}, sessionId?: string): Promise<unknown> {
+    if (this._closed) return Promise.reject(new Error('CDP connection is closed'));
+    const id = this.nextId++;
+    return new Promise<unknown>((resolve, reject) => {
+      const entry: PendingCommand = {
+        method,
+        resolve,
+        reject,
+        timer: setTimeout(() => {
+          if (this.pending.get(id) !== entry) return;
+          this.pending.delete(id);
+          reject(new Error(`CDP command timed out after ${this.timeoutMs}ms: ${method}`));
+        }, this.timeoutMs),
+      };
+      entry.timer.unref?.();
+      this.pending.set(id, entry);
+      const frame: Record<string, unknown> = { id, method, params };
+      if (sessionId) frame.sessionId = sessionId;
+      try {
+        this.ws.send(JSON.stringify(frame));
+      } catch (error) {
+        this.pending.delete(id);
+        clearTimeout(entry.timer);
+        reject(error instanceof Error ? error : new Error(String(error)));
+      }
+    });
+  }
+
+  onEvent(handler: CdpEventHandler): () => void {
+    this.eventHandlers.add(handler);
+    return () => {
+      this.eventHandlers.delete(handler);
+    };
+  }
+
+  /** Run `handler` once when the socket closes (already-closed → immediate no-op). */
+  onClose(handler: () => void): () => void {
+    if (this._closed) return () => {};
+    this.closeHandlers.add(handler);
+    return () => {
+      this.closeHandlers.delete(handler);
+    };
+  }
+
+  close(): void {
+    if (this._closed) return;
+    this.handleClose();
+    safeClose(this.ws);
+  }
+
+  private handleMessage(data: unknown): void {
+    if (this._closed || typeof data !== 'string') return;
+    let message: unknown;
+    try {
+      message = JSON.parse(data);
+    } catch {
+      return;
+    }
+    if (!isRecord(message)) return;
+    if (typeof message.id === 'number') {
+      const entry = this.pending.get(message.id);
+      if (!entry) return;
+      this.pending.delete(message.id);
+      clearTimeout(entry.timer);
+      if (isRecord(message.error)) {
+        const text = readString(message.error, 'message') ?? 'CDP error';
+        entry.reject(new Error(`${entry.method}: ${text}`));
+      } else {
+        entry.resolve(message.result);
+      }
+      return;
+    }
+    if (typeof message.method !== 'string') return;
+    const params = message.params;
+    const sessionId = typeof message.sessionId === 'string' ? message.sessionId : undefined;
+    for (const handler of this.eventHandlers) {
+      try {
+        handler(message.method, params, sessionId);
+      } catch {
+        // A subscriber bug must never kill the protocol reader.
+      }
+    }
+  }
+
+  private handleClose(): void {
+    if (this._closed) return;
+    this._closed = true;
+    const error = new Error('CDP connection closed');
+    for (const entry of this.pending.values()) {
+      clearTimeout(entry.timer);
+      entry.reject(error);
+    }
+    this.pending.clear();
+    this.eventHandlers.clear();
+    for (const handler of this.closeHandlers) {
+      try {
+        handler();
+      } catch {
+        // Close subscribers are independent; one throwing must not skip the rest.
+      }
+    }
+    this.closeHandlers.clear();
+  }
+}
+
+function safeClose(ws: WebSocket): void {
+  try {
+    ws.close();
+  } catch {
+    // Socket already closing/closed.
+  }
+}

package/src/shared/lib/browser/connection.ts

@@ -0,0 +1,81 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Process-wide refcounted pool of CDP connections, keyed by browser ws url.
+ * Several viewer sessions can share the project-shared Chromium; the socket is
+ * only closed when the last viewer detaches. Stored on `globalThis` so it
+ * survives Vite HMR without leaking duplicate sockets.
+ */
+
+import { CdpConnection } from '@/shared/lib/browser/cdp';
+
+interface SharedConnection {
+  conn: CdpConnection;
+  refs: number;
+}
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __ompBrowserConnections: Map<string, SharedConnection> | undefined;
+  // Single-flight guard: concurrent acquires for one ws url must share one
+  // socket instead of racing to open two and leaking the loser.
+  // eslint-disable-next-line no-var
+  var __ompBrowserPendingConnects: Map<string, Promise<CdpConnection>> | undefined;
+}
+
+function registry(): Map<string, SharedConnection> {
+  if (!globalThis.__ompBrowserConnections) globalThis.__ompBrowserConnections = new Map();
+  return globalThis.__ompBrowserConnections;
+}
+
+function pendingConnects(): Map<string, Promise<CdpConnection>> {
+  if (!globalThis.__ompBrowserPendingConnects) globalThis.__ompBrowserPendingConnects = new Map();
+  return globalThis.__ompBrowserPendingConnects;
+}
+
+/** Get a live connection for `wsUrl` or open one; increments the refcount. */
+export async function acquireConnection(wsUrl: string): Promise<CdpConnection> {
+  const connections = registry();
+  const existing = connections.get(wsUrl);
+  if (existing && !existing.conn.closed) {
+    existing.refs += 1;
+    return existing.conn;
+  }
+
+  const pending = pendingConnects();
+  let connecting = pending.get(wsUrl);
+  if (!connecting) {
+    connecting = CdpConnection.connect(wsUrl).finally(() => pending.delete(wsUrl));
+    pending.set(wsUrl, connecting);
+  }
+  const conn = await connecting;
+
+  // Another caller may have completed the same connect and registered it first.
+  const current = connections.get(wsUrl);
+  if (current && !current.conn.closed) {
+    current.refs += 1;
+    return current.conn;
+  }
+
+  const entry: SharedConnection = { conn, refs: 1 };
+  connections.set(wsUrl, entry);
+  // Drop a dead entry so the next acquire opens a fresh socket.
+  conn.onClose(() => {
+    if (connections.get(wsUrl) === entry) connections.delete(wsUrl);
+  });
+  return conn;
+}
+
+/** Release one reference; closes the socket once the refcount reaches zero. */
+export function releaseConnection(wsUrl: string, conn: CdpConnection): void {
+  const connections = registry();
+  const entry = connections.get(wsUrl);
+  if (!entry || entry.conn !== conn) return;
+  entry.refs -= 1;
+  if (entry.refs > 0) return;
+  connections.delete(wsUrl);
+  conn.close();
+}

package/src/shared/lib/browser/observer.ts

@@ -0,0 +1,129 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Live interaction observer for the viewed page.
+ *
+ * The screencast shows the page but not the agent's clicks and keystrokes, so
+ * on attach we install a passive capture-phase listener set through CDP
+ * (`Runtime.addBinding` + an injected script) that reports real DOM
+ * interactions back over the same flattened session. The listener only reads
+ * event metadata and posts a small JSON payload — it never changes page state.
+ *
+ * Navigation and other page-level signals are handled by the viewer's CDP event
+ * stream (Page.frameNavigated), not here.
+ */
+
+import { CdpConnection } from '@/shared/lib/browser/cdp';
+import { readString } from '@/shared/lib/browser/util';
+import { isRecord } from '@/shared/lib/util/guards';
+import type { BrowserActionKind } from '@/shared/types';
+import type { BrowserActionDraft } from '@/shared/lib/browser/activity';
+
+/** Page-context function the injected script calls; CDP surfaces it as Runtime.bindingCalled. */
+export const OBSERVER_BINDING = '__ompChamberAction';
+
+const OBSERVER_KINDS = new Set<BrowserActionKind>(['click', 'type', 'press', 'submit']);
+
+/**
+ * Passive DOM listeners installed in the top frame. Kept as a plain string
+ * because it is injected verbatim through `Page.addScriptToEvaluateOnNewDocument`
+ * and `Runtime.evaluate`. Special keys are reported immediately; typing is
+ * debounced to one toast per burst.
+ */
+const OBSERVER_SOURCE = [
+  '(function () {',
+  '  if (window.top !== window) return;',
+  '  if (window.__ompChamberObserver) return;',
+  '  window.__ompChamberObserver = true;',
+  `  var BINDING = ${JSON.stringify(OBSERVER_BINDING)};`,
+  '  function emit(kind, label) {',
+  '    try { if (typeof window[BINDING] === "function") window[BINDING](JSON.stringify({ kind: kind, label: label })); } catch (error) { /* binding unavailable or page CSP blocked it — interaction reporting is best-effort */ }',
+  '  }',
+  '  function describe(element) {',
+  '    if (!element || !element.tagName) return "elemen";',
+  '    var tag = String(element.tagName).toLowerCase();',
+  '    var raw = element.getAttribute && (element.getAttribute("aria-label") || element.getAttribute("title") || element.getAttribute("placeholder"));',
+  '    if (!raw) raw = element.innerText || element.value || "";',
+  '    var text = String(raw).replace(/\\s+/g, " ").trim().slice(0, 48);',
+  '    return text ? tag + " \\"" + text + "\\"" : tag;',
+  '  }',
+  '  document.addEventListener("click", function (event) { emit("click", "Mengklik " + describe(event.target)); }, true);',
+  '  var inputTimer = null;',
+  '  var inputElement = null;',
+  '  var lastInputLabel = "";',
+  '  function emitInput() {',
+  '    if (inputTimer) { clearTimeout(inputTimer); inputTimer = null; }',
+  '    if (!inputElement) return;',
+  '    var value = inputElement.value === undefined || inputElement.value === null ? "" : String(inputElement.value);',
+  '    var label = value ? "Mengetik \\"" + value.slice(0, 40) + "\\"" : "Menghapus teks";',
+  '    if (label === lastInputLabel) return;',
+  '    lastInputLabel = label;',
+  '    emit("type", label);',
+  '  }',
+  '  document.addEventListener("input", function (event) {',
+  '    if (event.target) inputElement = event.target;',
+  '    if (inputTimer) clearTimeout(inputTimer);',
+  '    inputTimer = setTimeout(emitInput, 450);',
+  '  }, true);',
+  '  document.addEventListener("change", function () { emitInput(); }, true);',
+  '  var SPECIAL_KEYS = ["Enter", "Escape", "Tab", "Backspace", "Delete", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown", "Home", "End"];',
+  '  document.addEventListener("keydown", function (event) {',
+  '    if (SPECIAL_KEYS.indexOf(event.key) === -1) return;',
+  '    emitInput();',
+  '    emit("press", "Menekan " + event.key);',
+  '  }, true);',
+  '  document.addEventListener("submit", function () { emit("submit", "Mengirim form"); }, true);',
+  '})();',
+].join('\n');
+
+export interface ObserverHandle {
+  dispose: () => void;
+}
+
+/** Validate one `Runtime.bindingCalled` payload from the injected observer. */
+export function parseObserverPayload(payload: unknown): BrowserActionDraft | null {
+  if (typeof payload !== 'string') return null;
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(payload);
+  } catch {
+    return null;
+  }
+  if (!isRecord(parsed)) return null;
+  const kind = readString(parsed, 'kind');
+  const label = readString(parsed, 'label');
+  if (!kind || !label) return null;
+  if (!OBSERVER_KINDS.has(kind as BrowserActionKind)) return null;
+  return { kind: kind as BrowserActionKind, label: label.slice(0, 120) };
+}
+
+/**
+ * Install the observer on an attached page session. Every step is best-effort:
+ * a page that refuses evaluation simply yields no interaction toasts while the
+ * screencast keeps working.
+ */
+export async function installObserver(conn: CdpConnection, sessionId: string): Promise<ObserverHandle> {
+  await Promise.all([
+    conn.send('Runtime.enable', {}, sessionId).catch(() => {}),
+    conn.send('Runtime.addBinding', { name: OBSERVER_BINDING }, sessionId).catch(() => {}),
+    conn.send('Page.enable', {}, sessionId).catch(() => {}),
+  ]);
+  const [added] = await Promise.all([
+    conn.send('Page.addScriptToEvaluateOnNewDocument', { source: OBSERVER_SOURCE }, sessionId).catch(() => undefined),
+    conn.send('Runtime.evaluate', { expression: OBSERVER_SOURCE, returnByValue: false }, sessionId).catch(() => {}),
+  ]);
+  const scriptId = isRecord(added) ? readString(added, 'identifier') : undefined;
+  return {
+    dispose: () => {
+      if (scriptId) {
+        void conn
+          .send('Page.removeScriptToEvaluateOnNewDocument', { identifier: scriptId }, sessionId)
+          .catch(() => {});
+      }
+      void conn.send('Runtime.removeBinding', { name: OBSERVER_BINDING }, sessionId).catch(() => {});
+    },
+  };
+}

package/src/shared/lib/browser/page-context.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Sibling-panel bridge that hands the AGENT browser's current page to the chat
+ * composer. The agent panel and the chat timeline are separate trees, so the
+ * page is passed through a DOM event rather than shared React state.
+ */
+
+import type { BrowserPageContext } from '@/shared/types';
+
+/** DOM event the agent browser panel dispatches to append page context to the draft. */
+export const BROWSER_INCLUDE_PAGE_EVENT = 'omp:browser-include-page';
+
+export function emitBrowserPageContext(detail: BrowserPageContext): void {
+  if (typeof window === 'undefined') return;
+  window.dispatchEvent(new CustomEvent<BrowserPageContext>(BROWSER_INCLUDE_PAGE_EVENT, { detail }));
+}

package/src/shared/lib/browser/targets.test.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { describe, expect, test } from 'bun:test';
+
+import { ownedPages, pickTargetId, type PageTarget } from '@/shared/lib/browser/targets';
+
+const page = (targetId: string): PageTarget => ({ targetId, url: `https://${targetId}.example`, title: targetId });
+
+// The daemon is project-shared: `Target.getTargets` lists every session's tabs.
+const live = [page('other-1'), page('mine-1'), page('other-2'), page('mine-2')];
+
+describe('pickTargetId', () => {
+  test('picks the newest owned page, not the newest page overall', () => {
+    expect(pickTargetId(live, ['mine-1', 'mine-2'])).toBe('mine-2');
+  });
+
+  test('never falls back to another session page', () => {
+    expect(pickTargetId(live, [])).toBeNull();
+    expect(pickTargetId(live, ['mine-gone'])).toBeNull();
+  });
+
+  test('honours an explicit pin only while that page is live and owned', () => {
+    expect(pickTargetId(live, ['mine-1', 'mine-2'], 'mine-1')).toBe('mine-1');
+    expect(pickTargetId(live, ['mine-1', 'mine-2'], 'other-2')).toBe('mine-2');
+    expect(pickTargetId(live, ['mine-1', 'mine-2'], 'closed-tab')).toBe('mine-2');
+  });
+
+  test('returns null with no live pages', () => {
+    expect(pickTargetId([], ['mine-1'])).toBeNull();
+  });
+});
+
+describe('ownedPages', () => {
+  test('keeps only owned pages, in registry order', () => {
+    expect(ownedPages(live, ['mine-2', 'mine-1']).map((target) => target.targetId)).toEqual(['mine-2', 'mine-1']);
+  });
+
+  test('drops registry ids that are no longer live pages', () => {
+    expect(ownedPages(live, ['mine-1', 'mine-gone']).map((target) => target.targetId)).toEqual(['mine-1']);
+    expect(ownedPages(live, [])).toEqual([]);
+  });
+});

package/src/shared/lib/browser/targets.ts

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Pure helpers over `Target.getTargets` / `Target.targetInfoChanged` payloads.
+ * Only `type === 'page'` entries are real browser tabs; devtools, service
+ * workers, and browser-internal targets are ignored.
+ */
+
+import { readString } from '@/shared/lib/browser/util';
+import { isRecord } from '@/shared/lib/util/guards';
+
+export interface PageTarget {
+  targetId: string;
+  url: string;
+  title: string;
+}
+
+/** Parse the `Target.getTargets` result into page targets (in CDP order). */
+export function parsePageTargets(result: unknown): PageTarget[] {
+  const infos = isRecord(result) && Array.isArray(result.targetInfos) ? result.targetInfos : [];
+  const pages: PageTarget[] = [];
+  for (const info of infos) {
+    if (!isRecord(info) || info.type !== 'page') continue;
+    const targetId = readString(info, 'targetId');
+    if (!targetId) continue;
+    pages.push({ targetId, url: readString(info, 'url') ?? '', title: readString(info, 'title') ?? '' });
+  }
+  return pages;
+}
+
+/**
+ * Choose the tab to view: an explicit preference while it is still a live page
+ * this session owns (chamber-user click), else the newest owned page from the
+ * session's creation-ordered registry. Never picks another session's tab — the
+ * shared daemon hosts every session's pages, so both the unscoped fallback and
+ * an unowned pin would leak one session's browsing into another session's
+ * panel.
+ */
+export function pickTargetId(pages: PageTarget[], ownedIds: string[], preferTargetId?: string): string | null {
+  if (pages.length === 0 || ownedIds.length === 0) return null;
+  const live = new Set(pages.map((page) => page.targetId));
+  const owned = new Set(ownedIds);
+  if (preferTargetId && owned.has(preferTargetId) && live.has(preferTargetId)) return preferTargetId;
+  for (let index = ownedIds.length - 1; index >= 0; index -= 1) {
+    const candidate = ownedIds[index];
+    if (candidate && live.has(candidate)) return candidate;
+  }
+  return null;
+}
+
+/** Filter live pages down to the session's owned targets, registry order. */
+export function ownedPages(pages: PageTarget[], ownedIds: string[]): PageTarget[] {
+  if (ownedIds.length === 0) return [];
+  const live = new Map(pages.map((page) => [page.targetId, page]));
+  const owned: PageTarget[] = [];
+  for (const id of ownedIds) {
+    const page = live.get(id);
+    if (page) owned.push(page);
+  }
+  return owned;
+}
+
+/** Extract a page-target patch from a `Target.targetInfoChanged` event. */
+export function readTargetInfoPatch(params: unknown): PageTarget | null {
+  if (!isRecord(params) || !isRecord(params.targetInfo)) return null;
+  const info = params.targetInfo;
+  if (info.type !== 'page') return null;
+  const targetId = readString(info, 'targetId');
+  if (!targetId) return null;
+  return { targetId, url: readString(info, 'url') ?? '', title: readString(info, 'title') ?? '' };
+}

package/src/shared/lib/browser/url.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Address-bar normalization shared by the browser panels. Bare hosts get an
+ * `https://` scheme; anything that is not http(s) is rejected, so a typed or
+ * pasted `javascript:` / `file:` / `data:` URL can never reach the browser.
+ */
+
+export function normalizeUrl(input: string): string {
+  const trimmed = input.trim();
+  if (!trimmed) return trimmed;
+  const candidate = /^[a-z][a-z0-9+.-]*:/i.test(trimmed) ? trimmed : `https://${trimmed}`;
+  const parsed = new URL(candidate);
+  if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+    throw new Error('Only http and https URLs are allowed');
+  }
+  return parsed.toString();
+}

package/src/shared/lib/browser/util.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Small shared guards for untrusted JSON shapes: CDP payloads, DevTools
+ * profiles, and the omp target registry. Every value crossing into the
+ * browser viewer is `unknown` until one of these narrows it.
+ */
+
+export function readString(source: Record<string, unknown>, key: string): string | undefined {
+  const value = source[key];
+  return typeof value === 'string' ? value : undefined;
+}
+
+export function readNumber(source: Record<string, unknown>, key: string): number | undefined {
+  const value = source[key];
+  return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
+}