jobq-graph: animate new-node mount and state-change flash

Two of the three motion gaps mara flagged on the swarm-ui jobs graph
(the third, node status changes as a tree of nesting divs rather than
a node-link diagram, has no edges to animate today — see the issue
thread for that scoping correction).

- New node mount: .jg-node gets a fade+slide-in keyframe. No JS change
  needed — Preact only creates a new .jg-node DOM node when its key
  (the node id) is genuinely new, so this only plays on first
  appearance, not every fetch re-render.
- State change flash: NodeView tracks each node's previous state via
  a ref; on a real change it adds .jg-state-flash to the glyph span
  (removed on animationend), driving a scale pulse.

Both follow the same three-rule motion-guard shape as Shell.css's
shell-page-enter / LinksMenu.css's links-menu-popover-enter.

frontend/packages/shared/src/jobq-graph/JobqGraph.tsx

@@ -28,7 +28,7 @@
 // loader is `text` (for unrelated shadow-DOM components' CSS-as-string
 // needs), and that loader is global per call, not per-module.
 
-import { useState, useEffect, useCallback } from 'preact/hooks';
+import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
 
 // Mirrors `hive_jobq_wire::StateSchema` verbatim (variant names, no
 // `rename_all`) — see that enum's own doc comment for why it's kept in
@@ -159,11 +159,26 @@ function NodeView({
 }) {
   const glyph = STATE_GLYPH[n.state] || '?';
   const showCancel = cancellable && CANCELLABLE_STATES.has(n.state);
+  // Flash the state glyph on a genuine state change (Pending → Running,
+  // etc.), not on mount — `prevState` starts at the node's own initial
+  // state, so the first render never flashes. Does not fire on every
+  // fetch: `n` is a fresh object each snapshot (see `buildTree`), but
+  // its `.state` value is only actually different when the job's real
+  // state moved.
+  const prevState = useRef(n.state);
+  const [flashing, setFlashing] = useState(false);
+  useEffect(() => {
+    if (prevState.current !== n.state) {
+      prevState.current = n.state;
+      setFlashing(true);
+    }
+  }, [n.state]);
   return (
     <div class="jg-node">
       <div class="jg-row">
-        <span class={'jg-state jg-state-' + n.state.toLowerCase()}
-          title={n.state + (n.error ? ' — ' + n.error : '')}>
+        <span class={'jg-state jg-state-' + n.state.toLowerCase() + (flashing ? ' jg-state-flash' : '')}
+          title={n.state + (n.error ? ' — ' + n.error : '')}
+          onAnimationEnd={() => setFlashing(false)}>
           {glyph}
         </span>
         {' '}