@stigmer/react 3.11.0 → 3.12.0

package/src/workspace/EditorTabs.tsx

@@ -3,6 +3,12 @@
 import { useCallback, type KeyboardEvent, type MouseEvent } from "react";
 import { cn } from "@stigmer/theme";
 import { editorKey, type OpenEditor } from "../internal/store/index.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../internal/tooltip.js";
 
 /**
  * Deterministic, space-free DOM id for a tab, built from an instance-scoped
@@ -73,94 +79,105 @@ export function EditorTabs({
   );
 
   return (
-    <div
-      role="tablist"
-      aria-label="Open editors"
-      aria-orientation="horizontal"
-      className={cn(
-        "stg:flex stg:shrink-0 stg:items-stretch stg:overflow-x-auto stg:border-b stg:border-border",
-        className,
-      )}
-    >
-      {editors.map((editor, index) => {
-        const key = editorKey(editor.entryId, editor.path);
-        const isActive = key === activeKey;
-        const lastSlash = editor.path.lastIndexOf("/");
-        const basename =
-          lastSlash >= 0 ? editor.path.slice(lastSlash + 1) : editor.path;
+    <TooltipProvider>
+      <div
+        role="tablist"
+        aria-label="Open editors"
+        aria-orientation="horizontal"
+        className={cn(
+          "stg:flex stg:shrink-0 stg:items-stretch stg:overflow-x-auto stg:border-b stg:border-border",
+          className,
+        )}
+      >
+        {editors.map((editor, index) => {
+          const key = editorKey(editor.entryId, editor.path);
+          const isActive = key === activeKey;
+          const lastSlash = editor.path.lastIndexOf("/");
+          const basename =
+            lastSlash >= 0 ? editor.path.slice(lastSlash + 1) : editor.path;
 
-        const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-          if (e.key === "ArrowRight") {
-            e.preventDefault();
-            move(index, 1);
-          } else if (e.key === "ArrowLeft") {
-            e.preventDefault();
-            move(index, -1);
-          } else if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            onActivate(editor.entryId, editor.path);
-          } else if (e.key === "Delete" || e.key === "Backspace") {
-            e.preventDefault();
-            onClose(editor.entryId, editor.path);
-          }
-        };
+          const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+            if (e.key === "ArrowRight") {
+              e.preventDefault();
+              move(index, 1);
+            } else if (e.key === "ArrowLeft") {
+              e.preventDefault();
+              move(index, -1);
+            } else if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onActivate(editor.entryId, editor.path);
+            } else if (e.key === "Delete" || e.key === "Backspace") {
+              e.preventDefault();
+              onClose(editor.entryId, editor.path);
+            }
+          };
 
-        const handleAuxClick = (e: MouseEvent<HTMLDivElement>) => {
-          // Middle click closes, matching browser/editor tab conventions.
-          if (e.button === 1) {
-            e.preventDefault();
-            onClose(editor.entryId, editor.path);
-          }
-        };
+          const handleAuxClick = (e: MouseEvent<HTMLDivElement>) => {
+            // Middle click closes, matching browser/editor tab conventions.
+            if (e.button === 1) {
+              e.preventDefault();
+              onClose(editor.entryId, editor.path);
+            }
+          };
 
-        return (
-          <div
-            key={key}
-            role="tab"
-            id={tabIdPrefix ? editorTabDomId(tabIdPrefix, key) : undefined}
-            aria-selected={isActive}
-            aria-controls={panelId}
-            tabIndex={isActive ? 0 : -1}
-            title={editor.path}
-            onClick={() => onActivate(editor.entryId, editor.path)}
-            onDoubleClick={() => onPin(editor.entryId, editor.path)}
-            onAuxClick={handleAuxClick}
-            onKeyDown={handleKeyDown}
-            className={cn(
-              "stg:group stg:flex stg:max-w-[12rem] stg:shrink-0 stg:cursor-pointer stg:items-center stg:gap-1.5 stg:border-r stg:border-border stg:px-3 stg:py-1.5 stg:text-xs stg:transition-colors",
-              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
-              isActive
-                ? "stg:bg-background stg:text-foreground"
-                : "stg:bg-muted-faint stg:text-muted-foreground stg:hover:bg-muted stg:hover:text-foreground",
-            )}
-          >
-            <span className={cn("stg:truncate", editor.preview && "stg:italic")}>
-              {basename}
-            </span>
-            {/* The visual close "X" is a presentational mouse affordance, NOT a
-                nested interactive control: a `<button>` inside `role="tab"` would
-                violate WCAG 4.1.2 (axe `nested-interactive`). Assistive tech and
-                keyboard users close the focused tab via Delete/Backspace (handled
-                above), so `aria-hidden` here removes the redundant nested control
-                without losing the close action for anyone. */}
-            <span
-              aria-hidden="true"
-              title={`Close ${basename}`}
-              onClick={(e) => {
-                e.stopPropagation();
-                onClose(editor.entryId, editor.path);
-              }}
-              className={cn(
-                "stg:shrink-0 stg:cursor-pointer stg:rounded stg:p-0.5 stg:text-muted-foreground stg:transition-opacity stg:hover:bg-accent-hover stg:hover:text-foreground",
-                isActive ? "stg:opacity-100" : "stg:opacity-0 stg:group-hover:opacity-100",
-              )}
-            >
-              <CloseIcon />
-            </span>
-          </div>
-        );
-      })}
-    </div>
+          return (
+            <Tooltip key={key}>
+              <TooltipTrigger
+                render={
+                  <div
+                    role="tab"
+                    id={tabIdPrefix ? editorTabDomId(tabIdPrefix, key) : undefined}
+                    aria-selected={isActive}
+                    aria-controls={panelId}
+                    tabIndex={isActive ? 0 : -1}
+                    onClick={() => onActivate(editor.entryId, editor.path)}
+                    onDoubleClick={() => onPin(editor.entryId, editor.path)}
+                    onAuxClick={handleAuxClick}
+                    onKeyDown={handleKeyDown}
+                    className={cn(
+                      "stg:group stg:flex stg:max-w-[12rem] stg:shrink-0 stg:cursor-pointer stg:items-center stg:gap-1.5 stg:border-r stg:border-border stg:px-3 stg:py-1.5 stg:text-xs stg:transition-colors",
+                      "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
+                      isActive
+                        ? "stg:bg-background stg:text-foreground"
+                        : "stg:bg-muted-faint stg:text-muted-foreground stg:hover:bg-muted stg:hover:text-foreground",
+                    )}
+                  />
+                }
+              >
+                <span className={cn("stg:truncate", editor.preview && "stg:italic")}>
+                  {basename}
+                </span>
+                {/* The visual close "X" is a presentational mouse affordance, NOT a
+                    nested interactive control: a `<button>` inside `role="tab"` would
+                    violate WCAG 4.1.2 (axe `nested-interactive`). Assistive tech and
+                    keyboard users close the focused tab via Delete/Backspace (handled
+                    above), so `aria-hidden` here removes the redundant nested control
+                    without losing the close action for anyone. It carries no tooltip
+                    of its own: it sits inside the tab's tooltip trigger, so a nested
+                    trigger would pop two tooltips at once, and its old title only
+                    restated the visible basename. */}
+                <span
+                  aria-hidden="true"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onClose(editor.entryId, editor.path);
+                  }}
+                  className={cn(
+                    "stg:shrink-0 stg:cursor-pointer stg:rounded stg:p-0.5 stg:text-muted-foreground stg:transition-opacity stg:hover:bg-accent-hover stg:hover:text-foreground",
+                    isActive ? "stg:opacity-100" : "stg:opacity-0 stg:group-hover:opacity-100",
+                  )}
+                >
+                  <CloseIcon />
+                </span>
+              </TooltipTrigger>
+              <TooltipContent side="top" className="stg:break-all">
+                {editor.path}
+              </TooltipContent>
+            </Tooltip>
+          );
+        })}
+      </div>
+    </TooltipProvider>
   );
 }
 

