@stigmer/react 0.0.92 → 0.0.93

package/src/composer/SessionComposer.tsx

@@ -110,8 +110,12 @@ export interface SessionComposerProps {
   readonly enableGitHub?: boolean;
   /** Show the Local Folder source button. @default false */
   readonly enableLocal?: boolean;
-  /** Use the visual folder browser instead of a text input. @default false */
-  readonly enableFolderBrowser?: boolean;
+  /**
+   * Native folder picker callback passed through to {@link WorkspaceEditor}.
+   * When provided, clicking "Local Folder" opens a native dialog instead
+   * of the inline text input. See {@link WorkspaceEditorProps.onBrowseLocalFolder}.
+   */
+  readonly onBrowseLocalFolder?: () => Promise<string | null>;
 
   /**
    * Organization slug for agent, MCP server, and skill searches.
@@ -188,6 +192,24 @@ export interface SessionComposerProps {
   /** Called when the skill selection changes. Providing this enables the skill trigger. */
   readonly onSkillRefsChange?: (refs: ResourceRef[]) => void;
 
+  /**
+   * Currently selected runner ID, or `null` for "Auto" (backend decides).
+   *
+   * When `onRunnerIdChange` is provided and `org` is set, renders a
+   * runner picker in the toolbar's Tier 1 (alongside Model Selector).
+   *
+   * The selected runner ID flows through to `session.create({ runnerId })`
+   * so the session is bound to that runner's task queue.
+   */
+  readonly runnerId?: string | null;
+  /**
+   * Called when the user selects a different runner. `null` = "Auto".
+   *
+   * Providing this callback enables the runner picker in the toolbar.
+   * Requires `org` to be set (same prerequisite as agent/MCP pickers).
+   */
+  readonly onRunnerIdChange?: (runnerId: string | null) => void;
+
   /**
    * Session variables state managed by {@link useSessionVariables}.
    * When provided, renders a "Session Variables" trigger in the toolbar
@@ -332,7 +354,7 @@ export function SessionComposer({
   gitHubConnection,
   enableGitHub = true,
   enableLocal = false,
-  enableFolderBrowser = false,
+  onBrowseLocalFolder,
   org,
   agentRef,
   onAgentRefChange,
@@ -342,6 +364,8 @@ export function SessionComposer({
   onMcpServerUsagesChange,
   skillRefs,
   onSkillRefsChange,
+  runnerId,
+  onRunnerIdChange,
   sessionVariables,
   enableAttachments = true,
   onAttachmentValidationError,
@@ -364,6 +388,7 @@ export function SessionComposer({
   const showMcp = onMcpServerUsagesChange != null && org != null;
   const showWorkspace = workspace != null;
   const showSkills = onSkillRefsChange != null && org != null;
+  const showRunner = onRunnerIdChange != null && org != null;
   const showSessionVars = sessionVariables != null;
   const showAttach = enableAttachments;
 
@@ -1143,7 +1168,7 @@ export function SessionComposer({
             className="block w-full resize-none bg-transparent px-4 pt-3 pb-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed"
           />
           {isDragOver && (
-            <div className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-t-xl bg-primary/5">
+            <div className="pointer-events-none absolute inset-0 flex items-center justify-center rounded-t-xl bg-primary-subtle">
               <span className="text-xs font-medium text-primary">
                 Drop files to attach
               </span>
@@ -1270,7 +1295,7 @@ export function SessionComposer({
                   gitHubConnection={gitHubConnection}
                   enableGitHub={enableGitHub}
                   enableLocal={enableLocal}
-                  enableFolderBrowser={enableFolderBrowser}
+                  onBrowseLocalFolder={onBrowseLocalFolder}
                 />
               : null
           }
@@ -1280,6 +1305,10 @@ export function SessionComposer({
           configActivePanel={configActivePanel}
           onConfigActivePanelChange={handleConfigActivePanelChange}
           renderConfigPanel={renderConfigPanel}
+          showRunner={showRunner}
+          runnerOrg={org ?? ""}
+          runnerId={runnerId ?? null}
+          onRunnerIdChange={onRunnerIdChange ?? (() => {})}
           showModelSelector={showModelSelector}
           modelId={modelId}
           onModelChange={handleModelChange}

package/src/environment/CreateEnvironmentForm.tsx

@@ -109,7 +109,7 @@ export function CreateEnvironmentForm({
             className="text-xs font-medium text-muted-foreground"
           >
             Description{" "}
-            <span className="text-muted-foreground/60">(optional)</span>
+            <span className="text-muted-foreground-subtle">(optional)</span>
           </label>
           <input
             id="stgm-new-env-desc"
@@ -140,7 +140,7 @@ export function CreateEnvironmentForm({
           disabled={!canSubmit}
           className={cn(
             "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "bg-primary text-primary-foreground hover:bg-primary-hover",
             "disabled:pointer-events-none disabled:opacity-40",
           )}
         >
@@ -155,7 +155,7 @@ export function CreateEnvironmentForm({
             disabled={isCreating}
             className={cn(
               "rounded-md px-3 py-1.5 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >

package/src/environment/EnvVarForm.tsx

@@ -275,7 +275,7 @@ export function EnvVarForm({
                 >
                   <span className="font-mono">{variable.key}</span>
                   {variable.isSecret && (
-                    <span className="text-[0.55rem] uppercase tracking-wider text-muted-foreground/70">
+                    <span className="text-[0.55rem] uppercase tracking-wider text-muted-foreground-subtle">
                       secret
                     </span>
                   )}
@@ -328,13 +328,13 @@ export function EnvVarForm({
                 {variable.description && (
                   <p
                     id={descId}
-                    className="text-[0.6rem] leading-relaxed text-muted-foreground/80"
+                    className="text-[0.6rem] leading-relaxed text-muted-foreground-subtle"
                   >
                     {variable.description}
                   </p>
                 )}
                 {prefilledKeys.has(variable.key) && (
-                  <p className="text-[0.55rem] text-primary/70">
+                  <p className="text-[0.55rem] text-primary-muted">
                     Pre-filled from session variables
                   </p>
                 )}
@@ -378,7 +378,7 @@ export function EnvVarForm({
               Save for future runs
             </span>
             {!saveForFuture && (
-              <span className="block text-[0.6rem] leading-relaxed text-muted-foreground/70">
+              <span className="block text-[0.6rem] leading-relaxed text-muted-foreground-subtle">
                 These values will only be used for this run.
               </span>
             )}
@@ -395,7 +395,7 @@ export function EnvVarForm({
             disabled={isDisabled}
             className={cn(
               "rounded-md px-3 py-1.5 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "disabled:pointer-events-none disabled:opacity-50",
             )}
           >
@@ -410,7 +410,7 @@ export function EnvVarForm({
           className={cn(
             "inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs font-medium",
             "bg-primary text-primary-foreground",
-            "hover:bg-primary/90",
+            "hover:bg-primary-hover",
             "disabled:pointer-events-none disabled:opacity-40",
           )}
         >

package/src/environment/EnvironmentListPanel.tsx

@@ -135,7 +135,7 @@ export function EnvironmentListPanel({
         {Array.from({ length: 2 }, (_, i) => (
           <div
             key={i}
-            className="bg-muted/40 h-14 animate-pulse rounded-lg"
+            className="bg-muted-subtle h-14 animate-pulse rounded-lg"
           />
         ))}
       </div>
@@ -210,7 +210,7 @@ function EnvironmentCard({
         "rounded-lg border transition-colors",
         isExpanded
           ? "border-border bg-card"
-          : "border-border/60 hover:border-border",
+          : "border-border-muted hover:border-border",
       )}
     >
       {/* Header — always visible */}
