@agent-native/dispatch 0.0.0-beta-20260819155526

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

@@ -0,0 +1,240 @@
+import { appPath } from "@agent-native/core/client/api-path";
+import { useActionQuery } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { withSsrHtmlContentType } from "@agent-native/core/shared";
+import { withBuilderUtmTrackingParams } from "@agent-native/core/shared/builder-link-tracking";
+import {
+  IconArrowLeft,
+  IconArrowUpRight,
+  IconClockHour4,
+} from "@tabler/icons-react";
+import { useEffect, useMemo, useState } from "react";
+import {
+  Link,
+  Navigate,
+  redirect,
+  useParams,
+  type ClientLoaderFunctionArgs,
+  type LoaderFunctionArgs,
+} from "react-router";
+
+import { ActionQueryError } from "../../components/action-query-error";
+import { DispatchShell } from "../../components/dispatch-shell";
+import { Badge } from "../../components/ui/badge";
+import { Button } from "../../components/ui/button";
+import { Spinner } from "../../components/ui/spinner";
+import { resolveServerCatchAllTarget } from "../../lib/catch-all-target";
+import {
+  navigateToWorkspaceApp,
+  workspaceAppHref,
+  type WorkspaceAppSummary,
+} from "../../lib/workspace-apps";
+
+export function meta() {
+  return [{ title: "Workspace app - Dispatch" }];
+}
+
+/**
+ * Catch-all for `/dispatch/<segment>` paths that don't match an explicit
+ * Dispatch route. When `<segment>` is the id of a workspace app sibling
+ * (e.g. `/dispatch/todo` after Builder.io routes a "navigate to /todo"
+ * call through Dispatch's mount point), bounce to the absolute `/<appId>`
+ * so the user lands on the actual app instead of a 404 inside Dispatch.
+ *
+ * Server-side redirect: we resolve the workspace app manifest via the
+ * shared `loadWorkspaceAppsManifest()` helper, which checks the
+ * `AGENT_NATIVE_WORKSPACE_APPS_JSON` env var, then the
+ * `.agent-native/workspace-apps.json` file written by `workspace-deploy.ts`,
+ * then a live filesystem scan of `apps/` for local dev. We then throw
+ * `redirect("/<appId>")`. React Router 7 does not prepend the basename to
+ * absolute paths returned from a loader, so the redirect escapes Dispatch's
+ * `/dispatch` mount cleanly.
+ *
+ * Why a catch-all instead of fixing the agent prompt: Builder.io currently
+ * resolves "navigate to /todo" relative to Dispatch's mount, sending the
+ * user to /dispatch/todo. The same wrong path then gets captured as the
+ * OAuth callbackURL, so Google sign-in completes back at /dispatch/todo
+ * and looks broken. This route fixes both the post-creation navigation
+ * and the OAuth round-trip from a single place.
+ *
+ * Built-in template fallback: when no workspace manifest is available
+ * (framework dev with each template on its own port, hosted dispatch with
+ * no sibling apps), redirect to the matching first-party template's deploy
+ * URL — `http://localhost:<devPort>` in dev, `https://<id>.agent-native.com`
+ * in production. Without this, a user visiting `/forms` on dispatch is
+ * forced to sign in (auth guard) and then lands on this route's "Page not
+ * found" pane after the post-login reload.
+ *
+ * `appId === "dispatch"` short-circuit: when the segment matches Dispatch
+ * itself (e.g. `/dispatch/dispatch`), we go straight to the overview rather
+ * than chaining through `/dispatch` (which polled `useActionQuery` re-fired
+ * `window.location.assign` against and looped forever in production).
+ */
+function dispatchSelfRedirect(appId: string | undefined): string | null {
+  if (appId === "dispatch") return appPath("/overview");
+  return null;
+}
+
+export async function loader({ params }: LoaderFunctionArgs) {
+  const appId = params.appId;
+  if (!appId) return null;
+  const selfTarget = dispatchSelfRedirect(appId);
+  if (selfTarget) throw withSsrHtmlContentType(redirect(selfTarget));
+  const target = await resolveServerCatchAllTarget(appId);
+  if (target) throw withSsrHtmlContentType(redirect(target));
+  return null;
+}
+
+export async function clientLoader({
+  params,
+  serverLoader,
+}: ClientLoaderFunctionArgs) {
+  const selfTarget = dispatchSelfRedirect(params.appId);
+  if (selfTarget) throw withSsrHtmlContentType(redirect(selfTarget));
+  // Defer to the server loader so the built-in template fallback runs on
+  // SPA navigations too (e.g. clicking a `/<template-id>` link inside
+  // dispatch). Without this the client side would only check the workspace
+  // apps query, which never lists the static first-party templates and so
+  // the user would land on the "Page not found" pane.
+  return serverLoader();
+}
+
+export default function WorkspaceAppCatchAllRoute() {
+  const t = useT();
+  const { appId } = useParams();
+  const appsQuery = useActionQuery("list-workspace-apps", {
+    includeAgentCards: false,
+  });
+  const { data: apps = [], isLoading } = appsQuery;
+  const app = useMemo(
+    () =>
+      (apps as WorkspaceAppSummary[]).find((item) => item.id === appId) ?? null,
+    [appId, apps],
+  );
+  const href = app ? workspaceAppHref(app) : null;
+  const isSelfReference = appId === "dispatch";
+  const hasApp = app !== null;
+  const appIsPending = app?.status === "pending";
+  const [navigationFailed, setNavigationFailed] = useState(false);
+
+  useEffect(() => {
+    if (isSelfReference) return;
+    if (!hasApp || appIsPending || !href) {
+      setNavigationFailed(false);
+      return;
+    }
+    setNavigationFailed(!navigateToWorkspaceApp(href));
+  }, [appIsPending, hasApp, href, isSelfReference]);
+
+  if (isSelfReference) {
+    return <Navigate to={appPath("/overview")} replace />;
+  }
+
+  if (appsQuery.isError) {
+    return (
+      <DispatchShell
+        title={t("dispatch.pages.dataLoadFailed")}
+        description={t("dispatch.pages.pageNotFoundDescription")}
+      >
+        <ActionQueryError
+          error={appsQuery.error}
+          onRetry={() => void appsQuery.refetch()}
+        />
+      </DispatchShell>
+    );
+  }
+
+  if (navigationFailed && href) {
+    return (
+      <DispatchShell
+        title={t("dispatch.pages.dataLoadFailed")}
+        description={t("dispatch.pages.pageNotFoundDescription")}
+      >
+        <ActionQueryError
+          onRetry={() => setNavigationFailed(!navigateToWorkspaceApp(href))}
+        />
+      </DispatchShell>
+    );
+  }
+
+  if (
+    (isLoading && !app) ||
+    (app && app.status !== "pending" && href && !navigationFailed)
+  ) {
+    return (
+      <div className="flex h-screen w-full items-center justify-center">
+        <Spinner className="size-8" />
+      </div>
+    );
+  }
+
+  return (
+    <DispatchShell
+      title={app?.name || t("dispatch.pages.pageNotFound")}
+      description={t("dispatch.pages.pageNotFoundDescription")}
+    >
+      <div className="max-w-2xl rounded-lg bg-card p-5">
+        <Button asChild size="sm" variant="ghost" className="-ml-2 mb-4">
+          <Link to={appPath("/overview")}>
+            <IconArrowLeft size={15} className="mr-1.5" />
+            {t("dispatch.nav.overview")}
+          </Link>
+        </Button>
+
+        {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} />
+                {t("dispatch.pages.building")}
+              </Badge>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              {t("dispatch.pages.appBuildingPrefix")}{" "}
+              <span className="font-mono text-foreground">{app.path}</span>{" "}
+              {t("dispatch.pages.appBuildingSuffix")}
+            </p>
+            {app.builderUrl ? (
+              <Button asChild>
+                <a
+                  href={withBuilderUtmTrackingParams(app.builderUrl, {
+                    campaign: "product",
+                    content: "dispatch_branch",
+                  })}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {t("dispatch.pages.openBuilderBranch", {
+                    defaultValue: "Open in Builder",
+                  })}
+                  <IconArrowUpRight size={15} className="ml-1.5" />
+                </a>
+              </Button>
+            ) : null}
+          </div>
+        ) : (
+          <div className="space-y-3">
+            <h2 className="text-base font-semibold text-foreground">
+              {t("dispatch.pages.pageNotFound")}
+            </h2>
+            <p className="text-sm text-muted-foreground">
+              <span className="font-mono text-foreground">/{appId}</span> isn't
+              {t("dispatch.pages.notDispatchOrWorkspaceApp")}
+            </p>
+            <Button asChild>
+              <Link to={appPath("/apps")}>
+                {t("dispatch.pages.browseApps")}
+              </Link>
+            </Button>
+          </div>
+        )}
+      </div>
+    </DispatchShell>
+  );
+}

