---
import BaseLayout from "@/layouts/BaseLayout.astro";
import { chapters } from "@/data/chapters";

const average = Math.round(chapters.reduce((sum, chapter) => sum + chapter.progress, 0) / chapters.length);
const published = chapters.filter((chapter) => chapter.status === "published").length;
const researching = chapters.filter((chapter) => ["researching", "drafting"].includes(chapter.status)).length;

const workstreams = [
  { label: "研究框架与规范", value: 82, next: "给推理专题补逐篇图表/实验精读层级" },
  { label: "网站设计系统", value: 89, next: "打印样式与更多通用可视化组件" },
  { label: "Kimi K3 深读", value: 64, next: "扩写 scaling / pre-training / infra 逐图笔记" },
  { label: "Transformer 基础", value: 52, next: "加入矩阵形状动画与手算练习" },
  { label: "DeepSeek 专题", value: 71, next: "补 R1 / DAPO 的逐图训练轨迹与复现对照" },
  { label: "推理与测试时扩展", value: 76, next: "真实模型采样曲线、PRM 案例与逐篇图表精读" },
  { label: "稀疏计算与 MoE", value: 74, next: "补充真实集群 traces 与专家特化案例" },
  { label: "长上下文专题", value: 72, next: "加入更多论文逐图笔记与真实模型配置对比" },
  { label: "引用与事实检查", value: 54, next: "自动化外链复查与来源等级扩展" },
  { label: "开源与部署", value: 100, next: "每轮保留不可变镜像、提交与回滚点" },
];
---

<BaseLayout
  title="持续建设进度"
  description="LLM Atlas 的研究、写作、可视化、引用核验、开源仓库与 k1412 部署实时进度。"
  section="progress"
