@stigmer/react 3.9.0 → 3.11.0

package/src/workspace/ExplorerTree.tsx

@@ -45,7 +45,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,25 +89,25 @@ function ExplorerRoot({
   });
 
   return (
-    <div className="flex flex-col">
-      <div className="group/root flex items-stretch">
+    <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(
-            "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",
+            "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="text-[10px] text-muted-foreground-subtle"
+            className="stg:text-[10px] stg:text-muted-foreground-subtle"
           >
             {expanded ? "▼" : "▶"}
           </span>
-          <span className="truncate">{entry.name}</span>
+          <span className="stg:truncate">{entry.name}</span>
         </button>
         {onRemove && (
           <button
@@ -116,9 +116,9 @@ function ExplorerRoot({
             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",
+              "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 />
@@ -174,14 +174,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 +192,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 +207,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 +232,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

@@ -5,6 +5,7 @@ import {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
   type KeyboardEvent,
@@ -15,15 +16,19 @@ import {
   FileChangeCaptureLevel,
   FileChangeType,
 } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/enum_pb";
+import { AttachmentImageLightbox } from "../attachment/AttachmentImageLightbox.js";
+import { useObjectUrl } from "../attachment/useObjectUrl.js";
 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 type { RevealTarget } from "../internal/useRevealLine.js";
 import type { SelectedWorkspaceFile } from "../internal/store/workspace-file-selection-store.js";
 import { useWorkspaceFileContent } from "./useWorkspaceFileContent.js";
 import type { WorkspaceEntry } from "./useWorkspaceEntries.js";
 import {
   WorkspaceFileNotFoundError,
+  workspaceImageMimeType,
   type WorkspaceFileReader,
 } from "./WorkspaceFileReader.js";
 
@@ -180,7 +185,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 && (
@@ -191,7 +196,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>
@@ -205,7 +210,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 && (
@@ -219,9 +224,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>
         ) : (
@@ -288,11 +293,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;
@@ -309,11 +314,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}
@@ -394,15 +399,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>
@@ -412,13 +417,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>
@@ -431,6 +436,23 @@ function FileViewerBody({
     return <MessageState>Content not available for preview.</MessageState>;
   }
 
+  // A binary that is a renderable image, delivered whole by the reader,
+  // shows the picture instead of the binary notice (stigmer/stigmer#379).
+  // The MIME gate re-derives from the path: bytes without a recognized image
+  // extension still fall through to the notice.
+  const imageMime = workspaceImageMimeType(basename);
+  if (content.bytes && imageMime) {
+    return (
+      <ImageFileContent
+        bytes={content.bytes}
+        mime={imageMime}
+        basename={basename}
+        size={content.size}
+        change={change}
+      />
+    );
+  }
+
   if (content.isBinary) {
     return (
       <MessageState>
@@ -455,7 +477,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>
       )}
@@ -469,6 +491,93 @@ function FileViewerBody({
   );
 }
 
+/**
+ * Inline image rendering for a workspace file whose reader delivered whole
+ * image bytes (stigmer/stigmer#379). The bytes become an object URL for the
+ * component's lifetime; clicking the image opens the shared
+ * {@link AttachmentImageLightbox} at full size — the same viewer attachment
+ * chips and conversation media use, so pictures behave identically across
+ * surfaces. If the browser cannot decode the bytes (a corrupt file behind an
+ * image extension), the component degrades to the binary notice — never a
+ * broken-image glyph.
+ */
+function ImageFileContent({
+  bytes,
+  mime,
+  basename,
+  size,
+  change,
+}: {
+  readonly bytes: Uint8Array;
+  readonly mime: string;
+  readonly basename: string;
+  readonly size: number;
+  readonly change?: FileChange;
+}) {
+  // Memo (not effect) is correct for the Blob — it holds no OS resource; the
+  // object URL over it is effect-managed inside useObjectUrl.
+  const blob = useMemo(() => new Blob([bytes as BlobPart], { type: mime }), [bytes, mime]);
+  const url = useObjectUrl(blob);
+  const [loadFailed, setLoadFailed] = useState(false);
+  const [lightboxOpen, setLightboxOpen] = useState(false);
+
+  if (loadFailed) {
+    return (
+      <MessageState>
+        Binary file — not shown{size ? ` (${formatBytes(size)})` : ""}.
+      </MessageState>
+    );
+  }
+
+  return (
+    <>
+      {change && (
+        <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="stg:flex stg:flex-col stg:items-center stg:gap-2 stg:p-4">
+        {url ? (
+          // 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,
+              "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="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="stg:h-48 stg:w-72 stg:max-w-full stg:animate-pulse stg:rounded-md stg:bg-muted"
+            aria-hidden="true"
+          />
+        )}
+        <p className="stg:text-[0.65rem] stg:tabular-nums stg:text-muted-foreground">
+          {mime}
+          {size ? ` · ${formatBytes(size)}` : ""}
+        </p>
+      </div>
+      <AttachmentImageLightbox
+        src={url}
+        filename={basename}
+        open={lightboxOpen}
+        onClose={() => setLightboxOpen(false)}
+      />
+    </>
+  );
+}
+
 /**
  * The captured-content fallback: renders a change's after-side text (the
  * bytes the session already holds — inline or offloaded to artifact storage)
@@ -500,7 +609,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
@@ -516,14 +625,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"
         />
@@ -548,14 +657,14 @@ 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}>
+      <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>
         {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 && (
@@ -563,7 +672,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>
@@ -573,7 +682,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>
@@ -584,7 +693,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>
   );
@@ -607,7 +716,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>
@@ -634,7 +743,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

@@ -58,15 +58,15 @@ export function PanelChip({ isOpen, onToggle, badgeCount }: PanelChipProps) {
       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",
+        "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="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"
+          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>

package/src/workspace/WorkspaceContentSearch.tsx

@@ -179,11 +179,11 @@ export function WorkspaceContentSearch({
               : `${totalMatches} ${totalMatches === 1 ? "match" : "matches"}.`;
 
   return (
-    <div className={cn("flex h-full flex-col", className)}>
-      <div role="status" aria-live="polite" className="sr-only">
+    <div className={cn("stg:flex stg:h-full stg:flex-col", className)}>
+      <div role="status" aria-live="polite" className="stg:sr-only">
         {statusMessage}
       </div>
-      <div className="flex items-center gap-1.5 border-b border-border px-2 py-1.5">
+      <div className="stg:flex stg:items-center stg:gap-1.5 stg:border-b stg:border-border stg:px-2 stg:py-1.5">
         <SearchIcon />
         <input
           ref={inputRef}
@@ -198,9 +198,9 @@ export function WorkspaceContentSearch({
           placeholder="Search text in files…"
           disabled={isUnsupported}
           className={cn(
-            "min-w-0 flex-1 bg-transparent text-xs text-foreground",
-            "placeholder:text-muted-foreground",
-            "focus-visible:outline-none disabled:cursor-not-allowed",
+            "stg:min-w-0 stg:flex-1 stg:bg-transparent stg:text-xs stg:text-foreground",
+            "stg:placeholder:text-muted-foreground",
+            "stg:focus-visible:outline-none stg:disabled:cursor-not-allowed",
           )}
           aria-label="Search text in workspace files"
         />
@@ -212,7 +212,7 @@ export function WorkspaceContentSearch({
               setQuery("");
               inputRef.current?.focus();
             }}
-            className="shrink-0 text-muted-foreground transition-colors hover:text-foreground"
+            className="stg:shrink-0 stg:text-muted-foreground stg:transition-colors stg:hover:text-foreground"
             aria-label="Clear search"
           >
             <ClearIcon />
@@ -220,7 +220,7 @@ export function WorkspaceContentSearch({
         )}
       </div>
 
-      <div className="min-h-0 flex-1 overflow-y-auto">
+      <div className="stg:min-h-0 stg:flex-1 stg:overflow-y-auto">
         {isUnsupported ? (
           <MessageState>Text search isn&rsquo;t available here.</MessageState>
         ) : trimmed.length === 0 ? (
@@ -235,7 +235,7 @@ export function WorkspaceContentSearch({
           <MessageState>No files containing &ldquo;{trimmed}&rdquo;.</MessageState>
         ) : (
           <>
-            <ul id={listboxId} role="listbox" aria-label="Search results" className="py-0.5">
+            <ul id={listboxId} role="listbox" aria-label="Search results" className="stg:py-0.5">
               {renderRows({
                 groups,
                 query: trimmed,
@@ -247,7 +247,7 @@ export function WorkspaceContentSearch({
               })}
             </ul>
             {totalMatches > flatResults.length && (
-              <p className="border-t border-border px-3 py-1.5 text-[0.65rem] text-muted-foreground">
+              <p className="stg:border-t stg:border-border stg:px-3 stg:py-1.5 stg:text-[0.65rem] stg:text-muted-foreground">
                 Showing the first {flatResults.length} of {totalMatches} matches — refine
                 your search to narrow the list.
               </p>
@@ -369,16 +369,16 @@ function LineRow({
       aria-current={isOpen ? "true" : undefined}
       onClick={onOpen}
       className={cn(
-        "flex cursor-pointer items-baseline gap-2 py-0.5 pl-6 pr-3 text-xs transition-colors",
-        isFocused && "bg-muted",
-        isOpen && "bg-muted",
-        !isFocused && !isOpen && "hover:bg-muted",
+        "stg:flex stg:cursor-pointer stg:items-baseline stg:gap-2 stg:py-0.5 stg:pl-6 stg:pr-3 stg:text-xs stg:transition-colors",
+        isFocused && "stg:bg-muted",
+        isOpen && "stg:bg-muted",
+        !isFocused && !isOpen && "stg:hover:bg-muted",
       )}
     >
-      <span className="w-8 shrink-0 text-right font-mono text-[0.65rem] tabular-nums text-muted-foreground-subtle">
+      <span className="stg:w-8 stg:shrink-0 stg:text-right stg:font-mono stg:text-[0.65rem] stg:tabular-nums stg:text-muted-foreground-subtle">
         {match.line}
       </span>
-      <span className="min-w-0 flex-1 truncate font-mono text-muted-foreground">
+      <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:font-mono stg:text-muted-foreground">
         <HighlightedPreview text={match.preview} query={query} />
       </span>
     </li>
@@ -405,7 +405,7 @@ function HighlightedPreview({
   ranges.forEach((range, i) => {
     if (range.start > cursor) parts.push(text.slice(cursor, range.start));
     parts.push(
-      <span key={i} className="font-semibold text-foreground">
+      <span key={i} className="stg:font-semibold stg:text-foreground">
         {text.slice(range.start, range.end)}
       </span>,
     );
@@ -420,7 +420,7 @@ function EntryHeader({ name }: { readonly name: string }) {
   return (
     <li
       role="presentation"
-      className="truncate px-3 pb-0.5 pt-2 text-[0.6rem] font-medium uppercase tracking-wide text-muted-foreground"
+      className="stg:truncate stg:px-3 stg:pb-0.5 stg:pt-2 stg:text-[0.6rem] stg:font-medium stg:uppercase stg:tracking-wide stg:text-muted-foreground"
     >
       {name}
     </li>
@@ -435,10 +435,10 @@ function FileHeader({ path }: { readonly path: string }) {
   return (
     <li
       role="presentation"
-      className="flex items-baseline gap-1.5 px-3 pb-0.5 pt-1.5 text-xs"
+      className="stg:flex stg:items-baseline stg:gap-1.5 stg:px-3 stg:pb-0.5 stg:pt-1.5 stg:text-xs"
     >
-      <span className="shrink-0 font-medium text-foreground">{basename}</span>
-      {dir && <span className="truncate text-[0.65rem] text-muted-foreground">{dir}</span>}
+      <span className="stg:shrink-0 stg:font-medium stg:text-foreground">{basename}</span>
+      {dir && <span className="stg:truncate stg:text-[0.65rem] stg:text-muted-foreground">{dir}</span>}
     </li>
   );
 }
@@ -454,8 +454,8 @@ function GroupNotice({
     <li
       role="presentation"
       className={cn(
-        "px-3 py-1 text-[0.65rem]",
-        isError ? "text-destructive" : "text-muted-foreground",
+        "stg:px-3 stg:py-1 stg:text-[0.65rem]",
+        isError ? "stg:text-destructive" : "stg:text-muted-foreground",
       )}
     >
       {children}
@@ -465,7 +465,7 @@ function GroupNotice({
 
 function MessageState({ children }: { readonly children: 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>
   );
@@ -477,7 +477,7 @@ function MessageState({ children }: { readonly children: ReactNode }) {
 
 function SearchIcon() {
   return (
-    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="shrink-0 text-muted-foreground" aria-hidden="true">
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="stg:shrink-0 stg:text-muted-foreground" aria-hidden="true">
       <circle cx="5.25" cy="5.25" r="3.5" />
       <path d="M7.75 7.75L10.5 10.5" />
     </svg>
@@ -496,7 +496,7 @@ function Spinner() {
   return (
     <span
       aria-hidden="true"
-      className="h-3 w-3 shrink-0 animate-spin rounded-full border border-muted-foreground border-t-transparent"
+      className="stg:h-3 stg:w-3 stg:shrink-0 stg:animate-spin stg:rounded-full stg:border stg:border-muted-foreground stg:border-t-transparent"
     />
   );
 }