slides-grab 1.0.0

package/src/editor/js/editor-send.js

@@ -0,0 +1,157 @@
+// editor-send.js — API submission (applyChanges), updateSendState
+
+import { state, runsById, activeRunBySlide, pendingRequestBySlide } from './editor-state.js';
+import { slideStatusChip, btnSend, btnClearBboxes, promptInput, modelSelect } from './editor-dom.js';
+import { currentSlideFile, getSlideState, getLatestRunForSlide, normalizeBoxStatus, normalizeModelName, setStatus } from './editor-utils.js';
+import { addChatMessage, renderRunsList } from './editor-chat.js';
+import { renderBboxes, extractTargetsForBox } from './editor-bbox.js';
+import { flushDirectSaveForSlide } from './editor-direct-edit.js';
+
+export function updateSlideStatusChip() {
+  const slide = currentSlideFile();
+  if (!slide) {
+    slideStatusChip.textContent = 'idle';
+    slideStatusChip.className = 'slide-status-chip idle';
+    return;
+  }
+
+  let status = 'idle';
+  if (pendingRequestBySlide.has(slide)) {
+    status = 'running';
+  } else if (activeRunBySlide.has(slide)) {
+    status = 'running';
+  } else {
+    const latest = getLatestRunForSlide(slide);
+    if (latest?.status === 'success') status = 'success';
+    if (latest?.status === 'failed') status = 'failed';
+  }
+
+  slideStatusChip.textContent = status;
+  slideStatusChip.className = `slide-status-chip ${status}`;
+}
+
+export function updateSendState() {
+  const slide = currentSlideFile();
+  if (!slide) {
+    btnSend.disabled = true;
+    btnClearBboxes.disabled = true;
+    return;
+  }
+
+  const ss = getSlideState(slide);
+  const prompt = (promptInput.value || '').trim();
+  const pendingCount = ss.boxes.filter((box) => normalizeBoxStatus(box.status) === 'pending').length;
+  const blocked = pendingRequestBySlide.has(slide) || activeRunBySlide.has(slide);
+  const model = normalizeModelName(ss.model);
+
+  btnSend.disabled = !prompt || pendingCount === 0 || blocked || !model;
+  btnClearBboxes.disabled = ss.boxes.length === 0 || blocked;
+  updateSlideStatusChip();
+}
+
+export async function applyChanges() {
+  const slide = currentSlideFile();
+  if (!slide) return;
+
+  await flushDirectSaveForSlide(slide);
+
+  const ss = getSlideState(slide);
+  const prompt = (promptInput.value || '').trim();
+  const pendingBoxes = ss.boxes.filter((box) => normalizeBoxStatus(box.status) === 'pending');
+  const model = normalizeModelName(ss.model) || state.selectedModel || state.defaultModel;
+
+  if (!prompt) return;
+  if (pendingBoxes.length === 0) {
+    setStatus('No pending (red) bbox to run. Draw a new box or click Rerun on a green box.');
+    return;
+  }
+
+  const submittedBoxIds = pendingBoxes.map((box) => box.id);
+  const submittedSet = new Set(submittedBoxIds);
+
+  const selections = pendingBoxes.map((box) => ({
+    x: box.x,
+    y: box.y,
+    width: box.width,
+    height: box.height,
+    targets: extractTargetsForBox(box),
+  }));
+
+  addChatMessage('user', `[${slide}] [${model}] ${prompt}`, slide);
+
+  pendingRequestBySlide.add(slide);
+  ss.prompt = '';
+  promptInput.value = '';
+  updateSendState();
+  const engineLabel = model.startsWith('claude-') ? 'Claude' : 'Codex';
+  setStatus(`Submitting ${slide} to ${engineLabel}...`);
+
+  try {
+    const res = await fetch('/api/apply', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        slide,
+        prompt,
+        model,
+        selections,
+      }),
+    });
+
+    const data = await res.json().catch(() => ({}));
+
+    if (!res.ok) {
+      const message = data.error || `Server error ${res.status}`;
+      addChatMessage('error', `[${slide}] ${message}`, slide);
+      setStatus(`Error: ${message}`);
+      return;
+    }
+
+    if (data.runId) {
+      const existing = runsById.get(data.runId) || {};
+      runsById.set(data.runId, {
+        ...existing,
+        runId: data.runId,
+        slide,
+        status: data.success ? 'success' : 'failed',
+        code: data.code,
+        message: data.message,
+        model: data.model || model,
+        startedAt: existing.startedAt || new Date().toISOString(),
+        finishedAt: new Date().toISOString(),
+        logPreview: existing.logPreview || '',
+      });
+      renderRunsList();
+    }
+
+    addChatMessage(
+      data.success ? 'system' : 'error',
+      `[${slide}] ${data.message || (data.success ? 'Completed' : 'Failed')}`,
+      slide,
+    );
+
+    if (data.success) {
+      let marked = 0;
+      for (const box of ss.boxes) {
+        if (submittedSet.has(box.id) && normalizeBoxStatus(box.status) === 'pending') {
+          box.status = 'review';
+          marked += 1;
+        }
+      }
+      renderBboxes();
+      setStatus(
+        marked > 0
+          ? `${data.message || 'Codex run completed.'} Review ${marked} green bbox${marked === 1 ? '' : 'es'}: Check to accept or Rerun.`
+          : (data.message || 'Codex run completed.'),
+      );
+    } else {
+      setStatus(data.message || 'Codex run failed.');
+    }
+  } catch (error) {
+    addChatMessage('error', `[${slide}] ${error.message}`, slide);
+    setStatus(`Error: ${error.message}`);
+  } finally {
+    pendingRequestBySlide.delete(slide);
+    updateSendState();
+  }
+}

