@stigmer/react 3.11.0 → 3.12.0

package/src/workflow/WorkflowTaskApprovalSummary.tsx

@@ -5,6 +5,7 @@ import Markdown from "react-markdown";
 import type { JsonObject } from "@bufbuild/protobuf";
 import { cn } from "@stigmer/theme";
 import { MARKDOWN_COMPONENTS, REMARK_PLUGINS } from "../internal/markdown-components.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { formatDuration, formatTimestamp } from "./format-utils.js";
 import type { TaskOutcome } from "./WorkflowTaskApprovalCard.js";
 import {
@@ -190,27 +191,33 @@ export const WorkflowTaskApprovalSummary = memo(function WorkflowTaskApprovalSum
 /**
  * `by <avatar> Ada Lovelace` — the reviewer's display identity, following
  * the platform's actor pattern (see `WorkflowVersionTimeline`). The email
- * rides as a native tooltip when it is not already the visible label. A
+ * rides on the house tooltip when it is not already the visible label. A
  * label that fell through to the raw identity (legacy records) renders
  * de-emphasized — internal IDs are never presented as if they were names.
  */
 function ReviewerChip({ reviewer }: { readonly reviewer: TaskReviewerView }) {
+  const nameClass = cn(
+    reviewer.isRawId
+      ? "stg:font-mono stg:text-[10px] stg:text-muted-foreground"
+      : "stg:font-medium stg:text-foreground",
+  );
+
   return (
     <span className="stg:flex stg:items-center stg:gap-1">
       by{" "}
       {reviewer.avatar && (
         <img src={reviewer.avatar} alt="" className="stg:size-3.5 stg:rounded-full" />
       )}
-      <span
-        className={cn(
-          reviewer.isRawId
-            ? "stg:font-mono stg:text-[10px] stg:text-muted-foreground"
-            : "stg:font-medium stg:text-foreground",
-        )}
-        title={reviewer.email || undefined}
-      >
-        {reviewer.label}
-      </span>
+      {reviewer.email ? (
+        <Tooltip>
+          <TooltipTrigger render={<span className={nameClass} />}>
+            {reviewer.label}
+          </TooltipTrigger>
+          <TooltipContent side="top">{reviewer.email}</TooltipContent>
+        </Tooltip>
+      ) : (
+        <span className={nameClass}>{reviewer.label}</span>
+      )}
     </span>
   );
 }

package/src/workflow/WorkflowTaskList.tsx

@@ -141,16 +141,16 @@ function formatKindName(kind: WorkflowTaskKind): string {
  * keep the bundle size minimal (DD-004).
  */
 function TaskKindIcon({
-  iconName,
   className,
 }: {
+  // The icon name is accepted (future per-kind icons) but not surfaced: the
+  // glyph is decorative and the kind label is already visible next to it.
   readonly iconName: string;
   readonly className?: string;
 }) {
   return (
     <span
       className={cn("stg:inline-flex stg:items-center stg:justify-center", className)}
-      title={iconName}
       aria-hidden="true"
     >
       <TaskDotIcon />

package/src/workflow/WorkflowVersionBadge.tsx

@@ -2,6 +2,7 @@
 
 import { memo, useCallback, useState } from "react";
 import { cn } from "@stigmer/theme";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 
 /** Props for {@link WorkflowVersionBadge}. */
 export interface WorkflowVersionBadgeProps {
@@ -56,26 +57,40 @@ export const WorkflowVersionBadge = memo(function WorkflowVersionBadge({
   return (
     <span className={cn("stg:inline-flex stg:items-center stg:gap-1.5", className)}>
       {isCurrent && (
-        <span
-          className="stg:size-2 stg:shrink-0 stg:rounded-full stg:bg-status-ready"
-          aria-label="Current version"
-          title="Current version"
-        />
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <span
+                className="stg:size-2 stg:shrink-0 stg:rounded-full stg:bg-status-ready"
+                aria-label="Current version"
+              />
+            }
+          />
+          <TooltipContent side="top">Current version</TooltipContent>
+        </Tooltip>
       )}
 
-      <button
-        type="button"
-        onClick={handleCopy}
-        title={copied ? "Copied!" : `Copy full hash: ${versionHash}`}
-        className={cn(
-          "stg:shrink-0 stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-[11px] stg:font-medium stg:text-foreground stg:transition-colors",
-          "stg:hover:bg-accent-hover",
-          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
-          copied && "stg:bg-status-ready-subtle stg:text-status-ready",
-        )}
-      >
-        {copied ? "copied" : truncated}
-      </button>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              type="button"
+              onClick={handleCopy}
+              className={cn(
+                "stg:shrink-0 stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-[11px] stg:font-medium stg:text-foreground stg:transition-colors",
+                "stg:hover:bg-accent-hover",
+                "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+                copied && "stg:bg-status-ready-subtle stg:text-status-ready",
+              )}
+            />
+          }
+        >
+          {copied ? "copied" : truncated}
+        </TooltipTrigger>
+        <TooltipContent side="top" className="stg:break-all">
+          {copied ? "Copied!" : `Copy full hash: ${versionHash}`}
+        </TooltipContent>
+      </Tooltip>
 
       {tag && (
         <span className="stg:shrink-0 stg:rounded-full stg:bg-primary-subtle stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-primary">

package/src/workflow/WorkflowVersionTimeline.tsx

@@ -5,6 +5,7 @@ import { cn } from "@stigmer/theme";
 import { useWorkflowVersions } from "./useWorkflowVersions.js";
 import { WorkflowVersionBadge } from "./WorkflowVersionBadge.js";
 import type { VersionEntry } from "../version-history/types.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 
 /** Props for {@link WorkflowVersionTimeline}. */
 export interface WorkflowVersionTimelineProps {
@@ -169,12 +170,12 @@ function VersionTimelineRow({
 
         {/* Second line: timestamp + actor */}
         <div className="stg:flex stg:items-center stg:gap-2 stg:text-xs stg:text-muted-foreground">
-          <time
-            dateTime={entry.timestamp.toISOString()}
-            title={entry.timestamp.toLocaleString()}
-          >
-            {formatRelativeTime(entry.timestamp)}
-          </time>
+          <Tooltip>
+            <TooltipTrigger render={<time dateTime={entry.timestamp.toISOString()} />}>
+              {formatRelativeTime(entry.timestamp)}
+            </TooltipTrigger>
+            <TooltipContent side="top">{entry.timestamp.toLocaleString()}</TooltipContent>
+          </Tooltip>
 
           {entry.actor && (
             <>

package/src/workflow/__tests__/WorkflowTaskApprovalSummary.test.tsx

@@ -74,7 +74,9 @@ describe("WorkflowTaskApprovalSummary", () => {
         />,
       );
       const name = screen.getByText("Ada Lovelace");
-      expect(name.getAttribute("title")).toBe("ada@example.com");
+      // The email rides the house tooltip now (native titles are banned,
+      // stigmer-cloud#268); the name span stays title-free.
+      expect(name.getAttribute("title")).toBeNull();
       expect(document.querySelector('img[src="https://example.com/ada.png"]')).toBeTruthy();
       // The raw identity is never shown when a display identity exists.
       expect(screen.queryByText("ida_01abc")).toBeNull();

package/src/workflow/__tests__/structured-data-viewer.test.tsx

@@ -69,8 +69,11 @@ describe("StructuredDataViewer", () => {
     it("does not treat IDs/URLs > 120 chars as prose", () => {
       const longId = "aex_" + "a".repeat(200);
       render(<StructuredDataViewer data={{ execution_id: longId }} />);
-      const element = screen.getByTitle(longId);
-      expect(element).toBeTruthy();
+      // A long ID renders as a truncating value (TruncatedText — the full
+      // string stays in the DOM; native titles are banned), never as a <p>.
+      const element = screen.getByText(longId);
+      expect(element.tagName).not.toBe("P");
+      expect(element.closest("[title]")).toBeNull();
     });
   });
 

package/src/workflow/execution-comparison/ExecutionComparisonView.tsx

@@ -6,6 +6,7 @@ import { WorkflowExecutionPhaseBadge } from "../WorkflowExecutionPhaseBadge.js";
 import { useExecutionComparison } from "./useExecutionComparison.js";
 import { ComparisonSummaryCards } from "./ComparisonSummaryCards.js";
 import { TaskComparisonTable } from "./TaskComparisonTable.js";
+import { TruncatedText } from "../../internal/truncated-text.js";
 
 /** Props for {@link ExecutionComparisonView}. */
 export interface ExecutionComparisonViewProps {
@@ -146,9 +147,10 @@ function ExecutionLabel({
         {label}:
       </span>
       <WorkflowExecutionPhaseBadge phase={phase} />
-      <span className="stg:max-w-[10rem] stg:truncate stg:text-xs stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)]" title={name}>
-        {name}
-      </span>
+      <TruncatedText
+        text={name}
+        className="stg:max-w-[10rem] stg:text-xs stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)]"
+      />
     </div>
   );
 }

package/src/workflow/execution-comparison/TaskComparisonTable.tsx

@@ -5,6 +5,7 @@ import { cn } from "@stigmer/theme";
 import { WorkflowTaskStatus } from "@stigmer/protos/ai/stigmer/agentic/workflowexecution/v1/enum_pb";
 import { formatDuration, formatMicroUsd } from "../format-utils.js";
 import type { TaskComparison, ExecutionComparison } from "./types.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../internal/tooltip.js";
 
 /** Props for {@link TaskComparisonTable}. */
 export interface TaskComparisonTableProps {
@@ -152,11 +153,17 @@ const TaskRow = memo(function TaskRow({
       <td className="stg:px-3 stg:py-2">
         <div className="stg:flex stg:items-center stg:gap-1.5">
           {isDivergencePoint && (
-            <span
-              className="stg:inline-block stg:h-1.5 stg:w-1.5 stg:rounded-full stg:bg-[var(--stgm-warning,#f59e0b)]"
-              title="First point of divergence"
-              aria-label="Divergence point"
-            />
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <span
+                    className="stg:inline-block stg:h-1.5 stg:w-1.5 stg:rounded-full stg:bg-[var(--stgm-warning,#f59e0b)]"
+                    aria-label="Divergence point"
+                  />
+                }
+              />
+              <TooltipContent side="top">First point of divergence</TooltipContent>
+            </Tooltip>
           )}
           <span className="stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)]">
             {task.taskName}

package/src/workflow/execution-history/ExecutionHistoryTable.tsx

@@ -10,6 +10,8 @@ import {
   type ExecutionSortField,
   type SortDirection,
 } from "./derive-execution-row.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../internal/tooltip.js";
+import { TruncatedText } from "../../internal/truncated-text.js";
 
 // ---------------------------------------------------------------------------
 // Column definitions
@@ -33,9 +35,10 @@ const COLUMNS: readonly ColumnDef[] = [
     header: "Name",
     sortField: "name",
     cell: (row) => (
-      <span className="stg:font-medium stg:text-foreground stg:truncate stg:max-w-[12rem] stg:inline-block" title={row.name}>
-        {row.name || "\u2014"}
-      </span>
+      <TruncatedText
+        text={row.name || "\u2014"}
+        className="stg:font-medium stg:text-foreground stg:max-w-[12rem] stg:inline-block"
+      />
     ),
     defaultVisible: true,
     minWidth: "8rem",
@@ -54,9 +57,12 @@ const COLUMNS: readonly ColumnDef[] = [
     sortField: "startedAt",
     cell: (row) =>
       row.startedAt ? (
-        <time dateTime={row.startedAt.toISOString()} title={row.startedAt.toLocaleString()}>
-          {formatRelativeTime(row.startedAt)}
-        </time>
+        <Tooltip>
+          <TooltipTrigger render={<time dateTime={row.startedAt.toISOString()} />}>
+            {formatRelativeTime(row.startedAt)}
+          </TooltipTrigger>
+          <TooltipContent side="top">{row.startedAt.toLocaleString()}</TooltipContent>
+        </Tooltip>
       ) : (
         "\u2014"
       ),
@@ -103,9 +109,14 @@ const COLUMNS: readonly ColumnDef[] = [
     sortField: "tasks",
     cell: (row) =>
       row.taskCount > 0 ? (
-        <span title={`${row.completedTaskCount} of ${row.taskCount} tasks finished`}>
-          {row.completedTaskCount}/{row.taskCount}
-        </span>
+        <Tooltip>
+          <TooltipTrigger render={<span />}>
+            {row.completedTaskCount}/{row.taskCount}
+          </TooltipTrigger>
+          <TooltipContent side="top">
+            {`${row.completedTaskCount} of ${row.taskCount} tasks finished`}
+          </TooltipContent>
+        </Tooltip>
       ) : (
         "\u2014"
       ),
@@ -122,15 +133,13 @@ const COLUMNS: readonly ColumnDef[] = [
       if (!label) return "\u2014";
       const isFailed = !!row.failedTaskName;
       return (
-        <span
+        <TruncatedText
+          text={label}
           className={cn(
-            "stg:truncate stg:max-w-[10rem] stg:inline-block stg:text-xs",
+            "stg:max-w-[10rem] stg:inline-block stg:text-xs",
             isFailed ? "stg:text-destructive" : "stg:text-muted-foreground",
           )}
-          title={label}
-        >
-          {label}
-        </span>
+        />
       );
     },
     defaultVisible: true,

package/src/workflow/inspector/InspectorHeader.tsx

@@ -5,6 +5,8 @@ import { cn } from "@stigmer/theme";
 import type { WorkflowGraphModel } from "../workflow-graph-model.js";
 import { TASK_NAME_PATTERN, TASK_NAME_PATTERN_ERROR } from "../canvas-constants.js";
 import type { InspectorNodeIdentity, InspectorMutations } from "./types.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../internal/tooltip.js";
+import { TruncatedText } from "../../internal/truncated-text.js";
 
 /** Props for {@link InspectorHeader}. */
 export interface InspectorHeaderProps {
@@ -107,14 +109,20 @@ export const InspectorHeader = memo(function InspectorHeader({
               )}
             </div>
           ) : (
-            <button
-              type="button"
-              onClick={startEditing}
-              className="stg:w-fit stg:max-w-full stg:truncate stg:text-left stg:text-sm stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)] stg:hover:underline"
-              title="Click to rename"
-            >
-              {identity.taskName}
-            </button>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <button
+                    type="button"
+                    onClick={startEditing}
+                    className="stg:w-fit stg:max-w-full stg:truncate stg:text-left stg:text-sm stg:font-semibold stg:text-[var(--stgm-foreground,#1a1a2e)] stg:hover:underline"
+                  />
+                }
+              >
+                {identity.taskName}
+              </TooltipTrigger>
+              <TooltipContent side="top">Click to rename</TooltipContent>
+            </Tooltip>
           )}
         </div>
 
@@ -155,9 +163,10 @@ export const InspectorHeader = memo(function InspectorHeader({
           {identity.kindString.replace(/_/g, " ")}
         </span>
         {identity.description && (
-          <span className="stg:truncate stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]" title={identity.description}>
-            {identity.description}
-          </span>
+          <TruncatedText
+            text={identity.description}
+            className="stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]"
+          />
         )}
       </div>
     </div>

package/src/workflow/inspector/NestedTaskList.tsx

@@ -2,6 +2,7 @@
 
 import { memo, useCallback } from "react";
 import { cn } from "@stigmer/theme";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../internal/tooltip.js";
 
 /** A nested task entry for display in the inspector. */
 export interface NestedTaskEntry {
@@ -118,17 +119,23 @@ export const NestedTaskList = memo(function NestedTaskList({
 
           {/* Remove button */}
           {editable && onRemove && (
-            <button
-              type="button"
-              onClick={(e) => { e.stopPropagation(); onRemove(idx); }}
-              className="stg:shrink-0 stg:opacity-0 stg:group-hover/task:opacity-100 stg:transition-opacity stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:text-[var(--stgm-destructive,#ef4444)]"
-              aria-label={`Remove task ${task.name}`}
-              title="Remove"
-            >
-              <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
-                <path d="M2.5 2.5l5 5M7.5 2.5l-5 5" />
-              </svg>
-            </button>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <button
+                    type="button"
+                    onClick={(e) => { e.stopPropagation(); onRemove(idx); }}
+                    className="stg:shrink-0 stg:opacity-0 stg:group-hover/task:opacity-100 stg:transition-opacity stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:text-[var(--stgm-destructive,#ef4444)]"
+                    aria-label={`Remove task ${task.name}`}
+                  />
+                }
+              >
+                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
+                  <path d="M2.5 2.5l5 5M7.5 2.5l-5 5" />
+                </svg>
+              </TooltipTrigger>
+              <TooltipContent side="top">Remove</TooltipContent>
+            </Tooltip>
           )}
         </div>
       ))}

package/src/workflow/inspector/WorkflowSummaryPanel.tsx

@@ -6,6 +6,7 @@ import type { WorkflowGraphModel, WorkflowGraphBudget, WorkflowGraphEnvVar } fro
 import { START_NODE_ID, END_NODE_ID } from "../workflow-graph-model.js";
 import { CATEGORY_DISPLAY_NAMES } from "../canvas-constants.js";
 import type { TopologyNodeCategory } from "../useWorkflowTopology.js";
+import { TruncatedText } from "../../internal/truncated-text.js";
 
 /** Props for {@link WorkflowSummaryPanel}. */
 export interface WorkflowSummaryPanelProps {
@@ -201,9 +202,10 @@ function EnvVarsSection({
               <span className="stg:text-[var(--stgm-muted-foreground,#737373)]">optional</span>
             )}
             {env.description && (
-              <span className="stg:truncate stg:text-[var(--stgm-muted-foreground,#737373)]" title={env.description}>
-                {env.description}
-              </span>
+              <TruncatedText
+                text={env.description}
+                className="stg:text-[var(--stgm-muted-foreground,#737373)]"
+              />
             )}
           </div>
         ))}

package/src/workflow/inspector/tabs/BranchesTab.tsx

@@ -2,6 +2,11 @@
 
 import { memo, useCallback, useMemo, useState } from "react";
 import { cn } from "@stigmer/theme";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../../internal/tooltip.js";
 import type { WorkflowGraphNode, WorkflowGraphModel } from "../../workflow-graph-model.js";
 import type { InspectorMutations } from "../types.js";
 
@@ -172,17 +177,23 @@ function SwitchCaseBranches({
                 </div>
 
                 {/* Remove button */}
-                <button
-                  type="button"
-                  onClick={() => handleRemove(caseEntry.name)}
-                  className="stg:shrink-0 stg:opacity-0 stg:group-hover/case:opacity-100 stg:transition-opacity stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:text-[var(--stgm-destructive,#ef4444)]"
-                  aria-label={`Remove case ${caseEntry.name}`}
-                  title="Remove case"
-                >
-                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
-                    <path d="M3 3l6 6M9 3l-6 6" />
-                  </svg>
-                </button>
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <button
+                        type="button"
+                        onClick={() => handleRemove(caseEntry.name)}
+                        className="stg:shrink-0 stg:opacity-0 stg:group-hover/case:opacity-100 stg:transition-opacity stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:text-[var(--stgm-destructive,#ef4444)]"
+                        aria-label={`Remove case ${caseEntry.name}`}
+                      />
+                    }
+                  >
+                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
+                      <path d="M3 3l6 6M9 3l-6 6" />
+                    </svg>
+                  </TooltipTrigger>
+                  <TooltipContent side="top">Remove case</TooltipContent>
+                </Tooltip>
               </div>
             );
           })}
@@ -354,32 +365,51 @@ function ForkBranches({
                     className="stg:w-full stg:rounded stg:border stg:border-[var(--stgm-ring,#3b82f6)] stg:bg-[var(--stgm-background,#fff)] stg:px-1 stg:py-0.5 stg:text-[11px] stg:text-[var(--stgm-foreground,#1a1a2e)] stg:outline-none"
                   />
                 ) : (
-                  <span
-                    className="stg:text-[11px] stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)] stg:truncate stg:block stg:cursor-text"
-                    onDoubleClick={() => startRename(idx, branch.name)}
-                    title="Double-click to rename"
-                  >
-                    {branch.name}
-                  </span>
+                  <Tooltip>
+                    <TooltipTrigger
+                      render={
+                        <span
+                          className="stg:text-[11px] stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)] stg:truncate stg:block stg:cursor-text"
+                          onDoubleClick={() => startRename(idx, branch.name)}
+                        />
+                      }
+                    >
+                      {branch.name}
+                    </TooltipTrigger>
+                    <TooltipContent side="top">
+                      Double-click to rename
+                    </TooltipContent>
+                  </Tooltip>
                 )}
                 <span className="stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
                   {branch.taskCount} {branch.taskCount === 1 ? "task" : "tasks"}
                 </span>
               </div>
 
-              {/* Remove — disabled if only 2 branches */}
-              <button
-                type="button"
-                onClick={() => handleRemove(branch.name)}
-                disabled={branches.length <= 2}
-                className="stg:shrink-0 stg:opacity-0 stg:group-hover/branch:opacity-100 stg:transition-opacity stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:text-[var(--stgm-destructive,#ef4444)] stg:disabled:opacity-30 stg:disabled:cursor-not-allowed"
-                aria-label={`Remove branch ${branch.name}`}
-                title={branches.length <= 2 ? "Fork requires at least 2 branches" : "Remove branch"}
-              >
-                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
-                  <path d="M3 3l6 6M9 3l-6 6" />
-                </svg>
-              </button>
+              {/* Remove — disabled if only 2 branches. The tooltip trigger is
+                  a wrapper span so the "why is this disabled" explanation
+                  stays hoverable (disabled buttons never receive pointer
+                  events). */}
+              <Tooltip>
+                <TooltipTrigger render={<span className="stg:inline-flex stg:shrink-0" />}>
+                  <button
+                    type="button"
+                    onClick={() => handleRemove(branch.name)}
+                    disabled={branches.length <= 2}
+                    className="stg:shrink-0 stg:opacity-0 stg:group-hover/branch:opacity-100 stg:transition-opacity stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:text-[var(--stgm-destructive,#ef4444)] stg:disabled:opacity-30 stg:disabled:cursor-not-allowed"
+                    aria-label={`Remove branch ${branch.name}`}
+                  >
+                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
+                      <path d="M3 3l6 6M9 3l-6 6" />
+                    </svg>
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="top">
+                  {branches.length <= 2
+                    ? "Fork requires at least 2 branches"
+                    : "Remove branch"}
+                </TooltipContent>
+              </Tooltip>
             </div>
           ))}
         </div>

package/src/workflow/instance/WorkflowInstanceList.tsx

@@ -12,6 +12,7 @@ import { useEnvironmentList } from "../../environment/useEnvironmentList.js";
 import { ResourceVisibilityControl } from "../../library/ResourceVisibilityControl.js";
 import { useCheckPermission } from "../../iam-policy/useCheckPermission.js";
 import { WorkflowInstanceEmptyState } from "./WorkflowInstanceEmptyState.js";
+import { TruncatedText } from "../../internal/truncated-text.js";
 
 /** Props for {@link WorkflowInstanceList}. */
 export interface WorkflowInstanceListProps {
@@ -206,12 +207,10 @@ function InstanceRow({
     >
       <td className="stg:px-4 stg:py-2.5">
         <div className="stg:min-w-0">
-          <span
-            className="stg:block stg:truncate stg:font-medium stg:text-foreground"
-            title={meta?.name || meta?.slug || undefined}
-          >
-            {meta?.name || meta?.slug || "—"}
-          </span>
+          <TruncatedText
+            text={meta?.name || meta?.slug || "—"}
+            className="stg:block stg:font-medium stg:text-foreground"
+          />
           {instance.spec?.description && (
             <p className="stg:text-[0.65rem] stg:text-muted-foreground stg:truncate">
               {instance.spec.description}

package/src/workflow/instance/__tests__/WorkflowInstanceList.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 { WorkflowInstanceList } from "../WorkflowInstanceList";
 
 // Isolate the row-actions behavior under test from the data, environment,
@@ -78,7 +79,7 @@ describe("WorkflowInstanceList row actions", () => {
 
     // No always-visible action buttons; the row shows a single kebab.
     expect(screen.queryByRole("button", { name: "Run" })).toBeNull();
-    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+    await openMenu(screen.getByRole("button", { name: /^Actions for/ }));
 
     expect(await screen.findByRole("menuitem", { name: "Run" })).toBeTruthy();
     expect(screen.getByRole("menuitem", { name: "Delete" })).toBeTruthy();
@@ -97,7 +98,7 @@ describe("WorkflowInstanceList 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: "Run" }));
 
     expect(onRun).toHaveBeenCalledTimes(1);
@@ -117,7 +118,7 @@ describe("WorkflowInstanceList 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);
@@ -135,7 +136,7 @@ describe("WorkflowInstanceList row actions", () => {
       />,
     );
 
-    fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
+    await openMenu(screen.getByRole("button", { name: /^Actions for/ }));
     expect(await screen.findByRole("menuitem", { name: "Run" })).toBeTruthy();
     expect(screen.queryByRole("menuitem", { name: "Delete" })).toBeNull();
   });