@@ -1300,6 +948,18 @@ function PrettyPreview({ value }: { value: unknown }) {
if (typeof value === "string") {
return {value};
}
+ if (value && typeof value === "object" && !Array.isArray(value)) {
+ return (
+
+ {Object.entries(value as Record).map(([key, field]) => (
+
+
- {key}
+ - {typeof field === "object" && field !== null ? safeStringify(collapseDeep(field, 2)) : cellText(field)}
+
+ ))}
+
+ );
+ }
return (
{safeStringify(collapseDeep(value, 2))}
@@ -1307,6 +967,42 @@ function PrettyPreview({ value }: { value: unknown }) {
);
}
+function PreviewRowCard({ row, index }: { row: Record; index: number }) {
+ const titleKey = ["title", "name", "label"].find((key) => typeof row[key] === "string" && row[key] !== "");
+ const summaryKey = ["highlight", "description", "summary"].find((key) => typeof row[key] === "string" && row[key] !== "");
+ const url = typeof row.url === "string" && /^https?:\/\//i.test(row.url) ? row.url : null;
+ const details = Object.entries(row)
+ .filter(([key]) => key !== titleKey && key !== summaryKey && (key !== "url" || !url))
+ .sort(([left], [right]) => {
+ const order = ["url", "type", "status", "timestamp", "id"];
+ const leftRank = order.indexOf(left);
+ const rightRank = order.indexOf(right);
+ return (leftRank < 0 ? order.length : leftRank) - (rightRank < 0 ? order.length : rightRank);
+ });
+ return (
+
+
+
+ {titleKey ? cellText(row[titleKey]) : `Result ${index + 1}`}
+
+ {url &&
Open link}
+
+ {summaryKey &&
{cellText(row[summaryKey]).replace(/\*\*(.*?)\*\*/g, "$1")}
}
+ {details.length > 0 && (
+
+ {details.slice(0, 3).map(([key, field]) => (
+
+
- {key}
+ - {cellText(field)}
+
+ ))}
+
+ )}
+ {details.length > 3 &&
{details.length - 3} more {details.length === 4 ? "field" : "fields"} in the raw response
}
+
@@ -1384,6 +1080,7 @@ function ErrorResult({
))}
+ {outcome.result.result !== undefined && }
{needsReconnect ? "After reconnecting, run this action again." : "Adjust the input above and try again."}
diff --git a/ui/src/pages/apps/app-detail/PermissionsPanel.tsx b/ui/src/pages/apps/app-detail/PermissionsPanel.tsx
index 033a35f8814..aa08b887c0a 100644
--- a/ui/src/pages/apps/app-detail/PermissionsPanel.tsx
+++ b/ui/src/pages/apps/app-detail/PermissionsPanel.tsx
@@ -12,7 +12,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
import { cn } from "@/lib/utils";
import { type InstallState } from "@/lib/tool-installs";
import { QuarantinedActionsReview } from "./SetupPanel";
-import { ActionTestDialog } from "./TestPanel";
+import { ActionTestDialog } from "./ActionTestDialog";
import type { AccessDraft, AppDetailSectionProps } from "./types";
type ActionPermission = "off" | "ask" | "allowed";
diff --git a/ui/src/pages/apps/app-detail/TestPanel.test.tsx b/ui/src/pages/apps/app-detail/TestPanel.test.tsx
deleted file mode 100644
index 3b14ea5c5ad..00000000000
--- a/ui/src/pages/apps/app-detail/TestPanel.test.tsx
+++ /dev/null
@@ -1,575 +0,0 @@
-// @vitest-environment jsdom
-
-import { flushSync } from "react-dom";
-import type { ReactNode } from "react";
-import { createRoot } from "react-dom/client";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import type { ToolCatalogEntry } from "@paperclipai/shared";
-import { TestPanel, errorHints } from "./TestPanel";
-
-const listTestAgentsMock = vi.hoisted(() => vi.fn());
-const getTestAgentAccessMock = vi.hoisted(() => vi.fn());
-const runTestCallMock = vi.hoisted(() => vi.fn());
-const getTestCallStatusMock = vi.hoisted(() => vi.fn());
-const declineActionRequestMock = vi.hoisted(() => vi.fn());
-
-vi.mock("@/api/tools", () => ({
- toolsApi: {
- listTestAgents: (connectionId: string) => listTestAgentsMock(connectionId),
- getTestAgentAccess: (connectionId: string, agentId: string) =>
- getTestAgentAccessMock(connectionId, agentId),
- runTestCall: (connectionId: string, input: unknown) => runTestCallMock(connectionId, input),
- getTestCallStatus: (connectionId: string, actionRequestId: string) =>
- getTestCallStatusMock(connectionId, actionRequestId),
- declineActionRequest: (companyId: string, actionRequestId: string) =>
- declineActionRequestMock(companyId, actionRequestId),
- },
-}));
-
-vi.mock("@/context/CompanyContext", () => ({
- useCompany: () => ({ selectedCompanyId: "company-1", selectedCompany: { id: "company-1", name: "Paperclip" } }),
-}));
-
-vi.mock("@/lib/router", () => ({
- Link: ({ to, children, ...props }: { to: string; children: ReactNode }) => (
-
- {children}
-
- ),
-}));
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
-
-async function act(callback: () => void | Promise) {
- let result: void | Promise = undefined;
- flushSync(() => {
- result = callback();
- });
- await result;
-}
-
-async function flushReact() {
- for (let i = 0; i < 4; i += 1) {
- await act(async () => {
- await Promise.resolve();
- await new Promise((resolve) => window.setTimeout(resolve, 0));
- });
- }
-}
-
-/** The form field input — excludes the "Find an action" search box. */
-function formInput(): HTMLInputElement {
- const inputs = [...container.querySelectorAll("input")].filter(
- (i) => i.getAttribute("aria-label") !== "Find an action",
- );
- return inputs[0] as HTMLInputElement;
-}
-
-async function fillFormField(value: string) {
- const input = formInput();
- expect(input).toBeTruthy();
- const setter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")!.set!;
- await act(async () => {
- setter.call(input, value);
- input.dispatchEvent(new Event("input", { bubbles: true }));
- });
- await flushReact();
-}
-
-/** Wait past the 200ms minimum-spinner delay so the result panel renders. */
-async function settle() {
- await act(async () => {
- await new Promise((resolve) => window.setTimeout(resolve, 260));
- });
- await flushReact();
-}
-
-async function clickByText(text: string) {
- const btn = [...container.querySelectorAll("button")].find((b) => b.textContent?.trim() === text);
- expect(btn).toBeTruthy();
- await act(async () => btn!.click());
- await flushReact();
-}
-
-function catalogEntry(overrides: Partial = {}): ToolCatalogEntry {
- return {
- id: "catalog-read",
- companyId: "company-1",
- applicationId: "app-1",
- connectionId: "conn-1",
- entryKind: "tool",
- toolName: "read_sheet",
- title: "Read a sheet",
- description: "Get rows and cell values from a sheet.",
- inputSchema: {
- type: "object",
- properties: { spreadsheetId: { type: "string", title: "Spreadsheet" } },
- required: ["spreadsheetId"],
- },
- outputSchema: null,
- annotations: null,
- riskLevel: "read",
- isReadOnly: true,
- isWrite: false,
- isDestructive: false,
- status: "active",
- addedAt: new Date("2026-01-01T00:00:00Z"),
- version: null,
- schemaHash: null,
- firstSeenAt: new Date("2026-01-01T00:00:00Z"),
- lastSeenAt: new Date("2026-01-01T00:00:00Z"),
- reviewedAt: null,
- reviewedByAgentId: null,
- reviewedByUserId: null,
- createdAt: new Date("2026-01-01T00:00:00Z"),
- updatedAt: new Date("2026-01-01T00:00:00Z"),
- ...overrides,
- } as ToolCatalogEntry;
-}
-
-function agent(overrides: Record = {}) {
- return {
- id: "agent-claude",
- name: "ClaudeCoder",
- role: "engineer",
- title: "Engineer",
- status: "active",
- orgDepth: 1,
- effectiveAccess: {
- connectionId: "conn-1",
- toolCount: 3,
- allowedCount: 1,
- askFirstCount: 1,
- offCount: 1,
- lastChangedAt: null,
- lastChangedByAgentId: null,
- lastChangedByName: null,
- tools: [
- { toolName: "read_sheet", gatewayToolName: "gs__read_sheet", displayName: "Read a sheet", risk: "read", decision: "allowed", reasonCode: null, matchedPolicyIds: [] },
- { toolName: "append_row", gatewayToolName: "gs__append_row", displayName: "Append a row", risk: "write", decision: "ask_first", reasonCode: null, matchedPolicyIds: [] },
- { toolName: "delete_row", gatewayToolName: "gs__delete_row", displayName: "Delete a row", risk: "destructive", decision: "off", reasonCode: null, matchedPolicyIds: [] },
- ],
- },
- ...overrides,
- };
-}
-
-const readEntry = catalogEntry();
-const writeAskEntry = catalogEntry({
- id: "catalog-append",
- toolName: "append_row",
- title: "Append a row",
- description: "Add a new row to the bottom of a sheet.",
- isReadOnly: false,
- isWrite: true,
- riskLevel: "write",
-});
-const offEntry = catalogEntry({
- id: "catalog-delete",
- toolName: "delete_row",
- title: "Delete a row",
- description: "Remove a row from a sheet permanently.",
- isReadOnly: false,
- isWrite: true,
- isDestructive: true,
- riskLevel: "destructive",
-});
-
-let container: HTMLDivElement;
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let root: any;
-let client: QueryClient;
-
-function renderPanel(
- active: ToolCatalogEntry[] = [readEntry, writeAskEntry, offEntry],
- quarantined: ToolCatalogEntry[] = [],
-) {
- root.render(
-
-
- ,
- );
-}
-
-beforeEach(() => {
- container = document.createElement("div");
- document.body.appendChild(container);
- root = createRoot(container);
- client = new QueryClient({ defaultOptions: { queries: { retry: false } } });
- listTestAgentsMock.mockReset();
- getTestAgentAccessMock.mockReset();
- runTestCallMock.mockReset();
- getTestCallStatusMock.mockReset();
- declineActionRequestMock.mockReset();
- listTestAgentsMock.mockResolvedValue({ agents: [agent()] });
- getTestAgentAccessMock.mockResolvedValue({ access: agent().effectiveAccess });
- // Default ask-first polls report the request still waiting on approval.
- getTestCallStatusMock.mockResolvedValue({
- actionRequestId: "req-1",
- invocationId: "inv-2",
- phase: "waiting",
- parameters: { spreadsheetId: "sheet-123" },
- requestedAt: "2026-06-18T00:00:00.000Z",
- resolvedAt: null,
- durationMs: null,
- });
- window.sessionStorage.clear();
-});
-
-afterEach(() => {
- act(() => root.unmount());
- container.remove();
- window.sessionStorage.clear();
-});
-
-describe("TestPanel", () => {
- it("shows a lightweight agent-loading state before requesting permissions", async () => {
- listTestAgentsMock.mockImplementation(() => new Promise(() => undefined));
-
- await act(async () => renderPanel());
-
- expect(container.textContent).toContain("Loading agents…");
- expect(container.querySelector(".animate-spin")).toBeTruthy();
- expect(container.querySelectorAll('[data-slot="skeleton"]')).not.toHaveLength(0);
- expect(getTestAgentAccessMock).not.toHaveBeenCalled();
- });
-
- it("loads permissions only for the selected agent and reuses the cached summary", async () => {
- await act(async () => renderPanel());
- await flushReact();
-
- expect(getTestAgentAccessMock).toHaveBeenCalledTimes(1);
- expect(getTestAgentAccessMock).toHaveBeenCalledWith("conn-1", "agent-claude");
-
- await act(async () => root.unmount());
- root = createRoot(container);
- await act(async () => renderPanel());
- await flushReact();
-
- expect(getTestAgentAccessMock).toHaveBeenCalledTimes(1);
- });
-
- it("renders the test hierarchy and grouped actions with access badges", async () => {
- await act(async () => renderPanel());
- await flushReact();
-
- expect(container.textContent).toContain("Test an action");
- expect(container.textContent).toContain("Agent");
- expect(container.textContent).toContain("ClaudeCoder");
- expect(container.textContent).toContain("Allowed for 1 action · Ask first for 1 action · Off for 1 action");
- expect(container.textContent).toContain("Read (1)");
- expect(container.textContent).toContain("Write (2)");
- // Each action shows its decision badge.
- expect(container.textContent).toContain("Allowed");
- expect(container.textContent).toContain("Ask first");
- expect(container.textContent).toContain("Off");
- expect(container.querySelector(".bg-card")).toBeNull();
- });
-
- it("defaults to the highest-ranked accessible agent", async () => {
- listTestAgentsMock.mockResolvedValue({
- agents: [
- agent({ id: "agent-report", name: "A report", orgDepth: 2 }),
- agent({ id: "agent-root", name: "Root agent", orgDepth: 0 }),
- agent({ id: "agent-manager", name: "Manager", orgDepth: 1 }),
- ],
- });
-
- await act(async () => renderPanel());
- await flushReact();
-
- expect(container.textContent).toContain("Root agent");
- expect(container.textContent).not.toContain("A report");
- });
-
- it("shows the empty state when there are no actions", async () => {
- await act(async () => renderPanel([]));
- await flushReact();
- expect(container.textContent).toContain("Nothing to test yet");
- expect(container.textContent).toContain("Go to Permissions");
- });
-
- it("renders an allowed result panel with a row-count headline after a successful run", async () => {
- runTestCallMock.mockResolvedValue({
- decision: "allowed",
- invocationId: "inv-1",
- result: [
- { name: "Acme", stage: "Demo" },
- { name: "Globex", stage: "Trial" },
- ],
- });
- await act(async () => renderPanel());
- await flushReact();
-
- // Expand the allowed (read) action.
- const trigger = [...container.querySelectorAll("button")].find((b) => b.textContent?.includes("Read a sheet"));
- expect(trigger).toBeTruthy();
- await act(async () => trigger!.click());
- await flushReact();
-
- // Fill the required field then Run.
- await fillFormField("sheet-123");
- await clickByText("Run");
- await settle();
-
- expect(runTestCallMock).toHaveBeenCalledWith("conn-1", {
- agentId: "agent-claude",
- toolName: "read_sheet",
- parameters: { spreadsheetId: "sheet-123" },
- });
- expect(container.textContent).toContain("Worked. 2 rows came back.");
- expect(container.textContent).toContain("Ran as ClaudeCoder");
- expect(container.textContent).toContain("Preview");
- });
-
- it.each(["grant_credential_invalid", "oauth_insufficient_scope"])("guides %s failures to reconnect instead of changing action inputs", async (reasonCode) => {
- runTestCallMock.mockResolvedValue({
- decision: "allowed",
- invocationId: "inv-credential",
- error: { message: "The connection must be reconnected.", reasonCode },
- });
- await act(async () => renderPanel());
- await flushReact();
- const trigger = [...container.querySelectorAll("button")].find((b) => b.textContent?.includes("Read a sheet"));
- await act(async () => trigger!.click());
- await flushReact();
- await fillFormField("sheet-123");
- await clickByText("Run");
- await settle();
-
- expect(container.textContent).toContain("After reconnecting, run this action again.");
- expect(container.textContent).not.toContain("Adjust the input above");
- expect(container.textContent).not.toContain("Check the field formats");
- expect(container.textContent).toContain(reasonCode === "grant_credential_invalid"
- ? "Ask the connection owner to reconnect"
- : "allow the permissions required for this action");
- });
-
- it("renders a failure card (not 'Worked') when an allowed call returns isError:true", async () => {
- // The gateway let the call through (decision:"allowed") but the upstream MCP
- // tool failed at the tool layer — the envelope carries isError + an error.
- runTestCallMock.mockResolvedValue({
- decision: "allowed",
- invocationId: "inv-err",
- result: {
- content: "Invalid arguments: range is required",
- data: { content: [{ type: "text", text: "Invalid arguments: range is required" }], isError: true },
- error: "MCP tool returned an error result",
- },
- });
- await act(async () => renderPanel());
- await flushReact();
-
- const trigger = [...container.querySelectorAll("button")].find((b) => b.textContent?.includes("Read a sheet"));
- await act(async () => trigger!.click());
- await flushReact();
- await fillFormField("sheet-123");
- await clickByText("Run");
- await settle();
-
- expect(container.textContent).toContain("It didn't work.");
- expect(container.textContent).not.toContain("Worked.");
- // The actual MCP message wins over the generic gateway wrapper string.
- expect(container.textContent).toContain("Invalid arguments: range is required");
- });
-
- it("renders the ask-first card linking to Review", async () => {
- runTestCallMock.mockResolvedValue({ decision: "ask_first", invocationId: "inv-2", actionRequestId: "req-1" });
- await act(async () => renderPanel());
- await flushReact();
-
- const trigger = [...container.querySelectorAll("button")].find((b) => b.textContent?.includes("Append a row"));
- await act(async () => trigger!.click());
- await flushReact();
-
- await fillFormField("sheet-123");
- await clickByText("Run");
- await settle();
-
- expect(container.textContent).toContain("Sent for your OK.");
- expect(container.textContent).toContain("Cancel this request");
- // "Where" is populated from the polled action-request snapshot.
- expect(container.textContent).toContain("spreadsheetId: sheet-123");
- expect(container.textContent).toContain("Waiting ·");
- const reviewLink = [...container.querySelectorAll("a")].find((a) => a.textContent?.includes("Open Review tab"));
- expect(reviewLink?.getAttribute("href")).toBe("/apps/conn-1/review");
- });
-
- it("restores the ask-first card after leaving and returning to the Test tab", async () => {
- runTestCallMock.mockResolvedValue({ decision: "ask_first", invocationId: "inv-2", actionRequestId: "req-1" });
- await act(async () => renderPanel());
- await flushReact();
-
- const trigger = [...container.querySelectorAll("button")].find((b) => b.textContent?.includes("Append a row"));
- await act(async () => trigger!.click());
- await flushReact();
- await fillFormField("sheet-123");
- await clickByText("Run");
- await settle();
- expect(container.textContent).toContain("Sent for your OK.");
-
- await act(async () => root.unmount());
- root = createRoot(container);
- await act(async () => renderPanel());
- await flushReact();
-
- expect(runTestCallMock).toHaveBeenCalledTimes(1);
- expect(container.textContent).toContain("Sent for your OK.");
- expect(container.textContent).toContain("spreadsheetId: sheet-123");
- expect(container.textContent).toContain("Cancel this request");
- });
-
- it("shows 'Approved · running' while an approved ask-first call is executing", async () => {
- runTestCallMock.mockResolvedValue({ decision: "ask_first", invocationId: "inv-2", actionRequestId: "req-1" });
- getTestCallStatusMock.mockResolvedValue({
- actionRequestId: "req-1",
- invocationId: "inv-2",
- phase: "running",
- parameters: { spreadsheetId: "sheet-123" },
- requestedAt: "2026-06-18T00:00:00.000Z",
- resolvedAt: "2026-06-18T00:00:05.000Z",
- durationMs: null,
- });
- await act(async () => renderPanel());
- await flushReact();
-
- const trigger = [...container.querySelectorAll("button")].find((b) => b.textContent?.includes("Append a row"));
- await act(async () => trigger!.click());
- await flushReact();
- await fillFormField("sheet-123");
- await clickByText("Run");
- await settle();
-
- expect(container.textContent).toContain("Approved · running");
- // While running we don't offer cancel — the call is already on its way.
- expect(container.textContent).not.toContain("Cancel this request");
- });
-
- it("mutates the ask-first card into the allowed result once approved and done", async () => {
- runTestCallMock.mockResolvedValue({ decision: "ask_first", invocationId: "inv-2", actionRequestId: "req-1" });
- getTestCallStatusMock.mockResolvedValue({
- actionRequestId: "req-1",
- invocationId: "inv-2",
- phase: "done",
- parameters: { spreadsheetId: "sheet-123" },
- result: [{ name: "Acme", stage: "Demo" }],
- requestedAt: "2026-06-18T00:00:00.000Z",
- resolvedAt: "2026-06-18T00:00:05.000Z",
- durationMs: 1200,
- });
- await act(async () => renderPanel());
- await flushReact();
-
- const trigger = [...container.querySelectorAll("button")].find((b) => b.textContent?.includes("Append a row"));
- await act(async () => trigger!.click());
- await flushReact();
- await fillFormField("sheet-123");
- await clickByText("Run");
- await settle();
-
- // No longer the pending card — the real response is shown without re-running.
- expect(container.textContent).not.toContain("Sent for your OK.");
- expect(container.textContent).toContain("Worked.");
- expect(container.textContent).toContain("1.2s");
- });
-
- it("shows the denied status when an ask-first call is declined in Review", async () => {
- runTestCallMock.mockResolvedValue({ decision: "ask_first", invocationId: "inv-2", actionRequestId: "req-1" });
- getTestCallStatusMock.mockResolvedValue({
- actionRequestId: "req-1",
- invocationId: "inv-2",
- phase: "denied",
- parameters: { spreadsheetId: "sheet-123" },
- requestedAt: "2026-06-18T00:00:00.000Z",
- resolvedAt: "2026-06-18T00:00:05.000Z",
- durationMs: null,
- });
- await act(async () => renderPanel());
- await flushReact();
-
- const trigger = [...container.querySelectorAll("button")].find((b) => b.textContent?.includes("Append a row"));
- await act(async () => trigger!.click());
- await flushReact();
- await fillFormField("sheet-123");
- await clickByText("Run");
- await settle();
-
- expect(container.textContent).toContain("Denied — see Review for why");
- expect(container.textContent).not.toContain("Cancel this request");
- });
-
- it("explains an off action and links to Permissions without calling the API", async () => {
- await act(async () => renderPanel());
- await flushReact();
-
- const trigger = [...container.querySelectorAll("button")].find((b) => b.textContent?.includes("Delete a row"));
- await act(async () => trigger!.click());
- await flushReact();
-
- expect(container.textContent).toContain("Delete a row is off for ClaudeCoder.");
- const permLink = [...container.querySelectorAll("a")].find((a) => a.getAttribute("href") === "/apps/conn-1/permissions");
- expect(permLink).toBeTruthy();
- // No Run button is offered for an off action.
- expect([...container.querySelectorAll("button")].some((b) => b.textContent?.trim() === "Run")).toBe(false);
- expect(runTestCallMock).not.toHaveBeenCalled();
- });
-
- it("shows the 'Last changed by' audit hint when the access summary carries one", async () => {
- getTestAgentAccessMock.mockResolvedValue({
- access: {
- ...agent().effectiveAccess,
- lastChangedAt: new Date(Date.now() - 5 * 60_000).toISOString(),
- lastChangedByAgentId: "agent-admin",
- lastChangedByName: "Dotta",
- },
- });
- await act(async () => renderPanel());
- await flushReact();
-
- const trigger = [...container.querySelectorAll("button")].find((b) => b.textContent?.includes("Delete a row"));
- await act(async () => trigger!.click());
- await flushReact();
-
- expect(container.textContent).toContain("Last changed by Dotta");
- });
-
- it("surfaces quarantined actions in a 'New' group with the not-yet-on explanation", async () => {
- const quarantinedEntry = catalogEntry({
- id: "catalog-new",
- toolName: "rename_sheet",
- title: "Rename a sheet",
- description: "Change a sheet's name.",
- isReadOnly: false,
- isWrite: true,
- riskLevel: "write",
- status: "quarantined",
- });
- await act(async () => renderPanel([readEntry, writeAskEntry, offEntry], [quarantinedEntry]));
- await flushReact();
-
- expect(container.textContent).toContain("New (1)");
-
- const trigger = [...container.querySelectorAll("button")].find((b) => b.textContent?.includes("Rename a sheet"));
- expect(trigger).toBeTruthy();
- await act(async () => trigger!.click());
- await flushReact();
-
- expect(container.textContent).toContain("This action is new and hasn't been turned on yet.");
- expect(runTestCallMock).not.toHaveBeenCalled();
- });
-});
-
-describe("errorHints", () => {
- it("maps known reason codes to tailored hints", () => {
- expect(errorHints("Requested entity was not found.", "NOT_FOUND").length).toBeGreaterThan(0);
- expect(errorHints("permission denied", "PERMISSION_DENIED")[0]).toContain("permission");
- expect(errorHints("bad input", "INVALID_ARGUMENT").length).toBeGreaterThan(0);
- expect(errorHints("slow down", "RATE_LIMIT")[0]).toContain("rate-limit");
- });
-
- it("returns the locked generic fallback for an unknown error", () => {
- expect(errorHints("boom", "tool_execution_failed")).toEqual(["Check the inputs above and try again."]);
- });
-});
diff --git a/ui/storybook/stories/action-permissions-test.stories.tsx b/ui/storybook/stories/action-permissions-test.stories.tsx
new file mode 100644
index 00000000000..38f2601ca3d
--- /dev/null
+++ b/ui/storybook/stories/action-permissions-test.stories.tsx
@@ -0,0 +1,243 @@
+import { useEffect, useMemo } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import type { ToolCatalogEntry, ToolConnectionTestCallResult } from "@paperclipai/shared";
+import { queryKeys } from "@/lib/queryKeys";
+import { ActionsSection } from "@/pages/apps/app-detail/PermissionsPanel";
+
+const CONNECTION = "conn-asana-storybook";
+const TOOL: ToolCatalogEntry = {
+ id: "asana-list-projects",
+ companyId: "company-storybook",
+ applicationId: "app-asana",
+ connectionId: CONNECTION,
+ entryKind: "tool",
+ toolName: "list_projects",
+ title: "List projects",
+ description: "Find projects available in this Asana workspace.",
+ inputSchema: { type: "object", properties: {} },
+ outputSchema: null,
+ annotations: null,
+ riskLevel: "read",
+ isReadOnly: true,
+ isWrite: false,
+ isDestructive: false,
+ status: "active",
+ addedAt: new Date("2026-09-01T00:00:00Z"),
+ version: null,
+ schemaHash: null,
+ firstSeenAt: new Date("2026-09-01T00:00:00Z"),
+ lastSeenAt: new Date("2026-10-01T00:00:00Z"),
+ reviewedAt: null,
+ reviewedByAgentId: null,
+ reviewedByUserId: null,
+ createdAt: new Date("2026-09-01T00:00:00Z"),
+ updatedAt: new Date("2026-10-01T00:00:00Z"),
+} as ToolCatalogEntry;
+
+const PROJECTS = [
+ { gid: "1214644669600482", name: "Q4 launch", resource_subtype: "default_project", team: "Marketing" },
+ { gid: "1214644669600483", name: "Customer onboarding", resource_subtype: "default_project", team: "Product" },
+ { gid: "1214644669600484", name: "Support operations", resource_subtype: "default_project", team: "Operations" },
+];
+
+const NOTION_TOOL = {
+ ...TOOL,
+ id: "notion-search",
+ applicationId: "app-notion",
+ toolName: "search",
+ title: "Search Notion",
+ description: "Search pages in your Notion workspace.",
+ inputSchema: { type: "object", properties: { query: { type: "string" } }, required: ["query"] },
+} as ToolCatalogEntry;
+
+const NOTION_RESULTS = [
+ {
+ id: "11111111-2222-4333-8444-555555555555",
+ title: "Northstar launch plan",
+ url: "https://www.notion.so/11111111222243338444555555555555",
+ type: "page",
+ highlight: "The team is tracking launch milestones, owners, dependencies, and the decisions needed before the release window.",
+ timestamp: "2026-09-10T14:30:00.000Z",
+ },
+ {
+ id: "66666666-7777-4888-8999-aaaaaaaaaaaa",
+ title: "Launch customer research",
+ url: "https://www.notion.so/66666666777748888999aaaaaaaaaaaa",
+ type: "page",
+ highlight: "Interviews with early customers point to a clearer onboarding flow and better examples for complex team setups.",
+ timestamp: "2026-09-08T09:15:00.000Z",
+ },
+];
+
+function mcpResult(content: Array>, structuredContent: unknown = null, isError = false) {
+ return {
+ content: content.map((block) => block.type === "text" ? block.text : JSON.stringify(block)).join("\n"),
+ data: { content, structuredContent, isError, transport: "mcp_http", spawnedLocalProcess: false },
+ ...(isError ? { error: "MCP tool returned an error result" } : {}),
+ };
+}
+
+function seededClient(tool: ToolCatalogEntry) {
+ const client = new QueryClient({
+ defaultOptions: { queries: { staleTime: Infinity, gcTime: Infinity, retry: false, refetchOnMount: false } },
+ });
+ client.setQueryData(queryKeys.tools.testAgents(CONNECTION), {
+ agents: [{ id: "agent-ceo", name: "CEO", role: "ceo", title: "CEO", status: "active", orgDepth: 0 }],
+ });
+ client.setQueryData(queryKeys.tools.testAgentAccess(CONNECTION, "agent-ceo"), {
+ access: {
+ connectionId: CONNECTION,
+ toolCount: 1,
+ allowedCount: 1,
+ askFirstCount: 0,
+ offCount: 0,
+ lastChangedAt: null,
+ lastChangedByAgentId: null,
+ lastChangedByName: null,
+ tools: [{
+ toolName: tool.toolName,
+ gatewayToolName: `${tool.applicationId}__${tool.toolName}`,
+ displayName: tool.title,
+ risk: "read",
+ decision: "allowed",
+ reasonCode: null,
+ matchedPolicyIds: [],
+ }],
+ },
+ });
+ return client;
+}
+
+function openAndRun(query?: string) {
+ let step = 0;
+ const tick = (attempt: number) => {
+ if (step === 0) {
+ const button = [...document.querySelectorAll("button")].find((item) => item.textContent?.trim() === "Test");
+ if (button) { button.click(); step = 1; }
+ } else {
+ const dialog = document.querySelector('[role="dialog"]');
+ if (query && step === 1) {
+ const input = dialog?.querySelector('input[placeholder=""]') as HTMLInputElement | null;
+ if (input) {
+ Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(input, query);
+ input.dispatchEvent(new Event("input", { bubbles: true }));
+ step = 2;
+ }
+ }
+ const run = [...(dialog?.querySelectorAll("button") ?? [])].find((item) => item.textContent?.trim() === "Run");
+ if (run && (!query || step === 2)) { run.click(); return; }
+ }
+ if (attempt < 80) window.setTimeout(() => tick(attempt + 1), 50);
+ };
+ tick(0);
+}
+
+function PermissionsTestStory({ result, tool = TOOL, appName = "Asana", query }: {
+ result: ToolConnectionTestCallResult;
+ tool?: ToolCatalogEntry;
+ appName?: string;
+ query?: string;
+}) {
+ const client = useMemo(() => seededClient(tool), [tool]);
+ useEffect(() => {
+ const original = window.fetch.bind(window);
+ window.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {
+ const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+ if (url.includes(`/tool-connections/${CONNECTION}/test-calls`)) {
+ await new Promise((resolve) => window.setTimeout(resolve, 120));
+ return Response.json(result);
+ }
+ return original(input, init);
+ };
+ const timer = window.setTimeout(() => openAndRun(query), 150);
+ return () => { window.clearTimeout(timer); window.fetch = original; };
+ }, [query, result]);
+ return (
+
+
+
undefined}
+ onReviewQuarantined={() => undefined}
+ onRefreshActions={() => undefined}
+ />
+
-
-
-
- );
-}
-
-const meta: Meta = {
- title: "Apps/Test tab (PAP-11350)",
- parameters: { layout: "fullscreen" },
-};
-export default meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {
- name: "Default — grouped actions + access badges",
- render: () => ,
-};
-
-export const AllowedResult: Story = {
- name: "Allowed — result panel",
- render: () => (
-
- ),
-};
-
-export const AskFirstResult: Story = {
- name: "Ask first — sent for approval",
- render: () => (
-
- ),
-};
-
-export const ErrorResult: Story = {
- name: "Error — what the app said + what to try",
- render: () => (
-
- ),
-};
-
-export const RunningState: Story = {
- name: "Running — in-flight card",
- render: () => (
-
- ),
-};
-
-export const OffAction: Story = {
- name: "Off — explanation + open Permissions",
- render: () => ,
-};
-
-// PAP-11404 — Off side panel polish: audit hint + quarantined variant.
-
-const AGENTS_WITH_AUDIT: StoryAgent[] = AGENTS.map((agent, i) =>
- i === 0
- ? {
- ...agent,
- effectiveAccess: {
- ...agent.effectiveAccess,
- lastChangedAt: new Date("2026-06-17T09:00:00Z").toISOString(),
- lastChangedByAgentId: "agent-admin",
- lastChangedByName: "Dotta",
- },
- }
- : agent,
-);
-
-export const OffAuditHint: Story = {
- name: "Off — last-changed audit hint (PAP-11404)",
- render: () => (
-
- ),
-};
-
-const QUARANTINED: ToolCatalogEntry[] = [
- { ...tool("q1", "rename_sheet", "Rename a sheet", "Change a sheet's name.", false), status: "quarantined" } as ToolCatalogEntry,
-];
-
-export const QuarantinedAction: Story = {
- name: "New — quarantined action not yet on (PAP-11404)",
- render: () => (
-
- ),
-};