overlay) ──────── */ // Lightweight tokenizer: keyword / function / string / number / comment / // operator / identifier / whitespace. Single regex with named alternates so // the relative order is preserved (comments before strings before // identifiers). Brand-coloured via the hl-* classes in app.css. const SQL_KEYWORDS = new Set(([ 'select','from','where','and','or','not','in','is','null','any','some', 'join','inner','outer','left','right','full','cross','natural','on','using', 'group','by','order','having','distinct','all', 'union','intersect','except','as','with','recursive', 'insert','into','values','update','set','delete','returning', 'create','table','view','index','schema','sequence','extension','function', 'drop','alter','add','column','rename','to', 'primary','key','foreign','references','unique','default','constraint','check', 'case','when','then','else','end', 'limit','offset','fetch','first','rows','row','only', 'true','false','asc','desc','nulls', 'between','like','ilike','similar','overlaps', 'exists','cast','collate','escape', 'begin','commit','rollback','savepoint','transaction','isolation','level', 'grant','revoke','to','from','public','role','user', 'if','exists','temp','temporary','unlogged','materialized', 'analyze','explain','vacuum','copy','do','language', 'array','within','filter','over','partition','window','range','unbounded','preceding','following','current','interval', ]).map(s => s.toLowerCase())); function escHtml(s) { return s.replace(/&/g, '&').replace(//g, '>'); } function highlightSql(text) { // Token alternates, in priority order: // 1 = line comment -- ... // 2 = block comment /* ... */ // 3 = single-quoted string (with escaped '') // 4 = dollar-quoted string $tag$ ... $tag$ // 5 = double-quoted identifier "..." // 6 = number // 7 = identifier // 8 = operator // 9 = whitespace (passthrough) const re = /(--[^\n]*)|(\/\*[\s\S]*?\*\/)|('(?:[^']|'')*'?)|(\$([A-Za-z_][A-Za-z0-9_]*)?\$[\s\S]*?\$\5\$)|("(?:[^"]|"")*"?)|(\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b)|([A-Za-z_][A-Za-z0-9_]*)|([+\-*\/<>=!,;().|&%])|(\s+)/g; let out = ''; let lastIdx = 0; let m; while ((m = re.exec(text)) !== null) { // Anything between matches is unrecognized; emit as-is (escaped). if (m.index > lastIdx) out += escHtml(text.slice(lastIdx, m.index)); lastIdx = re.lastIndex; if (m[1]) out += `${escHtml(m[1])}`; else if (m[2]) out += `${escHtml(m[2])}`; else if (m[3]) out += `${escHtml(m[3])}`; else if (m[4]) out += `${escHtml(m[4])}`; else if (m[6]) out += `${escHtml(m[6])}`; else if (m[7]) out += `${escHtml(m[7])}`; else if (m[8]) { const w = m[8]; if (SQL_KEYWORDS.has(w.toLowerCase())) { out += `${escHtml(w)}`; } else { // Function-call heuristic: identifier immediately followed by `(`. const after = text.charAt(re.lastIndex); if (after === '(') { out += `${escHtml(w)}`; } else { out += escHtml(w); } } } else if (m[9]) out += `${escHtml(m[9])}`; else if (m[10]) out += m[10]; // whitespace passthrough } if (lastIdx < text.length) out += escHtml(text.slice(lastIdx)); // Trailing newline keeps the

