@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/execution/MessageThread.tsx

@@ -337,7 +337,7 @@ export type ThreadContentColumn = "center" | "start";
 export function threadContentColumnClass(
   column: ThreadContentColumn | undefined,
 ): string | false {
-  return column != null && cn("w-full max-w-3xl px-4", column === "center" && "mx-auto");
+  return column != null && cn("stg:w-full stg:max-w-3xl stg:px-4", column === "center" && "stg:mx-auto");
 }
 
 /**
@@ -1193,7 +1193,7 @@ export function MessageThread({
 
   if (virtualized) {
     return (
-      <div className={cn("relative min-h-0", className)}>
+      <div className={cn("stg:relative stg:min-h-0", className)}>
         <Suspense fallback={null}>
           <LazyVirtualizedThread
             items={items}
@@ -1311,18 +1311,18 @@ function NonVirtualizedThread({
   useDomNodeCount(scrollRef, "MessageThread");
 
   return (
-    <div className={cn("relative min-h-0", className)}>
+    <div className={cn("stg:relative stg:min-h-0", className)}>
       <div
         ref={scrollRef}
         role="log"
         aria-live="polite"
         aria-relevant="additions"
         className={cn(
-          "h-full overflow-y-auto pt-6 pb-4 [overflow-anchor:none]",
-          "[scrollbar-width:thin] [scrollbar-color:var(--color-border)_transparent]",
-          "[&::-webkit-scrollbar]:w-1.5",
-          "[&::-webkit-scrollbar-track]:bg-transparent",
-          "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border/40",
+          "stg:h-full stg:overflow-y-auto stg:pt-6 stg:pb-4 stg:[overflow-anchor:none]",
+          "stg:[scrollbar-width:thin] stg:[scrollbar-color:var(--color-border)_transparent]",
+          "stg:[&::-webkit-scrollbar]:w-1.5",
+          "stg:[&::-webkit-scrollbar-track]:bg-transparent",
+          "stg:[&::-webkit-scrollbar-thumb]:rounded-full stg:[&::-webkit-scrollbar-thumb]:bg-border/40",
         )}
       >
         <SandboxContext.Provider value={sandboxCtx}>
@@ -1330,7 +1330,7 @@ function NonVirtualizedThread({
         <ApprovalContext.Provider value={approvalCtx}>
         <FileReviewContext.Provider value={fileReviewCtx}>
         <DevProfiler id="MessageThread">
-          <div ref={contentRef} className={cn("flex flex-col gap-4", threadContentColumnClass(contentColumn))}>
+          <div ref={contentRef} className={cn("stg:flex stg:flex-col stg:gap-4", threadContentColumnClass(contentColumn))}>
             {items.map((item) => (
               <ThreadItemWrapper key={item.key} animate>
                 <ThreadItemRenderer
@@ -1454,7 +1454,7 @@ export function ThreadItemRenderer({
       return (
         <Entry
           message={item.message}
-          className={item.isPending ? "opacity-70" : undefined}
+          className={item.isPending ? "stg:opacity-70" : undefined}
           isPlanDocument={item.isPlanDocument}
           interactionMode={item.interactionMode}
           attachments={item.attachments}
@@ -1473,19 +1473,19 @@ export function ThreadItemRenderer({
           toolCalls={item.toolCalls}
           subAgentExecutions={item.subAgentExecutions}
           formatSummary={formatToolCallSummary}
-          className="mx-4"
+          className="stg:mx-4"
         />
       );
     case "sub-agent":
       return (
         <SubAgentSection
           subAgentExecution={item.subAgentExecution}
-          className="mx-4"
+          className="stg:mx-4"
         />
       );
     case "phase-badge":
       return (
-        <div className="flex justify-center py-3">
+        <div className="stg:flex stg:justify-center stg:py-3">
           <ExecutionPhaseBadge phase={item.phase} />
         </div>
       );
@@ -1523,7 +1523,7 @@ export function ThreadItemRenderer({
       return <SummarizationCard event={item.event} />;
     case "todos": {
       const Todos = slots?.TodoCard ?? TodoCard;
-      return <Todos todos={item.todos} className="mx-4" TodoRow={slots?.TodoRow} />;
+      return <Todos todos={item.todos} className="stg:mx-4" TodoRow={slots?.TodoRow} />;
     }
     case "plan-completion": {
       // When the plan was published as an artifact, show the richer reviewable
@@ -1600,21 +1600,21 @@ function FailedUserMessage({
   MessageEntryComponent: ComponentType<MessageEntryProps>;
 }) {
   return (
-    <div className="flex flex-col gap-1">
+    <div className="stg:flex stg:flex-col stg:gap-1">
       {/* Attachments stay visible on the failed bubble — the one turn where
           the user most needs evidence of what they tried to send (and what
           Retry will re-send). No executionId: the send never created one. */}
       <MessageEntryComponent message={message} attachments={attachments} />
       <div
         role="alert"
