@opengeni/react 4.3.3-canary.39780140124001 → 4.4.1

package/dist/ui/settings-nav.js

@@ -5,12 +5,12 @@ import {
   TooltipProvider,
   TooltipTrigger
 } from "../chunk-OLTGED2Q.js";
-import {
-  ReasonTooltip
-} from "../chunk-KS57MLGE.js";
 import {
   Skeleton
 } from "../chunk-HY7EYWIG.js";
+import {
+  ReasonTooltip
+} from "../chunk-KS57MLGE.js";
 import "../chunk-J3BHDXQQ.js";
 import {
   cn

package/dist/workbench.js

@@ -2,23 +2,23 @@
 import {
   enablePierreDiffs
 } from "./chunk-4WPVEPZF.js";
-import {
-  enableSandboxTerminal
-} from "./chunk-FPS7ARET.js";
-import "./chunk-DYGAOHXK.js";
-import "./chunk-QV3DJVRZ.js";
-import {
-  enableDesktopViewer
-} from "./chunk-QIOARE4I.js";
 import {
   enableCodeEditor
 } from "./chunk-TOTNIUZK.js";
+import "./chunk-YSRBFJMQ.js";
 import "./chunk-Z6DKXQG7.js";
+import {
+  enableDesktopViewer
+} from "./chunk-QIOARE4I.js";
 import "./chunk-PZ24CYDO.js";
 import "./chunk-ZUWF4NF7.js";
+import {
+  enableSandboxTerminal
+} from "./chunk-FPS7ARET.js";
+import "./chunk-HTT3FB7T.js";
+import "./chunk-QV3DJVRZ.js";
 import "./chunk-TNEZNMSN.js";
 import "./chunk-5I4VRWBB.js";
-import "./chunk-YSRBFJMQ.js";
 import "./chunk-TXS65BB2.js";
 import "./chunk-5JZYPZ72.js";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeni/react",
-  "version": "4.3.3-canary.39780140124001",
+  "version": "4.4.1",
   "description": "React hooks and styled components for Opengeni: live session streaming, chat composer, message timeline, session status, and fleet views — token-themed (CSS variables), dark-first, built on Tailwind v4 + Radix + Motion.",
   "license": "Apache-2.0",
   "repository": {
@@ -251,9 +251,9 @@
     "@dnd-kit/utilities": "3.2.2",
     "@fontsource-variable/noto-sans-arabic": "5.2.10",
     "@fontsource-variable/noto-sans-jp": "5.2.10",
-    "@opengeni/connect": "4.3.3-canary.39780140124001",
-    "@opengeni/contracts": "4.3.3-canary.39780140124001",
-    "@opengeni/sdk": "4.3.3-canary.39780140124001",
+    "@opengeni/connect": "4.4.1",
+    "@opengeni/contracts": "4.4.1",
+    "@opengeni/sdk": "4.4.1",
     "@tanstack/react-virtual": "^3.14.11",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/src/app/components/capabilities/session-capability-card.tsx

@@ -30,6 +30,7 @@ import type { CapabilityCatalogItem, ResourceRef } from "../../types";
 import type { ChatSendContext } from "./session-github-repositories";
 import { SessionGitHubCapabilityCard } from "./session-github-card";
 import { RepeatedMachineRequestNote, SessionMachineCapabilityCard } from "./session-machine-card";
+import { SessionChromeCapabilityCard } from "./session-chrome-card";
 import { usePage } from "../../lib/navigation";
 
 /** The built-in card for connecting a person's own computer to this chat. */
@@ -90,7 +91,19 @@ export function SessionCapabilityCard(props: SessionCapabilityCardProps) {
   const capability = item.capability;
   if (capability?.id === CONNECTED_MACHINE_CAPABILITY_ID) {
     // The same request was made again further down, where its card is live.
-    if (item.askedAgainLater) return <RepeatedMachineRequestNote />;
+    if (item.askedAgainLater)
+      return <RepeatedMachineRequestNote chrome={item.purpose === "chrome"} />;
+    if (item.purpose === "chrome") {
+      return (
+        <SessionChromeCapabilityCard
+          key={`${props.workspaceId}:${props.sessionId}`}
+          item={item}
+          workspaceId={props.workspaceId}
+          sessionId={props.sessionId}
+          sendContext={props.sendContext}
+        />
+      );
+    }
     return (
       <SessionMachineCapabilityCard
         key={`${props.workspaceId}:${props.sessionId}`}

package/src/app/components/capabilities/session-chrome-card.dom-fixture.tsx

@@ -0,0 +1,377 @@
+// Run explicitly through session-chrome-card.test.tsx so Radix sees the DOM at import time.
+import { afterAll, beforeAll, beforeEach, describe, expect, mock, test } from "bun:test";
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+import { act } from "react";
+
+import type { AuthNeededItem } from "../../../timeline";
+
+const STORE_URL =
+  "https://chromewebstore.google.com/detail/opengeni-browser/phpmmcbeelfkcinjfbbggegjdcdmnnch";
+
+type Machine = {
+  sandboxId: string;
+  enrollmentId: string | null;
+  name: string;
+  kind: string;
+  state: string;
+  active: boolean;
+  isSessionGroup: boolean;
+  os: string;
+  hasDisplay: boolean;
+  allowScreenControl: boolean;
+  desktopUnavailableReason: string | null;
+  runtime: null;
+  scope: "user" | "workspace" | "organization";
+};
+const machine = (sandboxId: string, name: string, overrides: Partial<Machine> = {}): Machine => ({
+  sandboxId,
+  enrollmentId: `enrollment-${sandboxId}`,
+  name,
+  kind: "selfhosted",
+  state: "online",
+  active: false,
+  isSessionGroup: false,
+  os: "macos",
+  hasDisplay: true,
+  allowScreenControl: false,
+  desktopUnavailableReason: null,
+  runtime: null,
+  scope: "user",
+  ...overrides,
+});
+const sessionBox = machine("home", "Cloud sandbox", {
+  enrollmentId: null,
+  isSessionGroup: true,
+  kind: "modal",
+  active: true,
+});
+
+const fleet = {
+  machines: [sessionBox] as Machine[],
+  canRead: true,
+  canManage: true,
+  canAttach: true,
+  attaching: false,
+  loading: false,
+  error: null as unknown,
+  mutationError: null as unknown,
+  attach: mock(async (_sandboxId: string) => true),
+  refresh: mock(async () => {}),
+};
+mock.module("../../lib/use-workspace-machines", () => ({ useWorkspaceMachines: () => fleet }));
+mock.module("../../lib/app-api", () => ({
+  useAppApi: () => ({ apiBaseUrl: "https://app.example.test" }),
+}));
+mock.module("../desktop/this-computer", () => ({ useDesktopThisComputer: () => null }));
+mock.module("../../../clipboard", () => ({ copyTextToClipboard: mock(async () => true) }));
+
+const mintEnrollToken = mock(
+  async (_workspaceId: string, input: { scope?: string; allowScreenControl?: boolean }) => ({
+    token: "oget_token.sig",
+    expiresAt: new Date(Date.now() + 3_600_000).toISOString(),
+    expiresInSeconds: 3600,
+    scope: input.scope ?? "workspace",
+    allowScreenControl: input.allowScreenControl ?? false,
+  }),
+);
+let browsers: { devices: unknown[]; bridges: unknown[]; revision: number } = {
+  devices: [],
+  bridges: [],
+  revision: 1,
+};
+const listAttachedBrowsers = mock(async () => browsers);
+const sendMessage = mock(async (_workspaceId: string, _sessionId: string, _input: unknown) => ({
+  id: "accepted",
+  type: "user.message",
+  payload: { routing: "accepted_for_execution" },
+}));
+const everyone = ["enrollments:read", "enrollments:manage", "sessions:control"];
+const context = {
+  client: { mintEnrollToken, listAttachedBrowsers, sendMessage },
+  accessContext: {
+    subjectId: "member",
+    workspaceGrants: [{ workspaceId: "workspace", permissions: everyone }],
+  },
+  workspaces: [{ id: "workspace", kind: "shared" }],
+  workspaceCapabilityCatalog: [],
+};
+mock.module("../../app-context", () => ({ useAppContext: () => context }));
+mock.module("sonner", () => ({ toast: { success: () => {}, error: () => {}, info: () => {} } }));
+GlobalRegistrator.register();
+const opened: unknown[][] = [];
+window.open = ((...args: unknown[]) => {
+  opened.push(args);
+  return null;
+}) as typeof window.open;
+const { createRoot } = await import("react-dom/client");
+const { SessionCapabilityCard } = await import("./session-capability-card");
+const { OpenGeniApiError } = await import("@opengeni/sdk");
+
+const chromeNotice = {
+  id: "chrome-notice",
+  kind: "auth-needed",
+  serverId: "opengeni",
+  providerDomain: "opengeni.ai",
+  reason: "missing_connection",
+  toolName: "browser_open",
+  purpose: "chrome",
+  capability: {
+    id: "api:connected-machine",
+    name: "Connected Machine",
+    kind: "api",
+    action: "connect",
+    rationale: "Connect your Chrome so the agent can use it.",
+    requiredVariables: [],
+  },
+} as unknown as AuthNeededItem;
+
+const chromeProfile = (name: string, enrollmentId = "enrollment-mac") => ({
+  id: `device-${name}`,
+  enrollmentId,
+  name,
+  profileLabel: name,
+  browserName: "Chrome",
+  state: "connected",
+  capabilities: { debuggerAttachment: true },
+});
+
+beforeAll(() => {
+  (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean | undefined }).IS_REACT_ACT_ENVIRONMENT =
+    true;
+});
+afterAll(() => {
+  mock.restore();
+  GlobalRegistrator.unregister();
+});
+beforeEach(() => {
+  opened.length = 0;
+  sendMessage.mockClear();
+  mintEnrollToken.mockClear();
+  listAttachedBrowsers.mockClear();
+  browsers = { devices: [], bridges: [], revision: 1 };
+  fleet.machines = [sessionBox];
+  fleet.canRead = true;
+  fleet.canManage = true;
+  fleet.error = null;
+  context.accessContext.workspaceGrants = [{ workspaceId: "workspace", permissions: everyone }];
+});
+
+type SendContext = {
+  blocked: string | null;
+  awaitingHuman: boolean;
+  extras: Record<string, unknown>;
+};
+async function render(item: AuthNeededItem = chromeNotice, sendContext?: () => SendContext) {
+  const container = document.createElement("div");
+  document.body.append(container);
+  const root = createRoot(container);
+  const paint = async () =>
+    act(async () => {
+      root.render(
+        <SessionCapabilityCard
+          item={item}
+          workspaceId="workspace"
+          sessionId="session"
+          sendContext={sendContext as never}
+        />,
+      );
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+  await paint();
+  const dialog = () => document.querySelector<HTMLElement>("[data-connect-machine-dialog]");
+  return {
+    text: () => container.textContent ?? "",
+    note: () => container.querySelector(".og-session-capability-note")?.textContent ?? "",
+    button: (name: string) =>
+      [...container.querySelectorAll<HTMLButtonElement>("button")].find(
+        (button) => button.textContent?.trim() === name,
+      ) ?? null,
+    dialog,
+    /** Render again after the mocked machines or browsers changed. */
+    rerender: async () => {
+      await paint();
+      await act(async () => new Promise((resolve) => setTimeout(resolve, 0)));
+    },
+    command: () => dialog()?.querySelector("[data-connect-command]")?.textContent ?? "",
+    close: async () => {
+      await act(async () => root.unmount());
+      container.remove();
+    },
+  };
+}
+
+async function click(element: HTMLElement | null) {
+  if (!element) throw new Error("Missing element");
+  await act(async () => {
+    element.click();
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+}
+
+describe("Chrome setup card", () => {
+  test("without a computer, its one action connects a computer", async () => {
+    const view = await render();
+    expect(view.text()).toContain("Chrome");
+    expect(view.text()).toContain(
+      "Connect your Chrome so the agent can use it. First connect a computer, then add the extension.",
+    );
+    // It is about Chrome, not about where this chat runs.
+    expect(view.text()).not.toContain("Choose where this chat runs");
+    expect(view.text()).not.toContain("Use in this chat");
+    expect(view.button("Add to Chrome")).toBeNull();
+    await click(view.button("Connect a computer"));
+    expect(view.dialog()).not.toBeNull();
+    // The shared connect dialog, opened on its first step.
+    expect(view.dialog()?.textContent).toContain("Open app and connect");
+    await view.close();
+  });
+
+  test("with a computer online, its one action adds the extension and then waits for Chrome", async () => {
+    fleet.machines = [sessionBox, machine("mac", "Ada's MacBook")];
+    const view = await render();
+    expect(view.text()).toContain("Add the extension to Chrome on Ada's MacBook.");
+    expect(view.button("Connect a computer")).toBeNull();
+    await click(view.button("Add to Chrome"));
+    expect(opened).toEqual([[STORE_URL, "_blank", "noopener,noreferrer"]]);
+    expect(view.note()).toBe("Waiting for Chrome to connect…");
+    await view.close();
+  });
+
+  test("an offline computer or one without a screen still needs a computer connected", async () => {
+    fleet.machines = [
+      sessionBox,
+      machine("mac", "Ada's MacBook", { state: "offline" }),
+      machine("box", "Build server", { os: "linux", hasDisplay: false }),
+    ];
+    const view = await render();
+    expect(view.button("Connect a computer")).not.toBeNull();
+    expect(view.button("Add to Chrome")).toBeNull();
+    await view.close();
+  });
+
+  test("once Chrome is connected, Continue tells the agent to go on", async () => {
+    fleet.machines = [sessionBox, machine("mac", "Ada's MacBook")];
+    const view = await render(chromeNotice, () => ({
+      blocked: null,
+      awaitingHuman: false,
+      extras: { model: "codex/test" },
+    }));
+    expect(view.button("Continue")).toBeNull();
+    browsers = { devices: [chromeProfile("Work")], bridges: [], revision: 2 };
+    await click(view.button("Add to Chrome"));
+    expect(view.text()).toContain("Chrome is connected (Work).");
+    await click(view.button("Continue"));
+    expect(sendMessage).toHaveBeenCalledTimes(1);
+    const [workspaceId, sessionId, input] = sendMessage.mock.calls[0]!;
+    expect([workspaceId, sessionId]).toEqual(["workspace", "session"]);
+    expect(input).toMatchObject({ text: "Chrome is connected. Continue.", model: "codex/test" });
+    expect(view.text()).toContain("The agent continues.");
+    expect(view.button("Continue")).toBeNull();
+    await view.close();
+  });
+
+  test("Continue waits for an open question and follows the composer's block", async () => {
+    fleet.machines = [sessionBox, machine("mac", "Ada's MacBook")];
+    const waiting = await render(chromeNotice, () => ({
+      blocked: null,
+      awaitingHuman: true,
+      extras: {},
+    }));
+    browsers = { devices: [chromeProfile("Work")], bridges: [], revision: 2 };
+    await click(waiting.button("Add to Chrome"));
+    expect(waiting.text()).toContain("Chrome is connected (Work).");
+    expect(waiting.button("Continue")).toBeNull();
+    await waiting.close();
+
+    browsers = { devices: [], bridges: [], revision: 1 };
+    const blocked = await render(chromeNotice, () => ({
+      blocked: "Choose a model first.",
+      awaitingHuman: false,
+      extras: {},
+    }));
+    browsers = { devices: [chromeProfile("Work")], bridges: [], revision: 2 };
+    await click(blocked.button("Add to Chrome"));
+    await click(blocked.button("Continue"));
+    expect(sendMessage).not.toHaveBeenCalled();
+    expect(blocked.text()).toContain("Choose a model first.");
+    await blocked.close();
+  });
+
+  test("a Chrome profile the agent cannot drive does not count as connected", async () => {
+    fleet.machines = [sessionBox, machine("mac", "Ada's MacBook")];
+    browsers = {
+      devices: [{ ...chromeProfile("Work"), capabilities: { debuggerAttachment: false } }],
+      bridges: [],
+      revision: 2,
+    };
+    const view = await render();
+    expect(view.text()).not.toContain("Chrome is connected");
+    expect(view.button("Add to Chrome")).not.toBeNull();
+    await view.close();
+  });
+
+  test("when a computer comes online with Chrome already linked, Continue appears without Add to Chrome", async () => {
+    const view = await render();
+    expect(view.button("Connect a computer")).not.toBeNull();
+    fleet.machines = [sessionBox, machine("mac", "Ada's MacBook")];
+    browsers = { devices: [chromeProfile("Work")], bridges: [], revision: 2 };
+    await view.rerender();
+    expect(opened).toEqual([]);
+    expect(view.text()).toContain("Chrome is connected (Work).");
+    expect(view.button("Continue")).not.toBeNull();
+    await view.close();
+  });
+
+  test("Chrome that links up a few seconds after the computer is noticed without a click", async () => {
+    const view = await render();
+    fleet.machines = [sessionBox, machine("mac", "Ada's MacBook")];
+    await view.rerender();
+    expect(view.button("Add to Chrome")).not.toBeNull();
+    browsers = { devices: [chromeProfile("Work")], bridges: [], revision: 2 };
+    await act(async () => new Promise((resolve) => setTimeout(resolve, 5_300)));
+    expect(opened).toEqual([]);
+    expect(view.text()).toContain("Chrome is connected (Work).");
+    expect(view.note()).toBe("");
+    await view.close();
+  }, 10_000);
+
+  test("a card shown after Chrome already connected offers no Continue", async () => {
+    fleet.machines = [sessionBox, machine("mac", "Ada's MacBook")];
+    browsers = { devices: [chromeProfile("Work")], bridges: [], revision: 2 };
+    const view = await render(chromeNotice, () => ({
+      blocked: null,
+      awaitingHuman: false,
+      extras: {},
+    }));
+    expect(view.text()).toContain("Chrome is connected (Work).");
+    expect(view.button("Continue")).toBeNull();
+    await view.close();
+  });
+
+  test("says who can connect when this person cannot", async () => {
+    fleet.canManage = false;
+    const member = await render();
+    expect(member.text()).toContain("Ask a workspace admin to connect a computer.");
+    expect(member.button("Connect a computer")).toBeNull();
+    await member.close();
+
+    fleet.error = new OpenGeniApiError(404, "not found", {});
+    const off = await render();
+    expect(off.text()).toContain("Connected Machines aren't available on this deployment.");
+    await off.close();
+  });
+
+  test("an earlier copy is a short note, and the machine card itself is unchanged", async () => {
+    const repeated = await render({ ...chromeNotice, askedAgainLater: true } as AuthNeededItem);
+    expect(repeated.text()).toBe("The agent asked to connect Chrome. It asked again below.");
+    await repeated.close();
+
+    const { purpose: _purpose, ...machineNotice } = chromeNotice as AuthNeededItem & {
+      purpose?: string;
+    };
+    const machineCard = await render(machineNotice as AuthNeededItem);
+    expect(machineCard.text()).toContain("Connected Machine");
+    expect(machineCard.text()).not.toContain("Opengeni Browser extension");
+    await machineCard.close();
+  });
+});

package/src/app/components/capabilities/session-chrome-card.test.tsx

@@ -0,0 +1,18 @@
+import { expect, test } from "bun:test";
+
+// Radix caches DOM availability at import time. Other tests intentionally render
+// without a DOM, so keep the card in an independent module graph.
+test("Chrome setup card leads with one next step and continues the chat once Chrome connects", async () => {
+  const child = Bun.spawn({
+    cmd: [process.execPath, "test", "./session-chrome-card.dom-fixture.tsx"],
+    cwd: import.meta.dir,
+    stdout: "pipe",
+    stderr: "pipe",
+  });
+  const [stdout, stderr, exitCode] = await Promise.all([
+    new Response(child.stdout).text(),
+    new Response(child.stderr).text(),
+    child.exited,
+  ]);
+  expect(exitCode, `${stdout}\n${stderr}`).toBe(0);
+}, 20_000);