package/src/routes/pages/_index.test.ts

@@ -0,0 +1,34 @@
+import { SSR_QUERY_CACHE_KEY_HEADER } from "@agent-native/core/shared";
+import { describe, expect, it } from "vitest";
+
+import { clientLoader, loader } from "./_index";
+
+function expectOverviewRedirect(
+  routeLoader: typeof loader | typeof clientLoader,
+) {
+  let thrown: unknown;
+  try {
+    routeLoader({
+      url: new URL("https://dispatch.example/?thread=thread-1"),
+    } as never);
+  } catch (error) {
+    thrown = error;
+  }
+
+  expect(thrown).toBeInstanceOf(Response);
+  const response = thrown as Response;
+  expect(response.status).toBe(302);
+  expect(response.headers.get("location")).toBe("/overview?thread=thread-1");
+  expect(response.headers.get("content-type")).toBe("text/html; charset=utf-8");
+  expect(response.headers.get(SSR_QUERY_CACHE_KEY_HEADER)).toBe("query");
+}
+
+describe("Dispatch root route", () => {
+  it("marks the server redirect as cacheable HTML", () => {
+    expectOverviewRedirect(loader);
+  });
+
+  it("marks the client redirect as cacheable HTML", () => {
+    expectOverviewRedirect(clientLoader);
+  });
+});

