@agent-native/dispatch 0.14.3 → 0.14.5

package/src/components/workspace-app-card.tsx

@@ -1,6 +1,5 @@
 import { useActionMutation, useActionQuery } from "@agent-native/core/client";
 import {
-  IconArrowUpRight,
   IconChevronDown,
   IconChevronRight,
   IconClockHour4,
@@ -21,6 +20,7 @@ import {
   workspaceAppHref,
   type WorkspaceAppSummary,
 } from "../lib/workspace-apps";
+import { ActionQueryError } from "./action-query-error";
 import { AppKeysPopover } from "./app-keys-popover";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
@@ -45,6 +45,9 @@ import { Textarea } from "./ui/textarea";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 import { AppResourceEffectiveStack } from "./workspace-resource-effective-stack";
 
+const APP_CARD_ACTION_CLASS =
+  "size-7 rounded-md p-0 text-muted-foreground transition-[background-color,color] hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring data-[state=open]:bg-accent data-[state=open]:text-foreground";
+
 export function WorkspaceAppCard({
   app,
   className,
@@ -121,7 +124,7 @@ export function WorkspaceAppCard({
     <div
       aria-disabled={!href}
       className={cn(
-        "group relative rounded-lg border bg-card p-4 transition hover:border-foreground/30 aria-disabled:opacity-60",
+        "group relative rounded-xl border border-border/60 bg-card/40 p-4 transition-[background-color,border-color] hover:border-foreground/20 hover:bg-accent/15 focus-within:border-foreground/20 focus-within:bg-accent/15 aria-disabled:opacity-60",
         isArchived && "opacity-70",
         className,
       )}
@@ -132,7 +135,7 @@ export function WorkspaceAppCard({
           target={openInNewTab ? "_blank" : undefined}
           rel={openInNewTab ? "noreferrer" : undefined}
           aria-label={`Open ${app.name}`}
-          className="absolute inset-0 z-0 rounded-lg"
+          className="absolute inset-0 z-0 rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
         />
       ) : null}
 
@@ -164,7 +167,7 @@ export function WorkspaceAppCard({
               </Badge>
             ) : null}
           </div>
-          <p className="mt-1 truncate font-mono text-xs text-muted-foreground">
+          <p className="mt-1 truncate font-mono text-[11px] text-muted-foreground">
             {app.path}
           </p>
           {isPending && app.branchName ? (
@@ -173,7 +176,7 @@ export function WorkspaceAppCard({
             </p>
           ) : null}
           {app.description ? (
-            <p className="mt-2 line-clamp-2 text-xs leading-relaxed text-muted-foreground">
+            <p className="mt-2 min-h-10 line-clamp-2 text-[13px] leading-5 text-muted-foreground">
               {app.description}
             </p>
           ) : null}
@@ -191,16 +194,24 @@ export function WorkspaceAppCard({
           ) : null}
           <div className="pointer-events-auto">
             <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <button
-                  type="button"
-                  aria-label={`More actions for ${app.name}`}
-                  className="inline-flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-muted-foreground opacity-0 transition hover:bg-accent hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100 data-[state=open]:opacity-100"
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <IconDots size={15} />
-                </button>
-              </DropdownMenuTrigger>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <DropdownMenuTrigger asChild>
+                    <button
+                      type="button"
+                      aria-label={`More actions for ${app.name}`}
+                      className={cn(
+                        APP_CARD_ACTION_CLASS,
+                        "inline-flex cursor-pointer items-center justify-center",
+                      )}
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <IconDots size={15} />
+                    </button>
+                  </DropdownMenuTrigger>
+                </TooltipTrigger>
+                <TooltipContent>More actions</TooltipContent>
+              </Tooltip>
               <DropdownMenuContent align="end" className="w-44">
                 <DropdownMenuItem
                   onSelect={(event) => {
@@ -233,12 +244,6 @@ export function WorkspaceAppCard({
               </DropdownMenuContent>
             </DropdownMenu>
           </div>
-          {href && !isArchived ? (
-            <IconArrowUpRight
-              size={16}
-              className="text-muted-foreground transition group-hover:text-foreground"
-            />
-          ) : null}
         </div>
       </div>
       <Dialog open={editOpen} onOpenChange={setEditOpen}>
@@ -290,11 +295,12 @@ function AppResourcesDialog({ app }: { app: WorkspaceAppSummary }) {
   const [inspectedResourceId, setInspectedResourceId] = useState<string | null>(
     null,
   );
-  const { data, isLoading } = useActionQuery(
+  const query = useActionQuery(
     "list-workspace-resources-for-app",
     { appId: app.id },
     { enabled: open },
   );
+  const { data, isLoading } = query;
 
   const resources = ((data as any)?.resources ?? []) as any[];
   const counts = (data as any)?.counts;
@@ -315,14 +321,14 @@ function AppResourcesDialog({ app }: { app: WorkspaceAppSummary }) {
               variant="ghost"
               size="sm"
               aria-label={`View context resources for ${app.name}`}
-              className="h-7 w-7 p-0"
+              className={APP_CARD_ACTION_CLASS}
               onClick={(e) => e.stopPropagation()}
             >
               <IconFileText size={14} />
             </Button>
           </DialogTrigger>
         </TooltipTrigger>
-        <TooltipContent>Context</TooltipContent>
+        <TooltipContent>View context</TooltipContent>
       </Tooltip>
       <DialogContent className="max-w-2xl">
         <DialogHeader>
@@ -349,7 +355,12 @@ function AppResourcesDialog({ app }: { app: WorkspaceAppSummary }) {
             </Badge>
           </div>
 
-          {isLoading ? (
+          {query.isError ? (
+            <ActionQueryError
+              error={query.error}
+              onRetry={() => void query.refetch()}
+            />
+          ) : isLoading ? (
             <div className="space-y-2">
               <div className="h-14 rounded-lg border bg-muted/30" />
               <div className="h-14 rounded-lg border bg-muted/30" />

package/src/components/workspace-resource-effective-stack.tsx

@@ -1,6 +1,7 @@
 import { useActionQuery } from "@agent-native/core/client";
 
 import { cn } from "../lib/utils";
+import { ActionQueryError } from "./action-query-error";
 import { Badge } from "./ui/badge";
 
 export function appAvailabilityLabel(value?: string) {
@@ -54,11 +55,12 @@ export function AppResourceEffectiveStack({
   appId: string;
   resource: any;
 }) {
-  const { data: context, isLoading } = useActionQuery(
+  const query = useActionQuery(
     "get-workspace-resource-effective-context",
     { resourceId: resource.id, appId },
     { enabled: !!resource.id },
   );
+  const { data: context, isLoading } = query;
   const layers = ((context as any)?.layers ?? []) as any[];
   const active = (context as any)?.effectiveResource;
   const availability = (context as any)?.availability;
@@ -76,6 +78,16 @@ export function AppResourceEffectiveStack({
     );
   }
 
+  if (query.isError) {
+    return (
+      <ActionQueryError
+        className="mt-3"
+        error={query.error}
+        onRetry={() => void query.refetch()}
+      />
+    );
+  }
+
   return (
     <div className="mt-3 rounded-lg border bg-muted/20 p-3">
       <div className="flex flex-wrap items-start justify-between gap-2">

package/src/components/workspace-resource-impact-preview.tsx

@@ -1,5 +1,6 @@
 import { useActionQuery } from "@agent-native/core/client";
 
+import { ActionQueryError } from "./action-query-error";
 import { Badge } from "./ui/badge";
 import { Skeleton } from "./ui/skeleton";
 import { formatResourceTimestamp } from "./workspace-resource-effective-stack";
@@ -32,7 +33,7 @@ export function ImpactPreview({
   scope?: "all" | "selected";
   enabled?: boolean;
 }) {
-  const { data: impact, isLoading } = useActionQuery(
+  const query = useActionQuery(
     "preview-workspace-resource-change",
     {
       operation,
@@ -42,6 +43,7 @@ export function ImpactPreview({
     },
     { enabled: enabled && Boolean(resourceId || path) },
   );
+  const { data: impact, isLoading } = query;
 
   if (!enabled || (!resourceId && !path)) return null;
 
@@ -54,6 +56,15 @@ export function ImpactPreview({
     );
   }
 
+  if (query.isError) {
+    return (
+      <ActionQueryError
+        error={query.error}
+        onRetry={() => void query.refetch()}
+      />
+    );
+  }
+
   const data = impact as any;
   if (!data) return null;
   const affectsAllApps = data.affectsAllApps === true;

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

@@ -14,6 +14,7 @@ import {
   type LoaderFunctionArgs,
 } from "react-router";
 
+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";
@@ -96,9 +97,10 @@ export async function clientLoader({
 export default function WorkspaceAppCatchAllRoute() {
   const t = useT();
   const { appId } = useParams();
-  const { data: apps = [], isLoading } = useActionQuery("list-workspace-apps", {
+  const appsQuery = useActionQuery("list-workspace-apps", {
     includeAgentCards: false,
   });
+  const { data: apps = [], isLoading } = appsQuery;
   const app = useMemo(
     () =>
       (apps as WorkspaceAppSummary[]).find((item) => item.id === appId) ?? null,
@@ -117,6 +119,20 @@ export default function WorkspaceAppCatchAllRoute() {
     return <Navigate to={appPath("/overview")} replace />;
   }
 
+  if (appsQuery.isError) {
+    return (
+      <DispatchShell
+        title={t("dispatch.pages.dataLoadFailed")}
+        description={t("dispatch.pages.pageNotFoundDescription")}
+      >
+        <ActionQueryError
+          error={appsQuery.error}
+          onRetry={() => void appsQuery.refetch()}
+        />
+      </DispatchShell>
+    );
+  }
+
   if ((isLoading && !app) || (app && app.status !== "pending" && href)) {
     return (
       <div className="flex h-screen w-full items-center justify-center">

package/src/routes/pages/agents.tsx

@@ -8,6 +8,7 @@ import { IconCheck, IconCopy, IconPlugConnected } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
 
+import { ActionQueryError } from "../../components/action-query-error";
 import {
   AgentsPanel,
   type ConnectedAgent,
@@ -45,7 +46,10 @@ function dispatchMcpUrl(): string {
 
 function DispatchMcpAccessPanel() {
   const t = useT();
-  const { data, isLoading } = useActionQuery("list-mcp-app-access", {});
+  const { data, isLoading, isError, error, refetch } = useActionQuery(
+    "list-mcp-app-access",
+    {},
+  );
   const [optimistic, setOptimistic] = useState<McpAccessState | null>(null);
   const saveAccess = useActionMutation("set-mcp-app-access", {
     onSuccess: () => {
@@ -78,10 +82,6 @@ function DispatchMcpAccessPanel() {
   const mcpUrl = dispatchMcpUrl();
 
   function persist(next: McpAccessState) {
-    if (next.mode === "selected-apps" && next.selectedAppIds.length === 0) {
-      toast.error(t("dispatch.pages.selectAppForMcp"));
-      return;
-    }
     setOptimistic(next);
     saveAccess.mutate(next);
   }
@@ -153,7 +153,13 @@ function DispatchMcpAccessPanel() {
         </Button>
       </div>
 
-      {access.mode === "selected-apps" ? (
+      {isError ? (
+        <ActionQueryError
+          className="mt-4"
+          error={error}
+          onRetry={() => void refetch()}
+        />
+      ) : access.mode === "selected-apps" ? (
         <div className="mt-4 grid gap-2 sm:grid-cols-2 xl:grid-cols-3">
           {apps.map((app) => {
             const isSelected = selected.has(app.id);
@@ -197,7 +203,7 @@ function DispatchMcpAccessPanel() {
 
 export default function AgentsRoute() {
   const t = useT();
-  const { data, refetch } = useActionQuery("list-connected-agents", {});
+  const agentsQuery = useActionQuery("list-connected-agents", {});
 
   return (
     <DispatchShell
@@ -206,10 +212,17 @@ export default function AgentsRoute() {
     >
       <div className="space-y-4">
         <DispatchMcpAccessPanel />
-        <AgentsPanel
-          agents={(data || []) as ConnectedAgent[]}
-          onRefresh={refetch}
-        />
+        {agentsQuery.isError ? (
+          <ActionQueryError
+            error={agentsQuery.error}
+            onRetry={() => void agentsQuery.refetch()}
+          />
+        ) : (
+          <AgentsPanel
+            agents={(agentsQuery.data || []) as ConnectedAgent[]}
+            onRefresh={agentsQuery.refetch}
+          />
+        )}
       </div>
     </DispatchShell>
   );

package/src/routes/pages/approval.tsx

@@ -16,6 +16,7 @@ import {
 import { useSearchParams } from "react-router";
 import { toast } from "sonner";
 
+import { ActionQueryError } from "../../components/action-query-error";
 import {
   ApprovalValueBlock,
   parseApprovalValue,
@@ -66,10 +67,8 @@ export default function ApprovalPreviewRoute() {
   const [searchParams] = useSearchParams();
   const id = searchParams.get("id") ?? "";
 
-  const { data: approvals, isLoading } = useActionQuery(
-    "list-dispatch-approvals",
-    {},
-  );
+  const approvalsQuery = useActionQuery("list-dispatch-approvals", {});
+  const { data: approvals, isLoading } = approvalsQuery;
 
   const approve = useActionMutation("approve-dispatch-change", {
     onSuccess: () => toast.success("Change approved"),
@@ -141,6 +140,19 @@ export default function ApprovalPreviewRoute() {
     );
   }
 
+  if (approvalsQuery.isError) {
+    return (
+      <div className="flex min-h-screen items-start justify-center bg-background p-6">
+        <div className="w-full max-w-md">
+          <ActionQueryError
+            error={approvalsQuery.error}
+            onRetry={() => void approvalsQuery.refetch()}
+          />
+        </div>
+      </div>
+    );
+  }
+
   if (!approval) {
     return (
       <div className="flex min-h-screen items-center justify-center bg-background p-6">

package/src/routes/pages/approvals.tsx

@@ -3,6 +3,7 @@ import { useOrg } from "@agent-native/core/client/org";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
 
+import { ActionQueryError } from "../../components/action-query-error";
 import { DispatchShell } from "../../components/dispatch-shell";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
@@ -13,8 +14,10 @@ export function meta() {
 }
 
 export default function ApprovalsRoute() {
-  const { data: settings } = useActionQuery("get-dispatch-settings", {});
-  const { data: approvals } = useActionQuery("list-dispatch-approvals", {});
+  const settingsQuery = useActionQuery("get-dispatch-settings", {});
+  const approvalsQuery = useActionQuery("list-dispatch-approvals", {});
+  const { data: settings } = settingsQuery;
+  const { data: approvals } = approvalsQuery;
   const { data: org } = useOrg();
   const hasOrg = !!org?.orgId;
   const [emails, setEmails] = useState("");
@@ -51,106 +54,122 @@ export default function ApprovalsRoute() {
           <h2 className="text-lg font-semibold text-foreground">
             Approval policy
           </h2>
-          <div className="mt-4 space-y-4">
-            <label className="flex items-center justify-between rounded-xl border px-4 py-3">
-              <div>
-                <div className="text-sm font-medium text-foreground">
-                  Require approval for durable changes
+          {settingsQuery.isError ? (
+            <ActionQueryError
+              className="mt-4"
+              error={settingsQuery.error}
+              onRetry={() => void settingsQuery.refetch()}
+            />
+          ) : (
+            <div className="mt-4 space-y-4">
+              <label className="flex items-center justify-between rounded-xl border px-4 py-3">
+                <div>
+                  <div className="text-sm font-medium text-foreground">
+                    Require approval for durable changes
+                  </div>
+                  <div className="mt-1 text-xs text-muted-foreground">
+                    {hasOrg
+                      ? "Applies to saved destinations, shared dream proposals, All-app workspace resources, and dispatch settings."
+                      : "Requires a team workspace. Set one up on the Team page."}
+                  </div>
                 </div>
-                <div className="mt-1 text-xs text-muted-foreground">
-                  {hasOrg
-                    ? "Applies to saved destinations, shared dream proposals, All-app workspace resources, and dispatch settings."
-                    : "Requires a team workspace. Set one up on the Team page."}
+                <Switch
+                  checked={settings?.enabled || false}
+                  disabled={!hasOrg || savePolicy.isPending}
+                  onCheckedChange={(checked) =>
+                    savePolicy.mutate({
+                      enabled: checked,
+                      approverEmails: settings?.approverEmails || approverList,
+                    })
+                  }
+                />
+              </label>
+              <div className="space-y-2">
+                <div className="text-sm font-medium text-foreground">
+                  Approver emails
                 </div>
+                <Input
+                  value={emails}
+                  onChange={(event) => setEmails(event.target.value)}
+                  placeholder={(settings?.approverEmails || []).join(", ")}
+                  disabled={!hasOrg}
+                />
+                <Button
+                  className="w-full"
+                  variant="outline"
+                  disabled={!hasOrg || savePolicy.isPending}
+                  onClick={() =>
+                    savePolicy.mutate({
+                      enabled: settings?.enabled || false,
+                      approverEmails: approverList,
+                    })
+                  }
+                >
+                  Save approvers
+                </Button>
               </div>
-              <Switch
-                checked={settings?.enabled || false}
-                disabled={!hasOrg || savePolicy.isPending}
-                onCheckedChange={(checked) =>
-                  savePolicy.mutate({
-                    enabled: checked,
-                    approverEmails: settings?.approverEmails || approverList,
-                  })
-                }
-              />
-            </label>
-            <div className="space-y-2">
-              <div className="text-sm font-medium text-foreground">
-                Approver emails
-              </div>
-              <Input
-                value={emails}
-                onChange={(event) => setEmails(event.target.value)}
-                placeholder={(settings?.approverEmails || []).join(", ")}
-                disabled={!hasOrg}
-              />
-              <Button
-                className="w-full"
-                variant="outline"
-                disabled={!hasOrg || savePolicy.isPending}
-                onClick={() =>
-                  savePolicy.mutate({
-                    enabled: settings?.enabled || false,
-                    approverEmails: approverList,
-                  })
-                }
-              >
-                Save approvers
-              </Button>
             </div>
-          </div>
+          )}
         </section>
 
         <section className="rounded-2xl border bg-card p-5">
           <h2 className="text-lg font-semibold text-foreground">
             Pending and recent requests
           </h2>
-          <div className="mt-4 space-y-3">
-            {(approvals || []).map((approval: any) => (
-              <div
-                key={approval.id}
-                className="rounded-xl border bg-muted/30 px-4 py-3"
-              >
-                <div className="flex items-start justify-between gap-3">
-                  <div>
-                    <div className="text-sm font-medium text-foreground">
-                      {approval.summary}
-                    </div>
-                    <div className="mt-1 text-xs text-muted-foreground">
-                      {approval.status} · requested by {approval.requestedBy}
+          {approvalsQuery.isError ? (
+            <ActionQueryError
+              className="mt-4"
+              error={approvalsQuery.error}
+              onRetry={() => void approvalsQuery.refetch()}
+            />
+          ) : (
+            <div className="mt-4 space-y-3">
+              {(approvals || []).map((approval: any) => (
+                <div
+                  key={approval.id}
+                  className="rounded-xl border bg-muted/30 px-4 py-3"
+                >
+                  <div className="flex items-start justify-between gap-3">
+                    <div>
+                      <div className="text-sm font-medium text-foreground">
+                        {approval.summary}
+                      </div>
+                      <div className="mt-1 text-xs text-muted-foreground">
+                        {approval.status} · requested by {approval.requestedBy}
+                      </div>
                     </div>
+                    {approval.status === "pending" && (
+                      <div className="flex gap-2">
+                        <Button
+                          size="sm"
+                          onClick={() => approve.mutate({ id: approval.id })}
+                        >
+                          Approve
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() =>
+                            reject.mutate({
+                              id: approval.id,
+                              reason: "Rejected in dispatch UI",
+                            })
+                          }
+                        >
+                          Reject
+                        </Button>
+                      </div>
+                    )}
                   </div>
-                  {approval.status === "pending" && (
-                    <div className="flex gap-2">
-                      <Button
-                        size="sm"
-                        onClick={() => approve.mutate({ id: approval.id })}
-                      >
-                        Approve
-                      </Button>
-                      <Button
-                        size="sm"
-                        variant="outline"
-                        onClick={() =>
-                          reject.mutate({
-                            id: approval.id,
-                            reason: "Rejected in dispatch UI",
-                          })
-                        }
-                      >
-                        Reject
-                      </Button>
-                    </div>
-                  )}
                 </div>
-              </div>
-            ))}
-            {(approvals?.length || 0) === 0 && (
-              <div className="rounded-xl border border-dashed px-4 py-8 text-sm text-muted-foreground">
-                No approval requests yet.
-              </div>
-            )}
-          </div>
+              ))}
+              {(approvals?.length || 0) === 0 && (
+                <div className="rounded-xl border border-dashed px-4 py-8 text-sm text-muted-foreground">
+                  No approval requests yet.
+                </div>
+              )}
+            </div>
+          )}
         </section>
       </div>
     </DispatchShell>

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

@@ -7,6 +7,7 @@ import {
 import { useEffect, useMemo } from "react";
 import { Link, useParams } from "react-router";
 
+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";
@@ -23,9 +24,10 @@ export function meta() {
 export default function WorkspaceAppRoute() {
   const t = useT();
   const { appId } = useParams();
-  const { data: apps = [], isLoading } = useActionQuery("list-workspace-apps", {
+  const appsQuery = useActionQuery("list-workspace-apps", {
     includeAgentCards: false,
   });
+  const { data: apps = [], isLoading } = appsQuery;
   const app = useMemo(
     () =>
       (apps as WorkspaceAppSummary[]).find((item) => item.id === appId) ?? null,
@@ -51,7 +53,12 @@ export default function WorkspaceAppRoute() {
           </Link>
         </Button>
 
-        {isLoading && !app ? (
+        {appsQuery.isError ? (
+          <ActionQueryError
+            error={appsQuery.error}
+            onRetry={() => void appsQuery.refetch()}
+          />
+        ) : isLoading && !app ? (
           <div className="space-y-3">
             <Skeleton className="h-5 w-48" />
             <Skeleton className="h-4 w-full" />