package/src/editor/js/editor-sse.js

@@ -0,0 +1,163 @@
+// editor-sse.js — EventSource connection, run event handling
+
+import { state, runsById, activeRunBySlide, localFileUpdateBySlide } from './editor-state.js';
+import { slideIframe, statusDot, statusConn } from './editor-dom.js';
+import { currentSlideFile, setStatus } from './editor-utils.js';
+import { addChatMessage, renderRunsList } from './editor-chat.js';
+import { renderBboxes } from './editor-bbox.js';
+import { updateSendState } from './editor-send.js';
+
+function upsertRun(run) {
+  if (!run?.runId) return;
+  const existing = runsById.get(run.runId) || {};
+  runsById.set(run.runId, {
+    ...existing,
+    ...run,
+  });
+}
+
+export function connectSSE() {
+  const evtSource = new EventSource('/api/events');
+
+  evtSource.onopen = () => {
+    statusDot.classList.add('connected');
+    statusDot.classList.remove('disconnected');
+    statusConn.textContent = 'Connected';
+  };
+
+  evtSource.addEventListener('runsSnapshot', (event) => {
+    try {
+      const payload = JSON.parse(event.data);
+
+      runsById.clear();
+      for (const run of payload.runs || []) {
+        upsertRun(run);
+      }
+
+      activeRunBySlide.clear();
+      for (const active of payload.activeRuns || []) {
+        if (active.slide && active.runId) {
+          activeRunBySlide.set(active.slide, active.runId);
+        }
+      }
+
+      renderRunsList();
+      updateSendState();
+    } catch (error) {
+      console.error('runsSnapshot parse error:', error);
+    }
+  });
+
+  evtSource.addEventListener('applyStarted', (event) => {
+    try {
+      const payload = JSON.parse(event.data);
+      activeRunBySlide.set(payload.slide, payload.runId);
+
+      upsertRun({
+        runId: payload.runId,
+        slide: payload.slide,
+        model: payload.model || '',
+        status: 'running',
+        message: `${payload.model ? `${payload.model} | ` : ''}Running (${payload.selectionsCount || 0} bbox)`,
+        startedAt: new Date().toISOString(),
+        logPreview: '',
+      });
+
+      addChatMessage('system', `[${payload.slide}] run started (${payload.runId})`, payload.slide);
+      renderRunsList();
+      updateSendState();
+    } catch (error) {
+      console.error('applyStarted parse error:', error);
+    }
+  });
+
+  evtSource.addEventListener('applyLog', (event) => {
+    try {
+      const payload = JSON.parse(event.data);
+      if (!payload.runId) return;
+      const run = runsById.get(payload.runId);
+      if (run) {
+        run.logPreview = (String(run.logPreview || '') + String(payload.chunk || '')).slice(-2000);
+        runsById.set(payload.runId, run);
+      }
+    } catch (error) {
+      console.error('applyLog parse error:', error);
+    }
+  });
+
+  evtSource.addEventListener('applyFinished', (event) => {
+    try {
+      const payload = JSON.parse(event.data);
+      activeRunBySlide.delete(payload.slide);
+
+      upsertRun({
+        runId: payload.runId,
+        slide: payload.slide,
+        model: payload.model || '',
+        status: payload.success ? 'success' : 'failed',
+        code: payload.code,
+        message: payload.message,
+        finishedAt: new Date().toISOString(),
+      });
+
+      addChatMessage(
+        payload.success ? 'system' : 'error',
+        `[${payload.slide}] ${payload.message || (payload.success ? 'completed' : 'failed')}`,
+        payload.slide,
+      );
+
+      renderRunsList();
+      updateSendState();
+      setStatus(payload.message || 'Run finished.');
+    } catch (error) {
+      console.error('applyFinished parse error:', error);
+    }
+  });
+
+  evtSource.addEventListener('fileChanged', (event) => {
+    try {
+      const { file } = JSON.parse(event.data);
+      if (file === currentSlideFile()) {
+        const updatedAt = localFileUpdateBySlide.get(file);
+        if (updatedAt && Date.now() - updatedAt < 2000) {
+          localFileUpdateBySlide.delete(file);
+          return;
+        }
+        slideIframe.src = slideIframe.src;
+      }
+    } catch (error) {
+      console.error('fileChanged parse error:', error);
+    }
+  });
+
+  evtSource.onerror = () => {
+    statusDot.classList.remove('connected');
+    statusDot.classList.add('disconnected');
+    statusConn.textContent = 'Disconnected';
+  };
+}
+
+export async function loadRunsInitial() {
+  try {
+    const res = await fetch('/api/runs');
+    if (!res.ok) return;
+    const payload = await res.json();
+
+    runsById.clear();
+    for (const run of payload.runs || []) {
+      upsertRun(run);
+    }
+
+    activeRunBySlide.clear();
+    for (const active of payload.activeRuns || []) {
+      if (active.slide && active.runId) {
+        activeRunBySlide.set(active.slide, active.runId);
+      }
+    }
+
+    renderRunsList();
+    updateSendState();
+  } catch {
+    // ignore
+  }
+}