package/src/routes/pages/_index.tsx

@@ -0,0 +1,65 @@
+import { appPath } from "@agent-native/core/client/api-path";
+import { withSsrHtmlContentType } from "@agent-native/core/shared";
+import { redirect, type LoaderFunctionArgs } from "react-router";
+
+import { Spinner } from "../../components/ui/spinner";
+
+const SEO_TITLE =
+  "Dispatch - Open Source workspace control plane for AI agents";
+const SEO_DESCRIPTION =
+  "Open Source workspace control plane for AI agents to manage apps, secrets, approvals, messages, jobs, and cross-app delegation.";
+
+export function meta() {
+  return [
+    { title: SEO_TITLE },
+    {
+      name: "description",
+      content: SEO_DESCRIPTION,
+    },
+    { property: "og:title", content: SEO_TITLE },
+    { property: "og:description", content: SEO_DESCRIPTION },
+    { name: "twitter:card", content: "summary" },
+    { name: "twitter:title", content: SEO_TITLE },
+    { name: "twitter:description", content: SEO_DESCRIPTION },
+  ];
+}
+
+/**
+ * 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 and opens `/chat`.
+ */
+function buildTarget(url: URL): string {
+  return appPath(`/overview${url.search}${url.hash}`);
+}
+
+export function loader({ url }: LoaderFunctionArgs) {
+  throw withSsrHtmlContentType(redirect(buildTarget(url)), {
+    varyByQuery: true,
+  });
+}
+
+export function clientLoader({ url }: LoaderFunctionArgs) {
+  throw withSsrHtmlContentType(redirect(buildTarget(url)), {
+    varyByQuery: true,
+  });
+}
+
+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/admin._index.tsx

