feat: dedicated Workflow Detail page at /workflows/:workflowId

- New WorkflowDetail page with pipeline, timeline, proposals, metrics
- Workflows list now navigates to /workflows/{id} (own page)
- Document Workspace remains at /documents/{docId}/{wfId} (doc-focused)
- Back button links to /workflows
- Both pages share same components (Pipeline, Timeline, ProposalReviewList)
- Separate concerns: Documents page = doc management, Workflows page = processing

frontend/src/App.jsx

@@ -15,6 +15,7 @@ import Knowledge from "./pages/Knowledge";
 import KnowledgeDetail from "./pages/KnowledgeDetail";
 import Search from "./pages/Search";
 import Workflows from "./pages/Workflows";
+import WorkflowDetail from "./pages/WorkflowDetail";
 import Activity from "./pages/Activity";
 import Settings from "./pages/Settings";
 
@@ -37,6 +38,7 @@ export default function App() {
                     <Route path="/knowledge/:itemId" element={<KnowledgeDetail />} />
                     <Route path="/search" element={<Search />} />
                     <Route path="/workflows" element={<Workflows />} />
+                    <Route path="/workflows/:workflowId" element={<WorkflowDetail />} />
                     <Route path="/activity" element={<Activity />} />
                     <Route path="/settings" element={<Settings />} />
                 </Route>

frontend/src/pages/WorkflowDetail.css

@@ -0,0 +1,81 @@
+.dw-wfdetail__back {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    background: none;
+    border: none;
+    color: var(--color-accent-text);
+    font-size: var(--text-sm);
+    cursor: pointer;
+    padding: 0;
+    margin-bottom: var(--space-3);
+}
+
+.dw-wfdetail__back:hover {
+    text-decoration: underline;
+}
+
+.dw-wfdetail__status-message {
+    font-size: var(--text-sm);
+    color: var(--color-text-secondary);
+    margin: 0 0 var(--space-3);
+}
+
+.dw-wfdetail__meta {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: var(--space-2) var(--space-4);
+    font-size: var(--text-sm);
+}
+
+.dw-wfdetail__meta dt {
+    color: var(--color-text-muted);
+}
+
+.dw-wfdetail__why {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+}
+
+.dw-wfdetail__why-item {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+    padding: var(--space-3);
+    background: var(--color-surface-hover);
+    border-radius: var(--radius-md);
+    border-left: 3px solid var(--color-warning);
+}
+
+.dw-wfdetail__why-badge {
+    flex-shrink: 0;
+    font-size: 10px;
+    font-weight: 700;
+    padding: 2px 6px;
+    border-radius: var(--radius-sm);
+    text-transform: uppercase;
+}
+
+.dw-wfdetail__why-badge--fail {
+    background: var(--color-danger-soft);
+    color: var(--color-danger);
+}
+
+.dw-wfdetail__why-badge--warning {
+    background: var(--color-warning-soft);
+    color: var(--color-warning);
+}
+
+.dw-wfdetail__why-rule {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: var(--color-text-primary);
+    margin: 0;
+}
+
+.dw-wfdetail__why-msg {
+    font-size: var(--text-sm);
+    color: var(--color-text-secondary);
+    margin: var(--space-1) 0 0;
+}

frontend/src/pages/WorkflowDetail.jsx

@@ -0,0 +1,215 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { getWorkflow } from "../api/workflows";
+import { getWorkflowMetrics } from "../api/metrics";
+import { listPendingProposals } from "../api/proposals";
+import { WorkflowStatusBadge } from "../components/workflow/WorkflowStatusBadge";
+import { WorkflowPipeline } from "../components/workflow/WorkflowPipeline";
+import { WorkflowTimeline } from "../components/workflow/WorkflowTimeline";
+import { ProposalReviewList } from "../components/proposals/ProposalReviewList";
+import { Card, CardHeader, CardBody, LoadingState, EmptyState, Glossary } from "../components/ui";
+import { GLOSSARY } from "../utils/labels";
+import "./WorkflowDetail.css";
+
+const ACTIVE_STATUSES = new Set(["PENDING", "RUNNING"]);
+const POLL_INTERVAL_MS = 3000;
+
+const STATUS_MESSAGES = {
+    PENDING: "This workflow is queued and will begin shortly.",
+    RUNNING: "The document is being processed. Knowledge extraction and reconciliation are in progress.",
+    WAITING_FOR_REVIEW: "Human review required. Please review the proposals below.",
+    COMPLETED: "This workflow has finished. All knowledge has been committed.",
+    FAILED: "This workflow run ended in a failed state.",
+    CANCELLED: "This workflow run was cancelled.",
+};
+
+export default function WorkflowDetail() {
+    const { workflowId } = useParams();
+    const navigate = useNavigate();
+    const [workflow, setWorkflow] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [metrics, setMetrics] = useState(null);
+    const [timelineProposals, setTimelineProposals] = useState([]);
+    const pollRef = useRef(null);
+
+    const fetchWorkflow = useCallback(async () => {
+        if (!workflowId) return;
+        try {
+            const result = await getWorkflow(workflowId);
+            if (result?.detail) {
+                setError(result.detail);
+                setWorkflow(null);
+            } else {
+                setWorkflow(result);
+                setError(null);
+                if (result.status && !ACTIVE_STATUSES.has(result.status)) {
+                    const m = await getWorkflowMetrics(workflowId);
+                    if (m && !m.detail) setMetrics(m);
+                }
+                if (result.workspace_id && result.document_version_id) {
+                    const props = await listPendingProposals(result.workspace_id, result.document_version_id);
+                    if (Array.isArray(props)) setTimelineProposals(props);
+                }
+            }
+        } catch {
+            setError("Couldn't load workflow.");
+        } finally {
+            setLoading(false);
+        }
+    }, [workflowId]);
+
+    useEffect(() => { setLoading(true); fetchWorkflow(); }, [fetchWorkflow]);
+
+    useEffect(() => {
+        if (!workflow) return;
+        if (ACTIVE_STATUSES.has(workflow.status)) {
+            pollRef.current = setTimeout(fetchWorkflow, POLL_INTERVAL_MS);
+        }
+        return () => { if (pollRef.current) clearTimeout(pollRef.current); };
+    }, [workflow, fetchWorkflow]);
+
+    if (!workflowId) return <EmptyState title="No workflow selected" />;
+    if (loading) return <LoadingState label="Loading workflow…" />;
+    if (error) return <EmptyState title="Error" description={error} />;
+    if (!workflow) return <EmptyState title="Workflow not found" />;
+
+    return (
+        <div className="dw-page">
+            <button className="dw-wfdetail__back" onClick={() => navigate("/workflows")}>
+                ← Workflows
+            </button>
+            <header className="dw-page__header">
+                <h1>{workflow.filename || "Workflow"}</h1>
+            </header>
+
+            <Glossary terms={GLOSSARY.workflows} />
+
+            <Card>
+                <CardHeader
+                    title="Workflow status"
+                    action={<WorkflowStatusBadge status={workflow.status} />}
+                />
+                <CardBody>
+                    <WorkflowPipeline
+                        currentNode={workflow.current_node}
+                        workflowStatus={workflow.status}
+                    />
+                    <p className="dw-wfdetail__status-message">
+                        {STATUS_MESSAGES[workflow.status] || ""}
+                    </p>
+                    <dl className="dw-wfdetail__meta">
+                        <dt>Started</dt>
+                        <dd>{new Date(workflow.started_at).toLocaleString()}</dd>
+                        <dt>Completed</dt>
+                        <dd>{workflow.completed_at ? new Date(workflow.completed_at).toLocaleString() : "—"}</dd>
+                        <dt>Document</dt>
+                        <dd>{workflow.filename || "—"}</dd>
+                    </dl>
+                </CardBody>
+            </Card>
+
+            {workflow.status === "WAITING_FOR_REVIEW" && workflow.validation_results && (
+                <Card>
+                    <CardHeader title="Why is this waiting?" />
+                    <CardBody>
+                        <div className="dw-wfdetail__why">
+                            {workflow.validation_results
+                                .filter((r) => r.status === "FAIL" || r.status === "WARNING")
+                                .map((r, i) => (
+                                    <div key={i} className="dw-wfdetail__why-item">
+                                        <span className={`dw-wfdetail__why-badge dw-wfdetail__why-badge--${r.status.toLowerCase()}`}>
+                                            {r.status}
+                                        </span>
+                                        <div>
+                                            <p className="dw-wfdetail__why-rule">{r.rule_name || "Validation Rule"}</p>
+                                            <p className="dw-wfdetail__why-msg">{r.message}</p>
+                                        </div>
+                                    </div>
+                                ))}
+                        </div>
+                    </CardBody>
+                </Card>
+            )}
+
+            <Card>
+                <CardHeader title="Event timeline" />
+                <CardBody>
+                    <WorkflowTimeline workflow={workflow} proposals={timelineProposals} />
+                </CardBody>
+            </Card>
+
+            {workflow.status === "WAITING_FOR_REVIEW" && (
+                <Card>
+                    <CardHeader
+                        title="Pending review"
+                        subtitle="This workflow is paused until these proposals are approved or rejected."
+                    />
+                    <CardBody>
+                        <ProposalReviewList
+                            workspaceId={workflow.workspace_id}
+                            documentVersionId={workflow.document_version_id}
+                            onDecision={fetchWorkflow}
+                        />
+                    </CardBody>
+                </Card>
+            )}
+
+            {metrics && metrics.stages && metrics.stages.length > 0 && (
+                <Card>
+                    <CardHeader title="Run cost and timing" />
+                    <CardBody>
+                        <div className="dw-metrics">
+                            <div className="dw-metrics__summary">
+                                {metrics.total_elapsed_ms != null && (
+                                    <div className="dw-metrics__stat">
+                                        <span className="dw-metrics__stat-value">
+                                            {metrics.total_elapsed_ms > 1000
+                                                ? `${(metrics.total_elapsed_ms / 1000).toFixed(1)}s`
+                                                : `${Math.round(metrics.total_elapsed_ms)}ms`}
+                                        </span>
+                                        <span className="dw-metrics__stat-label">Total time</span>
+                                    </div>
+                                )}
+                                {metrics.total_tokens > 0 && (
+                                    <div className="dw-metrics__stat">
+                                        <span className="dw-metrics__stat-value">{metrics.total_tokens.toLocaleString()}</span>
+                                        <span className="dw-metrics__stat-label">Tokens used</span>
+                                    </div>
+                                )}
+                                {metrics.total_llm_calls > 0 && (
+                                    <div className="dw-metrics__stat">
+                                        <span className="dw-metrics__stat-value">{metrics.total_llm_calls}</span>
+                                        <span className="dw-metrics__stat-label">LLM calls</span>
+                                    </div>
+                                )}
+                            </div>
+                            <div className="dw-metrics__stages">
+                                <p className="dw-metrics__stages-title">Time per stage</p>
+                                {metrics.stages.map((stage) => (
+                                    <div key={stage.name} className="dw-metrics__stage-row">
+                                        <span className="dw-metrics__stage-name">{stage.name}</span>
+                                        <div className="dw-metrics__stage-bar-track">
+                                            <div
+                                                className="dw-metrics__stage-bar-fill"
+                                                style={{ width: `${Math.min(100, (stage.elapsed_ms / (metrics.total_elapsed_ms || 1)) * 100)}%` }}
+                                            />
+                                        </div>
+                                        <span className="dw-metrics__stage-time">
+                                            {stage.elapsed_ms > 1000 ? `${(stage.elapsed_ms / 1000).toFixed(1)}s` : `${Math.round(stage.elapsed_ms)}ms`}
+                                        </span>
+                                        {stage.input_tokens > 0 && (
+                                            <span className="dw-metrics__stage-tokens">
+                                                {(stage.input_tokens + stage.output_tokens).toLocaleString()} tok
+                                            </span>
+                                        )}
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </CardBody>
+                </Card>
+            )}
+        </div>
+    );
+}

frontend/src/pages/Workflows.jsx

@@ -62,9 +62,7 @@ export default function Workflows() {
                             key={w.id}
                             interactive
                             onClick={() => {
-                                if (w.document_id) {
-                                    navigate(`/documents/${w.document_id}/${w.id}`);
-                                }
+                                navigate(`/workflows/${w.workflow_id}`);
                             }}
                         >
                             <CardBody>