From 694ca3a6d27f55dc75dccb0ca2bdd47fff4780a2 Mon Sep 17 00:00:00 2001
From: yibo <yibo@yiboM5MacBook-Air.local>
Date: Wed, 13 May 2026 18:28:12 +0800
Subject: [PATCH] feat(devloop): P5 Vue Dashboard — full UI per §P4 spec (12 components + 4 ops sub-pages + UI endpoints)

---
 scripts/phase5-verify.js                         | 180 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 server/routes/devloop.js                         |  73 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 server/tests/devloop/routes.test.js              |  48 ++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/components/devloop/DashboardHeader.vue   |  57 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/components/devloop/FeedbackModal.vue     |  82 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/components/devloop/LiveAgentStream.vue   | 117 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/components/devloop/LoopStatusBar.vue     |  61 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/components/devloop/PrdDiffPanel.vue      |  75 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/components/devloop/UnitDrawer.vue        | 122 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/components/devloop/UnitsDAG.vue          | 107 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/components/devloop/ops/BuglistView.vue   |  90 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/components/devloop/ops/ChangelogView.vue |  73 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/components/devloop/ops/LoopLogView.vue   |  98 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/components/devloop/ops/ProgressView.vue  | 134 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/router/index.js                          |  13 +++++++++++++
 web/src/views/DevLoopDashboard.vue               | 141 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 web/src/views/DevLoopOps.vue                     |  62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 17 files changed, 1533 insertions(+), 0 deletions(-)
 create mode 100644 scripts/phase5-verify.js
 create mode 100644 web/src/components/devloop/DashboardHeader.vue
 create mode 100644 web/src/components/devloop/FeedbackModal.vue
 create mode 100644 web/src/components/devloop/LiveAgentStream.vue
 create mode 100644 web/src/components/devloop/LoopStatusBar.vue
 create mode 100644 web/src/components/devloop/PrdDiffPanel.vue
 create mode 100644 web/src/components/devloop/UnitDrawer.vue
 create mode 100644 web/src/components/devloop/UnitsDAG.vue
 create mode 100644 web/src/components/devloop/ops/BuglistView.vue
 create mode 100644 web/src/components/devloop/ops/ChangelogView.vue
 create mode 100644 web/src/components/devloop/ops/LoopLogView.vue
 create mode 100644 web/src/components/devloop/ops/ProgressView.vue
 create mode 100644 web/src/views/DevLoopDashboard.vue
 create mode 100644 web/src/views/DevLoopOps.vue

diff --git a/scripts/phase5-verify.js b/scripts/phase5-verify.js
new file mode 100644
index 0000000..7e8b815
--- /dev/null
+++ b/scripts/phase5-verify.js
@@ -0,0 +1,180 @@
+#!/usr/bin/env node
+/**
+ * scripts/phase5-verify.js
+ *
+ * P5 Vue Dashboard 验收 (后端 + 静态产物):
+ *   ① Vue 构建产物 (DevLoopDashboard + DevLoopOps + 8 子组件) 存在
+ *   ② GET /:pid/state 返带 status + units 字段
+ *   ③ GET /:pid/timeline 返事件列表
+ *   ④ GET /:pid/changelog 返条目列表
+ *   ⑤ GET /:pid/units/:unitId 返 unit + runs + coder_log_tail
+ *   ⑥ GET /:pid/bugs 返 bug 列表
+ *   ⑦ SSE /:pid/stream 一秒内收到 ≥1 心跳/事件
+ *
+ * 注: 这是后端 + 产物层面的验证;真正点击鼠标 UI 需要 vite dev 跑起来手测。
+ */
+
+process.env.LEMONBOSS_CLAUDE_MODE = 'mock';
+
+const fs = require('fs');
+const path = require('path');
+const http = require('http');
+
+const serverNodeModules = path.resolve(__dirname, '../server/node_modules');
+require('module').globalPaths.push(serverNodeModules);
+const express = (() => {
+  try { return require('express'); }
+  catch {
+    return require(require.resolve('express', { paths: [path.resolve(__dirname, '../server')] }));
+  }
+})();
+
+const pathResolver = require('../server/services/devloop/path-resolver');
+const lc = require('../server/src/core/devloop/loop-controller');
+const devloopRouter = require('../server/routes/devloop');
+
+const HAPPY_DIR = path.resolve(__dirname, '../fixtures/devloop-mock-scenarios/happy_path');
+const WEB_DIST = path.resolve(__dirname, '../web/dist');
+
+const results = [];
+function step(name, fn) {
+  return (async () => {
+    try {
+      const r = await fn();
+      results.push({ name, ok: true, detail: r?.detail || '' });
+      return r;
+    } catch (e) {
+      results.push({ name, ok: false, reason: e.message });
+      throw e;
+    }
+  })();
+}
+
+async function startApp() {
+  const app = express();
+  app.use(express.json());
+  app.use('/api/devloop', devloopRouter);
+  return new Promise((resolve) => {
+    const srv = app.listen(0, '127.0.0.1', () => {
+      resolve({ srv, base: `http://127.0.0.1:${srv.address().port}` });
+    });
+  });
+}
+
+async function main() {
+  await step('① Vue build 产物存在 (Dashboard + Ops + components)', () => {
+    const required = [
+      'index.html', 'assets',
+    ];
+    for (const f of required) {
+      if (!fs.existsSync(path.join(WEB_DIST, f))) throw new Error(`web/dist/${f} missing — run npm run web:build`);
+    }
+    const assets = fs.readdirSync(path.join(WEB_DIST, 'assets'));
+    if (!assets.some(n => /DevLoopDashboard.*\.js$/.test(n))) throw new Error('DevLoopDashboard chunk not built');
+    if (!assets.some(n => /DevLoopOps.*\.js$/.test(n))) throw new Error('DevLoopOps chunk not built');
+    return { detail: `DevLoopDashboard + DevLoopOps chunks present in web/dist/assets` };
+  });
+
+  const { srv, base } = await startApp();
+  const cid = 'c-phase5-' + Date.now().toString(36);
+  let pid;
+
+  try {
+    await step('② 准备项目: POST /projects → state', async () => {
+      const r = await fetch(`${base}/api/devloop/projects`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ company_id: cid, requirement: 'TODO', mockFixtureDir: HAPPY_DIR }),
+      });
+      pid = (await r.json()).pid;
+      const s = await (await fetch(`${base}/api/devloop/projects/${pid}/state`)).json();
+      if (!s.status) throw new Error('state.status missing');
+      if (!Array.isArray(s.units)) throw new Error('state.units missing');
+      return { detail: `pid=${pid} status=${s.status} units=${s.units.length}` };
+    });
+
+    await step('③ GET /:pid/timeline returns events', async () => {
+      const r = await fetch(`${base}/api/devloop/projects/${pid}/timeline?limit=50`);
+      const j = await r.json();
+      if (!Array.isArray(j.events)) throw new Error('events not array');
+      if (j.events.length === 0) throw new Error('events empty');
+      return { detail: `${j.events.length} events` };
+    });
+
+    await step('④ GET /:pid/changelog returns entries', async () => {
+      const r = await fetch(`${base}/api/devloop/projects/${pid}/changelog`);
+      const j = await r.json();
+      if (!Array.isArray(j.entries)) throw new Error('entries not array');
+      return { detail: `${j.entries.length} entries` };
+    });
+
+    await step('⑤ GET /:pid/units/todo-be returns unit + runs', async () => {
+      const r = await fetch(`${base}/api/devloop/projects/${pid}/units/todo-be`);
+      if (r.status !== 200) throw new Error(`status ${r.status}`);
+      const j = await r.json();
+      if (!j.unit) throw new Error('unit missing');
+      if (!Array.isArray(j.runs)) throw new Error('runs not array');
+      return { detail: `unit.status=${j.unit?.status} · ${j.runs.length} runs` };
+    });
+
+    await step('⑥ GET /:pid/bugs returns bug list', async () => {
+      const r = await fetch(`${base}/api/devloop/projects/${pid}/bugs`);
+      const j = await r.json();
+      if (!Array.isArray(j.bugs)) throw new Error('bugs not array');
+      return { detail: `${j.bugs.length} bugs` };
+    });
+
+    await step('⑦ SSE /:pid/stream delivers ≥1 event in 1s after emit', async () => {
+      // 用 http.get 拿原生 stream
+      const url = new URL(`${base}/api/devloop/projects/${pid}/stream`);
+      const events = await new Promise((resolve) => {
+        const out = [];
+        const req = http.get({
+          hostname: url.hostname, port: url.port, path: url.pathname,
+          headers: { 'Accept': 'text/event-stream' },
+        }, (res) => {
+          let buf = '';
+          res.on('data', (chunk) => {
+            buf += chunk.toString();
+            const matches = buf.matchAll(/^event: (.+)$/gm);
+            for (const m of matches) out.push(m[1]);
+            buf = buf.slice(buf.lastIndexOf('\n\n') + 2);
+          });
+          res.on('error', () => resolve(out));
+        });
+        // Trigger an event so we have something to receive
+        setTimeout(async () => {
+          try {
+            await fetch(`${base}/api/devloop/projects/${pid}/feedback`, {
+              method: 'POST', headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({ text: 'feedback for sse test', mockFixtureDir: HAPPY_DIR }),
+            });
+          } catch { /* ignore */ }
+        }, 100);
+        setTimeout(() => { try { req.destroy(); } catch {} resolve(out); }, 1500);
+      });
+      if (events.length === 0) throw new Error('no SSE events received');
+      return { detail: `${events.length} events: ${events.slice(0, 4).join(', ')}` };
+    });
+
+  } finally {
+    srv.close();
+    try { fs.rmSync(path.join(pathResolver.DATA_DIR, 'companies', cid), { recursive: true, force: true }); }
+    catch { /* ignore */ }
+  }
+
+  let pass = 0, fail = 0;
+  console.log('\n┌─ DevLoop Phase 5 — Vue Dashboard Acceptance ──────');
+  for (const r of results) {
+    const tag = r.ok ? '✓' : '✗';
+    console.log(`│ ${tag} ${r.name.padEnd(60)} ${r.ok ? r.detail : '— ' + r.reason}`);
+    r.ok ? pass++ : fail++;
+  }
+  console.log(`└─ ${pass}/${pass + fail} steps passed${fail ? ' · ' + fail + ' failed' : ''}\n`);
+  process.exit(fail ? 1 : 0);
+}
+
+main().catch(e => {
+  console.error('\n[phase5-verify] fatal:', e);
+  for (const r of results) console.log(' ', r.ok ? '✓' : '✗', r.name, r.ok ? r.detail : '— ' + r.reason);
+  process.exit(1);
+});
diff --git a/server/routes/devloop.js b/server/routes/devloop.js
index 392c6c3..ec4ea5d 100644
--- a/server/routes/devloop.js
+++ b/server/routes/devloop.js
@@ -206,6 +206,79 @@ router.get('/projects/:pid/bugs', h(async (req, res) => {
   res.json({ bugs, total: bugs.length });
 }));
 
