@floless/app 0.5.1

package/dist/web/app.js

@@ -0,0 +1,1334 @@
+/* ====================== DATA ====================== */
+
+const PROMPTS = {}; // populated live from /api by aware.js - no demo seed
+const AGENTS = {};  // ditto (a dead server must not bleed fake nodes onto the canvas)
+
+/* ====================== STATE ====================== */
+
+const COLLAPSE_KEY = 'floless-demo-collapse-v1';
+// Code tab line-wrap preference (persisted, default off → no-wrap + horizontal scroll).
+const CODE_WRAP_KEY = 'floless:codeWrap';
+let codeWrap = (() => { try { return localStorage.getItem(CODE_WRAP_KEY) === 'true'; } catch { return false; } })();
+
+const state = {
+  promptKey: null,
+  selectedAgentId: null,
+  currentTab: 'description',
+  hasRun: false,
+  running: false,
+  favorites: [],
+  collapse: { left: false, right: false },
+  pendingFavAgentId: null,
+  traceFilter: null, // Execution tab: node id to filter rows to, or null = all
+};
+
+function loadState() {
+  // Templates are server-backed (loaded via /api/templates in aware.js); only the
+  // panel-collapse UI state is persisted locally.
+  try {
+    const c = JSON.parse(localStorage.getItem(COLLAPSE_KEY) || '{}');
+    if (c.left !== undefined)  state.collapse.left = c.left;
+    if (c.right !== undefined) state.collapse.right = c.right;
+  } catch {}
+}
+function saveFavs() {
+  document.getElementById('fav-count').textContent = state.favorites.length;
+}
+function saveCollapse() {
+  localStorage.setItem(COLLAPSE_KEY, JSON.stringify(state.collapse));
+}
+
+/* ====================== ELEMENTS ====================== */
+const $app          = document.getElementById('app');
+const $promptSel    = document.getElementById('prompt-select');
+const $runBtn       = document.getElementById('run-btn');
+const $browseBtn    = document.getElementById('browse-btn');
+const $messages     = document.getElementById('messages');
+const $topology     = document.getElementById('topology');
+const $tabs         = document.getElementById('tabs');
+const $inspectBd    = document.getElementById('inspect-body');
+const $inspectRole  = document.getElementById('inspect-role');
+const $favBar       = document.getElementById('fav-bar');
+const $favChipRow   = document.getElementById('fav-chip-row');
+const $favBarEmpty  = document.getElementById('fav-bar-empty');
+const $favCount     = document.getElementById('fav-count');
+const $addFavModal  = document.getElementById('add-fav-modal');
+const $libModal     = document.getElementById('lib-modal');
+const $libList      = document.getElementById('lib-list');
+const $libSearch    = document.getElementById('lib-search');
+const $favName      = document.getElementById('fav-name');
+const $favCat       = document.getElementById('fav-cat');
+const $favCatSug    = document.getElementById('fav-cat-suggest');
+const $addFavSub    = document.getElementById('add-fav-sub');
+
+let dagCardMap = {};
+let dagResizeObserver = null;
+
+/* ====================== RENDER ====================== */
+
+// The active workflow's renderable shape, or null when none is open / the server
+// is unreachable. Every PROMPTS[state.promptKey] dereference goes through these so
+// a missing workflow renders an honest placeholder instead of throwing.
+function currentPrompt() { return (state.promptKey != null && PROMPTS[state.promptKey]) || null; }
+function isDag() { const p = currentPrompt(); return !!p && p.layout === 'dag'; }
+
+// Honest canvas state when there's no workflow to draw. `kind` is one of
+// 'offline' (server unreachable), 'empty' (no workflow open / none installed),
+// or 'loading'. NEVER renders fake nodes — that bleed-through is the bug this fixes.
+function renderCanvasPlaceholder(kind) {
+  if (dagResizeObserver) { dagResizeObserver.disconnect(); dagResizeObserver = null; }
+  $topology.className = 'topology placeholder';
+  $topology.style.cssText = '';
+  // 'empty' is the brand-new-user surface (auto-open means installed users never
+  // see it — so it's effectively "nothing installed yet"). Render a guided panel
+  // that orients them: what this is, the run flow, and how to add a workflow.
+  if (kind === 'empty') { $topology.innerHTML = onboardingHtml(); wireOnboardingCopy(); return; }
+  const views = {
+    offline: { icon: '⚠', title: 'Server offline', body: 'The local FloLess server isn’t responding. Start it to load your workflows.' },
+    loading: { icon: '…', title: 'Loading…', body: 'Reading your installed workflows.' },
+  };
+  const v = views[kind] || views.offline;
+  $topology.innerHTML =
+    `<div class="canvas-empty" data-kind="${kind}">` +
+    `<div class="canvas-empty-icon">${v.icon}</div>` +
+    `<div class="canvas-empty-title">${v.title}</div>` +
+    `<div class="canvas-empty-body">${v.body}</div>` +
+    `<div class="canvas-empty-actions" id="canvas-empty-actions"></div>` +
+    `</div>`;
+}
+
+// First-run onboarding card (the 'empty' placeholder). Purely informational —
+// the only action is copying the install command (the steps' real controls live
+// in the header and are already disabled). No repeated brand mark (not a splash).
+const ONB_INSTALL_CMD = 'aware app install <folder>';
+function onboardingHtml() {
+  const step = (n, label, note) =>
+    `<li><span class="onb-num">${n}</span><span class="onb-step"><span class="onb-step-label">${label}</span> <span class="onb-step-note">${note}</span></span></li>`;
+  return (
+    `<div class="canvas-empty onboarding" data-kind="empty">` +
+      `<div class="onb-headline">Your terminal AI builds the workflows.<br>You run and inspect them here.</div>` +
+      `<div class="onb-sub">floless.app shows the canvas, triggers runs, and streams results. Compose in Claude Code or Codex; the browser is the window.</div>` +
+      `<div class="onb-divider"></div>` +
+      `<ol class="onb-steps">` +
+        step(1, 'Pick a workflow', '— the picker, top right') +
+        step(2, 'Set inputs', '— on the input node') +
+        step(3, 'Compile', '— freeze the approved lock') +
+        step(4, 'Run', '— against the live host; results render here') +
+      `</ol>` +
+      `<div class="onb-cmd-label">Add a workflow from your terminal:</div>` +
+      `<div class="onb-cmd"><code>${ONB_INSTALL_CMD.replace('<', '&lt;').replace('>', '&gt;')}</code>` +
+        `<button class="onb-copy" type="button" data-tip="Copy command" aria-label="Copy command">⎘</button></div>` +
+    `</div>`
+  );
+}
+function wireOnboardingCopy() {
+  const btn = $topology.querySelector('.onb-copy');
+  if (!btn) return;
+  btn.onclick = async () => {
+    try {
+      await navigator.clipboard.writeText(ONB_INSTALL_CMD);
+      const prev = btn.textContent;
+      btn.textContent = '✓';
+      showToast('Copied: ' + ONB_INSTALL_CMD, 'ok');
+      setTimeout(() => { btn.textContent = prev; }, 1200);
+    } catch {
+      showToast('Could not copy — select the command and copy manually.', 'warn');
+    }
+  };
+}
+
+function nodeIds(p) {
+  return p.layout === 'dag' ? p.nodes.map(n => n.id) : p.nodes;
+}
+
+function computePorts(p) {
+  const ports = {};
+  if (p.layout === 'dag') {
+    p.nodes.forEach(n => { ports[n.id] = { in: 0, out: 0 }; });
+    p.connections.forEach(c => {
+      if (ports[c.from]) ports[c.from].out++;
+      if (ports[c.to])   ports[c.to].in++;
+    });
+  } else {
+    p.nodes.forEach((id, i) => {
+      ports[id] = {
+        in:  i === 0 ? 0 : 1,
+        out: i === p.nodes.length - 1 ? 0 : 1
+      };
+    });
+  }
+  return ports;
+}
+
+function renderChat() {
+  const p = currentPrompt();
+  $messages.innerHTML = '';
+  if (!p) return;
+  $messages.appendChild(msgEl('user', '$ you', p.userText));
+  p.narration.forEach((line, i) => {
+    setTimeout(() => {
+      $messages.appendChild(msgEl('aware', 'claude', mdInline(line)));
+      $messages.scrollTop = $messages.scrollHeight;
+    }, 180 * (i + 1));
+  });
+}
+// Local timestamp, stamped when a chat block is created: YYYY-MM-DD HH:MM:SS.
+function nowStamp(d = new Date()) {
+  const p = (n) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`;
+}
+function msgEl(cls, who, html) {
+  const div = document.createElement('div');
+  div.className = 'msg ' + cls;
+  div.innerHTML = `<div class="who"><span class="who-name">${who}</span><span class="who-time">${nowStamp()}</span></div><div class="body">${html}</div>`;
+  return div;
+}
+function mdInline(s) {
+  return s.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>').replace(/`(.+?)`/g, '<code>$1</code>');
+}
+
+function renderTopology() {
+  const p = currentPrompt();
+  if (!p) { renderCanvasPlaceholder('empty'); return; }
+  $topology.innerHTML = '';
+  $topology.className = 'topology';
+  $topology.style.cssText = '';
+  if (dagResizeObserver) { dagResizeObserver.disconnect(); dagResizeObserver = null; }
+
+  if (p.layout === 'dag') {
+    renderDagTopology(p);
+  } else {
+    renderLinearTopology(p);
+  }
+  const firstId = nodeIds(p)[0];
+  if (!state.selectedAgentId || !nodeIds(p).includes(state.selectedAgentId)) {
+    selectAgent(firstId);
+  } else {
+    selectAgent(state.selectedAgentId);
+  }
+  resetView(); // fresh 100% + centred view per render; also re-syncs the zoom % label
+}
+
+function renderLinearTopology(p) {
+  const ports = computePorts(p);
+  p.nodes.forEach((id, i) => {
+    if (i > 0) $topology.appendChild(wireEl(i - 1, p.wires[i - 1]));
+    $topology.appendChild(cardEl(id, ports[id]));
+  });
+}
+
+function renderDagTopology(p) {
+  $topology.classList.add('dag');
+  const maxRow = Math.max(...p.nodes.map(n => n.row));
+  const maxCol = Math.max(...p.nodes.map(n => n.col));
+  $topology.style.gridTemplateRows = `repeat(${maxRow}, auto)`;
+  $topology.style.gridTemplateColumns = `repeat(${maxCol}, auto)`;
+
+  const ports = computePorts(p);
+  dagCardMap = {};
+  p.nodes.forEach(n => {
+    const card = cardEl(n.id, ports[n.id]);
+    card.style.gridRow = n.row;
+    card.style.gridColumn = n.col;
+    $topology.appendChild(card);
+    dagCardMap[n.id] = card;
+  });
+
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.classList.add('wires-svg');
+  svg.id = 'wires-svg';
+  $topology.appendChild(svg);
+
+  requestAnimationFrame(() => drawDagWires(svg, p.connections));
+  dagResizeObserver = new ResizeObserver(() => drawDagWires(svg, p.connections));
+  dagResizeObserver.observe($topology);
+}
+
+function drawDagWires(svg, connections) {
+  svg.innerHTML = '';
+  connections.forEach((c, idx) => {
+    const fromEl = dagCardMap[c.from];
+    const toEl   = dagCardMap[c.to];
+    if (!fromEl || !toEl) return;
+    // Use offsetLeft/offsetTop (unscaled, relative to .topology) so SVG aligns under any zoom transform.
+    const x1 = fromEl.offsetLeft + fromEl.offsetWidth;
+    const y1 = fromEl.offsetTop + fromEl.offsetHeight / 2;
+    const x2 = toEl.offsetLeft;
+    const y2 = toEl.offsetTop + toEl.offsetHeight / 2;
+    const dx = Math.max(28, (x2 - x1) * 0.45);
+
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', `M ${x1} ${y1} C ${x1+dx} ${y1}, ${x2-dx} ${y2}, ${x2} ${y2}`);
+    path.classList.add('dag-wire');
+    path.dataset.connIdx = idx;
+    svg.appendChild(path);
+
+    // Arrow head — rotated to follow the curve's tangent at the endpoint.
+    // Cubic Bezier control points share the start/end Y, so the analytic
+    // tangent is always horizontal; instead, sample a point near t=1 and use
+    // the chord from there to the endpoint as the visual approach direction.
+    const t = 0.88, u = 1 - t;
+    const bx = u*u*u*x1 + 3*u*u*t*(x1+dx) + 3*u*t*t*(x2-dx) + t*t*t*x2;
+    const by = u*u*u*y1 + 3*u*u*t*y1     + 3*u*t*t*y2       + t*t*t*y2;
+    const ang = Math.atan2(y2 - by, x2 - bx);
+    const cos = Math.cos(ang), sin = Math.sin(ang);
+    const h = 9, w = 5; // arrow length (along tangent) and half-width
+    const tipX = x2 - 1 * cos, tipY = y2 - 1 * sin;
+    const blX = tipX + (-h) * cos - (-w) * sin, blY = tipY + (-h) * sin + (-w) * cos;
+    const brX = tipX + (-h) * cos - ( w) * sin, brY = tipY + (-h) * sin + ( w) * cos;
+    const arrow = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+    arrow.setAttribute('points', `${blX},${blY} ${brX},${brY} ${tipX},${tipY}`);
+    arrow.classList.add('dag-arrow');
+    arrow.dataset.connIdx = idx;
+    svg.appendChild(arrow);
+
+    if (c.label) {
+      const lx = (x1 + x2) / 2;
+      const ly = (y1 + y2) / 2;
+      const charW = 5.6;
+      const w = c.label.length * charW + 12;
+      const bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+      bg.setAttribute('x', lx - w/2);
+      bg.setAttribute('y', ly - 8);
+      bg.setAttribute('width', w);
+      bg.setAttribute('height', 14);
+      bg.setAttribute('rx', 2);
+      bg.classList.add('dag-label-bg');
+      svg.appendChild(bg);
+
+      const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+      label.setAttribute('x', lx);
+      label.setAttribute('y', ly + 3);
+      label.setAttribute('text-anchor', 'middle');
+      label.classList.add('dag-label');
+      label.textContent = c.label;
+      svg.appendChild(label);
+    }
+  });
+}
+
+function cardEl(id, ports) {
+  const a = AGENTS[id];
+  ports = ports || { in: 0, out: 0 };
+  const div = document.createElement('div');
+  div.className = 'agent-card';
+  div.dataset.agentId = id;
+  div.draggable = true;
+  const faved = state.favorites.some(f => f.id === id);
+  div.innerHTML = `
+    <button class="fav-btn ${faved ? 'faved' : ''}" data-fav="${id}" data-tip="${faved ? 'Saved as Template' : 'Save as Template'}">★</button>
+    <div class="head">
+      <div class="head-left">
+        <div class="kind">${a.kind}</div>
+        <div class="ver">${a.version}</div>
+      </div>
+      <div class="icon">${a.icon}</div>
+    </div>
+    <div class="title">${a.title}</div>
+    <div class="subtitle">${a.subtitle}</div>
+    <div class="blurb">${a.blurb}</div>
+    <div class="footer-row">
+      <span class="ports"><span class="ports-num">${ports.in}</span> in <span class="ports-arrow">·</span> <span class="ports-num">${ports.out}</span> out</span>
+      <span class="inspect-hint">inspect ▸</span>
+    </div>
+  `;
+  div.onclick = (e) => {
+    if (e.target.closest('.fav-btn')) return;
+    selectAgent(id);
+  };
+  div.querySelector('.fav-btn').onclick = (e) => {
+    e.stopPropagation();
+    toggleFav(id);
+  };
+  div.addEventListener('dragstart', (e) => {
+    e.dataTransfer.setData('text/plain', id);
+    e.dataTransfer.effectAllowed = 'copy';
+    div.classList.add('dragging');
+  });
+  div.addEventListener('dragend', () => div.classList.remove('dragging'));
+  return div;
+}
+
+function wireEl(idx, label) {
+  const wrap = document.createElement('div');
+  wrap.className = 'wire-wrap';
+  wrap.innerHTML = `
+    <div class="wire-label">${label || ''}</div>
+    <div class="wire" data-wire-idx="${idx}"><div class="pulse"></div></div>
+  `;
+  return wrap;
+}
+
+function selectAgent(id) {
+  state.selectedAgentId = id;
+  document.querySelectorAll('.agent-card').forEach(c => {
+    c.classList.toggle('selected', c.dataset.agentId === id);
+  });
+  const a = AGENTS[id];
+  if (a) $inspectRole.textContent = a.title.toLowerCase();
+  renderInspect();
+}
+
+function renderInspect() {
+  const a = AGENTS[state.selectedAgentId];
+  if (!a) {
+    $inspectBd.innerHTML = '<div class="empty-state">Click an agent in the canvas to inspect.</div>';
+    return;
+  }
+  // Stale find-highlights reference text nodes from a now-discarded <pre>; clear
+  // them on every re-render so they can't linger over the wrong tab/node.
+  clearCodeFind();
+  const nid = state.selectedAgentId;
+  const header = `
+    <div class="inspect-head-row">
+      <div class="inspect-title">${a.title}</div>
+      <button class="inspect-id" type="button" data-copy-id="${escapeHtml(nid)}" data-tip="Copy node id">${escapeHtml(nid)} ⎘</button>
+    </div>
+    <div class="inspect-meta">${a.kind} · ${a.version} · ${a.subtitle}</div>
+  `;
+  let body = '';
+  switch (state.currentTab) {
+    case 'description': body = `<div class="inspect-content">${a.description}</div>`; break;
+    case 'skill':       body = `<div class="inspect-content">${a.skill}</div>`; break;
+    case 'code':
+      body = `<div class="code-toolbar">` +
+        `<div class="code-find"><input type="text" id="code-find-input" class="code-find-input" placeholder="Find in code…" aria-label="Find in code" autocomplete="off" spellcheck="false"><span class="code-find-count" id="code-find-count"></span></div>` +
+        `<button class="code-wrap-btn${codeWrap ? ' active' : ''}" id="code-wrap-btn" type="button" aria-pressed="${codeWrap}" data-tip="Wrap long lines to the panel width — no horizontal scroll">↵ Wrap</button>` +
+        `</div>` +
+        `<pre class="code${codeWrap ? ' wrap' : ''}" id="code-pre">${a.code}</pre>`;
+      break;
+    case 'execution':
+      if (!state.hasRun) {
+        body = '<div class="empty-state">No execution yet. Hit <strong>▶ Run workflow</strong>.</div>';
+      } else {
+        const rows = a.execution || [];
+        const nodes = [...new Set(rows.map(r => r.node).filter(Boolean))];
+        // Auto-heal a stale filter (node no longer in this run's trace) → show all.
+        const filter = (state.traceFilter && nodes.includes(state.traceFilter)) ? state.traceFilter : null;
+        const chips = nodes.length > 1
+          ? `<div class="trace-filter"><button class="tf-chip${!filter ? ' active' : ''}" type="button" data-tf="">all</button>` +
+            nodes.map(n => `<button class="tf-chip${filter === n ? ' active' : ''}" type="button" data-tf="${escapeHtml(n)}">${escapeHtml(n)}</button>`).join('') +
+            `</div>`
+          : '';
+        const shown = filter ? rows.filter(r => r.node === filter) : rows;
+        body = chips + `<div class="trace">${
+          shown.map(r => `
+            <div class="row">
+              <span class="ts">${r.ts}</span>
+              <span class="lvl ${r.lvl}">${r.lvl}</span>
+              <span class="msg">${r.msg}</span>
+            </div>
+          `).join('')
+        }</div>`;
+      }
+      break;
+  }
+  $inspectBd.innerHTML = header + body;
+}
+
+// Code tab "Wrap" toggle: flip word-wrap on the <pre>, persist, update in place
+// (delegated so it survives every renderInspect rebuild).
+document.addEventListener('click', (e) => {
+  const btn = e.target.closest('#code-wrap-btn');
+  if (!btn) return;
+  codeWrap = !codeWrap;
+  try { localStorage.setItem(CODE_WRAP_KEY, codeWrap); } catch {}
+  btn.classList.toggle('active', codeWrap);
+  btn.setAttribute('aria-pressed', String(codeWrap));
+  const pre = $inspectBd.querySelector('pre.code');
+  if (pre) pre.classList.toggle('wrap', codeWrap);
+});
+
+// ── Small dev affordances ────────────────────────────────────────────────────
+// Copy a node's id from the inspect header (delegated; survives re-render).
+document.addEventListener('click', (e) => {
+  const idBtn = e.target.closest('.inspect-id');
+  if (!idBtn) return;
+  const id = idBtn.dataset.copyId || '';
+  if (!navigator.clipboard) { showToast('Could not copy', 'warn'); return; }
+  navigator.clipboard.writeText(id)
+    .then(() => showToast('Copied node id: ' + id, 'ok'))
+    .catch(() => showToast('Could not copy', 'warn'));
+});
+
+// Execution-trace node filter: clicking a chip narrows the trace to one node.
+document.addEventListener('click', (e) => {
+  const chip = e.target.closest('.tf-chip');
+  if (!chip) return;
+  state.traceFilter = chip.dataset.tf || null;
+  renderInspect();
+});
+
+// Find-in-code: highlight matches in the syntax-highlighted <pre> WITHOUT
+// mutating its DOM, via the CSS Custom Highlight API. Enter cycles forward,
+// Shift+Enter back, Esc clears. Degrades gracefully where the API is absent.
+let codeFindRanges = [];
+let codeFindIdx = -1;
+function clearCodeFind() {
+  codeFindRanges = [];
+  codeFindIdx = -1;
+  if (window.CSS && CSS.highlights) {
+    CSS.highlights.delete('code-find');
+    CSS.highlights.delete('code-find-active');
+  }
+}
+function runCodeFind(query) {
+  const pre = document.getElementById('code-pre');
+  const count = document.getElementById('code-find-count');
+  clearCodeFind();
+  if (count) count.textContent = '';
+  if (!pre || !(window.CSS && CSS.highlights && window.Highlight)) return;
+  const q = (query || '').trim();
+  if (!q) return;
+  const ql = q.toLowerCase();
+  const walker = document.createTreeWalker(pre, NodeFilter.SHOW_TEXT);
+  let node;
+  while ((node = walker.nextNode())) {
+    const text = node.nodeValue.toLowerCase();
+    let i = 0;
+    while ((i = text.indexOf(ql, i)) >= 0) {
+      const r = document.createRange();
+      r.setStart(node, i);
+      r.setEnd(node, i + q.length);
+      codeFindRanges.push(r);
+      i += q.length;
+    }
+  }
+  if (!codeFindRanges.length) { if (count) count.textContent = '0/0'; return; }
+  CSS.highlights.set('code-find', new Highlight(...codeFindRanges));
+  codeFindIdx = 0;
+  showActiveFind();
+}
+function showActiveFind() {
+  const count = document.getElementById('code-find-count');
+  if (!codeFindRanges.length || !(window.CSS && CSS.highlights && window.Highlight)) return;
+  const active = codeFindRanges[codeFindIdx];
+  CSS.highlights.set('code-find-active', new Highlight(active));
+  if (count) count.textContent = `${codeFindIdx + 1}/${codeFindRanges.length}`;
+  // Scroll the active match into view within the <pre> when it's off-screen.
+  const pre = document.getElementById('code-pre');
+  const rect = active.getBoundingClientRect && active.getBoundingClientRect();
+  if (pre && rect) {
+    const pr = pre.getBoundingClientRect();
+    if (rect.top < pr.top || rect.bottom > pr.bottom) {
+      pre.scrollTop += (rect.top - pr.top) - pre.clientHeight / 2;
+    }
+  }
+}
+document.addEventListener('input', (e) => {
+  if (e.target.id === 'code-find-input') runCodeFind(e.target.value);
+});
+document.addEventListener('keydown', (e) => {
+  if (e.target.id !== 'code-find-input') return;
+  if (e.key === 'Enter') {
+    e.preventDefault();
+    if (!codeFindRanges.length) return;
+    codeFindIdx = (codeFindIdx + (e.shiftKey ? -1 : 1) + codeFindRanges.length) % codeFindRanges.length;
+    showActiveFind();
+  } else if (e.key === 'Escape') {
+    e.preventDefault();
+    e.target.value = '';
+    runCodeFind('');
+  }
+});
+
+/* ============= FAVORITES ============= */
+
+function toggleFav(agentId) {
+  const i = state.favorites.findIndex(f => f.id === agentId);
+  if (i >= 0) {
+    state.favorites.splice(i, 1);
+    saveFavs();
+    renderFavBar();
+    refreshFavMarkers();
+    return;
+  }
+  openAddFavModal(agentId);
+}
+
+function openAddFavModal(agentId) {
+  state.pendingFavAgentId = agentId;
+  const a = AGENTS[agentId];
+  $addFavSub.textContent = `Pin "${a.title}" for quick reuse across apps.`;
+  $favName.value = a.title;
+  $favCat.value = '';
+  renderCategorySuggestions();
+  $addFavModal.classList.add('show');
+  setTimeout(() => $favCat.focus(), 50);
+}
+
+function renderCategorySuggestions() {
+  const cats = [...new Set(state.favorites.map(f => f.category).filter(Boolean))];
+  const defaults = ['Tekla', 'MEP', 'Fab Pipeline', 'Coordination', 'QA'];
+  const all = [...new Set([...cats, ...defaults])];
+  $favCatSug.innerHTML = all.slice(0, 6).map(c => `<button data-cat="${escapeAttr(c)}">${escapeHtml(c)}</button>`).join('');
+  $favCatSug.querySelectorAll('button').forEach(b => {
+    b.onclick = () => { $favCat.value = b.dataset.cat; };
+  });
+}
+
+function closeAddFavModal() {
+  $addFavModal.classList.remove('show');
+  state.pendingFavAgentId = null;
+}
+
+function commitFav() {
+  if (!state.pendingFavAgentId) return;
+  const name = $favName.value.trim() || AGENTS[state.pendingFavAgentId].title;
+  const category = $favCat.value.trim() || 'Uncategorized';
+  state.favorites.push({ id: state.pendingFavAgentId, name, category });
+  saveFavs();
+  renderFavBar();
+  refreshFavMarkers();
+  closeAddFavModal();
+}
+
+function renderFavBar() {
+  $favCount.textContent = state.favorites.length;
+  if (state.favorites.length === 0) {
+    $favChipRow.innerHTML = '';
+    $favBarEmpty.style.display = 'block';
+    return;
+  }
+  $favBarEmpty.style.display = 'none';
+  $favChipRow.innerHTML = state.favorites.map((f, idx) => `
+    <div class="fav-chip" data-fav-idx="${idx}" data-fav-agent="${f.id}" data-tip="Click to inspect · ${escapeAttr(f.category)}">
+      <span class="cat">${escapeHtml(f.category)}</span>
+      <span class="name">${escapeHtml(f.name)}</span>
+      <span class="del" data-del="${idx}" data-tip="Remove">×</span>
+    </div>
+  `).join('');
+  $favChipRow.querySelectorAll('.fav-chip').forEach(chip => {
+    chip.onclick = (e) => {
+      if (e.target.closest('.del')) return;
+      const id = chip.dataset.favAgent;
+      const p = PROMPTS[state.promptKey];
+      if (nodeIds(p).includes(id)) {
+        selectAgent(id);
+      } else {
+        chip.style.borderColor = 'var(--warn)';
+        setTimeout(() => chip.style.borderColor = '', 600);
+        appendNarration(`<em>${AGENTS[id].title}</em> is favorited but isn't in the current app. Switch prompts or compose a new app to use it.`);
+      }
+    };
+    chip.querySelector('.del').onclick = (e) => {
+      e.stopPropagation();
+      const idx = parseInt(chip.dataset.favIdx, 10);
+      state.favorites.splice(idx, 1);
+      saveFavs();
+      renderFavBar();
+      refreshFavMarkers();
+    };
+  });
+}
+
+function refreshFavMarkers() {
+  document.querySelectorAll('.agent-card .fav-btn').forEach(btn => {
+    const id = btn.dataset.fav;
+    btn.classList.toggle('faved', state.favorites.some(f => f.id === id));
+  });
+  if ($libModal.classList.contains('show')) renderLibrary();
+}
+
+function setupFavDropZone() {
+  $favBar.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'copy';
+    $favBar.classList.add('drag-over');
+  });
+  $favBar.addEventListener('dragleave', (e) => {
+    if (e.target === $favBar) $favBar.classList.remove('drag-over');
+  });
+  $favBar.addEventListener('drop', (e) => {
+    e.preventDefault();
+    $favBar.classList.remove('drag-over');
+    const id = e.dataTransfer.getData('text/plain');
+    if (!id || !AGENTS[id]) return;
+    if (state.favorites.some(f => f.id === id)) {
+      $favBar.style.background = 'var(--accent-soft)';
+      setTimeout(() => $favBar.style.background = '', 300);
+      return;
+    }
+    openAddFavModal(id);
+  });
+}
+
+/* ============= LIBRARY ============= */
+
+function openLibrary() {
+  $libSearch.value = '';
+  renderLibrary();
+  $libModal.classList.add('show');
+}
+
+function renderLibrary() {
+  const q = ($libSearch.value || '').toLowerCase().trim();
+  const items = Object.entries(AGENTS).filter(([id, a]) => {
+    if (!q) return true;
+    return id.includes(q) ||
+           a.title.toLowerCase().includes(q) ||
+           a.kind.toLowerCase().includes(q) ||
+           (a.blurb && a.blurb.toLowerCase().includes(q));
+  });
+  $libList.innerHTML = items.map(([id, a]) => {
+    const faved = state.favorites.some(f => f.id === id);
+    return `
+      <div class="lib-item">
+        <div class="info">
+          <div class="name">${a.title}</div>
+          <div class="meta">${a.kind} · ${a.version}</div>
+          <div class="blurb">${a.blurb}</div>
+        </div>
+        <button class="lib-fav ${faved ? 'faved' : ''}" data-lib-fav="${id}" data-tip="${faved ? 'In favorites' : 'Add to favorites'}">★</button>
+      </div>
+    `;
+  }).join('') || '<div class="empty-state">No agents match.</div>';
+  $libList.querySelectorAll('.lib-fav').forEach(btn => {
+    btn.onclick = () => toggleFav(btn.dataset.libFav);
+  });
+}
+
+/* ============= COLLAPSE ============= */
+
+function applyCollapse() {
+  $app.classList.toggle('left-collapsed',  state.collapse.left);
+  $app.classList.toggle('right-collapsed', state.collapse.right);
+  // redraw DAG wires after layout changes
+  if (isDag()) {
+    const svg = document.getElementById('wires-svg');
+    if (svg) {
+      setTimeout(() => drawDagWires(svg, PROMPTS[state.promptKey].connections), 280);
+    }
+  }
+}
+
+function toggleCollapse(side) {
+  state.collapse[side] = !state.collapse[side];
+  applyCollapse();
+  saveCollapse();
+}
+
+/* ============= RESIZE ============= */
+
+const WIDTHS_KEY = 'floless-demo-widths-v1';
+const MIN_LEFT = 220, MAX_LEFT = 600;
+const MIN_RIGHT = 260, MAX_RIGHT = 700;
+
+function loadWidths() {
+  try {
+    const w = JSON.parse(localStorage.getItem(WIDTHS_KEY) || '{}');
+    if (w.left  != null) $app.style.setProperty('--left-width',  w.left  + 'px');
+    if (w.right != null) $app.style.setProperty('--right-width', w.right + 'px');
+  } catch {}
+}
+
+function saveWidths() {
+  const w = {};
+  const l = $app.style.getPropertyValue('--left-width');
+  const r = $app.style.getPropertyValue('--right-width');
+  if (l) w.left  = parseInt(l, 10);
+  if (r) w.right = parseInt(r, 10);
+  localStorage.setItem(WIDTHS_KEY, JSON.stringify(w));
+}
+
+function setupResize() {
+  document.querySelectorAll('.resize-handle').forEach(handle => {
+    const side = handle.dataset.resize; // 'left' or 'right'
+
+    handle.addEventListener('mousedown', (e) => {
+      e.preventDefault();
+      const startX = e.clientX;
+      const panel  = side === 'left'
+        ? document.querySelector('.chat')
+        : document.querySelector('.inspect');
+      const startW = panel.getBoundingClientRect().width;
+
+      handle.classList.add('dragging');
+      $app.classList.add('resizing');
+      document.body.classList.add('resizing');
+
+      function onMove(ev) {
+        const dx = ev.clientX - startX;
+        let newW;
+        if (side === 'left') {
+          newW = Math.max(MIN_LEFT, Math.min(MAX_LEFT, startW + dx));
+          $app.style.setProperty('--left-width', newW + 'px');
+        } else {
+          newW = Math.max(MIN_RIGHT, Math.min(MAX_RIGHT, startW - dx));
+          $app.style.setProperty('--right-width', newW + 'px');
+        }
+        if (isDag()) {
+          const svg = document.getElementById('wires-svg');
+          if (svg) drawDagWires(svg, PROMPTS[state.promptKey].connections);
+        }
+      }
+      function onUp() {
+        handle.classList.remove('dragging');
+        $app.classList.remove('resizing');
+        document.body.classList.remove('resizing');
+        document.removeEventListener('mousemove', onMove);
+        document.removeEventListener('mouseup', onUp);
+        saveWidths();
+      }
+      document.addEventListener('mousemove', onMove);
+      document.addEventListener('mouseup', onUp);
+    });
+
+    handle.addEventListener('dblclick', () => {
+      if (side === 'left')  $app.style.removeProperty('--left-width');
+      else                  $app.style.removeProperty('--right-width');
+      saveWidths();
+      if (isDag()) {
+        const svg = document.getElementById('wires-svg');
+        if (svg) drawDagWires(svg, PROMPTS[state.promptKey].connections);
+      }
+    });
+  });
+}
+
+/* ============= RUN ============= */
+
+async function runLinearAnimation() {
+  const cards = [...document.querySelectorAll('.agent-card')];
+  const wires = [...document.querySelectorAll('.wire')];
+  for (let i = 0; i < cards.length; i++) {
+    cards[i].classList.add('pulsing');
+    await sleep(450);
+    cards[i].classList.remove('pulsing');
+    if (i < wires.length) {
+      wires[i].classList.add('active', 'firing');
+      await sleep(700);
+      wires[i].classList.remove('firing');
+    }
+  }
+}
+
+async function runDagAnimation(p) {
+  const cols = {};
+  p.nodes.forEach(n => {
+    if (!cols[n.col]) cols[n.col] = [];
+    cols[n.col].push(n.id);
+  });
+  const sortedCols = Object.keys(cols).map(Number).sort((a, b) => a - b);
+
+  for (const col of sortedCols) {
+    cols[col].forEach(id => dagCardMap[id]?.classList.add('pulsing'));
+    await sleep(500);
+    cols[col].forEach(id => dagCardMap[id]?.classList.remove('pulsing'));
+
+    const out = p.connections
+      .map((c, idx) => ({ c, idx }))
+      .filter(({ c }) => cols[col].includes(c.from));
+    out.forEach(({ idx }) => {
+      const w = document.querySelector(`.dag-wire[data-conn-idx="${idx}"]`);
+      const a = document.querySelector(`.dag-arrow[data-conn-idx="${idx}"]`);
+      w?.classList.add('active', 'firing');
+      a?.classList.add('active');
+    });
+    await sleep(700);
+    document.querySelectorAll('.dag-wire.firing').forEach(w => w.classList.remove('firing'));
+  }
+}
+
+/* ============= EVENTS ============= */
+
+$promptSel.onchange = () => {
+  state.promptKey = $promptSel.value;
+  state.hasRun = false;
+  state.selectedAgentId = null;
+  renderChat();
+  renderTopology();
+};
+
+$tabs.onclick = (e) => {
+  const btn = e.target.closest('button');
+  if (!btn) return;
+  state.currentTab = btn.dataset.tab;
+  document.querySelectorAll('.tabs button').forEach(b => b.classList.toggle('active', b === btn));
+  renderInspect();
+};
+
+$runBtn.onclick = async () => {
+  const p = currentPrompt();
+  if (state.running || !p) return; // aware.js overrides this handler; guard the null/no-workflow case
+  state.running = true;
+  $runBtn.disabled = true;
+  $runBtn.textContent = '◆ Running…';
+
+  if (p.layout === 'dag') await runDagAnimation(p);
+  else                    await runLinearAnimation();
+
+  state.hasRun = true;
+  state.running = false;
+  $runBtn.disabled = false;
+  $runBtn.textContent = '▶ Run workflow';
+
+  state.currentTab = 'execution';
+  document.querySelectorAll('.tabs button').forEach(b => b.classList.toggle('active', b.dataset.tab === 'execution'));
+  renderInspect();
+  appendNarration(`Execution complete · ${nodeIds(p).length} steps fired · check the <strong>Execution</strong> tab on each agent for the full trace.`);
+};
+
+$browseBtn.onclick = openLibrary;
+
+document.querySelectorAll('.panel-toggle').forEach(btn => {
+  btn.onclick = () => toggleCollapse(btn.dataset.side);
+});
+
+document.getElementById('fav-cancel').onclick = closeAddFavModal;
+document.getElementById('fav-save').onclick = commitFav;
+document.getElementById('lib-close').onclick = () => $libModal.classList.remove('show');
+$addFavModal.onclick = (e) => { if (e.target === $addFavModal) closeAddFavModal(); };
+$libModal.onclick = (e) => { if (e.target === $libModal) $libModal.classList.remove('show'); };
+
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') {
+    if ($addFavModal.classList.contains('show')) closeAddFavModal();
+    if ($libModal.classList.contains('show')) $libModal.classList.remove('show');
+  }
+  if (e.key === 'Enter' && $addFavModal.classList.contains('show')) commitFav();
+});
+
+$libSearch.oninput = renderLibrary;
+
+window.addEventListener('resize', () => {
+  if (isDag()) {
+    const svg = document.getElementById('wires-svg');
+    if (svg) drawDagWires(svg, PROMPTS[state.promptKey].connections);
+  }
+});
+
+function appendNarration(html) {
+  $messages.appendChild(msgEl('aware', 'claude', html));
+  $messages.scrollTop = $messages.scrollHeight;
+}
+function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
+function escapeHtml(s) {
+  return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+}
+function escapeAttr(s) { return escapeHtml(s).replace(/"/g, '&quot;'); }
+
+/* ============= MENU ============= */
+
+const $menuBtn = document.getElementById('menu-btn');
+const $menu    = document.getElementById('menu');
+
+function toggleMenu(force) {
+  const willOpen = (force === undefined) ? !$menu.classList.contains('show') : force;
+  $menu.classList.toggle('show', willOpen);
+  $menuBtn.classList.toggle('open', willOpen);
+}
+
+$menuBtn.addEventListener('click', (e) => {
+  e.stopPropagation();
+  toggleMenu();
+  // Re-sync the start-on-login toggle whenever the menu opens — the task can be
+  // changed out-of-band (Windows Settings → Startup apps). refreshStartup is a
+  // hoisted function declaration defined later in this file.
+  if ($menu.classList.contains('show')) { try { refreshStartup(); } catch {} }
+});
+
+document.addEventListener('click', (e) => {
+  if ($menu.classList.contains('show') &&
+      !$menu.contains(e.target) &&
+      e.target !== $menuBtn) {
+    toggleMenu(false);
+  }
+});
+
+$menu.addEventListener('click', (e) => {
+  const item = e.target.closest('.menu-item');
+  if (!item) return;
+  const action = item.dataset.action;
+  toggleMenu(false);
+  handleMenuAction(action);
+});
+
+function handleMenuAction(action) {
+  switch (action) {
+    case 'open':         doOpen(); break;
+    case 'save':         doSave(); break;
+    case 'save-as':      doSaveAs(); break;
+    case 'find':         openFind(); break;
+    case 'integrations': openIntegrations(); break;
+    case 'routines': openRoutines(); break;
+  }
+}
+
+/* ============= ACTIONS ============= */
+// "New" and local-file "Open" were removed: a workflow is an installed AWARE app,
+// not a file the UI authors. doOpen is reassigned in aware.js to focus the workflow
+// dropdown; doSave/doSaveAs are reassigned there to persist the open workflow's inputs.
+
+function doOpen() { $promptSel.focus(); }
+
+function doSave() {
+  const p = currentPrompt();
+  if (!p) return;
+  showToast(`Saved · ${p.name}`, 'ok');
+}
+
+function doSaveAs() {
+  const p = currentPrompt();
+  if (!p) return;
+  const blob = new Blob([JSON.stringify(p, null, 2)], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = p.name;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  setTimeout(() => URL.revokeObjectURL(url), 100);
+  showToast(`Downloaded ${p.name}`, 'ok');
+}
+
+/* ============= FIND ============= */
+
+const $findOverlay = document.getElementById('find-overlay');
+const $findInput   = document.getElementById('find-input');
+const $findCount   = document.getElementById('find-count');
+
+function openFind() {
+  $findOverlay.classList.add('show');
+  $findInput.value = '';
+  $findCount.textContent = '';
+  setTimeout(() => $findInput.focus(), 50);
+}
+function closeFind() {
+  $findOverlay.classList.remove('show');
+  document.querySelectorAll('.agent-card').forEach(c => {
+    c.classList.remove('find-dim', 'find-match');
+  });
+}
+
+$findInput.addEventListener('input', () => {
+  const q = $findInput.value.toLowerCase().trim();
+  let matches = 0;
+  document.querySelectorAll('.agent-card').forEach(card => {
+    if (!q) {
+      card.classList.remove('find-dim', 'find-match');
+      return;
+    }
+    const a = AGENTS[card.dataset.agentId];
+    const hit = a && (
+      a.title.toLowerCase().includes(q) ||
+      a.kind.toLowerCase().includes(q) ||
+      (a.blurb || '').toLowerCase().includes(q)
+    );
+    card.classList.toggle('find-match', !!hit);
+    card.classList.toggle('find-dim', !hit);
+    if (hit) matches++;
+  });
+  $findCount.textContent = q ? `${matches} match${matches === 1 ? '' : 'es'}` : '';
+});
+
+document.getElementById('find-close').onclick = closeFind;
+
+/* ============= THEME ============= */
+
+const THEME_KEY = 'floless-demo-theme-v1';
+
+function setTheme(theme) {
+  document.documentElement.dataset.theme = theme;
+  localStorage.setItem(THEME_KEY, theme);
+  document.querySelectorAll('.theme-btn').forEach(b => {
+    b.classList.toggle('active', b.dataset.theme === theme);
+  });
+  if (isDag()) {
+    const svg = document.getElementById('wires-svg');
+    if (svg) setTimeout(() => drawDagWires(svg, PROMPTS[state.promptKey].connections), 30);
+  }
+}
+
+function initTheme() {
+  const t = localStorage.getItem(THEME_KEY) || 'dark';
+  setTheme(t);
+}
+
+document.querySelectorAll('.theme-btn').forEach(b => {
+  b.addEventListener('click', () => setTheme(b.dataset.theme));
+});
+
+/* ============= START ON LOGIN (autostart) ============= */
+// Toggles the per-user logon Scheduled Task (server/autostart.mjs) via /api/autostart.
+// The row is HIDDEN unless the server reports `supported` (Windows packaged build) —
+// the app's rule is hide, never show a dead control.
+const $startupRow    = document.getElementById('menu-startup');
+const $startupToggle = document.getElementById('startup-toggle');
+
+async function refreshStartup() {
+  try {
+    const r = await fetch('/api/autostart');
+    if (!r.ok) { if ($startupRow) $startupRow.hidden = true; return; }
+    const d = await r.json();
+    const supported = !!d.supported;
+    if ($startupRow) $startupRow.hidden = !supported;
+    if (supported && $startupToggle) $startupToggle.checked = !!d.enabled;
+  } catch { if ($startupRow) $startupRow.hidden = true; }
+}
+
+if ($startupToggle) {
+  $startupToggle.addEventListener('change', async () => {
+    const want = $startupToggle.checked;
+    $startupToggle.disabled = true;
+    try {
+      const r = await fetch('/api/autostart', {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ enabled: want }),
+      });
+      const d = await r.json().catch(() => ({}));
+      if (!r.ok || !d.ok) throw new Error(d.error || 'request failed');
+      $startupToggle.checked = !!d.enabled; // trust server truth (schtasks re-queried)
+      // Success is silent — the switch position IS the confirmation (matches Theme).
+      // UX review 2026-05-31: a preference write doesn't rise to a toast.
+    } catch (e) {
+      $startupToggle.checked = !want; // revert the optimistic flip
+      showToast('Couldn’t update startup setting — check the server log', 'err');
+    } finally {
+      $startupToggle.disabled = false;
+    }
+  });
+}
+
+// Initial read + a refresh each time the menu opens (state can change out-of-band,
+// e.g. the user disabling the task in Windows Settings).
+refreshStartup();
+
+/* ============= TOAST ============= */
+
+function showToast(msg, type) {
+  const c = document.getElementById('toast-container');
+  const t = document.createElement('div');
+  t.className = `toast ${type || 'info'}`;
+  const span = document.createElement('span');
+  span.className = 'toast-msg';
+  span.textContent = msg; // textContent — never innerHTML (msg can be a raw server error)
+  t.appendChild(span);
+  const dismiss = () => {
+    t.style.transition = 'opacity 0.3s, transform 0.3s';
+    t.style.opacity = '0';
+    t.style.transform = 'translateY(8px)';
+    setTimeout(() => t.remove(), 300);
+  };
+  // Errors stay until dismissed (they carry an action to read); warnings linger
+  // longer; info/ok auto-dismiss. warn/err get an × so they can be closed early.
+  const ms = { ok: 2500, info: 2500, warn: 5000, err: 0 }[type] ?? 2500;
+  if (type === 'warn' || type === 'err') {
+    const x = document.createElement('button');
+    x.className = 'toast-close';
+    x.type = 'button';
+    x.setAttribute('aria-label', 'Dismiss');
+    x.textContent = '×';
+    x.onclick = dismiss;
+    t.appendChild(x);
+  }
+  c.appendChild(t);
+  if (ms > 0) setTimeout(dismiss, ms);
+}
+
+/* ============= ZOOM + PAN ============= */
+
+const ZOOM_LEVELS = [0.5, 0.6, 0.75, 0.85, 1.0, 1.15, 1.3, 1.5, 1.75, 2.0];
+const MIN_ZOOM = ZOOM_LEVELS[0];
+const MAX_ZOOM = ZOOM_LEVELS[ZOOM_LEVELS.length - 1];
+let zoom = 1;            // continuous scale (fit produces arbitrary values, not just presets)
+let panX = 0, panY = 0;  // pan offset in screen px (transform-origin is the canvas centre)
+
+function applyTransform() {
+  $topology.style.transformOrigin = '50% 50%';
+  $topology.style.transform = `translate(${panX}px, ${panY}px) scale(${zoom})`;
+  document.getElementById('zoom-reset').textContent = Math.round(zoom * 100) + '%';
+  document.getElementById('zoom-out').disabled = zoom <= MIN_ZOOM + 1e-3;
+  document.getElementById('zoom-in').disabled  = zoom >= MAX_ZOOM - 1e-3;
+  if (isDag()) {
+    const svg = document.getElementById('wires-svg');
+    if (svg) requestAnimationFrame(() => drawDagWires(svg, PROMPTS[state.promptKey].connections));
+  }
+}
+
+// Step to the next preset zoom above (+1) or below (-1) the current continuous zoom.
+function zoomBy(delta) {
+  const next = delta > 0
+    ? (ZOOM_LEVELS.find((z) => z > zoom + 1e-3) ?? MAX_ZOOM)
+    : ([...ZOOM_LEVELS].reverse().find((z) => z < zoom - 1e-3) ?? MIN_ZOOM);
+  if (Math.abs(next - zoom) < 1e-3) return;
+  zoom = next;
+  applyTransform();
+}
+
+// Reset to 100% + recentre. Also called by renderTopology so the zoom/pan state
+// matches the transform it clears (otherwise the % label would go stale on switch).
+function resetView() { zoom = 1; panX = 0; panY = 0; applyTransform(); }
+
+// Fit the whole workflow into the visible canvas (zooms in OR out), then recentre.
+// Measures the real node cluster — offset* are unscaled layout coords, so they're
+// unaffected by the current transform.
+function fitToScreen() {
+  const cards = [...$topology.querySelectorAll('.agent-card')];
+  if (!cards.length) { resetView(); return; }
+  let minL = Infinity, minT = Infinity, maxR = -Infinity, maxB = -Infinity;
+  cards.forEach((c) => {
+    minL = Math.min(minL, c.offsetLeft);
+    minT = Math.min(minT, c.offsetTop);
+    maxR = Math.max(maxR, c.offsetLeft + c.offsetWidth);
+    maxB = Math.max(maxB, c.offsetTop + c.offsetHeight);
+  });
+  const contentW = maxR - minL, contentH = maxB - minT;
+  if (contentW <= 0 || contentH <= 0) { resetView(); return; }
+  const pad = 40;
+  const fit = Math.min(($topology.clientWidth - pad * 2) / contentW, ($topology.clientHeight - pad * 2) / contentH);
+  zoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, fit));
+  panX = 0; panY = 0; // origin 50% 50% keeps the cluster centred
+  applyTransform();
+}
+
+document.getElementById('zoom-out').onclick   = () => zoomBy(-1);
+document.getElementById('zoom-in').onclick    = () => zoomBy(+1);
+document.getElementById('zoom-reset').onclick = () => resetView();
+const $zoomFit = document.getElementById('zoom-fit');
+if ($zoomFit) $zoomFit.onclick = () => fitToScreen();
+
+// Ctrl/Cmd + scroll wheel = zoom on canvas (skips OS-level browser zoom)
+let zoomAccum = 0;
+document.querySelector('.canvas').addEventListener('wheel', (e) => {
+  if (!e.ctrlKey && !e.metaKey) return;
+  e.preventDefault();
+  zoomAccum += e.deltaY;
+  if (Math.abs(zoomAccum) >= 40) {
+    zoomBy(zoomAccum < 0 ? +1 : -1);
+    zoomAccum = 0;
+  }
+}, { passive: false });
+
+// Middle-mouse drag = pan the (possibly zoomed) canvas. preventDefault on the middle
+// button suppresses Windows' autoscroll bubble; the offset is screen-px (1:1 with the
+// cursor) because translate sits OUTSIDE the scale in the transform list.
+const $canvasEl = document.querySelector('.canvas');
+let panning = false, panFromX = 0, panFromY = 0, panBaseX = 0, panBaseY = 0;
+$canvasEl.addEventListener('mousedown', (e) => {
+  if (e.button !== 1) return;
+  e.preventDefault();
+  panning = true;
+  panFromX = e.clientX; panFromY = e.clientY;
+  panBaseX = panX; panBaseY = panY;
+  $canvasEl.classList.add('panning');
+});
+window.addEventListener('mousemove', (e) => {
+  if (!panning) return;
+  panX = panBaseX + (e.clientX - panFromX);
+  panY = panBaseY + (e.clientY - panFromY);
+  applyTransform();
+});
+window.addEventListener('mouseup', () => {
+  if (!panning) return;
+  panning = false;
+  $canvasEl.classList.remove('panning');
+});
+$canvasEl.addEventListener('auxclick', (e) => { if (e.button === 1) e.preventDefault(); });
+
+/* ============= INTEGRATIONS ============= */
+// The real, server-backed Integrations window lives in aware.js (openIntegrations/
+// renderIntegrations are reassigned there from /api/integrations). app.js only owns
+// the element refs + close wiring the live version reuses.
+
+const $integrationsModal = document.getElementById('integrations-modal');
+const $integrationsList  = document.getElementById('integrations-list');
+
+document.getElementById('integrations-close').onclick = () => $integrationsModal.classList.remove('show');
+$integrationsModal.onclick = (e) => { if (e.target === $integrationsModal) $integrationsModal.classList.remove('show'); };
+
+/* ============= KEYBOARD SHORTCUTS ============= */
+
+document.addEventListener('keydown', (e) => {
+  const tag = e.target.tagName;
+  const inField = tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';
+
+  if (inField) {
+    if (e.key === 'Escape' && e.target === $findInput) closeFind();
+    return;
+  }
+
+  const cmd = e.ctrlKey || e.metaKey;
+  if (cmd && !e.shiftKey && e.key.toLowerCase() === 'o') { e.preventDefault(); doOpen(); return; }
+  if (cmd && e.shiftKey && e.key.toLowerCase() === 's')  { e.preventDefault(); doSaveAs(); return; }
+  if (cmd && !e.shiftKey && e.key.toLowerCase() === 's') { e.preventDefault(); doSave(); return; }
+  if (cmd && e.key.toLowerCase() === 'f') { e.preventDefault(); openFind(); return; }
+  if (cmd && e.key.toLowerCase() === 'i') { e.preventDefault(); openIntegrations(); return; }
+  if (cmd && (e.key === '=' || e.key === '+')) { e.preventDefault(); zoomBy(+1); return; }
+  if (cmd && e.key === '-') { e.preventDefault(); zoomBy(-1); return; }
+  if (cmd && e.key === '0') { e.preventDefault(); resetView(); return; }
+  if (e.key === 'Home') { e.preventDefault(); fitToScreen(); return; }
+  if (e.key === 'Escape') {
+    if ($findOverlay.classList.contains('show')) closeFind();
+    if ($integrationsModal.classList.contains('show')) $integrationsModal.classList.remove('show');
+    if ($menu.classList.contains('show')) toggleMenu(false);
+  }
+});
+
+/* ============= TOOLTIPS ============= */
+// App-styled tooltips for any [data-tip] element — one reused box, event-delegated
+// (so JS-generated cards/chips/buttons get them for free), shown on hover AND
+// keyboard focus, and clamped to the viewport. Replaces native data-tip="" which can't
+// be themed to match the dark skin. Hand-rolled; the thin UI ships no tooltip lib.
+(function initTooltips() {
+  const tip = document.createElement('div');
+  tip.id = 'tooltip';
+  tip.setAttribute('role', 'tooltip');
+  tip.hidden = true;
+  document.body.appendChild(tip);
+  let anchor = null;
+
+  function place() {
+    if (!anchor) return;
+    const r = anchor.getBoundingClientRect();
+    const tw = tip.offsetWidth, th = tip.offsetHeight, gap = 8;
+    let top = r.bottom + gap;
+    if (top + th > window.innerHeight - 6) top = r.top - gap - th; // flip above near the viewport bottom
+    let left = r.left + r.width / 2 - tw / 2;
+    left = Math.max(6, Math.min(left, window.innerWidth - tw - 6)); // clamp to viewport
+    tip.style.left = Math.round(left) + 'px';
+    tip.style.top = Math.round(Math.max(6, top)) + 'px';
+  }
+  function show(el) {
+    const text = el.getAttribute('data-tip');
+    if (!text) return; // empty data-tip = nothing to show
+    anchor = el;
+    tip.textContent = text; // textContent, not innerHTML — never renders markup
+    tip.hidden = false;
+    place();
+  }
+  function hide() { anchor = null; tip.hidden = true; }
+
+  document.addEventListener('mouseover', (e) => {
+    const el = e.target.closest('[data-tip]');
+    if (!el || (e.relatedTarget && el.contains(e.relatedTarget))) return; // ignore moves within the same element
+    show(el);
+  });
+  document.addEventListener('mouseout', (e) => {
+    const el = e.target.closest('[data-tip]');
+    if (!el || (e.relatedTarget && el.contains(e.relatedTarget))) return;
+    if (el === anchor) hide();
+  });
+  document.addEventListener('focusin', (e) => {
+    const el = e.target.closest && e.target.closest('[data-tip]');
+    if (el) show(el);
+  });
+  document.addEventListener('focusout', hide);
+  document.addEventListener('click', hide, true);   // a click acts on the control; don't strand the tip
+  window.addEventListener('scroll', hide, true);
+  window.addEventListener('resize', hide);
+})();
+
+/* ============= INIT ============= */
+loadState();
+initTheme();
+loadWidths();
+applyCollapse();
+setupResize();
+saveFavs();
+renderFavBar();
+setupFavDropZone();
+renderChat();
+renderTopology();