@ammduncan/easel 0.2.0

package/dist/client/viewer.js

@@ -0,0 +1,1215 @@
+(function () {
+  "use strict";
+
+  const cfg = window.__EASEL__ || {};
+  const sessionId = cfg.sessionId;
+
+  const cardsEl = document.getElementById("cards");
+  const emptyEl = document.getElementById("empty-state");
+  const countEl = document.getElementById("push-count");
+  const prunedEl = document.getElementById("pruned-marker");
+  const liveDotEl = document.getElementById("live-dot");
+  const liveLabelEl = document.getElementById("live-label");
+  const newPillEl = document.getElementById("new-pill");
+  const newPillText = document.getElementById("new-pill-text");
+  const themeToggleEl = document.getElementById("theme-toggle");
+  const presetBtnEls = Array.from(document.querySelectorAll(".preset-btn"));
+  const densityBtnEls = Array.from(document.querySelectorAll(".density-btn"));
+  const switcherBtnEl = document.getElementById("switcher-btn");
+  const switcherMenuEl = document.getElementById("switcher-menu");
+  const projectLabelEl = document.getElementById("project-label");
+
+  const BOTTOM_THRESHOLD_PX = 220;
+  const CONFIG_KEY = "easel:config";
+  const LAST_VISITED_KEY = "easel:last-visited";
+  const PRESETS = ["paper", "aurora", "slate"];
+  const DENSITIES = ["carded", "flat"];
+
+  /* The token block injected into every iframe wrapper — six combos so
+     pushed HTML themes correctly regardless of host preset/mode. */
+  const PRESET_TOKENS_CSS = `
+:root[data-preset="paper"][data-theme="light"] {
+  --ds-bg:#f4efe2;--ds-bg-elev:#f8f3e6;--ds-surface:#faf6ee;--ds-surface-soft:#f0ead9;
+  --ds-ink:#2a261e;--ds-ink-soft:#524b3c;--ds-muted:#756c57;
+  --ds-line:#d5cdb6;--ds-line-soft:#e3dcc6;
+  --ds-accent:#c97a1c;--ds-accent-soft:#f7e8c0;--ds-accent-ink:#fff;
+  --ds-code-bg:#2a261e;--ds-code-ink:#eae5d5;
+  --ds-shadow-md:0 1px 2px rgba(70,50,10,.06),0 18px 36px rgba(70,50,10,.1);
+  color-scheme:light;
+}
+:root[data-preset="paper"][data-theme="dark"] {
+  --ds-bg:#1c1b18;--ds-bg-elev:#25241f;--ds-surface:#25241f;--ds-surface-soft:#20201c;
+  --ds-ink:#ede9e0;--ds-ink-soft:#bbb5a8;--ds-muted:#888273;
+  --ds-line:#423f37;--ds-line-soft:#312f29;
+  --ds-accent:#f4bf5e;--ds-accent-soft:#3d3322;--ds-accent-ink:#1f1d18;
+  --ds-code-bg:#161514;--ds-code-ink:#eae5d5;
+  --ds-shadow-md:inset 0 1px 0 rgba(255,255,255,.045),0 1px 2px rgba(0,0,0,.55),0 18px 38px rgba(0,0,0,.45);
+  color-scheme:dark;
+}
+:root[data-preset="aurora"][data-theme="light"] {
+  --ds-bg:#f5f3fa;--ds-bg-elev:#fafaff;--ds-surface:#fff;--ds-surface-soft:#f0eef7;
+  --ds-ink:#1c1d24;--ds-ink-soft:#4a4d5a;--ds-muted:#7a7d8c;
+  --ds-line:#e1dff0;--ds-line-soft:#ebe9f5;
+  --ds-accent:#6d4eff;--ds-accent-soft:#ebe7ff;--ds-accent-ink:#fff;
+  --ds-code-bg:#1c1d24;--ds-code-ink:#ebe7ff;
+  --ds-shadow-md:0 1px 2px rgba(60,50,120,.05),0 18px 36px rgba(60,50,120,.08);
+  color-scheme:light;
+}
+:root[data-preset="aurora"][data-theme="dark"] {
+  --ds-bg:#0d0f14;--ds-bg-elev:#14171f;--ds-surface:#161a23;--ds-surface-soft:#11141a;
+  --ds-ink:#e7e9ee;--ds-ink-soft:#b9bdc6;--ds-muted:#8b909a;
+  --ds-line:rgba(143,160,200,.14);--ds-line-soft:rgba(143,160,200,.08);
+  --ds-accent:#b8c8ff;--ds-accent-soft:rgba(140,170,255,.12);--ds-accent-ink:#0d0f14;
+  --ds-code-bg:#07080a;--ds-code-ink:#e7e9ee;
+  --ds-shadow-md:inset 0 1px 0 rgba(255,255,255,.045),0 0 0 1px rgba(123,97,255,.06),0 24px 60px rgba(0,0,0,.55),0 0 80px -20px rgba(123,97,255,.25);
+  color-scheme:dark;
+}
+:root[data-preset="slate"][data-theme="light"] {
+  --ds-bg:#ecebe5;--ds-bg-elev:#f6f4ee;--ds-surface:#f6f4ee;--ds-surface-soft:#ecebe3;
+  --ds-ink:#1a1916;--ds-ink-soft:#34322d;--ds-muted:#76746c;
+  --ds-line:#d8d5cb;--ds-line-soft:#e1ddd2;
+  --ds-accent:#2f5fd1;--ds-accent-soft:#e4ebfb;--ds-accent-ink:#fff;
+  --ds-code-bg:#1c1b18;--ds-code-ink:#f1ede1;
+  --ds-shadow-md:0 1px 2px rgba(40,30,10,.05),0 16px 32px rgba(40,30,10,.08);
+  color-scheme:light;
+}
+:root[data-preset="slate"][data-theme="dark"] {
+  --ds-bg:#0c0d10;--ds-bg-elev:#15171c;--ds-surface:#15171c;--ds-surface-soft:#1c1f25;
+  --ds-ink:#f5f5f5;--ds-ink-soft:#d4d4d8;--ds-muted:#9ca3af;
+  --ds-line:#23262d;--ds-line-soft:#1c1f25;
+  --ds-accent:#7dd3fc;--ds-accent-soft:rgba(125,211,252,.16);--ds-accent-ink:#07242e;
+  --ds-code-bg:#07080a;--ds-code-ink:#f5f5f5;
+  --ds-shadow-md:0 1px 2px rgba(0,0,0,.4),0 12px 28px rgba(0,0,0,.45);
+  color-scheme:dark;
+}
+`;
+
+  /* Semantic chips — universal across presets. Authors use:
+       <span class="chip bug">BUG</span> / .ux / .polish / .ok / .info
+     to get accessible, glow-haloed badges that work in both modes. */
+  const SEMANTIC_CHIPS_CSS = `
+.chip {
+  display: inline-block;
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  padding: 3px 9px;
+  border-radius: 999px;
+  text-transform: uppercase;
+  border: 1px solid transparent;
+  font-weight: 600;
+}
+:root[data-theme="light"] .chip.bug { background:#fef2f2; color:#b91c1c; border-color:#fecaca; box-shadow:0 0 12px -6px rgba(185,28,28,.5); }
+:root[data-theme="dark"]  .chip.bug { background:#2a1518; color:#ffaba0; border-color:#4a1f25; box-shadow:0 0 12px -4px rgba(255,119,119,.45); }
+:root[data-theme="light"] .chip.ux  { background:#eff6ff; color:#1d4ed8; border-color:#bfdbfe; box-shadow:0 0 12px -6px rgba(29,78,216,.45); }
+:root[data-theme="dark"]  .chip.ux  { background:#15212b; color:#93cef0; border-color:#1f3848; box-shadow:0 0 12px -4px rgba(140,170,255,.4); }
+:root[data-theme="light"] .chip.polish { background:#faf5ff; color:#7c3aed; border-color:#e9d5ff; box-shadow:0 0 12px -6px rgba(124,58,237,.45); }
+:root[data-theme="dark"]  .chip.polish { background:#1b2230; color:#b8bfd2; border-color:#2a334b; box-shadow:0 0 12px -4px rgba(186,130,255,.4); }
+:root[data-theme="light"] .chip.ok  { background:#f0fdf4; color:#028043; border-color:#bbf7d0; box-shadow:0 0 12px -6px rgba(2,128,67,.45); }
+:root[data-theme="dark"]  .chip.ok  { background:#052e16; color:#6ee7b7; border-color:#134e29; box-shadow:0 0 12px -4px rgba(110,231,183,.4); }
+:root[data-theme="light"] .chip.info { background:#ecfeff; color:#0e7490; border-color:#a5f3fc; box-shadow:0 0 12px -6px rgba(14,116,144,.45); }
+:root[data-theme="dark"]  .chip.info { background:#0a1c22; color:#67e8f9; border-color:#155060; box-shadow:0 0 12px -4px rgba(103,232,249,.4); }
+.chip.accent { background:var(--ds-accent-soft); color:var(--ds-accent); border-color:transparent; box-shadow:0 0 12px -4px color-mix(in srgb, var(--ds-accent) 40%, transparent); }
+`;
+
+  const unreadIds = new Set();
+  let totalPushes = 0;
+  const iframes = new Set();
+  const cardObservers = new Map(); // pushId → IntersectionObserver
+  let bumpAt = 0;
+
+  /* ============================================================
+     Self-measure message bridge — iframes post their measured body
+     height; we apply it. Reliable across font loads, image loads,
+     and dynamic content (the iframe knows when its DOM mutates).
+     ============================================================ */
+
+  window.addEventListener("message", (e) => {
+    const data = e && e.data;
+    if (!data) return;
+    if (data.type === "easel:size") {
+      if (!data.pushId || typeof data.height !== "number") return;
+      const iframe = cardsEl.querySelector(
+        'iframe[data-push-id="' + cssEscape(data.pushId) + '"]',
+      );
+      if (!iframe) return;
+      iframe.style.height = Math.max(0, Math.ceil(data.height)) + "px";
+      return;
+    }
+    if (data.type === "easel:click") {
+      // An iframe was clicked — close any open dropdowns in the parent.
+      if (switcherMenuEl && !switcherMenuEl.hidden) {
+        switcherMenuEl.hidden = true;
+        switcherBtnEl.setAttribute("aria-expanded", "false");
+      }
+      return;
+    }
+    if (data.type === "easel:image-ready") {
+      // Iframe rasterised itself; trigger a download in the parent.
+      const a = document.createElement("a");
+      a.href = data.dataUrl;
+      a.download = data.filename || "push.png";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      const btn = cardsEl.querySelector(
+        'iframe[data-push-id="' + cssEscape(data.pushId) + '"]',
+      );
+      if (btn && btn.closest(".push")) {
+        const ex = btn.closest(".push").querySelector(".push-export");
+        if (ex) delete ex.dataset.loading;
+      }
+      return;
+    }
+  });
+
+  function cssEscape(s) {
+    if (window.CSS && CSS.escape) return CSS.escape(s);
+    return String(s).replace(/[^a-zA-Z0-9_-]/g, "\\$&");
+  }
+
+  /* ============================================================
+     Theming
+     ============================================================ */
+
+  function currentTheme() {
+    return document.documentElement.getAttribute("data-theme") || "dark";
+  }
+  function currentPreset() {
+    return document.documentElement.getAttribute("data-preset") || "paper";
+  }
+  function currentDensity() {
+    return document.documentElement.getAttribute("data-density") || "carded";
+  }
+
+  function applyConfig(patch, opts) {
+    const theme = patch.theme === "light" || patch.theme === "dark"
+      ? patch.theme
+      : currentTheme();
+    const preset = PRESETS.includes(patch.preset) ? patch.preset : currentPreset();
+    const density = DENSITIES.includes(patch.density) ? patch.density : currentDensity();
+    document.documentElement.setAttribute("data-theme", theme);
+    document.documentElement.setAttribute("data-preset", preset);
+    document.documentElement.setAttribute("data-density", density);
+    syncPresetButtons(preset);
+    syncDensityButtons(density);
+    if (!opts || !opts.skipPersist) {
+      try {
+        localStorage.setItem(CONFIG_KEY, JSON.stringify({ preset, theme, density }));
+      } catch (e) {
+        /* ignore */
+      }
+    }
+    broadcastConfigToIframes({ preset, theme, density });
+    if (!opts || !opts.skipServer) {
+      pushConfigToServer({ preset, theme, density });
+    }
+  }
+
+  function syncPresetButtons(active) {
+    presetBtnEls.forEach((btn) => {
+      btn.classList.toggle("active", btn.dataset.preset === active);
+    });
+  }
+  function syncDensityButtons(active) {
+    densityBtnEls.forEach((btn) => {
+      btn.classList.toggle("active", btn.dataset.density === active);
+    });
+  }
+
+  function broadcastConfigToIframes(cfg) {
+    iframes.forEach((iframe) => {
+      try {
+        iframe.contentWindow &&
+          iframe.contentWindow.postMessage(
+            { type: "easel:config", ...cfg },
+            "*",
+          );
+      } catch (e) {
+        /* ignore */
+      }
+    });
+  }
+
+  async function pushConfigToServer(cfg) {
+    try {
+      await fetch("/api/config", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(cfg),
+      });
+    } catch {
+      /* server will catch up via SSE on next event */
+    }
+  }
+
+  themeToggleEl.addEventListener("click", () => {
+    applyConfig({ theme: currentTheme() === "dark" ? "light" : "dark" });
+  });
+  presetBtnEls.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      applyConfig({ preset: btn.dataset.preset });
+    });
+  });
+  densityBtnEls.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      applyConfig({ density: btn.dataset.density });
+    });
+  });
+  syncPresetButtons(currentPreset());
+  syncDensityButtons(currentDensity());
+
+  /* ============================================================
+     Scroll helpers
+     ============================================================ */
+
+  function nearBottom() {
+    const remaining =
+      document.documentElement.scrollHeight -
+      window.scrollY -
+      window.innerHeight;
+    return remaining <= BOTTOM_THRESHOLD_PX;
+  }
+
+
+  function scrollToBottom(smooth) {
+    window.scrollTo({
+      top: document.documentElement.scrollHeight,
+      behavior: smooth ? "smooth" : "auto",
+    });
+  }
+
+  function scrollToLatestCard(smooth) {
+    const last = cardsEl.lastElementChild;
+    if (!last) {
+      scrollToBottom(smooth);
+      return;
+    }
+    last.scrollIntoView({
+      behavior: smooth ? "smooth" : "auto",
+      block: "start",
+    });
+  }
+
+  /* ============================================================
+     Formatting
+     ============================================================ */
+
+  function formatTime(ts) {
+    const d = new Date(ts);
+    const hh = String(d.getHours()).padStart(2, "0");
+    const mm = String(d.getMinutes()).padStart(2, "0");
+    return hh + ":" + mm;
+  }
+
+  function setPushCount(n) {
+    totalPushes = n;
+    countEl.textContent = n === 1 ? "1 push" : n + " pushes";
+    emptyEl.hidden = n > 0;
+  }
+
+  function setPrunedCount(n) {
+    if (n > 0) {
+      prunedEl.hidden = false;
+      prunedEl.textContent =
+        "… " + n + " earlier push" + (n === 1 ? "" : "es") + " pruned";
+    } else {
+      prunedEl.hidden = true;
+    }
+  }
+
+  function updateLive(connected) {
+    if (connected) {
+      liveDotEl.classList.remove("offline");
+      liveLabelEl.textContent = "live";
+    } else {
+      liveDotEl.classList.add("offline");
+      liveLabelEl.textContent = "reconnecting…";
+    }
+  }
+
+  /* ============================================================
+     Card rendering
+     ============================================================ */
+
+  function renderPush(push, opts) {
+    const card = document.createElement("article");
+    card.className = "push";
+    if (opts && opts.fresh) card.classList.add("fresh");
+    card.id = "push-" + push.id;
+
+    const meta = document.createElement("div");
+    meta.className = "push-meta";
+
+    const idx = document.createElement("span");
+    idx.className = "push-index";
+    idx.textContent = "#" + push.index;
+    meta.appendChild(idx);
+
+    const title = document.createElement("span");
+    title.className = "push-title";
+    title.textContent = push.title || "(untitled)";
+    meta.appendChild(title);
+
+    if (push.kind) {
+      const kind = document.createElement("span");
+      kind.className = "push-kind";
+      kind.textContent = push.kind;
+      meta.appendChild(kind);
+    }
+
+    const time = document.createElement("span");
+    time.className = "push-time";
+    time.textContent = formatTime(push.createdAt);
+    meta.appendChild(time);
+
+    const exportBtn = document.createElement("button");
+    exportBtn.className = "push-export";
+    exportBtn.type = "button";
+    exportBtn.title = "Save as PNG";
+    exportBtn.setAttribute("aria-label", "Save push as PNG");
+    exportBtn.innerHTML =
+      '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>';
+    exportBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      const safeTitle = (push.title || "push-" + push.index)
+        .toLowerCase()
+        .replace(/[^a-z0-9-]+/g, "-")
+        .replace(/^-+|-+$/g, "")
+        .slice(0, 60) || "push";
+      exportBtn.dataset.loading = "true";
+
+      // Match the export bg to what the user sees inside this card:
+      //   carded → card's elevated surface (--ds-bg-elev)
+      //   flat   → page canvas (--ds-bg) since the iframe body is transparent
+      const rootStyle = getComputedStyle(document.documentElement);
+      const isFlat = currentDensity() === "flat";
+      const bgVar = isFlat ? "--ds-bg" : "--ds-bg-elev";
+      const bgColor = rootStyle.getPropertyValue(bgVar).trim() || "#ffffff";
+
+      try {
+        iframe.contentWindow &&
+          iframe.contentWindow.postMessage(
+            {
+              type: "easel:image",
+              pushId: push.id,
+              filename: safeTitle + ".png",
+              bgColor,
+            },
+            "*",
+          );
+      } catch (err) {
+        delete exportBtn.dataset.loading;
+        console.error("[easel] export failed", err);
+      }
+    });
+    meta.appendChild(exportBtn);
+
+    const del = document.createElement("button");
+    del.className = "push-del";
+    del.type = "button";
+    del.title = "Delete this push";
+    del.setAttribute("aria-label", "Delete this push");
+    del.innerHTML =
+      '<svg viewBox="0 0 16 16" width="13" height="13" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M3.5 4h9M6 4V2.5h4V4M5 4l.5 9a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1L11 4M7 6.5v5M9 6.5v5"/></svg>';
+    del.addEventListener("click", async (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      const label = push.title ? `"${push.title}"` : `push #${push.index}`;
+      if (!window.confirm(`Delete ${label}? This can't be undone.`)) return;
+      try {
+        await fetch(
+          "/api/sessions/" +
+            encodeURIComponent(sessionId) +
+            "/pushes/" +
+            encodeURIComponent(push.id),
+          { method: "DELETE" },
+        );
+        removeCardFromDom(push.id);
+      } catch (err) {
+        console.error("[easel] delete failed", err);
+      }
+    });
+    meta.appendChild(del);
+
+    card.appendChild(meta);
+
+    const body = document.createElement("div");
+    body.className = "push-body";
+
+    const iframe = document.createElement("iframe");
+    iframe.setAttribute("sandbox", "allow-scripts allow-modals");
+    iframe.setAttribute("scrolling", "no");
+    iframe.setAttribute("title", push.title || "push " + push.index);
+    iframe.dataset.pushId = push.id;
+    iframe.srcdoc = wrapPushedHtml(push.html, currentTheme(), push.id);
+    iframe.addEventListener("load", () => {
+      iframes.add(iframe);
+      // Primary path: the iframe self-measures and posts back size via
+      // `easel:size` — handled by the message listener at the
+      // top of this module. No DOM peeking from the parent (would fail
+      // under cross-origin sandbox anyway).
+    });
+    body.appendChild(iframe);
+
+    card.appendChild(body);
+    return card;
+  }
+
+  /* ============================================================
+     Wrapper for pushed HTML
+     Bakes in: design tokens (light + dark), Rule 30 typography
+     defaults, generous whitespace, theme postMessage listener.
+     Authors can either:
+       - write plain HTML (<h1>, <h2>, <p>, etc.) — gets styled for free, OR
+       - write their own <style> and override anything.
+     ============================================================ */
+  function wrapPushedHtml(html, theme, pushId) {
+    // Authors sometimes wrap payloads in <![CDATA[ ... ]]> (treating html
+    // like CDATA-in-XML). Strip the XML-ism before doing anything else —
+    // otherwise the iframe renders the CDATA tags as visible text.
+    let cleaned = (html || "").trim();
+    if (cleaned.startsWith("<![CDATA[") && cleaned.endsWith("]]>")) {
+      cleaned = cleaned.slice(9, -3).trim();
+    }
+    const preset = currentPreset();
+    const lower = cleaned.toLowerCase();
+    if (lower.startsWith("<!doctype") || lower.startsWith("<html")) {
+      return injectBridge(cleaned, theme, preset, pushId);
+    }
+    return buildDefaultWrapper(cleaned, theme, preset, pushId);
+  }
+
+  function selfMeasureScript(pushId) {
+    return (
+      "(function(){var ID=" +
+      JSON.stringify(pushId) +
+      ";function measure(){var b=document.body,h=document.documentElement;if(!b)return 0;return Math.max(b.getBoundingClientRect().bottom,b.scrollHeight,h.scrollHeight)}function send(){try{parent.postMessage({type:'easel:size',pushId:ID,height:measure()},'*')}catch(e){}}send();window.addEventListener('load',send);window.addEventListener('resize',send);if(document.fonts&&document.fonts.ready){document.fonts.ready.then(send).catch(function(){})}if(window.ResizeObserver){var ro=new ResizeObserver(send);if(document.body)ro.observe(document.body);ro.observe(document.documentElement)}var mo=new MutationObserver(send);mo.observe(document.documentElement,{subtree:true,childList:true,characterData:true,attributes:true});setTimeout(send,250);setTimeout(send,800);setTimeout(send,1600)})();"
+    );
+  }
+
+  function buildDefaultWrapper(body, theme, preset, pushId) {
+    const density = currentDensity();
+    return `<!DOCTYPE html>
+<html data-theme="${theme}" data-preset="${preset}" data-density="${density}">
+<head>
+<meta charset="utf-8" />
+<base target="_blank" />
+<link rel="preconnect" href="https://rsms.me/" />
+<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+<script src="https://cdn.jsdelivr.net/npm/html-to-image@1.11.13/dist/html-to-image.js"></script>
+<style>
+${PRESET_TOKENS_CSS}
+${SEMANTIC_CHIPS_CSS}
+*, *::before, *::after { box-sizing: border-box; }
+html, body {
+  margin: 0;
+  background: var(--ds-bg-elev);
+  color: var(--ds-ink);
+  font-family: "Inter", -apple-system, "SF Pro Text", system-ui, sans-serif;
+  font-feature-settings: "cv11", "ss01";
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  transition: background 200ms ease, color 200ms ease;
+}
+body {
+  padding: 40px clamp(28px, 4vw, 64px) 48px;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+@media (min-width: 2000px) {
+  body { max-width: 1600px; }
+}
+/* Constrain prose to a comfortable reading length, but let visual blocks
+   (cards, grids, tables, mockups) use the full card width. */
+body > p, body > .deck, body > .lede, body > ul, body > ol, body > blockquote,
+body > h1, body > h2, body > h3, body > h4 {
+  max-width: 880px;
+}
+body > *:first-child { margin-top: 0 !important; }
+body > *:last-child { margin-bottom: 0 !important; }
+.wrap { display: block; }
+.kicker {
+  display: block;
+  font-size: 13px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--ds-muted);
+  font-weight: 500;
+  margin-bottom: 14px;
+}
+h1 {
+  font-size: 40px;
+  font-weight: 500;
+  letter-spacing: -0.025em;
+  line-height: 1.08;
+  margin: 0 0 18px;
+}
+.deck, .lede {
+  font-size: 19px;
+  line-height: 1.55;
+  color: var(--ds-ink-soft);
+  margin: 0 0 28px;
+  max-width: 720px;
+}
+h2 {
+  font-size: 26px;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+  margin: 36px 0 12px;
+}
+h3 {
+  font-size: 19px;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  margin: 24px 0 8px;
+}
+h4 { font-size: 15px; font-weight: 600; margin: 20px 0 6px; }
+p {
+  font-size: 18px;
+  margin: 0 0 14px;
+  color: var(--ds-ink-soft);
+}
+a { color: var(--ds-accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ds-accent) 40%, transparent); }
+a:hover { border-bottom-color: var(--ds-accent); }
+ul, ol { padding-left: 22px; margin: 0 0 18px; }
+li { font-size: 18px; margin-bottom: 6px; color: var(--ds-ink-soft); }
+code {
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 0.92em;
+  background: var(--ds-surface-soft);
+  color: var(--ds-ink);
+  padding: 2px 6px;
+  border-radius: 5px;
+}
+pre {
+  background: var(--ds-code-bg);
+  color: var(--ds-code-ink);
+  padding: 18px 22px;
+  border-radius: 12px;
+  overflow: auto;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 13.5px;
+  line-height: 1.7;
+  margin: 16px 0 24px;
+}
+pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; }
+blockquote {
+  border-left: 3px solid var(--ds-accent);
+  margin: 18px 0;
+  padding: 4px 0 4px 20px;
+  color: var(--ds-ink-soft);
+  font-size: 18px;
+}
+.card, .panel {
+  background: var(--ds-surface);
+  border: 1px solid var(--ds-line);
+  border-radius: 14px;
+  padding: 24px 28px;
+  margin: 0 0 20px;
+  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04);
+}
+hr {
+  border: 0;
+  border-top: 1px solid var(--ds-line);
+  margin: 36px 0;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 15px;
+  margin: 18px 0 24px;
+}
+th, td {
+  text-align: left;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--ds-line);
+}
+th { color: var(--ds-muted); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
+img { max-width: 100%; height: auto; border-radius: 10px; }
+:root[data-density="flat"] html,
+:root[data-density="flat"] body { background: transparent; }
+
+@media print {
+  /* Always print on white paper with dark text — ignore the host theme. */
+  :root, html, body {
+    background: #ffffff !important;
+    color: #111 !important;
+    color-scheme: light !important;
+  }
+  body { padding: 24px !important; max-width: none !important; }
+  body > p, body > .deck, body > .lede, body > ul, body > ol, body > blockquote,
+  body > h1, body > h2, body > h3, body > h4 { max-width: none !important; }
+  pre, code { background: #f4f3ed !important; color: #111 !important; border: 1px solid #ddd; }
+  .card, .panel { background: #fff !important; border: 1px solid #ddd !important; box-shadow: none !important; }
+  a { color: #111 !important; text-decoration: underline; border-bottom: 0 !important; }
+}
+</style>
+</head>
+<body>
+${body}
+<script>
+(function(){
+  function apply(cfg){
+    if (!cfg) return;
+    if (cfg.theme === "light" || cfg.theme === "dark") {
+      document.documentElement.setAttribute("data-theme", cfg.theme);
+      window.__claudeDisplayTheme = cfg.theme;
+    }
+    if (cfg.preset === "paper" || cfg.preset === "aurora" || cfg.preset === "slate") {
+      document.documentElement.setAttribute("data-preset", cfg.preset);
+      window.__claudeDisplayPreset = cfg.preset;
+    }
+    if (cfg.density === "carded" || cfg.density === "flat") {
+      document.documentElement.setAttribute("data-density", cfg.density);
+      window.__claudeDisplayDensity = cfg.density;
+    }
+  }
+  window.addEventListener("message", function(e){
+    if (!e || !e.data) return;
+    if (e.data.type === "easel:config") apply(e.data);
+    if (e.data.type === "easel:theme") apply({ theme: e.data.theme });
+    if (e.data.type === "easel:print") {
+      try { window.print(); } catch(_) {}
+    }
+    if (e.data.type === "easel:image") {
+      var pushId = e.data.pushId;
+      var filename = e.data.filename || "push.png";
+      var bgColor =
+        e.data.bgColor ||
+        getComputedStyle(document.documentElement).getPropertyValue("--ds-bg-elev").trim() ||
+        "#ffffff";
+      function render() {
+        if (!window.htmlToImage) {
+          console.error("[easel] html-to-image not loaded");
+          return;
+        }
+        // Capture the html root at full viewport width so fixed/absolute
+        // positioning resolves the same as on screen. Capturing body alone
+        // honours max-width:auto-margins and breaks fixed elements that
+        // anchor to the viewport (modals at left:50% etc).
+        var width = document.documentElement.clientWidth;
+        var height = Math.max(
+          document.documentElement.scrollHeight,
+          document.body ? document.body.scrollHeight : 0,
+        );
+        window.htmlToImage.toPng(document.documentElement, {
+          backgroundColor: bgColor,
+          pixelRatio: 4,
+          cacheBust: true,
+          width: width,
+          height: height,
+        }).then(function(dataUrl){
+          parent.postMessage({ type: "easel:image-ready", pushId: pushId, dataUrl: dataUrl, filename: filename }, "*");
+        }).catch(function(err){
+          console.error("[easel] export failed", err);
+        });
+      }
+      if (document.fonts && document.fonts.ready) {
+        document.fonts.ready.then(render).catch(render);
+      } else { render(); }
+    }
+  });
+})();
+</script>
+<script>${selfMeasureScript(pushId)}</script>
+</body>
+</html>`;
+  }
+
+  function injectBridge(html, theme, preset, pushId) {
+    const density = currentDensity();
+    const configScript =
+      "<script src='https://cdn.jsdelivr.net/npm/html-to-image@1.11.13/dist/html-to-image.js'></script><script>(function(){function a(c){if(!c)return;if(c.theme==='light'||c.theme==='dark'){document.documentElement.setAttribute('data-theme',c.theme);window.__claudeDisplayTheme=c.theme}if(c.preset==='paper'||c.preset==='aurora'||c.preset==='slate'){document.documentElement.setAttribute('data-preset',c.preset);window.__claudeDisplayPreset=c.preset}if(c.density==='carded'||c.density==='flat'){document.documentElement.setAttribute('data-density',c.density);window.__claudeDisplayDensity=c.density}}a(" +
+      JSON.stringify({ theme, preset, density }) +
+      ");window.addEventListener('message',function(e){if(!e||!e.data)return;if(e.data.type==='easel:config')a(e.data);if(e.data.type==='easel:theme')a({theme:e.data.theme});if(e.data.type==='easel:print'){try{window.print()}catch(_){}}if(e.data.type==='easel:image'){var pid=e.data.pushId;var fn=e.data.filename||'push.png';var bg=e.data.bgColor||'#ffffff';if(!window.htmlToImage)return;window.htmlToImage.toPng(document.body,{backgroundColor:bg,pixelRatio:4,cacheBust:true}).then(function(u){parent.postMessage({type:'easel:image-ready',pushId:pid,dataUrl:u,filename:fn},'*')}).catch(function(err){console.error(err)})}})})();</script>";
+    const measureScript = "<script>" + selfMeasureScript(pushId) + "</script>";
+    const combined = configScript + measureScript;
+    if (/<\/body>/i.test(html)) return html.replace(/<\/body>/i, combined + "</body>");
+    return html + combined;
+  }
+
+  /* ============================================================
+     Feed updates
+     ============================================================ */
+
+  function appendPush(push, opts) {
+    const wasNearBottom = nearBottom();
+    const card = renderPush(push, opts);
+    cardsEl.appendChild(card);
+    setPushCount(totalPushes + 1);
+    // requestAnimationFrame so layout settles before pill recomputes.
+    requestAnimationFrame(updatePill);
+    return { wasNearBottom, card };
+  }
+
+  function removeCardFromDom(pushId) {
+    const card = document.getElementById("push-" + pushId);
+    if (card) card.remove();
+    const obs = cardObservers.get(pushId);
+    if (obs) {
+      obs.disconnect();
+      cardObservers.delete(pushId);
+    }
+    unreadIds.delete(pushId);
+    totalPushes = Math.max(0, totalPushes - 1);
+    setPushCount(totalPushes);
+    updatePill();
+  }
+
+  function bumpUnread(pushId) {
+    if (pushId && !unreadIds.has(pushId)) {
+      unreadIds.add(pushId);
+      bumpAt = Date.now();
+      observeUnreadCard(pushId);
+    }
+    updatePill();
+  }
+
+  /* One observer per unread card. The card counts as 'read' when its top
+     edge crosses into the upper half of the viewport — works regardless
+     of card height (the earlier 0.4 ratio threshold broke for cards
+     taller than the viewport, where 40% intersection is unreachable).
+
+     rootMargin "0px 0px -50% 0px" shrinks the bottom 50% of viewport from
+     the observer's root, so the card only intersects when ANY part of it
+     reaches the top half.
+
+     Bursts of layout-shift from iframe self-measure are still ignored
+     for 900ms after the most recent bump so resize-anchoring scrolls
+     don't spuriously mark cards read. */
+  function observeUnreadCard(pushId) {
+    const card = document.getElementById("push-" + pushId);
+    if (!card) return;
+    if (cardObservers.has(pushId)) {
+      cardObservers.get(pushId).disconnect();
+    }
+    const obs = new IntersectionObserver(
+      (entries) => {
+        if (Date.now() - bumpAt < 900) return;
+        if (entries.some((e) => e.isIntersecting)) {
+          markCardRead(pushId);
+        }
+      },
+      { threshold: 0, rootMargin: "0px 0px -50% 0px" },
+    );
+    obs.observe(card);
+    cardObservers.set(pushId, obs);
+  }
+
+  function markCardRead(pushId) {
+    if (!unreadIds.has(pushId)) return;
+    unreadIds.delete(pushId);
+    const obs = cardObservers.get(pushId);
+    if (obs) {
+      obs.disconnect();
+      cardObservers.delete(pushId);
+    }
+    updatePill();
+  }
+
+  /* True when the LATEST card's header is still below the viewport — i.e.
+     you haven't reached it yet. Once the header crosses in (or past), you're
+     inside/past the latest card and the 'Scroll to last' pill should hide. */
+  function lastCardHeaderBelowViewport() {
+    const last = cardsEl.lastElementChild;
+    if (!last) return false;
+    const rect = last.getBoundingClientRect();
+    return rect.top > window.innerHeight - 100;
+  }
+
+  /* Pill state machine:
+     - any unread                    → "N new push(es)", click → oldest unread
+     - none, last header still below → "Scroll to last", click → last card
+     - none, last header reached     → hidden */
+  function updatePill() {
+    const n = unreadIds.size;
+    if (n > 0) {
+      newPillEl.hidden = false;
+      newPillEl.dataset.mode = "unread";
+      newPillText.textContent =
+        n + " new push" + (n === 1 ? "" : "es");
+    } else if (lastCardHeaderBelowViewport()) {
+      newPillEl.hidden = false;
+      newPillEl.dataset.mode = "scroll";
+      newPillText.textContent = "Scroll to last";
+    } else {
+      newPillEl.hidden = true;
+      delete newPillEl.dataset.mode;
+    }
+  }
+
+  function scrollToFirstUnread(smooth) {
+    const first = [...unreadIds][0]; // Set preserves insertion order
+    if (!first) {
+      scrollToLatestCard(smooth);
+      return;
+    }
+    const card = document.getElementById("push-" + first);
+    if (!card) {
+      scrollToLatestCard(smooth);
+      return;
+    }
+    card.scrollIntoView({
+      behavior: smooth ? "smooth" : "auto",
+      block: "start",
+    });
+  }
+
+  newPillEl.addEventListener("click", () => {
+    if (newPillEl.dataset.mode === "unread") {
+      scrollToFirstUnread(true);
+    } else {
+      scrollToLatestCard(true);
+    }
+  });
+
+  window.addEventListener("scroll", updatePill, { passive: true });
+  window.addEventListener("resize", updatePill);
+
+  // Clearing is driven by IntersectionObserver, not scroll events —
+  // resize-anchoring scrolls used to spuriously reset the counter.
+
+  /* ============================================================
+     Hydrate + SSE
+     ============================================================ */
+
+  async function hydrate() {
+    try {
+      const r = await fetch("/s/" + sessionId + "/state");
+      const view = await r.json();
+      setPrunedCount((view.meta && view.meta.prunedCount) || 0);
+      cardsEl.innerHTML = "";
+      iframes.clear();
+      setPushCount(0);
+      for (const p of view.pushes || []) {
+        appendPush(p, { fresh: false });
+      }
+      requestAnimationFrame(() => {
+        scrollToBottom(false);
+        updatePill();
+      });
+    } catch (err) {
+      console.error("[easel] hydrate failed", err);
+    }
+  }
+
+  function connectSse() {
+    const es = new EventSource("/s/" + sessionId + "/events");
+    es.addEventListener("hello", (e) => {
+      updateLive(true);
+      try {
+        const data = JSON.parse(e.data);
+        if (data && data.config) {
+          applyConfig(data.config, { skipServer: true });
+        }
+      } catch {}
+    });
+    es.addEventListener("config", (e) => {
+      try {
+        const cfg = JSON.parse(e.data);
+        applyConfig(cfg, { skipServer: true });
+      } catch {}
+    });
+    es.addEventListener("remove", (e) => {
+      try {
+        const data = JSON.parse(e.data);
+        if (data && data.pushId) removeCardFromDom(data.pushId);
+      } catch {}
+    });
+    es.addEventListener("push", (e) => {
+      try {
+        const push = JSON.parse(e.data);
+        const { wasNearBottom } = appendPush(push, { fresh: true });
+        if (wasNearBottom) {
+          requestAnimationFrame(() => scrollToLatestCard(true));
+        } else {
+          bumpUnread(push.id);
+        }
+      } catch (err) {
+        console.error("[easel] bad push payload", err);
+      }
+    });
+    es.onerror = () => {
+      updateLive(false);
+      es.close();
+      setTimeout(connectSse, 1500);
+    };
+  }
+
+  /* ============================================================
+     Last-visited tracking + session switcher dropdown
+     ============================================================ */
+
+  function markVisited() {
+    try {
+      const map = JSON.parse(localStorage.getItem(LAST_VISITED_KEY) || "{}");
+      map[sessionId] = Date.now();
+      localStorage.setItem(LAST_VISITED_KEY, JSON.stringify(map));
+    } catch (e) {
+      /* ignore */
+    }
+  }
+
+  function basenameOf(p) {
+    if (!p) return null;
+    const t = String(p).replace(/\/+$/, "");
+    const i = t.lastIndexOf("/");
+    return i >= 0 ? t.slice(i + 1) : t;
+  }
+
+  function relTime(ts) {
+    if (!ts) return "—";
+    const diff = Date.now() - ts;
+    if (diff < 30_000) return "just now";
+    const s = Math.floor(diff / 1000);
+    if (s < 60) return s + "s";
+    const m = Math.floor(s / 60);
+    if (m < 60) return m + "m";
+    const h = Math.floor(m / 60);
+    if (h < 24) return h + "h";
+    return Math.floor(h / 24) + "d";
+  }
+
+  async function loadSessionsForSwitcher() {
+    try {
+      const r = await fetch("/api/sessions");
+      const data = await r.json();
+      renderSwitcher(data.sessions || []);
+    } catch (e) {
+      renderSwitcher([]);
+    }
+  }
+
+  let switcherSessions = [];
+  let switcherQuery = "";
+
+  function renderSwitcher(sessions) {
+    switcherSessions = sessions || [];
+    switcherMenuEl.innerHTML = "";
+
+    // Search box
+    const searchBar = document.createElement("div");
+    searchBar.className = "switcher-search";
+    const search = document.createElement("input");
+    search.type = "search";
+    search.placeholder = "Filter by project or id…";
+    search.value = switcherQuery;
+    search.addEventListener("input", (e) => {
+      switcherQuery = e.target.value;
+      renderSwitcherList();
+    });
+    searchBar.appendChild(search);
+    switcherMenuEl.appendChild(searchBar);
+
+    // Scrollable list
+    const list = document.createElement("div");
+    list.className = "switcher-list";
+    list.id = "switcher-list";
+    switcherMenuEl.appendChild(list);
+
+    // Footer
+    const footerbar = document.createElement("div");
+    footerbar.className = "switcher-footerbar";
+    const allLink = document.createElement("a");
+    allLink.href = "/";
+    allLink.className = "switcher-footer";
+    allLink.textContent = "View all sessions →";
+    footerbar.appendChild(allLink);
+    switcherMenuEl.appendChild(footerbar);
+
+    renderSwitcherList();
+    // Focus the search input when the menu opens.
+    setTimeout(() => search.focus(), 30);
+  }
+
+  function renderSwitcherList() {
+    const list = switcherMenuEl.querySelector("#switcher-list");
+    if (!list) return;
+    list.innerHTML = "";
+
+    let lastVisited = {};
+    try {
+      lastVisited = JSON.parse(localStorage.getItem(LAST_VISITED_KEY) || "{}");
+    } catch {}
+
+    const q = switcherQuery.trim().toLowerCase();
+    const filtered = switcherSessions.filter((s) => {
+      if (!q) return true;
+      const name = (basenameOf(s.cwd) || "").toLowerCase();
+      return name.includes(q) || s.id.toLowerCase().includes(q);
+    });
+
+    if (filtered.length === 0) {
+      const empty = document.createElement("div");
+      empty.className = "switcher-footer";
+      empty.textContent = q ? "No sessions match." : "No sessions registered.";
+      list.appendChild(empty);
+      return;
+    }
+
+    for (const s of filtered) {
+      const item = document.createElement("a");
+      item.className = "switcher-item";
+      if (s.id === sessionId) item.classList.add("current");
+      item.href = "/s/" + encodeURIComponent(s.id);
+
+      const project = document.createElement("span");
+      project.className = "project";
+      project.textContent = s.label || basenameOf(s.cwd) || s.id.slice(0, 8);
+      project.title = [s.label, s.cwd, s.id].filter(Boolean).join(" · ");
+      item.appendChild(project);
+
+      const count = document.createElement("span");
+      count.className = "count";
+      count.textContent = s.pushCount + " · " + relTime(s.lastActivity);
+      item.appendChild(count);
+
+      if (
+        s.id !== sessionId &&
+        s.pushCount > 0 &&
+        s.lastActivity > (lastVisited[s.id] || 0)
+      ) {
+        const dot = document.createElement("span");
+        dot.className = "unread-dot";
+        item.appendChild(dot);
+      }
+
+      // Keep the brand label in sync with the current session.
+      if (s.id === sessionId && projectLabelEl && !projectLabelEl.dataset.editing) {
+        projectLabelEl.textContent =
+          s.label || basenameOf(s.cwd) || "easel";
+        projectLabelEl.dataset.cwd = s.cwd || "";
+        projectLabelEl.dataset.hasLabel = s.label ? "true" : "false";
+      }
+
+      // Delete button (skip on the current session — can't delete the one you're viewing)
+      if (s.id !== sessionId) {
+        const del = document.createElement("button");
+        del.className = "switcher-del";
+        del.type = "button";
+        del.title = "Delete this session";
+        del.setAttribute("aria-label", "Delete session");
+        del.innerHTML =
+          '<svg viewBox="0 0 16 16" width="11" height="11" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M3.5 4h9M6 4V2.5h4V4M5 4l.5 9a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1L11 4"/></svg>';
+        del.addEventListener("click", async (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          const name = s.label || basenameOf(s.cwd) || s.id.slice(0, 8);
+          if (!window.confirm(`Delete session "${name}" and all its pushes?`)) return;
+          await fetch("/api/sessions/" + encodeURIComponent(s.id), {
+            method: "DELETE",
+          });
+          loadSessionsForSwitcher();
+        });
+        item.appendChild(del);
+      }
+
+      list.appendChild(item);
+    }
+  }
+
+  switcherBtnEl.addEventListener("click", (e) => {
+    e.stopPropagation();
+    const open = switcherMenuEl.hidden;
+    if (open) {
+      switcherMenuEl.hidden = false;
+      switcherBtnEl.setAttribute("aria-expanded", "true");
+      loadSessionsForSwitcher();
+    } else {
+      switcherMenuEl.hidden = true;
+      switcherBtnEl.setAttribute("aria-expanded", "false");
+    }
+  });
+
+  document.addEventListener("click", (e) => {
+    if (!switcherMenuEl.hidden && !switcherMenuEl.contains(e.target) && e.target !== switcherBtnEl) {
+      closeSwitcher();
+    }
+  });
+
+  // Clicks inside sandboxed iframes don't bubble — but they steal window
+  // focus. When that happens, close the menu.
+  window.addEventListener("blur", () => {
+    if (!switcherMenuEl.hidden) {
+      // Defer one tick so the focus change settles and the activeElement check
+      // is reliable across browsers.
+      setTimeout(() => {
+        if (document.activeElement && document.activeElement.tagName === "IFRAME") {
+          closeSwitcher();
+        }
+      }, 0);
+    }
+  });
+
+  function closeSwitcher() {
+    switcherMenuEl.hidden = true;
+    switcherBtnEl.setAttribute("aria-expanded", "false");
+  }
+
+  /* === Click-to-edit session label in the topbar === */
+  if (projectLabelEl) {
+    projectLabelEl.style.cursor = "text";
+    projectLabelEl.title = "Click to rename this session";
+    projectLabelEl.addEventListener("click", startEditingLabel);
+  }
+
+  function startEditingLabel() {
+    if (projectLabelEl.dataset.editing) return;
+    projectLabelEl.dataset.editing = "true";
+    const current =
+      projectLabelEl.dataset.hasLabel === "true"
+        ? projectLabelEl.textContent
+        : "";
+    const input = document.createElement("input");
+    input.type = "text";
+    input.className = "project-label-input";
+    input.value = current;
+    input.placeholder = basenameOf(projectLabelEl.dataset.cwd) || "Name this session…";
+    input.maxLength = 80;
+
+    projectLabelEl.replaceWith(input);
+    input.focus();
+    input.select();
+
+    let done = false;
+    const finish = async (save) => {
+      if (done) return;
+      done = true;
+      input.removeEventListener("blur", onBlur);
+      input.removeEventListener("keydown", onKeydown);
+      const newLabel = save ? input.value.trim() : current;
+      input.replaceWith(projectLabelEl);
+      delete projectLabelEl.dataset.editing;
+      projectLabelEl.textContent =
+        newLabel || basenameOf(projectLabelEl.dataset.cwd) || "easel";
+      projectLabelEl.dataset.hasLabel = newLabel ? "true" : "false";
+      if (save) {
+        try {
+          await fetch("/api/register", {
+            method: "POST",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ sessionId, label: newLabel }),
+          });
+        } catch {}
+        loadSessionsForSwitcher();
+      }
+    };
+    const onBlur = () => finish(true);
+    const onKeydown = (e) => {
+      if (e.key === "Enter") finish(true);
+      if (e.key === "Escape") finish(false);
+    };
+    input.addEventListener("blur", onBlur);
+    input.addEventListener("keydown", onKeydown);
+  }
+
+  markVisited();
+  window.addEventListener("focus", markVisited);
+  setInterval(markVisited, 15_000);
+  loadSessionsForSwitcher();
+  setInterval(loadSessionsForSwitcher, 8_000);
+
+  hydrate().then(connectSse);
+})();