@drip-apex/sdk 0.1.0

package/src/editor/view.ts

@@ -0,0 +1,1395 @@
+import { EDITOR_DEVICE_FRAME_NAME } from "../editor-bootstrap";
+import type { Mutation } from "../types";
+import { DevicePreview, type DevicePreviewSize } from "./device-preview";
+import { ElementPicker } from "./picker";
+import { elementLabel } from "./selector";
+import type { EditorController } from "./controller";
+import {
+  redactEditorContextUrl,
+  runEditorOperatorTurn,
+  type EditorOperatorMessage,
+} from "./operator";
+import { cloneArtifacts, type EditorArtifacts, type EditorState } from "./types";
+import { KIT_CSS, esc, icon, operatorMark } from "./view-kit";
+
+const DOCK_WIDTH = 352;
+const RAIL_WIDTH = 52;
+const SESSION_WARN_SECONDS = 300;
+
+const VIEW_CSS = `
+.zone{position:fixed;left:0;top:0;bottom:0;right:${DOCK_WIDTH}px;pointer-events:none}
+.zone.rail{right:${RAIL_WIDTH}px}
+.zone.narrow{right:0}
+.page-border{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 3px rgba(91,41,255,0.75)}
+.select-banner{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:7px 12px;background:var(--purple500);color:#fff;border-radius:999px;border:1px solid rgba(255,255,255,0.25);box-shadow:0 12px 32px rgba(91,41,255,0.45);font-size:12.5px;font-weight:600;white-space:nowrap;pointer-events:auto}
+.select-banner button{border:none;background:rgba(255,255,255,0.16);color:#fff;font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 9px}
+.banners{position:absolute;left:50%;transform:translateX(-50%);display:grid;gap:8px;width:max-content;max-width:calc(100% - 24px);pointer-events:none}
+.banners.lower{top:54px}
+.banners:not(.lower){top:12px}
+.orig-chip{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(10,10,13,0.92);border:1px solid var(--border-px);color:var(--text2);font-size:12px;font-weight:550;white-space:nowrap;pointer-events:auto}
+.orig-chip svg{color:var(--purple300)}
+.orig-chip button{border:none;background:var(--purple-soft);color:var(--purple200);font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 9px}
+
+.dock{position:fixed;right:0;top:0;bottom:0;width:${DOCK_WIDTH}px;background:var(--bg1);border-left:1px solid var(--border-px);display:flex;flex-direction:column;min-height:0;pointer-events:auto}
+.rail-dock{position:fixed;right:0;top:0;bottom:0;width:${RAIL_WIDTH}px;background:var(--bg1);border-left:1px solid var(--border-px);display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0;pointer-events:auto}
+.rail-dock .sep{width:24px;height:1px;background:var(--border)}
+.rail-dock .grow{flex:1}
+
+.id-head{padding:12px 14px 10px;border-bottom:1px solid var(--border);flex-shrink:0}
+.id-row{display:flex;align-items:center;gap:9px}
+.id-meta{flex:1;min-width:0}
+.id-title{font-size:13px;font-weight:600;letter-spacing:-0.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.id-sub{font-size:11px;color:var(--text3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.id-chips{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
+.id-chips .grow{flex:1}
+.id-conn{margin-top:8px}
+
+.var-wrap{position:relative}
+.var-btn{display:flex;align-items:center;gap:8px;padding:5px 9px;background:var(--raised);border:1px solid var(--border-hi);border-radius:8px;color:var(--text1);font-size:12.5px;font-weight:550;max-width:190px;pointer-events:auto}
+.var-btn .vid{width:18px;height:18px;border-radius:5px;background:var(--purple-soft);border:1px solid var(--purple-bd);color:var(--purple200);font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
+.var-btn .vname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.var-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:250;width:248px;background:var(--bg1);border:1px solid var(--border-px);border-radius:10px;box-shadow:0 20px 48px rgba(0,0,0,0.55);padding:5px;pointer-events:auto}
+.var-menu .note{font-size:11px;color:var(--text3);padding:6px 9px 4px}
+.var-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 9px;border-radius:7px;border:none;background:transparent;color:var(--text1)}
+.var-item[aria-selected="true"]{background:var(--purple-soft)}
+.var-item .vid{width:20px;height:20px;border-radius:5px;flex-shrink:0;background:var(--raised-hi);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
+.var-item[aria-selected="true"] .vid{background:var(--purple500)}
+.var-item .meta{flex:1;min-width:0}
+.var-item .n{display:block;font-size:12.5px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.var-item .s{display:block;font-size:11px;color:var(--text3)}
+
+.view-row{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
+.view-row .grow{flex:1}
+.undo-redo{display:flex;gap:2px}
+
+.tabs{display:flex;gap:2px;padding:0 8px;border-bottom:1px solid var(--border);flex-shrink:0}
+.tab{display:inline-flex;align-items:center;gap:6px;padding:9px 10px 8px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text3);font-size:12.5px;font-weight:550;margin-bottom:-1px;transition:color 120ms;pointer-events:auto}
+.tab[aria-selected="true"]{color:var(--text1);border-bottom-color:var(--purple400)}
+.tab .count{font-size:10.5px;font-weight:650;background:var(--raised-hi);color:var(--text3);border-radius:999px;padding:1px 6px}
+.tab[aria-selected="true"] .count{background:var(--purple-soft);color:var(--purple200)}
+
+.panel{flex:1;min-height:0;display:flex;flex-direction:column}
+.foot{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--border);flex-shrink:0}
+.foot .grow{flex:1}
+
+/* Operator */
+.op-ctx{padding:10px 14px 8px;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
+.op-ctx .lbl{font-size:11.5px;color:var(--text3)}
+.op-ctx .opt{font-size:11.5px;color:var(--text4)}
+.op-thread{flex:1;overflow-y:auto;min-height:0;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
+.op-empty{margin:auto 0;text-align:center;padding:18px 6px}
+.op-empty .mark{width:42px;height:42px;margin:0 auto 12px;border-radius:12px;background:var(--purple-soft);border:1px solid var(--purple-bd);display:flex;align-items:center;justify-content:center}
+.op-empty .t{font-size:13.5px;font-weight:600;color:var(--text1);margin-bottom:5px}
+.op-empty p{font-size:12.5px;color:var(--text3);line-height:1.6;margin:0 0 14px}
+.op-empty .sugs{display:flex;flex-direction:column;gap:6px;align-items:stretch}
+.sug{font-size:12px;color:var(--text2);background:var(--raised);border:1px solid var(--border);border-radius:8px;padding:7px 11px;text-align:left;pointer-events:auto}
+.msg-user{align-self:flex-end;max-width:88%;display:grid;gap:4px;justify-items:end}
+.msg-user .ref{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;color:var(--purple200);background:var(--purple-soft);border:1px solid var(--purple-bd);border-radius:6px;padding:2px 7px}
+.msg-user .bubble{background:var(--purple500);color:#fff;border-radius:12px 12px 3px 12px;padding:8px 11px;font-size:12.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
+.op-card{align-self:stretch;border-radius:12px;padding:10px 12px}
+.op-card.working{background:var(--inset);border:1px solid var(--border)}
+.op-card.failed{background:rgba(235,82,82,0.08);border:1px solid rgba(235,82,82,0.3)}
+.op-card.done{background:rgba(61,214,140,0.06);border:1px solid rgba(61,214,140,0.28)}
+.op-card .head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;margin-bottom:7px}
+.op-card.working .head{color:var(--text1);margin-bottom:8px}
+.op-card.failed .head{color:var(--negative-soft);margin-bottom:5px}
+.op-card.done .head{color:var(--positive)}
+.op-card .steps{display:grid;gap:7px}
+.op-card .step{display:flex;align-items:center;gap:9px;font-size:12px}
+.op-card .step.done{color:var(--text3)}
+.op-card .step.cur{color:var(--text1)}
+.op-card .step.todo{color:var(--text4)}
+.op-card .step .idle{width:12px;text-align:center;color:var(--text4)}
+.op-card p{font-size:12px;color:var(--text2);line-height:1.55;margin:0}
+.op-card .items{display:grid;gap:6px}
+.op-card .item{font-size:12px;color:var(--text2);display:flex;gap:8px;align-items:baseline}
+.op-card .item .b{flex:1;line-height:1.45}
+.op-card .item .sel{display:block;font-size:10.5px;color:var(--text4);word-break:break-all}
+.op-card .row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
+.op-card .hint{font-size:10.5px;color:var(--text4);margin-top:8px}
+.op-input{padding:10px 14px 12px;border-top:1px solid var(--border);flex-shrink:0}
+.op-input .line{display:flex;gap:8px;align-items:flex-end}
+.op-input textarea{flex:1;min-height:52px;max-height:120px}
+.op-input .send{width:34px;height:34px;flex:0 0 34px;border-radius:8px;background:var(--purple500);color:#fff;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.14);pointer-events:auto}
+.op-input .send:disabled{opacity:0.4}
+.op-input .note{font-size:10.5px;color:var(--text4);margin-top:6px}
+
+/* Code */
+.code-panel{display:flex;flex-direction:column;min-height:0;overflow-y:auto;flex:1}
+.code-head{padding:10px 14px 0;display:flex;align-items:center;gap:8px}
+.code-head .peer{font-size:11px;color:var(--text4)}
+.code-body{padding:12px 14px;display:grid;gap:10px}
+.code-ok{font-size:11.5px;color:var(--text3);display:flex;gap:7px;align-items:center}
+.code-ok svg{color:var(--positive)}
+.js-warn{display:flex;gap:9px;padding:9px 11px;border-radius:9px;background:rgba(250,204,21,0.08);border:1px solid rgba(250,204,21,0.3);font-size:11.5px;line-height:1.55;color:var(--text2)}
+.js-warn svg{color:var(--warning);flex-shrink:0;margin-top:1px}
+.js-warn strong{color:var(--warning);font-weight:600}
+.code-foot{border-top:1px solid var(--border);padding:10px 14px 12px;font-size:11.5px;color:var(--text3);line-height:1.6}
+.code-foot button{border:none;background:none;color:var(--purple200);font-size:11.5px;padding:0;text-decoration:underline;text-underline-offset:2px;pointer-events:auto}
+
+/* Changes */
+.chg-panel{overflow-y:auto;flex:1;min-height:0}
+.chg-head{padding:12px 14px 8px;display:flex;align-items:center;gap:8px}
+.chg-head .t{font-size:13px;font-weight:600;color:var(--text1);flex:1}
+.chg-empty{font-size:12.5px;color:var(--text3);padding:4px 14px 14px;line-height:1.6}
+.chg-list{display:grid;gap:6px;padding:2px 14px 12px}
+.chg-row{display:flex;gap:9px;align-items:flex-start;padding:9px 10px;background:var(--inset);border:1px solid var(--border);border-radius:9px}
+.chg-row .org{margin-top:1px;flex-shrink:0;color:var(--purple300)}
+.chg-row .meta{flex:1;min-width:0}
+.chg-row .l{font-size:12.5px;color:var(--text1);font-weight:550;line-height:1.4;word-break:break-word}
+.chg-row .s{font-size:11px;color:var(--text4);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.chg-art{border-top:1px solid var(--border);padding:10px 14px 12px}
+.chg-art .toggle{display:inline-flex;align-items:center;gap:7px;border:none;background:none;color:var(--text2);font-size:12px;font-weight:550;padding:0;pointer-events:auto}
+.chg-art .json{margin-top:8px;background:var(--inset);border:1px solid var(--border);border-radius:9px;padding:10px 12px;font-size:11px;line-height:1.65;color:var(--text2);white-space:pre-wrap;word-break:break-word;font-variant-numeric:tabular-nums;max-height:280px;overflow:auto}
+.chg-art .note{font-size:11.5px;color:var(--text3);line-height:1.55;margin-top:10px}
+.chg-art .pill-row{margin-top:8px}
+
+/* Boot overlay */
+.boot{position:fixed;inset:0;z-index:400;background:#08080A;display:flex;align-items:center;justify-content:center;pointer-events:auto}
+.boot[hidden]{display:none}
+.boot .box{width:330px;max-width:calc(100vw - 48px)}
+.boot .kicker{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:15px;font-weight:650;letter-spacing:-0.02em}
+.boot .sub{font-size:12.5px;color:var(--text3);margin-bottom:22px}
+.boot .steps{display:grid;gap:12px}
+.boot .step{display:flex;align-items:center;gap:10px;font-size:13px}
+.boot .step.done{color:var(--text3)}
+.boot .step.cur{color:#fff}
+.boot .step.todo{color:var(--text4)}
+.boot .step .idle{width:14px;text-align:center}
+.boot .bar{margin-top:26px;height:3px;border-radius:999px;background:var(--raised-hi);overflow:hidden}
+.boot .bar i{display:block;height:100%;background:var(--purple500);border-radius:999px;transition:width 400ms ease}
+.boot .scope{margin-top:22px;font-size:11.5px;color:var(--text4);line-height:1.6}
+.boot .err{margin-top:18px;font-size:12.5px;color:var(--negative-soft);line-height:1.55}
+
+/* Picker overlay */
+.picker-box{position:fixed;left:0;top:0;border:2px solid var(--purple400);background:rgba(91,41,255,0.08);pointer-events:none;z-index:200}
+.picker-box[data-state="hover"]{border-style:dashed}
+.picker-box[data-state="selected"]{border-style:solid;border-color:var(--purple500)}
+.picker-label{position:fixed;left:0;top:0;padding:3px 8px;border-radius:6px;background:var(--purple500);color:#fff;font-size:11px;font-weight:600;white-space:nowrap;pointer-events:none;z-index:201}
+
+/* Device preview */
+.device{position:fixed;left:0;top:0;bottom:0;right:${DOCK_WIDTH}px;background:var(--bg0);display:flex;align-items:center;justify-content:center;padding:24px;pointer-events:auto;z-index:90}
+.device.narrow{right:0}
+.device[hidden]{display:none}
+.device-shell{display:flex;flex-direction:column;gap:12px;align-items:center;max-width:100%;max-height:100%}
+.device-head{width:min(420px,100%);display:flex;align-items:center;justify-content:space-between;color:var(--text2);font-size:12px}
+.device-frame{border:1px solid var(--border-hi);border-radius:10px;background:#fff;box-shadow:0 24px 64px rgba(0,0,0,0.5);max-width:calc(100% - 8px);max-height:calc(100vh - 140px)}
+.device-fallback{width:390px;max-width:calc(100vw - 48px);padding:16px;background:var(--raised);border:1px solid var(--border-hi);border-radius:10px;color:var(--text2);font-size:12px;line-height:1.6}
+.device-fallback .row{display:flex;gap:8px;margin-top:10px}
+
+/* Narrow viewport: bottom sheet */
+.sheet{position:fixed;left:0;right:0;bottom:0;background:var(--bg1);border-top:1px solid var(--border-px);border-radius:16px 16px 0 0;box-shadow:0 -16px 48px rgba(0,0,0,0.5);display:flex;flex-direction:column;pointer-events:auto;max-height:64vh}
+.sheet .handle{background:none;border:none;padding:8px 0 4px;display:flex;justify-content:center;width:100%;pointer-events:auto}
+.sheet .handle i{width:36px;height:4px;border-radius:999px;background:var(--border-px);display:block}
+.sheet .bar{display:flex;align-items:center;gap:8px;padding:2px 14px 10px;flex-wrap:wrap}
+.sheet .bar .grow{flex:1}
+.sheet .row2{display:flex;align-items:center;gap:8px;padding:0 14px 8px;flex-wrap:wrap}
+`;
+
+type PanelTab = "operator" | "code" | "changes";
+
+type ThreadUserMessage = {
+  id: number;
+  role: "user";
+  text: string;
+  ctxLabel: string | null;
+};
+
+type ThreadOperatorMessage = {
+  id: number;
+  role: "op";
+  phase: "working" | "done" | "failed" | "save-failed";
+  step: number;
+  steps: string[];
+  prompt: string;
+  ctxSelector: string | null;
+  ctxLabel: string | null;
+  preArtifacts: EditorArtifacts;
+  postArtifacts: EditorArtifacts | null;
+  results: Array<{ label: string; target: string }>;
+  error: string | null;
+  undone: boolean;
+  abort: AbortController | null;
+};
+
+type ThreadMessage = ThreadUserMessage | ThreadOperatorMessage;
+
+type ChangeEntry = {
+  kind: "mutation" | "css" | "js";
+  selector: string | null;
+  mutationIndex: number | null;
+  label: string;
+  target: string;
+  origin: "operator" | "code";
+  risky: boolean;
+};
+
+type SaveChipStatus = "unsaved" | "saving" | "saved" | "failed" | "conflict" | "loading";
+
+const OPERATOR_SUGGESTIONS = [
+  "Make the announcement bar mention free returns",
+  "Add a trust message below the buy button",
+  "Make this section more compact",
+];
+
+function mutationLabel(mutation: Mutation): string {
+  const target = elementNameFromSelector(mutation.selector);
+  switch (mutation.action) {
+    case "text":
+    case "setText":
+      return `${target}: “${(mutation.text ?? "").trim().slice(0, 80)}”`;
+    case "html":
+      return `${target}: content replaced`;
+    case "attribute": {
+      const names = [
+        ...(mutation.attribute ? [mutation.attribute.name] : []),
+        ...Object.keys(mutation.attributes ?? {}),
+      ];
+      if (names.includes("src")) return `${target}: image swapped`;
+      return `${target}: ${names.join(", ") || "attribute"} changed`;
+    }
+    case "style":
+    case "setStyle":
+      return `${target}: style changed`;
+    case "remove":
+      return `${target}: removed`;
+    case "insertBefore":
+    case "insertAfter":
+      return `${target}: content added`;
+    default:
+      return `${target}: updated`;
+  }
+}
+
+function elementNameFromSelector(selector: string): string {
+  const last = selector.split(/[\s>+~]+/).filter(Boolean).pop() ?? selector;
+  return last.slice(0, 60) || "Element";
+}
+
+function saveChipStatus(state: EditorState): SaveChipStatus {
+  if (state.saveState === "saving") return "saving";
+  if (state.saveState === "saved") return "saved";
+  if (state.saveState === "conflict") return "conflict";
+  if (state.saveState === "error") return "failed";
+  if (!state.variation) return "loading";
+  return "unsaved";
+}
+
+function saveChipHtml(state: EditorState): string {
+  const status = saveChipStatus(state);
+  const label =
+    status === "unsaved" ? "Unsaved changes"
+    : status === "saving" ? "Saving…"
+    : status === "saved" ? "Saved"
+    : status === "failed" ? "Save failed"
+    : status === "conflict" ? "Conflict"
+    : "Loading draft…";
+  const iconHtml =
+    status === "saving" || status === "loading" ? icon("refresh", 12, 'class="spin"')
+    : status === "saved" ? icon("check", 12)
+    : status === "unsaved" ? icon("dot", 12)
+    : icon("alert", 12);
+  const retry = status === "failed"
+    ? `<button type="button" class="retry" data-action="retry-save">Retry</button>`
+    : "";
+  const chipClass = status === "loading" ? "saving" : status;
+  return `<span class="save-chip ${chipClass}" role="status" aria-live="polite">${iconHtml}${label}${retry}</span>`;
+}
+
+function changeListFromState(state: EditorState): ChangeEntry[] {
+  const items: ChangeEntry[] = state.artifacts.mutations.map((mutation, mutationIndex) => ({
+    kind: "mutation" as const,
+    selector: mutation.selector,
+    mutationIndex,
+    label: mutationLabel(mutation),
+    target: mutation.selector,
+    origin: "operator" as const,
+    risky: false,
+  }));
+  if (state.artifacts.customCss.trim()) {
+    items.push({
+      kind: "css",
+      selector: null,
+      mutationIndex: null,
+      label: "Custom CSS",
+      target: `${state.artifacts.customCss.trim().split("\n").length} lines`,
+      origin: "code",
+      risky: false,
+    });
+  }
+  if (state.artifacts.customJs.trim()) {
+    items.push({
+      kind: "js",
+      selector: null,
+      mutationIndex: null,
+      label: "Custom JavaScript",
+      target: "runs when the variation loads",
+      origin: "code",
+      risky: state.reloadRequired,
+    });
+  }
+  return items;
+}
+
+function describeRunChanges(
+  before: EditorArtifacts,
+  after: EditorArtifacts,
+): Array<{ label: string; target: string }> {
+  const beforeKeys = new Set(
+    before.mutations.map((mutation) => JSON.stringify(mutation)),
+  );
+  const results = after.mutations
+    .filter((mutation) => !beforeKeys.has(JSON.stringify(mutation)))
+    .map((mutation) => ({
+      label: mutationLabel(mutation),
+      target: mutation.selector,
+    }));
+  if (after.customCss.trim() !== before.customCss.trim()) {
+    results.push({ label: "Custom CSS updated", target: "variation stylesheet" });
+  }
+  if (after.customJs.trim() !== before.customJs.trim()) {
+    results.push({ label: "Custom JavaScript updated", target: "variation script" });
+  }
+  return results;
+}
+
+function formatMinutes(seconds: number): string {
+  const m = Math.floor(seconds / 60);
+  const s = Math.max(0, Math.floor(seconds % 60));
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+
+export type EditorView = { destroy(): void };
+
+export function mountEditorView(
+  shadow: ShadowRoot,
+  controller: EditorController,
+): EditorView {
+  const style = document.createElement("style");
+  style.textContent = KIT_CSS + VIEW_CSS;
+  const chrome = document.createElement("div");
+  const zone = document.createElement("div");
+  zone.className = "zone";
+  const box = document.createElement("div");
+  box.className = "picker-box";
+  box.hidden = true;
+  const label = document.createElement("div");
+  label.className = "picker-label";
+  label.hidden = true;
+  const device = document.createElement("div");
+  device.className = "device";
+  device.hidden = true;
+  const boot = document.createElement("div");
+  boot.className = "boot";
+  shadow.append(style, zone, chrome, box, label, device, boot);
+
+  const session = controller.session;
+  const targetHost = (() => {
+    try {
+      return new URL(session.targetUrl).host;
+    } catch {
+      return session.targetOrigin.replace(/^https?:\/\//, "");
+    }
+  })();
+  const targetPath = (() => {
+    try {
+      const url = new URL(session.targetUrl);
+      return url.pathname + url.search;
+    } catch {
+      return null;
+    }
+  })();
+  const experimentTitle = session.experimentName?.trim() || "On-site editor";
+  const dashboardVariationUrl = (variationId: string) =>
+    `${controller.apiOrigin}/tests/${encodeURIComponent(session.experimentId)}/variations/${encodeURIComponent(variationId)}`;
+  const sessionSecondsLeft = () =>
+    Math.max(0, Math.floor((Date.parse(session.expiresAt) - Date.now()) / 1000));
+
+  // ── view-local state ──────────────────────────────────────────────────
+  let latestState = controller.getState();
+  let panelTab: PanelTab = "operator";
+  let codeLang: "css" | "js" = "css";
+  let collapsed = false;
+  let sheetOpen = false;
+  let narrow = false;
+  let varMenuOpen = false;
+  let viewMode: "variation" | "original" = "variation";
+  let ctxSelector: string | null = latestState.selectedSelector;
+  let ctxLabel: string | null = latestState.selectedElement
+    ? elementLabel(latestState.selectedElement)
+    : latestState.selectedSelector;
+  let devicePick: "desktop" | "tablet" | "mobile" = "desktop";
+  let conn: "connected" | "offline" = navigator.onLine === false ? "offline" : "connected";
+  let banner: "unsupported" | "spanav" | null = null;
+  let spaDismissed = false;
+  let modal: "stop" | "expired" | null = null;
+  let artifactOpen = false;
+  let operatorDraft = "";
+  let operatorBusy = false;
+  let operatorRunPromise: Promise<void> | null = null;
+  let variationSwitch = 0;
+  let lastSavedAt: number | null = null;
+  let sessionWarn = sessionSecondsLeft() <= SESSION_WARN_SECONDS;
+  let bootDone = false;
+  let messageId = 0;
+  const thread: ThreadMessage[] = [];
+  const operatorConversation: EditorOperatorMessage[] = [];
+
+  const media = typeof window.matchMedia === "function"
+    ? window.matchMedia("(max-width: 759px)")
+    : null;
+  narrow = media?.matches ?? false;
+
+  const devicePreview = new DevicePreview(
+    createDeviceFrame(),
+    (deviceState) => {
+      controller.setDeviceState(deviceState);
+    },
+  );
+  controller.attachDevicePreview(devicePreview);
+
+  function createDeviceFrame(): HTMLIFrameElement {
+    device.innerHTML = `<div class="device-shell">
+      <div class="device-head"><span class="d-title">Device preview</span><button type="button" class="iconbtn" data-action="device-close" aria-label="Close device preview">${icon("x", 13)}</button></div>
+      <iframe class="device-frame" name="${EDITOR_DEVICE_FRAME_NAME}" title="Store device preview"></iframe>
+      <div class="device-fallback" hidden>The store blocks device framing. Open this draft on a mobile device or use your browser's device mode.<div class="row"><button type="button" class="btn ghost sm" data-action="device-copy">Copy current URL</button></div></div>
+    </div>`;
+    return device.querySelector("iframe")!;
+  }
+
+  const frame = device.querySelector("iframe")!;
+  const fallback = device.querySelector<HTMLElement>(".device-fallback")!;
+
+  const picker = new ElementPicker(
+    { box, label },
+    (element, selector) => {
+      controller.selectElement(element, selector);
+      picker.setSelected(element);
+      ctxSelector = selector;
+      ctxLabel = elementLabel(element);
+      panelTab = "operator";
+      if (narrow) sheetOpen = true;
+      render();
+    },
+    (active) => {
+      controller.setPickerActive(active);
+      render();
+    },
+    () => {
+      banner = "unsupported";
+      render();
+    },
+  );
+
+  // ── html builders ─────────────────────────────────────────────────────
+  const draftPill = (compact: boolean) =>
+    `<span class="draft-pill">${icon("eye", 11)}${compact ? "Draft" : "Draft — not visible to shoppers"}</span>`;
+
+  const connChip = () =>
+    conn === "offline"
+      ? `<span class="conn-chip offline" role="status"><span class="dot err"><i></i><b></b></span>Offline — reconnecting…</span>`
+      : "";
+
+  const sessionNoteHtml = () => {
+    const left = sessionSecondsLeft();
+    if (left <= SESSION_WARN_SECONDS) {
+      return `<span class="session-chip" title="Editing session time remaining">${icon("clock", 12)}<span data-session-text>Session ends in ${formatMinutes(left)}</span><button type="button" class="extend" data-action="extend-session">Extend</button></span>`;
+    }
+    return `<span class="session-note" title="Editing session time remaining" data-session-text>Session · ${Math.floor(left / 60)} min left</span>`;
+  };
+
+  const variationSwitcherHtml = (compact: boolean) => {
+    const current = latestState.variation;
+    const currentName = current?.name || "Variation";
+    const initial = (currentName.trim()[0] || "V").toUpperCase();
+    const menu = varMenuOpen
+      ? `<div class="var-menu ee-in" role="listbox" aria-label="Eligible variations">
+          <div class="note">Switching keeps your saved draft — nothing is lost.</div>
+          ${session.variations.map((variation) => {
+            const on = variation.id === current?.id;
+            const name = variation.name || variation.slug || "Variation";
+            const vInitial = (name.trim()[0] || "V").toUpperCase();
+            return `<button type="button" class="var-item" role="option" aria-selected="${on}" data-action="variation-pick" data-variation="${esc(variation.id)}">
+              <span class="vid" aria-hidden="true">${esc(vInitial)}</span>
+              <span class="meta"><span class="n">${esc(name)}</span><span class="s">${on ? `${changeListFromState(latestState).length} change${changeListFromState(latestState).length === 1 ? "" : "s"} in draft` : "Draft"}</span></span>
+              ${on ? icon("check", 13) : ""}
+            </button>`;
+          }).join("")}
+        </div>`
+      : "";
+    return `<div class="var-wrap">
+      <button type="button" class="var-btn" data-action="variation-open" aria-haspopup="listbox" aria-expanded="${varMenuOpen}" aria-label="Variation: ${esc(currentName)}. Switch variation">
+        <span class="vid" aria-hidden="true">${esc(initial)}</span>
+        ${compact ? "" : `<span class="vname">${esc(currentName)}</span>`}
+        ${icon("chevD", 12)}
+      </button>
+      ${menu}
+    </div>`;
+  };
+
+  const compareSegHtml = () => {
+    const variationName = latestState.variation?.name || "Variation";
+    return `<div class="seg" role="radiogroup" aria-label="Compare original and variation">
+      <button type="button" role="radio" aria-checked="${viewMode === "original"}" data-action="compare" data-view="original">Original</button>
+      <button type="button" role="radio" aria-checked="${viewMode === "variation"}" data-action="compare" data-view="variation">${esc(variationName)}</button>
+    </div>`;
+  };
+
+  const deviceSegHtml = () => `<div class="seg" role="radiogroup" aria-label="Preview viewport">
+    <button type="button" class="sm" role="radio" aria-checked="${devicePick === "desktop"}" data-action="device" data-device="desktop" title="Desktop preview" aria-label="Desktop preview">${icon("monitor", 13)}</button>
+    <button type="button" class="sm" role="radio" aria-checked="${devicePick === "tablet"}" data-action="device" data-device="tablet" title="Tablet preview — 768px" aria-label="Tablet preview, 768 pixels">${icon("tablet", 13)}</button>
+    <button type="button" class="sm" role="radio" aria-checked="${devicePick === "mobile"}" data-action="device" data-device="mobile" title="Mobile preview — 390px" aria-label="Mobile preview, 390 pixels">${icon("phone", 13)}</button>
+  </div>`;
+
+  const undoRedoHtml = () => `<div class="undo-redo">
+    <button type="button" class="iconbtn" data-action="undo" aria-label="Undo" title="Undo" ${latestState.canUndo ? "" : "disabled"}>${icon("undo", 15)}</button>
+    <button type="button" class="iconbtn" data-action="redo" aria-label="Redo" title="Redo" ${latestState.canRedo ? "" : "disabled"}>${icon("redo", 15)}</button>
+  </div>`;
+
+  const tabsHtml = () => {
+    const count = changeListFromState(latestState).length;
+    const tab = (id: PanelTab, labelText: string, iconHtml: string, badge?: number) =>
+      `<button type="button" class="tab" role="tab" aria-selected="${panelTab === id}" data-action="tab" data-tab="${id}">${iconHtml}${labelText}${badge ? `<span class="count">${badge}</span>` : ""}</button>`;
+    return `<div class="tabs" role="tablist" aria-label="Editor panels">
+      ${tab("operator", "Operator", operatorMark(12, panelTab === "operator" ? "#fff" : "rgba(255,255,255,0.55)"))}
+      ${tab("code", "Code", icon("braces", 13))}
+      ${tab("changes", "Changes", icon("history", 13), count)}
+    </div>`;
+  };
+
+  const ctxChipHtml = (inThread: boolean, labelText: string) =>
+    `<span class="ctx-chip">${icon("cursorBox", 12)}<span class="name">${esc(labelText)}</span>${inThread ? "" : `<button type="button" class="replace" data-action="ctx-replace" aria-label="Replace selected element">Replace</button><button type="button" class="clear" data-action="ctx-clear" aria-label="Clear selected element">${icon("x", 11)}</button>`}</span>`;
+
+  const operatorPanelHtml = () => {
+    const pickerActive = latestState.pickerActive;
+    const ctxBar = ctxSelector && ctxLabel
+      ? `<span class="lbl">Talking about</span>${ctxChipHtml(false, ctxLabel)}`
+      : `<button type="button" class="btn sm ${pickerActive ? "primary" : "soft"}" data-action="inspect-toggle">${icon("pointer", 13)}${pickerActive ? "Click something on the page…" : "Point at an element"}</button><span class="opt">optional — you can also just describe the change</span>`;
+
+    const empty = thread.length === 0;
+    const emptyHtml = `<div class="op-empty">
+      <div class="mark" aria-hidden="true">${operatorMark(20)}</div>
+      <div class="t">What should change on this page?</div>
+      <p>Point at an element or just describe it. Operator makes the change on the draft — you see it on the real page immediately.</p>
+      <div class="sugs">${OPERATOR_SUGGESTIONS.map((suggestion) => `<button type="button" class="sug" data-action="suggestion">${esc(suggestion)}</button>`).join("")}</div>
+    </div>`;
+
+    const messages = thread.map((message) => {
+      if (message.role === "user") {
+        return `<div class="msg-user">${message.ctxLabel ? `<span class="ref">${icon("cursorBox", 10)} ${esc(message.ctxLabel)}</span>` : ""}<div class="bubble">${esc(message.text)}</div></div>`;
+      }
+      if (message.phase === "working") {
+        return `<div class="op-card working ee-in">
+          <div class="head">${operatorMark(13)}<span>Operator</span>${message.abort ? `<button type="button" class="btn sm bare" style="margin-left:auto;padding:2px 6px" data-action="op-stop" data-msg="${message.id}">${icon("stop", 12)}Stop</button>` : ""}</div>
+          <div class="steps" role="status" aria-live="polite">${message.steps.map((step, index) => {
+            const state = index < message.step ? "done" : index === message.step ? "cur" : "todo";
+            const mark = state === "done" ? icon("check", 12) : state === "cur" ? icon("refresh", 12, 'class="spin"') : `<span class="idle">·</span>`;
+            return `<div class="step ${state}">${mark}${esc(step)}</div>`;
+          }).join("")}</div>
+        </div>`;
+      }
+      if (message.phase === "failed") {
+        return `<div class="op-card failed ee-in" role="alert">
+          <div class="head">${icon("alert", 13)} Operator couldn't finish</div>
+          <p>${esc(message.error ?? "Something went wrong.")} Nothing was changed on the draft.</p>
+          <div class="row"><button type="button" class="btn sm soft" data-action="op-retry" data-msg="${message.id}">${icon("refresh", 12)}Try again</button></div>
+        </div>`;
+      }
+      if (message.phase === "save-failed") {
+        return `<div class="op-card failed ee-in" role="alert">
+          <div class="head">${icon("alert", 13)} Change applied, but not saved</div>
+          <p>${esc(message.error ?? "The draft could not be saved.")} The proposed change remains on this page so you can review it and retry saving.</p>
+          <div class="row"><button type="button" class="btn sm soft" data-action="retry-save" data-msg="${message.id}">${icon("refresh", 12)}Retry save</button><button type="button" class="btn sm bare" data-action="op-all-changes">${icon("history", 12)}Review changes</button></div>
+        </div>`;
+      }
+      const count = message.results.length;
+      const canUndo = canUndoRun(message);
+      return `<div class="op-card done ee-in">
+        <div class="head">${icon("check", 13)} ${count === 1 ? "Made 1 change" : `Made ${count} changes`} — it's on the page now</div>
+        <div class="items">${message.results.map((result) => `<div class="item">${operatorMark(11)}<span class="b">${esc(result.label)}<span class="sel">${esc(result.target)}</span></span></div>`).join("")}</div>
+        <div class="row">
+          <button type="button" class="btn sm ghost" data-action="op-undo-run" data-msg="${message.id}" ${canUndo ? "" : "disabled"}>${icon("undo", 12)}${message.undone ? "Undone" : "Undo this"}</button>
+          <button type="button" class="btn sm bare" data-action="op-all-changes">${icon("history", 12)}All changes</button>
+        </div>
+        <div class="hint">Not right? Just tell Operator what to adjust.</div>
+      </div>`;
+    }).join("");
+
+    const placeholder = ctxLabel
+      ? `What should change about the ${ctxLabel.toLowerCase()}?`
+      : "Describe a change…";
+
+    return `<div class="panel" role="tabpanel" aria-label="Operator">
+      <div class="op-ctx">${ctxBar}</div>
+      <div class="op-thread" data-op-thread>${empty ? emptyHtml : messages}</div>
+      <form class="op-input" data-operator-form>
+        <div class="line">
+          <textarea class="field" data-field="operator-prompt" rows="2" maxlength="30000" placeholder="${esc(placeholder)}" aria-label="Describe the change for Operator" ${operatorBusy ? "disabled" : ""}>${esc(operatorDraft)}</textarea>
+          <button type="submit" class="send" aria-label="Send to Operator" title="Send to Operator" ${operatorBusy || !latestState.variation ? "disabled" : ""}>${icon("send", 15)}</button>
+        </div>
+        <div class="note">Operator edits this draft only — shoppers never see it.</div>
+      </form>
+    </div>`;
+  };
+
+  const codePanelHtml = () => {
+    const cssBody = `<div class="code-body">
+      <label><span class="flabel">CSS on this variation</span>
+        <textarea class="field code" data-field="css" rows="9" spellcheck="false" aria-label="Custom CSS for this variation">${esc(latestState.artifacts.customCss)}</textarea>
+        <span class="fhint">Scoped to the experiment page. Applies live as you type.</span>
+      </label>
+      <div class="code-ok">${icon("check", 12)} CSS changes are fully undoable.</div>
+    </div>`;
+    const jsBody = `<div class="code-body">
+      <label><span class="flabel">JavaScript on this variation</span>
+        <textarea class="field code" data-field="js" rows="9" spellcheck="false" aria-label="Custom JavaScript for this variation">${esc(latestState.artifacts.customJs)}</textarea>
+      </label>
+      <div class="js-warn" role="note">${icon("alert", 14)}<span>JavaScript changes the live page directly and <strong>can't be undone by the editor</strong>. Undo removes it from the draft; close and relaunch the editor to fully reset the page.</span></div>
+      <div style="display:flex;gap:8px">
+        <button type="button" class="btn soft" data-action="run-js">${icon("play", 13)}Run on page</button>
+      </div>
+      ${latestState.reloadRequired ? `<div class="code-ok" style="color:var(--warning)">${icon("alert", 12, 'style="color:var(--warning)"')} JavaScript ran on this page. Relaunch the editor to fully reset it.</div>` : ""}
+    </div>`;
+    return `<div class="code-panel" role="tabpanel" aria-label="Code">
+      <div class="code-head">
+        <div class="seg" role="radiogroup" aria-label="Code language">
+          <button type="button" role="radio" aria-checked="${codeLang === "css"}" data-action="code-lang" data-lang="css">${icon("braces", 13)}CSS</button>
+          <button type="button" role="radio" aria-checked="${codeLang === "js"}" data-action="code-lang" data-lang="js">${icon("code", 13)}JavaScript</button>
+        </div>
+        <span class="peer">works without Operator</span>
+      </div>
+      ${codeLang === "css" ? cssBody : jsBody}
+      <div class="code-foot">Code and Operator write to the same draft. Operator's changes appear as artifact operations you can inspect under <button type="button" data-action="view-artifact">Changes → View artifact</button>. Full code authoring also lives in the variation workspace in Apex.</div>
+    </div>`;
+  };
+
+  const changesPanelHtml = () => {
+    const items = changeListFromState(latestState);
+    const rows = items.map((item, index) => `<div class="chg-row">
+      <span class="org" title="${item.origin === "operator" ? "Made by Operator" : "Custom code"}">${item.origin === "operator" ? operatorMark(13) : icon(item.kind === "css" ? "braces" : "code", 13)}</span>
+      <div class="meta">
+        <div class="l">${esc(item.label)}</div>
+        <div class="s">${esc(item.target)} · ${item.origin === "operator" ? "Operator" : "code"}${item.risky ? " · relaunch the editor to fully revert" : ""}</div>
+      </div>
+      <button type="button" class="iconbtn xs" data-action="chg-remove" data-kind="${item.kind}" data-index="${item.mutationIndex ?? index}" aria-label="Remove change: ${esc(item.label)}">${icon("x", 11)}</button>
+    </div>`).join("");
+    const artifactJson = JSON.stringify(
+      {
+        variation: latestState.variation?.name ?? null,
+        artifactHash: latestState.variation?.artifactHash ?? null,
+        operations: latestState.artifacts.mutations,
+        customCss: latestState.artifacts.customCss || null,
+        customJs: latestState.artifacts.customJs || null,
+      },
+      null,
+      2,
+    );
+    return `<div class="chg-panel" role="tabpanel" aria-label="Changes">
+      <div class="chg-head"><span class="t">${items.length} change${items.length === 1 ? "" : "s"} in this draft</span>${saveChipHtml(latestState)}</div>
+      ${items.length === 0
+        ? `<p class="chg-empty">No changes yet. Ask Operator, or add CSS or JavaScript in Code.</p>`
+        : `<div class="chg-list">${rows}</div>`}
+      <div class="chg-art">
+        <button type="button" class="toggle" data-action="artifact-toggle" aria-expanded="${artifactOpen}">${icon(artifactOpen ? "chevD" : "chevR", 12)}View artifact (JSON)</button>
+        ${artifactOpen ? `<div class="json ee-in" aria-label="Variation artifact JSON">${esc(artifactJson)}</div>` : ""}
+        <div class="note">Drafts save automatically. Nothing is shown to shoppers until the experiment is launched from Apex.</div>
+        <div class="pill-row">${draftPill(false)}</div>
+      </div>
+    </div>`;
+  };
+
+  const panelBodyHtml = () =>
+    panelTab === "operator" ? operatorPanelHtml()
+    : panelTab === "code" ? codePanelHtml()
+    : changesPanelHtml();
+
+  const dockHtml = () => {
+    if (collapsed) {
+      return `<div class="rail-dock">
+        ${operatorMark(16)}
+        <button type="button" class="iconbtn" data-action="expand" aria-label="Expand editor panel">${icon("collapse", 15)}</button>
+        <div class="sep"></div>
+        <button type="button" class="iconbtn ${latestState.pickerActive ? "active" : ""}" data-action="rail-inspect" aria-label="Point at an element">${icon("pointer", 15)}</button>
+        <div class="grow"></div>
+        <span title="Connection: ${conn}"><span class="dot ${conn === "connected" ? "ok" : "err"}"><i></i>${conn === "connected" ? "" : "<b></b>"}</span></span>
+      </div>`;
+    }
+    return `<div class="dock">
+      <div class="id-head">
+        <div class="id-row">
+          ${operatorMark(18)}
+          <div class="id-meta">
+            <div class="id-title" title="${esc(experimentTitle)}">${esc(experimentTitle)}</div>
+            <div class="id-sub">On your store · ${esc(targetHost)}</div>
+          </div>
+          <button type="button" class="iconbtn" data-action="collapse" aria-label="Collapse editor panel">${icon("collapse", 15)}</button>
+        </div>
+        <div class="id-chips">
+          ${variationSwitcherHtml(false)}
+          ${draftPill(true)}
+          <span class="grow"></span>
+          ${saveChipHtml(latestState)}
+        </div>
+        ${conn !== "connected" ? `<div class="id-conn">${connChip()}</div>` : ""}
+      </div>
+      <div class="view-row">
+        ${undoRedoHtml()}
+        ${compareSegHtml()}
+        <span class="grow"></span>
+        ${deviceSegHtml()}
+      </div>
+      ${tabsHtml()}
+      ${panelBodyHtml()}
+      <div class="foot">
+        ${sessionNoteHtml()}
+        <span class="grow"></span>
+        <button type="button" class="btn primary" data-action="done">${icon("check", 13)}Done</button>
+      </div>
+    </div>`;
+  };
+
+  const sheetHtml = () => {
+    const barRow = `<div class="bar">
+      ${operatorMark(14)}
+      ${variationSwitcherHtml(true)}
+      ${draftPill(true)}
+      <span class="grow"></span>
+      ${saveChipHtml(latestState)}
+    </div>`;
+    if (!sheetOpen) {
+      return `<div class="sheet">
+        <button type="button" class="handle" data-action="sheet-toggle" aria-label="Expand editor" aria-expanded="false"><i></i></button>
+        ${barRow}
+      </div>`;
+    }
+    return `<div class="sheet">
+      <button type="button" class="handle" data-action="sheet-toggle" aria-label="Collapse editor" aria-expanded="true"><i></i></button>
+      ${barRow}
+      <div class="row2">
+        ${undoRedoHtml()}
+        ${compareSegHtml()}
+        ${sessionNoteHtml()}
+        <span class="grow"></span>
+        <button type="button" class="btn primary sm" data-action="done">${icon("check", 12)}Done</button>
+      </div>
+      ${tabsHtml()}
+      ${panelBodyHtml()}
+    </div>`;
+  };
+
+  const zoneHtml = () => {
+    const selectMode = latestState.pickerActive;
+    const banners: string[] = [];
+    if (banner === "unsupported") {
+      banners.push(`<div class="banner warn ee-in" role="status">${icon("alert", 14)}<span class="body">That element can't be edited here. Point at an element on the storefront page instead.</span><button type="button" class="btn sm ghost" data-action="banner-dismiss">OK</button></div>`);
+    }
+    if (banner === "spanav") {
+      banners.push(`<div class="banner info ee-in" role="status">${icon("globe", 14)}<span class="body">You navigated to ${esc(location.pathname + location.search)}. This variation targets ${esc(targetPath || "")}, so changes are paused until you return.</span><button type="button" class="btn sm soft" data-action="spa-back">Back to target page</button><button type="button" class="btn sm ghost" data-action="banner-dismiss">Stay</button></div>`);
+    }
+    if (conn === "offline") {
+      banners.push(`<div class="banner error ee-in" role="status">${icon("wifiOff", 14)}<span class="body">Connection lost. Your edits are kept locally and will save when you're back online.</span></div>`);
+    }
+    return `${selectMode ? `<div class="page-border" aria-hidden="true"></div><div class="select-banner ee-in">${icon("pointer", 13)}Click an element to talk about it<button type="button" data-action="back-to-browsing">Back to browsing · Esc</button></div>` : ""}
+    ${banners.length ? `<div class="banners ${selectMode ? "lower" : ""}">${banners.join("")}</div>` : ""}
+    ${viewMode === "original" ? `<div class="orig-chip ee-in">${icon("eye", 13)}Viewing the original — draft changes hidden<button type="button" data-action="show-variation">Show ${esc(latestState.variation?.name || "variation")}</button></div>` : ""}`;
+  };
+
+  const modalHtml = () => {
+    if (latestState.saveState === "conflict") {
+      return `<div class="modal-backdrop"><div class="modal ee-in" role="dialog" aria-modal="true" aria-label="This draft changed somewhere else">
+        <div class="m-head"><span class="m-icon warn">${icon("alert", 15)}</span><div class="m-title">This draft changed somewhere else</div></div>
+        <div class="m-body">
+          <p>Someone saved a newer version of <strong style="color:var(--text1)">${esc(latestState.variation?.name || "this variation")}</strong> while you were editing — likely from the Apex dashboard.</p>
+          <p>Loading the newer version discards your unsaved edits here. Keeping yours overwrites theirs.</p>
+        </div>
+        <div class="m-actions"><button type="button" class="btn ghost" data-action="conflict-mine">Keep my version</button><button type="button" class="btn primary" data-action="conflict-theirs">Load newer version</button></div>
+      </div></div>`;
+    }
+    if (modal === "expired") {
+      const savedAgo = lastSavedAt
+        ? `${Math.max(1, Math.round((Date.now() - lastSavedAt) / 1000))} seconds ago`
+        : null;
+      return `<div class="modal-backdrop"><div class="modal ee-in" role="dialog" aria-modal="true" aria-label="Editing session ended" style="width:410px">
+        <div class="m-head"><span class="m-icon purple">${icon("clock", 15)}</span><div class="m-title">Editing session ended</div></div>
+        <div class="m-body">
+          <p>Sessions are time-limited for security. ${savedAgo ? `Your draft was saved <strong style="color:var(--text1)">${savedAgo}</strong> — nothing was lost.` : "Your saved draft is safe in Apex."}</p>
+          <p>Start a new session from the variation in Apex.</p>
+        </div>
+        <div class="m-actions"><button type="button" class="btn ghost" data-action="expired-close">Close editor</button><button type="button" class="btn primary" data-action="expired-apex">${icon("external", 13)}Open variation in Apex</button></div>
+      </div></div>`;
+    }
+    if (modal === "stop") {
+      const items = changeListFromState(latestState);
+      return `<div class="modal-backdrop"><div class="modal ee-in" role="dialog" aria-modal="true" aria-label="Done editing?">
+        <div class="m-head"><span class="m-icon ok">${icon("check", 15)}</span><div class="m-title">Done editing?</div></div>
+        <div class="m-body">
+          <p>${items.length} change${items.length === 1 ? "" : "s"} saved to the ${esc(latestState.variation?.name || "variation")} draft. The editor will be removed from the page and the session closed.</p>
+          ${items.length ? `<div style="margin-top:12px;display:grid;gap:5px">${items.slice(0, 4).map((item) => `<div style="font-size:12px;color:var(--text3);display:flex;gap:7px;align-items:center">${icon("check", 11, 'style="color:var(--positive)"')} ${esc(item.label)}</div>`).join("")}</div>` : ""}
+          <p style="font-size:12px;color:var(--text3)">Launching the experiment still happens from Apex — closing here never starts traffic.</p>
+        </div>
+        <div class="m-actions"><button type="button" class="btn ghost" data-action="modal-keep">Keep editing</button><button type="button" class="btn primary" data-action="modal-save-close">${icon("check", 13)}Save and close</button></div>
+      </div></div>`;
+    }
+    return "";
+  };
+
+  const bootHtml = () => {
+    const step = latestState.variation ? 3 : 2;
+    const error = !latestState.variation && latestState.saveState === "error";
+    const ttlMinutes = Math.max(1, Math.round((Date.parse(session.expiresAt) - Date.now()) / 60000));
+    const steps = [
+      "Starting a secure editing session",
+      `Connecting to ${targetHost}`,
+      `Loading the ${latestState.variation?.name || "variation"} draft`,
+    ];
+    return `<div class="box">
+      <div class="kicker">${operatorMark(22)} Apex</div>
+      <div class="sub">On-site editor · ${esc(experimentTitle)}</div>
+      <div class="steps" role="status" aria-live="polite">${steps.map((stepLabel, index) => {
+        const state = index < step ? "done" : index === step ? "cur" : "todo";
+        const mark = state === "done" ? icon("check", 14, 'style="color:var(--positive)"')
+          : state === "cur" ? icon("refresh", 14, 'class="spin" style="color:var(--purple300)"')
+          : `<span class="idle">·</span>`;
+        return `<div class="step ${state}">${mark}${esc(stepLabel)}</div>`;
+      }).join("")}</div>
+      <div class="bar"><i style="width:${Math.min(100, (step / 3) * 100 + 12)}%"></i></div>
+      ${error ? `<div class="err">${esc(latestState.saveMessage || "The draft could not be loaded.")}<div style="margin-top:10px"><button type="button" class="btn soft sm" data-action="boot-retry">Try again</button></div></div>` : ""}
+      <div class="scope">Session is scoped to this experiment and store, and expires after ${ttlMinutes} minutes. Drafts only — shoppers never see your edits.</div>
+    </div>`;
+  };
+
+  // ── render ────────────────────────────────────────────────────────────
+  const render = () => {
+    latestState = controller.getState();
+    if (!bootDone && latestState.variation) bootDone = true;
+    boot.hidden = bootDone;
+    if (!bootDone) boot.innerHTML = bootHtml();
+
+    const active = shadow.activeElement as HTMLInputElement | HTMLTextAreaElement | null;
+    const activeField = active?.dataset?.field;
+    const selection = active && "selectionStart" in active
+      ? [active.selectionStart, active.selectionEnd] as const
+      : null;
+
+    zone.className = `zone${narrow ? " narrow" : collapsed ? " rail" : ""}`;
+    zone.innerHTML = bootDone ? zoneHtml() : "";
+    device.className = `device${narrow ? " narrow" : ""}`;
+    chrome.innerHTML = bootDone
+      ? `${narrow ? sheetHtml() : dockHtml()}${modalHtml()}`
+      : "";
+    (shadow.host as HTMLElement).dataset.apexEditorSheetState = narrow
+      ? (sheetOpen ? "expanded" : "collapsed")
+      : "desktop";
+
+    device.hidden = latestState.deviceState === "closed";
+    frame.hidden = latestState.deviceState === "blocked";
+    fallback.hidden = latestState.deviceState !== "blocked";
+    const deviceTitle = device.querySelector<HTMLElement>(".d-title");
+    if (deviceTitle) {
+      deviceTitle.textContent = devicePick === "tablet"
+        ? "Tablet preview · 768 × 1024"
+        : "Mobile preview · 390 × 844";
+    }
+
+    if (activeField) {
+      const next = chrome.querySelector<HTMLInputElement | HTMLTextAreaElement>(`[data-field="${activeField}"]`);
+      next?.focus();
+      if (next && selection && "setSelectionRange" in next) {
+        next.setSelectionRange(selection[0], selection[1]);
+      }
+    }
+    scrollThread();
+  };
+
+  const scrollThread = () => {
+    const threadElement = chrome.querySelector<HTMLElement>("[data-op-thread]");
+    if (threadElement) threadElement.scrollTop = threadElement.scrollHeight;
+  };
+
+  const unsubscribe = controller.subscribe(() => render());
+
+  const artifactsEqual = (left: EditorArtifacts, right: EditorArtifacts) =>
+    JSON.stringify(left) === JSON.stringify(right);
+
+  function canUndoRun(message: ThreadOperatorMessage): boolean {
+    if (message.phase !== "done" || message.undone || !message.postArtifacts) return false;
+    const latestApplicable = [...thread].reverse().find(
+      (entry): entry is ThreadOperatorMessage => entry.role === "op" && entry.phase === "done" && !entry.undone,
+    );
+    return latestApplicable?.id === message.id &&
+      artifactsEqual(controller.getState().artifacts, message.postArtifacts);
+  }
+
+  // ── operator run ──────────────────────────────────────────────────────
+  const startOperatorRun = (prompt: string, runCtxSelector: string | null, runCtxLabel: string | null) => {
+    if (!latestState.variation || operatorBusy) return;
+    const preArtifacts = cloneArtifacts(controller.getState().artifacts);
+    const referencedElement = runCtxSelector
+      ? {
+          selector: runCtxSelector,
+          tag: latestState.selectedSelector === runCtxSelector
+            ? latestState.selectedElement?.tagName.toLowerCase()
+            : undefined,
+          textPreview: latestState.selectedSelector === runCtxSelector
+            ? (latestState.selectedElement?.textContent ?? "")
+                .replace(/\s+/g, " ")
+                .trim()
+                .slice(0, 200) || undefined
+            : undefined,
+        }
+      : null;
+    const abort = new AbortController();
+    const userMessage: ThreadUserMessage = {
+      id: ++messageId,
+      role: "user",
+      text: prompt,
+      ctxLabel: runCtxLabel,
+    };
+    const opMessage: ThreadOperatorMessage = {
+      id: ++messageId,
+      role: "op",
+      phase: "working",
+      step: 0,
+      steps: [
+        runCtxLabel ? `Inspecting the ${runCtxLabel.toLowerCase()}` : "Reading the page",
+        "Asking Operator to draft the change",
+        "Applying the change to the draft",
+      ],
+      prompt,
+      ctxSelector: runCtxSelector,
+      ctxLabel: runCtxLabel,
+      preArtifacts,
+      postArtifacts: null,
+      results: [],
+      error: null,
+      undone: false,
+      abort,
+    };
+    thread.push(userMessage, opMessage);
+    operatorConversation.push({ role: "user", content: prompt });
+    operatorBusy = true;
+    if (referencedElement) {
+      ctxSelector = null;
+      ctxLabel = null;
+      picker.setSelected(null);
+      controller.clearSelectedElement();
+    }
+    render();
+
+    const stepTimer = setTimeout(() => {
+      if (opMessage.phase === "working") {
+        opMessage.step = 1;
+        render();
+      }
+    }, 600);
+
+    const pageContext = [
+      `Live merchant page: ${redactEditorContextUrl(session.targetUrl)}`,
+      runCtxSelector
+        ? `The user selected this element as the request context: selector "${runCtxSelector}"${runCtxLabel ? ` (${runCtxLabel})` : ""}. Ground the change on it.`
+        : "",
+    ].filter(Boolean).join("\n");
+
+    const runPromise = runEditorOperatorTurn({
+      apiOrigin: controller.apiOrigin,
+      session,
+      variationId: latestState.variation.id,
+      prompt,
+      artifacts: preArtifacts,
+      conversation: operatorConversation.slice(0, -1).slice(-12),
+      pageContext,
+      signal: abort.signal,
+      selectedElement: referencedElement,
+    }).then(async (result) => {
+      clearTimeout(stepTimer);
+      if (opMessage.phase !== "working" || abort.signal.aborted) return;
+      opMessage.step = 2;
+      render();
+      if (abort.signal.aborted) return;
+      const audit = controller.applyCommandArtifacts(result.artifacts);
+      opMessage.postArtifacts = cloneArtifacts(controller.getState().artifacts);
+      if (abort.signal.aborted) {
+        controller.restoreArtifacts(preArtifacts);
+        await controller.saveNow();
+        return;
+      }
+      operatorConversation.push({ role: "assistant", content: result.explanation });
+      opMessage.abort = null;
+      await controller.saveNow();
+      const saveState = controller.getState().saveState;
+      if (saveState === "error" || saveState === "conflict") {
+        opMessage.phase = "save-failed";
+        opMessage.abort = null;
+        opMessage.results = describeRunChanges(preArtifacts, controller.getState().artifacts);
+        opMessage.error = controller.getState().saveMessage;
+        return;
+      }
+      opMessage.phase = "done";
+      opMessage.abort = null;
+      opMessage.postArtifacts = cloneArtifacts(controller.getState().artifacts);
+      opMessage.results = describeRunChanges(preArtifacts, controller.getState().artifacts);
+      if (!opMessage.results.length) {
+        opMessage.results = [{ label: result.explanation, target: "no page changes" }];
+      }
+      if (!audit.ok) {
+        opMessage.results.push({
+          label: "One selector needs review — check the result on the page.",
+          target: audit.repairHint ?? "selector audit",
+        });
+      }
+    }).catch((error: unknown) => {
+      clearTimeout(stepTimer);
+      if (abort.signal.aborted) return;
+      opMessage.phase = opMessage.postArtifacts ? "save-failed" : "failed";
+      opMessage.abort = null;
+      opMessage.error = error instanceof Error ? error.message : "Operator could not build the draft.";
+      if (opMessage.postArtifacts) {
+        opMessage.results = describeRunChanges(preArtifacts, controller.getState().artifacts);
+      }
+    }).finally(() => {
+      if (abort.signal.aborted) {
+        const userIndex = thread.indexOf(userMessage);
+        if (userIndex >= 0) thread.splice(userIndex, 2);
+        operatorConversation.pop();
+      }
+      if (operatorRunPromise === runPromise) operatorRunPromise = null;
+      operatorBusy = false;
+      render();
+    });
+    operatorRunPromise = runPromise;
+  };
+
+  const switchVariation = async (variationId: string) => {
+    const request = ++variationSwitch;
+    for (const message of thread) {
+      if (message.role === "op" && message.phase === "working") message.abort?.abort();
+    }
+    await operatorRunPromise;
+    if (request !== variationSwitch) return;
+    await controller.saveNow();
+    if (request !== variationSwitch) return;
+    const saveState = controller.getState().saveState;
+    if (saveState === "error" || saveState === "conflict") {
+      render();
+      return;
+    }
+    ctxSelector = null;
+    ctxLabel = null;
+    picker.setSelected(null);
+    controller.clearSelection();
+    thread.length = 0;
+    operatorConversation.length = 0;
+    viewMode = "variation";
+    controller.toggleArtifacts(true);
+    await controller.selectVariation(variationId);
+    render();
+  };
+
+  const retrySave = async (message: ThreadOperatorMessage | null) => {
+    const stillMatchesRun = Boolean(
+      message?.postArtifacts && artifactsEqual(controller.getState().artifacts, message.postArtifacts),
+    );
+    await controller.saveNow();
+    const saveState = controller.getState().saveState;
+    if (message?.phase === "save-failed" && saveState !== "error" && saveState !== "conflict") {
+      message.phase = "done";
+      message.error = null;
+      message.postArtifacts = stillMatchesRun
+        ? cloneArtifacts(controller.getState().artifacts)
+        : null;
+    }
+    render();
+  };
+
+  // ── event wiring ──────────────────────────────────────────────────────
+  const findMessage = (target: HTMLElement): ThreadOperatorMessage | null => {
+    const id = Number(target.dataset.msg);
+    const message = thread.find((entry) => entry.id === id);
+    return message && message.role === "op" ? message : null;
+  };
+
+  const setDevice = (pick: "desktop" | "tablet" | "mobile") => {
+    devicePick = pick;
+    if (pick === "desktop") {
+      controller.closeDevicePreview();
+      render();
+      return;
+    }
+    const size: DevicePreviewSize = pick === "tablet"
+      ? { width: 768, height: 1024 }
+      : { width: 390, height: 844 };
+    frame.style.width = `${size.width}px`;
+    frame.style.height = `${size.height}px`;
+    controller.openDevicePreview();
+    render();
+  };
+
+  const onChromeClick = (event: Event) => {
+    const target = (event.target as Element).closest<HTMLElement>("[data-action]");
+    if (!target) {
+      if (varMenuOpen) {
+        varMenuOpen = false;
+        render();
+      }
+      return;
+    }
+    const action = target.dataset.action;
+    switch (action) {
+      case "collapse": collapsed = true; render(); break;
+      case "expand": collapsed = false; render(); break;
+      case "rail-inspect": collapsed = false; picker.setActive(true); break;
+      case "sheet-toggle": sheetOpen = !sheetOpen; render(); break;
+      case "variation-open": varMenuOpen = !varMenuOpen; render(); break;
+      case "variation-pick": {
+        varMenuOpen = false;
+        const variationId = target.dataset.variation;
+        if (variationId && variationId !== latestState.variation?.id) {
+          void switchVariation(variationId);
+        }
+        render();
+        break;
+      }
+      case "tab": panelTab = (target.dataset.tab as PanelTab) ?? "operator"; render(); break;
+      case "compare": {
+        const nextView = target.dataset.view === "original" ? "original" : "variation";
+        if (nextView !== viewMode) {
+          viewMode = nextView;
+          controller.toggleArtifacts(nextView === "variation");
+        }
+        render();
+        break;
+      }
+      case "show-variation": viewMode = "variation"; controller.toggleArtifacts(true); render(); break;
+      case "device": setDevice((target.dataset.device as "desktop" | "tablet" | "mobile") ?? "desktop"); break;
+      case "undo": controller.undo(); break;
+      case "redo": controller.redo(); break;
+      case "inspect-toggle": picker.setActive(!latestState.pickerActive); break;
+      case "back-to-browsing": picker.setActive(false); break;
+      case "ctx-replace": picker.setActive(true); break;
+      case "ctx-clear":
+        ctxSelector = null;
+        ctxLabel = null;
+        picker.setSelected(null);
+        controller.clearSelection();
+        render();
+        break;
+      case "suggestion": operatorDraft = target.textContent?.trim() ?? ""; render(); break;
+      case "op-stop": findMessage(target)?.abort?.abort(); break;
+      case "op-retry": {
+        const message = findMessage(target);
+        if (message) startOperatorRun(message.prompt, message.ctxSelector, message.ctxLabel);
+        break;
+      }
+      case "op-undo-run": {
+        const message = findMessage(target);
+        if (message && canUndoRun(message)) {
+          controller.restoreArtifacts(message.preArtifacts);
+          message.undone = true;
+          render();
+        }
+        break;
+      }
+      case "op-all-changes": panelTab = "changes"; render(); break;
+      case "code-lang": codeLang = target.dataset.lang === "js" ? "js" : "css"; render(); break;
+      case "run-js": controller.applyCustomJs(); break;
+      case "view-artifact": panelTab = "changes"; artifactOpen = true; render(); break;
+      case "artifact-toggle": artifactOpen = !artifactOpen; render(); break;
+      case "chg-remove": {
+        const kind = target.dataset.kind;
+        if (kind === "mutation") controller.removeMutation(Number(target.dataset.index));
+        else if (kind === "css") controller.setCustomCss("");
+        else if (kind === "js") controller.setCustomJs("");
+        break;
+      }
+      case "retry-save": void retrySave(findMessage(target)); break;
+      case "extend-session": void extendSession(); break;
+      case "banner-dismiss":
+        if (banner === "spanav") spaDismissed = true;
+        banner = null;
+        render();
+        break;
+      case "spa-back":
+        banner = null;
+        spaDismissed = false;
+        location.assign(session.targetUrl);
+        break;
+      case "done": modal = "stop"; render(); break;
+      case "modal-keep": modal = null; render(); break;
+      case "modal-save-close":
+        void controller.saveNow().then(() => {
+          const saveState = controller.getState().saveState;
+          if (saveState !== "error" && saveState !== "conflict") return controller.exit();
+          render();
+        }).catch(() => render());
+        break;
+      case "conflict-mine": void controller.resolveConflict("mine"); break;
+      case "conflict-theirs": void controller.resolveConflict("theirs"); break;
+      case "expired-close": void controller.exit(); break;
+      case "expired-apex":
+        window.open(dashboardVariationUrl(latestState.variation?.id ?? session.initialVariationId), "_blank", "noopener");
+        break;
+      case "boot-retry": void controller.selectVariation(session.initialVariationId); break;
+      default: break;
+    }
+  };
+
+  chrome.addEventListener("click", onChromeClick);
+  zone.addEventListener("click", onChromeClick);
+  boot.addEventListener("click", onChromeClick);
+
+  chrome.addEventListener("input", (event) => {
+    const target = event.target as HTMLInputElement | HTMLTextAreaElement;
+    if (target.dataset.field === "css") controller.setCustomCss(target.value);
+    else if (target.dataset.field === "js") controller.setCustomJs(target.value);
+    else if (target.dataset.field === "operator-prompt") operatorDraft = target.value;
+  });
+
+  chrome.addEventListener("submit", (event) => {
+    const form = (event.target as Element).closest<HTMLFormElement>("[data-operator-form]");
+    if (!form) return;
+    event.preventDefault();
+    const prompt = operatorDraft.trim();
+    if (!prompt) return;
+    operatorDraft = "";
+    startOperatorRun(prompt, ctxSelector, ctxLabel);
+  });
+
+  device.addEventListener("click", (event) => {
+    const action = (event.target as Element).closest<HTMLElement>("[data-action]")?.dataset.action;
+    if (action === "device-close") setDevice("desktop");
+    if (action === "device-copy") void navigator.clipboard?.writeText(location.href);
+  });
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    const target = event.composedPath()[0];
+    const typing =
+      target instanceof HTMLInputElement ||
+      target instanceof HTMLTextAreaElement ||
+      target instanceof HTMLSelectElement ||
+      (target instanceof HTMLElement && target.isContentEditable);
+    if (event.key === "Escape") {
+      if (modal === "stop") {
+        modal = null;
+        render();
+        return;
+      }
+      if (latestState.deviceState !== "closed") {
+        event.preventDefault();
+        setDevice("desktop");
+        return;
+      }
+      return;
+    }
+    if (typing) return;
+    if (event.key === "s" || event.key === "S") {
+      picker.setActive(!latestState.pickerActive);
+      return;
+    }
+    if ((event.metaKey || event.ctrlKey) && (event.key === "z" || event.key === "Z")) {
+      event.preventDefault();
+      if (event.shiftKey) controller.redo();
+      else controller.undo();
+    }
+  };
+  window.addEventListener("keydown", onKeyDown, true);
+
+  // ── session & environment tickers ─────────────────────────────────────
+  const extendSession = async () => {
+    try {
+      const expiresAt = await controller.extendSession();
+      if (expiresAt) {
+        sessionWarn = sessionSecondsLeft() <= SESSION_WARN_SECONDS;
+        render();
+      }
+    } catch {
+      // The footer keeps counting down; expiry handling still applies.
+    }
+  };
+
+  const previousSaveState = { value: latestState.saveState };
+  const saveWatch = controller.subscribe((state) => {
+    if (state.saveState === "saved" && previousSaveState.value !== "saved") {
+      lastSavedAt = Date.now();
+    }
+    previousSaveState.value = state.saveState;
+  });
+
+  const ticker = setInterval(() => {
+    const left = sessionSecondsLeft();
+    if (left <= 0 && modal !== "expired") {
+      modal = "expired";
+      picker.setActive(false);
+      render();
+      return;
+    }
+    const warn = left <= SESSION_WARN_SECONDS;
+    if (warn !== sessionWarn) {
+      sessionWarn = warn;
+      render();
+      return;
+    }
+    const node = chrome.querySelector<HTMLElement>("[data-session-text]");
+    if (node) {
+      node.textContent = warn
+        ? `Session ends in ${formatMinutes(left)}`
+        : `Session · ${Math.floor(left / 60)} min left`;
+    }
+    if (targetPath && bootDone) {
+      const offTarget = location.pathname + location.search !== targetPath;
+      if (offTarget && banner !== "spanav" && !spaDismissed && banner === null) {
+        banner = "spanav";
+        render();
+      } else if (!offTarget && (banner === "spanav" || spaDismissed)) {
+        if (banner === "spanav") banner = null;
+        spaDismissed = false;
+        render();
+      }
+    }
+  }, 1000);
+
+  const onOnline = () => {
+    conn = "connected";
+    render();
+    void controller.saveNow();
+  };
+  const onOffline = () => {
+    conn = "offline";
+    render();
+  };
+  window.addEventListener("online", onOnline);
+  window.addEventListener("offline", onOffline);
+
+  const onMediaChange = () => {
+    narrow = media?.matches ?? false;
+    render();
+  };
+  media?.addEventListener?.("change", onMediaChange);
+
+  render();
+
+  return {
+    destroy() {
+      for (const message of thread) {
+        if (message.role === "op" && message.phase === "working") {
+          message.abort?.abort();
+        }
+      }
+      unsubscribe();
+      saveWatch();
+      clearInterval(ticker);
+      picker.destroy();
+      devicePreview.close(false);
+      window.removeEventListener("keydown", onKeyDown, true);
+      window.removeEventListener("online", onOnline);
+      window.removeEventListener("offline", onOffline);
+      media?.removeEventListener?.("change", onMediaChange);
+      style.remove();
+      chrome.remove();
+      zone.remove();
+      box.remove();
+      label.remove();
+      device.remove();
+      boot.remove();
+    },
+  };
+}