pmx-canvas 0.8.2 → 0.9.0

package/docs/design/BoardPins.dc.html

@@ -17,7 +17,7 @@ body{margin:0}
 
 <div>
 <h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">Board pins — a working set across boards</h1>
-<p style="margin: 4px 0 0; font-size: 13px; color: #8ea3bd">One gesture at two levels. Pin a card and its content goes to the agent. Pin a board and the whole board joins the agent's working set, wherever it sits in the library.</p>
+<p style="margin: 4px 0 0; font-size: 13px; color: #8ea3bd">One gesture at two levels. Pin a card and it goes first in the agent's map — title, summary and relations; the agent pulls its full text when it needs it. Pin a board and the board joins the agent's working set as a map, wherever it sits in the library — with its review state: what is due, and what has no lifecycle.</p>
 </div>
 
 <div style="display: grid; grid-template-columns: 600px minmax(0, 1fr); gap: 40px">
@@ -28,8 +28,8 @@ body{margin:0}
 <div style="{{s.card}}">
 <span style="{{s.cap}}">Home — board cards</span>
 <div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px">
-<div style="border-radius: 10px; border: 1.5px solid #4BBCFF; background: #0f1d31; overflow: hidden"><div style="position: relative; height: 70px; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.14) 1px, transparent 1.2px); background-size: 10px 10px; border-bottom: 1px solid #1b2c44"><span style="{{s.pinOn}} position: absolute; right: 8px; top: 8px"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.pin}}"></path></svg></span></div><div style="padding: 8px 10px"><div style="font-size: 12px; font-weight: 600">C4 2026 OKR planning</div><div style="font-size: 11px; color: #8ea3bd">in context · 34 cards</div></div></div>
-<div style="border-radius: 10px; border: 1px solid #1b2c44; background: #0f1d31; overflow: hidden"><div style="position: relative; height: 70px; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.14) 1px, transparent 1.2px); background-size: 10px 10px; border-bottom: 1px solid #1b2c44"><span style="{{s.pinOff}} position: absolute; right: 8px; top: 8px"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.pin}}"></path></svg></span></div><div style="padding: 8px 10px"><div style="font-size: 12px; font-weight: 600">Platform roadmap 2027</div><div style="font-size: 11px; color: #8ea3bd">click the pin to add · 26 cards</div></div></div>
+<div style="border-radius: 10px; border: 1.5px solid #4BBCFF; background: #0f1d31; overflow: hidden"><div style="position: relative; height: 70px; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.14) 1px, transparent 1.2px); background-size: 10px 10px; border-bottom: 1px solid #1b2c44"><span style="{{s.pinOn}} position: absolute; right: 8px; top: 8px"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.pin}}"></path></svg></span></div><div style="padding: 8px 10px"><div style="font-size: 12px; font-weight: 600">C4 2026 OKR planning</div><div style="display: flex; align-items: center; gap: 6px; font-size: 11px; color: #8ea3bd"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.icCat}}"><path d="{{i.strategy}}"></path></svg><span style="flex: 1">Strategy · in context · 34 cards</span><span style="{{s.due}}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.icChip}}"><path d="{{i.glass}}"></path></svg>3 due</span></div></div></div>
+<div style="border-radius: 10px; border: 1px solid #1b2c44; background: #0f1d31; overflow: hidden"><div style="position: relative; height: 70px; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.14) 1px, transparent 1.2px); background-size: 10px 10px; border-bottom: 1px solid #1b2c44"><span style="{{s.pinOff}} position: absolute; right: 8px; top: 8px"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.pin}}"></path></svg></span></div><div style="padding: 8px 10px"><div style="font-size: 12px; font-weight: 600">Platform roadmap 2027</div><div style="display: flex; align-items: center; gap: 6px; font-size: 11px; color: #8ea3bd"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.icCat}}"><path d="{{i.strategy}}"></path></svg>Strategy · click the pin to add · 26 cards</div></div></div>
 </div>
 </div>
 
@@ -37,7 +37,7 @@ body{margin:0}
 <div style="{{s.card}}">
 <span style="{{s.cap}}">Board switcher</span>
 <sc-for list="{{switcher}}" as="b" hint-placeholder-count="4">
-<div style="display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 6px; background: {{b.bg}}"><span style="width: 8px; height: 8px; border-radius: 3px; background: {{b.hue}}"></span><span style="flex: 1; font-size: 12px; font-weight: 500">{{b.name}}</span><span style="{{b.pinStyle}}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.pin}}"></path></svg></span></div>
+<div style="display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 6px; background: {{b.bg}}"><svg width="12" height="12" viewBox="0 0 24 24" style="{{s.icCat}}"><path d="{{b.icon}}"></path></svg><span style="flex: 1; min-width: 0; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{b.name}}</span><sc-if value="{{b.hasDue}}" hint-placeholder-val="{{ false }}"><span style="{{s.due}}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.icChip}}"><path d="{{i.glass}}"></path></svg>{{b.due}}</span></sc-if><span style="{{b.pinStyle}}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.pin}}"></path></svg></span></div>
 </sc-for>
 </div>
 <div style="{{s.card}}">
@@ -70,11 +70,12 @@ body{margin:0}
 <div style="display: flex; align-items: baseline; gap: 10px"><span style="width: 22px; height: 22px; border-radius: 999px; background: {{t.numBg}}; color: {{t.numC}}; font-size: 12px; font-weight: 600; text-align: center; line-height: 22px; flex-shrink: 0">{{t.n}}</span><span style="font-size: 15px; font-weight: 600; flex: 1">{{t.title}}</span><span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #8ea3bd">{{t.tokens}}</span></div>
 <span style="font-size: 12px; color: #8ea3bd">{{t.what}}</span>
 <sc-for list="{{t.rows}}" as="r" hint-placeholder-count="2">
-<div style="display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 6px; background: #13243b; font-size: 12px"><span style="{{r.mark}}">{{r.markText}}</span><span style="flex: 1; font-weight: 500">{{r.name}}</span><span style="font-size: 11px; color: #8ea3bd">{{r.detail}}</span></div>
+<div style="display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 6px; background: #13243b; font-size: 12px"><span style="{{r.mark}}">{{r.markText}}</span><span style="flex: 1; font-weight: 500">{{r.name}}</span><span style="font-size: 11px; color: #8ea3bd">{{r.detail}}</span><sc-if value="{{r.hasDue}}" hint-placeholder-val="{{ false }}"><span style="{{s.due}}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.icChip}}"><path d="{{i.glass}}"></path></svg>{{r.due}}</span></sc-if></div>
 </sc-for>
 </div>
 </sc-for>
