tink-harness 1.9.4 → 1.9.6

package/.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "tink",
   "description": "A small harness layer for Claude Code and Codex.",
-  "version": "1.9.4",
+  "version": "1.9.6",
   "author": {
     "name": "dotori"
   }

package/CHANGELOG.md

@@ -6,6 +6,32 @@ All notable changes to Tink are tracked here.
 
 No unreleased changes yet.
 
+## [1.9.6] - 2026-06-10
+
+### Added
+
+- The harness map is now fully navigable: wheel zoom toward the cursor (0.4x–5x), drag to pan, +/− and reset controls, and double-click to return to the full view.
+- Nodes render as 3D-style spheres with radial gradients, depth shadows on interactive nodes, and a vignette background for depth.
+- Added a "How to read this map" card to the graph tab's right rail with plain-language explanations of circles, colors, lines, satellites, controls, and edge types.
+
+### Changed
+
+- Reordered the graph right rail: reading guide → selected node → graph overview.
+- Map help text now mentions zoom and drag controls.
+
+## [1.9.5] - 2026-06-10
+
+### Added
+
+- Run timeline entries now show a colored outcome badge, a monospace timestamp, and harness chips instead of a comma list.
+- The Activity tab gained a summary strip: total runs, run window, and completed/blocked/failed/recorded counts.
+- Memory cards now show reference counts and referencing-harness chips derived from `uses_memory` graph edges.
+
+### Fixed
+
+- The lifecycle generator now reads YAML-frontmatter `outcome:` values from run records, so completed runs are counted as successes instead of unknown.
+- Removed a generic "blocked" word match that flagged runs as blocked when the word merely appeared in prose.
+
 ## [1.9.4] - 2026-06-10
 
 ### Added

package/VERSIONING.md

@@ -1,6 +1,6 @@
 # Versioning
 
-Current version: `1.9.4`
+Current version: `1.9.6`
 
 Tink follows semver from `1.0.0` onward.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tink-harness",
-  "version": "1.9.4",
+  "version": "1.9.6",
   "description": "Self-growing harnesses for Claude Code and Codex.",
   "license": "MIT",
   "type": "module",

package/templates/tink/tools/generate-harness-lifecycle-summary.mjs

