@agent-native/dispatch 0.1.1

package/src/routes/index.ts

@@ -0,0 +1,51 @@
+import { type RouteConfig, route, index } from "@react-router/dev/routes";
+
+/**
+ * Dispatch's routes as a programmatic `RouteConfig[]`. Splat into the
+ * consumer's `app/routes.ts`:
+ *
+ * ```ts
+ * import { type RouteConfig } from "@react-router/dev/routes";
+ * import { dispatchRoutes } from "@agent-native/dispatch/routes";
+ *
+ * export default [
+ *   ...localRoutes,    // consumer's own routes win on collision
+ *   ...dispatchRoutes, // dispatch fills in everything else
+ * ] satisfies RouteConfig;
+ * ```
+ *
+ * Route precedence: React Router 7 matches in declaration order, so
+ * placing `dispatchRoutes` LAST means consumer-defined routes with the
+ * same path take precedence. To override a single dispatch route, define
+ * it in your local routes; to keep it, omit it.
+ *
+ * The `file` paths below resolve relative to this file at runtime — they
+ * point into `packages/dispatch/dist/routes/pages/*.js` after build.
+ *
+ * Naming maps the original flatRoutes file conventions:
+ *   `_index.tsx`        → `index(...)`
+ *   `<name>.tsx`        → `route("<name>", ...)`
+ *   `<a>.$<param>.tsx`  → `route("<a>/:<param>", ...)`
+ *   `<a>._index.tsx`    → flattened as `route("<a>", ...)` (workspace
+ *      versions are bare and don't wrap a parent layout)
+ */
+export const dispatchRoutes: RouteConfig = [
+  index("./pages/_index.js"),
+  route("overview", "./pages/overview.js"),
+  route("apps", "./pages/apps.js"),
+  route("apps/:appId", "./pages/apps.$appId.js"),
+  route("new-app", "./pages/new-app.js"),
+  route("vault", "./pages/vault.js"),
+  route("integrations", "./pages/integrations.js"),
+  route("agents", "./pages/agents.js"),
+  route("workspace", "./pages/workspace.js"),
+  route("messaging", "./pages/messaging.js"),
+  route("destinations", "./pages/destinations.js"),
+  route("identities", "./pages/identities.js"),
+  route("approval", "./pages/approval.js"),
+  route("approvals", "./pages/approvals.js"),
+  route("audit", "./pages/audit.js"),
+  route("team", "./pages/team.js"),
+  route("tools", "./pages/tools._index.js"),
+  route("tools/:id", "./pages/tools.$id.js"),
+];

package/src/routes/pages/_index.tsx

@@ -0,0 +1,51 @@
+import { redirect, type LoaderFunctionArgs } from "react-router";
+import { appPath } from "@agent-native/core/client";
+import { Spinner } from "@/components/ui/spinner";
+
+export function meta() {
+  return [
+    { title: "Agent-Native Dispatch" },
+    {
+      name: "description",
+      content:
+        "Your AI agent manages secrets, orchestrates other agents, and routes messages across your workspace.",
+    },
+  ];
+}
+
+/**
+ * Run the redirect on both the server and the client. A client-only
+ * `<Navigate>` can drop during hydration (before the route tree is fully
+ * attached), leaving the user stranded on `/` with a blank main area while
+ * the layout chrome around it still renders. A `loader` redirect runs as
+ * part of the server response and the navigation completes before the app
+ * hydrates; `clientLoader` covers SPA-style navigations to `/`.
+ *
+ * We preserve `?` and `#` so deep-links like `?thread=<id>` from a Slack
+ * "Open thread" button survive the bounce — `useThreadDeepLink` in
+ * `root.tsx` reads them after the redirect lands on `/overview`.
+ */
+function buildTarget(request: Request): string {
+  const url = new URL(request.url);
+  return appPath(`/overview${url.search}${url.hash}`);
+}
+
+export function loader({ request }: LoaderFunctionArgs) {
+  throw redirect(buildTarget(request));
+}
+
+export function clientLoader({ request }: LoaderFunctionArgs) {
+  throw redirect(buildTarget(request));
+}
+
+export function HydrateFallback() {
+  return (
+    <div className="flex items-center justify-center h-screen w-full">
+      <Spinner className="size-8" />
+    </div>
+  );
+}
+
+export default function IndexPage() {
+  return null;
+}

