@stigmer/react 3.9.0 → 3.11.0

package/src/execution/ResultView.tsx

@@ -77,7 +77,7 @@ export function ResultView({ view, showFileName = true, showStats = true, classN
     case "outputRef":
       return <OutputRefResultView view={view} className={className} />;
     case "text":
-      return view.text ? <CollapsiblePre content={view.text} className={cn("text-foreground", className)} /> : null;
+      return view.text ? <CollapsiblePre content={view.text} className={cn("stg:text-foreground", className)} /> : null;
     case "json":
       return <CollapsibleCode label="Result" content={formatJson(view.value)} className={className} />;
     case "error":
@@ -183,16 +183,16 @@ function DiffResultView({
   // (path + ± stats) is this view's own, so the DiffViewer is used without its
   // filePath header to avoid a duplicate path.
   return (
-    <div className={cn("space-y-1", className)} data-cursor-target="file-diff">
+    <div className={cn("stg:space-y-1", className)} data-cursor-target="file-diff">
       {(showPath || showStatsRow) && (
-        <div className="flex items-center gap-2 text-muted-foreground">
+        <div className="stg:flex stg:items-center stg:gap-2 stg:text-muted-foreground">
           {showPath && (
-            <FilePathLink path={view.path} dirDisplay="dim" className="text-xs" />
+            <FilePathLink path={view.path} dirDisplay="dim" className="stg:text-xs" />
           )}
           {showStatsRow && stats && (
-            <span className="shrink-0 tabular-nums text-xs">
-              <span className="text-diff-added-fg">+{stats.added}</span>{" "}
-              <span className="text-diff-removed-fg">-{stats.removed}</span>
+            <span className="stg:shrink-0 stg:tabular-nums stg:text-xs">
+              <span className="stg:text-diff-added-fg">+{stats.added}</span>{" "}
+              <span className="stg:text-diff-removed-fg">-{stats.removed}</span>
             </span>
           )}
         </div>
@@ -273,7 +273,7 @@ function SearchResultView({
 
   if (count === 0 && matches.length === 0) {
     return (
-      <p className={cn("text-xs text-muted-foreground", className)}>
+      <p className={cn("stg:text-xs stg:text-muted-foreground", className)}>
         {kind === "files" ? "No files found" : "No matches"}
       </p>
     );
@@ -289,8 +289,8 @@ function SearchResultView({
       : null;
 
   return (
-    <div className={cn("space-y-1", className)}>
-      {header && <span className="font-medium text-muted-foreground">{header}</span>}
+    <div className={cn("stg:space-y-1", className)}>
+      {header && <span className="stg:font-medium stg:text-muted-foreground">{header}</span>}
       {kind === "files" ? (
         <SearchFileList matches={matches} />
       ) : (
@@ -303,7 +303,7 @@ function SearchResultView({
 /** Bounded, scrollable shell shared by both search result treatments. */
 function SearchResultBox({ children }: { children: ReactNode }) {
   return (
-    <div className="max-h-80 overflow-auto rounded-md border border-border bg-muted-subtle text-xs">
+    <div className="stg:max-h-80 stg:overflow-auto stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle stg:text-xs">
       {children}
     </div>
   );
@@ -316,9 +316,9 @@ function SearchFileList({ matches }: { matches: readonly ToolSearchMatch[] }) {
       {matches.map((m, i) => (
         <div
           key={i}
-          className="border-b border-border-muted px-2 py-0.5 last:border-b-0"
+          className="stg:border-b stg:border-border-muted stg:px-2 stg:py-0.5 stg:last:border-b-0"
         >
-          <FilePathLink path={m.file ?? m.text} dirDisplay="dim" className="text-xs" />
+          <FilePathLink path={m.file ?? m.text} dirDisplay="dim" className="stg:text-xs" />
         </div>
       ))}
     </SearchResultBox>
@@ -331,19 +331,19 @@ function SearchContentMatches({ matches }: { matches: readonly ToolSearchMatch[]
   return (
     <SearchResultBox>
       {groups.map((group, gi) => (
-        <div key={gi} className="border-b border-border-muted last:border-b-0">
+        <div key={gi} className="stg:border-b stg:border-border-muted stg:last:border-b-0">
           {group.file && (
-            <div className="bg-muted-faint px-2 py-0.5">
-              <FilePathLink path={group.file} dirDisplay="dim" className="text-xs" />
+            <div className="stg:bg-muted-faint stg:px-2 stg:py-0.5">
+              <FilePathLink path={group.file} dirDisplay="dim" className="stg:text-xs" />
             </div>
           )}
           {group.matches.map((m, i) => (
             <div
               key={i}
-              className="whitespace-pre-wrap break-words px-2 py-0.5 font-mono text-foreground"
+              className="stg:whitespace-pre-wrap stg:break-words stg:px-2 stg:py-0.5 stg:font-mono stg:text-foreground"
             >
               {m.line !== undefined && (
-                <span className="select-none text-muted-foreground-subtle">{m.line}: </span>
+                <span className="stg:select-none stg:text-muted-foreground-subtle">{m.line}: </span>
               )}
               {m.text}
             </div>
@@ -389,18 +389,18 @@ function ListResultView({
   className?: string;
 }) {
   if (count === 0) {
-    return <p className={cn("text-xs text-muted-foreground", className)}>Empty</p>;
+    return <p className={cn("stg:text-xs stg:text-muted-foreground", className)}>Empty</p>;
   }
   return (
-    <div className={cn("space-y-1", className)}>
+    <div className={cn("stg:space-y-1", className)}>
       {showCount && (
-        <span className="font-medium text-muted-foreground">
+        <span className="stg:font-medium stg:text-muted-foreground">
           {count} {count === 1 ? "item" : "items"}
         </span>
       )}
-      <div className="max-h-80 overflow-auto rounded-md border border-border bg-muted-subtle font-mono text-xs">
+      <div className="stg:max-h-80 stg:overflow-auto stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle stg:font-mono stg:text-xs">
         {entries.map((e, i) => (
-          <div key={i} className="truncate px-2 py-0.5 text-foreground">
+          <div key={i} className="stg:truncate stg:px-2 stg:py-0.5 stg:text-foreground">
             {e}
           </div>
         ))}
@@ -430,8 +430,8 @@ function FileResultView({
     // bare, redundant path; otherwise the path itself is the information (a read).
     if (showFileName && view.path) {
       return (
-        <div className={cn("flex items-center gap-1.5 text-xs", className)}>
-          <FilePathLink path={view.path} className="text-xs" />
+        <div className={cn("stg:flex stg:items-center stg:gap-1.5 stg:text-xs", className)}>
+          <FilePathLink path={view.path} className="stg:text-xs" />
         </div>
       );
     }
@@ -440,9 +440,9 @@ function FileResultView({
     );
   }
   return (
-    <div className={cn("space-y-1", className)}>
+    <div className={cn("stg:space-y-1", className)}>
       {showFileName && view.path && (
-        <FilePathLink path={view.path} className="text-xs" />
+        <FilePathLink path={view.path} className="stg:text-xs" />
       )}
       <CollapsibleCode label={view.truncated ? "Content (truncated)" : "Content"} content={view.content} />
     </div>
@@ -463,7 +463,7 @@ function ContentBlocksResultView({
         .join("\n"),
     [blocks],
   );
-  return <CollapsiblePre content={text} className={cn("text-foreground", className)} />;
+  return <CollapsiblePre content={text} className={cn("stg:text-foreground", className)} />;
 }
 
 // ---------------------------------------------------------------------------
@@ -499,30 +499,30 @@ function OutputRefImage({ storageKey, className }: { storageKey: string; classNa
   const { url, error } = useArtifactDownloadUrl(executionId, storageKey);
 
   if (error) {
-    return <p className={cn("text-xs text-destructive", className)}>Couldn&apos;t load image output.</p>;
+    return <p className={cn("stg:text-xs stg:text-destructive", className)}>Couldn&apos;t load image output.</p>;
   }
   if (!url) {
     return (
       <div
-        className={cn("h-40 w-64 animate-pulse rounded-md border border-border bg-muted", className)}
+        className={cn("stg:h-40 stg:w-64 stg:animate-pulse stg:rounded-md stg:border stg:border-border stg:bg-muted", className)}
         aria-busy="true"
         aria-label="Loading image output"
       />
     );
   }
   return (
-    <div className={cn("space-y-1", className)}>
+    <div className={cn("stg:space-y-1", className)}>
       <a
         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>
     </div>
@@ -546,33 +546,33 @@ function OutputRefText({ view, className }: { view: OutputRefView; className?: s
   const sizeSuffix = view.sizeBytes ? ` (${formatBytes(view.sizeBytes)})` : "";
 
   return (
-    <div className={cn("space-y-1", className)}>
+    <div className={cn("stg:space-y-1", className)}>
       {!expanded ? (
         <>
           {view.preview && (
-            <CollapsiblePre content={view.preview} className="text-foreground" />
+            <CollapsiblePre content={view.preview} className="stg:text-foreground" />
           )}
           <button
             type="button"
             onClick={() => setExpanded(true)}
-            className="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"
+            className="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"
           >
             View full output{sizeSuffix}
           </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">
-          <CollapsiblePre content={content} className="text-foreground" />
+        <div className="stg:space-y-1">
+          <CollapsiblePre content={content} className="stg:text-foreground" />
           {isTruncated && (
             <button
               type="button"
               onClick={() => download(view.storageKey)}
               disabled={isDownloading}
-              className="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 disabled:opacity-50"
+              className="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 stg:disabled:opacity-50"
             >
               {isDownloading ? "Preparing download…" : `Output truncated — download full file${sizeSuffix}`}
             </button>
@@ -585,9 +585,9 @@ function OutputRefText({ view, className }: { view: OutputRefView; className?: s
 
 function ErrorResultView({ message, className }: { message: string; className?: string }) {
   return (
-    <div className={cn("space-y-1", className)}>
-      <span className="font-medium text-destructive">Error</span>
-      <pre className="whitespace-pre-wrap break-words rounded-md border border-destructive/20 bg-destructive-subtle p-2 font-mono text-destructive">
+    <div className={cn("stg:space-y-1", className)}>
+      <span className="stg:font-medium stg:text-destructive">Error</span>
+      <pre className="stg:whitespace-pre-wrap stg:break-words stg:rounded-md stg:border stg:border-destructive/20 stg:bg-destructive-subtle stg:p-2 stg:font-mono stg:text-destructive">
         {message}
       </pre>
     </div>

package/src/execution/SessionVariablesInput.tsx

@@ -76,25 +76,25 @@ export function SessionVariablesInput({
 
   return (
     <div
-      className={cn("w-80 space-y-3", className)}
+      className={cn("stg:w-80 stg:space-y-3", className)}
       aria-label="Session variables"
     >
       {/* Header */}
-      <div className="space-y-0.5">
-        <h3 className="text-xs font-medium text-foreground">
+      <div className="stg:space-y-0.5">
+        <h3 className="stg:text-xs stg:font-medium stg:text-foreground">
           Session variables
         </h3>
-        <p className="text-[0.65rem] text-muted-foreground">
+        <p className="stg:text-[0.65rem] stg:text-muted-foreground">
           Additional environment variables for this session.
         </p>
       </div>
 
       {/* Entries */}
       {sessionVariables.entries.length > 0 ? (
-        <div className="relative">
+        <div className="stg:relative">
           {entries.canScrollUp && <ScrollFade position="top" />}
 
-          <div ref={entries.scrollRef} className="max-h-64 space-y-2.5 overflow-y-auto">
+          <div ref={entries.scrollRef} className="stg:max-h-64 stg:space-y-2.5 stg:overflow-y-auto">
             {sessionVariables.entries.map((entry) => {
               const isDuplicate = duplicateKeys.has(entry.key.trim());
 
@@ -123,7 +123,7 @@ export function SessionVariablesInput({
           {entries.canScrollDown && <ScrollFade position="bottom" />}
         </div>
       ) : (
-        <p className="py-2 text-center text-[0.65rem] text-muted-foreground-subtle">
+        <p className="stg:py-2 stg:text-center stg:text-[0.65rem] stg:text-muted-foreground-subtle">
           No variables added.
         </p>
       )}
@@ -134,10 +134,10 @@ export function SessionVariablesInput({
         onClick={sessionVariables.addEntry}
         disabled={disabled}
         className={cn(
-          "inline-flex w-full items-center justify-center gap-1 rounded-md py-1.5 text-xs",
-          "border border-dashed border-border text-muted-foreground",
-          "hover:border-border hover:bg-accent-hover hover:text-foreground",
-          "disabled:pointer-events-none disabled:opacity-50",
+          "stg:inline-flex stg:w-full stg:items-center stg:justify-center stg:gap-1 stg:rounded-md stg:py-1.5 stg:text-xs",
+          "stg:border stg:border-dashed stg:border-border stg:text-muted-foreground",
+          "stg:hover:border-border stg:hover:bg-accent-hover stg:hover:text-foreground",
+          "stg:disabled:pointer-events-none stg:disabled:opacity-50",
         )}
       >
         <PlusIcon />
@@ -179,9 +179,9 @@ function VariableEntryRow({
   const removeLabel = entryKey.trim() || "entry";
 
   return (
-    <div className="space-y-1.5">
+    <div className="stg:space-y-1.5">
       {/* Key row */}
-      <div className="flex items-center gap-1.5">
+      <div className="stg:flex stg:items-center stg:gap-1.5">
         <input
           id={keyInputId}
           type="text"
@@ -193,11 +193,11 @@ function VariableEntryRow({
           spellCheck={false}
           aria-label="Variable name"
           className={cn(
-            "min-w-0 flex-1 rounded-md border border-input bg-background px-2.5 py-1.5 font-mono text-xs text-foreground",
-            "placeholder:text-muted-foreground-faint",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            "disabled:pointer-events-none disabled:opacity-50",
-            isDuplicate && "border-warning",
+            "stg:min-w-0 stg:flex-1 stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:font-mono stg:text-xs stg:text-foreground",
+            "stg:placeholder:text-muted-foreground-faint",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+            isDuplicate && "stg:border-warning",
           )}
         />
 
@@ -211,7 +211,7 @@ function VariableEntryRow({
           type="button"
           onClick={() => onRemove(id)}
           disabled={disabled}
-          className="shrink-0 rounded p-0.5 text-muted-foreground hover:text-destructive disabled:pointer-events-none disabled:opacity-50"
+          className="stg:shrink-0 stg:rounded stg:p-0.5 stg:text-muted-foreground stg:hover:text-destructive stg:disabled:pointer-events-none stg:disabled:opacity-50"
           aria-label={`Remove ${removeLabel}`}
         >
           <XIcon />
@@ -219,7 +219,7 @@ function VariableEntryRow({
       </div>
 
       {/* Value row */}
-      <div className="relative">
+      <div className="stg:relative">
         <input
           id={valInputId}
           type={isSecret ? "password" : "text"}
@@ -230,16 +230,16 @@ function VariableEntryRow({
           autoComplete="off"
           aria-label={`Variable value${entryKey.trim() ? ` for ${entryKey.trim()}` : ""}`}
           className={cn(
-            "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
-            "placeholder:text-muted-foreground-faint",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            "disabled:pointer-events-none disabled:opacity-50",
+            "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground",
+            "stg:placeholder:text-muted-foreground-faint",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
           )}
         />
       </div>
 
       {/* Save-for-future toggle */}
-      <div className="flex items-center gap-1.5">
+      <div className="stg:flex stg:items-center stg:gap-1.5">
         <button
           type="button"
           role="switch"
@@ -248,34 +248,34 @@ function VariableEntryRow({
           disabled={disabled}
           onClick={() => onUpdate(id, { saveForFuture: !saveForFuture })}
           className={cn(
-            "relative inline-flex h-3.5 w-6 shrink-0 cursor-pointer rounded-full transition-colors",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-            "disabled:pointer-events-none disabled:opacity-50",
-            saveForFuture ? "bg-primary" : "bg-input",
+            "stg:relative stg:inline-flex stg:h-3.5 stg:w-6 stg:shrink-0 stg:cursor-pointer stg:rounded-full stg:transition-colors",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:ring-offset-1",
+            "stg:disabled:pointer-events-none stg:disabled:opacity-50",
+            saveForFuture ? "stg:bg-primary" : "stg:bg-input",
           )}
         >
           <span
             className={cn(
-              "pointer-events-none block h-2.5 w-2.5 translate-y-0.5 rounded-full bg-background shadow-sm ring-0 transition-transform",
-              saveForFuture ? "translate-x-3" : "translate-x-0.5",
+              "stg:pointer-events-none stg:block stg:h-2.5 stg:w-2.5 stg:translate-y-0.5 stg:rounded-full stg:bg-background stg:shadow-sm stg:ring-0 stg:transition-transform",
+              saveForFuture ? "stg:translate-x-3" : "stg:translate-x-0.5",
             )}
           />
         </button>
-        <span className="text-[0.6rem] text-muted-foreground">
+        <span className="stg:text-[0.6rem] stg:text-muted-foreground">
           {saveForFuture ? "Save for future runs" : "This run only"}
         </span>
       </div>
 
       {/* Required-by indicator */}
       {requiredBy && requiredBy.length > 0 && (
-        <p className="text-[0.55rem] text-primary-muted">
+        <p className="stg:text-[0.55rem] stg:text-primary-muted">
           Used by: {requiredBy.join(", ")}
         </p>
       )}
 
       {/* Duplicate warning */}
       {isDuplicate && (
-        <p className="text-[0.6rem] text-warning" role="alert">
+        <p className="stg:text-[0.6rem] stg:text-warning" role="alert">
           Duplicate key — last value wins.
         </p>
       )}
@@ -305,11 +305,11 @@ function SecretToggle({
       disabled={disabled}
       onClick={() => onChange(!checked)}
       className={cn(
-        "inline-flex shrink-0 items-center gap-0.5 rounded-md px-1.5 py-1 text-[0.55rem] font-medium uppercase tracking-wider transition-colors",
-        "disabled:pointer-events-none disabled:opacity-50",
+        "stg:inline-flex stg:shrink-0 stg:items-center stg:gap-0.5 stg:rounded-md stg:px-1.5 stg:py-1 stg:text-[0.55rem] stg:font-medium stg:uppercase stg:tracking-wider stg:transition-colors",
+        "stg:disabled:pointer-events-none stg:disabled:opacity-50",
         checked
-          ? "bg-primary-subtle text-primary"
-          : "bg-muted-subtle text-muted-foreground hover:bg-muted",
+          ? "stg:bg-primary-subtle stg:text-primary"
+          : "stg:bg-muted-subtle stg:text-muted-foreground stg:hover:bg-muted",
       )}
     >
       <LockIcon />

package/src/execution/SetupProgress.tsx

@@ -142,10 +142,10 @@ export const SetupProgress = memo(function SetupProgress({
     <div
       role="status"
       aria-label={currentMessage}
-      className={cn("flex items-center gap-2.5 px-4 py-2", className)}
+      className={cn("stg:flex stg:items-center stg:gap-2.5 stg:px-4 stg:py-2", className)}
     >
       <PulseIndicator />
-      <span className="text-sm text-muted-foreground animate-in fade-in duration-300">
+      <span className="stg:text-sm stg:text-muted-foreground stg:animate-in stg:fade-in stg:duration-300">
         {currentMessage}
       </span>
     </div>
@@ -154,9 +154,9 @@ export const SetupProgress = memo(function SetupProgress({
 
 function PulseIndicator() {
   return (
-    <span className="relative flex h-2 w-2 shrink-0" aria-hidden="true">
-      <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-muted-foreground opacity-75" />
-      <span className="relative inline-flex h-2 w-2 rounded-full bg-muted-foreground" />
+    <span className="stg:relative stg:flex stg:h-2 stg:w-2 stg:shrink-0" aria-hidden="true">
+      <span className="stg:absolute stg:inline-flex stg:h-full stg:w-full stg:animate-ping stg:rounded-full stg:bg-muted-foreground stg:opacity-75" />
+      <span className="stg:relative stg:inline-flex stg:h-2 stg:w-2 stg:rounded-full stg:bg-muted-foreground" />
     </span>
   );
 }