-<div style="display: flex; align-items: center; gap: 12px; font-size: 12px; color: #8ea3bd"><span style="width: 200px; height: 6px; border-radius: 999px; background: #1b2c44; overflow: hidden; display: block"><span style="display: block; width: 77%; height: 6px; background: #f4c542"></span></span><span style="font-family: 'IBM Plex Mono', monospace; color: #e6eef7; white-space: nowrap">24.5k / 32k</span><span>Over budget, a pinned board falls back to discovery — said on the chip, never silent.</span></div>
+<div style="display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(244,197,66,0.3); font-size: 12px; color: #b9c6d6"><span style="{{s.due}}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.icChip}}"><path d="{{i.glass}}"></path></svg>review due</span><span>Review state travels with a pinned board. Its due cards arrive marked “review due” with when they were last validated, cards with no category as “lifecycle unknown” — the same lines the brief uses on the open board (Lifecycle).</span></div>
+<div style="display: flex; align-items: center; gap: 12px; font-size: 12px; color: #8ea3bd"><span style="font-family: 'IBM Plex Mono', monospace; color: #e6eef7; white-space: nowrap">≈ 2.1k tokens</span><span>What the canvas sends the agent costs ≈ 2.1k tokens — a cost, not a budget. Maps keep pinned boards cheap.</span></div>
 </section>
 
 </div>
@@ -83,10 +84,10 @@ body{margin:0}
 <span style="{{s.label}}">On any board — the context chip, opened</span>
 <div style="display: flex; gap: 24px; align-items: flex-start">
 <div style="width: 420px; box-sizing: border-box; padding: 12px; border-radius: 12px; border: 1px solid #2a4566; background: #13243b; box-shadow: 0 10px 30px rgba(0,0,0,0.55); display: flex; flex-direction: column; gap: 8px">
-<div style="display: flex; align-items: center; justify-content: space-between"><span style="font-size: 12px; font-weight: 600">In the agent's context</span><span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #8ea3bd">24.5k tokens</span></div>
+<div style="display: flex; align-items: center; justify-content: space-between"><span style="font-size: 12px; font-weight: 600">In the agent's context</span><span style="font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #8ea3bd">≈ 2.1k tokens</span></div>
 <span style="{{s.cap}}">Boards · 3</span>
 <sc-for list="{{chipBoards}}" as="r" hint-placeholder-count="3">
-<div style="display: flex; align-items: center; gap: 8px; height: 28px; font-size: 12px"><span style="width: 8px; height: 8px; border-radius: 3px; background: {{r.hue}}"></span><span style="flex: 1">{{r.name}}</span><span style="{{r.readStyle}}">{{r.read}}</span><span style="color: #6b7d94">×</span></div>
+<div style="display: flex; align-items: center; gap: 8px; height: 28px; font-size: 12px"><svg width="12" height="12" viewBox="0 0 24 24" style="{{s.icCat}}"><path d="{{r.icon}}"></path></svg><span style="flex: 1">{{r.name}}</span><sc-if value="{{r.hasDue}}" hint-placeholder-val="{{ false }}"><span style="{{s.due}}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.icChip}}"><path d="{{i.glass}}"></path></svg>{{r.due}}</span></sc-if><span style="{{r.readStyle}}">{{r.read}}</span><span style="color: #6b7d94">×</span></div>
 </sc-for>
 <span style="{{s.cap}}">Cards on this board · 4</span>
 <div style="font-size: 12px; color: #b9c6d6">Raise Pro to $24? · Churn flat after last raise · SMB is price-sensitive · Competitor pricing</div>