's last-line height aligned with the
    // textarea (which always reserves space for a trailing newline).
    return out + '\n';
  }

  function setupSqlSyntaxHighlight() {
    const ta = document.getElementById('request');
    const hlPre = document.getElementById('request-hl');
    if (!ta || !hlPre) return;
    const code = hlPre.querySelector('code');

    // Restore the user's preferred textarea height across reloads and
    // mode switches. ta.style.height is the same inline style the browser
    // writes on vertical drag, so round-tripping through it avoids the
    // box-sizing drift you'd get from offsetHeight/clientHeight.
    try {
      const saved = localStorage.getItem('ps.editorHeight');
      if (saved && /^\d+(\.\d+)?px$/.test(saved)) {
        const px = parseFloat(saved);
        if (px >= 40 && px <= 4000) ta.style.height = saved;
      }
    } catch (e) { /* localStorage disabled / quota: skip */ }

    function refresh() { code.innerHTML = highlightSql(ta.value); }
    function syncScroll() {
      hlPre.scrollTop  = ta.scrollTop;
      hlPre.scrollLeft = ta.scrollLeft;
    }
    ta.addEventListener('input', refresh);
    ta.addEventListener('scroll', syncScroll);
    // Re-sync after textarea resize: pre is positioned absolutely so its
    // box follows automatically, but scroll position can drift. Same
    // observer persists the user-set height; the initial firing during
    // restore writes back the value we just read, which is harmless.
    new ResizeObserver(() => {
      syncScroll();
      const h = ta.style.height;
      if (h) {
        try { localStorage.setItem('ps.editorHeight', h); }
        catch (e) { /* skip */ }
      }
    }).observe(ta);
    refresh();
  }

  setupSqlSyntaxHighlight();

  /* ──────── Where mode ──────── */

  async function setupWhereMode() {
    await refreshRelations();
    const body = document.getElementById('result-body');
    body.addEventListener('mouseover', (e) => onResultHover(e, true));
    body.addEventListener('mouseout',  (e) => onResultHover(e, false));
    body.addEventListener('click', (e) => {
      const btn = e.target.closest('[data-jump-circuit]');
      if (!btn) return;
      // Same carry rule as the mode-switch tab : only auto-replay in the
      // new mode if the textarea still matches the last-run SQL. The
      // preloadCircuit UUID is always carried so the DAG renders
      // regardless of whether we re-run the query.
      window.ProvsqlStudio.carryQueryForSwitch();
      sessionStorage.setItem('ps.preloadCircuit', btn.dataset.jumpCircuit);
      window.location.href = '/circuit';
    });
    // Quick-nav chips at the top of the sidebar: scroll the sidebar pane
    // so the target header lands at the top. We do this explicitly rather
    // than via scrollIntoView, because scrollIntoView picks the nearest
    // scrollable ancestor and may end up scrolling the page (sticky nav
    // hides the header) instead of the sidebar's own overflow pane.
    document.getElementById('sidebar-body').addEventListener('click', (e) => {
      const btn = e.target.closest('.wp-rel-nav__btn');
      if (!btn) return;
      const target = document.getElementById(btn.dataset.target);
      const sidebar = document.getElementById('sidebar');
      if (!target || !sidebar) return;
      const offset = target.getBoundingClientRect().top
                   - sidebar.getBoundingClientRect().top
                   + sidebar.scrollTop
                   - 10;  // small breathing gap above the header
      sidebar.scrollTo({ top: Math.max(0, offset), behavior: 'smooth' });
    });
    // Auto-replay only when the carried query had actually been executed
    // in the original mode (carriedRan). Plain reloads, history nav, and
    // unrun drafts must NOT auto-execute, because re-running a
    // side-effecting query (typically add_provenance) on switch is
    // dangerous.
    if (carriedRan && document.getElementById('request').value.trim()) {
      runQuery({ preventDefault() {} });
    }
  }

  // Last fetched /api/relations response, kept so the "Input gates only"
  // toggle can re-render without an extra round-trip.
  let _lastRelations = [];
  const INPUT_ONLY_KEY = 'ps.where.inputOnly';
  function inputOnlyEnabled() {
    // Default ON : the typical use case is inspecting the source tables
    // of a query, which are by construction input-gated.
    const v = sessionStorage.getItem(INPUT_ONLY_KEY);
    return v === null ? true : v === '1';
  }
  function setInputOnly(on) {
    sessionStorage.setItem(INPUT_ONLY_KEY, on ? '1' : '0');
  }

  async function refreshRelations() {
    let relations;
    try {
      const resp = await fetch('/api/relations');
      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
      relations = await resp.json();
    } catch (e) {
      document.getElementById('sidebar-body').innerHTML =
        `Failed to load relations: ${escapeHtml(e.message)}`;
      return;
    }
    _lastRelations = relations;
    renderRelations(relations);
  }

  function renderRelations(relations) {
    const body = document.getElementById('sidebar-body');
    if (!relations.length) {
      body.innerHTML = 'No provenance-tagged relations. Try SELECT add_provenance(\'mytable\').';
      return;
    }
    // Apply the "input gates only" filter : a relation passes when its
    // first row's provsql token is an input gate. Empty relations
    // (first_gate_type == null) are dropped under the filter, since
    // there's no input row to point at; rendering them would be noise.
    const inputOnly = inputOnlyEnabled();
    const totalCount = relations.length;
    const filtered = inputOnly
      ? relations.filter(r => r.first_gate_type === 'input')
      : relations;
    const hiddenCount = totalCount - filtered.length;
    const toggleHtml = `
      
        
          
          Input gates only${hiddenCount > 0 ? ` (${hiddenCount} hidden)` : ''}
        
      `;
    if (!filtered.length) {
      body.innerHTML = toggleHtml +
        'All provenance-tracked relations carry derived gates. Untick the filter to show them.';
      bindInputOnlyToggle();
      return;
    }
    relations = filtered;
    // Quick-nav chips at the top: one per relation, click scrolls the
    // matching section into view inside the sidebar's own scroll pane.
    const navHtml = relations.length > 1
      ? `${
          relations.map(rel =>
            ``
          ).join('')
        }`
      : '';
    body.innerHTML = toggleHtml + navHtml + relations.map(rel => {
      // Skip the rewriter-added `provsql` UUID column when displaying; its
      // value is already exposed as the row id (used for the hover-highlight).
      // where_provenance numbers cells by user-column position (1-indexed,
      // ignoring provsql), which matches the original i+1 since provsql sits
      // at the end of the column list.
      const visible = rel.columns
        .map((c, i) => ({ c, i }))
        .filter(({ c }) => c.name !== 'provsql');
      // When list_relations capped the SELECT, surface the cap inline
      // ("100 of ~50000 tuples") so the user knows the sidebar isn't a
      // full mirror of the table. The "~" reflects pg_class.reltuples
      // being a planner estimate, not an exact count.
      const tuples = (() => {
        const shown = rel.rows.length;
        if (rel.truncated) {
          const total = rel.estimated_rows;
          if (total != null && total > shown) {
            return `${shown} of ~${total} tuples`;
          }
          return `${shown}+ tuples (capped)`;
        }
        return `${shown} tuples`;
      })();
      return `
      
        
          ${escapeHtml(rel.regclass)}
          ${tuples} · ${visible.length} cols
        
        
          ${visible.map(({ c }) => {
              const cls = isRightAlignedType(c.type_name) ? ' class="is-right"' : '';
              return `${escapeHtml(c.name)}`;
            }).join('')}
              ${rel.rows.map(r => `
                
                  ${visible.map(({ c, i }) => {
                    const id = `${rel.regclass}:${r.uuid}:${i+1}`;
                    const cls = isRightAlignedType(c.type_name) ? ' is-right' : '';
                    return ``;
                  }).join('')}
                
              `).join('')}
            
            
            ${formatCell(r.values[i], c.type_name)}
          
        
      `;
    }).join('');
    bindInputOnlyToggle();
  }

  // Wire the "Input gates only" checkbox emitted by renderRelations. The
  // toggle persists in sessionStorage and re-renders from the cached
  // /api/relations response : no extra round-trip just to flip the filter.
  function bindInputOnlyToggle() {
    const cb = document.getElementById('opt-input-only');
    if (!cb) return;
    cb.addEventListener('change', () => {
      setInputOnly(cb.checked);
      renderRelations(_lastRelations);
    });
  }

  // Stable, CSS-safe id for a relation's section (avoids periods, quotes, ...).
  function sectionId(regclass) {
    return 'rel-' + String(regclass).replace(/[^A-Za-z0-9_]/g, '_');
  }
  // Companion id for the relation's header element (table name + meta).
  function headerId(regclass) {
    return 'hdr-' + String(regclass).replace(/[^A-Za-z0-9_]/g, '_');
  }

  function onResultHover(e, on) {
    const cell = e.target.closest('.wp-result__cell');
    if (!cell) return;
    cell.classList.toggle('is-hover', on);
    let firstSource = null;
    (cell.dataset.sources || '').split(';').filter(Boolean).forEach(id => {
      const el = document.getElementById(id);
      if (el) {
        el.classList.toggle('is-source', on);
        if (on && !firstSource) firstSource = el;
      }
    });
    // Bring the first highlighted source into view if it's outside the
    // sidebar's scroll viewport. block:'nearest' avoids unnecessary scroll
    // when the cell is already visible.
    if (on && firstSource) {
      firstSource.scrollIntoView({ block: 'nearest', inline: 'nearest' });
    }
  }

  /* ──────── Circuit mode ──────── */

  /* ──────── query history ──────── */

  const HISTORY_KEY = 'ps.history';
  const HISTORY_CAP = 50;
  let _historyCursor = -1;  // -1 = current draft; 0..N-1 = nth-most-recent saved entry
  let _historyDriving = false;  // suppress the cursor reset when WE set ta.value

  function loadHistory() {
    try {
      const raw = localStorage.getItem(HISTORY_KEY);
      const arr = raw ? JSON.parse(raw) : [];
      return Array.isArray(arr) ? arr : [];
    } catch {
      return [];
    }
  }
  function saveHistory(arr) {
    try {
      localStorage.setItem(HISTORY_KEY, JSON.stringify(arr.slice(0, HISTORY_CAP)));
    } catch {}
  }
  function pushHistory(sql) {
    const trimmed = String(sql || '').trim();
    if (!trimmed) return;
    const arr = loadHistory();
    if (arr.length && arr[0] === trimmed) return;  // skip exact-duplicate consecutive entries
    arr.unshift(trimmed);
    saveHistory(arr);
  }

  function stepHistory(direction) {
    const arr = loadHistory();
    if (!arr.length) return;
    const ta = document.getElementById('request');
    if (_historyCursor === -1) _draft = ta.value;
    const valueAt = (i) => i === -1 ? (_draft || '') : arr[i];
    const current = ta.value;
    // Skip entries identical to what's already in the textarea so Alt+↑/↓
    // always produces a visible change (history can contain consecutive
    // duplicates separated by other queries, and the draft can match arr[0]).
    let next = _historyCursor + direction;
    while (next >= -1 && next < arr.length && valueAt(next) === current) {
      next += direction;
    }
    if (next < -1 || next >= arr.length) return;
    _historyCursor = next;
    _historyDriving = true;
    ta.value = valueAt(next);
    ta.dispatchEvent(new Event('input'));  // refresh syntax highlight
    _historyDriving = false;
  }
  let _draft = '';

  // Reset history-cursor when the USER edits the textarea (so the next
  // Alt+↑ starts from the most-recent entry again). When we set ta.value
  // ourselves from stepHistory, the synthetic input event must NOT reset
  // the cursor : that's what _historyDriving guards against.
  document.getElementById('request').addEventListener('input', () => {
    if (!_historyDriving) _historyCursor = -1;
  });

  function setupHistoryDropdown() {
    const btn  = document.getElementById('history-btn');
    const menu = document.getElementById('history-menu');
    if (!btn || !menu) return;

    function renderMenu() {
      const arr = loadHistory();
      if (!arr.length) {
        menu.innerHTML = 'No saved queries yet.';
        return;
      }
      const oneLine = (s) => s.replace(/\s+/g, ' ').trim();
      menu.innerHTML = arr.map((sql, i) =>
        `${escapeHtml(oneLine(sql).slice(0, 200))}`
      ).join('') + 'Clear history';
    }
    function open() {
      renderMenu();
      menu.hidden = false;
      btn.setAttribute('aria-expanded', 'true');
    }
    function close() {
      menu.hidden = true;
      btn.setAttribute('aria-expanded', 'false');
    }
    btn.addEventListener('click', (e) => {
      e.stopPropagation();
      if (menu.hidden) open(); else close();
    });
    document.addEventListener('click', (e) => {
      if (!menu.hidden && !menu.contains(e.target) && e.target !== btn) close();
    });
    menu.addEventListener('click', (e) => {
      const li = e.target.closest('li');
      if (!li) return;
      if (li.dataset.clear) {
        saveHistory([]);
        renderMenu();
        return;
      }
      const arr = loadHistory();
      const i = Number(li.dataset.i);
      const sql = arr[i];
      if (sql == null) return;
      const ta = document.getElementById('request');
      ta.value = sql;
      ta.dispatchEvent(new Event('input'));
      _historyCursor = i;
      close();
      ta.focus();
    });
  }

  let _currentConn = null;

  async function fetchConnInfo() {
    const el  = document.getElementById('conn-info');
    // The trigger is the wrapping `;
            } else {
              actions =
                ``;
            }
          }
          // Outer is a div with role=button so the inner action buttons can
          // be real

