@agent-native/dispatch 0.31.14 → 0.31.16

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

@@ -0,0 +1,240 @@
+// @vitest-environment happy-dom
+import { act, type ReactNode } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { MemoryRouter, useLocation, useNavigate } from "react-router";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { automationIdentity } from "../../lib/automation-display";
+import type { DispatchAutomationItem } from "../../lib/automations";
+import AutomationsRoute from "./automations";
+
+const automationA: DispatchAutomationItem = {
+  id: "auto-a",
+  name: "Nightly digest",
+  path: "jobs/nightly-digest.md",
+  owner: "user@example.com",
+  appId: "dispatch",
+  scope: "personal",
+  enabled: true,
+  triggerType: "schedule",
+  schedule: "0 6 * * *",
+  scheduleDescription: "Every day at 6am",
+  lastStatus: "success",
+};
+
+const automationB: DispatchAutomationItem = {
+  id: "auto-b",
+  name: "Error triage",
+  path: "jobs/error-triage.md",
+  owner: "user@example.com",
+  appId: "dispatch",
+  scope: "personal",
+  enabled: true,
+  triggerType: "event",
+  event: "issue.created",
+  lastStatus: "success",
+};
+
+// Real @tanstack/react-query is not exercised here — the route reads its
+// list straight from useQuery, so the hook itself is stubbed with a fixed
+// two-item list rather than standing up a QueryClient + network mock.
+vi.mock("@tanstack/react-query", () => ({
+  useQuery: ({ queryKey }: { queryKey: readonly unknown[] }) => {
+    if (String(queryKey[0]).includes("automations")) {
+      return {
+        data: [automationA, automationB],
+        isLoading: false,
+        isError: false,
+        error: null,
+      };
+    }
+    return { data: undefined, isLoading: false, isError: false, error: null };
+  },
+  useMutation: () => ({
+    mutate: vi.fn(),
+    isPending: false,
+    variables: undefined,
+  }),
+  useQueryClient: () => ({
+    cancelQueries: vi.fn(),
+    getQueriesData: vi.fn(() => []),
+    setQueriesData: vi.fn(),
+    invalidateQueries: vi.fn(),
+  }),
+}));
+
+vi.mock("@agent-native/core/client/hooks", () => ({
+  useChangeVersions: () => 0,
+}));
+
+vi.mock("@agent-native/core/client/agent-chat", () => ({
+  sendToAgentChat: vi.fn(),
+}));
+
+vi.mock("@agent-native/core/client/composer", () => ({
+  PromptComposer: () => null,
+}));
+
+vi.mock("../../components/dispatch-shell", () => ({
+  DispatchShell: ({ children }: { children: ReactNode }) => (
+    <main>{children}</main>
+  ),
+}));
+
+vi.mock("../../components/automation-details-panel", () => ({
+  AutomationDetailsPanel: ({
+    automation,
+  }: {
+    automation: DispatchAutomationItem;
+  }) => <div data-testid="details-panel">{automation.name}</div>,
+}));
+
+function LocationProbe() {
+  const location = useLocation();
+  return (
+    <div data-testid="location">{location.pathname + location.search}</div>
+  );
+}
+
+function GoBackProbe() {
+  const navigate = useNavigate();
+  return (
+    <button type="button" data-testid="go-back" onClick={() => navigate(-1)}>
+      Back
+    </button>
+  );
+}
+
+describe("AutomationsRoute", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  function locationText() {
+    return container.querySelector('[data-testid="location"]')?.textContent;
+  }
+
+  function findRowButton(name: string) {
+    return [...container.querySelectorAll("button")].find((button) =>
+      button.textContent?.includes(name),
+    );
+  }
+
+  it("writes the selected automation into the URL so it survives reload and back navigation", async () => {
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/automations"]}>
+          <AutomationsRoute />
+          <LocationProbe />
+        </MemoryRouter>,
+      );
+    });
+
+    expect(locationText()).toBe("/automations");
+
+    const row = findRowButton(automationA.name);
+    expect(row).toBeTruthy();
+
+    await act(async () => {
+      row?.click();
+    });
+
+    expect(
+      container.querySelector('[data-testid="details-panel"]')?.textContent,
+    ).toBe(automationA.name);
+    // Selecting a row must push the identity into the address bar — a plain
+    // local-state selection leaves the URL unchanged, which is exactly the
+    // bug this test guards against (no way to link/reload/Back to a row).
+    expect(locationText()).toBe(
+      `/automations?automationId=${encodeURIComponent(automationIdentity(automationA))}`,
+    );
+
+    const otherRow = findRowButton(automationB.name);
+    await act(async () => {
+      otherRow?.click();
+    });
+
+    expect(locationText()).toBe(
+      `/automations?automationId=${encodeURIComponent(automationIdentity(automationB))}`,
+    );
+  });
+
+  it("pushes a history entry per row selection so Back steps through prior selections", async () => {
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={["/automations"]}>
+          <AutomationsRoute />
+          <LocationProbe />
+          <GoBackProbe />
+        </MemoryRouter>,
+      );
+    });
+
+    const goBack = container.querySelector<HTMLButtonElement>(
+      '[data-testid="go-back"]',
+    );
+    expect(goBack).toBeTruthy();
+
+    await act(async () => {
+      findRowButton(automationA.name)?.click();
+    });
+    expect(locationText()).toBe(
+      `/automations?automationId=${encodeURIComponent(automationIdentity(automationA))}`,
+    );
+
+    await act(async () => {
+      findRowButton(automationB.name)?.click();
+    });
+    expect(locationText()).toBe(
+      `/automations?automationId=${encodeURIComponent(automationIdentity(automationB))}`,
+    );
+
+    // A row click is an explicit user selection, not URL canonicalization —
+    // it must push a new history entry so Back steps back through the prior
+    // selection (A) instead of skipping past the whole page's history in one
+    // jump. Replacing on every click (the bug this guards against) collapses
+    // all selections into a single entry.
+    await act(async () => {
+      goBack?.click();
+    });
+    expect(locationText()).toBe(
+      `/automations?automationId=${encodeURIComponent(automationIdentity(automationA))}`,
+    );
+
+    await act(async () => {
+      goBack?.click();
+    });
+    expect(locationText()).toBe("/automations");
+  });
+
+  it("reopens the matching detail panel when automationId is already in the URL", async () => {
+    const targetId = automationIdentity(automationB);
+    await act(async () => {
+      root.render(
+        <MemoryRouter
+          initialEntries={[
+            `/automations?automationId=${encodeURIComponent(targetId)}`,
+          ]}
+        >
+          <AutomationsRoute />
+        </MemoryRouter>,
+      );
+    });
+
+    expect(
+      container.querySelector('[data-testid="details-panel"]')?.textContent,
+    ).toBe(automationB.name);
+  });
+});

