feat(landing): 新版可交互演示首页（复刻 /thread-chat 三列交互）

[hifizz]

为什么改

首页需要让访客在注册前直观看懂 ThreadChat 的核心价值：从回答里的一句话开分支、主线与分支并排阅读、通过分支树找回来路、再用 @artifact 把结论带回主线。本 PR 先撤销历史 PR #127 的首页实现（revert 提交 857049ba），再在旧基线上重新实现——不是搬回旧代码。

改了什么

• / 重排：导航 → Hero（「一款能开分叉的 AI」）→ 场景交互演示 → 功能解释 → FAQ（9 问）→ 底部 CTA → 法律链接
• 五类场景标签、六套预设剧本（写 PRD / 技术方案 / 营销方案 / 深度调研 / 自学 AI / 看懂上市公司）共用一个三列演示窗口（窗口加高至 620–820px），默认「写 PRD」；场景切换为居中分段式大 Tabs
• 高保真复刻 /thread-chat：奶黄色纸面 token、三列布局、分支深度色、划选锚点 + 脚注、来源横幅、继承上文提示、Artifact 卡片、composer 胶囊
• 演示可真实交互（3a2ada3）：演示窗口里的文本可以真实拖选 —— 选完浮出提问气泡（引用原句 + 真实 textarea：focus 高亮、可输入、Enter/Esc），点「带着问题开分支」后 ~1.4s 在父列右侧开出用户自己的分支列（本地示例回答，不调用模型）；剧本气泡的输入框同样可改写，改写后提交也走手动分支。已提交锚点点击只定位/恢复列，不再弹气泡；提交后列延迟出现（模拟开分支间隔），提交瞬间气泡即关闭、锚点落定下划线。
• 划选流程贴近真实产品（bdd6524 + 389b814）：锚点平时是纯文本；光标移到锚点后随选区末尾（零宽 selend 标记）拖动，.sel 下划线逐字「画」出；划满浮出深色提问气泡（引用 + 输入框逐字打字 + 提交按钮）；点击「带着问题开分支」后才展开分支列、锚点才定住下划线与脚注。气泡渲染在 .ld 根级（z-index 45、setInterval 实测跟随），不被相邻列裁剪或盖住
• 列头高保真且可操作（bdd6524）：主线「锚定 + 主线 + 子树计数」，分支列「面包屑 + L{n} 徽标 + 标题 + 子树/⇄切换/收起」；收起真实关闭该列，⇄切换在兄弟分支间轮换，子树按钮定位/展开子分支
• 演示引擎 use-demo-player：视图由 (场景, 章节, 揭示进度) 折叠派生，任意章节可直达完整状态；支持播放/暂停/重播/章节跳转；视口驱动自动播放；尊重 prefers-reduced-motion
• 技术场景完整链路：子分支讨论 → 形成 Artifact → 主线输入 @ → 弹层选择（鼠标 + ↑/↓/Enter/Escape）→ 引用胶囊 → 发送 → 主线继续回答
• 来源短语可点击：手动展开对应分支并暂停自动播放
• 移除首页全部 GitHub 仓库链接；「开始使用」指向真实 /start-chat，保留 /privacy、/terms
• 样式隔离：演示样式收敛在 .ld 作用域（landing-demo.css），不污染 .tc
• OpenSpec 变更记录：openspec/changes/replace-home-with-interactive-demo/
• 顺手修复 lib/axiom/server.ts prefer-const（let queue → const queue，无行为变化），使 lint 零 error

没有引入哪些误解

• 演示是纯前端预设内容：不调用真实模型、不创建真实会话、不写用户数据
• 不展示跨消息多选、QuickAsk、自动合并分支、报名/候补流程
• 「分支不随主线编辑自动变化」「@artifact 是主动引用而非自动合并」与真实产品语义一致
• 未修改仓库可见性；登录页 GitHub OAuth 能力不受影响（只移除首页仓库链接）

实际验证

• pnpm typecheck ✅（0 错误）
• pnpm lint ✅（0 error；剩 3 个既有 warning，与本变更无关）
• pnpm build ✅（/ 为静态页 ○）
• pnpm openspec:validate ✅（39 passed，含新 change）
• Ego Browser 实测（dev localhost:4049）：
  • 划选 0→9 字拖蓝跟随光标（选前纯文本、选满才浮气泡）✅
  • 提交后 ~1.4s 列才出现（剧本/手动一致，实测 1422ms/1519ms）✅
  • 手动拖选 → 气泡 → 输入 → 开出 manual 列（引用+示例回答）✅
  • 剧本气泡可聚焦改写，改写提交开手动列 ✅
  • 已提交锚点点击不弹气泡 ✅
  • 气泡根级渲染跨列不遮盖（含 b1 列内嵌套划选）✅
  • 划选 → 气泡打字 → 提交 → 开列/下划线 的时序逐章验证 ✅
  • 列头三按钮：收起关列 ✅、⇄切换换兄弟分支且内容完整 ✅、子树计数/导航 ✅
  • 桌面三列展开、来源横幅/脚注/深度色正常 ✅
  • 技术场景 @ 流程全链路（弹层→胶囊→发送→主线继续）✅
  • 键盘选非剧本默认项也能正确落入胶囊 ✅；Escape 关闭弹层并还焦输入框 ✅
  • 播放/暂停/恢复/重播/章节跳转一致 ✅；点击来源短语手动展开分支 ✅
  • 移动端 390px：无整页横向溢出（scrollWidth=390）✅
  • 控制台/未捕获错误/hydration 错误：0 ✅
• 截图：/tmp/tc-shots/（home-1, home-final, demo-frame, tech-picker, tech-final-2, mobile-1, mobile-top, mobile-bottom）

限制

• 未与已发布参考 Demo 做逐像素对照（按交接文档 + 真实 /thread-chat 源码 token/DOM 复刻）
• 深度调研剧本中的 WorkBuddy 表述为「事实/推断/待验证」式分析方法演示，未声称产品事实

交付标识

• 基线 SHA：637a363（origin/main）+ revert 857049b
• 分支：refactor-home-page
• 提交：23e8ad0 + bdd6524 + 389b814 + 3a2ada3

Generated with Devin

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
thread-chatbot	Error		Sep 17, 2026 8:13am UTC

[coderabbitai]

Important

• 🔍 Trigger review

This repository does not receive automatic reviews because it has fewer than 10 stars.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 2a6b28c1-efeb-431d-bef2-8265e3641ccf

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}