@@ -104,7 +105,15 @@ body{margin:0}
 <script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1100}}'>
 class Component extends DCLogic {
   renderVals() {
-    var i = { pin: 'M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20' };
+    var i = {
+      pin: 'M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20',
+      strategy: 'M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18M15.5 8.5l-2 5-5 2 2-5z',
+      decision: 'M6 3v18M6 7h10l3 3-3 3H6',
+      research: 'M10.5 4a6.5 6.5 0 1 0 0 13a6.5 6.5 0 1 0 0-13M15.5 15.5L20 20',
+      notes: 'M4 20l4.2-1L19 8.2 15.8 5 5 15.8z',
+      unknown: 'M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .8-1 1.5v.7M12 16.8v.4',
+      glass: 'M7 3h10M7 21h10M8 3v3l4 6-4 6v3M16 3v3l-4 6 4 6v3',
+    };
     var pinOn = 'width:18px;height:18px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#4BBCFF;color:#081524;';
     var pinOff = 'width:18px;height:18px;box-sizing:border-box;border-radius:999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid #6b7d94;color:#b9c6d6;';
     var s = {
@@ -112,31 +121,37 @@ class Component extends DCLogic {
       cap: 'font-size:11px;font-weight:500;color:#8ea3bd;',
       card: 'display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:10px;border:1px solid #1b2c44;background:#0b1828;',
       ic: 'fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;',
+      icCat: 'fill:none;stroke:#8ea3bd;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;',
+      icChip: 'fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;',
+      due: 'display:inline-flex;align-items:center;gap:3px;height:18px;box-sizing:border-box;padding:0 6px;border-radius:999px;border:1px solid rgba(244,197,66,0.6);color:#f4c542;font-size:11px;font-weight:500;flex-shrink:0;',
+      set: 'display:inline-flex;align-items:center;gap:4px;height:20px;box-sizing:border-box;padding:0 6px;border-radius:6px;border:1px solid #2a4566;color:#e6eef7;font-size:11px;flex-shrink:0;',
+      inh: 'display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 2px;color:#8ea3bd;font-size:11px;flex-shrink:0;',
+      unk: 'display:inline-flex;align-items:center;gap:4px;height:20px;box-sizing:border-box;padding:0 6px;border-radius:6px;border:1px dashed #3d5170;color:#8ea3bd;font-size:11px;flex-shrink:0;',
       pinOn: pinOn, pinOff: pinOff
     };
     var switcher = [
-      { name: 'Pricing research', hue: '#7C9CFF', pinStyle: pinOn, bg: '#13243b' },
-      { name: 'C4 2026 OKR planning', hue: '#5FCFC0', pinStyle: pinOn, bg: 'transparent' },
-      { name: 'Tech Enabling — overview', hue: '#5FCFC0', pinStyle: pinOn, bg: 'transparent' },
-      { name: 'Platform roadmap 2027', hue: '#5FCFC0', pinStyle: pinOff, bg: 'transparent' }
+      { name: 'Pricing research', icon: i.research, pinStyle: pinOn, bg: '#13243b' },
+      { name: 'C4 2026 OKR planning', icon: i.strategy, hasDue: true, due: '3 due', pinStyle: pinOn, bg: 'transparent' },
+      { name: 'Tech Enabling — overview', icon: i.notes, pinStyle: pinOn, bg: 'transparent' },
+      { name: 'Platform roadmap 2027', icon: i.strategy, pinStyle: pinOff, bg: 'transparent' }
     ];
     var mOn = 'font-size:11px;font-weight:600;padding:0 6px;border-radius:999px;background:rgba(75,188,255,0.14);color:#4BBCFF;';
     var mDisc = 'font-size:11px;font-weight:600;padding:0 6px;border-radius:999px;background:#1b2c44;color:#8ea3bd;';
     var tiers = [
-      { n: '1', title: 'This board’s pinned cards', tokens: '9k', what: 'Full content, as today.', border: 'rgba(75,188,255,0.35)', numBg: '#4BBCFF', numC: '#081524',
-        rows: [{ name: '4 cards on Pricing research', detail: 'full text', mark: mOn, markText: 'cards' }] },
-      { n: '2', title: 'Pinned boards', tokens: '14k', what: 'Each board’s README and its pinned cards, in full. New.', border: 'rgba(75,188,255,0.35)', numBg: '#4BBCFF', numC: '#081524',
-        rows: [{ name: 'Tech Enabling — overview', detail: 'README + 2 pinned · 6k', mark: mOn, markText: 'board' },
-               { name: 'C4 2026 OKR planning', detail: 'README + 3 pinned · 8k', mark: mOn, markText: 'board' }] },
-      { n: '3', title: 'Discovery', tokens: '1.5k', what: 'Linked and same-folder boards: README summary and pinned titles only — today’s behaviour.', border: '#1b2c44', numBg: '#1b2c44', numC: '#b9c6d6',
+      { n: '1', title: 'This board’s pinned cards', tokens: '1.2k', what: 'First in the map: title, summary and relations. The agent pulls full text itself.', border: 'rgba(75,188,255,0.35)', numBg: '#4BBCFF', numC: '#081524',
+        rows: [{ name: '4 cards on Pricing research', detail: 'title + summary', mark: mOn, markText: 'cards' }] },
+      { n: '2', title: 'Pinned boards', tokens: '0.6k', what: 'Each board as a map: folder, README summary, pinned cards’ titles and summaries, links and backlinks, each with its review state. New.', border: 'rgba(75,188,255,0.35)', numBg: '#4BBCFF', numC: '#081524',
+        rows: [{ name: 'Tech Enabling — overview', detail: 'map · 0.3k', mark: mOn, markText: 'board' },
+               { name: 'C4 2026 OKR planning', detail: 'map · 0.3k', mark: mOn, markText: 'board', hasDue: true, due: '1 due' }] },
+      { n: '3', title: 'Discovery', tokens: '0.3k', what: 'Linked and same-folder boards: README summary and pinned titles only — today’s behaviour.', border: '#1b2c44', numBg: '#1b2c44', numC: '#b9c6d6',
         rows: [{ name: 'Churn analysis · SMB interviews · Competitor teardown', detail: 'summaries', mark: mDisc, markText: 'linked' }] }
     ];
     var read = 'font-size:11px;font-weight:500;padding:0 6px;border-radius:999px;background:rgba(179,136,255,0.16);color:#B388FF;';
     var notRead = 'font-size:11px;font-weight:500;padding:0 6px;border-radius:999px;background:#1b2c44;color:#8ea3bd;';
     var chipBoards = [
-      { name: 'Pricing research (this board)', hue: '#7C9CFF', read: 'read 2m ago', readStyle: read },
-      { name: 'Tech Enabling — overview', hue: '#5FCFC0', read: 'read 2m ago', readStyle: read },
-      { name: 'C4 2026 OKR planning', hue: '#5FCFC0', read: 'not read yet', readStyle: notRead }
+      { name: 'Pricing research (this board)', icon: i.research, read: 'read 2m ago', readStyle: read },
+      { name: 'Tech Enabling — overview', icon: i.notes, read: 'read 2m ago', readStyle: read },
+      { name: 'C4 2026 OKR planning', icon: i.strategy, hasDue: true, due: '3 due', read: 'not read yet', readStyle: notRead }
     ];
     var rules = [
       { t: 'Lasts until you unpin', d: 'Board pins belong to the workspace: they survive board switches and restarts. You or the agent can pin; the agent’s pins carry its violet dot.' },

package/docs/design/Categories.dc.html

@@ -0,0 +1,208 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Knowledge categories on folders</title>
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&amp;family=IBM+Plex+Sans:wght@400;500;600&amp;display=swap">
+<style>
+body{margin:0}
+</style>
+</helmet>
+<div style="width: 1440px; height: 940px; box-sizing: border-box; padding: 40px 48px; background: #081524; color: #e6eef7; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 20px">
+
+<div>
+<h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">Knowledge categories live on folders</h1>
+<p style="margin: 4px 0 0; font-size: 13px; color: #8ea3bd">One hierarchy: folders. A category says what kind of knowledge a folder holds and brings its lifecycle defaults with it. It inherits down the tree, so a board filed under Decisions is a decision without anyone tagging it.</p>
+</div>
+
+<div style="flex: 1; display: grid; grid-template-columns: 380px 560px minmax(0, 1fr); gap: 24px; min-height: 0">
+
+<section style="display: flex; flex-direction: column; gap: 10px; min-width: 0">
+<span style="{{s.label}}">1 · Home library tree</span>
+<div style="{{s.panel}} padding: 14px 10px; gap: 2px">
+<div style="display: flex; align-items: center; gap: 8px; padding: 0 8px 10px">
+<span style="font-size: 13px; font-weight: 600; flex: 1">Acme workspace</span>
+<button style="{{s.ghostBtn}}"><svg width="12" height="12" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.list}}"></path></svg>Categories</button>
+</div>
+<sc-for list="{{tree}}" as="r" hint-placeholder-count="16">
+<div style="{{r.row}}"><span style="{{r.ind}}"></span><svg width="13" height="13" viewBox="0 0 24 24" style="{{s.icDim}}"><path d="{{r.fold}}"></path></svg><span style="{{s.name}}">{{r.name}}</span><span style="{{r.tagSt}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{r.icon}}"></path></svg>{{r.tag}}</span><sc-if value="{{r.hasDue}}" hint-placeholder-val="{{ true }}"><span style="{{s.due}}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.glass}}"></path></svg>{{r.due}}</span></sc-if></div>
+</sc-for>
+<div style="margin: 10px 8px 0; padding-top: 10px; border-top: 1px solid #1b2c44; font-size: 11px; color: #6b7d94">Started from the Org · team · personal template, then renamed. Any folder can be renamed, moved or deleted.</div>
+</div>
+
+<div style="{{s.panel}} padding: 12px 14px; gap: 8px">
+<span style="font-size: 12px; font-weight: 600">How to read a row</span>
+<sc-for list="{{legend}}" as="l" hint-placeholder-count="4">
+<div style="display: grid; grid-template-columns: 112px 1fr; gap: 10px; align-items: center"><span style="{{l.st}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{l.icon}}"></path></svg>{{l.tag}}</span><span style="font-size: 11px; color: #b9c6d6">{{l.d}}</span></div>
+</sc-for>
+</div>
+</section>
+
+<section style="display: flex; flex-direction: column; gap: 10px; min-width: 0">
+<span style="{{s.label}}">2 · Folder settings — Platform team / Metrics</span>
+<div style="{{s.panel}} padding: 0; box-shadow: 0 10px 30px rgba(0,0,0,0.6)">
+<div style="display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px 0 16px; border-bottom: 1px solid #1b2c44">
+<svg width="16" height="16" viewBox="0 0 24 24" style="{{s.icDim}}"><path d="{{i.folder}}"></path></svg>
+<div style="flex: 1; min-width: 0"><div style="font-size: 15px; font-weight: 600; line-height: 20px">Metrics</div><div style="font-size: 11px; color: #6b7d94; line-height: 14px">Acme / Platform team / Metrics · 12 boards</div></div>
+<button aria-label="Close" style="{{s.iconBtn}}"><svg width="14" height="14" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.x}}"></path></svg></button>
+</div>
+
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 16px">
+<div style="display: flex; flex-direction: column; gap: 8px">
+<span style="font-size: 12px; font-weight: 600">Category</span>
+<label style="{{s.radio}}"><span style="{{s.radioOff}}"></span><span style="flex: 1">Use the parent’s</span><span style="{{s.inh}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.research}}"></path></svg>↳ Research</span><span style="font-size: 11px; color: #6b7d94">from Platform team</span></label>
+<label style="{{s.radioOn}}"><span style="{{s.radioDot}}"></span><span style="flex: 1">Set here</span>
+<span style="{{s.select}}"><svg width="13" height="13" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.metric}}"></path></svg><span style="flex: 1">Metric</span><span style="color: #6b7d94">▾</span></span></label>
+<span style="font-size: 11px; color: #8ea3bd; padding-left: 26px">Picks from the workspace’s one list. Subfolders and boards below inherit Metric unless they set their own.</span>
+</div>
+
+<div style="display: flex; flex-direction: column; gap: 8px">
+<div style="display: flex; align-items: baseline; gap: 8px"><span style="font-size: 12px; font-weight: 600; flex: 1">Lifecycle defaults · from Metric</span><span style="font-size: 11px; color: #4BBCFF">Edit Metric in Categories →</span></div>
+<div style="display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; padding: 12px; border-radius: 8px; background: #13243b; font-size: 12px">
+<span style="color: #8ea3bd">Decays when</span><span>Reality changes — the numbers move</span>
+<span style="color: #8ea3bd">Check</span><span>Fast — at use, every time a brief carries it</span>
+<span style="color: #8ea3bd">Also review when</span><span>its source refreshes · a card contradicts it</span>
+<span style="color: #8ea3bd">Revalidate by</span><span>re-reading the source dashboard and comparing</span>
+</div>
+<span style="font-size: 11px; color: #8ea3bd">Rates are planning judgements, not odds that a claim is true.</span>
+</div>
+
+<div style="display: flex; flex-direction: column; gap: 6px">
+<span style="font-size: 12px; font-weight: 600">What inherits it</span>
+<div style="{{s.kv}}"><span style="flex: 1">Boards in this folder</span><span style="color: #b9c6d6">11 inherit Metric · 1 sets its own</span></div>
+<div style="{{s.kv}}"><span style="flex: 1">OKR mirror</span><span style="{{s.set}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.strategy}}"></path></svg>Strategy</span><span style="font-size: 11px; color: #6b7d94">set on the board</span></div>
+<div style="{{s.kv}}"><span style="flex: 1">Cards on these boards</span><span style="color: #b9c6d6">may change their lifecycle, never their category</span></div>
+</div>
+
+<div style="display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; border: 1px dashed #1b2c44; color: #6b7d94; font-size: 12px"><svg width="13" height="13" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.lock}}"></path></svg><span style="flex: 1">Who can read and write</span><span style="font-size: 11px">later, with the team server · not part of the category</span></div>
+</div>
+
+<div style="display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #1b2c44">
+<button style="{{s.btn}}">Cancel</button><button style="{{s.btnPrimary}}">Save</button>
+</div>
+</div>
+</section>
+
+<section style="display: flex; flex-direction: column; gap: 10px; min-width: 0">
+<span style="{{s.label}}">3 · Another workspace — solo research</span>
+<div style="{{s.panel}} padding: 14px 10px; gap: 2px">
+<div style="display: flex; align-items: center; gap: 8px; padding: 0 8px 10px">
+<span style="font-size: 13px; font-weight: 600; flex: 1">Thesis notes</span>
+<button style="{{s.ghostBtn}}"><svg width="12" height="12" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.list}}"></path></svg>Categories</button>
+</div>
+<sc-for list="{{solo}}" as="r" hint-placeholder-count="9">
+<div style="{{r.row}}"><span style="{{r.ind}}"></span><svg width="13" height="13" viewBox="0 0 24 24" style="{{s.icDim}}"><path d="{{r.fold}}"></path></svg><span style="{{s.name}}">{{r.name}}</span><span style="{{r.tagSt}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{r.icon}}"></path></svg>{{r.tag}}</span><sc-if value="{{r.hasDue}}" hint-placeholder-val="{{ true }}"><span style="{{s.due}}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.glass}}"></path></svg>{{r.due}}</span></sc-if></div>
+</sc-for>
+<div style="margin: 10px 8px 0; padding-top: 10px; border-top: 1px solid #1b2c44; font-size: 11px; color: #6b7d94">No template. One person started empty and defined four categories of their own: Question, Source, Finding, Note. Nothing here says org, team or personal.</div>
+</div>
+
+<sc-for list="{{rules}}" as="r" hint-placeholder-count="4">
+<div style="{{s.panel}} padding: 12px 14px; gap: 2px"><span style="font-size: 12px; font-weight: 600">{{r.t}}</span><span style="font-size: 11px; color: #b9c6d6">{{r.d}}</span></div>
+</sc-for>
+</section>
+
+</div>
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":940}}'>
+class Component extends DCLogic {
+  renderVals() {
+    var i = {
+      folder: 'M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z',
+      open: 'M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v1H7l-4 9zM7 10h15l-3 9H3',
+      strategy: 'M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18M15.5 8.5l-2 5-5 2 2-5z',
+      decision: 'M6 3v18M6 7h10l3 3-3 3H6',
+      research: 'M10.5 4a6.5 6.5 0 1 0 0 13a6.5 6.5 0 1 0 0-13M15.5 15.5L20 20',
+      metric: 'M4 20V11M10 20V5M16 20v-6M3 20h18',
+      policy: 'M12 3l7 3v5c0 5-3.5 8-7 10-3.5-2-7-5-7-10V6z',
+      notes: 'M4 20l4.2-1L19 8.2 15.8 5 5 15.8z',
+      question: 'M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .8-1 1.5v.7M12 16.8v.4',
+      source: 'M5 5a2 2 0 0 1 2-2h12v15H7a2 2 0 0 0-2 2zM5 20a2 2 0 0 0 2 1h12v-3',
+      finding: 'M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.4.3.5.7.5 1.1v1h6v-1c0-.4.1-.8.5-1.1A6 6 0 0 0 12 3',
+      unknown: 'M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .8-1 1.5v.7M12 16.8v.4',
+      glass: 'M7 3h10M7 21h10M8 3v3l4 6-4 6v3M16 3v3l-4 6 4 6v3',
+      list: 'M8 6h12M8 12h12M8 18h12M4 6h.5M4 12h.5M4 18h.5',
+      lock: 'M6 11h12v9H6zM8.5 11V8a3.5 3.5 0 0 1 7 0v3',
+      x: 'M6 6l12 12M18 6L6 18'
+    };
+    var s = {
+      label: 'font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:#6b7d94;',
+      panel: 'display:flex;flex-direction:column;border-radius:10px;border:1px solid #1b2c44;background:#0f1d31;',
+      ic: 'fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;',
+      icDim: 'fill:none;stroke:#6b7d94;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;',
+      name: 'flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;',
+      due: 'display:inline-flex;align-items:center;gap:3px;height:18px;padding:0 6px;border-radius:999px;border:1px solid rgba(244,197,66,0.6);color:#f4c542;font-size:11px;flex-shrink:0;',
+      set: 'display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:6px;border:1px solid #2a4566;color:#e6eef7;font-size:11px;flex-shrink:0;',
+      inh: 'display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 2px;color:#8ea3bd;font-size:11px;flex-shrink:0;',
+      ghostBtn: 'display:flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:6px;border:1px solid #1b2c44;background:transparent;color:#b9c6d6;font-family:inherit;font-size:12px;',
+      iconBtn: 'width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:#8ea3bd;display:flex;align-items:center;justify-content:center;',
+      radio: 'display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-radius:8px;border:1px solid #1b2c44;font-size:13px;',
+      radioOn: 'display:flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 12px;border-radius:8px;border:1px solid #2a4566;background:#13243b;font-size:13px;',
+      radioOff: 'width:14px;height:14px;box-sizing:border-box;border-radius:999px;border:1.5px solid #6b7d94;flex-shrink:0;',
+      radioDot: 'width:14px;height:14px;box-sizing:border-box;border-radius:999px;border:4px solid #e6eef7;flex-shrink:0;',
+      select: 'display:flex;align-items:center;gap:8px;width:190px;height:32px;box-sizing:border-box;padding:0 10px;border-radius:6px;border:1px solid #2a4566;background:#0f1d31;font-size:13px;',
+      kv: 'display:flex;align-items:center;gap:8px;min-height:30px;padding:0 10px;border-radius:6px;background:#13243b;font-size:12px;',
+      btn: 'height:30px;padding:0 14px;border-radius:6px;border:1px solid #1b2c44;background:transparent;color:#e6eef7;font-family:inherit;font-size:12px;',
+      btnPrimary: 'height:30px;padding:0 14px;border-radius:6px;border:0;background:#4BBCFF;color:#081524;font-family:inherit;font-size:12px;font-weight:600;'
+    };
+    var unk = 'display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:6px;border:1px dashed #3d5170;color:#8ea3bd;font-size:11px;flex-shrink:0;';
+    var cats = { strategy: 'Strategy', decision: 'Decision', research: 'Research', metric: 'Metric', policy: 'Policy', notes: 'Notes', question: 'Question', source: 'Source', finding: 'Finding' };
+    function row(name, depth, cat, mode, due, opts) {
+      opts = opts || {};
+      var tag = mode === 'unk' ? 'unknown' : (mode === 'inh' ? '↳ ' : '') + cats[cat];
+      return {
+        name: name, due: due ? due + ' due' : '', hasDue: !!due,
+        row: 'display:flex;align-items:center;gap:6px;height:28px;padding:0 8px;border-radius:6px;' + (opts.sel ? 'background:#13243b;box-shadow:inset 2px 0 0 #e6eef7;' : ''),
+        ind: 'width:' + (depth * 16) + 'px;flex-shrink:0;',
+        fold: opts.leaf ? i.folder : i.open,
+        icon: mode === 'unk' ? i.unknown : i[cat], tag: tag,
+        tagSt: mode === 'set' ? s.set : mode === 'inh' ? s.inh : unk
+      };
+    }
+    var tree = [
+      row('Org', 0, 'strategy', 'set', 0),
+      row('Strategy 2027', 1, 'strategy', 'inh', 0, { leaf: true }),
+      row('Principles', 1, 'policy', 'set', 0, { leaf: true }),
+      row('Decisions', 1, 'decision', 'set', 1, { leaf: true }),
+      row('Platform team', 0, 'research', 'set', 0),
+      row('Objectives', 1, 'strategy', 'set', 0, { leaf: true }),
+      row('Decisions', 1, 'decision', 'set', 2, { leaf: true }),
+      row('Metrics', 1, 'metric', 'set', 5, { leaf: true, sel: true }),
+      row('Spikes', 1, 'research', 'inh', 1, { leaf: true }),
+      row('Pepe', 0, 'notes', 'set', 0),
+      row('Reading', 1, 'notes', 'inh', 0, { leaf: true }),
+      row('Pricing drafts', 1, 'notes', 'inh', 0, { leaf: true }),
+      row('Inbox', 0, '', 'unk', 0, { leaf: true })
+    ];
+    var solo = [
+      row('Projects', 0, 'question', 'set', 0),
+      row('Urban heat', 1, 'question', 'inh', 0, { leaf: true }),
+      row('Bike lanes', 1, 'question', 'inh', 0, { leaf: true }),
+      row('Sources', 0, 'source', 'set', 0),
+      row('Papers', 1, 'source', 'inh', 2, { leaf: true }),
+      row('Datasets', 1, 'source', 'inh', 1, { leaf: true }),
+      row('Findings', 0, 'finding', 'set', 0, { leaf: true }),
+      row('Notes', 0, 'notes', 'set', 0, { leaf: true })
+    ];
+    var legend = [
+      { st: s.set, icon: i.decision, tag: 'Decision', d: 'Set here. Glyph and word, no colour: categories are not meanings.' },
+      { st: s.inh, icon: i.research, tag: '↳ Research', d: 'Inherited from the nearest folder above that sets one.' },
+      { st: unk, icon: i.unknown, tag: 'unknown', d: 'Nothing above sets a category. No lifecycle, and never an invented expiry date.' },
+      { st: s.due, icon: i.glass, tag: '5 due', d: 'Boards in the folder waiting for a review. Amber: needs a look.' }
+    ];
+    var rules = [
+      { t: 'One hierarchy', d: 'Category is a property of a folder (or a board), not tags or a second tree. A board still lives in one folder; links stay many-to-many.' },
+      { t: 'The workspace owns the list', d: 'One category list per workspace, edited in Categories. The product ships editable defaults; a template fills them in.' },
+      { t: 'Category never grants access', d: 'Folder names and categories say what knowledge is, not who sees it. Audience is a later, separate property.' }
+    ];
+    return { i: i, s: s, tree: tree, solo: solo, legend: legend, rules: rules };
+  }
+}
+</script>
+</body>
+</html>

