memoir-cli 3.14.0 → 3.16.0

package/src/work/ui/app.js

@@ -6,11 +6,141 @@ let token = fragment.get('token');
 try { if (token) sessionStorage.setItem('memoir-view-token', token); else token = sessionStorage.getItem('memoir-view-token'); } catch {}
 if (fragment.has('token')) history.replaceState(null, '', '/');
 let state, selected = 'overview', editing, latestEdit, editorOpener, busy = false, stateRequest = 0, renderAfterEditor = false;
-const labels = { overview: 'Overview', answer: 'Answers', decision: 'Decisions', check: 'Checks', next: 'Next steps', goal: 'Goals', removed: 'Removed' };
-const descriptions = { overview: 'The context your next session will use.', answer: 'Questions already answered, ready for the next session.', decision: 'What was decided, and why.', check: 'What actually ran, and what needs checking again.', next: 'Completed work and the steps still ahead.', goal: 'What this project is working toward.', removed: 'Hidden from the handoff. Earlier versions stay on this computer.' };
+let viewMode = 'records', focusKey = 'project', showSuggestions = false;
+const labels = { overview: 'Overview', next: 'Next actions', answer: 'Answers', decision: 'Decisions', check: 'Checks', goal: 'Goals', removed: 'Removed' };
+const descriptions = { overview: 'What matters for your next session.', answer: 'Already answered. Ready to carry forward.', decision: 'What you decided, with the reasons behind it.', check: 'Completed checks and the changes that need another look.', next: 'Open work first. Completed actions stay in the record.', goal: 'What this project is working toward.', removed: 'Hidden from the handoff. You can restore records here.' };
 function el(tag, text, className) { const node = document.createElement(tag); if (text !== undefined) node.textContent = text; if (className) node.className = className; return node; }
 function button(text, action, className = '') { const node = el('button', text, className); node.type = 'button'; node.addEventListener('click', action); return node; }
 function date(value) { return new Date(value).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' }); }
+function searchableText(item) { return [item.text,item.answer,item.title,item.why,item.source,item.id,...Object.keys(item.inputs||{})].filter(Boolean).join(' ').toLowerCase(); }
+function entryLabel(item) {
+  const text = item.kind === 'next' || /^record\.[0-9a-f-]{36}$/i.test(item.id) ? item.text.split(/(?<=[.!?])\s/)[0] : item.id.replace(/^(?:record|decision|answer|check|next|goal)\./, '').replace(/[._-]+/g, ' ').replace(/^./, c => c.toUpperCase()).replace(/\bcli\b/ig, 'CLI');
+  return text.length > 62 ? text.slice(0,59).trimEnd() + '…' : text;
+}
+// A bounded, local projection of existing records. Shared words are suggestions,
+// never saved relationships, causal claims, or proof that a decision is correct.
+function buildProjectMap(data, { query = '', focus = 'project', kind = 'all' } = {}) {
+  const body = item => [item.text, item.answer, item.title, item.why, item.source].filter(Boolean).join(' ');
+  const label = entryLabel;
+  const all = [...data.records.map(item => ({key:'record:'+item.id,kind:item.kind,item,label:label(item)})), ...data.checks.map(item => ({key:'check:'+item.id,kind:'check',item,label:label(item)}))].sort((a,b) => b.item.revision-a.item.revision);
+  const search = query.toLowerCase().trim();
+  const matches = node => (kind==='all'||node.kind===kind) && (!search || searchableText(node.item).includes(search));
+  const ordered = [...all].sort((a,b) => (b.key===focus)-(a.key===focus) || Number(matches(b))-Number(matches(a)));
+  const nodes = ordered.slice(0,120), edges = [];
+  for (const node of nodes) edges.push({source:'project',target:node.key,type:'recorded',label:'Stored in this project on the current branch.'});
+  const stop = new Set('about after again also already another before being branch checks completed context current decisions during existing files first found from have into local memoir memory needs next only passed personal project record records release review saved session should source state test tests that their these they this through using verified version were what when which will with work workflow would'.split(' '));
+  const terms = new Map(nodes.map(node => [node.key,new Set((body(node.item).normalize('NFKC').toLowerCase().match(/[\p{L}\p{N}]+/gu)||[]).filter(word => word.length>=4 && /\p{L}/u.test(word) && !stop.has(word)).slice(0,180))]));
+  const frequency = new Map(); for (const set of terms.values()) for (const term of set) frequency.set(term,(frequency.get(term)||0)+1);
+  const references=new Map(nodes.map(node=>[node.key,new Set((body(node.item).match(/[A-Za-z0-9][A-Za-z0-9._/-]*/g)||[]).map(token=>token.replace(/\.+$/,'')))]));
+  for (let i=0;i<nodes.length;i++) for (let j=i+1;j<nodes.length;j++) {
+    const a=nodes[i], b=nodes[j];
+    const reference = references.get(a.key).has(b.item.id) ? [a,b] : references.get(b.key).has(a.item.id) ? [b,a] : null;
+    if (reference) { edges.push({source:a.key,target:b.key,type:'recorded',label:reference[0].label+' explicitly mentions '+reference[1].item.id+'.'}); continue; }
+    const receipt = a.kind==='check'?a:b.kind==='check'?b:null, note=receipt===a?b:a;
+    const paths = receipt && note.kind!=='check' ? Object.keys(receipt.item.inputs||{}).filter(file=>references.get(note.key).has(file)) : [];
+    if (paths.length) { edges.push({source:a.key,target:b.key,type:'recorded',label:'This entry names '+paths.slice(0,3).join(', ')+'. The check declares '+(paths.length===1?'that file':'those files')+' as input; this does not verify the entry’s claims.'}); continue; }
+    const shared=[...terms.get(a.key)].filter(word=>terms.get(b.key).has(word) && frequency.get(word)<=Math.max(3,nodes.length*.6));
+    if (shared.length>=3) {
+      shared.sort((x,y)=>frequency.get(x)-frequency.get(y)||x.localeCompare(y));
+      edges.push({source:a.key,target:b.key,type:'suggested',score:shared.reduce((sum,word)=>sum+1/frequency.get(word),0),label:'Suggested from shared words: '+shared.slice(0,5).join(', ')+'. This is not a saved relationship.'});
+    }
+  }
+  return {nodes,edges,total:all.length,matches:nodes.filter(matches),matchingTotal:all.filter(matches).length};
+}
+function mapNeighborhood(model, focus, suggestions = false, overview = false) {
+  const linked = focus ? model.edges.filter(edge => edge.source !== 'project' && edge.target !== 'project' &&
+    (edge.source === focus.key || edge.target === focus.key) && (suggestions || edge.type === 'recorded'))
+    .sort((a,b) => (a.type === 'suggested') - (b.type === 'suggested') || (b.score || 0) - (a.score || 0)) : [];
+  let ranked = focus ? linked.map(edge => model.nodes.find(node => node.key === (edge.source === focus.key ? edge.target : edge.source))) : [...model.matches];
+  if (!focus && overview) {
+    const picked = [];
+    for (const kind of ['goal','next','answer','decision','check']) {
+      const entry = ranked.find(node => node.kind === kind && (kind !== 'next' || node.item.status !== 'done'));
+      if (entry) picked.push(entry);
+    }
+    ranked = [...picked,...ranked.filter(node => !picked.includes(node))];
+  }
+  const shown = ranked.slice(0,6), visibleKeys = new Set(shown.map(node => node.key));
+  const edges = focus ? linked.filter(edge => visibleKeys.has(edge.source) || visibleKeys.has(edge.target)) :
+    model.edges.filter(edge => edge.source === 'project' && visibleKeys.has(edge.target));
+  return {ranked,shown,edges,linked};
+}
+function selectMapNode(key) {
+  focusKey=key; renderMap(true);
+}
+function renderMap(restoreFocus = false) {
+  if (!state) return;
+  const mapKind = selected === 'overview' || selected === 'removed' ? 'all' : selected;
+  const model=buildProjectMap(state,{query:$('search').value,focus:focusKey,kind:mapKind});
+  if (focusKey!=='project'&&!model.nodes.some(node=>node.key===focusKey)) focusKey='project';
+  const focus=model.nodes.find(node=>node.key===focusKey);
+  $('map-workspace').dataset.focused=String(!!focus);
+  const {ranked,shown,edges,linked}=mapNeighborhood(model,focus,showSuggestions,!$('search').value.trim()&&mapKind==='all');
+  $('map-count').textContent=focus ? shown.length+' of '+ranked.length+' connections · '+focus.label :
+    shown.length+' of '+model.matchingTotal+' entries'+(model.total>120?' · search to find older entries':'');
+  $('map-suggestions').setAttribute('aria-pressed',String(showSuggestions));
+  $('map-suggested-legend').hidden=!showSuggestions;
+  const canvas=$('map-canvas');canvas.replaceChildren();
+  const positions=[[22,18],[78,18],[19,47],[81,47],[22,77],[78,77]];
+  const center=focus||{key:'project',kind:'project',label:state.project_name};
+  const points=new Map([[center.key,[50,47]],...shown.map((node,index)=>[node.key,positions[index]])]);
+  const svg=document.createElementNS('http://www.w3.org/2000/svg','svg');svg.setAttribute('viewBox','0 0 1000 640');svg.setAttribute('preserveAspectRatio','none');svg.setAttribute('aria-hidden','true');svg.setAttribute('class','map-lines');
+  for(const edge of edges) {
+    const a=points.get(edge.source),b=points.get(edge.target),line=document.createElementNS('http://www.w3.org/2000/svg','path');
+    line.setAttribute('d',`M ${a[0]*10} ${a[1]*6.4} L ${b[0]*10} ${b[1]*6.4}`);
+    line.setAttribute('class','map-line '+edge.type+((edge.source===focusKey||edge.target===focusKey)&&focusKey!=='project'?' focused':''));svg.append(line);
+  }
+  canvas.append(svg);
+  let focusedButton;
+  for(const node of [center,...shown]) {
+    const active=node.key===focusKey;
+    const entry=button('',()=>selectMapNode(node.key),'map-node'+(active?' selected':''));
+    entry.dataset.center=String(node.key===center.key);
+    entry.dataset.kind=node.kind;entry.dataset.nodeKey=node.key;entry.style.left=points.get(node.key)[0]+'%';entry.style.top=points.get(node.key)[1]+'%';entry.setAttribute('aria-pressed',String(active));entry.setAttribute('aria-label',(node.kind==='project'?'Project':labels[node.kind])+': '+(node.item?.text||node.item?.title||node.label));
+    const dot=el('span',undefined,'node-dot');dot.setAttribute('aria-hidden','true');
+    entry.append(dot,el('span',node.label,'node-label'),el('span',node.kind==='project'?model.total+' entries':node.kind==='check'?(node.item.freshness==='inputs-match'?'Inputs match':'Needs review'):node.kind==='next'?(node.item.status==='done'?'Completed':'Next action'):labels[node.kind],'node-kind'));
+    canvas.append(entry);if(active)focusedButton=entry;
+  }
+  if(!shown.length)canvas.append(el('p',focus?(showSuggestions?'No connected entries found.':'No recorded connections yet. Try Suggested links.'):$('search').value?'No matching entries. Try another term.':'No entries in this category yet.','map-empty'));
+  const panel=$('map-inspector');panel.replaceChildren();
+  if(focus)panel.append(button('← Back to project',()=>{focusKey='project';renderMap(true);},'inspector-back'));
+  const panelTitle=el('h2',focus?focus.label:state.project_name);panelTitle.tabIndex=-1;
+  panel.append(el('p',focus?'IN FOCUS':'PROJECT BRIEF','inspector-eyebrow'),panelTitle);
+  if(focus) {
+    const card=focus.kind==='check'?checkCard(focus.item):recordCard(focus.item);card.className+=' expanded';panel.append(card);
+    panel.append(button('Open in Records ↗', () => { selected = focus.kind; $('search').value = ''; setView('records'); $('section-title').focus(); }, 'inspector-back'));
+    const connections=el('div',undefined,'inspector-connections');connections.append(el('h3','Connected context'));
+    const relevant=linked.slice(0,6);
+    if(!relevant.length)connections.append(el('p',showSuggestions?'No recorded references or shared topics found.':'No recorded references found. Suggested links can reveal possible shared topics.','connection-note'));
+    for(const edge of relevant) {
+      const other=model.nodes.find(node=>node.key===(edge.source===focusKey?edge.target:edge.source));
+      const row=button('',()=>selectMapNode(other.key),'connection-row');
+      row.append(el('span',edge.type==='recorded'?'RECORDED LINK':'SUGGESTED LINK','connection-type '+edge.type),el('strong',other.label),el('span',edge.label,'connection-reason'));connections.append(row);
+    }
+    if(linked.length>6)connections.append(el('p','Showing 6 of '+linked.length+' connections. Search for another entry to explore more.','connection-note'));
+    panel.append(connections);
+  } else {
+    const goal=state.records.filter(item=>item.kind==='goal').sort((a,b)=>b.revision-a.revision)[0];
+    panel.append(el('p',goal?.text||'Start with an answer, a decision or a next action. Connections appear as your project record grows.','project-brief'));
+    panel.append(el('p','Select an entry to read the full context and see why it is connected.','inspector-hint'));
+    panel.append(button('+ Add project context',()=>edit(), 'map-add'));
+    const index=el('div',undefined,'inspector-index');index.append(el('h3',$('search').value?'Search results':mapKind==='all'?'Project entries':labels[mapKind]));
+    for(const node of ranked.slice(0,24)) {const row=button('',()=>selectMapNode(node.key),'index-entry');row.dataset.kind=node.kind;row.setAttribute('aria-label',labels[node.kind]+': '+node.label);row.append(el('i'),el('span',node.label),el('span','↗'));index.append(row);}
+    if(ranked.length>24)index.append(el('p','Search to narrow '+ranked.length+' matching entries.','connection-note'));
+    panel.append(index);
+  }
+  panel.scrollTop=0;
+  // In narrow windows the detail panel follows the map in normal flow. Move
+  // focus to its heading so the selected context is visible without an overlay.
+  if(restoreFocus)(focus?panelTitle:focusedButton)?.focus();
+}
+function setView(mode) {
+  viewMode=mode;
+  if (mode === 'map' && selected === 'removed') { selected = 'overview'; focusKey = 'project'; }
+  $('map-workspace').hidden=mode!=='map';$('records-workspace').hidden=mode!=='records';
+  $('show-map').setAttribute('aria-pressed',String(mode==='map'));$('show-records').setAttribute('aria-pressed',String(mode==='records'));
+  render();
+}
 function notice(message, error = false, undo) {
   $('notice').replaceChildren(); const node = el('div', undefined, 'notice' + (error ? ' error' : '')); node.append(el('span', message));
   if (undo) node.append(button('Undo', undo)); $('notice').append(node);
@@ -43,11 +173,27 @@ function nav() {
   $('navigation').replaceChildren();
   for (const [key, label] of Object.entries(labels)) {
     const count = key === 'overview' ? null : key === 'removed' ? state.removed.length : key === 'check' ? state.checks.length : state.records.filter(r => r.kind === key).length;
-    const node = button(label, () => { selected = key; $('search').value = ''; render(); $('section-title').focus(); });
+    const node = button('', () => { selected = key; focusKey = 'project'; if (key === 'removed') setView('records'); else render(); [...$('navigation').children].find(entry => entry.dataset.kind === key)?.focus({preventScroll:true}); });
+    node.dataset.kind = key;
+    const icon = el('span', undefined, 'nav-icon icon-' + key); icon.setAttribute('aria-hidden', 'true'); node.append(icon, el('span', label, 'nav-name'));
     if (selected === key) node.setAttribute('aria-current', 'page');
     if (count !== null) node.append(el('span', count, 'count')); $('navigation').append(node);
   }
 }
+function summary() {
+  const stale = state.checks.filter(r => r.freshness !== 'inputs-match').length;
+  const entries = [
+    ['next', state.records.filter(r => r.kind === 'next' && r.status !== 'done').length, 'Open actions'],
+    ['answer', state.records.filter(r => r.kind === 'answer').length, 'Answers saved'],
+    ['check', stale || state.checks.length, stale ? 'Checks to review' : 'Checks match files'],
+  ];
+  $('summary').replaceChildren();
+  for (const [kind, count, label] of entries) {
+    const node = button('', () => { selected = kind; focusKey = 'project'; $('search').value = ''; render(); $('section-title').focus(); }, 'summary-item' + (kind === 'check' && stale ? ' needs-attention' : ''));
+    const arrow = el('span', '↗', 'summary-arrow'); arrow.setAttribute('aria-hidden', 'true');
+    node.append(el('strong', count), el('span', label), arrow); $('summary').append(node);
+  }
+}
 function metadata(item, check = false) {
   const details = el('details', undefined, 'metadata'); details.append(el('summary', check ? 'Evidence and covered files' : 'Source and earlier versions'));
   details.append(el('p', `Saved ${date(item.recorded_at)} · revision ${item.revision}`));
@@ -56,7 +202,7 @@ function metadata(item, check = false) {
     const list = el('ul'); Object.keys(item.inputs).forEach(file => list.append(el('li', file))); details.append(list);
     details.append(el('p', 'Output was discarded. Its fingerprint:')); details.append(el('code', item.output_sha256));
   } else {
-    details.append(el('p', item.source)); if (item.why) details.append(el('p', 'Why: ' + item.why));
+    details.append(el('p', item.source)); if (item.why && item.kind !== 'next') details.append(el('p', 'Why: ' + item.why));
     const history = state.history.filter(r => r.id === item.id && r.revision < item.revision).reverse();
     for (const old of history) { const row = el('p', `Revision ${old.revision} · ${date(old.recorded_at)}\n${old.text}${old.answer ? '\n' + old.answer : ''}\nSource: ${old.source}`); details.append(row); }
     if (!history.length) details.append(el('p', 'No earlier versions.'));
@@ -67,14 +213,28 @@ function recordCard(item, removed = false) {
   const card = el('article', undefined, 'card' + (item.kind === 'next' && item.status === 'done' ? ' done' : ''));
   card.dataset.recordId = item.id;
   const kind = item.kind === 'next' ? (item.status === 'done' ? 'DONE' : 'TO DO') : item.kind === 'answer' ? 'ANSWERED' : item.kind.toUpperCase();
-  card.append(el('span', removed ? 'REMOVED' : kind, 'badge' + (removed ? ' neutral' : '')));
-  card.append(el('h3', item.text)); if (item.answer) card.append(el('p', item.answer, 'answer'));
-  if (item.why && !removed) card.append(el('p', item.why, 'hidden-note'));
+  const heading = el('div', undefined, 'card-heading'); heading.append(el('span', removed ? 'REMOVED' : kind, 'badge' + (removed ? ' neutral' : '')), el('span', new Date(item.recorded_at).toLocaleDateString([], { month:'short', day:'numeric' }), 'record-date')); card.append(heading);
+  const copy = el('div', undefined, 'record-copy');
+  copy.append(el('h3', item.kind === 'answer' ? item.text : entryLabel(item)));
+  if (item.kind !== 'answer') copy.append(el('p', item.text, 'record-text'));
+  if (item.kind === 'next' && item.why) copy.append(el('p', item.why, 'record-text'));
+  if (item.answer) copy.append(el('p', item.answer, 'answer')); card.append(copy);
+  const compact = selected === 'overview' && !$('search').value.trim() && viewMode === 'records';
+  if (compact || item.text.length > 200 || item.answer?.length > 220 || item.kind === 'next' && item.why?.length > 220) {
+    card.className += ' has-preview';
+    let expanded = focusKey === 'record:' + item.id;
+    if (expanded) card.className += ' expanded';
+    const collapsedLabel = compact ? 'Details' : 'Read full entry';
+    const more = button(collapsedLabel, () => { expanded = !expanded; card.className = card.className.replace(' expanded', '') + (expanded ? ' expanded' : ''); more.textContent = expanded ? 'Show less' : collapsedLabel; more.setAttribute('aria-expanded', String(expanded)); }, 'read-more');
+    more.textContent = expanded ? 'Show less' : collapsedLabel;
+    more.setAttribute('aria-expanded', String(expanded)); card.append(more);
+  }
   const actions = el('div', undefined, 'card-actions');
   if (removed) actions.append(button('Restore to handoff', () => restore(item)));
   else {
     actions.append(button('Correct', () => edit(item)));
     if (item.kind === 'next') actions.append(button(item.status === 'done' ? 'Reopen' : 'Mark done', () => changeStatus(item)));
+    if (viewMode === 'records') actions.append(button('Connections', () => { focusKey = 'record:' + item.id; setView('map'); renderMap(true); }));
     actions.append(button('Remove from handoff', () => remove(item), 'remove'));
   }
   card.append(actions, metadata(item)); return card;
@@ -90,31 +250,57 @@ function checkCard(item, removed = false) {
   card.append(metadata(item, true)); if (!removed) { const actions = el('div', undefined, 'card-actions'); actions.append(button('Remove from handoff', () => remove(item, 'check'), 'remove')); card.append(actions); }
   return card;
 }
-function matches(item) { const query = $('search').value.toLowerCase().trim(); return !query || [item.text, item.answer, item.why, item.title, item.id].filter(Boolean).join(' ').toLowerCase().includes(query); }
+function matches(item) { const query = $('search').value.toLowerCase().trim(); return !query || searchableText(item).includes(query); }
 function group(kind, items, limit = Infinity) {
   const section = el('section', undefined, 'group'); const heading = el('div', undefined, 'group-title'); heading.append(el('h3', labels[kind]));
-  if (selected === 'overview') heading.append(button('View all →', () => { selected = kind; render(); $('section-title').focus(); })); section.append(heading);
-  const cards = el('div', undefined, 'cards'); items.filter(matches).slice(0, limit).forEach(item => cards.append(kind === 'check' ? checkCard(item) : recordCard(item))); section.append(cards); return section;
+  if (selected === 'overview') heading.append(button('View all →', () => { selected = kind; render(); $('section-title').focus(); }));
+  if (selected === 'overview') section.append(heading);
+  const cards = el('div', undefined, 'cards'); items.filter(matches).slice(0, limit).forEach(item => cards.append(kind === 'check' ? checkCard(item) : recordCard(item))); section.append(cards);
+  if (selected === 'overview' && !$('search').value.trim() && ['answer','decision'].includes(kind)) {
+    const archive = el('details', undefined, 'archive-group');
+    archive.append(el('summary', (kind === 'answer' ? 'Saved answers' : 'Recent decisions') + ' · ' + items.length), section);
+    return archive;
+  }
+  return section;
 }
 function render() {
   if (!state) return;
   renderAfterEditor = false; $('add').disabled = busy;
-  nav(); $('project').textContent = `${state.project_name} / ${state.branch || 'No Git branch'}`;
+  nav(); summary(); $('project').replaceChildren(el('span', state.project_name, 'project-name'), el('span', state.branch || 'No Git branch', 'branch-name'));
   $('revision').textContent = `Handoff revision ${state.revision}. Refreshed ${new Date().toLocaleTimeString()}.`;
   $('section-title').textContent = labels[selected]; $('section-description').textContent = descriptions[selected];
   $('goal').replaceChildren();
-  if (selected === 'overview') { const goal = state.records.filter(r => r.kind === 'goal').sort((a,b) => b.revision - a.revision)[0]; if (goal) { const node = el('div', undefined, 'goal'); node.append(el('p', 'CURRENT GOAL', 'eyebrow'), el('p', goal.text), button('Edit goal', () => edit(goal), 'quiet')); $('goal').append(node); } }
+  $('view-caption').textContent = viewMode === 'map' ? 'Connections' : 'Saved context';
+  $('summary').hidden = selected !== 'overview' || viewMode === 'map';
+  if (selected === 'overview' && viewMode === 'records') {
+    const goal = state.records.filter(r => r.kind === 'goal').sort((a,b) => b.revision - a.revision)[0];
+    if (goal) {
+      const node = el('details', undefined, 'goal');
+      node.append(el('summary', 'Current focus'), el('p', goal.text), button('Edit goal', () => edit(goal), 'quiet')); $('goal').append(node);
+    }
+  }
   const content = $('content'); content.replaceChildren();
+  content.dataset.compact = String(selected === 'overview' && !$('search').value.trim());
   if (selected === 'removed') {
     const cards = el('div', undefined, 'cards'); state.removed.filter(r => matches(r.item)).forEach(r => cards.append(r.category === 'check' ? checkCard(r.item, true) : recordCard(r.item, true))); content.append(cards);
   } else if (selected === 'overview') {
-    for (const kind of ['next','answer','check','decision']) {
+    for (const kind of ['next','answer','check','decision','goal']) {
       let items = [...(kind === 'check' ? state.checks : state.records.filter(r => r.kind === kind))].sort((a,b) => b.revision - a.revision);
-      if (kind === 'next') items = [...items].sort((a,b) => (a.status === 'done') - (b.status === 'done') || b.revision - a.revision);
-      if (items.some(matches)) content.append(group(kind, items, 2));
+      if (kind === 'goal' && !$('search').value.trim()) continue;
+      if (kind === 'next' && !$('search').value.trim()) items = items.filter(item => item.status !== 'done');
+      if (kind === 'check' && !$('search').value.trim()) items = items.filter(item => item.freshness !== 'inputs-match');
+      if (kind === 'check') items.sort((a,b) => (a.freshness === 'inputs-match') - (b.freshness === 'inputs-match') || b.revision - a.revision);
+      if (items.some(matches)) content.append(group(kind, items, $('search').value.trim() || kind === 'next' || kind === 'check' ? Infinity : 2));
     }
-  } else content.append(group(selected, selected === 'check' ? state.checks : state.records.filter(r => r.kind === selected)));
+  } else {
+    const items = [...(selected === 'check' ? state.checks : state.records.filter(r => r.kind === selected))].sort((a,b) => b.revision - a.revision);
+    if (selected === 'next') items.sort((a,b) => (a.status === 'done') - (b.status === 'done') || b.revision - a.revision);
+    if (selected === 'check') items.sort((a,b) => (a.freshness === 'inputs-match') - (b.freshness === 'inputs-match') || b.revision - a.revision);
+    if (focusKey !== 'project') items.sort((a,b) => Number(focusKey.endsWith(':' + b.id)) - Number(focusKey.endsWith(':' + a.id)));
+    content.append(group(selected, items));
+  }
   if (!content.querySelector('.card')) { const empty = el('div', undefined, 'empty'); empty.append(el('strong', $('search').value ? 'No matching memories' : selected === 'removed' ? 'Nothing removed' : 'A fresh start'), el('span', $('search').value ? 'Try a shorter search.' : selected === 'removed' ? 'Items you remove will appear here.' : 'Add an answer, a decision or the next step.')); content.replaceChildren(empty); }
+  renderMap();
 }
 function kindFields() {
   $('answer-label').hidden = $('kind').value !== 'answer'; $('answer').required = $('kind').value === 'answer';
@@ -126,7 +312,7 @@ function edit(item) {
   editorOpener = document.activeElement; latestEdit = null;
   // Reuse a new record's ID after an uncertain response. A retry must conflict
   // with a committed save instead of creating a second copy of the same draft.
-  editing = { item, id: item?.id || 'record.' + crypto.randomUUID(), branch: state.branch };
+  editing = { item, id: item?.id || 'record.' + crypto.randomUUID(), branch: state.branch, expected_recovery: state.recovery_id };
   $('review-latest').hidden = true; $('comparison').hidden = true;
   $('editor-title').textContent = item ? 'Correct memory' : 'Add memory'; $('save').textContent = item ? 'Save correction' : 'Save memory';
   $('kind').value = item?.kind || 'answer'; $('kind').disabled = !!item;
@@ -140,17 +326,17 @@ async function action(input) {
   finally { busy = false; $('add').disabled = !state; $('refresh').disabled = false; }
 }
 async function remove(item, category = 'record') {
-  const branch = state.branch;
-  try { await action({ action:'remove', branch, id:item.id, category, expected_revision:item.revision }); notice('Removed from the handoff. Earlier versions are kept locally.', false, category === 'record' ? () => restore(item, branch) : undefined); }
+  const branch = state.branch, recovery = state.recovery_id;
+  try { await action({ action:'remove', branch, expected_recovery: recovery, id:item.id, category, expected_revision:item.revision }); notice('Removed from the handoff. Earlier versions are kept locally.', false, category === 'record' ? () => restore(item, branch, recovery) : undefined); }
   catch (error) { notice(error.message, true); }
 }
-async function restore(item, branch = state.branch) {
-  try { await action({ action:'restore', branch, id:item.id, expected_revision:item.revision }); notice('Restored to the handoff.'); }
+async function restore(item, branch = state.branch, recovery = state.recovery_id) {
+  try { await action({ action:'restore', branch, expected_recovery: recovery, id:item.id, expected_revision:item.revision }); notice('Restored to the handoff.'); }
   catch (error) { notice(error.message, true); }
 }
 function fields(item) { return { kind:item.kind, text:item.text, ...(item.answer ? {answer:item.answer} : {}), ...(item.why ? {why:item.why} : {}), status:item.status }; }
 async function changeStatus(item) {
-  try { await action({ action:'save', branch:state.branch, id:item.id, expected_revision:item.revision, fields:{...fields(item),status:item.status === 'done' ? 'open' : 'done'} }); notice(item.status === 'done' ? 'Step reopened.' : 'Step marked done.'); }
+  try { await action({ action:'save', branch:state.branch, expected_recovery: state.recovery_id, id:item.id, expected_revision:item.revision, fields:{...fields(item),status:item.status === 'done' ? 'open' : 'done'} }); notice(item.status === 'done' ? 'Step reopened.' : 'Step marked done.'); }
   catch (error) { notice(error.message, true); }
 }
 function editorSaving(saving) {
@@ -163,7 +349,10 @@ $('edit-form').addEventListener('submit', async event => {
   submitted.saving = true; editorSaving(true); $('form-error').textContent = '';
   try {
     const kind = $('kind').value;
-    await action({ action:'save', branch:submitted.branch, id:submitted.id, expected_revision:submitted.item?.revision || 0, fields:{kind,text:$('text').value, ...(kind === 'answer' ? {answer:$('answer').value} : {}), ...($('why').value ? {why:$('why').value} : {}),status:kind === 'next' ? $('status').value : 'open'} });
+    await action({ action:'save', branch:submitted.branch, expected_recovery: submitted.expected_recovery, id:submitted.id, expected_revision:submitted.item?.revision || 0, fields:{kind,text:$('text').value, ...(kind === 'answer' ? {answer:$('answer').value} : {}), ...($('why').value ? {why:$('why').value} : {}),status:kind === 'next' ? $('status').value : 'open'} });
+    // A successful save must be visible even if the old search or category
+    // would exclude it. Both views continue from the same saved entry.
+    focusKey = 'record:' + submitted.id; selected = kind; $('search').value = ''; render();
     if (editing === submitted) $('editor').close();
     notice(submitted.item ? 'Correction saved. The next session will use this version.' : 'Memory saved for the next session.');
   } catch (error) { if (editing === submitted) { $('form-error').textContent = error.message; $('review-latest').hidden = !['refresh_required', 'save_unconfirmed'].includes(error.code); } }
@@ -179,7 +368,7 @@ $('review-latest').addEventListener('click', async () => {
     state = latest; renderAfterEditor = true;
     const item = latest.records.find(record => record.id === reviewed.id);
     if (!item) throw new Error(reviewed.item || latest.removed.some(record => record.item.id === reviewed.id) ? 'This item was removed. Your draft is still here. Close the editor and refresh, then use Removed to review or restore it.' : 'This new memory is not in the saved handoff yet. Your draft is kept. Try Save memory again.');
-    latestEdit = { item, id:item.id, branch: latest.branch };
+    latestEdit = { item, id:item.id, branch: latest.branch, expected_recovery: latest.recovery_id };
     $('latest-text').textContent = item.text + (item.answer ? '\n\n' + item.answer : '') + (item.why ? '\n\nWhy: ' + item.why : '') + (item.kind === 'next' ? '\nProgress: ' + item.status : '');
     $('comparison').hidden = false; $('keep-draft').focus();
   } catch (error) { if (editing === reviewed && generation === stateRequest) $('form-error').textContent = error.message; }
@@ -194,12 +383,16 @@ $('keep-draft').addEventListener('click', () => {
 $('editor').addEventListener('close', () => {
   ++stateRequest;
   if (renderAfterEditor) render();
-  const card = [...document.querySelectorAll('[data-record-id]')].find(node => node.dataset.recordId === editing?.item?.id);
-  (editorOpener?.isConnected ? editorOpener : card?.querySelector('button') || (editing?.item?.kind === 'goal' && $('goal').querySelector('button')) || $('add')).focus();
+  const activeWorkspace = $(viewMode === 'map' ? 'map-inspector' : 'content');
+  const card = [...activeWorkspace.querySelectorAll('[data-record-id]')].find(node => node.dataset.recordId === editing?.id);
+  (editorOpener?.isConnected ? editorOpener : card?.querySelector('.card-actions button') || (editing?.item?.kind === 'goal' && $('goal').querySelector('button')) || $('add')).focus();
   editing = null; latestEdit = null;
 });
 $('editor').addEventListener('cancel', event => { if (editing?.saving) event.preventDefault(); });
 $('kind').addEventListener('change', kindFields); $('cancel').addEventListener('click', () => $('editor').close()); $('cancel-top').addEventListener('click', () => $('editor').close());
-$('add').addEventListener('click', () => edit()); $('refresh').addEventListener('click', refresh); $('search').addEventListener('input', render);
+$('add').addEventListener('click', () => edit()); $('refresh').addEventListener('click', refresh); $('search').addEventListener('input', () => { focusKey = 'project'; render(); });
+$('show-map').addEventListener('click',()=>setView('map'));$('show-records').addEventListener('click',()=>setView('records'));
+$('map-suggestions').addEventListener('click',()=>{showSuggestions=!showSuggestions;renderMap();});
+$('map-reset').addEventListener('click',()=>{focusKey='project';selected='overview';$('search').value='';render();});
 document.addEventListener('visibilitychange', () => { if (!document.hidden && !$('editor').open && !busy) refresh(); });
 refresh();

package/src/work/ui/index.html

@@ -2,24 +2,39 @@
 <html lang="en">
 <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Memoir · Project memory</title><link rel="stylesheet" href="/style.css"><script src="/app.js" defer></script></head>
 <body>
-<a class="skip-link" href="#section-title">Skip to project memory</a>
-<aside class="sidebar"><a class="brand" href="/" aria-label="Memoir home"><span class="mark">m</span> memoir</a><p class="eyebrow">PROJECT MEMORY</p><nav id="navigation" aria-label="Memory categories"></nav><div class="sidebar-note"><span class="local-dot"></span> On this computer<p>Your project context.<br>Your decisions to keep.</p></div></aside>
-<main>
-  <header class="topbar"><div id="project">Opening project…</div><button id="refresh" class="quiet">Refresh</button></header>
-  <section class="intro"><p class="eyebrow">A LITTLE CONTEXT GOES A LONG WAY</p><h1>Pick up where you left off.</h1><p class="subtitle">See what’s remembered. Keep what’s useful. Correct what isn’t.</p></section>
+<a id="skip-link" class="skip-link" href="#section-title">Skip to project memory</a>
+<header class="workspace-bar">
+  <a class="workspace-brand" href="/" aria-label="Memoir project home"><span aria-hidden="true">m</span> memoir</a>
+  <span class="workspace-divider" aria-hidden="true">/</span><div id="project">Opening project…</div>
+  <span class="workspace-local"><i></i> On this computer</span><button id="refresh" class="quiet">Refresh</button>
+</header>
+<main class="workspace">
+  <header class="workspace-heading"><div><h1>Project memory</h1><p class="subtitle">Answers, decisions and checks for your next coding session.</p></div><button id="add" class="primary" disabled>+ Add context</button></header>
   <div id="notice" role="status" aria-live="polite"></div>
-  <section id="goal" aria-label="Current goal"></section>
-  <div class="section-heading"><div><h2 id="section-title" tabindex="-1">Overview</h2><p id="section-description">The context your next session will use.</p></div><button id="add" class="primary" disabled>+ Add memory</button></div>
-  <label class="search-label"><span class="sr-only">Search saved project context</span><input id="search" type="search" placeholder="Find an answer, decision or next step…" autocomplete="off"></label>
-  <div id="content" aria-live="polite"></div>
-  <footer>Project records only. Check results cover their listed files; they don’t grant permission to publish. <span id="revision"></span></footer>
+  <div class="workspace-tools">
+    <label class="search-label"><span class="search-icon" aria-hidden="true"></span><span class="sr-only">Search saved project context</span><input id="search" type="search" placeholder="Search answers, decisions, files…" autocomplete="off"></label>
+    <div class="view-switch" aria-label="Project view"><button id="show-records" type="button" aria-pressed="true">Records</button><button id="show-map" type="button" aria-pressed="false">Map</button></div>
+  </div>
+  <nav id="navigation" aria-label="Memory categories"></nav>
+  <div class="review-summary"><section id="summary" class="summary-strip" aria-label="Project at a glance"></section><section id="goal" aria-label="Current goal"></section></div>
+  <div class="section-heading"><div><h2 id="section-title" tabindex="-1">Overview</h2><p id="section-description">What matters for your next session.</p></div><span id="view-caption">Saved context</span></div>
+  <section id="records-workspace" aria-label="Project records"><div id="content" aria-live="polite"></div></section>
+  <section id="map-workspace" hidden aria-label="Project knowledge map">
+    <div class="map-controls"><p>Choose an entry to follow its connections.</p><button id="map-suggestions" type="button" aria-pressed="false">Suggested links</button></div>
+    <div class="map-layout">
+      <div class="map-surface"><div class="canvas-caption"><span id="map-count">Opening project memory</span><button id="map-reset" type="button">Back to overview</button></div><div id="map-canvas" class="map-canvas" aria-label="Connected project entries"></div><div class="map-bottom"><div class="map-legend"><span><i class="line-solid"></i> Recorded</span><span id="map-suggested-legend" hidden><i class="line-dashed"></i> Suggested word match</span></div></div></div>
+      <aside id="map-inspector" class="map-inspector" aria-live="polite" aria-label="Selected context"></aside>
+    </div>
+    <p class="map-footnote">Recorded links show project membership, named records or covered files. Suggested links are optional word matches.</p>
+  </section>
+  <footer><span id="revision"></span><details><summary>Used by your coding tools</summary><p>Memoir’s CLI, connected coding tools and this view read the same local project record. Saved corrections are available the next time a tool reads it. You can close this page and keep working.</p><p>Personal memory is separate. Check results cover their listed files; changed files may need a new check. A saved record is never permission to run a command or publish.</p></details></footer>
 </main>
 <dialog id="editor" aria-labelledby="editor-title"><form id="edit-form">
   <div class="dialog-heading"><h2 id="editor-title">Correct memory</h2><button type="button" id="cancel-top" class="quiet" aria-label="Close editor">×</button></div>
   <label>Type<select id="kind"><option value="answer">Answered question</option><option value="decision">Decision</option><option value="next">Next step</option><option value="goal">Goal</option></select></label>
   <label><span id="text-label">Question</span><textarea id="text" rows="3" maxlength="2000" required></textarea></label>
   <label id="answer-label">Answer<textarea id="answer" rows="3" maxlength="2000"></textarea></label>
-  <label>Why this matters <span class="optional">(optional)</span><textarea id="why" rows="2" maxlength="2000"></textarea></label>
+  <label><span>Why this matters <span class="optional">(optional)</span></span><textarea id="why" rows="2" maxlength="2000"></textarea></label>
   <label id="status-label">Progress<select id="status"><option value="open">To do</option><option value="done">Done</option></select></label>
   <p class="hint">Only save project context. Keep credentials and personal details out. Corrections keep earlier versions.</p>
   <p id="form-error" class="form-error" role="alert"></p>