@agent-native/core 0.155.0 → 0.157.1

package/corpus/templates/factory/README.md

@@ -76,8 +76,8 @@ approves a Factory item.
 
 ## Agents and agentic apps
 
-Factory's top-level Agents tab is a shared workspace surface, not a second
-registry. It reads mounted agentic apps and their editable Dispatch metadata,
+Factory's top-level **Agents** sidebar tab is a shared workspace surface, not a
+second registry. It reads mounted agentic apps and their editable Dispatch metadata,
 then embeds Dispatch's reusable-agent manager for create, chat, import, and
 folder-backed pack editing. A simple agent's profile lives at
 `agents/<slug>.md`; its optional context, references, and private skills live
@@ -86,6 +86,10 @@ Cowork-style folder, or another text-based agent setup. The importer strips
 credentials, hooks, shell commands, and local environment settings, and All-app
 imports remain subject to Dispatch approval policy.
 
+The page uses the same two-column library treatment for mounted apps and
+reusable agents. Empty states keep creation actions in the content area, and
+agent-specific secondary actions live behind each row's overflow menu.
+
 When editing a factory flow, an agent step can bind to either a shared reusable
 agent or a ready mounted agentic app from the same workspace database. The map
 stores the selected target type and id, while the graph remains a reviewable

package/corpus/templates/factory/actions/view-screen.ts

@@ -82,6 +82,21 @@ export default defineAction({
       }
     }
 
+    if (
+      navigation &&
+      typeof navigation === "object" &&
+      "view" in navigation &&
+      navigation.view === "agents"
+    ) {
+      const [apps, agents] = await Promise.all([
+        runDispatchAction("list-workspace-apps", {
+          includeAgentCards: false,
+        }),
+        runDispatchAction("list-workspace-resources", { kind: "agent" }),
+      ]);
+      screen.agents = { apps, agents };
+    }
+
     if (Object.keys(screen).length === 0) {
       return "No application state found. Is the app running?";
     }

package/corpus/templates/factory/app/components/factory/FactoryAgentsView.tsx

@@ -1,33 +1,14 @@
-import {
-  useActionMutation,
-  useActionQuery,
-} from "@agent-native/core/client/hooks";
+import { useActionQuery } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
-import { SimpleAgentsPanel } from "@agent-native/dispatch/components";
-import { ActionQueryError } from "@agent-native/dispatch/components";
-import { Badge } from "@agent-native/dispatch/components/ui/badge";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@agent-native/dispatch/components/ui/dialog";
 import {
-  IconEdit,
-  IconExternalLink,
-  IconLayoutGrid,
-} from "@tabler/icons-react";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
+  ActionQueryError,
+  CreateAppPopover,
+  SimpleAgentsPanel,
+  WorkspaceAppCard,
+} from "@agent-native/dispatch/components";
+import { IconPlus } from "@tabler/icons-react";
 
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
 
 interface WorkspaceAppSummary {
   id: string;
@@ -40,88 +21,12 @@ interface WorkspaceAppSummary {
   statusLabel?: string;
 }
 
-function EditAppDialog({
-  app,
-  onSaved,
-  t,
-}: {
-  app: WorkspaceAppSummary;
-  onSaved: () => void;
-  t: ReturnType<typeof useT>;
-}) {
-  const [open, setOpen] = useState(false);
-  const [name, setName] = useState(app.name);
-  const [description, setDescription] = useState(app.description ?? "");
-  const update = useActionMutation("update-workspace-app-metadata", {
-    onSuccess: () => {
-      toast.success(t("factoryRoute.appDetailsUpdated"));
-      setOpen(false);
-      onSaved();
-    },
-    onError: (error) => toast.error(error.message),
-  });
-
-  useEffect(() => {
-    if (!open) return;
-    setName(app.name);
-    setDescription(app.description ?? "");
-  }, [app, open]);
-
+function CreateAppButton({ label }: { label: string }) {
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button variant="ghost" size="icon" aria-label={`Edit ${app.name}`}>
-          <IconEdit size={16} />
-        </Button>
-      </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{t("factoryRoute.editAppDetails")}</DialogTitle>
-          <DialogDescription className="sr-only">
-            {t("factoryRoute.editAppDetailsDescription")}
-          </DialogDescription>
-        </DialogHeader>
-        <div className="space-y-4 py-2">
-          <div className="space-y-2">
-            <Label htmlFor={`factory-app-name-${app.id}`}>
-              {t("factoryRoute.appName")}
-            </Label>
-            <Input
-              id={`factory-app-name-${app.id}`}
-              value={name}
-              onChange={(event) => setName(event.target.value)}
-            />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor={`factory-app-description-${app.id}`}>
-              {t("factoryRoute.appDescription")}
-            </Label>
-            <Textarea
-              id={`factory-app-description-${app.id}`}
-              value={description}
-              onChange={(event) => setDescription(event.target.value)}
-              rows={4}
-            />
-          </div>
-        </div>
-        <DialogFooter>
-          <Button
-            onClick={() =>
-              update.mutate({
-                appId: app.id,
-                name: name.trim(),
-                description: description.trim(),
-              })
-            }
-            disabled={!name.trim() || update.isPending}
-          >
-            {update.isPending
-              ? t("factoryRoute.savingChanges")
-              : t("factoryRoute.saveChanges")}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+    <Button size="sm">
+      <IconPlus size={15} />
+      {label}
+    </Button>
   );
 }
 
@@ -130,6 +35,7 @@ function AgenticAppsSection({ t }: { t: ReturnType<typeof useT> }) {
     includeAgentCards: false,
   });
   const apps = (query.data ?? []).filter((app) => !app.isDispatch);