package/docs/design/CategoryEditor.dc.html

@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+<head><meta charset="utf-8"><title>C1 · Compact category inspector</title><script src="./support.js"></script></head>
+<body>
+<x-dc>
+<helmet>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&amp;family=IBM+Plex+Sans:wght@400;500;600&amp;display=swap">
+<style>
+body{margin:0} .c1{width:1440px;height:1100px;box-sizing:border-box;padding:48px;background:#081524;color:#e6eef7;font:13px/1.5 'IBM Plex Sans',system-ui,sans-serif}
+.c1 h1{font-size:28px;margin:0}.c1 p{color:#8ea3bd}.c1 .dialog{width:900px;margin:32px auto;border:1px solid #1b2c44;border-radius:14px;background:#0f1d31;padding:20px;box-sizing:border-box}.c1 header,.c1 footer,.c1 nav{display:flex;gap:8px;align-items:center}.c1 header{border-bottom:1px solid #1b2c44;padding-bottom:12px}.c1 header strong{flex:1;font-size:15px}.c1 button,.c1 input,.c1 select,.c1 textarea{font:inherit;color:inherit;background:#081524;border:1px solid #1b2c44;border-radius:6px;padding:7px 10px;box-sizing:border-box}.c1 .columns{display:grid;grid-template-columns:220px 1fr;gap:24px;margin:16px 0}.c1 aside button{width:100%;text-align:left;margin:4px 0;display:flex;flex-direction:column}.c1 small{color:#8ea3bd}.c1 .selected{border-color:#e6eef7;background:#13243b}.c1 label{display:flex;flex-direction:column;gap:6px;margin:12px 0}.c1 footer{border-top:1px solid #1b2c44;padding-top:12px;justify-content:flex-end}.c1 .save{background:#4BBCFF;color:#081524;border-color:transparent;font-weight:600}.c1 summary{color:#8ea3bd;cursor:pointer}.c1 .states{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.c1 .states section{border:1px solid #1b2c44;border-radius:10px;padding:16px;background:#0f1d31}
+</style></helmet>
+<main class="c1">
+<h1>C1 · Compact category inspector</h1>
+<p>Selected 2026-10-14 · local implementation, validation ongoing. One neutral workspace list; folders choose categories, cards override only lifecycle.</p>
+<section class="dialog">
+<header><strong>Workspace categories</strong><button>×</button></header>
+<details style="margin-top:12px"><summary>Add from template</summary><p>Org · team · personal / Solo research / Product team / Empty. Add missing entries only; never overwrite edits.</p></details>
+<div class="columns">
+<aside><label style="margin-bottom:0">Search categories<input type="search" placeholder="Search categories"></label><button style="margin-top:8px">+ Add category</button><button class="selected"><strong>⌕ Research</strong><small>Medium · 90 days</small></button><button><strong>⚑ Decision</strong><small>Durable</small></button><button><strong>▤ Notes</strong><small>Slow · on resume</small></button><button><strong>▥ Metric</strong><small>Fast · at use</small></button></aside>
+<section><h2 style="font-size:15px;margin:0 0 12px">⌕ Research</h2><nav><button>Basics</button><button class="selected">Review policy</button><button>Usage</button></nav><label>Why review?<select><option>Reality · facts change</option></select></label><label>Review frequency<select><option>Medium · on a cadence</option></select></label><label>Cadence in days<input value="90"></label><label>How to check<textarea rows="2">Check sources and conflicting evidence.</textarea></label><details><summary>Additional review triggers</summary><p>Source changes · contradiction · dependency changes</p></details><p>Changes affect inheriting folders. Explicit folder and card overrides keep their policy.</p></section>
+</div><footer><button>Cancel</button><button class="save">Save category</button></footer>
+</section>
+<div class="states">
+<section><strong>Basics / Usage</strong><label>Glyph<input value="⌕"></label><div role="group" aria-label="Glyph choices" style="display:flex;flex-wrap:wrap;gap:6px"><button>◎</button><button>◇</button><button>⚑</button><button class="selected">⌕</button><button>▥</button><button>✎</button><button>?</button><button>▤</button><button>◉</button></div><p>Choose a starter glyph or type your own. Only the glyph changes, not the category's name or review policy. Usage names explicitly assigned folders.</p></section>
+<section><strong>Dirty-leave guard</strong><p>Discard unsaved category changes?</p><button>Keep editing</button> <button>Discard changes</button><p>Switching category, Cancel, close or Escape uses the guard.</p></section>
+<section><strong>Deletion protection</strong><p>Assigned to Projects / Research. Reassign or clear the folder first.</p><p>Unused deletion asks inline confirmation. Never clears folder assignments or inherited policy.</p></section>
+</div>
+</main>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1100}}'>
+class Component extends DCLogic { renderVals() { return {}; } }
+</script>
+</body></html>

