diff --git a/src/pages/DevOpsAgent.tsx b/src/pages/DevOpsAgent.tsx
index c8249bf..7c061b5 100644
--- a/src/pages/DevOpsAgent.tsx
+++ b/src/pages/DevOpsAgent.tsx
@@ -1,28 +1,35 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+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 PMResult = {
+type RequirementAnalysis = {
   summary: string;
-  functional: string[];
-  nonfunctional: string[];
-  acceptance: string[];
+  functional_requirements: string[];
+  non_functional_requirements: string[];
+  acceptance_criteria: string[];
   edge_cases: string[];
 };
 
 type TestCase = {
-  id: string;
-  name: string;
+  test_id: string;
+  test_name: string;
   precondition: string;
-  steps: string;
-  expected: string;
+  steps: string[] | string;
+  expected_result: string;
+  test_type?: string;
 };
 
-type TestResult = {
+type CodeGeneration = {
+  java_code: string;
+  unit_tests: string;
+  implementation_notes: string;
+};
+
+type TestExecution = {
+  success: boolean;
   passed: number;
   failed: number;
   errors: number;
@@ -43,7 +50,13 @@ async function apiPost<T = unknown>(path: string, body?: unknown): Promise<T> {
   return res.json();
 }
 
-async function readSSE(path: string, onChunk: (text: string) => void, signal?: AbortSignal) {
+// 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;
@@ -55,24 +68,31 @@ async function readSSE(path: string, onChunk: (text: string) => void, signal?: A
       const { done, value } = await reader.read();
       if (done) break;
       buf += dec.decode(value, { stream: true });
-      // process SSE lines
-      let idx = buf.indexOf("\n");
-      while (idx >= 0) {
-        const line = buf.slice(0, idx).trim();
-        buf = buf.slice(idx + 1);
-        if (line.startsWith("data:")) {
-          const payload = line.slice(5).trim();
-          if (payload === "[DONE]") return;
-          try {
-            const evt = JSON.parse(payload);
-            if (evt.text) onChunk(evt.text);
-            else if (evt.message) onChunk(evt.message);
-            else if (typeof evt === "string") onChunk(evt);
-          } catch {
-            onChunk(payload);
+      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;
         }
-        idx = buf.indexOf("\n");
       }
     }
   } finally {
@@ -80,61 +100,277 @@ async function readSSE(path: string, onChunk: (text: string) => void, signal?: A
   }
 }
 
-/* ── Step labels ── */
-const STEPS: { title: string; icon: string }[] = [
-  { title: "Clarification", icon: "💬" },
+/* ── 流式 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 Output", 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 — Requirement
+  // Step 0
   const [requirement, setRequirement] = useState("");
-  const [rawReq, setRawReq] = useState("");
-  const [status, setStatus] = useState<string>("");
+  const [rawRequirement, setRawRequirement] = useState("");
   const [clarifyHistory, setClarifyHistory] = useState<ClarifyMsg[]>([]);
   const [clarifyInput, setClarifyInput] = useState("");
 
-  // Step 1 — PM analysis
-  const [pmStream, setPmStream] = useState("");
-  const [pmResult, setPmResult] = useState<PMResult | null>(null);
+  // Step 1
+  const [requirementAnalysis, setRequirementAnalysis] = useState<RequirementAnalysis | null>(null);
   const [pmFeedback, setPmFeedback] = useState("");
 
-  // Step 2 — QA test cases
-  const [qaStream, setQaStream] = useState("");
+  // Step 2
   const [testCases, setTestCases] = useState<TestCase[]>([]);
+  const [testStrategy, setTestStrategy] = useState("");
+  const [coveragePlan, setCoveragePlan] = useState("");
   const [qaFeedback, setQaFeedback] = useState("");
 
-  // Step 3 — Dev code
-  const [devStream, setDevStream] = useState("");
-  const [codeTab, setCodeTab] = useState<"code" | "test" | "notes">("code");
-  const [devCode, setDevCode] = useState("");
-  const [devTest, setDevTest] = useState("");
-  const [devNotes, setDevNotes] = 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 — Test results
-  const [testResult, setTestResult] = useState<TestResult | null>(null);
+  // 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" });
-  }, [pmStream, qaStream, devStream]);
+    // 同时滚动各流式容器到底部
+    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();
   }, []);
 
-  /* ── Step 0: Start session ── */
+  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);
@@ -142,11 +378,10 @@ export default function DevOpsAgent() {
     try {
       const data: any = await apiPost("/session/start", { requirement: requirement.trim() });
       setSessionId(data.session_id);
-      setRawReq(requirement.trim());
+      setRawRequirement(requirement.trim());
       setStatus(data.status || "clarifying");
-      if (data.clarify_questions) {
-        setClarifyHistory([{ role: "assistant", content: data.clarify_questions }]);
-      }
+      const q = data.clarify_questions || data.question;
+      if (q) setClarifyHistory([{ role: "assistant", content: q }]);
     } catch (e) {
       setError((e as Error).message);
     } finally {
@@ -154,19 +389,19 @@ export default function DevOpsAgent() {
     }
   }, [requirement, loading]);
 
-  /* ── Step 0: Clarify ── */
+  /* ── Step 0: 需求澄清 ── */
   const handleClarify = useCallback(async () => {
     if (!clarifyInput.trim() || loading) return;
-    setClarifyHistory((h) => [...h, { role: "user", content: clarifyInput.trim() }]);
+    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: clarifyInput.trim() });
-      setClarifyInput("");
+      const data: any = await apiPost(`/session/${sessionId}/clarify`, { message: msg });
       setStatus(data.status || status);
-      if (data.clarify_questions) {
-        setClarifyHistory((h) => [...h, { role: "assistant", content: data.clarify_questions }]);
-      }
+      const q = data.clarify_questions || data.question;
+      if (q) setClarifyHistory((h) => [...h, { role: "assistant", content: q }]);
     } catch (e) {
       setError((e as Error).message);
     } finally {
@@ -174,134 +409,49 @@ export default function DevOpsAgent() {
     }
   }, [clarifyInput, sessionId, loading, status]);
 
-  /* ── Step 1: PM Run ── */
-  const handlePmRun = useCallback(async () => {
-    setStep(1);
-    setLoading(true);
-    setError("");
-    setPmStream("");
-    try {
-      await apiPost(`/session/${sessionId}/pm/run`);
-      const ctrl = new AbortController();
-      abortRef.current = ctrl;
-      let full = "";
-      await readSSE(`/session/${sessionId}/pm/stream`, (text) => {
-        full += text;
-        setPmStream(full);
-      }, ctrl.signal);
-      // Try to parse structured result
-      try {
-        const json = JSON.parse(full);
-        setPmResult(json);
-      } catch {
-        setPmResult({ summary: full, functional: [], nonfunctional: [], acceptance: [], edge_cases: [] });
-      }
-    } catch (e) {
-      setError((e as Error).message);
-    } finally {
-      setLoading(false);
-    }
-  }, [sessionId]);
+  const handlePmRun = useCallback(() =>
+    withStreaming(`/session/${sessionId}/pm/stream`, 1),
+    [sessionId, withStreaming]);
 
-  /* ── Step 1: PM Refine ── */
   const handlePmRefine = useCallback(async () => {
     if (!pmFeedback.trim()) return;
-    setLoading(true);
-    setPmStream("");
-    try {
-      const ctrl = new AbortController();
-      abortRef.current = ctrl;
-      let full = "";
-      await readSSE(
-        `/session/${sessionId}/pm/refine/stream?feedback=${encodeURIComponent(pmFeedback.trim())}`,
-        (text) => {
-          full += text;
-          setPmStream(full);
-        },
-        ctrl.signal,
-      );
-      setPmFeedback("");
-    } catch (e) {
-      setError((e as Error).message);
-    } finally {
-      setLoading(false);
-    }
-  }, [sessionId, pmFeedback]);
+    const fb = pmFeedback.trim();
+    setPmFeedback("");
+    await withStreaming(`/session/${sessionId}/pm/refine/stream?feedback=${encodeURIComponent(fb)}`, 1);
+  }, [sessionId, pmFeedback, withStreaming]);
 
