@agent-native/dispatch 0.24.0 → 0.24.2

package/dist/shared/app-roles.d.ts

@@ -0,0 +1,9 @@
+export declare const dispatchAccessDescriptor: {
+    appId: string;
+    roles: readonly ["admin"];
+    roleLabels: {
+        admin: string;
+    };
+    label: string;
+};
+//# sourceMappingURL=app-roles.d.ts.map

package/dist/shared/app-roles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-roles.d.ts","sourceRoot":"","sources":["../../src/shared/app-roles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,wBAAwB;;;;QAGrB,KAAK;;;CAEkB,CAAC"}

package/dist/shared/app-roles.js

@@ -0,0 +1,7 @@
+export const dispatchAccessDescriptor = {
+    appId: "dispatch",
+    roles: ["admin"],
+    roleLabels: { admin: "Dispatch admin" },
+    label: "Dispatch access",
+};
+//# sourceMappingURL=app-roles.js.map

package/dist/shared/app-roles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-roles.js","sourceRoot":"","sources":["../../src/shared/app-roles.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,wBAAwB,GAAG;IACtC,KAAK,EAAE,UAAU;IACjB,KAAK,EAAE,CAAC,OAAO,CAAU;IACzB,UAAU,EAAE,EAAE,KAAK,EAAE,gBAAgB,EAAE;IACvC,KAAK,EAAE,iBAAiB;CACa,CAAC","sourcesContent":["import type { AppRolesDescriptor } from \"@agent-native/core/client/org\";\n\nexport const dispatchAccessDescriptor = {\n  appId: \"dispatch\",\n  roles: [\"admin\"] as const,\n  roleLabels: { admin: \"Dispatch admin\" },\n  label: \"Dispatch access\",\n} satisfies AppRolesDescriptor<\"admin\">;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/dispatch",
-  "version": "0.24.0",
+  "version": "0.24.2",
   "description": "Dispatch — workspace control plane for agent-native apps. Vault, integrations, destinations, scheduled jobs, and cross-app delegation, shipped as a single drop-in package.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -28,6 +28,7 @@
     "./routes": "./dist/routes/index.js",
     "./routes/pages/*": "./dist/routes/pages/*.js",
     "./server": "./dist/server/index.js",
+    "./shared/app-roles": "./dist/shared/app-roles.js",
     "./server/lib/thread-link-preview": "./dist/server/lib/thread-link-preview.js",
     "./actions": "./dist/actions/index.js",
     "./db": "./dist/db/index.js",
@@ -84,7 +85,7 @@
     "tailwind-merge": "^3.5.0",
     "vaul": "^1.1.2",
     "zod": "^4.3.6",