package/docs/design/Chrome.dc.html

@@ -13,7 +13,7 @@
 body{margin:0}
 </style>
 </helmet>
-<div style="width: 1440px; height: 820px; box-sizing: border-box; padding: 40px 48px; background: #081524; color: #e6eef7; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.5; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px">
+<div style="width: 1440px; height: 1000px; box-sizing: border-box; padding: 40px 48px; background: #081524; color: #e6eef7; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.5; display: grid; grid-template-columns: 500px repeat(2, minmax(0, 1fr)); gap: 40px">
 
 <section style="display: flex; flex-direction: column; gap: 14px">
 <div><h2 style="margin: 0; font-size: 15px; font-weight: 600">7 · Tool rail in a 690px-tall window</h2><p style="margin: 2px 0 0; font-size: 12px; color: #8ea3bd">20 buttons need 850px. Settings-type tools move into one menu.</p></div>
@@ -37,20 +37,25 @@ body{margin:0}
 <span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Proposed</span>
 <div style="position: relative; height: 600px; border: 1px solid #1b2c44; border-radius: 10px; overflow: hidden; background: #081524">
 <div style="width: 52px; height: 600px; box-sizing: border-box; padding: 8px 0; background: #0f1d31; border-right: 1px solid #1b2c44; display: flex; flex-direction: column; align-items: center; gap: 4px">
