angle node kind of working

frontend/src/styles.css

@@ -932,6 +932,105 @@ html, body, #root {
   opacity: 0.9;
 }
 
+.angle-overlay {
+  --angle-line-color: #ff0000;
+  --angle-arc-color: rgb(255, 107, 107);
+  --angle-end-handle-color: #ff0000;
+  --angle-mid-handle-color: rgb(255, 184, 184);
+  --angle-badge-text-color: rgb(255, 184, 184);
+  --angle-badge-border-color: rgb(255, 82, 82);
+  --angle-line-thickness: 1.35;
+  --angle-arc-thickness: 1.05;
+  position: relative;
+  overflow: hidden;
+  user-select: none;
+  touch-action: none;
+  background: var(--bg-deep);
+  border: 1px solid var(--border-default);
+  border-radius: 6px;
+}
+
+.angle-image {
+  width: 100%;
+  display: block;
+}
+
+.angle-svg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.angle-line {
+  stroke: var(--angle-line-color);
+  stroke-width: var(--angle-line-thickness);
+  stroke-linecap: round;
+}
+
+.angle-arc {
+  fill: none;
+  stroke: var(--angle-arc-color);
+  stroke-width: var(--angle-arc-thickness);
+  stroke-dasharray: 5 3;
+  opacity: 0.95;
+}
+
+.angle-handle {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--bg-deep);
+  cursor: grab;
+  box-shadow: 0 0 6px var(--marker-shadow);
+  z-index: 1;
+}
+
+.angle-handle:active {
+  cursor: grabbing;
+}
+
+.angle-handle-end {
+  background: var(--angle-end-handle-color);
+  border: 1px solid var(--marker-border);
+}
+
+.angle-handle-mid {
+  width: 18px;
+  height: 18px;
+  background: var(--angle-mid-handle-color);
+  border: 2px solid var(--marker-border);
+}
+
+.angle-badge {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  padding: 3px 7px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.9);
+  border: 1px solid var(--angle-badge-border-color);
+  color: var(--angle-badge-text-color);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.35);
+  cursor: grab;
+  user-select: none;
+  z-index: 1;
+}
+
+.angle-badge:active {
+  cursor: grabbing;
+}
+
 .lineplot-overlay {
   width: 100%;
   aspect-ratio: 32 / 22;