@agent-native/dispatch 0.15.28 → 0.16.1

package/src/routes/pages/browser-chat.spec.tsx

@@ -0,0 +1,121 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { MemoryRouter } from "react-router";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import BrowserChatRoute from "./browser-chat.js";
+
+const browserChat = vi.hoisted(() => ({
+  install: vi.fn(() => vi.fn()),
+  embedActive: true,
+  surfaceProps: null as Record<string, unknown> | null,
+}));
+
+vi.mock("@agent-native/core/client/agent-chat", () => ({
+  AgentChatSurface: (props: Record<string, unknown>) => {
+    browserChat.surfaceProps = props;
+    return <div data-testid="browser-agent-chat" />;
+  },
+}));
+vi.mock("@agent-native/core/client/host", () => ({
+  isEmbedAuthActive: () => browserChat.embedActive,
+}));
+vi.mock("@agent-native/core/client/i18n", () => ({
+  useT: () => (key: string, values?: { page?: string }) =>
+    ({
+      "dispatch.pages.browserChatUnavailableTitle":
+        "Browser chat session unavailable",
+      "dispatch.pages.browserChatUnavailableDescription":
+        "Reconnect from the Agent-Native browser extension.",
+      "dispatch.pages.browserChatPlaceholder": "Ask about this page…",
+      "dispatch.pages.browserChatAttachedPlaceholder": `Ask about ${values?.page}…`,
+    })[key] ?? key,
+}));
+
+vi.mock("../../lib/browser-chat-bridge.js", () => ({
+  installBrowserChatBridge: browserChat.install,
+}));
+
+describe("BrowserChatRoute", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    browserChat.install.mockClear();
+    browserChat.embedActive = true;
+    browserChat.surfaceProps = null;
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("renders the canonical narrow chat and installs the scoped bridge", async () => {
+    await act(async () => {
+      root.render(
+        <MemoryRouter
+          initialEntries={[
+            "/browser-chat?browserChatNonce=browser-chat-nonce-1234567890&browserChatParentOrigin=chrome-extension%3A%2F%2Fabcdefghijklmnopabcdefghijklmnop",
+          ]}
+        >
+          <BrowserChatRoute />
+        </MemoryRouter>,
+      );
+    });
+
+    expect(browserChat.install).toHaveBeenCalledWith(
+      expect.objectContaining({
+        nonce: "browser-chat-nonce-1234567890",
+        parentOrigin: "chrome-extension://abcdefghijklmnopabcdefghijklmnop",
+      }),
+    );
+    expect(browserChat.surfaceProps).toMatchObject({
+      mode: "panel",
+      storageKey: "dispatch",
+      showHeader: false,
+      showTabBar: false,
+      allowSettingsMode: false,
+      composerPlaceholder: "Ask about this page…",
+    });
+  });
+
+  it("fails closed when the bridge query is incomplete", async () => {
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/browser-chat"]}>
+          <BrowserChatRoute />
+        </MemoryRouter>,
+      );
+    });
+
+    expect(container.textContent).toContain("Browser chat session unavailable");
+    expect(browserChat.install).not.toHaveBeenCalled();
+    expect(browserChat.surfaceProps).toBeNull();
+  });
+
+  it("does not install the bridge for a normally authenticated top-level route", async () => {
+    browserChat.embedActive = false;
+
+    await act(async () => {
+      root.render(
+        <MemoryRouter
+          initialEntries={[
+            "/browser-chat?browserChatNonce=browser-chat-nonce-1234567890&browserChatParentOrigin=chrome-extension%3A%2F%2Fabcdefghijklmnopabcdefghijklmnop",
+          ]}
+        >
+          <BrowserChatRoute />
+        </MemoryRouter>,
+      );
+    });
+
+    expect(browserChat.install).not.toHaveBeenCalled();
+    expect(browserChat.surfaceProps).toBeNull();
+  });
+});

package/src/routes/pages/browser-chat.tsx