+// P5: GET /api/devloop/projects/:pid/timeline?limit=200
+//   读 timeline.ndjson 最近 N 条 (按时间倒序),给 LoopLogView 用
+router.get('/projects/:pid/timeline', h(async (req, res) => {
+  const fs = require('fs');
+  const { pid } = req.params;
+  try { pathResolver.resolveProjectRoot(pid); }
+  catch { return res.status(404).json({ error: 'unknown project: ' + pid }); }
+  const limit = Math.max(1, Math.min(2000, parseInt(req.query.limit, 10) || 200));
+  const p = pathResolver.resolveTimelineLog(pid);
+  if (!fs.existsSync(p)) return res.json({ events: [], total: 0 });
+  const lines = fs.readFileSync(p, 'utf8').trim().split('\n').filter(Boolean);
+  const events = lines.slice(-limit).reverse().map(l => {
+    try { return JSON.parse(l); } catch { return null; }
+  }).filter(Boolean);
+  res.json({ events, total: events.length });
+}));
+
+// P5: GET /api/devloop/projects/:pid/changelog
+//   读 changelog.ndjson 全部 (按时间倒序)
+router.get('/projects/:pid/changelog', h(async (req, res) => {
+  const fs = require('fs');
+  const { pid } = req.params;
+  try { pathResolver.resolveProjectRoot(pid); }
+  catch { return res.status(404).json({ error: 'unknown project: ' + pid }); }
+  const p = pathResolver.resolveChangelog(pid);
+  if (!fs.existsSync(p)) return res.json({ entries: [], total: 0 });
+  const entries = fs.readFileSync(p, 'utf8').trim().split('\n').filter(Boolean)
+    .map(l => { try { return JSON.parse(l); } catch { return null; }}).filter(Boolean)
+    .reverse();
+  res.json({ entries, total: entries.length });
+}));
+
+// P5: GET /api/devloop/projects/:pid/units/:unitId
+//   返回 unit 元数据 + 最近 N 次 runs (Tester result.json)
+router.get('/projects/:pid/units/:unitId', h(async (req, res) => {
+  const fs = require('fs'); const path = require('path');
+  const { pid, unitId } = req.params;
+  try { pathResolver.resolveProjectRoot(pid); }
+  catch { return res.status(404).json({ error: 'unknown project: ' + pid }); }
+  const unitDir = pathResolver.resolveUnitDir(pid, unitId);
+  if (!fs.existsSync(unitDir)) return res.status(404).json({ error: 'unknown unit: ' + unitId });
+  // 从 units.json 找 unit 元数据
+  let unitMeta = null;
+  try {
+    const uj = JSON.parse(fs.readFileSync(pathResolver.resolveUnitsJson(pid), 'utf8'));
+    unitMeta = (uj.units || []).find(u => u.id === unitId) || null;
+  } catch { /* ignore */ }
+  // runs
+  const runsDir = path.join(unitDir, 'runs');
+  let runs = [];
+  if (fs.existsSync(runsDir)) {
+    const ids = fs.readdirSync(runsDir).filter(n => {
+      try { return fs.statSync(path.join(runsDir, n)).isDirectory(); } catch { return false; }
+    }).sort().reverse().slice(0, 3);
+    for (const id of ids) {
+      const rp = path.join(runsDir, id, 'result.json');
+      let r = null;
+      if (fs.existsSync(rp)) {
+        try { r = JSON.parse(fs.readFileSync(rp, 'utf8')); } catch {}
+      }
+      runs.push({ run_id: id, result: r });
+    }
+  }
+  // coder.log 最后 1KB 节选
+  let coderLog = null;
+  const clp = path.join(unitDir, 'coder.log');
+  if (fs.existsSync(clp)) {
+    const raw = fs.readFileSync(clp, 'utf8');
+    coderLog = raw.length > 1024 ? raw.slice(-1024) : raw;
+  }
+  res.json({ unit: unitMeta, runs, coder_log_tail: coderLog });
+}));
+
 // GET /api/devloop/projects/:pid/state
 router.get('/projects/:pid/state', h(async (req, res) => {
   try {
diff --git a/server/tests/devloop/routes.test.js b/server/tests/devloop/routes.test.js
index 7fe2227..61c6e13 100644
--- a/server/tests/devloop/routes.test.js
+++ b/server/tests/devloop/routes.test.js
@@ -189,4 +189,52 @@ describe('routes/devloop', () => {
     const j = await r.json();
     expect(Array.isArray(j.projects)).toBe(true);
   });
+
+  // P5 — UI-supporting endpoints
+  describe('P5 UI endpoints', () => {
+    let pid;
+    beforeAll(async () => {
+      const cid = 'c-p5-routes-' + Math.random().toString(36).slice(2, 7);
+      created.push(cid);
+      const r = await fetch(`${base}/api/devloop/projects`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ company_id: cid, requirement: 'p5 test' }),
+      });
+      pid = (await r.json()).pid;
+    });
+
+    it('GET /timeline returns events array', async () => {
+      const r = await fetch(`${base}/api/devloop/projects/${pid}/timeline`);
+      expect(r.status).toBe(200);
+      const j = await r.json();
+      expect(Array.isArray(j.events)).toBe(true);
+      expect(j.events.length).toBeGreaterThan(0);
+    });
+
+    it('GET /changelog returns entries array', async () => {
+      const r = await fetch(`${base}/api/devloop/projects/${pid}/changelog`);
+      expect(r.status).toBe(200);
+      const j = await r.json();
+      expect(Array.isArray(j.entries)).toBe(true);
+    });
+
+    it('GET /units/:unitId returns unit + runs + coder_log_tail', async () => {
+      const r = await fetch(`${base}/api/devloop/projects/${pid}/units/todo-be`);
+      expect(r.status).toBe(200);
+      const j = await r.json();
+      expect(j).toHaveProperty('unit');
+      expect(j).toHaveProperty('runs');
+      expect(Array.isArray(j.runs)).toBe(true);
+    });
+
+    it('GET /units/:unitId 404 on unknown unit', async () => {
+      const r = await fetch(`${base}/api/devloop/projects/${pid}/units/no-such-unit`);
+      expect(r.status).toBe(404);
+    });
+
+    it('GET /timeline 404 on unknown pid', async () => {
+      const r = await fetch(`${base}/api/devloop/projects/p-nope/timeline`);
+      expect(r.status).toBe(404);
+    });
+  });
 });
