npm - chat-glass - Versions diffs - 1.0.0 - Mend

chat-glass 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/LICENSE +21 -0
package/README.md +71 -0
package/agent/chat-glass.md +109 -0
package/bin/cli.js +51 -0
package/package.json +48 -0
package/src/commands/clean.js +33 -0
package/src/commands/install-agent.js +64 -0
package/src/commands/list.js +42 -0
package/src/commands/show.js +215 -0
package/src/index.js +4 -0
package/src/server/index.js +132 -0
package/src/server/routes.js +147 -0
package/src/server/start.js +17 -0
package/src/server/watcher.js +51 -0
package/src/ui/gallery.html +274 -0
package/src/ui/main.html +500 -0
package/src/utils/config.js +31 -0
package/src/utils/find-chrome.js +27 -0
package/src/utils/paths.js +17 -0
package/src/utils/port.js +24 -0
package/src/utils/screenshot.js +70 -0

package/src/ui/main.html ADDED Viewed

@@ -0,0 +1,500 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>chat-glass</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body {
+      height: 100%;
+      overflow: hidden;
+      background: #1a1a2e;
+      color: #e0e0e0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
+    #app {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+    }
+    /* Title bar */
+    #title-bar {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px 16px;
+      background: #0f0f23;
+      border-bottom: 1px solid #2a2a4a;
+      flex-shrink: 0;
+      min-height: 40px;
+    }
+    #title-bar .brand {
+      font-size: 13px;
+      font-weight: 700;
+      color: #00d4ff;
+      letter-spacing: 0.5px;
+      white-space: nowrap;
+    }
+    #title-bar .separator {
+      width: 1px;
+      height: 16px;
+      background: #2a2a4a;
+      flex-shrink: 0;
+    }
+    #title-bar .page-title {
+      font-size: 13px;
+      color: #e0e0e0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
+      min-width: 0;
+    }
+    #title-bar .timestamp {
+      font-size: 11px;
+      color: #888;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+    #ws-indicator {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #00d4ff;
+      flex-shrink: 0;
+      transition: background 0.3s;
+    }
+    #ws-indicator.disconnected {
+      background: #ff4444;
+    }
+    /* Content area */
+    #content {
+      flex: 1;
+      position: relative;
+      min-height: 0;
+    }
+    #viewer {
+      width: 100%;
+      height: 100%;
+      border: none;
+      display: block;
+      background: #1a1a2e;
+    }
+    /* Empty state */
+    #empty-state {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      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;
+    }
+    /* Error state */
+    #error-state {
+      position: absolute;
+      inset: 0;
+      display: none;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      color: #ff6b6b;
+    }
+    #error-state .message {
+      font-size: 14px;
+    }
+    /* Gallery strip */
+    #gallery-strip {
+      display: flex;
+      align-items: stretch;
+      gap: 0;
+      background: #16213e;
+      border-top: 1px solid #2a2a4a;
+      flex-shrink: 0;
+      overflow-x: auto;
+      overflow-y: hidden;
+      scrollbar-width: thin;
+      scrollbar-color: #2a2a4a #16213e;
+    }
+    #gallery-strip::-webkit-scrollbar {
+      height: 4px;
+    }
+    #gallery-strip::-webkit-scrollbar-track {
+      background: #16213e;
+    }
+    #gallery-strip::-webkit-scrollbar-thumb {
+      background: #2a2a4a;
+      border-radius: 2px;
+    }
+    .gallery-item {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 8px 16px;
+      min-width: 160px;
+      max-width: 240px;
+      cursor: pointer;
+      border-top: 2px solid transparent;
+      transition: background 0.15s, border-color 0.15s;
+      flex-shrink: 0;
+      user-select: none;
+    }
+    .gallery-item:hover {
+      background: #1a2744;
+    }
+    .gallery-item.active {
+      border-top-color: #00d4ff;
+      background: #1a2744;
+    }
+    .gallery-item .item-title {
+      font-size: 12px;
+      color: #e0e0e0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      line-height: 1.4;
+    }
+    .gallery-item.active .item-title {
+      color: #00d4ff;
+    }
+    .gallery-item .item-time {
+      font-size: 10px;
+      color: #666;
+      line-height: 1.4;
+    }
+    /* Hidden utility */
+    .hidden { display: none !important; }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <div id="title-bar">
+      <span class="brand">chat-glass</span>
+      <span class="separator"></span>
+      <span class="page-title" id="current-title">Loading...</span>
+      <span class="timestamp" id="current-timestamp"></span>
+      <div id="ws-indicator" title="WebSocket connected"></div>
+    </div>
+    <div id="content">
+      <iframe id="viewer" class="hidden" sandbox="allow-scripts allow-same-origin"></iframe>
+      <div id="empty-state">
+        <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>
+      <div id="error-state">
+        <div class="message" id="error-message">Failed to load visualization</div>
+      </div>
+    </div>
+    <div id="gallery-strip"></div>
+  </div>
+  <script>
+    const viewer = document.getElementById('viewer');
+    const emptyState = document.getElementById('empty-state');
+    const errorState = document.getElementById('error-state');
+    const errorMessage = document.getElementById('error-message');
+    const titleEl = document.getElementById('current-title');
+    const timestampEl = document.getElementById('current-timestamp');
+    const galleryStrip = document.getElementById('gallery-strip');
+    const wsIndicator = document.getElementById('ws-indicator');
+    let pages = [];
+    let currentIndex = -1;
+    // -- Page loading --
+    function formatTimestamp(ts) {
+      if (!ts) return '';
+      // ts is like "2026-02-18T14-30-00-123" — parse into readable form
+      const cleaned = ts.replace(/T/, ' ').replace(/-(\d{2})-(\d{2})-(\d+)$/, ':$1:$2');
+      return cleaned;
+    }
+    function loadPage(index) {
+      if (pages.length === 0) {
+        showEmpty();
+        return;
+      }
+      if (index < 0 || index >= pages.length) return;
+      currentIndex = index;
+      const page = pages[index];
+      // Update title bar
+      titleEl.textContent = page.title || page.filename;
+      timestampEl.textContent = formatTimestamp(page.timestamp);
+      // Update iframe
+      emptyState.classList.add('hidden');
+      errorState.style.display = 'none';
+      viewer.classList.remove('hidden');
+      viewer.src = '/pages/' + encodeURIComponent(page.filename);
+      // Update gallery strip highlights
+      updateGalleryHighlight();
+      // Scroll active item into view
+      const activeItem = galleryStrip.querySelector('.gallery-item.active');
+      if (activeItem) {
+        activeItem.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+      }
+      // Update URL without reload
+      const url = new URL(window.location);
+      url.searchParams.set('page', page.filename);
+      history.replaceState(null, '', url);
+    }
+    function showEmpty() {
+      currentIndex = -1;
+      viewer.classList.add('hidden');
+      errorState.style.display = 'none';
+      emptyState.classList.remove('hidden');
+      titleEl.textContent = 'No visualizations';
+      timestampEl.textContent = '';
+      galleryStrip.innerHTML = '';
+    }
+    function showError(msg) {
+      viewer.classList.add('hidden');
+      emptyState.classList.add('hidden');
+      errorState.style.display = 'flex';
+      errorMessage.textContent = msg;
+    }
+    // -- Gallery strip --
+    function renderGalleryStrip() {
+      galleryStrip.innerHTML = '';
+      // Pages are sorted newest-first from API, but strip shows most recent on the right
+      // So we reverse for display
+      const displayOrder = [...pages].reverse();
+      displayOrder.forEach((page, displayIdx) => {
+        const realIndex = pages.length - 1 - displayIdx;
+        const item = document.createElement('div');
+        item.className = 'gallery-item';
+        item.dataset.index = realIndex;
+        if (realIndex === currentIndex) item.classList.add('active');
+        const titleSpan = document.createElement('div');
+        titleSpan.className = 'item-title';
+        titleSpan.textContent = page.title || page.filename;
+        const timeSpan = document.createElement('div');
+        timeSpan.className = 'item-time';
+        timeSpan.textContent = formatTimestamp(page.timestamp);
+        item.appendChild(titleSpan);
+        item.appendChild(timeSpan);
+        item.addEventListener('click', () => loadPage(realIndex));
+        galleryStrip.appendChild(item);
+      });
+    }
+    function updateGalleryHighlight() {
+      galleryStrip.querySelectorAll('.gallery-item').forEach(item => {
+        const idx = parseInt(item.dataset.index, 10);
+        item.classList.toggle('active', idx === currentIndex);
+      });
+    }
+    // -- Data fetching --
+    async function fetchPages() {
+      try {
+        const res = await fetch('/api/pages');
+        if (!res.ok) throw new Error('Failed to fetch pages');
+        pages = await res.json();
+      } catch {
+        pages = [];
+      }
+    }
+    async function init() {
+      await fetchPages();
+      if (pages.length === 0) {
+        showEmpty();
+        return;
+      }
+      renderGalleryStrip();
+      // Check for ?page= query param
+      const params = new URLSearchParams(window.location.search);
+      const requestedPage = params.get('page');
+      if (requestedPage) {
+        const idx = pages.findIndex(p => p.filename === requestedPage);
+        if (idx !== -1) {
+          loadPage(idx);
+          return;
+        }
+      }
+      // Default: load the latest (index 0 since sorted newest-first)
+      loadPage(0);
+    }
+    async function onReload() {
+      const previousFilename = currentIndex >= 0 ? pages[currentIndex]?.filename : null;
+      await fetchPages();
+      if (pages.length === 0) {
+        showEmpty();
+        return;
+      }
+      renderGalleryStrip();
+      // Load the newest page (a reload means new content arrived)
+      loadPage(0);
+    }
+    // -- Keyboard navigation --
+    document.addEventListener('keydown', (e) => {
+      // Don't capture if user is typing in an input
+      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+      switch (e.key) {
+        case 'ArrowLeft':
+          e.preventDefault();
+          if (currentIndex < pages.length - 1) loadPage(currentIndex + 1);
+          break;
+        case 'ArrowRight':
+          e.preventDefault();
+          if (currentIndex > 0) loadPage(currentIndex - 1);
+          break;
+        case 'Home':
+          e.preventDefault();
+          if (pages.length > 0) loadPage(pages.length - 1);
+          break;
+        case 'End':
+          e.preventDefault();
+          if (pages.length > 0) loadPage(0);
+          break;
+        case 'g':
+        case 'G':
+          window.location.href = '/gallery';
+          break;
+      }
+    });
+    // -- Iframe load / error handling --
+    viewer.addEventListener('load', () => {
+      // Ignore the initial about:blank load — only signal for real pages
+      if (!viewer.src || viewer.src === 'about:blank') return;
+      // Wait a short tick for async renderers (Mermaid, D3, Chart.js) to finish
+      setTimeout(() => {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+          ws.send(JSON.stringify({ type: 'render-complete' }));
+        }
+      }, 500);
+    });
+    viewer.addEventListener('error', () => {
+      showError('Failed to load visualization');
+    });
+    // -- 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') {
+            onReload();
+          }
+        } catch {
+          // ignore malformed messages
+        }
+      };
+      ws.onclose = () => {
+        wsIndicator.classList.add('disconnected');
+        wsIndicator.title = 'WebSocket disconnected - reconnecting...';
+        scheduleReconnect();
+      };
+      ws.onerror = () => {
+        // onclose will fire after this
+      };
+    }
+    function scheduleReconnect() {
+      setTimeout(() => {
+        connectWebSocket();
+        wsReconnectDelay = Math.min(wsReconnectDelay * 2, WS_MAX_DELAY);
+      }, wsReconnectDelay);
+    }
+    // -- Boot --
+    connectWebSocket();
+    init();
+  </script>
+</body>
+</html>

