paseo-req-kit 1.15.0-beta.1 → 1.15.0-beta.3

package/CHANGELOG.md

@@ -2,6 +2,36 @@
 
 每个版本分为"使用者会看到的变化"和"升级须知"。升级步骤见 [docs/guide/安装与升级.md](docs/guide/安装与升级.md)。
 
+## 1.15.0-beta.3
+
+### 使用者会看到的变化
+
+- **文档站和首页换上了 req-kit 的新设计**（`req docs` 打开的本机文档站、GitHub Pages 和内网托管的副本都一样）：
+  - 首页：极光背景上的版本胶囊、标题和安装命令（npx / macOS·Linux / Windows 三个标签，一键复制）；下面是"对齐 → 方案 → 实现 → 评审 → 验证 → 验收"的步骤轨（要你拍板的两步是青柠色），Bento 卡片介绍对齐需求、审查原型、质量门、代码审查、验收清单和危险命令拦截，数字条里的版本数和设计决定记录数从仓库读取。
+  - 正文页：底色、文字、链接、按钮换成设计系统的颜色；侧边栏分组标题用等宽小字，当前页青柠底色；提示、注意、危险、说明四种提示框带图标、不用彩色左边框；代码块圆角带边框。
+  - 默认跟随系统深浅色，右上角可切换；标志和网页图标换成 req-kit 的新标志。
+
+### 升级须知
+
+- 文档站的颜色由 `scripts/tokens-build.mjs` 生成到 `site/.vitepress/theme/`（`rk-tokens.css`、`rk.css`、`rk-icons.ts`），标志复制到 `site/public/`；测试会检查它们和 `design/` 一致、主题样式里没有写死的颜色。
+- 非 main 分支和合并请求构建的文档站会作为 `site-dist` 保留 7 天，方便预览。
+
+## 1.15.0-beta.2
+
+### 使用者会看到的变化
+
+- **Paseo 插件换上了 req-kit 的新设计**：底色、文字、边框仍跟随 Paseo 的主题，req-kit 的样子靠青柠色的"要你做"、靛色的"AI 写的"、青色的"正在跑"带出来。
+  - 首页和统计页顶部有 req-kit 标志；需求分组用等宽小标题（NEEDS YOU / IN PROGRESS / READY TO TEST / DONE）。
+  - 需求列表每行前面有图标表示状态，下面一行等宽字体写"项目 · 功能目录"，右边是状态徽章和更新时间。
+  - "等你处理"的卡片用图标块代替彩色左边框；需求页顶部有放行轨，一眼看出走到了哪一步；每页只有一个青柠色主按钮（审查方案、代码审查、验收或第一个动作）。
+  - 按钮、徽章带图标；统计页的柱子用数据色。
+
+### 升级须知
+
+- 插件的颜色由 `scripts/tokens-build.mjs` 生成到 `paseo-plugin/shared/rk-colors.ts`，测试会检查插件代码里没有写死的颜色。
+- 插件随 npm 包发布；升级后照常运行 `req plugin install` 更新到 Paseo 里。
+- 文档站的新设计在下一个 beta 里做。
+
 ## 1.15.0-beta.1
 
 ### 使用者会看到的变化

package/engine/src/review-assets/rk.css

@@ -113,8 +113,8 @@ a:not(.rk-btn){color:var(--rk-brand-text)}
 /* Terminal */
 .rk-term{box-sizing:border-box;width:100%;max-width:600px;border-radius:var(--rk-radius-lg);background:var(--rk-surface-2);border:1px solid var(--rk-border-default);box-shadow:var(--rk-shadow-card);overflow:hidden;text-align:left}
 .rk-term__tabs{display:flex;gap:2px;padding:6px 6px 0;border-bottom:1px solid var(--rk-border-subtle)}
-.rk-term__tabs span{padding:6px 12px 8px;font:500 12px/1 var(--rk-font-mono);color:var(--rk-text-muted);border-bottom:2px solid transparent}
-.rk-term__tabs span.is-on{color:var(--rk-text-primary);border-color:var(--rk-brand-500)}
+.rk-term__tabs span,.rk-term__tabs button{padding:6px 12px 8px;background:none;border:0;border-bottom:2px solid transparent;cursor:pointer;font:500 12px/1 var(--rk-font-mono);color:var(--rk-text-muted)}
+.rk-term__tabs span.is-on,.rk-term__tabs button.is-on{color:var(--rk-text-primary);border-color:var(--rk-brand-500)}
 .rk-term__body{display:flex;align-items:center;gap:var(--rk-space-3);padding:14px var(--rk-space-4);font:13px/22px var(--rk-font-mono)}
 .rk-term__body i{font-style:normal;color:var(--rk-brand-text)}
 .rk-term__body code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:inherit}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "paseo-req-kit",
