tink-harness 1.9.10 → 1.9.12

package/.claude-plugin/plugin.json

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

package/CHANGELOG.md

@@ -6,6 +6,26 @@ All notable changes to Tink are tracked here.
 
 No unreleased changes yet.
 
+## [1.9.12] - 2026-06-11
+
+### Changed
+
+- Restyled the dashboard with a warm editorial palette (charcoal/ivory/amber) in place of the generic black-and-blue look, with softer semantic tones and larger radii.
+- Improved harness-tab readability: bigger card titles, labels, detail text, and history entries with more breathing room.
+
+### Added
+
+- Next-action suggestions now provide copy-paste commands for both Claude Code (`/tink:...`) and Codex (`$tink:...`).
+- README (EN/KO) refreshed: latest-package summary, release badge, and an up-to-date description of the tabbed dashboard, 3D harness map, and next-action panel.
+
+## [1.9.11] - 2026-06-11
+
+### Changed
+
+- Home health-group selection no longer carries over into the harness map or cards - it only opens the inline list and next-action suggestion on Home.
+- Removed the Move/Rotate toggle: left-drag always pans, right-drag always rotates, and the in-map hint reflects this fixed mapping.
+- The selected-node panel now starts empty ("no harness selected") instead of showing an arbitrary first harness, and uses the same tone-chip format as click selections; next-action phrasing was neutralized to fit single harnesses as well as groups.
+
 ## [1.9.10] - 2026-06-11
 
 ### Changed

package/README.ko.md

@@ -8,7 +8,7 @@ Claude Code와 Codex를 위한 작은 하네스 레이어입니다.
 
 Tink는 지금 작업에 맞는 하네스를 고르고, 실행 상태를 보이게 만들고, 실제 사용 중 생긴 실패와 피드백으로 하네스 세트를 개선합니다.
 
-**최신 패키지:** v1.9.1 — 하네스 건강 요약, graph, timeline, 후보 점수, 생애주기 상태, 정적 로컬 리포트를 추가합니다. 전체 변경 이력은 [CHANGELOG](CHANGELOG.md)를 확인하세요.
+**최신 패키지:** v1.9.12 — 로컬 건강 리포트가 탭형 대시보드로 바뀌었습니다. 3D 하네스 지도, 쉬운 말 건강 요약, Claude Code와 Codex 양쪽 복사-붙여넣기 명령이 포함된 다음 행동 제안을 제공합니다. 전체 변경 이력은 [CHANGELOG](CHANGELOG.md)를 확인하세요.
 
 [English](README.md) · **한국어** · [변경 이력](CHANGELOG.md)
 