package/src/workspace/ExplorerTree.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { cn } from "@stigmer/theme";
 import { FileTreeNode } from "../internal/file-tree/index.js";
 import type { SelectedWorkspaceFile } from "../internal/store/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { useWorkspaceFiles } from "./useWorkspaceFiles.js";
 import type { WorkspaceEntry } from "./useWorkspaceEntries.js";
 import type { WorkspaceFileLister } from "./WorkspaceFileLister.js";
@@ -91,38 +92,54 @@ function ExplorerRoot({
   return (
     <div className="stg:flex stg:flex-col">
       <div className="stg:group/root stg:flex stg:items-stretch">
-        <button
-          type="button"
-          onClick={() => setExpanded((prev) => !prev)}
-          aria-expanded={expanded}
-          className={cn(
-            "stg:flex stg:min-w-0 stg:flex-1 stg:items-center stg:gap-1.5 stg:px-1.5 stg:py-1 stg:text-left stg:text-[0.7rem] stg:font-semibold stg:uppercase stg:tracking-wide 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-inset stg:focus-visible:ring-ring",
-          )}
-          title={entry.type === "local" ? entry.localPath : entry.gitUrl}
-        >
-          <span
-            aria-hidden="true"
-            className="stg:text-[10px] stg:text-muted-foreground-subtle"
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <button
+                type="button"
+                onClick={() => setExpanded((prev) => !prev)}
+                aria-expanded={expanded}
+                className={cn(
+                  "stg:flex stg:min-w-0 stg:flex-1 stg:items-center stg:gap-1.5 stg:px-1.5 stg:py-1 stg:text-left stg:text-[0.7rem] stg:font-semibold stg:uppercase stg:tracking-wide 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-inset stg:focus-visible:ring-ring",
+                )}
+              />
+            }
           >
-            {expanded ? "▼" : "▶"}
-          </span>
-          <span className="stg:truncate">{entry.name}</span>
-        </button>
+            <span
+              aria-hidden="true"
+              className="stg:text-[10px] stg:text-muted-foreground-subtle"
+            >
+              {expanded ? "▼" : "▶"}
+            </span>
+            <span className="stg:truncate">{entry.name}</span>
+          </TooltipTrigger>
+          <TooltipContent side="top" className="stg:break-all">
+            {entry.type === "local" ? entry.localPath : entry.gitUrl}
+          </TooltipContent>
+        </Tooltip>
         {onRemove && (
-          <button
-            type="button"
-            onClick={() => onRemove(entry.id)}
-            aria-label={`Remove ${entry.name} from workspace`}
-            title={`Remove ${entry.name} from workspace`}
-            className={cn(
-              "stg:shrink-0 stg:px-1.5 stg:text-muted-foreground stg:opacity-0 stg:transition-opacity",
-              "stg:group-hover/root:opacity-100 stg:focus-visible:opacity-100",
-              "stg:hover:text-destructive stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
-            )}
-          >
-            <RemoveIcon />
-          </button>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <button
+                  type="button"
+                  onClick={() => onRemove(entry.id)}
+                  aria-label={`Remove ${entry.name} from workspace`}
+                  className={cn(
+                    "stg:shrink-0 stg:px-1.5 stg:text-muted-foreground stg:opacity-0 stg:transition-opacity",
+                    "stg:group-hover/root:opacity-100 stg:focus-visible:opacity-100",
+                    "stg:hover:text-destructive stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
+                  )}
+                />
+              }
+            >
+              <RemoveIcon />
+            </TooltipTrigger>
+            <TooltipContent side="top">
+              {`Remove ${entry.name} from workspace`}
+            </TooltipContent>
+          </Tooltip>
         )}
       </div>
 

package/src/workspace/FileViewer.tsx

@@ -22,6 +22,7 @@ import { ArtifactContentRenderer } from "../execution/ArtifactContentRenderer.js
 import { FileChangeDiff } from "../execution/FileChangesView.js";
 import { useFileChangeContent } from "../execution/useFileChangeContent.js";
 import { UNSTYLED_BUTTON } from "../internal/form-primitives.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import type { RevealTarget } from "../internal/useRevealLine.js";
 import type { SelectedWorkspaceFile } from "../internal/store/workspace-file-selection-store.js";
 import { useWorkspaceFileContent } from "./useWorkspaceFileContent.js";
@@ -660,9 +661,16 @@ function ViewerHeader({
     <div className="stg:flex stg:items-center stg:gap-2 stg:border-b stg:border-border stg:px-3 stg:py-2">
       <FileIcon />
       <div className="stg:flex stg:min-w-0 stg:flex-1 stg:items-baseline stg:gap-1.5">
-        <span className="stg:truncate stg:text-xs stg:font-semibold stg:text-foreground" title={dir ? `${dir}/${basename}` : basename}>
-          {basename}
-        </span>
+        <Tooltip>
+          <TooltipTrigger
+            render={<span className="stg:truncate stg:text-xs stg:font-semibold stg:text-foreground" />}
+          >
+            {basename}
+          </TooltipTrigger>
+          <TooltipContent side="top" className="stg:break-all">
+            {dir ? `${dir}/${basename}` : basename}
+          </TooltipContent>
+        </Tooltip>
         {dir && (
           <span className="stg:truncate stg:text-[0.65rem] stg:text-muted-foreground">{dir}</span>
         )}

package/src/workspace/PanelChip.tsx

@@ -5,6 +5,7 @@
 
 import { useEffect, useRef } from "react";
 import { cn } from "@stigmer/theme";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 
 /** Props for {@link PanelChip}. */
 export interface PanelChipProps {
@@ -50,29 +51,37 @@ export function PanelChip({ isOpen, onToggle, badgeCount }: PanelChipProps) {
   }, [isOpen]);
 
   return (
-    <button
-      ref={buttonRef}
-      type="button"
-      onClick={onToggle}
-      aria-expanded={isOpen}
-      aria-label={isOpen ? "Hide panel" : "Show panel"}
-      title={isOpen ? "Hide panel" : "Show panel"}
-      className={cn(
-        "stg:flex stg:items-center stg:gap-1.5 stg:rounded-md stg:border stg:border-border stg:bg-card stg:px-1.5 stg:py-1",
-        "stg:text-muted-foreground stg:transition-colors stg:hover:bg-muted stg:hover:text-foreground",
-        "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
-      )}
-    >
-      {showCount && (
-        <span
-          aria-label={`${badgeCount} new items`}
-          className="stg:inline-flex stg:min-w-[1rem] stg:items-center stg:justify-center stg:rounded-full stg:bg-primary stg:px-1 stg:py-px stg:text-[10px] stg:font-medium stg:leading-none stg:text-primary-foreground"
-        >
-          {badgeCount}
-        </span>
-      )}
-      <PanelIcon open={isOpen} />
-    </button>
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <button
+            ref={buttonRef}
+            type="button"
+            onClick={onToggle}
+            aria-expanded={isOpen}
+            aria-label={isOpen ? "Hide panel" : "Show panel"}
+            className={cn(
+              "stg:flex stg:items-center stg:gap-1.5 stg:rounded-md stg:border stg:border-border stg:bg-card stg:px-1.5 stg:py-1",
+              "stg:text-muted-foreground stg:transition-colors stg:hover:bg-muted stg:hover:text-foreground",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+            )}
+          />
+        }
+      >
+        {showCount && (
+          <span
+            aria-label={`${badgeCount} new items`}
+            className="stg:inline-flex stg:min-w-[1rem] stg:items-center stg:justify-center stg:rounded-full stg:bg-primary stg:px-1 stg:py-px stg:text-[10px] stg:font-medium stg:leading-none stg:text-primary-foreground"
+          >
+            {badgeCount}
+          </span>
+        )}
+        <PanelIcon open={isOpen} />
+      </TooltipTrigger>
+      <TooltipContent side="top">
+        {isOpen ? "Hide panel" : "Show panel"}
+      </TooltipContent>
+    </Tooltip>
   );
 }
 

package/src/workspace/WorkspaceEditor.tsx

@@ -7,6 +7,7 @@ import type { UseGitHubConnectionReturn } from "../github/useGitHubConnection.js
 import { GitHubRepoPicker } from "../github/GitHubRepoPicker.js";
 import { useScrollShadows } from "../internal/useScrollShadows.js";
 import { ScrollFade } from "../internal/ScrollFade.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 
 type ActivePanel = "github" | null;
 
@@ -202,15 +203,26 @@ export function WorkspaceEditor({
                     <FolderIcon />
                   </span>
                 )}
-                <span
-                  className={cn(
-                    "stg:min-w-0 stg:flex-1 stg:truncate stg:text-foreground",
-                    entry.type === "local" && "stg:[direction:rtl] stg:text-left",
-                  )}
-                  title={entry.name}
-                >
-                  <bdi>{entry.name}</bdi>
-                </span>
+                {/* Not TruncatedText: the <bdi> + rtl-direction pair keeps the
+                    tail of a long local path visible, which a plain text span
+                    cannot reproduce. */}
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <span
+                        className={cn(
+                          "stg:min-w-0 stg:flex-1 stg:truncate stg:text-foreground",
+                          entry.type === "local" && "stg:[direction:rtl] stg:text-left",
+                        )}
+                      />
+                    }
+                  >
+                    <bdi>{entry.name}</bdi>
+                  </TooltipTrigger>
+                  <TooltipContent side="top" className="stg:break-all">
+                    {entry.name}
+                  </TooltipContent>
+                </Tooltip>
                 <button
                   type="button"
                   onClick={() => workspace.remove(entry.id)}

