pmx-canvas 0.8.2 → 0.9.0

package/docs/design/Pane600.dc.html

@@ -13,7 +13,7 @@
 body{margin:0}
 </style>
 </helmet>
-<div style="width: 1440px; height: 1000px; box-sizing: border-box; padding: 40px 56px; background: #050d17; color: #e6eef7; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 16px">
+<div style="width: 1440px; height: 1040px; box-sizing: border-box; padding: 40px 56px; background: #050d17; color: #e6eef7; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 16px">
 <div><h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">At 600 px — the narrow end</h1><p style="margin: 4px 0 0; font-size: 13px; color: #8ea3bd">The narrow end of the reference widths (600, 1024, 1920 px): an agent-host pane or a narrow side browser. One column, panels become drawers and sheets, nothing important hides behind a scrollbar. Every board above is the full-window end.</p></div>
 <div style="display: flex; gap: 64px">
 
@@ -70,7 +70,8 @@ body{margin:0}
 <div style="{{p.node}} left: 64px; top: 330px; width: 250px"><div style="{{p.head}}"><span style="{{p.title}}">Churn flat after raise</span><span style="{{p.mark}}"><svg width="11" height="11" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z"></path></svg>by Claude</span><button aria-label="Expand (Enter)" style="width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button><button aria-label="Add to context (P)" style="width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #6b7d94; border-radius: 999px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button></div><div style="{{p.body}}">Pro churn 2.1% → 2.2%.</div></div>
 <div style="{{p.node}} left: 330px; top: 330px; width: 250px"><div style="position: absolute; left: 0; right: 0; top: 0; height: 2.5px; background: #B388FF"></div><div style="{{p.head}}"><span style="{{p.title}}">SMB is price-sensitive</span><span style="{{p.mark}}"><svg width="11" height="11" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M4 20l4.2-1L19 8.2 15.8 5 5 15.8z"></path></svg>edited</span><button aria-label="Expand (Enter)" style="width: 22px; height: 22px; border: 0; border-radius: 6px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="13" height="13" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round"><path d="M14 4h6v6M20 4l-7 7M10 20H4v-6M4 20l7-7"></path></svg></button><button aria-label="Add to context (P)" style="width: 18px; height: 18px; box-sizing: border-box; border: 1.5px solid #6b7d94; border-radius: 999px; padding: 0; background: transparent; color: #b9c6d6; display: flex; align-items: center; justify-content: center; flex-shrink: 0"><svg width="10" height="10" viewBox="0 0 24 24" style="fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round"><path d="M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20"></path></svg></button></div><div style="{{p.body}}">6 of 9 would downgrade.</div></div>
 <div style="position: absolute; left: 56px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px">
-<div style="display: flex; gap: 8px; flex-wrap: wrap">
+<span style="font-size: 11px; color: #b9c6d6">Superseded 2026-10-10: these two floating chips moved to the top bar — the context summary (ContextChip600) and the agent’s initial, whose popover holds the live counts and the lens switch (SeeChange).</span>
+<div style="display: flex; gap: 8px; flex-wrap: wrap; opacity: 0.45">
 <span style="display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(75,188,255,0.3); background: #0f1d31; color: #4BBCFF; font-size: 12px; font-weight: 500">4 in context <span style="color: #f4c542">· 1 out of date</span></span>
 <span style="display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(179,136,255,0.35); background: #0f1d31; color: #B388FF; font-size: 12px; font-weight: 500"><span style="width: 7px; height: 7px; border-radius: 999px; background: #B388FF"></span>Claude · 4 read · 1 edited</span>
 </div>
@@ -82,7 +83,7 @@ body{margin:0}
 </div>
 </div>
 </x-dc>