package/src/utils/config.js ADDED Viewed

@@ -0,0 +1,31 @@
+import { readFile, writeFile, mkdir, rename } from "node:fs/promises";
+import { dirname } from "node:path";
+import { configPath, pagesDir } from "./paths.js";
+const DEFAULTS = {
+  port: null,
+  pid: null,
+  lastActivity: null,
+  createdAt: null,
+};
+export async function readConfig(projectDir) {
+  try {
+    const raw = await readFile(configPath(projectDir), "utf8");
+    return { ...DEFAULTS, ...JSON.parse(raw) };
+  } catch {
+    return { ...DEFAULTS };
+  }
+}
+export async function writeConfig(projectDir, config) {
+  const filePath = configPath(projectDir);
+  await mkdir(dirname(filePath), { recursive: true });
+  const tmp = filePath + ".tmp";
+  await writeFile(tmp, JSON.stringify(config, null, 2) + "\n", "utf8");
+  await rename(tmp, filePath);
+}
+export async function ensureDirs(projectDir) {
+  await mkdir(pagesDir(projectDir), { recursive: true });
+}

package/src/utils/find-chrome.js ADDED Viewed

@@ -0,0 +1,27 @@
+import { access } from "node:fs/promises";
+const CANDIDATES = {
+  darwin: ["/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"],
+  linux: [
+    "/usr/bin/google-chrome",
+    "/usr/bin/chromium-browser",
+    "/usr/bin/chromium",
+  ],
+  win32: [
+    "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
+    "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
+  ],
+};
+export async function findChrome() {
+  const paths = CANDIDATES[process.platform] || [];
+  for (const p of paths) {
+    try {
+      await access(p);
+      return p;
+    } catch {
+      // not found, try next
+    }
+  }
+  return null;
+}

