sdl-mcp 0.12.2 → 0.12.3

package/dist/ui/viewer/ambient.js

@@ -0,0 +1,39 @@
+import * as THREE from "three";
+import { setAmbient, state } from "./state.js";
+export class AmbientController {
+    viewer;
+    universe;
+    caption;
+    lastInput = performance.now();
+    captionTimer = 0;
+    constructor(viewer, universe, caption) {
+        this.viewer = viewer;
+        this.universe = universe;
+        this.caption = caption;
+        for (const type of ["pointermove", "keydown", "wheel", "pointerdown"])
+            window.addEventListener(type, this.onInput, { passive: true });
+        viewer.onFrame((delta) => this.frame(delta));
+    }
+    setCaption(text) {
+        this.caption.textContent = text;
+        this.caption.classList.add("visible");
+        window.clearTimeout(this.captionTimer);
+        this.captionTimer = window.setTimeout(() => this.caption.classList.remove("visible"), 3500);
+    }
+    onInput = () => { this.lastInput = performance.now(); if (state.ambient)
+        setAmbient(false); };
+    frame(delta) {
+        const settings = state.settings;
+        if (!settings?.ambient.enabled)
+            return;
+        if (!state.ambient && performance.now() - this.lastInput > settings.ambient.idleSeconds * 1000)
+            setAmbient(true);
+        if (!state.ambient)
+            return;
+        this.viewer.setFpsCap(settings.ambient.fps);
+        const angle = (delta / 1000) * 0.02;
+        this.viewer.camera.position.applyAxisAngle(new THREE.Vector3(0, 1, 0), angle);
+        this.viewer.controls.target.lerp(new THREE.Vector3(0, 0, 0), 0.02);
+        void this.universe;
+    }
+}

package/dist/ui/viewer/api.js

