@agent-native/dispatch 0.14.3 → 0.14.4

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>

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>
   );
 }