+  const createAppLabel = t("factoryRoute.createApp");
 
   if (query.isError) {
     return (
@@ -141,80 +47,52 @@ function AgenticAppsSection({ t }: { t: ReturnType<typeof useT> }) {
   }
 
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2 text-base">
-          <IconLayoutGrid className="size-4 text-muted-foreground" />
+    <section className="flex flex-col gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <h2 className="text-base font-medium text-foreground">
           {t("factoryRoute.agenticAppsTitle")}
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        {query.isLoading && apps.length === 0 ? (
-          <div className="space-y-3">
-            {[0, 1].map((item) => (
-              <div
-                key={item}
-                className="h-16 animate-pulse rounded-xl bg-muted"
-              />
-            ))}
-          </div>
-        ) : apps.length > 0 ? (
-          <div className="space-y-2">
-            {apps.map((app) => (
-              <div
-                key={app.id}
-                className="flex items-start gap-3 rounded-xl border px-4 py-3"
-              >
-                <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
-                  <IconLayoutGrid size={18} />
-                </div>
-                <div className="min-w-0 flex-1">
-                  <div className="flex flex-wrap items-center gap-2">
-                    <span className="text-sm font-medium">{app.name}</span>
-                    {app.status ? (
-                      <Badge variant="outline">
-                        {app.statusLabel || app.status}
-                      </Badge>
-                    ) : null}
-                  </div>
-                  {app.description ? (
-                    <div className="mt-1 text-sm text-muted-foreground">
-                      {app.description}
-                    </div>
-                  ) : null}
-                  <div className="mt-1 font-mono text-[11px] text-muted-foreground/70">
-                    {app.path}
-                  </div>
-                </div>
-                <div className="flex shrink-0 items-center gap-1">
-                  {app.url ? (
-                    <Button variant="ghost" size="icon" asChild>
-                      <a
-                        href={app.url}
-                        target="_blank"
-                        rel="noreferrer"
-                        aria-label={t("factoryRoute.openApp")}
-                      >
-                        <IconExternalLink size={16} />
-                      </a>
-                    </Button>
-                  ) : null}
-                  <EditAppDialog
-                    app={app}
-                    t={t}
-                    onSaved={() => void query.refetch()}
-                  />
-                </div>
-              </div>
-            ))}
-          </div>
-        ) : (
-          <div className="rounded-xl border border-dashed px-6 py-10 text-center text-sm text-muted-foreground">
+        </h2>
+        {apps.length > 0 ? (
+          <CreateAppPopover
+            align="end"
+            trigger={<CreateAppButton label={createAppLabel} />}
+            onCreated={() => void query.refetch()}
+          />
+        ) : null}
+      </div>
+      {query.isLoading && apps.length === 0 ? (
+        <div className="grid gap-3 md:grid-cols-2">
+          {[0, 1, 2, 3].map((item) => (
+            <div
+              key={item}
+              className="h-24 animate-pulse rounded-2xl border bg-muted"
+            />
+          ))}
+        </div>
+      ) : apps.length > 0 ? (
+        <div className="grid gap-3 md:grid-cols-2">
+          {apps.map((app) => (
+            <WorkspaceAppCard
+              key={app.id}
+              app={app}
+              className="rounded-2xl border bg-card px-4 py-4"
+            />
+          ))}
+        </div>
+      ) : (
+        <div className="rounded-2xl border border-dashed bg-card px-4 py-12 text-center">
+          <div className="text-sm font-medium text-foreground">
             {t("factoryRoute.agenticAppsEmpty")}
           </div>
-        )}
-      </CardContent>
-    </Card>
+          <div className="mt-4 flex justify-center">
+            <CreateAppPopover
+              trigger={<CreateAppButton label={createAppLabel} />}
+              onCreated={() => void query.refetch()}
+            />
+          </div>
+        </div>
+      )}
+    </section>
   );
 }
 