package/src/workspace/WorkspaceSummary.tsx

@@ -3,6 +3,8 @@
 import type { WorkspaceEntry } from "@stigmer/protos/ai/stigmer/agentic/session/v1/workspace_pb";
 import type { WorkspaceSource } from "@stigmer/protos/ai/stigmer/agentic/session/v1/workspace_pb";
 import { cn } from "@stigmer/theme";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 
 /** Props for {@link WorkspaceSummary}. */
 export interface WorkspaceSummaryProps {
@@ -67,25 +69,32 @@ function SourceLabel({ source }: { source?: WorkspaceSource }) {
     const short = url
       .replace(/^https?:\/\//, "")
       .replace(/\.git$/, "");
+    // The cell shows the shortened form but the tooltip restores the full
+    // URL (protocol and .git suffix), so this is a hover-always hint, not an
+    // overflow-gated TruncatedText.
     return (
-      <span
-        className="stg:ml-5 stg:block stg:truncate stg:text-muted-foreground"
-        title={url}
-      >
-        {short}
-      </span>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <span className="stg:ml-5 stg:block stg:truncate stg:text-muted-foreground" />
+          }
+        >
+          {short}
+        </TooltipTrigger>
+        <TooltipContent side="top" className="stg:break-all">
+          {url}
+        </TooltipContent>
+      </Tooltip>
     );
   }
 
   if (source.source.case === "localPath") {
     const path = source.source.value.path;
     return (
-      <span
-        className="stg:ml-5 stg:block stg:truncate stg:font-mono stg:text-muted-foreground"
-        title={path}
-      >
-        {path}
-      </span>
+      <TruncatedText
+        text={path}
+        className="stg:ml-5 stg:block stg:font-mono stg:text-muted-foreground"
+      />
     );
   }