@@ -0,0 +1,89 @@
+import { AgentChatSurface } from "@agent-native/core/client/agent-chat";
+import { isEmbedAuthActive } from "@agent-native/core/client/host";
+import { useT } from "@agent-native/core/client/i18n";
+import { useEffect, useState } from "react";
+import { useSearchParams } from "react-router";
+
+import { installBrowserChatBridge } from "../../lib/browser-chat-bridge.js";
+import {
+  BROWSER_CHAT_NONCE_QUERY_PARAM,
+  BROWSER_CHAT_PARENT_ORIGIN_QUERY_PARAM,
+  browserChatExtensionOriginSchema,
+  browserChatNonceSchema,
+  type BrowserChatMessageV1,
+} from "../../lib/browser-chat-protocol.js";
+
+export function meta() {
+  return [{ title: "Dispatch" }];
+}
+
+export default function BrowserChatRoute() {
+  const t = useT();
+  const [searchParams] = useSearchParams();
+  const nonce = browserChatNonceSchema.safeParse(
+    searchParams.get(BROWSER_CHAT_NONCE_QUERY_PARAM),
+  );
+  const parentOrigin = browserChatExtensionOriginSchema.safeParse(
+    searchParams.get(BROWSER_CHAT_PARENT_ORIGIN_QUERY_PARAM),
+  );
+  const embedSessionActive = isEmbedAuthActive();
+  const [attachedPage, setAttachedPage] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!nonce.success || !parentOrigin.success || !embedSessionActive) return;
+    return installBrowserChatBridge({
+      nonce: nonce.data,
+      parentOrigin: parentOrigin.data,
+      onAccepted: (message: BrowserChatMessageV1) =>
+        setAttachedPage(message.context.page.title),
+    });
+  }, [
+    nonce.data,
+    nonce.success,
+    parentOrigin.data,
+    parentOrigin.success,
+    embedSessionActive,
+  ]);
+
+  if (!nonce.success || !parentOrigin.success || !embedSessionActive) {
+    return (
+      <main className="grid min-h-screen place-items-center bg-background p-6 text-center">
+        <div className="max-w-sm">
+          <h1 className="text-base font-medium text-foreground">
+            {t("dispatch.pages.browserChatUnavailableTitle")}
+          </h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            {t("dispatch.pages.browserChatUnavailableDescription")}
+          </p>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <main className="flex h-screen min-h-0 flex-col bg-background">
+      <div className="min-h-0 flex-1">
+        <AgentChatSurface
+          mode="panel"
+          className="h-full"
+          defaultMode="chat"
+          storageKey="dispatch"
+          showHeader={false}
+          showTabBar={false}
+          allowSettingsMode={false}
+          dynamicSuggestions={false}
+          suggestions={[]}
+          emptyStateDisplay="hidden"
+          centerComposerWhenEmpty={false}
+          composerPlaceholder={
+            attachedPage
+              ? t("dispatch.pages.browserChatAttachedPlaceholder", {
+                  page: attachedPage,
+                })
+              : t("dispatch.pages.browserChatPlaceholder")
+          }
+        />
+      </div>
+    </main>
+  );
+}

package/src/routes/pages/browser-connect.spec.tsx

