@stigmer/react 3.10.0 → 3.11.1-dev.20260812192248

package/src/execution/ToolCallDetail.tsx

@@ -77,7 +77,7 @@ export function ToolCallDetail({
   );
 
   return (
-    <div className={cn("space-y-2 text-xs", className)}>
+    <div className={cn("stg:space-y-2 stg:text-xs", className)}>
       <CategoryDetail
         toolCall={toolCall}
         category={category}
@@ -248,9 +248,9 @@ function SearchQueryBlock({
 }) {
   const label = category === "list" ? "Path" : "Query";
   return (
-    <div className="space-y-1">
-      <span className="font-medium text-muted-foreground">{label}</span>
-      <code className="block whitespace-pre-wrap break-words rounded bg-muted px-1.5 py-0.5 font-mono text-foreground">
+    <div className="stg:space-y-1">
+      <span className="stg:font-medium stg:text-muted-foreground">{label}</span>
+      <code className="stg:block stg:whitespace-pre-wrap stg:break-words stg:rounded stg:bg-muted stg:px-1.5 stg:py-0.5 stg:font-mono stg:text-foreground">
         {value}
       </code>
     </div>
@@ -274,10 +274,10 @@ function ThinkToolDetail({ toolCall }: { toolCall: ToolCall }) {
   if (!thought) return null;
 
   return (
-    <div className="rounded-md border border-border-muted bg-muted-faint p-3">
+    <div className="stg:rounded-md stg:border stg:border-border-muted stg:bg-muted-faint stg:p-3">
       <CollapsiblePre
         content={thought}
-        className="italic text-muted-foreground whitespace-pre-wrap"
+        className="stg:italic stg:text-muted-foreground stg:whitespace-pre-wrap"
       />
     </div>
   );
@@ -312,10 +312,7 @@ function ProvenanceNote({ toolCall }: { toolCall: ToolCall }) {
   if (!provenance) return null;
 
   return (
-    <p
-      className="text-[11px] italic text-muted-foreground"
-      title={provenance}
-    >
+    <p className="stg:text-[11px] stg:italic stg:text-muted-foreground">
       {provenance}
     </p>
   );

package/src/execution/ToolCallGroup.tsx

@@ -140,7 +140,7 @@ export const ToolCallGroup = memo(function ToolCallGroup({
         // self-contained card; the turn's tools stack with a small gap between
         // them rather than sharing a left rail, so the thread reads as a column
         // of discrete cards.
-        "flex flex-col gap-2",
+        "stg:flex stg:flex-col stg:gap-2",
         className,
       )}
     >

package/src/execution/ToolCallItem.tsx

@@ -31,6 +31,7 @@ import type { FileReviewRowState } from "./file-review-status.js";
 import { FilePathLink } from "./FilePathLink.js";
 import { isFileCategory, type ToolCategory } from "./tool-categories.js";
 import { useToolPresentation } from "./tool-presenter.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 
 /** Props for {@link ToolCallItem}. */
 export interface ToolCallItemProps {
@@ -178,7 +179,7 @@ export const ToolCallItem = memo(function ToolCallItem({
       {approvalBadge && (
         <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",
             approvalBadge.colorClass,
           )}
         >
@@ -189,7 +190,7 @@ export const ToolCallItem = memo(function ToolCallItem({
       {reviewBadge && (
         <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",
             reviewBadge.colorClass,
           )}
           data-cursor-target="file-review-row-badge"
@@ -199,20 +200,20 @@ export const ToolCallItem = memo(function ToolCallItem({
       )}
 
       {toolCall.mcpServerSlug && (
-        <span className="shrink-0 rounded bg-muted px-1 py-0.5 font-mono text-muted-foreground">
+        <span className="stg:shrink-0 stg:rounded stg:bg-muted stg:px-1 stg:py-0.5 stg:font-mono stg:text-muted-foreground">
           {toolCall.mcpServerSlug}
         </span>
       )}
 
       <span
-        className={cn("shrink-0", STATUS_COLOR[status])}
+        className={cn("stg:shrink-0", STATUS_COLOR[status])}
         aria-hidden="true"
       >
         <StatusIcon />
       </span>
 
       {duration && (
-        <span className="shrink-0 tabular-nums text-muted-foreground">
+        <span className="stg:shrink-0 stg:tabular-nums stg:text-muted-foreground">
           {duration}
         </span>
       )}
@@ -228,16 +229,16 @@ export const ToolCallItem = memo(function ToolCallItem({
         className={className}
       >
         <ThreadCardHeader>
-          <span className="shrink-0 text-muted-foreground" aria-hidden="true">
+          <span className="stg:shrink-0 stg:text-muted-foreground" aria-hidden="true">
             <CategoryIcon />
           </span>
 
-          <span className="min-w-0 flex-1 flex items-center gap-1.5 overflow-hidden">
-            <span className="shrink-0 font-medium text-foreground">
+          <span className="stg:min-w-0 stg:flex-1 stg:flex stg:items-center stg:gap-1.5 stg:overflow-hidden">
+            <span className="stg:shrink-0 stg:font-medium stg:text-foreground">
               {displayLabel}
             </span>
             {primaryArg && (
-              <FilePathLink path={primaryArg} className="min-w-0 text-xs" />
+              <FilePathLink path={primaryArg} className="stg:min-w-0 stg:text-xs" />
             )}
           </span>
 
@@ -292,32 +293,42 @@ export const ToolCallItem = memo(function ToolCallItem({
   // only by the summary layout below).
   const headerInner = (
     <>
-      <span className="shrink-0 text-muted-foreground" aria-hidden="true">
+      <span className="stg:shrink-0 stg:text-muted-foreground" aria-hidden="true">
         <CategoryIcon />
       </span>
 
-      <span className="min-w-0 flex-1 flex items-baseline gap-1.5 overflow-hidden">
-        <span className="shrink-0 font-medium text-foreground">
+      <span className="stg:min-w-0 stg:flex-1 stg:flex stg:items-baseline stg:gap-1.5 stg:overflow-hidden">
+        <span className="stg:shrink-0 stg:font-medium stg:text-foreground">
           {displayLabel}
         </span>
         {subtitleIsFilePath && primaryArg ? (
           <FilePathLink
             path={primaryArg}
-            className="min-w-0 text-xs text-muted-foreground"
+            className="stg:min-w-0 stg:text-xs stg:text-muted-foreground"
           />
         ) : (
           displaySubtitle && (
-            <span
-              ref={measuresSubtitle ? subtitleRef : undefined}
-              title={displaySubtitle}
-              className="min-w-0 truncate text-muted-foreground font-mono"
-            >
-              {displaySubtitle}
-            </span>
+            // Not TruncatedText: the span must carry the external measurement
+            // ref (useIsTextTruncated) that the expanded detail reads.
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <span
+                    ref={measuresSubtitle ? subtitleRef : undefined}
+                    className="stg:min-w-0 stg:truncate stg:text-muted-foreground stg:font-mono"
+                  />
+                }
+              >
+                {displaySubtitle}
+              </TooltipTrigger>
+              <TooltipContent side="top" className="stg:break-all">
+                {displaySubtitle}
+              </TooltipContent>
+            </Tooltip>
           )
         )}
         {!isSubAgent && category !== "shell" && resultSummary && (
-          <span className="shrink-0 tabular-nums text-muted-foreground">
+          <span className="stg:shrink-0 stg:tabular-nums stg:text-muted-foreground">
             {resultSummary}
           </span>
         )}
@@ -380,11 +391,11 @@ function getApprovalBadge(toolCall: ToolCall): ApprovalBadgeInfo | null {
   if (!toolCall.requiresApproval) return null;
   switch (toolCall.approvalAction) {
     case ApprovalAction.APPROVE:
-      return { label: "Approved", colorClass: "bg-success/15 text-success" };
+      return { label: "Approved", colorClass: "stg:bg-success/15 stg:text-success" };
     case ApprovalAction.SKIP:
-      return { label: "Skipped", colorClass: "bg-muted text-muted-foreground" };
+      return { label: "Skipped", colorClass: "stg:bg-muted stg:text-muted-foreground" };
     case ApprovalAction.REJECT:
-      return { label: "Rejected", colorClass: "bg-destructive/15 text-destructive" };
+      return { label: "Rejected", colorClass: "stg:bg-destructive/15 stg:text-destructive" };
     default:
       return null;
   }
@@ -401,10 +412,10 @@ function getApprovalBadge(toolCall: ToolCall): ApprovalBadgeInfo | null {
  * the same language.
  */
 const REVIEW_BADGE: Record<FileReviewRowState, ApprovalBadgeInfo> = {
-  pending: { label: "Pending review", colorClass: "bg-warning/15 text-warning" },
-  kept: { label: "Kept", colorClass: "bg-success/15 text-success" },
-  discarded: { label: "Discarded", colorClass: "bg-destructive/15 text-destructive" },
-  failed: { label: "Review failed", colorClass: "bg-destructive/15 text-destructive" },
+  pending: { label: "Pending review", colorClass: "stg:bg-warning/15 stg:text-warning" },
+  kept: { label: "Kept", colorClass: "stg:bg-success/15 stg:text-success" },
+  discarded: { label: "Discarded", colorClass: "stg:bg-destructive/15 stg:text-destructive" },
+  failed: { label: "Review failed", colorClass: "stg:bg-destructive/15 stg:text-destructive" },
 };
 
 // ---------------------------------------------------------------------------
@@ -443,12 +454,12 @@ function mapToolCallStatus(toolCall: ToolCall): ItemStatus {
 }
 
 const STATUS_COLOR: Record<ItemStatus, string> = {
-  running: "text-foreground",
-  waiting: "text-warning",
-  failed: "text-destructive",
-  completed: "text-success",
-  pending: "text-muted-foreground",
-  interrupted: "text-muted-foreground",
+  running: "stg:text-foreground",
+  waiting: "stg:text-warning",
+  failed: "stg:text-destructive",
+  completed: "stg:text-success",
+  pending: "stg:text-muted-foreground",
+  interrupted: "stg:text-muted-foreground",
 };
 
 // ---------------------------------------------------------------------------

package/src/execution/ToolRunGroup.tsx

@@ -88,7 +88,7 @@ export const ToolRunGroup = memo(function ToolRunGroup({
       aria-label={label}
       data-cursor-target="tool-run-group"
       className={cn(
-        "rounded-lg border border-border-prominent overflow-hidden",
+        "stg:rounded-lg stg:border stg:border-border-prominent stg:overflow-hidden",
         className,
       )}
     >
@@ -97,26 +97,26 @@ export const ToolRunGroup = memo(function ToolRunGroup({
         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="shrink-0 text-muted-foreground" aria-hidden="true">
+        <span className="stg:shrink-0 stg:text-muted-foreground" aria-hidden="true">
           <Icon />
         </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">
           {label}
         </span>
-        <span className={cn("shrink-0", STATUS_COLOR[status])} aria-hidden="true">
+        <span className={cn("stg:shrink-0", STATUS_COLOR[status])} aria-hidden="true">
           <StatusIcon />
         </span>
         <ChevronIcon expanded={expanded} />
       </button>
 
       {expanded && (
-        <div className="border-t border-border-muted">
+        <div className="stg:border-t stg:border-border-muted">
           {/* The chip is already the card; its children render as
               divider-separated rows (bordered={false}) to avoid a card-in-a-card. */}
           {toolCalls.map((tc) => (
@@ -221,11 +221,11 @@ function deriveAggregateStatus(toolCalls: readonly ToolCall[]): AggregateStatus
 }
 
 const STATUS_COLOR: Record<AggregateStatus, string> = {
-  running: "text-foreground",
-  waiting: "text-warning",
-  failed: "text-destructive",
-  completed: "text-success",
-  pending: "text-muted-foreground",
+  running: "stg:text-foreground",
+  waiting: "stg:text-warning",
+  failed: "stg:text-destructive",
+  completed: "stg:text-success",
+  pending: "stg:text-muted-foreground",
 };
 
 const STATUS_ICON: Record<AggregateStatus, () => React.JSX.Element> = {
@@ -242,7 +242,7 @@ const STATUS_ICON: Record<AggregateStatus, () => React.JSX.Element> = {
 
 function SpinnerIcon() {
   return (
-    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" className="animate-spin">
+    <svg width="10" height="10" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5" className="stg:animate-spin">
       <path d="M6 1.5A4.5 4.5 0 1 1 1.5 6" strokeLinecap="round" />
     </svg>
   );
@@ -295,8 +295,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/UsageWidget.tsx

@@ -60,16 +60,16 @@ export function UsageWidget({ executions, className }: UsageWidgetProps) {
 
   return (
     <div
-      className={cn("flex flex-col gap-1.5", className)}
+      className={cn("stg:flex stg:flex-col stg:gap-1.5", className)}
       role="region"
       aria-label="Session cost summary"
     >
-      <div className="flex items-baseline gap-1.5">
-        <span className="text-sm font-medium tabular-nums text-foreground">
+      <div className="stg:flex stg:items-baseline stg:gap-1.5">
+        <span className="stg:text-sm stg:font-medium stg:tabular-nums stg:text-foreground">
           {formatCost(usage.totalCostUsd)}
         </span>
         {usage.isEstimated && (
-          <span className="rounded bg-muted px-1 py-0.5 text-[10px] font-medium leading-none text-muted-foreground">
+          <span className="stg:rounded stg:bg-muted stg:px-1 stg:py-0.5 stg:text-[10px] stg:font-medium stg:leading-none stg:text-muted-foreground">
             Estimated
           </span>
         )}
@@ -78,18 +78,18 @@ export function UsageWidget({ executions, className }: UsageWidgetProps) {
       {multiModel ? (
         <ModelBreakdown models={usage.modelBreakdown} />
       ) : (
-        <div className="truncate text-xs text-muted-foreground">
+        <div className="stg:truncate stg:text-xs stg:text-muted-foreground">
           {usage.primaryModel}
           {usage.primaryProvider && ` · ${usage.primaryProvider}`}
         </div>
       )}
 
-      <div className="text-xs tabular-nums text-muted-foreground">
+      <div className="stg:text-xs stg:tabular-nums stg:text-muted-foreground">
         {formatTokenCount(usage.totalTokens)} tokens ·{" "}
         {usage.llmCallCount} {usage.llmCallCount === 1 ? "call" : "calls"}
       </div>
 
-      <div className="pl-2 text-xs tabular-nums text-muted-foreground">
+      <div className="stg:pl-2 stg:text-xs stg:tabular-nums stg:text-muted-foreground">
         prompt {formatTokenCount(usage.inputTokens)} · completion{" "}
         {formatTokenCount(usage.outputTokens)}
       </div>
@@ -111,18 +111,18 @@ function ModelBreakdown({
 }) {
   return (
     <div
-      className="flex flex-col gap-0.5"
+      className="stg:flex stg:flex-col stg:gap-0.5"
       role="list"
       aria-label="Model cost breakdown"
     >
       {models.map((entry) => (
         <div
           key={`${entry.model}\0${entry.provider}`}
-          className="flex items-baseline justify-between text-xs text-muted-foreground"
+          className="stg:flex stg:items-baseline stg:justify-between stg:text-xs stg:text-muted-foreground"
           role="listitem"
         >
-          <span className="truncate">{entry.model}</span>
-          <span className="ml-2 shrink-0 tabular-nums">
+          <span className="stg:truncate">{entry.model}</span>
+          <span className="stg:ml-2 stg:shrink-0 stg:tabular-nums">
             {formatCost(entry.estimatedCostUsd)}
           </span>
         </div>
@@ -144,7 +144,7 @@ function CacheLine({
     parts.push(`${formatTokenCount(creationTokens)} write`);
 
   return (
-    <div className="pl-2 text-xs tabular-nums text-muted-foreground">
+    <div className="stg:pl-2 stg:text-xs stg:tabular-nums stg:text-muted-foreground">
       cache {parts.join(" · ")}
     </div>
   );

package/src/execution/WriteBackCard.tsx

@@ -5,6 +5,8 @@ import type { WorkspaceWriteBack } from "@stigmer/protos/ai/stigmer/agentic/agen
 import { WorkspaceWriteBackPhase } from "@stigmer/protos/ai/stigmer/agentic/agentexecution/v1/writeback_pb";
 import { cn } from "@stigmer/theme";
 import { DiffSummary } from "../version-history/DiffSummary.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
+import { TruncatedText } from "../internal/truncated-text.js";
 import {
   parseDiffStatSummary,
   trailingDiffStatLine,
@@ -69,16 +71,14 @@ export function WriteBackCard({ writeBack, className }: WriteBackCardProps) {
     <div
       role="article"
       aria-label={`Write-back: ${displayName}`}
-      className={cn("flex flex-col", className)}
+      className={cn("stg:flex stg:flex-col", className)}
     >
       {/* Header: workspace name + quiet phase caption */}
-      <div className="flex items-center gap-2 px-2 py-1">
-        <span
-          className="min-w-0 flex-1 truncate text-xs font-medium text-foreground"
-          title={displayName}
-        >
-          {displayName}
-        </span>
+      <div className="stg:flex stg:items-center stg:gap-2 stg:px-2 stg:py-1">
+        <TruncatedText
+          text={displayName}
+          className="stg:min-w-0 stg:flex-1 stg:text-xs stg:font-medium stg:text-foreground"
+        />
         <PhaseCaption
           phase={writeBack.phase}
           pullRequestNumber={writeBack.pullRequestNumber}
@@ -107,10 +107,10 @@ export function WriteBackCard({ writeBack, className }: WriteBackCardProps) {
       {writeBack.error && (
         <div
           className={cn(
-            "mx-2 my-1 rounded px-2 py-1 text-xs",
+            "stg:mx-2 stg:my-1 stg:rounded stg:px-2 stg:py-1 stg:text-xs",
             isFailed
-              ? "bg-destructive-subtle text-destructive"
-              : "bg-status-degraded-subtle text-status-degraded",
+              ? "stg:bg-destructive-subtle stg:text-destructive"
+              : "stg:bg-status-degraded-subtle stg:text-status-degraded",
           )}
         >
           {writeBack.error}
@@ -155,10 +155,10 @@ function PhaseCaption({
   return (
     <span
       className={cn(
-        "shrink-0 text-[10px] font-medium tabular-nums",
+        "stg:shrink-0 stg:text-[10px] stg:font-medium stg:tabular-nums",
         phase === WorkspaceWriteBackPhase.WORKSPACE_WRITE_BACK_FAILED
-          ? "text-destructive"
-          : "text-muted-foreground",
+          ? "stg:text-destructive"
+          : "stg:text-muted-foreground",
       )}
     >
       {label}
@@ -177,19 +177,19 @@ function PullRequestRow({ url, number }: { url: string; number: number }) {
       target="_blank"
       rel="noopener noreferrer"
       className={cn(
-        "group flex items-center gap-2 px-2 py-1 text-xs text-muted-foreground transition-colors",
-        "hover:bg-muted hover:text-foreground",
+        "stg:group stg:flex stg:items-center stg:gap-2 stg:px-2 stg:py-1 stg:text-xs stg:text-muted-foreground stg:transition-colors",
+        "stg:hover:bg-muted stg:hover:text-foreground",
         FOCUS_RING_CLASSES,
       )}
     >
-      <span className="shrink-0">
+      <span className="stg:shrink-0">
         <PullRequestIcon />
       </span>
-      <span className="min-w-0 flex-1 truncate text-foreground">
+      <span className="stg:min-w-0 stg:flex-1 stg:truncate stg:text-foreground">
         {number > 0 ? `Pull Request #${number}` : "Pull Request"}
       </span>
       <span
-        className="shrink-0 opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"
+        className="stg:shrink-0 stg:opacity-0 stg:transition-opacity stg:group-hover:opacity-100 stg:group-focus-visible:opacity-100"
         aria-hidden="true"
       >
         <ExternalLinkIcon />
@@ -235,40 +235,49 @@ function BranchRow({
   }, [branchName]);
 
   return (
-    <div className="group flex items-stretch">
-      <div
-        className="flex min-w-0 flex-1 items-center gap-2 px-2 py-1 text-xs"
-        title={baseBranch ? `${branchName} \u2190 ${baseBranch}` : branchName}
-      >
-        <span className="shrink-0 text-muted-foreground">
+    <div className="stg:group stg:flex stg:items-stretch">
+      {/* The old row title restated "branch ← base", which is already visible
+          text; only the branch name can clip, so it alone carries the
+          overflow-gated tooltip. */}
+      <div className="stg:flex stg:min-w-0 stg:flex-1 stg:items-center stg:gap-2 stg:px-2 stg:py-1 stg:text-xs">
+        <span className="stg:shrink-0 stg:text-muted-foreground">
           <GitBranchIcon />
         </span>
-        <span className="min-w-0 truncate font-mono text-foreground">
-          {branchName}
-        </span>
+        <TruncatedText
+          text={branchName}
+          className="stg:min-w-0 stg:font-mono stg:text-foreground"
+        />
         {baseBranch && (
-          <span className="shrink-0 font-mono text-muted-foreground-faint">
+          <span className="stg:shrink-0 stg:font-mono stg:text-muted-foreground-faint">
             {"\u2190 "}
             {baseBranch}
           </span>
         )}
       </div>
-      <button
-        type="button"
-        onClick={handleCopy}
-        aria-label={copied ? "Branch name copied" : `Copy branch name ${branchName}`}
-        title={copied ? "Copied" : "Copy branch name"}
-        className={cn(
-          "flex shrink-0 items-center px-2 text-muted-foreground transition-opacity",
-          copied
-            ? "opacity-100"
-            : "opacity-0 group-hover:opacity-100 focus-visible:opacity-100",
-          "hover:text-foreground",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
-        )}
-      >
-        {copied ? <CheckIcon /> : <CopyIcon />}
-      </button>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              type="button"
+              onClick={handleCopy}
+              aria-label={copied ? "Branch name copied" : `Copy branch name ${branchName}`}
+              className={cn(
+                "stg:flex stg:shrink-0 stg:items-center stg:px-2 stg:text-muted-foreground stg:transition-opacity",
+                copied
+                  ? "stg:opacity-100"
+                  : "stg:opacity-0 stg:group-hover:opacity-100 stg:focus-visible:opacity-100",
+                "stg:hover:text-foreground",
+                "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-inset stg:focus-visible:ring-ring",
+              )}
+            />
+          }
+        >
+          {copied ? <CheckIcon /> : <CopyIcon />}
+        </TooltipTrigger>
+        <TooltipContent side="top">
+          {copied ? "Copied" : "Copy branch name"}
+        </TooltipContent>
+      </Tooltip>
     </div>
   );
 }
@@ -286,7 +295,7 @@ function StatLine({ diffSummary }: { diffSummary: string }) {
         fileCount={stats.filesChanged}
         additions={stats.insertions}
         deletions={stats.deletions}
-        className="px-2 py-1"
+        className="stg:px-2 stg:py-1"
       />
     );
   }
@@ -297,7 +306,7 @@ function StatLine({ diffSummary }: { diffSummary: string }) {
   if (!raw) return null;
 
   return (
-    <div className="px-2 py-1 font-mono text-xs text-muted-foreground">
+    <div className="stg:px-2 stg:py-1 stg:font-mono stg:text-xs stg:text-muted-foreground">
       {raw}
     </div>
   );
@@ -308,7 +317,7 @@ function StatLine({ diffSummary }: { diffSummary: string }) {
 // ---------------------------------------------------------------------------
 
 const FOCUS_RING_CLASSES =
-  "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";
 
 // ---------------------------------------------------------------------------
 // Inline SVG icons — monochrome, `currentColor`-tinted (DD-005; SDK
@@ -372,7 +381,7 @@ function ExternalLinkIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <path d="M9 3L3 9" />
@@ -393,7 +402,7 @@ function CopyIcon() {
       strokeWidth="1.5"
       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" />
@@ -413,7 +422,7 @@ function CheckIcon() {
       strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      className="shrink-0"
+      className="stg:shrink-0"
       aria-hidden="true"
     >
       <path d="M2.5 6.5L5 9L9.5 3.5" />

package/src/execution/WriteBacksWidget.tsx

@@ -64,14 +64,14 @@ export function WriteBacksWidget({
 
   return (
     <section aria-label="Pull Requests" className={cn(className)}>
-      <div className="mb-2 flex items-center gap-2">
-        <h3 className="text-sm font-medium text-foreground">Pull Requests</h3>
-        <span className="inline-flex min-w-[1.25rem] items-center justify-center rounded-full bg-muted px-1.5 text-xs tabular-nums text-muted-foreground">
+      <div className="stg:mb-2 stg:flex stg:items-center stg:gap-2">
+        <h3 className="stg:text-sm stg:font-medium stg:text-foreground">Pull Requests</h3>
+        <span className="stg:inline-flex stg:min-w-[1.25rem] stg:items-center stg:justify-center stg:rounded-full stg:bg-muted stg:px-1.5 stg:text-xs stg:tabular-nums stg:text-muted-foreground">
           {writeBackCount}
         </span>
       </div>
 
-      <ul role="list" className="flex flex-col gap-3">
+      <ul role="list" className="stg:flex stg:flex-col stg:gap-3">
         {writeBacks.map((entry) => (
           <li key={entry.writeBack.workspaceEntryName}>
             <WriteBackCard writeBack={entry.writeBack} />