@agent-native/dispatch 0.18.0 → 0.19.0

package/src/routes/index.ts

@@ -36,6 +36,31 @@ export const dispatchRoutes: RouteConfig = [
   route("chat", "./pages/chat.js"),
   route("chat/:threadId", "./pages/chat.js"),
   route("overview", "./pages/overview.js"),
+  route("admin", "./pages/admin.js", [
+    index("./pages/admin._index.js"),
+    route("apps", "./pages/apps.js"),
+    route("apps/:appId", "./pages/apps.$appId.js"),
+    route("new-app", "./pages/new-app.js"),
+    route("operations", "./pages/operations.js"),
+    route("metrics", "./pages/metrics.js"),
+    route("automations", "./pages/automations.js"),
+    route("approvals", "./pages/approvals.js"),
+    route("destinations", "./pages/destinations.js"),
+    route("integrations", "./pages/integrations.js"),
+    route("transactional-email", "./pages/transactional-email.js"),
+    route(
+      "transactional-email/:appId/:id",
+      "./pages/transactional-email.$appId.$id.js",
+    ),
+    route("vault", "./pages/vault.js"),
+    route("agents", "./pages/agents.js"),
+    route("workspace", "./pages/workspace.js"),
+    route("messaging", "./pages/messaging.js"),
+    route("identities", "./pages/identities.js"),
+    route("audit", "./pages/audit.js"),
+    route("dreams", "./pages/dreams.js"),
+    route("thread-debug", "./pages/thread-debug.js"),
+  ]),
   route("metrics", "./pages/metrics.js"),
   route("operations", "./pages/operations.js"),
   route("apps", "./pages/apps.js"),

package/src/routes/pages/admin._index.tsx

@@ -0,0 +1,39 @@
+import { useT } from "@agent-native/core/client/i18n";
+
+import { DispatchShell } from "../../components/dispatch-shell";
+
+export function meta() {
+  return [{ title: "Admin — Dispatch" }];
+}
+
+export default function AdminOverviewRoute() {
+  const t = useT();
+
+  return (
+    <DispatchShell
+      title={t("dispatch.nav.admin", { defaultValue: "Admin" })}
+      description={t("dispatch.pages.adminDescription", {
+        defaultValue: "Workspace controls and operations",
+      })}
+    >
+      <section className="max-w-2xl space-y-2">
+        <h2 className="text-base font-semibold text-foreground">
+          {t("dispatch.pages.adminWelcome", {
+            defaultValue: "Workspace control plane",
+          })}
+        </h2>
+        <p className="text-sm leading-6 text-muted-foreground">
+          {t("dispatch.pages.adminChooseArea", {
+            defaultValue:
+              "Manage apps, connections, automations, and operational tools from one place.",
+          })}
+        </p>
+        <p className="text-sm leading-6 text-muted-foreground">
+          {t("dispatch.pages.adminChooseAreaHint", {
+            defaultValue: "Choose an area from the Admin navigation.",
+          })}
+        </p>
+      </section>
+    </DispatchShell>
+  );
+}

package/src/routes/pages/admin.tsx

@@ -0,0 +1,15 @@
+import { Outlet } from "react-router";
+
+import { AdminShell } from "../../components/admin-navigation";
+
+export function meta() {
+  return [{ title: "Admin — Dispatch" }];
+}
+
+export default function AdminRoute() {
+  return (
+    <AdminShell>
+      <Outlet />
+    </AdminShell>
+  );
+}

package/src/routes/pages/approval.tsx

@@ -175,7 +175,7 @@ export default function ApprovalPreviewRoute() {
               size="sm"
               variant="outline"
               className="mt-4 gap-1.5"
-              onClick={() => postNavigate(appPath("/approvals"))}
+              onClick={() => postNavigate(appPath("/admin/approvals"))}
             >
               <IconArrowUpRight size={14} />
               View all approvals
@@ -288,7 +288,7 @@ export default function ApprovalPreviewRoute() {
               size="sm"
               variant="ghost"
               className="gap-1.5 text-muted-foreground"
-              onClick={() => postNavigate(appPath("/approvals"))}
+              onClick={() => postNavigate(appPath("/admin/approvals"))}
             >
               <IconArrowUpRight size={14} />
               Open in app

package/src/routes/pages/apps.$appId.tsx

@@ -7,7 +7,7 @@ import {
   IconClockHour4,
 } from "@tabler/icons-react";
 import { useEffect, useMemo } from "react";
-import { Link, useParams } from "react-router";
+import { Link, useLocation, useParams } from "react-router";
 
 import { ActionQueryError } from "../../components/action-query-error";
 import { DispatchShell } from "../../components/dispatch-shell";
@@ -25,6 +25,7 @@ export function meta() {
 
 export default function WorkspaceAppRoute() {
   const t = useT();
+  const location = useLocation();
   const { appId } = useParams();
   const appsQuery = useActionQuery("list-workspace-apps", {
     includeAgentCards: false,
@@ -49,7 +50,11 @@ export default function WorkspaceAppRoute() {
     >
       <div className="max-w-2xl rounded-lg bg-card p-5">
         <Button asChild size="sm" variant="ghost" className="-ml-2 mb-4">
-          <Link to="/apps">
+          <Link
+            to={
+              location.pathname.startsWith("/admin/") ? "/admin/apps" : "/apps"
+            }
+          >
             <IconArrowLeft size={15} className="mr-1.5" />
             {t("dispatch.nav.apps")}
           </Link>

package/src/routes/pages/integrations.tsx

@@ -12,6 +12,7 @@ import {
 } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
+import { Link } from "react-router";
 import { toast } from "sonner";
 
 import { ActionQueryError } from "../../components/action-query-error";
@@ -449,9 +450,9 @@ export default function ConnectionsRoute() {
             </div>
             <div className="flex items-center justify-end gap-1.5 border-t px-4 py-2.5 text-xs text-muted-foreground">
               <IconLink size={12} />
-              <a href="/vault" className="hover:underline">
+              <Link to="/admin/vault" className="hover:underline">
                 Open vault for advanced sharing
-              </a>
+              </Link>
             </div>
           </CollapsibleContent>
         </Collapsible>

package/src/routes/pages/operations.tsx

@@ -30,17 +30,17 @@ function OperationsShortcuts() {
 
   const tools = [
     {
-      to: "/thread-debug",
+      to: "/admin/thread-debug",
       icon: IconMessages,
       title: t("dispatch.nav.threadDebug", { defaultValue: "Thread debug" }),
     },
     {
-      to: "/audit",
+      to: "/admin/audit",
       icon: IconHistory,
       title: t("dispatch.nav.audit"),
     },
     {
-      to: "/destinations",
+      to: "/admin/destinations",
       icon: IconSend,
       title: t("dispatch.pages.deliveryQueue"),
     },

package/src/routes/pages/settings.tsx

@@ -62,7 +62,7 @@ export default function SettingsRoute() {
               </CardHeader>
               <CardContent>
                 <Button variant="outline" asChild>
-                  <Link to="/workspace">
+                  <Link to="/admin/workspace">
                     {t("settings.openResourceSettings")}
                   </Link>
                 </Button>
@@ -80,7 +80,9 @@ export default function SettingsRoute() {
               </CardHeader>
               <CardContent>
                 <Button variant="outline" asChild>
-                  <Link to="/automations">{t("settings.openAutomations")}</Link>
+                  <Link to="/admin/automations">
+                    {t("settings.openAutomations")}
+                  </Link>
                 </Button>
               </CardContent>
             </Card>
@@ -96,7 +98,9 @@ export default function SettingsRoute() {
               </CardHeader>
               <CardContent>
                 <Button variant="outline" asChild>
-                  <Link to="/destinations">{t("settings.openDelivery")}</Link>
+                  <Link to="/admin/destinations">
+                    {t("settings.openDelivery")}
+                  </Link>
                 </Button>
               </CardContent>
             </Card>

package/src/routes/pages/team.tsx

@@ -5,5 +5,5 @@ export function meta() {
 }
 
 export default function TeamRoute() {
-  return <Navigate to="/settings#organization" replace />;
+  return <Navigate to="/settings/organization" replace />;
 }

package/src/routes/pages/transactional-email.$appId.$id.tsx

@@ -3,7 +3,7 @@ import { useT } from "@agent-native/core/client/i18n";
 import { IconAlertTriangle, IconArrowLeft } from "@tabler/icons-react";
 import { useQueries, useQuery } from "@tanstack/react-query";
 import { useMemo } from "react";
-import { Link, useParams } from "react-router";
+import { Link, useLocation, useParams } from "react-router";
 
 import {
   aggregateSharedEmails,
@@ -155,6 +155,7 @@ function useEmailDetail(appId: string, id: string) {
 
 export default function TransactionalEmailDetailRoute() {
   const t = useT();
+  const location = useLocation();
   const params = useParams<{ appId: string; id: string }>();
   const appId = params.appId ?? "";
   const id = params.id ?? "";
@@ -213,7 +214,13 @@ export default function TransactionalEmailDetailRoute() {
     >
       <div className="max-w-3xl space-y-4">
         <Button asChild size="sm" variant="ghost" className="-ml-2">
-          <Link to="/transactional-email">
+          <Link
+            to={
+              location.pathname.startsWith("/admin/")
+                ? "/admin/transactional-email"
+                : "/transactional-email"
+            }
+          >
             <IconArrowLeft size={15} className="mr-1.5" />
             {t("dispatch.transactionalEmail.title")}
           </Link>

package/src/routes/pages/transactional-email.tsx

@@ -10,7 +10,7 @@ import {
 } from "@tabler/icons-react";
 import { useQueries, useQuery } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
-import { Link } from "react-router";
+import { Link, useLocation } from "react-router";
 
 import {
   aggregateSharedEmails,
@@ -180,14 +180,18 @@ function EmailRow({
   engagementLoading: boolean;
 }) {
   const t = useT();
+  const location = useLocation();
   const [previewOpen, setPreviewOpen] = useState(false);
   const [activityOpen, setActivityOpen] = useState(false);
+  const detailBase = location.pathname.startsWith("/admin/")
+    ? "/admin/transactional-email"
+    : "/transactional-email";
 
   return (
     <TableRow>
       <TableCell className="align-top">
         <Link
-          to={`/transactional-email/${appId}/${email.id}`}
+          to={`${detailBase}/${appId}/${email.id}`}
           className="text-sm font-medium text-foreground hover:underline"
         >
           {email.name}

package/src/routes/pages/vault.tsx

@@ -2,6 +2,7 @@ import {
   useActionMutation,
   useActionQuery,
 } from "@agent-native/core/client/hooks";
+import { useOrgRole } from "@agent-native/core/client/org";
 import {
   IconChevronDown,
   IconChevronRight,
@@ -648,7 +649,13 @@ function SecretRow({
   );
 }
 
-function RequestRow({ request }: { request: any }) {
+function RequestRow({
+  request,
+  canManage,
+}: {
+  request: any;
+  canManage: boolean;
+}) {
   const [secretValue, setSecretValue] = useState("");
 
   const approve = useActionMutation("approve-vault-request", {
@@ -706,7 +713,7 @@ function RequestRow({ request }: { request: any }) {
           </Badge>
         )}
       </div>
-      {request.status === "pending" && (
+      {request.status === "pending" && canManage ? (
         <div className="mt-3 flex items-end gap-2 border-t pt-3">
           <div className="flex-1 space-y-1">
             <Label className="text-xs">Secret value to provision</Label>
@@ -734,17 +741,45 @@ function RequestRow({ request }: { request: any }) {
             Deny
           </Button>
         </div>
-      )}
+      ) : request.status === "pending" ? (
+        <p className="mt-3 border-t pt-3 text-xs text-muted-foreground">
+          Waiting for a workspace owner or admin to review this request.
+        </p>
+      ) : null}
     </div>
   );
 }
 
 export default function VaultRoute() {
-  const secretsQuery = useActionQuery("list-vault-secrets", {});
-  const grantsQuery = useActionQuery("list-vault-grants", {});
-  const requestsQuery = useActionQuery("list-vault-requests", {});
-  const auditQuery = useActionQuery("list-vault-audit", { limit: 20 });
-  const accessQuery = useActionQuery("get-vault-access-settings", {});
+  const { org, role, isLoading: orgLoading, error: orgError } = useOrgRole();
+  const accessReady = !orgLoading && !orgError && !!org;
+  const canManageVault =
+    accessReady && (!org.orgId || role === "owner" || role === "admin");
+  const secretsQuery = useActionQuery(
+    "list-vault-secrets",
+    {},
+    { enabled: canManageVault },
+  );
+  const grantsQuery = useActionQuery(
+    "list-vault-grants",
+    {},
+    { enabled: canManageVault },
+  );
+  const requestsQuery = useActionQuery(
+    "list-vault-requests",
+    {},
+    { enabled: accessReady },
+  );
+  const auditQuery = useActionQuery(
+    "list-vault-audit",
+    { limit: 20 },
+    { enabled: canManageVault },
+  );
+  const accessQuery = useActionQuery(
+    "get-vault-access-settings",
+    {},
+    { enabled: accessReady },
+  );
   const { data: secrets, isLoading: secretsLoading } = secretsQuery;
   const { data: grants } = grantsQuery;
   const { data: requests } = requestsQuery;
@@ -787,13 +822,31 @@ export default function VaultRoute() {
               </Badge>
             )}
           </TabsTrigger>
-          <TabsTrigger value="audit">Audit</TabsTrigger>
+          {canManageVault ? (
+            <TabsTrigger value="audit">Audit</TabsTrigger>
+          ) : null}
         </TabsList>
 
         <TabsContent value="secrets" className="mt-4 space-y-3">
-          {secretsQuery.isError ||
-          grantsQuery.isError ||
-          accessQuery.isError ? (
+          {!accessReady ? (
+            <div className="rounded-2xl border border-dashed px-6 py-12 text-center text-sm text-muted-foreground">
+              Checking workspace access…
+            </div>
+          ) : !canManageVault ? (
+            <div className="rounded-2xl border border-dashed px-6 py-12 text-center">
+              <IconKey size={32} className="mx-auto text-muted-foreground/50" />
+              <h3 className="mt-3 text-sm font-medium text-foreground">
+                Vault management is restricted
+              </h3>
+              <p className="mx-auto mt-1 max-w-md text-sm text-muted-foreground">
+                Workspace owners and admins manage shared secret values. Use a
+                request from the app that needs a key, and an admin can review
+                it from the Requests tab.
+              </p>
+            </div>
+          ) : secretsQuery.isError ||
+            grantsQuery.isError ||
+            accessQuery.isError ? (
             <ActionQueryError
               error={
                 secretsQuery.error ?? grantsQuery.error ?? accessQuery.error
@@ -805,60 +858,64 @@ export default function VaultRoute() {
               }}
             />
           ) : null}
-          <VaultAccessSettingsCard mode={accessMode} />
-
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2 text-sm text-muted-foreground">
-              <IconKey size={16} />
-              {secretsLoading ? (
-                <Skeleton className="h-4 w-20" />
-              ) : (
-                <span>
-                  {`${secrets?.length || 0} secret${(secrets?.length || 0) !== 1 ? "s" : ""}`}
-                </span>
-              )}
-            </div>
-            <AddSecretDialog />
-          </div>
-
-          {!secretsQuery.isError &&
-          secretsLoading &&
-          (secrets ?? []).length === 0
-            ? Array.from({ length: 3 }).map((_, index) => (
-                <div
-                  key={index}
-                  className="rounded-2xl bg-card px-5 py-4 space-y-2"
-                >
-                  <Skeleton className="h-4 w-1/3" />
-                  <Skeleton className="h-3 w-2/3" />
+          {accessReady && canManageVault ? (
+            <>
+              <VaultAccessSettingsCard mode={accessMode} />
+
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <IconKey size={16} />
+                  {secretsLoading ? (
+                    <Skeleton className="h-4 w-20" />
+                  ) : (
+                    <span>
+                      {`${secrets?.length || 0} secret${(secrets?.length || 0) !== 1 ? "s" : ""}`}
+                    </span>
+                  )}
                 </div>
-              ))
-            : (secrets || []).map((secret: any) => (
-                <SecretRow
-                  key={secret.id}
-                  secret={secret}
-                  grants={grantsBySecret[secret.id] || []}
-                  accessMode={accessMode}
-                />
-              ))}
-
-          {!secretsQuery.isError &&
-            !secretsLoading &&
-            (secrets?.length || 0) === 0 && (
-              <div className="rounded-2xl border border-dashed px-6 py-12 text-center">
-                <IconKey
-                  size={32}
-                  className="mx-auto text-muted-foreground/50"
-                />
-                <h3 className="mt-3 text-sm font-medium text-foreground">
-                  No secrets yet
-                </h3>
-                <p className="mt-1 text-sm text-muted-foreground">
-                  Add your first secret to start sharing credentials across
-                  workspace apps.
-                </p>
+                <AddSecretDialog />
               </div>
-            )}
+
+              {!secretsQuery.isError &&
+              secretsLoading &&
+              (secrets ?? []).length === 0
+                ? Array.from({ length: 3 }).map((_, index) => (
+                    <div
+                      key={index}
+                      className="rounded-2xl bg-card px-5 py-4 space-y-2"
+                    >
+                      <Skeleton className="h-4 w-1/3" />
+                      <Skeleton className="h-3 w-2/3" />
+                    </div>
+                  ))
+                : (secrets || []).map((secret: any) => (
+                    <SecretRow
+                      key={secret.id}
+                      secret={secret}
+                      grants={grantsBySecret[secret.id] || []}
+                      accessMode={accessMode}
+                    />
+                  ))}
+
+              {!secretsQuery.isError &&
+                !secretsLoading &&
+                (secrets?.length || 0) === 0 && (
+                  <div className="rounded-2xl border border-dashed px-6 py-12 text-center">
+                    <IconKey
+                      size={32}
+                      className="mx-auto text-muted-foreground/50"
+                    />
+                    <h3 className="mt-3 text-sm font-medium text-foreground">
+                      No secrets yet
+                    </h3>
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      Add your first secret to start sharing credentials across
+                      workspace apps.
+                    </p>
+                  </div>
+                )}
+            </>
+          ) : null}
         </TabsContent>
 
         <TabsContent value="requests" className="mt-4 space-y-3">
@@ -869,7 +926,11 @@ export default function VaultRoute() {
             />
           ) : null}
           {(requests || []).map((request: any) => (
-            <RequestRow key={request.id} request={request} />
+            <RequestRow
+              key={request.id}
+              request={request}
+              canManage={canManageVault}
+            />
           ))}
           {!requestsQuery.isError && (requests?.length || 0) === 0 && (
             <div className="rounded-2xl border border-dashed px-6 py-12 text-center text-sm text-muted-foreground">
@@ -878,32 +939,34 @@ export default function VaultRoute() {
           )}
         </TabsContent>
 
-        <TabsContent value="audit" className="mt-4 space-y-2">
-          {auditQuery.isError ? (
-            <ActionQueryError
-              error={auditQuery.error}
-              onRetry={() => void auditQuery.refetch()}
-            />
-          ) : null}
-          {(audit || []).map((event: any) => (
-            <div
-              key={event.id}
-              className="rounded-xl border bg-muted/30 px-4 py-3"
-            >
-              <div className="text-sm font-medium text-foreground">
-                {event.summary}
+        {canManageVault ? (
+          <TabsContent value="audit" className="mt-4 space-y-2">
+            {auditQuery.isError ? (
+              <ActionQueryError
+                error={auditQuery.error}
+                onRetry={() => void auditQuery.refetch()}
+              />
+            ) : null}
+            {(audit || []).map((event: any) => (
+              <div
+                key={event.id}
+                className="rounded-xl border bg-muted/30 px-4 py-3"
+              >
+                <div className="text-sm font-medium text-foreground">
+                  {event.summary}
+                </div>
+                <div className="mt-1 text-xs text-muted-foreground">
+                  {event.actor} · {new Date(event.createdAt).toLocaleString()}
+                </div>
               </div>
-              <div className="mt-1 text-xs text-muted-foreground">
-                {event.actor} · {new Date(event.createdAt).toLocaleString()}
+            ))}
+            {!auditQuery.isError && (audit?.length || 0) === 0 && (
+              <div className="rounded-2xl border border-dashed px-6 py-12 text-center text-sm text-muted-foreground">
+                No vault activity yet.
               </div>
-            </div>
-          ))}
-          {!auditQuery.isError && (audit?.length || 0) === 0 && (
-            <div className="rounded-2xl border border-dashed px-6 py-12 text-center text-sm text-muted-foreground">
-              No vault activity yet.
-            </div>
-          )}
-        </TabsContent>
+            )}
+          </TabsContent>
+        ) : null}
       </Tabs>
     </DispatchShell>
   );

package/src/server/lib/app-creation-store.ts

@@ -27,7 +27,7 @@ import {
   recordAudit,
   resolveLinkedOwner,
 } from "./dispatch-store.js";
-import { createRequest, listSecrets } from "./vault-store.js";
+import { createRequest, listSecretOptions } from "./vault-store.js";
 import {
   grantWorkspaceResourcesToApp,
   listWorkspaceResourceOptions,
@@ -2013,7 +2013,7 @@ export async function startWorkspaceAppCreation(input: {
   }
 
   const selectedKeys = input.secretIds?.length
-    ? (await listSecrets())
+    ? (await listSecretOptions())
         .filter((secret) => input.secretIds?.includes(secret.id))
         .map((secret) => secret.credentialKey)
     : [];