fix(ui): patch trim typeerror, globe invisible arcs, and leaflet latency

frontend/app/page.module.css

@@ -28,6 +28,7 @@
   display: flex;
   align-items: center;
   gap: 10px;
+  flex: 1;
 }
 
 .headerSep {
@@ -44,7 +45,6 @@
 }
 
 .headerCenter {
-  flex: 1;
   display: flex;
   justify-content: center;
   padding: 0 20px;
@@ -53,7 +53,9 @@
 .headerRight {
   display: flex;
   align-items: center;
+  justify-content: flex-end;
   gap: 12px;
+  flex: 1;
 }
 
 /* ── Main Content ─────────────────────────── */
@@ -86,13 +88,23 @@
 }
 
 @keyframes pageFadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
 
 @keyframes pageFadeOut {
-  from { opacity: 1; }
-  to { opacity: 0; }
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
 }
 
 @keyframes pageSlideIn {
@@ -101,10 +113,12 @@
     transform: scale(1.05);
     filter: brightness(2);
   }
+
   30% {
     opacity: 1;
     filter: brightness(1.5);
   }
+
   to {
     opacity: 1;
     transform: scale(1);
@@ -123,4 +137,4 @@
   color: var(--nx-muted);
   font-size: 12px;
   letter-spacing: 0.06em;
-}
+}

frontend/app/page.tsx

