@agent-native/dispatch 0.14.3 → 0.14.5

package/src/routes/pages/identities.tsx

@@ -1,6 +1,7 @@
 import { useActionMutation, useActionQuery } from "@agent-native/core/client";
 import { toast } from "sonner";
 
+import { ActionQueryError } from "../../components/action-query-error";
 import { DispatchShell } from "../../components/dispatch-shell";
 import { Button } from "../../components/ui/button";
 
@@ -9,7 +10,8 @@ export function meta() {
 }
 
 export default function IdentitiesRoute() {
-  const { data } = useActionQuery("list-linked-identities", {});
+  const query = useActionQuery("list-linked-identities", {});
+  const { data } = query;
   const createToken = useActionMutation("create-link-token", {
     onSuccess: () => toast.success("Link token created"),
   });
@@ -19,74 +21,83 @@ export default function IdentitiesRoute() {
       title="Identities"
       description="Link external senders to workspace users."
     >
-      <div className="grid gap-4 xl:grid-cols-2">
-        <section className="rounded-2xl border bg-card p-5">
-          <div className="flex flex-wrap items-center justify-between gap-2">
-            <h2 className="text-lg font-semibold text-foreground">
-              Active links
-            </h2>
-            <div className="flex shrink-0 gap-2">
-              <Button
-                variant="outline"
-                onClick={() => createToken.mutate({ platform: "slack" })}
-              >
-                New Slack token
-              </Button>
-              <Button
-                onClick={() => createToken.mutate({ platform: "telegram" })}
-              >
-                New Telegram token
-              </Button>
+      {query.isError ? (
+        <ActionQueryError
+          error={query.error}
+          onRetry={() => void query.refetch()}
+        />
+      ) : (
+        <div className="grid gap-4 xl:grid-cols-2">
+          <section className="rounded-2xl border bg-card p-5">
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <h2 className="text-lg font-semibold text-foreground">
+                Active links
+              </h2>
+              <div className="flex shrink-0 gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => createToken.mutate({ platform: "slack" })}
+                >
+                  New Slack token
+                </Button>
+                <Button
+                  onClick={() => createToken.mutate({ platform: "telegram" })}
+                >
+                  New Telegram token
+                </Button>
+              </div>
             </div>
-          </div>
-          <div className="mt-4 space-y-3">
-            {(data?.links || []).map((link: any) => (
-              <div
-                key={link.id}
-                className="rounded-xl border bg-muted/30 px-4 py-3"
-              >
-                <div className="text-sm font-medium text-foreground">
-                  {link.externalUserName || link.externalUserId}
+            <div className="mt-4 space-y-3">
+              {(data?.links || []).map((link: any) => (
+                <div
+                  key={link.id}
+                  className="rounded-xl border bg-muted/30 px-4 py-3"
+                >
+                  <div className="text-sm font-medium text-foreground">
+                    {link.externalUserName || link.externalUserId}
+                  </div>
+                  <div className="mt-1 text-xs text-muted-foreground">
+                    {link.platform} → {link.ownerEmail}
+                  </div>
                 </div>
-                <div className="mt-1 text-xs text-muted-foreground">
-                  {link.platform} → {link.ownerEmail}
+              ))}
+              {(data?.links?.length || 0) === 0 && (
+                <div className="rounded-xl border border-dashed px-4 py-8 text-sm text-muted-foreground">
+                  No linked identities yet. Generate a token and ask the user to
+                  send <code>/link TOKEN</code> from Slack or Telegram.
                 </div>
-              </div>
-            ))}
-            {(data?.links?.length || 0) === 0 && (
-              <div className="rounded-xl border border-dashed px-4 py-8 text-sm text-muted-foreground">
-                No linked identities yet. Generate a token and ask the user to
-                send <code>/link TOKEN</code> from Slack or Telegram.
-              </div>
-            )}
-          </div>
-        </section>
+              )}
+            </div>
+          </section>
 
-        <section className="rounded-2xl border bg-card p-5">
-          <h2 className="text-lg font-semibold text-foreground">Link tokens</h2>
-          <div className="mt-4 space-y-3">
-            {(data?.tokens || []).map((token: any) => (
-              <div key={token.id} className="rounded-xl border px-4 py-3">
-                <div className="text-sm font-medium text-foreground">
-                  /link {token.token}
+          <section className="rounded-2xl border bg-card p-5">
+            <h2 className="text-lg font-semibold text-foreground">
+              Link tokens
+            </h2>
+            <div className="mt-4 space-y-3">
+              {(data?.tokens || []).map((token: any) => (
+                <div key={token.id} className="rounded-xl border px-4 py-3">
+                  <div className="text-sm font-medium text-foreground">
+                    /link {token.token}
+                  </div>
+                  <div className="mt-1 text-xs text-muted-foreground">
+                    {token.platform} · expires{" "}
+                    {new Date(token.expiresAt).toLocaleString()}
+                    {token.claimedAt
+                      ? ` · claimed by ${token.claimedByExternalUserName || token.claimedByExternalUserId}`
+                      : " · waiting to be claimed"}
+                  </div>
                 </div>
-                <div className="mt-1 text-xs text-muted-foreground">
-                  {token.platform} · expires{" "}
-                  {new Date(token.expiresAt).toLocaleString()}
-                  {token.claimedAt
-                    ? ` · claimed by ${token.claimedByExternalUserName || token.claimedByExternalUserId}`
-                    : " · waiting to be claimed"}
+              ))}
+              {(data?.tokens?.length || 0) === 0 && (
+                <div className="rounded-xl border border-dashed px-4 py-8 text-sm text-muted-foreground">
+                  No active link tokens.
                 </div>
-              </div>
-            ))}
-            {(data?.tokens?.length || 0) === 0 && (
-              <div className="rounded-xl border border-dashed px-4 py-8 text-sm text-muted-foreground">
-                No active link tokens.
-              </div>
-            )}
-          </div>
-        </section>
-      </div>
+              )}
+            </div>
+          </section>
+        </div>
+      )}
     </DispatchShell>
   );
 }

