chat-glass 1.0.0

package/src/server/index.js

@@ -0,0 +1,132 @@
+import { createServer } from "node:http";
+import { WebSocketServer } from "ws";
+import { findFreePort } from "../utils/port.js";
+import { ensureDirs, writeConfig, readConfig } from "../utils/config.js";
+import { configPath } from "../utils/paths.js";
+import { createRouter } from "./routes.js";
+import { createWatcher } from "./watcher.js";
+import { unlink } from "node:fs/promises";
+
+const IDLE_TIMEOUT_MS = 30 * 60 * 1000; // 30 minutes
+const IDLE_CHECK_INTERVAL_MS = 60 * 1000; // 60 seconds
+
+export async function startServer(projectDir) {
+  await ensureDirs(projectDir);
+
+  const port = await findFreePort();
+  const startedAt = Date.now();
+  let lastActivity = Date.now();
+
+  function touchActivity() {
+    lastActivity = Date.now();
+  }
+
+  // -- WebSocket clients --
+  const clients = new Set();
+
+  function broadcast(message) {
+    for (const ws of clients) {
+      if (ws.readyState === ws.OPEN) {
+        ws.send(message);
+      }
+    }
+  }
+
+  // -- Render-complete signal --
+  let renderCompleteResolve = null;
+
+  function waitForRenderComplete(timeoutMs = 5000) {
+    return new Promise((resolve) => {
+      const timer = setTimeout(() => {
+        renderCompleteResolve = null;
+        resolve();
+      }, timeoutMs);
+      renderCompleteResolve = () => {
+        clearTimeout(timer);
+        renderCompleteResolve = null;
+        resolve();
+      };
+    });
+  }
+
+  // -- HTTP server --
+  const router = createRouter(projectDir, {
+    broadcast,
+    touchActivity,
+    serverInfo: () => ({ port, startedAt }),
+  });
+
+  const httpServer = createServer(router);
+
+  // -- WebSocket server --
+  const wss = new WebSocketServer({ server: httpServer, path: "/ws" });
+
+  wss.on("connection", (ws) => {
+    clients.add(ws);
+    touchActivity();
+    ws.on("message", (data) => {
+      try {
+        const msg = JSON.parse(data.toString());
+        if (msg.type === "render-complete" && renderCompleteResolve) {
+          renderCompleteResolve();
+        }
+      } catch {
+        // ignore malformed messages
+      }
+    });
+    ws.on("close", () => clients.delete(ws));
+    ws.on("error", () => clients.delete(ws));
+  });
+
+  // -- File watcher --
+  const watcher = createWatcher(projectDir, () => {
+    touchActivity();
+    broadcast(JSON.stringify({ type: "reload" }));
+  });
+
+  // -- Auto-shutdown --
+  const idleTimer = setInterval(async () => {
+    if (Date.now() - lastActivity > IDLE_TIMEOUT_MS) {
+      await close();
+    }
+  }, IDLE_CHECK_INTERVAL_MS);
+  idleTimer.unref();
+
+  // -- Write config --
+  await writeConfig(projectDir, {
+    port,
+    pid: process.pid,
+    lastActivity: new Date(lastActivity).toISOString(),
+    createdAt: new Date(startedAt).toISOString(),
+  });
+
+  // -- Start listening --
+  await new Promise((resolve, reject) => {
+    httpServer.listen(port, "127.0.0.1", resolve);
+    httpServer.on("error", reject);
+  });
+
+  // -- Clean shutdown --
+  async function close() {
+    clearInterval(idleTimer);
+    watcher.close();
+
+    for (const ws of clients) {
+      ws.close();
+    }
+    clients.clear();
+
+    wss.close();
+
+    await new Promise((resolve) => httpServer.close(resolve));
+
+    // Remove config file best-effort
+    try {
+      await unlink(configPath(projectDir));
+    } catch {
+      // ignore
+    }
+  }
+
+  return { port, close, waitForRenderComplete };
+}

package/src/server/routes.js