@@ -131,7 +131,7 @@ node .tink/tools/generate-harness-lifecycle-summary.mjs
 node .tink/tools/render-harness-health-report.mjs
 ```
 
-리포트는 정적 대시보드 형태입니다. graph overview, 최근 run timeline, 하네스별 카드를 보여주지만 서버를 시작하거나, 파일을 감시하거나, hidden cache를 만들거나, 새 public `tink index` 명령을 추가하지 않습니다.
+리포트는 정적인 탭형 로컬 페이지입니다. 홈 요약, 사용량 순 하네스 카드와 평가·생성 히스토리, 메모리 참조, run 활동 피드, 그리고 인터랙티브 3D 하네스 지도(드래그 이동, 우클릭 드래그 회전, 휠 확대 — three.js를 CDN에서 불러오며 오프라인이면 안내가 표시됩니다)를 제공합니다. 하네스나 건강 그룹을 선택하면 쉬운 말 요약과 함께 Claude Code(`/tink:...`)·Codex(`$tink:...`) 양쪽 복사용 명령이 포함된 다음 행동을 제안합니다. 여전히 서버를 시작하거나, 파일을 감시하거나, hidden cache를 만들거나, 새 public `tink index` 명령을 추가하지 않습니다 — 제안만 하며, 재사용 상태 변경은 기존 승인 절차를 그대로 따릅니다.
 
 선택된 하네스에 따라 `.tink/current/goals.json`에는 현재 실행의 목표 체크포인트가, `.tink/current/delegation.md`에는 인수인계 패킷이 추가될 수 있습니다. Tink는 이런 브리프를 보이는 상태로 준비하지만, 별도 승인된 워크플로가 아니면 worker, tmux pane, worktree를 시작하지 않습니다.
 

package/README.md

@@ -17,14 +17,14 @@
 </p>
 
 <p>
-  <a href="https://github.com/dotoricode/tink-harness/releases/tag/v1.9.1"><img src="https://img.shields.io/github/v/release/dotoricode/tink-harness?label=release&color=2ea44f" alt="GitHub release"></a>
+  <a href="https://github.com/dotoricode/tink-harness/releases/tag/v1.9.12"><img src="https://img.shields.io/github/v/release/dotoricode/tink-harness?label=release&color=2ea44f" alt="GitHub release"></a>
   <a href="https://www.npmjs.com/package/tink-harness"><img src="https://img.shields.io/npm/v/tink-harness?label=npm&color=cb3837" alt="npm version"></a>
   <a href="https://github.com/dotoricode/tink-harness/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/dotoricode/tink-harness/ci.yml?branch=main&label=ci" alt="CI"></a>
   <a href="https://github.com/dotoricode/tink-harness/blob/main/LICENSE"><img src="https://img.shields.io/github/license/dotoricode/tink-harness" alt="License"></a>
   <a href="https://github.com/dotoricode/tink-harness/stargazers"><img src="https://img.shields.io/github/stars/dotoricode/tink-harness?style=social" alt="GitHub stars"></a>
 </p>
 
-<p><strong>Latest package:</strong> v1.9.1 - Adds harness health summaries with graph, timeline, scoring, lifecycle states, and a static local report. See <a href="CHANGELOG.md">CHANGELOG</a> for release history.</p>
+<p><strong>Latest package:</strong> v1.9.12 - The local health report is now a tabbed dashboard with a 3D harness map, plain-language health summaries, and next-action suggestions with copy-paste commands for both Claude Code and Codex. See <a href="CHANGELOG.md">CHANGELOG</a> for release history.</p>
 
 **English** · [한국어](README.ko.md) · [Changelog](CHANGELOG.md)
 
@@ -210,7 +210,7 @@ node .tink/tools/generate-harness-lifecycle-summary.mjs
 node .tink/tools/render-harness-health-report.mjs
 ```
 
-The report is a static dashboard-style page with a graph overview, recent run timeline, and one card per harness. It does not start a server, watch files, create a hidden cache, or add a public `tink index` command.
+The report is a static, tabbed local page: a home overview, usage-sorted harness cards with an evaluation/maintenance history, memory references, a run activity feed, and an interactive 3D harness map (drag to move, right-drag to rotate, wheel to zoom; rendered with three.js from a CDN, with an offline notice when unavailable). Selecting a harness or health group shows a plain-language summary plus a suggested next action with copy-paste commands for both Claude Code (`/tink:...`) and Codex (`$tink:...`). It still does not start a server, watch files, create a hidden cache, or add a public `tink index` command - suggestions only; reusable-state changes keep their approval gates.
 
 When selected, current-run artifacts may also include `.tink/current/goals.json` for goal checkpoints or `.tink/current/delegation.md` for handoff packets. Tink prepares those briefs as visible state; it does not start workers, tmux panes, or worktrees unless a separate approved workflow does so.
 

package/VERSIONING.md

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

package/package.json

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

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

