Let an edge pulse end where it started, and draw what it carried

The pulse named its own end colour, so a selected edge decayed to the
neutral stroke and snapped back to blue — a second pulse. Dropping the
`to` keyframe lets the animation land on whatever the edge rests at.

Clicking an edge now shows the same sparkline the node panel draws for
that message, so a single value is read against how it has been moving.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01H7LwYgJfpkbLCTeiAf8U4A

frontend/src/components/Flow/EdgeInspector.tsx

@@ -11,6 +11,7 @@ import useCustomToast from "@/hooks/useCustomToast"
 import { cn } from "@/lib/utils"
 import { displayName } from "./deriveEdges"
 import { useLiveValue } from "./liveStore"
+import { MessageSparkline } from "./MessageSparkline"
 
 function relativeTime(ts: number | null | undefined): string {
   if (!ts) return "not seen yet"
@@ -173,6 +174,17 @@ export function EdgeInspector({
           </span>
         </div>
 
+        {/* The same curve the node panel draws for this message: one value
+            says little, how it has been moving says the rest. */}
+        {live === undefined ? null : (
+          <div className="mt-2">
+            <MessageSparkline
+              flow={flow}
+              name={displayName(flow, edge.message)}
+            />
+          </div>
+        )}
+
         {/* Several nodes can publish one message, and so can a dashboard or
             another flow — so the value alone does not say what caused it. */}
         {live?.source && live.source.kind !== "node" ? (

frontend/src/components/Flow/flow.css

@@ -37,15 +37,16 @@
     animation: edge-pulse var(--duration-pulse) var(--ease-emphasized);
   }
 
+  /*
+   * No `to` on purpose: the implied one is the edge's own resting style, so
+   * the decay lands exactly where it started rather than on a second colour
+   * that has to snap back — and a selected edge decays to its own blue.
+   */
   @keyframes edge-pulse {
     from {
       stroke: var(--primary);
       stroke-width: 2.5;
     }
-    to {
-      stroke: var(--xy-edge-stroke);
-      stroke-width: var(--xy-edge-stroke-width);
-    }
   }
 }