@agent-native/dispatch 0.14.13 → 0.15.0

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 ||

package/src/server/lib/curated-workspace-templates.spec.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  listWorkspaceApps: vi.fn(),
+}));
+
+vi.mock("./app-creation-store.js", () => ({
+  listWorkspaceApps: mocks.listWorkspaceApps,
+}));
+
+import {
+  CURATED_WORKSPACE_TEMPLATES,
+  getCuratedWorkspaceTemplate,
+  listCuratedWorkspaceTemplates,
+} from "./curated-workspace-templates.js";
+
+describe("curated workspace templates", () => {
+  it("validates only the curated first-party template ids", () => {
+    expect(getCuratedWorkspaceTemplate(" MAIL ")).toEqual(
+      expect.objectContaining({ id: "mail", template: "mail" }),
+    );
+    expect(() => getCuratedWorkspaceTemplate("unknown")).toThrow(
+      'Unknown curated workspace template "unknown".',
+    );
+  });
+
+  it("returns stable catalog metadata and current installation status", async () => {
+    mocks.listWorkspaceApps.mockResolvedValue([
+      { id: "dispatch" },
+      { id: "mail", archived: true },
+      { id: "custom-app" },
+    ]);
+
+    const result = await listCuratedWorkspaceTemplates();
+
+    expect(result).toHaveLength(10);
+    expect(result.map((template) => template.id)).toEqual(
+      CURATED_WORKSPACE_TEMPLATES.map((template) => template.id),
+    );
+    expect(result.find((template) => template.id === "mail")).toEqual(
+      expect.objectContaining({
+        name: "Mail",
+        template: "mail",
+        liveUrl: "https://mail.agent-native.com",
+        installed: true,
+      }),
+    );
+    expect(result.find((template) => template.id === "calendar")).toEqual(
+      expect.objectContaining({ installed: false }),
+    );
+    expect(mocks.listWorkspaceApps).toHaveBeenCalledWith({
+      includeAgentCards: false,
+      includeArchived: true,
+    });
+  });
+});

package/src/server/lib/curated-workspace-templates.ts