-  "version": "1.15.0-beta.1",
+  "version": "1.15.0-beta.3",
   "description": "req-kit: a requirement-development workflow for Paseo. /req aligns a requirement in chat; the engine runs design, implementation, review and verification as Paseo agents.",
   "type": "module",
   "license": "MIT",

package/paseo-plugin/client/detail.tsx

@@ -7,10 +7,10 @@ import { useState } from "react";
 import { Pressable, Text, View } from "react-native";
 import type { Action, RequirementDetail, Step } from "../shared/contracts";
 import { useAction, useDocument, usePreferences, useRequirement, useRequirements } from "./data";
-import { ACTION_TEXT, actionsFor, ago, ATTENTION_LABELS, facts, FILE_LABELS, minutes, tokens } from "./format";
+import { ACTION_TEXT, actionsFor, ago, ATTENTION_LABELS, facts, FILE_LABELS, minutes, tokens, trackOf } from "./format";
 import { Markdown, tsvToMarkdown } from "./markdown";
 import { ChecklistButton, CodeReviewButton, ReviewButton } from "./review";
-import { Badge, Button, Chip, Status, useStyles } from "./ui";
+import { Badge, Button, Chip, Eyebrow, rk, Status, StepTrack, useStyles } from "./ui";
 
 type Theme = PluginHostProps["theme"];
 type Layout = PluginHostProps["layout"];
