drafted 1.18.1 → 1.18.3

package/mcp/test-org-guards.mjs

@@ -0,0 +1,172 @@
+// Regression check for the MCP org-ambiguity policy (DRAFT-36 "one rule").
+// Run: `node mcp/test-org-guards.mjs`. No framework — asserts the single pure
+// decision core that the org guard delegates to, for BOTH creates and forks.
+import assert from 'node:assert/strict';
+import { mkdtempSync } from 'node:fs';
+import { join } from 'node:path';
+import { tmpdir } from 'node:os';
+import { projectlessMutationNeedsOrg, boundOrgRejected, receiptOrg, splitOrgScope, stripUrlOrigin } from './server.mjs';
+import { loadPersistedProject, savePersistedProject } from './active-project-store.mjs';
+
+// One rule governs create AND fork (a fork is a create). A write proceeds when its
+// org is a real root — explicit org=, a bound/active project, or a single-org user's
+// only org. It refuses to GUESS only when the user is multi-org with nothing bound.
+assert.equal(projectlessMutationNeedsOrg({ explicitOrg: 'ee', orgCount: 5 }), false, 'explicit org → allow');
+assert.equal(projectlessMutationNeedsOrg({ boundOrgId: 'causeway', orgCount: 5 }), false, 'bound project → allow (a real root, not the cursor)');
+assert.equal(projectlessMutationNeedsOrg({ activeProjectId: 'p1', orgCount: 5 }), false, 'active project → allow');
+assert.equal(projectlessMutationNeedsOrg({ orgCount: 1 }), false, 'single org → allow');
+
+// A remote session is NOT a root. Its session org is the org the connection INHERITED
+// (the user's default), not one anybody chose — that inheritance wrote a Beoflow-bound
+// agent's wiki page into Personal. Multi-org remote must name its org like anyone else;
+// single-org remote stays frictionless (covered by the orgCount:1 case above).
+assert.equal(projectlessMutationNeedsOrg({ isRemote: true, orgCount: 5 }), true, 'remote + multi-org → BLOCK (its session org is inherited, not chosen)');
+assert.equal(projectlessMutationNeedsOrg({ isRemote: true, orgCount: 1 }), false, 'remote + single org → allow');
+assert.equal(projectlessMutationNeedsOrg({ orgCount: 0 }), false, 'unknown membership → allow (never block a legit write)');
+assert.equal(projectlessMutationNeedsOrg({ orgCount: 3 }), true, 'multi-org, nothing bound → BLOCK (refuse to guess)');
+
+// The xcode-build incident state: multi-org + a bound project sticky from an
+// earlier, unrelated project(open). Under Reading A a fork is NOT hard-blocked —
+// it lands in the active project's org (a real root) and the response RECEIPT names
+// that org, so the fork is visible instead of silent. Create and fork agree here by
+// design (one rule); the fix for the surprise is the receipt, not a block.
+const incident = { orgCount: 3, boundOrgId: 'causeway', activeProjectId: 'p1' };
+assert.equal(projectlessMutationNeedsOrg(incident), false, 'incident state: fork allowed into the bound org — awareness comes from the receipt (Reading A)');
+
+// The genuinely ambiguous case still errors for a fork, exactly as for a create:
+assert.equal(projectlessMutationNeedsOrg({ orgCount: 3 }), true, 'multi-org fork with nothing bound → BLOCK before any copy is created');
+
+// ── Persisted stdio state must not cross DATABASES ────────────────────────────
+// The 2026-07-31 incident: this repo registers a prod stdio MCP (drafted.live) and a
+// local-dev one (localhost:3477) that run in the SAME cwd. Keyed by cwd alone, the
+// local MCP's activeProject + boundOrgId were rehydrated by the prod MCP at boot, so
+// the prod session addressed every request to an org id that exists only in the local
+// dev DB: get_org reported `workingOrg {id: <local-uuid>, name: null}` in no membership
+// list, and project-less calls failed `not a member of org "<local-uuid>"`.
+const file = join(mkdtempSync(join(tmpdir(), 'drafted-state-')), 'mcp-state.json');
+const cwd = '/Users/x/GitHub/drafted.live';
+const PROD = 'https://drafted.live';
+const LOCAL = 'http://localhost:3477';
+
+savePersistedProject(
+  { activeProjectId: 'local-project', boundOrgId: 'b111302a-local-db-only' },
+  { file, cwd, serverUrl: LOCAL }
+);
+assert.equal(
+  loadPersistedProject({ file, cwd, serverUrl: PROD }),
+  null,
+  'prod MCP must NOT rehydrate the local dev MCP state saved in the same cwd'
+);
+assert.equal(
+  loadPersistedProject({ file, cwd, serverUrl: LOCAL })?.boundOrgId,
+  'b111302a-local-db-only',
+  'same server + same cwd still rehydrates (the feature this persistence exists for)'
+);
+
+savePersistedProject({ activeProjectId: 'prod-project', boundOrgId: 'org-prod' }, { file, cwd, serverUrl: PROD });
+assert.equal(loadPersistedProject({ file, cwd, serverUrl: PROD })?.activeProjectId, 'prod-project');
+assert.equal(
+  loadPersistedProject({ file, cwd, serverUrl: LOCAL })?.activeProjectId,
+  'local-project',
+  'the two servers keep independent entries for one cwd'
+);
+
+// A pre-fix (bare-cwd) entry carries no record of which server minted its ids, so it is
+// never adopted — that entry IS the poisoned state.
+savePersistedProject({ activeProjectId: 'legacy', boundOrgId: 'b111302a-local-db-only' }, { file, cwd });
+assert.equal(loadPersistedProject({ file, cwd, serverUrl: PROD })?.activeProjectId, 'prod-project',
+  'a legacy un-namespaced entry never leaks into a server-scoped read');
+
+// ── A non-member working org can never stay the silent default ────────────────
+const stale = 'b111302a-937c-489b-8cec-a422c853ce85';
+assert.equal(
+  boundOrgRejected({ message: `not a member of org "${stale}"`, boundOrgId: stale }),
+  true,
+  'server rejected the org WE addressed the request to → drop it and retry unaddressed'
+);
+assert.equal(
+  boundOrgRejected({ message: `not a member of org "${stale}"`, boundOrgId: stale, hasExplicitOrg: true }),
+  false,
+  'an explicit org= is the CALLER\'s address — surface the error, never silently drop it'
+);
+assert.equal(
+  boundOrgRejected({ message: 'not a member of org "Drafted"', boundOrgId: stale }),
+  false,
+  'a rejection naming a DIFFERENT org is not ours to heal'
+);
+assert.equal(boundOrgRejected({ message: 'Project not found', boundOrgId: stale }), false, 'unrelated error → no heal');
+assert.equal(boundOrgRejected({ message: `not a member of org "${stale}"` }), false, 'nothing bound → nothing to drop');
+
+// ── receiptOrg: the mutation receipt must name where the write LANDED ─────────
+// Regression for the sibling of the foreign-org bug: a UUID-addressed page
+// self-derives its org server-side, so echoing the session's working org made
+// `org:` disagree with the (correct) `url:` on a cross-org edit.
+{
+  const ORGS = [
+    { id: 'org-a', name: 'Alpha' },
+    { id: 'org-b', name: 'Bravo' },
+  ];
+  const SESSION = { id: 'org-a', name: 'Alpha' };
+
+  // resource lives in the session's own org → session context, unchanged
+  assert.deepEqual(
+    receiptOrg({ resourceOrgId: 'org-a', sessionOrg: SESSION, orgList: ORGS }),
+    SESSION,
+    'same-org write should echo the session org',
+  );
+
+  // response carries no org (path-addressed) → fall back to session context
+  assert.deepEqual(
+    receiptOrg({ resourceOrgId: null, sessionOrg: SESSION, orgList: ORGS }),
+    SESSION,
+    'no resource org should fall back to the session org',
+  );
+
+  // THE BUG: resource lives elsewhere → must name the resource's org, not the session's
+  assert.deepEqual(
+    receiptOrg({ resourceOrgId: 'org-b', sessionOrg: SESSION, orgList: ORGS }),
+    { id: 'org-b', name: 'Bravo' },
+    'cross-org write must echo the org the write landed in',
+  );
+
+  // resource org not in the membership list → still name it, honestly, rather
+  // than silently substituting the session org
+  assert.deepEqual(
+    receiptOrg({ resourceOrgId: 'org-z', sessionOrg: SESSION, orgList: ORGS }),
+    { id: 'org-z', name: null },
+    'unknown resource org should be named with a null name, not swapped out',
+  );
+
+  // no session org at all (unbound) and a resource org present
+  assert.deepEqual(
+    receiptOrg({ resourceOrgId: 'org-b', sessionOrg: null, orgList: ORGS }),
+    { id: 'org-b', name: 'Bravo' },
+    'unbound session should still name the resource org',
+  );
+}
+
+// Shape A grammar: org is the top folder of the filesystem (/o/<org>/<root>/...).
+// The org segment is stripped for the root handlers and carried as the per-request
+// scope; bare roots stay accepted (backward compat, session working org).
+assert.deepEqual(splitOrgScope('/o/acme/wiki/engineering/authz.md'), { path: '/wiki/engineering/authz.md', org: 'acme' }, 'org-scoped wiki path strips to the bare root + org');
+assert.deepEqual(splitOrgScope('/o/acme/projects/design/beoflow/wireframes/x.html'), { path: '/projects/design/beoflow/wireframes/x.html', org: 'acme' }, 'org-scoped project path strips to the bare root + org');
+assert.deepEqual(splitOrgScope('/o/acme'), { path: '/', org: 'acme' }, 'ls /o/<org> lists that org\'s roots');
+assert.deepEqual(splitOrgScope('/o/acme/'), { path: '/', org: 'acme' }, 'trailing slash on the org root is harmless');
+assert.deepEqual(splitOrgScope('/o/acme%20brand/skills'), { path: '/skills', org: 'acme brand' }, 'org segment is URL-decoded');
+assert.deepEqual(splitOrgScope('/wiki/engineering'), { path: '/wiki/engineering', org: null }, 'bare root paths pass through untouched');
+assert.deepEqual(splitOrgScope('/projects/x/y/z.html'), { path: '/projects/x/y/z.html', org: null }, 'bare project paths pass through untouched');
+assert.ok(splitOrgScope('/o/').error, 'a bare /o/ is an invalid org-scoped path');
+assert.ok(splitOrgScope('/o/').error?.includes('expected /o/<org>/<root>'), 'error names the expected grammar');
+
+// Full share URLs (Q2): the URL's pathname IS the fs path — stripping the origin must
+// leave an addressable path, and non-URL inputs pass through untouched.
+assert.equal(stripUrlOrigin('https://drafted.live/o/acme/wiki/engineering/authz.md'), '/o/acme/wiki/engineering/authz.md', 'full URL strips to its pathname');
+assert.equal(stripUrlOrigin('https://drafted.live/o/acme/projects/beoflow/designs/pricing/hero.html?x=1'), '/o/acme/projects/beoflow/designs/pricing/hero.html', 'URL query params are dropped with the origin');
+assert.equal(stripUrlOrigin('/o/acme/wiki/x'), '/o/acme/wiki/x', 'plain paths pass through untouched');
+assert.equal(stripUrlOrigin('not a url'), 'not a url', 'non-URL input passes through');
+assert.equal(stripUrlOrigin('/f/00000000-0000-0000-0000-000000000000'), '/f/00000000-0000-0000-0000-000000000000', '/f/ frame links pass through');
+
+console.log('org-guard policy OK');
+// Importing server.mjs builds the stdio MCP singleton, which opens a WS reconnect
+// loop that keeps the event loop alive. Assertions are done — exit deterministically.
+process.exit(0);

