@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/composer/ConfigureMenu.tsx

@@ -2,6 +2,7 @@
 
 import { cn } from "@stigmer/theme";
 import { Popover } from "@base-ui/react/popover";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { useStigmerPortalContainer } from "../portal-container.js";
 import { ConfigureIcon } from "./icons.js";
 
@@ -71,38 +72,46 @@ export function ConfigureMenu({
 
   return (
     <Popover.Root open={open} onOpenChange={handleOpenChange}>
-      <Popover.Trigger
-        disabled={disabled}
-        title="Configure"
-        className={cn(
-          "inline-flex h-8 w-8 items-center justify-center rounded-md text-xs transition-colors",
-          "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-          "disabled:pointer-events-none disabled:opacity-50",
-        )}
-        aria-label="Configure agent, tools, and skills"
-      >
-        <span className="relative">
-          <ConfigureIcon />
-          {totalCount > 0 && (
-            <span className="absolute -right-1.5 -top-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[0.5rem] font-medium leading-none text-primary-foreground">
-              {totalCount}
+      {/* The tooltip trigger is a wrapper span, not the popover trigger
+          itself: `disabled` adds `pointer-events-none` to the button, so
+          only the span keeps hover — the icon's name stays discoverable
+          while the composer is disabled. */}
+      <Tooltip>
+        <TooltipTrigger render={<span className="stg:inline-flex" />}>
+          <Popover.Trigger
+            disabled={disabled}
+            className={cn(
+              "stg:inline-flex stg:h-8 stg:w-8 stg:items-center stg:justify-center stg:rounded-md stg:text-xs stg:transition-colors",
+              "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 agent, tools, and skills"
+          >
+            <span className="stg:relative">
+              <ConfigureIcon />
+              {totalCount > 0 && (
+                <span className="stg:absolute stg:-right-1.5 stg:-top-1.5 stg:flex stg:h-3.5 stg:min-w-3.5 stg:items-center stg:justify-center stg:rounded-full stg:bg-primary stg:px-0.5 stg:text-[0.5rem] stg:font-medium stg:leading-none stg:text-primary-foreground">
+                  {totalCount}
+                </span>
+              )}
+              {hasWarning && totalCount === 0 && (
+                <span
+                  className="stg:absolute stg:-right-0.5 stg:-top-0.5 stg:inline-block stg:h-2 stg:w-2 stg:rounded-full stg:bg-warning"
+                  aria-label="Configuration needed"
+                />
+              )}
             </span>
-          )}
-          {hasWarning && totalCount === 0 && (
-            <span
-              className="absolute -right-0.5 -top-0.5 inline-block h-2 w-2 rounded-full bg-warning"
-              aria-label="Configuration needed"
-            />
-          )}
-        </span>
-      </Popover.Trigger>
+          </Popover.Trigger>
+        </TooltipTrigger>
+        <TooltipContent side="top">Configure</TooltipContent>
+      </Tooltip>
       <Popover.Portal container={portalContainer}>
         <Popover.Positioner sideOffset={8} align="start">
           <Popover.Popup
             className={cn(
-              "z-popover overflow-x-hidden overflow-y-auto rounded-lg border border-border",
-              "bg-popover shadow-md text-popover-foreground",
-              "max-h-[80vh]",
+              "stg:z-popover stg:overflow-x-hidden stg:overflow-y-auto stg:rounded-lg stg:border stg:border-border",
+              "stg:bg-popover stg:shadow-md stg:text-popover-foreground",
+              "stg:max-h-[80vh]",
             )}
           >
             {activePanelItem ? (
@@ -134,7 +143,7 @@ function MenuList({
   onSelect: (id: string) => void;
 }) {
   return (
-    <div className="py-1" role="menu">
+    <div className="stg:py-1" role="menu">
       {items.map((item) => (
         <button
           key={item.id}
@@ -142,20 +151,20 @@ function MenuList({
           role="menuitem"
           onClick={() => onSelect(item.id)}
           className={cn(
-            "flex w-full items-center gap-2.5 px-3 py-2 text-sm transition-colors",
-            "text-foreground hover:bg-accent-hover",
+            "stg:flex stg:w-full stg:items-center stg:gap-2.5 stg:px-3 stg:py-2 stg:text-sm stg:transition-colors",
+            "stg:text-foreground stg:hover:bg-accent-hover",
           )}
         >
-          <span className="shrink-0 text-muted-foreground">{item.icon}</span>
-          <span className="flex-1 text-left">{item.label}</span>
+          <span className="stg:shrink-0 stg:text-muted-foreground">{item.icon}</span>
+          <span className="stg:flex-1 stg:text-left">{item.label}</span>
           {item.hasWarning && (
             <span
-              className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-warning"
+              className="stg:inline-block stg:h-1.5 stg:w-1.5 stg:shrink-0 stg:rounded-full stg:bg-warning"
               aria-label="Needs configuration"
             />
           )}
           {item.count > 0 && (
-            <span className="rounded-full bg-primary-subtle px-1.5 text-[0.6rem] font-medium text-primary">
+            <span className="stg:rounded-full stg:bg-primary-subtle stg:px-1.5 stg:text-[0.6rem] stg:font-medium stg:text-primary">
               {item.count}
             </span>
           )}
@@ -181,21 +190,21 @@ function PanelView({
 }) {
   return (
     <div>
-      <div className="flex items-center gap-2 border-b border-border-muted px-3 py-2">
+      <div className="stg:flex stg:items-center stg:gap-2 stg:border-b stg:border-border-muted stg:px-3 stg:py-2">
         <button
           type="button"
           onClick={onBack}
-          className="shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:bg-accent-hover hover:text-foreground"
+          className="stg:shrink-0 stg:rounded stg:p-0.5 stg:text-muted-foreground stg:transition-colors stg:hover:bg-accent-hover stg:hover:text-foreground"
           aria-label="Back to configuration menu"
         >
           <ChevronLeftIcon />
         </button>
-        <span className="shrink-0 text-muted-foreground">{item.icon}</span>
-        <span className="text-sm font-medium text-foreground">
+        <span className="stg:shrink-0 stg:text-muted-foreground">{item.icon}</span>
+        <span className="stg:text-sm stg:font-medium stg:text-foreground">
           {item.label}
         </span>
       </div>
-      <div className="p-3">{children}</div>
+      <div className="stg:p-3">{children}</div>
     </div>
   );
 }
@@ -215,7 +224,7 @@ function ChevronRightIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path d="M6 4l4 4-4 4" />

package/src/composer/ContextChip.tsx

@@ -1,4 +1,5 @@
 import { cn } from "@stigmer/theme";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { ChipSpinner, XIcon } from "./icons.js";
 
 export interface ChipItem {
@@ -53,18 +54,16 @@ export function ContextChip({
       {isTransient && <ChipSpinner />}
       {isWarning && (
         <span
-          className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-warning"
+          className="stg:inline-block stg:h-1.5 stg:w-1.5 stg:shrink-0 stg:rounded-full stg:bg-warning"
           aria-hidden="true"
         />
       )}
-      <span className="text-[0.55rem] font-medium uppercase tracking-wider text-muted-foreground">
+      <span className="stg:text-[0.55rem] stg:font-medium stg:uppercase stg:tracking-wider stg:text-muted-foreground">
         {CHIP_TYPE_LABELS[type]}
       </span>
-      <span className="max-w-[120px] truncate" title={label}>
-        {label}
-      </span>
+      <TruncatedText text={label} className="stg:max-w-[120px]" />
       {detail != null && (
-        <span className="shrink-0 text-[0.6rem] font-medium text-muted-foreground">
+        <span className="stg:shrink-0 stg:text-[0.6rem] stg:font-medium stg:text-muted-foreground">
           {detail}
         </span>
       )}
@@ -74,12 +73,12 @@ export function ContextChip({
   return (
     <span
       className={cn(
-        "inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs text-foreground",
+        "stg:inline-flex stg:items-center stg:gap-1 stg:rounded-md stg:px-2 stg:py-0.5 stg:text-xs stg:text-foreground",
         isWarning
-          ? "border border-warning/30 bg-warning/10"
-          : "bg-muted-subtle",
-        isTransient && "opacity-70",
-        isReadonly && "opacity-80",
+          ? "stg:border stg:border-warning/30 stg:bg-warning/10"
+          : "stg:bg-muted-subtle",
+        isTransient && "stg:opacity-70",
+        isReadonly && "stg:opacity-80",
       )}
     >
       {onClick ? (
@@ -87,13 +86,13 @@ export function ContextChip({
           type="button"
           onClick={onClick}
           disabled={disabled}
-          className="inline-flex items-center gap-1 hover:opacity-80 disabled:pointer-events-none"
+          className="stg:inline-flex stg:items-center stg:gap-1 stg:hover:opacity-80 stg:disabled:pointer-events-none"
           aria-label={`Configure ${label}`}
         >
           {labelContent}
         </button>
       ) : (
-        <span className="inline-flex items-center gap-1">
+        <span className="stg:inline-flex stg:items-center stg:gap-1">
           {labelContent}
         </span>
       )}
@@ -102,7 +101,7 @@ export function ContextChip({
           type="button"
           onClick={onRemove}
           disabled={disabled}
-          className="ml-0.5 shrink-0 text-muted-foreground hover:text-destructive disabled:pointer-events-none"
+          className="stg:ml-0.5 stg:shrink-0 stg:text-muted-foreground stg:hover:text-destructive stg:disabled:pointer-events-none"
           aria-label={`Remove ${label}`}
         >
           <XIcon />

package/src/composer/ContextPopover.tsx

@@ -1,5 +1,6 @@
 import { cn } from "@stigmer/theme";
 import { Popover } from "@base-ui/react/popover";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { useStigmerPortalContainer } from "../portal-container.js";
 
 export function ContextPopover({
@@ -23,32 +24,40 @@ export function ContextPopover({
 
   return (
     <Popover.Root open={open} onOpenChange={onOpenChange}>
-      <Popover.Trigger
-        disabled={disabled}
-        title={label}
-        aria-label={label}
-        className={cn(
-          "inline-flex h-8 w-8 items-center justify-center rounded-md text-xs transition-colors",
-          "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-          "disabled:pointer-events-none disabled:opacity-50",
-        )}
-      >
-        <span className="relative">
-          {icon}
-          {count > 0 && (
-            <span className="absolute -right-1.5 -top-1.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[0.5rem] font-medium leading-none text-primary-foreground">
-              {count}
+      {/* The tooltip trigger is a wrapper span, not the popover trigger
+          itself: `disabled` adds `pointer-events-none` to the button, so
+          only the span keeps hover — the icon's name stays discoverable
+          while the composer is disabled. */}
+      <Tooltip>
+        <TooltipTrigger render={<span className="stg:inline-flex" />}>
+          <Popover.Trigger
+            disabled={disabled}
+            aria-label={label}
+            className={cn(
+              "stg:inline-flex stg:h-8 stg:w-8 stg:items-center stg:justify-center stg:rounded-md stg:text-xs stg:transition-colors",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+            )}
+          >
+            <span className="stg:relative">
+              {icon}
+              {count > 0 && (
+                <span className="stg:absolute stg:-right-1.5 stg:-top-1.5 stg:flex stg:h-3.5 stg:min-w-3.5 stg:items-center stg:justify-center stg:rounded-full stg:bg-primary stg:px-0.5 stg:text-[0.5rem] stg:font-medium stg:leading-none stg:text-primary-foreground">
+                  {count}
+                </span>
+              )}
             </span>
-          )}
-        </span>
-      </Popover.Trigger>
+          </Popover.Trigger>
+        </TooltipTrigger>
+        <TooltipContent side="top">{label}</TooltipContent>
+      </Tooltip>
       <Popover.Portal container={portalContainer}>
         <Popover.Positioner sideOffset={8} align="start">
           <Popover.Popup
             className={[
-              "z-popover overflow-x-hidden overflow-y-auto rounded-lg border border-border",
-              "bg-popover p-3 shadow-md text-popover-foreground",
-              "max-h-[80vh]",
+              "stg:z-popover stg:overflow-x-hidden stg:overflow-y-auto stg:rounded-lg stg:border stg:border-border",
+              "stg:bg-popover stg:p-3 stg:shadow-md stg:text-popover-foreground",
+              "stg:max-h-[80vh]",
             ].join(" ")}
           >
             {children}

package/src/composer/InteractionModePicker.tsx

@@ -110,14 +110,14 @@ export function InteractionModePicker({
       <Popover.Trigger
         disabled={disabled}
         className={cn(
-          "inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-xs transition-colors",
-          "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          "disabled:pointer-events-none disabled:opacity-50",
+          "stg:inline-flex stg:items-center stg:gap-1 stg:rounded-md stg:px-2 stg:py-1.5 stg:text-xs stg:transition-colors",
+          "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+          "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           className,
         )}
       >
-        <span className="font-medium text-foreground">
+        <span className="stg:font-medium stg:text-foreground">
           {MODE_META[value].label}
         </span>
         <ChevronIcon />
@@ -130,8 +130,8 @@ export function InteractionModePicker({
             aria-label="Interaction mode"
             onKeyDown={handleKeyDown}
             className={cn(
-              "z-50 w-56 rounded-lg border border-border bg-popover p-1 shadow-md",
-              "animate-in fade-in-0 zoom-in-95",
+              "stg:z-50 stg:w-56 stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-1 stg:shadow-md",
+              "stg:animate-in stg:fade-in-0 stg:zoom-in-95",
             )}
           >
             {OPTIONS.map((option) => {
@@ -146,15 +146,15 @@ export function InteractionModePicker({
                   aria-selected={isActive}
                   onClick={() => select(option)}
                   className={cn(
-                    "flex w-full flex-col gap-0.5 rounded-md px-2.5 py-2 text-left transition-colors",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                    "stg:flex stg:w-full stg:flex-col stg:gap-0.5 stg:rounded-md stg:px-2.5 stg:py-2 stg:text-left stg:transition-colors",
+                    "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
                     isActive
-                      ? "bg-accent text-foreground"
-                      : "text-foreground hover:bg-accent-hover",
+                      ? "stg:bg-accent stg:text-foreground"
+                      : "stg:text-foreground stg:hover:bg-accent-hover",
                   )}
                 >
-                  <span className="text-xs font-medium">{meta.label}</span>
-                  <span className="text-[0.65rem] leading-snug text-muted-foreground">
+                  <span className="stg:text-xs stg:font-medium">{meta.label}</span>
+                  <span className="stg:text-[0.65rem] stg:leading-snug stg:text-muted-foreground">
                     {meta.description}
                   </span>
                 </button>
@@ -174,7 +174,7 @@ function ChevronIcon() {
       height="12"
       viewBox="0 0 12 12"
       fill="none"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path

package/src/composer/SessionComposer.tsx

@@ -38,6 +38,7 @@ import {
   resolveSystemEnvVarValues,
 } from "../environment/systemEnvVars.js";
 import { useRenderTracer } from "../internal/dev/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import {
   AgentIcon,
   McpServerIcon,
@@ -333,6 +334,20 @@ export interface SessionComposerProps {
    */
   readonly onAgentResolutionChange?: (resolution: AgentResolution | null) => void;
 
+  /**
+   * Called whenever the agent setup's error changes: an {@link Error} when
+   * resolution (or env submission) fails, `null` when the error clears.
+   *
+   * This is the ONLY way an embedder can observe a failed mount-time
+   * resolution of {@link SessionComposerProps.initialAgentRef}: the failure
+   * is captured internally and rendered inside the Configure popover's
+   * agent panel — a surface a locked, end-user-facing embed never opens.
+   * A parent that gates behavior on `onAgentResolutionChange` alone waits
+   * forever on a resolution that already failed; wire this to surface the
+   * reason instead.
+   */
+  readonly onAgentSetupErrorChange?: (error: Error | null) => void;
+
   /**
    * Agent to auto-select when the composer mounts.
    *
@@ -598,6 +613,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
   agentRef,
   onAgentRefChange,
   onAgentResolutionChange,
+  onAgentSetupErrorChange,
   initialAgentRef,
   initialInstanceId,
   isDefaultAgent = false,
@@ -718,6 +734,16 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
     onAgentResolutionChange?.(agentSetup.state.resolution);
   }, [agentSetup.state, onAgentResolutionChange]);
 
+  // The error's own bridge, beside the resolution's: the setup error is
+  // orthogonal to phase and is otherwise visible ONLY inside the Configure
+  // popover -- which a locked end-user embed never opens. Without this, a
+  // failed mount-time resolution of initialAgentRef is invisible to the
+  // parent (the resolution callback never fires on failure) and any parent
+  // gate waiting on it holds forever.
+  useEffect(() => {
+    onAgentSetupErrorChange?.(agentSetup.state.error ?? null);
+  }, [agentSetup.state.error, onAgentSetupErrorChange]);
+
   // ---------------------------------------------------------------------------
   // Attachments — file upload state machine
   // ---------------------------------------------------------------------------
@@ -1402,7 +1428,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
               )}
             </div>
           ) : (
-            <div className="relative">
+            <div className="stg:relative">
               <AgentPicker
                 org={org!}
                 value={agentRef ?? null}
@@ -1411,7 +1437,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
                 disabled={isDisabled || isAgentBusy}
               />
               {isAgentBusy && (
-                <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-popover/80">
+                <div className="stg:absolute stg:inset-0 stg:flex stg:items-center stg:justify-center stg:rounded-lg stg:bg-popover/80">
                   <ResolveSpinner />
                 </div>
               )}
@@ -1494,17 +1520,17 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
     <div
       role="form"
       aria-label={ariaLabel}
-      className={cn("shrink-0", className)}
+      className={cn("stg:shrink-0", className)}
     >
       <div
         className={cn(
-          "rounded-xl border border-border bg-card shadow-sm",
-          "focus-within:ring-2 focus-within:ring-ring",
+          "stg:rounded-xl stg:border stg:border-border stg:bg-card stg:shadow-sm",
+          "stg:focus-within:ring-2 stg:focus-within:ring-ring",
           // Plan mode tints the frame so the active mode is visible at a
           // glance, without opening the picker. Themeable via --stgm-primary-muted.
-          interactionMode === "plan" && "border-primary-muted",
-          isDisabled && !stopMode && "opacity-50",
-          isDragOver && "ring-2 ring-primary/50",
+          interactionMode === "plan" && "stg:border-primary-muted",
+          isDisabled && !stopMode && "stg:opacity-50",
+          isDragOver && "stg:ring-2 stg:ring-primary/50",
         )}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
@@ -1516,27 +1542,33 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
         {isEditing && (
           <div
             role="status"
-            className="flex items-center justify-between gap-2 rounded-t-xl border-b border-border bg-muted px-3 py-1.5"
+            className="stg:flex stg:items-center stg:justify-between stg:gap-2 stg:rounded-t-xl stg:border-b stg:border-border stg:bg-muted stg:px-3 stg:py-1.5"
           >
-            <span className="text-xs font-medium text-muted-foreground">
+            <span className="stg:text-xs stg:font-medium stg:text-muted-foreground">
               Editing message
             </span>
             {onCancelEdit && (
-              <button
-                type="button"
-                onClick={onCancelEdit}
-                aria-label="Cancel editing"
-                title="Cancel editing (Esc)"
-                className="rounded p-0.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-              >
-                <XIcon />
-              </button>
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <button
+                      type="button"
+                      onClick={onCancelEdit}
+                      aria-label="Cancel editing"
+                      className="stg:rounded stg:p-0.5 stg:text-muted-foreground stg:transition-colors stg:hover:bg-accent stg:hover:text-foreground stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring"
+                    />
+                  }
+                >
+                  <XIcon />
+                </TooltipTrigger>
+                <TooltipContent side="top">Cancel editing (Esc)</TooltipContent>
+              </Tooltip>
             )}
           </div>
         )}
 
         {/* Zone 1: Textarea */}
-        <div className="relative">
+        <div className="stg:relative">
           <textarea
             {...composer.textareaProps}
             onKeyDown={handleTextareaKeyDown}
@@ -1544,11 +1576,11 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
             placeholder={placeholder}
             rows={initialRows}
             autoFocus={autoFocus}
-            className="block w-full resize-none bg-transparent px-4 pt-3 pb-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed"
+            className="stg:block stg:w-full stg:resize-none stg:bg-transparent stg:px-4 stg:pt-3 stg:pb-2 stg:text-sm stg:text-foreground stg:placeholder:text-muted-foreground stg:focus:outline-none stg:disabled:cursor-not-allowed"
           />
           {isDragOver && (
-            <div className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-t-xl bg-primary-subtle">
-              <span className="text-xs font-medium text-primary">
+            <div className="stg:pointer-events-none stg:absolute stg:inset-0 stg:flex stg:items-center stg:justify-center stg:rounded-t-xl stg:bg-primary-subtle">
+              <span className="stg:text-xs stg:font-medium stg:text-primary">
                 {isDragOverFileRef ? "Reference workspace file" : "Drop files to attach"}
               </span>
             </div>
@@ -1562,7 +1594,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
             type="file"
             multiple
             onChange={handleFileInputChange}
-            className="hidden"
+            className="stg:hidden"
             aria-hidden="true"
             tabIndex={-1}
           />
@@ -1570,7 +1602,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
 
         {/* Zone 2.5: Attachment and file-reference chips */}
         {(showAttach && attachments.hasEntries) || (enableFileReferences && fileRefs.hasRefs) ? (
-          <div className="space-y-1.5 px-3 pb-2">
+          <div className="stg:space-y-1.5 stg:px-3 stg:pb-2">
             {showAttach && attachments.hasEntries && (
               <AttachmentChipList
                 entries={attachments.entries}
@@ -1597,7 +1629,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
         {showUploadWaitNotice && (
           <div
             role="status"
-            className="mx-3 mb-2 flex items-center gap-2 rounded-md bg-muted px-2.5 py-1.5 text-xs text-muted-foreground"
+            className="stg:mx-3 stg:mb-2 stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:bg-muted stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-muted-foreground"
           >
             <ChipSpinner />
             <span>Waiting for attachments to finish uploading…</span>
@@ -1610,7 +1642,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
           !agentRef && (
             <div
               role="status"
-              className="mx-3 mb-2 flex items-center gap-2 rounded-md bg-warning/10 px-2.5 py-1.5 text-xs text-warning"
+              className="stg:mx-3 stg:mb-2 stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:bg-warning/10 stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-warning"
             >
               <AlertTriangleIcon />
               <span>Agent needs configuration before use</span>
@@ -1621,7 +1653,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
                   setConfigActivePanel("agent");
                 }}
                 disabled={isDisabled}
-                className="ml-auto shrink-0 rounded px-1.5 py-0.5 text-[0.6rem] font-medium hover:bg-warning/20 disabled:pointer-events-none disabled:opacity-50"
+                className="stg:ml-auto stg:shrink-0 stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[0.6rem] stg:font-medium stg:hover:bg-warning/20 stg:disabled:pointer-events-none stg:disabled:opacity-50"
               >
                 Configure
               </button>
@@ -1632,7 +1664,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
         {showMcp && mcpSetup.needsSetupCount > 0 && (
           <div
             role="status"
-            className="mx-3 mb-2 flex items-center gap-2 rounded-md bg-warning/10 px-2.5 py-1.5 text-xs text-warning"
+            className="stg:mx-3 stg:mb-2 stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:bg-warning/10 stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-warning"
           >
             <AlertTriangleIcon />
             <span>
@@ -1655,7 +1687,7 @@ const SessionComposerInner = forwardRef<SessionComposerHandle, SessionComposerPr
                 setConfigActivePanel("mcp");
               }}
               disabled={isDisabled}
-              className="ml-auto shrink-0 rounded px-1.5 py-0.5 text-[0.6rem] font-medium hover:bg-warning/20 disabled:pointer-events-none disabled:opacity-50"
+              className="stg:ml-auto stg:shrink-0 stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[0.6rem] stg:font-medium stg:hover:bg-warning/20 stg:disabled:pointer-events-none stg:disabled:opacity-50"
             >
               Configure
             </button>
@@ -1721,10 +1753,10 @@ export const SessionComposer = memo(SessionComposerInner);
 
 function AgentSetupError({ error }: { error: Error }) {
   if (isSecretFlowError(error)) {
-    return <SecretFlowErrorGuide error={error} className="mt-2" />;
+    return <SecretFlowErrorGuide error={error} className="stg:mt-2" />;
   }
   return (
-    <p className="mt-2 text-xs text-destructive">
+    <p className="stg:mt-2 stg:text-xs stg:text-destructive">
       {getUserMessage(error)}
     </p>
   );