@feedmepos/mf-report 5.27.54 → 5.28.0

package/dist/report-canvas-frame.html

@@ -0,0 +1,888 @@
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<!--
+  Runtime shell for AI-written report sections. Loaded into ONE iframe per report with
+  sandbox="allow-scripts" and no allow-same-origin, so this document runs on an opaque
+  origin and cannot reach the host. Section code needs inline+eval by design; the sandbox
+  attribute is the boundary, and this CSP's job is to keep the frame off the network.
+-->
+<meta
+  http-equiv="Content-Security-Policy"
+  content="default-src 'none'; script-src 'unsafe-inline' 'unsafe-eval'; style-src 'unsafe-inline'; img-src data: blob:; font-src data:; connect-src 'none'; form-action 'none'; base-uri 'none'"
+/>
+<title>Report</title>
+<style>
+  /* Design tokens, from the B2B_POS working file's Report page. A report reads these;
+     a merchant asking for a different look is one redefinition here, not a rewrite. */
+  :root {
+    color-scheme: light;
+    --fm-fg: #1c1c1e;
+    --fm-body: #2e2e2e;
+    --fm-muted: #6b6c70;
+    --fm-faint: #aeaeb2;
+    --fm-line: #f0f0f0;
+    --fm-card: #ffffff;
+    --fm-page: #f3f3f6;
+    --fm-signature: #ff7823;
+    --fm-signature-tint: #fff3e6;
+    --fm-signature-dark: #6b3100;
+    --fm-danger: #99231d;
+    --fm-danger-bg: #ffebea;
+    --fm-aqua-500: #0a5384;
+    --fm-aqua-300: #3ab0ff;
+    --fm-aqua-100: #b7e2ff;
+    --fm-purple-500: #512191;
+    --fm-purple-300: #8f61e8;
+    --fm-purple-100: #eddfff;
+    --fm-green-500: #306a01;
+    --fm-green-300: #aeef4b;
+    --fm-green-100: #f4fde6;
+    --fm-plum-500: #8c146a;
+    --fm-plum-300: #ffc4c3;
+    --fm-plum-100: #fff7fc;
+    --fm-mustard-500: #903e1f;
+    --fm-mustard-300: #ffc746;
+    --fm-mustard-100: #fef5ea;
+    --fm-berry-500: #5f090a;
+    --fm-berry-300: #e94850;
+    --fm-berry-100: #fee4dc;
+    --fm-success: #1f7735;
+    --fm-success-bg: #ebf9ee;
+    --fm-warning: #995900;
+    --fm-warning-bg: #fff4e6;
+    --fm-error: #99231d;
+    --fm-error-bg: #ffebea;
+    --fm-info: #004999;
+    --fm-info-bg: #e6f2ff;
+    --fm-radius: 12px;
+    --fm-radius-sm: 8px;
+    --fm-gap: 12px;
+  }
+  * {
+    box-sizing: border-box;
+  }
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+  }
+  body {
+    font: 14px/1.5 Inter, "Helvetica Neue", Arial, sans-serif;
+    color: var(--fm-fg);
+    background: #fff;
+    overflow-y: auto;
+  }
+  body.fmr-page {
+    background: var(--fm-page);
+  }
+  /* The board: 12 columns, ragged bottoms. A section spans all 12 unless it says otherwise. */
+  #report {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    align-items: start;
+    gap: var(--fm-gap);
+    padding: 12px 16px 24px;
+  }
+  #report > section {
+    grid-column: 1 / -1;
+    min-width: 0;
+  }
+  /* ---- components ------------------------------------------------------
+     The FeedMe report component set. A report is composed from these; each one
+     is already the design system, so nothing here needs restyling to look right. */
+  .fmr-card {
+    background: var(--fm-card);
+    border: 1px solid var(--fm-line);
+    border-radius: var(--fm-radius);
+  }
+  .fmr-tile {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  .fmr-tile-head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    flex-wrap: wrap;
+    padding: 16px 20px 12px;
+  }
+  .fmr-tile-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--fm-fg);
+  }
+  /* One factual line. Not a place to explain the report. */
+  .fmr-tile-note {
+    margin: 4px 0 0;
+    font-size: 12px;
+    color: var(--fm-muted);
+  }
+  .fmr-tile-body {
+    padding: 0 20px 16px;
+  }
+  .fmr-tile-foot {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    flex-wrap: wrap;
+    border-top: 1px solid var(--fm-line);
+    padding: 10px 20px 12px;
+    font-size: 12px;
+    color: var(--fm-muted);
+  }
+
+  /* Scorecards: label, value, optional trend. */
+  .fmr-kpis {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: var(--fm-gap);
+  }
+  .fmr-kpi {
+    padding: 14px 16px;
+    min-width: 0;
+  }
+  .fmr-kpi-label {
+    font-size: 14px;
+    color: var(--fm-muted);
+  }
+  .fmr-kpi-value {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    margin-top: 5px;
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--fm-fg);
+    font-variant-numeric: tabular-nums;
+  }
+  .fmr-kpi-cur {
+    font-size: 14px;
+    font-weight: 600;
+  }
+  .fmr-kpi-note {
+    margin-top: 6px;
+    font-size: 12px;
+    color: var(--fm-muted);
+  }
+  .fmr-trend {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    border-radius: 999px;
+    padding: 3px 8px;
+    font-size: 12px;
+    font-weight: 600;
+  }
+  .fmr-trend.up { color: var(--fm-success); background: var(--fm-green-100); }
+  .fmr-trend.down { color: var(--fm-error); background: var(--fm-berry-100); }
+  .fmr-trend.flat { color: var(--fm-muted); background: var(--fm-line); }
+
+  /* Breakdown: a share row over one stacked bar. */
+  .fmr-breakdown {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+    gap: 12px 24px;
+  }
+  .fmr-breakdown-label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    color: var(--fm-muted);
+  }
+  .fmr-breakdown-value {
+    margin-top: 2px;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--fm-fg);
+    font-variant-numeric: tabular-nums;
+  }
+  .fmr-stack {
+    display: flex;
+    gap: 2px;
+    height: 12px;
+    margin-top: 14px;
+  }
+  .fmr-stack > span {
+    border-radius: 4px;
+    min-width: 2px;
+  }
+
+  /* Legend — you draw it in HTML; chart.js legends stay off. */
+  .fmr-legend {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 6px 20px;
+  }
+  .fmr-legend-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: var(--fm-muted);
+  }
+  .fmr-swatch {
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+    flex: none;
+  }
+  .fmr-swatch.line {
+    width: 12px;
+    height: 2px;
+    border-radius: 0;
+  }
+
+  /* Table: no zebra, no vertical rules. */
+  table.fmr-table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+  table.fmr-table th {
+    padding: 0 12px 10px;
+    text-align: left;
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--fm-muted);
+    white-space: nowrap;
+  }
+  table.fmr-table td {
+    height: 52px;
+    padding: 7px 12px;
+    border-top: 1px solid var(--fm-line);
+    font-size: 14px;
+    color: var(--fm-fg);
+    vertical-align: middle;
+  }
+  table.fmr-table th:first-child,
+  table.fmr-table td:first-child {
+    padding-left: 20px;
+  }
+  table.fmr-table th:last-child,
+  table.fmr-table td:last-child {
+    padding-right: 20px;
+  }
+  table.fmr-table td:first-child {
+    font-weight: 600;
+  }
+  .fmr-num {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+  .fmr-dim {
+    color: var(--fm-muted);
+  }
+  /* the th/td rules above outrank a bare class, so the table needs its own. */
+  table.fmr-table th.fmr-num,
+  table.fmr-table td.fmr-num {
+    text-align: right;
+  }
+  table.fmr-table td.fmr-dim {
+    color: var(--fm-muted);
+  }
+  table.fmr-table td.fmr-empty {
+    font-weight: 400;
+    color: var(--fm-muted);
+  }
+  .fmr-scroll-x {
+    overflow-x: auto;
+  }
+
+  /* Pager: a table's footer. fmr-tile-foot gives it the frame, this adds the two buttons. */
+  .fmr-pager[hidden] {
+    display: none;
+  }
+  .fmr-pager-btns {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+  .fmr-pager-btns .fmr-link[disabled] {
+    color: var(--fm-faint);
+    cursor: default;
+    text-decoration: none;
+  }
+
+  /* Tabs — orange marks the active one, the only place a report uses the signature. */
+  .fmr-tabs {
+    display: flex;
+    gap: 4px;
+    border-bottom: 1px solid var(--fm-line);
+    padding: 0 20px;
+  }
+  .fmr-tab {
+    border: 0;
+    background: none;
+    padding: 12px 16px;
+    font: inherit;
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--fm-muted);
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+  }
+  .fmr-tab[aria-selected="true"] {
+    color: var(--fm-signature);
+    border-bottom-color: var(--fm-signature);
+  }
+
+  /* Status pairs — the dark tone on its own pale ground, never a brand tint. */
+  .fmr-badge {
+    display: inline-block;
+    border-radius: 999px;
+    padding: 3px 8px;
+    font-size: 12px;
+    font-weight: 600;
+  }
+  .fmr-badge.success { color: var(--fm-success); background: var(--fm-success-bg); }
+  .fmr-badge.warning { color: var(--fm-warning); background: var(--fm-warning-bg); }
+  .fmr-badge.error { color: var(--fm-error); background: var(--fm-error-bg); }
+  .fmr-badge.info { color: var(--fm-info); background: var(--fm-info-bg); }
+
+  .fmr-link {
+    border: 0;
+    background: none;
+    padding: 0;
+    font: inherit;
+    font-weight: 600;
+    color: var(--fm-info);
+    cursor: pointer;
+    text-decoration: underline;
+    text-decoration-color: transparent;
+    text-underline-offset: 2px;
+  }
+  .fmr-link:hover,
+  .fmr-link:focus-visible {
+    text-decoration-color: currentColor;
+  }
+
+  /* A chart canvas needs a height its parent does not give it. */
+  .fmr-chart {
+    position: relative;
+    height: 240px;
+  }
+  .fmr-chart.sm { height: 180px; }
+  .fmr-chart.lg { height: 320px; }
+
+  /* The two states the shell does not paint. */
+  .fmr-note {
+    margin: 0 20px 16px;
+    padding: 8px 0;
+    font-size: 14px;
+    color: var(--fm-muted);
+  }
+  .fmr-note.error {
+    border-radius: var(--fm-radius-sm);
+    padding: 11px 12px;
+    color: var(--fm-error);
+    background: var(--fm-error-bg);
+  }
+  .fm-section-error {
+    border: 1px solid var(--fm-line);
+    border-left: 3px solid var(--fm-danger);
+    background: var(--fm-danger-bg);
+    border-radius: 6px;
+    padding: 12px 14px;
+  }
+  .fm-section-error b {
+    color: var(--fm-danger);
+  }
+  .fm-section-error pre {
+    margin: 6px 0 0;
+    white-space: pre-wrap;
+    font-size: 12px;
+    color: var(--fm-muted);
+  }
+  .fm-placeholder {
+    color: var(--fm-muted);
+    padding: 24px 16px;
+  }
+  /* Loading belongs to the shell: a section declares its queries and never draws a skeleton. */
+  #fm-progress {
+    position: fixed;
+    inset: 0 0 auto;
+    z-index: 30;
+    height: 2px;
+    overflow: hidden;
+    background: var(--fm-signature-tint);
+    opacity: 0;
+    transition: opacity 0.15s linear;
+    pointer-events: none;
+  }
+  #fm-progress[data-on] {
+    opacity: 1;
+  }
+  #fm-progress i {
+    display: block;
+    width: 32%;
+    height: 100%;
+    background: var(--fm-signature);
+  }
+  section[data-fm-busy] {
+    position: relative;
+    min-height: 48px;
+  }
+  /* A scrim, not a replacement: the designed panel stays put and stale values stay clickable. */
+  section[data-fm-busy]::after {
+    content: "";
+    position: absolute;
+    inset: -4px;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.62);
+    pointer-events: none;
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    #fm-progress i {
+      animation: fm-slide 1.1s linear infinite;
+    }
+  }
+  @keyframes fm-slide {
+    from {
+      transform: translateX(-100%);
+    }
+    to {
+      transform: translateX(320%);
+    }
+  }
+  .fm-text h1,
+  .fm-text h2,
+  .fm-text h3 {
+    margin: 0 0 8px;
+    line-height: 1.3;
+  }
+  .fm-text p {
+    margin: 0 0 8px;
+  }
+  .fm-text code {
+    background: #f0f0f0;
+    border-radius: 3px;
+    padding: 1px 4px;
+    font-size: 12px;
+  }
+</style>
+
+<div id="fm-progress" data-on aria-hidden="true"><i></i></div>
+<div id="report" aria-busy="true"></div>
+
+<script>
+  ;(function () {
+    "use strict"
+
+    var root = document.getElementById("report")
+
+    var env = {}
+    var params = {}
+    var results = Object.create(null) // queryId -> { rows, status, runId, truncated, error }
+    var subs = Object.create(null) // queryId -> [cb]
+    var loadedLibs = Object.create(null)
+    var mounted = Object.create(null) // sectionId -> container element
+    var versions = Object.create(null) // sectionId -> mounted source version
+    var failed = Object.create(null) // sectionId -> true once this mount reported an error
+    var order = [] // section ids, render order
+    var mounting = null // section id currently executing, for window.onerror attribution
+    var declared = Object.create(null) // sectionId -> the query ids that section reads
+    var progress = document.getElementById("fm-progress")
+
+    /**
+     * Section code shares this window and can call parent.postMessage itself, so a render
+     * outcome carries a nonce only this closure holds — never on `window`, never in the DOM.
+     * The host learns it from `ready` and drops any ack without it.
+     */
+    var NONCE = (function () {
+      try {
+        var buffer = new Uint32Array(4)
+        crypto.getRandomValues(buffer)
+        return Array.prototype.map
+          .call(buffer, function (value) {
+            return value.toString(36)
+          })
+          .join("")
+      } catch (err) {
+        return String(Math.random()).slice(2) + String(new Date().getTime())
+      }
+    })()
+
+    function post(message) {
+      // Opaque origins cannot be named, so "*" is the only usable target. The host
+      // authenticates us by comparing event.source to its own iframe.contentWindow.
+      parent.postMessage(message, "*")
+    }
+
+    /** Only the shell may claim a section rendered or threw. */
+    function postOutcome(message) {
+      message.nonce = NONCE
+      post(message)
+    }
+
+    function reportError(sectionId, err) {
+      var message = err && err.message ? String(err.message) : String(err)
+      var stack = err && err.stack ? String(err.stack).slice(0, 4000) : undefined
+      failed[sectionId] = true
+      renderError(sectionId, message)
+      postOutcome({
+        type: "error",
+        sectionId: sectionId,
+        version: versions[sectionId],
+        message: message,
+        stack: stack
+      })
+    }
+
+    function renderError(sectionId, message) {
+      var el = mounted[sectionId]
+      if (!el) return
+      el.innerHTML = ""
+      var box = document.createElement("div")
+      box.className = "fm-section-error"
+      var title = document.createElement("b")
+      title.textContent = "This part of the report could not be shown"
+      var detail = document.createElement("pre")
+      detail.textContent = message
+      box.appendChild(title)
+      box.appendChild(detail)
+      el.appendChild(box)
+    }
+
+    // --- markdown (text sections): escape first, then a small safe subset
+
+    function escapeHtml(text) {
+      return text
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+    }
+
+    function renderMarkdown(source) {
+      var lines = escapeHtml(String(source || "")).split(/\r?\n/)
+      var out = []
+      var list = null
+      function closeList() {
+        if (list) {
+          out.push("<" + list.tag + ">" + list.items.join("") + "</" + list.tag + ">")
+          list = null
+        }
+      }
+      for (var i = 0; i < lines.length; i++) {
+        var line = lines[i]
+        var heading = /^(#{1,3})\s+(.*)$/.exec(line)
+        var bullet = /^\s*[-*]\s+(.*)$/.exec(line)
+        var numbered = /^\s*\d+\.\s+(.*)$/.exec(line)
+        if (heading) {
+          closeList()
+          var level = heading[1].length
+          out.push("<h" + level + ">" + inline(heading[2]) + "</h" + level + ">")
+        } else if (bullet || numbered) {
+          var tag = bullet ? "ul" : "ol"
+          if (!list || list.tag !== tag) {
+            closeList()
+            list = { tag: tag, items: [] }
+          }
+          list.items.push("<li>" + inline((bullet || numbered)[1]) + "</li>")
+        } else if (!line.trim()) {
+          closeList()
+        } else {
+          closeList()
+          out.push("<p>" + inline(line) + "</p>")
+        }
+      }
+      closeList()
+      return out.join("")
+    }
+
+    function inline(text) {
+      return text
+        .replace(/`([^`]+)`/g, "<code>$1</code>")
+        .replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
+        .replace(/(^|[^*])\*([^*]+)\*/g, "$1<em>$2</em>")
+        .replace(/\[([^\]]+)\]\((https?:\/\/[^)\s]+|mailto:[^)\s]+)\)/g, function (_all, label, href) {
+          return '<a href="' + href + '" target="_blank" rel="noreferrer noopener">' + label + "</a>"
+        })
+    }
+
+    // --- libs
+
+    function installLibs(bundles) {
+      if (!bundles) return
+      Object.keys(bundles).forEach(function (key) {
+        if (loadedLibs[key]) return
+        var script = document.createElement("script")
+        script.textContent = bundles[key]
+        document.head.appendChild(script)
+        loadedLibs[key] = true
+      })
+    }
+
+    // --- sections
+
+    function container(sectionId) {
+      var el = mounted[sectionId]
+      if (el) {
+        el.innerHTML = ""
+        return el
+      }
+      el = document.createElement("section")
+      el.id = sectionId
+      el.dataset.sectionId = sectionId
+      mounted[sectionId] = el
+      return el
+    }
+
+    /**
+     * Sections share one DOM and one CSS cascade on purpose, but top-level JS is wrapped
+     * so two sections cannot collide on a `const` — they share state through `window`.
+     * Always attempts the persisted source, even one saved as `status: "error"`: that is
+     * what "restore last good source" means, and a genuinely broken one throws and re-acks.
+     */
+    function mountSection(section) {
+      var el = container(section.id)
+      versions[section.id] = section.version
+      failed[section.id] = false
+      declared[section.id] = (section.queryIds || []).slice()
+      mounting = section.id
+      try {
+        if (section.kind === "text") {
+          var text = document.createElement("div")
+          text.className = "fm-text"
+          text.innerHTML = renderMarkdown(section.source)
+          el.appendChild(text)
+          return
+        }
+        var doc = new DOMParser().parseFromString(
+          "<body>" + String(section.source || "") + "</body>",
+          "text/html"
+        )
+        var scripts = []
+        Array.prototype.slice.call(doc.body.childNodes).forEach(function (node) {
+          if (node.tagName === "SCRIPT") {
+            scripts.push(node.textContent || "")
+          } else {
+            el.appendChild(document.importNode(node, true))
+          }
+        })
+        // Inline scripts throw past the caller's try/catch, so wrap the source itself.
+        scripts.forEach(function (code, index) {
+          var tag = document.createElement("script")
+          tag.textContent = "try{(function(){\n" + code + "\n})()}catch(e){window.FM.__err(e)}"
+          el.appendChild(tag)
+          void index
+        })
+      } catch (err) {
+        reportError(section.id, err)
+      } finally {
+        mounting = null
+        if (!failed[section.id]) {
+          postOutcome({ type: "rendered", sectionId: section.id, version: section.version })
+        }
+      }
+    }
+
+    function unmountSection(sectionId) {
+      var el = mounted[sectionId]
+      if (el && el.parentNode) el.parentNode.removeChild(el)
+      delete mounted[sectionId]
+      delete versions[sectionId]
+      delete failed[sectionId]
+      delete declared[sectionId]
+      Object.keys(subs).forEach(function (queryId) {
+        subs[queryId] = subs[queryId].filter(function (entry) {
+          return entry.sectionId !== sectionId
+        })
+      })
+    }
+
+    function renderAll(sections) {
+      root.innerHTML = ""
+      mounted = Object.create(null)
+      versions = Object.create(null)
+      failed = Object.create(null)
+      declared = Object.create(null)
+      subs = Object.create(null)
+      order = sections.map(function (section) {
+        return section.id
+      })
+      sections.forEach(function (section) {
+        var el = container(section.id)
+        root.appendChild(el)
+        mountSection(section)
+      })
+      if (sections.length === 0) {
+        var empty = document.createElement("div")
+        empty.className = "fm-placeholder"
+        empty.textContent = "This report is empty. Ask in the chat to build it."
+        root.appendChild(empty)
+      }
+      root.removeAttribute("aria-busy")
+      paintBusy()
+    }
+
+    /** Hot-swap: replace only the named sections, appending any that are new. */
+    function swapSections(sections) {
+      sections.forEach(function (section) {
+        var existing = mounted[section.id]
+        if (existing) {
+          unmountSection(section.id)
+          var replacement = container(section.id)
+          root.insertBefore(replacement, positionAfter(section.id))
+          mountSection(section)
+          return
+        }
+        order.push(section.id)
+        var el = container(section.id)
+        root.appendChild(el)
+        mountSection(section)
+      })
+      paintBusy()
+    }
+
+    function positionAfter(sectionId) {
+      var index = order.indexOf(sectionId)
+      for (var i = index + 1; i < order.length; i++) {
+        if (mounted[order[i]]) return mounted[order[i]]
+      }
+      return null
+    }
+
+    function notify(queryId) {
+      var list = subs[queryId] || []
+      list.slice().forEach(function (entry) {
+        try {
+          entry.cb(results[queryId] ? results[queryId].rows : [])
+        } catch (err) {
+          reportError(entry.sectionId, err)
+        }
+      })
+    }
+
+    // --- loading
+
+    /**
+     * Every report gets the same loading affordance, so no section hand-rolls one: a scrim
+     * over each section whose declared query is in flight, plus one bar for the report.
+     * Only `loading` counts — an idle lazy query keeps the empty state it was designed with,
+     * and a query the shell has not heard about yet is not assumed to be running.
+     */
+    function paintBusy() {
+      Object.keys(mounted).forEach(function (sectionId) {
+        var el = mounted[sectionId]
+        var busy = !failed[sectionId] && (declared[sectionId] || []).some(isRunning)
+        if (busy) {
+          el.setAttribute("data-fm-busy", "")
+          el.setAttribute("aria-busy", "true")
+        } else {
+          el.removeAttribute("data-fm-busy")
+          el.removeAttribute("aria-busy")
+        }
+      })
+      if (progress) {
+        if (Object.keys(results).some(isRunning)) progress.setAttribute("data-on", "")
+        else progress.removeAttribute("data-on")
+      }
+    }
+
+    function isRunning(queryId) {
+      var result = results[queryId]
+      return !!result && result.status === "loading"
+    }
+
+    // --- FM: the only API section code may use (see the agent system prompt)
+
+    window.env = env
+    window.FM = {
+      rows: function (queryId) {
+        var result = results[queryId]
+        return result && result.rows ? result.rows : []
+      },
+      status: function (queryId) {
+        var result = results[queryId]
+        return result ? result.status : "idle"
+      },
+      onRows: function (queryId, cb) {
+        if (typeof cb !== "function") return
+        if (!subs[queryId]) subs[queryId] = []
+        subs[queryId].push({ sectionId: mounting, cb: cb })
+        // fire immediately so a section renders its current state without waiting
+        try {
+          cb(window.FM.rows(queryId))
+        } catch (err) {
+          reportError(mounting, err)
+        }
+      },
+      setParams: function (values) {
+        if (!values || typeof values !== "object") return
+        post({ type: "setParams", values: values })
+      },
+      params: function () {
+        return JSON.parse(JSON.stringify(params))
+      },
+      /** Takes no section id on purpose: the shell attributes the failure to what it is mounting. */
+      __err: function (err) {
+        if (mounting) reportError(mounting, err)
+      }
+    }
+
+    window.addEventListener("error", function (event) {
+      if (!mounting) return
+      reportError(mounting, event.error || new Error(event.message))
+    })
+    window.addEventListener("unhandledrejection", function (event) {
+      if (!mounting) return
+      reportError(mounting, event.reason || new Error("unhandled rejection"))
+    })
+
+    // --- host channel
+
+    window.addEventListener("message", function (event) {
+      // the host is the only window that can reach us; anything else is not ours
+      if (event.source !== window.parent) return
+      var data = event.data
+      if (!data || typeof data !== "object") return
+      switch (data.type) {
+        case "init":
+          env = data.env || {}
+          window.env = env
+          params = data.params || {}
+          installLibs(data.libs)
+          renderAll(data.sections || [])
+          break
+        case "sections":
+          installLibs(data.libs)
+          swapSections(data.sections || [])
+          break
+        case "params":
+          params = data.values || {}
+          Object.keys(subs).forEach(notify)
+          break
+        // Mutated in place, never replaced: sections captured `env` at mount and a new
+        // object would leave every one of them reading the empty first snapshot.
+        case "env":
+          Object.keys(env).forEach(function (key) { delete env[key] })
+          Object.keys(data.env || {}).forEach(function (key) { env[key] = data.env[key] })
+          Object.keys(subs).forEach(notify)
+          break
+        case "rows":
+          var previous = results[data.queryId]
+          if (previous && previous.runId > data.runId) return // superseded run
+          results[data.queryId] = {
+            rows: data.rows || [],
+            status: data.status,
+            runId: data.runId,
+            truncated: !!data.truncated,
+            error: data.error
+          }
+          notify(data.queryId)
+          paintBusy()
+          break
+      }
+    })
+
+    post({ type: "ready", nonce: NONCE })
+  })()
+</script>