@ohos-ports/slides-grab 1.5.0-beta.0

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

@@ -0,0 +1,175 @@
+// editor-send.js — API submission (applyChanges), updateSendState
+
+import { state, runsById, activeRunBySlide, pendingRequestBySlide } from './editor-state.js';
+import { slideIframe, slideStatusChip, btnSend, btnClearBboxes, promptInput, imageProviderSelect } 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';
+import { buildApplyRequestBody, getEditorClient } from './editor-type.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 editorClient = getEditorClient();
+  const model = editorClient.usesModel ? normalizeModelName(ss.model) : '';
+
+  state.imageProvider = imageProviderSelect?.value || 'codex';
+  const requiresBbox = !editorClient.usesImageProvider;
+  btnSend.disabled = !prompt || (requiresBbox && pendingCount === 0) || blocked || (editorClient.usesModel && !model);
+  btnClearBboxes.disabled = ss.boxes.length === 0 || blocked;
+  updateSlideStatusChip();
+}
+
+export async function applyChanges() {
+  const slide = currentSlideFile();
+  if (!slide) return;
+
+  const editorClient = getEditorClient();
+  if (editorClient.supportsDirectSave) await flushDirectSaveForSlide(slide);
+
+  const ss = getSlideState(slide);
+  const prompt = (promptInput.value || '').trim();
+  const pendingBoxes = ss.boxes.filter((box) => normalizeBoxStatus(box.status) === 'pending');
+  const model = editorClient.usesModel
+    ? normalizeModelName(ss.model) || state.selectedModel || state.defaultModel
+    : '';
+  const imageProvider = imageProviderSelect?.value || 'codex';
+  state.imageProvider = imageProvider;
+  if (!prompt) return;
+  if (!editorClient.usesImageProvider && 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: editorClient.includesSelectionTargets ? extractTargetsForBox(box) : [],
+  }));
+
+  addChatMessage('user', `[${slide}] [${editorClient.usesImageProvider ? `image:${imageProvider}` : model}] ${prompt}`, slide);
+
+  pendingRequestBySlide.add(slide);
+  ss.prompt = '';
+  promptInput.value = '';
+  updateSendState();
+  const engineLabel = editorClient.usesImageProvider ? `Image ${imageProvider}` : 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(buildApplyRequestBody({
+        slide,
+        prompt,
+        model,
+        selections,
+        provider: imageProvider,
+      })),
+    });
+
+    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) {
+      if (editorClient.usesImageProvider && data.image?.assetRef && slide === currentSlideFile()) {
+        const slideImage = slideIframe?.contentDocument?.querySelector('img.slide-image');
+        if (slideImage) {
+          const refreshedImageUrl = new URL(data.image.assetRef, slideIframe.contentWindow.location.href);
+          refreshedImageUrl.searchParams.set('refresh', Date.now().toString());
+          slideImage.src = refreshedImageUrl.href;
+        }
+      }
+
+      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,41 @@
+import { ALL_MODELS } from './model-registry.js';
+
+export let SLIDE_W = 960;
+export let SLIDE_H = 540;
+
+export function setSlideFrame(width, height) {
+  const w = Number(width);
+  const h = Number(height);
+  if (Number.isFinite(w) && w > 0) SLIDE_W = Math.round(w);
+  if (Number.isFinite(h) && h > 0) SLIDE_H = Math.round(h);
+}
+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 = ALL_MODELS.slice();
+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,
+  editorType: typeof document !== 'undefined' && document.body?.dataset.editorType === 'image' ? 'image' : 'html',
+  imageProvider: 'codex',
+  hoveredObjectXPath: '',
+};

package/src/editor/js/editor-type.js

