@agent-native/dispatch 0.0.0-beta-20260819155526

package/src/components/workspace-template-card.spec.tsx

@@ -0,0 +1,228 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { TooltipProvider } from "./ui/tooltip";
+import {
+  WorkspaceTemplateCard,
+  WorkspaceTemplatesSection,
+  type CuratedWorkspaceTemplate,
+} from "./workspace-template-card";
+
+const clientState = vi.hoisted(() => ({
+  mutation: vi.fn(),
+  options: null as Record<string, unknown> | null,
+  isPending: false,
+}));
+
+const toast = vi.hoisted(() => ({
+  error: vi.fn(),
+  success: vi.fn(),
+}));
+
+vi.mock("@agent-native/core/client/hooks", () => ({
+  useActionMutation: (_name: string, options: Record<string, unknown>) => {
+    clientState.options = options;
+    return {
+      mutate: clientState.mutation,
+      isPending: clientState.isPending,
+    };
+  },
+}));
+
+vi.mock("sonner", () => ({ toast }));
+
+const template: CuratedWorkspaceTemplate = {
+  id: "weekly-report",
+  name: "Weekly report",
+  description: "Turn workspace activity into a concise weekly report.",
+  source: "RevOps",
+  integrationSetup: "Connect your CRM after installing the app.",
+  liveUrl: "https://reports.example.test",
+};
+
+describe("WorkspaceTemplateCard", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    clientState.mutation.mockReset();
+    clientState.options = null;
+    clientState.isPending = false;
+    toast.error.mockReset();
+    toast.success.mockReset();
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    document.body
+      .querySelectorAll("[data-radix-portal]")
+      .forEach((portal) => portal.remove());
+    vi.unstubAllGlobals();
+  });
+
+  it("keeps template cards concise and moves setup context into the add flow", async () => {
+    await act(async () => {
+      root.render(
+        <TooltipProvider>
+          <WorkspaceTemplateCard template={template} />
+        </TooltipProvider>,
+      );
+    });
+
+    expect(container.textContent).toContain("Weekly report");
+    expect(container.textContent).not.toContain("RevOps");
+    expect(container.textContent).not.toContain(
+      "Connect your CRM after installing the app.",
+    );
+
+    const trigger = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Add app"),
+    );
+    expect(trigger).not.toBeUndefined();
+    await act(async () => trigger?.click());
+    expect(document.body.textContent).toContain(
+      "Connect your CRM after installing the app.",
+    );
+
+    const liveLink = container.querySelector<HTMLAnchorElement>(
+      'a[href="https://reports.example.test"]',
+    );
+    expect(liveLink?.textContent).toContain("View the live app");
+    expect(liveLink?.target).toBe("_blank");
+
+    await act(async () => {
+      root.render(
+        <TooltipProvider>
+          <WorkspaceTemplateCard
+            template={{ ...template, liveUrl: null, productUrl: null }}
+          />
+        </TooltipProvider>,
+      );
+    });
+    expect(
+      container.querySelector('a[href="https://reports.example.test"]'),
+    ).toBe(null);
+  });
+
+  it("creates an app with the default app id and allows an override", async () => {
+    await act(async () => {
+      root.render(
+        <TooltipProvider>
+          <WorkspaceTemplateCard template={template} defaultAppId="pipeline" />
+        </TooltipProvider>,
+      );
+    });
+
+    const trigger = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Add app"),
+    );
+    expect(trigger).not.toBeUndefined();
+
+    await act(async () => {
+      trigger?.click();
+    });
+
+    const input = document.body.querySelector<HTMLInputElement>(
+      "#workspace-template-app-id-weekly-report",
+    );
+    expect(input?.value).toBe("pipeline");
+
+    await act(async () => {
+      if (!input) throw new Error("Expected app id input");
+      Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        "value",
+      )?.set?.call(input, "Sales Ops");
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    });
+
+    await act(async () => {
+      document.body.querySelector<HTMLFormElement>("form")?.requestSubmit();
+    });
+
+    expect(clientState.mutation).toHaveBeenCalledWith({
+      templateId: "weekly-report",
+      appId: "sales-ops",
+    });
+
+    await act(async () => {
+      await (clientState.options?.onSuccess as (result: unknown) => unknown)({
+        appId: "sales-ops",
+      });
+    });
+    expect(toast.success).toHaveBeenCalledWith(
+      "Template app creation started.",
+    );
+  });
+
+  it("keeps add app available in catalog cards", async () => {
+    await act(async () => {
+      root.render(
+        <TooltipProvider>
+          <WorkspaceTemplateCard template={template} catalog />
+        </TooltipProvider>,
+      );
+    });
+
+    const settingsButton = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Settings for Weekly report"]',
+    );
+    expect(settingsButton).not.toBeNull();
+    await act(async () => {
+      settingsButton?.dispatchEvent(
+        new MouseEvent("pointerdown", { bubbles: true, button: 0 }),
+      );
+    });
+    const addItem = Array.from(
+      document.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+    ).find((item) => item.textContent?.includes("Add app"));
+    expect(addItem).not.toBeUndefined();
+    const settingsMenu = document.querySelector<HTMLElement>('[role="menu"]');
+    expect(settingsMenu?.className).toContain("w-48");
+    expect(settingsMenu?.className).toContain("bg-popover");
+    expect(settingsMenu?.className).toContain("shadow-md");
+    expect(addItem?.querySelector("svg")).not.toBeNull();
+    await act(async () => addItem?.click());
+    expect(document.body.textContent).toContain("Choose the URL-safe id");
+    expect(
+      container.querySelector('a[href="https://reports.example.test"]'),
+    ).not.toBeNull();
+  });
+
+  it("accepts the list action envelope and renders installed state", async () => {
+    await act(async () => {
+      root.render(
+        <TooltipProvider>
+          <WorkspaceTemplatesSection
+            templates={{
+              templates: [
+                {
+                  ...template,
+                  installed: true,
+                  liveUrl: null,
+                  productUrl: null,
+                },
+              ],
+            }}
+            title="Curated templates"
+          />
+        </TooltipProvider>,
+      );
+    });
+
+    expect(container.textContent).toContain("Curated templates");
+    expect(container.textContent).toContain("Installed");
+    expect(container.querySelector('a[href^="https://"]')).toBeNull();
+    const addButton = Array.from(container.querySelectorAll("button")).find(
+      (button) => button.textContent?.includes("Add app"),
+    );
+    expect(addButton).not.toHaveProperty("disabled", true);
+  });
+});

