@hybridlabor-api/aos 4.13.2 → 4.14.0

package/skills/global_config/plan-canvas/scripts/lib/plan-builder/trail.js

@@ -0,0 +1,216 @@
+'use strict';
+
+/**
+ * Derive an agenttrail plan file (skills/global_config/agenttrail "Plan
+ * convention") from a plan folder: `## Name {#id}` components with optional
+ * `needs:` / `files:` / `url:` lines and `- [ ] task {#id}` items.
+ *
+ * Sources, in document order: plan.mdx, canvas.mdx, prototype.mdx.
+ * Components: headings tagged `{#id}` and `<Section id title>`.
+ * needs: `<Section needs=[...]>`, or frontmatter `needs-<id>: a, b` for headings.
+ * files: `<ImplementationMap files=...>`. Tasks: `<Checklist>` items.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const { parseMdx } = require('./mdx');
+const { checklistItems } = require('./render');
+
+const ID_RE = /^[a-z0-9][a-z0-9-]*$/;
+const HEADING_ID_RE = /\s*\{#([A-Za-z0-9-]+)\}\s*$/;
+const DEFAULT_OUT = path.join('production_artifacts', '00_execution_plan.md');
+const SOURCES = ['plan.mdx', 'canvas.mdx', 'prototype.mdx'];
+
+class TrailError extends Error {}
+
+const oneLine = (value) => String(value == null ? '' : value).replace(/\s+/g, ' ').replace(/\{#[^}]*\}/g, '').trim();
+
+function toIdList(value) {
+  const list = Array.isArray(value) ? value : typeof value === 'string' ? value.split(',') : [];
+  return list.map((v) => String(v).trim().toLowerCase()).filter(Boolean);
+}
+
+function slug(value) {
+  return String(value).toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
+}
+
+function entryPath(entry) {
+  if (typeof entry === 'string') return entry.trim();
+  if (entry && typeof entry === 'object') return String(entry.path ?? entry.file ?? entry.name ?? '').trim();
+  return '';
+}
+
+function implementationFiles(block) {
+  const raw = block.props.files;
+  let entries = [];
+  if (Array.isArray(raw)) entries = raw;
+  else if (raw && typeof raw === 'object') entries = Object.keys(raw);
+  if (!entries.length) {
+    entries = (block.children || []).filter((c) => c.type === 'prose')
+      .flatMap((c) => c.text.split('\n')).map((l) => l.replace(/^\s*[-*]\s+/, '').trim());
+  }
+  return entries.map(entryPath).filter(Boolean);
+}
+
+function collect(dir) {
+  const blocks = [];
+  let frontmatter = null;
+  for (const file of SOURCES) {
+    const full = path.join(dir, file);
+    if (!fs.existsSync(full)) continue;
+    const parsed = parseMdx(fs.readFileSync(full, 'utf8'));
+    if (!frontmatter) frontmatter = parsed.frontmatter || {};
+    blocks.push(...parsed);
+  }
+  return { blocks, frontmatter: frontmatter || {} };
+}
+
+function derive(dir, { workspaceRoot = process.cwd() } = {}) {
+  const { blocks, frontmatter } = collect(dir);
+  const components = [];
+  const used = new Set();
+  const warnings = [];
+
+  const uniqueId = (wanted, fallback) => {
+    let base = ID_RE.test(String(wanted).toLowerCase()) ? String(wanted).toLowerCase() : slug(fallback) || 'item';
+    if (!ID_RE.test(base)) base = `n-${base}`;
+    let id = base;
+    for (let n = 2; used.has(id); n += 1) id = `${base}-${n}`;
+    used.add(id);
+    return id;
+  };
+
+  const open = (title, wantedId, needs) => {
+    const component = { id: uniqueId(wantedId, title), title: oneLine(title) || wantedId, needs: toIdList(needs), files: [], url: '', tasks: [] };
+    components.push(component);
+    return component;
+  };
+
+  const walk = (list, current) => {
+    let cur = current;
+    for (const block of list) {
+      if (block.type === 'heading') {
+        const m = HEADING_ID_RE.exec(block.text);
+        if (m && m[1].toLowerCase() !== 'board') {
+          cur = open(block.text.replace(HEADING_ID_RE, ''), m[1], frontmatter[`needs-${m[1].toLowerCase()}`]);
+        } else if (block.level <= 2) {
+          cur = current;
+        }
+        continue;
+      }
+      if (block.type !== 'tag') continue;
+      if (block.name === 'Section' && block.props.id) {
+        walk(block.children || [], open(block.props.title || block.props.id, block.props.id, block.props.needs));
+        continue;
+      }
+      if ((block.name === 'ImplementationMap' || block.name === 'Checklist') && !cur) {
+        warnings.push(`${block.name} is not under a component and was ignored; add {#id} to the heading above it`);
+        continue;
+      }
+      if (block.name === 'ImplementationMap' && cur) {
+        for (const file of implementationFiles(block)) {
+          if (/[,\[\]\n]/.test(file)) warnings.push(`skipped file with unsupported characters: ${file}`);
+          else if (!cur.files.includes(file)) cur.files.push(file);
+        }
+      } else if (block.name === 'Checklist' && cur) {
+        for (const item of checklistItems(block)) {
+          const m = HEADING_ID_RE.exec(item.label);
+          const label = oneLine(item.label);
+          if (!label) continue;
+          cur.tasks.push({ id: uniqueId(m ? m[1] : '', `${cur.id}-${label.slice(0, 24)}`), label, checked: item.checked });
+        }
+      } else if (block.name === 'Archify' && cur && !cur.url) {
+        const rel = path.relative(workspaceRoot, path.resolve(dir, String(block.props.src || ''))).split(path.sep).join('/');
+        if (/^production_artifacts\/\S+$/.test(rel)) cur.url = rel;
+      } else if (block.children && block.children.length) {
+        walk(block.children, cur);
+      }
+    }
+  };
+  walk(blocks, null);
+
+  const ids = new Set(components.map((c) => c.id));
+  for (const c of components) {
+    const known = c.needs.filter((n) => ids.has(n) && n !== c.id);
+    if (known.length !== c.needs.length) warnings.push(`${c.id}: dropped needs that are not components`);
+    c.needs = known;
+  }
+
+  const title = oneLine(frontmatter.title) || oneLine((blocks.find((b) => b.type === 'heading' && b.level === 1) || {}).text) || 'Plan';
+  const lines = [`# ${title}`, ''];
+  for (const c of components) {
+    lines.push(`## ${c.title} {#${c.id}}`);
+    if (c.needs.length) lines.push(`needs: [${c.needs.join(', ')}]`);
+    if (c.files.length) lines.push(`files: [${c.files.join(', ')}]`);
+    if (c.url) lines.push(`url: ${c.url}`);
+    for (const t of c.tasks) lines.push(`- [${t.checked ? 'x' : ' '}] ${t.label} {#${t.id}}`);
+    lines.push('');
+  }
+  return {
+    text: lines.join('\n'),
+    components: components.length,
+    tasks: components.reduce((n, c) => n + c.tasks.length, 0),
+    warnings,
+    graph: components
+  };
+}
+
+function nearestRealpath(target) {
+  let cur = target;
+  const tail = [];
+  for (;;) {
+    try {
+      return path.join(fs.realpathSync(cur), ...tail);
+    } catch {
+      const parent = path.dirname(cur);
+      if (parent === cur) return target;
+      tail.unshift(path.basename(cur));
+      cur = parent;
+    }
+  }
+}
+
+function insideRoot(root, target) {
+  const rel = path.relative(root, target);
+  return !!rel && !rel.startsWith('..') && !path.isAbsolute(rel);
+}
+
+/**
+ * @returns {{out: string, components: number, tasks: number, next_step: string, warnings?: string[]}}
+ * @throws {TrailError} with a message fit for the user; callers map it to exit 2.
+ */
+function writeTrail(input, { out, force = false, workspaceRoot = process.cwd() } = {}) {
+  if (!input) throw new TrailError('trail requires a plan folder or plan.mdx path');
+  const target = path.resolve(input);
+  let dir = target;
+  if (fs.existsSync(target) && fs.statSync(target).isFile()) {
+    if (path.basename(target) !== 'plan.mdx') throw new TrailError(`expected plan.mdx (got ${path.basename(target)})`);
+    dir = path.dirname(target);
+  } else if (!fs.existsSync(path.join(target, 'plan.mdx'))) {
+    throw new TrailError(`no plan.mdx in ${input}`);
+  }
+
+  const root = nearestRealpath(path.resolve(workspaceRoot));
+  const outPath = path.resolve(workspaceRoot, out || DEFAULT_OUT);
+  const real = nearestRealpath(outPath);
+  if (!insideRoot(root, real)) throw new TrailError(`output must be inside the workspace root (${workspaceRoot}): ${out}`);
+  if (fs.existsSync(outPath) && !force) throw new TrailError(`${path.relative(workspaceRoot, outPath)} already exists; pass --force to overwrite`);
+  if (fs.existsSync(outPath) && fs.statSync(outPath).isDirectory()) throw new TrailError(`output is a directory: ${out}`);
+
+  const result = derive(dir, { workspaceRoot });
+  if (!result.components) throw new TrailError('no components found: tag headings with {#id} or use <Section id="..."> in the plan');
+
+  fs.mkdirSync(path.dirname(outPath), { recursive: true });
+  fs.writeFileSync(outPath, result.text, { flag: force ? 'w' : 'wx' });
+  const rel = path.relative(workspaceRoot, outPath).split(path.sep).join('/');
+  return {
+    out: rel,
+    components: result.components,
+    tasks: result.tasks,
+    next_step: `aos-trail . --plan ${rel} --no-open`,
+    ...(result.warnings.length ? { warnings: result.warnings } : {})
+  };
+}
+
+module.exports = { derive, writeTrail, TrailError };

