@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

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";
@@ -45,7 +46,7 @@ export function ExplorerTree({
   onRemoveEntry,
 }: ExplorerTreeProps) {
   return (
-    <div className="flex flex-col">
+    <div className="stg:flex stg:flex-col">
       {entries.map((entry, index) => (
         <ExplorerRoot
           key={entry.id}
@@ -89,40 +90,56 @@ function ExplorerRoot({
   });
 
   return (
-    <div className="flex flex-col">
-      <div className="group/root flex items-stretch">
-        <button
-          type="button"
-          onClick={() => setExpanded((prev) => !prev)}
-          aria-expanded={expanded}
-          className={cn(
-            "flex min-w-0 flex-1 items-center gap-1.5 px-1.5 py-1 text-left text-[0.7rem] font-semibold uppercase tracking-wide text-foreground transition-colors hover:bg-accent-hover",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-          )}
-          title={entry.type === "local" ? entry.localPath : entry.gitUrl}
-        >
-          <span
-            aria-hidden="true"
-            className="text-[10px] text-muted-foreground-subtle"
+    <div className="stg:flex stg:flex-col">
+      <div className="stg:group/root stg:flex stg:items-stretch">
+        <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="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(
-              "shrink-0 px-1.5 text-muted-foreground opacity-0 transition-opacity",
-              "group-hover/root:opacity-100 focus-visible:opacity-100",
-              "hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset 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>
 
@@ -174,14 +191,14 @@ function ExplorerRootBody({
         // makes aria-label permitted here (a role-less generic div cannot carry
         // an accessible name — axe `aria-prohibited-attr`).
         role="status"
-        className="space-y-1.5 px-2 py-2"
+        className="stg:space-y-1.5 stg:px-2 stg:py-2"
         aria-busy="true"
         aria-label={`Loading files for ${entryName}`}
       >
         {[1, 2, 3, 4].map((i) => (
           <div
             key={i}
-            className="h-3.5 animate-pulse rounded bg-muted"
+            className="stg:h-3.5 stg:animate-pulse stg:rounded stg:bg-muted"
             style={{ width: `${50 + i * 10}%` }}
             aria-hidden="true"
           />
@@ -192,12 +209,12 @@ function ExplorerRootBody({
 
   if (error) {
     return (
-      <div className="px-2 py-2 text-xs text-destructive">
+      <div className="stg:px-2 stg:py-2 stg:text-xs stg:text-destructive">
         Failed to list files: {error.message}
         <button
           type="button"
           onClick={onRetry}
-          className="ml-2 rounded-sm underline transition-colors hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="stg:ml-2 stg:rounded-sm stg:underline stg:transition-colors stg:hover:text-destructive stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
         >
           Retry
         </button>
@@ -207,14 +224,14 @@ function ExplorerRootBody({
 
   if (tree.length === 0) {
     return (
-      <p className="px-3 py-2 text-xs text-muted-foreground">No files found.</p>
+      <p className="stg:px-3 stg:py-2 stg:text-xs stg:text-muted-foreground">No files found.</p>
     );
   }
 
   return (
     <>
       <nav aria-label={`File tree for ${entryName}`}>
-        <ul className="py-0.5 pl-1.5" role="tree">
+        <ul className="stg:py-0.5 stg:pl-1.5" role="tree">
           {tree.map((node) => (
             <FileTreeNode
               key={node.path}
@@ -232,7 +249,7 @@ function ExplorerRootBody({
         </ul>
       </nav>
       {truncated && (
-        <p className="px-3 py-1.5 text-[0.65rem] text-muted-foreground">
+        <p className="stg:px-3 stg:py-1.5 stg:text-[0.65rem] stg:text-muted-foreground">
           Showing a partial listing — too many files to load in full.
         </p>
       )}

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";
@@ -185,7 +186,7 @@ export const FileViewer = forwardRef<FileViewerHandle, FileViewerProps>(
       <div
         role="region"
         aria-label="File viewer"
-        className={cn("flex h-full flex-col", className)}
+        className={cn("stg:flex stg:h-full stg:flex-col", className)}
         onKeyDown={handleKeyDown}
       >
         {showHeader && (
@@ -196,7 +197,7 @@ export const FileViewer = forwardRef<FileViewerHandle, FileViewerProps>(
             onClose={onClose}
           />
         )}
-        <div className="flex flex-1 items-center justify-center p-8 text-center text-xs text-muted-foreground">
+        <div className="stg:flex stg:flex-1 stg:items-center stg:justify-center stg:p-8 stg:text-center stg:text-xs stg:text-muted-foreground">
           This file is no longer in the workspace.
         </div>
       </div>
@@ -210,7 +211,7 @@ export const FileViewer = forwardRef<FileViewerHandle, FileViewerProps>(
       // Focusable (programmatically / on click) so the Escape-to-close handler
       // fires even when the read-only body holds no natively focusable element.
       tabIndex={-1}
-      className={cn("flex h-full flex-col focus:outline-none", className)}
+      className={cn("stg:flex stg:h-full stg:flex-col stg:focus:outline-none", className)}
       onKeyDown={handleKeyDown}
     >
       {showHeader && (
@@ -224,9 +225,9 @@ export const FileViewer = forwardRef<FileViewerHandle, FileViewerProps>(
       {showViewToggle && (
         <ViewerModeToggle value={viewMode} onChange={setViewMode} />
       )}
-      <div className="min-h-0 flex-1 overflow-y-auto">
+      <div className="stg:min-h-0 stg:flex-1 stg:overflow-y-auto">
         {effectiveView === "diff" && change ? (
-          <div className="p-3">
+          <div className="stg:p-3">
             <FileChangeDiff change={change} showFileName={false} showStats />
           </div>
         ) : (
@@ -293,11 +294,11 @@ function ViewerModeToggle({
   );
 
   return (
-    <div className="border-b border-border px-3 py-1.5">
+    <div className="stg:border-b stg:border-border stg:px-3 stg:py-1.5">
       <div
         role="radiogroup"
         aria-label="File view"
-        className="inline-flex rounded-md bg-muted p-0.5"
+        className="stg:inline-flex stg:rounded-md stg:bg-muted stg:p-0.5"
       >
         {options.map((option, index) => {
           const isSelected = value === option.value;
@@ -314,11 +315,11 @@ function ViewerModeToggle({
               onClick={() => onChange(option.value)}
               onKeyDown={handleKeyDown}
               className={cn(
-                "inline-flex cursor-pointer items-center rounded-sm px-2 py-0.5 text-xs font-medium transition-colors",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                "stg:inline-flex stg:cursor-pointer stg:items-center stg:rounded-sm stg:px-2 stg:py-0.5 stg:text-xs stg:font-medium stg:transition-colors",
+                "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
                 isSelected
-                  ? "bg-background text-foreground shadow-sm"
-                  : "text-muted-foreground hover:text-foreground",
+                  ? "stg:bg-background stg:text-foreground stg:shadow-sm"
+                  : "stg:text-muted-foreground stg:hover:text-foreground",
               )}
             >
               {option.label}
@@ -399,15 +400,15 @@ function FileViewerBody({
     // Expected while the agent's write-back is still syncing to the ref —
     // a calm notice (DD-006), not a failure.
     return (
-      <div className="flex flex-col items-center justify-center gap-2 p-8 text-center">
-        <p className="text-xs text-muted-foreground">
+      <div className="stg:flex stg:flex-col stg:items-center stg:justify-center stg:gap-2 stg:p-8 stg:text-center">
+        <p className="stg:text-xs stg:text-muted-foreground">
           This file isn&rsquo;t available in the workspace source yet. The
           agent&rsquo;s latest changes may still be syncing.
         </p>
         <button
           type="button"
           onClick={onRetry}
-          className="text-xs font-medium text-foreground underline underline-offset-2 hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm"
+          className="stg:text-xs stg:font-medium stg:text-foreground stg:underline stg:underline-offset-2 stg:hover:text-muted-foreground stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:rounded-sm"
         >
           Check again
         </button>
@@ -417,13 +418,13 @@ function FileViewerBody({
 
   if (error) {
     return (
-      <div className="flex flex-col items-center justify-center gap-2 p-8 text-center">
+      <div className="stg:flex stg:flex-col stg:items-center stg:justify-center stg:gap-2 stg:p-8 stg:text-center">
         <ErrorAlertIcon />
-        <p className="text-sm text-destructive">{error.message}</p>
+        <p className="stg:text-sm stg:text-destructive">{error.message}</p>
         <button
           type="button"
           onClick={onRetry}
-          className="text-xs font-medium text-foreground underline underline-offset-2 hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm"
+          className="stg:text-xs stg:font-medium stg:text-foreground stg:underline stg:underline-offset-2 stg:hover:text-muted-foreground stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:rounded-sm"
         >
           Retry
         </button>
@@ -477,7 +478,7 @@ function FileViewerBody({
   return (
     <>
       {change && (
-        <p className="border-b border-border-muted px-4 py-1.5 text-[0.65rem] text-muted-foreground">
+        <p className="stg:border-b stg:border-border-muted stg:px-4 stg:py-1.5 stg:text-[0.65rem] stg:text-muted-foreground">
           Live — may differ from the reviewed change.
         </p>
       )}
@@ -532,38 +533,38 @@ function ImageFileContent({
   return (
     <>
       {change && (
-        <p className="border-b border-border-muted px-4 py-1.5 text-[0.65rem] text-muted-foreground">
+        <p className="stg:border-b stg:border-border-muted stg:px-4 stg:py-1.5 stg:text-[0.65rem] stg:text-muted-foreground">
           Live — may differ from the reviewed change.
         </p>
       )}
-      <div className="flex flex-col items-center gap-2 p-4">
+      <div className="stg:flex stg:flex-col stg:items-center stg:gap-2 stg:p-4">
         {url ? (
-          // UNSTYLED_BUTTON is load-bearing: without it the button shows the
-          // UA's default box in preflight-less hosts (see the constant).
+          // UNSTYLED_BUTTON adds the pointer cursor — the image preview
+          // carries no other clickability cue.
           <button
             type="button"
             onClick={() => setLightboxOpen(true)}
             aria-label={`Preview ${basename} at full size`}
             className={cn(
               UNSTYLED_BUTTON,
-              "max-w-full rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "stg:max-w-full stg:rounded-md stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
             )}
           >
             <img
               src={url}
               alt={basename}
               onError={() => setLoadFailed(true)}
-              className="max-h-[70vh] max-w-full rounded-md border border-border object-contain"
+              className="stg:max-h-[70vh] stg:max-w-full stg:rounded-md stg:border stg:border-border stg:object-contain"
             />
           </button>
         ) : (
           // One-frame placeholder until the object-URL effect runs.
           <div
-            className="h-48 w-72 max-w-full animate-pulse rounded-md bg-muted"
+            className="stg:h-48 stg:w-72 stg:max-w-full stg:animate-pulse stg:rounded-md stg:bg-muted"
             aria-hidden="true"
           />
         )}
-        <p className="text-[0.65rem] tabular-nums text-muted-foreground">
+        <p className="stg:text-[0.65rem] stg:tabular-nums stg:text-muted-foreground">
           {mime}
           {size ? ` · ${formatBytes(size)}` : ""}
         </p>
@@ -609,7 +610,7 @@ function CapturedFileContent({
 
   return (
     <>
-      <p className="border-b border-border-muted px-4 py-1.5 text-[0.65rem] text-muted-foreground">
+      <p className="stg:border-b stg:border-border-muted stg:px-4 stg:py-1.5 stg:text-[0.65rem] stg:text-muted-foreground">
         As of the agent&rsquo;s last change — not yet in the workspace source.
       </p>
       <ArtifactContentRenderer
@@ -625,14 +626,14 @@ function LoadingSkeleton() {
   return (
     <div
       role="status"
-      className="space-y-2 p-4"
+      className="stg:space-y-2 stg:p-4"
       aria-busy="true"
       aria-label="Loading file"
     >
       {SKELETON_LINE_WIDTHS.map((width, i) => (
         <div
           key={i}
-          className="h-4 animate-pulse rounded bg-muted"
+          className="stg:h-4 stg:animate-pulse stg:rounded stg:bg-muted"
           style={{ width: `${width}%` }}
           aria-hidden="true"
         />
@@ -657,14 +658,21 @@ function ViewerHeader({
   readonly onClose?: () => void;
 }) {
   return (
-    <div className="flex items-center gap-2 border-b border-border px-3 py-2">
+    <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="flex min-w-0 flex-1 items-baseline gap-1.5">
-        <span className="truncate text-xs font-semibold text-foreground" title={dir ? `${dir}/${basename}` : basename}>
-          {basename}
-        </span>
+      <div className="stg:flex stg:min-w-0 stg:flex-1 stg:items-baseline stg:gap-1.5">
+        <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="truncate text-[0.65rem] text-muted-foreground">{dir}</span>
+          <span className="stg:truncate stg:text-[0.65rem] stg:text-muted-foreground">{dir}</span>
         )}
       </div>
       {onRefresh && (
@@ -672,7 +680,7 @@ function ViewerHeader({
           type="button"
           onClick={onRefresh}
           aria-label={`Reload ${basename}`}
-          className="shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          className="stg:shrink-0 stg:rounded stg:p-0.5 stg:text-muted-foreground stg:transition-colors stg:hover:text-foreground stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring"
         >
           <RefreshIcon />
         </button>
@@ -682,7 +690,7 @@ function ViewerHeader({
           type="button"
           onClick={onClose}
           aria-label="Close file viewer"
-          className="shrink-0 rounded p-0.5 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          className="stg:shrink-0 stg:rounded stg:p-0.5 stg:text-muted-foreground stg:transition-colors stg:hover:text-foreground stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring"
         >
           <CloseIcon />
         </button>
@@ -693,7 +701,7 @@ function ViewerHeader({
 
 function MessageState({ children }: { readonly children: React.ReactNode }) {
   return (
-    <div className="flex h-full items-center justify-center p-8 text-center text-xs text-muted-foreground">
+    <div className="stg:flex stg:h-full stg:items-center stg:justify-center stg:p-8 stg:text-center stg:text-xs stg:text-muted-foreground">
       {children}
     </div>
   );
@@ -716,7 +724,7 @@ function formatBytes(n: number): string {
 
 function FileIcon() {
   return (
-    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="shrink-0 text-muted-foreground" aria-hidden="true">
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="stg:shrink-0 stg:text-muted-foreground" aria-hidden="true">
       <path d="M9.5 1.5H5C4.17 1.5 3.5 2.17 3.5 3V13C3.5 13.83 4.17 14.5 5 14.5H11C11.83 14.5 12.5 13.83 12.5 13V4.5L9.5 1.5Z" />
       <path d="M9.5 1.5V4.5H12.5" />
     </svg>
@@ -743,7 +751,7 @@ function RefreshIcon() {
 
 function ErrorAlertIcon() {
   return (
-    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="text-destructive" aria-hidden="true">
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="stg:text-destructive" aria-hidden="true">
       <circle cx="8" cy="8" r="6.5" />
       <path d="M8 5.5V8.5" />
       <circle cx="8" cy="11" r="0.5" fill="currentColor" stroke="none" />

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(
-        "flex items-center gap-1.5 rounded-md border border-border bg-card px-1.5 py-1",
-        "text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-      )}
-    >
-      {showCount && (
-        <span
-          aria-label={`${badgeCount} new items`}
-          className="inline-flex min-w-[1rem] items-center justify-center rounded-full bg-primary px-1 py-px text-[10px] font-medium leading-none 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>
   );
 }