lens-inspector 0.1.0

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "lens-inspector",
+  "version": "0.1.0",
+  "description": "Browser-based scene graph inspector for Lens Studio. See every object in your scene, live.",
+  "type": "module",
+  "bin": {
+    "lens-inspector": "server.js"
+  },
+  "files": [
+    "server.js",
+    "index.html",
+    "SceneInspector.ts",
+    "example.js",
+    "README.md"
+  ],
+  "dependencies": {
+    "ws": "^8.16.0"
+  },
+  "keywords": [
+    "lens-studio",
+    "snap",
+    "spectacles",
+    "scene-graph",
+    "inspector",
+    "devtools",
+    "ar"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/a-sumo/lens-inspector.git"
+  },
+  "devDependencies": {}
+}

package/server.js

@@ -0,0 +1,148 @@
+#!/usr/bin/env node
+/**
+ * Lens Studio Scene Inspector - Dev Server
+ *
+ * Tiny server that bridges Lens Studio and the browser viewer.
+ * LS connects via WebSocket and pushes the live scene graph.
+ * Browser connects via WebSocket and receives it.
+ * Also proxies LS MCP calls (design-time scene graph) to avoid CORS.
+ *
+ * Usage:
+ *   node server.js                          # default port 8200
+ *   node server.js --port 9000              # custom port
+ *   node server.js --mcp http://host:8733   # custom MCP URL
+ */
+
+import { createServer } from "http";
+import { WebSocketServer, WebSocket } from "ws";
+import { readFileSync } from "fs";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+import { exec } from "child_process";
+import { platform } from "os";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const args = process.argv.slice(2);
+
+function arg(flag, fallback) {
+  const i = args.indexOf(flag);
+  return i >= 0 && args[i + 1] ? args[i + 1] : fallback;
+}
+
+const PORT = parseInt(arg("--port", "8200"), 10);
+const MCP_URL = arg("--mcp", "http://localhost:8733/mcp");
+const NO_OPEN = args.includes("--no-open");
+
+// Connected clients
+const browsers = new Set();
+const lsClients = new Set();
+
+// Latest scene snapshot (so new browser tabs get it immediately)
+let lastScene = null;
+
+// --- HTTP server ---
+const html = readFileSync(join(__dirname, "index.html"));
+
+const http = createServer(async (req, res) => {
+  res.setHeader("Access-Control-Allow-Origin", "*");
+  res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
+  res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
+
+  if (req.method === "OPTIONS") { res.writeHead(204); res.end(); return; }
+
+  // Serve viewer
+  if (req.method === "GET" && (req.url === "/" || req.url === "/index.html")) {
+    res.writeHead(200, { "Content-Type": "text/html" });
+    res.end(html);
+    return;
+  }
+
+  // MCP proxy (avoids CORS when browser fetches design-time scene)
+  if (req.method === "POST" && req.url.startsWith("/mcp")) {
+    let body = "";
+    req.on("data", c => body += c);
+    req.on("end", async () => {
+      try {
+        const url = new URL(req.url, `http://localhost:${PORT}`);
+        const mcpUrl = url.searchParams.get("url") || MCP_URL;
+        const token = url.searchParams.get("token") || "";
+        const headers = { "Content-Type": "application/json" };
+        if (token) headers["Authorization"] = "Bearer " + token;
+
+        const resp = await fetch(mcpUrl, { method: "POST", headers, body });
+        const result = await resp.text();
+        res.writeHead(resp.status, { "Content-Type": "application/json" });
+        res.end(result);
+      } catch (e) {
+        res.writeHead(502, { "Content-Type": "application/json" });
+        res.end(JSON.stringify({ error: e.message }));
+      }
+    });
+    return;
+  }
+
+  // Health
+  if (req.method === "GET" && req.url === "/health") {
+    res.writeHead(200, { "Content-Type": "application/json" });
+    res.end(JSON.stringify({ ls: lsClients.size, browsers: browsers.size, hasScene: !!lastScene }));
+    return;
+  }
+
+  res.writeHead(404); res.end("Not found");
+});
+
+// --- WebSocket ---
+const wss = new WebSocketServer({ server: http });
+
+wss.on("connection", (ws, req) => {
+  const url = new URL(req.url || "/", `http://localhost:${PORT}`);
+  const role = url.searchParams.get("role");
+
+  if (role === "ls") {
+    // Lens Studio inspector component
+    lsClients.add(ws);
+    console.log(`[inspector] LS connected (${lsClients.size} total)`);
+
+    ws.on("message", (raw) => {
+      const str = raw.toString();
+      lastScene = str;
+      // Broadcast to all browsers
+      for (const b of browsers) {
+        if (b.readyState === WebSocket.OPEN) b.send(str);
+      }
+    });
+
+    ws.on("close", () => {
+      lsClients.delete(ws);
+      console.log(`[inspector] LS disconnected (${lsClients.size} total)`);
+    });
+  } else {
+    // Browser viewer
+    browsers.add(ws);
+    console.log(`[inspector] Browser connected (${browsers.size} total)`);
+
+    // Send last known scene immediately
+    if (lastScene && ws.readyState === WebSocket.OPEN) {
+      ws.send(lastScene);
+    }
+
+    ws.on("close", () => {
+      browsers.delete(ws);
+      console.log(`[inspector] Browser disconnected (${browsers.size} total)`);
+    });
+  }
+
+  ws.on("error", (e) => console.error("[inspector] WS error:", e.message));
+});
+
+http.listen(PORT, () => {
+  const url = `http://localhost:${PORT}`;
+  console.log(`\n  Lens Studio Scene Inspector running at ${url}`);
+  console.log(`  Waiting for Lens Studio to connect...\n`);
+
+  // Auto-open browser
+  if (!NO_OPEN) {
+    const cmd = platform() === "darwin" ? "open" : platform() === "win32" ? "start" : "xdg-open";
+    exec(`${cmd} ${url}`);
+  }
+});