@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/mcp-server/McpServerPicker.tsx

@@ -13,6 +13,7 @@ import { cn } from "@stigmer/theme";
 import type { EnvVarInput, McpServerUsageInput, ResourceRef } from "@stigmer/sdk";
 import type { SearchResult } from "@stigmer/protos/ai/stigmer/search/v1/io_pb";
 import { ApiResourceKind } from "@stigmer/protos/ai/stigmer/commons/apiresource/apiresourcekind/api_resource_kind_pb";
+import { OAuthConnectionHealth } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/io_pb";
 import { VendorApprovalStatus } from "@stigmer/protos/ai/stigmer/iam/oauthapp/v1/spec_pb";
 import type { EnvVarFormSubmitOptions } from "../environment/EnvVarForm.js";
 import { useMcpServerSearch } from "./useMcpServerSearch.js";
@@ -20,6 +21,7 @@ import { useScrollShadows } from "../internal/useScrollShadows.js";
 import { ScrollFade } from "../internal/ScrollFade.js";
 import { McpServerConfigPanel } from "./McpServerConfigPanel.js";
 import type { McpServerSetupEntry } from "./mcpServerSetupReducer.js";
+import { useMcpServerConnect } from "./useMcpServerConnect.js";
 import { useMcpServerOAuthConnect } from "./useMcpServerOAuthConnect.js";
 import { ScopeToggle } from "../library/ScopeToggle.js";
 import type { ResourceListScope } from "../search/index.js";
