DevLoop Dashboard · LemonBoss PRD

Wireframe

四个核心区域

① Header

项目名 + 「+ NEW REQUIREMENT」按钮（L3 入口）。点开弹 textarea，提交后走 POST .../requirement。

② Loop 状态栏

三张并排卡片显示 L1 / L2 / L3 当前状态。点击任意一张展开该 Loop 的详细历史时间线。

③ Units DAG

复用 PipelineEditor.vue 的 SVG DAG 渲染。每个节点点击展开「该 Unit 的最近 3 次 run」抽屉。

④ Live 流 + PRD diff

左：终端样式的 Agent stdout 流（SSE）。右：当前 PRD 与上一 rev 的 section 级 diff。

组件树

// web/src/views/DevLoopDashboard.vue
<template>
  <PageLayout>
    <DashboardHeader :project="project" @feedback="onFeedback" />
    <LoopStatusBar   :l1="l1Stats" :l2="l2Stats" :l3="l3Stats" />
    <UnitsDAG        :units="units" @select="openUnitDrawer" />
    <LiveAgentStream :stream="sse" />
    <PrdDiffPanel    :prd="prdHtml"   :history="prdHistory" />
    <UnitDrawer      v-if="drawer" :unit="drawer" @close="drawer=null" />
    <FeedbackModal   v-if="modalOpen" @submit="sendRequirement" />
  </PageLayout>
</template>

总行数预估 ~400，含模板 + script + 样式。其中 UnitsDAG 大约 120 行——这里有最高的复用率（参考 PipelineEditor）。

路由 + i18n

路由：{ path: '/devloop/:pid', name: 'DevLoop', component: DevLoopDashboard } 加进 web/src/router/index.js。

i18n：新增 key 前缀 devloop.*。涉及的标签：loop.l1 · loop.l2 · loop.l3 · state.passed · state.testing · btn.newRequirement 等 ~20 个。中英文必填，其他 4 种语言可走 fallback。

性能考虑

SSE：使用浏览器原生 EventSource，断线自动重连。
大 stream：LiveAgentStream 保留最近 500 行，老的丢；用户想看完整日志走「open in new tab」按钮跳到 /stream.log。
PRD diff：使用客户端 diff-dom，不在后端计算（项目 PRD 一般 < 50KB，浏览器算得动）。
DAG 大于 50 Unit：切换到 d3-force 自动布局，否则手动栅格。