@@ -0,0 +1,137 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { MemoryRouter } from "react-router";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import BrowserConnectRoute from "./browser-connect.js";
+
+const browserConnect = vi.hoisted(() => ({
+  mutateAsync: vi.fn(),
+  sendMessage: vi.fn(),
+}));
+
+vi.mock("@agent-native/core/client/hooks", () => ({
+  useActionMutation: () => ({
+    mutateAsync: browserConnect.mutateAsync,
+    isPending: false,
+  }),
+}));
+
+vi.mock("@agent-native/core/client/i18n", () => ({
+  useT: () => (key: string) =>
+    ({
+      "dispatch.pages.browserConnectTitle": "Connect browser chat",
+      "dispatch.pages.browserConnectDescription": "Description",
+      "dispatch.pages.browserConnectInvalid": "Invalid request",
+      "dispatch.pages.browserConnectConnected": "Connected",
+      "dispatch.pages.browserConnectConnecting": "Connecting",
+      "dispatch.pages.browserConnectButton": "Connect",
+      "dispatch.pages.browserConnectOpenFromExtension": "Open from extension",
+      "dispatch.pages.browserConnectFailed": "Connection failed",
+    })[key] ?? key,
+}));
+
+const extensionId = "abcdefghijklmnopabcdefghijklmnop";
+const nonce = "browser-chat-nonce-1234567890";
+
+describe("BrowserConnectRoute", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    browserConnect.mutateAsync.mockReset();
+    browserConnect.sendMessage.mockReset();
+    browserConnect.sendMessage.mockImplementation(
+      (
+        _extensionId: string,
+        _message: Record<string, unknown>,
+        callback: (response: { ok: boolean }) => void,
+      ) => callback({ ok: true }),
+    );
+    vi.stubGlobal("chrome", {
+      runtime: {
+        sendMessage: browserConnect.sendMessage,
+      },
+    });
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("requires an explicit click before sending a one-time session to the exact extension", async () => {
+    browserConnect.mutateAsync.mockResolvedValue({
+      startPath: "/_agent-native/embed/start?ticket=one-time-ticket",
+      expiresAt: 1_900_000_000_000,
+      parentOrigin: `chrome-extension://${extensionId}`,
+      remoteDevice: {
+        id: "remote-device-example",
+        token: "anr_example",
+      },
+      relayBaseUrl: "https://dispatch.example.com",
+    });
+
+    await act(async () => {
+      root.render(
+        <MemoryRouter
+          initialEntries={[
+            `/browser-connect?extensionId=${extensionId}&nonce=${nonce}`,
+          ]}
+        >
+          <BrowserConnectRoute />
+        </MemoryRouter>,
+      );
+    });
+    expect(browserConnect.mutateAsync).not.toHaveBeenCalled();
+
+    await act(async () => {
+      container.querySelector("button")?.click();
+    });
+
+    expect(browserConnect.mutateAsync).toHaveBeenCalledWith({
+      extensionId,
+      nonce,
+    });
+    expect(browserConnect.sendMessage).toHaveBeenCalledWith(
+      extensionId,
+      {
+        type: "browser-chat.session.v1",
+        nonce,
+        startPath: "/_agent-native/embed/start?ticket=one-time-ticket",
+        dispatchOrigin: window.location.origin,
+        expiresAt: "2030-03-17T17:46:40.000Z",
+        remoteDevice: {
+          id: "remote-device-example",
+          token: "anr_example",
+        },
+        relayBaseUrl: "https://dispatch.example.com",
+      },
+      expect.any(Function),
+    );
+    expect(container.textContent).toContain("Connected");
+  });
+
+  it("fails closed on malformed connection parameters", async () => {
+    await act(async () => {
+      root.render(
+        <MemoryRouter
+          initialEntries={[
+            "/browser-connect?extensionId=wildcard&nonce=too-short",
+          ]}
+        >
+          <BrowserConnectRoute />
+        </MemoryRouter>,
+      );
+    });
+
+    expect(container.textContent).toContain("Invalid request");
+    expect(container.querySelector("button")).toBeNull();
+  });
+});

package/src/routes/pages/browser-connect.tsx

