@agent-native/dispatch 0.18.0 → 0.19.0

package/src/components/layout/Layout.tsx

@@ -18,38 +18,26 @@ import {
   type ChatHistoryItem,
 } from "@agent-native/toolkit/chat-history";
 import {
-  IconActivity,
-  IconArrowUpRight,
   IconApps,
-  IconBrain,
   IconBrandSlack,
-  IconChartBar,
   IconBrandTelegram,
-  IconKey,
-  IconChevronDown,
-  IconLayersSubtract,
-  IconMail,
   IconMessageQuestion,
-  IconMessages,
-  IconPlugConnected,
   IconBroadcast,
-  IconFingerprint,
-  IconHistory,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
-  IconPuzzle,
   IconSettings,
-  IconSettingsAutomation,
-  IconShieldCheck,
+  IconShield,
   IconSearch,
   IconWorld,
   IconDeviceDesktop,
 } from "@tabler/icons-react";
 import {
+  createContext,
   useEffect,
   useMemo,
   useRef,
   useState,
+  useContext,
   type ComponentType,
   type ReactNode,
 } from "react";
@@ -67,6 +55,7 @@ import { Skeleton } from "../ui/skeleton";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { Header } from "./Header";
 import { HeaderActionsProvider } from "./HeaderActions";
+import { WorkspaceAppsRail } from "./workspace-apps-rail";
 
 export type DispatchNavSection = "primary" | "operations";
 
@@ -82,10 +71,12 @@ export interface DispatchNavItem {
   to: string;
   label: string;
   icon?: DispatchNavIcon;
-  /** Defaults to "operations", which is where local management tools usually fit. */
+  /** Defaults to "operations", which renders under the Admin control plane. */
   section?: DispatchNavSection;
   /** Override active matching for nested or multi-route tools. */
   match?: (pathname: string) => boolean;
+  /** Canonical path inside the Admin shell for management tabs. */
+  adminTo?: string;
 }
 
 export interface DispatchExtensionConfig {
@@ -119,80 +110,13 @@ const PRIMARY_NAV_ITEMS = [
   },
 ] as const satisfies readonly DispatchNavItem[];
 
