ops-progress.html 9.38 KB
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Ops · Progress · LemonBoss PRD</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="assets/shell.css" />
</head>
<body data-page="ops-progress.html">
<div class="shell">
  <aside id="sidebar"></aside>
  <main class="page">
    <header class="page-head">
      <div class="crumb"><span class="pill">07 · OPS</span><span class="sep">/</span><span>Progress</span></div>
      <h1>Progress · 项目实时进度</h1>
      <p class="deck">渲染 <code>LoopController.getProgress(pid)</code> (C-14) 的返回值。一页一眼看完「这项目现在做到哪、花了多少、还要多久、当前哪个 Agent 在干嘛」。</p>
    </header>
    <article class="body">

      <section>
        <h2>UI Wireframe</h2>
        <div class="mock">
          <div class="topbar">
            <span class="dot" style="background:#FF5F57"></span>
            <span class="dot" style="background:#FEBC2E"></span>
            <span class="dot" style="background:#28C840"></span>
            <span class="url">/devloop/p-731042/ops/progress</span>
          </div>
          <svg viewBox="0 0 1100 540" width="100%" role="img" aria-label="Progress wireframe">
            <rect width="1100" height="540" fill="#FAF7F1"/>
            <rect x="0" y="0" width="1100" height="48" fill="#0E0E10"/>
            <text x="20" y="32" font-family="Fraunces" font-size="16" fill="#FAF7F1">Progress · p-731042 · TODO Auth System</text>

            <!-- Big percent + phase -->
            <rect x="20" y="68" width="540" height="180" rx="8" fill="#fff" stroke="#dcd5c4"/>
            <text x="40" y="98" font-family="JetBrains Mono" font-size="11" fill="#3B3B40">OVERALL PROGRESS</text>
            <text x="40" y="180" font-family="Fraunces" font-size="80" font-weight="300" fill="#0E0E10">62%</text>
            <text x="200" y="180" font-family="Fraunces" font-size="20" font-weight="300" fill="#C77C2C">· L2 round 2/3</text>
            <text x="40" y="222" font-family="JetBrains Mono" font-size="11" fill="#3B3B40">ETA: ~ 12 min remaining</text>

            <rect x="40" y="232" width="500" height="6" rx="3" fill="#EAEAEA"/>
            <rect x="40" y="232" width="310" height="6" rx="3" fill="#0E8C5A"/>

            <!-- Breakdown 4 cards -->
            <rect x="580" y="68" width="240" height="84" rx="6" fill="#fff" stroke="#dcd5c4"/>
            <text x="596" y="92" font-family="JetBrains Mono" font-size="10" fill="#6E48C3" font-weight="700">PRD</text>
            <text x="596" y="124" font-family="Fraunces" font-size="32" fill="#0E0E10">rev 3</text>
            <text x="596" y="146" font-family="JetBrains Mono" font-size="10" fill="#0E8C5A">✓ ok</text>

            <rect x="840" y="68" width="240" height="84" rx="6" fill="#fff" stroke="#dcd5c4"/>
            <text x="856" y="92" font-family="JetBrains Mono" font-size="10" fill="#0E0E10" font-weight="700">SDD</text>
            <text x="856" y="124" font-family="Fraunces" font-size="32" fill="#0E0E10">rev 6</text>
            <text x="856" y="146" font-family="JetBrains Mono" font-size="10" fill="#0E8C5A">✓ ok</text>

            <rect x="580" y="164" width="240" height="84" rx="6" fill="#fff" stroke="#0E8C5A"/>
            <text x="596" y="188" font-family="JetBrains Mono" font-size="10" fill="#0E8C5A" font-weight="700">UNITS</text>
            <text x="596" y="220" font-family="Fraunces" font-size="28" fill="#0E0E10">10 / 12</text>
            <text x="596" y="242" font-family="JetBrains Mono" font-size="10" fill="#3B3B40">2 testing · 0 blocked</text>

            <rect x="840" y="164" width="240" height="84" rx="6" fill="#fff" stroke="#C77C2C"/>
            <text x="856" y="188" font-family="JetBrains Mono" font-size="10" fill="#C77C2C" font-weight="700">L2 / TOKENS</text>
            <text x="856" y="220" font-family="Fraunces" font-size="20" fill="#0E0E10">2 / 3 · 280K</text>
            <text x="856" y="242" font-family="JetBrains Mono" font-size="10" fill="#3B3B40">budget 3 rounds / 5M tokens</text>

            <!-- Active agents -->
            <text x="20" y="282" font-family="JetBrains Mono" font-size="11" fill="#3B3B40">ACTIVE AGENTS · 2 running</text>
            <rect x="20" y="294" width="1060" height="64" rx="6" fill="#fff" stroke="#0E8C5A"/>
            <text x="36" y="318" font-family="JetBrains Mono" font-size="11" fill="#0E8C5A" font-weight="700">▶ coder · unit oauth-be · attempt 2/5</text>
            <text x="36" y="338" font-family="Fraunces" font-size="13" fill="#0E0E10">step 4/6 · 实现 token refresh 端点</text>
            <text x="900" y="318" font-family="JetBrains Mono" font-size="10" fill="#6c6c6c" text-anchor="end">running 42s</text>
            <rect x="36" y="346" width="800" height="4" rx="2" fill="#EAEAEA"/>
            <rect x="36" y="346" width="533" height="4" rx="2" fill="#0E8C5A"/>

            <rect x="20" y="370" width="1060" height="64" rx="6" fill="#fff" stroke="#0E8C5A"/>
            <text x="36" y="394" font-family="JetBrains Mono" font-size="11" fill="#0E8C5A" font-weight="700">▶ tester · unit oauth-fe · attempt 1/5</text>
            <text x="36" y="414" font-family="Fraunces" font-size="13" fill="#0E0E10">step 2/5 · 写 callback redirect 测试用例</text>
            <text x="900" y="394" font-family="JetBrains Mono" font-size="10" fill="#6c6c6c" text-anchor="end">running 18s</text>
            <rect x="36" y="422" width="800" height="4" rx="2" fill="#EAEAEA"/>
            <rect x="36" y="422" width="320" height="4" rx="2" fill="#0E8C5A"/>

            <!-- Recent events -->
            <text x="20" y="468" font-family="JetBrains Mono" font-size="11" fill="#3B3B40">RECENT 5 EVENTS</text>
            <text x="36" y="488" font-family="JetBrains Mono" font-size="10" fill="#0E0E10">12:04:21 · L2 run 3 fail (impl_bug)</text>
            <text x="36" y="504" font-family="JetBrains Mono" font-size="10" fill="#0E0E10">12:04:08 · architect patched SDD rev 6</text>
            <text x="36" y="520" font-family="JetBrains Mono" font-size="10" fill="#0E0E10">12:03:55 · oauth-be reset to pending</text>
          </svg>
        </div>
      </section>

      <section>
        <h2>聚合算法</h2>
        <p>percent 加权求和(来自 C-14 文档):</p>
        <table class="dense">
          <thead><tr><th>阶段</th><th>权重</th><th>判定 ok</th></tr></thead>
          <tbody>
            <tr><td>PRD</td><td>10</td><td>prd.html 存在且校验通过</td></tr>
            <tr><td>SDD</td><td>20</td><td>sdd.html 存在且 units.json 一致</td></tr>
            <tr><td>Units (L1)</td><td>50</td><td>按 passed / total 比例</td></tr>
            <tr><td>L2 整合</td><td>15</td><td>最近一次 L2 ok=true</td></tr>
            <tr><td>Ship</td><td>5</td><td>project.status=shipped</td></tr>
            <tr><td><b>合计</b></td><td><b>100</b></td><td>—</td></tr>
          </tbody>
        </table>
        <p class="sig">ETA 基于历史项目均值 + 当前阶段剩余项数线性外推;blocked 状态时 ETA = ∞ 显示「等人介入」。</p>
      </section>

      <section>
        <h2>数据来源</h2>
        <ul>
          <li>头部数字:<code>C-14 LoopController.getProgress(pid)</code> 一次性返回</li>
          <li>Active Agents:聚合自 <code>agent-state/*.json</code> + <code>agent-state/*-todo.json</code></li>
          <li>Recent events:<code>timelineLogger.tail(pid, 10)</code></li>
          <li>SSE:订阅 <code>unit.state · agent.step · integration.result</code> 等事件,自动刷新</li>
        </ul>
      </section>

      <section>
        <h2>更新频率</h2>
        <table class="dense">
          <thead><tr><th>区域</th><th>触发</th><th>方式</th></tr></thead>
          <tbody>
            <tr><td>大数字 / breakdown</td><td>SSE 任一关键事件</td><td>debounce 500ms 重算</td></tr>
            <tr><td>Active Agents</td><td>SSE agent.step</td><td>立即</td></tr>
            <tr><td>Recent events</td><td>SSE 任一事件</td><td>append 顶部,溢出剔旧</td></tr>
            <tr><td>ETA</td><td>30s 周期</td><td>低频,避免抖动</td></tr>
          </tbody>
        </table>
      </section>

      <section>
        <h2>无项目时的空态</h2>
        <p>页面打开时若没有任何 active project:显示「No project running」+ 列出最近 3 个项目让用户选;若有 shipped 项目,加 「✓ Demo: TODO Auth - shipped」可作为复现起点。</p>
      </section>

      <section>
        <h2>关联视图</h2>
        <ul>
          <li><a href="ui-dashboard.html">Dashboard</a> · 主看板(同源 + DAG 视图)</li>
          <li><a href="ops-loop-log.html">Loop Log</a> · 时间线展开</li>
          <li><a href="ops-buglist.html">Buglist</a> · bug 排查</li>
          <li><a href="ops-changelog.html">Changelog</a> · 版本变更</li>
        </ul>
      </section>

    </article>
    <nav class="prev-next"></nav>
    <footer class="site"><div><b>Section</b>07 · Ops</div><div><b>Page</b>ops-progress.html</div></footer>
  </main>
</div>
<script src="assets/shell.js"></script>
</body>
</html>