fix(sidebar): distinct fuchsia notification dot for update indicator (#708)

The pulsing dot signaling an available image update used --info (blue
hue 250), the same hue as --label-blue, so the two blended visually
when a stack carried a blue label. Introduce a dedicated --update
token in vibrant fuchsia (hue 320) sitting outside the label palette,
and render both the sidebar StackRow and the fleet NodeManager
indicator as a notification-dot pattern (solid stationary core with
animate-ping halo). Aligns with the design rule that static state
should not pulse.

frontend/src/components/NodeManager.tsx

@@ -602,8 +602,11 @@ export function NodeManager() {
                         )}
                         {(summary?.stacks_with_updates ?? 0) > 0 && (
                           <span className="flex items-center gap-1">
-                            <span className="w-2 h-2 rounded-full bg-info animate-pulse" />
-                            <span className="font-mono text-xs tabular-nums tracking-tight text-info">
+                            <span className="relative inline-flex w-2 h-2 shrink-0">
+                              <span className="absolute inset-0 rounded-full bg-update opacity-75 animate-ping" />
+                              <span className="relative w-2 h-2 rounded-full bg-update" />
+                            </span>
+                            <span className="font-mono text-xs tabular-nums tracking-tight text-update">
                               {summary!.stacks_with_updates}
                             </span>
                           </span>

frontend/src/components/sidebar/StackRow.tsx

@@ -72,7 +72,12 @@ export function StackRow(props: StackRowProps) {
       )}
       {hasUpdate && (
         <RowTooltip
-          trigger={<span className="w-2 h-2 rounded-full bg-info animate-pulse" />}
+          trigger={(
+            <span className="relative inline-flex w-2 h-2 shrink-0">
+              <span className="absolute inset-0 rounded-full bg-update opacity-75 animate-ping" />
+              <span className="relative w-2 h-2 rounded-full bg-update" />
+            </span>
+          )}
           label="Update available"
         />
       )}

frontend/src/index.css

@@ -48,6 +48,9 @@
   --info: oklch(0.62 0.14 250);
   --info-foreground: oklch(1 0 0);
   --info-muted: oklch(0.62 0.14 250 / 0.12);
+  --update: oklch(0.62 0.22 320);
+  --update-foreground: oklch(1 0 0);
+  --update-muted: oklch(0.62 0.22 320 / 0.12);
   --destructive-muted: oklch(0.63 0.19 23 / 0.12);
 
   /* Charts — cyan leads as the primary data color, amber for peaks, rose for errors */
@@ -221,6 +224,9 @@
   --info: oklch(0.70 0.14 250);
   --info-foreground: oklch(0.10 0 0);
   --info-muted: oklch(0.70 0.14 250 / 0.15);
+  --update: oklch(0.72 0.20 320);
+  --update-foreground: oklch(0.10 0 0);
+  --update-muted: oklch(0.72 0.20 320 / 0.15);
   --destructive-muted: oklch(0.69 0.20 24 / 0.15);
 
   /* Charts — cyan leads as the primary data color, amber for peaks, rose for errors */
@@ -393,6 +399,9 @@
   --color-info: var(--info);
   --color-info-foreground: var(--info-foreground);
   --color-info-muted: var(--info-muted);
+  --color-update: var(--update);
+  --color-update-foreground: var(--update-foreground);
+  --color-update-muted: var(--update-muted);
   --color-destructive-muted: var(--destructive-muted);
 
   --font-sans: var(--font-sans);