@@ -0,0 +1,143 @@
+import { useActionMutation } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { IconBrowserCheck, IconPlugConnected } from "@tabler/icons-react";
+import { useState } from "react";
+import { useSearchParams } from "react-router";
+
+import { Button } from "../../components/ui/button.js";
+import {
+  browserChatExtensionIdSchema,
+  browserChatNonceSchema,
+} from "../../lib/browser-chat-protocol.js";
+
+interface BrowserChatSessionResult {
+  startPath: string;
+  expiresAt: number;
+  parentOrigin: string;
+  remoteDevice: {
+    id: string;
+    token: string;
+  };
+  relayBaseUrl: string;
+}
+
+interface ChromeRuntimeApi {
+  lastError?: { message?: string };
+  sendMessage(
+    extensionId: string,
+    message: Record<string, unknown>,
+    callback: (response?: { ok?: boolean; error?: string }) => void,
+  ): void;
+}
+
+function sendBrowserChatSession(
+  extensionId: string,
+  message: Record<string, unknown>,
+): Promise<void> {
+  const runtime = (
+    globalThis as typeof globalThis & {
+      chrome?: { runtime?: ChromeRuntimeApi };
+    }
+  ).chrome?.runtime;
+  if (!runtime) {
+    return Promise.reject(new Error("extension-unavailable"));
+  }
+
+  return new Promise((resolve, reject) => {
+    runtime.sendMessage(extensionId, message, (response) => {
+      const runtimeError = runtime.lastError?.message;
+      if (runtimeError) {
+        reject(new Error(runtimeError));
+      } else if (response?.ok !== true) {
+        reject(new Error("extension-rejected"));
+      } else {
+        resolve();
+      }
+    });
+  });
+}
+
+export function meta() {
+  return [{ title: "Dispatch" }];
+}
+
+export default function BrowserConnectRoute() {
+  const t = useT();
+  const [searchParams] = useSearchParams();
+  const extensionId = searchParams.get("extensionId") ?? "";
+  const parsedExtensionId = browserChatExtensionIdSchema.safeParse(extensionId);
+  const nonce = browserChatNonceSchema.safeParse(searchParams.get("nonce"));
+  const requestIsValid = parsedExtensionId.success && nonce.success;
+  const [connected, setConnected] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const createSession = useActionMutation<
+    BrowserChatSessionResult,
+    { extensionId: string; nonce: string }
+  >("create-browser-chat-session", {});
+
+  const connect = async () => {
+    if (!requestIsValid) return;
+    setError(null);
+    try {
+      const session = await createSession.mutateAsync({
+        extensionId,
+        nonce: nonce.data,
+      });
+      await sendBrowserChatSession(extensionId, {
+        type: "browser-chat.session.v1",
+        nonce: nonce.data,
+        startPath: session.startPath,
+        dispatchOrigin: window.location.origin,
+        expiresAt: new Date(session.expiresAt).toISOString(),
+        remoteDevice: session.remoteDevice,
+        relayBaseUrl: session.relayBaseUrl,
+      });
+      setConnected(true);
+    } catch (cause) {
+      setError(
+        cause instanceof Error && cause.message === "extension-unavailable"
+          ? t("dispatch.pages.browserConnectOpenFromExtension")
+          : t("dispatch.pages.browserConnectFailed"),
+      );
+    }
+  };
+
+  return (
+    <main className="grid min-h-screen place-items-center bg-background p-6">
+      <div className="w-full max-w-sm rounded-2xl border bg-card p-6 text-center shadow-sm">
+        <IconBrowserCheck size={36} className="mx-auto text-muted-foreground" />
+        <h1 className="mt-4 text-lg font-semibold text-foreground">
+          {t("dispatch.pages.browserConnectTitle")}
+        </h1>
+        <p className="mt-2 text-sm text-muted-foreground">
+          {t("dispatch.pages.browserConnectDescription")}
+        </p>
+        {!requestIsValid ? (
+          <p className="mt-4 text-sm text-destructive">
+            {t("dispatch.pages.browserConnectInvalid")}
+          </p>
+        ) : connected ? (
+          <p className="mt-4 text-sm font-medium text-foreground">
+            {t("dispatch.pages.browserConnectConnected")}
+          </p>
+        ) : (
+          <Button
+            className="mt-5 w-full gap-2"
+            onClick={() => void connect()}
+            disabled={createSession.isPending}
+          >
+            <IconPlugConnected size={16} />
+            {createSession.isPending
+              ? t("dispatch.pages.browserConnectConnecting")
+              : t("dispatch.pages.browserConnectButton")}
+          </Button>
+        )}
+        {error ? (
+          <p className="mt-3 text-sm text-destructive" role="alert">
+            {error}
+          </p>
+        ) : null}
+      </div>
+    </main>
+  );
+}