Running…
. const final = blocks[blocks.length - 1]; const earlier = blocks.slice(0, -1); // Reset the truncation marker on every render; the rows branch // re-shows it when final.truncated. Status / error / empty paths // therefore never leak a stale "first N; more available" hint. const truncMark = document.getElementById('result-truncated'); if (truncMark) { truncMark.textContent = ''; truncMark.hidden = true; } const banners = document.getElementById('result-banners'); let bannerHtml = ''; // Earlier-failed prelude statements: render each as an ERROR banner // alongside notices/warnings. for (const b of earlier) { if (b.kind === 'error') { bannerHtml += renderDiag('ERROR', b.message, b.sqlstate); } } // Server-side notices/warnings + Studio's own INFO observations. // The classifier NOTICE emitted by the provsql.classify_top_level // GUC is hoisted out of the banner stream and used to upgrade the // result-table's `provsql` column header pill from a plain "prov" // to "prov-tid" / "prov-bid" / "prov-opaque" with the sources // surfaced in the hover tooltip. Last one wins when multiple // statements emit NOTICEs (we surface the user-visible last // SELECT's classification). let classifyInfo = null; for (const n of (notices \|\| [])) { const classified = parseClassifierNotice(n.message); if (classified) { classifyInfo = classified; continue; } bannerHtml += renderDiag(n.severity, n.message); } if (banners) banners.innerHTML = bannerHtml; if (!final) { head.innerHTML = ''; body.innerHTML = '
(no statements)
${env.escapeHtml(final.message)}${final.rowcount != null ? ` · ${final.rowcount} tuples affected` : ''}
	// gets a title attribute with the Postgres type so the user can hover // any column to discover its type, plus a small pill for columns // with ProvSQL semantics: // - terracotta `rv` for `random_variable` (operators lifted to gates) // - terracotta `agg` for `agg_token` (UUID + running value) // - purple `prov` for the `provsql` uuid column (the row's // provenance gate from add_provenance) // The first two key off type_name; the third keys off the column // name because `provsql` is just `uuid` at the type level. const matches = env.matchesProvType \|\| ((t, b) => String(t \|\| '').toLowerCase() === b); // The `provsql` column pill is upgraded to a kind-aware variant // (prov-tid / prov-bid / prov-opaque) when the classifier NOTICE // emitted by provsql.classify_top_level identifies the kind of // the user's query result. Hover surfaces the explainer plus // the list of provenance-tracked source relations. Without a // classifier NOTICE (older extension, classifier off, no // sources walked) the pill stays the plain "prov" form. const provLabel = classifyInfo ? (CLASSIFIER_LABELS[classifyInfo.kind] \|\| 'prov') : 'prov'; const provClassMod = classifyInfo ? ' wp-result__col-prov--' + classifyInfo.kind : ''; let provTip = `provsql: the row's provenance gate UUID (added by add_provenance)`; if (classifyInfo) { const explain = CLASSIFIER_EXPLAINERS[classifyInfo.kind] \|\| 'Query-time provenance classification.'; // OPAQUE NOTICEs no longer carry a sources list (the // partial form they used to emit was misleading), so we // omit the "Sources: ..." line for OPAQUE entirely. let srcLine = ''; if (classifyInfo.kind !== 'opaque') { srcLine = classifyInfo.sources.length ? 'Sources: ' + classifyInfo.sources.join(', ') : 'No provenance-tracked sources.'; } provTip = srcLine ? explain + '\n\n' + srcLine : explain; } const headerPill = (col) => { const typeName = col.type_name \|\| ''; if (matches(typeName, 'random_variable')) { return `rv`; } if (matches(typeName, 'agg_token')) { return `agg`; } if (col.name === 'provsql') { return `${provLabel}`; } return ''; }; head.innerHTML = displayIdx.map(i => { const col = allCols[i]; const typeName = col.type_name \|\| ''; const alignCls = env.isRightAlignedType(typeName) ? ' is-right' : ''; const titleAttr = typeName ? ` title="${env.escapeAttr(typeName)}"` : ''; // Wrap the column name in its own span so callers that read // header text (e.g. tests, accessibility tooling) can grab the // name independently of the trailing pill. const nameHtml = `${env.escapeHtml(col.name)}`; return `	${nameHtml}${headerPill(col)}	${env.formatCell(displayValue, col.type_name)}

${escapeHtml(schemaName)}