-<sc-for list="{{railNew}}" as="i" hint-placeholder-count="12">
+<sc-for list="{{railNew}}" as="i" hint-placeholder-count="13">
 <sc-if value="{{i.sep}}" hint-placeholder-val="{{ false }}"><div style="width: 24px; height: 1px; margin: 6px 0; background: #1b2c44; flex-shrink: 0"></div></sc-if>
 <sc-if value="{{i.grow}}" hint-placeholder-val="{{ false }}"><div style="flex: 1"></div></sc-if>
 <sc-if value="{{i.btn}}" hint-placeholder-val="{{ true }}"><button aria-label="{{i.label}}" style="{{i.style}}"><svg width="18" height="18" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round"><path d="{{i.d}}"></path></svg></button></sc-if>
 </sc-for>
 </div>
-<div role="menu" aria-label="Settings" style="position: absolute; left: 60px; bottom: 8px; width: 180px; box-sizing: border-box; padding: 6px; border-radius: 10px; border: 1px solid #1b2c44; background: #0f1d31; box-shadow: 0 10px 30px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 2px">
-<sc-for list="{{settings}}" as="m" hint-placeholder-count="6">
+<!-- Tooltip preview is a sibling of the scrolling menu, never clipped by its overflow. -->
+<div role="tooltip" id="settings-tooltip-preview" style="position: absolute; z-index: 2; left: 60px; bottom: 340px; width: 280px; box-sizing: border-box; padding: 10px 12px; border: 1px solid #2a4566; border-radius: 6px; background: #13243b; color: #b9c6d6; font-size: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.24)"><strong style="color: #e6eef7">Hover / keyboard focus</strong><br>Show session tools for this workspace. Off hides the tools, not attached agents or their protections.</div>
+<div role="menu" aria-label="Settings" style="position: absolute; left: 60px; bottom: 8px; width: 280px; max-height: 316px; overflow-y: auto; box-sizing: border-box; padding: 6px; border-radius: 10px; border: 1px solid #1b2c44; background: #0f1d31; box-shadow: 0 10px 30px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 2px">
+<div style="padding: 4px 10px; color: #8ea3bd; font-size: 11px">Workspace · all boards</div>
+<sc-for list="{{settings}}" as="m" hint-placeholder-count="8">
 <sc-if value="{{m.sep}}" hint-placeholder-val="{{ false }}"><div style="height: 1px; margin: 4px 6px; background: #1b2c44"></div></sc-if>
