@omercnet/paseo-shared-browser 1.2.2-next.232.1 → 1.2.2-next.239.1

package/client/browser-client-presence.ts

@@ -0,0 +1,184 @@
+/** Own composer-pill presence subscription and paging; teardown fences late directory replies and releases only this contribution. */
+import type { PluginClientContext } from "@getpaseo/plugin/client";
+import { listOpenBrowserWorkspacesRpc } from "../shared/browser";
+
+const PILL_PRESENCE_POLL_MS = 2_000;
+const AGENT_DIRECTORY_PAGE_LIMIT = 200;
+
+interface AgentDirectoryPage {
+  entries: Array<{ agent: { id: string; workspaceId?: string | undefined } }>;
+  pageInfo: { hasMore: boolean; nextCursor: string | null };
+}
+
+type AgentDirectoryUpdate =
+  | { kind: "remove"; agentId: string }
+  | { kind: "upsert"; agent: { id: string; workspaceId?: string | undefined } };
+type AgentPlacement = { id: string; workspaceId: string };
+
+/** Add workspace browser pills for active agents; cleanup is idempotent and stops late publication. */
+export function contributeSharedBrowserClient(client: PluginClientContext) {
+  const agents = new Map<string, AgentPlacement>();
+  const pills = new Map<string, { workspaceId: string; remove: () => void }>();
+  const lifetime = new AbortController();
+  let openWorkspaceIds = new Set<string>();
+  let refreshing = false;
+  let stopped = false;
+  let directoryGeneration = 0;
+  let pendingDirectory: { generation: number; updates: AgentDirectoryUpdate[] } | null = null;
+  let unsubscribeDirectory: (() => void) | null = null;
+  let releaseDirectory: (() => Promise<void>) | null = null;
+
+  const removePill = (agentId: string) => {
+    pills.get(agentId)?.remove();
+    pills.delete(agentId);
+  };
+  const syncPill = (agent: AgentPlacement) => {
+    const current = pills.get(agent.id);
+    if (!openWorkspaceIds.has(agent.workspaceId)) {
+      removePill(agent.id);
+      return;
+    }
+    if (current?.workspaceId === agent.workspaceId) return;
+    removePill(agent.id);
+    const workspaceId = agent.workspaceId;
+    const pill = client.addComposerPill({
+      id: "open-shared-browser",
+      workspaceId,
+      agentId: agent.id,
+      button: {
+        title: "Open Shared Browser",
+        icon: "PanelsTopLeft",
+        label: "Shared Browser",
+        behavior: {
+          kind: "action",
+          onPress() {
+            client.openPanel("shared-browser", { workspaceId });
+          },
+        },
+      },
+    });
+    pills.set(agent.id, { workspaceId, remove: pill.remove });
+  };
+  const syncAllPills = () => {
+    for (const agent of agents.values()) syncPill(agent);
+  };
+  const refreshPresence = async () => {
+    if (stopped || refreshing) return;
+    refreshing = true;
+    try {
+      const result = await client.rpc(listOpenBrowserWorkspacesRpc, {});
+      if (stopped) return;
+      openWorkspaceIds = new Set(result.workspaceIds);
+      syncAllPills();
+    } catch {
+      return;
+    } finally {
+      refreshing = false;
+    }
+  };
+  const applyUpdate = (target: Map<string, AgentPlacement>, update: AgentDirectoryUpdate) => {
+    if (update.kind === "remove") {
+      target.delete(update.agentId);
+      return;
+    }
+    const { id, workspaceId } = update.agent;
+    if (workspaceId) target.set(id, { id, workspaceId });
+    else target.delete(id);
+  };
+  const applyLiveUpdate = (update: AgentDirectoryUpdate) => {
+    if (stopped) return;
+    pendingDirectory?.updates.push(update);
+    applyUpdate(agents, update);
+    if (update.kind === "remove") {
+      removePill(update.agentId);
+      return;
+    }
+    const { id, workspaceId } = update.agent;
+    if (!workspaceId) {
+      removePill(id);
+      return;
+    }
+    syncPill({ id, workspaceId });
+    void refreshPresence();
+  };
+  const replaceAgents = (next: Map<string, AgentPlacement>) => {
+    for (const agentId of agents.keys()) {
+      if (!next.has(agentId)) removePill(agentId);
+    }
+    agents.clear();
+    for (const [agentId, agent] of next) agents.set(agentId, agent);
+    syncAllPills();
+  };
+  const followSnapshot = async (snapshot: AgentDirectoryPage) => {
+    if (stopped) return;
+    const generation = ++directoryGeneration;
+    const transaction = { generation, updates: [] as AgentDirectoryUpdate[] };
+    pendingDirectory = transaction;
+    const next = new Map<string, AgentPlacement>();
+    for (const { agent } of snapshot.entries) {
+      if (agent.workspaceId) next.set(agent.id, { id: agent.id, workspaceId: agent.workspaceId });
+    }
+
+    try {
+      let cursor = snapshot.pageInfo.hasMore ? snapshot.pageInfo.nextCursor : null;
+      while (cursor) {
+        const page = await client.paseo.agents.list({
+          scope: "active",
+          page: { limit: AGENT_DIRECTORY_PAGE_LIMIT, cursor },
+          signal: lifetime.signal,
+        });
+        if (stopped || pendingDirectory?.generation !== generation) return;
+        for (const { agent } of page.entries) {
+          if (agent.workspaceId)
+            next.set(agent.id, { id: agent.id, workspaceId: agent.workspaceId });
+        }
+        cursor = page.pageInfo.hasMore ? page.pageInfo.nextCursor : null;
+      }
+      if (stopped || pendingDirectory?.generation !== generation) return;
+      for (const update of transaction.updates) applyUpdate(next, update);
+      pendingDirectory = null;
+      replaceAgents(next);
+      await refreshPresence();
+    } catch {
+      if (!stopped && pendingDirectory?.generation === generation) pendingDirectory = null;
+    }
+  };
+
+  void client.paseo.agents
+    .list({
+      scope: "active",
+      page: { limit: AGENT_DIRECTORY_PAGE_LIMIT },
+      subscribe: {},
+      signal: lifetime.signal,
+    })
+    .then(({ subscription }) => {
+      if (stopped) {
+        void subscription.release().catch(() => undefined);
+        return undefined;
+      }
+      releaseDirectory = subscription.release;
+      unsubscribeDirectory = subscription.subscribe({
+        snapshot: (snapshot) => void followSnapshot(snapshot),
+        update: (message) => {
+          if (message.type === "agent_update") applyLiveUpdate(message.payload);
+        },
+      });
+      return undefined;
+    })
+    .catch(() => undefined);
+  const presenceTimer = setInterval(() => void refreshPresence(), PILL_PRESENCE_POLL_MS);
+
+  return () => {
+    if (stopped) return;
+    stopped = true;
+    directoryGeneration += 1;
+    pendingDirectory = null;
+    clearInterval(presenceTimer);
+    unsubscribeDirectory?.();
+    void releaseDirectory?.().catch(() => undefined);
+    lifetime.abort();
+    for (const { remove } of pills.values()) remove();
+    pills.clear();
+    agents.clear();
+  };
+}

