fix(library): drop the pinned-grip centre dot; keep a plain white handle

The filled centre dot marking a pinned end read as cluttered. Pinned and auto ends now
render the same clean white-with-outline grip; the fill still differs from the solid
bend handle, so a pinned end never merges into an overlapping handle. Pinned state is
surfaced by the edge toolbar's reset affordance, not by restyling the grip. The
`--pinned` class and its count (edge-auto-reset) are unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: FelixTJDietrich

library/lib/edges/GenericEdge.tsx

@@ -293,8 +293,8 @@ export const EdgeEndpointMarkers = ({
   // this end's terminal bend handle instead of painting over it.
   bendHandles?: BendHandle[]
   // Whether each end is USER-PINNED (a custom anchor) rather than auto-anchored.
-  // A pinned grip gets a filled centre dot when the edge is selected, so the user
-  // can see at a glance which ends the router still owns and which they have fixed.
+  // Kept as a prop/class for the reset affordance and tests; the grip itself looks the
+  // same either way (a clean white handle), so nothing clutters the endpoint.
   sourcePinned?: boolean
   targetPinned?: boolean
 }) => {
@@ -467,27 +467,6 @@ export const EdgeEndpointMarkers = ({
             transform={`rotate(${targetGrip.rotationDeg} ${targetGrip.centerX} ${targetGrip.centerY})`}
             pointerEvents="none"
           />
-          {/* A USER-PINNED end keeps the white "handle" look (so it never merges with a
-              solid bend handle it may overlap) and marks itself with a filled centre dot
-              — "you fixed this end" — rather than a solid fill. */}
-          {sourcePinned && (
-            <circle
-              className="edge-endpoint-grip-dot"
-              cx={sourceGrip.centerX}
-              cy={sourceGrip.centerY}
-              r={FREEFORM_ENDPOINT_GRIP_RADIUS * screenScale}
-              pointerEvents="none"
-            />
-          )}
-          {targetPinned && (
-            <circle
-              className="edge-endpoint-grip-dot"
-              cx={targetGrip.centerX}
-              cy={targetGrip.centerY}
-              r={FREEFORM_ENDPOINT_GRIP_RADIUS * screenScale}
-              pointerEvents="none"
-            />
-          )}
         </>
       )}
       <rect

library/lib/styles/app.css

@@ -963,21 +963,10 @@
   );
 }
 
-/* A USER-PINNED end (custom anchor) keeps the same white "handle" look as an
-   auto grip — so it never disappears into a solid bend handle it overlaps — and
-   is marked instead by a filled centre dot ("you fixed this end"). The dot rides
-   the same hover/selected visibility gate as the grip. */
-.edge-endpoint-grip-dot {
-  opacity: 0;
-  fill: var(--apollon-primary, #3e8acc);
-  stroke: none;
-  transition: opacity 120ms ease;
-  vector-effect: non-scaling-stroke;
-}
-.react-flow__edge:hover .edge-endpoint-grip-dot,
-.react-flow__edge.selected .edge-endpoint-grip-dot {
-  opacity: 1;
-}
+/* A USER-PINNED end (custom anchor) keeps the same clean white "handle" look as an
+   auto grip — a hollow pill with a blue outline — so it never disappears into a solid
+   bend handle it overlaps. The pinned state is surfaced through the reset affordance in
+   the edge toolbar rather than by restyling the grip. */
 
 .react-flow__edge:hover .edge-bend-handle:hover,
 .react-flow__edge.selected .edge-bend-handle:hover {

standalone/webapp/tests/e2e/short-edge-endpoint-handles.spec.ts

@@ -84,7 +84,6 @@ test("a short pinned S-jog edge keeps usable endpoint grips and still shows its
     }
     return {
       bendHandles: document.querySelectorAll(".edge-bend-handle").length,
-      pinnedDots: document.querySelectorAll(".edge-endpoint-grip-dot").length,
       sg: m(".edge-endpoint-grip--source"),
       tg: m(".edge-endpoint-grip--target"),
       gripFill: fillOf(".edge-endpoint-grip--source"),
@@ -98,8 +97,7 @@ test("a short pinned S-jog edge keeps usable endpoint grips and still shows its
     expect(Math.max(grip!.w, grip!.h)).toBeGreaterThanOrEqual(10)
   }
   expect(info.bendHandles).toBeGreaterThan(0)
-  // The pinned grips read as WHITE-with-outline handles marked by a centre dot — NOT a
-  // solid blue fill that would merge into the (solid blue) bend handle they overlap.
-  expect(info.pinnedDots).toBe(2)
+  // The grips read as WHITE-with-outline handles — a fill distinct from the (solid blue)
+  // bend handle they overlap, so a pinned end never merges into it.
   expect(info.gripFill).not.toBe(info.bendFill)
 })