package/src/components/workspace-template-card.tsx

@@ -0,0 +1,363 @@
+import { useActionMutation } from "@agent-native/core/client/hooks";
+import { normalizeWorkspaceAppId } from "@agent-native/core/shared";
+import {
+  IconArrowUpRight,
+  IconCircleCheck,
+  IconPlus,
+  IconPlugConnected,
+} from "@tabler/icons-react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { toast } from "sonner";
+
+import { cn } from "../lib/utils";
+import { AppIcon } from "./app-icon";
+import { AppListRow } from "./app-list-row";
+import { AppOpenActions } from "./app-open-actions";
+import { AppRowSettings } from "./app-row-settings";
+import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog";
+import { Input } from "./ui/input";
+import { Label } from "./ui/label";
+import { Spinner } from "./ui/spinner";
+
+export interface CuratedWorkspaceTemplate {
+  id?: string | null;
+  templateId?: string | null;
+  appId?: string | null;
+  name: string;
+  description?: string | null;
+  source?: string | null;
+  sourceDescription?: string | null;
+  icon?: string | null;
+  color?: string | null;
+  integrationSetup?: string | null;
+  setupNote?: string | null;
+  installed?: boolean | null;
+  installedAppId?: string | null;
+  liveUrl?: string | null;
+  productUrl?: string | null;
+}
+
+export type CuratedWorkspaceTemplatesResult =
+  | CuratedWorkspaceTemplate[]
+  | {
+      templates: CuratedWorkspaceTemplate[];
+    };
+
+export interface WorkspaceTemplateLabels {
+  appId: string;
+  appIdDescription: string;
+  cancel: string;
+  integrationSetup: string;
+  installed: string;
+  remix: string;
+  remixing: string;
+  remixSuccess: string;
+  remixError: string;
+  appIdRequired: string;
+  source: string;
+  openApp: string;
+  viewLiveApp: string;
+}
+
+const DEFAULT_LABELS: WorkspaceTemplateLabels = {
+  appId: "App ID",
+  appIdDescription: "Choose the URL-safe id for the new workspace app.",
+  cancel: "Cancel",
+  integrationSetup: "Integration setup",
+  installed: "Installed",
+  remix: "Add app",
+  remixing: "Creating app…",
+  remixSuccess: "Template app creation started.",
+  remixError: "Could not add this app",
+  appIdRequired: "App ID is required.",
+  source: "Source",
+  openApp: "Open app",
+  viewLiveApp: "View the live app",
+};
+
+export interface WorkspaceTemplateCardProps {
+  template: CuratedWorkspaceTemplate;
+  defaultAppId?: string;
+  labels?: Partial<WorkspaceTemplateLabels>;
+  className?: string;
+  catalog?: boolean;
+  onRemixSuccess?: (
+    result: unknown,
+    template: CuratedWorkspaceTemplate,
+  ) => void;
+}
+
+function templateIdFor(template: CuratedWorkspaceTemplate): string {
+  return template.templateId || template.id || template.appId || template.name;
+}
+
+function defaultAppIdFor(
+  template: CuratedWorkspaceTemplate,
+  defaultAppId?: string,
+): string {
+  if (defaultAppId) return normalizeWorkspaceAppId(defaultAppId) || "new-app";
+  const sourceId =
+    normalizeWorkspaceAppId(template.appId || template.name) || "new-app";
+  return `${sourceId}-app`;
+}
+
+function stringifyError(error: unknown): string {
+  if (error instanceof Error && error.message) return error.message;
+  if (typeof error === "string") return error;
+  return "Unknown error";
+}
+
+function mergeLabels(
+  labels?: Partial<WorkspaceTemplateLabels>,
+): WorkspaceTemplateLabels {
+  return { ...DEFAULT_LABELS, ...labels };
+}
+
+export function WorkspaceTemplateCard({
+  template,
+  defaultAppId,
+  labels: labelOverrides,
+  className,
+  catalog = false,
+  onRemixSuccess,
+}: WorkspaceTemplateCardProps) {
+  const labels = useMemo(() => mergeLabels(labelOverrides), [labelOverrides]);
+  const [open, setOpen] = useState(false);
+  const [appId, setAppId] = useState(() =>
+    defaultAppIdFor(template, defaultAppId),
+  );
+  const isInstalled = Boolean(template.installed || template.installedAppId);
+  const liveUrl = template.liveUrl || template.productUrl;
+  const setupNote = template.integrationSetup || template.setupNote;
+  const remix = useActionMutation("remix-workspace-template", {
+    onSuccess: (result) => {
+      const mode = (result as { mode?: string } | null)?.mode;
+      const message = (result as { message?: string } | null)?.message;
+      if (mode === "builder") {
+        toast.success(labels.remixSuccess);
+      } else if (mode === "builder-unavailable") {
+        toast.error(message || labels.remixError);
+      } else if (mode === "coming-soon") {
+        toast.info(message || labels.remixSuccess);
+      } else {
+        toast.success(labels.remixSuccess);
+      }
+      setOpen(false);
+      onRemixSuccess?.(result, template);
+    },
+    onError: (error) =>
+      toast.error(`${labels.remixError}: ${stringifyError(error)}`),
+  });
+
+  useEffect(() => {
+    if (open) {
+      setAppId(defaultAppIdFor(template, defaultAppId));
+    }
+  }, [defaultAppId, open, template]);
+
+  function submitRemix() {
+    const normalizedAppId = normalizeWorkspaceAppId(appId);
+    if (!normalizedAppId) {
+      toast.error(labels.appIdRequired);
+      return;
+    }
+    setAppId(normalizedAppId);
+
+    remix.mutate({
+      templateId: templateIdFor(template),
+      appId: normalizedAppId,
+    });
+  }
+
+  return (
+    <AppListRow className={cn("items-center", className)}>
+      <AppIcon
+        id={template.id || template.templateId || template.name}
+        name={template.name}
+        icon={template.icon || undefined}
+        color={template.color || undefined}
+        size="sm"
+      />
+      <div className="min-w-0 flex-1">
+        <div className="flex min-w-0 items-center gap-2">
+          <h3 className="truncate text-sm font-semibold text-foreground">
+            {template.name}
+          </h3>
+          {isInstalled ? (
+            <span className="inline-flex shrink-0 items-center gap-1 text-xs text-primary">
+              <IconCircleCheck size={13} />
+              {labels.installed}
+            </span>
+          ) : null}
+        </div>
+        {template.description ? (
+          <p className="mt-0.5 truncate text-xs text-muted-foreground">
+            {template.description}
+          </p>
+        ) : null}
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        {catalog ? (
+          <>
+            {liveUrl ? (
+              <AppOpenActions
+                name={template.name}
+                href={liveUrl}
+                rel="noreferrer"
+                labels={{ openApp: labels.openApp }}
+                showNewTabOption
+              />
+            ) : null}
+            <AppRowSettings
+              name={template.name}
+              addAppLabel={labels.remix}
+              onAddApp={() => setOpen(true)}
+            />
+          </>
+        ) : liveUrl ? (
+          <Button variant="ghost" size="sm" className="shrink-0" asChild>
+            <a href={liveUrl} target="_blank" rel="noreferrer">
+              {labels.viewLiveApp}
+              <IconArrowUpRight />
+            </a>
+          </Button>
+        ) : null}
+
+        <Dialog
+          open={open}
+          onOpenChange={(nextOpen) => {
+            if (!remix.isPending) setOpen(nextOpen);
+          }}
+        >
+          {!catalog ? (
+            <DialogTrigger asChild>
+              <Button type="button" variant="outline" size="sm">
+                <IconPlus />
+                {labels.remix}
+              </Button>
+            </DialogTrigger>
+          ) : null}
+          <DialogContent className="max-w-md">
+            <DialogHeader>
+              <DialogTitle>{template.name}</DialogTitle>
+              <DialogDescription>{labels.appIdDescription}</DialogDescription>
+            </DialogHeader>
+            <form
+              className="flex flex-col gap-4"
+              onSubmit={(event) => {
+                event.preventDefault();
+                submitRemix();
+              }}
+            >
+              <div className="flex flex-col gap-2">
+                <Label
+                  htmlFor={`workspace-template-app-id-${templateIdFor(template)}`}
+                >
+                  {labels.appId}
+                </Label>
+                <Input
+                  id={`workspace-template-app-id-${templateIdFor(template)}`}
+                  value={appId}
+                  autoComplete="off"
+                  onChange={(event) => setAppId(event.target.value)}
+                  onBlur={() => setAppId(normalizeWorkspaceAppId(appId))}
+                  disabled={remix.isPending}
+                />
+              </div>
+              {setupNote ? (
+                <div className="flex items-start gap-2 rounded-lg bg-muted px-3 py-2 text-xs leading-5 text-muted-foreground">
+                  <IconPlugConnected className="mt-0.5 shrink-0" size={15} />
+                  <span>
+                    <span className="font-medium text-foreground">
+                      {labels.integrationSetup}:
+                    </span>{" "}
+                    {setupNote}
+                  </span>
+                </div>
+              ) : null}
+              <DialogFooter>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setOpen(false)}
+                  disabled={remix.isPending}
+                >
+                  {labels.cancel}
+                </Button>
+                <Button type="submit" disabled={remix.isPending}>
+                  {remix.isPending ? <Spinner /> : <IconArrowUpRight />}
+                  {remix.isPending ? labels.remixing : labels.remix}
+                </Button>
+              </DialogFooter>
+            </form>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </AppListRow>
+  );
+}
+
+export interface WorkspaceTemplatesSectionProps {
+  templates: CuratedWorkspaceTemplatesResult;
+  title?: ReactNode;
+  defaultAppId?: string;
+  labels?: Partial<WorkspaceTemplateLabels>;
+  className?: string;
+  cardClassName?: string;
+  listClassName?: string;
+  catalog?: boolean;
+  onRemixSuccess?: (
+    result: unknown,
+    template: CuratedWorkspaceTemplate,
+  ) => void;
+}
+
+function getTemplateItems(
+  result: CuratedWorkspaceTemplatesResult,
+): CuratedWorkspaceTemplate[] {
+  return Array.isArray(result) ? result : result.templates;
+}
+
+export function WorkspaceTemplatesSection({
+  templates: result,
+  title,
+  defaultAppId,
+  labels,
+  className,
+  cardClassName,
+  listClassName,
+  catalog = false,
+  onRemixSuccess,
+}: WorkspaceTemplatesSectionProps) {
+  const templates = getTemplateItems(result);
+
+  if (templates.length === 0) return null;
+
+  return (
+    <section className={cn("flex flex-col gap-3", className)}>
+      {title ? <div className="text-sm font-semibold">{title}</div> : null}
+      <div className={cn("overflow-hidden rounded-2xl bg-card", listClassName)}>
+        {templates.map((template) => (
+          <WorkspaceTemplateCard
+            key={templateIdFor(template)}
+            template={template}
+            defaultAppId={defaultAppId}
+            labels={labels}
+            catalog={catalog}
+            className={cardClassName}
+            onRemixSuccess={onRemixSuccess}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/config.ts

@@ -0,0 +1,42 @@
+/**
+ * Configuration shape for `setupDispatch(config)`. Captures every workspace
+ * customization point we identified during the framework→workspace drift
+ * audit so consumers can express their environment without forking source.
+ */
+
+export interface DispatchAuthConfig {
+  /**
+   * When true, only Google OAuth is shown on the login screen and other
+   * providers are hidden. Used by Builder's own workspace, which enforces
+   * Google SSO for its org.
+   */
+  googleOnly?: boolean;
+  /** Marketing/branding copy passed straight through to `createAuthPlugin`. */
+  marketing?: Record<string, unknown>;
+  /** Exact framework routes that perform their own authentication checks. */
+  publicPaths?: string[];
+}
+
+export interface DispatchIntegrationsConfig {
+  /**
+   * Append or replace the integrations agent's system-prompt guidance.
+   * Pass a string to replace the default; pass a function to mutate it.
+   */
+  systemPrompt?: string | ((defaultPrompt: string) => string);
+}
+
+export interface DispatchConfig {
+  auth?: DispatchAuthConfig;
+  /**
+   * Exact Chrome Web Store or managed-install extension ids allowed to pair
+   * with Dispatch browser chat. Wildcards are not supported.
+   */
+  browserExtensionIds?: readonly string[];
+  /**
+   * App IDs to hide from `list-connected-agents` results. Used to filter
+   * out first-party Builder apps (calls, issues, macros, …) from the
+   * Connected Agents list when those apps aren't shipped to end users.
+   */
+  hiddenAgentIds?: string[];
+  integrations?: DispatchIntegrationsConfig;
+}

package/src/db/index.ts

@@ -0,0 +1,40 @@
+import { createGetDb, getDbExec } from "@agent-native/core/db";
+import { registerShareableResource } from "@agent-native/core/sharing";
+
+import * as schema from "./schema.js";
+
+export const getDb = createGetDb(schema);
+
+registerShareableResource({
+  type: "workspace-app",
+  resourceTable: schema.workspaceApps,
+  sharesTable: schema.workspaceAppShares,
+  displayName: "Workspace app",
+  titleColumn: "name",
+  getResourcePath: (resource) =>
+    typeof resource?.path === "string" ? resource.path : undefined,
+  getDb,
+  allowPublic: false,
+  requireOrgMemberForUserShares: true,
+  supportsGroupShares: true,
+  canManageAccess: async (resource, ctx) => {
+    if (!ctx.userEmail || !ctx.orgId || resource?.orgId !== ctx.orgId) {
+      return false;
+    }
+    const result = await getDbExec().execute({
+      sql: `SELECT 1 FROM org_members
+            WHERE org_id = ? AND LOWER(email) = LOWER(?)
+              AND role IN ('owner', 'admin') LIMIT 1`,
+      args: [ctx.orgId, ctx.userEmail],
+    });
+    return result.rows.length > 0;
+  },
+});
+
+export function db() {
+  return getDb();
+}
+
+export { schema };
+export * from "./schema.js";
+export * from "./migrations.js";