-  /* ── Step 2: QA Run ── */
-  const handleQaRun = useCallback(async () => {
-    setStep(2);
-    setLoading(true);
-    setError("");
-    setQaStream("");
-    try {
-      await apiPost(`/session/${sessionId}/qa/run`);
-      const ctrl = new AbortController();
-      abortRef.current = ctrl;
-      let full = "";
-      await readSSE(`/session/${sessionId}/qa/stream`, (text) => {
-        full += text;
-        setQaStream(full);
-      }, ctrl.signal);
-      // Try parse
-      try {
-        const json = JSON.parse(full);
-        if (json.test_cases) setTestCases(json.test_cases);
-      } catch {
-        /* raw display */
-      }
-    } catch (e) {
-      setError((e as Error).message);
-    } finally {
-      setLoading(false);
-    }
-  }, [sessionId]);
+  const handleQaRun = useCallback(() =>
+    withStreaming(`/session/${sessionId}/qa/stream`, 2),
+    [sessionId, withStreaming]);
 
-  /* ── Step 3: Dev Run ── */
-  const handleDevRun = useCallback(async () => {
-    setStep(3);
-    setLoading(true);
-    setError("");
-    setDevStream("");
-    try {
-      await apiPost(`/session/${sessionId}/dev/run`);
-      const ctrl = new AbortController();
-      abortRef.current = ctrl;
-      let full = "";
-      await readSSE(`/session/${sessionId}/dev/stream`, (text) => {
-        full += text;
-        setDevStream(full);
-      }, ctrl.signal);
-      // Parse code blocks
-      try {
-        const json = JSON.parse(full);
-        setDevCode(json.code || json.implementation || full);
-        setDevTest(json.tests || json.test_code || "");
-        setDevNotes(json.notes || json.implementation_notes || "");
-      } catch {
-        setDevCode(full);
-      }
-    } catch (e) {
-      setError((e as Error).message);
-    } finally {
-      setLoading(false);
-    }
-  }, [sessionId]);
+  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]);
 