-    "@agent-native/toolkit": "0.14.0"
+    "@agent-native/toolkit": "0.14.1"
   },
   "devDependencies": {
     "@react-router/dev": "^8.1.0",
@@ -98,7 +99,7 @@
     "typescript-7": "npm:typescript@^7.0.2",
     "vite": "8.1.0",
     "vitest": "^4.1.5",
-    "@agent-native/core": "0.152.0"
+    "@agent-native/core": "0.153.0"
   },
   "peerDependencies": {
     "@agent-native/core": ">=0.8.0",

package/src/components/admin-navigation.tsx

@@ -16,11 +16,14 @@ import {
   IconSettingsAutomation,
   IconShield,
   IconShieldCheck,
+  IconSearch,
+  IconX,
 } from "@tabler/icons-react";
-import { type ReactNode } from "react";
+import { useMemo, useState, type ReactNode } from "react";
 import { NavLink } from "react-router";
 
 import { cn } from "../lib/utils";
+import { DISPATCH_DOCS, DocsLink } from "./docs-link";
 import { useDispatchExtensions, type DispatchNavItem } from "./layout/Layout";
 
 export interface AdminNavGroup {
@@ -211,22 +214,60 @@ export function AdminShell({
 }) {
   const t = useT();
   const groups = useAdminNavGroups();
+  const [query, setQuery] = useState("");
+  const normalizedQuery = query.trim().toLowerCase();
+  const visibleGroups = useMemo(
+    () =>
+      groups
+        .map((group) => ({
+          ...group,
+          items: group.items.filter((item) => {
+            if (!normalizedQuery) return true;
+            const label = itemLabel(t, item).toLowerCase();
+            return `${label} ${group.label.toLowerCase()}`.includes(
+              normalizedQuery,
+            );
+          }),
+        }))
+        .filter((group) => group.items.length > 0),
+    [groups, normalizedQuery, t],
+  );
 
   return (
     <div
       className="grid min-w-0 gap-6 lg:grid-cols-[13rem_minmax(0,1fr)]"
       data-dispatch-admin-shell
     >
-      <aside className="min-w-0 border-b pb-5 lg:sticky lg:top-2 lg:self-start lg:border-b-0 lg:border-e lg:pe-6">
-        <div className="px-2">
-          <div className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
-            {t("dispatch.nav.admin", { defaultValue: "Admin" })}
+      <aside className="min-w-0 border-b pb-5 lg:sticky lg:top-2 lg:self-start lg:border-b-0">
+        <div className="flex items-center gap-1 px-2">
+          <div className="relative min-w-0 flex-1">
+            <IconSearch className="pointer-events-none absolute start-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+            <input
+              type="search"
+              value={query}
+              onChange={(event) => setQuery(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Escape") setQuery("");
+              }}
+              placeholder="Search admin"
+              aria-label="Search admin"
+              className="h-8 w-full rounded-md border border-border bg-background ps-8 pe-7 text-[13px] text-foreground outline-none transition-colors placeholder:text-muted-foreground focus:border-foreground/30 focus:ring-2 focus:ring-accent/40"
+            />
+            {query ? (
+              <button
+                type="button"
+                onClick={() => setQuery("")}
+                aria-label="Clear admin search"
+                className="absolute end-1.5 top-1/2 flex size-5 -translate-y-1/2 items-center justify-center rounded text-muted-foreground hover:bg-accent/60 hover:text-foreground"
+              >
+                <IconX className="size-3.5" />
+              </button>
+            ) : null}
           </div>
-          <p className="mt-1 text-xs leading-5 text-muted-foreground">
-            {t("dispatch.pages.adminDescription", {
-              defaultValue: "Workspace controls and operations",
-            })}
-          </p>
+          <DocsLink
+            href={DISPATCH_DOCS.dispatch}
+            label="Open Dispatch admin documentation"
+          />
         </div>
 
         <nav
@@ -235,7 +276,7 @@ export function AdminShell({
           })}
           className="mt-5 space-y-5"
         >
-          {groups.map((group) => (
+          {visibleGroups.map((group) => (
             <section key={group.id}>
               <h2 className="px-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground/70">
                 {t(group.labelKey, { defaultValue: group.label })}
@@ -251,6 +292,11 @@ export function AdminShell({
               </ul>
             </section>
           ))}
+          {visibleGroups.length === 0 ? (
+            <p className="px-2 py-6 text-center text-xs text-muted-foreground">
+              No matching admin pages
+            </p>
+          ) : null}
         </nav>
       </aside>
 

package/src/components/app-list-row.tsx

@@ -2,8 +2,7 @@ import type { ReactNode } from "react";
 
 import { cn } from "../lib/utils";
 
-export const APP_LIST_GRID_CLASS =
-  "mx-auto w-full max-w-[1000px] xl:grid xl:grid-cols-2 xl:gap-3 xl:overflow-visible xl:rounded-none xl:bg-transparent";
+export const APP_LIST_GRID_CLASS = "w-full xl:grid xl:grid-cols-2 xl:gap-3";
 export const APP_LIST_GRID_ROW_CLASS =
   "xl:rounded-2xl xl:border xl:border-transparent xl:bg-card xl:transition-[background-color,border-color] xl:hover:border-border xl:focus-within:border-ring/50";
 

package/src/components/app-open-actions.tsx

@@ -1,114 +1,5 @@
-import { IconChevronDown, IconPlus } from "@tabler/icons-react";
-
-import { Button } from "./ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "./ui/dropdown-menu";
-
-export interface AppOpenActionLabels {
-  addApp: string;
-  openApp: string;
-  openInline: string;
-  openInNewTab: string;
-}
-
-const DEFAULT_LABELS: AppOpenActionLabels = {
-  addApp: "Add app",
-  openApp: "Open app",
-  openInline: "Open inline",
-  openInNewTab: "Open in new tab",
-};
-
-export function AppOpenActions({
-  name,
-  href,
-  target,
-  rel,
-  labels: labelOverrides,
-  onAddApp,
-  onOpenInline,
-  showInlineOption = false,
-  showNewTabOption = false,
-}: {
-  name: string;
-  href: string | null;
-  target?: "_blank";
-  rel?: string;
-  labels?: Partial<AppOpenActionLabels>;
-  onAddApp?: () => void;
-  onOpenInline?: () => void;
-  showInlineOption?: boolean;
-  showNewTabOption?: boolean;
-}) {
-  const labels = { ...DEFAULT_LABELS, ...labelOverrides };
-  const canOfferNewTab = showNewTabOption && target !== "_blank";
-  const hasMenu =
-    Boolean(onAddApp) ||
-    (Boolean(href) && (showInlineOption || canOfferNewTab));
-
-  if (!href && !hasMenu) {
-    return (
-      <Button size="sm" variant="outline" disabled>
-        {labels.openApp}
-      </Button>
-    );
-  }
-
-  return (
-    <div className="flex shrink-0 overflow-hidden rounded-md border border-border focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2">
-      <Button
-        asChild={Boolean(href)}
-        size="sm"
-        variant="outline"
-        className="rounded-none border-0 border-e border-border"
-        disabled={!href}
-      >
-        {href ? (
-          <a href={href} target={target} rel={rel}>
-            {labels.openApp}
-          </a>
-        ) : (
-          <span>{labels.openApp}</span>
-        )}
-      </Button>
-      {hasMenu ? (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              type="button"
-              size="sm"
-              variant="outline"
-              className="size-9 rounded-none border-0 p-0"
-              aria-label={`Open options for ${name}`}
-            >
-              <IconChevronDown size={15} />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="min-w-40">
-            {onAddApp ? (
-              <DropdownMenuItem onSelect={onAddApp}>
-                <IconPlus size={14} className="mr-2" />
-                {labels.addApp}
-              </DropdownMenuItem>
-            ) : null}
-            {showInlineOption && href ? (
-              <DropdownMenuItem onSelect={onOpenInline}>
-                {labels.openInline}
-              </DropdownMenuItem>
-            ) : null}
-            {canOfferNewTab && href ? (
-              <DropdownMenuItem asChild>
-                <a href={href} target="_blank" rel="noreferrer">
-                  {labels.openInNewTab}
-                </a>
-              </DropdownMenuItem>
-            ) : null}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      ) : null}
-    </div>
-  );
-}
+export {
+  AppOpenActions,
+  type AppOpenActionLabels,
+  type AppOpenActionMenuItem,
+} from "@agent-native/core/client/chat-first";

package/src/components/app-row-settings.tsx

@@ -0,0 +1,54 @@
+import { APP_ACTION_MENU_CONTENT_CLASS } from "@agent-native/core/client/chat-first";
+import { IconPlus, IconSettings } from "@tabler/icons-react";
+
+import { Button } from "./ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+const APP_ROW_ACTION_CLASS =
+  "size-7 rounded-md p-0 text-muted-foreground transition-[background-color,color] hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-foreground";
+
+export function AppRowSettings({
+  name,
+  addAppLabel = "Add app",
+  onAddApp,
+}: {
+  name: string;
+  addAppLabel?: string;
+  onAddApp: () => void;
+}) {
+  return (
+    <DropdownMenu>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <DropdownMenuTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              aria-label={`Settings for ${name}`}
+              className={APP_ROW_ACTION_CLASS}
+            >
+              <IconSettings size={15} />
+            </Button>
+          </DropdownMenuTrigger>
+        </TooltipTrigger>
+        <TooltipContent>App settings</TooltipContent>
+      </Tooltip>
+      <DropdownMenuContent
+        align="end"
+        className={APP_ACTION_MENU_CONTENT_CLASS}
+      >
+        <DropdownMenuItem onSelect={onAddApp}>
+          <IconPlus size={14} aria-hidden="true" />
+          {addAppLabel}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/components/automation-run-history-dialog.tsx

@@ -3,7 +3,6 @@ import {
   IconAlertTriangle,
   IconClock,
   IconExternalLink,
-  IconLoader2,
 } from "@tabler/icons-react";
 import { Link } from "react-router";
 
@@ -21,6 +20,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "./ui/dialog";
+import { Skeleton } from "./ui/skeleton";
 
 interface AutomationRun {
   id: string;
@@ -178,9 +178,13 @@ export function AutomationRunHistoryDialog({
 
               <div className="mt-3">
                 {runsQuery.isLoading ? (
-                  <div className="flex items-center gap-2 rounded-lg border p-4 text-sm text-muted-foreground">
-                    <IconLoader2 className="size-4 animate-spin" />
-                    Loading run history...
+                  <div className="space-y-3 rounded-lg border p-4">
+                    {Array.from({ length: 3 }).map((_, index) => (
+                      <div key={index} className="space-y-2">
+                        <Skeleton className="h-4 w-2/3" />
+                        <Skeleton className="h-3 w-1/2" />
+                      </div>
+                    ))}
                   </div>
                 ) : runsQuery.isError ? (
                   <ActionQueryError

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

@@ -31,7 +31,6 @@ export function ConnectedAppCard({
           campaign: "product",
           content: "dispatch_app",
         })}
-        target="_blank"
         rel="noopener noreferrer"
         showNewTabOption
       />

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

@@ -339,7 +339,7 @@ describe("CreateAppFlow", () => {
       });
     });
     const branchLink = Array.from(container.querySelectorAll("a")).find(
-      (candidate) => candidate.textContent?.includes("Open Builder branch"),
+      (candidate) => candidate.textContent?.includes("Open in Builder"),
     );
     expect(branchLink?.getAttribute("href")).toBe(
       "https://branch.example.test",

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

@@ -319,7 +319,7 @@ export function CreateAppFlow({
         </div>
         <Button asChild className="w-full sm:w-auto">
           <a href={branchUrl} target="_blank" rel="noreferrer">
-            Open Builder branch <IconArrowUpRight aria-hidden="true" />
+            Open in Builder <IconArrowUpRight aria-hidden="true" />
           </a>
         </Button>
       </div>
@@ -583,7 +583,7 @@ export function CreateAppFlow({
                 rel="noreferrer"
                 className="inline-flex items-center gap-1 font-medium text-foreground underline"
               >
-                Open branch <IconArrowUpRight className="h-3 w-3" />
+                Open in Builder <IconArrowUpRight className="h-3 w-3" />
               </a>
             ) : null}
           </div>

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

@@ -33,6 +33,9 @@ vi.mock("@agent-native/core/client/agent-chat", () => ({
     path: string,
     options?: unknown,
   ) => clientState.navigateWithTransition(navigate, path, options),
+  orderChatFirstAppIds: (appIds: string[]) => appIds,
+  readChatFirstAppLayout: () => ({ pinnedIds: [], orderedIds: [] }),
+  writeChatFirstAppLayout: () => ({ ok: true }),
   useChatModels: clientState.useChatModels,
 }));
 
@@ -53,6 +56,11 @@ vi.mock("@agent-native/core/client/composer", () => ({
   },
 }));
 
+vi.mock("@agent-native/core/client/application-state", () => ({
+  readClientAppState: vi.fn(async () => null),
+  writeClientAppState: vi.fn(async () => null),
+}));
+
 vi.mock("@agent-native/core/client/hooks", () => ({
   useActionQuery: (name: string) => ({
     data:
@@ -129,6 +137,15 @@ describe("DispatchControlPlane", () => {
     expect(container.textContent).not.toContain("Open chat");
     expect(container.textContent).not.toContain("Also");
     expect(container.textContent).not.toContain("active");
+    expect(container.textContent).not.toContain(
+      "Summarize the current workspace health",
+    );
+    expect(container.textContent).toContain(
+      "Create an app for onboarding requests",
+    );
+    expect(container.textContent).toContain(
+      "Check which agents can help with analytics",
+    );
     expect(container.querySelector("nav")).toBeNull();
     expect(
       container.querySelector('[data-placeholder="Ask Dispatch anything..."]'),
@@ -274,16 +291,33 @@ describe("DispatchControlPlane", () => {
     expect(container.textContent).toContain("Analytics");
     expect(container.textContent).toContain("Apps");
     expect(container.textContent).toContain("New");
+    const viewAllLink = Array.from(container.querySelectorAll("a")).find(
+      (link) => link.textContent?.trim() === "View all",
+    );
+    expect(viewAllLink?.className).toContain("text-muted-foreground");
     expect(container.textContent).not.toContain("Other apps");
     expect(container.textContent).not.toContain("available");
     expect(container.textContent).not.toContain("Archived app");
     expect(container.textContent).not.toContain("Duplicate onboarding");
     expect(container.textContent).not.toContain("CRM");
     expect(
-      Array.from(container.querySelectorAll("a")).filter((anchor) =>
-        anchor.getAttribute("href")?.includes("onboarding"),
+      container.querySelectorAll(
+        'button[aria-label="Open options for Onboarding"]',
       ),
     ).toHaveLength(1);
+    await act(async () => {
+      container
+        .querySelector<HTMLButtonElement>(
+          'button[aria-label="Open options for Onboarding"]',
+        )
+        ?.dispatchEvent(
+          new MouseEvent("pointerdown", { bubbles: true, button: 0 }),
+        );
+    });
+    const onboardingNewTabLink = document.querySelector<HTMLAnchorElement>(
+      'a[href="/onboarding"][target="_blank"]',
+    );
+    expect(onboardingNewTabLink).not.toBeNull();
     const clipsHref = Array.from(container.querySelectorAll("a"))
       .map((anchor) => anchor.getAttribute("href"))
       .find((href) => href?.includes("clips.agent-native.com"));