@@ -0,0 +1,147 @@
+import { readdir, readFile } from "node:fs/promises";
+import { join, extname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { dirname } from "node:path";
+import { pagesDir } from "../utils/paths.js";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const uiDir = join(__dirname, "..", "ui");
+
+function sendJSON(res, statusCode, data) {
+  const body = JSON.stringify(data);
+  res.writeHead(statusCode, {
+    "Content-Type": "application/json",
+    "Content-Length": Buffer.byteLength(body),
+  });
+  res.end(body);
+}
+
+function sendHTML(res, statusCode, html) {
+  res.writeHead(statusCode, {
+    "Content-Type": "text/html; charset=utf-8",
+    "Content-Length": Buffer.byteLength(html),
+  });
+  res.end(html);
+}
+
+function send404(res) {
+  sendHTML(res, 404, "<h1>404 Not Found</h1>");
+}
+
+async function serveUIFile(res, filename) {
+  try {
+    const html = await readFile(join(uiDir, filename), "utf8");
+    sendHTML(res, 200, html);
+  } catch {
+    sendHTML(res, 200, `<html><body><h1>chat-glass</h1><p>UI not built yet.</p></body></html>`);
+  }
+}
+
+function extractTitle(html) {
+  const match = html.match(/<title>(.*?)<\/title>/i);
+  return match ? match[1] : null;
+}
+
+function extractTimestamp(filename) {
+  const match = filename.match(/^(\d{4}-\d{2}-\d{2}T[\d-]+)/);
+  if (match) return match[1];
+  const dateMatch = filename.match(/^(\d{4}-\d{2}-\d{2})/);
+  return dateMatch ? dateMatch[1] : null;
+}
+
+export function createRouter(projectDir, { broadcast, touchActivity, serverInfo }) {
+  const pages = pagesDir(projectDir);
+
+  return async function handleRequest(req, res) {
+    const url = new URL(req.url, `http://${req.headers.host}`);
+    const path = url.pathname;
+
+    if (req.method !== "GET") {
+      res.writeHead(405, { "Content-Type": "text/plain" });
+      res.end("Method Not Allowed");
+      return;
+    }
+
+    // GET /
+    if (path === "/") {
+      await serveUIFile(res, "main.html");
+      return;
+    }
+
+    // GET /gallery
+    if (path === "/gallery") {
+      await serveUIFile(res, "gallery.html");
+      return;
+    }
+
+    // GET /reload
+    if (path === "/reload") {
+      touchActivity();
+      broadcast(JSON.stringify({ type: "reload" }));
+      sendJSON(res, 200, { ok: true });
+      return;
+    }
+
+    // GET /health
+    if (path === "/health") {
+      const info = serverInfo();
+      sendJSON(res, 200, {
+        port: info.port,
+        pid: process.pid,
+        uptime: Math.floor((Date.now() - info.startedAt) / 1000),
+      });
+      return;
+    }
+
+    // GET /api/pages
+    if (path === "/api/pages") {
+      try {
+        const files = await readdir(pages);
+        const htmlFiles = files.filter(
+          (f) => extname(f) === ".html" && f !== "latest.html"
+        );
+
+        const results = await Promise.all(
+          htmlFiles.map(async (filename) => {
+            let title = null;
+            try {
+              const content = await readFile(join(pages, filename), "utf8");
+              title = extractTitle(content);
+            } catch {
+              // ignore unreadable files
+            }
+            const timestamp = extractTimestamp(filename);
+            return { filename, title, timestamp };
+          })
+        );
+
+        // Sort by filename descending (newest first, assuming timestamp-based names)
+        results.sort((a, b) => b.filename.localeCompare(a.filename));
+        sendJSON(res, 200, results);
+      } catch {
+        sendJSON(res, 200, []);
+      }
+      return;
+    }
+
+    // GET /pages/:filename
+    if (path.startsWith("/pages/")) {
+      const filename = path.slice("/pages/".length);
+      // Prevent path traversal
+      if (filename.includes("..") || filename.includes("/")) {
+        send404(res);
+        return;
+      }
+      try {
+        const html = await readFile(join(pages, filename), "utf8");
+        sendHTML(res, 200, html);
+      } catch {
+        send404(res);
+      }
+      return;
+    }
+
+    send404(res);
+  };
+}

package/src/server/start.js

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+
+// Standalone entry point for running the server as a detached background process.
+// Invoked by the show command via child_process.spawn.
+
+import { startServer } from "./index.js";
+
+const projectDir = process.argv[2] || process.cwd();
+
+try {
+  const { port } = await startServer(projectDir);
+  // Write port to stdout so the parent process can read it
+  process.stdout.write(String(port));
+} catch (err) {
+  process.stderr.write(err.message);
+  process.exit(1);
+}

package/src/server/watcher.js

@@ -0,0 +1,51 @@
+import { watch } from "node:fs";
+import { pagesDir } from "../utils/paths.js";
+
+export function createWatcher(projectDir, onChange) {
+  const dir = pagesDir(projectDir);
+  let debounceTimer = null;
+  let watcher = null;
+
+  function start() {
+    try {
+      watcher = watch(dir, { persistent: false }, (_event, filename) => {
+        // Only react to HTML file changes — ignore screenshots, temp files, etc.
+        if (filename && !filename.endsWith(".html")) return;
+        if (debounceTimer) clearTimeout(debounceTimer);
+        debounceTimer = setTimeout(() => {
+          debounceTimer = null;
+          onChange();
+        }, 100);
+      });
+
+      watcher.on("error", (err) => {
+        // Directory may be deleted and recreated — restart watcher
+        close();
+        setTimeout(() => {
+          try {
+            start();
+          } catch {
+            // directory doesn't exist yet, will retry on next change
+          }
+        }, 1000);
+      });
+    } catch {
+      // directory doesn't exist yet — that's fine
+    }
+  }
+
+  function close() {
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+      debounceTimer = null;
+    }
+    if (watcher) {
+      watcher.close();
+      watcher = null;
+    }
+  }
+
+  start();
+
+  return { close };
+}