package/mcp/test-project-index.mjs

@@ -0,0 +1,88 @@
+#!/usr/bin/env node
+// Regression for the `ls /projects` shape: the old response returned raw
+// /api/projects rows (~2.4KB each once `layers` is pretty-printed), so 180
+// projects blew the 90KB tool-result cap and truncated mid-JSON at 38.
+// These assert the two properties that keep that from recurring: a bounded,
+// line-per-project shape, and recency ordering so truncation drops the dead
+// tail rather than the live projects.
+//
+// Run: node mcp/test-project-index.mjs
+import assert from 'node:assert/strict';
+import { formatProjectIndex, projectPath } from './gates.mjs';
+
+const NOW = Date.UTC(2026, 7, 31);
+const day = 86400000;
+
+const mk = (n, over = {}) => ({
+  id: `id-${n}`,
+  name: `Project ${n}`,
+  slug: `project-${n}`,
+  orgSlug: 'acme',
+  folder: null,
+  frameCount: 3,
+  createdAt: new Date(NOW - 400 * day).toISOString(),
+  updatedAt: new Date(NOW - n * day).toISOString(),
+  ...over,
+});
+
+// ── path shape ───────────────────────────────────────────────────────────────
+assert.equal(projectPath(mk(1)), '/o/acme/projects/project-1');
+assert.equal(projectPath(mk(1, { folder: 'clients' })), '/o/acme/projects/clients/project-1');
+assert.equal(projectPath({ orgId: 'org-uuid', id: 'p-uuid' }), '/o/org-uuid/projects/p-uuid');
+
+// ── empty ────────────────────────────────────────────────────────────────────
+assert.match(formatProjectIndex([]), /no projects/i);
+
+// ── the reported failure: 180 projects must stay far under the 90KB cap ──────
+const many = Array.from({ length: 180 }, (_, i) => mk(i + 1));
+const out = formatProjectIndex(many, { now: NOW });
+assert.ok(out.length < 10_000, `180 projects rendered ${out.length} chars, expected <10KB`);
+assert.match(out, /^180 projects/, 'header reports the true total, not the shown count');
+assert.match(out, /…and 130 more/, 'tail names what was withheld');
+assert.equal(out.split('\n').filter((l) => l.startsWith('  /o/')).length, 50, 'caps at 50 lines');
+
+// Recency order: newest-touched first, so the tail that gets cut is the stale end.
+const shownPaths = out.split('\n').filter((l) => l.startsWith('  /o/')).map((l) => l.trim().split(/\s+/)[0]);
+assert.equal(shownPaths[0], '/o/acme/projects/project-1', 'most recently touched leads');
+assert.equal(shownPaths[49], '/o/acme/projects/project-50');
+assert.ok(!out.includes('project-180'), 'stale tail is the part dropped');
+
+// updatedAt wins over createdAt even when createdAt ordering disagrees.
+const stale = mk(1, { slug: 'old-but-busy', createdAt: new Date(NOW - 900 * day).toISOString(), updatedAt: new Date(NOW - 1 * day).toISOString() });
+const fresh = mk(2, { slug: 'new-but-idle', createdAt: new Date(NOW - 2 * day).toISOString(), updatedAt: new Date(NOW - 300 * day).toISOString() });
+const ordered = formatProjectIndex([fresh, stale], { now: NOW });
+assert.ok(ordered.indexOf('old-but-busy') < ordered.indexOf('new-but-idle'), 'sorts on updatedAt, not createdAt');
+
+// Missing activity data must not crash or sort to the top.
+const noStats = formatProjectIndex([{ id: 'x', slug: 'bare', orgSlug: 'acme' }, mk(1)], { now: NOW });
+assert.match(noStats, /\/o\/acme\/projects\/bare/);
+
+// ── header carries the session binding, not a shared cursor ──────────────────
+const bound = formatProjectIndex([mk(1)], { boundPath: '/o/acme/projects/project-1', now: NOW });
+assert.match(bound, /bound: \/o\/acme\/projects\/project-1/);
+assert.ok(!formatProjectIndex([mk(1)], { now: NOW }).includes('bound:'), 'no binding, no bound line');
+
+// Multi-org listings say so; single-org ones stay quiet.
+const multi = formatProjectIndex([mk(1), mk(2, { orgSlug: 'globex' })], { now: NOW });
+assert.match(multi, /2 orgs/);
+assert.ok(!formatProjectIndex([mk(1), mk(2)], { now: NOW }).includes('orgs'));
+
+// ── ages ─────────────────────────────────────────────────────────────────────
+const ages = formatProjectIndex([
+  mk(1, { slug: 'a', updatedAt: new Date(NOW).toISOString() }),
+  mk(2, { slug: 'b', updatedAt: new Date(NOW - 3 * day).toISOString() }),
+  mk(3, { slug: 'c', updatedAt: new Date(NOW - 21 * day).toISOString() }),
+  mk(4, { slug: 'd', updatedAt: new Date(NOW - 90 * day).toISOString() }),
+], { now: NOW });
+for (const [slug, age] of [['a', 'today'], ['b', '3d'], ['c', '3w'], ['d', '3mo']]) {
+  assert.match(ages, new RegExp(`projects/${slug}\\s+3 frames\\s+${age}\\b`), `${slug} → ${age}`);
+}
+
+// Frame count reads as English, and absent counts render no column at all.
+assert.match(formatProjectIndex([mk(1, { frameCount: 1 })], { now: NOW }), /1 frame\s+1d/);
+assert.match(formatProjectIndex([mk(1, { frameCount: 0 })], { now: NOW }), /0 frames\s+1d/);
+const noCount = formatProjectIndex([mk(1, { frameCount: undefined })], { now: NOW });
+assert.ok(!noCount.includes('frame'), 'no frameCount, no frames column');
+assert.match(noCount, /1d$/m, 'age still renders without a count');
+
+console.log('ok — project index shape, ordering, bounds');