package/src/server/lib/browser-extension-allowlist.spec.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  isBrowserExtensionIdAllowed,
+  resolveAllowedBrowserExtensionIds,
+} from "./browser-extension-allowlist.js";
+
+const extensionId = "abcdefghijklmnopabcdefghijklmnop";
+
+describe("browser extension allowlist", () => {
+  it("combines exact configured and environment ids", () => {
+    expect(
+      resolveAllowedBrowserExtensionIds(
+        [extensionId, extensionId],
+        "ponmlkjihgfedcbaponmlkjihgfedcba",
+      ),
+    ).toEqual(new Set([extensionId, "ponmlkjihgfedcbaponmlkjihgfedcba"]));
+  });
+
+  it("fails loudly for invalid entries instead of producing an empty list", () => {
+    expect(() =>
+      resolveAllowedBrowserExtensionIds([], "not-an-extension-id"),
+    ).toThrow("invalid Chrome extension id");
+    expect(() =>
+      resolveAllowedBrowserExtensionIds(
+        Array.from({ length: 65 }, (_, index) => {
+          const suffix = index
+            .toString(16)
+            .padStart(2, "0")
+            .replace(/[0-9a-f]/g, (digit) =>
+              "abcdefghijklmnop".charAt("0123456789abcdef".indexOf(digit)),
+            );
+          return `${"a".repeat(30)}${suffix}`;
+        }),
+      ),
+    ).toThrow("cannot exceed 64");
+  });
+
+  it("requires an exact production allowlist match", () => {
+    expect(
+      isBrowserExtensionIdAllowed({
+        extensionId,
+        configIds: [extensionId],
+        nodeEnv: "production",
+        requestOrigin: "https://dispatch.example.com",
+      }),
+    ).toBe(true);
+    expect(
+      isBrowserExtensionIdAllowed({
+        extensionId,
+        configIds: [],
+        nodeEnv: "production",
+        requestOrigin: "http://localhost:8092",
+      }),
+    ).toBe(false);
+  });
+
+  it("allows unpacked extension ids only from a loopback non-production app", () => {
+    expect(
+      isBrowserExtensionIdAllowed({
+        extensionId,
+        configIds: [],
+        nodeEnv: "development",
+        requestOrigin: "http://localhost:8092",
+      }),
+    ).toBe(true);
+    expect(
+      isBrowserExtensionIdAllowed({
+        extensionId,
+        configIds: [],
+        nodeEnv: "development",
+        requestOrigin: "https://dispatch.example.com",
+      }),
+    ).toBe(false);
+  });
+});

package/src/server/lib/browser-extension-allowlist.ts

@@ -0,0 +1,58 @@
+const CHROME_EXTENSION_ID = /^[a-p]{32}$/;
+const MAX_BROWSER_EXTENSION_IDS = 64;
+
+export function resolveAllowedBrowserExtensionIds(
+  configIds: readonly string[] = [],
+  envValue = process.env.AGENT_NATIVE_BROWSER_EXTENSION_IDS,
+): Set<string> {
+  const ids = [...configIds, ...(envValue?.split(",") ?? [])]
+    .map((value) => value.trim())
+    .filter(Boolean);
+  const invalid = ids.find((value) => !CHROME_EXTENSION_ID.test(value));
+  if (invalid) {
+    throw new Error(
+      "Browser extension allowlist contains an invalid Chrome extension id.",
+    );
+  }
+  const uniqueIds = new Set(ids);
+  if (uniqueIds.size > MAX_BROWSER_EXTENSION_IDS) {
+    throw new Error(
+      `Browser extension allowlist cannot exceed ${MAX_BROWSER_EXTENSION_IDS} ids.`,
+    );
+  }
+  return uniqueIds;
+}
+
+function isLoopbackOrigin(value: string | undefined): boolean {
+  if (!value) return false;
+  try {
+    const url = new URL(value);
+    return (
+      (url.protocol === "http:" || url.protocol === "https:") &&
+      (url.hostname === "localhost" ||
+        url.hostname === "127.0.0.1" ||
+        url.hostname === "[::1]")
+    );
+  } catch {
+    return false;
+  }
+}
+
+export function isBrowserExtensionIdAllowed(options: {
+  extensionId: string;
+  configIds?: readonly string[];
+  envValue?: string;
+  nodeEnv?: string;
+  requestOrigin?: string;
+}): boolean {
+  if (!CHROME_EXTENSION_ID.test(options.extensionId)) return false;
+  const configured = resolveAllowedBrowserExtensionIds(
+    options.configIds,
+    options.envValue,
+  );
+  if (configured.has(options.extensionId)) return true;
+
+  return (
+    options.nodeEnv !== "production" && isLoopbackOrigin(options.requestOrigin)
+  );
+}