package/src/ui/gallery.html

@@ -0,0 +1,274 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>chat-glass - gallery</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    html, body {
+      min-height: 100%;
+      background: #1a1a2e;
+      color: #e0e0e0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
+
+    /* Header */
+    #header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 24px;
+      background: #0f0f23;
+      border-bottom: 1px solid #2a2a4a;
+      position: sticky;
+      top: 0;
+      z-index: 10;
+    }
+
+    #header .brand {
+      font-size: 14px;
+      font-weight: 700;
+      color: #00d4ff;
+      letter-spacing: 0.5px;
+      text-decoration: none;
+    }
+
+    #header .brand:hover {
+      color: #33dfff;
+    }
+
+    #header .separator {
+      width: 1px;
+      height: 16px;
+      background: #2a2a4a;
+    }
+
+    #header .view-title {
+      font-size: 14px;
+      color: #888;
+    }
+
+    #header .count {
+      font-size: 12px;
+      color: #555;
+      margin-left: auto;
+    }
+
+    #ws-indicator {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #00d4ff;
+      flex-shrink: 0;
+      transition: background 0.3s;
+    }
+
+    #ws-indicator.disconnected {
+      background: #ff4444;
+    }
+
+    /* Grid */
+    #grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 16px;
+      padding: 24px;
+    }
+
+    .card {
+      background: #16213e;
+      border: 1px solid #2a2a4a;
+      border-radius: 8px;
+      padding: 20px;
+      cursor: pointer;
+      transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
+      text-decoration: none;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .card:hover {
+      border-color: #00d4ff;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 212, 255, 0.1);
+    }
+
+    .card .card-title {
+      font-size: 14px;
+      color: #e0e0e0;
+      line-height: 1.4;
+      word-break: break-word;
+    }
+
+    .card:hover .card-title {
+      color: #00d4ff;
+    }
+
+    .card .card-time {
+      font-size: 11px;
+      color: #666;
+    }
+
+    .card .card-filename {
+      font-size: 10px;
+      color: #444;
+      font-family: 'SF Mono', 'Fira Code', monospace;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    /* Empty state */
+    #empty-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 80px 24px;
+      gap: 16px;
+      color: #888;
+    }
+
+    #empty-state .icon {
+      font-size: 48px;
+      opacity: 0.3;
+    }
+
+    #empty-state .message {
+      font-size: 16px;
+    }
+
+    #empty-state .hint {
+      font-size: 12px;
+      color: #555;
+    }
+
+    .hidden { display: none !important; }
+  </style>
+</head>
+<body>
+  <div id="header">
+    <a class="brand" href="/">chat-glass</a>
+    <span class="separator"></span>
+    <span class="view-title">Gallery</span>
+    <span class="count" id="page-count"></span>
+    <div id="ws-indicator" title="WebSocket connected"></div>
+  </div>
+
+  <div id="grid"></div>
+
+  <div id="empty-state" class="hidden">
+    <div class="icon">&#9672;</div>
+    <div class="message">Waiting for Claude to create a visualization...</div>
+    <div class="hint">Use chat-glass show &lt;file.html&gt; to display content</div>
+  </div>
+
+  <script>
+    const grid = document.getElementById('grid');
+    const emptyState = document.getElementById('empty-state');
+    const pageCount = document.getElementById('page-count');
+    const wsIndicator = document.getElementById('ws-indicator');
+
+    function formatTimestamp(ts) {
+      if (!ts) return '';
+      const cleaned = ts.replace(/T/, ' ').replace(/-(\d{2})-(\d{2})-(\d+)$/, ':$1:$2');
+      return cleaned;
+    }
+
+    function renderGrid(pages) {
+      if (pages.length === 0) {
+        grid.innerHTML = '';
+        emptyState.classList.remove('hidden');
+        pageCount.textContent = '';
+        return;
+      }
+
+      emptyState.classList.add('hidden');
+      pageCount.textContent = pages.length + ' visualization' + (pages.length !== 1 ? 's' : '');
+
+      grid.innerHTML = pages.map(page => {
+        const title = page.title || page.filename;
+        const time = formatTimestamp(page.timestamp);
+        const href = '/?page=' + encodeURIComponent(page.filename);
+        return `<a class="card" href="${href}">
+          <div class="card-title">${escapeHtml(title)}</div>
+          <div class="card-time">${escapeHtml(time)}</div>
+          <div class="card-filename">${escapeHtml(page.filename)}</div>
+        </a>`;
+      }).join('');
+    }
+
+    function escapeHtml(str) {
+      const div = document.createElement('div');
+      div.textContent = str;
+      return div.innerHTML;
+    }
+
+    async function loadPages() {
+      try {
+        const res = await fetch('/api/pages');
+        if (!res.ok) throw new Error('Failed to fetch');
+        const pages = await res.json();
+        renderGrid(pages);
+      } catch {
+        renderGrid([]);
+      }
+    }
+
+    // -- Keyboard shortcut --
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'g' || e.key === 'G') {
+        window.location.href = '/';
+      }
+      if (e.key === 'Escape') {
+        window.location.href = '/';
+      }
+    });
+
+    // -- WebSocket with auto-reconnect --
+    let ws = null;
+    let wsReconnectDelay = 500;
+    const WS_MAX_DELAY = 10000;
+
+    function connectWebSocket() {
+      const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+      ws = new WebSocket(`${protocol}//${location.host}/ws`);
+
+      ws.onopen = () => {
+        wsReconnectDelay = 500;
+        wsIndicator.classList.remove('disconnected');
+        wsIndicator.title = 'WebSocket connected';
+      };
+
+      ws.onmessage = (e) => {
+        try {
+          const msg = JSON.parse(e.data);
+          if (msg.type === 'reload') loadPages();
+        } catch {}
+      };
+
+      ws.onclose = () => {
+        wsIndicator.classList.add('disconnected');
+        wsIndicator.title = 'WebSocket disconnected - reconnecting...';
+        scheduleReconnect();
+      };
+
+      ws.onerror = () => {};
+    }
+
+    function scheduleReconnect() {
+      setTimeout(() => {
+        connectWebSocket();
+        wsReconnectDelay = Math.min(wsReconnectDelay * 2, WS_MAX_DELAY);
+      }, wsReconnectDelay);
+    }
+
+    // -- Boot --
+    connectWebSocket();
+    loadPages();
+  </script>
+</body>
+</html>