@agent-native/core 0.117.1 → 0.118.0

package/corpus/core/src/client/progress/RunsTray.tsx

@@ -1,3 +1,8 @@
+import {
+  Popover as DesignSystemPopover,
+  Spinner as DesignSystemSpinner,
+  Tooltip as DesignSystemTooltip,
+} from "@agent-native/toolkit/design-system";
 import {
   IconAlertCircle,
   IconCheck,
@@ -17,17 +22,6 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
 } from "../components/ui/dropdown-menu.js";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "../components/ui/popover.js";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "../components/ui/tooltip.js";
 import { useFormatters, useT } from "../i18n.js";
 import { useChangeVersion } from "../use-change-version.js";
 import { usePausingInterval } from "../use-pausing-interval.js";
@@ -240,84 +234,91 @@ export function RunsTray({
 
   if (!hasRuns && hideWhenIdle) return null;
 
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <TooltipProvider delayDuration={200}>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <PopoverTrigger asChild>
-              <button
-                type="button"
-                aria-label={triggerLabel}
-                aria-expanded={open}
-                className={cn(
-                  "an-runs-tray__trigger relative inline-flex shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/40 hover:text-foreground",
-                  triggerVariant === "pill"
-                    ? "h-7 min-w-[68px] gap-1.5 border border-border/70 bg-background px-2 text-[11px] font-medium"
-                    : "h-8 w-8",
-                  open && "bg-accent/50 text-foreground",
-                  className,
-                )}
-              >
-                <TriggerIcon
-                  size={triggerVariant === "pill" ? 14 : 18}
-                  className={cn(
-                    triggerTone,
-                    activeCount > 0 &&
-                      "animate-spin motion-reduce:animate-none",
-                  )}
-                  aria-hidden
-                />
-                {triggerVariant === "pill" ? (
-                  <span className="leading-none">{t("runsTray.runs")}</span>
-                ) : null}
-                {activeCount > 0 ? (
-                  <span
-                    aria-hidden
-                    className={cn(
-                      "an-runs-tray__badge rounded-full bg-primary text-[10px] font-medium leading-[14px] text-primary-foreground",
-                      triggerVariant === "pill"
-                        ? "min-w-4 px-1"
-                        : "absolute -right-0.5 -top-0.5 px-1",
-                    )}
-                  >
-                    {activeCount > 9 ? "9+" : activeCount}
-                  </span>
-                ) : failedCount > 0 ? (
-                  <span
-                    aria-hidden
-                    className={cn(
-                      "rounded-full bg-destructive text-[10px] font-medium leading-[14px] text-destructive-foreground",
-                      triggerVariant === "pill"
-                        ? "min-w-4 px-1"
-                        : "absolute -right-0.5 -top-0.5 px-1",
-                    )}
-                  >
-                    {failedCount > 9 ? "9+" : failedCount}
-                  </span>
-                ) : null}
-              </button>
-            </PopoverTrigger>
-          </TooltipTrigger>
-          <TooltipContent>{triggerLabel}</TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <PopoverContent
-        align={align}
-        sideOffset={8}
-        className="an-runs-tray__menu w-80 max-w-[calc(100vw-24px)] p-0"
-      >
-        <RunsTrayContent
-          runs={runs}
-          hasRuns={hasRuns}
-          activeCount={activeCount}
-          terminalCount={terminalCount}
-          onDismiss={dismissRun}
-          onStop={stopRun}
-          onOpenThread={onOpenThread}
+  const trigger = (
+    <button
+      type="button"
+      aria-label={triggerLabel}
+      aria-expanded={open}
+      className={cn(
+        "an-runs-tray__trigger relative inline-flex shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/40 hover:text-foreground",
+        triggerVariant === "pill"
+          ? "h-7 min-w-[68px] gap-1.5 border border-border/70 bg-background px-2 text-[11px] font-medium"
+          : "h-8 w-8",
+        open && "bg-accent/50 text-foreground",
+        className,
+      )}
+    >
+      {activeCount > 0 ? (
+        <DesignSystemSpinner
+          label={triggerLabel}
+          size={triggerVariant === "pill" ? "compact" : "default"}
+          className={cn(triggerTone, "motion-reduce:animate-none")}
         />
-      </PopoverContent>
-    </Popover>
+      ) : (
+        <TriggerIcon
+          size={triggerVariant === "pill" ? 14 : 18}
+          className={triggerTone}
+          aria-hidden
+        />
+      )}
+      {triggerVariant === "pill" ? (
+        <span className="leading-none">{t("runsTray.runs")}</span>
+      ) : null}
+      {activeCount > 0 ? (
+        <span
+          aria-hidden
+          className={cn(
+            "an-runs-tray__badge rounded-full bg-primary text-[10px] font-medium leading-[14px] text-primary-foreground",
+            triggerVariant === "pill"
+              ? "min-w-4 px-1"
+              : "absolute -right-0.5 -top-0.5 px-1",
+          )}
+        >
+          {activeCount > 9 ? "9+" : activeCount}
+        </span>
+      ) : failedCount > 0 ? (
+        <span
+          aria-hidden
+          className={cn(
+            "rounded-full bg-destructive text-[10px] font-medium leading-[14px] text-destructive-foreground",
+            triggerVariant === "pill"
+              ? "min-w-4 px-1"
+              : "absolute -right-0.5 -top-0.5 px-1",
+          )}
+        >
+          {failedCount > 9 ? "9+" : failedCount}
+        </span>
+      ) : null}
+    </button>
+  );
+
+  return (
+    <DesignSystemPopover
+      open={open}
+      onOpenChange={setOpen}
+      trigger={
+        <span className="contents">
+          <DesignSystemTooltip
+            trigger={trigger}
+            content={triggerLabel}
+            delayMs={200}
+          />
+        </span>
+      }
+      align={align}
+      placement="bottom"
+      className="an-runs-tray__menu w-80 max-w-[calc(100vw-24px)] p-0"
+    >
+      <RunsTrayContent
+        runs={runs}
+        hasRuns={hasRuns}
+        activeCount={activeCount}
+        terminalCount={terminalCount}
+        onDismiss={dismissRun}
+        onStop={stopRun}
+        onOpenThread={onOpenThread}
+      />
+    </DesignSystemPopover>
   );
 }
 

package/corpus/core/src/client/resources/McpConnectionSuggestion.tsx

@@ -20,6 +20,7 @@ import {
   getMcpIntegrationApiFallback,
   getDefaultMcpIntegrations,
   isMcpConnectionFailureText,
+  navigateToMcpOAuthStart,
   type DefaultMcpIntegration,
 } from "./mcp-integration-catalog.js";
 import { McpIntegrationDialog } from "./McpIntegrationDialog.js";
@@ -149,8 +150,9 @@ export function McpConnectionSuggestion({
     }
 
     if (canStartOAuth(integration)) {
+      setConnecting(true);
       saveMcpConnectionResume(variant === "response" ? contextText : text);
-      window.location.assign(
+      navigateToMcpOAuthStart(
         agentNativePath(
           buildMcpOAuthStartUrl({
             name: integration.name,
@@ -209,7 +211,7 @@ export function McpConnectionSuggestion({
         className={
           variant === "response"
             ? "mt-3 flex max-w-[520px] items-center gap-2 rounded-lg border border-primary/20 bg-primary/5 px-3 py-2 text-[12px]"
-            : "mx-auto mb-2 flex w-[min(100%,680px)] items-center gap-2 rounded-lg border border-primary/20 bg-primary/5 px-3 py-2 text-[12px]"
+            : "mx-auto mb-2 flex w-[min(calc(100%_-_1.5rem),680px)] items-center gap-2 rounded-lg border border-primary/20 bg-primary/5 px-3 py-2 text-[12px]"
         }
         data-mcp-connection-suggestion={integration.id}
       >
@@ -238,6 +240,7 @@ export function McpConnectionSuggestion({
           type="button"
           onClick={() => void connect()}
           disabled={connecting}
+          aria-busy={connecting}
           className="inline-flex shrink-0 items-center gap-1 rounded-md bg-primary px-2.5 py-1.5 text-[11px] font-medium text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-60"
         >
           {connecting && <IconLoader2 className="h-3 w-3 animate-spin" />}

package/corpus/core/src/client/resources/McpIntegrationDialog.tsx

@@ -30,6 +30,7 @@ import {
   getMcpIntegrationApiFallback,
   getDefaultMcpIntegrations,
   isCustomMcpIntegrationEnabled,
+  navigateToMcpOAuthStart,
   resolveMcpIntegrationScope,
   type DefaultMcpIntegration,
 } from "./mcp-integration-catalog.js";
@@ -242,24 +243,29 @@ export function McpIntegrationDialog({
     setMode("form");
   };
 
-  const beginOAuth = (args: {
-    name: string;
-    url: string;
-    description: string;
-  }) => {
+  const beginOAuth = (
+    args: {
+      name: string;
+      url: string;
+      description: string;
+    },
+    options?: { quickId?: string },
+  ) => {
     const validationError = getMcpUrlValidationError(args.url);
     if (validationError) {
       setError(validationError);
       setTestResult(null);
       return;
     }
+    setBusy(true);
+    setQuickBusyId(options?.quickId ?? null);
     const returnUrl =
       typeof window === "undefined"
         ? "/"
         : window.location.pathname +
           window.location.search +
           window.location.hash;
-    window.location.assign(
+    navigateToMcpOAuthStart(
       agentNativePath(
         buildMcpOAuthStartUrl({
           name: args.name,
@@ -272,12 +278,18 @@ export function McpIntegrationDialog({
     );
   };
 
-  const connectWithOAuth = (integration: DefaultMcpIntegration) =>
-    beginOAuth({
-      name: integration.name,
-      url: integration.url,
-      description: integration.description,
-    });
+  const connectWithOAuth = (
+    integration: DefaultMcpIntegration,
+    options?: { quickId?: string },
+  ) =>
+    beginOAuth(
+      {
+        name: integration.name,
+        url: integration.url,
+        description: integration.description,
+      },
+      options,
+    );
 
   const connectCustomWithOAuth = () => {
     if (!name.trim()) {
@@ -338,7 +350,7 @@ export function McpIntegrationDialog({
       return;
     }
     if (integration.authMode === "oauth") {
-      connectWithOAuth(integration);
+      connectWithOAuth(integration, { quickId: integration.id });
       return;
     }
     if (integration.authMode === "headers") {
@@ -563,6 +575,7 @@ export function McpIntegrationDialog({
                             type="button"
                             onClick={() => quickConnect(integration)}
                             disabled={busy}
+                            aria-busy={quickBusyId === integration.id}
                             className={cn(
                               "inline-flex h-8 flex-1 items-center justify-center gap-1.5 rounded-md bg-primary px-2.5 text-[12px] font-medium text-primary-foreground hover:bg-primary/90",
                               busy && "cursor-not-allowed opacity-70",
@@ -773,8 +786,12 @@ export function McpIntegrationDialog({
                   type="button"
                   onClick={() => connectWithOAuth(selected)}
                   disabled={!name.trim() || !url.trim() || busy}
+                  aria-busy={busy}
                   className="rounded-md border border-border bg-background px-3 py-1.5 text-[12px] font-medium text-foreground hover:bg-accent disabled:pointer-events-none disabled:opacity-40"
                 >
+                  {busy && (
+                    <IconLoader2 className="me-1.5 inline h-3.5 w-3.5 animate-spin" />
+                  )}
                   {t("mcpIntegrations.connectWithOAuth")}
                 </button>
               ) : !selected ? (
@@ -782,8 +799,12 @@ export function McpIntegrationDialog({
                   type="button"
                   onClick={connectCustomWithOAuth}
                   disabled={!name.trim() || !url.trim() || busy}
+                  aria-busy={busy}
                   className="rounded-md border border-border bg-background px-3 py-1.5 text-[12px] font-medium text-foreground hover:bg-accent disabled:pointer-events-none disabled:opacity-40"
                 >
+                  {busy && (
+                    <IconLoader2 className="me-1.5 inline h-3.5 w-3.5 animate-spin" />
+                  )}
                   {t("mcpIntegrations.connectWithOAuth")}
                 </button>
               ) : null}

package/corpus/core/src/client/resources/mcp-integration-catalog.ts

@@ -687,6 +687,19 @@ export function buildMcpOAuthStartUrl({
   return `/_agent-native/mcp/servers/oauth/start?${params.toString()}`;
 }
 
+export function navigateToMcpOAuthStart(url: string): void {
+  if (typeof window === "undefined") return;
+
+  const navigate = () => {
+    window.setTimeout(() => window.location.assign(url), 0);
+  };
+  if (typeof window.requestAnimationFrame === "function") {
+    window.requestAnimationFrame(navigate);
+  } else {
+    navigate();
+  }
+}
+
 export function resolveMcpIntegrationScope(
   defaultScope: "user" | "org",
   hasOrg: boolean,

package/corpus/core/src/client/settings/DemoModeSection.tsx

@@ -1,5 +1,6 @@
 /** Browser-local presentation toggle. Backend and agent results stay real. */
 
+import { Switch } from "@agent-native/toolkit/design-system";
 import { IconEyeOff } from "@tabler/icons-react";
 
 import { setBrowserDemoModeEnabled } from "../../demo/browser-state.js";
@@ -20,25 +21,12 @@ export function DemoModeSection() {
           stay real and access-scoped.
         </p>
       </div>
-      <button
-        type="button"
-        role="switch"
-        aria-checked={enabled}
+      <Switch
+        checked={enabled}
+        onChange={(checked) => setBrowserDemoModeEnabled(checked)}
         aria-label="Enable demo mode"
-        onClick={() => setBrowserDemoModeEnabled(!enabled)}
-        // Theme tokens; streaming agent owns layout.
-        className={`relative inline-flex h-4 w-7 shrink-0 cursor-pointer items-center rounded-full transition-colors ${
-          enabled
-            ? "bg-primary"
-            : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
-        }`}
-      >
-        <span
-          className={`inline-block h-3 w-3 transform rounded-full bg-background transition-transform ${
-            enabled ? "translate-x-3.5" : "translate-x-0.5"
-          }`}
-        />
-      </button>
+        className="shrink-0"
+      />
     </div>
   );
 }