@agent-native/dispatch 0.14.2 → 0.14.4

package/src/routes/pages/destinations.tsx

@@ -6,6 +6,7 @@ import {
 import { useState } from "react";
 import { toast } from "sonner";
 
+import { ActionQueryError } from "../../components/action-query-error";
 import { DispatchShell } from "../../components/dispatch-shell";
 import { TaskQueueHealth } from "../../components/task-queue-health";
 import {
@@ -78,7 +79,8 @@ function QuickSendRow({
 
 export default function DestinationsRoute() {
   const t = useT();
-  const { data } = useActionQuery("list-destinations", {});
+  const destinationsQuery = useActionQuery("list-destinations", {});
+  const { data } = destinationsQuery;
   const [form, setForm] = useState({
     name: "",
     platform: "slack",
@@ -115,70 +117,81 @@ export default function DestinationsRoute() {
             <h2 className="text-lg font-semibold text-foreground">
               {t("dispatch.pages.savedDestinations")}
             </h2>
-            <div className="mt-4 space-y-3">
-              {(data || []).map((destination: any) => (
-                <div
-                  key={destination.id}
-                  className="rounded-xl border bg-muted/30 p-4"
-                >
-                  <div className="flex items-start justify-between gap-3">
-                    <div>
-                      <div className="text-sm font-medium text-foreground">
-                        {destination.name}
-                      </div>
-                      <div className="mt-1 text-xs text-muted-foreground">
-                        {destination.platform} · {destination.destination}
-                        {destination.threadRef
-                          ? ` · thread ${destination.threadRef}`
-                          : ""}
+            {destinationsQuery.isError ? (
+              <ActionQueryError
+                className="mt-4"
+                error={destinationsQuery.error}
+                onRetry={() => void destinationsQuery.refetch()}
+              />
+            ) : (
+              <div className="mt-4 space-y-3">
+                {(data || []).map((destination: any) => (
+                  <div
+                    key={destination.id}
+                    className="rounded-xl border bg-muted/30 p-4"
+                  >
+                    <div className="flex items-start justify-between gap-3">
+                      <div>
+                        <div className="text-sm font-medium text-foreground">
+                          {destination.name}
+                        </div>
+                        <div className="mt-1 text-xs text-muted-foreground">
+                          {destination.platform} · {destination.destination}
+                          {destination.threadRef
+                            ? ` · thread ${destination.threadRef}`
+                            : ""}
+                        </div>
+                        {destination.notes && (
+                          <p className="mt-2 text-sm text-muted-foreground">
+                            {destination.notes}
+                          </p>
+                        )}
                       </div>
-                      {destination.notes && (
-                        <p className="mt-2 text-sm text-muted-foreground">
-                          {destination.notes}
-                        </p>
-                      )}
-                    </div>
-                    <AlertDialog>
-                      <AlertDialogTrigger asChild>
-                        <Button variant="outline" size="sm">
-                          {t("dispatch.pages.delete")}
-                        </Button>
-                      </AlertDialogTrigger>
-                      <AlertDialogContent>
-                        <AlertDialogHeader>
-                          <AlertDialogTitle>
-                            {t("dispatch.pages.deleteDestinationTitle")}
-                          </AlertDialogTitle>
-                          <AlertDialogDescription>
-                            {t("dispatch.pages.deleteDestinationDescription", {
-                              name: destination.name,
-                            })}
-                          </AlertDialogDescription>
-                        </AlertDialogHeader>
-                        <AlertDialogFooter>
-                          <AlertDialogCancel>
-                            {t("dispatch.pages.cancel")}
-                          </AlertDialogCancel>
-                          <AlertDialogAction
-                            onClick={() =>
-                              remove.mutate({ id: destination.id })
-                            }
-                          >
+                      <AlertDialog>
+                        <AlertDialogTrigger asChild>
+                          <Button variant="outline" size="sm">
                             {t("dispatch.pages.delete")}
-                          </AlertDialogAction>
-                        </AlertDialogFooter>
-                      </AlertDialogContent>
-                    </AlertDialog>
+                          </Button>
+                        </AlertDialogTrigger>
+                        <AlertDialogContent>
+                          <AlertDialogHeader>
+                            <AlertDialogTitle>
+                              {t("dispatch.pages.deleteDestinationTitle")}
+                            </AlertDialogTitle>
+                            <AlertDialogDescription>
+                              {t(
+                                "dispatch.pages.deleteDestinationDescription",
+                                {
+                                  name: destination.name,
+                                },
+                              )}
+                            </AlertDialogDescription>
+                          </AlertDialogHeader>
+                          <AlertDialogFooter>
+                            <AlertDialogCancel>
+                              {t("dispatch.pages.cancel")}
+                            </AlertDialogCancel>
+                            <AlertDialogAction
+                              onClick={() =>
+                                remove.mutate({ id: destination.id })
+                              }
+                            >
+                              {t("dispatch.pages.delete")}
+                            </AlertDialogAction>
+                          </AlertDialogFooter>
+                        </AlertDialogContent>
+                      </AlertDialog>
+                    </div>
+                    <QuickSendRow destination={destination} />
                   </div>
-                  <QuickSendRow destination={destination} />
-                </div>
-              ))}
-              {(data?.length || 0) === 0 && (
-                <div className="rounded-xl border border-dashed px-4 py-8 text-sm text-muted-foreground">
-                  {t("dispatch.pages.noDestinations")}
-                </div>
-              )}
-            </div>
+                ))}
+                {(data?.length || 0) === 0 && (
+                  <div className="rounded-xl border border-dashed px-4 py-8 text-sm text-muted-foreground">
+                    {t("dispatch.pages.noDestinations")}
+                  </div>
+                )}
+              </div>
+            )}
           </section>
 
           <section className="rounded-2xl border bg-card p-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/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>