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.

docs/features/multi-node.mdx

@@ -77,7 +77,7 @@ The Nodes table surfaces scheduling and update status at a glance for each node:
 | Column | What it shows |
 |--------|---------------|
 | **Schedules** | Number of active scheduled tasks targeting this node, plus a relative countdown to the next run (e.g. "next 2h") |
-| **Updates** | Whether auto-update policies are enabled ("Auto" badge), and how many stacks have pending image updates (pulsing blue dot with count) |
+| **Updates** | Whether auto-update policies are enabled ("Auto" badge), and how many stacks have pending image updates (fuchsia notification dot with expanding halo and a count) |
 
 Click the **calendar icon** on any node row to jump directly to the Schedules view filtered to that node. From there you can create, edit, or manage scheduled tasks scoped to the selected node. The filter bar shows which node you are viewing, with a **Clear filter** button to return to the full list.
 

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);