@stigmer/react 3.11.0 → 3.12.0

package/src/sharing/ShareAgentDialog.tsx

@@ -27,6 +27,7 @@ import { useBillingAccount } from "../billing/useBillingAccount.js";
 import { formatCreditBalance } from "../billing/format.js";
 import { EnvironmentPicker } from "../environment/EnvironmentPicker.js";
 import { generateSlug } from "../internal/slug.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { getFieldError, validateMessage } from "../internal/validate.js";
 import {
   draftFromShare,
@@ -1637,15 +1638,13 @@ function CopyField({
             {value}
           </pre>
         ) : (
-          <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:px-2.5 stg:py-1.5",
+              "stg:min-w-0 stg:flex-1 stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle stg:px-2.5 stg:py-1.5",
               "stg:font-mono stg:text-xs stg:text-foreground",
             )}
-            title={value}
-          >
-            {value}
-          </code>
+          />
         )}
         <div className="stg:flex stg:shrink-0 stg:flex-col stg:gap-1.5">
           <button

package/src/sharing/__tests__/AgentShareList.test.tsx

@@ -7,6 +7,7 @@ import type { AgentShareInput } 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 { AgentShareList } from "../AgentShareList";
 
 // Toasts are visual feedback owned by the feedback module; keep them inert.
@@ -173,8 +174,7 @@ async function openRowMenu(rowName?: string) {
   const scope = rowName
     ? within(screen.getByText(rowName).closest("tr")!)
     : screen;
-  fireEvent.click(scope.getByRole("button", { name: /^Actions for/ }));
-  await screen.findByRole("menuitem", { name: "Edit" });
+  await openMenu(scope.getByRole("button", { name: /^Actions for/ }));
 }
 
 describe("AgentShareList", () => {
@@ -442,8 +442,8 @@ describe("AgentShareList", () => {
       });
       await renderList(client);
 
-      fireEvent.click(screen.getByRole("button", { name: /^Actions for/ }));
-      expect(await screen.findByRole("menuitem", { name: "Delete" })).toBeTruthy();
+      await openMenu(screen.getByRole("button", { name: /^Actions for/ }));
+      expect(screen.getByRole("menuitem", { name: "Delete" })).toBeTruthy();
       expect(screen.queryByRole("menuitem", { name: "Edit" })).toBeNull();
       expect(screen.queryByRole("menuitem", { name: "Pause" })).toBeNull();
       expect(screen.queryByRole("menuitem", { name: "Reset link" })).toBeNull();

package/src/skill/SkillDetailView.tsx

@@ -14,6 +14,7 @@ import { ErrorMessage } from "../error/ErrorMessage.js";
 import { VisibilityBadge } from "../library/VisibilitySelector.js";
 import { useManageAccess } from "../access/useManageAccess.js";
 import { MARKDOWN_COMPONENTS, REMARK_PLUGINS, stripFrontmatter } from "../internal/markdown-components.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { ResourceDetailShell } from "../resource-detail/ResourceDetailShell.js";
 import { Section } from "../resource-detail/Section.js";
 import { useDetailTabs } from "../resource-detail/useDetailTabs.js";
@@ -518,12 +519,16 @@ function VersionSection({
             <span className="stg:text-xs stg:font-medium stg:text-muted-foreground">
               Hash
             </span>
-            <code
-              className="stg:font-mono stg:text-xs stg:text-foreground"
-              title={versionHash}
-            >
-              {truncatedHash}
-            </code>
+            <Tooltip>
+              <TooltipTrigger
+                render={<code className="stg:font-mono stg:text-xs stg:text-foreground" />}
+              >
+                {truncatedHash}
+              </TooltipTrigger>
+              <TooltipContent side="top" className="stg:break-all">
+                {versionHash}
+              </TooltipContent>
+            </Tooltip>
           </div>
         )}
 
@@ -567,12 +572,18 @@ function GitProvenanceDisplay({
             </>
           )}
           {truncatedCommit && (
-            <code
-              className="stg:rounded stg:bg-muted stg:px-1 stg:py-0.5 stg:font-mono stg:text-[10px]"
-              title={provenance.commit}
-            >
-              {truncatedCommit}
-            </code>
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <code className="stg:rounded stg:bg-muted stg:px-1 stg:py-0.5 stg:font-mono stg:text-[10px]" />
+                }
+              >
+                {truncatedCommit}
+              </TooltipTrigger>
+              <TooltipContent side="top" className="stg:break-all">
+                {provenance.commit}
+              </TooltipContent>
+            </Tooltip>
           )}
         </div>
       </div>

package/src/version-history/VersionTimelineEntry.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { cn } from "@stigmer/theme";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import type { VersionTimelineEntryProps } from "./types.js";
 
 /**
@@ -82,12 +83,18 @@ export function VersionTimelineEntry({
       >
         {/* Top line: hash + tag + current badge */}
         <div className="stg:flex stg:items-center stg:gap-2">
