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

package/src/app/settings/BuilderConnectPopover.tsx

@@ -92,45 +92,51 @@ export function BuilderConnectChoicePanel({
           defaultValue: "Activate free credits",
         })}
       </h2>
-      <p
-        id="builder-connect-popover-description"
-        className="text-xs leading-5 text-muted-foreground"
-        role={flow.connecting ? "status" : undefined}
-        aria-live={flow.connecting ? "polite" : undefined}
-      >
-        {flow.connecting
-          ? t("agentChat.onboarding.builderProvisioningDescription", {
-              defaultValue:
-                "Creating your Builder.io account and activating free credits.",
-            })
-          : canProvisionAccount
-            ? t("agentChat.onboarding.builderActivationDescription", {
+      {!flow.accountExists ? (
+        <p
+          id="builder-connect-popover-description"
+          className="text-xs leading-5 text-muted-foreground"
+          role={flow.connecting ? "status" : undefined}
+          aria-live={flow.connecting ? "polite" : undefined}
+        >
+          {flow.connecting
+            ? t("agentChat.onboarding.builderProvisioningDescription", {
                 defaultValue:
-                  "Create a new account to activate free credits, or continue with an existing account.",
+                  "Creating your Builder.io account and activating free credits.",
               })
-            : statusReadFailed
-              ? t("agentChat.onboarding.builderActivationCheckFailed", {
+            : canProvisionAccount
+              ? t("agentChat.onboarding.builderActivationDescription", {
                   defaultValue:
-                    "Couldn't check whether this app can create new accounts.",
+                    "Create a new account to activate free credits, or continue with an existing account.",
                 })
-              : flow.statusCheckEnabled === false
-                ? t("agentChat.onboarding.builderActivationUnavailableInMode", {
+              : statusReadFailed
+                ? t("agentChat.onboarding.builderActivationCheckFailed", {
                     defaultValue:
-                      "Create a Builder.io account or sign in to connect.",
+                      "Couldn't check whether this app can create new accounts.",
                   })
-                : flow.statusResolved === false
-                  ? t("agentChat.onboarding.builderActivationChecking", {
-                      defaultValue:
-                        "Checking whether new account activation is available.",
-                    })
-                  : t("agentChat.onboarding.builderActivationUnavailable", {
-                      defaultValue:
-                        "Create a Builder.io account or sign in to connect.",
-                    })}
-      </p>
+                : flow.statusCheckEnabled === false
+                  ? t(
+                      "agentChat.onboarding.builderActivationUnavailableInMode",
+                      {
+                        defaultValue:
+                          "Create a Builder.io account or sign in to connect.",
+                      },
+                    )
+                  : flow.statusResolved === false
+                    ? t("agentChat.onboarding.builderActivationChecking", {
+                        defaultValue:
+                          "Checking whether new account activation is available.",
+                      })
+                    : t("agentChat.onboarding.builderActivationUnavailable", {
+                        defaultValue:
+                          "Create a Builder.io account or sign in to connect.",
+                      })}
+        </p>
+      ) : null}
       {flow.accountExists ? (
         <div
           role="alert"
+          id="builder-connect-popover-account-exists"
           className="rounded-md bg-muted px-3 py-2 text-xs leading-5"
         >
           <p className="font-medium text-foreground">
@@ -177,7 +183,7 @@ export function BuilderConnectChoicePanel({
         </div>
       ) : null}
       <BuilderConnectIncludedServices appId={appId} />
-      {canProvisionAccount ? (
+      {canProvisionAccount && !flow.accountExists ? (
         <div className="flex flex-col gap-2">
           <Button
             type="button"
@@ -214,45 +220,55 @@ export function BuilderConnectChoicePanel({
           type="button"
           data-testid={primaryTestId}
           className="w-full"
-          aria-describedby="builder-connect-popover-description"
+          aria-describedby={
+            flow.accountExists
+              ? "builder-connect-popover-account-exists"
+              : "builder-connect-popover-description"
+          }
           onClick={onExistingAccount}
           disabled={flow.connecting}
         >
           {flow.connecting ? <Spinner aria-hidden /> : null}
-          {t("agentChat.onboarding.builderConnect", {
-            defaultValue: "Connect Builder.io",
-          })}
+          {flow.accountExists
+            ? t("agentChat.onboarding.builderExistingAccount", {
+                defaultValue: "I have a Builder.io account",
+              })
+            : t("agentChat.onboarding.builderConnect", {
+                defaultValue: "Connect Builder.io",
+              })}
         </Button>
       )}
-      <p className="text-[11px] leading-4 text-muted-foreground">
-        {t("agentChat.onboarding.builderConsentPrefix", {
-          defaultValue: "By creating a Builder.io account, you agree to our",
-        })}{" "}
-        <a
-          href="https://www.builder.io/legal/terms"
-          target="_blank"
-          rel="noreferrer"
-          className="underline underline-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        >
-          {t("agentChat.onboarding.builderTerms", {
-            defaultValue: "Terms of Service",
-          })}
-        </a>{" "}
-        {t("agentChat.onboarding.builderConsentAnd", {
-          defaultValue: "and",
-        })}{" "}
-        <a
-          href="https://www.builder.io/legal/privacy"
-          target="_blank"
-          rel="noreferrer"
-          className="underline underline-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        >
-          {t("agentChat.onboarding.builderPrivacy", {
-            defaultValue: "Privacy Policy",
-          })}
-        </a>
-        .
-      </p>
+      {canProvisionAccount && !flow.accountExists ? (
+        <p className="text-[11px] leading-4 text-muted-foreground">
+          {t("agentChat.onboarding.builderConsentPrefix", {
+            defaultValue: "By creating a Builder.io account, you agree to our",
+          })}{" "}
+          <a
+            href="https://www.builder.io/legal/terms"
+            target="_blank"
+            rel="noreferrer"
+            className="underline underline-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {t("agentChat.onboarding.builderTerms", {
+              defaultValue: "Terms of Service",
+            })}
+          </a>{" "}
+          {t("agentChat.onboarding.builderConsentAnd", {
+            defaultValue: "and",
+          })}{" "}
+          <a
+            href="https://www.builder.io/legal/privacy"
+            target="_blank"
+            rel="noreferrer"
+            className="underline underline-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {t("agentChat.onboarding.builderPrivacy", {
+              defaultValue: "Privacy Policy",
+            })}
+          </a>
+          .
+        </p>
+      ) : null}
     </div>
   );
 }

package/src/app/shared/AppSidebar.spec.tsx

@@ -6,7 +6,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@agent-native/toolkit/ui/tooltip";
-import { act } from "react";
+import { act, type ReactNode } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { MemoryRouter, useLocation } from "react-router";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
@@ -61,6 +61,7 @@ describe("AppSidebar (router links)", () => {
       "Slides",
       "Decks",
       "Settings",
+      "Report a problem",
       "Expand sidebar",
     ]);
 
@@ -74,6 +75,26 @@ describe("AppSidebar (router links)", () => {
     }
   });
 
+  it("offers Report a problem beside the feedback row and hides it with feedback", () => {
+    const renderSidebar = (feedback: ReactNode) => (
+      <MemoryRouter>
+        <AppSidebar
+          showBadge={false}
+          brandName="Slides"
+          items={[{ label: "Decks", to: "/home" }]}
+          feedback={feedback}
+        />
+      </MemoryRouter>
+    );
+
+    act(() => root.render(renderSidebar(<span>Send feedback</span>)));
+    expect(container.textContent).toContain("Send feedback");
+    expect(container.textContent).toContain("Report a problem");
+
+    act(() => root.render(renderSidebar(null)));
+    expect(container.textContent).not.toContain("Report a problem");
+  });
+
   it("keeps rail and settings-gear tooltip links mounted across rerenders", () => {
     const renderLinks = (revision: number) => (
       <MemoryRouter>

package/src/app/shared/AppSidebar.tsx

@@ -9,10 +9,12 @@ import {
   type AppSidebarHeaderProps as ToolkitAppSidebarHeaderProps,
   type AppSidebarFooterProps as ToolkitAppSidebarFooterProps,
 } from "@agent-native/toolkit/app-shell";
-import { forwardRef } from "react";
+import { cn } from "@agent-native/toolkit/utils";
+import { forwardRef, type ReactNode } from "react";
 import { useHref, useLinkClickHandler } from "react-router";
 
 import { FeedbackButton } from "../feedback/FeedbackButton.js";
+import { ReportProblemButton } from "../feedback/ReportProblemButton.js";
 import { AgentNativeIcon } from "./AgentNativeIcon.js";
 import { EnvironmentBadge } from "./EnvironmentBadge.js";
 
@@ -99,6 +101,25 @@ export const AppSidebarHeader = forwardRef<
 );
 AppSidebarHeader.displayName = "AppSidebarHeader";
 
+// Every app's feedback row also offers Report a problem; an app that hides feedback hides both.
+function withReportProblem(
+  feedback: ReactNode,
+  collapsed: boolean | undefined,
+): ReactNode {
+  if (!feedback) return feedback;
+  return (
+    <div
+      className={cn(
+        "flex flex-col",
+        collapsed ? "items-center gap-1" : "gap-0.5",
+      )}
+    >
+      {feedback}
+      <ReportProblemButton variant={collapsed ? "icon" : "sidebar"} />
+    </div>
+  );
+}
+
 export interface AppSidebarFooterProps extends ToolkitAppSidebarFooterProps {}
 
 export const AppSidebarFooter = forwardRef<
@@ -118,7 +139,7 @@ export const AppSidebarFooter = forwardRef<
     <ToolkitAppSidebarFooter
       ref={ref}
       collapsed={collapsed}
-      feedback={resolvedFeedback}
+      feedback={withReportProblem(resolvedFeedback, collapsed)}
       {...props}
     />
   );
@@ -178,7 +199,7 @@ export const AppSidebar = forwardRef<HTMLElement, AppSidebarProps>(
         badge={resolvedBadge}
         linkComponent={resolvedLinkComponent}
         {...props}
-        feedback={resolvedFeedback}
+        feedback={withReportProblem(resolvedFeedback, props.collapsed)}
       />
     );
   },

package/src/app/shared/CommandMenu.tsx

@@ -38,6 +38,7 @@ import {
   IconExternalLink,
   IconInfoCircle,
   IconMessage,
+  IconMessageReport,
   IconHistory,
   IconLogout,
   IconSettings,
@@ -54,6 +55,7 @@ import React, {
   type ReactNode,
 } from "react";
 
+import { ReportProblemDialog } from "../feedback/ReportProblemDialog.js";
 import { AboutAgentNativeDialog } from "./AboutAgentNativeDialog.js";
 import { LazyChunkErrorBoundary } from "./LazyChunkErrorBoundary.js";
 
@@ -356,6 +358,7 @@ export function CommandMenu({
 
   const [changelogOpen, setChangelogOpen] = useState(false);
   const [aboutOpen, setAboutOpen] = useState(false);
+  const [reportProblemOpen, setReportProblemOpen] = useState(false);
   const hasChangelog =
     typeof changelog === "string" && changelog.trim().length > 0;
   const showAbout = showAboutProp ?? hasChangelog;
@@ -374,6 +377,11 @@ export function CommandMenu({
     setTimeout(() => setAboutOpen(true), 50);
   }, [onOpenChange]);
 
+  const openReportProblem = useCallback(() => {
+    onOpenChange(false);
+    setTimeout(() => setReportProblemOpen(true), 50);
+  }, [onOpenChange]);
+
   useEffect(() => {
     if (!open) {
       setSearch("");
@@ -451,6 +459,13 @@ export function CommandMenu({
       .toLowerCase()
       .includes(search.toLowerCase());
   const showAboutRow = showAbout && aboutRowMatches;
+  const reportProblemLabel = t("agentChat.reportProblem.menuItem");
+  const showReportProblemRow =
+    !search ||
+    [reportProblemLabel, "bug", "issue", "problem", "report"]
+      .join(" ")
+      .toLowerCase()
+      .includes(search.toLowerCase());
   const settingsLabel = t("settingsShortcut.command");
   const showSettingsRow =
     !search ||
@@ -600,12 +615,31 @@ export function CommandMenu({
         </>
       )}
 
-      {showSignOutRow && (
+      {showReportProblemRow && (
         <>
           {(hasResults ||
             showSettingsRow ||
             showChangelogRow ||
             showAboutRow) && <CommandSeparator />}
+          <div className="p-1">
+            <CommandItemPrimitive
+              className="cursor-pointer gap-2 py-2"
+              onSelect={openReportProblem}
+            >
+              <IconMessageReport className="h-4 w-4 text-muted-foreground" />
+              <span>{reportProblemLabel}</span>
+            </CommandItemPrimitive>
+          </div>
+        </>
+      )}
+
+      {showSignOutRow && (
+        <>
+          {(hasResults ||
+            showSettingsRow ||
+            showChangelogRow ||
+            showAboutRow ||
+            showReportProblemRow) && <CommandSeparator />}
           <div className="p-1">
             <CommandItemPrimitive
               className="cursor-pointer gap-2 py-2"
@@ -624,6 +658,7 @@ export function CommandMenu({
             showSettingsRow ||
             showChangelogRow ||
             showAboutRow ||
+            showReportProblemRow ||
             showSignOutRow ||
             Boolean(results)) && <CommandSeparator />}
           <div className="p-1">
@@ -761,6 +796,11 @@ export function CommandMenu({
       {showAbout && (
         <AboutAgentNativeDialog open={aboutOpen} onOpenChange={setAboutOpen} />
       )}
+
+      <ReportProblemDialog
+        open={reportProblemOpen}
+        onOpenChange={setReportProblemOpen}
+      />
     </>
   );
 }

package/src/design-tweaks/scrub-input.tsx

@@ -91,6 +91,17 @@ interface PendingScrubTextCommit {
 }
 
 const activeScrubCancelCallbacks = new Set<() => void>();
+const mountedScrubInputs = new Set<() => ScrubInputDisplay>();
+
+export interface ScrubInputDisplay {
+  label: string;
+  shown: string;
+}
+
+/** What each mounted scrub input is showing right now. */
+export function readVisualScrubInputs(): ScrubInputDisplay[] {
+  return [...mountedScrubInputs].map((read) => read());
+}
 
 export function cancelActiveScrubInputs() {
   for (const cancel of [...activeScrubCancelCallbacks]) cancel();
@@ -181,6 +192,14 @@ export function VisualScrubInput({
     [],
   );
 
+  useEffect(() => {
+    const read = () => ({ label: ariaLabel ?? label, shown: draftRef.current });
+    mountedScrubInputs.add(read);
+    return () => {
+      mountedScrubInputs.delete(read);
+    };
+  }, [ariaLabel, label]);
+
   useEffect(() => {
     if (mixed) {
       pendingCommitRef.current = null;

package/src/design-tweaks/visual-style-controls.spec.tsx

@@ -11,6 +11,7 @@ import {
   VisualSegmentedControl,
   parseScrubExpression,
   parseScrubRelativeExpression,
+  readVisualScrubInputs,
 } from "./visual-style-controls.js";
 
 describe("visual style controls", () => {
@@ -109,6 +110,36 @@ describe("visual style controls", () => {
     },
   );
 
+  it("reads what each mounted scrub input shows until it unmounts", () => {
+    act(() => {
+      root.render(
+        <>
+          <VisualScrubInput
+            label="Opacity"
+            value={91}
+            unit="%"
+            onChange={vi.fn()}
+          />
+          <VisualScrubInput
+            label="Opacity"
+            value={40}
+            unit="%"
+            onChange={vi.fn()}
+          />
+        </>,
+      );
+    });
+
+    expect(readVisualScrubInputs()).toEqual([
+      { label: "Opacity", shown: "91%" },
+      { label: "Opacity", shown: "40%" },
+    ]);
+
+    act(() => root.render(<></>));
+
+    expect(readVisualScrubInputs()).toEqual([]);
+  });
+
   it("starts a base-rate scrub when Option-drag begins on the numeric input", () => {
     const onChange = vi.fn();
     act(() => {

package/src/design-tweaks/visual-style-controls.tsx

@@ -21,9 +21,11 @@ import { cn } from "../utils.js";
 export {
   cancelActiveScrubInputs,
   VisualScrubInput,
+  readVisualScrubInputs,
   resolvePendingScrubCommit,
   type PendingScrubCommit,
   type ScrubInputChangeMeta,
+  type ScrubInputDisplay,
   type ScrubInputProps,
 } from "./scrub-input.js";
 export {