@@ -20,7 +20,7 @@ const OUTCOME_LABELS: Record<Step["outcome"], string> = { running: "运行中",
 
 function StepRow({ theme, layout, step, navigation }: { theme: Theme; layout: Layout; step: Step; navigation: Navigation }) {
   const s = useStyles(theme, layout.compact);
-  const tone = step.outcome === "failed" ? "danger" : step.outcome === "running" ? "accent" : "muted";
+  const tone = step.outcome === "failed" ? "danger" : step.outcome === "running" ? "running" : "muted";
   const body = (
     <View style={{ gap: 2, paddingVertical: 6 }}>
       <View style={s.row}>
@@ -174,19 +174,39 @@ export function RequirementView({
   const canReviewCode = (d.files.includes("code-review.md") || d.files.includes("implementation.md")) && !d.running;
   const hr = d.humanReview ?? null;
   const reviewLabel = !hr ? "代码审查" : hr.status === "approved" ? (hr.stale ? "代码审查（有新改动，需重新评审）" : "代码审查（已通过）") : "代码审查（已退回修改）";
+  // 1.15: one lime button, the decision this requirement waits for now.
+  const waitingAcceptance = d.stage.startsWith("待验收") || d.stage === "验收未通过";
+  const codeNeedsReview = canReviewCode && (!hr || hr.stale) && (d.status === "completed" || d.status === "phase_done");
+  const primary: "review" | "code" | "check" | Action | null =
+    d.attention === "approval" && d.hasPrototype
+      ? "review"
+      : codeNeedsReview
+        ? "code"
+        : canAccept && waitingAcceptance
+          ? "check"
+          : (actions.find((a) => a !== "stop" && !(a === "approve" && d.hasPrototype)) ?? null);
+  const c = rk(theme);
   return (
     <View style={{ gap: 16 }}>
-      <View style={{ gap: 4 }}>
+      <View style={[s.card, { gap: 12 }]}>
+        <Eyebrow theme={theme} accent right={<Text style={s.mono} numberOfLines={1}>{d.branch ?? d.name}</Text>}>
+          REQUIREMENT
+        </Eyebrow>
         <View style={s.row}>
           <Text style={s.title}>{d.title}</Text>
           {d.attention ? (
-            <Badge theme={theme} tone={d.attention === "approval" || d.attention === "business" || d.attention === "permission" ? "warning" : "danger"}>
+            <Badge theme={theme} tone={d.attention === "interrupted" ? "danger" : d.attention === "not_completed" ? "warning" : "needs"}>
               {ATTENTION_LABELS[d.attention]}
             </Badge>
+          ) : d.running ? (
+            <Badge theme={theme} tone="running" icon="LoaderCircle">
+              进行中
+            </Badge>
           ) : null}
         </View>
+        <StepTrack theme={theme} steps={trackOf(d, hr)} />
         <Text style={s.muted}>{facts(d)}</Text>
-        <Text style={s.text}>{d.stage}</Text>
+        <Text style={[s.text, { color: d.attention ? c.brandText : theme.colors.foreground }]}>{d.stage}</Text>
         {d.estimate && d.attention !== "approval" ? (
           <Text style={s.muted}>
             {d.estimate.over
@@ -202,11 +222,11 @@ export function RequirementView({
 
       {actions.length > 0 || d.hasPrototype || canAccept || canReviewCode ? (
         <View style={s.row}>
-          {canReviewCode ? <CodeReviewButton theme={theme} repo={d.sourceRepo ?? d.repo} featureDir={d.featureDir} title={d.title} label={reviewLabel} primary={!!hr && hr.stale} /> : null}
-          {canAccept ? <ChecklistButton theme={theme} repo={d.sourceRepo ?? d.repo} featureDir={d.featureDir} title={d.title} primary={d.stage.startsWith("待验收") || d.stage === "验收未通过"} /> : null}
-          {d.hasPrototype ? <ReviewButton theme={theme} repo={d.sourceRepo ?? d.repo} featureDir={d.featureDir} title={d.title} waiting={d.attention === "approval"} /> : null}
+          {canReviewCode ? <CodeReviewButton theme={theme} repo={d.sourceRepo ?? d.repo} featureDir={d.featureDir} title={d.title} label={reviewLabel} primary={primary === "code"} /> : null}
+          {canAccept ? <ChecklistButton theme={theme} repo={d.sourceRepo ?? d.repo} featureDir={d.featureDir} title={d.title} primary={primary === "check"} /> : null}
+          {d.hasPrototype ? <ReviewButton theme={theme} repo={d.sourceRepo ?? d.repo} featureDir={d.featureDir} title={d.title} waiting={primary === "review"} /> : null}
           {actions.map((a) => (
-            <Button key={a} theme={theme} primary={a !== "stop" && !(a === "approve" && d.hasPrototype)} label={ACTION_TEXT[a].label} onPress={() => setAction(a)} />
+            <Button key={a} theme={theme} primary={primary === a} label={ACTION_TEXT[a].label} onPress={() => setAction(a)} />
           ))}
         </View>
       ) : null}
@@ -230,7 +250,7 @@ export function RequirementView({
         {d.branch ? <Text style={s.muted}>分支 {d.branch}</Text> : null}
         {d.workspaceId && navigation ? (
           <Pressable accessibilityRole="button" onPress={() => navigation.openWorkspace({ workspaceId: d.workspaceId! })}>
-            <Text style={{ color: theme.colors.accent, fontSize: 13 }}>打开这个需求的工作区</Text>
+            <Text style={{ color: rk(theme).brandText, fontSize: 13, fontWeight: "600" }}>打开这个需求的工作区</Text>
           </Pressable>
         ) : null}
         {d.joint.map((j) => (

package/paseo-plugin/client/format.ts

@@ -115,3 +115,59 @@ export const ACTION_TEXT = {
   sync: { label: "同步到外部系统", confirm: "把这个需求同步到对接的外部系统：补发没有成功的调用、补建卡片、更新状态。" },
   reply: { label: "发送回复", confirm: "把回复转给这个需求的对话，由它更新需求说明并继续开发。" },
 } as const;
+
+/** The six stops of the step track, and who does each (design/components/StepTrack.md). */
+export const TRACK = [
+  { label: "对齐", who: "你" },
+  { label: "方案", who: "AI · 你确认" },
+  { label: "实现", who: "AI" },
+  { label: "评审", who: "AI · 开发同事" },
+  { label: "验证", who: "AI" },
+  { label: "验收", who: "需求方" },
+] as const;
+
+const STEP_STOP: Array<[RegExp, number]> = [
+  [/^(design|design_review|design_revise|design_proposal|assessment|diagnosis|reproduce)/, 1],
+  [/^(implement|acceptance_tests)/, 2],
+  [/^(code_review|review_fix)/, 3],
+  [/^(verify|defect_fix|reverify|service|handoff|report)/, 4],
+];
+
+/**
+ * Where the requirement is on the track, and whether that stop waits for a person.
+ * `humanReview` (detail only) tells whether the code review is done.
+ */
+export function trackOf(
+  r: Pick<Requirement, "stage" | "status" | "attention" | "running" | "current">,
+  humanReview?: { status: string; stale: boolean } | null,
+): Array<{ label: string; who: string; state: "done" | "now" | "needs" | "todo" }> {
+  let at = 0;
+  let needs = false;
+  const running = r.current[0]?.key;
+  if (r.stage.startsWith("对齐")) at = 0;
+  else if (r.attention === "approval" || r.attention === "business" || r.attention === "not_started") [at, needs] = [1, true];
+  else if (running) at = STEP_STOP.find(([re]) => re.test(running))?.[1] ?? 2;
+  else if (r.status === "phase_done") [at, needs] = [4, true];
+  else if (r.status === "completed" || /待验收|已验收|验收/.test(r.stage)) {
+    const reviewed = humanReview && humanReview.status === "approved" && !humanReview.stale;
+    if (/已验收|验收通过/.test(r.stage)) at = TRACK.length;
+    else if (humanReview !== undefined && !reviewed) [at, needs] = [3, true];
+    else [at, needs] = [5, true];
+  } else if (r.status) at = 2;
+  return TRACK.map((t, i) => ({ ...t, state: i < at ? "done" : i === at ? (needs ? "needs" : "now") : "todo" }));
+}
+
+/** The icon of a requirement in a list, by what it needs (Lucide names). */
+export function iconOf(r: Pick<Requirement, "attention" | "running" | "status" | "stage">): { name: string; tone: "needs" | "running" | "success" | "warning" | "danger" | "muted" } {
+  if (r.attention === "interrupted") return { name: "OctagonAlert", tone: "danger" };
+  if (r.attention === "permission") return { name: "ShieldCheck", tone: "needs" };
+  if (r.attention === "approval") return { name: "PenTool", tone: "needs" };
+  if (r.attention === "business") return { name: "MessagesSquare", tone: "needs" };
+  if (r.attention === "not_started") return { name: "Play", tone: "needs" };
+  if (r.attention === "not_completed") return { name: "CircleDashed", tone: "warning" };
+  if (r.running) return { name: "LoaderCircle", tone: "running" };
+  if (r.stage.startsWith("对齐")) return { name: "MessagesSquare", tone: "muted" };
+  if (r.status === "phase_done" || /待验收/.test(r.stage)) return { name: "ClipboardCheck", tone: "warning" };
+  if (r.status === "completed") return { name: "CircleCheck", tone: "success" };
+  return { name: "Circle", tone: "muted" };
+}

package/paseo-plugin/client/inbox.tsx

@@ -9,18 +9,18 @@ import type { Attention, Requirement } from "../shared/contracts";
 import { useAction, usePreferences } from "./data";
 import { facts } from "./format";
 import { ReviewButton } from "./review";
-import { Badge, Button, useStyles } from "./ui";
+import { AttentionIcon, Badge, Button, Eyebrow, useStyles } from "./ui";
 
 type Theme = PluginHostProps["theme"];
 type Layout = PluginHostProps["layout"];
 
-const KIND: Record<Exclude<Attention, null>, { label: string; tone: "warning" | "danger" | "muted"; todo: string }> = {
-  approval: { label: "确认方案", tone: "warning", todo: "方案已通过审核。看一下“做完后会看到什么”，没问题就确认，开始写代码；要改就写下来。" },
-  business: { label: "回答问题", tone: "warning", todo: "方案审核有问题只有你能决定，回答后开发会接着进行。" },
-  permission: { label: "批准权限", tone: "warning", todo: "有一个步骤在等你允许它做一项操作，批准前会一直停在这里。打开这个 agent，在它的对话里选择允许或拒绝；拿不准时请开发同事看一下。" },
-  interrupted: { label: "已中断", tone: "danger", todo: "开发中断了，自动处理没能解决。看一下原因，能继续就继续。" },
-  not_completed: { label: "没有完成", tone: "muted", todo: "流水线结束了，但有部分没有做完。完成报告里写了原因和建议。" },
-  not_started: { label: "还没开始开发", tone: "warning", todo: "需求说明已经确认，但开发没有开始。确认无误就点“开始开发”，进展会发回谈需求的那个对话。" },
+const KIND: Record<Exclude<Attention, null>, { label: string; tone: "needs" | "danger" | "muted"; icon: string; todo: string }> = {
+  approval: { icon: "PenTool", label: "确认方案", tone: "needs", todo: "方案已通过审核。看一下“做完后会看到什么”，没问题就确认，开始写代码；要改就写下来。" },
+  business: { icon: "MessagesSquare", label: "回答问题", tone: "needs", todo: "方案审核有问题只有你能决定，回答后开发会接着进行。" },
+  permission: { icon: "ShieldCheck", label: "批准权限", tone: "needs", todo: "有一个步骤在等你允许它做一项操作，批准前会一直停在这里。打开这个 agent，在它的对话里选择允许或拒绝；拿不准时请开发同事看一下。" },
+  interrupted: { icon: "OctagonAlert", label: "已中断", tone: "danger", todo: "开发中断了，自动处理没能解决。看一下原因，能继续就继续。" },
+  not_completed: { icon: "CircleDashed", label: "没有完成", tone: "muted", todo: "流水线结束了，但有部分没有做完。完成报告里写了原因和建议。" },
+  not_started: { icon: "Play", label: "还没开始开发", tone: "needs", todo: "需求说明已经确认，但开发没有开始。确认无误就点“开始开发”，进展会发回谈需求的那个对话。" },
 };
 
 /** Plain waiting time: "等了 3 小时". */
@@ -63,15 +63,20 @@ function InboxCard({ theme, layout, item, open, readOnly, openAgent }: { theme:
   };
 
   return (
-    <View style={[s.card, { gap: 10, borderLeftWidth: 3, borderLeftColor: kind.tone === "danger" ? theme.colors.statusDanger : kind.tone === "warning" ? theme.colors.statusWarning : theme.colors.border }]}>
-      <View style={[s.row, { justifyContent: "space-between" }]}>
-        <View style={[s.row, { flexShrink: 1 }]}>
-          <Badge theme={theme} tone={kind.tone}>
-            {kind.label}
-          </Badge>
-          <Text style={[s.text, { fontWeight: "600", flexShrink: 1 }]}>{item.title}</Text>
+    <View style={[s.card, { gap: 10 }]}>
+      <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 12 }}>
+        <AttentionIcon theme={theme} icon={kind.icon} tone={kind.tone} />
+        <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+          <View style={[s.row, { justifyContent: "space-between" }]}>
+            <Text style={[s.text, { fontWeight: "600", fontSize: 15, flexShrink: 1 }]}>{item.title}</Text>
+            <Text style={s.mono}>{waited(w?.since ?? item.updatedAt)}</Text>
+          </View>
+          <View style={s.row}>
+            <Badge theme={theme} tone={kind.tone}>
+              {kind.label}
+            </Badge>
+          </View>
         </View>
-        <Text style={s.muted}>{waited(w?.since ?? item.updatedAt)}</Text>
       </View>
       <Text style={s.muted}>
         {facts(item)}
@@ -165,13 +170,14 @@ export function Inbox({ theme, layout, items, open, openAgent }: { theme: Theme;
   const waiting = inboxItems(items);
   return (
     <View style={{ gap: 10 }}>
-      <View style={[s.row, { justifyContent: "space-between" }]}>
-        <Text style={[s.title, { fontSize: 16 }]}>等你处理{waiting.length > 0 ? `（${waiting.length}）` : ""}</Text>
-        {waiting.length > 0 ? <Text style={s.muted}>等得最久的在前</Text> : null}
+      <View>
+        <Eyebrow theme={theme} accent right={<Text style={s.muted}>{waiting.length > 0 ? "等你处理 · 等得最久的在前" : "等你处理"}</Text>}>
+          NEEDS YOU · {waiting.length}
+        </Eyebrow>
       </View>
       {waiting.length === 0 ? (
         <View style={[s.card, { flexDirection: "row", alignItems: "center", gap: 8 }]}>
-          <Badge theme={theme} tone="success">
+          <Badge theme={theme} tone="success" icon="CircleCheck">
             没有
           </Badge>
           <Text style={s.muted}>现在没有需要你处理的事。需要你确认或回答时，会出现在这里。</Text>

package/paseo-plugin/client/markdown.tsx

@@ -5,6 +5,7 @@ import type { PluginHostProps } from "@getpaseo/plugin/client";
 import { ExternalLink } from "@getpaseo/plugin/client/ui";
 import { type ReactNode, useMemo } from "react";
 import { ScrollView, Text, View } from "react-native";
+import { rk } from "./ui";
 
 type Theme = PluginHostProps["theme"];
 
@@ -133,7 +134,7 @@ export function inline(text: string, theme: Theme, key = "i"): ReactNode[] {
     } else {
       // A link to another file in the repository: show its text and where it points.
       out.push(
-        <Text key={`${key}-${n++}`} style={{ color: theme.colors.accent }}>
+        <Text key={`${key}-${n++}`} style={{ color: rk(theme).brandText }}>
           {m[4]}
         </Text>,
       );

package/paseo-plugin/client/overview.tsx

@@ -8,10 +8,13 @@ import { useRequirements } from "./data";
 import { type Group, GROUP_LABELS, groupOf } from "./format";
 import { Inbox } from "./inbox";
 import { RequirementRow } from "./row";
-import { Button, Chip, Status, useStyles } from "./ui";
+import { BrandHeader, Button, Chip, Eyebrow, Status, useStyles } from "./ui";
 
 export const ORDER: Group[] = ["attention", "running", "verify", "done", "other"];
 
+/** Uppercase mono group names (design/guidelines/plugin.md); the Chinese label follows. */
+const EYEBROW: Record<Group, string> = { attention: "NEEDS YOU", running: "IN PROGRESS", verify: "READY TO TEST", done: "DONE", other: "OTHERS" };
+
 /** Opens a requirement's detail screen. */
 export type OpenRequirement = (item: Pick<Requirement, "repo" | "featureDir" | "title">) => void;
 
@@ -33,12 +36,13 @@ export function RequirementGroups({
     <View style={{ gap: 20 }}>
       {ORDER.filter((g) => groups.has(g) && !skip.includes(g)).map((g) => (
         <View key={g} style={{ gap: 8 }}>
-          <View style={s.row}>
-            <Text style={s.heading}>
-              {GROUP_LABELS[g]}（{groups.get(g)!.length}）
-            </Text>
-            {g === "other" ? <Button theme={theme} label={showOther ? "收起" : "展开"} onPress={() => setShowOther((v) => !v)} /> : null}
-          </View>
+          <Eyebrow
+            theme={theme}
+            accent={g === "attention"}
+            right={g === "other" ? <Button theme={theme} label={showOther ? "收起" : "展开"} onPress={() => setShowOther((v) => !v)} /> : <Text style={s.muted}>{GROUP_LABELS[g]}</Text>}
+          >
+            {EYEBROW[g]} · {groups.get(g)!.length}
+          </Eyebrow>
           {g === "other" && !showOther
             ? null
             : groups.get(g)!.map((item) => <RequirementRow key={item.key} theme={theme} layout={layout} item={item} onPress={() => open(item)} />)}
@@ -67,10 +71,16 @@ export function OverviewScreen(props: PluginScreenProps & { openScreen: ScreenOp
   return (
     <View style={s.screen}>
       <ScrollView contentContainerStyle={s.body}>
-        <View style={s.row}>
-          <Button theme={theme} label="使用统计" onPress={() => props.openScreen({ screenId: "stats" })} />
-          <Button theme={theme} label="配置" onPress={() => props.openScreen({ screenId: "config" })} />
-        </View>
+        <BrandHeader
+          theme={theme}
+          page="需求"
+          right={
+            <View style={s.row}>
+              <Button theme={theme} icon="ChartColumn" label="使用统计" onPress={() => props.openScreen({ screenId: "stats" })} />
+              <Button theme={theme} icon="Settings2" label="配置" onPress={() => props.openScreen({ screenId: "config" })} />
+            </View>
+          }
+        />
         {projects.length > 1 ? (
           <View style={s.row}>
             <Chip theme={theme} label="全部项目" active={project === null} onPress={() => setProject(null)} />

package/paseo-plugin/client/review.tsx

@@ -12,17 +12,17 @@ type Theme = PluginHostProps["theme"];
 
 /** 1.14: the acceptance checklist, primary while the requirement waits for acceptance. */
 export function ChecklistButton({ theme, repo, featureDir, title, primary }: { theme: Theme; repo: string; featureDir: string; title: string; primary: boolean }) {
-  return <Button theme={theme} primary={primary} label="验收清单（可一键试用）" onPress={() => openChecklist({ repo, featureDir, title })} />;
+  return <Button theme={theme} primary={primary} icon="ClipboardCheck" label="验收清单（可一键试用）" onPress={() => openChecklist({ repo, featureDir, title })} />;
 }
 
 /** 1.14: the code review page: AI findings next to the code, the person's comments, pass or send back. */
 export function CodeReviewButton({ theme, repo, featureDir, title, primary, label }: { theme: Theme; repo: string; featureDir: string; title: string; primary: boolean; label: string }) {
-  return <Button theme={theme} primary={primary} label={label} onPress={() => openCodeReview({ repo, featureDir, title })} />;
+  return <Button theme={theme} primary={primary} icon="GitPullRequest" label={label} onPress={() => openCodeReview({ repo, featureDir, title })} />;
 }
 
 /** The button on a requirement with a prototype: primary while the design waits for confirmation. */
 export function ReviewButton({ theme, repo, featureDir, title, waiting }: { theme: Theme; repo: string; featureDir: string; title: string; waiting: boolean }) {
-  return <Button theme={theme} primary={waiting} label={waiting ? "审查原型并确认方案" : "审查原型"} onPress={() => openReview({ repo, featureDir, title })} />;
+  return <Button theme={theme} primary={waiting} icon="PenTool" label={waiting ? "审查原型并确认方案" : "审查原型"} onPress={() => openReview({ repo, featureDir, title })} />;
 }
 
 export function ReviewScreen({ theme, layout, params }: PluginScreenProps) {

package/paseo-plugin/client/row.tsx

@@ -1,9 +1,10 @@
-// One requirement in a list: title, facts, stage, what is running, what needs a person.
+// One requirement in a list: icon, title, project and feature directory, stage, what is running.
 import type { PluginHostProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
 import { Pressable, Text, View } from "react-native";
 import type { Requirement } from "../shared/contracts";
-import { ago, ATTENTION_LABELS, facts } from "./format";
-import { Badge, useStyles } from "./ui";
+import { ago, ATTENTION_LABELS, iconOf } from "./format";
+import { Badge, rk, useStyles } from "./ui";
 
 export function RequirementRow({
   theme,
@@ -12,29 +13,51 @@ export function RequirementRow({
   onPress,
 }: Pick<PluginHostProps, "theme" | "layout"> & { item: Requirement; onPress(): void }) {
   const s = useStyles(theme, layout.compact);
+  const c = rk(theme);
+  const ic = iconOf(item);
+  const iconColor =
+    ic.tone === "needs" ? c.brandText : ic.tone === "running" ? c.data : ic.tone === "success" ? theme.colors.statusSuccess : ic.tone === "warning" ? theme.colors.statusWarning : ic.tone === "danger" ? theme.colors.statusDanger : theme.colors.foregroundMuted;
   return (
-    <Pressable accessibilityRole="button" accessibilityLabel={item.title} onPress={onPress} style={s.card}>
-      <View style={s.row}>
-        <Text style={[s.text, { fontWeight: "600", flexShrink: 1 }]}>{item.title}</Text>
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={item.title}
+      onPress={onPress}
+      style={({ pressed }: { pressed: boolean }) => [s.card, { flexDirection: "row", alignItems: "center", gap: 12, backgroundColor: pressed ? theme.colors.surface2 : theme.colors.surface1 }]}
+    >
+      <Icon name={ic.name} size={18} color={iconColor} />
+      <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+        <Text style={[s.text, { fontWeight: "600" }]} numberOfLines={1}>
+          {item.title}
+        </Text>
+        <Text style={s.mono} numberOfLines={1}>
+          {item.project} · {item.name}
+        </Text>
+        {item.current.length > 0 ? (
+          <Text style={s.muted} numberOfLines={1}>
+            正在：{item.current.map((x) => x.title).join("、")}
+          </Text>
+        ) : (
+          <Text style={s.muted} numberOfLines={1}>
+            {item.stage}
+          </Text>
+        )}
+      </View>
+      <View style={{ alignItems: "flex-end", gap: 4 }}>
         {item.attention ? (
-          <Badge theme={theme} tone={item.attention === "approval" || item.attention === "business" ? "warning" : "danger"}>
+          <Badge theme={theme} tone={item.attention === "interrupted" ? "danger" : item.attention === "not_completed" ? "warning" : "needs"}>
             {ATTENTION_LABELS[item.attention]}
           </Badge>
         ) : item.running ? (
-          <Badge theme={theme} tone="accent">
-            运行中
+          <Badge theme={theme} tone="running" icon="LoaderCircle">
+            进行中
           </Badge>
-        ) : null}
-        {!item.present ? (
+        ) : !item.present ? (
           <Badge theme={theme} tone="muted">
             目录已不在
           </Badge>
         ) : null}
+        <Text style={s.mono}>{ago(item.updatedAt)}</Text>
       </View>
-      <Text style={s.muted}>{facts(item)}</Text>
-      <Text style={s.text}>{item.stage}</Text>
-      {item.current.length > 0 ? <Text style={s.muted}>正在：{item.current.map((c) => c.title).join("、")}</Text> : null}
-      <Text style={s.muted}>更新于 {ago(item.updatedAt)}</Text>
     </Pressable>
   );
 }

package/paseo-plugin/client/stats.tsx

@@ -5,7 +5,7 @@ import { useState } from "react";
 import { Text, View } from "react-native";
 import { useStats } from "./data";
 import { minutes, tokens, TYPE_LABELS } from "./format";
-import { Chip, Status, useStyles } from "./ui";
+import { BrandHeader, Chip, Eyebrow, rk, Status, useStyles } from "./ui";
 
 type Tokens = NonNullable<import("../shared/contracts").StatsSummary["tokens"]>;
 
@@ -24,13 +24,13 @@ function TokenShare({ theme, compact, t }: { theme: import("@getpaseo/plugin/cli
         </Text>
       </View>
       <View style={{ height: 6, borderRadius: 3, backgroundColor: theme.colors.surface2, overflow: "hidden" }}>
-        <View style={{ width: `${Math.max(1, Math.round(share * 100))}%`, height: 6, backgroundColor: theme.colors.accent }} />
+        <View style={{ width: `${Math.max(1, Math.round(share * 100))}%`, height: 6, backgroundColor: rk(theme).data }} />
       </View>
     </View>
   );
   return (
     <View style={[s.card, { gap: 10 }]}>
-      <Text style={s.heading}>token 花在哪</Text>
+      <Eyebrow theme={theme} right={<Text style={s.muted}>token 花在哪</Text>}>TOKENS</Eyebrow>
       <Text style={s.text}>
         合计 {tokens(t.total)} tokens
         {t.rework ? `，其中返工（修订、修复、复验和第 2 轮起的评审）占 ${pct(t.rework.share)}` : ""}
@@ -75,6 +75,7 @@ export function StatsScreen({ theme, layout }: PluginScreenProps) {
   return (
     <View style={s.screen}>
       <ScrollView contentContainerStyle={s.body}>
+        <BrandHeader theme={theme} page="使用统计" />
         <View style={s.row}>
           {periods.map((p, i) => (
             <Chip key={p.label} theme={theme} label={p.label} active={i === pick} onPress={() => setPick(i)} />
@@ -93,7 +94,7 @@ export function StatsScreen({ theme, layout }: PluginScreenProps) {
             </View>
             {d.oversight && d.oversight.reviews.total + d.oversight.acceptance.total + d.oversight.merged.requirements + d.oversight.issues.total > 0 ? (
               <View style={s.card}>
-                <Text style={s.heading}>人工把关和合并后</Text>
+                <Eyebrow theme={theme} right={<Text style={s.muted}>人工把关和合并后</Text>}>OVERSIGHT</Eyebrow>
                 <Text style={s.text}>
                   人工代码评审 {d.oversight.reviews.total} 次（{d.oversight.reviews.requirements} 个需求），退回修改 {d.oversight.reviews.sentBack} 次；第一次就通过 {d.oversight.reviews.passedFirstTime} 个
                 </Text>