Add dashboard 3D fleet map, matrix stream overlay, and PWA support.

Integrates React Three Fiber topology view and a live matrix stream modal on the dashboard. Adds vite-plugin-pwa with AetherForge manifest and three.js dependencies.

server/web/src/components/Visual/MatrixStreamOverlay.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useRef } from 'react';
+import { useWebSocket } from '../../hooks/useWebSocket';
+import './MatrixStreamOverlay.css';
+
+export default function MatrixStreamOverlay({ active, onClose }: { active: boolean; onClose: () => void }) {
+  const { recentShares } = useWebSocket();
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (!active || !canvasRef.current) return;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const resize = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+    resize();
+    window.addEventListener('resize', resize);
+
+    const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789$+-*/=%""\'#&_(),.;:?!\\|{}<>[]^~';
+    const fontSize = 16;
+    let columns = canvas.width / fontSize;
+    let drops: number[] = Array(Math.floor(columns)).fill(1);
+
+    const draw = () => {
+      // Black BG for the canvas
+      // translucent BG to show trail
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      ctx.fillStyle = '#0F0'; // Green text
+      ctx.font = `${fontSize}px monospace`;
+
+      for (let i = 0; i < drops.length; i++) {
+        let text = letters.charAt(Math.floor(Math.random() * letters.length));
+
+        // Occasionally drop a raw share payload in the stream
+        if (Math.random() > 0.99 && recentShares.length > 0) {
+          const share = recentShares[Math.floor(Math.random() * recentShares.length)];
+          text = JSON.stringify({ agent: share.agent_id?.substring(0,6), hash: share.hash?.substring(0,8), valid: share.accepted });
+          ctx.fillStyle = share.accepted ? '#00f5ff' : '#ff4444';
+          ctx.fillText(text, i * fontSize, drops[i] * fontSize);
+          ctx.fillStyle = '#0F0'; // Reset color
+        } else {
+          ctx.fillText(text, i * fontSize, drops[i] * fontSize);
+        }
+
+        // sending the drop back to the top randomly after it has crossed the screen
+        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+          drops[i] = 0;
+        }
+
+        drops[i]++;
+      }
+    };
+
+    const interval = setInterval(draw, 33);
+    return () => {
+      clearInterval(interval);
+      window.removeEventListener('resize', resize);
+    };
+  }, [active, recentShares]);
+
+  if (!active) return null;
+
+  return (
+    <div className="matrix-overlay fade-in" onClick={onClose}>
+      <canvas ref={canvasRef} className="matrix-canvas" />
+      <div className="matrix-text-overlay">
+        <h2>RAW_SOCKET_STREAM [ACTIVE]</h2>
+        <div className="matrix-close-hint">Click anywhere to close terminal</div>
+      </div>
+    </div>
+  );
+}