proto-unit-drawer.html 7.63 KB
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
<title>原型 · Unit 详情抽屉 · 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="proto-unit-drawer.html">
<div class="shell">
  <aside id="sidebar"></aside>
  <main class="page">
    <header class="page-head">
      <div class="crumb"><span class="pill">04 · PROTO</span><span class="sep">/</span><span>Unit 详情抽屉</span></div>
      <h1>UnitDrawer · Unit 详情</h1>
      <p class="deck">点击 DAG 节点弹出。展示该 Unit 的 spec / contract / 最近 3 次 run。是 Future Maintainer 反推决策的主入口(US-05)。</p>
    </header>
    <article class="body">

      <section>
        <h2>线框</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">UnitDrawer · unit auth-be · open from DAG</span>
          </div>
          <svg viewBox="0 0 1100 540" width="100%" role="img" aria-label="UnitDrawer wireframe">
            <rect width="1100" height="540" fill="#FAF7F1"/>
            <rect x="0" y="0" width="600" height="540" fill="#FAF7F1" opacity=".4"/>
            <rect x="600" y="0" width="500" height="540" fill="#fff" stroke="#dcd5c4"/>

            <text x="620" y="36" font-family="Fraunces" font-size="20" fill="#0E0E10">Unit · auth-be</text>
            <rect x="620" y="48" width="60" height="20" rx="3" fill="#E2F2EA"/>
            <text x="650" y="62" font-family="JetBrains Mono" font-size="10" text-anchor="middle" fill="#0E8C5A">passed</text>
            <text x="690" y="62" font-family="JetBrains Mono" font-size="10" fill="#6c6c6c">type=be · retries 1/5</text>
            <text x="1060" y="30" text-anchor="end" font-family="JetBrains Mono" font-size="14" fill="#0E0E10">×</text>

            <text x="620" y="100" font-family="JetBrains Mono" font-size="10" fill="#3B3B40">SPEC(来自 SDD@rev 5)</text>
            <rect x="620" y="108" width="460" height="60" rx="4" fill="#FAF7F1" stroke="#dcd5c4"/>
            <text x="634" y="128" font-family="JetBrains Mono" font-size="10" fill="#0E0E10">提供登录 / 注册 / token 校验端点</text>
            <text x="634" y="146" font-family="JetBrains Mono" font-size="10" fill="#3B3B40">→ POST /api/auth/login</text>
            <text x="634" y="162" font-family="JetBrains Mono" font-size="10" fill="#3B3B40">→ POST /api/auth/register</text>

            <text x="620" y="190" font-family="JetBrains Mono" font-size="10" fill="#3B3B40">CONTRACT(contract.json · sha256:7f3a...)</text>
            <rect x="620" y="198" width="460" height="50" rx="4" fill="#FAF7F1" stroke="#dcd5c4"/>
            <text x="634" y="220" font-family="JetBrains Mono" font-size="10" fill="#0E0E10">200 → { token, user_id }</text>
            <text x="634" y="238" font-family="JetBrains Mono" font-size="10" fill="#0E0E10">401 → { error: "invalid_credentials" }</text>

            <text x="620" y="280" font-family="JetBrains Mono" font-size="10" fill="#3B3B40">RECENT RUNS · 最近 3 次</text>
            <rect x="620" y="290" width="460" height="34" rx="4" fill="#FCE7E2" stroke="#C7341A"/>
            <text x="634" y="312" font-family="JetBrains Mono" font-size="10" fill="#C7341A">run-...-0731 · attempt 1 · FAIL · invalid-pwd 期望 401 收 500</text>
            <rect x="620" y="328" width="460" height="34" rx="4" fill="#E2F2EA" stroke="#0E8C5A"/>
            <text x="634" y="350" font-family="JetBrains Mono" font-size="10" fill="#0E8C5A">run-...-0734 · attempt 2 · PASS · 8/8 绿</text>
            <rect x="620" y="366" width="460" height="34" rx="4" fill="#fff" stroke="#dcd5c4"/>
            <text x="634" y="388" font-family="JetBrains Mono" font-size="10" fill="#6c6c6c">(这是第 3 次的占位,未跑)</text>

            <text x="620" y="430" font-family="JetBrains Mono" font-size="10" fill="#3B3B40">CODER 决策日志(coder.log)</text>
            <rect x="620" y="438" width="460" height="70" rx="4" fill="#0E0E10"/>
            <text x="634" y="458" font-family="JetBrains Mono" font-size="10" fill="#86827a">[01] 选用 bcrypt 直接比对 → 因 user 不存在抛错</text>
            <text x="634" y="476" font-family="JetBrains Mono" font-size="10" fill="#A0E8B9">[02] 反思后:先查 user,user 缺失或 pwd 错都 401</text>
            <text x="634" y="494" font-family="JetBrains Mono" font-size="10" fill="#6c6c6c">→ open full log ↗</text>
          </svg>
        </div>
      </section>

      <section>
        <h2>抽屉 4 个区域</h2>
        <div class="grid-2">
          <div class="card">
            <h4>① 头部</h4>
            <p>Unit id + 状态徽章 + meta(type / retries / depends_on)+ 关闭 ×。</p>
          </div>
          <div class="card">
            <h4>② Spec</h4>
            <p>来自 SDD 对应 section 的 <code>&lt;p&gt;</code> + <code>&lt;ul data-acceptance&gt;</code>,含「来自 SDD@revN」追溯标签。</p>
          </div>
          <div class="card">
            <h4>③ Contract</h4>
            <p>展开 contract.json 的 exports(HTTP endpoints)。鼠标悬停可看完整 schema。</p>
          </div>
          <div class="card">
            <h4>④ Recent runs + coder.log</h4>
            <p>最近 3 次 run 摘要卡片,每张可点开看完整 result.json。底部黑底面板显示 coder.log 的最近 5 条决策。</p>
          </div>
        </div>
      </section>

      <section>
        <h2>从哪里打开 / 怎么关闭</h2>
        <table class="dense">
          <thead><tr><th>方式</th><th>说明</th></tr></thead>
          <tbody>
            <tr><td>点击 DAG 节点</td><td>主入口</td></tr>
            <tr><td>SSE <code>unit.state</code> 推送时点击「查看」</td><td>从右上 toast 跳</td></tr>
            <tr><td>键盘 ←/→</td><td>切换上一/下一个 Unit(在 units 数组中)</td></tr>
            <tr><td>Esc 或 ×</td><td>关闭</td></tr>
            <tr><td>点击外部遮罩</td><td>关闭</td></tr>
          </tbody>
        </table>
      </section>

      <section>
        <h2>资料完整性追溯</h2>
        <p>抽屉是 US-05 的核心 — 让 3 个月后的自己能反推决策。所以下面这些链接必须可用:</p>
        <table class="dense">
          <thead><tr><th>链接</th><th>跳到</th></tr></thead>
          <tbody>
            <tr><td>"来自 SDD@rev 5" pill</td><td>新 tab 打开 <code>history/sdd-rev-5.html</code></td></tr>
            <tr><td>contract sha256:7f3a... pill</td><td>纯净 JSON 视图</td></tr>
            <tr><td>每条 run 卡片</td><td>展开内嵌 result.json + stdout 抽屉</td></tr>
            <tr><td>"open full log"</td><td>跳到 <code>stream.log</code> 中该 Unit 全部行</td></tr>
            <tr><td>如曾被 L2 reset</td><td>显示触发它的 triage.json 链接</td></tr>
          </tbody>
        </table>
      </section>

    </article>
    <nav class="prev-next"></nav>
    <footer class="site"><div><b>Section</b>04 · Prototype</div><div><b>Page</b>proto-unit-drawer.html</div></footer>
  </main>
</div>
<script src="assets/shell.js"></script>
</body>
</html>