Add moving ant particles, fix ACO trail render, more contrast fixes

The ACO trail glow was silently never rendering: the .then(js=...)
step after run_swarm_gen read swarm_state, a gr.State, but gr.State
values aren't mirrored to the client the way JSON/HTML component
values are, so the JS callback always got an empty payload. Route
the swarm data through a hidden gr.JSON bridge (swarm_data_json)
instead, matching the pattern that already worked for the graph
render step.

Also add actual moving ant particles (small glowing dots walking the
top-tau edges via requestAnimationFrame) since only static trail
glow existed before, and force !important on toolbar button
backgrounds, node-detail bold values, and the Insights placeholder
text -- Gradio's own stylesheet was still winning those.

app.py

@@ -829,7 +829,7 @@ def handle_upload(file):
 
 def clear_all():
     return (
-        "", None, EMPTY_STATS_HTML, EMPTY_SWARM_HTML, None, None, None,
+        "", None, EMPTY_STATS_HTML, EMPTY_SWARM_HTML, None, None, None, None,
         "Build a graph first, then click **Generate Insights**.",
     )
 
@@ -845,11 +845,11 @@ def run_swarm_gen(graph_state, algo_state):
     last = None
     for progress in acs.run(n_ants=40, n_iter=30):
         last = progress
-        yield render_swarm_progress_html(G, progress, running=True), progress
+        yield render_swarm_progress_html(G, progress, running=True), progress, progress
 
     insights = compute_swarm_insights(G, algo_state, last)
     last = {**last, "insights": insights}
-    yield render_swarm_progress_html(G, last, running=False, insights=insights), last
+    yield render_swarm_progress_html(G, last, running=False, insights=insights), last, last
 
 
 # ═══════════════════════════════════════════════════════════════════════════
