@stigmer/react 3.11.0 → 3.12.0

package/src/attachment/AttachmentChipList.tsx

@@ -7,6 +7,7 @@ import { formatFileSize } from "./attachment-utils.js";
 import { useObjectUrl } from "./useObjectUrl.js";
 import { AttachmentImageLightbox } from "./AttachmentImageLightbox.js";
 import { UNSTYLED_BUTTON } from "../internal/form-primitives.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 
 /** Props for {@link AttachmentChipList}. */
 export interface AttachmentChipListProps {
@@ -216,84 +217,92 @@ function ImageAttachmentChip({
   return (
     // The remove badge and retry pill are SIBLINGS of the preview button,
     // absolutely positioned over it — buttons cannot nest inside buttons.
-    <span
-      role="listitem"
-      aria-label={chipAriaLabel(entry)}
-      title={entry.file.name}
-      className="stg:relative stg:inline-flex"
-    >
-      {/* The whole tile is the preview target. Preview stays enabled while
-          `disabled` (that prop gates the mutating remove/retry actions) and
-          in every phase: the object URL wraps in-memory bytes, no fetch.
-          UNSTYLED_BUTTON adds the pointer cursor — the image tile carries
-          no other clickability cue. */}
-      <button
-        type="button"
-        onClick={onPreview}
-        aria-label={`Preview ${entry.file.name}`}
-        className={cn(
-          UNSTYLED_BUTTON,
-          "stg:relative stg:block stg:h-14 stg:w-14 stg:overflow-hidden stg:rounded-md stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
-          isError && "stg:ring-1 stg:ring-destructive",
-        )}
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span
+            role="listitem"
+            aria-label={chipAriaLabel(entry)}
+            className="stg:relative stg:inline-flex"
+          />
+        }
       >
-        {url ? (
-          <img
-            src={url}
-            alt=""
-            aria-hidden="true"
-            onError={() => setLoadFailed(true)}
+        {/* The whole tile is the preview target. Preview stays enabled while
+            `disabled` (that prop gates the mutating remove/retry actions) and
+            in every phase: the object URL wraps in-memory bytes, no fetch.
+            UNSTYLED_BUTTON adds the pointer cursor — the image tile carries
+            no other clickability cue. */}
+        <button
+          type="button"
+          onClick={onPreview}
+          aria-label={`Preview ${entry.file.name}`}
+          className={cn(
+            UNSTYLED_BUTTON,
+            "stg:relative stg:block stg:h-14 stg:w-14 stg:overflow-hidden stg:rounded-md stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+            isError && "stg:ring-1 stg:ring-destructive",
+          )}
+        >
+          {url ? (
+            <img
+              src={url}
+              alt=""
+              aria-hidden="true"
+              onError={() => setLoadFailed(true)}
+              className={cn(
+                "stg:h-full stg:w-full stg:object-cover",
+                (isUploading || isError) && "stg:opacity-50",
+              )}
+            />
+          ) : (
+            // One-frame placeholder until the object-URL effect runs; same
+            // footprint as the image, so no layout shift.
+            <span
+              className="stg:block stg:h-full stg:w-full stg:animate-pulse stg:bg-muted"
+              aria-hidden="true"
+            />
+          )}
+          {isUploading && (
+            <span className="stg:absolute stg:inset-0 stg:flex stg:items-center stg:justify-center">
+              <ChipSpinner size={16} />
+            </span>
+          )}
+        </button>
+
+        {isError && (
+          <button
+            type="button"
+            onClick={onRetry}
+            disabled={disabled}
+            aria-label={`Retry uploading ${entry.file.name}`}
             className={cn(
-              "stg:h-full stg:w-full stg:object-cover",
-              (isUploading || isError) && "stg:opacity-50",
+              UNSTYLED_BUTTON,
+              "stg:absolute stg:left-1/2 stg:top-1/2 stg:-translate-x-1/2 stg:-translate-y-1/2 stg:rounded-full stg:bg-destructive stg:px-1.5 stg:py-0.5 stg:text-[0.6rem] stg:font-medium stg:leading-none stg:text-destructive-foreground stg:shadow-sm stg:hover:bg-destructive-hover stg:disabled:pointer-events-none",
             )}
-          />
-        ) : (
-          // One-frame placeholder until the object-URL effect runs; same
-          // footprint as the image, so no layout shift.
-          <span
-            className="stg:block stg:h-full stg:w-full stg:animate-pulse stg:bg-muted"
-            aria-hidden="true"
-          />
+          >
+            Retry
+          </button>
         )}
-        {isUploading && (
-          <span className="stg:absolute stg:inset-0 stg:flex stg:items-center stg:justify-center">
-            <ChipSpinner size={16} />
-          </span>
-        )}
-      </button>
 
-      {isError && (
         <button
           type="button"
-          onClick={onRetry}
+          onClick={onRemove}
           disabled={disabled}
-          aria-label={`Retry uploading ${entry.file.name}`}
+          aria-label={`Remove ${entry.file.name}`}
           className={cn(
             UNSTYLED_BUTTON,
-            "stg:absolute stg:left-1/2 stg:top-1/2 stg:-translate-x-1/2 stg:-translate-y-1/2 stg:rounded-full stg:bg-destructive stg:px-1.5 stg:py-0.5 stg:text-[0.6rem] stg:font-medium stg:leading-none stg:text-destructive-foreground stg:shadow-sm stg:hover:bg-destructive-hover stg:disabled:pointer-events-none",
+            // The established corner-badge geometry (ContextPopover,
+            // ComposerToolbar). Solid bg + border keep it legible over any
+            // image without opacity-modified tokens (Dont-Do #4).
+            "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:flex stg:h-4 stg:w-4 stg:items-center stg:justify-center stg:rounded-full stg:border stg:border-border stg:bg-background stg:text-muted-foreground stg:shadow-sm stg:hover:text-destructive stg:disabled:pointer-events-none",
           )}
         >
-          Retry
+          <XIcon />
         </button>
-      )}
-
-      <button
-        type="button"
-        onClick={onRemove}
-        disabled={disabled}
-        aria-label={`Remove ${entry.file.name}`}
-        className={cn(
-          UNSTYLED_BUTTON,
-          // The established corner-badge geometry (ContextPopover,
-          // ComposerToolbar). Solid bg + border keep it legible over any
-          // image without opacity-modified tokens (Dont-Do #4).
-          "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:flex stg:h-4 stg:w-4 stg:items-center stg:justify-center stg:rounded-full stg:border stg:border-border stg:bg-background stg:text-muted-foreground stg:shadow-sm stg:hover:text-destructive stg:disabled:pointer-events-none",
-        )}
-      >
-        <XIcon />
-      </button>
-    </span>
+      </TooltipTrigger>
+      <TooltipContent side="top" className="stg:break-all">
+        {entry.file.name}
+      </TooltipContent>
+    </Tooltip>
   );
 }
 

package/src/attachment/AttachmentImageLightbox.tsx

@@ -95,10 +95,11 @@ export function AttachmentImageLightbox({
       {open && (
         <div className="stg:flex stg:flex-col">
           <div className="stg:flex stg:items-center stg:gap-2 stg:px-3 stg:py-2">
-            <span
-              className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-xs stg:font-semibold stg:text-foreground"
-              title={filename}
-            >
+            {/* No tooltip here: the house tooltip portals OUTSIDE this native
+                showModal() dialog, where the top layer covers it and `inert`
+                disables it. The old title only restated the visible filename
+                (also the image's alt), so it is dropped rather than replaced. */}
+            <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-xs stg:font-semibold stg:text-foreground">
               {filename}
             </span>
             <button

package/src/attachment/__tests__/AttachmentChipList.test.tsx

@@ -106,11 +106,12 @@ describe("AttachmentChipList — image miniature", () => {
 
     await waitFor(() => expect(chipImage(container)).toBeTruthy());
 
-    // The tile is the chip — the name lives in the tooltip and accessible
-    // label, never as a text node (file chips, by contrast, keep theirs).
+    // The tile is the chip — the name lives in the house tooltip and
+    // accessible label, never as a text node (file chips, by contrast,
+    // keep theirs) and never a native title (banned, stigmer-cloud#268).
     expect(screen.queryByText("shot.png")).toBeNull();
     const tile = screen.getByRole("listitem", { name: /^shot\.png/ });
-    expect(tile.getAttribute("title")).toBe("shot.png");
+    expect(tile.getAttribute("title")).toBeNull();
     // Remove is an always-visible corner badge, not hover-revealed.
     expect(screen.getByRole("button", { name: "Remove shot.png" })).toBeTruthy();
   });

package/src/channel/AgentChannelsPanel.tsx

@@ -22,6 +22,7 @@ import { useConfirmAction } from "../resource-detail/useConfirmAction.js";
 import { EditResourceYamlDialog } from "../manifest/EditResourceYamlDialog.js";
 import { useDeploymentMode } from "../deployment-mode.js";
 import { CloudFeatureNotice } from "../internal/CloudFeatureNotice.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { ChannelConversationsDialog } from "./ChannelConversationsDialog.js";
 import { ChannelCredentialsDialog } from "./ChannelCredentialsDialog.js";
 import { ChannelTemplatesDialog } from "./ChannelTemplatesDialog.js";
@@ -510,12 +511,10 @@ function ChannelCard({
           <provider.Icon className="stg:size-5 stg:shrink-0 stg:text-foreground" />
           <div className="stg:min-w-0">
             <div className="stg:flex stg:items-center stg:gap-2">
-              <span
-                className="stg:truncate stg:text-sm stg:font-medium stg:text-foreground"
-                title={meta?.name || meta?.slug || undefined}
-              >
-                {meta?.name || meta?.slug || "\u2014"}
-              </span>
+              <TruncatedText
+                text={meta?.name || meta?.slug || "\u2014"}
+                className="stg:text-sm stg:font-medium stg:text-foreground"
+              />
               <InstallStatePill state={installState} />
             </div>
             <p className="stg:mt-0.5 stg:text-xs stg:text-muted-foreground">

package/src/channel/ChannelConversationsDialog.tsx

@@ -10,6 +10,7 @@ import type { Session } from "@stigmer/protos/ai/stigmer/agentic/session/v1/api_
 import { formatRelativeTime } from "../activity/format-relative-time.js";
 import { Button } from "../button/Button.js";
 import { EmptyState } from "../empty-state/EmptyState.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { channelSessionExternalUserKey } from "../session/channelOrigin.js";
 import { useChannelSessions } from "./useChannelSessions.js";
 
@@ -200,9 +201,10 @@ function ConversationRow({
   const content = (
     <>
       <div className="stg:min-w-0 stg:flex-1">
-        <p className="stg:truncate stg:text-sm stg:text-foreground" title={subject}>
-          {subject}
-        </p>
+        <TruncatedText
+          text={subject}
+          className="stg:block stg:text-sm stg:text-foreground"
+        />
         {externalUser && (
           <p className="stg:mt-0.5 stg:flex stg:items-center stg:gap-1 stg:text-xs stg:text-muted-foreground">
             <User aria-hidden="true" className="stg:size-3" />

package/src/channel/ChannelTemplatesDialog.tsx

@@ -9,6 +9,7 @@ import type { ChannelTemplate } from "@stigmer/protos/ai/stigmer/agentic/agentch
 import { Button } from "../button/Button.js";
 import { EmptyState } from "../empty-state/EmptyState.js";
 import { CloudFeatureNotice } from "../internal/CloudFeatureNotice.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { StatusBadge } from "../resource-workbench/components/StatusBadge.js";
 import {
   channelPresentationOf,
@@ -332,12 +333,10 @@ function TemplateRow({ template }: { readonly template: ChannelTemplate }) {
     <li className="stg:rounded-lg stg:border stg:border-border stg:p-3">
       <div className="stg:flex stg:items-start stg:justify-between stg:gap-3">
         <div className="stg:flex stg:min-w-0 stg:flex-wrap stg:items-center stg:gap-x-2 stg:gap-y-1">
-          <span
-            className="stg:truncate stg:text-sm stg:font-medium stg:text-foreground"
-            title={template.name}
-          >
-            {template.name}
-          </span>
+          <TruncatedText
+            text={template.name}
+            className="stg:text-sm stg:font-medium stg:text-foreground"
+          />
           {/* (name, language) is the template's identity — each
               language is approved independently, so it always shows. */}
           <span className="stg:shrink-0 stg:text-xs stg:text-muted-foreground">

package/src/channel/__tests__/AgentChannelsPanel.test.tsx

@@ -5,6 +5,7 @@ import type { AgentChannelInput } from "@stigmer/sdk";
 import { StigmerContext } from "../../context";
 import { FetchCacheContext } from "../../internal/FetchCacheProvider";
 import { DeploymentModeContext } from "../../deployment-mode";
+import { openMenu } from "../../__tests__/helpers/open-menu";
 import { AgentChannelsPanel } from "../AgentChannelsPanel";
 
 // Toasts are visual feedback owned by the feedback module; keep them inert.
@@ -272,7 +273,7 @@ describe("AgentChannelsPanel", () => {
     );
 
     await waitFor(() => expect(screen.getByText("Support Slack")).toBeTruthy());
-    fireEvent.click(screen.getByRole("button", { name: /actions for/i }));
+    await openMenu(screen.getByRole("button", { name: /actions for/i }));
     fireEvent.click(await screen.findByRole("menuitem", { name: "Disconnect" }));
 
     // The confirmation explains teardown vs pause before anything happens.
@@ -409,14 +410,18 @@ describe("AgentChannelsPanel", () => {
     await waitFor(() => expect(screen.getByText("Support Slack")).toBeTruthy());
     await waitFor(() => expect(checkMyPermission).toHaveBeenCalled());
 
-    expect(screen.queryByRole("switch")).toBeNull();
+    // The panel renders mutation affordances optimistic-visible and hides
+    // them when the denial lands. "Mock was called" precedes "denial
+    // rendered", so wait for the state this test is actually about instead
+    // of racing the re-render (flaked under CPU contention, ~1/20).
+    await waitFor(() => expect(screen.queryByRole("switch")).toBeNull());
     expect(screen.queryByRole("button", { name: /connect to slack/i })).toBeNull();
 
     // The card menu still renders: Sessions is a viewer-level action
     // (everyone who sees the card holds can_view on the channel — the same
     // bar as viewing its sessions, DD-012). Mutation items stay
     // permission-gated and absent.
-    fireEvent.click(screen.getByRole("button", { name: /actions for/i }));
+    await openMenu(screen.getByRole("button", { name: /actions for/i }));
     // The awaited query anchors on the portaled menu's mount (#323) — only
     // then are the absence assertions below meaningful rather than vacuous.
     expect(await screen.findByRole("menuitem", { name: /sessions/i })).toBeTruthy();
@@ -441,7 +446,7 @@ describe("AgentChannelsPanel", () => {
     );
     await waitFor(() => expect(screen.getByText("Support Slack")).toBeTruthy());
 
-    fireEvent.click(screen.getByRole("button", { name: /actions for/i }));
+    await openMenu(screen.getByRole("button", { name: /actions for/i }));
     fireEvent.click(await screen.findByRole("menuitem", { name: /manage access/i }));
 
     // The one canonical dialog opens, and its subtitle names the channel
@@ -501,7 +506,7 @@ describe("AgentChannelsPanel", () => {
     );
 
     await waitFor(() => expect(screen.getByText("Support Slack")).toBeTruthy());
-    fireEvent.click(screen.getByRole("button", { name: /actions for/i }));
+    await openMenu(screen.getByRole("button", { name: /actions for/i }));
     fireEvent.click(
       await screen.findByRole("menuitem", { name: "Tool credentials" }),
     );
@@ -629,7 +634,7 @@ describe("AgentChannelsPanel", () => {
     await waitFor(() =>
       expect(screen.getByText("Support WhatsApp")).toBeTruthy(),
     );
-    fireEvent.click(screen.getByRole("button", { name: /actions for/i }));
+    await openMenu(screen.getByRole("button", { name: /actions for/i }));
     fireEvent.click(await screen.findByRole("menuitem", { name: "Disconnect" }));
 
     // WhatsApp credentials live on the shared ChannelApp and survive the
@@ -652,7 +657,7 @@ describe("AgentChannelsPanel", () => {
     await waitFor(() =>
       expect(screen.getByText("Support WhatsApp")).toBeTruthy(),
     );
-    fireEvent.click(screen.getByRole("button", { name: /actions for/i }));
+    await openMenu(screen.getByRole("button", { name: /actions for/i }));
     fireEvent.click(await screen.findByRole("menuitem", { name: "Templates" }));
 
     expect(
@@ -676,7 +681,7 @@ describe("AgentChannelsPanel", () => {
     );
 
     await waitFor(() => expect(screen.getByText("Support Slack")).toBeTruthy());
-    fireEvent.click(screen.getByRole("button", { name: /actions for/i }));
+    await openMenu(screen.getByRole("button", { name: /actions for/i }));
 
     // Slack has no template concept: hidden, not disabled — a disabled
     // item would imply the capability might one day exist there.
@@ -704,7 +709,7 @@ describe("AgentChannelsPanel", () => {
       expect(screen.getByText("Support WhatsApp")).toBeTruthy(),
     );
     await waitFor(() => expect(checkMyPermission).toHaveBeenCalled());
-    fireEvent.click(screen.getByRole("button", { name: /actions for/i }));
+    await openMenu(screen.getByRole("button", { name: /actions for/i }));
 
     expect(
       await screen.findByRole("menuitem", { name: /sessions/i }),

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.
@@ -74,15 +75,13 @@ export function CopyRow({
     <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">
-        <code
+        <TruncatedText
+          text={value}
           className={cn(
-            "stg:min-w-0 stg:flex-1 stg:truncate stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle",
+            "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>

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";
@@ -160,101 +166,127 @@ export function ComposerToolbar({
         )}
       </div>
 
-      {/* ---- Right group: Secondary actions (icon-only) + Send ---- */}
+      {/* ---- Right group: Secondary actions (icon-only) + Send ----
 
-      <div className="stg:flex stg:shrink-0 stg:items-center stg:gap-1">
-        {showWorkspace && (
-          onWorkspaceDirectAction
-            ? <button
-                type="button"
-                disabled={disabled}
-                onClick={onWorkspaceDirectAction}
-                title="Workspace"
-                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>
+          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(
-              "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="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>
-        )}
-
-        <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="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"
-            title="Stop"
-          >
-            {isStopping ? <SpinnerIcon /> : <StopIcon />}
-          </button>
-        ) : (
-          <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>
+          {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>
   );
 }