@@ -0,0 +1,187 @@
+import { listWorkspaceApps } from "./app-creation-store.js";
+
+export interface CuratedWorkspaceTemplate {
+  id: string;
+  name: string;
+  description: string;
+  icon: string;
+  color: string;
+  template: string;
+  liveUrl: string;
+  category: string;
+  setupNote: string;
+}
+
+export interface CuratedWorkspaceTemplateStatus extends CuratedWorkspaceTemplate {
+  installed: boolean;
+}
+
+/**
+ * Stable first-party template metadata for the initial remix catalog.
+ * `liveUrl` identifies the product URL; it is not a public-demo claim.
+ */
+export const CURATED_WORKSPACE_TEMPLATES: readonly CuratedWorkspaceTemplate[] =
+  [
+    {
+      id: "mail",
+      name: "Mail",
+      description:
+        "Agent-native email client with keyboard shortcuts and AI triage.",
+      icon: "Mail",
+      color: "#3B82F6",
+      template: "mail",
+      liveUrl: "https://mail.agent-native.com",
+      category: "communication",
+      setupNote:
+        "Connect the workspace email integration before working with live mail.",
+    },
+    {
+      id: "calendar",
+      name: "Calendar",
+      description:
+        "Manage events, synchronization, and public booking with an agent-native calendar.",
+      icon: "CalendarDays",
+      color: "#00B5FF",
+      template: "calendar",
+      liveUrl: "https://calendar.agent-native.com",
+      category: "productivity",
+      setupNote:
+        "Connect the workspace calendar integration before working with live events.",
+    },
+    {
+      id: "analytics",
+      name: "Analytics",
+      description:
+        "Connect data sources and prompt for charts, reports, and product insights.",
+      icon: "BarChart2",
+      color: "#F59E0B",
+      template: "analytics",
+      liveUrl: "https://analytics.agent-native.com",
+      category: "insights",
+      setupNote:
+        "Connect a data source or import a representative dataset before analysis.",
+    },
+    {
+      id: "slides",
+      name: "Slides",
+      description:
+        "Generate and edit React presentations with agent assistance.",
+      icon: "GalleryHorizontal",
+      color: "#EC4899",
+      template: "slides",
+      liveUrl: "https://slides.agent-native.com",
+      category: "creative",
+      setupNote:
+        "Start with a blank deck or connect the workspace presentation integration.",
+    },
+    {
+      id: "content",
+      name: "Content",
+      description:
+        "Write and organize local MDX content with agent assistance.",
+      icon: "FileText",
+      color: "#10B981",
+      template: "content",
+      liveUrl: "https://content.agent-native.com",
+      category: "content",
+      setupNote:
+        "Choose a content folder or create a first document for the private remix.",
+    },
+    {
+      id: "clips",
+      name: "Clips",
+      description:
+        "Record screens, capture meeting notes, and use voice dictation with AI.",
+      icon: "ScreenShare",
+      color: "#0EA5E9",
+      template: "clips",
+      liveUrl: "https://clips.agent-native.com",
+      category: "media",
+      setupNote:
+        "Grant screen and audio permissions only when the workspace needs recording.",
+    },
+    {
+      id: "brain",
+      name: "Brain",
+      description:
+        "Search cited company knowledge from conversations, meetings, and decisions.",
+      icon: "Brain",
+      color: "#8B5CF6",
+      template: "brain",
+      liveUrl: "https://brain.agent-native.com",
+      category: "knowledge",
+      setupNote:
+        "Connect approved knowledge sources before indexing workspace information.",
+    },
+    {
+      id: "assets",
+      name: "Assets",
+      description:
+        "Upload, organize, search, and generate on-brand images and videos.",
+      icon: "Photo",
+      color: "#0F766E",
+      template: "assets",
+      liveUrl: "https://assets.agent-native.com",
+      category: "content",
+      setupNote:
+        "Upload a representative asset or connect approved asset storage to begin.",
+    },
+    {
+      id: "forms",
+      name: "Forms",
+      description: "Create, edit, and manage forms with agent assistance.",
+      icon: "ClipboardList",
+      color: "#06B6D4",
+      template: "forms",
+      liveUrl: "https://forms.agent-native.com",
+      category: "operations",
+      setupNote:
+        "Create a form and choose its submission destination before inviting respondents.",
+    },
+    {
+      id: "design",
+      name: "Design",
+      description:
+        "Create and edit visual designs with agent-assisted exploration.",
+      icon: "Brush",
+      color: "#F472B6",
+      template: "design",
+      liveUrl: "https://design.agent-native.com",
+      category: "creative",
+      setupNote:
+        "Create a private project and optionally connect approved asset sources.",
+    },
+  ] as const;
+
+const curatedTemplateById = new Map(
+  CURATED_WORKSPACE_TEMPLATES.map((template) => [template.id, template]),
+);
+
+export function getCuratedWorkspaceTemplate(
+  templateId: string,
+): CuratedWorkspaceTemplate {
+  const normalized = templateId.trim().toLowerCase();
+  const template = curatedTemplateById.get(normalized);
+  if (!template) {
+    throw new Error(`Unknown curated workspace template "${templateId}".`);
+  }
+  return template;
+}
+
+export async function listCuratedWorkspaceTemplates(): Promise<
+  CuratedWorkspaceTemplateStatus[]
+> {
+  const installedIds = new Set(
+    (
+      await listWorkspaceApps({
+        includeAgentCards: false,
+        includeArchived: true,
+      })
+    ).map((app) => app.id.trim().toLowerCase()),
+  );
+
+  return CURATED_WORKSPACE_TEMPLATES.map((template) => ({
+    ...template,
+    installed: installedIds.has(template.id),
+  }));
+}