@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

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"
     />
   );
 }

package/src/workspace/WorkspaceEditor.tsx

@@ -7,6 +7,7 @@ import type { UseGitHubConnectionReturn } from "../github/useGitHubConnection.js
 import { GitHubRepoPicker } from "../github/GitHubRepoPicker.js";
 import { useScrollShadows } from "../internal/useScrollShadows.js";
 import { ScrollFade } from "../internal/ScrollFade.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 
 type ActivePanel = "github" | null;
 
@@ -137,11 +138,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,41 +182,52 @@ 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",
-                  )}
-                  title={entry.name}
-                >
-                  <bdi>{entry.name}</bdi>
-                </span>
+                {/* Not TruncatedText: the <bdi> + rtl-direction pair keeps the
+                    tail of a long local path visible, which a plain text span
+                    cannot reproduce. */}
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <span
+                        className={cn(
+                          "stg:min-w-0 stg:flex-1 stg:truncate stg:text-foreground",
+                          entry.type === "local" && "stg:[direction:rtl] stg:text-left",
+                        )}
+                      />
+                    }
+                  >
+                    <bdi>{entry.name}</bdi>
+                  </TooltipTrigger>
+                  <TooltipContent side="top" className="stg:break-all">
+                    {entry.name}
+                  </TooltipContent>
+                </Tooltip>
                 <button
                   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 +241,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 +250,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 +261,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 +288,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 +302,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 +338,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 +349,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 +402,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 +410,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 +420,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 +434,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 +458,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 +468,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 +490,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/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>