@stigmer/react 3.9.0 → 3.11.0

package/src/execution/MessageThread.tsx

@@ -22,6 +22,7 @@ import { displayFileChangeSets } from "@stigmer/sdk";
 import { cn } from "@stigmer/theme";
 import { isTerminalPhase } from "./execution-phases.js";
 import { MessageEntry, type MessageEntryProps } from "./MessageEntry.js";
+import type { MessageAttachmentView } from "./MessageAttachments.js";
 import { ToolCallGroup } from "./ToolCallGroup.js";
 import { SubAgentSection } from "./SubAgentSection.js";
 import { ExecutionPhaseBadge } from "./ExecutionPhaseBadge.js";
@@ -124,6 +125,16 @@ export interface MessageThreadProps {
    * first snapshot.
    */
   readonly pendingUserMessage?: string | null;
+  /**
+   * Attachments submitted with the pending user message, rendered as chips
+   * on the optimistic bubble so the files never vanish between submit and
+   * the stream's first snapshot (stigmer/stigmer#372). Supply
+   * {@link useSessionConversation}'s `pendingAttachments`; clear together
+   * with {@link pendingUserMessage}. Chips are inert on the pending bubble
+   * (no execution record yet); previews and downloads light up the moment
+   * the real turn replaces it.
+   */
+  readonly pendingAttachments?: readonly MessageAttachmentView[] | null;
   /**
    * Marks the pending user message as failed-to-send. The optimistic
    * bubble renders an inline "Couldn't send — Retry" affordance instead
@@ -326,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");
 }
 
 /**
@@ -339,7 +350,7 @@ export function threadContentColumnClass(
  * part of the public API.
  */
 export type ThreadItem =
-  | { readonly kind: "message"; readonly message: AgentMessage; readonly key: string; readonly isPending?: boolean; readonly isFailed?: boolean; readonly isEditable?: boolean; readonly isPlanDocument?: boolean; readonly interactionMode?: InteractionMode }
+  | { readonly kind: "message"; readonly message: AgentMessage; readonly key: string; readonly isPending?: boolean; readonly isFailed?: boolean; readonly isEditable?: boolean; readonly isPlanDocument?: boolean; readonly interactionMode?: InteractionMode; readonly attachments?: readonly MessageAttachmentView[]; readonly executionId?: string }
   | { readonly kind: "tool-group"; readonly toolCalls: readonly ToolCall[]; readonly subAgentExecutions: readonly SubAgentExecution[]; readonly key: string }
   | { readonly kind: "sub-agent"; readonly subAgentExecution: SubAgentExecution; readonly key: string }
   | { readonly kind: "phase-badge"; readonly phase: ExecutionPhase; readonly key: string }
@@ -557,6 +568,7 @@ export function buildThreadItems(
   editableActiveTurn = false,
   includeFileReviewRecords = false,
   collapseStreamingPlan = false,
+  pendingAttachments?: readonly MessageAttachmentView[] | null,
 ): ThreadItem[] {
   const items: ThreadItem[] = [];
   // Tool-call ids that render as an inline-approval-capable ToolCallItem (a
@@ -717,6 +729,12 @@ export function buildThreadItems(
         pendingUserMessage != null &&
         specMessage === pendingUserMessage;
 
+      // The turn's submitted files (spec.attachments, by reference — the spec
+      // never mutates and structural sharing keeps the ref stable, so the
+      // memoized bubble skips re-renders). The execution id rides along for
+      // the presigned-URL affordances; the `_e${ei}` synthetic fallback is
+      // display-only and must never be presigned against.
+      const specAttachments = exec.spec?.attachments;
       items.push({
         kind: "message",
         message: syntheticHumanMsg,
@@ -727,6 +745,11 @@ export function buildThreadItems(
         // The turn's mode marks the prompt bubble (a "Plan" pill on Plan
         // turns) so the transcript reads unambiguously after mode switches.
         interactionMode: exec.spec?.executionConfig?.interactionMode,
+        attachments:
+          specAttachments && specAttachments.length > 0
+            ? specAttachments
+            : undefined,
+        executionId: exec.metadata?.id,
       });
     }
 
@@ -1023,6 +1046,14 @@ export function buildThreadItems(
         // sending state — the two are mutually exclusive.
         isPending: !pendingMessageFailed,
         isFailed: pendingMessageFailed,
+        // The submit context's attachments: evidence the files rode with the
+        // turn, kept on failure so retry shows what will be re-sent. No
+        // executionId yet — chips render inert until the real turn (same
+        // bridge key) replaces this bubble and brings the presign seam.
+        attachments:
+          pendingAttachments && pendingAttachments.length > 0
+            ? pendingAttachments
+            : undefined,
       });
     }
   }
@@ -1057,6 +1088,7 @@ export function MessageThread({
   executions,
   activeStreamExecution,
   pendingUserMessage,
+  pendingAttachments,
   pendingMessageFailed = false,
   onRetrySend,
   onRetryExecution,
@@ -1089,8 +1121,8 @@ export function MessageThread({
   // the plan streaming inline, where it remains readable (DD-011).
   const collapseStreamingPlan = onOpenPlan != null;
   const items = useMemo(
-    () => buildThreadItems(executions, activeStreamExecution, pendingUserMessage, includeApprovals, workspaceEntries, summarizationEvents, pendingMessageFailed, editableActiveTurn, showFileReviewRecords, collapseStreamingPlan),
-    [executions, activeStreamExecution, pendingUserMessage, includeApprovals, workspaceEntries, summarizationEvents, pendingMessageFailed, editableActiveTurn, showFileReviewRecords, collapseStreamingPlan],
+    () => buildThreadItems(executions, activeStreamExecution, pendingUserMessage, includeApprovals, workspaceEntries, summarizationEvents, pendingMessageFailed, editableActiveTurn, showFileReviewRecords, collapseStreamingPlan, pendingAttachments),
+    [executions, activeStreamExecution, pendingUserMessage, includeApprovals, workspaceEntries, summarizationEvents, pendingMessageFailed, editableActiveTurn, showFileReviewRecords, collapseStreamingPlan, pendingAttachments],
   );
 
   useKeyStability(items);
@@ -1161,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}
@@ -1279,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}>
@@ -1298,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
@@ -1413,6 +1445,7 @@ export function ThreadItemRenderer({
         return (
           <FailedUserMessage
             message={item.message}
+            attachments={item.attachments}
             onRetry={onRetrySend}
             MessageEntryComponent={Entry}
           />
@@ -1421,9 +1454,11 @@ 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}
+          executionId={item.executionId}
           onEdit={
             item.isEditable && onEditMessage
               ? () => onEditMessage(item.message.content)
@@ -1438,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>
       );
@@ -1488,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
@@ -1555,26 +1590,31 @@ export function ThreadItemRenderer({
  */
 function FailedUserMessage({
   message,
+  attachments,
   onRetry,
   MessageEntryComponent,
 }: {
   message: AgentMessage;
+  attachments?: readonly MessageAttachmentView[];
   onRetry?: () => void;
   MessageEntryComponent: ComponentType<MessageEntryProps>;
 }) {
   return (
-    <div className="flex flex-col gap-1">
-      <MessageEntryComponent message={message} />
+    <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>
@@ -1629,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>
@@ -1654,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>
@@ -1704,7 +1744,7 @@ const ApprovalCardRow = memo(function ApprovalCardRow({
       onSubmit={handleSubmit}
       isSubmitting={isSubmitting}
       error={error}
-      className="mx-4"
+      className="stg:mx-4"
     />
   );
 });
@@ -1732,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" />