@@ -0,0 +1,93 @@
+const TOKEN_STORAGE_KEY = "sdl-mcp-observability-token";
+export function readAuthTokenFromPage() {
+    const params = new URLSearchParams(window.location.hash.replace(/^#/, ""));
+    const hashToken = params.get("token");
+    if (hashToken) {
+        localStorage.setItem(TOKEN_STORAGE_KEY, hashToken);
+        history.replaceState(null, "", window.location.pathname + window.location.search);
+        return hashToken;
+    }
+    return localStorage.getItem(TOKEN_STORAGE_KEY) ?? "";
+}
+export class ViewerApi {
+    token = readAuthTokenFromPage();
+    setToken(token) {
+        this.token = token;
+        if (token)
+            localStorage.setItem(TOKEN_STORAGE_KEY, token);
+        else
+            localStorage.removeItem(TOKEN_STORAGE_KEY);
+    }
+    getToken() {
+        return this.token;
+    }
+    headers(accept = "application/json") {
+        const headers = { Accept: accept };
+        if (this.token)
+            headers.Authorization = "Bearer " + this.token;
+        return headers;
+    }
+    async json(url) {
+        const response = await fetch(url, { headers: this.headers() });
+        if (!response.ok)
+            throw new Error("HTTP " + response.status + " for " + url);
+        return response.json();
+    }
+    async universe() { return this.json("/api/graph/universe"); }
+    async clusters(repoId) { return this.json("/api/graph/repo/" + encodeURIComponent(repoId) + "/clusters"); }
+    async clusterEdges(repoId) { return this.json("/api/graph/repo/" + encodeURIComponent(repoId) + "/edges?scope=clusters"); }
+    async layout(repoId, lod, clusterId) {
+        const params = new URLSearchParams({ lod });
+        if (clusterId)
+            params.set("clusterId", clusterId);
+        return this.json("/api/graph/repo/" + encodeURIComponent(repoId) + "/layout?" + params.toString());
+    }
+    async symbolEdges(repoId, clusterId, filters) {
+        const params = new URLSearchParams({ clusterId });
+        if (filters?.minConfidence !== undefined)
+            params.set("minConfidence", String(filters.minConfidence));
+        if (filters?.exactOnly)
+            params.set("exactOnly", "1");
+        if (filters?.kinds?.length)
+            params.set("kinds", filters.kinds.join(","));
+        return this.json("/api/graph/repo/" + encodeURIComponent(repoId) + "/edges?" + params.toString());
+    }
+    async card(repoId, symbolId) { return this.json("/api/graph/repo/" + encodeURIComponent(repoId) + "/symbol/" + encodeURIComponent(symbolId) + "/card"); }
+    async search(repoId, query) { return this.json("/api/graph/repo/" + encodeURIComponent(repoId) + "/search?q=" + encodeURIComponent(query)); }
+    async impact(repoId, fromVersion, toVersion) {
+        return this.json("/api/graph/repo/" + encodeURIComponent(repoId) + "/impact?fromVersion=" + encodeURIComponent(fromVersion) + "&toVersion=" + encodeURIComponent(toVersion));
+    }
+    async skins() { return this.json("/api/graph/skins"); }
+    async skinBytes(id) {
+        const response = await fetch("/api/graph/skins/" + encodeURIComponent(id), { headers: this.headers("application/zip") });
+        if (!response.ok)
+            throw new Error("HTTP " + response.status + " for skin " + id);
+        return response.arrayBuffer();
+    }
+    async graphStream(onEvent, signal) {
+        const response = await fetch("/api/observability/stream?types=graph", { headers: this.headers("text/event-stream"), signal });
+        if (!response.ok || !response.body)
+            throw new Error("SSE failed: HTTP " + response.status);
+        const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
+        let buffer = "";
+        while (!signal.aborted) {
+            const chunk = await reader.read();
+            if (chunk.done)
+                break;
+            buffer += chunk.value;
+            const events = buffer.split("\n\n");
+            buffer = events.pop() ?? "";
+            for (const event of events) {
+                const data = event.split("\n").filter((line) => line.startsWith("data:")).map((line) => line.slice(5).trim()).join("\n");
+                if (!data)
+                    continue;
+                try {
+                    onEvent(JSON.parse(data));
+                }
+                catch (error) {
+                    console.warn("[viewer] bad SSE event", error);
+                }
+            }
+        }
+    }
+}

package/dist/ui/viewer/chrome.js

@@ -0,0 +1,36 @@
+import { setActiveLens, setVisibleRepos, subscribe } from "./state.js";
+export class ViewerChrome {
+    searchInput;
+    lensSelect;
+    skinSelect;
+    fpsSelect;
+    ambientButton;
+    status;
+    repoHost;
+    constructor(host) {
+        host.innerHTML = '<div class="brand"><span class="mark"></span><div><h1>SDL Galaxy</h1><p>graph viewer</p></div></div>' +
+            '<div class="toolbar"><div class="repo-filter"></div><input class="search" type="search" placeholder="Search symbols" aria-label="Search symbols" />' +
+            '<select class="lens" aria-label="Lens"><option value="none">Normal</option><option value="community">Community</option><option value="impact">Impact</option><option value="edges">Edges</option></select>' +
+            '<select class="skin" aria-label="Skin"><option value="default">Default</option></select>' +
+            '<select class="fps" aria-label="FPS"><option>15</option><option>30</option><option selected>60</option><option>90</option><option>120</option></select>' +
+            '<button class="ambient" type="button" aria-pressed="false">Ambient</button><span class="status">booting</span></div>';
+        this.searchInput = host.querySelector(".search");
+        this.lensSelect = host.querySelector(".lens");
+        this.skinSelect = host.querySelector(".skin");
+        this.fpsSelect = host.querySelector(".fps");
+        this.ambientButton = host.querySelector(".ambient");
+        this.status = host.querySelector(".status");
+        this.repoHost = host.querySelector(".repo-filter");
+        this.lensSelect.addEventListener("change", () => setActiveLens(this.lensSelect.value));
+        subscribe((snapshot) => { this.ambientButton.setAttribute("aria-pressed", String(snapshot.ambient)); });
+    }
+    setRepos(repos) {
+        this.repoHost.innerHTML = repos.map((repo) => '<label><input type="checkbox" value="' + repo.repoId + '" checked />' + repo.repoId + '</label>').join("");
+        this.repoHost.addEventListener("change", () => {
+            setVisibleRepos([...this.repoHost.querySelectorAll('input:checked')].map((input) => input.value));
+        });
+    }
+    setSettings(settings) { this.fpsSelect.value = String(settings.fps); }
+    setSkins(skins) { this.skinSelect.innerHTML = '<option value="default">Default</option>' + skins.map((skin) => '<option value="' + skin.id + '">' + skin.id + '</option>').join(""); }
+    setStatus(value) { this.status.textContent = value; }
+}

package/dist/ui/viewer/edges.js

@@ -0,0 +1,33 @@
+import * as THREE from "three";
+import { KIND_COLORS } from "./theme.js";
+export function createSymbolEdges(edges, positions, minConfidence = 0, exactOnly = false, kinds = new Set()) {
+    const points = [];
+    const colors = [];
+    for (const edge of edges) {
+        const confidence = edge.confidence ?? 1;
+        const kind = edge.kind ?? "call";
+        if (confidence < minConfidence)
+            continue;
+        if (exactOnly && edge.resolution && edge.resolution !== "exact")
+            continue;
+        if (kinds.size > 0 && !kinds.has(kind))
+            continue;
+        const from = positions.get(edge.from);
+        const to = positions.get(edge.to);
+        if (!from || !to)
+            continue;
+        const color = new THREE.Color(KIND_COLORS[kind] ?? "#93a7c8").multiplyScalar(Math.max(0.65, confidence));
+        points.push(from.x, from.y, from.z, to.x, to.y, to.z);
+        colors.push(color.r, color.g, color.b, color.r, color.g, color.b);
+    }
+    const geometry = new THREE.BufferGeometry();
+    geometry.setAttribute("position", new THREE.Float32BufferAttribute(points, 3));
+    geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
+    return new THREE.LineSegments(geometry, new THREE.LineBasicMaterial({ vertexColors: true, transparent: true, opacity: 0.85, blending: THREE.AdditiveBlending, depthWrite: false }));
+}
+export function edgeCounts(edges) {
+    const counts = new Map();
+    for (const edge of edges)
+        counts.set(edge.kind ?? "call", (counts.get(edge.kind ?? "call") ?? 0) + 1);
+    return counts;
+}

package/dist/ui/viewer/index.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>SDL Galaxy</title>
+    <link rel="stylesheet" href="/ui/observability.css" />
+    <link rel="stylesheet" href="/ui/viewer/viewer.css" />
+    <script type="importmap">
+      {
+        "imports": {
+          "three": "/ui/vendor/three.module.min.js",
+          "three/addons/": "/ui/vendor/jsm/",
+          "fflate": "/ui/vendor/fflate.js"
+        }
+      }
+    </script>
+  </head>
+  <body class="viewer-body">
+    <header id="viewerChrome" class="viewer-chrome"></header>
+    <main class="viewer-shell">
+      <section id="viewerCanvas" class="viewer-canvas" aria-label="SDL Galaxy graph canvas"></section>
+      <aside id="viewerInspector" class="panel viewer-inspector" aria-label="Inspector"></aside>
+      <section class="panel viewer-results" aria-label="Search and lens results">
+        <header class="panel-head"><h2>RESULTS</h2><span class="panel-sub">live</span></header>
+        <div id="viewerResults" class="result-list"></div>
+      </section>
+    </main>
+    <div id="viewerCaption" class="viewer-caption" role="status" aria-live="polite"></div>
+    <script type="module" src="/ui/viewer/main.js"></script>
+  </body>
+</html>

package/dist/ui/viewer/inspector.js

@@ -0,0 +1,23 @@
+import { subscribe } from "./state.js";
+function text(value) { return value === undefined || value === null || value === "" ? "-" : String(value); }
+export class InspectorPanel {
+    host;
+    constructor(host) {
+        this.host = host;
+        subscribe((state) => this.render(state.selection?.card ?? null, state.selection?.clusterId));
+    }
+    render(card, clusterId) {
+        if (!card && !clusterId) {
+            this.host.innerHTML = '<header class="panel-head"><h2>INSPECTOR</h2><span class="panel-sub">no selection</span></header><div class="empty">Select a cluster or symbol.</div>';
+            return;
+        }
+        if (!card) {
+            this.host.innerHTML = '<header class="panel-head"><h2>CLUSTER</h2><span class="panel-sub">' + text(clusterId) + '</span></header><dl class="inspector-dl"><dt>Cluster ID</dt><dd>' + text(clusterId) + '</dd></dl>';
+            return;
+        }
+        const deps = [...(card.deps?.out ?? []), ...(card.deps?.in ?? [])].slice(0, 8).map((dep) => '<button type="button" data-symbol="' + text(dep.symbolId) + '">' + text(dep.name ?? dep.symbolId) + '</button>').join("");
+        this.host.innerHTML = '<header class="panel-head"><h2>' + text(card.name ?? card.symbolId) + '</h2><span class="panel-sub">' + text(card.kind) + '</span></header>' +
+            '<dl class="inspector-dl"><dt>Signature</dt><dd><code>' + text(typeof card.signature === "string" ? card.signature : JSON.stringify(card.signature ?? "")) + '</code></dd><dt>Summary</dt><dd>' + text(card.summary) + '</dd></dl>' +
+            '<div class="dep-list">' + deps + '</div>';
+    }
+}

package/dist/ui/viewer/lenses/activity.js

@@ -0,0 +1,24 @@
+import { pushGraphEvent } from "../state.js";
+export class ActivityLens {
+    api;
+    universe;
+    setCaption;
+    abortController = null;
+    constructor(api, universe, setCaption) {
+        this.api = api;
+        this.universe = universe;
+        this.setCaption = setCaption;
+    }
+    start() {
+        this.abortController?.abort();
+        this.abortController = new AbortController();
+        void this.api.graphStream((event) => this.handle(event), this.abortController.signal).catch((error) => console.warn("[viewer] graph stream", error));
+    }
+    stop() { this.abortController?.abort(); }
+    handle(event) {
+        pushGraphEvent(event);
+        if (event.repoId && event.clusterId)
+            this.universe.pulseCluster(event.repoId, event.clusterId);
+        this.setCaption(event.type + (event.count ? ": " + event.count : ""));
+    }
+}

package/dist/ui/viewer/lenses/community.js

@@ -0,0 +1,5 @@
+import { setActiveLens } from "../state.js";
+export function applyCommunityLens(universe) {
+    setActiveLens("community");
+    universe.applyLens("community");
+}

package/dist/ui/viewer/lenses/edges.js

@@ -0,0 +1,4 @@
+import { edgeCounts } from "../edges.js";
+export function renderEdgeCounts(host, edges) {
+    host.innerHTML = [...edgeCounts(edges)].map(([kind, count]) => '<label><input type="checkbox" value="' + kind + '" checked />' + kind + ' <span>' + count + '</span></label>').join("");
+}

package/dist/ui/viewer/lenses/impact.js

@@ -0,0 +1,6 @@
+export async function runImpactLens(api, repoId, fromVersion, toVersion, renderList) {
+    const result = await api.impact(repoId, fromVersion, toVersion);
+    const changed = (result.changed ?? []).map((symbolId) => symbolId);
+    const blast = (result.blastRadius ?? []).map((item) => item.name ?? item.symbolId);
+    renderList([...changed, ...blast]);
+}

package/dist/ui/viewer/lenses/search.js

@@ -0,0 +1,69 @@
+import { setSearchResults } from "../state.js";
+function escapeHtml(value) {
+    return String(value ?? "")
+        .replaceAll("&", "&")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;");
+}
+export function renderSearchResultsHtml(results) {
+    if (results.length === 0)
+        return '<div class="empty">No results</div>';
+    return results.map((result, index) => {
+        const score = typeof result.score === "number" ? " · " + result.score.toFixed(3) : "";
+        const path = result.relPath ? '<span class="result-path">' + escapeHtml(result.relPath) + '</span>' : "";
+        return '<button type="button" class="result-item" data-index="' + String(index) + '" data-symbol-id="' + escapeHtml(result.symbolId) + '" data-cluster-id="' + escapeHtml(result.clusterId ?? "") + '">' +
+            '<span class="result-name">' + escapeHtml(result.name || result.symbolId) + '</span>' +
+            '<span class="result-meta">' + escapeHtml(result.kind) + score + '</span>' +
+            path +
+            '</button>';
+    }).join("");
+}
+export function attachSearch(input, resultsHost, api, getRepoId, onSelect) {
+    let timer = 0;
+    let currentResults = [];
+    const clear = () => {
+        currentResults = [];
+        setSearchResults([]);
+        resultsHost.innerHTML = "";
+    };
+    const choose = async (result) => {
+        if (!result)
+            return;
+        await onSelect(result);
+    };
+    input.addEventListener("keydown", (event) => {
+        if (event.key === "Escape") {
+            input.value = "";
+            clear();
+        }
+        if (event.key === "Enter") {
+            event.preventDefault();
+            void choose(currentResults[0]);
+        }
+    });
+    window.addEventListener("keydown", (event) => { if (event.key === "/" && document.activeElement !== input) {
+        event.preventDefault();
+        input.focus();
+    } });
+    resultsHost.addEventListener("click", (event) => {
+        const button = event.target?.closest("button[data-index]");
+        if (!button)
+            return;
+        void choose(currentResults[Number(button.dataset.index)]);
+    });
+    input.addEventListener("input", () => {
+        window.clearTimeout(timer);
+        timer = window.setTimeout(async () => {
+            const query = input.value.trim();
+            if (!query) {
+                clear();
+                return;
+            }
+            const response = await api.search(getRepoId(), query);
+            currentResults = response.results ?? [];
+            setSearchResults(currentResults);
+            resultsHost.innerHTML = renderSearchResultsHtml(currentResults);
+        }, 180);
+    });
+}

package/dist/ui/viewer/lod.js

@@ -0,0 +1,100 @@
+import * as THREE from "three";
+import { createSymbolEdges } from "./edges.js";
+import { touchExpandedCluster, removeExpandedCluster, state } from "./state.js";
+import { KIND_COLORS, hashColor } from "./theme.js";
+export class LodController {
+    api;
+    viewer;
+    universe;
+    expanded = new Map();
+    constructor(api, viewer, universe) {
+        this.api = api;
+        this.viewer = viewer;
+        this.universe = universe;
+    }
+    async maybeExpandNearest() {
+        let nearest = null;
+        for (const cluster of this.universe.getClusters()) {
+            const distance = cluster.position.distanceTo(this.viewer.camera.position);
+            if (distance < 520 && (!nearest || distance < nearest.distance))
+                nearest = { key: cluster.repoId + ":" + cluster.clusterId, distance };
+        }
+        if (nearest && !this.expanded.has(nearest.key))
+            await this.expand(nearest.key);
+        for (const [key, expanded] of this.expanded) {
+            const cluster = this.universe.getCluster(key);
+            if (!cluster || cluster.position.distanceTo(this.viewer.camera.position) > 1150 || !state.expandedClusters.has(key))
+                this.collapse(key, expanded);
+        }
+    }
+    async expand(key) {
+        const cluster = this.universe.getCluster(key);
+        if (!cluster)
+            return;
+        touchExpandedCluster(key);
+        const limit = state.settings?.layout.maxSymbolsPerClusterExpand ?? 5000;
+        if (cluster.symbolCount > limit)
+            return;
+        const [layout, edgeResponse] = await Promise.all([
+            this.api.layout(cluster.repoId, "symbol", cluster.clusterId),
+            this.api.symbolEdges(cluster.repoId, cluster.clusterId),
+        ]);
+        const nodes = edgeResponse.nodes ?? layout.positions.map((position) => ({ id: position.id }));
+        const geometry = new THREE.SphereGeometry(3.5, 10, 8);
+        const material = new THREE.MeshBasicMaterial();
+        const mesh = new THREE.InstancedMesh(geometry, material, Math.max(nodes.length, 1));
+        mesh.name = "symbols:" + key;
+        const matrix = new THREE.Matrix4();
+        const color = new THREE.Color();
+        const positions = new Map();
+        const layoutPositions = new Map(layout.positions.map((position) => [position.id, position]));
+        nodes.forEach((node, index) => {
+            const p = layoutPositions.get(node.id);
+            const position = new THREE.Vector3(p?.x ?? 0, p?.y ?? 0, p?.z ?? 0).multiplyScalar(0.45).add(cluster.position);
+            positions.set(node.id, position);
+            const scale = 0.5 + Math.log2(1 + (node.fanIn ?? 0)) * 0.25;
+            matrix.compose(position, new THREE.Quaternion(), new THREE.Vector3(scale, scale, scale));
+            mesh.setMatrixAt(index, matrix);
+            mesh.setColorAt(index, this.nodeColor(node, cluster.clusterId, color));
+        });
+        mesh.instanceMatrix.needsUpdate = true;
+        if (mesh.instanceColor)
+            mesh.instanceColor.needsUpdate = true;
+        const lines = createSymbolEdges(edgeResponse.edges, positions);
+        const group = new THREE.Group();
+        group.add(mesh);
+        group.add(lines);
+        this.viewer.root.add(group);
+        this.expanded.set(key, { key, clusterId: cluster.clusterId, group, positions, nodes, mesh, lines });
+    }
+    collapse(key, expanded = this.expanded.get(key)) {
+        if (!expanded)
+            return;
+        this.viewer.disposeObject(expanded.group);
+        this.expanded.delete(key);
+        removeExpandedCluster(key);
+    }
+    applyLens() {
+        const color = new THREE.Color();
+        for (const expanded of this.expanded.values()) {
+            expanded.nodes.forEach((node, index) => {
+                expanded.mesh.setColorAt(index, this.nodeColor(node, expanded.clusterId, color));
+            });
+            if (expanded.mesh.instanceColor)
+                expanded.mesh.instanceColor.needsUpdate = true;
+            expanded.lines.material.opacity = state.activeLens === "edges" ? 1 : 0.85;
+        }
+    }
+    nodeColor(node, clusterId, target) {
+        const lens = state.activeLens;
+        if (lens === "community")
+            return target.set(hashColor(clusterId));
+        if (lens === "impact") {
+            const heat = Math.min(1, Math.log2(1 + (node.fanIn ?? 0)) / 8);
+            return target.set("#38bdf8").lerp(new THREE.Color("#fb7185"), heat);
+        }
+        target.set(KIND_COLORS[node.kind ?? "function"] ?? "#e5e7eb");
+        return lens === "edges" ? target.multiplyScalar(0.35) : target;
+    }
+    getExpanded() { return [...this.expanded.values()]; }
+}

package/dist/ui/viewer/main.js

@@ -0,0 +1,92 @@
+import * as THREE from "three";
+import { ViewerApi } from "./api.js";
+import { AmbientController } from "./ambient.js";
+import { ViewerChrome } from "./chrome.js";
+import { InspectorPanel } from "./inspector.js";
+import { ActivityLens } from "./lenses/activity.js";
+import { attachSearch } from "./lenses/search.js";
+import { LodController } from "./lod.js";
+import { PickingController } from "./picking.js";
+import { ViewerScene } from "./scene.js";
+import { setSettings, loadVisibleRepos, state, subscribe, setAmbient, setSelection } from "./state.js";
+import { loadSkinZip, applySkinCssVars } from "./skins/loader.js";
+import { UniverseRenderer } from "./universe.js";
+const canvasHost = document.getElementById("viewerCanvas");
+const chromeHost = document.getElementById("viewerChrome");
+const inspectorHost = document.getElementById("viewerInspector");
+const captionHost = document.getElementById("viewerCaption");
+if (!canvasHost || !chromeHost || !inspectorHost || !captionHost)
+    throw new Error("viewer shell missing required elements");
+const api = new ViewerApi();
+const scene = new ViewerScene(canvasHost);
+const universeRenderer = new UniverseRenderer(scene);
+const chrome = new ViewerChrome(chromeHost);
+new InspectorPanel(inspectorHost);
+new PickingController(api, scene, universeRenderer);
+const lod = new LodController(api, scene, universeRenderer);
+const ambient = new AmbientController(scene, universeRenderer, captionHost);
+const activity = new ActivityLens(api, universeRenderer, (text) => ambient.setCaption(text));
+function firstVisibleRepo() { return [...state.visibleRepos][0] ?? "sdl-mcp"; }
+const resultsHost = document.getElementById("viewerResults");
+attachSearch(chrome.searchInput, resultsHost, api, firstVisibleRepo, async (result) => {
+    const repoId = firstVisibleRepo();
+    const cluster = result.clusterId
+        ? universeRenderer.getClusters().find((item) => item.repoId === repoId && item.clusterId === result.clusterId)
+        : undefined;
+    if (cluster)
+        scene.flyTo(cluster.position);
+    const card = await api.card(repoId, result.symbolId);
+    setSelection({ repoId, clusterId: result.clusterId ?? undefined, symbolId: result.symbolId, card });
+});
+chrome.ambientButton.addEventListener("click", () => setAmbient(!state.ambient));
+chrome.fpsSelect.addEventListener("change", () => scene.setFpsCap(Number(chrome.fpsSelect.value)));
+chrome.skinSelect.addEventListener("change", async () => {
+    if (chrome.skinSelect.value === "default")
+        return;
+    const bytes = await api.skinBytes(chrome.skinSelect.value);
+    const caps = state.settings?.skins ?? { maxZipBytes: 52_428_800, maxEntries: 500, maxDecompressedBytes: 209_715_200 };
+    const skin = loadSkinZip(new Uint8Array(bytes), caps);
+    applySkinCssVars(canvasHost, skin.manifest);
+});
+let lastLens = state.activeLens;
+subscribe((snapshot) => {
+    chrome.lensSelect.value = snapshot.activeLens;
+    if (snapshot.settings)
+        scene.setFpsCap(snapshot.ambient ? snapshot.settings.ambient.fps : Number(chrome.fpsSelect.value));
+    if (snapshot.activeLens !== lastLens) {
+        lastLens = snapshot.activeLens;
+        universeRenderer.applyLens(snapshot.activeLens);
+        lod.applyLens();
+    }
+});
+async function boot() {
+    const universe = await api.universe();
+    setSettings(universe.settings);
+    chrome.setSettings(universe.settings);
+    chrome.setRepos(universe.repos);
+    loadVisibleRepos(universe.repos.map((repo) => repo.repoId));
+    const skins = await api.skins().catch(() => ({ skins: [] }));
+    chrome.setSkins(skins.skins);
+    const rendered = [];
+    for (const repo of universe.repos.filter((item) => state.visibleRepos.has(item.repoId))) {
+        try {
+            const [clustersResponse, layout, edgeResponse] = await Promise.all([api.clusters(repo.repoId), api.layout(repo.repoId, "cluster"), api.clusterEdges(repo.repoId)]);
+            const clusters = clustersResponse.clusters ?? [];
+            universeRenderer.renderRepo(repo, clusters, layout);
+            universeRenderer.renderClusterEdges(repo.repoId, edgeResponse.edges ?? []);
+            rendered.push(repo);
+        }
+        catch (error) {
+            console.warn(`[viewer] skipping repo ${repo.repoId}`, error);
+        }
+    }
+    const home = rendered.reduce((best, repo) => (!best || repo.symbolCount > best.symbolCount ? repo : best), undefined);
+    if (home)
+        scene.flyTo(new THREE.Vector3(home.galaxy.position[0], home.galaxy.position[1], home.galaxy.position[2]), Math.max(420, home.galaxy.radius * 1.6));
+    else
+        scene.flyTo(new THREE.Vector3(0, 0, 0));
+    scene.onFrame(() => { void lod.maybeExpandNearest(); });
+    activity.start();
+    chrome.setStatus("live");
+}
+boot().catch((error) => { console.error("[viewer] boot failed", error); chrome.setStatus("error"); });

package/dist/ui/viewer/picking.js

@@ -0,0 +1,45 @@
+import * as THREE from "three";
+import { setHovered, setSelection } from "./state.js";
+export class PickingController {
+    viewer;
+    universe;
+    raycaster = new THREE.Raycaster();
+    pointer = new THREE.Vector2();
+    constructor(_api, viewer, universe) {
+        this.viewer = viewer;
+        this.universe = universe;
+        viewer.renderer.domElement.addEventListener("pointermove", this.onMove);
+        viewer.renderer.domElement.addEventListener("click", this.onClick);
+    }
+    pick(event) {
+        const rect = this.viewer.renderer.domElement.getBoundingClientRect();
+        this.pointer.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
+        this.pointer.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;
+        this.raycaster.setFromCamera(this.pointer, this.viewer.camera);
+        return this.raycaster.intersectObjects(this.viewer.root.children, true)[0] ?? null;
+    }
+    onMove = (event) => {
+        const hit = this.pick(event);
+        setHovered(hit?.object.name ?? null);
+    };
+    onClick = async (event) => {
+        const hit = this.pick(event);
+        if (!hit) {
+            setSelection(null);
+            return;
+        }
+        if (hit.object.name.startsWith("clusters:")) {
+            const repoId = hit.object.name.slice("clusters:".length);
+            const instanceId = hit.instanceId ?? 0;
+            const cluster = this.universe.getClusters().filter((item) => item.repoId === repoId)[instanceId];
+            if (cluster) {
+                this.viewer.flyTo(cluster.position);
+                setSelection({ repoId, clusterId: cluster.clusterId });
+            }
+        }
+    };
+    dispose() {
+        this.viewer.renderer.domElement.removeEventListener("pointermove", this.onMove);
+        this.viewer.renderer.domElement.removeEventListener("click", this.onClick);
+    }
+}