@@ -240,7 +240,7 @@ function EnvironmentCard({
 
       {/* Expanded content — variable editor */}
       {isExpanded && environmentId && (
-        <div className="border-border/60 border-t px-3 pb-3 pt-2">
+        <div className="border-border-muted border-t px-3 pb-3 pt-2">
           <EnvironmentVariableEditor
             environmentId={environmentId}
             readOnly={readOnly}

package/src/environment/EnvironmentVariableEditor.tsx

@@ -157,7 +157,7 @@ export function EnvironmentVariableEditor({
         {Array.from({ length: 3 }, (_, i) => (
           <div
             key={i}
-            className="bg-muted/40 h-8 animate-pulse rounded"
+            className="bg-muted-subtle h-8 animate-pulse rounded"
             style={{ width: `${85 - i * 10}%` }}
           />
         ))}
@@ -211,7 +211,7 @@ export function EnvironmentVariableEditor({
             onClick={() => setShowAddForm(true)}
             className={cn(
               "mt-1 flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs",
-              "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+              "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
               "transition-colors",
             )}
           >
@@ -396,7 +396,7 @@ function VariableRow({
             {variable.key}
           </span>
           {variable.isSecret && (
-            <span className="text-[0.55rem] uppercase tracking-wider text-muted-foreground/60">
+            <span className="text-[0.55rem] uppercase tracking-wider text-muted-foreground-subtle">
               secret
             </span>
           )}
@@ -584,7 +584,7 @@ function AddVariableForm({
           disabled={!canSubmit}
           className={cn(
             "inline-flex items-center gap-1.5 rounded-md px-3 py-1 text-xs font-medium",
-            "bg-primary text-primary-foreground hover:bg-primary/90",
+            "bg-primary text-primary-foreground hover:bg-primary-hover",
             "disabled:pointer-events-none disabled:opacity-40",
           )}
         >
@@ -597,7 +597,7 @@ function AddVariableForm({
           disabled={isAdding}
           className={cn(
             "rounded-md px-3 py-1 text-xs",
-            "text-muted-foreground hover:text-foreground hover:bg-accent/50",
+            "text-muted-foreground hover:text-foreground hover:bg-accent-hover",
             "disabled:pointer-events-none disabled:opacity-50",
           )}
         >
@@ -626,10 +626,10 @@ function ActionButton({
   children: React.ReactNode;
 }) {
   const colorClass = {
-    primary: "text-primary hover:text-primary/80",
+    primary: "text-primary hover:text-primary-muted",
     muted: "text-muted-foreground hover:text-foreground",
     "muted-danger": "text-muted-foreground hover:text-destructive",
-    danger: "text-destructive hover:text-destructive/80",
+    danger: "text-destructive hover:text-destructive-muted",
   }[variant];
 
   return (

package/src/error/ErrorMessage.tsx

@@ -75,7 +75,7 @@ export function ErrorMessage({
     <div
       role="alert"
       className={cn(
-        "bg-destructive/5 border-destructive/20 text-destructive rounded-lg border p-4",
+        "bg-destructive-subtle border-destructive/20 text-destructive rounded-lg border p-4",
         className,
       )}
     >
@@ -90,14 +90,14 @@ export function ErrorMessage({
           <p className="text-sm font-medium">
             {title ?? CATEGORY_TITLES[category]}
           </p>
-          <p className="text-destructive/80 text-sm">{message}</p>
+          <p className="text-destructive-muted text-sm">{message}</p>
 
           {metadata && (
             <div className="pt-1">
               <button
                 type="button"
                 onClick={() => setDetailsOpen((prev) => !prev)}
-                className="text-destructive/60 hover:text-destructive/80 inline-flex items-center gap-1 text-xs transition-colors"
+                className="text-destructive-muted hover:text-destructive-muted inline-flex items-center gap-1 text-xs transition-colors"
               >
                 <ChevronDownIcon
                   className={cn(
@@ -108,7 +108,7 @@ export function ErrorMessage({
                 Technical details
               </button>
               {detailsOpen && (
-                <dl className="text-destructive/60 mt-1.5 space-y-0.5 font-mono text-xs">
+                <dl className="text-destructive-muted mt-1.5 space-y-0.5 font-mono text-xs">
                   <div className="flex gap-2">
                     <dt className="shrink-0">Method:</dt>
                     <dd className="truncate">{metadata.method}</dd>
@@ -129,7 +129,7 @@ export function ErrorMessage({
             onClick={retry}
             className={cn(
               "inline-flex shrink-0 items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium",
-              "border-destructive/20 text-destructive hover:bg-destructive/10",
+              "border-destructive/20 text-destructive hover:bg-destructive-subtle",
               "transition-colors",
             )}
           >

package/src/execution/ApprovalCard.tsx

@@ -106,7 +106,7 @@ export function ApprovalCard({
 
   const borderClass =
     categoryInfo.category === "delete"
-      ? "border-destructive/30 bg-destructive/5"
+      ? "border-destructive/30 bg-destructive-subtle"
       : "border-warning/30 bg-warning/5";
 
   return (
@@ -119,7 +119,7 @@ export function ApprovalCard({
       <div
         className={cn(
           "flex items-center gap-2 px-2.5 py-1.5 text-xs",
-          "border-b border-border/30",
+          "border-b border-border-muted",
         )}
       >
         <span className="shrink-0 text-warning" aria-hidden="true">
@@ -231,11 +231,11 @@ function ActionButton({
     ),
     skip: cn(
       "border border-border bg-background text-muted-foreground hover:bg-muted hover:text-foreground",
-      "disabled:bg-muted/30 disabled:text-muted-foreground/50",
+      "disabled:bg-muted-faint disabled:text-muted-foreground-faint",
     ),
     reject: cn(
-      "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-      "disabled:bg-destructive/50 disabled:text-destructive-foreground/70",
+      "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
+      "disabled:bg-destructive-subtle0 disabled:text-destructive-foreground/70",
     ),
   };
 

package/src/execution/ArtifactCard.tsx

@@ -192,7 +192,7 @@ export function ArtifactCard({
         />
       )}
       {detectionLabel && (
-        <span className="mt-1.5 inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+        <span className="mt-1.5 inline-flex items-center rounded-full bg-primary-subtle px-2 py-0.5 text-xs font-medium text-primary">
           {detectionLabel}
         </span>
       )}
@@ -204,7 +204,7 @@ export function ArtifactCard({
             type="button"
             onClick={() => onPreview!(artifact)}
             className={cn(
-              "text-xs font-medium text-primary transition-colors hover:text-primary/80",
+              "text-xs font-medium text-primary transition-colors hover:text-primary-muted",
               FOCUS_RING_CLASSES,
             )}
           >

package/src/execution/ArtifactPreviewModal.tsx

@@ -447,7 +447,7 @@ function ContentHeader({
             />
           )}
           {detectionLabel && (
-            <span className="inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
+            <span className="inline-flex items-center rounded-full bg-primary-subtle px-2 py-0.5 text-xs font-medium text-primary">
               {detectionLabel}
             </span>
           )}
@@ -548,7 +548,7 @@ function DirectoryContentView({
   return (
     <div className="p-4">
       {skillDetection.detected && (
-        <div className="mb-4 rounded-md bg-primary/5 p-3">
+        <div className="mb-4 rounded-md bg-primary-subtle p-3">
           <p className="text-sm font-medium text-foreground">
             {skillDetection.skillName}
           </p>
@@ -671,7 +671,7 @@ function ActionBar({
               type="button"
               onClick={onApply}
               className={cn(
-                "text-xs font-medium text-destructive underline transition-colors hover:text-destructive/80",
+                "text-xs font-medium text-destructive underline transition-colors hover:text-destructive-muted",
                 FOCUS_RING_CLASSES,
               )}
             >
@@ -717,7 +717,7 @@ function ApplyButton({
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         "disabled:cursor-not-allowed",
         canApply
-          ? "bg-primary text-primary-foreground hover:bg-primary/90"
+          ? "bg-primary text-primary-foreground hover:bg-primary-hover"
           : "bg-muted text-muted-foreground",
       )}
     >

package/src/execution/FollowUpInput.tsx

@@ -161,7 +161,7 @@ export function FollowUpInput({
           className="block w-full resize-none bg-transparent px-4 pt-3 pb-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed"
         />
 
-        <div className="flex items-center justify-between gap-2 border-t border-border/50 px-3 py-2">
+        <div className="flex items-center justify-between gap-2 border-t border-border-muted px-3 py-2">
           <div className="flex items-center gap-2">
             {showModelSelector && (
               <ModelSelector
@@ -176,7 +176,7 @@ export function FollowUpInput({
             type="button"
             disabled={!canSubmit}
             onClick={handleSubmit}
-            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-40"
+            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground transition-colors hover:bg-primary-hover disabled:pointer-events-none disabled:opacity-40"
             aria-label="Send message"
           >
             {isSubmitting ? <SpinnerIcon /> : <ArrowUpIcon />}

package/src/execution/McpToolDetail.tsx

@@ -94,7 +94,7 @@ export function McpMetadataRow({
         <span className="inline-flex items-center gap-1.5 rounded bg-muted px-1.5 py-0.5 font-mono">
           <McpServerIcon />
           {mcpServerSlug}
-          <span className="text-muted-foreground/60">/</span>
+          <span className="text-muted-foreground-subtle">/</span>
           <span className="text-foreground">{humanizeToolName(toolName)}</span>
         </span>
       )}
@@ -139,7 +139,7 @@ export function McpArgsView({ args }: McpArgsViewProps) {
       <span className="font-medium text-muted-foreground">Arguments</span>
 
       {scalars.length > 0 && (
-        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 rounded-md border border-border bg-muted/30 px-2.5 py-2">
+        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 rounded-md border border-border bg-muted-faint px-2.5 py-2">
           {scalars.map(([key, value]) => (
             <ScalarRow key={key} label={key} value={value} />
           ))}
@@ -167,7 +167,7 @@ function ScalarRow({ label, value }: { label: string; value: string }) {
       </dt>
       {isMultiline ? (
         <dd className="min-w-0">
-          <pre className="whitespace-pre-wrap break-words rounded border border-border bg-muted/40 px-2 py-1 font-mono text-foreground">
+          <pre className="whitespace-pre-wrap break-words rounded border border-border bg-muted-subtle px-2 py-1 font-mono text-foreground">
             {value}
           </pre>
         </dd>
@@ -192,7 +192,7 @@ function McpResultView({ result }: { result: string }) {
       <span className="font-medium text-muted-foreground">Result</span>
       <CollapsiblePre
         content={parsed}
-        className="max-h-80 overflow-auto rounded-md border border-border bg-muted/40 p-2 text-foreground"
+        className="max-h-80 overflow-auto rounded-md border border-border bg-muted-subtle p-2 text-foreground"
       />
     </div>
   );

package/src/execution/MessageEntry.tsx

@@ -62,7 +62,7 @@ function HumanMessage({
     <div
       role="article"
       aria-label="User message"
-      className={cn("ms-[20%] rounded-lg bg-muted/50 px-4 py-3", className)}
+      className={cn("ms-[20%] rounded-lg bg-muted-subtle px-4 py-3", className)}
     >
       <p className="text-sm text-foreground whitespace-pre-wrap">{content}</p>
     </div>

package/src/execution/MessageThread.tsx

@@ -406,7 +406,7 @@ export function MessageThread({
                   key={item.key}
                   role="article"
                   aria-label="Sending message"
-                  className="ms-[20%] rounded-lg bg-muted/50 px-4 py-3 opacity-70"
+                  className="ms-[20%] rounded-lg bg-muted-subtle px-4 py-3 opacity-70"
                 >
                   <p className="text-sm text-foreground whitespace-pre-wrap">
                     {item.content}

package/src/execution/SessionVariablesInput.tsx

@@ -123,7 +123,7 @@ export function SessionVariablesInput({
           {entries.canScrollDown && <ScrollFade position="bottom" />}
         </div>
       ) : (
-        <p className="py-2 text-center text-[0.65rem] text-muted-foreground/70">
+        <p className="py-2 text-center text-[0.65rem] text-muted-foreground-subtle">
           No variables added.
         </p>
       )}
@@ -136,7 +136,7 @@ export function SessionVariablesInput({
         className={cn(
           "inline-flex w-full items-center justify-center gap-1 rounded-md py-1.5 text-xs",
           "border border-dashed border-border text-muted-foreground",
-          "hover:border-border hover:bg-accent/50 hover:text-foreground",
+          "hover:border-border hover:bg-accent-hover hover:text-foreground",
           "disabled:pointer-events-none disabled:opacity-50",
         )}
       >
@@ -194,7 +194,7 @@ function VariableEntryRow({
           aria-label="Variable name"
           className={cn(
             "min-w-0 flex-1 rounded-md border border-input bg-background px-2.5 py-1.5 font-mono text-xs text-foreground",
-            "placeholder:text-muted-foreground/50",
+            "placeholder:text-muted-foreground-faint",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             "disabled:pointer-events-none disabled:opacity-50",
             isDuplicate && "border-warning",
@@ -231,7 +231,7 @@ function VariableEntryRow({
           aria-label={`Variable value${entryKey.trim() ? ` for ${entryKey.trim()}` : ""}`}
           className={cn(
             "w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-xs text-foreground",
-            "placeholder:text-muted-foreground/50",
+            "placeholder:text-muted-foreground-faint",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             "disabled:pointer-events-none disabled:opacity-50",
           )}
@@ -268,7 +268,7 @@ function VariableEntryRow({
 
       {/* Required-by indicator */}
       {requiredBy && requiredBy.length > 0 && (
-        <p className="text-[0.55rem] text-primary/70">
+        <p className="text-[0.55rem] text-primary-muted">
           Used by: {requiredBy.join(", ")}
         </p>
       )}
@@ -308,8 +308,8 @@ function SecretToggle({
         "inline-flex shrink-0 items-center gap-0.5 rounded-md px-1.5 py-1 text-[0.55rem] font-medium uppercase tracking-wider transition-colors",
         "disabled:pointer-events-none disabled:opacity-50",
         checked
-          ? "bg-primary/10 text-primary"
-          : "bg-muted/50 text-muted-foreground hover:bg-muted",
+          ? "bg-primary-subtle text-primary"
+          : "bg-muted-subtle text-muted-foreground hover:bg-muted",
       )}
     >
       <LockIcon />

package/src/execution/SubAgentSection.tsx

@@ -158,7 +158,7 @@ function CollapsibleCard({
       role="group"
       aria-label={ariaLabel}
       className={cn(
-        "rounded-md border border-border border-l-2 border-l-primary/30 bg-muted/30",
+        "rounded-md border border-border border-l-2 border-l-primary/30 bg-muted-faint",
         className,
       )}
     >
@@ -169,11 +169,11 @@ function CollapsibleCard({
         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/50",
+          "hover:bg-muted-subtle",
           "cursor-pointer",
         )}
       >
-        <span className="shrink-0 text-primary/70" aria-hidden="true">
+        <span className="shrink-0 text-primary-muted" aria-hidden="true">
           <BotIcon />
         </span>
         <span className="min-w-0 flex-1 truncate">{displayLabel}</span>
@@ -216,7 +216,7 @@ function CollapsibleCard({
       >
         <div className="overflow-hidden">
           {expanded && (
-            <div className="border-t border-border/50 px-2.5 pb-2 pt-1.5">
+            <div className="border-t border-border-muted px-2.5 pb-2 pt-1.5">
               <SubAgentThreadContent
                 threadItems={threadItems}
                 todos={sub.todos}
@@ -350,7 +350,7 @@ function SubAgentThreadContent({
       )}
 
       {isFailed && error && (
-        <div className="rounded-md border border-destructive/20 bg-destructive/5 px-2 py-1.5 text-xs text-destructive">
+        <div className="rounded-md border border-destructive/20 bg-destructive-subtle px-2 py-1.5 text-xs text-destructive">
           {error}
         </div>
       )}

package/src/execution/ToolCallDetail.tsx

@@ -58,7 +58,7 @@ export function ToolCallDetail({ toolCall, className }: ToolCallDetailProps) {
       {isFailed && toolCall.error && (
         <div className="space-y-1">
           <span className="font-medium text-destructive">Error</span>
-          <pre className="whitespace-pre-wrap break-words rounded-md border border-destructive/20 bg-destructive/5 p-2 font-mono text-destructive">
+          <pre className="whitespace-pre-wrap break-words rounded-md border border-destructive/20 bg-destructive-subtle p-2 font-mono text-destructive">
             {toolCall.error}
           </pre>
         </div>
@@ -199,7 +199,7 @@ function ThinkToolDetail({ toolCall }: { toolCall: ToolCall }) {
   if (!thought) return null;
 
   return (
-    <div className="rounded-md border border-border/50 bg-muted/20 p-3">
+    <div className="rounded-md border border-border-muted bg-muted-faint p-3">
       <CollapsiblePre
         content={thought}
         className="italic text-muted-foreground whitespace-pre-wrap"

package/src/execution/ToolCallGroup.tsx

@@ -200,7 +200,7 @@ export function ToolCallGroup({
       role="group"
       aria-label={ariaLabel}
       className={cn(
-        "rounded-md border border-border bg-muted/30",
+        "rounded-md border border-border bg-muted-faint",
         className,
       )}
     >
@@ -211,7 +211,7 @@ export function ToolCallGroup({
         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/50",
+          "hover:bg-muted-subtle",
           "cursor-pointer",
         )}
       >
@@ -231,7 +231,7 @@ export function ToolCallGroup({
       >
         <div className="overflow-hidden">
           {expanded && (
-            <div className="border-t border-border/50">
+            <div className="border-t border-border-muted">
               {toolCalls.map((tc) => (
                 <ToolCallItem
                   key={tc.id || tc.name}

package/src/execution/ToolCallItem.tsx

@@ -126,7 +126,7 @@ export function ToolCallItem({
 
   if (isNonExpandableRead) {
     return (
-      <div className={cn("border-b border-border/50 last:border-b-0", className)}>
+      <div className={cn("border-b border-border-muted last:border-b-0", className)}>
         <div
           className="flex w-full items-center gap-2 px-2.5 py-1.5 text-xs"
         >
@@ -156,15 +156,15 @@ export function ToolCallItem({
       : primaryArg;
 
   return (
-    <div className={cn("border-b border-border/50 last:border-b-0", className)}>
+    <div className={cn("border-b border-border-muted last:border-b-0", className)}>
       <button
         type="button"
         aria-expanded={expanded}
         onClick={() => setExpanded((v) => !v)}
         className={cn(
           "flex w-full items-center gap-2 px-2.5 py-1.5 text-left text-xs transition-colors",
-          "hover:bg-muted/50",
-          expanded && "bg-muted/30",
+          "hover:bg-muted-subtle",
+          expanded && "bg-muted-faint",
         )}
       >
         <span className="shrink-0 text-muted-foreground" aria-hidden="true">