@agent-native/dispatch 0.3.0 → 0.5.0

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

@@ -1,6 +1,21 @@
-import { IconArrowUpRight, IconClockHour4 } from "@tabler/icons-react";
+import { useActionMutation } from "@agent-native/core/client";
+import {
+  IconArrowUpRight,
+  IconClockHour4,
+  IconDots,
+  IconEye,
+  IconEyeOff,
+  IconTrash,
+} from "@tabler/icons-react";
+import { toast } from "sonner";
 import { AppKeysPopover } from "@/components/app-keys-popover";
 import { Badge } from "@/components/ui/badge";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 import {
   isPendingBuilderHref,
@@ -17,12 +32,41 @@ export function WorkspaceAppCard({
 }) {
   const href = workspaceAppHref(app);
   const openInNewTab = isPendingBuilderHref(app);
+  const isPending = app.status === "pending";
+  const isArchived = !!app.archived;
+
+  const archive = useActionMutation("archive-workspace-app", {
+    onError: (err) =>
+      toast.error(`Could not hide ${app.name}: ${stringifyError(err)}`),
+  });
+  const unarchive = useActionMutation("unarchive-workspace-app", {
+    onError: (err) =>
+      toast.error(`Could not restore ${app.name}: ${stringifyError(err)}`),
+  });
+  const removePending = useActionMutation("remove-pending-workspace-app", {
+    onError: (err) =>
+      toast.error(`Could not remove ${app.name}: ${stringifyError(err)}`),
+  });
+
+  const handleArchive = () => {
+    archive.mutate({ appId: app.id });
+    toast.success(`Hid ${app.name} from the Apps list`);
+  };
+  const handleUnarchive = () => {
+    unarchive.mutate({ appId: app.id });
+    toast.success(`Restored ${app.name} to the Apps list`);
+  };
+  const handleRemovePending = () => {
+    removePending.mutate({ appId: app.id });
+    toast.success(`Removed pending ${app.name}`);
+  };
 
   return (
     <div
       aria-disabled={!href}
       className={cn(
         "group relative rounded-lg border bg-card p-4 transition hover:border-foreground/30 aria-disabled:opacity-60",
+        isArchived && "opacity-70",
         className,
       )}
     >
@@ -42,7 +86,7 @@ export function WorkspaceAppCard({
             <h3 className="truncate text-sm font-semibold text-foreground">
               {app.name}
             </h3>
-            {app.status === "pending" ? (
+            {isPending ? (
               <Badge
                 variant="outline"
                 className="shrink-0 gap-1 border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300"
@@ -51,11 +95,17 @@ export function WorkspaceAppCard({
                 Building
               </Badge>
             ) : null}
+            {isArchived ? (
+              <Badge variant="outline" className="shrink-0 gap-1">
+                <IconEyeOff size={12} />
+                Hidden
+              </Badge>
+            ) : null}
           </div>
           <p className="mt-1 truncate font-mono text-xs text-muted-foreground">
             {app.path}
           </p>
-          {app.status === "pending" && app.branchName ? (
+          {isPending && app.branchName ? (
             <p className="mt-1 truncate text-xs text-muted-foreground">
               Branch: {app.branchName}
             </p>
@@ -67,12 +117,47 @@ export function WorkspaceAppCard({
           ) : null}
         </div>
         <div className="flex shrink-0 items-center gap-1">
-          {app.status === "ready" ? (
+          {!isPending && !isArchived ? (
             <div className="pointer-events-auto">
               <AppKeysPopover appId={app.id} appName={app.name} />
             </div>
           ) : null}
-          {href ? (
+          <div className="pointer-events-auto">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button
+                  type="button"
+                  aria-label={`More actions for ${app.name}`}
+                  className="inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-muted-foreground opacity-0 transition hover:bg-accent hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100 data-[state=open]:opacity-100"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <IconDots size={15} />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-44">
+                {isPending ? (
+                  <DropdownMenuItem
+                    onSelect={handleRemovePending}
+                    className="text-red-600 focus:text-red-600 dark:text-red-400 dark:focus:text-red-400"
+                  >
+                    <IconTrash size={14} className="mr-2" />
+                    Remove from list
+                  </DropdownMenuItem>
+                ) : isArchived ? (
+                  <DropdownMenuItem onSelect={handleUnarchive}>
+                    <IconEye size={14} className="mr-2" />
+                    Restore to list
+                  </DropdownMenuItem>
+                ) : (
+                  <DropdownMenuItem onSelect={handleArchive}>
+                    <IconEyeOff size={14} className="mr-2" />
+                    Hide from list
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+          {href && !isArchived ? (
             <IconArrowUpRight
               size={16}
               className="text-muted-foreground transition group-hover:text-foreground"
@@ -83,3 +168,8 @@ export function WorkspaceAppCard({
     </div>
   );
 }
+
+function stringifyError(err: unknown): string {
+  if (err instanceof Error) return err.message;
+  return String(err);
+}

package/src/lib/workspace-apps.ts

@@ -9,6 +9,7 @@ export interface WorkspaceAppSummary {
   statusLabel?: string;
   builderUrl?: string | null;
   branchName?: string | null;
+  archived?: boolean;
 }
 
 export function workspaceAppHref(app: WorkspaceAppSummary): string | null {

package/src/routes/pages/apps.tsx

@@ -1,5 +1,23 @@
-import { useActionQuery } from "@agent-native/core/client";
-import { IconApps, IconPlus } from "@tabler/icons-react";
+import { useState } from "react";
+import { useActionMutation, useActionQuery } from "@agent-native/core/client";
+import {
+  IconApps,
+  IconBrush,
+  IconCalendarMonth,
+  IconChartBar,
+  IconClipboardList,
+  IconEyeOff,
+  IconFileText,
+  IconLoader2,
+  IconMail,
+  IconPlus,
+  IconPresentation,
+  IconScreenShare,
+  IconSparkles,
+  IconStack3,
+  IconVideo,
+} from "@tabler/icons-react";
+import { toast } from "sonner";
 import { CreateAppPopover } from "@/components/create-app-popover";
 import { DispatchShell } from "@/components/dispatch-shell";
 import { WorkspaceAppCard } from "@/components/workspace-app-card";
@@ -16,10 +34,33 @@ interface WorkspaceInfo {
   appCount: number;
 }
 
+interface AvailableTemplate {
+  name: string;
+  label: string;
+  hint: string;
+  icon: string;
+  color: string;
+  colorRgb: string;
+  core: boolean;
+}
+
+const TEMPLATE_ICONS: Record<string, typeof IconMail> = {
+  Mail: IconMail,
+  CalendarMonth: IconCalendarMonth,
+  FileText: IconFileText,
+  Presentation: IconPresentation,
+  ScreenShare: IconScreenShare,
+  ChartBar: IconChartBar,
+  ClipboardList: IconClipboardList,
+  Brush: IconBrush,
+  Video: IconVideo,
+};
+
 export default function AppsRoute() {
+  const [showHidden, setShowHidden] = useState(false);
   const { data: apps = [] } = useActionQuery(
     "list-workspace-apps",
-    { includeAgentCards: false },
+    { includeAgentCards: false, includeArchived: true },
     {
       refetchInterval: 2_000,
     },
@@ -29,11 +70,20 @@ export default function AppsRoute() {
     {},
     { staleTime: 60_000 },
   );
+  const { data: templates = [] } = useActionQuery(
+    "list-available-workspace-templates",
+    {},
+    { refetchInterval: 5_000 },
+  );
+
   const ws = workspace as WorkspaceInfo | undefined;
   const workspaceLabel = ws?.displayName ?? ws?.name ?? null;
-  const typedApps = (apps as WorkspaceAppSummary[]).filter(
+  const allApps = (apps as WorkspaceAppSummary[]).filter(
     (app) => !app.isDispatch,
   );
+  const visibleApps = allApps.filter((app) => !app.archived);
+  const archivedApps = allApps.filter((app) => app.archived);
+  const typedTemplates = templates as AvailableTemplate[];
 
   return (
     <DispatchShell
@@ -44,7 +94,7 @@ export default function AppsRoute() {
           : "Open workspace apps and start new app creation from Dispatch."
       }
     >
-      <div className="space-y-4">
+      <div className="space-y-6">
         <section className="space-y-3">
           <div className="flex items-center justify-between gap-3">
             <div className="flex items-center gap-2">
@@ -67,14 +117,117 @@ export default function AppsRoute() {
           </div>
 
           <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
-            {typedApps.map((app) => (
+            {visibleApps.map((app) => (
               <WorkspaceAppCard key={app.id} app={app} />
             ))}
 
             <CreateAppPopover />
           </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} />
+              ))}
+            </div>
+          </section>
+        ) : 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} />
+                ))}
+              </div>
+            ) : null}
+          </section>
+        ) : null}
       </div>
     </DispatchShell>
   );
 }
+
+function AddTemplateCard({ template }: { template: AvailableTemplate }) {
+  const Icon = TEMPLATE_ICONS[template.icon] ?? IconSparkles;
+  const scaffold = useActionMutation("scaffold-workspace-app", {
+    onSuccess: (result: any) => {
+      toast.success(
+        `Scaffolded apps/${result?.appId || template.name}. The gateway will pick it up shortly.`,
+      );
+    },
+    onError: (err) => {
+      toast.error(
+        `Could not scaffold ${template.label}: ${
+          err instanceof Error ? err.message : String(err)
+        }`,
+      );
+    },
+  });
+
+  return (
+    <div className="group relative flex items-start 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"
+        style={{
+          backgroundColor: `rgb(${template.colorRgb} / 0.12)`,
+          color: template.color,
+        }}
+      >
+        <Icon size={18} />
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="flex min-w-0 items-center gap-2">
+          <h3 className="truncate text-sm font-semibold text-foreground">
+            {template.label}
+          </h3>
+        </div>
+        <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-muted-foreground">
+          {template.hint}
+        </p>
+        <div className="mt-3">
+          <Button
+            size="sm"
+            variant="outline"
+            disabled={scaffold.isPending}
+            onClick={() => scaffold.mutate({ template: template.name })}
+          >
+            {scaffold.isPending ? (
+              <>
+                <IconLoader2 size={14} className="mr-1.5 animate-spin" />
+                Adding…
+              </>
+            ) : (
+              <>
+                <IconPlus size={14} className="mr-1.5" />
+                Add to workspace
+              </>
+            )}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}