@agent-native/dispatch 0.14.3 → 0.14.5

package/src/routes/pages/apps.tsx

@@ -1,30 +1,13 @@
-import {
-  useActionMutation,
-  useActionQuery,
-  useT,
-} from "@agent-native/core/client";
+import { useActionQuery, useT } from "@agent-native/core/client";
 import {
   IconApps,
-  IconBrain,
-  IconBrush,
-  IconCalendarMonth,
-  IconChartBar,
   IconChevronDown,
-  IconClipboardList,
   IconEyeOff,
-  IconFileText,
-  IconLoader2,
-  IconMail,
-  IconPhoto,
   IconPlus,
-  IconPresentation,
-  IconScreenShare,
-  IconSparkles,
-  IconStack3,
 } from "@tabler/icons-react";
 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";
@@ -48,48 +31,19 @@ interface WorkspaceInfo {
   appCount: number;
 }
 
-interface AvailableTemplate {
-  name: string;
-  label: string;
-  hint: string;
-  icon: string;
-  color: string;
-  colorRgb: string;
-  core: boolean;
-}
-
-const TEMPLATE_ICONS: Record<string, typeof IconMail> = {
-  Mail: IconMail,
-  CalendarMonth: IconCalendarMonth,
-  FileText: IconFileText,
-  Presentation: IconPresentation,
-  ScreenShare: IconScreenShare,
-  Brain: IconBrain,
-  Photo: IconPhoto,
-  ChartBar: IconChartBar,
-  ClipboardList: IconClipboardList,
-  Brush: IconBrush,
-};
-
 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(
-    "list-available-workspace-templates",
-    {},
-    { refetchInterval: 5_000 },
-  );
-
   const ws = workspace as WorkspaceInfo | undefined;
   const workspaceLabel = ws?.displayName ?? ws?.name ?? null;
   const allApps = (apps as WorkspaceAppSummary[]).filter(
@@ -97,7 +51,6 @@ export default function AppsRoute() {
   );
   const visibleApps = allApps.filter((app) => !app.archived);
   const archivedApps = allApps.filter((app) => app.archived);
-  const typedTemplates = templates as AvailableTemplate[];
   const showAppSkeletons = appsLoading && allApps.length === 0;
 
   return (
@@ -152,7 +105,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,66 +123,6 @@ export default function AppsRoute() {
           )}
         </section>
 
-        {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">
-                <div className="flex min-w-0 items-center gap-2">
-                  <IconStack3
-                    size={16}
-                    className="shrink-0 text-muted-foreground"
-                  />
-                  <div className="min-w-0">
-                    <h2 className="text-sm font-semibold text-foreground">
-                      {t("dispatch.pages.templates")}
-                    </h2>
-                    <p className="text-xs text-muted-foreground">
-                      {templatesLoading
-                        ? t("dispatch.pages.checkingTemplates")
-                        : t("dispatch.pages.templatesAvailable", {
-                            count: typedTemplates.length,
-                          })}
-                    </p>
-                  </div>
-                </div>
-                <CollapsibleTrigger asChild>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    className="gap-1.5"
-                  >
-                    {templatesOpen
-                      ? t("dispatch.pages.hide")
-                      : t("dispatch.pages.show")}
-                    <IconChevronDown
-                      size={14}
-                      className={cn(
-                        "transition-transform",
-                        templatesOpen && "rotate-180",
-                      )}
-                    />
-                  </Button>
-                </CollapsibleTrigger>
-              </div>
-              <CollapsibleContent>
-                {templatesLoading && typedTemplates.length === 0 ? (
-                  <AppsSkeletonGrid />
-                ) : (
-                  <div className="grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3">
-                    {typedTemplates.map((template) => (
-                      <AddTemplateCard
-                        key={template.name}
-                        template={template}
-                      />
-                    ))}
-                  </div>
-                )}
-              </CollapsibleContent>
-            </section>
-          </Collapsible>
-        ) : null}
-
         {archivedApps.length > 0 ? (
           <Collapsible open={showHidden} onOpenChange={setShowHidden}>
             <section className="space-y-3">
@@ -332,65 +230,3 @@ function EmptyAppsState() {
     </div>
   );
 }
-
-function AddTemplateCard({ template }: { template: AvailableTemplate }) {
-  const Icon = TEMPLATE_ICONS[template.icon] ?? IconSparkles;
-  const scaffold = useActionMutation("scaffold-workspace-app", {
-    onSuccess: (result: any) => {
-      toast.success(
-        `Scaffolded apps/${result?.appId || template.name}. The gateway will pick it up shortly.`,
-      );
-    },
-    onError: (err) => {
-      toast.error(
-        `Could not scaffold ${template.label}: ${
-          err instanceof Error ? err.message : String(err)
-        }`,
-      );
-    },
-  });
-
-  return (
-    <div className="group relative flex h-full min-h-36 items-stretch gap-3 rounded-lg border bg-card p-4 transition hover:border-foreground/30">
-      <div
-        className="flex h-9 w-9 shrink-0 items-center justify-center self-start rounded-md"
-        style={{
-          backgroundColor: `rgb(${template.colorRgb} / 0.12)`,
-          color: template.color,
-        }}
-      >
-        <Icon size={18} />
-      </div>
-      <div className="flex min-w-0 flex-1 flex-col">
-        <div className="flex min-w-0 items-center gap-2">
-          <h3 className="truncate text-sm font-semibold text-foreground">
-            {template.label}
-          </h3>
-        </div>
-        <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-muted-foreground">
-          {template.hint}
-        </p>
-        <div className="mt-auto pt-3">
-          <Button
-            size="sm"
-            variant="outline"
-            disabled={scaffold.isPending}
-            onClick={() => scaffold.mutate({ template: template.name })}
-          >
-            {scaffold.isPending ? (
-              <>
-                <IconLoader2 size={14} className="mr-1.5 animate-spin" />
-                Adding...
-              </>
-            ) : (
-              <>
-                <IconPlus size={14} className="mr-1.5" />
-                Add to workspace
-              </>
-            )}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}

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/automations.tsx

@@ -62,7 +62,6 @@ function useAutomations() {
     queryKey: [...AUTOMATIONS_QUERY_KEY, version],
     queryFn: listDispatchAutomations,
     placeholderData: (prev) => prev,
-    refetchInterval: 15_000,
     staleTime: 5_000,
   });
 }

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