package/client/browser-compose-controls.test.tsx

@@ -0,0 +1,275 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+// Minimal hook runtime: one component instance, state kept across renders.
+const hooks = vi.hoisted(() => {
+  const runtime = {
+    slots: [] as unknown[],
+    index: 0,
+    effects: [] as Array<() => void>,
+    rerender: () => {},
+  };
+  return runtime;
+});
+
+vi.mock("react", () => ({
+  useRef: (initial: unknown) => {
+    const i = hooks.index++;
+    hooks.slots[i] ??= { current: initial };
+    return hooks.slots[i];
+  },
+  useState: (initial: unknown) => {
+    const i = hooks.index++;
+    hooks.slots[i] ??= initial;
+    return [
+      hooks.slots[i],
+      (next: unknown) => {
+        hooks.slots[i] =
+          typeof next === "function" ? (next as (v: unknown) => unknown)(hooks.slots[i]) : next;
+        hooks.rerender();
+      },
+    ];
+  },
+  useEffect: (effect: () => void) => {
+    hooks.effects.push(effect);
+  },
+}));
+vi.mock("@getpaseo/plugin/client/react-native", () => {
+  const Modal = Object.assign(() => null, { Content: () => null });
+  return { Modal, TextInput: () => null };
+});
+vi.mock("react-native", () => ({ Text: () => null, View: () => null }));
+vi.mock("./browser-chrome", () => ({ ControlButton: () => null }));
+
+import { ComposeTextControls } from "./browser-compose-controls";
+
+type Node = { props?: Record<string, unknown> } | Node[] | string | null | undefined;
+function find(
+  node: Node,
+  match: (props: Record<string, unknown>) => boolean,
+): Record<string, unknown> {
+  const stack: Node[] = [node];
+  while (stack.length) {
+    const current = stack.pop();
+    if (Array.isArray(current)) stack.push(...current);
+    else if (current && typeof current === "object" && current.props) {
+      if (match(current.props)) return current.props;
+      stack.push(current.props.children as Node);
+    }
+  }
+  throw new Error("element not found");
+}
+
+const composeText = vi.fn((_text: string) => true);
+const cancelInput = vi.fn();
+const onRequestControlForCompose = vi.fn();
+let props: Parameters<typeof ComposeTextControls>[0];
+let tree: Node;
+
+function render(overrides: Partial<typeof props> = {}) {
+  props = { ...props, ...overrides };
+  hooks.index = 0;
+  hooks.effects = [];
+  tree = ComposeTextControls(props) as Node;
+  // Effects run after render, as in React; state they set re-renders.
+  for (const effect of hooks.effects) effect();
+  return tree;
+}
+const done = () => find(tree, (p) => p.label === "Done");
+const draft = (text: string) =>
+  (find(tree, (p) => "onChangeText" in p).onChangeText as (t: string) => void)(text);
+
+beforeEach(() => {
+  hooks.slots = [];
+  composeText.mockClear();
+  cancelInput.mockClear();
+  onRequestControlForCompose.mockClear();
+  hooks.rerender = () => {
+    hooks.index = 0;
+    hooks.effects = [];
+    tree = ComposeTextControls(props) as Node;
+  };
+  props = {
+    styles: {} as never,
+    theme: {} as never,
+    composeText,
+    cancelInput,
+    enabled: true,
+    ownershipKey: "page-1",
+    documentKey: "doc-1",
+    request: null,
+    onRequestHandled: vi.fn(),
+    onRequestControlForCompose,
+    canRequestControl: false,
+  };
+});
+
+function open() {
+  render({ request: { id: 1, kind: "compose", ownershipKey: "page-1" } });
+  draft("hello");
+  render();
+}
+
+describe("ComposeTextControls", () => {
+  it("opening cancels held canvas input and Done inserts once even when pressed rapidly", () => {
+    open();
+    expect(cancelInput).toHaveBeenCalledTimes(1);
+    const press = done().onPress as () => void;
+    press();
+    press();
+    expect(composeText).toHaveBeenCalledTimes(1);
+    expect(composeText).toHaveBeenCalledWith("hello");
+  });
+
+  it("a second Done arriving while the first is being published inserts nothing more", () => {
+    open();
+    const press = done().onPress as () => void;
+    composeText.mockImplementationOnce(() => {
+      press();
+      return true;
+    });
+    press();
+    expect(composeText).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps the draft for review when nothing was admitted, then allows one retry", () => {
+    composeText.mockReturnValueOnce(false);
+    open();
+    (done().onPress as () => void)();
+    (done().onPress as () => void)();
+    expect(composeText).toHaveBeenCalledTimes(2);
+  });
+
+  it("a retained Done callback cannot insert after ownership changes; the same document rebinds once", () => {
+    open();
+    const stale = done().onPress as () => void;
+    render({ ownershipKey: "page-2" });
+    stale();
+    expect(composeText).not.toHaveBeenCalled();
+    (done().onPress as () => void)();
+    expect(composeText).toHaveBeenCalledTimes(1);
+    expect(composeText).toHaveBeenCalledWith("hello");
+  });
+
+  it("a replaced document refuses Done entirely", () => {
+    open();
+    const stale = done().onPress as () => void;
+    render({ ownershipKey: "page-2", documentKey: "doc-2" });
+    expect(done().disabled).toBe(true);
+    stale();
+    expect(composeText).not.toHaveBeenCalled();
+  });
+
+  it("without control, Done asks for control instead of inserting", () => {
+    open();
+    render({ enabled: false, canRequestControl: true });
+    (done().onPress as () => void)();
+    expect(composeText).not.toHaveBeenCalled();
+    expect(onRequestControlForCompose).toHaveBeenCalledTimes(1);
+  });
+
+  it("a retained Done callback cannot insert after control is lost", () => {
+    open();
+    const stale = done().onPress as () => void;
+    render({ enabled: false });
+    stale();
+    expect(composeText).not.toHaveBeenCalled();
+  });
+
+  it("keeps every character of input that arrives faster than a re-render, and never echoes a value back", () => {
+    render({ request: { id: 1, kind: "compose", ownershipKey: "page-1" } });
+    const field = find(tree, (p) => "onChangeText" in p);
+    expect("value" in field).toBe(false);
+    // One retained handler, no render between events: the host input owns the text.
+    const change = field.onChangeText as (t: string) => void;
+    for (const next of ["h", "he", "hel", "hell", "hello", "hello日", "hello日本"]) change(next);
+    render();
+    (done().onPress as () => void)();
+    expect(composeText).toHaveBeenCalledTimes(1);
+    expect(composeText).toHaveBeenCalledWith("hello日本");
+  });
+
+  it("commits ten rapid characters and an IME-style whole-string replacement exactly", () => {
+    render({ request: { id: 1, kind: "compose", ownershipKey: "page-1" } });
+    const change = find(tree, (p) => "onChangeText" in p).onChangeText as (t: string) => void;
+    for (let i = 1; i <= 10; i++) change("abcdefghij".slice(0, i));
+    change("にほんご"); // composition commit replaces the whole value
+    render();
+    (done().onPress as () => void)();
+    expect(composeText).toHaveBeenCalledWith("にほんご");
+  });
+
+  it("clears the draft on close and reopen, and ignores a retained handler from the old draft", () => {
+    render({ request: { id: 1, kind: "compose", ownershipKey: "page-1" } });
+    const retained = find(tree, (p) => "onChangeText" in p).onChangeText as (t: string) => void;
+    retained("old draft");
+    render();
+    (find(tree, (p) => p.label === "Cancel").onPress as () => void)();
+    retained("late old text");
+    render({ request: { id: 2, kind: "compose", ownershipKey: "page-1" } });
+    expect(done().disabled).toBe(true);
+    (done().onPress as () => void)();
+    expect(composeText).not.toHaveBeenCalled();
+  });
+
+  const cancel = () => find(tree, (p) => p.label === "Cancel").onPress as () => void;
+  const onOpenChange = () =>
+    find(tree, (p) => "onOpenChange" in p).onOpenChange as (o: boolean) => void;
+  const reopen = (id: number) => {
+    cancel()();
+    render({ request: { id, kind: "compose", ownershipKey: "page-1" } });
+  };
+
+  it("a retained Done from a closed draft cannot publish or close a same-owner replacement", () => {
+    open();
+    const staleDone = done().onPress as () => void;
+    reopen(2);
+    draft("new draft");
+    render();
+    staleDone();
+    expect(composeText).not.toHaveBeenCalled();
+    (done().onPress as () => void)();
+    expect(composeText).toHaveBeenCalledTimes(1);
+    expect(composeText).toHaveBeenCalledWith("new draft");
+  });
+
+  it("a retained Cancel or dismissal from a closed draft cannot close the replacement", () => {
+    open();
+    const staleCancel = cancel();
+    const staleDismiss = onOpenChange();
+    reopen(2);
+    draft("keep me");
+    render();
+    staleCancel();
+    staleDismiss(false);
+    render();
+    expect(find(tree, (p) => "open" in p && "onOpenChange" in p).open).toBe(true);
+    (done().onPress as () => void)();
+    expect(composeText).toHaveBeenCalledWith("keep me");
+  });
+
+  it("a commit that synchronously opens a new draft publishes once and leaves that draft open", () => {
+    open();
+    composeText.mockImplementationOnce(() => {
+      reopen(2);
+      draft("second");
+      return true;
+    });
+    (done().onPress as () => void)();
+    render();
+    expect(find(tree, (p) => "open" in p && "onOpenChange" in p).open).toBe(true);
+    expect(composeText).toHaveBeenCalledTimes(1);
+    (done().onPress as () => void)();
+    expect(composeText).toHaveBeenLastCalledWith("second");
+  });
+
+  it("a retained Done from a closed draft neither rebinds nor requests control", () => {
+    open();
+    render({ enabled: false, canRequestControl: true });
+    const staleDone = done().onPress as () => void;
+    reopen(2);
+    render({ enabled: false, canRequestControl: true });
+    staleDone();
+    expect(onRequestControlForCompose).not.toHaveBeenCalled();
+    expect(composeText).not.toHaveBeenCalled();
+  });
+});

