@agent-native/dispatch 0.18.0 → 0.19.1

package/src/components/admin-navigation.tsx

@@ -0,0 +1,278 @@
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  IconActivity,
+  IconArrowUpRight,
+  IconBrain,
+  IconBrandTelegram,
+  IconChartBar,
+  IconFingerprint,
+  IconHistory,
+  IconKey,
+  IconLayersSubtract,
+  IconMail,
+  IconMessages,
+  IconPlugConnected,
+  IconPuzzle,
+  IconSettingsAutomation,
+  IconShield,
+  IconShieldCheck,
+} from "@tabler/icons-react";
+import { type ReactNode } from "react";
+import { NavLink } from "react-router";
+
+import { cn } from "../lib/utils";
+import { useDispatchExtensions, type DispatchNavItem } from "./layout/Layout";
+
+interface AdminNavGroup {
+  id: string;
+  label: string;
+  labelKey: string;
+  items: readonly DispatchNavItem[];
+}
+
+const BUILT_IN_ADMIN_NAV_GROUPS: readonly AdminNavGroup[] = [
+  {
+    id: "workspace",
+    label: "Workspace",
+    labelKey: "dispatch.pages.adminWorkspace",
+    items: [
+      {
+        id: "admin-overview",
+        to: "/admin",
+        label: "Overview",
+        icon: IconShield,
+      },
+      {
+        id: "admin-resources",
+        to: "/admin/workspace",
+        label: "Resources",
+        icon: IconLayersSubtract,
+      },
+    ],
+  },
+  {
+    id: "operations",
+    label: "Operations",
+    labelKey: "dispatch.pages.adminOperations",
+    items: [
+      {
+        id: "operations",
+        to: "/admin/operations",
+        label: "Operations",
+        icon: IconActivity,
+      },
+      {
+        id: "metrics",
+        to: "/admin/metrics",
+        label: "Metrics",
+        icon: IconChartBar,
+      },
+      {
+        id: "audit",
+        to: "/admin/audit",
+        label: "Audit",
+        icon: IconHistory,
+      },
+      {
+        id: "thread-debug",
+        to: "/admin/thread-debug",
+        label: "Thread Debug",
+        icon: IconMessages,
+      },
+    ],
+  },
+  {
+    id: "automation",
+    label: "Automation & delivery",
+    labelKey: "dispatch.pages.adminAutomation",
+    items: [
+      {
+        id: "automations",
+        to: "/admin/automations",
+        label: "Automations",
+        icon: IconSettingsAutomation,
+      },
+      {
+        id: "approvals",
+        to: "/admin/approvals",
+        label: "Approvals",
+        icon: IconShieldCheck,
+      },
+      {
+        id: "destinations",
+        to: "/admin/destinations",
+        label: "Destinations",
+        icon: IconArrowUpRight,
+      },
+      {
+        id: "transactional-email",
+        to: "/admin/transactional-email",
+        label: "Transactional email",
+        icon: IconMail,
+      },
+    ],
+  },
+  {
+    id: "connections",
+    label: "Connections",
+    labelKey: "dispatch.pages.adminConnections",
+    items: [
+      {
+        id: "integrations",
+        to: "/admin/integrations",
+        label: "Integrations",
+        icon: IconPuzzle,
+      },
+      {
+        id: "vault",
+        to: "/admin/vault",
+        label: "Vault",
+        icon: IconKey,
+      },
+      {
+        id: "messaging",
+        to: "/admin/messaging",
+        label: "Messaging",
+        icon: IconBrandTelegram,
+      },
+      {
+        id: "identities",
+        to: "/admin/identities",
+        label: "Identities",
+        icon: IconFingerprint,
+      },
+    ],
+  },
+  {
+    id: "agent-platform",
+    label: "Agent platform",
+    labelKey: "dispatch.pages.adminAgentPlatform",
+    items: [
+      {
+        id: "agents",
+        to: "/admin/agents",
+        label: "Agents",
+        icon: IconPlugConnected,
+      },
+      {
+        id: "dreams",
+        to: "/admin/dreams",
+        label: "Dreams",
+        icon: IconBrain,
+      },
+    ],
+  },
+];
+
+function itemLabel(t: ReturnType<typeof useT>, item: DispatchNavItem) {
+  return t(`dispatch.nav.${item.id}`, { defaultValue: item.label });
+}
+
+function AdminNavLink({
+  item,
+  onNavigate,
+}: {
+  item: DispatchNavItem;
+  onNavigate?: () => void;
+}) {
+  const t = useT();
+  const to = item.adminTo ?? item.to;
+  const label = itemLabel(t, item);
+  const Icon = item.icon;
+
+  return (
+    <li>
+      <NavLink
+        to={to}
+        end={item.id === "admin-overview"}
+        onClick={onNavigate}
+        className={({ isActive }) =>
+          cn(
+            "flex min-h-8 items-center gap-2 rounded-md px-2 text-sm transition-colors",
+            isActive
+              ? "bg-accent font-medium text-accent-foreground"
+              : "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
+          )
+        }
+      >
+        {Icon ? <Icon size={15} className="shrink-0" /> : null}
+        <span className="truncate">{label}</span>
+      </NavLink>
+    </li>
+  );
+}
+
+export function AdminShell({
+  children,
+  onNavigate,
+}: {
+  children: ReactNode;
+  onNavigate?: () => void;
+}) {
+  const t = useT();
+  const extensions = useDispatchExtensions();
+  const extensionItems = (extensions?.navItems ?? []).filter(
+    (item) => item.section === "operations",
+  );
+  const groups = extensionItems.length
+    ? [
+        ...BUILT_IN_ADMIN_NAV_GROUPS,
+        {
+          id: "workspace-extensions",
+          label: "Workspace extensions",
+          labelKey: "dispatch.pages.adminWorkspaceExtensions",
+          items: extensionItems,
+        },
+      ]
+    : BUILT_IN_ADMIN_NAV_GROUPS;
+
+  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" })}
+          </div>
+          <p className="mt-1 text-xs leading-5 text-muted-foreground">
+            {t("dispatch.pages.adminDescription", {
+              defaultValue: "Workspace controls and operations",
+            })}
+          </p>
+        </div>
+
+        <nav
+          aria-label={t("dispatch.pages.adminNavigation", {
+            defaultValue: "Admin navigation",
+          })}
+          className="mt-5 space-y-5"
+        >
+          {groups.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 })}
+              </h2>
+              <ul className="mt-1 space-y-0.5">
+                {group.items.map((item) => (
+                  <AdminNavLink
+                    key={item.id}
+                    item={item}
+                    onNavigate={onNavigate}
+                  />
+                ))}
+              </ul>
+            </section>
+          ))}
+        </nav>
+      </aside>
+
+      <section className="min-w-0" data-dispatch-admin-content>
+        {children}
+      </section>
+    </div>
+  );
+}
+
+export { BUILT_IN_ADMIN_NAV_GROUPS };

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

