fix(web): match action eyebrow backgrounds

apps/web/src/components/chat/ComposerActionResume.test.tsx

@@ -33,7 +33,9 @@ describe("ComposerActionResumeBadge", () => {
     );
 
     expect(markup).toContain('data-composer-action-resume-badge="true"');
+    expect(markup).toContain('data-variant="warning"');
     expect(markup).toContain("chat-composer-shoulder-tab");
+    expect(markup).toContain("text-warning-foreground");
     expect(markup).toContain("lucide-rotate-ccw-clock");
     expect(markup).toContain("Deploy preview");
     expect(markup).toContain("Running");
@@ -85,6 +87,7 @@ describe("ComposerActionResumeDrawer", () => {
 
     expect(markup).toContain('data-chat-composer-action-resume-drawer="true"');
     expect(markup).toContain('data-variant="warning"');
+    expect(markup).toContain("bg-warning");
     expect(markup).toContain("vp run deploy:preview");
     expect(markup).toContain(
       "When it finishes, LastCode resumes the agent once this thread is idle",

apps/web/src/components/chat/ComposerActionResume.tsx

@@ -52,7 +52,7 @@ export const ComposerActionResumeBadge = memo(function ComposerActionResumeBadge
         aria-expanded={expanded}
         aria-label={label}
         disabled={disabled}
-        className="shrink-0 gap-1 px-1.5 text-yellow-700 dark:text-yellow-300"
+        className="shrink-0 gap-1 px-1.5 text-warning-foreground"
         onClick={onToggle}
         onPointerDown={(event) => event.preventDefault()}
       >
@@ -65,14 +65,15 @@ export const ComposerActionResumeBadge = memo(function ComposerActionResumeBadge
 
   return (
     <div
-      className="chat-composer-shoulder-tab absolute -top-7 left-4 right-4 z-0 flex h-8 items-center rounded-t-xl border border-b-0 px-2 pb-1 text-xs leading-none text-yellow-700 dark:text-yellow-300"
+      className="chat-composer-shoulder-tab absolute -top-7 left-4 right-4 z-0 flex h-8 items-center rounded-t-xl border border-b-0 px-2 pb-1 text-xs leading-none text-warning-foreground"
       data-composer-action-resume-badge="true"
+      data-variant="warning"
     >
       <button
         type="button"
         aria-expanded={expanded}
         aria-label={label}
-        className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 self-stretch text-left hover:text-yellow-800 dark:hover:text-yellow-200"
+        className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 self-stretch text-left"
         onClick={onToggle}
         onPointerDown={(event) => event.preventDefault()}
       >
@@ -114,15 +115,12 @@ export const ComposerActionResumeDrawer = memo(function ComposerActionResumeDraw
           onClick={onCollapse}
           onPointerDown={(event) => event.preventDefault()}
         >
-          <RotateCcwClockIcon
-            aria-hidden
-            className="size-3.5 shrink-0 text-yellow-700 dark:text-yellow-300"
-          />
+          <RotateCcwClockIcon aria-hidden className="size-3.5 shrink-0 text-warning-foreground" />
           <span className="min-w-0 flex-1 truncate font-medium text-foreground">
             {action.action.actionName}
           </span>
-          <span className="inline-flex shrink-0 items-center gap-1.5 text-yellow-700 dark:text-yellow-300">
-            <span aria-hidden className="size-1.5 rounded-full bg-yellow-500 dark:bg-yellow-300" />
+          <span className="inline-flex shrink-0 items-center gap-1.5 text-warning-foreground">
+            <span aria-hidden className="size-1.5 rounded-full bg-warning" />
             Running for <ActionElapsed startedAt={action.action.startedAt} />
           </span>
         </button>

apps/web/src/components/chat/MessagesTimeline.test.tsx

@@ -258,6 +258,8 @@ describe("MessagesTimeline", () => {
     expect(markup).toContain("[lastcode:ci] Summary: all checks passed");
     expect(markup).not.toContain("full output hidden while collapsed");
     expect(markup).toContain('aria-expanded="false"');
+    expect(markup).toContain("border-warning/28 bg-warning/8");
+    expect(markup).toContain("text-warning-foreground");
   });
 
   it("shows the validated outcome when an Action has no exit code", () => {

apps/web/src/components/chat/MessagesTimeline.tsx

@@ -1408,11 +1408,11 @@ function SystemTimelineRow({ row }: { row: Extract<TimelineRow, { kind: "message
   if (actionFollowUp) {
     const status = actionFollowUp.exitCode ?? actionFollowUp.validatedStatus;
     return (
-      <div className="mx-1 overflow-hidden rounded-lg border border-yellow-500/25 bg-yellow-500/[0.06]">
+      <div className="mx-1 overflow-hidden rounded-lg border border-warning/28 bg-warning/8">
         <button
           type="button"
           aria-expanded={actionOutputExpanded}
-          className="flex w-full min-w-0 items-center gap-1.5 px-3 pt-2.5 text-left text-xs font-medium text-yellow-800 dark:text-yellow-200"
+          className="flex w-full min-w-0 items-center gap-1.5 px-3 pt-2.5 text-left text-xs font-medium text-warning-foreground"
           onClick={() => ctx.onToggleActionFollowUp(row.id)}
         >
           <BotIcon aria-hidden className="size-3.5 shrink-0" />

apps/web/src/index.css

@@ -787,15 +787,19 @@ html[data-rounded-project-icons] [data-slot="project-favicon"] {
   }
 
   .chat-composer-shoulder-tab {
+    --chat-composer-shoulder-tint: transparent;
+
     border-color: var(
       --chat-composer-outline,
       color-mix(in srgb, var(--contrast-foreground) 8%, transparent)
     );
-    background: color-mix(
-      in srgb,
-      var(--chat-composer-glass-surface, var(--card)) var(--glass-opacity),
-      transparent
-    );
+    background:
+      linear-gradient(var(--chat-composer-shoulder-tint), var(--chat-composer-shoulder-tint)),
+      color-mix(
+        in srgb,
+        var(--chat-composer-glass-surface, var(--card)) var(--glass-opacity),
+        transparent
+      );
     -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
     backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
     box-shadow: 0 -8px 24px -18px rgb(0 0 0 / 45%);
@@ -805,7 +809,15 @@ html[data-rounded-project-icons] [data-slot="project-favicon"] {
     }
 
     @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
-      background: var(--chat-composer-glass-surface, var(--card));
+      background:
+        linear-gradient(var(--chat-composer-shoulder-tint), var(--chat-composer-shoulder-tint)),
+        var(--chat-composer-glass-surface, var(--card));
+    }
+
+    &[data-variant="warning"] {
+      --chat-composer-shoulder-tint: color-mix(in srgb, var(--warning) 8%, transparent);
+
+      border-color: color-mix(in srgb, var(--warning) 28%, transparent);
     }
   }