@agent-native/toolkit 0.209.1 → 0.209.2-nightly-20261016005836

package/src/app/chat/FileStorageSetupPopover.spec.tsx

@@ -10,6 +10,14 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import { FileStorageSetupPopover } from "./FileStorageSetupPopover.js";
 
+const setupMocks = vi.hoisted(() => ({
+  connectFlow: null as null | {
+    connecting: boolean;
+    start: (options: { provisionAccount: boolean }) => void;
+    cancel?: () => void;
+  },
+}));
+
 vi.mock("@agent-native/core/client/i18n", () => ({
   useT: () => (key: string) =>
     (
@@ -19,6 +27,7 @@ vi.mock("@agent-native/core/client/i18n", () => ({
           "Use Builder.io (free) or configure your own S3-compatible object storage.",
         "onboarding.fileStorage.custom": "Use custom keys",
         "composer.connectBuilder": "Connect Builder.io",
+        "common.cancel": "Cancel",
       }) as Record<string, string>
     )[key] ?? key,
 }));
@@ -56,9 +65,20 @@ vi.mock("@tabler/icons-react", () => ({ IconCloudUpload: () => null }));
 vi.mock("../settings/deferred-builder-connect-popover.js", () => ({
   DeferredBuilderConnectPopover: ({
     children,
+    flow,
   }: {
     children: React.ReactNode;
-  }) => children,
+    flow: { cancel?: () => void; connecting: boolean };
+  }) => (
+    <div>
+      {children}
+      {flow.connecting ? (
+        <button type="button" onClick={flow.cancel}>
+          Cancel
+        </button>
+      ) : null}
+    </div>
+  ),
 }));
 
 vi.mock("../setup-connections/BuilderConnectCard.js", () => ({
@@ -66,11 +86,19 @@ vi.mock("../setup-connections/BuilderConnectCard.js", () => ({
     render,
   }: {
     render: (context: {
-      viewModel: { connectFlow: null; pending: false; error: null };
+      viewModel: {
+        connectFlow: typeof setupMocks.connectFlow;
+        pending: false;
+        error: null;
+      };
     }) => React.ReactNode;
   }) =>
     render({
-      viewModel: { connectFlow: null, pending: false, error: null },
+      viewModel: {
+        connectFlow: setupMocks.connectFlow,
+        pending: false,
+        error: null,
+      },
     }),
 }));
 
@@ -80,6 +108,7 @@ describe("FileStorageSetupPopover", () => {
 
   beforeEach(() => {
     vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    setupMocks.connectFlow = null;
     container = document.createElement("div");
     document.body.appendChild(container);
     root = createRoot(container);
@@ -122,8 +151,40 @@ describe("FileStorageSetupPopover", () => {
     expect(container.querySelector("h2")?.parentElement?.className).toBe(
       "grid gap-1",
     );
-    expect(container.querySelector("button")?.parentElement?.className).toBe(
-      "flex gap-2",
+    const choices = container.querySelector("button")?.parentElement;
+    expect(choices?.className).toBe("grid grid-cols-2 gap-2");
+    expect(choices?.querySelectorAll("button")).toHaveLength(2);
+    for (const button of choices?.querySelectorAll("button") ?? []) {
+      expect(button.className).toContain("whitespace-normal");
+    }
+  });
+
+  it("closes the storage popover immediately when Builder setup is canceled", () => {
+    const cancel = vi.fn();
+    setupMocks.connectFlow = {
+      connecting: true,
+      start: vi.fn(),
+      cancel,
+    };
+    const onOpenChange = vi.fn();
+
+    act(() => {
+      root.render(
+        <FileStorageSetupPopover
+          open
+          onOpenChange={onOpenChange}
+          status="missing"
+        />,
+      );
+    });
+
+    const cancelButton = [...container.querySelectorAll("button")].find(
+      (button) => button.textContent === "Cancel",
     );
+    expect(cancelButton).toBeDefined();
+    act(() => cancelButton?.click());
+
+    expect(cancel).toHaveBeenCalledOnce();
+    expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(false, "dismiss");
   });
 });

package/src/app/chat/FileStorageSetupPopover.tsx

@@ -127,11 +127,20 @@ export function FileStorageSetupPopover(props: FileStorageSetupPopoverProps) {
             onConnected={onConnected}
             render={({ viewModel }) => {
               const flow = viewModel.connectFlow;
+              const connectFlow = flow
+                ? {
+                    ...flow,
+                    cancel: () => {
+                      flow.cancel?.();
+                      onOpenChange(false, "dismiss");
+                    },
+                  }
+                : null;
               const connectButton = (
                 <Button
                   type="button"
                   size="sm"
-                  className="min-w-0 flex-1 px-2 text-xs"
+                  className="h-auto min-h-9 w-full min-w-0 break-words whitespace-normal px-2 py-2 text-center text-xs leading-4"
                   disabled={!flow || viewModel.pending}
                   aria-busy={viewModel.pending}
                 >
@@ -147,12 +156,12 @@ export function FileStorageSetupPopover(props: FileStorageSetupPopoverProps) {
                       {description}
                     </p>
                   </div>
-                  <div className="flex gap-2">
-                    {flow ? (
+                  <div className="grid grid-cols-2 gap-2">
+                    {connectFlow ? (
                       <BuilderConnectPopover
-                        flow={flow}
+                        flow={connectFlow}
                         onConnect={(provisionAccount) =>
-                          flow.start({ provisionAccount })
+                          connectFlow.start({ provisionAccount })
                         }
                       >
                         {connectButton}
@@ -164,7 +173,7 @@ export function FileStorageSetupPopover(props: FileStorageSetupPopoverProps) {
                       type="button"
                       size="sm"
                       variant="outline"
-                      className="min-w-0 flex-1 px-2 text-xs"
+                      className="h-auto min-h-9 w-full min-w-0 break-words whitespace-normal px-2 py-2 text-center text-xs leading-4"
                       onClick={() => {
                         onOpenChange(false, "setup");
                         if (typeof window !== "undefined") {

package/src/app/chat/agent-chat-presence.ts

@@ -0,0 +1,30 @@
+import { useEffect, useSyncExternalStore } from "react";
+
+let mountedSurfaces = 0;
+const listeners = new Set<() => void>();
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+function setMountedSurfaces(next: number): void {
+  mountedSurfaces = next;
+  for (const listener of listeners) listener();
+}
+
+export function useRegisterAgentChatSurface(enabled: boolean): void {
+  useEffect(() => {
+    if (!enabled) return;
+    setMountedSurfaces(mountedSurfaces + 1);
+    return () => setMountedSurfaces(mountedSurfaces - 1);
+  }, [enabled]);
+}
+
+export function useHasAgentChat(): boolean {
+  return useSyncExternalStore(
+    subscribe,
+    () => mountedSurfaces > 0,
+    () => false,
+  );
+}

package/src/app/chat/chat/run-recovery.spec.tsx

@@ -700,6 +700,66 @@ describe("run recovery surfaces", () => {
     expect(newChatButton?.textContent).toBe("");
   });
 
+  it.each([
+    "http_429",
+    "http_529",
+    "provider_rate_limited",
+    "provider_transient_rejection",
+  ])("shows a visible Retry action for %s", async (errorCode) => {
+    const onRetry = vi.fn();
+
+    await act(async () => {
+      root.render(
+        <AgentNativeI18nProvider
+          initialLocale="en-US"
+          initialPreference="en-US"
+          persistPreference={false}
+        >
+          <RunErrorRecoveryCard
+            info={{
+              message: "The model provider temporarily rejected this request.",
+              errorCode,
+            }}
+            onContinue={vi.fn()}
+            onRetry={onRetry}
+            onDismiss={vi.fn()}
+          />
+        </AgentNativeI18nProvider>,
+      );
+    });
+
+    const retryButton = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Retry"]',
+    );
+    expect(retryButton?.textContent?.trim()).toBe("Retry");
+    await act(async () => retryButton?.click());
+    expect(onRetry).toHaveBeenCalledOnce();
+  });
+
+  it("does not offer Retry for a daily provider request cap", async () => {
+    await act(async () => {
+      root.render(
+        <AgentNativeI18nProvider
+          initialLocale="en-US"
+          initialPreference="en-US"
+          persistPreference={false}
+        >
+          <RunErrorRecoveryCard
+            info={{
+              message: "The daily model request cap was reached.",
+              errorCode: "rate_limit_exceeded",
+            }}
+            onContinue={vi.fn()}
+            onRetry={vi.fn()}
+            onDismiss={vi.fn()}
+          />
+        </AgentNativeI18nProvider>,
+      );
+    });
+
+    expect(container.querySelector('button[aria-label="Retry"]')).toBeNull();
+  });
+
   it("does not offer Retry for a terminal invalid-attachment provider error", async () => {
     const onRetry = vi.fn();
 

package/src/app/chat/chat/run-recovery.tsx

@@ -203,6 +203,17 @@ export function runErrorHeadline(
   return info.recoverable === true ? labels.recoverable : labels.terminal;
 }
 
+function isManuallyRetryableProviderError(errorCode?: string): boolean {
+  const code = errorCode?.trim().toLowerCase();
+  // Keep daily/account caps terminal; these codes represent transient rejections.
+  return (
+    code === "http_429" ||
+    code === "http_529" ||
+    code === "provider_rate_limited" ||
+    code === "provider_transient_rejection"
+  );
+}
+
 export function getRequestModeMetadata(
   message: unknown,
 ): "act" | "plan" | null {
@@ -794,6 +805,9 @@ export function RunErrorRecoveryCard({
   // Retrying or continuing sends the rejected attachment again.
   const attachmentRejected = info.errorCode === "invalid_attachment";
   const canRecover = info.recoverable === true && !attachmentRejected;
+  const manuallyRetryableProviderError = isManuallyRetryableProviderError(
+    info.errorCode,
+  );
   const retryWithoutAttachments =
     onRetryWithoutAttachments ?? onRetryWithoutAttachment;
   const canRetryWithoutAttachments =
@@ -840,7 +854,11 @@ export function RunErrorRecoveryCard({
   // credentials. Without this the common case — a rejected workspace or
   // deployment credential the reader cannot see, let alone edit — rendered a
   // "Connected ✓" panel with no action at all.
-  const canRetry = canRecover || isUnblockableExternally || isProviderAuthError;
+  const canRetry =
+    canRecover ||
+    isUnblockableExternally ||
+    isProviderAuthError ||
+    manuallyRetryableProviderError;
   const builderReconnectResolved =
     shouldShowBuilderReconnect &&
     builderReconnect.hasFetchedStatus &&
@@ -1158,9 +1176,17 @@ export function RunErrorRecoveryCard({
                   ? t("agentChat.recovery.diagnoseRetry")
                   : t("agentChat.common.retry")
               }
-              className="inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
+              className={cn(
+                "inline-flex h-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground",
+                manuallyRetryableProviderError ? "gap-1.5 px-2" : "w-7",
+              )}
             >
               <IconRefresh size={14} />
+              {manuallyRetryableProviderError && (
+                <span className="text-[11px] font-medium">
+                  {t("agentChat.common.retry")}
+                </span>
+              )}
             </button>
           )}
           {canRecover && isConnectionRecoveryError && (

package/src/app/feedback/ReportProblemButton.tsx

@@ -0,0 +1,59 @@
+import { useT } from "@agent-native/core/client/i18n";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
+import { cn } from "@agent-native/toolkit/utils";
+import { IconMessageReport } from "@tabler/icons-react";
+import { useState } from "react";
+
+import { ReportProblemDialog } from "./ReportProblemDialog.js";
+
+export interface ReportProblemButtonProps {
+  variant?: "sidebar" | "icon";
+  className?: string;
+}
+
+export function ReportProblemButton({
+  variant = "sidebar",
+  className,
+}: ReportProblemButtonProps) {
+  const t = useT();
+  const [open, setOpen] = useState(false);
+  const label = t("agentChat.reportProblem.menuItem");
+
+  const button = (
+    <button
+      type="button"
+      aria-label={variant === "icon" ? label : undefined}
+      onClick={() => setOpen(true)}
+      className={cn(
+        variant === "icon"
+          ? "flex size-9 items-center justify-center rounded-md bg-transparent text-primary hover:bg-accent/60 hover:text-primary"
+          : "flex h-auto w-full items-center justify-start gap-2 rounded bg-transparent px-2 py-1.5 text-xs font-normal text-primary hover:bg-accent/60 hover:text-primary",
+        className,
+      )}
+    >
+      <IconMessageReport className="size-4 shrink-0 text-primary" />
+      {variant === "sidebar" && <span>{label}</span>}
+    </button>
+  );
+
+  return (
+    <>
+      {variant === "icon" ? (
+        <TooltipProvider delayDuration={200}>
+          <Tooltip>
+            <TooltipTrigger asChild>{button}</TooltipTrigger>
+            <TooltipContent side="right">{label}</TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ) : (
+        button
+      )}
+      <ReportProblemDialog open={open} onOpenChange={setOpen} />
+    </>
+  );
+}

package/src/app/feedback/ReportProblemDialog.spec.tsx

@@ -0,0 +1,190 @@
+// @vitest-environment happy-dom
+
+import type { RecorderReport } from "@agent-native/core/client/recorder";
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  report: vi.fn(),
+  uploadProblemReport: vi.fn(),
+  sendToAgentChat: vi.fn(),
+  writeClipboardText: vi.fn(),
+}));
+
+vi.mock("@agent-native/core/client/recorder", () => ({
+  recorder: { report: mocks.report },
+}));
+vi.mock("@agent-native/core/client/problem-report", async (importOriginal) => ({
+  ...(await importOriginal<
+    typeof import("@agent-native/core/client/problem-report")
+  >()),
+  uploadProblemReport: mocks.uploadProblemReport,
+}));
+vi.mock("@agent-native/core/client/agent-chat", () => ({
+  sendToAgentChat: mocks.sendToAgentChat,
+}));
+vi.mock("@agent-native/toolkit/clipboard", () => ({
+  writeClipboardText: mocks.writeClipboardText,
+}));
+
+import { useRegisterAgentChatSurface } from "../chat/agent-chat-presence.js";
+import { ReportProblemDialog } from "./ReportProblemDialog.js";
+
+const REF = "attachment:v1:report-ref";
+
+function fixture(reason: RecorderReport["reason"]): RecorderReport {
+  return {
+    app: "mail",
+    build: "abc123",
+    url: "/inbox",
+    at: "2026-10-14T16:20:05.120Z",
+    reason,
+    windowSeconds: 120,
+    events: [
+      { t: -3, at: 1, type: "action", name: "list-labels", ok: true },
+      {
+        t: -0.8,
+        at: 2,
+        type: "action",
+        name: "list-folders",
+        ok: false,
+        status: 403,
+      },
+      { t: -0.5, at: 3, type: "error", name: "TypeError" },
+    ],
+    watched: {},
+    pending: [],
+    dropped: 0,
+  };
+}
+
+function AgentChatStandIn() {
+  useRegisterAgentChatSurface(true);
+  return null;
+}
+
+let container: HTMLDivElement;
+let root: Root;
+const onOpenChange = vi.fn();
+
+function render({ withAgentChat }: { withAgentChat: boolean }) {
+  act(() => {
+    root.render(
+      <>
+        {withAgentChat ? <AgentChatStandIn /> : null}
+        <ReportProblemDialog open onOpenChange={onOpenChange} />
+      </>,
+    );
+  });
+}
+
+function button(name: string): HTMLButtonElement {
+  const match = [...document.body.querySelectorAll("button")].find(
+    (candidate) => candidate.textContent?.trim() === name,
+  );
+  if (!match) throw new Error(`No button named ${name}`);
+  return match;
+}
+
+async function click(name: string) {
+  await act(async () => {
+    button(name).click();
+  });
+}
+
+beforeEach(() => {
+  vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+  mocks.report.mockReset();
+  mocks.report.mockImplementation((options?: { reason?: string }) =>
+    fixture(options?.reason === "user" ? "user" : "manual"),
+  );
+  mocks.uploadProblemReport.mockReset();
+  mocks.sendToAgentChat.mockReset();
+  mocks.writeClipboardText.mockReset();
+  onOpenChange.mockReset();
+  container = document.createElement("div");
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  document.body.innerHTML = "";
+  vi.unstubAllGlobals();
+});
+
+describe("ReportProblemDialog", () => {
+  it("previews counts, failures and first events without building a user report", () => {
+    render({ withAgentChat: true });
+
+    const text = document.body.textContent ?? "";
+    expect(text).toContain("Attach what the app did in the last 120 seconds?");
+    expect(text).toContain("action 2 · error 1");
+    expect(text).toContain("-0.8s  action  list-folders  failed  403");
+    expect(text).toContain("-3.0s  action  list-labels  ok");
+    expect(mocks.report).toHaveBeenCalledWith();
+    expect(mocks.report).not.toHaveBeenCalledWith({ reason: "user" });
+  });
+
+  it("attaches the user report and sends the bounded summary to the agent", async () => {
+    mocks.uploadProblemReport.mockResolvedValue({ status: "ok", ref: REF });
+    render({ withAgentChat: true });
+
+    await click("Send to agent");
+
+    expect(mocks.uploadProblemReport).toHaveBeenCalledWith(
+      expect.objectContaining({ reason: "user" }),
+    );
+    expect(mocks.sendToAgentChat).toHaveBeenCalledWith(
+      expect.objectContaining({
+        context: expect.stringContaining(REF),
+        submit: true,
+        openSidebar: true,
+      }),
+    );
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("says the report was not attached and retries the same report", async () => {
+    mocks.uploadProblemReport.mockResolvedValue({
+      status: "failed",
+      errorCode: "attachment_storage_unavailable",
+      message: "No object storage is connected.",
+    });
+    render({ withAgentChat: true });
+
+    await click("Send to agent");
+
+    expect(document.body.querySelector('[role="alert"]')?.textContent).toBe(
+      "The report was not attached. No object storage is connected.",
+    );
+    expect(mocks.sendToAgentChat).not.toHaveBeenCalled();
+    expect(onOpenChange).not.toHaveBeenCalled();
+
+    mocks.uploadProblemReport.mockResolvedValue({ status: "ok", ref: REF });
+    await click("Retry");
+
+    const [first, second] = mocks.uploadProblemReport.mock.calls;
+    expect(second[0]).toBe(first[0]);
+    expect(
+      mocks.report.mock.calls.filter(([options]) => options?.reason === "user"),
+    ).toHaveLength(1);
+    expect(mocks.sendToAgentChat).toHaveBeenCalledTimes(1);
+  });
+
+  it("copies the summary with its ref when the app has no agent chat", async () => {
+    mocks.uploadProblemReport.mockResolvedValue({ status: "ok", ref: REF });
+    mocks.writeClipboardText.mockResolvedValue(true);
+    render({ withAgentChat: false });
+
+    await click("Copy problem report");
+
+    expect(mocks.writeClipboardText).toHaveBeenCalledWith(
+      expect.stringContaining(REF),
+    );
+    expect(mocks.sendToAgentChat).not.toHaveBeenCalled();
+    expect(button("Copied")).toBeTruthy();
+  });
+});