brainstorm-companion 1.0.0

package/src/session.js

@@ -0,0 +1,215 @@
+'use strict';
+
+const fs = require('node:fs');
+const path = require('node:path');
+
+class SessionManager {
+  constructor(projectDir) {
+    this.baseDir = projectDir
+      ? `${projectDir}/.superpowers/brainstorm/`
+      : `/tmp/brainstorm-companion/`;
+  }
+
+  create() {
+    const sessionId = `${process.pid}-${Date.now()}`;
+    const sessionDir = path.join(this.baseDir, sessionId);
+    fs.mkdirSync(sessionDir, { recursive: true });
+    return { sessionId, sessionDir };
+  }
+
+  getActive() {
+    if (!fs.existsSync(this.baseDir)) return null;
+
+    let entries;
+    try {
+      entries = fs.readdirSync(this.baseDir, { withFileTypes: true });
+    } catch {
+      return null;
+    }
+
+    // Collect session dirs with their mtime for sorting (most recent first)
+    const sessions = [];
+    for (const entry of entries) {
+      if (!entry.isDirectory()) continue;
+      const sessionDir = path.join(this.baseDir, entry.name);
+      try {
+        const stat = fs.statSync(sessionDir);
+        sessions.push({ name: entry.name, sessionDir, mtime: stat.mtimeMs });
+      } catch {
+        // skip unreadable dirs
+      }
+    }
+
+    // Sort most recent first
+    sessions.sort((a, b) => b.mtime - a.mtime);
+
+    for (const { name: sessionId, sessionDir } of sessions) {
+      const serverInfoPath = path.join(sessionDir, '.server-info');
+      if (!fs.existsSync(serverInfoPath)) continue;
+
+      let serverInfo;
+      try {
+        const raw = fs.readFileSync(serverInfoPath, 'utf8');
+        serverInfo = JSON.parse(raw);
+      } catch {
+        continue;
+      }
+
+      // Verify server PID is alive
+      const pid = serverInfo.pid || serverInfo.serverPid;
+      if (pid) {
+        try {
+          process.kill(pid, 0);
+        } catch {
+          // PID is dead — stale session
+          continue;
+        }
+      } else {
+        // No PID in server-info — can't verify, skip
+        continue;
+      }
+
+      return { sessionId, sessionDir, serverInfo };
+    }
+
+    return null;
+  }
+
+  pushScreen(html, { slot, filename, label } = {}) {
+    const active = this.getActive();
+    if (!active) throw new Error('No active session found');
+    const { sessionDir } = active;
+
+    let filePath;
+    if (slot !== undefined) {
+      const slotDir = path.join(sessionDir, `slot-${slot}`);
+      fs.mkdirSync(slotDir, { recursive: true });
+      filePath = path.join(slotDir, 'current.html');
+      if (label !== undefined) {
+        fs.writeFileSync(path.join(slotDir, '.label'), String(label), 'utf8');
+      }
+    } else {
+      filePath = path.join(sessionDir, filename || `screen-${Date.now()}.html`);
+    }
+
+    fs.writeFileSync(filePath, html, 'utf8');
+    return { path: filePath };
+  }
+
+  readEvents() {
+    const active = this.getActive();
+    if (!active) return [];
+    const eventsPath = path.join(active.sessionDir, '.events');
+    if (!fs.existsSync(eventsPath)) return [];
+
+    try {
+      const raw = fs.readFileSync(eventsPath, 'utf8');
+      return raw
+        .split('\n')
+        .filter(line => line.trim())
+        .map(line => JSON.parse(line));
+    } catch {
+      return [];
+    }
+  }
+
+  clearEvents() {
+    const active = this.getActive();
+    if (!active) return;
+    const eventsPath = path.join(active.sessionDir, '.events');
+    try {
+      fs.writeFileSync(eventsPath, '', 'utf8');
+    } catch {
+      // ignore if file doesn't exist
+    }
+  }
+
+  clearSlot(slot) {
+    const active = this.getActive();
+    if (!active) return;
+    const slotFile = path.join(active.sessionDir, `slot-${slot}`, 'current.html');
+    try {
+      fs.rmSync(slotFile);
+    } catch {
+      // ignore if not found
+    }
+  }
+
+  clearAll() {
+    const active = this.getActive();
+    if (!active) return;
+    const { sessionDir } = active;
+
+    // Remove top-level .html files
+    try {
+      const entries = fs.readdirSync(sessionDir, { withFileTypes: true });
+      for (const entry of entries) {
+        if (entry.isFile() && entry.name.endsWith('.html')) {
+          fs.rmSync(path.join(sessionDir, entry.name));
+        }
+        // Remove slot-*/current.html
+        if (entry.isDirectory() && entry.name.startsWith('slot-')) {
+          const slotCurrent = path.join(sessionDir, entry.name, 'current.html');
+          try {
+            fs.rmSync(slotCurrent);
+          } catch {
+            // ignore
+          }
+        }
+      }
+    } catch {
+      // ignore
+    }
+  }
+
+  getStatus() {
+    const active = this.getActive();
+    if (!active) return null;
+    const { sessionId, sessionDir, serverInfo } = active;
+
+    // Gather slots
+    const slots = [];
+    try {
+      const entries = fs.readdirSync(sessionDir, { withFileTypes: true });
+      for (const entry of entries) {
+        if (entry.isDirectory() && entry.name.startsWith('slot-')) {
+          const slotId = entry.name.replace(/^slot-/, '');
+          const slotDir = path.join(sessionDir, entry.name);
+          const labelPath = path.join(slotDir, '.label');
+          const hasContent = fs.existsSync(path.join(slotDir, 'current.html'));
+          let label = null;
+          if (fs.existsSync(labelPath)) {
+            try { label = fs.readFileSync(labelPath, 'utf8'); } catch { /* ignore */ }
+          }
+          slots.push({ slot: slotId, label, hasContent });
+        }
+      }
+    } catch {
+      // ignore
+    }
+
+    // Count events
+    const events = this.readEvents();
+    const eventCount = events.length;
+
+    // Uptime and URL from serverInfo
+    const uptime = serverInfo && serverInfo.startedAt
+      ? Date.now() - serverInfo.startedAt
+      : null;
+    const url = serverInfo && serverInfo.url ? serverInfo.url : null;
+
+    return { sessionId, sessionDir, slots, eventCount, uptime, url };
+  }
+
+  cleanup() {
+    const active = this.getActive();
+    if (!active) return;
+    try {
+      fs.rmSync(active.sessionDir, { recursive: true, force: true });
+    } catch {
+      // ignore
+    }
+  }
+}
+
+module.exports = { SessionManager };