package/src/editor/js/editor-state.js

@@ -0,0 +1,32 @@
+// editor-state.js — State variables, constants, Maps/Sets
+
+export const SLIDE_W = 960;
+export const SLIDE_H = 540;
+export const TOOL_MODE_DRAW = 'draw';
+export const TOOL_MODE_SELECT = 'select';
+export const POPOVER_TEXT = 'text';
+export const POPOVER_TEXT_COLOR = 'text-color';
+export const POPOVER_BG_COLOR = 'bg-color';
+export const POPOVER_SIZE = 'size';
+export const DEFAULT_MODELS = ['gpt-5.4', 'gpt-5.3-codex', 'gpt-5.3-codex-spark', 'claude-opus-4-6', 'claude-sonnet-4-6'];
+export const DIRECT_TEXT_TAGS = new Set(['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li']);
+export const NON_SELECTABLE_TAGS = new Set(['html', 'head', 'body', 'script', 'style', 'link', 'meta', 'noscript']);
+
+export const slideStates = new Map();
+export const activeRunBySlide = new Map();
+export const pendingRequestBySlide = new Set();
+export const runsById = new Map();
+export const directSaveStateBySlide = new Map();
+export const localFileUpdateBySlide = new Map();
+
+export const state = {
+  slides: [],
+  currentIndex: 0,
+  drawStart: null,
+  drawing: false,
+  availableModels: DEFAULT_MODELS.slice(),
+  defaultModel: DEFAULT_MODELS[0],
+  selectedModel: DEFAULT_MODELS[0],
+  toolMode: TOOL_MODE_DRAW,
+  hoveredObjectXPath: '',
+};