package/mcp/test-skill-paths.mjs

@@ -0,0 +1,29 @@
+// Regression for the /skills path split used by fs(ls|read|write|rm).
+// Run: `node mcp/test-skill-paths.mjs`. No framework — asserts the pure core.
+//
+// Why this exists: a skill is a directory. Before this split the handler kept
+// only the first segment, so `fs(write, path="/skills/<slug>/README.md")` wrote
+// SKILL.md instead — the agent's README landed on top of the skill body and the
+// create-time README gate stayed unsatisfiable. isSkillMd is the load-bearing
+// bit: true routes to the skills row, false routes to skill_files.
+import assert from 'node:assert/strict';
+import { splitSkillPath } from './server.mjs';
+
+// Root and bare slug — no file, so the skill row itself.
+assert.deepEqual(splitSkillPath('/skills'), { slug: '', filePath: '', isSkillMd: true });
+assert.deepEqual(splitSkillPath('/skills/'), { slug: '', filePath: '', isSkillMd: true });
+assert.deepEqual(splitSkillPath('/skills/my-skill'), { slug: 'my-skill', filePath: '', isSkillMd: true });
+assert.deepEqual(splitSkillPath('/skills/my-skill/'), { slug: 'my-skill', filePath: '', isSkillMd: true });
+
+// SKILL.md is the skill body, addressed explicitly — same destination as the bare slug.
+assert.deepEqual(splitSkillPath('/skills/my-skill/SKILL.md'), { slug: 'my-skill', filePath: 'SKILL.md', isSkillMd: true });
+
+// Everything else is a supporting file, and the subpath survives.
+assert.deepEqual(splitSkillPath('/skills/my-skill/README.md'), { slug: 'my-skill', filePath: 'README.md', isSkillMd: false });
+assert.deepEqual(splitSkillPath('/skills/my-skill/references/api.md'), { slug: 'my-skill', filePath: 'references/api.md', isSkillMd: false });
+
+// Case matters: readme.md is a different file from README.md, and neither is SKILL.md.
+assert.equal(splitSkillPath('/skills/s/skill.md').isSkillMd, false);
+
+console.log('skill path split ok — SKILL.md routes to the skill row, everything else to skill files');
+process.exit(0);

