npm - create-walle - Versions diffs - 0.9.30 → 0.9.32 - Mend

create-walle 0.9.30 → 0.9.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

package/template/claude-task-manager/docs/review-redesign-proposal.html ADDED Viewed

@@ -0,0 +1,892 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>CTM Review — Redesign Proposal</title>
+<style>
+  /* ===== CTM theme tokens (copied verbatim from index.html so this mock reads native) ===== */
+  :root {
+    --bg: #1a1b26; --bg-light: #24283b; --bg-lighter: #2f3349; --bg-card: #24283b;
+    --bg-panel: #1f2335; --bg-elevated: #2b3045; --bg-input: #1a1b26;
+    --bg-hover: rgba(255,255,255,0.06); --code-bg: rgba(122,162,247,0.12);
+    --fg: #c0caf5; --fg-dim: #565f89; --fg-muted: #8b94bd;
+    --accent: #7aa2f7; --accent-hover: #89b4fa; --accent-fg: #0d1117; --accent-soft: rgba(122,162,247,0.13);
+    --green: #9ece6a; --success-soft: rgba(158,206,106,0.14);
+    --red: #f7768e; --danger-soft: rgba(247,118,142,0.14);
+    --yellow: #e0af68; --warning-soft: rgba(224,175,104,0.14);
+    --purple: #bb9af7; --border: #3b4261; --focus-ring: rgba(122,162,247,0.32);
+    --overlay-bg: rgba(5,8,15,0.72);
+    /* syntax (Tokyo Night) */
+    --syn-kw: #bb9af7; --syn-fn: #7aa2f7; --syn-str: #9ece6a; --syn-num: #ff9e64;
+    --syn-com: #565f89; --syn-type: #2ac3de; --syn-prop: #73daca; --syn-punc: #89ddff;
+    --diff-add-bg: rgba(158,206,106,0.16); --diff-add-gutter: rgba(158,206,106,0.30);
+    --diff-del-bg: rgba(247,118,142,0.16); --diff-del-gutter: rgba(247,118,142,0.30);
+    --shadow-lg: 0 18px 46px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,255,255,0.03) inset;
+  }
+  html[data-theme="light"] {
+    --bg: #f6f7f9; --bg-light: #ffffff; --bg-lighter: #eceef2; --bg-card: #ffffff;
+    --bg-panel: #fafbfc; --bg-elevated: #ffffff; --bg-input: #ffffff;
+    --bg-hover: rgba(15,23,42,0.045); --code-bg: rgba(15,23,42,0.06);
+    --fg: #0f172a; --fg-dim: #3d4b5e; --fg-muted: #52606f;
+    --accent: #3b66e0; --accent-hover: #2c54c8; --accent-fg: #ffffff; --accent-soft: rgba(59,102,224,0.10);
+    --green: #15803d; --success-soft: rgba(21,128,61,0.10);
+    --red: #b91c1c; --danger-soft: rgba(185,28,28,0.10);
+    --yellow: #92400e; --warning-soft: rgba(146,64,14,0.10);
+    --purple: #7c3aed; --border: rgba(15,23,42,0.10); --focus-ring: rgba(59,102,224,0.32);
+    --overlay-bg: rgba(15,23,42,0.40);
+    --syn-kw: #7c3aed; --syn-fn: #2c54c8; --syn-str: #15803d; --syn-num: #b45309;
+    --syn-com: #94a3b8; --syn-type: #0e7490; --syn-prop: #0f766e; --syn-punc: #2563eb;
+    --diff-add-bg: rgba(21,128,61,0.10); --diff-add-gutter: rgba(21,128,61,0.28);
+    --diff-del-bg: rgba(185,28,28,0.10); --diff-del-gutter: rgba(185,28,28,0.28);
+    --shadow-lg: 0 24px 60px rgba(15,23,42,0.18), 0 8px 20px rgba(15,23,42,0.08), 0 0 0 1px rgba(15,23,42,0.04);
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html { scroll-behavior: smooth; }
+  body {
+    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
+    background: var(--bg); color: var(--fg);
+    line-height: 1.55; -webkit-font-smoothing: antialiased;
+  }
+  .mono { font-family: 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace; }
+  a { color: var(--accent); }
+  /* ===== proposal chrome ===== */
+  .topbar {
+    position: sticky; top: 0; z-index: 50;
+    display: flex; align-items: center; gap: 18px;
+    padding: 12px 26px; background: color-mix(in srgb, var(--bg) 86%, transparent);
+    backdrop-filter: blur(14px) saturate(1.1); border-bottom: 1px solid var(--border);
+  }
+  .topbar .brand { font-weight: 700; letter-spacing: -0.01em; font-size: 15px; }
+  .topbar .brand b { color: var(--accent); }
+  .topbar nav { display: flex; gap: 4px; margin-left: 6px; flex-wrap: wrap; }
+  .topbar nav a {
+    font-size: 12.5px; color: var(--fg-muted); text-decoration: none;
+    padding: 5px 10px; border-radius: 7px;
+  }
+  .topbar nav a:hover { background: var(--bg-hover); color: var(--fg); }
+  .topbar .spacer { flex: 1; }
+  .toggle {
+    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
+    font-size: 12px; color: var(--fg-dim); background: var(--bg-light);
+    border: 1px solid var(--border); border-radius: 8px; padding: 6px 11px; user-select: none;
+  }
+  .toggle:hover { color: var(--fg); border-color: var(--accent); }
+  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 26px 120px; }
+  .hero { padding: 64px 0 30px; }
+  .eyebrow {
+    font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
+    color: var(--accent); margin-bottom: 16px;
+  }
+  .hero h1 { font-size: 42px; line-height: 1.08; letter-spacing: -0.025em; font-weight: 750; max-width: 16ch; }
+  .hero h1 em { font-style: normal; color: var(--accent); }
+  .hero p.lead { margin-top: 18px; font-size: 17px; color: var(--fg-muted); max-width: 64ch; line-height: 1.6; }
+  .meta-row { margin-top: 26px; display: flex; gap: 22px; flex-wrap: wrap; font-size: 12.5px; color: var(--fg-dim); }
+  .meta-row b { color: var(--fg); font-weight: 600; }
+  section { padding: 46px 0; border-top: 1px solid var(--border); }
+  .sec-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
+  .sec-num {
+    font-size: 12px; font-weight: 700; color: var(--accent); font-family: 'SF Mono', Menlo, monospace;
+    background: var(--accent-soft); border-radius: 6px; padding: 3px 8px;
+  }
+  h2 { font-size: 27px; letter-spacing: -0.02em; font-weight: 700; }
+  .sec-sub { color: var(--fg-muted); font-size: 15px; max-width: 70ch; margin: 14px 0 30px; line-height: 1.6; }
+  /* ===== issue audit cards ===== */
+  .issues { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
+  .issue {
+    background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
+    padding: 20px 20px 18px; position: relative; overflow: hidden;
+  }
+  .issue::before {
+    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--red);
+  }
+  .issue .tag {
+    display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
+    color: var(--red); background: var(--danger-soft); padding: 3px 8px; border-radius: 5px; margin-bottom: 11px;
+  }
+  .issue h3 { font-size: 15.5px; font-weight: 650; margin-bottom: 8px; }
+  .issue p { font-size: 13.5px; color: var(--fg-muted); line-height: 1.55; }
+  .issue code {
+    font-family: 'SF Mono', Menlo, monospace; font-size: 11.5px; color: var(--fg-dim);
+    background: var(--code-bg); padding: 1px 5px; border-radius: 4px;
+  }
+  .issue .fix {
+    margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--border);
+    font-size: 12.5px; color: var(--fg); display: flex; gap: 8px;
+  }
+  .issue .fix b { color: var(--green); font-weight: 700; flex-shrink: 0; }
+  /* ===== mock frame ===== */
+  .mock {
+    margin-top: 6px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
+    box-shadow: var(--shadow-lg); background: var(--bg);
+  }
+  .mock-caption {
+    display: flex; align-items: center; gap: 9px; padding: 9px 14px;
+    background: var(--bg-lighter); border-bottom: 1px solid var(--border);
+    font-size: 11.5px; color: var(--fg-dim);
+  }
+  .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+  .dot.r { background: #ff5f57; } .dot.y { background: #febc2e; } .dot.g { background: #28c840; }
+  .mock-caption .url {
+    margin-left: 10px; font-family: 'SF Mono', Menlo, monospace; font-size: 11px;
+    color: var(--fg-muted); background: var(--bg); border: 1px solid var(--border);
+    border-radius: 7px; padding: 4px 12px; flex: 1;
+  }
+  /* shared app shell inside mocks */
+  .shell-header {
+    display: flex; align-items: center; gap: 12px; padding: 11px 16px;
+    background: var(--bg-panel); border-bottom: 1px solid var(--border);
+  }
+  .breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 13px; }
+  .breadcrumb .crumb { color: var(--fg-muted); display: inline-flex; align-items: center; gap: 6px; }
+  .breadcrumb .crumb.active { color: var(--fg); font-weight: 600; }
+  .breadcrumb .sep { color: var(--fg-dim); }
+  .pill-sel {
+    display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fg);
+    background: var(--bg-light); border: 1px solid var(--border); border-radius: 8px; padding: 5px 11px; cursor: default;
+  }
+  .pill-sel svg { opacity: 0.6; }
+  .seg {
+    display: inline-flex; background: var(--bg-light); border: 1px solid var(--border);
+    border-radius: 9px; padding: 3px; gap: 2px;
+  }
+  .seg button {
+    font: inherit; font-size: 12px; color: var(--fg-muted); background: none; border: 0;
+    padding: 5px 12px; border-radius: 6px; cursor: pointer;
+  }
+  .seg button.on { background: var(--accent); color: var(--accent-fg); font-weight: 600; }
+  .grow { flex: 1; }
+  .searchbox {
+    display: flex; align-items: center; gap: 9px; background: var(--bg-input);
+    border: 1px solid var(--border); border-radius: 9px; padding: 7px 13px; color: var(--fg-dim); font-size: 13px;
+  }
+  .searchbox svg { flex-shrink: 0; opacity: 0.7; }
+  .kbd {
+    font-family: 'SF Mono', Menlo, monospace; font-size: 10.5px; color: var(--fg-dim);
+    border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; background: var(--bg);
+  }
+  /* ===== HUB ===== */
+  .hub-body { padding: 22px 24px 30px; background: var(--bg); }
+  .hub-bigsearch {
+    display: flex; align-items: center; gap: 12px; background: var(--bg-light);
+    border: 1px solid var(--border); border-radius: 12px; padding: 13px 18px; margin-bottom: 22px;
+  }
+  .hub-bigsearch svg { opacity: 0.6; }
+  .hub-bigsearch .ph { color: var(--fg-dim); font-size: 15px; }
+  .hub-bigsearch .grow { flex: 1; }
+  .hub-cols { display: grid; grid-template-columns: 1.45fr 1fr; gap: 22px; }
+  .col-head {
+    display: flex; align-items: center; gap: 10px; margin-bottom: 13px;
+  }
+  .col-head h4 { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fg-muted); }
+  .col-head .count {
+    font-size: 11px; color: var(--fg-dim); background: var(--bg-lighter);
+    border-radius: 20px; padding: 2px 9px; font-weight: 600;
+  }
+  .proj-card {
+    display: flex; align-items: center; gap: 14px; padding: 13px 15px; margin-bottom: 9px;
+    background: var(--bg-card); border: 1px solid var(--border); border-radius: 11px; cursor: pointer;
+    transition: border-color .12s, transform .12s;
+  }
+  .proj-card:hover { border-color: var(--accent); transform: translateX(2px); }
+  .proj-card .icn {
+    width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; display: grid; place-items: center;
+    background: var(--accent-soft); color: var(--accent);
+  }
+  .proj-card .body { flex: 1; min-width: 0; }
+  .proj-card .name { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
+  .proj-card .name .star { color: var(--yellow); }
+  .proj-card .sub {
+    font-size: 11.5px; color: var(--fg-dim); margin-top: 3px; display: flex; gap: 10px; align-items: center;
+    font-family: 'SF Mono', Menlo, monospace;
+  }
+  .branch-chip {
+    display: inline-flex; align-items: center; gap: 5px; color: var(--purple);
+    background: color-mix(in srgb, var(--purple) 12%, transparent); border-radius: 6px; padding: 1px 7px;
+    font-family: 'SF Mono', Menlo, monospace; font-size: 10.5px;
+  }
+  .stat { display: inline-flex; gap: 8px; align-items: center; font-family: 'SF Mono', Menlo, monospace; font-size: 12px; }
+  .stat .add { color: var(--green); } .stat .del { color: var(--red); }
+  .filecount { font-size: 11px; color: var(--fg-muted); }
+  .doc-row {
+    display: flex; align-items: center; gap: 11px; padding: 10px 13px; margin-bottom: 7px;
+    background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
+  }
+  .doc-row:hover { border-color: var(--accent); }
+  .doc-row .di { color: var(--accent); flex-shrink: 0; }
+  .doc-row .dn { font-size: 13px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  .doc-row .dp { font-size: 11px; color: var(--fg-dim); font-family: 'SF Mono', Menlo, monospace; }
+  /* ===== MD reviewer ===== */
+  .md-layout { display: grid; grid-template-columns: 218px 1fr 250px; min-height: 460px; background: var(--bg); }
+  .outline { border-right: 1px solid var(--border); padding: 16px 12px; background: var(--bg-panel); }
+  .outline .ol-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); margin: 0 6px 12px; }
+  .ol-item { font-size: 12.5px; color: var(--fg-muted); padding: 5px 8px; border-radius: 7px; cursor: pointer; display:block; border-left: 2px solid transparent; }
+  .ol-item:hover { background: var(--bg-hover); color: var(--fg); }
+  .ol-item.l2 { padding-left: 20px; font-size: 12px; }
+  .ol-item.l3 { padding-left: 34px; font-size: 11.5px; color: var(--fg-dim); }
+  .ol-item.active { color: var(--accent); background: var(--accent-soft); border-left-color: var(--accent); font-weight: 600; }
+  .md-reading { padding: 30px 40px; overflow: hidden; }
+  .md-reading .doc { max-width: 68ch; }
+  .md-reading h1 { font-size: 27px; font-weight: 720; letter-spacing: -0.02em; margin-bottom: 6px; }
+  .md-reading .doc > p.tagline { color: var(--fg-muted); font-size: 14px; margin-bottom: 22px; }
+  .md-reading h2 { font-size: 19px; font-weight: 650; margin: 26px 0 11px; padding-bottom: 7px; border-bottom: 1px solid var(--border); }
+  .md-reading p { font-size: 15px; line-height: 1.72; color: var(--fg); margin-bottom: 13px; }
+  .md-reading p code, .md-reading li code {
+    font-family: 'SF Mono', Menlo, monospace; font-size: 0.86em; color: var(--accent);
+    background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
+    border-radius: 5px; padding: 1px 6px;
+  }
+  .md-reading ul { margin: 0 0 14px 22px; }
+  .md-reading li { font-size: 15px; line-height: 1.7; margin-bottom: 5px; }
+  .codeblock {
+    background: var(--bg-lighter); border: 1px solid var(--border); border-radius: 10px;
+    margin: 6px 0 18px; overflow: hidden;
+  }
+  .codeblock .cb-head {
+    display: flex; align-items: center; justify-content: space-between; padding: 7px 13px;
+    background: color-mix(in srgb, var(--bg) 40%, var(--bg-lighter)); border-bottom: 1px solid var(--border);
+    font-size: 11px; color: var(--fg-dim); font-family: 'SF Mono', Menlo, monospace;
+  }
+  .codeblock pre { padding: 13px 15px; overflow-x: auto; font-family: 'SF Mono', Menlo, monospace; font-size: 12.5px; line-height: 1.65; }
+  .cm-rail { border-left: 1px solid var(--border); background: var(--bg-panel); padding: 16px 14px; }
+  .cm-rail .cr-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 12px; }
+  .cmt {
+    background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; margin-bottom: 10px;
+  }
+  .cmt .who { font-size: 11.5px; font-weight: 600; color: var(--accent); margin-bottom: 5px; display: flex; align-items: center; gap: 6px; }
+  .cmt .what { font-size: 12.5px; color: var(--fg-muted); line-height: 1.5; }
+  .cmt .anchor { font-size: 10.5px; color: var(--fg-dim); font-family: 'SF Mono', Menlo, monospace; margin-top: 7px; }
+  .addcmt { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg-dim); padding: 9px 11px; border: 1px dashed var(--border); border-radius: 9px; cursor: pointer; }
+  .addcmt:hover { border-color: var(--accent); color: var(--fg); }
+  /* syntax colors */
+  .k { color: var(--syn-kw); } .fn { color: var(--syn-fn); } .s { color: var(--syn-str); }
+  .n { color: var(--syn-num); } .c { color: var(--syn-com); } .t { color: var(--syn-type); }
+  .pr { color: var(--syn-prop); } .pu { color: var(--syn-punc); }
+  /* ===== diff viewer ===== */
+  .diff-layout { display: grid; grid-template-columns: 256px 1fr; min-height: 470px; background: var(--bg); }
+  .ftree { border-right: 1px solid var(--border); background: var(--bg-panel); display: flex; flex-direction: column; }
+  .ftree-top { padding: 12px 12px 9px; border-bottom: 1px solid var(--border); }
+  .ftree .searchbox { padding: 6px 11px; font-size: 12px; }
+  .ftree-tools { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 11px; color: var(--fg-dim); }
+  .ftree-tools .seg button { padding: 3px 9px; font-size: 11px; }
+  .ftree-list { padding: 8px; overflow-y: auto; flex: 1; }
+  .ftree-folder { font-size: 11px; color: var(--fg-dim); padding: 6px 8px 3px; font-family: 'SF Mono', Menlo, monospace; letter-spacing: 0.02em; }
+  .ftree-file {
+    display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 7px; cursor: pointer;
+    font-size: 12.5px; margin: 1px 0;
+  }
+  .ftree-file:hover { background: var(--bg-hover); }
+  .ftree-file.active { background: var(--accent-soft); }
+  .ftree-file.active .fname { color: var(--accent); font-weight: 600; }
+  .ftree-file .fdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+  .ftree-file .fname { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'SF Mono', Menlo, monospace; font-size: 12px; }
+  .ftree-file .fmini { font-family: 'SF Mono', Menlo, monospace; font-size: 10.5px; display: flex; gap: 6px; }
+  .ftree-file .fmini .a { color: var(--green); } .ftree-file .fmini .d { color: var(--red); }
+  .ftree-file .check { color: var(--green); }
+  .diff-main { overflow: hidden; display: flex; flex-direction: column; }
+  .diff-file-head {
+    position: sticky; top: 0; display: flex; align-items: center; gap: 12px; padding: 10px 16px;
+    background: var(--bg-lighter); border-bottom: 1px solid var(--border); z-index: 3;
+  }
+  .diff-file-head .fpath { font-family: 'SF Mono', Menlo, monospace; font-size: 12.5px; font-weight: 600; }
+  .diff-file-head .stat { margin-left: auto; }
+  .viewed-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-dim); border: 1px solid var(--border); border-radius: 20px; padding: 3px 10px; }
+  .diff-table { width: 100%; border-collapse: collapse; font-family: 'SF Mono', Menlo, monospace; font-size: 12.5px; }
+  .diff-table td { padding: 1px 0; vertical-align: top; }
+  .gutter { width: 44px; text-align: right; padding: 1px 10px 1px 0 !important; color: var(--fg-dim); user-select: none; opacity: 0.65; }
+  .diff-code { padding-left: 14px !important; white-space: pre; padding-right: 16px !important; }
+  tr.add .diff-code { background: var(--diff-add-bg); box-shadow: inset 3px 0 0 var(--diff-add-gutter); }
+  tr.add .gutter.new { background: var(--diff-add-bg); }
+  tr.del .diff-code { background: var(--diff-del-bg); box-shadow: inset 3px 0 0 var(--diff-del-gutter); }
+  tr.del .gutter.old { background: var(--diff-del-bg); }
+  .hunk td { background: var(--accent-soft); color: var(--accent); padding: 5px 14px; font-size: 11.5px; }
+  .signp { color: var(--green); } .signm { color: var(--red); }
+  .diff-foot { margin-top: auto; display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--border); background: var(--bg-panel); font-size: 11px; color: var(--fg-dim); }
+  .diff-foot .kbd { margin-right: 3px; }
+  /* ===== clickable files ===== */
+  .ck-layout { display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }
+  .terminal-out {
+    background: var(--bg-lighter); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px;
+    font-family: 'SF Mono', Menlo, monospace; font-size: 12.5px; line-height: 1.85; color: var(--fg-muted);
+  }
+  .terminal-out .pfx { color: var(--green); }
+  .flink {
+    color: var(--accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
+    text-underline-offset: 2px; cursor: pointer; position: relative;
+  }
+  .flink:hover { text-decoration-color: var(--accent); background: var(--accent-soft); border-radius: 3px; }
+  .flink .badge {
+    font-family: -apple-system, system-ui; font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
+    text-transform: uppercase; vertical-align: super; margin-left: 3px; opacity: 0.7;
+  }
+  .ctxmenu {
+    width: 250px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 11px;
+    box-shadow: var(--shadow-lg); padding: 6px; position: relative;
+  }
+  .ctxmenu .ctx-head {
+    font-size: 10.5px; color: var(--fg-dim); font-family: 'SF Mono', Menlo, monospace;
+    padding: 7px 10px 8px; border-bottom: 1px solid var(--border); margin-bottom: 5px;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+  .ctx-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 7px; font-size: 13px; cursor: pointer; color: var(--fg); }
+  .ctx-item:hover { background: var(--accent); color: var(--accent-fg); }
+  .ctx-item:hover .meta { color: var(--accent-fg); opacity: 0.8; }
+  .ctx-item:hover svg { color: var(--accent-fg); }
+  .ctx-item svg { color: var(--fg-muted); flex-shrink: 0; }
+  .ctx-item .meta { margin-left: auto; font-size: 10.5px; color: var(--fg-dim); font-family: 'SF Mono', Menlo, monospace; }
+  .ctx-item.primary { color: var(--accent); }
+  .ctx-sep { height: 1px; background: var(--border); margin: 5px 6px; }
+  .ck-note { font-size: 13px; color: var(--fg-muted); margin-top: 16px; line-height: 1.6; }
+  .ck-note b { color: var(--fg); }
+  .route-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 12.5px; }
+  .route-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-dim); padding: 8px 12px; border-bottom: 1px solid var(--border); font-weight: 700; }
+  .route-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--fg-muted); }
+  .route-table td .ext { font-family: 'SF Mono', Menlo, monospace; color: var(--accent); }
+  .route-table td b { color: var(--fg); font-weight: 600; }
+  /* ===== alternative + close ===== */
+  .alt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }
+  .alt-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; }
+  .alt-card.rec { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); }
+  .alt-card h4 { font-size: 15px; margin-bottom: 4px; display: flex; align-items: center; gap: 9px; }
+  .alt-card .rectag { font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-fg); background: var(--accent); padding: 2px 8px; border-radius: 20px; }
+  .alt-card .sub { font-size: 12.5px; color: var(--fg-dim); margin-bottom: 13px; }
+  .alt-card ul { list-style: none; }
+  .alt-card li { font-size: 13px; color: var(--fg-muted); padding: 5px 0 5px 22px; position: relative; line-height: 1.5; }
+  .alt-card li::before { content: '→'; position: absolute; left: 0; color: var(--accent); }
+  .alt-card li.con::before { content: '×'; color: var(--red); }
+  .roadmap { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
+  .phase { display: flex; gap: 16px; padding: 16px 18px; background: var(--bg-card); border: 1px solid var(--border); }
+  .phase:first-child { border-radius: 12px 12px 0 0; }
+  .phase:last-child { border-radius: 0 0 12px 12px; }
+  .phase .pn { font-family: 'SF Mono', Menlo, monospace; font-size: 13px; font-weight: 700; color: var(--accent); flex-shrink: 0; width: 64px; }
+  .phase .pbody h4 { font-size: 14px; margin-bottom: 4px; }
+  .phase .pbody p { font-size: 12.5px; color: var(--fg-muted); }
+  .phase .pbody code { font-family: 'SF Mono', Menlo, monospace; font-size: 11.5px; color: var(--fg-dim); background: var(--code-bg); padding: 1px 5px; border-radius: 4px; }
+  footer { padding: 50px 0 0; border-top: 1px solid var(--border); color: var(--fg-dim); font-size: 12.5px; }
+  footer a { color: var(--fg-muted); }
+  @media (max-width: 900px) {
+    .hub-cols, .ck-layout, .alt-grid { grid-template-columns: 1fr; }
+    .md-layout { grid-template-columns: 1fr; } .outline, .cm-rail { display: none; }
+    .diff-layout { grid-template-columns: 1fr; } .ftree { display: none; }
+    .hero h1 { font-size: 32px; }
+  }
+</style>
+</head>
+<body>
+<div class="topbar">
+  <div class="brand">CTM <b>Review</b> — Redesign Proposal</div>
+  <nav>
+    <a href="#audit">Issues</a>
+    <a href="#hub">Hub</a>
+    <a href="#md">Markdown</a>
+    <a href="#diff">Diff</a>
+    <a href="#click">Clickable files</a>
+    <a href="#alt">Alternative</a>
+    <a href="#plan">Plan</a>
+  </nav>
+  <div class="spacer"></div>
+  <div class="toggle" onclick="toggleTheme()">
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19"/></svg>
+    <span id="themeLabel">Dark</span>
+  </div>
+</div>
+<div class="wrap">
+  <div class="hero">
+    <div class="eyebrow">Design proposal · v1</div>
+    <h1>The review page should feel like <em>one place</em>, not three.</h1>
+    <p class="lead">
+      Today the Review tab is really three disconnected surfaces — a markdown reviewer, a source-diff tool,
+      and session-transcript review — with no shared home, almost no discovery, and viewers that read as plain text.
+      This proposal unifies <b>markdown</b> and <b>source-diff</b> review under a single, searchable hub, gives both
+      viewers a proper reading experience, and makes file references in your sessions actually clickable.
+    </p>
+    <div class="meta-row">
+      <div><b>Scope</b> · Review Hub + viewers + clickable files</div>
+      <div><b>Stays put</b> · Session-transcript review lives with Sessions</div>
+      <div><b>Theme</b> · native CTM tokens — toggle top-right</div>
+    </div>
+  </div>
+  <!-- ===================== AUDIT ===================== -->
+  <section id="audit">
+    <div class="sec-head"><span class="sec-num">01</span><h2>What's broken today</h2></div>
+    <p class="sec-sub">Each issue below is traced to the responsible code so the redesign targets causes, not symptoms.</p>
+    <div class="issues">
+      <div class="issue">
+        <span class="tag">Navigation</span>
+        <h3>You can't tell where you are</h3>
+        <p><code>#review</code> aliases to <code>codereview</code>; markdown and source-diff <em>share</em> one panel while transcript review is another. No breadcrumb, no shared shell.</p>
+        <div class="fix"><b>FIX</b><span>One shared header with a live breadcrumb across both viewers.</span></div>
+      </div>
+      <div class="issue">
+        <span class="tag">Discovery</span>
+        <h3>No way to find what to review</h3>
+        <p>Only <em>code</em> has a chooser (<code>CR.showProjectList</code>). Markdown review has <b>no browse or search at all</b> — it only opens from a link.</p>
+        <div class="fix"><b>FIX</b><span>A Review Hub home: global search + Changed-Code and Documents discovery.</span></div>
+      </div>
+      <div class="issue">
+        <span class="tag">Markdown</span>
+        <h3>The doc viewer reads flat</h3>
+        <p><code>marked</code>+DOMPurify with <b>no syntax highlighting</b>, faint inline-code, hover-hidden comment buttons, and an outline that shows raw headings only.</p>
+        <div class="fix"><b>FIX</b><span>Highlighted code, real reading measure, outline scroll-spy, visible affordances.</span></div>
+      </div>
+      <div class="issue">
+        <span class="tag">Source diff</span>
+        <h3>The good diff tool is buried</h3>
+        <p>Custom parser, <b>no highlighting</b>, 8%-opacity colors, a single base-ref <code>&lt;select&gt;</code>, and no project / worktree switching inside the viewer.</p>
+        <div class="fix"><b>FIX</b><span>In-viewer switcher, searchable file tree, highlighted diffs, keyboard nav.</span></div>
+      </div>
+      <div class="issue">
+        <span class="tag">Clickable files</span>
+        <h3>Links only work for markdown</h3>
+        <p><code>document-review-links.js</code> linkifies only <code>.md</code>/<code>.txt</code>. No <code>.html</code>, no source-code → diff, <b>no right-click menu</b>.</p>
+        <div class="fix"><b>FIX</b><span>Smart left-click by type + a right-click menu with every target.</span></div>
+      </div>
+      <div class="issue" style="--red: var(--green);">
+        <span class="tag" style="color: var(--green); background: var(--success-soft);">Reusable</span>
+        <h3>What's already good</h3>
+        <p>The token system (light + dark), the structured diff/document APIs, and entry points like <code>CR.openReview</code> / <code>selectFile</code> all stay — this is mostly front-end.</p>
+        <div class="fix"><b>KEEP</b><span>No backend rewrite; two small additive endpoints only.</span></div>
+      </div>
+    </div>
+  </section>
+  <!-- ===================== HUB ===================== -->
+  <section id="hub">
+    <div class="sec-head"><span class="sec-num">02</span><h2>The Review Hub — one home</h2></div>
+    <p class="sec-sub">
+      A single landing that answers "what can I review right now?" Search across everything, then drop into the right viewer.
+      <b>Changed Code</b> lists projects and worktrees with live change counts; <b>Documents</b> surfaces markdown that was never discoverable before.
+    </p>
+    <div class="mock">
+      <div class="mock-caption">
+        <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+        <span class="url">localhost:3456/#review</span>
+      </div>
+      <div class="shell-header">
+        <div class="breadcrumb"><span class="crumb active">Review</span></div>
+        <div class="grow"></div>
+        <div class="seg"><button class="on">All</button><button>Code</button><button>Docs</button></div>
+      </div>
+      <div class="hub-body">
+        <div class="hub-bigsearch">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg>
+          <span class="ph">Search projects, worktrees, and documents…</span>
+          <div class="grow"></div>
+          <span class="kbd">⌘K</span>
+        </div>
+        <div class="hub-cols">
+          <div>
+            <div class="col-head"><h4>Changed Code</h4><span class="count">4 with changes</span></div>
+            <div class="proj-card">
+              <div class="icn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 7v10l9 4 9-4V7"/></svg></div>
+              <div class="body">
+                <div class="name"><span class="star">★</span> tools <span class="branch-chip">⎇ perf-offload-onmain-git</span></div>
+                <div class="sub">~/ws/tools · worktree · updated 4m ago</div>
+              </div>
+              <div class="stat"><span class="filecount">12 files</span><span class="add">+486</span><span class="del">−171</span></div>
+            </div>
+            <div class="proj-card">
+              <div class="icn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 7v10l9 4 9-4V7"/></svg></div>
+              <div class="body">
+                <div class="name">tools <span class="branch-chip">⎇ coding-2</span></div>
+                <div class="sub">~/ws/tools/.claude/worktrees/coding-2 · worktree</div>
+              </div>
+              <div class="stat"><span class="filecount">3 files</span><span class="add">+58</span><span class="del">−9</span></div>
+            </div>
+            <div class="proj-card">
+              <div class="icn"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7l9-4 9 4-9 4-9-4z"/><path d="M3 7v10l9 4 9-4V7"/></svg></div>
+              <div class="body">
+                <div class="name">wall-e <span class="branch-chip">⎇ slack-dedup-weather</span></div>
+                <div class="sub">~/ws/tools/wall-e · staged + working</div>
+              </div>
+              <div class="stat"><span class="filecount">7 files</span><span class="add">+203</span><span class="del">−44</span></div>
+            </div>
+          </div>
+          <div>
+            <div class="col-head"><h4>Documents</h4><span class="count">recent + in repo</span></div>
+            <div class="doc-row">
+              <span class="di"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg></span>
+              <div class="dn">architecture.md</div>
+              <span class="dp">wall-e/docs</span>
+            </div>
+            <div class="doc-row">
+              <span class="di"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg></span>
+              <div class="dn">review-redesign-proposal.md</div>
+              <span class="dp">ctm/docs</span>
+            </div>
+            <div class="doc-row">
+              <span class="di"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg></span>
+              <div class="dn">CLAUDE.md</div>
+              <span class="dp">ctm</span>
+            </div>
+            <div class="doc-row">
+              <span class="di"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg></span>
+              <div class="dn">README.md</div>
+              <span class="dp">create-walle</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ===================== MD REVIEWER ===================== -->
+  <section id="md">
+    <div class="sec-head"><span class="sec-num">03</span><h2>Markdown reviewer, rebuilt for reading</h2></div>
+    <p class="sec-sub">
+      A three-pane reading view: a parsed-heading <b>outline</b> with scroll-spy on the left, a comfortable
+      reading column with <b>syntax-highlighted code</b> and crisp inline-code in the middle, and a <b>comment rail</b> on the right.
+      Rendered / Source / Split toggle lives in the shared header.
+    </p>
+    <div class="mock">
+      <div class="mock-caption">
+        <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+        <span class="url">localhost:3456/#review&type=doc&path=wall-e/docs/architecture.md</span>
+      </div>
+      <div class="shell-header">
+        <div class="breadcrumb">
+          <span class="crumb">Review</span><span class="sep">›</span>
+          <span class="crumb">Documents</span><span class="sep">›</span>
+          <span class="crumb active">architecture.md</span>
+        </div>
+        <div class="grow"></div>
+        <div class="seg"><button class="on">Rendered</button><button>Source</button><button>Split</button></div>
+        <div class="pill-sel">3 comments</div>
+      </div>
+      <div class="md-layout">
+        <aside class="outline">
+          <div class="ol-title">Outline</div>
+          <span class="ol-item active">Architecture</span>
+          <span class="ol-item l2 active">The loops</span>
+          <span class="ol-item l3">Main loop</span>
+          <span class="ol-item l3">Scheduler</span>
+          <span class="ol-item l2">Brain DB</span>
+          <span class="ol-item l2">Skills &amp; channels</span>
+          <span class="ol-item">Non-goals</span>
+          <span class="ol-item l2">Anti-patterns</span>
+        </aside>
+        <div class="md-reading">
+          <div class="doc">
+            <h1>Architecture</h1>
+            <p class="tagline">How Wall-E's loops, brain, and scheduler fit together.</p>
+            <h2>The loops</h2>
+            <p>Wall-E runs two cooperative loops. The <strong>main loop</strong> owns the database writes and never
+            blocks longer than a single bounded slice; long jobs are sliced via the cooperative scheduler so the
+            high lane (<code>checkpointWal</code>, telemetry) is never starved by a low-lane import.</p>
+            <div class="codeblock">
+              <div class="cb-head"><span>scheduler.js</span><span>javascript</span></div>
+<pre><span class="k">async function</span> <span class="fn">runSlice</span>(job, <span class="t">budgetMs</span>) {
+  <span class="k">const</span> deadline = now() + <span class="t">budgetMs</span>;
+  <span class="k">while</span> (job.<span class="pr">hasWork</span>() &amp;&amp; now() &lt; deadline) {
+    <span class="k">await</span> job.<span class="fn">step</span>();           <span class="c">// one unit, then yield</span>
+  }
+  <span class="k">return</span> job.<span class="pr">done</span> ? <span class="n">'done'</span> : <span class="n">'reschedule'</span>;
+}</pre>
+            </div>
+            <p>Coordinate through data, never a manager-of-managers — see <code>docs/architecture.md</code> "Non-goals".</p>
+            <ul>
+              <li>Single db-owner write worker; readers use a separate pool.</li>
+              <li>Cold/large imports defer row writes behind a watermark.</li>
+            </ul>
+          </div>
+        </div>
+        <aside class="cm-rail">
+          <div class="cr-title">Comments</div>
+          <div class="cmt">
+            <div class="who">◆ You</div>
+            <div class="what">Should we name the slice budget per-lane instead of a global constant?</div>
+            <div class="anchor">¶ The loops · L14</div>
+          </div>
+          <div class="cmt">
+            <div class="who">◆ You</div>
+            <div class="what">Link the Non-goals section here so reviewers jump straight to it.</div>
+            <div class="anchor">¶ runSlice() · L21</div>
+          </div>
+          <div class="addcmt">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
+            Add a comment on the selected block
+          </div>
+        </aside>
+      </div>
+    </div>
+  </section>
+  <!-- ===================== DIFF ===================== -->
+  <section id="diff">
+    <div class="sec-head"><span class="sec-num">04</span><h2>Source diff, brought to the surface</h2></div>
+    <p class="sec-sub">
+      The diff engine is good — it just needs navigation. The base-ref <code>&lt;select&gt;</code> becomes a
+      <b>breadcrumb switcher</b> (project ▸ worktree ▸ base), the file list becomes a <b>searchable tree</b> with
+      add/del badges and a tree/list toggle, diff lines get <b>syntax highlighting</b> and stronger colors, and
+      <b>keyboard nav</b> moves between files and hunks.
+    </p>
+    <div class="mock">
+      <div class="mock-caption">
+        <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+        <span class="url">localhost:3456/#review&project=~/ws/tools&base=--vs-main</span>
+      </div>
+      <div class="shell-header">
+        <div class="breadcrumb">
+          <span class="crumb">Review</span><span class="sep">›</span>
+          <span class="pill-sel">tools
+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg>
+          </span>
+          <span class="sep">›</span>
+          <span class="pill-sel">⎇ perf-offload-onmain-git
+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg>
+          </span>
+          <span class="sep">›</span>
+          <span class="pill-sel">vs main
+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M6 9l6 6 6-6"/></svg>
+          </span>
+        </div>
+        <div class="grow"></div>
+        <div class="seg"><button class="on">Unified</button><button>Split</button></div>
+      </div>
+      <div class="diff-layout">
+        <aside class="ftree">
+          <div class="ftree-top">
+            <div class="searchbox">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg>
+              Filter files…
+            </div>
+            <div class="ftree-tools">
+              <div class="seg"><button class="on">Tree</button><button>List</button></div>
+              <div class="grow"></div>
+              <span>12 files · <span style="color:var(--green)">+486</span> <span style="color:var(--red)">−171</span></span>
+            </div>
+          </div>
+          <div class="ftree-list">
+            <div class="ftree-folder">claude-task-manager/</div>
+            <div class="ftree-file active">
+              <span class="fdot" style="background:var(--green)"></span>
+              <span class="fname">server.js</span>
+              <span class="fmini"><span class="a">+142</span><span class="d">−38</span></span>
+            </div>
+            <div class="ftree-file">
+              <span class="fdot" style="background:var(--accent)"></span>
+              <span class="fname">db.js</span>
+              <span class="fmini"><span class="a">+64</span><span class="d">−12</span></span>
+            </div>
+            <div class="ftree-file">
+              <span class="check"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M20 6L9 17l-5-5"/></svg></span>
+              <span class="fname" style="opacity:.55">api-reviews.js</span>
+              <span class="fmini"><span class="a">+9</span></span>
+            </div>
+            <div class="ftree-folder">claude-task-manager/lib/</div>
+            <div class="ftree-file">
+              <span class="fdot" style="background:var(--green)"></span>
+              <span class="fname">db-owner-cooperative-scheduler.js</span>
+              <span class="fmini"><span class="a">+188</span></span>
+            </div>
+            <div class="ftree-folder">wall-e/</div>
+            <div class="ftree-file">
+              <span class="fdot" style="background:var(--accent)"></span>
+              <span class="fname">run.js</span>
+              <span class="fmini"><span class="a">+31</span><span class="d">−27</span></span>
+            </div>
+            <div class="ftree-file">
+              <span class="fdot" style="background:var(--red)"></span>
+              <span class="fname">legacy-dual-write.js</span>
+              <span class="fmini"><span class="d">−54</span></span>
+            </div>
+          </div>
+        </aside>
+        <div class="diff-main">
+          <div class="diff-file-head">
+            <span class="fpath">claude-task-manager/server.js</span>
+            <span class="viewed-pill"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> Viewed</span>
+            <span class="stat"><span class="add">+142</span><span class="del">−38</span></span>
+          </div>
+          <table class="diff-table">
+            <tr class="hunk"><td colspan="3">@@ -24098,7 +24098,9 @@ function buildSessionEnv(session)</td></tr>
+            <tr><td class="gutter old">24098</td><td class="gutter new">24098</td><td class="diff-code"><span class="c">  // prepend wall-e bin so wrapped CLIs win on PATH</span></td></tr>
+            <tr><td class="gutter old">24099</td><td class="gutter new">24099</td><td class="diff-code">  <span class="k">const</span> env = { ...<span class="pr">process</span>.<span class="pr">env</span> };</td></tr>
+            <tr class="del"><td class="gutter old">24100</td><td class="gutter new"></td><td class="diff-code"><span class="signm">-</span> env.<span class="pr">PATH</span> = <span class="pr">process</span>.<span class="pr">env</span>.<span class="pr">PATH</span>;</td></tr>
+            <tr class="add"><td class="gutter old"></td><td class="gutter new">24100</td><td class="diff-code"><span class="signp">+</span> <span class="k">const</span> walleBin = <span class="fn">join</span>(<span class="pr">os</span>.<span class="fn">homedir</span>(), <span class="s">'.walle/bin'</span>);</td></tr>
+            <tr class="add"><td class="gutter old"></td><td class="gutter new">24101</td><td class="diff-code"><span class="signp">+</span> env.<span class="pr">PATH</span> = <span class="s">`${walleBin}:${process.env.PATH}`</span>;</td></tr>
+            <tr><td class="gutter old">24101</td><td class="gutter new">24102</td><td class="diff-code">  <span class="k">return</span> env;</td></tr>
+            <tr><td class="gutter old">24102</td><td class="gutter new">24103</td><td class="diff-code">}</td></tr>
+            <tr class="hunk"><td colspan="3">@@ -24180,4 +24181,8 @@ async function spawnSessionPty(opts)</td></tr>
+            <tr><td class="gutter old">24180</td><td class="gutter new">24181</td><td class="diff-code">  <span class="k">const</span> pty = <span class="fn">spawn</span>(shell, args, { env });</td></tr>
+            <tr class="add"><td class="gutter old"></td><td class="gutter new">24182</td><td class="diff-code"><span class="signp">+</span> pty.<span class="fn">on</span>(<span class="s">'exit'</span>, () =&gt; <span class="fn">retireBlob</span>(opts.<span class="pr">id</span>));</td></tr>
+            <tr><td class="gutter old">24181</td><td class="gutter new">24183</td><td class="diff-code">  <span class="k">return</span> pty;</td></tr>
+          </table>
+          <div class="diff-foot">
+            <span><span class="kbd">j</span><span class="kbd">k</span> next / prev file</span>
+            <span><span class="kbd">n</span><span class="kbd">p</span> next / prev hunk</span>
+            <span><span class="kbd">v</span> mark viewed</span>
+            <span><span class="kbd">c</span> comment on line</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- ===================== CLICKABLE FILES ===================== -->
+  <section id="click">
+    <div class="sec-head"><span class="sec-num">05</span><h2>Every file reference becomes a door</h2></div>
+    <p class="sec-sub">
+      CTM already linkifies <code>.md</code> in session output. We generalize that into a <b>file router</b>:
+      left-click opens by type, and right-click offers every destination explicitly. An <code>.html</code> file opens
+      in a new browser tab, a doc opens the markdown reviewer, and source code jumps to the diff focused on that file.
+    </p>
+    <div class="ck-layout">
+      <div>
+        <div class="mock">
+          <div class="mock-caption">
+            <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+            <span class="url">session summary · changed files are live</span>
+          </div>
+          <div class="terminal-out">
+            <div><span class="pfx">✓</span> Wrote design doc to <span class="flink">docs/review-redesign-proposal.html<span class="badge">html</span></span></div>
+            <div><span class="pfx">✓</span> Updated <span class="flink">claude-task-manager/server.js<span class="badge">diff</span></span> <span style="color:var(--green)">+142</span> <span style="color:var(--red)">−38</span></div>
+            <div><span class="pfx">✓</span> New module <span class="flink">public/js/file-context-menu.js<span class="badge">diff</span></span></div>
+            <div style="color:var(--fg-dim)">  See <span class="flink">wall-e/docs/architecture.md<span class="badge">md</span></span> for the loop contract.</div>
+            <div style="margin-top:8px;color:var(--fg-dim)">Right-click any path for all targets →</div>
+          </div>
+        </div>
+        <table class="route-table">
+          <thead><tr><th>File type</th><th>Left-click opens</th><th>Route</th></tr></thead>
+          <tbody>
+            <tr><td><span class="ext">.html</span></td><td><b>New browser tab</b></td><td class="mono" style="font-size:11px;color:var(--fg-dim)">/api/reviews/serve-html</td></tr>
+            <tr><td><span class="ext">.md .txt</span></td><td><b>Markdown reviewer</b></td><td class="mono" style="font-size:11px;color:var(--fg-dim)">#review&amp;type=doc&amp;path=…</td></tr>
+            <tr><td><span class="ext">.js .py .ts …</span></td><td><b>Source diff at that file</b></td><td class="mono" style="font-size:11px;color:var(--fg-dim)">#review&amp;project=…&amp;file=…</td></tr>
+          </tbody>
+        </table>
+      </div>
+      <div>
+        <div class="ctxmenu">
+          <div class="ctx-head">claude-task-manager/server.js</div>
+          <div class="ctx-item primary">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3h7v7H3zM14 14h7v7h-7zM14 3h7v7h-7zM3 14h7v7H3z"/></svg>
+            Open in diff
+            <span class="meta">↵</span>
+          </div>
+          <div class="ctx-item">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/></svg>
+            Open raw file
+          </div>
+          <div class="ctx-item">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7M7 7h10v10"/></svg>
+            Open in new tab
+          </div>
+          <div class="ctx-sep"></div>
+          <div class="ctx-item">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></svg>
+            Copy path
+            <span class="meta">⌘C</span>
+          </div>
+          <div class="ctx-item">
+            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7h5l2-3h4l2 3h5v13H3z"/></svg>
+            Reveal in Finder
+          </div>
+        </div>
+        <p class="ck-note">
+          The decision core is a <b>pure, unit-testable module</b> — exactly like the existing
+          <code class="mono" style="font-size:11px">screenshot-router.js</code>. A missing router degrades safely
+          to "open raw", so links never break.
+        </p>
+      </div>
+    </div>
+  </section>
+  <!-- ===================== ALTERNATIVE ===================== -->
+  <section id="alt">
+    <div class="sec-head"><span class="sec-num">06</span><h2>The structural choice</h2></div>
+    <p class="sec-sub">Both fix navigation. The recommendation is the Hub; the lighter option is kept here for comparison.</p>
+    <div class="alt-grid">
+      <div class="alt-card rec">
+        <h4>Unified Review Hub <span class="rectag">Recommended</span></h4>
+        <div class="sub">A real discovery home in front of both viewers.</div>
+        <ul>
+          <li>Fixes discovery <em>and</em> navigation at once</li>
+          <li>Markdown becomes browsable for the first time</li>
+          <li>Search across projects, worktrees, and docs</li>
+          <li class="con">Larger change — a new home view to build</li>
+        </ul>
+      </div>
+      <div class="alt-card">
+        <h4>Shared shell only</h4>
+        <div class="sub">Keep today's panels; add one consistent header.</div>
+        <ul>
+          <li>Lower risk, smaller diff</li>
+          <li>Breadcrumb + switcher fixes "where am I"</li>
+          <li class="con">Markdown still has no discovery</li>
+          <li class="con">No single place to start a review</li>
+        </ul>
+      </div>
+    </div>
+  </section>
+  <!-- ===================== PLAN ===================== -->
+  <section id="plan">
+    <div class="sec-head"><span class="sec-num">07</span><h2>How it ships</h2></div>
+    <p class="sec-sub">Front-end heavy, two small additive endpoints, validated on a /ctm-dev instance — never the primary.</p>
+    <div class="roadmap">
+      <div class="phase">
+        <div class="pn">A</div>
+        <div class="pbody"><h4>Hub + shared shell</h4><p>New <code>renderReviewHub()</code> home and a shared header wrapping both viewers in <code>reviews.js</code>. Transcript review untouched.</p></div>
+      </div>
+      <div class="phase">
+        <div class="pn">B</div>
+        <div class="pbody"><h4>Viewer quality</h4><p>Add <code>highlight.js</code> (alongside <code>marked</code>/<code>DOMPurify</code>); restyle diff + markdown in <code>reviews.css</code>; file-tree search + keyboard nav.</p></div>
+      </div>
+      <div class="phase">
+        <div class="pn">C</div>
+        <div class="pbody"><h4>Clickable files</h4><p>Generalize <code>document-review-links.js</code>; new pure <code>file-context-menu.js</code>; deep-link source via <code>&amp;file=</code>.</p></div>
+      </div>
+      <div class="phase">
+        <div class="pn">D</div>
+        <div class="pbody"><h4>Backend (additive)</h4><p><code>api-reviews.js</code>: document-discovery list + path-validated HTML serve. No rewrite of the diff/document engines.</p></div>
+      </div>
+    </div>
+  </section>
+  <footer>
+    CTM Review redesign proposal · self-contained mock using the live app theme tokens ·
+    toggle <a href="javascript:toggleTheme()">dark / light</a> to preview both ·
+    next step → implement Phase A–D on <a href="javascript:void(0)">/ctm-dev</a>.
+  </footer>
+</div>
+<script>
+  function toggleTheme() {
+    const html = document.documentElement;
+    const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+    html.setAttribute('data-theme', next);
+    document.getElementById('themeLabel').textContent = next === 'dark' ? 'Dark' : 'Light';
+  }
+  // subtle staggered reveal on load
+  document.querySelectorAll('section, .hero').forEach((el, i) => {
+    el.style.opacity = '0'; el.style.transform = 'translateY(10px)';
+    el.style.transition = 'opacity .5s ease, transform .5s ease';
+    setTimeout(() => { el.style.opacity = '1'; el.style.transform = 'none'; }, 60 + i * 55);
+  });
+</script>
+</body>
+</html>