@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/execution/McpToolDetail.tsx

@@ -3,6 +3,7 @@
 import { useMemo, useState } from "react";
 import type { ToolCall } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/message_pb";
 import { cn } from "@stigmer/theme";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { formatDuration } from "./ToolCallDetail.js";
 import { humanizeToolName } from "./tool-categories.js";
 import {
@@ -49,7 +50,7 @@ export function McpToolDetail({ toolCall, className }: McpToolDetailProps) {
   const duration = formatDuration(toolCall.startedAt, toolCall.completedAt);
 
   return (
-    <div className={cn("space-y-3 text-xs", className)}>
+    <div className={cn("stg:space-y-3 stg:text-xs", className)}>
       <McpMetadataRow
         mcpServerSlug={toolCall.mcpServerSlug}
         toolName={toolCall.name}
@@ -92,8 +93,8 @@ function McpOffloadedOutputView({
   readonly outputRef: NonNullable<ToolCall["outputRef"]>;
 }) {
   return (
-    <div className="space-y-1">
-      <span className="font-medium text-muted-foreground">Result</span>
+    <div className="stg:space-y-1">
+      <span className="stg:font-medium stg:text-muted-foreground">Result</span>
       {outputRef.isImage ? (
         <McpOffloadedImage storageKey={outputRef.storageKey} />
       ) : (
@@ -109,12 +110,12 @@ function McpOffloadedImage({ storageKey }: { readonly storageKey: string }) {
   const { url, error } = useArtifactDownloadUrl(executionId, storageKey);
 
   if (error) {
-    return <p className="text-xs text-destructive">Couldn&apos;t load image output.</p>;
+    return <p className="stg:text-xs stg:text-destructive">Couldn&apos;t load image output.</p>;
   }
   if (!url) {
     return (
       <div
-        className="h-40 w-64 animate-pulse rounded-md border border-border bg-muted"
+        className="stg:h-40 stg:w-64 stg:animate-pulse stg:rounded-md stg:border stg:border-border stg:bg-muted"
         aria-busy="true"
         aria-label="Loading image output"
       />
@@ -125,13 +126,13 @@ function McpOffloadedImage({ storageKey }: { readonly storageKey: string }) {
       href={url}
       target="_blank"
       rel="noreferrer"
-      className="inline-block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      className="stg:inline-block stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
     >
       <img
         src={url}
         alt="Tool output screenshot"
         loading="lazy"
-        className="max-h-96 w-auto rounded-md border border-border"
+        className="stg:max-h-96 stg:w-auto stg:rounded-md stg:border stg:border-border"
       />
     </a>
   );
@@ -154,11 +155,11 @@ function McpOffloadedText({
 
   const size = Number(outputRef.sizeBytes);
   const sizeSuffix = size ? ` (${formatBytes(size)})` : "";
-  const previewClass = "max-h-80 overflow-auto rounded-md border border-border bg-muted-subtle p-2 text-foreground";
-  const linkClass = "inline-block text-xs font-medium text-primary underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+  const previewClass = "stg:max-h-80 stg:overflow-auto stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle stg:p-2 stg:text-foreground";
+  const linkClass = "stg:inline-block stg:text-xs stg:font-medium stg:text-primary stg:underline-offset-2 stg:hover:underline stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring";
 
   return (
-    <div className="space-y-1">
+    <div className="stg:space-y-1">
       {!expanded ? (
         <>
           {outputRef.truncatedPreview && (
@@ -169,18 +170,18 @@ function McpOffloadedText({
           </button>
         </>
       ) : isLoading ? (
-        <p className="text-xs text-muted-foreground">Loading full output…</p>
+        <p className="stg:text-xs stg:text-muted-foreground">Loading full output…</p>
       ) : error ? (
-        <p className="text-xs text-destructive">Couldn&apos;t load full output. Try again.</p>
+        <p className="stg:text-xs stg:text-destructive">Couldn&apos;t load full output. Try again.</p>
       ) : content !== null ? (
-        <div className="space-y-1">
+        <div className="stg:space-y-1">
           <CollapsiblePre content={content} className={previewClass} />
           {isTruncated && (
             <button
               type="button"
               onClick={() => download(outputRef.storageKey)}
               disabled={isDownloading}
-              className={cn(linkClass, "disabled:opacity-50")}
+              className={cn(linkClass, "stg:disabled:opacity-50")}
             >
               {isDownloading ? "Preparing download…" : `Output truncated — download full file${sizeSuffix}`}
             </button>
@@ -218,13 +219,13 @@ export function McpMetadataRow({
   if (!hasMetadata) return null;
 
   return (
-    <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-muted-foreground">
+    <div className="stg:flex stg:flex-wrap stg:items-center stg:gap-x-3 stg:gap-y-1 stg:text-muted-foreground">
       {mcpServerSlug && (
-        <span className="inline-flex items-center gap-1.5 rounded bg-muted px-1.5 py-0.5 font-mono">
+        <span className="stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono">
           <McpServerIcon />
           {mcpServerSlug}
-          <span className="text-muted-foreground-subtle">/</span>
-          <span className="text-foreground">{humanizeToolName(toolName)}</span>
+          <span className="stg:text-muted-foreground-subtle">/</span>
+          <span className="stg:text-foreground">{humanizeToolName(toolName)}</span>
         </span>
       )}
       {duration && <span>{duration}</span>}
@@ -264,11 +265,11 @@ export function McpArgsView({ args }: McpArgsViewProps) {
   }
 
   return (
-    <div className="space-y-2">
-      <span className="font-medium text-muted-foreground">Arguments</span>
+    <div className="stg:space-y-2">
+      <span className="stg:font-medium stg:text-muted-foreground">Arguments</span>
 
       {scalars.length > 0 && (
-        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 rounded-md border border-border bg-muted-faint px-2.5 py-2">
+        <dl className="stg:grid stg:grid-cols-[auto_1fr] stg:gap-x-3 stg:gap-y-1 stg:rounded-md stg:border stg:border-border stg:bg-muted-faint stg:px-2.5 stg:py-2">
           {scalars.map(([key, value]) => (
             <ScalarRow key={key} label={key} value={value} />
           ))}
@@ -291,18 +292,21 @@ function ScalarRow({ label, value }: { label: string; value: string }) {
 
   return (
     <>
-      <dt className="whitespace-nowrap font-mono text-muted-foreground">
+      <dt className="stg:whitespace-nowrap stg:font-mono stg:text-muted-foreground">
         {humanizeArgKey(label)}
       </dt>
       {isMultiline ? (
-        <dd className="min-w-0">
-          <pre className="whitespace-pre-wrap break-words rounded border border-border bg-muted-subtle px-2 py-1 font-mono text-foreground">
+        <dd className="stg:min-w-0">
+          <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">
             {value}
           </pre>
         </dd>
       ) : (
-        <dd className="min-w-0 truncate font-mono text-foreground" title={value}>
-          {value}
+        <dd className="stg:min-w-0">
+          <TruncatedText
+            text={value}
+            className="stg:block stg:font-mono stg:text-foreground"
+          />
         </dd>
       )}
     </>
@@ -317,11 +321,11 @@ function McpResultView({ result }: { result: string }) {
   const parsed = parseMcpResult(result);
 
   return (
-    <div className="space-y-1">
-      <span className="font-medium text-muted-foreground">Result</span>
+    <div className="stg:space-y-1">
+      <span className="stg:font-medium stg:text-muted-foreground">Result</span>
       <CollapsiblePre
         content={parsed}
-        className="max-h-80 overflow-auto rounded-md border border-border bg-muted-subtle p-2 text-foreground"
+        className="stg:max-h-80 stg:overflow-auto stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle stg:p-2 stg:text-foreground"
       />
     </div>
   );

package/src/execution/MessageAttachments.tsx

@@ -4,6 +4,8 @@ import { useState } from "react";
 import { cn } from "@stigmer/theme";
 import { AttachmentImageLightbox } from "../attachment/AttachmentImageLightbox.js";
 import { UNSTYLED_BUTTON } from "../internal/form-primitives.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import { useArtifactDownload } from "./useArtifactDownload.js";
 import { useArtifactDownloadUrl } from "./useArtifactDownloadUrl.js";
 
@@ -83,7 +85,7 @@ export function MessageAttachments({
           (~h-6) share this row, and flexbox's default stretch alignment
           would balloon the document chips to tile height. */}
       <div
-        className={cn("flex flex-wrap items-center gap-1.5", className)}
+        className={cn("stg:flex stg:flex-wrap stg:items-center stg:gap-1.5", className)}
         role="list"
         aria-label="Submitted attachments"
       >
@@ -172,38 +174,45 @@ function ImagePreviewChip({
   }
 
   return (
-    <span role="listitem" aria-label={name} title={name} className="inline-flex">
-      {/* The whole tile is the preview target. UNSTYLED_BUTTON is
-          load-bearing: without it the tile shows the UA's default button
-          box in preflight-less hosts (see the constant). */}
-      <button
-        type="button"
-        onClick={onPreview}
-        aria-label={`Preview ${name}`}
-        className={cn(
-          UNSTYLED_BUTTON,
-          "relative block h-14 w-14 overflow-hidden rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-        )}
+    <Tooltip>
+      <TooltipTrigger
+        render={<span role="listitem" aria-label={name} className="stg:inline-flex" />}
       >
-        {url ? (
-          <img
-            src={url}
-            alt=""
-            aria-hidden="true"
-            loading="lazy"
-            className="h-full w-full object-cover"
-          />
-        ) : (
-          // Pulse placeholder while the presigned URL is minted — pulse
-          // means work is genuinely in flight (contrast ImageGlyphTile).
-          // Same footprint as the image, so no layout shift.
-          <span
-            className="block h-full w-full animate-pulse bg-muted"
-            aria-hidden="true"
-          />
-        )}
-      </button>
-    </span>
+        {/* The whole tile is the preview target. UNSTYLED_BUTTON adds the
+            pointer cursor — the image tile carries no other clickability
+            cue. */}
+        <button
+          type="button"
+          onClick={onPreview}
+          aria-label={`Preview ${name}`}
+          className={cn(
+            UNSTYLED_BUTTON,
+            "stg:relative stg:block stg:h-14 stg:w-14 stg:overflow-hidden stg:rounded-md stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+          )}
+        >
+          {url ? (
+            <img
+              src={url}
+              alt=""
+              aria-hidden="true"
+              loading="lazy"
+              className="stg:h-full stg:w-full stg:object-cover"
+            />
+          ) : (
+            // Pulse placeholder while the presigned URL is minted — pulse
+            // means work is genuinely in flight (contrast ImageGlyphTile).
+            // Same footprint as the image, so no layout shift.
+            <span
+              className="stg:block stg:h-full stg:w-full stg:animate-pulse stg:bg-muted"
+              aria-hidden="true"
+            />
+          )}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="top" className="stg:break-all">
+        {name}
+      </TooltipContent>
+    </Tooltip>
   );
 }
 
@@ -215,14 +224,22 @@ function ImagePreviewChip({
  */
 function ImageGlyphTile({ name }: { readonly name: string }) {
   return (
-    <span
-      role="listitem"
-      aria-label={name}
-      title={name}
-      className="inline-flex h-14 w-14 items-center justify-center rounded-md bg-muted-subtle"
-    >
-      <ImageGlyph />
-    </span>
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span
+            role="listitem"
+            aria-label={name}
+            className="stg:inline-flex stg:h-14 stg:w-14 stg:items-center stg:justify-center stg:rounded-md stg:bg-muted-subtle"
+          />
+        }
+      >
+        <ImageGlyph />
+      </TooltipTrigger>
+      <TooltipContent side="top" className="stg:break-all">
+        {name}
+      </TooltipContent>
+    </Tooltip>
   );
 }
 
@@ -251,7 +268,7 @@ function DocumentChip({
   const content = (
     <>
       <FileGlyph />
-      <span className="min-w-0 truncate">{name}</span>
+      <TruncatedText text={name} className="stg:min-w-0" />
     </>
   );
 
@@ -259,8 +276,7 @@ function DocumentChip({
     <span
       role="listitem"
       aria-label={name}
-      title={name}
-      className="inline-flex max-w-[200px] items-center rounded-md bg-muted-subtle px-2 py-0.5 text-xs text-foreground"
+      className="stg:inline-flex stg:max-w-[200px] stg:items-center stg:rounded-md stg:bg-muted-subtle stg:px-2 stg:py-0.5 stg:text-xs stg:text-foreground"
     >
       {downloadable ? (
         <button
@@ -270,14 +286,14 @@ function DocumentChip({
           aria-label={`Download ${name}`}
           className={cn(
             UNSTYLED_BUTTON,
-            "flex min-w-0 items-center gap-1 rounded-sm text-inherit [font:inherit] hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            isDownloading && "opacity-70",
+            "stg:flex stg:min-w-0 stg:items-center stg:gap-1 stg:rounded-sm stg:hover:text-accent-foreground stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+            isDownloading && "stg:opacity-70",
           )}
         >
           {content}
         </button>
       ) : (
-        <span className="flex min-w-0 items-center gap-1">{content}</span>
+        <span className="stg:flex stg:min-w-0 stg:items-center stg:gap-1">{content}</span>
       )}
     </span>
   );
@@ -329,7 +345,7 @@ function ImageGlyph() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
       aria-hidden="true"
     >
       <rect x="3" y="3" width="18" height="18" rx="2" />
@@ -354,7 +370,7 @@ function FileGlyph() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground"
+      className="stg:shrink-0 stg:text-muted-foreground"
       aria-hidden="true"
     >
       <path d="M8 1H4C3.45 1 3 1.45 3 2V12C3 12.55 3.45 13 4 13H10C10.55 13 11 12.55 11 12V4L8 1Z" />

package/src/execution/MessageEntry.tsx

@@ -19,6 +19,7 @@ import {
 } from "./MessageAttachments.js";
 import { PlanDocumentMessage } from "./PlanDocumentMessage.js";
 import { useRenderTracer } from "../internal/dev/index.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 
 /** Props for {@link MessageEntry}. */
 export interface MessageEntryProps {
@@ -172,14 +173,14 @@ function HumanMessage({
       role="article"
       aria-label="User message"
       className={cn(
-        "group relative ms-[20%] rounded-lg bg-muted-subtle px-4 py-3",
+        "stg:group stg:relative stg:ms-[20%] stg:rounded-lg stg:bg-muted-subtle stg:px-4 stg:py-3",
         className,
       )}
     >
       {/* The badge renders only for non-default modes (a "Plan" pill), so
           ordinary Agent turns carry no extra chrome. */}
       {interactionMode !== undefined && (
-        <InteractionModeBadge mode={interactionMode} className="mb-1.5" />
+        <InteractionModeBadge mode={interactionMode} className="stg:mb-1.5" />
       )}
       {/* The evidence a file rode with this turn (#372) — above the prose,
           mirroring the composer's chips-above-input layout. */}
@@ -187,26 +188,32 @@ function HumanMessage({
         <MessageAttachments
           attachments={attachments}
           executionId={executionId}
-          className="mb-2"
+          className="stg:mb-2"
         />
       )}
-      <p className="text-sm text-foreground whitespace-pre-wrap">{content}</p>
+      <p className="stg:text-sm stg:text-foreground stg:whitespace-pre-wrap">{content}</p>
       {onEdit && (
-        <button
-          type="button"
-          onClick={onEdit}
-          aria-label="Edit message"
-          title="Edit"
-          className={cn(
-            "absolute -top-2.5 -right-2.5 inline-flex h-7 w-7 items-center justify-center rounded-full",
-            "border border-border bg-card text-muted-foreground shadow-sm transition",
-            "hover:text-foreground hover:bg-accent-hover",
-            "opacity-0 group-hover:opacity-100 focus-visible:opacity-100",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          )}
-        >
-          <EditIcon />
-        </button>
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <button
+                type="button"
+                onClick={onEdit}
+                aria-label="Edit message"
+                className={cn(
+                  "stg:absolute stg:-top-2.5 stg:-right-2.5 stg:inline-flex stg:h-7 stg:w-7 stg:items-center stg:justify-center stg:rounded-full",
+                  "stg:border stg:border-border stg:bg-card stg:text-muted-foreground stg:shadow-sm stg:transition",
+                  "stg:hover:text-foreground stg:hover:bg-accent-hover",
+                  "stg:opacity-0 stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
+                  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+                )}
+              />
+            }
+          >
+            <EditIcon />
+          </TooltipTrigger>
+          <TooltipContent side="top">Edit</TooltipContent>
+        </Tooltip>
       )}
     </div>
   );
@@ -262,7 +269,7 @@ function AiMessage({
       role="article"
       aria-label="AI response"
       aria-busy={isStreaming}
-      className={cn("px-4 py-3", className)}
+      className={cn("stg:px-4 stg:py-3", className)}
     >
       <div className="stgm-prose">
         <Streamdown
@@ -301,19 +308,19 @@ function ThinkingMessage({
     <div
       role="article"
       aria-label="Model thinking"
-      className={cn("px-4 py-1.5", className)}
+      className={cn("stg:px-4 stg:py-1.5", className)}
     >
       <button
         type="button"
         aria-expanded={expanded}
         onClick={() => setExpanded((v) => !v)}
         className={cn(
-          "flex items-center gap-1.5 text-xs text-muted-foreground transition-colors",
-          "hover:text-foreground cursor-pointer",
+          "stg:flex stg:items-center stg:gap-1.5 stg:text-xs stg:text-muted-foreground stg:transition-colors",
+          "stg:hover:text-foreground stg:cursor-pointer",
         )}
       >
         <ThinkingIcon isStreaming={isStreaming} />
-        <span className="min-w-0 truncate">
+        <span className="stg:min-w-0 stg:truncate">
           {isStreaming && !hasContent
             ? "Thinking..."
             : expanded
@@ -324,12 +331,12 @@ function ThinkingMessage({
       </button>
 
       {expanded && hasContent && (
-        <div className="mt-1.5 border-l-2 border-muted-foreground/20 pl-3">
-          <p className="text-xs text-muted-foreground whitespace-pre-wrap leading-relaxed">
+        <div className="stg:mt-1.5 stg:border-l-2 stg:border-muted-foreground/20 stg:pl-3">
+          <p className="stg:text-xs stg:text-muted-foreground stg:whitespace-pre-wrap stg:leading-relaxed">
             {content}
             {isStreaming && (
               <span
-                className="inline-block w-[2px] h-[0.8em] bg-muted-foreground align-text-bottom animate-pulse ml-0.5"
+                className="stg:inline-block stg:w-[2px] stg:h-[0.8em] stg:bg-muted-foreground stg:align-text-bottom stg:animate-pulse stg:ml-0.5"
                 aria-hidden="true"
               />
             )}
@@ -351,9 +358,9 @@ function SystemMessage({
     <div
       role="article"
       aria-label="System message"
-      className={cn("px-4 py-2", className)}
+      className={cn("stg:px-4 stg:py-2", className)}
     >
-      <p className="text-xs text-muted-foreground italic">{content}</p>
+      <p className="stg:text-xs stg:text-muted-foreground stg:italic">{content}</p>
     </div>
   );
 }
@@ -368,7 +375,7 @@ function ThinkingIcon({ isStreaming }: { isStreaming: boolean }) {
         fill="none"
         stroke="currentColor"
         strokeWidth="1.5"
-        className="shrink-0 animate-spin"
+        className="stg:shrink-0 stg:animate-spin"
         aria-hidden="true"
       >
         <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
@@ -385,7 +392,7 @@ function ThinkingIcon({ isStreaming }: { isStreaming: boolean }) {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <circle cx="6" cy="5" r="3.5" />
@@ -408,8 +415,8 @@ function ChevronIcon({ expanded }: { expanded: boolean }) {
       strokeLinecap="round"
       strokeLinejoin="round"
       className={cn(
-        "shrink-0 transition-transform duration-150",
-        expanded && "rotate-90",
+        "stg:shrink-0 stg:transition-transform stg:duration-150",
+        expanded && "stg:rotate-90",
       )}
       aria-hidden="true"
     >