-<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1000}}'>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1040}}'>
 class Component extends DCLogic {
   renderVals() {
     var p = {

package/docs/design/Relations.dc.html

@@ -18,6 +18,7 @@ body{margin:0}
 <div>
 <h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">Relations</h1>
 <p style="margin: 4px 0 0; font-size: 13px; color: #8ea3bd">A research board: one question, two findings, the evidence and the data behind them. Relations should say what supports a claim, what contradicts it, and where each number came from.</p>
+<p style="margin: 4px 0 0; font-size: 12px; color: #8ea3bd">Lifecycle off: relation filters sit 8px below the canvas top, including when sessions are off. Only visible lifecycle filters reserve a row above relations.</p>
 </div>
 
 <section style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px">
@@ -52,7 +53,7 @@ body{margin:0}
 <div style="display: flex; flex-direction: column; gap: 8px">
 <span style="font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7d94">Proposed — hovering the question</span>
 <div style="position: relative; width: 644px; height: 600px; border-radius: 10px; border: 1px solid #1b2c44; overflow: hidden; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.14) 1px, transparent 1.2px); background-size: 24px 24px">
-<div style="position: absolute; left: 14px; top: 12px; right: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap">
+<div style="position: absolute; left: 14px; top: 8px; right: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap">
 <sc-for list="{{legend}}" as="lg" hint-placeholder-count="6">
 <button style="display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; border: 1px solid #1b2c44; background: #0f1d31; color: #e6eef7; font-family: inherit; font-size: 11px; font-weight: 500"><svg width="18" height="6" viewBox="0 0 18 6" style="fill: none; stroke: {{lg.c}}; stroke-width: 2; stroke-dasharray: {{lg.dash}}; stroke-linecap: round"><path d="M1 3 H17"></path></svg>{{lg.name}}<span style="color: #6b7d94; font-variant-numeric: tabular-nums">{{lg.n}}</span></button>
 </sc-for>
@@ -120,7 +121,7 @@ body{margin:0}
 <div style="{{a.cell}}">
 <svg width="220" height="110" viewBox="0 0 220 110" style="position: absolute; left: 0; top: 0; fill: none; stroke-linecap: round"><path d="M 60 55 L 158 55" style="stroke: #4BBCFF; stroke-width: 6; opacity: 0.25"></path><path d="M 60 55 L 158 55" style="stroke: #4BBCFF; stroke-width: 3"></path></svg>
 <div style="{{a.box}} left: 14px; top: 41px">A</div><div style="{{a.box}} left: 160px; top: 41px">B</div>
-<span style="position: absolute; left: 14px; bottom: 8px; font-size: 11px; color: #6b7d94">Delete or double-click for a menu.</span>
+<span style="position: absolute; left: 14px; bottom: 8px; font-size: 11px; color: #6b7d94">Delete or right-click for a menu.</span>
 </div>
 
 <span style="font-size: 12px; font-weight: 600">Proposed</span>

package/docs/design/Restore.dc.html

@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Restore a retired card</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: 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: flex; flex-direction: column; gap: 20px">
+
+<div>
+<h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">Retired, and back again</h1>
+<p style="margin: 4px 0 0; font-size: 13px; color: #8ea3bd">Retiring takes a card out of the brief and nothing else: the card, its content and its history stay on the board. If that was a mistake, anyone who can edit the board restores it, and the history says who and when.</p>
+</div>
+
+<div style="flex: 1; display: grid; grid-template-columns: 440px 500px 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 · Where a retired card is</span>
+<div style="position: relative; height: 300px; border-radius: 10px; border: 1px solid #1b2c44; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.14) 1px, transparent 1.2px); background-size: 24px 24px; overflow: hidden">
+<div style="position: absolute; left: 0; right: 0; top: 0; height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #0f1d31; border-bottom: 1px solid #1b2c44">
+<span style="font-size: 13px; font-weight: 600; flex: 1">Pricing strategy 2027</span>
+<span style="{{s.filterOff}}">All</span><span style="{{s.filterOff}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.glass}}"></path></svg>To review 2</span><span style="{{s.filterOn}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.retire}}"></path></svg>Retired 1</span>
+</div>
+<div style="{{s.cardFaded}} left: 16px; top: 64px; width: 200px; height: 96px"><div style="{{s.head}}"><span style="{{s.title}}">Positioning: premium SMB</span></div><div style="{{s.body}}">Lead with reliability…</div></div>
+<div style="{{s.cardRetired}} left: 228px; top: 64px; width: 196px; height: 116px"><div style="{{s.head}}"><span style="{{s.title}}">Old tier names</span><span style="{{s.retiredTag}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.retire}}"></path></svg>retired</span></div><div style="{{s.body}}">Starter / Team / Business naming from 2025.</div></div>
+<div style="{{s.cardFaded}} left: 16px; top: 176px; width: 200px; height: 96px"><div style="{{s.head}}"><span style="{{s.title}}">Competitor price list</span></div><div style="{{s.body}}">Six competitors…</div></div>
+</div>
+<span style="font-size: 11px; color: #8ea3bd">On the board a retired card is always drawn dimmed, in place. The <b style="font-weight: 600; color: #b9c6d6">Retired</b> filter fades everything else and adds the word, so it is found without hunting.</span>
+
+<div style="{{s.panel}} padding: 10px; gap: 6px">
+<div style="display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 6px; border: 1px solid #2a4566; background: #081524"><svg width="13" height="13" viewBox="0 0 24 24" style="{{s.icDim}}"><path d="{{i.search}}"></path></svg><span style="flex: 1">tier names</span><span style="font-size: 11px; color: #6b7d94">⌘K</span></div>
+<sc-for list="{{results}}" as="r" hint-placeholder-count="3">
+<div style="{{r.row}}"><div style="flex: 1; min-width: 0; display: flex; flex-direction: column"><span style="font-size: 12px; font-weight: 500">{{r.t}}</span><span style="font-size: 11px; color: #8ea3bd">{{r.where}}</span></div><span style="{{r.tagSt}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.retire}}"></path></svg>{{r.tag}}</span></div>
+</sc-for>
+<span style="font-size: 11px; color: #8ea3bd; padding: 0 4px">Search still finds retired cards and says so; agents find them through canvas_query search too, marked retired.</span>
+</div>
+</section>
+
+<section style="display: flex; flex-direction: column; gap: 10px; min-width: 0">
+<span style="{{s.label}}">2 · Lifecycle tab — Old tier names</span>
+<div style="{{s.panel}} 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">
+<span style="font-size: 15px; font-weight: 600; flex: 1">Old tier names</span>
+<span style="{{s.tabOff}}">Content</span><span style="{{s.tabOn}}">Lifecycle</span><span style="{{s.tabOff}}">Source</span>
+</div>
+<div style="padding: 16px; display: flex; flex-direction: column; gap: 14px">
+<div style="display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 8px; border: 1px solid #2a4566; background: #13243b">
+<div style="display: flex; align-items: center; gap: 8px"><span style="{{s.retiredTag}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.retire}}"></path></svg>retired from active context</span></div>
+<span style="font-size: 12px; color: #b9c6d6">Not in the brief since 2 Oct 2026. Retired by <span style="color: #B388FF">Claude</span>: “superseded by New tier names”.</span>
+<button style="{{s.btnPrimary}}"><svg width="14" height="14" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.restore}}"></path></svg>Restore to active context</button>
+<div style="{{s.input}}"><span style="color: #6b7d94">Why — optional, e.g. “retired by mistake”</span></div>
+</div>
+<div style="display: flex; flex-direction: column; gap: 6px">
+<span style="font-size: 12px; font-weight: 600">What restore does</span>
+<sc-for list="{{effects}}" as="e" hint-placeholder-count="4"><div style="display: flex; gap: 8px; font-size: 12px; color: #b9c6d6"><span style="{{e.gSt}}">{{e.g}}</span><span>{{e.t}}</span></div></sc-for>
+</div>
+</div>
+</div>
+
+<div style="display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 10px; border: 1px solid #2a4566; background: #13243b; box-shadow: 0 10px 30px rgba(0,0,0,0.5)">
+<svg width="14" height="14" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.retire}}"></path></svg><span style="flex: 1; font-size: 12px">Old tier names retired from active context</span><span style="font-size: 12px; font-weight: 600; color: #4BBCFF">Undo</span>
+</div>
+<span style="font-size: 11px; color: #8ea3bd">Right after retiring, the toast offers Undo — the quickest way back. Later, Restore in the Lifecycle tab.</span>
+</section>
+
+<section style="display: flex; flex-direction: column; gap: 10px; min-width: 0">
+<span style="{{s.label}}">3 · Recorded in the history</span>
+<div style="{{s.panel}} padding: 14px; gap: 2px">
+<span style="font-size: 12px; font-weight: 600; padding-bottom: 6px">History · Old tier names</span>
+<sc-for list="{{history}}" as="h" hint-placeholder-count="4">
+<div style="display: flex; flex-direction: column; gap: 1px; padding: 8px 0; border-top: 1px solid #1b2c44"><div style="display: flex; align-items: center; gap: 8px; font-size: 12px"><svg width="12" height="12" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{h.icon}}"></path></svg><span style="font-weight: 600; flex: 1">{{h.o}}</span><span style="color: #8ea3bd">{{h.d}}</span></div><div style="font-size: 12px; padding-left: 20px"><span style="{{h.whoSt}}">{{h.who}}</span><span style="color: #b9c6d6"> · {{h.e}}</span></div></div>
+</sc-for>
+</div>
+<sc-for list="{{rules}}" as="r" hint-placeholder-count="3">
+<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":820}}'>
+class Component extends DCLogic {
+  renderVals() {
+    var i = {
+      glass: 'M7 3h10M7 21h10M8 3v3l4 6-4 6v3M16 3v3l-4 6 4 6v3',
+      retire: 'M4 7h16M6 7v12h12V7M9 4h6',
+      restore: 'M4 12a8 8 0 1 0 2.3-5.6M4 4v4h4',
+      search: 'M10.5 4a6.5 6.5 0 1 0 0 13a6.5 6.5 0 1 0 0-13M15.5 15.5L20 20',
+      check: 'M5 12.5l4.5 4.5L19 7',
+      revise: 'M4 20l4.2-1L19 8.2 15.8 5 5 15.8zM13 7l4 4'
+    };
+    var nodeBase = 'position:absolute;box-sizing:border-box;border-radius:10px;background:#0f1d31;border:1px solid #1b2c44;overflow:hidden;';
+    var tagBase = 'display:inline-flex;align-items:center;gap:4px;height:20px;box-sizing:border-box;padding:0 7px;border-radius:999px;font-size:11px;font-weight:500;flex-shrink:0;';
+    var fBase = 'display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 8px;border-radius:999px;font-size:11px;';
+    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;',
+      filterOn: fBase + 'background:#1b2c44;color:#e6eef7;font-weight:600;',
+      filterOff: fBase + 'color:#8ea3bd;',
+      cardFaded: nodeBase + 'opacity:0.35;',
+      cardRetired: nodeBase + 'border:1px solid #2a4566;box-shadow:0 1px 2px rgba(0,0,0,0.4),0 6px 20px rgba(0,0,0,0.24);',
+      head: 'display:flex;align-items:center;gap:6px;height:34px;padding:0 8px 0 12px;border-bottom:1px solid #1b2c44;',
+      title: 'flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:600;',
+      body: 'padding:8px 12px;font-size:12px;color:#b9c6d6;',
+      retiredTag: tagBase + 'color:#b9c6d6;background:#1b2c44;',
+      tabOn: 'height:28px;display:flex;align-items:center;padding:0 10px;border-radius:6px;background:#13243b;font-size:12px;font-weight:600;',
+      tabOff: 'height:28px;display:flex;align-items:center;padding:0 10px;font-size:12px;color:#8ea3bd;',
+      btnPrimary: 'align-self:flex-start;display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:0;border-radius:6px;background:#4BBCFF;color:#081524;font-family:inherit;font-size:13px;font-weight:600;',
+      input: 'display:flex;align-items:center;height:34px;box-sizing:border-box;padding:0 10px;border-radius:6px;border:1px solid #2a4566;background:#081524;font-size:12px;'
+    };
+    var rowBase = 'display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;';
+    var results = [
+      { t: 'Old tier names', where: 'Pricing strategy 2027', tag: 'retired', tagSt: s.retiredTag, row: rowBase + 'background:#13243b;' },
+      { t: 'New tier names', where: 'Pricing strategy 2027', tag: '', tagSt: 'display:none;', row: rowBase },
+      { t: 'Tier naming workshop', where: 'Workshops', tag: '', tagSt: 'display:none;', row: rowBase }
+    ];
+    var g = 'flex-shrink:0;width:12px;color:#8ea3bd;';
+    var effects = [
+      { g: '+', gSt: g, t: 'The card goes back into the brief on its next delivery, with its lifecycle as it was.' },
+      { g: '=', gSt: g, t: 'It is not a validation. The last validated date stays, so it may come back marked review due.' },
+      { g: '=', gSt: g, t: 'Nothing is lost while retired: content, links, pins and history were kept the whole time.' },
+      { g: '+', gSt: g, t: 'The agent sees the restore in its next brief’s changes and in the history.' }
+    ];
+    var who = 'color:#e6eef7;';
+    var agent = 'color:#B388FF;';
+    var history = [
+      { o: 'Restored to active context', d: '7 Oct 2026 · 09:42', who: 'Pepe', whoSt: who, e: 'retired by mistake — still our naming in the EU', icon: i.restore },
+      { o: 'Retired from active context', d: '2 Oct 2026 · 16:10', who: 'Claude', whoSt: agent, e: 'superseded by New tier names', icon: i.retire },
+      { o: 'Retained', d: '3 Aug 2026', who: 'Pepe', whoSt: who, e: 'still on the price page', icon: i.check },
+      { o: 'Revised', d: '12 May 2026', who: 'Mia', whoSt: who, e: 'Business renamed from Pro', icon: i.revise }
+    ];
+    var rules = [
+      { t: 'Who can retire and restore', d: 'Anyone who can edit the board, and agents acting for them. An agent’s retire or restore shows its violet name, like any agent edit.' },
+      { t: 'Retired is not deleted', d: 'Delete stays its own action. Retire only answers “should the agent still be told this?”' }
+    ];
+    return { i: i, s: s, results: results, effects: effects, history: history, rules: rules };
+  }
+}
+</script>
+</body>
+</html>

