@agent-native/dispatch 0.14.2 → 0.14.4

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" />

package/src/routes/pages/apps.tsx

@@ -25,6 +25,7 @@ import {
 import { useState } from "react";
 import { toast } from "sonner";
 
+import { ActionQueryError } from "../../components/action-query-error";
 import { CreateAppPopover } from "../../components/create-app-popover";
 import { DispatchShell } from "../../components/dispatch-shell";
 import { Button } from "../../components/ui/button";
@@ -75,20 +76,22 @@ export default function AppsRoute() {
   const t = useT();
   const [showHidden, setShowHidden] = useState(false);
   const [templatesOpen, setTemplatesOpen] = useState(false);
-  const { data: apps = [], isLoading: appsLoading } = useActionQuery(
-    "list-workspace-apps",
-    { includeAgentCards: false, includeArchived: true },
-  );
+  const appsQuery = useActionQuery("list-workspace-apps", {
+    includeAgentCards: false,
+    includeArchived: true,
+  });
+  const { data: apps = [], isLoading: appsLoading } = appsQuery;
   const { data: workspace } = useActionQuery(
     "get-workspace-info",
     {},
     { staleTime: 60_000 },
   );
-  const { data: templates = [], isLoading: templatesLoading } = useActionQuery(
+  const templatesQuery = useActionQuery(
     "list-available-workspace-templates",
     {},
     { refetchInterval: 5_000 },
   );
+  const { data: templates = [], isLoading: templatesLoading } = templatesQuery;
 
   const ws = workspace as WorkspaceInfo | undefined;
   const workspaceLabel = ws?.displayName ?? ws?.name ?? null;
@@ -152,7 +155,12 @@ export default function AppsRoute() {
             ) : null}
           </div>
 
-          {showAppSkeletons ? (
+          {appsQuery.isError ? (
+            <ActionQueryError
+              error={appsQuery.error}
+              onRetry={() => void appsQuery.refetch()}
+            />
+          ) : showAppSkeletons ? (
             <AppsSkeletonGrid />
           ) : visibleApps.length > 0 ? (
             <div className="grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3">
@@ -165,7 +173,12 @@ export default function AppsRoute() {
           )}
         </section>
 
-        {typedTemplates.length > 0 || templatesLoading ? (
+        {templatesQuery.isError ? (
+          <ActionQueryError
+            error={templatesQuery.error}
+            onRetry={() => void templatesQuery.refetch()}
+          />
+        ) : typedTemplates.length > 0 || templatesLoading ? (
           <Collapsible open={templatesOpen} onOpenChange={setTemplatesOpen}>
             <section className="space-y-3">
               <div className="flex flex-wrap items-center justify-between gap-3 border-t pt-4">

package/src/routes/pages/audit.tsx

@@ -1,5 +1,6 @@
 import { useActionQuery } from "@agent-native/core/client";
 
+import { ActionQueryError } from "../../components/action-query-error";
 import { DispatchShell } from "../../components/dispatch-shell";
 
 export function meta() {
@@ -7,7 +8,8 @@ export function meta() {
 }
 
 export default function AuditRoute() {
-  const { data } = useActionQuery("list-dispatch-audit", { limit: 100 });
+  const query = useActionQuery("list-dispatch-audit", { limit: 100 });
+  const { data } = query;
 
   return (
     <DispatchShell
@@ -15,27 +17,34 @@ export default function AuditRoute() {
       description="Change history for routes, settings, and approvals."
     >
       <section className="rounded-2xl border bg-card p-5">
-        <div className="space-y-3">
-          {(data || []).map((event: any) => (
-            <div
-              key={event.id}
-              className="rounded-xl border bg-muted/30 px-4 py-3"
-            >
-              <div className="text-sm font-medium text-foreground">
-                {event.summary}
+        {query.isError ? (
+          <ActionQueryError
+            error={query.error}
+            onRetry={() => void query.refetch()}
+          />
+        ) : (
+          <div className="space-y-3">
+            {(data || []).map((event: any) => (
+              <div
+                key={event.id}
+                className="rounded-xl border bg-muted/30 px-4 py-3"
+              >
+                <div className="text-sm font-medium text-foreground">
+                  {event.summary}
+                </div>
+                <div className="mt-1 text-xs text-muted-foreground">
+                  {event.actor} · {event.action} ·{" "}
+                  {new Date(event.createdAt).toLocaleString()}
+                </div>
               </div>
-              <div className="mt-1 text-xs text-muted-foreground">
-                {event.actor} · {event.action} ·{" "}
-                {new Date(event.createdAt).toLocaleString()}
+            ))}
+            {(data?.length || 0) === 0 && (
+              <div className="rounded-xl border border-dashed px-4 py-6 text-sm text-muted-foreground">
+                No audit entries yet.
               </div>
-            </div>
-          ))}
-          {(data?.length || 0) === 0 && (
-            <div className="rounded-xl border border-dashed px-4 py-6 text-sm text-muted-foreground">
-              No audit entries yet.
-            </div>
-          )}
-        </div>
+            )}
+          </div>
+        )}
       </section>
     </DispatchShell>
   );

package/src/routes/pages/chat.spec.tsx

@@ -0,0 +1,94 @@
+// @vitest-environment happy-dom
+import React, { act, type ReactNode } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { MemoryRouter } from "react-router";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import ChatRoute from "./chat";
+
+const clientState = vi.hoisted(() => ({
+  surfaceProps: null as Record<string, unknown> | null,
+}));
+
+vi.mock("@agent-native/core/client", () => ({
+  AgentChatSurface: (props: Record<string, unknown>) => {
+    clientState.surfaceProps = props;
+    return <>{props.composerSlot as ReactNode}</>;
+  },
+  appBasePath: () => "",
+  appPath: (path: string) => path,
+  isInBuilderFrame: () => false,
+  markAgentChatHomeHandoff: vi.fn(),
+  sendToAgentChat: vi.fn(),
+  useT: () => (key: string, values?: { defaultValue?: string }) =>
+    values?.defaultValue ?? key,
+}));
+
+describe("Dispatch ChatRoute", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    clientState.surfaceProps = null;
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  it("keeps the centered hero layout for a direct new Chat", async () => {
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/chat"]}>
+          <ChatRoute />
+        </MemoryRouter>,
+      );
+    });
+
+    expect(clientState.surfaceProps).toMatchObject({
+      mode: "page",
+      chatViewTransition: true,
+      centerComposerWhenEmpty: true,
+      composerLayoutVariant: "hero",
+      composerPlaceholder: "Ask Dispatch...",
+    });
+    expect(container.textContent).toContain("Chat across your apps");
+  });
+
+  it("starts bottom-pinned when an Overview prompt is transitioning in", async () => {
+    await act(async () => {
+      root.render(
+        <MemoryRouter
+          initialEntries={[
+            {
+              pathname: "/chat",
+              state: {
+                dispatchPrompt: {
+                  id: "overview-prompt",
+                  message: "Route this across my apps",
+                  selectedModel: "auto",
+                },
+              },
+            },
+          ]}
+        >
+          <ChatRoute />
+        </MemoryRouter>,
+      );
+    });
+
+    expect(clientState.surfaceProps).not.toHaveProperty(
+      "centerComposerWhenEmpty",
+    );
+    expect(clientState.surfaceProps).not.toHaveProperty(
+      "composerLayoutVariant",
+    );
+    expect(container.textContent).not.toContain("Chat across your apps");
+  });
+});

package/src/routes/pages/chat.tsx

@@ -3,6 +3,7 @@ import {
   appBasePath,
   appPath,
   markAgentChatHomeHandoff,
+  useT,
 } from "@agent-native/core/client";
 import {
   useCallback,
@@ -86,6 +87,7 @@ export function meta() {
 }
 
 export default function ChatRoute() {
+  const t = useT();
   const location = useLocation();
   const navigate = useNavigate();
   const routeThreadId = threadIdFromPath(location.pathname);
@@ -175,18 +177,36 @@ export default function ChatRoute() {
         showTabBar={false}
         dynamicSuggestions={false}
         suggestions={[]}
-        emptyStateText="Ask Dispatch to create apps, route work, or manage the workspace."
+        emptyStateText={t("dispatch.pages.chatAcrossAppsDescription", {
+          defaultValue:
+            "Route work, inspect status, or create something new from one place.",
+        })}
         emptyStateDisplay="hidden"
-        centerComposerWhenEmpty
-        composerLayoutVariant="hero"
-        composerPlaceholder="Ask Dispatch..."
+        {...(!prompt?.message
+          ? {
+              centerComposerWhenEmpty: true,
+              composerLayoutVariant: "hero" as const,
+            }
+          : {})}
+        composerPlaceholder={t("dispatch.pages.chatPromptPlaceholder", {
+          defaultValue: "Ask Dispatch...",
+        })}
         composerSlot={
-          <div className="dispatch-chat-intro">
-            <h1>What should Dispatch do next?</h1>
-            <p>
-              Create apps, manage shared keys, and route work across agents.
-            </p>
-          </div>
+          !prompt?.message ? (
+            <div className="dispatch-chat-intro">
+              <h1>
+                {t("dispatch.pages.chatAcrossApps", {
+                  defaultValue: "Chat across your apps",
+                })}
+              </h1>
+              <p>
+                {t("dispatch.pages.chatAcrossAppsDescription", {
+                  defaultValue:
+                    "Route work, inspect status, or create something new from one place.",
+                })}
+              </p>
+            </div>
+          ) : null
         }
       />
     </div>