@stigmer/react 3.9.0 → 3.11.0

package/src/execution/SubAgentSection.tsx

@@ -185,7 +185,7 @@ function CollapsibleCard({
       role="group"
       aria-label={ariaLabel}
       className={cn(
-        "rounded-md border border-border border-l-2 border-l-primary/30 bg-muted-faint",
+        "stg:rounded-md stg:border stg:border-border stg:border-l-2 stg:border-l-primary/30 stg:bg-muted-faint",
         className,
       )}
     >
@@ -195,23 +195,23 @@ function CollapsibleCard({
         aria-expanded={expanded}
         onClick={handleToggle}
         className={cn(
-          "flex w-full items-center gap-2 px-2.5 py-1.5 text-left text-xs text-muted-foreground transition-colors",
-          "hover:bg-muted-subtle",
-          "cursor-pointer",
+          "stg:flex stg:w-full stg:items-center stg:gap-2 stg:px-2.5 stg:py-1.5 stg:text-left stg:text-xs stg:text-muted-foreground stg:transition-colors",
+          "stg:hover:bg-muted-subtle",
+          "stg:cursor-pointer",
         )}
       >
-        <span className="shrink-0 text-primary-muted" aria-hidden="true">
+        <span className="stg:shrink-0 stg:text-primary-muted" aria-hidden="true">
           <BotIcon />
         </span>
-        <span className="min-w-0 flex-1 truncate">{displayLabel}</span>
+        <span className="stg:min-w-0 stg:flex-1 stg:truncate">{displayLabel}</span>
         {isRunning && (
-          <span className="shrink-0 text-muted-foreground" aria-hidden="true">
+          <span className="stg:shrink-0 stg:text-muted-foreground" aria-hidden="true">
             <SpinnerIcon />
           </span>
         )}
         <span
           className={cn(
-            "shrink-0 rounded px-1 py-0.5 text-[10px] font-medium leading-none",
+            "stg:shrink-0 stg:rounded stg:px-1 stg:py-0.5 stg:text-[10px] stg:font-medium stg:leading-none",
             statusInfo.badgeClass,
           )}
         >
@@ -221,7 +221,7 @@ function CollapsibleCard({
           <RunningDuration startedAt={sub.startedAt} />
         ) : (
           duration && (
-            <span className="shrink-0 tabular-nums text-muted-foreground">
+            <span className="stg:shrink-0 stg:tabular-nums stg:text-muted-foreground">
               {duration}
             </span>
           )
@@ -231,28 +231,28 @@ function CollapsibleCard({
 
       {/* Active todo preview — visible when collapsed */}
       {collapsedPreview && !expanded && (
-        <div className="flex items-center gap-1.5 px-2.5 pb-1.5 text-xs text-muted-foreground">
-          <span className="ml-[20px] shrink-0" aria-hidden="true">
+        <div className="stg:flex stg:items-center stg:gap-1.5 stg:px-2.5 stg:pb-1.5 stg:text-xs stg:text-muted-foreground">
+          <span className="stg:ml-[20px] stg:shrink-0" aria-hidden="true">
             {isRunning && activeTodo ? (
               <TodoInProgressIcon />
             ) : (
               <TodoCompletedSmallIcon />
             )}
           </span>
-          <span className="min-w-0 truncate">{collapsedPreview}</span>
+          <span className="stg:min-w-0 stg:truncate">{collapsedPreview}</span>
         </div>
       )}
 
       {/* Expanded content — CSS grid-rows animation */}
       <div
         className={cn(
-          "grid transition-[grid-template-rows] duration-150 ease-out",
-          expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+          "stg:grid stg:transition-[grid-template-rows] stg:duration-150 stg:ease-out",
+          expanded ? "stg:grid-rows-[1fr]" : "stg:grid-rows-[0fr]",
         )}
       >
-        <div className="overflow-hidden">
+        <div className="stg:overflow-hidden">
           {expanded && (
-            <div className="border-t border-border-muted px-2.5 pb-2 pt-1.5">
+            <div className="stg:border-t stg:border-border-muted stg:px-2.5 stg:pb-2 stg:pt-1.5">
               <SubAgentThreadContent
                 threadItems={threadItems}
                 todos={sub.todos}
@@ -286,7 +286,7 @@ function RunningDuration({ startedAt }: { readonly startedAt: string }) {
   if (elapsed === null) return null;
 
   return (
-    <span className="shrink-0 tabular-nums text-muted-foreground">
+    <span className="stg:shrink-0 stg:tabular-nums stg:text-muted-foreground">
       {formatElapsed(elapsed)}
     </span>
   );
@@ -318,28 +318,28 @@ function FlatContent({
   return (
     <div
       className={cn(
-        "border-l-2 border-primary/20 pl-3",
+        "stg:border-l-2 stg:border-primary/20 stg:pl-3",
         className,
       )}
     >
       {/* Header */}
-      <div className="flex flex-wrap items-center gap-x-2 gap-y-1 py-1.5 text-xs">
+      <div className="stg:flex stg:flex-wrap stg:items-center stg:gap-x-2 stg:gap-y-1 stg:py-1.5 stg:text-xs">
         <span
-          className={cn("shrink-0", statusInfo.colorClass)}
+          className={cn("stg:shrink-0", statusInfo.colorClass)}
           aria-hidden="true"
         >
           <StatusIcon />
         </span>
-        <span className="font-medium text-foreground">
+        <span className="stg:font-medium stg:text-foreground">
           {sub.name}
         </span>
         {sub.subject && (
-          <span className="text-muted-foreground">
+          <span className="stg:text-muted-foreground">
             {sub.subject}
           </span>
         )}
         {duration && (
-          <span className="tabular-nums text-muted-foreground">
+          <span className="stg:tabular-nums stg:text-muted-foreground">
             {duration}
           </span>
         )}
@@ -379,18 +379,18 @@ function SubAgentThreadContent({
 
   return (
     <>
-      {hasTodos && <TodoList todos={todos!} className="pb-1" />}
+      {hasTodos && <TodoList todos={todos!} className="stg:pb-1" />}
 
       {input && (
         <div
-          className="border-l-2 border-muted-foreground/25 pl-2.5 text-xs text-muted-foreground whitespace-pre-wrap mb-1"
+          className="stg:border-l-2 stg:border-muted-foreground/25 stg:pl-2.5 stg:text-xs stg:text-muted-foreground stg:whitespace-pre-wrap stg:mb-1"
         >
           {input}
         </div>
       )}
 
       {threadItems.length > 0 && (
-        <div className="flex flex-col gap-1 pb-1">
+        <div className="stg:flex stg:flex-col stg:gap-1 stg:pb-1">
           {threadItems.map((item) => {
             switch (item.kind) {
               case "message":
@@ -410,7 +410,7 @@ function SubAgentThreadContent({
       )}
 
       {isFailed && error && (
-        <div className="rounded-md border border-destructive/20 bg-destructive-subtle px-2 py-1.5 text-xs text-destructive">
+        <div className="stg:rounded-md stg:border stg:border-destructive/20 stg:bg-destructive-subtle stg:px-2 stg:py-1.5 stg:text-xs stg:text-destructive">
           {error}
         </div>
       )}
@@ -468,38 +468,38 @@ interface SubAgentStatusInfo {
 const SUB_AGENT_STATUS_MAP: Record<SubAgentStatus, SubAgentStatusInfo> = {
   [SubAgentStatus.SUB_AGENT_STATUS_UNSPECIFIED]: {
     label: "Unknown",
-    colorClass: "text-muted-foreground",
-    badgeClass: "bg-muted text-muted-foreground",
+    colorClass: "stg:text-muted-foreground",
+    badgeClass: "stg:bg-muted stg:text-muted-foreground",
     icon: DotIcon,
   },
   [SubAgentStatus.SUB_AGENT_PENDING]: {
     label: "Pending",
-    colorClass: "text-muted-foreground",
-    badgeClass: "bg-muted text-muted-foreground",
+    colorClass: "stg:text-muted-foreground",
+    badgeClass: "stg:bg-muted stg:text-muted-foreground",
     icon: DotIcon,
   },
   [SubAgentStatus.SUB_AGENT_IN_PROGRESS]: {
     label: "Running",
-    colorClass: "text-foreground",
-    badgeClass: "bg-muted text-foreground",
+    colorClass: "stg:text-foreground",
+    badgeClass: "stg:bg-muted stg:text-foreground",
     icon: SpinnerIcon,
   },
   [SubAgentStatus.SUB_AGENT_COMPLETED]: {
     label: "Completed",
-    colorClass: "text-success",
-    badgeClass: "bg-success/15 text-success",
+    colorClass: "stg:text-success",
+    badgeClass: "stg:bg-success/15 stg:text-success",
     icon: CheckCircleIcon,
   },
   [SubAgentStatus.SUB_AGENT_FAILED]: {
     label: "Failed",
-    colorClass: "text-destructive",
-    badgeClass: "bg-destructive/15 text-destructive",
+    colorClass: "stg:text-destructive",
+    badgeClass: "stg:bg-destructive/15 stg:text-destructive",
     icon: XCircleIcon,
   },
   [SubAgentStatus.SUB_AGENT_CANCELLED]: {
     label: "Cancelled",
-    colorClass: "text-muted-foreground",
-    badgeClass: "bg-muted text-muted-foreground",
+    colorClass: "stg:text-muted-foreground",
+    badgeClass: "stg:bg-muted stg:text-muted-foreground",
     icon: XCircleIcon,
   },
 };
@@ -517,7 +517,7 @@ function SpinnerIcon() {
       fill="none"
       stroke="currentColor"
       strokeWidth="1.5"
-      className="animate-spin"
+      className="stg:animate-spin"
     >
       <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
     </svg>
@@ -619,8 +619,8 @@ function ChevronIcon({ expanded }: { expanded: boolean }) {
       strokeLinecap="round"
       strokeLinejoin="round"
       className={cn(
-        "shrink-0 text-muted-foreground transition-transform duration-150",
-        expanded && "rotate-90",
+        "stg:shrink-0 stg:text-muted-foreground stg:transition-transform stg:duration-150",
+        expanded && "stg:rotate-90",
       )}
       aria-hidden="true"
     >

package/src/execution/SummarizationBadge.tsx

@@ -46,21 +46,21 @@ export const SummarizationBadge = memo(function SummarizationBadge({
     <div
       role="group"
       aria-label="Summarization history"
-      className={cn("flex flex-col gap-1", className)}
+      className={cn("stg:flex stg:flex-col stg:gap-1", className)}
     >
       <button
         type="button"
         onClick={toggle}
         aria-expanded={expanded}
         className={cn(
-          "inline-flex items-center gap-1.5 rounded px-1.5 py-0.5",
-          "text-xs text-muted-foreground",
-          "hover:bg-muted/50 transition-colors",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "stg:inline-flex stg:items-center stg:gap-1.5 stg:rounded stg:px-1.5 stg:py-0.5",
+          "stg:text-xs stg:text-muted-foreground",
+          "stg:hover:bg-muted/50 stg:transition-colors",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
         )}
       >
         <SummarizationIcon />
-        <span className="tabular-nums">
+        <span className="stg:tabular-nums">
           {events.length}{" "}
           {events.length === 1 ? "summarization" : "summarizations"}
         </span>
@@ -71,7 +71,7 @@ export const SummarizationBadge = memo(function SummarizationBadge({
         <div
           role="list"
           aria-label="Summarization events"
-          className="flex flex-col gap-1 pl-2"
+          className="stg:flex stg:flex-col stg:gap-1 stg:pl-2"
         >
           {events.map((event, i) => (
             <EventRow key={event.timestamp || i} event={event} index={i} />
@@ -94,24 +94,24 @@ const EventRow = memo(function EventRow({
   return (
     <div
       role="listitem"
-      className="flex flex-col gap-0.5 rounded border border-border/50 px-2 py-1.5"
+      className="stg:flex stg:flex-col stg:gap-0.5 stg:rounded stg:border stg:border-border/50 stg:px-2 stg:py-1.5"
     >
-      <div className="flex items-baseline justify-between text-xs text-muted-foreground">
-        <span className="font-medium">#{index + 1}</span>
+      <div className="stg:flex stg:items-baseline stg:justify-between stg:text-xs stg:text-muted-foreground">
+        <span className="stg:font-medium">#{index + 1}</span>
         {event.timestamp && (
           <time
             dateTime={event.timestamp}
-            className="tabular-nums"
+            className="stg:tabular-nums"
           >
             {formatTime(event.timestamp)}
           </time>
         )}
       </div>
-      <div className="text-xs tabular-nums text-muted-foreground">
+      <div className="stg:text-xs stg:tabular-nums stg:text-muted-foreground">
         {formatTokenCount(event.tokensBefore)} →{" "}
         {formatTokenCount(event.tokensAfter)} tokens ({reduction}% reduction)
       </div>
-      <div className="text-xs tabular-nums text-muted-foreground">
+      <div className="stg:text-xs stg:tabular-nums stg:text-muted-foreground">
         {event.durationMs > 0 && <>{formatDurationMs(event.durationMs)}</>}
         {event.model && (
           <>
@@ -178,8 +178,8 @@ function ChevronIcon({ expanded }: { readonly expanded: boolean }) {
       strokeLinejoin="round"
       aria-hidden="true"
       className={cn(
-        "transition-transform",
-        expanded && "rotate-180",
+        "stg:transition-transform",
+        expanded && "stg:rotate-180",
       )}
     >
       <path d="M2.5 4L5 6.5L7.5 4" />

package/src/execution/SummarizationCard.tsx

@@ -42,42 +42,42 @@ export const SummarizationCard = memo(function SummarizationCard({
       role="status"
       aria-label="Context compacted"
       className={cn(
-        "mx-4 flex items-center gap-3 rounded-md border border-border/50",
-        "bg-muted/30 px-3 py-2",
+        "stg:mx-4 stg:flex stg:items-center stg:gap-3 stg:rounded-md stg:border stg:border-border/50",
+        "stg:bg-muted/30 stg:px-3 stg:py-2",
         className,
       )}
     >
       <CompactionIcon />
-      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-        <div className="flex items-baseline gap-1.5 text-xs font-medium text-muted-foreground">
+      <div className="stg:flex stg:min-w-0 stg:flex-1 stg:flex-col stg:gap-0.5">
+        <div className="stg:flex stg:items-baseline stg:gap-1.5 stg:text-xs stg:font-medium stg:text-muted-foreground">
           <span>{isInferred ? "Detected context compaction" : "Context compacted"}</span>
           {event.timestamp && (
-            <time dateTime={event.timestamp} className="ml-auto tabular-nums text-muted-foreground/70">
+            <time dateTime={event.timestamp} className="stg:ml-auto stg:tabular-nums stg:text-muted-foreground/70">
               {formatTime(event.timestamp)}
             </time>
           )}
         </div>
-        <div className="flex flex-wrap items-center gap-x-2 text-xs tabular-nums text-muted-foreground/80">
+        <div className="stg:flex stg:flex-wrap stg:items-center stg:gap-x-2 stg:text-xs stg:tabular-nums stg:text-muted-foreground/80">
           <span>
             {formatTokenCount(event.tokensBefore)} &rarr; {formatTokenCount(event.tokensAfter)} tokens
           </span>
-          <span className="text-muted-foreground/50">&middot;</span>
+          <span className="stg:text-muted-foreground/50">&middot;</span>
           <span>{reduction}% reduction</span>
           {event.durationMs > 0 && (
             <>
-              <span className="text-muted-foreground/50">&middot;</span>
+              <span className="stg:text-muted-foreground/50">&middot;</span>
               <span>{formatDuration(event.durationMs)}</span>
             </>
           )}
           {event.model && (
             <>
-              <span className="text-muted-foreground/50">&middot;</span>
+              <span className="stg:text-muted-foreground/50">&middot;</span>
               <span>{event.model}</span>
             </>
           )}
           {event.costUsd > 0 && (
             <>
-              <span className="text-muted-foreground/50">&middot;</span>
+              <span className="stg:text-muted-foreground/50">&middot;</span>
               <span>
                 ${event.costUsd < 0.01 ? event.costUsd.toFixed(4) : event.costUsd.toFixed(2)}
               </span>
@@ -116,7 +116,7 @@ function CompactionIcon() {
       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="M4 2v4l4-2-4-2zM12 14v-4l-4 2 4 2z" />

package/src/execution/TerminalSession.tsx

@@ -56,7 +56,7 @@ export function TerminalSession({
     <div
       data-cursor-target="terminal-session"
       className={cn(
-        "space-y-1 rounded-md border border-border bg-muted-subtle p-2.5 font-mono text-xs",
+        "stg:space-y-1 stg:rounded-md stg:border stg:border-border stg:bg-muted-subtle stg:p-2.5 stg:font-mono stg:text-xs",
         className,
       )}
     >
@@ -64,23 +64,23 @@ export function TerminalSession({
         // A plain <pre> (not CollapsiblePre): the command is the user's intent
         // and renders in full — even a multi-line heredoc — without a second
         // truncation toggle competing with stdout's.
-        <pre className="whitespace-pre-wrap break-words text-foreground">
-          <span className="select-none text-muted-foreground">$ </span>
+        <pre className="stg:whitespace-pre-wrap stg:break-words stg:text-foreground">
+          <span className="stg:select-none stg:text-muted-foreground">$ </span>
           {normalize(command)}
         </pre>
       )}
       {stdout && (
-        <CollapsiblePre content={normalize(stdout)} className="text-foreground" />
+        <CollapsiblePre content={normalize(stdout)} className="stg:text-foreground" />
       )}
       {stderr && (
-        <CollapsiblePre content={normalize(stderr)} className="text-destructive" />
+        <CollapsiblePre content={normalize(stderr)} className="stg:text-destructive" />
       )}
       {failed && (
         <div>
-          <span className="sr-only">Command exited with code {exitCode}</span>
+          <span className="stg:sr-only">Command exited with code {exitCode}</span>
           <span
             aria-hidden="true"
-            className="inline-block rounded bg-destructive-subtle px-1 py-0.5 text-[10px] font-medium leading-none tabular-nums text-destructive"
+            className="stg:inline-block stg:rounded stg:bg-destructive-subtle stg:px-1 stg:py-0.5 stg:text-[10px] stg:font-medium stg:leading-none stg:tabular-nums stg:text-destructive"
           >
             exit {exitCode}
           </span>

package/src/execution/ThreadSkeleton.tsx

@@ -31,38 +31,38 @@ const AI_LINE_WIDTHS = [
 export function ThreadSkeleton({ className }: ThreadSkeletonProps) {
   return (
     <div
-      className={cn("flex flex-col gap-4 pt-6 pb-4", className)}
+      className={cn("stg:flex stg:flex-col stg:gap-4 stg:pt-6 stg:pb-4", className)}
       aria-busy="true"
       aria-label="Loading conversation"
     >
-      <div className="animate-pulse space-y-4">
+      <div className="stg:animate-pulse stg:space-y-4">
         {/* Turn 1: Human bubble */}
-        <div className="ms-[20%] rounded-lg bg-muted-subtle px-4 py-3">
-          <div className="h-4 w-3/5 rounded bg-muted" />
+        <div className="stg:ms-[20%] stg:rounded-lg stg:bg-muted-subtle stg:px-4 stg:py-3">
+          <div className="stg:h-4 stg:w-3/5 stg:rounded stg:bg-muted" />
         </div>
 
         {/* Turn 1: AI response */}
-        <div className="space-y-2 px-4">
+        <div className="stg:space-y-2 stg:px-4">
           {AI_LINE_WIDTHS[0].map((w, i) => (
             <div
               key={i}
-              className="h-4 rounded bg-muted"
+              className="stg:h-4 stg:rounded stg:bg-muted"
               style={{ width: `${w}%` }}
             />
           ))}
         </div>
 
         {/* Turn 2: Human bubble */}
-        <div className="ms-[20%] rounded-lg bg-muted-subtle px-4 py-3">
-          <div className="h-4 w-2/5 rounded bg-muted" />
+        <div className="stg:ms-[20%] stg:rounded-lg stg:bg-muted-subtle stg:px-4 stg:py-3">
+          <div className="stg:h-4 stg:w-2/5 stg:rounded stg:bg-muted" />
         </div>
 
         {/* Turn 2: AI response */}
-        <div className="space-y-2 px-4">
+        <div className="stg:space-y-2 stg:px-4">
           {AI_LINE_WIDTHS[1].map((w, i) => (
             <div
               key={i}
-              className="h-4 rounded bg-muted"
+              className="stg:h-4 stg:rounded stg:bg-muted"
               style={{ width: `${w}%` }}
             />
           ))}

package/src/execution/TodoCard.tsx

@@ -96,7 +96,7 @@ export const TodoCard = memo(function TodoCard({
       aria-label="Agent to-dos"
       data-cursor-target="todo-card"
       className={cn(
-        "rounded-lg border border-border-prominent overflow-hidden",
+        "stg:rounded-lg stg:border stg:border-border-prominent stg:overflow-hidden",
         className,
       )}
     >
@@ -105,26 +105,26 @@ export const TodoCard = memo(function TodoCard({
         aria-expanded={expanded}
         onClick={handleToggle}
         className={cn(
-          "flex w-full cursor-pointer items-center gap-2 px-2.5 py-1.5 text-left text-xs text-muted-foreground transition-colors",
-          "hover:bg-muted-subtle",
+          "stg:flex stg:w-full stg:cursor-pointer stg:items-center stg:gap-2 stg:px-2.5 stg:py-1.5 stg:text-left stg:text-xs stg:text-muted-foreground stg:transition-colors",
+          "stg:hover:bg-muted-subtle",
           // ring-inset so the card's overflow-hidden does not clip the focus ring.
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
         )}
       >
         <span
           className={cn(
-            "shrink-0",
-            allDone ? "text-success" : "text-muted-foreground",
+            "stg:shrink-0",
+            allDone ? "stg:text-success" : "stg:text-muted-foreground",
           )}
           aria-hidden="true"
         >
           <PlanIcon />
         </span>
-        <span className="min-w-0 flex-1 truncate font-medium text-foreground">
+        <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:font-medium stg:text-foreground">
           To-dos
         </span>
         {summary && (
-          <span className="shrink-0 tabular-nums text-muted-foreground">
+          <span className="stg:shrink-0 stg:tabular-nums stg:text-muted-foreground">
             {summary}
           </span>
         )}
@@ -132,7 +132,7 @@ export const TodoCard = memo(function TodoCard({
       </button>
 
       {expanded && (
-        <div className="border-t border-border-muted px-2.5 py-2">
+        <div className="stg:border-t stg:border-border-muted stg:px-2.5 stg:py-2">
           <TodoList todos={todos} TodoRow={TodoRow} />
         </div>
       )}
@@ -191,8 +191,8 @@ function ChevronIcon({ expanded }: { expanded: boolean }) {
       strokeLinecap="round"
       strokeLinejoin="round"
       className={cn(
-        "shrink-0 text-muted-foreground transition-transform duration-150",
-        expanded && "rotate-90",
+        "stg:shrink-0 stg:text-muted-foreground stg:transition-transform stg:duration-150",
+        expanded && "stg:rotate-90",
       )}
       aria-hidden="true"
     >

package/src/execution/TodoList.tsx

@@ -69,7 +69,7 @@ export function TodoList({
   return (
     <ul
       role="list"
-      className={cn("flex flex-col gap-1", className)}
+      className={cn("stg:flex stg:flex-col stg:gap-1", className)}
       aria-label="Tasks"
     >
       {sortedTodos.map((item) => (
@@ -132,18 +132,18 @@ export interface TodoRowProps {
  */
 export function TodoRow({ item }: TodoRowProps) {
   const Icon = TODO_ICONS[item.status] ?? TodoPendingIcon;
-  const colorClass = TODO_COLORS[item.status] ?? "text-muted-foreground";
+  const colorClass = TODO_COLORS[item.status] ?? "stg:text-muted-foreground";
   const cancelled = item.status === TodoStatus.TODO_CANCELLED;
 
   return (
-    <li className="flex items-start gap-1.5 text-xs">
-      <span className={cn("mt-0.5 shrink-0", colorClass)} aria-hidden="true">
+    <li className="stg:flex stg:items-start stg:gap-1.5 stg:text-xs">
+      <span className={cn("stg:mt-0.5 stg:shrink-0", colorClass)} aria-hidden="true">
         <Icon />
       </span>
       <span
         className={cn(
-          "min-w-0 break-words",
-          cancelled ? "text-muted-foreground line-through" : "text-foreground",
+          "stg:min-w-0 stg:break-words",
+          cancelled ? "stg:text-muted-foreground stg:line-through" : "stg:text-foreground",
         )}
       >
         {item.content}
@@ -164,10 +164,10 @@ const TODO_ICONS: Partial<Record<TodoStatus, () => React.JSX.Element>> = {
 };
 
 const TODO_COLORS: Partial<Record<TodoStatus, string>> = {
-  [TodoStatus.TODO_PENDING]: "text-muted-foreground",
-  [TodoStatus.TODO_IN_PROGRESS]: "text-foreground",
-  [TodoStatus.TODO_COMPLETED]: "text-success",
-  [TodoStatus.TODO_CANCELLED]: "text-muted-foreground",
+  [TodoStatus.TODO_PENDING]: "stg:text-muted-foreground",
+  [TodoStatus.TODO_IN_PROGRESS]: "stg:text-foreground",
+  [TodoStatus.TODO_COMPLETED]: "stg:text-success",
+  [TodoStatus.TODO_CANCELLED]: "stg:text-muted-foreground",
 };
 
 // ---------------------------------------------------------------------------
@@ -192,9 +192,9 @@ function TodoPendingIcon() {
 /** Exported for reuse in SubAgentSection collapsed preview. */
 export function TodoInProgressIcon() {
   return (
-    <span className="relative flex h-3 w-3 items-center justify-center">
-      <span className="absolute inline-flex h-2 w-2 animate-ping rounded-full bg-current opacity-75" />
-      <span className="relative inline-flex h-2 w-2 rounded-full bg-current" />
+    <span className="stg:relative stg:flex stg:h-3 stg:w-3 stg:items-center stg:justify-center">
+      <span className="stg:absolute stg:inline-flex stg:h-2 stg:w-2 stg:animate-ping stg:rounded-full stg:bg-current stg:opacity-75" />
+      <span className="stg:relative stg:inline-flex stg:h-2 stg:w-2 stg:rounded-full stg:bg-current" />
     </span>
   );
 }

package/src/execution/ToolArgsView.tsx

@@ -86,7 +86,7 @@ export function ToolArgsView({
   );
 
   return (
-    <div className={cn("text-xs", className)}>
+    <div className={cn("stg:text-xs", className)}>
       <CategoryArgsDispatch
         category={categoryInfo.category}
         toolName={toolName}
@@ -183,11 +183,11 @@ function FileArgsView({
   }, [category, args]);
 
   return (
-    <div className="space-y-1.5">
+    <div className="stg:space-y-1.5">
       {showFileName && (
-        <div className="flex items-center gap-1.5 text-xs">
+        <div className="stg:flex stg:items-center stg:gap-1.5 stg:text-xs">
           <FilePathIcon />
-          <FilePathLink path={path} className="text-xs" />
+          <FilePathLink path={path} className="stg:text-xs" />
         </div>
       )}
       {writeContent && (
@@ -199,9 +199,9 @@ function FileArgsView({
 
 function SearchArgsView({ pattern }: { pattern: string }) {
   return (
-    <div className="flex items-center gap-1.5 text-xs">
-      <span className="text-muted-foreground">Pattern:</span>
-      <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-foreground">
+    <div className="stg:flex stg:items-center stg:gap-1.5 stg:text-xs">
+      <span className="stg:text-muted-foreground">Pattern:</span>
+      <code className="stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-foreground">
         {pattern}
       </code>
     </div>
@@ -218,7 +218,7 @@ function McpArgsPreview({
   mcpServerSlug: string;
 }) {
   return (
-    <div className="space-y-2">
+    <div className="stg:space-y-2">
       <McpMetadataRow
         mcpServerSlug={mcpServerSlug}
         toolName={toolName}