@opengeni/react 4.3.3-canary.39786771332001 → 4.5.0

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);

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

@@ -0,0 +1,243 @@
+import { t } from "../../lib/console-text";
+import type { AuthNeededItem } from "../../../timeline";
+import { MACHINES_SESSION_POLL_MS } from "../../../machines";
+import { machineDisplayName } from "../../../sandbox-label-model";
+import { OPENGENI_BROWSER_EXTENSION_URL } from "@opengeni/contracts";
+import { OpenGeniApiError } from "@opengeni/sdk";
+import { useEffect, useRef, useState } from "react";
+
+import { useAppApi } from "../../lib/app-api";
+import { ConnectMachineDialog } from "../machines/connect-machine-dialog";
+import { Button } from "../../../ui/button";
+import { Notice } from "../../../ui/notice";
+import { useAppContext } from "../../app-context";
+import { userErrorText } from "../../../ui/api-error";
+import { isMachineComputeSelectable } from "../../lib/machine-selectability";
+import { useDesktopThisComputer } from "../desktop/this-computer";
+import { hasWorkspacePermission } from "../../lib/permissions";
+import { useWorkspaceMachines } from "../../lib/use-workspace-machines";
+import { thisComputerReady, thisComputerNeedsPermissions } from "../../../this-computer";
+import { SessionCapabilityFrame } from "../../../components/session-capability-frame";
+import type { ChatSendContext } from "./session-github-repositories";
+import { useAttachedChrome } from "./session-machine-card";
+
+/** While the connect dialog is open, look for the new machine every few seconds. */
+const WATCH_POLL_MS = 3_000;
+
+/** What the person's message says when they continue after connecting Chrome. */
+export const CHROME_CONNECTED_MESSAGE = "Chrome is connected. Continue.";
+
+/** A neutral browser mark for the card (the frame renders logos as images). */
+const CHROME_CARD_LOGO =
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 28 28" fill="none" stroke="#71717a" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M 12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></svg>',
+  );
+
+export type SessionChromeCapabilityCardProps = {
+  item: AuthNeededItem;
+  workspaceId: string;
+  sessionId: string;
+  /** What a composer Send would carry now, so Continue follows the same rules. */
+  sendContext?: (() => ChatSendContext) | undefined;
+};
+
+/**
+ * The card a browser tool posts when the agent needs the person's own Chrome and
+ * none is connected. It shows one next step at a time: connect a computer, then
+ * add the Opengeni Browser extension there. Once Chrome links up, Continue tells
+ * the agent to go on.
+ */
+export function SessionChromeCapabilityCard({
+  item,
+  workspaceId,
+  sessionId,
+  sendContext,
+}: SessionChromeCapabilityCardProps) {
+  const context = useAppContext();
+  const { apiBaseUrl } = useAppApi();
+  const accessKnown = context.accessContext !== null && context.accessContext !== undefined;
+  const canMessage =
+    !accessKnown || hasWorkspacePermission(context.accessContext, workspaceId, "sessions:control");
+  const [setupOpen, setSetupOpen] = useState(false);
+  const [sending, setSending] = useState(false);
+  const [sent, setSent] = useState(false);
+  const [sendError, setSendError] = useState<string | null>(null);
+  const cardRef = useRef<HTMLElement>(null);
+  const opener = useRef<HTMLButtonElement>(null);
+
+  const fleet = useWorkspaceMachines({
+    workspaceId,
+    sessionId,
+    pollIntervalMs: setupOpen ? WATCH_POLL_MS : MACHINES_SESSION_POLL_MS,
+  });
+  const unavailableOnDeployment =
+    fleet.error instanceof OpenGeniApiError && fleet.error.status === 404;
+  // Chrome runs on a computer with a screen that is online now.
+  const computer =
+    fleet.machines.find(
+      (machine) =>
+        !machine.isSessionGroup &&
+        machine.enrollmentId &&
+        machine.hasDisplay &&
+        isMachineComputeSelectable(machine.state),
+    ) ?? null;
+  // Read again when a computer comes online: its Chrome may already have the
+  // extension, so the card can skip straight to Continue.
+  const chrome = useAttachedChrome(workspaceId, "any", computer?.sandboxId ?? null);
+  // Continue is offered only after this card saw Chrome missing, so an old card,
+  // or one reloaded after Chrome connected, never sends a stray message.
+  const [sawMissing, setSawMissing] = useState(false);
+  useEffect(() => {
+    if (chrome.checked && chrome.connected === null) setSawMissing(true);
+  }, [chrome.checked, chrome.connected]);
+  const desktop = useDesktopThisComputer();
+  const offerThisComputer =
+    computer === null &&
+    desktop !== null &&
+    desktop.computer.status !== null &&
+    desktop.computer.status.state !== "unavailable" &&
+    !thisComputerReady(desktop.computer.status) &&
+    !unavailableOnDeployment;
+  const origin = apiBaseUrl || (typeof window !== "undefined" ? window.location.origin : "");
+  const computerName = computer ? machineDisplayName(t, computer) : "";
+
+  const chat = sendContext?.() ?? { blocked: null, awaitingHuman: false, extras: {} };
+  const canContinue = canMessage && sawMissing && !chat.awaitingHuman && !sent;
+  const sendContinue = async () => {
+    if (sending || !canContinue) return;
+    const current = sendContext?.() ?? chat;
+    if (current.blocked) {
+      setSendError(current.blocked);
+      return;
+    }
+    setSending(true);
+    setSendError(null);
+    try {
+      await context.client.sendMessage(workspaceId, sessionId, {
+        text: CHROME_CONNECTED_MESSAGE,
+        ...current.extras,
+        clientEventId: crypto.randomUUID(),
+      });
+      setSent(true);
+    } catch (failure) {
+      setSendError(userErrorText(failure, "Try again."));
+    } finally {
+      setSending(false);
+    }
+  };
+
+  // One clear next step: connect a computer, then add the extension there.
+  const step: "computer" | "extension" = computer ? "extension" : "computer";
+  const actionUnavailable = unavailableOnDeployment
+    ? "Connected Machines aren't available on this deployment."
+    : step === "computer" && !offerThisComputer && !fleet.canRead
+      ? "You don't have access to this workspace's machines."
+      : step === "computer" && !offerThisComputer && !fleet.canManage
+        ? "Ask a workspace admin to connect a computer."
+        : null;
+
+  return (
+    <>
+      <SessionCapabilityFrame
+        name="Chrome"
+        subtitle="Opengeni Browser extension"
+        logo={CHROME_CARD_LOGO}
+        typeLabel="Browser"
+        description={
+          step === "extension"
+            ? `Add the extension to Chrome on ${computerName}.`
+            : `${item.capability?.rationale ?? "Connect your Chrome so the agent can use it."} First connect a computer, then add the extension.`
+        }
+        skill={false}
+        expanded={false}
+        complete={chrome.connected !== null}
+        completeLabel={
+          chrome.connected
+            ? sent
+              ? `Chrome is connected (${chrome.connected.name}). The agent continues.`
+              : `Chrome is connected (${chrome.connected.name}).`
+            : undefined
+        }
+        actionLabel={
+          step === "extension"
+            ? "Add to Chrome"
+            : offerThisComputer
+              ? desktop.computer.acting
+                ? "Connecting…"
+                : "Use this computer"
+              : "Connect a computer"
+        }
+        busy={step === "computer" && offerThisComputer && desktop.computer.acting}
+        actionUnavailable={actionUnavailable}
+        opensDialog={step === "computer" && !offerThisComputer}
+        note={step === "extension" && chrome.watching ? "Waiting for Chrome to connect…" : ""}
+        onOpen={() => {
+          if (step === "extension") {
+            window.open(OPENGENI_BROWSER_EXTENSION_URL, "_blank", "noopener,noreferrer");
+            chrome.watch();
+            return;
+          }
+          if (!offerThisComputer) return setSetupOpen(true);
+          if (desktop.computer.acting) return;
+          if (thisComputerNeedsPermissions(desktop.computer.status)) return desktop.openSetup();
+          void (
+            desktop.computer.status?.state === "paused"
+              ? desktop.computer.resume().then(() => desktop.computer.status)
+              : desktop.computer.connect({ screenControl: false })
+          ).then((next) => {
+            if (thisComputerNeedsPermissions(next)) desktop.openSetup();
+            void fleet.refresh();
+          });
+        }}
+        onClose={() => setSetupOpen(false)}
+        opener={opener}
+        cardRef={cardRef}
+        details={
+          chrome.connected && (canContinue || sendError) ? (
+            <div
+              data-slot="chrome-continue"
+              className="space-y-2 border-t border-border px-[19px] pt-3 pb-4 max-[480px]:px-3.5"
+            >
+              {sendError ? (
+                <Notice tone="failed" live="assertive" className="text-xs">
+                  {`Couldn't send. ${sendError}`}
+                </Notice>
+              ) : null}
+              {canContinue ? (
+                <Button
+                  type="button"
+                  size="sm"
+                  className="rounded-[10px] pointer-coarse:h-11"
+                  aria-disabled={sending || undefined}
+                  onClick={() => void sendContinue()}
+                >
+                  {sending ? "Sending…" : "Continue"}
+                </Button>
+              ) : null}
+            </div>
+          ) : null
+        }
+      />
+      {fleet.canManage && !unavailableOnDeployment ? (
+        <ConnectMachineDialog
+          open={setupOpen}
+          onOpenChange={(open) => {
+            if (!open) setSetupOpen(false);
+          }}
+          workspaceId={workspaceId}
+          sessionId={sessionId}
+          origin={origin}
+          machines={fleet.machines}
+          machinesLoading={fleet.loading}
+          machinesError={fleet.error}
+          personalWorkspace={
+            context.workspaces?.find((workspace) => workspace.id === workspaceId)?.kind ===
+            "personal"
+          }
+          defaultScope="user"
+        />
+      ) : null}
+    </>
+  );
+}

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

@@ -434,6 +434,7 @@ describe("Connected Machine conversation card", () => {
           profileLabel: "Teammate",
           browserName: "Chrome",
           state: "connected",
+          capabilities: { debuggerAttachment: true },
         },
         {
           id: "device",
@@ -442,6 +443,7 @@ describe("Connected Machine conversation card", () => {
           profileLabel: "Work",
           browserName: "Chrome",
           state: "connected",
+          capabilities: { debuggerAttachment: true },
         },
       ],
     };