-<sc-if value="{{m.btn}}" hint-placeholder-val="{{ true }}"><button role="menuitem" style="display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: {{m.bg}}; color: #e6eef7; font-family: inherit; font-size: 12px; text-align: left">{{m.label}}<span style="font-size: 11px; color: #6b7d94">{{m.hint}}</span></button></sc-if>
+<sc-if value="{{m.btn}}" hint-placeholder-val="{{ true }}"><button role="menuitem" aria-description="{{m.tip}}" style="display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: {{m.bg}}; color: #e6eef7; font-family: inherit; font-size: 12px; text-align: left">{{m.label}}<span style="font-size: 11px; color: #6b7d94">{{m.hint}}</span></button></sc-if>
+<sc-if value="{{m.toggle}}" hint-placeholder-val="{{ false }}"><button role="menuitemcheckbox" aria-checked="false" aria-description="{{m.tip}}" style="display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 8px; height: 34px; padding: 0 10px; border: 0; border-radius: 6px; background: {{m.bg}}; color: #e6eef7; font-family: inherit; font-size: 12px; text-align: left"><span>{{m.label}} <sc-if value="{{m.beta}}" hint-placeholder-val="{{ true }}"><span style="font-size: 10px; color: #8ea3bd">Beta</span></sc-if></span><span style="display: flex; align-items: center; gap: 6px; font-size: 11px; color: #8ea3bd">Off <span aria-hidden="true" style="display: inline-flex; align-items: center; width: 24px; height: 14px; padding: 2px; box-sizing: border-box; border: 1px solid #6b7d94; border-radius: 999px; background: #081524"><span style="width: 8px; height: 8px; border-radius: 50%; background: #8ea3bd"></span></span></span></button></sc-if>
 </sc-for>
 </div>
 </div>
-<span style="font-size: 11px; color: #8ea3bd">12 tools, then Settings: theme, snapshots, minimap, shortcuts, trace, feedback.</span>
+<span style="font-size: 11px; color: #8ea3bd">13 tools, then Settings. Both Beta switches default Off and persist library-wide, never in board snapshots. Every main item explains itself on hover and keyboard focus through a nonnative, viewport-contained overlay outside the scrolling menu (preview above). Saving disables the action with aria-disabled while retaining focus on the switch; Tab and board shortcuts never act on the canvas behind the menu. Trace toggles inline with the same switch, without a Beta label; Clear trace appears separately while capture is on or trace cards remain. Theme opens in place with “‹ Settings”, not a side flyout. Eraser stays beside Text note.</span>
+<span style="font-size: 11px; color: #8ea3bd">Sessions Off: no chips, start, timeline, work items, composer or receipts; attached agents, writer visibility, approvals, scope, edit locks and veto remain. Lifecycle Off: no Review, policy/category management, filters or due/retired marks; saved records and suspended drafts remain. Folders, boards, pins and relations stay. UI opt-ins only, not API/security disables; retired context stays excluded.</span>
 </div>
 
 </div>
@@ -101,6 +106,33 @@ body{margin:0}
 </sc-for>
 </div>
 </div>