package/client/browser-compose-controls.tsx

@@ -0,0 +1,174 @@
+/** Explicit Compose draft UI, with original control/document ownership pinned until Done. */
+import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
+import { Modal, TextInput } from "@getpaseo/plugin/client/react-native";
+import { useEffect, useRef, useState } from "react";
+import { Text, View } from "react-native";
+import { ControlButton } from "./browser-chrome";
+import type { createStyles } from "./browser-panel-styles";
+
+type Theme = PluginWorkspacePanelProps["theme"];
+
+/** Visible draft sheet; text reaches the focused page field only by an explicit Done. */
+export function ComposeTextControls({
+  styles,
+  theme,
+  composeText,
+  cancelInput,
+  enabled,
+  ownershipKey,
+  documentKey,
+  request,
+  onRequestHandled,
+  onRequestControlForCompose,
+  canRequestControl,
+}: {
+  styles: ReturnType<typeof createStyles>;
+  theme: Theme;
+  composeText(text: string): boolean;
+  cancelInput(): void;
+  enabled: boolean;
+  ownershipKey: string;
+  documentKey: string;
+  request: { id: number; kind: "compose" | "commit"; ownershipKey: string } | null;
+  onRequestHandled(id: number): void;
+  onRequestControlForCompose(): void;
+  canRequestControl: boolean;
+}) {
+  const handledRequest = useRef<number | null>(null);
+  const [composeOpen, setComposeOpen] = useState(false);
+  // The input is host-owned (uncontrolled): echoing every character back through
+  // React state let a fast second keystroke be overwritten by a stale value.
+  // Latest text lives here; state changes only when emptiness flips or the draft resets.
+  const text = useRef("");
+  const generation = useRef(0);
+  const [hasText, setHasText] = useState(false);
+  const [inputKey, setInputKey] = useState(0);
+  const draftGeneration = generation.current;
+  const resetDraft = () => {
+    generation.current += 1;
+    text.current = "";
+    setHasText(false);
+    setInputKey(generation.current);
+  };
+  const composeOwner = useRef<string | null>(null);
+  const composeDocument = useRef<string | null>(null);
+  const liveAuthority = useRef({ enabled, ownershipKey });
+  liveAuthority.current = { enabled, ownershipKey };
+  const canCommit = enabled && composeOwner.current === ownershipKey;
+  const canRebindCommit = enabled && composeDocument.current === documentKey;
+  const canRequestCommit = canRequestControl && composeDocument.current === documentKey;
+  const closeCompose = () => {
+    setComposeOpen(false);
+    resetDraft();
+    composeOwner.current = null;
+    composeDocument.current = null;
+  };
+  const openCompose = () => {
+    cancelInput();
+    resetDraft();
+    composeOwner.current = ownershipKey;
+    composeDocument.current = documentKey;
+    setComposeOpen(true);
+  };
+  // Callbacks are fenced to the draft that rendered them: a retained Done/Cancel
+  // from a closed draft must not publish, or close, a same-owner replacement.
+  const commit = () => {
+    if (generation.current !== draftGeneration) return;
+    // Consume before publication: a rapid second Done or retained old handler
+    // must not repeat insertion or borrow a replacement page's control.
+    if (
+      !liveAuthority.current.enabled ||
+      liveAuthority.current.ownershipKey !== ownershipKey ||
+      composeOwner.current !== ownershipKey ||
+      !text.current
+    )
+      return;
+    composeOwner.current = null;
+    const accepted = composeText(text.current);
+    // Publication may synchronously open a new draft; it owns the refs now.
+    if (generation.current !== draftGeneration) return;
+    if (accepted) {
+      closeCompose();
+    } else {
+      // false means nothing was admitted, so the same draft remains reviewable.
+      composeOwner.current = ownershipKey;
+    }
+  };
+  const dismiss = () => {
+    if (generation.current === draftGeneration) closeCompose();
+  };
+  // Menu dismissal commits before this effect; the sheet is mounted outside the menu.
+  useEffect(() => {
+    if (!request || handledRequest.current === request.id) return;
+    handledRequest.current = request.id;
+    if (enabled && request.ownershipKey === ownershipKey) {
+      if (request.kind === "compose") openCompose();
+      else if (composeOpen && composeDocument.current === documentKey && text.current) {
+        composeOwner.current = ownershipKey;
+        commit();
+      }
+    }
+    onRequestHandled(request.id);
+  }, [request, enabled, ownershipKey, documentKey, onRequestHandled]);
+  return (
+    <>
+      <Modal
+        title="Compose text"
+        open={composeOpen}
+        onOpenChange={(open) => {
+          if (!open) dismiss();
+        }}
+      >
+        <Modal.Content>
+          <View style={styles.sheetContent}>
+            <Text style={styles.devicePresetDetail}>
+              Compose with your keyboard, then choose Done to insert the text into the focused page
+              field.
+            </Text>
+            <TextInput
+              autoFocus
+              multiline
+              key={inputKey}
+              defaultValue=""
+              maxLength={16_000}
+              accessibilityLabel="Text to compose"
+              onChangeText={(next) => {
+                // A callback retained from a closed or replaced draft must not write into the new one.
+                if (generation.current !== draftGeneration) return;
+                text.current = next;
+                setHasText(next.length > 0);
+              }}
+              style={[styles.field, { minHeight: 100 }]}
+            />
+            {!canCommit ? (
+              <Text style={styles.devicePresetDetail}>
+                Browser control or page changed. Close this draft and focus the field again.
+              </Text>
+            ) : null}
+            <View style={styles.mobileRow}>
+              <ControlButton styles={styles} theme={theme} label="Cancel" onPress={dismiss} />
+              <ControlButton
+                styles={styles}
+                theme={theme}
+                label="Done"
+                primary
+                disabled={(!canCommit && !canRebindCommit && !canRequestCommit) || !hasText}
+                onPress={() => {
+                  if (generation.current !== draftGeneration) return;
+                  if (canCommit) {
+                    commit();
+                  } else if (canRebindCommit) {
+                    composeOwner.current = ownershipKey;
+                    commit();
+                  } else {
+                    onRequestControlForCompose();
+                  }
+                }}
+              />
+            </View>
+          </View>
+        </Modal.Content>
+      </Modal>
+    </>
+  );
+}