diff --git a/README.md b/README.md
index c0e8e24b..dd10741a 100644
--- a/README.md
+++ b/README.md
@@ -252,8 +252,8 @@ See [Development and Deployment](docs/DEPLOYMENT.md) for Docker, Compose, Ollama
 - [Mnemon Memory Harness](docs/framework/HARNESS.md) — skill-first memory harness design and installation guideline
 - [Harness Install Guide](docs/framework/INSTALL.md) — agent-facing installation contract
 - [Memory Guideline](docs/framework/GUIDELINE.md) — recall/writeback judgment policy
-- [Self-Evolution Harness Design](docs/design/SELF_EVOLUTION_HARNESS.md) — consolidated v0.2 architecture for install, memory loop, skill evolution, and risk control
-- [Agent Systems Research](docs/research/agent-systems/README.md) — condensed source index for memory and self-evolution research
+- [Self-Evolution Harness Design](docs/design/self-evolution-harness/SELF_EVOLUTION_HARNESS.md) — consolidated v0.2 architecture for install, memory loop, skill evolution, and risk control
+- [Agent Systems Research](docs/design/self-evolution-harness/research/agent-systems/README.md) — condensed source index for memory and self-evolution research
 - [Design & Architecture](docs/DESIGN.md) — current engine architecture, algorithms, integration design
 - [Usage & Reference](docs/USAGE.md) — CLI commands, embedding support, architecture overview
 - [Architecture Diagrams](docs/diagrams/) — system architecture, pipelines, lifecycle management
diff --git a/docs/DESIGN.md b/docs/DESIGN.md
index ef50df3f..feea24f0 100644
--- a/docs/DESIGN.md
+++ b/docs/DESIGN.md
@@ -6,7 +6,7 @@
 
 Mnemon is a persistent memory system designed for LLM agents. It adopts the **LLM-Supervised** pattern: the host LLM acts as external orchestrator of a standalone memory binary through symbolic CLI interfaces, while the binary handles deterministic storage, graph indexing, and lifecycle management. Memory is organized as a four-graph knowledge structure with temporal, entity, causal, and semantic edges. Implemented as a single Go binary + SQLite, with no external API dependencies.
 
-This document describes the current Mnemon binary and engine architecture. The broader memory harness doctrine lives in [Mnemon Memory Harness](framework/HARNESS.md), with installable runtime artifacts in [INSTALL.md](framework/INSTALL.md) and [GUIDELINE.md](framework/GUIDELINE.md). The v0.2 self-evolution architecture is consolidated in [Self-Evolution Harness Design](design/SELF_EVOLUTION_HARNESS.md).
+This document describes the current Mnemon binary and engine architecture. The broader memory harness doctrine lives in [Mnemon Memory Harness](framework/HARNESS.md), with installable runtime artifacts in [INSTALL.md](framework/INSTALL.md) and [GUIDELINE.md](framework/GUIDELINE.md). The v0.2 self-evolution architecture is consolidated in [Self-Evolution Harness Design](design/self-evolution-harness/SELF_EVOLUTION_HARNESS.md).
 
 ---
 
@@ -40,7 +40,7 @@ Effective Importance (EI) decay formula, immunity rules, auto-pruning, GC comman
 
 Markdown-installable runtime integration: `SKILL.md`, `INSTALL.md`, `GUIDELINE.md`, the four hook phases (Prime, Remind, Nudge, Compact), agent-led memory decisions, optional setup automation, and lightweight markdown self-evolution.
 
-### [Self-Evolution Harness](design/SELF_EVOLUTION_HARNESS.md)
+### [Self-Evolution Harness](design/self-evolution-harness/SELF_EVOLUTION_HARNESS.md)
 
 The v0.2 architecture for agent-agnostic installation, canonical `.mnemon` filesystem, memory consolidation loop, skill evolution, optional maintenance runner, and proposal-first risk control.
 
diff --git a/docs/design/SELF_EVOLUTION_HARNESS.md b/docs/design/self-evolution-harness/SELF_EVOLUTION_HARNESS.md
similarity index 98%
rename from docs/design/SELF_EVOLUTION_HARNESS.md
rename to docs/design/self-evolution-harness/SELF_EVOLUTION_HARNESS.md
index f7429f5a..23e9aa78 100644
--- a/docs/design/SELF_EVOLUTION_HARNESS.md
+++ b/docs/design/self-evolution-harness/SELF_EVOLUTION_HARNESS.md
@@ -2,7 +2,7 @@
 
 本文档是 Mnemon self-evolution harness 的唯一核心设计入口。它替代此前分散在 `docs/design/self-evolution-harness/` 下的多份分篇设计，并把研究材料浓缩为架构决策所需的摘要。
 