@@ -83,10 +83,13 @@ function extractRefs(text, refs) {
 function parseRun(filePath, harnessIds, ruleRefs, memoryRefs) {
   const text = fs.readFileSync(filePath, 'utf8');
   const statusMatch = text.match(/^Status:\s*([A-Za-z_-]+)/mi);
-  const status = statusMatch ? statusMatch[1].toLowerCase() : 'unknown';
+  const outcomeMatch = text.match(/^outcome:\s*"?([A-Za-z_-]+)"?/mi);
+  const status = statusMatch
+    ? statusMatch[1].toLowerCase()
+    : (outcomeMatch ? outcomeMatch[1].toLowerCase() : 'unknown');
   const harnesses = extractSelectedHarnesses(text, harnessIds);
   const failed = /check_failed|failed check|required check failed|verification failed/i.test(text);
-  const blocked = status === 'blocked' || /check_blocked|blocked/i.test(text);
+  const blocked = status === 'blocked' || /check_blocked/i.test(text);
   const completed = status === 'completed' || status === 'pass' || /npm test passed|verification passed/i.test(text);
   return {
     path: filePath,

package/templates/tink/tools/render-harness-health-report.mjs

@@ -48,7 +48,7 @@ const COPY = {
     heroText: 'Every visible Tink run, rule, memory reference, and harness relationship mapped into one local dashboard. This report only prepares suggestions and never edits reusable state.',
     generated: 'GENERATED',
     harnessMap: 'HARNESS MAP',
-    mapHelp: 'Harnesses, rules, memory, and stages are mapped from visible Tink records. Click a node to inspect it.',
+    mapHelp: 'Harnesses, rules, memory, and stages are mapped from visible Tink records. Scroll to zoom, drag to move, click a node to inspect it.',
     graphControls: 'Graph controls',
     full: 'Full',
     core: 'Core',
@@ -143,6 +143,33 @@ const COPY = {
     historyHelp: 'Approved reusable-state changes from the maintenance ledger, newest first.',
     historyEmpty: 'No ledger history yet.',
     sortNote: 'Sorted by usage',
+    runWindow: 'Run window',
+    totalRuns: 'Runs',
+    refCount: 'References',
+    zoomIn: 'Zoom in',
+    zoomOut: 'Zoom out',
+    zoomReset: 'Reset view',
+    mapGuideEyebrow: 'HOW TO READ',
+    mapGuideTitle: 'What is this map?',
+    mapGuideText: 'Each circle is something Tink knows about: a harness, a rule it loads, or a memory file it reads. The map is drawn only from visible local records.',
+    guideItems: [
+      ['Big circle', 'The more a harness is used, the bigger its circle.'],
+      ['Color', 'Blue circles are harnesses; gray ones are rules, memory, and stages.'],
+      ['Line', 'A line means "works together": a harness using a rule, reading memory, or leading to a next step.'],
+      ['Small dots', 'Tiny satellites around a harness are its usage, evidence, and score signals.']
+    ],
+    controlItems: [
+      ['Wheel / + −', 'Zoom in and out'],
+      ['Drag', 'Move around the map'],
+      ['Double-click', 'Back to full view'],
+      ['Click a circle', 'See its details below']
+    ],
+    relationTitle: 'What the lines mean',
+    relationItems: [
+      ['uses_rule', 'This harness loads that rule'],
+      ['uses_memory', 'This harness reads that memory file'],
+      ['sequence', 'This harness is usually followed by that step']
+    ],
     groups: [
       ['keep', 'Healthy harnesses', 'Ready to keep using'],
       ['weave', 'Weave candidates', 'Worth improving next'],
@@ -200,6 +227,33 @@ COPY.ko = {
   historyHelp: '유지보수 장부에 기록된 승인 변경 이력을 최신순으로 보여줍니다.',
   historyEmpty: '아직 장부 기록이 없습니다.',
   sortNote: '사용량 순 정렬',
+  runWindow: '기록 기간',
+  totalRuns: 'Run 수',
+  refCount: '참조 횟수',
+  zoomIn: '확대',
+  zoomOut: '축소',
+  zoomReset: '전체 보기',
+  mapGuideEyebrow: '지도 읽는 법',
+  mapGuideTitle: '이 지도는 무엇인가요?',
+  mapGuideText: '원 하나하나가 Tink가 알고 있는 것입니다: 하네스, 하네스가 쓰는 규칙, 읽는 메모리 파일. 로컬에 보이는 기록만으로 그려집니다.',
+  guideItems: [
+    ['큰 원', '하네스를 많이 쓸수록 원이 커집니다.'],
+    ['색상', '파란 원이 하네스이고, 회색 계열은 규칙·메모리·단계입니다.'],
+    ['선', '"함께 일한다"는 뜻입니다. 하네스가 규칙을 쓰거나, 메모리를 읽거나, 다음 단계로 이어질 때 선이 생깁니다.'],
+    ['작은 점', '하네스 주변의 작은 점들은 사용·근거·점수 신호입니다.']
+  ],
+  controlItems: [
+    ['휠 / + −', '확대·축소'],
+    ['드래그', '지도 이동'],
+    ['더블클릭', '전체 보기로 복귀'],
+    ['원 클릭', '아래에서 상세 보기']
+  ],
+  relationTitle: '선의 의미',
+  relationItems: [
+    ['uses_rule', '이 하네스가 그 규칙을 불러옵니다'],
+    ['uses_memory', '이 하네스가 그 메모리 파일을 읽습니다'],
+    ['sequence', '이 하네스 다음에 그 단계가 자주 이어집니다']
+  ],
   navLabel: '탐색',
   operator: '작업자',
   online: 'Tink 온라인',
@@ -208,7 +262,7 @@ COPY.ko = {
   heroText: '보이는 Tink run, rule, memory reference, harness 관계를 하나의 로컬 대시보드로 보여줍니다. 이 보고서는 제안만 준비하며 재사용 상태를 직접 수정하지 않습니다.',
   generated: '생성 시각',
   harnessMap: '하네스 지도',
-  mapHelp: '보이는 Tink 기록에서 하네스, rule, memory, stage 관계를 그립니다. 노드를 클릭하면 자세히 볼 수 있습니다.',
+  mapHelp: '보이는 Tink 기록에서 하네스, rule, memory, stage 관계를 그립니다. 휠로 확대, 드래그로 이동, 노드를 클릭하면 자세히 볼 수 있습니다.',
   graphControls: '그래프 조작',
   full: '전체',
   core: '핵심',
@@ -632,13 +686,34 @@ function renderGraphCanvas(summary, copy) {
           <h2 id="map-title">${escapeHtml(mapTitle)}</h2>
           <p>${escapeHtml(copy.mapHelp)}</p>
         </div>
-        <div class="map-controls" aria-label="${escapeAttr(copy.graphControls)}">
-          <button class="active" type="button" data-mode="full" aria-pressed="true">${escapeHtml(copy.full)}</button>
-          <button type="button" data-mode="core" aria-pressed="false">${escapeHtml(copy.core)}</button>
+        <div class="map-controls-row">
+          <div class="map-controls" aria-label="${escapeAttr(copy.graphControls)}">
+            <button class="active" type="button" data-mode="full" aria-pressed="true">${escapeHtml(copy.full)}</button>
+            <button type="button" data-mode="core" aria-pressed="false">${escapeHtml(copy.core)}</button>
+          </div>
+          <div class="map-controls" aria-label="zoom">
+            <button type="button" data-zoom="in" aria-label="${escapeAttr(copy.zoomIn || 'Zoom in')}" title="${escapeAttr(copy.zoomIn || 'Zoom in')}">+</button>
+            <button type="button" data-zoom="out" aria-label="${escapeAttr(copy.zoomOut || 'Zoom out')}" title="${escapeAttr(copy.zoomOut || 'Zoom out')}">−</button>
+            <button type="button" data-zoom="reset" title="${escapeAttr(copy.zoomReset || 'Reset view')}">${escapeHtml(copy.zoomReset || 'Reset')}</button>
+          </div>
         </div>
       </div>
       <svg class="graph-canvas" viewBox="0 0 1090 680" role="img" aria-label="Harness health graph">
-        <rect width="1090" height="680" fill="var(--bg-card)"/>
+        <defs>
+          <radialGradient id="graph-bg-grad" cx="50%" cy="42%" r="75%">
+            <stop offset="0%" style="stop-color: #16181D"/>
+            <stop offset="100%" style="stop-color: #0C0D10"/>
+          </radialGradient>
+          ${Object.entries(TYPE_COLORS).map(([type, color]) => `
+            <radialGradient id="node-grad-${escapeAttr(type)}" cx="32%" cy="28%" r="78%">
+              <stop offset="0%" style="stop-color: #FFFFFF; stop-opacity: 0.42"/>
+              <stop offset="38%" style="stop-color: ${escapeAttr(color)}; stop-opacity: 0.98"/>
+              <stop offset="100%" style="stop-color: ${escapeAttr(color)}; stop-opacity: 0.78"/>
+            </radialGradient>
+          `).join('')}
+        </defs>
+        <rect class="graph-bg" width="1090" height="680" fill="url(#graph-bg-grad)"/>
+        <g id="graph-viewport">
         <g class="edges">
         ${edges.map((edge, index) => `
               <line
@@ -680,8 +755,8 @@ function renderGraphCanvas(summary, copy) {
               cx="${node.x.toFixed(1)}"
               cy="${node.y.toFixed(1)}"
               r="${node.radius.toFixed(1)}"
-              fill="${escapeAttr(node.color)}"
-              fill-opacity="${node.type === 'harness' ? '0.96' : '0.82'}"
+              fill="url(#node-grad-${escapeAttr(TYPE_COLORS[node.type] ? node.type : 'unknown')})"
+              fill-opacity="${node.type === 'harness' ? '1' : '0.85'}"
               stroke="${escapeAttr('var(--text-secondary)')}"
               stroke-opacity="${node.glow ? '0.9' : '0.18'}"
               stroke-width="${node.glow ? '1.8' : '0.8'}"
@@ -697,6 +772,7 @@ function renderGraphCanvas(summary, copy) {
             <text x="${(node.x + node.radius + 7).toFixed(1)}" y="${(node.y + 4).toFixed(1)}">${escapeHtml(node.label)}</text>
           `).join('')}
         </g>
+        </g>
       </svg>
       <div class="graph-tooltip" id="graph-tooltip" role="status" aria-live="polite"></div>
       <div class="map-caption">
@@ -767,15 +843,26 @@ function dedupeTimelineEvents(events = [], harnessIds = null, limit = 8) {
 }
 
 function renderTimelineItems(items, copy) {
-  return items.map((event) => `
+  return items.map((event) => {
+    const outcome = timelineOutcomeClass(event);
+    const chips = (event.harnesses || []).slice(0, 6);
+    return `
     <li>
-      <span class="dot ${escapeHtml(timelineOutcomeClass(event))}"></span>
+      <span class="dot ${escapeHtml(outcome)}"></span>
       <div>
-        <strong>${escapeHtml(timelineOutcomeLabel(event, copy))} - ${escapeHtml(shortDate(event.date))}</strong>
-        <p>${escapeHtml(formatHarnessList(event.harnesses) || copy.noHarnessRecorded)}</p>
+        <div class="run-row">
+          <span class="run-badge ${escapeHtml(outcome)}">${escapeHtml(timelineOutcomeLabel(event, copy))}</span>
+          <time>${escapeHtml(shortDate(event.date))}</time>
+        </div>
+        <div class="run-chips">
+          ${chips.length
+            ? chips.map((id) => `<span class="co-chip">${escapeHtml(id)}</span>`).join('')
+            : `<span class="run-empty">${escapeHtml(copy.noHarnessRecorded)}</span>`}
+        </div>
       </div>
     </li>
-  `).join('') || `<li><span class="dot observe"></span><div><strong>${escapeHtml(copy.noRunEvents)}</strong><p>${escapeHtml(copy.runRecordsWillAppear)}</p></div></li>`;
+  `;
+  }).join('') || `<li><span class="dot observe"></span><div><strong>${escapeHtml(copy.noRunEvents)}</strong><p>${escapeHtml(copy.runRecordsWillAppear)}</p></div></li>`;
 }
 
 function renderTimeline(events = [], copy, harnessIds = null, options = {}) {
@@ -991,6 +1078,39 @@ function renderGraphOverview(graph = {}, copy) {
   `;
 }
 
+function renderMapGuide(copy) {
+  const guideItems = Array.isArray(copy.guideItems) ? copy.guideItems : [];
+  const controlItems = Array.isArray(copy.controlItems) ? copy.controlItems : [];
+  const relationItems = Array.isArray(copy.relationItems) ? copy.relationItems : [];
+  return `
+    <section class="insight-card map-guide">
+      <div class="panel-title">
+        <p class="eyebrow">${escapeHtml(copy.mapGuideEyebrow || 'HOW TO READ')}</p>
+        <h2>${escapeHtml(copy.mapGuideTitle || 'What is this map?')}</h2>
+        <p>${escapeHtml(copy.mapGuideText || '')}</p>
+      </div>
+      <ul class="guide-list">
+        ${guideItems.map(([term, text]) => `
+          <li><strong>${escapeHtml(term)}</strong><span>${escapeHtml(text)}</span></li>
+        `).join('')}
+      </ul>
+      <ul class="guide-list guide-controls">
+        ${controlItems.map(([key, text]) => `
+          <li><kbd>${escapeHtml(key)}</kbd><span>${escapeHtml(text)}</span></li>
+        `).join('')}
+      </ul>
+      ${relationItems.length ? `
+        <p class="detail-label">${escapeHtml(copy.relationTitle || 'What the lines mean')}</p>
+        <ul class="guide-list guide-relations">
+          ${relationItems.map(([type, text]) => `
+            <li><code>${escapeHtml(type)}</code><span>${escapeHtml(text)}</span></li>
+          `).join('')}
+        </ul>
+      ` : ''}
+    </section>
+  `;
+}
+
 function renderRoutingCard(copy) {
   const rules = Array.isArray(copy.routeRules) ? copy.routeRules : [];
   return `
@@ -1070,19 +1190,26 @@ function renderHomePage(summary, copy, harnesses, harnessIds) {
 function renderMemoryPage(summary, copy) {
   const harnesses = getVisibleHarnesses(Array.isArray(summary.harnesses) ? summary.harnesses : []);
   const refs = new Map();
+  const ensureRef = (key) => {
+    if (!refs.has(key)) refs.set(key, { users: new Set(), count: 0 });
+    return refs.get(key);
+  };
   for (const harness of harnesses) {
     for (const ref of harness.signals?.memory_refs || []) {
-      const key = normalizePath(ref);
-      if (!refs.has(key)) refs.set(key, new Set());
-      refs.get(key).add(harness.id);
+      ensureRef(normalizePath(ref)).users.add(harness.id);
     }
   }
+  for (const edge of getRenderableEdges(summary.graph?.edges || [])) {
+    if (edge.type !== 'uses_memory') continue;
+    const entry = ensureRef(normalizePath(String(edge.target).replace(/^memory:/, '')));
+    entry.users.add(shortLabel(edge.source));
+    entry.count += Number(edge.count || 1);
+  }
   for (const node of getRenderableNodes(summary.graph?.nodes || [])) {
     if (node.type !== 'memory') continue;
-    const key = normalizePath(shortLabel(node.id));
-    if (!refs.has(key)) refs.set(key, new Set());
+    ensureRef(normalizePath(String(node.id).replace(/^memory:/, '')));
   }
-  const entries = [...refs.entries()].sort(([a], [b]) => a.localeCompare(b));
+  const entries = [...refs.entries()].sort(([, a], [, b]) => b.count - a.count || b.users.size - a.users.size);
   return `
     <section class="page-head">
       <p class="eyebrow">${escapeHtml(copy.memoryEyebrow || 'MEMORY')}</p>
@@ -1091,15 +1218,21 @@ function renderMemoryPage(summary, copy) {
     </section>
     ${entries.length ? `
       <div class="memory-grid">
-        ${entries.map(([file, users]) => `
+        ${entries.map(([file, info]) => `
           <article class="insight-card memory-card">
             <h3><code>${escapeHtml(file)}</code></h3>
             <dl>
               <div>
-                <dt>${escapeHtml(copy.referencedBy || 'Referenced by')}</dt>
-                <dd>${[...users].length ? [...users].sort().map((id) => escapeHtml(id)).join(', ') : escapeHtml(copy.none || 'None')}</dd>
+                <dt>${escapeHtml(copy.refCount || 'References')}</dt>
+                <dd>${escapeHtml(formatNumber(Math.max(info.count, info.users.size)))}</dd>
               </div>
             </dl>
+            <p class="detail-label">${escapeHtml(copy.referencedBy || 'Referenced by')}</p>
+            <div class="co-used-chips">
+              ${[...info.users].length
+                ? [...info.users].sort().map((id) => `<span class="co-chip">${escapeHtml(id)}</span>`).join('')
+                : `<span class="run-empty">${escapeHtml(copy.none || 'None')}</span>`}
+            </div>
           </article>
         `).join('')}
       </div>
@@ -1109,12 +1242,35 @@ function renderMemoryPage(summary, copy) {
 
 function renderActivityPage(summary, copy, harnessIds) {
   const items = dedupeTimelineEvents(summary.timeline || [], harnessIds, 30);
+  const all = Array.isArray(summary.timeline) ? summary.timeline : [];
+  const counts = { success: 0, blocked: 0, failed: 0, recorded: 0 };
+  for (const event of all) {
+    const key = timelineOutcomeClass(event);
+    counts[key in counts ? key : 'recorded'] += 1;
+  }
+  const window = summary.run_window || {};
+  const windowText = window.from && window.to
+    ? `${shortDate(window.from)} ~ ${shortDate(window.to)}`
+    : renderCopyValue('', copy);
+  const summaryCells = [
+    [copy.totalRuns || 'Runs', formatNumber(window.run_count || all.length)],
+    [copy.runWindow || 'Run window', windowText],
+    [copy.timelineCompleted || 'Completed', formatNumber(counts.success)],
+    [copy.timelineBlocked || 'Blocked', formatNumber(counts.blocked)],
+    [copy.timelineFailed || 'Failed', formatNumber(counts.failed)],
+    [copy.timelineRecorded || 'Recorded', formatNumber(counts.recorded)]
+  ];
   return `
     <section class="page-head">
       <p class="eyebrow">${escapeHtml(copy.activityEyebrow || 'ACTIVITY')}</p>
       <h1>${escapeHtml(copy.activityTitle || 'Run activity')}</h1>
       <p>${escapeHtml(copy.activityHelp || '')}</p>
     </section>
+    <section class="activity-summary">
+      ${summaryCells.map(([label, value]) => `
+        <article><span>${escapeHtml(label)}</span><strong>${escapeHtml(value)}</strong></article>
+      `).join('')}
+    </section>
     <section class="timeline activity-feed">
       <ol>
         ${renderTimelineItems(items, copy)}
@@ -1311,6 +1467,76 @@ function renderScript(harnesses, copy) {
       document.querySelectorAll('[data-mode]').forEach((button) => {
         button.addEventListener('click', () => applyMode(button.dataset.mode));
       });
+      const graphSvg = document.querySelector('.graph-canvas');
+      const graphViewport = document.getElementById('graph-viewport');
+      if (graphSvg && graphViewport) {
+        const view = { x: 0, y: 0, k: 1 };
+        graphViewport.style.transformOrigin = '0 0';
+        const applyView = () => {
+          graphViewport.style.transform = 'translate(' + view.x + 'px, ' + view.y + 'px) scale(' + view.k + ')';
+        };
+        const svgPoint = (event) => {
+          const pt = graphSvg.createSVGPoint();
+          pt.x = event.clientX;
+          pt.y = event.clientY;
+          return pt.matrixTransform(graphSvg.getScreenCTM().inverse());
+        };
+        const zoomAt = (factor, cx, cy) => {
+          const k = Math.min(5, Math.max(0.4, view.k * factor));
+          const real = k / view.k;
+          view.x = cx - (cx - view.x) * real;
+          view.y = cy - (cy - view.y) * real;
+          view.k = k;
+          applyView();
+        };
+        const resetView = () => {
+          graphViewport.classList.add('is-resetting');
+          view.x = 0; view.y = 0; view.k = 1;
+          applyView();
+          setTimeout(() => graphViewport.classList.remove('is-resetting'), 360);
+        };
+        graphSvg.addEventListener('wheel', (event) => {
+          event.preventDefault();
+          const point = svgPoint(event);
+          zoomAt(event.deltaY < 0 ? 1.15 : 1 / 1.15, point.x, point.y);
+        }, { passive: false });
+        let panState = null;
+        graphSvg.addEventListener('pointerdown', (event) => {
+          if (event.button !== 0) return;
+          panState = { x: event.clientX, y: event.clientY, moved: false };
+          graphSvg.setPointerCapture(event.pointerId);
+        });
+        graphSvg.addEventListener('pointermove', (event) => {
+          if (!panState) return;
+          const dx = event.clientX - panState.x;
+          const dy = event.clientY - panState.y;
+          if (!panState.moved && Math.abs(dx) + Math.abs(dy) < 3) return;
+          panState.moved = true;
+          graphSvg.classList.add('is-panning');
+          const scale = 1090 / graphSvg.clientWidth;
+          view.x += dx * scale;
+          view.y += dy * scale;
+          panState.x = event.clientX;
+          panState.y = event.clientY;
+          applyView();
+        });
+        const endPan = () => {
+          panState = null;
+          graphSvg.classList.remove('is-panning');
+        };
+        graphSvg.addEventListener('pointerup', endPan);
+        graphSvg.addEventListener('pointercancel', endPan);
+        graphSvg.addEventListener('dblclick', (event) => {
+          event.preventDefault();
+          resetView();
+        });
+        document.querySelectorAll('[data-zoom]').forEach((button) => {
+          button.addEventListener('click', () => {
+            if (button.dataset.zoom === 'reset') return resetView();
+            zoomAt(button.dataset.zoom === 'in' ? 1.3 : 1 / 1.3, 545, 340);
+          });
+        });
+      }
       const VALID_TABS = ['home', 'harnesses', 'memory', 'graph', 'activity'];
       const navLinks = Array.from(document.querySelectorAll('.nav a[data-tab]'));
       const pages = Array.from(document.querySelectorAll('.page'));
@@ -1967,6 +2193,83 @@ function renderStyles() {
       transition: opacity 160ms ease, transform 160ms ease;
     }
 
+    .map-controls-row {
+      display: flex;
+      gap: var(--space-2);
+      align-items: center;
+      flex-wrap: wrap;
+    }
+
+    .graph-canvas {
+      cursor: grab;
+      touch-action: none;
+    }
+
+    .graph-canvas.is-panning { cursor: grabbing; }
+
+    #graph-viewport {
+      will-change: transform;
+    }
+
+    #graph-viewport.is-resetting {
+      transition: transform 340ms cubic-bezier(0.2, 0.8, 0.2, 1);
+    }
+
+    .graph-node.is-interactive {
+      filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.55));
+    }
+
+    .graph-node.is-interactive:hover,
+    .graph-node.is-interactive:focus-visible {
+      filter: drop-shadow(0 9px 14px rgba(0, 0, 0, 0.65));
+    }
+
+    .map-guide .panel-title p:last-child {
+      font-size: 12px;
+      line-height: 1.5;
+    }
+
+    .guide-list {
+      margin: var(--space-3) 0 0;
+      padding: 0;
+      list-style: none;
+      display: grid;
+      gap: var(--space-2);
+    }
+
+    .guide-list li {
+      display: grid;
+      grid-template-columns: 76px 1fr;
+      gap: var(--space-2);
+      align-items: start;
+      font-size: 12px;
+      line-height: 1.45;
+      color: var(--text-secondary);
+    }
+
+    .guide-list strong {
+      color: var(--text-primary);
+      font-size: 12px;
+      font-weight: 500;
+    }
+
+    .guide-list kbd {
+      font-family: var(--font-mono);
+      font-size: 10px;
+      color: var(--accent-text);
+      border: 1px solid var(--border-default);
+      border-radius: var(--radius-sm);
+      background: var(--bg-hover);
+      padding: 2px 5px;
+      text-align: center;
+      white-space: nowrap;
+    }
+
+    .guide-controls { border-top: 1px solid var(--border-default); padding-top: var(--space-3); }
+
+    .guide-relations li { grid-template-columns: 96px 1fr; }
+    .guide-relations code { font-size: 10px; }
+
     .map-legend {
       display: flex;
       gap: var(--space-3);
@@ -2603,6 +2906,79 @@ function renderStyles() {
     .activity-feed { padding: var(--space-4); }
     .activity-feed ol { gap: var(--space-3); }
 
+    .run-row {
+      display: flex;
+      align-items: center;
+      gap: var(--space-2);
+    }
+
+    .run-row time {
+      color: var(--text-secondary);
+      font-size: 11px;
+      font-family: var(--font-mono);
+    }
+
+    .run-badge {
+      display: inline-block;
+      font-size: 10px;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      border: 1px solid var(--border-default);
+      border-radius: var(--radius-sm);
+      padding: 2px 6px;
+      color: var(--text-secondary);
+    }
+
+    .run-badge.success { color: var(--success); border-color: var(--success-dim); background: var(--success-dim); }
+    .run-badge.blocked { color: var(--warning); border-color: var(--warning-dim); background: var(--warning-dim); }
+    .run-badge.failed { color: var(--danger); border-color: var(--danger-dim); background: var(--danger-dim); }
+    .run-badge.recorded { background: var(--bg-hover); }
+
+    .run-chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      margin-top: 5px;
+    }
+
+    .run-empty {
+      color: var(--text-muted);
+      font-size: 11px;
+    }
+
+    .activity-summary {
+      display: grid;
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+      gap: var(--space-2);
+      margin-bottom: var(--space-3);
+    }
+
+    .activity-summary article {
+      border: 1px solid var(--border-default);
+      border-radius: var(--radius-lg);
+      background: var(--bg-card);
+      padding: var(--space-3);
+    }
+
+    .activity-summary span {
+      display: block;
+      color: var(--text-secondary);
+      font-size: 11px;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    .activity-summary strong {
+      display: block;
+      margin-top: var(--space-1);
+      font-size: 16px;
+      font-family: var(--font-mono);
+      font-weight: 600;
+      letter-spacing: -0.02em;
+      overflow-wrap: anywhere;
+    }
+
     @media (max-width: 1180px) {
       .app-shell { grid-template-columns: 200px minmax(0, 1fr); }
       .right-rail {
@@ -2618,6 +2994,7 @@ function renderStyles() {
       .stats-grid { grid-template-columns: 1fr; }
       .home-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
       .home-columns { grid-template-columns: 1fr; }
+      .activity-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
     }
 
     @media (max-width: 760px) {
@@ -2639,6 +3016,8 @@ function renderStyles() {
       .stats-grid { grid-template-columns: 1fr; }
       .home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
       .memory-grid { grid-template-columns: 1fr; }
+      .activity-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+      .harness-grid { grid-template-columns: 1fr; }
       .map-head { display: block; }
       .map-controls { margin-top: var(--space-2); width: max-content; }
       .right-rail { padding: var(--space-4); }
@@ -2721,9 +3100,10 @@ function renderReport(summary) {
       <aside class="right-rail" aria-label="Insights">
       <div data-rail="home harnesses memory activity">${renderStats(summary, copy)}</div>
       <div data-rail="home harnesses">${renderConfidence(summary, copy)}</div>
-      <div data-rail="graph">${renderGraphOverview(summary.graph || {}, copy)}</div>
-      <div data-rail="home harnesses">${renderImportantHarnesses(harnesses, copy)}</div>
+      <div data-rail="graph">${renderMapGuide(copy)}</div>
       <div data-rail="graph">${renderSelectedPanel(harnesses, copy)}</div>
+      <div data-rail="home harnesses">${renderImportantHarnesses(harnesses, copy)}</div>
+      <div data-rail="graph">${renderGraphOverview(summary.graph || {}, copy)}</div>
     </aside>
   </div>
   ${renderContractMetadata(copy)}