@agent-native/dispatch 0.15.24 → 0.15.26

package/src/actions/remix-workspace-template.spec.ts

@@ -68,7 +68,7 @@ describe("remix-workspace-template action", () => {
     );
   });
 
-  it("starts a hosted private remix without copying data or secrets", async () => {
+  it("starts a hosted private app without copying data or secrets", async () => {
     vi.stubEnv("NODE_ENV", "production");
     mocks.startWorkspaceAppCreation.mockResolvedValue({
       mode: "builder",
@@ -88,7 +88,7 @@ describe("remix-workspace-template action", () => {
         template: "calendar",
         description: "A private scheduling workflow.",
         prompt: expect.stringContaining(
-          "private workspace remix of a curated first-party template",
+          "private workspace app from a curated first-party template",
         ),
       }),
     );

package/src/actions/remix-workspace-template.ts

@@ -17,11 +17,11 @@ function buildRemixPrompt(input: {
   description?: string | null;
 }): string {
   return [
-    "Create a private workspace remix of a curated first-party template.",
+    "Create a private workspace app from a curated first-party template.",
     `Source template: ${input.templateName} (${input.templateId}).`,
     "Recreate the source template's product shape and capabilities as an independent workspace app.",
     "Never copy source-app data, records, user content, secrets, credentials, tokens, API keys, or private configuration.",
-    "Use empty or synthetic seed data only, keep the remix private to the current workspace, and do not create a public demo.",
+    "Use empty or synthetic seed data only, keep the new app private to the current workspace, and do not create a public demo.",
     `Setup note: ${input.setupNote}`,
     input.description?.trim()
       ? `Requested customization: ${input.description.trim()}`
@@ -31,7 +31,7 @@ function buildRemixPrompt(input: {
 
 export default defineAction({
   description:
-    "Create a private, independent remix of one of Dispatch's curated first-party workspace templates. Valid templates are mail, calendar, analytics, slides, content, clips, brain, assets, forms, and design. The remix must not copy source-app data, secrets, credentials, or private configuration; local workspaces scaffold the template, while hosted workspaces start a Builder app-creation branch.",
+    "Create a private, independent app from one of Dispatch's curated first-party workspace templates. Valid templates are mail, calendar, analytics, slides, content, clips, brain, assets, forms, and design. The new app must not copy source-app data, secrets, credentials, or private configuration; local workspaces scaffold the template, while hosted workspaces start a Builder app-creation branch.",
   schema: z.object({
     templateId: z
       .string()
@@ -56,7 +56,7 @@ export default defineAction({
       .max(500)
       .optional()
       .nullable()
-      .describe("Optional customization or purpose for the private remix."),
+      .describe("Optional customization or purpose for the private app."),
   }),
   run: async (input) => {
     const sourceTemplate = getCuratedWorkspaceTemplate(input.templateId);
@@ -83,7 +83,7 @@ export default defineAction({
       action: "workspace-app.remix-requested",
       targetType: "workspace-app",
       targetId: appId,
-      summary: `Requested private remix of ${sourceTemplate.name}`,
+      summary: `Requested private app from ${sourceTemplate.name}`,
       metadata: {
         sourceTemplate: sourceTemplate.template,
         mode:

package/src/actions/search-agent-threads.ts

@@ -5,7 +5,7 @@ import { searchAgentThreads } from "../server/lib/thread-debug-store.js";
 
 export default defineAction({
   description:
-    "Search agent chat threads by title, preview, or full persisted thread content. Non-admins are limited to their own current Dispatch DB threads.",
+    "Search agent chat threads by title, preview, full persisted thread content, or an exact request/run ID. Non-admins are limited to their own current Dispatch DB threads.",
   schema: z.object({
     sourceId: z
       .string()

package/src/actions/start-workspace-app-creation.ts

@@ -6,7 +6,7 @@ import { startWorkspaceAppCreation } from "../server/lib/app-creation-store.js";
 
 export default defineAction({
   description:
-    'Start creating a new workspace app from Dispatch when the request truly needs its own app. Callers should include a concise generated description by default; Dispatch generates one from the prompt when omitted. In local dev this returns a code-agent prompt; in production it creates a Builder branch only when a Builder branch project is configured. If the result mode is "coming-soon", the work still requires a code change but no Builder Cloud Agent can run here; tell the user to edit locally or use Builder.io to edit this code in the cloud and continue customizing the app any way they like, and do not send them to Builder org/beta settings. The result must be a separate workspace app under apps/<app-id>, not a new route or file in apps/chat. If chat is used as the source template, the finished app must be branded as the requested app and must not leave visible "Chat", "Starter", "Blank app", or "New app" UI behind. If the request needs Mail, Calendar, Analytics, Brain, Assets, or another first-party app, use the existing hosted/connected app via links or A2A; do not clone, wrap, or nest those templates inside the new app unless the user explicitly asks for a customized copy.',
+    'Start creating a new workspace app from Dispatch when the request truly needs its own app. Callers should include a concise generated description by default; Dispatch generates one from the prompt when omitted. In local dev this returns a code-agent prompt; in production it creates a Builder branch only when a Builder branch project is configured. If the result mode is "coming-soon", the work still requires a code change but no Builder Cloud Agent can run here; tell the user to edit locally or use Builder.io to edit this code in the cloud and continue customizing the app any way they like, and do not send them to Builder org/beta settings. The result must be a separate workspace app under apps/<app-id>, not a new route or file in apps/chat. If chat is used as the source template, the finished app must be branded as the requested app and must not leave visible "Chat", "Starter", "Blank app", or "New app" UI behind. If the request needs Mail, Calendar, Analytics, Brain, Assets, or another first-party app, use the existing hosted/connected app via links or A2A; do not wrap or nest those apps inside the new app unless the user explicitly asks for a customized app from that template.',
   schema: z.object({
     prompt: z.string().min(1).describe("The user's app creation request"),
     appId: z

package/src/components/create-app-popover.tsx

@@ -117,8 +117,8 @@ function buildAppCreationPrompt(input: {
     `Use relative workspace links like /${input.appId}. Do not hardcode localhost, 127.0.0.1, 8080, 8100, or any dev port; the active workspace gateway/browser origin owns the port.`,
     `Use the framework/template UI stack: shadcn/ui components and @tabler/icons-react. Do not add lucide-react or another icon library for standard UI.`,
     `Existing first-party apps are neighbors, not implementation details for this app. If the user's prompt mentions Mail, Calendar, Analytics, Brain, Assets, Dispatch, or other templates, treat them as existing hosted/connected apps that this app can link to or call through A2A/default connected agents. For example, Mail, Calendar, Analytics, Brain, and Assets already exist at https://mail.agent-native.com, https://calendar.agent-native.com, https://analytics.agent-native.com, https://brain.agent-native.com, and https://assets.agent-native.com.`,
-    `Do not clone first-party templates, create wrapper apps, or scaffold child apps/routes for Mail, Calendar, Analytics, Brain, Assets, etc. inside apps/${input.appId} just so this app can access them. If the request is a cross-app dashboard or overview, build only the new dashboard/overview app and delegate to the existing apps for domain work.`,
-    `Only create another first-party app copy when the user explicitly asks for a customized fork/copy of that app; otherwise keep using the hosted/shared app so improvements to the base template keep flowing to users.`,
+    `Do not create wrapper apps or scaffold child apps/routes for Mail, Calendar, Analytics, Brain, Assets, etc. inside apps/${input.appId} just so this app can access them. If the request is a cross-app dashboard or overview, build only the new dashboard/overview app and delegate to the existing apps for domain work.`,
+    `Only create another first-party app when the user explicitly asks for a customized app from that template; otherwise keep using the hosted/shared app so improvements to the base app keep flowing to users.`,
     `Do not satisfy this by adding a route, page, component, or file inside apps/chat or another existing app unless the user explicitly asks to modify that existing app.`,
     input.vaultAccessMode === "all-apps"
       ? `Do not create per-app Dispatch vault grants unless the workspace switches vault access to manual or the user explicitly asks for manual grants.`

package/src/components/dispatch-control-plane.tsx

@@ -6,8 +6,13 @@ import { PromptComposer } from "@agent-native/core/client/composer";
 import { useActionQuery } from "@agent-native/core/client/hooks";
 import { isInBuilderFrame } from "@agent-native/core/client/host";
 import { useT } from "@agent-native/core/client/i18n";
-import { IconArrowUpRight } from "@tabler/icons-react";
+import {
+  IconArrowUpRight,
+  IconChevronDown,
+  IconClockHour4,
+} from "@tabler/icons-react";
 import type { ReactNode } from "react";
+import { useState } from "react";
 import { Link, useNavigate } from "react-router";
 
 import { submitOverviewPrompt } from "../lib/overview-chat";
@@ -16,6 +21,11 @@ import { ActionQueryError } from "./action-query-error";
 import { CreateAppPopover } from "./create-app-popover";
 import { useSetPageTitle } from "./layout/HeaderActions";
 import { Button } from "./ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "./ui/collapsible";
 import { Skeleton } from "./ui/skeleton";
 import { WorkspaceAppCard } from "./workspace-app-card";
 
@@ -135,8 +145,13 @@ function AppsPanel({
   apps: WorkspaceAppSummary[];
   isLoading: boolean;
 }) {
+  const t = useT();
+  const [showPending, setShowPending] = useState(false);
   const visibleApps = apps.filter((app) => !app.isDispatch && !app.archived);
-  const showSkeletons = isLoading && visibleApps.length === 0;
+  const activeApps = visibleApps.filter((app) => app.status !== "pending");
+  const pendingApps = visibleApps.filter((app) => app.status === "pending");
+  const showSkeletons =
+    isLoading && activeApps.length === 0 && pendingApps.length === 0;
 
   return (
     <section className="flex flex-col gap-3">
@@ -161,15 +176,66 @@ function AppsPanel({
             </div>
           ))}
         </div>
-      ) : visibleApps.length > 0 ? (
+      ) : activeApps.length > 0 ? (
         <div className="grid gap-3 md:grid-cols-2">
-          {visibleApps.map((app) => (
+          {activeApps.map((app) => (
             <WorkspaceAppCard key={app.id} app={app} className="min-h-32" />
           ))}
         </div>
       ) : (
         <CreateAppPopover />
       )}
+      {pendingApps.length > 0 ? (
+        <Collapsible open={showPending} onOpenChange={setShowPending}>
+          <div className="space-y-3 border-t pt-3">
+            <div className="flex flex-wrap items-center justify-between gap-3">
+              <div className="flex min-w-0 items-center gap-2">
+                <IconClockHour4
+                  size={15}
+                  className="shrink-0 text-muted-foreground"
+                />
+                <div className="min-w-0">
+                  <h3 className="text-xs font-semibold text-foreground">
+                    {t("dispatch.pages.pendingApps")}
+                  </h3>
+                  <p className="text-xs text-muted-foreground">
+                    {t("dispatch.pages.pendingAppsDescription", {
+                      count: pendingApps.length,
+                    })}
+                  </p>
+                </div>
+              </div>
+              <CollapsibleTrigger asChild>
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 gap-1.5 px-2 text-xs"
+                >
+                  {showPending
+                    ? t("dispatch.pages.hidePendingApps")
+                    : t("dispatch.pages.showPendingApps")}
+                  <IconChevronDown
+                    size={13}
+                    className={showPending ? "rotate-180" : undefined}
+                  />
+                </Button>
+              </CollapsibleTrigger>
+            </div>
+            <CollapsibleContent>
+              <div className="grid gap-3 md:grid-cols-2">
+                {pendingApps.map((app) => (
+                  <WorkspaceAppCard
+                    key={app.id}
+                    app={app}
+                    className="min-h-32"
+                  />
+                ))}
+              </div>
+            </CollapsibleContent>
+          </div>
+        </Collapsible>
+      ) : null}
     </section>
   );
 }

package/src/components/workspace-app-card.spec.tsx

@@ -17,6 +17,13 @@ vi.mock("@agent-native/core/client/hooks", () => ({
   }),
 }));
 
+vi.mock("@agent-native/core/client/i18n", () => ({
+  useFormatters: () => ({
+    formatDate: (value: string) => value,
+  }),
+  useT: () => (key: string) => key,
+}));
+
 describe("WorkspaceAppCard", () => {
   let container: HTMLDivElement;
   let root: Root;
@@ -140,4 +147,40 @@ describe("WorkspaceAppCard", () => {
     expect(appLink?.getAttribute("target")).toBe("_blank");
     expect(appLink?.getAttribute("rel")).toBe("noreferrer");
   });
+
+  it("shows ownership metadata in the more menu", async () => {
+    await act(async () => {
+      root.render(
+        <TooltipProvider>
+          <WorkspaceAppCard
+            app={{
+              id: "analytics",
+              name: "Analytics",
+              path: "/analytics",
+              createdAt: "2026-07-28T12:00:00.000Z",
+              createdBy: "creator@example.com",
+              owner: "owner@example.com",
+              teams: ["Growth", "Operations"],
+              status: "ready",
+            }}
+          />
+        </TooltipProvider>,
+      );
+    });
+
+    const moreButton = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="More actions for Analytics"]',
+    );
+    expect(moreButton).not.toBeNull();
+
+    await act(async () => {
+      moreButton?.dispatchEvent(
+        new MouseEvent("pointerdown", { bubbles: true, button: 0 }),
+      );
+    });
+
+    expect(document.body.textContent).toContain("creator@example.com");
+    expect(document.body.textContent).toContain("owner@example.com");
+    expect(document.body.textContent).toContain("Growth, Operations");
+  });
 });

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

@@ -2,7 +2,9 @@ import {
   useActionMutation,
   useActionQuery,
 } from "@agent-native/core/client/hooks";
+import { useFormatters, useT } from "@agent-native/core/client/i18n";
 import {
+  IconCalendar,
   IconChevronDown,
   IconChevronRight,
   IconClockHour4,
@@ -13,6 +15,8 @@ import {
   IconFileText,
   IconWorld,
   IconTrash,
+  IconUser,
+  IconUsersGroup,
 } from "@tabler/icons-react";
 import { useEffect, useState, type FormEvent } from "react";
 import { toast } from "sonner";
@@ -40,6 +44,8 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
 import { Input } from "./ui/input";
@@ -58,6 +64,8 @@ export function WorkspaceAppCard({
   app: WorkspaceAppSummary;
   className?: string;
 }) {
+  const t = useT();
+  const { formatDate } = useFormatters();
   const href = workspaceAppHref(app);
   const openInNewTab = isPendingBuilderHref(app);
   const isPending = app.status === "pending";
@@ -215,7 +223,7 @@ export function WorkspaceAppCard({
                 </TooltipTrigger>
                 <TooltipContent>More actions</TooltipContent>
               </Tooltip>
-              <DropdownMenuContent align="end" className="w-44">
+              <DropdownMenuContent align="end" className="w-72">
                 <DropdownMenuItem
                   onSelect={(event) => {
                     event.preventDefault();
@@ -244,6 +252,20 @@ export function WorkspaceAppCard({
                     Hide from list
                   </DropdownMenuItem>
                 )}
+                <DropdownMenuSeparator />
+                <DropdownMenuLabel className="font-normal">
+                  <WorkspaceAppMetadata
+                    app={app}
+                    formatDate={formatDate}
+                    labels={{
+                      created: t("agents.dashboardMetadataCreated"),
+                      createdBy: t("agents.dashboardMetadataCreatedBy"),
+                      owner: t("dispatch.pages.appMetadataOwner"),
+                      teams: t("dispatch.pages.appMetadataTeams"),
+                      notTracked: t("agents.notTracked"),
+                    }}
+                  />
+                </DropdownMenuLabel>
               </DropdownMenuContent>
             </DropdownMenu>
           </div>
@@ -293,6 +315,80 @@ export function WorkspaceAppCard({
   );
 }
 
+function WorkspaceAppMetadata({
+  app,
+  formatDate,
+  labels,
+}: {
+  app: WorkspaceAppSummary;
+  formatDate: ReturnType<typeof useFormatters>["formatDate"];
+  labels: {
+    created: string;
+    createdBy: string;
+    owner: string;
+    teams: string;
+    notTracked: string;
+  };
+}) {
+  function formatMetadataDate(value: string | null | undefined): string {
+    if (!value) return labels.notTracked;
+    try {
+      return formatDate(value, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+      });
+    } catch {
+      return value;
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-1.5 text-xs text-muted-foreground">
+      <WorkspaceAppMetadataRow
+        icon={IconCalendar}
+        label={labels.created}
+        value={formatMetadataDate(app.createdAt)}
+      />
+      <WorkspaceAppMetadataRow
+        icon={IconUser}
+        label={labels.createdBy}
+        value={app.createdBy || labels.notTracked}
+      />
+      <WorkspaceAppMetadataRow
+        icon={IconUser}
+        label={labels.owner}
+        value={app.owner || labels.notTracked}
+      />
+      <WorkspaceAppMetadataRow
+        icon={IconUsersGroup}
+        label={labels.teams}
+        value={app.teams?.join(", ") || labels.notTracked}
+      />
+    </div>
+  );
+}
+
+function WorkspaceAppMetadataRow({
+  icon: Icon,
+  label,
+  value,
+}: {
+  icon: typeof IconCalendar;
+  label: string;
+  value: string;
+}) {
+  return (
+    <div className="flex items-start gap-1.5">
+      <Icon className="mt-0.5 h-3 w-3 shrink-0" />
+      <span className="shrink-0">{label}</span>
+      <span className="min-w-0 truncate text-foreground/80">{value}</span>
+    </div>
+  );
+}
+
 function AppResourcesDialog({ app }: { app: WorkspaceAppSummary }) {
   const [open, setOpen] = useState(false);
   const [inspectedResourceId, setInspectedResourceId] = useState<string | null>(

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

@@ -95,7 +95,7 @@ describe("WorkspaceTemplateCard", () => {
     ).toBe(null);
   });
 
-  it("remixes with the default app id and allows an override", async () => {
+  it("creates an app with the default app id and allows an override", async () => {
     await act(async () => {
       root.render(
         <WorkspaceTemplateCard template={template} defaultAppId="pipeline" />,
@@ -103,7 +103,7 @@ describe("WorkspaceTemplateCard", () => {
     });
 
     const trigger = Array.from(container.querySelectorAll("button")).find(
-      (button) => button.textContent?.includes("Remix into workspace"),
+      (button) => button.textContent?.includes("Create from template"),
     );
     expect(trigger).not.toBeUndefined();
 
@@ -140,7 +140,7 @@ describe("WorkspaceTemplateCard", () => {
       });
     });
     expect(toast.success).toHaveBeenCalledWith(
-      "Template remixed into your workspace.",
+      "Template app creation started.",
     );
   });
 
@@ -167,7 +167,7 @@ describe("WorkspaceTemplateCard", () => {
     expect(container.textContent).toContain("Installed");
     expect(container.querySelector('a[href^="https://"]')).toBeNull();
     const remixButton = Array.from(container.querySelectorAll("button")).find(
-      (button) => button.textContent?.includes("Remix into workspace"),
+      (button) => button.textContent?.includes("Create from template"),
     );
     expect(remixButton).not.toHaveProperty("disabled", true);
   });

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

@@ -78,10 +78,10 @@ const DEFAULT_LABELS: WorkspaceTemplateLabels = {
   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",
+  remix: "Create from template",
+  remixing: "Creating app…",
+  remixSuccess: "Template app creation started.",
+  remixError: "Could not create an app from this template",
   appIdRequired: "App ID is required.",
   source: "Source",
   viewLiveApp: "View the live app",

package/src/lib/workspace-apps.ts

@@ -15,6 +15,9 @@ export interface WorkspaceAppSummary {
   builderUrl?: string | null;
   branchName?: string | null;
   createdAt?: string | null;
+  createdBy?: string | null;
+  owner?: string | null;
+  teams?: string[];
   agentCardUrl?: string | null;
   agentCardReachable?: boolean;
   a2aEndpointUrl?: string | null;

package/src/routes/pages/apps.tsx

@@ -5,6 +5,7 @@ import {
   IconApps,
   IconArrowUpRight,
   IconChevronDown,
+  IconClockHour4,
   IconEyeOff,
   IconPlus,
   IconStack2,
@@ -46,6 +47,7 @@ interface WorkspaceInfo {
 
 export default function AppsRoute() {
   const t = useT();
+  const [showPending, setShowPending] = useState(false);
   const [showHidden, setShowHidden] = useState(false);
   const appsQuery = useActionQuery("list-workspace-apps", {
     includeAgentCards: false,
@@ -68,6 +70,8 @@ export default function AppsRoute() {
     (app) => !app.isDispatch,
   );
   const visibleApps = allApps.filter((app) => !app.archived);
+  const activeApps = visibleApps.filter((app) => app.status !== "pending");
+  const pendingApps = visibleApps.filter((app) => app.status === "pending");
   const archivedApps = allApps.filter((app) => app.archived);
   const otherApps = filterOtherApps(
     (connectedAppsQuery.data || []) as ConnectedAppSummary[],
@@ -118,8 +122,13 @@ export default function AppsRoute() {
                 </h2>
                 <p className="mt-0.5 text-xs text-muted-foreground">
                   {t("dispatch.pages.activeCount", {
-                    count: visibleApps.length,
+                    count: activeApps.length,
                   })}
+                  {pendingApps.length > 0
+                    ? ` · ${t("dispatch.pages.pendingCount", {
+                        count: pendingApps.length,
+                      })}`
+                    : ""}
                   {archivedApps.length > 0
                     ? ` · ${t("dispatch.pages.hiddenCount", {
                         count: archivedApps.length,
@@ -128,7 +137,7 @@ export default function AppsRoute() {
                 </p>
               </div>
             </div>
-            {visibleApps.length > 0 ? (
+            {activeApps.length > 0 || pendingApps.length > 0 ? (
               <CreateAppPopover
                 align="end"
                 trigger={
@@ -148,17 +157,74 @@ export default function AppsRoute() {
             />
           ) : showAppSkeletons ? (
             <AppsSkeletonGrid />
-          ) : visibleApps.length > 0 ? (
+          ) : activeApps.length > 0 ? (
             <div className="grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3">
-              {visibleApps.map((app) => (
+              {activeApps.map((app) => (
                 <WorkspaceAppCard key={app.id} app={app} className="h-full" />
               ))}
             </div>
+          ) : pendingApps.length > 0 ? (
+            <EmptyActiveAppsState />
           ) : (
             <EmptyAppsState />
           )}
         </section>
 
+        {pendingApps.length > 0 ? (
+          <Collapsible open={showPending} onOpenChange={setShowPending}>
+            <section className="space-y-3 border-t pt-4">
+              <div className="flex flex-wrap items-center justify-between gap-3">
+                <div className="flex min-w-0 items-center gap-2">
+                  <IconClockHour4
+                    size={16}
+                    className="shrink-0 text-muted-foreground"
+                  />
+                  <div className="min-w-0">
+                    <h2 className="text-sm font-semibold text-foreground">
+                      {t("dispatch.pages.pendingApps")}
+                    </h2>
+                    <p className="text-xs text-muted-foreground">
+                      {t("dispatch.pages.pendingAppsDescription", {
+                        count: pendingApps.length,
+                      })}
+                    </p>
+                  </div>
+                </div>
+                <CollapsibleTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="gap-1.5"
+                  >
+                    {showPending
+                      ? t("dispatch.pages.hidePendingApps")
+                      : t("dispatch.pages.showPendingApps")}
+                    <IconChevronDown
+                      size={14}
+                      className={cn(
+                        "transition-transform",
+                        showPending && "rotate-180",
+                      )}
+                    />
+                  </Button>
+                </CollapsibleTrigger>
+              </div>
+              <CollapsibleContent>
+                <div className="grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3">
+                  {pendingApps.map((app) => (
+                    <WorkspaceAppCard
+                      key={app.id}
+                      app={app}
+                      className="h-full"
+                    />
+                  ))}
+                </div>
+              </CollapsibleContent>
+            </section>
+          </Collapsible>
+        ) : null}
+
         {curatedTemplatesQuery.isError ? (
           <section className="space-y-3 border-t pt-4">
             <ActionQueryError
@@ -400,3 +466,17 @@ function EmptyAppsState() {
     </div>
   );
 }
+
+function EmptyActiveAppsState() {
+  const t = useT();
+  return (
+    <div className="rounded-lg border border-dashed bg-card px-4 py-10 text-center">
+      <p className="text-sm font-medium text-foreground">
+        {t("dispatch.pages.noActiveWorkspaceApps")}
+      </p>
+      <p className="mx-auto mt-1 max-w-md text-xs text-muted-foreground">
+        {t("dispatch.pages.noActiveWorkspaceAppsDescription")}
+      </p>
+    </div>
+  );
+}