@agent-native/dispatch 0.6.0 → 0.7.0

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

@@ -1,12 +1,13 @@
 import { useEffect, useMemo } from "react";
 import {
   Link,
+  Navigate,
   redirect,
   useParams,
+  type ClientLoaderFunctionArgs,
   type LoaderFunctionArgs,
 } from "react-router";
 import { useActionQuery, appPath } from "@agent-native/core/client";
-import { loadWorkspaceAppsManifest } from "@agent-native/core/server/agent-discovery";
 import {
   IconArrowLeft,
   IconArrowUpRight,
@@ -16,6 +17,7 @@ import { DispatchShell } from "@/components/dispatch-shell";
 import { Spinner } from "@/components/ui/spinner";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { resolveCatchAllTarget } from "@/lib/catch-all-target";
 import {
   workspaceAppHref,
   type WorkspaceAppSummary,
@@ -47,19 +49,49 @@ export function meta() {
  * OAuth callbackURL, so Google sign-in completes back at /dispatch/todo
  * and looks broken. This route fixes both the post-creation navigation
  * and the OAuth round-trip from a single place.
+ *
+ * Built-in template fallback: when no workspace manifest is available
+ * (framework dev with each template on its own port, hosted dispatch with
+ * no sibling apps), redirect to the matching first-party template's deploy
+ * URL — `http://localhost:<devPort>` in dev, `https://<id>.agent-native.com`
+ * in production. Without this, a user visiting `/forms` on dispatch is
+ * forced to sign in (auth guard) and then lands on this route's "Page not
+ * found" pane after the post-login reload.
+ *
+ * `appId === "dispatch"` short-circuit: when the segment matches Dispatch
+ * itself (e.g. `/dispatch/dispatch`), we go straight to the overview rather
+ * than chaining through `/dispatch` (which polled `useActionQuery` re-fired
+ * `window.location.assign` against and looped forever in production).
  */
+function dispatchSelfRedirect(appId: string | undefined): string | null {
+  if (appId === "dispatch") return appPath("/overview");
+  return null;
+}
+
 export function loader({ params }: LoaderFunctionArgs) {
   const appId = params.appId;
   if (!appId) return null;
-  const apps = loadWorkspaceAppsManifest();
-  if (!apps) return null;
-  const app = apps.find((entry) => entry?.id === appId);
-  const target =
-    app?.path && app.path.startsWith("/") ? app.path : app ? `/${appId}` : null;
+  const selfTarget = dispatchSelfRedirect(appId);
+  if (selfTarget) throw redirect(selfTarget);
+  const target = resolveCatchAllTarget(appId);
   if (target) throw redirect(target);
   return null;
 }
 
+export async function clientLoader({
+  params,
+  serverLoader,
+}: ClientLoaderFunctionArgs) {
+  const selfTarget = dispatchSelfRedirect(params.appId);
+  if (selfTarget) throw redirect(selfTarget);
+  // Defer to the server loader so the built-in template fallback runs on
+  // SPA navigations too (e.g. clicking a `/<template-id>` link inside
+  // dispatch). Without this the client side would only check the workspace
+  // apps query, which never lists the static first-party templates and so
+  // the user would land on the "Page not found" pane.
+  return serverLoader();
+}
+
 export default function WorkspaceAppCatchAllRoute() {
   const { appId } = useParams();
   const { data: apps = [], isLoading } = useActionQuery(
@@ -73,11 +105,17 @@ export default function WorkspaceAppCatchAllRoute() {
     [appId, apps],
   );
   const href = app ? workspaceAppHref(app) : null;
+  const isSelfReference = appId === "dispatch";
 
   useEffect(() => {
+    if (isSelfReference) return;
     if (!app || app.status === "pending" || !href) return;
     window.location.assign(href);
-  }, [app, href]);
+  }, [app, href, isSelfReference]);
+
+  if (isSelfReference) {
+    return <Navigate to={appPath("/overview")} replace />;
+  }
 
   if ((isLoading && !app) || (app && app.status !== "pending" && href)) {
     return (

package/src/routes/pages/approval.tsx

@@ -9,6 +9,7 @@ import {
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   IconCheck,
   IconX,
@@ -98,9 +99,38 @@ export default function ApprovalPreviewRoute() {
 
   if (isLoading) {
     return (
-      <div className="flex min-h-screen items-center justify-center bg-background p-6">
-        <div className="w-full max-w-md rounded-2xl border bg-card p-6 text-center">
-          <p className="text-sm text-muted-foreground">Loading...</p>
+      <div className="flex min-h-screen items-start justify-center bg-background p-6">
+        <div className="w-full max-w-md space-y-4">
+          <div className="rounded-2xl border bg-card p-5">
+            <div className="flex items-start gap-3">
+              <Skeleton className="h-9 w-9 shrink-0 rounded-xl" />
+              <div className="min-w-0 flex-1 space-y-2">
+                <div className="flex flex-wrap items-center gap-2">
+                  <Skeleton className="h-4 w-40" />
+                  <Skeleton className="h-5 w-20 rounded-full" />
+                </div>
+                <Skeleton className="h-3 w-32" />
+              </div>
+            </div>
+            <div className="mt-4 space-y-2 rounded-xl border bg-muted/30 px-4 py-3">
+              <div className="flex justify-between gap-4">
+                <Skeleton className="h-3 w-20" />
+                <Skeleton className="h-3 w-24" />
+              </div>
+              <div className="flex justify-between gap-4">
+                <Skeleton className="h-3 w-20" />
+                <Skeleton className="h-3 w-28" />
+              </div>
+              <div className="flex justify-between gap-4">
+                <Skeleton className="h-3 w-16" />
+                <Skeleton className="h-3 w-32" />
+              </div>
+            </div>
+            <div className="mt-4 flex gap-2">
+              <Skeleton className="h-8 flex-1 rounded-md" />
+              <Skeleton className="h-8 flex-1 rounded-md" />
+            </div>
+          </div>
         </div>
       </div>
     );

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

@@ -9,6 +9,7 @@ import {
 import { DispatchShell } from "@/components/dispatch-shell";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   workspaceAppHref,
   type WorkspaceAppSummary,
@@ -53,7 +54,11 @@ export default function WorkspaceAppRoute() {
         </Button>
 
         {isLoading && !app ? (
-          <p className="text-sm text-muted-foreground">Loading app status...</p>
+          <div className="space-y-3">
+            <Skeleton className="h-5 w-48" />
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-2/3" />
+          </div>
         ) : !app ? (
           <div className="space-y-3">
             <h2 className="text-base font-semibold text-foreground">

package/src/routes/pages/integrations.tsx

@@ -28,6 +28,11 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 export function meta() {
   return [{ title: "Connections — Dispatch" }];
@@ -90,10 +95,12 @@ function ConnectDialog({
   service,
   open,
   onOpenChange,
+  accessMode,
 }: {
   service: Service;
   open: boolean;
   onOpenChange: (next: boolean) => void;
+  accessMode: "all-apps" | "manual";
 }) {
   const [value, setValue] = useState("");
   const qc = useQueryClient();
@@ -128,16 +135,18 @@ function ConnectDialog({
         throw new Error("Secret created but id missing");
       }
 
-      // 2. Grant + sync to every app that declared this credential.
-      const targets = service.apps.filter((a) => !a.vaultGranted);
-      for (const app of targets) {
-        try {
-          await createGrant.mutateAsync({
-            secretId,
-            appId: app.appId,
-          });
-        } catch (err) {
-          console.warn(`grant to ${app.appId} failed`, err);
+      // 2. Manual mode needs grants; all-apps mode only needs sync.
+      if (accessMode === "manual") {
+        const targets = service.apps.filter((a) => !a.vaultGranted);
+        for (const app of targets) {
+          try {
+            await createGrant.mutateAsync({
+              secretId,
+              appId: app.appId,
+            });
+          } catch (err) {
+            console.warn(`grant to ${app.appId} failed`, err);
+          }
         }
       }
       for (const app of service.apps) {
@@ -217,7 +226,13 @@ function ConnectDialog({
   );
 }
 
-function ConnectorCard({ service }: { service: Service }) {
+function ConnectorCard({
+  service,
+  accessMode,
+}: {
+  service: Service;
+  accessMode: "all-apps" | "manual";
+}) {
   const [open, setOpen] = useState(false);
   const isConnected = service.apps.some((a) => a.configured);
   const appCount = service.apps.length;
@@ -251,10 +266,15 @@ function ConnectorCard({ service }: { service: Service }) {
             </Badge>
           )}
         </div>
-        <div className="min-w-0">
-          <div className="text-sm font-semibold text-foreground truncate">
-            {service.label}
-          </div>
+        <div className="w-full min-w-0">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="text-sm font-semibold text-foreground truncate">
+                {service.label}
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>{service.label}</TooltipContent>
+          </Tooltip>
           <div className="font-mono text-xs text-muted-foreground/80 truncate">
             {service.key}
           </div>
@@ -263,7 +283,12 @@ function ConnectorCard({ service }: { service: Service }) {
           Used by {appCount} {appCount === 1 ? "app" : "apps"}
         </div>
       </button>
-      <ConnectDialog service={service} open={open} onOpenChange={setOpen} />
+      <ConnectDialog
+        service={service}
+        open={open}
+        onOpenChange={setOpen}
+        accessMode={accessMode}
+      />
     </>
   );
 }
@@ -297,7 +322,13 @@ export default function ConnectionsRoute() {
     "list-integrations-catalog",
     {},
   );
+  const { data: accessSettings } = useActionQuery(
+    "get-vault-access-settings",
+    {},
+  );
   const apps = (catalog as CatalogApp[]) || [];
+  const accessMode =
+    (accessSettings as any)?.mode === "manual" ? "manual" : "all-apps";
 
   const services = useMemo<Service[]>(() => {
     const map = new Map<string, Service>();
@@ -357,7 +388,11 @@ export default function ConnectionsRoute() {
           </div>
           <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
             {available.map((service) => (
-              <ConnectorCard key={service.key} service={service} />
+              <ConnectorCard
+                key={service.key}
+                service={service}
+                accessMode={accessMode}
+              />
             ))}
           </div>
         </section>
@@ -373,7 +408,11 @@ export default function ConnectionsRoute() {
           </div>
           <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
             {connected.map((service) => (
-              <ConnectorCard key={service.key} service={service} />
+              <ConnectorCard
+                key={service.key}
+                service={service}
+                accessMode={accessMode}
+              />
             ))}
           </div>
         </section>

package/src/routes/pages/new-app.tsx

@@ -9,7 +9,7 @@ export default function NewAppRoute() {
   return (
     <DispatchShell
       title="New App"
-      description="Create a workspace app from a prompt and grant it selected vault keys."
+      description="Create a workspace app from a prompt and apply the workspace vault policy."
     >
       <NewWorkspaceAppFlow sourceApp="dispatch" className="px-0 py-0" />
     </DispatchShell>

package/src/routes/pages/overview.tsx

@@ -131,6 +131,60 @@ function AppCardSkeleton() {
   );
 }
 
+interface RecentAuditEvent {
+  id: string;
+  summary: string;
+  actor: string;
+  createdAt: string;
+}
+
+function RecentActivityList({
+  isLoading,
+  events,
+}: {
+  isLoading: boolean;
+  events: RecentAuditEvent[];
+}) {
+  if (isLoading && events.length === 0) {
+    return (
+      <div className="mt-4 space-y-3">
+        {Array.from({ length: 3 }).map((_, index) => (
+          <div
+            key={index}
+            className="rounded-xl border bg-muted/30 px-4 py-3 space-y-2"
+          >
+            <Skeleton className="h-4 w-3/5" />
+            <Skeleton className="h-3 w-2/5" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+  if (events.length === 0) {
+    return (
+      <div className="mt-4 space-y-3">
+        <div className="rounded-xl border border-dashed px-4 py-6 text-sm text-muted-foreground">
+          No activity yet.
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className="mt-4 space-y-3">
+      {events.map((event) => (
+        <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>
+  );
+}
+
 function WorkspaceAppsSection({
   apps,
   isLoading,
@@ -563,7 +617,7 @@ export default function OverviewRoute() {
         <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
           <StatCard
             label="Vault secrets"
-            help="Credentials stored in the workspace vault. Grant them to apps from the Vault page."
+            help="Credentials stored in the workspace vault."
             value={data?.vault?.secretCount || 0}
             icon={IconKey}
             cta={
@@ -575,8 +629,16 @@ export default function OverviewRoute() {
             }
           />
           <StatCard
-            label="Active grants"
-            help="Secrets currently granted to apps. Sync them to push credentials."
+            label={
+              data?.vault?.accessMode === "manual"
+                ? "Active grants"
+                : "Accessible keys"
+            }
+            help={
+              data?.vault?.accessMode === "manual"
+                ? "Secrets currently granted to apps. Sync them to push credentials."
+                : "Vault keys available to every workspace app."
+            }
             value={data?.vault?.activeGrantCount || 0}
             icon={IconShieldCheck}
           />
@@ -625,33 +687,11 @@ export default function OverviewRoute() {
                 <h2 className="text-lg font-semibold text-foreground">
                   Recent activity
                 </h2>
-                {isLoading && (
-                  <span className="text-xs text-muted-foreground">
-                    Loading...
-                  </span>
-                )}
-              </div>
-              <div className="mt-4 space-y-3">
-                {(data?.recentAudit || []).map((event) => (
-                  <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>
-                ))}
-                {!isLoading && (data?.recentAudit?.length || 0) === 0 && (
-                  <div className="rounded-xl border border-dashed px-4 py-6 text-sm text-muted-foreground">
-                    No activity yet.
-                  </div>
-                )}
               </div>
+              <RecentActivityList
+                isLoading={isLoading}
+                events={data?.recentAudit ?? []}
+              />
             </section>
 
             <section className="rounded-2xl border bg-card p-5">

package/src/routes/pages/vault.tsx

@@ -37,6 +37,7 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
 import {
   Select,
   SelectContent,
@@ -46,6 +47,7 @@ import {
 } from "@/components/ui/select";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
+import { Skeleton } from "@/components/ui/skeleton";
 
 const PROVIDERS = [
   "google",
@@ -60,6 +62,8 @@ const PROVIDERS = [
   "other",
 ];
 
+type VaultAccessMode = "all-apps" | "manual";
+
 export function meta() {
   return [{ title: "Vault — Dispatch" }];
 }
@@ -240,7 +244,53 @@ function GrantDialog({
   );
 }
 
-function SecretRow({ secret, grants }: { secret: any; grants: any[] }) {
+function VaultAccessSettingsCard({ mode }: { mode: VaultAccessMode }) {
+  const update = useActionMutation("set-vault-access-settings", {
+    onSuccess: (next: any) =>
+      toast.success(
+        next?.mode === "manual"
+          ? "Manual vault access enabled"
+          : "All apps can use vault keys",
+      ),
+    onError: (err) => toast.error(String(err)),
+  });
+  const allApps = mode !== "manual";
+
+  return (
+    <div className="rounded-xl border bg-card px-4 py-3">
+      <div className="flex items-center justify-between gap-4">
+        <div className="min-w-0">
+          <Label className="text-sm font-medium">
+            All apps can use vault keys
+          </Label>
+          <p className="mt-1 text-xs text-muted-foreground">
+            {allApps
+              ? "Every workspace app can receive every saved key."
+              : "Only apps with explicit grants can receive saved keys."}
+          </p>
+        </div>
+        <Switch
+          checked={allApps}
+          disabled={update.isPending}
+          onCheckedChange={(checked) =>
+            update.mutate({ mode: checked ? "all-apps" : "manual" })
+          }
+          aria-label="Allow all workspace apps to use vault keys"
+        />
+      </div>
+    </div>
+  );
+}
+
+function SecretRow({
+  secret,
+  grants,
+  accessMode,
+}: {
+  secret: any;
+  grants: any[];
+  accessMode: VaultAccessMode;
+}) {
   const [expanded, setExpanded] = useState(false);
   const [showValue, setShowValue] = useState(false);
 
@@ -259,6 +309,7 @@ function SecretRow({ secret, grants }: { secret: any; grants: any[] }) {
   });
 
   const activeGrants = grants.filter((g) => g.status === "active");
+  const allApps = accessMode !== "manual";
 
   return (
     <div className="rounded-xl border bg-card">
@@ -289,7 +340,9 @@ function SecretRow({ secret, grants }: { secret: any; grants: any[] }) {
         </div>
         <div className="flex items-center gap-2">
           <Badge variant="outline" className="text-xs">
-            {activeGrants.length} grant{activeGrants.length !== 1 ? "s" : ""}
+            {allApps
+              ? "All apps"
+              : `${activeGrants.length} grant${activeGrants.length !== 1 ? "s" : ""}`}
           </Badge>
         </div>
       </button>
@@ -319,11 +372,17 @@ function SecretRow({ secret, grants }: { secret: any; grants: any[] }) {
           <div className="space-y-2">
             <div className="flex items-center justify-between">
               <span className="text-xs font-medium text-foreground">
-                Grants
+                {allApps ? "Access" : "Grants"}
               </span>
-              <GrantDialog secretId={secret.id} secretName={secret.name} />
+              {!allApps && (
+                <GrantDialog secretId={secret.id} secretName={secret.name} />
+              )}
             </div>
-            {activeGrants.length > 0 ? (
+            {allApps ? (
+              <div className="rounded-lg border border-dashed px-3 py-4 text-center text-xs text-muted-foreground">
+                Available to every workspace app.
+              </div>
+            ) : activeGrants.length > 0 ? (
               <div className="space-y-1.5">
                 {activeGrants.map((grant: any) => (
                   <div
@@ -365,7 +424,7 @@ function SecretRow({ secret, grants }: { secret: any; grants: any[] }) {
               </div>
             ) : (
               <div className="rounded-lg border border-dashed px-3 py-4 text-center text-xs text-muted-foreground">
-                No grants yet. Grant this secret to an app to share it.
+                No grants yet.
               </div>
             )}
           </div>
@@ -387,8 +446,8 @@ function SecretRow({ secret, grants }: { secret: any; grants: any[] }) {
                   <AlertDialogTitle>Delete this secret?</AlertDialogTitle>
                   <AlertDialogDescription>
                     Removing “{secret.name}” revokes all of its grants. Apps
-                    that depended on this credential will lose access on the
-                    next sync. This cannot be undone.
+                    that depended on this credential can lose access on the next
+                    sync. This cannot be undone.
                   </AlertDialogDescription>
                 </AlertDialogHeader>
                 <AlertDialogFooter>
@@ -507,6 +566,12 @@ export default function VaultRoute() {
   const { data: grants } = useActionQuery("list-vault-grants", {});
   const { data: requests } = useActionQuery("list-vault-requests", {});
   const { data: audit } = useActionQuery("list-vault-audit", { limit: 20 });
+  const { data: accessSettings } = useActionQuery(
+    "get-vault-access-settings",
+    {},
+  );
+  const accessMode: VaultAccessMode =
+    (accessSettings as any)?.mode === "manual" ? "manual" : "all-apps";
 
   const grantsBySecret = (grants || []).reduce(
     (acc: Record<string, any[]>, g: any) => {
@@ -524,7 +589,7 @@ export default function VaultRoute() {
   return (
     <DispatchShell
       title="Vault"
-      description="Centralized secret management for your workspace. Store credentials once, grant them to apps."
+      description="Centralized secret management for your workspace. Store credentials once and sync them to apps."
     >
       <Tabs defaultValue="secrets">
         <TabsList>
@@ -546,25 +611,40 @@ export default function VaultRoute() {
         </TabsList>
 
         <TabsContent value="secrets" className="mt-4 space-y-3">
+          <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} />
-              <span>
-                {secretsLoading
-                  ? "Loading..."
-                  : `${secrets?.length || 0} secret${(secrets?.length || 0) !== 1 ? "s" : ""}`}
-              </span>
+              {secretsLoading ? (
+                <Skeleton className="h-4 w-20" />
+              ) : (
+                <span>
+                  {`${secrets?.length || 0} secret${(secrets?.length || 0) !== 1 ? "s" : ""}`}
+                </span>
+              )}
             </div>
             <AddSecretDialog />
           </div>
 
-          {(secrets || []).map((secret: any) => (
-            <SecretRow
-              key={secret.id}
-              secret={secret}
-              grants={grantsBySecret[secret.id] || []}
-            />
-          ))}
+          {secretsLoading && (secrets ?? []).length === 0
+            ? Array.from({ length: 3 }).map((_, index) => (
+                <div
+                  key={index}
+                  className="rounded-2xl border 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}
+                />
+              ))}
 
           {!secretsLoading && (secrets?.length || 0) === 0 && (
             <div className="rounded-2xl border border-dashed px-6 py-12 text-center">