package/src/templates/comparison-helper.js

@@ -0,0 +1,277 @@
+(function() {
+  const WS_URL = 'ws://' + window.location.host;
+  let ws = null;
+  let eventQueue = [];
+  let currentView = 'side-by-side';
+  let activeSlot = null;
+  let preferred = null;
+  let slots = [];
+
+  // -------------------------------------------------------------------------
+  // WebSocket
+  // -------------------------------------------------------------------------
+
+  function connect() {
+    ws = new WebSocket(WS_URL);
+    ws.onopen = () => {
+      document.getElementById('status').textContent = 'Connected';
+      eventQueue.forEach(e => ws.send(JSON.stringify(e)));
+      eventQueue = [];
+    };
+    ws.onmessage = (msg) => {
+      let data;
+      try { data = JSON.parse(msg.data); } catch { return; }
+
+      if (data.type === 'reload') {
+        // Reload all iframes
+        reloadAllIframes();
+      } else if (data.type === 'slot-content') {
+        // Reload a specific slot iframe
+        reloadSlotIframe(data.slot);
+      } else if (data.type === 'slots-update') {
+        // Re-initialize slots
+        if (data.slots) initSlots(data.slots);
+      }
+    };
+    ws.onclose = () => {
+      document.getElementById('status').textContent = 'Reconnecting…';
+      setTimeout(connect, 1000);
+    };
+    ws.onerror = () => {
+      document.getElementById('status').textContent = 'Disconnected';
+    };
+  }
+
+  function sendEvent(event) {
+    event.timestamp = Date.now();
+    if (ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(JSON.stringify(event));
+    } else {
+      eventQueue.push(event);
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Iframe helpers
+  // -------------------------------------------------------------------------
+
+  function reloadAllIframes() {
+    slots.forEach(s => reloadSlotIframe(s.id));
+  }
+
+  function reloadSlotIframe(slotId) {
+    const iframe = document.getElementById('iframe-' + slotId);
+    if (iframe) {
+      iframe.src = '/slot/' + slotId + '?t=' + Date.now();
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Slot initialization
+  // -------------------------------------------------------------------------
+
+  function initSlots(newSlots) {
+    slots = newSlots;
+    buildTabBar();
+    buildPanels();
+    buildPrefButtons();
+
+    if (slots.length > 0) {
+      if (!activeSlot || !slots.find(s => s.id === activeSlot)) {
+        activeSlot = slots[0].id;
+      }
+      applyView();
+      updateTabHighlight();
+    }
+  }
+
+  function buildTabBar() {
+    const tabBar = document.getElementById('tab-bar');
+    tabBar.innerHTML = '';
+    slots.forEach((slot, i) => {
+      const btn = document.createElement('button');
+      btn.className = 'tab' + (slot.id === activeSlot ? ' active' : '');
+      btn.dataset.slot = slot.id;
+      btn.innerHTML =
+        '<span class="slot-letter">' + slot.id.toUpperCase() + '</span>' +
+        (slot.label ? '<span class="slot-label">' + escapeHtml(slot.label) + '</span>' : '');
+      btn.title = 'Slot ' + slot.id.toUpperCase() + (slot.label ? ' — ' + slot.label : '') + ' (key: ' + (i + 1) + ' or ' + slot.id + ')';
+      btn.addEventListener('click', () => switchSlot(slot.id));
+      tabBar.appendChild(btn);
+    });
+  }
+
+  function buildPanels() {
+    const panelsEl = document.getElementById('panels');
+    panelsEl.innerHTML = '';
+    slots.forEach(slot => {
+      const panel = document.createElement('div');
+      panel.className = 'panel';
+      panel.id = 'panel-' + slot.id;
+
+      const header = document.createElement('div');
+      header.className = 'panel-header';
+      header.textContent = 'Slot ' + slot.id.toUpperCase() + (slot.label ? ' — ' + slot.label : '');
+
+      const iframe = document.createElement('iframe');
+      iframe.id = 'iframe-' + slot.id;
+      iframe.src = '/slot/' + slot.id;
+      iframe.title = 'Slot ' + slot.id.toUpperCase();
+
+      panel.appendChild(header);
+      panel.appendChild(iframe);
+      panelsEl.appendChild(panel);
+    });
+  }
+
+  function buildPrefButtons() {
+    const bar = document.getElementById('preference-bar');
+    // Remove old pref buttons (keep the label span and keyboard hint)
+    const oldBtns = bar.querySelectorAll('.pref-btn, .pref-result');
+    oldBtns.forEach(el => el.remove());
+
+    // Insert buttons after the label span
+    const label = bar.querySelector('span');
+    slots.forEach(slot => {
+      const btn = document.createElement('button');
+      btn.className = 'pref-btn' + (preferred === slot.id ? ' selected' : '');
+      btn.dataset.slot = slot.id;
+      btn.textContent = slot.id.toUpperCase() + (slot.label ? ' — ' + slot.label : '');
+      btn.addEventListener('click', () => setPreferred(slot.id));
+      label.after(btn);
+      label.parentNode.insertBefore(btn, label.nextSibling);
+    });
+  }
+
+  // -------------------------------------------------------------------------
+  // View / slot switching
+  // -------------------------------------------------------------------------
+
+  function switchSlot(slotId) {
+    activeSlot = slotId;
+    updateTabHighlight();
+    if (currentView === 'single') {
+      applyView();
+    }
+    sendEvent({ type: 'tab-switch', slot: slotId });
+  }
+
+  function switchToSlotByIndex(index) {
+    if (index >= 0 && index < slots.length) {
+      switchSlot(slots[index].id);
+    }
+  }
+
+  function updateTabHighlight() {
+    document.querySelectorAll('#tab-bar .tab').forEach(tab => {
+      tab.classList.toggle('active', tab.dataset.slot === activeSlot);
+    });
+  }
+
+  function setView(mode) {
+    currentView = mode;
+    document.querySelectorAll('.view-btn').forEach(btn => {
+      btn.classList.toggle('active', btn.dataset.view === mode);
+    });
+    applyView();
+    sendEvent({ type: 'view-change', mode });
+  }
+
+  function toggleView() {
+    setView(currentView === 'side-by-side' ? 'single' : 'side-by-side');
+  }
+
+  function applyView() {
+    if (currentView === 'side-by-side') {
+      document.querySelectorAll('#panels .panel').forEach(panel => {
+        panel.classList.remove('hidden');
+      });
+    } else {
+      // Single view: show only active slot
+      document.querySelectorAll('#panels .panel').forEach(panel => {
+        const isActive = panel.id === 'panel-' + activeSlot;
+        panel.classList.toggle('hidden', !isActive);
+      });
+    }
+  }
+
+  function setPreferred(slotId) {
+    preferred = slotId;
+    document.querySelectorAll('.pref-btn').forEach(btn => {
+      btn.classList.toggle('selected', btn.dataset.slot === slotId);
+    });
+
+    // Show result text
+    const bar = document.getElementById('preference-bar');
+    let resultEl = bar.querySelector('.pref-result');
+    if (!resultEl) {
+      resultEl = document.createElement('div');
+      resultEl.className = 'pref-result';
+      const hint = bar.querySelector('.keyboard-hint');
+      if (hint) bar.insertBefore(resultEl, hint);
+      else bar.appendChild(resultEl);
+    }
+    const slot = slots.find(s => s.id === slotId);
+    const label = slot && slot.label ? slot.label : 'Slot ' + slotId.toUpperCase();
+    resultEl.textContent = label + ' preferred — return to terminal to continue';
+
+    sendEvent({ type: 'preference', choice: slotId, label });
+  }
+
+  // -------------------------------------------------------------------------
+  // Keyboard shortcuts
+  // -------------------------------------------------------------------------
+
+  document.addEventListener('keydown', (e) => {
+    // Don't intercept when typing in inputs
+    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+
+    if (e.key === 'Tab') {
+      e.preventDefault();
+      toggleView();
+      return;
+    }
+    if (e.key >= '1' && e.key <= '9') {
+      switchToSlotByIndex(parseInt(e.key, 10) - 1);
+      return;
+    }
+    const lower = e.key.toLowerCase();
+    if ('abcdefghijklmnopqrstuvwxyz'.includes(lower) && lower.length === 1) {
+      if (slots.find(s => s.id === lower)) {
+        switchSlot(lower);
+      }
+    }
+  });
+
+  // -------------------------------------------------------------------------
+  // View toggle buttons
+  // -------------------------------------------------------------------------
+
+  document.addEventListener('click', (e) => {
+    const btn = e.target.closest('.view-btn');
+    if (btn) setView(btn.dataset.view);
+  });
+
+  // -------------------------------------------------------------------------
+  // Utility
+  // -------------------------------------------------------------------------
+
+  function escapeHtml(str) {
+    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  }
+
+  // -------------------------------------------------------------------------
+  // Boot: fetch slots from /api/status, then connect WebSocket
+  // -------------------------------------------------------------------------
+
+  fetch('/api/status')
+    .then(r => r.json())
+    .then(data => {
+      if (data.slots && data.slots.length > 0) {
+        initSlots(data.slots);
+      }
+    })
+    .catch(() => {});
+
+  connect();
+})();