@stigmer/react 3.11.0 → 3.11.1-dev.20260812192248

package/src/agent-instance/__tests__/AgentInstanceList.test.tsx

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeAll, afterEach } from "vitest";
 import { render, screen, fireEvent, cleanup } from "@testing-library/react";
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
+import { openMenu } from "../../__tests__/helpers/open-menu";
 import { AgentInstanceList } from "../AgentInstanceList";
 
 // Isolate the row-actions behavior under test from the data, environment,
@@ -79,7 +80,7 @@ describe("AgentInstanceList row actions", () => {
 
     // No always-visible action buttons; the row shows a single kebab.
     expect(screen.queryByRole("button", { name: "Start session" })).toBeNull();
-    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+    await openMenu(screen.getByRole("button", { name: /^Actions for/ }));
 
     expect(
       await screen.findByRole("menuitem", { name: "Start session" }),
@@ -100,7 +101,7 @@ describe("AgentInstanceList row actions", () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+    await openMenu(screen.getByRole("button", { name: /^Actions for/ }));
     fireEvent.click(await screen.findByRole("menuitem", { name: "Start session" }));
 
     expect(onStart).toHaveBeenCalledTimes(1);
@@ -120,7 +121,7 @@ describe("AgentInstanceList row actions", () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+    await openMenu(screen.getByRole("button", { name: /^Actions for/ }));
     fireEvent.click(await screen.findByRole("menuitem", { name: "Delete" }));
 
     expect(onDelete).toHaveBeenCalledWith(inst);
@@ -138,7 +139,7 @@ describe("AgentInstanceList row actions", () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+    await openMenu(screen.getByRole("button", { name: /^Actions for/ }));
     expect(
       await screen.findByRole("menuitem", { name: "Start session" }),
     ).toBeTruthy();

package/src/api-key/ApiKeyListPanel.tsx

@@ -5,6 +5,7 @@ import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type { ApiKey } from "@stigmer/protos/ai/stigmer/iam/apikey/v1/api_pb";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { useApiKeyList } from "./useApiKeyList.js";
 import { useDeleteApiKey } from "./useDeleteApiKey.js";
 
@@ -242,9 +243,16 @@ function ApiKeyRow({
       {/* Metadata columns */}
       <div className="stg:hidden stg:sm:flex stg:shrink-0 stg:items-center stg:gap-4 stg:text-xs stg:text-muted-foreground">
         {createdAt && (
-          <span title={`Created ${timestampDate(createdAt).toISOString()}`}>
-            {formatShortDate(timestampDate(createdAt))}
-          </span>
+          <Tooltip>
+            <TooltipTrigger
+              render={<time dateTime={timestampDate(createdAt).toISOString()} />}
+            >
+              {formatShortDate(timestampDate(createdAt))}
+            </TooltipTrigger>
+            <TooltipContent side="top">
+              {`Created ${timestampDate(createdAt).toISOString()}`}
+            </TooltipContent>
+          </Tooltip>
         )}
         <span>
           {neverExpires

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>