@@ -13,183 +13,180 @@ import type { ViewState, ReplayStep } from '@/lib/types';
 
 // Dynamic import for map (no SSR)
 const GlobalThreatMap = dynamic(
-  () => import('@/components/globe/GlobalThreatMap'),
-  { ssr: false, loading: () => <div className={styles.mapLoading}>&gt; INITIALIZING MAP ENGINE...</div> }
+    () => import('@/components/globe/GlobalThreatMap'),
+    { ssr: false, loading: () => <div className={styles.mapLoading}>&gt; INITIALIZING MAP ENGINE...</div> }
 );
 
 export default function Home() {
-  const [view, setView] = useState<ViewState>('globe');
-  const [mode, setMode] = useState<'live' | 'replay'>('replay');
-  const [backendStatus, setBackendStatus] = useState<'connected' | 'replay' | 'disconnected'>('replay');
-
-  // Replay state
-  const replayRef = useRef<ReplayEngine | null>(null);
-  const [replaySteps, setReplaySteps] = useState<ReplayStep[]>([]);
-  const [currentStepIndex, setCurrentStepIndex] = useState(-1);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [speed, setSpeed] = useState(1);
-  const [replayLoaded, setReplayLoaded] = useState(false);
-  const [allSteps, setAllSteps] = useState<ReplayStep[]>([]);
-
-  // Transition state
-  const [transitioning, setTransitioning] = useState(false);
-
-  // Check backend availability
-  useEffect(() => {
-    isBackendAvailable().then(available => {
-      setBackendStatus(available ? 'connected' : 'replay');
-      setMode(available ? 'live' : 'replay');
-    });
-  }, []);
-
-  // Initialize replay engine
-  useEffect(() => {
-    const engine = new ReplayEngine();
-    replayRef.current = engine;
-
-    engine.load().then(() => {
-      setAllSteps(engine.getSteps());
-      setReplayLoaded(true);
-    });
-
-    const unsub = engine.subscribe((step, index) => {
-      setCurrentStepIndex(index);
-      setReplaySteps(engine.getSteps().slice(0, index + 1));
-    });
-
-    return () => unsub();
-  }, []);
-
-  // Handle corridor/hub clicks
-  const handleCorridorSelect = useCallback((corridorId: string) => {
-    setTransitioning(true);
-    setTimeout(() => {
-      setView('case');
-      setTransitioning(false);
-      // Start replay
-      if (replayRef.current && allSteps.length > 0) {
-        replayRef.current.seekTo(0);
-        setCurrentStepIndex(0);
-        setReplaySteps(allSteps.slice(0, 1));
-      }
-    }, 800);
-  }, [allSteps]);
-
-  const handleHubSelect = useCallback((hubId: string) => {
-    handleCorridorSelect(hubId);
-  }, [handleCorridorSelect]);
-
-  // Replay controls
-  const handlePlay = useCallback(() => {
-    replayRef.current?.play();
-    setIsPlaying(true);
-  }, []);
-
-  const handlePause = useCallback(() => {
-    replayRef.current?.pause();
-    setIsPlaying(false);
-  }, []);
-
-  const handleStepForward = useCallback(() => {
-    replayRef.current?.stepForward();
-  }, []);
-
-  const handleStepBack = useCallback(() => {
-    replayRef.current?.stepBack();
-  }, []);
-
-  const handleSeek = useCallback((step: number) => {
-    replayRef.current?.seekTo(step);
-  }, []);
-
-  const handleSpeedChange = useCallback((newSpeed: number) => {
-    replayRef.current?.setSpeed(newSpeed);
-    setSpeed(newSpeed);
-  }, []);
-
-  const handleBackToMap = useCallback(() => {
-    replayRef.current?.pause();
-    setIsPlaying(false);
-    setTransitioning(true);
-    setTimeout(() => {
-      setView('globe');
-      setTransitioning(false);
-    }, 600);
-  }, []);
-
-  return (
-    <div className={styles.app}>
-      {/* Global Header */}
-      <header className={styles.header}>
-        <div className={styles.headerLeft}>
-          <MemexLogo size="sm" />
-          <span className={styles.headerSep}>│</span>
-          {view === 'case' ? (
-            <>
-              <button className="nx-btn nx-btn-icon" onClick={handleBackToMap} style={{ padding: '4px 8px', fontSize: '10px' }}>
-                ← MAP
-              </button>
-              <span className={styles.headerSep}>│</span>
-              <div style={{ display: 'flex', flexDirection: 'column', cursor: 'pointer' }}>
-                <span style={{ fontSize: '11px', fontWeight: 700, color: 'var(--nx-orange)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
-                  {replayRef.current?.getMeta()?.alert?.alert_id || 'CASE-1MDB'}
-                </span>
-                <span style={{ fontSize: '9px', color: 'var(--nx-muted)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>
-                  Financial Crime Intelligence
-                </span>
-              </div>
-            </>
-          ) : (
-            <span className={styles.headerSubtitle}>FINANCIAL CRIME INTELLIGENCE</span>
-          )}
+    const [view, setView] = useState<ViewState>('globe');
+    const [mode, setMode] = useState<'live' | 'replay'>('replay');
+    const [backendStatus, setBackendStatus] = useState<'connected' | 'replay' | 'disconnected'>('replay');
+
+    // Replay state
+    const replayRef = useRef<ReplayEngine | null>(null);
+    const [replaySteps, setReplaySteps] = useState<ReplayStep[]>([]);
+    const [currentStepIndex, setCurrentStepIndex] = useState(-1);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [speed, setSpeed] = useState(1);
+    const [replayLoaded, setReplayLoaded] = useState(false);
+    const [allSteps, setAllSteps] = useState<ReplayStep[]>([]);
+
+    // Transition state
+    const [transitioning, setTransitioning] = useState(false);
+
+    // Check backend availability
+    useEffect(() => {
+        isBackendAvailable().then(available => {
+            setBackendStatus(available ? 'connected' : 'replay');
+            setMode(available ? 'live' : 'replay');
+        });
+    }, []);
+
+    // Initialize replay engine
+    useEffect(() => {
+        const engine = new ReplayEngine();
+        replayRef.current = engine;
+
+        engine.load().then(() => {
+            setAllSteps(engine.getSteps());
+            setReplayLoaded(true);
+        });
+
+        const unsub = engine.subscribe((step, index) => {
+            setCurrentStepIndex(index);
+            setReplaySteps(engine.getSteps().slice(0, index + 1));
+        });
+
+        return () => unsub();
+    }, []);
+
+    // Handle corridor/hub clicks
+    const handleCorridorSelect = useCallback((corridorId: string) => {
+        setTransitioning(true);
+        setTimeout(() => {
+            setView('case');
+            setTransitioning(false);
+            // Start replay
+            if (replayRef.current && allSteps.length > 0) {
+                replayRef.current.seekTo(0);
+                setCurrentStepIndex(0);
+                setReplaySteps(allSteps.slice(0, 1));
+            }
+        }, 800);
+    }, [allSteps]);
+
+    const handleHubSelect = useCallback((hubId: string) => {
+        handleCorridorSelect(hubId);
+    }, [handleCorridorSelect]);
+
+    // Replay controls
+    const handlePlay = useCallback(() => {
+        replayRef.current?.play();
+        setIsPlaying(true);
+    }, []);
+
+    const handlePause = useCallback(() => {
+        replayRef.current?.pause();
+        setIsPlaying(false);
+    }, []);
+
+    const handleStepForward = useCallback(() => {
+        replayRef.current?.stepForward();
+    }, []);
+
+    const handleStepBack = useCallback(() => {
+        replayRef.current?.stepBack();
+    }, []);
+
+    const handleSeek = useCallback((step: number) => {
+        replayRef.current?.seekTo(step);
+    }, []);
+
+    const handleSpeedChange = useCallback((newSpeed: number) => {
+        replayRef.current?.setSpeed(newSpeed);
+        setSpeed(newSpeed);
+    }, []);
+
+    const handleBackToMap = useCallback(() => {
+        replayRef.current?.pause();
+        setIsPlaying(false);
+        setTransitioning(true);
+        setTimeout(() => {
+            setView('globe');
+            setTransitioning(false);
+        }, 600);
+    }, []);
+
+    return (
+        <div className={styles.app}>
+            {/* Global Header */}
+            <header className={styles.header}>
+                <div className={styles.headerLeft}>
+                    <MemexLogo size="sm" />
+                    <span className={styles.headerSep}>│</span>
+                    {view === 'case' ? (
+                        <>
+                            <button className="nx-btn nx-btn-icon" onClick={handleBackToMap} style={{ padding: '4px 8px', fontSize: '10px' }}>
+                                ← MAP
+                            </button>
+                            <span className={styles.headerSep}>│</span>
+                            <div style={{ display: 'flex', flexDirection: 'column', cursor: 'pointer' }}>
+                                <span style={{ fontSize: '11px', fontWeight: 700, color: 'var(--nx-orange)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>
+                                    {replayRef.current?.getMeta()?.alert?.alert_id || 'CASE-1MDB'}
+                                </span>
+                            </div>
+                        </>
+                    ) : (
+                        <span className={styles.headerSubtitle}>FINANCIAL CRIME INTELLIGENCE</span>
+                    )}
+                </div>
+                <div className={styles.headerCenter}>
+                    {view === 'case' && replayLoaded && (
+                        <ReplayControls
+                            currentStep={Math.max(0, currentStepIndex)}
+                            totalSteps={allSteps.length}
+                            isPlaying={isPlaying}
+                            speed={speed}
+                            onPlay={handlePlay}
+                            onPause={handlePause}
+                            onStepForward={handleStepForward}
+                            onStepBack={handleStepBack}
+                            onSeek={handleSeek}
+                            onSpeedChange={handleSpeedChange}
+                        />
+                    )}
+                </div>
+                <div className={styles.headerRight}>
+                    <StatusIndicator
+                        status={backendStatus}
+                        label={backendStatus === 'connected' ? 'LIVE' : backendStatus === 'replay' ? 'REPLAY' : 'OFFLINE'}
+                    />
+                </div>
+            </header>
+
+            {/* View Content */}
+            <main className={`${styles.main} ${transitioning ? styles.transitioning : ''}`}>
+                {view === 'globe' && (
+                    <div className={`${styles.viewContainer} ${transitioning ? styles.viewFadeOut : styles.viewFadeIn}`}>
+                        <GlobalThreatMap
+                            onCorridorSelect={handleCorridorSelect}
+                            onHubSelect={handleHubSelect}
+                        />
+                    </div>
+                )}
+
+                {view === 'case' && (
+                    <div className={`${styles.viewContainer} ${transitioning ? styles.viewFadeOut : styles.viewSlideIn}`}>
+                        <CaseTerminal
+                            steps={replaySteps}
+                            currentStepIndex={Math.max(0, currentStepIndex)}
+                            onBack={handleBackToMap}
+                            alertSummary={replayRef.current?.getMeta()?.alert?.summary}
+                            caseId={replayRef.current?.getMeta()?.alert?.alert_id}
+                        />
+                    </div>
+                )}
+            </main>
         </div>
-        <div className={styles.headerCenter}>
-          {view === 'case' && replayLoaded && (
-            <ReplayControls
-              currentStep={Math.max(0, currentStepIndex)}
-              totalSteps={allSteps.length}
-              isPlaying={isPlaying}
-              speed={speed}
-              onPlay={handlePlay}
-              onPause={handlePause}
-              onStepForward={handleStepForward}
-              onStepBack={handleStepBack}
-              onSeek={handleSeek}
-              onSpeedChange={handleSpeedChange}
-            />
-          )}
-        </div>
-        <div className={styles.headerRight}>
-          <StatusIndicator
-            status={backendStatus}
-            label={backendStatus === 'connected' ? 'LIVE' : backendStatus === 'replay' ? 'REPLAY' : 'OFFLINE'}
-          />
-        </div>
-      </header>
-
-      {/* View Content */}
-      <main className={`${styles.main} ${transitioning ? styles.transitioning : ''}`}>
-        {view === 'globe' && (
-          <div className={`${styles.viewContainer} ${transitioning ? styles.viewFadeOut : styles.viewFadeIn}`}>
-            <GlobalThreatMap
-              onCorridorSelect={handleCorridorSelect}
-              onHubSelect={handleHubSelect}
-            />
-          </div>
-        )}
-
-        {view === 'case' && (
-          <div className={`${styles.viewContainer} ${transitioning ? styles.viewFadeOut : styles.viewSlideIn}`}>
-            <CaseTerminal
-              steps={replaySteps}
-              currentStepIndex={Math.max(0, currentStepIndex)}
-              onBack={handleBackToMap}
-              alertSummary={replayRef.current?.getMeta()?.alert?.summary}
-              caseId={replayRef.current?.getMeta()?.alert?.alert_id}
-            />
-          </div>
-        )}
-      </main>
-    </div>
-  );
+    );
 }

frontend/components/case/AgentTerminal.tsx

@@ -5,122 +5,117 @@ import styles from './case.module.css';
 import type { ReplayStep } from '@/lib/types';
 
 interface Props {
-  steps: ReplayStep[];
+    steps: ReplayStep[];
 }
 
 const TOOL_ICONS: Record<string, string> = {
-  review_alert: '🔔',
-  get_customer_profile: '👤',
-  query_transactions: '💳',
-  check_watchlist: '🔍',
-  trace_network: '🕸',
-  check_source_of_funds: '💰',
-  write_to_case_file: '💾',
-  update_system_prompt: '⚙',
-  search_compliance_manual: '📋',
-  request_wire_trace: '📡',
-  retrieve_async_result: '📥',
-  file_sar: '🚨',
-  close_alert: '✅',
+    review_alert: '🔔',
+    get_customer_profile: '👤',
+    query_transactions: '💳',
+    check_watchlist: '🔍',
+    trace_network: '🕸',
+    check_source_of_funds: '💰',
+    write_to_case_file: '💾',
+    update_system_prompt: '⚙',
+    search_compliance_manual: '📋',
+    request_wire_trace: '📡',
+    retrieve_async_result: '📥',
+    file_sar: '🚨',
+    close_alert: '✅',
 };
 
 export default function AgentTerminal({ steps }: Props) {
-  const scrollRef = useRef<HTMLDivElement>(null);
+    const scrollRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    if (scrollRef.current) {
-      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-    }
-  }, [steps.length]);
+    useEffect(() => {
+        if (scrollRef.current) {
+            scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+        }
+    }, [steps.length]);
 
-  return (
-    <div className={styles.terminalContainer}>
-      <div className="nx-panel-header">
-        <span className="nx-panel-title">AGENT TERMINAL</span>
-        <span className="nx-panel-badge nx-tag--orange">{steps.length} ACTIONS</span>
-      </div>
+    return (
+        <div className={styles.terminalContainer}>
+            <div className={styles.terminalBody} ref={scrollRef}>
+                {/* Initial prompt */}
+                <div className={styles.termEntry}>
+                    <div className={styles.termPrompt}>
+                        <span className={styles.termPS1}>memex@case:~$</span>
+                        <span className={styles.termCmd}>init_investigation</span>
+                    </div>
+                    <div className={styles.termOutput}>&gt; Environment loaded. Awaiting agent actions.</div>
+                </div>
 
-      <div className={styles.terminalBody} ref={scrollRef}>
-        {/* Initial prompt */}
-        <div className={styles.termEntry}>
-          <div className={styles.termPrompt}>
-            <span className={styles.termPS1}>memex@case:~$</span>
-            <span className={styles.termCmd}>init_investigation</span>
-          </div>
-          <div className={styles.termOutput}>&gt; Environment loaded. Awaiting agent actions.</div>
-        </div>
+                {/* Step entries */}
+                {steps.map((step) => {
+                    const icon = TOOL_ICONS[step.action.tool] || '▸';
+                    const reward = step.observation.reward ?? 0;
+                    const rewardColor = reward >= 0.05 ? '#22C55E' : reward < 0 ? '#D4334A' : '#505055';
 
-        {/* Step entries */}
-        {steps.map((step) => {
-          const icon = TOOL_ICONS[step.action.tool] || '▸';
-          const reward = step.observation.reward ?? 0;
-          const rewardColor = reward >= 0.05 ? '#22C55E' : reward < 0 ? '#D4334A' : '#505055';
+                    return (
+                        <div
+                            key={step.step_number}
+                            className={`${styles.termEntry} ${step.observation.done ? styles.termEntryFinal : ''}`}
+                        >
+                            {/* Step header */}
+                            <div className={styles.termStepHeader}>
+                                <span className={styles.termStepNum}>STEP {String(step.step_number).padStart(2, '0')}</span>
+                                <span className={styles.termReward} style={{ color: rewardColor }}>
+                                    {reward >= 0 ? '+' : ''}{reward.toFixed(2)}
+                                </span>
+                            </div>
 
-          return (
-            <div
-              key={step.step_number}
-              className={`${styles.termEntry} ${step.observation.done ? styles.termEntryFinal : ''}`}
-            >
-              {/* Step header */}
-              <div className={styles.termStepHeader}>
-                <span className={styles.termStepNum}>STEP {String(step.step_number).padStart(2, '0')}</span>
-                <span className={styles.termReward} style={{ color: rewardColor }}>
-                  {reward >= 0 ? '+' : ''}{reward.toFixed(2)}
-                </span>
-              </div>
+                            {/* Reasoning */}
+                            {step.reasoning && (
+                                <div className={styles.termReasoning}>
+                                    <span className={styles.termReasonLabel}>REASONING</span>
+                                    <p className={styles.termReasonText}>{step.reasoning}</p>
+                                </div>
+                            )}
 
-              {/* Reasoning */}
-              {step.reasoning && (
-                <div className={styles.termReasoning}>
-                  <span className={styles.termReasonLabel}>REASONING</span>
-                  <p className={styles.termReasonText}>{step.reasoning}</p>
-                </div>
-              )}
+                            {/* Tool call */}
+                            <div className={styles.termPrompt}>
+                                <span className={styles.termPS1}>memex@case:~$</span>
+                                <span className={styles.termCmd}>
+                                    {icon} {step.action.tool}
+                                </span>
+                            </div>
 
-              {/* Tool call */}
-              <div className={styles.termPrompt}>
-                <span className={styles.termPS1}>memex@case:~$</span>
-                <span className={styles.termCmd}>
-                  {icon} {step.action.tool}
-                </span>
-              </div>
+                            {/* Parameters */}
+                            {Object.keys(step.action.parameters).length > 0 && (
+                                <div className={styles.termParams}>
+                                    {Object.entries(step.action.parameters).map(([key, val]) => (
+                                        <div key={key} className={styles.termParam}>
+                                            <span className={styles.termParamKey}>{key}:</span>
+                                            <span className={styles.termParamVal}>
+                                                {typeof val === 'object' ? JSON.stringify(val) : String(val)}
+                                            </span>
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
 
-              {/* Parameters */}
-              {Object.keys(step.action.parameters).length > 0 && (
-                <div className={styles.termParams}>
-                  {Object.entries(step.action.parameters).map(([key, val]) => (
-                    <div key={key} className={styles.termParam}>
-                      <span className={styles.termParamKey}>{key}:</span>
-                      <span className={styles.termParamVal}>
-                        {typeof val === 'object' ? JSON.stringify(val) : String(val)}
-                      </span>
-                    </div>
-                  ))}
-                </div>
-              )}
+                            {/* Output */}
+                            <div className={styles.termOutput}>
+                                &gt; {step.observation.message}
+                            </div>
 
-              {/* Output */}
-              <div className={styles.termOutput}>
-                &gt; {step.observation.message}
-              </div>
+                            {/* Terminal marker for final step */}
+                            {step.observation.done && (
+                                <div className={styles.termFinal}>
+                                    <span className={styles.termFinalIcon}>█</span>
+                                    EPISODE COMPLETE — FINAL SCORE: {(step.observation.reward ?? 0) >= 0 ? '+' : ''}{(step.observation.reward ?? 0).toFixed(4)}
+                                </div>
+                            )}
+                        </div>
+                    );
+                })}
 
-              {/* Terminal marker for final step */}
-              {step.observation.done && (
-                <div className={styles.termFinal}>
-                  <span className={styles.termFinalIcon}>█</span>
-                  EPISODE COMPLETE — FINAL SCORE: {(step.observation.reward ?? 0) >= 0 ? '+' : ''}{(step.observation.reward ?? 0).toFixed(4)}
+                {/* Cursor blink */}
+                <div className={styles.termCursor}>
+                    <span className={styles.termPS1}>memex@case:~$</span>
+                    <span className={styles.termBlink}>█</span>
                 </div>
-              )}
             </div>
-          );
-        })}
-
-        {/* Cursor blink */}
-        <div className={styles.termCursor}>
-          <span className={styles.termPS1}>memex@case:~$</span>
-          <span className={styles.termBlink}>█</span>
         </div>
-      </div>
-    </div>
-  );
+    );
 }

frontend/components/case/EntityGraph.tsx

@@ -104,7 +104,7 @@ export default function EntityGraph({ graphData }: Props) {
               'shape': (ele: any) => NODE_SHAPES[ele.data('type')] || 'ellipse',
               'color': '#D4D4D4',
               'font-size': '9px',
-              'font-family': '"JetBrains Mono", monospace',
+              'font-family': 'JetBrains Mono, monospace',
               'text-valign': 'bottom',
               'text-margin-y': 6,
               'text-outline-width': 4,

frontend/components/globe/GlobalThreatMap.tsx

@@ -138,13 +138,10 @@ export default function GlobalThreatMap({ onCorridorSelect, onHubSelect }: Props
       const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
       svgEl.setAttribute('class', styles.arcOverlay);
       svgEl.style.position = 'absolute';
-      svgEl.style.top = '0';
-      svgEl.style.left = '0';
-      svgEl.style.width = '100%';
-      svgEl.style.height = '100%';
+      svgEl.style.overflow = 'visible';
       svgEl.style.pointerEvents = 'none';
       svgEl.style.zIndex = '400';
-      map.getContainer().appendChild(svgEl);
+      map.getPanes().overlayPane.appendChild(svgEl);
       svgOverlay.current = svgEl;
 
       // Pre-create glow filter defs
@@ -200,8 +197,7 @@ export default function GlobalThreatMap({ onCorridorSelect, onHubSelect }: Props
       const drawArcs = () => {
         if (!svgOverlay.current || !mapInstance.current) return;
         const svg = svgOverlay.current;
-        const mapSize = mapInstance.current.getSize();
-        svg.setAttribute('viewBox', `0 0 ${mapSize.x} ${mapSize.y}`);
+        // Don't need viewBox because the svg is simply a container with overflow:visible in the overlayPane
 
         const defsEl = svg.querySelector('defs');
         while (svg.lastChild && svg.lastChild !== defsEl) {
@@ -213,8 +209,8 @@ export default function GlobalThreatMap({ onCorridorSelect, onHubSelect }: Props
           const tgt = getHubById(corridor.target);
           if (!src || !tgt) return;
 
-          const p1 = mapInstance.current!.latLngToContainerPoint([src.lat, src.lng]);
-          const p2 = mapInstance.current!.latLngToContainerPoint([tgt.lat, tgt.lng]);
+          const p1 = mapInstance.current!.latLngToLayerPoint([src.lat, src.lng]);
+          const p2 = mapInstance.current!.latLngToLayerPoint([tgt.lat, tgt.lng]);
 
           const midX = (p1.x + p2.x) / 2;
           const midY = (p1.y + p2.y) / 2;
@@ -278,10 +274,10 @@ export default function GlobalThreatMap({ onCorridorSelect, onHubSelect }: Props
         rafId.current = requestAnimationFrame(drawArcs);
       };
 
-      map.on('move', scheduleRedraw);
-      map.on('zoom', scheduleRedraw);
-      map.on('moveend', scheduleRedraw);
+      // Since the SVG is in the overlay pane, it will naturally pan and zoom!
+      // We only need to redraw when the scale changes significantly, or layout changes
       map.on('zoomend', scheduleRedraw);
+      map.on('moveend', scheduleRedraw);
       setTimeout(drawArcs, 200);
       setMapReady(true);
     };

frontend/components/ui/ReplayControls.tsx

@@ -29,38 +29,43 @@ export default function ReplayControls({
 
   return (
     <div className={styles.replayBar}>
-      <button className={styles.replayBtn} onClick={onStepBack} title="Step Back">◄</button>
-      <button
-        className={`${styles.replayBtn} ${isPlaying ? styles.replayBtnActive : ''}`}
-        onClick={isPlaying ? onPause : onPlay}
-        title={isPlaying ? 'Pause' : 'Play'}
-      >
-        {isPlaying ? '⏸' : '▶'}
-      </button>
-      <button className={styles.replayBtn} onClick={onStepForward} title="Step Forward">►</button>
+      <div className={styles.replayGroup}>
+        {speeds.map(s => (
+          <button
+            key={s}
+            className={`${styles.replayBtn} ${speed === s ? styles.replayBtnActive : ''}`}
+            onClick={() => onSpeedChange(s)}
+          >
+            {s}x
+          </button>
+        ))}
+      </div>
 
-      <input
-        type="range"
-        className={styles.replayScrubber}
-        min={0}
-        max={Math.max(totalSteps - 1, 0)}
-        value={currentStep}
-        onChange={e => onSeek(parseInt(e.target.value))}
-      />
-
-      <span className={styles.replayStep}>
-        {String(currentStep + 1).padStart(2, '0')}/{String(totalSteps).padStart(2, '0')}
-      </span>
-
-      {speeds.map(s => (
+      <div className={styles.replayGroupCenter}>
+        <button className={styles.replayBtn} onClick={onStepBack} title="Step Back">◄</button>
         <button
-          key={s}
-          className={`${styles.replayBtn} ${speed === s ? styles.replayBtnActive : ''}`}
-          onClick={() => onSpeedChange(s)}
+          className={`${styles.replayBtn} ${isPlaying ? styles.replayBtnActive : ''} ${styles.replayPlayBtn}`}
+          onClick={isPlaying ? onPause : onPlay}
+          title={isPlaying ? 'Pause' : 'Play'}
         >
-          {s}x
+          {isPlaying ? '⏸' : '▶'}
         </button>
-      ))}
+        <button className={styles.replayBtn} onClick={onStepForward} title="Step Forward">►</button>
+      </div>
+
+      <div className={styles.replayGroupRight}>
+        <span className={styles.replayStep}>
+          {String(currentStep + 1).padStart(2, '0')}/{String(totalSteps).padStart(2, '0')}
+        </span>
+        <input
+          type="range"
+          className={styles.replayScrubber}
+          min={0}
+          max={Math.max(totalSteps - 1, 0)}
+          value={currentStep}
+          onChange={e => onSeek(parseInt(e.target.value))}
+        />
+      </div>
     </div>
   );
 }

frontend/components/ui/ui.module.css

@@ -12,17 +12,34 @@
   flex-shrink: 0;
 }
 
-.statusGreen { background: var(--nx-green); }
-.statusAmber { background: var(--nx-yellow); }
-.statusRed   { background: var(--nx-red); }
+.statusGreen {
+  background: var(--nx-green);
+}
+
+.statusAmber {
+  background: var(--nx-yellow);
+}
+
+.statusRed {
+  background: var(--nx-red);
+}
 
 .statusPulse {
   animation: statusPulseAnim 2s ease-in-out infinite;
 }
 
 @keyframes statusPulseAnim {
-  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
-  50% { opacity: 0.6; box-shadow: 0 0 6px 2px currentColor; }
+
+  0%,
+  100% {
+    opacity: 1;
+    box-shadow: 0 0 0 0 currentColor;
+  }
+
+  50% {
+    opacity: 0.6;
+    box-shadow: 0 0 6px 2px currentColor;
+  }
 }
 
 .statusLabel {
@@ -36,11 +53,37 @@
 .replayBar {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 8px;
   padding: 6px 12px;
   background: var(--nx-surface);
   border: 1px solid var(--nx-border);
   border-radius: 2px;
+  width: 100%;
+  max-width: 600px;
+}
+
+.replayGroup,
+.replayGroupCenter,
+.replayGroupRight {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.replayGroup {
+  flex: 1;
+  /* Match the space taken by scrubber so center is geometrically true */
+}
+
+.replayGroupCenter {
+  gap: 12px;
+  justify-content: center;
+}
+
+.replayGroupRight {
+  flex: 1;
+  justify-content: flex-end;
 }
 
 .replayBtn {
@@ -68,8 +111,14 @@
   background: var(--nx-orange-glow2);
 }
 
+.replayPlayBtn {
+  font-size: 14px;
+  padding: 4px 12px;
+}
+
 .replayScrubber {
-  flex: 1;
+  width: 120px;
+  /* Don't flex 1 here, let it be fixed size so it looks neat */
   height: 3px;
   appearance: none;
   background: var(--nx-border);
@@ -92,5 +141,5 @@
   color: var(--nx-text-dim);
   font-variant-numeric: tabular-nums;
   min-width: 48px;
-  text-align: center;
-}
+  text-align: right;
+}

frontend/lib/geoData.ts

@@ -6,92 +6,92 @@ import { MLHub, MLCorridor } from './types';
 
 // ── Major Money Laundering Hub Locations ──────────────────────
 export const ML_HUBS: MLHub[] = [
-  { id: 'panama',     name: 'Panama City',     lat: 8.9824,   lng: -79.5199,  riskLevel: 'critical', entityCount: 340, region: 'Americas' },
-  { id: 'cayman',     name: 'Cayman Islands',  lat: 19.3133,  lng: -81.2546,  riskLevel: 'critical', entityCount: 520, region: 'Americas' },
-  { id: 'bvi',        name: 'British Virgin Islands', lat: 18.4207, lng: -64.6400, riskLevel: 'critical', entityCount: 680, region: 'Americas' },
-  { id: 'london',     name: 'London',          lat: 51.5074,  lng: -0.1278,   riskLevel: 'high',     entityCount: 890, region: 'Europe' },
-  { id: 'zurich',     name: 'Zürich',          lat: 47.3769,  lng: 8.5417,    riskLevel: 'high',     entityCount: 420, region: 'Europe' },
-  { id: 'cyprus',      name: 'Nicosia',         lat: 35.1856,  lng: 33.3823,   riskLevel: 'high',     entityCount: 310, region: 'Europe' },
-  { id: 'dubai',      name: 'Dubai',           lat: 25.2048,  lng: 55.2708,   riskLevel: 'critical', entityCount: 760, region: 'MENA' },
-  { id: 'singapore',  name: 'Singapore',       lat: 1.3521,   lng: 103.8198,  riskLevel: 'high',     entityCount: 540, region: 'Asia' },
-  { id: 'hongkong',   name: 'Hong Kong',       lat: 22.3193,  lng: 114.1694,  riskLevel: 'high',     entityCount: 620, region: 'Asia' },
-  { id: 'moscow',     name: 'Moscow',          lat: 55.7558,  lng: 37.6173,   riskLevel: 'critical', entityCount: 480, region: 'Europe' },
-  { id: 'lagos',      name: 'Lagos',           lat: 6.5244,   lng: 3.3792,    riskLevel: 'high',     entityCount: 290, region: 'Africa' },
-  { id: 'mumbai',     name: 'Mumbai',          lat: 19.0760,  lng: 72.8777,   riskLevel: 'medium',   entityCount: 350, region: 'Asia' },
-  { id: 'seychelles', name: 'Seychelles',      lat: -4.6796,  lng: 55.4920,   riskLevel: 'critical', entityCount: 190, region: 'Africa' },
-  { id: 'malta',      name: 'Malta',           lat: 35.8989,  lng: 14.5146,   riskLevel: 'high',     entityCount: 210, region: 'Europe' },
-  { id: 'kualalumpur',name: 'Kuala Lumpur',    lat: 3.1390,   lng: 101.6869,  riskLevel: 'medium',   entityCount: 280, region: 'Asia' },
-  { id: 'newyork',    name: 'New York',        lat: 40.7128,  lng: -74.0060,  riskLevel: 'medium',   entityCount: 450, region: 'Americas' },
-  { id: 'liechtenstein', name: 'Vaduz',        lat: 47.1410,  lng: 9.5215,    riskLevel: 'high',     entityCount: 130, region: 'Europe' },
-  { id: 'bahamas',    name: 'Nassau',          lat: 25.0343,  lng: -77.3963,  riskLevel: 'high',     entityCount: 240, region: 'Americas' },
-  { id: 'macau',      name: 'Macau',           lat: 22.1987,  lng: 113.5439,  riskLevel: 'high',     entityCount: 180, region: 'Asia' },
-  { id: 'myanmar',    name: 'Yangon',          lat: 16.8661,  lng: 96.1951,   riskLevel: 'critical', entityCount: 110, region: 'Asia' },
+  { id: 'panama', name: 'Panama City', lat: 8.9824, lng: -79.5199, riskLevel: 'critical', entityCount: 340, region: 'Americas' },
+  { id: 'cayman', name: 'Cayman Islands', lat: 19.3133, lng: -81.2546, riskLevel: 'critical', entityCount: 520, region: 'Americas' },
+  { id: 'bvi', name: 'British Virgin Islands', lat: 18.4207, lng: -64.6400, riskLevel: 'critical', entityCount: 680, region: 'Americas' },
+  { id: 'london', name: 'London', lat: 51.5074, lng: -0.1278, riskLevel: 'high', entityCount: 890, region: 'Europe' },
+  { id: 'zurich', name: 'Zürich', lat: 47.3769, lng: 8.5417, riskLevel: 'high', entityCount: 420, region: 'Europe' },
+  { id: 'cyprus', name: 'Nicosia', lat: 35.1856, lng: 33.3823, riskLevel: 'high', entityCount: 310, region: 'Europe' },
+  { id: 'dubai', name: 'Dubai', lat: 25.2048, lng: 55.2708, riskLevel: 'critical', entityCount: 760, region: 'MENA' },
+  { id: 'singapore', name: 'Singapore', lat: 1.3521, lng: 103.8198, riskLevel: 'high', entityCount: 540, region: 'Asia' },
+  { id: 'hongkong', name: 'Hong Kong', lat: 22.3193, lng: 114.1694, riskLevel: 'high', entityCount: 620, region: 'Asia' },
+  { id: 'moscow', name: 'Moscow', lat: 55.7558, lng: 37.6173, riskLevel: 'critical', entityCount: 480, region: 'Europe' },
+  { id: 'lagos', name: 'Lagos', lat: 6.5244, lng: 3.3792, riskLevel: 'high', entityCount: 290, region: 'Africa' },
+  { id: 'mumbai', name: 'Mumbai', lat: 19.0760, lng: 72.8777, riskLevel: 'medium', entityCount: 350, region: 'Asia' },
+  { id: 'seychelles', name: 'Seychelles', lat: -4.6796, lng: 55.4920, riskLevel: 'critical', entityCount: 190, region: 'Africa' },
+  { id: 'malta', name: 'Malta', lat: 35.8989, lng: 14.5146, riskLevel: 'high', entityCount: 210, region: 'Europe' },
+  { id: 'kualalumpur', name: 'Kuala Lumpur', lat: 3.1390, lng: 101.6869, riskLevel: 'medium', entityCount: 280, region: 'Asia' },
+  { id: 'newyork', name: 'New York', lat: 40.7128, lng: -74.0060, riskLevel: 'medium', entityCount: 450, region: 'Americas' },
+  { id: 'liechtenstein', name: 'Vaduz', lat: 47.1410, lng: 9.5215, riskLevel: 'high', entityCount: 130, region: 'Europe' },
+  { id: 'bahamas', name: 'Nassau', lat: 25.0343, lng: -77.3963, riskLevel: 'high', entityCount: 240, region: 'Americas' },
+  { id: 'macau', name: 'Macau', lat: 22.1987, lng: 113.5439, riskLevel: 'high', entityCount: 180, region: 'Asia' },
+  { id: 'myanmar', name: 'Yangon', lat: 16.8661, lng: 96.1951, riskLevel: 'critical', entityCount: 110, region: 'Asia' },
 ];
 
 // ── Pre-built ML Corridors (static threat intel) ─────────────
 export const ML_CORRIDORS: MLCorridor[] = [
-  { id: 'c-01', source: 'panama',      target: 'cayman',     volume: 2400000000, riskScore: 92, typology: 'layering',        label: 'Shell Company Pipeline' },
-  { id: 'c-02', source: 'bvi',         target: 'london',     volume: 1800000000, riskScore: 88, typology: 'layering',        label: 'Offshore → City Corridor' },
-  { id: 'c-03', source: 'dubai',       target: 'mumbai',     volume: 3200000000, riskScore: 85, typology: 'trade_based_ml',  label: 'Trade Invoice Manipulation' },
-  { id: 'c-04', source: 'hongkong',    target: 'singapore',  volume: 2100000000, riskScore: 78, typology: 'layering',        label: 'Asia-Pacific Layer' },
-  { id: 'c-05', source: 'moscow',      target: 'cyprus',     volume: 4100000000, riskScore: 95, typology: 'layering',        label: 'Russian Capital Flight' },
-  { id: 'c-06', source: 'lagos',       target: 'london',     volume: 1200000000, riskScore: 82, typology: 'structuring',     label: 'West Africa → UK Pipeline' },
-  { id: 'c-07', source: 'zurich',      target: 'seychelles', volume: 890000000,  riskScore: 90, typology: 'layering',        label: 'Alpine → Island Route' },
-  { id: 'c-08', source: 'kualalumpur', target: 'singapore',  volume: 681000000,  riskScore: 94, typology: 'layering',        label: '1MDB Corridor', caseId: 'case-1mdb' },
-  { id: 'c-09', source: 'cayman',      target: 'newyork',    volume: 1500000000, riskScore: 75, typology: 'layering',        label: 'Caribbean Integration' },
-  { id: 'c-10', source: 'dubai',       target: 'london',     volume: 2800000000, riskScore: 87, typology: 'trade_based_ml',  label: 'Gold & Commodities' },
-  { id: 'c-11', source: 'malta',       target: 'liechtenstein', volume: 450000000, riskScore: 80, typology: 'layering',      label: 'EU Regulatory Arbitrage' },
-  { id: 'c-12', source: 'seychelles',  target: 'bvi',        volume: 720000000,  riskScore: 91, typology: 'layering',        label: 'Island Hop Chain' },
-  { id: 'c-13', source: 'macau',       target: 'hongkong',   volume: 1100000000, riskScore: 83, typology: 'structuring',     label: 'Casino → Banking' },
-  { id: 'c-14', source: 'myanmar',     target: 'singapore',  volume: 340000000,  riskScore: 96, typology: 'trade_based_ml',  label: 'Narco-Trade Flow' },
-  { id: 'c-15', source: 'bahamas',     target: 'panama',     volume: 560000000,  riskScore: 79, typology: 'layering',        label: 'Caribbean Circuit' },
+  { id: 'c-01', source: 'panama', target: 'cayman', volume: 2400000000, riskScore: 92, typology: 'layering', label: 'Shell Company Pipeline' },
+  { id: 'c-02', source: 'bvi', target: 'london', volume: 1800000000, riskScore: 88, typology: 'layering', label: 'Offshore → City Corridor' },
+  { id: 'c-03', source: 'dubai', target: 'mumbai', volume: 3200000000, riskScore: 85, typology: 'trade_based_ml', label: 'Trade Invoice Manipulation' },
+  { id: 'c-04', source: 'hongkong', target: 'singapore', volume: 2100000000, riskScore: 78, typology: 'layering', label: 'Asia-Pacific Layer' },
+  { id: 'c-05', source: 'moscow', target: 'cyprus', volume: 4100000000, riskScore: 95, typology: 'layering', label: 'Russian Capital Flight' },
+  { id: 'c-06', source: 'lagos', target: 'london', volume: 1200000000, riskScore: 82, typology: 'structuring', label: 'West Africa → UK Pipeline' },
+  { id: 'c-07', source: 'zurich', target: 'seychelles', volume: 890000000, riskScore: 90, typology: 'layering', label: 'Alpine → Island Route' },
+  { id: 'c-08', source: 'kualalumpur', target: 'singapore', volume: 681000000, riskScore: 94, typology: 'layering', label: '1MDB Corridor', caseId: 'case-1mdb' },
+  { id: 'c-09', source: 'cayman', target: 'newyork', volume: 1500000000, riskScore: 75, typology: 'layering', label: 'Caribbean Integration' },
+  { id: 'c-10', source: 'dubai', target: 'london', volume: 2800000000, riskScore: 87, typology: 'trade_based_ml', label: 'Gold & Commodities' },
+  { id: 'c-11', source: 'malta', target: 'liechtenstein', volume: 450000000, riskScore: 80, typology: 'layering', label: 'EU Regulatory Arbitrage' },
+  { id: 'c-12', source: 'seychelles', target: 'bvi', volume: 720000000, riskScore: 91, typology: 'layering', label: 'Island Hop Chain' },
+  { id: 'c-13', source: 'macau', target: 'hongkong', volume: 1100000000, riskScore: 83, typology: 'structuring', label: 'Casino → Banking' },
+  { id: 'c-14', source: 'myanmar', target: 'singapore', volume: 340000000, riskScore: 96, typology: 'trade_based_ml', label: 'Narco-Trade Flow' },
+  { id: 'c-15', source: 'bahamas', target: 'panama', volume: 560000000, riskScore: 79, typology: 'layering', label: 'Caribbean Circuit' },
 ];
 
 // ── Jurisdiction → Coordinates Lookup ────────────────────────
 export const JURISDICTION_COORDS: Record<string, [number, number]> = {
-  'malaysia':               [3.1390,   101.6869],
-  'kuala lumpur':           [3.1390,   101.6869],
-  'seychelles':             [-4.6796,  55.4920],
-  'british virgin islands': [18.4207,  -64.6400],
-  'bvi':                    [18.4207,  -64.6400],
-  'singapore':              [1.3521,   103.8198],
-  'hong kong':              [22.3193,  114.1694],
-  'london':                 [51.5074,  -0.1278],
-  'united kingdom':         [51.5074,  -0.1278],
-  'switzerland':            [47.3769,  8.5417],
-  'zurich':                 [47.3769,  8.5417],
-  'panama':                 [8.9824,   -79.5199],
-  'cayman islands':         [19.3133,  -81.2546],
-  'cyprus':                  [35.1856,  33.3823],
-  'dubai':                  [25.2048,  55.2708],
-  'uae':                    [25.2048,  55.2708],
-  'united arab emirates':   [25.2048,  55.2708],
-  'united states':          [40.7128,  -74.0060],
-  'usa':                    [40.7128,  -74.0060],
-  'new york':               [40.7128,  -74.0060],
-  'moscow':                 [55.7558,  37.6173],
-  'russia':                 [55.7558,  37.6173],
-  'lagos':                  [6.5244,   3.3792],
-  'nigeria':                [6.5244,   3.3792],
-  'mumbai':                 [19.0760,  72.8777],
-  'india':                  [19.0760,  72.8777],
-  'malta':                  [35.8989,  14.5146],
-  'liechtenstein':          [47.1410,  9.5215],
-  'bahamas':                [25.0343,  -77.3963],
-  'macau':                  [22.1987,  113.5439],
-  'myanmar':                [16.8661,  96.1951],
-  'isle of man':            [54.2361,  -4.5481],
-  'jersey':                 [49.2144,  -2.1312],
-  'belize':                 [17.1899,  -88.4976],
-  'mauritius':              [-20.3484, 57.5522],
-  'geneva':                 [46.2044,  6.1432],
-  'frankfurt':              [50.1109,  8.6821],
-  'germany':                [50.1109,  8.6821],
-  'amsterdam':              [52.3676,  4.9041],
-  'tokyo':                  [35.6762,  139.6503],
-  'japan':                  [35.6762,  139.6503],
-  'toronto':                [43.6532,  -79.3832],
-  'canada':                 [43.6532,  -79.3832],
+  'malaysia': [3.1390, 101.6869],
+  'kuala lumpur': [3.1390, 101.6869],
+  'seychelles': [-4.6796, 55.4920],
+  'british virgin islands': [18.4207, -64.6400],
+  'bvi': [18.4207, -64.6400],
+  'singapore': [1.3521, 103.8198],
+  'hong kong': [22.3193, 114.1694],
+  'london': [51.5074, -0.1278],
+  'united kingdom': [51.5074, -0.1278],
+  'switzerland': [47.3769, 8.5417],
+  'zurich': [47.3769, 8.5417],
+  'panama': [8.9824, -79.5199],
+  'cayman islands': [19.3133, -81.2546],
+  'cyprus': [35.1856, 33.3823],
+  'dubai': [25.2048, 55.2708],
+  'uae': [25.2048, 55.2708],
+  'united arab emirates': [25.2048, 55.2708],
+  'united states': [40.7128, -74.0060],
+  'usa': [40.7128, -74.0060],
+  'new york': [40.7128, -74.0060],
+  'moscow': [55.7558, 37.6173],
+  'russia': [55.7558, 37.6173],
+  'lagos': [6.5244, 3.3792],
+  'nigeria': [6.5244, 3.3792],
+  'mumbai': [19.0760, 72.8777],
+  'india': [19.0760, 72.8777],
+  'malta': [35.8989, 14.5146],
+  'liechtenstein': [47.1410, 9.5215],
+  'bahamas': [25.0343, -77.3963],
+  'macau': [22.1987, 113.5439],
+  'myanmar': [16.8661, 96.1951],
+  'isle of man': [54.2361, -4.5481],
+  'jersey': [49.2144, -2.1312],
+  'belize': [17.1899, -88.4976],
+  'mauritius': [-20.3484, 57.5522],
+  'geneva': [46.2044, 6.1432],
+  'frankfurt': [50.1109, 8.6821],
+  'germany': [50.1109, 8.6821],
+  'amsterdam': [52.3676, 4.9041],
+  'tokyo': [35.6762, 139.6503],
+  'japan': [35.6762, 139.6503],
+  'toronto': [43.6532, -79.3832],
+  'canada': [43.6532, -79.3832],
 };
 
 // ── Helpers ──────────────────────────────────────────────────
@@ -109,7 +109,8 @@ export function getCorridorCoords(corridor: MLCorridor): { from: [number, number
   };
 }
 
-export function geocodeJurisdiction(jurisdiction: string): [number, number] | null {
+export function geocodeJurisdiction(jurisdiction?: string | null): [number, number] | null {
+  if (!jurisdiction) return null;
   const key = jurisdiction.toLowerCase().trim();
   return JURISDICTION_COORDS[key] || null;
 }
@@ -117,10 +118,10 @@ export function geocodeJurisdiction(jurisdiction: string): [number, number] | nu
 export function riskColor(level: string): string {
   switch (level) {
     case 'critical': return '#E11D48';
-    case 'high':     return '#EA580C';
-    case 'medium':   return '#EAB308';
-    case 'low':      return '#22C55E';
-    default:         return '#404040';
+    case 'high': return '#EA580C';
+    case 'medium': return '#EAB308';
+    case 'low': return '#22C55E';
+    default: return '#404040';
   }
 }