@@ -0,0 +1,71 @@
+import { state, TOOL_MODE_SELECT } from './editor-state.js';
+import { btnSend, btnSendLabel, editorBrand, editorHint } from './editor-dom.js';
+
+const EDITOR_CLIENTS = Object.freeze({
+  html: Object.freeze({
+    type: 'html',
+    title: 'HTML Editor - slides-grab',
+    brand: 'HTML Editor',
+    drawHint: 'HTML Editor: drag on the slide to add red bboxes. Cmd/Ctrl+Enter to run.',
+    selectHint: 'HTML Editor: click an object to edit. Cmd/Ctrl+B, I, or U to style text.',
+    sendLabel: 'Run HTML Edit',
+    sendTitle: 'Run HTML edit',
+    usesModel: true,
+    usesImageProvider: false,
+    supportsDirectSave: true,
+    includesSelectionTargets: true,
+    requestMode: '',
+  }),
+  image: Object.freeze({
+    type: 'image',
+    title: 'Image Editor - slides-grab',
+    brand: 'Image Editor',
+    drawHint: 'Image Editor: drag on the slide to add red bboxes for regeneration.',
+    selectHint: 'Image Editor: draw a bbox for image regeneration.',
+    sendLabel: 'Regenerate Image',
+    sendTitle: 'Regenerate slide image',
+    usesModel: false,
+    usesImageProvider: true,
+    supportsDirectSave: false,
+    includesSelectionTargets: false,
+    requestMode: 'image',
+  }),
+});
+
+export function getEditorClient(editorType = state.editorType) {
+  return EDITOR_CLIENTS[editorType] || EDITOR_CLIENTS.html;
+}
+
+export function updateEditorClientLabels() {
+  const client = getEditorClient();
+  document.title = client.title;
+  editorBrand.textContent = client.brand;
+  editorHint.textContent = state.toolMode === TOOL_MODE_SELECT ? client.selectHint : client.drawHint;
+  btnSendLabel.textContent = client.sendLabel;
+  btnSend.title = client.sendTitle;
+}
+
+export function configureEditorClient(editorType) {
+  const client = getEditorClient(editorType);
+  state.editorType = client.type;
+  document.body.dataset.editorType = client.type;
+  updateEditorClientLabels();
+  return client;
+}
+
+export function buildApplyRequestBody({ slide, prompt, model, provider, selections }) {
+  const client = getEditorClient();
+  const body = {
+    slide,
+    prompt,
+    selections: selections.map((selection) => ({
+      ...selection,
+      targets: client.includesSelectionTargets ? selection.targets : [],
+    })),
+  };
+
+  if (client.usesModel) body.model = model;
+  if (client.requestMode) body.mode = client.requestMode;
+  if (client.usesImageProvider) body.provider = provider;
+  return body;
+}

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/js/model-registry.js

@@ -0,0 +1,37 @@
+// Canonical editor model registry — single source of truth for the slide
+// editor's model dropdown and dispatch routing. Imported by both Node code
+// (scripts/editor-server.js, src/editor/codex-edit.js) and browser code
+// (src/editor/js/editor-state.js), so this module MUST stay browser-safe:
+// no Node imports, no Node-only globals.
+//
+// To add a new model:
+//   1. Append to CODEX_MODELS or CLAUDE_MODELS below.
+//   2. Add a matching <option> to src/editor/editor.html (also a fallback).
+//   3. Existing tests/editor/editor-model-dispatch.test.js will automatically
+//      verify the new model dispatches correctly through the editor pipeline.
+//      No per-model test additions needed.
+
+export const CODEX_MODELS = [
+  'gpt-5.6-sol',
+  'gpt-5.6-terra',
+  'gpt-5.6-luna',
+];
+
+export const CLAUDE_MODELS = ['claude-opus-4-8', 'claude-sonnet-4-6'];
+
+export const ALL_MODELS = [...CODEX_MODELS, ...CLAUDE_MODELS];
+
+export const DEFAULT_CODEX_MODEL = CODEX_MODELS[0];
+export const DEFAULT_MODEL = DEFAULT_CODEX_MODEL;
+
+export function isClaudeModel(model) {
+  return typeof model === 'string' && CLAUDE_MODELS.includes(model.trim());
+}
+
+export function isCodexModel(model) {
+  return typeof model === 'string' && CODEX_MODELS.includes(model.trim());
+}
+
+export function isKnownEditorModel(model) {
+  return isCodexModel(model) || isClaudeModel(model);
+}