@@ -161,11 +161,11 @@ const COPY = {
       frog_candidate: ['Cleanup review', 'bad']
     },
     actions: {
-      keep: { what: 'This group is healthy and proven by records.', next: 'No action needed - just keep using it.', command: '', expect: '' },
-      observe: { what: 'Not enough records to judge yet.', next: 'Keep working normally with /tink:cast so records accumulate.', command: '/tink:cast', expect: 'What happens: it picks the right harness for your task, plans the run, and the work gets recorded - improving future judgments.' },
-      weave: { what: 'Repeated friction was recorded here.', next: 'Run /tink:weave to prepare a small improvement proposal.', command: '/tink:weave', expect: 'What happens: it drafts an improvement (e.g. updated instructions) from the recorded friction and shows it to you. Nothing changes until you approve.' },
-      merge_candidate: { what: 'These are often used together with another harness.', next: 'Run /tink:weave to check the overlap and decide whether to combine them.', command: '/tink:weave', expect: 'What happens: it inspects the overlap evidence and proposes whether to combine or keep separate. Nothing changes until you approve.' },
-      frog_candidate: { what: 'Repeated trouble plus high cost - cleanup candidates.', next: 'Run /tink:frog to review archive/delete with approval.', command: '/tink:frog', expect: 'What happens: it lists cleanup candidates with their evidence. Archiving or deleting only happens after your explicit approval.' }
+      keep: { what: 'Healthy and proven by records.', next: 'No action needed - just keep using it.', command: '', expect: '' },
+      observe: { what: 'Not enough records to judge yet.', next: 'Keep working normally with /tink:cast so records accumulate.', command: 'tink:cast', expect: 'What happens: it picks the right harness for your task, plans the run, and the work gets recorded - improving future judgments.' },
+      weave: { what: 'Repeated friction shows up in the records.', next: 'Run /tink:weave to prepare a small improvement proposal.', command: 'tink:weave', expect: 'What happens: it drafts an improvement (e.g. updated instructions) from the recorded friction and shows it to you. Nothing changes until you approve.' },
+      merge_candidate: { what: 'Often used together with another harness.', next: 'Run /tink:weave to check the overlap and decide whether to combine them.', command: 'tink:weave', expect: 'What happens: it inspects the overlap evidence and proposes whether to combine or keep separate. Nothing changes until you approve.' },
+      frog_candidate: { what: 'Repeated trouble plus high cost - cleanup candidates.', next: 'Run /tink:frog to review archive/delete with approval.', command: 'tink:frog', expect: 'What happens: it lists cleanup candidates with their evidence. Archiving or deleting only happens after your explicit approval.' }
     },
     recPlain: {
       keep: 'Working well - keep using it as is.',
@@ -299,11 +299,11 @@ COPY.ko = {
     frog_candidate: ['정리 검토', 'bad']
   },
   actions: {
-    keep: { what: '기록으로 검증된 건강한 그룹이에요.', next: '별도 행동이 필요 없어요 — 계속 사용하면 됩니다.', command: '', expect: '' },
-    observe: { what: '아직 판단할 기록이 부족해요.', next: '/tink:cast로 평소처럼 작업하면 기록이 쌓여 판단이 정확해져요.', command: '/tink:cast', expect: '실행하면: 작업에 맞는 하네스를 골라 계획을 세우고, 끝나면 이번 작업이 기록으로 남아 다음 판단이 정확해져요.' },
-    weave: { what: '반복되는 마찰이 기록된 그룹이에요.', next: '/tink:weave를 실행해 작은 개선 제안을 준비하세요.', command: '/tink:weave', expect: '실행하면: 기록된 마찰을 바탕으로 개선안(지침 수정 등)을 만들어 보여줘요. 승인하기 전에는 아무것도 바뀌지 않아요.' },
-    merge_candidate: { what: '다른 하네스와 자주 함께 쓰이는 그룹이에요.', next: '/tink:weave로 겹침을 확인하고 합칠지 검토하세요.', command: '/tink:weave', expect: '실행하면: 겹침 근거를 살펴보고 합칠지 따로 둘지 제안해 줘요. 승인 전에는 아무것도 바뀌지 않아요.' },
-    frog_candidate: { what: '반복 문제와 높은 비용이 기록됐어요 — 정리 후보예요.', next: '/tink:frog로 보관/삭제 검토를 승인 절차와 함께 진행하세요.', command: '/tink:frog', expect: '실행하면: 정리 후보와 근거를 정리해 보여줘요. 보관·삭제는 명시적으로 승인해야만 실제로 진행돼요.' }
+    keep: { what: '기록으로 잘 검증되어 있어요.', next: '별도 행동이 필요 없어요 — 계속 사용하면 됩니다.', command: '', expect: '' },
+    observe: { what: '아직 판단할 기록이 부족해요.', next: '/tink:cast로 평소처럼 작업하면 기록이 쌓여 판단이 정확해져요.', command: 'tink:cast', expect: '실행하면: 작업에 맞는 하네스를 골라 계획을 세우고, 끝나면 이번 작업이 기록으로 남아 다음 판단이 정확해져요.' },
+    weave: { what: '반복되는 마찰이 기록되어 있어요.', next: '/tink:weave를 실행해 작은 개선 제안을 준비하세요.', command: 'tink:weave', expect: '실행하면: 기록된 마찰을 바탕으로 개선안(지침 수정 등)을 만들어 보여줘요. 승인하기 전에는 아무것도 바뀌지 않아요.' },
+    merge_candidate: { what: '다른 하네스와 자주 함께 쓰여요.', next: '/tink:weave로 겹침을 확인하고 합칠지 검토하세요.', command: 'tink:weave', expect: '실행하면: 겹침 근거를 살펴보고 합칠지 따로 둘지 제안해 줘요. 승인 전에는 아무것도 바뀌지 않아요.' },
+    frog_candidate: { what: '반복 문제와 높은 비용이 기록됐어요 — 정리 후보예요.', next: '/tink:frog로 보관/삭제 검토를 승인 절차와 함께 진행하세요.', command: 'tink:frog', expect: '실행하면: 정리 후보와 근거를 정리해 보여줘요. 보관·삭제는 명시적으로 승인해야만 실제로 진행돼요.' }
   },
   recPlain: {
     keep: '잘 쓰이고 있어요 — 그대로 유지하면 됩니다.',
@@ -874,10 +874,6 @@ function renderGraphCanvas(summary, copy) {
             <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="drag mode">
-            <button class="active" type="button" data-drag="pan" aria-pressed="true">${escapeHtml(copy.dragPan || 'Move')}</button>
-            <button type="button" data-drag="rotate" aria-pressed="false">${escapeHtml(copy.dragRotate || 'Rotate')}</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>
@@ -1069,24 +1065,7 @@ function renderImportantHarnesses(harnesses, copy) {
 }
 
 function renderSelectedPanel(harnesses, copy) {
-  const first = harnesses.find((item) => item.signals?.uses > 0) || harnesses[0];
-  if (!first) {
-    return `<section class="insight-card selected" id="selected-panel"><p class="eyebrow">${escapeHtml(copy.selected)}</p><h2>${escapeHtml(copy.noHarnessSelected)}</h2><p>${escapeHtml(copy.clickNode)}</p></section>`;
-  }
-  const plain = (copy.recPlain && copy.recPlain[first.recommendation]) || normalizeReason(first.reason, copy) || copy.clickNode;
-  const stateText = (copy.statePlain && copy.statePlain[first.lifecycle_state]) || renderCopyValue(first.lifecycle_state, copy);
-  return `
-    <section class="insight-card selected" id="selected-panel">
-      <p class="eyebrow">${escapeHtml(copy.selected)}</p>
-        <h2>${escapeHtml(first.id)}</h2>
-        <p>${escapeHtml(plain)}</p>
-        <div class="stat-chips">
-          <span class="stat-chip">${escapeHtml(copy.uses)} ${escapeHtml(first.signals?.uses || 0)}${escapeHtml(copy.timesSuffix || '')}</span>
-          <span class="stat-chip">${escapeHtml(copy.score)} ${escapeHtml(first.candidate_score?.total || 0)}</span>
-          <span class="stat-chip">${escapeHtml(stateText)}</span>
-        </div>
-    </section>
-  `;
+  return `<section class="insight-card selected" id="selected-panel"><p class="eyebrow">${escapeHtml(copy.selected)}</p><h2>${escapeHtml(copy.noHarnessSelected)}</h2><p>${escapeHtml(copy.clickNode)}</p></section>`;
 }
 
 function renderHarness(item, copy) {
@@ -1579,14 +1558,17 @@ function renderScript(harnesses, copy) {
           actionPanel.innerHTML = head + '<p class="action-body">' + esc(copy.actionDefault || '') + '</p>';
           return;
         }
-        const command = action.command ? (harnessId ? action.command + ' ' + harnessId : action.command) : '';
+        const suffix = harnessId ? ' ' + harnessId : '';
+        const cmdRow = (label, value) =>
+          '<div class="cmd-row"><span class="cmd-label">' + esc(label) + '</span><code>' + esc(value) + '</code>' +
+          '<button class="copy-btn" type="button" data-copy-cmd="' + esc(value) + '">' + esc(copy.copyCmd || 'Copy') + '</button></div>';
         actionPanel.innerHTML = head +
           (harnessId ? '<p class="action-target">' + esc(copy.actionTarget || 'Target') + ': <strong>' + esc(harnessId) + '</strong></p>' : '') +
           '<p class="action-body">' + esc(action.what || '') + '</p>' +
           '<p class="action-next">' + esc(action.next || '') + '</p>' +
-          (command
-            ? '<div class="cmd-row"><code>' + esc(command) + '</code>' +
-              '<button class="copy-btn" type="button" data-copy-cmd="' + esc(command) + '">' + esc(copy.copyCmd || 'Copy') + '</button></div>' +
+          (action.command
+            ? cmdRow('Claude Code', '/' + action.command + suffix) +
+              cmdRow('Codex', '$' + action.command + suffix) +
               (action.expect ? '<p class="action-expect">' + esc(action.expect) + '</p>' : '') +
               '<p class="action-caveat">' + esc(copy.actionCaveat || '') + '</p>'
             : '');
@@ -1629,10 +1611,6 @@ function renderScript(harnesses, copy) {
           item.setAttribute('aria-pressed', 'false');
         });
         if (alreadyActive) {
-          cards.forEach((card) => card.classList.remove('is-filtered-out'));
-          window.__tinkGraphState.filter = null;
-          if (window.__tinkGraph) window.__tinkGraph.setFilter(null);
-          setStatus(copy.showingAll);
           setFilterStatus(copy.showingAll);
           updateActionPanel(null, null);
           updateGroupDetail(null);
@@ -1640,11 +1618,7 @@ function renderScript(harnesses, copy) {
         }
         button.classList.add('active-filter');
         button.setAttribute('aria-pressed', 'true');
-        cards.forEach((card) => card.classList.toggle('is-filtered-out', card.dataset.recommendation !== value));
-        window.__tinkGraphState.filter = value;
-        if (window.__tinkGraph) window.__tinkGraph.setFilter(value);
         const label = recLabelByFilter[value] || value;
-        setStatus(copy.filteredTo + ': ' + label);
         setFilterStatus(copy.filteredTo + ': ' + label);
         updateActionPanel(value, null);
         updateGroupDetail(value);
@@ -1656,24 +1630,8 @@ function renderScript(harnesses, copy) {
           else window.__tinkGraph.zoom(button.dataset.zoom === 'in' ? 0.78 : 1.28);
         });
       });
-      document.querySelectorAll('[data-drag]').forEach((button) => {
-        button.addEventListener('click', () => {
-          const mode = button.dataset.drag;
-          document.querySelectorAll('[data-drag]').forEach((item) => {
-            const active = item.dataset.drag === mode;
-            item.classList.toggle('active', active);
-            item.setAttribute('aria-pressed', active ? 'true' : 'false');
-          });
-          window.__tinkGraphState.dragMode = mode;
-          if (window.__tinkGraph) window.__tinkGraph.setDragMode(mode);
-          updateGraphHint();
-        });
-      });
       const graphHint = document.getElementById('graph-hint');
-      function updateGraphHint() {
-        if (graphHint) graphHint.textContent = window.__tinkGraphState.dragMode === 'rotate' ? (copy.hintRotate || '') : (copy.hintPan || '');
-      }
-      updateGraphHint();
+      if (graphHint) graphHint.textContent = copy.hintPan || '';
       const rail = document.querySelector('.right-rail');
       const railResizer = document.getElementById('rail-resizer');
       if (rail && railResizer) {
@@ -1812,19 +1770,15 @@ function renderGraph3DModule(copy) {
       controls.zoomSpeed = 1.1;
       controls.screenSpacePanning = true;
       controls.panSpeed = 1.1;
-      function applyDragMode(mode) {
-        const rotate = mode === 'rotate';
-        controls.mouseButtons = {
-          LEFT: rotate ? THREE.MOUSE.ROTATE : THREE.MOUSE.PAN,
-          MIDDLE: THREE.MOUSE.DOLLY,
-          RIGHT: rotate ? THREE.MOUSE.PAN : THREE.MOUSE.ROTATE
-        };
-        controls.touches = {
-          ONE: rotate ? THREE.TOUCH.ROTATE : THREE.TOUCH.PAN,
-          TWO: THREE.TOUCH.DOLLY_ROTATE
-        };
-      }
-      applyDragMode((window.__tinkGraphState && window.__tinkGraphState.dragMode) || 'pan');
+      controls.mouseButtons = {
+        LEFT: THREE.MOUSE.PAN,
+        MIDDLE: THREE.MOUSE.DOLLY,
+        RIGHT: THREE.MOUSE.ROTATE
+      };
+      controls.touches = {
+        ONE: THREE.TOUCH.PAN,
+        TWO: THREE.TOUCH.DOLLY_ROTATE
+      };
       controls.autoRotate = false;
       controls.minDistance = 8;
       controls.maxDistance = 220;
@@ -2184,9 +2138,6 @@ function renderGraph3DModule(copy) {
           camera.position.copy(INITIAL_CAM);
           controls.target.copy(INITIAL_TARGET);
           controls.update();
-        },
-        setDragMode(mode) {
-          applyDragMode(mode);
         }
       };
       applyState();
@@ -2332,30 +2283,30 @@ function renderStyles() {
   return `<style>
     :root {
       color-scheme: dark;
-      --bg-page: #0A0A0A;
-      --bg-card: #111111;
-      --bg-hover: #161616;
-      --bg-selected: #1C1C1C;
-      --border-default: #1F1F1F;
-      --border-hover: #2A2A2A;
-      --border-strong: #383838;
-      --text-primary: #E8E8E8;
-      --text-secondary: #666666;
-      --text-muted: #3D3D3D;
-      --accent: #2563EB;
-      --accent-dim: #1E2D4A;
-      --accent-text: #93C5FD;
-      --success: #22C55E;
-      --success-dim: #14291E;
-      --warning: #F59E0B;
-      --warning-dim: #2A1F0A;
-      --danger: #EF4444;
-      --danger-dim: #2A0F0F;
-      --font-ui: 'IBM Plex Sans', -apple-system, sans-serif;
+      --bg-page: #171511;
+      --bg-card: #1E1B16;
+      --bg-hover: #25211A;
+      --bg-selected: #2C2720;
+      --border-default: #2D2820;
+      --border-hover: #3B342A;
+      --border-strong: #4C4336;
+      --text-primary: #EBE4D6;
+      --text-secondary: #A2988A;
+      --text-muted: #645B4E;
+      --accent: #C9913F;
+      --accent-dim: #3A2F1B;
+      --accent-text: #E2B873;
+      --success: #8FAE76;
+      --success-dim: #28301F;
+      --warning: #D2A24A;
+      --warning-dim: #342917;
+      --danger: #C97862;
+      --danger-dim: #34221C;
+      --font-ui: 'Avenir Next', 'Pretendard', 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
       --font-mono: 'IBM Plex Mono', 'Fira Code', monospace;
-      --radius-sm: 4px;
-      --radius-md: 6px;
-      --radius-lg: 8px;
+      --radius-sm: 5px;
+      --radius-md: 8px;
+      --radius-lg: 12px;
       --border-width: 1px;
       --space-1: 4px;
       --space-2: 8px;
@@ -2363,12 +2314,12 @@ function renderStyles() {
       --space-4: 16px;
       --space-6: 24px;
       --space-8: 32px;
-      --chart-line: #2563EB;
+      --chart-line: #C9913F;
       --chart-line-w: 1.5px;
-      --chart-area: rgba(37, 99, 235, 0.06);
-      --chart-grid: #1F1F1F;
-      --chart-dot-fill: #111111;
-      --chart-dot-stroke: #2563EB;
+      --chart-area: rgba(201, 145, 63, 0.07);
+      --chart-grid: #2D2820;
+      --chart-dot-fill: #1E1B16;
+      --chart-dot-stroke: #C9913F;
     }
 
     * { box-sizing: border-box; }
@@ -3099,7 +3050,7 @@ function renderStyles() {
       padding: 6px 12px;
       border-radius: var(--radius-md);
       border: 1px solid var(--border-default);
-      background: rgba(10, 10, 14, 0.78);
+      background: rgba(23, 21, 17, 0.82);
       color: var(--text-secondary);
       font-size: 12px;
       pointer-events: none;
@@ -3240,6 +3191,13 @@ function renderStyles() {
       flex-wrap: wrap;
     }
 
+    .cmd-label {
+      min-width: 78px;
+      color: var(--text-muted);
+      font-size: 11.5px;
+      white-space: nowrap;
+    }
+
     .cmd-row code {
       background: var(--bg-hover);
       border: 1px solid var(--border-default);
@@ -3537,13 +3495,14 @@ function renderStyles() {
 
     .harness-summary:hover { background: var(--bg-hover); }
 
-    .harness-summary .eyebrow { margin: 0 0 2px; font-size: 10px; }
+    .harness-summary .eyebrow { margin: 0 0 3px; font-size: 11.5px; letter-spacing: 0.03em; }
 
     .harness-summary h3 {
       margin: 0;
-      font-size: 14px;
-      line-height: 1.25;
+      font-size: 15.5px;
+      line-height: 1.3;
       font-weight: 600;
+      letter-spacing: -0.01em;
       overflow-wrap: anywhere;
     }
 
@@ -3555,12 +3514,12 @@ function renderStyles() {
 
     .harness-mini span {
       color: var(--text-secondary);
-      font-size: 11px;
+      font-size: 12.5px;
       white-space: nowrap;
     }
 
     .harness-mini strong {
-      font-size: 18px;
+      font-size: 20px;
       line-height: 1;
       font-family: var(--font-mono);
       font-weight: 600;
@@ -3604,16 +3563,15 @@ function renderStyles() {
     .harness-reason {
       margin: 0;
       color: var(--text-secondary);
-      font-size: 12px;
-      line-height: 1.5;
+      font-size: 13.5px;
+      line-height: 1.6;
     }
 
     .detail-label {
-      margin: var(--space-1) 0 0;
+      margin: var(--space-2) 0 0;
       color: var(--text-secondary);
-      font-size: 10px;
-      text-transform: uppercase;
-      letter-spacing: 0.06em;
+      font-size: 11.5px;
+      letter-spacing: 0.04em;
     }
 
     .co-used-chips { display: flex; flex-wrap: wrap; gap: 6px; }
@@ -3640,7 +3598,7 @@ function renderStyles() {
       display: flex;
       justify-content: space-between;
       gap: var(--space-2);
-      font-size: 12px;
+      font-size: 13px;
       color: var(--text-secondary);
     }
 
@@ -3649,17 +3607,17 @@ function renderStyles() {
     .harness-next {
       margin: 0;
       color: var(--text-primary);
-      font-size: 12px;
-      line-height: 1.5;
+      font-size: 13.5px;
+      line-height: 1.6;
     }
 
     .evidence-list {
       margin: 0;
       padding-left: 16px;
       color: var(--text-secondary);
-      font-size: 11px;
+      font-size: 12.5px;
       display: grid;
-      gap: 3px;
+      gap: 4px;
     }
 
     .harness-card .link-button { margin-top: var(--space-1); justify-self: start; }
@@ -3680,19 +3638,19 @@ function renderStyles() {
 
     .history-feed li {
       display: grid;
-      grid-template-columns: 110px 1fr;
+      grid-template-columns: 120px 1fr;
       gap: var(--space-3);
       align-items: start;
       border: 1px solid var(--border-default);
       border-radius: var(--radius-md);
       background: var(--bg-card);
-      padding: var(--space-2) var(--space-3);
+      padding: var(--space-3) var(--space-4);
     }
 
     .history-type {
       display: inline-block;
       font-family: var(--font-mono);
-      font-size: 10px;
+      font-size: 11px;
       text-transform: uppercase;
       letter-spacing: 0.05em;
       color: var(--text-secondary);
@@ -3709,12 +3667,12 @@ function renderStyles() {
     .history-type.harness-create,
     .history-type.harness-edit { color: var(--success); border-color: var(--success-dim); }
 
-    .history-feed strong { font-size: 12px; font-weight: 500; }
+    .history-feed strong { font-size: 13.5px; font-weight: 500; }
 
     .history-harnesses {
-      margin: 2px 0 0;
+      margin: 3px 0 0;
       color: var(--text-secondary);
-      font-size: 11px;
+      font-size: 12.5px;
       font-family: var(--font-mono);
     }