frontend/src/components/simulator/SimulatorCanvas.tsx

@@ -230,7 +230,6 @@ export const SimulatorCanvas = () => {
   const currentTouchRef = useRef({ x: 0, y: 0 }); // latest screen position for timeout callback
   const [wireAiming, setWireAiming] = useState(false); // React state for rendering (crosshair visible)
   const [aimPosition, setAimPosition] = useState<{ x: number; y: number } | null>(null); // world coords of crosshair
-  const [aimHoveredPinName, setAimHoveredPinName] = useState<string | null>(null); // Name of pin hovered by crosshair
 
   // Convert viewport coords to world (canvas) coords
   const toWorld = useCallback((screenX: number, screenY: number) => {
@@ -403,9 +402,6 @@ export const SimulatorCanvas = () => {
       // Any phase that uses aiming: cancel previous timer first
       if (wireAimingTimerRef.current) { clearTimeout(wireAimingTimerRef.current); wireAimingTimerRef.current = null; }
 
-      // Check if touch is on a segment handle - if so, skip aiming timer (handle drag takes priority)
-      const isOnSegmentHandle = target?.closest('[data-segment-handle]');
-
       const aimPhase = wireAimingPhaseRef.current;
 
       // Already in an aiming phase (aiming_start or aiming_end) → touch updates crosshair immediately
@@ -419,26 +415,16 @@ export const SimulatorCanvas = () => {
 
       // wire_started → long press to aim for endpoint, short drag = pan
       if (aimPhase === 'wire_started') {
-        // Only start aiming timer if NOT on a segment handle
+        wireAimingTimerRef.current = setTimeout(() => {
-        if (!isOnSegmentHandle) {
+          wireAimingPhaseRef.current = 'aiming_end';
-          wireAimingTimerRef.current = setTimeout(() => {
+          setWireAiming(true);
-            // Double-check: only activate if segment drag hasn't started
+          if (navigator.vibrate) navigator.vibrate(30);
-            if (segmentDragRef.current) return;
+          const world = toWorld(currentTouchRef.current.x, currentTouchRef.current.y);
-            wireAimingPhaseRef.current = 'aiming_end';
+          const aimX = world.x;
-            setWireAiming(true);
+          const aimY = world.y + AIMING_OFFSET_Y;
-            if (navigator.vibrate) navigator.vibrate(30);
+          setAimPosition({ x: aimX, y: aimY });
-            const world = toWorld(currentTouchRef.current.x, currentTouchRef.current.y);
+          useSimulatorStore.getState().updateWireInProgress(aimX, aimY);
-            const aimX = world.x;
+        }, AIMING_LONG_PRESS_MS);
-            const aimY = world.y + AIMING_OFFSET_Y;
-            setAimPosition({ x: aimX, y: aimY });
-            
-            const snapDist = AIMING_PIN_SNAP_DIST / zoomRef.current;
-            const nearPin = findNearestPin(aimX, aimY, snapDist);
-            setAimHoveredPinName(nearPin ? nearPin.pinName : null);
-            
-            useSimulatorStore.getState().updateWireInProgress(aimX, aimY);
-          }, AIMING_LONG_PRESS_MS);
-        }
 
         isPanningRef.current = true;
         panStartRef.current = {
@@ -493,21 +479,13 @@ export const SimulatorCanvas = () => {
         }
       } else {
         // ── 6. Empty canvas → start pan + long press starts aiming (idle phase only) ──
-        if (aimPhase === 'idle' && !isOnSegmentHandle) {
+        if (aimPhase === 'idle') {
           wireAimingTimerRef.current = setTimeout(() => {
-            // Double-check: only activate if segment drag hasn't started
-            if (segmentDragRef.current) return;
             wireAimingPhaseRef.current = 'aiming_start';
             setWireAiming(true);
             if (navigator.vibrate) navigator.vibrate(30);
             const world = toWorld(currentTouchRef.current.x, currentTouchRef.current.y);
-            const aimX = world.x;
+            setAimPosition({ x: world.x, y: world.y + AIMING_OFFSET_Y });
-            const aimY = world.y + AIMING_OFFSET_Y;
-            setAimPosition({ x: aimX, y: aimY });
-            
-            const snapDist = AIMING_PIN_SNAP_DIST / zoomRef.current;
-            const nearPin = findNearestPin(aimX, aimY, snapDist);
-            setAimHoveredPinName(nearPin ? nearPin.pinName : null);
           }, AIMING_LONG_PRESS_MS);
         }
         isPanningRef.current = true;
@@ -560,11 +538,6 @@ export const SimulatorCanvas = () => {
 
       // ── Segment drag (wire editing) via touch ──
       if (segmentDragRef.current) {
-        // Cancel any pending aiming timer - segment drag takes priority
-        if (wireAimingTimerRef.current) {
-          clearTimeout(wireAimingTimerRef.current);
-          wireAimingTimerRef.current = null;
-        }
         const world = toWorld(touch.clientX, touch.clientY);
         const sd = segmentDragRef.current;
         sd.isDragging = true;
@@ -584,11 +557,6 @@ export const SimulatorCanvas = () => {
         const aimX = world.x;
         const aimY = world.y + AIMING_OFFSET_Y;
         setAimPosition({ x: aimX, y: aimY });
-        
-        const snapDist = AIMING_PIN_SNAP_DIST / zoomRef.current;
-        const nearPin = findNearestPin(aimX, aimY, snapDist);
-        setAimHoveredPinName(nearPin ? nearPin.pinName : null);
-
         if (aimPhase === 'aiming_end') {
           useSimulatorStore.getState().updateWireInProgress(aimX, aimY);
         }
@@ -704,7 +672,7 @@ export const SimulatorCanvas = () => {
         const snapDist = AIMING_PIN_SNAP_DIST / zoomRef.current;
         const nearPin = findNearestPin(aimX, aimY, snapDist);
 
-        setWireAiming(false); setAimPosition(null); setAimHoveredPinName(null);
+        setWireAiming(false); setAimPosition(null);
         if (nearPin) {
           // Start wire from this pin
           startWireCreation(
@@ -728,7 +696,7 @@ export const SimulatorCanvas = () => {
         const snapDist = AIMING_PIN_SNAP_DIST / zoomRef.current;
         const nearPin = findNearestPin(aimX, aimY, snapDist);
 
-        setWireAiming(false); setAimPosition(null); setAimHoveredPinName(null);
+        setWireAiming(false); setAimPosition(null);
         if (nearPin) {
           // Finish wire at this pin
           finishWireCreation({ componentId: nearPin.componentId, pinName: nearPin.pinName, x: nearPin.x, y: nearPin.y });
@@ -1740,27 +1708,6 @@ export const SimulatorCanvas = () => {
                 <circle cx={aimPosition.x} cy={aimPosition.y} r="2" fill="rgba(0, 200, 255, 0.9)" />
               </svg>
             )}
-
-            {/* Aim Hover Tooltip for Touch Devices */}
-            {wireAiming && aimPosition && aimHoveredPinName && (
-              <div style={{
-                position: 'absolute',
-                left: aimPosition.x + 15,
-                top: aimPosition.y - 20,
-                backgroundColor: 'rgba(0, 0, 0, 0.8)',
-                color: 'white',
-                padding: '4px 8px',
-                borderRadius: '4px',
-                fontSize: '12px',
-                pointerEvents: 'none',
-                zIndex: 45,
-                whiteSpace: 'nowrap',
-                boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
-                border: '1px solid rgba(255,255,255,0.1)'
-              }}>
-                {aimHoveredPinName}
-              </div>
-            )}
           </div>
 
           {/* Wire creation mode banner — visible on both desktop and mobile */}

frontend/src/components/simulator/WireLayer.tsx

@@ -55,23 +55,19 @@ export const WireLayer: React.FC<WireLayerProps> = ({
         zIndex: 35,
       }}
     >
-      {wires.map((wire) => {
+      {wires.map((wire) => (
-        // Skip null/undefined wires (can happen during circuit loading)
+        <WireRenderer
-        if (!wire) return null;
+          key={wire.id}
-        return (
+          wire={wire}
-          <WireRenderer
+          isSelected={wire.id === selectedWireId}
-            key={wire.id}
+          isHovered={wire.id === hoveredWireId}
-            wire={wire}
+          overridePath={
-            isSelected={wire.id === selectedWireId}
+            segmentDragPreview?.wireId === wire.id
-            isHovered={wire.id === hoveredWireId}
+              ? segmentDragPreview.overridePath
-            overridePath={
+              : undefined
-              segmentDragPreview?.wireId === wire.id
+          }
-                ? segmentDragPreview.overridePath
+        />
-                : undefined
+      ))}
-            }
-          />
-        );
-      })}
 
       {/* Segment handles for the selected wire — scaled inversely to zoom for constant screen size */}
       {segmentHandles.map((handle) => {
@@ -88,7 +84,6 @@ export const WireLayer: React.FC<WireLayerProps> = ({
             stroke="#007acc"
             strokeWidth={sw}
             style={{ pointerEvents: 'all', cursor: handle.axis === 'horizontal' ? 'ns-resize' : 'ew-resize', touchAction: 'none' }}
-            data-segment-handle={handle.segIndex}
             onMouseDown={(e) => onHandleMouseDown(e, handle.segIndex)}
             onTouchStart={(e) => onHandleTouchStart?.(e, handle.segIndex)}
           />

frontend/src/components/simulator/WireRenderer.tsx

@@ -24,9 +24,6 @@ export const WireRenderer: React.FC<WireRendererProps> = ({
   previewWaypoints,
   overridePath,
 }) => {
-  // Guard against null/undefined wire
-  if (!wire || !wire.start || !wire.end) return null;
-
   const waypoints = previewWaypoints ?? wire.waypoints;
   const path = overridePath ?? generateOrthogonalPath(wire.start, waypoints, wire.end);
 

frontend/src/services/EmbedBridge.ts

@@ -92,9 +92,7 @@ class EmbedBridge {
 
         // Set wires if provided
         if (data.wires && Array.isArray(data.wires)) {
-          // Filter out null/undefined wires to prevent runtime errors
+          store.setWires(data.wires as never[]);
-          const validWires = data.wires.filter((w) => w && w.start && w.end && w.id) as never[];
-          store.setWires(validWires);
         }
         break;
       }