+
+<span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Reference footer · many connections</span>
+<div style="height: 236px; display: flex; flex-direction: column; border: 1px solid #1b2c44; border-radius: 10px; overflow: hidden; background: #0f1d31">
+<div style="flex-shrink: 0; height: 36px; display: flex; align-items: center; padding: 0 12px; border-bottom: 1px solid #1b2c44; font-size: 12px; font-weight: 600">Research index</div>
+<div style="flex: 1; min-height: 0; display: flex; flex-direction: column">
+<div style="flex: 1; min-height: 0; padding: 10px 12px; overflow: auto; font-size: 13px; color: #b9c6d6">Read the source, then follow <a href="#reference-footer" style="color: #e6eef7">the evidence</a>.<div style="margin-top: 20px; font-size: 12px; color: #8ea3bd">Set as README <span style="float: right">Edit</span></div></div>
+<div id="reference-footer" role="region" aria-label="Cross-board references" tabindex="0" style="flex-shrink: 0; max-height: min(40%, 132px); overflow: auto; overscroll-behavior: contain">
+<div style="padding: 6px 12px; border-top: 1px solid #1b2c44; font-size: 12px; color: #b9c6d6">↗ references: Research / Interview notes</div>
+<div style="padding: 6px 12px; border-top: 1px solid #1b2c44; font-size: 12px; color: #b9c6d6">↗ references: Research / Findings</div>
+<div style="padding: 6px 12px; border-top: 1px solid #1b2c44; font-size: 12px; color: #b9c6d6">↗ references: Research / Follow-ups</div>
+<div style="padding: 6px 12px; border-top: 1px solid #1b2c44; font-size: 12px; color: #b9c6d6">↗ references: Research / Next steps</div>
+</div>
+</div>
+</div>
+<span style="font-size: 11px; color: #8ea3bd">Keep every connection. Only the references scroll, capped at 40% of the body and 132 world px; short lists keep their natural height. The document and its actions retain their own space. Wheel and keyboard scrolling stay inside the footer.</span>
+<span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Reference footer · focus mode</span>
+<div style="height: 350px; display: flex; flex-direction: column; border: 1px solid #1b2c44; border-radius: 14px; overflow: hidden; background: #0f1d31">
+<div style="flex-shrink: 0; height: 46px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid #1b2c44; font-size: 13px; font-weight: 600">Research index <span style="margin-left: auto; font-size: 12px; font-weight: 400">Relations</span><span style="margin-left: 12px">×</span></div>
+<div style="flex: 1; min-height: 0; overflow: auto; padding: 16px; font-size: 13px; color: #b9c6d6">Read and edit the source here. Actual edits finish saving before a reference opens; a refused save keeps this reader and its draft.</div>
+<div role="region" aria-label="Cross-board references" tabindex="0" style="flex-shrink: 0; max-height: min(40%, 132px); overflow: auto; overscroll-behavior: contain">
+<div style="padding: 6px 12px; border-top: 1px solid #1b2c44; font-size: 12px; color: #b9c6d6">↗ references: Research / Interview notes</div>
+<div style="padding: 6px 12px; border-top: 1px solid #1b2c44; font-size: 12px; color: #b9c6d6">↗ references: Research / Findings</div>
+<div style="padding: 6px 12px; border-top: 1px solid #1b2c44; font-size: 12px; color: #b9c6d6">↗ references: Research / Follow-ups</div>
+<div style="padding: 6px 12px; border-top: 1px solid #1b2c44; font-size: 12px; color: #b9c6d6">↗ references: Research / Next steps</div>
+</div>
+<div style="flex-shrink: 0; height: 28px; display: flex; align-items: center; padding: 0 16px; border-top: 1px solid #1b2c44; font-size: 11px; color: #8ea3bd">markdown<span style="margin-left: auto">esc or click outside to close</span></div>
+</div>
 </section>
 
 <section style="display: flex; flex-direction: column; gap: 14px">
@@ -145,7 +177,7 @@ body{margin:0}
 
 </div>
 </x-dc>
-<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":820}}'>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1000}}'>
 class Component extends DCLogic {
   renderVals() {
     var P = {
@@ -192,7 +224,7 @@ class Component extends DCLogic {
     var railNew = [
       b('Home', P.home), sep,
       b('Select', P.select), b('Pan', P.pan), b('Connect', P.connect), sep,
-      b('Markdown note', P.note), b('Attach files', P.attach), b('Webpage', P.web), b('Group', P.group), b('Draw', P.draw), b('Text note', P.text), sep,
+      b('Markdown note', P.note), b('Attach files', P.attach), b('Webpage', P.web), b('Group', P.group), b('Draw', P.draw), b('Text note', P.text), b('Eraser', P.eraser), sep,
       b('Search and commands', P.search), b('Arrange', P.arrange), grow, b('Settings', P.settings)
     ].map(function (i) {
       if (!i.btn) return i;
@@ -200,7 +232,18 @@ class Component extends DCLogic {
     });
     function m(label, hint, active) { return { btn: true, sep: false, label: label, hint: hint, bg: active ? '#1b2c44' : 'transparent' }; }
     var msep = { btn: false, sep: true };
-    var settings = [m('Theme', 'Dark ›', true), m('Snapshots', ''), m('Minimap', 'On'), m('Keyboard shortcuts', '?'), msep, m('Trace', 'Off ›'), m('Send feedback', '')];
+    function setting(label, hint, tip) { return Object.assign(m(label, hint), { tip: tip, toggle: false }); }
+    function optIn(label, tip, active, beta = true) { return { btn: false, sep: false, toggle: true, beta: beta, label: label, tip: tip, bg: active ? '#1b2c44' : 'transparent' }; }
+    var settings = [
+      setting('Theme', 'Harbor ›', 'Choose the workspace appearance.'),
+      setting('Snapshots', '', 'Save or restore this board; workspace opt-ins are not included.'),
+      setting('Minimap', 'On', 'Show or hide the board overview.'),
+      setting('Keyboard shortcuts', '?', 'See the available keyboard commands.'), msep,
+      optIn('Agent sessions', 'Show session tools for this workspace. Off hides the tools, not attached agents or their protections.', true),
+      optIn('Knowledge lifecycle', 'This turns on context lifecycle, where boards and cards decay over time as their relevance fades. Includes Review, review policies, categories, and due or retired indicators. Turning off hides lifecycle tools without deleting their data or drafts. Saved for this workspace.'), msep,
+      optIn('Trace', 'Show execution traces. Turning off keeps existing traces and never starts an agent.', false, false),
+      setting('Send feedback', '', 'Share feedback about PMX Canvas.')
+    ];
     var nodeMenu = [m('Focus', ''), m('Rename…', ''), m('Collapse', ''), m('Open in new tab', '', true), msep, m('Delete', '⌫')];
     var oldIcons = [{ d: P.ctx }, { d: P.ask }, { d: P.open }, { d: P.expand }, { d: P.chevron }, { d: P.close }];
     return { railToday: railToday, railNew: railNew, settings: settings, nodeMenu: nodeMenu, oldIcons: oldIcons };