package/src/routes/pages/automations.tsx

@@ -9,8 +9,8 @@ import {
   IconSettingsAutomation,
 } from "@tabler/icons-react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { useEffect, useMemo, useState } from "react";
-import { Link } from "react-router";
+import { useMemo, useState } from "react";
+import { Link, useSearchParams } from "react-router";
 import { toast } from "sonner";
 
 import { AutomationDetailsPanel } from "../../components/automation-details-panel";
@@ -189,10 +189,9 @@ function CreateAutomationButton() {
 }
 
 export default function AutomationsRoute() {
+  const [searchParams, setSearchParams] = useSearchParams();
   const [view, setView] = useState<"dispatch" | "all">("dispatch");
   const [query, setQuery] = useState("");
-  const [detailsTarget, setDetailsTarget] =
-    useState<DispatchAutomationItem | null>(null);
   const automationsQuery = useAutomations();
   const toggleAutomation = useToggleAutomation();
   const automations = automationsQuery.data ?? [];
@@ -238,17 +237,24 @@ export default function AutomationsRoute() {
       : null
     : null;
 
-  useEffect(() => {
-    if (!detailsTarget) return;
-    const current = filtered.find(
-      (item) => automationIdentity(item) === automationIdentity(detailsTarget),
-    );
-    if (current) {
-      if (current !== detailsTarget) setDetailsTarget(current);
-    } else {
-      setDetailsTarget(null);
-    }
-  }, [detailsTarget, filtered]);
+  // URL-backed selection (mirrors dreams.tsx's `?dreamId=`): the currently
+  // open automation lives in `automationId` so it survives reload, Back, and
+  // sharing a link, instead of vanishing local state.
+  const selectedAutomationId = searchParams.get("automationId");
+  const detailsTarget = selectedAutomationId
+    ? (filtered.find(
+        (item) => automationIdentity(item) === selectedAutomationId,
+      ) ?? null)
+    : null;
+
+  function selectAutomation(item: DispatchAutomationItem) {
+    // Push, don't replace: each row click is an explicit selection the user
+    // should be able to Back out of one step at a time, not a URL
+    // canonicalization that should collapse into the current entry.
+    const next = new URLSearchParams(searchParams);
+    next.set("automationId", automationIdentity(item));
+    setSearchParams(next);
+  }
 
   return (
     <DispatchShell
@@ -334,7 +340,7 @@ export default function AutomationsRoute() {
                         type="button"
                         className="w-full min-w-0 cursor-pointer text-left outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card"
                         aria-pressed={isSelected}
-                        onClick={() => setDetailsTarget(item)}
+                        onClick={() => selectAutomation(item)}
                       >
                         <div className="flex min-w-0 items-center gap-2">
                           <StatusDot tone={status.tone} />

package/src/server/lib/app-creation-store.spec.ts

@@ -321,23 +321,32 @@ describe("listWorkspaceApps", () => {
     ]);
   });
 
-  it("falls back to the authenticated workspace action for hosted gateways", async () => {
-    const fetchMock = vi
-      .fn()
-      .mockResolvedValueOnce(new Response("not found", { status: 404 }))
-      .mockResolvedValueOnce(
-        new Response(
+  it("uses the authenticated workspace action for hosted gateways", async () => {
+    const fetchMock = vi.fn(async (url: string | URL) => {
+      if (String(url).includes("/_workspace/apps")) {
+        return new Response(
           JSON.stringify([
             {
-              id: "atlas",
-              name: "Atlas",
-              path: "/atlas",
-              url: "https://agent-workspace.builder.io/atlas",
+              id: "private-app",
+              name: "Private app",
+              path: "/private-app",
             },
           ]),
           { headers: { "content-type": "application/json" } },
-        ),
+        );
+      }
+      return new Response(
+        JSON.stringify([
+          {
+            id: "atlas",
+            name: "Atlas",
+            path: "/atlas",
+            url: "https://agent-workspace.builder.io/atlas",
+          },
+        ]),
+        { headers: { "content-type": "application/json" } },
       );
+    });
     vi.stubGlobal("fetch", fetchMock);
     vi.stubEnv("A2A_SECRET", "test-a2a-secret");
     vi.stubEnv("WORKSPACE_GATEWAY_URL", "https://agent-workspace.builder.io");
@@ -347,11 +356,11 @@ describe("listWorkspaceApps", () => {
       () => listWorkspaceApps({ includeAgentCards: false }),
     );
 
-    expect(fetchMock).toHaveBeenCalledTimes(2);
-    expect(String(fetchMock.mock.calls[1]?.[0])).toBe(
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(String(fetchMock.mock.calls[0]?.[0])).toBe(
       "https://agent-workspace.builder.io/_agent-native/actions/list-workspace-apps?includeAgentCards=false&audience=all",
     );
-    expect(fetchMock.mock.calls[1]?.[1]).toEqual(
+    expect(fetchMock.mock.calls[0]?.[1]).toEqual(
       expect.objectContaining({
         headers: expect.objectContaining({
           accept: "application/json",
@@ -363,6 +372,24 @@ describe("listWorkspaceApps", () => {
     expect(apps[0]?.url).toBe("https://agent-workspace.builder.io/atlas");
   });
 
+  it("does not recursively call the hosted registry action", async () => {
+    const fetchMock = vi.fn();
+    vi.stubGlobal("fetch", fetchMock);
+    vi.stubEnv("A2A_SECRET", "test-a2a-secret");
+    vi.stubEnv("WORKSPACE_GATEWAY_URL", "https://agent-workspace.builder.io");
+
+    const apps = await runWithRequestContext(
+      {
+        userEmail: "dev@example.test",
+        requestOrigin: "https://agent-workspace.builder.io",
+      },
+      () => listWorkspaceApps({ includeAgentCards: false }),
+    );
+
+    expect(fetchMock).not.toHaveBeenCalled();
+    expect(apps.map((app) => app.id)).toEqual(["dispatch"]);
+  });
+
   it("keeps the exact request org in hosted registry tokens", async () => {
     const fetchMock = vi
       .fn()
@@ -381,7 +408,7 @@ describe("listWorkspaceApps", () => {
       () => listWorkspaceApps({ includeAgentCards: false }),
     );
 
-    const authorization = fetchMock.mock.calls[1]?.[1]?.headers
+    const authorization = fetchMock.mock.calls[0]?.[1]?.headers
       ?.Authorization as string;
     const tokenPayload = JSON.parse(
       Buffer.from(

package/src/server/lib/app-creation-store.ts

@@ -475,6 +475,16 @@ function workspaceAppUrl(appPath: string): string | null {
   }
 }
 
+function isLocalWorkspaceGateway(url: URL): boolean {
+  const hostname = url.hostname.replace(/^\[|\]$/g, "").toLowerCase();
+  return (
+    hostname === "localhost" ||
+    hostname === "127.0.0.1" ||
+    hostname === "0.0.0.0" ||
+    hostname === "::1"
+  );
+}
+
 function workspaceAppLink(
   appPath: string,
   explicitUrl?: unknown,
@@ -1530,19 +1540,35 @@ async function readWorkspaceAppsFromGateway(): Promise<
   };
 
   try {
-    const localResponse = await fetch(gatewayUrl(WORKSPACE_APPS_GATEWAY_PATH), {
-      headers,
-      signal: controller.signal,
-    });
-    if (localResponse.ok) {
-      return parseWorkspaceAppsManifest(
-        // coercion-ok: malformed gateway JSON is an unavailable registry and
-        // must fall through to the local manifest sources.
-        await localResponse.json().catch(() => null),
+    if (isLocalWorkspaceGateway(baseUrl)) {
+      const localResponse = await fetch(
+        gatewayUrl(WORKSPACE_APPS_GATEWAY_PATH),
+        {
+          headers,
+          signal: controller.signal,
+        },
       );
+      if (localResponse.ok) {
+        return parseWorkspaceAppsManifest(
+          // coercion-ok: malformed gateway JSON is an unavailable registry and
+          // must fall through to the local manifest sources.
+          await localResponse.json().catch(() => null),
+        );
+      }
     }
 
-    if (!authHeaders.Authorization) return null;
+    const requestOrigin = requestContext?.requestOrigin;
+    const isSameOriginGateway = requestOrigin
+      ? (() => {
+          try {
+            return new URL(requestOrigin).origin === baseUrl.origin;
+          } catch {
+            // coercion-ok: an invalid request origin cannot prove a self-fetch.
+            return false;
+          }
+        })()
+      : false;
+    if (isSameOriginGateway || !authHeaders.Authorization) return null;
     const actionUrl = gatewayUrl(WORKSPACE_APPS_ACTION_PATH);
     actionUrl.searchParams.set("includeAgentCards", "false");
     actionUrl.searchParams.set("audience", "all");

package/src/styles/dispatch-css.spec.ts

@@ -27,6 +27,9 @@ describe("dispatch Tailwind styles", () => {
       '@source "../components/**/*.{js,mjs,ts,tsx}"',
     );
     expect(stylesheet).toContain('@source "../routes/**/*.{js,mjs,ts,tsx}"');
+    expect(stylesheet).toContain(
+      "body:has(.fixed.bottom-3.left-3) [data-dispatch-sidebar-footer]",
+    );
   });
 
   it("imports package source directives from the Dispatch template", () => {

package/src/styles/dispatch.css

@@ -40,6 +40,11 @@
   font-weight: 600;
 }
 
+body:has(.fixed.bottom-3.left-3) [data-dispatch-sidebar-footer] {
+  /* The fixed environment badge only needs this space when it is rendered. */
+  padding-bottom: 2.5rem;
+}
+
 @media (max-width: 767px) {
   .dispatch-chat-first-surface {
     position: relative;