diff --git a/web/hwlab-cloud-web/scripts/agent-observer-ui-contract.test.ts b/web/hwlab-cloud-web/scripts/agent-observer-ui-contract.test.ts
index a19295e2..05b23d0f 100644
--- a/web/hwlab-cloud-web/scripts/agent-observer-ui-contract.test.ts
+++ b/web/hwlab-cloud-web/scripts/agent-observer-ui-contract.test.ts
@@ -96,6 +96,8 @@ test("AgentRun mind map connects custom nodes through Vue Flow handles", () => {
   assert.match(mindMapSource, /<Handle v-if="data\.row\.childCount > 0" type="source" :position="Position\.Right" \/>/);
   assert.match(styleSource, /agent-mind-map-flow \.vue-flow__handle/);
   assert.match(styleSource, /agent-mind-map-flow \.vue-flow__edge-path \{[^}]*vector-effect: non-scaling-stroke;/);
+  assert.match(styleSource, /agent-mind-map-flow \.vue-flow__edge-path \{[^}]*stroke: var\(--console-graphite-500\);/);
+  assert.match(styleSource, /agent-mind-map-flow \.vue-flow__arrowhead \{ fill: var\(--console-graphite-500\); \}/);
 });
 
 test("AgentRun inspector keeps chrome fixed and scrolls only its body", () => {
diff --git a/web/hwlab-cloud-web/src/styles/agent-observer.css b/web/hwlab-cloud-web/src/styles/agent-observer.css
index e63b7fd0..9801c50d 100644
--- a/web/hwlab-cloud-web/src/styles/agent-observer.css
+++ b/web/hwlab-cloud-web/src/styles/agent-observer.css
@@ -102,8 +102,8 @@
 .agent-mind-map-flow { width: 100%; height: 100%; }
 .agent-mind-map-flow .vue-flow__pane { cursor: grab; }
 .agent-mind-map-flow .vue-flow__pane.dragging { cursor: grabbing; }
-.agent-mind-map-flow .vue-flow__edge-path { stroke: color-mix(in srgb, var(--console-muted) 68%, var(--console-text)); stroke-width: 2; vector-effect: non-scaling-stroke; }
-.agent-mind-map-flow .vue-flow__arrowhead { fill: color-mix(in srgb, var(--console-muted) 68%, var(--console-text)); }
+.agent-mind-map-flow .vue-flow__edge-path { stroke: var(--console-graphite-500); stroke-width: 2; vector-effect: non-scaling-stroke; }
+.agent-mind-map-flow .vue-flow__arrowhead { fill: var(--console-graphite-500); }
 .agent-mind-map-flow .vue-flow__handle { width: 1px; height: 1px; min-width: 1px; min-height: 1px; border: 0; opacity: 0; pointer-events: none; }
 .agent-mind-map-node { width: 220px; height: 70px; min-width: 0; display: grid; grid-template-rows: 19px 1fr 16px; gap: 2px; padding: 7px 9px; border: 1px solid var(--console-border); border-left: 3px solid var(--console-muted); border-radius: 5px; background: var(--console-surface); color: var(--console-text); outline: 0; box-shadow: 0 2px 7px rgb(15 23 42 / 8%); cursor: pointer; }
 .agent-mind-map-node[data-kind="scope"] { width: 260px; }