package/src/utils/paths.js ADDED Viewed

@@ -0,0 +1,17 @@
+import { join } from "node:path";
+export function pagesDir(projectDir) {
+  return join(projectDir, ".chat-glass", "pages");
+}
+export function configPath(projectDir) {
+  return join(projectDir, ".chat-glass", "config.json");
+}
+export function latestPath(projectDir) {
+  return join(projectDir, ".chat-glass", "pages", "latest.html");
+}
+export function getProjectDir() {
+  return process.cwd();
+}

package/src/utils/port.js ADDED Viewed

@@ -0,0 +1,24 @@
+import { createServer } from "node:net";
+const PORT_MIN = 3737;
+const PORT_MAX = 3747;
+function tryPort(port) {
+  return new Promise((resolve) => {
+    const server = createServer();
+    server.unref();
+    server.on("error", () => resolve(false));
+    server.listen(port, "127.0.0.1", () => {
+      server.close(() => resolve(true));
+    });
+  });
+}
+export async function findFreePort() {
+  for (let port = PORT_MIN; port <= PORT_MAX; port++) {
+    if (await tryPort(port)) return port;
+  }
+  throw new Error(
+    `No free port found in range ${PORT_MIN}–${PORT_MAX}. Close an existing chat-glass instance or free a port.`
+  );
+}

