@cs4alhaider/screenbook 0.1.0

package/shell/review.js

@@ -0,0 +1,213 @@
+/* Review Mode (EN-16): pinned comments with full context capture.
+   Persistence: __sb/review API when running under `engine serve`,
+   localStorage fallback under any other static server. */
+
+import { store, set } from './store.js';
+import { setReview } from './screenhost.js';
+import { fetchComments, saveComments } from './net.js';
+import { toast } from './toast.js';
+
+const panel = document.getElementById('review-panel');
+const LS_KEY = 'sb:review:comments';
+const LS_NAME = 'sb:review:reviewer';
+
+let comments = [];
+let pending = null;      // pin awaiting a note { xPct, yPct, cssPath }
+let focusId = null;
+let saveTimer = null;
+
+export async function initReview() {
+  if (store.ui.serveLive) {
+    const disk = await fetchComments();
+    comments = disk?.comments || [];
+  } else {
+    try { comments = JSON.parse(localStorage.getItem(LS_KEY) || '[]'); }
+    catch { comments = []; }
+  }
+}
+
+function persist() {
+  clearTimeout(saveTimer);
+  saveTimer = setTimeout(async () => {
+    if (store.ui.serveLive) {
+      try { await saveComments(comments); }
+      catch { toast('⚠︎ Could not sync comments to disk'); }
+    } else {
+      try { localStorage.setItem(LS_KEY, JSON.stringify(comments)); } catch { /* full */ }
+    }
+  }, 250);
+}
+
+function screenPins() {
+  return comments
+    .filter((c) => c.feature === store.ui.feature && c.screen === store.ui.screen)
+    .map((c, idx) => ({ id: c.id, n: idx + 1, xPct: c.xPct, yPct: c.yPct, resolved: !!c.resolved, note: c.note }));
+}
+
+export function pushPinsToScreen() {
+  setReview(store.ui.review, store.ui.review ? screenPins() : []);
+}
+
+export function handlePinRequest(msg) {
+  pending = { xPct: msg.xPct, yPct: msg.yPct, cssPath: msg.cssPath };
+  renderReviewPanel();
+  panel.querySelector('textarea')?.focus();
+}
+
+export function handlePinOpen(id) {
+  focusId = id;
+  renderReviewPanel();
+  panel.querySelector('.rp-item.is-focus')?.scrollIntoView({ block: 'nearest' });
+}
+
+function addComment(note) {
+  if (!pending || !note.trim()) return;
+  const reviewer = localStorage.getItem(LS_NAME) || '';
+  comments.push({
+    id: `c${Date.now().toString(36)}${Math.random().toString(36).slice(2, 6)}`,
+    note: note.trim(),
+    reviewer: reviewer || undefined,
+    created: window.EngineKit.isoDate(0),
+    feature: store.ui.feature,
+    screen: store.ui.screen,
+    device: store.ui.deviceFilter === 'all' ? undefined : store.ui.deviceFilter,
+    scenario: store.ui.scenario,
+    theme: store.ui.theme,
+    mode: store.ui.mode,
+    dir: store.ui.dir,
+    xPct: pending.xPct,
+    yPct: pending.yPct,
+    cssPath: pending.cssPath,
+    resolved: false
+  });
+  pending = null;
+  persist();
+  pushPinsToScreen();
+  renderReviewPanel();
+  toast('Pinned ✓');
+}
+
+export function resolveComment(id, resolved = true) {
+  const c = comments.find((x) => x.id === id);
+  if (!c) return false;
+  c.resolved = resolved;
+  persist();
+  pushPinsToScreen();
+  renderReviewPanel();
+  return true;
+}
+
+function deleteComment(id) {
+  const i = comments.findIndex((x) => x.id === id);
+  if (i >= 0) {
+    comments.splice(i, 1);
+    persist();
+    pushPinsToScreen();
+    renderReviewPanel();
+  }
+}
+
+function exportComments() {
+  const blob = new Blob(
+    [JSON.stringify({ exported: new Date().toISOString(), comments }, null, 2)],
+    { type: 'application/json' }
+  );
+  const a = document.createElement('a');
+  a.href = URL.createObjectURL(blob);
+  a.download = 'screenbook-review.json';
+  a.click();
+  URL.revokeObjectURL(a.href);
+}
+
+function esc(s) {
+  return String(s ?? '').replace(/[&<>"]/g, (c) => (
+    { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]
+  ));
+}
+
+export function renderReviewPanel() {
+  if (!store.ui.review) {
+    panel.hidden = true;
+    panel.innerHTML = '';
+    return;
+  }
+  panel.hidden = false;
+
+  const open = comments.filter((c) => !c.resolved).length;
+  const reviewer = localStorage.getItem(LS_NAME) || '';
+  const items = comments
+    .map((c, i) => ({ c, n: i + 1 }))
+    .filter(({ c }) => c.feature === store.ui.feature)
+    .sort((a, b) => (a.c.screen || '').localeCompare(b.c.screen || '') || a.n - b.n);
+
+  panel.innerHTML =
+    `<div class="rp-head"><h3>Review<span class="rp-count">${open} open</span></h3>
+      <div class="rp-tools">
+        <button class="rp-tool" data-act="export">Export JSON</button>
+      </div></div>
+    <div class="rp-reviewer"><input id="rp-name" placeholder="Reviewer name (saved once)" value="${esc(reviewer)}"></div>
+    ${pending
+      ? `<div class="rp-composer">
+           <textarea id="rp-note" placeholder="What should change here?"></textarea>
+           <div class="rc-row">
+             <span class="rc-ctx">${esc(pending.cssPath || '')}</span>
+             <span style="display:flex;gap:6px">
+               <button class="btn-ghost" data-act="cancel">Cancel</button>
+               <button class="btn-primary" data-act="save">Pin it</button>
+             </span>
+           </div>
+         </div>`
+      : `<div class="rp-hint">Click anywhere on the screen to pin a comment. Pins capture screen, scenario, theme, mode and the element under the cursor.</div>`}
+    <div class="rp-list">${items.map(({ c }) => {
+      const pinsHere = c.screen === store.ui.screen;
+      const num = pinsHere ? screenPins().findIndex((p) => p.id === c.id) + 1 : null;
+      return `<div class="rp-item${c.id === focusId ? ' is-focus' : ''}${c.resolved ? ' is-resolved' : ''}" data-id="${esc(c.id)}">
+        <div class="ri-top"><span class="ri-n">${num || '•'}</span><span class="ri-note">${esc(c.note)}</span></div>
+        <div class="ri-ctx">${esc(c.screen)} · ${esc(c.scenario)} · ${esc(c.mode)}${c.dir === 'rtl' ? ' · rtl' : ''}${c.cssPath ? `<br>${esc(c.cssPath)}` : ''}</div>
+        <div class="ri-meta">${c.reviewer ? `<span class="pill">${esc(c.reviewer)}</span>` : ''}<span class="sr-date">${esc(c.created || '')}</span></div>
+        <div class="ri-actions">
+          <button class="btn-ghost" data-act="${c.resolved ? 'reopen' : 'resolve'}">${c.resolved ? 'Reopen' : 'Resolve'}</button>
+          <button class="btn-ghost" data-act="delete">Delete</button>
+          ${!pinsHere ? `<button class="btn-ghost" data-act="goto">Go to screen</button>` : ''}
+        </div>
+      </div>`;
+    }).join('') || '<div class="list-empty">No comments in this feature yet.</div>'}</div>`;
+
+  panel.querySelector('#rp-name').addEventListener('change', (e) => {
+    localStorage.setItem(LS_NAME, e.target.value.trim());
+  });
+  panel.querySelector('[data-act="export"]').addEventListener('click', exportComments);
+  panel.querySelector('[data-act="save"]')?.addEventListener('click', () => {
+    addComment(panel.querySelector('#rp-note').value);
+  });
+  panel.querySelector('#rp-note')?.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) addComment(e.target.value);
+  });
+  panel.querySelector('[data-act="cancel"]')?.addEventListener('click', () => {
+    pending = null;
+    renderReviewPanel();
+  });
+
+  panel.querySelectorAll('.rp-item').forEach((item) => {
+    const id = item.dataset.id;
+    item.addEventListener('click', () => { focusId = id; });
+    item.querySelector('[data-act="resolve"], [data-act="reopen"]')?.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const c = comments.find((x) => x.id === id);
+      resolveComment(id, !c.resolved);
+    });
+    item.querySelector('[data-act="delete"]')?.addEventListener('click', (e) => {
+      e.stopPropagation();
+      deleteComment(id);
+    });
+    item.querySelector('[data-act="goto"]')?.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const c = comments.find((x) => x.id === id);
+      if (c) set({ screen: c.screen, scenario: c.scenario || store.ui.scenario });
+    });
+  });
+}
+
+export function reviewComments() {
+  return comments;
+}