-  /* ── Step 4: Test Run ── */
+  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`);
-      setTestResult({
-        passed: data.passed ?? 0,
-        failed: data.failed ?? 0,
-        errors: data.errors ?? 0,
-        total: data.total ?? 0,
-        output: data.output || data.detail || JSON.stringify(data, null, 2),
+      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 {
@@ -309,146 +459,175 @@ export default function DevOpsAgent() {
     }
   }, [sessionId]);
 
-  /* ── Test Fix ── */
+  /* ── AI 自动修复 ── */
   const handleTestFix = useCallback(async () => {
-    setLoading(true);
-    try {
-      const ctrl = new AbortController();
-      abortRef.current = ctrl;
-      let full = "";
-      await readSSE(`/session/${sessionId}/test/fix/stream`, (text) => {
-        full += text;
-        setDevStream(full);
-      }, ctrl.signal);
-      // Re-run test
-      await handleTestRun();
-    } catch (e) {
-      setError((e as Error).message);
-    } finally {
-      setLoading(false);
+    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);
     }
-  }, [sessionId, handleTestRun]);
+    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">
-      {/* ── Step bar ── */}
-      <div className="flex items-center gap-1 px-10 py-4 border-b border-border bg-white/80 backdrop-blur shrink-0">
-        {STEPS.map((s, i) => (
-          <div key={i} className="flex items-center gap-1">
-            <button
-              onClick={() => { if (sessionId && i <= step) setStep(i as Step); }}
-              className={`flex items-center gap-2 px-4 py-2 text-sm font-bold transition-colors ${
-                i === step
-                  ? "text-magenta"
-                  : i < step
-                    ? "text-green-600"
-                    : "text-txt-muted"
-              } ${i <= step ? "cursor-pointer hover:text-magenta" : "cursor-default"}`}
-            >
-              <span>{i < step ? "✓" : s.icon}</span>
-              <span>{s.title}</span>
-            </button>
-            {i < STEPS.length - 1 && <span className="text-gray-300 mx-1">→</span>}
-          </div>
-        ))}
+    <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-8 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 banner */}
+      {/* Error */}
       {error && (
-        <div className="mx-10 mt-4 px-4 py-2 bg-red-50 text-red-700 text-sm flex justify-between items-center">
-          {error}
-          <button className="font-bold text-red-400 hover:text-red-600" onClick={() => setError("")}>✕</button>
+        <div className="flex items-center justify-between px-4 py-2.5 mx-8 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>
       )}
 
-      {/* ── Content ── */}
-      <div className="flex-1 overflow-y-auto px-10 py-8">
-        <div className="max-w-4xl mx-auto">
+      {/* ── 内容区 ── */}
+      <div className="flex-1 px-8 py-6 overflow-y-auto">
+        <div className="max-w-5xl mx-auto space-y-0">
 
-          {/* ═══ Step 0: Requirement ═══ */}
+          {/* ═══ Step 0: Requirement Input ═══ */}
           {step === 0 && !sessionId && (
             <div className="card">
-              <h2 className="text-lg font-extrabold mb-1">📋 Describe Product Requirement</h2>
-              <p className="text-sm text-txt-muted mb-6">Enter your product requirement, the system will automatically perform requirement clarification and analysis</p>
+              <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-4"
+                className="input-field min-h-[160px] resize-y mb-5"
                 value={requirement}
                 onChange={(e) => setRequirement(e.target.value)}
-                placeholder="Example: Build a predictive battery maintenance system for 500k concurrent uploads with end-to-end latency < 3s..."
+                placeholder="e.g. Implement a user login feature supporting username/password, log all login events, target 1000 QPS concurrency…"
               />
-              <div className="flex justify-end">
+              <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 ? "Creating..." : "Start Analysis →"}
+                  {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-4">
-                <span className="text-lg">💬</span>
-                <h2 className="text-lg font-extrabold">Requirement Clarification</h2>
-                <span className={`badge ${status === "clarifying" ? "bg-yellow-100 text-yellow-700" : "bg-green-100 text-green-700"}`}>
-                  {status === "clarifying" ? "Clarifying" : "Confirmed"}
-                </span>
+              <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>
 
-              {/* Original req */}
-              <div className="bg-surface-muted p-4 mb-4 text-sm">
-                <span className="text-xs font-bold text-txt-muted block mb-1">📋 Original Requirement</span>
-                {rawReq}
+              <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>
 
-              {/* Chat history */}
               {clarifyHistory.length > 0 && (
-                <div className="flex flex-col gap-3 mb-4">
+                <div className="flex flex-col gap-3 mb-5">
                   {clarifyHistory.map((msg, i) => (
                     <div
                       key={i}
-                      className={`max-w-[80%] px-4 py-3 text-sm ${
+                      className={`max-w-[85%] px-4 py-3 text-sm rounded-2xl ${
                         msg.role === "user"
-                          ? "self-end bg-surface-muted"
-                          : "self-start border border-border border-l-4 border-l-magenta"
+                          ? "self-end bg-gray-100 text-txt"
+                          : "self-start bg-white border border-border shadow-sm"
                       }`}
                     >
-                      <span className="text-xs font-bold text-txt-muted block mb-1">
-                        {msg.role === "assistant" ? "🤖 AI" : "👤 You"}
+                      <span className="block mb-1 text-[11px] font-bold text-txt-muted">
+                        {msg.role === "assistant" ? "🤖 AI Assistant" : "👤 You"}
                       </span>
-                      {msg.content}
+                      <span className="leading-relaxed whitespace-pre-wrap">{msg.content}</span>
                     </div>
                   ))}
                 </div>
               )}
 
