Ryker_Feng fa496c0c8d
feat(browser): add agentic browser control (#4187)
* feat(browser): add agentic browser control

* fix(frontend): format browser view changes

* fix(browser): keep browser optional and isolate sidecar layout

* fix(browser): address PR review security and IME findings

- Nginx: add a browser-stream WebSocket location before the generic
  /api/threads regex so Live upgrades instead of downgrading to HTTP
  (both nginx.conf and nginx.local.conf).
- Ownership: require an existing owned thread for the WS stream and REST
  navigate, and tear down the browser session on thread deletion so a
  later caller cannot reuse a retained page/cookies by guessing the id.
- SSRF: enforce the URL policy at the browser request boundary via a
  context-level route guard covering redirects, popups, iframes, and
  subresources (skipped for CDP-attached Chrome).
- IME: skip key forwarding while a composition is active so confirming a
  CJK candidate with Enter no longer submits the remote page form.

Adds regression tests for the request guard, session teardown on delete,
and the composing-Enter key decision.

* fix(frontend): smooth streaming in long tool threads

* Revert "fix(frontend): smooth streaming in long tool threads"

This reverts commit f0462516eabe77f138d4027ea1c714fb226683cf.

* fix(browser): address review security and lifecycle findings

- Reject cross-origin WebSocket upgrades on the live browser stream
  (Origin allow-list reuse of CORS/same-origin helpers) to close a
  WS-CSRF hole, and fail closed when the ownership store is absent.
- Warn when a CDP-attached session runs with the SSRF request guard
  off, and drop the unreachable CDP screencast teardown dead code.
- Read browser session launch config from a single canonical source
  (browser_navigate) so it is deterministic regardless of call order.
- Bound per-thread Chromium accumulation with idle-timeout eviction
  and an LRU max-sessions cap.
- Reset the Live reconnect counter on a successful open so the stream
  can't permanently stall after the cumulative attempt cap.

* fix(frontend): reduce long tool thread render stalls

Reuse stable historical message groups during streaming, defer heavy Markdown and browser previews, and lazy-decode message images.

* fix(browser): keep live control responsive during continuous input

Why: Manual browser control felt laggy — a physical click ran the remote
Playwright click three times and each non-move input synchronously awaited a
JPEG screenshot, so events queued behind capture (queue wait up to ~237ms).
The first async attempt used a trailing-edge debounce, which froze the visible
page until a wheel/keyboard gesture stopped ("scroll finishes, then it jumps").

What:
- Frontend forwards one `click` per physical click instead of also emitting
  `down`/`up`, so the remote page is not clicked twice per gesture.
- Backend detaches live-frame capture from input dispatch: non-move actions
  start a rate-limited background refresh loop (leading frame + bounded cadence)
  that keeps emitting frames while input continues and never blocks dispatch.
- Add regression tests: input dispatch no longer awaits the screenshot, rapid
  inputs coalesce, and continuous input keeps refreshing before it stops.

Scenarios: Verified in the live Browser panel — a single click completes in
~57ms (was blocked behind a 171ms capture), and a 1.14s sustained wheel gesture
renders ~7 frames throughout the scroll instead of one frame after it ends.

* fix(browser): harden worker and session lifecycle

* fix(browser): address latest review feedback

* fix(frontend): preserve optimistic new-chat message

* test(e2e): preserve mocked message run ids

* fix(browser): address capability review feedback

---------

Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
2026-07-21 11:46:33 +08:00

56 lines
1.6 KiB
TypeScript

import type { BrowserInputEvent } from "./use-browser-stream";
// Named keys we forward to the remote page as key presses (everything else that
// is a single printable char is forwarded as text). Chosen to cover editing and
// navigation without leaking browser-level shortcuts.
export const FORWARDED_NAMED_KEYS = [
"Enter",
"Backspace",
"Tab",
"ArrowUp",
"ArrowDown",
"ArrowLeft",
"ArrowRight",
"Escape",
"Delete",
] as const;
export interface BrowserKeyContext {
/** Panel is in Live (interactive) mode. */
live: boolean;
/** Focus is on an editable element (URL bar etc.) — keep it local. */
editableTarget: boolean;
/** An IME composition is active — the keystroke belongs to the composer. */
composing: boolean;
key: string;
metaKey: boolean;
ctrlKey: boolean;
}
/**
* Decide how a keydown maps to a remote browser input, or ``null`` to ignore it.
*
* Pure so the forwarding policy (including the IME-composition guard that must
* swallow a composing Enter) can be unit-tested without a DOM.
*/
export function decideBrowserKeyInput(
ctx: BrowserKeyContext,
): BrowserInputEvent | null {
if (!ctx.live || ctx.editableTarget || ctx.composing) {
return null;
}
if ((ctx.ctrlKey || ctx.metaKey) && ctx.key.length === 1) {
return {
type: "key",
key: `${ctx.metaKey ? "Meta" : "Control"}+${ctx.key.toUpperCase()}`,
};
}
if (ctx.key.length === 1 && !ctx.metaKey && !ctx.ctrlKey) {
return { type: "text", text: ctx.key };
}
if ((FORWARDED_NAMED_KEYS as readonly string[]).includes(ctx.key)) {
return { type: "key", key: ctx.key };
}
return null;
}