fix(vscode): restore neutral primary and add a brand accent token

The periwinkle that #21 wrote into --primary and --muted-foreground tinted
every neutral surface, so both tokens go back to their original oklch values.
The accent it was compensating for now lives in its own --brand token, applied
only where an accent is actually wanted: inline code in Markdown, and the
DynamicWorkflow lane bars and running status dot, which were invisible against
--muted once --primary went back to a near-black neutral.

The scroll-to-bottom button and the effort toggle return to their blue accents
for the same reason.

Also:
- a finished workflow lane renders a full bar. The bar is scaled to the busiest
  agent, so a lane that completed in fewer steps kept a permanent gap.
- the generation-speed pill in the thinking row no longer wraps "46.0" and
  "t/s" onto two lines, and uses tabular-nums so it stops resizing.

Author: elkaix

apps/vscode/webview-ui/src/components/ChatArea.tsx

@@ -15,7 +15,7 @@ function ScrollButton() {
   return (
     <button
       onClick={() => scrollToBottom()}
-      className={cn("absolute bottom-4 right-4 p-2 rounded-full z-10", "bg-primary text-primary-foreground shadow-lg", "hover:bg-primary/85 transition-all")}
+      className={cn("absolute bottom-4 right-4 p-2 rounded-full z-10", "bg-blue-400 text-white shadow-lg", "hover:bg-blue-600 transition-all")}
     >
       <IconArrowDown className="size-4" />
     </button>

apps/vscode/webview-ui/src/components/ChatMessage.tsx

@@ -33,7 +33,7 @@ function ThinkingIndicator() {
 
   return (
     <div className="flex items-center gap-2.5 mt-1 py-1">
-      <div className="flex items-center gap-2">
+      <div className="flex min-w-0 items-center gap-2">
         <PythinkerLogo className="size-4 shrink-0" />
         <span className="text-[11px] font-medium tracking-wide text-zinc-400 dark:text-zinc-300 flex items-center">
           <span className="animate-shimmer-text">Pythinking</span>
@@ -45,9 +45,9 @@ function ThinkingIndicator() {
         </span>
       </div>
       {speed > 0 && (
-        <span className="inline-flex items-center gap-1 text-[10px] font-mono text-zinc-400 dark:text-zinc-400 bg-zinc-800/20 dark:bg-zinc-800/40 px-1.5 py-0.5 rounded-full border border-zinc-700/30">
-          <IconBolt className="size-3 text-amber-400 animate-pulse" />
-          <span>{speed.toFixed(1)} t/s</span>
+        <span className="inline-flex shrink-0 items-center gap-1 whitespace-nowrap text-[10px] font-mono text-zinc-400 dark:text-zinc-400 bg-zinc-800/20 dark:bg-zinc-800/40 px-1.5 py-0.5 rounded-full border border-zinc-700/30">
+          <IconBolt className="size-3 shrink-0 text-amber-400 animate-pulse" />
+          <span className="tabular-nums">{speed.toFixed(1)} t/s</span>
         </span>
       )}
     </div>

apps/vscode/webview-ui/src/components/Markdown.tsx

@@ -253,7 +253,8 @@ export const Markdown = memo(function Markdown({ content, className, enableEnric
         if (isInline) {
           const showColor = enableEnrichment && hasColors(code);
           return (
-            <code className="bg-muted px-1 py-0.5 rounded text-[11px]" {...props}>
+            // --brand reads as a distinct token without competing with body text.
+            <code className="bg-muted text-brand px-1 py-0.5 rounded text-[11px]" {...props}>
               {showColor ? <ColorEnrichedText text={code} /> : children}
             </code>
           );

apps/vscode/webview-ui/src/components/ThinkingButton.tsx

@@ -33,8 +33,8 @@ export function ThinkingButton({ mode, effort, efforts = [], alwaysOn = false, d
       disabled={disabled || mode === "always"}
       className={cn(
         "flex items-center gap-0.5 justify-center h-6 min-w-6 px-1 rounded-md transition-all",
-        active ? "bg-primary/15 text-primary" : "bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground",
-        !disabled && mode !== "always" && "cursor-pointer hover:bg-primary/25",
+        active ? "bg-blue-500/15 text-blue-500" : "bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground",
+        !disabled && mode !== "always" && "cursor-pointer hover:bg-blue-500/25",
         (disabled || mode === "always") && "cursor-default",
       )}
     >

apps/vscode/webview-ui/src/components/WorkflowCard.tsx

@@ -41,22 +41,25 @@ function laneMostRecentToolLabel(lane: WorkflowLane): string | null {
 
 function StatusDot({ status }: { status: WorkflowLane["status"] }) {
   const color =
-    status === "running" ? "bg-primary" : status === "done" ? "bg-success" : status === "failed" ? "bg-destructive" : "bg-muted-foreground";
+    status === "running" ? "bg-brand" : status === "done" ? "bg-success" : status === "failed" ? "bg-destructive" : "bg-muted-foreground";
   return <span className={cn("inline-block size-2 rounded-full shrink-0", color)} />;
 }
 
 function LaneBar({ fraction, done }: { fraction: number; done: boolean }) {
   return (
     <div className="h-[3px] w-24 rounded-full bg-muted overflow-hidden shrink-0">
-      <div className={cn("h-full rounded-full", done ? "bg-success" : "bg-primary")} style={{ width: `${Math.round(fraction * 100)}%` }} />
+      <div className={cn("h-full rounded-full", done ? "bg-success" : "bg-brand")} style={{ width: `${Math.round(fraction * 100)}%` }} />
     </div>
   );
 }
 
 function LaneRow({ lane, maxSteps, renderStepItem }: { lane: WorkflowLane; maxSteps: number; renderStepItem: (item: UIStepItem) => ReactNode }) {
   const [expanded, setExpanded] = useState(false);
-  const fraction = maxSteps > 0 ? lane.stepCount / maxSteps : 0;
   const done = lane.status === "done";
+  // A finished lane always reads full: the bar is relative to the busiest agent,
+  // so a lane that did fewer steps than the busiest one would otherwise show a
+  // gap after it completed.
+  const fraction = done ? 1 : maxSteps > 0 ? lane.stepCount / maxSteps : 0;
   const queued = lane.status === "spawned" && lane.stepCount === 0;
   const runningToolLabel = lane.status === "running" ? laneMostRecentToolLabel(lane) : null;
   const duration = lane.startedAt !== undefined && lane.endedAt !== undefined ? formatDuration(lane.endedAt - lane.startedAt) : null;

apps/vscode/webview-ui/src/styles/index.css

@@ -14,20 +14,18 @@
   --card-foreground: oklch(0.141 0.005 285.823);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.141 0.005 285.823);
-  /* Brand periwinkle, matching the CLI (lightColors.primary). Was
-     oklch(0.21) — a near-black that made every accent surface read as an
-     unstyled dark chip. */
-  --primary: #4a5bc4;
+  --primary: oklch(0.21 0.006 285.885);
   --primary-foreground: oklch(1 0 0);
   --secondary: oklch(0.967 0.001 286.375);
   --secondary-foreground: oklch(0.21 0.006 285.885);
   --muted: oklch(0.967 0.001 286.375);
-  /* Periwinkle, matching the CLI palette (lightColors.primary). Plain grey at
-     this size read as disabled rather than secondary. */
-  --muted-foreground: #4a5bc4;
+  --muted-foreground: oklch(0.552 0.016 285.938);
   --accent: oklch(0.967 0.001 286.375);
   --accent-foreground: oklch(0.21 0.006 285.885);
   --destructive: oklch(0.577 0.245 27.325);
+  /* Muted periwinkle accent (CLI primary). Used for inline code and progress
+     fills — --primary is a near-black neutral and disappears against --muted. */
+  --brand: #4a5bc4;
   /* CLI lightColors.success — the "on" colour for toggles. */
   --success: #0e7a38;
   --success-foreground: oklch(1 0 0);
@@ -43,20 +41,17 @@
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.18 0.005 285.823);
   --popover-foreground: oklch(0.985 0 0);
-  /* Brand periwinkle, matching the CLI (darkColors.primary). The old
-     oklch(0.21) was DARKER than --input (oklch 0.274) and barely above the
-     background, so accent surfaces and "on" states disappeared in dark mode. */
-  --primary: #bbc6ff;
-  --primary-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.274 0.006 286.033);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.274 0.006 286.033);
-  /* Periwinkle, matching the CLI palette (darkColors.primary). The previous
-     near-neutral grey sat too close to the background to read at 11px. */
-  --muted-foreground: #bbc6ff;
+  --muted-foreground: oklch(0.705 0.015 286.067);
   --accent: oklch(0.274 0.006 286.033);
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
+  /* Muted periwinkle accent (CLI primary), dark variant. */
+  --brand: #aab3e8;
   /* CLI darkColors.success — the "on" colour for toggles. */
   --success: #4ec87e;
   --success-foreground: oklch(0.141 0.005 285.823);
@@ -110,6 +105,7 @@ body {
   --color-destructive: var(--destructive);
   --color-success: var(--success);
   --color-success-foreground: var(--success-foreground);
+  --color-brand: var(--brand);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);