@@ -65,7 +65,7 @@ function runDebugPath(run: AutomationRun): string | null {
   if (run.runId) params.set("runId", run.runId);
   else if (run.threadId) params.set("threadId", run.threadId);
   else return null;
-  return `/thread-debug?${params.toString()}`;
+  return `/admin/thread-debug?${params.toString()}`;
 }
 
 export function AutomationRunHistoryDialog({

package/src/components/index.ts

@@ -6,6 +6,7 @@
  * card list).
  */
 export { DispatchShell } from "./dispatch-shell.js";
+export { AdminShell } from "./admin-navigation.js";
 export { Layout, NavContent } from "./layout/Layout.js";
 export type {
   DispatchExtensionConfig,

package/src/components/layout/Header.tsx

@@ -20,10 +20,18 @@ const pageTitles: Record<string, string> = {
   "/approvals": "Approvals",
   "/automations": "Automations",
   "/audit": "Audit",
+  "/dreams": "Dreams",
+  "/thread-debug": "Thread Debug",
+  "/transactional-email": "Transactional email",
   "/settings": "Settings",
 };
 
 function resolveTitle(pathname: string): string {
+  if (pathname === "/admin" || pathname === "/admin/") return "Admin";
+  if (pathname.startsWith("/admin/")) {
+    const adminPath = pathname.slice("/admin".length);
+    return pageTitles[adminPath] ?? "Admin";
+  }
   if (pageTitles[pathname]) return pageTitles[pathname];
 
   if (pathname.startsWith("/extensions")) return "Extensions";

package/src/components/layout/Layout.spec.tsx

@@ -4,6 +4,7 @@ import { createRoot, type Root } from "react-dom/client";
 import { MemoryRouter } from "react-router";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
+import { AdminShell } from "../admin-navigation";
 import { TooltipProvider } from "../ui/tooltip";
 import { formatThreadAge, NavContent } from "./Layout";
 
@@ -11,6 +12,7 @@ const clientState = vi.hoisted(() => ({
   createThread: vi.fn<() => Promise<string | null>>(),
   switchThread: vi.fn(),
   threads: [] as Array<Record<string, unknown>>,
+  workspaceApps: [] as Array<Record<string, unknown>>,
 }));
 
 vi.mock("@agent-native/core/client/agent-chat", () => ({
@@ -39,7 +41,11 @@ vi.mock("@agent-native/core/client/api-path", () => ({
 }));
 
 vi.mock("@agent-native/core/client/hooks", () => ({
-  useActionQuery: () => ({ data: undefined }),
+  useActionQuery: (action: string) => ({
+    data:
+      action === "list-workspace-apps" ? clientState.workspaceApps : undefined,
+    isLoading: false,
+  }),
 }));
 
 vi.mock("@agent-native/core/client/i18n", () => ({
@@ -48,6 +54,7 @@ vi.mock("@agent-native/core/client/i18n", () => ({
       "dispatch.nav.chat": "Chat",
       "dispatch.nav.overview": "Overview",
       "dispatch.nav.apps": "Apps",
+      "dispatch.pages.workspaceApps": "Workspace apps",
       "dispatch.nav.operate": "Operate",
       "dispatch.nav.advanced": "Advanced",
       "dispatch.sidebar.newChat": "New chat",
@@ -118,6 +125,7 @@ describe("Dispatch NavContent", () => {
         source: { platform: "slack", url: "https://example.slack.com/thread" },
       },
     ];
+    clientState.workspaceApps = [];
     container = document.createElement("div");
     document.body.appendChild(container);
     root = createRoot(container);
@@ -160,16 +168,82 @@ describe("Dispatch NavContent", () => {
     });
 
     const lists = [...container.querySelectorAll("nav > ul")];
-    expect(lists).toHaveLength(4);
+    expect(lists).toHaveLength(2);
     expect(lists[0].className).toContain("gap-1");
-    expect(lists[1].className).toContain("mt-5");
     expect(lists[1].className).toContain("gap-1");
-    expect(lists[2].className).toContain("mt-3");
-    expect(lists[2].className).toContain("gap-1");
-    expect(lists[3].querySelector('a[href="/settings"]')).not.toBeNull();
+    expect(lists[1].querySelector('a[href="/admin"]')).not.toBeNull();
+    expect(lists[1].querySelector('a[href="/settings"]')).not.toBeNull();
     expect(lists[0].querySelector("a")?.className).toContain("h-8 w-8");
   });
 
+  it("keeps management routes out of the primary navigation", async () => {
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/overview"]}>
+          <TooltipProvider>
+            <NavContent />
+          </TooltipProvider>
+        </MemoryRouter>,
+      );
+    });
+
+    expect(container.querySelector('a[href="/admin"]')).not.toBeNull();
+    expect(container.querySelector('a[href="/operations"]')).toBeNull();
+    expect(container.querySelector('a[href="/metrics"]')).toBeNull();
+    expect(container.textContent).not.toContain("Automation & delivery");
+  });
+
+  it("renders the Admin control plane with grouped nested routes", async () => {
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/admin/metrics"]}>
+          <TooltipProvider>
+            <AdminShell>
+              <div>Admin content</div>
+            </AdminShell>
+          </TooltipProvider>
+        </MemoryRouter>,
+      );
+    });
+
+    const shell = container.querySelector("[data-dispatch-admin-shell]");
+    expect(shell).not.toBeNull();
+    expect(shell?.textContent).toContain("Operations");
+    expect(shell?.textContent).toContain("Automation & delivery");
+    expect(shell?.querySelector('a[href="/admin/metrics"]')).not.toBeNull();
+    expect(
+      shell?.querySelector('a[href="/admin/metrics"][aria-current="page"]'),
+    ).not.toBeNull();
+    expect(shell?.querySelector('a[href="/metrics"]')).toBeNull();
+    expect(shell?.querySelector('a[href="/admin/apps"]')).toBeNull();
+  });
+
+  it("shows ready workspace apps as direct links and highlights the active app", async () => {
+    clientState.workspaceApps = [
+      { id: "calendar", name: "Calendar", path: "/calendar", status: "ready" },
+      { id: "pending", name: "Pending", path: "/pending", status: "pending" },
+    ];
+
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/calendar/events"]}>
+          <TooltipProvider>
+            <NavContent />
+          </TooltipProvider>
+        </MemoryRouter>,
+      );
+    });
+
+    const rail = container.querySelector("[data-dispatch-apps-rail]");
+    expect(rail).not.toBeNull();
+    expect(rail?.textContent).toContain("Calendar");
+    expect(rail?.textContent).not.toContain("Pending");
+
+    const calendarLink = rail?.querySelector('a[href="/calendar"]');
+    expect(calendarLink).not.toBeNull();
+    expect(calendarLink?.getAttribute("aria-current")).toBe("page");
+  });
+
   it("keeps Dispatch branding and anchors Settings above the organization picker", async () => {
     await act(async () => {
       root.render(
@@ -188,6 +262,7 @@ describe("Dispatch NavContent", () => {
     expect(container.textContent).not.toContain("Agent-Native Dispatch");
 
     const settingsLink = container.querySelector('a[href="/settings"]');
+    const adminLink = container.querySelector('a[href="/admin"]');
     const organization = [...container.querySelectorAll("div")].find(
       (element) => element.textContent?.trim() === "Organization",
     );
@@ -196,11 +271,15 @@ describe("Dispatch NavContent", () => {
     );
 
     expect(settingsLink).not.toBeNull();
+    expect(adminLink).not.toBeNull();
     expect(organization).toBeDefined();
     expect(footerActions).not.toBeNull();
     expect(settingsLink!.compareDocumentPosition(organization!)).toBe(
       Node.DOCUMENT_POSITION_FOLLOWING,
     );
+    expect(adminLink!.compareDocumentPosition(settingsLink!)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    );
     expect(organization!.compareDocumentPosition(footerActions!)).toBe(
       Node.DOCUMENT_POSITION_FOLLOWING,
     );