-        className="mx-4 flex items-center gap-2 text-xs text-destructive"
+        className="stg:mx-4 stg:flex stg:items-center stg:gap-2 stg:text-xs stg:text-destructive"
       >
-        <span className="min-w-0 flex-1 truncate">Couldn&rsquo;t send.</span>
+        <span className="stg:min-w-0 stg:flex-1 stg:truncate">Couldn&rsquo;t send.</span>
         {onRetry && (
           <button
             type="button"
             onClick={onRetry}
-            className="shrink-0 rounded font-medium underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="stg:shrink-0 stg:rounded stg:font-medium stg:underline-offset-2 stg:hover:underline stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
           >
             Retry
           </button>
@@ -1669,24 +1669,24 @@ function ExecutionErrorNotice({
     <div
       role={interrupted ? "status" : "alert"}
       className={cn(
-        "mx-4 flex flex-col gap-1.5 rounded-md px-3 py-2",
-        interrupted ? "bg-muted" : "bg-destructive-subtle",
+        "stg:mx-4 stg:flex stg:flex-col stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-2",
+        interrupted ? "stg:bg-muted" : "stg:bg-destructive-subtle",
       )}
     >
       <p
         className={cn(
-          "text-xs whitespace-pre-wrap break-words",
-          interrupted ? "text-foreground" : "text-destructive",
-          !expanded && "line-clamp-3",
+          "stg:text-xs stg:whitespace-pre-wrap stg:break-words",
+          interrupted ? "stg:text-foreground" : "stg:text-destructive",
+          !expanded && "stg:line-clamp-3",
         )}
       >
         {error}
       </p>
-      <div className="flex items-center gap-3 text-xs">
+      <div className="stg:flex stg:items-center stg:gap-3 stg:text-xs">
         <button
           type="button"
           onClick={() => setExpanded((v) => !v)}
-          className="font-medium text-muted-foreground underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="stg:font-medium stg:text-muted-foreground stg:underline-offset-2 stg:hover:underline stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
         >
           {expanded ? "Show less" : "Show more"}
         </button>
@@ -1694,7 +1694,7 @@ function ExecutionErrorNotice({
           <button
             type="button"
             onClick={() => onRetry!(retryMessage!)}
-            className="font-medium text-foreground underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="stg:font-medium stg:text-foreground stg:underline-offset-2 stg:hover:underline stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
           >
             {interrupted ? "Resume" : "Retry"}
           </button>
@@ -1744,7 +1744,7 @@ const ApprovalCardRow = memo(function ApprovalCardRow({
       onSubmit={handleSubmit}
       isSubmitting={isSubmitting}
       error={error}
-      className="mx-4"
+      className="stg:mx-4"
     />
   );
 });
@@ -1772,7 +1772,7 @@ const FileReviewRecordRow = memo(function FileReviewRecordRow({
       // the record renders its compact file-list body — the history never
       // duplicates the transcript's diffs.
       showDiffs={false}
-      className="mx-4"
+      className="stg:mx-4"
     />
   );
 });

package/src/execution/PlanArtifactCard.tsx

@@ -3,6 +3,7 @@
 import { memo, useState, type ReactNode } from "react";
 import { cn } from "@stigmer/theme";
 import type { ExecutionArtifact } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/artifact_pb";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { ArtifactPreviewModal } from "./ArtifactPreviewModal.js";
 import { formatArtifactSize } from "./artifact-utils.js";
 import { useArtifactCopy } from "./useArtifactCopy.js";
@@ -92,26 +93,26 @@ export const PlanArtifactCard = memo(function PlanArtifactCard({
       aria-label="Plan"
       onKeyDown={handleKeyDown}
       className={cn(
-        "mx-4 flex flex-wrap items-center gap-x-3 gap-y-2 rounded-lg",
-        "border border-border-muted bg-card px-3 py-2.5",
+        "stg:mx-4 stg:flex stg:flex-wrap stg:items-center stg:gap-x-3 stg:gap-y-2 stg:rounded-lg",
+        "stg:border stg:border-border-muted stg:bg-card stg:px-3 stg:py-2.5",
         className,
       )}
     >
       <PlanIcon />
-      <div className="min-w-0 flex-1 basis-48">
-        <div className="truncate text-sm font-medium text-foreground">
+      <div className="stg:min-w-0 stg:flex-1 stg:basis-48">
+        <div className="stg:truncate stg:text-sm stg:font-medium stg:text-foreground">
           {title ?? "Plan"}
         </div>
-        <div className="text-[0.65rem] text-muted-foreground-faint">
+        <div className="stg:text-[0.65rem] stg:text-muted-foreground-faint">
           {artifact.name}
           <span aria-hidden="true"> · </span>
-          <span className="tabular-nums">
+          <span className="stg:tabular-nums">
             {formatArtifactSize(artifact.sizeBytes)}
           </span>
         </div>
       </div>
 
-      <div className="ml-auto flex flex-wrap items-center gap-x-1.5 gap-y-1.5">
+      <div className="stg:ml-auto stg:flex stg:flex-wrap stg:items-center stg:gap-x-1.5 stg:gap-y-1.5">
         {onOpenPlan ? (
           <IconAction
             label="Open plan"
@@ -145,11 +146,11 @@ export const PlanArtifactCard = memo(function PlanArtifactCard({
             disabled={disabled}
             onClick={onImplement}
             className={cn(
-              "ml-1.5 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5",
-              "text-xs font-medium transition-colors",
-              "bg-primary text-primary-foreground hover:bg-primary-hover",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:ml-1.5 stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5",
+              "stg:text-xs stg:font-medium stg:transition-colors",
+              "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             <ImplementIcon />
@@ -158,7 +159,7 @@ export const PlanArtifactCard = memo(function PlanArtifactCard({
         )}
       </div>
 
-      <div role="status" aria-live="polite" aria-atomic="true" className="sr-only">
+      <div role="status" aria-live="polite" aria-atomic="true" className="stg:sr-only">
         {copied && "Plan copied to clipboard"}
       </div>
 
@@ -181,12 +182,14 @@ export const PlanArtifactCard = memo(function PlanArtifactCard({
 });
 
 const FOCUS_RING =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm";
+  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:rounded-sm";
 
 /**
- * An icon-only secondary action. The accessible name doubles as the hover
- * tooltip (native `title` — the codebase's tooltip pattern), and the padded
- * hit area keeps the target comfortable despite the compact glyph.
+ * An icon-only secondary action. The accessible name doubles as the house
+ * tooltip's content; the trigger is a wrapper span so the hint stays
+ * hoverable while the action is disabled (`pointer-events-none` on the
+ * button would otherwise take the tooltip down with it). The padded hit
+ * area keeps the target comfortable despite the compact glyph.
  */
 function IconAction({
   label,
@@ -200,21 +203,25 @@ function IconAction({
   readonly disabled?: boolean;
 }) {
   return (
-    <button
-      type="button"
-      aria-label={label}
-      title={label}
-      onClick={onClick}
-      disabled={disabled}
-      className={cn(
-        "inline-flex items-center rounded-md p-1.5 text-muted-foreground",
-        "transition-colors hover:bg-muted hover:text-foreground",
-        "disabled:pointer-events-none disabled:opacity-50",
-        FOCUS_RING,
-      )}
-    >
-      {icon}
-    </button>
+    <Tooltip>
+      <TooltipTrigger render={<span className="stg:inline-flex" />}>
+        <button
+          type="button"
+          aria-label={label}
+          onClick={onClick}
+          disabled={disabled}
+          className={cn(
+            "stg:inline-flex stg:items-center stg:rounded-md stg:p-1.5 stg:text-muted-foreground",
+            "stg:transition-colors stg:hover:bg-muted stg:hover:text-foreground",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+            FOCUS_RING,
+          )}
+        >
+          {icon}
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="top">{label}</TooltipContent>
+    </Tooltip>
   );
 }
 
@@ -229,7 +236,7 @@ function PlanIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground-faint"
+      className="stg:shrink-0 stg:text-muted-foreground-faint"
       aria-hidden="true"
     >
       <path d="M3 4h10M3 8h7M3 12h8" />
@@ -267,7 +274,7 @@ function DownloadIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <path d="M6 1.5V8.5" />
@@ -288,7 +295,7 @@ function CopyIcon() {
       strokeWidth="1.2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <rect x="4" y="4" width="6.5" height="6.5" rx="1" />
@@ -309,7 +316,7 @@ function CheckIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-success"
+      className="stg:shrink-0 stg:text-success"
       aria-hidden="true"
     >
       <path d="M2 6.5L4.5 9L10 3" />
@@ -329,7 +336,7 @@ function EyeIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <path d="M1.5 8S4 3.5 8 3.5s6.5 4.5 6.5 4.5-2.5 4.5-6.5 4.5S1.5 8 1.5 8Z" />

package/src/execution/PlanCompletionCard.tsx

@@ -44,13 +44,13 @@ export const PlanCompletionCard = memo(function PlanCompletionCard({
       aria-label="Plan complete"
       onKeyDown={handleKeyDown}
       className={cn(
-        "mx-4 flex items-center gap-3 rounded-md border border-border-muted",
-        "bg-muted-faint px-3 py-2.5",
+        "stg:mx-4 stg:flex stg:items-center stg:gap-3 stg:rounded-md stg:border stg:border-border-muted",
+        "stg:bg-muted-faint stg:px-3 stg:py-2.5",
         className,
       )}
     >
       <PlanCompleteIcon />
-      <span className="min-w-0 flex-1 text-xs font-medium text-muted-foreground">
+      <span className="stg:min-w-0 stg:flex-1 stg:text-xs stg:font-medium stg:text-muted-foreground">
         Plan complete — ready to build?
       </span>
       <button
@@ -58,12 +58,12 @@ export const PlanCompletionCard = memo(function PlanCompletionCard({
         disabled={disabled}
         onClick={onImplement}
         className={cn(
-          "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5",
-          "text-xs font-medium transition-colors",
-          "bg-primary text-primary-foreground",
-          "hover:bg-primary-hover",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          "disabled:pointer-events-none disabled:opacity-50",
+          "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5",
+          "stg:text-xs stg:font-medium stg:transition-colors",
+          "stg:bg-primary stg:text-primary-foreground",
+          "stg:hover:bg-primary-hover",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+          "stg:disabled:pointer-events-none stg:disabled:opacity-50",
         )}
       >
         <ImplementIcon />
@@ -84,7 +84,7 @@ function PlanCompleteIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground/70"
+      className="stg:shrink-0 stg:text-muted-foreground/70"
       aria-hidden="true"
     >
       <path d="M3 4h10M3 8h7M3 12h8" />

package/src/execution/PlanDocumentMessage.tsx

@@ -53,16 +53,16 @@ export const PlanDocumentMessage = memo(function PlanDocumentMessage({
     <div
       role="article"
       aria-label="Plan document"
-      className={cn("mx-4", className)}
+      className={cn("stg:mx-4", className)}
     >
-      <div className="overflow-hidden rounded-lg border border-border-muted bg-card">
-        <header className="flex items-center gap-2 border-b border-border-muted bg-muted-faint px-4 py-2.5">
+      <div className="stg:overflow-hidden stg:rounded-lg stg:border stg:border-border-muted stg:bg-card">
+        <header className="stg:flex stg:items-center stg:gap-2 stg:border-b stg:border-border-muted stg:bg-muted-faint stg:px-4 stg:py-2.5">
           <PlanDocIcon />
-          <span className="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">
+          <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-sm stg:font-semibold stg:text-foreground">
             {title ?? "Plan"}
           </span>
         </header>
-        <div className="stgm-prose px-4 py-4">
+        <div className="stgm-prose stg:px-4 stg:py-4">
           <Streamdown
             components={PLAN_DOCUMENT_MARKDOWN_COMPONENTS}
             isAnimating={false}
@@ -86,7 +86,7 @@ function PlanDocIcon() {
       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="M3 4h10M3 8h7M3 12h8" />

package/src/execution/PlanStreamingCard.tsx

@@ -65,20 +65,20 @@ export const PlanStreamingCard = memo(function PlanStreamingCard({
       aria-label="Plan being written"
       aria-busy="true"
       className={cn(
-        "mx-4 flex flex-wrap items-center gap-x-3 gap-y-2 rounded-lg",
-        "border border-border-muted bg-card px-3 py-2.5",
+        "stg:mx-4 stg:flex stg:flex-wrap stg:items-center stg:gap-x-3 stg:gap-y-2 stg:rounded-lg",
+        "stg:border stg:border-border-muted stg:bg-card stg:px-3 stg:py-2.5",
         className,
       )}
     >
-      <PlanIcon className="animate-pulse" />
-      <div className="min-w-0 flex-1 basis-48">
-        <div className="truncate text-sm font-medium text-foreground">
+      <PlanIcon className="stg:animate-pulse" />
+      <div className="stg:min-w-0 stg:flex-1 stg:basis-48">
+        <div className="stg:truncate stg:text-sm stg:font-medium stg:text-foreground">
           {title ?? "Writing plan…"}
         </div>
-        <div className="text-[0.65rem] text-muted-foreground-faint">
+        <div className="stg:text-[0.65rem] stg:text-muted-foreground-faint">
           <span role="status">Writing…</span>
           <span aria-hidden="true"> · </span>
-          <span className="tabular-nums">{formatArtifactSize(sizeBytes)}</span>
+          <span className="stg:tabular-nums">{formatArtifactSize(sizeBytes)}</span>
         </div>
       </div>
 
@@ -87,8 +87,8 @@ export const PlanStreamingCard = memo(function PlanStreamingCard({
           type="button"
           onClick={onOpenPlan}
           className={cn(
-            "ml-auto inline-flex items-center gap-1 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm",
+            "stg:ml-auto stg:inline-flex stg:items-center stg:gap-1 stg:text-xs stg:font-medium stg:text-muted-foreground stg:transition-colors stg:hover:text-foreground",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:rounded-sm",
           )}
         >
           <EyeIcon />
@@ -110,7 +110,7 @@ function PlanIcon({ className }: { readonly className?: string }) {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className={cn("shrink-0 text-muted-foreground-faint", className)}
+      className={cn("stg:shrink-0 stg:text-muted-foreground-faint", className)}
       aria-hidden="true"
     >
       <path d="M3 4h10M3 8h7M3 12h8" />
@@ -131,7 +131,7 @@ function EyeIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <path d="M1.5 8S4 3.5 8 3.5s6.5 4.5 6.5 4.5-2.5 4.5-6.5 4.5S1.5 8 1.5 8Z" />