1080 lines
50 KiB
TypeScript
1080 lines
50 KiB
TypeScript
import { useCallback, useEffect, useRef, useState, useMemo } from "react";
|
||
import { API } from "../config";
|
||
|
||
/* ─── Types ─── */
|
||
type Step = 0 | 1 | 2 | 3 | 4;
|
||
type ClarifyMsg = { role: "user" | "assistant"; content: string };
|
||
|
||
type RequirementAnalysis = {
|
||
summary: string;
|
||
functional_requirements: string[];
|
||
non_functional_requirements: string[];
|
||
acceptance_criteria: string[];
|
||
edge_cases: string[];
|
||
};
|
||
|
||
type TestCase = {
|
||
test_id: string;
|
||
test_name: string;
|
||
precondition: string;
|
||
steps: string[] | string;
|
||
expected_result: string;
|
||
test_type?: string;
|
||
};
|
||
|
||
type CodeGeneration = {
|
||
java_code: string;
|
||
unit_tests: string;
|
||
implementation_notes: string;
|
||
};
|
||
|
||
type TestExecution = {
|
||
success: boolean;
|
||
passed: number;
|
||
failed: number;
|
||
errors: number;
|
||
total: number;
|
||
output: string;
|
||
};
|
||
|
||
/* ─── API helpers ─── */
|
||
const BASE = API.devops;
|
||
|
||
async function apiPost<T = unknown>(path: string, body?: unknown): Promise<T> {
|
||
const res = await fetch(`${BASE}${path}`, {
|
||
method: "POST",
|
||
headers: body !== undefined ? { "Content-Type": "application/json" } : undefined,
|
||
body: body !== undefined ? JSON.stringify(body) : undefined,
|
||
});
|
||
if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
|
||
return res.json();
|
||
}
|
||
|
||
// SSE 格式：data: {"type":"chunk","text":"..."} / {"type":"done",...} / {"type":"error","message":"..."}
|
||
async function readSSE(
|
||
path: string,
|
||
onChunk: (text: string) => void,
|
||
onDone?: (data: any) => void,
|
||
signal?: AbortSignal,
|
||
) {
|
||
const res = await fetch(`${BASE}${path}`, { signal });
|
||
if (!res.ok) throw new Error(`${res.status}`);
|
||
if (!res.body) return;
|
||
const reader = res.body.getReader();
|
||
const dec = new TextDecoder();
|
||
let buf = "";
|
||
try {
|
||
while (true) {
|
||
const { done, value } = await reader.read();
|
||
if (done) break;
|
||
buf += dec.decode(value, { stream: true });
|
||
const parts = buf.split("\n\n");
|
||
buf = parts.pop() ?? "";
|
||
for (const part of parts) {
|
||
const line = part.trim();
|
||
if (!line.startsWith("data:")) continue;
|
||
const payload = line.slice(5).trim();
|
||
if (payload === "[DONE]") return;
|
||
try {
|
||
const evt = JSON.parse(payload);
|
||
if (evt.type === "chunk" && evt.text) {
|
||
onChunk(evt.text);
|
||
} else if (evt.type === "done") {
|
||
onDone?.(evt);
|
||
return;
|
||
} else if (evt.type === "error") {
|
||
throw new Error(evt.message || "Stream error");
|
||
} else if (evt.text) {
|
||
onChunk(evt.text);
|
||
} else if (evt.message) {
|
||
onChunk(evt.message);
|
||
}
|
||
} catch (e) {
|
||
if (e instanceof Error && !e.message.startsWith("Stream error")) onChunk(payload);
|
||
else throw e;
|
||
}
|
||
}
|
||
}
|
||
} finally {
|
||
reader.releaseLock();
|
||
}
|
||
}
|
||
|
||
/* ── 流式 JSON 增量解析工具 ── */
|
||
function parseStreamStr(text: string, fieldName: string): { value: string; active: boolean } {
|
||
const idx = text.indexOf(`"${fieldName}"`);
|
||
if (idx === -1) return { value: "", active: false };
|
||
let start = idx + fieldName.length + 2;
|
||
while (start < text.length && (text[start] === " " || text[start] === ":")) start++;
|
||
if (start >= text.length || text[start] !== '"') return { value: "", active: false };
|
||
start++;
|
||
let value = "", i = start, closed = false;
|
||
while (i < text.length) {
|
||
if (text[i] === "\\" && i + 1 < text.length) {
|
||
const e = text[i + 1];
|
||
value += e === "n" ? "\n" : e === "t" ? "\t" : e;
|
||
i += 2;
|
||
} else if (text[i] === '"') { closed = true; break; }
|
||
else { value += text[i++]; }
|
||
}
|
||
return { value, active: !closed };
|
||
}
|
||
|
||
function parseStreamStrArray(text: string, fieldName: string): { items: { value: string; active: boolean }[]; active: boolean } {
|
||
const idx = text.indexOf(`"${fieldName}"`);
|
||
if (idx === -1) return { items: [], active: false };
|
||
let start = idx + fieldName.length + 2;
|
||
while (start < text.length && (text[start] === " " || text[start] === ":")) start++;
|
||
if (start >= text.length || text[start] !== "[") return { items: [], active: false };
|
||
start++;
|
||
const items: { value: string; active: boolean }[] = [];
|
||
let i = start, arrayClosed = false;
|
||
while (i < text.length) {
|
||
if (text[i] === "]") { arrayClosed = true; break; }
|
||
if (text[i] === '"') {
|
||
i++;
|
||
let value = "", itemClosed = false;
|
||
while (i < text.length) {
|
||
if (text[i] === "\\" && i + 1 < text.length) {
|
||
const e = text[i + 1];
|
||
value += e === "n" ? "\n" : e === "t" ? "\t" : e;
|
||
i += 2;
|
||
} else if (text[i] === '"') { itemClosed = true; i++; break; }
|
||
else { value += text[i++]; }
|
||
}
|
||
if (value.trim()) items.push({ value, active: !itemClosed });
|
||
} else { i++; }
|
||
}
|
||
return { items, active: !arrayClosed };
|
||
}
|
||
|
||
function parseStreamTestCaseNames(text: string): { names: string[]; active: boolean } {
|
||
const idx = text.indexOf('"test_cases"');
|
||
if (idx === -1) return { names: [], active: false };
|
||
let start = idx + 12;
|
||
while (start < text.length && (text[start] === " " || text[start] === ":")) start++;
|
||
if (start >= text.length || text[start] !== "[") return { names: [], active: false };
|
||
let depth = 0, inStr = false, arrayClosed = false;
|
||
for (let i = start; i < text.length; i++) {
|
||
const ch = text[i];
|
||
if (inStr) { if (ch === "\\") i++; else if (ch === '"') inStr = false; }
|
||
else { if (ch === '"') inStr = true; else if (ch === "[") depth++; else if (ch === "]") { depth--; if (depth === 0) { arrayClosed = true; break; } } }
|
||
}
|
||
const arrayText = text.slice(start);
|
||
const names: string[] = [];
|
||
const re = /"test_name"\s*:\s*"((?:[^"\\]|\\.)*)"/g;
|
||
let m: RegExpExecArray | null;
|
||
while ((m = re.exec(arrayText)) !== null) {
|
||
names.push(m[1].replace(/\\n/g, " ").replace(/\\"/g, '"'));
|
||
}
|
||
return { names, active: !arrayClosed };
|
||
}
|
||
|
||
type DevStreamResult = { java_code: string; unit_tests: string; implementation_notes: string; currentField: string | null };
|
||
|
||
function parseDevStream(text: string): DevStreamResult {
|
||
const result: DevStreamResult = {
|
||
java_code: "", unit_tests: "", implementation_notes: "", currentField: null,
|
||
};
|
||
for (const field of ["java_code", "unit_tests", "implementation_notes" ] as const) {
|
||
const key = `"${field}"`;
|
||
const idx = text.indexOf(key);
|
||
if (idx === -1) continue;
|
||
let start = idx + key.length;
|
||
while (start < text.length && (text[start] === " " || text[start] === ":")) start++;
|
||
if (start >= text.length || text[start] !== '"') continue;
|
||
start++;
|
||
let value = "", i = start, closed = false;
|
||
while (i < text.length) {
|
||
if (text[i] === "\\" && i + 1 < text.length) {
|
||
const e = text[i + 1];
|
||
value += e === "n" ? "\n" : e === "t" ? "\t" : e;
|
||
i += 2;
|
||
} else if (text[i] === '"') { closed = true; break; }
|
||
else { value += text[i++]; }
|
||
}
|
||
result[field] = value;
|
||
if (!closed) result.currentField = field;
|
||
}
|
||
return result;
|
||
}
|
||
|
||
/* ── 步骤标签 ── */
|
||
const STEPS = [
|
||
{ title: "Requirements", icon: "💬" },
|
||
{ title: "PM Analysis", icon: "📋" },
|
||
{ title: "QA Cases", icon: "🧪" },
|
||
{ title: "Dev Code", icon: "💻" },
|
||
{ title: "Test Run", icon: "▶" },
|
||
];
|
||
|
||
const STATUS_STEP: Record<string, number> = {
|
||
clarifying: 0, pm_ready: 0,
|
||
pm_done: 1, qa_ready: 1,
|
||
qa_done: 2, dev_ready: 2,
|
||
dev_done: 3, test_done: 4,
|
||
};
|
||
|
||
const STATUS_LABEL: Record<string, string> = {
|
||
clarifying: "Clarifying", pm_ready: "Ready",
|
||
pm_done: "PM Done", qa_ready: "PM Done",
|
||
qa_done: "QA Done", dev_ready: "QA Done",
|
||
dev_done: "Code Ready", test_done: "Tests Done",
|
||
};
|
||
|
||
const TYPE_EMOJI: Record<string, string> = {
|
||
"Functional": "🧩", "Performance": "⚡", "Security": "🔒",
|
||
"功能测试": "🧩", "性能测试": "⚡", "安全测试": "🔒",
|
||
};
|
||
|
||
const TYPE_LABEL: Record<string, string> = {
|
||
"功能测试": "Functional", "性能测试": "Performance",
|
||
"安全测试": "Security", "边界测试": "Boundary",
|
||
"异常测试": "Exception", "集成测试": "Integration",
|
||
};
|
||
|
||
/* ━━━━━━━━━━━━━━━━━━━━━ Component ━━━━━━━━━━━━━━━━━━━━━ */
|
||
export default function DevOpsAgent() {
|
||
const [step, setStep] = useState<Step>(0);
|
||
const [sessionId, setSessionId] = useState("");
|
||
const [status, setStatus] = useState("");
|
||
const [loading, setLoading] = useState(false);
|
||
const [streaming, setStreaming] = useState(false);
|
||
const [error, setError] = useState("");
|
||
const [streamText, setStreamText] = useState("");
|
||
|
||
// Step 0
|
||
const [requirement, setRequirement] = useState("");
|
||
const [rawRequirement, setRawRequirement] = useState("");
|
||
const [clarifyHistory, setClarifyHistory] = useState<ClarifyMsg[]>([]);
|
||
const [clarifyInput, setClarifyInput] = useState("");
|
||
|
||
// Step 1
|
||
const [requirementAnalysis, setRequirementAnalysis] = useState<RequirementAnalysis | null>(null);
|
||
const [pmFeedback, setPmFeedback] = useState("");
|
||
|
||
// Step 2
|
||
const [testCases, setTestCases] = useState<TestCase[]>([]);
|
||
const [testStrategy, setTestStrategy] = useState("");
|
||
const [coveragePlan, setCoveragePlan] = useState("");
|
||
const [qaFeedback, setQaFeedback] = useState("");
|
||
|
||
// Step 3
|
||
const [codeGeneration, setCodeGeneration] = useState<CodeGeneration | null>(null);
|
||
const [codeTab, setCodeTab] = useState<"java_code" | "unit_tests" | "implementation_notes">("java_code");
|
||
const [devStreamTab, setDevStreamTab] = useState<"java_code" | "unit_tests" | "implementation_notes">("java_code");
|
||
|
||
// Step 4
|
||
const [testExecution, setTestExecution] = useState<TestExecution | null>(null);
|
||
|
||
const abortRef = useRef<AbortController | null>(null);
|
||
const bottomRef = useRef<HTMLDivElement>(null);
|
||
const pmStreamRef = useRef<HTMLDivElement>(null);
|
||
const qaStreamRef = useRef<HTMLDivElement>(null);
|
||
const devStreamRef = useRef<HTMLPreElement>(null);
|
||
|
||
/* ── 流式增量解析 ── */
|
||
const pmStreamParsed = useMemo(() => {
|
||
if (!streaming || step !== 1) return null;
|
||
const t = streamText;
|
||
const fr = parseStreamStrArray(t, "functional_requirements");
|
||
const nfr = parseStreamStrArray(t, "non_functional_requirements");
|
||
const ac = parseStreamStrArray(t, "acceptance_criteria");
|
||
const ec = parseStreamStrArray(t, "edge_cases");
|
||
const sum = parseStreamStr(t, "summary");
|
||
let currentSection: string | null = null;
|
||
for (const [key, val] of [["functional_requirements", fr], ["non_functional_requirements", nfr], ["acceptance_criteria", ac], ["edge_cases", ec]] as const) {
|
||
if (val.active || val.items.some((i) => i.active)) { currentSection = key; break; }
|
||
}
|
||
if (!currentSection && sum.active) currentSection = "summary";
|
||
return { functional_requirements: fr, non_functional_requirements: nfr, acceptance_criteria: ac, edge_cases: ec, summary: sum, currentSection };
|
||
}, [streaming, step, streamText]);
|
||
|
||
const qaStreamParsed = useMemo(() => {
|
||
if (!streaming || step !== 2) return null;
|
||
const t = streamText;
|
||
const cases = parseStreamTestCaseNames(t);
|
||
const strategy = parseStreamStr(t, "test_strategy");
|
||
const coverage = parseStreamStr(t, "coverage_plan");
|
||
let currentSection: string | null = null;
|
||
if (cases.active) currentSection = "test_cases";
|
||
else if (strategy.active) currentSection = "test_strategy";
|
||
else if (coverage.active) currentSection = "coverage_plan";
|
||
else if (cases.names.length) currentSection = "test_cases";
|
||
return { testCases: cases, testStrategy: strategy, coveragePlan: coverage, currentSection };
|
||
}, [streaming, step, streamText]);
|
||
|
||
const devStreamParsed = useMemo(() => {
|
||
if (!streaming || step !== 3) return null;
|
||
return parseDevStream(streamText);
|
||
}, [streaming, step, streamText]);
|
||
|
||
// Dev 流式时自动切换 Tab
|
||
useEffect(() => {
|
||
if (devStreamParsed?.currentField) {
|
||
const f = devStreamParsed.currentField as typeof devStreamTab;
|
||
if (["java_code", "unit_tests", "implementation_notes"].includes(f)) setDevStreamTab(f);
|
||
}
|
||
}, [devStreamParsed?.currentField]);
|
||
|
||
useEffect(() => {
|
||
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
|
||
// 同时滚动各流式容器到底部
|
||
if (pmStreamRef.current) pmStreamRef.current.scrollTop = pmStreamRef.current.scrollHeight;
|
||
if (qaStreamRef.current) qaStreamRef.current.scrollTop = qaStreamRef.current.scrollHeight;
|
||
if (devStreamRef.current) devStreamRef.current.scrollTop = devStreamRef.current.scrollHeight;
|
||
}, [streamText]);
|
||
|
||
useEffect(() => {
|
||
return () => abortRef.current?.abort();
|
||
}, []);
|
||
|
||
function applySessionData(data: any) {
|
||
if (data.status) setStatus(data.status);
|
||
if (data.data?.requirement_analysis) setRequirementAnalysis(data.data.requirement_analysis);
|
||
if (data.data?.test_cases) {
|
||
const tc = data.data.test_cases;
|
||
if (tc.test_cases?.length) setTestCases(tc.test_cases);
|
||
if (tc.test_strategy) setTestStrategy(tc.test_strategy);
|
||
if (tc.coverage_plan) setCoveragePlan(tc.coverage_plan);
|
||
}
|
||
if (data.data?.code_generation) setCodeGeneration(data.data.code_generation);
|
||
if (data.data?.test_execution) setTestExecution(data.data.test_execution);
|
||
}
|
||
|
||
/* ── 流式通用封装 ── */
|
||
const withStreaming = useCallback(async (
|
||
streamPath: string,
|
||
targetStep: Step,
|
||
runPath?: string,
|
||
) => {
|
||
setStreamText("");
|
||
setStreaming(true);
|
||
setStep(targetStep);
|
||
setError("");
|
||
if (targetStep === 3) setDevStreamTab("java_code");
|
||
try {
|
||
if (runPath) await apiPost(runPath);
|
||
const ctrl = new AbortController();
|
||
abortRef.current = ctrl;
|
||
await readSSE(
|
||
streamPath,
|
||
(text) => setStreamText((prev) => prev + text),
|
||
(doneData) => applySessionData(doneData),
|
||
ctrl.signal,
|
||
);
|
||
} catch (e) {
|
||
setError((e as Error).message);
|
||
} finally {
|
||
setStreaming(false);
|
||
}
|
||
}, []);
|
||
|
||
/* ── Step 0: 创建会话 ── */
|
||
const handleStart = useCallback(async () => {
|
||
if (!requirement.trim() || loading) return;
|
||
setLoading(true);
|
||
setError("");
|
||
try {
|
||
const data: any = await apiPost("/session/start", { requirement: requirement.trim() });
|
||
setSessionId(data.session_id);
|
||
setRawRequirement(requirement.trim());
|
||
setStatus(data.status || "clarifying");
|
||
const q = data.clarify_questions || data.question;
|
||
if (q) setClarifyHistory([{ role: "assistant", content: q }]);
|
||
} catch (e) {
|
||
setError((e as Error).message);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, [requirement, loading]);
|
||
|
||
/* ── Step 0: 需求澄清 ── */
|
||
const handleClarify = useCallback(async () => {
|
||
if (!clarifyInput.trim() || loading) return;
|
||
const msg = clarifyInput.trim();
|
||
setClarifyHistory((h) => [...h, { role: "user", content: msg }]);
|
||
setClarifyInput("");
|
||
setLoading(true);
|
||
setError("");
|
||
try {
|
||
const data: any = await apiPost(`/session/${sessionId}/clarify`, { message: msg });
|
||
setStatus(data.status || status);
|
||
const q = data.clarify_questions || data.question;
|
||
if (q) setClarifyHistory((h) => [...h, { role: "assistant", content: q }]);
|
||
} catch (e) {
|
||
setError((e as Error).message);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, [clarifyInput, sessionId, loading, status]);
|
||
|
||
const handlePmRun = useCallback(() =>
|
||
withStreaming(`/session/${sessionId}/pm/stream`, 1),
|
||
[sessionId, withStreaming]);
|
||
|
||
const handlePmRefine = useCallback(async () => {
|
||
if (!pmFeedback.trim()) return;
|
||
const fb = pmFeedback.trim();
|
||
setPmFeedback("");
|
||
await withStreaming(`/session/${sessionId}/pm/refine/stream?feedback=${encodeURIComponent(fb)}`, 1);
|
||
}, [sessionId, pmFeedback, withStreaming]);
|
||
|
||
const handleQaRun = useCallback(() =>
|
||
withStreaming(`/session/${sessionId}/qa/stream`, 2),
|
||
[sessionId, withStreaming]);
|
||
|
||
const handleQaRefine = useCallback(async () => {
|
||
if (!qaFeedback.trim()) return;
|
||
const fb = qaFeedback.trim();
|
||
setQaFeedback("");
|
||
await withStreaming(`/session/${sessionId}/qa/refine/stream?feedback=${encodeURIComponent(fb)}`, 2);
|
||
}, [sessionId, qaFeedback, withStreaming]);
|
||
|
||
const handleDevRun = useCallback(() =>
|
||
withStreaming(`/session/${sessionId}/dev/stream`, 3),
|
||
[sessionId, withStreaming]);
|
||
|
||
/* ── Step 4: 测试执行 ── */
|
||
const handleTestRun = useCallback(async () => {
|
||
setStep(4);
|
||
setLoading(true);
|
||
setError("");
|
||
try {
|
||
const data: any = await apiPost(`/session/${sessionId}/test/run`);
|
||
const te = data?.data?.test_execution ?? data;
|
||
setTestExecution({
|
||
success: te.success ?? ((te.failed ?? 0) === 0 && (te.errors ?? 0) === 0),
|
||
passed: te.passed ?? 0,
|
||
failed: te.failed ?? 0,
|
||
errors: te.errors ?? 0,
|
||
total: te.total ?? 0,
|
||
output: te.output || data.detail || JSON.stringify(data, null, 2),
|
||
});
|
||
if (data.status) setStatus(data.status);
|
||
} catch (e) {
|
||
setError((e as Error).message);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, [sessionId]);
|
||
|
||
/* ── AI 自动修复 ── */
|
||
const handleTestFix = useCallback(async () => {
|
||
setTestExecution(null);
|
||
await withStreaming(`/session/${sessionId}/test/fix/stream`, 3);
|
||
await handleTestRun();
|
||
}, [sessionId, withStreaming, handleTestRun]);
|
||
|
||
/* ── 用例分组 ── */
|
||
const groupedTestCases = useMemo(() => {
|
||
const groups: Record<string, TestCase[]> = {};
|
||
for (const tc of testCases) {
|
||
const t = tc.test_type || "Functional";
|
||
if (!groups[t]) groups[t] = [];
|
||
groups[t].push(tc);
|
||
}
|
||
return groups;
|
||
}, [testCases]);
|
||
|
||
function parseNotes(text: string): string[] {
|
||
if (!text) return [];
|
||
return text.split("\n").map((l) => l.replace(/^\d+\.\s*/, "").trim()).filter((l) => l.length > 0);
|
||
}
|
||
|
||
const currentStep = STATUS_STEP[status] ?? step;
|
||
const statusLabel = STATUS_LABEL[status] || status;
|
||
|
||
return (
|
||
<div className="flex flex-col h-full overflow-hidden bg-[#f7f7f9]">
|
||
{/* ── 步骤栏 ── */}
|
||
<div className="shrink-0 border-b border-border bg-white shadow-[0_1px_8px_rgba(0,0,0,0.04)]">
|
||
<div className="flex items-center gap-0 px-[60px] py-0">
|
||
{STEPS.map((s, i) => (
|
||
<div key={i} className="flex items-center">
|
||
<button
|
||
onClick={() => { if (sessionId && i <= step) setStep(i as Step); }}
|
||
className={`flex items-center gap-2.5 px-5 py-4 text-sm font-semibold border-b-2 transition-all duration-200 ${
|
||
i === step
|
||
? "border-magenta text-magenta"
|
||
: i < step
|
||
? "border-transparent text-green-600"
|
||
: "border-transparent text-txt-muted"
|
||
} ${i <= step ? "cursor-pointer" : "cursor-default"}`}
|
||
>
|
||
<span className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold shrink-0 transition-colors ${
|
||
i === step
|
||
? "bg-magenta text-white"
|
||
: i < step
|
||
? "bg-green-500 text-white"
|
||
: "bg-gray-200 text-gray-400"
|
||
}`}>
|
||
{i < step ? "✓" : i + 1}
|
||
</span>
|
||
<span className="hidden sm:block">{s.title}</span>
|
||
</button>
|
||
{i < STEPS.length - 1 && (
|
||
<span className={`mx-1 text-sm ${ i < step ? "text-green-400" : "text-gray-300" }`}>›</span>
|
||
)}
|
||
</div>
|
||
))}
|
||
{sessionId && statusLabel && (
|
||
<div className={`ml-auto mr-2 px-3 py-1 text-xs font-bold rounded-full ${
|
||
status === "clarifying" ? "bg-amber-50 text-amber-600 border border-amber-200" :
|
||
status === "test_done" ? "bg-green-50 text-green-600 border border-green-200" :
|
||
"bg-magenta-50 text-magenta border border-magenta/20"
|
||
}`}>
|
||
{statusLabel}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Error */}
|
||
{error && (
|
||
<div className="flex items-center justify-between px-4 py-2.5 mx-10 mt-4 text-sm text-red-700 bg-red-50 border border-red-200 rounded-xl">
|
||
<span className="flex items-center gap-2"><span>⚠️</span>{error}</span>
|
||
<button className="ml-4 font-bold text-red-300 hover:text-red-500" onClick={() => setError("")}>✕</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* ── 内容区 ── */}
|
||
<div className="flex-1 px-[60px] py-6 overflow-y-auto">
|
||
<div className="space-y-0">
|
||
|
||
{/* ═══ Step 0: Requirement Input ═══ */}
|
||
{step === 0 && !sessionId && (
|
||
<div className="card">
|
||
<div className="flex items-start gap-4 mb-6">
|
||
<div className="flex items-center justify-center w-10 h-10 text-xl rounded-2xl bg-magenta/10 shrink-0">📋</div>
|
||
<div>
|
||
<h2 className="text-base font-bold text-txt mb-0.5">Enter Requirements</h2>
|
||
<p className="text-sm text-txt-muted">Describe your product requirements. AI will complete analysis → test cases → code generation automatically.</p>
|
||
</div>
|
||
</div>
|
||
<textarea
|
||
className="input-field min-h-[160px] resize-y mb-5"
|
||
value={requirement}
|
||
onChange={(e) => setRequirement(e.target.value)}
|
||
placeholder="e.g. Implement a user login feature supporting username/password, log all login events, target 1000 QPS concurrency…"
|
||
/>
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-xs text-txt-muted">{requirement.length > 0 ? `${requirement.length} chars` : ""}</span>
|
||
<button className="btn-magenta" onClick={handleStart} disabled={loading || !requirement.trim()}>
|
||
{loading ? (
|
||
<span className="flex items-center gap-2"><span className="w-3.5 h-3.5 border-2 border-white/40 border-t-white rounded-full animate-spin inline-block"></span>Analyzing…</span>
|
||
) : "Start AI Analysis →"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* ═══ Step 0: Clarification ═══ */}
|
||
{step === 0 && sessionId && (
|
||
<div className="card">
|
||
<div className="flex items-center gap-3 mb-5">
|
||
<div className="flex items-center justify-center w-8 h-8 text-base rounded-xl bg-magenta/10">💬</div>
|
||
<h2 className="text-base font-bold">Requirement Clarification</h2>
|
||
</div>
|
||
|
||
<div className="p-4 mb-5 text-sm bg-[#f9f9f9] border border-border rounded-xl">
|
||
<span className="block mb-1.5 text-[11px] font-bold text-txt-muted uppercase tracking-wide">Original Requirement</span>
|
||
<p className="leading-relaxed text-txt">{rawRequirement}</p>
|
||
</div>
|
||
|
||
{clarifyHistory.length > 0 && (
|
||
<div className="flex flex-col gap-3 mb-5">
|
||
{clarifyHistory.map((msg, i) => (
|
||
<div
|
||
key={i}
|
||
className={`max-w-[85%] px-4 py-3 text-sm rounded-2xl ${
|
||
msg.role === "user"
|
||
? "self-end bg-gray-100 text-txt"
|
||
: "self-start bg-white border border-border shadow-sm"
|
||
}`}
|
||
>
|
||
<span className="block mb-1 text-[11px] font-bold text-txt-muted">
|
||
{msg.role === "assistant" ? "🤖 AI Assistant" : "👤 You"}
|
||
</span>
|
||
<span className="leading-relaxed whitespace-pre-wrap">{msg.content}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{status === "clarifying" && (
|
||
<div className="pt-4 mt-2 border-t border-border">
|
||
<p className="mb-2 text-xs font-semibold tracking-wide uppercase text-txt-muted">Reply to AI</p>
|
||
<textarea
|
||
className="input-field min-h-[80px] resize-y mb-3"
|
||
value={clarifyInput}
|
||
onChange={(e) => setClarifyInput(e.target.value)}
|
||
placeholder="Enter your additional details…"
|
||
disabled={loading}
|
||
/>
|
||
<div className="flex justify-end">
|
||
<button className="btn-magenta" onClick={handleClarify} disabled={loading}>
|
||
{loading ? <span className="flex items-center gap-2"><span className="w-3.5 h-3.5 border-2 border-white/40 border-t-white rounded-full animate-spin inline-block"></span>Sending…</span> : "Send"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{status !== "clarifying" && status !== "" && (
|
||
<div className="pt-4 mt-2 border-t border-border">
|
||
<div className="flex items-center gap-2 px-4 py-3 mb-4 text-sm text-green-700 border border-green-200 bg-green-50 rounded-xl">
|
||
<span>✅</span><span>Requirements confirmed. Ready to start PM analysis.</span>
|
||
</div>
|
||
<div className="flex justify-end">
|
||
<button className="btn-magenta" onClick={handlePmRun} disabled={loading || streaming}>
|
||
{loading ? "Analyzing…" : "Start PM Analysis →"}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* ═══ Step 1: PM Analysis ═══ */}
|
||
{step === 1 && (
|
||
<div className="card">
|
||
<div className="flex items-center justify-between mb-5">
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex items-center justify-center w-8 h-8 text-base rounded-xl bg-orange-50">📋</div>
|
||
<h2 className="text-base font-bold">PM Analysis</h2>
|
||
</div>
|
||
{streaming && (
|
||
<span className="flex items-center gap-1.5 text-xs font-semibold text-magenta bg-magenta/5 px-3 py-1 rounded-full">
|
||
<span className="w-1.5 h-1.5 bg-magenta rounded-full animate-pulse inline-block"></span>
|
||
Analyzing… {streamText.length} chars
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{/* Streaming preview */}
|
||
{streaming && pmStreamParsed && (
|
||
<div ref={pmStreamRef} className="rounded-xl border border-border bg-[#fafafa] p-4 mb-4 space-y-3 max-h-[55vh] overflow-y-auto">
|
||
{([
|
||
["functional_requirements", "🔧", "Functional Requirements", "bg-blue-50 text-blue-700"],
|
||
["non_functional_requirements", "⚙️", "Non-Functional Requirements", "bg-purple-50 text-purple-700"],
|
||
["acceptance_criteria", "✅", "Acceptance Criteria", "bg-green-50 text-green-700"],
|
||
["edge_cases", "🚧", "Edge Cases", "bg-amber-50 text-amber-700"],
|
||
] as const).map(([key, icon, label, color]) => {
|
||
const sec = pmStreamParsed[key];
|
||
if (!sec.items.length && pmStreamParsed.currentSection !== key) return null;
|
||
return (
|
||
<div key={key} className={`transition-opacity ${ pmStreamParsed.currentSection === key ? "opacity-100" : "opacity-50" }`}>
|
||
<div className={`inline-flex items-center gap-1 text-[11px] font-bold px-2 py-0.5 rounded-md mb-2 ${color}`}>{icon} {label}</div>
|
||
<ul className="pl-1 space-y-1">
|
||
{sec.items.map((item, i) => (
|
||
<li key={i} className="flex items-start gap-2 text-sm">
|
||
<span className="mt-1.5 w-1 h-1 rounded-full bg-current shrink-0 opacity-40"></span>
|
||
<span>{item.value}{item.active && <span className="text-magenta animate-pulse ml-0.5">|</span>}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
);
|
||
})}
|
||
{(pmStreamParsed.summary.value || pmStreamParsed.currentSection === "summary") && (
|
||
<div className={`transition-opacity ${ pmStreamParsed.currentSection === "summary" ? "opacity-100" : "opacity-50" }`}>
|
||
<div className="inline-flex items-center gap-1 text-[11px] font-bold px-2 py-0.5 rounded-md mb-2 bg-gray-100 text-gray-600">📌 Summary</div>
|
||
<p className="text-sm leading-relaxed">{pmStreamParsed.summary.value}{pmStreamParsed.summary.active && <span className="text-magenta animate-pulse">|</span>}</p>
|
||
</div>
|
||
)}
|
||
{!pmStreamParsed.currentSection && (
|
||
<div className="flex items-center justify-center gap-2 py-4 text-sm text-txt-muted">
|
||
<span className="inline-block w-4 h-4 border-2 rounded-full border-magenta/30 border-t-magenta animate-spin"></span>
|
||
Waiting for AI output…
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Final result — clean list layout */}
|
||
{!streaming && requirementAnalysis && (
|
||
<div className="mb-4 divide-y divide-border">
|
||
{requirementAnalysis.summary && (
|
||
<div className="pb-4 mb-1">
|
||
<div className="text-[11px] font-bold text-txt-muted uppercase tracking-wide mb-1.5">Summary</div>
|
||
<p className="text-sm leading-relaxed text-txt">{requirementAnalysis.summary}</p>
|
||
</div>
|
||
)}
|
||
{[
|
||
{ key: "functional_requirements" as const, label: "Functional Requirements" },
|
||
{ key: "non_functional_requirements" as const, label: "Non-Functional Requirements" },
|
||
{ key: "acceptance_criteria" as const, label: "Acceptance Criteria" },
|
||
{ key: "edge_cases" as const, label: "Edge Cases" },
|
||
].map(({ key, label }) => {
|
||
const items = requirementAnalysis[key];
|
||
if (!items?.length) return null;
|
||
return (
|
||
<div key={key} className="py-4">
|
||
<div className="text-[11px] font-bold text-txt-muted uppercase tracking-wide mb-2">{label}</div>
|
||
<ul className="space-y-1.5">
|
||
{items.map((f, i) => (
|
||
<li key={i} className="flex items-start gap-2 text-sm">
|
||
<span className="w-1 h-1 mt-2 rounded-full bg-txt-muted shrink-0"></span>
|
||
<span>{f}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
{!streaming && !requirementAnalysis && (
|
||
<div className="flex items-center justify-center gap-2 py-10 text-sm text-txt-muted">
|
||
<span className="inline-block w-4 h-4 border-2 rounded-full border-border border-t-magenta animate-spin"></span>
|
||
Waiting for results…
|
||
</div>
|
||
)}
|
||
|
||
{!streaming && (
|
||
<div className="flex gap-2 pt-4 mt-4 border-t border-border">
|
||
<input
|
||
className="flex-1 input-field"
|
||
value={pmFeedback}
|
||
onChange={(e) => setPmFeedback(e.target.value)}
|
||
placeholder="Have feedback? Enter here to regenerate…"
|
||
/>
|
||
<button className="btn-outline" onClick={handlePmRefine} disabled={!pmFeedback.trim() || loading}>Regenerate</button>
|
||
<button className="btn-magenta" onClick={handleQaRun} disabled={loading || !!pmFeedback.trim()}>Generate QA Cases →</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* ═══ Step 2: QA Test Cases ═══ */}
|
||
{step === 2 && (
|
||
<div className="card">
|
||
<div className="flex items-center justify-between mb-5">
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex items-center justify-center w-8 h-8 text-base rounded-xl bg-green-50">🧪</div>
|
||
<h2 className="text-base font-bold">QA Test Cases</h2>
|
||
</div>
|
||
{streaming && (
|
||
<span className="flex items-center gap-1.5 text-xs font-semibold text-magenta bg-magenta/5 px-3 py-1 rounded-full">
|
||
<span className="w-1.5 h-1.5 bg-magenta rounded-full animate-pulse inline-block"></span>
|
||
{qaStreamParsed?.testCases.names.length ?? 0} cases generated
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{/* Streaming preview */}
|
||
{streaming && qaStreamParsed && (
|
||
<div ref={qaStreamRef} className="rounded-xl border border-border bg-[#fafafa] p-4 mb-4 max-h-[55vh] overflow-y-auto space-y-3">
|
||
<div className="inline-flex items-center gap-1 text-[11px] font-bold px-2 py-0.5 rounded-md mb-1 bg-green-50 text-green-700">🧪 Test Cases</div>
|
||
<div className="space-y-1.5">
|
||
{qaStreamParsed.testCases.names.map((name, i) => (
|
||
<div key={i} className="flex items-center gap-2.5 py-1.5 px-3 bg-white border border-border rounded-lg text-sm">
|
||
<span className="font-mono text-[11px] font-bold text-magenta bg-magenta/10 px-1.5 py-0.5 rounded shrink-0">
|
||
TC{String(i + 1).padStart(3, "0")}
|
||
</span>
|
||
<span className="text-txt">{name}</span>
|
||
</div>
|
||
))}
|
||
{qaStreamParsed.testCases.active && (
|
||
<div className="flex items-center gap-2 text-sm text-txt-muted py-1.5 px-3">
|
||
<span className="w-3.5 h-3.5 border-2 border-green-200 border-t-green-500 rounded-full animate-spin inline-block"></span>
|
||
Generating next case…
|
||
</div>
|
||
)}
|
||
{!qaStreamParsed.testCases.names.length && (
|
||
<div className="flex items-center justify-center gap-2 py-4 text-sm text-txt-muted">
|
||
<span className="inline-block w-4 h-4 border-2 rounded-full border-magenta/30 border-t-magenta animate-spin"></span>
|
||
Waiting…
|
||
</div>
|
||
)}
|
||
</div>
|
||
{qaStreamParsed.testStrategy.value && (
|
||
<div className="pt-3 border-t border-border">
|
||
<div className="text-[11px] font-bold text-txt-muted mb-1">📋 Test Strategy</div>
|
||
<p className="text-sm">{qaStreamParsed.testStrategy.value}{qaStreamParsed.testStrategy.active && <span className="text-magenta animate-pulse">|</span>}</p>
|
||
</div>
|
||
)}
|
||
{qaStreamParsed.coveragePlan.value && (
|
||
<div className="pt-3 border-t border-border">
|
||
<div className="text-[11px] font-bold text-txt-muted mb-1">📊 Coverage Plan</div>
|
||
<p className="text-sm">{qaStreamParsed.coveragePlan.value}{qaStreamParsed.coveragePlan.active && <span className="text-magenta animate-pulse">|</span>}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Final result */}
|
||
{!streaming && testCases.length > 0 && (
|
||
<div className="mb-4 space-y-5">
|
||
{Object.entries(groupedTestCases).map(([type, cases]) => (
|
||
<div key={type}>
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<span className="text-sm font-bold">{TYPE_EMOJI[type] || "🧪"} {TYPE_LABEL[type] || type}</span>
|
||
<span className="text-xs text-txt-muted bg-surface-muted px-2 py-0.5 rounded-full">{cases.length}</span>
|
||
</div>
|
||
<div className="overflow-x-auto border rounded-xl border-border">
|
||
<table className="w-full text-sm">
|
||
<thead>
|
||
<tr className="text-left bg-[#f9f9f9] border-b border-border">
|
||
{["ID", "Name", "Precondition", "Steps", "Expected Result"].map(h => (
|
||
<th key={h} className="px-3 py-2.5 font-semibold text-xs text-txt-muted whitespace-nowrap">{h}</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{cases.map((tc, i) => (
|
||
<tr key={tc.test_id || i} className={`border-b border-border last:border-0 ${ i % 2 === 0 ? "bg-white" : "bg-[#fdfdfd]" }`}>
|
||
<td className="px-3 py-2.5 font-mono text-[11px] font-bold text-magenta whitespace-nowrap">{tc.test_id}</td>
|
||
<td className="px-3 py-2.5 font-medium">{tc.test_name}</td>
|
||
<td className="px-3 py-2.5 text-txt-muted text-xs">{tc.precondition}</td>
|
||
<td className="px-3 py-2.5">
|
||
{Array.isArray(tc.steps) ? (
|
||
<ol className="list-decimal list-inside space-y-0.5 text-xs">
|
||
{tc.steps.map((s, j) => <li key={j}>{s}</li>)}
|
||
</ol>
|
||
) : <span className="text-xs">{tc.steps}</span>}
|
||
</td>
|
||
<td className="px-3 py-2.5 text-xs">{tc.expected_result}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
))}
|
||
{(testStrategy || coveragePlan) && (
|
||
<div className="grid grid-cols-2 gap-3 pt-1">
|
||
{testStrategy && (
|
||
<div className="p-4 bg-white border border-border rounded-xl">
|
||
<div className="flex items-center gap-1.5 mb-2">
|
||
<span className="text-sm">📋</span>
|
||
<span className="text-xs font-bold tracking-wide uppercase text-txt">Test Strategy</span>
|
||
</div>
|
||
<p className="text-sm leading-relaxed text-txt-muted">{testStrategy}</p>
|
||
</div>
|
||
)}
|
||
{coveragePlan && (
|
||
<div className="p-4 bg-white border border-border rounded-xl">
|
||
<div className="flex items-center gap-1.5 mb-2">
|
||
<span className="text-sm">📊</span>
|
||
<span className="text-xs font-bold tracking-wide uppercase text-txt">Coverage Plan</span>
|
||
</div>
|
||
<p className="text-sm leading-relaxed text-txt-muted">{coveragePlan}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{!streaming && testCases.length === 0 && (
|
||
<div className="flex items-center justify-center gap-2 py-10 text-sm text-txt-muted">
|
||
<span className="inline-block w-4 h-4 border-2 rounded-full border-border border-t-magenta animate-spin"></span>
|
||
Waiting for test cases…
|
||
</div>
|
||
)}
|
||
|
||
{!streaming && (
|
||
<div className="flex gap-2 pt-4 mt-4 border-t border-border">
|
||
<input
|
||
className="flex-1 input-field"
|
||
value={qaFeedback}
|
||
onChange={(e) => setQaFeedback(e.target.value)}
|
||
placeholder="Have feedback? Enter here to regenerate…"
|
||
/>
|
||
<button className="btn-outline" onClick={handleQaRefine} disabled={!qaFeedback.trim() || loading}>Regenerate</button>
|
||
<button className="btn-magenta" onClick={handleDevRun} disabled={loading || !!qaFeedback.trim()}>Generate Dev Code →</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* ═══ Step 3: Dev Code Generation ═══ */}
|
||
{step === 3 && (
|
||
<div className="card">
|
||
<div className="flex items-center justify-between mb-5">
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex items-center justify-center w-8 h-8 text-base bg-gray-100 rounded-xl">💻</div>
|
||
<h2 className="text-base font-bold">Dev Code Generation</h2>
|
||
</div>
|
||
{streaming && (
|
||
<span className="flex items-center gap-1.5 text-xs font-semibold text-magenta bg-magenta/5 px-3 py-1 rounded-full">
|
||
<span className="w-1.5 h-1.5 bg-magenta rounded-full animate-pulse inline-block"></span>
|
||
Generating… {streamText.length} chars
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{/* Tabs */}
|
||
<div className="flex gap-1 p-1 bg-[#f3f3f3] rounded-xl mb-4">
|
||
{([
|
||
["java_code", "🐍 Business Code"],
|
||
["unit_tests", "🧪 Unit Tests"],
|
||
["implementation_notes", "📄 Implementation Notes"],
|
||
] as const).map(([key, label]) => (
|
||
<button
|
||
key={key}
|
||
className={`flex-1 px-3 py-1.5 text-sm font-semibold rounded-lg transition-all ${
|
||
(streaming ? devStreamTab : codeTab) === key
|
||
? "bg-white text-magenta shadow-sm"
|
||
: "text-txt-muted hover:text-txt"
|
||
}`}
|
||
onClick={() => streaming ? setDevStreamTab(key) : setCodeTab(key)}
|
||
>
|
||
{label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
|
||
<div className="relative rounded-xl overflow-hidden border border-[#2a2a2a]">
|
||
<div className="flex items-center justify-between px-4 py-2 bg-[#252525] border-b border-[#333]">
|
||
<div className="flex items-center gap-1.5">
|
||
<span className="w-2.5 h-2.5 rounded-full bg-[#ff5f57]" />
|
||
<span className="w-2.5 h-2.5 rounded-full bg-[#febc2e]" />
|
||
<span className="w-2.5 h-2.5 rounded-full bg-[#28c840]" />
|
||
</div>
|
||
<span className="text-[11px] text-gray-500 font-mono">
|
||
{(streaming ? devStreamTab : codeTab) === "implementation_notes" ? "notes.txt" :
|
||
(streaming ? devStreamTab : codeTab) === "unit_tests" ? "test_service.py" : "service.py"}
|
||
</span>
|
||
{!streaming && (
|
||
<button
|
||
className="text-[11px] text-gray-400 hover:text-gray-200 transition-colors"
|
||
onClick={() => {
|
||
const code = codeTab === "java_code" ? codeGeneration?.java_code
|
||
: codeTab === "unit_tests" ? codeGeneration?.unit_tests
|
||
: codeGeneration?.implementation_notes;
|
||
if (code) navigator.clipboard.writeText(code);
|
||
}}
|
||
>
|
||
Copy
|
||
</button>
|
||
)}
|
||
</div>
|
||
<pre ref={devStreamRef} className="bg-[#1a1a1a] text-gray-300 px-5 py-4 text-[0.82rem] font-mono leading-relaxed max-h-[50vh] overflow-y-auto whitespace-pre-wrap">
|
||
{streaming
|
||
? devStreamParsed?.[devStreamTab] || "Waiting for Dev Agent output…"
|
||
: codeTab === "java_code"
|
||
? codeGeneration?.java_code || "No code yet"
|
||
: codeTab === "unit_tests"
|
||
? codeGeneration?.unit_tests || "No tests yet"
|
||
: parseNotes(codeGeneration?.implementation_notes || "").join("\n") || "No notes yet"
|
||
}
|
||
</pre>
|
||
</div>
|
||
|
||
{!streaming && (
|
||
<div className="flex justify-end pt-4 mt-4 border-t border-border">
|
||
<button className="btn-magenta" onClick={handleTestRun} disabled={loading}>
|
||
▶ Run Unit Tests
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* ═══ Step 4: Test Execution ═══ */}
|
||
{step === 4 && (
|
||
<div className="card">
|
||
<div className="flex items-center justify-between mb-5">
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex items-center justify-center w-8 h-8 text-base rounded-xl bg-purple-50">▶</div>
|
||
<h2 className="text-base font-bold">Test Execution</h2>
|
||
</div>
|
||
{loading && (
|
||
<span className="flex items-center gap-1.5 text-xs font-semibold text-magenta bg-magenta/5 px-3 py-1 rounded-full">
|
||
<span className="w-3.5 h-3.5 border-2 border-magenta/30 border-t-magenta rounded-full animate-spin inline-block"></span>
|
||
Running…
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{testExecution ? (
|
||
<>
|
||
{/* 状态横幅 */}
|
||
<div className={`flex items-center gap-3 px-5 py-4 rounded-xl mb-5 ${
|
||
testExecution.success
|
||
? "bg-green-50 border border-green-200"
|
||
: "bg-red-50 border border-red-200"
|
||
}`}>
|
||
<span className="text-2xl">{testExecution.success ? "✅" : "❌"}</span>
|
||
<div>
|
||
<div className={`text-sm font-bold ${ testExecution.success ? "text-green-800" : "text-red-800" }`}>
|
||
{testExecution.success
|
||
? `All ${testExecution.total} tests passed!`
|
||
: `${testExecution.failed + testExecution.errors} test(s) failed`
|
||
}
|
||
</div>
|
||
{!testExecution.success && (
|
||
<div className="text-xs text-red-600 mt-0.5">Click "AI Auto Fix" to automatically fix the failing tests.</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 数据统计 */}
|
||
<div className="grid grid-cols-4 gap-3 mb-5">
|
||
{[
|
||
{ num: testExecution.passed, label: "Passed", color: "text-green-600", bg: "bg-green-50 border-green-100", icon: "✅" },
|
||
{ num: testExecution.failed, label: "Failed", color: "text-red-500", bg: "bg-red-50 border-red-100", icon: "❌" },
|
||
{ num: testExecution.errors, label: "Errors", color: "text-amber-500", bg: "bg-amber-50 border-amber-100", icon: "⚠️" },
|
||
{ num: testExecution.total, label: "Total", color: "text-txt", bg: "bg-[#f9f9f9] border-border", icon: "📊" },
|
||
].map(({ num, label, color, bg, icon }) => (
|
||
<div key={label} className={`border rounded-xl p-4 text-center ${bg}`}>
|
||
<div className={`text-3xl font-extrabold mb-1 ${color}`}>{num}</div>
|
||
<div className="text-[11px] font-semibold text-txt-muted">{icon} {label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* 输出 */}
|
||
<div className="relative rounded-xl overflow-hidden border border-[#2a2a2a]">
|
||
<div className="flex items-center justify-between px-4 py-2 bg-[#252525] border-b border-[#333]">
|
||
<span className="text-[11px] text-gray-400 font-semibold">🖥 pytest output</span>
|
||
<button
|
||
className="text-[11px] text-gray-400 hover:text-gray-200 transition-colors"
|
||
onClick={() => navigator.clipboard.writeText(testExecution.output)}
|
||
>
|
||
Copy
|
||
</button>
|
||
</div>
|
||
<pre className="bg-[#1a1a1a] text-gray-300 px-5 py-4 text-[0.82rem] font-mono leading-relaxed max-h-[40vh] overflow-y-auto whitespace-pre-wrap">
|
||
{testExecution.output}
|
||
</pre>
|
||
</div>
|
||
|
||
<div className="flex justify-end gap-2 pt-4 mt-4 border-t border-border">
|
||
<button className="btn-outline" onClick={handleTestRun} disabled={loading}>🔄 Re-run</button>
|
||
{!testExecution.success && (
|
||
<button className="btn-magenta" onClick={handleTestFix} disabled={loading || streaming}>
|
||
🔧 AI Auto Fix
|
||
</button>
|
||
)}
|
||
</div>
|
||
</>
|
||
) : (
|
||
<div className="flex flex-col items-center justify-center gap-3 py-14">
|
||
{loading ? (
|
||
<>
|
||
<span className="w-8 h-8 border-2 rounded-full border-magenta/20 border-t-magenta animate-spin"></span>
|
||
<span className="text-sm text-txt-muted">Running pytest…</span>
|
||
</>
|
||
) : (
|
||
<>
|
||
<span className="text-3xl">🧪</span>
|
||
<span className="text-sm text-txt-muted">Ready. Click the button below to run tests.</span>
|
||
<button className="mt-2 btn-magenta" onClick={handleTestRun}>▶ Run Unit Tests</button>
|
||
</>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
<div ref={bottomRef} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|