@stigmer/react 3.10.0 → 3.11.0

package/src/execution/MessageEntry.tsx

@@ -172,14 +172,14 @@ function HumanMessage({
       role="article"
       aria-label="User message"
       className={cn(
-        "group relative ms-[20%] rounded-lg bg-muted-subtle px-4 py-3",
+        "stg:group stg:relative stg:ms-[20%] stg:rounded-lg stg:bg-muted-subtle stg:px-4 stg:py-3",
         className,
       )}
     >
       {/* The badge renders only for non-default modes (a "Plan" pill), so
           ordinary Agent turns carry no extra chrome. */}
       {interactionMode !== undefined && (
-        <InteractionModeBadge mode={interactionMode} className="mb-1.5" />
+        <InteractionModeBadge mode={interactionMode} className="stg:mb-1.5" />
       )}
       {/* The evidence a file rode with this turn (#372) — above the prose,
           mirroring the composer's chips-above-input layout. */}
@@ -187,10 +187,10 @@ function HumanMessage({
         <MessageAttachments
           attachments={attachments}
           executionId={executionId}
-          className="mb-2"
+          className="stg:mb-2"
         />
       )}
-      <p className="text-sm text-foreground whitespace-pre-wrap">{content}</p>
+      <p className="stg:text-sm stg:text-foreground stg:whitespace-pre-wrap">{content}</p>
       {onEdit && (
         <button
           type="button"
@@ -198,11 +198,11 @@ function HumanMessage({
           aria-label="Edit message"
           title="Edit"
           className={cn(
-            "absolute -top-2.5 -right-2.5 inline-flex h-7 w-7 items-center justify-center rounded-full",
-            "border border-border bg-card text-muted-foreground shadow-sm transition",
-            "hover:text-foreground hover:bg-accent-hover",
-            "opacity-0 group-hover:opacity-100 focus-visible:opacity-100",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "stg:absolute stg:-top-2.5 stg:-right-2.5 stg:inline-flex stg:h-7 stg:w-7 stg:items-center stg:justify-center stg:rounded-full",
+            "stg:border stg:border-border stg:bg-card stg:text-muted-foreground stg:shadow-sm stg:transition",
+            "stg:hover:text-foreground stg:hover:bg-accent-hover",
+            "stg:opacity-0 stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
+            "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
           )}
         >
           <EditIcon />
@@ -262,7 +262,7 @@ function AiMessage({
       role="article"
       aria-label="AI response"
       aria-busy={isStreaming}
-      className={cn("px-4 py-3", className)}
+      className={cn("stg:px-4 stg:py-3", className)}
     >
       <div className="stgm-prose">
         <Streamdown
@@ -301,19 +301,19 @@ function ThinkingMessage({
     <div
       role="article"
       aria-label="Model thinking"
-      className={cn("px-4 py-1.5", className)}
+      className={cn("stg:px-4 stg:py-1.5", className)}
     >
       <button
         type="button"
         aria-expanded={expanded}
         onClick={() => setExpanded((v) => !v)}
         className={cn(
-          "flex items-center gap-1.5 text-xs text-muted-foreground transition-colors",
-          "hover:text-foreground cursor-pointer",
+          "stg:flex stg:items-center stg:gap-1.5 stg:text-xs stg:text-muted-foreground stg:transition-colors",
+          "stg:hover:text-foreground stg:cursor-pointer",
         )}
       >
         <ThinkingIcon isStreaming={isStreaming} />
-        <span className="min-w-0 truncate">
+        <span className="stg:min-w-0 stg:truncate">
           {isStreaming && !hasContent
             ? "Thinking..."
             : expanded
@@ -324,12 +324,12 @@ function ThinkingMessage({
       </button>
 
       {expanded && hasContent && (
-        <div className="mt-1.5 border-l-2 border-muted-foreground/20 pl-3">
-          <p className="text-xs text-muted-foreground whitespace-pre-wrap leading-relaxed">
+        <div className="stg:mt-1.5 stg:border-l-2 stg:border-muted-foreground/20 stg:pl-3">
+          <p className="stg:text-xs stg:text-muted-foreground stg:whitespace-pre-wrap stg:leading-relaxed">
             {content}
             {isStreaming && (
               <span
-                className="inline-block w-[2px] h-[0.8em] bg-muted-foreground align-text-bottom animate-pulse ml-0.5"
+                className="stg:inline-block stg:w-[2px] stg:h-[0.8em] stg:bg-muted-foreground stg:align-text-bottom stg:animate-pulse stg:ml-0.5"
                 aria-hidden="true"
               />
             )}
@@ -351,9 +351,9 @@ function SystemMessage({
     <div
       role="article"
       aria-label="System message"
-      className={cn("px-4 py-2", className)}
+      className={cn("stg:px-4 stg:py-2", className)}
     >
-      <p className="text-xs text-muted-foreground italic">{content}</p>
+      <p className="stg:text-xs stg:text-muted-foreground stg:italic">{content}</p>
     </div>
   );
 }
@@ -368,7 +368,7 @@ function ThinkingIcon({ isStreaming }: { isStreaming: boolean }) {
         fill="none"
         stroke="currentColor"
         strokeWidth="1.5"
-        className="shrink-0 animate-spin"
+        className="stg:shrink-0 stg:animate-spin"
         aria-hidden="true"
       >
         <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
@@ -385,7 +385,7 @@ function ThinkingIcon({ isStreaming }: { isStreaming: boolean }) {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <circle cx="6" cy="5" r="3.5" />
@@ -408,8 +408,8 @@ function ChevronIcon({ expanded }: { expanded: boolean }) {
       strokeLinecap="round"
       strokeLinejoin="round"
       className={cn(
-        "shrink-0 transition-transform duration-150",
-        expanded && "rotate-90",
+        "stg:shrink-0 stg:transition-transform stg:duration-150",
+        expanded && "stg:rotate-90",
       )}
       aria-hidden="true"
     >

package/src/execution/MessageThread.tsx

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

package/src/execution/PlanArtifactCard.tsx

@@ -92,26 +92,26 @@ export const PlanArtifactCard = memo(function PlanArtifactCard({
       aria-label="Plan"
       onKeyDown={handleKeyDown}
       className={cn(
-        "mx-4 flex flex-wrap items-center gap-x-3 gap-y-2 rounded-lg",
-        "border border-border-muted bg-card px-3 py-2.5",
+        "stg:mx-4 stg:flex stg:flex-wrap stg:items-center stg:gap-x-3 stg:gap-y-2 stg:rounded-lg",
+        "stg:border stg:border-border-muted stg:bg-card stg:px-3 stg:py-2.5",
         className,
       )}
     >
       <PlanIcon />
-      <div className="min-w-0 flex-1 basis-48">
-        <div className="truncate text-sm font-medium text-foreground">
+      <div className="stg:min-w-0 stg:flex-1 stg:basis-48">
+        <div className="stg:truncate stg:text-sm stg:font-medium stg:text-foreground">
           {title ?? "Plan"}
         </div>
-        <div className="text-[0.65rem] text-muted-foreground-faint">
+        <div className="stg:text-[0.65rem] stg:text-muted-foreground-faint">
           {artifact.name}
           <span aria-hidden="true"> · </span>
-          <span className="tabular-nums">
+          <span className="stg:tabular-nums">
             {formatArtifactSize(artifact.sizeBytes)}
           </span>
         </div>
       </div>
 
-      <div className="ml-auto flex flex-wrap items-center gap-x-1.5 gap-y-1.5">
+      <div className="stg:ml-auto stg:flex stg:flex-wrap stg:items-center stg:gap-x-1.5 stg:gap-y-1.5">
         {onOpenPlan ? (
           <IconAction
             label="Open plan"
@@ -145,11 +145,11 @@ export const PlanArtifactCard = memo(function PlanArtifactCard({
             disabled={disabled}
             onClick={onImplement}
             className={cn(
-              "ml-1.5 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5",
-              "text-xs font-medium transition-colors",
-              "bg-primary text-primary-foreground hover:bg-primary-hover",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-              "disabled:pointer-events-none disabled:opacity-50",
+              "stg:ml-1.5 stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded-md stg:px-3 stg:py-1.5",
+              "stg:text-xs stg:font-medium stg:transition-colors",
+              "stg:bg-primary stg:text-primary-foreground stg:hover:bg-primary-hover",
+              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
             )}
           >
             <ImplementIcon />
@@ -158,7 +158,7 @@ export const PlanArtifactCard = memo(function PlanArtifactCard({
         )}
       </div>
 
-      <div role="status" aria-live="polite" aria-atomic="true" className="sr-only">
+      <div role="status" aria-live="polite" aria-atomic="true" className="stg:sr-only">
         {copied && "Plan copied to clipboard"}
       </div>
 
@@ -181,7 +181,7 @@ export const PlanArtifactCard = memo(function PlanArtifactCard({
 });
 
 const FOCUS_RING =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:rounded-sm";
+  "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring stg:focus-visible:rounded-sm";
 
 /**
  * An icon-only secondary action. The accessible name doubles as the hover
@@ -207,9 +207,9 @@ function IconAction({
       onClick={onClick}
       disabled={disabled}
       className={cn(
-        "inline-flex items-center rounded-md p-1.5 text-muted-foreground",
-        "transition-colors hover:bg-muted hover:text-foreground",
-        "disabled:pointer-events-none disabled:opacity-50",
+        "stg:inline-flex stg:items-center stg:rounded-md stg:p-1.5 stg:text-muted-foreground",
+        "stg:transition-colors stg:hover:bg-muted stg:hover:text-foreground",
+        "stg:disabled:pointer-events-none stg:disabled:opacity-50",
         FOCUS_RING,
       )}
     >
@@ -229,7 +229,7 @@ function PlanIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-muted-foreground-faint"
+      className="stg:shrink-0 stg:text-muted-foreground-faint"
       aria-hidden="true"
     >
       <path d="M3 4h10M3 8h7M3 12h8" />
@@ -267,7 +267,7 @@ function DownloadIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <path d="M6 1.5V8.5" />
@@ -288,7 +288,7 @@ function CopyIcon() {
       strokeWidth="1.2"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <rect x="4" y="4" width="6.5" height="6.5" rx="1" />
@@ -309,7 +309,7 @@ function CheckIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0 text-success"
+      className="stg:shrink-0 stg:text-success"
       aria-hidden="true"
     >
       <path d="M2 6.5L4.5 9L10 3" />
@@ -329,7 +329,7 @@ function EyeIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <path d="M1.5 8S4 3.5 8 3.5s6.5 4.5 6.5 4.5-2.5 4.5-6.5 4.5S1.5 8 1.5 8Z" />

package/src/execution/PlanCompletionCard.tsx

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

package/src/execution/PlanDocumentMessage.tsx

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

package/src/execution/PlanStreamingCard.tsx

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