package/docs/design/SeeChange.dc.html

@@ -0,0 +1,267 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>See change in the session receipt</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: 2900px; 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: 24px">
+
+<div>
+<h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">“See change” in the session receipt</h1>
+<p style="margin: 4px 0 0; font-size: 13px; color: #8ea3bd">When a session ends, its receipt lists what the agent edited. “See change” opens the change in place: Before above After, the changed words marked, and Undo for that card alone. Stacked, not side by side — the receipt is 290 px wide, and two columns would leave each about 118 px. Violet marks what the agent wrote; nothing here is amber unless it needs a look.</p>
+</div>
+
+<section style="display: flex; flex-direction: column; gap: 10px">
+<span style="{{s.label}}">1 · One change open, one collapsed — Harbor and Daylight</span>
+<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px">
+<sc-for list="{{full}}" as="f" hint-placeholder-count="2">
+<div style="{{f.frame}}">
+<div style="{{f.bar}}"><span style="{{f.conn}}"></span><span style="font-size: 13px; font-weight: 600">Pricing research ▾</span><span style="flex: 1"></span><span style="{{f.chip}}">4 cards · ≈ 1.1k tokens</span><span style="{{f.avatar}}">C</span></div>
+<div style="{{f.card}}"><div style="{{f.cardBar}}"></div><div style="{{f.cardHead}}"><span style="font-size: 12px; font-weight: 600">SMB is price-sensitive</span></div><div style="{{f.cardBody}}">Interviews show SMB buyers compare on price first. Eight of twelve would move down a tier at $24.</div></div>
+<div style="{{f.card2}}"><div style="{{f.cardBar}}"></div><div style="{{f.cardHead}}"><span style="font-size: 12px; font-weight: 600">Churn by month</span></div><div style="{{f.cardBody}}">Pro plan, monthly logo churn, last 12 months.</div></div>
+<div style="{{f.r.box}}">
+<div style="display: flex; align-items: center; gap: 8px"><span style="{{f.r.dot}}"></span><span style="{{f.r.title}}">What Codex did</span><span style="{{f.r.close}}">×</span></div>
+<div style="{{f.r.who}}">This session · 14:54–14:55 · saved as a snapshot · ended by the agent</div>
+<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 12px"><sc-for list="{{f.r.tiles}}" as="t" hint-placeholder-count="3"><div style="{{f.r.tile}}"><span style="{{f.r.tileLabel}}">{{t.l}}</span><span style="{{t.st}}">{{t.v}}</span></div></sc-for></div>
+<div style="{{f.r.row}}"><div style="{{f.r.rowHead}}"><svg width="13" height="13" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.eye}}"></path></svg><span style="{{f.r.rowName}}">Read</span><span style="{{f.r.rowCount}}">2</span></div><div style="{{f.r.items}}">Raise Pro to $24?, Competitor pricing</div></div>
+<div style="{{f.r.row}}">
+<div style="{{f.r.rowHead}}"><svg width="13" height="13" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.pen}}"></path></svg><span style="{{f.r.rowName}}">Edited</span><span style="{{f.r.rowCount}}">2</span><span style="{{f.r.mini}}">Undo</span></div>
+<div style="{{f.r.edits}}">
+<div style="{{f.r.line}}"><span><span style="{{f.r.cardName}}">SMB is price-sensitive</span><span style="{{f.r.change}}"> — rewrote the second paragraph</span></span><span style="{{f.r.link}}">Hide change</span></div>
+<div style="{{f.r.side}}"><span style="{{f.r.sideLabel}}">Before</span><span style="{{f.r.text}}"><sc-for list="{{f.r.before}}" as="w" hint-placeholder-count="4"><span style="{{w.st}}">{{w.t}}</span></sc-for></span></div>
+<div style="{{f.r.side}}"><span style="{{f.r.sideLabel}}">After</span><span style="{{f.r.text}}"><sc-for list="{{f.r.after}}" as="w" hint-placeholder-count="4"><span style="{{w.st}}">{{w.t}}</span></sc-for></span></div>
+<div style="display: flex; align-items: center; gap: 8px"><span style="{{f.r.mini}}">Undo this card</span><span style="{{f.r.change}}">puts back the text from before</span></div>
+<div style="{{f.r.line}} margin-top: 4px"><span><span style="{{f.r.cardName}}">Churn by month</span><span style="{{f.r.change}}"> — added the September row</span></span><span style="{{f.r.link}}">See change</span></div>
+</div>
+</div>
+<div style="display: flex; align-items: center; gap: 8px; margin-top: 10px"><span style="{{f.r.track}}"><span style="{{f.r.knob}}"></span></span><span style="{{f.r.change}}">Dim untouched nodes</span></div>
+</div>
+</div>
+</sc-for>
+</div>
+<span style="font-size: 12px; color: #b9c6d6">The cards the session edited keep their violet title-bar line while the receipt is up. “Hide change” closes the view; only one change is open at a time, so the receipt never grows past the canvas.</span>
+</section>
+
+<section style="display: flex; flex-direction: column; gap: 10px">
+<span style="{{s.label}}">2 · States of an open change, and of the row’s Undo</span>
+<div style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px">
+<sc-for list="{{states}}" as="x" hint-placeholder-count="4">
+<div style="display: flex; flex-direction: column; gap: 6px">
+<span style="font-size: 12px; font-weight: 600">{{x.name}}</span>
+<div style="{{x.r.box}} width: auto">
+<div style="{{x.r.line}}"><span><span style="{{x.r.cardName}}">{{x.title}}</span><span style="{{x.r.change}}"> — {{x.change}}</span></span><span style="{{x.r.link}}">Hide change</span></div>
+<div style="{{x.r.side}}"><span style="{{x.r.sideLabel}}">Before</span><span style="{{x.r.text}}"><sc-for list="{{x.before}}" as="w" hint-placeholder-count="4"><span style="{{w.st}}">{{w.t}}</span></sc-for></span></div>
+<div style="{{x.r.side}}"><span style="{{x.r.sideLabel}}">After</span><span style="{{x.r.text}}"><sc-for list="{{x.after}}" as="w" hint-placeholder-count="4"><span style="{{w.st}}">{{w.t}}</span></sc-for></span></div>
+<div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap"><span style="{{x.btnSt}}">{{x.btn}}</span><span style="{{x.r.change}}">{{x.note}}</span></div>
+</div>
+<span style="font-size: 11px; color: #8ea3bd">{{x.why}}</span>
+</div>
+</sc-for>
+</div>
+<div style="display: flex; align-items: center; gap: 24px; padding: 12px 14px; border-radius: 10px; border: 1px solid #1b2c44; background: #0f1d31">
+<span style="font-size: 12px; font-weight: 600">The Edited row’s Undo</span>
+<sc-for list="{{rowUndo}}" as="u" hint-placeholder-count="3"><span style="display: flex; align-items: center; gap: 8px"><span style="{{u.st}}">{{u.t}}</span><span style="font-size: 11px; color: #8ea3bd">{{u.d}}</span></span></sc-for>
+</div>
+</section>
+
+<section style="display: flex; flex-direction: column; gap: 10px">
+<span style="{{s.label}}">3 · A long card — the excerpt is cut around the first difference</span>
+<div style="display: grid; grid-template-columns: 290px 1fr; gap: 24px; align-items: start">
+<div style="{{long.r.box}} width: 290px; box-sizing: border-box">
+<div style="{{long.r.line}}"><span><span style="{{long.r.cardName}}">Pricing research notes</span><span style="{{long.r.change}}"> — tightened the summary</span></span><span style="{{long.r.link}}">Hide change</span></div>
+<div style="{{long.r.side}}"><span style="{{long.r.sideLabel}}">Before</span><span style="{{long.r.textLong}}"><sc-for list="{{long.before}}" as="w" hint-placeholder-count="5"><span style="{{w.st}}">{{w.t}}</span></sc-for></span></div>
+<div style="{{long.r.side}}"><span style="{{long.r.sideLabel}}">After</span><span style="{{long.r.textLong}}"><sc-for list="{{long.after}}" as="w" hint-placeholder-count="5"><span style="{{w.st}}">{{w.t}}</span></sc-for></span></div>
+<div style="display: flex; align-items: center; gap: 8px"><span style="{{long.r.mini}}">Undo this card</span><span style="{{long.r.change}}">undoes the whole card</span></div>
+</div>
+<div style="display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #b9c6d6">
+<span>About 1,200 characters around the first difference; a muted “…” where the text is cut, at either end. Each box scrolls past 120 px.</span>
+<span>The excerpt is for reading the change; Undo always restores the whole card as it was before the session, which the caption says.</span>
+<span>Removed words: struck through, muted, on the soft surface. Added words: a violet tint with a violet underline — the agent wrote them. No red and green: red is an error, green is done.</span>
+</div>
+</div>
+</section>
+
+<section style="display: flex; flex-direction: column; gap: 10px">
+<span style="{{s.label}}">4 · At 600 px — the same receipt, and where the live counts go</span>
+<div style="display: grid; grid-template-columns: 600px 600px; gap: 48px">
+<sc-for list="{{narrow}}" as="n" hint-placeholder-count="2">
+<div style="display: flex; flex-direction: column; gap: 6px">
+<span style="font-size: 12px; font-weight: 600">{{n.name}}</span>
+<div style="{{n.frame}}">
+<div style="{{n.bar}}"><span style="{{n.conn}}"></span><span style="font-size: 13px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">Pricing research ▾</span><span style="{{n.chip}}">4 in context</span><span style="{{n.avatar}}">C<span style="{{n.status}}"></span></span><span style="{{n.more}}">⋯</span></div>
+<sc-if value="{{n.live}}" hint-placeholder-val="{{ true }}">
+<div style="{{n.pop}}">
+<div style="display: flex; align-items: center; gap: 8px"><span style="{{n.popDot}}"></span><span style="font-size: 12px; font-weight: 600; flex: 1">Codex · working</span><span style="font-size: 11px; color: {{n.mutedC}}">14:54</span></div>
+<span style="{{n.counts}}">2 read · 1 edited</span>
+<div style="display: flex; align-items: center; gap: 8px"><span style="{{n.track}}"><span style="{{n.knob}}"></span></span><span style="font-size: 11px; color: {{n.mutedC}}">Dim untouched nodes</span></div>
+<span style="{{n.link}}">Open session panel</span>
+</div>
+</sc-if>
+<sc-if value="{{n.receipt}}" hint-placeholder-val="{{ false }}">
+<div style="{{n.r.box}} position: absolute; right: 12px; top: 56px">
+<div style="display: flex; align-items: center; gap: 8px"><span style="{{n.r.dot}}"></span><span style="{{n.r.title}}">What Codex did</span><span style="{{n.r.close}}">×</span></div>
+<div style="{{n.r.who}}">This session · 14:54–14:55 · ended by the agent</div>
+<div style="{{n.r.row}}">
+<div style="{{n.r.rowHead}}"><svg width="13" height="13" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.pen}}"></path></svg><span style="{{n.r.rowName}}">Edited</span><span style="{{n.r.rowCount}}">1</span><span style="{{n.r.mini}}">Undo</span></div>
+<div style="{{n.r.edits}}">
+<div style="{{n.r.line}}"><span><span style="{{n.r.cardName}}">SMB is price-sensitive</span><span style="{{n.r.change}}"> — rewrote the second paragraph</span></span><span style="{{n.r.link}}">Hide change</span></div>
+<div style="{{n.r.side}}"><span style="{{n.r.sideLabel}}">Before</span><span style="{{n.r.text}}"><sc-for list="{{n.r.before}}" as="w" hint-placeholder-count="4"><span style="{{w.st}}">{{w.t}}</span></sc-for></span></div>
+<div style="{{n.r.side}}"><span style="{{n.r.sideLabel}}">After</span><span style="{{n.r.text}}"><sc-for list="{{n.r.after}}" as="w" hint-placeholder-count="4"><span style="{{w.st}}">{{w.t}}</span></sc-for></span></div>
+<div style="display: flex; align-items: center; gap: 8px"><span style="{{n.r.mini}}">Undo this card</span></div>
+</div>
+</div>
+</div>
+</sc-if>
+</div>
+<span style="font-size: 11px; color: #8ea3bd">{{n.note}}</span>
+</div>
+</sc-for>
+</div>
+</section>
+
+<section style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px">
+<div style="{{s.panel}} padding: 16px 18px; gap: 8px">
+<span style="font-size: 13px; font-weight: 600">The rule</span>
+<sc-for list="{{rules}}" as="r" hint-placeholder-count="5"><span style="font-size: 12px; color: #b9c6d6">{{r}}</span></sc-for>
+</div>
+<div style="{{s.panel}} padding: 16px 18px; gap: 8px">
+<span style="font-size: 13px; font-weight: 600">Settled: Pane600 vs ContextChip600</span>
+<span style="font-size: 12px; color: #b9c6d6">ContextChip600 wins. At ≤ 760 px the agent chip is its initial only, so the live counts are not in the bar. They move into the avatar’s popover, with the same button that turns the dim-untouched lens on and off, plus “Open session panel”. A violet ring on the avatar says a session is attached; a small dot shows its phase.</span>
+<span style="font-size: 12px; color: #b9c6d6">Pane600’s floating “Claude · 4 read · 1 edited” chip at the bottom of the canvas is the older layout and is marked superseded there.</span>
+</div>
+</section>
+
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":2900}}'>
+class Component extends DCLogic {
+  renderVals() {
+    var i = {
+      eye: 'M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12zM12 9.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 1 0 0-5',
+      pen: 'M4 20l4.2-1L19 8.2 15.8 5 5 15.8z'
+    };
+    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:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;'
+    };
+    function hexA(h, a) { var n = parseInt(h.slice(1), 16); return 'rgba(' + (n >> 16 & 255) + ',' + (n >> 8 & 255) + ',' + (n & 255) + ',' + a + ')'; }
+    var H = { name: 'Harbor', bg: '#081524', panel: '#0f1d31', soft: '#13243b', line: '#1b2c44', line2: '#2a4566', text: '#e6eef7', textSoft: '#b9c6d6', muted: '#8ea3bd', dim: '#6b7d94', pin: '#4BBCFF', agent: '#B388FF', ok: '#2fd07f', shadow: '0 12px 40px rgba(0,0,0,0.5)' };
+    var D = { name: 'Daylight', bg: '#F6F7F9', panel: '#FFFFFF', soft: '#F2F4F7', line: '#DDE2E9', line2: '#C9D1DC', text: '#0B1726', textSoft: '#3a4a5e', muted: '#55657a', dim: '#7a8899', pin: '#1A7ABF', agent: '#7C4DDB', ok: '#1E7F51', shadow: '0 12px 40px rgba(8,21,36,0.18)' };
+    function words(c, parts) {
+      return parts.map(function (p) {
+        var st = p[0] === 'del' ? 'text-decoration:line-through;color:' + c.muted + ';background:' + c.soft + ';border-radius:3px;'
+          : p[0] === 'add' ? 'background:' + hexA(c.agent, 0.16) + ';box-shadow:inset 0 -1.5px 0 ' + c.agent + ';border-radius:3px;color:' + c.text + ';'
+          : p[0] === 'cut' ? 'color:' + c.dim + ';' : '';
+        return { t: p[1], st: st };
+      });
+    }
+    var BEFORE = [['cut', '… '], ['same', 'Interviews show SMB buyers compare on price first. '], ['del', 'Most said a $4 increase would not change their plan.'], ['same', ' Support quality came second.']];
+    var AFTER = [['cut', '… '], ['same', 'Interviews show SMB buyers compare on price first. '], ['add', 'Eight of twelve would move down a tier at $24.'], ['same', ' Support quality came second.']];
+    function receipt(c) {
+      var mini = 'display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid ' + c.line + ';border-radius:6px;color:' + c.text + ';font-size:11px;flex-shrink:0;white-space:nowrap;';
+      return {
+        box: 'width:290px;box-sizing:border-box;padding:12px 14px;border-radius:12px;border:1px solid ' + c.line + ';background:' + c.panel + ';box-shadow:' + c.shadow + ';display:flex;flex-direction:column;gap:6px;color:' + c.text + ';',
+        dot: 'width:7px;height:7px;border-radius:50%;background:' + c.dim + ';',
+        title: 'flex:1;font-size:12px;font-weight:600;',
+        close: 'width:22px;text-align:center;color:' + c.muted + ';font-size:14px;',
+        who: 'margin:-4px 0 0 15px;font-size:11px;color:' + c.muted + ';',
+        tiles: [{ l: 'Items', v: '3', st: 'font-size:15px;font-weight:700;color:' + c.text + ';' }, { l: 'Done', v: '3', st: 'font-size:15px;font-weight:700;color:' + c.ok + ';' }, { l: 'Held', v: '0', st: 'font-size:15px;font-weight:700;color:' + c.dim + ';' }],
+        tile: 'padding:8px 10px;border-radius:8px;border:1px solid ' + c.line + ';background:' + c.soft + ';display:flex;flex-direction:column;gap:2px;',
+        tileLabel: 'font-size:10px;color:' + c.dim + ';',
+        row: 'display:flex;flex-direction:column;gap:3px;margin-top:6px;padding-bottom:8px;border-bottom:1px solid ' + c.line + ';',
+        rowHead: 'display:flex;align-items:center;gap:6px;color:' + c.agent + ';',
+        rowName: 'flex:1;font-size:12px;font-weight:600;color:' + c.text + ';',
+        rowCount: 'font-size:11px;color:' + c.dim + ';',
+        items: 'padding-left:19px;font-size:11px;color:' + c.muted + ';',
+        edits: 'padding-left:19px;display:flex;flex-direction:column;gap:6px;font-size:11px;color:' + c.textSoft + ';',
+        line: 'display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:11px;',
+        cardName: 'color:' + c.textSoft + ';',
+        change: 'color:' + c.muted + ';font-size:11px;',
+        link: 'color:' + c.agent + ';font-size:11px;flex-shrink:0;white-space:nowrap;',
+        side: 'display:flex;flex-direction:column;gap:2px;padding:6px 8px;border-radius:6px;border:1px solid ' + c.line + ';',
+        sideLabel: 'font-size:11px;font-weight:500;color:' + c.dim + ';',
+        text: 'font-size:11px;line-height:1.5;color:' + c.text + ';',
+        textLong: 'display:block;max-height:120px;overflow:hidden;font-size:11px;line-height:1.5;color:' + c.text + ';',
+        mini: mini,
+        track: 'position:relative;display:inline-block;width:32px;height:18px;border-radius:999px;background:' + c.line + ';',
+        knob: 'position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:999px;background:' + c.muted + ';',
+        before: words(c, BEFORE), after: words(c, AFTER)
+      };
+    }
+    function full(c) {
+      return {
+        r: receipt(c),
+        frame: 'position:relative;height:720px;border-radius:12px;border:1px solid ' + c.line + ';overflow:hidden;background-color:' + c.bg + ';background-image:radial-gradient(' + hexA(c.muted, 0.16) + ' 1px, transparent 1.2px);background-size:24px 24px;',
+        bar: 'position:absolute;left:0;right:0;top:0;height:44px;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:0 12px;background:' + c.panel + ';border-bottom:1px solid ' + c.line + ';color:' + c.text + ';',
+        conn: 'width:7px;height:7px;border-radius:999px;background:' + c.ok + ';',
+        chip: 'display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;border:1px solid ' + hexA(c.pin, 0.35) + ';color:' + c.pin + ';font-size:12px;font-weight:500;',
+        avatar: 'width:24px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:' + c.muted + ';background:' + c.soft + ';',
+        card: 'position:absolute;left:16px;top:70px;width:300px;box-sizing:border-box;border-radius:10px;border:1px solid ' + c.line + ';background:' + c.panel + ';overflow:hidden;color:' + c.text + ';',
+        card2: 'position:absolute;left:16px;top:240px;width:300px;box-sizing:border-box;border-radius:10px;border:1px solid ' + c.line + ';background:' + c.panel + ';overflow:hidden;color:' + c.text + ';',
+        cardBar: 'height:2.5px;background:' + c.agent + ';',
+        cardHead: 'display:flex;align-items:center;height:32px;padding:0 12px;border-bottom:1px solid ' + c.line + ';',
+        cardBody: 'padding:8px 12px 12px;font-size:12px;color:' + c.textSoft + ';',
+      };
+    }
+    var fulls = [H, D].map(function (c) { var f = full(c); f.r.box = f.r.box + 'position:absolute;right:14px;top:58px;'; return f; });
+    var R = receipt(H);
+    var btnDisabled = 'display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid #1b2c44;border-radius:6px;color:#6b7d94;font-size:11px;white-space:nowrap;';
+    function st(name, btn, btnSt, note, why) { return { name: name, r: R, title: 'SMB is price-sensitive', change: 'rewrote the second paragraph', before: words(H, BEFORE), after: words(H, AFTER), btn: btn, btnSt: btnSt, note: note, why: why }; }
+    var states = [
+      st('Ready', 'Undo this card', R.mini, 'puts back the text from before', 'The default: the session edited the card and nothing changed since.'),
+      st('Undone', '✓ Undone', btnDisabled, 'the card shows Before again', 'After Undo the change stays open, so the person sees what came back.'),
+      st('You edited it since', 'You edited it since', btnDisabled, 'undo would lose your edit', 'Your later edit wins; Undo is not offered. Neutral, not amber: nothing needs a look.'),
+      st('On another board', 'Open its board to undo', 'display:inline-flex;align-items:center;height:22px;padding:0 8px;border:1px solid #2a4566;border-radius:6px;color:#e6eef7;font-size:11px;white-space:nowrap;', 'it is on Churn analysis', 'A button, not a dead caption: it opens the card’s board, where Undo works.')
+    ];
+    var rowUndo = [
+      { t: 'Undo', st: R.mini, d: 'all cards this session edited' },
+      { t: '✓ Undone', st: btnDisabled, d: 'every card restored' },
+      { t: 'Kept your edits', st: btnDisabled, d: 'cards you edited since were left alone' }
+    ];
+    var long = { r: receipt(H),
+      before: words(H, [['cut', '… '], ['same', 'The 2025 study priced Pro at $19 against Competitor B at $22 and Competitor C at $25. Across twelve interviews, SMB buyers named price, onboarding time and phone support. '], ['del', 'We think a modest increase is safe because most customers are on annual plans and switching costs are high for teams above ten seats.'], ['same', ' Enterprise buyers ranked SSO and audit logs first; price came fourth. The pilot in Denmark '], ['cut', '…']]),
+      after: words(H, [['cut', '… '], ['same', 'The 2025 study priced Pro at $19 against Competitor B at $22 and Competitor C at $25. Across twelve interviews, SMB buyers named price, onboarding time and phone support. '], ['add', 'A $5 increase is risky for SMB: eight of twelve would move down a tier.'], ['same', ' Enterprise buyers ranked SSO and audit logs first; price came fourth. The pilot in Denmark '], ['cut', '…']]) };
+    function narrow(c, live) {
+      var r = receipt(c);
+      return {
+        name: live ? 'During the session — Harbor' : 'After the session — Daylight', live: live, receipt: !live, r: r, mutedC: c.muted,
+        note: live ? 'The agent is its initial at ≤ 760 px. Tapping it opens the counts and the lens switch that sit in the agent chip at wider sizes.' : 'The receipt stays the same 290 px card in the top-right corner; the stacked change needs no other layout at 600 px.',
+        frame: 'position:relative;width:600px;height:' + (live ? 300 : 640) + 'px;box-sizing:border-box;border-radius:12px;border:1px solid ' + c.line + ';overflow:hidden;background-color:' + c.bg + ';background-image:radial-gradient(' + hexA(c.muted, 0.16) + ' 1px, transparent 1.2px);background-size:24px 24px;color:' + c.text + ';',
+        bar: 'position:absolute;left:0;right:0;top:0;height:44px;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:0 8px 0 12px;background:' + c.panel + ';border-bottom:1px solid ' + c.line + ';',
+        conn: 'width:7px;height:7px;border-radius:999px;flex-shrink:0;background:' + c.ok + ';',
+        chip: 'display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;border:1px solid ' + hexA(c.pin, 0.35) + ';color:' + c.pin + ';font-size:12px;font-weight:500;flex-shrink:0;',
+        avatar: 'position:relative;width:24px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:600;color:' + c.agent + ';background:' + hexA(c.agent, 0.16) + ';box-shadow:inset 0 0 0 1.5px ' + (live ? c.agent : hexA(c.agent, 0.4)) + ';',
+        status: live ? 'position:absolute;right:-2px;bottom:-2px;width:8px;height:8px;border-radius:999px;background:' + c.agent + ';box-shadow:0 0 0 2px ' + c.panel + ';' : 'display:none;',
+        more: 'width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:' + c.muted + ';font-size:16px;',
+        pop: 'position:absolute;right:36px;top:50px;width:240px;box-sizing:border-box;padding:12px;border-radius:12px;border:1px solid ' + c.line2 + ';background:' + c.panel + ';box-shadow:' + c.shadow + ';display:flex;flex-direction:column;gap:8px;',
+        popDot: 'width:7px;height:7px;border-radius:999px;background:' + c.agent + ';',
+        counts: 'align-self:flex-start;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:' + hexA(c.agent, 0.14) + ';color:' + c.agent + ';font-size:12px;font-weight:500;',
+        track: 'position:relative;display:inline-block;width:32px;height:18px;border-radius:999px;background:' + c.agent + ';',
+        knob: 'position:absolute;right:2px;top:2px;width:14px;height:14px;border-radius:999px;background:' + c.panel + ';',
+        link: 'font-size:12px;color:' + c.agent + ';'
+      };
+    }
+    var narrows = [narrow(H, true), narrow(D, false)];
+    var rules = [
+      '1 · “See change” opens the change inside the receipt: Before above After, each an excerpt of about 1,200 characters around the first difference, “…” where cut, scrolling past 120 px.',
+      '2 · Changed words are marked: removed ones struck through and muted, added ones with a violet tint and underline — the agent wrote them.',
+      '3 · Undo this card restores the whole card to its text before the session. Its states: Undo this card · ✓ Undone · You edited it since (not offered) · Open its board to undo (a button that opens the board).',
+      '4 · One change open at a time; “Hide change” closes it. The receipt keeps its width at every size, so 600 px needs no other layout.',
+      '5 · Edited cards keep the violet title-bar line while the receipt is up.'
+    ];
+    return { i: i, s: s, full: fulls, states: states, rowUndo: rowUndo, long: long, narrow: narrows, rules: rules };
+  }
+}
+</script>
+</body>
+</html>

