@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/channel-app/ChannelAppListPanel.tsx

@@ -60,12 +60,12 @@ export function ChannelAppListPanel({
   if (isLoading) {
     return (
       <div
-        className={cn("space-y-2", className)}
+        className={cn("stg:space-y-2", className)}
         aria-busy="true"
         aria-label="Loading channel apps"
       >
         {Array.from({ length: 2 }, (_, i) => (
-          <div key={i} className="bg-muted-subtle h-14 animate-pulse rounded-lg" />
+          <div key={i} className="stg:bg-muted-subtle stg:h-14 stg:animate-pulse stg:rounded-lg" />
         ))}
       </div>
     );
@@ -73,7 +73,7 @@ export function ChannelAppListPanel({
 
   if (error) {
     return (
-      <p className={cn("text-destructive text-xs", className)} role="alert">
+      <p className={cn("stg:text-destructive stg:text-xs", className)} role="alert">
         {getUserMessage(error)}
       </p>
     );
@@ -83,7 +83,7 @@ export function ChannelAppListPanel({
     return (
       <p
         className={cn(
-          "text-muted-foreground py-4 text-center text-xs",
+          "stg:text-muted-foreground stg:py-4 stg:text-center stg:text-xs",
           className,
         )}
       >
@@ -94,7 +94,7 @@ export function ChannelAppListPanel({
 
   return (
     <div
-      className={cn("space-y-2", className)}
+      className={cn("stg:space-y-2", className)}
       role="list"
       aria-label="Channel apps"
     >
@@ -137,28 +137,28 @@ function ChannelAppRow({
     <div
       role="listitem"
       className={cn(
-        "border-border bg-card flex items-center gap-3 rounded-lg border px-3 py-2.5",
+        "stg:border-border stg:bg-card stg:flex stg:items-center stg:gap-3 stg:rounded-lg stg:border stg:px-3 stg:py-2.5",
       )}
     >
-      <div className="min-w-0 flex-1">
-        <div className="flex items-baseline gap-2">
-          <span className="truncate text-xs font-medium text-foreground">
+      <div className="stg:min-w-0 stg:flex-1">
+        <div className="stg:flex stg:items-baseline stg:gap-2">
+          <span className="stg:truncate stg:text-xs stg:font-medium stg:text-foreground">
             {name}
           </span>
           {/* Fall back to the raw oneof case for providers this UI
               doesn't know yet — honest, and never an empty label. */}
-          <span className="text-[0.65rem] text-muted-foreground">
+          <span className="stg:text-[0.65rem] stg:text-muted-foreground">
             {provider?.label ?? providerCase ?? ""}
           </span>
         </div>
-        <div className="flex items-baseline gap-2">
+        <div className="stg:flex stg:items-baseline stg:gap-2">
           {providerAppId && (
-            <span className="truncate font-mono text-[0.65rem] text-muted-foreground">
+            <span className="stg:truncate stg:font-mono stg:text-[0.65rem] stg:text-muted-foreground">
               {providerAppId}
             </span>
           )}
           {createdAt && (
-            <span className="shrink-0 text-[0.65rem] text-muted-foreground">
+            <span className="stg:shrink-0 stg:text-[0.65rem] stg:text-muted-foreground">
               {timestampDate(createdAt).toLocaleDateString()}
             </span>
           )}
@@ -171,8 +171,8 @@ function ChannelAppRow({
           onClick={onEdit}
           aria-label={`Edit ${name}`}
           className={cn(
-            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-            "shrink-0 rounded-md p-1.5 transition-colors",
+            "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+            "stg:shrink-0 stg:rounded-md stg:p-1.5 stg:transition-colors",
           )}
         >
           <PencilIcon />

package/src/channel-app/CreateChannelAppForm.tsx

@@ -176,8 +176,8 @@ export function CreateChannelAppForm({
   );
 
   return (
-    <form onSubmit={handleSubmit} className={cn("space-y-4", className)}>
-      <div className="space-y-3">
+    <form onSubmit={handleSubmit} className={cn("stg:space-y-4", className)}>
+      <div className="stg:space-y-3">
         <ProviderPicker
           value={provider}
           onChange={setProvider}
@@ -226,19 +226,19 @@ export function CreateChannelAppForm({
       </div>
 
       {error && (
-        <p className="text-destructive text-[0.65rem]" role="alert">
+        <p className="stg:text-destructive stg:text-[0.65rem]" role="alert">
           {getUserMessage(error)}
         </p>
       )}
 
-      <div className="flex items-center gap-2">
+      <div className="stg:flex stg:items-center stg:gap-2">
         <button
           type="submit"
           disabled={!canSubmit}
           className={cn(
-            "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary-hover",
-            "disabled:pointer-events-none disabled:opacity-40",
+            "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs stg:font-medium",
+            "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-40",
           )}
         >
           {isCreating && <SpinnerIcon />}
@@ -251,9 +251,9 @@ export function CreateChannelAppForm({
             onClick={onCancel}
             disabled={isCreating}
             className={cn(
-              "rounded-md px-3 py-1.5 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:rounded-md stg:px-3 stg:py-1.5 stg:text-xs",
+              "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             Cancel
@@ -284,10 +284,10 @@ function ProviderPicker({
 }) {
   return (
     <fieldset>
-      <legend className="mb-1.5 block text-xs font-medium text-foreground">
+      <legend className="stg:mb-1.5 stg:block stg:text-xs stg:font-medium stg:text-foreground">
         Provider
       </legend>
-      <div role="radiogroup" className="flex gap-1.5">
+      <div role="radiogroup" className="stg:flex stg:gap-1.5">
         {CHANNEL_PROVIDERS.map((p) => {
           const checked = value === p.id;
           return (
@@ -295,9 +295,9 @@ function ProviderPicker({
               key={p.id}
               htmlFor={`stgm-chapp-provider-${p.id}`}
               className={cn(
-                "flex flex-1 cursor-pointer items-center gap-2 rounded-md border px-2.5 py-1.5",
-                checked ? "border-ring bg-accent" : "border-border hover:bg-accent-hover",
-                disabled && "pointer-events-none opacity-50",
+                "stg:flex stg:flex-1 stg:cursor-pointer stg:items-center stg:gap-2 stg:rounded-md stg:border stg:px-2.5 stg:py-1.5",
+                checked ? "stg:border-ring stg:bg-accent" : "stg:border-border stg:hover:bg-accent-hover",
+                disabled && "stg:pointer-events-none stg:opacity-50",
               )}
             >
               <input
@@ -307,10 +307,10 @@ function ProviderPicker({
                 checked={checked}
                 onChange={() => onChange(p.id)}
                 disabled={disabled}
-                className="accent-current"
+                className="stg:accent-current"
               />
-              <p.Icon className="size-3.5 shrink-0 text-foreground" />
-              <span className="text-xs font-medium text-foreground">{p.label}</span>
+              <p.Icon className="stg:size-3.5 stg:shrink-0 stg:text-foreground" />
+              <span className="stg:text-xs stg:font-medium stg:text-foreground">{p.label}</span>
             </label>
           );
         })}
@@ -344,21 +344,21 @@ function SlackCreateSection({
 }) {
   return (
     <>
-      <div className="space-y-1.5">
-        <p className="text-xs font-medium text-foreground">
+      <div className="stg:space-y-1.5">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">
           1. Create the Slack app
         </p>
-        <p className="text-[0.65rem] text-muted-foreground">
+        <p className="stg:text-[0.65rem] stg:text-muted-foreground">
           On{" "}
           <a
             href="https://api.slack.com/apps?new_app=1"
             target="_blank"
             rel="noreferrer"
-            className="text-primary hover:text-foreground underline transition-colors"
+            className="stg:text-primary stg:hover:text-foreground stg:underline stg:transition-colors"
           >
             api.slack.com/apps
           </a>
-          , choose <span className="font-medium">From a manifest</span> and
+          , choose <span className="stg:font-medium">From a manifest</span> and
           paste this. Event subscriptions come after the next step — the
           webhook URL is minted when this form is saved.
         </p>
@@ -369,12 +369,12 @@ function SlackCreateSection({
         />
       </div>
 
-      <div className="space-y-3">
-        <p className="text-xs font-medium text-foreground">
+      <div className="stg:space-y-3">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">
           2. Paste the app&apos;s credentials
         </p>
-        <p className="-mt-2 text-[0.65rem] text-muted-foreground">
-          From the app&apos;s <span className="font-medium">Basic
+        <p className="stg:-mt-2 stg:text-[0.65rem] stg:text-muted-foreground">
+          From the app&apos;s <span className="stg:font-medium">Basic
           Information</span> page. They are encrypted at rest and never
           shown again.
         </p>
@@ -443,33 +443,33 @@ function WhatsAppCreateSection({
 }) {
   return (
     <>
-      <div className="space-y-1.5">
-        <p className="text-xs font-medium text-foreground">
+      <div className="stg:space-y-1.5">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">
           1. Create the Meta app
         </p>
-        <p className="text-[0.65rem] text-muted-foreground">
+        <p className="stg:text-[0.65rem] stg:text-muted-foreground">
           On{" "}
           <a
             href="https://developers.facebook.com/apps"
             target="_blank"
             rel="noreferrer"
-            className="text-primary hover:text-foreground underline transition-colors"
+            className="stg:text-primary stg:hover:text-foreground stg:underline stg:transition-colors"
           >
             developers.facebook.com
           </a>
-          , create a <span className="font-medium">Business</span>-type app
-          and add the <span className="font-medium">WhatsApp</span> product.
+          , create a <span className="stg:font-medium">Business</span>-type app
+          and add the <span className="stg:font-medium">WhatsApp</span> product.
           The webhook setup comes after the next step — the webhook URL is
           minted when this form is saved.
         </p>
       </div>
 
-      <div className="space-y-3">
-        <p className="text-xs font-medium text-foreground">
+      <div className="stg:space-y-3">
+        <p className="stg:text-xs stg:font-medium stg:text-foreground">
           2. Paste the app&apos;s credentials
         </p>
-        <p className="-mt-2 text-[0.65rem] text-muted-foreground">
-          The app ID and secret are on <span className="font-medium">App
+        <p className="stg:-mt-2 stg:text-[0.65rem] stg:text-muted-foreground">
+          The app ID and secret are on <span className="stg:font-medium">App
           settings → Basic</span>; mint a long-lived system-user access
           token with WhatsApp permissions in Meta Business settings. The
           secrets are encrypted at rest and never shown again.

package/src/channel-app/internal.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { TruncatedText } from "../internal/truncated-text.js";
 
 /**
  * Internal building blocks shared by the channel-app forms and panels.
@@ -31,8 +32,8 @@ export function FormField({
   required?: boolean;
 }) {
   return (
-    <div className="space-y-1">
-      <label htmlFor={id} className="text-xs font-medium text-foreground">
+    <div className="stg:space-y-1">
+      <label htmlFor={id} className="stg:text-xs stg:font-medium stg:text-foreground">
         {label}
       </label>
       <input
@@ -44,13 +45,13 @@ export function FormField({
         disabled={disabled}
         required={required}
         className={cn(
-          "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-1 focus-visible:ring-ring",
-          "disabled:pointer-events-none disabled:opacity-50",
+          "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-1 stg:focus-visible:ring-ring",
+          "stg:disabled:pointer-events-none stg:disabled:opacity-50",
         )}
       />
-      {hint && <p className="text-[0.65rem] text-muted-foreground">{hint}</p>}
+      {hint && <p className="stg:text-[0.65rem] stg:text-muted-foreground">{hint}</p>}
     </div>
   );
 }
@@ -71,18 +72,16 @@ export function CopyRow({
   const { copied, copy } = useCopy(value);
 
   return (
-    <div className="space-y-1">
-      <p className="text-xs font-medium text-foreground">{label}</p>
-      <div className="flex items-center gap-1.5">
-        <code
+    <div className="stg:space-y-1">
+      <p className="stg:text-xs stg:font-medium stg:text-foreground">{label}</p>
+      <div className="stg:flex stg:items-center stg:gap-1.5">
+        <TruncatedText
+          text={value}
           className={cn(
-            "min-w-0 flex-1 truncate rounded-md border border-border bg-muted-subtle",
-            "px-2 py-1.5 font-mono text-[0.65rem] text-foreground",
+            "stg:min-w-0 stg:flex-1 stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle",
+            "stg:px-2 stg:py-1.5 stg:font-mono stg:text-[0.65rem] stg:text-foreground",
           )}
-          title={value}
-        >
-          {value}
-        </code>
+        />
         <CopyButton copied={copied} onCopy={copy} copyTargetId={copyTargetId} />
       </div>
     </div>
@@ -102,17 +101,17 @@ export function CopyBlock({
   const { copied, copy } = useCopy(value);
 
   return (
-    <div className="space-y-1">
-      <div className="flex items-center justify-between">
-        <p className="text-[0.65rem] font-medium text-muted-foreground">
+    <div className="stg:space-y-1">
+      <div className="stg:flex stg:items-center stg:justify-between">
+        <p className="stg:text-[0.65rem] stg:font-medium stg:text-muted-foreground">
           {label}
         </p>
         <CopyButton copied={copied} onCopy={copy} copyTargetId={copyTargetId} />
       </div>
       <pre
         className={cn(
-          "max-h-40 overflow-auto rounded-md border border-border bg-muted-subtle",
-          "px-2.5 py-2 font-mono text-[0.65rem] leading-relaxed text-foreground",
+          "stg:max-h-40 stg:overflow-auto stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle",
+          "stg:px-2.5 stg:py-2 stg:font-mono stg:text-[0.65rem] stg:leading-relaxed stg:text-foreground",
         )}
       >
         {value}
@@ -136,10 +135,10 @@ function CopyButton({
       onClick={onCopy}
       data-cursor-target={copyTargetId}
       className={cn(
-        "shrink-0 rounded-md border border-border px-2 py-1 text-[0.65rem] font-medium transition-colors",
+        "stg:shrink-0 stg:rounded-md stg:border stg:border-border stg:px-2 stg:py-1 stg:text-[0.65rem] stg:font-medium stg:transition-colors",
         copied
-          ? "text-success"
-          : "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
+          ? "stg:text-success"
+          : "stg:text-muted-foreground stg:hover:text-foreground stg:hover:bg-accent-hover",
       )}
       aria-live="polite"
     >
@@ -171,7 +170,7 @@ export function SpinnerIcon() {
       stroke="currentColor"
       strokeWidth="2"
       strokeLinecap="round"
-      className="animate-spin"
+      className="stg:animate-spin"
       aria-hidden="true"
     >
       <path d="M8 2a6 6 0 1 0 6 6" />

package/src/composer/ComposerToolbar.tsx

@@ -1,6 +1,12 @@
 "use client";
 
 import { cn } from "@stigmer/theme";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../internal/tooltip.js";
 import { ContextPopover } from "./ContextPopover.js";
 import { ConfigureMenu, type ConfigureMenuItem } from "./ConfigureMenu.js";
 import { ModelSelector } from "../models/ModelSelector.js";
@@ -126,10 +132,10 @@ export function ComposerToolbar({
   const showHarnessSeparate = showHarnessSelector && !showModelSelector;
 
   return (
-    <div className="flex items-center justify-between gap-2 border-t border-border-muted px-3 py-2">
+    <div className="stg:flex stg:items-center stg:justify-between stg:gap-2 stg:border-t stg:border-border-muted stg:px-3 stg:py-2">
       {/* ---- Left group: Primary state (Mode + Model) ---- */}
 
-      <div className="flex min-w-0 items-center gap-1.5">
+      <div className="stg:flex stg:min-w-0 stg:items-center stg:gap-1.5">
         {showInteractionModePicker && (
           <InteractionModePicker
             value={interactionMode ?? "agent"}
@@ -160,101 +166,127 @@ export function ComposerToolbar({
         )}
       </div>
 
-      {/* ---- Right group: Secondary actions (icon-only) + Send ---- */}
+      {/* ---- Right group: Secondary actions (icon-only) + Send ----
 
-      <div className="flex shrink-0 items-center gap-1">
-        {showWorkspace && (
-          onWorkspaceDirectAction
-            ? <button
-                type="button"
-                disabled={disabled}
-                onClick={onWorkspaceDirectAction}
-                title="Workspace"
-                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="Workspace"
-              >
-                <span className="relative">
-                  <WorkspaceIcon />
-                  {workspaceCount > 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">
-                      {workspaceCount}
-                    </span>
+          Icon-only actions carry house tooltips (never native `title` —
+          OS-delayed and unreachable from keyboard/touch, dead entirely on
+          disabled controls). Disabled-capable buttons put the trigger on a
+          plain wrapper span: `disabled` adds `pointer-events-none`, so the
+          span, not the button, must own the hover for the tooltip to keep
+          working while disabled. The provider is context-only (no DOM node)
+          and groups the buttons' hover delay. */}
+
+      <TooltipProvider>
+        <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-1">
+          {showWorkspace && (
+            onWorkspaceDirectAction
+              ? <Tooltip>
+                  <TooltipTrigger render={<span className="stg:inline-flex" />}>
+                    <button
+                      type="button"
+                      disabled={disabled}
+                      onClick={onWorkspaceDirectAction}
+                      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="Workspace"
+                    >
+                      <span className="stg:relative">
+                        <WorkspaceIcon />
+                        {workspaceCount > 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">
+                            {workspaceCount}
+                          </span>
+                        )}
+                      </span>
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">Workspace</TooltipContent>
+                </Tooltip>
+              : <ContextPopover
+                  icon={<WorkspaceIcon />}
+                  label="Workspace"
+                  count={workspaceCount}
+                  disabled={disabled}
+                >
+                  {workspaceContent}
+                </ContextPopover>
+          )}
+
+          {showAttach && (
+            <Tooltip>
+              <TooltipTrigger render={<span className="stg:inline-flex" />}>
+                <button
+                  type="button"
+                  disabled={disabled}
+                  onClick={onAttachClick}
+                  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>
-              </button>
-            : <ContextPopover
-                icon={<WorkspaceIcon />}
-                label="Workspace"
-                count={workspaceCount}
-                disabled={disabled}
-              >
-                {workspaceContent}
-              </ContextPopover>
-        )}
+                  aria-label="Attach files"
+                >
+                  <span className="stg:relative">
+                    <PaperclipIcon />
+                    {attachmentCount > 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">
+                        {attachmentCount}
+                      </span>
+                    )}
+                  </span>
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="top">Attach files</TooltipContent>
+            </Tooltip>
+          )}
 
-        {showAttach && (
-          <button
-            type="button"
+          <ConfigureMenu
+            open={configOpen}
+            onOpenChange={onConfigOpenChange}
+            activePanel={configActivePanel}
+            onActivePanelChange={onConfigActivePanelChange}
+            items={configureItems}
+            renderPanel={renderConfigPanel}
             disabled={disabled}
-            onClick={onAttachClick}
-            title="Attach files"
-            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="Attach files"
-          >
-            <span className="relative">
-              <PaperclipIcon />
-              {attachmentCount > 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">
-                  {attachmentCount}
-                </span>
-              )}
-            </span>
-          </button>
-        )}
-
-        <ConfigureMenu
-          open={configOpen}
-          onOpenChange={onConfigOpenChange}
-          activePanel={configActivePanel}
-          onActivePanelChange={onConfigActivePanelChange}
-          items={configureItems}
-          renderPanel={renderConfigPanel}
-          disabled={disabled}
-        />
+          />
 
-        {onStop ? (
-          // Circular container (vs. Send's rounded-square) gives the square glyph
-          // a proper home — the canonical stop affordance — and the shape morph
-          // from Send→Stop signals the running state at a glance.
-          <button
-            type="button"
-            onClick={onStop}
-            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary-hover"
-            aria-label="Stop generating"
-            title="Stop"
-          >
-            {isStopping ? <SpinnerIcon /> : <StopIcon />}
-          </button>
-        ) : (
-          <button
-            type="button"
-            disabled={!canSend}
-            onClick={onSend}
-            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-colors hover:bg-primary-hover disabled:pointer-events-none disabled:opacity-40"
-            aria-label="Send message"
-          >
-            {isSubmitting ? <SpinnerIcon /> : <ArrowUpIcon />}
-          </button>
-        )}
-      </div>
+          {onStop ? (
+            // Circular container (vs. Send's rounded-square) gives the square glyph
+            // a proper home — the canonical stop affordance — and the shape morph
+            // from Send→Stop signals the running state at a glance. Always
+            // enabled, so the button itself is the tooltip trigger (keyboard
+            // focus opens it too).
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <button
+                    type="button"
+                    onClick={onStop}
+                    className="stg:flex stg:h-8 stg:w-8 stg:shrink-0 stg:items-center stg:justify-center stg:rounded-full stg:bg-primary stg:text-primary-foreground stg:transition-colors stg:hover:bg-primary-hover"
+                    aria-label="Stop generating"
+                  />
+                }
+              >
+                {isStopping ? <SpinnerIcon /> : <StopIcon />}
+              </TooltipTrigger>
+              <TooltipContent side="top">Stop</TooltipContent>
+            </Tooltip>
+          ) : (
+            <button
+              type="button"
+              disabled={!canSend}
+              onClick={onSend}
+              className="stg:flex stg:h-8 stg:w-8 stg:shrink-0 stg:items-center stg:justify-center stg:rounded-lg stg:bg-primary stg:text-primary-foreground stg:transition-colors stg:hover:bg-primary-hover stg:disabled:pointer-events-none stg:disabled:opacity-40"
+              aria-label="Send message"
+            >
+              {isSubmitting ? <SpinnerIcon /> : <ArrowUpIcon />}
+            </button>
+          )}
+        </div>
+      </TooltipProvider>
     </div>
   );
 }