@@ -0,0 +1,107 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { IconChevronRight } from "@tabler/icons-react";
+import { Link } from "react-router";
+
+import {
+  useAdminNavGroups,
+  type AdminNavGroup,
+} from "../../components/admin-navigation";
+import { DispatchShell } from "../../components/dispatch-shell";
+
+export function meta() {
+  return [{ title: "Admin — Dispatch" }];
+}
+
+export default function AdminOverviewRoute() {
+  const t = useT();
+  const groups = useAdminNavGroups();
+
+  return (
+    <DispatchShell
+      title={t("dispatch.nav.admin", { defaultValue: "Admin" })}
+      description={t("dispatch.pages.adminDescription", {
+        defaultValue: "Workspace controls and operations",
+      })}
+    >
+      <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+        {groups.map((group, index) => (
+          <AdminAreaCard key={group.id} group={group} index={index} />
+        ))}
+      </section>
+    </DispatchShell>
+  );
+}
+
+const GROUP_DESCRIPTIONS: Record<string, string> = {
+  workspace: "Apps, resources, and workspace setup",
+  operations: "Monitor runs, metrics, and audit history",
+  automation: "Control scheduled work and delivery",
+  connections: "Manage integrations, secrets, and messaging",
+  "agent-platform": "Manage connected agents and dreams",
+  "workspace-extensions": "Tools added by this workspace",
+};
+
+const GROUP_TONES = [
+  "bg-primary/10 text-primary",
+  "bg-secondary text-secondary-foreground",
+  "bg-accent text-accent-foreground",
+  "bg-muted text-foreground",
+] as const;
+
+function AdminAreaCard({
+  group,
+  index,
+}: {
+  group: AdminNavGroup;
+  index: number;
+}) {
+  const t = useT();
+  const GroupIcon = group.items[0]?.icon;
+  const tone = GROUP_TONES[index % GROUP_TONES.length];
+
+  return (
+    <div className="rounded-2xl border border-transparent bg-card p-4 transition-[border-color,background-color] hover:border-border hover:bg-card/80">
+      <div className="flex items-start gap-3">
+        <span
+          className={`flex size-10 shrink-0 items-center justify-center rounded-xl ${tone}`}
+        >
+          {GroupIcon ? <GroupIcon size={19} /> : null}
+        </span>
+        <div className="min-w-0">
+          <h2 className="text-sm font-semibold text-foreground">
+            {t(group.labelKey, { defaultValue: group.label })}
+          </h2>
+          <p className="mt-1 text-xs leading-5 text-muted-foreground">
+            {GROUP_DESCRIPTIONS[group.id] || "Workspace tools and controls"}
+          </p>
+        </div>
+      </div>
+
+      <div className="mt-4 space-y-1">
+        {group.items
+          .filter((item) => item.id !== "admin-overview")
+          .map((item) => {
+            const ItemIcon = item.icon;
+            return (
+              <Link
+                key={item.id}
+                to={item.adminTo ?? item.to}
+                className="group flex min-h-9 items-center gap-2 rounded-lg px-2 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+              >
+                {ItemIcon ? <ItemIcon size={15} className="shrink-0" /> : null}
+                <span className="min-w-0 flex-1 truncate">
+                  {t(`dispatch.nav.${item.id}`, {
+                    defaultValue: item.label,
+                  })}
+                </span>
+                <IconChevronRight
+                  size={15}
+                  className="shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+                />
+              </Link>
+            );
+          })}
+      </div>
+    </div>
+  );
+}

package/src/routes/pages/admin.tsx

@@ -0,0 +1,15 @@
+import { Outlet } from "react-router";
+
+import { AdminShell } from "../../components/admin-navigation";
+
+export function meta() {
+  return [{ title: "Admin — Dispatch" }];
+}
+
+export default function AdminRoute() {
+  return (
+    <AdminShell>
+      <Outlet />
+    </AdminShell>
+  );
+}

package/src/routes/pages/agent-integrations.tsx

@@ -0,0 +1,24 @@
+import { useAgentSettingsTabs } from "@agent-native/core/client/settings";
+
+import { DispatchShell } from "../../components/dispatch-shell";
+
+export function meta() {
+  return [{ title: "Integrations — Dispatch" }];
+}
+
+export default function AgentIntegrationsRoute() {
+  const settingsTabs = useAgentSettingsTabs();
+  const integrationsTab = settingsTabs.find((tab) => tab.id === "integrations");
+  if (!integrationsTab) {
+    throw new Error("The shared Integrations settings view is unavailable.");
+  }
+
+  return (
+    <DispatchShell
+      title="Integrations"
+      description="Connect the tools and services available to your agent."
+    >
+      <div className="mx-auto w-full max-w-5xl">{integrationsTab.content}</div>
+    </DispatchShell>
+  );
+}