package/shell/screenhost.js

@@ -0,0 +1,380 @@
+/* Screen host — owns the device frame + iframe and speaks sb:* postMessage
+   with the bridge inside the screen. One screen mounted at a time. */
+
+import { store, feature, screenEntry, activeTheme, activeScenario } from './store.js';
+import { buildFrame, fitFrame } from './frames.js';
+import { url } from './net.js';
+
+const Kit = window.EngineKit;
+const stage = document.getElementById('stage');
+
+let current = null;   // { featureId | appId, screenId, frame, iframe, unfit, veil, veilTimer, ready }
+let handlers = {
+  onGo: () => {},
+  onReady: () => {},
+  onConsoleError: () => {},
+  onPinRequest: () => {},
+  onPinOpen: () => {},
+  onAppUpdate: () => {}
+};
+let reviewState = { active: false, pins: [] };
+
+/* Inject the app-bridge runtime + a project-owned driver into a same-origin
+   app iframe (driven mode, EN-19: the app's own files stay untouched). */
+export function injectAppRuntime(iframe, featureId, driverFile, onFail) {
+  let doc = null;
+  try { doc = iframe.contentDocument; } catch { /* cross-origin */ }
+  if (!doc) {
+    onFail?.('Cross-origin app — it must include engine/app-bridge.js itself and call AppBridge.register().');
+    return;
+  }
+  const host = doc.head || doc.documentElement;
+  const runtime = doc.createElement('script');
+  runtime.src = url('engine/app-bridge.js');
+  runtime.onload = () => {
+    const driver = doc.createElement('script');
+    driver.src = url(`features/${featureId}/${driverFile}`);
+    driver.onerror = () => onFail?.(`Driver failed to load: features/${featureId}/${driverFile}`);
+    host.appendChild(driver);
+  };
+  runtime.onerror = () => onFail?.('engine/app-bridge.js failed to load');
+  host.appendChild(runtime);
+}
+
+export function onScreenMessage(patch) {
+  Object.assign(handlers, patch);
+}
+
+/* Merged data for the current feature + scenario (dates resolved by bridge). */
+export function mergedData(featureId = store.ui.feature) {
+  const f = feature(featureId);
+  if (!f) return {};
+  return Kit.applyScenario(f.seed, activeScenario(featureId));
+}
+
+function initPayload() {
+  const entry = screenEntry();
+  return {
+    type: 'sb:init',
+    theme: activeTheme() || Kit.FALLBACK_THEME,
+    themeId: store.ui.theme,
+    mode: store.ui.mode,
+    dir: store.ui.dir,
+    lang: store.ui.lang,
+    device: entry ? effectiveDevice(entry) : 'none',
+    scenario: store.ui.scenario,
+    data: mergedData(),
+    i18n: feature()?.i18n || null,
+    defaultLang: store.project?.config?.defaultLanguage || 'en',
+    review: reviewState
+  };
+}
+
+window.addEventListener('message', (e) => {
+  if (!current || e.source !== current.iframe.contentWindow) return;
+  const msg = e.data;
+  if (!msg || typeof msg.type !== 'string') return;
+
+  switch (msg.type) {
+    case 'sb:hello':
+      current.iframe.contentWindow.postMessage(initPayload(), '*');
+      break;
+    case 'sb:ready':
+      current.ready = true;
+      current.veil.classList.add('is-hidden');
+      handlers.onReady(current.featureId, current.screenId);
+      break;
+    case 'sb:go':
+      handlers.onGo(msg.id);
+      break;
+    case 'sb:console-error':
+    case 'sba:console-error':
+      handlers.onConsoleError(msg.message, current.featureId || current.appId, current.screenId);
+      break;
+    case 'sb:pin-request':
+      handlers.onPinRequest(msg);
+      break;
+    case 'sb:pin-open':
+      handlers.onPinOpen(msg.id);
+      break;
+
+    /* ---- app mode (sba:*) ---- */
+    case 'sba:hello': {
+      const f = feature(current.appId);
+      current.ready = true;
+      clearTimeout(current.veilTimer);
+      current.veil.classList.add('is-hidden');
+      if (f) {
+        f.appTitle = msg.title || f.meta.title;
+        f.capabilities = msg.capabilities || [];
+        if (msg.scenarios?.length) f.scenarios = { list: msg.scenarios };
+      }
+      pushUpdate();
+      handlers.onAppUpdate();
+      break;
+    }
+    case 'sba:screens': {
+      const f = feature(current.appId);
+      if (f) f.appScreens = msg.screens || [];
+      handlers.onAppUpdate();
+      break;
+    }
+    case 'sba:current':
+      current.screenId = msg.id;
+      handlers.onGo(msg.id);
+      break;
+  }
+});
+
+function screenUrl(featureId, screenId, bust) {
+  let u = url(`features/${featureId}/screens/${encodeURIComponent(screenId)}.html`);
+  if (bust) u += `?t=${Date.now()}`;
+  return u;
+}
+
+/* App-type feature: mount the whole SPA once, then drive it over sba:*. */
+function mountApp(f, { bust = false } = {}) {
+  const device = f.meta.device || 'none';
+  const same = current?.appId === f.id && !bust;
+
+  if (!same) {
+    unmount();
+    const frame = buildFrame(device);
+    if (f.meta.chrome === 'self') frame.root.setAttribute('data-chrome', 'self');
+    const fitWrap = document.createElement('div');
+    fitWrap.className = 'frame-fit';
+    const outer = document.createElement('div');
+    outer.className = 'frame-outer';
+    outer.append(frame.root);
+    fitWrap.append(outer);
+    stage.append(fitWrap);
+
+    const veil = document.createElement('div');
+    veil.className = 'load-veil';
+    veil.textContent = 'Loading app…';
+    frame.viewport.append(veil);
+
+    const iframe = document.createElement('iframe');
+    iframe.setAttribute('title', 'app');
+    frame.viewport.insertBefore(iframe, veil);
+
+    const unfit = fitFrame(stage, fitWrap, frame);
+    current = { appId: f.id, screenId: null, frame, iframe, unfit, veil, ready: false };
+
+    const fail = (text) => { veil.classList.remove('is-hidden'); veil.textContent = text; };
+    iframe.addEventListener('load', () => {
+      if (f.meta.driver) injectAppRuntime(iframe, f.id, f.meta.driver, fail);
+    });
+    current.veilTimer = setTimeout(() => {
+      if (!current?.ready) {
+        fail(f.meta.driver
+          ? `App hasn't registered — check features/${f.id}/${f.meta.driver}`
+          : 'App hasn\'t registered — it must include engine/app-bridge.js and call AppBridge.register()');
+      }
+    }, 12000);
+
+    let src = url(f.meta.src);
+    if (bust) src += (src.includes('?') ? '&' : '?') + `t=${Date.now()}`;
+    iframe.src = src;
+  }
+
+  current.frame.root.setAttribute('data-screen-mode', store.ui.mode);
+  if (current.frame.urlPill) {
+    current.frame.urlPill.textContent = `screenbook://${f.id}${store.ui.screen ? `/${store.ui.screen}` : ''}`;
+  }
+  if (current.ready && store.ui.screen && store.ui.screen !== current.screenId &&
+      current.iframe.contentWindow) {
+    current.iframe.contentWindow.postMessage({ type: 'sba:go', id: store.ui.screen }, '*');
+  }
+}
+
+/* Mount (or remount) the current screen. Rebuilds the frame when needed. */
+export function showScreen({ bust = false } = {}) {
+  stage.querySelector('.stage-empty')?.remove();
+
+  const f = feature();
+  if (f?.type === 'app') {
+    mountApp(f, { bust });
+    return;
+  }
+
+  const entry = screenEntry();
+
+  if (entry) renderVariantChips(entry);
+  else stage.querySelector('.variant-chips')?.remove();
+
+  if (!entry) {
+    unmount();
+    const empty = document.createElement('div');
+    empty.className = 'stage-empty';
+    const f = feature();
+    empty.innerHTML = f
+      ? `<h2>Pick a screen</h2><p>Select a screen from the sidebar${(f.manifest.screens || []).length ? '' : ' — this feature has none yet'}.</p>`
+      : `<h2>Welcome to ScreenBook</h2>
+         <p>This project has no features yet. Scaffold one:</p>
+         <p><code>node engine/cli/screenbook.js init</code></p>
+         <p>…or let an agent do it over MCP (<code>add_feature</code>, <code>add_screen</code>).</p>`;
+    stage.append(empty);
+    return;
+  }
+
+  const device = effectiveDevice(entry);
+  const sameFrame = current &&
+    current.featureId === store.ui.feature &&
+    current.frame.device === device;
+
+  if (!sameFrame) {
+    unmount();
+    const frame = buildFrame(device);
+    const fitWrap = document.createElement('div');
+    fitWrap.className = 'frame-fit';
+    const outer = document.createElement('div');
+    outer.className = 'frame-outer';
+    outer.append(frame.root);
+    fitWrap.append(outer);
+    stage.append(fitWrap);
+
+    const veil = document.createElement('div');
+    veil.className = 'load-veil';
+    veil.textContent = 'Loading…';
+    frame.viewport.append(veil);
+
+    const iframe = document.createElement('iframe');
+    iframe.setAttribute('title', 'screen');
+    iframe.setAttribute('allow', 'geolocation; clipboard-write');
+    frame.viewport.insertBefore(iframe, veil);
+
+    const unfit = fitFrame(stage, fitWrap, frame);
+    current = { featureId: store.ui.feature, screenId: null, frame, iframe, unfit, veil, ready: false };
+  }
+
+  current.frame.root.setAttribute('data-screen-mode', store.ui.mode);
+  if (entry.statusBar) current.frame.root.setAttribute('data-statusbar', entry.statusBar);
+  else current.frame.root.removeAttribute('data-statusbar');
+  if (current.frame.urlPill) {
+    current.frame.urlPill.textContent = `screenbook://${store.ui.feature}/${entry.id}`;
+  }
+
+  if (current.screenId !== entry.id || bust) {
+    current.screenId = entry.id;
+    current.ready = false;
+    current.veil.classList.remove('is-hidden');
+    current.veil.textContent = 'Loading…';
+    current.iframe.src = screenUrl(store.ui.feature, entry.id, bust);
+    if (!bust) playTransition();
+  }
+}
+
+export function unmount() {
+  if (!current) return;
+  clearTimeout(current.veilTimer);
+  current.unfit?.();
+  current.iframe.remove();
+  stage.querySelector('.frame-fit')?.remove();
+  current = null;
+}
+
+/* Push a live env update into the mounted screen/app (no reload). */
+export function pushUpdate() {
+  if (!current?.iframe.contentWindow) return;
+  current.frame.root.setAttribute('data-screen-mode', store.ui.mode);
+  const theme = activeTheme() || Kit.FALLBACK_THEME;
+
+  if (current.appId) {
+    current.iframe.contentWindow.postMessage({
+      type: 'sba:env',
+      mode: store.ui.mode,
+      dir: store.ui.dir,
+      lang: store.ui.lang,
+      scenario: store.ui.scenario,
+      theme,
+      vars: Kit.themeVars(theme, store.ui.mode)
+    }, '*');
+    return;
+  }
+
+  current.iframe.contentWindow.postMessage({
+    type: 'sb:update',
+    mode: store.ui.mode,
+    dir: store.ui.dir,
+    lang: store.ui.lang,
+    theme,
+    themeId: store.ui.theme
+  }, '*');
+}
+
+/* Scenario / data change requires a clean re-run of Engine.ready → reload.
+   For apps this remounts the whole SPA (fresh boot + re-injection). */
+export function reloadScreen({ bust = false } = {}) {
+  if (current?.appId) {
+    unmount();
+    showScreen({ bust: true });
+    return;
+  }
+  if (!current?.screenId) return;
+  current.ready = false;
+  current.veil.classList.remove('is-hidden');
+  current.iframe.src = screenUrl(current.featureId, current.screenId, bust);
+}
+
+export function setReview(active, pins) {
+  reviewState = { active, pins };
+  if (current?.iframe.contentWindow) {
+    current.iframe.contentWindow.postMessage({ type: 'sb:review', active, pins }, '*');
+  }
+}
+
+export function currentScreen() {
+  return current;
+}
+
+/* ---------------- device variants (v2: one screen, several frames) ---------------- */
+
+let variantChoice = null;   // per-screen, transient; cleared on screen change
+
+export function clearVariant() {
+  variantChoice = null;
+}
+
+function effectiveDevice(entry) {
+  const variants = entry.devices?.length ? entry.devices : null;
+  if (!variants) return entry.device || 'none';
+  if (variantChoice && variants.includes(variantChoice)) return variantChoice;
+  /* deep link / Device-filter landing: honor ?device= when this screen supports it */
+  if (store.ui.deviceFilter !== 'all' && variants.includes(store.ui.deviceFilter)) return store.ui.deviceFilter;
+  return entry.device || variants[0];
+}
+
+function renderVariantChips(entry) {
+  stage.querySelector('.variant-chips')?.remove();
+  const variants = entry.devices?.length > 1 ? entry.devices : null;
+  if (!variants) return;
+  const active = effectiveDevice(entry);
+  const box = document.createElement('div');
+  box.className = 'variant-chips';
+  for (const d of variants) {
+    const label = { ios: 'iPhone', android: 'Android', web: 'Web', none: 'Bare' }[d] || d;
+    const chip = document.createElement('button');
+    chip.type = 'button';
+    chip.className = `variant-chip${d === active ? ' is-on' : ''}`;
+    chip.textContent = label;
+    chip.addEventListener('click', () => {
+      if (variantChoice === d) return;
+      variantChoice = d;
+      showScreen();
+    });
+    box.append(chip);
+  }
+  stage.prepend(box);
+}
+
+/* subtle switch transition (respects prefers-reduced-motion; config kill-switch) */
+function playTransition() {
+  if (store.project?.config?.transitions === false) return;
+  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+  const outer = stage.querySelector('.frame-outer');
+  if (!outer) return;
+  outer.classList.remove('is-entering');
+  void outer.offsetWidth;                    // restart the animation
+  outer.classList.add('is-entering');
+}