@stigmer/react 3.11.0 → 3.11.1-dev.20260812192248

package/src/workflow/node-shell/DiffBadge.tsx

@@ -3,6 +3,7 @@
 import { memo } from "react";
 import { cn } from "@stigmer/theme";
 import type { NodeDiffStatus } from "../diff/types.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../internal/tooltip.js";
 
 export interface DiffBadgeProps {
   readonly status: NodeDiffStatus;
@@ -30,17 +31,23 @@ export const DiffBadge = memo(function DiffBadge({
       : icon;
 
   return (
-    <span
-      className={cn(
-        "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-5 stg:min-w-5 stg:items-center stg:justify-center stg:rounded-full stg:px-1 stg:text-[10px] stg:font-semibold stg:leading-none stg:shadow-sm",
-        className,
-      )}
-      title={label}
-      aria-label={label}
-      data-diff-status={status}
-    >
-      {displayText}
-    </span>
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span
+            className={cn(
+              "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-5 stg:min-w-5 stg:items-center stg:justify-center stg:rounded-full stg:px-1 stg:text-[10px] stg:font-semibold stg:leading-none stg:shadow-sm",
+              className,
+            )}
+            aria-label={label}
+            data-diff-status={status}
+          />
+        }
+      >
+        {displayText}
+      </TooltipTrigger>
+      <TooltipContent side="top">{label}</TooltipContent>
+    </Tooltip>
   );
 });
 

package/src/workflow/node-shell/ExecutionBadge.tsx

@@ -3,6 +3,7 @@
 import { memo } from "react";
 import { cn } from "@stigmer/theme";
 import type { NodeExecutionStatus } from "../workflow-graph-conversions.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../internal/tooltip.js";
 
 /** Fork branch completion progress (T06). */
 export interface ForkProgressInfo {
@@ -54,17 +55,23 @@ export const ExecutionBadge = memo(function ExecutionBadge({
   if (status === "waiting_approval" && approvalToolName) {
     const approvalLabel = `Awaiting approval: ${approvalToolName}`;
     return (
-      <span
-        className={cn(
-          "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-5 stg:items-center stg:gap-0.5 stg:rounded-full stg:px-1.5 stg:text-[10px] stg:font-semibold stg:leading-none stg:shadow-sm",
-          "stg:bg-[var(--stgm-warning,#f59e0b)] stg:text-[var(--stgm-warning-foreground,#fff)]",
-        )}
-        title={approvalLabel}
-        aria-label={approvalLabel}
-      >
-        ✋
-        <span className="stg:max-w-[60px] stg:truncate">{approvalToolName}</span>
-      </span>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <span
+              className={cn(
+                "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-5 stg:items-center stg:gap-0.5 stg:rounded-full stg:px-1.5 stg:text-[10px] stg:font-semibold stg:leading-none stg:shadow-sm",
+                "stg:bg-[var(--stgm-warning,#f59e0b)] stg:text-[var(--stgm-warning-foreground,#fff)]",
+              )}
+              aria-label={approvalLabel}
+            />
+          }
+        >
+          ✋
+          <span className="stg:max-w-[60px] stg:truncate">{approvalToolName}</span>
+        </TooltipTrigger>
+        <TooltipContent side="top">{approvalLabel}</TooltipContent>
+      </Tooltip>
     );
   }
 
@@ -76,17 +83,23 @@ export const ExecutionBadge = memo(function ExecutionBadge({
       : `Agent: ${agentActivity.messagesCount} messages, ${agentActivity.toolCallsCount} tool calls`;
 
     return (
-      <span
-        className={cn(
-          "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-5 stg:items-center stg:gap-0.5 stg:rounded-full stg:px-1.5 stg:text-[10px] stg:font-semibold stg:leading-none stg:shadow-sm",
-          "stg:bg-[var(--stgm-primary,#6366f1)] stg:text-[var(--stgm-primary-foreground,#fff)]",
-        )}
-        title={agentLabel}
-        aria-label={agentLabel}
-      >
-        {agentActivity.currentToolName ? "🔧" : "💬"}
-        <span className="stg:max-w-[60px] stg:truncate">{displayText}</span>
-      </span>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <span
+              className={cn(
+                "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-5 stg:items-center stg:gap-0.5 stg:rounded-full stg:px-1.5 stg:text-[10px] stg:font-semibold stg:leading-none stg:shadow-sm",
+                "stg:bg-[var(--stgm-primary,#6366f1)] stg:text-[var(--stgm-primary-foreground,#fff)]",
+              )}
+              aria-label={agentLabel}
+            />
+          }
+        >
+          {agentActivity.currentToolName ? "🔧" : "💬"}
+          <span className="stg:max-w-[60px] stg:truncate">{displayText}</span>
+        </TooltipTrigger>
+        <TooltipContent side="top">{agentLabel}</TooltipContent>
+      </Tooltip>
     );
   }
 
@@ -97,36 +110,50 @@ export const ExecutionBadge = memo(function ExecutionBadge({
       : `Fork running, ${forkProgress.completed} of ${forkProgress.total} branches completed`;
 
     return (
-      <span
-        className={cn(
-          "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-5 stg:min-w-5 stg:items-center stg:justify-center stg:rounded-full stg:px-1.5 stg:text-[10px] stg:font-semibold stg:leading-none stg:shadow-sm",
-          "stg:bg-[var(--stgm-primary,#6366f1)] stg:text-[var(--stgm-primary-foreground,#fff)]",
-        )}
-        title={progressLabel}
-        aria-label={progressLabel}
-      >
-        {forkProgress.completed}/{forkProgress.total}
-        {forkProgress.compete && <span className="stg:ml-0.5">⚡</span>}
-      </span>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <span
+              className={cn(
+                "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-5 stg:min-w-5 stg:items-center stg:justify-center stg:rounded-full stg:px-1.5 stg:text-[10px] stg:font-semibold stg:leading-none stg:shadow-sm",
+                "stg:bg-[var(--stgm-primary,#6366f1)] stg:text-[var(--stgm-primary-foreground,#fff)]",
+              )}
+              aria-label={progressLabel}
+            />
+          }
+        >
+          {forkProgress.completed}/{forkProgress.total}
+          {forkProgress.compete && <span className="stg:ml-0.5">⚡</span>}
+        </TooltipTrigger>
+        <TooltipContent side="top">{progressLabel}</TooltipContent>
+      </Tooltip>
     );
   }
 
   const { icon, label, className } = BADGE_CONFIG[status];
 
   return (
-    <span
-      className={cn(
-        "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-5 stg:min-w-5 stg:items-center stg:justify-center stg:rounded-full stg:px-1 stg:text-[10px] stg:font-semibold stg:leading-none stg:shadow-sm",
-        className,
-      )}
-      title={label + (attemptNumber && attemptNumber > 1 ? ` (attempt ${attemptNumber})` : "")}
-      aria-label={label}
-    >
-      {icon}
-      {status === "retrying" && attemptNumber != null && attemptNumber > 1 && (
-        <span className="stg:ml-0.5">{attemptNumber}</span>
-      )}
-    </span>
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span
+            className={cn(
+              "stg:absolute stg:-right-1.5 stg:-top-1.5 stg:z-20 stg:flex stg:h-5 stg:min-w-5 stg:items-center stg:justify-center stg:rounded-full stg:px-1 stg:text-[10px] stg:font-semibold stg:leading-none stg:shadow-sm",
+              className,
+            )}
+            aria-label={label}
+          />
+        }
+      >
+        {icon}
+        {status === "retrying" && attemptNumber != null && attemptNumber > 1 && (
+          <span className="stg:ml-0.5">{attemptNumber}</span>
+        )}
+      </TooltipTrigger>
+      <TooltipContent side="top">
+        {label + (attemptNumber && attemptNumber > 1 ? ` (attempt ${attemptNumber})` : "")}
+      </TooltipContent>
+    </Tooltip>
   );
 });
 

package/src/workflow/node-shell/NodeActions.tsx

@@ -9,6 +9,12 @@ import { BranchAddPopover } from "../picker/BranchAddPopover.js";
 import type { BranchAddMode, BranchAddResult } from "../picker/BranchAddPopover.js";
 import type { InsertionContext } from "../picker/insertion-context.js";
 import { TrashIcon, DuplicateIcon, PlusIcon } from "../canvas-icons.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../../internal/tooltip.js";
 
 export interface NodeActionsProps {
   nodeId: string;
@@ -156,70 +162,84 @@ export const NodeActions = memo(function NodeActions({
     <>
       {/* Selection toolbar — auto-shown by React Flow when selected */}
       <NodeToolbar position={Position.Top} offset={8} align="center">
-        <div
-          className="stgm stg:flex stg:items-center stg:gap-0.5 stg:rounded-md stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-popover,var(--stgm-background,#fff))] stg:p-0.5 stg:shadow-md"
-          role="toolbar"
-          aria-label="Task actions"
-          aria-orientation="horizontal"
-        >
-          <ToolbarButton
-            icon={<DuplicateIcon />}
-            label={`Duplicate task ${taskName}`}
-            title="Duplicate"
-            onClick={handleDuplicate}
-          />
-          <ToolbarButton
-            ref={toolbarAddRef}
-            icon={<PlusIcon />}
-            label={`Add task after ${taskName}`}
-            title="Add task after"
-            onClick={handleToolbarAddClick}
-          />
-          <div className="stg:mx-0.5 stg:h-4 stg:w-px stg:bg-[var(--stgm-border,#e5e5e5)]" aria-hidden="true" />
-          <ToolbarButton
-            icon={<TrashIcon />}
-            label={`Delete task ${taskName}`}
-            title="Delete"
-            onClick={handleDelete}
-            destructive
-          />
-        </div>
+        <TooltipProvider>
+          <div
+            className="stgm stg:flex stg:items-center stg:gap-0.5 stg:rounded-md stg:border stg:border-[var(--stgm-border,#e5e5e5)] stg:bg-[var(--stgm-popover,var(--stgm-background,#fff))] stg:p-0.5 stg:shadow-md"
+            role="toolbar"
+            aria-label="Task actions"
+            aria-orientation="horizontal"
+          >
+            <ToolbarButton
+              icon={<DuplicateIcon />}
+              label={`Duplicate task ${taskName}`}
+              tooltip="Duplicate"
+              onClick={handleDuplicate}
+            />
+            <ToolbarButton
+              ref={toolbarAddRef}
+              icon={<PlusIcon />}
+              label={`Add task after ${taskName}`}
+              tooltip="Add task after"
+              onClick={handleToolbarAddClick}
+            />
+            <div className="stg:mx-0.5 stg:h-4 stg:w-px stg:bg-[var(--stgm-border,#e5e5e5)]" aria-hidden="true" />
+            <ToolbarButton
+              icon={<TrashIcon />}
+              label={`Delete task ${taskName}`}
+              tooltip="Delete"
+              onClick={handleDelete}
+              destructive
+            />
+          </div>
+        </TooltipProvider>
       </NodeToolbar>
 
       {/* Delete button — revealed on hover via CSS group */}
-      <button
-        type="button"
-        onClick={handleDelete}
-        className={cn(
-          "stg:absolute stg:-right-2 stg:-top-2 stg:z-10 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-destructive,#ef4444)] stg:hover:bg-[var(--stgm-destructive,#ef4444)] stg:hover:text-[var(--stgm-primary-foreground,#fff)]",
-          "stg:scale-75 stg:opacity-0 stg:group-hover:scale-100 stg:group-hover:opacity-100",
-        )}
-        aria-label={`Delete task ${taskName}`}
-        title="Delete 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="M2 3h6M3.5 3V2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V3M4 4.5v2.5M6 4.5v2.5M3 3l.5 5h3l.5-5" />
-        </svg>
-      </button>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              type="button"
+              onClick={handleDelete}
+              className={cn(
+                "stg:absolute stg:-right-2 stg:-top-2 stg:z-10 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-destructive,#ef4444)] stg:hover:bg-[var(--stgm-destructive,#ef4444)] stg:hover:text-[var(--stgm-primary-foreground,#fff)]",
+                "stg:scale-75 stg:opacity-0 stg:group-hover:scale-100 stg:group-hover:opacity-100",
+              )}
+              aria-label={`Delete task ${taskName}`}
+            />
+          }
+        >
+          <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 3h6M3.5 3V2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5V3M4 4.5v2.5M6 4.5v2.5M3 3l.5 5h3l.5-5" />
+          </svg>
+        </TooltipTrigger>
+        <TooltipContent side="top">Delete task</TooltipContent>
+      </Tooltip>
 
       {/* Add successor button — revealed on hover via CSS group */}
-      <button
-        ref={hoverAddRef}
-        type="button"
-        onClick={handleHoverAddClick}
-        className={cn(
-          "stg:absolute stg:-bottom-3 stg:left-1/2 stg:z-10 stg:flex stg:h-5 stg:w-5 stg:-translate-x-1/2 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)]",
-          "stg:scale-75 stg:opacity-0 stg:group-hover:scale-100 stg:group-hover:opacity-100",
-        )}
-        aria-label={`Add task after ${taskName}`}
-        title="Add 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={hoverAddRef}
+              type="button"
+              onClick={handleHoverAddClick}
+              className={cn(
+                "stg:absolute stg:-bottom-3 stg:left-1/2 stg:z-10 stg:flex stg:h-5 stg:w-5 stg:-translate-x-1/2 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)]",
+                "stg:scale-75 stg:opacity-0 stg:group-hover:scale-100 stg:group-hover:opacity-100",
+              )}
+              aria-label={`Add task after ${taskName}`}
+            />
+          }
+        >
+          <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">Add task</TooltipContent>
+      </Tooltip>
 
       <TaskPickerPopover
         open={pickerOpen}
@@ -233,32 +253,38 @@ export const NodeActions = memo(function NodeActions({
 
       {branchMode && (
         <>
-          <button
-            ref={branchAddRef}
-            type="button"
-            onClick={() => setBranchPopoverOpen(true)}
-            className={cn(
-              "stg:absolute stg:-bottom-3 stg:left-1/2 stg:z-10 stg:flex stg:h-5 stg:-translate-x-1/2 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:px-2 stg:text-[9px] stg:font-medium 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)]",
-              "stg:scale-75 stg:opacity-0 stg:group-hover:scale-100 stg:group-hover:opacity-100",
-            )}
-            aria-label={
-              branchMode === "switch-case"
-                ? "Add case"
-                : branchMode === "fork-branch"
-                  ? "Add branch"
-                  : "Add catch"
-            }
-            title={
-              branchMode === "switch-case"
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <button
+                  ref={branchAddRef}
+                  type="button"
+                  onClick={() => setBranchPopoverOpen(true)}
+                  className={cn(
+                    "stg:absolute stg:-bottom-3 stg:left-1/2 stg:z-10 stg:flex stg:h-5 stg:-translate-x-1/2 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:px-2 stg:text-[9px] stg:font-medium 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)]",
+                    "stg:scale-75 stg:opacity-0 stg:group-hover:scale-100 stg:group-hover:opacity-100",
+                  )}
+                  aria-label={
+                    branchMode === "switch-case"
+                      ? "Add case"
+                      : branchMode === "fork-branch"
+                        ? "Add branch"
+                        : "Add catch"
+                  }
+                />
+              }
+            >
+              +
+            </TooltipTrigger>
+            <TooltipContent side="top">
+              {branchMode === "switch-case"
                 ? "Add case"
                 : branchMode === "fork-branch"
                   ? "Add branch"
-                  : "Add catch"
-            }
-          >
-            +
-          </button>
+                  : "Add catch"}
+            </TooltipContent>
+          </Tooltip>
 
           <BranchAddPopover
             open={branchPopoverOpen}
@@ -290,25 +316,33 @@ const TOOLBAR_BTN_DESTRUCTIVE_CLASS = cn(
 
 interface ToolbarButtonProps {
   icon: React.ReactNode;
+  /** Full accessible name (e.g. "Duplicate task fetch-data"). */
   label: string;
-  title: string;
+  /** Short action name shown on the house tooltip. */
+  tooltip: string;
   onClick: () => void;
   destructive?: boolean;
 }
 
 const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
-  function ToolbarButton({ icon, label, title, onClick, destructive }, ref) {
+  function ToolbarButton({ icon, label, tooltip, onClick, destructive }, ref) {
     return (
-      <button
-        ref={ref}
-        type="button"
-        onClick={onClick}
-        className={destructive ? TOOLBAR_BTN_DESTRUCTIVE_CLASS : TOOLBAR_BTN_CLASS}
-        aria-label={label}
-        title={title}
-      >
-        {icon}
-      </button>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              ref={ref}
+              type="button"
+              onClick={onClick}
+              className={destructive ? TOOLBAR_BTN_DESTRUCTIVE_CLASS : TOOLBAR_BTN_CLASS}
+              aria-label={label}
+            />
+          }
+        >
+          {icon}
+        </TooltipTrigger>
+        <TooltipContent side="top">{tooltip}</TooltipContent>
+      </Tooltip>
     );
   },
 );

package/src/workflow/task-detail/StructuredDataViewer.tsx

@@ -9,6 +9,7 @@ import {
   humanizeArgKey,
   isScalar,
 } from "../../execution/tool-rendering-primitives.js";
+import { TruncatedText } from "../../internal/truncated-text.js";
 
 /**
  * Threshold (in characters) above which a string value is rendered
@@ -148,14 +149,15 @@ function ScalarEntry({
             typeof value === "boolean" && "stg:font-medium",
             (value === null || value === undefined) && "stg:text-muted-foreground",
           )}
-          title={strValue}
         >
           {strValue.includes("\n") ? (
+            // Multiline values wrap fully in the <pre> — nothing is clipped,
+            // so no tooltip is needed.
             <pre className="stg:whitespace-pre-wrap stg:break-words stg:rounded stg:border stg:border-border stg:bg-muted-subtle stg:px-2 stg:py-1 stg:font-mono stg:text-foreground">
               {strValue}
             </pre>
           ) : (
-            <span className="stg:block stg:truncate">{strValue}</span>
+            <TruncatedText text={strValue} className="stg:block" />
           )}
         </dd>
       )}