feat: M2 — 写→审(一致性)→裁决→验收(事务)；未决冲突禁验收
- 续审 Agent 声明(AgentSpec) + 结构化输出契约(ContinuityReview/Conflict 五类) - LangGraph 并行审子图(可扩四审) + collect 落 chapter_reviews 留痕 + review SSE(section/conflict) - 验收-side Repository：章节 accepted 版本晋升 + digest append-only + 审稿留痕/裁决 - API：review(SSE) + reviews 历史 + accept(单原子事务：晋升 version + 终稿 digest + 裁决留痕) - 冲突 gate：未决裁决拦截(CONFLICT_UNRESOLVED)；digest 从终稿提炼(不变量#4) - 前端：审稿报告页 + 冲突就地标注 + 裁决(采纳/忽略/手改) + 未决禁验收 + 「本次将更新」清单 - M2 E2E：真实 DB + 多档位 mock 网关零 token 走通 写→审→裁决→验收→摘要入库 - 多 agent 协同台账(PROGRESS.md) + 共享记忆(memory/contracts·decisions·gotchas)
This commit is contained in:
Yaojia Wang
76
apps/web/components/review/AcceptPanel.tsx
Normal file
76
apps/web/components/review/AcceptPanel.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
"use client";
|
||||
|
||||
import type { AcceptResponse } from "@/lib/api/types";
|
||||
|
||||
interface AcceptPanelProps {
|
||||
conflictCount: number;
|
||||
unresolvedCount: number;
|
||||
accepting: boolean;
|
||||
result: AcceptResponse | null;
|
||||
onAccept: () => void;
|
||||
}
|
||||
|
||||
// 验收 gate（UX §9 / §8.4）：未决禁验收（置灰 + 文案），验收后呈现「本次将更新」清单。
|
||||
export function AcceptPanel({
|
||||
conflictCount,
|
||||
unresolvedCount,
|
||||
accepting,
|
||||
result,
|
||||
onAccept,
|
||||
}: AcceptPanelProps) {
|
||||
const blocked = unresolvedCount > 0;
|
||||
|
||||
if (result) {
|
||||
return (
|
||||
<div className="rounded border border-pass/50 bg-panel p-4">
|
||||
<h3 className="mb-2 text-sm font-semibold text-pass">本章已验收</h3>
|
||||
<ul className="space-y-1 text-xs text-ink-soft">
|
||||
<li>
|
||||
晋升版次：
|
||||
<span className="font-mono text-ink">v{result.accepted_version}</span>
|
||||
</li>
|
||||
<li>
|
||||
章节摘要：{result.digest_added ? "已新增一行" : "未变更"}
|
||||
</li>
|
||||
<li>
|
||||
裁决写回：
|
||||
<span className="font-mono text-ink">
|
||||
{result.decisions_recorded}
|
||||
</span>{" "}
|
||||
条
|
||||
</li>
|
||||
{result.review_id ? (
|
||||
<li className="truncate">
|
||||
留痕：<span className="font-mono">{result.review_id}</span>
|
||||
</li>
|
||||
) : null}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded border border-line bg-panel p-4">
|
||||
{blocked ? (
|
||||
<p className="mb-2 text-xs text-conflict" role="status">
|
||||
尚有 {unresolvedCount} 项冲突未裁决，处理完才能验收。
|
||||
</p>
|
||||
) : (
|
||||
<p className="mb-2 text-xs text-ink-soft">
|
||||
{conflictCount === 0
|
||||
? "无冲突，可直接验收。"
|
||||
: "全部冲突已裁决，可验收本章。"}
|
||||
</p>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onAccept}
|
||||
disabled={blocked || accepting}
|
||||
aria-disabled={blocked || accepting}
|
||||
className="w-full rounded bg-cinnabar px-4 py-2 text-sm text-panel hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
{accepting ? "验收中…" : "全部处理完 → 验收本章"}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
54
apps/web/components/review/AnnotatedText.tsx
Normal file
54
apps/web/components/review/AnnotatedText.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
"use client";
|
||||
|
||||
import type { ReviewConflict } from "@/lib/review/sse";
|
||||
|
||||
interface AnnotatedTextProps {
|
||||
text: string;
|
||||
conflicts: ReviewConflict[];
|
||||
// 当前聚焦的冲突下标（来自报告卡「跳转」），用于锚点联动。
|
||||
focusedIndex: number | null;
|
||||
onAnchorClick: (index: number) => void;
|
||||
}
|
||||
|
||||
// 正文就地标注（UX §8.3 / §6.1）。
|
||||
// M2 占位（R6）：`where` 是文字定位（如「第4段」），M2 不做精确字符 range —
|
||||
// 改为段级/锚点联动：每个冲突渲染为一枚朱砂波浪线锚点挂在正文上方，点击=回跳报告卡。
|
||||
// 精确 inline range 标注留 M3+（需后端给字符 offset）。
|
||||
export function AnnotatedText({
|
||||
text,
|
||||
conflicts,
|
||||
focusedIndex,
|
||||
onAnchorClick,
|
||||
}: AnnotatedTextProps) {
|
||||
return (
|
||||
<div className="flex h-full flex-col">
|
||||
{conflicts.length > 0 ? (
|
||||
<div className="mb-3 flex flex-wrap gap-2 border-b border-line pb-3">
|
||||
{conflicts.map((c, i) => (
|
||||
<button
|
||||
key={i}
|
||||
type="button"
|
||||
id={`anchor-${i}`}
|
||||
onClick={() => onAnchorClick(i)}
|
||||
aria-current={focusedIndex === i ? "true" : undefined}
|
||||
className={`conflict-anchor rounded px-2 py-0.5 text-xs ${
|
||||
focusedIndex === i
|
||||
? "bg-cinnabar text-panel"
|
||||
: "text-conflict hover:bg-[var(--color-conflict)]/10"
|
||||
}`}
|
||||
title={`${c.type}：${c.where || "正文"}`}
|
||||
>
|
||||
<span aria-hidden="true">⌇</span> {c.type}
|
||||
{c.where ? ` · ${c.where}` : ""}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
<article className="flex-1 overflow-auto whitespace-pre-wrap font-serif text-[17px] leading-[1.9] text-ink">
|
||||
{text || (
|
||||
<span className="text-ink-soft/60">（无待审正文，先去写作页起草本章）</span>
|
||||
)}
|
||||
</article>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
119
apps/web/components/review/ConflictCard.tsx
Normal file
119
apps/web/components/review/ConflictCard.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
"use client";
|
||||
|
||||
import type { ReviewConflict } from "@/lib/review/sse";
|
||||
import type { DecisionDraft, Verdict } from "@/lib/review/decisions";
|
||||
|
||||
interface ConflictCardProps {
|
||||
index: number;
|
||||
conflict: ReviewConflict;
|
||||
draft: DecisionDraft;
|
||||
missing: boolean;
|
||||
onVerdict: (index: number, verdict: Verdict) => void;
|
||||
onNote: (index: number, note: string) => void;
|
||||
onJump: (index: number) => void;
|
||||
}
|
||||
|
||||
const VERDICT_OPTIONS: { value: Verdict; label: string }[] = [
|
||||
{ value: "accept", label: "采纳改法" },
|
||||
{ value: "ignore", label: "忽略" },
|
||||
{ value: "manual", label: "手改" },
|
||||
];
|
||||
|
||||
// 单个冲突报告卡（UX §6.4）：五类徽标 + where + refs + suggestion + 裁决三态。
|
||||
// 冲突=赭红；未决/缺判时加图标+文案（不单靠色，a11y §10）。
|
||||
export function ConflictCard({
|
||||
index,
|
||||
conflict,
|
||||
draft,
|
||||
missing,
|
||||
onVerdict,
|
||||
onNote,
|
||||
onJump,
|
||||
}: ConflictCardProps) {
|
||||
const resolved = draft.verdict !== null;
|
||||
return (
|
||||
<li
|
||||
id={`conflict-card-${index}`}
|
||||
className={`rounded border bg-panel p-4 ${
|
||||
missing
|
||||
? "border-conflict ring-1 ring-conflict"
|
||||
: resolved
|
||||
? "border-pass/40"
|
||||
: "border-line"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<span
|
||||
className="shrink-0 rounded bg-[var(--color-conflict)]/10 px-2 py-0.5 text-xs text-conflict"
|
||||
aria-hidden="true"
|
||||
>
|
||||
⚠ {conflict.type}
|
||||
</span>
|
||||
<p className="flex-1 text-sm text-ink">{conflict.suggestion}</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-2 flex flex-wrap items-center gap-2 pl-1 text-xs text-ink-soft">
|
||||
{conflict.where ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onJump(index)}
|
||||
className="rounded border border-line px-2 py-0.5 hover:border-cinnabar hover:text-cinnabar"
|
||||
>
|
||||
▸ 跳转 {conflict.where}
|
||||
</button>
|
||||
) : null}
|
||||
{conflict.refs.map((ref) => (
|
||||
<span key={ref} className="font-mono">
|
||||
▸ {ref}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<fieldset className="mt-3">
|
||||
<legend className="sr-only">冲突 {index + 1} 裁决</legend>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{VERDICT_OPTIONS.map((opt) => {
|
||||
const active = draft.verdict === opt.value;
|
||||
return (
|
||||
<button
|
||||
key={opt.value}
|
||||
type="button"
|
||||
aria-pressed={active}
|
||||
onClick={() => onVerdict(index, opt.value)}
|
||||
className={`rounded px-3 py-1 text-xs ${
|
||||
active
|
||||
? "bg-cinnabar text-panel"
|
||||
: "border border-line text-ink hover:border-cinnabar"
|
||||
}`}
|
||||
>
|
||||
{opt.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{resolved ? (
|
||||
<span className="text-xs text-pass" aria-hidden="true">
|
||||
✓ 已裁决
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-xs text-conflict">未裁决</span>
|
||||
)}
|
||||
</div>
|
||||
{draft.verdict === "manual" ? (
|
||||
<div className="mt-2">
|
||||
<label htmlFor={`note-${index}`} className="sr-only">
|
||||
手改说明
|
||||
</label>
|
||||
<input
|
||||
id={`note-${index}`}
|
||||
type="text"
|
||||
value={draft.note}
|
||||
onChange={(e) => onNote(index, e.target.value)}
|
||||
placeholder="手改说明（可选）"
|
||||
className="w-full rounded border border-line bg-bg px-3 py-1.5 text-sm text-ink focus:border-cinnabar focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</fieldset>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
291
apps/web/components/review/ReviewReport.tsx
Normal file
291
apps/web/components/review/ReviewReport.tsx
Normal file
@@ -0,0 +1,291 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
|
||||
import { AppShell } from "@/components/AppShell";
|
||||
import type { ProjectResponse, ReviewHistoryItem } from "@/lib/api/types";
|
||||
import {
|
||||
allResolved,
|
||||
emptyDecisions,
|
||||
setNote,
|
||||
setVerdict,
|
||||
unresolvedIndices,
|
||||
type DecisionDraft,
|
||||
type Verdict,
|
||||
} from "@/lib/review/decisions";
|
||||
import { normalizeConflicts } from "@/lib/review/history";
|
||||
import { useAccept } from "@/lib/review/useAccept";
|
||||
import { useReviewStream } from "@/lib/review/useReviewStream";
|
||||
import type { ReviewConflict } from "@/lib/review/sse";
|
||||
import { AcceptPanel } from "./AcceptPanel";
|
||||
import { AnnotatedText } from "./AnnotatedText";
|
||||
import { ConflictCard } from "./ConflictCard";
|
||||
|
||||
interface ReviewReportProps {
|
||||
project: ProjectResponse;
|
||||
chapterNo: number;
|
||||
initialReview: ReviewHistoryItem | undefined;
|
||||
initialDraft: string;
|
||||
}
|
||||
|
||||
// 审稿报告页主体（UX §6.4 / §8.3 / §9）。
|
||||
// 数据源：进页用历史留痕 conflicts 种入；「重新审稿」用当前终稿跑 SSE 覆盖。
|
||||
// 裁决草稿随 conflicts 长度对齐；未决禁验收（gate）。
|
||||
export function ReviewReport({
|
||||
project,
|
||||
chapterNo,
|
||||
initialReview,
|
||||
initialDraft,
|
||||
}: ReviewReportProps) {
|
||||
const review = useReviewStream();
|
||||
const accept = useAccept();
|
||||
|
||||
const [finalText, setFinalText] = useState(initialDraft);
|
||||
const [drafts, setDrafts] = useState<DecisionDraft[]>(() =>
|
||||
emptyDecisions(normalizeConflicts(initialReview).length),
|
||||
);
|
||||
const [focusedIndex, setFocusedIndex] = useState<number | null>(null);
|
||||
const [missing, setMissing] = useState<Set<number>>(new Set());
|
||||
const seededRef = useRef(false);
|
||||
|
||||
// 进页一次性把历史 conflicts 种入流状态（无需重审即可裁决）。
|
||||
const seededConflicts = useMemo(
|
||||
() => normalizeConflicts(initialReview),
|
||||
[initialReview],
|
||||
);
|
||||
useEffect(() => {
|
||||
if (seededRef.current) return;
|
||||
seededRef.current = true;
|
||||
if (seededConflicts.length > 0) review.seed(seededConflicts);
|
||||
}, [review, seededConflicts]);
|
||||
|
||||
// 当前生效冲突 = 流状态（重审后即时更新，否则种入的历史）。
|
||||
const conflicts: ReviewConflict[] = review.state.conflicts;
|
||||
|
||||
// 重审完成（done 边沿）→ 重置裁决草稿对齐新冲突集（冲突可能整组变化）。
|
||||
const conflictCount = conflicts.length;
|
||||
const wasReviewingRef = useRef(false);
|
||||
useEffect(() => {
|
||||
if (review.state.phase === "reviewing") {
|
||||
wasReviewingRef.current = true;
|
||||
return;
|
||||
}
|
||||
if (review.state.phase === "done" && wasReviewingRef.current) {
|
||||
wasReviewingRef.current = false;
|
||||
setDrafts(emptyDecisions(conflictCount));
|
||||
setMissing(new Set());
|
||||
}
|
||||
}, [review.state.phase, conflictCount]);
|
||||
|
||||
const onReReview = (): void => {
|
||||
setMissing(new Set());
|
||||
void review.start(project.id, chapterNo, finalText);
|
||||
};
|
||||
|
||||
const onVerdict = (index: number, verdict: Verdict): void => {
|
||||
setDrafts((prev) => setVerdict(prev, index, verdict));
|
||||
setMissing((prev) => {
|
||||
if (!prev.has(index)) return prev;
|
||||
const next = new Set(prev);
|
||||
next.delete(index);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
const onNote = (index: number, note: string): void =>
|
||||
setDrafts((prev) => setNote(prev, index, note));
|
||||
|
||||
const jumpToCard = (index: number): void => {
|
||||
setFocusedIndex(index);
|
||||
document
|
||||
.getElementById(`conflict-card-${index}`)
|
||||
?.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
};
|
||||
const jumpToAnchor = (index: number): void => {
|
||||
setFocusedIndex(index);
|
||||
document
|
||||
.getElementById(`anchor-${index}`)
|
||||
?.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
};
|
||||
|
||||
const onAccept = async (): Promise<void> => {
|
||||
const outcome = await accept.accept(
|
||||
project.id,
|
||||
chapterNo,
|
||||
finalText,
|
||||
drafts,
|
||||
);
|
||||
if (outcome.missingIndices.length > 0) {
|
||||
setMissing(new Set(outcome.missingIndices));
|
||||
}
|
||||
};
|
||||
|
||||
const resolved = allResolved(drafts);
|
||||
const unresolved = unresolvedIndices(drafts).length;
|
||||
const reviewing = review.isReviewing;
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
title={`〈${project.title}〉`}
|
||||
subtitle={`第 ${chapterNo} 章 · 审稿报告`}
|
||||
>
|
||||
<div className="grid h-[calc(100vh-4rem)] grid-cols-1 lg:grid-cols-[1fr_24rem]">
|
||||
{/* 左：终稿正文 + 就地标注 */}
|
||||
<section className="flex min-w-0 flex-col bg-bg">
|
||||
<div className="flex items-center gap-3 border-b border-line bg-panel px-6 py-3">
|
||||
<h1 className="font-serif text-lg text-ink">
|
||||
第 {chapterNo} 章 审稿报告
|
||||
</h1>
|
||||
<span className="font-mono text-xs text-ink-soft">
|
||||
{conflictCount} 冲突
|
||||
</span>
|
||||
<div className="ml-auto">
|
||||
{reviewing ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={review.stop}
|
||||
className="rounded border border-conflict px-3 py-1.5 text-sm text-conflict"
|
||||
>
|
||||
停
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onReReview}
|
||||
className="rounded bg-cinnabar px-3 py-1.5 text-sm text-panel hover:opacity-90"
|
||||
>
|
||||
✦ 重新审稿
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{review.state.error ? (
|
||||
<p className="border-b border-line bg-panel px-6 py-2 text-sm text-conflict">
|
||||
审稿失败（{review.state.error.code}）：
|
||||
{review.state.error.message}
|
||||
{review.state.error.code === "LLM_UNAVAILABLE" ? (
|
||||
<>
|
||||
{" "}
|
||||
<a
|
||||
href="/settings/providers"
|
||||
className="underline hover:text-cinnabar"
|
||||
>
|
||||
去设置提供商
|
||||
</a>
|
||||
</>
|
||||
) : null}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="flex-1 overflow-auto px-6 py-6">
|
||||
<AnnotatedText
|
||||
text={finalText}
|
||||
conflicts={conflicts}
|
||||
focusedIndex={focusedIndex}
|
||||
onAnchorClick={jumpToCard}
|
||||
/>
|
||||
<details className="mt-4">
|
||||
<summary className="cursor-pointer text-xs text-ink-soft hover:text-cinnabar">
|
||||
展开/编辑终稿（裁决时可改稿 — 摘要从终稿提炼）
|
||||
</summary>
|
||||
<label htmlFor="final-text" className="sr-only">
|
||||
终稿正文
|
||||
</label>
|
||||
<textarea
|
||||
id="final-text"
|
||||
value={finalText}
|
||||
onChange={(e) => setFinalText(e.target.value)}
|
||||
className="mt-2 min-h-[20vh] w-full resize-y rounded border border-line bg-panel p-3 font-serif text-[16px] leading-[1.9] text-ink focus:border-cinnabar focus:outline-none"
|
||||
/>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 右：审稿分区 + 冲突裁决 + 验收 gate */}
|
||||
<aside className="flex flex-col overflow-auto border-l border-line bg-panel px-4 py-4">
|
||||
<section className="mb-4">
|
||||
<h2 className="text-xs font-semibold uppercase tracking-wide text-ink-soft">
|
||||
一致性 (continuity)
|
||||
</h2>
|
||||
<SectionStatusLine
|
||||
reviewing={reviewing}
|
||||
done={review.state.phase === "done"}
|
||||
conflictCount={conflictCount}
|
||||
sections={review.state.sections}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section className="flex-1">
|
||||
{conflicts.length === 0 ? (
|
||||
<p className="rounded border border-dashed border-line p-4 text-xs text-ink-soft">
|
||||
{review.state.phase === "done" || seededConflicts.length === 0
|
||||
? "未发现一致性冲突。"
|
||||
: "进页未带审稿留痕，点「重新审稿」开始。"}
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-3">
|
||||
{conflicts.map((c, i) => (
|
||||
<ConflictCard
|
||||
key={i}
|
||||
index={i}
|
||||
conflict={c}
|
||||
draft={drafts[i] ?? { verdict: null, note: "" }}
|
||||
missing={missing.has(i)}
|
||||
onVerdict={onVerdict}
|
||||
onNote={onNote}
|
||||
onJump={jumpToAnchor}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
|
||||
<section className="mt-4">
|
||||
<AcceptPanel
|
||||
conflictCount={conflictCount}
|
||||
unresolvedCount={resolved ? 0 : unresolved}
|
||||
accepting={accept.status === "accepting"}
|
||||
result={accept.result}
|
||||
onAccept={() => void onAccept()}
|
||||
/>
|
||||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
interface SectionStatusLineProps {
|
||||
reviewing: boolean;
|
||||
done: boolean;
|
||||
conflictCount: number;
|
||||
sections: { name: string; status: string }[];
|
||||
}
|
||||
|
||||
// 四审进行中骨架逐项点亮（UX §9）；M2 仅 continuity 一项。
|
||||
function SectionStatusLine({
|
||||
reviewing,
|
||||
done,
|
||||
conflictCount,
|
||||
sections,
|
||||
}: SectionStatusLineProps) {
|
||||
if (reviewing) {
|
||||
return (
|
||||
<p className="mt-1 text-xs text-info" aria-live="polite">
|
||||
审稿进行中…
|
||||
</p>
|
||||
);
|
||||
}
|
||||
if (done || sections.length > 0) {
|
||||
return (
|
||||
<p className="mt-1 text-xs">
|
||||
{conflictCount > 0 ? (
|
||||
<span className="text-conflict">⚠ {conflictCount} 冲突</span>
|
||||
) : (
|
||||
<span className="text-pass">✓ 通过</span>
|
||||
)}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
Reference in New Issue
Block a user