feat(#26): improve review workflow UX with guidance and batch support

- Add status-based workflow guidance to OverviewPanel (active/review/final)
- Replace inline comment history with ReviewHistoryPanel in HistoryPage
- Show explicit save destination in KnowledgePanel confirmation message
- Update E2E tests to use review-batch API fixtures

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: etoyama

frontend/e2e/design-detail.spec.ts

@@ -1,7 +1,6 @@
 import { test, expect } from "@playwright/test";
 import {
   makeDesign,
-  makeComment,
   makeKnowledgeEntry,
   makeBatchComment,
   makeReviewBatch,
@@ -208,7 +207,7 @@ test("#10: save knowledge shows confirmation", async ({ page }) => {
 
   // Now save
   await page.getByRole("button", { name: "Save Knowledge" }).click();
-  await expect(page.getByText(/saved successfully/i)).toBeVisible({
+  await expect(page.getByText(/knowledge saved to project rules/i)).toBeVisible({
     timeout: 5000,
   });
 });

frontend/e2e/history.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from "@playwright/test";
-import { makeDesign, makeComment } from "./fixtures/mock-data";
+import { makeDesign, makeReviewBatch, makeBatchComment } from "./fixtures/mock-data";
 
 // #21: Timeline display — all designs in updated_at descending order
 test("#21: history timeline shows designs in descending order", async ({
@@ -38,23 +38,23 @@ test("#21: history timeline shows designs in descending order", async ({
   expect(firstCardText).toContain("New Design");
 });
 
-// #22: History expand — click entry, review comment history shown
-test("#22: clicking history entry shows review comments", async ({ page }) => {
+// #22: History expand — click entry, review batch history shown
+test("#22: clicking history entry shows review batches", async ({ page }) => {
   const design = makeDesign({ id: "d-hist", title: "History Design" });
-  const comments = [
-    makeComment({
-      id: "c-h1",
+  const batches = [
+    makeReviewBatch({
+      id: "RB-h1",
       design_id: "d-hist",
-      comment: "First review note",
-      reviewer: "alice",
       status_after: "supported",
+      reviewer: "alice",
+      comments: [makeBatchComment({ comment: "First review note" })],
     }),
-    makeComment({
-      id: "c-h2",
+    makeReviewBatch({
+      id: "RB-h2",
       design_id: "d-hist",
-      comment: "Second review note",
-      reviewer: "bob",
       status_after: "rejected",
+      reviewer: "bob",
+      comments: [makeBatchComment({ comment: "Second review note" })],
     }),
   ];
 
@@ -66,9 +66,9 @@ test("#22: clicking history entry shows review comments", async ({ page }) => {
     }
     return route.continue();
   });
-  await page.route(`**/api/designs/${design.id}/comments`, (route) =>
+  await page.route(`**/api/designs/${design.id}/review-batches`, (route) =>
     route.fulfill({
-      json: { design_id: design.id, comments, count: comments.length },
+      json: { design_id: design.id, batches, count: batches.length },
     }),
   );
 
@@ -78,7 +78,7 @@ test("#22: clicking history entry shows review comments", async ({ page }) => {
   // Click to expand
   await page.getByText("History Design").click();
 
-  // Review comments should appear
+  // Review batch comments should appear
   await expect(page.getByText("First review note")).toBeVisible({
     timeout: 5000,
   });

frontend/src/pages/HistoryPage.tsx

@@ -3,19 +3,16 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { StatusBadge } from "@/components/StatusBadge";
 import { EmptyState } from "@/components/EmptyState";
 import { ErrorBanner } from "@/components/ErrorBanner";
-import { listDesigns, listComments } from "@/api/client";
-import type { Design, ReviewComment } from "@/types/api";
+import { listDesigns } from "@/api/client";
+import type { Design } from "@/types/api";
 import { formatDateTime } from "@/lib/utils";
+import { ReviewHistoryPanel } from "@/pages/design-detail/components/ReviewHistoryPanel";
 
 export function HistoryPage() {
   const [designs, setDesigns] = useState<Design[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-
   const [expandedId, setExpandedId] = useState<string | null>(null);
-  const [comments, setComments] = useState<ReviewComment[]>([]);
-  const [commentsLoading, setCommentsLoading] = useState(false);
-  const [commentsError, setCommentsError] = useState<string | null>(null);
 
   useEffect(() => {
     const ctrl = new AbortController();
@@ -33,23 +30,6 @@ export function HistoryPage() {
     return () => ctrl.abort();
   }, []);
 
-  useEffect(() => {
-    if (!expandedId) {
-      setComments([]);
-      return;
-    }
-    const ctrl = new AbortController();
-    setCommentsLoading(true);
-    setCommentsError(null);
-    listComments(expandedId, ctrl.signal)
-      .then((res) => setComments(res.comments))
-      .catch((err) => {
-        if (err.name !== "AbortError") setCommentsError(err.message);
-      })
-      .finally(() => setCommentsLoading(false));
-    return () => ctrl.abort();
-  }, [expandedId]);
-
   const handleToggle = (id: string) => {
     setExpandedId((prev) => (prev === id ? null : id));
   };
@@ -81,7 +61,6 @@ export function HistoryPage() {
       {designs.map((design) => {
         const isCreated = design.created_at === design.updated_at;
         const isExpanded = expandedId === design.id;
-        const showEmptyComments = isExpanded && !commentsLoading && !commentsError && comments.length === 0;
 
         return (
           <Card
@@ -102,35 +81,7 @@ export function HistoryPage() {
 
             {isExpanded && (
               <CardContent onClick={(e) => e.stopPropagation()}>
-                <h3 className="mb-2 text-sm font-semibold">Review History</h3>
-                {commentsLoading && (
-                  <p className="text-sm text-muted-foreground">Loading...</p>
-                )}
-                {commentsError && <ErrorBanner message={commentsError} />}
-                {showEmptyComments && (
-                  <p className="text-sm text-muted-foreground">
-                    No review comments
-                  </p>
-                )}
-                {comments.length > 0 && (
-                  <div className="space-y-3">
-                    {comments.map((c) => (
-                      <div
-                        key={c.id}
-                        className="rounded border p-3 text-sm"
-                      >
-                        <div className="mb-1 flex items-center gap-2">
-                          <span className="font-medium">{c.reviewer}</span>
-                          <StatusBadge status={c.status_after} />
-                          <span className="text-muted-foreground">
-                            {formatDateTime(c.created_at)}
-                          </span>
-                        </div>
-                        <p>{c.comment}</p>
-                      </div>
-                    ))}
-                  </div>
-                )}
+                <ReviewHistoryPanel designId={design.id} />
               </CardContent>
             )}
           </Card>

frontend/src/pages/design-detail/KnowledgePanel.tsx

@@ -57,7 +57,9 @@ export function KnowledgePanel({ designId }: { designId: string }) {
             {saved ? "Saved" : saving ? "Saving..." : "Save Knowledge"}
           </Button>
           {saved && (
-            <p className="text-sm text-green-600">Knowledge saved successfully.</p>
+            <p className="text-sm text-green-600">
+              Knowledge saved to project rules. View all entries in the Rules tab → Domain Knowledge.
+            </p>
           )}
         </>
       )}

frontend/src/pages/design-detail/OverviewPanel.tsx

@@ -2,14 +2,43 @@ import { useState } from "react";
 import { submitReview } from "@/api/client";
 import { StatusBadge } from "@/components/StatusBadge";
 import { ErrorBanner } from "@/components/ErrorBanner";
+import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
 import { formatDateTime } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
-import type { Design } from "@/types/api";
+import type { Design, DesignStatus } from "@/types/api";
 import { COMMENTABLE_SECTIONS } from "./components/sections";
 import { SectionRenderer } from "./components/SectionRenderer";
 import { ReviewBatchComposer } from "./components/ReviewBatchComposer";
 import { useReviewDrafts } from "./components/useReviewDrafts";
 
+const STATUS_GUIDE: Partial<Record<DesignStatus, { title: string; description: string }>> = {
+  active: {
+    title: "Ready for Review",
+    description:
+      "Submit for review to enable inline commenting on each section.",
+  },
+  pending_review: {
+    title: "In Review",
+    description:
+      'Add comments to sections below, then submit with a verdict. Choose "Active" to request revisions, or a final verdict when the design is solid.',
+  },
+  supported: {
+    title: "Approved",
+    description:
+      "Design is finalized. Proceed with your analysis, then return to the Knowledge tab to extract and save domain insights.",
+  },
+  rejected: {
+    title: "Rejected",
+    description:
+      "Hypothesis was rejected. Go to the Knowledge tab to capture lessons learned.",
+  },
+  inconclusive: {
+    title: "Inconclusive",
+    description:
+      "Results are inconclusive. Go to the Knowledge tab to capture observations, then consider refining the hypothesis.",
+  },
+};
+
 interface OverviewPanelProps {
   design: Design;
   designId: string;
@@ -53,16 +82,27 @@ export function OverviewPanel({
       <Field label="Created">{formatDateTime(design.created_at)}</Field>
       <Field label="Updated">{formatDateTime(design.updated_at)}</Field>
 
-      {design.status === "active" && (
-        <div className="border-t pt-3">
-          <Button
-            onClick={handleSubmitReview}
-            disabled={submittingReview}
-          >
-            {submittingReview ? "Submitting..." : "Submit for Review"}
-          </Button>
-        </div>
-      )}
+      {(() => {
+        const guide = STATUS_GUIDE[design.status];
+        if (!guide) return null;
+        return (
+          <Alert data-testid="workflow-guide">
+            <AlertTitle>{guide.title}</AlertTitle>
+            <AlertDescription>
+              <p>{guide.description}</p>
+              {design.status === "active" && (
+                <Button
+                  className="mt-2"
+                  onClick={handleSubmitReview}
+                  disabled={submittingReview}
+                >
+                  {submittingReview ? "Submitting..." : "Submit for Review"}
+                </Button>
+              )}
+            </AlertDescription>
+          </Alert>
+        );
+      })()}
 
       {error && <ErrorBanner message={error} />}