@@ -914,6 +914,7 @@ gradio-app, .gradio-container, body {
 .nd-name { font-family: var(--font-head); font-size: 14px; margin-bottom: 4px; color: var(--cyan) !important; }
 .nd-type { font-family: var(--font-mono); font-size: 9px; color: var(--fog) !important; letter-spacing: 0.08em; margin-bottom: 6px; }
 .nd-info { font-family: var(--font-body); font-size: 11.5px; color: var(--ice) !important; opacity: 0.95; line-height: 1.55; }
+.nd-info b { color: var(--cyan) !important; font-weight: 700; }
 .nd-placeholder { color: var(--fog) !important; font-style: italic; font-size: 11px; }
 #entity-preview { font-family: var(--font-mono); font-size: 10.5px; color: var(--lime) !important; }
 
@@ -999,11 +1000,14 @@ gradio-app, .gradio-container, body {
 }
 .ov-toolbar { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; z-index: 5; max-width: 70%; }
 .ov-btn {
-  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase;
-  padding: 6px 10px; border: 1px solid var(--border); background: rgba(6,13,24,0.85); color: var(--fog) !important;
-  cursor: pointer; backdrop-filter: blur(6px); border-radius: 3px; transition: all 0.15s;
+  font-family: var(--font-mono) !important; font-size: 9px !important; letter-spacing: 0.07em; text-transform: uppercase;
+  padding: 6px 10px; border: 1px solid var(--border) !important; background: rgba(6,13,24,0.9) !important; color: var(--fog) !important;
+  cursor: pointer; backdrop-filter: blur(6px); border-radius: 3px; transition: all 0.15s; box-shadow: none !important;
+}
+.ov-btn:hover, .ov-btn.active {
+  border-color: var(--cyan) !important; color: var(--cyan) !important; background: rgba(0,229,255,0.16) !important;
+  box-shadow: 0 0 10px rgba(0,229,255,0.3) !important;
 }
-.ov-btn:hover, .ov-btn.active { border-color: var(--cyan); color: var(--cyan) !important; background: rgba(0,229,255,0.12); box-shadow: 0 0 10px rgba(0,229,255,0.3); }
 .legend { position: absolute; bottom: 12px; right: 12px; display: flex; gap: 10px; flex-wrap: wrap; z-index: 5; max-width: 55%; justify-content: flex-end; }
 .legend-item { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 9px; color: var(--fog) !important; }
 .legend-dot { width: 8px; height: 8px; border-radius: 2px; }
@@ -1029,6 +1033,10 @@ gradio-app, .gradio-container, body {
 .cm-item:hover { background: rgba(0,229,255,0.12); color: var(--cyan) !important; }
 
 #insights-output { font-family: var(--font-body) !important; }
+#insights-output, #insights-output p, #insights-output li, #insights-output span, #insights-output div {
+  color: var(--ice) !important;
+}
+#insights-output strong, #insights-output b { color: var(--cyan) !important; }
 #insights-output h2 {
   font-family: var(--font-head) !important; font-size: 12px !important; letter-spacing: 0.07em;
   text-transform: uppercase; color: var(--plasma) !important; border-bottom: 1px solid var(--border);
@@ -1093,6 +1101,7 @@ function shapePath(type, r) {{
 const SKG = {{ state: {{}} }};
 
 SKG.clearGraph = function() {{
+  if (SKG.antsRafId) {{ cancelAnimationFrame(SKG.antsRafId); SKG.antsRafId = null; }}
   d3.select('#graph-svg').selectAll('*').remove();
   d3.select('#minimap-svg').selectAll('*').remove();
   const es = document.getElementById('empty-state');
@@ -1269,6 +1278,7 @@ function updateMinimapViewport(transform, W, H) {{
 
 SKG.renderGraph = function(payload) {{
   if (!payload || !payload.nodes || !payload.nodes.length) return;
+  if (SKG.antsRafId) {{ cancelAnimationFrame(SKG.antsRafId); SKG.antsRafId = null; }}
   const wrap = document.getElementById('graph-canvas-wrap');
   const es = document.getElementById('empty-state');
   if (es) es.style.display = 'none';
@@ -1320,6 +1330,8 @@ SKG.renderGraph = function(payload) {{
     .attr('filter', 'url(#aco-glow)')
     .attr('pointer-events', 'none');
 
+  const antsG = zoomG.append('g').attr('class', 'ants-g');
+
   const maxPR = payload.maxPagerank || 1;
 
   const nodeSel = zoomG.append('g').attr('class', 'nodes').selectAll('g')
@@ -1368,7 +1380,7 @@ SKG.renderGraph = function(payload) {{
     }});
 
   SKG.state = {{
-    payload, svg, zoomG, zoomBehavior, simulation, linkSel, acoLinkSel, nodeSel,
+    payload, svg, zoomG, zoomBehavior, simulation, linkSel, acoLinkSel, nodeSel, antsG,
     W, H, layoutMode: 'force', pathMode: false, pathSelected: [],
   }};
 }};
@@ -1459,6 +1471,49 @@ SKG.renderACOTrails = function(swarmState) {{
     const pathSet = new Set(swarmState.best_path);
     st.nodeSel.select('.node-shape').attr('stroke-width', d => pathSet.has(d.id) ? 3.2 : 1.6);
   }}
+
+  SKG.startAntAnimation(tau);
+}};
+
+SKG.startAntAnimation = function(tau) {{
+  const st = SKG.state;
+  if (SKG.antsRafId) {{ cancelAnimationFrame(SKG.antsRafId); SKG.antsRafId = null; }}
+  if (!st.antsG || !st.payload || !st.payload.edges.length) return;
+
+  const scored = st.payload.edges.map(e => {{
+    const s = e.source.id || e.source, t = e.target.id || e.target;
+    const v = tau[[s, t].sort().join('|||')] || 0;
+    return {{ edge: e, v }};
+  }}).sort((a, b) => b.v - a.v);
+
+  const topEdges = scored.slice(0, Math.min(16, scored.length)).filter(x => x.v > 0).map(x => x.edge);
+  st.antsG.selectAll('circle').remove();
+  if (!topEdges.length) return;
+
+  const ants = topEdges.map(edge => ({{
+    edge, t: Math.random(), dir: Math.random() < 0.5 ? 1 : -1, speed: 0.15 + Math.random() * 0.2,
+  }}));
+
+  const antSel = st.antsG.selectAll('circle').data(ants).enter().append('circle')
+    .attr('r', 2.4)
+    .attr('fill', '#88ffaa')
+    .attr('filter', 'url(#aco-glow)');
+
+  let lastTime = performance.now();
+  function tick(now) {{
+    const dt = Math.min((now - lastTime) / 1000, 0.1);
+    lastTime = now;
+    antSel.each(function(a) {{
+      a.t += a.dir * a.speed * dt;
+      if (a.t > 1) {{ a.t = 1; a.dir = -1; }}
+      if (a.t < 0) {{ a.t = 0; a.dir = 1; }}
+    }});
+    antSel
+      .attr('cx', a => a.edge.source.x + (a.edge.target.x - a.edge.source.x) * a.t)
+      .attr('cy', a => a.edge.source.y + (a.edge.target.y - a.edge.source.y) * a.t);
+    SKG.antsRafId = requestAnimationFrame(tick);
+  }}
+  SKG.antsRafId = requestAnimationFrame(tick);
 }};
 
 function skgCheckDemoParam() {{
@@ -1545,6 +1600,7 @@ with gr.Blocks(title="Scripture Knowledge Graph") as demo:
 
         with gr.Column(scale=3, min_width=480):
             graph_data_json = gr.JSON(visible=False)
+            swarm_data_json = gr.JSON(visible=False)
             gr.HTML(GRAPH_CONTAINER_HTML, elem_id="graph-outer")
 
         with gr.Column(scale=1, min_width=300, elem_id="sidebar-right"):
@@ -1579,11 +1635,13 @@ with gr.Blocks(title="Scripture Knowledge Graph") as demo:
 
     clear_btn.click(
         fn=clear_all,
-        outputs=[notes_input, graph_data_json, stats_html, swarm_html, algo_state, graph_state, swarm_state, insights_out],
+        outputs=[notes_input, graph_data_json, stats_html, swarm_html, algo_state, graph_state, swarm_state, swarm_data_json, insights_out],
     ).then(fn=None, outputs=[], js=JS_CLEAR_GRAPH)
 
-    run_swarm_btn.click(fn=run_swarm_gen, inputs=[graph_state, algo_state], outputs=[swarm_html, swarm_state]).then(
-        fn=None, inputs=[swarm_state], outputs=[], js=JS_RENDER_ACO
+    run_swarm_btn.click(
+        fn=run_swarm_gen, inputs=[graph_state, algo_state], outputs=[swarm_html, swarm_data_json, swarm_state]
+    ).then(
+        fn=None, inputs=[swarm_data_json], outputs=[], js=JS_RENDER_ACO
     )
 
     insights_btn.click(fn=generate_insights, inputs=[notes_input, graph_state, algo_state, swarm_state], outputs=[insights_out])