package/src/server/lib/usage-metrics-store.spec.ts

@@ -7,6 +7,8 @@ const mocks = vi.hoisted(() => ({
   getSetting: vi.fn(async () => null),
   getUsageSummary: vi.fn(),
   listWorkspaceApps: vi.fn(),
+  currentOrgId: vi.fn((): string | null => null),
+  currentOwnerEmail: vi.fn(() => "owner@example.test"),
   registerBuiltinEngines: vi.fn(),
 }));
 
@@ -45,17 +47,36 @@ vi.mock("./app-creation-store.js", () => ({
 }));
 
 vi.mock("./dispatch-store.js", () => ({
-  currentOrgId: () => null,
-  currentOwnerEmail: () => "owner@example.test",
+  currentOrgId: () => mocks.currentOrgId(),
+  currentOwnerEmail: () => mocks.currentOwnerEmail(),
 }));
 
 const { listDispatchUsageMetrics } = await import("./usage-metrics-store.js");
 
 afterEach(() => {
   vi.clearAllMocks();
+  mocks.currentOrgId.mockReturnValue(null);
+  mocks.currentOwnerEmail.mockReturnValue("owner@example.test");
 });
 
 describe("listDispatchUsageMetrics", () => {
+  it("rejects non-admin organization members with a typed 403", async () => {
+    mocks.currentOrgId.mockReturnValue("org-a");
+    mocks.currentOwnerEmail.mockReturnValue("member@example.test");
+    mocks.execute.mockResolvedValue({ rows: [{ role: "member" }] });
+
+    await expect(
+      listDispatchUsageMetrics({ sinceDays: 30 }),
+    ).rejects.toMatchObject({
+      name: "ForbiddenError",
+      statusCode: 403,
+      message:
+        "Only organization owners and admins can view workspace usage metrics.",
+    });
+    expect(mocks.getUsageSummary).not.toHaveBeenCalled();
+    expect(mocks.listWorkspaceApps).not.toHaveBeenCalled();
+  });
+
   it("returns empty metrics when usage storage bootstrap and reads fail", async () => {
     mocks.getUsageSummary.mockRejectedValue(new Error("database is locked"));
     mocks.execute.mockRejectedValue(new Error("no such table: token_usage"));

package/src/server/lib/usage-metrics-store.ts

@@ -8,6 +8,7 @@ import {
 } from "@agent-native/core/agent/engine";
 import { getDbExec } from "@agent-native/core/db";
 import { getSetting } from "@agent-native/core/settings";
+import { ForbiddenError } from "@agent-native/core/sharing";
 import {
   getUsageSummary,
   usageBillingForEngine,
@@ -395,7 +396,7 @@ async function assertCanViewMetrics(): Promise<{
   if (!orgId) {
     return { viewerEmail, orgId, role };
   }
-  throw new Error(
+  throw new ForbiddenError(
     "Only organization owners and admins can view workspace usage metrics.",
   );
 }