>
  <header class="page-hero">
    <div class="page-hero-inner">
      <div>
        <p class="eyebrow"><span>PUBLIC LEDGER</span> BUILD IN THE OPEN</p>
        <h1>庞大工作需要一份<br />公开、可检查的账本</h1>
        <p class="lead">
          这里不把“正在研究”包装成“已经完成”。每个专题显示成熟度、下一检查点和证据边界；
          本地 PROGRESS.md 与网站同步维护。
        </p>
      </div>
      <dl class="page-facts">
        <div><dt>OVERALL</dt><dd>专题平均 {average}%</dd></div>
        <div><dt>READABLE</dt><dd>{published} 个首版可读专题</dd></div>
        <div><dt>ACTIVE</dt><dd>{researching} 个研究/写作中</dd></div>
        <div><dt>UPDATED</dt><dd>2026-07-29 00:38 CST</dd></div>
        <div><dt>MODE</dt><dd>持续迭代，不锁死版本</dd></div>
      </dl>
    </div>
  </header>

  <section class="section" id="workstreams">
    <div class="section-heading">
      <div>
        <p class="eyebrow"><span>01</span> WORKSTREAMS</p>
        <h2>十条工作流同时推进，但不混淆“有页面”和“已核验”</h2>
      </div>
      <p class="section-lead">
        内容首版优先打通全局脉络；随后每轮迭代选择一个专题推进到论文/工程层，并做独立事实复核。
      </p>
    </div>

    <div class="stream-list">
      {workstreams.map((stream, index) => (
        <article>
          <span>{String(index + 1).padStart(2, "0")}</span>
          <div>
            <h3>{stream.label}</h3>
            <p>下一检查点：{stream.next}</p>
          </div>
          <div class="stream-progress">
            <b>{stream.value}%</b>
            <div class="progress-track"><span style={`width:${stream.value}%`}></span></div>
          </div>
        </article>
      ))}
    </div>
  </section>

  <section class="section" id="done">
    <div class="section-heading">
      <div>
        <p class="eyebrow"><span>02</span> COMPLETED THIS ITERATION</p>
        <h2>当前版本已经落地什么</h2>
      </div>
      <p class="section-lead">下列项目都能在仓库或网站中直接检查，不是计划项。</p>
    </div>
    <div class="check-grid">
      <article><span>✓</span><h3>研究目标已持久化</h3><p>总体路线、完成标准、来源等级与进度账本已写入项目。</p></article>
      <article><span>✓</span><h3>K3 报告已结构化拆解</h3><p>47 页报告目录、151 条参考来源和架构/后训练/系统主线已经提取。</p></article>
      <article><span>✓</span><h3>16 专题知识图</h3><p>从语言模型基础到评测安全，包含先修依赖和三条贯穿案例。</p></article>
      <article><span>✓</span><h3>编辑式网站系统</h3><p>响应式导航、章节模板、侧栏、进度、论文链和证据提示组件。</p></article>
      <article><span>✓</span><h3>八个原创交互视图</h3><p>K3、注意力、DeepSeek、长上下文、MoE，以及推理预算/GRPO/MOPD 三页签实验。</p></article>
      <article><span>✓</span><h3>六篇首版长文</h3><p>K3 导读、Transformer 基础、DeepSeek 谱系、长上下文、MoE 与推理专题。</p></article>
      <article><span>✓</span><h3>长上下文深度专题</h3><p>五张成本账、26 篇一手论文、10+ 机制图与 8 策略交互实验室。</p></article>
      <article><span>✓</span><h3>MoE 深度专题</h3><p>六张账、19 篇一手论文、DeepSeek/K3 主线与路由—容量—通信交互实验室。</p></article>
      <article><span>✓</span><h3>推理深度专题</h3><p>八张账、30 篇一手论文链、DeepSeek/Kimi 双主线与三页签互动实验室。</p></article>
      <article><span>✓</span><h3>146 篇关键论文索引</h3><p>覆盖 12 个专题，支持全文搜索、标签筛选与 Kimi/DeepSeek 聚光主线。</p></article>
      <article><span>✓</span><h3>公开仓库与自托管发布</h3><p>源码公开到 git.k1412.top，网站由不可变镜像、Compose Manager 与 HTTPS 交付。</p></article>
    </div>
  </section>

  <section class="section" id="queue">
    <div class="section-heading">
      <div>
        <p class="eyebrow"><span>03</span> NEXT QUEUE</p>
        <h2>下一批按“能闭环的专题”推进</h2>
      </div>
      <p class="section-lead">优先级由 K3 依赖度、初学者断点和论文可验证性共同决定。</p>
    </div>
    <div class="queue-table">
      <div class="head"><b>优先级</b><b>专题</b><b>本轮交付</b><b>完成闸门</b></div>
      <div><span>P0</span><strong>大规模训练系统</strong><p>ZeRO / Megatron → Expert/Context Parallel → DualPipe / MoonEP</p><em>显存与通信计算器</em></div>
      <div><span>P1</span><strong>长上下文二轮深化</strong><p>真实模型配置 → 内核细节 → 长上下文评测与失败案例</p><em>配置比较器 + 逐图论文笔记</em></div>
      <div><span>P1</span><strong>MoE 二轮深化</strong><p>真实负载 traces → 专家特化可解释性 → 共享专家语义</p><em>案例库 + 集群证据</em></div>
      <div><span>P1</span><strong>推理二轮深化</strong><p>真实 pass@k 曲线 → PRM 失败案例 → 逐篇图表精读</p><em>案例库 + 真实 traces</em></div>
      <div><span>P2</span><strong>原生多模态</strong><p>ViT/CLIP → connector VLM → Kimi-VL/MoonViT-V2</p><em>视觉 Token 流程图</em></div>
    </div>
  </section>

  <section class="section" id="method">
    <div class="section-heading">
      <div>
        <p class="eyebrow"><span>04</span> QUALITY CONTROL</p>
        <h2>每条结论怎样进入网站</h2>
      </div>
      <p class="section-lead">
        Grok CLI 用于扩大检索覆盖和找遗漏；任何进入正文的机制、数字与时间仍回到原论文、官方仓库或正式文档。
      </p>
    </div>
    <div class="evidence-pipeline">
      <article><span>01 / DISCOVER</span><h3>发现线索</h3><p>K3 references、引用网络、Grok/web 检索、作者仓库。</p></article>
      <i>→</i>
      <article><span>02 / VERIFY</span><h3>打开一手来源</h3><p>核对标题、版本、公式、表格、实验设置和限制。</p></article>
      <i>→</i>
      <article><span>03 / EXPLAIN</span><h3>写四层解释</h3><p>直觉、机制、论文证据、工程代价；简化处显式标注。</p></article>
      <i>→</i>
      <article><span>04 / REVIEW</span><h3>交叉检查</h3><p>链接、数字、先修、图文一致性、移动端与可访问性。</p></article>
    </div>
  </section>

  <section class="section compact" id="ledger">
    <div class="section-heading">
      <div>
        <p class="eyebrow"><span>05</span> DECISION LEDGER</p>
        <h2>重要决策不会只留在对话里</h2>
      </div>
      <p class="section-lead">更完整的机器可读进度和研究记录位于开源仓库的 ROADMAP.md、PROGRESS.md 与 research/。</p>
    </div>
    <div class="decision-list">
      <div><time>2026-07-28</time><b>命名为 LLM Atlas</b><p>K3 是锚点，范围覆盖完整 LLM 技术史。</p></div>
      <div><time>2026-07-28</time><b>按问题链组织</b><p>现象 → 旧瓶颈 → 关键论文 → 后继桥梁 → K3/DeepSeek 落点。</p></div>
      <div><time>2026-07-28</time><b>优先原创重绘</b><p>架构图做成可缩放 SVG/HTML，明确简化与来源。</p></div>
      <div><time>2026-07-28</time><b>双重开放许可</b><p>代码 MIT，原创文字与图 CC BY-SA 4.0。</p></div>
      <div><time>2026-07-28</time><b>自托管交付</b><p>源码公开到 git.k1412.top，网站部署到 k1412 私有基础设施。</p></div>
      <div><time>2026-07-29</time><b>推理按八张账组织</b><p>把答案、覆盖、选择、过程、预算、优化、分布与系统证据分开核算。</p></div>
    </div>
  </section>

  <style>
    .stream-list,
    .decision-list {
      max-width: 1050px;
      border-top: 1px solid var(--line);
    }

    .stream-list article {
      display: grid;
      grid-template-columns: 55px 1fr 220px;
      gap: 24px;
      align-items: center;
      min-height: 115px;
      padding: 20px 8px;
      border-bottom: 1px solid var(--line);
    }

    .stream-list article > span {
      color: var(--copper);
      font: 0.67rem/1 var(--mono);
    }

    .stream-list h3 {
      font-size: 1.05rem;
    }

    .stream-list p {
      margin-top: 8px;
      color: var(--muted);
      font-size: 0.74rem;
    }

    .stream-progress {
      display: grid;
      grid-template-columns: 46px 1fr;
      gap: 12px;
      align-items: center;
    }

    .stream-progress b {
      color: var(--muted);
      font: 0.68rem/1 var(--mono);
    }

    .check-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      max-width: 1100px;
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }

    .check-grid article {
      min-height: 220px;
      padding: 26px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .check-grid span {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--sage-pale);
      color: var(--sage);
      font-size: 0.75rem;
    }

    .check-grid h3 {
      margin: 32px 0 12px;
      font-size: 1.08rem;
    }

    .check-grid p {
      color: var(--muted);
      font-size: 0.78rem;
      line-height: 1.72;
    }

    .queue-table {
      display: grid;
      max-width: 1100px;
      border-top: 1px solid var(--line);
      border-left: 1px solid var(--line);
    }

    .queue-table > div {
      display: grid;
      grid-template-columns: 90px 210px 1fr 230px;
    }

    .queue-table > div > * {
      padding: 17px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      font-size: 0.77rem;
      line-height: 1.6;
    }

    .queue-table .head {
      background: var(--ink);
      color: var(--paper-raised);
    }

    .queue-table .head b {
      font: 0.61rem/1.5 var(--mono);
      letter-spacing: 0.08em;
    }

    .queue-table span {
      color: var(--copper);
      font-family: var(--mono);
    }

    .queue-table p {
      color: var(--muted);
    }

    .queue-table em {
      color: var(--sage);
      font-style: normal;
    }

    .evidence-pipeline {
      display: grid;
      grid-template-columns: repeat(3, minmax(150px, 1fr) 24px) minmax(150px, 1fr);
      gap: 10px;
      align-items: center;
      max-width: 1100px;
    }

    .evidence-pipeline article {
      min-height: 210px;
      padding: 24px;
      border: 1px solid var(--line);
      background: var(--paper-raised);
    }

    .evidence-pipeline article > span {
      color: var(--copper);
      font: 0.58rem/1 var(--mono);
    }

    .evidence-pipeline h3 {
      margin: 32px 0 12px;
      font-size: 1.05rem;
    }

    .evidence-pipeline p {
      color: var(--muted);
      font-size: 0.75rem;
      line-height: 1.7;
    }

    .evidence-pipeline > i {
      color: var(--muted-light);
      font-style: normal;
      text-align: center;
    }

    .decision-list > div {
      display: grid;
      grid-template-columns: 120px 230px 1fr;
      gap: 26px;
      padding: 20px 8px;
      border-bottom: 1px solid var(--line);
    }

    .decision-list time {
      color: var(--copper);
      font: 0.66rem/1.6 var(--mono);
    }

    .decision-list b {
      font-size: 0.88rem;
    }

    .decision-list p {
      color: var(--muted);
      font-size: 0.78rem;
    }

    @media (max-width: 800px) {
      .stream-list article,
      .decision-list > div {
        grid-template-columns: 45px 1fr;
      }

      .stream-progress {
        grid-column: 2;
      }

      .check-grid {
        grid-template-columns: 1fr;
      }

      .queue-table > div {
        grid-template-columns: 68px 1fr;
      }

      .queue-table > div > p,
      .queue-table > div > em {
        grid-column: 2;
      }

      .queue-table .head b:nth-child(n + 3) {
        display: none;
      }

      .evidence-pipeline {
        grid-template-columns: 1fr;
      }

      .evidence-pipeline > i {
        transform: rotate(90deg);
      }

      .decision-list p {
        grid-column: 2;
      }
    }
  </style>
</BaseLayout>