package/src/utils/screenshot.js ADDED Viewed

@@ -0,0 +1,70 @@
+import { findChrome } from "./find-chrome.js";
+const CAPTURE_TIMEOUT_MS = 5000;
+export async function captureScreenshot(port, outputPath) {
+  let timer;
+  try {
+    const result = await Promise.race([
+      doCapture(port, outputPath),
+      new Promise((_, reject) => {
+        timer = setTimeout(
+          () => reject(new Error("Screenshot timeout")),
+          CAPTURE_TIMEOUT_MS
+        );
+      }),
+    ]);
+    return result ?? null;
+  } catch {
+    return null;
+  } finally {
+    clearTimeout(timer);
+  }
+}
+async function doCapture(port, outputPath) {
+  let browser = null;
+  try {
+    let puppeteer;
+    try {
+      const mod = await import("puppeteer-core");
+      puppeteer = mod.default ?? mod;
+    } catch {
+      return null;
+    }
+    const chromePath = await findChrome();
+    if (!chromePath) return null;
+    browser = await puppeteer.launch({
+      headless: true,
+      executablePath: chromePath,
+      args: ["--no-sandbox", "--disable-setuid-sandbox"],
+    });
+    const page = await browser.newPage();
+    await page.setViewport({ width: 1200, height: 800 });
+    await page.goto(`http://127.0.0.1:${port}`, {
+      waitUntil: "networkidle0",
+      timeout: 4000,
+    });
+    // Short settle time for async renderers
+    await new Promise((r) => setTimeout(r, 500));
+    await page.screenshot({ path: outputPath, fullPage: true });
+    await browser.close();
+    browser = null;
+    return outputPath;
+  } catch {
+    if (browser) {
+      try {
+        await browser.close();
+      } catch {
+        // ignore cleanup errors
+      }
+    }
+    return null;
+  }
+}