diff --git a/js/renderer.js b/js/renderer.js
index a1b1259..71b12f6 100644
--- a/js/renderer.js
+++ b/js/renderer.js
@@ -7,6 +7,20 @@ import { getBusPairs } from './bus.js';
 
 let canvas, ctx;
 
+/**
+ * Read the value arriving at an input port by looking up the source gate/port.
+ * Handles multi-output sources (BUS_OUT, COMPONENT) via outputValues[].
+ */
+function getSourcePortValue(conn) {
+    if (!conn) return 0;
+    const srcGate = state.gates.find(g => g.id === conn.from);
+    if (!srcGate) return 0;
+    if (srcGate.outputValues && conn.fromPort < srcGate.outputValues.length) {
+        return srcGate.outputValues[conn.fromPort] || 0;
+    }
+    return srcGate.value || 0;
+}
+
 export function initRenderer() {
     canvas = document.getElementById('canvas');
     ctx = canvas.getContext('2d');
@@ -117,7 +131,7 @@ function drawGate(gate) {
             state.hoveredPort.index === p.index &&
             state.hoveredPort.type === 'input';
         const conn = state.connections.find(c => c.to === gate.id && c.toPort === p.index);
-        const portActive = conn ? state.gates.find(g => g.id === conn.from)?.value : 0;
+        const portActive = getSourcePortValue(conn);
 
         ctx.beginPath();
         ctx.arc(p.x, p.y, PORT_R, 0, Math.PI * 2);
@@ -201,8 +215,7 @@ function drawBusGate(gate) {
                 state.hoveredPort.index === p.index &&
                 state.hoveredPort.type === 'input';
             const conn = state.connections.find(c => c.to === gate.id && c.toPort === p.index);
-            const srcGate = conn ? state.gates.find(g => g.id === conn.from) : null;
-            const portActive = srcGate ? (srcGate.outputValues ? (srcGate.outputValues[conn.fromPort] || 0) : srcGate.value) : 0;
+            const portActive = getSourcePortValue(conn);
 
             ctx.beginPath();
             ctx.arc(p.x, p.y, PORT_R - 1, 0, Math.PI * 2);
@@ -351,7 +364,7 @@ function drawComponentGate(gate) {
             state.hoveredPort.index === p.index &&
             state.hoveredPort.type === 'input';
         const conn = state.connections.find(c => c.to === gate.id && c.toPort === p.index);
-        const portActive = conn ? state.gates.find(g => g.id === conn.from)?.value : 0;
+        const portActive = getSourcePortValue(conn);
 
         ctx.beginPath();
         ctx.arc(p.x, p.y, PORT_R, 0, Math.PI * 2);