now-reading-page

你正在生成一个精美的独立 HTML 页面，展示用户当前正在阅读和最近读过的内容。输出为单个 HTML 文件，用户可以在浏览器中打开，也可以托管在个人网站上。

Readwise 访问

检查是否可以使用 Readwise MCP 工具（例如 mcp__readwise__reader_list_documents）。如果可以，请全程使用这些工具（并将此上下文传递给子 Agent）。如果不可以，请改用等效的 readwise CLI 命令（例如 readwise list、readwise read <id>）。以下说明中提到的 MCP 工具名称，需要时请转换为对应的 CLI 命令。

流程

启动一个 Task 子 Agent，负责获取所有数据并生成 HTML 文件。子 Agent 应执行以下步骤：

1. 获取数据

并行运行以下全部请求：

• 待读清单： 使用 location="shortlist"、limit=50、response_fields=["title", "author", "category", "reading_progress", "first_opened_at", "last_opened_at", "image", "url", "site_name", "word_count", "saved_at"] 调用 mcp__readwise__reader_list_documents
• 稍后阅读： 使用 location="later"、limit=50、response_fields=["title", "author", "category", "reading_progress", "first_opened_at", "last_opened_at", "image", "url", "site_name", "word_count", "saved_at"] 调用 mcp__readwise__reader_list_documents
• 收件箱： 使用 location="new"、limit=50、response_fields=["title", "author", "category", "reading_progress", "first_opened_at", "last_opened_at", "image", "url", "site_name", "word_count", "saved_at"] 调用 mcp__readwise__reader_list_documents
• 归档第 1 页： 使用 location="archive"、limit=50、response_fields=["title", "author", "category", "reading_progress", "last_opened_at", "image", "url", "site_name", "saved_at", "word_count"] 调用 mcp__readwise__reader_list_documents

2. 深度翻页获取归档内容

获取第一页归档数据后，使用 nextPageCursor 继续请求后续页面（每页 limit=50）。至少再获取 6 页（约 350 篇文档），以便热力图覆盖 6 个月的阅读活动。持续翻页，直到最早的 last_opened_at 距今已有 6 个月以上，或所有页面均已获取。

3. 分类

根据获取的数据，构建两个列表：

• 当前正在阅读： 从待读清单、稍后阅读或收件箱中筛选 reading_progress 介于 0.05 和 0.99 之间（已开始但未读完）的内容。按 last_opened_at 降序排列。
• 最近读过： 从归档中筛选 reading_progress > 0.9（确实已读完）的内容。按 last_opened_at 降序排列，并按月份分组。展示数据涵盖的所有月份。

此外，收集归档中所有 reading_progress > 0.9 项目的 last_opened_at 日期，用于热力图。

不要设置“接下来阅读”部分。 只展示用户正在阅读或已经读过的内容。

4. 生成 HTML

在当前工作目录中创建 now-reading/ 目录（如果该目录不存在），并将 HTML 文件写入 now-reading/index.html。

设计方向： 温暖的棕褐色调，具有编辑风格。想象一份个人阅读日志，而不是媒体仪表盘。

字体： Google Fonts — Newsreader（衬线字体，用于标题）+ DM Sans（无衬线字体，用于正文）。通过 <link> 标签引入。

调色板（CSS 变量）：

--bg: #f6f1eb          (warm parchment background)
--surface: #ede6dc     (card/heatmap empty cell background)
--surface-hover: #e4dbd0
--border: #d9d0c4
--text: #4a4239        (main body text)
--text-muted: #8a7e72
--text-dim: #b0a597
--heading: #2c251e
--accent: #a0724a      (warm brown — progress bars, active states)
--accent-dim: rgba(160, 114, 74, 0.12)

布局： 最大宽度 760px，居中。支持响应式布局。

区块顺序：

1. 页眉： 使用 Newsreader，以大号、较细字重显示“What I'm reading”。副标题：“Powered by Readwise Reader”，其中链接使用强调色。

2. 正在阅读 — 区块标签使用小型大写字母。使用 CSS 网格展示卡片（repeat(auto-fill, minmax(160px, 1fr))），填满容器。每张卡片：

   • aspect-ratio: 3/2，圆角，悬停时上移
   • 有封面图时显示封面图（image 字段）。没有时显示渐变占位图（将标题哈希值映射为色相）。
   • 底部添加深色渐变遮罩，显示白色标题和作者
   • 卡片底部显示进度条：5px 高的轨道（深色半透明），填充部分使用强调色
   • 卡片链接到 Reader URL

3. 阅读活动 — GitHub 风格的热力图，填满容器宽度。使用 CSS flex 布局，在周和单元格上设置 flex: 1，使其延展填满空间。使用暖琥珀色阶（rgba(160, 114, 74, 0.2/0.4/0.65/1.0)）。上方显示月份标签，左侧显示星期标签（Mon/Wed/Fri）。显示 6 个月的数据。

4. 最近读过 — 类别筛选胶囊按钮（All、Articles、Books、Tweets、RSS、Email），使用 JS 切换。之后按月份分组列出条目（例如，小型大写字母显示“FEBRUARY 2026”）。每条内容显示为一行：

   • 左侧显示日期（等宽数字，弱化颜色）
   • 类别表情符号（📄 文章、📚 书籍、🐦 推文、📰 RSS、✉️ 邮件、🎬 视频、🎙 播客、📑 PDF）
   • 标题（链接，中等字重）+ 作者/来源（颜色较淡，字号较小）

样式说明：

• 所有 CSS 均放在带有 CSS 变量的 <style> 标签中
• 区块在页面加载时轻微淡入并向上移动
• 区块之间使用分隔线（1px solid var(--border)）
• 响应式布局：移动端使用双列卡片网格

5. 返回

返回生成的 HTML 文件的绝对路径，并附上摘要：正在阅读的条目数量、最近读过的条目数量、活动数据的日期范围。

子 Agent 返回后

1. 告知用户文件已生成及其所在位置
2. 提议在浏览器中打开：open now-reading/index.html
3. 询问用户是否希望调整任何内容