-          <code
-            className="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"
-            title={entry.id}
-          >
-            {entry.label}
-          </code>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <code className="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" />
+              }
+            >
+              {entry.label}
+            </TooltipTrigger>
+            <TooltipContent side="top" className="stg:break-all">
+              {entry.id}
+            </TooltipContent>
+          </Tooltip>
 
           {isCompareSource && (
             <span className="stg:shrink-0 stg:rounded-full stg:bg-primary stg:px-1.5 stg:py-0.5 stg:text-[10px] stg:font-medium stg:text-primary-foreground">
@@ -114,12 +121,14 @@ export function VersionTimelineEntry({
 
         {/* 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/CanvasTransitionEdge.tsx

@@ -10,6 +10,7 @@ import type { EdgeDiffStatus } from "./diff/types.js";
 import { CanvasActionsContext } from "./CanvasActionsContext.js";
 import { TaskPickerPopover } from "./TaskPickerPopover.js";
 import { useWorkflowGraphMode } from "./WorkflowGraphModeContext.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 
 // ---------------------------------------------------------------------------
 // Execution-state visual mapping (DD-T06-005)
@@ -205,22 +206,28 @@ export const CanvasTransitionEdge = memo(function CanvasTransitionEdge({
           {/* Insert button and picker — design mode only */}
           {isDesignMode && (
             <>
-              <button
-                ref={insertBtnRef}
-                type="button"
-                onClick={handleOpenPicker}
-                className={cn(
-                  "stg:flex stg:h-5 stg:w-5 stg:items-center stg:justify-center stg:rounded-full stg:border stg:border-[var(--stgm-border-prominent,#d4d4d8)] stg:bg-[var(--stgm-card,var(--stgm-background,#fff))] stg:text-[var(--stgm-muted-foreground,#737373)] stg:shadow-sm stg:transition-all",
-                  "stg:hover:border-[var(--stgm-primary,#6366f1)] stg:hover:bg-[var(--stgm-primary,#6366f1)] stg:hover:text-[var(--stgm-primary-foreground,#fff)]",
-                  hovered || selected || pickerOpen ? "stg:scale-100 stg:opacity-100" : "stg:scale-75 stg:opacity-0",
-                )}
-                aria-label="Insert task here"
-                title="Insert task"
-              >
-                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
-                  <path d="M5 2v6M2 5h6" />
-                </svg>
-              </button>
+              <Tooltip>
+                <TooltipTrigger
+                  render={
+                    <button
+                      ref={insertBtnRef}
+                      type="button"
+                      onClick={handleOpenPicker}
+                      className={cn(
+                        "stg:flex stg:h-5 stg:w-5 stg:items-center stg:justify-center stg:rounded-full stg:border stg:border-[var(--stgm-border-prominent,#d4d4d8)] stg:bg-[var(--stgm-card,var(--stgm-background,#fff))] stg:text-[var(--stgm-muted-foreground,#737373)] stg:shadow-sm stg:transition-all",
+                        "stg:hover:border-[var(--stgm-primary,#6366f1)] stg:hover:bg-[var(--stgm-primary,#6366f1)] stg:hover:text-[var(--stgm-primary-foreground,#fff)]",
+                        hovered || selected || pickerOpen ? "stg:scale-100 stg:opacity-100" : "stg:scale-75 stg:opacity-0",
+                      )}
+                      aria-label="Insert task here"
+                    />
+                  }
+                >
+                  <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
+                    <path d="M5 2v6M2 5h6" />
+                  </svg>
+                </TooltipTrigger>
+                <TooltipContent side="top">Insert task</TooltipContent>
+              </Tooltip>
 
               <TaskPickerPopover
                 open={pickerOpen}

package/src/workflow/ExecutionActiveTaskIndicator.tsx

@@ -4,6 +4,7 @@ import { memo, useEffect, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
 import type { ActiveTaskInfo } from "./useActiveTaskName.js";
 import { formatDuration } from "./format-utils.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 
 /** Props for {@link ExecutionActiveTaskIndicator}. */
 export interface ExecutionActiveTaskIndicatorProps {
@@ -79,70 +80,84 @@ export const ExecutionActiveTaskIndicator = memo(function ExecutionActiveTaskInd
   return (
     <div className={cn("stg:absolute stg:left-3 stg:top-3 stg:z-50 stg:flex stg:items-center stg:gap-2", className)}>
       {/* Main indicator pill */}
-      <button
-        type="button"
-        onClick={onJumpToTask}
-        className={cn(
-          "stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:border stg:px-2.5 stg:py-1.5 stg:text-xs stg:font-medium stg:shadow-sm stg:backdrop-blur-sm stg:transition-colors",
-          isApproval
-            ? "stg:border-[var(--stgm-warning,#f59e0b)]/40 stg:bg-[var(--stgm-warning,#f59e0b)]/10 stg:text-[var(--stgm-foreground,#1a1a2e)] stg:hover:bg-[var(--stgm-warning,#f59e0b)]/20"
-            : "stg:border-[var(--stgm-primary,#6366f1)]/30 stg:bg-[var(--stgm-card,#fff)]/90 stg:text-[var(--stgm-foreground,#1a1a2e)] stg:hover:bg-[var(--stgm-primary,#6366f1)]/10",
-        )}
-        title="Click to center on active task"
-      >
-        {/* Pulsing status dot */}
-        <span
-          className={cn(
-            "stg:inline-block stg:h-2 stg:w-2 stg:rounded-full stg:motion-safe:animate-pulse",
-            isApproval
-              ? "stg:bg-[var(--stgm-warning,#f59e0b)]"
-              : "stg:bg-[var(--stgm-primary,#6366f1)]",
-          )}
-          aria-hidden="true"
-        />
-
-        <span>{statusLabel}</span>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              type="button"
+              onClick={onJumpToTask}
+              className={cn(
+                "stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:border stg:px-2.5 stg:py-1.5 stg:text-xs stg:font-medium stg:shadow-sm stg:backdrop-blur-sm stg:transition-colors",
+                isApproval
+                  ? "stg:border-[var(--stgm-warning,#f59e0b)]/40 stg:bg-[var(--stgm-warning,#f59e0b)]/10 stg:text-[var(--stgm-foreground,#1a1a2e)] stg:hover:bg-[var(--stgm-warning,#f59e0b)]/20"
+                  : "stg:border-[var(--stgm-primary,#6366f1)]/30 stg:bg-[var(--stgm-card,#fff)]/90 stg:text-[var(--stgm-foreground,#1a1a2e)] stg:hover:bg-[var(--stgm-primary,#6366f1)]/10",
+              )}
+            />
+          }
+        >
+          {/* Pulsing status dot */}
+          <span
+            className={cn(
+              "stg:inline-block stg:h-2 stg:w-2 stg:rounded-full stg:motion-safe:animate-pulse",
+              isApproval
+                ? "stg:bg-[var(--stgm-warning,#f59e0b)]"
+                : "stg:bg-[var(--stgm-primary,#6366f1)]",
+            )}
+            aria-hidden="true"
+          />
 
-        {elapsedMs > 0 && (
-          <>
-            <span className="stg:text-[var(--stgm-muted-foreground,#737373)]" aria-hidden="true">·</span>
-            <span className="stg:tabular-nums stg:text-[var(--stgm-muted-foreground,#737373)]">
-              {formatDuration(elapsedMs)}
-            </span>
-          </>
-        )}
-      </button>
+          <span>{statusLabel}</span>
 
-      {/* Follow toggle */}
-      <button
-        type="button"
-        onClick={onFollowToggle}
-        className={cn(
-          "stg:flex stg:h-7 stg:w-7 stg:items-center stg:justify-center stg:rounded-md stg:border stg:shadow-sm stg:backdrop-blur-sm stg:transition-colors",
-          isFollowing
-            ? "stg:border-[var(--stgm-primary,#6366f1)]/40 stg:bg-[var(--stgm-primary,#6366f1)]/10 stg:text-[var(--stgm-primary,#6366f1)]"
-            : "stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-card,#fff)]/90 stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:text-[var(--stgm-foreground,#1a1a2e)]",
-        )}
-        title={isFollowing ? "Following active task (click to stop)" : "Follow active task"}
-        aria-label={isFollowing ? "Stop following active task" : "Follow active task"}
-        aria-pressed={isFollowing}
-      >
-        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
-          {isFollowing ? (
-            // Crosshair icon (following)
+          {elapsedMs > 0 && (
             <>
-              <circle cx="7" cy="7" r="3" stroke="currentColor" strokeWidth="1.5" />
-              <path d="M7 1v2M7 11v2M1 7h2M11 7h2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-            </>
-          ) : (
-            // Eye icon (not following)
-            <>
-              <path d="M1.5 7s2.2-3.5 5.5-3.5S12.5 7 12.5 7s-2.2 3.5-5.5 3.5S1.5 7 1.5 7z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
-              <circle cx="7" cy="7" r="1.5" stroke="currentColor" strokeWidth="1.5" />
+              <span className="stg:text-[var(--stgm-muted-foreground,#737373)]" aria-hidden="true">·</span>
+              <span className="stg:tabular-nums stg:text-[var(--stgm-muted-foreground,#737373)]">
+                {formatDuration(elapsedMs)}
+              </span>
             </>
           )}
-        </svg>
-      </button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">Click to center on active task</TooltipContent>
+      </Tooltip>
+
+      {/* Follow toggle */}
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              type="button"
+              onClick={onFollowToggle}
+              className={cn(
+                "stg:flex stg:h-7 stg:w-7 stg:items-center stg:justify-center stg:rounded-md stg:border stg:shadow-sm stg:backdrop-blur-sm stg:transition-colors",
+                isFollowing
+                  ? "stg:border-[var(--stgm-primary,#6366f1)]/40 stg:bg-[var(--stgm-primary,#6366f1)]/10 stg:text-[var(--stgm-primary,#6366f1)]"
+                  : "stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-card,#fff)]/90 stg:text-[var(--stgm-muted-foreground,#737373)] stg:hover:text-[var(--stgm-foreground,#1a1a2e)]",
+              )}
+              aria-label={isFollowing ? "Stop following active task" : "Follow active task"}
+              aria-pressed={isFollowing}
+            />
+          }
+        >
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
+            {isFollowing ? (
+              // Crosshair icon (following)
+              <>
+                <circle cx="7" cy="7" r="3" stroke="currentColor" strokeWidth="1.5" />
+                <path d="M7 1v2M7 11v2M1 7h2M11 7h2" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+              </>
+            ) : (
+              // Eye icon (not following)
+              <>
+                <path d="M1.5 7s2.2-3.5 5.5-3.5S12.5 7 12.5 7s-2.2 3.5-5.5 3.5S1.5 7 1.5 7z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
+                <circle cx="7" cy="7" r="1.5" stroke="currentColor" strokeWidth="1.5" />
+              </>
+            )}
+          </svg>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          {isFollowing ? "Following active task (click to stop)" : "Follow active task"}
+        </TooltipContent>
+      </Tooltip>
 
       {/* Screen reader live region */}
       <span

package/src/workflow/TaskPickerPopover.tsx

@@ -308,7 +308,6 @@ function PickerItem({
       role="option"
       aria-selected={isFocused}
       aria-disabled={item.disabled}
-      title={item.disabled ? item.disabledReason : undefined}
       onClick={item.disabled ? undefined : () => onSelect(item.descriptor.kind)}
       className={cn(
         "stg:flex stg:w-full stg:items-start stg:gap-2 stg:rounded stg:px-2 stg:py-1.5 stg:text-left stg:transition-colors",

package/src/workflow/WorkflowCanvasEditor.tsx

@@ -16,6 +16,12 @@ import type { CanvasContextMenuTarget } from "./CanvasContextMenu.js";
 import { TaskPickerPopover } from "./TaskPickerPopover.js";
 import { useCanvasKeyboardShortcuts } from "./useCanvasKeyboardShortcuts.js";
 import { ViewYamlDialog } from "./ViewYamlDialog.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../internal/tooltip.js";
 
 /** Props for {@link WorkflowCanvasEditor}. */
 export interface WorkflowCanvasEditorProps {
@@ -732,41 +738,49 @@ function PaletteToggle({
   onToggle: () => void;
 }) {
   return (
-    <button
-      type="button"
-      onClick={onToggle}
-      className={cn(
-        "stg:absolute stg:left-2 stg:z-10 stg:rounded stg:border stg:border-[var(--stgm-border-prominent,#d4d4d8)] stg:bg-[var(--stgm-card,var(--stgm-background,#fff))] stg:p-1 stg:shadow-sm",
-        "stg:hover:bg-[var(--stgm-muted,#f5f5f5)] stg:active:bg-[var(--stgm-accent,#e5e5e5)]",
-        collapsed ? "stg:top-2" : "stg:bottom-2",
-      )}
-      aria-label={collapsed ? "Show task palette" : "Hide task palette"}
-      title={collapsed ? "Show task palette" : "Hide task palette"}
-    >
-      <svg
-        width="14"
-        height="14"
-        viewBox="0 0 16 16"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className="stg:text-[var(--stgm-foreground,#1a1a2e)]"
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <button
+            type="button"
+            onClick={onToggle}
+            className={cn(
+              "stg:absolute stg:left-2 stg:z-10 stg:rounded stg:border stg:border-[var(--stgm-border-prominent,#d4d4d8)] stg:bg-[var(--stgm-card,var(--stgm-background,#fff))] stg:p-1 stg:shadow-sm",
+              "stg:hover:bg-[var(--stgm-muted,#f5f5f5)] stg:active:bg-[var(--stgm-accent,#e5e5e5)]",
+              collapsed ? "stg:top-2" : "stg:bottom-2",
+            )}
+            aria-label={collapsed ? "Show task palette" : "Hide task palette"}
+          />
+        }
       >
-        {collapsed ? (
-          <>
-            <rect x="1" y="1" width="5" height="14" rx="1" />
-            <path d="M10 8h5M11 6l2 2-2 2" />
-          </>
-        ) : (
-          <>
-            <rect x="1" y="1" width="5" height="14" rx="1" />
-            <path d="M14 8H9M13 6l-2 2 2 2" />
-          </>
-        )}
-      </svg>
-    </button>
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="stg:text-[var(--stgm-foreground,#1a1a2e)]"
+        >
+          {collapsed ? (
+            <>
+              <rect x="1" y="1" width="5" height="14" rx="1" />
+              <path d="M10 8h5M11 6l2 2-2 2" />
+            </>
+          ) : (
+            <>
+              <rect x="1" y="1" width="5" height="14" rx="1" />
+              <path d="M14 8H9M13 6l-2 2 2 2" />
+            </>
+          )}
+        </svg>
+      </TooltipTrigger>
+      <TooltipContent side="right">
+        {collapsed ? "Show task palette" : "Hide task palette"}
+      </TooltipContent>
+    </Tooltip>
   );
 }
 
@@ -802,35 +816,52 @@ function CanvasToolbar({
     "stg:rounded stg:border stg:border-[var(--stgm-border-prominent,#d4d4d8)] stg:bg-[var(--stgm-card,var(--stgm-background,#fff))] stg:px-2 stg:py-1 stg:text-xs stg:font-medium stg:text-[var(--stgm-foreground,#1a1a2e)] stg:shadow-sm stg:hover:bg-[var(--stgm-muted,#f5f5f5)] stg:active:bg-[var(--stgm-accent,#e5e5e5)] stg:disabled:cursor-not-allowed stg:disabled:opacity-40";
 
   return (
-    <div className="stg:absolute stg:left-2 stg:top-2 stg:z-10 stg:flex stg:items-center stg:gap-1">
-      <button type="button" onClick={onUndo} disabled={!canUndo} className={btnClass} aria-label="Undo" title={`Undo (${TOOLBAR_SHORTCUTS.undo})`}>
-        Undo
-      </button>
-      <button type="button" onClick={onRedo} disabled={!canRedo} className={btnClass} aria-label="Redo" title={`Redo (${TOOLBAR_SHORTCUTS.redo})`}>
-        Redo
-      </button>
-      <div className="stg:mx-1 stg:h-4 stg:w-px stg:bg-[var(--stgm-border,#d4d4d8)]" aria-hidden="true" />
-      <button type="button" onClick={onAutoLayout} className={btnClass} aria-label="Auto-layout" title="Auto-layout">
-        Auto-layout
-      </button>
-      {onSave && (
-        <>
-          <div className="stg:mx-1 stg:h-4 stg:w-px stg:bg-[var(--stgm-border,#d4d4d8)]" aria-hidden="true" />
-          <button
-            type="button"
-            onClick={onSave}
-            disabled={!isDirty || isSaving}
-            className="stg:rounded stg:bg-[var(--stgm-primary,#6366f1)] stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium stg:text-[var(--stgm-primary-foreground,#fff)] stg:shadow-sm stg:hover:opacity-90 stg:disabled:cursor-not-allowed stg:disabled:opacity-40"
-          >
-            {isSaving ? "Saving\u2026" : "Save"}
-          </button>
-        </>
-      )}
-      {isDirty && !onSave && (
-        <span className="stg:ml-1 stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
-          Modified
-        </span>
-      )}
-    </div>
+    // Undo/Redo show their keyboard shortcut on the house tooltip; the
+    // trigger is a wrapper span so the shortcut stays discoverable while the
+    // button is disabled (disabled buttons receive no pointer events).
+    // Auto-layout's label is already visible text — no tooltip to add. The
+    // provider is context-only and groups the buttons' hover delay.
+    <TooltipProvider>
+      <div className="stg:absolute stg:left-2 stg:top-2 stg:z-10 stg:flex stg:items-center stg:gap-1">
+        <Tooltip>
+          <TooltipTrigger render={<span className="stg:inline-flex" />}>
+            <button type="button" onClick={onUndo} disabled={!canUndo} className={btnClass} aria-label="Undo">
+              Undo
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">{TOOLBAR_SHORTCUTS.undo}</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger render={<span className="stg:inline-flex" />}>
+            <button type="button" onClick={onRedo} disabled={!canRedo} className={btnClass} aria-label="Redo">
+              Redo
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">{TOOLBAR_SHORTCUTS.redo}</TooltipContent>
+        </Tooltip>
+        <div className="stg:mx-1 stg:h-4 stg:w-px stg:bg-[var(--stgm-border,#d4d4d8)]" aria-hidden="true" />
+        <button type="button" onClick={onAutoLayout} className={btnClass} aria-label="Auto-layout">
+          Auto-layout
+        </button>
+        {onSave && (
+          <>
+            <div className="stg:mx-1 stg:h-4 stg:w-px stg:bg-[var(--stgm-border,#d4d4d8)]" aria-hidden="true" />
+            <button
+              type="button"
+              onClick={onSave}
+              disabled={!isDirty || isSaving}
+              className="stg:rounded stg:bg-[var(--stgm-primary,#6366f1)] stg:px-2.5 stg:py-1 stg:text-xs stg:font-medium stg:text-[var(--stgm-primary-foreground,#fff)] stg:shadow-sm stg:hover:opacity-90 stg:disabled:cursor-not-allowed stg:disabled:opacity-40"
+            >
+              {isSaving ? "Saving\u2026" : "Save"}
+            </button>
+          </>
+        )}
+        {isDirty && !onSave && (
+          <span className="stg:ml-1 stg:text-[10px] stg:text-[var(--stgm-muted-foreground,#737373)]">
+            Modified
+          </span>
+        )}
+      </div>
+    </TooltipProvider>
   );
 }

package/src/workflow/WorkflowNode.tsx

@@ -7,6 +7,7 @@ import type { CanvasTaskNodeData } from "./workflow-graph-conversions.js";
 import { getVisualSpec } from "./task-type-visual-registry.js";
 import { NodeShell, NodeContent, NodeHandles, NodeActions, ExecutionBadge, BranchBadge, DiffBadge } from "./node-shell/index.js";
 import { useWorkflowGraphMode } from "./WorkflowGraphModeContext.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 
 const NESTED_TASK_KINDS = new Set(["fork", "for_each", "try_catch"]);
 
@@ -67,12 +68,18 @@ export const WorkflowNode = memo(function WorkflowNode({
 
       {/* Validation badge — design mode only */}
       {mode === "design" && errorCount > 0 && (
-        <span
-          className="stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-4 stg:min-w-4 stg:items-center stg:justify-center stg:rounded-full stg:bg-[var(--stgm-destructive,#ef4444)] stg:px-1 stg:text-[9px] stg:font-bold stg:leading-none stg:text-[var(--stgm-destructive-foreground,#fff)]"
-          title={`${errorCount} validation ${errorCount === 1 ? "error" : "errors"}`}
-        >
-          {errorCount}
-        </span>
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <span className="stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-4 stg:min-w-4 stg:items-center stg:justify-center stg:rounded-full stg:bg-[var(--stgm-destructive,#ef4444)] stg:px-1 stg:text-[9px] stg:font-bold stg:leading-none stg:text-[var(--stgm-destructive-foreground,#fff)]" />
+            }
+          >
+            {errorCount}
+          </TooltipTrigger>
+          <TooltipContent side="top">
+            {`${errorCount} validation ${errorCount === 1 ? "error" : "errors"}`}
+          </TooltipContent>
+        </Tooltip>
       )}
 
       {/* Execution badge — execution mode only */}