@agent-native/dispatch 0.14.14 → 0.15.0

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

@@ -0,0 +1,361 @@
+import { useActionMutation } from "@agent-native/core/client";
+import {
+  IconArrowUpRight,
+  IconCircleCheck,
+  IconCopy,
+  IconExternalLink,
+  IconFileText,
+  IconPlugConnected,
+} from "@tabler/icons-react";
+import { useEffect, useMemo, useState, type ReactNode } from "react";
+import { toast } from "sonner";
+
+import { cn } from "../lib/utils";
+import { Alert, AlertDescription } from "./ui/alert";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./ui/card";
+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;
+  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;
+  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: "Remix into workspace",
+  remixing: "Remixing…",
+  remixSuccess: "Template remixed into your workspace.",
+  remixError: "Could not remix this template",
+  appIdRequired: "App ID is required.",
+  source: "Source",
+  viewLiveApp: "View the live app",
+};
+
+export interface WorkspaceTemplateCardProps {
+  template: CuratedWorkspaceTemplate;
+  defaultAppId?: string;
+  labels?: Partial<WorkspaceTemplateLabels>;
+  className?: string;
+  onRemixSuccess?: (
+    result: unknown,
+    template: CuratedWorkspaceTemplate,
+  ) => void;
+}
+
+function slugifyAppId(value: string): string {
+  return (
+    value
+      .trim()
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "")
+      .slice(0, 48) || "new-app"
+  );
+}
+
+function templateIdFor(template: CuratedWorkspaceTemplate): string {
+  return template.templateId || template.id || template.appId || template.name;
+}
+
+function defaultAppIdFor(
+  template: CuratedWorkspaceTemplate,
+  defaultAppId?: string,
+): string {
+  if (defaultAppId) return slugifyAppId(defaultAppId);
+  const sourceId = slugifyAppId(template.appId || template.name);
+  return `${sourceId}-remix`;
+}
+
+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,
+  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) => {
+      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 trimmedAppId = appId.trim();
+    if (!trimmedAppId) {
+      toast.error(labels.appIdRequired);
+      return;
+    }
+
+    remix.mutate({
+      templateId: templateIdFor(template),
+      appId: trimmedAppId,
+    });
+  }
+
+  return (
+    <Card
+      className={cn(
+        "flex h-full flex-col border-border/60 bg-card/40 shadow-none transition-[background-color,border-color] hover:border-foreground/20 hover:bg-accent/15",
+        className,
+      )}
+    >
+      <CardHeader className="gap-2 p-4">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex min-w-0 items-start gap-2.5">
+            <span className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md border border-border/70 bg-muted/40 text-muted-foreground">
+              <IconFileText size={16} />
+            </span>
+            <div className="min-w-0">
+              <CardTitle className="truncate text-sm font-semibold">
+                {template.name}
+              </CardTitle>
+              {template.source || template.sourceDescription ? (
+                <CardDescription className="mt-1 truncate text-xs">
+                  <span className="font-medium text-foreground/70">
+                    {labels.source}:
+                  </span>{" "}
+                  {template.sourceDescription || template.source}
+                </CardDescription>
+              ) : null}
+            </div>
+          </div>
+          {isInstalled ? (
+            <Badge
+              variant="outline"
+              className="shrink-0 gap-1 border-primary/30 bg-primary/5 text-primary"
+            >
+              <IconCircleCheck size={13} />
+              {labels.installed}
+            </Badge>
+          ) : null}
+        </div>
+      </CardHeader>
+
+      <CardContent className="flex flex-1 flex-col gap-3 p-4 pt-0">
+        {template.description ? (
+          <p className="line-clamp-3 text-[13px] leading-5 text-muted-foreground">
+            {template.description}
+          </p>
+        ) : null}
+
+        {setupNote ? (
+          <Alert className="border-border/60 bg-muted/25 px-3 py-2 [&>svg]:left-3 [&>svg]:top-2.5">
+            <IconPlugConnected size={15} />
+            <AlertDescription className="text-xs leading-5">
+              <span className="font-medium text-foreground/80">
+                {labels.integrationSetup}:
+              </span>{" "}
+              {setupNote}
+            </AlertDescription>
+          </Alert>
+        ) : null}
+      </CardContent>
+
+      <CardFooter className="flex flex-wrap justify-between gap-2 p-4 pt-0">
+        {liveUrl ? (
+          <Button variant="link" size="sm" className="h-8 px-0" asChild>
+            <a href={liveUrl} target="_blank" rel="noreferrer">
+              {labels.viewLiveApp}
+              <IconExternalLink />
+            </a>
+          </Button>
+        ) : (
+          <span />
+        )}
+
+        <Dialog
+          open={open}
+          onOpenChange={(nextOpen) => {
+            if (!remix.isPending) setOpen(nextOpen);
+          }}
+        >
+          <DialogTrigger asChild>
+            <Button type="button" size="sm">
+              <IconCopy />
+              {labels.remix}
+            </Button>
+          </DialogTrigger>
+          <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)}
+                  disabled={remix.isPending}
+                />
+              </div>
+              <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>
+      </CardFooter>
+    </Card>
+  );
+}
+
+export interface WorkspaceTemplatesSectionProps {
+  templates: CuratedWorkspaceTemplatesResult;
+  title?: ReactNode;
+  defaultAppId?: string;
+  labels?: Partial<WorkspaceTemplateLabels>;
+  className?: string;
+  cardClassName?: string;
+  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,
+  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="grid gap-3 md:grid-cols-2">
+        {templates.map((template) => (
+          <WorkspaceTemplateCard
+            key={templateIdFor(template)}
+            template={template}
+            defaultAppId={defaultAppId}
+            labels={labels}
+            className={cardClassName}
+            onRemixSuccess={onRemixSuccess}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}

package/src/lib/other-apps.spec.ts

@@ -0,0 +1,76 @@
+import { describe, expect, it } from "vitest";
+
+import { filterOtherApps } from "./other-apps.js";
+
+describe("filterOtherApps", () => {
+  it("keeps available linked apps while excluding workspace apps", () => {
+    expect(
+      filterOtherApps(
+        [
+          {
+            id: "slides",
+            name: "Slides",
+            url: "https://slides.agent-native.com",
+          },
+          {
+            id: "analytics",
+            name: "Analytics",
+            description: "Explore data",
+            url: "https://analytics.agent-native.com",
+          },
+          {
+            id: "coach",
+            name: "Coach",
+            url: "https://workspace.example.com/coach",
+            source: "workspace",
+          },
+          {
+            id: "dispatch",
+            name: "Dispatch",
+            url: "https://dispatch.agent-native.com",
+          },
+        ],
+        [{ id: "coach" }],
+      ),
+    ).toEqual([
+      {
+        id: "analytics",
+        name: "Analytics",
+        description: "Explore data",
+        url: "https://analytics.agent-native.com",
+      },
+      {
+        id: "slides",
+        name: "Slides",
+        url: "https://slides.agent-native.com",
+      },
+    ]);
+  });
+
+  it("drops invalid URLs and duplicate app ids", () => {
+    expect(
+      filterOtherApps(
+        [
+          {
+            id: "analytics",
+            name: "Analytics",
+            url: "https://analytics.agent-native.com",
+          },
+          {
+            id: "Analytics",
+            name: "Analytics duplicate",
+            url: "https://duplicate.example.com",
+          },
+          { id: "relative", name: "Relative", url: "/relative" },
+        ],
+        [],
+      ),
+    ).toEqual([
+      {
+        id: "analytics",
+        name: "Analytics",
+        url: "https://analytics.agent-native.com",
+      },
+    ]);
+  });
+});

package/src/lib/other-apps.ts

@@ -0,0 +1,44 @@
+export interface ConnectedAppSummary {
+  id: string;
+  name: string;
+  description?: string;
+  url: string;
+  color?: string;
+  source?: "builtin" | "custom" | "workspace";
+}
+
+export interface WorkspaceAppId {
+  id: string;
+  isDispatch?: boolean;
+}
+
+function isHttpUrl(value: string): boolean {
+  try {
+    const url = new URL(value);
+    return url.protocol === "http:" || url.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+export function filterOtherApps(
+  connectedApps: ConnectedAppSummary[],
+  workspaceApps: WorkspaceAppId[],
+): ConnectedAppSummary[] {
+  const workspaceAppIds = new Set([
+    "dispatch",
+    ...workspaceApps.map((app) => app.id.trim().toLowerCase()),
+  ]);
+  const seen = new Set<string>();
+
+  return connectedApps
+    .filter((app) => {
+      const id = app.id.trim().toLowerCase();
+      if (!id || workspaceAppIds.has(id) || seen.has(id)) return false;
+      if (app.source === "workspace") return false;
+      if (!isHttpUrl(app.url)) return false;
+      seen.add(id);
+      return true;
+    })
+    .sort((a, b) => a.name.localeCompare(b.name));
+}

package/src/routes/pages/apps.tsx

@@ -1,9 +1,11 @@
 import { useActionQuery, useT } from "@agent-native/core/client";
 import {
   IconApps,
+  IconArrowUpRight,
   IconChevronDown,
   IconEyeOff,
   IconPlus,
+  IconStack2,
 } from "@tabler/icons-react";
 import { useState } from "react";
 
@@ -18,6 +20,15 @@ import {
 } from "../../components/ui/collapsible";
 import { Skeleton } from "../../components/ui/skeleton";
 import { WorkspaceAppCard } from "../../components/workspace-app-card";
+import {
+  WorkspaceTemplatesSection,
+  type CuratedWorkspaceTemplatesResult,
+  type WorkspaceTemplateLabels,
+} from "../../components/workspace-template-card";
+import {
+  filterOtherApps,
+  type ConnectedAppSummary,
+} from "../../lib/other-apps";
 import { cn } from "../../lib/utils";
 import type { WorkspaceAppSummary } from "../../lib/workspace-apps";
 
@@ -38,6 +49,11 @@ export default function AppsRoute() {
     includeAgentCards: false,
     includeArchived: true,
   });
+  const connectedAppsQuery = useActionQuery("list-connected-agents", {});
+  const curatedTemplatesQuery = useActionQuery(
+    "list-curated-workspace-templates",
+    {},
+  );
   const { data: apps = [], isLoading: appsLoading } = appsQuery;
   const { data: workspace } = useActionQuery(
     "get-workspace-info",
@@ -51,7 +67,25 @@ export default function AppsRoute() {
   );
   const visibleApps = allApps.filter((app) => !app.archived);
   const archivedApps = allApps.filter((app) => app.archived);
+  const otherApps = filterOtherApps(
+    (connectedAppsQuery.data || []) as ConnectedAppSummary[],
+    allApps,
+  );
   const showAppSkeletons = appsLoading && allApps.length === 0;
+  const templateLabels: WorkspaceTemplateLabels = {
+    appId: t("dispatch.pages.remixAppIdLabel"),
+    appIdDescription: t("dispatch.pages.remixAppIdDescription"),
+    cancel: t("dispatch.pages.cancel"),
+    integrationSetup: t("dispatch.pages.integrationSetup"),
+    installed: t("dispatch.pages.alreadyInWorkspace"),
+    remix: t("dispatch.pages.remix"),
+    remixing: t("dispatch.pages.remixing"),
+    remixSuccess: t("dispatch.pages.remixSuccess"),
+    remixError: t("dispatch.pages.remixError"),
+    appIdRequired: t("dispatch.pages.appIdRequired"),
+    source: t("dispatch.pages.source"),
+    viewLiveApp: t("dispatch.pages.viewLiveApp"),
+  };
 
   return (
     <DispatchShell
@@ -123,6 +157,65 @@ export default function AppsRoute() {
           )}
         </section>
 
+        {curatedTemplatesQuery.isError ? (
+          <section className="space-y-3 border-t pt-4">
+            <ActionQueryError
+              error={curatedTemplatesQuery.error}
+              onRetry={() => void curatedTemplatesQuery.refetch()}
+            />
+          </section>
+        ) : curatedTemplatesQuery.data ? (
+          <section className="space-y-3 border-t pt-4">
+            <div className="flex min-w-0 items-start gap-2">
+              <IconStack2
+                size={16}
+                className="mt-0.5 shrink-0 text-muted-foreground"
+              />
+              <div className="min-w-0">
+                <h2 className="truncate text-sm font-semibold text-foreground">
+                  {t("dispatch.pages.curatedTemplates")}
+                </h2>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  {t("dispatch.pages.curatedTemplatesDescription")}
+                </p>
+              </div>
+            </div>
+            <WorkspaceTemplatesSection
+              templates={
+                curatedTemplatesQuery.data as CuratedWorkspaceTemplatesResult
+              }
+              labels={templateLabels}
+              onRemixSuccess={() => {
+                void appsQuery.refetch();
+                void curatedTemplatesQuery.refetch();
+              }}
+            />
+          </section>
+        ) : null}
+
+        {connectedAppsQuery.isError ? (
+          <section className="space-y-3 border-t pt-4">
+            <OtherAppsHeading count={0} />
+            <ActionQueryError
+              error={connectedAppsQuery.error}
+              onRetry={() => void connectedAppsQuery.refetch()}
+            />
+          </section>
+        ) : connectedAppsQuery.isLoading || otherApps.length > 0 ? (
+          <section className="space-y-3 border-t pt-4">
+            <OtherAppsHeading count={otherApps.length} />
+            {connectedAppsQuery.isLoading ? (
+              <OtherAppsSkeletonGrid />
+            ) : (
+              <div className="grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3">
+                {otherApps.map((app) => (
+                  <OtherAppCard key={app.id} app={app} />
+                ))}
+              </div>
+            )}
+          </section>
+        ) : null}
+
         {archivedApps.length > 0 ? (
           <Collapsible open={showHidden} onOpenChange={setShowHidden}>
             <section className="space-y-3">
@@ -182,6 +275,78 @@ export default function AppsRoute() {
   );
 }
 
+function OtherAppsHeading({ count }: { count: number }) {
+  const t = useT();
+  return (
+    <div className="flex min-w-0 items-start gap-2">
+      <IconStack2 size={16} className="mt-0.5 shrink-0 text-muted-foreground" />
+      <div className="min-w-0">
+        <h2 className="truncate text-sm font-semibold text-foreground">
+          {t("dispatch.pages.otherApps")}
+        </h2>
+        <p className="mt-0.5 text-xs text-muted-foreground">
+          {t("dispatch.pages.otherAppsDescription")}
+          {count > 0
+            ? ` · ${t("dispatch.pages.availableCount", { count })}`
+            : ""}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function OtherAppsSkeletonGrid() {
+  return (
+    <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+      {Array.from({ length: 3 }).map((_, index) => (
+        <div key={index} className="rounded-lg border bg-card p-4">
+          <div className="flex items-start gap-3">
+            <Skeleton className="size-8 rounded-md" />
+            <div className="flex-1 space-y-3">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-3 w-full" />
+              <Skeleton className="h-3 w-2/3" />
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function OtherAppCard({ app }: { app: ConnectedAppSummary }) {
+  const t = useT();
+  return (
+    <a
+      href={app.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group flex min-h-[116px] items-start gap-3 rounded-xl border border-border/60 bg-card/40 p-4 transition-[background-color,border-color] hover:border-foreground/20 hover:bg-accent/15 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-xs font-semibold text-muted-foreground">
+        {app.name.charAt(0).toUpperCase()}
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="flex items-start justify-between gap-3">
+          <span className="truncate text-sm font-semibold text-foreground">
+            {app.name}
+          </span>
+          <IconArrowUpRight
+            size={15}
+            className="shrink-0 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5"
+          />
+        </span>
+        <span className="mt-2 line-clamp-2 block text-[13px] leading-5 text-muted-foreground">
+          {app.description || app.url}
+        </span>
+        <span className="mt-3 block text-xs font-medium text-foreground">
+          {t("dispatch.pages.openApp")}
+        </span>
+      </span>
+    </a>
+  );
+}
+
 function AppsSkeletonGrid() {
   return (
     <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">

package/src/server/lib/app-creation-store.ts

@@ -1522,7 +1522,7 @@ function slugify(value: string): string {
     .slice(0, 64);
 }
 
-function isLocalAppCreationRuntime(): boolean {
+export function isLocalAppCreationRuntime(): boolean {
   if (process.env.NODE_ENV === "production") return false;
   if (
     process.env.NETLIFY ||