package/src/routes/pages/integrations.tsx

@@ -11,6 +11,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
 
+import { ActionQueryError } from "../../components/action-query-error";
 import { DispatchShell } from "../../components/dispatch-shell";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
@@ -319,14 +320,10 @@ function PerAppDetailRow({ app }: { app: CatalogApp }) {
 }
 
 export default function ConnectionsRoute() {
-  const { data: catalog, isLoading } = useActionQuery(
-    "list-integrations-catalog",
-    {},
-  );
-  const { data: accessSettings } = useActionQuery(
-    "get-vault-access-settings",
-    {},
-  );
+  const catalogQuery = useActionQuery("list-integrations-catalog", {});
+  const accessQuery = useActionQuery("get-vault-access-settings", {});
+  const { data: catalog, isLoading } = catalogQuery;
+  const { data: accessSettings } = accessQuery;
   const apps = (catalog as CatalogApp[]) || [];
   const accessMode =
     (accessSettings as any)?.mode === "manual" ? "manual" : "all-apps";
@@ -365,13 +362,23 @@ export default function ConnectionsRoute() {
       title="Connections"
       description="Connect services once. Apps that need them pick up the key automatically."
     >
-      {isLoading && services.length === 0 && (
+      {catalogQuery.isError || accessQuery.isError ? (
+        <ActionQueryError
+          error={catalogQuery.error ?? accessQuery.error}
+          onRetry={() => {
+            void catalogQuery.refetch();
+            void accessQuery.refetch();
+          }}
+        />
+      ) : null}
+
+      {!catalogQuery.isError && isLoading && services.length === 0 && (
         <div className="rounded-2xl border border-dashed px-6 py-12 text-center text-sm text-muted-foreground">
           Discovering apps and credentials…
         </div>
       )}
 
-      {!isLoading && services.length === 0 && (
+      {!catalogQuery.isError && !isLoading && services.length === 0 && (
         <div className="rounded-2xl border border-dashed px-6 py-12 text-center text-sm text-muted-foreground">
           No apps with declared integrations are reachable yet.
         </div>

package/src/routes/pages/metrics.tsx

@@ -643,7 +643,6 @@ export default function MetricsRoute() {
   const { data, isLoading, error } = useActionQuery(
     "list-dispatch-usage-metrics",
     { sinceDays },
-    { refetchInterval: 30_000 },
   );
   const metrics = data as DispatchUsageMetrics | undefined;
   const billing = metrics?.billing ?? USD_BILLING;

package/src/routes/pages/thread-debug.tsx

@@ -7,8 +7,8 @@ import {
 } from "@tabler/icons-react";
 import { useEffect, useMemo, useState } from "react";
 
+import { ActionQueryError } from "../../components/action-query-error";
 import { DispatchShell } from "../../components/dispatch-shell";
-import { Alert, AlertDescription, AlertTitle } from "../../components/ui/alert";
 import { Badge } from "../../components/ui/badge";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
@@ -430,7 +430,7 @@ export default function ThreadDebugRoute() {
     ownerEmail?: string;
   } | null>(null);
 
-  const { data: sourcesData, isLoading: sourcesLoading } = useActionQuery<{
+  const sourcesQuery = useActionQuery<{
     access: {
       viewerEmail: string;
       orgId: string | null;
@@ -441,6 +441,7 @@ export default function ThreadDebugRoute() {
     };
     sources: ThreadDebugSource[];
   }>("list-agent-thread-sources", {});
+  const { data: sourcesData, isLoading: sourcesLoading } = sourcesQuery;
 
   const sources: ThreadDebugSource[] = sourcesData?.sources ?? [];
   const searchParams = useMemo(
@@ -480,6 +481,7 @@ export default function ThreadDebugRoute() {
     data: detail,
     isLoading: detailLoading,
     error: detailError,
+    refetch: refetchDetail,
   } = useActionQuery<ThreadDebugResponse>(
     "get-agent-thread-debug",
     detailParams,
@@ -515,6 +517,12 @@ export default function ThreadDebugRoute() {
       description="Inspect persisted agent chat threads, run events, and AI internals."
     >
       <div className="space-y-4">
+        {sourcesQuery.isError ? (
+          <ActionQueryError
+            error={sourcesQuery.error}
+            onRetry={() => void sourcesQuery.refetch()}
+          />
+        ) : null}
         <section className="rounded-lg border bg-card p-4">
           <div className="grid gap-3 lg:grid-cols-[220px_1fr_260px_auto]">
             <Select value={sourceId} onValueChange={setSourceId}>
@@ -600,10 +608,10 @@ export default function ThreadDebugRoute() {
         </section>
 
         {searchError ? (
-          <Alert variant="destructive">
-            <AlertTitle>Search failed</AlertTitle>
-            <AlertDescription>{String(searchError.message)}</AlertDescription>
-          </Alert>
+          <ActionQueryError
+            error={searchError}
+            onRetry={() => void refetchSearch()}
+          />
         ) : null}
 
         <div className="grid gap-4 xl:grid-cols-[380px_1fr]">
@@ -661,12 +669,10 @@ export default function ThreadDebugRoute() {
 
           <section className="min-w-0">
             {detailError ? (
-              <Alert variant="destructive">
-                <AlertTitle>Thread lookup failed</AlertTitle>
-                <AlertDescription>
-                  {String(detailError.message)}
-                </AlertDescription>
-              </Alert>
+              <ActionQueryError
+                error={detailError}
+                onRetry={() => void refetchDetail()}
+              />
             ) : null}
             {detailLoading ? (
               <div className="rounded-lg border bg-card p-4">

package/src/routes/pages/vault.tsx

@@ -14,6 +14,7 @@ import {
 import { useState } from "react";
 import { toast } from "sonner";
 
+import { ActionQueryError } from "../../components/action-query-error";
 import { DispatchShell } from "../../components/dispatch-shell";
 import {
   AlertDialog,
@@ -736,17 +737,16 @@ function RequestRow({ request }: { request: any }) {
 }
 
 export default function VaultRoute() {
-  const { data: secrets, isLoading: secretsLoading } = useActionQuery(
-    "list-vault-secrets",
-    {},
-  );
-  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 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 { data: secrets, isLoading: secretsLoading } = secretsQuery;
+  const { data: grants } = grantsQuery;
+  const { data: requests } = requestsQuery;
+  const { data: audit } = auditQuery;
+  const { data: accessSettings } = accessQuery;
   const accessMode: VaultAccessMode =
     (accessSettings as any)?.mode === "manual" ? "manual" : "all-apps";
 
@@ -788,6 +788,20 @@ export default function VaultRoute() {
         </TabsList>
 
         <TabsContent value="secrets" className="mt-4 space-y-3">
+          {secretsQuery.isError ||
+          grantsQuery.isError ||
+          accessQuery.isError ? (
+            <ActionQueryError
+              error={
+                secretsQuery.error ?? grantsQuery.error ?? accessQuery.error
+              }
+              onRetry={() => {
+                void secretsQuery.refetch();
+                void grantsQuery.refetch();
+                void accessQuery.refetch();
+              }}
+            />
+          ) : null}
           <VaultAccessSettingsCard mode={accessMode} />
 
           <div className="flex items-center justify-between">
@@ -804,7 +818,9 @@ export default function VaultRoute() {
             <AddSecretDialog />
           </div>
 
-          {secretsLoading && (secrets ?? []).length === 0
+          {!secretsQuery.isError &&
+          secretsLoading &&
+          (secrets ?? []).length === 0
             ? Array.from({ length: 3 }).map((_, index) => (
                 <div
                   key={index}
@@ -823,25 +839,36 @@ export default function VaultRoute() {
                 />
               ))}
 
-          {!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>
-          )}
+          {!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>
+            )}
         </TabsContent>
 
         <TabsContent value="requests" className="mt-4 space-y-3">
+          {requestsQuery.isError ? (
+            <ActionQueryError
+              error={requestsQuery.error}
+              onRetry={() => void requestsQuery.refetch()}
+            />
+          ) : null}
           {(requests || []).map((request: any) => (
             <RequestRow key={request.id} request={request} />
           ))}
-          {(requests?.length || 0) === 0 && (
+          {!requestsQuery.isError && (requests?.length || 0) === 0 && (
             <div className="rounded-2xl border border-dashed px-6 py-12 text-center text-sm text-muted-foreground">
               No secret requests yet.
             </div>
@@ -849,6 +876,12 @@ 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}
@@ -862,7 +895,7 @@ export default function VaultRoute() {
               </div>
             </div>
           ))}
-          {(audit?.length || 0) === 0 && (
+          {!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>

package/src/routes/pages/workspace.tsx

@@ -17,6 +17,7 @@ import {
 import { useEffect, useState, type ReactNode } from "react";
 import { toast } from "sonner";
 
+import { ActionQueryError } from "../../components/action-query-error";
 import { DispatchShell } from "../../components/dispatch-shell";
 import {
   AlertDialog,
@@ -1014,11 +1015,10 @@ function GlobalContextSection({ resources }: { resources: any[] }) {
 }
 
 export default function WorkspaceRoute() {
-  const { data: resources, isLoading } = useActionQuery(
-    "list-workspace-resources",
-    {},
-  );
-  const { data: grants } = useActionQuery("list-workspace-resource-grants", {});
+  const resourcesQuery = useActionQuery("list-workspace-resources", {});
+  const grantsQuery = useActionQuery("list-workspace-resource-grants", {});
+  const { data: resources, isLoading } = resourcesQuery;
+  const { data: grants } = grantsQuery;
 
   const grantsByResource = (grants || []).reduce(
     (acc: Record<string, any[]>, g: any) => {
@@ -1088,6 +1088,15 @@ export default function WorkspaceRoute() {
       title="Workspace Resources"
       description="Manage inherited workspace skills, guardrail instructions, agent profiles, reference resources, and MCP servers. All-app resources are available to every app without syncing."
     >
+      {resourcesQuery.isError || grantsQuery.isError ? (
+        <ActionQueryError
+          error={resourcesQuery.error ?? grantsQuery.error}
+          onRetry={() => {
+            void resourcesQuery.refetch();
+            void grantsQuery.refetch();
+          }}
+        />
+      ) : null}
       <div className="flex items-center justify-between">
         <div className="text-sm text-muted-foreground">
           {isLoading ? (
@@ -1101,62 +1110,67 @@ export default function WorkspaceRoute() {
         </div>
       </div>
 
-      <GlobalContextSection resources={resources || []} />
+      {!resourcesQuery.isError ? (
+        <GlobalContextSection resources={resources || []} />
+      ) : null}
 
-      <Tabs defaultValue="skills">
-        <TabsList>
-          <TabsTrigger value="skills">
-            Skills {skills.length > 0 && `(${skills.length})`}
-          </TabsTrigger>
-          <TabsTrigger value="instructions">
-            Instructions {instructions.length > 0 && `(${instructions.length})`}
-          </TabsTrigger>
-          <TabsTrigger value="agents">
-            Agents {agents.length > 0 && `(${agents.length})`}
-          </TabsTrigger>
-          <TabsTrigger value="knowledge">
-            Knowledge {knowledge.length > 0 && `(${knowledge.length})`}
-          </TabsTrigger>
-          <TabsTrigger value="mcp">
-            MCP {mcpServers.length > 0 && `(${mcpServers.length})`}
-          </TabsTrigger>
-        </TabsList>
+      {!resourcesQuery.isError && !grantsQuery.isError ? (
+        <Tabs defaultValue="skills">
+          <TabsList>
+            <TabsTrigger value="skills">
+              Skills {skills.length > 0 && `(${skills.length})`}
+            </TabsTrigger>
+            <TabsTrigger value="instructions">
+              Instructions{" "}
+              {instructions.length > 0 && `(${instructions.length})`}
+            </TabsTrigger>
+            <TabsTrigger value="agents">
+              Agents {agents.length > 0 && `(${agents.length})`}
+            </TabsTrigger>
+            <TabsTrigger value="knowledge">
+              Knowledge {knowledge.length > 0 && `(${knowledge.length})`}
+            </TabsTrigger>
+            <TabsTrigger value="mcp">
+              MCP {mcpServers.length > 0 && `(${mcpServers.length})`}
+            </TabsTrigger>
+          </TabsList>
 
-        <TabsContent value="skills" className="mt-4">
-          <ResourceList
-            items={skills}
-            emptyText="No workspace skills yet. Add a skill to share agent guidance across apps."
-          />
-        </TabsContent>
+          <TabsContent value="skills" className="mt-4">
+            <ResourceList
+              items={skills}
+              emptyText="No workspace skills yet. Add a skill to share agent guidance across apps."
+            />
+          </TabsContent>
 
-        <TabsContent value="instructions" className="mt-4">
-          <ResourceList
-            items={instructions}
-            emptyText="No workspace instructions yet. Add instructions to set behavioral rules across apps."
-          />
-        </TabsContent>
+          <TabsContent value="instructions" className="mt-4">
+            <ResourceList
+              items={instructions}
+              emptyText="No workspace instructions yet. Add instructions to set behavioral rules across apps."
+            />
+          </TabsContent>
 
-        <TabsContent value="agents" className="mt-4">
-          <ResourceList
-            items={agents}
-            emptyText="No workspace agents yet. Add a reusable agent profile to share specialist agents across apps."
-          />
-        </TabsContent>
+          <TabsContent value="agents" className="mt-4">
+            <ResourceList
+              items={agents}
+              emptyText="No workspace agents yet. Add a reusable agent profile to share specialist agents across apps."
+            />
+          </TabsContent>
 
-        <TabsContent value="knowledge" className="mt-4">
-          <ResourceList
-            items={knowledge}
-            emptyText="No knowledge packs yet. Add GTM, product, or domain context that apps can reuse."
-          />
-        </TabsContent>
+          <TabsContent value="knowledge" className="mt-4">
+            <ResourceList
+              items={knowledge}
+              emptyText="No knowledge packs yet. Add GTM, product, or domain context that apps can reuse."
+            />
+          </TabsContent>
 
-        <TabsContent value="mcp" className="mt-4">
-          <ResourceList
-            items={mcpServers}
-            emptyText="No workspace MCP servers yet. Add an HTTP MCP server to share external tools across apps."
-          />
-        </TabsContent>
-      </Tabs>
+          <TabsContent value="mcp" className="mt-4">
+            <ResourceList
+              items={mcpServers}
+              emptyText="No workspace MCP servers yet. Add an HTTP MCP server to share external tools across apps."
+            />
+          </TabsContent>
+        </Tabs>
+      ) : null}
     </DispatchShell>
   );
 }