package/src/editor/js/editor-utils.js

@@ -0,0 +1,167 @@
+// editor-utils.js — Helper functions
+
+import { state, DEFAULT_MODELS, slideStates, runsById, directSaveStateBySlide } from './editor-state.js';
+import { statusMsg, modelSelect } from './editor-dom.js';
+
+export function setStatus(message) {
+  statusMsg.textContent = message;
+}
+
+export function currentSlideFile() {
+  return state.slides[state.currentIndex] || null;
+}
+
+export function clamp(v, min, max) {
+  return Math.max(min, Math.min(max, v));
+}
+
+export function getDirectSaveState(slide) {
+  if (!directSaveStateBySlide.has(slide)) {
+    directSaveStateBySlide.set(slide, {
+      timer: null,
+      pendingHtml: '',
+      pendingMessage: '',
+      chain: Promise.resolve(),
+    });
+  }
+  return directSaveStateBySlide.get(slide);
+}
+
+export function escapeHtml(str) {
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+export function formatTime(iso) {
+  if (!iso) return '-';
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return iso;
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+
+export function randomId(prefix) {
+  return `${prefix}-${Date.now()}-${Math.floor(Math.random() * 100000)}`;
+}
+
+export function normalizeModelName(value) {
+  return typeof value === 'string' ? value.trim() : '';
+}
+
+export function normalizeHexColor(value, fallback = '#111111') {
+  if (typeof value !== 'string') return fallback;
+  const hexMatch = value.trim().match(/^#([0-9a-f]{6})$/i);
+  if (hexMatch) {
+    return `#${hexMatch[1].toLowerCase()}`;
+  }
+
+  const rgbMatch = value.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i);
+  if (!rgbMatch) return fallback;
+  const toHex = (part) => Number(part).toString(16).padStart(2, '0');
+  return `#${toHex(rgbMatch[1])}${toHex(rgbMatch[2])}${toHex(rgbMatch[3])}`;
+}
+
+export function parsePixelValue(value, fallback = 24) {
+  const parsed = Number.parseFloat(String(value || '').replace('px', ''));
+  if (!Number.isFinite(parsed)) return fallback;
+  return Math.round(parsed);
+}
+
+export function isBoldFontWeight(value) {
+  const numeric = Number.parseInt(value, 10);
+  if (Number.isFinite(numeric)) return numeric >= 600;
+  return /bold/i.test(String(value || ''));
+}
+
+export function loadSavedModel() {
+  try {
+    return normalizeModelName(window.localStorage.getItem('slides-grab-editor-model'));
+  } catch {
+    return '';
+  }
+}
+
+export function saveSelectedModel(model) {
+  try {
+    window.localStorage.setItem('slides-grab-editor-model', model);
+  } catch {
+    // ignore
+  }
+}
+
+export function setModelOptions(models, preferredModel = '') {
+  const list = Array.isArray(models)
+    ? models
+      .map((name) => normalizeModelName(name))
+      .filter((name) => name !== '')
+    : [];
+  const uniqueModels = Array.from(new Set(list));
+
+  state.availableModels = uniqueModels.length > 0 ? uniqueModels : DEFAULT_MODELS.slice();
+
+  const preferred = normalizeModelName(preferredModel);
+  const saved = loadSavedModel();
+
+  if (state.availableModels.includes(preferred)) {
+    state.selectedModel = preferred;
+  } else if (state.availableModels.includes(saved)) {
+    state.selectedModel = saved;
+  } else {
+    state.selectedModel = state.availableModels[0];
+  }
+
+  state.defaultModel = state.selectedModel;
+
+  modelSelect.innerHTML = state.availableModels
+    .map((name) => `<option value="${escapeHtml(name)}">${escapeHtml(name)}</option>`)
+    .join('');
+  modelSelect.value = state.selectedModel;
+  saveSelectedModel(state.selectedModel);
+}
+
+export async function loadModelOptions() {
+  const saved = loadSavedModel();
+
+  try {
+    const res = await fetch('/api/models');
+    if (!res.ok) {
+      throw new Error(`HTTP ${res.status}`);
+    }
+
+    const payload = await res.json();
+    const serverModels = Array.isArray(payload.models) ? payload.models : [];
+    const serverDefault = normalizeModelName(payload.defaultModel);
+
+    setModelOptions(serverModels, saved || serverDefault);
+  } catch {
+    setModelOptions(DEFAULT_MODELS, saved);
+  }
+}
+
+export function normalizeBoxStatus(status) {
+  return status === 'review' ? 'review' : 'pending';
+}
+
+export function getSlideState(slide) {
+  if (!slideStates.has(slide)) {
+    slideStates.set(slide, {
+      prompt: '',
+      model: state.defaultModel,
+      messages: [],
+      boxes: [],
+      selectedBoxId: null,
+      selectedObjectXPath: '',
+    });
+  }
+  return slideStates.get(slide);
+}
+
+export function getLatestRunForSlide(slide) {
+  const runs = Array.from(runsById.values())
+    .filter((run) => run.slide === slide)
+    .sort((a, b) => String(b.startedAt).localeCompare(String(a.startedAt)));
+  return runs[0] || null;
+}

package/src/editor/screenshot.js

@@ -0,0 +1,73 @@
+import { join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+import { chromium } from 'playwright';
+
+export const SCREENSHOT_SIZE = { width: 1600, height: 900 };
+
+/**
+ * Launch a reusable headless Chromium browser.
+ * Caller is responsible for closing the browser when done.
+ */
+export async function createScreenshotBrowser() {
+  const browser = await chromium.launch({ headless: true });
+  return { browser };
+}
+
+/**
+ * Create a fresh screenshot page/context from an existing browser.
+ * Caller must close the returned context.
+ */
+export async function createScreenshotPage(browser) {
+  const context = await browser.newContext({ viewport: SCREENSHOT_SIZE });
+  const page = await context.newPage();
+  return { context, page };
+}
+
+/**
+ * Capture a screenshot of a single slide HTML file.
+ *
+ * @param {import('playwright').Page} page  – reusable Playwright page
+ * @param {string} slideFile               – filename, e.g. "slide-04.html"
+ * @param {string} screenshotPath          – output PNG path
+ * @param {string} slidesDir               – directory containing the slide files
+ * @param {object} [options]
+ * @param {boolean} [options.useHttp]       – if true, slidesDir is treated as a base URL
+ */
+export async function captureSlideScreenshot(page, slideFile, screenshotPath, slidesDir, options = {}) {
+  const slideUrl = options.useHttp
+    ? `${slidesDir}/${slideFile}`
+    : pathToFileURL(join(slidesDir, slideFile)).href;
+
+  await page.goto(slideUrl, { waitUntil: 'load' });
+  await page.evaluate(async () => {
+    if (document.fonts?.ready) {
+      await document.fonts.ready;
+    }
+  });
+
+  await page.evaluate(({ width, height }) => {
+    const htmlStyle = document.documentElement.style;
+    const bodyStyle = document.body.style;
+
+    htmlStyle.margin = '0';
+    htmlStyle.padding = '0';
+    htmlStyle.overflow = 'hidden';
+    htmlStyle.background = '#ffffff';
+
+    bodyStyle.margin = '0';
+    bodyStyle.padding = '0';
+    bodyStyle.transformOrigin = 'top left';
+
+    const rect = document.body.getBoundingClientRect();
+    const sourceWidth = rect.width > 0 ? rect.width : width;
+    const sourceHeight = rect.height > 0 ? rect.height : height;
+    const scale = Math.min(width / sourceWidth, height / sourceHeight);
+
+    bodyStyle.transform = `scale(${scale})`;
+  }, SCREENSHOT_SIZE);
+
+  await page.screenshot({
+    path: screenshotPath,
+    fullPage: false,
+  });
+}