+ (null);
+ const anchorRef = useRef<{ x: number; y: number } | null>(anchor ?? null);
+
+ // Keep anchorRef in sync with prop or auto-compute from DOM
+ useEffect(() => {
+ if (anchor) {
+ anchorRef.current = anchor;
+ return;
+ }
+ const update = () => {
+ if (containerRef.current) {
+ const rect = containerRef.current.getBoundingClientRect();
+ anchorRef.current = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+ }
+ };
+ update();
+ window.addEventListener("scroll", update, true);
+ window.addEventListener("resize", update);
+ return () => {
+ window.removeEventListener("scroll", update, true);
+ window.removeEventListener("resize", update);
+ };
+ }, [anchor]);
+
+ const offset = useLazyEyes({ anchorRef, maxShift, ease });
+
+ return (
+ ;
-
-// Dimmed color for non-matching nodes
-function dimColor(bg: string): string {
- return lerpHex(bg, "#808080", 0.15);
+function statusRGBA(entry: NetworkNode, theme: ReturnType): [number, number, number, number] {
+ const age = Date.now() / 1000 - (entry.last_seen ?? 0);
+ if (age < 300) return theme.online;
+ if (age < 3600) return theme.stale;
+ return theme.offline;
}
// ---------------------------------------------------------------------------
-// Incremental graph sync — adds/removes/updates nodes without clearing
+// Build flat arrays for cosmos — positions around spaceSize/2
// ---------------------------------------------------------------------------
-function nodeAttrs(entry: NetworkNode, colors: ThemeColors, ifaceColor: string) {
- if (entry.is_self) {
- return { label: entry.name, size: 12, color: colors.primary, type: "circle" };
- }
- if (entry.type === "interface") {
- return { label: `⬡ ${entry.name}`, size: 8, color: ifaceColor, type: "square" };
- }
- return { label: entry.name, size: 5, color: colors.foreground, type: "circle" };
+interface BuiltGraph {
+ entries: NetworkNode[];
+ positions: Float32Array;
+ colors: Float32Array;
+ sizes: Float32Array;
+ clusterIndices: (number | undefined)[];
+ clusterPositions: (number | undefined)[];
+ clusterStrength: Float32Array;
+ clusterNames: string[];
+ hashToIndex: Map;
}
-function findParent(
+function findParentIface(
entry: NetworkNode,
interfaces: NetworkNode[],
- selfHash: string | undefined,
peerIndex: number,
): string | undefined {
if (entry.interface) {
@@ -71,508 +93,517 @@ function findParent(
if (iface) return iface.hash;
}
if (interfaces.length > 0) return interfaces[peerIndex % interfaces.length].hash;
- return selfHash;
+ return undefined;
}
-function syncGraph(
- graph: Graph,
- entries: NetworkNode[],
- colors: ThemeColors,
-) {
- const ifaceColor = lerpHex(colors.primary, colors.muted, 0.4);
- const selfEntry = entries.find(e => e.is_self);
- const interfaces = entries.filter(e => e.type === "interface");
- const peers = entries.filter(e => !e.is_self && e.type !== "interface");
+function buildGraphArrays(
+ rawNodes: NetworkNode[],
+ prevHashToIndex: Map,
+ prevPositions: number[],
+ theme: ReturnType,
+): BuiltGraph {
+ const interfaces = rawNodes.filter(e => e.type === "interface").sort((a, b) => a.name.localeCompare(b.name));
+ const peers = rawNodes.filter(e => !e.is_self && e.type !== "interface");
- const desiredNodes = new Set(entries.map(e => e.hash));
+ // Only peers are points — interfaces are clusters, not nodes
+ const entries = peers;
+ const n = entries.length;
+ const nClusters = interfaces.length;
+ const hashToIndex = new Map();
+ const positions = new Float32Array(n * 2);
+ const colors = new Float32Array(n * 4);
+ const sizes = new Float32Array(n);
+ const clusterIndices: (number | undefined)[] = [];
+ const clusterStrength = new Float32Array(n);
- // --- Remove nodes no longer present ---
- const toRemove = graph.nodes().filter(n => !desiredNodes.has(n));
- for (const n of toRemove) graph.dropNode(n);
+ // Cluster map: interface name → cluster index
+ const clusterMap = new Map();
+ interfaces.forEach((iface, i) => clusterMap.set(iface.name, i));
- // --- Add or update self ---
- if (selfEntry) {
- const attrs = nodeAttrs(selfEntry, colors, ifaceColor);
- if (graph.hasNode(selfEntry.hash)) {
- graph.mergeNodeAttributes(selfEntry.hash, attrs);
+ // Cluster names for labels
+ const clusterNames = interfaces.map(i => i.name);
+
+ // No explicit cluster positions — let cosmos use centermass
+ const clusterPositions: (number | undefined)[] = [];
+
+ entries.forEach((entry, i) => {
+ hashToIndex.set(entry.hash, i);
+
+ // Position: preserve existing, or jitter near center for new points
+ const prevIdx = prevHashToIndex.get(entry.hash);
+ if (prevIdx !== undefined && prevPositions.length >= (prevIdx + 1) * 2) {
+ positions[i * 2] = prevPositions[prevIdx * 2]!;
+ positions[i * 2 + 1] = prevPositions[prevIdx * 2 + 1]!;
} else {
- graph.addNode(selfEntry.hash, { x: 0, y: 0, fixed: true, ...attrs });
+ positions[i * 2] = CENTER + (Math.random() - 0.5) * SPACE_SIZE * 0.5;
+ positions[i * 2 + 1] = CENTER + (Math.random() - 0.5) * SPACE_SIZE * 0.5;
}
- }
- // --- Add or update interfaces ---
- interfaces.forEach((iface, ci) => {
- const attrs = nodeAttrs(iface, colors, ifaceColor);
- if (graph.hasNode(iface.hash)) {
- graph.mergeNodeAttributes(iface.hash, attrs);
- } else {
- const angle = (ci / Math.max(1, interfaces.length)) * Math.PI * 2 - Math.PI / 2;
- const radius = 3;
- graph.addNode(iface.hash, {
- x: Math.cos(angle) * radius,
- y: Math.sin(angle) * radius,
- fixed: true,
- ...attrs,
- });
- }
- // Ensure edge self → interface
- if (selfEntry && !graph.hasEdge(selfEntry.hash, iface.hash)) {
- graph.addEdge(selfEntry.hash, iface.hash, { color: colors.border, size: 2 });
- }
+ // Colors — by status
+ const rgba = statusRGBA(entry, theme);
+ colors[i * 4 + 0] = rgba[0];
+ colors[i * 4 + 1] = rgba[1];
+ colors[i * 4 + 2] = rgba[2];
+ colors[i * 4 + 3] = rgba[3];
+
+ sizes[i] = 3;
+
+ // Cluster assignment — map to parent interface
+ const pi = peers.indexOf(entry);
+ const parentHash = findParentIface(entry, interfaces, pi);
+ const parentName = parentHash ? interfaces.find(f => f.hash === parentHash)?.name : undefined;
+ clusterIndices.push(parentName !== undefined ? clusterMap.get(parentName) : undefined);
+
+ // Cluster strength
+ clusterStrength[i] = nClusters > 1 ? (nClusters - (i % nClusters)) / nClusters : 1;
});
- // --- Add or update peers ---
- peers.forEach((peer, pi) => {
- const attrs = nodeAttrs(peer, colors, ifaceColor);
- const parentHash = findParent(peer, interfaces, selfEntry?.hash, pi);
-
- if (graph.hasNode(peer.hash)) {
- graph.mergeNodeAttributes(peer.hash, attrs);
- } else {
- // Position near parent
- let px = 0, py = 0;
- if (parentHash && graph.hasNode(parentHash)) {
- const parent = graph.getNodeAttributes(parentHash);
- const angle = Math.random() * Math.PI * 2;
- const dist = 1.5 + Math.random() * 2;
- px = (parent.x ?? 0) + Math.cos(angle) * dist;
- py = (parent.y ?? 0) + Math.sin(angle) * dist;
- }
- graph.addNode(peer.hash, { x: px, y: py, ...attrs });
- }
-
- // Ensure edge parent → peer
- if (parentHash && graph.hasNode(parentHash) && !graph.hasEdge(parentHash, peer.hash)) {
- graph.addEdge(parentHash, peer.hash, { color: colors.border, size: 1 });
- }
- });
-
- // --- Clean stale edges (both endpoints must still exist) ---
- graph.forEachEdge((edge, _attrs, source, target) => {
- if (!desiredNodes.has(source) || !desiredNodes.has(target)) {
- graph.dropEdge(edge);
- }
- });
+ return { entries, positions, colors, sizes, clusterIndices, clusterPositions, clusterStrength, clusterNames, hashToIndex };
}
// ---------------------------------------------------------------------------
-// Reducer state — mutable, drives nodeReducer / edgeReducer
+// Per-window state & BrowserWindow
// ---------------------------------------------------------------------------
-interface ReducerState {
- hoveredNode?: string;
- hoveredNeighbors?: Set;
- searchQuery: string;
- selectedNode?: string;
- suggestions?: Set;
+interface BrowserWin {
+ id: string; node: NetworkNode;
+ pageHtml: string | null; pageLoading: boolean; pageError: string | null;
+ x: number; y: number; w: number; h: number; zIndex: number;
+}
+
+let nextWinZ = 1;
+
+const DITHERED_SHADOW = `
+ 3px 3px 0 0 var(--border), 5px 3px 0 0 transparent, 7px 3px 0 0 var(--border),
+ 4px 4px 0 0 transparent, 6px 4px 0 0 var(--border),
+ 3px 5px 0 0 var(--border), 5px 5px 0 0 transparent, 7px 5px 0 0 var(--border),
+ 4px 6px 0 0 var(--border), 6px 6px 0 0 transparent
+`;
+
+function BrowserWindow({
+ win, focused, onUpdate, onClose, onFocus,
+}: {
+ win: BrowserWin; focused: boolean;
+ onUpdate: (id: string, patch: Partial) => void;
+ onClose: (id: string) => void; onFocus: (id: string) => void;
+}) {
+ const ref = useRef(null);
+ const dragRef = useRef<{ startX: number; startY: number; origX: number; origY: number } | null>(null);
+ const resizeRef = useRef<{ startX: number; startY: number; origW: number; origH: number } | null>(null);
+ useEffect(() => { if (focused) ref.current?.focus(); }, [focused]);
+
+ const onDragStart = useCallback((e: React.MouseEvent) => {
+ if ((e.target as HTMLElement).closest("button")) return;
+ e.preventDefault(); onFocus(win.id);
+ dragRef.current = { startX: e.clientX, startY: e.clientY, origX: win.x, origY: win.y };
+ const onMove = (ev: MouseEvent) => { if (!dragRef.current) return; onUpdate(win.id, { x: dragRef.current.origX + (ev.clientX - dragRef.current.startX), y: Math.max(0, dragRef.current.origY + (ev.clientY - dragRef.current.startY)) }); };
+ const onUp = () => { dragRef.current = null; document.removeEventListener("mousemove", onMove); document.removeEventListener("mouseup", onUp); };
+ document.addEventListener("mousemove", onMove); document.addEventListener("mouseup", onUp);
+ }, [win.id, win.x, win.y, onUpdate, onFocus]);
+
+ const onResizeStart = useCallback((e: React.MouseEvent) => {
+ e.preventDefault(); e.stopPropagation(); onFocus(win.id);
+ resizeRef.current = { startX: e.clientX, startY: e.clientY, origW: win.w, origH: win.h };
+ const onMove = (ev: MouseEvent) => { if (!resizeRef.current) return; onUpdate(win.id, { w: Math.max(320, resizeRef.current.origW + (ev.clientX - resizeRef.current.startX)), h: Math.max(200, resizeRef.current.origH + (ev.clientY - resizeRef.current.startY)) }); };
+ const onUp = () => { resizeRef.current = null; document.removeEventListener("mousemove", onMove); document.removeEventListener("mouseup", onUp); };
+ document.addEventListener("mousemove", onMove); document.addEventListener("mouseup", onUp);
+ }, [win.id, win.w, win.h, onUpdate, onFocus]);
+
+ return createPortal(
+ ([]);
const [filter, setFilter] = useState("");
- const [selectedNode, setSelectedNode] = useState(null);
- const [pageHtml, setPageHtml] = useState(null);
- const [pageLoading, setPageLoading] = useState(false);
- const [pageError, setPageError] = useState(null);
+ const [windows, setWindows] = useState([]);
+ const [focusedWinId, setFocusedWinId] = useState(null);
+ const [hoveredLabel, setHoveredLabel] = useState<{ text: string; x: number; y: number } | null>(null);
+
const [themeRev, setThemeRev] = useState(0);
- const containerRef = useRef(null);
- const sigmaRef = useRef(null);
- const graphRef = useRef(null);
- const layoutRef = useRef(null);
- const nodesMapRef = useRef>(new Map());
- const stateRef = useRef({ searchQuery: "" });
-
- // ── Watch for theme changes ──
+ // Watch for theme changes (class on )
useEffect(() => {
- const observer = new MutationObserver(() => setThemeRev((r) => r + 1));
+ const observer = new MutationObserver(() => setThemeRev(r => r + 1));
observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
return () => observer.disconnect();
}, []);
- // ── Initialize Sigma with reducers ──
+ const containerRef = useRef(null);
+ const searchInputRef = useRef(null);
+ const graphRef = useRef(null);
+ const entriesRef = useRef([]);
+ const nodesMapRef = useRef>(new Map());
+ const hashToIndexRef = useRef>(new Map());
+ const clusterNamesRef = useRef([]);
+
+ // Build graph data, preserving existing positions
+ const graphData = useMemo(() => {
+ const graph = graphRef.current;
+ const prevPositions = graph ? graph.getPointPositions() : [];
+ return buildGraphArrays(nodes, hashToIndexRef.current, prevPositions, getThemeStatusColors());
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [nodes, themeRev]);
+
+ useEffect(() => {
+ const map = new Map();
+ for (const n of nodes) map.set(n.hash, n);
+ nodesMapRef.current = map;
+ entriesRef.current = graphData.entries;
+ hashToIndexRef.current = graphData.hashToIndex;
+ clusterNamesRef.current = graphData.clusterNames;
+ }, [nodes, graphData]);
+
+ // Search
+ const searchMatchIndices = useMemo(() => {
+ if (!filter.trim()) return null;
+ const q = filter.trim().toLowerCase();
+ const indices: number[] = [];
+ graphData.entries.forEach((entry, i) => {
+ if (entry.name.toLowerCase().includes(q)) indices.push(i);
+ });
+ return indices.length > 0 ? indices : null;
+ }, [filter, graphData]);
+
+ // ── Cluster labels — direct DOM like the example's create-cluster-labels.ts ──
+ const labelDivsRef = useRef([]);
+ const updateClusterLabels = useCallback(() => {
+ const graph = graphRef.current;
+ const container = containerRef.current;
+ if (!graph || !container) return;
+
+ const positions = graph.getClusterPositions();
+ const names = clusterNamesRef.current;
+ const nClusters = Math.min(names.length, positions.length / 2);
+
+ // Rebuild label divs if count changed
+ if (labelDivsRef.current.length !== nClusters) {
+ labelDivsRef.current.forEach(d => d.remove());
+ labelDivsRef.current = [];
+ for (let i = 0; i < nClusters; i++) {
+ const div = document.createElement("div");
+ div.style.position = "absolute";
+ div.style.pointerEvents = "none";
+ div.style.whiteSpace = "nowrap";
+ div.style.transform = "translate(-50%, -100%)";
+ div.style.padding = "2px 8px";
+ div.style.borderRadius = "4px";
+ div.style.background = "var(--popover)";
+ div.style.border = "1px solid var(--border)";
+ div.style.color = "var(--foreground)";
+ div.style.fontFamily = "JetBrains Mono, monospace";
+ div.style.fontSize = "11px";
+ div.style.boxShadow = "0 2px 8px rgba(0,0,0,0.3)";
+ div.textContent = names[i] ?? "";
+ container.appendChild(div);
+ labelDivsRef.current.push(div);
+ }
+ }
+
+ // Update positions
+ for (let i = 0; i < nClusters; i++) {
+ const x = positions[i * 2];
+ const y = positions[i * 2 + 1];
+ if (x === undefined || y === undefined) continue;
+ const screen = graph.spaceToScreenPosition([x, y]);
+ const div = labelDivsRef.current[i]!;
+ div.style.left = `${screen[0]}px`;
+ div.style.top = `${screen[1]}px`;
+ }
+ }, []);
+
+ // ── Init Cosmos — matching the example's create-cosmos.ts ──
useEffect(() => {
if (!containerRef.current) return;
- const graph = new Graph();
+ const graph = new Graph(containerRef.current, {
+ spaceSize: SPACE_SIZE,
+ backgroundColor: "transparent",
+ pointDefaultColor: "#888888",
+ pointDefaultSize: 10,
+ renderLinks: false,
+ fitViewOnInit: true,
+ fitViewDelay: 1500,
+ fitViewPadding: 0.2,
+ renderHoveredPointRing: true,
+ hoveredPointRingColor: "#ffffff",
+ scalePointsOnZoom: true,
+ // Simulation defaults — dynamically adjusted by node count in data update
+ simulationGravity: 0.5,
+ simulationRepulsion: 1,
+ simulationCluster: 0.5,
+ simulationDecay: 5000,
+ simulationFriction: 0.85,
+ simulationLinkSpring: 0,
+ simulationLinkDistance: 1,
+ // Events
+ onClick: (index, _pos, _event) => {
+ if (index === undefined) return;
+ const entry = entriesRef.current[index];
+ if (entry && entry.type !== "interface") handleNodeClick(entry);
+ },
+ onMouseMove: (index, pointPosition) => {
+ if (index === undefined || !pointPosition || !graphRef.current) {
+ setHoveredLabel(null);
+ return;
+ }
+ const entry = entriesRef.current[index];
+ if (!entry) return;
+ const screen = graphRef.current.spaceToScreenPosition(pointPosition);
+ setHoveredLabel({ text: entry.name, x: screen[0], y: screen[1] });
+ },
+ onSimulationTick: () => updateClusterLabels(),
+ onSimulationEnd: () => { graphRef.current?.fitView(300, 0.2); updateClusterLabels(); },
+ onZoom: () => updateClusterLabels(),
+ });
+
graphRef.current = graph;
- const colors = getThemeColors();
- const dim = dimColor(colors.bg);
-
- const renderer = new Sigma(graph, containerRef.current, {
- allowInvalidContainer: true,
- nodeProgramClasses: { square: NodeSquareProgram },
- defaultNodeColor: colors.primary,
- defaultEdgeColor: colors.border,
- labelColor: { color: colors.foreground },
- labelFont: "JetBrains Mono, monospace",
- labelSize: 10,
- labelRenderedSizeThreshold: 0,
- renderEdgeLabels: false,
- enableEdgeEvents: false,
- // ── Node reducer: search highlighting + hover dimming ──
- nodeReducer: (node, data) => {
- const res: Partial = { ...data };
- const s = stateRef.current;
-
- // Hover: dim non-neighbors
- if (s.hoveredNeighbors && !s.hoveredNeighbors.has(node) && s.hoveredNode !== node) {
- res.label = "";
- res.color = dim;
- }
-
- // Search: highlight matches, dim the rest
- if (s.selectedNode === node) {
- res.highlighted = true;
- } else if (s.suggestions) {
- if (s.suggestions.has(node)) {
- res.forceLabel = true;
- } else {
- res.label = "";
- res.color = dim;
- }
- }
-
- return res;
- },
- // ── Edge reducer: hide irrelevant edges ──
- edgeReducer: (edge, data) => {
- const res: Partial = { ...data };
- const s = stateRef.current;
- const g = graphRef.current!;
-
- // Hover: hide edges not connected to hovered node
- if (s.hoveredNode && !g.extremities(edge).includes(s.hoveredNode)) {
- res.hidden = true;
- }
-
- // Search: hide edges not connecting two suggestions
- if (s.suggestions &&
- (!s.suggestions.has(g.source(edge)) || !s.suggestions.has(g.target(edge)))) {
- res.hidden = true;
- }
-
- return res;
- },
- });
-
- // Hover events
- renderer.on("enterNode", ({ node }) => {
- stateRef.current.hoveredNode = node;
- stateRef.current.hoveredNeighbors = new Set(graph.neighbors(node));
- renderer.refresh({ skipIndexation: true });
- });
- renderer.on("leaveNode", () => {
- stateRef.current.hoveredNode = undefined;
- stateRef.current.hoveredNeighbors = undefined;
- renderer.refresh({ skipIndexation: true });
- });
-
- // Click events
- renderer.on("clickNode", ({ node }) => {
- const entry = nodesMapRef.current.get(node);
- if (entry && entry.type !== "interface") {
- handleNodeClick(entry);
- }
- });
- renderer.on("clickStage", () => {
- setSelectedNode(null);
- setPageHtml(null);
- setPageError(null);
- });
-
- // Force layout — runs continuously, pins fixed nodes
- const layout = new ForceSupervisor(graph, {
- isNodeFixed: (_, attr) => attr.fixed,
- settings: { gravity: 0.0005, repulsion: 0.5, attraction: 0.01, inertia: 0.6 },
- });
- layout.start();
- layoutRef.current = layout;
-
- sigmaRef.current = renderer;
-
return () => {
- layout.kill();
- renderer.kill();
- layoutRef.current = null;
- sigmaRef.current = null;
+ labelDivsRef.current.forEach(d => d.remove());
+ labelDivsRef.current = [];
+ graph.destroy();
graphRef.current = null;
};
}, []);
- // ── Search: update reducer state when filter changes ──
+ // ── Update data — following the example's exact call order ──
+ const isFirstLoadRef = useRef(true);
useEffect(() => {
- const renderer = sigmaRef.current;
const graph = graphRef.current;
- if (!renderer || !graph) return;
+ if (!graph || graphData.entries.length === 0) return;
- const s = stateRef.current;
- const query = filter.trim();
- s.searchQuery = query;
+ // Scale simulation params by node count
+ // Reference: 10k nodes → repulsion 10, cluster 0.25, gravity 2
+ // Scale logarithmically so it works from 10 to 10k nodes
+ const n = graphData.entries.length;
+ const scale = Math.log10(Math.max(10, n)) / Math.log10(10000); // 0..1
+ graph.setConfig({
+ simulationRepulsion: 0.5 + scale * 9.5, // 0.5 → 10
+ simulationCluster: 1.0 - scale * 0.75, // 1.0 → 0.25
+ simulationGravity: 0.25 + scale * 1.75, // 0.25 → 2
+ });
- if (query) {
- const lcQuery = query.toLowerCase();
- const matches = graph
- .nodes()
- .map((n) => ({ id: n, label: (graph.getNodeAttribute(n, "label") as string) || "" }))
- .filter(({ label }) => label.toLowerCase().includes(lcQuery));
+ graph.setPointPositions(graphData.positions);
+ graph.setPointColors(graphData.colors);
+ graph.setPointSizes(graphData.sizes);
+ graph.setPointClusters(graphData.clusterIndices);
+ graph.setClusterPositions(graphData.clusterPositions);
+ graph.setPointClusterStrength(graphData.clusterStrength);
+ graph.setLinks(new Float32Array(0));
- // Exact single match → select and zoom
- if (matches.length === 1 && matches[0].label.toLowerCase() === lcQuery) {
- s.selectedNode = matches[0].id;
- s.suggestions = undefined;
-
- const nodePosition = renderer.getNodeDisplayData(s.selectedNode);
- if (nodePosition) {
- renderer.getCamera().animate(nodePosition, { duration: 500 });
- }
- } else {
- s.selectedNode = undefined;
- s.suggestions = new Set(matches.map(({ id }) => id));
- }
+ if (isFirstLoadRef.current) {
+ graph.render(1);
+ isFirstLoadRef.current = false;
} else {
- s.selectedNode = undefined;
- s.suggestions = undefined;
+ graph.render(0.1);
+ }
+ updateClusterLabels();
+ }, [graphData]);
+
+ // ── Search highlighting + labels ──
+ const searchLabelDivsRef = useRef([]);
+ const searchTimerRef = useRef | null>(null);
+
+ const clearSearchLabels = useCallback(() => {
+ if (searchTimerRef.current) { clearTimeout(searchTimerRef.current); searchTimerRef.current = null; }
+ searchLabelDivsRef.current.forEach(d => d.remove());
+ searchLabelDivsRef.current = [];
+ }, []);
+
+ useEffect(() => {
+ const graph = graphRef.current;
+ const container = containerRef.current;
+ if (!graph || !container) return;
+
+ clearSearchLabels();
+
+ if (searchMatchIndices) {
+ graph.selectPointsByIndices(searchMatchIndices);
+ if (searchMatchIndices.length <= 10) {
+ graph.fitViewByPointIndices(searchMatchIndices, 500);
+ }
+
+ searchTimerRef.current = setTimeout(() => {
+ searchTimerRef.current = null;
+ if (!graphRef.current) return;
+ const positions = graphRef.current.getPointPositions();
+ const entries = entriesRef.current;
+ for (const idx of searchMatchIndices) {
+ const x = positions[idx * 2];
+ const y = positions[idx * 2 + 1];
+ if (x === undefined || y === undefined) continue;
+ const screen = graphRef.current.spaceToScreenPosition([x, y]);
+ const div = document.createElement("div");
+ div.style.position = "absolute";
+ div.style.pointerEvents = "none";
+ div.style.left = `${screen[0] + 10}px`;
+ div.style.top = `${screen[1] - 8}px`;
+ div.style.padding = "2px 8px";
+ div.style.borderRadius = "4px";
+ div.style.background = "var(--popover)";
+ div.style.border = "1px solid var(--border)";
+ div.style.color = "var(--foreground)";
+ div.style.fontFamily = "JetBrains Mono, monospace";
+ div.style.fontSize = "11px";
+ div.style.boxShadow = "0 2px 8px rgba(0,0,0,0.3)";
+ div.style.whiteSpace = "nowrap";
+ div.textContent = entries[idx]?.name ?? "";
+ container.appendChild(div);
+ searchLabelDivsRef.current.push(div);
+ }
+ }, 600);
+ } else {
+ graph.unselectPoints();
+ graph.fitView(300, 0.2);
}
- renderer.refresh({ skipIndexation: true });
- }, [filter]);
+ return () => clearSearchLabels();
+ }, [searchMatchIndices, clearSearchLabels]);
- // ── Incrementally sync graph when nodes arrive or theme changes ──
- useEffect(() => {
- const renderer = sigmaRef.current;
- const graph = graphRef.current;
- if (!renderer || !graph) return;
-
- const colors = getThemeColors();
- const dim = dimColor(colors.bg);
-
- // Build node map for click lookups
- const map = new Map();
- for (const n of nodes) map.set(n.hash, n);
- nodesMapRef.current = map;
-
- // Incremental add/remove/update — no graph.clear()
- syncGraph(graph, nodes, colors);
-
- // Update theme settings + dim color in reducers
- renderer.setSetting("defaultNodeColor", colors.primary);
- renderer.setSetting("defaultEdgeColor", colors.border);
- renderer.setSetting("labelColor", { color: colors.foreground });
-
- renderer.setSetting("nodeReducer", (node, data) => {
- const res: Partial = { ...data };
- const s = stateRef.current;
-
- if (s.hoveredNeighbors && !s.hoveredNeighbors.has(node) && s.hoveredNode !== node) {
- res.label = "";
- res.color = dim;
- }
- if (s.selectedNode === node) {
- res.highlighted = true;
- } else if (s.suggestions) {
- if (s.suggestions.has(node)) {
- res.forceLabel = true;
- } else {
- res.label = "";
- res.color = dim;
- }
- }
- return res;
- });
-
- renderer.setSetting("edgeReducer", (edge, data) => {
- const res: Partial = { ...data };
- const s = stateRef.current;
-
- if (s.hoveredNode && !graph.extremities(edge).includes(s.hoveredNode)) {
- res.hidden = true;
- }
- if (s.suggestions &&
- (!s.suggestions.has(graph.source(edge)) || !s.suggestions.has(graph.target(edge)))) {
- res.hidden = true;
- }
- return res;
- });
-
- renderer.refresh();
- }, [nodes, themeRev]);
-
- // ── Live SSE stream (batched) ──
+ // ── SSE stream ──
useEffect(() => {
let pending: NetworkNode[] = [];
let batchTimer: ReturnType | null = null;
-
const flush = () => {
batchTimer = null;
if (pending.length === 0) return;
- const batch = pending;
- pending = [];
+ const batch = pending; pending = [];
setNodes((prev) => {
const map = new Map(prev.map((n) => [n.hash, n]));
for (const node of batch) map.set(node.hash, node);
return Array.from(map.values());
});
};
-
- const unsub = subscribeBrowseNodes((node) => {
- pending.push(node);
- if (!batchTimer) batchTimer = setTimeout(flush, 100);
- });
-
- return () => {
- unsub();
- if (batchTimer) clearTimeout(batchTimer);
- flush();
- };
+ const unsub = subscribeBrowseNodes((node) => { pending.push(node); if (!batchTimer) batchTimer = setTimeout(flush, 200); });
+ return () => { unsub(); if (batchTimer) clearTimeout(batchTimer); flush(); };
}, []);
- // ── Node click → fetch page ──
+ // ── Node click ──
const handleNodeClick = useCallback((node: NetworkNode) => {
- setSelectedNode(node);
- setPageHtml(null);
- setPageError(null);
- setPageLoading(true);
-
- fetchRemotePage(node.hash)
- .then((res) => {
- if (res.content) setPageHtml(renderMicron(res.content, true));
- else setPageError(res.error ?? "No content");
- })
- .catch((e) => setPageError(String(e)))
- .finally(() => setPageLoading(false));
+ setWindows((prev) => {
+ const existing = prev.find((w) => w.node.hash === node.hash);
+ if (existing) { const z = ++nextWinZ; setFocusedWinId(existing.id); return prev.map((w) => w.id === existing.id ? { ...w, zIndex: z } : w); }
+ const winW = 480, winH = 400, margin = 20, z = ++nextWinZ;
+ const win: BrowserWin = {
+ id: `${node.hash}-${Date.now()}`, node, pageHtml: null, pageLoading: true, pageError: null,
+ x: Math.round(margin + Math.random() * (Math.max(margin, window.innerWidth - winW - margin) - margin)),
+ y: Math.round(margin + Math.random() * (Math.max(margin, window.innerHeight - winH - margin) - margin)),
+ w: winW, h: winH, zIndex: z,
+ };
+ setFocusedWinId(win.id);
+ fetchRemotePage(node.hash)
+ .then((res) => setWindows((ws) => ws.map((w) => w.id === win.id ? { ...w, pageHtml: res.content ? renderMicron(res.content, true) : null, pageError: res.content ? null : (res.error ?? "No content"), pageLoading: false } : w)))
+ .catch((e) => setWindows((ws) => ws.map((w) => w.id === win.id ? { ...w, pageError: String(e), pageLoading: false } : w)));
+ return [...prev, win];
+ });
}, []);
- // ── Resizable split ──
- const [graphHeight, setGraphHeight] = useState(500);
- const draggingRef = useRef(false);
- const wrapperRef = useRef(null);
+ const updateWindow = useCallback((id: string, patch: Partial) => setWindows((prev) => prev.map((w) => (w.id === id ? { ...w, ...patch } : w))), []);
+ const closeWindowById = useCallback((id: string) => { setWindows((prev) => prev.filter((w) => w.id !== id)); setFocusedWinId((cur) => cur === id ? null : cur); }, []);
+ const focusWindow = useCallback((id: string) => { setFocusedWinId((cur) => { if (cur === id) return cur; const z = ++nextWinZ; setWindows((prev) => prev.map((w) => (w.id === id ? { ...w, zIndex: z } : w))); return id; }); }, []);
- const onResizeStart = useCallback((e: React.MouseEvent) => {
- e.preventDefault();
- draggingRef.current = true;
-
- const startY = e.clientY;
- const startH = graphHeight;
-
- const onMove = (ev: MouseEvent) => {
- if (!draggingRef.current || !wrapperRef.current) return;
- const wrapperH = wrapperRef.current.getBoundingClientRect().height;
- const headerH = 41; // header bar height approx
- const minGraph = 150;
- const minPage = 100;
- const maxGraph = wrapperH - headerH - minPage;
- const newH = Math.min(maxGraph, Math.max(minGraph, startH + (ev.clientY - startY)));
- setGraphHeight(newH);
- };
-
- const onUp = () => {
- draggingRef.current = false;
- document.removeEventListener("mousemove", onMove);
- document.removeEventListener("mouseup", onUp);
- // Refresh sigma after resize
- sigmaRef.current?.refresh();
- };
-
- document.addEventListener("mousemove", onMove);
- document.addEventListener("mouseup", onUp);
- }, [graphHeight]);
+ const clearSearch = useCallback(() => {
+ setFilter("");
+ graphRef.current?.unselectPoints();
+ graphRef.current?.fitView(300, 0.2);
+ updateClusterLabels();
+ }, [updateClusterLabels]);
const nodeCount = nodes.filter(n => n.type !== "interface").length;
const ifaceCount = nodes.filter(n => n.type === "interface").length;
- const colors = getThemeColors();
+
+ // ── Draggable search bar ──
+ const [searchPos, setSearchPos] = useState<{ x: number; y: number } | null>(null);
+ const searchDragRef = useRef<{ startX: number; startY: number; origX: number; origY: number } | null>(null);
+ useEffect(() => { setSearchPos({ x: Math.round(window.innerWidth / 2 - 200), y: window.innerHeight - 130 }); }, []);
+
+ const onSearchDragStart = useCallback((e: React.MouseEvent) => {
+ if ((e.target as HTMLElement).tagName === "INPUT") return;
+ e.preventDefault();
+ const pos = searchPos ?? { x: 0, y: 0 };
+ searchDragRef.current = { startX: e.clientX, startY: e.clientY, origX: pos.x, origY: pos.y };
+ const onMove = (ev: MouseEvent) => { if (!searchDragRef.current) return; setSearchPos({ x: searchDragRef.current.origX + (ev.clientX - searchDragRef.current.startX), y: Math.max(0, searchDragRef.current.origY + (ev.clientY - searchDragRef.current.startY)) }); };
+ const onUp = () => { searchDragRef.current = null; document.removeEventListener("mousemove", onMove); document.removeEventListener("mouseup", onUp); };
+ document.addEventListener("mousemove", onMove); document.addEventListener("mouseup", onUp);
+ }, [searchPos]);
return (
-
{/* Frame SVG — background */}
+ {/* Lazy eyes on the browse frame figure */}
+ {isBrowse && (
+
navigate("/")}
+ style={layout.title}
>
navigate("/")}
>
{TITLE}
@@ -141,7 +190,7 @@ export default function AppShell({ children }: { children: ReactNode }) {
{/* Bottom hole — main content */}
{children}
@@ -150,7 +199,7 @@ export default function AppShell({ children }: { children: ReactNode }) {
{!isEditor && (
+ {eyes.map((eye, i) => {
+ const size = eye.size ?? 5;
+ const irisSize = eye.irisSize ?? 2;
+ // Clamp iris within eye circle
+ const maxR = (size - irisSize) / 2;
+ const dist = Math.sqrt(offset.x * offset.x + offset.y * offset.y) || 0;
+ const scale = dist > maxR && dist > 0 ? maxR / dist : 1;
+ const cx = offset.x * scale;
+ const cy = offset.y * scale;
+ return (
+
+ );
+}
diff --git a/frontend/src/hooks/useLazyEyes.ts b/frontend/src/hooks/useLazyEyes.ts
new file mode 100644
index 0000000..3cc303c
--- /dev/null
+++ b/frontend/src/hooks/useLazyEyes.ts
@@ -0,0 +1,90 @@
+import { useEffect, useRef, useState } from "react";
+
+interface LazyEyesOptions {
+ /** Reference point the eyes "live" at (viewport coords). Eyes look away from this toward the mouse. */
+ anchorRef: React.RefObject<{ x: number; y: number } | null>;
+ /** Max pixel shift for the iris (default 1.5) */
+ maxShift?: number;
+ /** Lerp ease factor 0–1 for slow drift (default 0.04) */
+ ease?: number;
+ /** Saccade threshold — when target jumps more than this, snap fast (default 0.8) */
+ saccadeThreshold?: number;
+ /** Fast ease for saccade snap (default 0.35) */
+ saccadeEase?: number;
+}
+
+/**
+ * Returns a smoothly-interpolated { x, y } offset for positioning irises
+ * that lazily track the mouse cursor relative to an anchor point.
+ *
+ * Movement model:
+ * - Small mouse moves → slow, lazy drift (ease)
+ * - Large jumps → quick saccade snap (saccadeEase), then settle
+ * - Tiny random micro-drift to avoid perfectly still eyes
+ */
+export function useLazyEyes({
+ anchorRef,
+ maxShift = 1.5,
+ ease = 0.04,
+ saccadeThreshold = 0.8,
+ saccadeEase = 0.35,
+}: LazyEyesOptions) {
+ const [offset, setOffset] = useState({ x: 0, y: 0 });
+ const targetRef = useRef({ x: 0, y: 0 });
+ const currentRef = useRef({ x: 0, y: 0 });
+ const velocityRef = useRef({ x: 0, y: 0 });
+
+ useEffect(() => {
+ const onMouseMove = (e: MouseEvent) => {
+ const anchor = anchorRef.current;
+ if (!anchor) return;
+ const dx = e.clientX - anchor.x;
+ const dy = e.clientY - anchor.y;
+ const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+ targetRef.current = {
+ x: (dx / dist) * maxShift,
+ y: (dy / dist) * maxShift,
+ };
+ };
+
+ window.addEventListener("mousemove", onMouseMove);
+
+ let raf = 0;
+ const tick = () => {
+ const ec = currentRef.current;
+ const et = targetRef.current;
+ const vel = velocityRef.current;
+
+ // Distance to target
+ const dx = et.x - ec.x;
+ const dy = et.y - ec.y;
+ const dist = Math.sqrt(dx * dx + dy * dy);
+
+ // Saccade: snap fast when target jumps significantly
+ const e_ = dist > saccadeThreshold ? saccadeEase : ease;
+
+ // Apply eased movement
+ vel.x = vel.x * 0.6 + dx * e_ * 0.4;
+ vel.y = vel.y * 0.6 + dy * e_ * 0.4;
+ ec.x += vel.x;
+ ec.y += vel.y;
+
+ // Micro-drift: tiny organic tremor when nearly still
+ if (dist < 0.1) {
+ ec.x += (Math.random() - 0.5) * 0.02;
+ ec.y += (Math.random() - 0.5) * 0.02;
+ }
+
+ setOffset({ x: ec.x, y: ec.y });
+ raf = requestAnimationFrame(tick);
+ };
+ raf = requestAnimationFrame(tick);
+
+ return () => {
+ window.removeEventListener("mousemove", onMouseMove);
+ cancelAnimationFrame(raf);
+ };
+ }, [anchorRef, maxShift, ease, saccadeThreshold, saccadeEase]);
+
+ return offset;
+}
diff --git a/frontend/src/routes/BrowseView.tsx b/frontend/src/routes/BrowseView.tsx
index 3362638..810e326 100644
--- a/frontend/src/routes/BrowseView.tsx
+++ b/frontend/src/routes/BrowseView.tsx
@@ -1,69 +1,91 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-import Graph from "graphology";
-import Sigma from "sigma";
-import type { NodeDisplayData, EdgeDisplayData } from "sigma/types";
-import { NodeSquareProgram } from "@sigma/node-square";
-import ForceSupervisor from "graphology-layout-force/worker";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Graph } from "@cosmos.gl/graph";
import { subscribeBrowseNodes, fetchRemotePage, type NetworkNode } from "@/api/client";
import { renderMicron } from "@/components/editor/micronRenderer";
-import axisMundiUrl from "@/assets/axis-mundi.min.svg";
// ---------------------------------------------------------------------------
-// Theme — read from CSS custom properties
+// Constants — matching cosmos.gl clusters-with-labels example
// ---------------------------------------------------------------------------
-function cssVarToHex(varName: string): string {
+const SPACE_SIZE = 4096;
+const CENTER = SPACE_SIZE / 2;
+
+// ---------------------------------------------------------------------------
+// Theme-aware status colors — reads CSS variables, returns 0–1 RGBA
+// ---------------------------------------------------------------------------
+
+function cssVarToRGBA(varName: string): [number, number, number, number] {
const raw = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
- if (!raw) return "#808080";
+ if (!raw) return [0.5, 0.5, 0.5, 1];
const ctx = document.createElement("canvas").getContext("2d")!;
ctx.fillStyle = raw;
- return ctx.fillStyle;
+ // ctx.fillStyle normalizes to #rrggbb
+ const hex = ctx.fillStyle;
+ const r = parseInt(hex.slice(1, 3), 16) / 255;
+ const g = parseInt(hex.slice(3, 5), 16) / 255;
+ const b = parseInt(hex.slice(5, 7), 16) / 255;
+ return [r, g, b, 1];
}
-function getThemeColors() {
+function lerpRGBA(
+ a: [number, number, number, number],
+ b: [number, number, number, number],
+ t: number,
+): [number, number, number, number] {
+ return [
+ a[0] + (b[0] - a[0]) * t,
+ a[1] + (b[1] - a[1]) * t,
+ a[2] + (b[2] - a[2]) * t,
+ a[3] + (b[3] - a[3]) * t,
+ ];
+}
+
+function brighten(c: [number, number, number, number], amount: number): [number, number, number, number] {
+ return [
+ Math.min(1, c[0] + amount),
+ Math.min(1, c[1] + amount),
+ Math.min(1, c[2] + amount),
+ c[3],
+ ];
+}
+
+function getThemeStatusColors() {
+ const primary = brighten(cssVarToRGBA("--primary"), 0.15);
+ const muted = cssVarToRGBA("--muted-foreground");
return {
- primary: cssVarToHex("--primary"),
- muted: cssVarToHex("--muted-foreground"),
- border: cssVarToHex("--border"),
- foreground: cssVarToHex("--foreground"),
- bg: cssVarToHex("--background"),
+ online: primary, // --primary brightened
+ stale: lerpRGBA(primary, muted, 0.4), // blend, closer to primary
+ offline: muted, // --muted-foreground
};
}
-function lerpHex(a: string, b: string, t: number): string {
- const parse = (h: string) => [parseInt(h.slice(1, 3), 16), parseInt(h.slice(3, 5), 16), parseInt(h.slice(5, 7), 16)];
- const ca = parse(a), cb = parse(b);
- const r = Math.round(ca[0] + (cb[0] - ca[0]) * t);
- const g = Math.round(ca[1] + (cb[1] - ca[1]) * t);
- const bl = Math.round(ca[2] + (cb[2] - ca[2]) * t);
- return "#" + [r, g, bl].map(c => c.toString(16).padStart(2, "0")).join("");
-}
-
-type ThemeColors = ReturnType
+
+
+ );
+ })}
+ { if (e.key === "Escape") onClose(win.id); }} onMouseDown={() => onFocus(win.id)}
+ className="fixed z-999 flex flex-col bg-popover text-popover-foreground border-2 rounded-lg outline-none transition-[border-color,opacity] duration-150"
+ style={{ left: win.x, top: win.y, width: win.w, height: win.h, zIndex: 999 + win.zIndex, borderColor: focused ? "var(--primary)" : "var(--border)", opacity: focused ? 1 : 0.85, boxShadow: DITHERED_SHADOW }}>
+
, document.body);
}
// ---------------------------------------------------------------------------
-// Component
+// Main component
// ---------------------------------------------------------------------------
export default function BrowseView() {
const [nodes, setNodes] = useState
+
+
+
+ {win.node.name}
+
+ addr
+
+ {win.node.hash}
+
+ {win.pageLoading ? loading
+ : win.pageError ? <>error
+ : win.pageHtml ? <>ok : null}
+
+
+ {win.pageLoading && Requesting page...}
+ {win.pageError && {win.pageError}}
+ {win.pageHtml && }
+
+
+ {win.node.type ?? "peer"}
+ {win.node.interface && via {win.node.interface}}
+
+
+
+
+
- {/* Header */}
-
-
+ Browse
- setFilter(e.target.value)} - placeholder="Search nodes..." - className="flex-1 h-8 px-2 text-xs bg-muted/50 border border-border rounded placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary" - /> - - {nodeCount} node{nodeCount !== 1 && "s"} - {" · "} - {ifaceCount} iface{ifaceCount !== 1 && "s"} - -
+
- {/* Graph */}
-
- {/* Sigma container — must have no React children */}
-
- {nodes.length === 0 && (
-
+ {/* Hover label */}
+ {hoveredLabel && (
+
- Listening for nodes on the Reticulum network...
-
- )}
-
+ {hoveredLabel.text}
+
+ )}
- {/* Resize handle */}
-
-
- {/* Page viewer */}
-
-
);
}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 0c5a7ed..bef4b31 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -9,6 +9,7 @@ export default defineConfig({
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
+ "gl-bench": path.resolve(__dirname, "node_modules/gl-bench/dist/gl-bench.module.js"),
},
},
server: {
-
- {selectedNode ? (
- <>
- {selectedNode.name}
-
- {selectedNode.hash.slice(0, 12)}
-
-
- ) : (
- Page
- )}
+ {/* Search bar */}
+ {searchPos && createPortal(
+
, document.body)}
-
+ setFilter(e.target.value)}
+ onKeyDown={(e) => { if (e.key === "Escape") { clearSearch(); e.currentTarget.blur(); } }}
+ placeholder="Search nodes..."
+ className="flex-1 h-7 px-2 text-xs bg-background/60 border border-border rounded placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary cursor-text" />
+ {filter && (
+
+ )}
+
+ {nodeCount} node{nodeCount !== 1 && "s"} · {ifaceCount} iface{ifaceCount !== 1 && "s"}
-
+
- {!selectedNode && !pageLoading && (
-
+ )}
+
+ {windows.map((win) => (
+
-
- Click a node to view its page
-
- )}
- {pageLoading && (
-
- Requesting page...
-
- )}
- {pageError && (
- {pageError}
- )}
- {pageHtml && (
-
- )}
+ {nodes.length === 0 && (
+
+ Listening for nodes on the Reticulum network...
-