@agent-native/dispatch 0.0.0-beta-20260819155526

package/src/components/automation-run-history-dialog.tsx

@@ -0,0 +1,247 @@
+import { useActionQuery } from "@agent-native/core/client/hooks";
+import {
+  IconAlertTriangle,
+  IconClock,
+  IconExternalLink,
+} from "@tabler/icons-react";
+import { Link } from "react-router";
+
+import {
+  automationScopeLabel,
+  automationTarget,
+} from "../lib/automation-display";
+import type { DispatchAutomationItem } from "../lib/automations";
+import { ActionQueryError } from "./action-query-error";
+import { Badge } from "./ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
+import { Skeleton } from "./ui/skeleton";
+
+interface AutomationRun {
+  id: string;
+  runId: string | null;
+  threadId: string | null;
+  status: "running" | "success" | "error" | "interrupted";
+  startedAt: number;
+  finishedAt: number | null;
+  error: string | null;
+}
+
+interface AutomationRunHistoryDialogProps {
+  automation: DispatchAutomationItem | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+function runStatusVariant(
+  status: AutomationRun["status"],
+): "default" | "destructive" | "outline" {
+  if (status === "error") return "destructive";
+  if (status === "success") return "default";
+  return "outline";
+}
+
+function formatTimestamp(value: number): string {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? "Unknown time" : date.toLocaleString();
+}
+
+function formatDuration(run: AutomationRun): string | null {
+  if (!run.finishedAt) return null;
+  const seconds = Math.max(
+    0,
+    Math.round((run.finishedAt - run.startedAt) / 1000),
+  );
+  return `${seconds}s`;
+}
+
+function runDebugPath(run: AutomationRun): string | null {
+  const params = new URLSearchParams();
+  if (run.runId) params.set("runId", run.runId);
+  else if (run.threadId) params.set("threadId", run.threadId);
+  else return null;
+  return `/admin/thread-debug?${params.toString()}`;
+}
+
+export function AutomationRunHistoryDialog({
+  automation,
+  open,
+  onOpenChange,
+}: AutomationRunHistoryDialogProps) {
+  const scope =
+    automation?.scope === "organization" ||
+    automation?.owner.startsWith("__organization__:") ||
+    automation?.owner === "__shared__"
+      ? "organization"
+      : "personal";
+  const runsQuery = useActionQuery<AutomationRun[]>(
+    "list-automation-runs",
+    {
+      name: automation?.name ?? "",
+      scope,
+      appId: automation?.appId ?? "dispatch",
+    },
+    {
+      enabled: open && Boolean(automation),
+      staleTime: 5_000,
+    },
+  );
+  const runs = runsQuery.data ?? [];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[85vh] max-w-2xl overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{automation?.name ?? "Automation details"}</DialogTitle>
+          <DialogDescription>
+            {automation
+              ? `${automationTarget(automation)} · ${automationScopeLabel(automation)}`
+              : "Execution history"}
+          </DialogDescription>
+        </DialogHeader>
+
+        {automation ? (
+          <div className="space-y-4">
+            <div className="grid grid-cols-2 gap-x-4 gap-y-3 rounded-lg border bg-muted/20 p-3 text-sm">
+              <div>
+                <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
+                  Status
+                </div>
+                <div className="mt-1 font-medium">
+                  {automation.lastStatus ??
+                    (automation.enabled ? "ready" : "paused")}
+                </div>
+              </div>
+              <div>
+                <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
+                  Last check
+                </div>
+                <div className="mt-1 font-medium">
+                  {automation.lastCheck
+                    ? formatTimestamp(new Date(automation.lastCheck).getTime())
+                    : "Not recorded"}
+                </div>
+              </div>
+              <div>
+                <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
+                  Created by
+                </div>
+                <div className="mt-1 break-words font-medium">
+                  {automation.createdBy ?? "Unknown"}
+                </div>
+              </div>
+              <div>
+                <div className="text-[11px] uppercase tracking-wide text-muted-foreground">
+                  Timezone
+                </div>
+                <div className="mt-1 font-medium">
+                  {automation.timezone ?? "Account default"}
+                </div>
+              </div>
+            </div>
+
+            {automation.lastError ? (
+              <div className="flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/5 p-3">
+                <IconAlertTriangle className="mt-0.5 size-4 shrink-0 text-destructive" />
+                <div className="min-w-0">
+                  <p className="text-sm font-medium text-destructive">
+                    Latest scheduler result
+                  </p>
+                  <p className="mt-1 break-words text-sm text-muted-foreground">
+                    {automation.lastError}
+                  </p>
+                </div>
+              </div>
+            ) : null}
+
+            <div>
+              <div className="flex items-center justify-between gap-3">
+                <div>
+                  <h3 className="text-sm font-semibold text-foreground">
+                    Past runs
+                  </h3>
+                  <p className="mt-1 text-xs text-muted-foreground">
+                    Only executions that actually started appear here. Blocked
+                    or skipped scheduler checks are shown above, not as fake
+                    runs.
+                  </p>
+                </div>
+                {runs.length > 0 ? (
+                  <Badge variant="outline">{runs.length} shown</Badge>
+                ) : null}
+              </div>
+
+              <div className="mt-3">
+                {runsQuery.isLoading ? (
+                  <div className="space-y-3 rounded-lg border p-4">
+                    {Array.from({ length: 3 }).map((_, index) => (
+                      <div key={index} className="space-y-2">
+                        <Skeleton className="h-4 w-2/3" />
+                        <Skeleton className="h-3 w-1/2" />
+                      </div>
+                    ))}
+                  </div>
+                ) : runsQuery.isError ? (
+                  <ActionQueryError
+                    error={runsQuery.error}
+                    onRetry={() => void runsQuery.refetch()}
+                  />
+                ) : runs.length === 0 ? (
+                  <div className="rounded-lg border border-dashed p-4 text-sm text-muted-foreground">
+                    This automation has not recorded an execution yet. If it is
+                    enabled but shows no runs, inspect the latest scheduler
+                    result and last check above.
+                  </div>
+                ) : (
+                  <ul className="divide-y rounded-lg border">
+                    {runs.map((run) => {
+                      const debugPath = runDebugPath(run);
+                      const duration = formatDuration(run);
+                      return (
+                        <li key={run.id} className="space-y-2 p-3">
+                          <div className="flex flex-wrap items-center gap-2 text-sm">
+                            <Badge variant={runStatusVariant(run.status)}>
+                              {run.status}
+                            </Badge>
+                            <span className="text-muted-foreground">
+                              {formatTimestamp(run.startedAt)}
+                            </span>
+                            {duration ? (
+                              <span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
+                                <IconClock className="size-3.5" />
+                                {duration}
+                              </span>
+                            ) : null}
+                            {debugPath ? (
+                              <Link
+                                to={debugPath}
+                                className="ml-auto inline-flex items-center gap-1 text-xs font-medium text-foreground underline-offset-4 hover:underline"
+                              >
+                                <IconExternalLink className="size-3.5" />
+                                Open debug
+                              </Link>
+                            ) : null}
+                          </div>
+                          {run.error ? (
+                            <p className="break-words text-sm text-destructive">
+                              {run.error}
+                            </p>
+                          ) : null}
+                        </li>
+                      );
+                    })}
+                  </ul>
+                )}
+              </div>
+            </div>
+          </div>
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/connected-app-card.tsx

@@ -0,0 +1,39 @@
+import { withBuilderUtmTrackingParams } from "@agent-native/core/shared/builder-link-tracking";
+
+import type { ConnectedAppSummary } from "../lib/other-apps";
+import { AppIcon } from "./app-icon";
+import { AppListRow } from "./app-list-row";
+import { AppOpenActions } from "./app-open-actions";
+
+export function ConnectedAppCard({
+  app,
+  className,
+}: {
+  app: ConnectedAppSummary;
+  className?: string;
+}) {
+  const launchUrl = app.homeUrl ?? app.url;
+
+  return (
+    <AppListRow className={className}>
+      <AppIcon id={app.id} name={app.name} color={app.color} size="sm" />
+      <div className="min-w-0 flex-1">
+        <div className="truncate text-sm font-semibold text-foreground">
+          {app.name}
+        </div>
+        <div className="mt-0.5 truncate text-xs text-muted-foreground">
+          {app.description || app.url}
+        </div>
+      </div>
+      <AppOpenActions
+        name={app.name}
+        href={withBuilderUtmTrackingParams(launchUrl, {
+          campaign: "product",
+          content: "dispatch_app",
+        })}
+        rel="noopener noreferrer"
+        showNewTabOption
+      />
+    </AppListRow>
+  );
+}

package/src/components/create-app-popover.spec.tsx

@@ -0,0 +1,376 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { CreateAppFlow } from "./create-app-popover";
+
+const sendToAgentChatMock = vi.hoisted(() => vi.fn());
+const devState = vi.hoisted(() => ({ isDevMode: false }));
+const frameState = vi.hoisted(() => ({ inBuilderFrame: false }));
+const builderConnectFlowState = vi.hoisted(() => ({
+  connecting: false,
+  start: vi.fn(),
+}));
+const startWorkspaceAppCreationResponse = vi.hoisted<{ result: unknown }>(
+  () => ({
+    result: {
+      mode: "builder",
+      appId: "qa-dashboard",
+      url: "https://branch.example.test",
+    },
+  }),
+);
+
+vi.mock("@agent-native/core/client/agent-chat", () => ({
+  sendToAgentChat: sendToAgentChatMock,
+  useDevMode: () => ({ isDevMode: devState.isDevMode }),
+}));
+
+vi.mock("@agent-native/core/client/host", () => ({
+  isInBuilderFrame: () => frameState.inBuilderFrame,
+}));
+
+vi.mock("@agent-native/core/client/settings/useBuilderStatus", () => ({
+  useBuilderConnectFlow: () => ({
+    configured: false,
+    connecting: builderConnectFlowState.connecting,
+    error: null,
+    start: builderConnectFlowState.start,
+  }),
+}));
+
+vi.mock("@agent-native/core/client/composer", async () => {
+  const ReactModule = await import("react");
+  return {
+    PromptComposer: ({
+      onSubmit,
+      placeholder,
+      disabled,
+    }: {
+      onSubmit: (text: string, files: File[], references: unknown[]) => void;
+      placeholder?: string;
+      disabled?: boolean;
+    }) => {
+      const [value, setValue] = ReactModule.useState("");
+      return ReactModule.createElement(
+        "div",
+        null,
+        ReactModule.createElement("textarea", {
+          "aria-label": "Prompt",
+          placeholder,
+          value,
+          onChange: (event: React.ChangeEvent<HTMLTextAreaElement>) =>
+            setValue(event.target.value),
+        }),
+        ReactModule.createElement(
+          "button",
+          {
+            disabled: disabled || !value.trim(),
+            onClick: () => onSubmit(value, [], []),
+            type: "button",
+          },
+          "Create app",
+        ),
+      );
+    },
+  };
+});
+
+function jsonResponse(data: unknown, status = 200): Response {
+  return new Response(JSON.stringify(data), {
+    status,
+    headers: { "Content-Type": "application/json" },
+  });
+}
+
+function findButton(container: HTMLElement, text: string): HTMLButtonElement {
+  const button = Array.from(container.querySelectorAll("button")).find(
+    (candidate) => candidate.textContent?.includes(text),
+  );
+  if (!button) throw new Error(`Button not found: ${text}`);
+  return button as HTMLButtonElement;
+}
+
+function changeValue(
+  element: HTMLInputElement | HTMLTextAreaElement,
+  value: string,
+) {
+  const setter = Object.getOwnPropertyDescriptor(
+    Object.getPrototypeOf(element),
+    "value",
+  )?.set;
+  act(() => {
+    setter?.call(element, value);
+    element.dispatchEvent(new Event("input", { bubbles: true }));
+    element.dispatchEvent(new Event("change", { bubbles: true }));
+  });
+}
+
+describe("CreateAppFlow", () => {
+  let container: HTMLDivElement;
+  let root: Root;
+  let fetchSpy: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    devState.isDevMode = false;
+    frameState.inBuilderFrame = false;
+    builderConnectFlowState.connecting = false;
+    builderConnectFlowState.start.mockReset();
+    startWorkspaceAppCreationResponse.result = {
+      mode: "builder",
+      appId: "qa-dashboard",
+      url: "https://branch.example.test",
+    };
+    sendToAgentChatMock.mockReset();
+    fetchSpy = vi.fn(async (input: RequestInfo | URL) => {
+      const url = String(input);
+      if (url.includes("get-vault-access-settings")) {
+        return jsonResponse({ mode: "all-apps" });
+      }
+      if (url.includes("list-vault-secret-options")) {
+        return jsonResponse([]);
+      }
+      if (url.includes("list-workspace-resource-options")) {
+        return jsonResponse([]);
+      }
+      if (url.includes("start-workspace-app-creation")) {
+        return jsonResponse(startWorkspaceAppCreationResponse.result);
+      }
+      return jsonResponse({ error: `Unexpected URL: ${url}` }, 404);
+    });
+    vi.stubGlobal("fetch", fetchSpy);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(() => {
+    act(() => root.unmount());
+    container.remove();
+    vi.unstubAllGlobals();
+  });
+
+  async function renderAndSubmit(
+    prompt: string,
+    props: { onClose?: () => void; onCreated?: () => void } = {},
+  ) {
+    await act(async () => {
+      root.render(React.createElement(CreateAppFlow, props));
+    });
+
+    changeValue(
+      container.querySelector('textarea[aria-label="Prompt"]')!,
+      prompt,
+    );
+
+    await act(async () => {
+      findButton(container, "Create app").click();
+    });
+  }
+
+  it("renders a Connect Builder control when Builder is not connected", async () => {
+    startWorkspaceAppCreationResponse.result = {
+      mode: "builder-unavailable",
+      reason: "builder-not-connected",
+      message: "Connect Builder for this user",
+      appId: "quality",
+    };
+    await renderAndSubmit("Build a quality dashboard");
+
+    await act(async () => {
+      await vi.waitFor(() =>
+        expect(container.textContent).toContain(
+          "Connect Builder for this user",
+        ),
+      );
+    });
+
+    const connectButton = findButton(container, "Connect Builder");
+    act(() => {
+      connectButton.click();
+    });
+    expect(builderConnectFlowState.start).toHaveBeenCalledTimes(1);
+    const localLink = container.querySelector<HTMLAnchorElement>(
+      "[data-create-app-local-link]",
+    );
+    expect(localLink?.textContent).toContain("Create locally");
+    expect(localLink?.href).toBe(
+      "https://www.agent-native.com/docs/multi-app-workspace#adding-a-new-app",
+    );
+  });
+
+  it("sends the shared scaffold prompt to Builder when already in Builder", async () => {
+    frameState.inBuilderFrame = true;
+    await renderAndSubmit("Build a quality dashboard");
+
+    expect(sendToAgentChatMock).toHaveBeenCalledTimes(1);
+    expect(sendToAgentChatMock).toHaveBeenCalledWith(
+      expect.objectContaining({ submit: true, type: "code" }),
+    );
+    expect(
+      fetchSpy.mock.calls.some(([input]) =>
+        String(input).includes("start-workspace-app-creation"),
+      ),
+    ).toBe(false);
+  });
+
+  it("reuses an empty local chat for direct dev-mode app creation", async () => {
+    devState.isDevMode = true;
+
+    await renderAndSubmit("Build a quality dashboard");
+
+    expect(sendToAgentChatMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        submit: true,
+        type: "code",
+        newTab: true,
+        reuseEmptyTab: true,
+      }),
+    );
+    expect(
+      fetchSpy.mock.calls.some(([input]) =>
+        String(input).includes("start-workspace-app-creation"),
+      ),
+    ).toBe(false);
+  });
+
+  it("opens a fresh local chat when the server hands off app creation", async () => {
+    startWorkspaceAppCreationResponse.result = {
+      mode: "local-agent",
+      appId: "quality-dashboard",
+      prompt: "Create the quality dashboard in the new workspace app.",
+      message: "Starting the local coding chat.",
+    };
+    const onClose = vi.fn();
+
+    await renderAndSubmit("Build a quality dashboard", { onClose });
+
+    expect(sendToAgentChatMock).toHaveBeenCalledWith({
+      message: "Create the quality dashboard in the new workspace app.",
+      submit: true,
+      type: "code",
+      newTab: true,
+      reuseEmptyTab: true,
+    });
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("notifies the parent after Builder accepts app creation", async () => {
+    const onCreated = vi.fn();
+
+    await renderAndSubmit("Build a quality dashboard", { onCreated });
+
+    expect(onCreated).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders the error affordance and a Try again control for builder-error, without a Connect Builder control", async () => {
+    startWorkspaceAppCreationResponse.result = {
+      mode: "builder-unavailable",
+      reason: "builder-error",
+      message: "Builder rejected the request.",
+      appId: "quality",
+      detail: "500 from Builder",
+      projectId: "proj_1",
+    };
+    await renderAndSubmit("Build a quality dashboard");
+
+    await act(async () => {
+      await vi.waitFor(() =>
+        expect(container.textContent).toContain(
+          "Builder rejected the request.",
+        ),
+      );
+    });
+
+    const matchingDivs = Array.from(container.querySelectorAll("div")).filter(
+      (el) => el.textContent?.includes("Builder rejected the request."),
+    );
+    expect(
+      matchingDivs.some((el) => el.className.includes("border-destructive")),
+    ).toBe(true);
+
+    expect(() => findButton(container, "Connect Builder")).toThrow();
+    expect(findButton(container, "Try again")).toBeTruthy();
+  });
+
+  it("renders coming-soon messages neutrally with no Connect Builder control", async () => {
+    startWorkspaceAppCreationResponse.result = {
+      mode: "coming-soon",
+      message: "This template is coming soon.",
+      appId: "quality",
+    };
+    await renderAndSubmit("Build a quality dashboard");
+
+    await act(async () => {
+      await vi.waitFor(() =>
+        expect(container.textContent).toContain(
+          "This template is coming soon.",
+        ),
+      );
+    });
+
+    const matchingDivs = Array.from(container.querySelectorAll("div")).filter(
+      (el) => el.textContent?.includes("This template is coming soon."),
+    );
+    expect(
+      matchingDivs.some((el) => el.className.includes("border-destructive")),
+    ).toBe(false);
+    expect(() => findButton(container, "Connect Builder")).toThrow();
+    expect(() => findButton(container, "Try again")).toThrow();
+  });
+
+  it("replaces the composer with Builder branch progress and success states", async () => {
+    let resolveBuilderRequest: ((response: Response) => void) | undefined;
+    fetchSpy.mockImplementation(async (input: RequestInfo | URL) => {
+      const url = String(input);
+      if (url.includes("get-vault-access-settings")) {
+        return jsonResponse({ mode: "all-apps" });
+      }
+      if (
+        url.includes("list-vault-secret-options") ||
+        url.includes("list-workspace-resource-options")
+      ) {
+        return jsonResponse([]);
+      }
+      if (url.includes("start-workspace-app-creation")) {
+        return new Promise<Response>((resolve) => {
+          resolveBuilderRequest = resolve;
+        });
+      }
+      return jsonResponse({ error: `Unexpected URL: ${url}` }, 404);
+    });
+
+    await renderAndSubmit("Build a quality dashboard");
+
+    await act(async () => {
+      await vi.waitFor(() => {
+        expect(container.textContent).toContain("Creating your Builder branch");
+      });
+    });
+    expect(container.textContent).not.toContain("Dispatch keys");
+
+    await act(async () => {
+      resolveBuilderRequest?.(
+        jsonResponse({
+          mode: "builder",
+          appId: "quality-dashboard",
+          url: "https://branch.example.test",
+        }),
+      );
+    });
+
+    await act(async () => {
+      await vi.waitFor(() => {
+        expect(container.textContent).toContain("Your Builder branch is ready");
+      });
+    });
+    const branchLink = Array.from(container.querySelectorAll("a")).find(
+      (candidate) => candidate.textContent?.includes("Open in Builder"),
+    );
+    expect(branchLink?.getAttribute("href")).toBe(
+      "https://branch.example.test",
+    );
+  });
+});