-交互式架构展示保留在 [architecture-site.html](self-evolution-harness/architecture-site.html)。Issue 入口见 [#10](https://github.com/mnemon-dev/mnemon/issues/10)，初始设计 PR 见 [#9](https://github.com/mnemon-dev/mnemon/pull/9)。
+交互式架构展示保留在 [architecture-site.html](architecture-site.html)。Memory loop MVP 的设计文档见 [memory-loop/README.zh.md](memory-loop/README.zh.md)，双语可视化页面见 [memory-loop/site/index.html](memory-loop/site/index.html)。Issue 入口见 [#10](https://github.com/mnemon-dev/mnemon/issues/10)，初始设计 PR 见 [#9](https://github.com/mnemon-dev/mnemon/pull/9)。
 
 ## 1. 背景与决策
 
@@ -1196,7 +1196,7 @@ Cross-system conclusions:
 5. Background maintenance needs provenance, reports, backups, and hard write boundaries.
 6. Host-specific adapters should be convenience scripts, not the core architecture.
 
-Source provenance is kept in [Agent Systems Research](../research/agent-systems/README.md). Detailed per-system notes were intentionally folded into this synthesis to keep the architecture maintainable.
+Source provenance is kept in [Agent Systems Research](research/agent-systems/README.md). Detailed per-system notes were intentionally folded into this synthesis to keep the architecture maintainable.
 
 ## 18. 成功标准 Success Criteria
 
diff --git a/docs/design/self-evolution-harness/architecture-site.html b/docs/design/self-evolution-harness/architecture-site.html
index b3afe23f..6481f3f1 100644
--- a/docs/design/self-evolution-harness/architecture-site.html
+++ b/docs/design/self-evolution-harness/architecture-site.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="description" content="Interactive visualization of docs/design/SELF_EVOLUTION_HARNESS.md: install, memory loop, skill evolution, and risk control for Mnemon self-evolution harness." />
+  <meta name="description" content="Interactive visualization of docs/design/self-evolution-harness/SELF_EVOLUTION_HARNESS.md: install, memory loop, skill evolution, and risk control for Mnemon self-evolution harness." />
   <title>Mnemon Self-Evolution Harness Architecture</title>
   <style>
     :root {
@@ -1763,7 +1763,7 @@ <h2 data-i18n="sections.levels.title">四个核心部分</h2>
     </section>
 
     <footer class="footer">
-      <p data-i18n="footer">Source doc: docs/design/SELF_EVOLUTION_HARNESS.md. This page is a standalone visualization of the current design.</p>
+      <p data-i18n="footer">Source doc: docs/design/self-evolution-harness/SELF_EVOLUTION_HARNESS.md. This page is a standalone visualization of the current design.</p>
     </footer>
   </main>
 
@@ -2106,7 +2106,7 @@ <h2 data-i18n="sections.levels.title">四个核心部分</h2>
             defaultSafetyBody: "proposal-first；仅 allowlist 内可 apply；每个 durable mutation 都写 report"
           },
           highlight: "高亮",
-          footer: "Source doc: docs/design/SELF_EVOLUTION_HARNESS.md。本页面是当前架构设计的单文件交互式可视化。"
+          footer: "Source doc: docs/design/self-evolution-harness/SELF_EVOLUTION_HARNESS.md。本页面是当前架构设计的单文件交互式可视化。"
         },
         nodes: {
           host: {
@@ -2790,7 +2790,7 @@ <h2 data-i18n="sections.levels.title">四个核心部分</h2>
             defaultSafetyBody: "proposal-first; apply only inside allowlists; write a report for every durable mutation"
           },
           highlight: "Highlight",
-          footer: "Source doc: docs/design/SELF_EVOLUTION_HARNESS.md. This page is a standalone interactive visualization of the current design."
+          footer: "Source doc: docs/design/self-evolution-harness/SELF_EVOLUTION_HARNESS.md. This page is a standalone interactive visualization of the current design."
         },
         nodes: {
           host: {
diff --git a/docs/design/self-evolution-harness/memory-loop-mvp.html b/docs/design/self-evolution-harness/memory-loop-mvp.html
deleted file mode 100644
index cf387002..00000000
--- a/docs/design/self-evolution-harness/memory-loop-mvp.html
+++ /dev/null
@@ -1,802 +0,0 @@
-<!doctype html>
-<html lang="zh-CN">
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="description" content="Mnemon MVP memory loop component map and runtime data flow." />
-  <title>Mnemon MVP Memory Loop</title>
-  <style>
-    :root {
-      color-scheme: light;
-      --bg: #f6f8fb;
-      --ink: #151922;
-      --muted: #667085;
-      --line: #d9e0ea;
-      --panel: #ffffff;
-      --soft: #f1f5f9;
-      --guide: #8062b5;
-      --host: #2f7d55;
-      --hook: #b43d59;
-      --capability: #c26432;
-      --working: #2e67b1;
-      --longterm: #0f8a8a;
-      --shadow: 0 16px 38px rgba(28, 39, 57, 0.1);
-      --radius: 8px;
-    }
-
-    * {
-      box-sizing: border-box;
-    }
-
-    body {
-      margin: 0;
-      min-height: 100vh;
-      background: var(--bg);
-      color: var(--ink);
-      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      line-height: 1.5;
-    }
-
-    button {
-      font: inherit;
-      color: inherit;
-    }
-
-    .shell {
-      width: min(1320px, calc(100vw - 32px));
-      margin: 0 auto;
-    }
-
-    header {
-      padding: 32px 0 22px;
-      border-bottom: 1px solid var(--line);
-      background: rgba(246, 248, 251, 0.96);
-    }
-
-    .hero {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) 360px;
-      gap: 26px;
-      align-items: start;
-    }
-
-    h1 {
-      margin: 0;
-      font-size: 44px;
-      line-height: 1;
-      letter-spacing: 0;
-    }
-
-    .summary {
-      margin: 12px 0 0;
-      max-width: 880px;
-      color: var(--muted);
-      font-size: 15px;
-    }
-
-    .reading {
-      border: 1px solid var(--line);
-      border-radius: var(--radius);
-      background: var(--panel);
-      box-shadow: var(--shadow);
-      overflow: hidden;
-    }
-
-    .reading h2,
-    .section-title h2 {
-      margin: 0;
-      font-size: 17px;
-      letter-spacing: 0;
-    }
-
-    .reading h2 {
-      padding: 13px 14px;
-      border-bottom: 1px solid var(--line);
-      color: var(--host);
-      background: #fbfcfe;
-    }
-
-    .reading ol {
-      margin: 0;
-      padding: 12px 16px 14px 32px;
-      color: var(--muted);
-      font-size: 13px;
-    }
-
-    .reading li + li {
-      margin-top: 6px;
-    }
-
-    main {
-      padding: 22px 0 44px;
-    }
-
-    .section-title {
-      display: flex;
-      justify-content: space-between;
-      gap: 16px;
-      align-items: end;
-      margin: 0 0 10px;
-    }
-
-    .section-title p {
-      margin: 0;
-      max-width: 740px;
-      color: var(--muted);
-      font-size: 13px;
-      text-align: right;
-    }
-
-    .inventory-layout {
-      display: grid;
-      grid-template-columns: 1.1fr 0.9fr;
-      gap: 14px;
-      margin-bottom: 18px;
-    }
-
-    .panel {
-      border: 1px solid var(--line);
-      border-radius: var(--radius);
-      background: var(--panel);
-      box-shadow: var(--shadow);
-      overflow: hidden;
-    }
-
-    .panel-head {
-      padding: 13px 15px;
-      border-bottom: 1px solid var(--line);
-      background: #fbfcfe;
-      color: var(--color);
-      font-size: 15px;
-      font-weight: 800;
-    }
-
-    .core-row {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 1px;
-      background: var(--line);
-    }
-
-    .core {
-      min-height: 150px;
-      padding: 15px;
-      background: #ffffff;
-      border-top: 4px solid var(--color);
-      display: grid;
-      align-content: start;
-      gap: 9px;
-    }
-
-    .core b {
-      color: var(--color);
-      font-size: 16px;
-      line-height: 1.1;
-    }
-
-    .core p,
-    .asset p,
-    .rule p,
-    .detail p,
-    .matrix p {
-      margin: 0;
-      color: var(--muted);
-      font-size: 13px;
-    }
-
-    .asset-list {
-      display: grid;
-      gap: 1px;
-      background: var(--line);
-    }
-
-    .asset {
-      display: grid;
-      grid-template-columns: 120px minmax(0, 1fr);
-      gap: 12px;
-      align-items: start;
-      padding: 12px 14px;
-      background: #ffffff;
-      border-left: 4px solid var(--color);
-    }
-
-    .asset b {
-      color: var(--color);
-      font-size: 13px;
-      line-height: 1.2;
-    }
-
-    .rules {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 12px;
-      margin-bottom: 18px;
-    }
-
-    .rule {
-      padding: 13px 14px;
-      border: 1px solid var(--line);
-      border-left: 4px solid var(--color);
-      border-radius: var(--radius);
-      background: var(--panel);
-    }
-
-    .rule b {
-      display: block;
-      margin-bottom: 5px;
-      color: var(--color);
-      font-size: 14px;
-    }
-
-    .flow-layout {
-      display: grid;
-      grid-template-columns: 260px minmax(0, 1fr);
-      gap: 16px;
-      align-items: start;
-      margin-bottom: 18px;
-    }
-
-    .phase-nav {
-      position: sticky;
-      top: 16px;
-      display: grid;
-      gap: 8px;
-      padding: 10px;
-      border: 1px solid var(--line);
-      border-radius: var(--radius);
-      background: var(--panel);
-      box-shadow: var(--shadow);
-    }
-
-    .phase-nav button {
-      width: 100%;
-      border: 1px solid transparent;
-      border-left: 4px solid var(--color);
-      border-radius: 6px;
-      background: #fbfcfe;
-      padding: 10px;
-      text-align: left;
-      cursor: pointer;
-      display: grid;
-      gap: 4px;
-    }
-
-    .phase-nav button[aria-pressed="true"] {
-      border-color: var(--color);
-      background: color-mix(in srgb, var(--color) 9%, white);
-    }
-
-    .phase-nav strong {
-      font-size: 13px;
-      line-height: 1.15;
-    }
-
-    .phase-nav span {
-      color: var(--muted);
-      font-size: 12px;
-    }
-
-    .phase-view {
-      border: 1px solid var(--line);
-      border-radius: var(--radius);
-      background: var(--panel);
-      box-shadow: var(--shadow);
-      overflow: hidden;
-    }
-
-    .phase-head {
-      display: grid;
-      grid-template-columns: minmax(0, 1fr) auto;
-      gap: 16px;
-      align-items: start;
-      padding: 16px 18px;
-      border-bottom: 1px solid var(--line);
-      background: #fbfcfe;
-    }
-
-    .phase-head h2 {
-      margin: 0;
-      color: var(--color);
-      font-size: 24px;
-      line-height: 1.08;
-      letter-spacing: 0;
-    }
-
-    .phase-head p {
-      margin: 7px 0 0;
-      color: var(--muted);
-      font-size: 14px;
-    }
-
-    .tag {
-      display: inline-flex;
-      align-items: center;
-      min-height: 28px;
-      padding: 4px 9px;
-      border: 1px solid color-mix(in srgb, var(--color) 32%, var(--line));
-      border-radius: 999px;
-      background: color-mix(in srgb, var(--color) 9%, white);
-      color: var(--color);
-      font-size: 12px;
-      font-weight: 800;
-      white-space: nowrap;
-    }
-
-    .diagram-wrap {
-      overflow-x: auto;
-      background:
-        linear-gradient(#edf1f5 1px, transparent 1px),
-        linear-gradient(90deg, #edf1f5 1px, transparent 1px);
-      background-size: 32px 32px;
-    }
-
-    svg.diagram {
-      display: block;
-      width: 100%;
-      min-width: 1080px;
-      height: auto;
-    }
-
-    .details {
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-      gap: 1px;
-      background: var(--line);
-      border-top: 1px solid var(--line);
-    }
-
-    .detail {
-      min-height: 86px;
-      padding: 13px 14px;
-      background: #fbfcfe;
-    }
-
-    .detail b {
-      display: block;
-      margin-bottom: 5px;
-      color: var(--color);
-      font-size: 12px;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-    }
-
-    .matrix {
-      border: 1px solid var(--line);
-      border-radius: var(--radius);
-      background: var(--panel);
-      box-shadow: var(--shadow);
-      overflow: hidden;
-    }
-
-    .matrix-grid {
-      display: grid;
-      grid-template-columns: 150px 170px minmax(0, 1fr) minmax(0, 1fr);
-      gap: 1px;
-      background: var(--line);
-    }
-
-    .matrix-cell {
-      min-height: 58px;
-      padding: 11px 13px;
-      background: #ffffff;
-    }
-
-    .matrix-cell.head {
-      background: #fbfcfe;
-      color: var(--ink);
-      font-size: 12px;
-      font-weight: 800;
-      letter-spacing: 0.06em;
-      text-transform: uppercase;
-    }
-
-    .matrix-cell b {
-      color: var(--color);
-      font-size: 13px;
-    }
-
-    @media (max-width: 1080px) {
-      .hero,
-      .inventory-layout,
-      .flow-layout,
-      .rules {
-        grid-template-columns: 1fr;
-      }
-
-      .section-title {
-        display: block;
-      }
-
-      .section-title p {
-        margin-top: 4px;
-        text-align: left;
-      }
-
-      .phase-nav {
-        position: static;
-        grid-template-columns: repeat(5, minmax(0, 1fr));
-      }
-    }
-
-    @media (max-width: 760px) {
-      .shell {
-        width: min(100vw - 20px, 1320px);
-      }
-
-      h1 {
-        font-size: 34px;
-      }
-
-      .core-row,
-      .details,
-      .phase-nav,
-      .matrix-grid {
-        grid-template-columns: 1fr;
-      }
-
-      .asset {
-        grid-template-columns: 1fr;
-        gap: 4px;
-      }
-
-      .phase-head {
-        grid-template-columns: 1fr;
-      }
-    }
-  </style>
-</head>
-<body>
-  <header>
-    <div class="shell hero">
-      <div>
-        <h1>Memory Loop MVP</h1>
-        <p class="summary">第一版只实现一个清晰的记忆闭环：HostAgent 通过 hook 获得时机，通过 Markdown guide 做判断，通过 memory_get / memory_set / dreaming subagent 调用具体协议，最终在 MEMORY.md 与 Mnemon 之间完成在线读写和离线巩固。</p>
-      </div>
-      <aside class="reading" aria-label="阅读顺序">
-        <h2>阅读顺序</h2>
-        <ol>
-          <li>先看三大核心：HostAgent、MEMORY.md、Mnemon。</li>
-          <li>再看支撑资产：GUIDE、Claude Code setup、hooks、skills、subagent。</li>
-          <li>最后切换阶段，看每个 hook 如何把判断交给 skill 或 subagent。</li>
-        </ol>
-      </aside>
-    </div>
-  </header>
-
-  <main class="shell">
-    <section aria-label="系统组成">
-      <div class="section-title">
-        <h2>System Components</h2>
-        <p>这里先说明哪些东西是系统主体，哪些只是安装、触发、协议或维护资产。</p>
-      </div>
-
-      <div class="inventory-layout">
-        <article class="panel" style="--color: var(--host);">
-          <div class="panel-head">Three Core Parts</div>
-          <div class="core-row">
-            <div class="core" style="--color: var(--host);">
-              <b>HostAgent</b>
-              <p>宿主 Agent 的核心引擎。它运行任务、接收 hook 注入，并根据 GUIDE.md 判断是否加载 skill 或启动 subagent。</p>
-            </div>
-            <div class="core" style="--color: var(--working);">
-              <b>MEMORY.md</b>
-              <p>工作记忆主体。Prime 直接把它加入 system prompt；memory_set.md 负责在线维护它。</p>
-            </div>
-            <div class="core" style="--color: var(--longterm);">
-              <b>Mnemon</b>
-              <p>长期记忆主体。mnemon binary 通过 brew 安装；memory_get.md 和 dreaming subagent 通过协议调用它。</p>
-            </div>
-          </div>
-        </article>
-
-        <article class="panel" style="--color: var(--capability);">
-          <div class="panel-head">Maintained Assets</div>
-          <div class="asset-list">
-            <div class="asset" style="--color: var(--guide);">
-              <b>Guide + setup</b>
-              <p>GUIDE.md 说明何时读写记忆；Claude Code setup scripts 负责把 hook、skill、subagent 挂载到宿主。</p>
-            </div>
-            <div class="asset" style="--color: var(--hook);">
-              <b>Four hooks</b>
-              <p>Prime、Remind、Nudge、Compact 只负责触发时机，不承载记忆协议。</p>
-            </div>
-            <div class="asset" style="--color: var(--capability);">
-              <b>Two skills</b>
-              <p>memory_get.md 绑定 Mnemon recall；memory_set.md 绑定 MEMORY.md 编辑规则。</p>
-            </div>
-            <div class="asset" style="--color: var(--capability);">
-              <b>One subagent</b>
-              <p>dreaming subagent 负责维护任务：巩固、压缩、丢弃和长期写入。</p>
-            </div>
-          </div>
-        </article>
-      </div>
-    </section>
-
-    <section class="rules" aria-label="关键规则">
-      <article class="rule" style="--color: var(--guide);">
-        <b>Guide 只定义判断</b>
-        <p>GUIDE.md 只回答“何时读记忆、何时写记忆、什么值得保留”，不直接绑定 MEMORY.md 或 Mnemon。</p>
-      </article>
-      <article class="rule" style="--color: var(--capability);">
-        <b>Skill 绑定协议</b>
-        <p>memory_get.md 负责把“读记忆”落到 Mnemon recall；memory_set.md 通过 MNEMON_MEMORY_LOOP_DIR 定位并 patch MEMORY.md。</p>
-      </article>
-      <article class="rule" style="--color: var(--working);">
-        <b>Dreaming 做巩固</b>
-        <p>Dreaming 不是普通 hook。它是被 spawn 的维护 subagent，先写 Mnemon，再整理 MEMORY.md。</p>
-      </article>
-    </section>
-
-    <section aria-label="阶段数据流">
-      <div class="section-title">
-        <h2>Runtime Flow</h2>
-        <p>点击左侧阶段，只显示当前阶段的数据流，避免所有箭头同时出现。</p>
-      </div>
-
-      <div class="flow-layout">
-        <nav class="phase-nav" aria-label="阶段导航" id="phase-nav"></nav>
-        <article class="phase-view" id="phase-view" aria-live="polite"></article>
-      </div>
-    </section>
-
-    <section class="matrix" aria-label="职责矩阵">
-      <div class="panel-head" style="--color: var(--host);">Responsibility Matrix</div>
-      <div class="matrix-grid" id="matrix"></div>
-    </section>
-  </main>
-
-  <script>
-    const lanes = {
-      guide: { x: 105, title: "GUIDE.md", sub: "policy", color: "#8062b5" },
-      host: { x: 315, title: "HostAgent", sub: "core engine", color: "#2f7d55" },
-      capability: { x: 555, title: "Capability", sub: "skill / subagent", color: "#c26432" },
-      working: { x: 805, title: "MEMORY.md", sub: "working memory", color: "#2e67b1" },
-      longterm: { x: 1020, title: "Mnemon", sub: "binary + store", color: "#0f8a8a" }
-    };
-
-    const phases = [
-      {
-        id: "prime",
-        title: "Prime",
-        tag: "hook",
-        color: "var(--host)",
-        summary: "Prime 是唯一的直接加载路径：把 MEMORY.md 和 GUIDE.md 加入 HostAgent 的 system prompt。",
-        short: "MEMORY.md + GUIDE.md -> prompt",
-        events: [
-          { kind: "arrow", from: "working", to: "host", y: 96, label: "MEMORY.md content" },
-          { kind: "arrow", from: "guide", to: "host", y: 146, label: "GUIDE.md policy" },
-          { kind: "action", actor: "host", y: 205, label: "start with prompt memory" }
-        ],
-        details: [
-          ["输入", "MEMORY.md + GUIDE.md"],
-          ["执行", "直接加入 system prompt"],
-          ["边界", "不调用 memory_get，不触发 Mnemon recall"]
-        ]
-      },
-      {
-        id: "recall",
-        title: "Remind / Recall",
-        tag: "hook + skill",
-        color: "var(--longterm)",
-        summary: "Remind 只触发读记忆判断；如果需要读取，HostAgent 加载 memory_get.md，并按其中协议调用 Mnemon。",
-        short: "GUIDE -> memory_get.md -> Mnemon",
-        events: [
-          { kind: "arrow", from: "guide", to: "host", y: 82, label: "should read memory?" },
-          { kind: "arrow", from: "host", to: "capability", y: 130, label: "load memory_get.md" },
-          { kind: "arrow", from: "capability", to: "longterm", y: 178, label: "mnemon recall protocol" },
-          { kind: "arrow", from: "longterm", to: "host", y: 226, label: "bounded recall result" }
-        ],
-        details: [
-          ["触发", "Remind hook"],
-          ["执行", "memory_get.md skill 定义 recall 方法"],
-          ["边界", "GUIDE.md 不需要知道长期记忆细节"]
-        ]
-      },
-      {
-        id: "nudge",
-        title: "Nudge / Accumulate",
-        tag: "hook + skill",
-        color: "var(--working)",
-        summary: "Nudge 只触发写记忆判断；如果需要积累，HostAgent 加载 memory_set.md，并按 MNEMON_MEMORY_LOOP_DIR 定位 MEMORY.md。",
-        short: "GUIDE -> memory_set.md -> $DIR/MEMORY.md",
-        events: [
-          { kind: "arrow", from: "guide", to: "host", y: 82, label: "should write memory?" },
-          { kind: "arrow", from: "host", to: "capability", y: 132, label: "load memory_set.md" },
-          { kind: "arrow", from: "capability", to: "working", y: 184, label: "patch MEMORY.md" },
-          { kind: "action", actor: "working", y: 232, label: "small prompt-facing state" }
-        ],
-        details: [
-          ["触发", "Nudge hook"],
-          ["执行", "memory_set.md skill 定义 MEMORY.md 编辑规则"],
-          ["边界", "在线积累不直接写 Mnemon"]
-        ]
-      },
-      {
-        id: "compact",
-        title: "Compact",
-        tag: "hook + skill",
-        color: "var(--working)",
-        summary: "Compact 与 Nudge 共享 memory_set.md，只是触发点在上下文压缩边界前，用来保存即将丢失的重要信息。",
-        short: "pre-compact -> memory_set.md -> $DIR/MEMORY.md",
-        events: [
-          { kind: "arrow", from: "guide", to: "host", y: 82, label: "pre-compact save?" },
-          { kind: "action", actor: "host", y: 130, label: "select important residue" },
-          { kind: "arrow", from: "host", to: "capability", y: 178, label: "load memory_set.md" },
-          { kind: "arrow", from: "capability", to: "working", y: 226, label: "last patch to MEMORY.md" }
-        ],
-        details: [
-          ["触发", "Compact hook"],
-          ["执行", "复用 memory_set.md skill"],
-          ["边界", "不是 dreaming，不做全量压缩和长期写入"]
-        ]
-      },
-      {
-        id: "dreaming",
-        title: "Dreaming",
-        tag: "spawned subagent",
-        color: "var(--capability)",
-        summary: "Dreaming 是专用维护 subagent。每次触发时通过 MNEMON_MEMORY_LOOP_DIR 读取完整 MEMORY.md，按规则写入 Mnemon，并整理工作记忆。",
-        short: "subagent -> Mnemon + MEMORY.md compact",
-        events: [
-          { kind: "arrow", from: "host", to: "capability", y: 78, label: "spawn dreaming subagent" },
-          { kind: "arrow", from: "guide", to: "capability", y: 122, label: "dreaming rules" },
-          { kind: "arrow", from: "working", to: "capability", y: 166, label: "read full MEMORY.md" },
-          { kind: "arrow", from: "capability", to: "longterm", y: 210, label: "write via Mnemon protocol" },
-          { kind: "arrow", from: "capability", to: "working", y: 252, label: "compact / evict MEMORY.md" }
-        ],
-        details: [
-          ["触发", "MEMORY.md 超长、compact 前、主动要求"],
-          ["执行", "spawn 专用 dreaming subagent"],
-          ["边界", "负责巩固和清理，不参与每次在线读写判断"]
-        ]
-      }
-    ];
-
-    const matrixRows = [
-      ["HostAgent", "Core", "运行任务，接收 hook，决定是否加载 skill 或 subagent。", "不拥有记忆存储协议，只执行被安装的能力。", "var(--host)"],
-      ["MEMORY.md", "Core", "作为 working memory 直接进入 system prompt。", "由 memory_set.md 和 dreaming subagent 维护。", "var(--working)"],
-      ["Mnemon", "Core", "作为 long-term memory store 提供 recall 和 write。", "由 mnemon binary + store 承载。", "var(--longterm)"],
-      ["env.sh", "Config", "定义 MNEMON_MEMORY_LOOP_ENV、MNEMON_MEMORY_LOOP_DIR 和 memory 阈值。", "作为运行配置入口，由 setup 安装并可手动调整。", "var(--guide)"],
-      ["GUIDE.md", "Manual", "说明何时读写记忆、什么值得保留。", "只定义判断原则，不绑定存储目标。", "var(--guide)"],
-      ["setup/claude-code", "Setup", "把四个 hook、两个 skill、dreaming subagent 和 memory 文件安装到 Claude Code。", "只负责挂载，并设置 MNEMON_MEMORY_LOOP_DIR。", "var(--guide)"],
-      ["memory_get.md", "Skill", "读记忆能力入口。", "绑定 Mnemon recall 协议，尊重 MNEMON_MEMORY_LOOP_DIR。", "var(--capability)"],
-      ["memory_set.md", "Skill", "写工作记忆能力入口。", "通过 MNEMON_MEMORY_LOOP_DIR 绑定 MEMORY.md 编辑规则。", "var(--capability)"],
-      ["dreaming", "Subagent", "维护、巩固和清理工作记忆。", "通过 MNEMON_MEMORY_LOOP_DIR 绑定 Mnemon write 与 MEMORY.md compact / eviction。", "var(--capability)"]
-    ];
-
-    let activeId = "prime";
-
-    function textLines(label, max = 18) {
-      if (label.length <= max) return [label];
-      const chunks = [];
-      let rest = label;
-      while (rest.length > max) {
-        chunks.push(rest.slice(0, max));
-        rest = rest.slice(max);
-      }
-      if (rest) chunks.push(rest);
-      return chunks.slice(0, 3);
-    }
-
-    function svgLabel(label, x, y, color, anchor = "middle", size = 13, weight = 700) {
-      const lines = textLines(label);
-      return `<text x="${x}" y="${y}" text-anchor="${anchor}" fill="${color}" font-size="${size}" font-weight="${weight}" font-family="Inter, system-ui, sans-serif">${lines.map((line, index) => `<tspan x="${x}" dy="${index === 0 ? 0 : 16}">${line}</tspan>`).join("")}</text>`;
-    }
-
-    function drawArrow(event, markerId) {
-      const from = lanes[event.from];
-      const to = lanes[event.to];
-      const y = event.y;
-      const direction = from.x < to.x ? 1 : -1;
-      const x1 = from.x + direction * 64;
-      const x2 = to.x - direction * 64;
-      const mid = (x1 + x2) / 2;
-      const labelWidth = Math.min(190, Math.max(128, event.label.length * 7.5));
-      return `
-        <line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="#253040" stroke-width="2.5" marker-end="url(#${markerId})" />
-        <rect x="${mid - labelWidth / 2}" y="${y - 28}" width="${labelWidth}" height="25" rx="6" fill="#ffffff" stroke="#d9e0ea" />
-        ${svgLabel(event.label, mid, y - 11, "#253040", "middle", 12, 800)}
-      `;
-    }
-
-    function drawAction(event) {
-      const lane = lanes[event.actor];
-      const w = 178;
-      const h = 38;
-      const x = lane.x - w / 2;
-      const y = event.y - h / 2;
-      return `
-        <rect x="${x}" y="${y}" width="${w}" height="${h}" rx="8" fill="#ffffff" stroke="${lane.color}" stroke-width="2" />
-        ${svgLabel(event.label, lane.x, event.y + 4, lane.color, "middle", 12, 800)}
-      `;
-    }
-
-    function drawDiagram(phase) {
-      const markerId = `arrow-${phase.id}`;
-      const laneGuides = Object.values(lanes).map((lane) => `
-        <rect x="${lane.x - 92}" y="16" width="184" height="282" rx="8" fill="${lane.color}" opacity="0.045" />
-        <line x1="${lane.x}" y1="66" x2="${lane.x}" y2="288" stroke="${lane.color}" stroke-width="1.3" stroke-dasharray="6 7" opacity="0.52" />
-        <rect x="${lane.x - 82}" y="20" width="164" height="38" rx="19" fill="#ffffff" stroke="${lane.color}" stroke-width="2" />
-        ${svgLabel(lane.title, lane.x, 39, lane.color, "middle", 12, 900)}
-        ${svgLabel(lane.sub, lane.x, 54, "#667085", "middle", 10, 700)}
-      `).join("");
-
-      const events = phase.events.map((event) => {
-        if (event.kind === "arrow") return drawArrow(event, markerId);
-        return drawAction(event);
-      }).join("");
-
-      return `
-        <svg class="diagram" viewBox="0 0 1120 315" role="img" aria-label="${phase.title} 数据流">
-          <defs>
-            <marker id="${markerId}" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
-              <path d="M 0 0 L 10 5 L 0 10 z" fill="#253040"></path>
-            </marker>
-          </defs>
-          <rect x="0" y="0" width="1120" height="315" fill="rgba(255,255,255,0.82)" />
-          ${laneGuides}
-          ${events}
-        </svg>
-      `;
-    }
-
-    function renderNav() {
-      const nav = document.getElementById("phase-nav");
-      nav.innerHTML = "";
-      phases.forEach((phase) => {
-        const button = document.createElement("button");
-        button.type = "button";
-        button.style.setProperty("--color", phase.color);
-        button.setAttribute("aria-pressed", phase.id === activeId ? "true" : "false");
-        button.innerHTML = `<strong>${phase.title}</strong><span>${phase.short}</span>`;
-        button.addEventListener("click", () => {
-          activeId = phase.id;
-          renderNav();
-          renderPhase();
-        });
-        nav.appendChild(button);
-      });
-    }
-
-    function renderPhase() {
-      const phase = phases.find((item) => item.id === activeId);
-      const view = document.getElementById("phase-view");
-      view.style.setProperty("--color", phase.color);
-      view.innerHTML = `
-        <div class="phase-head">
-          <div>
-            <h2>${phase.title}</h2>
-            <p>${phase.summary}</p>
-          </div>
-          <span class="tag">${phase.tag}</span>
-        </div>
-        <div class="diagram-wrap">${drawDiagram(phase)}</div>
-        <div class="details">
-          ${phase.details.map(([label, text]) => `<div class="detail"><b>${label}</b><p>${text}</p></div>`).join("")}
-        </div>
-      `;
-    }
-
-    function renderMatrix() {
-      const matrix = document.getElementById("matrix");
-      matrix.innerHTML = `
-        <div class="matrix-cell head">Asset</div>
-        <div class="matrix-cell head">Type</div>
-        <div class="matrix-cell head">Runtime Role</div>
-        <div class="matrix-cell head">Protocol Boundary</div>
-        ${matrixRows.map(([asset, type, role, boundary, color]) => `
-          <div class="matrix-cell" style="--color: ${color};"><b>${asset}</b></div>
-          <div class="matrix-cell"><p>${type}</p></div>
-          <div class="matrix-cell"><p>${role}</p></div>
-          <div class="matrix-cell"><p>${boundary}</p></div>
-        `).join("")}
-      `;
-    }
-
-    renderNav();
-    renderPhase();
-    renderMatrix();
-  </script>
-</body>
-</html>
diff --git a/docs/design/self-evolution-harness/MEMORY_LOOP_MVP.md b/docs/design/self-evolution-harness/memory-loop/README.md
similarity index 97%
rename from docs/design/self-evolution-harness/MEMORY_LOOP_MVP.md
rename to docs/design/self-evolution-harness/memory-loop/README.md
index badf0da9..81d9f7b1 100644
--- a/docs/design/self-evolution-harness/MEMORY_LOOP_MVP.md
+++ b/docs/design/self-evolution-harness/memory-loop/README.md
@@ -2,9 +2,11 @@
 
 This document describes the first implementation slice of the memory loop. The goal is to keep the harness small: install a few hook prompts and Markdown-based capabilities around an existing host agent, while using Mnemon as the long-term memory backend.
 
-Related visualization: [memory-loop-mvp.html](./memory-loop-mvp.html)
+Related visualization: [site/index.html](./site/index.html)
 
-Reference implementation: [harness/memory-loop](../../../harness/memory-loop)
+Chinese version: [README.zh.md](./README.zh.md)
+
+Reference implementation: [harness/memory-loop](../../../../harness/memory-loop)
 
 ## Core Model
 
diff --git a/docs/design/self-evolution-harness/memory-loop/README.zh.md b/docs/design/self-evolution-harness/memory-loop/README.zh.md
new file mode 100644
index 00000000..cca5d99c
--- /dev/null
+++ b/docs/design/self-evolution-harness/memory-loop/README.zh.md
@@ -0,0 +1,181 @@
+# Memory Loop MVP 设计
+
+本文档描述 memory loop 的第一版实现切片。目标是让 harness 保持足够小：围绕已有 HostAgent 安装少量 hook prompt 和 Markdown 能力，同时使用 Mnemon 作为长期记忆后端。
+
+交互式展示：[site/index.html](./site/index.html)
+
+英文版本：[README.md](./README.md)
+
+参考实现：[harness/memory-loop](../../../../harness/memory-loop)
+
+## 核心模型
+
+MVP 只有三个核心主体：
+
+| 主体 | 作用 | 边界 |
+| --- | --- | --- |
+| HostAgent | 宿主 agent runtime。它运行任务、接收 hook 注入，并决定是否加载记忆 skill 或启动 dreaming subagent。 | 不拥有记忆存储协议。 |
+| `MEMORY.md` | 工作记忆文件。它很小、直接面向 prompt，并在 Prime 阶段进入 system prompt。 | 由 `memory_set.md` 和 dreaming subagent 维护。 |
+| Mnemon | 长期记忆存储和 binary。它独立安装，例如通过 `brew install`。 | 通过 `memory_get.md` 和 dreaming subagent 协议访问。 |
+
+其他内容都是围绕这三个主体的支撑资产。
+
+## 维护资产
+
+第一版维护以下资产：
+
+| 资产 | 类型 | 用途 |
+| --- | --- | --- |
+| `env.sh` | 配置 | 定义 `MNEMON_MEMORY_LOOP_ENV`、`MNEMON_MEMORY_LOOP_DIR` 和记忆长度阈值。 |
+| `GUIDE.md` | 手册 | 描述何时读记忆、何时写记忆、什么信息值得保留。 |
+| Claude Code setup scripts | 安装 | 第一条具体安装路径。安装 hooks、skills、subagent 和 memory 文件。 |
+| Prime hook | Hook | 将 `MEMORY.md` 和 `GUIDE.md` 注入 system prompt。 |
+| Remind hook | Hook | 提醒 HostAgent 判断是否需要读取记忆。 |
+| Nudge hook | Hook | 提醒 HostAgent 判断是否需要积累工作记忆。 |
+| Compact hook | Hook | 在上下文压缩前提醒 HostAgent 保存重要信息。 |
+| `memory_get.md` | Skill | 定义如何从 Mnemon 召回长期记忆。 |
+| `memory_set.md` | Skill | 定义如何编辑 `MEMORY.md`。 |
+| dreaming subagent spec | Subagent | 定义如何将 `MEMORY.md` 巩固到 Mnemon，并压缩或移除工作记忆条目。 |
+
+## 策略与实现分离
+
+`GUIDE.md` 刻意保持抽象。它描述记忆行为，而不是存储机制。
+
+它回答这类问题：
+
+- 当前是否应该读记忆？
+- 当前是否应该写记忆？
+- 这条信息是否足够稳定，值得保留？
+- 这是长期偏好、项目约定，还是可复用事实？
+
+它不要求 HostAgent 判断目标是 `MEMORY.md` 还是 Mnemon。这个决定下沉到能力层。可复用能力通过 `MNEMON_MEMORY_LOOP_DIR` 定位运行目录。
+
+- `memory_get.md` 将“读记忆”映射为 Mnemon recall。
+- `memory_set.md` 将“写记忆”映射为 `$MNEMON_MEMORY_LOOP_DIR/MEMORY.md` 编辑。
+- dreaming subagent 将“巩固”映射为 Mnemon write 加 `$MNEMON_MEMORY_LOOP_DIR/MEMORY.md` 压缩。
+
+这个拆分让 guide 可以跨不同 HostAgent 复用。
+
+## 运行流程
+
+### Prime
+
+Prime 是唯一的直接加载路径。
+
+输入：
+
+- `MEMORY.md`
+- `GUIDE.md`
+
+动作：
+
+- 将二者注入 HostAgent 的 system prompt。
+
+边界：
+
+- Prime 不调用 `memory_get.md`。
+- Prime 不召回 Mnemon。
+- Prime 不写长期记忆。
+
+### Remind / Recall
+
+Remind 创造读记忆机会。
+
+流程：
+
+1. Remind 根据 `GUIDE.md` 提醒 HostAgent 判断是否应该读记忆。
+2. 如果需要，HostAgent 加载 `memory_get.md`。
+3. `memory_get.md` 说明如何调用 Mnemon recall。
+4. Mnemon 返回有界的 recall context 给 HostAgent。
+
+边界：
+
+- 长期记忆不会被全量注入。
+- recall 结果不会自动写回 `MEMORY.md`。
+- `GUIDE.md` 不需要知道 Mnemon 协议细节。
+
+### Nudge / Accumulate
+
+Nudge 创造写工作记忆机会。
+
+流程：
+
+1. Nudge 根据 `GUIDE.md` 提醒 HostAgent 判断是否应该积累记忆。
+2. 如果需要，HostAgent 加载 `memory_set.md`。
+3. `memory_set.md` 说明如何新增、替换或删除 `MEMORY.md` 条目。
+
+边界：
+
+- 在线记忆积累只写 `MEMORY.md`。
+- 它不直接写 Mnemon。
+- 它应避免记录流水账、一次性进度和低置信度观察。
+
+### Compact
+
+Compact 是上下文边界时的 Nudge。
+
+流程：
+
+1. 在上下文压缩前，Compact 提醒 HostAgent 判断是否有重要信息会丢失。
+2. 如果需要，HostAgent 加载 `memory_set.md`。
+3. `memory_set.md` 将必要的最后补丁写入 `MEMORY.md`。
+
+边界：
+
+- Compact 不是 dreaming。
+- Compact 不做全量工作记忆清理。
+- Compact 不直接写长期记忆。
+
+### Dreaming
+
+Dreaming 是维护流程，不是普通在线 hook。
+
+流程：
+
+1. HostAgent 启动专用 dreaming subagent。
+2. subagent 读取完整 `MEMORY.md`。
+3. subagent 按 Mnemon 协议将当前工作记忆写入 Mnemon。
+4. subagent 压缩、整理或移除 `MEMORY.md` 条目。
+
+触发时机：
+
+- `MEMORY.md` 超过 quota。
+- 上下文压缩前。
+- 用户或 HostAgent 主动要求。
+
+边界：
+
+- Dreaming 负责巩固与清理。
+- 它不替代 Remind、Nudge 或 Compact。
+- 它需要保留 prompt-facing 有用性，同时把耐久信息移动到长期记忆。
+
+## 第一版范围
+
+MVP 包含：
+
+- 最小 `GUIDE.md`。
+- Claude Code setup scripts，将 Prime、Remind、Nudge、Compact 挂载进 `.claude/settings.json`。
+- `MEMORY.md` 模板。
+- 用于 Mnemon recall 的 `memory_get.md` skill。
+- 用于 `MEMORY.md` 编辑的 `memory_set.md` skill。
+- dreaming subagent spec。
+- 明确假设 Mnemon 作为 binary 和长期存储独立安装。
+
+MVP 不包含：
+
+- 自定义 agent runtime。
+- 复杂 adapter framework。
+- 第二种 working-memory 格式。
+- 普通在线 hook 直接写长期记忆的路径。
+
+## 设计原则
+
+Harness 应保持 agent-agnostic。它向 HostAgent 提供安装记忆行为所需的材料：
+
+- 规则手册和安装脚本；
+- 用于时机控制的 hooks；
+- 用于在线记忆操作的 skills；
+- 用于离线巩固的 subagent；
+- 用于长期存储的 Mnemon。
+
+这让第一版足够可实现，同时保留目标记忆循环：`MEMORY.md` 提供 prompt-facing working memory，Mnemon 提供 durable long-term memory，dreaming 在二者之间移动信息。
diff --git a/docs/design/self-evolution-harness/memory-loop/site/index.html b/docs/design/self-evolution-harness/memory-loop/site/index.html
new file mode 100644
index 00000000..7bde77e2
--- /dev/null
+++ b/docs/design/self-evolution-harness/memory-loop/site/index.html
@@ -0,0 +1,1118 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" content="Mnemon Memory Loop MVP architecture, assets, hooks, and runtime data flow." />
+  <title>Mnemon Memory Loop MVP</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --bg: #f6f8fb;
+      --ink: #151922;
+      --muted: #667085;
+      --line: #d9e0ea;
+      --panel: #ffffff;
+      --soft: #f1f5f9;
+      --guide: #8062b5;
+      --host: #2f7d55;
+      --hook: #b43d59;
+      --capability: #c26432;
+      --working: #2e67b1;
+      --longterm: #0f8a8a;
+      --shadow: 0 16px 38px rgba(28, 39, 57, 0.1);
+      --radius: 8px;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      min-height: 100vh;
+      background: var(--bg);
+      color: var(--ink);
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      line-height: 1.5;
+    }
+
+    button {
+      font: inherit;
+      color: inherit;
+    }
+
+    .shell {
+      width: min(1320px, calc(100vw - 32px));
+      margin: 0 auto;
+    }
+
+    header {
+      padding: 24px 0 22px;
+      border-bottom: 1px solid var(--line);
+      background: rgba(246, 248, 251, 0.96);
+    }
+
+    .topbar {
+      display: flex;
+      justify-content: space-between;
+      gap: 16px;
+      align-items: center;
+      margin-bottom: 22px;
+    }
+
+    .eyebrow {
+      color: var(--muted);
+      font-size: 12px;
+      font-weight: 800;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    .language-switch {
+      display: inline-flex;
+      gap: 2px;
+      padding: 3px;
+      border: 1px solid var(--line);
+      border-radius: 999px;
+      background: var(--panel);
+    }
+
+    .language-switch button {
+      min-width: 82px;
+      border: 0;
+      border-radius: 999px;
+      background: transparent;
+      padding: 6px 11px;
+      color: var(--muted);
+      font-size: 13px;
+      font-weight: 800;
+      cursor: pointer;
+    }
+
+    .language-switch button[aria-pressed="true"] {
+      background: var(--host);
+      color: #ffffff;
+    }
+
+    .hero {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 360px;
+      gap: 26px;
+      align-items: start;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: 44px;
+      line-height: 1;
+      letter-spacing: 0;
+    }
+
+    .summary {
+      margin: 12px 0 0;
+      max-width: 900px;
+      color: var(--muted);
+      font-size: 15px;
+    }
+
+    .reading {
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      background: var(--panel);
+      box-shadow: var(--shadow);
+      overflow: hidden;
+    }
+
+    .reading h2,
+    .section-title h2 {
+      margin: 0;
+      font-size: 17px;
+      letter-spacing: 0;
+    }
+
+    .reading h2 {
+      padding: 13px 14px;
+      border-bottom: 1px solid var(--line);
+      color: var(--host);
+      background: #fbfcfe;
+    }
+
+    .reading ol {
+      margin: 0;
+      padding: 12px 16px 14px 32px;
+      color: var(--muted);
+      font-size: 13px;
+    }
+
+    .reading li + li {
+      margin-top: 6px;
+    }
+
+    main {
+      padding: 22px 0 44px;
+    }
+
+    .section-title {
+      display: flex;
+      justify-content: space-between;
+      gap: 16px;
+      align-items: end;
+      margin: 0 0 10px;
+    }
+
+    .section-title p {
+      margin: 0;
+      max-width: 760px;
+      color: var(--muted);
+      font-size: 13px;
+      text-align: right;
+    }
+
+    .inventory-layout {
+      display: grid;
+      grid-template-columns: 1.1fr 0.9fr;
+      gap: 14px;
+      margin-bottom: 18px;
+    }
+
+    .panel {
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      background: var(--panel);
+      box-shadow: var(--shadow);
+      overflow: hidden;
+    }
+
+    .panel-head {
+      padding: 13px 15px;
+      border-bottom: 1px solid var(--line);
+      background: #fbfcfe;
+      color: var(--color);
+      font-size: 15px;
+      font-weight: 800;
+    }
+
+    .core-row {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 1px;
+      background: var(--line);
+    }
+
+    .core {
+      min-height: 170px;
+      padding: 15px;
+      background: #ffffff;
+      border-top: 4px solid var(--color);
+      display: grid;
+      align-content: start;
+      gap: 9px;
+    }
+
+    .core b {
+      color: var(--color);
+      font-size: 16px;
+      line-height: 1.1;
+    }
+
+    .core p,
+    .asset p,
+    .rule p,
+    .detail p,
+    .matrix p {
+      margin: 0;
+      color: var(--muted);
+      font-size: 13px;
+    }
+
+    .asset-list {
+      display: grid;
+      gap: 1px;
+      background: var(--line);
+    }
+
+    .asset {
+      display: grid;
+      grid-template-columns: 128px minmax(0, 1fr);
+      gap: 12px;
+      align-items: start;
+      padding: 12px 14px;
+      background: #ffffff;
+      border-left: 4px solid var(--color);
+    }
+
+    .asset b {
+      color: var(--color);
+      font-size: 13px;
+      line-height: 1.2;
+    }
+
+    .rules {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 12px;
+      margin-bottom: 18px;
+    }
+
+    .rule {
+      padding: 13px 14px;
+      border: 1px solid var(--line);
+      border-left: 4px solid var(--color);
+      border-radius: var(--radius);
+      background: var(--panel);
+    }
+
+    .rule b {
+      display: block;
+      margin-bottom: 5px;
+      color: var(--color);
+      font-size: 14px;
+    }
+
+    .flow-layout {
+      display: grid;
+      grid-template-columns: 260px minmax(0, 1fr);
+      gap: 16px;
+      align-items: start;
+      margin-bottom: 18px;
+    }
+
+    .phase-nav {
+      position: sticky;
+      top: 16px;
+      display: grid;
+      gap: 8px;
+      padding: 10px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      background: var(--panel);
+      box-shadow: var(--shadow);
+    }
+
+    .phase-nav button {
+      width: 100%;
+      border: 1px solid transparent;
+      border-left: 4px solid var(--color);
+      border-radius: 6px;
+      background: #fbfcfe;
+      padding: 10px;
+      text-align: left;
+      cursor: pointer;
+      display: grid;
+      gap: 4px;
+    }
+
+    .phase-nav button[aria-pressed="true"] {
+      border-color: var(--color);
+      background: color-mix(in srgb, var(--color) 9%, white);
+    }
+
+    .phase-nav strong {
+      font-size: 13px;
+      line-height: 1.15;
+    }
+
+    .phase-nav span {
+      color: var(--muted);
+      font-size: 12px;
+    }
+
+    .phase-view {
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      background: var(--panel);
+      box-shadow: var(--shadow);
+      overflow: hidden;
+    }
+
+    .phase-head {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 16px;
+      align-items: start;
+      padding: 16px 18px;
+      border-bottom: 1px solid var(--line);
+      background: #fbfcfe;
+    }
+
+    .phase-head h2 {
+      margin: 0;
+      color: var(--color);
+      font-size: 24px;
+      line-height: 1.08;
+      letter-spacing: 0;
+    }
+
+    .phase-head p {
+      margin: 7px 0 0;
+      color: var(--muted);
+      font-size: 14px;
+    }
+
+    .tag {
+      display: inline-flex;
+      align-items: center;
+      min-height: 28px;
+      padding: 4px 9px;
+      border: 1px solid color-mix(in srgb, var(--color) 32%, var(--line));
+      border-radius: 999px;
+      background: color-mix(in srgb, var(--color) 9%, white);
+      color: var(--color);
+      font-size: 12px;
+      font-weight: 800;
+      white-space: nowrap;
+    }
+
+    .diagram-wrap {
+      overflow-x: auto;
+      background:
+        linear-gradient(#edf1f5 1px, transparent 1px),
+        linear-gradient(90deg, #edf1f5 1px, transparent 1px);
+      background-size: 32px 32px;
+    }
+
+    svg.diagram {
+      display: block;
+      width: 100%;
+      min-width: 1080px;
+      height: auto;
+    }
+
+    .details {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 1px;
+      background: var(--line);
+      border-top: 1px solid var(--line);
+    }
+
+    .detail {
+      min-height: 86px;
+      padding: 13px 14px;
+      background: #fbfcfe;
+    }
+
+    .detail b {
+      display: block;
+      margin-bottom: 5px;
+      color: var(--color);
+      font-size: 12px;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    .matrix {
+      border: 1px solid var(--line);
+      border-radius: var(--radius);
+      background: var(--panel);
+      box-shadow: var(--shadow);
+      overflow: hidden;
+    }
+
+    .matrix-grid {
+      display: grid;
+      grid-template-columns: 150px 170px minmax(0, 1fr) minmax(0, 1fr);
+      gap: 1px;
+      background: var(--line);
+    }
+
+    .matrix-cell {
+      min-height: 58px;
+      padding: 11px 13px;
+      background: #ffffff;
+    }
+
+    .matrix-cell.head {
+      background: #fbfcfe;
+      color: var(--ink);
+      font-size: 12px;
+      font-weight: 800;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    .matrix-cell b {
+      color: var(--color);
+      font-size: 13px;
+    }
+
+    @media (max-width: 1080px) {
+      .hero,
+      .inventory-layout,
+      .flow-layout,
+      .rules {
+        grid-template-columns: 1fr;
+      }
+
+      .section-title {
+        display: block;
+      }
+
+      .section-title p {
+        margin-top: 4px;
+        text-align: left;
+      }
+
+      .phase-nav {
+        position: static;
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+      }
+    }
+
+    @media (max-width: 760px) {
+      .shell {
+        width: min(100vw - 20px, 1320px);
+      }
+
+      .topbar,
+      .phase-head {
+        display: grid;
+        grid-template-columns: 1fr;
+      }
+
+      h1 {
+        font-size: 34px;
+      }
+
+      .core-row,
+      .details,
+      .phase-nav,
+      .matrix-grid {
+        grid-template-columns: 1fr;
+      }
+
+      .asset {
+        grid-template-columns: 1fr;
+        gap: 4px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <div class="shell">
+      <div class="topbar">
+        <div class="eyebrow" id="eyebrow"></div>
+        <div class="language-switch" id="language-switch" aria-label="Language">
+          <button type="button" data-lang="zh">中文</button>
+          <button type="button" data-lang="en">English</button>
+        </div>
+      </div>
+      <div class="hero">
+        <div>
+          <h1 id="page-title"></h1>
+          <p class="summary" id="page-summary"></p>
+        </div>
+        <aside class="reading" id="reading-card"></aside>
+      </div>
+    </div>
+  </header>
+
+  <main class="shell">
+    <section aria-labelledby="components-title">
+      <div class="section-title">
+        <h2 id="components-title"></h2>
+        <p id="components-intro"></p>
+      </div>
+      <div class="inventory-layout">
+        <article class="panel" style="--color: var(--host);">
+          <div class="panel-head" id="core-heading"></div>
+          <div class="core-row" id="core-row"></div>
+        </article>
+        <article class="panel" style="--color: var(--capability);">
+          <div class="panel-head" id="asset-heading"></div>
+          <div class="asset-list" id="asset-list"></div>
+        </article>
+      </div>
+    </section>
+
+    <section aria-labelledby="rules-title">
+      <div class="section-title">
+        <h2 id="rules-title"></h2>
+        <p id="rules-intro"></p>
+      </div>
+      <div class="rules" id="rules"></div>
+    </section>
+
+    <section aria-labelledby="flow-title">
+      <div class="section-title">
+        <h2 id="flow-title"></h2>
+        <p id="flow-intro"></p>
+      </div>
+      <div class="flow-layout">
+        <nav class="phase-nav" aria-label="Runtime phases" id="phase-nav"></nav>
+        <article class="phase-view" id="phase-view" aria-live="polite"></article>
+      </div>
+    </section>
+
+    <section class="matrix" aria-labelledby="matrix-title">
+      <div class="panel-head" style="--color: var(--host);" id="matrix-title"></div>
+      <div class="matrix-grid" id="matrix"></div>
+    </section>
+  </main>
+
+  <script>
+    const COLOR = {
+      guide: "#8062b5",
+      host: "#2f7d55",
+      hook: "#b43d59",
+      capability: "#c26432",
+      working: "#2e67b1",
+      longterm: "#0f8a8a"
+    };
+
+    const COPY = {
+      zh: {
+        langAttr: "zh-CN",
+        title: "Memory Loop MVP",
+        eyebrow: "Mnemon Harness / Memory Loop",
+        summary: "第一版只实现一个清晰的记忆闭环：HostAgent 通过 hook 获得时机，通过 Markdown guide 做判断，通过 memory_get、memory_set 和 dreaming subagent 调用具体协议，最终在 MEMORY.md 与 Mnemon 之间完成在线读写和离线巩固。",
+        readingTitle: "阅读顺序",
+        reading: [
+          "先看三大核心：HostAgent、MEMORY.md、Mnemon。",
+          "再看支撑资产：GUIDE、setup、hooks、skills、subagent。",
+          "最后切换阶段，看每个 hook 如何把判断交给 skill 或 subagent。"
+        ],
+        componentsTitle: "系统组成",
+        componentsIntro: "这里区分系统主体、安装资产、触发资产和协议资产，避免把所有文件混成一个运行时。",
+        coreHeading: "三大核心主体",
+        assetHeading: "支撑资产",
+        cores: [
+          { name: "HostAgent", color: "var(--host)", text: "宿主 Agent 的核心引擎。它运行任务、接收 hook 注入，并根据 GUIDE.md 判断是否加载 skill 或启动 subagent。" },
+          { name: "MEMORY.md", color: "var(--working)", text: "工作记忆主体。Prime 直接把它加入 system prompt；memory_set.md 负责在线维护它。" },
+          { name: "Mnemon", color: "var(--longterm)", text: "长期记忆主体。mnemon binary 独立安装；memory_get.md 和 dreaming subagent 通过协议调用它。" }
+        ],
+        assets: [
+          { name: "Guide + setup", color: "var(--guide)", text: "GUIDE.md 说明何时读写记忆；setup 脚本负责把 hook、skill、subagent 挂载到宿主。" },
+          { name: "Four hooks", color: "var(--hook)", text: "Prime、Remind、Nudge、Compact 只负责触发时机，不承载记忆协议。" },
+          { name: "Two skills", color: "var(--capability)", text: "memory_get.md 绑定 Mnemon recall；memory_set.md 绑定 MEMORY.md 编辑规则。" },
+          { name: "One subagent", color: "var(--capability)", text: "dreaming subagent 负责维护任务：巩固、压缩、丢弃和长期写入。" }
+        ],
+        rulesTitle: "关键规则",
+        rulesIntro: "规则层只描述判断，能力层才绑定具体存储目标。",
+        rules: [
+          { name: "Guide 只定义判断", color: "var(--guide)", text: "GUIDE.md 只回答何时读记忆、何时写记忆、什么值得保留，不绑定 MEMORY.md 或 Mnemon。" },
+          { name: "Skill 绑定协议", color: "var(--capability)", text: "memory_get.md 负责 Mnemon recall；memory_set.md 通过 MNEMON_MEMORY_LOOP_DIR 定位并修改 MEMORY.md。" },
+          { name: "Dreaming 做巩固", color: "var(--working)", text: "Dreaming 不是普通 hook。它是被启动的维护 subagent，先写 Mnemon，再整理 MEMORY.md。" }
+        ],
+        flowTitle: "运行数据流",
+        flowIntro: "点击阶段，只显示当前阶段的数据流，避免所有箭头同时出现。",
+        matrixTitle: "职责矩阵",
+        matrixHeaders: ["资产", "类型", "运行职责", "协议边界"],
+        laneSub: {
+          guide: "判断规则",
+          host: "核心引擎",
+          capability: "skill / subagent",
+          working: "工作记忆",
+          longterm: "binary + store"
+        },
+        detailLabels: {
+          input: "输入",
+          trigger: "触发",
+          action: "执行",
+          boundary: "边界"
+        },
+        phases: {
+          prime: {
+            title: "Prime",
+            tag: "hook",
+            summary: "Prime 是唯一的直接加载路径：把 MEMORY.md 和 GUIDE.md 加入 HostAgent 的 system prompt。",
+            short: "MEMORY.md + GUIDE.md -> prompt",
+            events: [
+              { kind: "arrow", from: "working", to: "host", y: 96, label: "MEMORY.md 内容" },
+              { kind: "arrow", from: "guide", to: "host", y: 146, label: "GUIDE.md 规则" },
+              { kind: "action", actor: "host", y: 205, label: "带工作记忆启动" }
+            ],
+            details: [
+              ["input", "MEMORY.md + GUIDE.md"],
+              ["action", "直接加入 system prompt"],
+              ["boundary", "不调用 memory_get，不触发 Mnemon recall"]
+            ]
+          },
+          recall: {
+            title: "Remind / Recall",
+            tag: "hook + skill",
+            summary: "Remind 只触发读记忆判断；如果需要读取，HostAgent 加载 memory_get.md，并按其中协议调用 Mnemon。",
+            short: "GUIDE -> memory_get.md -> Mnemon",
+            events: [
+              { kind: "arrow", from: "guide", to: "host", y: 82, label: "是否读记忆？" },
+              { kind: "arrow", from: "host", to: "capability", y: 130, label: "加载 memory_get.md" },
+              { kind: "arrow", from: "capability", to: "longterm", y: 178, label: "mnemon recall 协议" },
+              { kind: "arrow", from: "longterm", to: "host", y: 226, label: "有界召回结果" }
+            ],
+            details: [
+              ["trigger", "Remind hook"],
+              ["action", "memory_get.md skill 定义 recall 方法"],
+              ["boundary", "GUIDE.md 不需要知道长期记忆细节"]
+            ]
+          },
+          nudge: {
+            title: "Nudge / Accumulate",
+            tag: "hook + skill",
+            summary: "Nudge 只触发写记忆判断；如果需要积累，HostAgent 加载 memory_set.md，并按 MNEMON_MEMORY_LOOP_DIR 定位 MEMORY.md。",
+            short: "GUIDE -> memory_set.md -> $DIR/MEMORY.md",
+            events: [
+              { kind: "arrow", from: "guide", to: "host", y: 82, label: "是否写记忆？" },
+              { kind: "arrow", from: "host", to: "capability", y: 132, label: "加载 memory_set.md" },
+              { kind: "arrow", from: "capability", to: "working", y: 184, label: "patch MEMORY.md" },
+              { kind: "action", actor: "working", y: 232, label: "小型 prompt 状态" }
+            ],
+            details: [
+              ["trigger", "Nudge hook"],
+              ["action", "memory_set.md skill 定义 MEMORY.md 编辑规则"],
+              ["boundary", "在线积累不直接写 Mnemon"]
+            ]
+          },
+          compact: {
+            title: "Compact",
+            tag: "hook + skill",
+            summary: "Compact 与 Nudge 共享 memory_set.md，只是触发点在上下文压缩边界前，用来保存即将丢失的重要信息。",
+            short: "pre-compact -> memory_set.md -> $DIR/MEMORY.md",
+            events: [
+              { kind: "arrow", from: "guide", to: "host", y: 82, label: "压缩前是否保存？" },
+              { kind: "action", actor: "host", y: 130, label: "选择重要残留" },
+              { kind: "arrow", from: "host", to: "capability", y: 178, label: "加载 memory_set.md" },
+              { kind: "arrow", from: "capability", to: "working", y: 226, label: "最后写入 MEMORY.md" }
+            ],
+            details: [
+              ["trigger", "Compact hook"],
+              ["action", "复用 memory_set.md skill"],
+              ["boundary", "不是 dreaming，不做全量压缩和长期写入"]
+            ]
+          },
+          dreaming: {
+            title: "Dreaming",
+            tag: "spawned subagent",
+            summary: "Dreaming 是专用维护 subagent。每次触发时通过 MNEMON_MEMORY_LOOP_DIR 读取完整 MEMORY.md，按规则写入 Mnemon，并整理工作记忆。",
+            short: "subagent -> Mnemon + MEMORY.md compact",
+            events: [
+              { kind: "arrow", from: "host", to: "capability", y: 78, label: "启动 dreaming subagent" },
+              { kind: "arrow", from: "guide", to: "capability", y: 122, label: "dreaming 规则" },
+              { kind: "arrow", from: "working", to: "capability", y: 166, label: "读取完整 MEMORY.md" },
+              { kind: "arrow", from: "capability", to: "longterm", y: 210, label: "按 Mnemon 协议写入" },
+              { kind: "arrow", from: "capability", to: "working", y: 252, label: "压缩 / 移除 MEMORY.md" }
+            ],
+            details: [
+              ["trigger", "MEMORY.md 超长、compact 前、主动要求"],
+              ["action", "启动专用 dreaming subagent"],
+              ["boundary", "负责巩固和清理，不参与每次在线读写判断"]
+            ]
+          }
+        },
+        matrixRows: [
+          ["HostAgent", "Core", "运行任务，接收 hook，决定是否加载 skill 或 subagent。", "不拥有记忆存储协议，只执行被安装的能力。", "var(--host)"],
+          ["MEMORY.md", "Core", "作为 working memory 直接进入 system prompt。", "由 memory_set.md 和 dreaming subagent 维护。", "var(--working)"],
+          ["Mnemon", "Core", "作为 long-term memory store 提供 recall 和 write。", "由 mnemon binary + store 承载。", "var(--longterm)"],
+          ["env.sh", "Config", "定义 MNEMON_MEMORY_LOOP_ENV、MNEMON_MEMORY_LOOP_DIR 和记忆阈值。", "作为运行配置入口，由 setup 安装并可手动调整。", "var(--guide)"],
+          ["GUIDE.md", "Manual", "说明何时读写记忆、什么值得保留。", "只定义判断原则，不绑定存储目标。", "var(--guide)"],
+          ["setup/claude-code", "Setup", "把四个 hook、两个 skill、dreaming subagent 和 memory 文件安装到 Claude Code。", "只负责挂载，并设置 MNEMON_MEMORY_LOOP_DIR。", "var(--guide)"],
+          ["memory_get.md", "Skill", "读记忆能力入口。", "绑定 Mnemon recall 协议。", "var(--capability)"],
+          ["memory_set.md", "Skill", "写工作记忆能力入口。", "通过 MNEMON_MEMORY_LOOP_DIR 绑定 MEMORY.md 编辑规则。", "var(--capability)"],
+          ["dreaming", "Subagent", "维护、巩固和清理工作记忆。", "绑定 Mnemon write 与 MEMORY.md compact / eviction。", "var(--capability)"]
+        ]
+      },
+      en: {
+        langAttr: "en",
+        title: "Memory Loop MVP",
+        eyebrow: "Mnemon Harness / Memory Loop",
+        summary: "The first version implements one focused memory loop: the HostAgent receives timing through hooks, makes decisions from a Markdown guide, loads memory_get, memory_set, or a dreaming subagent for concrete protocols, and moves information between MEMORY.md and Mnemon through online operations and offline consolidation.",
+        readingTitle: "Reading Order",
+        reading: [
+          "Start with the three core parts: HostAgent, MEMORY.md, and Mnemon.",
+          "Then read the support assets: GUIDE, setup, hooks, skills, and subagent.",
+          "Finally switch phases to see how each hook delegates to a skill or subagent."
+        ],
+        componentsTitle: "System Components",
+        componentsIntro: "This separates core runtime ownership, installation assets, trigger assets, and protocol assets instead of treating every file as a runtime.",
+        coreHeading: "Three Core Parts",
+        assetHeading: "Maintained Assets",
+        cores: [
+          { name: "HostAgent", color: "var(--host)", text: "The host agent engine. It runs tasks, receives hook injections, and decides whether to load a skill or spawn a subagent according to GUIDE.md." },
+          { name: "MEMORY.md", color: "var(--working)", text: "The working-memory file. Prime injects it into the system prompt; memory_set.md maintains it during online work." },
+          { name: "Mnemon", color: "var(--longterm)", text: "The long-term memory store and binary. It is installed separately; memory_get.md and the dreaming subagent call it through protocols." }
+        ],
+        assets: [
+          { name: "Guide + setup", color: "var(--guide)", text: "GUIDE.md explains when to read or write memory; setup scripts mount hooks, skills, subagent, and memory files into the host." },
+          { name: "Four hooks", color: "var(--hook)", text: "Prime, Remind, Nudge, and Compact provide timing only. They do not carry storage protocols." },
+          { name: "Two skills", color: "var(--capability)", text: "memory_get.md binds recall to Mnemon; memory_set.md binds writes to MEMORY.md editing rules." },
+          { name: "One subagent", color: "var(--capability)", text: "The dreaming subagent handles maintenance: consolidation, compaction, eviction, and long-term writes." }
+        ],
+        rulesTitle: "Key Rules",
+        rulesIntro: "The policy layer describes decisions; the capability layer binds those decisions to storage targets.",
+        rules: [
+          { name: "Guide Defines Decisions", color: "var(--guide)", text: "GUIDE.md answers when to read memory, when to write memory, and what is worth keeping. It does not bind MEMORY.md or Mnemon." },
+          { name: "Skills Bind Protocols", color: "var(--capability)", text: "memory_get.md performs Mnemon recall; memory_set.md locates and edits MEMORY.md through MNEMON_MEMORY_LOOP_DIR." },
+          { name: "Dreaming Consolidates", color: "var(--working)", text: "Dreaming is not a normal hook. It is a spawned maintenance subagent that writes Mnemon first, then organizes MEMORY.md." }
+        ],
+        flowTitle: "Runtime Flow",
+        flowIntro: "Select a phase to isolate its data flow instead of showing every arrow at once.",
+        matrixTitle: "Responsibility Matrix",
+        matrixHeaders: ["Asset", "Type", "Runtime Role", "Protocol Boundary"],
+        laneSub: {
+          guide: "policy",
+          host: "core engine",
+          capability: "skill / subagent",
+          working: "working memory",
+          longterm: "binary + store"
+        },
+        detailLabels: {
+          input: "Input",
+          trigger: "Trigger",
+          action: "Action",
+          boundary: "Boundary"
+        },
+        phases: {
+          prime: {
+            title: "Prime",
+            tag: "hook",
+            summary: "Prime is the only direct loading path: it injects MEMORY.md and GUIDE.md into the HostAgent system prompt.",
+            short: "MEMORY.md + GUIDE.md -> prompt",
+            events: [
+              { kind: "arrow", from: "working", to: "host", y: 96, label: "MEMORY.md content" },
+              { kind: "arrow", from: "guide", to: "host", y: 146, label: "GUIDE.md policy" },
+              { kind: "action", actor: "host", y: 205, label: "start with working memory" }
+            ],
+            details: [
+              ["input", "MEMORY.md + GUIDE.md"],
+              ["action", "Inject both into the system prompt"],
+              ["boundary", "Does not call memory_get or trigger Mnemon recall"]
+            ]
+          },
+          recall: {
+            title: "Remind / Recall",
+            tag: "hook + skill",
+            summary: "Remind only prompts the read-memory decision. If recall is needed, the HostAgent loads memory_get.md and follows its Mnemon protocol.",
+            short: "GUIDE -> memory_get.md -> Mnemon",
+            events: [
+              { kind: "arrow", from: "guide", to: "host", y: 82, label: "read memory?" },
+              { kind: "arrow", from: "host", to: "capability", y: 130, label: "load memory_get.md" },
+              { kind: "arrow", from: "capability", to: "longterm", y: 178, label: "mnemon recall protocol" },
+              { kind: "arrow", from: "longterm", to: "host", y: 226, label: "bounded recall result" }
+            ],
+            details: [
+              ["trigger", "Remind hook"],
+              ["action", "memory_get.md defines the recall method"],
+              ["boundary", "GUIDE.md does not need long-term storage details"]
+            ]
+          },
+          nudge: {
+            title: "Nudge / Accumulate",
+            tag: "hook + skill",
+            summary: "Nudge only prompts the write-memory decision. If accumulation is needed, the HostAgent loads memory_set.md and locates MEMORY.md through MNEMON_MEMORY_LOOP_DIR.",
+            short: "GUIDE -> memory_set.md -> $DIR/MEMORY.md",
+            events: [
+              { kind: "arrow", from: "guide", to: "host", y: 82, label: "write memory?" },
+              { kind: "arrow", from: "host", to: "capability", y: 132, label: "load memory_set.md" },
+              { kind: "arrow", from: "capability", to: "working", y: 184, label: "patch MEMORY.md" },
+              { kind: "action", actor: "working", y: 232, label: "small prompt-facing state" }
+            ],
+            details: [
+              ["trigger", "Nudge hook"],
+              ["action", "memory_set.md defines MEMORY.md editing rules"],
+              ["boundary", "Online accumulation does not write Mnemon directly"]
+            ]
+          },
+          compact: {
+            title: "Compact",
+            tag: "hook + skill",
+            summary: "Compact shares memory_set.md with Nudge, but it runs before context compaction to preserve important information that may be lost.",
+            short: "pre-compact -> memory_set.md -> $DIR/MEMORY.md",
+            events: [
+              { kind: "arrow", from: "guide", to: "host", y: 82, label: "save before compact?" },
+              { kind: "action", actor: "host", y: 130, label: "select important residue" },
+              { kind: "arrow", from: "host", to: "capability", y: 178, label: "load memory_set.md" },
+              { kind: "arrow", from: "capability", to: "working", y: 226, label: "last MEMORY.md patch" }
+            ],
+            details: [
+              ["trigger", "Compact hook"],
+              ["action", "Reuse the memory_set.md skill"],
+              ["boundary", "Not dreaming; no full cleanup or long-term write"]
+            ]
+          },
+          dreaming: {
+            title: "Dreaming",
+            tag: "spawned subagent",
+            summary: "Dreaming is a dedicated maintenance subagent. On each trigger it reads the full MEMORY.md through MNEMON_MEMORY_LOOP_DIR, writes durable material to Mnemon, then compacts working memory.",
+            short: "subagent -> Mnemon + MEMORY.md compact",
+            events: [
+              { kind: "arrow", from: "host", to: "capability", y: 78, label: "spawn dreaming subagent" },
+              { kind: "arrow", from: "guide", to: "capability", y: 122, label: "dreaming rules" },
+              { kind: "arrow", from: "working", to: "capability", y: 166, label: "read full MEMORY.md" },
+              { kind: "arrow", from: "capability", to: "longterm", y: 210, label: "write via Mnemon protocol" },
+              { kind: "arrow", from: "capability", to: "working", y: 252, label: "compact / evict MEMORY.md" }
+            ],
+            details: [
+              ["trigger", "MEMORY.md quota, pre-compact, or explicit request"],
+              ["action", "Spawn the dedicated dreaming subagent"],
+              ["boundary", "Handles consolidation and cleanup, not online read/write decisions"]
+            ]
+          }
+        },
+        matrixRows: [
+          ["HostAgent", "Core", "Runs tasks, receives hooks, and decides whether to load a skill or subagent.", "Does not own memory storage protocols.", "var(--host)"],
+          ["MEMORY.md", "Core", "Enters the system prompt as working memory.", "Maintained by memory_set.md and the dreaming subagent.", "var(--working)"],
+          ["Mnemon", "Core", "Provides recall and write for long-term memory.", "Backed by the mnemon binary and store.", "var(--longterm)"],
+          ["env.sh", "Config", "Defines MNEMON_MEMORY_LOOP_ENV, MNEMON_MEMORY_LOOP_DIR, and memory thresholds.", "Installed by setup and editable by the user.", "var(--guide)"],
+          ["GUIDE.md", "Manual", "Explains when to read or write memory and what is worth keeping.", "Defines decision policy only, not storage targets.", "var(--guide)"],
+          ["setup/claude-code", "Setup", "Installs four hooks, two skills, the dreaming subagent, and memory files into Claude Code.", "Mounts assets and sets MNEMON_MEMORY_LOOP_DIR.", "var(--guide)"],
+          ["memory_get.md", "Skill", "Entry point for reading memory.", "Binds read behavior to Mnemon recall.", "var(--capability)"],
+          ["memory_set.md", "Skill", "Entry point for writing working memory.", "Binds write behavior to MEMORY.md edits through MNEMON_MEMORY_LOOP_DIR.", "var(--capability)"],
+          ["dreaming", "Subagent", "Maintains, consolidates, and cleans working memory.", "Binds Mnemon write with MEMORY.md compaction and eviction.", "var(--capability)"]
+        ]
+      }
+    };
+
+    const PHASE_ORDER = ["prime", "recall", "nudge", "compact", "dreaming"];
+    const LANGUAGE_STORAGE_KEY = "mnemon-memory-loop-lang";
+    const savedLang = readStoredLanguage();
+    let lang = COPY[savedLang] ? savedLang : ((navigator.language || "").toLowerCase().startsWith("zh") ? "zh" : "en");
+    let activeId = "prime";
+
+    function readStoredLanguage() {
+      try {
+        return localStorage.getItem(LANGUAGE_STORAGE_KEY);
+      } catch {
+        return null;
+      }
+    }
+
+    function storeLanguage(nextLang) {
+      try {
+        localStorage.setItem(LANGUAGE_STORAGE_KEY, nextLang);
+      } catch {
+        return;
+      }
+    }
+
+    function currentCopy() {
+      return COPY[lang];
+    }
+
+    function lanes(t) {
+      return {
+        guide: { x: 105, title: "GUIDE.md", sub: t.laneSub.guide, color: COLOR.guide },
+        host: { x: 315, title: "HostAgent", sub: t.laneSub.host, color: COLOR.host },
+        capability: { x: 555, title: "Capability", sub: t.laneSub.capability, color: COLOR.capability },
+        working: { x: 805, title: "MEMORY.md", sub: t.laneSub.working, color: COLOR.working },
+        longterm: { x: 1020, title: "Mnemon", sub: t.laneSub.longterm, color: COLOR.longterm }
+      };
+    }
+
+    function splitLabel(label, max = 18) {
+      if (label.length <= max) return [label];
+      const words = label.split(" ");
+      if (words.length > 1) {
+        const lines = [];
+        let line = "";
+        words.forEach((word) => {
+          const next = line ? `${line} ${word}` : word;
+          if (next.length > max && line) {
+            lines.push(line);
+            line = word;
+          } else {
+            line = next;
+          }
+        });
+        if (line) lines.push(line);
+        return lines.slice(0, 3);
+      }
+      const chunks = [];
+      let rest = label;
+      while (rest.length > max) {
+        chunks.push(rest.slice(0, max));
+        rest = rest.slice(max);
+      }
+      if (rest) chunks.push(rest);
+      return chunks.slice(0, 3);
+    }
+
+    function svgLabel(label, x, y, color, anchor = "middle", size = 13, weight = 700) {
+      const lines = splitLabel(label);
+      return `<text x="${x}" y="${y}" text-anchor="${anchor}" fill="${color}" font-size="${size}" font-weight="${weight}" font-family="Inter, system-ui, sans-serif">${lines.map((line, index) => `<tspan x="${x}" dy="${index === 0 ? 0 : 16}">${line}</tspan>`).join("")}</text>`;
+    }
+
+    function drawArrow(event, laneMap, markerId) {
+      const from = laneMap[event.from];
+      const to = laneMap[event.to];
+      const y = event.y;
+      const direction = from.x < to.x ? 1 : -1;
+      const x1 = from.x + direction * 64;
+      const x2 = to.x - direction * 64;
+      const mid = (x1 + x2) / 2;
+      const labelWidth = Math.min(210, Math.max(132, event.label.length * 7.5));
+      return `
+        <line x1="${x1}" y1="${y}" x2="${x2}" y2="${y}" stroke="#253040" stroke-width="2.5" marker-end="url(#${markerId})" />
+        <rect x="${mid - labelWidth / 2}" y="${y - 28}" width="${labelWidth}" height="25" rx="6" fill="#ffffff" stroke="#d9e0ea" />
+        ${svgLabel(event.label, mid, y - 11, "#253040", "middle", 12, 800)}
+      `;
+    }
+
+    function drawAction(event, laneMap) {
+      const lane = laneMap[event.actor];
+      const w = 184;
+      const h = 38;
+      const x = lane.x - w / 2;
+      const y = event.y - h / 2;
+      return `
+        <rect x="${x}" y="${y}" width="${w}" height="${h}" rx="8" fill="#ffffff" stroke="${lane.color}" stroke-width="2" />
+        ${svgLabel(event.label, lane.x, event.y + 4, lane.color, "middle", 12, 800)}
+      `;
+    }
+
+    function drawDiagram(phase, t) {
+      const markerId = `arrow-${phase.title.replace(/[^a-z0-9]/gi, "-")}`;
+      const laneMap = lanes(t);
+      const laneGuides = Object.values(laneMap).map((lane) => `
+        <rect x="${lane.x - 92}" y="16" width="184" height="282" rx="8" fill="${lane.color}" opacity="0.045" />
+        <line x1="${lane.x}" y1="66" x2="${lane.x}" y2="288" stroke="${lane.color}" stroke-width="1.3" stroke-dasharray="6 7" opacity="0.52" />
+        <rect x="${lane.x - 82}" y="20" width="164" height="38" rx="19" fill="#ffffff" stroke="${lane.color}" stroke-width="2" />
+        ${svgLabel(lane.title, lane.x, 39, lane.color, "middle", 12, 900)}
+        ${svgLabel(lane.sub, lane.x, 54, "#667085", "middle", 10, 700)}
+      `).join("");
+
+      const events = phase.events.map((event) => {
+        if (event.kind === "arrow") return drawArrow(event, laneMap, markerId);
+        return drawAction(event, laneMap);
+      }).join("");
+
+      return `
+        <svg class="diagram" viewBox="0 0 1120 315" role="img" aria-label="${phase.title} data flow">
+          <defs>
+            <marker id="${markerId}" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
+              <path d="M 0 0 L 10 5 L 0 10 z" fill="#253040"></path>
+            </marker>
+          </defs>
+          <rect x="0" y="0" width="1120" height="315" fill="rgba(255,255,255,0.82)" />
+          ${laneGuides}
+          ${events}
+        </svg>
+      `;
+    }
+
+    function renderStatic() {
+      const t = currentCopy();
+      document.documentElement.lang = t.langAttr;
+      document.title = `Mnemon ${t.title}`;
+      document.getElementById("eyebrow").textContent = t.eyebrow;
+      document.getElementById("page-title").textContent = t.title;
+      document.getElementById("page-summary").textContent = t.summary;
+      document.getElementById("reading-card").innerHTML = `<h2>${t.readingTitle}</h2><ol>${t.reading.map((item) => `<li>${item}</li>`).join("")}</ol>`;
+      document.getElementById("components-title").textContent = t.componentsTitle;
+      document.getElementById("components-intro").textContent = t.componentsIntro;
+      document.getElementById("core-heading").textContent = t.coreHeading;
+      document.getElementById("asset-heading").textContent = t.assetHeading;
+      document.getElementById("rules-title").textContent = t.rulesTitle;
+      document.getElementById("rules-intro").textContent = t.rulesIntro;
+      document.getElementById("flow-title").textContent = t.flowTitle;
+      document.getElementById("flow-intro").textContent = t.flowIntro;
+      document.getElementById("matrix-title").textContent = t.matrixTitle;
+
+      document.getElementById("core-row").innerHTML = t.cores.map((item) => `
+        <div class="core" style="--color: ${item.color};">
+          <b>${item.name}</b>
+          <p>${item.text}</p>
+        </div>
+      `).join("");
+
+      document.getElementById("asset-list").innerHTML = t.assets.map((item) => `
+        <div class="asset" style="--color: ${item.color};">
+          <b>${item.name}</b>
+          <p>${item.text}</p>
+        </div>
+      `).join("");
+
+      document.getElementById("rules").innerHTML = t.rules.map((item) => `
+        <article class="rule" style="--color: ${item.color};">
+          <b>${item.name}</b>
+          <p>${item.text}</p>
+        </article>
+      `).join("");
+    }
+
+    function renderLanguageSwitch() {
+      document.querySelectorAll("[data-lang]").forEach((button) => {
+        const pressed = button.dataset.lang === lang;
+        button.setAttribute("aria-pressed", pressed ? "true" : "false");
+        button.onclick = () => {
+          lang = button.dataset.lang;
+          storeLanguage(lang);
+          renderAll();
+        };
+      });
+    }
+
+    function renderNav() {
+      const t = currentCopy();
+      const nav = document.getElementById("phase-nav");
+      nav.innerHTML = "";
+      PHASE_ORDER.forEach((id) => {
+        const phase = t.phases[id];
+        const button = document.createElement("button");
+        button.type = "button";
+        button.style.setProperty("--color", phaseColors[id]);
+        button.setAttribute("aria-pressed", id === activeId ? "true" : "false");
+        button.innerHTML = `<strong>${phase.title}</strong><span>${phase.short}</span>`;
+        button.addEventListener("click", () => {
+          activeId = id;
+          renderNav();
+          renderPhase();
+        });
+        nav.appendChild(button);
+      });
+    }
+
+    const phaseColors = {
+      prime: "var(--host)",
+      recall: "var(--longterm)",
+      nudge: "var(--working)",
+      compact: "var(--working)",
+      dreaming: "var(--capability)"
+    };
+
+    function renderPhase() {
+      const t = currentCopy();
+      const phase = t.phases[activeId];
+      const view = document.getElementById("phase-view");
+      view.style.setProperty("--color", phaseColors[activeId]);
+      view.innerHTML = `
+        <div class="phase-head">
+          <div>
+            <h2>${phase.title}</h2>
+            <p>${phase.summary}</p>
+          </div>
+          <span class="tag">${phase.tag}</span>
+        </div>
+        <div class="diagram-wrap">${drawDiagram(phase, t)}</div>
+        <div class="details">
+          ${phase.details.map(([label, text]) => `<div class="detail"><b>${t.detailLabels[label]}</b><p>${text}</p></div>`).join("")}
+        </div>
+      `;
+    }
+
+    function renderMatrix() {
+      const t = currentCopy();
+      const matrix = document.getElementById("matrix");
+      matrix.innerHTML = `
+        ${t.matrixHeaders.map((label) => `<div class="matrix-cell head">${label}</div>`).join("")}
+        ${t.matrixRows.map(([asset, type, role, boundary, color]) => `
+          <div class="matrix-cell" style="--color: ${color};"><b>${asset}</b></div>
+          <div class="matrix-cell"><p>${type}</p></div>
+          <div class="matrix-cell"><p>${role}</p></div>
+          <div class="matrix-cell"><p>${boundary}</p></div>
+        `).join("")}
+      `;
+    }
+
+    function renderAll() {
+      renderStatic();
+      renderLanguageSwitch();
+      renderNav();
+      renderPhase();
+      renderMatrix();
+    }
+
+    renderAll();
+  </script>
+</body>
+</html>
diff --git a/docs/research/agent-systems/README.md b/docs/design/self-evolution-harness/research/agent-systems/README.md
similarity index 97%
rename from docs/research/agent-systems/README.md
rename to docs/design/self-evolution-harness/research/agent-systems/README.md
index 87c976b9..83300965 100644
--- a/docs/research/agent-systems/README.md
+++ b/docs/design/self-evolution-harness/research/agent-systems/README.md
@@ -1,6 +1,6 @@
 # Agent Systems Research
 
-本目录保留 Mnemon self-evolution harness 设计的来源索引与研究摘要。详细分项目调研已经浓缩进 [Self-Evolution Harness 设计](../../design/SELF_EVOLUTION_HARNESS.md)，不再维护多份长研究笔记。
+本目录保留 Mnemon self-evolution harness 设计的来源索引与研究摘要。详细分项目调研已经浓缩进 [Self-Evolution Harness 设计](../../SELF_EVOLUTION_HARNESS.md)，不再维护多份长研究笔记。
 
 ## Scope
 
diff --git a/docs/framework/HARNESS.md b/docs/framework/HARNESS.md
index 6734176e..31882410 100644
--- a/docs/framework/HARNESS.md
+++ b/docs/framework/HARNESS.md
@@ -464,7 +464,7 @@ Self-evolution should start as a lightweight markdown loop, not a heavy
 framework.
 
 The full v0.2 architecture is consolidated in
-[Self-Evolution Harness Design](../design/SELF_EVOLUTION_HARNESS.md).
+[Self-Evolution Harness Design](../design/self-evolution-harness/SELF_EVOLUTION_HARNESS.md).
 
 Mnemon should not automatically rewrite runtime behavior. It should help the
 agent notice repeated experience, preserve evidence, and propose markdown
diff --git a/docs/zh/DESIGN.md b/docs/zh/DESIGN.md
index 640d86d7..dad21e22 100644
--- a/docs/zh/DESIGN.md
+++ b/docs/zh/DESIGN.md
@@ -6,7 +6,7 @@
 
 Mnemon 是一个为 LLM agent 设计的持久化记忆系统。它采用 **LLM-Supervised** 模式：宿主 LLM 作为独立记忆 Binary 的外部编排者，通过符号化 CLI 接口交互，而 Binary 负责确定性的存储、图索引和生命周期管理。记忆以四图知识结构组织 — temporal、entity、causal、semantic 四种 edge。以单一 Go binary + SQLite 的形式实现，不依赖任何外部 API。
 
-本文档描述当前 Mnemon binary 与 engine architecture。更上层的 memory harness doctrine 见 [Mnemon Memory Harness](framework/HARNESS.md)，可安装 runtime 资产见 [INSTALL.md](framework/INSTALL.md) 和 [GUIDELINE.md](framework/GUIDELINE.md)。v0.2 自进化架构已收敛到 [Self-Evolution Harness 设计](../design/SELF_EVOLUTION_HARNESS.md)。
+本文档描述当前 Mnemon binary 与 engine architecture。更上层的 memory harness doctrine 见 [Mnemon Memory Harness](framework/HARNESS.md)，可安装 runtime 资产见 [INSTALL.md](framework/INSTALL.md) 和 [GUIDELINE.md](framework/GUIDELINE.md)。v0.2 自进化架构已收敛到 [Self-Evolution Harness 设计](../design/self-evolution-harness/SELF_EVOLUTION_HARNESS.md)。
 
 ---
 
@@ -40,7 +40,7 @@ MAGMA 四图模型（temporal、entity、causal、semantic），LLM 注意力与
 
 Markdown 可安装的 runtime 集成：`SKILL.md`、`INSTALL.md`、`GUIDELINE.md`、四个 hook phase（Prime、Remind、Nudge、Compact）、agent 主导的记忆判断、可选 setup 自动化，以及轻量 Markdown 自进化。
 
-### [Self-Evolution Harness](../design/SELF_EVOLUTION_HARNESS.md)
+### [Self-Evolution Harness](../design/self-evolution-harness/SELF_EVOLUTION_HARNESS.md)
 
 v0.2 的 agent-agnostic 安装挂载、`.mnemon` canonical filesystem、记忆巩固循环、技能演进、可选维护 runner 与 proposal-first 风控架构。
 
diff --git a/docs/zh/README.md b/docs/zh/README.md
index 308cc2f5..c51fcd8f 100644
--- a/docs/zh/README.md
+++ b/docs/zh/README.md
@@ -232,8 +232,8 @@ make help           # 显示所有目标
 - [Mnemon Memory Harness](framework/HARNESS.md) — skill-first memory harness 设计与安装指引
 - [Harness 安装指南](framework/INSTALL.md) — 面向 agent 的安装契约
 - [Memory Guideline](framework/GUIDELINE.md) — recall/writeback 判断策略
-- [Self-Evolution Harness 设计](../design/SELF_EVOLUTION_HARNESS.md) — v0.2 安装挂载、记忆循环、技能演进与风控架构
-- [Agent Systems Research](../research/agent-systems/README.md) — 记忆与自进化调研的浓缩来源索引
+- [Self-Evolution Harness 设计](../design/self-evolution-harness/SELF_EVOLUTION_HARNESS.md) — v0.2 安装挂载、记忆循环、技能演进与风控架构
+- [Agent Systems Research](../design/self-evolution-harness/research/agent-systems/README.md) — 记忆与自进化调研的浓缩来源索引
 - [设计与架构](DESIGN.md) — 当前 engine architecture、核心概念、算法、集成设计
 - [用法与参考](USAGE.md) — CLI 命令、嵌入向量支持、架构概览
 - [架构图](../diagrams/) — 系统架构、记忆/召回流程、四图模型、生命周期管理
diff --git a/docs/zh/framework/HARNESS.md b/docs/zh/framework/HARNESS.md
index 4bb4ebff..1057b320 100644
--- a/docs/zh/framework/HARNESS.md
+++ b/docs/zh/framework/HARNESS.md
@@ -401,7 +401,7 @@ Harness 失败的表现：
 
 自进化应先从轻量 Markdown loop 开始，而不是先做重型 framework。
 
-完整 v0.2 架构已收敛到 [Self-Evolution Harness 设计](../../design/SELF_EVOLUTION_HARNESS.md)。
+完整 v0.2 架构已收敛到 [Self-Evolution Harness 设计](../../design/self-evolution-harness/SELF_EVOLUTION_HARNESS.md)。
 
 Mnemon 不应自动改写 runtime 行为。它应帮助 agent 发现重复经验、保存证据，并提出 Markdown 变更候选；这些候选必须由人类或仓库 review 接受后才生效。