-              {/* Clarify input */}
               {status === "clarifying" && (
-                <div className="border-t border-border pt-4 mt-4">
-                  <p className="text-sm font-bold text-txt-muted mb-2">💬 Answer the AI follow-up:</p>
+                <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="Add extra context..."
+                    placeholder="Enter your additional details…"
                     disabled={loading}
                   />
                   <div className="flex justify-end">
                     <button className="btn-magenta" onClick={handleClarify} disabled={loading}>
-                      {loading ? "Sending..." : "Send"}
+                      {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>
               )}
 
-              {/* Ready for PM */}
-              {status !== "clarifying" && (
-                <div className="border-t border-border pt-4 mt-4">
-                  <div className="bg-green-50 text-green-800 px-4 py-2 text-sm mb-4">
-                    ✅ Requirement is confirmed and ready for PM analysis.
+              {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}>
-                      {loading ? "Analyzing..." : "Run PM Analysis →"}
+                    <button className="btn-magenta" onClick={handlePmRun} disabled={loading || streaming}>
+                      {loading ? "Analyzing…" : "Start PM Analysis →"}
                     </button>
                   </div>
                 </div>
@@ -459,43 +638,110 @@ export default function DevOpsAgent() {
           {/* ═══ Step 1: PM Analysis ═══ */}
           {step === 1 && (
             <div className="card">
-              <div className="flex items-center gap-3 mb-4">
-                <span className="text-lg">📋</span>
-                <h2 className="text-lg font-extrabold">PM Requirement Analysis</h2>
-                {loading && <span className="text-xs text-magenta font-bold animate-pulse">Streaming output...</span>}
+              <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/result display */}
-              <div className="bg-surface-muted p-6 text-sm leading-relaxed whitespace-pre-wrap mb-4 max-h-[50vh] overflow-y-auto">
-                {pmStream || "Waiting for stream..."}
-              </div>
-
-              {/* Structured result sections */}
-              {pmResult && pmResult.functional?.length > 0 && (
-                <div className="space-y-3 mb-4">
-                  {pmResult.summary && (
-                    <div><span className="text-xs font-bold text-txt-muted">📌 Summary</span><p className="text-sm mt-1">{pmResult.summary}</p></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>
                   )}
-                  {pmResult.functional.length > 0 && (
-                    <div>
-                      <span className="text-xs font-bold text-txt-muted">🔧 Functional Requirements</span>
-                      <ul className="text-sm mt-1 list-disc list-inside">{pmResult.functional.map((f, i) => <li key={i}>{f}</li>)}</ul>
+                  {!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>
               )}
 
-              {/* Feedback */}
-              {!loading && (
-                <div className="border-t border-border pt-4 mt-4 flex gap-3">
+              {/* 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="input-field flex-1"
+                    className="flex-1 input-field"
                     value={pmFeedback}
                     onChange={(e) => setPmFeedback(e.target.value)}
-                    placeholder="Provide feedback to refine PM output..."
+                    placeholder="Have feedback? Enter here to regenerate…"
                   />
-                  <button className="btn-outline" onClick={handlePmRefine} disabled={!pmFeedback.trim()}>Refine</button>
-                  <button className="btn-magenta" onClick={handleQaRun}>Generate QA Cases →</button>
+                  <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>
@@ -504,111 +750,225 @@ export default function DevOpsAgent() {
           {/* ═══ Step 2: QA Test Cases ═══ */}
           {step === 2 && (
             <div className="card">
-              <div className="flex items-center gap-3 mb-4">
-                <span className="text-lg">🧪</span>
-                <h2 className="text-lg font-extrabold">QA Test Cases</h2>
-                {loading && <span className="text-xs text-magenta font-bold animate-pulse">Generating...</span>}
+              <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>
 
-              {/* Test cases table */}
-              {testCases.length > 0 ? (
-                <div className="overflow-x-auto mb-4">
-                  <table className="w-full text-sm border border-border">
-                    <thead>
-                      <tr className="bg-surface-muted text-left">
-                        <th className="px-3 py-2 border-b border-border font-bold">ID</th>
-                        <th className="px-3 py-2 border-b border-border font-bold">Case</th>
-                        <th className="px-3 py-2 border-b border-border font-bold">Precondition</th>
-                        <th className="px-3 py-2 border-b border-border font-bold">Steps</th>
-                        <th className="px-3 py-2 border-b border-border font-bold">Expected</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {testCases.map((tc, i) => (
-                        <tr key={tc.id || i} className="border-b border-border">
-                          <td className="px-3 py-2 font-mono text-xs">{tc.id}</td>
-                          <td className="px-3 py-2">{tc.name}</td>
-                          <td className="px-3 py-2 text-txt-muted">{tc.precondition}</td>
-                          <td className="px-3 py-2">{tc.steps}</td>
-                          <td className="px-3 py-2">{tc.expected}</td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              ) : (
-                <div className="bg-surface-muted p-6 text-sm leading-relaxed whitespace-pre-wrap mb-4 max-h-[50vh] overflow-y-auto">
-                  {qaStream || "Waiting for stream..."}
+              {/* 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>
               )}
 
-              {!loading && (
-                <div className="border-t border-border pt-4 mt-4 flex gap-3">
+              {/* 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="input-field flex-1"
+                    className="flex-1 input-field"
                     value={qaFeedback}
                     onChange={(e) => setQaFeedback(e.target.value)}
-                    placeholder="Provide feedback to refine QA output..."
+                    placeholder="Have feedback? Enter here to regenerate…"
                   />
-                  <button className="btn-outline" disabled={!qaFeedback.trim()}>Refine</button>
-                  <button className="btn-magenta" onClick={handleDevRun}>Generate Dev Output →</button>
+                  <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 ═══ */}
+          {/* ═══ Step 3: Dev Code Generation ═══ */}
           {step === 3 && (
             <div className="card">
-              <div className="flex items-center gap-3 mb-4">
-                <span className="text-lg">💻</span>
-                <h2 className="text-lg font-extrabold">Dev Code Generation</h2>
-                {loading && <span className="text-xs text-magenta font-bold animate-pulse">Generating...</span>}
+              <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 mb-4 border-b border-border">
-                {(
-                  [
-                    ["code", "🐍 Service Code"],
-                    ["test", "🧪 Unit Tests"],
-                    ["notes", "📄 Notes"],
-                  ] as const
-                ).map(([key, label]) => (
+              <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={`px-4 py-2 text-sm font-bold border-b-2 transition-colors ${
-                      codeTab === key ? "border-magenta text-magenta" : "border-transparent text-txt-muted hover:text-txt"
+                    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={() => setCodeTab(key)}
+                    onClick={() => streaming ? setDevStreamTab(key) : setCodeTab(key)}
                   >
                     {label}
                   </button>
                 ))}
               </div>
 
-              <div className="bg-surface-dark text-gray-300 p-6 text-[0.85rem] font-mono leading-relaxed max-h-[50vh] overflow-y-auto whitespace-pre-wrap">
-                {loading
-                  ? devStream || "Waiting for stream..."
-                  : codeTab === "code"
-                    ? devCode || "No service code"
-                    : codeTab === "test"
-                      ? devTest || "No test code"
-                      : devNotes || "No notes"
-                }
+              <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>
 
-              {!loading && (
-                <div className="border-t border-border pt-4 mt-4 flex justify-end gap-3">
-                  <button
-                    className="btn-outline"
-                    onClick={() => {
-                      navigator.clipboard.writeText(codeTab === "code" ? devCode : codeTab === "test" ? devTest : devNotes);
-                    }}
-                  >
-                    Copy
+              {!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>
-                  <button className="btn-magenta" onClick={handleTestRun}>Run Tests →</button>
                 </div>
               )}
             </div>
@@ -617,53 +977,95 @@ export default function DevOpsAgent() {
           {/* ═══ Step 4: Test Execution ═══ */}
           {step === 4 && (
             <div className="card">
-              <div className="flex items-center gap-3 mb-4">
-                <span className="text-lg">▶</span>
-                <h2 className="text-lg font-extrabold">Test Execution</h2>
-                {loading && <span className="text-xs text-magenta font-bold animate-pulse">Running...</span>}
+              <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>
 
-              {testResult ? (
+              {testExecution ? (
                 <>
-                  {/* Stats */}
-                  <div className="grid grid-cols-4 gap-4 mb-6">
-                    <div className="bg-green-50 p-4 text-center">
-                      <div className="text-2xl font-extrabold text-green-600">{testResult.passed}</div>
-                      <div className="text-xs font-bold text-green-700 mt-1">✅ Passed</div>
-                    </div>
-                    <div className="bg-red-50 p-4 text-center">
-                      <div className="text-2xl font-extrabold text-red-600">{testResult.failed}</div>
-                      <div className="text-xs font-bold text-red-700 mt-1">❌ Failed</div>
-                    </div>
-                    <div className="bg-yellow-50 p-4 text-center">
-                      <div className="text-2xl font-extrabold text-yellow-600">{testResult.errors}</div>
-                      <div className="text-xs font-bold text-yellow-700 mt-1">⚠️ Errors</div>
-                    </div>
-                    <div className="bg-surface-muted p-4 text-center">
-                      <div className="text-2xl font-extrabold text-txt">{testResult.total}</div>
-                      <div className="text-xs font-bold text-txt-muted mt-1">Total</div>
+                  {/* 状态横幅 */}
+                  <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>
 
-                  {/* Output */}
-                  <pre className="bg-surface-dark text-gray-300 p-6 text-[0.85rem] font-mono leading-relaxed max-h-[40vh] overflow-y-auto whitespace-pre-wrap">
-                    {testResult.output}
-                  </pre>
+                  {/* 数据统计 */}
+                  <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="border-t border-border pt-4 mt-4 flex justify-end gap-3">
-                    <button className="btn-outline" onClick={handleTestRun} disabled={loading}>
-                      Re-run
-                    </button>
-                    {testResult.failed > 0 && (
-                      <button className="btn-magenta" onClick={handleTestFix} disabled={loading}>
-                        AI Auto-fix
+                  {/* 输出 */}
+                  <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="text-center py-12 text-txt-muted text-sm">
-                  {loading ? "Running pytest..." : "Waiting for test execution"}
+                <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>