diff --git a/web/src/components/devloop/DashboardHeader.vue b/web/src/components/devloop/DashboardHeader.vue
new file mode 100644
index 0000000..6c9d7e4
--- /dev/null
+++ b/web/src/components/devloop/DashboardHeader.vue
@@ -0,0 +1,57 @@
+<template>
+  <header class="dl-header">
+    <div class="left">
+      <router-link to="/company" class="back">← LemonBoss</router-link>
+      <h1>DevLoop · {{ pid }}</h1>
+      <span class="status-badge" :class="status">{{ status }}</span>
+    </div>
+    <div class="right">
+      <button class="btn primary" @click="$emit('feedback')" :disabled="terminal">+ NEW REQUIREMENT</button>
+      <button class="btn signoff" @click="$emit('signoff')" :disabled="status !== 'shipped'">Sign Off</button>
+      <button class="btn abandon" @click="$emit('abandon')" :disabled="terminal">Abandon</button>
+      <span class="sep">|</span>
+      <button class="btn link" @click="$emit('ops', 'bugs')">Ops →</button>
+    </div>
+  </header>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  pid: { type: String, required: true },
+  state: { type: Object, default: null },
+});
+defineEmits(['feedback', 'signoff', 'abandon', 'ops']);
+const status = computed(() => props.state?.status || props.state?.project?.status || 'unknown');
+const terminal = computed(() => status.value === 'shipped-final' || status.value === 'abandoned');
+</script>
+
+<style scoped>
+.dl-header {
+  display:flex; align-items:center; justify-content:space-between;
+  padding:12px 0; border-bottom:1px solid #eee;
+}
+.left { display:flex; align-items:center; gap:14px; }
+.right { display:flex; align-items:center; gap:8px; }
+.back { color:#888; text-decoration:none; font-size:13px; }
+.back:hover { color:#222; }
+h1 { font-size:18px; font-weight:600; margin:0; font-family: ui-monospace, monospace; }
+.status-badge {
+  font-size:11px; padding:3px 10px; border-radius:12px; text-transform:uppercase; font-weight:600;
+}
+.status-badge.draft         { background:#eee; color:#666; }
+.status-badge.running       { background:#cce5ff; color:#004085; }
+.status-badge.shipped       { background:#d4edda; color:#155724; }
+.status-badge.shipped-final { background:#0a6;    color:#fff; }
+.status-badge.abandoned     { background:#222;    color:#fff; }
+.status-badge.l2_blocked    { background:#fff3cd; color:#856404; }
+.status-badge.l2_exhausted  { background:#f8d7da; color:#721c24; }
+.status-badge.unknown       { background:#fafafa; color:#999; border:1px solid #eee; }
+.btn { padding:6px 14px; border:none; border-radius:4px; cursor:pointer; font-size:13px; }
+.btn:disabled { background:#ddd; color:#999; cursor:not-allowed; }
+.btn.primary  { background:#222; color:#fff; }
+.btn.signoff  { background:#0a6; color:#fff; }
+.btn.abandon  { background:#822; color:#fff; }
+.btn.link     { background:transparent; color:#0a6; padding:6px 0; }
+.sep { color:#ccc; }
+</style>
diff --git a/web/src/components/devloop/FeedbackModal.vue b/web/src/components/devloop/FeedbackModal.vue
new file mode 100644
index 0000000..48e974a
--- /dev/null
+++ b/web/src/components/devloop/FeedbackModal.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="modal-backdrop" @click.self="$emit('close')">
+    <div class="modal">
+      <header>
+        <h2>+ NEW REQUIREMENT</h2>
+        <button class="x" @click="$emit('close')">×</button>
+      </header>
+      <p class="hint">提交一段新的需求 / 反馈 → PM 进 incremental 模式,追加 PRD 章节并 bump rev。</p>
+      <textarea
+        v-model="text"
+        :disabled="submitting"
+        placeholder="例如:增加 toggle done 功能;或:把 POST /todos 改成支持 text+priority"
+      />
+      <div v-if="err" class="err">{{ err }}</div>
+      <div v-if="ok" class="ok">{{ ok }}</div>
+      <footer>
+        <button class="btn cancel" @click="$emit('close')" :disabled="submitting">Cancel</button>
+        <button class="btn submit" @click="submit" :disabled="!text.trim() || submitting">{{ submitting ? '...' : 'Submit' }}</button>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const props = defineProps({ pid: { type: String, required: true } });
+const emit = defineEmits(['close', 'submitted']);
+
+const text = ref('');
+const submitting = ref(false);
+const err = ref('');
+const ok = ref('');
+
+async function submit() {
+  if (!text.value.trim()) return;
+  submitting.value = true;
+  err.value = ''; ok.value = '';
+  try {
+    const r = await fetch(`/api/devloop/projects/${props.pid}/feedback`, {
+      method: 'POST', headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ text: text.value.trim(), by: 'human' }),
+    });
+    const j = await r.json();
+    if (!r.ok) {
+      err.value = j.error || `HTTP ${r.status}`;
+    } else {
+      ok.value = `PRD bumped: rev ${j.prd_rev_before} → ${j.prd_rev_after} · status=${j.status}`;
+      setTimeout(() => emit('submitted'), 800);
+    }
+  } catch (e) {
+    err.value = e.message;
+  } finally {
+    submitting.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.modal-backdrop {
+  position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1000;
+  display:flex; align-items:center; justify-content:center;
+}
+.modal {
+  background:#fff; border-radius:8px; width:560px; max-width:90vw;
+  padding:20px 24px; box-shadow:0 8px 32px rgba(0,0,0,.2);
+}
+header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
+h2 { margin:0; font-size:16px; }
+.x { background:none; border:none; font-size:24px; cursor:pointer; color:#888; line-height:1; }
+.hint { color:#888; font-size:12px; margin:0 0 12px 0; }
+textarea {
+  width:100%; min-height:120px; padding:10px; box-sizing:border-box;
+  border:1px solid #ccc; border-radius:4px; font-family:inherit; resize:vertical;
+}
+.err { color:#c00; font-size:12px; margin-top:8px; }
+.ok  { color:#070; font-size:12px; margin-top:8px; }
+footer { margin-top:12px; display:flex; justify-content:flex-end; gap:8px; }
+.btn { padding:6px 14px; border:none; border-radius:4px; cursor:pointer; font-size:13px; }
+.btn:disabled { background:#ddd !important; color:#999 !important; cursor:not-allowed; }
+.btn.cancel { background:#eee; color:#222; }
+.btn.submit { background:#222; color:#fff; }
+</style>
diff --git a/web/src/components/devloop/LiveAgentStream.vue b/web/src/components/devloop/LiveAgentStream.vue
new file mode 100644
index 0000000..88a1e59
--- /dev/null
+++ b/web/src/components/devloop/LiveAgentStream.vue
@@ -0,0 +1,117 @@
+<template>
+  <div class="stream">
+    <div class="bar">
+      <span class="conn" :class="status">● {{ status }}</span>
+      <span class="lei" v-if="lastEventId">last-event-id: {{ lastEventId }}</span>
+      <span class="grow" />
+      <button class="btn" @click="clear">clear</button>
+    </div>
+    <div ref="logEl" class="log">
+      <div v-for="(e, i) in events" :key="i" class="evt">
+        <span class="ts">{{ formatTs(e.ts) }}</span>
+        <span class="kind">[{{ e.kind }}]</span>
+        <span class="payload">{{ e.payload }}</span>
+      </div>
+      <div v-if="!events.length" class="empty">waiting for events…</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
+const props = defineProps({ pid: { type: String, required: true } });
+
+const events = ref([]);
+const status = ref('connecting');
+const lastEventId = ref(null);
+const logEl = ref(null);
+let es = null;
+let reconnectTimer = null;
+const MAX_EVENTS = 250;
+
+function connect() {
+  if (es) try { es.close(); } catch {}
+  status.value = 'connecting';
+  const url = `/api/devloop/projects/${props.pid}/stream`;
+  // EventSource 自带 Last-Event-ID; 用户网络断开自动重连。
+  // (本应用浏览器会自动从 lastEventId 续传)
+  try {
+    es = new EventSource(url);
+  } catch (e) {
+    status.value = 'error';
+    return;
+  }
+  es.onopen = () => { status.value = 'connected'; };
+  es.onerror = () => {
+    status.value = 'reconnecting';
+    // EventSource 内置 reconnect, 但浏览器不一定保证 5s 内重连;
+    // 手动 5s 重试兜底:断后 5s 关掉重新打开,带 Last-Event-ID 由浏览器自动注入。
+    try { es.close(); } catch {}
+    es = null;
+    if (reconnectTimer) clearTimeout(reconnectTimer);
+    reconnectTimer = setTimeout(connect, 5000);
+  };
+  // 监听几个核心事件类型(SSE event name)
+  const listenTo = [
+    'project.status', 'project.shipped', 'project.run_started',
+    'l1.wave_start', 'unit.state',
+    'integration.run_start', 'integration.result',
+    'triage.result', 'sdd.updated', 'prd.updated',
+    'human_intervention_needed', 'project.l2_blocked', 'project.l2_exhausted',
+    'units.reset', 'bug.opened', 'bug.transition',
+  ];
+  for (const k of listenTo) {
+    es.addEventListener(k, (ev) => addEvent(k, ev));
+  }
+  // generic message handler 兜底
+  es.onmessage = (ev) => addEvent(ev.type || 'message', ev);
+}
+
+function addEvent(kind, ev) {
+  let payload;
+  try { payload = JSON.stringify(JSON.parse(ev.data)); } catch { payload = ev.data; }
+  if (ev.lastEventId) lastEventId.value = ev.lastEventId;
+  events.value.push({ ts: Date.now(), kind, payload });
+  if (events.value.length > MAX_EVENTS) events.value.splice(0, events.value.length - MAX_EVENTS);
+  nextTick(() => {
+    if (logEl.value) logEl.value.scrollTop = logEl.value.scrollHeight;
+  });
+}
+
+function formatTs(ts) {
+  const d = new Date(ts);
+  return d.toTimeString().slice(0, 8);
+}
+
+function clear() { events.value = []; }
+
+onMounted(connect);
+onBeforeUnmount(() => {
+  if (reconnectTimer) clearTimeout(reconnectTimer);
+  if (es) try { es.close(); } catch {}
+});
+</script>
+
+<style scoped>
+.stream { display:flex; flex-direction:column; height:240px; }
+.bar { display:flex; gap:10px; align-items:center; font-size:12px; color:#666; margin-bottom:6px; }
+.bar .grow { flex:1; }
+.conn { font-weight:600; }
+.conn.connecting   { color:#888; }
+.conn.connected    { color:#0a6; }
+.conn.reconnecting { color:#c70; }
+.conn.error        { color:#c00; }
+.lei { font-family: ui-monospace, monospace; color:#aaa; }
+.log {
+  flex:1; overflow-y:auto;
+  background:#0f1115; color:#e6e6e6;
+  font-family: ui-monospace, monospace; font-size:12px;
+  padding:10px; border-radius:6px;
+}
+.evt { display:flex; gap:8px; margin-bottom:4px; }
+.ts { color:#7da; flex:0 0 70px; }
+.kind { color:#ffce6a; flex:0 0 auto; }
+.payload { color:#bbd; overflow-wrap:anywhere; flex:1; }
+.empty { color:#666; }
+.btn { background:#222; color:#fff; border:none; border-radius:4px; padding:3px 10px; cursor:pointer; font-size:11px; }
+</style>
diff --git a/web/src/components/devloop/LoopStatusBar.vue b/web/src/components/devloop/LoopStatusBar.vue
new file mode 100644
index 0000000..184c2e2
--- /dev/null
+++ b/web/src/components/devloop/LoopStatusBar.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="loop-bar">
+    <div class="phase" :class="{active: phaseAt('docs')}">
+      <span class="dot" />Docs<small>PRD rev {{ state.prd_rev ?? '-' }} · SDD rev {{ state.sdd_rev ?? '-' }}</small>
+    </div>
+    <div class="arrow">→</div>
+    <div class="phase" :class="{active: phaseAt('l1')}">
+      <span class="dot" />L1 Units<small>{{ l1Summary }}</small>
+    </div>
+    <div class="arrow">→</div>
+    <div class="phase" :class="{active: phaseAt('l2')}">
+      <span class="dot" />L2 Integration<small>l2_rounds {{ l2Rounds }}/{{ l2Budget }}</small>
+    </div>
+    <div class="arrow">→</div>
+    <div class="phase" :class="{active: phaseAt('ship')}">
+      <span class="dot" />Ship<small>{{ statusLabel }}</small>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({ state: { type: Object, required: true } });
+
+const status = computed(() => props.state.status || props.state.project?.status || 'unknown');
+const units = computed(() => props.state.units || []);
+const l1Summary = computed(() => {
+  const u = units.value;
+  if (!u.length) return 'no units';
+  const passed = u.filter(x => x.status === 'passed').length;
+  return `${passed}/${u.length} passed`;
+});
+const l2Rounds = computed(() => props.state.project?.status === 'shipped' ? props.state.units_rev || 0 : props.state.units_rev || 0);
+const l2Budget = computed(() => 3);
+const statusLabel = computed(() => status.value);
+
+function phaseAt(p) {
+  const s = status.value;
+  if (p === 'docs') return s !== 'unknown' && s !== 'draft';
+  if (p === 'l1')   return ['running', 'shipped', 'shipped-final', 'l2_blocked', 'l2_exhausted'].includes(s);
+  if (p === 'l2')   return ['shipped', 'shipped-final', 'l2_blocked', 'l2_exhausted'].includes(s);
+  if (p === 'ship') return ['shipped', 'shipped-final'].includes(s);
+  return false;
+}
+</script>
+
+<style scoped>
+.loop-bar { display:flex; align-items:stretch; gap:8px; }
+.phase {
+  flex:1; padding:12px 16px; border:1px solid #e3e3e8; border-radius:6px;
+  display:flex; flex-direction:column; gap:4px; background:#f9f9fb;
+  font-weight:500; color:#999;
+}
+.phase.active { background:#fff; border-color:#0a6; color:#222; }
+.phase small { font-weight:400; font-size:11px; color:#888; }
+.phase .dot {
+  width:8px; height:8px; border-radius:50%; background:#ccc; display:inline-block; margin-right:6px;
+}
+.phase.active .dot { background:#0a6; }
+.arrow { display:flex; align-items:center; color:#aaa; font-size:18px; }
+</style>
diff --git a/web/src/components/devloop/PrdDiffPanel.vue b/web/src/components/devloop/PrdDiffPanel.vue
new file mode 100644
index 0000000..bac1cf9
--- /dev/null
+++ b/web/src/components/devloop/PrdDiffPanel.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="prd-diff">
+    <div class="meta">
+      <span class="rev">PRD rev <b>{{ state?.prd_rev ?? '-' }}</b></span>
+      <span class="rev">SDD rev <b>{{ state?.sdd_rev ?? '-' }}</b></span>
+      <span class="grow" />
+      <button class="btn" @click="reload" :disabled="loading">{{ loading ? '...' : 'refresh' }}</button>
+    </div>
+
+    <div v-if="entries.length === 0" class="empty">no changelog yet</div>
+
+    <ul v-else class="entries">
+      <li v-for="e in entries.slice(0, 12)" :key="e.ts + ':' + e.kind" :class="['entry', e.kind]">
+        <span class="kind">{{ e.kind }}</span>
+        <span class="rev-num">rev {{ e.rev }}</span>
+        <span class="trigger">[{{ e.trigger || '?' }}]</span>
+        <span class="summary">{{ e.summary }}</span>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+const props = defineProps({
+  pid: { type: String, required: true },
+  state: { type: Object, default: null },
+});
+
+const entries = ref([]);
+const loading = ref(false);
+
+async function reload() {
+  loading.value = true;
+  try {
+    const r = await fetch(`/api/devloop/projects/${props.pid}/changelog`);
+    const j = await r.json();
+    entries.value = j.entries || [];
+  } catch (e) {
+    /* swallow */
+  } finally {
+    loading.value = false;
+  }
+}
+
+onMounted(reload);
+// Refresh changelog when prd_rev or sdd_rev changes
+watch(() => props.state?.prd_rev, reload);
+watch(() => props.state?.sdd_rev, reload);
+</script>
+
+<style scoped>
+.prd-diff { display:flex; flex-direction:column; gap:8px; }
+.meta { display:flex; align-items:center; gap:14px; font-size:12px; color:#666; }
+.meta .grow { flex:1; }
+.meta .rev b { color:#222; font-size:14px; }
+.empty { padding:20px; color:#888; text-align:center; }
+.entries { list-style:none; padding:0; margin:0; max-height:200px; overflow-y:auto; }
+.entry {
+  display:flex; gap:10px; padding:6px 8px;
+  border-bottom:1px solid #f0f0f3; font-size:13px;
+}
+.entry:last-child { border-bottom:none; }
+.entry .kind {
+  font-family: ui-monospace, monospace; font-size:11px; padding:2px 8px; border-radius:10px;
+  background:#eef; color:#446; flex:0 0 auto;
+}
+.entry.sdd_rev .kind { background:#ffeede; color:#a64a00; }
+.entry.prd_rev .kind { background:#deecff; color:#1d4d99; }
+.entry .rev-num { font-weight:600; color:#222; flex:0 0 50px; }
+.entry .trigger { color:#888; font-size:11px; flex:0 0 auto; }
+.entry .summary { color:#444; flex:1; overflow:hidden; text-overflow:ellipsis; }
+.btn { background:#222; color:#fff; border:none; border-radius:4px; padding:3px 10px; cursor:pointer; font-size:11px; }
+.btn:disabled { background:#bbb; }
+</style>
diff --git a/web/src/components/devloop/UnitDrawer.vue b/web/src/components/devloop/UnitDrawer.vue
new file mode 100644
index 0000000..5b6e939
--- /dev/null
+++ b/web/src/components/devloop/UnitDrawer.vue
@@ -0,0 +1,122 @@
+<template>
+  <div class="drawer-backdrop" @click.self="$emit('close')">
+    <aside class="drawer">
+      <header>
+        <h2>{{ unitId }}</h2>
+        <button class="x" @click="$emit('close')">×</button>
+      </header>
+
+      <div v-if="loading" class="loading">loading…</div>
+      <div v-else-if="err" class="err">{{ err }}</div>
+      <div v-else class="body">
+        <section>
+          <h3>Metadata</h3>
+          <div class="meta">
+            <div><label>status</label><span :class="['badge', unit?.status]">{{ unit?.status || '?' }}</span></div>
+            <div><label>type</label><span>{{ unit?.type || unit?.kind || '?' }}</span></div>
+            <div><label>retries</label><span>{{ unit?.retries ?? 0 }}/{{ unit?.retry_budget ?? '?' }}</span></div>
+            <div><label>contract</label><span class="hash">{{ unit?.contract_hash || '?' }}</span></div>
+            <div><label>depends_on</label><span>{{ (unit?.depends_on || []).join(', ') || '∅' }}</span></div>
+          </div>
+        </section>
+
+        <section>
+          <h3>Recent runs ({{ runs.length }})</h3>
+          <ul class="runs">
+            <li v-for="r in runs" :key="r.run_id" :class="['run', r.result?.ok ? 'ok' : 'fail']">
+              <div class="row">
+                <span class="rid">{{ r.run_id }}</span>
+                <span class="dot" :class="{ok: r.result?.ok, fail: r.result?.ok === false, crashed: r.result?.crashed }" />
+                <span class="sum">
+                  {{ r.result ? `${r.result.summary?.passed || 0}/${r.result.summary?.total || 0}` : 'no result' }}
+                </span>
+              </div>
+              <div v-for="(f, i) in (r.result?.failures || [])" :key="i" class="failure">
+                <code>{{ f.test || f.case_id }}</code>: {{ f.hint || f.stack?.slice(0, 100) || 'no hint' }}
+              </div>
+            </li>
+            <li v-if="!runs.length" class="empty">no runs yet</li>
+          </ul>
+        </section>
+
+        <section v-if="coderLog">
+          <h3>coder.log (tail)</h3>
+          <pre class="coder-log">{{ coderLog }}</pre>
+        </section>
+      </div>
+    </aside>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+const props = defineProps({
+  pid: { type: String, required: true },
+  unitId: { type: String, required: true },
+});
+defineEmits(['close']);
+
+const loading = ref(true);
+const err = ref('');
+const unit = ref(null);
+const runs = ref([]);
+const coderLog = ref('');
+
+onMounted(async () => {
+  try {
+    const r = await fetch(`/api/devloop/projects/${props.pid}/units/${props.unitId}`);
+    if (!r.ok) { err.value = `HTTP ${r.status}`; return; }
+    const j = await r.json();
+    unit.value = j.unit;
+    runs.value = j.runs || [];
+    coderLog.value = j.coder_log_tail || '';
+  } catch (e) {
+    err.value = e.message;
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+
+<style scoped>
+.drawer-backdrop {
+  position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:900;
+  display:flex; justify-content:flex-end;
+}
+.drawer {
+  background:#fff; width:520px; max-width:95vw; height:100vh; overflow-y:auto;
+  padding:20px 24px; box-shadow:-8px 0 32px rgba(0,0,0,.15);
+}
+header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
+h2 { margin:0; font-family: ui-monospace, monospace; }
+.x { background:none; border:none; font-size:24px; cursor:pointer; color:#888; }
+section { margin:18px 0; }
+h3 { font-size:13px; color:#666; margin:0 0 8px; text-transform:uppercase; }
+.loading, .err { padding:20px; text-align:center; color:#888; }
+.err { color:#c00; }
+.meta { display:grid; grid-template-columns: 110px 1fr; gap:6px 12px; font-size:13px; }
+.meta label { color:#888; }
+.meta .hash { font-family: ui-monospace, monospace; font-size:11px; color:#555; }
+.badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; text-transform:uppercase; background:#eee; }
+.badge.passed  { background:#d4edda; color:#155724; }
+.badge.failed  { background:#f8d7da; color:#721c24; }
+.badge.coding  { background:#fff3cd; color:#856404; }
+.badge.testing { background:#cce5ff; color:#004085; }
+.badge.pending { background:#eee;    color:#666; }
+.badge.blocked { background:#d6d8db; color:#383d41; }
+.runs { list-style:none; padding:0; margin:0; }
+.run { border:1px solid #eee; border-radius:4px; padding:8px 10px; margin-bottom:8px; }
+.run.ok { background:#fafefa; }
+.run.fail { background:#fef9f9; }
+.run .row { display:flex; align-items:center; gap:10px; }
+.rid { font-family: ui-monospace, monospace; font-size:12px; color:#555; }
+.dot { width:8px; height:8px; border-radius:50%; background:#ccc; }
+.dot.ok { background:#0a6; }
+.dot.fail { background:#c00; }
+.dot.crashed { background:#822; }
+.sum { color:#666; font-size:12px; }
+.failure { margin-top:4px; padding:4px 8px; background:#fff8f8; border-left:2px solid #c00; font-size:11px; color:#444; }
+.failure code { background:#eee; padding:1px 4px; border-radius:2px; font-size:11px; }
+.coder-log { background:#0f1115; color:#e6e6e6; padding:10px; border-radius:4px; font-size:11px; max-height:240px; overflow-y:auto; }
+.empty { color:#888; padding:10px; }
+</style>
diff --git a/web/src/components/devloop/UnitsDAG.vue b/web/src/components/devloop/UnitsDAG.vue
new file mode 100644
index 0000000..b4254b1
--- /dev/null
+++ b/web/src/components/devloop/UnitsDAG.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="dag-wrap">
+    <svg v-if="units.length" :viewBox="`0 0 ${W} ${H}`" :width="W" :height="H">
+      <defs>
+        <marker id="arr" viewBox="0 0 10 10" refX="10" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+          <path d="M0,0 L10,5 L0,10 z" fill="#999" />
+        </marker>
+      </defs>
+      <line
+        v-for="(e, i) in edges"
+        :key="'e'+i"
+        :x1="e.x1" :y1="e.y1" :x2="e.x2" :y2="e.y2"
+        stroke="#999" stroke-width="1.5" marker-end="url(#arr)"
+      />
+      <g
+        v-for="(n, i) in nodes"
+        :key="'n'+n.id"
+        :transform="`translate(${n.x},${n.y})`"
+        class="node-g"
+        @click="$emit('select', n.id)"
+      >
+        <rect :width="NW" :height="NH" rx="6" :class="['node', n.status]" />
+        <text :x="NW/2" :y="20" text-anchor="middle" class="id-label">{{ n.id }}</text>
+        <text :x="NW/2" :y="38" text-anchor="middle" class="status-label">{{ n.status }}</text>
+      </g>
+    </svg>
+    <div v-else class="empty">no units yet</div>
+    <p class="hint">click a unit node to inspect recent runs</p>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({ units: { type: Array, default: () => [] } });
+defineEmits(['select']);
+
+const NW = 130, NH = 52, GAP_X = 40, GAP_Y = 80, PAD = 20;
+
+const waves = computed(() => {
+  const remaining = new Set(props.units.map(u => u.id));
+  const deps = new Map(props.units.map(u => [u.id, (u.depends_on || []).slice()]));
+  const out = [];
+  let safety = 100;
+  while (remaining.size > 0 && safety-- > 0) {
+    const wave = [];
+    for (const id of remaining) {
+      if (deps.get(id).every(d => !remaining.has(d))) wave.push(id);
+    }
+    if (!wave.length) break;
+    for (const id of wave) remaining.delete(id);
+    out.push(wave);
+  }
+  return out;
+});
+
+const nodes = computed(() => {
+  const out = [];
+  waves.value.forEach((wave, wi) => {
+    wave.forEach((id, ni) => {
+      const u = props.units.find(x => x.id === id);
+      out.push({
+        id, status: u?.status || 'unknown',
+        x: PAD + wi * (NW + GAP_X),
+        y: PAD + ni * (NH + 20),
+        wave: wi,
+      });
+    });
+  });
+  return out;
+});
+
+const edges = computed(() => {
+  const out = [];
+  for (const u of props.units) {
+    for (const dep of (u.depends_on || [])) {
+      const a = nodes.value.find(n => n.id === dep);
+      const b = nodes.value.find(n => n.id === u.id);
+      if (a && b) out.push({ x1: a.x + NW, y1: a.y + NH/2, x2: b.x, y2: b.y + NH/2 });
+    }
+  }
+  return out;
+});
+
+const W = computed(() => Math.max(400, PAD * 2 + waves.value.length * (NW + GAP_X) - GAP_X));
+const H = computed(() => {
+  const maxRow = Math.max(...waves.value.map(w => w.length), 1);
+  return PAD * 2 + maxRow * (NH + 20) - 20;
+});
+</script>
+
+<style scoped>
+.dag-wrap svg { display:block; max-width:100%; background:#fafafb; border:1px dashed #eee; border-radius:6px; }
+.node-g { cursor: pointer; }
+.node { fill:#fff; stroke:#888; stroke-width:1.5; }
+.node:hover { stroke:#222; }
+.node.pending { fill:#f5f5f5; stroke:#888; }
+.node.coding  { fill:#fff3cd; stroke:#856404; }
+.node.testing { fill:#cce5ff; stroke:#004085; }
+.node.passed  { fill:#d4edda; stroke:#155724; }
+.node.failed  { fill:#f8d7da; stroke:#721c24; }
+.node.blocked { fill:#d6d8db; stroke:#383d41; }
+.node.unknown { fill:#fff;    stroke:#aaa; }
+.id-label { font-size:13px; font-weight:600; font-family: ui-monospace, monospace; pointer-events:none; }
+.status-label { font-size:10px; fill:#666; text-transform:uppercase; pointer-events:none; }
+.empty { padding:24px; color:#888; text-align:center; }
+.hint { font-size:11px; color:#aaa; margin-top:6px; }
+</style>
diff --git a/web/src/components/devloop/ops/BuglistView.vue b/web/src/components/devloop/ops/BuglistView.vue
new file mode 100644
index 0000000..e9f5822
--- /dev/null
+++ b/web/src/components/devloop/ops/BuglistView.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="bug-view">
+    <div class="filters">
+      <label>Status:
+        <select v-model="filterStatus" @change="reload">
+          <option value="">all</option>
+          <option>open</option><option>fixing</option>
+          <option>fixed</option><option>verified</option>
+          <option>wontfix</option><option>duplicate</option>
+        </select>
+      </label>
+      <span class="total">Total: {{ bugs.length }}</span>
+      <button class="btn" @click="reload">Refresh</button>
+    </div>
+
+    <table v-if="bugs.length">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>Status</th>
+          <th>Unit</th>
+          <th>Severity</th>
+          <th>Category</th>
+          <th>Title</th>
+          <th>Updated</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="b in bugs" :key="b.id" :class="b.status">
+          <td class="id">{{ b.id }}</td>
+          <td><span :class="['badge', b.status]">{{ b.status }}</span></td>
+          <td>{{ b.unit_id || '-' }}</td>
+          <td>{{ b.severity || '-' }}</td>
+          <td>{{ b.category || 'unknown' }}</td>
+          <td class="title">{{ b.title }}</td>
+          <td class="ts">{{ formatTs(b.last_updated_at || b.discovered_at) }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <p v-else class="empty">no bugs (or none match filter)</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+const props = defineProps({ pid: { type: String, required: true } });
+
+const bugs = ref([]);
+const filterStatus = ref('');
+
+async function reload() {
+  const qs = filterStatus.value ? `?status=${filterStatus.value}` : '';
+  const r = await fetch(`/api/devloop/projects/${props.pid}/bugs${qs}`);
+  if (!r.ok) { bugs.value = []; return; }
+  const j = await r.json();
+  bugs.value = j.bugs || [];
+}
+
+function formatTs(s) {
+  if (!s) return '-';
+  try { return new Date(s).toLocaleString(); } catch { return s; }
+}
+
+onMounted(reload);
+</script>
+
+<style scoped>
+.bug-view {}
+.filters { display:flex; align-items:center; gap:14px; margin-bottom:12px; font-size:13px; }
+.filters select { padding:4px 8px; }
+.filters .total { color:#666; }
+.btn { background:#222; color:#fff; border:none; border-radius:4px; padding:4px 12px; cursor:pointer; font-size:12px; }
+table { width:100%; border-collapse:collapse; font-size:13px; }
+th, td { padding:8px 10px; text-align:left; border-bottom:1px solid #eee; }
+th { background:#fafafb; color:#666; font-weight:500; font-size:12px; }
+tr:hover { background:#fafafa; }
+.id { font-family: ui-monospace, monospace; color:#555; font-size:11px; }
+.title { color:#222; }
+.ts { color:#888; font-size:11px; }
+.badge {
+  display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; text-transform:uppercase;
+}
+.badge.open      { background:#fef0c8; color:#8d6708; }
+.badge.fixing    { background:#cce5ff; color:#004085; }
+.badge.fixed     { background:#d4edda; color:#155724; }
+.badge.verified  { background:#a3e0b8; color:#0a4a1d; }
+.badge.wontfix   { background:#ddd;    color:#444; }
+.badge.duplicate { background:#eee;    color:#666; }
+.empty { padding:30px; text-align:center; color:#888; }
+</style>
diff --git a/web/src/components/devloop/ops/ChangelogView.vue b/web/src/components/devloop/ops/ChangelogView.vue
new file mode 100644
index 0000000..01c6cd1
--- /dev/null
+++ b/web/src/components/devloop/ops/ChangelogView.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="changelog-view">
+    <div class="bar">
+      <span>Total: {{ entries.length }} changes</span>
+      <span class="grow" />
+      <button class="btn" @click="reload">Refresh</button>
+    </div>
+
+    <table v-if="entries.length">
+      <thead>
+        <tr>
+          <th>When</th>
+          <th>Kind</th>
+          <th>Rev</th>
+          <th>By</th>
+          <th>Trigger</th>
+          <th>Summary</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="(e, i) in entries" :key="i">
+          <td class="ts">{{ formatTs(e.ts) }}</td>
+          <td><span :class="['k', e.kind]">{{ e.kind }}</span></td>
+          <td>{{ e.rev }}</td>
+          <td>{{ e.by || '-' }}</td>
+          <td class="trigger">[{{ e.trigger || '-' }}]</td>
+          <td class="summary">{{ e.summary }}</td>
+        </tr>
+      </tbody>
+    </table>
+    <p v-else class="empty">no changelog entries</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+const props = defineProps({ pid: { type: String, required: true } });
+const entries = ref([]);
+
+async function reload() {
+  const r = await fetch(`/api/devloop/projects/${props.pid}/changelog`);
+  if (!r.ok) return;
+  const j = await r.json();
+  entries.value = j.entries || [];
+}
+
+function formatTs(s) {
+  if (!s) return '-';
+  try { return new Date(s).toLocaleString(); } catch { return s; }
+}
+
+onMounted(reload);
+</script>
+
+<style scoped>
+.changelog-view {}
+.bar { display:flex; align-items:center; gap:14px; margin-bottom:12px; font-size:13px; }
+.bar .grow { flex:1; }
+.btn { background:#222; color:#fff; border:none; border-radius:4px; padding:4px 12px; cursor:pointer; font-size:12px; }
+table { width:100%; border-collapse:collapse; font-size:13px; }
+th, td { padding:8px 10px; text-align:left; border-bottom:1px solid #eee; }
+th { background:#fafafb; color:#666; font-weight:500; font-size:12px; }
+.ts { color:#888; font-size:11px; }
+.k {
+  display:inline-block; padding:1px 8px; border-radius:10px;
+  font-family: ui-monospace, monospace; font-size:11px;
+}
+.k.prd_rev { background:#deecff; color:#1d4d99; }
+.k.sdd_rev { background:#ffeede; color:#a64a00; }
+.trigger { color:#888; font-size:11px; }
+.summary { color:#444; }
+.empty { padding:30px; text-align:center; color:#888; }
+</style>
diff --git a/web/src/components/devloop/ops/LoopLogView.vue b/web/src/components/devloop/ops/LoopLogView.vue
new file mode 100644
index 0000000..d7c24f9
--- /dev/null
+++ b/web/src/components/devloop/ops/LoopLogView.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="loops-view">
+    <div class="bar">
+      <span>Total: {{ events.length }} events</span>
+      <span class="grow" />
+      <label>Filter:
+        <input v-model="filterText" placeholder="kind / summary substring" />
+      </label>
+      <button class="btn" @click="reload">Refresh</button>
+    </div>
+
+    <section v-for="(grp, key) in groups" :key="key" class="group">
+      <h3>{{ key }} <span class="count">({{ grp.length }})</span></h3>
+      <ul>
+        <li v-for="e in grp" :key="e.ts + e.kind">
+          <span class="ts">{{ formatTs(e.ts) }}</span>
+          <span :class="['kind', e.kind.replace(/\./g, '-')]">{{ e.kind }}</span>
+          <span class="src">[{{ e.source || 'system' }}]</span>
+          <span class="summary">{{ e.summary }}</span>
+        </li>
+      </ul>
+    </section>
+
+    <p v-if="!events.length" class="empty">no timeline events</p>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+const props = defineProps({ pid: { type: String, required: true } });
+const events = ref([]);
+const filterText = ref('');
+
+async function reload() {
+  const r = await fetch(`/api/devloop/projects/${props.pid}/timeline?limit=500`);
+  if (!r.ok) return;
+  const j = await r.json();
+  events.value = j.events || [];
+}
+
+const filtered = computed(() => {
+  const q = filterText.value.toLowerCase().trim();
+  if (!q) return events.value;
+  return events.value.filter(e =>
+    (e.kind || '').toLowerCase().includes(q) ||
+    (e.summary || '').toLowerCase().includes(q));
+});
+
+const groups = computed(() => {
+  const out = { 'L1 (unit)': [], 'L2 (integration / triage)': [], 'L3 (human / status)': [], 'System / Docs / Git': [] };
+  for (const e of filtered.value) {
+    const k = e.kind || '';
+    if (/^unit\.|^L1/.test(k)) out['L1 (unit)'].push(e);
+    else if (/integration|triage|sdd\.|units\.reset|l2_/.test(k)) out['L2 (integration / triage)'].push(e);
+    else if (/^project\.status|^project\.shipped|^project\.abandoned|human_intervention|prd\.updated/.test(k)) out['L3 (human / status)'].push(e);
+    else out['System / Docs / Git'].push(e);
+  }
+  return out;
+});
+
+function formatTs(ts) {
+  if (!ts) return '-';
+  try { return new Date(ts).toLocaleTimeString(); } catch { return String(ts); }
+}
+
+onMounted(reload);
+</script>
+
+<style scoped>
+.loops-view {}
+.bar { display:flex; align-items:center; gap:14px; margin-bottom:12px; font-size:13px; }
+.bar .grow { flex:1; }
+.bar input { padding:4px 8px; border:1px solid #ccc; border-radius:4px; width:200px; }
+.btn { background:#222; color:#fff; border:none; border-radius:4px; padding:4px 12px; cursor:pointer; font-size:12px; }
+.group { margin-bottom:18px; }
+.group h3 { font-size:12px; color:#888; margin:0 0 6px; text-transform:uppercase; letter-spacing:0.5px; }
+.group h3 .count { color:#bbb; font-weight:400; }
+ul { list-style:none; padding:0; margin:0; }
+li {
+  display:flex; gap:8px; padding:5px 8px; font-size:12px;
+  border-bottom:1px solid #f5f5f7;
+}
+li:hover { background:#fafafa; }
+.ts { color:#888; flex:0 0 100px; font-family: ui-monospace, monospace; }
+.kind {
+  flex:0 0 auto; font-family: ui-monospace, monospace; font-size:11px;
+  padding:1px 6px; border-radius:4px; background:#eef; color:#446;
+}
+.kind.unit-state { background:#cce5ff; color:#004085; }
+.kind.integration-result { background:#ffeede; color:#a64a00; }
+.kind.triage-result { background:#fde6f5; color:#8b1d72; }
+.kind.sdd-updated, .kind.prd-updated { background:#ffd; color:#7a6b00; }
+.kind.project-shipped { background:#d4edda; color:#155724; }
+.kind.project-status { background:#eee; color:#444; }
+.src { color:#999; font-size:11px; flex:0 0 auto; }
+.summary { color:#444; flex:1; overflow:hidden; text-overflow:ellipsis; }
+.empty { padding:30px; text-align:center; color:#888; }
+</style>
diff --git a/web/src/components/devloop/ops/ProgressView.vue b/web/src/components/devloop/ops/ProgressView.vue
new file mode 100644
index 0000000..9b37f49
--- /dev/null
+++ b/web/src/components/devloop/ops/ProgressView.vue
@@ -0,0 +1,134 @@
+<template>
+  <div class="progress-view">
+    <div v-if="!state" class="empty">loading…</div>
+    <div v-else class="cards">
+      <div class="card big">
+        <label>Project Status</label>
+        <div class="value">
+          <span :class="['badge', currentStatus]">{{ currentStatus }}</span>
+        </div>
+        <div class="meta">created {{ formatTs(state.project?.created_at) }}</div>
+      </div>
+
+      <div class="card">
+        <label>PRD rev</label>
+        <div class="value mono">{{ state.prd_rev ?? '-' }}</div>
+      </div>
+
+      <div class="card">
+        <label>SDD rev</label>
+        <div class="value mono">{{ state.sdd_rev ?? '-' }}</div>
+      </div>
+
+      <div class="card">
+        <label>Units progress</label>
+        <div class="value">{{ unitsPassed }}/{{ units.length }} passed</div>
+        <div class="bar"><div :style="{ width: pctPassed + '%' }" class="fill" /></div>
+      </div>
+
+      <div class="card">
+        <label>L2 rounds</label>
+        <div class="value">{{ l2Rounds }} / {{ l2Budget }}</div>
+        <div class="bar"><div :style="{ width: pctL2 + '%' }" class="fill l2" /></div>
+      </div>
+
+      <div class="card">
+        <label>Bugs (open)</label>
+        <div class="value">{{ bugsOpen }} <small>/ {{ bugsTotal }} total</small></div>
+      </div>
+    </div>
+
+    <h3>Per-unit breakdown</h3>
+    <table v-if="units.length">
+      <thead>
+        <tr><th>Unit</th><th>Status</th><th>Retries</th><th>Contract hash</th></tr>
+      </thead>
+      <tbody>
+        <tr v-for="u in units" :key="u.id">
+          <td class="mono">{{ u.id }}</td>
+          <td><span :class="['badge', u.status]">{{ u.status }}</span></td>
+          <td>{{ u.retries ?? 0 }} / {{ u.retry_budget ?? '-' }}</td>
+          <td class="mono hash">{{ u.contract_hash || '-' }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+const props = defineProps({ pid: { type: String, required: true } });
+
+const state = ref(null);
+const bugs = ref([]);
+let timer = null;
+
+async function load() {
+  try {
+    const [sR, bR] = await Promise.all([
+      fetch(`/api/devloop/projects/${props.pid}/state`),
+      fetch(`/api/devloop/projects/${props.pid}/bugs`),
+    ]);
+    if (sR.ok) state.value = await sR.json();
+    if (bR.ok) bugs.value = (await bR.json()).bugs || [];
+  } catch { /* ignore */ }
+}
+
+const units = computed(() => state.value?.units || []);
+const unitsPassed = computed(() => units.value.filter(u => u.status === 'passed').length);
+const pctPassed = computed(() => units.value.length ? Math.round(unitsPassed.value / units.value.length * 100) : 0);
+const currentStatus = computed(() => state.value?.status || state.value?.project?.status || 'unknown');
+const l2Rounds = computed(() => {
+  // pull from units.json via the existing /state endpoint structure
+  // state.units_rev exists but rounds field needs separate fetch; for now read project.json if surfaced
+  return state.value?.project?.l2_rounds ?? 0;
+});
+const l2Budget = computed(() => 3);
+const pctL2 = computed(() => Math.min(100, (l2Rounds.value / l2Budget.value) * 100));
+const bugsOpen = computed(() => bugs.value.filter(b => b.status === 'open' || b.status === 'fixing').length);
+const bugsTotal = computed(() => bugs.value.length);
+
+function formatTs(s) { if (!s) return '-'; try { return new Date(s).toLocaleString(); } catch { return s; } }
+
+onMounted(() => {
+  load();
+  timer = setInterval(load, 3000);
+});
+onBeforeUnmount(() => { if (timer) clearInterval(timer); });
+</script>
+
+<style scoped>
+.progress-view {}
+.cards { display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
+.card { background:#fafafb; border:1px solid #e7e7eb; border-radius:8px; padding:14px 16px; }
+.card.big { grid-column: 1 / -1; }
+.card label { font-size:11px; text-transform:uppercase; color:#888; }
+.card .value { font-size:22px; font-weight:600; margin-top:4px; }
+.card .value small { font-size:13px; color:#888; font-weight:400; }
+.card .meta { font-size:11px; color:#aaa; }
+.mono { font-family: ui-monospace, monospace; }
+.bar { width:100%; height:6px; background:#eee; border-radius:3px; margin-top:6px; overflow:hidden; }
+.fill { height:6px; background:#0a6; border-radius:3px; transition: width .3s; }
+.fill.l2 { background:#a64a00; }
+.empty { padding:30px; text-align:center; color:#888; }
+h3 { font-size:13px; color:#666; margin:24px 0 8px; text-transform:uppercase; }
+table { width:100%; border-collapse:collapse; font-size:13px; }
+th, td { padding:8px 10px; text-align:left; border-bottom:1px solid #eee; }
+th { background:#fafafb; color:#666; font-weight:500; font-size:12px; }
+.hash { font-size:11px; color:#666; }
+.badge { display:inline-block; padding:2px 10px; border-radius:12px; font-size:11px; text-transform:uppercase; font-weight:600; }
+.badge.draft         { background:#eee; color:#666; }
+.badge.running       { background:#cce5ff; color:#004085; }
+.badge.shipped       { background:#d4edda; color:#155724; }
+.badge.shipped-final { background:#0a6;    color:#fff; }
+.badge.abandoned     { background:#222;    color:#fff; }
+.badge.l2_blocked    { background:#fff3cd; color:#856404; }
+.badge.l2_exhausted  { background:#f8d7da; color:#721c24; }
+.badge.pending       { background:#eee; color:#666; }
+.badge.coding        { background:#fff3cd; color:#856404; }
+.badge.testing       { background:#cce5ff; color:#004085; }
+.badge.passed        { background:#d4edda; color:#155724; }
+.badge.failed        { background:#f8d7da; color:#721c24; }
+.badge.blocked       { background:#d6d8db; color:#383d41; }
+.badge.unknown       { background:#fafafa; color:#888; }
+</style>
diff --git a/web/src/router/index.js b/web/src/router/index.js
index 5d8e8ab..e4f5c7e 100644
--- a/web/src/router/index.js
+++ b/web/src/router/index.js
@@ -69,6 +69,19 @@ const routes = [
     name: 'QuotaMonitor',
     component: () => import('@/views/QuotaMonitor.vue'),
   },
+  // P5 · DevLoop Dashboard + Ops
+  {
+    path: '/devloop/:pid',
+    name: 'DevLoopDashboard',
+    component: () => import('@/views/DevLoopDashboard.vue'),
+    props: true,
+  },
+  {
+    path: '/devloop/:pid/ops/:tab(bugs|loops|changelog|progress)',
+    name: 'DevLoopOps',
+    component: () => import('@/views/DevLoopOps.vue'),
+    props: true,
+  },
 ]
 
 const router = createRouter({
diff --git a/web/src/views/DevLoopDashboard.vue b/web/src/views/DevLoopDashboard.vue
new file mode 100644
index 0000000..ef3e953
--- /dev/null
+++ b/web/src/views/DevLoopDashboard.vue
@@ -0,0 +1,141 @@
+<template>
+  <div class="devloop-dashboard">
+    <DashboardHeader
+      :pid="pid"
+      :state="state"
+      @ops="goOps"
+      @feedback="openFeedback"
+      @signoff="onSignOff"
+      @abandon="onAbandon"
+    />
+
+    <div v-if="error" class="error-banner">{{ error }}</div>
+
+    <div v-if="state" class="grid">
+      <section class="loop-status">
+        <LoopStatusBar :state="state" />
+      </section>
+
+      <section class="dag">
+        <h2>Units DAG</h2>
+        <UnitsDAG
+          :units="state.units || []"
+          @select="onUnitClick"
+        />
+      </section>
+
+      <section class="live">
+        <h2>Live agent stream</h2>
+        <LiveAgentStream :pid="pid" />
+      </section>
+
+      <section class="diff">
+        <h2>PRD changes</h2>
+        <PrdDiffPanel :pid="pid" :state="state" />
+      </section>
+    </div>
+
+    <UnitDrawer
+      v-if="drawerUnit"
+      :pid="pid"
+      :unit-id="drawerUnit"
+      @close="drawerUnit = null"
+    />
+
+    <FeedbackModal
+      v-if="showFeedback"
+      :pid="pid"
+      @close="showFeedback = false"
+      @submitted="onFeedbackSubmitted"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { useRouter } from 'vue-router';
+import DashboardHeader from '@/components/devloop/DashboardHeader.vue';
+import LoopStatusBar from '@/components/devloop/LoopStatusBar.vue';
+import UnitsDAG from '@/components/devloop/UnitsDAG.vue';
+import LiveAgentStream from '@/components/devloop/LiveAgentStream.vue';
+import PrdDiffPanel from '@/components/devloop/PrdDiffPanel.vue';
+import FeedbackModal from '@/components/devloop/FeedbackModal.vue';
+import UnitDrawer from '@/components/devloop/UnitDrawer.vue';
+
+const props = defineProps({ pid: { type: String, required: true } });
+const router = useRouter();
+
+const state = ref(null);
+const error = ref('');
+const showFeedback = ref(false);
+const drawerUnit = ref(null);
+let pollTimer = null;
+
+async function fetchState() {
+  try {
+    const r = await fetch(`/api/devloop/projects/${props.pid}/state`);
+    if (!r.ok) {
+      error.value = r.status === 404 ? `项目不存在: ${props.pid}` : `读 state 失败: ${r.status}`;
+      state.value = null;
+      return;
+    }
+    error.value = '';
+    state.value = await r.json();
+  } catch (e) {
+    error.value = e.message;
+  }
+}
+
+function goOps(tab = 'bugs') {
+  router.push(`/devloop/${props.pid}/ops/${tab}`);
+}
+
+function openFeedback() { showFeedback.value = true; }
+
+function onUnitClick(unitId) { drawerUnit.value = unitId; }
+
+async function onSignOff() {
+  if (!confirm('确认 Sign Off? 此后将无法再提交反馈。')) return;
+  const r = await fetch(`/api/devloop/projects/${props.pid}/sign-off`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ by: 'human' }),
+  });
+  const j = await r.json();
+  if (!r.ok) alert('Sign off failed: ' + (j.error || r.status));
+  await fetchState();
+}
+
+async function onAbandon() {
+  const reason = prompt('Abandon 原因 (可空):', 'no longer needed');
+  if (reason === null) return;
+  const r = await fetch(`/api/devloop/projects/${props.pid}/abandon`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ by: 'human', reason }),
+  });
+  const j = await r.json();
+  if (!r.ok) alert('Abandon failed: ' + (j.error || r.status));
+  await fetchState();
+}
+
+function onFeedbackSubmitted() { showFeedback.value = false; fetchState(); }
+
+onMounted(async () => {
+  await fetchState();
+  pollTimer = setInterval(fetchState, 2500);
+});
+
+onBeforeUnmount(() => {
+  if (pollTimer) clearInterval(pollTimer);
+});
+</script>
+
+<style scoped>
+.devloop-dashboard { max-width: 1280px; margin: 0 auto; padding: 16px 24px; }
+.error-banner { background:#fee; border:1px solid #fcc; color:#c00; padding:8px 12px; border-radius:6px; margin:8px 0; }
+.grid { display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin-top:16px; }
+.grid section { background:#fff; border:1px solid #e7e7eb; border-radius:8px; padding:16px; min-height: 200px; }
+.grid section.live, .grid section.diff { min-height: 280px; }
+.grid h2 { font-size:14px; font-weight:600; margin:0 0 8px 0; color:#555; }
+.loop-status, .dag { grid-column: 1 / -1; }
+@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
+</style>
diff --git a/web/src/views/DevLoopOps.vue b/web/src/views/DevLoopOps.vue
new file mode 100644
index 0000000..478c135
--- /dev/null
+++ b/web/src/views/DevLoopOps.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="devloop-ops">
+    <header class="hdr">
+      <router-link :to="`/devloop/${pid}`" class="back">← Dashboard</router-link>
+      <h1>Ops · {{ pid }}</h1>
+    </header>
+
+    <nav class="tabs">
+      <router-link
+        v-for="t in tabs"
+        :key="t.id"
+        :to="`/devloop/${pid}/ops/${t.id}`"
+        :class="['tab', { active: t.id === tab }]"
+      >{{ t.label }}</router-link>
+    </nav>
+
+    <component :is="activeView" :pid="pid" />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import BuglistView from '@/components/devloop/ops/BuglistView.vue';
+import LoopLogView from '@/components/devloop/ops/LoopLogView.vue';
+import ChangelogView from '@/components/devloop/ops/ChangelogView.vue';
+import ProgressView from '@/components/devloop/ops/ProgressView.vue';
+
+const props = defineProps({
+  pid: { type: String, required: true },
+  tab: { type: String, required: true },
+});
+
+const tabs = [
+  { id: 'bugs',      label: 'Bugs' },
+  { id: 'loops',     label: 'Loops (Timeline)' },
+  { id: 'changelog', label: 'Changelog' },
+  { id: 'progress',  label: 'Progress' },
+];
+
+const viewMap = {
+  bugs: BuglistView,
+  loops: LoopLogView,
+  changelog: ChangelogView,
+  progress: ProgressView,
+};
+const activeView = computed(() => viewMap[props.tab] || BuglistView);
+</script>
+
+<style scoped>
+.devloop-ops { max-width: 1280px; margin: 0 auto; padding: 16px 24px; }
+.hdr { display:flex; align-items:center; gap:14px; padding-bottom:8px; border-bottom:1px solid #eee; }
+.back { color:#888; text-decoration:none; font-size:13px; }
+.back:hover { color:#222; }
+h1 { font-size:18px; margin:0; font-family: ui-monospace, monospace; }
+.tabs { display:flex; gap:0; margin:16px 0; border-bottom:1px solid #e3e3e8; }
+.tab {
+  padding:8px 16px; text-decoration:none; color:#666; border-bottom:2px solid transparent;
+  font-size:13px; font-weight:500;
+}
+.tab:hover { color:#222; }
+.tab.active { color:#0a6; border-bottom-color:#0a6; }
+</style>
--
libgit2 0.21.4