fix(ui): pin lucide icon rasters globally to stop subpixel wobble

apps/staged/src/app.css

@@ -216,7 +216,18 @@ body {
   background: var(--scrollbar-thumb-hover);
 }
 
-/* Keep compositor hints limited to tiny glyph and badge surfaces. */
+/* Pin tiny glyph rasters on their own compositor layer so repaints
+   can't re-snap them (WKWebView subpixel wobble). Every lucide icon
+   is covered by default; .stable-raster(-glyphs) remain for the few
+   non-lucide raster surfaces.
+
+   Spinning icons are excluded: Tailwind's spin keyframes only define
+   `to { rotate(360deg) }`, so the implicit `from` frame would inherit
+   this translateZ(0) — mismatched transform lists then interpolate via
+   matrices, where rotate(360deg) is the identity, freezing the spinner.
+   A continuously rotating icon can't wobble and is layer-promoted while
+   animating anyway. */
+svg.lucide:not(.animate-spin),
 .stable-raster,
 .stable-raster-glyphs svg {
   transform: translateZ(0);

apps/staged/src/lib/components/ui/badge/badge.svelte

@@ -2,7 +2,7 @@
   import { type VariantProps, tv } from 'tailwind-variants';
 
   export const badgeVariants = tv({
-    base: 'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-[color,background-color,border-color,box-shadow,opacity] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge stable-raster stable-raster-glyphs inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:ring-[3px] [&>svg]:pointer-events-none',
+    base: 'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-[color,background-color,border-color,box-shadow,opacity] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge stable-raster inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:ring-[3px] [&>svg]:pointer-events-none',
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',

apps/staged/src/lib/components/ui/button/button.svelte

@@ -4,7 +4,7 @@
   import { type VariantProps, tv } from 'tailwind-variants';
 
   export const buttonVariants = tv({
-    base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button stable-raster-glyphs inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-[color,background-color,border-color,box-shadow,opacity] outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-[color,background-color,border-color,box-shadow,opacity] outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
     variants: {
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary/80',

apps/staged/src/lib/features/agents/AgentIcon.svelte

@@ -16,6 +16,10 @@
   monochrome and inherit currentColor. Goose is a PNG tinted via a CSS mask
   (ported from goose-internal's GooseIcon).
 
+  The raw brand marks aren't lucide icons, so the global svg.lucide
+  compositor pin doesn't reach them — they opt into stable-raster to
+  avoid WKWebView subpixel wobble.
+
   Props:
     id    - provider id (the join key shared by the picker and Doctor)
     size  - icon dimensions in px (default 16)
@@ -40,11 +44,14 @@
 </script>
 
 {#if id === 'goose'}
-  <span class="agent-icon goose {className}" aria-hidden="true" style="--agent-icon-size: {size}px"
+  <span
+    class="agent-icon goose stable-raster {className}"
+    aria-hidden="true"
+    style="--agent-icon-size: {size}px"
   ></span>
 {:else if id === 'claude'}
   <svg
-    class={className}
+    class="stable-raster {className}"
     width={size}
     height={size}
     viewBox="0 0 24 24"
@@ -60,7 +67,7 @@
   </svg>
 {:else if id === 'codex'}
   <svg
-    class={className}
+    class="stable-raster {className}"
     width={size}
     height={size}
     viewBox="0 0 24 24"
@@ -86,7 +93,7 @@
   </svg>
 {:else if id === 'amp'}
   <svg
-    class={className}
+    class="stable-raster {className}"
     width={size}
     height={size}
     viewBox="0 0 24 24"
@@ -109,7 +116,7 @@
   </svg>
 {:else if id === 'copilot'}
   <svg
-    class={className}
+    class="stable-raster {className}"
     width={size}
     height={size}
     viewBox="0 0 24 24"
@@ -126,7 +133,7 @@
   </svg>
 {:else if id === 'cursor'}
   <svg
-    class={className}
+    class="stable-raster {className}"
     width={size}
     height={size}
     viewBox="0 0 24 24"

apps/staged/src/lib/features/timeline/TimelineRow.svelte

@@ -362,7 +362,7 @@
             {/if}
             {#if badges}
               {#each badges as badge}
-                <span class="meta-badge stable-raster stable-raster-glyphs">
+                <span class="meta-badge stable-raster">
                   {#if badge.icon === 'warning'}
                     <AlertTriangle size={10} />
                   {:else}