@@ -269,6 +271,17 @@ export function McpServerPicker({
   const { results, isLoading, error, query, setQuery } =
     useMcpServerSearch(org, { scope: activeScope });
   const oauth = useMcpServerOAuthConnect();
+  // Bare tool-discovery `connect`, used when sign-in already succeeded and
+  // only the chained discovery leg failed — relaunching the OAuth popup
+  // would burn a consent round for nothing (stigmer/stigmer#418).
+  const discovery = useMcpServerConnect();
+  // The oauth/discovery hooks are single instances shared by every server
+  // in the picker, so their error/phase/failedPhase signals are only
+  // meaningful for the server an attempt was started for. Without this
+  // key, server A's discovery failure would render under server B's
+  // configure view — and worse, make B's sign-in click retry discovery
+  // for a grant B never had.
+  const [oauthAttemptKey, setOauthAttemptKey] = useState<string | null>(null);
 
   const [focusIndex, setFocusIndex] = useState(-1);
   const [view, setView] = useState<PickerView>(() =>
@@ -431,28 +444,105 @@ export function McpServerPicker({
       (oauthStatus?.vendorApprovalStatus === VendorApprovalStatus.PENDING ||
         oauthStatus?.vendorApprovalStatus === VendorApprovalStatus.REJECTED);
 
+    // System env vars are only injected when the server declares them —
+    // the dialog and detail view pass these on every OAuth chain and
+    // bare connect; the picker must too.
+    const declaredEnvKeys = Object.keys(entry.mcpServer.spec?.env ?? {});
+
+    // Scope the shared hooks' signals to the server they belong to.
+    const isOwnOAuthAttempt = oauthAttemptKey === view.serverKey;
+    const oauthError = isOwnOAuthAttempt ? oauth.error : null;
+    const oauthFailedPhase = isOwnOAuthAttempt ? oauth.failedPhase : null;
+    const discoveryError = isOwnOAuthAttempt ? discovery.error : null;
+
+    // "Signed in — tools not discovered yet" (the stigmer/stigmer#229
+    // two-act persistence gap, picker arm: stigmer/stigmer#418). Two
+    // signals, mirroring the detail view:
+    // - In-flow: the OAuth chain broke in its "connecting" phase, so
+    //   sign-in succeeded and only discovery failed — the entry's own
+    //   data is still stale at this point.
+    // - Server truth: the entry resolved ready off a usable grant with
+    //   nothing discovered. Survives popover close/reopen, where the
+    //   in-flow signal dies with the hook. Token-expired grants are
+    //   excluded — re-auth, not discovery, is their next step.
+    const isDiscoveryRetry = oauthFailedPhase === "connecting";
+    const grantUsable =
+      entry.oauthConnectionHealth ===
+        OAuthConnectionHealth.OAUTH_CONNECTION_HEALTH_HEALTHY ||
+      entry.oauthConnectionHealth ===
+        OAuthConnectionHealth.OAUTH_CONNECTION_HEALTH_TOKEN_EXPIRED_REFRESHABLE;
+    const isOAuthStranded =
+      isDiscoveryRetry ||
+      (hasOAuth &&
+        entry.status === "ready" &&
+        grantUsable &&
+        entry.discoveredTools.length === 0);
+
     const oauthSignInProps =
       hasOAuth && !isManualOverride
         ? {
             onSignIn: async () => {
               if (!entry.mcpServer.metadata?.id) return;
+              const serverId = entry.mcpServer.metadata.id;
+              const connectOrg = activeOrg ?? org;
+              setOauthAttemptKey(view.serverKey);
+
+              if (isOAuthStranded) {
+                // Sign-in already succeeded — the grant is stored
+                // server-side. Retry bare discovery; never relaunch the
+                // popup (stigmer/stigmer#418).
+                try {
+                  await discovery.connect(
+                    serverId,
+                    connectOrg,
+                    undefined,
+                    declaredEnvKeys,
+                  );
+                  // Discovery succeeded — retire the chain's stale
+                  // failure and re-evaluate the entry so it resolves
+                  // ready with the discovered tools.
+                  oauth.clearError();
+                  setup.onServerAdded(ref);
+                } catch {
+                  // error state managed by the discovery hook
+                }
+                return;
+              }
+
               try {
-                await oauth.startOAuth(
-                  entry.mcpServer.metadata.id,
-                  activeOrg ?? org,
-                );
+                await oauth.startOAuth(serverId, connectOrg, declaredEnvKeys);
                 setup.onServerAdded(ref);
               } catch {
                 // error state managed by oauth hook
               }
             },
-            phase: oauth.phase,
+            // oauth.phase stays unscoped on purpose: it disables every
+            // server's sign-in button while a popup flow is in flight,
+            // preventing two concurrent flows over the same hook.
+            phase:
+              discovery.isConnecting && isOwnOAuthAttempt
+                ? ("connecting" as const)
+                : oauth.phase,
             isConnected: !oauthTokenMissing,
-            error: oauth.error,
-            onClearError: oauth.clearError,
+            connectionHealth: entry.oauthConnectionHealth,
+            error: oauthError ?? discoveryError,
+            // A bare-discovery failure is by definition a discovery-leg
+            // failure — keep the honest "signed in, but discovery
+            // failed" copy for it.
+            failedPhase: oauthError
+              ? oauthFailedPhase
+              : discoveryError
+                ? ("connecting" as const)
+                : null,
+            isOAuthStranded,
+            onClearError: () => {
+              oauth.clearError();
+              discovery.clearError();
+            },
             isVendorApprovalPending,
             isVendorApprovalBlocked,
             vendorApprovalDocsUrl: oauthStatus?.vendorApprovalDocsUrl || null,
+            manualEntrySupported,
           }
         : undefined;
 
@@ -479,7 +569,7 @@ export function McpServerPicker({
         : undefined;
 
     return (
-      <div className={cn("w-72", className)}>
+      <div className={cn("stg:w-72", className)}>
         <McpServerConfigPanel
           mcpServer={entry.mcpServer}
           oauthSignIn={oauthSignInProps}
@@ -519,19 +609,19 @@ export function McpServerPicker({
   // -----------------------------------------------------------------------
 
   return (
-    <div className={cn("space-y-2 w-72", className)}>
+    <div className={cn("stg:space-y-2 stg:w-72", className)}>
       {/* Selected items */}
       {selectedCount > 0 && (
-        <div className="space-y-1">
-          <div className="text-[0.65rem] font-medium text-muted-foreground">
+        <div className="stg:space-y-1">
+          <div className="stg:text-[0.65rem] stg:font-medium stg:text-muted-foreground">
             Selected
           </div>
-          <div className="relative">
+          <div className="stg:relative">
             {selected_.canScrollUp && <ScrollFade position="top" />}
 
             <div
               ref={selected_.scrollRef}
-              className="max-h-28 space-y-1 overflow-y-auto"
+              className="stg:max-h-28 stg:space-y-1 stg:overflow-y-auto"
             >
               {setup
                 ? Object.entries(setup.entries).map(([key, entry]) => (
@@ -582,16 +672,16 @@ export function McpServerPicker({
         onChange={(e) => setQuery(e.target.value)}
         onKeyDown={handleSearchKeyDown}
         disabled={disabled}
-        className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+        className="stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground stg:placeholder:text-muted-foreground stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:disabled:pointer-events-none stg:disabled:opacity-50"
         autoFocus
       />
 
       <ScopeToggle value={activeScope} onChange={setActiveScope} disabled={disabled} />
 
-      {error && <p className="text-xs text-destructive">{error.message}</p>}
+      {error && <p className="stg:text-xs stg:text-destructive">{error.message}</p>}
 
       {/* Scrollable results list */}
-      <div className="relative">
+      <div className="stg:relative">
         {results_.canScrollUp && <ScrollFade position="top" />}
 
         <div
@@ -599,12 +689,12 @@ export function McpServerPicker({
           id={listId}
           role="listbox"
           aria-label="MCP Servers"
-          className="max-h-52 overflow-y-auto"
+          className="stg:max-h-52 stg:overflow-y-auto"
         >
           {isLoading ? (
             <LoadingSkeleton />
           ) : availableResults.length === 0 ? (
-            <div className="py-4 text-center text-xs text-muted-foreground">
+            <div className="stg:py-4 stg:text-center stg:text-xs stg:text-muted-foreground">
               {query
                 ? "No MCP servers match your search"
                 : selectedCount > 0
@@ -621,30 +711,30 @@ export function McpServerPicker({
                 onClick={() => handleSelect(result)}
                 disabled={disabled}
                 className={cn(
-                  "group flex w-full flex-col gap-0.5 rounded-md px-2 py-1.5 text-left text-xs transition-colors",
-                  "disabled:pointer-events-none disabled:opacity-50",
+                  "stg:group stg:flex stg:w-full stg:flex-col stg:gap-0.5 stg:rounded-md stg:px-2 stg:py-1.5 stg:text-left stg:text-xs stg:transition-colors",
+                  "stg:disabled:pointer-events-none stg:disabled:opacity-50",
                   idx === focusIndex
-                    ? "bg-accent text-foreground"
-                    : "text-foreground hover:bg-accent-hover",
+                    ? "stg:bg-accent stg:text-foreground"
+                    : "stg:text-foreground stg:hover:bg-accent-hover",
                 )}
                 role="option"
                 aria-selected={idx === focusIndex}
               >
-                <span className="flex items-center gap-1.5">
+                <span className="stg:flex stg:items-center stg:gap-1.5">
                   <McpServerIcon />
-                  <span className="truncate font-medium">
+                  <span className="stg:truncate stg:font-medium">
                     <HighlightMatch text={result.name} query={query} />
                   </span>
-                  <span className="ml-auto shrink-0 text-[0.6rem] text-muted-foreground">
+                  <span className="stg:ml-auto stg:shrink-0 stg:text-[0.6rem] stg:text-muted-foreground">
                     {result.org}
                   </span>
                 </span>
                 {result.description && (
                   <span
                     className={cn(
-                      "pl-5 text-[0.65rem] text-muted-foreground",
+                      "stg:pl-5 stg:text-[0.65rem] stg:text-muted-foreground",
                       idx !== focusIndex &&
-                        "line-clamp-2 group-hover:line-clamp-none",
+                        "stg:line-clamp-2 stg:group-hover:line-clamp-none",
                     )}
                   >
                     {result.description}
@@ -675,14 +765,14 @@ function SimpleServerRow({
   readonly disabled?: boolean;
 }) {
   return (
-    <div className="flex items-center gap-2 rounded-md bg-muted-faint px-2 py-1 text-xs">
+    <div className="stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:bg-muted-faint stg:px-2 stg:py-1 stg:text-xs">
       <McpServerIcon />
-      <span className="min-w-0 flex-1 truncate text-foreground">{slug}</span>
+      <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-foreground">{slug}</span>
       <button
         type="button"
         onClick={onRemove}
         disabled={disabled}
-        className="shrink-0 text-muted-foreground hover:text-destructive disabled:pointer-events-none"
+        className="stg:shrink-0 stg:text-muted-foreground stg:hover:text-destructive stg:disabled:pointer-events-none"
         aria-label={`Remove ${slug}`}
       >
         <XIcon />
@@ -715,19 +805,19 @@ function SetupServerRow({
   const hasError = entry.error != null;
 
   return (
-    <div className="space-y-1">
+    <div className="stg:space-y-1">
       <div
         className={cn(
-          "flex items-center gap-2 rounded-md px-2 py-1 text-xs",
-          hasError ? "bg-destructive-subtle" : "bg-muted-faint",
+          "stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:px-2 stg:py-1 stg:text-xs",
+          hasError ? "stg:bg-destructive-subtle" : "stg:bg-muted-faint",
         )}
       >
         <StatusIndicator status={entry.status} hasError={hasError} />
-        <span className="min-w-0 flex-1 truncate text-foreground">{slug}</span>
+        <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-foreground">{slug}</span>
 
         {/* Action area — status-dependent */}
         {entry.status === "loading" && !hasError && (
-          <span className="shrink-0 text-[0.6rem] text-muted-foreground">
+          <span className="stg:shrink-0 stg:text-[0.6rem] stg:text-muted-foreground">
             Loading…
           </span>
         )}
@@ -738,9 +828,9 @@ function SetupServerRow({
             onClick={onRetry}
             disabled={disabled}
             className={cn(
-              "shrink-0 rounded px-1.5 py-0.5 text-[0.6rem] font-medium",
-              "text-destructive hover:bg-destructive-subtle",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:shrink-0 stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[0.6rem] stg:font-medium",
+              "stg:text-destructive stg:hover:bg-destructive-subtle",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             Retry
@@ -753,17 +843,18 @@ function SetupServerRow({
             onClick={onConfigure}
             disabled={disabled}
             className={cn(
-              "shrink-0 rounded px-1.5 py-0.5 text-[0.6rem] font-medium",
-              "text-warning hover:bg-warning/10",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:shrink-0 stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[0.6rem] stg:font-medium",
+              "stg:text-warning stg:hover:bg-warning/10",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
+            aria-label={`Configure ${slug}`}
           >
             Configure
           </button>
         )}
 
         {isSubmitting && (
-          <span className="shrink-0 text-[0.6rem] text-muted-foreground">
+          <span className="stg:shrink-0 stg:text-[0.6rem] stg:text-muted-foreground">
             Saving…
           </span>
         )}
@@ -774,10 +865,11 @@ function SetupServerRow({
             onClick={onConfigure}
             disabled={disabled}
             className={cn(
-              "shrink-0 flex items-center gap-0.5 rounded px-1.5 py-0.5 text-[0.6rem] font-medium",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:shrink-0 stg:flex stg:items-center stg:gap-0.5 stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[0.6rem] stg:font-medium",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
+            aria-label={`Configure ${slug}`}
           >
             {entry.discoveredTools.length > 0 && (
               <span>
@@ -793,7 +885,7 @@ function SetupServerRow({
           type="button"
           onClick={onRemove}
           disabled={disabled || isSubmitting}
-          className="shrink-0 text-muted-foreground hover:text-destructive disabled:pointer-events-none disabled:opacity-50"
+          className="stg:shrink-0 stg:text-muted-foreground stg:hover:text-destructive stg:disabled:pointer-events-none stg:disabled:opacity-50"
           aria-label={`Remove ${slug}`}
         >
           <XIcon />
@@ -802,7 +894,7 @@ function SetupServerRow({
 
       {/* Inline error for loading failures */}
       {hasError && entry.status === "loading" && (
-        <p className="px-2 text-[0.6rem] leading-relaxed text-destructive line-clamp-2">
+        <p className="stg:px-2 stg:text-[0.6rem] stg:leading-relaxed stg:text-destructive stg:line-clamp-2">
           {entry.error!.message}
         </p>
       )}
@@ -824,7 +916,7 @@ function StatusIndicator({
   if (hasError) {
     return (
       <span
-        className="inline-block size-2 shrink-0 rounded-full bg-destructive"
+        className="stg:inline-block stg:size-2 stg:shrink-0 stg:rounded-full stg:bg-destructive"
         aria-label="Error"
       />
     );
@@ -837,14 +929,14 @@ function StatusIndicator({
     case "needsSetup":
       return (
         <span
-          className="inline-block size-2 shrink-0 rounded-full bg-warning"
+          className="stg:inline-block stg:size-2 stg:shrink-0 stg:rounded-full stg:bg-warning"
           aria-label="Needs setup"
         />
       );
     case "ready":
       return (
         <span
-          className="inline-block size-2 shrink-0 rounded-full bg-emerald-500"
+          className="stg:inline-block stg:size-2 stg:shrink-0 stg:rounded-full stg:bg-emerald-500"
           aria-label="Ready"
         />
       );
@@ -862,7 +954,7 @@ function HighlightMatch({ text, query }: { text: string; query: string }) {
   return (
     <>
       {text.slice(0, idx)}
-      <span className="font-semibold">
+      <span className="stg:font-semibold">
         {text.slice(idx, idx + query.length)}
       </span>
       {text.slice(idx + query.length)}
@@ -872,15 +964,15 @@ function HighlightMatch({ text, query }: { text: string; query: string }) {
 
 function LoadingSkeleton() {
   return (
-    <div className="space-y-1 py-1">
+    <div className="stg:space-y-1 stg:py-1">
       {[60, 75, 50, 68].map((w, i) => (
-        <div key={i} className="flex flex-col gap-1 px-2 py-1.5">
+        <div key={i} className="stg:flex stg:flex-col stg:gap-1 stg:px-2 stg:py-1.5">
           <div
-            className="h-3 rounded bg-muted animate-pulse"
+            className="stg:h-3 stg:rounded stg:bg-muted stg:animate-pulse"
             style={{ width: `${w}%` }}
           />
           <div
-            className="h-2 rounded bg-muted-subtle animate-pulse"
+            className="stg:h-2 stg:rounded stg:bg-muted-subtle stg:animate-pulse"
             style={{ width: `${Math.min(w + 15, 90)}%` }}
           />
         </div>
@@ -904,7 +996,7 @@ function McpServerIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
       aria-hidden="true"
     >
       <rect x="2" y="2" width="12" height="4" rx="1" />
@@ -961,7 +1053,7 @@ function SmallSpinner() {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="shrink-0 animate-spin text-muted-foreground"
+      className="stg:shrink-0 stg:animate-spin stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />

package/src/mcp-server/McpToolSelector.tsx

@@ -6,6 +6,7 @@ import type { DiscoveredTool } from "@stigmer/protos/ai/stigmer/agentic/mcpserve
 import type { ToolApprovalPolicy } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/spec_pb";
 import { useScrollShadows } from "../internal/useScrollShadows.js";
 import { ScrollFade } from "../internal/ScrollFade.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 
 /** Props for {@link McpToolSelector}. */
 export interface McpToolSelectorProps {
@@ -89,15 +90,15 @@ export function McpToolSelector({
 
   if (tools.length === 0) {
     return (
-      <div className={cn("space-y-1", className)}>
-        <div className="text-[0.65rem] font-medium text-muted-foreground">
+      <div className={cn("stg:space-y-1", className)}>
+        <div className="stg:text-[0.65rem] stg:font-medium stg:text-muted-foreground">
           Tools
         </div>
-        <div className="rounded-md border border-border px-3 py-4 text-center">
-          <p className="text-xs text-muted-foreground">
+        <div className="stg:rounded-md stg:border stg:border-border stg:px-3 stg:py-4 stg:text-center">
+          <p className="stg:text-xs stg:text-muted-foreground">
             Tools have not been discovered yet.
           </p>
-          <p className="mt-1 text-[0.65rem] text-muted-foreground-subtle">
+          <p className="stg:mt-1 stg:text-[0.65rem] stg:text-muted-foreground-subtle">
             All tools will be enabled by default.
           </p>
         </div>
@@ -106,21 +107,21 @@ export function McpToolSelector({
   }
 
   return (
-    <div className={cn("space-y-1.5", className)}>
+    <div className={cn("stg:space-y-1.5", className)}>
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <span className="text-[0.65rem] font-medium text-muted-foreground">
+      <div className="stg:flex stg:items-center stg:justify-between">
+        <span className="stg:text-[0.65rem] stg:font-medium stg:text-muted-foreground">
           Tools ({tools.length})
         </span>
-        <span className="flex items-center gap-1">
+        <span className="stg:flex stg:items-center stg:gap-1">
           <button
             type="button"
             onClick={handleSelectAll}
             disabled={disabled}
             className={cn(
-              "rounded px-1.5 py-0.5 text-[0.6rem] font-medium",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[0.6rem] stg:font-medium",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             All
@@ -130,9 +131,9 @@ export function McpToolSelector({
             onClick={handleSelectNone}
             disabled={disabled}
             className={cn(
-              "rounded px-1.5 py-0.5 text-[0.6rem] font-medium",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[0.6rem] stg:font-medium",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             None
@@ -141,14 +142,14 @@ export function McpToolSelector({
       </div>
 
       {/* Tool list */}
-      <div className="relative">
+      <div className="stg:relative">
         {list.canScrollUp && <ScrollFade position="top" />}
 
         <div
           ref={list.scrollRef}
           role="group"
           aria-label="MCP server tools"
-          className="max-h-52 space-y-0.5 overflow-y-auto"
+          className="stg:max-h-52 stg:space-y-0.5 stg:overflow-y-auto"
         >
           {tools.map((tool) => {
             const checkboxId = `${instanceId}-tool-${tool.name}`;
@@ -162,13 +163,13 @@ export function McpToolSelector({
               <div
                 key={tool.name}
                 className={cn(
-                  "group rounded-md px-2 py-1.5 transition-colors",
-                  isEnabled ? "bg-accent-hover" : "hover:bg-accent-hover",
+                  "stg:group stg:rounded-md stg:px-2 stg:py-1.5 stg:transition-colors",
+                  isEnabled ? "stg:bg-accent-hover" : "stg:hover:bg-accent-hover",
                 )}
               >
                 <label
                   htmlFor={checkboxId}
-                  className="flex cursor-pointer items-start gap-2"
+                  className="stg:flex stg:cursor-pointer stg:items-start stg:gap-2"
                 >
                   <input
                     id={checkboxId}
@@ -177,11 +178,11 @@ export function McpToolSelector({
                     onChange={() => handleToggle(tool.name)}
                     disabled={disabled}
                     aria-describedby={descId}
-                    className="mt-0.5 size-3 shrink-0 accent-primary disabled:pointer-events-none disabled:opacity-50"
+                    className="stg:mt-0.5 stg:size-3 stg:shrink-0 stg:accent-primary stg:disabled:pointer-events-none stg:disabled:opacity-50"
                   />
-                  <span className="min-w-0 flex-1">
-                    <span className="flex items-center gap-1.5">
-                      <span className="truncate font-mono text-xs text-foreground">
+                  <span className="stg:min-w-0 stg:flex-1">
+                    <span className="stg:flex stg:items-center stg:gap-1.5">
+                      <span className="stg:truncate stg:font-mono stg:text-xs stg:text-foreground">
                         {tool.name}
                       </span>
                       {approvalMessage !== undefined && (
@@ -191,7 +192,7 @@ export function McpToolSelector({
                     {tool.description && (
                       <span
                         id={descId}
-                        className="line-clamp-2 group-hover:line-clamp-none group-focus-within:line-clamp-none text-[0.65rem] leading-relaxed text-muted-foreground"
+                        className="stg:line-clamp-2 stg:group-hover:line-clamp-none stg:group-focus-within:line-clamp-none stg:text-[0.65rem] stg:leading-relaxed stg:text-muted-foreground"
                       >
                         {tool.description}
                       </span>
@@ -217,13 +218,17 @@ function ApprovalBadge({ message }: { readonly message: string }) {
   const resolvedTitle = message || "This tool requires approval before execution";
 
   return (
-    <span
-      className="inline-flex shrink-0 items-center gap-0.5 rounded px-1 py-0.5 text-[0.6rem] font-medium leading-none bg-warning/15 text-warning"
-      title={resolvedTitle}
-    >
-      <ShieldIcon />
-      Approval
-    </span>
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span className="stg:inline-flex stg:shrink-0 stg:items-center stg:gap-0.5 stg:rounded stg:px-1 stg:py-0.5 stg:text-[0.6rem] stg:font-medium stg:leading-none stg:bg-warning/15 stg:text-warning" />
+        }
+      >
+        <ShieldIcon />
+        Approval
+      </TooltipTrigger>
+      <TooltipContent side="top">{resolvedTitle}</TooltipContent>
+    </Tooltip>
   );
 }