-const OPERATIONS_NAV_ITEMS = [
-  {
-    id: "operations",
-    to: "/operations",
-    label: "Operations",
-    icon: IconActivity,
-    section: "operations",
-  },
-  {
-    id: "metrics",
-    to: "/metrics",
-    label: "Metrics",
-    icon: IconChartBar,
-    section: "operations",
-  },
-  {
-    id: "automations",
-    to: "/automations",
-    label: "Automations",
-    icon: IconSettingsAutomation,
-    section: "operations",
-  },
-  {
-    id: "approvals",
-    to: "/approvals",
-    label: "Approvals",
-    icon: IconShieldCheck,
-    section: "operations",
-  },
-  {
-    id: "destinations",
-    to: "/destinations",
-    label: "Destinations",
-    icon: IconArrowUpRight,
-    section: "operations",
-  },
-  {
-    id: "integrations",
-    to: "/integrations",
-    label: "Integrations",
-    icon: IconPuzzle,
-    section: "operations",
-  },
-  {
-    id: "transactional-email",
-    to: "/transactional-email",
-    label: "Transactional email",
-    icon: IconMail,
-    section: "operations",
-  },
-  {
-    id: "vault",
-    to: "/vault",
-    label: "Vault",
-    icon: IconKey,
-    section: "operations",
-  },
-  {
-    id: "agents",
-    to: "/agents",
-    label: "Agents",
-    icon: IconPlugConnected,
-    section: "operations",
-  },
+const BOTTOM_NAV_ITEMS = [
   {
-    id: "workspace",
-    to: "/workspace",
-    label: "Resources",
-    icon: IconLayersSubtract,
-    section: "operations",
+    id: "admin",
+    to: "/admin",
+    label: "Admin",
+    icon: IconShield,
   },
-] as const satisfies readonly DispatchNavItem[];
-
-const BOTTOM_NAV_ITEMS = [
   {
     id: "settings",
     to: "/settings",
@@ -201,44 +125,6 @@ const BOTTOM_NAV_ITEMS = [
   },
 ] as const satisfies readonly DispatchNavItem[];
 
-const ADVANCED_NAV_ITEMS = [
-  {
-    id: "messaging",
-    to: "/messaging",
-    label: "Messaging",
-    icon: IconBrandTelegram,
-    section: "operations",
-  },
-  {
-    id: "identities",
-    to: "/identities",
-    label: "Identities",
-    icon: IconFingerprint,
-    section: "operations",
-  },
-  {
-    id: "audit",
-    to: "/audit",
-    label: "Audit",
-    icon: IconHistory,
-    section: "operations",
-  },
-  {
-    id: "dreams",
-    to: "/dreams",
-    label: "Dreams",
-    icon: IconBrain,
-    section: "operations",
-  },
-  {
-    id: "thread-debug",
-    to: "/thread-debug",
-    label: "Thread Debug",
-    icon: IconMessages,
-    section: "operations",
-  },
-] as const satisfies readonly DispatchNavItem[];
-
 const EMPTY_NAV_ITEMS: readonly DispatchNavItem[] = [];
 const DISPATCH_SIDEBAR_LABEL = "Dispatch";
 
@@ -246,6 +132,14 @@ const CHROMELESS_PATHS = ["/approval", "/browser-chat", "/browser-connect"];
 const SIDEBAR_COLLAPSE_KEY = "dispatch.sidebar.collapsed";
 const CHAT_HISTORY_SOURCE_KEY = "dispatch.chat-history.source";
 
+const DispatchExtensionsContext = createContext<
+  DispatchExtensionConfig | undefined
+>(undefined);
+
+export function useDispatchExtensions(): DispatchExtensionConfig | undefined {
+  return useContext(DispatchExtensionsContext);
+}
+
 // Routes whose page renders its own toolbar.
 // Layout still mounts the sidebar + AgentSidebar, but skips its own Header so
 // there's no double-header.
@@ -594,14 +488,7 @@ export function NavContent({
     ...PRIMARY_NAV_ITEMS,
     ...navItemsForSection(extensionNavItems, "primary"),
   ];
-  const operationsNavItems = [
-    ...OPERATIONS_NAV_ITEMS,
-    ...navItemsForSection(extensionNavItems, "operations"),
-  ];
   const localPathname = localDispatchPath(location.pathname);
-  const advancedOpen = ADVANCED_NAV_ITEMS.some((item) =>
-    navItemMatchesPath(item, localPathname),
-  );
   const navLabel = (item: DispatchNavItem) => {
     const key =
       item.id === "thread-debug"
@@ -807,40 +694,7 @@ export function NavContent({
             {primaryNavItems.map(renderNavItem)}
           </ul>
 
-          {collapsed ? (
-            <>
-              <ul className="mt-5 flex flex-col items-center gap-1">
-                {operationsNavItems.map(renderNavItem)}
-              </ul>
-              <ul className="mt-3 flex flex-col items-center gap-1">
-                {ADVANCED_NAV_ITEMS.map(renderNavItem)}
-              </ul>
-            </>
-          ) : (
-            <div className="mt-5">
-              <p className="px-2 pb-1 text-[11px] font-medium uppercase tracking-wide text-sidebar-foreground/45">
-                {t("dispatch.nav.operate", { defaultValue: "Operate" })}
-              </p>
-              <ul className="space-y-0.5">
-                {operationsNavItems.map(renderNavItem)}
-              </ul>
-
-              <details className="group mt-3" open={advancedOpen}>
-                <summary className="flex h-8 cursor-pointer list-none items-center justify-between rounded-md px-2 text-xs font-medium text-sidebar-foreground/60 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground [&::-webkit-details-marker]:hidden">
-                  <span>
-                    {t("dispatch.nav.advanced", { defaultValue: "Advanced" })}
-                  </span>
-                  <IconChevronDown
-                    size={14}
-                    className="transition-transform group-open:rotate-180"
-                  />
-                </summary>
-                <ul className="mt-1 space-y-0.5">
-                  {ADVANCED_NAV_ITEMS.map(renderNavItem)}
-                </ul>
-              </details>
-            </div>
-          )}
+          <WorkspaceAppsRail collapsed={collapsed} onNavigate={onNavigate} />
         </nav>
 
         <div className="mt-auto shrink-0">
@@ -980,46 +834,48 @@ export function Layout({
   );
 
   return (
-    <HeaderActionsProvider>
-      <div className="agent-layout-shell flex h-screen w-full overflow-hidden bg-background">
-        <aside
-          data-collapsed={sidebarCollapsed ? "true" : "false"}
-          className={cn(
-            "agent-layout-left-drawer hidden shrink-0 flex-col border-e bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out lg:flex",
-            sidebarCollapsed ? "w-14" : "w-56",
-          )}
-        >
-          <NavContent
-            extensions={extensions}
-            collapsed={sidebarCollapsed}
-            collapsible
-            onCollapsedChange={setSidebarCollapsed}
-          />
-        </aside>
-
-        <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
-          <SheetContent
-            side="left"
-            className="w-72 p-0 bg-sidebar text-sidebar-foreground [&>button]:hidden"
+    <DispatchExtensionsContext.Provider value={extensions}>
+      <HeaderActionsProvider>
+        <div className="agent-layout-shell flex h-screen w-full overflow-hidden bg-background">
+          <aside
+            data-collapsed={sidebarCollapsed ? "true" : "false"}
+            className={cn(
+              "agent-layout-left-drawer hidden shrink-0 flex-col border-e bg-sidebar text-sidebar-foreground transition-[width] duration-200 ease-out lg:flex",
+              sidebarCollapsed ? "w-14" : "w-56",
+            )}
           >
-            <SheetTitle className="sr-only">
-              {t("dispatch.nav.navigation")}
-            </SheetTitle>
-            <SheetDescription className="sr-only">
-              {t("dispatch.nav.navigationDescription")}
-            </SheetDescription>
-            <div className="flex h-full w-full flex-col">
-              <NavContent
-                extensions={extensions}
-                collapsed={false}
-                onNavigate={() => setMobileOpen(false)}
-              />
-            </div>
-          </SheetContent>
-        </Sheet>
+            <NavContent
+              extensions={extensions}
+              collapsed={sidebarCollapsed}
+              collapsible
+              onCollapsedChange={setSidebarCollapsed}
+            />
+          </aside>
+
+          <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
+            <SheetContent
+              side="left"
+              className="w-72 p-0 bg-sidebar text-sidebar-foreground [&>button]:hidden"
+            >
+              <SheetTitle className="sr-only">
+                {t("dispatch.nav.navigation")}
+              </SheetTitle>
+              <SheetDescription className="sr-only">
+                {t("dispatch.nav.navigationDescription")}
+              </SheetDescription>
+              <div className="flex h-full w-full flex-col">
+                <NavContent
+                  extensions={extensions}
+                  collapsed={false}
+                  onNavigate={() => setMobileOpen(false)}
+                />
+              </div>
+            </SheetContent>
+          </Sheet>
 
-        {content}
-      </div>
-    </HeaderActionsProvider>
+          {content}
+        </div>
+      </HeaderActionsProvider>
+    </DispatchExtensionsContext.Provider>
   );
 }

package/src/components/layout/workspace-apps-rail.tsx

@@ -0,0 +1,154 @@
+import { useActionQuery } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
+import { IconApps } from "@tabler/icons-react";
+import { useLocation } from "react-router";
+
+import { cn } from "../../lib/utils";
+import {
+  workspaceAppHref,
+  type WorkspaceAppSummary,
+} from "../../lib/workspace-apps";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+
+function pathFromValue(value: string | null | undefined): string | null {
+  const trimmed = value?.trim();
+  if (!trimmed) return null;
+
+  try {
+    const pathname = new URL(trimmed, "https://dispatch.local").pathname;
+    return pathname.replace(/\/+$/, "") || "/";
+  } catch {
+    // coercion-ok: malformed app URLs cannot match a workspace route.
+    return null;
+  }
+}
+
+function appMatchesPath(app: WorkspaceAppSummary, pathname: string): boolean {
+  const candidatePaths = [app.path, app.url]
+    .map(pathFromValue)
+    .filter((path): path is string => !!path);
+
+  return candidatePaths.some(
+    (path) => pathname === path || pathname.startsWith(`${path}/`),
+  );
+}
+
+function appInitial(name: string): string {
+  return name.trim().charAt(0).toUpperCase() || "A";
+}
+
+function appLabel(app: WorkspaceAppSummary): string {
+  return app.name.trim() || app.id;
+}
+
+export function WorkspaceAppsRail({
+  collapsed = false,
+  onNavigate,
+}: {
+  collapsed?: boolean;
+  onNavigate?: () => void;
+}) {
+  const t = useT();
+  const location = useLocation();
+  const appsQuery = useActionQuery<WorkspaceAppSummary[]>(
+    "list-workspace-apps",
+    {
+      includeAgentCards: false,
+    },
+  );
+  if (appsQuery.isError || !appsQuery.data) return null;
+
+  const apps = appsQuery.data
+    .filter(
+      (app) =>
+        !app.isDispatch &&
+        !app.archived &&
+        app.status !== "pending" &&
+        !!workspaceAppHref(app),
+    )
+    .sort((a, b) => appLabel(a).localeCompare(appLabel(b)));
+
+  if (apps.length === 0) return null;
+
+  const renderAppLink = (app: WorkspaceAppSummary) => {
+    const href = workspaceAppHref(app);
+    if (!href) return null;
+
+    const label = appLabel(app);
+    const active = appMatchesPath(app, location.pathname);
+    const link = (
+      <a
+        href={href}
+        aria-current={active ? "page" : undefined}
+        aria-label={collapsed ? label : undefined}
+        onClick={onNavigate}
+        className={cn(
+          "flex h-8 items-center rounded-md text-sm transition-colors",
+          collapsed ? "w-8 justify-center" : "w-full gap-2 px-2 text-start",
+          active
+            ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground"
+            : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        )}
+      >
+        <span
+          className={cn(
+            "flex size-5 shrink-0 items-center justify-center rounded text-[10px] font-semibold",
+            active
+              ? "bg-sidebar-primary text-sidebar-primary-foreground"
+              : "bg-sidebar-accent text-sidebar-foreground/70",
+          )}
+        >
+          {appInitial(label)}
+        </span>
+        {!collapsed ? <span className="truncate">{label}</span> : null}
+      </a>
+    );
+
+    if (!collapsed) return link;
+
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{link}</TooltipTrigger>
+        <TooltipContent side="right">{label}</TooltipContent>
+      </Tooltip>
+    );
+  };
+
+  return (
+    <div
+      className={cn(
+        "mt-4 border-t border-sidebar-border pt-3",
+        collapsed ? "px-1" : "px-2",
+      )}
+      data-dispatch-apps-rail
+    >
+      {!collapsed ? (
+        <div className="mb-1 flex items-center gap-1.5 px-2 text-[11px] font-medium uppercase tracking-wide text-sidebar-foreground/45">
+          <IconApps size={13} />
+          <span>
+            {t("dispatch.pages.workspaceApps", {
+              defaultValue: "Workspace apps",
+            })}
+          </span>
+        </div>
+      ) : (
+        <span className="sr-only">
+          {t("dispatch.pages.workspaceApps", {
+            defaultValue: "Workspace apps",
+          })}
+        </span>
+      )}
+      <ul
+        className={cn(
+          collapsed ? "flex flex-col items-center gap-1" : "space-y-0.5",
+        )}
+      >
+        {apps.map((app) => {
+          const href = workspaceAppHref(app);
+          if (!href) return null;
+          return <li key={app.id}>{renderAppLink(app)}</li>;
+        })}
+      </ul>
+    </div>
+  );
+}

package/src/hooks/use-navigation-state.spec.ts

@@ -50,6 +50,17 @@ describe("buildDispatchNavigationState", () => {
     });
   });
 
+  it("recognizes Admin routes without losing the underlying view", () => {
+    expect(buildDispatchNavigationState("/admin/metrics")).toEqual({
+      view: "metrics",
+      path: "/admin/metrics",
+    });
+    expect(buildDispatchNavigationState("/admin")).toEqual({
+      view: "admin",
+      path: "/admin",
+    });
+  });
+
   it("preserves thread debug filters and selection", () => {
     expect(
       buildDispatchNavigationState(

package/src/hooks/use-navigation-state.ts

@@ -224,7 +224,8 @@ function resolveExtensionPath(
   extensions?: DispatchExtensionConfig,
 ): string | undefined {
   if (!view) return undefined;
-  return extensions?.navItems?.find((item) => item.id === view)?.to;
+  const item = extensions?.navItems?.find((candidate) => candidate.id === view);
+  return item?.adminTo ?? item?.to;
 }
 
 function resolveView(
@@ -236,9 +237,15 @@ function resolveView(
   if (pathname === "/extensions" || pathname.startsWith("/extensions/")) {
     return "extensions";
   }
+  if (pathname === "/admin") return "admin";
+  if (pathname.startsWith("/admin/")) {
+    const adminView = resolveView(pathname.slice("/admin".length), extensions);
+    return adminView === "overview" ? "admin" : adminView;
+  }
   if (pathname.startsWith("/browser-chat")) return "browser-chat";
   if (pathname.startsWith("/chat")) return "chat";
   if (pathname.startsWith("/apps")) return "apps";
+  if (pathname.startsWith("/operations")) return "operations";
   if (pathname.startsWith("/metrics")) return "metrics";
   if (pathname.startsWith("/new-app")) return "new-app";
   if (pathname.startsWith("/vault")) return "vault";
@@ -250,6 +257,9 @@ function resolveView(
   if (pathname.startsWith("/identities")) return "identities";
   if (pathname.startsWith("/approvals")) return "approvals";
   if (pathname.startsWith("/automations")) return "automations";
+  if (pathname.startsWith("/transactional-email")) {
+    return "transactional-email";
+  }
   if (pathname.startsWith("/audit")) return "audit";
   if (pathname.startsWith("/dreams")) return "dreams";
   if (pathname.startsWith("/thread-debug")) return "thread-debug";
@@ -263,6 +273,8 @@ function resolvePath(
   command?: Pick<NavigationState, "extensionId" | "threadId">,
 ): string | undefined {
   switch (view) {
+    case "admin":
+      return "/admin";
     case "chat":
     case "ask":
       return command?.threadId && command.threadId.trim()
@@ -272,43 +284,52 @@ function resolvePath(
       return "/overview";
     case "apps":
       return "/apps";
+    case "operations":
+    case "monitoring":
+    case "observability":
+    case "database":
+      return view === "database"
+        ? "/admin/operations?view=database"
+        : "/admin/operations";
     case "metrics":
     case "usage":
-      return "/metrics";
+      return "/admin/metrics";
     case "new-app":
     case "create-app":
-      return "/new-app";
+      return "/admin/new-app";
     case "vault":
     case "secrets":
-      return "/vault";
+      return "/admin/vault";
     case "integrations":
-      return "/integrations";
+      return "/admin/integrations";
     case "workspace":
     case "resources":
-      return "/workspace";
+      return "/admin/workspace";
     case "agents":
-      return "/agents";
+      return "/admin/agents";
     case "messaging":
-      return "/messaging";
+      return "/admin/messaging";
     case "destinations":
     case "routes":
-      return "/destinations";
+      return "/admin/destinations";
     case "identities":
-      return "/identities";
+      return "/admin/identities";
     case "approvals":
-      return "/approvals";
+      return "/admin/approvals";
     case "automations":
     case "jobs":
-      return "/automations";
+      return "/admin/automations";
+    case "transactional-email":
+      return "/admin/transactional-email";
     case "audit":
-      return "/audit";
+      return "/admin/audit";
     case "dreams":
-      return "/dreams";
+      return "/admin/dreams";
     case "thread-debug":
     case "threads":
-      return "/thread-debug";
+      return "/admin/thread-debug";
     case "team":
-      return "/settings#organization";
+      return "/settings/organization";
     case "extensions":
       return command?.extensionId
         ? `/extensions/${encodeURIComponent(command.extensionId)}`

package/src/lib/automation-display.spec.ts

@@ -31,7 +31,7 @@ describe("automation-display", () => {
   it("prepares a thread-debug search for an automation", () => {
     expect(
       automationTroubleshootPath({ name: "coach onboarding reminder" }),
-    ).toBe("/thread-debug?query=coach+onboarding+reminder");
+    ).toBe("/admin/thread-debug?query=coach+onboarding+reminder");
   });
 
   it("prefers event names, then schedule descriptions", () => {

package/src/lib/automation-display.ts

@@ -17,7 +17,7 @@ export function automationTroubleshootPath(
   item: Pick<DispatchAutomationItem, "name">,
 ): string {
   const params = new URLSearchParams({ query: item.name });
-  return `/thread-debug?${params.toString()}`;
+  return `/admin/thread-debug?${params.toString()}`;
 }
 
 export function automationTarget(item: DispatchAutomationItem): string {

package/src/routes/index.spec.ts

@@ -8,6 +8,7 @@ describe("Dispatch route registration", () => {
       path?: string;
       file?: string;
       index?: boolean;
+      children?: Array<{ path?: string; index?: boolean }>;
     }>;
     const paths = routes.map((route) => route.path);
 
@@ -16,6 +17,7 @@ describe("Dispatch route registration", () => {
     expect(paths).toContain("browser-chat");
     expect(paths).toContain("browser-connect");
     expect(paths).toContain("operations");
+    expect(paths).toContain("admin");
     expect(paths.indexOf("chat")).toBeLessThan(paths.indexOf(":appId"));
     expect(paths.indexOf("chat/:threadId")).toBeLessThan(
       paths.indexOf(":appId"),
@@ -25,5 +27,11 @@ describe("Dispatch route registration", () => {
       paths.indexOf(":appId"),
     );
     expect(paths.indexOf("operations")).toBeLessThan(paths.indexOf(":appId"));
+
+    const admin = routes.find((route) => route.path === "admin");
+    const adminPaths = admin?.children?.map((route) => route.path) ?? [];
+    expect(adminPaths).toContain("operations");
+    expect(adminPaths).toContain("apps/:appId");
+    expect(adminPaths.indexOf("operations")).toBeGreaterThanOrEqual(0);
   });
 });