package/src/routes/pages/agents.tsx

@@ -0,0 +1,23 @@
+import { useActionQuery } from "@agent-native/core/client";
+import { AgentsPanel, type ConnectedAgent } from "@/components/agents-panel";
+import { DispatchShell } from "@/components/dispatch-shell";
+
+export function meta() {
+  return [{ title: "Agents — Dispatch" }];
+}
+
+export default function AgentsRoute() {
+  const { data, refetch } = useActionQuery("list-connected-agents", {});
+
+  return (
+    <DispatchShell
+      title="Agents"
+      description="Dispatch can delegate to the built-in app suite over A2A by default. Add extra agents here only if you want to route work to apps outside that built-in set."
+    >
+      <AgentsPanel
+        agents={(data || []) as ConnectedAgent[]}
+        onRefresh={refetch}
+      />
+    </DispatchShell>
+  );
+}

package/src/routes/pages/approval.tsx

@@ -0,0 +1,243 @@
+import { useSearchParams } from "react-router";
+import {
+  useActionMutation,
+  useActionQuery,
+  isInAgentEmbed,
+  postNavigate,
+  appPath,
+} from "@agent-native/core/client";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  IconCheck,
+  IconX,
+  IconArrowUpRight,
+  IconShieldCheck,
+  IconClock,
+  IconAlertCircle,
+} from "@tabler/icons-react";
+
+export function meta() {
+  return [{ title: "Approval — Dispatch" }];
+}
+
+function StatusBadge({ status }: { status: string }) {
+  if (status === "pending") {
+    return (
+      <Badge
+        variant="outline"
+        className="gap-1.5 border-amber-500/40 bg-amber-500/10 text-amber-600 dark:text-amber-400"
+      >
+        <IconClock size={11} />
+        Pending
+      </Badge>
+    );
+  }
+  if (status === "approved") {
+    return (
+      <Badge
+        variant="outline"
+        className="gap-1.5 border-emerald-500/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
+      >
+        <IconCheck size={11} />
+        Approved
+      </Badge>
+    );
+  }
+  return (
+    <Badge
+      variant="outline"
+      className="gap-1.5 border-red-500/40 bg-red-500/10 text-red-600 dark:text-red-400"
+    >
+      <IconX size={11} />
+      Rejected
+    </Badge>
+  );
+}
+
+export default function ApprovalPreviewRoute() {
+  const [searchParams] = useSearchParams();
+  const id = searchParams.get("id") ?? "";
+
+  const { data: approvals, isLoading } = useActionQuery(
+    "list-dispatch-approvals",
+    {},
+  );
+
+  const approve = useActionMutation("approve-dispatch-change", {
+    onSuccess: () => toast.success("Change approved"),
+  });
+  const reject = useActionMutation("reject-dispatch-change", {
+    onSuccess: () => toast.success("Change rejected"),
+  });
+
+  const inEmbed = isInAgentEmbed();
+
+  const approval = approvals?.find((item) => item.id === id) ?? null;
+
+  if (!id) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background p-6">
+        <div className="w-full max-w-md rounded-2xl border bg-card p-6 text-center">
+          <IconAlertCircle
+            size={32}
+            className="mx-auto mb-3 text-muted-foreground"
+          />
+          <p className="text-sm font-medium text-foreground">
+            No approval id provided
+          </p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            Add <code className="rounded bg-muted px-1">?id=&lt;id&gt;</code> to
+            the URL.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background p-6">
+        <div className="w-full max-w-md rounded-2xl border bg-card p-6 text-center">
+          <p className="text-sm text-muted-foreground">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!approval) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background p-6">
+        <div className="w-full max-w-md rounded-2xl border bg-card p-6 text-center">
+          <IconAlertCircle
+            size={32}
+            className="mx-auto mb-3 text-muted-foreground"
+          />
+          <p className="text-sm font-medium text-foreground">
+            Approval not found
+          </p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            The approval with id{" "}
+            <code className="rounded bg-muted px-1">{id}</code> does not exist.
+          </p>
+          {inEmbed && (
+            <Button
+              size="sm"
+              variant="outline"
+              className="mt-4 gap-1.5"
+              onClick={() => postNavigate(appPath("/approvals"))}
+            >
+              <IconArrowUpRight size={14} />
+              View all approvals
+            </Button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  const isPending = approval.status === "pending";
+
+  return (
+    <div className="flex min-h-screen items-start justify-center bg-background p-6">
+      <div className="w-full max-w-md space-y-4">
+        <div className="rounded-2xl border bg-card p-5">
+          <div className="flex items-start gap-3">
+            <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl border bg-muted text-foreground">
+              <IconShieldCheck size={17} />
+            </div>
+            <div className="min-w-0 flex-1">
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="text-sm font-semibold text-foreground">
+                  {approval.summary}
+                </span>
+                <StatusBadge status={approval.status} />
+              </div>
+              <div className="mt-1 text-xs text-muted-foreground">
+                Requested by{" "}
+                <span className="font-medium text-foreground">
+                  {approval.requestedBy}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-4 space-y-2 rounded-xl border bg-muted/30 px-4 py-3 text-xs">
+            <div className="flex justify-between gap-4">
+              <span className="text-muted-foreground">Change type</span>
+              <span className="font-mono font-medium text-foreground">
+                {approval.changeType}
+              </span>
+            </div>
+            <div className="flex justify-between gap-4">
+              <span className="text-muted-foreground">Target type</span>
+              <span className="font-mono font-medium text-foreground">
+                {approval.targetType}
+              </span>
+            </div>
+            {approval.targetId && (
+              <div className="flex justify-between gap-4">
+                <span className="text-muted-foreground">Target id</span>
+                <span className="truncate font-mono font-medium text-foreground">
+                  {approval.targetId}
+                </span>
+              </div>
+            )}
+            {approval.reviewedBy && (
+              <div className="flex justify-between gap-4">
+                <span className="text-muted-foreground">Reviewed by</span>
+                <span className="font-medium text-foreground">
+                  {approval.reviewedBy}
+                </span>
+              </div>
+            )}
+          </div>
+
+          {isPending && (
+            <div className="mt-4 flex gap-2">
+              <Button
+                size="sm"
+                className="flex-1"
+                disabled={approve.isPending || reject.isPending}
+                onClick={() => approve.mutate({ id: approval.id })}
+              >
+                <IconCheck size={14} className="mr-1.5" />
+                Approve
+              </Button>
+              <Button
+                size="sm"
+                variant="outline"
+                className="flex-1"
+                disabled={approve.isPending || reject.isPending}
+                onClick={() =>
+                  reject.mutate({
+                    id: approval.id,
+                    reason: "Rejected in dispatch UI",
+                  })
+                }
+              >
+                <IconX size={14} className="mr-1.5" />
+                Reject
+              </Button>
+            </div>
+          )}
+        </div>
+
+        {inEmbed && (
+          <div className="flex justify-end">
+            <Button
+              size="sm"
+              variant="ghost"
+              className="gap-1.5 text-muted-foreground"
+              onClick={() => postNavigate(appPath("/approvals"))}
+            >
+              <IconArrowUpRight size={14} />
+              Open in app
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/routes/pages/approvals.tsx

@@ -0,0 +1,157 @@
+import { useMemo, useState } from "react";
+import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import { useOrg } from "@agent-native/core/client/org";
+import { toast } from "sonner";
+import { DispatchShell } from "@/components/dispatch-shell";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+
+export function meta() {
+  return [{ title: "Approvals — Dispatch" }];
+}
+
+export default function ApprovalsRoute() {
+  const { data: settings } = useActionQuery("get-dispatch-settings", {});
+  const { data: approvals } = useActionQuery("list-dispatch-approvals", {});
+  const { data: org } = useOrg();
+  const hasOrg = !!org?.orgId;
+  const [emails, setEmails] = useState("");
+
+  const approverList = useMemo(
+    () =>
+      emails
+        .split(",")
+        .map((value) => value.trim())
+        .filter(Boolean),
+    [emails],
+  );
+
+  const savePolicy = useActionMutation("set-dispatch-approval-policy", {
+    onSuccess: () => toast.success("Approval policy updated"),
+    onError: (err) => toast.error(String(err)),
+  });
+  const approve = useActionMutation("approve-dispatch-change", {
+    onSuccess: () => toast.success("Change approved"),
+    onError: (err) => toast.error(String(err)),
+  });
+  const reject = useActionMutation("reject-dispatch-change", {
+    onSuccess: () => toast.success("Change rejected"),
+    onError: (err) => toast.error(String(err)),
+  });
+
+  return (
+    <DispatchShell
+      title="Approvals"
+      description="Review durable dispatch changes before they apply."
+    >
+      <div className="grid gap-4 xl:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
+        <section className="rounded-2xl border bg-card p-5">
+          <h2 className="text-lg font-semibold text-foreground">
+            Approval policy
+          </h2>
+          <div className="mt-4 space-y-4">
+            <label className="flex items-center justify-between rounded-xl border px-4 py-3">
+              <div>
+                <div className="text-sm font-medium text-foreground">
+                  Require approval for durable changes
+                </div>
+                <div className="mt-1 text-xs text-muted-foreground">
+                  {hasOrg
+                    ? "Applies to saved destinations and dispatch settings today."
+                    : "Requires a team workspace. Set one up on the Team page."}
+                </div>
+              </div>
+              <Switch
+                checked={settings?.enabled || false}
+                disabled={!hasOrg || savePolicy.isPending}
+                onCheckedChange={(checked) =>
+                  savePolicy.mutate({
+                    enabled: checked,
+                    approverEmails: settings?.approverEmails || approverList,
+                  })
+                }
+              />
+            </label>
+            <div className="space-y-2">
+              <div className="text-sm font-medium text-foreground">
+                Approver emails
+              </div>
+              <Input
+                value={emails}
+                onChange={(event) => setEmails(event.target.value)}
+                placeholder={(settings?.approverEmails || []).join(", ")}
+                disabled={!hasOrg}
+              />
+              <Button
+                className="w-full"
+                variant="outline"
+                disabled={!hasOrg || savePolicy.isPending}
+                onClick={() =>
+                  savePolicy.mutate({
+                    enabled: settings?.enabled || false,
+                    approverEmails: approverList,
+                  })
+                }
+              >
+                Save approvers
+              </Button>
+            </div>
+          </div>
+        </section>
+
+        <section className="rounded-2xl border bg-card p-5">
+          <h2 className="text-lg font-semibold text-foreground">
+            Pending and recent requests
+          </h2>
+          <div className="mt-4 space-y-3">
+            {(approvals || []).map((approval) => (
+              <div
+                key={approval.id}
+                className="rounded-xl border bg-muted/30 px-4 py-3"
+              >
+                <div className="flex items-start justify-between gap-3">
+                  <div>
+                    <div className="text-sm font-medium text-foreground">
+                      {approval.summary}
+                    </div>
+                    <div className="mt-1 text-xs text-muted-foreground">
+                      {approval.status} · requested by {approval.requestedBy}
+                    </div>
+                  </div>
+                  {approval.status === "pending" && (
+                    <div className="flex gap-2">
+                      <Button
+                        size="sm"
+                        onClick={() => approve.mutate({ id: approval.id })}
+                      >
+                        Approve
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        onClick={() =>
+                          reject.mutate({
+                            id: approval.id,
+                            reason: "Rejected in dispatch UI",
+                          })
+                        }
+                      >
+                        Reject
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+            {(approvals?.length || 0) === 0 && (
+              <div className="rounded-xl border border-dashed px-4 py-8 text-sm text-muted-foreground">
+                No approval requests yet.
+              </div>
+            )}
+          </div>
+        </section>
+      </div>
+    </DispatchShell>
+  );
+}

package/src/routes/pages/apps.$appId.tsx

@@ -0,0 +1,134 @@
+import { useEffect, useMemo } from "react";
+import { Link, useParams } from "react-router";
+import { useActionQuery } from "@agent-native/core/client";
+import {
+  IconArrowLeft,
+  IconArrowUpRight,
+  IconClockHour4,
+} from "@tabler/icons-react";
+import { DispatchShell } from "@/components/dispatch-shell";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+interface WorkspaceAppSummary {
+  id: string;
+  name: string;
+  description?: string;
+  path: string;
+  url?: string | null;
+  status?: "ready" | "pending";
+  statusLabel?: string;
+  builderUrl?: string | null;
+  branchName?: string | null;
+}
+
+function workspaceAppHref(app: WorkspaceAppSummary): string | null {
+  if (app.status === "pending") return app.builderUrl || null;
+  return app.url || app.path || null;
+}
+
+export function meta() {
+  return [{ title: "Workspace app - Dispatch" }];
+}
+
+export default function WorkspaceAppRoute() {
+  const { appId } = useParams();
+  const { data: apps = [], isLoading } = useActionQuery(
+    "list-workspace-apps",
+    { includeAgentCards: false },
+    {
+      refetchInterval: 2_000,
+    },
+  );
+  const app = useMemo(
+    () =>
+      (apps as WorkspaceAppSummary[]).find((item) => item.id === appId) ?? null,
+    [appId, apps],
+  );
+  const href = app ? workspaceAppHref(app) : null;
+
+  useEffect(() => {
+    if (!app || app.status === "pending" || !href) return;
+    window.location.assign(href);
+  }, [app, href]);
+
+  return (
+    <DispatchShell
+      title={app?.name || "Workspace App"}
+      description="Open a deployed app or check the status of an app being created."
+    >
+      <div className="max-w-2xl rounded-lg border bg-card p-5">
+        <Button asChild size="sm" variant="ghost" className="-ml-2 mb-4">
+          <Link to="/apps">
+            <IconArrowLeft size={15} className="mr-1.5" />
+            Apps
+          </Link>
+        </Button>
+
+        {isLoading && !app ? (
+          <p className="text-sm text-muted-foreground">Loading app status...</p>
+        ) : !app ? (
+          <div className="space-y-3">
+            <h2 className="text-base font-semibold text-foreground">
+              App not found
+            </h2>
+            <p className="text-sm text-muted-foreground">
+              This route is not in the workspace app list yet.
+            </p>
+          </div>
+        ) : app.status === "pending" ? (
+          <div className="space-y-4">
+            <div className="flex flex-wrap items-center gap-2">
+              <h2 className="text-base font-semibold text-foreground">
+                {app.name}
+              </h2>
+              <Badge
+                variant="outline"
+                className="gap-1 border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300"
+              >
+                <IconClockHour4 size={12} />
+                Building
+              </Badge>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              This app is being created. It will be available at{" "}
+              <span className="font-mono text-foreground">{app.path}</span>{" "}
+              after its branch is merged and the workspace deploy finishes.
+            </p>
+            {app.branchName ? (
+              <p className="text-xs text-muted-foreground">
+                Branch: {app.branchName}
+              </p>
+            ) : null}
+            {app.builderUrl ? (
+              <Button asChild>
+                <a href={app.builderUrl} target="_blank" rel="noreferrer">
+                  Open Builder branch
+                  <IconArrowUpRight size={15} className="ml-1.5" />
+                </a>
+              </Button>
+            ) : null}
+          </div>
+        ) : (
+          <div className="space-y-3">
+            <h2 className="text-base font-semibold text-foreground">
+              Opening {app.name}
+            </h2>
+            <p className="text-sm text-muted-foreground">
+              Redirecting to{" "}
+              <span className="font-mono text-foreground">{app.path}</span>.
+            </p>
+            {href ? (
+              <Button asChild>
+                <a href={href}>
+                  Open app
+                  <IconArrowUpRight size={15} className="ml-1.5" />
+                </a>
+              </Button>
+            ) : null}
+          </div>
+        )}
+      </div>
+    </DispatchShell>
+  );
+}