@@ -222,18 +100,9 @@ export function FactoryAgentsView() {
   const t = useT();
 
   return (
-    <div className="space-y-6 p-4 lg:p-6">
+    <div className="flex flex-col gap-8 p-6 lg:p-8">
       <AgenticAppsSection t={t} />
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-base">
-            {t("factoryRoute.agentsTitle")}
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <SimpleAgentsPanel />
-        </CardContent>
-      </Card>
+      <SimpleAgentsPanel title={t("factoryRoute.agentsTitle")} />
     </div>
   );
 }

package/corpus/templates/factory/app/components/layout/Header.tsx

@@ -12,6 +12,7 @@ import { APP_TITLE } from "@/lib/app-config";
 const pageTitleKeys: Record<string, string> = {
   "/": "navigation.chat",
   "/chat": "navigation.chat",
+  "/agents": "navigation.agents",
   "/observability": "navigation.observability",
   "/agent": "settings.agentTitle",
   "/settings": "navigation.settings",

package/corpus/templates/factory/app/components/layout/Layout.tsx

@@ -52,7 +52,7 @@ export function Layout({ children }: LayoutProps) {
   const navigate = useNavigate();
   const t = useT();
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(true);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const isChatRoute =
     location.pathname === "/" ||
     location.pathname === "/chat" ||

package/corpus/templates/factory/app/components/layout/Sidebar.tsx

@@ -17,6 +17,7 @@ import {
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
   IconGitPullRequest,
+  IconHierarchy2,
   IconMessageCircle,
   IconSearch,
   IconSettings,
@@ -46,6 +47,12 @@ const navItems = [
     href: "/factory",
     view: "factory",
   },
+  {
+    icon: IconHierarchy2,
+    labelKey: "navigation.agents",
+    href: "/agents",
+    view: "agents",
+  },
 ];
 
 const bottomNavItems = [

package/corpus/templates/factory/app/hooks/use-navigation-state.ts

@@ -72,6 +72,7 @@ function viewForPath(pathname: string): string {
   if (pathname.startsWith("/database")) return "database";
   if (pathname.startsWith("/extensions")) return "extensions";
   if (pathname.startsWith("/observability")) return "observability";
+  if (pathname.startsWith("/agents")) return "agents";
   if (pathname.startsWith("/factory")) return "factory";
   if (pathname.startsWith("/settings/agent") || pathname.startsWith("/agent")) {
     return "agent";
@@ -95,6 +96,8 @@ function pathForView(view?: string): string {
       return "/observability";
     case "factory":
       return "/factory";
+    case "agents":
+      return "/agents";
     case "agent":
       return "/settings/agent";
     case "settings":

package/corpus/templates/factory/app/i18n/en-US.ts

@@ -40,6 +40,7 @@ const messages = {
     unpinChat: "Unpin Chat",
   },
   navigation: {
+    agents: "Agents",
     chat: "Chat",
     collapseSidebar: "Collapse Sidebar",
     database: "Database",
@@ -51,7 +52,7 @@ const messages = {
     openNavigation: "Open navigation",
     settings: "Settings",
     team: "Team",
-    triage: "Factory",
+    triage: "Factories",
   },
   triage: {
     title: "Factory",
@@ -165,6 +166,7 @@ const messages = {
     agentsTab: "Agents",
     agenticAppsTitle: "Agentic apps",
     agenticAppsEmpty: "No agentic apps in this workspace yet.",
+    createApp: "Create app",
     editAppDetails: "Edit app details",
     editAppDetailsDescription:
       "Update the shared display name and description for this workspace app.",

package/corpus/templates/factory/app/routes/agents.tsx

@@ -0,0 +1,9 @@
+import { FactoryAgentsView } from "@/components/factory/FactoryAgentsView";
+
+export default function AgentsRoute() {
+  return (
+    <div className="h-full min-h-0 overflow-y-auto bg-background">
+      <FactoryAgentsView />
+    </div>
+  );
+}

package/corpus/templates/mail/server/plugins/auth.ts

@@ -33,8 +33,6 @@ export default createAuthPlugin({
       "Multi-account Gmail in a single unified inbox",
       "Autonomous triage, archiving, and follow-ups",
     ],
-    runLocalCommand:
-      "npx @agent-native/core@latest create my-mail-app --template mail",
   },
   // Gmail Pub/Sub push notifications POST here from Google's servers — no
   // user session. The handler itself verifies the OIDC token when

package/corpus/templates/plan/app/components/plan/LocalCodebasePicker.tsx

@@ -108,8 +108,17 @@ export function LocalCodebasePicker() {
       if (removedCount > 0) {
         await queryClient.invalidateQueries({ queryKey: ["resources"] });
       }
+
+      const failedResult = results.find(
+        (result) => result.status === "rejected",
+      );
+      if (failedResult?.status === "rejected") {
+        throw failedResult.reason instanceof Error
+          ? failedResult.reason
+          : new Error(t("raw.localCodebase.codebaseSyncFailed"));
+      }
     },
-    [queryClient],
+    [queryClient, t],
   );
 
   useEffect(() => {
@@ -187,11 +196,12 @@ export function LocalCodebasePicker() {
       handle: chosen.handle,
       latest: null,
     };
-    if (active && active.id !== selection.id) {
-      await cleanupLocalResources(active);
-    }
-    setActive(selection);
+    setSyncState({ kind: "syncing" });
     try {
+      if (active && active.id !== selection.id) {
+        await cleanupLocalResources(active);
+      }
+      setActive(selection);
       await syncSelection(selection);
     } catch (err) {
       const message =
@@ -207,16 +217,28 @@ export function LocalCodebasePicker() {
 
   const clearSelection = useCallback(async () => {
     const previous = active;
-    await clearLocalCodebaseSelection();
-    setActive(null);
-    setSummary(null);
-    setSyncState({ kind: "idle" });
-    await syncAppState(null);
-    if (previous) {
-      await cleanupLocalResources(previous);
+    setSyncState({ kind: "syncing" });
+    try {
+      if (previous) {
+        await cleanupLocalResources(previous);
+      }
+      await clearLocalCodebaseSelection();
+      setActive(null);
+      setSummary(null);
+      await syncAppState(null);
+      setSyncState({ kind: "idle" });
+      toast(t("raw.localCodebase.codebaseUnlinked"));
+    } catch (err) {
+      const message =
+        err instanceof Error
+          ? err.message
+          : t("raw.localCodebase.codebaseSyncFailed");
+      setSyncState({ kind: "error", message });
+      toast.error(t("raw.localCodebase.codebaseSyncFailed"), {
+        description: message,
+      });
     }
-    toast(t("raw.localCodebase.codebaseUnlinked"));
-  }, [active, cleanupLocalResources, syncAppState]);
+  }, [active, cleanupLocalResources, syncAppState, t]);
 
   const resync = useCallback(async () => {
     if (!active) return;
@@ -338,6 +360,20 @@ export function LocalCodebasePicker() {
           </>
         )}
 
+        {syncState.kind === "syncing" && (
+          <span
+            className={cn(
+              "inline-flex min-h-8 max-w-[280px] items-center gap-1.5 truncate text-xs",
+              statusClasses(syncState.kind),
+            )}
+          >
+            <IconRefresh className="size-3.5 shrink-0 animate-spin" />
+            <span className="truncate">
+              {t("raw.localCodebase.clearCodebase")}
+            </span>
+          </span>
+        )}
+
         {syncState.kind === "error" && (
           <span
             className={cn(

package/corpus/templates/plan/app/pages/PlansPage.tsx

@@ -33,6 +33,7 @@ import {
   useSetPageTitle,
 } from "@agent-native/toolkit/app-shell";
 import { type RichMarkdownCollabUser } from "@agent-native/toolkit/editor";
+import { ShareTrigger } from "@agent-native/toolkit/sharing";
 import {
   SOURCE_AUTHOR_COMMENT_MENTION_EMAIL,
   extractCommentMentions,
@@ -99,7 +100,6 @@ import {
   IconMessageCircle,
   IconMoon,
   IconPlus,
-  IconShare3,
   IconLink,
   IconWorld,
   IconSun,
@@ -6258,8 +6258,7 @@ function PlanShareControl({
         }}
         accessNote={buildShareAccessNote(t, noun)}
         visibilityCopy={buildShareVisibilityCopy(t, noun)}
-        trigger="icon"
-        triggerClassName="pointer-events-auto size-8"
+        triggerClassName="pointer-events-auto h-8 px-2"
         onOpenChange={onOpenChange}
       />
     );
@@ -6275,22 +6274,13 @@ function PlanShareControl({
         if (!open) setAuthPrompt(null);
       }}
     >
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <PopoverTrigger asChild>
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              className="pointer-events-auto size-8"
-              aria-label={t("plansPage.share.shareAria", { noun })}
-            >
-              <IconShare3 className="size-4" />
-            </Button>
-          </PopoverTrigger>
-        </TooltipTrigger>
-        <TooltipContent>{t("plansPage.share.share", { noun })}</TooltipContent>
-      </Tooltip>
+      <PopoverTrigger asChild>
+        <ShareTrigger
+          label={t("plansPage.share.share", { noun })}
+          aria-label={t("plansPage.share.shareAria", { noun })}
+          className="pointer-events-auto"
+        />
+      </PopoverTrigger>
       <PopoverContent
         align="end"
         sideOffset={6}