From 1771fb48a9c352bae321c309bbe320dba76434de Mon Sep 17 00:00:00 2001
From: DDT <––1786035110@stu.gpnu.edu.cn>
Date: Sun, 23 Aug 2026 20:16:15 +0800
Subject: [PATCH 1/7] =?UTF-8?q?=E6=95=B4=E7=90=86=E9=98=B6=E6=AE=B5?=
 =?UTF-8?q?=E4=BA=94=E5=87=86=E5=85=A5=E6=96=87=E6=A1=A3=E5=B9=B6=E5=BB=BA?=
 =?UTF-8?q?=E7=AB=8B=E9=98=B6=E6=AE=B5=E5=9F=BA=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...56\346\240\207\344\273\273\345\212\241.md" | 444 ++++++++++++++++++
 ...06\345\205\245\346\270\205\345\215\225.md" | 140 ++++++
 2 files changed, 584 insertions(+)
 create mode 100644 "docs/taget/\347\254\254\344\272\224\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md"
 create mode 100644 "docs/taget/\351\230\266\346\256\265\344\272\224\345\207\206\345\205\245\346\270\205\345\215\225.md"

diff --git "a/docs/taget/\347\254\254\344\272\224\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md" "b/docs/taget/\347\254\254\344\272\224\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md"
new file mode 100644
index 0000000..3cc4fdd
--- /dev/null
+++ "b/docs/taget/\347\254\254\344\272\224\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md"
@@ -0,0 +1,444 @@
+# 第五阶段目标任务：非 AI 体验与本地收口
+
+## 0. 阶段状态与适用范围
+
+本文件是阶段五的目标任务和实现前契约，不代表本阶段业务已经实现。2026-08-23 的“阶段 5 迭代 0”只完成阶段准入、基线记录和文档落盘；S5-01～S5-09 均待后续迭代实施。
+
+阶段五定位为“非 AI 体验与本地收口”：在阶段四已有的公开阅读、评论、工具和搜索基础上，补齐知识星图、终端导航、首页标志性动效、音乐与频谱、404 彩蛋、PWA 离线工具箱，以及重型效果的生命周期和降级边界。
+
+本阶段继续遵循“仪器而非装饰、降级是一等路径、可读性永远赢”。首页首幕和文章正文必须不依赖 JavaScript；Three.js、图谱渲染、音频分析和 Service Worker 都不能成为内容可见性的前置条件。
+
+## 一、阶段目标与非目标
+
+### 1.1 阶段目标
+
+- 让文章、标签、分类和工具可以通过受限的知识星图被发现，并在移动端退化为可读的时间线。
+- 提供浏览器内白名单终端，支持导航、搜索和主题切换；任何命令都不连接服务器 Shell。
+- 将首页明确实现为“夜空校准 → 星图接入 → 近期观测日志”三幕，首幕为 SSR 静态内容，第二幕才按需加载 Three.js。
+- 提供默认不自动播放的全局音乐、频谱和波形体验；音频只从服务端配置的受信任 OSS/CDN 清单加载。
+- 提供可跳过、可关闭、移动端可降级的“丢失信号修复”404 小游戏。
+- 让 /tools 的浏览器端工具具备最小范围离线能力，不缓存私有数据、文章正文、评论、Studio 或 API 响应。
+- 在 360/768/1280/1600px、键盘、触摸、prefers-reduced-motion、Save-Data、无 JavaScript和资源加载失败路径下，保持可用和可读。
+- 为阶段六的 2GB 加固保留可测量的资源、缓存、并发和生命周期边界。
+
+### 1.2 明确非目标
+
+本阶段不实现、不验收以下项目：
+
+- AI Chat、SSE、RAG、Embedding、选区问答、后台创作、模型额度、费用台账和 AI 评测。
+- 域名、HTTPS、ICP/公安备案、部署、ACR、远端 CI、真实生产环境或云资源变更。
+- 真实 OSS 媒体上传改造、真实 SMTP 投递、备份恢复演练和生产合规材料。
+- 30 分钟压力测试、生产容器内存加固、日志轮转和回滚演练；这些属于阶段六或阶段七的外部/运行验收。
+- Studio 曲目 CRUD、音乐上传、曲目审核或数据库音乐表；音乐只消费服务端配置的受信任 OSS/CDN JSON 清单。
+- 通过终端执行任意 Shell、SQL、文件系统、网络抓取或未列入白名单的命令。
+- 把全文、评论正文、管理数据或任意 HTML/JavaScript放入图谱、PWA 缓存或音乐清单。
+- 全屏粒子、大面积模糊玻璃、传统顶部导航、三列文章卡片、九宫格工具卡片或为动效引入 React Framer Motion。
+- 新建微服务、Redis、消息队列、独立搜索服务、MinIO 或新的数据库表；若实现阶段发现确需改变边界，必须先重新进行阶段准入。
+
+## 二、既有基线与架构边界
+
+- API 仍是 Java 21 + Spring Boot 模块化单体，业务边界为 identity、content、comment、toolbox、ai、media、site、shared。
+- Web 仍是 Nuxt 4 + Vue 3 + TypeScript；公开站点 SSR，/studio CSR。公共内容契约继续由 OpenAPI 和 packages/api-client 负责。
+- 图谱数据由服务端从已公开的文章、标签、分类和工具读模型生成，不向浏览器发送全文，不由客户端拼接管理数据。
+- 音频二进制不经过 Spring Boot；Nuxt 服务端读取受信任 manifest 的地址，浏览器只接收校验后的清单和允许的 HTTPS 音频地址。
+- 重型客户端模块必须路由或交互懒加载，并在路由离开、组件卸载和 Feature Flag 关闭时释放监听器、计时器、Worker、AudioContext、AnalyserNode、Three.js 场景和纹理。
+- 阶段五不修改现有迁移文件，不创建新迁移；S5-01 的第一版 Feature Flag 采用服务端配置/公开读模型，不做 Studio 配置 CRUD。
+
+## 三、任务依赖关系
+
+~~~mermaid
+flowchart LR
+  S500["S5-00 阶段准入"] --> S501["S5-01 图谱契约与 Feature Flag"]
+  S501 --> S502["S5-02 知识星图"]
+  S501 --> S503["S5-03 安全终端与主题"]
+  S501 --> S504["S5-04 首页三幕与 Three.js"]
+  S501 --> S505["S5-05 音乐与频谱"]
+  S501 --> S506["S5-06 404 信号修复"]
+  S501 --> S507["S5-07 PWA 离线工具箱"]
+  S502 --> S508["S5-08 性能、生命周期与降级收口"]
+  S503 --> S508
+  S504 --> S508
+  S505 --> S508
+  S506 --> S508
+  S507 --> S508
+  S508 --> S509["S5-09 综合验收与文档"]
+~~~
+
+依赖原则：S5-01 先冻结公开数据和开关，避免视觉组件各自定义数据；S5-02～S5-07 可以并行开发，但都必须把资源释放和关闭开关交给 S5-08 统一验收；S5-09 只在降级、生命周期和公开契约全部可复现后收口。
+
+## 四、公共契约、数据结构与 Feature Flag
+
+以下是后续实现时必须通过 OpenAPI、Nuxt Server Route 或静态资源契约固化的公开接口。本轮不新增接口代码，也不修改 docs/openapi/public-api.yaml。
+
+### 4.1 公开接口
+
+| 接口 | 所属 | 目的与硬边界 |
+| --- | --- | --- |
+| GET /api/v1/public/site | Spring Boot | 在现有站点响应中增加公开的 featureFlags；保留现有 commentsEnabled、ETag 和缓存语义。不返回密钥、内部配置或 Studio 权限。 |
+| GET /api/v1/public/knowledge-graph | Spring Boot | 返回受限图谱 JSON；只含公开节点摘要、关系、权重、版本和 ETag，不含 Markdown、评论、未发布内容或管理字段。 |
+| GET /music-manifest.json | Nuxt Server Route/静态边界 | 由服务端配置的 HTTPS OSS/CDN manifest 地址提供校验后的清单；不提供 Studio 曲目 CRUD，不代理音频二进制。若源不可用，返回空清单并保留播放器降级文案。 |
+| GET /manifest.webmanifest | Web 静态资源 | 只描述公开站点和工具箱的安装元数据，不声明 Studio、评论写入或后台能力。 |
+| GET /sw.js | Web 静态资源 | 只负责公开工具箱的最小缓存和更新；不得拦截或持久化 /api/**、/studio/**、评论提交、登录和文章私有预览。 |
+
+终端、404 游戏、频谱和 Three.js 都是浏览器内功能，不另开 API。终端复用现有公开文章、搜索、工具和站点接口；ask 命令在阶段五只返回“AI 尚未在本阶段开放”的本地提示，不发送 AI 请求。
+
+### 4.2 图谱数据结构
+
+~~~ts
+type KnowledgeGraphNodeKind = 'ARTICLE' | 'TAG' | 'CATEGORY' | 'TOOL'
+type KnowledgeGraphRelation = 'TAGGED' | 'CATEGORIZED' | 'RELATED_TOOL' | 'SHARED_TAG'
+
+interface KnowledgeGraphNode {
+  id: string
+  kind: KnowledgeGraphNodeKind
+  label: string
+  href: string | null
+  weight: number
+  publishedAt?: string
+}
+
+interface KnowledgeGraphEdge {
+  source: string
+  target: string
+  relation: KnowledgeGraphRelation
+  weight: number
+}
+
+interface KnowledgeGraphResponse {
+  schemaVersion: 1
+  generatedAt: string
+  nodes: KnowledgeGraphNode[]
+  edges: KnowledgeGraphEdge[]
+}
+~~~
+
+服务端默认上限为 120 个节点、360 条边；实际值以实现时的资源观测为准，但必须有硬上限。href 只能是站内安全路径，节点标签和类型必须同时表达状态，不能只用颜色区分。移动端无需请求全文，退化视图复用节点的标签、类型和站内链接。
+
+### 4.3 音乐清单数据结构
+
+~~~ts
+interface MusicManifest {
+  schemaVersion: 1
+  defaultTrackId: string | null
+  tracks: Array<{
+    id: string
+    title: string
+    artist: string | null
+    audioUrl: string
+    coverUrl: string | null
+    license: 'ORIGINAL' | 'CC_BY' | 'CC_BY_SA' | 'OTHER_AUTHORIZED'
+    attributionUrl: string | null
+  }>
+}
+~~~
+
+服务端只信任配置的 HTTPS OSS/CDN 来源和允许的 host；客户端仍需校验 schema、URL 协议、条目数量和必填字段。建议最多 30 首；音频地址只在用户点击播放后才加载，默认不自动播放。每首曲目必须有授权说明或归属链接。
+
+### 4.4 Feature Flag
+
+第一版采用服务端配置并通过 GET /api/v1/public/site 下发；不增加 Studio 开关编辑页面，不把开关写入浏览器可篡改的“真值”。客户端检测到缺失、非法或接口失败时，一律选择关闭重型效果的安全默认值。
+
+| Flag | 作用 | 安全默认 | 依赖 |
+| --- | --- | --- | --- |
+| terminal | 开放 ⌘K/Ctrl+K 白名单终端 | false | 现有公开文章、搜索、工具接口 |
+| knowledgeGraph | 图谱 Canvas/Force 视图 | false | S5-01 图谱契约 |
+| homeScene | 首页第二幕 Three.js | false | knowledgeGraph 或静态首页数据 |
+| music | 全局播放器和清单 | false | 服务端 manifest |
+| spectrum | Web Audio 频谱/波形 | false | music、用户播放手势 |
+| signalRepair404 | 404 三步修复小游戏 | false | 本地组件 |
+| pwa | 工具箱 manifest、Service Worker 和离线缓存 | false | 工具页面 |
+
+data-theme="night|blueprint" 是用户本地选择，不是远端 Feature Flag；必须使用 html data-theme 和 CSS Token。prefers-reduced-motion、Save-Data、触摸和设备能力属于运行时降级信号，不得被远端开关覆盖。AI 相关开关不在本阶段新增。
+
+## 五、详细任务清单
+
+### S5-00：阶段准入
+
+| 属性 | 内容 |
+| --- | --- |
+| 优先级 | P0，阶段准入 |
+| 前置依赖 | 无 |
+| 工作量 | 2–4 小时 |
+| 公开接口 | 无 |
+| 数据结构/Flag | 冻结本文件和准入清单，不创建运行时结构 |
+
+目标：记录阶段四本地验收基线、当前分支和用户改动，确认阶段五只做非 AI 体验与本地收口。
+
+非目标：不恢复被用户删除的阶段四文档，不提交、不推送、不部署，不写业务代码、OpenAPI、迁移或空类。
+
+验收标准：
+
+- 阶段 2/3 历史文档、阶段 4 收口文档的来源和路径差异可追溯。
+- 当前环境命令、API/Web/OpenAPI/Compose 入口和 Git 状态已记录。
+- 阶段五任务、依赖、外部未执行项目和完成定义已落盘。
+- 用户对 AGENTS.md 和完整开发计划的未提交修改保持原样。
+
+测试场景：检查 git status --short --untracked-files=all、git diff --check、文档链接和目标路径；不运行会改变业务状态的命令。
+
+### S5-01：图谱契约与 Feature Flag
+
+| 属性 | 内容 |
+| --- | --- |
+| 优先级 | P0 |
+| 前置依赖 | S5-00 |
+| 工作量 | 6–10 小时 |
+| 公开接口 | GET /api/v1/public/site、GET /api/v1/public/knowledge-graph |
+| 数据结构/Flag | KnowledgeGraphResponse、4 类节点、7 个阶段五开关 |
+
+目标：冻结图谱的最小公开读模型、ETag/缓存、节点上限、站内链接策略和体验开关，让后续组件不自行读取 JPA 实体或管理 API。
+
+非目标：不返回全文、不做全文搜索替代、不增加数据库表、不做 Studio 配置 CRUD、不开放 AI 或通用远程配置。
+
+验收标准：
+
+- OpenAPI 中的响应字段与生成客户端一致，DTO 不暴露实体。
+- 只返回已公开文章、已公开工具及其标签/分类关系；草稿、预览、归档和后台字段永不出现。
+- ETag 对图谱版本和影响响应的数据稳定，接口失败时客户端可使用空/静态回退。
+- 开关关闭或响应缺失时，页面仍能显示静态导航和文本内容。
+- 节点和边数量、字符串长度、响应体大小有硬上限。
+
+测试场景：空站点、单节点、重复关系、未发布文章、越界节点、ETag/304、未知 flag、损坏 JSON、服务端 5xx 和客户端默认关闭。
+
+### S5-02：知识星图
+
+| 属性 | 内容 |
+| --- | --- |
+| 优先级 | P1 |
+| 前置依赖 | S5-01 |
+| 工作量 | 12–18 小时 |
+| 公开接口 | GET /api/v1/public/knowledge-graph |
+| 数据结构/Flag | 图谱节点/边、knowledgeGraph |
+
+目标：使用 Canvas + 受限 Force 布局呈现文章、标签、分类和工具的关系；单击显示摘要导航，双击进入安全站内路径。
+
+非目标：不在浏览器拉取全文，不引入全量 D3，不做无限缩放、用户编辑关系或实时协作，不依赖 Three.js 才能使用图谱。
+
+实现边界：只评估和引入 d3-force/d3-scale 等最小模块，并按路由懒加载；若资源预算不通过，保留同一契约并退回静态 SVG/时间线，不扩大依赖。
+
+验收标准：
+
+- 桌面可键盘聚焦、选择和打开节点；节点类型、标签和关系不只通过颜色表达。
+- 移动端、低性能设备、Save-Data、reduced-motion 或图谱失败时退化为可读时间线。
+- 图谱不进入文章详情初始客户端闭包；离开页面会取消布局、移除监听器并释放 Canvas。
+- 节点数量达到上限时仍可稳定渲染，超限时按公开权重确定性截断。
+
+测试场景：空图、最大图、断链、重复节点、键盘导航、触摸点击、双击进入、360px、禁用 JS、Save-Data、reduced-motion、动态块加载失败和路由离开。
+
+### S5-03：安全终端与主题
+
+| 属性 | 内容 |
+| --- | --- |
+| 优先级 | P1 |
+| 前置依赖 | S5-01 |
+| 工作量 | 8–12 小时 |
+| 公开接口 | 复用文章列表、搜索、工具和站点公开接口；不新增 Shell API |
+| 数据结构/Flag | 白名单命令 AST、终端历史上限、terminal、data-theme |
+
+目标：通过 Dock 或 Ctrl/Cmd+K 打开可访问的命令终端，支持 help、ls posts、ls tools、grep "词"、open /articles/...、theme blueprint 和 theme night。
+
+非目标：不执行 Shell/SQL/JS，不读取本地文件，不拼接任意 URL，不实现 AI ask 请求；ask 只能返回阶段未开放提示或转到本地搜索。
+
+验收标准：
+
+- Parser 只接受固定命令和长度上限，未知命令返回文本错误，不抛出页面级异常。
+- 所有路径、搜索词、终端历史和输出均有长度/条数上限；不把用户输入写入 HTML 为可执行内容。
+- Dialog 具备 role="dialog"、aria-modal、焦点陷阱、Esc 关闭和键盘历史；移动端不依赖 hover。
+- theme blueprint 和 Logo 五连击只改变 html data-theme 与 CSS Token；刷新后可恢复，无法写入服务端权限。
+- 不支持 backdrop-filter 时使用不透明背景；reduced-motion 时直接切换状态。
+
+测试场景：命令注入字符、超长输入、未授权路径、键盘/触摸、焦点恢复、刷新主题、localStorage 不可用、旧浏览器、ask 降级和公开 API 失败。
+
+### S5-04：首页三幕与 Three.js
+
+| 属性 | 内容 |
+| --- | --- |
+| 优先级 | P1 |
+| 前置依赖 | S5-01；图谱契约可用后接入 S5-02 |
+| 工作量 | 12–18 小时 |
+| 公开接口 | 复用站点、文章和图谱公开读模型 |
+| 数据结构/Flag | 三幕状态、静态 SVG 回退、homeScene |
+
+目标：实现“夜空校准”SSR 首幕、“星图接入”滚动触发幕、“近期观测日志”SSR 第三幕。Three.js 只在第二幕进入视口后动态导入。
+
+非目标：不在首屏加载 Three.js，不让 3D 负责标题/导航/近期文章，不把 3D 放入文章或 Studio 包，不为失败状态显示空白画布。
+
+验收标准：
+
+- 禁用 JavaScript 时首幕标题、说明、导航和近期日志仍在 HTML 中；第三幕仍可阅读。
+- homeScene=false、移动端、Save-Data、reduced-motion、WebGL 不可用或动态块失败时显示静态 SVG/文本关系图。
+- Three.js 与可能的编排模块只进入首页按需 chunk，压缩资源目标小于 500KB；文章初始包不包含它们。
+- 首页离开时销毁 geometry/material/texture/renderer、取消 RAF 和 observers，重复进入不累积资源。
+- 动效只使用 transform/opacity 等合成属性，扫描线和呼吸灯优先 CSS-first。
+
+测试场景：SSR/无 JS、首屏不发 3D 请求、滚动触发、快速进出视口、WebGL 失败、动态 import 失败、重复路由进入、360px、Save-Data、reduced-motion、键盘和屏幕阅读器。
+
+### S5-05：音乐与频谱
+
+| 属性 | 内容 |
+| --- | --- |
+| 优先级 | P1 |
+| 前置依赖 | S5-01 |
+| 工作量 | 8–12 小时 |
+| 公开接口 | Nuxt GET /music-manifest.json；音频由 manifest 指向 OSS/CDN |
+| 数据结构/Flag | MusicManifest、播放器状态、music、spectrum |
+
+目标：提供跨路由持续的轻量播放器和可关闭的 Web Audio 频谱/波形；播放只由用户手势开始，音频不经 Spring Boot。
+
+非目标：不自动播放、不做上传和曲目 CRUD、不保存用户音频、不在服务端转码、不把 AudioContext 放进文章首屏，不把外部任意 URL 当作可信音频。
+
+验收标准：
+
+- 服务端只读取配置的 HTTPS manifest 来源，校验 schema、host、协议、授权字段和条目上限；源失败时播放器可隐藏或显示离线提示。
+- 用户未点击播放前不请求音频、不创建持续 AudioContext；浏览器拒绝 autoplay 时页面仍正常。
+- 路由切换不打断播放；离开播放器所有者或关闭频谱时释放 analyser、MediaElementSource、RAF 和事件监听器，不泄漏到 Studio。
+- 频谱失败、Save-Data、reduced-motion、低性能或不支持 Web Audio 时只保留播放控制和静态状态灯。
+- UI 使用 role="region"/适当按钮名称和 aria-live 的低频状态播报；颜色不作为唯一状态。
+
+测试场景：合法/损坏/超大/跨域 manifest、非 HTTPS URL、未授权条目、用户手势、暂停/继续、路由切换、音频错误、AudioContext 拒绝、无 Web Audio、Save-Data、reduced-motion 和 Studio 隔离。
+
+### S5-06：404 信号修复
+
+| 属性 | 内容 |
+| --- | --- |
+| 优先级 | P1 |
+| 前置依赖 | S5-01 |
+| 工作量 | 4–6 小时 |
+| 公开接口 | 复用站内搜索；无专用后端接口 |
+| 数据结构/Flag | 本地 RepairState、signalRepair404 |
+
+目标：在现有 error.vue 中提供轻量三步断点修复游戏，成功后回到首页；失败、关闭或无 JavaScript 时始终保留搜索和文章建议。
+
+非目标：不使用 Three.js、Canvas 大场景、网络排行榜、登录、积分、远端存档或阻塞错误页离开。
+
+验收标准：
+
+- 错误页的状态码、标题、原因和可访问的返回路径不依赖游戏脚本。
+- 游戏状态只在内存中保存；移动端、reduced-motion、Save-Data 或 flag 关闭时显示搜索框和建议文章。
+- 任意步骤失败都能重置或跳过；成功后只进行普通站内导航。
+- 控件可键盘操作，断点不只用颜色表达，动效可直接关闭。
+
+测试场景：404/500、禁用 JS、flag 关闭、移动端、键盘、重复点击、刷新、游戏失败/成功、搜索接口失败和返回首页。
+
+### S5-07：PWA 离线工具箱
+
+| 属性 | 内容 |
+| --- | --- |
+| 优先级 | P1 |
+| 前置依赖 | S5-01；现有工具箱完成 |
+| 工作量 | 8–14 小时 |
+| 公开接口 | /manifest.webmanifest、/sw.js；不缓存后台 API |
+| 数据结构/Flag | 静态 manifest、缓存版本/白名单、pwa |
+
+目标：让公开工具箱在已访问并完成安装/缓存后可离线打开，JSON、Base64、URL、时间戳和正则工具仍在浏览器/Worker 内运行。
+
+非目标：不离线写入评论或文章，不缓存 API 响应、Cookie、Session、Studio、预览链接、完整文章正文、用户输入或第三方任意脚本，不实现后台同步。
+
+验收标准：
+
+- Service Worker scope 和缓存白名单只覆盖公开工具箱静态资源及明确允许的页面壳。
+- 首次安装、更新失败、缓存损坏、离线未命中和浏览器不支持时都有在线/无 JS 可读回退。
+- 新版本使用可观测的 cache key，旧缓存可控清理；更新期间不删除当前可用版本。
+- 工具输入不写入 Cache Storage、IndexedDB 或日志；Worker 继续遵守既有输入上限和 250ms 正则超时。
+- Lighthouse/Playwright 可验证安装元数据、离线工具路由、缓存边界和在线恢复。
+
+测试场景：首次访问、离线打开 /tools、各五个工具、刷新、更新、缓存损坏、网络恢复、API/Studio 不被拦截、无 JavaScript、Save-Data 和浏览器不支持 Service Worker。
+
+### S5-08：性能、生命周期与降级收口
+
+| 属性 | 内容 |
+| --- | --- |
+| 优先级 | P0 |
+| 前置依赖 | S5-02～S5-07 |
+| 工作量 | 10–16 小时 |
+| 公开接口 | 不新增；验证前述契约的失败和缓存语义 |
+| 数据结构/Flag | 降级决策表、资源预算、dispose 清单 |
+
+目标：把每个重型能力的进入条件、资源预算、关闭路径、异常路径和可观测结果收敛为一套可重复规则。
+
+非目标：不做 30 分钟压测、不修改生产容器上限、不引入监控平台、不把“浏览器能运行”当作内存和 CPU 通过。
+
+验收标准：
+
+- 文章初始 JS 继续不超过 180KB gzip；Three.js、图谱、音乐可视化、PWA 安装逻辑不进入文章初始闭包。
+- 360/768/1280/1600px、Chrome Chromium E2E、键盘、触摸、无 JS、Save-Data、reduced-motion 均有自动化或明确手工记录。
+- 每个模块有 onMounted/onBeforeUnmount 或等价清理：AbortController、Observer、RAF、Timer、Worker、AudioContext、Three.js 和缓存更新监听均可重复进入退出。
+- Flag 关闭、运行时能力不足、动态资源失败、接口 5xx 和超时都回到静态可读路径，不出现死按钮、空面板或永久 loading。
+- 页面性能、可访问性和 SEO 不因阶段五效果低于既有阶段四门槛；阶段六再进行 30 分钟资源压测。
+
+测试场景：路由快速往返、并发加载图谱/首页/音乐、动态块失败、资源加载超时、低端/移动 viewport、A11y tree、文章 bundle、Lighthouse、控制台未处理异常和缓存清理。
+
+### S5-09：综合验收与文档
+
+| 属性 | 内容 |
+| --- | --- |
+| 优先级 | P0，阶段收口 |
+| 前置依赖 | S5-08 |
+| 工作量 | 8–12 小时 |
+| 公开接口 | OpenAPI、Nuxt manifest、Service Worker 与现有公开接口全部复核 |
+| 数据结构/Flag | 固定验收数据、Flag 矩阵、降级矩阵、结果记录 |
+
+目标：将阶段五的公开契约、视觉路径、资源预算、降级和生命周期固化为可重复的本地验收，并同步真实文档命令。
+
+非目标：不把本地通过写成远端 CI、真实 OSS/SMTP、备案、部署、生产压测或 AI 通过；不提交、推送或创建 PR。
+
+验收标准：
+
+- 图谱契约与生成客户端无差异；所有新增后端接口均有 Problem Details、ETag/缓存和边界测试。
+- 首页三幕、终端主题、音乐频谱、404、PWA 均有主路径、关闭开关和失败降级路径。
+- 文章 SSR、工具离线、终端安全、音频授权、Service Worker 缓存边界和资源释放均可验证。
+- README、完整开发计划、本地启动指南和阶段五文档只记录真实存在的命令和真实状态；本阶段没有业务实现时不提前勾选完成。
+- git diff --check 通过，未授权的用户改动未被覆盖、恢复、提交或删除。
+
+## 六、阶段五测试与验收计划
+
+### 6.1 契约与单元测试
+
+- API：图谱节点/边截断、公开可见性、稳定 ETag、Feature Flag 默认值、非法 manifest 配置和安全路径校验。
+- Web：终端 parser、主题状态、图谱数据归一化、音乐 manifest 校验、播放器状态机、频谱降级、404 状态机、PWA cache allowlist 和更新策略。
+- OpenAPI：生成 packages/api-client 后执行 check，禁止在 apps/web 手写重复 DTO。
+
+### 6.2 浏览器与 SSR 场景
+
+- 无 JavaScript打开首页、文章、404 和工具页，标题、正文/工具说明、错误路径和主要导航仍可用。
+- 首次进入首页不请求 Three.js；滚动进入第二幕后才加载，并在离开时释放。
+- 关闭所有阶段五 flags 后页面退回阶段四可用体验，不产生空白区域或报错。
+- 访问 360px、768px、1280px、1600px；键盘完成 Dock、终端、主题、播放器、图谱和 404 操作；触摸不依赖 hover。
+- Save-Data 和 prefers-reduced-motion 下不运行不必要动画；Lighthouse/控制台无回归。
+- 音乐只在用户手势后发起请求；路由切换不泄漏分析器；PWA 离线只支持公开工具箱。
+
+### 6.3 安全和资源场景
+
+- 终端命令注入、URL 穿越、超长输入、恶意搜索词和 XSS 字符不执行。
+- 图谱节点/链接、manifest 的音频/封面地址和 Service Worker scope 均执行协议、host、长度和数量限制。
+- 文章初始客户端闭包不含 Three.js、图谱重型依赖、编辑器、Worker 或音频分析代码。
+- 动态导入失败、WebGL/Web Audio 不可用、接口 5xx、缓存损坏、第三方资源超时都能回退。
+
+## 七、迭代安排与工作量
+
+按个人每周 15–20 小时估算，阶段五约 78–122 个理想开发小时，实际取决于图谱可视化和 Three.js 场景的复杂度。建议按以下顺序推进：
+
+| 迭代 | 任务 | 交付结果 |
+| --- | --- | --- |
+| 迭代 0 | S5-00 | 阶段准入、基线、任务文档和未执行项目清单 |
+| 迭代 1 | S5-01、S5-02 | 图谱契约、开关和静态/桌面图谱闭环 |
+| 迭代 2 | S5-03、S5-04 | 终端主题和首页三幕，含 Three.js 关闭回退 |
+| 迭代 3 | S5-05、S5-06、S5-07 | 音乐频谱、404 和工具箱最小离线能力 |
+| 迭代 4 | S5-08、S5-09 | 生命周期、性能降级、综合验收和文档收口 |
+
+并行规则：S5-03～S5-07 可以并行，但任何模块进入综合验收前都必须实现对应的关闭开关、无 JS/能力失败回退和卸载清理；没有这些路径，不得以“主路径可用”提前完成。
+
+## 八、阶段五最终完成定义
+
+阶段五只有同时满足以下条件才算完成：
+
+- S5-00～S5-09 的任务验收记录完整，且阶段文档、README/启动指南中的命令与真实脚本一致。
+- 知识星图使用受限公开契约，桌面交互可用，移动端和能力不足时退化为时间线；未公开数据和全文不泄露。
+- 终端是浏览器内白名单解析器，主题切换使用 html data-theme；无任何服务器 Shell 或 AI 请求越权。
+- 首页三幕首幕和日志 SSR 可读，Three.js 仅按需加载、文章包外置、离开路由彻底释放，失败时有静态回退。
+- 音乐来自服务端配置的受信任 OSS/CDN JSON 清单，默认不自动播放，音频授权信息可见，频谱可关闭且有 Web Audio 降级。
+- 404 游戏不阻塞错误恢复；PWA 只缓存公开离线工具箱，不缓存私有数据和 API 写入。
+- 360/768/1280/1600px、键盘、触摸、无 JS、Save-Data、reduced-motion、动态资源失败和路由往返通过。
+- 文章初始 JS 不超过 180KB gzip，既有 API/Web/OpenAPI/Compose 基线不回归；阶段六的 30 分钟压力测试和生产资源验收仍单独记录。
+- 本地验收通过不等于真实 SMTP、真实 OSS、域名/备案、部署、远端 CI/生产或 AI/RAG 通过；这些项目在报告中继续明确列为未执行或后续阶段。
+
+本迭代完成定义：仅新增本文件和阶段五准入清单；没有业务代码、空类、数据库迁移、OpenAPI 修改、生成客户端改动、提交、推送、PR 或部署。
diff --git "a/docs/taget/\351\230\266\346\256\265\344\272\224\345\207\206\345\205\245\346\270\205\345\215\225.md" "b/docs/taget/\351\230\266\346\256\265\344\272\224\345\207\206\345\205\245\346\270\205\345\215\225.md"
new file mode 100644
index 0000000..206e180
--- /dev/null
+++ "b/docs/taget/\351\230\266\346\256\265\344\272\224\345\207\206\345\205\245\346\270\205\345\215\225.md"
@@ -0,0 +1,140 @@
+# 阶段五准入清单：非 AI 体验与本地收口
+
+## 0. 本轮结论
+
+本清单对应“阶段 5 迭代 0：阶段准入与规划文档落盘”。本轮只建立可追溯基线和任务文档，不实现阶段五业务功能。
+
+- 本轮文档：docs/taget/第五阶段目标任务.md、本文件。
+- 未新增业务代码、空类、数据库迁移、OpenAPI 路径、生成客户端或外部资源。
+- 未提交、推送、创建 PR、部署或修改云资源。
+- 阶段四文档在当前工作树中已经是删除状态；本轮未恢复，阶段四基线从提交 f0bfdac 读取。
+
+## 一、Git 基线与用户资产
+
+| 项目 | 本轮记录 |
+| --- | --- |
+| 工作目录 | G:\work\HaoBlog |
+| 分支 | codex/s4-01，跟踪 origin/codex/s4-01 |
+| HEAD | f0bfdac58e0f9821dd313e879892302eb971bc08（完成阶段四综合验收并收敛项目说明） |
+| 最近提交 | f0bfdac、c246517、0b3b5b8、57a03a4、1b066e3、4330ffc、6c24570、a18a7de |
+| 阶段五目录 | 本轮前不存在，已创建 docs/taget；该目录名按仓库规则保留为 taget |
+| 工作树初始状态 | AGENTS.md 修改；docs/HaoBlog 完整开发计划.md 修改；docs/第四阶段目标任务.md 删除；docs/阶段四准入清单.md 删除；无未跟踪文件 |
+| 保留资产 | 上述用户修改全部保留，尤其是完整开发计划中的阶段五边界、PWA/音乐/彩蛋调整；不覆盖、不回退、不恢复删除文档 |
+
+阶段 2/3 目标文档在当前树不存在：阶段 2 原文从 df6fada68e5fc1ecaabe257115bbfca95d6a20eb:docs/第二阶段目标任务.md 读取，阶段 3 原文从 7a377ab19fec7b829f47308662bb1b981e6fa460:docs/第三阶段目标任务.md 读取。阶段 4 原文从 f0bfdac 的 docs/第四阶段目标任务.md 和 docs/阶段四准入清单.md 读取。阶段 2/3 的历史实际路径在 docs/ 根目录，不在当前工作树的 docs/taget。
+
+## 二、阶段四基线
+
+阶段四收口文档记录的本地 S4-10 基线如下；这些数字是历史基线，必须以本轮实际命令结果为准，不能替代真实生产或远端 CI 验收：
+
+- 环境：Windows 11、Java 21.0.11、Node.js 24.14.0、pnpm 11.16.0、Docker Engine 29.7.2、Compose 5.3.1。
+- API：-DskipITs verify Surefire 78/78；PostgreSQL/pgvector Failsafe 53/53。
+- Web：typecheck、Vitest 85/85、Nuxt production build 通过；Chromium Playwright 14/14。
+- OpenAPI：generate、check 和生成文件无差异通过。
+- 文章初始客户端静态闭包 65,244 bytes gzip，小于 180 KiB；Mermaid 位于异步 chunk。
+- Lighthouse：文章页和工具页移动 360×800 的 Performance、Accessibility、SEO 均为 1.00。
+- 生产 Compose 上限：Caddy 64 MiB/0.2 CPU/64 PID，Web 320 MiB/0.6 CPU/128 PID，API 640 MiB/1.25 CPU/256 PID，PostgreSQL 480 MiB/0.8 CPU/128 PID。
+- 未完成的外部项目：真实 SMTP、真实 OSS、域名/HTTPS、备案、ACR/部署、远端 CI/生产、备份恢复和合规材料。
+
+阶段五继承的本地硬门槛是：公共 SSR 不回归；文章初始 JS ≤180KB gzip；没有 Three.js 进入文章包；工具、评论、搜索、OpenAPI、Compose 和现有安全边界不回归。30 分钟压测、生产资源运行态和真实外部项目不在本轮通过范围。
+
+## 三、本轮实际环境
+
+| 命令 | 实际结果 | 状态 |
+| --- | --- | --- |
+| java -version | OpenJDK 21.0.11 LTS（2026-04-21） | 通过 |
+| node --version | v24.14.0 | 通过 |
+| corepack pnpm --version | 11.16.0 | 通过 |
+| docker version | Client/Server 29.7.2，Docker Desktop 4.86.0 | 通过 |
+| docker compose version | v5.3.1 | 通过 |
+
+以上五条环境命令已实际执行；其余基线命令在文档落盘后按下一节执行并回填结果。pnpm 命令的 Corepack 激活提示不影响最终版本为 11.16.0。
+
+## 四、阶段五预定验收命令
+
+以下命令是本轮预定执行的本地基线，不表示所有阶段五功能已经存在。命令均从仓库根目录执行；API 命令使用实际存在的 apps/api/mvnw.cmd。
+
+### 4.1 工具链与 API/Web/OpenAPI
+
+~~~powershell
+java -version
+node --version
+corepack pnpm --version
+docker version
+docker compose version
+
+Push-Location apps/api
+.\mvnw.cmd -DskipITs verify
+Pop-Location
+
+corepack pnpm --dir apps/web typecheck
+corepack pnpm --dir apps/web test
+corepack pnpm --dir apps/web build
+corepack pnpm --filter @haoblog/api-client check
+~~~
+
+本轮不执行 generate，因为没有 OpenAPI 修改；后续阶段五若实现 S5-01 的 API，必须先执行 corepack pnpm --filter @haoblog/api-client generate，再执行 check 并审阅生成文件 diff。
+
+### 4.2 Compose 与工作树
+
+~~~powershell
+docker compose --env-file .env.example -f infra/compose/compose.dev.yml config
+docker compose --env-file infra/compose/.env.ci.example -f infra/compose/compose.prod.yml config
+corepack pnpm compose:verify
+git diff --check
+~~~
+
+本轮不启动 Compose、不构建镜像、不创建测试 volume；config 和 compose:verify 只验证解析、资源限制、健康边界和端口约束。
+
+## 五、基线实际执行结果
+
+本节在命令运行结束后回填。状态只允许使用“通过”“阻塞”“未执行”，不能用历史阶段结果代替本轮结果。
+
+| 命令 | 结果 | 状态/阻塞原因 |
+| --- | --- | --- |
+| java -version | 21.0.11 LTS | 通过 |
+| node --version | v24.14.0 | 通过 |
+| corepack pnpm --version | 11.16.0 | 通过 |
+| docker version | Client/Server 29.7.2 | 通过 |
+| docker compose version | v5.3.1 | 通过 |
+| apps/api/.\\mvnw.cmd -DskipITs verify | Surefire 78/78，BUILD SUCCESS | 通过 |
+| corepack pnpm --dir apps/web typecheck | nuxt prepare、vue-tsc 完成 | 通过 |
+| corepack pnpm --dir apps/web test | 19 个测试文件，85/85 | 通过 |
+| corepack pnpm --dir apps/web build | Nuxt client/server/Nitro build complete | 通过；有现有依赖 deprecation 和 Vite 大 chunk 警告 |
+| corepack pnpm --filter @haoblog/api-client check | openapi-typescript 7.13.0 check 完成 | 通过 |
+| dev Compose config | Compose 配置成功解析 | 通过 |
+| prod Compose config | Compose 配置成功解析 | 通过 |
+| corepack pnpm compose:verify | Compose resource and health boundaries passed | 通过 |
+| git diff --check | exit code 0；仅有现有 CRLF 提示 | 通过 |
+
+## 六、阶段五准入判断
+
+开始 S5-01 业务实现前，必须满足：
+
+- 本文件和 docs/taget/第五阶段目标任务.md 已存在且描述与用户锁定决策一致。
+- API -DskipITs verify、Web typecheck/test/build、OpenAPI check、两套 Compose config、compose:verify 和 git diff --check 均通过；阻塞项必须有环境证据和替代验证，不得口头豁免。
+- 工作树中的 AGENTS.md 和完整开发计划修改仍保持用户原文；阶段四删除文档不因本轮被恢复。
+- 开始业务实现时先从 S5-01 契约和 Feature Flag 入手，再实现图谱与体验组件；不直接创建空类或占位 API。
+- 任何新增依赖先说明当前栈不足、路由懒加载方式和 bundle/runtime 成本；优先 CSS、浏览器原生 API 和现有 Vue 能力。
+
+## 七、未执行外部项目与剩余风险
+
+以下项目本轮明确未执行，不能在阶段五本地文档通过后宣称完成：
+
+- 远端 GitHub Actions/CI、镜像推送、ACR、部署和远端生产验收。
+- 真实 OSS/CDN 音乐清单、真实 OSS 媒体上传、真实 SMTP 投递。
+- 真实域名、HTTPS、ICP/公安备案、隐私/评论/AI 合规材料。
+- 数据库备份上传、解密、恢复和 RPO/RTO 演练。
+- 阶段六的 30 分钟 2GB 压测、持续 Swap、OOM、容器资源运行态和回滚演练。
+- AI 基础、SSE、RAG、Embedding、模型供应商、费用和 AI 安全评测。
+
+剩余风险：图谱/Three.js/音频分析会增加浏览器内存和首屏后交互成本；低端移动设备和 Safari 的 WebGL/Web Audio 行为需在 S5-08 实机或等价浏览器路径验证；PWA 更新和缓存边界一旦配置错误可能持有旧资源或拦截 API；音乐授权和第三方 CDN 可用性需要真实来源确认；阶段四文档当前不在工作树，后续引用应保持提交来源可追溯。
+
+## 八、本轮完成定义
+
+- [x] 读取并记录 AGENTS、完整开发计划、阶段 2/3 历史任务、阶段 4 收口文档、设计语言、README 和本地启动指南。
+- [x] 读取并使用 .agents/skills/haoblog-design/SKILL.md 的“仪器而非装饰、降级是一等路径”原则。
+- [x] 记录 Git 分支、HEAD、最近提交、用户未提交修改、阶段四删除状态和未跟踪文件检查。
+- [x] 创建阶段五目标任务和本准入清单。
+- [x] 完成本节“基线实际执行结果”的所有命令并逐项记录。
+- [ ] 阶段五业务功能完成；本轮明确不做。

From f6f1972ffc61b62d48adcd1d2b73b4df0aa87c4f Mon Sep 17 00:00:00 2001
From: DDT <––1786035110@stu.gpnu.edu.cn>
Date: Sun, 23 Aug 2026 21:42:32 +0800
Subject: [PATCH 2/7] =?UTF-8?q?=E5=AE=8C=E6=88=90=E9=98=B6=E6=AE=B5?=
 =?UTF-8?q?=E4=BA=94=E8=BF=AD=E4=BB=A3=E4=B8=80=E5=9B=BE=E8=B0=B1=E4=B8=8E?=
 =?UTF-8?q?=E4=BD=93=E9=AA=8C=E5=BC=80=E5=85=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.example                                  |   2 +
 .../content/application/ArticleService.java   |  49 +++
 .../ArticleRevisionRepository.java            |  32 ++
 .../site/application/GardenGraphService.java  | 254 +++++++++++++++
 .../site/application/PublicFeedService.java   |   4 +-
 .../haoblog/site/application/SiteService.java |  87 ++++-
 .../io/haoblog/site/domain/SiteSetting.java   |   6 +
 .../haoblog/site/web/AdminSiteController.java |  10 +-
 .../site/web/PublicGardenController.java      |  65 ++++
 .../site/web/PublicSiteController.java        |  13 +-
 .../application/ToolManagementService.java    |  18 +
 .../src/main/resources/application-prod.yml   |   1 +
 apps/api/src/main/resources/application.yml   |   1 +
 .../migration/V16__site_experience_flags.sql  |   3 +
 .../test/java/io/haoblog/AdminCommentIT.java  |  27 +-
 .../test/java/io/haoblog/ContentModelIT.java  |   2 +-
 .../test/java/io/haoblog/GardenGraphIT.java   | 110 +++++++
 .../src/test/java/io/haoblog/PublicApiIT.java |   2 +-
 .../test/java/io/haoblog/PublicApiTest.java   |  21 +-
 .../application/GardenGraphServiceTest.java   |  54 +++
 .../application/PublicFeedServiceTest.java    |   2 +-
 .../site/application/SiteServiceTest.java     |  35 ++
 .../components/garden/GardenCanvas.client.vue | 308 ++++++++++++++++++
 apps/web/app/pages/garden.vue                 | 127 +++++++-
 apps/web/app/pages/studio/settings.vue        |  37 ++-
 apps/web/app/pages/tools.vue                  |  18 +-
 apps/web/app/utils/publicGarden.ts            |  32 ++
 apps/web/app/utils/publicSite.ts              |   3 +
 apps/web/e2e/stage5.spec.ts                   |  86 +++++
 apps/web/nuxt.config.ts                       |   1 -
 apps/web/package.json                         |   2 +
 apps/web/test/public-garden.test.ts           |  13 +
 docs/openapi/public-api.yaml                  |  59 +++-
 ...56\346\240\207\344\273\273\345\212\241.md" |  28 +-
 ...06\345\205\245\346\270\205\345\215\225.md" |  30 +-
 ...57\345\212\250\346\214\207\345\215\227.md" |   2 +-
 infra/compose/.env.ci.example                 |   1 +
 infra/compose/compose.dev.yml                 |   1 +
 infra/compose/compose.prod.yml                |   1 +
 packages/api-client/src/generated.ts          |  81 +++++
 pnpm-lock.yaml                                |   6 +
 41 files changed, 1575 insertions(+), 59 deletions(-)
 create mode 100644 apps/api/src/main/java/io/haoblog/site/application/GardenGraphService.java
 create mode 100644 apps/api/src/main/java/io/haoblog/site/web/PublicGardenController.java
 create mode 100644 apps/api/src/main/resources/db/migration/V16__site_experience_flags.sql
 create mode 100644 apps/api/src/test/java/io/haoblog/GardenGraphIT.java
 create mode 100644 apps/api/src/test/java/io/haoblog/site/application/GardenGraphServiceTest.java
 create mode 100644 apps/web/app/components/garden/GardenCanvas.client.vue
 create mode 100644 apps/web/app/utils/publicGarden.ts
 create mode 100644 apps/web/e2e/stage5.spec.ts
 create mode 100644 apps/web/test/public-garden.test.ts

diff --git a/.env.example b/.env.example
index 19d999d..5e30406 100644
--- a/.env.example
+++ b/.env.example
@@ -18,6 +18,8 @@ HAOBLOG_ADMIN_PASSWORD_HASH=replace-with-a-bcrypt-hash
 HAOBLOG_SESSION_COOKIE_SECURE=false
 HAOBLOG_PUBLIC_BASE_URL=http://localhost:3000
 HAOBLOG_AUTHOR_NAME=Hao
+# 音乐清单地址；生产必须使用绝对 HTTPS，本地可使用 http://localhost
+HAOBLOG_MUSIC_MANIFEST_URL=
 HAOBLOG_COMMENT_SECURITY_KEY=AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=
 
 # Comment notification is disabled locally. Never put real SMTP credentials in this file.
diff --git a/apps/api/src/main/java/io/haoblog/content/application/ArticleService.java b/apps/api/src/main/java/io/haoblog/content/application/ArticleService.java
index 958ca94..38b8e82 100644
--- a/apps/api/src/main/java/io/haoblog/content/application/ArticleService.java
+++ b/apps/api/src/main/java/io/haoblog/content/application/ArticleService.java
@@ -13,7 +13,10 @@
 import java.time.Clock;
 import java.text.Normalizer;
 import java.util.Collection;
+import java.util.LinkedHashMap;
+import java.util.LinkedHashSet;
 import java.util.List;
+import java.util.Locale;
 import java.util.Map;
 import java.util.Optional;
 import java.util.UUID;
@@ -61,6 +64,20 @@ public PublishedBatch listPublishedBatch(int page, int size) {
         return new PublishedBatch(result.getContent().stream().map(this::toPublicFeedArticle).toList(), result.hasNext());
     }
 
+    @org.springframework.transaction.annotation.Transactional(readOnly = true)
+    public List<GardenArticle> listPublicGardenArticles() {
+        Map<UUID, GardenArticleBuilder> grouped = new LinkedHashMap<>();
+        for (var row : repository.findPublicGardenRows(java.time.Instant.now(clock))) {
+            var article = grouped.computeIfAbsent(row.getArticleId(), ignored -> new GardenArticleBuilder(
+                    row.getArticleId(), row.getSlug(), row.getTitle(), row.getExcerpt(), row.getPublishedAt(),
+                    taxonomy(row.getCategoryName(), row.getCategorySlug())));
+            if (row.getTagSlug() != null && !row.getTagSlug().isBlank()) {
+                article.tags.add(taxonomy(row.getTagName(), row.getTagSlug()));
+            }
+        }
+        return grouped.values().stream().map(GardenArticleBuilder::build).toList();
+    }
+
     public SearchPage search(String query, int page, int size) {
         String normalizedQuery = normalizeSearchQuery(query);
         if (page < 0 || size < 1 || size > 20) throw new IllegalArgumentException("page/size out of range");
@@ -111,7 +128,39 @@ public UUID articleId() {
     public record PageResult(Page<PublicArticle> page) {}
     public record PublishedBatch(List<PublicFeedArticle> items, boolean hasNext) {}
     public record PublicFeedArticle(UUID id, String slug, String title, String excerpt, java.time.Instant publishedAt) {}
+    public record GardenTaxonomy(String name, String slug) {}
+    public record GardenArticle(UUID id, String slug, String title, String excerpt, java.time.Instant publishedAt,
+                                GardenTaxonomy category, List<GardenTaxonomy> tags) {}
     public record SearchPage(String query, Page<PublicSearchArticle> page) {}
     public record PublicSearchArticle(UUID id, String slug, String title, String excerpt,
                                       java.time.Instant publishedAt, UUID coverMediaId, boolean commentsEnabled) {}
+
+    private static GardenTaxonomy taxonomy(String name, String slug) {
+        if (slug == null || slug.isBlank()) return null;
+        return new GardenTaxonomy(name == null || name.isBlank() ? slug : name.trim(), slug.trim().toLowerCase(Locale.ROOT));
+    }
+
+    private static final class GardenArticleBuilder {
+        private final UUID id;
+        private final String slug;
+        private final String title;
+        private final String excerpt;
+        private final java.time.Instant publishedAt;
+        private final GardenTaxonomy category;
+        private final java.util.Set<GardenTaxonomy> tags = new LinkedHashSet<>();
+
+        private GardenArticleBuilder(UUID id, String slug, String title, String excerpt,
+                                     java.time.Instant publishedAt, GardenTaxonomy category) {
+            this.id = id;
+            this.slug = slug;
+            this.title = title;
+            this.excerpt = excerpt;
+            this.publishedAt = publishedAt;
+            this.category = category;
+        }
+
+        private GardenArticle build() {
+            return new GardenArticle(id, slug, title, excerpt, publishedAt, category, List.copyOf(tags));
+        }
+    }
 }
diff --git a/apps/api/src/main/java/io/haoblog/content/persistence/ArticleRevisionRepository.java b/apps/api/src/main/java/io/haoblog/content/persistence/ArticleRevisionRepository.java
index 8017597..228ee64 100644
--- a/apps/api/src/main/java/io/haoblog/content/persistence/ArticleRevisionRepository.java
+++ b/apps/api/src/main/java/io/haoblog/content/persistence/ArticleRevisionRepository.java
@@ -11,6 +11,7 @@
 import java.time.Instant;
 import java.util.Optional;
 import java.util.UUID;
+import java.util.List;
 
 public interface ArticleRevisionRepository extends JpaRepository<ArticleRevision, UUID> {
     boolean existsByArticleId(UUID articleId);
@@ -100,6 +101,25 @@ where a.status in ('PUBLISHED', 'SCHEDULED')
     Page<SearchProjection> searchVisible(@Param("pattern") String pattern, @Param("now") Instant now,
                                          Pageable pageable);
 
+    @Query(value = """
+            select r.article_id as "articleId", r.slug as slug, r.title as title, r.excerpt as excerpt,
+                   a.published_at as "publishedAt",
+                   r.category_snapshot ->> 'name' as "categoryName",
+                   r.category_snapshot ->> 'slug' as "categorySlug",
+                   tag.value ->> 'name' as "tagName",
+                   tag.value ->> 'slug' as "tagSlug"
+            from article_revision r
+            join article a on a.published_revision_id = r.id
+            left join lateral jsonb_array_elements(coalesce(r.tag_snapshot, '[]'::jsonb)) as tag(value) on true
+            where a.status in ('PUBLISHED', 'SCHEDULED')
+              and a.published_revision_id is not null
+              and a.published_at is not null
+              and a.published_at <= :now
+            order by a.published_at desc, a.id desc,
+                     tag.value ->> 'slug' asc nulls last
+            """, nativeQuery = true)
+    List<PublicGardenRow> findPublicGardenRows(@Param("now") Instant now);
+
     @Query("""
             select r as revision, a.publishedAt as publishedAt, a.commentsEnabled as commentsEnabled
             from ArticleRevision r, Article a
@@ -158,4 +178,16 @@ interface SearchProjection {
         UUID getCoverMediaId();
         boolean getCommentsEnabled();
     }
+
+    interface PublicGardenRow {
+        UUID getArticleId();
+        String getSlug();
+        String getTitle();
+        String getExcerpt();
+        Instant getPublishedAt();
+        String getCategoryName();
+        String getCategorySlug();
+        String getTagName();
+        String getTagSlug();
+    }
 }
diff --git a/apps/api/src/main/java/io/haoblog/site/application/GardenGraphService.java b/apps/api/src/main/java/io/haoblog/site/application/GardenGraphService.java
new file mode 100644
index 0000000..8da371b
--- /dev/null
+++ b/apps/api/src/main/java/io/haoblog/site/application/GardenGraphService.java
@@ -0,0 +1,254 @@
+package io.haoblog.site.application;
+
+import io.haoblog.content.application.ArticleService;
+import io.haoblog.toolbox.application.ToolManagementService;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+import java.time.Instant;
+import java.util.ArrayList;
+import java.util.Comparator;
+import java.util.HashMap;
+import java.util.LinkedHashMap;
+import java.util.LinkedHashSet;
+import java.util.List;
+import java.util.Locale;
+import java.util.Map;
+import java.util.Set;
+
+@Service
+public class GardenGraphService {
+    static final int MAX_NODES = 200;
+    static final int MAX_EDGES = 600;
+
+    private final ArticleService articles;
+    private final ToolManagementService tools;
+
+    public GardenGraphService(ArticleService articles, ToolManagementService tools) {
+        this.articles = articles;
+        this.tools = tools;
+    }
+
+    @Transactional(readOnly = true)
+    public Graph get() {
+        return build(articles.listPublicGardenArticles(), tools.listPublicGardenTools());
+    }
+
+    public static Graph build(List<ArticleService.GardenArticle> articles,
+                              List<ToolManagementService.GardenTool> tools) {
+        Map<String, CandidateNode> nodes = new LinkedHashMap<>();
+        Map<EdgeKey, CandidateEdge> edges = new LinkedHashMap<>();
+
+        for (var article : articles == null ? List.<ArticleService.GardenArticle>of() : articles) {
+            String articleId = nodeId(NodeType.ARTICLE, article.slug());
+            if (articleId == null) continue;
+            addNode(nodes, new CandidateNode(articleId, NodeType.ARTICLE, cleanLabel(article.title(), article.slug()),
+                    "/articles/" + article.slug(), cleanText(article.excerpt()), article.publishedAt(), 0));
+            addMemberships(nodes, edges, articleId, article.category(), article.tags());
+            addCoOccurrences(edges, article.tags());
+        }
+        for (var tool : tools == null ? List.<ToolManagementService.GardenTool>of() : tools) {
+            String toolId = nodeId(NodeType.TOOL, tool.slug());
+            if (toolId == null) continue;
+            addNode(nodes, new CandidateNode(toolId, NodeType.TOOL, cleanLabel(tool.title(), tool.slug()),
+                    "/tools?tool=" + tool.slug(), cleanText(tool.description()), null, tool.sortOrder()));
+            addMemberships(nodes, edges, toolId,
+                    taxonomy(tool.categoryName(), tool.categorySlug()),
+                    tool.tags() == null ? List.of() : tool.tags().stream()
+                            .map(value -> taxonomy(value, value)).toList());
+            addCoOccurrences(edges, tool.tags() == null ? List.of() : tool.tags().stream()
+                    .map(value -> taxonomy(value, value)).toList());
+        }
+
+        edges.values().forEach(edge -> {
+            CandidateNode source = nodes.get(edge.source());
+            CandidateNode target = nodes.get(edge.target());
+            if (source != null) source.fullDegree += edge.weight();
+            if (target != null) target.fullDegree += edge.weight();
+        });
+
+        List<CandidateNode> orderedNodes = nodes.values().stream().sorted(NODE_ORDER).toList();
+        Set<String> selectedIds = orderedNodes.stream().limit(MAX_NODES)
+                .map(CandidateNode::id).collect(java.util.stream.Collectors.toCollection(LinkedHashSet::new));
+        List<CandidateEdge> orderedEdges = edges.values().stream()
+                .filter(edge -> selectedIds.contains(edge.source()) && selectedIds.contains(edge.target()))
+                .sorted(EDGE_ORDER)
+                .toList();
+        List<CandidateEdge> selectedEdges = orderedEdges.stream().limit(MAX_EDGES).toList();
+        Map<String, Integer> degrees = new HashMap<>();
+        for (var edge : selectedEdges) {
+            degrees.merge(edge.source(), 1, Integer::sum);
+            degrees.merge(edge.target(), 1, Integer::sum);
+        }
+        List<Node> resultNodes = orderedNodes.stream().limit(MAX_NODES)
+                .map(node -> new Node(node.id(), node.type(), node.label(), node.href(), node.summary(),
+                        node.publishedAt(), degrees.getOrDefault(node.id(), 0)))
+                .toList();
+        List<Edge> resultEdges = selectedEdges.stream()
+                .map(edge -> new Edge(edge.source(), edge.target(), edge.kind(), edge.weight()))
+                .toList();
+        boolean truncated = resultNodes.size() < nodes.size() || resultEdges.size() < orderedEdges.size()
+                || resultEdges.size() < edges.size();
+        return new Graph(resultNodes, resultEdges, truncated);
+    }
+
+    private static void addMemberships(Map<String, CandidateNode> nodes, Map<EdgeKey, CandidateEdge> edges,
+                                       String contentId, ArticleService.GardenTaxonomy category,
+                                       List<ArticleService.GardenTaxonomy> tags) {
+        if (category != null) addMembership(nodes, edges, contentId, NodeType.CATEGORY, category);
+        Set<String> seen = new LinkedHashSet<>();
+        for (var tag : tags == null ? List.<ArticleService.GardenTaxonomy>of() : tags) {
+            if (tag != null && seen.add(normalizeSlug(tag.slug()))) {
+                addMembership(nodes, edges, contentId, NodeType.TAG, tag);
+            }
+        }
+    }
+
+    private static void addMembership(Map<String, CandidateNode> nodes, Map<EdgeKey, CandidateEdge> edges,
+                                      String contentId, NodeType type, ArticleService.GardenTaxonomy taxonomy) {
+        String taxonomyId = nodeId(type, taxonomy.slug());
+        if (taxonomyId == null) return;
+        addNode(nodes, new CandidateNode(taxonomyId, type, cleanLabel(taxonomy.name(), taxonomy.slug()),
+                taxonomyHref(type, taxonomy.slug()), null, null, 0));
+        addEdge(edges, contentId, taxonomyId, EdgeKind.MEMBERSHIP, 1);
+    }
+
+    private static void addCoOccurrences(Map<EdgeKey, CandidateEdge> edges,
+                                         List<? extends ArticleService.GardenTaxonomy> sourceTags) {
+        List<? extends ArticleService.GardenTaxonomy> tags = sourceTags == null ? List.of() : sourceTags;
+        List<String> ids = tags.stream().filter(tag -> tag != null && tag.slug() != null)
+                .map(tag -> nodeId(NodeType.TAG, tag.slug())).filter(java.util.Objects::nonNull).distinct().sorted().toList();
+        for (int left = 0; left < ids.size(); left++) {
+            for (int right = left + 1; right < ids.size(); right++) {
+                addEdge(edges, ids.get(left), ids.get(right), EdgeKind.CO_OCCURRENCE, 1);
+            }
+        }
+    }
+
+    private static void addEdge(Map<EdgeKey, CandidateEdge> edges, String source, String target,
+                                EdgeKind kind, int weight) {
+        EdgeKey key = new EdgeKey(source, target, kind);
+        edges.merge(key, new CandidateEdge(source, target, kind, weight),
+                (left, right) -> new CandidateEdge(left.source(), left.target(), left.kind(), left.weight() + right.weight()));
+    }
+
+    private static void addNode(Map<String, CandidateNode> nodes, CandidateNode candidate) {
+        nodes.merge(candidate.id(), candidate, GardenGraphService::preferNode);
+    }
+
+    private static CandidateNode preferNode(CandidateNode left, CandidateNode right) {
+        String label = left.label().compareTo(right.label()) <= 0 ? left.label() : right.label();
+        String summary = left.summary() != null ? left.summary() : right.summary();
+        Instant publishedAt = left.publishedAt() != null ? left.publishedAt() : right.publishedAt();
+        return new CandidateNode(left.id(), left.type(), label, left.href(), summary, publishedAt,
+                Math.min(left.sortOrder(), right.sortOrder()));
+    }
+
+    private static final Comparator<CandidateNode> NODE_ORDER = (left, right) -> {
+        int type = Integer.compare(typeOrder(left.type()), typeOrder(right.type()));
+        if (type != 0) return type;
+        if (left.type() == NodeType.ARTICLE) {
+            int published = comparePublishedAt(left.publishedAt(), right.publishedAt());
+            if (published != 0) return published;
+        }
+        if (left.type() == NodeType.TOOL) {
+            int sort = Integer.compare(left.sortOrder(), right.sortOrder());
+            if (sort != 0) return sort;
+        }
+        if (left.type() == NodeType.TAG || left.type() == NodeType.CATEGORY) {
+            int degree = Integer.compare(right.fullDegree(), left.fullDegree());
+            if (degree != 0) return degree;
+        }
+        return Comparator.comparing(CandidateNode::label).thenComparing(CandidateNode::id).compare(left, right);
+    };
+
+    private static final Comparator<CandidateEdge> EDGE_ORDER = Comparator
+            .comparingInt(CandidateEdge::weight).reversed()
+            .thenComparing(edge -> edge.kind().name())
+            .thenComparing(CandidateEdge::source)
+            .thenComparing(CandidateEdge::target);
+
+    private static int typeOrder(NodeType type) {
+        return switch (type) {
+            case ARTICLE -> 0;
+            case TOOL -> 1;
+            case CATEGORY -> 2;
+            case TAG -> 3;
+        };
+    }
+
+    private static int comparePublishedAt(Instant left, Instant right) {
+        if (left == null && right == null) return 0;
+        if (left == null) return 1;
+        if (right == null) return -1;
+        return right.compareTo(left);
+    }
+
+    private static String taxonomyHref(NodeType type, String slug) {
+        return "/articles?" + (type == NodeType.CATEGORY ? "category" : "tag") + "=" + slug;
+    }
+
+    private static String nodeId(NodeType type, String rawSlug) {
+        String slug = normalizeSlug(rawSlug);
+        return slug == null ? null : type.name().toLowerCase(Locale.ROOT) + ":" + slug;
+    }
+
+    private static String normalizeSlug(String rawSlug) {
+        if (rawSlug == null || rawSlug.isBlank()) return null;
+        return java.text.Normalizer.normalize(rawSlug, java.text.Normalizer.Form.NFKC).trim().toLowerCase(Locale.ROOT);
+    }
+
+    private static String cleanLabel(String label, String fallback) {
+        return label == null || label.isBlank() ? fallback : label.trim();
+    }
+
+    private static String cleanText(String value) {
+        return value == null || value.isBlank() ? null : value.trim();
+    }
+
+    private static ArticleService.GardenTaxonomy taxonomy(String name, String slug) {
+        if (slug == null || slug.isBlank()) return null;
+        return new ArticleService.GardenTaxonomy(cleanLabel(name, slug), slug);
+    }
+
+    public enum NodeType { ARTICLE, TAG, CATEGORY, TOOL }
+    public enum EdgeKind { MEMBERSHIP, CO_OCCURRENCE }
+
+    public record Node(String id, NodeType type, String label, String href, String summary,
+                       Instant publishedAt, int degree) {}
+    public record Edge(String source, String target, EdgeKind kind, int weight) {}
+    public record Graph(List<Node> nodes, List<Edge> edges, boolean truncated) {}
+
+    private record EdgeKey(String source, String target, EdgeKind kind) {}
+    private record CandidateEdge(String source, String target, EdgeKind kind, int weight) {}
+    private static final class CandidateNode {
+        private final String id;
+        private final NodeType type;
+        private final String label;
+        private final String href;
+        private final String summary;
+        private final Instant publishedAt;
+        private final int sortOrder;
+        private int fullDegree;
+
+        private CandidateNode(String id, NodeType type, String label, String href, String summary,
+                              Instant publishedAt, int sortOrder) {
+            this.id = id;
+            this.type = type;
+            this.label = label;
+            this.href = href;
+            this.summary = summary;
+            this.publishedAt = publishedAt;
+            this.sortOrder = sortOrder;
+        }
+
+        String id() { return id; }
+        NodeType type() { return type; }
+        String label() { return label; }
+        String href() { return href; }
+        String summary() { return summary; }
+        Instant publishedAt() { return publishedAt; }
+        int sortOrder() { return sortOrder; }
+        int fullDegree() { return fullDegree; }
+    }
+}
diff --git a/apps/api/src/main/java/io/haoblog/site/application/PublicFeedService.java b/apps/api/src/main/java/io/haoblog/site/application/PublicFeedService.java
index 5ffd22b..4a70119 100644
--- a/apps/api/src/main/java/io/haoblog/site/application/PublicFeedService.java
+++ b/apps/api/src/main/java/io/haoblog/site/application/PublicFeedService.java
@@ -23,7 +23,7 @@ public class PublicFeedService {
     private static final int RSS_LIMIT = 20;
     private static final int SITEMAP_BATCH_SIZE = 500;
     private static final int SITEMAP_URL_LIMIT = 50_000;
-    private static final int STATIC_URL_COUNT = 4;
+    private static final int STATIC_URL_COUNT = 5;
     private static final DateTimeFormatter RSS_DATE_FORMAT = DateTimeFormatter.RFC_1123_DATE_TIME;
     private final SiteService siteService;
     private final ArticleService articleService;
@@ -104,7 +104,7 @@ private static String writeSitemap(SiteService.SiteResult site, List<PublicFeedA
         return write(writer -> {
             writer.writeStartElement("urlset");
             writer.writeDefaultNamespace("http://www.sitemaps.org/schemas/sitemap/0.9");
-            for (String path : List.of("/", "/articles", "/tools", "/about")) {
+            for (String path : List.of("/", "/articles", "/garden", "/tools", "/about")) {
                 urlElement(writer, url(site.siteUrl(), path));
             }
             for (var article : articles) {
diff --git a/apps/api/src/main/java/io/haoblog/site/application/SiteService.java b/apps/api/src/main/java/io/haoblog/site/application/SiteService.java
index 103d1a2..55f7ba7 100644
--- a/apps/api/src/main/java/io/haoblog/site/application/SiteService.java
+++ b/apps/api/src/main/java/io/haoblog/site/application/SiteService.java
@@ -2,9 +2,12 @@
 
 import io.haoblog.site.persistence.SiteSettingRepository;
 import org.springframework.beans.factory.annotation.Value;
+import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
 
 import java.net.URI;
+import java.util.Arrays;
+import java.util.Locale;
 
 
 @Service
@@ -12,40 +15,71 @@ public class SiteService {
     private final SiteSettingRepository repository;
     private final String publicBaseUrl;
     private final String authorName;
+    private final String musicManifestUrl;
 
+    @Autowired
     public SiteService(SiteSettingRepository repository,
                        @Value("${haoblog.site.public-base-url}") String publicBaseUrl,
-                       @Value("${haoblog.site.author-name}") String authorName) {
+                       @Value("${haoblog.site.author-name}") String authorName,
+                       @Value("${haoblog.site.music-manifest-url:}") String musicManifestUrl,
+                       @Value("${spring.profiles.active:local}") String activeProfiles) {
+        this(repository, publicBaseUrl, authorName, musicManifestUrl, activeProfiles, true);
+    }
+
+    public SiteService(SiteSettingRepository repository, String publicBaseUrl, String authorName) {
+        this(repository, publicBaseUrl, authorName, null, "local", false);
+    }
+
+    private SiteService(SiteSettingRepository repository, String publicBaseUrl, String authorName,
+                        String musicManifestUrl, String activeProfiles, boolean validateManifest) {
         this.repository = repository;
         this.publicBaseUrl = normalizePublicBaseUrl(publicBaseUrl);
         if (authorName == null || authorName.isBlank()) {
             throw new IllegalArgumentException("HAOBLOG_AUTHOR_NAME must not be blank");
         }
         this.authorName = authorName.trim();
+        this.musicManifestUrl = validateManifest
+                ? normalizeMusicManifestUrl(musicManifestUrl, activeProfiles)
+                : null;
     }
 
     public SiteResult get() {
         var setting = repository.findBySiteKey("default").orElseThrow();
-        return new SiteResult(setting.getTitle(), setting.getDescription(), publicBaseUrl, authorName, setting.isCommentsEnabled());
+        return new SiteResult(setting.getTitle(), setting.getDescription(), publicBaseUrl, authorName,
+                setting.isCommentsEnabled(), setting.isMusicEnabled() && musicManifestUrl != null,
+                setting.isThreeDEnabled(), musicManifestUrl);
     }
 
     public AdminSiteResult getAdmin() {
         var setting = repository.findBySiteKey("default").orElseThrow();
         return new AdminSiteResult(setting.getTitle(), setting.getDescription(), publicBaseUrl, authorName,
-                setting.isCommentsEnabled(), setting.getVersion());
+                setting.isCommentsEnabled(), setting.isMusicEnabled(), setting.isThreeDEnabled(), setting.getVersion());
     }
 
     @org.springframework.transaction.annotation.Transactional
     public AdminSiteResult updateCommentsEnabled(long expectedVersion, boolean commentsEnabled) {
+        return updateSettings(expectedVersion, commentsEnabled, null, null);
+    }
+
+    @org.springframework.transaction.annotation.Transactional
+    public AdminSiteResult updateSettings(long expectedVersion, Boolean commentsEnabled,
+                                          Boolean musicEnabled, Boolean threeDEnabled) {
         var setting = repository.findBySiteKey("default").orElseThrow();
         if (setting.getVersion() != expectedVersion) {
             throw new io.haoblog.shared.web.ProblemException("SITE_VERSION_CONFLICT", "Site setting version conflict",
                     "Reload the latest site settings before saving", setting.getVersion());
         }
-        setting.setCommentsEnabled(commentsEnabled);
+        boolean nextMusicEnabled = musicEnabled == null ? setting.isMusicEnabled() : musicEnabled;
+        if (nextMusicEnabled && musicManifestUrl == null) {
+            throw new io.haoblog.shared.web.ProblemException("MUSIC_MANIFEST_NOT_CONFIGURED",
+                    "Music manifest is not configured", "Configure HAOBLOG_MUSIC_MANIFEST_URL before enabling music");
+        }
+        if (commentsEnabled != null) setting.setCommentsEnabled(commentsEnabled);
+        setting.setMusicEnabled(nextMusicEnabled);
+        if (threeDEnabled != null) setting.setThreeDEnabled(threeDEnabled);
         var saved = repository.saveAndFlush(setting);
         return new AdminSiteResult(saved.getTitle(), saved.getDescription(), publicBaseUrl, authorName,
-                saved.isCommentsEnabled(), saved.getVersion());
+                saved.isCommentsEnabled(), saved.isMusicEnabled(), saved.isThreeDEnabled(), saved.getVersion());
     }
 
     public long currentVersion() {
@@ -70,12 +104,49 @@ static String normalizePublicBaseUrl(String raw) {
         return raw.trim().replaceFirst("/+$", "");
     }
 
-    public record SiteResult(String title, String description, String siteUrl, String authorName, boolean commentsEnabled) {
+    static String normalizeMusicManifestUrl(String raw, String activeProfiles) {
+        if (raw == null || raw.isBlank()) return null;
+        String value = raw.trim();
+        URI uri;
+        try {
+            uri = URI.create(value);
+        } catch (IllegalArgumentException exception) {
+            throw new IllegalArgumentException("HAOBLOG_MUSIC_MANIFEST_URL must be an absolute HTTPS URL", exception);
+        }
+        boolean absoluteHost = uri.isAbsolute() && uri.getHost() != null && uri.getUserInfo() == null
+                && uri.getFragment() == null;
+        boolean https = "https".equalsIgnoreCase(uri.getScheme());
+        boolean localProfile = Arrays.stream((activeProfiles == null ? "" : activeProfiles).split(","))
+                .map(String::trim).map(valueProfile -> valueProfile.toLowerCase(Locale.ROOT))
+                .anyMatch(profile -> profile.equals("local") || profile.equals("dev") || profile.equals("test"));
+        boolean localhostHttp = "http".equalsIgnoreCase(uri.getScheme()) && localProfile
+                && SetOfLocalHosts.contains(uri.getHost().toLowerCase(Locale.ROOT));
+        if (!absoluteHost || (!https && !localhostHttp)) {
+            throw new IllegalArgumentException("HAOBLOG_MUSIC_MANIFEST_URL must be HTTPS; local/dev may use localhost HTTP");
+        }
+        return value;
+    }
+
+    private static final java.util.Set<String> SetOfLocalHosts = java.util.Set.of("localhost", "127.0.0.1", "::1");
+
+    public record SiteResult(String title, String description, String siteUrl, String authorName,
+                             boolean commentsEnabled, boolean musicEnabled, boolean threeDEnabled,
+                             String musicManifestUrl) {
         public SiteResult(String title, String description, String siteUrl, String authorName) {
-            this(title, description, siteUrl, authorName, true);
+            this(title, description, siteUrl, authorName, true, false, false, null);
+        }
+        public SiteResult(String title, String description, String siteUrl, String authorName,
+                          boolean commentsEnabled) {
+            this(title, description, siteUrl, authorName, commentsEnabled, false, false, null);
         }
     }
 
     public record AdminSiteResult(String title, String description, String siteUrl, String authorName,
-                                  boolean commentsEnabled, long version) {}
+                                  boolean commentsEnabled, boolean musicEnabled, boolean threeDEnabled,
+                                  long version) {
+        public AdminSiteResult(String title, String description, String siteUrl, String authorName,
+                               boolean commentsEnabled, long version) {
+            this(title, description, siteUrl, authorName, commentsEnabled, false, false, version);
+        }
+    }
 }
diff --git a/apps/api/src/main/java/io/haoblog/site/domain/SiteSetting.java b/apps/api/src/main/java/io/haoblog/site/domain/SiteSetting.java
index 34366e1..777b822 100644
--- a/apps/api/src/main/java/io/haoblog/site/domain/SiteSetting.java
+++ b/apps/api/src/main/java/io/haoblog/site/domain/SiteSetting.java
@@ -12,6 +12,8 @@ public class SiteSetting {
     @Column(nullable = false, length = 160) private String title;
     @Column(nullable = false, length = 600) private String description;
     @Column(name = "comments_enabled", nullable = false) private boolean commentsEnabled = true;
+    @Column(name = "music_enabled", nullable = false) private boolean musicEnabled = false;
+    @Column(name = "three_d_enabled", nullable = false) private boolean threeDEnabled = false;
     @Version @Column(nullable = false) private long version;
     protected SiteSetting() {}
     public SiteSetting(String siteKey, String title, String description) {
@@ -20,6 +22,10 @@ public SiteSetting(String siteKey, String title, String description) {
     public String getTitle() { return title; }
     public String getDescription() { return description; }
     public boolean isCommentsEnabled() { return commentsEnabled; }
+    public boolean isMusicEnabled() { return musicEnabled; }
+    public boolean isThreeDEnabled() { return threeDEnabled; }
     public long getVersion() { return version; }
     public void setCommentsEnabled(boolean commentsEnabled) { this.commentsEnabled = commentsEnabled; }
+    public void setMusicEnabled(boolean musicEnabled) { this.musicEnabled = musicEnabled; }
+    public void setThreeDEnabled(boolean threeDEnabled) { this.threeDEnabled = threeDEnabled; }
 }
diff --git a/apps/api/src/main/java/io/haoblog/site/web/AdminSiteController.java b/apps/api/src/main/java/io/haoblog/site/web/AdminSiteController.java
index 9aff3df..2bb877e 100644
--- a/apps/api/src/main/java/io/haoblog/site/web/AdminSiteController.java
+++ b/apps/api/src/main/java/io/haoblog/site/web/AdminSiteController.java
@@ -28,20 +28,22 @@ public Response get() {
     @PutMapping
     public Response update(@RequestBody @Valid UpdateRequest request) {
         try {
-            return Response.from(service.updateCommentsEnabled(request.version(), request.commentsEnabled()));
+            return Response.from(service.updateSettings(request.version(), request.commentsEnabled(),
+                    request.musicEnabled(), request.threeDEnabled()));
         } catch (OptimisticLockingFailureException exception) {
             throw new ProblemException("SITE_VERSION_CONFLICT", "Site setting version conflict",
                     "Reload the latest site settings before saving", service.currentVersion());
         }
     }
 
-    public record UpdateRequest(@NotNull Long version, @NotNull Boolean commentsEnabled) {}
+    public record UpdateRequest(@NotNull Long version, @NotNull Boolean commentsEnabled,
+                                Boolean musicEnabled, Boolean threeDEnabled) {}
 
     public record Response(String title, String description, String siteUrl, String authorName,
-                           boolean commentsEnabled, long version) {
+                           boolean commentsEnabled, boolean musicEnabled, boolean threeDEnabled, long version) {
         static Response from(SiteService.AdminSiteResult result) {
             return new Response(result.title(), result.description(), result.siteUrl(), result.authorName(),
-                    result.commentsEnabled(), result.version());
+                    result.commentsEnabled(), result.musicEnabled(), result.threeDEnabled(), result.version());
         }
     }
 }
diff --git a/apps/api/src/main/java/io/haoblog/site/web/PublicGardenController.java b/apps/api/src/main/java/io/haoblog/site/web/PublicGardenController.java
new file mode 100644
index 0000000..c0de4d7
--- /dev/null
+++ b/apps/api/src/main/java/io/haoblog/site/web/PublicGardenController.java
@@ -0,0 +1,65 @@
+package io.haoblog.site.web;
+
+import io.haoblog.site.application.GardenGraphService;
+import org.springframework.http.HttpHeaders;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestHeader;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+import java.nio.charset.StandardCharsets;
+import java.security.MessageDigest;
+import java.util.HexFormat;
+import java.util.List;
+
+@RestController
+@RequestMapping("/api/v1/public/garden")
+public class PublicGardenController {
+    private final GardenGraphService service;
+
+    public PublicGardenController(GardenGraphService service) {
+        this.service = service;
+    }
+
+    @GetMapping
+    public ResponseEntity<Response> garden(@RequestHeader(value = HttpHeaders.IF_NONE_MATCH, required = false) String ifNoneMatch) {
+        Response response = Response.from(service.get());
+        String etag = representationHash(response);
+        var headers = new HttpHeaders();
+        headers.setETag(etag);
+        headers.setCacheControl("public, max-age=0, s-maxage=60, must-revalidate");
+        if (etag.equals(ifNoneMatch)) return ResponseEntity.status(304).headers(headers).build();
+        return ResponseEntity.ok().headers(headers).body(response);
+    }
+
+    private static String representationHash(Object value) {
+        try {
+            var digest = MessageDigest.getInstance("SHA-256");
+            return '"' + HexFormat.of().formatHex(digest.digest(value.toString().getBytes(StandardCharsets.UTF_8))) + '"';
+        } catch (Exception exception) {
+            throw new IllegalStateException("Unable to create garden representation ETag", exception);
+        }
+    }
+
+    public record Response(List<Node> nodes, List<Edge> edges, boolean truncated) {
+        static Response from(GardenGraphService.Graph graph) {
+            return new Response(graph.nodes().stream().map(Node::from).toList(),
+                    graph.edges().stream().map(Edge::from).toList(), graph.truncated());
+        }
+    }
+
+    public record Node(String id, GardenGraphService.NodeType type, String label, String href,
+                       String summary, java.time.Instant publishedAt, int degree) {
+        static Node from(GardenGraphService.Node value) {
+            return new Node(value.id(), value.type(), value.label(), value.href(), value.summary(),
+                    value.publishedAt(), value.degree());
+        }
+    }
+
+    public record Edge(String source, String target, GardenGraphService.EdgeKind kind, int weight) {
+        static Edge from(GardenGraphService.Edge value) {
+            return new Edge(value.source(), value.target(), value.kind(), value.weight());
+        }
+    }
+}
diff --git a/apps/api/src/main/java/io/haoblog/site/web/PublicSiteController.java b/apps/api/src/main/java/io/haoblog/site/web/PublicSiteController.java
index b2f6020..630e3ca 100644
--- a/apps/api/src/main/java/io/haoblog/site/web/PublicSiteController.java
+++ b/apps/api/src/main/java/io/haoblog/site/web/PublicSiteController.java
@@ -20,7 +20,8 @@ public class PublicSiteController {
     @GetMapping
     public ResponseEntity<SiteResponse> site(@RequestHeader(value = HttpHeaders.IF_NONE_MATCH, required = false) String ifNoneMatch) {
         var result = service.get();
-        var response = new SiteResponse(result.title(), result.description(), result.siteUrl(), result.authorName(), result.commentsEnabled());
+        var response = new SiteResponse(result.title(), result.description(), result.siteUrl(), result.authorName(),
+                result.commentsEnabled(), result.musicEnabled(), result.threeDEnabled(), result.musicManifestUrl());
         var headers = new HttpHeaders();
         headers.setETag(representationHash(response));
         headers.setCacheControl("public, max-age=0, s-maxage=60, must-revalidate");
@@ -39,9 +40,15 @@ private static String representationHash(Object value) {
         }
     }
 
-    public record SiteResponse(String title, String description, String siteUrl, String authorName, boolean commentsEnabled) {
+    public record SiteResponse(String title, String description, String siteUrl, String authorName,
+                               boolean commentsEnabled, boolean musicEnabled, boolean threeDEnabled,
+                               String musicManifestUrl) {
         public SiteResponse(String title, String description, String siteUrl, String authorName) {
-            this(title, description, siteUrl, authorName, true);
+            this(title, description, siteUrl, authorName, true, false, false, null);
+        }
+        public SiteResponse(String title, String description, String siteUrl, String authorName,
+                            boolean commentsEnabled) {
+            this(title, description, siteUrl, authorName, commentsEnabled, false, false, null);
         }
     }
 }
diff --git a/apps/api/src/main/java/io/haoblog/toolbox/application/ToolManagementService.java b/apps/api/src/main/java/io/haoblog/toolbox/application/ToolManagementService.java
index c5567a1..6549318 100644
--- a/apps/api/src/main/java/io/haoblog/toolbox/application/ToolManagementService.java
+++ b/apps/api/src/main/java/io/haoblog/toolbox/application/ToolManagementService.java
@@ -53,6 +53,21 @@ public PublicTools listPublicTools(String category, ToolType type, String keywor
         return queryPublicTools(normalizedCategory, type, normalizedKeyword);
     }
 
+    @Transactional(readOnly = true)
+    public List<GardenTool> listPublicGardenTools() {
+        List<Tool> activeTools = tools.findAllByStatus(ToolStatus.ACTIVE,
+                Sort.by(Sort.Direction.ASC, "sortOrder", "title", "id"));
+        Map<UUID, ToolCategory> categoryById = categories.findAllById(
+                activeTools.stream().map(Tool::getCategoryId).distinct().toList()).stream()
+                .collect(Collectors.toMap(ToolCategory::getId, categoryValue -> categoryValue));
+        return activeTools.stream().map(tool -> {
+            ToolCategory category = categoryById.get(tool.getCategoryId());
+            if (category == null) return null;
+            return new GardenTool(tool.getId(), tool.getTitle(), tool.getSlug(), tool.getDescription(),
+                    category.getName(), category.getSlug(), tool.getTags(), tool.getSortOrder());
+        }).filter(java.util.Objects::nonNull).toList();
+    }
+
     private PublicTools queryPublicTools(String normalizedCategory, ToolType type, String normalizedKeyword) {
 
         List<Tool> activeTools = tools.findAllByStatus(ToolStatus.ACTIVE,
@@ -235,4 +250,7 @@ static PublicTool from(Tool tool, ToolCategory category) {
                     tool.getTags(), tool.getSortOrder());
         }
     }
+
+    public record GardenTool(UUID id, String title, String slug, String description,
+                             String categoryName, String categorySlug, List<String> tags, int sortOrder) {}
 }
diff --git a/apps/api/src/main/resources/application-prod.yml b/apps/api/src/main/resources/application-prod.yml
index 3700f2c..f384473 100644
--- a/apps/api/src/main/resources/application-prod.yml
+++ b/apps/api/src/main/resources/application-prod.yml
@@ -8,5 +8,6 @@ server:
 haoblog:
   site:
     public-base-url: ${HAOBLOG_PUBLIC_BASE_URL}
+    music-manifest-url: ${HAOBLOG_MUSIC_MANIFEST_URL:}
   security:
     session-cookie-secure: true
diff --git a/apps/api/src/main/resources/application.yml b/apps/api/src/main/resources/application.yml
index 0cfb731..63aea3a 100644
--- a/apps/api/src/main/resources/application.yml
+++ b/apps/api/src/main/resources/application.yml
@@ -73,6 +73,7 @@ haoblog:
   site:
     public-base-url: ${HAOBLOG_PUBLIC_BASE_URL:http://localhost:3000}
     author-name: ${HAOBLOG_AUTHOR_NAME:Hao}
+    music-manifest-url: ${HAOBLOG_MUSIC_MANIFEST_URL:}
   security:
     session-cookie-secure: ${HAOBLOG_SESSION_COOKIE_SECURE:false}
   seed:
diff --git a/apps/api/src/main/resources/db/migration/V16__site_experience_flags.sql b/apps/api/src/main/resources/db/migration/V16__site_experience_flags.sql
new file mode 100644
index 0000000..be3ea8f
--- /dev/null
+++ b/apps/api/src/main/resources/db/migration/V16__site_experience_flags.sql
@@ -0,0 +1,3 @@
+ALTER TABLE site_setting
+    ADD COLUMN music_enabled boolean NOT NULL DEFAULT false,
+    ADD COLUMN three_d_enabled boolean NOT NULL DEFAULT false;
diff --git a/apps/api/src/test/java/io/haoblog/AdminCommentIT.java b/apps/api/src/test/java/io/haoblog/AdminCommentIT.java
index f09f095..6735984 100644
--- a/apps/api/src/test/java/io/haoblog/AdminCommentIT.java
+++ b/apps/api/src/test/java/io/haoblog/AdminCommentIT.java
@@ -65,7 +65,7 @@ static void database(DynamicPropertyRegistry registry) {
     @BeforeEach
     void seed() {
         jdbc.execute("TRUNCATE comment, article_revision, article CASCADE");
-        jdbc.update("UPDATE site_setting SET comments_enabled=true, version=0 WHERE site_key='default'");
+        jdbc.update("UPDATE site_setting SET comments_enabled=true, music_enabled=false, three_d_enabled=false, version=0 WHERE site_key='default'");
         Instant now = Instant.parse("2020-01-01T00:00:00Z");
         Article article = articles.saveAndFlush(new Article("moderation-signal", "Moderation signal", "Excerpt", "# body",
                 ArticleStatus.PUBLISHED, now.minus(1, ChronoUnit.DAYS), now));
@@ -151,6 +151,31 @@ void globalSiteSwitchChangesPublicSiteAndArticleEtags() throws Exception {
                 .andExpect(status().isConflict()).andExpect(jsonPath("$.code").value("SITE_VERSION_CONFLICT"));
     }
 
+    @Test
+    void protectsExperienceFlagsAndRequiresMusicManifest() throws Exception {
+        mvc.perform(get("/api/v1/admin/site"))
+                .andExpect(status().isUnauthorized());
+        mvc.perform(put("/api/v1/admin/site").with(admin()).with(csrf()).contentType("application/json")
+                        .content("{\"version\":0,\"commentsEnabled\":true,\"musicEnabled\":true,\"threeDEnabled\":false}"))
+                .andExpect(status().isBadRequest())
+                .andExpect(jsonPath("$.code").value("MUSIC_MANIFEST_NOT_CONFIGURED"));
+
+        mvc.perform(put("/api/v1/admin/site").with(admin()).with(csrf()).contentType("application/json")
+                        .content("{\"version\":0,\"commentsEnabled\":true,\"musicEnabled\":false,\"threeDEnabled\":true}"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.threeDEnabled").value(true))
+                .andExpect(jsonPath("$.version").value(1));
+        mvc.perform(get("/api/v1/public/site"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.musicEnabled").value(false))
+                .andExpect(jsonPath("$.threeDEnabled").value(true))
+                .andExpect(jsonPath("$.musicManifestUrl").isEmpty());
+        mvc.perform(put("/api/v1/admin/site").with(admin()).with(csrf()).contentType("application/json")
+                        .content("{\"version\":0,\"commentsEnabled\":true,\"musicEnabled\":false,\"threeDEnabled\":false}"))
+                .andExpect(status().isConflict())
+                .andExpect(jsonPath("$.code").value("SITE_VERSION_CONFLICT"));
+    }
+
     @Test
     void articleSwitchChangesPublicArticleEtag() throws Exception {
         var before = mvc.perform(get("/api/v1/public/articles/moderation-signal")).andExpect(status().isOk()).andReturn();
diff --git a/apps/api/src/test/java/io/haoblog/ContentModelIT.java b/apps/api/src/test/java/io/haoblog/ContentModelIT.java
index 7ca0255..c9c14d2 100644
--- a/apps/api/src/test/java/io/haoblog/ContentModelIT.java
+++ b/apps/api/src/test/java/io/haoblog/ContentModelIT.java
@@ -57,7 +57,7 @@ static void database(DynamicPropertyRegistry registry) {
 
     @Test
     void migratesAllVersionsAndCreatesContentTables() {
-        assertEquals(15, jdbc.queryForObject("SELECT count(*) FROM flyway_schema_history", Integer.class));
+        assertEquals(16, jdbc.queryForObject("SELECT count(*) FROM flyway_schema_history", Integer.class));
         for (String table : List.of("article", "category", "tag", "article_tag", "article_revision",
                 "article_preview_token", "media_asset", "media_upload", "outbox_event", "comment")) {
             assertEquals(1, jdbc.queryForObject(
diff --git a/apps/api/src/test/java/io/haoblog/GardenGraphIT.java b/apps/api/src/test/java/io/haoblog/GardenGraphIT.java
new file mode 100644
index 0000000..0a2ca63
--- /dev/null
+++ b/apps/api/src/test/java/io/haoblog/GardenGraphIT.java
@@ -0,0 +1,110 @@
+package io.haoblog;
+
+import org.junit.jupiter.api.BeforeEach;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.boot.webmvc.test.autoconfigure.AutoConfigureMockMvc;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.test.context.DynamicPropertyRegistry;
+import org.springframework.test.context.DynamicPropertySource;
+import org.springframework.test.web.servlet.MockMvc;
+import org.testcontainers.containers.PostgreSQLContainer;
+import org.testcontainers.junit.jupiter.Container;
+import org.testcontainers.junit.jupiter.Testcontainers;
+
+import java.sql.Timestamp;
+import java.time.Instant;
+import java.util.UUID;
+
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.header;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.jsonPath;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+import static org.junit.jupiter.api.Assertions.assertFalse;
+import static org.junit.jupiter.api.Assertions.assertTrue;
+
+@Testcontainers
+@SpringBootTest
+@AutoConfigureMockMvc
+class GardenGraphIT {
+    @Container
+    static PostgreSQLContainer<?> postgres = new PostgreSQLContainer<>("pgvector/pgvector:0.8.6-pg17");
+
+    @DynamicPropertySource
+    static void database(DynamicPropertyRegistry registry) {
+        registry.add("spring.datasource.url", postgres::getJdbcUrl);
+        registry.add("spring.datasource.username", postgres::getUsername);
+        registry.add("spring.datasource.password", postgres::getPassword);
+        registry.add("spring.flyway.placeholders.admin_username", () -> "admin");
+        registry.add("spring.flyway.placeholders.admin_password_hash", () -> "$2a$10$0V.Xs7CLOUYSekm7RKq3Z.iY76KUan/Xbeu5vjmLpX.sVd4pcFpIu");
+    }
+
+    @Autowired MockMvc mvc;
+    @Autowired JdbcTemplate jdbc;
+
+    @BeforeEach
+    void clean() {
+        jdbc.execute("TRUNCATE article_tag, article_preview_token, article_revision, article, category, tag, tool, tool_category CASCADE");
+    }
+
+    @Test
+    void exposesOnlyPublicSnapshotsActiveToolsAndStableConditionalResponse() throws Exception {
+        Instant now = Instant.parse("2026-08-23T00:00:00Z");
+        UUID categoryId = UUID.randomUUID();
+        jdbc.update("INSERT INTO category(id, name, slug, created_at, updated_at) VALUES (?, ?, ?, ?, ?)",
+                categoryId, "Backend", "backend", Timestamp.from(now), Timestamp.from(now));
+        seedArticle("public-signal", "Public signal", "Published excerpt", "# secret markdown", "PUBLISHED", now.minusSeconds(60),
+                categoryId, "[{\"name\":\"Java\",\"slug\":\"java\"},{\"name\":\"Spring\",\"slug\":\"spring\"}]", now);
+        seedArticle("future-signal", "Future signal", "Future", "future markdown", "SCHEDULED", now.plusSeconds(60),
+                null, "[]", now);
+        seedArticle("draft-signal", "Draft signal", "Draft", "draft markdown", "DRAFT", null,
+                null, "[]", now);
+        seedArticle("archived-signal", "Archived signal", "Archived", "archived markdown", "ARCHIVED", now.minusSeconds(120),
+                null, "[]", now);
+
+        UUID toolCategoryId = UUID.randomUUID();
+        UUID toolId = UUID.randomUUID();
+        jdbc.update("INSERT INTO tool_category(id, name, slug, created_at, updated_at) VALUES (?, ?, ?, ?, ?)",
+                toolCategoryId, "Utilities", "utilities", Timestamp.from(now), Timestamp.from(now));
+        jdbc.update("INSERT INTO tool(id, category_id, type, status, title, slug, description, url, tags, created_at, updated_at) "
+                        + "VALUES (?, ?, 'LINK', 'ACTIVE', ?, ?, ?, ?, ?::jsonb, ?, ?)",
+                toolId, toolCategoryId, "JSON Tool", "json-tool", "Format JSON", "https://external.example/tool",
+                "[\"Java\",\"Spring\"]", Timestamp.from(now), Timestamp.from(now));
+
+        var first = mvc.perform(get("/api/v1/public/garden"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.nodes.length()").value(6))
+                .andExpect(jsonPath("$.edges[?(@.kind == 'CO_OCCURRENCE')].weight").value(org.hamcrest.Matchers.contains(2)))
+                .andExpect(jsonPath("$.truncated").value(false))
+                .andExpect(header().exists("ETag"))
+                .andReturn();
+        String body = first.getResponse().getContentAsString();
+        assertTrue(body.contains("/tools?tool=json-tool"));
+        assertFalse(body.contains("secret markdown"));
+        assertFalse(body.contains("https://external.example/tool"));
+        assertFalse(body.contains("future-signal"));
+        assertFalse(body.contains("draft-signal"));
+        assertFalse(body.contains("archived-signal"));
+
+        mvc.perform(get("/api/v1/public/garden").header("If-None-Match", first.getResponse().getHeader("ETag")))
+                .andExpect(status().isNotModified()).andExpect(header().exists("ETag"));
+    }
+
+    private void seedArticle(String slug, String title, String excerpt, String markdown, String status,
+                             Instant publishedAt, UUID categoryId, String tags, Instant now) {
+        UUID articleId = UUID.randomUUID();
+        UUID revisionId = UUID.randomUUID();
+        jdbc.update("INSERT INTO article(id, slug, title, excerpt, markdown_source, status, published_at, created_at, updated_at, version, category_id) "
+                        + "VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, 0, ?)",
+                articleId, slug, title, excerpt, markdown, status, publishedAt == null ? null : Timestamp.from(publishedAt),
+                Timestamp.from(now), Timestamp.from(now), categoryId);
+        if ("PUBLISHED".equals(status)) {
+            jdbc.update("INSERT INTO article_revision(id, article_id, source_version, title, slug, excerpt, markdown_source, "
+                            + "category_snapshot, tag_snapshot, created_at) VALUES (?, ?, 0, ?, ?, ?, ?, ?::jsonb, ?::jsonb, ?)",
+                    revisionId, articleId, title, slug, excerpt, markdown,
+                    categoryId == null ? null : "{\"name\":\"Backend\",\"slug\":\"backend\"}", tags, Timestamp.from(now));
+            jdbc.update("UPDATE article SET published_revision_id = ? WHERE id = ?", revisionId, articleId);
+        }
+    }
+}
diff --git a/apps/api/src/test/java/io/haoblog/PublicApiIT.java b/apps/api/src/test/java/io/haoblog/PublicApiIT.java
index c252f7f..27e66c9 100644
--- a/apps/api/src/test/java/io/haoblog/PublicApiIT.java
+++ b/apps/api/src/test/java/io/haoblog/PublicApiIT.java
@@ -212,7 +212,7 @@ WHERE a.status IN ('PUBLISHED', 'SCHEDULED')
                 .andExpect(content().string(org.hamcrest.Matchers.not(org.hamcrest.Matchers.containsString("scheduled-feed"))))
                 .andExpect(header().exists("ETag"))
                 .andReturn();
-        assertEquals(6, count(sitemap.getResponse().getContentAsString(), "<url>"));
+        assertEquals(7, count(sitemap.getResponse().getContentAsString(), "<url>"));
         mvc.perform(get("/sitemap.xml").header("If-None-Match", sitemap.getResponse().getHeader("ETag")))
                 .andExpect(status().isNotModified()).andExpect(content().string(""));
     }
diff --git a/apps/api/src/test/java/io/haoblog/PublicApiTest.java b/apps/api/src/test/java/io/haoblog/PublicApiTest.java
index a041775..d52fdeb 100644
--- a/apps/api/src/test/java/io/haoblog/PublicApiTest.java
+++ b/apps/api/src/test/java/io/haoblog/PublicApiTest.java
@@ -27,7 +27,7 @@
 import static org.junit.jupiter.api.Assertions.assertEquals;
 import com.jayway.jsonpath.JsonPath;
 
-@WebMvcTest({PublicSiteController.class, PublicArticleController.class, PublicFeedController.class})
+@WebMvcTest({PublicSiteController.class, PublicArticleController.class, PublicFeedController.class, io.haoblog.site.web.PublicGardenController.class})
 @Import({io.haoblog.shared.web.TraceIdFilter.class, io.haoblog.shared.web.GlobalExceptionHandler.class,
         io.haoblog.shared.web.ProblemResponseWriter.class})
 class PublicApiTest {
@@ -35,6 +35,7 @@ class PublicApiTest {
     @MockitoBean io.haoblog.site.application.SiteService siteService;
     @MockitoBean io.haoblog.content.application.ArticleService articleService;
     @MockitoBean io.haoblog.site.application.PublicFeedService publicFeedService;
+    @MockitoBean io.haoblog.site.application.GardenGraphService gardenGraphService;
 
     @BeforeEach
     void rejectInvalidServiceArguments() {
@@ -105,6 +106,24 @@ void rejectInvalidServiceArguments() {
         }
     }
 
+    @Test void gardenSupportsStableGraphResponseAnd304() throws Exception {
+        when(gardenGraphService.get()).thenReturn(new io.haoblog.site.application.GardenGraphService.Graph(
+                List.of(new io.haoblog.site.application.GardenGraphService.Node(
+                        "article:visible", io.haoblog.site.application.GardenGraphService.NodeType.ARTICLE,
+                        "Visible", "/articles/visible", "Excerpt", Instant.parse("2026-01-01T00:00:00Z"), 1)),
+                List.of(new io.haoblog.site.application.GardenGraphService.Edge(
+                        "article:visible", "tag:java", io.haoblog.site.application.GardenGraphService.EdgeKind.MEMBERSHIP, 1)), false));
+
+        var first = mvc.perform(get("/api/v1/public/garden"))
+                .andExpect(status().isOk())
+                .andExpect(jsonPath("$.nodes[0].href").value("/articles/visible"))
+                .andExpect(jsonPath("$.edges[0].kind").value("MEMBERSHIP"))
+                .andExpect(header().string("Cache-Control", "public, max-age=0, s-maxage=60, must-revalidate"))
+                .andReturn();
+        mvc.perform(get("/api/v1/public/garden").header("If-None-Match", first.getResponse().getHeader("ETag")))
+                .andExpect(status().isNotModified()).andExpect(content().string(""));
+    }
+
     @Test void unknownStaticResourcePathReturnsSafeProblem() throws Exception {
         mvc.perform(get("/missing.css").header("X-Request-ID", "request-static-404"))
                 .andExpect(status().isNotFound())
diff --git a/apps/api/src/test/java/io/haoblog/site/application/GardenGraphServiceTest.java b/apps/api/src/test/java/io/haoblog/site/application/GardenGraphServiceTest.java
new file mode 100644
index 0000000..f33b967
--- /dev/null
+++ b/apps/api/src/test/java/io/haoblog/site/application/GardenGraphServiceTest.java
@@ -0,0 +1,54 @@
+package io.haoblog.site.application;
+
+import io.haoblog.content.application.ArticleService;
+import io.haoblog.toolbox.application.ToolManagementService;
+import org.junit.jupiter.api.Test;
+
+import java.time.Instant;
+import java.util.List;
+import java.util.UUID;
+
+import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertTrue;
+
+class GardenGraphServiceTest {
+    @Test
+    void normalizesTagsBuildsWeightedCoOccurrenceAndKeepsToolHrefInternal() {
+        var article = new ArticleService.GardenArticle(UUID.randomUUID(), "first-post", "First post", "Excerpt",
+                Instant.parse("2026-01-02T00:00:00Z"),
+                new ArticleService.GardenTaxonomy("Backend", "backend"),
+                List.of(new ArticleService.GardenTaxonomy("Java", "Java"), new ArticleService.GardenTaxonomy("Spring", "spring")));
+        var tool = new ToolManagementService.GardenTool(UUID.randomUUID(), "JSON Tool", "json-tool", "Format JSON",
+                "Utilities", "utilities", List.of("java", "spring"), 1);
+
+        var graph = GardenGraphService.build(List.of(article), List.of(tool));
+
+        assertEquals(6, graph.nodes().size());
+        assertTrue(graph.nodes().stream().anyMatch(node -> node.id().equals("tool:json-tool")
+                && node.href().equals("/tools?tool=json-tool")));
+        assertEquals(2, graph.edges().stream()
+                .filter(edge -> edge.kind() == GardenGraphService.EdgeKind.CO_OCCURRENCE)
+                .findFirst().orElseThrow().weight());
+        assertEquals(graph, GardenGraphService.build(List.of(article), List.of(tool)));
+    }
+
+    @Test
+    void deterministicallyClipsNodesAndEdges() {
+        var articles = java.util.stream.IntStream.range(0, 205).mapToObj(index ->
+                new ArticleService.GardenArticle(UUID.randomUUID(), "post-" + index, "Post " + index, null,
+                        Instant.parse("2026-01-01T00:00:00Z").plusSeconds(index), null, List.of())).toList();
+        var clippedNodes = GardenGraphService.build(articles, List.of());
+        assertEquals(200, clippedNodes.nodes().size());
+        assertTrue(clippedNodes.truncated());
+        assertEquals("article:post-204", clippedNodes.nodes().get(0).id());
+
+        var sharedTags = java.util.stream.IntStream.range(0, 100).mapToObj(index ->
+                new ArticleService.GardenArticle(UUID.randomUUID(), "dense-" + index, "Dense " + index, null,
+                        Instant.parse("2026-01-01T00:00:00Z"), null,
+                        java.util.stream.IntStream.range(0, 6)
+                                .mapToObj(tag -> new ArticleService.GardenTaxonomy("Tag " + tag, "tag-" + tag)).toList())).toList();
+        var clippedEdges = GardenGraphService.build(sharedTags, List.of());
+        assertEquals(600, clippedEdges.edges().size());
+        assertTrue(clippedEdges.truncated());
+    }
+}
diff --git a/apps/api/src/test/java/io/haoblog/site/application/PublicFeedServiceTest.java b/apps/api/src/test/java/io/haoblog/site/application/PublicFeedServiceTest.java
index e98f62b..afe9c6c 100644
--- a/apps/api/src/test/java/io/haoblog/site/application/PublicFeedServiceTest.java
+++ b/apps/api/src/test/java/io/haoblog/site/application/PublicFeedServiceTest.java
@@ -55,7 +55,7 @@ void sitemapReadsPublishedArticlesInFiveHundredItemBatches() throws Exception {
 
         Document xml = parse(new PublicFeedService(siteService, articleService).sitemap().body());
 
-        assertEquals(506, xml.getElementsByTagNameNS("http://www.sitemaps.org/schemas/sitemap/0.9", "url").getLength());
+        assertEquals(507, xml.getElementsByTagNameNS("http://www.sitemaps.org/schemas/sitemap/0.9", "url").getLength());
         verify(articleService).listPublishedBatch(eq(0), eq(500));
         verify(articleService).listPublishedBatch(eq(1), eq(500));
     }
diff --git a/apps/api/src/test/java/io/haoblog/site/application/SiteServiceTest.java b/apps/api/src/test/java/io/haoblog/site/application/SiteServiceTest.java
index 29fa11d..11869da 100644
--- a/apps/api/src/test/java/io/haoblog/site/application/SiteServiceTest.java
+++ b/apps/api/src/test/java/io/haoblog/site/application/SiteServiceTest.java
@@ -33,4 +33,39 @@ void rejectsNonOriginPublicUrls() {
         assertThrows(IllegalArgumentException.class, () -> new SiteService(repository, "javascript:alert(1)", "Hao"));
         assertThrows(IllegalArgumentException.class, () -> new SiteService(repository, "https://user:pass@blog.example.test", "Hao"));
     }
+
+    @Test
+    void validatesManifestByProfileAndRejectsEnablingWithoutConfiguration() {
+        var repository = mock(SiteSettingRepository.class);
+        var setting = new SiteSetting("default", "HaoBlog", "Night station");
+        when(repository.findBySiteKey("default")).thenReturn(Optional.of(setting));
+
+        assertEquals("http://localhost:8080/music.json",
+                SiteService.normalizeMusicManifestUrl(" http://localhost:8080/music.json ", "local"));
+        assertEquals("https://cdn.example.test/music.json",
+                SiteService.normalizeMusicManifestUrl("https://cdn.example.test/music.json", "prod"));
+        assertThrows(IllegalArgumentException.class,
+                () -> SiteService.normalizeMusicManifestUrl("http://cdn.example.test/music.json", "prod"));
+
+        var service = new SiteService(repository, "https://blog.example.test", "Hao", null, "prod");
+        var missing = assertThrows(io.haoblog.shared.web.ProblemException.class,
+                () -> service.updateSettings(0, true, true, false));
+        assertEquals("MUSIC_MANIFEST_NOT_CONFIGURED", missing.getCode());
+    }
+
+    @Test
+    void publicMusicFlagSafelyTurnsOffWhenManifestIsMissing() {
+        var repository = mock(SiteSettingRepository.class);
+        var setting = new SiteSetting("default", "HaoBlog", "Night station");
+        setting.setMusicEnabled(true);
+        setting.setThreeDEnabled(true);
+        when(repository.findBySiteKey("default")).thenReturn(Optional.of(setting));
+
+        var service = new SiteService(repository, "https://blog.example.test", "Hao", null, "prod");
+        var result = service.get();
+
+        assertEquals(false, result.musicEnabled());
+        assertEquals(true, result.threeDEnabled());
+        assertEquals(null, result.musicManifestUrl());
+    }
 }
diff --git a/apps/web/app/components/garden/GardenCanvas.client.vue b/apps/web/app/components/garden/GardenCanvas.client.vue
new file mode 100644
index 0000000..4c42d55
--- /dev/null
+++ b/apps/web/app/components/garden/GardenCanvas.client.vue
@@ -0,0 +1,308 @@
+<script setup lang="ts">
+import type { Simulation, SimulationLinkDatum, SimulationNodeDatum } from 'd3-force'
+import type { GardenEdge, GardenGraph, GardenNode } from '~/utils/publicGarden'
+import { gardenNodeTypeLabel } from '~/utils/publicGarden'
+
+type RenderNode = GardenNode & SimulationNodeDatum & { x: number; y: number; fx?: number | null; fy?: number | null }
+type RenderLink = GardenEdge & SimulationLinkDatum<RenderNode>
+
+const props = defineProps<{ graph: GardenGraph }>()
+const canvas = ref<HTMLCanvasElement | null>(null)
+const host = ref<HTMLElement | null>(null)
+const selectedId = ref<string | null>(null)
+const status = ref('桌面星图正在校准。')
+const view = reactive({ scale: 1, x: 0, y: 0 })
+
+let context: CanvasRenderingContext2D | null = null
+let simulation: Simulation<RenderNode, RenderLink> | null = null
+let resizeObserver: ResizeObserver | null = null
+let frame = 0
+let disposed = false
+let dragging: RenderNode | null = null
+let dragPointerId: number | null = null
+let renderNodes: RenderNode[] = []
+let renderLinks: RenderLink[] = []
+
+const selectedNode = computed(() => props.graph.nodes.find(node => node.id === selectedId.value) || null)
+
+onMounted(async () => {
+  const connection = (navigator as Navigator & { connection?: { saveData?: boolean } }).connection
+  const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  const coarsePointer = window.matchMedia('(pointer: coarse)').matches
+  if (window.innerWidth < 768 || connection?.saveData || reducedMotion || coarsePointer) {
+    status.value = '当前设备保留 SSR 时间线，不加载动态星图。'
+    return
+  }
+  context = canvas.value?.getContext('2d') || null
+  if (!context || !canvas.value) {
+    status.value = 'Canvas 不可用，已保留下方文字时间线。'
+    return
+  }
+  try {
+    const { forceCenter, forceCollide, forceLink, forceManyBody, forceSimulation } = await import('d3-force')
+    if (disposed) return
+    renderNodes = props.graph.nodes.map((node, index) => ({
+      ...node,
+      x: 80 + (index % 8) * 110,
+      y: 70 + Math.floor(index / 8) * 80,
+    }))
+    renderLinks = props.graph.edges.map(edge => ({ ...edge })) as RenderLink[]
+    const size = measure()
+    simulation = forceSimulation<RenderNode>(renderNodes)
+      .force('link', forceLink<RenderNode, RenderLink>(renderLinks).id(node => node.id).distance(115).strength(.5))
+      .force('charge', forceManyBody<RenderNode>().strength(-190).distanceMax(500))
+      .force('center', forceCenter<RenderNode>(size.width / 2, size.height / 2))
+      .force('collide', forceCollide<RenderNode>().radius(nodeRadius).strength(.8))
+      .on('tick', scheduleDraw)
+    resizeObserver = new ResizeObserver(() => resize())
+    if (host.value) resizeObserver.observe(host.value)
+    status.value = '星图已接入。可使用节点清单、拖拽、滚轮缩放或重置视图。'
+    resize()
+    scheduleDraw()
+  } catch {
+    status.value = '动态星图加载失败，已保留下方文字时间线。'
+  }
+})
+
+onBeforeUnmount(() => {
+  disposed = true
+  simulation?.stop()
+  simulation?.on('tick', null)
+  simulation = null
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  if (frame) cancelAnimationFrame(frame)
+  frame = 0
+  context = null
+})
+
+function measure() {
+  const rect = host.value?.getBoundingClientRect()
+  return { width: Math.max(320, rect?.width || 720), height: Math.max(320, Math.min(620, rect?.height || 480)) }
+}
+
+function resize() {
+  if (!canvas.value || !context) return
+  const { width, height } = measure()
+  const dpr = Math.min(window.devicePixelRatio || 1, 1.5)
+  canvas.value.width = Math.floor(width * dpr)
+  canvas.value.height = Math.floor(height * dpr)
+  canvas.value.style.width = `${width}px`
+  canvas.value.style.height = `${height}px`
+  context.setTransform(dpr, 0, 0, dpr, 0, 0)
+  const center = simulation?.force('center') as { x?: (value: number) => unknown; y?: (value: number) => unknown } | undefined
+  center?.x?.(width / 2)
+  center?.y?.(height / 2)
+  scheduleDraw()
+}
+
+function scheduleDraw() {
+  if (frame || disposed) return
+  frame = requestAnimationFrame(() => {
+    frame = 0
+    draw()
+  })
+}
+
+function draw() {
+  if (!context || !canvas.value) return
+  const { width, height } = measure()
+  context.clearRect(0, 0, width, height)
+  const styles = getComputedStyle(canvas.value)
+  const accent = styles.getPropertyValue('--garden-accent') || '#a8ff60'
+  const line = styles.getPropertyValue('--garden-line') || 'rgba(168,255,96,.2)'
+  for (const edge of renderLinks) {
+    const source = edge.source as RenderNode
+    const target = edge.target as RenderNode
+    if (!source || !target || source.x == null || target.x == null) continue
+    const left = screenPoint(source)
+    const right = screenPoint(target)
+    context.beginPath()
+    context.moveTo(left.x, left.y)
+    context.lineTo(right.x, right.y)
+    context.lineWidth = Math.min(4, 1 + edge.weight * .45)
+    context.strokeStyle = line
+    context.stroke()
+  }
+  for (const node of renderNodes) {
+    if (node.x == null || node.y == null) continue
+    const point = screenPoint(node)
+    const radius = nodeRadius(node)
+    context.beginPath()
+    context.arc(point.x, point.y, radius, 0, Math.PI * 2)
+    context.fillStyle = node.id === selectedId.value ? accent : nodeColor(node.type)
+    context.fill()
+    context.lineWidth = node.id === selectedId.value ? 2 : 1
+    context.strokeStyle = accent
+    context.stroke()
+  }
+}
+
+function screenPoint(node: RenderNode) {
+  return { x: (node.x * view.scale) + view.x, y: (node.y * view.scale) + view.y }
+}
+
+function nodeRadius(node: RenderNode) {
+  return Math.min(11, 4 + Math.sqrt(Math.max(0, node.degree)) * 1.7)
+}
+
+function nodeColor(type: GardenNode['type']) {
+  return { ARTICLE: '#e8f1ee', TOOL: '#ff9d3d', TAG: '#8db7ac', CATEGORY: '#71d4c2' }[type]
+}
+
+function hitNode(event: PointerEvent | MouseEvent) {
+  const rect = canvas.value?.getBoundingClientRect()
+  if (!rect) return null
+  const x = (event.clientX - rect.left - view.x) / view.scale
+  const y = (event.clientY - rect.top - view.y) / view.scale
+  return [...renderNodes].reverse().find(node => Math.hypot(node.x - x, node.y - y) <= nodeRadius(node) + 8) || null
+}
+
+function selectNode(node: GardenNode | RenderNode) {
+  selectedId.value = node.id
+  status.value = `${gardenNodeTypeLabel(node.type)}：${node.label} 已选择。`
+  scheduleDraw()
+}
+
+function focusNode(node: GardenNode) {
+  selectNode(node)
+  const renderNode = renderNodes.find(item => item.id === node.id)
+  if (!renderNode) return
+  const { width, height } = measure()
+  view.x = width / 2 - renderNode.x * view.scale
+  view.y = height / 2 - renderNode.y * view.scale
+  scheduleDraw()
+}
+
+function openSelected() {
+  if (selectedNode.value?.href) window.location.assign(selectedNode.value.href)
+}
+
+function resetView() {
+  view.scale = 1
+  view.x = 0
+  view.y = 0
+  simulation?.alpha(.2).restart()
+  scheduleDraw()
+}
+
+function zoom(event: WheelEvent) {
+  event.preventDefault()
+  view.scale = Math.max(.55, Math.min(2.5, view.scale * (event.deltaY < 0 ? 1.1 : .9)))
+  scheduleDraw()
+}
+
+function pointerDown(event: PointerEvent) {
+  const node = hitNode(event)
+  if (!node) return
+  dragging = node
+  dragPointerId = event.pointerId
+  canvas.value?.setPointerCapture(event.pointerId)
+  selectNode(node)
+  simulation?.alphaTarget(.25).restart()
+  node.fx = node.x
+  node.fy = node.y
+}
+
+function pointerMove(event: PointerEvent) {
+  if (!dragging || dragPointerId !== event.pointerId) return
+  const rect = canvas.value?.getBoundingClientRect()
+  if (!rect) return
+  dragging.fx = (event.clientX - rect.left - view.x) / view.scale
+  dragging.fy = (event.clientY - rect.top - view.y) / view.scale
+  scheduleDraw()
+}
+
+function pointerUp(event: PointerEvent) {
+  if (!dragging || dragPointerId !== event.pointerId) return
+  dragging.fx = null
+  dragging.fy = null
+  simulation?.alphaTarget(0)
+  dragging = null
+  dragPointerId = null
+}
+
+function clickCanvas(event: MouseEvent) {
+  const node = hitNode(event)
+  if (node) selectNode(node)
+}
+
+function doubleClickCanvas(event: MouseEvent) {
+  const node = hitNode(event)
+  if (node?.href) window.location.assign(node.href)
+}
+</script>
+
+<template>
+  <section class="garden-canvas-panel" aria-labelledby="garden-canvas-title">
+    <div class="garden-canvas-header">
+      <div>
+        <p class="instrument-label">DESKTOP FORCE FIELD / CANVAS</p>
+        <h2 id="garden-canvas-title">星图接入</h2>
+      </div>
+      <button class="garden-reset" type="button" @click="resetView">RESET VIEW</button>
+    </div>
+    <div ref="host" class="garden-canvas-wrap">
+      <canvas
+        ref="canvas"
+        tabindex="0"
+        role="img"
+        aria-label="知识星图 Canvas；使用下方节点清单进行键盘选择"
+        @click="clickCanvas"
+        @dblclick="doubleClickCanvas"
+        @pointerdown="pointerDown"
+        @pointermove="pointerMove"
+        @pointerup="pointerUp"
+        @pointercancel="pointerUp"
+        @wheel.prevent="zoom"
+        @keydown.enter="openSelected"
+      />
+      <p class="garden-canvas-status" role="status" aria-live="polite">{{ status }}</p>
+    </div>
+    <div class="garden-legend" aria-label="节点类型图例">
+      <span v-for="type in ['ARTICLE', 'TOOL', 'TAG', 'CATEGORY']" :key="type"><i :class="`legend-dot legend-dot--${type.toLowerCase()}`" aria-hidden="true" /> {{ gardenNodeTypeLabel(type as GardenNode['type']) }}</span>
+    </div>
+    <div class="garden-node-ledger" role="list" aria-label="星图节点键盘清单">
+      <button v-for="node in graph.nodes" :key="node.id" type="button" role="listitem" class="garden-node-button" :aria-pressed="selectedId === node.id" @focus="focusNode(node)" @click="focusNode(node)">
+        <span class="node-type">{{ gardenNodeTypeLabel(node.type) }}</span>
+        <span>{{ node.label }}</span>
+        <span class="node-degree">{{ node.degree }}</span>
+      </button>
+    </div>
+    <aside v-if="selectedNode" class="garden-preview" aria-live="polite" aria-labelledby="garden-preview-title">
+      <p class="instrument-label">NODE PREVIEW</p>
+      <h3 id="garden-preview-title">{{ selectedNode.label }}</h3>
+      <p>{{ selectedNode.summary || '这是一个公开知识节点。' }}</p>
+      <a :href="selectedNode.href" class="garden-open-link">打开内容 <span aria-hidden="true">→</span></a>
+    </aside>
+  </section>
+</template>
+
+<style scoped>
+.garden-canvas-panel { --garden-accent: #a8ff60; --garden-line: rgba(168,255,96,.2); margin: 3rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--color-border); }
+.garden-canvas-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
+.garden-canvas-header h2 { margin: .45rem 0 0; font: 700 clamp(1.8rem, 4vw, 3.5rem)/1 var(--font-display); letter-spacing: -.05em; }
+.garden-reset, .garden-node-button, .garden-open-link { border: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); font: var(--text-xs)/1.2 var(--font-mono); letter-spacing: .04em; }
+.garden-reset { padding: .55rem .7rem; cursor: pointer; }
+.garden-reset:hover, .garden-reset:focus-visible { border-color: var(--color-accent); color: var(--color-accent); }
+.garden-canvas-wrap { position: relative; min-height: 25rem; overflow: hidden; border: 1px solid var(--color-border); background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--color-accent) 5%, transparent), transparent 58%), var(--color-bg-sub); background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px); background-size: 48px 48px; }
+.garden-canvas-wrap canvas { display: block; width: 100%; height: 30rem; cursor: grab; }
+.garden-canvas-wrap canvas:active { cursor: grabbing; }
+.garden-canvas-status { position: absolute; left: .75rem; bottom: .6rem; margin: 0; color: var(--color-text-muted); font: var(--text-xs)/1.35 var(--font-mono); }
+.garden-legend { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin: .8rem 0; color: var(--color-text-muted); font: var(--text-xs)/1.4 var(--font-mono); }
+.legend-dot { display: inline-block; width: .55rem; height: .55rem; margin-right: .25rem; border-radius: 50%; background: var(--color-text-main); }
+.legend-dot--tool { background: var(--color-warn); } .legend-dot--tag { background: var(--color-text-muted); } .legend-dot--category { background: #71d4c2; }
+.garden-node-ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; max-height: 14rem; overflow: auto; background: var(--color-border); }
+.garden-node-button { display: grid; grid-template-columns: 1fr auto; gap: .25rem .5rem; padding: .65rem; text-align: left; cursor: pointer; background: var(--color-bg-base); }
+.garden-node-button:hover, .garden-node-button:focus-visible, .garden-node-button[aria-pressed='true'] { border-color: var(--color-accent); color: var(--color-text-main); }
+.garden-node-button .node-type { grid-column: 1 / -1; overflow: hidden; color: var(--color-accent); text-overflow: ellipsis; white-space: nowrap; }
+.node-degree { color: var(--color-text-muted); font: var(--text-xs)/1 var(--font-mono); }
+.garden-preview { display: grid; gap: .55rem; max-width: 40rem; margin-top: 1rem; padding: 1rem; border-left: 2px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
+.garden-preview h3 { margin: 0; font: 700 1.35rem/1.2 var(--font-display); }
+.garden-preview p:not(.instrument-label) { margin: 0; color: var(--color-text-muted); line-height: 1.6; }
+.garden-open-link { width: fit-content; padding: .55rem .7rem; border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }
+.garden-open-link:hover, .garden-open-link:focus-visible { background: var(--color-accent); color: var(--color-accent-ink); }
+@media (max-width: 900px) { .garden-node-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (max-width: 640px) { .garden-canvas-header { align-items: start; flex-direction: column; } .garden-canvas-wrap { min-height: 20rem; } .garden-canvas-wrap canvas { height: 22rem; } }
+@media (prefers-reduced-motion: reduce) { .garden-canvas-panel *, .garden-canvas-panel *::before, .garden-canvas-panel *::after { animation: none !important; transition: none !important; } }
+</style>
diff --git a/apps/web/app/pages/garden.vue b/apps/web/app/pages/garden.vue
index a20c63f..3ce4d04 100644
--- a/apps/web/app/pages/garden.vue
+++ b/apps/web/app/pages/garden.vue
@@ -1,5 +1,128 @@
 <script setup lang="ts">
-useHead({ title: '数字花园', meta: [{ name: 'robots', content: 'noindex,nofollow' }] })
+import { emptyGardenGraph, gardenNodeDate, gardenNodeTypeLabel, sortedGardenTimeline, type GardenGraph } from '~/utils/publicGarden'
+import { defaultPublicSite, usePublicSite } from '~/utils/publicSite'
+import { buildPublicPageSeo, publicPageHead } from '~/utils/publicArticleSeo'
+
+const [{ data: site, error: siteError }, { data: graph, error: graphError }] = await Promise.all([
+  usePublicSite(),
+  usePublicApi<GardenGraph>('/api/v1/public/garden', {
+    key: 'public-garden',
+    default: () => emptyGardenGraph,
+  }),
+])
+
+const resolvedSite = site.value || defaultPublicSite
+const resolvedGraph = computed(() => graph.value || emptyGardenGraph)
+const timeline = computed(() => sortedGardenTimeline(resolvedGraph.value.nodes))
+const canvasAllowed = ref(false)
+
+useHead(() => publicPageHead(buildPublicPageSeo(
+  resolvedSite,
+  '/garden',
+  `知识星图 · ${resolvedSite.title}`,
+  '沿着文章与工具的公开关系，浏览极夜观测站正在生长的知识时间线。',
+)))
+
+onMounted(() => {
+  const connection = (navigator as Navigator & { connection?: { saveData?: boolean } }).connection
+  const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  const coarsePointer = window.matchMedia('(pointer: coarse)').matches
+  const smallViewport = window.matchMedia('(max-width: 767px)').matches
+  const canvas = document.createElement('canvas')
+  canvasAllowed.value = !reducedMotion && !coarsePointer && !smallViewport && !connection?.saveData
+    && Boolean(canvas.getContext('2d'))
+})
+
+function typeLabel(type: GardenGraph['nodes'][number]['type']) {
+  return gardenNodeTypeLabel(type)
+}
+
+function nodeDate(node: GardenGraph['nodes'][number]) {
+  return gardenNodeDate(node)
+}
 </script>
 
-<template><section class="observation-scene" aria-labelledby="garden-title"><p class="instrument-label">DIGITAL GARDEN</p><h1 id="garden-title">数字花园</h1><p class="signal-copy">知识节点将在这里保持生长与关联。</p></section></template>
+<template>
+  <section class="garden-scene" aria-labelledby="garden-title">
+    <header class="garden-heading">
+      <div>
+        <p class="instrument-label">DIGITAL GARDEN / KNOWLEDGE SIGNAL</p>
+        <h1 id="garden-title">知识星图</h1>
+        <p class="signal-copy">把公开文章与工具放回它们的轨道。时间线先抵达，桌面星图只在设备允许时接入。</p>
+      </div>
+      <p class="garden-readout" aria-label="星图状态"><span class="status-light" aria-hidden="true" /> {{ resolvedGraph.nodes.length }} NODES / {{ resolvedGraph.edges.length }} EDGES</p>
+    </header>
+
+    <p v-if="siteError" class="garden-note" role="status">站点信息暂时不可用，当前仍保留知识内容入口。</p>
+    <p v-if="graphError" class="garden-empty" role="status">
+      <strong>图谱信号暂时离线。</strong>
+      <span>接口没有返回关系数据；你仍可以从下方时间线继续阅读。</span>
+    </p>
+    <p v-else-if="!resolvedGraph.nodes.length" class="garden-empty" role="status">
+      <strong>星图还没有公开节点。</strong>
+      <span>当文章或工具完成公开校准后，它们会在这里留下轨道。</span>
+    </p>
+
+    <GardenCanvas v-if="canvasAllowed && !graphError && resolvedGraph.nodes.length" :graph="resolvedGraph" />
+
+    <section class="garden-timeline" aria-labelledby="garden-timeline-title">
+      <div class="timeline-heading">
+        <p class="instrument-label">PUBLIC SNAPSHOT / SSR TIMELINE</p>
+        <h2 id="garden-timeline-title">可读的知识时间线</h2>
+        <p>每一行都来自当前公开快照或 ACTIVE 工具；节点类型、日期和站内入口同时保留。</p>
+      </div>
+      <ol v-if="timeline.length" class="garden-log">
+        <li v-for="node in timeline" :key="node.id" class="garden-log-entry">
+          <div class="garden-log-meta">
+            <span class="node-type">{{ typeLabel(node.type) }}</span>
+            <time :datetime="node.publishedAt || undefined">{{ nodeDate(node) }}</time>
+            <span>DEGREE {{ node.degree }}</span>
+          </div>
+          <div class="garden-log-body">
+            <a :href="node.href" class="garden-log-link">{{ node.label }} <span aria-hidden="true">→</span></a>
+            <p>{{ node.summary || (node.type === 'TOOL' ? 'ACTIVE 工具入口，浏览器内按需展开。' : '公开文章快照，进入正文继续观测。') }}</p>
+          </div>
+        </li>
+      </ol>
+      <p v-else class="garden-empty garden-empty--timeline" role="status">
+        <strong>当前没有可读的文章或工具时间线。</strong>
+        <span>图谱为空不影响站点导航；请稍后再来查看公开内容。</span>
+      </p>
+    </section>
+  </section>
+</template>
+
+<style scoped>
+.garden-scene { max-width: 78rem; margin: 8vh auto 4rem; }
+.garden-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-8); margin-bottom: clamp(2.5rem, 8vw, 6rem); }
+.garden-heading h1 { max-width: none; margin: 1rem 0 1.25rem; }
+.garden-heading .signal-copy { max-width: 42rem; }
+.garden-readout, .garden-log-meta, .node-type { color: var(--color-text-muted); font: var(--text-xs)/1.4 var(--font-mono); letter-spacing: .04em; }
+.garden-readout { display: inline-flex; align-items: center; gap: .55rem; flex: 0 0 auto; margin: 0 0 .55rem; }
+.status-light { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--color-accent); }
+.garden-note { margin: 1rem 0; color: var(--color-warn); font: var(--text-sm)/1.5 var(--font-mono); }
+.garden-empty { display: grid; gap: .5rem; max-width: 42rem; margin: 1rem 0 2rem; padding: 1rem 1.2rem; border-left: 2px solid var(--color-warn); background: color-mix(in srgb, var(--color-warn) 7%, transparent); color: var(--color-text-muted); }
+.garden-empty strong { color: var(--color-text-main); }
+.garden-empty--timeline { margin-top: 1.25rem; }
+.garden-timeline { margin-top: clamp(3rem, 10vw, 8rem); }
+.timeline-heading { display: grid; gap: .7rem; max-width: 44rem; margin-bottom: 2rem; }
+.timeline-heading h2 { margin: 0; color: var(--color-text-main); font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4rem); letter-spacing: -.05em; }
+.timeline-heading p:last-child { margin: 0; color: var(--color-text-muted); line-height: 1.7; }
+.garden-log { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--color-border); }
+.garden-log-entry { display: grid; grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); gap: var(--space-6); padding: 1.1rem 1rem; background: var(--color-bg-base); }
+.garden-log-meta { display: grid; align-content: start; gap: .45rem; padding-top: .18rem; }
+.node-type { color: var(--color-accent); }
+.garden-log-body { display: grid; gap: .35rem; }
+.garden-log-link { width: fit-content; color: var(--color-text-main); font: 700 clamp(1.1rem, 2vw, 1.45rem)/1.2 var(--font-display); text-decoration: none; }
+.garden-log-link:hover, .garden-log-link:focus-visible { color: var(--color-accent); }
+.garden-log-body p { max-width: 48rem; margin: 0; color: var(--color-text-muted); line-height: 1.65; }
+@media (max-width: 640px) {
+  .garden-scene { margin-top: 5vh; }
+  .garden-heading { align-items: start; flex-direction: column; gap: 1rem; margin-bottom: 3rem; }
+  .garden-heading h1 { font-size: clamp(3rem, 18vw, 5rem); }
+  .garden-log-entry { grid-template-columns: 1fr; gap: .7rem; padding: 1rem .65rem; }
+  .garden-log-meta { display: flex; flex-wrap: wrap; gap: .3rem .75rem; }
+}
+@media (max-width: 360px) { .garden-scene { margin-top: 2rem; } .garden-log-link { font-size: 1.1rem; } }
+@media (prefers-reduced-motion: reduce) { .garden-scene *, .garden-scene *::before, .garden-scene *::after { animation: none !important; transition: none !important; } }
+</style>
diff --git a/apps/web/app/pages/studio/settings.vue b/apps/web/app/pages/studio/settings.vue
index c9492ec..b6cdac4 100644
--- a/apps/web/app/pages/studio/settings.vue
+++ b/apps/web/app/pages/studio/settings.vue
@@ -5,15 +5,24 @@
     <p v-if="loading" class="signal-note" role="status">正在读取站点控制面板…</p>
     <p v-else-if="error" class="form-error" role="alert">{{ error }}</p>
     <form v-else-if="site" class="settings-console" @submit.prevent="save">
-      <p class="console-label">GLOBAL / COMMENT SIGNAL</p>
+      <p class="console-label">GLOBAL / EXPERIENCE SIGNALS</p>
       <label class="switch-line" for="global-comments-enabled">
-        <input id="global-comments-enabled" v-model="draft" type="checkbox">
+        <input id="global-comments-enabled" v-model="commentsDraft" type="checkbox">
         <span>允许公开评论</span>
       </label>
+      <label class="switch-line" for="global-music-enabled">
+        <input id="global-music-enabled" v-model="musicDraft" type="checkbox">
+        <span>允许公共音乐信号</span>
+      </label>
+      <label class="switch-line" for="global-three-d-enabled">
+        <input id="global-three-d-enabled" v-model="threeDDraft" type="checkbox">
+        <span>允许首页 3D 信号</span>
+      </label>
       <p class="signal-note">关闭后，公共文章与评论表单会在下一次请求中反映状态；公共缓存策略最长 60 秒。</p>
+      <p class="signal-note">音乐开启前必须配置服务端清单地址；音乐与首页 3D 是独立开关。</p>
       <p class="signal-note">当前版本：<span class="mono">{{ site.version }}</span></p>
       <p v-if="saved" class="success-note" role="status">站点开关已写入，公共信号已刷新。</p>
-      <button class="instrument-button" type="submit" :disabled="saving || draft === site.commentsEnabled">
+      <button class="instrument-button" type="submit" :disabled="saving || !changed">
         {{ saving ? 'WRITING…' : '保存全局开关' }}
       </button>
     </form>
@@ -28,16 +37,25 @@ definePageMeta({ layout: 'studio' })
 
 const { getSite, updateSite } = useAdminSite()
 const site = ref<Site | null>(null)
-const draft = ref(true)
+const commentsDraft = ref(true)
+const musicDraft = ref(false)
+const threeDDraft = ref(false)
 const loading = ref(true)
 const saving = ref(false)
 const saved = ref(false)
 const error = ref('')
+const changed = computed(() => Boolean(site.value && (
+  commentsDraft.value !== site.value.commentsEnabled
+  || musicDraft.value !== site.value.musicEnabled
+  || threeDDraft.value !== site.value.threeDEnabled
+)))
 
 async function load() {
   try {
     site.value = await getSite()
-    draft.value = site.value.commentsEnabled
+    commentsDraft.value = site.value.commentsEnabled
+    musicDraft.value = site.value.musicEnabled
+    threeDDraft.value = site.value.threeDEnabled
   } catch (cause) {
     error.value = cause instanceof Error ? cause.message : '站点设置暂时不可用。'
   } finally {
@@ -46,12 +64,17 @@ async function load() {
 }
 
 async function save() {
-  if (!site.value || saving.value || draft.value === site.value.commentsEnabled) return
+  if (!site.value || saving.value || !changed.value) return
   saving.value = true
   saved.value = false
   error.value = ''
   try {
-    site.value = await updateSite({ version: site.value.version, commentsEnabled: draft.value })
+    site.value = await updateSite({
+      version: site.value.version,
+      commentsEnabled: commentsDraft.value,
+      musicEnabled: musicDraft.value,
+      threeDEnabled: threeDDraft.value,
+    })
     saved.value = true
   } catch (cause) {
     error.value = cause instanceof Error ? cause.message : '站点开关写入失败。'
diff --git a/apps/web/app/pages/tools.vue b/apps/web/app/pages/tools.vue
index a75ca4a..c31126d 100644
--- a/apps/web/app/pages/tools.vue
+++ b/apps/web/app/pages/tools.vue
@@ -19,18 +19,20 @@ const { data, error } = await usePublicApi<PublicTools>('/api/v1/public/tools',
   default: () => emptyTools,
 })
 
+const route = useRoute()
+const selectedToolSlug = computed(() => typeof route.query.tool === 'string' ? route.query.tool : '')
 const category = ref('')
 const type = ref('')
 const keyword = ref('')
 const sortMode = ref<SortMode>('stable')
 const favorites = ref(new Set<string>())
 const usage = ref<Record<string, { count: number; lastUsed: string }>>({})
-const expanded = ref(new Set<string>())
 const embeddedWorker = useEmbeddedWorker()
 provide(embeddedWorkerKey, embeddedWorker)
 
 const tools = computed(() => data.value?.items || [])
 const categories = computed(() => data.value?.categories || [])
+const expanded = ref(new Set<string>(tools.value.filter(tool => tool.slug === selectedToolSlug.value).map(tool => tool.id)))
 const filteredTools = computed(() => {
   const query = keyword.value.trim().toLocaleLowerCase()
   const result = tools.value.filter((tool) => {
@@ -52,6 +54,18 @@ onMounted(() => {
   usage.value = readUsage()
 })
 
+watch([selectedToolSlug, tools], async () => {
+  if (!import.meta.client) return
+  const slug = selectedToolSlug.value
+  if (!slug) return
+  const tool = tools.value.find(item => item.slug === slug)
+  if (!tool) return
+  expanded.value = new Set([...expanded.value, tool.id])
+  await nextTick()
+  const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  document.getElementById(`tool-${tool.slug}`)?.scrollIntoView({ block: 'center', behavior: reducedMotion ? 'auto' : 'smooth' })
+}, { immediate: true })
+
 function compareTools(left: PublicTool, right: PublicTool, mode: Exclude<SortMode, 'stable'>) {
   const leftUsage = usage.value[left.id] || { count: 0, lastUsed: '' }
   const rightUsage = usage.value[right.id] || { count: 0, lastUsed: '' }
@@ -155,7 +169,7 @@ function safeExternalUrl(url: string | null) {
       <span>尝试清除一个筛选条件。</span>
     </div>
     <ol v-else class="tool-console" aria-label="公共工具目录">
-      <li v-for="(tool, index) in filteredTools" :key="tool.id" class="tool-entry" :data-expanded="expanded.has(tool.id)">
+      <li v-for="(tool, index) in filteredTools" :id="`tool-${tool.slug}`" :key="tool.id" class="tool-entry" :data-expanded="expanded.has(tool.id)">
         <div class="tool-row">
           <span class="tool-index" aria-hidden="true">{{ String(index + 1).padStart(2, '0') }}</span>
           <span class="tool-signal" aria-hidden="true" />
diff --git a/apps/web/app/utils/publicGarden.ts b/apps/web/app/utils/publicGarden.ts
new file mode 100644
index 0000000..ae37c95
--- /dev/null
+++ b/apps/web/app/utils/publicGarden.ts
@@ -0,0 +1,32 @@
+import type { components } from '@haoblog/api-client'
+
+export type GardenGraph = components['schemas']['GardenGraphResponse']
+export type GardenNode = components['schemas']['GardenNode']
+export type GardenEdge = components['schemas']['GardenEdge']
+
+export const emptyGardenGraph: GardenGraph = { nodes: [], edges: [], truncated: false }
+
+export function gardenNodeTypeLabel(type: GardenNode['type']) {
+  return { ARTICLE: 'ARTICLE / 文章', TAG: 'TAG / 标签', CATEGORY: 'CATEGORY / 分类', TOOL: 'TOOL / 工具' }[type]
+}
+
+export function gardenNodeDate(node: GardenNode) {
+  if (!node.publishedAt) return node.type === 'TOOL' ? 'ACTIVE / 当前工具' : '未记录日期'
+  return new Date(node.publishedAt).toISOString().slice(0, 10)
+}
+
+export function sortedGardenTimeline(nodes: GardenNode[]) {
+  return [...nodes].filter(node => node.type === 'ARTICLE' || node.type === 'TOOL').sort((left, right) => {
+    if (left.type !== right.type) return left.type === 'ARTICLE' ? -1 : 1
+    if (left.publishedAt && right.publishedAt) {
+      const date = right.publishedAt.localeCompare(left.publishedAt)
+      if (date) return date
+    } else if (left.publishedAt) return -1
+    else if (right.publishedAt) return 1
+    return compareText(left.label, right.label) || compareText(left.id, right.id)
+  })
+}
+
+function compareText(left: string, right: string) {
+  return left < right ? -1 : left > right ? 1 : 0
+}
diff --git a/apps/web/app/utils/publicSite.ts b/apps/web/app/utils/publicSite.ts
index a8d5521..99b2bde 100644
--- a/apps/web/app/utils/publicSite.ts
+++ b/apps/web/app/utils/publicSite.ts
@@ -8,6 +8,9 @@ export const defaultPublicSite: PublicSite = {
   siteUrl: 'http://localhost:3000',
   authorName: 'Hao',
   commentsEnabled: true,
+  musicEnabled: false,
+  threeDEnabled: false,
+  musicManifestUrl: null,
 }
 
 export function usePublicSite() {
diff --git a/apps/web/e2e/stage5.spec.ts b/apps/web/e2e/stage5.spec.ts
new file mode 100644
index 0000000..7b9c23f
--- /dev/null
+++ b/apps/web/e2e/stage5.spec.ts
@@ -0,0 +1,86 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('S5-01/S5-02 knowledge garden', () => {
+  test('keeps the garden readable in SSR, no-JS, 360px, Save-Data and reduced-motion paths', async ({ page, browser }) => {
+    const ssr = await page.request.get('/garden')
+    expect(ssr.status()).toBe(200)
+    const html = await ssr.text()
+    expect(html).toContain('知识星图')
+    expect(html).toContain('可读的知识时间线')
+    expect(html).toContain('rel="canonical"')
+    expect(html).not.toContain('noindex')
+
+    const graph = await page.request.get('/api/v1/public/garden')
+    expect(graph.ok()).toBe(true)
+    const payload = await graph.json() as { nodes: unknown[]; edges: unknown[]; truncated: boolean }
+    expect(payload.nodes.length).toBeLessThanOrEqual(200)
+    expect(payload.edges.length).toBeLessThanOrEqual(600)
+    expect(typeof payload.truncated).toBe('boolean')
+
+    const noJs = await browser.newContext({
+      baseURL: process.env.HAOBLOG_BASE_URL || 'http://127.0.0.1',
+      javaScriptEnabled: false,
+    })
+    const noJsPage = await noJs.newPage()
+    await noJsPage.setViewportSize({ width: 360, height: 900 })
+    const noJsResponse = await noJsPage.goto('/garden')
+    expect(noJsResponse?.status()).toBe(200)
+    await expect(noJsPage.getByRole('heading', { name: '知识星图' })).toBeVisible()
+    await expect(noJsPage.getByRole('heading', { name: '可读的知识时间线' })).toBeVisible()
+    expect(await noJsPage.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(360)
+    await noJs.close()
+
+    const constrainedContexts = [
+      {
+        context: await browser.newContext({
+          baseURL: process.env.HAOBLOG_BASE_URL || 'http://127.0.0.1',
+          extraHTTPHeaders: { 'Save-Data': 'on' },
+        }),
+        reducedMotion: false,
+      },
+      {
+        context: await browser.newContext({ baseURL: process.env.HAOBLOG_BASE_URL || 'http://127.0.0.1' }),
+        reducedMotion: true,
+      },
+    ]
+    for (const { context, reducedMotion } of constrainedContexts) {
+      const constrainedPage = await context.newPage()
+      if (reducedMotion) await constrainedPage.emulateMedia({ reducedMotion: 'reduce' })
+      const dynamicRequests: string[] = []
+      constrainedPage.on('request', request => {
+        if (/d3-force/i.test(request.url())) dynamicRequests.push(request.url())
+      })
+      await constrainedPage.goto('/garden')
+      await expect(constrainedPage.getByRole('heading', { name: '知识星图' })).toBeVisible()
+      await expect(constrainedPage.locator('.garden-canvas-panel')).toHaveCount(0)
+      expect(dynamicRequests).toEqual([])
+      await context.close()
+    }
+  })
+
+  test('loads desktop force graph with keyboard-accessible preview and locates a tool query', async ({ page }) => {
+    await page.setViewportSize({ width: 1280, height: 900 })
+    await page.goto('/garden')
+    const graph = await page.request.get('/api/v1/public/garden')
+    expect(graph.ok()).toBe(true)
+    const payload = await graph.json() as { nodes: Array<{ href: string }> }
+
+    if (payload.nodes.length) {
+      await expect(page.locator('.garden-canvas-panel')).toBeVisible()
+      const firstNode = page.locator('.garden-node-button').first()
+      await firstNode.focus()
+      await page.keyboard.press('Enter')
+      await expect(page.locator('.garden-preview')).toBeVisible()
+      await expect(page.getByRole('link', { name: /打开内容/ })).toHaveAttribute('href', payload.nodes[0].href)
+    }
+
+    const tools = await page.request.get('/api/v1/public/tools')
+    expect(tools.ok()).toBe(true)
+    const tool = (await tools.json() as { items: Array<{ slug: string }> }).items[0]
+    if (!tool) return
+    await page.goto(`/tools?tool=${encodeURIComponent(tool.slug)}`)
+    const entry = page.locator(`#tool-${tool.slug}`)
+    await expect(entry).toBeVisible()
+    await expect(entry.getByRole('button', { name: 'CLOSE' })).toHaveAttribute('aria-expanded', 'true')
+  })
+})
diff --git a/apps/web/nuxt.config.ts b/apps/web/nuxt.config.ts
index 85cba37..5abd58f 100644
--- a/apps/web/nuxt.config.ts
+++ b/apps/web/nuxt.config.ts
@@ -17,7 +17,6 @@ export default defineNuxtConfig({
     '/articles': { cache: false },
     '/articles/**': { cache: false },
     '/article-previews/**': { cache: false, headers: { 'cache-control': 'no-store', 'referrer-policy': 'no-referrer', 'x-robots-tag': 'noindex, nofollow' } },
-    '/garden': { headers: { 'x-robots-tag': 'noindex, nofollow' } },
   },
   nitro: {
     compressPublicAssets: true,
diff --git a/apps/web/package.json b/apps/web/package.json
index 0d61f62..da54ad0 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -23,6 +23,7 @@
     "@shikijs/themes": "4.4.3",
     "@unocss/nuxt": "66.4.2",
     "diff": "8.0.4",
+    "d3-force": "3.0.0",
     "katex": "0.18.4",
     "markdown-it": "15.0.0",
     "mermaid": "11.17.0",
@@ -36,6 +37,7 @@
     "@lhci/cli": "0.15.1",
     "@playwright/test": "1.62.1",
     "@types/sanitize-html": "2.16.0",
+    "@types/d3-force": "3.0.10",
     "@vitejs/plugin-vue": "6.0.8",
     "@vue/test-utils": "2.4.6",
     "happy-dom": "18.0.1",
diff --git a/apps/web/test/public-garden.test.ts b/apps/web/test/public-garden.test.ts
new file mode 100644
index 0000000..2ccee28
--- /dev/null
+++ b/apps/web/test/public-garden.test.ts
@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest'
+import { sortedGardenTimeline, type GardenNode } from '../app/utils/publicGarden'
+
+describe('public garden timeline', () => {
+  it('uses the same code-point ordering in SSR and the browser', () => {
+    const nodes = [
+      { id: 'tool:timestamp', type: 'TOOL', label: '时间戳转换', href: '/tools?tool=timestamp', degree: 0 },
+      { id: 'tool:base64', type: 'TOOL', label: 'Base64 编解码', href: '/tools?tool=base64', degree: 0 },
+    ] as GardenNode[]
+
+    expect(sortedGardenTimeline(nodes).map(node => node.id)).toEqual(['tool:base64', 'tool:timestamp'])
+  })
+})
diff --git a/docs/openapi/public-api.yaml b/docs/openapi/public-api.yaml
index 7227532..7608b8a 100644
--- a/docs/openapi/public-api.yaml
+++ b/docs/openapi/public-api.yaml
@@ -79,6 +79,28 @@ paths:
             Cache-Control: { schema: { type: string } }
         '500':
           $ref: '#/components/responses/InternalError'
+  /api/v1/public/garden:
+    get:
+      operationId: getPublicGarden
+      security: []
+      parameters:
+        - $ref: '#/components/parameters/IfNoneMatch'
+      responses:
+        '200':
+          description: Public knowledge garden graph derived from published article snapshots and active tools
+          headers:
+            ETag: { $ref: '#/components/headers/ETag' }
+            Cache-Control: { schema: { type: string } }
+          content:
+            application/json:
+              schema: { $ref: '#/components/schemas/GardenGraphResponse' }
+        '304':
+          description: Garden graph has not changed
+          headers:
+            ETag: { $ref: '#/components/headers/ETag' }
+            Cache-Control: { schema: { type: string } }
+        '500':
+          $ref: '#/components/responses/InternalError'
   /api/v1/public/tools:
     get:
       operationId: listPublicTools
@@ -1032,13 +1054,16 @@ components:
   schemas:
     SiteResponse:
       type: object
-      required: [title, description, siteUrl, authorName, commentsEnabled]
+      required: [title, description, siteUrl, authorName, commentsEnabled, musicEnabled, threeDEnabled, musicManifestUrl]
       properties:
         title: { type: string }
         description: { type: string }
         siteUrl: { type: string, format: uri }
         authorName: { type: string }
         commentsEnabled: { type: boolean }
+        musicEnabled: { type: boolean }
+        threeDEnabled: { type: boolean }
+        musicManifestUrl: { type: [string, 'null'], format: uri }
     ArticleSummary:
       type: object
       required: [id, slug, title, excerpt, publishedAt, coverImageUrl, commentsEnabled]
@@ -1375,16 +1400,46 @@ components:
       properties:
         version: { type: integer, format: int64, minimum: 0 }
         commentsEnabled: { type: boolean }
+        musicEnabled: { type: boolean }
+        threeDEnabled: { type: boolean }
     AdminSiteResponse:
       type: object
-      required: [title, description, siteUrl, authorName, commentsEnabled, version]
+      required: [title, description, siteUrl, authorName, commentsEnabled, musicEnabled, threeDEnabled, version]
       properties:
         title: { type: string }
         description: { type: string }
         siteUrl: { type: string, format: uri }
         authorName: { type: string }
         commentsEnabled: { type: boolean }
+        musicEnabled: { type: boolean }
+        threeDEnabled: { type: boolean }
         version: { type: integer, format: int64, minimum: 0 }
+    GardenGraphResponse:
+      type: object
+      required: [nodes, edges, truncated]
+      properties:
+        nodes: { type: array, maxItems: 200, items: { $ref: '#/components/schemas/GardenNode' } }
+        edges: { type: array, maxItems: 600, items: { $ref: '#/components/schemas/GardenEdge' } }
+        truncated: { type: boolean }
+    GardenNode:
+      type: object
+      required: [id, type, label, href, degree]
+      properties:
+        id: { type: string, maxLength: 240 }
+        type: { type: string, enum: [ARTICLE, TAG, CATEGORY, TOOL] }
+        label: { type: string, maxLength: 240 }
+        href: { type: string, pattern: '^/' }
+        summary: { type: [string, 'null'], maxLength: 600 }
+        publishedAt: { type: [string, 'null'], format: date-time }
+        degree: { type: integer, minimum: 0 }
+    GardenEdge:
+      type: object
+      required: [source, target, kind, weight]
+      properties:
+        source: { type: string, maxLength: 240 }
+        target: { type: string, maxLength: 240 }
+        kind: { type: string, enum: [MEMBERSHIP, CO_OCCURRENCE] }
+        weight: { type: integer, minimum: 1 }
     MediaUploadRequest:
       type: object
       required: [mimeType, sizeBytes, width, height, sha256]
diff --git "a/docs/taget/\347\254\254\344\272\224\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md" "b/docs/taget/\347\254\254\344\272\224\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md"
index 3cc4fdd..cb79b0d 100644
--- "a/docs/taget/\347\254\254\344\272\224\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md"
+++ "b/docs/taget/\347\254\254\344\272\224\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md"
@@ -2,7 +2,7 @@
 
 ## 0. 阶段状态与适用范围
 
-本文件是阶段五的目标任务和实现前契约，不代表本阶段业务已经实现。2026-08-23 的“阶段 5 迭代 0”只完成阶段准入、基线记录和文档落盘；S5-01～S5-09 均待后续迭代实施。
+本文件是阶段五的目标任务和实现记录。2026-08-23 的“阶段 5 迭代 1”已完成 S5-01 图谱契约与 Feature Flag、S5-02 知识星图；S5-03～S5-09 仍待后续迭代实施。
 
 阶段五定位为“非 AI 体验与本地收口”：在阶段四已有的公开阅读、评论、工具和搜索基础上，补齐知识星图、终端导航、首页标志性动效、音乐与频谱、404 彩蛋、PWA 离线工具箱，以及重型效果的生命周期和降级边界。
 
@@ -42,7 +42,7 @@
 - 图谱数据由服务端从已公开的文章、标签、分类和工具读模型生成，不向浏览器发送全文，不由客户端拼接管理数据。
 - 音频二进制不经过 Spring Boot；Nuxt 服务端读取受信任 manifest 的地址，浏览器只接收校验后的清单和允许的 HTTPS 音频地址。
 - 重型客户端模块必须路由或交互懒加载，并在路由离开、组件卸载和 Feature Flag 关闭时释放监听器、计时器、Worker、AudioContext、AnalyserNode、Three.js 场景和纹理。
-- 阶段五不修改现有迁移文件，不创建新迁移；S5-01 的第一版 Feature Flag 采用服务端配置/公开读模型，不做 Studio 配置 CRUD。
+- 阶段五不修改现有迁移文件；本迭代新增 V16 迁移承载音乐与首页 3D 开关。S5-01 的 Feature Flag 已扩展公开/管理员读模型和 Studio 乐观锁设置，音乐清单仍由服务端环境变量提供。
 
 ## 三、任务依赖关系
 
@@ -68,14 +68,14 @@ flowchart LR
 
 ## 四、公共契约、数据结构与 Feature Flag
 
-以下是后续实现时必须通过 OpenAPI、Nuxt Server Route 或静态资源契约固化的公开接口。本轮不新增接口代码，也不修改 docs/openapi/public-api.yaml。
+以下是本阶段通过 OpenAPI、Nuxt Server Route 或静态资源契约固化的公开接口。本迭代已完成 S5-01/S5-02 所需的接口和生成客户端；后续接口仍按各任务单独实施。
 
 ### 4.1 公开接口
 
 | 接口 | 所属 | 目的与硬边界 |
 | --- | --- | --- |
 | GET /api/v1/public/site | Spring Boot | 在现有站点响应中增加公开的 featureFlags；保留现有 commentsEnabled、ETag 和缓存语义。不返回密钥、内部配置或 Studio 权限。 |
-| GET /api/v1/public/knowledge-graph | Spring Boot | 返回受限图谱 JSON；只含公开节点摘要、关系、权重、版本和 ETag，不含 Markdown、评论、未发布内容或管理字段。 |
+| GET /api/v1/public/garden | Spring Boot | 返回受限图谱 JSON；只含公开文章快照和 ACTIVE 工具的摘要、关系、权重与 ETag，不含 Markdown、评论、未发布内容、工具外部 URL 或管理字段。 |
 | GET /music-manifest.json | Nuxt Server Route/静态边界 | 由服务端配置的 HTTPS OSS/CDN manifest 地址提供校验后的清单；不提供 Studio 曲目 CRUD，不代理音频二进制。若源不可用，返回空清单并保留播放器降级文案。 |
 | GET /manifest.webmanifest | Web 静态资源 | 只描述公开站点和工具箱的安装元数据，不声明 Studio、评论写入或后台能力。 |
 | GET /sw.js | Web 静态资源 | 只负责公开工具箱的最小缓存和更新；不得拦截或持久化 /api/**、/studio/**、评论提交、登录和文章私有预览。 |
@@ -136,7 +136,7 @@ interface MusicManifest {
 
 ### 4.4 Feature Flag
 
-第一版采用服务端配置并通过 GET /api/v1/public/site 下发；不增加 Studio 开关编辑页面，不把开关写入浏览器可篡改的“真值”。客户端检测到缺失、非法或接口失败时，一律选择关闭重型效果的安全默认值。
+S5-01 已将 musicEnabled、threeDEnabled 写入站点设置并通过 GET /api/v1/public/site 下发；管理员设置页继续使用 version 乐观锁。客户端检测到缺失、非法或接口失败时，一律选择关闭重型效果的安全默认值。音乐清单未配置时，管理员开启音乐统一返回 MUSIC_MANIFEST_NOT_CONFIGURED；生产只接受绝对 HTTPS，local/dev 可使用 localhost HTTP。
 
 | Flag | 作用 | 安全默认 | 依赖 |
 | --- | --- | --- | --- |
@@ -177,13 +177,15 @@ data-theme="night|blueprint" 是用户本地选择，不是远端 Feature Flag
 
 ### S5-01：图谱契约与 Feature Flag
 
+实际状态：已完成（2026-08-23，阶段 5 迭代 1）。
+
 | 属性 | 内容 |
 | --- | --- |
 | 优先级 | P0 |
 | 前置依赖 | S5-00 |
 | 工作量 | 6–10 小时 |
-| 公开接口 | GET /api/v1/public/site、GET /api/v1/public/knowledge-graph |
-| 数据结构/Flag | KnowledgeGraphResponse、4 类节点、7 个阶段五开关 |
+| 公开接口 | GET /api/v1/public/site、GET /api/v1/public/garden、GET /api/v1/admin/site |
+| 数据结构/Flag | GardenGraphResponse、4 类节点、musicEnabled、threeDEnabled |
 
 目标：冻结图谱的最小公开读模型、ETag/缓存、节点上限、站内链接策略和体验开关，让后续组件不自行读取 JPA 实体或管理 API。
 
@@ -195,19 +197,23 @@ data-theme="night|blueprint" 是用户本地选择，不是远端 Feature Flag
 - 只返回已公开文章、已公开工具及其标签/分类关系；草稿、预览、归档和后台字段永不出现。
 - ETag 对图谱版本和影响响应的数据稳定，接口失败时客户端可使用空/静态回退。
 - 开关关闭或响应缺失时，页面仍能显示静态导航和文本内容。
-- 节点和边数量、字符串长度、响应体大小有硬上限。
+- 节点和边数量、字符串长度、响应体大小有硬上限；本迭代固定最多 200 个节点、600 条边，并返回 truncated。
+
+- site 模块只通过 content/toolbox application 层精简读模型获取图谱数据；管理员开启音乐时校验 HAOBLOG_MUSIC_MANIFEST_URL。
 
 测试场景：空站点、单节点、重复关系、未发布文章、越界节点、ETag/304、未知 flag、损坏 JSON、服务端 5xx 和客户端默认关闭。
 
 ### S5-02：知识星图
 
+实际状态：已完成（2026-08-23，阶段 5 迭代 1）。
+
 | 属性 | 内容 |
 | --- | --- |
 | 优先级 | P1 |
 | 前置依赖 | S5-01 |
 | 工作量 | 12–18 小时 |
-| 公开接口 | GET /api/v1/public/knowledge-graph |
-| 数据结构/Flag | 图谱节点/边、knowledgeGraph |
+| 公开接口 | GET /api/v1/public/garden |
+| 数据结构/Flag | ARTICLE、TAG、CATEGORY、TOOL 节点；MEMBERSHIP、CO_OCCURRENCE 边 |
 
 目标：使用 Canvas + 受限 Force 布局呈现文章、标签、分类和工具的关系；单击显示摘要导航，双击进入安全站内路径。
 
@@ -220,7 +226,7 @@ data-theme="night|blueprint" 是用户本地选择，不是远端 Feature Flag
 - 桌面可键盘聚焦、选择和打开节点；节点类型、标签和关系不只通过颜色表达。
 - 移动端、低性能设备、Save-Data、reduced-motion 或图谱失败时退化为可读时间线。
 - 图谱不进入文章详情初始客户端闭包；离开页面会取消布局、移除监听器并释放 Canvas。
-- 节点数量达到上限时仍可稳定渲染，超限时按公开权重确定性截断。
+- 节点数量达到上限时仍可稳定渲染，超限时按公开日期、工具排序、分类/标签度数和稳定 ID 确定性截断；移动端、Save-Data、reduced-motion、Canvas 不可用及接口失败时保留 SSR 时间线。
 
 测试场景：空图、最大图、断链、重复节点、键盘导航、触摸点击、双击进入、360px、禁用 JS、Save-Data、reduced-motion、动态块加载失败和路由离开。
 
diff --git "a/docs/taget/\351\230\266\346\256\265\344\272\224\345\207\206\345\205\245\346\270\205\345\215\225.md" "b/docs/taget/\351\230\266\346\256\265\344\272\224\345\207\206\345\205\245\346\270\205\345\215\225.md"
index 206e180..2f4547a 100644
--- "a/docs/taget/\351\230\266\346\256\265\344\272\224\345\207\206\345\205\245\346\270\205\345\215\225.md"
+++ "b/docs/taget/\351\230\266\346\256\265\344\272\224\345\207\206\345\205\245\346\270\205\345\215\225.md"
@@ -2,10 +2,10 @@
 
 ## 0. 本轮结论
 
-本清单对应“阶段 5 迭代 0：阶段准入与规划文档落盘”。本轮只建立可追溯基线和任务文档，不实现阶段五业务功能。
+本清单对应“阶段 5 迭代 1：S5-01 图谱契约与 Feature Flag + S5-02 知识星图”。本轮已完成 S5-01、S5-02 的纵向切片；S5-03～S5-09 不提前勾选。
 
 - 本轮文档：docs/taget/第五阶段目标任务.md、本文件。
-- 未新增业务代码、空类、数据库迁移、OpenAPI 路径、生成客户端或外部资源。
+- 已新增 V16 站点体验开关迁移、/api/v1/public/garden、OpenAPI 契约、生成客户端、Canvas 图谱及最小 d3-force 依赖；未新增服务或外部资源。
 - 未提交、推送、创建 PR、部署或修改云资源。
 - 阶段四文档在当前工作树中已经是删除状态；本轮未恢复，阶段四基线从提交 f0bfdac 读取。
 
@@ -14,11 +14,11 @@
 | 项目 | 本轮记录 |
 | --- | --- |
 | 工作目录 | G:\work\HaoBlog |
-| 分支 | codex/s4-01，跟踪 origin/codex/s4-01 |
-| HEAD | f0bfdac58e0f9821dd313e879892302eb971bc08（完成阶段四综合验收并收敛项目说明） |
-| 最近提交 | f0bfdac、c246517、0b3b5b8、57a03a4、1b066e3、4330ffc、6c24570、a18a7de |
+| 分支 | codex/s5 |
+| HEAD | 1771fb4（整理阶段五准入文档并建立阶段基线） |
+| 最近提交 | 1771fb4、f0bfdac、c246517、0b3b5b8、57a03a4、1b066e3、4330ffc、6c24570 |
 | 阶段五目录 | 本轮前不存在，已创建 docs/taget；该目录名按仓库规则保留为 taget |
-| 工作树初始状态 | AGENTS.md 修改；docs/HaoBlog 完整开发计划.md 修改；docs/第四阶段目标任务.md 删除；docs/阶段四准入清单.md 删除；无未跟踪文件 |
+| 工作树初始状态 | AGENTS.md 修改；docs/HaoBlog 完整开发计划.md 修改；docs/第四阶段目标任务.md 删除；docs/阶段四准入清单.md 删除；无关用户改动已保留 |
 | 保留资产 | 上述用户修改全部保留，尤其是完整开发计划中的阶段五边界、PWA/音乐/彩蛋调整；不覆盖、不回退、不恢复删除文档 |
 
 阶段 2/3 目标文档在当前树不存在：阶段 2 原文从 df6fada68e5fc1ecaabe257115bbfca95d6a20eb:docs/第二阶段目标任务.md 读取，阶段 3 原文从 7a377ab19fec7b829f47308662bb1b981e6fa460:docs/第三阶段目标任务.md 读取。阶段 4 原文从 f0bfdac 的 docs/第四阶段目标任务.md 和 docs/阶段四准入清单.md 读取。阶段 2/3 的历史实际路径在 docs/ 根目录，不在当前工作树的 docs/taget。
@@ -73,7 +73,7 @@ corepack pnpm --dir apps/web build
 corepack pnpm --filter @haoblog/api-client check
 ~~~
 
-本轮不执行 generate，因为没有 OpenAPI 修改；后续阶段五若实现 S5-01 的 API，必须先执行 corepack pnpm --filter @haoblog/api-client generate，再执行 check 并审阅生成文件 diff。
+本迭代已执行 generate，并在生成后执行 check；后续 OpenAPI 修改仍必须重复该流程并审阅生成文件 diff。
 
 ### 4.2 Compose 与工作树
 
@@ -97,11 +97,13 @@ git diff --check
 | corepack pnpm --version | 11.16.0 | 通过 |
 | docker version | Client/Server 29.7.2 | 通过 |
 | docker compose version | v5.3.1 | 通过 |
-| apps/api/.\\mvnw.cmd -DskipITs verify | Surefire 78/78，BUILD SUCCESS | 通过 |
+| apps/api/.\\mvnw.cmd -DskipITs verify | Surefire 83/83，BUILD SUCCESS | 通过 |
+| apps/api/.\\mvnw.cmd failsafe:integration-test failsafe:verify | Testcontainers 55/55，BUILD SUCCESS；包含 S5 图谱与 Feature Flag 集成覆盖 | 通过 |
 | corepack pnpm --dir apps/web typecheck | nuxt prepare、vue-tsc 完成 | 通过 |
-| corepack pnpm --dir apps/web test | 19 个测试文件，85/85 | 通过 |
+| corepack pnpm --dir apps/web test | 20 个测试文件，86/86 | 通过 |
 | corepack pnpm --dir apps/web build | Nuxt client/server/Nitro build complete | 通过；有现有依赖 deprecation 和 Vite 大 chunk 警告 |
-| corepack pnpm --filter @haoblog/api-client check | openapi-typescript 7.13.0 check 完成 | 通过 |
+| corepack pnpm --dir apps/web check:article-budget | 12 个静态闭包 chunk，65618 bytes gzip | 通过 |
+| corepack pnpm --filter @haoblog/api-client generate/check | 生成与 check 完成 | 通过 |
 | dev Compose config | Compose 配置成功解析 | 通过 |
 | prod Compose config | Compose 配置成功解析 | 通过 |
 | corepack pnpm compose:verify | Compose resource and health boundaries passed | 通过 |
@@ -109,6 +111,12 @@ git diff --check
 
 ## 六、阶段五准入判断
 
+### 6.1 迭代 1 实际状态
+
+- [x] S5-01 图谱契约与 Feature Flag：V16 默认关闭开关、公开/管理员 DTO、音乐清单校验、Studio version 乐观锁、OpenAPI 与生成客户端已完成。
+- [x] S5-02 知识星图：公开快照图谱、确定性 200/600 裁剪、ETag/60 秒共享缓存、SSR 时间线、桌面 d3-force Canvas、键盘预览、降级和 `/tools?tool=` 定位已完成。
+- [ ] S5-03～S5-09：按计划保留未开始状态。
+
 开始 S5-01 业务实现前，必须满足：
 
 - 本文件和 docs/taget/第五阶段目标任务.md 已存在且描述与用户锁定决策一致。
@@ -137,4 +145,4 @@ git diff --check
 - [x] 记录 Git 分支、HEAD、最近提交、用户未提交修改、阶段四删除状态和未跟踪文件检查。
 - [x] 创建阶段五目标任务和本准入清单。
 - [x] 完成本节“基线实际执行结果”的所有命令并逐项记录。
-- [ ] 阶段五业务功能完成；本轮明确不做。
+- [ ] 阶段五全部业务功能完成；S5-03～S5-09 本轮明确不做。
diff --git "a/docs/\346\234\254\345\234\260\345\220\257\345\212\250\346\214\207\345\215\227.md" "b/docs/\346\234\254\345\234\260\345\220\257\345\212\250\346\214\207\345\215\227.md"
index 1087f19..331bc2a 100644
--- "a/docs/\346\234\254\345\234\260\345\220\257\345\212\250\346\214\207\345\215\227.md"
+++ "b/docs/\346\234\254\345\234\260\345\220\257\345\212\250\346\214\207\345\215\227.md"
@@ -90,7 +90,7 @@ HAOBLOG_ADMIN_PASSWORD_HASH=BCrypt 哈希
 
 评论通知默认关闭。需要本地联调时，只在未提交的 `.env` 中设置 `HAOBLOG_COMMENT_NOTIFICATION_ENABLED=true`，并提供 SMTP 主机、端口、用户名、密码、TLS、站长接收地址和发件地址；仓库示例只使用占位值。API 会使用 5 秒连接、3 秒读取、5 秒写入超时。通知发送失败只进入 Outbox 重试，不会回滚评论提交或审核。
 
-阶段四使用的服务端环境变量分为数据库 `JDBC_DATABASE_*`、管理员 `HAOBLOG_ADMIN_*`、公共地址 `HAOBLOG_PUBLIC_BASE_URL`、评论安全 `HAOBLOG_COMMENT_SECURITY_KEY`、评论通知 `HAOBLOG_COMMENT_NOTIFICATION_*`、OSS `HAOBLOG_OSS_*` 和生产 Compose 的 `HAOBLOG_DOMAIN`/`HAOBLOG_API_IMAGE`/`HAOBLOG_WEB_IMAGE`。`HAOBLOG_COMMENT_SECURITY_KEY` 必须是稳定的高熵服务端密钥；SMTP 密码、OSS 密钥和生产域名只放在未提交的外部环境文件中。
+阶段五新增音乐清单配置 `HAOBLOG_MUSIC_MANIFEST_URL`：生产必须是绝对 HTTPS 地址；local/dev 可使用 localhost HTTP。清单未配置时音乐默认关闭，Studio 开启音乐会返回 `MUSIC_MANIFEST_NOT_CONFIGURED`。其余服务端环境变量分为数据库 `JDBC_DATABASE_*`、管理员 `HAOBLOG_ADMIN_*`、公共地址 `HAOBLOG_PUBLIC_BASE_URL`、评论安全 `HAOBLOG_COMMENT_SECURITY_KEY`、评论通知 `HAOBLOG_COMMENT_NOTIFICATION_*`、OSS `HAOBLOG_OSS_*` 和生产 Compose 的 `HAOBLOG_DOMAIN`/`HAOBLOG_API_IMAGE`/`HAOBLOG_WEB_IMAGE`。`HAOBLOG_COMMENT_SECURITY_KEY` 必须是稳定的高熵服务端密钥；SMTP 密码、OSS 密钥、音乐清单和生产域名只放在未提交的外部环境文件中。
 
 ### 2.2 安装 Web 依赖
 
diff --git a/infra/compose/.env.ci.example b/infra/compose/.env.ci.example
index d82375a..183146a 100644
--- a/infra/compose/.env.ci.example
+++ b/infra/compose/.env.ci.example
@@ -11,6 +11,7 @@ HAOBLOG_ADMIN_USERNAME=admin
 HAOBLOG_ADMIN_PASSWORD_HASH='$2a$10$0V.Xs7CLOUYSekm7RKq3Z.iY76KUan/Xbeu5vjmLpX.sVd4pcFpIu'
 HAOBLOG_PUBLIC_BASE_URL=http://localhost:3000
 HAOBLOG_AUTHOR_NAME=Hao
+HAOBLOG_MUSIC_MANIFEST_URL=
 HAOBLOG_COMMENT_SECURITY_KEY=AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=
 HAOBLOG_COMMENT_NOTIFICATION_ENABLED=false
 HAOBLOG_COMMENT_NOTIFICATION_SMTP_PORT=25
diff --git a/infra/compose/compose.dev.yml b/infra/compose/compose.dev.yml
index 44ef3d7..5f4597a 100644
--- a/infra/compose/compose.dev.yml
+++ b/infra/compose/compose.dev.yml
@@ -32,6 +32,7 @@ services:
       HAOBLOG_COMMENT_SECURITY_KEY: ${HAOBLOG_COMMENT_SECURITY_KEY:?HAOBLOG_COMMENT_SECURITY_KEY is required}
       HAOBLOG_PUBLIC_BASE_URL: ${HAOBLOG_PUBLIC_BASE_URL:-http://localhost:3000}
       HAOBLOG_AUTHOR_NAME: ${HAOBLOG_AUTHOR_NAME:-Hao}
+      HAOBLOG_MUSIC_MANIFEST_URL: ${HAOBLOG_MUSIC_MANIFEST_URL:-}
       HAOBLOG_COMMENT_NOTIFICATION_ENABLED: ${HAOBLOG_COMMENT_NOTIFICATION_ENABLED:-false}
       HAOBLOG_COMMENT_NOTIFICATION_SMTP_HOST: ${HAOBLOG_COMMENT_NOTIFICATION_SMTP_HOST:-}
       HAOBLOG_COMMENT_NOTIFICATION_SMTP_PORT: ${HAOBLOG_COMMENT_NOTIFICATION_SMTP_PORT:-25}
diff --git a/infra/compose/compose.prod.yml b/infra/compose/compose.prod.yml
index 1cd22c2..6182eb2 100644
--- a/infra/compose/compose.prod.yml
+++ b/infra/compose/compose.prod.yml
@@ -60,6 +60,7 @@ services:
       HAOBLOG_ADMIN_PASSWORD_HASH: ${HAOBLOG_ADMIN_PASSWORD_HASH:?HAOBLOG_ADMIN_PASSWORD_HASH is required}
       HAOBLOG_PUBLIC_BASE_URL: ${HAOBLOG_PUBLIC_BASE_URL:?HAOBLOG_PUBLIC_BASE_URL is required}
       HAOBLOG_AUTHOR_NAME: ${HAOBLOG_AUTHOR_NAME:-Hao}
+      HAOBLOG_MUSIC_MANIFEST_URL: ${HAOBLOG_MUSIC_MANIFEST_URL:-}
       HAOBLOG_COMMENT_SECURITY_KEY: ${HAOBLOG_COMMENT_SECURITY_KEY:?HAOBLOG_COMMENT_SECURITY_KEY is required}
       HAOBLOG_COMMENT_NOTIFICATION_ENABLED: ${HAOBLOG_COMMENT_NOTIFICATION_ENABLED:-false}
       HAOBLOG_COMMENT_NOTIFICATION_SMTP_HOST: ${HAOBLOG_COMMENT_NOTIFICATION_SMTP_HOST:-}
diff --git a/packages/api-client/src/generated.ts b/packages/api-client/src/generated.ts
index dc7f5fd..95845f0 100644
--- a/packages/api-client/src/generated.ts
+++ b/packages/api-client/src/generated.ts
@@ -52,6 +52,22 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/api/v1/public/garden": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["getPublicGarden"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/api/v1/public/tools": {
         parameters: {
             query?: never;
@@ -661,6 +677,10 @@ export interface components {
             siteUrl: string;
             authorName: string;
             commentsEnabled: boolean;
+            musicEnabled: boolean;
+            threeDEnabled: boolean;
+            /** Format: uri */
+            musicManifestUrl: string | null;
         };
         ArticleSummary: {
             /** Format: uuid */
@@ -1017,6 +1037,8 @@ export interface components {
             /** Format: int64 */
             version: number;
             commentsEnabled: boolean;
+            musicEnabled?: boolean;
+            threeDEnabled?: boolean;
         };
         AdminSiteResponse: {
             title: string;
@@ -1025,9 +1047,34 @@ export interface components {
             siteUrl: string;
             authorName: string;
             commentsEnabled: boolean;
+            musicEnabled: boolean;
+            threeDEnabled: boolean;
             /** Format: int64 */
             version: number;
         };
+        GardenGraphResponse: {
+            nodes: components["schemas"]["GardenNode"][];
+            edges: components["schemas"]["GardenEdge"][];
+            truncated: boolean;
+        };
+        GardenNode: {
+            id: string;
+            /** @enum {string} */
+            type: "ARTICLE" | "TAG" | "CATEGORY" | "TOOL";
+            label: string;
+            href: string;
+            summary?: string | null;
+            /** Format: date-time */
+            publishedAt?: string | null;
+            degree: number;
+        };
+        GardenEdge: {
+            source: string;
+            target: string;
+            /** @enum {string} */
+            kind: "MEMBERSHIP" | "CO_OCCURRENCE";
+            weight: number;
+        };
         MediaUploadRequest: {
             /** @enum {string} */
             mimeType: "image/jpeg" | "image/png" | "image/webp";
@@ -1465,6 +1512,40 @@ export interface operations {
             500: components["responses"]["InternalError"];
         };
     };
+    getPublicGarden: {
+        parameters: {
+            query?: never;
+            header?: {
+                "If-None-Match"?: components["parameters"]["IfNoneMatch"];
+            };
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            /** @description Public knowledge garden graph derived from published article snapshots and active tools */
+            200: {
+                headers: {
+                    ETag: components["headers"]["ETag"];
+                    "Cache-Control"?: string;
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["GardenGraphResponse"];
+                };
+            };
+            /** @description Garden graph has not changed */
+            304: {
+                headers: {
+                    ETag: components["headers"]["ETag"];
+                    "Cache-Control"?: string;
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            500: components["responses"]["InternalError"];
+        };
+    };
     listPublicTools: {
         parameters: {
             query?: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index adcbb24..2d21a06 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -40,6 +40,9 @@ importers:
       '@unocss/nuxt':
         specifier: 66.4.2
         version: 66.4.2(magic-string@1.1.0)(magicast@0.5.4)(oxc-parser@0.142.0)(postcss@8.5.26)(rolldown@1.2.3)(supports-color@10.2.2)(unplugin@3.3.0(esbuild@0.28.2)(rolldown@1.2.3)(rollup@4.62.4)(vite@7.3.6(@types/node@26.2.0)(jiti@2.7.0)(lightningcss@1.33.0)(terser@5.49.2)(yaml@2.9.0))(webpack@5.109.2(cssnano@8.0.5(postcss@8.5.26))(csso@5.0.5)(esbuild@0.28.2)(lightningcss@1.33.0)(postcss@8.5.26)))(vite@7.3.6(@types/node@26.2.0)(jiti@2.7.0)(lightningcss@1.33.0)(terser@5.49.2)(yaml@2.9.0))(webpack@5.109.2(cssnano@8.0.5(postcss@8.5.26))(csso@5.0.5)(esbuild@0.28.2)(lightningcss@1.33.0)(postcss@8.5.26))
+      d3-force:
+        specifier: 3.0.0
+        version: 3.0.0
       diff:
         specifier: 8.0.4
         version: 8.0.4
@@ -74,6 +77,9 @@ importers:
       '@playwright/test':
         specifier: 1.62.1
         version: 1.62.1
+      '@types/d3-force':
+        specifier: 3.0.10
+        version: 3.0.10
       '@types/sanitize-html':
         specifier: 2.16.0
         version: 2.16.0

From c9dceddcd61e1996d4453239c96240f64ec2ae6d Mon Sep 17 00:00:00 2001
From: DDT <––1786035110@stu.gpnu.edu.cn>
Date: Sun, 23 Aug 2026 22:23:24 +0800
Subject: [PATCH 3/7] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=9F=A5=E8=AF=86?=
 =?UTF-8?q?=E6=98=9F=E5=9B=BE=20Save-Data=20=E9=99=8D=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/app/pages/garden.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/web/app/pages/garden.vue b/apps/web/app/pages/garden.vue
index 3ce4d04..96e2495 100644
--- a/apps/web/app/pages/garden.vue
+++ b/apps/web/app/pages/garden.vue
@@ -15,6 +15,7 @@ const resolvedSite = site.value || defaultPublicSite
 const resolvedGraph = computed(() => graph.value || emptyGardenGraph)
 const timeline = computed(() => sortedGardenTimeline(resolvedGraph.value.nodes))
 const canvasAllowed = ref(false)
+const { enabled: saveData } = useDataSaver()
 
 useHead(() => publicPageHead(buildPublicPageSeo(
   resolvedSite,
@@ -29,7 +30,7 @@ onMounted(() => {
   const coarsePointer = window.matchMedia('(pointer: coarse)').matches
   const smallViewport = window.matchMedia('(max-width: 767px)').matches
   const canvas = document.createElement('canvas')
-  canvasAllowed.value = !reducedMotion && !coarsePointer && !smallViewport && !connection?.saveData
+  canvasAllowed.value = !saveData.value && !reducedMotion && !coarsePointer && !smallViewport && !connection?.saveData
     && Boolean(canvas.getContext('2d'))
 })
 

From 94cb686e8e13f3ee829b7e364ca3d6f20b204a30 Mon Sep 17 00:00:00 2001
From: DDT <––1786035110@stu.gpnu.edu.cn>
Date: Sun, 23 Aug 2026 23:34:09 +0800
Subject: [PATCH 4/7] =?UTF-8?q?=E5=AE=8C=E6=88=90=E9=98=B6=E6=AE=B5?=
 =?UTF-8?q?=E4=BA=94=E8=BF=AD=E4=BB=A3=E4=BA=8C=E5=AE=89=E5=85=A8=E7=BB=88?=
 =?UTF-8?q?=E7=AB=AF=E4=B8=BB=E9=A2=98=E4=B8=8E=E9=A6=96=E9=A1=B5=E4=B8=89?=
 =?UTF-8?q?=E5=B9=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/app/assets/styles/articles.css       |  28 +-
 apps/web/app/assets/styles/shell.css          |   5 +
 .../components/home/HomeThreeScene.client.vue | 243 ++++++++++++++++++
 .../components/home/PublicHomeOverview.vue    | 167 ++++++++++--
 .../terminal/CommandTerminal.client.vue       | 242 +++++++++++++++++
 apps/web/app/layouts/default.vue              |  37 ++-
 apps/web/app/utils/terminalCommands.ts        |  54 ++++
 apps/web/app/utils/theme.ts                   |  60 +++++
 apps/web/e2e/stage3.spec.ts                   |   4 +-
 apps/web/e2e/stage4.spec.ts                   |   2 +-
 apps/web/e2e/stage5.spec.ts                   | 133 +++++++++-
 apps/web/nuxt.config.ts                       |  17 +-
 apps/web/package.json                         |   2 +
 apps/web/test/terminal-commands.test.ts       |  32 +++
 ...56\346\240\207\344\273\273\345\212\241.md" |  10 +-
 ...06\345\205\245\346\270\205\345\215\225.md" |  26 +-
 pnpm-lock.yaml                                |  53 ++++
 17 files changed, 1077 insertions(+), 38 deletions(-)
 create mode 100644 apps/web/app/components/home/HomeThreeScene.client.vue
 create mode 100644 apps/web/app/components/terminal/CommandTerminal.client.vue
 create mode 100644 apps/web/app/utils/terminalCommands.ts
 create mode 100644 apps/web/app/utils/theme.ts
 create mode 100644 apps/web/test/terminal-commands.test.ts

diff --git a/apps/web/app/assets/styles/articles.css b/apps/web/app/assets/styles/articles.css
index 33eaf50..effa792 100644
--- a/apps/web/app/assets/styles/articles.css
+++ b/apps/web/app/assets/styles/articles.css
@@ -1,16 +1,35 @@
 @import 'katex/dist/katex.min.css';
 
-.home-overview { position: relative; max-width: 68rem; margin-top: 12vh; }
+.home-overview { position: relative; max-width: 68rem; margin-top: 0; }
 .home-overview::before { position: absolute; z-index: -1; inset: 0; pointer-events: none; background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px); background-size: 48px 48px; content: ''; mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
 .home-overview.is-data-saver::before { display: none; }
+.home-act { position: relative; }
+.home-calibration-scene { min-height: calc(100vh - 52px); padding-top: clamp(5rem, 13vh, 10rem); }
 .home-calibration { display: flex; align-items: start; justify-content: space-between; gap: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
 .home-readout, .home-coordinate, .home-identity, .log-count, .recent-index, .index-note, .observation-index, .observation-open { color: var(--color-text-muted); font: var(--text-xs)/1.5 var(--font-mono); letter-spacing: .08em; }
 .home-readout { margin: .75rem 0 0; }
 .home-coordinate { margin: 0; text-align: right; }
 .status-light { display: inline-block; width: .35rem; height: .35rem; margin-right: .35rem; border-radius: 50%; background: var(--color-accent); vertical-align: .08em; }
 .home-overview h1 { margin-top: clamp(3rem, 10vh, 7rem); }
+.home-title-button { max-width: 100%; padding: 0; border: 0; color: inherit; background: transparent; font: inherit; letter-spacing: inherit; line-height: inherit; text-align: left; cursor: pointer; }
+.home-title-button:hover, .home-title-button:focus-visible { color: var(--color-accent); }
 .home-identity { margin: 0 0 1rem; color: var(--color-accent); }
 .home-overview .signal-copy { max-width: 34rem; }
+.home-scanline { position: absolute; top: 0; left: 0; width: 100%; height: 1px; pointer-events: none; background: var(--color-accent); opacity: 0; }
+.home-starmap-scene { min-height: 42rem; padding-top: clamp(5rem, 13vh, 10rem); border-top: 1px solid var(--color-border); }
+.home-act-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
+.home-act-heading h2, .home-recent-scene h2 { margin: .55rem 0 0; font: 700 clamp(2rem, 6vw, 4.75rem)/.95 var(--font-display); letter-spacing: -.06em; }
+.home-frame-readout { margin: 0 .15rem .35rem 0; color: var(--color-text-muted); font: var(--text-xs)/1.5 var(--font-mono); letter-spacing: .08em; }
+.home-starmap-copy { max-width: 42rem; margin: 1.5rem 0 0; color: var(--color-text-muted); line-height: 1.7; }
+.home-static-starmap { position: relative; min-height: 19rem; margin-top: 2rem; overflow: hidden; border: 1px solid var(--color-border); background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px); background-size: 48px 48px; }
+.home-static-starmap::before, .home-static-starmap::after { position: absolute; inset: 15% 12%; border: 1px solid var(--color-track); border-radius: 50%; content: ''; transform: rotate(-12deg); }
+.home-static-starmap::after { inset: 22% 22%; transform: rotate(31deg); }
+.home-orbit { position: absolute; z-index: 1; padding: .35rem .45rem; border: 1px solid var(--color-accent); color: var(--color-text-main); background: var(--color-bg-sub); font: var(--text-xs)/1.3 var(--font-mono); }
+.home-orbit--article { top: 16%; left: 13%; }.home-orbit--tag { top: 42%; right: 13%; }.home-orbit--category { bottom: 16%; left: 25%; }.home-orbit--tool { right: 27%; bottom: 20%; }
+.home-orbit-core { position: absolute; top: 50%; left: 50%; width: .8rem; height: .8rem; border: 2px solid var(--color-accent); background: var(--color-bg-base); transform: translate(-50%, -50%) rotate(45deg); }
+.home-starmap-status, .home-starmap-fallback { color: var(--color-text-muted); font: var(--text-xs)/1.6 var(--font-mono); }
+.home-starmap-fallback a { color: var(--color-accent); }
+.home-recent-scene { margin-top: clamp(6rem, 16vh, 12rem); padding: 1.5rem 0 5rem; border-top: 1px solid var(--color-border); }
 .continue-reading { display: inline-flex; gap: .6rem; align-items: center; margin-top: 2.5rem; color: var(--color-accent); font: var(--text-xs)/1.5 var(--font-mono); letter-spacing: .08em; text-decoration: none; }
 .continue-reading span { display: inline-grid; width: 1.45rem; height: 1.45rem; place-items: center; border: 1px solid var(--color-border); transition: transform var(--motion-fast) ease, border-color var(--motion-fast) ease; }
 .continue-reading:hover span, .continue-reading:focus-visible span { transform: translateY(.2rem); border-color: var(--color-accent); }
@@ -146,9 +165,12 @@ html[data-theme='blueprint'] .safe-markdown .shiki span { color: var(--shiki-lig
 @media (max-width: 480px) { .comment-signal-heading { align-items: start; flex-direction: column; gap: .5rem; }.comment-signal-fields { grid-template-columns: 1fr; gap: 0; }.comment-signal-form { padding: .8rem; }.comment-signal-cancel { top: .8rem; right: .8rem; }.comment-signal-safety { padding-right: 4.5rem; } }
 @media (max-width: 1023px) { .article-instrument { display: block; max-width: 45rem; margin-top: 6vh; }.article-signal { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; height: auto; margin: 0 0 2rem; padding: .5rem 0; background: var(--color-bg-base); }.article-signal-track { width: 100%; height: 2px; }.article-signal-fill { width: var(--signal-progress); height: 100%; }.article-toc { position: static; margin-top: 3rem; padding: 1rem 0 0; border-left: 0; border-top: 1px solid var(--color-border); }.article-toc ol { padding-bottom: .25rem; } }
 @media (max-width: 767px) { .observation-entry { grid-template-columns: 1fr; gap: .4rem; padding-left: 1rem; }.article-pagination { padding-left: 1rem; }.recent-list li { grid-template-columns: 2rem 1fr; gap: .35rem .75rem; }.recent-list time { grid-column: 2; }.recent-list a { grid-column: 2; }.recent-list .recent-index { grid-row: 1 / span 2; }.home-calibration, .recent-heading { align-items: start; flex-direction: column; gap: .75rem; }.home-coordinate { text-align: left; }.observation-entry-heading { grid-template-columns: 2rem minmax(0, 1fr); }.article-cover-frame { grid-column: 2; width: min(12rem, 100%); }.observation-entry-content p { margin-top: .9rem; } }
-@media (max-width: 360px) { .home-overview h1 { font-size: clamp(3rem, 18vw, 4.5rem); } .home-overview::before { display: none; } .safe-markdown { font-size: 1rem; line-height: 1.8; } .observation-entry-heading { grid-template-columns: 1.5rem minmax(0, 1fr); gap: .5rem; } .observation-index { font-size: .68rem; } }
+@media (max-width: 767px) { .home-act-heading { align-items: start; flex-direction: column; gap: .75rem; }.home-starmap-scene { min-height: 35rem; }.home-static-starmap { min-height: 16rem; }.home-orbit { font-size: .68rem; }.home-orbit--article { left: 4%; }.home-orbit--tag { right: 4%; }.home-orbit--tool { right: 8%; } }
+@media (max-width: 360px) { .home-overview h1 { font-size: clamp(3rem, 18vw, 4.5rem); } .home-overview::before { display: none; } .home-static-starmap { min-height: 14rem; } .safe-markdown { font-size: 1rem; line-height: 1.8; } .observation-entry-heading { grid-template-columns: 1.5rem minmax(0, 1fr); gap: .5rem; } .observation-index { font-size: .68rem; } }
 @media (max-width: 480px) { .search-signal-controls { align-items: stretch; flex-direction: column; } .search-signal-controls button { align-self: start; } }
-@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) { .home-overview::before { opacity: .7; } .continue-reading span, .route-menu a { transition: none; } }
+@media (prefers-reduced-motion: no-preference) { .home-scanline { animation: home-scanline 800ms 500ms ease-out both; } }
+@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) { .home-overview::before { opacity: .7; } .home-scanline { display: none; } .continue-reading span, .route-menu a { transition: none; } }
+@keyframes home-scanline { from { opacity: 0; transform: translateY(0); } 20% { opacity: .9; } to { opacity: 0; transform: translateY(calc(100vh - 52px)); } }
 .safe-markdown .katex { font-size: 1em; }
 .safe-markdown .katex-block { display: block; max-width: 100%; margin: 1.75rem 0; overflow-x: auto; padding: .25rem 0; text-align: center; }
 .safe-markdown .katex-error { color: var(--color-warn); font-family: var(--font-mono); font-size: .9em; }
diff --git a/apps/web/app/assets/styles/shell.css b/apps/web/app/assets/styles/shell.css
index 9ef44df..c7d8f56 100644
--- a/apps/web/app/assets/styles/shell.css
+++ b/apps/web/app/assets/styles/shell.css
@@ -2,6 +2,8 @@
 html { min-width: 320px; background: var(--color-bg-base); }
 html, body, #__nuxt { min-height: 100%; margin: 0; }
 body { overflow-x: clip; background: var(--color-bg-base); color: var(--color-text-main); font-family: var(--font-body); }
+html[data-theme='blueprint'] body { background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px); background-size: 48px 48px; }
+html[data-theme-transition='on'] body::after { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 1px; pointer-events: none; background: var(--color-accent); content: ''; animation: theme-sweep 420ms ease-out both; }
 main, section, article, aside, nav, div { min-width: 0; }
 button, a { color: inherit; }
 a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
@@ -18,6 +20,7 @@ h1 { max-width: 10ch; margin: 1rem 0; font-family: var(--font-display); font-siz
 .dock-progress { position: fixed; z-index: var(--z-dock); inset: auto 0 48px; height: 4px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; }
 .instrument-dock { position: fixed; z-index: var(--z-dock); inset: auto 0 0; display: grid; grid-template-columns: 1fr 1fr 1fr; height: 48px; align-items: center; padding: 0 var(--space-shell); background: var(--color-bg-sub); border-top: 1px solid var(--color-border); }
 .dock-control { border: 0; background: transparent; text-decoration: none; cursor: pointer; }
+.dock-control:hover, .dock-control:focus-visible { color: var(--color-text-main); }
 .dock-control--disabled { cursor: not-allowed; opacity: .52; }
 .dock-status { display: grid; justify-items: center; gap: 0.1rem; text-align: center; }
 .dock-help { color: var(--color-text-muted); font: 0.625rem/1 var(--font-mono); letter-spacing: .04em; }
@@ -43,3 +46,5 @@ h1 { max-width: 10ch; margin: 1rem 0; font-family: var(--font-display); font-siz
 @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }
 @media (prefers-reduced-motion: no-preference) { .observation-scene { animation: scene-in var(--motion-slow) ease-out both; } }
 @keyframes scene-in { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: translateY(0); } }
+@keyframes theme-sweep { from { opacity: 0; transform: translateX(-100%); } 18% { opacity: 1; } to { opacity: 0; transform: translateX(100%); } }
+@media (prefers-reduced-motion: reduce) { html[data-theme-transition='on'] body::after { display: none; animation: none; } }
diff --git a/apps/web/app/components/home/HomeThreeScene.client.vue b/apps/web/app/components/home/HomeThreeScene.client.vue
new file mode 100644
index 0000000..9cd6ada
--- /dev/null
+++ b/apps/web/app/components/home/HomeThreeScene.client.vue
@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import type { GardenGraph, GardenNode } from '../../utils/publicGarden'
+
+const props = defineProps<{ graph: GardenGraph }>()
+const emit = defineEmits<{ failed: [] }>()
+const host = ref<HTMLElement | null>(null)
+const canvas = ref<HTMLCanvasElement | null>(null)
+const selectedId = ref<string | null>(null)
+const status = ref('3D 场景准备中。')
+let disposed = false
+let visible = false
+let pageVisible = true
+let raf = 0
+let visibilityObserver: IntersectionObserver | null = null
+let resizeObserver: ResizeObserver | null = null
+let three: typeof import('three') | null = null
+let scene: import('three').Scene | null = null
+let camera: import('three').PerspectiveCamera | null = null
+let renderer: import('three').WebGLRenderer | null = null
+let root: import('three').Group | null = null
+let nodeMesh: import('three').InstancedMesh | null = null
+let lineSegments: import('three').LineSegments | null = null
+let nodeGeometry: import('three').BufferGeometry | null = null
+let nodeMaterial: import('three').Material | null = null
+let lineGeometry: import('three').BufferGeometry | null = null
+let lineMaterial: import('three').Material | null = null
+let nodePositions = new Map<string, import('three').Vector3>()
+
+const selectedNode = computed(() => props.graph.nodes.find(node => node.id === selectedId.value) || null)
+
+onMounted(() => {
+  void mountScene()
+})
+
+onBeforeUnmount(() => {
+  disposed = true
+  stopLoop()
+  visibilityObserver?.disconnect()
+  visibilityObserver = null
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  document.removeEventListener('visibilitychange', handleVisibility)
+  disposeScene()
+})
+
+async function mountScene() {
+  if (!canvas.value || !host.value) return
+  try {
+    three = await import('three')
+    if (disposed || !three) return
+    scene = new three.Scene()
+    camera = new three.PerspectiveCamera(42, 1, .1, 100)
+    camera.position.z = 7
+    renderer = new three.WebGLRenderer({ canvas: canvas.value, antialias: false, alpha: true, powerPreference: 'low-power' })
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.5))
+    renderer.setClearColor(0x000000, 0)
+    root = new three.Group()
+    scene.add(root)
+    buildGraph(three)
+    resizeObserver = new ResizeObserver(resize)
+    resizeObserver.observe(host.value)
+    visibilityObserver = new IntersectionObserver(entries => {
+      visible = entries.some(entry => entry.isIntersecting)
+      syncLoop()
+    }, { threshold: 0 })
+    visibilityObserver.observe(host.value)
+    document.addEventListener('visibilitychange', handleVisibility)
+    resize()
+    status.value = '3D 星图已接入。节点清单支持键盘选择，画布节点可点击打开内容。'
+  } catch {
+    status.value = 'WebGL 或 Three.js 不可用，已回退到上方静态关系图。'
+    disposeScene()
+    emit('failed')
+  }
+}
+
+function buildGraph(module: typeof import('three')) {
+  if (!root) return
+  const positions = props.graph.nodes.map((node, index) => {
+    const angle = index * 2.39996
+    const radius = 1.25 + (index % 5) * .32
+    const position = new module.Vector3(Math.cos(angle) * radius, Math.sin(angle) * radius, ((index % 4) - 1.5) * .32)
+    nodePositions.set(node.id, position)
+    return position
+  })
+  nodeGeometry = new module.SphereGeometry(.13, 8, 6)
+  nodeMaterial = new module.MeshBasicMaterial({ vertexColors: true })
+  nodeMesh = new module.InstancedMesh(nodeGeometry, nodeMaterial, positions.length)
+  const matrix = new module.Matrix4()
+  props.graph.nodes.forEach((node, index) => {
+    const position = positions[index]!
+    matrix.makeTranslation(position.x, position.y, position.z)
+    nodeMesh?.setMatrixAt(index, matrix)
+    nodeMesh?.setColorAt(index, new module.Color(nodeColor(node.type)))
+  })
+  nodeMesh.instanceMatrix.needsUpdate = true
+  nodeMesh.instanceColor && (nodeMesh.instanceColor.needsUpdate = true)
+  root.add(nodeMesh)
+
+  const vertices: number[] = []
+  props.graph.edges.forEach(edge => {
+    const source = nodePositions.get(edge.source)
+    const target = nodePositions.get(edge.target)
+    if (!source || !target) return
+    vertices.push(source.x, source.y, source.z, target.x, target.y, target.z)
+  })
+  lineGeometry = new module.BufferGeometry()
+  lineGeometry.setAttribute('position', new module.Float32BufferAttribute(vertices, 3))
+  lineMaterial = new module.LineBasicMaterial({ color: nodeColor('TAG'), transparent: true, opacity: .38 })
+  lineSegments = new module.LineSegments(lineGeometry, lineMaterial)
+  root.add(lineSegments)
+}
+
+function nodeColor(type: GardenNode['type']) {
+  return { ARTICLE: 0xe8f1ee, TOOL: 0xff9d3d, TAG: 0x8db7ac, CATEGORY: 0x71d4c2 }[type]
+}
+
+function resize() {
+  if (!host.value || !camera || !renderer) return
+  const rect = host.value.getBoundingClientRect()
+  const width = Math.max(280, rect.width)
+  const height = Math.max(240, Math.min(520, rect.height))
+  camera.aspect = width / height
+  camera.updateProjectionMatrix()
+  renderer.setSize(width, height, false)
+  renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.5))
+  render()
+}
+
+function handleVisibility() {
+  pageVisible = document.visibilityState === 'visible'
+  syncLoop()
+}
+
+function syncLoop() {
+  if (visible && pageVisible && !raf && !disposed) raf = requestAnimationFrame(loop)
+  if ((!visible || !pageVisible || disposed) && raf) {
+    cancelAnimationFrame(raf)
+    raf = 0
+  }
+}
+
+function loop() {
+  raf = 0
+  if (!visible || !pageVisible || disposed) return
+  if (root) root.rotation.y += .0012
+  render()
+  raf = requestAnimationFrame(loop)
+}
+
+function render() {
+  if (renderer && scene && camera) renderer.render(scene, camera)
+}
+
+function stopLoop() {
+  if (raf) cancelAnimationFrame(raf)
+  raf = 0
+}
+
+function disposeScene() {
+  stopLoop()
+  nodeGeometry?.dispose()
+  nodeMaterial?.dispose()
+  lineGeometry?.dispose()
+  lineMaterial?.dispose()
+  nodeGeometry = null
+  nodeMaterial = null
+  lineGeometry = null
+  lineMaterial = null
+  scene?.clear()
+  root = null
+  nodeMesh = null
+  lineSegments = null
+  renderer?.forceContextLoss()
+  renderer?.dispose()
+  renderer = null
+  scene = null
+  camera = null
+  nodePositions.clear()
+  if (canvas.value) {
+    canvas.value.width = 0
+    canvas.value.height = 0
+  }
+}
+
+function selectNode(node: GardenNode) {
+  selectedId.value = node.id
+  status.value = `${node.label} 已选择。`
+}
+
+function openNode(node: GardenNode | null) {
+  if (!node?.href || !/^\/(?!\/)[a-z0-9/?=&_.-]+$/i.test(node.href)) return
+  window.location.assign(node.href)
+}
+
+function clickCanvas(event: PointerEvent) {
+  if (!three || !camera || !nodeMesh || !canvas.value) return
+  const rect = canvas.value.getBoundingClientRect()
+  const pointer = new three.Vector2(((event.clientX - rect.left) / rect.width) * 2 - 1, -((event.clientY - rect.top) / rect.height) * 2 + 1)
+  const raycaster = new three.Raycaster()
+  raycaster.setFromCamera(pointer, camera)
+  const hit = raycaster.intersectObject(nodeMesh)[0]
+  if (hit?.instanceId == null) return
+  const node = props.graph.nodes[hit.instanceId]
+  if (!node) return
+  selectNode(node)
+  openNode(node)
+}
+</script>
+
+<template>
+  <section ref="host" class="home-three-panel" aria-labelledby="home-three-title">
+    <div class="home-three-heading">
+      <div>
+        <p class="instrument-label">THREE / INSTANCED SIGNAL FIELD</p>
+        <h3 id="home-three-title">低功耗轨道视图</h3>
+      </div>
+      <span class="home-three-status" role="status">{{ status }}</span>
+    </div>
+    <canvas ref="canvas" class="home-three-canvas" aria-label="可点击的公开知识星图 3D 画布" @pointerup="clickCanvas" />
+    <p v-if="selectedNode" class="home-three-selected" role="status">已选择：{{ selectedNode.label }}</p>
+    <div class="home-three-ledger" role="list" aria-label="3D 星图节点清单">
+      <a v-for="node in graph.nodes" :key="node.id" :href="node.href || '/garden'" role="listitem" :aria-current="selectedId === node.id ? 'true' : undefined" @focus="selectNode(node)">
+        <span>{{ node.label }}</span><small>{{ node.type }}</small>
+      </a>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.home-three-panel { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
+.home-three-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
+.home-three-heading h3 { margin: .45rem 0 0; font: 700 clamp(1.5rem, 4vw, 2.5rem)/1 var(--font-display); }
+.home-three-status { max-width: 34rem; color: var(--color-text-muted); font: var(--text-xs)/1.5 var(--font-mono); }
+.home-three-canvas { display: block; width: 100%; height: min(34rem, 60vw); min-height: 18rem; margin-top: 1rem; border: 1px solid var(--color-border); background: var(--color-bg-sub); }
+.home-three-selected { margin: .55rem 0 0; color: var(--color-accent); font: var(--text-xs)/1.4 var(--font-mono); }
+.home-three-ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: .75rem; background: var(--color-border); }
+.home-three-ledger a { display: grid; gap: .25rem; min-width: 0; padding: .6rem; color: var(--color-text-main); background: var(--color-bg-base); text-decoration: none; }
+.home-three-ledger a:hover, .home-three-ledger a:focus-visible, .home-three-ledger a[aria-current='true'] { color: var(--color-accent); }
+.home-three-ledger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.home-three-ledger small { color: var(--color-text-muted); font: .68rem/1.2 var(--font-mono); }
+@media (max-width: 767px) { .home-three-heading { align-items: start; flex-direction: column; }.home-three-canvas { height: 18rem; }.home-three-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+</style>
diff --git a/apps/web/app/components/home/PublicHomeOverview.vue b/apps/web/app/components/home/PublicHomeOverview.vue
index 16b5055..f8f9028 100644
--- a/apps/web/app/components/home/PublicHomeOverview.vue
+++ b/apps/web/app/components/home/PublicHomeOverview.vue
@@ -1,19 +1,121 @@
 <script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'
+import type { Component } from 'vue'
 import type { components } from '@haoblog/api-client'
+import type { GardenGraph } from '../../utils/publicGarden'
 import { useDataSaver } from '../../composables/useDataSaver'
+import { useMotionPreference } from '../../composables/useMotionPreference'
+import { useTheme } from '../../utils/theme'
 
 type Site = components['schemas']['SiteResponse']
 type ArticleList = components['schemas']['ArticleListResponse']
+type SceneState = 'waiting' | 'loading' | 'three' | 'fallback' | 'flag-off' | 'constrained' | 'empty'
 
-const { enabled: dataSaver } = useDataSaver()
-
-defineProps<{
+const props = defineProps<{
   site: Site
   recent: ArticleList
   siteError?: boolean
   recentError?: boolean
 }>()
 
+const { enabled: dataSaver } = useDataSaver()
+const { reduced } = useMotionPreference()
+const { theme, setTheme } = useTheme()
+const starMapSection = ref<HTMLElement | null>(null)
+const sceneComponent = shallowRef<Component | null>(null)
+const sceneGraph = ref<GardenGraph | null>(null)
+const sceneState = ref<SceneState>('waiting')
+let observer: IntersectionObserver | null = null
+let active = true
+let titleClickCount = 0
+let titleClickTimer: ReturnType<typeof setTimeout> | undefined
+
+const sceneStatus = computed(() => {
+  switch (sceneState.value) {
+    case 'loading': return '星图接入中；Three.js 与公开图谱只在此刻请求。'
+    case 'three': return '桌面低功耗 3D 已接入；下方键盘清单始终可用。'
+    case 'fallback': return '动态星图不可用，当前保留静态关系图与文字版入口。'
+    case 'flag-off': return '3D 信号未开启，当前保留静态关系图与文字版入口。'
+    case 'constrained': return '当前设备走静态降级路径，不加载 3D。'
+    case 'empty': return '暂无公开图谱节点，当前保留静态关系图与文字版入口。'
+    default: return '进入视口后才接入 3D；在此之前只显示 SSR 静态说明。'
+  }
+})
+
+onMounted(() => {
+  if (!props.site.threeDEnabled) {
+    sceneState.value = 'flag-off'
+    return
+  }
+  if (dataSaver.value || reduced.value || window.innerWidth < 768 || window.matchMedia('(pointer: coarse)').matches) {
+    sceneState.value = 'constrained'
+    return
+  }
+  if (!canUseWebGL()) {
+    sceneState.value = 'fallback'
+    return
+  }
+  if (!('IntersectionObserver' in window) || !starMapSection.value) {
+    sceneState.value = 'fallback'
+    return
+  }
+  observer = new IntersectionObserver(entries => {
+    if (entries.some(entry => entry.isIntersecting)) void loadThreeScene()
+  }, { threshold: .15 })
+  observer.observe(starMapSection.value)
+})
+
+onBeforeUnmount(() => {
+  active = false
+  observer?.disconnect()
+  observer = null
+  if (titleClickTimer) clearTimeout(titleClickTimer)
+})
+
+function canUseWebGL() {
+  try {
+    const canvas = document.createElement('canvas')
+    return Boolean(canvas.getContext('webgl'))
+  } catch {
+    return false
+  }
+}
+
+async function loadThreeScene() {
+  if (sceneState.value !== 'waiting' || !active) return
+  sceneState.value = 'loading'
+  try {
+    const graph = await $fetch<GardenGraph>('/api/v1/public/garden')
+    if (!active) return
+    if (!graph.nodes.length) {
+      sceneState.value = 'empty'
+      return
+    }
+    const module = await import('./HomeThreeScene.client.vue')
+    if (!active) return
+    sceneGraph.value = graph
+    sceneComponent.value = module.default
+    sceneState.value = 'three'
+  } catch {
+    if (active) sceneState.value = 'fallback'
+  }
+}
+
+function handleTitleClick() {
+  titleClickCount += 1
+  if (titleClickTimer) clearTimeout(titleClickTimer)
+  titleClickTimer = setTimeout(() => { titleClickCount = 0 }, 1200)
+  if (titleClickCount < 5) return
+  titleClickCount = 0
+  setTheme(theme.value === 'blueprint' ? 'night' : 'blueprint')
+}
+
+function handleSceneFailure() {
+  sceneComponent.value = null
+  sceneGraph.value = null
+  sceneState.value = 'fallback'
+}
+
 function formatDate(value: string) {
   return new Intl.DateTimeFormat('zh-CN', {
     timeZone: 'Asia/Shanghai',
@@ -25,25 +127,50 @@ function formatDate(value: string) {
 </script>
 
 <template>
-  <section class="home-overview observation-scene" :class="{ 'is-data-saver': dataSaver }" aria-labelledby="site-title">
-    <div class="home-calibration">
-      <div>
-        <p class="instrument-label">OBSERVATION / INITIAL FRAME</p>
-        <p class="home-readout"><span class="status-light" aria-hidden="true" /> PUBLIC SSR / SIGNAL LOCKED</p>
+  <div class="home-overview observation-scene" :class="{ 'is-data-saver': dataSaver }">
+    <section id="calibration-scene" class="home-act home-calibration-scene" aria-labelledby="site-title">
+      <div class="home-calibration">
+        <div>
+          <p class="instrument-label">FIRST FRAME / 夜空校准 / CALIBRATION</p>
+          <p class="home-readout"><span class="status-light" aria-hidden="true" /> PUBLIC SSR / SIGNAL LOCKED</p>
+        </div>
+        <p class="home-coordinate">N 31°14′ · E 121°28′<br>UTC+08 / NIGHT SHIFT</p>
+      </div>
+      <h1 id="site-title"><button class="home-title-button" type="button" aria-label="站点标题，连续点击五次切换蓝图主题" @click="handleTitleClick">{{ site.title }}</button></h1>
+      <p class="home-identity">{{ site.authorName }} / DEVELOPER OBSERVATORY</p>
+      <p class="signal-copy">{{ site.description }}</p>
+      <p v-if="siteError" class="signal-note" role="alert">站点信号暂时不可用，当前显示基础信息。</p>
+      <a class="continue-reading" href="#starmap-title"><span aria-hidden="true">↓</span> 继续校准 / CONTINUE READING</a>
+      <span class="home-scanline" aria-hidden="true" />
+    </section>
+
+    <section ref="starMapSection" id="starmap-scene" class="home-act home-starmap-scene" aria-labelledby="starmap-title">
+      <div class="home-act-heading">
+        <div>
+          <p class="instrument-label">SECOND FRAME / KNOWLEDGE SIGNAL</p>
+          <h2 id="starmap-title">星图接入</h2>
+        </div>
+        <p class="home-frame-readout">HOME SCENE / LOW POWER</p>
       </div>
-      <p class="home-coordinate">N 31°14′ · E 121°28′<br>UTC+08 / NIGHT SHIFT</p>
-    </div>
-    <h1 id="site-title">{{ site.title }}</h1>
-    <p class="home-identity">{{ site.authorName }} / DEVELOPER OBSERVATORY</p>
-    <p class="signal-copy">{{ site.description }}</p>
-    <p v-if="siteError" class="signal-note" role="alert">站点信号暂时不可用，当前显示基础信息。</p>
-    <a class="continue-reading" href="#recent-title"><span aria-hidden="true">↓</span> 继续阅读 / CONTINUE READING</a>
-
-    <section class="recent-observations" aria-labelledby="recent-title">
+      <p class="home-starmap-copy">公开文章、标签、分类和工具在同一张关系图上留下轨道。首屏只输出这段说明；桌面设备滚动到本幕后，才按条件接入 Three.js。</p>
+      <div class="home-static-starmap" role="img" aria-label="静态知识星图降级：文章、标签、分类和工具通过关系线连接">
+        <span class="home-orbit home-orbit--article">ARTICLE / 文章</span>
+        <span class="home-orbit home-orbit--tag">TAG / 标签</span>
+        <span class="home-orbit home-orbit--category">CATEGORY / 分类</span>
+        <span class="home-orbit home-orbit--tool">TOOL / 工具</span>
+        <i class="home-orbit-core" aria-hidden="true" />
+      </div>
+      <p class="home-starmap-status" role="status" aria-live="polite">{{ sceneStatus }}</p>
+      <p class="home-starmap-fallback">可访问降级：<a href="/garden">打开知识星图文字时间线</a>，或直接前往<a href="/articles">近期文章</a>和<a href="/tools">公开工具</a>。</p>
+      <component :is="sceneComponent" v-if="sceneComponent && sceneGraph" :graph="sceneGraph" @failed="handleSceneFailure" />
+      <a class="continue-reading" href="#recent-title"><span aria-hidden="true">↓</span> 进入近期日志 / NEXT FRAME</a>
+    </section>
+
+    <section id="recent-log" class="home-act home-recent-scene" aria-labelledby="recent-title">
       <div class="recent-heading">
         <div>
-          <p class="instrument-label">RECENT / PUBLIC LOG</p>
-          <h2 id="recent-title">最近公开文章</h2>
+          <p class="instrument-label">THIRD FRAME / RECENT LOG</p>
+          <h2 id="recent-title">近期观测日志</h2>
         </div>
         <span class="log-count">{{ String(recent.total).padStart(2, '0') }} ENTRIES</span>
       </div>
@@ -58,5 +185,5 @@ function formatDate(value: string) {
       </ol>
       <NuxtLink class="recent-more" to="/articles">查看全部文章 →</NuxtLink>
     </section>
-  </section>
+  </div>
 </template>
diff --git a/apps/web/app/components/terminal/CommandTerminal.client.vue b/apps/web/app/components/terminal/CommandTerminal.client.vue
new file mode 100644
index 0000000..700d515
--- /dev/null
+++ b/apps/web/app/components/terminal/CommandTerminal.client.vue
@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import type { components } from '@haoblog/api-client'
+import { parseTerminalCommand, terminalHelp, type TerminalCommand } from '../../utils/terminalCommands'
+import { publicSearchPageUrl } from '../../utils/publicSearch'
+import { useTheme } from '../../utils/theme'
+
+type ArticleList = components['schemas']['ArticleListResponse']
+type ToolList = components['schemas']['PublicToolListResponse']
+type OutputLine = { id: number; text: string; href?: string }
+
+const props = defineProps<{ open: boolean }>()
+const emit = defineEmits<{ close: [] }>()
+const dialog = ref<HTMLDialogElement | null>(null)
+const input = ref<HTMLInputElement | null>(null)
+const value = ref('')
+const outputs = ref<OutputLine[]>([])
+const history = ref<string[]>([])
+const historyIndex = ref(-1)
+const status = ref('终端已就绪。')
+const { setTheme } = useTheme()
+let nextOutputId = 0
+
+watch(() => props.open, async open => {
+  await nextTick()
+  if (!dialog.value) return
+  if (open && !dialog.value.open) dialog.value.showModal()
+  if (open) input.value?.focus()
+  if (!open && dialog.value.open) dialog.value.close()
+})
+
+onMounted(async () => {
+  if (props.open) {
+    await nextTick()
+    dialog.value?.showModal()
+    input.value?.focus()
+  }
+})
+
+function close() {
+  if (dialog.value?.open) dialog.value.close()
+  emit('close')
+}
+
+function append(text: string, href?: string) {
+  outputs.value.push({ id: ++nextOutputId, text, href })
+  if (outputs.value.length > 100) outputs.value = outputs.value.slice(-100)
+}
+
+function clearOutput() {
+  outputs.value = []
+  status.value = '输出已清空。'
+}
+
+function cycleHistory(direction: 1 | -1) {
+  if (!history.value.length) return
+  const next = historyIndex.value + direction
+  if (next < -1 || next >= history.value.length) return
+  historyIndex.value = next
+  value.value = next === -1 ? '' : (history.value[history.value.length - 1 - next] || '')
+}
+
+function focusables() {
+  return [...(dialog.value?.querySelectorAll<HTMLElement>('button, input, [tabindex]:not([tabindex="-1"])') || [])]
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    close()
+    return
+  }
+  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'l') {
+    event.preventDefault()
+    value.value = ''
+    clearOutput()
+    input.value?.focus()
+    return
+  }
+  if (event.key === 'ArrowUp' && document.activeElement === input.value) {
+    event.preventDefault()
+    cycleHistory(1)
+    return
+  }
+  if (event.key === 'ArrowDown' && document.activeElement === input.value) {
+    event.preventDefault()
+    cycleHistory(-1)
+    return
+  }
+  if (event.key !== 'Tab') return
+  const items = focusables()
+  if (items.length < 2) return
+  const current = items.indexOf(document.activeElement as HTMLElement)
+  const next = event.shiftKey ? (current <= 0 ? items.length - 1 : current - 1) : (current + 1) % items.length
+  event.preventDefault()
+  items[next]?.focus()
+}
+
+async function run(command: TerminalCommand) {
+  if (command.kind === 'clear') {
+    clearOutput()
+    return
+  }
+  if (command.kind === 'help') {
+    terminalHelp.forEach(line => append(line))
+    status.value = '已显示帮助。'
+    return
+  }
+  if (command.kind === 'theme') {
+    setTheme(command.theme)
+    append(`主题已切换为 ${command.theme === 'blueprint' ? 'blueprint / 蓝图' : 'night / 极夜'}。`)
+    status.value = '主题状态已更新。'
+    return
+  }
+  if (command.kind === 'open') {
+    append(`OPEN ${command.href}`)
+    status.value = '正在打开站内路径。'
+    await navigateTo(command.href)
+    close()
+    return
+  }
+  if (command.kind === 'ask') {
+    append('AI 信号尚未开放。本阶段不会调用 AI。')
+    append('站内搜索入口：', command.question.length >= 2 ? publicSearchPageUrl(command.question, 1) : '/search')
+    status.value = '已切换到安全降级。'
+    return
+  }
+
+  if (command.kind === 'list') {
+    status.value = `正在读取 ${command.target === 'posts' ? '公开文章' : '公开工具'}…`
+    try {
+      if (command.target === 'posts') {
+        const result = await $fetch<ArticleList>('/api/v1/public/articles', { query: { page: 0, size: 20 } })
+        if (!result.items.length) append('没有可显示的公开文章。')
+        result.items.slice(0, 20).forEach(article => append(`${article.title}  /articles/${article.slug}`, `/articles/${article.slug}`))
+      } else {
+        const result = await $fetch<ToolList>('/api/v1/public/tools')
+        if (!result.items.length) append('没有可显示的公开工具。')
+        result.items.slice(0, 20).forEach(tool => append(`${tool.title}  /tools?tool=${encodeURIComponent(tool.slug)}`, `/tools?tool=${encodeURIComponent(tool.slug)}`))
+      }
+      status.value = '读取完成，最多显示 20 条公开结果。'
+    } catch {
+      append('公开信号暂时不可用，请稍后重试。')
+      status.value = '读取失败。'
+    }
+    return
+  }
+
+  if (command.kind === 'grep') {
+    status.value = '正在检索公开文章…'
+    try {
+      const result = await $fetch<ArticleList>('/api/v1/public/search/articles', { query: { q: command.query, page: 0, size: 20 } })
+      if (!result.items.length) append('没有命中公开文章。')
+      result.items.slice(0, 20).forEach(article => append(`${article.title}  /articles/${article.slug}`, `/articles/${article.slug}`))
+      status.value = '检索完成，最多显示 20 条公开结果。'
+    } catch {
+      append('公开搜索信号暂时不可用，请稍后重试。')
+      status.value = '检索失败。'
+    }
+  }
+}
+
+async function submit() {
+  const commandText = value.value.trim()
+  if (!commandText) return
+  value.value = ''
+  history.value = [...history.value, commandText].slice(-50)
+  historyIndex.value = -1
+  append(`> ${commandText}`)
+  const parsed = parseTerminalCommand(commandText)
+  if (parsed.kind === 'error') {
+    append(`ERROR: ${parsed.message}`)
+    status.value = '命令未执行。'
+    return
+  }
+  await run(parsed)
+  input.value?.focus()
+}
+</script>
+
+<template>
+  <dialog
+    ref="dialog"
+    class="command-terminal"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="command-terminal-title"
+    aria-describedby="command-terminal-description"
+    @cancel.prevent="close"
+    @click.self="close"
+    @keydown="handleKeydown"
+  >
+    <div class="command-terminal-frame">
+      <header class="command-terminal-header">
+        <div>
+          <p class="instrument-label">COMMAND TERMINAL / LOCAL ONLY</p>
+          <h2 id="command-terminal-title">安全信号终端</h2>
+          <p id="command-terminal-description">仅执行浏览器内白名单命令，不连接 Shell、JavaScript 或任意网络地址。</p>
+        </div>
+        <button class="terminal-close" type="button" aria-label="关闭终端" @click="close">ESC ×</button>
+      </header>
+      <div class="command-terminal-output" role="log" aria-live="polite" aria-relevant="additions text">
+        <p v-if="!outputs.length" class="terminal-empty">输入 <code>help</code> 开始。历史只保留在当前会话，最多 50 条。</p>
+        <p v-for="line in outputs" :key="line.id" class="terminal-line">
+          <span>{{ line.text }}</span>
+          <a v-if="line.href" :href="line.href">打开 →</a>
+        </p>
+      </div>
+      <form class="command-terminal-form" @submit.prevent="submit">
+        <label for="command-terminal-input">命令</label>
+        <span aria-hidden="true">$</span>
+        <input id="command-terminal-input" ref="input" v-model="value" type="text" maxlength="200" autocomplete="off" spellcheck="false">
+        <button type="submit">执行</button>
+      </form>
+      <p class="command-terminal-status" role="status">{{ status }}</p>
+    </div>
+  </dialog>
+</template>
+
+<style scoped>
+.command-terminal { width: min(54rem, calc(100vw - 2rem)); max-height: min(44rem, calc(100vh - 5rem)); padding: 0; border: 1px solid var(--color-accent); color: var(--color-text-main); background: var(--color-bg-base); }
+.command-terminal::backdrop { background: rgba(0, 0, 0, .72); }
+.command-terminal-frame { display: grid; gap: 1rem; padding: clamp(1rem, 3vw, 2rem); }
+.command-terminal-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
+.command-terminal h2 { margin: .5rem 0; font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 3rem); }
+.command-terminal-header p:last-child { max-width: 38rem; margin: 0; color: var(--color-text-muted); font-size: .9rem; line-height: 1.6; }
+.terminal-close, .command-terminal-form button { border: 1px solid var(--color-accent); color: var(--color-accent); background: transparent; font: var(--text-xs)/1.3 var(--font-mono); cursor: pointer; }
+.terminal-close { padding: .45rem .6rem; white-space: nowrap; }
+.terminal-close:hover, .terminal-close:focus-visible, .command-terminal-form button:hover, .command-terminal-form button:focus-visible { color: var(--color-accent-ink); background: var(--color-accent); }
+.command-terminal-output { min-height: 12rem; max-height: 22rem; overflow: auto; padding: .8rem; border-block: 1px solid var(--color-border); background: var(--color-code-bg); font: .82rem/1.65 var(--font-mono); }
+.terminal-empty, .terminal-line { margin: 0; }
+.terminal-empty { color: var(--color-text-muted); }
+.terminal-line { display: flex; gap: .7rem; justify-content: space-between; white-space: pre-wrap; }
+.terminal-line a { flex: 0 0 auto; color: var(--color-accent); }
+.command-terminal-form { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: .55rem; align-items: center; color: var(--color-accent); font: var(--text-xs)/1.4 var(--font-mono); }
+.command-terminal-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.command-terminal-form input { min-width: 0; padding: .65rem 0; border: 0; border-bottom: 1px solid var(--color-border); outline: 0; color: var(--color-text-main); background: transparent; font: inherit; }
+.command-terminal-form input:focus { border-color: var(--color-accent); }
+.command-terminal-form button { padding: .6rem .8rem; }
+.command-terminal-status { min-height: 1.4em; margin: 0; color: var(--color-text-muted); font: var(--text-xs)/1.4 var(--font-mono); }
+@media (max-width: 520px) { .command-terminal { width: calc(100vw - 1rem); max-height: calc(100vh - 1rem); } .command-terminal-frame { padding: .8rem; } .command-terminal-output { min-height: 10rem; } .terminal-line { display: grid; gap: .15rem; } }
+@media (prefers-reduced-motion: reduce) { .command-terminal *, .command-terminal *::before, .command-terminal *::after { transition: none !important; animation: none !important; } }
+</style>
diff --git a/apps/web/app/layouts/default.vue b/apps/web/app/layouts/default.vue
index 22ee096..5788bed 100644
--- a/apps/web/app/layouts/default.vue
+++ b/apps/web/app/layouts/default.vue
@@ -14,19 +14,26 @@
         </div>
       </details>
       <div class="dock-status">
-        <button class="dock-control dock-control--disabled" type="button" disabled aria-disabled="true" aria-describedby="command-help">⌘K</button>
-        <span id="command-help" class="dock-help">命令入口即将开放</span>
+        <button ref="terminalTrigger" class="dock-control" type="button" aria-keyshortcuts="Control+K Meta+K" aria-describedby="command-help" @click="openTerminal">⌘K</button>
+        <span id="command-help" class="dock-help">打开安全终端</span>
       </div>
       <div class="dock-status">
         <button class="dock-control dock-control--disabled" type="button" disabled aria-disabled="true" aria-describedby="ai-help">AI</button>
         <span id="ai-help" class="dock-help">AI 入口即将开放</span>
       </div>
     </nav>
+    <component :is="terminalComponent" v-if="terminalComponent" :open="terminalOpen" @close="closeTerminal" />
   </div>
 </template>
 
 <script setup lang="ts">
+import type { Component } from 'vue'
+
 const route = useRoute()
+const terminalTrigger = ref<HTMLButtonElement | null>(null)
+const terminalComponent = ref<Component | null>(null)
+const terminalOpen = ref(false)
+let terminalLoad: Promise<void> | null = null
 const routeItems = [
   { to: '/', label: '01 / 首页' },
   { to: '/articles', label: '02 / 文章' },
@@ -34,4 +41,30 @@ const routeItems = [
   { to: '/tools', label: '04 / 工具' },
   { to: '/about', label: '05 / 关于' },
 ]
+
+async function openTerminal() {
+  terminalOpen.value = true
+  if (terminalComponent.value || terminalLoad) return terminalLoad
+  terminalLoad = import('../components/terminal/CommandTerminal.client.vue').then(module => {
+    terminalComponent.value = module.default
+  }).finally(() => {
+    terminalLoad = null
+  })
+  return terminalLoad
+}
+
+function closeTerminal() {
+  terminalOpen.value = false
+  nextTick(() => terminalTrigger.value?.focus())
+}
+
+function handleGlobalShortcut(event: KeyboardEvent) {
+  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+    event.preventDefault()
+    void openTerminal()
+  }
+}
+
+onMounted(() => window.addEventListener('keydown', handleGlobalShortcut))
+onBeforeUnmount(() => window.removeEventListener('keydown', handleGlobalShortcut))
 </script>
diff --git a/apps/web/app/utils/terminalCommands.ts b/apps/web/app/utils/terminalCommands.ts
new file mode 100644
index 0000000..d5f9d01
--- /dev/null
+++ b/apps/web/app/utils/terminalCommands.ts
@@ -0,0 +1,54 @@
+export type TerminalCommand =
+  | { kind: 'help' }
+  | { kind: 'list'; target: 'posts' | 'tools' }
+  | { kind: 'grep'; query: string }
+  | { kind: 'open'; href: string }
+  | { kind: 'theme'; theme: 'night' | 'blueprint' }
+  | { kind: 'clear' }
+  | { kind: 'ask'; question: string }
+
+const MAX_COMMAND_LENGTH = 200
+const MAX_ARGUMENT_LENGTH = 100
+const SAFE_SLUG = '[a-z0-9](?:[a-z0-9-]{0,118}[a-z0-9])?'
+const FORBIDDEN_INPUT = /[;|&<>`$]|\b(?:javascript|data|file|http|https):|\/\//i
+
+export function parseTerminalCommand(input: string): TerminalCommand | { kind: 'error'; message: string } {
+  const command = input.trim()
+  if (!command) return { kind: 'error', message: '请输入命令。可输入 help 查看白名单。' }
+  if (Array.from(command).length > MAX_COMMAND_LENGTH) return { kind: 'error', message: `命令不能超过 ${MAX_COMMAND_LENGTH} 个字符。` }
+  if (FORBIDDEN_INPUT.test(command)) return { kind: 'error', message: '已拒绝：终端不执行脚本、管道、重定向或外部 URL。' }
+
+  if (command === 'help') return { kind: 'help' }
+  if (command === 'clear') return { kind: 'clear' }
+  if (command === 'ls posts') return { kind: 'list', target: 'posts' }
+  if (command === 'ls tools') return { kind: 'list', target: 'tools' }
+  if (command === 'theme night') return { kind: 'theme', theme: 'night' }
+  if (command === 'theme blueprint') return { kind: 'theme', theme: 'blueprint' }
+
+  const quoted = command.match(/^(grep|ask) "([^"]*)"$/)
+  if (quoted) {
+    const value = quoted[2]
+    if (!value || Array.from(value).length > MAX_ARGUMENT_LENGTH) {
+      return { kind: 'error', message: `参数不能为空且不能超过 ${MAX_ARGUMENT_LENGTH} 个字符。` }
+    }
+    return quoted[1] === 'grep' ? { kind: 'grep', query: value } : { kind: 'ask', question: value }
+  }
+
+  const open = command.match(new RegExp(`^open (\\/(?:articles|posts)\\/${SAFE_SLUG})$`))
+  if (open) return { kind: 'open', href: open[1]!.replace(/^\/posts\//, '/articles/') }
+  if (/^open\s/.test(command)) return { kind: 'error', message: '只允许打开 /articles/{slug} 或兼容别名 /posts/{slug}。' }
+  if (/^(grep|ask)\s/.test(command)) return { kind: 'error', message: '只接受双引号包裹的有限长度参数。' }
+  if (/^(ls|theme)\s/.test(command)) return { kind: 'error', message: '该命令的参数不在白名单中。' }
+  return { kind: 'error', message: '未知命令。可输入 help 查看白名单。' }
+}
+
+export const terminalHelp = [
+  'help                 显示白名单命令',
+  'ls posts             列出最近公开文章（最多 20 条）',
+  'ls tools             列出公开工具（最多 20 条）',
+  'grep "query"         搜索公开文章（最多 20 条）',
+  'open /articles/slug  打开文章；/posts/slug 为兼容别名',
+  'theme night|blueprint 切换本地主题',
+  'clear                清空当前输出',
+  'ask "question"       显示 AI 未开放提示和站内搜索入口',
+]
diff --git a/apps/web/app/utils/theme.ts b/apps/web/app/utils/theme.ts
new file mode 100644
index 0000000..8fb5d60
--- /dev/null
+++ b/apps/web/app/utils/theme.ts
@@ -0,0 +1,60 @@
+import { onBeforeUnmount, onMounted, readonly, ref } from 'vue'
+
+export type SiteTheme = 'night' | 'blueprint'
+
+export const THEME_STORAGE_KEY = 'haoblog-theme'
+
+export function normalizeTheme(value: unknown): SiteTheme {
+  return value === 'blueprint' ? 'blueprint' : 'night'
+}
+
+export function useTheme() {
+  const theme = typeof useState === 'function'
+    ? useState<SiteTheme>('haoblog-theme', () => 'night')
+    : ref<SiteTheme>('night')
+  let transitionTimer: number | undefined
+
+  function applyTheme(next: SiteTheme, persist = true) {
+    theme.value = normalizeTheme(next)
+    if (!import.meta.client) return
+
+    const root = document.documentElement
+    root.dataset.theme = theme.value
+    if (persist) {
+      try {
+        localStorage.setItem(THEME_STORAGE_KEY, theme.value)
+      } catch {
+        // localStorage 不可用时保留当前会话主题。
+      }
+    }
+
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      if (transitionTimer) window.clearTimeout(transitionTimer)
+      delete root.dataset.themeTransition
+      return
+    }
+    root.dataset.themeTransition = 'on'
+    if (transitionTimer) window.clearTimeout(transitionTimer)
+    transitionTimer = window.setTimeout(() => {
+      delete root.dataset.themeTransition
+    }, 420)
+  }
+
+  function syncTheme() {
+    if (!import.meta.client) return
+    let stored: string | null = null
+    try {
+      stored = localStorage.getItem(THEME_STORAGE_KEY)
+    } catch {
+      stored = null
+    }
+    applyTheme(normalizeTheme(stored || document.documentElement.dataset.theme), false)
+  }
+
+  onMounted(syncTheme)
+  onBeforeUnmount(() => {
+    if (transitionTimer) window.clearTimeout(transitionTimer)
+  })
+
+  return { theme: readonly(theme), setTheme: applyTheme, syncTheme }
+}
diff --git a/apps/web/e2e/stage3.spec.ts b/apps/web/e2e/stage3.spec.ts
index a579436..4424ae0 100644
--- a/apps/web/e2e/stage3.spec.ts
+++ b/apps/web/e2e/stage3.spec.ts
@@ -49,8 +49,8 @@ test.describe.serial('S3-08 public reading acceptance', () => {
     const homepage = await page.request.get('/')
     expect(homepage.status()).toBe(200)
     const homepageHtml = await homepage.text()
-    expect(homepageHtml).toContain('OBSERVATION / INITIAL FRAME')
-    expect(homepageHtml).toContain('<h1 id="site-title">HaoBlog</h1>')
+    expect(homepageHtml).toContain('FIRST FRAME / 夜空校准 / CALIBRATION')
+    expect(homepageHtml).toContain('<h1 id="site-title"><button class="home-title-button"')
     expect(homepageHtml).toContain('class="recent-list"')
 
     const canonicalPageOne = await page.request.get('/articles?page=1', { maxRedirects: 0 })
diff --git a/apps/web/e2e/stage4.spec.ts b/apps/web/e2e/stage4.spec.ts
index 8426e94..16005b6 100644
--- a/apps/web/e2e/stage4.spec.ts
+++ b/apps/web/e2e/stage4.spec.ts
@@ -36,7 +36,7 @@ test.describe('S4-03 article comment signal', () => {
     await page.getByRole('button', { name: '展开评论入口' }).click()
     await expect(page.getByLabel('昵称')).toBeVisible()
     await page.getByLabel('昵称').fill('Playwright 观测员')
-    await page.getByLabel('正文').fill('这是一条待审核回波。')
+    await page.getByRole('textbox', { name: '正文' }).fill('这是一条待审核回波。')
     await page.waitForTimeout(3200)
     await page.getByRole('button', { name: '发送回波' }).click()
     await expect(page.locator('[data-status="pending"]')).toContainText('待审核')
diff --git a/apps/web/e2e/stage5.spec.ts b/apps/web/e2e/stage5.spec.ts
index 7b9c23f..13483a4 100644
--- a/apps/web/e2e/stage5.spec.ts
+++ b/apps/web/e2e/stage5.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from '@playwright/test'
+import { expect, test, type APIRequestContext } from '@playwright/test'
 
 test.describe('S5-01/S5-02 knowledge garden', () => {
   test('keeps the garden readable in SSR, no-JS, 360px, Save-Data and reduced-motion paths', async ({ page, browser }) => {
@@ -84,3 +84,134 @@ test.describe('S5-01/S5-02 knowledge garden', () => {
     await expect(entry.getByRole('button', { name: 'CLOSE' })).toHaveAttribute('aria-expanded', 'true')
   })
 })
+
+async function setThreeDFlag(request: APIRequestContext, enabled: boolean) {
+  const anonymousCsrf = await request.get('/api/v1/admin/csrf')
+  expect(anonymousCsrf.ok()).toBe(true)
+  const anonymousToken = (await anonymousCsrf.json() as { token: string }).token
+  const login = await request.post('/api/v1/admin/session', {
+    headers: { 'X-CSRF-TOKEN': anonymousToken },
+    data: { username: 'admin', password: 'password' },
+  })
+  expect(login.ok()).toBe(true)
+  const csrf = await request.get('/api/v1/admin/csrf')
+  const token = (await csrf.json() as { token: string }).token
+  const current = await request.get('/api/v1/admin/site')
+  expect(current.ok()).toBe(true)
+  const site = await current.json() as { version: number; commentsEnabled: boolean; musicEnabled: boolean }
+  const updated = await request.put('/api/v1/admin/site', {
+    headers: { 'X-CSRF-TOKEN': token },
+    data: { version: site.version, commentsEnabled: site.commentsEnabled, musicEnabled: site.musicEnabled, threeDEnabled: enabled },
+  })
+  expect(updated.ok()).toBe(true)
+}
+
+test.describe('S5-03 secure terminal and theme', () => {
+  test('opens the native dialog, supports keyboard recovery and safe command fallback', async ({ page }) => {
+    await page.goto('/')
+    await page.getByRole('button', { name: '⌘K' }).click()
+    const dialog = page.getByRole('dialog', { name: '安全信号终端' })
+    await expect(dialog).toBeVisible()
+    await expect(dialog.locator('input')).toBeFocused()
+    await expect(dialog).toHaveAttribute('aria-modal', 'true')
+
+    await page.keyboard.type('help')
+    await page.keyboard.press('Enter')
+    await expect(dialog).toContainText('ls posts')
+    await page.keyboard.press('ArrowUp')
+    await expect(dialog.locator('input')).toHaveValue('help')
+    await page.keyboard.press('ArrowDown')
+    await expect(dialog.locator('input')).toHaveValue('')
+    await page.keyboard.type('ask "如何实现 RAG"')
+    await page.keyboard.press('Enter')
+    await expect(dialog).toContainText('AI 信号尚未开放')
+    await expect(dialog.getByRole('link', { name: '打开 →' }).last()).toHaveAttribute('href', /\/search\?q=/)
+    await page.keyboard.type('rm -rf /')
+    await page.keyboard.press('Enter')
+    await expect(dialog).toContainText('命令未执行')
+
+    await page.keyboard.press('Control+L')
+    await expect(dialog.locator('input')).toHaveValue('')
+    await page.keyboard.press('Escape')
+    await expect(dialog).toBeHidden()
+    await expect(page.getByRole('button', { name: '⌘K' })).toBeFocused()
+  })
+
+  test('restores, persists and toggles only the two supported themes', async ({ page }) => {
+    await page.goto('/')
+    await page.evaluate(() => localStorage.clear())
+    await page.reload()
+    await expect(page.locator('html')).toHaveAttribute('data-theme', 'night')
+    await page.locator('.home-title-button').click({ clickCount: 5 })
+    await expect(page.locator('html')).toHaveAttribute('data-theme', 'blueprint')
+    expect(await page.evaluate(() => localStorage.getItem('haoblog-theme'))).toBe('blueprint')
+    await page.reload()
+    await expect(page.locator('html')).toHaveAttribute('data-theme', 'blueprint')
+    await page.emulateMedia({ reducedMotion: 'reduce' })
+    await page.locator('.home-title-button').click({ clickCount: 5 })
+    await expect(page.locator('html')).toHaveAttribute('data-theme', 'night')
+    expect(await page.locator('html').getAttribute('data-theme-transition')).toBeNull()
+  })
+})
+
+test.describe('S5-04 home three frames', () => {
+  test('keeps all three frames in SSR and does not load Three or graph before the flag/viewport gate', async ({ page, browser }) => {
+    await setThreeDFlag(page.request, false)
+    const ssr = await page.request.get('/')
+    const html = await ssr.text()
+    expect(ssr.status()).toBe(200)
+    expect(html).toContain('夜空校准')
+    expect(html).toContain('星图接入')
+    expect(html).toContain('近期观测日志')
+    expect(html).toContain('继续校准')
+
+    const noJs = await browser.newContext({ baseURL: process.env.HAOBLOG_BASE_URL || 'http://127.0.0.1', javaScriptEnabled: false })
+    const noJsPage = await noJs.newPage()
+    await noJsPage.goto('/')
+    await expect(noJsPage.getByRole('heading', { name: '近期观测日志' })).toBeVisible()
+    await expect(noJsPage.getByRole('link', { name: /继续校准/ })).toBeVisible()
+    await noJs.close()
+
+    const requests: string[] = []
+    page.on('request', request => requests.push(request.url()))
+    await page.goto('/')
+    await page.waitForTimeout(300)
+    expect(requests.filter(url => /three|\/public\/garden/i.test(url))).toEqual([])
+    await expect(page.locator('.home-starmap-fallback')).toBeVisible()
+  })
+
+  test('gates graph and Three by Save-Data, reduced-motion and mobile paths, then loads on desktop viewport entry when enabled', async ({ page, browser }) => {
+    await setThreeDFlag(page.request, true)
+    try {
+      const requests: string[] = []
+      page.on('request', request => requests.push(request.url()))
+      await page.setViewportSize({ width: 1280, height: 800 })
+      await page.goto('/')
+      await page.waitForTimeout(250)
+      expect(requests.filter(url => /three|\/public\/garden/i.test(url))).toEqual([])
+      await page.locator('#starmap-scene').scrollIntoViewIfNeeded()
+      await expect.poll(() => requests.filter(url => /\/public\/garden/i.test(url)).length, { timeout: 10_000 }).toBeGreaterThan(0)
+      await expect(page.locator('.home-starmap-status')).toContainText(/接入|回退|暂无/)
+
+      const constrained = [
+        await browser.newContext({ baseURL: process.env.HAOBLOG_BASE_URL || 'http://127.0.0.1', extraHTTPHeaders: { 'Save-Data': 'on' } }),
+        await browser.newContext({ baseURL: process.env.HAOBLOG_BASE_URL || 'http://127.0.0.1' }),
+        await browser.newContext({ baseURL: process.env.HAOBLOG_BASE_URL || 'http://127.0.0.1', hasTouch: true, isMobile: true }),
+      ]
+      for (const context of constrained) {
+        const constrainedPage = await context.newPage()
+        if (context === constrained[1]) await constrainedPage.emulateMedia({ reducedMotion: 'reduce' })
+        const constrainedRequests: string[] = []
+        constrainedPage.on('request', request => constrainedRequests.push(request.url()))
+        await constrainedPage.goto('/')
+        await constrainedPage.locator('#starmap-scene').scrollIntoViewIfNeeded()
+        await constrainedPage.waitForTimeout(300)
+        expect(constrainedRequests.filter(url => /three|\/public\/garden/i.test(url))).toEqual([])
+        await expect(constrainedPage.locator('.home-static-starmap')).toBeVisible()
+        await context.close()
+      }
+    } finally {
+      await setThreeDFlag(page.request, false)
+    }
+  })
+})
diff --git a/apps/web/nuxt.config.ts b/apps/web/nuxt.config.ts
index 5abd58f..ebb71a4 100644
--- a/apps/web/nuxt.config.ts
+++ b/apps/web/nuxt.config.ts
@@ -1,9 +1,24 @@
+const themeBootstrap = `(() => {
+  try {
+    const stored = window.localStorage.getItem('haoblog-theme')
+    const theme = stored === 'blueprint' || stored === 'night' ? stored : 'night'
+    document.documentElement.setAttribute('data-theme', theme)
+  } catch (_) {
+    document.documentElement.setAttribute('data-theme', 'night')
+  }
+})()`
+
 export default defineNuxtConfig({
   compatibilityDate: '2025-07-15',
   devtools: { enabled: false },
   modules: ['@pinia/nuxt', '@unocss/nuxt'],
   css: ['~/assets/styles/tokens.css', '~/assets/styles/shell.css', '~/assets/styles/articles.css'],
-  app: { head: { htmlAttrs: { 'data-theme': 'night' } } },
+  app: {
+    head: {
+      // 主题属性由早期脚本和客户端主题状态共同管理，避免 head manager 在 hydration 后覆盖本地主题。
+      script: [{ innerHTML: themeBootstrap }],
+    },
+  },
   runtimeConfig: {
     apiBaseUrl: process.env.NUXT_API_BASE_URL || 'http://api:8080',
     public: {
diff --git a/apps/web/package.json b/apps/web/package.json
index da54ad0..cd58ca1 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -31,6 +31,7 @@
     "pinia": "3.0.3",
     "sanitize-html": "2.17.7",
     "shiki": "4.4.3",
+    "three": "0.185.1",
     "vue": "3.5.18"
   },
   "devDependencies": {
@@ -38,6 +39,7 @@
     "@playwright/test": "1.62.1",
     "@types/sanitize-html": "2.16.0",
     "@types/d3-force": "3.0.10",
+    "@types/three": "0.185.0",
     "@vitejs/plugin-vue": "6.0.8",
     "@vue/test-utils": "2.4.6",
     "happy-dom": "18.0.1",
diff --git a/apps/web/test/terminal-commands.test.ts b/apps/web/test/terminal-commands.test.ts
new file mode 100644
index 0000000..f11c130
--- /dev/null
+++ b/apps/web/test/terminal-commands.test.ts
@@ -0,0 +1,32 @@
+import { describe, expect, it } from 'vitest'
+import { parseTerminalCommand } from '../app/utils/terminalCommands'
+
+describe('安全终端白名单解析器', () => {
+  it('接受本阶段全部合法命令', () => {
+    expect(parseTerminalCommand('help')).toEqual({ kind: 'help' })
+    expect(parseTerminalCommand('ls posts')).toEqual({ kind: 'list', target: 'posts' })
+    expect(parseTerminalCommand('ls tools')).toEqual({ kind: 'list', target: 'tools' })
+    expect(parseTerminalCommand('grep "Spring AI"')).toEqual({ kind: 'grep', query: 'Spring AI' })
+    expect(parseTerminalCommand('open /articles/spring-ai')).toEqual({ kind: 'open', href: '/articles/spring-ai' })
+    expect(parseTerminalCommand('open /posts/spring-ai')).toEqual({ kind: 'open', href: '/articles/spring-ai' })
+    expect(parseTerminalCommand('theme night')).toEqual({ kind: 'theme', theme: 'night' })
+    expect(parseTerminalCommand('theme blueprint')).toEqual({ kind: 'theme', theme: 'blueprint' })
+    expect(parseTerminalCommand('clear')).toEqual({ kind: 'clear' })
+    expect(parseTerminalCommand('ask "如何实现 RAG"')).toEqual({ kind: 'ask', question: '如何实现 RAG' })
+  })
+
+  it('拒绝 Shell、脚本、外部 URL、路径穿越和越界输入', () => {
+    const rejected = [
+      'ls posts; alert(1)',
+      'grep "x" | cat',
+      'open https://example.com',
+      'open /articles/../secret',
+      'open /articles/one/two',
+      'ask question',
+      `grep "${'x'.repeat(101)}"`,
+      'rm -rf /',
+      '<script>alert(1)</script>',
+    ]
+    rejected.forEach(input => expect(parseTerminalCommand(input).kind, input).toBe('error'))
+  })
+})
diff --git "a/docs/taget/\347\254\254\344\272\224\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md" "b/docs/taget/\347\254\254\344\272\224\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md"
index cb79b0d..ff82bf7 100644
--- "a/docs/taget/\347\254\254\344\272\224\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md"
+++ "b/docs/taget/\347\254\254\344\272\224\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md"
@@ -2,7 +2,7 @@
 
 ## 0. 阶段状态与适用范围
 
-本文件是阶段五的目标任务和实现记录。2026-08-23 的“阶段 5 迭代 1”已完成 S5-01 图谱契约与 Feature Flag、S5-02 知识星图；S5-03～S5-09 仍待后续迭代实施。
+本文件是阶段五的目标任务和实现记录。2026-08-23 的“阶段 5 迭代 1”已完成 S5-01 图谱契约与 Feature Flag、S5-02 知识星图；“阶段 5 迭代 2”已完成 S5-03 安全终端与主题、S5-04 首页三幕与 Three.js；S5-05～S5-09 仍待后续迭代实施。
 
 阶段五定位为“非 AI 体验与本地收口”：在阶段四已有的公开阅读、评论、工具和搜索基础上，补齐知识星图、终端导航、首页标志性动效、音乐与频谱、404 彩蛋、PWA 离线工具箱，以及重型效果的生命周期和降级边界。
 
@@ -68,7 +68,7 @@ flowchart LR
 
 ## 四、公共契约、数据结构与 Feature Flag
 
-以下是本阶段通过 OpenAPI、Nuxt Server Route 或静态资源契约固化的公开接口。本迭代已完成 S5-01/S5-02 所需的接口和生成客户端；后续接口仍按各任务单独实施。
+以下是本阶段通过 OpenAPI、Nuxt Server Route 或静态资源契约固化的公开接口。本迭代复用 S5-01/S5-02 的公开接口和生成客户端；S5-03/S5-04 未新增后端接口或 OpenAPI 字段。
 
 ### 4.1 公开接口
 
@@ -232,6 +232,8 @@ data-theme="night|blueprint" 是用户本地选择，不是远端 Feature Flag
 
 ### S5-03：安全终端与主题
 
+实际状态：已完成（2026-08-23，阶段 5 迭代 2）。
+
 | 属性 | 内容 |
 | --- | --- |
 | 优先级 | P1 |
@@ -256,6 +258,8 @@ data-theme="night|blueprint" 是用户本地选择，不是远端 Feature Flag
 
 ### S5-04：首页三幕与 Three.js
 
+实际状态：已完成（2026-08-23，阶段 5 迭代 2）。
+
 | 属性 | 内容 |
 | --- | --- |
 | 优先级 | P1 |
@@ -447,4 +451,4 @@ data-theme="night|blueprint" 是用户本地选择，不是远端 Feature Flag
 - 文章初始 JS 不超过 180KB gzip，既有 API/Web/OpenAPI/Compose 基线不回归；阶段六的 30 分钟压力测试和生产资源验收仍单独记录。
 - 本地验收通过不等于真实 SMTP、真实 OSS、域名/备案、部署、远端 CI/生产或 AI/RAG 通过；这些项目在报告中继续明确列为未执行或后续阶段。
 
-本迭代完成定义：仅新增本文件和阶段五准入清单；没有业务代码、空类、数据库迁移、OpenAPI 修改、生成客户端改动、提交、推送、PR 或部署。
+本迭代完成定义：S5-03/S5-04 业务代码、终端解析器单测、阶段五 Playwright 场景、Three 动态边界和资源释放证据已落盘；Three 相关最大动态 chunk 为 183243 bytes gzip，文章静态闭包为 66350 bytes gzip。阶段三公共站 E2E 5/5、阶段四公共站 E2E 6/6、阶段五 E2E 6/6 通过。未新增服务、数据库迁移或 OpenAPI 修改；未提交、推送、创建 PR 或部署。S5-05～S5-09 继续保留未开始状态。
diff --git "a/docs/taget/\351\230\266\346\256\265\344\272\224\345\207\206\345\205\245\346\270\205\345\215\225.md" "b/docs/taget/\351\230\266\346\256\265\344\272\224\345\207\206\345\205\245\346\270\205\345\215\225.md"
index 2f4547a..8fe4b93 100644
--- "a/docs/taget/\351\230\266\346\256\265\344\272\224\345\207\206\345\205\245\346\270\205\345\215\225.md"
+++ "b/docs/taget/\351\230\266\346\256\265\344\272\224\345\207\206\345\205\245\346\270\205\345\215\225.md"
@@ -2,10 +2,10 @@
 
 ## 0. 本轮结论
 
-本清单对应“阶段 5 迭代 1：S5-01 图谱契约与 Feature Flag + S5-02 知识星图”。本轮已完成 S5-01、S5-02 的纵向切片；S5-03～S5-09 不提前勾选。
+本清单对应“阶段 5 迭代 2：S5-03 安全终端与主题 + S5-04 首页三幕和 Three.js”。本轮在已完成 S5-01、S5-02 的基础上完成 S5-03、S5-04；S5-05～S5-09 不提前勾选。
 
 - 本轮文档：docs/taget/第五阶段目标任务.md、本文件。
-- 已新增 V16 站点体验开关迁移、/api/v1/public/garden、OpenAPI 契约、生成客户端、Canvas 图谱及最小 d3-force 依赖；未新增服务或外部资源。
+- 已有 V16 站点体验开关、/api/v1/public/garden、OpenAPI 契约、生成客户端、Canvas 图谱及最小 d3-force 依赖；本轮新增原生 dialog 终端、主题早期恢复、首页三幕和按需 three@0.185.1；未新增服务或外部资源。
 - 未提交、推送、创建 PR、部署或修改云资源。
 - 阶段四文档在当前工作树中已经是删除状态；本轮未恢复，阶段四基线从提交 f0bfdac 读取。
 
@@ -111,11 +111,27 @@ git diff --check
 
 ## 六、阶段五准入判断
 
-### 6.1 迭代 1 实际状态
+### 6.1 迭代 2 实际状态
 
 - [x] S5-01 图谱契约与 Feature Flag：V16 默认关闭开关、公开/管理员 DTO、音乐清单校验、Studio version 乐观锁、OpenAPI 与生成客户端已完成。
 - [x] S5-02 知识星图：公开快照图谱、确定性 200/600 裁剪、ETag/60 秒共享缓存、SSR 时间线、桌面 d3-force Canvas、键盘预览、降级和 `/tools?tool=` 定位已完成。
-- [ ] S5-03～S5-09：按计划保留未开始状态。
+- [x] S5-03 安全终端与主题：Dock ⌘K/Ctrl+K 动态原生 dialog、白名单解析、20 条公开结果上限、50 条会话历史、焦点/键盘恢复、ask 降级、night/blueprint 主题恢复/持久化/五连击已完成。
+- [x] S5-04 首页三幕与 Three.js：首幕和近期日志 SSR、第二幕静态降级、threeDEnabled/Save-Data/reduced-motion/移动/粗指针/WebGL/视口门控、InstancedMesh + LineSegments、离开/隐藏暂停和卸载释放已完成。
+- [ ] S5-05～S5-09：按计划保留未开始状态。
+
+### 6.2 迭代 2 实际验证
+
+| 命令/证据 | 结果 | 状态 |
+| --- | --- | --- |
+| `corepack pnpm --dir apps/web typecheck` | `nuxt prepare`、`vue-tsc -b --noEmit` 完成 | 通过 |
+| `corepack pnpm --dir apps/web test` | 21 个测试文件，88/88；含终端合法/恶意命令解析 | 通过 |
+| `corepack pnpm --dir apps/web build` | Nuxt client/server/Nitro build complete | 通过；保留现有依赖 deprecation/Vite 大 chunk 警告 |
+| `corepack pnpm web:budget` | 文章初始静态闭包 15 个 chunk，66350 bytes gzip | 通过 |
+| Three 动态 chunk | `C5rh5wLt2.js`，724236 bytes 原始，183243 bytes gzip；`HomeThreeScene` 单独动态组件 chunk | 通过，小于 500 KiB |
+| `corepack pnpm --dir apps/web exec playwright test stage5.spec.ts` | 阶段五 Chromium 场景 6/6 通过：S5-01/S5-02 回归、终端/主题、首页三幕/Three 门控 | 通过 |
+| `corepack pnpm --dir apps/web exec playwright test stage3.spec.ts` | 阶段三公共站 Chromium 场景 5/5 通过；首页 SSR 断言同步到三幕首幕标记 | 通过 |
+| `corepack pnpm --dir apps/web exec playwright test stage4.spec.ts` | 阶段四公共站 Chromium 场景 6/6 通过；评论正文选择器收紧为 textbox 语义 | 通过 |
+| `git diff --check` | 无空白错误；仅有 Windows 工作树换行格式提示 | 通过 |
 
 开始 S5-01 业务实现前，必须满足：
 
@@ -145,4 +161,4 @@ git diff --check
 - [x] 记录 Git 分支、HEAD、最近提交、用户未提交修改、阶段四删除状态和未跟踪文件检查。
 - [x] 创建阶段五目标任务和本准入清单。
 - [x] 完成本节“基线实际执行结果”的所有命令并逐项记录。
-- [ ] 阶段五全部业务功能完成；S5-03～S5-09 本轮明确不做。
+- [ ] 阶段五全部业务功能完成；S5-03/S5-04 已完成，S5-05～S5-09 本轮明确不做。
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2d21a06..60f2eff 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -67,6 +67,9 @@ importers:
       shiki:
         specifier: 4.4.3
         version: 4.4.3
+      three:
+        specifier: 0.185.1
+        version: 0.185.1
       vue:
         specifier: 3.5.18
         version: 3.5.18(typescript@5.9.2)
@@ -83,6 +86,9 @@ importers:
       '@types/sanitize-html':
         specifier: 2.16.0
         version: 2.16.0
+      '@types/three':
+        specifier: 0.185.0
+        version: 0.185.0
       '@vitejs/plugin-vue':
         specifier: 6.0.8
         version: 6.0.8(vite@7.3.6(@types/node@26.2.0)(jiti@2.7.0)(lightningcss@1.33.0)(terser@5.49.2)(yaml@2.9.0))(vue@3.5.18(typescript@5.9.2))
@@ -297,6 +303,9 @@ packages:
   '@colordx/core@5.5.0':
     resolution: {integrity: sha512-3PxTH8itZzltK0U9jTwVVnjLXvnDYuq3m+QXsHkENxWiPRh4WaoLcs1SQjqgZ55kS+QyirpH5BVwzP2gMVG6EQ==}
 
+  '@dimforge/rapier3d-compat@0.12.0':
+    resolution: {integrity: sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==}
+
   '@dxup/nuxt@0.5.6':
     resolution: {integrity: sha512-uZjAFoocWtWHr7YP9jm6FqwI8kjX2QN9bjcncoZt0GS+zExIAP3Ewv6EqEUvVP7w9pjZE+T19QxLHeoacN/MNg==}
 
@@ -1283,6 +1292,9 @@ packages:
   '@tootallnate/quickjs-emscripten@0.23.0':
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
 
+  '@tweenjs/tween.js@23.1.3':
+    resolution: {integrity: sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==}
+
   '@tybys/wasm-util@0.10.3':
     resolution: {integrity: sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==}
 
@@ -1415,12 +1427,21 @@ packages:
   '@types/sanitize-html@2.16.0':
     resolution: {integrity: sha512-l6rX1MUXje5ztPT0cAFtUayXF06DqPhRyfVXareEN5gGCFaP/iwsxIyKODr9XDhfxPpN6vXUFNfo5kZMXCxBtw==}
 
+  '@types/stats.js@0.17.4':
+    resolution: {integrity: sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==}
+
+  '@types/three@0.185.0':
+    resolution: {integrity: sha512-O2Uy8Cj4Nonr8dWUUbifMdPe8B0Mq7EdOHb89S4+kjUw/KhbjTZrUuYlrQ1bpUKG+EP9QJnN7qNxbHGlGoLHMA==}
+
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
+  '@types/webxr@0.5.24':
+    resolution: {integrity: sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==}
+
   '@types/whatwg-mimetype@3.0.2':
     resolution: {integrity: sha512-c2AKvDT8ToxLIOUlN51gTiHXflsfIFisS4pO7pDPoKouJCESkhZnEy623gwP9laCy5lnLDAw1vAzu2vM2YLOrA==}
 
@@ -2981,6 +3002,9 @@ packages:
       picomatch:
         optional: true
 
+  fflate@0.8.3:
+    resolution: {integrity: sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==}
+
   figures@2.0.0:
     resolution: {integrity: sha512-Oa2M9atig69ZkfwiApY8F2Yy+tzMbazyvqv21R0NsSC8floSOC09BbT1ITWAdoMGQvJ/aZnR1KMwdx9tvHnTNA==}
     engines: {node: '>=4'}
@@ -3731,6 +3755,9 @@ packages:
   mermaid@11.17.0:
     resolution: {integrity: sha512-Jo9N377Wb4MSnHFPTbLi2SxFpsQl4eVHoxnW5U1Md9EazvgMp3s+4ohDxr81YNTgbn5Kj7HJ3yslrSJ52kwpbA==}
 
+  meshoptimizer@1.1.1:
+    resolution: {integrity: sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g==}
+
   metaviewport-parser@0.3.0:
     resolution: {integrity: sha512-EoYJ8xfjQ6kpe9VbVHvZTZHiOl4HL1Z18CrZ+qahvLXT7ZO4YTC2JMyt5FaUp9JJp6J4Ybb/z7IsCXZt86/QkQ==}
 
@@ -4996,6 +5023,9 @@ packages:
   third-party-web@0.29.2:
     resolution: {integrity: sha512-fegtha91tq2DHphyoiBXVHjVi2YG9zFaRnboT9C28tO1en9Y3wJsfspuy40F+u5wl3hHVbw7cnd1b67kEGHb8g==}
 
+  three@0.185.1:
+    resolution: {integrity: sha512-5aojFCXKwnjBRZvUnt3WFfEcvUJgkN5LlijRFN95hMy8WVkG4I0QNcJE+OuWvuJ0bOdStrbfXn0pkd6/QyiAlg==}
+
   through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
@@ -6029,6 +6059,8 @@ snapshots:
 
   '@colordx/core@5.5.0': {}
 
+  '@dimforge/rapier3d-compat@0.12.0': {}
+
   '@dxup/nuxt@0.5.6(esbuild@0.28.2)(magicast@0.5.4)(oxc-parser@0.142.0)(rolldown@1.2.3)(rollup@4.62.4)(vite@7.3.6(@types/node@26.2.0)(jiti@2.7.0)(lightningcss@1.33.0)(terser@5.49.2)(yaml@2.9.0))(webpack@5.109.2(cssnano@8.0.5(postcss@8.5.26))(csso@5.0.5)(esbuild@0.28.2)(lightningcss@1.33.0)(postcss@8.5.26))':
     dependencies:
       '@dxup/unimport': 0.1.2
@@ -7110,6 +7142,8 @@ snapshots:
 
   '@tootallnate/quickjs-emscripten@0.23.0': {}
 
+  '@tweenjs/tween.js@23.1.3': {}
+
   '@tybys/wasm-util@0.10.3':
     dependencies:
       tslib: 2.8.1
@@ -7269,11 +7303,24 @@ snapshots:
     dependencies:
       htmlparser2: 8.0.0
 
+  '@types/stats.js@0.17.4': {}
+
+  '@types/three@0.185.0':
+    dependencies:
+      '@dimforge/rapier3d-compat': 0.12.0
+      '@tweenjs/tween.js': 23.1.3
+      '@types/stats.js': 0.17.4
+      '@types/webxr': 0.5.24
+      fflate: 0.8.3
+      meshoptimizer: 1.1.1
+
   '@types/trusted-types@2.0.7':
     optional: true
 
   '@types/unist@3.0.3': {}
 
+  '@types/webxr@0.5.24': {}
+
   '@types/whatwg-mimetype@3.0.2': {}
 
   '@types/yauzl@2.10.3':
@@ -9116,6 +9163,8 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.5
 
+  fflate@0.8.3: {}
+
   figures@2.0.0:
     dependencies:
       escape-string-regexp: 1.0.5
@@ -9922,6 +9971,8 @@ snapshots:
       ts-dedent: 2.3.0
       uuid: 14.0.2
 
+  meshoptimizer@1.1.1: {}
+
   metaviewport-parser@0.3.0: {}
 
   methods@1.1.2: {}
@@ -11466,6 +11517,8 @@ snapshots:
 
   third-party-web@0.29.2: {}
 
+  three@0.185.1: {}
+
   through@2.3.8: {}
 
   tiny-invariant@1.3.3: {}

From 578e931ce19dd248234c4e4bb90e8493f050375c Mon Sep 17 00:00:00 2001
From: DDT <––1786035110@stu.gpnu.edu.cn>
Date: Mon, 24 Aug 2026 02:34:30 +0800
Subject: [PATCH 5/7] =?UTF-8?q?=E5=AE=8C=E6=88=90=E9=98=B6=E6=AE=B5?=
 =?UTF-8?q?=E4=BA=94=E8=BF=AD=E4=BB=A3=E4=B8=89=E9=9F=B3=E4=B9=90404?=
 =?UTF-8?q?=E4=B8=8EPWA=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/app/app.vue                          |  16 +-
 .../components/error/SignalRepair.client.vue  |  77 +++++
 .../components/music/SignalTape.client.vue    | 277 ++++++++++++++++++
 apps/web/app/error.vue                        |  82 +++++-
 apps/web/app/layouts/default.vue              |  22 ++
 apps/web/app/pages/tools.vue                  |  48 ++-
 apps/web/app/utils/embeddedTools.ts           |  16 +
 apps/web/app/utils/musicManifest.ts           |  92 ++++++
 apps/web/app/utils/pwaClient.ts               |  48 +++
 apps/web/e2e/stage5.spec.ts                   | 129 ++++++++
 apps/web/nuxt.config.ts                       |   2 +
 apps/web/plugins/pwa.client.ts                |   8 +
 apps/web/public/manifest.webmanifest          |  16 +
 apps/web/public/pwa-192-maskable.svg          |   1 +
 apps/web/public/pwa-192.svg                   |   1 +
 apps/web/public/pwa-512-maskable.svg          |   1 +
 apps/web/public/pwa-512.svg                   |   1 +
 apps/web/public/sw.js                         |  82 ++++++
 apps/web/server/middleware/pwa-gate.ts        |   9 +
 .../server/routes/music-manifest.json.get.ts  |  46 +++
 apps/web/test/music-manifest.test.ts          |  39 +++
 .../web/test/phase5-static-boundaries.test.ts |  53 ++++
 ...56\346\240\207\344\273\273\345\212\241.md" |  39 ++-
 ...06\345\205\245\346\270\205\345\215\225.md" |  33 ++-
 ...57\345\212\250\346\214\207\345\215\227.md" |  11 +
 infra/compose/compose.dev.yml                 |   1 +
 infra/compose/compose.prod.yml                |   1 +
 27 files changed, 1116 insertions(+), 35 deletions(-)
 create mode 100644 apps/web/app/components/error/SignalRepair.client.vue
 create mode 100644 apps/web/app/components/music/SignalTape.client.vue
 create mode 100644 apps/web/app/utils/musicManifest.ts
 create mode 100644 apps/web/app/utils/pwaClient.ts
 create mode 100644 apps/web/plugins/pwa.client.ts
 create mode 100644 apps/web/public/manifest.webmanifest
 create mode 100644 apps/web/public/pwa-192-maskable.svg
 create mode 100644 apps/web/public/pwa-192.svg
 create mode 100644 apps/web/public/pwa-512-maskable.svg
 create mode 100644 apps/web/public/pwa-512.svg
 create mode 100644 apps/web/public/sw.js
 create mode 100644 apps/web/server/middleware/pwa-gate.ts
 create mode 100644 apps/web/server/routes/music-manifest.json.get.ts
 create mode 100644 apps/web/test/music-manifest.test.ts
 create mode 100644 apps/web/test/phase5-static-boundaries.test.ts

diff --git a/apps/web/app/app.vue b/apps/web/app/app.vue
index c8a7c7b..9931e0d 100644
--- a/apps/web/app/app.vue
+++ b/apps/web/app/app.vue
@@ -11,13 +11,17 @@ import { useDataSaver } from '~/composables/useDataSaver'
 
 const { data: site } = await usePublicSite()
 const { enabled: dataSaver } = useDataSaver()
+const runtimeConfig = useRuntimeConfig()
 useHead(() => ({
   htmlAttrs: { lang: 'zh-CN', 'data-save-data': dataSaver.value ? 'on' : 'off' },
-  link: [{
-    rel: 'alternate',
-    type: 'application/rss+xml',
-    title: `${site.value?.title || 'HaoBlog'} RSS`,
-    href: site.value ? publicAbsoluteUrl(site.value.siteUrl, '/rss.xml') || undefined : undefined,
-  }],
+  link: [
+    {
+      rel: 'alternate',
+      type: 'application/rss+xml',
+      title: `${site.value?.title || 'HaoBlog'} RSS`,
+      href: site.value ? publicAbsoluteUrl(site.value.siteUrl, '/rss.xml') || undefined : undefined,
+    },
+    ...(runtimeConfig.public.pwaEnabled ? [{ rel: 'manifest' as const, href: '/manifest.webmanifest' }] : []),
+  ],
 }))
 </script>
diff --git a/apps/web/app/components/error/SignalRepair.client.vue b/apps/web/app/components/error/SignalRepair.client.vue
new file mode 100644
index 0000000..2ca2628
--- /dev/null
+++ b/apps/web/app/components/error/SignalRepair.client.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+const emit = defineEmits<{ completed: []; failed: [] }>()
+const segments = ['A / 稳压段', 'B / 回路段', 'C / 输出段']
+const expected = [0, 1, 2]
+const nextIndex = ref(0)
+const attempts = ref(0)
+const state = ref<'active' | 'success' | 'failed'>('active')
+const status = ref('按顺序接通 A、B、C 三个电路段。最多尝试 3 次。')
+const attemptsLeft = computed(() => Math.max(0, 3 - attempts.value))
+
+function choose(index: number) {
+  if (state.value !== 'active') return
+  if (index !== expected[nextIndex.value]) {
+    attempts.value += 1
+    nextIndex.value = 0
+    if (attempts.value >= 3) {
+      state.value = 'failed'
+      status.value = '修复尝试已耗尽，已切换到搜索降级。'
+      emit('failed')
+    } else {
+      status.value = `断点仍在第 ${attempts.value + 1} 次尝试；请从 A 重新接通。还可尝试 ${attemptsLeft.value} 次。`
+    }
+    return
+  }
+  nextIndex.value += 1
+  if (nextIndex.value === expected.length) {
+    state.value = 'success'
+    status.value = '三段电路已导通，丢失信号已修复。'
+    emit('completed')
+  } else {
+    const target = expected[nextIndex.value] ?? 0
+    status.value = `第 ${index + 1} 段已导通，请继续选择 ${segments[target]}。`
+  }
+}
+
+</script>
+
+<template>
+  <section class="repair-game" aria-labelledby="repair-game-title">
+    <div class="repair-heading">
+      <div>
+        <p class="instrument-label">SIGNAL REPAIR / THREE SEGMENTS</p>
+        <h2 id="repair-game-title">丢失信号修复</h2>
+      </div>
+      <span class="repair-attempts">剩余尝试 {{ attemptsLeft }} / 3</span>
+    </div>
+    <p class="repair-instruction">键盘 Tab 聚焦后按 Enter 或 Space 接通电路。状态会同步播报。</p>
+    <div class="repair-circuit" role="group" aria-label="三个电路段">
+      <template v-for="(segment, index) in segments" :key="segment">
+        <button class="repair-segment" :class="{ 'is-connected': index < nextIndex && state === 'active' || state === 'success' }" type="button" :data-segment="index" :aria-label="segment" :disabled="state !== 'active'" @click="choose(index)">{{ segment }}</button>
+        <span v-if="index < segments.length - 1" class="repair-wire" aria-hidden="true">——</span>
+      </template>
+    </div>
+    <p class="repair-status" role="status" aria-live="polite">{{ status }}</p>
+    <div class="repair-actions"><button v-if="state === 'active'" type="button" class="repair-skip" @click="emit('failed')">跳过小游戏</button></div>
+  </section>
+</template>
+
+<style scoped>
+.repair-game { margin-top: 2.5rem; padding: 1rem 0 1.25rem; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
+.repair-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
+.repair-heading h2 { margin: .45rem 0 0; font: 700 clamp(1.5rem, 5vw, 2.5rem)/1 var(--font-display); }
+.repair-attempts, .repair-instruction, .repair-status, .repair-skip, .repair-segment { font: var(--text-xs)/1.5 var(--font-mono); }
+.repair-attempts, .repair-instruction, .repair-status { color: var(--color-text-muted); }
+.repair-instruction { margin: .9rem 0; }
+.repair-circuit { display: flex; align-items: center; gap: .4rem; }
+.repair-segment { min-width: 7rem; padding: .8rem .55rem; border: 1px solid var(--color-border); background: var(--color-bg-sub); color: var(--color-text-main); cursor: pointer; }
+.repair-segment:hover, .repair-segment:focus-visible, .repair-segment.is-connected { border-color: var(--color-accent); color: var(--color-accent); }
+.repair-segment:disabled { cursor: default; }
+.repair-wire { color: var(--color-text-muted); }
+.repair-status { min-height: 1.6em; margin: .9rem 0 .5rem; }
+.repair-actions { display: flex; gap: .6rem; }
+.repair-skip { padding: .45rem .6rem; border: 1px solid var(--color-border); background: transparent; color: var(--color-accent); cursor: pointer; }
+@media (max-width: 640px) { .repair-heading { align-items: start; flex-direction: column; }.repair-circuit { align-items: stretch; flex-direction: column; }.repair-wire { display: none; }.repair-segment { width: 100%; } }
+</style>
diff --git a/apps/web/app/components/music/SignalTape.client.vue b/apps/web/app/components/music/SignalTape.client.vue
new file mode 100644
index 0000000..5dbb8c8
--- /dev/null
+++ b/apps/web/app/components/music/SignalTape.client.vue
@@ -0,0 +1,277 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
+import { decodeMusicManifest, type MusicManifest, type MusicTrack } from '../../utils/musicManifest'
+import { useDataSaver } from '../../composables/useDataSaver'
+import { useMotionPreference } from '../../composables/useMotionPreference'
+
+const { enabled: dataSaver } = useDataSaver()
+const { reduced } = useMotionPreference()
+const audio = ref<HTMLAudioElement | null>(null)
+const canvas = ref<HTMLCanvasElement | null>(null)
+const manifest = ref<MusicManifest | null>(null)
+const selectedTrackId = ref('')
+const volume = ref(readNumber('haoblog-music-volume', .72))
+const expanded = ref(true)
+const playing = ref(false)
+const loading = ref(true)
+const errorMessage = ref('')
+const spectrumMessage = ref('频谱待用户播放后接入。')
+const spectrumEnabled = ref(true)
+const pageVisible = ref(true)
+let context: AudioContext | null = null
+let source: MediaElementAudioSourceNode | null = null
+const analyser = shallowRef<AnalyserNode | null>(null)
+let raf = 0
+let visibilityListener: (() => void) | null = null
+
+const tracks = computed(() => manifest.value?.tracks || [])
+const currentTrack = computed<MusicTrack | null>(() => tracks.value.find(track => track.id === selectedTrackId.value) || tracks.value[0] || null)
+const currentIndex = computed(() => currentTrack.value ? tracks.value.findIndex(track => track.id === currentTrack.value?.id) : -1)
+const hasSpectrum = computed(() => Boolean(analyser.value) && spectrumEnabled.value && !dataSaver.value && !reduced.value)
+
+onMounted(async () => {
+  pageVisible.value = document.visibilityState === 'visible'
+  visibilityListener = () => {
+    pageVisible.value = document.visibilityState === 'visible'
+    syncSpectrumLoop()
+  }
+  document.addEventListener('visibilitychange', visibilityListener)
+  const savedTrack = readString('haoblog-music-track')
+  try {
+    const response = await fetch('/music-manifest.json', { cache: 'no-store', headers: { accept: 'application/json' } })
+    if (!response.ok) throw new Error('清单请求失败。')
+    const bytes = await response.arrayBuffer()
+    manifest.value = decodeMusicManifest(bytes, { allowLocalhost: location.hostname === 'localhost' || location.hostname === '127.0.0.1' })
+    selectedTrackId.value = manifest.value.tracks.some(track => track.id === savedTrack) ? savedTrack : manifest.value.tracks[0]?.id || ''
+    if (!manifest.value.tracks.length) errorMessage.value = '当前没有可播放的授权曲目。'
+  } catch (error) {
+    errorMessage.value = error instanceof Error ? error.message : '音乐清单暂时不可用。'
+  } finally {
+    loading.value = false
+  }
+})
+
+onBeforeUnmount(() => {
+  if (visibilityListener) document.removeEventListener('visibilitychange', visibilityListener)
+  stopSpectrumLoop()
+  releaseAudioGraph()
+  const element = audio.value
+  if (element) {
+    element.pause()
+    element.removeAttribute('src')
+    element.load()
+  }
+})
+
+watch(volume, value => {
+  const normalized = Math.min(1, Math.max(0, value))
+  if (audio.value) audio.value.volume = normalized
+  writeString('haoblog-music-volume', String(normalized))
+})
+
+watch([expanded, playing, pageVisible, hasSpectrum], syncSpectrumLoop)
+
+function readString(key: string) {
+  try { return localStorage.getItem(key) || '' } catch { return '' }
+}
+
+function readNumber(key: string, fallback: number) {
+  const value = Number(readString(key))
+  return Number.isFinite(value) && value >= 0 && value <= 1 ? value : fallback
+}
+
+function writeString(key: string, value: string) {
+  try { localStorage.setItem(key, value) } catch { /* 本地存储不可用时保持内存状态。 */ }
+}
+
+function selectTrack(track: MusicTrack) {
+  selectedTrackId.value = track.id
+  writeString('haoblog-music-track', track.id)
+  if (playing.value) void playTrack(track)
+}
+
+function moveTrack(step: number) {
+  if (!tracks.value.length) return
+  const index = (currentIndex.value + step + tracks.value.length) % tracks.value.length
+  const track = tracks.value[index]
+  if (track) selectTrack(track)
+}
+
+async function playTrack(track = currentTrack.value) {
+  const element = audio.value
+  if (!element || !track) return
+  selectedTrackId.value = track.id
+  writeString('haoblog-music-track', track.id)
+  try {
+    if (element.dataset.trackId !== track.id) {
+      element.dataset.trackId = track.id
+      element.src = track.audioUrl
+      element.load()
+    }
+    element.volume = volume.value
+    await element.play()
+    playing.value = true
+    await ensureAudioGraph()
+    spectrumMessage.value = analyser.value ? '频谱已接入；暂停、折叠或离开页面时自动停止绘制。' : spectrumMessage.value
+    syncSpectrumLoop()
+  } catch {
+    playing.value = false
+    errorMessage.value = '浏览器未允许播放或音频地址不可用；请检查 CORS 后重试。'
+    stopSpectrumLoop()
+  }
+}
+
+function pauseTrack() {
+  audio.value?.pause()
+  playing.value = false
+  stopSpectrumLoop()
+}
+
+async function togglePlay() {
+  if (playing.value) pauseTrack()
+  else await playTrack()
+}
+
+function handleEnded() {
+  playing.value = false
+  moveTrack(1)
+  stopSpectrumLoop()
+}
+
+function handleAudioError() {
+  playing.value = false
+  errorMessage.value = '音频加载失败；播放器仍保留曲目信息和授权链接。'
+  stopSpectrumLoop()
+}
+
+async function ensureAudioGraph() {
+  if (!audio.value || context || dataSaver.value || reduced.value || !spectrumEnabled.value) return
+  if (!('AudioContext' in window) || !('AnalyserNode' in window)) {
+    spectrumMessage.value = '当前浏览器不支持 Web Audio，已保留普通播放。'
+    spectrumEnabled.value = false
+    return
+  }
+  try {
+    context = new AudioContext()
+    source = context.createMediaElementSource(audio.value)
+    analyser.value = context.createAnalyser()
+    analyser.value.fftSize = 64
+    analyser.value.smoothingTimeConstant = .75
+    source.connect(analyser.value)
+    analyser.value.connect(context.destination)
+    if (context.state === 'suspended') await context.resume()
+  } catch {
+    releaseAudioGraph()
+    spectrumEnabled.value = false
+    spectrumMessage.value = '频谱接入失败，已保留普通播放。'
+  }
+}
+
+function syncSpectrumLoop() {
+  const shouldRun = playing.value && pageVisible.value && expanded.value && hasSpectrum.value
+  if (shouldRun && !raf) raf = requestAnimationFrame(drawSpectrum)
+  if (!shouldRun) stopSpectrumLoop()
+}
+
+function stopSpectrumLoop() {
+  if (raf) cancelAnimationFrame(raf)
+  raf = 0
+}
+
+function drawSpectrum() {
+  raf = 0
+  if (!analyser.value || !canvas.value || !playing.value || !pageVisible.value || !expanded.value || !hasSpectrum.value) return
+  const element = canvas.value
+  const context2d = element.getContext('2d')
+  if (!context2d) {
+    spectrumEnabled.value = false
+    spectrumMessage.value = 'Canvas 不可用，已保留普通播放。'
+    return
+  }
+  const width = Math.max(1, Math.floor(element.clientWidth * Math.min(window.devicePixelRatio || 1, 1.5)))
+  const height = Math.max(1, Math.floor(element.clientHeight * Math.min(window.devicePixelRatio || 1, 1.5)))
+  if (element.width !== width || element.height !== height) { element.width = width; element.height = height }
+  const values = new Uint8Array(analyser.value.frequencyBinCount)
+  analyser.value.getByteFrequencyData(values)
+  context2d.clearRect(0, 0, width, height)
+  context2d.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--color-accent').trim() || '#a8ff60'
+  const gap = Math.max(1, width / values.length * .18)
+  const barWidth = Math.max(1, width / values.length - gap)
+  values.forEach((value, index) => {
+    const barHeight = Math.max(1, value / 255 * height)
+    context2d.fillRect(index * (barWidth + gap), height - barHeight, barWidth, barHeight)
+  })
+  raf = requestAnimationFrame(drawSpectrum)
+}
+
+function releaseAudioGraph() {
+  source?.disconnect()
+  analyser.value?.disconnect()
+  source = null
+  analyser.value = null
+  if (context) void context.close().catch(() => undefined)
+  context = null
+}
+</script>
+
+<template>
+  <section class="signal-tape" aria-label="信号磁带播放器">
+    <div class="signal-tape-bar">
+      <span class="instrument-label">SIGNAL TAPE / MUSIC</span>
+      <span class="signal-tape-state" role="status" aria-live="polite">{{ playing ? 'PLAYING' : 'READY' }}</span>
+      <button class="tape-toggle" type="button" :aria-expanded="expanded" @click="expanded = !expanded">{{ expanded ? '折叠' : '展开' }}</button>
+    </div>
+    <div v-show="expanded" class="signal-tape-panel">
+      <p v-if="loading" class="tape-note" role="status">正在读取授权清单…</p>
+      <p v-else-if="errorMessage && !currentTrack" class="tape-note tape-note--warn" role="alert">{{ errorMessage }}</p>
+      <template v-if="currentTrack">
+        <div class="tape-meta">
+          <div>
+            <p class="tape-track-title">{{ currentTrack.title }}</p>
+            <p class="tape-track-artist">{{ currentTrack.artist }}</p>
+          </div>
+          <p class="tape-license">授权：{{ currentTrack.licenseName }}<br><a v-if="currentTrack.licenseUrl" :href="currentTrack.licenseUrl" target="_blank" rel="noopener noreferrer">授权链接 ↗</a><a v-if="currentTrack.sourceUrl" :href="currentTrack.sourceUrl" target="_blank" rel="noopener noreferrer">来源链接 ↗</a></p>
+        </div>
+        <canvas v-show="hasSpectrum" ref="canvas" class="tape-spectrum" aria-label="当前音频频谱" />
+        <p class="tape-note" role="status">{{ spectrumMessage }}</p>
+        <div class="tape-controls">
+          <button type="button" aria-label="上一首" :disabled="!tracks.length" @click="moveTrack(-1)">PREV</button>
+          <button type="button" class="tape-play" :aria-label="playing ? '暂停播放' : '开始播放'" :disabled="!tracks.length" @click="togglePlay">{{ playing ? 'PAUSE' : 'PLAY' }}</button>
+          <button type="button" aria-label="下一首" :disabled="!tracks.length" @click="moveTrack(1)">NEXT</button>
+          <label class="tape-volume">音量 <input v-model.number="volume" type="range" min="0" max="1" step=".01" aria-label="音量"></label>
+          <button type="button" :aria-pressed="spectrumEnabled" :disabled="Boolean(dataSaver || reduced)" @click="spectrumEnabled = !spectrumEnabled; syncSpectrumLoop()">{{ spectrumEnabled ? 'SPECTRUM ON' : 'SPECTRUM OFF' }}</button>
+        </div>
+      </template>
+      <p v-if="errorMessage && currentTrack" class="tape-note tape-note--warn" role="alert">{{ errorMessage }}</p>
+      <audio ref="audio" crossorigin="anonymous" preload="none" @play="playing = true" @pause="playing = false" @ended="handleEnded" @error="handleAudioError" />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.signal-tape { position: relative; z-index: 2; width: min(58rem, calc(100% - 2 * var(--space-shell))); margin: 0 auto 1rem; border: 1px solid var(--color-border); background: var(--color-bg-sub); color: var(--color-text-main); }
+.signal-tape-bar, .signal-tape-panel { padding: .65rem .8rem; }
+.signal-tape-bar { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .8rem; }
+.signal-tape-state, .tape-toggle, .tape-note, .tape-track-artist, .tape-license, .tape-controls { font: var(--text-xs)/1.4 var(--font-mono); }
+.signal-tape-state, .tape-track-artist, .tape-license, .tape-note { color: var(--color-text-muted); }
+.tape-toggle, .tape-controls button { border: 1px solid var(--color-border); background: transparent; color: var(--color-accent); cursor: pointer; font: var(--text-xs)/1.3 var(--font-mono); }
+.tape-toggle { padding: .25rem .45rem; }
+.signal-tape-panel { border-top: 1px solid var(--color-border); }
+.tape-meta { display: flex; justify-content: space-between; gap: 1rem; }
+.tape-track-title { margin: 0; color: var(--color-text-main); font: 700 var(--text-lg)/1.2 var(--font-display); }
+.tape-track-artist, .tape-license { margin: .3rem 0 0; }
+.tape-license { text-align: right; }
+.tape-license a { display: inline-block; margin-left: .6rem; color: var(--color-accent); }
+.tape-spectrum { display: block; width: 100%; height: 3.5rem; margin: .8rem 0 .3rem; border-bottom: 1px solid var(--color-border); }
+.tape-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: .7rem; }
+.tape-controls button { padding: .45rem .55rem; }
+.tape-controls button:hover:not(:disabled), .tape-controls button:focus-visible { background: var(--color-accent); color: var(--color-accent-ink); }
+.tape-play { border-color: var(--color-accent) !important; }
+.tape-controls button:disabled { cursor: not-allowed; opacity: .5; }
+.tape-volume { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; color: var(--color-text-muted); }
+.tape-volume input { accent-color: var(--color-accent); }
+.tape-note { margin: .6rem 0 0; }
+.tape-note--warn { color: var(--color-warn); }
+@media (max-width: 640px) { .signal-tape { width: calc(100% - 1.5rem); }.tape-meta { flex-direction: column; }.tape-license { text-align: left; }.tape-volume { margin-left: 0; width: 100%; } }
+@media (prefers-reduced-motion: reduce) { .tape-spectrum { display: none; } }
+</style>
diff --git a/apps/web/app/error.vue b/apps/web/app/error.vue
index 04356b9..d796934 100644
--- a/apps/web/app/error.vue
+++ b/apps/web/app/error.vue
@@ -1,13 +1,79 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { useDataSaver } from './composables/useDataSaver'
+import { useMotionPreference } from './composables/useMotionPreference'
+
+type ErrorInfo = { statusCode?: number; statusMessage?: string }
+const props = defineProps<{ error: ErrorInfo }>()
+const runtimeConfig = useRuntimeConfig()
+const { enabled: dataSaver } = useDataSaver()
+const { reduced } = useMotionPreference()
+const repairComponent = ref<Component | null>(null)
+const repairState = ref<'idle' | 'ready' | 'success' | 'failed'>('idle')
+const isNotFound = computed(() => (props.error?.statusCode ?? 404) === 404)
+const title = computed(() => isNotFound.value ? '页面未找到' : '观测站暂时失联')
+const copy = computed(() => isNotFound.value ? '这条路径没有被观测站记录。' : '当前请求没有得到可用的观测响应，请稍后重试。')
+
+useHead({
+  title: () => `${title.value} · HaoBlog`,
+  meta: [{ name: 'robots', content: 'noindex,nofollow' }],
+})
+
+onMounted(async () => {
+  if (!isNotFound.value || !runtimeConfig.public.signalRepair404 || dataSaver.value || reduced.value) return
+  if (window.innerWidth <= 360 || window.matchMedia('(pointer: coarse)').matches || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
+  try {
+    repairComponent.value = (await import('./components/error/SignalRepair.client.vue')).default
+    repairState.value = 'ready'
+  } catch {
+    repairState.value = 'failed'
+  }
+})
+
+function retry() {
+  if (import.meta.client) window.location.reload()
+}
+</script>
+
 <template>
   <section class="observation-scene error-scene" aria-labelledby="error-title">
-    <p class="instrument-label">SIGNAL LOST / {{ error?.statusCode ?? 404 }}</p>
-    <h1 id="error-title">页面未找到</h1>
-    <p class="signal-copy">这条路径没有被观测站记录。</p>
-    <NuxtLink to="/" class="dock-control">返回 INDEX</NuxtLink>
+    <p class="instrument-label">SIGNAL LOST / {{ props.error?.statusCode ?? 404 }}</p>
+    <h1 id="error-title">{{ title }}</h1>
+    <p class="signal-copy">{{ copy }}</p>
+
+    <component
+      :is="repairComponent"
+      v-if="isNotFound && repairComponent && repairState === 'ready'"
+      @completed="repairState = 'success'"
+      @failed="repairState = 'failed'"
+    />
+    <p v-if="repairState === 'success'" class="repair-success" role="status">信号已修复。可以返回首页继续观测。</p>
+
+    <div class="error-recovery" aria-label="错误恢复路径">
+      <form v-if="isNotFound" class="error-search" action="/search" method="get">
+        <label for="error-search-query">搜索文章</label>
+        <div><input id="error-search-query" name="q" type="search" minlength="2" maxlength="100" required placeholder="输入至少 2 个字符"><button type="submit">SEARCH →</button></div>
+      </form>
+      <button v-else class="retry-button" type="button" @click="retry">重试当前路径</button>
+      <nav class="error-links" aria-label="错误页入口">
+        <NuxtLink to="/articles">文章观测日志</NuxtLink>
+        <NuxtLink to="/tools">公开工具箱</NuxtLink>
+        <NuxtLink to="/">返回首页</NuxtLink>
+      </nav>
+    </div>
   </section>
 </template>
 
-<script setup lang="ts">
-defineProps<{ error: { statusCode?: number; statusMessage?: string } }>()
-useHead({ meta: [{ name: 'robots', content: 'noindex,nofollow' }] })
-</script>
+<style scoped>
+.error-scene { max-width: 60rem; }
+.error-recovery { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--color-border); }
+.error-search { display: grid; gap: .45rem; max-width: 34rem; color: var(--color-text-muted); font: var(--text-xs)/1.3 var(--font-mono); }
+.error-search > div { display: flex; gap: .5rem; }
+.error-search input { flex: 1; min-width: 0; min-height: 2.5rem; padding: .5rem; border: 1px solid var(--color-border); border-radius: 0; background: var(--color-bg-sub); color: var(--color-text-main); font: var(--text-sm)/1.2 var(--font-mono); }
+.error-search button, .retry-button { min-height: 2.5rem; padding: .5rem .7rem; border: 1px solid var(--color-accent); background: transparent; color: var(--color-accent); cursor: pointer; font: var(--text-xs)/1.2 var(--font-mono); }
+.error-search button:hover, .error-search button:focus-visible, .retry-button:hover, .retry-button:focus-visible { background: var(--color-accent); color: var(--color-accent-ink); }
+.error-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.2rem; }
+.error-links a { color: var(--color-accent); font: var(--text-xs)/1.4 var(--font-mono); }
+.repair-success { margin: 1rem 0 0; color: var(--color-accent); font: var(--text-sm)/1.5 var(--font-mono); }
+@media (max-width: 360px) { .error-search > div { align-items: stretch; flex-direction: column; }.error-search button { width: 100%; } }
+</style>
diff --git a/apps/web/app/layouts/default.vue b/apps/web/app/layouts/default.vue
index 5788bed..594531a 100644
--- a/apps/web/app/layouts/default.vue
+++ b/apps/web/app/layouts/default.vue
@@ -4,6 +4,8 @@
     <div class="phosphor-hairline" aria-hidden="true" />
     <main id="main-content" class="content-stage"><slot /></main>
     <ReadingProgress />
+    <component :is="musicComponent" v-if="musicComponent" />
+    <button v-else-if="site?.musicEnabled" class="signal-tape-launcher" type="button" @click="openMusic">SIGNAL TAPE / OPEN</button>
     <nav class="instrument-dock" aria-label="站点仪表板">
       <details class="dock-index">
         <summary class="dock-control dock-index-trigger" aria-label="INDEX：打开站点索引">
@@ -28,12 +30,16 @@
 
 <script setup lang="ts">
 import type { Component } from 'vue'
+import { usePublicSite } from '../utils/publicSite'
 
 const route = useRoute()
+const { data: site } = usePublicSite()
 const terminalTrigger = ref<HTMLButtonElement | null>(null)
 const terminalComponent = ref<Component | null>(null)
+const musicComponent = ref<Component | null>(null)
 const terminalOpen = ref(false)
 let terminalLoad: Promise<void> | null = null
+let musicLoad: Promise<void> | null = null
 const routeItems = [
   { to: '/', label: '01 / 首页' },
   { to: '/articles', label: '02 / 文章' },
@@ -58,6 +64,16 @@ function closeTerminal() {
   nextTick(() => terminalTrigger.value?.focus())
 }
 
+async function openMusic() {
+  if (musicComponent.value || musicLoad) return musicLoad
+  musicLoad = import('../components/music/SignalTape.client.vue').then(module => {
+    musicComponent.value = module.default
+  }).finally(() => {
+    musicLoad = null
+  })
+  return musicLoad
+}
+
 function handleGlobalShortcut(event: KeyboardEvent) {
   if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
     event.preventDefault()
@@ -68,3 +84,9 @@ function handleGlobalShortcut(event: KeyboardEvent) {
 onMounted(() => window.addEventListener('keydown', handleGlobalShortcut))
 onBeforeUnmount(() => window.removeEventListener('keydown', handleGlobalShortcut))
 </script>
+
+<style scoped>
+.signal-tape-launcher { position: relative; z-index: var(--z-stage); display: block; width: min(58rem, calc(100% - 2 * var(--space-shell))); margin: 0 auto 1rem; padding: .65rem .8rem; border: 1px solid var(--color-border); background: var(--color-bg-sub); color: var(--color-accent); text-align: left; cursor: pointer; font: var(--text-xs)/1.4 var(--font-mono); letter-spacing: .12em; }
+.signal-tape-launcher:hover, .signal-tape-launcher:focus-visible { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg-sub)); }
+@media (max-width: 640px) { .signal-tape-launcher { width: calc(100% - 1.5rem); } }
+</style>
diff --git a/apps/web/app/pages/tools.vue b/apps/web/app/pages/tools.vue
index c31126d..a12c633 100644
--- a/apps/web/app/pages/tools.vue
+++ b/apps/web/app/pages/tools.vue
@@ -29,6 +29,10 @@ const favorites = ref(new Set<string>())
 const usage = ref<Record<string, { count: number; lastUsed: string }>>({})
 const embeddedWorker = useEmbeddedWorker()
 provide(embeddedWorkerKey, embeddedWorker)
+const runtimeConfig = useRuntimeConfig()
+const offlineStage = ref<'idle' | 'confirm' | 'preparing' | 'ready' | 'error'>('idle')
+const offlineMessage = ref('')
+const offlineEnabled = computed(() => Boolean(runtimeConfig.public.pwaEnabled))
 
 const tools = computed(() => data.value?.items || [])
 const categories = computed(() => data.value?.categories || [])
@@ -132,6 +136,23 @@ function safeExternalUrl(url: string | null) {
     return value.protocol === 'https:' && !value.username && !value.password ? value.toString() : null
   } catch { return null }
 }
+
+async function prepareOfflineTools() {
+  if (offlineStage.value === 'preparing') return
+  offlineStage.value = 'preparing'
+  offlineMessage.value = ''
+  try {
+    const { embeddedWorkerAssetUrl, preloadEmbeddedToolChunks } = await import('../utils/embeddedTools')
+    await preloadEmbeddedToolChunks()
+    const { prepareOfflineTools: prepare, sameOriginResourceUrls } = await import('../utils/pwaClient')
+    await prepare([...sameOriginResourceUrls(), embeddedWorkerAssetUrl()])
+    offlineStage.value = 'ready'
+    offlineMessage.value = '五个内嵌工具及当前工具目录已准备；断网后可从最近目录快照打开。'
+  } catch (cause) {
+    offlineStage.value = 'error'
+    offlineMessage.value = cause instanceof Error ? cause.message : '离线工具准备失败，请保持网络连接后重试。'
+  }
+}
 </script>
 
 <template>
@@ -145,6 +166,22 @@ function safeExternalUrl(url: string | null) {
       <p class="console-readout" aria-label="工具目录状态"><span class="status-light" aria-hidden="true" /> {{ filteredTools.length }} SIGNALS / ACTIVE ONLY</p>
     </header>
 
+    <section v-if="offlineEnabled" class="offline-preparation" aria-labelledby="offline-tools-title">
+      <div>
+        <p class="instrument-label">LOCAL CACHE / EXPLICIT PREPARATION</p>
+        <h2 id="offline-tools-title">工具箱离线准备</h2>
+        <p class="offline-copy">只缓存当前公开工具目录和五个内嵌工具的同源静态资源，不缓存 API、文章、评论、Studio、图谱、音乐或用户输入。</p>
+      </div>
+      <button v-if="offlineStage === 'idle' || offlineStage === 'error'" class="offline-button" type="button" @click="offlineStage = 'confirm'">准备离线工具</button>
+      <div v-else-if="offlineStage === 'confirm'" class="offline-confirm" role="group" aria-label="确认离线准备">
+        <span>确认后将加载五个工具 chunk 并写入浏览器 Cache Storage。</span>
+        <button class="offline-button" type="button" @click="prepareOfflineTools">确认准备</button>
+        <button class="offline-cancel" type="button" @click="offlineStage = 'idle'">取消</button>
+      </div>
+      <p v-if="offlineStage === 'preparing'" class="offline-status" role="status">正在加载工具并准备离线缓存，请保持网络连接…</p>
+      <p v-else-if="offlineMessage" class="offline-status" :class="{ 'offline-status--error': offlineStage === 'error' }" role="status">{{ offlineMessage }}</p>
+    </section>
+
     <form class="tool-filters" aria-label="工具目录筛选" @submit.prevent>
       <label>分类<select v-model="category"><option value="">全部分类</option><option v-for="item in categories" :key="item.id" :value="item.slug">{{ item.name }}</option></select></label>
       <label>类型<select v-model="type"><option value="">全部类型</option><option value="EMBEDDED">EMBEDDED</option><option value="LINK">LINK</option><option value="SHOWCASE">SHOWCASE</option></select></label>
@@ -210,6 +247,15 @@ function safeExternalUrl(url: string | null) {
 
 <style scoped>
 .tools-scene { max-width: 74rem; margin: 8vh auto 4rem; }
+.offline-preparation { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 1rem 0 2rem; padding: .9rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
+.offline-preparation h2 { margin: .35rem 0; font: 700 clamp(1.25rem, 3vw, 1.8rem)/1.1 var(--font-display); }
+.offline-copy { max-width: 48rem; margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
+.offline-button, .offline-cancel { padding: .55rem .7rem; border: 1px solid var(--color-accent); background: transparent; color: var(--color-accent); cursor: pointer; white-space: nowrap; font: var(--text-xs)/1.2 var(--font-mono); }
+.offline-button:hover, .offline-button:focus-visible { background: var(--color-accent); color: var(--color-accent-ink); }
+.offline-cancel { border-color: var(--color-border); color: var(--color-text-muted); }
+.offline-confirm { display: flex; align-items: center; flex-wrap: wrap; justify-content: end; gap: .5rem; color: var(--color-text-muted); font: var(--text-xs)/1.4 var(--font-mono); }
+.offline-status { flex-basis: 100%; margin: 0; color: var(--color-accent); font: var(--text-xs)/1.5 var(--font-mono); }
+.offline-status--error { color: var(--color-warn); }
 .tools-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-8); margin-bottom: clamp(2rem, 7vw, 5rem); }
 .tools-heading h1 { max-width: none; margin-bottom: 1.4rem; }
 .signal-copy { max-width: 42rem; }
@@ -252,7 +298,7 @@ function safeExternalUrl(url: string | null) {
 .tool-empty strong { color: var(--color-text-main); font: 700 var(--text-lg)/1.2 var(--font-display); }
 .empty-code { color: var(--color-warn); }
 @media (max-width: 960px) { .tool-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .keyword-filter { grid-column: span 2; } .sort-controls { justify-content: end; } .tool-row { grid-template-columns: 2.25rem .5rem minmax(8rem, 1fr) auto auto; } .tool-metadata { grid-column: 3 / -1; grid-row: 2; } }
-@media (max-width: 640px) { .tools-scene { margin-top: 5vh; } .tools-heading { align-items: start; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; } .tools-heading h1 { font-size: clamp(3rem, 18vw, 5rem); } .tool-filters { grid-template-columns: 1fr; } .keyword-filter { grid-column: auto; } .sort-controls { justify-content: start; flex-wrap: wrap; } .tool-row { grid-template-columns: 1.8rem .45rem minmax(0, 1fr) auto; gap: .55rem; padding-inline: .55rem; } .tool-metadata { grid-column: 3 / -1; grid-row: 2; } .tool-favorite { grid-column: 3; grid-row: 3; justify-self: start; } .tool-unfold { grid-column: 4; grid-row: 3; } .tool-summary { padding-left: 2.7rem; padding-right: .55rem; } .tool-panel { grid-template-columns: 1fr; padding-left: 2.7rem; padding-right: .55rem; } .external-link { justify-self: start; } }
+@media (max-width: 640px) { .tools-scene { margin-top: 5vh; } .tools-heading { align-items: start; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; } .offline-preparation { align-items: start; flex-direction: column; } .offline-confirm { justify-content: start; } .tools-heading h1 { font-size: clamp(3rem, 18vw, 5rem); } .tool-filters { grid-template-columns: 1fr; } .keyword-filter { grid-column: auto; } .sort-controls { justify-content: start; flex-wrap: wrap; } .tool-row { grid-template-columns: 1.8rem .45rem minmax(0, 1fr) auto; gap: .55rem; padding-inline: .55rem; } .tool-metadata { grid-column: 3 / -1; grid-row: 2; } .tool-favorite { grid-column: 3; grid-row: 3; justify-self: start; } .tool-unfold { grid-column: 4; grid-row: 3; } .tool-summary { padding-left: 2.7rem; padding-right: .55rem; } .tool-panel { grid-template-columns: 1fr; padding-left: 2.7rem; padding-right: .55rem; } .external-link { justify-self: start; } }
 @media (max-width: 360px) { .tools-scene { margin-top: 2rem; } .tool-row { grid-template-columns: 1.6rem .4rem minmax(0, 1fr); } .tool-favorite, .tool-unfold { grid-column: 3; grid-row: auto; justify-self: start; } .tool-unfold { margin-top: .2rem; } .tool-metadata { grid-column: 3; grid-row: auto; } .tool-summary { padding-left: 2.2rem; } .tool-panel { padding-left: 2.2rem; } }
 @media (prefers-reduced-motion: reduce) { .tools-scene *, .tools-scene *::before, .tools-scene *::after { transition: none !important; animation: none !important; } }
 </style>
diff --git a/apps/web/app/utils/embeddedTools.ts b/apps/web/app/utils/embeddedTools.ts
index 158dec2..9647ef4 100644
--- a/apps/web/app/utils/embeddedTools.ts
+++ b/apps/web/app/utils/embeddedTools.ts
@@ -8,6 +8,22 @@ export const embeddedToolComponents: Record<string, Component> = {
   'regex-test': defineAsyncComponent(() => import('~/components/tools/RegexTestTool.vue')),
 }
 
+const embeddedToolLoaders = [
+  () => import('~/components/tools/JsonFormatTool.vue'),
+  () => import('~/components/tools/Base64Tool.vue'),
+  () => import('~/components/tools/UrlCodecTool.vue'),
+  () => import('~/components/tools/TimestampTool.vue'),
+  () => import('~/components/tools/RegexTestTool.vue'),
+]
+
+export async function preloadEmbeddedToolChunks() {
+  await Promise.all(embeddedToolLoaders.map(loader => loader()))
+}
+
+export function embeddedWorkerAssetUrl() {
+  return new URL('../workers/embedded-tool.worker.ts', import.meta.url).toString()
+}
+
 export type EmbeddedComponentKey = keyof typeof embeddedToolComponents
 
 export function getEmbeddedToolComponent(componentKey: string | null | undefined) {
diff --git a/apps/web/app/utils/musicManifest.ts b/apps/web/app/utils/musicManifest.ts
new file mode 100644
index 0000000..e2a7d26
--- /dev/null
+++ b/apps/web/app/utils/musicManifest.ts
@@ -0,0 +1,92 @@
+export const MUSIC_MANIFEST_VERSION = 1
+export const MUSIC_MANIFEST_MAX_BYTES = 64 * 1024
+export const MUSIC_TRACK_LIMIT = 20
+
+export interface MusicTrack {
+  id: string
+  title: string
+  artist: string
+  audioUrl: string
+  licenseName: string
+  licenseUrl?: string
+  sourceUrl?: string
+}
+
+export interface MusicManifest {
+  version: 1
+  tracks: MusicTrack[]
+}
+
+const LOCAL_HOSTS = new Set(['localhost', '127.0.0.1', '::1'])
+
+function text(value: unknown, maxLength: number) {
+  return typeof value === 'string' && value.trim().length > 0 && value.length <= maxLength
+}
+
+function safeUrl(value: unknown, allowLocalhost: boolean) {
+  if (typeof value !== 'string' || value.length > 2048) return null
+  try {
+    const url = new URL(value)
+    const localHttp = allowLocalhost && url.protocol === 'http:' && LOCAL_HOSTS.has(url.hostname.toLowerCase())
+    if (!(url.protocol === 'https:' || localHttp) || url.username || url.password || url.hash) return null
+    return url.toString()
+  } catch {
+    return null
+  }
+}
+
+export function emptyMusicManifest(): MusicManifest {
+  return { version: MUSIC_MANIFEST_VERSION, tracks: [] }
+}
+
+export function validateMusicManifest(value: unknown, options: { allowLocalhost?: boolean } = {}): MusicManifest {
+  const allowLocalhost = options.allowLocalhost === true
+  if (!value || typeof value !== 'object' || Array.isArray(value)) throw new Error('音乐清单必须是 JSON 对象。')
+  const input = value as { version?: unknown; tracks?: unknown }
+  if (input.version !== MUSIC_MANIFEST_VERSION) throw new Error('音乐清单版本必须为 1。')
+  if (!Array.isArray(input.tracks) || input.tracks.length > MUSIC_TRACK_LIMIT) {
+    throw new Error(`音乐清单最多包含 ${MUSIC_TRACK_LIMIT} 首曲目。`)
+  }
+
+  const ids = new Set<string>()
+  const tracks = input.tracks.map((item, index) => {
+    if (!item || typeof item !== 'object' || Array.isArray(item)) throw new Error(`第 ${index + 1} 首曲目格式无效。`)
+    const track = item as Record<string, unknown>
+    if (!text(track.id, 128) || !text(track.title, 200) || !text(track.artist, 200) || !text(track.licenseName, 200)) {
+      throw new Error(`第 ${index + 1} 首曲目缺少必填字段。`)
+    }
+    const id = String(track.id).trim()
+    if (ids.has(id)) throw new Error(`曲目 ID 重复：${id}`)
+    ids.add(id)
+    const audioUrl = safeUrl(track.audioUrl, allowLocalhost)
+    if (!audioUrl) throw new Error(`第 ${index + 1} 首曲目必须使用 HTTPS 音频地址。`)
+
+    const result: MusicTrack = {
+      id,
+      title: String(track.title).trim(),
+      artist: String(track.artist).trim(),
+      audioUrl,
+      licenseName: String(track.licenseName).trim(),
+    }
+    for (const field of ['licenseUrl', 'sourceUrl'] as const) {
+      if (track[field] === undefined || track[field] === null || track[field] === '') continue
+      const url = safeUrl(track[field], allowLocalhost)
+      if (!url) throw new Error(`第 ${index + 1} 首曲目的 ${field} 地址无效。`)
+      result[field] = url
+    }
+    return result
+  })
+
+  return { version: MUSIC_MANIFEST_VERSION, tracks }
+}
+
+export function decodeMusicManifest(bytes: ArrayBuffer, options: { allowLocalhost?: boolean } = {}) {
+  if (bytes.byteLength > MUSIC_MANIFEST_MAX_BYTES) throw new Error('音乐清单不能超过 64 KiB。')
+  let json: unknown
+  try {
+    json = JSON.parse(new TextDecoder('utf-8', { fatal: true }).decode(bytes))
+  } catch {
+    throw new Error('音乐清单不是有效的 UTF-8 JSON。')
+  }
+  return validateMusicManifest(json, options)
+}
diff --git a/apps/web/app/utils/pwaClient.ts b/apps/web/app/utils/pwaClient.ts
new file mode 100644
index 0000000..ac1530b
--- /dev/null
+++ b/apps/web/app/utils/pwaClient.ts
@@ -0,0 +1,48 @@
+export type PwaPreparationResult = { cached: number }
+
+function saveDataEnabled() {
+  return Boolean((navigator as Navigator & { connection?: { saveData?: boolean } }).connection?.saveData)
+}
+
+export async function registerServiceWorker(options: { ignoreSaveData?: boolean } = {}) {
+  if (!('serviceWorker' in navigator) || (!options.ignoreSaveData && saveDataEnabled())) return null
+  try {
+    return await navigator.serviceWorker.register('/sw.js', { scope: '/' })
+  } catch {
+    return null
+  }
+}
+
+export function sameOriginResourceUrls() {
+  const origin = window.location.origin
+  const urls = new Set<string>()
+  for (const entry of performance.getEntriesByType('resource')) {
+    const resource = entry as PerformanceResourceTiming
+    try {
+      const url = new URL(resource.name)
+      if (url.origin === origin && (url.pathname.startsWith('/_nuxt/') || url.pathname.startsWith('/workers/'))) urls.add(url.toString())
+    } catch { /* 忽略浏览器无法解析的资源记录。 */ }
+  }
+  return [...urls]
+}
+
+function activeWorker(registration: ServiceWorkerRegistration) {
+  return registration.active || registration.waiting || registration.installing
+}
+
+export async function prepareOfflineTools(resourceUrls: string[]): Promise<PwaPreparationResult> {
+  const registration = await registerServiceWorker({ ignoreSaveData: true })
+  const worker = registration && activeWorker(registration)
+  if (!registration || !worker) throw new Error('Service Worker 暂时不可用，工具仍可在线使用。')
+  return await new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+    const timer = window.setTimeout(() => reject(new Error('离线工具准备超时，请保持网络连接后重试。')), 15000)
+    channel.port1.onmessage = event => {
+      window.clearTimeout(timer)
+      const data = event.data as { ok?: boolean; cached?: number; error?: string }
+      if (data.ok) resolve({ cached: data.cached || 0 })
+      else reject(new Error(data.error || '离线工具准备失败，请稍后重试。'))
+    }
+    worker.postMessage({ type: 'PREPARE_TOOLS', resourceUrls }, [channel.port2])
+  })
+}
diff --git a/apps/web/e2e/stage5.spec.ts b/apps/web/e2e/stage5.spec.ts
index 13483a4..8f405aa 100644
--- a/apps/web/e2e/stage5.spec.ts
+++ b/apps/web/e2e/stage5.spec.ts
@@ -106,6 +106,27 @@ async function setThreeDFlag(request: APIRequestContext, enabled: boolean) {
   expect(updated.ok()).toBe(true)
 }
 
+async function setMusicFlag(request: APIRequestContext, enabled: boolean) {
+  const anonymousCsrf = await request.get('/api/v1/admin/csrf')
+  expect(anonymousCsrf.ok()).toBe(true)
+  const anonymousToken = (await anonymousCsrf.json() as { token: string }).token
+  const login = await request.post('/api/v1/admin/session', {
+    headers: { 'X-CSRF-TOKEN': anonymousToken },
+    data: { username: 'admin', password: 'password' },
+  })
+  expect(login.ok()).toBe(true)
+  const csrf = await request.get('/api/v1/admin/csrf')
+  const token = (await csrf.json() as { token: string }).token
+  const current = await request.get('/api/v1/admin/site')
+  expect(current.ok()).toBe(true)
+  const site = await current.json() as { version: number; commentsEnabled: boolean; musicEnabled: boolean; threeDEnabled: boolean }
+  const updated = await request.put('/api/v1/admin/site', {
+    headers: { 'X-CSRF-TOKEN': token },
+    data: { version: site.version, commentsEnabled: site.commentsEnabled, musicEnabled: enabled, threeDEnabled: site.threeDEnabled },
+  })
+  expect(updated.ok()).toBe(true)
+}
+
 test.describe('S5-03 secure terminal and theme', () => {
   test('opens the native dialog, supports keyboard recovery and safe command fallback', async ({ page }) => {
     await page.goto('/')
@@ -215,3 +236,111 @@ test.describe('S5-04 home three frames', () => {
     }
   })
 })
+
+test.describe('S5-05 music and S5-06 signal repair', () => {
+  test('keeps music off without requesting the manifest or audio, and preserves 404 recovery', async ({ page, browser }) => {
+    const musicTestEnabled = process.env.HAOBLOG_MUSIC_TEST === 'true'
+    if (musicTestEnabled) await setMusicFlag(page.request, true)
+    try {
+    const musicRequests: string[] = []
+    page.on('request', request => {
+      if (/music-manifest|\.mp3(?:\?|$)/i.test(request.url())) musicRequests.push(request.url())
+    })
+    const site = await page.request.get('/api/v1/public/site')
+    expect(site.ok()).toBe(true)
+    const sitePayload = await site.json() as { musicEnabled: boolean }
+    await page.goto('/')
+    if (!sitePayload.musicEnabled) {
+      await expect(page.getByRole('button', { name: /SIGNAL TAPE/ })).toHaveCount(0)
+      expect(musicRequests).toEqual([])
+    } else {
+      await expect(page.getByRole('button', { name: /SIGNAL TAPE/ })).toBeVisible()
+      await expect(page.locator('audio')).toHaveCount(0)
+      await page.getByRole('button', { name: /SIGNAL TAPE/ }).click()
+      await expect(page.locator('audio')).toBeAttached()
+      await expect(page.locator('audio')).toHaveAttribute('crossorigin', 'anonymous')
+      await expect.poll(() => musicRequests.filter(url => /music-manifest/.test(url)).length).toBeGreaterThan(0)
+      expect(musicRequests.filter(url => /\.mp3(?:\?|$)/i.test(url))).toEqual([])
+      await expect(page.locator('audio')).toHaveJSProperty('paused', true)
+    }
+
+    const notFound = await page.goto('/s5-06-missing-signal')
+    expect(notFound?.status()).toBe(404)
+    await expect(page.getByRole('heading', { name: /页面未找到/ })).toBeVisible()
+    await expect(page.getByRole('searchbox', { name: '搜索文章' })).toBeVisible()
+    await expect(page.getByRole('link', { name: '文章观测日志' })).toHaveAttribute('href', '/articles')
+    await expect(page.getByRole('link', { name: '公开工具箱' })).toHaveAttribute('href', '/tools')
+    await expect(page.getByRole('link', { name: '返回首页' })).toHaveAttribute('href', '/')
+
+    const mobile = await browser.newContext({
+      baseURL: process.env.HAOBLOG_BASE_URL || 'http://127.0.0.1',
+      hasTouch: true,
+      isMobile: true,
+      extraHTTPHeaders: { 'Save-Data': 'on' },
+    })
+    const mobilePage = await mobile.newPage()
+    await mobilePage.setViewportSize({ width: 360, height: 800 })
+    await mobilePage.goto('/s5-06-mobile-signal')
+    await expect(mobilePage.getByRole('searchbox', { name: '搜索文章' })).toBeVisible()
+    await expect(mobilePage.locator('.repair-game')).toHaveCount(0)
+    await mobile.close()
+
+    const noJs = await browser.newContext({
+      baseURL: process.env.HAOBLOG_BASE_URL || 'http://127.0.0.1',
+      javaScriptEnabled: false,
+    })
+    const noJsPage = await noJs.newPage()
+    await noJsPage.goto('/s5-06-no-js')
+    await expect(noJsPage.getByRole('searchbox', { name: '搜索文章' })).toBeVisible()
+    await expect(noJsPage.getByRole('link', { name: '返回首页' })).toBeVisible()
+    await noJs.close()
+    } finally {
+      if (musicTestEnabled) await setMusicFlag(page.request, false)
+    }
+  })
+
+  test('allows keyboard repair on a normal desktop 404 when the enhancement is enabled', async ({ page }) => {
+    await page.goto('/s5-06-keyboard-signal')
+    const game = page.locator('.repair-game')
+    if (await game.count() === 0) return
+    const segments = game.locator('.repair-segment')
+    for (let index = 0; index < 3; index += 1) {
+      await segments.nth(index).focus()
+      await page.keyboard.press('Enter')
+    }
+    await expect(page.getByText('信号已修复。可以返回首页继续观测。')).toBeVisible()
+  })
+})
+
+test.describe('S5-07 PWA offline tools', () => {
+  test('registers only in the production/test path and prepares an explicit cache boundary', async ({ page }) => {
+    const manifest = await page.request.get('/manifest.webmanifest')
+    test.skip(!manifest.ok(), 'PWA 只在 production build 或明确测试模式启用。')
+    expect(manifest.headers()['content-type']).toMatch(/manifest|json/)
+    const manifestJson = await manifest.json() as { theme_color: string; icons: Array<{ sizes: string; purpose?: string }> }
+    expect(manifestJson.theme_color).toBe('#06110F')
+    expect(manifestJson.icons.map(icon => icon.sizes)).toEqual(expect.arrayContaining(['192x192', '512x512']))
+    expect(manifestJson.icons.some(icon => icon.purpose === 'maskable')).toBe(true)
+
+    await page.goto('/tools')
+    await expect(page.getByRole('button', { name: '准备离线工具' })).toBeVisible()
+    await page.getByRole('button', { name: '准备离线工具' }).click()
+    await page.getByRole('button', { name: '确认准备' }).click()
+    await expect(page.getByText(/五个内嵌工具及当前工具目录已准备/)).toBeVisible({ timeout: 20_000 })
+
+    const cachedUrls = await page.evaluate(async () => {
+      const urls: string[] = []
+      for (const key of await caches.keys()) {
+        for (const request of await (await caches.open(key)).keys()) urls.push(request.url)
+      }
+      return urls
+    })
+    expect(cachedUrls.some(url => /\/tools(?:\?|$)/.test(url))).toBe(true)
+    expect(cachedUrls.some(url => /\/api\/|\/studio\/|\/articles\/|\/comments|\/garden|music-manifest|\.mp3(?:\?|$)/i.test(url))).toBe(false)
+
+    await page.context().setOffline(true)
+    await page.reload()
+    await expect(page.getByRole('heading', { name: '工具目录' })).toBeVisible()
+    await page.context().setOffline(false)
+  })
+})
diff --git a/apps/web/nuxt.config.ts b/apps/web/nuxt.config.ts
index ebb71a4..c1d91d2 100644
--- a/apps/web/nuxt.config.ts
+++ b/apps/web/nuxt.config.ts
@@ -23,6 +23,8 @@ export default defineNuxtConfig({
     apiBaseUrl: process.env.NUXT_API_BASE_URL || 'http://api:8080',
     public: {
       apiBase: '/',
+      pwaEnabled: process.env.NODE_ENV === 'production' || process.env.HAOBLOG_PWA_TEST === 'true',
+      signalRepair404: process.env.NUXT_SIGNAL_REPAIR_404 !== 'false',
     },
   },
   routeRules: {
diff --git a/apps/web/plugins/pwa.client.ts b/apps/web/plugins/pwa.client.ts
new file mode 100644
index 0000000..f5990da
--- /dev/null
+++ b/apps/web/plugins/pwa.client.ts
@@ -0,0 +1,8 @@
+import { registerServiceWorker } from '~/utils/pwaClient'
+
+export default defineNuxtPlugin(() => {
+  const config = useRuntimeConfig()
+  if (!config.public.pwaEnabled) return
+  // Save-Data 下不自动注册；工具页的显式准备动作仍会主动注册。
+  void registerServiceWorker()
+})
diff --git a/apps/web/public/manifest.webmanifest b/apps/web/public/manifest.webmanifest
new file mode 100644
index 0000000..c6c8ea6
--- /dev/null
+++ b/apps/web/public/manifest.webmanifest
@@ -0,0 +1,16 @@
+{
+  "name": "HaoBlog 极夜观测站",
+  "short_name": "HaoBlog",
+  "description": "面向开发者的公开文章与离线工具箱。",
+  "start_url": "/tools",
+  "scope": "/",
+  "display": "standalone",
+  "background_color": "#06110F",
+  "theme_color": "#06110F",
+  "icons": [
+    { "src": "/pwa-192.svg", "sizes": "192x192", "type": "image/svg+xml", "purpose": "any" },
+    { "src": "/pwa-512.svg", "sizes": "512x512", "type": "image/svg+xml", "purpose": "any" },
+    { "src": "/pwa-192-maskable.svg", "sizes": "192x192", "type": "image/svg+xml", "purpose": "maskable" },
+    { "src": "/pwa-512-maskable.svg", "sizes": "512x512", "type": "image/svg+xml", "purpose": "maskable" }
+  ]
+}
diff --git a/apps/web/public/pwa-192-maskable.svg b/apps/web/public/pwa-192-maskable.svg
new file mode 100644
index 0000000..a6f64cb
--- /dev/null
+++ b/apps/web/public/pwa-192-maskable.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192"><rect width="192" height="192" fill="#06110F"/><circle cx="96" cy="96" r="55" fill="#0B1B17" stroke="#A8FF60" stroke-width="7"/><path d="M68 96h56M96 68v56" stroke="#A8FF60" stroke-width="7"/></svg>
diff --git a/apps/web/public/pwa-192.svg b/apps/web/public/pwa-192.svg
new file mode 100644
index 0000000..8a5a9e6
--- /dev/null
+++ b/apps/web/public/pwa-192.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192"><rect width="192" height="192" fill="#06110F"/><path d="M28 48h136M28 96h136M28 144h136M48 28v136M96 28v136M144 28v136" stroke="#1E3A33" stroke-width="2"/><circle cx="96" cy="96" r="38" fill="#0B1B17" stroke="#A8FF60" stroke-width="6"/><path d="M76 96h40M96 76v40" stroke="#A8FF60" stroke-width="6"/></svg>
diff --git a/apps/web/public/pwa-512-maskable.svg b/apps/web/public/pwa-512-maskable.svg
new file mode 100644
index 0000000..39032d5
--- /dev/null
+++ b/apps/web/public/pwa-512-maskable.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><rect width="512" height="512" fill="#06110F"/><circle cx="256" cy="256" r="147" fill="#0B1B17" stroke="#A8FF60" stroke-width="18"/><path d="M181 256h150M256 181v150" stroke="#A8FF60" stroke-width="18"/></svg>
diff --git a/apps/web/public/pwa-512.svg b/apps/web/public/pwa-512.svg
new file mode 100644
index 0000000..702559f
--- /dev/null
+++ b/apps/web/public/pwa-512.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><rect width="512" height="512" fill="#06110F"/><path d="M72 128h368M72 256h368M72 384h368M128 72v368M256 72v368M384 72v368" stroke="#1E3A33" stroke-width="5"/><circle cx="256" cy="256" r="102" fill="#0B1B17" stroke="#A8FF60" stroke-width="14"/><path d="M202 256h108M256 202v108" stroke="#A8FF60" stroke-width="14"/></svg>
diff --git a/apps/web/public/sw.js b/apps/web/public/sw.js
new file mode 100644
index 0000000..b104e64
--- /dev/null
+++ b/apps/web/public/sw.js
@@ -0,0 +1,82 @@
+const CACHE_NAME = 'haoblog-tools-v1'
+const TOOL_PAGE = new URL('/tools', self.location.origin).toString()
+const READY_MARKER = new URL('/__haoblog_tools_ready__', self.location.origin).toString()
+
+function isRangeRequest(request) {
+  return request.headers.has('range')
+}
+
+function isToolPage(url) {
+  return url.origin === self.location.origin && url.pathname === '/tools'
+}
+
+function isStaticToolAsset(url) {
+  return url.origin === self.location.origin && (url.pathname.startsWith('/_nuxt/') || url.pathname.startsWith('/workers/'))
+}
+
+async function networkFirstToolPage(request) {
+  const cache = await caches.open(CACHE_NAME)
+  if (!(await cache.match(READY_MARKER))) return fetch(request)
+  try {
+    const response = await fetch(new Request(request, { cache: 'no-store' }))
+    if (response.ok) await cache.put(TOOL_PAGE, response.clone())
+    return response
+  } catch {
+    const cached = await cache.match(TOOL_PAGE)
+    return cached || new Response('离线工具尚未准备完成。请联网打开 /tools 并选择“准备离线工具”。', { status: 503, headers: { 'Content-Type': 'text/plain; charset=utf-8' } })
+  }
+}
+
+async function cacheFirstStatic(request) {
+  const cache = await caches.open(CACHE_NAME)
+  if (!(await cache.match(READY_MARKER))) return fetch(request)
+  const cached = await cache.match(request)
+  if (cached) return cached
+  return fetch(request)
+}
+
+async function prepareTools(resourceUrls, port) {
+  try {
+    const cache = await caches.open(CACHE_NAME)
+    const pageResponse = await fetch(new Request(TOOL_PAGE, { cache: 'no-store' }))
+    if (!pageResponse.ok) throw new Error('工具目录暂时无法缓存。')
+    await cache.put(TOOL_PAGE, pageResponse.clone())
+    let cached = 1
+    for (const raw of Array.isArray(resourceUrls) ? resourceUrls : []) {
+      let url
+      try { url = new URL(raw) } catch { continue }
+      if (!isStaticToolAsset(url) || isRangeRequest(new Request(url))) continue
+      const response = await fetch(new Request(url, { cache: 'no-store' }))
+      if (!response.ok) continue
+      await cache.put(url.toString(), response.clone())
+      cached += 1
+    }
+    await cache.put(READY_MARKER, new Response('ready', { headers: { 'Cache-Control': 'no-store' } }))
+    port?.postMessage({ ok: true, cached })
+  } catch (error) {
+    port?.postMessage({ ok: false, error: error instanceof Error ? error.message : '离线工具准备失败。' })
+  }
+}
+
+self.addEventListener('install', () => {
+  // 不预热、不跳过等待；首次安装和更新都由用户动作/旧页面生命周期决定。
+})
+
+self.addEventListener('activate', event => {
+  event.waitUntil(caches.keys().then(keys => Promise.all(keys.filter(key => key.startsWith('haoblog-tools-') && key !== CACHE_NAME).map(key => caches.delete(key)))))
+})
+
+self.addEventListener('message', event => {
+  if (event.data?.type === 'PREPARE_TOOLS') void prepareTools(event.data.resourceUrls, event.ports[0])
+})
+
+self.addEventListener('fetch', event => {
+  const request = event.request
+  const url = new URL(request.url)
+  if (request.method !== 'GET' || url.origin !== self.location.origin || isRangeRequest(request)) return
+  if (isToolPage(url)) {
+    event.respondWith(networkFirstToolPage(request))
+    return
+  }
+  if (isStaticToolAsset(url)) event.respondWith(cacheFirstStatic(request))
+})
diff --git a/apps/web/server/middleware/pwa-gate.ts b/apps/web/server/middleware/pwa-gate.ts
new file mode 100644
index 0000000..ed3f696
--- /dev/null
+++ b/apps/web/server/middleware/pwa-gate.ts
@@ -0,0 +1,9 @@
+import { createError, getRequestURL } from 'h3'
+
+export default defineEventHandler((event) => {
+  const pathname = getRequestURL(event).pathname
+  const enabled = process.env.NODE_ENV === 'production' || process.env.HAOBLOG_PWA_TEST === 'true'
+  if (!enabled && (pathname === '/sw.js' || pathname === '/manifest.webmanifest')) {
+    throw createError({ statusCode: 404, statusMessage: 'PWA is disabled outside production/test mode' })
+  }
+})
diff --git a/apps/web/server/routes/music-manifest.json.get.ts b/apps/web/server/routes/music-manifest.json.get.ts
new file mode 100644
index 0000000..47d7e2b
--- /dev/null
+++ b/apps/web/server/routes/music-manifest.json.get.ts
@@ -0,0 +1,46 @@
+import { setHeader } from 'h3'
+import { decodeMusicManifest, emptyMusicManifest, MUSIC_MANIFEST_MAX_BYTES } from '../../app/utils/musicManifest'
+
+const LOCAL_HOSTS = new Set(['localhost', '127.0.0.1', '::1'])
+
+function configuredManifestUrl() {
+  return String(process.env.HAOBLOG_MUSIC_MANIFEST_URL || '').trim()
+}
+
+function allowLocalhost() {
+  return process.env.NODE_ENV !== 'production' || process.env.HAOBLOG_PWA_TEST === 'true'
+}
+
+function isAllowedSource(value: string) {
+  try {
+    const url = new URL(value)
+    const localHttp = allowLocalhost()
+      && url.protocol === 'http:'
+      && LOCAL_HOSTS.has(url.hostname.toLowerCase())
+    return Boolean(url.host && !url.username && !url.password && !url.hash && (url.protocol === 'https:' || localHttp))
+  } catch {
+    return false
+  }
+}
+
+export default defineEventHandler(async (event) => {
+  setHeader(event, 'Cache-Control', 'no-store')
+  setHeader(event, 'X-Content-Type-Options', 'nosniff')
+  const source = configuredManifestUrl()
+  if (!source || !isAllowedSource(source)) return emptyMusicManifest()
+
+  try {
+    const response = await fetch(source, {
+      headers: { accept: 'application/json' },
+      redirect: 'error',
+      signal: AbortSignal.timeout(5000),
+    })
+    const declaredLength = Number(response.headers.get('content-length') || 0)
+    if (declaredLength > MUSIC_MANIFEST_MAX_BYTES) throw new Error('manifest-too-large')
+    if (!response.ok) throw new Error(`manifest-${response.status}`)
+    const bytes = await response.arrayBuffer()
+      return decodeMusicManifest(bytes, { allowLocalhost: allowLocalhost() })
+  } catch {
+    return emptyMusicManifest()
+  }
+})
diff --git a/apps/web/test/music-manifest.test.ts b/apps/web/test/music-manifest.test.ts
new file mode 100644
index 0000000..b12f6a3
--- /dev/null
+++ b/apps/web/test/music-manifest.test.ts
@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+import { decodeMusicManifest, MUSIC_MANIFEST_MAX_BYTES, validateMusicManifest } from '../app/utils/musicManifest'
+
+const track = {
+  id: 'night-01',
+  title: 'Night calibration',
+  artist: 'Hao',
+  audioUrl: 'https://cdn.example.test/night-01.mp3',
+  licenseName: 'CC BY 4.0',
+  licenseUrl: 'https://creativecommons.org/licenses/by/4.0/',
+  sourceUrl: 'https://source.example.test/night-01',
+}
+
+describe('music manifest protocol', () => {
+  it('accepts version 1 and preserves optional authorization links', () => {
+    expect(validateMusicManifest({ version: 1, tracks: [track] })).toEqual({ version: 1, tracks: [track] })
+  })
+
+  it('enforces version, track count and required fields', () => {
+    expect(() => validateMusicManifest({ version: 2, tracks: [] })).toThrow('版本必须为 1')
+    expect(() => validateMusicManifest({ version: 1, tracks: Array.from({ length: 21 }, (_, index) => ({ ...track, id: `track-${index}` })) })).toThrow('最多包含 20')
+    expect(() => validateMusicManifest({ version: 1, tracks: [{ ...track, licenseName: '' }] })).toThrow('缺少必填字段')
+  })
+
+  it('rejects non-HTTPS audio and unsafe authorization links', () => {
+    expect(() => validateMusicManifest({ version: 1, tracks: [{ ...track, audioUrl: 'http://cdn.example.test/audio.mp3' }] })).toThrow('HTTPS')
+    expect(() => validateMusicManifest({ version: 1, tracks: [{ ...track, licenseUrl: 'javascript:alert(1)' }] })).toThrow('licenseUrl')
+  })
+
+  it('allows localhost HTTP only for local tests', () => {
+    expect(validateMusicManifest({ version: 1, tracks: [{ ...track, audioUrl: 'http://localhost:4173/audio.mp3' }] }, { allowLocalhost: true }).tracks[0]?.audioUrl).toBe('http://localhost:4173/audio.mp3')
+    expect(() => validateMusicManifest({ version: 1, tracks: [{ ...track, audioUrl: 'http://localhost:4173/audio.mp3' }] })).toThrow('HTTPS')
+  })
+
+  it('rejects manifests larger than 64 KiB before parsing', () => {
+    const bytes = new Uint8Array(MUSIC_MANIFEST_MAX_BYTES + 1)
+    expect(() => decodeMusicManifest(bytes.buffer)).toThrow('64 KiB')
+  })
+})
diff --git a/apps/web/test/phase5-static-boundaries.test.ts b/apps/web/test/phase5-static-boundaries.test.ts
new file mode 100644
index 0000000..2eb09ca
--- /dev/null
+++ b/apps/web/test/phase5-static-boundaries.test.ts
@@ -0,0 +1,53 @@
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+import { describe, expect, it } from 'vitest'
+
+const app = resolve(import.meta.dirname, '../app')
+const publicDir = resolve(import.meta.dirname, '../public')
+
+describe('phase five static boundaries', () => {
+  it('keeps music and PWA bodies out of the article route and music behind interaction', () => {
+    const layout = readFileSync(resolve(app, 'layouts/default.vue'), 'utf8')
+    const article = readFileSync(resolve(app, 'pages/articles/[slug].vue'), 'utf8')
+    expect(layout).toContain("import('../components/music/SignalTape.client.vue')")
+    expect(article).not.toContain('SignalTape')
+    expect(article).not.toContain('preloadEmbeddedToolChunks')
+    expect(readFileSync(resolve(app, 'components/music/SignalTape.client.vue'), 'utf8')).toContain('preload="none"')
+  })
+
+  it('keeps PWA cache boundaries explicit and excludes API, Studio, articles, graph, comments and audio', () => {
+    const worker = readFileSync(resolve(publicDir, 'sw.js'), 'utf8')
+    expect(worker).toContain("url.pathname === '/tools'")
+    expect(worker).toContain("url.pathname.startsWith('/_nuxt/')")
+    expect(worker).toContain("url.pathname.startsWith('/workers/')")
+    expect(worker).not.toContain("url.pathname.startsWith('/api/')")
+    expect(worker).not.toContain("url.pathname.startsWith('/studio/')")
+    expect(worker).not.toContain("url.pathname.startsWith('/articles/')")
+    expect(worker).not.toContain('music-manifest')
+    expect(worker).not.toContain('.mp3')
+    expect(worker).toContain('PREPARE_TOOLS')
+    expect(worker).toContain('networkFirstToolPage')
+  })
+
+  it('keeps 404 enhancement dynamic and preserves generic error recovery', () => {
+    const error = readFileSync(resolve(app, 'error.vue'), 'utf8')
+    expect(error).toContain("import('./components/error/SignalRepair.client.vue')")
+    expect(error).toContain("window.innerWidth <= 360")
+    expect(error).toContain("pointer: coarse")
+    expect(error).toContain('prefers-reduced-motion')
+    expect(error).toContain('retry-button')
+    expect(error).toContain('!isNotFound')
+    expect(error).toContain('当前请求没有得到可用的观测响应，请稍后重试。')
+    expect(error).toContain('noindex,nofollow')
+  })
+
+  it('declares normal and maskable 192/512 install icons', () => {
+    const manifest = readFileSync(resolve(publicDir, 'manifest.webmanifest'), 'utf8')
+    expect(manifest).toContain('192x192')
+    expect(manifest).toContain('512x512')
+    expect(manifest).toContain('purpose": "maskable"')
+    for (const file of ['pwa-192.svg', 'pwa-512.svg', 'pwa-192-maskable.svg', 'pwa-512-maskable.svg']) {
+      expect(readFileSync(resolve(publicDir, file), 'utf8')).toContain('<svg')
+    }
+  })
+})
diff --git "a/docs/taget/\347\254\254\344\272\224\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md" "b/docs/taget/\347\254\254\344\272\224\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md"
index ff82bf7..b06e615 100644
--- "a/docs/taget/\347\254\254\344\272\224\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md"
+++ "b/docs/taget/\347\254\254\344\272\224\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md"
@@ -2,7 +2,7 @@
 
 ## 0. 阶段状态与适用范围
 
-本文件是阶段五的目标任务和实现记录。2026-08-23 的“阶段 5 迭代 1”已完成 S5-01 图谱契约与 Feature Flag、S5-02 知识星图；“阶段 5 迭代 2”已完成 S5-03 安全终端与主题、S5-04 首页三幕与 Three.js；S5-05～S5-09 仍待后续迭代实施。
+本文件是阶段五的目标任务和实现记录。2026-08-23 的“阶段 5 迭代 1”已完成 S5-01 图谱契约与 Feature Flag、S5-02 知识星图；“阶段 5 迭代 2”已完成 S5-03 安全终端与主题、S5-04 首页三幕与 Three.js；本轮“阶段 5 迭代 3”已完成 S5-05 音乐与频谱、S5-06 404 信号修复、S5-07 PWA 离线工具箱；S5-08～S5-09 仍待后续迭代实施。
 
 阶段五定位为“非 AI 体验与本地收口”：在阶段四已有的公开阅读、评论、工具和搜索基础上，补齐知识星图、终端导航、首页标志性动效、音乐与频谱、404 彩蛋、PWA 离线工具箱，以及重型效果的生命周期和降级边界。
 
@@ -118,21 +118,20 @@ interface KnowledgeGraphResponse {
 
 ~~~ts
 interface MusicManifest {
-  schemaVersion: 1
-  defaultTrackId: string | null
+  version: 1
   tracks: Array<{
     id: string
     title: string
-    artist: string | null
+    artist: string
     audioUrl: string
-    coverUrl: string | null
-    license: 'ORIGINAL' | 'CC_BY' | 'CC_BY_SA' | 'OTHER_AUTHORIZED'
-    attributionUrl: string | null
+    licenseName: string
+    licenseUrl?: string
+    sourceUrl?: string
   }>
 }
 ~~~
 
-服务端只信任配置的 HTTPS OSS/CDN 来源和允许的 host；客户端仍需校验 schema、URL 协议、条目数量和必填字段。建议最多 30 首；音频地址只在用户点击播放后才加载，默认不自动播放。每首曲目必须有授权说明或归属链接。
+清单固定为 UTF-8 JSON、最大 64 KiB、最多 20 首；每首曲目必须包含上述字段。Nuxt 服务端只读取 `HAOBLOG_MUSIC_MANIFEST_URL` 指向的受信任地址并返回校验后的清单，不代理音频二进制。音频、授权和来源地址只接受 HTTPS，local/dev 测试允许 localhost HTTP。音频地址只在用户点击播放后才加载，默认不自动播放。
 
 ### 4.4 Feature Flag
 
@@ -143,10 +142,10 @@ S5-01 已将 musicEnabled、threeDEnabled 写入站点设置并通过 GET /api/v
 | terminal | 开放 ⌘K/Ctrl+K 白名单终端 | false | 现有公开文章、搜索、工具接口 |
 | knowledgeGraph | 图谱 Canvas/Force 视图 | false | S5-01 图谱契约 |
 | homeScene | 首页第二幕 Three.js | false | knowledgeGraph 或静态首页数据 |
-| music | 全局播放器和清单 | false | 服务端 manifest |
-| spectrum | Web Audio 频谱/波形 | false | music、用户播放手势 |
-| signalRepair404 | 404 三步修复小游戏 | false | 本地组件 |
-| pwa | 工具箱 manifest、Service Worker 和离线缓存 | false | 工具页面 |
+| music | 全局播放器和清单 | false | 服务端 manifest；由现有 `musicEnabled` 控制 |
+| spectrum | Web Audio 频谱/波形 | false | music、用户播放手势和浏览器能力；继承 music 开关，不新增数据库列 |
+| signalRepair404 | 404 三步修复小游戏 | false | Nuxt 运行时开关、桌面能力门控 |
+| pwa | 工具箱 manifest、Service Worker 和离线缓存 | false | production build 或 `HAOBLOG_PWA_TEST=true`；工具页显式准备 |
 
 data-theme="night|blueprint" 是用户本地选择，不是远端 Feature Flag；必须使用 html data-theme 和 CSS Token。prefers-reduced-motion、Save-Data、触摸和设备能力属于运行时降级信号，不得被远端开关覆盖。AI 相关开关不在本阶段新增。
 
@@ -284,6 +283,8 @@ data-theme="night|blueprint" 是用户本地选择，不是远端 Feature Flag
 
 ### S5-05：音乐与频谱
 
+实际状态：已完成（2026-08-23，阶段 5 迭代 3）。
+
 | 属性 | 内容 |
 | --- | --- |
 | 优先级 | P1 |
@@ -296,6 +297,8 @@ data-theme="night|blueprint" 是用户本地选择，不是远端 Feature Flag
 
 非目标：不自动播放、不做上传和曲目 CRUD、不保存用户音频、不在服务端转码、不把 AudioContext 放进文章首屏，不把外部任意 URL 当作可信音频。
 
+实际实现：Nuxt `/music-manifest.json` 服务端路由按固定 `version=1` 协议校验 64 KiB/20 首/HTTPS/localhost 和授权字段；默认布局只在 music flag 开启时显示折叠式“信号磁带”，首次点击动态加载播放器。播放器不自动播放，跨公共路由保持，进入 Studio 卸载时暂停并释放 AudioContext、AnalyserNode、Canvas RAF 和事件；CORS/Web Audio/Canvas/清单失败保留普通播放或明确状态。
+
 验收标准：
 
 - 服务端只读取配置的 HTTPS manifest 来源，校验 schema、host、协议、授权字段和条目上限；源失败时播放器可隐藏或显示离线提示。
@@ -308,6 +311,8 @@ data-theme="night|blueprint" 是用户本地选择，不是远端 Feature Flag
 
 ### S5-06：404 信号修复
 
+实际状态：已完成（2026-08-23，阶段 5 迭代 3）。
+
 | 属性 | 内容 |
 | --- | --- |
 | 优先级 | P1 |
@@ -320,6 +325,8 @@ data-theme="night|blueprint" 是用户本地选择，不是远端 Feature Flag
 
 非目标：不使用 Three.js、Canvas 大场景、网络排行榜、登录、积分、远端存档或阻塞错误页离开。
 
+实际实现：error.vue 保持 SSR 搜索、文章、工具和首页恢复路径及 noindex,nofollow；仅真实 404 的普通桌面环境动态加载三段键盘可达电路游戏，最多三次尝试，360px/触摸/Save-Data/reduced-motion/关闭开关直接走搜索降级；非 404 使用通用错误与重试按钮。
+
 验收标准：
 
 - 错误页的状态码、标题、原因和可访问的返回路径不依赖游戏脚本。
@@ -331,6 +338,8 @@ data-theme="night|blueprint" 是用户本地选择，不是远端 Feature Flag
 
 ### S5-07：PWA 离线工具箱
 
+实际状态：已完成（2026-08-23，阶段 5 迭代 3）。
+
 | 属性 | 内容 |
 | --- | --- |
 | 优先级 | P1 |
@@ -341,6 +350,8 @@ data-theme="night|blueprint" 是用户本地选择，不是远端 Feature Flag
 
 目标：让公开工具箱在已访问并完成安装/缓存后可离线打开，JSON、Base64、URL、时间戳和正则工具仍在浏览器/Worker 内运行。
 
+实际实现：使用原生 `/manifest.webmanifest` 和 `/sw.js`，提供普通/maskable 192/512 图标；production 或明确测试模式才注册。工具页“准备离线工具”二次确认后才加载五个工具 chunk、Worker 资源和 `/tools` SSR 快照；缓存只允许 `/tools`、`/_nuxt/**` 和 `/workers/**`，就绪标记前不写入，API/Studio/文章/评论/图谱/音乐/外部资源/Range 请求均不缓存。`/tools` network-first，已准备的静态资源 cache-first；更新不 skipWaiting，激活清理旧版本缓存。
+
 非目标：不离线写入评论或文章，不缓存 API 响应、Cookie、Session、Studio、预览链接、完整文章正文、用户输入或第三方任意脚本，不实现后台同步。
 
 验收标准：
@@ -432,7 +443,7 @@ data-theme="night|blueprint" 是用户本地选择，不是远端 Feature Flag
 | 迭代 0 | S5-00 | 阶段准入、基线、任务文档和未执行项目清单 |
 | 迭代 1 | S5-01、S5-02 | 图谱契约、开关和静态/桌面图谱闭环 |
 | 迭代 2 | S5-03、S5-04 | 终端主题和首页三幕，含 Three.js 关闭回退 |
-| 迭代 3 | S5-05、S5-06、S5-07 | 音乐频谱、404 和工具箱最小离线能力 |
+| 迭代 3 | S5-05、S5-06、S5-07 | 音乐频谱、404 和工具箱最小离线能力（已完成） |
 | 迭代 4 | S5-08、S5-09 | 生命周期、性能降级、综合验收和文档收口 |
 
 并行规则：S5-03～S5-07 可以并行，但任何模块进入综合验收前都必须实现对应的关闭开关、无 JS/能力失败回退和卸载清理；没有这些路径，不得以“主路径可用”提前完成。
@@ -451,4 +462,4 @@ data-theme="night|blueprint" 是用户本地选择，不是远端 Feature Flag
 - 文章初始 JS 不超过 180KB gzip，既有 API/Web/OpenAPI/Compose 基线不回归；阶段六的 30 分钟压力测试和生产资源验收仍单独记录。
 - 本地验收通过不等于真实 SMTP、真实 OSS、域名/备案、部署、远端 CI/生产或 AI/RAG 通过；这些项目在报告中继续明确列为未执行或后续阶段。
 
-本迭代完成定义：S5-03/S5-04 业务代码、终端解析器单测、阶段五 Playwright 场景、Three 动态边界和资源释放证据已落盘；Three 相关最大动态 chunk 为 183243 bytes gzip，文章静态闭包为 66350 bytes gzip。阶段三公共站 E2E 5/5、阶段四公共站 E2E 6/6、阶段五 E2E 6/6 通过。未新增服务、数据库迁移或 OpenAPI 修改；未提交、推送、创建 PR 或部署。S5-05～S5-09 继续保留未开始状态。
+本迭代完成定义：S5-05～S5-07 业务代码、清单协议校验、播放器/频谱生命周期、404 降级、Manifest/Service Worker 缓存边界、工具离线准备入口及阶段五 Playwright 场景已落盘；未新增服务、数据库迁移或 OpenAPI 修改，也未添加音频二进制。阶段五综合 S5-08/S5-09、30 分钟压测、真实 OSS/CDN 音乐来源、远端 CI、部署和生产验收仍未执行。未提交、推送、创建 PR 或部署。
diff --git "a/docs/taget/\351\230\266\346\256\265\344\272\224\345\207\206\345\205\245\346\270\205\345\215\225.md" "b/docs/taget/\351\230\266\346\256\265\344\272\224\345\207\206\345\205\245\346\270\205\345\215\225.md"
index 8fe4b93..e8e99f5 100644
--- "a/docs/taget/\351\230\266\346\256\265\344\272\224\345\207\206\345\205\245\346\270\205\345\215\225.md"
+++ "b/docs/taget/\351\230\266\346\256\265\344\272\224\345\207\206\345\205\245\346\270\205\345\215\225.md"
@@ -2,10 +2,10 @@
 
 ## 0. 本轮结论
 
-本清单对应“阶段 5 迭代 2：S5-03 安全终端与主题 + S5-04 首页三幕和 Three.js”。本轮在已完成 S5-01、S5-02 的基础上完成 S5-03、S5-04；S5-05～S5-09 不提前勾选。
+本清单对应“阶段 5 迭代 3：S5-05 音乐与频谱 + S5-06 404 信号修复 + S5-07 PWA 离线工具箱”。本轮在已完成 S5-01～S5-04 的基础上完成 S5-05～S5-07；S5-08～S5-09 不提前勾选。
 
 - 本轮文档：docs/taget/第五阶段目标任务.md、本文件。
-- 已有 V16 站点体验开关、/api/v1/public/garden、OpenAPI 契约、生成客户端、Canvas 图谱及最小 d3-force 依赖；本轮新增原生 dialog 终端、主题早期恢复、首页三幕和按需 three@0.185.1；未新增服务或外部资源。
+- 已有 V16 站点体验开关、/api/v1/public/garden、OpenAPI 契约、生成客户端、Canvas 图谱及最小 d3-force 依赖；本轮新增 Nuxt 清单校验、动态信号磁带、404 动态游戏、原生 Manifest/Service Worker 和离线准备入口；未新增服务、数据库迁移、OpenAPI 字段或音频二进制。
 - 未提交、推送、创建 PR、部署或修改云资源。
 - 阶段四文档在当前工作树中已经是删除状态；本轮未恢复，阶段四基线从提交 f0bfdac 读取。
 
@@ -117,9 +117,12 @@ git diff --check
 - [x] S5-02 知识星图：公开快照图谱、确定性 200/600 裁剪、ETag/60 秒共享缓存、SSR 时间线、桌面 d3-force Canvas、键盘预览、降级和 `/tools?tool=` 定位已完成。
 - [x] S5-03 安全终端与主题：Dock ⌘K/Ctrl+K 动态原生 dialog、白名单解析、20 条公开结果上限、50 条会话历史、焦点/键盘恢复、ask 降级、night/blueprint 主题恢复/持久化/五连击已完成。
 - [x] S5-04 首页三幕与 Three.js：首幕和近期日志 SSR、第二幕静态降级、threeDEnabled/Save-Data/reduced-motion/移动/粗指针/WebGL/视口门控、InstancedMesh + LineSegments、离开/隐藏暂停和卸载释放已完成。
-- [ ] S5-05～S5-09：按计划保留未开始状态。
+- [x] S5-05 音乐与频谱：version=1、64 KiB/20 首、HTTPS/授权字段校验，首次点击动态播放器，普通音频与 Web Audio/Canvas 降级，公共路由保持和 Studio 释放。
+- [x] S5-06 404 信号修复：404 桌面三段键盘游戏、三次尝试、读屏播报，移动/触摸/Save-Data/reduced-motion 降级，非 404 通用错误与重试。
+- [x] S5-07 PWA 离线工具箱：production/test 注册、显式二次确认、五个工具 chunk/SSR 快照缓存、network-first/cache-first、更新等待和缓存边界。
+- [ ] S5-08～S5-09：按计划保留未开始状态。
 
-### 6.2 迭代 2 实际验证
+### 6.2 迭代 2 历史基线
 
 | 命令/证据 | 结果 | 状态 |
 | --- | --- | --- |
@@ -133,6 +136,24 @@ git diff --check
 | `corepack pnpm --dir apps/web exec playwright test stage4.spec.ts` | 阶段四公共站 Chromium 场景 6/6 通过；评论正文选择器收紧为 textbox 语义 | 通过 |
 | `git diff --check` | 无空白错误；仅有 Windows 工作树换行格式提示 | 通过 |
 
+### 6.3 迭代 3 实际验证（2026-08-24）
+
+| 命令/证据 | 结果 | 状态 |
+| --- | --- | --- |
+| `cd apps/api; .\\mvnw.cmd -DskipITs verify` | 83 个 API 单测通过；Failsafe 按本轮要求跳过 | 通过 |
+| `corepack pnpm --dir apps/web typecheck` | `nuxt prepare`、`vue-tsc -b --noEmit` 完成 | 通过 |
+| `corepack pnpm --dir apps/web test` | 23 个测试文件，97/97；含清单协议、缓存边界、错误页和懒加载静态测试 | 通过 |
+| `corepack pnpm --dir apps/web build` | 默认 `api:8080` 生产配置下 Nuxt client/server/Nitro build complete；无临时音乐清单 | 通过；保留现有依赖 deprecation/Vite 大 chunk 警告 |
+| `corepack pnpm web:budget` | 文章初始静态闭包 18 个 chunk，67168 bytes gzip；Mermaid 仍在异步 chunk | 通过 |
+| `stage5.spec.ts`（生产构建、offline context） | 9/9；含音乐关闭/首次点击、404 键盘/移动降级、PWA 显式准备/断网重开/缓存排除 | 通过 |
+| `stage2.spec.ts` | 2/3 通过；定时发布用例及单独重试均在 20 秒后保持 404 | 环境风险，未归因本轮改动 |
+| `stage3.spec.ts` | 5/5 公共站关键 E2E 通过 | 通过 |
+| `stage4.spec.ts` | 6/6 评论、工具、搜索、Studio 合约 E2E 通过 | 通过 |
+| `docker compose ... compose.dev.yml config` | Compose 配置成功解析 | 通过 |
+| `docker compose ... compose.prod.yml config` | Compose 配置成功解析 | 通过 |
+| `corepack pnpm compose:verify` | `Compose resource and health boundaries passed` | 通过 |
+| `git diff --check` | 无空白错误；仅有 Windows 工作树换行格式提示 | 通过 |
+
 开始 S5-01 业务实现前，必须满足：
 
 - 本文件和 docs/taget/第五阶段目标任务.md 已存在且描述与用户锁定决策一致。
@@ -152,7 +173,7 @@ git diff --check
 - 阶段六的 30 分钟 2GB 压测、持续 Swap、OOM、容器资源运行态和回滚演练。
 - AI 基础、SSE、RAG、Embedding、模型供应商、费用和 AI 安全评测。
 
-剩余风险：图谱/Three.js/音频分析会增加浏览器内存和首屏后交互成本；低端移动设备和 Safari 的 WebGL/Web Audio 行为需在 S5-08 实机或等价浏览器路径验证；PWA 更新和缓存边界一旦配置错误可能持有旧资源或拦截 API；音乐授权和第三方 CDN 可用性需要真实来源确认；阶段四文档当前不在工作树，后续引用应保持提交来源可追溯。
+剩余风险：图谱/Three.js/音频分析会增加浏览器内存和首屏后交互成本；低端移动设备和 Safari 的 WebGL/Web Audio 行为需在 S5-08 实机或等价浏览器路径验证；真实音乐授权、第三方 CDN CORS/可用性和 Service Worker 更新接管仍需真实来源/浏览器矩阵确认；阶段四文档当前不在工作树，后续引用应保持提交来源可追溯。阶段二定时发布关键 E2E 在本地现有环境持续返回 404，需另行排查。
 
 ## 八、本轮完成定义
 
@@ -161,4 +182,4 @@ git diff --check
 - [x] 记录 Git 分支、HEAD、最近提交、用户未提交修改、阶段四删除状态和未跟踪文件检查。
 - [x] 创建阶段五目标任务和本准入清单。
 - [x] 完成本节“基线实际执行结果”的所有命令并逐项记录。
-- [ ] 阶段五全部业务功能完成；S5-03/S5-04 已完成，S5-05～S5-09 本轮明确不做。
+- [ ] 阶段五全部业务功能完成；S5-01～S5-07 已完成，S5-08/S5-09 本轮明确不做。
diff --git "a/docs/\346\234\254\345\234\260\345\220\257\345\212\250\346\214\207\345\215\227.md" "b/docs/\346\234\254\345\234\260\345\220\257\345\212\250\346\214\207\345\215\227.md"
index 331bc2a..f308b15 100644
--- "a/docs/\346\234\254\345\234\260\345\220\257\345\212\250\346\214\207\345\215\227.md"
+++ "b/docs/\346\234\254\345\234\260\345\220\257\345\212\250\346\214\207\345\215\227.md"
@@ -261,6 +261,17 @@ corepack pnpm --dir apps/web build
 corepack pnpm web:budget
 ```
 
+阶段五体验验收：音乐默认关闭；需要联调时在未提交的环境文件中设置 `HAOBLOG_MUSIC_MANIFEST_URL`，生产必须使用绝对 HTTPS，local/dev 测试可使用 localhost。清单由 Nuxt `/music-manifest.json` 校验后返回，音频不经过 Spring Boot，也不要把未经授权的音频二进制加入仓库。
+
+PWA 只在 production build 或明确测试模式注册 Service Worker。需要在开发服务器验证时，可使用任务级环境变量启动：
+
+```powershell
+$env:HAOBLOG_PWA_TEST = 'true'
+corepack pnpm --dir apps/web dev
+```
+
+进入 `/tools` 后点击“准备离线工具”并二次确认，才会加载五个内嵌工具 chunk 和写入离线缓存。Save-Data 不会自动注册，但仍允许该显式操作；缓存不包含 `/api/**`、`/studio/**`、文章、评论、图谱、音乐清单、音频、外部资源或 Range 请求。
+
 ### API
 
 Windows PowerShell：
diff --git a/infra/compose/compose.dev.yml b/infra/compose/compose.dev.yml
index 5f4597a..de6070d 100644
--- a/infra/compose/compose.dev.yml
+++ b/infra/compose/compose.dev.yml
@@ -73,6 +73,7 @@ services:
     restart: unless-stopped
     environment:
       NUXT_API_BASE_URL: http://api:8080
+      HAOBLOG_MUSIC_MANIFEST_URL: ${HAOBLOG_MUSIC_MANIFEST_URL:-}
       NODE_OPTIONS: --max-old-space-size=192
     ports:
       - "127.0.0.1:${WEB_PORT:-3000}:3000"
diff --git a/infra/compose/compose.prod.yml b/infra/compose/compose.prod.yml
index 6182eb2..23278c2 100644
--- a/infra/compose/compose.prod.yml
+++ b/infra/compose/compose.prod.yml
@@ -34,6 +34,7 @@ services:
     restart: unless-stopped
     environment:
       NUXT_API_BASE_URL: http://api:8080
+      HAOBLOG_MUSIC_MANIFEST_URL: ${HAOBLOG_MUSIC_MANIFEST_URL:-}
       NODE_OPTIONS: --max-old-space-size=192
     depends_on:
       api:

From 89b25d75d62876ed80b0d6db322166e8e68d565c Mon Sep 17 00:00:00 2001
From: DDT <––1786035110@stu.gpnu.edu.cn>
Date: Mon, 24 Aug 2026 19:45:04 +0800
Subject: [PATCH 6/7] =?UTF-8?q?=E5=AE=8C=E6=88=90=E9=98=B6=E6=AE=B5?=
 =?UTF-8?q?=E4=BA=94=E6=80=A7=E8=83=BD=E9=99=8D=E7=BA=A7=E4=B8=8E=E7=BB=BC?=
 =?UTF-8?q?=E5=90=88=E9=AA=8C=E6=94=B6=E6=94=B6=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore                                    |   1 +
 AGENTS.md                                     |   5 +-
 README.md                                     |  25 +-
 .../app/components/articles/SafeMarkdown.vue  |   9 +-
 apps/web/e2e/stage5.spec.ts                   | 218 ++++++++
 apps/web/lighthouserc.cjs                     |   9 +-
 .../scripts/check-article-client-bundle.mjs   | 107 +++-
 .../web/test/phase5-static-boundaries.test.ts |  23 +
 apps/web/test/safe-markdown.test.ts           |   8 +-
 ...00\345\217\221\350\256\241\345\210\222.md" |  51 +-
 ...56\346\240\207\344\273\273\345\212\241.md" | 465 ------------------
 ...06\345\205\245\346\270\205\345\215\225.md" | 185 -------
 ...57\345\212\250\346\214\207\345\215\227.md" |  53 +-
 ...56\346\240\207\344\273\273\345\212\241.md" |  97 ----
 ...06\345\205\245\346\270\205\345\215\225.md" |  82 ---
 15 files changed, 444 insertions(+), 894 deletions(-)
 delete mode 100644 "docs/taget/\347\254\254\344\272\224\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md"
 delete mode 100644 "docs/taget/\351\230\266\346\256\265\344\272\224\345\207\206\345\205\245\346\270\205\345\215\225.md"
 delete mode 100644 "docs/\347\254\254\345\233\233\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md"
 delete mode 100644 "docs/\351\230\266\346\256\265\345\233\233\345\207\206\345\205\245\346\270\205\345\215\225.md"

diff --git a/.gitignore b/.gitignore
index 9988a4f..5a2d384 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 # Java / Maven
 target/
+docs/target/
 .mvn/wrapper/maven-wrapper.jar
 
 # Node / Nuxt
diff --git a/AGENTS.md b/AGENTS.md
index dc9e33a..1cba691 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -9,6 +9,7 @@ Build HaoBlog as a low-cost developer blog and digital garden using Java and Vue
 - Current user request defines the task scope.
 - `docs/HaoBlog 完整开发计划.md` defines architecture, modules, resource budgets, APIs, data and milestones.
 - `docs/HaoBlog-design-language.md` defines public-site UI/UX, tokens, layout, motion and accessibility.
+- `docs/target`: local/private development target plans and admission checklists. These files are not public and must not be committed or pushed; do not create the typo directory `docs/taget`.
 - For public-site design work, use the repo skill at `.agents/skills/haoblog-design/SKILL.md` when available.
 - If sources conflict, report the conflict and propose the smallest safe resolution. Do not silently override a locked decision.
 
@@ -19,7 +20,7 @@ Build HaoBlog as a low-cost developer blog and digital garden using Java and Vue
 - `packages/api-client`: reserved package for generated OpenAPI TypeScript types/client.
 - `infra/compose/compose.dev.yml`: local PostgreSQL + pgvector development Compose configuration.
 - `.github/workflows/ci.yml`: API, Web and Compose configuration CI.
-- `docs`: architecture and design documents.
+- `docs`: architecture, design and general project documents; private stage target plans/checklists stay under ignored `docs/target` and are never part of the public repository.
 
 Do not create additional services unless the user changes the architecture.
 
@@ -80,7 +81,7 @@ The current repository uses one root pnpm workspace and one Maven application. N
 - Web production build: `pnpm --dir apps/web build`
 - Full Chromium E2E: `pnpm --dir apps/web e2e`
 - Article client bundle budget: `pnpm web:budget`
-- Lighthouse with an existing server: set `LHCI_EXISTING_SERVER=true`, `LHCI_BASE_URL=http://localhost` and `LHCI_ARTICLE_PATH` to `/articles/s3-08-advanced-markdown` or `/tools`, then run `pnpm web:lighthouse`; on Windows also use a task-local `TEMP`/`TMP` directory to avoid Chrome cleanup EPERM
+- Lighthouse with an existing server: set `LHCI_EXISTING_SERVER=true`, `LHCI_BASE_URL=http://localhost` and run `pnpm web:lighthouse` serially with `LHCI_ARTICLE_PATH` set to `/`, `/garden`, `/tools` or `/articles/s3-08-advanced-markdown`; set `LHCI_NOINDEX=true` only for a noindex/404 audit, and use `LHCI_NUMBER_OF_RUNS`/`LHCI_CHROME_PORT` only for isolated local runner control; on Windows also use a task-local `TEMP`/`TMP` directory and never share a still-running Chrome instance between routes
 - Compose validation using placeholder environment values: `docker compose --env-file .env.example -f infra/compose/compose.dev.yml config`
 - Production Compose validation: `docker compose --env-file infra/compose/.env.ci.example -f infra/compose/compose.prod.yml config`
 - Compose resource and health-boundary verification: `pnpm compose:verify`
diff --git a/README.md b/README.md
index 2226014..aea68ff 100644
--- a/README.md
+++ b/README.md
@@ -2,4 +2,27 @@
 
 HaoBlog 是一个面向开发者的低成本个人博客与数字花园，采用 Java 21、Spring Boot、Nuxt 4、Vue 3 和 PostgreSQL/pgvector 构建。项目使用模块化单体架构，公开站点以服务端渲染为核心，管理后台通过 `/studio` 提供内容运营能力。
 
-项目以“极夜观测站”为设计主题，关注长文阅读、内容可发现性和低性能主机上的稳定运行。它提供文章、中文搜索、评论、工具箱、RSS、Sitemap、目录和结构化数据等能力，并通过安全 Markdown、资源边界、无 JavaScript、Save-Data 与 reduced-motion 路径保持可访问和可持续的阅读体验。
+项目以“极夜观测站”为设计主题，关注长文阅读、内容可发现性和低性能主机上的稳定运行。它提供文章、中文搜索、评论、工具箱、RSS、Sitemap、目录、结构化数据、知识星图、安全终端、双主题、可关闭的首页 Three.js、音乐频谱、404 信号修复和显式准备的 PWA 离线工具箱。公开内容保持 SSR；无 JavaScript、Save-Data、reduced-motion、触摸和重型能力失败时均保留可读路径。
+
+## 本地验证
+
+仓库要求 Java 21、Node.js 24.x、Corepack 管理的 pnpm 11.16.0，以及包含 Compose 的 Docker Desktop。常用检查从仓库根目录执行：
+
+```powershell
+Push-Location apps/api
+.\mvnw.cmd -DskipITs verify
+.\mvnw.cmd failsafe:integration-test failsafe:verify
+Pop-Location
+
+corepack pnpm --dir apps/web typecheck
+corepack pnpm --dir apps/web test
+corepack pnpm --dir apps/web build
+corepack pnpm --filter @haoblog/api-client generate
+corepack pnpm --filter @haoblog/api-client check
+corepack pnpm web:budget
+corepack pnpm compose:verify
+```
+
+阶段五音乐默认关闭。`HAOBLOG_MUSIC_MANIFEST_URL` 在生产环境必须是绝对 HTTPS 地址；音频不经过 Spring Boot。PWA 只在 production build 或显式测试模式注册，进入 `/tools` 后还需点击“准备离线工具”并二次确认；缓存不包含 API、Studio、文章、评论、图谱、音乐或外部资源。
+
+完整开发环境、独立生产 Compose 验收、Lighthouse 串行路由和清理命令见 [本地启动指南](docs/本地启动指南.md)。阶段目标任务和准入清单属于本地私有验收资料，不纳入公开仓库。本地收口不等于远端 CI、真实 OSS/CDN 与 CORS、真实域名/HTTPS 安装、部署备案或阶段六 30 分钟 2GB 压测通过。
diff --git a/apps/web/app/components/articles/SafeMarkdown.vue b/apps/web/app/components/articles/SafeMarkdown.vue
index 568fbf1..4bdf2d0 100644
--- a/apps/web/app/components/articles/SafeMarkdown.vue
+++ b/apps/web/app/components/articles/SafeMarkdown.vue
@@ -58,7 +58,14 @@ function inlineNodes(value: string): VNode[] {
     const image = match[1] === '!'
     const label = match[2] ?? ''
     const href = match[3] ?? ''
-    if (image && /^https:\/\//i.test(href)) nodes.push(h('img', { src: href, alt: label, loading: 'lazy', decoding: 'async' }))
+    if (image && /^https:\/\//i.test(href)) nodes.push(h('img', {
+      src: href,
+      alt: label,
+      width: 1200,
+      height: 630,
+      loading: 'lazy',
+      decoding: 'async',
+    }))
     else if (!image && /^(https?:\/\/|mailto:)/i.test(href)) nodes.push(h('a', { href, rel: 'noopener noreferrer', target: '_blank' }, label))
     else nodes.push(h('span', `${image ? '!' : ''}[${label}](${href})`))
     cursor = start + match[0].length
diff --git a/apps/web/e2e/stage5.spec.ts b/apps/web/e2e/stage5.spec.ts
index 8f405aa..c3ff705 100644
--- a/apps/web/e2e/stage5.spec.ts
+++ b/apps/web/e2e/stage5.spec.ts
@@ -1,5 +1,14 @@
 import { expect, test, type APIRequestContext } from '@playwright/test'
 
+async function navigateInApp(page: import('@playwright/test').Page, path: string) {
+  await page.evaluate(async target => {
+    const useNuxtApp = (window as typeof window & { useNuxtApp?: () => { $router: { push: (value: string) => Promise<unknown> } } }).useNuxtApp
+    if (!useNuxtApp) throw new Error('Nuxt app is unavailable.')
+    await useNuxtApp().$router.push(target)
+  }, path)
+  await page.waitForURL(url => url.pathname === path)
+}
+
 test.describe('S5-01/S5-02 knowledge garden', () => {
   test('keeps the garden readable in SSR, no-JS, 360px, Save-Data and reduced-motion paths', async ({ page, browser }) => {
     const ssr = await page.request.get('/garden')
@@ -267,6 +276,7 @@ test.describe('S5-05 music and S5-06 signal repair', () => {
     const notFound = await page.goto('/s5-06-missing-signal')
     expect(notFound?.status()).toBe(404)
     await expect(page.getByRole('heading', { name: /页面未找到/ })).toBeVisible()
+    await expect(page.locator('meta[name="robots"]')).toHaveAttribute('content', 'noindex,nofollow')
     await expect(page.getByRole('searchbox', { name: '搜索文章' })).toBeVisible()
     await expect(page.getByRole('link', { name: '文章观测日志' })).toHaveAttribute('href', '/articles')
     await expect(page.getByRole('link', { name: '公开工具箱' })).toHaveAttribute('href', '/tools')
@@ -312,6 +322,214 @@ test.describe('S5-05 music and S5-06 signal repair', () => {
   })
 })
 
+test.describe('S5-08 performance and lifecycle closure', () => {
+  test('keeps 360/768/1280/1600 layouts readable and handles Canvas, WebGL and Service Worker failures', async ({ page, browser }) => {
+    for (const width of [360, 768, 1280, 1600]) {
+      await page.setViewportSize({ width, height: 900 })
+      for (const path of ['/', '/garden']) {
+        await page.goto(path)
+        await expect(page.locator('h1')).toBeVisible()
+        expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width)
+      }
+    }
+
+    const canvasFailure = await browser.newContext({ baseURL: process.env.HAOBLOG_BASE_URL || 'http://127.0.0.1' })
+    await canvasFailure.addInitScript(() => {
+      const original = HTMLCanvasElement.prototype.getContext
+      HTMLCanvasElement.prototype.getContext = function (type: string, ...args: unknown[]) {
+        if (type === '2d') return null
+        return original.call(this, type, ...args as [])
+      } as typeof HTMLCanvasElement.prototype.getContext
+    })
+    const canvasPage = await canvasFailure.newPage()
+    await canvasPage.setViewportSize({ width: 1280, height: 900 })
+    await canvasPage.goto('/garden')
+    await expect(canvasPage.locator('.garden-canvas-panel')).toHaveCount(0)
+    await expect(canvasPage.getByRole('heading', { name: '可读的知识时间线' })).toBeVisible()
+    await canvasFailure.close()
+
+    await setThreeDFlag(page.request, true)
+    try {
+      const webglFailure = await browser.newContext({ baseURL: process.env.HAOBLOG_BASE_URL || 'http://127.0.0.1' })
+      await webglFailure.addInitScript(() => {
+        const original = HTMLCanvasElement.prototype.getContext
+        HTMLCanvasElement.prototype.getContext = function (type: string, ...args: unknown[]) {
+          if (/^webgl/.test(type)) return null
+          return original.call(this, type, ...args as [])
+        } as typeof HTMLCanvasElement.prototype.getContext
+      })
+      const webglPage = await webglFailure.newPage()
+      await webglPage.setViewportSize({ width: 1280, height: 900 })
+      const heavyRequests: string[] = []
+      webglPage.on('request', request => {
+        if (/HomeThreeScene|C5rh5wLt2|\/public\/garden/i.test(request.url())) heavyRequests.push(request.url())
+      })
+      await webglPage.goto('/')
+      await webglPage.locator('#starmap-scene').scrollIntoViewIfNeeded()
+      await expect(webglPage.locator('.home-starmap-status')).toContainText('动态星图不可用')
+      expect(heavyRequests).toEqual([])
+      await webglFailure.close()
+    } finally {
+      await setThreeDFlag(page.request, false)
+    }
+
+    const swFailure = await browser.newContext({
+      baseURL: process.env.HAOBLOG_BASE_URL || 'http://127.0.0.1',
+      serviceWorkers: 'block',
+    })
+    const swPage = await swFailure.newPage()
+    await swPage.goto('/tools')
+    await swPage.getByRole('button', { name: '准备离线工具' }).click()
+    await swPage.getByRole('button', { name: '确认准备' }).click()
+    await expect(swPage.getByText(/Service Worker 暂时不可用|离线工具准备失败/)).toBeVisible({ timeout: 20_000 })
+    await expect(swPage.getByRole('heading', { name: '工具目录' })).toBeVisible()
+    await swFailure.close()
+  })
+
+  test('does not accumulate Canvas, RAF or global listeners across home, garden and Studio routes', async ({ page }) => {
+    await page.addInitScript(() => {
+      const originalRequest = window.requestAnimationFrame.bind(window)
+      const originalCancel = window.cancelAnimationFrame.bind(window)
+      const pending = new Set<number>()
+      window.requestAnimationFrame = callback => {
+        let id = 0
+        id = originalRequest(time => {
+          pending.delete(id)
+          callback(time)
+        })
+        pending.add(id)
+        return id
+      }
+      window.cancelAnimationFrame = id => {
+        pending.delete(id)
+        originalCancel(id)
+      }
+
+      const records: Array<{ target: EventTarget; type: string; listener: EventListenerOrEventListenerObject; capture: boolean }> = []
+      const originalAdd = EventTarget.prototype.addEventListener
+      const originalRemove = EventTarget.prototype.removeEventListener
+      const capture = (options?: boolean | AddEventListenerOptions) => typeof options === 'boolean' ? options : Boolean(options?.capture)
+      EventTarget.prototype.addEventListener = function (type, listener, options) {
+        if ((this === window || this === document) && listener && !records.some(record => record.target === this && record.type === type && record.listener === listener && record.capture === capture(options))) {
+          records.push({ target: this, type, listener, capture: capture(options) })
+        }
+        return originalAdd.call(this, type, listener, options)
+      }
+      EventTarget.prototype.removeEventListener = function (type, listener, options) {
+        const index = records.findIndex(record => record.target === this && record.type === type && record.listener === listener && record.capture === capture(options))
+        if (index >= 0) records.splice(index, 1)
+        return originalRemove.call(this, type, listener, options)
+      }
+      Object.defineProperty(window, '__s5Lifecycle', {
+        value: { snapshot: () => ({ raf: pending.size, listeners: records.length }) },
+      })
+    })
+
+    await setThreeDFlag(page.request, true)
+    try {
+      await page.setViewportSize({ width: 1280, height: 900 })
+      await page.goto('/articles')
+      const snapshot = () => page.evaluate(() => (window as typeof window & { __s5Lifecycle: { snapshot: () => { raf: number; listeners: number } } }).__s5Lifecycle.snapshot())
+      await expect.poll(async () => (await snapshot()).raf).toBe(0)
+      await navigateInApp(page, '/')
+      await page.locator('#starmap-scene').scrollIntoViewIfNeeded()
+      await page.waitForTimeout(300)
+      await navigateInApp(page, '/garden')
+      await page.waitForTimeout(300)
+      await navigateInApp(page, '/studio')
+      await navigateInApp(page, '/articles')
+      await expect(page.locator('canvas')).toHaveCount(0)
+      await expect.poll(async () => (await snapshot()).raf).toBe(0)
+      const baseline = await snapshot()
+
+      for (let index = 0; index < 3; index += 1) {
+        await navigateInApp(page, '/')
+        await page.locator('#starmap-scene').scrollIntoViewIfNeeded()
+        await page.waitForTimeout(300)
+        await navigateInApp(page, '/garden')
+        await page.waitForTimeout(300)
+        await navigateInApp(page, '/studio')
+        await navigateInApp(page, '/articles')
+        await expect(page.locator('canvas')).toHaveCount(0)
+        await expect.poll(async () => (await snapshot()).raf).toBe(0)
+        expect((await snapshot()).listeners).toBeLessThanOrEqual(baseline.listeners)
+      }
+    } finally {
+      await setThreeDFlag(page.request, false)
+    }
+  })
+
+  test('closes AudioContext in Studio and keeps playback usable when AudioContext fails', async ({ page, browser }) => {
+    test.skip(process.env.HAOBLOG_MUSIC_TEST !== 'true', '需要阶段五专用音乐清单配置。')
+    await setMusicFlag(page.request, true)
+    const manifest = {
+      version: 1,
+      tracks: [{
+        id: 'acceptance-signal',
+        title: 'Acceptance Signal',
+        artist: 'HaoBlog Test',
+        audioUrl: 'https://media.example.test/acceptance.mp3',
+        licenseName: 'Test fixture',
+      }],
+    }
+    try {
+      await page.route('**/music-manifest.json', route => route.fulfill({ json: manifest }))
+      await page.route('https://media.example.test/**', route => route.fulfill({ contentType: 'audio/mpeg', body: '' }))
+      await page.addInitScript(() => {
+        const state = { created: 0, closed: 0 }
+        class FakeAnalyser {
+          fftSize = 64
+          smoothingTimeConstant = 0
+          frequencyBinCount = 32
+          connect() {}
+          disconnect() {}
+          getByteFrequencyData(values: Uint8Array) { values.fill(0) }
+        }
+        class FakeAudioContext {
+          state = 'running'
+          destination = {}
+          constructor() { state.created += 1 }
+          createMediaElementSource() { return { connect() {}, disconnect() {} } }
+          createAnalyser() { return new FakeAnalyser() }
+          resume() { return Promise.resolve() }
+          close() { state.closed += 1; return Promise.resolve() }
+        }
+        Object.defineProperty(window, 'AnalyserNode', { configurable: true, value: FakeAnalyser })
+        Object.defineProperty(window, 'AudioContext', { configurable: true, value: FakeAudioContext })
+        Object.defineProperty(window, '__s5Audio', { value: state })
+        HTMLMediaElement.prototype.play = function () { this.dispatchEvent(new Event('play')); return Promise.resolve() }
+        HTMLMediaElement.prototype.pause = function () { this.dispatchEvent(new Event('pause')) }
+      })
+      await page.goto('/')
+      await page.getByRole('button', { name: /SIGNAL TAPE/ }).click()
+      await page.getByRole('button', { name: '开始播放' }).click()
+      await expect.poll(() => page.evaluate(() => (window as typeof window & { __s5Audio: { created: number } }).__s5Audio.created)).toBe(1)
+      await navigateInApp(page, '/studio')
+      await expect.poll(() => page.evaluate(() => (window as typeof window & { __s5Audio: { closed: number } }).__s5Audio.closed)).toBe(1)
+
+      const audioFailure = await browser.newContext({ baseURL: process.env.HAOBLOG_BASE_URL || 'http://127.0.0.1' })
+      await audioFailure.addInitScript(() => {
+        class FakeAnalyser {}
+        Object.defineProperty(window, 'AnalyserNode', { configurable: true, value: FakeAnalyser })
+        Object.defineProperty(window, 'AudioContext', { configurable: true, value: class { constructor() { throw new Error('blocked') } } })
+        HTMLMediaElement.prototype.play = function () { this.dispatchEvent(new Event('play')); return Promise.resolve() }
+        HTMLMediaElement.prototype.pause = function () { this.dispatchEvent(new Event('pause')) }
+      })
+      const audioFailurePage = await audioFailure.newPage()
+      await audioFailurePage.route('**/music-manifest.json', route => route.fulfill({ json: manifest }))
+      await audioFailurePage.route('https://media.example.test/**', route => route.fulfill({ contentType: 'audio/mpeg', body: '' }))
+      await audioFailurePage.goto('/')
+      await audioFailurePage.getByRole('button', { name: /SIGNAL TAPE/ }).click()
+      await audioFailurePage.getByRole('button', { name: '开始播放' }).click()
+      await expect(audioFailurePage.getByText('频谱接入失败，已保留普通播放。')).toBeVisible()
+      await expect(audioFailurePage.getByRole('button', { name: '暂停播放' })).toBeVisible()
+      await audioFailure.close()
+    } finally {
+      await setMusicFlag(page.request, false)
+    }
+  })
+})
+
 test.describe('S5-07 PWA offline tools', () => {
   test('registers only in the production/test path and prepares an explicit cache boundary', async ({ page }) => {
     const manifest = await page.request.get('/manifest.webmanifest')
diff --git a/apps/web/lighthouserc.cjs b/apps/web/lighthouserc.cjs
index 335d249..846f508 100644
--- a/apps/web/lighthouserc.cjs
+++ b/apps/web/lighthouserc.cjs
@@ -2,6 +2,9 @@ const port = Number(process.env.PORT || 3000)
 const articlePath = process.env.LHCI_ARTICLE_PATH || '/articles/s3-08-advanced-markdown'
 const baseUrl = (process.env.LHCI_BASE_URL || `http://127.0.0.1:${port}`).replace(/\/$/, '')
 const existingServer = process.env.LHCI_EXISTING_SERVER === 'true'
+const noindexAudit = process.env.LHCI_NOINDEX === 'true'
+const numberOfRuns = Number(process.env.LHCI_NUMBER_OF_RUNS || 3)
+const chromePort = Number(process.env.LHCI_CHROME_PORT || 0)
 
 module.exports = {
   ci: {
@@ -13,10 +16,12 @@ module.exports = {
       }),
       url: [`${baseUrl}${articlePath}`],
       // 移动端 Lighthouse 单次采样抖动明显，使用聚合结果避免偶发误报；性能门槛仍保持 0.90。
-      numberOfRuns: 3,
+      numberOfRuns,
       settings: {
         formFactor: 'mobile',
         throttlingMethod: 'provided',
+        ...(chromePort > 0 && { port: chromePort }),
+        ...(noindexAudit && { ignoreStatusCode: true }),
         chromeFlags: process.env.LHCI_CHROME_FLAGS || undefined,
         screenEmulation: { mobile: true, width: 360, height: 800, deviceScaleFactor: 1, disabled: false },
       },
@@ -24,7 +29,7 @@ module.exports = {
     assert: {
       assertions: {
         'categories:performance': ['error', { minScore: 0.9 }],
-        'categories:seo': ['error', { minScore: 0.9 }],
+        ...(!noindexAudit && { 'categories:seo': ['error', { minScore: 0.9 }] }),
         'categories:accessibility': ['error', { minScore: 0.9 }],
       },
     },
diff --git a/apps/web/scripts/check-article-client-bundle.mjs b/apps/web/scripts/check-article-client-bundle.mjs
index 2fe9842..33bc0b8 100644
--- a/apps/web/scripts/check-article-client-bundle.mjs
+++ b/apps/web/scripts/check-article-client-bundle.mjs
@@ -1,11 +1,30 @@
 import { readdir, readFile } from 'node:fs/promises'
-import { resolve } from 'node:path'
+import { basename, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { gzipSync } from 'node:zlib'
 
 const clientDir = fileURLToPath(new URL('../.output/public/_nuxt', import.meta.url))
-const MAX_INITIAL_GZIP_BYTES = 180 * 1024
-const forbidden = /(?:shiki|@shikijs|oniguruma|vscode-textmate|katex(?:\.render|\.js|\/dist)|mermaid(?:\.core|\/dist)|@mermaid-js|(?:THREE\.|three\/build)|monaco|codemirror|prosemirror)/i
+const ARTICLE_WARNING_GZIP_BYTES = 80 * 1024
+const ARTICLE_MAX_GZIP_BYTES = 180 * 1024
+const THREE_MAX_GZIP_BYTES = 500 * 1024
+
+const routeMarkers = {
+  article: 'ArticlesPublicArticleBody',
+  home: 'FIRST FRAME / 夜空校准',
+  garden: 'DIGITAL GARDEN / KNOWLEDGE SIGNAL',
+}
+
+const heavyBodies = {
+  Three: /(?:THREE \/ INSTANCED SIGNAL FIELD|WebGLRenderer|InstancedMesh)/,
+  'd3-force': /forceSimulation[\s\S]{0,800}alphaMin[\s\S]{0,800}velocityDecay/,
+  播放器: /SIGNAL TAPE \/ MUSIC|频谱待用户播放后接入/,
+  终端: /安全信号终端|命令不能超过 200 个字符/,
+}
+
+const articleForbidden = {
+  ...heavyBodies,
+  '服务端 Markdown 重依赖': /(?:shiki|@shikijs|oniguruma|vscode-textmate|katex(?:\.render|\.js|\/dist)|mermaid(?:\.core|\/dist)|@mermaid-js|monaco|codemirror|prosemirror)/i,
+}
 
 async function collectFiles(directory) {
   const files = []
@@ -17,42 +36,88 @@ async function collectFiles(directory) {
   return files
 }
 
-try {
-  const files = await collectFiles(clientDir)
-  const sources = new Map(await Promise.all(files.map(async file => [file, await readFile(file, 'utf8')])))
-  const byName = new Map(files.map(file => [file.split(/[\\/]/).pop(), file]))
-  const articleEntry = files.find(file => sources.get(file)?.includes('ArticlesPublicArticleBody'))
-  if (!articleEntry) throw new Error('未找到文章路由客户端入口，无法检查初始包。')
+function staticImports(source) {
+  return [...source.matchAll(/(?:from|import)"\.\/([^" ]+\.js)"/g)].map(match => match[1])
+}
 
-  const staticImports = source => [...source.matchAll(/(?:from|import)"\.\/([^" ]+\.js)"/g)].map(match => match[1])
-  const initial = new Set()
-  const queue = [articleEntry]
+function staticClosure(entry, byName, sources) {
+  const closure = new Set()
+  const queue = [entry]
   while (queue.length) {
     const file = queue.pop()
-    if (!file || initial.has(file)) continue
-    initial.add(file)
+    if (!file || closure.has(file)) continue
+    closure.add(file)
     for (const name of staticImports(sources.get(file) || '')) {
       const dependency = byName.get(name)
       if (dependency) queue.push(dependency)
     }
   }
+  return closure
+}
+
+function gzipBytes(files, sources) {
+  return [...files].reduce((total, file) => total + gzipSync(sources.get(file) || '').byteLength, 0)
+}
+
+function matchingFiles(files, sources, pattern) {
+  return [...files].filter(file => pattern.test(sources.get(file) || ''))
+}
+
+function requireRouteEntry(files, sources, route) {
+  const entry = files.find(file => (sources.get(file) || '').includes(routeMarkers[route]))
+  if (!entry) throw new Error(`未找到 ${route} 路由客户端入口，无法检查初始包。`)
+  return entry
+}
+
+function rejectMatches(label, files, sources, patterns) {
+  const matches = []
+  for (const [name, pattern] of Object.entries(patterns)) {
+    for (const file of matchingFiles(files, sources, pattern)) matches.push(`${name}:${basename(file)}`)
+  }
+  if (matches.length) throw new Error(`${label}初始静态闭包含有重型主体：${matches.join(', ')}`)
+}
+
+try {
+  const files = await collectFiles(clientDir)
+  const sources = new Map(await Promise.all(files.map(async file => [file, await readFile(file, 'utf8')])))
+  const byName = new Map(files.map(file => [basename(file), file]))
+
+  const articleEntry = requireRouteEntry(files, sources, 'article')
+  const articleInitial = staticClosure(articleEntry, byName, sources)
+  const homeInitial = staticClosure(requireRouteEntry(files, sources, 'home'), byName, sources)
+  const gardenInitial = staticClosure(requireRouteEntry(files, sources, 'garden'), byName, sources)
 
-  const matches = [...initial].filter(file => forbidden.test(sources.get(file) || ''))
-  if (matches.length) throw new Error(`文章客户端初始资源包含服务端 Shiki/KaTeX 依赖：${matches.join(', ')}`)
+  rejectMatches('文章', articleInitial, sources, articleForbidden)
+  rejectMatches('首页', homeInitial, sources, { Three: heavyBodies.Three })
+  rejectMatches('花园', gardenInitial, sources, { 'd3-force': heavyBodies['d3-force'] })
+
+  const articleGzipBytes = gzipBytes(articleInitial, sources)
+  if (articleGzipBytes > ARTICLE_MAX_GZIP_BYTES) {
+    throw new Error(`文章客户端初始 JS 超出 180 KiB gzip 硬上限：${articleGzipBytes} bytes`)
+  }
+  if (articleGzipBytes > ARTICLE_WARNING_GZIP_BYTES) {
+    console.warn(`文章客户端初始 JS 超过阶段五 80 KiB gzip 回归警戒线：${articleGzipBytes} bytes`)
+  }
 
-  const initialGzipBytes = [...initial].reduce((total, file) => total + gzipSync(sources.get(file) || '').byteLength, 0)
-  if (initialGzipBytes > MAX_INITIAL_GZIP_BYTES) {
-    throw new Error(`文章客户端初始 JS 超出 180KB gzip 预算：${initialGzipBytes} bytes`)
+  const threeChunks = matchingFiles(files, sources, heavyBodies.Three)
+  if (!threeChunks.length) throw new Error('未找到 Three 动态 chunk。')
+  const initialRoutes = new Set([...articleInitial, ...homeInitial, ...gardenInitial])
+  const initialThree = threeChunks.filter(file => initialRoutes.has(file))
+  if (initialThree.length) throw new Error(`Three 进入了路由初始静态闭包：${initialThree.map(basename).join(', ')}`)
+  for (const file of threeChunks) {
+    const compressed = gzipSync(sources.get(file) || '').byteLength
+    if (compressed > THREE_MAX_GZIP_BYTES) throw new Error(`Three 动态 chunk ${basename(file)} 超出 500 KiB gzip：${compressed} bytes`)
   }
 
   const articleSource = sources.get(articleEntry) || ''
   const mermaidImport = articleSource.match(/(?:startOnLoad|maxTextSize|haoblog-mermaid-)[\s\S]{0,800}?import\(`\.\/([^`]+\.js)`\)/)
   if (!mermaidImport) throw new Error('未发现 Mermaid 动态 import。')
   const mermaidChunk = byName.get(mermaidImport[1])
-  if (!mermaidChunk || initial.has(mermaidChunk)) throw new Error('Mermaid 运行时进入了文章客户端初始静态依赖。')
+  if (!mermaidChunk || articleInitial.has(mermaidChunk)) throw new Error('Mermaid 运行时进入了文章客户端初始静态依赖。')
   if (!/mermaid|securityLevel/i.test(sources.get(mermaidChunk) || '')) throw new Error('Mermaid 动态 chunk 内容异常。')
 
-  console.log(`文章客户端预算通过：静态闭包 ${initial.size} 个 chunk，${initialGzipBytes} bytes gzip；Mermaid 位于异步 chunk ${mermaidImport[1]}。`)
+  const threeReport = threeChunks.map(file => `${basename(file)} ${gzipSync(sources.get(file) || '').byteLength} bytes gzip`).join('，')
+  console.log(`客户端预算通过：文章静态闭包 ${articleInitial.size} 个 chunk，${articleGzipBytes} bytes gzip（80 KiB 警戒线 / 180 KiB 硬上限）；首页 Three 与花园 d3-force 均为动态加载；Three 动态 chunk：${threeReport}；Mermaid 位于异步 chunk ${mermaidImport[1]}。`)
 } catch (error) {
   if (error?.code === 'ENOENT') throw new Error('未找到构建产物，请先运行 pnpm build。')
   throw error
diff --git a/apps/web/test/phase5-static-boundaries.test.ts b/apps/web/test/phase5-static-boundaries.test.ts
index 2eb09ca..d598691 100644
--- a/apps/web/test/phase5-static-boundaries.test.ts
+++ b/apps/web/test/phase5-static-boundaries.test.ts
@@ -15,6 +15,29 @@ describe('phase five static boundaries', () => {
     expect(readFileSync(resolve(app, 'components/music/SignalTape.client.vue'), 'utf8')).toContain('preload="none"')
   })
 
+  it('releases every stage five heavyweight owner on unmount', () => {
+    const home = readFileSync(resolve(app, 'components/home/HomeThreeScene.client.vue'), 'utf8')
+    expect(home).toContain('cancelAnimationFrame(raf)')
+    expect(home).toContain('nodeGeometry?.dispose()')
+    expect(home).toContain('nodeMaterial?.dispose()')
+    expect(home).toContain('lineGeometry?.dispose()')
+    expect(home).toContain('lineMaterial?.dispose()')
+    expect(home).toContain('renderer?.forceContextLoss()')
+    expect(home).toContain('renderer?.dispose()')
+
+    const garden = readFileSync(resolve(app, 'components/garden/GardenCanvas.client.vue'), 'utf8')
+    expect(garden).toContain('simulation?.stop()')
+    expect(garden).toContain("simulation?.on('tick', null)")
+    expect(garden).toContain('cancelAnimationFrame(frame)')
+    expect(garden).toContain('resizeObserver?.disconnect()')
+
+    const music = readFileSync(resolve(app, 'components/music/SignalTape.client.vue'), 'utf8')
+    expect(music).toContain('stopSpectrumLoop()')
+    expect(music).toContain('source?.disconnect()')
+    expect(music).toContain('analyser.value?.disconnect()')
+    expect(music).toContain('context.close()')
+  })
+
   it('keeps PWA cache boundaries explicit and excludes API, Studio, articles, graph, comments and audio', () => {
     const worker = readFileSync(resolve(publicDir, 'sw.js'), 'utf8')
     expect(worker).toContain("url.pathname === '/tools'")
diff --git a/apps/web/test/safe-markdown.test.ts b/apps/web/test/safe-markdown.test.ts
index b7ac291..777894b 100644
--- a/apps/web/test/safe-markdown.test.ts
+++ b/apps/web/test/safe-markdown.test.ts
@@ -20,7 +20,13 @@ describe('SafeMarkdown', () => {
   it('renders HTTPS images with lazy loading and keeps non-HTTPS images inert', () => {
     const wrapper = mount(SafeMarkdown, { props: { markdown: '![observatory](https://cdn.example.test/photo.webp)\n\n![bad](data:image/png;base64,boom)' } })
     expect(wrapper.findAll('img')).toHaveLength(1)
-    expect(wrapper.find('img').attributes()).toMatchObject({ src: 'https://cdn.example.test/photo.webp', alt: 'observatory', loading: 'lazy' })
+    expect(wrapper.find('img').attributes()).toMatchObject({
+      src: 'https://cdn.example.test/photo.webp',
+      alt: 'observatory',
+      width: '1200',
+      height: '630',
+      loading: 'lazy',
+    })
     expect(wrapper.text()).toContain('data:image/png;base64,boom')
   })
 
diff --git "a/docs/HaoBlog \345\256\214\346\225\264\345\274\200\345\217\221\350\256\241\345\210\222.md" "b/docs/HaoBlog \345\256\214\346\225\264\345\274\200\345\217\221\350\256\241\345\210\222.md"
index 1c31464..f2e5c32 100644
--- "a/docs/HaoBlog \345\256\214\346\225\264\345\274\200\345\217\221\350\256\241\345\210\222.md"	
+++ "b/docs/HaoBlog \345\256\214\346\225\264\345\274\200\345\217\221\350\256\241\345\210\222.md"	
@@ -1,6 +1,8 @@
 # HaoBlog 完整开发计划（阿里云 2 核 2GB 优化版）
 
 > 适用前提：单站长、中文优先、初期低流量；生产环境为一台阿里云 2 核 2GB 服务器，AI 推理使用阿里云百炼云 API，不在服务器本地运行大模型。
+>
+> 当前进度（2026-08-24）：工程骨架、内容核心、公开阅读、评论、工具、搜索和阶段五非 AI 体验已完成本地收口；S5-00～S5-09 的契约、单元/集成、完整 Chromium、Bundle、独立生产 Compose、四条正式路由 Lighthouse、日志和短时资源验收已完成。404 的 HTTP 404、可见正文、Paint 和 noindex 已验证，但 Lighthouse 12.6.1 对非 2xx 导航不产出类别分数。真实 SMTP、真实 OSS/CDN、域名/HTTPS、备份恢复、部署、远端 CI/生产、合规材料及阶段六 30 分钟 2GB 压测仍需单独完成；AI 基础与 RAG 保持在阶段八、九。
 
 ## 0. 架构结论与约束
 
@@ -384,7 +386,7 @@ V1 功能：
 - 内嵌工具由后端 `componentKey` 映射前端组件，禁止保存任意 HTML/JavaScript。
 - 外部链接只允许 `https`，新窗口附加安全 `rel` 属性。
 
-PWA 离线工具箱放入 V1.1，不让 Service Worker 增加首发缓存和更新复杂度。
+PWA 离线工具箱提前放入阶段五；Service Worker 仍需保持缓存范围最小，并在无 JavaScript、Save-Data 和更新失败时安全降级。
 
 ### 3.5 创新功能
 
@@ -415,14 +417,14 @@ theme blueprint
 
 选择正文或代码后直接解释，自动携带文章 ID、版本和小节。选区长度、上下文和输出均受 AI 限额控制。这是 HaoBlog V1 的核心辨识点。
 
-#### D. 全局音乐与信号可视化（V1.1）
+#### D. 全局音乐与信号可视化（阶段五）
 
 - 使用 Web Audio API 绘制频谱和波形。
 - 路由切换时不中断，但默认不自动播放。
 - 音频从 OSS/CDN 加载，不经过 Spring Boot。
 - 仅使用原创、CC 授权或已获得授权的音乐。
 
-#### E. 页面彩蛋（V1.1）
+#### E. 页面彩蛋（阶段五）
 
 - 404 页面为轻量“丢失信号修复”小游戏。
 - 连续点击 Logo 切换蓝图模式。
@@ -533,7 +535,7 @@ theme blueprint
 
 ## 6. 开发阶段与里程碑
 
-按单人兼职每周 15–20 小时估算，V1 约 10–12 周。完整 AI 保留，但视觉娱乐功能不得阻塞上线。
+按单人兼职每周 15–20 小时估算，V1 约 11 周。完整 AI 保留，但先完成非 AI MVP、前端体验、本地生产候选和运行保障；AI 开发不再占用阶段五至七的时间，也不得阻塞非 AI 版本上线。域名备案周期不作为阶段五、六本地开发的阻塞条件。
 
 | 阶段 | 时间 | 交付与验收 |
 | --- | ---: | --- |
@@ -541,31 +543,32 @@ theme blueprint
 | 1. 工程骨架 | 第 1 周 | Nuxt/Spring、PostgreSQL/pgvector、Flyway、OpenAPI、Compose、CI、管理员登录 |
 | 2. 内容核心 | 第 2–3 周 | 文章 CRUD、标签分类、编辑器、自动保存、版本、OSS 媒体、预览发布 |
 | 3. 公开阅读 | 第 4 周 | 首页、列表、文章 SSR、TOC、Shiki、SEO、RSS/Sitemap、响应式 |
-| 4. 评论与工具 | 第 5 周 | 评论审核/限频、工具管理、5 个内嵌工具，形成可上线非 AI MVP |
-| 5. AI 基础 | 第 6 周 | 百炼 Chat/Embedding、SSE、会话、额度、费用台账、取消与超时 |
-| 6. RAG 与创作 | 第 7 周 | 分块、混合检索、引用、选区问答、后台创作、缓存、固定问题评测 |
-| 7. 创新体验 | 第 8 周 | 知识星图、终端导航、首页标志性动效、性能降级 |
-| 8. 2GB 加固 | 第 9 周 | 内存上限、并发闸门、30 分钟压测、故障降级、日志轮转、备份恢复 |
-| 9. 部署与合规 | 第 10 周 | 域名/HTTPS、ACR、自动部署、备案材料、AI 标识、隐私/评论规则 |
-| 10. 观察期 | 第 11 周 | 小流量灰度 7 天、修复 OOM/5xx/费用问题、正式开放 AI |
-| V1.1 | 第 12 周后 | 音乐、频谱、404 小游戏、PWA、体验优化 |
+| 4. 评论、工具与搜索 | 第 5 周 | 评论审核/限频、工具管理、5 个内嵌工具、中文搜索，形成可上线非 AI MVP |
+| 5. 非 AI 体验与本地收口 | 第 6 周 | 已完成本地收口：知识星图、终端导航、首页标志性动效、性能降级、音乐、频谱、404 小游戏、PWA；均不依赖 AI 或备案 |
+| 6. 2GB 加固与本地生产候选 | 第 7 周 | 内存上限、并发闸门、30 分钟压测、故障降级、日志轮转和回滚路径 |
+| 7. 外部上线准备与备案 | 第 8 周 | 真实 OSS、备份/恢复流程、CI 制品、域名/HTTPS、ACR、部署演练、备案材料和隐私/评论规则；等待真实域名时先完成其余项目 |
+| 8. AI 基础 | 第 9 周 | 百炼 Chat/Embedding、SSE、会话、额度、费用台账、取消与超时 |
+| 9. RAG 与创作 | 第 10 周 | 分块、混合检索、引用、选区问答、后台创作、缓存、固定问题评测 |
+| 10. AI 灰度与观察期 | 第 11 周 | 先向站长开放 AI，观察 7 天并修复 OOM/5xx/费用问题，再决定访客灰度 |
+| V1.1 | 第 12 周后 | 非核心体验优化、复杂动效细节和后续实验功能 |
 
 ### 6.1 开发优先级
 
 P0（必须）：
 
-- 管理员登录、文章全流程、SSR 阅读、OSS 媒体、搜索、备份。
-- 完整 AI 对话、RAG 引用、选区问答、后台创作、额度和硬预算。
+- 管理员登录、文章全流程、SSR 阅读、OSS 媒体、搜索、备份和恢复演练。
 - 评论审核与全局 Feature Flag。
-- 2GB 内存约束和故障降级。
+- 2GB 内存约束、故障降级、生产候选和回滚路径。
 
 P1（首发尽量）：
 
-- 知识星图、终端导航、浏览聚合、限时预览链接。
+- 知识星图、终端导航、首页标志性动效、性能降级、音乐播放器、频谱可视化、404 小游戏和 PWA。
+- 浏览聚合、限时预览链接及其他不依赖 AI 或备案的体验增强。
+- 在非 AI 生产候选验收通过后接入完整 AI 对话、RAG 引用、选区问答、后台创作、额度和硬预算。
 
 P2（V1.1）：
 
-- 音乐播放器、可视化、小游戏、PWA、复杂动画。
+- 复杂动画细节、非核心彩蛋和其他体验优化。
 
 ### 6.2 测试计划
 
@@ -724,7 +727,7 @@ GitHub Actions 流程：
 | 单机故障 | OSS 异地备份、版本化镜像、恢复演练；接受单机无高可用 |
 | 媒体占满磁盘 | 浏览器直传 OSS、系统盘不保存原图、生命周期与引用清理 |
 | 国内合规变化 | AI/评论独立开关、显式标识、上线前复核最新规则和供应商条款 |
-| 功能过多延期 | P0 优先；音乐、PWA、小游戏和复杂动画延后 |
+| 功能过多延期 | P0 优先；阶段五先做轻量音乐、PWA、小游戏和降级路径，复杂动画细节与非核心彩蛋继续后置 |
 
 ### 8.2 升级到 4GB 的硬触发条件
 
@@ -770,11 +773,11 @@ GitHub Actions 流程：
 
 最稳妥的上线顺序是：
 
-1. 先完成文章、管理后台、OSS、SSR、搜索、评论和备份，作为非 AI MVP。
-2. 接入百炼 Chat/Embedding，完成 SSE、RAG 引用、选区问答和后台创作。
-3. 在测试环境用与生产相同的容器上限完成 30 分钟资源压测。
-4. 先只向站长开放 AI，观察费用、引用和内存 3–7 天。
-5. 再以“每天 5 次、全站并发 3、月预算 50 元”向访客灰度开放。
-6. 稳定一周后上线知识星图和终端；音乐、PWA、小游戏留到 V1.1。
+1. 完成文章、管理后台、OSS、SSR、搜索、评论、工具和备份，作为非 AI MVP。
+2. 在域名备案等待期间先完成知识星图、终端、首页动效、性能降级、音乐、频谱、404 小游戏和 PWA，并逐项验证低性能与无 JavaScript 路径。
+3. 在测试环境用与生产相同的容器上限完成 30 分钟资源压测、故障降级、备份恢复和本地生产候选验收。
+4. 域名备案完成后补齐真实 OSS、域名/HTTPS、ACR、部署演练、远端 CI/生产和合规验收；未完成备案不阻塞前述本地开发。
+5. 接入百炼 Chat/Embedding，完成 SSE、RAG 引用、选区问答、后台创作、额度和硬预算。
+6. 先只向站长开放 AI，观察费用、引用和内存 3–7 天，再以“每天 5 次、全站并发 3、月预算 50 元”向访客灰度开放。
 
 这份方案不是削弱完整 AI，而是把大模型推理、批量构建、媒体和备份移出 2GB 主机，把有限内存只留给 Web、业务、数据库和流式连接。只要严格执行资源上限、并发闸门和升级阈值，2 核 2GB 可以作为 HaoBlog 的首发配置；若希望减少调优时间并获得更宽松的稳定性，升级到 2 核 4GB 仍是性价比最高的第一步。
diff --git "a/docs/taget/\347\254\254\344\272\224\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md" "b/docs/taget/\347\254\254\344\272\224\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md"
deleted file mode 100644
index b06e615..0000000
--- "a/docs/taget/\347\254\254\344\272\224\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md"
+++ /dev/null
@@ -1,465 +0,0 @@
-# 第五阶段目标任务：非 AI 体验与本地收口
-
-## 0. 阶段状态与适用范围
-
-本文件是阶段五的目标任务和实现记录。2026-08-23 的“阶段 5 迭代 1”已完成 S5-01 图谱契约与 Feature Flag、S5-02 知识星图；“阶段 5 迭代 2”已完成 S5-03 安全终端与主题、S5-04 首页三幕与 Three.js；本轮“阶段 5 迭代 3”已完成 S5-05 音乐与频谱、S5-06 404 信号修复、S5-07 PWA 离线工具箱；S5-08～S5-09 仍待后续迭代实施。
-
-阶段五定位为“非 AI 体验与本地收口”：在阶段四已有的公开阅读、评论、工具和搜索基础上，补齐知识星图、终端导航、首页标志性动效、音乐与频谱、404 彩蛋、PWA 离线工具箱，以及重型效果的生命周期和降级边界。
-
-本阶段继续遵循“仪器而非装饰、降级是一等路径、可读性永远赢”。首页首幕和文章正文必须不依赖 JavaScript；Three.js、图谱渲染、音频分析和 Service Worker 都不能成为内容可见性的前置条件。
-
-## 一、阶段目标与非目标
-
-### 1.1 阶段目标
-
-- 让文章、标签、分类和工具可以通过受限的知识星图被发现，并在移动端退化为可读的时间线。
-- 提供浏览器内白名单终端，支持导航、搜索和主题切换；任何命令都不连接服务器 Shell。
-- 将首页明确实现为“夜空校准 → 星图接入 → 近期观测日志”三幕，首幕为 SSR 静态内容，第二幕才按需加载 Three.js。
-- 提供默认不自动播放的全局音乐、频谱和波形体验；音频只从服务端配置的受信任 OSS/CDN 清单加载。
-- 提供可跳过、可关闭、移动端可降级的“丢失信号修复”404 小游戏。
-- 让 /tools 的浏览器端工具具备最小范围离线能力，不缓存私有数据、文章正文、评论、Studio 或 API 响应。
-- 在 360/768/1280/1600px、键盘、触摸、prefers-reduced-motion、Save-Data、无 JavaScript和资源加载失败路径下，保持可用和可读。
-- 为阶段六的 2GB 加固保留可测量的资源、缓存、并发和生命周期边界。
-
-### 1.2 明确非目标
-
-本阶段不实现、不验收以下项目：
-
-- AI Chat、SSE、RAG、Embedding、选区问答、后台创作、模型额度、费用台账和 AI 评测。
-- 域名、HTTPS、ICP/公安备案、部署、ACR、远端 CI、真实生产环境或云资源变更。
-- 真实 OSS 媒体上传改造、真实 SMTP 投递、备份恢复演练和生产合规材料。
-- 30 分钟压力测试、生产容器内存加固、日志轮转和回滚演练；这些属于阶段六或阶段七的外部/运行验收。
-- Studio 曲目 CRUD、音乐上传、曲目审核或数据库音乐表；音乐只消费服务端配置的受信任 OSS/CDN JSON 清单。
-- 通过终端执行任意 Shell、SQL、文件系统、网络抓取或未列入白名单的命令。
-- 把全文、评论正文、管理数据或任意 HTML/JavaScript放入图谱、PWA 缓存或音乐清单。
-- 全屏粒子、大面积模糊玻璃、传统顶部导航、三列文章卡片、九宫格工具卡片或为动效引入 React Framer Motion。
-- 新建微服务、Redis、消息队列、独立搜索服务、MinIO 或新的数据库表；若实现阶段发现确需改变边界，必须先重新进行阶段准入。
-
-## 二、既有基线与架构边界
-
-- API 仍是 Java 21 + Spring Boot 模块化单体，业务边界为 identity、content、comment、toolbox、ai、media、site、shared。
-- Web 仍是 Nuxt 4 + Vue 3 + TypeScript；公开站点 SSR，/studio CSR。公共内容契约继续由 OpenAPI 和 packages/api-client 负责。
-- 图谱数据由服务端从已公开的文章、标签、分类和工具读模型生成，不向浏览器发送全文，不由客户端拼接管理数据。
-- 音频二进制不经过 Spring Boot；Nuxt 服务端读取受信任 manifest 的地址，浏览器只接收校验后的清单和允许的 HTTPS 音频地址。
-- 重型客户端模块必须路由或交互懒加载，并在路由离开、组件卸载和 Feature Flag 关闭时释放监听器、计时器、Worker、AudioContext、AnalyserNode、Three.js 场景和纹理。
-- 阶段五不修改现有迁移文件；本迭代新增 V16 迁移承载音乐与首页 3D 开关。S5-01 的 Feature Flag 已扩展公开/管理员读模型和 Studio 乐观锁设置，音乐清单仍由服务端环境变量提供。
-
-## 三、任务依赖关系
-
-~~~mermaid
-flowchart LR
-  S500["S5-00 阶段准入"] --> S501["S5-01 图谱契约与 Feature Flag"]
-  S501 --> S502["S5-02 知识星图"]
-  S501 --> S503["S5-03 安全终端与主题"]
-  S501 --> S504["S5-04 首页三幕与 Three.js"]
-  S501 --> S505["S5-05 音乐与频谱"]
-  S501 --> S506["S5-06 404 信号修复"]
-  S501 --> S507["S5-07 PWA 离线工具箱"]
-  S502 --> S508["S5-08 性能、生命周期与降级收口"]
-  S503 --> S508
-  S504 --> S508
-  S505 --> S508
-  S506 --> S508
-  S507 --> S508
-  S508 --> S509["S5-09 综合验收与文档"]
-~~~
-
-依赖原则：S5-01 先冻结公开数据和开关，避免视觉组件各自定义数据；S5-02～S5-07 可以并行开发，但都必须把资源释放和关闭开关交给 S5-08 统一验收；S5-09 只在降级、生命周期和公开契约全部可复现后收口。
-
-## 四、公共契约、数据结构与 Feature Flag
-
-以下是本阶段通过 OpenAPI、Nuxt Server Route 或静态资源契约固化的公开接口。本迭代复用 S5-01/S5-02 的公开接口和生成客户端；S5-03/S5-04 未新增后端接口或 OpenAPI 字段。
-
-### 4.1 公开接口
-
-| 接口 | 所属 | 目的与硬边界 |
-| --- | --- | --- |
-| GET /api/v1/public/site | Spring Boot | 在现有站点响应中增加公开的 featureFlags；保留现有 commentsEnabled、ETag 和缓存语义。不返回密钥、内部配置或 Studio 权限。 |
-| GET /api/v1/public/garden | Spring Boot | 返回受限图谱 JSON；只含公开文章快照和 ACTIVE 工具的摘要、关系、权重与 ETag，不含 Markdown、评论、未发布内容、工具外部 URL 或管理字段。 |
-| GET /music-manifest.json | Nuxt Server Route/静态边界 | 由服务端配置的 HTTPS OSS/CDN manifest 地址提供校验后的清单；不提供 Studio 曲目 CRUD，不代理音频二进制。若源不可用，返回空清单并保留播放器降级文案。 |
-| GET /manifest.webmanifest | Web 静态资源 | 只描述公开站点和工具箱的安装元数据，不声明 Studio、评论写入或后台能力。 |
-| GET /sw.js | Web 静态资源 | 只负责公开工具箱的最小缓存和更新；不得拦截或持久化 /api/**、/studio/**、评论提交、登录和文章私有预览。 |
-
-终端、404 游戏、频谱和 Three.js 都是浏览器内功能，不另开 API。终端复用现有公开文章、搜索、工具和站点接口；ask 命令在阶段五只返回“AI 尚未在本阶段开放”的本地提示，不发送 AI 请求。
-
-### 4.2 图谱数据结构
-
-~~~ts
-type KnowledgeGraphNodeKind = 'ARTICLE' | 'TAG' | 'CATEGORY' | 'TOOL'
-type KnowledgeGraphRelation = 'TAGGED' | 'CATEGORIZED' | 'RELATED_TOOL' | 'SHARED_TAG'
-
-interface KnowledgeGraphNode {
-  id: string
-  kind: KnowledgeGraphNodeKind
-  label: string
-  href: string | null
-  weight: number
-  publishedAt?: string
-}
-
-interface KnowledgeGraphEdge {
-  source: string
-  target: string
-  relation: KnowledgeGraphRelation
-  weight: number
-}
-
-interface KnowledgeGraphResponse {
-  schemaVersion: 1
-  generatedAt: string
-  nodes: KnowledgeGraphNode[]
-  edges: KnowledgeGraphEdge[]
-}
-~~~
-
-服务端默认上限为 120 个节点、360 条边；实际值以实现时的资源观测为准，但必须有硬上限。href 只能是站内安全路径，节点标签和类型必须同时表达状态，不能只用颜色区分。移动端无需请求全文，退化视图复用节点的标签、类型和站内链接。
-
-### 4.3 音乐清单数据结构
-
-~~~ts
-interface MusicManifest {
-  version: 1
-  tracks: Array<{
-    id: string
-    title: string
-    artist: string
-    audioUrl: string
-    licenseName: string
-    licenseUrl?: string
-    sourceUrl?: string
-  }>
-}
-~~~
-
-清单固定为 UTF-8 JSON、最大 64 KiB、最多 20 首；每首曲目必须包含上述字段。Nuxt 服务端只读取 `HAOBLOG_MUSIC_MANIFEST_URL` 指向的受信任地址并返回校验后的清单，不代理音频二进制。音频、授权和来源地址只接受 HTTPS，local/dev 测试允许 localhost HTTP。音频地址只在用户点击播放后才加载，默认不自动播放。
-
-### 4.4 Feature Flag
-
-S5-01 已将 musicEnabled、threeDEnabled 写入站点设置并通过 GET /api/v1/public/site 下发；管理员设置页继续使用 version 乐观锁。客户端检测到缺失、非法或接口失败时，一律选择关闭重型效果的安全默认值。音乐清单未配置时，管理员开启音乐统一返回 MUSIC_MANIFEST_NOT_CONFIGURED；生产只接受绝对 HTTPS，local/dev 可使用 localhost HTTP。
-
-| Flag | 作用 | 安全默认 | 依赖 |
-| --- | --- | --- | --- |
-| terminal | 开放 ⌘K/Ctrl+K 白名单终端 | false | 现有公开文章、搜索、工具接口 |
-| knowledgeGraph | 图谱 Canvas/Force 视图 | false | S5-01 图谱契约 |
-| homeScene | 首页第二幕 Three.js | false | knowledgeGraph 或静态首页数据 |
-| music | 全局播放器和清单 | false | 服务端 manifest；由现有 `musicEnabled` 控制 |
-| spectrum | Web Audio 频谱/波形 | false | music、用户播放手势和浏览器能力；继承 music 开关，不新增数据库列 |
-| signalRepair404 | 404 三步修复小游戏 | false | Nuxt 运行时开关、桌面能力门控 |
-| pwa | 工具箱 manifest、Service Worker 和离线缓存 | false | production build 或 `HAOBLOG_PWA_TEST=true`；工具页显式准备 |
-
-data-theme="night|blueprint" 是用户本地选择，不是远端 Feature Flag；必须使用 html data-theme 和 CSS Token。prefers-reduced-motion、Save-Data、触摸和设备能力属于运行时降级信号，不得被远端开关覆盖。AI 相关开关不在本阶段新增。
-
-## 五、详细任务清单
-
-### S5-00：阶段准入
-
-| 属性 | 内容 |
-| --- | --- |
-| 优先级 | P0，阶段准入 |
-| 前置依赖 | 无 |
-| 工作量 | 2–4 小时 |
-| 公开接口 | 无 |
-| 数据结构/Flag | 冻结本文件和准入清单，不创建运行时结构 |
-
-目标：记录阶段四本地验收基线、当前分支和用户改动，确认阶段五只做非 AI 体验与本地收口。
-
-非目标：不恢复被用户删除的阶段四文档，不提交、不推送、不部署，不写业务代码、OpenAPI、迁移或空类。
-
-验收标准：
-
-- 阶段 2/3 历史文档、阶段 4 收口文档的来源和路径差异可追溯。
-- 当前环境命令、API/Web/OpenAPI/Compose 入口和 Git 状态已记录。
-- 阶段五任务、依赖、外部未执行项目和完成定义已落盘。
-- 用户对 AGENTS.md 和完整开发计划的未提交修改保持原样。
-
-测试场景：检查 git status --short --untracked-files=all、git diff --check、文档链接和目标路径；不运行会改变业务状态的命令。
-
-### S5-01：图谱契约与 Feature Flag
-
-实际状态：已完成（2026-08-23，阶段 5 迭代 1）。
-
-| 属性 | 内容 |
-| --- | --- |
-| 优先级 | P0 |
-| 前置依赖 | S5-00 |
-| 工作量 | 6–10 小时 |
-| 公开接口 | GET /api/v1/public/site、GET /api/v1/public/garden、GET /api/v1/admin/site |
-| 数据结构/Flag | GardenGraphResponse、4 类节点、musicEnabled、threeDEnabled |
-
-目标：冻结图谱的最小公开读模型、ETag/缓存、节点上限、站内链接策略和体验开关，让后续组件不自行读取 JPA 实体或管理 API。
-
-非目标：不返回全文、不做全文搜索替代、不增加数据库表、不做 Studio 配置 CRUD、不开放 AI 或通用远程配置。
-
-验收标准：
-
-- OpenAPI 中的响应字段与生成客户端一致，DTO 不暴露实体。
-- 只返回已公开文章、已公开工具及其标签/分类关系；草稿、预览、归档和后台字段永不出现。
-- ETag 对图谱版本和影响响应的数据稳定，接口失败时客户端可使用空/静态回退。
-- 开关关闭或响应缺失时，页面仍能显示静态导航和文本内容。
-- 节点和边数量、字符串长度、响应体大小有硬上限；本迭代固定最多 200 个节点、600 条边，并返回 truncated。
-
-- site 模块只通过 content/toolbox application 层精简读模型获取图谱数据；管理员开启音乐时校验 HAOBLOG_MUSIC_MANIFEST_URL。
-
-测试场景：空站点、单节点、重复关系、未发布文章、越界节点、ETag/304、未知 flag、损坏 JSON、服务端 5xx 和客户端默认关闭。
-
-### S5-02：知识星图
-
-实际状态：已完成（2026-08-23，阶段 5 迭代 1）。
-
-| 属性 | 内容 |
-| --- | --- |
-| 优先级 | P1 |
-| 前置依赖 | S5-01 |
-| 工作量 | 12–18 小时 |
-| 公开接口 | GET /api/v1/public/garden |
-| 数据结构/Flag | ARTICLE、TAG、CATEGORY、TOOL 节点；MEMBERSHIP、CO_OCCURRENCE 边 |
-
-目标：使用 Canvas + 受限 Force 布局呈现文章、标签、分类和工具的关系；单击显示摘要导航，双击进入安全站内路径。
-
-非目标：不在浏览器拉取全文，不引入全量 D3，不做无限缩放、用户编辑关系或实时协作，不依赖 Three.js 才能使用图谱。
-
-实现边界：只评估和引入 d3-force/d3-scale 等最小模块，并按路由懒加载；若资源预算不通过，保留同一契约并退回静态 SVG/时间线，不扩大依赖。
-
-验收标准：
-
-- 桌面可键盘聚焦、选择和打开节点；节点类型、标签和关系不只通过颜色表达。
-- 移动端、低性能设备、Save-Data、reduced-motion 或图谱失败时退化为可读时间线。
-- 图谱不进入文章详情初始客户端闭包；离开页面会取消布局、移除监听器并释放 Canvas。
-- 节点数量达到上限时仍可稳定渲染，超限时按公开日期、工具排序、分类/标签度数和稳定 ID 确定性截断；移动端、Save-Data、reduced-motion、Canvas 不可用及接口失败时保留 SSR 时间线。
-
-测试场景：空图、最大图、断链、重复节点、键盘导航、触摸点击、双击进入、360px、禁用 JS、Save-Data、reduced-motion、动态块加载失败和路由离开。
-
-### S5-03：安全终端与主题
-
-实际状态：已完成（2026-08-23，阶段 5 迭代 2）。
-
-| 属性 | 内容 |
-| --- | --- |
-| 优先级 | P1 |
-| 前置依赖 | S5-01 |
-| 工作量 | 8–12 小时 |
-| 公开接口 | 复用文章列表、搜索、工具和站点公开接口；不新增 Shell API |
-| 数据结构/Flag | 白名单命令 AST、终端历史上限、terminal、data-theme |
-
-目标：通过 Dock 或 Ctrl/Cmd+K 打开可访问的命令终端，支持 help、ls posts、ls tools、grep "词"、open /articles/...、theme blueprint 和 theme night。
-
-非目标：不执行 Shell/SQL/JS，不读取本地文件，不拼接任意 URL，不实现 AI ask 请求；ask 只能返回阶段未开放提示或转到本地搜索。
-
-验收标准：
-
-- Parser 只接受固定命令和长度上限，未知命令返回文本错误，不抛出页面级异常。
-- 所有路径、搜索词、终端历史和输出均有长度/条数上限；不把用户输入写入 HTML 为可执行内容。
-- Dialog 具备 role="dialog"、aria-modal、焦点陷阱、Esc 关闭和键盘历史；移动端不依赖 hover。
-- theme blueprint 和 Logo 五连击只改变 html data-theme 与 CSS Token；刷新后可恢复，无法写入服务端权限。
-- 不支持 backdrop-filter 时使用不透明背景；reduced-motion 时直接切换状态。
-
-测试场景：命令注入字符、超长输入、未授权路径、键盘/触摸、焦点恢复、刷新主题、localStorage 不可用、旧浏览器、ask 降级和公开 API 失败。
-
-### S5-04：首页三幕与 Three.js
-
-实际状态：已完成（2026-08-23，阶段 5 迭代 2）。
-
-| 属性 | 内容 |
-| --- | --- |
-| 优先级 | P1 |
-| 前置依赖 | S5-01；图谱契约可用后接入 S5-02 |
-| 工作量 | 12–18 小时 |
-| 公开接口 | 复用站点、文章和图谱公开读模型 |
-| 数据结构/Flag | 三幕状态、静态 SVG 回退、homeScene |
-
-目标：实现“夜空校准”SSR 首幕、“星图接入”滚动触发幕、“近期观测日志”SSR 第三幕。Three.js 只在第二幕进入视口后动态导入。
-
-非目标：不在首屏加载 Three.js，不让 3D 负责标题/导航/近期文章，不把 3D 放入文章或 Studio 包，不为失败状态显示空白画布。
-
-验收标准：
-
-- 禁用 JavaScript 时首幕标题、说明、导航和近期日志仍在 HTML 中；第三幕仍可阅读。
-- homeScene=false、移动端、Save-Data、reduced-motion、WebGL 不可用或动态块失败时显示静态 SVG/文本关系图。
-- Three.js 与可能的编排模块只进入首页按需 chunk，压缩资源目标小于 500KB；文章初始包不包含它们。
-- 首页离开时销毁 geometry/material/texture/renderer、取消 RAF 和 observers，重复进入不累积资源。
-- 动效只使用 transform/opacity 等合成属性，扫描线和呼吸灯优先 CSS-first。
-
-测试场景：SSR/无 JS、首屏不发 3D 请求、滚动触发、快速进出视口、WebGL 失败、动态 import 失败、重复路由进入、360px、Save-Data、reduced-motion、键盘和屏幕阅读器。
-
-### S5-05：音乐与频谱
-
-实际状态：已完成（2026-08-23，阶段 5 迭代 3）。
-
-| 属性 | 内容 |
-| --- | --- |
-| 优先级 | P1 |
-| 前置依赖 | S5-01 |
-| 工作量 | 8–12 小时 |
-| 公开接口 | Nuxt GET /music-manifest.json；音频由 manifest 指向 OSS/CDN |
-| 数据结构/Flag | MusicManifest、播放器状态、music、spectrum |
-
-目标：提供跨路由持续的轻量播放器和可关闭的 Web Audio 频谱/波形；播放只由用户手势开始，音频不经 Spring Boot。
-
-非目标：不自动播放、不做上传和曲目 CRUD、不保存用户音频、不在服务端转码、不把 AudioContext 放进文章首屏，不把外部任意 URL 当作可信音频。
-
-实际实现：Nuxt `/music-manifest.json` 服务端路由按固定 `version=1` 协议校验 64 KiB/20 首/HTTPS/localhost 和授权字段；默认布局只在 music flag 开启时显示折叠式“信号磁带”，首次点击动态加载播放器。播放器不自动播放，跨公共路由保持，进入 Studio 卸载时暂停并释放 AudioContext、AnalyserNode、Canvas RAF 和事件；CORS/Web Audio/Canvas/清单失败保留普通播放或明确状态。
-
-验收标准：
-
-- 服务端只读取配置的 HTTPS manifest 来源，校验 schema、host、协议、授权字段和条目上限；源失败时播放器可隐藏或显示离线提示。
-- 用户未点击播放前不请求音频、不创建持续 AudioContext；浏览器拒绝 autoplay 时页面仍正常。
-- 路由切换不打断播放；离开播放器所有者或关闭频谱时释放 analyser、MediaElementSource、RAF 和事件监听器，不泄漏到 Studio。
-- 频谱失败、Save-Data、reduced-motion、低性能或不支持 Web Audio 时只保留播放控制和静态状态灯。
-- UI 使用 role="region"/适当按钮名称和 aria-live 的低频状态播报；颜色不作为唯一状态。
-
-测试场景：合法/损坏/超大/跨域 manifest、非 HTTPS URL、未授权条目、用户手势、暂停/继续、路由切换、音频错误、AudioContext 拒绝、无 Web Audio、Save-Data、reduced-motion 和 Studio 隔离。
-
-### S5-06：404 信号修复
-
-实际状态：已完成（2026-08-23，阶段 5 迭代 3）。
-
-| 属性 | 内容 |
-| --- | --- |
-| 优先级 | P1 |
-| 前置依赖 | S5-01 |
-| 工作量 | 4–6 小时 |
-| 公开接口 | 复用站内搜索；无专用后端接口 |
-| 数据结构/Flag | 本地 RepairState、signalRepair404 |
-
-目标：在现有 error.vue 中提供轻量三步断点修复游戏，成功后回到首页；失败、关闭或无 JavaScript 时始终保留搜索和文章建议。
-
-非目标：不使用 Three.js、Canvas 大场景、网络排行榜、登录、积分、远端存档或阻塞错误页离开。
-
-实际实现：error.vue 保持 SSR 搜索、文章、工具和首页恢复路径及 noindex,nofollow；仅真实 404 的普通桌面环境动态加载三段键盘可达电路游戏，最多三次尝试，360px/触摸/Save-Data/reduced-motion/关闭开关直接走搜索降级；非 404 使用通用错误与重试按钮。
-
-验收标准：
-
-- 错误页的状态码、标题、原因和可访问的返回路径不依赖游戏脚本。
-- 游戏状态只在内存中保存；移动端、reduced-motion、Save-Data 或 flag 关闭时显示搜索框和建议文章。
-- 任意步骤失败都能重置或跳过；成功后只进行普通站内导航。
-- 控件可键盘操作，断点不只用颜色表达，动效可直接关闭。
-
-测试场景：404/500、禁用 JS、flag 关闭、移动端、键盘、重复点击、刷新、游戏失败/成功、搜索接口失败和返回首页。
-
-### S5-07：PWA 离线工具箱
-
-实际状态：已完成（2026-08-23，阶段 5 迭代 3）。
-
-| 属性 | 内容 |
-| --- | --- |
-| 优先级 | P1 |
-| 前置依赖 | S5-01；现有工具箱完成 |
-| 工作量 | 8–14 小时 |
-| 公开接口 | /manifest.webmanifest、/sw.js；不缓存后台 API |
-| 数据结构/Flag | 静态 manifest、缓存版本/白名单、pwa |
-
-目标：让公开工具箱在已访问并完成安装/缓存后可离线打开，JSON、Base64、URL、时间戳和正则工具仍在浏览器/Worker 内运行。
-
-实际实现：使用原生 `/manifest.webmanifest` 和 `/sw.js`，提供普通/maskable 192/512 图标；production 或明确测试模式才注册。工具页“准备离线工具”二次确认后才加载五个工具 chunk、Worker 资源和 `/tools` SSR 快照；缓存只允许 `/tools`、`/_nuxt/**` 和 `/workers/**`，就绪标记前不写入，API/Studio/文章/评论/图谱/音乐/外部资源/Range 请求均不缓存。`/tools` network-first，已准备的静态资源 cache-first；更新不 skipWaiting，激活清理旧版本缓存。
-
-非目标：不离线写入评论或文章，不缓存 API 响应、Cookie、Session、Studio、预览链接、完整文章正文、用户输入或第三方任意脚本，不实现后台同步。
-
-验收标准：
-
-- Service Worker scope 和缓存白名单只覆盖公开工具箱静态资源及明确允许的页面壳。
-- 首次安装、更新失败、缓存损坏、离线未命中和浏览器不支持时都有在线/无 JS 可读回退。
-- 新版本使用可观测的 cache key，旧缓存可控清理；更新期间不删除当前可用版本。
-- 工具输入不写入 Cache Storage、IndexedDB 或日志；Worker 继续遵守既有输入上限和 250ms 正则超时。
-- Lighthouse/Playwright 可验证安装元数据、离线工具路由、缓存边界和在线恢复。
-
-测试场景：首次访问、离线打开 /tools、各五个工具、刷新、更新、缓存损坏、网络恢复、API/Studio 不被拦截、无 JavaScript、Save-Data 和浏览器不支持 Service Worker。
-
-### S5-08：性能、生命周期与降级收口
-
-| 属性 | 内容 |
-| --- | --- |
-| 优先级 | P0 |
-| 前置依赖 | S5-02～S5-07 |
-| 工作量 | 10–16 小时 |
-| 公开接口 | 不新增；验证前述契约的失败和缓存语义 |
-| 数据结构/Flag | 降级决策表、资源预算、dispose 清单 |
-
-目标：把每个重型能力的进入条件、资源预算、关闭路径、异常路径和可观测结果收敛为一套可重复规则。
-
-非目标：不做 30 分钟压测、不修改生产容器上限、不引入监控平台、不把“浏览器能运行”当作内存和 CPU 通过。
-
-验收标准：
-
-- 文章初始 JS 继续不超过 180KB gzip；Three.js、图谱、音乐可视化、PWA 安装逻辑不进入文章初始闭包。
-- 360/768/1280/1600px、Chrome Chromium E2E、键盘、触摸、无 JS、Save-Data、reduced-motion 均有自动化或明确手工记录。
-- 每个模块有 onMounted/onBeforeUnmount 或等价清理：AbortController、Observer、RAF、Timer、Worker、AudioContext、Three.js 和缓存更新监听均可重复进入退出。
-- Flag 关闭、运行时能力不足、动态资源失败、接口 5xx 和超时都回到静态可读路径，不出现死按钮、空面板或永久 loading。
-- 页面性能、可访问性和 SEO 不因阶段五效果低于既有阶段四门槛；阶段六再进行 30 分钟资源压测。
-
-测试场景：路由快速往返、并发加载图谱/首页/音乐、动态块失败、资源加载超时、低端/移动 viewport、A11y tree、文章 bundle、Lighthouse、控制台未处理异常和缓存清理。
-
-### S5-09：综合验收与文档
-
-| 属性 | 内容 |
-| --- | --- |
-| 优先级 | P0，阶段收口 |
-| 前置依赖 | S5-08 |
-| 工作量 | 8–12 小时 |
-| 公开接口 | OpenAPI、Nuxt manifest、Service Worker 与现有公开接口全部复核 |
-| 数据结构/Flag | 固定验收数据、Flag 矩阵、降级矩阵、结果记录 |
-
-目标：将阶段五的公开契约、视觉路径、资源预算、降级和生命周期固化为可重复的本地验收，并同步真实文档命令。
-
-非目标：不把本地通过写成远端 CI、真实 OSS/SMTP、备案、部署、生产压测或 AI 通过；不提交、推送或创建 PR。
-
-验收标准：
-
-- 图谱契约与生成客户端无差异；所有新增后端接口均有 Problem Details、ETag/缓存和边界测试。
-- 首页三幕、终端主题、音乐频谱、404、PWA 均有主路径、关闭开关和失败降级路径。
-- 文章 SSR、工具离线、终端安全、音频授权、Service Worker 缓存边界和资源释放均可验证。
-- README、完整开发计划、本地启动指南和阶段五文档只记录真实存在的命令和真实状态；本阶段没有业务实现时不提前勾选完成。
-- git diff --check 通过，未授权的用户改动未被覆盖、恢复、提交或删除。
-
-## 六、阶段五测试与验收计划
-
-### 6.1 契约与单元测试
-
-- API：图谱节点/边截断、公开可见性、稳定 ETag、Feature Flag 默认值、非法 manifest 配置和安全路径校验。
-- Web：终端 parser、主题状态、图谱数据归一化、音乐 manifest 校验、播放器状态机、频谱降级、404 状态机、PWA cache allowlist 和更新策略。
-- OpenAPI：生成 packages/api-client 后执行 check，禁止在 apps/web 手写重复 DTO。
-
-### 6.2 浏览器与 SSR 场景
-
-- 无 JavaScript打开首页、文章、404 和工具页，标题、正文/工具说明、错误路径和主要导航仍可用。
-- 首次进入首页不请求 Three.js；滚动进入第二幕后才加载，并在离开时释放。
-- 关闭所有阶段五 flags 后页面退回阶段四可用体验，不产生空白区域或报错。
-- 访问 360px、768px、1280px、1600px；键盘完成 Dock、终端、主题、播放器、图谱和 404 操作；触摸不依赖 hover。
-- Save-Data 和 prefers-reduced-motion 下不运行不必要动画；Lighthouse/控制台无回归。
-- 音乐只在用户手势后发起请求；路由切换不泄漏分析器；PWA 离线只支持公开工具箱。
-
-### 6.3 安全和资源场景
-
-- 终端命令注入、URL 穿越、超长输入、恶意搜索词和 XSS 字符不执行。
-- 图谱节点/链接、manifest 的音频/封面地址和 Service Worker scope 均执行协议、host、长度和数量限制。
-- 文章初始客户端闭包不含 Three.js、图谱重型依赖、编辑器、Worker 或音频分析代码。
-- 动态导入失败、WebGL/Web Audio 不可用、接口 5xx、缓存损坏、第三方资源超时都能回退。
-
-## 七、迭代安排与工作量
-
-按个人每周 15–20 小时估算，阶段五约 78–122 个理想开发小时，实际取决于图谱可视化和 Three.js 场景的复杂度。建议按以下顺序推进：
-
-| 迭代 | 任务 | 交付结果 |
-| --- | --- | --- |
-| 迭代 0 | S5-00 | 阶段准入、基线、任务文档和未执行项目清单 |
-| 迭代 1 | S5-01、S5-02 | 图谱契约、开关和静态/桌面图谱闭环 |
-| 迭代 2 | S5-03、S5-04 | 终端主题和首页三幕，含 Three.js 关闭回退 |
-| 迭代 3 | S5-05、S5-06、S5-07 | 音乐频谱、404 和工具箱最小离线能力（已完成） |
-| 迭代 4 | S5-08、S5-09 | 生命周期、性能降级、综合验收和文档收口 |
-
-并行规则：S5-03～S5-07 可以并行，但任何模块进入综合验收前都必须实现对应的关闭开关、无 JS/能力失败回退和卸载清理；没有这些路径，不得以“主路径可用”提前完成。
-
-## 八、阶段五最终完成定义
-
-阶段五只有同时满足以下条件才算完成：
-
-- S5-00～S5-09 的任务验收记录完整，且阶段文档、README/启动指南中的命令与真实脚本一致。
-- 知识星图使用受限公开契约，桌面交互可用，移动端和能力不足时退化为时间线；未公开数据和全文不泄露。
-- 终端是浏览器内白名单解析器，主题切换使用 html data-theme；无任何服务器 Shell 或 AI 请求越权。
-- 首页三幕首幕和日志 SSR 可读，Three.js 仅按需加载、文章包外置、离开路由彻底释放，失败时有静态回退。
-- 音乐来自服务端配置的受信任 OSS/CDN JSON 清单，默认不自动播放，音频授权信息可见，频谱可关闭且有 Web Audio 降级。
-- 404 游戏不阻塞错误恢复；PWA 只缓存公开离线工具箱，不缓存私有数据和 API 写入。
-- 360/768/1280/1600px、键盘、触摸、无 JS、Save-Data、reduced-motion、动态资源失败和路由往返通过。
-- 文章初始 JS 不超过 180KB gzip，既有 API/Web/OpenAPI/Compose 基线不回归；阶段六的 30 分钟压力测试和生产资源验收仍单独记录。
-- 本地验收通过不等于真实 SMTP、真实 OSS、域名/备案、部署、远端 CI/生产或 AI/RAG 通过；这些项目在报告中继续明确列为未执行或后续阶段。
-
-本迭代完成定义：S5-05～S5-07 业务代码、清单协议校验、播放器/频谱生命周期、404 降级、Manifest/Service Worker 缓存边界、工具离线准备入口及阶段五 Playwright 场景已落盘；未新增服务、数据库迁移或 OpenAPI 修改，也未添加音频二进制。阶段五综合 S5-08/S5-09、30 分钟压测、真实 OSS/CDN 音乐来源、远端 CI、部署和生产验收仍未执行。未提交、推送、创建 PR 或部署。
diff --git "a/docs/taget/\351\230\266\346\256\265\344\272\224\345\207\206\345\205\245\346\270\205\345\215\225.md" "b/docs/taget/\351\230\266\346\256\265\344\272\224\345\207\206\345\205\245\346\270\205\345\215\225.md"
deleted file mode 100644
index e8e99f5..0000000
--- "a/docs/taget/\351\230\266\346\256\265\344\272\224\345\207\206\345\205\245\346\270\205\345\215\225.md"
+++ /dev/null
@@ -1,185 +0,0 @@
-# 阶段五准入清单：非 AI 体验与本地收口
-
-## 0. 本轮结论
-
-本清单对应“阶段 5 迭代 3：S5-05 音乐与频谱 + S5-06 404 信号修复 + S5-07 PWA 离线工具箱”。本轮在已完成 S5-01～S5-04 的基础上完成 S5-05～S5-07；S5-08～S5-09 不提前勾选。
-
-- 本轮文档：docs/taget/第五阶段目标任务.md、本文件。
-- 已有 V16 站点体验开关、/api/v1/public/garden、OpenAPI 契约、生成客户端、Canvas 图谱及最小 d3-force 依赖；本轮新增 Nuxt 清单校验、动态信号磁带、404 动态游戏、原生 Manifest/Service Worker 和离线准备入口；未新增服务、数据库迁移、OpenAPI 字段或音频二进制。
-- 未提交、推送、创建 PR、部署或修改云资源。
-- 阶段四文档在当前工作树中已经是删除状态；本轮未恢复，阶段四基线从提交 f0bfdac 读取。
-
-## 一、Git 基线与用户资产
-
-| 项目 | 本轮记录 |
-| --- | --- |
-| 工作目录 | G:\work\HaoBlog |
-| 分支 | codex/s5 |
-| HEAD | 1771fb4（整理阶段五准入文档并建立阶段基线） |
-| 最近提交 | 1771fb4、f0bfdac、c246517、0b3b5b8、57a03a4、1b066e3、4330ffc、6c24570 |
-| 阶段五目录 | 本轮前不存在，已创建 docs/taget；该目录名按仓库规则保留为 taget |
-| 工作树初始状态 | AGENTS.md 修改；docs/HaoBlog 完整开发计划.md 修改；docs/第四阶段目标任务.md 删除；docs/阶段四准入清单.md 删除；无关用户改动已保留 |
-| 保留资产 | 上述用户修改全部保留，尤其是完整开发计划中的阶段五边界、PWA/音乐/彩蛋调整；不覆盖、不回退、不恢复删除文档 |
-
-阶段 2/3 目标文档在当前树不存在：阶段 2 原文从 df6fada68e5fc1ecaabe257115bbfca95d6a20eb:docs/第二阶段目标任务.md 读取，阶段 3 原文从 7a377ab19fec7b829f47308662bb1b981e6fa460:docs/第三阶段目标任务.md 读取。阶段 4 原文从 f0bfdac 的 docs/第四阶段目标任务.md 和 docs/阶段四准入清单.md 读取。阶段 2/3 的历史实际路径在 docs/ 根目录，不在当前工作树的 docs/taget。
-
-## 二、阶段四基线
-
-阶段四收口文档记录的本地 S4-10 基线如下；这些数字是历史基线，必须以本轮实际命令结果为准，不能替代真实生产或远端 CI 验收：
-
-- 环境：Windows 11、Java 21.0.11、Node.js 24.14.0、pnpm 11.16.0、Docker Engine 29.7.2、Compose 5.3.1。
-- API：-DskipITs verify Surefire 78/78；PostgreSQL/pgvector Failsafe 53/53。
-- Web：typecheck、Vitest 85/85、Nuxt production build 通过；Chromium Playwright 14/14。
-- OpenAPI：generate、check 和生成文件无差异通过。
-- 文章初始客户端静态闭包 65,244 bytes gzip，小于 180 KiB；Mermaid 位于异步 chunk。
-- Lighthouse：文章页和工具页移动 360×800 的 Performance、Accessibility、SEO 均为 1.00。
-- 生产 Compose 上限：Caddy 64 MiB/0.2 CPU/64 PID，Web 320 MiB/0.6 CPU/128 PID，API 640 MiB/1.25 CPU/256 PID，PostgreSQL 480 MiB/0.8 CPU/128 PID。
-- 未完成的外部项目：真实 SMTP、真实 OSS、域名/HTTPS、备案、ACR/部署、远端 CI/生产、备份恢复和合规材料。
-
-阶段五继承的本地硬门槛是：公共 SSR 不回归；文章初始 JS ≤180KB gzip；没有 Three.js 进入文章包；工具、评论、搜索、OpenAPI、Compose 和现有安全边界不回归。30 分钟压测、生产资源运行态和真实外部项目不在本轮通过范围。
-
-## 三、本轮实际环境
-
-| 命令 | 实际结果 | 状态 |
-| --- | --- | --- |
-| java -version | OpenJDK 21.0.11 LTS（2026-04-21） | 通过 |
-| node --version | v24.14.0 | 通过 |
-| corepack pnpm --version | 11.16.0 | 通过 |
-| docker version | Client/Server 29.7.2，Docker Desktop 4.86.0 | 通过 |
-| docker compose version | v5.3.1 | 通过 |
-
-以上五条环境命令已实际执行；其余基线命令在文档落盘后按下一节执行并回填结果。pnpm 命令的 Corepack 激活提示不影响最终版本为 11.16.0。
-
-## 四、阶段五预定验收命令
-
-以下命令是本轮预定执行的本地基线，不表示所有阶段五功能已经存在。命令均从仓库根目录执行；API 命令使用实际存在的 apps/api/mvnw.cmd。
-
-### 4.1 工具链与 API/Web/OpenAPI
-
-~~~powershell
-java -version
-node --version
-corepack pnpm --version
-docker version
-docker compose version
-
-Push-Location apps/api
-.\mvnw.cmd -DskipITs verify
-Pop-Location
-
-corepack pnpm --dir apps/web typecheck
-corepack pnpm --dir apps/web test
-corepack pnpm --dir apps/web build
-corepack pnpm --filter @haoblog/api-client check
-~~~
-
-本迭代已执行 generate，并在生成后执行 check；后续 OpenAPI 修改仍必须重复该流程并审阅生成文件 diff。
-
-### 4.2 Compose 与工作树
-
-~~~powershell
-docker compose --env-file .env.example -f infra/compose/compose.dev.yml config
-docker compose --env-file infra/compose/.env.ci.example -f infra/compose/compose.prod.yml config
-corepack pnpm compose:verify
-git diff --check
-~~~
-
-本轮不启动 Compose、不构建镜像、不创建测试 volume；config 和 compose:verify 只验证解析、资源限制、健康边界和端口约束。
-
-## 五、基线实际执行结果
-
-本节在命令运行结束后回填。状态只允许使用“通过”“阻塞”“未执行”，不能用历史阶段结果代替本轮结果。
-
-| 命令 | 结果 | 状态/阻塞原因 |
-| --- | --- | --- |
-| java -version | 21.0.11 LTS | 通过 |
-| node --version | v24.14.0 | 通过 |
-| corepack pnpm --version | 11.16.0 | 通过 |
-| docker version | Client/Server 29.7.2 | 通过 |
-| docker compose version | v5.3.1 | 通过 |
-| apps/api/.\\mvnw.cmd -DskipITs verify | Surefire 83/83，BUILD SUCCESS | 通过 |
-| apps/api/.\\mvnw.cmd failsafe:integration-test failsafe:verify | Testcontainers 55/55，BUILD SUCCESS；包含 S5 图谱与 Feature Flag 集成覆盖 | 通过 |
-| corepack pnpm --dir apps/web typecheck | nuxt prepare、vue-tsc 完成 | 通过 |
-| corepack pnpm --dir apps/web test | 20 个测试文件，86/86 | 通过 |
-| corepack pnpm --dir apps/web build | Nuxt client/server/Nitro build complete | 通过；有现有依赖 deprecation 和 Vite 大 chunk 警告 |
-| corepack pnpm --dir apps/web check:article-budget | 12 个静态闭包 chunk，65618 bytes gzip | 通过 |
-| corepack pnpm --filter @haoblog/api-client generate/check | 生成与 check 完成 | 通过 |
-| dev Compose config | Compose 配置成功解析 | 通过 |
-| prod Compose config | Compose 配置成功解析 | 通过 |
-| corepack pnpm compose:verify | Compose resource and health boundaries passed | 通过 |
-| git diff --check | exit code 0；仅有现有 CRLF 提示 | 通过 |
-
-## 六、阶段五准入判断
-
-### 6.1 迭代 2 实际状态
-
-- [x] S5-01 图谱契约与 Feature Flag：V16 默认关闭开关、公开/管理员 DTO、音乐清单校验、Studio version 乐观锁、OpenAPI 与生成客户端已完成。
-- [x] S5-02 知识星图：公开快照图谱、确定性 200/600 裁剪、ETag/60 秒共享缓存、SSR 时间线、桌面 d3-force Canvas、键盘预览、降级和 `/tools?tool=` 定位已完成。
-- [x] S5-03 安全终端与主题：Dock ⌘K/Ctrl+K 动态原生 dialog、白名单解析、20 条公开结果上限、50 条会话历史、焦点/键盘恢复、ask 降级、night/blueprint 主题恢复/持久化/五连击已完成。
-- [x] S5-04 首页三幕与 Three.js：首幕和近期日志 SSR、第二幕静态降级、threeDEnabled/Save-Data/reduced-motion/移动/粗指针/WebGL/视口门控、InstancedMesh + LineSegments、离开/隐藏暂停和卸载释放已完成。
-- [x] S5-05 音乐与频谱：version=1、64 KiB/20 首、HTTPS/授权字段校验，首次点击动态播放器，普通音频与 Web Audio/Canvas 降级，公共路由保持和 Studio 释放。
-- [x] S5-06 404 信号修复：404 桌面三段键盘游戏、三次尝试、读屏播报，移动/触摸/Save-Data/reduced-motion 降级，非 404 通用错误与重试。
-- [x] S5-07 PWA 离线工具箱：production/test 注册、显式二次确认、五个工具 chunk/SSR 快照缓存、network-first/cache-first、更新等待和缓存边界。
-- [ ] S5-08～S5-09：按计划保留未开始状态。
-
-### 6.2 迭代 2 历史基线
-
-| 命令/证据 | 结果 | 状态 |
-| --- | --- | --- |
-| `corepack pnpm --dir apps/web typecheck` | `nuxt prepare`、`vue-tsc -b --noEmit` 完成 | 通过 |
-| `corepack pnpm --dir apps/web test` | 21 个测试文件，88/88；含终端合法/恶意命令解析 | 通过 |
-| `corepack pnpm --dir apps/web build` | Nuxt client/server/Nitro build complete | 通过；保留现有依赖 deprecation/Vite 大 chunk 警告 |
-| `corepack pnpm web:budget` | 文章初始静态闭包 15 个 chunk，66350 bytes gzip | 通过 |
-| Three 动态 chunk | `C5rh5wLt2.js`，724236 bytes 原始，183243 bytes gzip；`HomeThreeScene` 单独动态组件 chunk | 通过，小于 500 KiB |
-| `corepack pnpm --dir apps/web exec playwright test stage5.spec.ts` | 阶段五 Chromium 场景 6/6 通过：S5-01/S5-02 回归、终端/主题、首页三幕/Three 门控 | 通过 |
-| `corepack pnpm --dir apps/web exec playwright test stage3.spec.ts` | 阶段三公共站 Chromium 场景 5/5 通过；首页 SSR 断言同步到三幕首幕标记 | 通过 |
-| `corepack pnpm --dir apps/web exec playwright test stage4.spec.ts` | 阶段四公共站 Chromium 场景 6/6 通过；评论正文选择器收紧为 textbox 语义 | 通过 |
-| `git diff --check` | 无空白错误；仅有 Windows 工作树换行格式提示 | 通过 |
-
-### 6.3 迭代 3 实际验证（2026-08-24）
-
-| 命令/证据 | 结果 | 状态 |
-| --- | --- | --- |
-| `cd apps/api; .\\mvnw.cmd -DskipITs verify` | 83 个 API 单测通过；Failsafe 按本轮要求跳过 | 通过 |
-| `corepack pnpm --dir apps/web typecheck` | `nuxt prepare`、`vue-tsc -b --noEmit` 完成 | 通过 |
-| `corepack pnpm --dir apps/web test` | 23 个测试文件，97/97；含清单协议、缓存边界、错误页和懒加载静态测试 | 通过 |
-| `corepack pnpm --dir apps/web build` | 默认 `api:8080` 生产配置下 Nuxt client/server/Nitro build complete；无临时音乐清单 | 通过；保留现有依赖 deprecation/Vite 大 chunk 警告 |
-| `corepack pnpm web:budget` | 文章初始静态闭包 18 个 chunk，67168 bytes gzip；Mermaid 仍在异步 chunk | 通过 |
-| `stage5.spec.ts`（生产构建、offline context） | 9/9；含音乐关闭/首次点击、404 键盘/移动降级、PWA 显式准备/断网重开/缓存排除 | 通过 |
-| `stage2.spec.ts` | 2/3 通过；定时发布用例及单独重试均在 20 秒后保持 404 | 环境风险，未归因本轮改动 |
-| `stage3.spec.ts` | 5/5 公共站关键 E2E 通过 | 通过 |
-| `stage4.spec.ts` | 6/6 评论、工具、搜索、Studio 合约 E2E 通过 | 通过 |
-| `docker compose ... compose.dev.yml config` | Compose 配置成功解析 | 通过 |
-| `docker compose ... compose.prod.yml config` | Compose 配置成功解析 | 通过 |
-| `corepack pnpm compose:verify` | `Compose resource and health boundaries passed` | 通过 |
-| `git diff --check` | 无空白错误；仅有 Windows 工作树换行格式提示 | 通过 |
-
-开始 S5-01 业务实现前，必须满足：
-
-- 本文件和 docs/taget/第五阶段目标任务.md 已存在且描述与用户锁定决策一致。
-- API -DskipITs verify、Web typecheck/test/build、OpenAPI check、两套 Compose config、compose:verify 和 git diff --check 均通过；阻塞项必须有环境证据和替代验证，不得口头豁免。
-- 工作树中的 AGENTS.md 和完整开发计划修改仍保持用户原文；阶段四删除文档不因本轮被恢复。
-- 开始业务实现时先从 S5-01 契约和 Feature Flag 入手，再实现图谱与体验组件；不直接创建空类或占位 API。
-- 任何新增依赖先说明当前栈不足、路由懒加载方式和 bundle/runtime 成本；优先 CSS、浏览器原生 API 和现有 Vue 能力。
-
-## 七、未执行外部项目与剩余风险
-
-以下项目本轮明确未执行，不能在阶段五本地文档通过后宣称完成：
-
-- 远端 GitHub Actions/CI、镜像推送、ACR、部署和远端生产验收。
-- 真实 OSS/CDN 音乐清单、真实 OSS 媒体上传、真实 SMTP 投递。
-- 真实域名、HTTPS、ICP/公安备案、隐私/评论/AI 合规材料。
-- 数据库备份上传、解密、恢复和 RPO/RTO 演练。
-- 阶段六的 30 分钟 2GB 压测、持续 Swap、OOM、容器资源运行态和回滚演练。
-- AI 基础、SSE、RAG、Embedding、模型供应商、费用和 AI 安全评测。
-
-剩余风险：图谱/Three.js/音频分析会增加浏览器内存和首屏后交互成本；低端移动设备和 Safari 的 WebGL/Web Audio 行为需在 S5-08 实机或等价浏览器路径验证；真实音乐授权、第三方 CDN CORS/可用性和 Service Worker 更新接管仍需真实来源/浏览器矩阵确认；阶段四文档当前不在工作树，后续引用应保持提交来源可追溯。阶段二定时发布关键 E2E 在本地现有环境持续返回 404，需另行排查。
-
-## 八、本轮完成定义
-
-- [x] 读取并记录 AGENTS、完整开发计划、阶段 2/3 历史任务、阶段 4 收口文档、设计语言、README 和本地启动指南。
-- [x] 读取并使用 .agents/skills/haoblog-design/SKILL.md 的“仪器而非装饰、降级是一等路径”原则。
-- [x] 记录 Git 分支、HEAD、最近提交、用户未提交修改、阶段四删除状态和未跟踪文件检查。
-- [x] 创建阶段五目标任务和本准入清单。
-- [x] 完成本节“基线实际执行结果”的所有命令并逐项记录。
-- [ ] 阶段五全部业务功能完成；S5-01～S5-07 已完成，S5-08/S5-09 本轮明确不做。
diff --git "a/docs/\346\234\254\345\234\260\345\220\257\345\212\250\346\214\207\345\215\227.md" "b/docs/\346\234\254\345\234\260\345\220\257\345\212\250\346\214\207\345\215\227.md"
index f308b15..7a729cd 100644
--- "a/docs/\346\234\254\345\234\260\345\220\257\345\212\250\346\214\207\345\215\227.md"
+++ "b/docs/\346\234\254\345\234\260\345\220\257\345\212\250\346\214\207\345\215\227.md"
@@ -1,6 +1,6 @@
 # HaoBlog 本地启动指南
 
-本文适用于本地开发和阶段四综合验收。默认使用 Docker Compose 提供 PostgreSQL/pgvector、Spring Boot API 和 Nuxt Web；生产 Compose 只用于与 CI 等价的本地验收或真实生产环境，不作为日常开发启动方式。
+本文适用于本地开发和阶段五本地综合验收。默认使用 Docker Compose 提供 PostgreSQL/pgvector、Spring Boot API 和 Nuxt Web；生产 Compose 只用于与 CI 等价的独立本地验收或真实生产环境，不作为日常开发启动方式。
 
 ## 最简启动
 
@@ -323,31 +323,58 @@ docker compose --env-file infra/compose/.env.ci.example -f infra/compose/compose
 corepack pnpm compose:verify
 ```
 
-### 阶段四生产编排验收
+### 阶段五独立生产编排验收
 
-阶段三公开阅读已作为阶段四前置条件完成。当前完整命令见 [阶段四准入清单](阶段四准入清单.md) 和 [第四阶段目标任务](第四阶段目标任务.md)。验收时使用独立项目名 `haoblog-s4-10-acceptance`，构建测试镜像后启动生产 Compose，再依次运行 Smoke、完整 Chromium Playwright、客户端预算和两条 Lighthouse 路由。Playwright 使用测试账号 `admin/password`，必须配合 `infra/compose/.env.ci.example`，不能指向生产数据。
-
-Lighthouse 审计已运行的 Caddy 时需要：
+阶段五完整记录保存在本机私有的 `docs/target`，不纳入公开仓库。只使用独立项目名 `haoblog-s5-acceptance`、`infra/compose/.env.ci.example` 和专用镜像；这些占位配置不能指向真实生产数据。
 
 ```powershell
-$env:LHCI_EXISTING_SERVER = 'true'
-$env:LHCI_BASE_URL = 'http://localhost'
-$env:LHCI_ARTICLE_PATH = '/articles/s3-08-advanced-markdown'
-corepack pnpm web:lighthouse
+docker build -f apps/api/Dockerfile -t haoblog-api:s5-acceptance .
+docker build -f apps/web/Dockerfile -t haoblog-web:s5-acceptance .
+
+$env:HAOBLOG_API_IMAGE = 'haoblog-api:s5-acceptance'
+$env:HAOBLOG_WEB_IMAGE = 'haoblog-web:s5-acceptance'
+$env:HAOBLOG_PUBLIC_BASE_URL = 'http://localhost'
+$env:HAOBLOG_MUSIC_MANIFEST_URL = 'https://example.invalid/manifest.json'
+docker compose -p haoblog-s5-acceptance --env-file infra/compose/.env.ci.example -f infra/compose/compose.prod.yml up -d --wait --wait-timeout 180
+
+$env:HAOBLOG_BASE_URL = 'http://localhost'
+corepack pnpm smoke
+$env:CI = 'true'
+$env:HAOBLOG_MUSIC_TEST = 'true'
+corepack pnpm --dir apps/web e2e
+corepack pnpm web:budget
 ```
 
-工具页 Lighthouse 使用同一命令将 `LHCI_ARTICLE_PATH` 改为 `/tools`，两条命令应串行执行。Windows 若 Chrome 清理临时目录出现 EPERM，可使用工作区内一次性的专用目录：
+Lighthouse 对 `/`、`/garden`、`/tools` 和 `/articles/s3-08-advanced-markdown` 逐条串行执行，不共享仍工作的 Chrome。默认每个路由 3 次；本轮在 Windows 上为规避 Chrome 151 `chrome-launcher` 清理 EPERM，使用 `LHCI_NUMBER_OF_RUNS=1`，为每个路由显式启动独立 Playwright Chromium 远程调试实例并设置 `LHCI_CHROME_PORT`。普通环境可直接使用：
 
 ```powershell
-$lhTemp = Join-Path (Get-Location) '.tmp-lighthouse-s4-10'
+$lhTemp = Join-Path (Get-Location) '.tmp-lighthouse-s5-acceptance'
 New-Item -ItemType Directory -Force -Path $lhTemp | Out-Null
 $env:TEMP = $lhTemp
 $env:TMP = $lhTemp
+$env:LHCI_EXISTING_SERVER = 'true'
+$env:LHCI_BASE_URL = 'http://localhost'
+
+foreach ($route in @('/', '/garden', '/tools', '/articles/s3-08-advanced-markdown')) {
+  $env:LHCI_ARTICLE_PATH = $route
+  corepack pnpm web:lighthouse
+  if ($LASTEXITCODE -ne 0) { throw "Lighthouse failed: $route" }
+}
 ```
 
-阶段四本地结果：API Surefire 78/78、PostgreSQL/pgvector Failsafe 53/53、Web Vitest 85/85、Chromium 14/14；文章初始客户端静态闭包 65,244 bytes gzip，工具组件和 Worker 不进入文章初始包；文章页与工具页 Lighthouse 的 Performance、Accessibility、SEO 均为 1.00。生产 Compose 的资源上限为 Caddy 64 MiB/0.2 CPU/64 PID、Web 320 MiB/0.6 CPU/128 PID、API 640 MiB/1.25 CPU/256 PID、PostgreSQL 480 MiB/0.8 CPU/128 PID。
+404 必须保留真实 404 和 `noindex,nofollow`。Lighthouse 12.6.1 即使设置 `LHCI_NOINDEX=true`（内部启用 `ignore-status-code` 并取消 SEO 门槛）仍可能因非 2xx 导航返回 `NO_FCP`；不得把 Paint API 或 Playwright 结果伪装成 Lighthouse 分数。
+
+阶段五本地结果：API 83/83 + 55/55，Web Vitest 98/98，最终 Chromium 26/26；文章初始客户端静态闭包 67,168 bytes gzip，Three 主动态 chunk 183,243 bytes gzip；首页、花园、工具 Lighthouse 三类均 1.00，固定文章为 0.91/1.00/1.00。短时资源快照和日志扫描记录在本机私有验收资料中；这些结果不等于阶段六 30 分钟 2GB 压测。
+
+验收结束后只清理专用项目：
+
+```powershell
+$env:HAOBLOG_API_IMAGE = 'haoblog-api:s5-acceptance'
+$env:HAOBLOG_WEB_IMAGE = 'haoblog-web:s5-acceptance'
+docker compose -p haoblog-s5-acceptance --env-file infra/compose/.env.ci.example -f infra/compose/compose.prod.yml down -v --remove-orphans
+```
 
-本地验收不等于真实 SMTP、OSS、域名 HTTPS、备案或部署通过；这些项目必须在具备真实配置后单独验收。本轮明确未执行真实 SMTP、真实域名、真实 OSS、部署和远端生产验收。
+本地验收不等于远端 CI、真实 OSS/CDN 音频与 CORS、真实域名/HTTPS 安装、部署、备案、真实 SMTP、备份恢复或生产验收通过。
 
 ## 6. 停止和清理
 
diff --git "a/docs/\347\254\254\345\233\233\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md" "b/docs/\347\254\254\345\233\233\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md"
deleted file mode 100644
index d3d8575..0000000
--- "a/docs/\347\254\254\345\233\233\351\230\266\346\256\265\347\233\256\346\240\207\344\273\273\345\212\241.md"
+++ /dev/null
@@ -1,97 +0,0 @@
-# 第四阶段目标任务：评论、工具箱、搜索与综合验收
-
-## 实际完成状态
-
-2026-08-23 在 Windows 11、Java 21.0.11、Node.js 24.14.0、pnpm 11.16.0、Docker Engine 29.7.2 和 Docker Compose 5.3.1 下完成本地 S4-10 综合验收。S4-01～S4-09 均已完成，S4-10 的本地契约、E2E、性能、安全和文档验收已完成。远端 CI、真实 SMTP、真实域名 HTTPS、真实 OSS、部署和远端生产验收未执行，不能据此宣称上线。
-
-| 任务 | 状态 | 验收结论 |
-| --- | --- | --- |
-| S4-01 评论模型与站点/文章开关 | [x] 完成 | Flyway、DTO、版本控制与全局/单篇开关可用。 |
-| S4-02 评论安全存储、通知 Outbox 与 SMTP 故障隔离 | [x] 完成 | 邮箱加密、IP HMAC、删除令牌摘要、Outbox 重试和 SMTP 失败不回滚提交通过单测与集成覆盖。 |
-| S4-03 游客评论挑战、限频、反重放、删除 | [x] 完成 | CSRF/挑战、3 秒窗口、挑战消费、恶意输入、限频和删除令牌流程通过运行态 E2E。 |
-| S4-04 文章 SSR 评论信号与游客交互 | [x] 完成 | 无 JavaScript 可读评论信号；真实文章评论接口与待审反馈通过 E2E。 |
-| S4-05 Studio 评论审核与审计 | [x] 完成 | 待审核、通过、垃圾、拒绝、一级回复和用户删除状态通过 Studio/API 验收。 |
-| S4-06 缓存窗口与评论开关即时生效 | [x] 完成 | 全局与单篇开关、ETag/缓存窗口和公开边界通过 E2E/集成测试。 |
-| S4-07 工具分类、LINK/SHOWCASE/EMBEDDED 管理 | [x] 完成 | Studio 工具 CRUD、公开目录、收藏和最常用排序通过 E2E。 |
-| S4-08 五个浏览器内嵌工具与 Worker 隔离 | [x] 完成 | JSON、Base64、URL、时间戳、正则五个输入输出、网络隔离、1 MiB/100 KiB 输入上限和 Worker 250ms 超时通过 E2E/单测。 |
-| S4-09 中文文章搜索 | [x] 完成 | 标题、摘要、正文、特殊字符、分页、无 JavaScript 和未公开文章边界通过 E2E/集成测试。 |
-| S4-10 综合验收 | [x] 完成 | 下方固定数据、全量 Chromium、资源、安全、Bundle 和 Lighthouse 均完成。 |
-
-## 固定验收数据
-
-S4-10 使用独立生产 Compose 项目和临时 PostgreSQL volume，每次重建，测试结束后删除。运行态测试固定建立：
-
-- 一篇开放评论文章和一篇关闭评论文章。
-- 待审核、已通过、垃圾、拒绝、一级回复和用户删除评论；测试邮箱、正文、IP 与删除令牌只通过接口验证，不写入日志。
-- LINK、SHOWCASE 和五个 `EMBEDDED` 工具：`json-format`、`base64`、`url-codec`、`timestamp`、`regex-test`。
-- 分别命中标题、摘要、正文的中文搜索文章，以及一篇未发布、不得公开命中的文章。
-
-## 验收数字
-
-- API `-DskipITs verify`：Surefire 78/78。
-- PostgreSQL/pgvector Failsafe：53/53。
-- Web：typecheck 通过，Vitest 19 个文件、85/85，通过 Nuxt production build。
-- Chromium Playwright：14/14，包含 S2、S3 和 S4 场景；S4-10 专项 2/2。
-- 文章初始客户端静态闭包：13 个静态 chunk，65,244 bytes gzip，小于 180 KiB；Mermaid 在异步 chunk。
-- Lighthouse（移动 360×800，3 次运行）：文章页 `/articles/s3-08-advanced-markdown` 与工具页 `/tools` 的 Performance、Accessibility、SEO 均为 1.00，阈值为 0.90。
-- 生产 Compose 资源上限：Caddy 64 MiB/0.2 CPU/64 PID、Web 320 MiB/0.6 CPU/128 PID、API 640 MiB/1.25 CPU/256 PID、PostgreSQL 480 MiB/0.8 CPU/128 PID。
-- 收口时运行态观察值：API 409.4 MiB、Caddy 16.79 MiB、PostgreSQL 47.93 MiB、Web 105.7 MiB；均未超过上限。
-
-## 验收命令
-
-```powershell
-java -version
-node --version
-corepack pnpm --version
-docker version --format '{{.Server.Version}}'
-docker compose version
-
-Push-Location apps/api
-.\mvnw.cmd -DskipITs verify
-.\mvnw.cmd failsafe:integration-test failsafe:verify
-Pop-Location
-
-corepack pnpm --dir apps/web typecheck
-corepack pnpm --dir apps/web test
-corepack pnpm --dir apps/web build
-corepack pnpm --filter @haoblog/api-client generate
-corepack pnpm --filter @haoblog/api-client check
-git diff --exit-code -- packages/api-client/src/generated.ts
-docker compose --env-file .env.example -f infra/compose/compose.dev.yml config
-docker compose --env-file infra/compose/.env.ci.example -f infra/compose/compose.prod.yml config
-corepack pnpm compose:verify
-
-docker build -f apps/api/Dockerfile -t haoblog-api:s4-10-final .
-docker build -f apps/web/Dockerfile -t haoblog-web:s4-10-final .
-$env:HAOBLOG_API_IMAGE = 'haoblog-api:s4-10-final'
-$env:HAOBLOG_WEB_IMAGE = 'haoblog-web:s4-10-final'
-$env:HAOBLOG_PUBLIC_BASE_URL = 'http://localhost'
-docker compose -p haoblog-s4-10-acceptance --env-file infra/compose/.env.ci.example -f infra/compose/compose.prod.yml up -d --wait --wait-timeout 180
-$env:HAOBLOG_BASE_URL = 'http://localhost'
-corepack pnpm smoke
-$env:CI = 'true'
-corepack pnpm --dir apps/web e2e
-corepack pnpm web:budget
-$env:LHCI_EXISTING_SERVER = 'true'
-$env:LHCI_BASE_URL = 'http://localhost'
-$env:LHCI_ARTICLE_PATH = '/articles/s3-08-advanced-markdown'
-corepack pnpm web:lighthouse
-$env:LHCI_ARTICLE_PATH = '/tools'
-corepack pnpm web:lighthouse
-git diff --check
-docker compose -p haoblog-s4-10-acceptance --env-file infra/compose/.env.ci.example -f infra/compose/compose.prod.yml down -v --remove-orphans
-```
-
-Windows Lighthouse 若清理临时目录偶发 EPERM，应在两次 Lighthouse 命令前设置一次工作区内专用 `TEMP`/`TMP` 目录；本轮该方式成功。
-
-## 安全与边界结论
-
-- 运行态 API 日志扫描未发现验收正文、邮箱、IP、删除令牌、评论安全密钥或 SMTP 密码。
-- SMTP 故障隔离由 `CommentNotificationMailerTest`、`CommentNotificationOutboxProcessorTest` 和 Outbox 集成覆盖；本地验收未连接真实 SMTP。
-- 大文本按字节数限制，正则在独立 Worker 中运行，超时后终止并重建 Worker；主线程不执行正则。
-- 生产拓扑仍只有 Caddy、Nuxt、Spring Boot 和 PostgreSQL/pgvector；只有 Caddy 暴露 80/443。
-- 未执行真实 SMTP、域名/HTTPS、OSS、部署、远端 CI 或远端生产验收；这些是剩余外部验收项，不是本地 S4-10 通过的推断结果。
-
-## 本轮修复
-
-验收发现 Studio 评论审核列表在 PostgreSQL 下对可选关键词、状态和文章 ID 的参数类型绑定不稳定，并且原生查询会错误追加 Java 属性名 `createdAt`。已将应用层筛选参数明确转为字符串，在 PostgreSQL 查询中显式转换并在 SQL 内处理升降序；未改变 OpenAPI 路径或 DTO 契约。修复后 API 78/78、Failsafe 53/53 和完整 Chromium 14/14 均通过。
diff --git "a/docs/\351\230\266\346\256\265\345\233\233\345\207\206\345\205\245\346\270\205\345\215\225.md" "b/docs/\351\230\266\346\256\265\345\233\233\345\207\206\345\205\245\346\270\205\345\215\225.md"
deleted file mode 100644
index faed41d..0000000
--- "a/docs/\351\230\266\346\256\265\345\233\233\345\207\206\345\205\245\346\270\205\345\215\225.md"
+++ /dev/null
@@ -1,82 +0,0 @@
-# 阶段四准入清单：评论、工具箱、搜索与综合验收
-
-## S4-10 本地收口状态
-
-2026-08-23 本地综合验收完成。环境为 Java 21.0.11、Node.js 24.14.0、pnpm 11.16.0、Docker Engine 29.7.2、Compose 5.3.1。下面的勾选只表示本地可复现结果，不代表远端或真实生产已验收。
-
-### 契约、代码与数据库
-
-- [x] Java 21、Node.js 24、pnpm 11.16.0、Docker Engine 29.7.2、Compose 5.3.1 已确认。
-- [x] API `-DskipITs verify` 通过，Surefire 78/78。
-- [x] PostgreSQL/pgvector Testcontainers Failsafe 通过，53/53。
-- [x] Web typecheck、Vitest 85/85 和 production build 通过。
-- [x] OpenAPI generate、check 和生成文件无差异通过。
-- [x] dev/prod Compose config 与资源/健康边界校验通过。
-
-### 运行态与 E2E
-
-- [x] 独立项目 `haoblog-s4-10-acceptance` 使用测试镜像启动，Caddy、Web、API、PostgreSQL/pgvector 均 healthy。
-- [x] Smoke 通过，Actuator 未从 Caddy 公网路径暴露。
-- [x] 完整 Chromium Playwright 14/14 通过；覆盖四档视口、键盘、无 JavaScript、Save-Data、reduced-motion、SSR、评论、Studio、工具和搜索。
-- [x] 游客获取 CSRF/挑战、待审提交、挑战重放、恶意输入、限频、删除令牌、公共评论和全局/单篇开关通过。
-- [x] Studio 审核待审、已通过、垃圾、拒绝、一级回复和用户删除状态通过。
-- [x] Studio 工具 CRUD、LINK、SHOWCASE、五个 EMBEDDED、收藏/最常用排序、Worker 输入输出与网络隔离通过。
-- [x] 中文标题/摘要/正文搜索、特殊字符、分页、无 JavaScript 和公开边界通过。
-
-### 性能、资源与安全
-
-- [x] 文章初始客户端静态闭包 65,244 bytes gzip，小于 180 KiB；工具组件和 Worker 不进入文章初始包。
-- [x] 文章页和工具页 Lighthouse 三次运行的 Performance、Accessibility、SEO 均为 1.00，均不低于 0.90。
-- [x] Caddy/Web/API/PostgreSQL 的内存、CPU、PID 上限保持 64/320/640/480 MiB、0.2/0.6/1.25/0.8 CPU、64/128/256/128 PID。
-- [x] 收口观察值为 API 409.4 MiB、Caddy 16.79 MiB、PostgreSQL 47.93 MiB、Web 105.7 MiB。
-- [x] 日志未发现评论正文、邮箱、IP、删除令牌、安全密钥或 SMTP 密码。
-- [x] SMTP 故障隔离、大文本限制和正则 Worker 超时有单测/集成覆盖；正则 Worker 超时为 250ms。
-- [x] `git diff --check` 通过。
-
-## 阶段四验收命令
-
-依赖、代码、契约和配置：
-
-```powershell
-Push-Location apps/api
-.\mvnw.cmd -DskipITs verify
-.\mvnw.cmd failsafe:integration-test failsafe:verify
-Pop-Location
-corepack pnpm --dir apps/web typecheck
-corepack pnpm --dir apps/web test
-corepack pnpm --dir apps/web build
-corepack pnpm --filter @haoblog/api-client generate
-corepack pnpm --filter @haoblog/api-client check
-git diff --exit-code -- packages/api-client/src/generated.ts
-docker compose --env-file .env.example -f infra/compose/compose.dev.yml config
-docker compose --env-file infra/compose/.env.ci.example -f infra/compose/compose.prod.yml config
-corepack pnpm compose:verify
-```
-
-生产编排、Smoke、E2E、性能与清理：
-
-```powershell
-docker build -f apps/api/Dockerfile -t haoblog-api:s4-10-final .
-docker build -f apps/web/Dockerfile -t haoblog-web:s4-10-final .
-$env:HAOBLOG_API_IMAGE = 'haoblog-api:s4-10-final'
-$env:HAOBLOG_WEB_IMAGE = 'haoblog-web:s4-10-final'
-$env:HAOBLOG_PUBLIC_BASE_URL = 'http://localhost'
-docker compose -p haoblog-s4-10-acceptance --env-file infra/compose/.env.ci.example -f infra/compose/compose.prod.yml up -d --wait --wait-timeout 180
-$env:HAOBLOG_BASE_URL = 'http://localhost'
-corepack pnpm smoke
-$env:CI = 'true'
-corepack pnpm --dir apps/web e2e
-corepack pnpm web:budget
-$env:LHCI_EXISTING_SERVER = 'true'
-$env:LHCI_BASE_URL = 'http://localhost'
-$env:LHCI_ARTICLE_PATH = '/articles/s3-08-advanced-markdown'
-corepack pnpm web:lighthouse
-$env:LHCI_ARTICLE_PATH = '/tools'
-corepack pnpm web:lighthouse
-git diff --check
-docker compose -p haoblog-s4-10-acceptance --env-file infra/compose/.env.ci.example -f infra/compose/compose.prod.yml down -v --remove-orphans
-```
-
-## 未执行项目
-
-真实 SMTP 投递、真实域名与 HTTPS、真实 OSS、镜像推送、部署、远端 CI 和远端生产验收均未执行。`infra/compose/.env.ci.example` 的账号、密钥和 OSS 值只用于临时本地验收，不能用于生产。

From d17fa8ed0e3723f5024a720391efedc7bc9d6e40 Mon Sep 17 00:00:00 2001
From: DDT <––1786035110@stu.gpnu.edu.cn>
Date: Fri, 28 Aug 2026 23:20:16 +0800
Subject: [PATCH 7/7] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=98=B6=E6=AE=B5?=
 =?UTF-8?q?=E4=BA=94=E5=AE=A1=E6=9F=A5=E4=B8=8E=E7=94=9F=E4=BA=A7=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.example                                  |  1 +
 .github/workflows/ci.yml                      |  2 +-
 .../AliyunOssObjectStorage.java               | 26 ++++++++--
 .../haoblog/site/application/SiteService.java | 16 +++---
 .../site/web/PublicSiteController.java        |  9 ++--
 .../test/java/io/haoblog/AdminCommentIT.java  |  2 +-
 .../AliyunOssObjectStorageTest.java           | 50 +++++++++++++++++++
 .../site/application/SiteServiceTest.java     |  3 +-
 .../components/garden/GardenCanvas.client.vue | 32 +++++++++---
 apps/web/app/utils/publicSite.ts              |  1 -
 .../web/test/phase5-static-boundaries.test.ts |  5 ++
 docs/openapi/public-api.yaml                  |  3 +-
 packages/api-client/src/generated.ts          |  2 -
 13 files changed, 119 insertions(+), 33 deletions(-)

diff --git a/.env.example b/.env.example
index 5e30406..9417a97 100644
--- a/.env.example
+++ b/.env.example
@@ -36,6 +36,7 @@ HAOBLOG_COMMENT_NOTIFICATION_ENABLED=false
 HAOBLOG_OSS_ENABLED=false
 # HAOBLOG_OSS_BUCKET=haoblog-bucket
 # HAOBLOG_OSS_REGION=cn-guangzhou
+# 地域服务 Endpoint 仅用于签名；生产数据请求使用下方自定义公开域名。
 # HAOBLOG_OSS_ENDPOINT=https://oss-cn-guangzhou.aliyuncs.com
 # HAOBLOG_OSS_ACCESS_KEY_ID=replace-with-server-access-key-id
 # HAOBLOG_OSS_ACCESS_KEY_SECRET=replace-with-server-access-key-secret
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index b907484..4d6f859 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -6,7 +6,7 @@ on:
   pull_request:
 
 jobs:
-  stage-4-acceptance:
+  stage-5-acceptance:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
diff --git a/apps/api/src/main/java/io/haoblog/media/infrastructure/AliyunOssObjectStorage.java b/apps/api/src/main/java/io/haoblog/media/infrastructure/AliyunOssObjectStorage.java
index 5c808e8..8cdc208 100644
--- a/apps/api/src/main/java/io/haoblog/media/infrastructure/AliyunOssObjectStorage.java
+++ b/apps/api/src/main/java/io/haoblog/media/infrastructure/AliyunOssObjectStorage.java
@@ -44,8 +44,9 @@ public AliyunOssObjectStorage(AliyunOssProperties properties, HttpClient httpCli
             throw new IllegalArgumentException("OSS upload limits must be positive");
         }
         host = properties.getBucket() + "." + endpointHost(properties.getEndpoint());
-        publicBaseUrl = trimTrailingSlash(properties.getPublicBaseUrl().isBlank()
-                ? "https://" + host : properties.getPublicBaseUrl());
+        String configuredPublicBaseUrl = properties.getPublicBaseUrl();
+        publicBaseUrl = normalizePublicBaseUrl(configuredPublicBaseUrl == null || configuredPublicBaseUrl.isBlank()
+                ? "https://" + host : configuredPublicBaseUrl);
     }
 
     @Override
@@ -77,14 +78,14 @@ public UploadGrant createUploadGrant(UploadSpec spec, Instant now) {
         fields.put("x-oss-credential", credential);
         fields.put("x-oss-date", dateTime);
         fields.put("x-oss-signature", signature);
-        return new UploadGrant("https://" + host + "/", fields, expiresAt);
+        return new UploadGrant(publicBaseUrl + "/", fields, expiresAt);
     }
 
     @Override
     public StoredObject head(String objectKey) {
         if (!headSlots.tryAcquire()) throw new ObjectStorageException("OSS metadata capacity is temporarily exhausted");
         try {
-            HttpRequest request = HttpRequest.newBuilder(URI.create("https://" + host + "/" + encodePath(objectKey)))
+            HttpRequest request = HttpRequest.newBuilder(URI.create(publicBaseUrl + "/" + encodePath(objectKey)))
                     .timeout(Duration.ofSeconds(5))
                     .method("HEAD", HttpRequest.BodyPublishers.noBody())
                     .build();
@@ -166,6 +167,23 @@ private static String endpointHost(String endpoint) {
         return uri.getHost();
     }
 
+    private static String normalizePublicBaseUrl(String value) {
+        URI uri;
+        try {
+            uri = URI.create(value.trim());
+        } catch (IllegalArgumentException exception) {
+            throw new IllegalStateException("OSS publicBaseUrl must be an HTTPS origin", exception);
+        }
+        String path = uri.getRawPath();
+        if (!uri.isAbsolute() || !"https".equalsIgnoreCase(uri.getScheme())
+                || uri.getHost() == null || uri.getHost().isBlank() || uri.getUserInfo() != null
+                || uri.getQuery() != null || uri.getFragment() != null
+                || (path != null && !path.isEmpty() && !"/".equals(path))) {
+            throw new IllegalStateException("OSS publicBaseUrl must be an HTTPS origin");
+        }
+        return trimTrailingSlash(value.trim());
+    }
+
     private static String trimTrailingSlash(String value) { return value.replaceAll("/+$", ""); }
 
     private static String encodePath(String value) {
diff --git a/apps/api/src/main/java/io/haoblog/site/application/SiteService.java b/apps/api/src/main/java/io/haoblog/site/application/SiteService.java
index 55f7ba7..1251662 100644
--- a/apps/api/src/main/java/io/haoblog/site/application/SiteService.java
+++ b/apps/api/src/main/java/io/haoblog/site/application/SiteService.java
@@ -47,7 +47,7 @@ public SiteResult get() {
         var setting = repository.findBySiteKey("default").orElseThrow();
         return new SiteResult(setting.getTitle(), setting.getDescription(), publicBaseUrl, authorName,
                 setting.isCommentsEnabled(), setting.isMusicEnabled() && musicManifestUrl != null,
-                setting.isThreeDEnabled(), musicManifestUrl);
+                setting.isThreeDEnabled());
     }
 
     public AdminSiteResult getAdmin() {
@@ -113,14 +113,15 @@ static String normalizeMusicManifestUrl(String raw, String activeProfiles) {
         } catch (IllegalArgumentException exception) {
             throw new IllegalArgumentException("HAOBLOG_MUSIC_MANIFEST_URL must be an absolute HTTPS URL", exception);
         }
-        boolean absoluteHost = uri.isAbsolute() && uri.getHost() != null && uri.getUserInfo() == null
+        String host = uri.getHost();
+        boolean absoluteHost = uri.isAbsolute() && host != null && uri.getUserInfo() == null
                 && uri.getFragment() == null;
         boolean https = "https".equalsIgnoreCase(uri.getScheme());
         boolean localProfile = Arrays.stream((activeProfiles == null ? "" : activeProfiles).split(","))
                 .map(String::trim).map(valueProfile -> valueProfile.toLowerCase(Locale.ROOT))
                 .anyMatch(profile -> profile.equals("local") || profile.equals("dev") || profile.equals("test"));
-        boolean localhostHttp = "http".equalsIgnoreCase(uri.getScheme()) && localProfile
-                && SetOfLocalHosts.contains(uri.getHost().toLowerCase(Locale.ROOT));
+        boolean localhostHttp = host != null && "http".equalsIgnoreCase(uri.getScheme()) && localProfile
+                && SetOfLocalHosts.contains(host.toLowerCase(Locale.ROOT));
         if (!absoluteHost || (!https && !localhostHttp)) {
             throw new IllegalArgumentException("HAOBLOG_MUSIC_MANIFEST_URL must be HTTPS; local/dev may use localhost HTTP");
         }
@@ -130,14 +131,13 @@ static String normalizeMusicManifestUrl(String raw, String activeProfiles) {
     private static final java.util.Set<String> SetOfLocalHosts = java.util.Set.of("localhost", "127.0.0.1", "::1");
 
     public record SiteResult(String title, String description, String siteUrl, String authorName,
-                             boolean commentsEnabled, boolean musicEnabled, boolean threeDEnabled,
-                             String musicManifestUrl) {
+                             boolean commentsEnabled, boolean musicEnabled, boolean threeDEnabled) {
         public SiteResult(String title, String description, String siteUrl, String authorName) {
-            this(title, description, siteUrl, authorName, true, false, false, null);
+            this(title, description, siteUrl, authorName, true, false, false);
         }
         public SiteResult(String title, String description, String siteUrl, String authorName,
                           boolean commentsEnabled) {
-            this(title, description, siteUrl, authorName, commentsEnabled, false, false, null);
+            this(title, description, siteUrl, authorName, commentsEnabled, false, false);
         }
     }
 
diff --git a/apps/api/src/main/java/io/haoblog/site/web/PublicSiteController.java b/apps/api/src/main/java/io/haoblog/site/web/PublicSiteController.java
index 630e3ca..d9ff3b7 100644
--- a/apps/api/src/main/java/io/haoblog/site/web/PublicSiteController.java
+++ b/apps/api/src/main/java/io/haoblog/site/web/PublicSiteController.java
@@ -21,7 +21,7 @@ public class PublicSiteController {
     public ResponseEntity<SiteResponse> site(@RequestHeader(value = HttpHeaders.IF_NONE_MATCH, required = false) String ifNoneMatch) {
         var result = service.get();
         var response = new SiteResponse(result.title(), result.description(), result.siteUrl(), result.authorName(),
-                result.commentsEnabled(), result.musicEnabled(), result.threeDEnabled(), result.musicManifestUrl());
+                result.commentsEnabled(), result.musicEnabled(), result.threeDEnabled());
         var headers = new HttpHeaders();
         headers.setETag(representationHash(response));
         headers.setCacheControl("public, max-age=0, s-maxage=60, must-revalidate");
@@ -41,14 +41,13 @@ private static String representationHash(Object value) {
     }
 
     public record SiteResponse(String title, String description, String siteUrl, String authorName,
-                               boolean commentsEnabled, boolean musicEnabled, boolean threeDEnabled,
-                               String musicManifestUrl) {
+                               boolean commentsEnabled, boolean musicEnabled, boolean threeDEnabled) {
         public SiteResponse(String title, String description, String siteUrl, String authorName) {
-            this(title, description, siteUrl, authorName, true, false, false, null);
+            this(title, description, siteUrl, authorName, true, false, false);
         }
         public SiteResponse(String title, String description, String siteUrl, String authorName,
                             boolean commentsEnabled) {
-            this(title, description, siteUrl, authorName, commentsEnabled, false, false, null);
+            this(title, description, siteUrl, authorName, commentsEnabled, false, false);
         }
     }
 }
diff --git a/apps/api/src/test/java/io/haoblog/AdminCommentIT.java b/apps/api/src/test/java/io/haoblog/AdminCommentIT.java
index 6735984..f13b69b 100644
--- a/apps/api/src/test/java/io/haoblog/AdminCommentIT.java
+++ b/apps/api/src/test/java/io/haoblog/AdminCommentIT.java
@@ -169,7 +169,7 @@ void protectsExperienceFlagsAndRequiresMusicManifest() throws Exception {
                 .andExpect(status().isOk())
                 .andExpect(jsonPath("$.musicEnabled").value(false))
                 .andExpect(jsonPath("$.threeDEnabled").value(true))
-                .andExpect(jsonPath("$.musicManifestUrl").isEmpty());
+                .andExpect(jsonPath("$.musicManifestUrl").doesNotExist());
         mvc.perform(put("/api/v1/admin/site").with(admin()).with(csrf()).contentType("application/json")
                         .content("{\"version\":0,\"commentsEnabled\":true,\"musicEnabled\":false,\"threeDEnabled\":false}"))
                 .andExpect(status().isConflict())
diff --git a/apps/api/src/test/java/io/haoblog/media/infrastructure/AliyunOssObjectStorageTest.java b/apps/api/src/test/java/io/haoblog/media/infrastructure/AliyunOssObjectStorageTest.java
index ade70e6..6dbbddf 100644
--- a/apps/api/src/test/java/io/haoblog/media/infrastructure/AliyunOssObjectStorageTest.java
+++ b/apps/api/src/test/java/io/haoblog/media/infrastructure/AliyunOssObjectStorageTest.java
@@ -3,14 +3,24 @@
 import io.haoblog.media.application.ObjectStorage;
 import org.junit.jupiter.api.Test;
 
+import java.net.URI;
 import java.net.http.HttpClient;
+import java.net.http.HttpRequest;
+import java.net.http.HttpResponse;
 import java.nio.charset.StandardCharsets;
 import java.time.Instant;
 import java.util.Base64;
+import java.util.List;
 import java.util.Map;
 
 import static org.junit.jupiter.api.Assertions.assertEquals;
+import static org.junit.jupiter.api.Assertions.assertNull;
+import static org.junit.jupiter.api.Assertions.assertThrows;
 import static org.junit.jupiter.api.Assertions.assertTrue;
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.Mockito.mock;
+import static org.mockito.Mockito.verify;
+import static org.mockito.Mockito.when;
 
 class AliyunOssObjectStorageTest {
     @Test
@@ -38,6 +48,46 @@ void policyPinsBucketObjectMimeMetadataAndExactSizeWithoutNetwork() {
         assertEquals(Instant.parse("2030-01-01T00:05:00Z"), grant.expiresAt());
     }
 
+    @Test
+    void dataRequestsUseTheConfiguredCustomDomain() throws Exception {
+        AliyunOssProperties properties = properties();
+        properties.setPublicBaseUrl("https://img.haoblog.com.cn/");
+        HttpClient client = mock(HttpClient.class);
+        @SuppressWarnings("unchecked")
+        HttpResponse<Void> response = mock(HttpResponse.class);
+        when(response.statusCode()).thenReturn(404);
+        when(client.send(any(HttpRequest.class), any(HttpResponse.BodyHandler.class))).thenReturn(response);
+        AliyunOssObjectStorage storage = new AliyunOssObjectStorage(properties, client);
+
+        ObjectStorage.UploadGrant grant = storage.createUploadGrant(
+                new ObjectStorage.UploadSpec("media/2030-01/a-safe-key.jpg", "image/jpeg", 1234, 640, 480,
+                        "0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef"),
+                Instant.parse("2030-01-01T00:00:00Z"));
+
+        assertEquals("https://img.haoblog.com.cn/", grant.uploadUrl());
+        assertEquals("https://img.haoblog.com.cn/media/2030-01/a-safe-key.jpg",
+                storage.publicUrl("media/2030-01/a-safe-key.jpg"));
+        assertNull(storage.head("media/2030-01/a safe-key.jpg"));
+        var request = org.mockito.ArgumentCaptor.forClass(HttpRequest.class);
+        verify(client).send(request.capture(), any(HttpResponse.BodyHandler.class));
+        assertEquals(URI.create("https://img.haoblog.com.cn/media/2030-01/a%20safe-key.jpg"), request.getValue().uri());
+    }
+
+    @Test
+    void rejectsUnsafeOrNonOriginPublicDomains() {
+        for (String value : List.of(
+                "http://img.haoblog.com.cn",
+                "https://user:pass@img.haoblog.com.cn",
+                "https://img.haoblog.com.cn/media",
+                "https://img.haoblog.com.cn?version=1",
+                "https://img.haoblog.com.cn#objects")) {
+            AliyunOssProperties properties = properties();
+            properties.setPublicBaseUrl(value);
+            assertThrows(IllegalStateException.class,
+                    () -> new AliyunOssObjectStorage(properties, HttpClient.newHttpClient()));
+        }
+    }
+
     private static AliyunOssProperties properties() {
         AliyunOssProperties properties = new AliyunOssProperties();
         properties.setBucket("demo-123");
diff --git a/apps/api/src/test/java/io/haoblog/site/application/SiteServiceTest.java b/apps/api/src/test/java/io/haoblog/site/application/SiteServiceTest.java
index 11869da..4faf356 100644
--- a/apps/api/src/test/java/io/haoblog/site/application/SiteServiceTest.java
+++ b/apps/api/src/test/java/io/haoblog/site/application/SiteServiceTest.java
@@ -46,6 +46,8 @@ void validatesManifestByProfileAndRejectsEnablingWithoutConfiguration() {
                 SiteService.normalizeMusicManifestUrl("https://cdn.example.test/music.json", "prod"));
         assertThrows(IllegalArgumentException.class,
                 () -> SiteService.normalizeMusicManifestUrl("http://cdn.example.test/music.json", "prod"));
+        assertThrows(IllegalArgumentException.class,
+                () -> SiteService.normalizeMusicManifestUrl("http:relative", "local"));
 
         var service = new SiteService(repository, "https://blog.example.test", "Hao", null, "prod");
         var missing = assertThrows(io.haoblog.shared.web.ProblemException.class,
@@ -66,6 +68,5 @@ void publicMusicFlagSafelyTurnsOffWhenManifestIsMissing() {
 
         assertEquals(false, result.musicEnabled());
         assertEquals(true, result.threeDEnabled());
-        assertEquals(null, result.musicManifestUrl());
     }
 }
diff --git a/apps/web/app/components/garden/GardenCanvas.client.vue b/apps/web/app/components/garden/GardenCanvas.client.vue
index 4c42d55..6c94ad6 100644
--- a/apps/web/app/components/garden/GardenCanvas.client.vue
+++ b/apps/web/app/components/garden/GardenCanvas.client.vue
@@ -12,6 +12,9 @@ const host = ref<HTMLElement | null>(null)
 const selectedId = ref<string | null>(null)
 const status = ref('桌面星图正在校准。')
 const view = reactive({ scale: 1, x: 0, y: 0 })
+const { theme } = useTheme()
+const renderSize = { width: 720, height: 480 }
+const palette = { accent: '#a8ff60', line: 'rgba(168,255,96,.2)' }
 
 let context: CanvasRenderingContext2D | null = null
 let simulation: Simulation<RenderNode, RenderLink> | null = null
@@ -76,6 +79,12 @@ onBeforeUnmount(() => {
   context = null
 })
 
+watch(theme, async () => {
+  await nextTick()
+  refreshPalette()
+  scheduleDraw()
+})
+
 function measure() {
   const rect = host.value?.getBoundingClientRect()
   return { width: Math.max(320, rect?.width || 720), height: Math.max(320, Math.min(620, rect?.height || 480)) }
@@ -84,6 +93,9 @@ function measure() {
 function resize() {
   if (!canvas.value || !context) return
   const { width, height } = measure()
+  renderSize.width = width
+  renderSize.height = height
+  refreshPalette()
   const dpr = Math.min(window.devicePixelRatio || 1, 1.5)
   canvas.value.width = Math.floor(width * dpr)
   canvas.value.height = Math.floor(height * dpr)
@@ -96,6 +108,13 @@ function resize() {
   scheduleDraw()
 }
 
+function refreshPalette() {
+  if (!canvas.value) return
+  const styles = getComputedStyle(canvas.value)
+  palette.accent = styles.getPropertyValue('--garden-accent').trim() || '#a8ff60'
+  palette.line = styles.getPropertyValue('--garden-line').trim() || 'rgba(168,255,96,.2)'
+}
+
 function scheduleDraw() {
   if (frame || disposed) return
   frame = requestAnimationFrame(() => {
@@ -106,11 +125,8 @@ function scheduleDraw() {
 
 function draw() {
   if (!context || !canvas.value) return
-  const { width, height } = measure()
+  const { width, height } = renderSize
   context.clearRect(0, 0, width, height)
-  const styles = getComputedStyle(canvas.value)
-  const accent = styles.getPropertyValue('--garden-accent') || '#a8ff60'
-  const line = styles.getPropertyValue('--garden-line') || 'rgba(168,255,96,.2)'
   for (const edge of renderLinks) {
     const source = edge.source as RenderNode
     const target = edge.target as RenderNode
@@ -121,7 +137,7 @@ function draw() {
     context.moveTo(left.x, left.y)
     context.lineTo(right.x, right.y)
     context.lineWidth = Math.min(4, 1 + edge.weight * .45)
-    context.strokeStyle = line
+    context.strokeStyle = palette.line
     context.stroke()
   }
   for (const node of renderNodes) {
@@ -130,10 +146,10 @@ function draw() {
     const radius = nodeRadius(node)
     context.beginPath()
     context.arc(point.x, point.y, radius, 0, Math.PI * 2)
-    context.fillStyle = node.id === selectedId.value ? accent : nodeColor(node.type)
+    context.fillStyle = node.id === selectedId.value ? palette.accent : nodeColor(node.type)
     context.fill()
     context.lineWidth = node.id === selectedId.value ? 2 : 1
-    context.strokeStyle = accent
+    context.strokeStyle = palette.accent
     context.stroke()
   }
 }
@@ -168,7 +184,7 @@ function focusNode(node: GardenNode) {
   selectNode(node)
   const renderNode = renderNodes.find(item => item.id === node.id)
   if (!renderNode) return
-  const { width, height } = measure()
+  const { width, height } = renderSize
   view.x = width / 2 - renderNode.x * view.scale
   view.y = height / 2 - renderNode.y * view.scale
   scheduleDraw()
diff --git a/apps/web/app/utils/publicSite.ts b/apps/web/app/utils/publicSite.ts
index 99b2bde..761eb54 100644
--- a/apps/web/app/utils/publicSite.ts
+++ b/apps/web/app/utils/publicSite.ts
@@ -10,7 +10,6 @@ export const defaultPublicSite: PublicSite = {
   commentsEnabled: true,
   musicEnabled: false,
   threeDEnabled: false,
-  musicManifestUrl: null,
 }
 
 export function usePublicSite() {
diff --git a/apps/web/test/phase5-static-boundaries.test.ts b/apps/web/test/phase5-static-boundaries.test.ts
index d598691..ca5b2d9 100644
--- a/apps/web/test/phase5-static-boundaries.test.ts
+++ b/apps/web/test/phase5-static-boundaries.test.ts
@@ -30,6 +30,11 @@ describe('phase five static boundaries', () => {
     expect(garden).toContain("simulation?.on('tick', null)")
     expect(garden).toContain('cancelAnimationFrame(frame)')
     expect(garden).toContain('resizeObserver?.disconnect()')
+    expect(garden).toContain('const renderSize =')
+    expect(garden).toContain('const palette =')
+    const draw = garden.slice(garden.indexOf('function draw()'), garden.indexOf('function screenPoint'))
+    expect(draw).not.toContain('measure()')
+    expect(draw).not.toContain('getComputedStyle(')
 
     const music = readFileSync(resolve(app, 'components/music/SignalTape.client.vue'), 'utf8')
     expect(music).toContain('stopSpectrumLoop()')
diff --git a/docs/openapi/public-api.yaml b/docs/openapi/public-api.yaml
index 7608b8a..df00962 100644
--- a/docs/openapi/public-api.yaml
+++ b/docs/openapi/public-api.yaml
@@ -1054,7 +1054,7 @@ components:
   schemas:
     SiteResponse:
       type: object
-      required: [title, description, siteUrl, authorName, commentsEnabled, musicEnabled, threeDEnabled, musicManifestUrl]
+      required: [title, description, siteUrl, authorName, commentsEnabled, musicEnabled, threeDEnabled]
       properties:
         title: { type: string }
         description: { type: string }
@@ -1063,7 +1063,6 @@ components:
         commentsEnabled: { type: boolean }
         musicEnabled: { type: boolean }
         threeDEnabled: { type: boolean }
-        musicManifestUrl: { type: [string, 'null'], format: uri }
     ArticleSummary:
       type: object
       required: [id, slug, title, excerpt, publishedAt, coverImageUrl, commentsEnabled]
diff --git a/packages/api-client/src/generated.ts b/packages/api-client/src/generated.ts
index 95845f0..7a497f3 100644
--- a/packages/api-client/src/generated.ts
+++ b/packages/api-client/src/generated.ts
@@ -679,8 +679,6 @@ export interface components {
             commentsEnabled: boolean;
             musicEnabled: boolean;
             threeDEnabled: boolean;
-            /** Format: uri */
-            musicManifestUrl: string | null;
         };
         ArticleSummary: {
             /** Format: uuid */