@agent-native/dispatch 0.8.5 → 0.8.7

package/src/actions/view-screen.ts

@@ -74,6 +74,14 @@ export default defineAction({
     if (navigation?.view === "destinations") {
       screen.recentDestinations = overview.recentDestinations;
     }
+    if (navigation?.view === "agents") {
+      const [connectedAgents, mcpAccess] = await Promise.all([
+        runLocalDispatchAction("list-connected-agents", {}),
+        runLocalDispatchAction("list-mcp-app-access", {}),
+      ]);
+      screen.connectedAgents = connectedAgents;
+      screen.mcpAppAccess = mcpAccess;
+    }
     if (
       navigation?.view === "overview" ||
       navigation?.view === "metrics" ||

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

@@ -111,6 +111,7 @@ function buildAppCreationPrompt(input: {
     `Dispatch workspace resources with scope=all are inherited workspace context. Do not copy or sync them into the new app; every workspace app reads them at runtime and may override with app shared or personal resources.`,
     ``,
     `Pick a starter template that fits the user's prompt — analytics, brain, calendar, content, design, dispatch, forms, mail, slides, clips, or starter when none of the others fit.`,
+    `If you use the starter template, treat it as scaffolding only: the finished app must use the requested app's real name, home screen, navigation, package metadata, and manifest, and it must not leave visible "Starter", "Blank app", or "New app" UI behind.`,
     `Use the workspace app layout: create it under apps/${input.appId}, mount it at /${input.appId}, keep it on the shared workspace database/hosting model, and avoid table-name collisions by namespacing any new domain tables to the app.`,
     `Important routing rule: from outside the app, link to /${input.appId}; inside apps/${input.appId}, React Router routes are app-local. Use <Link to="/review"> and navigate("/review"), not "/${input.appId}/review"; APP_BASE_PATH supplies the mounted prefix, and hardcoding it causes doubled URLs like /${input.appId}/${input.appId}/review.`,
     `Prefer useActionQuery/useActionMutation for actions. If you must raw-fetch framework endpoints, wrap them with agentNativePath("/_agent-native/actions/<name>") so mounted apps call the right URL.`,

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

@@ -53,6 +53,7 @@ export function WorkspaceAppCard({
   const href = workspaceAppHref(app);
   const openInNewTab = isPendingBuilderHref(app);
   const isPending = app.status === "pending";
+  const pendingLabel = app.statusLabel || "Builder branch";
   const isArchived = !!app.archived;
   const audience = app.audience ?? "internal";
   const [editOpen, setEditOpen] = useState(false);
@@ -145,7 +146,7 @@ export function WorkspaceAppCard({
                 className="shrink-0 gap-1 border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300"
               >
                 <IconClockHour4 size={12} />
-                Building
+                {pendingLabel}
               </Badge>
             ) : null}
             {isArchived ? (
@@ -166,7 +167,7 @@ export function WorkspaceAppCard({
           </p>
           {isPending && app.branchName ? (
             <p className="mt-1 truncate text-xs text-muted-foreground">
-              Branch: {app.branchName}
+              Builder branch: {app.branchName}
             </p>
           ) : null}
           {app.description ? (

package/src/routes/pages/agents.tsx

@@ -1,11 +1,190 @@
-import { useActionQuery } from "@agent-native/core/client";
+import { useMemo, useState } from "react";
+import {
+  agentNativePath,
+  useActionMutation,
+  useActionQuery,
+} from "@agent-native/core/client";
 import { AgentsPanel, type ConnectedAgent } from "@/components/agents-panel";
 import { DispatchShell } from "@/components/dispatch-shell";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { IconCheck, IconCopy, IconPlugConnected } from "@tabler/icons-react";
+import { toast } from "sonner";
 
 export function meta() {
   return [{ title: "Agents — Dispatch" }];
 }
 
+interface McpAccessApp {
+  id: string;
+  name: string;
+  description: string;
+  url: string;
+  color: string;
+  granted: boolean;
+}
+
+type McpAccessMode = "all-apps" | "selected-apps";
+
+interface McpAccessState {
+  mode: McpAccessMode;
+  selectedAppIds: string[];
+}
+
+function dispatchMcpUrl(): string {
+  const path = agentNativePath("/_agent-native/mcp");
+  if (typeof window === "undefined") return path;
+  return new URL(path, window.location.origin).href;
+}
+
+function DispatchMcpAccessPanel() {
+  const { data, isLoading } = useActionQuery("list-mcp-app-access", {});
+  const [optimistic, setOptimistic] = useState<McpAccessState | null>(null);
+  const saveAccess = useActionMutation("set-mcp-app-access", {
+    onSuccess: () => {
+      setOptimistic(null);
+      toast.success("MCP app access updated");
+    },
+    onError: (error) => {
+      setOptimistic(null);
+      toast.error(error.message);
+    },
+  });
+
+  const apps = ((data as { apps?: McpAccessApp[] } | undefined)?.apps ??
+    []) as McpAccessApp[];
+  const access =
+    optimistic ??
+    ({
+      mode: ((data as { mode?: McpAccessMode } | undefined)?.mode ??
+        "all-apps") as McpAccessMode,
+      selectedAppIds:
+        (data as { selectedAppIds?: string[] } | undefined)?.selectedAppIds ??
+        [],
+    } satisfies McpAccessState);
+  const selected = useMemo(
+    () => new Set(access.selectedAppIds),
+    [access.selectedAppIds],
+  );
+  const grantedCount =
+    access.mode === "all-apps" ? apps.length : access.selectedAppIds.length;
+  const mcpUrl = dispatchMcpUrl();
+
+  function persist(next: McpAccessState) {
+    if (next.mode === "selected-apps" && next.selectedAppIds.length === 0) {
+      toast.error("Select at least one app, or expose all apps.");
+      return;
+    }
+    setOptimistic(next);
+    saveAccess.mutate(next);
+  }
+
+  function toggleApp(appId: string) {
+    const next = selected.has(appId)
+      ? access.selectedAppIds.filter((id) => id !== appId)
+      : [...access.selectedAppIds, appId];
+    persist({ mode: "selected-apps", selectedAppIds: next });
+  }
+
+  async function copyUrl() {
+    try {
+      await navigator.clipboard.writeText(mcpUrl);
+      toast.success("MCP URL copied");
+    } catch {
+      toast.error("Could not copy MCP URL");
+    }
+  }
+
+  return (
+    <section className="rounded-2xl border bg-card p-5">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+            <IconPlugConnected size={16} />
+            Unified MCP gateway
+          </div>
+          <div className="mt-1 max-w-2xl text-sm text-muted-foreground">
+            Connect external agents to Dispatch once, then route to granted
+            workspace apps through <code>list_apps</code>, <code>ask_app</code>,
+            and <code>open_app</code>.
+          </div>
+        </div>
+        <div className="flex items-center gap-3 rounded-xl border px-3 py-2">
+          <div>
+            <div className="text-xs font-medium text-foreground">
+              {access.mode === "all-apps" ? "All apps" : "Selected apps"}
+            </div>
+            <div className="text-xs text-muted-foreground">
+              {isLoading ? "Loading" : `${grantedCount} granted`}
+            </div>
+          </div>
+          <Switch
+            checked={access.mode === "all-apps"}
+            disabled={saveAccess.isPending || apps.length === 0}
+            onCheckedChange={(checked) =>
+              persist({
+                mode: checked ? "all-apps" : "selected-apps",
+                selectedAppIds: checked
+                  ? access.selectedAppIds
+                  : apps.map((app) => app.id),
+              })
+            }
+            aria-label="Expose all apps through Dispatch MCP"
+          />
+        </div>
+      </div>
+
+      <div className="mt-4 flex flex-col gap-2 sm:flex-row">
+        <Input readOnly value={mcpUrl} className="font-mono text-xs" />
+        <Button type="button" variant="outline" onClick={copyUrl}>
+          <IconCopy size={15} />
+          Copy URL
+        </Button>
+      </div>
+
+      {access.mode === "selected-apps" ? (
+        <div className="mt-4 grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
+          {apps.map((app) => {
+            const isSelected = selected.has(app.id);
+            return (
+              <button
+                key={app.id}
+                type="button"
+                disabled={
+                  saveAccess.isPending &&
+                  optimistic?.selectedAppIds.includes(app.id) !== isSelected
+                }
+                onClick={() => toggleApp(app.id)}
+                className="flex min-h-[76px] items-start gap-3 rounded-xl border bg-muted/20 px-3 py-3 text-left transition hover:bg-muted/40 disabled:cursor-not-allowed disabled:opacity-60"
+                aria-pressed={isSelected}
+              >
+                <span
+                  className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-xs font-bold text-white"
+                  style={{ backgroundColor: app.color }}
+                >
+                  {app.name.charAt(0).toUpperCase()}
+                </span>
+                <span className="min-w-0 flex-1">
+                  <span className="flex items-center gap-2 text-sm font-medium text-foreground">
+                    {app.name}
+                    {isSelected ? (
+                      <IconCheck size={14} className="text-emerald-500" />
+                    ) : null}
+                  </span>
+                  <span className="mt-1 line-clamp-2 block text-xs text-muted-foreground">
+                    {app.description || app.url}
+                  </span>
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+    </section>
+  );
+}
+
 export default function AgentsRoute() {
   const { data, refetch } = useActionQuery("list-connected-agents", {});
 
@@ -14,10 +193,13 @@ export default function AgentsRoute() {
       title="Agents"
       description="Dispatch can delegate to the built-in app suite over A2A by default. Add extra agents here only if you want to route work to apps outside that built-in set."
     >
-      <AgentsPanel
-        agents={(data || []) as ConnectedAgent[]}
-        onRefresh={refetch}
-      />
+      <div className="space-y-4">
+        <DispatchMcpAccessPanel />
+        <AgentsPanel
+          agents={(data || []) as ConnectedAgent[]}
+          onRefresh={refetch}
+        />
+      </div>
     </DispatchShell>
   );
 }

package/src/routes/pages/apps.tsx

@@ -5,6 +5,7 @@ import {
   IconBrush,
   IconCalendarMonth,
   IconChartBar,
+  IconChevronDown,
   IconClipboardList,
   IconEyeOff,
   IconFileText,
@@ -22,6 +23,13 @@ import { CreateAppPopover } from "@/components/create-app-popover";
 import { DispatchShell } from "@/components/dispatch-shell";
 import { WorkspaceAppCard } from "@/components/workspace-app-card";
 import { Button } from "@/components/ui/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Skeleton } from "@/components/ui/skeleton";
+import { cn } from "@/lib/utils";
 import type { WorkspaceAppSummary } from "@/lib/workspace-apps";
 
 export function meta() {
@@ -58,7 +66,8 @@ const TEMPLATE_ICONS: Record<string, typeof IconMail> = {
 
 export default function AppsRoute() {
   const [showHidden, setShowHidden] = useState(false);
-  const { data: apps = [] } = useActionQuery(
+  const [templatesOpen, setTemplatesOpen] = useState(false);
+  const { data: apps = [], isLoading: appsLoading } = useActionQuery(
     "list-workspace-apps",
     { includeAgentCards: false, includeArchived: true },
     {
@@ -70,7 +79,7 @@ export default function AppsRoute() {
     {},
     { staleTime: 60_000 },
   );
-  const { data: templates = [] } = useActionQuery(
+  const { data: templates = [], isLoading: templatesLoading } = useActionQuery(
     "list-available-workspace-templates",
     {},
     { refetchInterval: 5_000 },
@@ -84,6 +93,7 @@ export default function AppsRoute() {
   const visibleApps = allApps.filter((app) => !app.archived);
   const archivedApps = allApps.filter((app) => app.archived);
   const typedTemplates = templates as AvailableTemplate[];
+  const showAppSkeletons = appsLoading && allApps.length === 0;
 
   return (
     <DispatchShell
@@ -94,82 +104,214 @@ export default function AppsRoute() {
           : "Open workspace apps and start new app creation from Dispatch."
       }
     >
-      <div className="space-y-6">
+      <div className="space-y-8">
         <section className="space-y-3">
-          <div className="flex items-center justify-between gap-3">
-            <div className="flex items-center gap-2">
-              <IconApps size={16} className="text-muted-foreground" />
-              <h2 className="text-sm font-semibold text-foreground">
-                {workspaceLabel
-                  ? `Apps in ${workspaceLabel}`
-                  : "Workspace apps"}
-              </h2>
+          <div className="flex flex-wrap items-end justify-between gap-3">
+            <div className="flex min-w-0 items-start gap-2">
+              <IconApps
+                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">
+                  {workspaceLabel
+                    ? `Apps in ${workspaceLabel}`
+                    : "Workspace apps"}
+                </h2>
+                <p className="mt-0.5 text-xs text-muted-foreground">
+                  {visibleApps.length} active
+                  {archivedApps.length > 0
+                    ? ` · ${archivedApps.length} hidden`
+                    : ""}
+                </p>
+              </div>
             </div>
-            <CreateAppPopover
-              align="end"
-              trigger={
-                <Button size="sm" variant="outline">
-                  <IconPlus size={15} className="mr-1.5" />
-                  App
-                </Button>
-              }
-            />
-          </div>
-
-          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
-            {visibleApps.map((app) => (
-              <WorkspaceAppCard key={app.id} app={app} />
-            ))}
-
-            <CreateAppPopover />
+            {visibleApps.length > 0 ? (
+              <CreateAppPopover
+                align="end"
+                trigger={
+                  <Button size="sm">
+                    <IconPlus size={15} className="mr-1.5" />
+                    Create app
+                  </Button>
+                }
+              />
+            ) : null}
           </div>
-        </section>
 
-        {typedTemplates.length > 0 ? (
-          <section className="space-y-3">
-            <div className="flex items-center gap-2">
-              <IconStack3 size={16} className="text-muted-foreground" />
-              <h2 className="text-sm font-semibold text-foreground">
-                Add a template
-              </h2>
-              <span className="text-xs text-muted-foreground">
-                Scaffold a first-party app into{" "}
-                <code className="font-mono text-[11px]">apps/</code>.
-              </span>
-            </div>
-            <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
-              {typedTemplates.map((template) => (
-                <AddTemplateCard key={template.name} template={template} />
+          {showAppSkeletons ? (
+            <AppsSkeletonGrid />
+          ) : visibleApps.length > 0 ? (
+            <div className="grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3">
+              {visibleApps.map((app) => (
+                <WorkspaceAppCard key={app.id} app={app} className="h-full" />
               ))}
             </div>
-          </section>
+          ) : (
+            <EmptyAppsState />
+          )}
+        </section>
+
+        {typedTemplates.length > 0 || templatesLoading ? (
+          <Collapsible open={templatesOpen} onOpenChange={setTemplatesOpen}>
+            <section className="space-y-3">
+              <div className="flex flex-wrap items-center justify-between gap-3 border-t pt-4">
+                <div className="flex min-w-0 items-center gap-2">
+                  <IconStack3
+                    size={16}
+                    className="shrink-0 text-muted-foreground"
+                  />
+                  <div className="min-w-0">
+                    <h2 className="text-sm font-semibold text-foreground">
+                      Templates
+                    </h2>
+                    <p className="text-xs text-muted-foreground">
+                      {templatesLoading
+                        ? "Checking available templates"
+                        : `${typedTemplates.length} available to scaffold`}
+                    </p>
+                  </div>
+                </div>
+                <CollapsibleTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="gap-1.5"
+                  >
+                    {templatesOpen ? "Hide" : "Show"}
+                    <IconChevronDown
+                      size={14}
+                      className={cn(
+                        "transition-transform",
+                        templatesOpen && "rotate-180",
+                      )}
+                    />
+                  </Button>
+                </CollapsibleTrigger>
+              </div>
+              <CollapsibleContent>
+                {templatesLoading && typedTemplates.length === 0 ? (
+                  <AppsSkeletonGrid />
+                ) : (
+                  <div className="grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3">
+                    {typedTemplates.map((template) => (
+                      <AddTemplateCard
+                        key={template.name}
+                        template={template}
+                      />
+                    ))}
+                  </div>
+                )}
+              </CollapsibleContent>
+            </section>
+          </Collapsible>
         ) : null}
 
         {archivedApps.length > 0 ? (
-          <section className="space-y-3">
-            <button
-              type="button"
-              onClick={() => setShowHidden((cur) => !cur)}
-              className="inline-flex cursor-pointer items-center gap-2 text-xs text-muted-foreground hover:text-foreground"
-            >
-              <IconEyeOff size={14} />
-              {showHidden ? "Hide" : "Show"} {archivedApps.length} hidden{" "}
-              {archivedApps.length === 1 ? "app" : "apps"}
-            </button>
-            {showHidden ? (
-              <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
-                {archivedApps.map((app) => (
-                  <WorkspaceAppCard key={app.id} app={app} />
-                ))}
+          <Collapsible open={showHidden} onOpenChange={setShowHidden}>
+            <section className="space-y-3">
+              <div className="flex flex-wrap items-center justify-between gap-3 border-t pt-4">
+                <div className="flex min-w-0 items-center gap-2">
+                  <IconEyeOff
+                    size={16}
+                    className="shrink-0 text-muted-foreground"
+                  />
+                  <div className="min-w-0">
+                    <h2 className="text-sm font-semibold text-foreground">
+                      Hidden apps
+                    </h2>
+                    <p className="text-xs text-muted-foreground">
+                      {archivedApps.length} hidden{" "}
+                      {archivedApps.length === 1 ? "app" : "apps"}
+                    </p>
+                  </div>
+                </div>
+                <CollapsibleTrigger asChild>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    className="gap-1.5"
+                  >
+                    {showHidden ? "Hide" : "Show"}
+                    <IconChevronDown
+                      size={14}
+                      className={cn(
+                        "transition-transform",
+                        showHidden && "rotate-180",
+                      )}
+                    />
+                  </Button>
+                </CollapsibleTrigger>
               </div>
-            ) : null}
-          </section>
+              <CollapsibleContent>
+                <div className="grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3">
+                  {archivedApps.map((app) => (
+                    <WorkspaceAppCard
+                      key={app.id}
+                      app={app}
+                      className="h-full"
+                    />
+                  ))}
+                </div>
+              </CollapsibleContent>
+            </section>
+          </Collapsible>
         ) : null}
       </div>
     </DispatchShell>
   );
 }
 
+function AppsSkeletonGrid() {
+  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 justify-between gap-3">
+            <div className="min-w-0 flex-1 space-y-3">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-3 w-24" />
+              <div className="space-y-2 pt-1">
+                <Skeleton className="h-3 w-full" />
+                <Skeleton className="h-3 w-2/3" />
+              </div>
+            </div>
+            <Skeleton className="h-7 w-7 rounded-md" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function EmptyAppsState() {
+  return (
+    <div className="rounded-lg border border-dashed bg-card px-4 py-10 text-center">
+      <div className="mx-auto flex size-10 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+        <IconApps size={18} />
+      </div>
+      <h3 className="mt-3 text-sm font-semibold text-foreground">
+        No workspace apps yet
+      </h3>
+      <p className="mx-auto mt-1 max-w-sm text-sm text-muted-foreground">
+        Create an app when a workflow needs its own focused place to live.
+      </p>
+      <div className="mt-4">
+        <CreateAppPopover
+          trigger={
+            <Button size="sm">
+              <IconPlus size={15} className="mr-1.5" />
+              Create app
+            </Button>
+          }
+        />
+      </div>
+    </div>
+  );
+}
+
 function AddTemplateCard({ template }: { template: AvailableTemplate }) {
   const Icon = TEMPLATE_ICONS[template.icon] ?? IconSparkles;
   const scaffold = useActionMutation("scaffold-workspace-app", {
@@ -188,9 +330,9 @@ function AddTemplateCard({ template }: { template: AvailableTemplate }) {
   });
 
   return (
-    <div className="group relative flex items-start gap-3 rounded-lg border bg-card p-4 transition hover:border-foreground/30">
+    <div className="group relative flex h-full min-h-36 items-stretch gap-3 rounded-lg border bg-card p-4 transition hover:border-foreground/30">
       <div
-        className="flex h-9 w-9 shrink-0 items-center justify-center rounded-md"
+        className="flex h-9 w-9 shrink-0 items-center justify-center self-start rounded-md"
         style={{
           backgroundColor: `rgb(${template.colorRgb} / 0.12)`,
           color: template.color,
@@ -198,7 +340,7 @@ function AddTemplateCard({ template }: { template: AvailableTemplate }) {
       >
         <Icon size={18} />
       </div>
-      <div className="min-w-0 flex-1">
+      <div className="flex min-w-0 flex-1 flex-col">
         <div className="flex min-w-0 items-center gap-2">
           <h3 className="truncate text-sm font-semibold text-foreground">
             {template.label}
@@ -207,7 +349,7 @@ function AddTemplateCard({ template }: { template: AvailableTemplate }) {
         <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-muted-foreground">
           {template.hint}
         </p>
-        <div className="mt-3">
+        <div className="mt-auto pt-3">
           <Button
             size="sm"
             variant="outline"
@@ -217,7 +359,7 @@ function AddTemplateCard({ template }: { template: AvailableTemplate }) {
             {scaffold.isPending ? (
               <>
                 <IconLoader2 size={14} className="mr-1.5 animate-spin" />
-                Adding…
+                Adding...
               </>
             ) : (
               <>

package/src/routes/pages/metrics.tsx

@@ -47,6 +47,7 @@ interface AppAccessMetric {
   name: string;
   path: string;
   status?: "ready" | "pending";
+  statusLabel?: string;
   isDispatch: boolean;
   accessLabel: string;
   accessUsers: number;
@@ -440,7 +441,9 @@ function AppAccessTable({
                       "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300",
                   )}
                 >
-                  {row.status === "pending" ? "Building" : row.accessLabel}
+                  {row.status === "pending"
+                    ? row.statusLabel || "Builder branch"
+                    : row.accessLabel}
                 </Badge>
               </td>
               <td className="px-2 py-3 text-right tabular-nums">

package/src/routes/pages/overview.tsx

@@ -213,16 +213,22 @@ function WorkspaceAppsSection({
         </Button>
       </div>
 
-      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
-        {showSkeletons
-          ? Array.from({ length: 6 }).map((_, index) => (
-              <AppCardSkeleton key={index} />
-            ))
-          : visibleApps.map((app) => (
-              <WorkspaceAppCard key={app.id} app={app} className="min-h-32" />
-            ))}
-
-        {!showSkeletons ? <CreateAppPopover /> : null}
+      <div className="grid auto-rows-fr gap-3 sm:grid-cols-2 xl:grid-cols-3">
+        {showSkeletons ? (
+          Array.from({ length: 6 }).map((_, index) => (
+            <AppCardSkeleton key={index} />
+          ))
+        ) : visibleApps.length > 0 ? (
+          visibleApps.map((app) => (
+            <WorkspaceAppCard
+              key={app.id}
+              app={app}
+              className="h-full min-h-32"
+            />
+          ))
+        ) : (
+          <CreateAppPopover />
+        )}
       </div>
     </section>
   );