@agent-native/dispatch 0.31.14 → 0.31.15

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