package/skills/global_config/plan-canvas/scripts/lib/plan-canvas/markdown.js

@@ -298,4 +298,4 @@ function renderMarkdown(text) {
   return out.join('\n');
 }
 
-module.exports = { renderMarkdown, escapeHtml, slugify };
+module.exports = { renderMarkdown, renderInline, escapeHtml, slugify };

package/skills/global_config/plan-canvas/scripts/lib/plan-canvas/server.js

@@ -16,7 +16,7 @@ const fs = require('fs');
 const http = require('http');
 const path = require('path');
 
-const { buildAllowedHostnames, isAllowedHostHeader, isAllowedOrigin } = require('../loopback-guard');
+const { buildAllowedHostnames, isAllowedFetchSite, isAllowedHostHeader, isAllowedOrigin } = require('../loopback-guard');
 const { renderMarkdown } = require('./markdown');
 const { artifactSdkJs } = require('./sdk');
 const {
@@ -24,7 +24,8 @@ const {
   canvasClientJs,
   renderCanvasHtml,
   renderMarkdownArtifactHtml,
-  renderSessionListHtml
+  renderHomeHtml,
+  VISUAL_SKILLS
 } = require('./ui');
 
 const DEFAULT_PORT = 4519;
@@ -130,6 +131,29 @@ function sendHtml(res, statusCode, html, { csp = true } = {}) {
   res.end(html);
 }
 
+const STATIC_READ_PATH = /^\/(sdk\.js|artifact\/[a-f0-9]{12}\/.*)$/;
+
+function skillDescription(file) {
+  try {
+    const fm = /^---\r?\n([\s\S]*?)\r?\n---/.exec(fs.readFileSync(file, 'utf8'));
+    const m = fm && /^description:\s*(.*)$/m.exec(fm[1]);
+    return m ? m[1].trim().replace(/^(["'])(.*)\1$/, '$2') : '';
+  } catch { return ''; }
+}
+
+function homeData(store) {
+  // Lazy: plan-canvas.js requires this module at load time.
+  const { cmdTemplates, findSkillMd } = require('../../plan-canvas');
+  return {
+    sessions: store.list(),
+    templates: cmdTemplates(),
+    skills: VISUAL_SKILLS.map(name => {
+      const file = findSkillMd(name);
+      return { name, installed: Boolean(file), description: file ? skillDescription(file) : '' };
+    })
+  };
+}
+
 function createPlanCanvasServer({
   store,
   host = DEFAULT_HOST,
@@ -157,6 +181,7 @@ function createPlanCanvasServer({
   let idleTimer = null;
   let presenceSweep = null;
   let closed = false;
+  let boundPort = null; // set once listening; pins the allowed Origin port
 
   // --- presence + SSE ---------------------------------------------------
 
@@ -559,11 +584,18 @@ function createPlanCanvasServer({
     if (!isAllowedHostHeader(req.headers.host, allowedHostnames)) {
       return sendJson(res, 403, { error: 'forbidden host header' });
     }
-    if (!isAllowedOrigin(req.headers.origin, allowedHostnames)) {
+    if (!isAllowedOrigin(req.headers.origin, allowedHostnames, boundPort)) {
       return sendJson(res, 403, { error: 'forbidden origin' });
     }
     const url = new URL(req.url, `http://${req.headers.host}`);
     const { pathname } = url;
+    // The artifact iframe is sandboxed without allow-same-origin, so its script
+    // and asset loads arrive as Sec-Fetch-Site: cross-site. Only those read-only
+    // static paths may skip the fetch-site check; everything else keeps it.
+    const isStaticRead = req.method === 'GET' && STATIC_READ_PATH.test(pathname);
+    if (!isStaticRead && !isAllowedFetchSite(req.headers['sec-fetch-site'])) {
+      return sendJson(res, 403, { error: 'forbidden fetch site' });
+    }
 
     Promise.resolve()
       .then(() => {
@@ -578,7 +610,7 @@ function createPlanCanvasServer({
           return undefined;
         }
         if (req.method === 'GET' && pathname === '/') {
-          return sendHtml(res, 200, renderSessionListHtml(store.list()));
+          return sendHtml(res, 200, renderHomeHtml(homeData(store)));
         }
         if (req.method === 'GET' && pathname === '/canvas.css') {
           res.writeHead(200, { 'content-type': 'text/css; charset=utf-8', 'cache-control': 'no-store' });
@@ -641,6 +673,7 @@ function createPlanCanvasServer({
     return new Promise((resolve, reject) => {
       server.once('error', reject);
       server.listen(port, host, () => {
+        boundPort = server.address().port;
         armIdleTimer();
         resolve({ port: server.address().port, host });
       });

package/skills/global_config/plan-canvas/scripts/lib/plan-canvas/ui.js

@@ -127,6 +127,10 @@ function canvasCss() {
   .panel{width:340px;flex:none;display:flex;flex-direction:column;border-left:1px solid var(--border);background:var(--bg2)}
   .panel h2{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);padding:12px 14px 8px}
 
+  body.chat-hidden .panel{display:none}
+  .icon-btn .count{display:none;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:var(--accent);color:#fff;font-size:10px;font-weight:600;line-height:16px;text-align:center}
+  .icon-btn .count.show{display:inline-block}
+
   .verdict{display:flex;gap:8px;padding:0 14px 12px;border-bottom:1px solid var(--border)}
   .verdict button{flex:1;height:30px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .12s}
   .verdict .approve{border:1px solid var(--green);background:var(--green-glow);color:var(--green)}
@@ -236,6 +240,32 @@ function canvasClientJs() {
     applyTheme(theme);
   });
 
+  // --- conversation panel ---------------------------------------------
+  const chatKey = 'ecc-plan-canvas:chat-hidden';
+  let chatHidden = false;
+  try { chatHidden = localStorage.getItem(chatKey) === '1'; } catch { /* site data blocked */ }
+  function applyChatHidden() {
+    document.body.classList.toggle('chat-hidden', chatHidden);
+    $('chatBtn').setAttribute('aria-pressed', String(chatHidden));
+    $('chatBtnLabel').textContent = chatHidden ? 'Show chat' : 'Hide chat';
+  }
+  function updateChatCount() {
+    const el = $('chatCount');
+    el.textContent = String(queue.length);
+    el.classList.toggle('show', chatHidden && queue.length > 0);
+  }
+  function toggleChat() {
+    chatHidden = !chatHidden;
+    try { localStorage.setItem(chatKey, chatHidden ? '1' : '0'); } catch { /* site data blocked */ }
+    applyChatHidden();
+    updateChatCount();
+  }
+  applyChatHidden();
+  $('chatBtn').addEventListener('click', toggleChat);
+  document.addEventListener('keydown', e => {
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'j') { e.preventDefault(); toggleChat(); }
+  }, true);
+
   // --- annotate mode -------------------------------------------------
   let annotate = true;
   function setAnnotate(on) {
@@ -273,6 +303,7 @@ function canvasClientJs() {
   function addToQueue(item) { queue.push(item); persistQueue(); renderQueue(); }
   function renderQueue() {
     queueEl.innerHTML = '';
+    updateChatCount();
     queue.forEach((item, i) => {
       const pill = document.createElement('div');
       pill.className = 'pill kind-' + item.kind;
@@ -498,13 +529,14 @@ function renderCanvasHtml(session, { clientPath = '/client.js', cssPath = '/canv
   <div id="annotate" class="toggle" role="switch" aria-pressed="true" title="Toggle annotate mode (Cmd/Ctrl+I)">
     <span>Annotate</span><span class="track"><span class="knob"></span></span>
   </div>
+  <button id="chatBtn" class="icon-btn" type="button" aria-pressed="false" title="Show or hide the conversation panel (Cmd/Ctrl+J)"><span id="chatBtnLabel">Hide chat</span><span id="chatCount" class="count"></span></button>
   <button id="themeBtn" class="icon-btn" type="button">light</button>
   <button id="reloadBtn" class="icon-btn" type="button" title="Reload artifact">Reload</button>
   <button id="endBtn" class="icon-btn danger" type="button">End session</button>
 </header>
 <div class="layout">
   <main class="frame">
-    <iframe id="artifact" title="Artifact under review" src="${artifactSrc}" data-artifact-src="${artifactSrc}" sandbox="allow-scripts allow-forms allow-popups"></iframe>
+    <iframe id="artifact" title="Artifact under review" src="${artifactSrc}" data-artifact-src="${artifactSrc}" sandbox="allow-scripts allow-forms allow-popups" allow="fullscreen"></iframe>
     <div id="endedOverlay" class="overlay"><div class="card"><h3>Session ended</h3><p id="endedWho"></p></div></div>
   </main>
   <aside class="panel">
@@ -592,39 +624,100 @@ ${hasMermaid ? mermaidLoaderScript(mermaidUrl()) : ''}
 </html>`;
 }
 
-// Landing page listing sessions (GET /).
-function renderSessionListHtml(sessions) {
-  const rows = sessions.map(s => {
-    const status = s.status === 'ended' ? `ended by ${escapeHtml(s.endedBy || 'agent')}` : s.status;
-    const link = s.status === 'ended'
-      ? escapeHtml(path.basename(s.file))
-      : `<a href="/canvas/${escapeHtml(s.key)}">${escapeHtml(path.basename(s.file))}</a>`;
-    return `<tr><td>${link}</td><td class="mono">${escapeHtml(s.file)}</td><td><span class="badge ${escapeHtml(s.status)}">${status}</span></td></tr>`;
-  }).join('\n');
+const VISUAL_SKILLS = ['visual-plan', 'visual-recap', 'visual-review', 'visual-edit', 'prototype', 'archify', 'agenttrail'];
+
+function artifactKind(file) {
+  const base = path.basename(String(file));
+  if (base === 'plan.builder.html') return 'BDB Plan Builder';
+  if (/\.html?$/i.test(base)) return 'HTML artifact';
+  return 'Standard markdown';
+}
+
+const HOME_CSS = `
+  :root{--bg:#0a0a0a;--card:#161616;--line:#262626;--ink:#fff;--ink2:#b8b8b8;--ink3:#7a7a7a;--accent:#9b30c4;--accent2:#c05ee6;
+    --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter','Segoe UI',Roboto,sans-serif;--mono:'SF Mono','Fira Code','JetBrains Mono',Menlo,monospace}
+  *{margin:0;padding:0;box-sizing:border-box}
+  body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.5;padding:32px 20px 64px}
+  main{max-width:1000px;margin:0 auto}
+  header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
+  .mark{width:12px;height:12px;border-radius:3px;background:var(--accent)}
+  h1{font-size:20px;letter-spacing:-.01em}
+  h2{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin:32px 0 12px}
+  .sub{font-size:13px;color:var(--ink2)}
+  a{color:var(--accent2);text-decoration:none}
+  a:hover{text-decoration:underline}
+  .grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
+  .card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
+  .card .t{font-size:14px;font-weight:600;overflow-wrap:anywhere}
+  .card .d{font-size:12.5px;color:var(--ink2)}
+  .card .u{font-size:12px;color:var(--ink3)}
+  .row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
+  .chip{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--ink2);white-space:nowrap}
+  .chip.accent{border-color:var(--accent);color:var(--accent2)}
+  .chip.ok{border-color:var(--accent);color:#fff;background:rgba(155,48,196,.25)}
+  .chip.missing{color:var(--ink3)}
+  .mono,code{font-family:var(--mono);font-size:11.5px;color:var(--ink2);overflow-wrap:anywhere}
+  code.cmd{display:block;background:#0f0f0f;border:1px solid var(--line);border-radius:6px;padding:6px 8px;user-select:all}
+  .empty{color:var(--ink3);font-size:13px}
+  .card.ended{opacity:.6}
+`;
+
+function chip(text, cls = '', title = '') {
+  return `<span class="chip ${cls}"${title ? ` title="${escapeHtml(title)}"` : ''}>${escapeHtml(text)}</span>`;
+}
+
+function sessionCard(s) {
+  const ended = s.status === 'ended';
+  const base = path.basename(s.file);
+  const name = escapeHtml(/^(plan\.builder\.html|plan\.md|index\.html)$/.test(base) ? `${path.basename(path.dirname(s.file))}/${base}` : base);
+  const title = ended ? name : `<a href="/canvas/${escapeHtml(s.key)}">${name}</a>`;
+  const status = ended ? `ended by ${s.endedBy || 'agent'}` : s.status;
+  const pending = Number(s.pending) > 0 ? chip(`${s.pending} pending feedback`, 'accent') : '';
+  return `<div class="card${ended ? ' ended' : ''}"><div class="t">${title}</div>
+<div class="row">${chip(artifactKind(s.file), 'accent')}${chip(status, ended ? '' : 'ok')}${pending}</div>
+<div class="mono">${escapeHtml(s.file)}</div></div>`;
+}
+
+function templateCard(t) {
+  const board = t.hasBoard ? chip('board', 'accent', 'includes a design canvas with screens and arrows') : '';
+  return `<div class="card"><div class="t">${escapeHtml(t.label || t.id)} <span class="mono">${escapeHtml(t.id)}</span></div>
+<div class="row">${board}</div>
+<div class="d">${escapeHtml(t.description || '')}</div>
+<div class="u">Use when: ${escapeHtml(t.useWhen || '')}</div>
+<code class="cmd">aos-plan-canvas new ${escapeHtml(t.id)} &lt;dir&gt;</code></div>`;
+}
+
+function skillCard(k) {
+  const desc = String(k.description || '');
+  const short = desc.length > 140 ? `${desc.slice(0, 139).trimEnd()}…` : desc;
+  return `<div class="card"><div class="t">${escapeHtml(k.name)}</div>
+<div class="row">${k.installed ? chip('installed', 'ok') : chip('missing', 'missing')}</div>
+<div class="d">${escapeHtml(short)}</div></div>`;
+}
+
+// Landing page (GET /): open reviews, plan templates, visual skills. Read-only, no scripts.
+function renderHomeHtml({ sessions = [], templates = [], skills = [] } = {}) {
+  const sorted = [...sessions].sort((a, b) =>
+    (a.status === 'ended') - (b.status === 'ended') || String(b.updatedAt || '').localeCompare(String(a.updatedAt || '')));
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
-<title>Plan Canvas · sessions</title>
-<style>
-${TOKENS_CSS}
-  *{margin:0;padding:0;box-sizing:border-box}
-  body{font-family:var(--font);background:var(--bg);color:var(--text);padding:40px;line-height:1.5}
-  .logo{width:30px;height:30px;background:linear-gradient(135deg,var(--accent),var(--pink));border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff;margin-right:10px;vertical-align:middle}
-  h1{font-size:18px;display:inline-block;vertical-align:middle}
-  table{margin-top:24px;border-collapse:collapse;width:100%;max-width:900px;font-size:13px}
-  th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--border)}
-  th{color:var(--text3);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
-  a{color:var(--accent);text-decoration:none}
-  .mono{font-family:var(--mono);font-size:11.5px;color:var(--text2)}
-  .badge{font-size:11px;padding:2px 8px;border-radius:99px;background:var(--bg3);border:1px solid var(--border);color:var(--text2)}
-  .badge.open,.badge.feedback{color:var(--green);border-color:var(--green);background:var(--green-glow)}
-  .empty{margin-top:24px;color:var(--text3);font-size:13px}
-</style>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Plan Canvas</title>
+<style>${HOME_CSS}</style>
 </head>
 <body>
-<span class="logo">E</span><h1>Plan Canvas sessions</h1>
-${sessions.length ? `<table><thead><tr><th>Artifact</th><th>Path</th><th>Status</th></tr></thead><tbody>${rows}</tbody></table>` : '<p class="empty">No sessions yet. Ask your agent to open a plan with the plan-canvas skill.</p>'}
+<main>
+<header><span class="mark"></span><h1>Plan Canvas</h1></header>
+<p class="sub">Review plans and HTML artifacts with your agent. Start new ones from the terminal; this page only lists what exists.</p>
+<h2>Open reviews</h2>
+${sorted.length ? `<div class="grid">${sorted.map(sessionCard).join('\n')}</div>` : '<p class="empty">No sessions yet. Ask your agent to open a plan with the plan-canvas skill.</p>'}
+<h2>Plan templates</h2>
+${templates.length ? `<div class="grid">${templates.map(templateCard).join('\n')}</div>` : '<p class="empty">No templates found.</p>'}
+<h2>Visual skills</h2>
+<div class="grid">${skills.map(skillCard).join('\n')}</div>
+</main>
 </body>
 </html>`;
 }
@@ -632,7 +725,10 @@ ${sessions.length ? `<table><thead><tr><th>Artifact</th><th>Path</th><th>Status<
 module.exports = {
   canvasCss,
   canvasClientJs,
+  mermaidLoaderScript,
+  mermaidUrl,
   renderCanvasHtml,
   renderMarkdownArtifactHtml,
-  renderSessionListHtml
+  renderHomeHtml,
+  VISUAL_SKILLS
 };