@jami-studio/dispatch 0.13.14

package/src/lib/thread-link-preview.ts

@@ -0,0 +1,160 @@
+export interface ThreadLinkPreview {
+  title: string;
+  description: string;
+  imageUrl: string | null;
+}
+
+const IMAGE_URL_KEYS = new Set([
+  "previewUrl",
+  "thumbnailUrl",
+  "imageUrl",
+  "image",
+  "downloadUrl",
+]);
+
+const GENERATION_TOOL_NAMES = new Set([
+  "generate-image",
+  "generate-image-batch",
+  "refine-image",
+  "rerun-generation-run",
+]);
+
+function safeJsonParse(value: string): unknown {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return null;
+  }
+}
+
+function cleanUrlCandidate(value: string): string {
+  return value
+    .trim()
+    .replace(/[),.;\]}]+$/g, "")
+    .replace(/^["'(<]+/g, "");
+}
+
+function isAbsoluteHttpUrl(value: string): boolean {
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:" || url.protocol === "http:";
+  } catch {
+    return false;
+  }
+}
+
+function isImageLikeUrl(value: string): boolean {
+  try {
+    const url = new URL(value);
+    return (
+      /\.(?:png|jpe?g|webp|gif|avif)(?:$|[?#])/i.test(url.pathname) ||
+      /\/api\/assets\/[^/]+\/content(?:$|[?#])/i.test(url.pathname)
+    );
+  } catch {
+    return false;
+  }
+}
+
+function validPreviewImageUrl(value: unknown, key?: string): string | null {
+  if (typeof value !== "string") return null;
+  const candidate = cleanUrlCandidate(value);
+  if (!isAbsoluteHttpUrl(candidate)) return null;
+  if (key && IMAGE_URL_KEYS.has(key)) return candidate;
+  return isImageLikeUrl(candidate) ? candidate : null;
+}
+
+function imageUrlFromStructuredValue(value: unknown): string | null {
+  if (!value || typeof value !== "object") return null;
+  if (Array.isArray(value)) {
+    for (let i = value.length - 1; i >= 0; i--) {
+      const found = imageUrlFromStructuredValue(value[i]);
+      if (found) return found;
+    }
+    return null;
+  }
+
+  const record = value as Record<string, unknown>;
+  for (const key of IMAGE_URL_KEYS) {
+    const found = validPreviewImageUrl(record[key], key);
+    if (found) return found;
+  }
+  for (const [key, child] of Object.entries(record).reverse()) {
+    const direct = validPreviewImageUrl(child, key);
+    if (direct) return direct;
+    if (child && typeof child === "object") {
+      const nested = imageUrlFromStructuredValue(child);
+      if (nested) return nested;
+    }
+  }
+  return null;
+}
+
+function imageUrlFromText(value: string): string | null {
+  const matches = value.match(/https?:\/\/[^\s<>"']+/g);
+  if (!matches) return null;
+  for (let i = matches.length - 1; i >= 0; i--) {
+    const candidate = validPreviewImageUrl(matches[i]);
+    if (candidate) return candidate;
+  }
+  return null;
+}
+
+export function extractThreadPreviewImageUrl(
+  threadData: string,
+): string | null {
+  const parsed = safeJsonParse(threadData);
+  if (!parsed || typeof parsed !== "object") return null;
+  const messages = (parsed as { messages?: unknown }).messages;
+  if (!Array.isArray(messages)) return null;
+
+  for (
+    let messageIndex = messages.length - 1;
+    messageIndex >= 0;
+    messageIndex--
+  ) {
+    const entry = messages[messageIndex] as any;
+    const message = entry?.message ?? entry;
+    const content = message?.content;
+    if (!Array.isArray(content)) continue;
+
+    for (let partIndex = content.length - 1; partIndex >= 0; partIndex--) {
+      const part = content[partIndex] as Record<string, unknown>;
+      const result = typeof part.result === "string" ? part.result : "";
+      if (!result.trim()) continue;
+
+      const toolName = typeof part.toolName === "string" ? part.toolName : "";
+      const parsedResult = safeJsonParse(result);
+      if (parsedResult && GENERATION_TOOL_NAMES.has(toolName)) {
+        const structured = imageUrlFromStructuredValue(parsedResult);
+        if (structured) return structured;
+      }
+
+      const fromText = imageUrlFromText(result);
+      if (fromText) return fromText;
+    }
+  }
+  return null;
+}
+
+export function buildThreadLinkPreviewMeta(preview: ThreadLinkPreview | null) {
+  const title = preview?.title ? `${preview.title} - Dispatch` : "Dispatch";
+  const description =
+    preview?.description ||
+    "Open this Agent-Native thread in the Dispatch workspace.";
+  const image = preview?.imageUrl ?? null;
+  return [
+    { title },
+    { name: "description", content: description },
+    { property: "og:title", content: title },
+    { property: "og:description", content: description },
+    { property: "og:type", content: "website" },
+    ...(image ? [{ property: "og:image", content: image }] : []),
+    {
+      name: "twitter:card",
+      content: image ? "summary_large_image" : "summary",
+    },
+    { name: "twitter:title", content: title },
+    { name: "twitter:description", content: description },
+    ...(image ? [{ name: "twitter:image", content: image }] : []),
+  ];
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/lib/workspace-apps.ts

@@ -0,0 +1,31 @@
+export interface WorkspaceAppSummary {
+  id: string;
+  name: string;
+  description?: string;
+  path: string;
+  url?: string | null;
+  isDispatch?: boolean;
+  audience?: "internal" | "public";
+  publicPaths?: string[];
+  protectedPaths?: string[];
+  status?: "ready" | "pending";
+  statusLabel?: string;
+  builderUrl?: string | null;
+  branchName?: string | null;
+  createdAt?: string | null;
+  agentCardUrl?: string | null;
+  agentCardReachable?: boolean;
+  a2aEndpointUrl?: string | null;
+  agentName?: string | null;
+  agentSkillsCount?: number | null;
+  archived?: boolean;
+}
+
+export function workspaceAppHref(app: WorkspaceAppSummary): string | null {
+  if (app.status === "pending") return app.builderUrl || null;
+  return app.path || app.url || null;
+}
+
+export function isPendingBuilderHref(app: WorkspaceAppSummary): boolean {
+  return app.status === "pending" && !!app.builderUrl;
+}

package/src/routes/index.ts

@@ -0,0 +1,64 @@
+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("chat", "./pages/chat.js"),
+  route("chat/:threadId", "./pages/chat.js"),
+  route("overview", "./pages/overview.js"),
+  route("metrics", "./pages/metrics.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("automations", "./pages/automations.js"),
+  route("audit", "./pages/audit.js"),
+  route("settings", "./pages/settings.js"),
+  route("dreams", "./pages/dreams.js"),
+  route("thread-debug", "./pages/thread-debug.js"),
+  route("team", "./pages/team.js"),
+  route("extensions", "./pages/extensions._index.js"),
+  route("extensions/:id", "./pages/extensions.$id.js"),
+  route("extensions/:id/:slug", "./pages/extensions.$id.js"),
+  // Catch-all for /:appId — bounces /dispatch/<appId> to /<appId> when the
+  // segment names a workspace app sibling (e.g. Builder.io routing a "go to
+  // /todo" call through Dispatch's mount). Declared last so React Router 7's
+  // specificity ranking still matches explicit static routes above first.
+  route(":appId", "./pages/$appId.js"),
+];

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

@@ -0,0 +1,193 @@
+import { useActionQuery, appPath, useT } from "@agent-native/core/client";
+import {
+  IconArrowLeft,
+  IconArrowUpRight,
+  IconClockHour4,
+} from "@tabler/icons-react";
+import { useEffect, useMemo } from "react";
+import {
+  Link,
+  Navigate,
+  redirect,
+  useParams,
+  type ClientLoaderFunctionArgs,
+  type LoaderFunctionArgs,
+} from "react-router";
+
+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 {
+  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>.jami.studio`
+ * 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 redirect(selfTarget);
+  const target = await resolveServerCatchAllTarget(appId);
+  if (target) throw redirect(target);
+  return null;
+}
+
+export async function clientLoader({
+  params,
+  serverLoader,
+}: ClientLoaderFunctionArgs) {
+  const selfTarget = dispatchSelfRedirect(params.appId);
+  if (selfTarget) throw 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 { data: apps = [], isLoading } = useActionQuery("list-workspace-apps", {
+    includeAgentCards: false,
+  });
+  const app = useMemo(
+    () =>
+      (apps as WorkspaceAppSummary[]).find((item) => item.id === appId) ?? null,
+    [appId, apps],
+  );
+  const href = app ? workspaceAppHref(app) : null;
+  const isSelfReference = appId === "dispatch";
+
+  useEffect(() => {
+    if (isSelfReference) return;
+    if (!app || app.status === "pending" || !href) return;
+    window.location.assign(href);
+  }, [app, href, isSelfReference]);
+
+  if (isSelfReference) {
+    return <Navigate to={appPath("/overview")} replace />;
+  }
+
+  if ((isLoading && !app) || (app && app.status !== "pending" && href)) {
+    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 border 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.branchName ? (
+              <p className="text-xs text-muted-foreground">
+                {t("dispatch.pages.branch", { branch: app.branchName })}
+              </p>
+            ) : null}
+            {app.builderUrl ? (
+              <Button asChild>
+                <a href={app.builderUrl} target="_blank" rel="noreferrer">
+                  {t("dispatch.pages.openBuilderBranch")}
+                  <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.tsx

@@ -0,0 +1,60 @@
+import { appPath } from "@agent-native/core/client";
+import { redirect, type LoaderFunctionArgs } from "react-router";
+
+import { Spinner } from "../../components/ui/spinner";
+
+const SEO_TITLE =
+  "Agent-Native 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 redirect(buildTarget(url));
+}
+
+export function clientLoader({ url }: LoaderFunctionArgs) {
+  throw redirect(buildTarget(url));
+}
+
+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;
+}