package/mcp/widgets/canvas-overview.html

@@ -0,0 +1,229 @@
+<style>
+  :root {
+    --bg: #fafafa;
+    --card: #fff;
+    --border: #e5e7eb;
+    --muted: #6b7280;
+    --text: #1a1a2e;
+    --accent: #533afd;
+    --accent-light: #ede9fe;
+  }
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  html, body { height: 100%; }
+  body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    padding: 16px 18px;
+  }
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin-bottom: 14px;
+  }
+  .header .title { font-size: 14px; font-weight: 600; }
+  .header .meta { font-size: 12px; color: var(--muted); }
+  .header a {
+    color: var(--accent);
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 12px;
+    margin-left: 12px;
+  }
+  .header a:hover { text-decoration: underline; }
+
+  .layer {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 12px 14px;
+    margin-bottom: 10px;
+  }
+  .layer h3 {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--muted);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin-bottom: 8px;
+    display: flex;
+    justify-content: space-between;
+  }
+  .layer h3 .count {
+    background: var(--accent-light);
+    color: var(--accent);
+    padding: 1px 8px;
+    border-radius: 999px;
+    font-size: 10px;
+  }
+  .frames {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+  .frame {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 6px 10px;
+    font-size: 12px;
+    color: var(--text);
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    transition: border-color 0.15s, color 0.15s;
+  }
+  .frame:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+  }
+  .frame .lane {
+    color: var(--muted);
+    font-size: 11px;
+  }
+  .empty {
+    text-align: center;
+    color: var(--muted);
+    font-size: 13px;
+    padding: 32px;
+  }
+  .project {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 12px 14px;
+    margin-bottom: 8px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    text-decoration: none;
+    color: inherit;
+    transition: border-color 0.15s;
+  }
+  .project:hover { border-color: var(--accent); }
+  .project .name { font-weight: 500; font-size: 14px; }
+  .project .desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
+  .project .badge {
+    font-size: 11px;
+    background: var(--accent-light);
+    color: var(--accent);
+    padding: 2px 8px;
+    border-radius: 999px;
+  }
+</style>
+
+<div class="header">
+  <div>
+    <div class="title" id="title">Loading…</div>
+    <div class="meta" id="subtitle"></div>
+  </div>
+  <a id="open" href="#" target="_blank" rel="noopener" hidden>Open in canvas →</a>
+</div>
+<div id="root"></div>
+
+<script>
+  function escapeHtml(s) {
+    return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+  }
+
+  // Derive the Drafted server origin from payload URLs (frameUrl, canvasUrl) so the
+  // widget deep-links correctly on local installs and hosted servers alike — never
+  // hardcode https://drafted.live (breaks localhost/self-hosted deployments).
+  function serverOrigin(sc) {
+    const candidates = [
+      sc.canvasUrl, sc.serverUrl,
+      ...(Array.isArray(sc.projects) ? sc.projects.map(p => p.canvasUrl).filter(Boolean) : []),
+      ...(Array.isArray(sc.projects) ? sc.projects.map(p => p.frameUrl).filter(Boolean) : []),
+      ...(Array.isArray(sc.entries) ? sc.entries.map(e => e.frameUrl).filter(Boolean) : []),
+    ];
+    for (const u of candidates) {
+      try { return new URL(u).origin; } catch { /* keep looking */ }
+    }
+    return 'https://drafted.live';
+  }
+
+  function renderProjects(projects, activeId, origin) {
+    if (!projects?.length) return '<div class="empty">No projects yet. Use project(action="create") to start one.</div>';
+    return projects.slice(0, 30).map(p => {
+      const isActive = p.id === activeId;
+      const url = p.slug ? `${origin}/project/${escapeHtml(p.slug)}` : '#';
+      return `
+        <a class="project" href="${url}" target="_blank" rel="noopener">
+          <div>
+            <div class="name">${escapeHtml(p.name || p.slug || 'Untitled')}</div>
+            ${p.description ? `<div class="desc">${escapeHtml(p.description)}</div>` : ''}
+          </div>
+          ${isActive ? '<span class="badge">active</span>' : ''}
+        </a>
+      `;
+    }).join('');
+  }
+
+  function renderLayers(byLayer) {
+    if (!byLayer || !Object.keys(byLayer).length) return '<div class="empty">No frames in this view.</div>';
+    return Object.entries(byLayer).map(([layer, frames]) => `
+      <div class="layer">
+        <h3>${escapeHtml(layer)} <span class="count">${frames.length}</span></h3>
+        <div class="frames">
+          ${frames.slice(0, 24).map(f => `
+            <a class="frame" href="${escapeHtml(f.frameUrl || '#')}" target="_blank" rel="noopener">
+              <span>${escapeHtml(f.label || f.filename || f.path || '?')}</span>
+              ${f.lane && f.lane !== 'default' ? `<span class="lane">${escapeHtml(f.lane)}</span>` : ''}
+            </a>
+          `).join('')}
+        </div>
+      </div>
+    `).join('');
+  }
+
+  function render(payload) {
+    const sc = payload?.structuredContent || {};
+    const root = document.getElementById('root');
+
+    // project(action="list") shape
+    if (Array.isArray(sc.projects)) {
+      document.getElementById('title').textContent = `${sc.projects.length} project${sc.projects.length === 1 ? '' : 's'}`;
+      document.getElementById('subtitle').textContent = sc.activeProject ? 'One active' : 'None active — use project(action="open") to switch';
+      root.innerHTML = renderProjects(sc.projects, sc.activeProject, serverOrigin(sc));
+      return;
+    }
+
+    // ls shape
+    if (sc.byLayer || sc.entries) {
+      const byLayer = sc.byLayer || groupByLayer(sc.entries || []);
+      const total = Object.values(byLayer).reduce((sum, arr) => sum + arr.length, 0);
+      document.getElementById('title').textContent = sc.project || 'Project canvas';
+      document.getElementById('subtitle').textContent = `${total} frame${total === 1 ? '' : 's'} · ${Object.keys(byLayer).length} layer${Object.keys(byLayer).length === 1 ? '' : 's'}`;
+      if (sc.canvasUrl) {
+        const link = document.getElementById('open');
+        link.href = sc.canvasUrl;
+        link.hidden = false;
+      }
+      root.innerHTML = renderLayers(byLayer);
+      return;
+    }
+
+    root.innerHTML = '<div class="empty">No data to display.</div>';
+  }
+
+  function groupByLayer(entries) {
+    const out = {};
+    for (const e of entries) {
+      const layer = e.layer || 'unsorted';
+      (out[layer] ??= []).push(e);
+    }
+    return out;
+  }
+
+  window.addEventListener('message', (event) => {
+    const msg = event.data;
+    if (!msg || typeof msg !== 'object') return;
+    if (msg.method === 'ui/notifications/tool-result' && msg.params?.result) {
+      render(msg.params.result);
+    }
+  });
+
+  if (window.openai?.toolResult) render(window.openai.toolResult);
+</script>