package/docs/design/Uses.dc.html

@@ -11,8 +11,14 @@
 <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}
+.r2{width:1440px;height:820px;padding:40px 48px;box-sizing:border-box;background:#081524;color:#e6eef7;font:13px/1.5 'IBM Plex Sans',system-ui,sans-serif}.r2 h1{font-size:28px;margin:0}.r2 h2{font-size:15px}.r2 p,.r2 small{color:#8ea3bd}.r2 .dialog{display:grid;grid-template-columns:220px 1fr;gap:24px;width:900px;margin:24px auto;background:#0f1d31;border:1px solid #1b2c44;border-radius:14px;padding:20px}.r2 button,.r2 select,.r2 input{font:inherit;color:inherit;background:#081524;border:1px solid #1b2c44;border-radius:6px;padding:7px 10px}.r2 aside button{display:block;width:100%;text-align:left;margin:8px 0}.r2 .selected{border-color:#e6eef7;background:#13243b}.r2 .primary{background:#4BBCFF;color:#081524;border-color:transparent;font-weight:600}.r2 .example{display:flex;align-items:center;gap:16px;padding:10px;background:#13243b;border:1px solid #1b2c44;border-radius:10px;margin:8px 0}.r2 .example span{border:1px solid #1b2c44;border-radius:6px;padding:8px}.r2 .example b{flex:1;text-align:center;font-weight:500}.r2 footer{border-top:1px solid #1b2c44;padding-top:12px}.r2 .editor{border:1px solid #1b2c44;border-radius:10px;padding:16px;background:#0f1d31}
+.r2{height:920px}
 </style>
 </helmet>
+<section class="r2"><h1>R2 · Choose then customize workspace relation presets</h1><p>Selected 2026-10-14 · local implementation, validation ongoing. Home → Relation presets; chooser is read-only, editor is separate.</p>
+<div class="dialog"><aside><h2>Workspace relation presets</h2><button class="selected">Research</button><button>Dependencies</button><button>Decision</button><button>Flow</button><button>+ Add preset</button><small>Saved templates shared across the workspace.</small></aside><main><h2>Research · saved relations</h2><small>Read-only example</small><div class="example"><span>Example A</span><b style="color:#5FCFC0">supports ─────→</b><span>Example B</span></div><small>supports · Directed: A → B</small><div class="example"><span>Example A</span><b style="color:#E59B6B">contradicts ─────→</b><span>Example B</span></div><small>contradicts · Directed: A → B</small><div class="example"><span>Example A</span><b style="color:#8ea3bd">related ·········</b><span>Example B</span></div><small>related · Undirected: A — B</small><p>Examples explain meaning and direction, not actual board connections.</p><footer><label>Apply saved preset to board <select><option>Product metrics</option></select></label><p><button class="primary">Use on board</button> <button>Customize preset</button> <button>Delete preset</button></p><small>Copies saved vocabulary to this board only. Existing edges and other boards stay unchanged; later edits/deletion never auto-sync.</small></footer></main></div>
+<section class="editor"><strong>Customize preset · separate editing state</strong><div style="display:flex;gap:12px;align-items:center;margin:12px 0"><label>Name <input value="Research"></label><input value="supports" aria-label="Kind"><select aria-label="Meaning ink"><option>supports</option></select><label><input type="checkbox" checked> Arrow</label><button>×</button><button>Add kind</button></div><button class="primary">Save preset</button> <button>Cancel customization</button><small style="margin-left:12px">Save changes only the template. Dirty exit: Keep editing / Discard changes. Deletion asks inline confirmation.</small></section>
+</section>
 <div style="width: 1440px; height: 1420px; box-sizing: border-box; padding: 48px 56px; 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: 28px">
 
 <div>
@@ -25,7 +31,7 @@ body{margin:0}
 <section style="display: flex; flex-direction: column; gap: 8px">
 <div style="display: flex; align-items: baseline; gap: 10px"><h2 style="margin: 0; font-size: 15px; font-weight: 600">Research · evidence</h2><span style="font-size: 12px; color: #8ea3bd">Highlight: what supports or contradicts a claim</span></div>
 <div style="{{u.canvas}}">
-<div style="{{u.legend}}"><span style="{{u.vocab}}">Research ▾</span><span style="{{u.chip}}"><span style="{{u.sw}} background: #5FCFC0"></span>supports<span style="{{u.n}}">1</span></span><span style="{{u.chip}}"><span style="{{u.sw}} background: #E59B6B"></span>contradicts<span style="{{u.n}}">1</span></span><span style="{{u.chip}}"><span style="{{u.sw}} background: #7C9CFF"></span>cites<span style="{{u.n}}">3</span></span></div>
+<div style="{{u.legend}}"><span style="{{u.vocab}}">All relations ▾</span><span style="{{u.chip}}"><span style="{{u.sw}} background: #5FCFC0"></span>supports<span style="{{u.n}}">1</span></span><span style="{{u.chip}}"><span style="{{u.sw}} background: #E59B6B"></span>contradicts<span style="{{u.n}}">1</span></span><span style="{{u.chip}}"><span style="{{u.sw}} background: #7C9CFF"></span>cites<span style="{{u.n}}">3</span></span></div>
 <svg width="644" height="470" viewBox="0 0 644 470" style="position: absolute; left: 0; top: 0; fill: none; stroke-linecap: round">
 <path d="M 170 180 C 170 140, 290 150, 290 112" style="stroke: #5FCFC0; stroke-width: 2"></path><path d="M 290 110 L 285.5 119 L 294.5 119 Z" style="fill: #5FCFC0"></path>
 <path d="M 474 180 C 474 140, 354 150, 354 112" style="stroke: #E59B6B; stroke-width: 2"></path><path d="M 354 110 L 349.5 119 L 358.5 119 Z" style="fill: #E59B6B"></path>
@@ -46,7 +52,7 @@ body{margin:0}
 <section style="display: flex; flex-direction: column; gap: 8px">
 <div style="display: flex; align-items: baseline; gap: 10px"><h2 style="margin: 0; font-size: 15px; font-weight: 600">Dependency analysis</h2><span style="font-size: 12px; color: #8ea3bd">Highlight: what is affected if a node changes</span></div>
 <div style="{{u.canvas}}">
-<div style="{{u.legend}}"><span style="{{u.vocab}}">Dependencies ▾</span><span style="{{u.chip}}"><span style="{{u.sw}} background: #E58FB0"></span>depends on<span style="{{u.n}}">5</span></span><span style="{{u.chip}} color: #f4c542; border-color: rgba(244,197,66,0.4)"><span style="{{u.sw}} background: #f4c542"></span>cycle<span style="{{u.n}}">1</span></span><span style="font-size: 11px; color: #b9c6d6; margin-left: 4px">Change auth-token.ts → 5 affected</span></div>
+<div style="{{u.legend}}"><span style="{{u.vocab}}">All relations ▾</span><span style="{{u.chip}}"><span style="{{u.sw}} background: #E58FB0"></span>depends on<span style="{{u.n}}">5</span></span><span style="{{u.chip}} color: #f4c542; border-color: rgba(244,197,66,0.4)"><span style="{{u.sw}} background: #f4c542"></span>cycle<span style="{{u.n}}">1</span></span><span style="font-size: 11px; color: #b9c6d6; margin-left: 4px">Change auth-token.ts → 5 affected</span></div>
 <svg width="644" height="470" viewBox="0 0 644 470" style="position: absolute; left: 0; top: 0; fill: none; stroke-linecap: round">
 <path d="M 105 108 C 105 150, 185 160, 185 196" style="stroke: #E58FB0; stroke-width: 2"></path><path d="M 185 198 L 180.5 189 L 189.5 189 Z" style="fill: #E58FB0"></path>
 <path d="M 322 108 C 322 150, 440 160, 440 196" style="stroke: #E58FB0; stroke-width: 2"></path><path d="M 440 198 L 435.5 189 L 444.5 189 Z" style="fill: #E58FB0"></path>
@@ -70,7 +76,7 @@ body{margin:0}
 <section style="display: flex; flex-direction: column; gap: 8px">
 <div style="display: flex; align-items: baseline; gap: 10px"><h2 style="margin: 0; font-size: 15px; font-weight: 600">Decision tree</h2><span style="font-size: 12px; color: #8ea3bd">Highlight: the chosen path; conditions always labeled</span></div>
 <div style="{{u.canvas}}">
-<div style="{{u.legend}}"><span style="{{u.vocab}}">Decision ▾</span><span style="{{u.chip}}"><span style="{{u.sw}} background: #D5DEEA"></span>option<span style="{{u.n}}">3</span></span><span style="{{u.chip}}"><span style="{{u.sw}} background: #7C9CFF"></span>if…<span style="{{u.n}}">2</span></span><span style="{{u.chip}}"><span style="{{u.sw}} background: #3d5170"></span>rejected<span style="{{u.n}}">2</span></span></div>
+<div style="{{u.legend}}"><span style="{{u.vocab}}">All relations ▾</span><span style="{{u.chip}}"><span style="{{u.sw}} background: #D5DEEA"></span>option<span style="{{u.n}}">3</span></span><span style="{{u.chip}}"><span style="{{u.sw}} background: #7C9CFF"></span>if…<span style="{{u.n}}">2</span></span><span style="{{u.chip}}"><span style="{{u.sw}} background: #3d5170"></span>rejected<span style="{{u.n}}">2</span></span></div>
 <svg width="644" height="470" viewBox="0 0 644 470" style="position: absolute; left: 0; top: 0; fill: none; stroke-linecap: round">
 <path d="M 322 108 C 322 150, 105 140, 105 186" style="stroke: #3d5170; stroke-width: 1.5; stroke-dasharray: 5 4"></path><path d="M 105 188 L 100.5 179 L 109.5 179 Z" style="fill: #3d5170"></path>
 <path d="M 322 108 L 322 186" style="stroke: #D5DEEA; stroke-width: 3"></path><path d="M 322 190 L 316.5 179 L 327.5 179 Z" style="fill: #D5DEEA"></path>
@@ -92,7 +98,7 @@ body{margin:0}
 <section style="display: flex; flex-direction: column; gap: 8px">
 <div style="display: flex; align-items: baseline; gap: 10px"><h2 style="margin: 0; font-size: 15px; font-weight: 600">Agent flow</h2><span style="font-size: 12px; color: #8ea3bd">Highlight: progress — done, current, next, loop</span></div>
 <div style="{{u.canvas}}">
-<div style="{{u.legend}}"><span style="{{u.vocab}}">Flow ▾</span><span style="{{u.chip}}"><span style="{{u.sw}} background: #D5DEEA"></span>next<span style="{{u.n}}">3</span></span><span style="{{u.chip}}"><span style="{{u.sw}} background: #E59B6B"></span>if fails<span style="{{u.n}}">1</span></span><span style="{{u.chip}}"><span style="{{u.sw}} background: #8ea3bd"></span>loop<span style="{{u.n}}">1</span></span></div>
+<div style="{{u.legend}}"><span style="{{u.vocab}}">All relations ▾</span><span style="{{u.chip}}"><span style="{{u.sw}} background: #D5DEEA"></span>next<span style="{{u.n}}">3</span></span><span style="{{u.chip}}"><span style="{{u.sw}} background: #E59B6B"></span>if fails<span style="{{u.n}}">1</span></span><span style="{{u.chip}}"><span style="{{u.sw}} background: #8ea3bd"></span>loop<span style="{{u.n}}">1</span></span></div>
 <svg width="644" height="470" viewBox="0 0 644 470" style="position: absolute; left: 0; top: 0; fill: none; stroke-linecap: round; stroke-linejoin: round">
 <path d="M 152 185 L 174 185" style="stroke: #D5DEEA; stroke-width: 2"></path><path d="M 178 185 L 169 180.5 L 169 189.5 Z" style="fill: #D5DEEA"></path>
 <path d="M 308 185 L 330 185" style="stroke: #B388FF; stroke-width: 2; stroke-dasharray: 5 4"></path><path d="M 334 185 L 325 180.5 L 325 189.5 Z" style="fill: #B388FF"></path>
@@ -119,7 +125,7 @@ body{margin:0}
 
 </div>
 </x-dc>
-<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1420}}'>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":2340}}'>
 class Component extends DCLogic {
   renderVals() {
     var u = {
@@ -138,7 +144,7 @@ class Component extends DCLogic {
       step: 'position:absolute;top:130px;width:128px;height:110px;box-sizing:border-box;overflow:hidden;padding:12px;border-radius:10px;border:1px solid #1b2c44;background:#0f1d31;box-shadow:0 1px 2px rgba(0,0,0,0.4),0 6px 20px rgba(0,0,0,0.24);font-size:12px;font-weight:600;display:flex;flex-direction:column;gap:6px;'
     };
     var grammar = [
-      { t: 'Vocabulary per board', d: 'Research, Dependencies, Decision, Flow or your own types. Picked in the legend.' },
+      { t: 'Vocabulary per board', d: 'Explicitly copy a saved Home preset or define your own kinds. The legend only filters existing relations.' },
       { t: 'Own ports, lanes', d: 'Links never stack; parallel ones run side by side with a count.' },
       { t: 'Hover = neighborhood', d: 'Everything not connected steps back; the link explains itself.' },
       { t: 'Reason on every link', d: 'One sentence agents write and humans read: the “why”.' },