@stigmer/react 3.9.0 → 3.11.0

package/src/workspace/WorkspaceEditor.tsx

@@ -137,11 +137,11 @@ export function WorkspaceEditor({
 
   if (activePanel === "github" && enableGitHub) {
     return (
-      <div className={cn("space-y-2", className)}>
+      <div className={cn("stg:space-y-2", className)}>
         <button
           type="button"
           onClick={goBack}
-          className="inline-flex items-center gap-1 rounded-sm text-[0.65rem] text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="stg:inline-flex stg:items-center stg:gap-1 stg:rounded-sm stg:text-[0.65rem] 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"
         >
           <ChevronLeftIcon />
           Back
@@ -181,31 +181,31 @@ export function WorkspaceEditor({
   // ---------------------------------------------------------------------------
 
   return (
-    <div className={cn("space-y-2", className)}>
+    <div className={cn("stg:space-y-2", className)}>
       {/* Entry list */}
       {workspace.entries.length > 0 && (
-        <div className="relative">
+        <div className="stg:relative">
           {entryList.canScrollUp && <ScrollFade position="top" />}
 
-          <div ref={entryList.scrollRef} className="max-h-28 space-y-1 overflow-y-auto">
+          <div ref={entryList.scrollRef} className="stg:max-h-28 stg:space-y-1 stg:overflow-y-auto">
             {workspace.entries.map((entry) => (
               <div
                 key={entry.id}
-                className="flex items-center gap-2 rounded-md border border-border bg-muted-faint px-2.5 py-1.5 text-xs"
+                className="stg:flex stg:items-center stg:gap-2 stg:rounded-md stg:border stg:border-border stg:bg-muted-faint stg:px-2.5 stg:py-1.5 stg:text-xs"
               >
                 {TYPE_LABELS[entry.type] ? (
-                  <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[0.65rem] text-muted-foreground">
+                  <span className="stg:shrink-0 stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:text-[0.65rem] stg:text-muted-foreground">
                     {TYPE_LABELS[entry.type]}
                   </span>
                 ) : (
-                  <span className="shrink-0 text-muted-foreground">
+                  <span className="stg:shrink-0 stg:text-muted-foreground">
                     <FolderIcon />
                   </span>
                 )}
                 <span
                   className={cn(
-                    "min-w-0 flex-1 truncate text-foreground",
-                    entry.type === "local" && "[direction:rtl] text-left",
+                    "stg:min-w-0 stg:flex-1 stg:truncate stg:text-foreground",
+                    entry.type === "local" && "stg:[direction:rtl] stg:text-left",
                   )}
                   title={entry.name}
                 >
@@ -215,7 +215,7 @@ export function WorkspaceEditor({
                   type="button"
                   onClick={() => workspace.remove(entry.id)}
                   disabled={disabled}
-                  className="shrink-0 rounded-sm text-muted-foreground transition-colors hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none"
+                  className="stg:shrink-0 stg:rounded-sm stg:text-muted-foreground stg:transition-colors stg:hover:text-destructive stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:disabled:pointer-events-none"
                   aria-label={`Remove ${entry.name}`}
                 >
                   <XIcon />
@@ -229,7 +229,7 @@ export function WorkspaceEditor({
       )}
 
       {/* Action items */}
-      <div className="space-y-0.5">
+      <div className="stg:space-y-0.5">
         {canBrowse && onBrowseLocalFolder && (
           <button
             type="button"
@@ -238,10 +238,10 @@ export function WorkspaceEditor({
               if (path) workspace.addLocalPath(path);
             }}
             disabled={disabled}
-            className="flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-xs text-foreground transition-colors hover:bg-accent-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40"
+            className="stg:flex stg:w-full stg:items-center stg:gap-2 stg:rounded-md stg:px-2.5 stg:py-2 stg:text-xs 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 stg:disabled:pointer-events-none stg:disabled:opacity-40"
           >
             <FolderIcon />
-            <span className="flex-1 text-left">Browse Folder</span>
+            <span className="stg:flex-1 stg:text-left">Browse Folder</span>
           </button>
         )}
         {enableGitHub && (
@@ -249,10 +249,10 @@ export function WorkspaceEditor({
             type="button"
             onClick={() => setActivePanel("github")}
             disabled={disabled}
-            className="flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-xs text-foreground transition-colors hover:bg-accent-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-40"
+            className="stg:flex stg:w-full stg:items-center stg:gap-2 stg:rounded-md stg:px-2.5 stg:py-2 stg:text-xs 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 stg:disabled:pointer-events-none stg:disabled:opacity-40"
           >
             <GitHubIcon />
-            <span className="flex-1 text-left">Connect GitHub</span>
+            <span className="stg:flex-1 stg:text-left">Connect GitHub</span>
             <ChevronRightIcon />
           </button>
         )}
@@ -276,7 +276,7 @@ function GitHubPanel({
 }) {
   if (connection.isLoading) {
     return (
-      <div className="py-4 text-center text-xs text-muted-foreground">
+      <div className="stg:py-4 stg:text-center stg:text-xs stg:text-muted-foreground">
         Checking GitHub connection...
       </div>
     );
@@ -290,32 +290,32 @@ function GitHubPanel({
     const redirectUri = `${window.location.origin}/auth/github/callback`;
 
     return (
-      <div className="space-y-3 text-center">
-        <div className="space-y-1">
-          <p className="text-xs font-medium text-foreground">
+      <div className="stg:space-y-3 stg:text-center">
+        <div className="stg:space-y-1">
+          <p className="stg:text-xs stg:font-medium stg:text-foreground">
             Choose a GitHub repo to add to workspace
           </p>
-          <p className="text-[0.65rem] text-muted-foreground">
+          <p className="stg:text-[0.65rem] stg:text-muted-foreground">
             Connect your GitHub account so the agent can access your repos
           </p>
         </div>
         {connection.popupBlocked ? (
-          <div className="space-y-2">
-            <p className="text-[0.65rem] text-destructive">
+          <div className="stg:space-y-2">
+            <p className="stg:text-[0.65rem] stg:text-destructive">
               Popup was blocked by your browser.
             </p>
-            <div className="flex items-center justify-center gap-2">
+            <div className="stg:flex stg:items-center stg:justify-center stg:gap-2">
               <button
                 type="button"
                 onClick={() => connection.connect(redirectUri, { popup: true })}
-                className="rounded-md px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs 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"
               >
                 Try again
               </button>
               <button
                 type="button"
                 onClick={() => connection.connect(redirectUri)}
-                className="inline-flex items-center gap-2 rounded-md bg-foreground px-3 py-1.5 text-xs text-background transition-colors hover:bg-foreground-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                className="stg:inline-flex stg:items-center stg:gap-2 stg:rounded-md stg:bg-foreground stg:px-3 stg:py-1.5 stg:text-xs stg:text-background stg:transition-colors stg:hover:bg-foreground-hover stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
               >
                 <GitHubIcon />
                 <span>Continue with redirect</span>
@@ -326,7 +326,7 @@ function GitHubPanel({
           <button
             type="button"
             onClick={() => connection.connect(redirectUri, { popup: true })}
-            className="inline-flex items-center gap-2 rounded-md bg-foreground px-3 py-1.5 text-xs text-background transition-colors hover:bg-foreground-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="stg:inline-flex stg:items-center stg:gap-2 stg:rounded-md stg:bg-foreground stg:px-3 stg:py-1.5 stg:text-xs stg:text-background stg:transition-colors stg:hover:bg-foreground-hover stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
           >
             <GitHubIcon />
             <span>Connect GitHub</span>
@@ -337,24 +337,24 @@ function GitHubPanel({
   }
 
   return (
-    <div className="space-y-2">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2 text-xs">
+    <div className="stg:space-y-2">
+      <div className="stg:flex stg:items-center stg:justify-between">
+        <div className="stg:flex stg:items-center stg:gap-2 stg:text-xs">
           {connection.user?.avatarUrl && (
             <img
               src={connection.user.avatarUrl}
               alt=""
-              className="h-4 w-4 rounded-full"
+              className="stg:h-4 stg:w-4 stg:rounded-full"
             />
           )}
-          <span className="text-muted-foreground">
+          <span className="stg:text-muted-foreground">
             {connection.user?.login ?? "Connected"}
           </span>
         </div>
         <button
           type="button"
           onClick={connection.disconnect}
-          className="rounded-sm text-[0.6rem] text-muted-foreground transition-colors hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="stg:rounded-sm stg:text-[0.6rem] stg:text-muted-foreground stg:transition-colors stg:hover:text-destructive stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
         >
           Disconnect
         </button>
@@ -390,7 +390,7 @@ function ManualGitPanel({
   onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void;
 }) {
   return (
-    <div className="space-y-2">
+    <div className="stg:space-y-2">
       <input
         type="url"
         aria-label="Git repository URL"
@@ -398,7 +398,7 @@ function ManualGitPanel({
         value={url}
         onChange={(e) => onUrlChange(e.target.value)}
         onKeyDown={onKeyDown}
-        className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        className="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 stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
         autoFocus
       />
       <input
@@ -408,13 +408,13 @@ function ManualGitPanel({
         value={branch}
         onChange={(e) => onBranchChange(e.target.value)}
         onKeyDown={onKeyDown}
-        className="w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        className="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 stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring"
       />
-      <div className="flex justify-end gap-2">
+      <div className="stg:flex stg:justify-end stg:gap-2">
         <button
           type="button"
           onClick={onCancel}
-          className="rounded-md px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="stg:rounded-md stg:px-2.5 stg:py-1 stg:text-xs 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"
         >
           Cancel
         </button>
@@ -422,7 +422,7 @@ function ManualGitPanel({
           type="button"
           onClick={onAdd}
           disabled={!url.trim()}
-          className="rounded-md bg-primary px-2.5 py-1 text-xs text-primary-foreground transition-colors hover:bg-primary-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40"
+          className="stg:rounded-md stg:bg-primary stg:px-2.5 stg:py-1 stg:text-xs stg:text-primary-foreground stg:transition-colors stg:hover:bg-primary-hover stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:disabled:opacity-40"
         >
           Add
         </button>
@@ -446,9 +446,9 @@ function GitHubConnectingState({ onCancel }: { onCancel: () => void }) {
   }, []);
 
   return (
-    <div className="space-y-3 py-4 text-center">
-      <div className="mx-auto h-5 w-5 animate-spin rounded-full border-2 border-muted-foreground border-t-foreground" />
-      <p className="text-xs text-muted-foreground">
+    <div className="stg:space-y-3 stg:py-4 stg:text-center">
+      <div className="stg:mx-auto stg:h-5 stg:w-5 stg:animate-spin stg:rounded-full stg:border-2 stg:border-muted-foreground stg:border-t-foreground" />
+      <p className="stg:text-xs stg:text-muted-foreground">
         {timedOut
           ? "Taking longer than expected..."
           : "Connecting to GitHub..."}
@@ -456,7 +456,7 @@ function GitHubConnectingState({ onCancel }: { onCancel: () => void }) {
       <button
         type="button"
         onClick={onCancel}
-        className="rounded-sm text-[0.65rem] text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        className="stg:rounded-sm stg:text-[0.65rem] 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"
       >
         Cancel
       </button>
@@ -478,7 +478,7 @@ function ChevronLeftIcon() {
 
 function ChevronRightIcon() {
   return (
-    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="text-muted-foreground">
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="stg:text-muted-foreground">
       <path d="M4.5 2.5L8 6L4.5 9.5" />
     </svg>
   );

package/src/workspace/WorkspaceFileReader.ts

@@ -12,12 +12,57 @@ import type { WorkspaceEntry } from "./useWorkspaceEntries.js";
  */
 export const MAX_WORKSPACE_FILE_READ_BYTES = 1_048_576; // 1 MiB
 
+/**
+ * Byte ceiling for delivering a workspace *image* in full (stigmer/stigmer#379).
+ *
+ * Deliberately larger than {@link MAX_WORKSPACE_FILE_READ_BYTES}: text
+ * degrades gracefully when truncated, an image does not — a partial PNG is
+ * useless, so readers deliver image bytes whole or not at all. 10 MiB matches
+ * the GitHub reader's existing blob-fetch ceiling; the desktop native reader
+ * mirrors it as `MAX_IMAGE_READ_BYTES` in `src-tauri/src/workspace.rs`.
+ */
+export const MAX_WORKSPACE_IMAGE_READ_BYTES = 10 * 1024 * 1024; // 10 MiB
+
+/**
+ * Raster image formats the viewer renders inline, keyed by file extension.
+ *
+ * SVG is deliberately absent: it decodes as UTF-8 and flows through the text
+ * path, where a workspace browser wants it — it is source to inspect, not a
+ * picture (matching editor convention). The desktop native reader mirrors
+ * this list as `IMAGE_EXTENSIONS` in `src-tauri/src/workspace.rs`.
+ */
+const IMAGE_MIME_BY_EXTENSION: Readonly<Record<string, string>> = {
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  gif: "image/gif",
+  webp: "image/webp",
+  avif: "image/avif",
+  bmp: "image/bmp",
+  ico: "image/x-icon",
+};
+
+/**
+ * MIME type for a workspace path the viewer can render as an inline image,
+ * or `null` for everything else. The single policy point shared by readers
+ * (deciding whether to attach {@link WorkspaceFileContent.bytes}) and the
+ * viewer (deciding whether to render an image arm) — extension-based, since
+ * workspace reads have no server-provided content type.
+ */
+export function workspaceImageMimeType(path: string): string | null {
+  const dot = path.lastIndexOf(".");
+  if (dot === -1) return null;
+  const ext = path.slice(dot + 1).toLowerCase();
+  return IMAGE_MIME_BY_EXTENSION[ext] ?? null;
+}
+
 /**
  * Decoded content (plus metadata) for a single workspace file.
  *
  * `text` is `null` whenever the bytes are not displayable as UTF-8 — either
  * binary (`isBinary`) or an undecodable byte sequence (`encoding: "unknown"`).
- * The renderer uses `isBinary`/`text === null` for its fallback state.
+ * The renderer uses `isBinary`/`text === null` for its fallback state, except
+ * when `bytes` carries a renderable image.
  */
 export interface WorkspaceFileContent {
   /** Decoded UTF-8 text, or `null` when binary or undecodable. */
@@ -30,6 +75,15 @@ export interface WorkspaceFileContent {
   readonly encoding: "utf-8" | "base64" | "none" | "unknown";
   /** `true` when `text` holds only the first {@link MAX_WORKSPACE_FILE_READ_BYTES} bytes. */
   readonly truncated?: boolean;
+  /**
+   * The complete raw bytes, populated **only** for binary files that are
+   * renderable images ({@link workspaceImageMimeType}) within
+   * {@link MAX_WORKSPACE_IMAGE_READ_BYTES} — never a channel for arbitrary
+   * binaries, and never partial (a truncated image cannot render). Optional
+   * and additive: readers that predate it remain valid, and the viewer falls
+   * back to the binary notice when it is absent (stigmer/stigmer#379).
+   */
+  readonly bytes?: Uint8Array;
 }
 
 /**

package/src/workspace/WorkspaceFileSearch.tsx

@@ -149,11 +149,11 @@ export function WorkspaceFileSearch({
             : `${flatResults.length} matching ${flatResults.length === 1 ? "file" : "files"}.`;
 
   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}
@@ -170,9 +170,9 @@ export function WorkspaceFileSearch({
           placeholder="Search files by name…"
           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 workspace files by name"
         />
@@ -183,7 +183,7 @@ export function WorkspaceFileSearch({
               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 />
@@ -191,7 +191,7 @@ export function WorkspaceFileSearch({
         )}
       </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>File search isn&rsquo;t available here.</MessageState>
         ) : trimmed.length === 0 ? (
@@ -210,7 +210,7 @@ export function WorkspaceFileSearch({
               id={listboxId}
               role="listbox"
               aria-label="Search results"
-              className="py-0.5"
+              className="stg:py-0.5"
             >
               {renderRows({
                 groups,
@@ -222,7 +222,7 @@ export function WorkspaceFileSearch({
               })}
             </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>
@@ -331,13 +331,13 @@ function ResultRow({
       aria-current={isOpen ? "true" : undefined}
       onClick={onOpen}
       className={cn(
-        "flex cursor-pointer items-baseline gap-1.5 px-3 py-1 text-xs transition-colors",
-        isFocused && "bg-muted",
-        isOpen && "bg-muted font-medium text-foreground",
-        !isFocused && !isOpen && "hover:bg-muted",
+        "stg:flex stg:cursor-pointer stg:items-baseline stg:gap-1.5 stg:px-3 stg:py-1 stg:text-xs stg:transition-colors",
+        isFocused && "stg:bg-muted",
+        isOpen && "stg:bg-muted stg:font-medium stg:text-foreground",
+        !isFocused && !isOpen && "stg:hover:bg-muted",
       )}
     >
-      <span className="truncate text-foreground">
+      <span className="stg:truncate stg:text-foreground">
         <HighlightedPath
           text={basename}
           offset={lastSlash + 1}
@@ -346,7 +346,7 @@ function ResultRow({
         />
       </span>
       {dir && (
-        <span className="truncate text-[0.65rem] text-muted-foreground">
+        <span className="stg:truncate stg:text-[0.65rem] stg:text-muted-foreground">
           <HighlightedPath
             text={dir}
             offset={0}
@@ -383,7 +383,7 @@ function HighlightedPath({
   return (
     <>
       {text.slice(0, localStart)}
-      <span className="font-semibold text-foreground">
+      <span className="stg:font-semibold stg:text-foreground">
         {text.slice(localStart, localEnd)}
       </span>
       {text.slice(localEnd)}
@@ -395,7 +395,7 @@ function GroupHeader({ 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>
@@ -413,8 +413,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}
@@ -424,7 +424,7 @@ function GroupNotice({
 
 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>
   );
@@ -436,7 +436,7 @@ function MessageState({ children }: { readonly children: React.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>

package/src/workspace/WorkspaceSummary.tsx

@@ -41,12 +41,12 @@ export function WorkspaceSummary({
   if (entries.length === 0) return null;
 
   return (
-    <ul className={cn("space-y-1.5", className)} aria-label="Workspace entries">
+    <ul className={cn("stg:space-y-1.5", className)} aria-label="Workspace entries">
       {entries.map((entry) => (
-        <li key={entry.name} className="text-xs">
-          <div className="flex items-center gap-1.5 font-medium">
+        <li key={entry.name} className="stg:text-xs">
+          <div className="stg:flex stg:items-center stg:gap-1.5 stg:font-medium">
             <FolderIcon />
-            <span className="truncate">{entry.name}</span>
+            <span className="stg:truncate">{entry.name}</span>
           </div>
           <SourceLabel source={entry.source} />
         </li>
@@ -69,7 +69,7 @@ function SourceLabel({ source }: { source?: WorkspaceSource }) {
       .replace(/\.git$/, "");
     return (
       <span
-        className="ml-5 block truncate text-muted-foreground"
+        className="stg:ml-5 stg:block stg:truncate stg:text-muted-foreground"
         title={url}
       >
         {short}
@@ -81,7 +81,7 @@ function SourceLabel({ source }: { source?: WorkspaceSource }) {
     const path = source.source.value.path;
     return (
       <span
-        className="ml-5 block truncate font-mono text-muted-foreground"
+        className="stg:ml-5 stg:block stg:truncate stg:font-mono stg:text-muted-foreground"
         title={path}
       >
         {path}