diff --git a/app/(main)/assessment/results/[runId]/page.tsx b/app/(main)/assessment/results/[runId]/page.tsx
index 12242bc2..410f81d4 100644
--- a/app/(main)/assessment/results/[runId]/page.tsx
+++ b/app/(main)/assessment/results/[runId]/page.tsx
@@ -1,21 +1,22 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { useParams, useSearchParams } from "next/navigation";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
 import dynamic from "next/dynamic";
 import { Loader } from "@/app/components/ui";
-import { useToast } from "@/app/hooks/useToast";
-import { useAuth } from "@/app/lib/context/AuthContext";
-import { apiFetch } from "@/app/lib/apiClient";
-import { jsonResultsToTableData } from "@/app/lib/assessment/results";
-import { SPREADSHEET_PREVIEW_ROW_LIMIT } from "@/app/lib/assessment/constants";
+import ResultsToolbar from "@/app/components/assessment/results/ResultsToolbar";
+import { useRunResults } from "@/app/hooks";
+import type { AssessmentMethodValue } from "@/app/lib/types/assessment";
+import {
+  downloadCsv,
+  jsonResultsToTableData,
+} from "@/app/lib/assessment/results";
 
 const SpreadsheetView = dynamic(
   () => import("@/app/components/assessment/SpreadsheetView"),
   {
     ssr: false,
     loading: () => (
-      <div className="w-full h-screen flex items-center justify-center bg-bg-primary">
+      <div className="flex h-full w-full items-center justify-center bg-bg-primary">
         <Loader size="lg" message="Loading spreadsheet..." />
       </div>
     ),
@@ -25,85 +26,45 @@ const SpreadsheetView = dynamic(
 export default function AssessmentResultsPage() {
   const params = useParams<{ runId: string }>();
   const searchParams = useSearchParams();
-  const toast = useToast();
-  const { apiKeys, isAuthenticated, isHydrated } = useAuth();
-  const apiKey = apiKeys[0]?.key ?? "";
+  const router = useRouter();
 
-  const [headers, setHeaders] = useState<string[] | null>(null);
-  const [rows, setRows] = useState<string[][] | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  const runId = Number(params?.runId);
-  const title = searchParams.get("title") ?? `Run ${runId}`;
-
-  useEffect(() => {
-    if (!isHydrated) return;
-    if (!isAuthenticated) {
-      setError("You must be signed in to view this run.");
-      return;
-    }
-    if (!Number.isFinite(runId) || runId <= 0) {
-      setError("Invalid run id.");
-      return;
-    }
-
-    let cancelled = false;
-    (async () => {
-      try {
-        const json = await apiFetch<
-          { data?: Record<string, unknown>[] } | Record<string, unknown>[]
-        >(`/api/assessment/runs/${runId}/results?export_format=json`, apiKey);
-        const results: Record<string, unknown>[] = Array.isArray(json)
-          ? json
-          : json.data || [];
-        const table = jsonResultsToTableData(results, {
-          rowLimit: SPREADSHEET_PREVIEW_ROW_LIMIT,
-        });
-        if (cancelled) return;
-        if (results.length > SPREADSHEET_PREVIEW_ROW_LIMIT) {
-          toast.warning(
-            `Preview capped at ${SPREADSHEET_PREVIEW_ROW_LIMIT} rows. Download CSV for full data.`,
-          );
-        }
-        setHeaders(table.headers);
-        setRows(table.rows);
-      } catch (err) {
-        if (cancelled) return;
-        const msg =
-          err instanceof Error ? err.message : "Failed to load results";
-        setError(msg);
-        toast.error(msg);
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [apiKey, isAuthenticated, isHydrated, runId, toast]);
+  const assessmentId = params.runId;
+  const method =
+    (searchParams.get("method") as AssessmentMethodValue | null) ?? "BATCH";
+  const title = searchParams.get("title") ?? "Run results";
+  const { results, headers, rows, isLoading, error } = useRunResults(
+    assessmentId ? { assessment_id: assessmentId, method } : null,
+  );
 
   if (error) {
     return (
-      <div className="w-full h-screen flex items-center justify-center bg-bg-primary">
+      <div className="flex h-screen w-full items-center justify-center bg-bg-primary">
         <p className="text-sm text-text-secondary">{error}</p>
       </div>
     );
   }
 
-  if (!headers || !rows) {
+  if (isLoading) {
     return (
-      <div className="w-full h-screen flex items-center justify-center bg-bg-primary">
+      <div className="flex h-screen w-full items-center justify-center bg-bg-primary">
         <Loader size="lg" message="Loading results..." />
       </div>
     );
   }
 
   return (
-    <SpreadsheetView
-      runId={runId}
-      title={title}
-      subtitle={`${rows.length} rows · ${headers.length} columns`}
-      headers={headers}
-      rows={rows}
-    />
+    <div className="flex h-screen w-full flex-col bg-bg-primary">
+      <ResultsToolbar
+        title={title}
+        subtitle={`${rows.length} rows · ${headers.length} columns`}
+        onBack={() => router.push("/assessment")}
+        onDownload={() => {
+          const full = jsonResultsToTableData(results);
+          downloadCsv(title, [full.headers, ...full.rows]);
+        }}
+      />
+
+      <SpreadsheetView runId={assessmentId} headers={headers} rows={rows} />
+    </div>
   );
 }
diff --git a/app/(main)/settings/credentials/page.tsx b/app/(main)/settings/credentials/page.tsx
index 3f40730b..c464ea3b 100644
--- a/app/(main)/settings/credentials/page.tsx
+++ b/app/(main)/settings/credentials/page.tsx
@@ -17,7 +17,12 @@ import {
   Credential,
   ProviderDef,
 } from "@/app/lib/types/credentials";
-import { getExistingForProvider } from "@/app/lib/utils";
+import {
+  buildCredentialPayload,
+  getExistingForProvider,
+  missingCredentialFields,
+  populateCredentialForm,
+} from "@/app/lib/utils";
 import ProviderSidebar from "@/app/components/settings/ProviderSidebar";
 import CredentialForm from "@/app/components/settings/credentials/CredentialForm";
 import { apiFetch } from "@/app/lib/apiClient";
@@ -46,23 +51,9 @@ export default function CredentialsPage() {
   // Re-populate form when provider or credentials change
   useEffect(() => {
     const existing = getExistingForProvider(selectedProvider, credentials);
-    if (existing) {
-      setExistingCredential(existing);
-      setIsActive(existing.is_active);
-      const populated: Record<string, string> = {};
-      selectedProvider.fields.forEach((f) => {
-        populated[f.key] = existing.credential[f.key] || "";
-      });
-      setFormValues(populated);
-    } else {
-      setExistingCredential(null);
-      setIsActive(true);
-      const blank: Record<string, string> = {};
-      selectedProvider.fields.forEach((f) => {
-        blank[f.key] = "";
-      });
-      setFormValues(blank);
-    }
+    setExistingCredential(existing);
+    setIsActive(existing ? existing.is_active : true);
+    setFormValues(populateCredentialForm(selectedProvider, existing));
   }, [selectedProvider, credentials]);
 
   const loadCredentials = async () => {
@@ -80,45 +71,47 @@ export default function CredentialsPage() {
     }
   };
 
-  const buildCredentialBody = (isUpdate: boolean) => {
-    const innerPayload: Record<string, string> = {};
-    selectedProvider.fields.forEach((f) => {
-      innerPayload[f.key] = formValues[f.key].trim();
-    });
-    return {
-      provider: selectedProvider.credentialKey,
-      is_active: isActive,
-      credential: isUpdate
-        ? innerPayload
-        : { [selectedProvider.credentialKey]: innerPayload },
-    };
-  };
-
   const handleSave = async () => {
     if (!isAuthenticated) {
       toast.error("Please add an API key in Keystore first");
       return;
     }
-    const missing = selectedProvider.fields.filter(
-      (f) => !formValues[f.key]?.trim(),
-    );
+    const missing = missingCredentialFields(selectedProvider, formValues);
     if (missing.length > 0) {
       toast.error(`Please fill in: ${missing.map((f) => f.label).join(", ")}`);
       return;
     }
 
+    const built = buildCredentialPayload(selectedProvider, formValues);
+    if (built.error) {
+      toast.error(built.error);
+      return;
+    }
+    if (Object.keys(built.payload).length === 0) {
+      toast.error("No changes to save");
+      return;
+    }
+
     setIsSaving(true);
     try {
       if (existingCredential) {
         await apiFetch("/api/credentials", apiKeys[0]?.key ?? "", {
           method: "PATCH",
-          body: JSON.stringify(buildCredentialBody(true)),
+          body: JSON.stringify({
+            provider: selectedProvider.credentialKey,
+            is_active: isActive,
+            credential: built.payload,
+          }),
         });
         toast.success(`${selectedProvider.name} credentials updated`);
       } else {
         await apiFetch("/api/credentials", apiKeys[0]?.key ?? "", {
           method: "POST",
-          body: JSON.stringify(buildCredentialBody(false)),
+          body: JSON.stringify({
+            provider: selectedProvider.credentialKey,
+            is_active: isActive,
+            credential: { [selectedProvider.credentialKey]: built.payload },
+          }),
         });
         toast.success(`${selectedProvider.name} credentials saved`);
       }
@@ -134,21 +127,8 @@ export default function CredentialsPage() {
 
   const handleCancel = () => {
     const existing = getExistingForProvider(selectedProvider, credentials);
-    if (existing) {
-      setIsActive(existing.is_active);
-      const populated: Record<string, string> = {};
-      selectedProvider.fields.forEach((f) => {
-        populated[f.key] = existing.credential[f.key] || "";
-      });
-      setFormValues(populated);
-    } else {
-      const blank: Record<string, string> = {};
-      selectedProvider.fields.forEach((f) => {
-        blank[f.key] = "";
-      });
-      setFormValues(blank);
-      setIsActive(true);
-    }
+    setIsActive(existing ? existing.is_active : true);
+    setFormValues(populateCredentialForm(selectedProvider, existing));
   };
 
   const handleDelete = async () => {
diff --git a/app/api/assessment/batch/[assessment_id]/route.ts b/app/api/assessment/batch/[assessment_id]/route.ts
new file mode 100644
index 00000000..0ddf3074
--- /dev/null
+++ b/app/api/assessment/batch/[assessment_id]/route.ts
@@ -0,0 +1,19 @@
+import { NextRequest } from "next/server";
+import { proxyErrorResponse, proxyJsonResponse } from "@/app/api/_routeProxy";
+import type { RouteContext } from "@/app/lib/types/assessment";
+
+export async function GET(
+  request: NextRequest,
+  context: RouteContext<"assessment_id">,
+) {
+  try {
+    const { assessment_id } = await context.params;
+    return await proxyJsonResponse(
+      request,
+      `/api/v1/assessments/${assessment_id}`,
+      { method: "GET" },
+    );
+  } catch (error: unknown) {
+    return proxyErrorResponse("Assessment batch detail proxy error:", error);
+  }
+}
diff --git a/app/api/assessment/batch/route.ts b/app/api/assessment/batch/route.ts
new file mode 100644
index 00000000..c324e0ef
--- /dev/null
+++ b/app/api/assessment/batch/route.ts
@@ -0,0 +1,33 @@
+import { NextRequest } from "next/server";
+import {
+  proxyErrorResponse,
+  proxyJsonResponse,
+  withQueryParams,
+} from "@/app/api/_routeProxy";
+
+const BATCH_ENDPOINT = "/api/v1/assessments";
+
+export async function GET(request: NextRequest) {
+  try {
+    const queryParams = new URLSearchParams(request.nextUrl.searchParams);
+    return await proxyJsonResponse(
+      request,
+      withQueryParams(BATCH_ENDPOINT, queryParams),
+      { method: "GET" },
+    );
+  } catch (error: unknown) {
+    return proxyErrorResponse("Assessment batch list proxy error:", error);
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    return await proxyJsonResponse(request, BATCH_ENDPOINT, {
+      method: "POST",
+      body: JSON.stringify(body),
+    });
+  } catch (error: unknown) {
+    return proxyErrorResponse("Assessment batch create proxy error:", error);
+  }
+}
diff --git a/app/components/assessment/AssessmentChildRunCard.tsx b/app/components/assessment/AssessmentChildRunCard.tsx
deleted file mode 100644
index 2faa07d1..00000000
--- a/app/components/assessment/AssessmentChildRunCard.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-"use client";
-
-import { useToast } from "@/app/hooks/useToast";
-import PostProcessingPanel from "./PostProcessingPanel";
-import ChildRunStageProgress from "./ChildRunStageProgress";
-import ChildRunActions from "./ChildRunActions";
-import {
-  getStageProgress,
-  isCompletedStatus,
-  isFailedStatus,
-} from "@/app/lib/assessment/results";
-import { formatRelativeTime } from "@/app/lib/utils";
-import type {
-  AssessmentChildRun,
-  ConfigRunDetail,
-  ExportFormat,
-  PostProcessingConfig,
-} from "@/app/lib/types/assessment";
-
-interface AssessmentChildRunCardProps {
-  childRun: AssessmentChildRun;
-  configDetailsByKey: Record<string, ConfigRunDetail>;
-  configLoadingKeys: Record<string, boolean>;
-  configErrorKeys: Record<string, string>;
-  rerunningId: number | null;
-  resumingId: number | null;
-  downloadingId: string | null;
-  onPreview: (runId: number, label: string) => void;
-  onRunDownload: (runId: number, format: ExportFormat) => void;
-  onResume: (run: AssessmentChildRun) => void;
-  onRerun: (run: AssessmentChildRun) => void;
-  onFetchRunColumns: (runId: number) => Promise<string[]>;
-  onSavePostProcessing: (
-    runId: number,
-    config: PostProcessingConfig | null,
-  ) => Promise<void>;
-}
-
-export default function AssessmentChildRunCard({
-  childRun,
-  configDetailsByKey,
-  configLoadingKeys,
-  configErrorKeys,
-  rerunningId,
-  resumingId,
-  downloadingId,
-  onPreview,
-  onRunDownload,
-  onResume,
-  onRerun,
-  onFetchRunColumns,
-  onSavePostProcessing,
-}: AssessmentChildRunCardProps) {
-  const toast = useToast();
-
-  const isFailedChild = isFailedStatus(childRun.status);
-  const isCompletedChild = isCompletedStatus(childRun.status);
-  const stageProgress = getStageProgress(childRun);
-  const isRerunning = rerunningId === childRun.id;
-  const isResuming = resumingId === childRun.id;
-  const configKey =
-    childRun.config_id && childRun.config_version
-      ? `${childRun.config_id}:${childRun.config_version}`
-      : null;
-  const configDetail = configKey ? configDetailsByKey[configKey] : null;
-  const isConfigLoading = configKey
-    ? Boolean(configLoadingKeys[configKey])
-    : false;
-  const configError = configKey ? configErrorKeys[configKey] : null;
-  const fallbackName = childRun.config_id
-    ? `Config ${childRun.config_id.slice(0, 8)}`
-    : "Configuration";
-  const configName = configDetail?.name || fallbackName;
-  const previewLabel = `${configName}${childRun.config_version ? ` v${childRun.config_version}` : ""}`;
-
-  return (
-    <div>
-      <div className="rounded-xl border border-border bg-bg-secondary p-4">
-        <div className="flex items-start justify-between gap-3">
-          <div className="min-w-0 flex-1">
-            <div className="flex flex-wrap items-center gap-2">
-              <span className="text-sm font-semibold text-text-primary">
-                {configName}
-              </span>
-              {childRun.config_version !== null && (
-                <span className="rounded-full bg-bg-primary px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-text-secondary">
-                  v{childRun.config_version}
-                </span>
-              )}
-              {configDetail?.provider && configDetail?.model && (
-                <span className="rounded-full bg-bg-primary px-2 py-0.5 text-[10px] font-medium text-text-secondary">
-                  {configDetail.provider}/{configDetail.model}
-                </span>
-              )}
-            </div>
-
-            <div className="mt-1 text-sm text-text-secondary">
-              {isConfigLoading
-                ? "Loading configuration details..."
-                : configDetail?.description ||
-                  configDetail?.commitMessage ||
-                  "No description available for this configuration."}
-            </div>
-
-            <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-text-secondary">
-              <span>{childRun.total_items} items</span>
-              {childRun.updated_at && (
-                <span>{formatRelativeTime(childRun.updated_at)}</span>
-              )}
-              {childRun.config_id && (
-                <span className="font-mono">
-                  ID {childRun.config_id.slice(0, 8)}
-                </span>
-              )}
-            </div>
-            {childRun.prefilter_total_rows != null && (
-              <div className="mt-1.5 text-xs text-text-secondary">
-                Prefilter: {childRun.prefilter_total_passed ?? 0}/
-                {childRun.prefilter_total_rows} passed
-                {childRun.prefilter_total_rejected != null &&
-                  childRun.prefilter_total_rejected > 0 && (
-                    <span className="ml-1 text-status-warning-text">
-                      · {childRun.prefilter_total_rejected} rejected
-                    </span>
-                  )}
-              </div>
-            )}
-
-            <ChildRunStageProgress stages={stageProgress} />
-
-            {configError && (
-              <div className="mt-2 text-xs text-status-error-text">
-                {configError}
-              </div>
-            )}
-            {isFailedChild && childRun.error_message && (
-              <div className="mt-2 text-xs text-status-error-text">
-                {childRun.error_message}
-              </div>
-            )}
-          </div>
-
-          <ChildRunActions
-            childRun={childRun}
-            previewLabel={previewLabel}
-            isResuming={isResuming}
-            isRerunning={isRerunning}
-            downloadingId={downloadingId}
-            onPreview={onPreview}
-            onRunDownload={onRunDownload}
-            onResume={onResume}
-            onRerun={onRerun}
-          />
-        </div>
-      </div>
-      {isCompletedChild && (
-        <PostProcessingPanel
-          availableColumns={[]}
-          initialConfig={childRun.post_processing_config ?? null}
-          fetchColumns={() => onFetchRunColumns(childRun.id)}
-          onSave={async (cfg: PostProcessingConfig) => {
-            await onSavePostProcessing(childRun.id, cfg);
-            toast.success(
-              "Post-processing saved. Re-open preview to see updated results.",
-            );
-          }}
-        />
-      )}
-    </div>
-  );
-}
diff --git a/app/components/assessment/ChildRunActions.tsx b/app/components/assessment/ChildRunActions.tsx
deleted file mode 100644
index 53289a49..00000000
--- a/app/components/assessment/ChildRunActions.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-"use client";
-
-import { Button } from "@/app/components/ui";
-import { EyeIcon } from "@/app/components/icons";
-import DownloadDropdown from "./DownloadDropdown";
-import {
-  formatStatusLabel,
-  getResultTone,
-  hasViewableResults,
-  isCompletedStatus,
-  isFailedStatus,
-} from "@/app/lib/assessment/results";
-import { STATUS_BADGE_CLASSES } from "@/app/lib/assessment/constants";
-import type {
-  AssessmentChildRun,
-  ExportFormat,
-} from "@/app/lib/types/assessment";
-
-interface ChildRunActionsProps {
-  childRun: AssessmentChildRun;
-  previewLabel: string;
-  isResuming: boolean;
-  isRerunning: boolean;
-  downloadingId: string | null;
-  onPreview: (runId: number, label: string) => void;
-  onRunDownload: (runId: number, format: ExportFormat) => void;
-  onResume: (run: AssessmentChildRun) => void;
-  onRerun: (run: AssessmentChildRun) => void;
-}
-
-export default function ChildRunActions({
-  childRun,
-  previewLabel,
-  isResuming,
-  isRerunning,
-  downloadingId,
-  onPreview,
-  onRunDownload,
-  onResume,
-  onRerun,
-}: ChildRunActionsProps) {
-  const childStatusClass = STATUS_BADGE_CLASSES[getResultTone(childRun.status)];
-  const isFailedChild = isFailedStatus(childRun.status);
-  const isCompletedChild = isCompletedStatus(childRun.status);
-  const canPreview = hasViewableResults(childRun);
-  const canResume = Boolean(childRun.stage);
-
-  return (
-    <div className="flex items-center gap-2 flex-shrink-0">
-      <span
-        className={`rounded-md px-2.5 py-1 text-xs font-bold uppercase tracking-wide ${childStatusClass}`}
-      >
-        {formatStatusLabel(childRun.status)}
-      </span>
-      {canPreview && (
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          onClick={() => onPreview(childRun.id, previewLabel)}
-          className="!rounded-md !px-2.5 !py-1.5 !text-xs"
-        >
-          <EyeIcon className="w-3.5 h-3.5" />
-          Preview
-        </Button>
-      )}
-      {isCompletedChild && (
-        <DownloadDropdown
-          onDownload={(fmt) => onRunDownload(childRun.id, fmt)}
-          loading={downloadingId === `run-${childRun.id}`}
-        />
-      )}
-      {isFailedChild && canResume && (
-        <Button
-          type="button"
-          size="sm"
-          onClick={() => onResume(childRun)}
-          disabled={isResuming || isRerunning}
-          className="!rounded-lg !px-3 !py-1.5 !text-xs"
-        >
-          {isResuming ? "Resuming..." : "Retry from failed stage"}
-        </Button>
-      )}
-      {isFailedChild && (
-        <Button
-          type="button"
-          size="sm"
-          variant="secondary"
-          onClick={() => onRerun(childRun)}
-          disabled={isRerunning || isResuming}
-          className="!rounded-lg !px-3 !py-1.5 !text-xs"
-        >
-          {isRerunning ? "Re-running..." : "Retry all"}
-        </Button>
-      )}
-    </div>
-  );
-}
diff --git a/app/components/assessment/ColumnMapperStep.tsx b/app/components/assessment/ColumnMapperStep.tsx
deleted file mode 100644
index fd29e869..00000000
--- a/app/components/assessment/ColumnMapperStep.tsx
+++ /dev/null
@@ -1,401 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { Button, Select } from "@/app/components/ui";
-import {
-  ASSESSMENT_ROLE_OPTION_MAP,
-  ASSESSMENT_ROLE_OPTIONS,
-  ATTACHMENT_FORMATS,
-} from "@/app/lib/assessment/constants";
-import type {
-  Attachment,
-  ColumnConfig,
-  ColumnRole,
-  ColumnMapperStepProps,
-} from "@/app/lib/types/assessment";
-import { buildColumnConfigs, colorMapping } from "@/app/lib/utils/assessment";
-
-export default function ColumnMapperStep({
-  columns,
-  columnMapping,
-  setColumnMapping,
-  onNext,
-  onBack,
-}: ColumnMapperStepProps) {
-  const [columnConfigs, setColumnConfigs] = useState<ColumnConfig[]>(() =>
-    buildColumnConfigs(columns, columnMapping),
-  );
-
-  useEffect(() => {
-    setColumnConfigs(buildColumnConfigs(columns, columnMapping));
-  }, [columns, columnMapping]);
-
-  const updateRole = (index: number, role: ColumnRole) => {
-    if (role === "ground_truth") {
-      return;
-    }
-
-    setColumnConfigs((prev) => {
-      const current = prev[index];
-      const next = [...prev];
-
-      if (role !== "attachment") {
-        next[index] = { role };
-        return next;
-      }
-
-      next[index] = {
-        role,
-        attachmentType: current?.attachmentType || "mixed",
-        attachmentFormat: current?.attachmentFormat || "url",
-      };
-      return next;
-    });
-  };
-
-  const updateAttachmentType = (
-    index: number,
-    type: "image" | "pdf" | "mixed",
-  ) => {
-    setColumnConfigs((prev) => {
-      const next = [...prev];
-      next[index] = {
-        ...prev[index],
-        role: "attachment",
-        attachmentType: type,
-        attachmentFormat: "url",
-      };
-      return next;
-    });
-  };
-
-  const updateAttachmentFormat = (index: number, format: string) => {
-    setColumnConfigs((prev) => {
-      const next = [...prev];
-      next[index] = {
-        ...prev[index],
-        role: "attachment",
-        attachmentFormat: format,
-      };
-      return next;
-    });
-  };
-
-  const patchAttachment = (index: number, patch: Partial<ColumnConfig>) => {
-    setColumnConfigs((prev) => {
-      const next = [...prev];
-      next[index] = { ...prev[index], role: "attachment", ...patch };
-      return next;
-    });
-  };
-
-  const handleNext = () => {
-    const textColumns: string[] = [];
-    const attachments: Attachment[] = [];
-
-    columnConfigs.forEach((config, index) => {
-      const column = columns[index];
-      if (!column) return;
-
-      if (config.role === "text") {
-        textColumns.push(column);
-      } else if (
-        config.role === "attachment" &&
-        config.attachmentType &&
-        config.attachmentFormat
-      ) {
-        const attachment: Attachment = {
-          column,
-          type: config.attachmentType,
-          format: config.attachmentFormat as Attachment["format"],
-        };
-        if (config.attachmentType === "mixed" && config.attachmentTypeColumn) {
-          const map: Record<string, string> = {};
-          const split = (s?: string) =>
-            (s || "")
-              .split(",")
-              .map((v) => v.trim())
-              .filter(Boolean);
-          split(config.attachmentImageValues).forEach(
-            (v) => (map[v] = "image"),
-          );
-          split(config.attachmentPdfValues).forEach((v) => (map[v] = "pdf"));
-          if (Object.keys(map).length > 0) {
-            attachment.type_column = config.attachmentTypeColumn;
-            attachment.type_value_map = map;
-          }
-        }
-        attachments.push(attachment);
-      }
-    });
-
-    setColumnMapping({ textColumns, attachments, groundTruthColumns: [] });
-    onNext();
-  };
-
-  const mappedCount = columnConfigs.filter(
-    (config) => config.role !== "unmapped",
-  ).length;
-  const hasMappedColumn = columnConfigs.some(
-    (config) => config.role === "text" || config.role === "attachment",
-  );
-
-  return (
-    <div className="flex h-full min-h-0 w-full flex-col">
-      <div className="mx-auto w-full max-w-3xl flex-1 space-y-5 pb-16">
-        <div className="flex items-start justify-between gap-4">
-          <div>
-            <h2 className="text-lg font-semibold text-text-primary">
-              Map Columns
-            </h2>
-            <p className="mt-1 text-sm text-text-secondary">
-              Choose a role for each column.
-            </p>
-          </div>
-          <div className="rounded-full bg-bg-secondary px-3 py-1 text-xs font-medium text-text-secondary">
-            {mappedCount}/{columns.length} mapped
-          </div>
-        </div>
-
-        {columns.length === 0 ? (
-          <div className="rounded-2xl border border-border bg-bg-primary px-6 py-10 text-center">
-            <p className="text-sm font-medium text-text-primary">
-              No columns found.
-            </p>
-            <p className="mt-1 text-sm text-text-secondary">
-              Go back and select a dataset first.
-            </p>
-          </div>
-        ) : (
-          <div className="overflow-hidden rounded-2xl border border-border bg-bg-primary">
-            {columns.map((column, index) => {
-              const config = columnConfigs[index] || {
-                role: "unmapped" as ColumnRole,
-              };
-              const activeOption =
-                ASSESSMENT_ROLE_OPTION_MAP[config.role] ||
-                ASSESSMENT_ROLE_OPTION_MAP.unmapped;
-              const roleVisuals = colorMapping(activeOption.value);
-
-              return (
-                <div
-                  key={index}
-                  className={`bg-bg-primary px-4 py-4 sm:px-5 ${
-                    index === 0 ? "" : "border-t border-border"
-                  }`}
-                >
-                  <div
-                    className={`flex flex-col gap-3 rounded-xl border px-3 py-3 ${roleVisuals.panelClass}`}
-                  >
-                    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-                      <div className="min-w-0 flex-1 sm:max-w-[50%]">
-                        <div className="flex items-start gap-2">
-                          <span
-                            className={`mt-1.5 h-2 w-2 shrink-0 rounded-full ${roleVisuals.dotClass}`}
-                          />
-                          <span className="min-w-0 wrap-break-word font-mono text-sm font-semibold text-text-primary">
-                            {column}
-                          </span>
-                        </div>
-                      </div>
-
-                      <div className="flex flex-wrap gap-2 sm:shrink-0">
-                        {ASSESSMENT_ROLE_OPTIONS.map((option) => {
-                          const isGroundTruth = option.value === "ground_truth";
-                          const isActive = config.role === option.value;
-                          return (
-                            <Button
-                              key={option.value}
-                              type="button"
-                              variant={isGroundTruth ? "ghost" : "outline"}
-                              size="sm"
-                              onClick={() => {
-                                if (!isGroundTruth) {
-                                  updateRole(index, option.value);
-                                }
-                              }}
-                              aria-disabled={isGroundTruth}
-                              title={
-                                isGroundTruth
-                                  ? "Ground Truth mapping is coming soon"
-                                  : undefined
-                              }
-                              className={`${
-                                isGroundTruth
-                                  ? "cursor-not-allowed! bg-transparent! hover:bg-transparent! text-text-secondary!"
-                                  : isActive
-                                    ? roleVisuals.activeButtonClass
-                                    : "bg-bg-primary! hover:bg-bg-secondary!"
-                              }`}
-                            >
-                              <span>{option.label}</span>
-                              {isGroundTruth && (
-                                <span className="rounded-full bg-bg-secondary px-1.5 py-0.5 text-[10px] font-medium text-text-secondary">
-                                  Soon
-                                </span>
-                              )}
-                            </Button>
-                          );
-                        })}
-                      </div>
-                    </div>
-
-                    {config.role === "attachment" && (
-                      <>
-                        <div className="flex flex-col gap-3 pt-1 sm:flex-row">
-                          <label className="flex-1">
-                            <span className="mb-1 block text-xs font-medium text-text-secondary">
-                              Attachment Type
-                            </span>
-                            <Select
-                              value={config.attachmentType || "mixed"}
-                              onChange={(event) =>
-                                updateAttachmentType(
-                                  index,
-                                  event.target.value as
-                                    | "image"
-                                    | "pdf"
-                                    | "mixed",
-                                )
-                              }
-                              options={[
-                                {
-                                  value: "mixed",
-                                  label: "Mixed (image or PDF)",
-                                },
-                                { value: "image", label: "Image" },
-                                { value: "pdf", label: "PDF" },
-                              ]}
-                              className="w-full cursor-pointer rounded-lg border border-border bg-bg-primary px-3 py-2 text-sm text-text-primary outline-none focus:ring-1"
-                            />
-                          </label>
-
-                          <label className="flex-1">
-                            <span className="mb-1 block text-xs font-medium text-text-secondary">
-                              Source
-                            </span>
-                            <Select
-                              value={config.attachmentFormat || "url"}
-                              onChange={(event) =>
-                                updateAttachmentFormat(
-                                  index,
-                                  event.target.value,
-                                )
-                              }
-                              options={ATTACHMENT_FORMATS[
-                                config.attachmentType || "mixed"
-                              ].map((format) => ({
-                                value: format,
-                                label: format,
-                              }))}
-                              className="w-full cursor-pointer rounded-lg border border-border bg-bg-primary px-3 py-2 text-sm text-text-primary outline-none focus:ring-1"
-                            />
-                          </label>
-                        </div>
-
-                        {(config.attachmentType || "mixed") === "mixed" && (
-                          <div className="mt-2 flex flex-col gap-2 rounded-lg border border-border bg-bg-primary/50 p-3">
-                            <span className="text-[11px] text-text-secondary">
-                              Mixed: pick a column whose value tells each
-                              row&apos;s type, then list which values mean image
-                              vs PDF.
-                            </span>
-                            <label className="block">
-                              <span className="mb-1 block text-xs font-medium text-text-secondary">
-                                Type column
-                              </span>
-                              <Select
-                                value={config.attachmentTypeColumn || ""}
-                                onChange={(event) =>
-                                  patchAttachment(index, {
-                                    attachmentTypeColumn:
-                                      event.target.value || undefined,
-                                  })
-                                }
-                                options={[
-                                  { value: "", label: "Select column…" },
-                                  ...columns
-                                    .filter((_, i) => i !== index)
-                                    .map((col) => ({ value: col, label: col })),
-                                ]}
-                                className="w-full cursor-pointer rounded-lg border border-border bg-bg-primary px-3 py-2 text-sm text-text-primary outline-none focus:ring-1"
-                              />
-                            </label>
-                            {config.attachmentTypeColumn && (
-                              <div className="flex flex-col gap-2 sm:flex-row">
-                                <label className="flex-1">
-                                  <span className="mb-1 block text-xs font-medium text-text-secondary">
-                                    Values meaning Image
-                                  </span>
-                                  <input
-                                    type="text"
-                                    value={config.attachmentImageValues || ""}
-                                    onChange={(event) =>
-                                      patchAttachment(index, {
-                                        attachmentImageValues:
-                                          event.target.value,
-                                      })
-                                    }
-                                    placeholder="e.g. image, photo, jpg"
-                                    className="w-full rounded-lg border border-border bg-bg-primary px-3 py-2 text-sm text-text-primary outline-none focus:ring-1"
-                                  />
-                                </label>
-                                <label className="flex-1">
-                                  <span className="mb-1 block text-xs font-medium text-text-secondary">
-                                    Values meaning PDF
-                                  </span>
-                                  <input
-                                    type="text"
-                                    value={config.attachmentPdfValues || ""}
-                                    onChange={(event) =>
-                                      patchAttachment(index, {
-                                        attachmentPdfValues: event.target.value,
-                                      })
-                                    }
-                                    placeholder="e.g. pdf, document, doc"
-                                    className="w-full rounded-lg border border-border bg-bg-primary px-3 py-2 text-sm text-text-primary outline-none focus:ring-1"
-                                  />
-                                </label>
-                              </div>
-                            )}
-                          </div>
-                        )}
-                      </>
-                    )}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
-
-      <div className="mt-auto sticky bottom-0 z-10 -mx-6 flex flex-col gap-3 border-t border-border bg-bg-secondary px-6 py-3 sm:flex-row sm:items-center sm:justify-between">
-        <div className="mx-auto flex w-full max-w-5xl flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <Button type="button" variant="outline" onClick={onBack}>
-            Back
-          </Button>
-
-          <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-            <span
-              className={`text-xs ${
-                hasMappedColumn ? "text-text-secondary" : "text-status-warning"
-              }`}
-            >
-              {hasMappedColumn
-                ? "Ready to continue."
-                : "Map at least one Text or Attachment column."}
-            </span>
-            <Button
-              type="button"
-              onClick={handleNext}
-              disabled={!hasMappedColumn}
-            >
-              Next: Eliminatory
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/app/components/assessment/ConfigPanel.tsx b/app/components/assessment/ConfigPanel.tsx
deleted file mode 100644
index ad3edabe..00000000
--- a/app/components/assessment/ConfigPanel.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-"use client";
-
-import { Button } from "@/app/components/ui";
-import { DatabaseIcon } from "@/app/components/icons";
-import { ASSESSMENT_CONFIG_STEPS } from "@/app/lib/assessment/constants";
-import type { ConfigPanelProps } from "@/app/lib/types/assessment";
-import ColumnMapperStep from "./ColumnMapperStep";
-import PrefilterStep from "./PrefilterStep";
-import PostProcessingStep from "./PostProcessingStep";
-import PromptAndConfigStep from "./PromptAndConfigStep";
-import ReviewStep from "./ReviewStep";
-import Stepper from "./Stepper";
-
-export default function ConfigPanel({
-  canSubmitAssessment,
-  columns,
-  columnMapping,
-  completedSteps,
-  configStep,
-  configs,
-  datasetId,
-  experimentName,
-  formState,
-  hasDataset,
-  isSubmitting,
-  prefilterConfig,
-  outputSchema,
-  systemInstruction,
-  promptTemplate,
-  postProcessingConfig,
-  setPostProcessingConfig,
-  sampleRow,
-  setActiveTabToDatasets,
-  setColumnMapping,
-  setConfigStep,
-  setConfigs,
-  setExperimentName,
-  setPrefilterConfig,
-  setOutputSchema,
-  setSystemInstruction,
-  setPromptTemplate,
-  submitBlockerMessage,
-  onSubmit,
-  onStepComplete,
-}: ConfigPanelProps) {
-  if (!hasDataset) {
-    return (
-      <div className="flex-1 flex items-center justify-center">
-        <div className="text-center">
-          <DatabaseIcon className="mx-auto mb-4 h-12 w-12 text-border" />
-          <p className="mb-1 text-sm font-medium text-text-primary">
-            No dataset selected
-          </p>
-          <p className="mb-4 text-xs text-text-secondary">
-            Select a dataset first from the Datasets tab
-          </p>
-          <Button type="button" onClick={setActiveTabToDatasets}>
-            Go to Datasets
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <Stepper
-        steps={ASSESSMENT_CONFIG_STEPS}
-        currentStep={configStep}
-        onStepClick={setConfigStep}
-        completedSteps={completedSteps}
-      />
-      <div className="flex min-h-0 flex-1 flex-col overflow-auto px-6 pt-6">
-        <div
-          className={
-            configStep === 1 ? "flex min-h-0 h-full flex-1 flex-col" : "hidden"
-          }
-        >
-          <ColumnMapperStep
-            columns={columns}
-            columnMapping={columnMapping}
-            setColumnMapping={setColumnMapping}
-            onNext={() => onStepComplete(1)}
-            onBack={setActiveTabToDatasets}
-          />
-        </div>
-
-        <div
-          className={
-            configStep === 2 ? "flex min-h-0 h-full flex-1 flex-col" : "hidden"
-          }
-        >
-          <PrefilterStep
-            key={datasetId ?? "no-dataset"}
-            columns={columnMapping.textColumns}
-            attachmentColumns={columnMapping.attachments.map((a) => a.column)}
-            prefilterConfig={prefilterConfig}
-            setPrefilterConfig={setPrefilterConfig}
-            onNext={() => onStepComplete(2)}
-            onBack={() => setConfigStep(1)}
-          />
-        </div>
-
-        <div
-          className={
-            configStep === 3 ? "flex min-h-0 h-full flex-1 flex-col" : "hidden"
-          }
-        >
-          <PromptAndConfigStep
-            textColumns={columnMapping.textColumns}
-            sampleRow={sampleRow}
-            systemInstruction={systemInstruction}
-            setSystemInstruction={setSystemInstruction}
-            promptTemplate={promptTemplate}
-            setPromptTemplate={setPromptTemplate}
-            configs={configs}
-            setConfigs={setConfigs}
-            outputSchema={outputSchema}
-            setOutputSchema={setOutputSchema}
-            onNext={() => onStepComplete(3)}
-            onBack={() => setConfigStep(2)}
-          />
-        </div>
-
-        <div
-          className={
-            configStep === 4 ? "flex min-h-0 h-full flex-1 flex-col" : "hidden"
-          }
-        >
-          <PostProcessingStep
-            postProcessingConfig={postProcessingConfig}
-            setPostProcessingConfig={setPostProcessingConfig}
-            columnMapping={columnMapping}
-            outputSchema={outputSchema}
-            onNext={() => onStepComplete(4)}
-            onBack={() => setConfigStep(3)}
-          />
-        </div>
-
-        <div
-          className={
-            configStep === 5 ? "flex min-h-0 h-full flex-1 flex-col" : "hidden"
-          }
-        >
-          <ReviewStep
-            formState={formState}
-            experimentName={experimentName}
-            setExperimentName={setExperimentName}
-            isSubmitting={isSubmitting}
-            canSubmit={canSubmitAssessment}
-            submitBlockerMessage={submitBlockerMessage}
-            onSubmit={onSubmit}
-            onBack={() => setConfigStep(4)}
-            onEditStep={setConfigStep}
-          />
-        </div>
-      </div>
-    </>
-  );
-}
diff --git a/app/components/assessment/DatasetsTab.tsx b/app/components/assessment/DatasetsTab.tsx
deleted file mode 100644
index b45fd705..00000000
--- a/app/components/assessment/DatasetsTab.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-"use client";
-
-import { Button, Modal } from "@/app/components/ui";
-import { useAssessmentDatasetsTab } from "@/app/hooks/useAssessmentDatasetsTab";
-import type { DatasetsTabProps } from "@/app/lib/types/assessment";
-import { WarningIcon } from "@/app/components/icons";
-import DataViewModal from "@/app/components/assessment/DataViewModal";
-import CreatePanel from "@/app/components/assessment/datasets/CreatePanel";
-import DatasetList from "@/app/components/assessment/datasets/DatasetList";
-
-export default function DatasetsTab(props: DatasetsTabProps) {
-  const { datasetId, onNext } = props;
-  const {
-    datasets,
-    isLoading,
-    isLoadingColumns,
-    viewingId,
-    canProceed,
-    datasetName,
-    datasetDescription,
-    uploadedFile,
-    isDragging,
-    isUploading,
-    fileInputRef,
-    viewModalData,
-    confirmDeleteId,
-    deletingId,
-    datasetPendingDelete,
-    setDatasetName,
-    setDatasetDescription,
-    setUploadedFile,
-    setIsDragging,
-    setConfirmDeleteId,
-    setViewModalData,
-    handleFileSelect,
-    resetForm,
-    handleCreateDataset,
-    handleDatasetSelect,
-    handleViewDataset,
-    handleDeleteDataset,
-    handleDrop,
-  } = useAssessmentDatasetsTab(props);
-
-  return (
-    <div className="flex min-h-0 flex-1 overflow-hidden">
-      <DatasetList
-        datasets={datasets}
-        datasetId={datasetId}
-        isLoading={isLoading}
-        isLoadingColumns={isLoadingColumns}
-        viewingId={viewingId}
-        canProceed={canProceed}
-        onSelectDataset={handleDatasetSelect}
-        onViewDataset={handleViewDataset}
-        onRequestDelete={setConfirmDeleteId}
-        onNext={onNext}
-      />
-
-      <CreatePanel
-        datasetName={datasetName}
-        datasetDescription={datasetDescription}
-        uploadedFile={uploadedFile}
-        isDragging={isDragging}
-        isUploading={isUploading}
-        fileInputRef={fileInputRef}
-        onDatasetNameChange={setDatasetName}
-        onDatasetDescriptionChange={setDatasetDescription}
-        onFileSelect={handleFileSelect}
-        onDragOver={(event) => {
-          event.preventDefault();
-          setIsDragging(true);
-        }}
-        onDragLeave={() => setIsDragging(false)}
-        onDrop={handleDrop}
-        onRemoveFile={() => {
-          setUploadedFile(null);
-          if (fileInputRef.current) fileInputRef.current.value = "";
-        }}
-        onResetForm={resetForm}
-        onCreateDataset={handleCreateDataset}
-      />
-
-      {viewModalData && (
-        <DataViewModal
-          title={viewModalData.name}
-          headers={viewModalData.headers}
-          rows={viewModalData.rows}
-          onClose={() => setViewModalData(null)}
-        />
-      )}
-
-      {confirmDeleteId !== null && (
-        <Modal
-          open
-          onClose={() => setConfirmDeleteId(null)}
-          maxWidth="max-w-md"
-          maxHeight="max-h-[90vh]"
-          showClose={false}
-        >
-          <div className="px-6 py-5">
-            <div className="flex items-start gap-3">
-              <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full">
-                <span className="text-status-error">
-                  <WarningIcon className="w-5 h-5" />
-                </span>
-              </div>
-              <div>
-                <h3 className="text-sm font-semibold text-text-primary">
-                  Delete dataset
-                </h3>
-                <p className="mt-1 text-sm text-text-secondary">
-                  Are you sure you want to delete
-                </p>
-                <p className="mt-1 break-all text-sm font-semibold text-text-primary">
-                  {datasetPendingDelete?.dataset_name}?
-                </p>
-                <p className="mt-2 text-sm text-text-secondary">
-                  This action cannot be undone.
-                </p>
-              </div>
-            </div>
-          </div>
-          <div className="flex items-center justify-end gap-3 border-t border-border px-6 py-4">
-            <Button
-              type="button"
-              variant="outline"
-              onClick={() => setConfirmDeleteId(null)}
-            >
-              Cancel
-            </Button>
-            <Button
-              type="button"
-              variant="danger"
-              onClick={() => {
-                void handleDeleteDataset(confirmDeleteId);
-                setConfirmDeleteId(null);
-              }}
-              disabled={deletingId === confirmDeleteId}
-            >
-              {deletingId === confirmDeleteId ? "Deleting..." : "Delete"}
-            </Button>
-          </div>
-        </Modal>
-      )}
-    </div>
-  );
-}
diff --git a/app/components/assessment/DownloadDropdown.tsx b/app/components/assessment/DownloadDropdown.tsx
deleted file mode 100644
index 201e4168..00000000
--- a/app/components/assessment/DownloadDropdown.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-"use client";
-
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { Button, Loader } from "@/app/components/ui";
-import { ChevronDownIcon, DownloadIcon } from "@/app/components/icons";
-import { DOWNLOAD_MENU_WIDTH } from "@/app/lib/assessment/constants";
-import type { ExportFormat } from "@/app/lib/types/assessment";
-
-interface DownloadDropdownProps {
-  onDownload: (format: ExportFormat) => void;
-  disabled?: boolean;
-  loading?: boolean;
-}
-
-export default function DownloadDropdown({
-  onDownload,
-  disabled,
-  loading,
-}: DownloadDropdownProps) {
-  const [open, setOpen] = useState(false);
-  const triggerRef = useRef<HTMLDivElement>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const [rect, setRect] = useState<{ top: number; left: number } | null>(null);
-
-  // Position the portal menu under the trigger, right-aligned.
-  useLayoutEffect(() => {
-    if (!open || !triggerRef.current) return;
-    const r = triggerRef.current.getBoundingClientRect();
-    setRect({ top: r.bottom + 4, left: r.right - DOWNLOAD_MENU_WIDTH });
-  }, [open]);
-
-  useEffect(() => {
-    if (!open) return;
-    const handlePointer = (e: MouseEvent) => {
-      const t = e.target as Node;
-      if (!triggerRef.current?.contains(t) && !menuRef.current?.contains(t)) {
-        setOpen(false);
-      }
-    };
-    // Fixed menu can't follow scroll — close instead of drift.
-    const handleScrollOrResize = () => setOpen(false);
-    document.addEventListener("mousedown", handlePointer);
-    window.addEventListener("scroll", handleScrollOrResize, true);
-    window.addEventListener("resize", handleScrollOrResize);
-    return () => {
-      document.removeEventListener("mousedown", handlePointer);
-      window.removeEventListener("scroll", handleScrollOrResize, true);
-      window.removeEventListener("resize", handleScrollOrResize);
-    };
-  }, [open]);
-
-  return (
-    <div ref={triggerRef} className="relative">
-      <Button
-        type="button"
-        variant="outline"
-        size="sm"
-        onClick={() => setOpen(!open)}
-        disabled={disabled || loading}
-        aria-label="Download results"
-        aria-expanded={open}
-      >
-        {loading ? (
-          <Loader size="sm" />
-        ) : (
-          <DownloadIcon className="h-3.5 w-3.5" />
-        )}
-        Export
-        <ChevronDownIcon className="h-3 w-3" />
-      </Button>
-      {open &&
-        rect &&
-        typeof document !== "undefined" &&
-        createPortal(
-          <div
-            ref={menuRef}
-            className="fixed z-50 rounded-md border border-border bg-bg-primary py-1 shadow-lg"
-            style={{
-              top: rect.top,
-              left: rect.left,
-              width: DOWNLOAD_MENU_WIDTH,
-            }}
-          >
-            {(
-              [
-                ["csv", "CSV File"],
-                ["xlsx", "Excel Sheet"],
-              ] as const
-            ).map(([fmt, label]) => (
-              <Button
-                key={fmt}
-                type="button"
-                variant="ghost"
-                size="sm"
-                fullWidth
-                onClick={() => {
-                  onDownload(fmt);
-                  setOpen(false);
-                }}
-                className="!justify-start !rounded-none !px-3 !py-2 !text-xs !text-text-primary"
-              >
-                {label}
-              </Button>
-            ))}
-          </div>,
-          document.body,
-        )}
-    </div>
-  );
-}
diff --git a/app/components/assessment/EvaluationsTab.tsx b/app/components/assessment/EvaluationsTab.tsx
deleted file mode 100644
index d9372758..00000000
--- a/app/components/assessment/EvaluationsTab.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-"use client";
-
-// Assessment Evaluations tab — shows run cards with status, retry, and CSV export.
-import { RunsListSkeleton } from "@/app/components";
-import { Button, Select } from "@/app/components/ui";
-import { useToast } from "@/app/hooks/useToast";
-import {
-  DatabaseIcon,
-  ClipboardIcon,
-  RefreshIcon,
-} from "@/app/components/icons";
-import DownloadDropdown from "./DownloadDropdown";
-import AssessmentChildRunCard from "./AssessmentChildRunCard";
-import {
-  canRetryStatus,
-  formatStatusLabel,
-  getResultTone,
-} from "@/app/lib/assessment/results";
-import {
-  ASSESSMENT_CARD_CLASSES,
-  STATUS_BADGE_CLASSES,
-  STATUS_FILTER_OPTIONS,
-} from "@/app/lib/assessment/constants";
-import { formatRelativeTime } from "@/app/lib/utils";
-import type { EvaluationsTabProps } from "@/app/lib/types/assessment";
-import useAssessmentResults from "@/app/hooks/useAssessmentResults";
-
-export default function EvaluationsTab({ onForbidden }: EvaluationsTabProps) {
-  const toast = useToast();
-  const {
-    assessments,
-    filteredRuns,
-    childRunsByAssessment,
-    configDetailsByKey,
-    configLoadingKeys,
-    configErrorKeys,
-    isLoading,
-    statusFilter,
-    setStatusFilter,
-    rerunningId,
-    resumingId,
-    retryingAssessmentId,
-    expandedId,
-    downloadingId,
-    loadAssessments,
-    handleExpand,
-    handleRetryAssessment,
-    handleRerun,
-    handleResume,
-    handlePreview,
-    handleAssessmentDownload,
-    handleRunDownload,
-    handleSavePostProcessing,
-    handleFetchRunColumns,
-  } = useAssessmentResults({ onForbidden, toast });
-
-  return (
-    <div className="flex-1 flex flex-col overflow-hidden bg-bg-secondary">
-      <div className="flex-1 overflow-auto p-4">
-        <div className="mb-4 flex items-center justify-between">
-          <h2 className="text-base font-semibold text-text-primary">
-            Evaluation Runs
-          </h2>
-          <div className="flex items-center gap-2">
-            <Select
-              value={statusFilter}
-              onChange={(event) =>
-                setStatusFilter(event.target.value as typeof statusFilter)
-              }
-              options={STATUS_FILTER_OPTIONS}
-            />
-            <Button
-              type="button"
-              variant="ghost"
-              onClick={loadAssessments}
-              disabled={isLoading}
-              aria-label="Refresh assessments"
-            >
-              <RefreshIcon
-                className={`w-4 h-4 -scale-x-100 ${isLoading ? "animate-spin" : ""}`}
-              />
-            </Button>
-          </div>
-        </div>
-
-        <div className="rounded-lg overflow-visible bg-bg-primary shadow-sm">
-          {isLoading && assessments.length === 0 && <RunsListSkeleton />}
-
-          {!isLoading && assessments.length === 0 && (
-            <div className="p-16 text-center">
-              <ClipboardIcon className="w-12 h-12 mx-auto mb-3 text-border" />
-              <p className="text-sm font-medium mb-1 text-text-primary">
-                No evaluation runs yet
-              </p>
-              <p className="text-xs text-text-secondary">
-                Submit an assessment from the Config tab to get started
-              </p>
-            </div>
-          )}
-
-          {assessments.length > 0 &&
-            (filteredRuns.length > 0 ? (
-              <div className="p-4 space-y-3">
-                {filteredRuns.map((run) => {
-                  const statusTone = getResultTone(run.status);
-                  const statusClass = STATUS_BADGE_CLASSES[statusTone];
-                  const isExpanded = expandedId === run.id;
-                  const childRuns = childRunsByAssessment[run.id] || [];
-                  const canRetryAssessment = canRetryStatus(run.status);
-                  const isRetryingAssessment = retryingAssessmentId === run.id;
-                  const hasCompletedRuns = run.completed_runs > 0;
-
-                  return (
-                    <div
-                      key={run.id}
-                      className={`rounded-lg overflow-hidden bg-bg-primary shadow-sm border-l-[3px] ${
-                        ASSESSMENT_CARD_CLASSES[statusTone]
-                      }`}
-                    >
-                      <div className="px-5 py-4">
-                        <div className="flex items-start justify-between gap-4">
-                          <div className="min-w-0 flex-1">
-                            <div className="truncate text-sm font-semibold text-text-primary">
-                              {run.experiment_name}
-                            </div>
-                            <div className="mt-0.5 text-xs text-text-secondary">
-                              {formatRelativeTime(run.inserted_at)}
-                            </div>
-
-                            {(run.status === "failed" ||
-                              run.status === "completed_with_errors") &&
-                              run.error_message && (
-                                <div className="mt-2 text-xs wrap-break-word overflow-hidden text-status-error-text">
-                                  {run.error_message}
-                                </div>
-                              )}
-                          </div>
-
-                          <span
-                            className={`px-2.5 py-1 rounded-full text-xs font-semibold uppercase tracking-wide shrink-0 ${statusClass}`}
-                          >
-                            {formatStatusLabel(run.status)}
-                          </span>
-                        </div>
-
-                        <div className="flex items-center justify-between gap-4 mt-3">
-                          <div className="flex items-center gap-3 text-xs text-text-secondary">
-                            {run.dataset_name && (
-                              <span className="flex items-center gap-1.5">
-                                <DatabaseIcon className="shrink-0" />
-                                {run.dataset_name}
-                              </span>
-                            )}
-                            <span className="px-1.5 py-0.5 rounded bg-bg-secondary">
-                              {run.total_runs} configs
-                            </span>
-                            <span>{run.completed_runs} completed</span>
-                            <span>
-                              {run.processing_runs + run.pending_runs} active
-                            </span>
-                            {run.failed_runs > 0 && (
-                              <span className="text-status-error-text">
-                                {run.failed_runs} failed
-                              </span>
-                            )}
-                          </div>
-                          <div className="flex items-center gap-3 shrink-0">
-                            {hasCompletedRuns && (
-                              <DownloadDropdown
-                                onDownload={(fmt) =>
-                                  handleAssessmentDownload(run.id, fmt)
-                                }
-                                disabled={!hasCompletedRuns}
-                                loading={
-                                  downloadingId === `assessment-${run.id}`
-                                }
-                              />
-                            )}
-                            {canRetryAssessment && (
-                              <Button
-                                type="button"
-                                size="sm"
-                                onClick={() => handleRetryAssessment(run.id)}
-                                disabled={isRetryingAssessment}
-                              >
-                                {isRetryingAssessment ? "Retrying..." : "Retry"}
-                              </Button>
-                            )}
-                            <Button
-                              type="button"
-                              variant="outline"
-                              size="sm"
-                              onClick={() => handleExpand(run.id)}
-                            >
-                              {isExpanded ? "Hide Details" : "View Results"}
-                            </Button>
-                          </div>
-                        </div>
-
-                        {isExpanded && (
-                          <div className="mt-5 space-y-3 border-t border-border pt-4">
-                            <div className="flex items-center justify-between gap-3">
-                              <div>
-                                <div className="text-sm font-semibold text-text-primary">
-                                  Configurations in this assessment
-                                </div>
-                                <div className="mt-1 text-xs text-text-secondary">
-                                  Each configuration keeps its own status,
-                                  preview, and export actions.
-                                </div>
-                              </div>
-                              <div className="rounded-full bg-bg-secondary px-2.5 py-1 text-[11px] font-medium text-text-secondary">
-                                {childRuns.length} run
-                                {childRuns.length !== 1 ? "s" : ""}
-                              </div>
-                            </div>
-
-                            {childRuns.length === 0 ? (
-                              <div className="rounded-xl border border-border bg-bg-secondary">
-                                <RunsListSkeleton count={2} />
-                              </div>
-                            ) : (
-                              childRuns.map((childRun) => (
-                                <AssessmentChildRunCard
-                                  key={childRun.id}
-                                  childRun={childRun}
-                                  configDetailsByKey={configDetailsByKey}
-                                  configLoadingKeys={configLoadingKeys}
-                                  configErrorKeys={configErrorKeys}
-                                  rerunningId={rerunningId}
-                                  resumingId={resumingId}
-                                  downloadingId={downloadingId}
-                                  onPreview={handlePreview}
-                                  onRunDownload={handleRunDownload}
-                                  onResume={handleResume}
-                                  onRerun={handleRerun}
-                                  onFetchRunColumns={handleFetchRunColumns}
-                                  onSavePostProcessing={
-                                    handleSavePostProcessing
-                                  }
-                                />
-                              ))
-                            )}
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            ) : (
-              <div className="p-16 text-center">
-                <p className="text-sm font-medium mb-1 text-text-primary">
-                  No {statusFilter} runs
-                </p>
-                <p className="text-xs text-text-secondary">
-                  No evaluation runs with status &quot;{statusFilter}&quot;
-                </p>
-              </div>
-            ))}
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/app/components/assessment/OutputSchemaEditor.tsx b/app/components/assessment/OutputSchemaEditor.tsx
deleted file mode 100644
index d0ec9809..00000000
--- a/app/components/assessment/OutputSchemaEditor.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-import type { SchemaProperty, ValueSetter } from "@/app/lib/types/assessment";
-import OutputSchemaEditorInner from "./output-schema/OutputSchemaEditorInner";
-
-interface OutputSchemaEditorProps {
-  schema: SchemaProperty[];
-  setSchema: ValueSetter<SchemaProperty[]>;
-  title?: string;
-  description?: ReactNode;
-}
-
-export { default as OutputSchemaModal } from "./output-schema/OutputSchemaModal";
-
-export function OutputSchemaEditor({
-  schema,
-  setSchema,
-  title = "Response Format",
-  description,
-}: OutputSchemaEditorProps) {
-  return (
-    <div className="space-y-5">
-      {title && (
-        <div>
-          <h2 className="text-lg font-semibold text-text-primary">{title}</h2>
-          {description ? (
-            <p className="mt-0.5 text-xs text-text-secondary">{description}</p>
-          ) : null}
-        </div>
-      )}
-      <OutputSchemaEditorInner schema={schema} setSchema={setSchema} />
-    </div>
-  );
-}
-
-export default OutputSchemaEditor;
diff --git a/app/components/assessment/OutputSchemaStep.tsx b/app/components/assessment/OutputSchemaStep.tsx
deleted file mode 100644
index cc82abbe..00000000
--- a/app/components/assessment/OutputSchemaStep.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-"use client";
-
-import { Button } from "@/app/components/ui";
-import { ChevronLeftIcon } from "@/app/components/icons";
-import type { SchemaProperty, ValueSetter } from "@/app/lib/types/assessment";
-import { OutputSchemaEditor } from "./OutputSchemaEditor";
-
-interface OutputSchemaStepProps {
-  onNext: () => void;
-  onBack: () => void;
-  schema: SchemaProperty[];
-  setSchema: ValueSetter<SchemaProperty[]>;
-}
-
-export default function OutputSchemaStep({
-  schema,
-  setSchema,
-  onNext,
-  onBack,
-}: OutputSchemaStepProps) {
-  return (
-    <div className="mx-auto flex h-full min-h-0 max-w-2xl flex-col">
-      <div className="flex-1 space-y-5 pb-16">
-        <OutputSchemaEditor
-          schema={schema}
-          setSchema={setSchema}
-          description="Leave this empty for free text, or add fields if you want a structured response."
-        />
-      </div>
-
-      <div className="mt-auto sticky bottom-0 z-10 -mx-6 flex items-center justify-between border-t border-border bg-bg-secondary px-6 py-2">
-        <div className="mx-auto flex w-full max-w-5xl items-center justify-between">
-          <Button type="button" variant="outline" onClick={onBack}>
-            <ChevronLeftIcon className="w-3.5 h-3.5" />
-            Back
-          </Button>
-          <Button type="button" onClick={onNext}>
-            Next: Review
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/app/components/assessment/PageLayout.tsx b/app/components/assessment/PageLayout.tsx
index 84dd490e..fae638e0 100644
--- a/app/components/assessment/PageLayout.tsx
+++ b/app/components/assessment/PageLayout.tsx
@@ -1,22 +1,17 @@
 "use client";
 
-// Top-level layout for /assessment: sidebar, tab navigation, and active tab content.
 import Sidebar from "@/app/components/Sidebar";
-import { TabNavigation } from "@/app/components/ui";
 import PageHeader from "@/app/components/PageHeader";
 import { useApp } from "@/app/lib/context/AppContext";
 import type { PageLayoutProps } from "@/app/lib/types/assessment";
-import ConfigPanel from "./ConfigPanel";
-import DatasetsTab from "./DatasetsTab";
-import EvaluationsTab from "./EvaluationsTab";
+import HomeView from "./home/HomeView";
+import WizardView from "./wizard/WizardView";
 
 export default function PageLayout({
-  activeTab,
-  tabs,
-  onTabSwitch,
-  datasetsTabProps,
-  configPanelProps,
-  evaluationsTabProps,
+  view,
+  wizard,
+  homeSelection,
+  onGoHome,
 }: PageLayoutProps) {
   const { sidebarCollapsed } = useApp();
 
@@ -25,36 +20,21 @@ export default function PageLayout({
       <div className="flex flex-1 overflow-hidden">
         <Sidebar collapsed={sidebarCollapsed} activeRoute="/assessment" />
 
-        <div className="flex-1 flex flex-col overflow-hidden">
+        <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
           <PageHeader
             title="Assessment"
-            subtitle="Multi-modal batch evaluation with prompt templates, attachments, and config comparison"
+            subtitle="Score submissions with versioned assessors, then track every run"
           />
 
-          <TabNavigation
-            activeTab={activeTab}
-            tabs={tabs}
-            onTabChange={(tabId) => onTabSwitch(tabId as typeof activeTab)}
-          />
-
-          {activeTab === "datasets" && (
-            <div className="flex-1 overflow-hidden flex flex-col">
-              <DatasetsTab {...datasetsTabProps} />
-            </div>
-          )}
-
-          <div
-            className={`flex min-h-0 flex-1 flex-col overflow-hidden ${
-              activeTab === "config" ? "" : "hidden"
-            }`}
-          >
-            <ConfigPanel {...configPanelProps} />
-          </div>
-
-          {activeTab === "results" && (
-            <div className="flex-1 overflow-hidden flex flex-col">
-              <EvaluationsTab {...evaluationsTabProps} />
-            </div>
+          {view === "home" ? (
+            <HomeView
+              initialSelection={homeSelection}
+              onNewAssessor={wizard.startNew}
+              onEditVersion={wizard.startEdit}
+              onNewRun={wizard.startRun}
+            />
+          ) : (
+            <WizardView wizard={wizard} onHome={onGoHome} />
           )}
         </div>
       </div>
diff --git a/app/components/assessment/PostProcessingStep.tsx b/app/components/assessment/PostProcessingStep.tsx
index 134c8aec..fe0917c7 100644
--- a/app/components/assessment/PostProcessingStep.tsx
+++ b/app/components/assessment/PostProcessingStep.tsx
@@ -28,7 +28,6 @@ export default function PostProcessingStep({
 
   const update = (patch: Partial<PostProcessingConfig>) => {
     const next = { ...config, ...patch };
-    // If all sections empty, store null (no post-processing)
     const isEmpty =
       next.computed_columns.length === 0 &&
       next.sort.length === 0 &&
@@ -36,19 +35,11 @@ export default function PostProcessingStep({
     setPostProcessingConfig(isEmpty ? null : next);
   };
 
-  // Derive available columns: input columns + L2 output schema fields + fixed L1 fields
   const inputCols = columnMapping.textColumns;
   const outputCols = outputSchema.map((f) => f.name).filter(Boolean);
-  const prefilterCols = [
-    "topic_relevance_decision",
-    "topic_relevance_reasoning",
-    "duplicate_detection_verdict",
-    "duplicate_detection_reason",
-    "duplicate_detection_match_title",
-  ];
+  const prefilterCols = ["prefilter_decision", "prefilter_reasoning"];
   const availableCols = [...inputCols, ...outputCols, ...prefilterCols];
 
-  // Computed columns available for formula autocomplete (includes user-defined ones)
   const allCols = [
     ...availableCols,
     ...config.computed_columns.map((c) => c.name).filter(Boolean),
diff --git a/app/components/assessment/PrefilterStep.tsx b/app/components/assessment/PrefilterStep.tsx
deleted file mode 100644
index 0ad16cd5..00000000
--- a/app/components/assessment/PrefilterStep.tsx
+++ /dev/null
@@ -1,311 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button, Modal } from "@/app/components/ui";
-import { ExpandIcon } from "@/app/components/icons";
-import CompactToggleSwitch from "@/app/components/assessment/CompactToggleSwitch";
-import { DEFAULT_PREFILTER_TOPIC_RELEVANCE_PROMPT } from "@/app/lib/assessment/constants";
-import type {
-  PrefilterConfig,
-  PrefilterStepProps,
-} from "@/app/lib/types/assessment";
-
-function ColumnChips({
-  columns,
-  selected,
-  onChange,
-}: {
-  columns: string[];
-  selected: string[];
-  onChange: (cols: string[]) => void;
-}) {
-  const toggle = (col: string) => {
-    onChange(
-      selected.includes(col)
-        ? selected.filter((c) => c !== col)
-        : [...selected, col],
-    );
-  };
-
-  return (
-    <div className="flex flex-wrap gap-2">
-      {columns.map((col) => {
-        const active = selected.includes(col);
-        return (
-          <Button
-            key={col}
-            type="button"
-            variant={active ? "secondary" : "outline"}
-            size="sm"
-            onClick={() => toggle(col)}
-            className="!text-xs font-mono"
-          >
-            {col}
-          </Button>
-        );
-      })}
-      {columns.length === 0 && (
-        <span className="text-xs text-text-secondary">
-          No columns available. Map columns in the previous step.
-        </span>
-      )}
-    </div>
-  );
-}
-
-export default function PrefilterStep({
-  columns,
-  attachmentColumns = [],
-  prefilterConfig,
-  setPrefilterConfig,
-  onNext,
-  onBack,
-}: PrefilterStepProps) {
-  const [trEnabled, setTrEnabled] = useState(
-    () => !!prefilterConfig?.topic_relevance,
-  );
-  const [dupEnabled, setDupEnabled] = useState(
-    () => !!prefilterConfig?.duplicate_detection,
-  );
-  const [trColumns, setTrColumns] = useState<string[]>(
-    () => prefilterConfig?.topic_relevance?.columns ?? [],
-  );
-  const [trAttachmentColumns, setTrAttachmentColumns] = useState<string[]>(
-    () =>
-      prefilterConfig?.topic_relevance?.attachment_columns ?? attachmentColumns,
-  );
-  const [trPrompt, setTrPrompt] = useState(
-    () =>
-      prefilterConfig?.topic_relevance?.prompt ??
-      DEFAULT_PREFILTER_TOPIC_RELEVANCE_PROMPT,
-  );
-  const [dupColumns, setDupColumns] = useState<string[]>(
-    () => prefilterConfig?.duplicate_detection?.columns ?? [],
-  );
-  const [isPromptModalOpen, setIsPromptModalOpen] = useState(false);
-
-  const trHasColumns = trColumns.length > 0 || trAttachmentColumns.length > 0;
-
-  const handleNext = () => {
-    const config: PrefilterConfig = {};
-    if (trEnabled && trHasColumns && trPrompt.trim()) {
-      config.topic_relevance = {
-        columns: trColumns,
-        prompt: trPrompt.trim(),
-        ...(trAttachmentColumns.length > 0
-          ? { attachment_columns: trAttachmentColumns }
-          : {}),
-      };
-    }
-    if (dupEnabled && dupColumns.length > 0) {
-      config.duplicate_detection = { columns: dupColumns };
-    }
-    setPrefilterConfig(Object.keys(config).length > 0 ? config : null);
-    onNext();
-  };
-
-  const trValid = !trEnabled || (trHasColumns && !!trPrompt.trim());
-  const dupValid = !dupEnabled || dupColumns.length > 0;
-  const canProceed = trValid && dupValid;
-
-  return (
-    <div className="flex h-full min-h-0 w-full flex-col">
-      <div className="mx-auto w-full max-w-3xl flex-1 space-y-6 pb-16">
-        <div>
-          <h2 className="text-lg font-semibold text-text-primary">
-            Eliminatory
-          </h2>
-          <p className="mt-1 text-sm text-text-secondary">
-            Optional pre-filters run before the LLM batch. Rows that fail Topic
-            Relevance are excluded from Evaluation and flagged in the export.
-          </p>
-        </div>
-
-        <div className="overflow-hidden rounded-2xl border border-border bg-bg-primary">
-          <div className="flex items-center justify-between px-5 py-4">
-            <div>
-              <div className="text-sm font-semibold text-text-primary">
-                Topic Relevance
-              </div>
-              <div className="mt-0.5 text-xs text-text-secondary">
-                Gate: rows with decision=REJECT are excluded from Evaluation.
-              </div>
-            </div>
-            <CompactToggleSwitch
-              checked={trEnabled}
-              onChange={() => setTrEnabled((v) => !v)}
-              title="Enable Topic Relevance"
-            />
-          </div>
-
-          {trEnabled && (
-            <div className="space-y-5 border-t border-border px-5 pb-5 pt-4">
-              <div>
-                <label className="mb-2 block text-xs font-medium text-text-secondary">
-                  Columns to evaluate
-                  {attachmentColumns.length === 0 && (
-                    <span className="ml-1 text-status-error-text">*</span>
-                  )}
-                </label>
-                <ColumnChips
-                  columns={columns}
-                  selected={trColumns}
-                  onChange={setTrColumns}
-                />
-                {trColumns.length === 0 && trAttachmentColumns.length === 0 && (
-                  <p className="mt-1.5 text-xs text-status-warning">
-                    Select at least one text or document column.
-                  </p>
-                )}
-                {trColumns.length > 0 && (
-                  <p className="mt-2 text-xs text-text-secondary">
-                    Export will include:{" "}
-                    {trColumns
-                      .map((c) => (
-                        <span key={c} className="font-mono">
-                          topic_relevance_{c}
-                        </span>
-                      ))
-                      .reduce<React.ReactNode[]>((acc, el, i) => {
-                        if (i === 0) return [el];
-                        return [...acc, ", ", el];
-                      }, [])}{" "}
-                    (true/false per column)
-                  </p>
-                )}
-              </div>
-
-              {attachmentColumns.length > 0 && (
-                <div>
-                  <label className="mb-2 block text-xs font-medium text-text-secondary">
-                    Documents to include
-                  </label>
-                  <ColumnChips
-                    columns={attachmentColumns}
-                    selected={trAttachmentColumns}
-                    onChange={setTrAttachmentColumns}
-                  />
-                  <p className="mt-1.5 text-xs text-text-secondary">
-                    {trAttachmentColumns.length > 0
-                      ? "Selected documents are sent to the model — Topic Relevance is judged on text and these documents."
-                      : "No documents selected — Topic Relevance uses text columns only."}
-                  </p>
-                </div>
-              )}
-
-              <div>
-                <div className="mb-1.5 flex items-center justify-between">
-                  <span className="block text-xs font-medium text-text-secondary">
-                    Evaluation prompt / rubric
-                    <span className="ml-1 text-status-error-text">*</span>
-                  </span>
-                  <button
-                    type="button"
-                    onClick={() => setIsPromptModalOpen(true)}
-                    aria-label="Expand prompt editor"
-                    title="Expand"
-                    className="cursor-pointer rounded-md p-1 text-text-secondary transition-colors hover:bg-bg-secondary hover:text-text-primary"
-                  >
-                    <ExpandIcon className="h-4 w-4" />
-                  </button>
-                </div>
-                <textarea
-                  value={trPrompt}
-                  onChange={(e) => setTrPrompt(e.target.value)}
-                  rows={6}
-                  placeholder="Write your ACCEPT/REJECT rules here..."
-                  className="w-full resize-y rounded-xl border border-border bg-bg-primary px-3 py-2 text-sm text-text-primary outline-none focus:border-accent-primary focus:ring-1 focus:ring-accent-primary/20"
-                />
-                {!trPrompt.trim() && (
-                  <p className="mt-1 text-xs text-status-warning">
-                    Evaluation prompt is required.
-                  </p>
-                )}
-              </div>
-            </div>
-          )}
-        </div>
-
-        <div className="overflow-hidden rounded-2xl border border-border bg-bg-primary">
-          <div className="flex items-center justify-between px-5 py-4">
-            <div>
-              <div className="text-sm font-semibold text-text-primary">
-                Duplicate Detection
-              </div>
-              <div className="mt-0.5 text-xs text-text-secondary">
-                Passthrough: runs only on rows that passed Topic Relevance.
-                Results appear in export; does not gate Evaluation.
-              </div>
-            </div>
-            <CompactToggleSwitch
-              checked={dupEnabled}
-              onChange={() => setDupEnabled((v) => !v)}
-              title="Enable Duplicate Detection"
-            />
-          </div>
-
-          {dupEnabled && (
-            <div className="border-t border-border px-5 pb-5 pt-4">
-              <label className="mb-2 block text-xs font-medium text-text-secondary">
-                Columns to check for duplicates
-              </label>
-              <ColumnChips
-                columns={columns}
-                selected={dupColumns}
-                onChange={setDupColumns}
-              />
-              {dupEnabled && dupColumns.length === 0 && (
-                <p className="mt-1.5 text-xs text-status-warning">
-                  Select at least one column.
-                </p>
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-
-      <Modal
-        open={isPromptModalOpen}
-        onClose={() => setIsPromptModalOpen(false)}
-        title="Evaluation prompt / rubric"
-        maxWidth="max-w-4xl"
-        maxHeight="max-h-[85vh]"
-      >
-        <div className="px-6 pb-6">
-          <textarea
-            value={trPrompt}
-            onChange={(e) => setTrPrompt(e.target.value)}
-            placeholder="Write your ACCEPT/REJECT rules here..."
-            className="h-[60vh] w-full resize-none rounded-xl border border-border bg-bg-primary px-3 py-2 text-sm text-text-primary outline-none focus:border-accent-primary focus:ring-1 focus:ring-accent-primary/20"
-          />
-          {!trPrompt.trim() && (
-            <p className="mt-1 text-xs text-status-warning">
-              Evaluation prompt is required.
-            </p>
-          )}
-        </div>
-      </Modal>
-
-      <div className="mt-auto sticky bottom-0 z-10 -mx-6 flex flex-col gap-3 border-t border-border bg-bg-secondary px-6 py-3 sm:flex-row sm:items-center sm:justify-between">
-        <div className="mx-auto flex w-full max-w-5xl flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-          <Button type="button" variant="outline" onClick={onBack}>
-            Back
-          </Button>
-
-          <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
-            <span className="text-xs text-text-secondary">
-              {!trEnabled && !dupEnabled
-                ? "No filters enabled — Eliminatory will be skipped."
-                : canProceed
-                  ? "Ready to continue."
-                  : "Complete required fields above."}
-            </span>
-            <Button type="button" onClick={handleNext} disabled={!canProceed}>
-              Next: Evaluation
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/app/components/assessment/PromptAndConfigStep.tsx b/app/components/assessment/PromptAndConfigStep.tsx
deleted file mode 100644
index 6e1eafb1..00000000
--- a/app/components/assessment/PromptAndConfigStep.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-"use client";
-
-import { Button } from "@/app/components/ui";
-import { ChevronLeftIcon } from "@/app/components/icons";
-import { usePromptAndConfigStep } from "@/app/hooks/usePromptAndConfigStep";
-import type { PromptAndConfigStepProps } from "@/app/lib/types/assessment";
-import {
-  AssessmentConfiguration,
-  PromptPanel,
-  ResponseSchema,
-  SetupProgress,
-} from "./prompt-config";
-
-export default function PromptAndConfigStep(props: PromptAndConfigStepProps) {
-  const {
-    textColumns,
-    sampleRow,
-    systemInstruction,
-    setSystemInstruction,
-    promptTemplate,
-    setPromptTemplate,
-    configs,
-    outputSchema,
-    setOutputSchema,
-    onNext,
-    onBack,
-  } = props;
-
-  const {
-    promptStatus,
-    responseSummary,
-    hasConfiguredResponseFormat,
-    canProceed,
-    nextBlockerMessage,
-    configMode,
-    setConfigMode,
-    removeSelection,
-    filteredConfigCards,
-    searchQuery,
-    setSearchQuery,
-    isLoadingConfigs,
-    hasMoreConfigs,
-    nextConfigSkip,
-    expandedConfigId,
-    versionStateByConfig,
-    latestModelByConfig,
-    loadingSelectionKeys,
-    isSelected,
-    loadConfigs,
-    loadVersions,
-    toggleConfigExpansion,
-    toggleVersionSelection,
-    currentProvider,
-    currentModel,
-    providerModels,
-    currentParamDefs,
-    draftParams,
-    configName,
-    commitMessage,
-    isSaving,
-    setConfigName,
-    setCommitMessage,
-    handleProviderChange,
-    handleModelChange,
-    updateDraftParam,
-    handleCreateAndAdd,
-  } = usePromptAndConfigStep(props);
-
-  return (
-    <div className="flex h-full min-h-0 w-full flex-col">
-      <div className="mx-auto w-full max-w-7xl flex-1 pb-20">
-        <div className="mb-6 flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
-          <div>
-            <h2 className="text-xl font-semibold text-text-primary">
-              Evaluation
-            </h2>
-            <p className="mt-1 text-sm text-text-secondary">
-              Write the task on the left. Tune behavior and output on the right.
-            </p>
-          </div>
-          <SetupProgress
-            promptStatus={promptStatus}
-            selectedConfigCount={configs.length}
-            responseSummary={responseSummary}
-          />
-        </div>
-
-        <div className="grid gap-8 lg:grid-cols-[minmax(0,1.02fr)_minmax(330px,1fr)] xl:grid-cols-[minmax(0,1fr)_minmax(360px,1.05fr)]">
-          <PromptPanel
-            textColumns={textColumns}
-            sampleRow={sampleRow}
-            systemInstruction={systemInstruction}
-            setSystemInstruction={setSystemInstruction}
-            promptTemplate={promptTemplate}
-            setPromptTemplate={setPromptTemplate}
-          />
-
-          <aside className="self-start space-y-5 lg:sticky lg:top-6 lg:min-w-[330px] xl:min-w-[360px]">
-            <ResponseSchema
-              schema={outputSchema}
-              setSchema={setOutputSchema}
-              summary={responseSummary}
-              hasFields={hasConfiguredResponseFormat}
-            />
-
-            <AssessmentConfiguration
-              configMode={configMode}
-              setConfigMode={setConfigMode}
-              configs={configs}
-              onRemoveConfig={removeSelection}
-              configCards={filteredConfigCards}
-              searchQuery={searchQuery}
-              setSearchQuery={setSearchQuery}
-              isLoadingConfigs={isLoadingConfigs}
-              hasMoreConfigs={hasMoreConfigs}
-              nextConfigSkip={nextConfigSkip}
-              expandedConfigId={expandedConfigId}
-              versionStateByConfig={versionStateByConfig}
-              latestModelByConfig={latestModelByConfig}
-              loadingSelectionKeys={loadingSelectionKeys}
-              isSelected={isSelected}
-              onLoadMoreConfigs={(skip) => loadConfigs(skip, false)}
-              onLoadVersions={(configId, skip) =>
-                void loadVersions(configId, skip)
-              }
-              onToggleConfigExpansion={toggleConfigExpansion}
-              onToggleVersionSelection={toggleVersionSelection}
-              currentProvider={currentProvider}
-              currentModel={currentModel}
-              providerModels={providerModels}
-              currentParamDefs={currentParamDefs}
-              draftParams={draftParams}
-              configName={configName}
-              commitMessage={commitMessage}
-              isSaving={isSaving}
-              setConfigName={setConfigName}
-              setCommitMessage={setCommitMessage}
-              onProviderChange={handleProviderChange}
-              onModelChange={handleModelChange}
-              onParamChange={updateDraftParam}
-              onSaveConfig={handleCreateAndAdd}
-            />
-          </aside>
-        </div>
-      </div>
-
-      <div className="sticky bottom-0 z-10 mt-auto -mx-6 flex items-center justify-between border-t border-border bg-bg-secondary px-6 py-2">
-        <div className="mx-auto flex w-full max-w-5xl items-center justify-between">
-          <Button
-            type="button"
-            variant="outline"
-            size="lg"
-            onClick={onBack}
-            className="!rounded-lg !px-6"
-          >
-            <ChevronLeftIcon className="h-3.5 w-3.5" />
-            Back
-          </Button>
-          <div className="flex items-center gap-3">
-            {!canProceed && (
-              <span className="text-xs text-text-secondary">
-                {nextBlockerMessage}
-              </span>
-            )}
-            <Button
-              type="button"
-              size="lg"
-              onClick={onNext}
-              disabled={!canProceed}
-            >
-              Next: Review
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/app/components/assessment/ReviewStep.tsx b/app/components/assessment/ReviewStep.tsx
deleted file mode 100644
index 3f68cdd8..00000000
--- a/app/components/assessment/ReviewStep.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import {
-  INITIAL_REVIEW_OPEN_SECTIONS,
-  REVIEW_SECTIONS,
-} from "@/app/lib/assessment/constants";
-import type {
-  AssessmentFormState,
-  ValueSetter,
-} from "@/app/lib/types/assessment";
-import { buildMappedColumns } from "@/app/lib/utils/assessment";
-
-interface ReviewStepProps {
-  formState: AssessmentFormState;
-  experimentName: string;
-  setExperimentName: ValueSetter<string>;
-  isSubmitting: boolean;
-  canSubmit: boolean;
-  submitBlockerMessage: string;
-  onSubmit: () => void;
-  onBack: () => void;
-  onEditStep: ValueSetter<number>;
-}
-import ColumnsReview from "./review/ColumnsReview";
-import ConfigsReview from "./review/ConfigsReview";
-import DatasetReview from "./review/DatasetReview";
-import ExperimentReview from "./review/ExperimentReview";
-import InputReview from "./review/InputReview";
-import PostProcessingReview from "./review/PostProcessingReview";
-import PrefilterReview from "./review/PrefilterReview";
-import SchemaReview from "./review/SchemaReview";
-import SubmitReview from "./review/SubmitReview";
-
-export default function ReviewStep({
-  formState,
-  experimentName,
-  setExperimentName,
-  isSubmitting,
-  canSubmit,
-  submitBlockerMessage,
-  onSubmit,
-  onBack,
-  onEditStep,
-}: ReviewStepProps) {
-  const {
-    datasetName,
-    columnMapping,
-    systemInstruction,
-    promptTemplate,
-    outputSchema,
-    configs,
-    prefilterConfig,
-    postProcessingConfig,
-  } = formState;
-  const [openSections, setOpenSections] = useState<Set<number>>(
-    () => new Set(INITIAL_REVIEW_OPEN_SECTIONS),
-  );
-
-  const mappedColumns = buildMappedColumns(columnMapping);
-  const mappedColumnCount =
-    columnMapping.textColumns.length +
-    columnMapping.attachments.length +
-    columnMapping.groundTruthColumns.length;
-
-  const toggleSection = (section: number) => {
-    setOpenSections((prev) => {
-      const next = new Set(prev);
-      if (next.has(section)) {
-        next.delete(section);
-      } else {
-        next.add(section);
-      }
-      return next;
-    });
-  };
-
-  return (
-    <div className="flex h-full min-h-0 w-full flex-col">
-      <div className="mx-auto w-full max-w-2xl flex-1 space-y-4 pb-8">
-        <div className="mb-2">
-          <h2 className="text-lg font-semibold text-text-primary">
-            Review & Submit
-          </h2>
-          <p className="mt-1 text-sm text-text-secondary">
-            Verify your evaluation configuration before submitting.
-          </p>
-        </div>
-
-        <ExperimentReview
-          experimentName={experimentName}
-          setExperimentName={setExperimentName}
-        />
-
-        <DatasetReview
-          datasetName={datasetName}
-          isOpen={openSections.has(REVIEW_SECTIONS.dataset)}
-          onToggle={() => toggleSection(REVIEW_SECTIONS.dataset)}
-        />
-
-        <ColumnsReview
-          mappedColumns={mappedColumns}
-          mappedCount={mappedColumnCount}
-          isOpen={openSections.has(REVIEW_SECTIONS.columns)}
-          onToggle={() => toggleSection(REVIEW_SECTIONS.columns)}
-          onEdit={() => onEditStep(1)}
-        />
-
-        <PrefilterReview
-          prefilterConfig={prefilterConfig}
-          isOpen={openSections.has(REVIEW_SECTIONS.prefilter)}
-          onToggle={() => toggleSection(REVIEW_SECTIONS.prefilter)}
-          onEdit={() => onEditStep(2)}
-        />
-
-        <InputReview
-          systemInstruction={systemInstruction}
-          promptTemplate={promptTemplate}
-          isOpen={openSections.has(REVIEW_SECTIONS.input)}
-          onToggle={() => toggleSection(REVIEW_SECTIONS.input)}
-        />
-
-        <ConfigsReview
-          configs={configs}
-          isOpen={openSections.has(REVIEW_SECTIONS.configs)}
-          onToggle={() => toggleSection(REVIEW_SECTIONS.configs)}
-          onEdit={() => onEditStep(3)}
-        />
-
-        <SchemaReview
-          outputSchema={outputSchema}
-          isOpen={openSections.has(REVIEW_SECTIONS.schema)}
-          onToggle={() => toggleSection(REVIEW_SECTIONS.schema)}
-          onEdit={() => onEditStep(3)}
-        />
-
-        <PostProcessingReview
-          postProcessingConfig={postProcessingConfig}
-          isOpen={openSections.has(REVIEW_SECTIONS.postProcessing)}
-          onToggle={() => toggleSection(REVIEW_SECTIONS.postProcessing)}
-          onEdit={() => onEditStep(4)}
-        />
-      </div>
-
-      <SubmitReview
-        isSubmitting={isSubmitting}
-        canSubmit={canSubmit}
-        submitBlockerMessage={submitBlockerMessage}
-        onSubmit={onSubmit}
-        onBack={onBack}
-      />
-    </div>
-  );
-}
diff --git a/app/components/assessment/SpreadsheetView.tsx b/app/components/assessment/SpreadsheetView.tsx
index 217b5fa4..45f76598 100644
--- a/app/components/assessment/SpreadsheetView.tsx
+++ b/app/components/assessment/SpreadsheetView.tsx
@@ -5,59 +5,29 @@ import { createUniver, defaultTheme, LocaleType } from "@univerjs/presets";
 import { UniverSheetsCorePreset } from "@univerjs/preset-sheets-core";
 import sheetsEnUS from "@univerjs/preset-sheets-core/locales/en-US";
 import "@univerjs/preset-sheets-core/lib/index.css";
-import { Button } from "@/app/components/ui";
-import { DownloadIcon } from "@/app/components/icons";
 import {
   buildSpreadsheetWorkbookData,
   loadSpreadsheetState,
   persistSpreadsheetState,
-  rowsToCsv,
   savedSnapshotMatchesHeaders,
-  spreadsheetSnapshotToRows,
 } from "@/app/lib/assessment/results";
 import {
   SPREADSHEET_STATE_DEBOUNCE_MS,
   UNIVER_MUTATION_TYPE,
 } from "@/app/lib/assessment/constants";
-import type { UniverAPI } from "@/app/lib/types/assessment";
-
-const BOM_UTF8 = String.fromCharCode(0xfeff);
-
-interface SpreadsheetViewProps {
-  runId: number;
-  title: string;
-  subtitle?: string;
-  headers: string[];
-  rows: string[][];
-}
+import type {
+  SpreadsheetViewProps,
+  UniverAPI,
+} from "@/app/lib/types/assessment";
 
 export default function SpreadsheetView({
   runId,
-  title,
-  subtitle,
   headers,
   rows,
 }: SpreadsheetViewProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const univerRef = useRef<UniverAPI | null>(null);
 
-  // Export the current (edited) sheet straight from the live Univer state — no API call.
-  const handleDownloadCsv = () => {
-    const snapshot = univerRef.current?.getActiveWorkbook()?.save();
-    const matrix = snapshot
-      ? spreadsheetSnapshotToRows(snapshot)
-      : [headers, ...rows];
-    const csv = rowsToCsv(matrix);
-    // Prepend BOM so Excel reads UTF-8 (preserves Hindi/Telugu text).
-    const blob = new Blob([BOM_UTF8, csv], { type: "text/csv;charset=utf-8;" });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `${title || "results"}.csv`;
-    link.click();
-    URL.revokeObjectURL(url);
-  };
-
   useEffect(() => {
     if (!containerRef.current) return;
 
@@ -71,9 +41,6 @@ export default function SpreadsheetView({
     const api = univerAPI as unknown as UniverAPI;
     univerRef.current = api;
 
-    // Use the cached snapshot only when its columns still match the fresh data,
-    // so newly-available columns (e.g. duplicate detection, L2 output) aren't
-    // hidden by a stale snapshot persisted from an earlier, partial state.
     const saved = loadSpreadsheetState(runId);
     const useSaved =
       saved != null && savedSnapshotMatchesHeaders(saved, headers);
@@ -96,9 +63,7 @@ export default function SpreadsheetView({
         if (serialized === lastSerialized) return;
         lastSerialized = serialized;
         persistSpreadsheetState(runId, snapshot);
-      } catch {
-        // storage unavailable — keep in-memory state
-      }
+      } catch {}
     };
 
     const cmdDisposable = api.onCommandExecuted((info) => {
@@ -124,27 +89,8 @@ export default function SpreadsheetView({
   }, [runId, headers, rows]);
 
   return (
-    <div className="w-full h-screen flex flex-col bg-bg-primary">
-      <div className="flex shrink-0 items-center justify-between border-b border-border px-6 py-4">
-        <div>
-          <h3 className="text-sm font-semibold text-text-primary">{title}</h3>
-          {subtitle && (
-            <p className="mt-0.5 text-xs text-text-secondary">{subtitle}</p>
-          )}
-        </div>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          onClick={handleDownloadCsv}
-          className="!rounded-md !px-2.5 !py-1.5 !text-xs"
-          aria-label="Download CSV"
-        >
-          <DownloadIcon className="h-3.5 w-3.5" />
-          Download CSV
-        </Button>
-      </div>
-      <div ref={containerRef} className="flex-1 overflow-hidden" />
+    <div className="flex min-h-0 w-full flex-1 flex-col bg-bg-primary">
+      <div ref={containerRef} className="min-h-0 flex-1 overflow-hidden" />
     </div>
   );
 }
diff --git a/app/components/assessment/Stepper.tsx b/app/components/assessment/Stepper.tsx
index 32ade0af..1ec601fb 100644
--- a/app/components/assessment/Stepper.tsx
+++ b/app/components/assessment/Stepper.tsx
@@ -1,70 +1,91 @@
 "use client";
 
 import { Button } from "@/app/components/ui";
-import { CheckIcon } from "@/app/components/icons";
-import type { Step, ValueSetter } from "@/app/lib/types/assessment";
-
-interface StepperProps {
-  steps: Step[];
-  currentStep: number;
-  onStepClick: ValueSetter<number>;
-  completedSteps: Set<number>;
-}
+import { CheckIcon, HomeIcon } from "@/app/components/icons";
+import { getStepState, stepPillClasses } from "@/app/lib/assessment/wizard";
+import type { StepperProps } from "@/app/lib/types/assessment";
 
 export default function Stepper({
   steps,
   currentStep,
   onStepClick,
   completedSteps,
+  locked = false,
+  isStepAllowed,
+  onHome,
+  leading,
+  trailing,
 }: StepperProps) {
   return (
-    <div className="flex flex-wrap items-center gap-2 border-b border-border bg-bg-primary px-6 py-4">
-      {steps.map((step, index) => {
-        const isActive = currentStep === step.id;
-        const isCompleted = completedSteps.has(step.id);
-        const isSequentiallyUnlocked =
-          step.id > currentStep &&
-          steps
-            .filter((s) => s.id < step.id)
-            .every((s) => completedSteps.has(s.id));
-        const isClickable =
-          isCompleted || step.id <= currentStep || isSequentiallyUnlocked;
+    <div className="flex h-14 shrink-0 items-center gap-2 border-b border-border bg-bg-primary px-6">
+      {leading}
 
-        return (
-          <div key={step.id} className="flex items-center gap-2">
-            {index > 0 && (
-              <div
-                className={`h-px w-8 ${
-                  isCompleted || isActive ? "bg-accent-primary" : "bg-border"
-                }`}
-              />
-            )}
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              onClick={() => isClickable && onStepClick(step.id)}
-              disabled={!isClickable}
-              className={`rounded-full! px-3! py-1.5! text-left! text-xs! ${
-                isActive
-                  ? "border-accent-primary! bg-accent-primary! text-white!"
-                  : isCompleted
-                    ? "bg-bg-secondary! text-text-primary!"
-                    : "bg-transparent! text-text-secondary!"
-              } ${isClickable ? "opacity-100" : "cursor-default opacity-50"}`}
-            >
-              {isCompleted && !isActive ? (
-                <CheckIcon className="w-3.5 h-3.5" />
-              ) : (
-                <span className="flex items-center justify-center text-[10px] font-bold">
-                  {step.id}
-                </span>
+      {onHome && (
+        <>
+          <button
+            type="button"
+            onClick={onHome}
+            title="Assessment home"
+            aria-label="Assessment home"
+            className="inline-flex h-[34px] w-[34px] shrink-0 cursor-pointer items-center justify-center rounded-full border border-border bg-bg-primary text-text-secondary transition-colors hover:border-accent-primary hover:bg-accent-primary/5 hover:text-accent-primary"
+          >
+            <HomeIcon className="w-4 h-4" />
+          </button>
+          <div className="hidden h-px w-8 shrink-0 bg-border sm:block" />
+        </>
+      )}
+
+      <div className="flex min-w-0 flex-1 items-center gap-2 overflow-x-auto py-2">
+        {steps.map((step, index) => {
+          const state = getStepState({
+            step,
+            steps,
+            currentStep,
+            completedSteps,
+            locked,
+            isStepAllowed,
+          });
+
+          return (
+            <div key={step.id} className="flex shrink-0 items-center gap-2">
+              {index > 0 && (
+                <div
+                  className={`h-px w-6 ${
+                    state.isCompleted || state.isActive
+                      ? "bg-accent-primary"
+                      : "bg-border"
+                  }`}
+                />
               )}
-              <span className="max-w-36 leading-4">{step.label}</span>
-            </Button>
-          </div>
-        );
-      })}
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => state.isClickable && onStepClick(step.id)}
+                disabled={!state.isClickable}
+                className={`rounded-full! px-3! py-1.5! text-left! text-xs! whitespace-nowrap ${stepPillClasses(
+                  state,
+                )} ${
+                  state.isClickable
+                    ? "opacity-100"
+                    : "cursor-default opacity-50"
+                }`}
+              >
+                {state.isCompleted && !state.isActive ? (
+                  <CheckIcon className="w-3.5 h-3.5" />
+                ) : (
+                  <span className="flex items-center justify-center text-[10px] font-bold">
+                    {step.id}
+                  </span>
+                )}
+                <span className="leading-4">{step.label}</span>
+              </Button>
+            </div>
+          );
+        })}
+      </div>
+
+      {trailing}
     </div>
   );
 }
diff --git a/app/components/assessment/datasets/CreatePanel.tsx b/app/components/assessment/datasets/CreatePanel.tsx
index ce0dd22f..06239903 100644
--- a/app/components/assessment/datasets/CreatePanel.tsx
+++ b/app/components/assessment/datasets/CreatePanel.tsx
@@ -2,104 +2,87 @@
 
 import { Button, Field } from "@/app/components/ui";
 import { CheckIcon, CloseIcon, CloudUploadIcon } from "@/app/components/icons";
-import { DATASET_LEFT_PANEL_CLASSES } from "@/app/lib/assessment/constants";
-import type { ChangeEvent, DragEvent, RefObject } from "react";
-import type { ValueSetter } from "@/app/lib/types/assessment";
+import { SUBMISSION_FORM_PANEL_CLASSES } from "@/app/lib/assessment/constants";
+import type { CreatePanelProps } from "@/app/lib/types/assessment";
 
-interface CreatePanelProps {
-  datasetName: string;
-  datasetDescription: string;
-  uploadedFile: File | null;
-  isDragging: boolean;
-  isUploading: boolean;
-  fileInputRef: RefObject<HTMLInputElement | null>;
-  onDatasetNameChange: ValueSetter<string>;
-  onDatasetDescriptionChange: ValueSetter<string>;
-  onFileSelect: (event: ChangeEvent<HTMLInputElement>) => void;
-  onDragOver: (event: DragEvent<HTMLDivElement>) => void;
-  onDragLeave: () => void;
-  onDrop: (event: DragEvent<HTMLDivElement>) => void;
-  onRemoveFile: () => void;
-  onResetForm: () => void;
-  onCreateDataset: () => void;
-}
+const LAYOUT_CLASSES: Record<"panel" | "inline", string> = {
+  panel: `${SUBMISSION_FORM_PANEL_CLASSES} shrink-0 border-l border-border bg-bg-primary`,
+  inline: "w-full bg-transparent",
+};
 
 export default function CreatePanel({
-  datasetName,
-  datasetDescription,
-  uploadedFile,
-  isDragging,
-  isUploading,
-  fileInputRef,
-  onDatasetNameChange,
-  onDatasetDescriptionChange,
-  onFileSelect,
-  onDragOver,
-  onDragLeave,
-  onDrop,
-  onRemoveFile,
-  onResetForm,
-  onCreateDataset,
+  form,
+  isCreating,
+  onCreate,
+  layout = "panel",
+  onCancel,
 }: CreatePanelProps) {
+  const { file, fileInputRef } = form;
+
   return (
     <div
-      className={`${DATASET_LEFT_PANEL_CLASSES} flex min-h-0 flex-shrink-0 flex-col overflow-hidden border-r border-border bg-bg-primary`}
+      className={`flex min-h-0 flex-col overflow-hidden ${LAYOUT_CLASSES[layout]}`}
     >
-      <div className="flex-1 space-y-4 overflow-auto p-4">
-        <div>
-          <h2 className="text-base font-semibold text-text-primary">
-            Create New Dataset
-          </h2>
-          <p className="mt-0.5 text-xs text-text-secondary">
-            Upload a CSV file for evaluation
-          </p>
-        </div>
+      <div
+        className={`flex-1 space-y-4 overflow-auto ${layout === "panel" ? "p-4" : "p-0"}`}
+      >
+        {layout === "panel" && (
+          <div>
+            <h2 className="text-base font-semibold text-text-primary">
+              Create New Submission
+            </h2>
+            <p className="mt-0.5 text-xs text-text-secondary">
+              Upload a CSV file for assessment
+            </p>
+          </div>
+        )}
 
         <Field
           label="Name *"
-          value={datasetName}
-          onChange={onDatasetNameChange}
-          placeholder="e.g., Hindi QnA Dataset"
+          value={form.name}
+          onChange={form.setName}
+          placeholder="e.g., SIM Submissions"
           className="!rounded-md !bg-bg-primary"
         />
 
         <Field
           label="Description"
-          value={datasetDescription}
-          onChange={onDatasetDescriptionChange}
+          value={form.description}
+          onChange={form.setDescription}
           placeholder="Optional description"
           className="!rounded-md !bg-bg-primary"
         />
+
         <div>
           <label className="mb-1.5 block text-xs font-medium text-text-secondary">
-            Upload Dataset *
+            Upload Submissions *
           </label>
 
           <input
             ref={fileInputRef}
             type="file"
             accept=".csv,.xlsx,.xls"
-            onChange={onFileSelect}
+            onChange={form.handleFileSelect}
             className="hidden"
           />
 
-          {uploadedFile ? (
+          {file ? (
             <div className="rounded-lg bg-bg-secondary p-3">
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2.5">
-                  <CheckIcon className="h-4 w-4 flex-shrink-0 text-status-success" />
-                  <div>
-                    <p className="text-sm font-medium text-text-primary">
-                      {uploadedFile.name}
+                  <CheckIcon className="h-4 w-4 shrink-0 text-status-success" />
+                  <div className="min-w-0">
+                    <p className="truncate text-sm font-medium text-text-primary">
+                      {file.name}
                     </p>
                     <p className="text-xs text-text-secondary">
-                      {(uploadedFile.size / 1024).toFixed(1)} KB
+                      {(file.size / 1024).toFixed(1)} KB
                     </p>
                   </div>
                 </div>
                 <button
                   type="button"
-                  onClick={onRemoveFile}
+                  onClick={form.removeFile}
                   aria-label="Remove file"
                   className="cursor-pointer rounded p-1 text-text-secondary transition-colors hover:bg-bg-primary hover:text-text-primary"
                 >
@@ -108,18 +91,33 @@ export default function CreatePanel({
               </div>
             </div>
           ) : (
-            <div
-              className={`cursor-pointer rounded-lg border-2 border-dashed p-6 text-center transition-colors ${
-                isDragging
+            <button
+              type="button"
+              onClick={() => fileInputRef.current?.click()}
+              onDragEnter={(event) => {
+                if (event.dataTransfer.types.includes("Files")) {
+                  form.setIsDragging(true);
+                }
+              }}
+              onDragOver={(event) => {
+                event.preventDefault();
+                event.dataTransfer.dropEffect = "copy";
+              }}
+              onDragLeave={(event) => {
+                if (
+                  !event.currentTarget.contains(event.relatedTarget as Node)
+                ) {
+                  form.setIsDragging(false);
+                }
+              }}
+              onDrop={form.handleDrop}
+              className={`w-full cursor-pointer rounded-lg border-2 border-dashed p-6 text-center transition-colors ${
+                form.isDragging
                   ? "border-accent-primary bg-accent-subtle/20"
-                  : "border-border"
+                  : "border-border hover:border-accent-muted"
               }`}
-              onClick={() => fileInputRef.current?.click()}
-              onDragOver={onDragOver}
-              onDragLeave={onDragLeave}
-              onDrop={onDrop}
             >
-              <span className="mx-auto mb-2 text-border flex justify-center">
+              <span className="mx-auto mb-2 flex justify-center text-border">
                 <CloudUploadIcon className="h-8 w-8" />
               </span>
               <p className="mb-1 text-sm font-medium text-text-primary">
@@ -128,26 +126,33 @@ export default function CreatePanel({
               <p className="text-xs text-text-secondary">
                 CSV or Excel (.xlsx, .xls)
               </p>
-            </div>
+            </button>
           )}
         </div>
 
         <div className="flex items-center justify-end gap-3 pt-2">
-          <Button type="button" variant="ghost" onClick={onResetForm}>
+          <Button
+            type="button"
+            variant="ghost"
+            onClick={() => {
+              form.reset();
+              onCancel?.();
+            }}
+          >
             Cancel
           </Button>
           <Button
             type="button"
-            onClick={onCreateDataset}
-            disabled={!uploadedFile || !datasetName.trim() || isUploading}
+            onClick={onCreate}
+            disabled={!file || !form.name.trim() || isCreating}
           >
-            {isUploading ? (
+            {isCreating ? (
               <>
                 <div className="h-4 w-4 animate-spin rounded-full border-2 border-white/40 border-t-transparent" />
                 Creating...
               </>
             ) : (
-              "Create Dataset"
+              "Create Submission"
             )}
           </Button>
         </div>
diff --git a/app/components/assessment/datasets/DatasetList.tsx b/app/components/assessment/datasets/DatasetList.tsx
deleted file mode 100644
index cbaf5a5a..00000000
--- a/app/components/assessment/datasets/DatasetList.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-"use client";
-
-import { DatasetListSkeleton } from "@/app/components";
-import { DatabaseIcon } from "@/app/components/icons";
-import EvalDatasetDescription from "@/app/components/evaluations/EvalDatasetDescription";
-import type { ValueSetter } from "@/app/lib/types/assessment";
-import type { Dataset } from "@/app/lib/types/dataset";
-import { Button } from "@/app/components/ui";
-
-interface DatasetListProps {
-  datasets: Dataset[];
-  datasetId: string;
-  isLoading: boolean;
-  isLoadingColumns: boolean;
-  viewingId: number | null;
-  canProceed: boolean;
-  onSelectDataset: (id: string, name?: string) => void;
-  onViewDataset: (datasetId: number, name: string) => void;
-  onRequestDelete: ValueSetter<number>;
-  onNext: () => void;
-}
-
-export default function DatasetList({
-  datasets,
-  datasetId,
-  isLoading,
-  isLoadingColumns,
-  viewingId,
-  canProceed,
-  onSelectDataset,
-  onViewDataset,
-  onRequestDelete,
-  onNext,
-}: DatasetListProps) {
-  return (
-    <div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-bg-secondary">
-      <div className="flex-1 overflow-auto p-6">
-        <div className="mb-4 flex items-center justify-between">
-          <div>
-            <h3 className="text-base font-semibold text-text-primary">
-              Datasets
-            </h3>
-            <p className="mt-2 rounded-full border border-accent-secondary bg-accent-secondary/15 px-3 py-2 text-xs font-medium text-text-primary">
-              Use an existing dataset from the list, or create a new dataset
-              from the form on the right.
-            </p>
-          </div>
-          {isLoadingColumns && (
-            <span className="text-xs text-text-secondary">
-              Loading columns...
-            </span>
-          )}
-        </div>
-
-        {isLoading ? (
-          <DatasetListSkeleton count={4} />
-        ) : datasets.length === 0 ? (
-          <div className="p-16 text-center">
-            <DatabaseIcon className="mx-auto mb-3 h-12 w-12 text-border" />
-            <p className="mb-1 text-sm font-medium text-text-primary">
-              No datasets yet
-            </p>
-            <p className="text-xs text-text-secondary">
-              Create your first dataset using the form on the right
-            </p>
-          </div>
-        ) : (
-          <div className="space-y-3">
-            {datasets.map((dataset) => {
-              const isSelected = datasetId === dataset.dataset_id.toString();
-              return (
-                <div
-                  key={dataset.dataset_id}
-                  className={`cursor-pointer overflow-hidden rounded-lg border-l-[3px] bg-bg-primary transition-all ${
-                    isSelected
-                      ? "border-l-accent-primary ring-1 ring-accent-primary shadow-sm"
-                      : "border-l-accent-secondary shadow-[0_1px_3px_rgba(0,0,0,0.04)]"
-                  }`}
-                  onClick={() =>
-                    onSelectDataset(
-                      dataset.dataset_id.toString(),
-                      dataset.dataset_name,
-                    )
-                  }
-                >
-                  <div className="px-5 py-4">
-                    <div className="flex items-start justify-between gap-4">
-                      <div className="min-w-0 flex-1">
-                        <div className="flex items-center gap-2">
-                          <div className="truncate text-sm font-semibold text-text-primary">
-                            {dataset.dataset_name}
-                          </div>
-                        </div>
-                        {dataset.description && (
-                          <EvalDatasetDescription
-                            description={dataset.description}
-                          />
-                        )}
-                        <div className="mt-2 flex items-center gap-3 text-xs text-text-secondary">
-                          <span>{dataset.total_items} items</span>
-                          {dataset.original_items > 0 &&
-                            dataset.original_items !== dataset.total_items && (
-                              <>
-                                <span className="text-border">·</span>
-                                <span>{dataset.original_items} original</span>
-                              </>
-                            )}
-                        </div>
-                      </div>
-                      <div className="flex flex-shrink-0 items-center gap-2">
-                        <Button
-                          type="button"
-                          variant="outline"
-                          size="sm"
-                          onClick={(event) => {
-                            event.stopPropagation();
-                            onViewDataset(
-                              dataset.dataset_id,
-                              dataset.dataset_name,
-                            );
-                          }}
-                          disabled={viewingId === dataset.dataset_id}
-                          className={` ${
-                            viewingId === dataset.dataset_id ? "opacity-50" : ""
-                          }`}
-                        >
-                          {viewingId === dataset.dataset_id
-                            ? "Loading..."
-                            : "View"}
-                        </Button>
-                        <Button
-                          type="button"
-                          variant="outline"
-                          size="sm"
-                          onClick={(event) => {
-                            event.stopPropagation();
-                            onRequestDelete(dataset.dataset_id);
-                          }}
-                          aria-label={`Delete ${dataset.dataset_name}`}
-                        >
-                          Delete
-                        </Button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
-
-      <div className="sticky bottom-0 z-10 flex shrink-0 items-center justify-between border-t border-border bg-bg-primary px-6 py-3">
-        <div className="mx-auto flex w-full max-w-5xl items-center justify-between">
-          <span className="text-xs text-text-secondary">
-            {canProceed
-              ? "Dataset selected. Continue to AI configuration."
-              : "Select a dataset to continue."}
-          </span>
-          <Button type="button" onClick={onNext} disabled={!canProceed}>
-            Next: AI Configuration
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/app/components/assessment/datasets/SubmissionList.tsx b/app/components/assessment/datasets/SubmissionList.tsx
new file mode 100644
index 00000000..68014fe3
--- /dev/null
+++ b/app/components/assessment/datasets/SubmissionList.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import { DatasetListSkeleton } from "@/app/components";
+import { DatabaseIcon } from "@/app/components/icons";
+import EvalDatasetDescription from "@/app/components/evaluations/EvalDatasetDescription";
+import { Button } from "@/app/components/ui";
+import type { SubmissionListProps } from "@/app/lib/types/assessment";
+
+export default function SubmissionList({
+  submissions,
+  selectedId,
+  isLoading,
+  isLoadingColumns,
+  viewingId,
+  onSelect,
+  onView,
+  onRequestDelete,
+}: SubmissionListProps) {
+  return (
+    <div className="flex min-h-0 flex-1 flex-col overflow-hidden bg-bg-secondary">
+      <div className="flex-1 overflow-auto p-6">
+        <div className="mb-4 flex items-start justify-between gap-4">
+          <div>
+            <h3 className="text-base font-semibold text-text-primary">
+              Submissions
+            </h3>
+            <p className="mt-2 inline-block rounded-full border border-accent-secondary bg-accent-secondary/15 px-3 py-2 text-xs font-medium text-text-primary">
+              Pick the submission set for this assessor, or upload a new one.
+            </p>
+            <p className="mt-2 max-w-xl text-xs leading-5 text-text-secondary">
+              Each row becomes one submission. Its columns load into the system,
+              so you can tag them with “@” in the pre-filter and assessment
+              steps.
+            </p>
+          </div>
+          {isLoadingColumns && (
+            <span className="shrink-0 text-xs text-text-secondary">
+              Loading columns...
+            </span>
+          )}
+        </div>
+
+        {isLoading ? (
+          <DatasetListSkeleton count={4} />
+        ) : submissions.length === 0 ? (
+          <div className="p-16 text-center">
+            <DatabaseIcon className="mx-auto mb-3 h-12 w-12 text-border" />
+            <p className="mb-1 text-sm font-medium text-text-primary">
+              No submissions yet
+            </p>
+            <p className="text-xs text-text-secondary">
+              Create your first submission set using the form on the right
+            </p>
+          </div>
+        ) : (
+          <ul className="space-y-3">
+            {submissions.map((submission) => {
+              const isSelected = selectedId === submission.submission_id;
+              return (
+                <li key={submission.submission_id}>
+                  <div
+                    className={`overflow-hidden rounded-lg border-l-[3px] bg-bg-primary transition-all ${
+                      isSelected
+                        ? "border-l-accent-primary ring-1 ring-accent-primary shadow-sm"
+                        : "border-l-accent-secondary shadow-[0_1px_3px_rgba(0,0,0,0.04)]"
+                    }`}
+                  >
+                    <div className="flex items-start justify-between gap-4 px-5 py-4">
+                      <button
+                        type="button"
+                        aria-pressed={isSelected}
+                        onClick={() =>
+                          onSelect(submission.submission_id, submission.name)
+                        }
+                        className="min-w-0 flex-1 cursor-pointer text-left"
+                      >
+                        <span className="block truncate text-sm font-semibold text-text-primary">
+                          {submission.name}
+                        </span>
+                        {submission.description && (
+                          <EvalDatasetDescription
+                            description={submission.description}
+                          />
+                        )}
+                        <span className="mt-2 flex items-center gap-3 text-xs text-text-secondary">
+                          <span>{submission.total_items} items</span>
+                          {submission.total_items > 0 &&
+                            submission.total_items !==
+                              submission.total_items && (
+                              <>
+                                <span className="text-border">·</span>
+                                <span>{submission.total_items} original</span>
+                              </>
+                            )}
+                        </span>
+                      </button>
+
+                      <div className="flex shrink-0 items-center gap-2">
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          onClick={() =>
+                            onView(submission.submission_id, submission.name)
+                          }
+                          disabled={viewingId === submission.submission_id}
+                        >
+                          {viewingId === submission.submission_id
+                            ? "Loading..."
+                            : "View"}
+                        </Button>
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          onClick={() =>
+                            onRequestDelete(submission.submission_id)
+                          }
+                          aria-label={`Delete ${submission.name}`}
+                        >
+                          Delete
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/assessment/editor/EditorStepLayout.tsx b/app/components/assessment/editor/EditorStepLayout.tsx
new file mode 100644
index 00000000..2e413dc8
--- /dev/null
+++ b/app/components/assessment/editor/EditorStepLayout.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import { useRef } from "react";
+import { SplitPane } from "@/app/components/ui";
+import { useSyncedScroll } from "@/app/hooks";
+import PreviewPane from "./PreviewPane";
+import type { EditorStepLayoutProps } from "@/app/lib/types/assessment";
+
+export default function EditorStepLayout({
+  children,
+  zones,
+  columns,
+  fieldTypes,
+  sampleRow,
+  previewDisabledNote,
+}: EditorStepLayoutProps) {
+  const editorRef = useRef<HTMLDivElement>(null);
+  const previewRef = useRef<HTMLDivElement>(null);
+
+  useSyncedScroll({
+    editorRef,
+    previewRef,
+    editorAnchorSelector: "[data-zone-heading]",
+    previewAnchorSelector: "h1",
+  });
+
+  return (
+    <SplitPane
+      label="Resize editor and preview"
+      left={
+        <div
+          ref={editorRef}
+          className="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto bg-bg-secondary px-5 py-5 [&>*]:shrink-0"
+        >
+          {children}
+        </div>
+      }
+      right={
+        <PreviewPane
+          paneRef={previewRef}
+          zones={zones}
+          columns={columns}
+          fieldTypes={fieldTypes}
+          sampleRow={sampleRow}
+          disabledNote={previewDisabledNote}
+        />
+      }
+    />
+  );
+}
diff --git a/app/components/assessment/editor/MentionDropdown.tsx b/app/components/assessment/editor/MentionDropdown.tsx
new file mode 100644
index 00000000..ef227af3
--- /dev/null
+++ b/app/components/assessment/editor/MentionDropdown.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import { DocumentFileIcon, ImageIcon } from "@/app/components/icons";
+import type {
+  MentionDropdownProps,
+  PromptFieldType,
+} from "@/app/lib/types/assessment";
+
+const TYPE_ICONS: Record<PromptFieldType, React.ReactNode> = {
+  text: <span className="font-sans text-[11px] font-semibold">Aa</span>,
+  image: <ImageIcon className="h-3.5 w-3.5" />,
+  pdf: <DocumentFileIcon className="h-3.5 w-3.5" />,
+};
+
+const rowBase =
+  "flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-left text-sm";
+const eyebrow =
+  "px-3 pt-2 pb-1 text-[10px] font-semibold tracking-wider uppercase text-text-secondary";
+
+export default function MentionDropdown({
+  dropdownRef,
+  position,
+  activeIndex,
+  pendingField,
+  stage,
+  columnOptions,
+  typeOptions,
+  strictOptions,
+  onPickColumn,
+  onPickType,
+  onPickStrict,
+  onMouseEnter,
+  onMouseLeave,
+}: MentionDropdownProps) {
+  if (!position) return null;
+
+  return (
+    <div
+      ref={dropdownRef}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      style={{ top: position.top, left: position.left }}
+      className="absolute z-40 max-h-52 min-w-[220px] overflow-y-auto rounded-xl border border-border bg-bg-primary shadow-[0_8px_24px_rgba(0,0,0,0.12)]"
+    >
+      {stage === "type" && (
+        <>
+          <p className={eyebrow}>What is “{pendingField}”?</p>
+          {typeOptions.map((option, index) => (
+            <OptionRow
+              key={option.type}
+              active={index === activeIndex}
+              badge={TYPE_ICONS[option.type]}
+              label={option.label}
+              isCurrent={option.isCurrent}
+              onPick={() => onPickType(option.type)}
+            />
+          ))}
+        </>
+      )}
+
+      {stage === "strict" && (
+        <>
+          <p className={eyebrow}>Is “{pendingField}” required?</p>
+          {strictOptions.map((option, index) => (
+            <OptionRow
+              key={String(option.strict)}
+              active={index === activeIndex}
+              badge={
+                <span className="font-sans text-[11px] font-semibold">
+                  {option.strict ? "*" : "?"}
+                </span>
+              }
+              label={option.label}
+              hint={option.hint}
+              isCurrent={option.isCurrent}
+              onPick={() => onPickStrict(option.strict)}
+            />
+          ))}
+        </>
+      )}
+
+      {!stage &&
+        columnOptions.map((option, index) => (
+          <button
+            key={`${option.name}-${option.isCreate}`}
+            type="button"
+            onMouseDown={(event) => {
+              event.preventDefault();
+              onPickColumn(option);
+            }}
+            className={`${rowBase} ${
+              index === activeIndex ? "bg-bg-secondary" : ""
+            } ${option.isCreate ? "text-accent-primary" : "text-text-primary"}`}
+          >
+            {option.isCreate ? (
+              <span>+ Create field “{option.name}”</span>
+            ) : (
+              <>
+                <span className="rounded bg-bg-secondary px-1.5 py-0.5 text-xs text-text-secondary">
+                  @
+                </span>
+                <span className="truncate font-mono text-[13px]">
+                  {option.name}
+                </span>
+                {option.type !== "text" && (
+                  <span className="ml-auto text-[10px] text-text-secondary">
+                    attached
+                  </span>
+                )}
+              </>
+            )}
+          </button>
+        ))}
+    </div>
+  );
+}
+
+function OptionRow({
+  active,
+  badge,
+  label,
+  hint,
+  isCurrent,
+  onPick,
+}: {
+  active: boolean;
+  badge: React.ReactNode;
+  label: string;
+  hint?: string;
+  isCurrent: boolean;
+  onPick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onMouseDown={(event) => {
+        event.preventDefault();
+        onPick();
+      }}
+      className={`${rowBase} ${active ? "bg-bg-secondary" : ""}`}
+    >
+      <span className="flex h-5 w-6 items-center justify-center rounded bg-bg-secondary text-text-secondary">
+        {badge}
+      </span>
+      <span className="text-text-primary">{label}</span>
+      {hint && <span className="text-[11px] text-text-secondary">{hint}</span>}
+      {isCurrent && (
+        <span className="ml-auto text-[10px] text-text-secondary">current</span>
+      )}
+    </button>
+  );
+}
diff --git a/app/components/assessment/editor/PreviewPane.tsx b/app/components/assessment/editor/PreviewPane.tsx
new file mode 100644
index 00000000..c9147073
--- /dev/null
+++ b/app/components/assessment/editor/PreviewPane.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import {
+  DocumentFileIcon,
+  ImageIcon,
+  LockClosedIcon,
+} from "@/app/components/icons";
+import {
+  buildPreviewBlocks,
+  fieldTypeOf,
+} from "@/app/lib/assessment/promptTokens";
+import type {
+  PreviewBlock,
+  PreviewBlockType,
+  PreviewPaneProps,
+  PromptFieldType,
+  PromptSegment,
+} from "@/app/lib/types/assessment";
+
+const BLOCK_CLASSES: Record<PreviewBlockType, string> = {
+  h1: "mt-6 mb-2.5 text-[15px] font-bold tracking-wider uppercase text-text-primary first:mt-0",
+  h2: "mt-4 mb-2 text-base font-semibold text-text-primary",
+  li: "my-0.5 ml-5 list-disc text-sm leading-7 text-text-primary",
+  p: "mb-2.5 text-sm leading-7 text-text-primary",
+};
+
+export default function PreviewPane({
+  paneRef,
+  zones,
+  columns,
+  fieldTypes,
+  sampleRow,
+  disabledNote,
+}: PreviewPaneProps) {
+  const blocks = buildPreviewBlocks({ zones, columns, fieldTypes, sampleRow });
+
+  return (
+    <div
+      ref={paneRef}
+      className="min-h-0 flex-1 overflow-auto bg-accent-subtle/10 px-7 py-5"
+    >
+      <div className="mb-2 flex items-center gap-2 text-[11px] font-semibold tracking-wider uppercase text-text-secondary">
+        Preview
+        <span className="inline-flex items-center gap-1.5 rounded-full border border-accent-subtle bg-accent-primary/10 px-2 py-0.5 text-[10px] font-semibold tracking-wide text-accent-primary">
+          <LockClosedIcon className="h-2.5 w-2.5" />
+          Read only
+        </span>
+      </div>
+
+      {disabledNote ? (
+        <p className="text-sm leading-7 text-text-secondary">{disabledNote}</p>
+      ) : (
+        <>
+          <p className="mb-3.5 max-w-[760px] text-xs leading-5 text-text-secondary">
+            A sample of the prompt the AI sees for one submission, filled in
+            with row 1 of the selected set. Edit it on the left.
+          </p>
+
+          {blocks.length === 0 ? (
+            <p className="text-sm leading-7 text-text-secondary">
+              Start typing in the editor — the assembled prompt previews here
+              with row 1 of the submission set filled in.
+            </p>
+          ) : (
+            <div className="max-w-[760px]">
+              {blocks.map((block, index) => (
+                <PreviewBlockView
+                  key={`${block.type}-${index}`}
+                  block={block}
+                  fieldTypes={fieldTypes}
+                />
+              ))}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+function PreviewBlockView({
+  block,
+  fieldTypes,
+}: {
+  block: PreviewBlock;
+  fieldTypes: Record<string, PromptFieldType>;
+}) {
+  const content = block.segments.map((segment, index) => (
+    <SegmentView
+      key={`${index}-${segment.text}`}
+      segment={segment}
+      fieldTypes={fieldTypes}
+    />
+  ));
+
+  if (block.type === "h1") {
+    return <h1 className={BLOCK_CLASSES.h1}>{content}</h1>;
+  }
+  if (block.type === "h2") {
+    return <h2 className={BLOCK_CLASSES.h2}>{content}</h2>;
+  }
+  if (block.type === "li") {
+    return <li className={BLOCK_CLASSES.li}>{content}</li>;
+  }
+  return <p className={BLOCK_CLASSES.p}>{content}</p>;
+}
+
+function SegmentView({
+  segment,
+  fieldTypes,
+}: {
+  segment: PromptSegment;
+  fieldTypes: Record<string, PromptFieldType>;
+}) {
+  if (segment.kind === "plain") return <>{segment.text}</>;
+
+  if (segment.kind === "attachment" && segment.name) {
+    const isImage = fieldTypeOf(fieldTypes, segment.name) === "image";
+    return (
+      <span className="mx-0.5 inline-flex items-center gap-1 rounded-md border border-status-warning-border bg-status-warning-bg px-2 py-px align-baseline text-xs font-medium text-status-warning-text">
+        {isImage ? (
+          <ImageIcon className="h-3 w-3" />
+        ) : (
+          <DocumentFileIcon className="h-3 w-3" />
+        )}
+        {segment.name}
+      </span>
+    );
+  }
+
+  if (segment.kind === "unknown") {
+    return (
+      <span className="rounded bg-status-warning-bg text-status-warning-text underline decoration-status-warning decoration-wavy">
+        {segment.text}
+      </span>
+    );
+  }
+
+  return (
+    <span className="rounded bg-accent-subtle/35 px-0.5">{segment.text}</span>
+  );
+}
diff --git a/app/components/assessment/editor/PromptZoneCard.tsx b/app/components/assessment/editor/PromptZoneCard.tsx
new file mode 100644
index 00000000..dd9269f7
--- /dev/null
+++ b/app/components/assessment/editor/PromptZoneCard.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import PromptZoneEditor from "./PromptZoneEditor";
+import type {
+  PromptZoneCardProps,
+  PromptZoneId,
+} from "@/app/lib/types/assessment";
+
+const ORDER: PromptZoneId[] = ["instructions", "submission"];
+
+export default function PromptZoneCard({
+  zones,
+  copy,
+  zoneMinHeight,
+  columns,
+  fieldTypes,
+  fieldStrict,
+  onZoneChange,
+  onFieldType,
+  onFieldStrict,
+}: PromptZoneCardProps) {
+  return (
+    <div className="overflow-hidden rounded-2xl border border-border bg-bg-primary">
+      {ORDER.map((zone, index) => (
+        <div key={zone}>
+          <div
+            data-zone-heading
+            className={`flex flex-wrap items-baseline justify-between gap-2 bg-bg-secondary px-5 py-3 ${
+              index > 0 ? "border-t border-border" : ""
+            } border-b border-border`}
+          >
+            <span className="text-[11px] font-semibold tracking-wider uppercase text-text-secondary">
+              {copy[zone].label}
+            </span>
+            <span className="text-[11px] text-text-secondary">
+              {copy[zone].hint}
+            </span>
+          </div>
+          <div className="px-5 py-4">
+            <PromptZoneEditor
+              value={zones[zone]}
+              onChange={(value) => onZoneChange(zone, value)}
+              placeholder={copy[zone].placeholder}
+              minHeight={zoneMinHeight}
+              enableMentions={zone === "submission"}
+              columns={columns}
+              fieldTypes={fieldTypes}
+              fieldStrict={fieldStrict}
+              onFieldType={onFieldType}
+              onFieldStrict={onFieldStrict}
+              ariaLabel={`${copy[zone].label} prompt`}
+            />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/app/components/assessment/editor/PromptZoneEditor.tsx b/app/components/assessment/editor/PromptZoneEditor.tsx
new file mode 100644
index 00000000..bdcd680d
--- /dev/null
+++ b/app/components/assessment/editor/PromptZoneEditor.tsx
@@ -0,0 +1,193 @@
+"use client";
+
+import { splitTokens } from "@/app/lib/assessment/promptTokens";
+import { usePromptMentions } from "@/app/hooks";
+import MentionDropdown from "./MentionDropdown";
+import type { PromptZoneEditorProps } from "@/app/lib/types/assessment";
+
+const SEGMENT_CLASSES: Record<string, string> = {
+  plain: "",
+  text: "rounded bg-accent-subtle/40 text-accent-primary",
+  attachment: "rounded bg-status-warning-bg text-status-warning-text",
+  unknown:
+    "rounded bg-status-warning-bg text-status-warning-text underline decoration-status-warning decoration-wavy",
+};
+
+const MARKER_CLASSES = {
+  required: "text-status-error-text",
+  optional: "text-accent-primary",
+};
+
+function markerPosition(marker: HTMLElement): { top: number; left: number } {
+  const host = marker.closest<HTMLElement>("[data-mention-host]");
+  const rect = marker.getBoundingClientRect();
+  const origin = host?.getBoundingClientRect() ?? { top: 0, left: 0 };
+  return { top: rect.bottom - origin.top, left: rect.left - origin.left };
+}
+
+export default function PromptZoneEditor({
+  value,
+  onChange,
+  placeholder,
+  minHeight,
+  enableMentions,
+  columns,
+  fieldTypes,
+  fieldStrict,
+  onFieldType,
+  onFieldStrict,
+  ariaLabel,
+}: PromptZoneEditorProps) {
+  const {
+    inputRef,
+    mirrorRef,
+    dropdownRef,
+    isOpen,
+    position,
+    activeIndex,
+    pendingField,
+    stage,
+    columnOptions,
+    typeOptions,
+    strictOptions,
+    onInput,
+    onKeyDown,
+    pickColumn,
+    pickType,
+    pickStrict,
+    openStrictFor,
+    scheduleHoverClose,
+    cancelHoverClose,
+    closeAll,
+  } = usePromptMentions({
+    columns,
+    fieldTypes,
+    fieldStrict,
+    value,
+    onChange,
+    onFieldType,
+    onFieldStrict,
+  });
+
+  const segments = splitTokens(value, columns, fieldTypes);
+  const layer =
+    "m-0 px-0 font-sans text-sm leading-5 whitespace-pre-wrap break-words";
+
+  return (
+    <div
+      data-mention-host
+      className="relative grid h-auto cursor-text"
+      style={{ minHeight: `${minHeight}px` }}
+      onClick={() => inputRef.current?.focus()}
+    >
+      {!value && (
+        <pre
+          aria-hidden="true"
+          className={`${layer} col-start-1 row-start-1 text-text-secondary/70`}
+        >
+          {placeholder}
+        </pre>
+      )}
+
+      <pre
+        aria-hidden="true"
+        className={`${layer} col-start-1 row-start-1 text-text-primary`}
+      >
+        {segments.map((segment, index) => (
+          <span
+            key={`${index}-${segment.text}`}
+            className={SEGMENT_CLASSES[segment.kind]}
+          >
+            {segment.text}
+          </span>
+        ))}
+        {"​"}
+      </pre>
+
+      <textarea
+        ref={inputRef}
+        value={value}
+        aria-label={ariaLabel}
+        spellCheck={false}
+        onChange={(event) => {
+          onChange(event.target.value);
+          if (enableMentions) {
+            onInput(event.target.value, event.target.selectionStart ?? 0);
+          }
+        }}
+        onKeyDown={onKeyDown}
+        onBlur={() => setTimeout(closeAll, 150)}
+        className={`${layer} col-start-1 row-start-1 z-10 h-full w-full resize-none overflow-hidden border-0 bg-transparent text-transparent caret-text-primary outline-none`}
+      />
+
+      {enableMentions && (
+        <pre
+          aria-hidden="true"
+          className={`${layer} pointer-events-none col-start-1 row-start-1 z-20 text-transparent`}
+        >
+          {segments.map((segment, index) => {
+            const key = `${index}-${segment.text}`;
+            const name = segment.name;
+            if (segment.kind === "plain" || !name) {
+              return <span key={key}>{segment.text}</span>;
+            }
+            const strict = fieldStrict[name] ?? false;
+            return (
+              <span key={key} className="relative">
+                {segment.text}
+                <button
+                  type="button"
+                  tabIndex={-1}
+                  onMouseDown={(event) => event.preventDefault()}
+                  onMouseEnter={(event) =>
+                    openStrictFor(
+                      name,
+                      markerPosition(event.currentTarget),
+                      "hover",
+                    )
+                  }
+                  onMouseLeave={scheduleHoverClose}
+                  onClick={(event) =>
+                    openStrictFor(
+                      name,
+                      markerPosition(event.currentTarget),
+                      "click",
+                    )
+                  }
+                  className={`pointer-events-auto absolute top-0.5 left-full ml-0.5 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full bg-accent-subtle/60 font-sans text-xs leading-none font-bold ${
+                    strict ? MARKER_CLASSES.required : MARKER_CLASSES.optional
+                  }`}
+                >
+                  <span className={strict ? "translate-y-[1.5px]" : undefined}>
+                    {strict ? "*" : "?"}
+                  </span>
+                </button>
+              </span>
+            );
+          })}
+          {"​"}
+        </pre>
+      )}
+
+      <div ref={mirrorRef} aria-hidden="true" className="absolute" />
+
+      {enableMentions && isOpen && (
+        <MentionDropdown
+          dropdownRef={dropdownRef}
+          position={position}
+          activeIndex={activeIndex}
+          pendingField={pendingField}
+          stage={stage}
+          columnOptions={columnOptions}
+          typeOptions={typeOptions}
+          strictOptions={strictOptions}
+          onPickColumn={pickColumn}
+          onPickType={pickType}
+          onPickStrict={pickStrict}
+          onMouseEnter={cancelHoverClose}
+          onMouseLeave={scheduleHoverClose}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/app/components/assessment/home/AssessorRow.tsx b/app/components/assessment/home/AssessorRow.tsx
new file mode 100644
index 00000000..9ff91eb6
--- /dev/null
+++ b/app/components/assessment/home/AssessorRow.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { TrashIcon } from "@/app/components/icons";
+import { formatRelativeTime } from "@/app/lib/utils";
+import AssessorVersionChips from "./AssessorVersionChips";
+import AssessorVersionList from "./AssessorVersionList";
+import type { AssessorRowProps } from "@/app/lib/types/assessment";
+
+const CHIP_COUNT = 2;
+
+export default function AssessorRow({
+  assessor,
+  selection,
+  versions,
+  isExpanded,
+  deletingKey,
+  onSelectAssessor,
+  onSelectVersion,
+  onToggleExpanded,
+  onRequestDeleteAssessor,
+  onRequestDeleteVersion,
+}: AssessorRowProps) {
+  const isCurrent = selection?.configId === assessor.id;
+  const selectedVersion = isCurrent ? (selection?.version ?? null) : null;
+
+  return (
+    <div
+      className={`rounded-lg border border-l-[3px] bg-bg-primary p-3.5 transition-shadow ${
+        isCurrent
+          ? "border-accent-primary border-l-accent-primary shadow-[0_0_0_1px_var(--color-accent-primary)]"
+          : "border-border border-l-accent-subtle hover:shadow-sm"
+      }`}
+    >
+      <div className="flex items-start gap-2.5">
+        <button
+          type="button"
+          onClick={() => onSelectAssessor(assessor.id)}
+          aria-pressed={isCurrent}
+          title="Select this assessor — its latest version is picked automatically"
+          className="min-w-0 flex-1 cursor-pointer text-left"
+        >
+          <span className="block truncate text-sm font-semibold text-text-primary">
+            {assessor.name}
+          </span>
+          <span className="mt-0.5 block truncate text-xs text-text-secondary">
+            {assessor.description ?? "No description"}
+          </span>
+          <span className="mt-0.5 block truncate text-xs text-text-secondary">
+            Updated {formatRelativeTime(assessor.updated_at)}
+            {versions && (
+              <>
+                <span className="mx-1.5 text-border">·</span>
+                {versions.length} version{versions.length === 1 ? "" : "s"}
+              </>
+            )}
+          </span>
+        </button>
+
+        <AssessorVersionChips
+          assessor={assessor}
+          versions={versions}
+          chipCount={CHIP_COUNT}
+          selectedVersion={selectedVersion}
+          isExpanded={isExpanded}
+          onSelectVersion={onSelectVersion}
+          onToggleExpanded={onToggleExpanded}
+        />
+
+        <button
+          type="button"
+          disabled={deletingKey === assessor.id}
+          onClick={() => onRequestDeleteAssessor(assessor)}
+          aria-label={`Delete ${assessor.name}`}
+          title="Delete this assessor and all its versions"
+          className="mt-0.5 inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md border border-border bg-bg-primary text-text-secondary transition-colors hover:border-status-error hover:text-status-error-text disabled:cursor-default disabled:opacity-40"
+        >
+          <TrashIcon className="w-3 h-3" />
+        </button>
+      </div>
+
+      {isExpanded && (
+        <AssessorVersionList
+          configId={assessor.id}
+          versions={versions}
+          selectedVersion={selectedVersion}
+          deletingKey={deletingKey}
+          onSelectVersion={onSelectVersion}
+          onRequestDeleteVersion={onRequestDeleteVersion}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/app/components/assessment/home/AssessorVersionChips.tsx b/app/components/assessment/home/AssessorVersionChips.tsx
new file mode 100644
index 00000000..11b8a3e8
--- /dev/null
+++ b/app/components/assessment/home/AssessorVersionChips.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { ChevronDownIcon } from "@/app/components/icons";
+import type { AssessorVersionChipsProps } from "@/app/lib/types/assessment";
+
+const chipBase =
+  "rounded-full border px-2.5 py-[3px] text-[11px] font-semibold transition-colors cursor-pointer";
+const chipIdle =
+  "border-border bg-bg-secondary text-text-secondary hover:border-accent-muted hover:text-text-primary";
+const chipSelected = "border-accent-primary bg-accent-primary text-white";
+
+export default function AssessorVersionChips({
+  assessor,
+  versions,
+  chipCount,
+  selectedVersion,
+  isExpanded,
+  onSelectVersion,
+  onToggleExpanded,
+}: AssessorVersionChipsProps) {
+  const recent = (versions ?? []).slice(0, chipCount);
+  const hiddenCount = (versions?.length ?? 0) - recent.length;
+  const expandTitle = isExpanded
+    ? "Hide versions"
+    : versions
+      ? `Show ${hiddenCount} older version${hiddenCount === 1 ? "" : "s"}`
+      : "Show versions";
+
+  return (
+    <div className="flex shrink-0 items-center gap-1.5 pt-0.5">
+      {recent.map(({ version }) => (
+        <button
+          key={version}
+          type="button"
+          onClick={() => onSelectVersion(assessor.id, version)}
+          aria-pressed={selectedVersion === version}
+          className={`${chipBase} ${
+            selectedVersion === version ? chipSelected : chipIdle
+          }`}
+        >
+          v{version}
+        </button>
+      ))}
+
+      <button
+        type="button"
+        onClick={() => onToggleExpanded(assessor.id)}
+        aria-expanded={isExpanded}
+        aria-label={`Show all versions of ${assessor.name}`}
+        title={expandTitle}
+        className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md border border-border bg-bg-primary text-text-secondary transition-colors hover:border-accent-muted hover:text-text-primary"
+      >
+        <ChevronDownIcon
+          className={`w-3 h-3 transition-transform ${isExpanded ? "rotate-180" : ""}`}
+        />
+      </button>
+    </div>
+  );
+}
diff --git a/app/components/assessment/home/AssessorVersionList.tsx b/app/components/assessment/home/AssessorVersionList.tsx
new file mode 100644
index 00000000..a4f86e8d
--- /dev/null
+++ b/app/components/assessment/home/AssessorVersionList.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { TrashIcon } from "@/app/components/icons";
+import type { AssessorVersionListProps } from "@/app/lib/types/assessment";
+
+export default function AssessorVersionList({
+  configId,
+  versions,
+  selectedVersion,
+  deletingKey,
+  onSelectVersion,
+  onRequestDeleteVersion,
+}: AssessorVersionListProps) {
+  if (!versions) {
+    return (
+      <p className="mt-2.5 border-t border-border pt-2 text-xs text-text-secondary">
+        Loading versions…
+      </p>
+    );
+  }
+
+  return (
+    <ul className="mt-2.5 flex max-h-32 flex-col gap-1.5 overflow-y-auto border-t border-border pt-2">
+      {versions.map((version) => {
+        const isSelected = selectedVersion === version.version;
+        const isDeleting = deletingKey === `${configId}:v${version.version}`;
+        return (
+          <li key={version.id} className="flex items-center gap-1.5">
+            <button
+              type="button"
+              onClick={() => onSelectVersion(configId, version.version)}
+              aria-pressed={isSelected}
+              className={`flex min-w-0 flex-1 cursor-pointer items-center gap-2.5 rounded-lg border px-2.5 py-1.5 text-left transition-colors ${
+                isSelected
+                  ? "border-accent-primary bg-accent-primary/10"
+                  : "border-border bg-bg-secondary hover:border-accent-muted"
+              }`}
+            >
+              <span className="min-w-[22px] shrink-0 text-[11px] font-bold text-text-primary">
+                v{version.version}
+              </span>
+              <span
+                className={`min-w-0 flex-1 truncate text-xs ${
+                  isSelected ? "text-text-primary" : "text-text-secondary"
+                }`}
+              >
+                {version.commit_message ?? "No note"}
+              </span>
+            </button>
+            <button
+              type="button"
+              disabled={isDeleting}
+              onClick={() => onRequestDeleteVersion(configId, version.version)}
+              aria-label={`Delete version v${version.version}`}
+              title={`Delete v${version.version}`}
+              className="inline-flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md border border-border bg-bg-primary text-text-secondary transition-colors hover:border-status-error hover:text-status-error-text disabled:cursor-default disabled:opacity-40"
+            >
+              <TrashIcon className="w-3 h-3" />
+            </button>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}
diff --git a/app/components/assessment/home/AssessorsPanel.tsx b/app/components/assessment/home/AssessorsPanel.tsx
new file mode 100644
index 00000000..9c8abbb6
--- /dev/null
+++ b/app/components/assessment/home/AssessorsPanel.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import { useState } from "react";
+import { PlusIcon, SearchIcon } from "@/app/components/icons";
+import { Button } from "@/app/components/ui";
+import AssessorRow from "./AssessorRow";
+import DeleteAssessorDialog from "./DeleteAssessorDialog";
+import type {
+  AssessorsPanelProps,
+  DeleteTarget,
+} from "@/app/lib/types/assessment";
+import HomePanel from "./HomePanel";
+
+export default function AssessorsPanel({
+  home,
+  onNewAssessor,
+  onEditVersion,
+}: AssessorsPanelProps) {
+  const { assessors, selection } = home;
+  const [pendingDelete, setPendingDelete] = useState<DeleteTarget | null>(null);
+
+  return (
+    <HomePanel
+      title="Assessors"
+      className="min-h-0 w-full flex-1 border-b border-border bg-bg-secondary lg:w-[52%] lg:max-w-[760px] lg:flex-none lg:border-r lg:border-b-0"
+      countLabel={`${assessors.length} assessor${assessors.length === 1 ? "" : "s"}`}
+      cursor={{
+        hasPrev: home.hasPrevAssessors,
+        hasNext: home.hasNextAssessors,
+        onPrev: home.showPrevAssessors,
+        onNext: home.showNextAssessors,
+      }}
+      headerActions={
+        <>
+          <div className="relative min-w-0 flex-1">
+            <SearchIcon className="pointer-events-none absolute top-1/2 left-3 w-3.5 h-3.5 -translate-y-1/2 text-text-secondary" />
+            <input
+              type="search"
+              value={home.assessorSearch}
+              onChange={(event) => home.setAssessorSearch(event.target.value)}
+              placeholder="Search assessors..."
+              aria-label="Search assessors"
+              className="w-full rounded-full border border-border bg-bg-primary py-1.5 pr-3 pl-8 text-[13px] text-text-primary transition-colors placeholder:text-neutral-400 focus:border-accent-primary focus:outline-none"
+            />
+          </div>
+          <Button
+            size="sm"
+            className="shrink-0"
+            onClick={onNewAssessor}
+            title="Create a new assessor from scratch"
+          >
+            <PlusIcon className="w-3.5 h-3.5" />
+            New
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            className="shrink-0"
+            disabled={!selection}
+            onClick={onEditVersion}
+            title={
+              selection
+                ? `Edit v${selection.version} — saving creates the next version`
+                : "Select an assessor version on the left to edit it"
+            }
+          >
+            Edit
+          </Button>
+        </>
+      }
+    >
+      {assessors.map((assessor) => (
+        <AssessorRow
+          key={assessor.id}
+          assessor={assessor}
+          selection={selection}
+          versions={home.versionsByAssessor[assessor.id]}
+          isExpanded={home.expandedAssessorIds.has(assessor.id)}
+          deletingKey={home.deletingKey}
+          onSelectAssessor={home.selectAssessor}
+          onSelectVersion={home.selectVersion}
+          onToggleExpanded={home.toggleAssessorExpanded}
+          onRequestDeleteAssessor={(target) =>
+            setPendingDelete({
+              kind: "assessor",
+              configId: target.id,
+              name: target.name,
+            })
+          }
+          onRequestDeleteVersion={(configId, version) =>
+            setPendingDelete({ kind: "version", configId, version })
+          }
+        />
+      ))}
+
+      {assessors.length === 0 && (
+        <p
+          role="status"
+          className="py-12 text-center text-[13px] text-text-secondary"
+        >
+          {home.assessorSearch
+            ? "No assessors match your search."
+            : "No assessors yet — start with New."}
+        </p>
+      )}
+
+      {pendingDelete && (
+        <DeleteAssessorDialog
+          target={pendingDelete}
+          onCancel={() => setPendingDelete(null)}
+          onConfirm={() => {
+            const target = pendingDelete;
+            setPendingDelete(null);
+            void (target.kind === "assessor"
+              ? home.deleteAssessor(target.configId)
+              : home.deleteAssessorVersion(target.configId, target.version));
+          }}
+        />
+      )}
+    </HomePanel>
+  );
+}
diff --git a/app/components/assessment/home/DeleteAssessorDialog.tsx b/app/components/assessment/home/DeleteAssessorDialog.tsx
new file mode 100644
index 00000000..45583266
--- /dev/null
+++ b/app/components/assessment/home/DeleteAssessorDialog.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { WarningIcon } from "@/app/components/icons";
+import { Button, Modal } from "@/app/components/ui";
+import type { DeleteAssessorDialogProps } from "@/app/lib/types/assessment";
+
+export default function DeleteAssessorDialog({
+  target,
+  onCancel,
+  onConfirm,
+}: DeleteAssessorDialogProps) {
+  const isAssessor = target.kind === "assessor";
+
+  return (
+    <Modal
+      open
+      onClose={onCancel}
+      maxWidth="max-w-md"
+      maxHeight="max-h-[90vh]"
+      showClose={false}
+    >
+      <div className="px-6 py-5">
+        <div className="flex items-start gap-3">
+          <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-status-error-bg text-status-error">
+            <WarningIcon className="w-5 h-5" />
+          </span>
+          <div>
+            <h3 className="text-sm font-semibold text-text-primary">
+              {isAssessor ? "Delete assessor" : "Delete version"}
+            </h3>
+            <p className="mt-1 text-sm text-text-secondary">
+              {isAssessor ? (
+                <>
+                  Are you sure you want to delete{" "}
+                  <b className="break-all text-text-primary">{target.name}</b>{" "}
+                  and every version saved under it? Runs already made with it
+                  stay. This action cannot be undone.
+                </>
+              ) : (
+                <>
+                  Are you sure you want to delete{" "}
+                  <b className="text-text-primary">v{target.version}</b>? This
+                  action cannot be undone.
+                </>
+              )}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center justify-end gap-3 border-t border-border px-6 py-4">
+        <Button type="button" variant="outline" onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button type="button" variant="danger" onClick={onConfirm}>
+          Delete
+        </Button>
+      </div>
+    </Modal>
+  );
+}
diff --git a/app/components/assessment/home/HomePanel.tsx b/app/components/assessment/home/HomePanel.tsx
new file mode 100644
index 00000000..dee58b8f
--- /dev/null
+++ b/app/components/assessment/home/HomePanel.tsx
@@ -0,0 +1,46 @@
+import { CursorPager, Pager } from "@/app/components/ui";
+import type { HomePanelProps } from "@/app/lib/types/assessment";
+
+export default function HomePanel({
+  title,
+  headerActions,
+  banner,
+  children,
+  countLabel,
+  page,
+  pages,
+  onGoto,
+  cursor,
+  className = "",
+}: HomePanelProps) {
+  return (
+    <section className={`flex min-h-0 min-w-0 flex-col ${className}`}>
+      <div className="flex h-14 shrink-0 items-center gap-2 px-5">
+        <h2 className="shrink-0 text-base font-semibold text-text-primary">
+          {title}
+        </h2>
+        {headerActions}
+      </div>
+
+      {banner}
+
+      <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto px-5 pb-4">
+        {children}
+      </div>
+
+      <div className="flex h-12 shrink-0 items-center justify-between gap-3 border-t border-border bg-bg-primary px-5">
+        <span className="text-xs text-text-secondary">{countLabel}</span>
+        {cursor ? (
+          <CursorPager {...cursor} label={`${title} pagination`} />
+        ) : (
+          <Pager
+            page={page ?? 1}
+            pages={pages ?? 1}
+            onGoto={onGoto ?? (() => {})}
+            label={`${title} pagination`}
+          />
+        )}
+      </div>
+    </section>
+  );
+}
diff --git a/app/components/assessment/home/HomeView.tsx b/app/components/assessment/home/HomeView.tsx
new file mode 100644
index 00000000..961787cd
--- /dev/null
+++ b/app/components/assessment/home/HomeView.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { LoaderBox } from "@/app/components/ui";
+import Stepper from "@/app/components/assessment/Stepper";
+import { ASSESSMENT_WIZARD_STEPS } from "@/app/lib/assessment/constants";
+import { useAssessmentHome } from "@/app/hooks";
+import AssessorsPanel from "./AssessorsPanel";
+import RunsPanel from "./RunsPanel";
+import type { HomeViewProps, WizardContext } from "@/app/lib/types/assessment";
+
+const NO_COMPLETED_STEPS = new Set<number>();
+const NO_STEP_CLICK = () => {};
+
+export default function HomeView({
+  initialSelection,
+  onNewAssessor,
+  onEditVersion,
+  onNewRun,
+}: HomeViewProps) {
+  const home = useAssessmentHome(initialSelection);
+  const { selection } = home;
+
+  const contextForSelection = (): WizardContext | null => {
+    if (!selection) return null;
+    const assessor = home.assessors.find(
+      (item) => item.id === selection.configId,
+    );
+    return {
+      configId: selection.configId,
+      version: selection.version,
+      assessorName: assessor?.name ?? "Assessor",
+    };
+  };
+
+  const openWith = (open: (context: WizardContext) => void) => () => {
+    const context = contextForSelection();
+    if (context) open(context);
+  };
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <Stepper
+        steps={ASSESSMENT_WIZARD_STEPS}
+        currentStep={0}
+        completedSteps={NO_COMPLETED_STEPS}
+        onStepClick={NO_STEP_CLICK}
+        locked
+        onHome={() => {}}
+        trailing={
+          <span className="hidden shrink-0 text-xs text-text-secondary xl:block">
+            Start with “New”, or select a version to edit or run
+          </span>
+        }
+      />
+
+      {home.error && (
+        <p
+          role="alert"
+          className="border-b border-status-error-border bg-status-error-bg px-6 py-2 text-xs text-status-error-text"
+        >
+          {home.error}
+        </p>
+      )}
+
+      {home.isLoading ? (
+        <div className="flex flex-1 items-center justify-center p-8">
+          <LoaderBox message="Loading assessors and runs..." />
+        </div>
+      ) : (
+        <div className="flex min-h-0 flex-1 flex-col overflow-hidden lg:flex-row">
+          <AssessorsPanel
+            home={home}
+            onNewAssessor={onNewAssessor}
+            onEditVersion={openWith(onEditVersion)}
+          />
+          <RunsPanel home={home} onNewRun={openWith(onNewRun)} />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/assessment/home/RunRow.tsx b/app/components/assessment/home/RunRow.tsx
new file mode 100644
index 00000000..b3adf0c4
--- /dev/null
+++ b/app/components/assessment/home/RunRow.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import ChildRunStageProgress from "@/app/components/assessment/ChildRunStageProgress";
+import {
+  ASSESSMENT_CARD_CLASSES,
+  STATUS_BADGE_CLASSES,
+} from "@/app/lib/assessment/constants";
+import { formatStatusLabel, getResultTone } from "@/app/lib/assessment/results";
+import RunRowActions from "./RunRowActions";
+import RunRowMeta from "./RunRowMeta";
+import type { RunRowProps } from "@/app/lib/types/assessment";
+
+export default function RunRow({ row }: RunRowProps) {
+  const { assessment, stages, isActive } = row;
+  const tone = getResultTone(assessment.status);
+
+  return (
+    <article
+      className={`rounded-lg border border-l-[3px] border-border bg-bg-primary px-4 py-3 ${ASSESSMENT_CARD_CLASSES[tone]}`}
+    >
+      <div className="flex items-center justify-between gap-2">
+        <h3 className="min-w-0 truncate text-sm font-semibold text-text-primary">
+          {assessment.experiment_name}
+        </h3>
+        <span
+          className={`shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide uppercase ${STATUS_BADGE_CLASSES[tone]}`}
+        >
+          {formatStatusLabel(assessment.status)}
+        </span>
+      </div>
+
+      <RunRowMeta row={row} />
+
+      {assessment.error && (
+        <p className="mt-1.5 text-xs text-status-error-text">
+          {assessment.error}
+        </p>
+      )}
+
+      {isActive && stages.length > 0 && (
+        <div className="mt-2.5">
+          <ChildRunStageProgress stages={stages} />
+        </div>
+      )}
+
+      <RunRowActions row={row} />
+    </article>
+  );
+}
diff --git a/app/components/assessment/home/RunRowActions.tsx b/app/components/assessment/home/RunRowActions.tsx
new file mode 100644
index 00000000..cb71c89f
--- /dev/null
+++ b/app/components/assessment/home/RunRowActions.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { EyeIcon } from "@/app/components/icons";
+import type {
+  HomeRunRow,
+  RunRowActionsProps,
+} from "@/app/lib/types/assessment";
+
+function resultsHref(row: HomeRunRow): string {
+  const { assessment } = row;
+  const version = row.version === null ? "" : ` v${row.version}`;
+  const title = `${assessment.experiment_name ?? "Run"} · ${row.assessorName}${version}`;
+  const query = new URLSearchParams({ title, method: assessment.method });
+  return `/assessment/results/${assessment.assessment_id}?${query}`;
+}
+
+export default function RunRowActions({ row }: RunRowActionsProps) {
+  const href = resultsHref(row);
+
+  return (
+    <div className="mt-2.5 flex flex-wrap items-center justify-end gap-2">
+      <a
+        href={href}
+        className="inline-flex cursor-pointer items-center gap-2 rounded-md border border-border bg-bg-primary px-3 py-1.5 text-sm font-medium text-text-primary transition-colors hover:bg-neutral-50"
+      >
+        <EyeIcon className="w-3.5 h-3.5" />
+        View results
+      </a>
+    </div>
+  );
+}
diff --git a/app/components/assessment/home/RunRowMeta.tsx b/app/components/assessment/home/RunRowMeta.tsx
new file mode 100644
index 00000000..4c56e42a
--- /dev/null
+++ b/app/components/assessment/home/RunRowMeta.tsx
@@ -0,0 +1,31 @@
+import { DatabaseIcon } from "@/app/components/icons";
+import { formatRelativeTime } from "@/app/lib/utils";
+import type { RunRowMetaProps } from "@/app/lib/types/assessment";
+
+export default function RunRowMeta({ row }: RunRowMetaProps) {
+  const { assessment, assessorName, version, cost } = row;
+
+  return (
+    <>
+      <p className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-text-secondary">
+        <span>Started {formatRelativeTime(assessment.inserted_at)}</span>
+        <span className="text-border">·</span>
+        <span className="truncate">
+          {assessorName}
+          {version === null ? "" : ` v${version}`}
+        </span>
+        {cost && (
+          <>
+            <span className="text-border">·</span>
+            <span>{cost}</span>
+          </>
+        )}
+      </p>
+
+      <p className="mt-1 flex items-center gap-1.5 text-xs text-text-secondary">
+        <DatabaseIcon className="w-3.5 h-3.5 shrink-0" />
+        <span className="truncate">{assessment.submission_name ?? "—"}</span>
+      </p>
+    </>
+  );
+}
diff --git a/app/components/assessment/home/RunsPanel.tsx b/app/components/assessment/home/RunsPanel.tsx
new file mode 100644
index 00000000..871632db
--- /dev/null
+++ b/app/components/assessment/home/RunsPanel.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { Button, Select } from "@/app/components/ui";
+import { PlusIcon } from "@/app/components/icons";
+import RunRow from "./RunRow";
+import HomePanel from "./HomePanel";
+import type { RunsPanelProps } from "@/app/lib/types/assessment";
+
+export default function RunsPanel({ home, onNewRun }: RunsPanelProps) {
+  const { runSlice, selection } = home;
+  const assessorName = selection
+    ? home.assessors.find((item) => item.id === selection.configId)?.name
+    : null;
+
+  return (
+    <HomePanel
+      title="Runs"
+      className="min-h-0 flex-1 bg-bg-secondary"
+      countLabel={`${runSlice.total} run${runSlice.total === 1 ? "" : "s"}`}
+      page={runSlice.page}
+      pages={runSlice.pages}
+      onGoto={home.gotoRunPage}
+      headerActions={
+        <div className="ml-auto flex min-w-0 items-center gap-2">
+          <Select
+            aria-label="Filter runs"
+            value={home.runFilter}
+            options={home.runFilterOptions}
+            onChange={(event) => home.setRunFilter(event.target.value)}
+            className="max-w-[220px] text-[13px]"
+          />
+          <Button
+            size="sm"
+            className="shrink-0"
+            disabled={!selection}
+            onClick={onNewRun}
+            title={
+              selection
+                ? `Run ${assessorName ?? "this assessor"} v${selection.version} on a submission set`
+                : "Select an assessor version on the left to start a run"
+            }
+          >
+            <PlusIcon className="w-3.5 h-3.5" />
+            New run
+          </Button>
+        </div>
+      }
+    >
+      {runSlice.items.map((row) => (
+        <RunRow key={row.assessment.assessment_id} row={row} />
+      ))}
+
+      {runSlice.items.length === 0 && (
+        <p
+          role="status"
+          className="py-12 text-center text-[13px] text-text-secondary"
+        >
+          {selection
+            ? "No runs yet for this version — start one with New run."
+            : "No runs for this filter. Select an assessor version on the left to start one."}
+        </p>
+      )}
+    </HomePanel>
+  );
+}
diff --git a/app/components/assessment/model/ModelChip.tsx b/app/components/assessment/model/ModelChip.tsx
new file mode 100644
index 00000000..3be8f3a7
--- /dev/null
+++ b/app/components/assessment/model/ModelChip.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { ChevronDownIcon, GearIcon } from "@/app/components/icons";
+import ModelPicker from "./ModelPicker";
+import type { ModelChipProps } from "@/app/lib/types/assessment";
+
+export default function ModelChip({
+  step,
+  selection,
+  onModel,
+  onParam,
+}: ModelChipProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const onPointerDown = (event: MouseEvent) => {
+      if (!wrapperRef.current?.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setIsOpen(false);
+    };
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isOpen]);
+
+  return (
+    <div ref={wrapperRef} className="relative shrink-0">
+      <button
+        type="button"
+        aria-expanded={isOpen}
+        aria-haspopup="dialog"
+        title="Choose the model for this step"
+        onClick={() => setIsOpen((current) => !current)}
+        className="inline-flex cursor-pointer items-center gap-2 rounded-full border-[1.5px] border-accent-primary bg-accent-primary/[0.07] px-3.5 py-1.5 text-xs font-semibold text-accent-primary transition-colors hover:bg-accent-primary/[0.14]"
+      >
+        <GearIcon className="h-3.5 w-3.5" />
+        <span className="text-[10px] tracking-wider uppercase opacity-75">
+          Model
+        </span>
+        <b className="font-mono text-[12.5px] font-semibold">
+          {selection.model}
+        </b>
+        <ChevronDownIcon className="h-3 w-3" />
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-full right-0 z-50 mt-1.5">
+          <ModelPicker
+            step={step}
+            selection={selection}
+            onModel={onModel}
+            onParam={onParam}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/assessment/model/ModelPicker.tsx b/app/components/assessment/model/ModelPicker.tsx
new file mode 100644
index 00000000..9bb02208
--- /dev/null
+++ b/app/components/assessment/model/ModelPicker.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { Select } from "@/app/components/ui";
+import ConfigParamControl from "@/app/components/assessment/prompt-config/ConfigParamControl";
+import {
+  PROVIDER_OPTIONS,
+  getModelConfigDefinition,
+  getModelsByProvider,
+} from "@/app/lib/data/assessmentModels";
+import type { ModelPickerProps } from "@/app/lib/types/assessment";
+import type { ProviderType } from "@/app/lib/types/configs";
+
+const fieldLabel =
+  "block text-[10px] font-semibold tracking-wider uppercase text-text-secondary";
+
+export default function ModelPicker({
+  step,
+  selection,
+  onModel,
+  onParam,
+}: ModelPickerProps) {
+  const models = getModelsByProvider(selection.provider);
+  const definition = getModelConfigDefinition(selection.model);
+
+  return (
+    <div className="w-[330px] overflow-hidden rounded-xl border border-border bg-bg-primary shadow-[0_16px_40px_rgba(0,0,0,0.14)]">
+      <div className="space-y-3 p-3.5">
+        <div className="space-y-1.5">
+          <label className={fieldLabel} htmlFor={`${step}-provider`}>
+            Provider
+          </label>
+          <Select
+            id={`${step}-provider`}
+            value={selection.provider}
+            options={PROVIDER_OPTIONS.map((option) => ({ ...option }))}
+            onChange={(event) =>
+              onModel(step, event.target.value as ProviderType, "")
+            }
+          />
+        </div>
+
+        <div className="space-y-1.5">
+          <label className={fieldLabel} htmlFor={`${step}-model`}>
+            Model
+          </label>
+          <Select
+            id={`${step}-model`}
+            value={selection.model}
+            options={models}
+            className="font-mono"
+            onChange={(event) =>
+              onModel(step, selection.provider, event.target.value)
+            }
+          />
+        </div>
+      </div>
+
+      <div className="border-t border-border bg-bg-secondary px-3.5 py-3">
+        <p className={fieldLabel}>Parameters · {selection.model}</p>
+        <div className="mt-2 space-y-3">
+          {Object.entries(definition).map(([key, param]) => (
+            <div key={key} className="space-y-1">
+              <div className="flex items-baseline justify-between gap-2">
+                <span className="text-xs font-medium text-text-primary">
+                  {key}
+                </span>
+                <span className="text-[10px] text-text-secondary">
+                  {param.description}
+                </span>
+              </div>
+              <ConfigParamControl
+                value={selection.params[key] ?? param.default}
+                definition={param}
+                onChange={(value) => onParam(step, key, value)}
+              />
+            </div>
+          ))}
+          {Object.keys(definition).length === 0 && (
+            <p className="text-xs text-text-secondary">
+              This model takes no tunable parameters.
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/assessment/output-schema/OutputSchemaModal.tsx b/app/components/assessment/output-schema/OutputSchemaModal.tsx
deleted file mode 100644
index 23ecd682..00000000
--- a/app/components/assessment/output-schema/OutputSchemaModal.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { Button, Modal } from "@/app/components/ui";
-import { CloseIcon } from "@/app/components/icons";
-import type { SchemaProperty, ValueSetter } from "@/app/lib/types/assessment";
-import { createProperty } from "@/app/lib/utils/outputSchema";
-import OutputSchemaEditorInner from "./OutputSchemaEditorInner";
-
-interface OutputSchemaModalProps {
-  open: boolean;
-  onClose: () => void;
-  schema: SchemaProperty[];
-  setSchema: ValueSetter<SchemaProperty[]>;
-}
-
-export default function OutputSchemaModal({
-  open,
-  onClose,
-  schema,
-  setSchema,
-}: OutputSchemaModalProps) {
-  const [draftSchema, setDraftSchema] = useState<SchemaProperty[]>([]);
-  const [mounted, setMounted] = useState(false);
-  const schemaRef = useRef(schema);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-  useEffect(() => {
-    schemaRef.current = schema;
-  }, [schema]);
-  useEffect(() => {
-    if (open) {
-      setDraftSchema(
-        JSON.parse(JSON.stringify(schemaRef.current)) as SchemaProperty[],
-      );
-    }
-  }, [open]);
-
-  if (!open || !mounted) return null;
-
-  const handleSave = () => {
-    setSchema(draftSchema);
-    onClose();
-  };
-  const handleClose = () => {
-    setSchema(draftSchema);
-    onClose();
-  };
-  const handleReset = () => {
-    setDraftSchema([createProperty()]);
-  };
-
-  return createPortal(
-    <Modal
-      open
-      onClose={handleClose}
-      maxWidth="!w-[760px] !max-w-[calc(100vw-2rem)]"
-      maxHeight="max-h-[85vh]"
-      showClose={false}
-    >
-      <div className="flex items-center justify-between px-6 pt-6 pb-2">
-        <h2 className="text-lg font-semibold text-text-primary">
-          Response format
-        </h2>
-        <button
-          type="button"
-          onClick={handleClose}
-          className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-bg-secondary hover:text-text-primary"
-          aria-label="Close response format"
-        >
-          <CloseIcon className="w-5 h-5" />
-        </button>
-      </div>
-
-      <p className="px-6 text-sm text-text-secondary">
-        Define the structure of the AI response. Use the visual editor or switch
-        to JSON.
-      </p>
-
-      <div className="flex-1 overflow-y-auto px-6 py-4">
-        <OutputSchemaEditorInner
-          schema={draftSchema}
-          setSchema={setDraftSchema}
-        />
-      </div>
-
-      <div className="flex items-center justify-end gap-3 border-t border-border px-6 py-4">
-        <Button type="button" variant="outline" onClick={handleReset}>
-          Reset
-        </Button>
-        <Button type="button" onClick={handleSave}>
-          Save
-        </Button>
-      </div>
-    </Modal>,
-    document.body,
-  );
-}
diff --git a/app/components/assessment/prompt-config/AssessmentConfiguration.tsx b/app/components/assessment/prompt-config/AssessmentConfiguration.tsx
deleted file mode 100644
index a0465778..00000000
--- a/app/components/assessment/prompt-config/AssessmentConfiguration.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-"use client";
-
-import { RadioGroup } from "@/app/components/ui";
-import type { AssessmentConfigurationProps } from "@/app/lib/types/assessment";
-import type { ConfigMode } from "@/app/lib/types/assessment/config";
-import ConfigCreator from "./ConfigCreator";
-import SavedConfigs from "./SavedConfigs";
-import SelectedConfigs from "./SelectedConfigs";
-
-export default function AssessmentConfiguration({
-  configMode,
-  setConfigMode,
-  configs,
-  onRemoveConfig,
-  configCards,
-  searchQuery,
-  setSearchQuery,
-  isLoadingConfigs,
-  hasMoreConfigs,
-  nextConfigSkip,
-  expandedConfigId,
-  versionStateByConfig,
-  latestModelByConfig,
-  loadingSelectionKeys,
-  isSelected,
-  onLoadMoreConfigs,
-  onLoadVersions,
-  onToggleConfigExpansion,
-  onToggleVersionSelection,
-  currentProvider,
-  currentModel,
-  providerModels,
-  currentParamDefs,
-  draftParams,
-  configName,
-  commitMessage,
-  isSaving,
-  setConfigName,
-  setCommitMessage,
-  onProviderChange,
-  onModelChange,
-  onParamChange,
-  onSaveConfig,
-}: AssessmentConfigurationProps) {
-  return (
-    <details open className="rounded-2xl border border-border bg-bg-primary">
-      <summary className="flex cursor-pointer items-center justify-between px-4 py-3">
-        <div>
-          <div className="text-sm font-semibold text-text-primary">
-            AI Configuration
-          </div>
-          <div className="mt-1 text-xs text-text-secondary">
-            {configs.length > 0
-              ? `${configs.length} selected`
-              : "Choose at least one configuration"}
-          </div>
-        </div>
-      </summary>
-
-      {configs.length > 0 && (
-        <div className="border-t border-border px-4 py-4">
-          <SelectedConfigs configs={configs} onRemove={onRemoveConfig} />
-        </div>
-      )}
-
-      <div className="border-t border-border px-4 py-4">
-        <div className="mb-4">
-          <RadioGroup<ConfigMode>
-            value={configMode}
-            onChange={setConfigMode}
-            ariaLabel="Config source"
-            options={[
-              { value: "existing", label: "Saved" },
-              { value: "create", label: "New" },
-            ]}
-          />
-        </div>
-
-        {configMode === "existing" && (
-          <SavedConfigs
-            configCards={configCards}
-            searchQuery={searchQuery}
-            setSearchQuery={setSearchQuery}
-            isLoadingConfigs={isLoadingConfigs}
-            hasMoreConfigs={hasMoreConfigs}
-            nextConfigSkip={nextConfigSkip}
-            expandedConfigId={expandedConfigId}
-            versionStateByConfig={versionStateByConfig}
-            latestModelByConfig={latestModelByConfig}
-            loadingSelectionKeys={loadingSelectionKeys}
-            isSelected={isSelected}
-            onLoadMoreConfigs={onLoadMoreConfigs}
-            onLoadVersions={onLoadVersions}
-            onToggleConfigExpansion={onToggleConfigExpansion}
-            onToggleVersionSelection={onToggleVersionSelection}
-          />
-        )}
-
-        {configMode === "create" && (
-          <ConfigCreator
-            currentProvider={currentProvider}
-            currentModel={currentModel}
-            providerModels={providerModels}
-            currentParamDefs={currentParamDefs}
-            draftParams={draftParams}
-            configName={configName}
-            commitMessage={commitMessage}
-            isSaving={isSaving}
-            setConfigName={setConfigName}
-            setCommitMessage={setCommitMessage}
-            onProviderChange={onProviderChange}
-            onModelChange={onModelChange}
-            onParamChange={onParamChange}
-            onSave={onSaveConfig}
-          />
-        )}
-      </div>
-    </details>
-  );
-}
diff --git a/app/components/assessment/prompt-config/ConfigCreator.tsx b/app/components/assessment/prompt-config/ConfigCreator.tsx
deleted file mode 100644
index 524f9d58..00000000
--- a/app/components/assessment/prompt-config/ConfigCreator.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { Button, Field, Select } from "@/app/components/ui";
-import { PROVIDER_OPTIONS } from "@/app/lib/data/assessmentModels";
-import type { ConfigCreatorProps } from "@/app/lib/types/assessment";
-import type { CompletionConfig } from "@/app/lib/types/configs";
-import ConfigParamControl from "./ConfigParamControl";
-
-const selectClass =
-  "w-full rounded-full border border-border bg-bg-primary px-2 py-2 text-sm text-text-primary outline-none focus:ring-1";
-
-export default function ConfigCreator({
-  currentProvider,
-  currentModel,
-  providerModels,
-  currentParamDefs,
-  draftParams,
-  configName,
-  commitMessage,
-  isSaving,
-  setConfigName,
-  setCommitMessage,
-  onProviderChange,
-  onModelChange,
-  onParamChange,
-  onSave,
-}: ConfigCreatorProps) {
-  const saveDisabled = isSaving || !configName.trim();
-
-  return (
-    <div className="space-y-4">
-      <div className="grid gap-3 sm:grid-cols-2">
-        <div>
-          <label className="mb-2 block text-xs font-semibold text-text-primary">
-            Provider
-          </label>
-          <Select
-            value={currentProvider}
-            onChange={(e) =>
-              onProviderChange(e.target.value as CompletionConfig["provider"])
-            }
-            className={selectClass}
-            options={[...PROVIDER_OPTIONS]}
-          />
-        </div>
-        <div>
-          <label className="mb-2 block text-xs font-semibold text-text-primary">
-            Model
-          </label>
-          <Select
-            value={currentModel}
-            onChange={(e) => onModelChange(e.target.value)}
-            className={selectClass}
-            options={providerModels}
-          />
-        </div>
-      </div>
-
-      <details className="rounded-xl border border-border bg-bg-secondary">
-        <summary className="cursor-pointer px-4 py-3 text-sm font-semibold text-text-primary">
-          Advanced
-        </summary>
-        <div className="px-4 pb-4">
-          {Object.entries(currentParamDefs).map(([paramKey, definition]) => (
-            <div
-              key={paramKey}
-              className="border-b border-border py-4 last:border-b-0"
-            >
-              <div className="mb-3 flex items-start justify-between gap-3">
-                <div>
-                  <div className="text-sm font-semibold text-text-primary">
-                    {paramKey}
-                  </div>
-                  <div className="mt-1 text-xs leading-5 text-text-secondary">
-                    {definition.description}
-                  </div>
-                </div>
-                <span className="rounded-full bg-bg-primary px-2 py-0.5 text-[11px] text-text-secondary">
-                  {String(definition.default)}
-                </span>
-              </div>
-              <ConfigParamControl
-                value={draftParams[paramKey] ?? definition.default}
-                definition={definition}
-                onChange={(value) => onParamChange(paramKey, value)}
-              />
-            </div>
-          ))}
-        </div>
-      </details>
-
-      <div className="grid gap-3">
-        <Field
-          label="AI Configuration Name"
-          value={configName}
-          onChange={setConfigName}
-          placeholder="Helpful grader"
-        />
-        <Field
-          label="Save note"
-          value={commitMessage}
-          onChange={setCommitMessage}
-          placeholder="Optional"
-        />
-      </div>
-
-      <Button
-        type="button"
-        fullWidth
-        onClick={() => void onSave()}
-        disabled={saveDisabled}
-      >
-        {isSaving ? "Saving..." : "Save behavior"}
-      </Button>
-    </div>
-  );
-}
diff --git a/app/components/assessment/prompt-config/PromptEditor.tsx b/app/components/assessment/prompt-config/PromptEditor.tsx
deleted file mode 100644
index 93b86d9f..00000000
--- a/app/components/assessment/prompt-config/PromptEditor.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-"use client";
-
-import { Button } from "@/app/components/ui";
-import { usePromptPlaceholderEditor } from "@/app/hooks/usePromptPlaceholderEditor";
-import type { SampleRow, ValueSetter } from "@/app/lib/types/assessment";
-
-interface PromptEditorProps {
-  value: string;
-  onChange: ValueSetter<string>;
-  previewMode: boolean;
-  placeholder: string;
-  emptyPreviewText: string;
-  textColumns?: string[];
-  sampleRow?: SampleRow;
-  enablePlaceholders?: boolean;
-}
-
-export default function PromptEditor({
-  value,
-  onChange,
-  previewMode,
-  placeholder,
-  emptyPreviewText,
-  textColumns = [],
-  sampleRow = {},
-  enablePlaceholders = true,
-}: PromptEditorProps) {
-  const {
-    textareaRef,
-    mirrorRef,
-    dropdownRef,
-    mentionQuery,
-    mentionIndex,
-    mentionPos,
-    mentionOptions,
-    setMentionIndex,
-    handleInput,
-    handleKeyDown,
-    insertMention,
-    insertPlaceholder,
-    usedColumns,
-    orderedColumns,
-    previewText,
-  } = usePromptPlaceholderEditor({
-    value,
-    onChange,
-    previewMode,
-    textColumns,
-    sampleRow,
-    enablePlaceholders,
-  });
-
-  if (previewMode) {
-    return (
-      <div className="h-[260px] overflow-y-auto whitespace-pre-wrap break-words rounded-xl border border-border bg-bg-secondary px-4 py-3 text-sm leading-7 text-text-primary">
-        {!value.trim() ? (
-          <span className="text-text-secondary">{emptyPreviewText}</span>
-        ) : enablePlaceholders && Object.keys(sampleRow).length === 0 ? (
-          <span className="text-text-secondary">
-            Sample data not available. Go back to Datasets and choose a row with
-            values.
-          </span>
-        ) : (
-          previewText || (
-            <span className="text-text-secondary">{emptyPreviewText}</span>
-          )
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <>
-      {enablePlaceholders && (
-        <div className="mb-3">
-          <div className="mb-2 text-xs text-text-secondary">
-            Use `@` or tap a column chip to insert placeholders.
-          </div>
-          <div className="flex flex-wrap gap-2">
-            {orderedColumns.map((col) => {
-              const isUsed = usedColumns.includes(col);
-              return (
-                <Button
-                  key={col}
-                  type="button"
-                  variant={isUsed ? "secondary" : "outline"}
-                  size="sm"
-                  onClick={() => insertPlaceholder(col)}
-                  className={`!rounded-full !px-3 !py-1.5 !font-mono !text-xs ${
-                    isUsed
-                      ? "!border-status-success-border !bg-status-success-bg !text-status-success-text"
-                      : "!bg-bg-primary"
-                  }`}
-                >
-                  {`{${col}}`}
-                </Button>
-              );
-            })}
-          </div>
-        </div>
-      )}
-
-      <div className="relative rounded-xl border border-border bg-bg-primary px-4 py-3">
-        <textarea
-          ref={textareaRef}
-          value={value}
-          onChange={(event) => {
-            onChange(event.target.value);
-            setTimeout(handleInput, 0);
-          }}
-          onKeyDown={handleKeyDown}
-          onSelect={handleInput}
-          placeholder={placeholder}
-          className="min-h-[260px] w-full resize-y border-0 bg-transparent px-0 py-0 text-sm leading-7 text-text-primary outline-none"
-        />
-        <div ref={mirrorRef} aria-hidden="true" />
-
-        {mentionQuery !== null && mentionOptions.length > 0 && mentionPos && (
-          <div
-            ref={dropdownRef}
-            className="absolute z-50 overflow-hidden rounded-xl border border-border bg-bg-primary shadow-lg"
-            style={{
-              top: `${mentionPos.top + 16}px`,
-              left: `${Math.max(16, Math.min(mentionPos.left + 16, 320))}px`,
-              minWidth: "220px",
-              maxHeight: "180px",
-              overflowY: "auto",
-            }}
-          >
-            {mentionOptions.map((col, idx) => (
-              <Button
-                key={col}
-                type="button"
-                variant="ghost"
-                size="sm"
-                fullWidth
-                className={`!justify-start !rounded-none !px-3 !py-2 !text-left !font-mono !text-sm !text-text-primary ${
-                  idx === mentionIndex ? "!bg-bg-secondary" : "!bg-bg-primary"
-                }`}
-                onMouseEnter={() => setMentionIndex(idx)}
-                onMouseDown={(event) => {
-                  event.preventDefault();
-                  insertMention(col);
-                }}
-              >
-                <span className="rounded bg-bg-secondary px-1.5 py-0.5 text-xs font-sans text-text-secondary">
-                  @
-                </span>
-                {col}
-              </Button>
-            ))}
-          </div>
-        )}
-      </div>
-    </>
-  );
-}
diff --git a/app/components/assessment/prompt-config/PromptPanel.tsx b/app/components/assessment/prompt-config/PromptPanel.tsx
deleted file mode 100644
index 1c96ec3f..00000000
--- a/app/components/assessment/prompt-config/PromptPanel.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { RadioGroup } from "@/app/components/ui";
-import type { PromptPanelProps } from "@/app/lib/types/assessment";
-
-type PromptViewMode = "edit" | "preview";
-import UserPrompt from "./UserPrompt";
-import SystemPrompt from "./SystemPrompt";
-
-export default function PromptPanel({
-  textColumns,
-  sampleRow,
-  systemInstruction,
-  setSystemInstruction,
-  promptTemplate,
-  setPromptTemplate,
-}: PromptPanelProps) {
-  const [viewMode, setViewMode] = useState<PromptViewMode>("edit");
-  const previewMode = viewMode === "preview";
-
-  return (
-    <section className="min-w-0 space-y-4">
-      <div className="flex justify-end">
-        <RadioGroup<PromptViewMode>
-          value={viewMode}
-          onChange={setViewMode}
-          ariaLabel="Prompt view mode"
-          options={[
-            { value: "edit", label: "Edit" },
-            { value: "preview", label: "Preview" },
-          ]}
-        />
-      </div>
-
-      <SystemPrompt
-        value={systemInstruction}
-        onChange={setSystemInstruction}
-        previewMode={previewMode}
-      />
-      <UserPrompt
-        textColumns={textColumns}
-        sampleRow={sampleRow}
-        promptTemplate={promptTemplate}
-        setPromptTemplate={setPromptTemplate}
-        previewMode={previewMode}
-      />
-    </section>
-  );
-}
diff --git a/app/components/assessment/prompt-config/ResponseSchema.tsx b/app/components/assessment/prompt-config/ResponseSchema.tsx
deleted file mode 100644
index b40940f1..00000000
--- a/app/components/assessment/prompt-config/ResponseSchema.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button } from "@/app/components/ui";
-import type { ResponseSchemaProps } from "@/app/lib/types/assessment";
-import { OutputSchemaModal } from "../OutputSchemaEditor";
-
-export default function ResponseSchema({
-  schema,
-  setSchema,
-  summary,
-  hasFields,
-}: ResponseSchemaProps) {
-  const [schemaModalOpen, setSchemaModalOpen] = useState(false);
-
-  return (
-    <>
-      <details open className="rounded-2xl border border-border bg-bg-primary">
-        <summary className="flex cursor-pointer items-center justify-between px-4 py-3">
-          <div className="min-w-0">
-            <div className="text-sm font-semibold text-text-primary">
-              Response Format
-            </div>
-            <div className="mt-1 text-xs text-text-secondary">{summary}</div>
-          </div>
-          <Button
-            type="button"
-            size="sm"
-            onClick={(event) => {
-              event.preventDefault();
-              setSchemaModalOpen(true);
-            }}
-          >
-            {hasFields ? "Edit" : "Set"}
-          </Button>
-        </summary>
-      </details>
-
-      <OutputSchemaModal
-        open={schemaModalOpen}
-        onClose={() => setSchemaModalOpen(false)}
-        schema={schema}
-        setSchema={setSchema}
-      />
-    </>
-  );
-}
diff --git a/app/components/assessment/prompt-config/SavedConfigCard.tsx b/app/components/assessment/prompt-config/SavedConfigCard.tsx
deleted file mode 100644
index 262ae437..00000000
--- a/app/components/assessment/prompt-config/SavedConfigCard.tsx
+++ /dev/null
@@ -1,286 +0,0 @@
-import { Button } from "@/app/components/ui";
-import { ChevronDownIcon } from "@/app/components/icons";
-import { formatRelativeTime } from "@/app/lib/utils";
-import type { ConfigPublic, ConfigVersionItems } from "@/app/lib/types/configs";
-import type {
-  SavedConfigCardProps,
-  VersionListState,
-} from "@/app/lib/types/assessment";
-
-function VersionSummary({
-  previewVersions,
-  knownVersionCount,
-}: {
-  previewVersions: ConfigVersionItems[];
-  knownVersionCount: number;
-}) {
-  return (
-    <div className="mt-2 flex items-center gap-1.5 text-[11px] text-text-secondary">
-      <span className="inline-flex items-center rounded-full border border-border bg-bg-secondary px-2 py-0.5 text-[10px] font-semibold text-text-secondary">
-        {previewVersions.length > 0
-          ? previewVersions.map((v) => `v${v.version}`).join(", ")
-          : "Versions"}
-      </span>
-      <span>
-        {previewVersions.length > 0
-          ? `${knownVersionCount} saved version${knownVersionCount === 1 ? "" : "s"}`
-          : 'Use "Show versions" to view history'}
-      </span>
-    </div>
-  );
-}
-
-function VersionPanel({
-  config,
-  versions,
-  expanded,
-  loadingSelectionKeys,
-  isSelected,
-  onLoadVersions,
-  onToggleVersionSelection,
-}: {
-  config: ConfigPublic;
-  versions: VersionListState;
-  expanded: boolean;
-  loadingSelectionKeys: Record<string, boolean>;
-  isSelected: (configId: string, version: number) => boolean;
-  onLoadVersions: (configId: string, skip: number) => void;
-  onToggleVersionSelection: (
-    config: ConfigPublic,
-    version: number,
-  ) => void | Promise<void>;
-}) {
-  return (
-    <div
-      className={`mt-2 overflow-hidden transition-all duration-300 ease-in-out ${
-        expanded ? "max-h-[22rem] opacity-100" : "max-h-0 opacity-0"
-      }`}
-      style={{ pointerEvents: expanded ? "auto" : "none" }}
-    >
-      <div className="rounded-[20px] border border-border bg-bg-secondary p-2.5">
-        <div className="mb-2 flex items-center justify-between gap-3">
-          <div>
-            <div className="text-sm font-semibold text-text-primary">
-              Saved versions
-            </div>
-            <div className="mt-0.5 text-xs text-text-secondary">
-              Pick a specific version to reuse.
-            </div>
-          </div>
-          <span className="inline-flex shrink-0 items-center rounded-full border border-border bg-bg-primary px-2 py-0.5 text-[10px] font-semibold text-text-secondary">
-            {versions.items.length}
-          </span>
-        </div>
-        {versions.isLoading && versions.items.length === 0 ? (
-          <div className="py-2 text-center text-xs text-text-secondary">
-            Loading versions...
-          </div>
-        ) : (
-          <div className="max-h-48 space-y-1.5 overflow-y-auto pr-1">
-            {versions.items.map((version) => {
-              const selected = isSelected(config.id, version.version);
-              const loading =
-                loadingSelectionKeys[`${config.id}:${version.version}`];
-
-              return (
-                <div
-                  key={version.id}
-                  className={`flex items-center justify-between gap-2.5 rounded-[18px] border bg-bg-primary px-2.5 py-2 ${
-                    selected ? "border-accent-primary" : "border-border"
-                  }`}
-                >
-                  <div className="min-w-0 flex-1">
-                    <div className="flex items-center gap-2">
-                      <span className="inline-flex items-center rounded-full border border-border bg-bg-secondary px-1.5 py-0.5 text-[10px] font-semibold text-text-secondary">
-                        v{version.version}
-                      </span>
-                      <div className="text-xs font-semibold text-text-primary">
-                        Version {version.version}
-                      </div>
-                    </div>
-                    {version.commit_message && (
-                      <div className="mt-1 truncate text-[11px] text-text-secondary">
-                        {version.commit_message}
-                      </div>
-                    )}
-                  </div>
-                  <Button
-                    type="button"
-                    variant={selected ? "outline" : "primary"}
-                    size="sm"
-                    onClick={() =>
-                      void onToggleVersionSelection(config, version.version)
-                    }
-                    disabled={Boolean(loading)}
-                    className={`rounded-full! px-3! py-1.5! text-[11px]! ${
-                      selected ? "bg-bg-secondary!" : ""
-                    }`}
-                  >
-                    {loading ? "..." : selected ? "Added" : "Use"}
-                  </Button>
-                </div>
-              );
-            })}
-            {versions.hasMore && !versions.isLoading && (
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                fullWidth
-                onClick={() => onLoadVersions(config.id, versions.nextSkip)}
-                className="py-1.5! text-xs! text-accent-primary!"
-              >
-                Load more
-              </Button>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default function SavedConfigCard({
-  config,
-  versions,
-  latestModel,
-  expanded,
-  loadingSelectionKeys,
-  isSelected,
-  onLoadVersions,
-  onToggleExpansion,
-  onToggleVersionSelection,
-}: SavedConfigCardProps) {
-  const latestVersion =
-    versions.items.reduce<number>(
-      (maxVersion, item) =>
-        item.version > maxVersion ? item.version : maxVersion,
-      0,
-    ) || 1;
-  const versionsNotYetLoaded =
-    versions.items.length === 0 && versions.isLoading;
-  const defaultSelected = isSelected(config.id, latestVersion);
-  const defaultLoading = loadingSelectionKeys[`${config.id}:${latestVersion}`];
-  const knownVersionCount = versions.items.length;
-  const hasVersionsPanel =
-    knownVersionCount > 0 ||
-    versions.hasMore ||
-    versions.isLoading ||
-    Boolean(versions.error);
-  const previewVersions = versions.items.slice(0, 3);
-  const versionCountLabel =
-    knownVersionCount > 0
-      ? `${knownVersionCount}${versions.hasMore ? "+" : ""}`
-      : "Check";
-
-  const cardBorder =
-    expanded || defaultSelected ? "border-accent-primary" : "border-border";
-
-  return (
-    <div
-      className={`flex flex-col rounded-[24px] border bg-bg-primary p-3.5 ${cardBorder}`}
-      style={{
-        boxShadow: expanded
-          ? "0 10px 22px rgba(15, 23, 42, 0.06)"
-          : "0 4px 14px rgba(15, 23, 42, 0.035)",
-      }}
-    >
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0 flex-1">
-          <div className="truncate text-sm font-semibold text-text-primary">
-            {config.name}
-          </div>
-          <div className="mt-1 text-xs text-text-secondary">
-            {config.updated_at
-              ? formatRelativeTime(config.updated_at)
-              : "Saved behavior"}
-          </div>
-          {config.description && (
-            <div className="mt-1.5 text-xs leading-5 text-text-secondary">
-              {config.description}
-            </div>
-          )}
-          {latestModel?.model && (
-            <div className="mt-1.5 inline-flex items-center gap-1 rounded-full border border-border bg-bg-secondary px-2 py-0.5 text-[10px] font-medium text-text-secondary">
-              {latestModel.provider
-                ? `${latestModel.provider} · ${latestModel.model}`
-                : latestModel.model}
-            </div>
-          )}
-        </div>
-        {defaultSelected && (
-          <span className="shrink-0 rounded-full border border-border bg-bg-secondary px-1.5 py-0.5 text-[9px] font-medium text-text-primary">
-            Added
-          </span>
-        )}
-      </div>
-
-      <div className="mt-2.5 flex flex-wrap items-center gap-1.5">
-        <Button
-          type="button"
-          variant={defaultSelected ? "outline" : "primary"}
-          size="sm"
-          onClick={() => void onToggleVersionSelection(config, latestVersion)}
-          disabled={versionsNotYetLoaded || Boolean(defaultLoading)}
-          className={`min-w-[126px]! rounded-full! px-3.5! py-2! text-[12px]! ${
-            defaultLoading ? "cursor-progress" : ""
-          } ${defaultSelected ? "bg-bg-secondary!" : ""}`}
-        >
-          {defaultLoading
-            ? "Working..."
-            : defaultSelected
-              ? "Added"
-              : "Use this behavior"}
-        </Button>
-
-        {hasVersionsPanel && (
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={() => onToggleExpansion(config.id)}
-            aria-label={
-              expanded ? "Hide saved versions" : "View saved versions"
-            }
-            className={`min-w-[146px]! rounded-full! px-3.5! py-2! text-[12px]! ${
-              expanded
-                ? "border-accent-primary! bg-bg-secondary!"
-                : "bg-bg-primary!"
-            }`}
-          >
-            <span className="font-semibold">
-              {expanded ? "Hide versions" : "Show versions"}
-            </span>
-            <span className="rounded-full bg-bg-secondary px-1.5 py-0.5 text-[10px] font-semibold text-text-secondary">
-              {versionCountLabel}
-            </span>
-            <ChevronDownIcon
-              className={`h-3 w-3 transition-transform duration-300 ease-in-out ${
-                expanded ? "rotate-180" : "rotate-0"
-              }`}
-            />
-          </Button>
-        )}
-      </div>
-
-      {hasVersionsPanel && (
-        <VersionSummary
-          previewVersions={previewVersions}
-          knownVersionCount={knownVersionCount}
-        />
-      )}
-
-      {hasVersionsPanel && (
-        <VersionPanel
-          config={config}
-          versions={versions}
-          expanded={expanded}
-          loadingSelectionKeys={loadingSelectionKeys}
-          isSelected={isSelected}
-          onLoadVersions={onLoadVersions}
-          onToggleVersionSelection={onToggleVersionSelection}
-        />
-      )}
-    </div>
-  );
-}
diff --git a/app/components/assessment/prompt-config/SavedConfigs.tsx b/app/components/assessment/prompt-config/SavedConfigs.tsx
deleted file mode 100644
index e15456c1..00000000
--- a/app/components/assessment/prompt-config/SavedConfigs.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { Button, Loader } from "@/app/components/ui";
-import type { ConfigPublic } from "@/app/lib/types/configs";
-import type {
-  LatestConfigModel,
-  ValueSetter,
-  VersionListState,
-} from "@/app/lib/types/assessment";
-import { buildInitialAssessmentVersionState } from "@/app/lib/utils/assessmentFetcher";
-import { CONFIGS_VISIBLE_BATCH_SIZE } from "@/app/lib/assessment/constants";
-import SavedConfigCard from "./SavedConfigCard";
-
-interface SavedConfigsProps {
-  configCards: ConfigPublic[];
-  searchQuery: string;
-  setSearchQuery: ValueSetter<string>;
-  isLoadingConfigs: boolean;
-  hasMoreConfigs: boolean;
-  nextConfigSkip: number;
-  expandedConfigId: string | null;
-  versionStateByConfig: Record<string, VersionListState>;
-  latestModelByConfig: Record<string, LatestConfigModel>;
-  loadingSelectionKeys: Record<string, boolean>;
-  isSelected: (configId: string, version: number) => boolean;
-  onLoadMoreConfigs: (skip: number) => void | Promise<void>;
-  onLoadVersions: (configId: string, skip: number) => void;
-  onToggleConfigExpansion: ValueSetter<string>;
-  onToggleVersionSelection: (
-    config: ConfigPublic,
-    version: number,
-  ) => void | Promise<void>;
-}
-
-export default function SavedConfigs({
-  configCards,
-  searchQuery,
-  setSearchQuery,
-  isLoadingConfigs,
-  hasMoreConfigs,
-  nextConfigSkip,
-  expandedConfigId,
-  versionStateByConfig,
-  latestModelByConfig,
-  loadingSelectionKeys,
-  isSelected,
-  onLoadMoreConfigs,
-  onLoadVersions,
-  onToggleConfigExpansion,
-  onToggleVersionSelection,
-}: SavedConfigsProps) {
-  const listRef = useRef<HTMLDivElement>(null);
-  const [visibleConfigCount, setVisibleConfigCount] = useState(
-    CONFIGS_VISIBLE_BATCH_SIZE,
-  );
-  const [isLoadingMore, setIsLoadingMore] = useState(false);
-  const visibleConfigCards = configCards.slice(0, visibleConfigCount);
-  const hasHiddenLoadedConfigs = visibleConfigCount < configCards.length;
-  const canViewMoreConfigs = hasHiddenLoadedConfigs || hasMoreConfigs;
-
-  useEffect(() => {
-    setVisibleConfigCount(CONFIGS_VISIBLE_BATCH_SIZE);
-  }, [searchQuery]);
-
-  const scrollToListEnd = () => {
-    requestAnimationFrame(() => {
-      const listElement = listRef.current;
-      if (!listElement) return;
-      listElement.scrollTo({
-        top: listElement.scrollHeight,
-        behavior: "smooth",
-      });
-    });
-  };
-
-  const handleViewMore = async () => {
-    if (isLoadingMore) return;
-    if (hasHiddenLoadedConfigs) {
-      setVisibleConfigCount((prev) =>
-        Math.min(prev + CONFIGS_VISIBLE_BATCH_SIZE, configCards.length),
-      );
-      scrollToListEnd();
-      return;
-    }
-    if (!hasMoreConfigs) return;
-
-    setIsLoadingMore(true);
-    try {
-      await onLoadMoreConfigs(nextConfigSkip);
-      setVisibleConfigCount((prev) => prev + CONFIGS_VISIBLE_BATCH_SIZE);
-      scrollToListEnd();
-    } finally {
-      setIsLoadingMore(false);
-    }
-  };
-
-  return (
-    <div>
-      <div className="mb-3">
-        <input
-          type="text"
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          placeholder="Search behaviors..."
-          className="w-full rounded-xl border border-border bg-bg-secondary px-4 py-2.5 text-sm text-text-primary outline-none"
-        />
-      </div>
-
-      {isLoadingConfigs ? (
-        <div className="py-8">
-          <Loader size="sm" message="Loading behaviors..." />
-        </div>
-      ) : configCards.length === 0 ? (
-        <div className="py-8 text-center text-sm text-text-secondary">
-          {searchQuery
-            ? "No behaviors match your search."
-            : "No saved behaviors found."}
-        </div>
-      ) : (
-        <div
-          ref={listRef}
-          className="max-h-[560px] space-y-3 overflow-y-auto pr-1"
-        >
-          {visibleConfigCards.map((config) => (
-            <SavedConfigCard
-              key={config.id}
-              config={config}
-              versions={
-                versionStateByConfig[config.id] ??
-                buildInitialAssessmentVersionState()
-              }
-              latestModel={latestModelByConfig[config.id] ?? null}
-              expanded={expandedConfigId === config.id}
-              loadingSelectionKeys={loadingSelectionKeys}
-              isSelected={isSelected}
-              onLoadVersions={onLoadVersions}
-              onToggleExpansion={onToggleConfigExpansion}
-              onToggleVersionSelection={onToggleVersionSelection}
-            />
-          ))}
-          {canViewMoreConfigs && (
-            <Button
-              type="button"
-              variant="primary"
-              size="sm"
-              fullWidth
-              onClick={() => void handleViewMore()}
-              disabled={isLoadingMore}
-            >
-              {isLoadingMore ? "Loading..." : "View more"}
-            </Button>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/app/components/assessment/prompt-config/SelectedConfigs.tsx b/app/components/assessment/prompt-config/SelectedConfigs.tsx
deleted file mode 100644
index 0cb3f4c5..00000000
--- a/app/components/assessment/prompt-config/SelectedConfigs.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { CloseIcon } from "@/app/components/icons";
-import type { ConfigSelection } from "@/app/lib/types/assessment";
-
-interface SelectedConfigsProps {
-  configs: ConfigSelection[];
-  onRemove: (configId: string, version: number) => void;
-}
-
-export default function SelectedConfigs({
-  configs,
-  onRemove,
-}: SelectedConfigsProps) {
-  if (configs.length === 0) return null;
-
-  return (
-    <div className="flex flex-wrap gap-2">
-      {configs.map((config) => (
-        <div
-          key={`${config.config_id}-${config.config_version}`}
-          className="inline-flex max-w-full items-center gap-1 rounded-full border border-accent-primary bg-accent-subtle/20 px-2 py-1"
-        >
-          <span
-            className="max-w-[100px] truncate text-[12px] font-semibold text-accent-primary"
-            title={config.name}
-          >
-            {config.name}
-          </span>
-          <span
-            className="max-w-[96px] truncate text-[10px] text-text-secondary"
-            title={`v${config.config_version} ${
-              config.provider && config.model
-                ? `· ${config.provider}/${config.model}`
-                : ""
-            }`}
-          >
-            v{config.config_version}{" "}
-            {config.provider && config.model
-              ? `· ${config.provider}/${config.model}`
-              : ""}
-          </span>
-          <button
-            type="button"
-            onClick={() => onRemove(config.config_id, config.config_version)}
-            className="inline-flex h-[22px] w-[22px] cursor-pointer items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-bg-secondary hover:text-text-primary"
-            aria-label={`Remove ${config.name}`}
-          >
-            <CloseIcon className="h-3 w-3" />
-          </button>
-        </div>
-      ))}
-    </div>
-  );
-}
diff --git a/app/components/assessment/prompt-config/SetupProgress.tsx b/app/components/assessment/prompt-config/SetupProgress.tsx
deleted file mode 100644
index 078fa7e5..00000000
--- a/app/components/assessment/prompt-config/SetupProgress.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { MAX_CONFIGS } from "@/app/lib/assessment/constants";
-
-interface StatusPillProps {
-  label: string;
-  value: string;
-}
-
-interface SetupProgressProps {
-  promptStatus: string;
-  selectedConfigCount: number;
-  responseSummary: string;
-}
-
-function StatusPill({ label, value }: StatusPillProps) {
-  return (
-    <span className="inline-flex items-center rounded-full border border-border bg-bg-primary px-3 py-1.5 text-xs font-medium text-text-secondary">
-      {label}: {value}
-    </span>
-  );
-}
-
-export default function SetupProgress({
-  promptStatus,
-  selectedConfigCount,
-  responseSummary,
-}: SetupProgressProps) {
-  return (
-    <div className="flex flex-wrap gap-2">
-      <StatusPill label="Prompt" value={promptStatus} />
-      <StatusPill
-        label="Behaviors"
-        value={`${selectedConfigCount}/${MAX_CONFIGS}`}
-      />
-      <StatusPill label="Output" value={responseSummary} />
-    </div>
-  );
-}
diff --git a/app/components/assessment/prompt-config/SystemPrompt.tsx b/app/components/assessment/prompt-config/SystemPrompt.tsx
deleted file mode 100644
index 596cbc2c..00000000
--- a/app/components/assessment/prompt-config/SystemPrompt.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { ChevronDownIcon } from "@/app/components/icons";
-import { InfoTooltip } from "@/app/components/ui";
-import type { ValueSetter } from "@/app/lib/types/assessment";
-import PromptEditor from "./PromptEditor";
-
-interface SystemPromptProps {
-  value: string;
-  onChange: ValueSetter<string>;
-  previewMode: boolean;
-}
-
-export default function SystemPrompt({
-  value,
-  onChange,
-  previewMode,
-}: SystemPromptProps) {
-  const [isOpen, setIsOpen] = useState(true);
-
-  return (
-    <div className="overflow-hidden rounded-2xl border border-border bg-bg-primary">
-      <div className="flex items-center justify-between gap-3 px-5 py-4">
-        <button
-          type="button"
-          onClick={() => setIsOpen((prev) => !prev)}
-          className="flex min-w-0 flex-1 cursor-pointer items-center gap-2 rounded-md text-left"
-        >
-          <ChevronDownIcon
-            className={`h-4 w-4 text-text-secondary transition-transform ${
-              isOpen ? "rotate-0" : "-rotate-90"
-            }`}
-          />
-          <span className="text-base font-semibold text-text-primary">
-            System prompt
-          </span>
-        </button>
-        <InfoTooltip
-          text={
-            <span>
-              Set the evaluation rules. Example: judge every answer fairly,
-              follow the scoring format, and explain the result briefly.
-            </span>
-          }
-        />
-      </div>
-
-      {isOpen && (
-        <div className="border-t border-border px-5 pb-5 pt-4">
-          <PromptEditor
-            value={value}
-            onChange={onChange}
-            previewMode={previewMode}
-            enablePlaceholders={false}
-            emptyPreviewText="Example system prompt preview appears here."
-            placeholder={`Describe how AI should behave:\n\nYou are an evaluator. Judge answer quality.\nKeep reasoning concise and return strict output.`}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/app/components/assessment/prompt-config/UserPrompt.tsx b/app/components/assessment/prompt-config/UserPrompt.tsx
deleted file mode 100644
index 1c5101ae..00000000
--- a/app/components/assessment/prompt-config/UserPrompt.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { Button, InfoTooltip } from "@/app/components/ui";
-import { ChevronDownIcon } from "@/app/components/icons";
-import type { SampleRow, ValueSetter } from "@/app/lib/types/assessment";
-import PromptEditor from "./PromptEditor";
-
-interface UserPromptProps {
-  textColumns: string[];
-  sampleRow: SampleRow;
-  promptTemplate: string;
-  setPromptTemplate: ValueSetter<string>;
-  previewMode: boolean;
-}
-
-export default function UserPrompt({
-  textColumns,
-  sampleRow,
-  promptTemplate,
-  setPromptTemplate,
-  previewMode,
-}: UserPromptProps) {
-  const [isOpen, setIsOpen] = useState(true);
-
-  return (
-    <div className="overflow-hidden rounded-2xl border border-border bg-bg-primary">
-      <div className="flex items-center justify-between gap-3 px-5 py-4">
-        <Button
-          type="button"
-          variant="ghost"
-          onClick={() => setIsOpen((prev) => !prev)}
-          className="!min-w-0 !flex-1 !justify-start !rounded-md !p-0 hover:bg-transparent focus-visible:bg-transparent"
-        >
-          <ChevronDownIcon
-            className={`h-4 w-4 text-text-secondary transition-transform ${
-              isOpen ? "rotate-0" : "-rotate-90"
-            }`}
-          />
-          <span className="text-base font-semibold text-text-primary">
-            User prompt
-          </span>
-          <span className="rounded-full bg-bg-secondary px-2 py-0.5 text-[10px] font-medium text-text-secondary">
-            Optional
-          </span>
-        </Button>
-        <InfoTooltip
-          text={
-            <span>
-              Tell the AI what to check in each row. Example: Read{" "}
-              {"{question}"}
-              and {"{answer}"}, then say if the answer is good and why.
-            </span>
-          }
-        />
-      </div>
-
-      {isOpen && (
-        <div className="border-t border-border px-5 pb-5 pt-4">
-          <PromptEditor
-            value={promptTemplate}
-            onChange={setPromptTemplate}
-            previewMode={previewMode}
-            textColumns={textColumns}
-            sampleRow={sampleRow}
-            enablePlaceholders
-            emptyPreviewText="Preview will appear here."
-            placeholder={`Describe what the AI should do.\n\nExample:\nEvaluate the student's answer.\nQuestion: {question}\nAnswer: {answer}\nContext: {context}`}
-          />
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/app/components/assessment/prompt-config/index.ts b/app/components/assessment/prompt-config/index.ts
deleted file mode 100644
index 76370177..00000000
--- a/app/components/assessment/prompt-config/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-// Barrel for prompt-config components.
-// Import from "@/app/components/assessment/prompt-config".
-export { default as AssessmentConfiguration } from "./AssessmentConfiguration";
-export { default as ConfigCreator } from "./ConfigCreator";
-export { default as ConfigParamControl } from "./ConfigParamControl";
-export { default as PromptEditor } from "./PromptEditor";
-export { default as PromptPanel } from "./PromptPanel";
-export { default as ResponseSchema } from "./ResponseSchema";
-export { default as SavedConfigCard } from "./SavedConfigCard";
-export { default as SavedConfigs } from "./SavedConfigs";
-export { default as SelectedConfigs } from "./SelectedConfigs";
-export { default as SetupProgress } from "./SetupProgress";
-export { default as SystemPrompt } from "./SystemPrompt";
-export { default as UserPrompt } from "./UserPrompt";
diff --git a/app/components/assessment/results/ResultsHeader.tsx b/app/components/assessment/results/ResultsHeader.tsx
deleted file mode 100644
index 16990fa2..00000000
--- a/app/components/assessment/results/ResultsHeader.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { RefreshIcon } from "@/app/components/icons";
-import { Select } from "@/app/components/ui";
-import {
-  RESULT_SUMMARY_ITEMS,
-  SUMMARY_BADGE_CLASSES,
-  STATUS_FILTER_OPTIONS,
-} from "@/app/lib/assessment/constants";
-import type {
-  ResultsCounts,
-  StatusFilter,
-  ValueSetter,
-} from "@/app/lib/types/assessment";
-
-interface ResultsHeaderProps {
-  counts: ResultsCounts;
-  statusFilter: StatusFilter;
-  isLoading: boolean;
-  onStatusFilterChange: ValueSetter<StatusFilter>;
-  onRefresh: () => void;
-}
-
-export default function ResultsHeader({
-  counts,
-  statusFilter,
-  isLoading,
-  onStatusFilterChange,
-  onRefresh,
-}: ResultsHeaderProps) {
-  return (
-    <div className="flex shrink-0 items-center justify-between border-b border-border bg-bg-primary px-6 py-4">
-      <div className="flex items-center gap-3">
-        <h2 className="text-base font-semibold text-text-primary">
-          Assessments
-        </h2>
-        <div className="flex items-center gap-2 ml-2">
-          {RESULT_SUMMARY_ITEMS.map((item) => (
-            <span
-              key={item.label}
-              className={`inline-flex items-center gap-1 rounded-full px-2 py-1 text-xs ${SUMMARY_BADGE_CLASSES[item.tone]}`}
-            >
-              <span className="font-semibold">{counts[item.key]}</span>
-              <span className="text-text-secondary">
-                {item.label.toLowerCase()}
-              </span>
-            </span>
-          ))}
-        </div>
-      </div>
-
-      <div className="flex items-center gap-3">
-        <Select
-          aria-label="Filter by status"
-          value={statusFilter}
-          onChange={(e) => onStatusFilterChange(e.target.value as StatusFilter)}
-          options={STATUS_FILTER_OPTIONS}
-          className="w-full cursor-pointer rounded-md border border-border bg-bg-primary px-3 py-1.5 text-sm text-text-primary outline-none focus:ring-1"
-        />
-
-        <button
-          type="button"
-          onClick={onRefresh}
-          disabled={isLoading}
-          className="inline-flex cursor-pointer items-center justify-center rounded-md border border-border bg-white p-2 text-text-secondary transition-colors hover:bg-neutral-50 hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-50"
-          aria-label="Refresh assessments"
-        >
-          <RefreshIcon
-            className={`w-4 h-4 ${isLoading ? "animate-spin" : ""}`}
-          />
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/app/components/assessment/results/ResultsToolbar.tsx b/app/components/assessment/results/ResultsToolbar.tsx
new file mode 100644
index 00000000..2cc8c8d3
--- /dev/null
+++ b/app/components/assessment/results/ResultsToolbar.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { ArrowLeftIcon, DownloadIcon } from "@/app/components/icons";
+import { Button } from "@/app/components/ui";
+import type { ResultsToolbarProps } from "@/app/lib/types/assessment";
+
+export default function ResultsToolbar({
+  title,
+  subtitle,
+  onBack,
+  onDownload,
+}: ResultsToolbarProps) {
+  return (
+    <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-border bg-bg-primary px-6 py-3">
+      <div className="min-w-0">
+        <h1 className="truncate text-sm font-semibold text-text-primary">
+          {title}
+        </h1>
+        <p className="mt-0.5 text-xs text-text-secondary">{subtitle}</p>
+      </div>
+
+      <div className="flex shrink-0 items-center gap-2">
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="rounded-md!"
+          onClick={onBack}
+        >
+          <ArrowLeftIcon className="h-3.5 w-3.5" />
+          Back to runs
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          className="rounded-md!"
+          onClick={onDownload}
+        >
+          <DownloadIcon className="h-3.5 w-3.5" />
+          Download CSV
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/assessment/review/ColumnsReview.tsx b/app/components/assessment/review/ColumnsReview.tsx
deleted file mode 100644
index 6fb49db6..00000000
--- a/app/components/assessment/review/ColumnsReview.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-"use client";
-
-import type { ReviewColumn } from "@/app/lib/types/assessment";
-import ReviewSection from "./ReviewSection";
-
-interface ColumnsReviewProps {
-  mappedColumns: ReviewColumn[];
-  mappedCount: number;
-  isOpen: boolean;
-  onToggle: () => void;
-  onEdit: () => void;
-}
-
-export default function ColumnsReview({
-  mappedColumns,
-  mappedCount,
-  isOpen,
-  onToggle,
-  onEdit,
-}: ColumnsReviewProps) {
-  return (
-    <ReviewSection
-      title="Column Mapping"
-      isOpen={isOpen}
-      onToggle={onToggle}
-      onEdit={onEdit}
-      badge={`${mappedCount} mapped`}
-    >
-      <div className="pt-2">
-        {mappedColumns.length === 0 ? (
-          <div className="rounded-md bg-neutral-50 p-3 text-xs text-neutral-500">
-            No columns mapped.
-          </div>
-        ) : (
-          <div className="space-y-1 text-xs">
-            {mappedColumns.map((item) => (
-              <div key={item.key} className="font-mono">
-                <span
-                  className={`inline-flex rounded-md px-2 py-0.5 text-[11px] font-semibold ${item.badgeClass}`}
-                >
-                  {item.role}
-                </span>
-                <span className="text-neutral-500"> - </span>
-                <span className="text-neutral-900">{item.column}</span>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </ReviewSection>
-  );
-}
diff --git a/app/components/assessment/review/ConfigsReview.tsx b/app/components/assessment/review/ConfigsReview.tsx
deleted file mode 100644
index cea161e6..00000000
--- a/app/components/assessment/review/ConfigsReview.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-"use client";
-
-import type { ConfigSelection } from "@/app/lib/types/assessment";
-import ReviewSection from "./ReviewSection";
-
-interface ConfigsReviewProps {
-  configs: ConfigSelection[];
-  isOpen: boolean;
-  onToggle: () => void;
-  onEdit: () => void;
-}
-
-export default function ConfigsReview({
-  configs,
-  isOpen,
-  onToggle,
-  onEdit,
-}: ConfigsReviewProps) {
-  return (
-    <ReviewSection
-      title="Configurations"
-      isOpen={isOpen}
-      onToggle={onToggle}
-      onEdit={onEdit}
-      badge={`${configs.length} selected`}
-    >
-      <div className="space-y-2 pt-2">
-        {configs.map((config, index) => (
-          <div
-            key={`${config.config_id}-${config.config_version}`}
-            className="flex items-center gap-3 rounded-md bg-neutral-50 p-2.5"
-          >
-            <span className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full bg-accent-primary text-[10px] font-bold text-white">
-              {index + 1}
-            </span>
-            <div className="min-w-0 flex-1">
-              <span className="text-sm font-medium text-neutral-900">
-                {config.name}
-              </span>
-              <span className="ml-1.5 rounded bg-white px-1.5 py-0.5 text-[10px] font-medium text-neutral-500">
-                v{config.config_version}
-              </span>
-            </div>
-            <span className="flex-shrink-0 text-xs text-neutral-500">
-              {config.provider}/{config.model}
-            </span>
-          </div>
-        ))}
-      </div>
-    </ReviewSection>
-  );
-}
diff --git a/app/components/assessment/review/DatasetReview.tsx b/app/components/assessment/review/DatasetReview.tsx
deleted file mode 100644
index e1154eaf..00000000
--- a/app/components/assessment/review/DatasetReview.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client";
-
-import ReviewSection from "./ReviewSection";
-
-interface DatasetReviewProps {
-  datasetName: string;
-  isOpen: boolean;
-  onToggle: () => void;
-}
-
-export default function DatasetReview({
-  datasetName,
-  isOpen,
-  onToggle,
-}: DatasetReviewProps) {
-  return (
-    <ReviewSection title="Dataset" isOpen={isOpen} onToggle={onToggle}>
-      <div className="pt-2">
-        <div className="mb-1 text-xs font-medium text-neutral-500">
-          Dataset Name
-        </div>
-        <div className="text-sm font-medium text-neutral-900">
-          {datasetName || "Unknown dataset"}
-        </div>
-      </div>
-    </ReviewSection>
-  );
-}
diff --git a/app/components/assessment/review/ExperimentReview.tsx b/app/components/assessment/review/ExperimentReview.tsx
deleted file mode 100644
index 8ed347fb..00000000
--- a/app/components/assessment/review/ExperimentReview.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-"use client";
-
-import { Field } from "@/app/components/ui";
-import type { ValueSetter } from "@/app/lib/types/assessment";
-
-interface ExperimentReviewProps {
-  experimentName: string;
-  setExperimentName: ValueSetter<string>;
-}
-
-export default function ExperimentReview({
-  experimentName,
-  setExperimentName,
-}: ExperimentReviewProps) {
-  return (
-    <div className="rounded-lg border border-neutral-200 bg-white p-4">
-      <Field
-        label="Experiment Name"
-        value={experimentName}
-        onChange={setExperimentName}
-        placeholder="e.g. GPT-4o vs Claude Sonnet on medical QA"
-        className="!rounded-md !bg-neutral-50 !px-3 !py-2"
-      />
-      <p className="mt-1.5 text-[11px] text-neutral-500">
-        A descriptive name to identify this evaluation run.
-      </p>
-    </div>
-  );
-}
diff --git a/app/components/assessment/review/InputReview.tsx b/app/components/assessment/review/InputReview.tsx
deleted file mode 100644
index 202575f8..00000000
--- a/app/components/assessment/review/InputReview.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-"use client";
-
-import { useMemo, useState } from "react";
-import { Modal } from "@/app/components/ui";
-import { ChevronRightIcon } from "@/app/components/icons";
-import {
-  DEFAULT_SYSTEM_PROMPT,
-  DEFAULT_USER_PROMPT,
-} from "@/app/lib/assessment/constants";
-import ReviewSection from "./ReviewSection";
-
-interface InputReviewProps {
-  systemInstruction: string;
-  promptTemplate: string;
-  isOpen: boolean;
-  onToggle: () => void;
-}
-
-interface PromptNodeProps {
-  title: string;
-  value: string;
-  fallback: string;
-  isOpen: boolean;
-  onToggle: () => void;
-}
-
-function PromptNode({
-  title,
-  value,
-  fallback,
-  isOpen,
-  onToggle,
-}: PromptNodeProps) {
-  return (
-    <div>
-      <div className="flex items-center gap-2 text-neutral-700">
-        <button
-          type="button"
-          onClick={onToggle}
-          className="flex h-5 w-5 cursor-pointer items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-100 hover:text-neutral-900"
-          aria-label={`Toggle ${title}`}
-        >
-          <ChevronRightIcon
-            className={`h-3.5 w-3.5 transition-transform ${
-              isOpen ? "rotate-90" : "rotate-0"
-            }`}
-          />
-        </button>
-        <h3 className="text-base font-semibold text-neutral-900">{title}</h3>
-      </div>
-      {isOpen && (
-        <pre className="mt-2 whitespace-pre-wrap pl-5 font-mono text-xs text-neutral-700">
-          {value.trim() || fallback}
-        </pre>
-      )}
-    </div>
-  );
-}
-
-export default function InputReview({
-  systemInstruction,
-  promptTemplate,
-  isOpen,
-  onToggle,
-}: InputReviewProps) {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isSystemNodeOpen, setIsSystemNodeOpen] = useState(true);
-  const [isUserNodeOpen, setIsUserNodeOpen] = useState(true);
-
-  const llmInputGist = useMemo(
-    () => ({
-      system: systemInstruction.trim() || DEFAULT_SYSTEM_PROMPT,
-      user: promptTemplate.trim() || DEFAULT_USER_PROMPT,
-    }),
-    [promptTemplate, systemInstruction],
-  );
-
-  return (
-    <>
-      <ReviewSection
-        title="LLM Input"
-        isOpen={isOpen}
-        onToggle={onToggle}
-        headerAction={
-          <button
-            type="button"
-            onClick={(event) => {
-              event.stopPropagation();
-              setIsModalOpen(true);
-            }}
-            className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md bg-accent-secondary text-text-primary transition-colors hover:bg-accent-secondary-hover hover:text-text-primary"
-            aria-label="Expand LLM input"
-            title="Expand LLM input"
-          >
-            <span className="text-base leading-none">⤢</span>
-          </button>
-        }
-        badge={
-          systemInstruction.trim() || promptTemplate.trim()
-            ? "Configured"
-            : "Default"
-        }
-      >
-        <div className="space-y-2 pt-2">
-          <div>
-            <h3 className="text-sm font-bold text-neutral-900">
-              System Prompt
-            </h3>
-            <pre
-              className="mt-1 whitespace-pre-wrap font-mono text-xs text-neutral-700"
-              style={{
-                display: "-webkit-box",
-                WebkitLineClamp: 2,
-                WebkitBoxOrient: "vertical",
-                overflow: "hidden",
-              }}
-            >
-              {llmInputGist.system}
-            </pre>
-          </div>
-          <div>
-            <h3 className="text-sm font-bold text-neutral-900">User Prompt</h3>
-            <pre
-              className="mt-1 whitespace-pre-wrap font-mono text-xs text-neutral-700"
-              style={{
-                display: "-webkit-box",
-                WebkitLineClamp: 2,
-                WebkitBoxOrient: "vertical",
-                overflow: "hidden",
-              }}
-            >
-              {llmInputGist.user}
-            </pre>
-          </div>
-        </div>
-      </ReviewSection>
-
-      <Modal
-        open={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
-        title="LLM Input"
-        maxWidth="max-w-3xl"
-      >
-        <div className="max-h-[72vh] overflow-y-auto px-4 py-3">
-          <div className="space-y-3">
-            <PromptNode
-              title="System Prompt"
-              value={systemInstruction}
-              fallback={DEFAULT_SYSTEM_PROMPT}
-              isOpen={isSystemNodeOpen}
-              onToggle={() => setIsSystemNodeOpen((prev) => !prev)}
-            />
-            <PromptNode
-              title="User Prompt"
-              value={promptTemplate}
-              fallback={DEFAULT_USER_PROMPT}
-              isOpen={isUserNodeOpen}
-              onToggle={() => setIsUserNodeOpen((prev) => !prev)}
-            />
-          </div>
-        </div>
-      </Modal>
-    </>
-  );
-}
diff --git a/app/components/assessment/review/PostProcessingReview.tsx b/app/components/assessment/review/PostProcessingReview.tsx
deleted file mode 100644
index f6d3f814..00000000
--- a/app/components/assessment/review/PostProcessingReview.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-"use client";
-
-import { POST_PROCESSING_FILTER_OPS } from "@/app/lib/assessment/constants";
-import type { PostProcessingConfig } from "@/app/lib/types/assessment";
-import ReviewSection from "./ReviewSection";
-
-interface PostProcessingReviewProps {
-  postProcessingConfig: PostProcessingConfig | null;
-  isOpen: boolean;
-  onToggle: () => void;
-  onEdit: () => void;
-}
-
-const OP_LABELS: Record<string, string> = Object.fromEntries(
-  POST_PROCESSING_FILTER_OPS.map((op) => [op.value, op.label]),
-);
-
-export default function PostProcessingReview({
-  postProcessingConfig,
-  isOpen,
-  onToggle,
-  onEdit,
-}: PostProcessingReviewProps) {
-  const computed = postProcessingConfig?.computed_columns ?? [];
-  const filters = postProcessingConfig?.filter ?? [];
-  const sorts = postProcessingConfig?.sort ?? [];
-  const ruleCount = computed.length + filters.length + sorts.length;
-  const isSkipped = ruleCount === 0;
-
-  return (
-    <ReviewSection
-      title="Post Processing"
-      isOpen={isOpen}
-      onToggle={onToggle}
-      onEdit={onEdit}
-      badge={
-        isSkipped ? "Skipped" : `${ruleCount} rule${ruleCount > 1 ? "s" : ""}`
-      }
-    >
-      <div className="space-y-3 pt-2">
-        {isSkipped ? (
-          <div className="rounded-md bg-neutral-50 p-3 text-xs text-neutral-500">
-            Skipped — no post-processing configured.
-          </div>
-        ) : (
-          <>
-            {computed.length > 0 && (
-              <div>
-                <div className="text-[11px] font-medium text-neutral-500">
-                  Computed columns
-                </div>
-                <div className="mt-1 space-y-1">
-                  {computed.map((col, i) => (
-                    <div key={i} className="font-mono text-xs text-neutral-700">
-                      <span className="text-neutral-900">
-                        {col.name || "(unnamed)"}
-                      </span>
-                      <span className="text-neutral-400"> = </span>
-                      {col.formula || "(empty)"}
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-            {filters.length > 0 && (
-              <div>
-                <div className="text-[11px] font-medium text-neutral-500">
-                  Filters
-                </div>
-                <div className="mt-1 space-y-1">
-                  {filters.map((rule, i) => (
-                    <div key={i} className="font-mono text-xs text-neutral-700">
-                      <span className="text-neutral-900">{rule.column}</span>{" "}
-                      {OP_LABELS[rule.op] ?? rule.op}
-                      {rule.value !== undefined && rule.value !== ""
-                        ? ` ${rule.value}`
-                        : ""}
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-            {sorts.length > 0 && (
-              <div>
-                <div className="text-[11px] font-medium text-neutral-500">
-                  Sort
-                </div>
-                <div className="mt-1 space-y-1">
-                  {sorts.map((rule, i) => (
-                    <div key={i} className="font-mono text-xs text-neutral-700">
-                      {i + 1}.{" "}
-                      <span className="text-neutral-900">{rule.column}</span>{" "}
-                      {rule.direction === "asc" ? "↑ Asc" : "↓ Desc"}
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-          </>
-        )}
-      </div>
-    </ReviewSection>
-  );
-}
diff --git a/app/components/assessment/review/PrefilterReview.tsx b/app/components/assessment/review/PrefilterReview.tsx
deleted file mode 100644
index 542d4e0b..00000000
--- a/app/components/assessment/review/PrefilterReview.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-"use client";
-
-import type { PrefilterConfig } from "@/app/lib/types/assessment";
-import ReviewSection from "./ReviewSection";
-
-interface PrefilterReviewProps {
-  prefilterConfig: PrefilterConfig | null;
-  isOpen: boolean;
-  onToggle: () => void;
-  onEdit: () => void;
-}
-
-function ColumnChips({ columns }: { columns: string[] }) {
-  return (
-    <div className="mt-1 flex flex-wrap gap-1.5">
-      {columns.map((col) => (
-        <span
-          key={col}
-          className="rounded bg-white px-1.5 py-0.5 font-mono text-[11px] text-neutral-700"
-        >
-          {col}
-        </span>
-      ))}
-    </div>
-  );
-}
-
-export default function PrefilterReview({
-  prefilterConfig,
-  isOpen,
-  onToggle,
-  onEdit,
-}: PrefilterReviewProps) {
-  const topicRelevance = prefilterConfig?.topic_relevance;
-  const duplicateDetection = prefilterConfig?.duplicate_detection;
-  const enabledCount = (topicRelevance ? 1 : 0) + (duplicateDetection ? 1 : 0);
-  const isSkipped = enabledCount === 0;
-
-  return (
-    <ReviewSection
-      title="Eliminatory"
-      isOpen={isOpen}
-      onToggle={onToggle}
-      onEdit={onEdit}
-      badge={
-        isSkipped
-          ? "Skipped"
-          : `${enabledCount} filter${enabledCount > 1 ? "s" : ""}`
-      }
-    >
-      <div className="space-y-3 pt-2">
-        {isSkipped ? (
-          <div className="rounded-md bg-neutral-50 p-3 text-xs text-neutral-500">
-            Skipped — no pre-filters enabled.
-          </div>
-        ) : (
-          <>
-            {topicRelevance && (
-              <div className="rounded-md bg-neutral-50 p-3">
-                <div className="text-sm font-semibold text-neutral-900">
-                  Topic Relevance
-                </div>
-                <div className="mt-2">
-                  <div className="text-[11px] font-medium text-neutral-500">
-                    Columns
-                  </div>
-                  <ColumnChips columns={topicRelevance.columns} />
-                </div>
-                {topicRelevance.attachment_columns &&
-                  topicRelevance.attachment_columns.length > 0 && (
-                    <div className="mt-2">
-                      <div className="text-[11px] font-medium text-neutral-500">
-                        Documents
-                      </div>
-                      <ColumnChips
-                        columns={topicRelevance.attachment_columns}
-                      />
-                    </div>
-                  )}
-                <div className="mt-2">
-                  <div className="text-[11px] font-medium text-neutral-500">
-                    Prompt
-                  </div>
-                  <pre
-                    className="mt-1 whitespace-pre-wrap font-mono text-xs text-neutral-700"
-                    style={{
-                      display: "-webkit-box",
-                      WebkitLineClamp: 3,
-                      WebkitBoxOrient: "vertical",
-                      overflow: "hidden",
-                    }}
-                  >
-                    {topicRelevance.prompt}
-                  </pre>
-                </div>
-              </div>
-            )}
-            {duplicateDetection && (
-              <div className="rounded-md bg-neutral-50 p-3">
-                <div className="text-sm font-semibold text-neutral-900">
-                  Duplicate Detection
-                </div>
-                <div className="mt-2">
-                  <div className="text-[11px] font-medium text-neutral-500">
-                    Columns
-                  </div>
-                  <ColumnChips columns={duplicateDetection.columns} />
-                </div>
-              </div>
-            )}
-          </>
-        )}
-      </div>
-    </ReviewSection>
-  );
-}
diff --git a/app/components/assessment/review/ReviewSection.tsx b/app/components/assessment/review/ReviewSection.tsx
deleted file mode 100644
index a21ca96f..00000000
--- a/app/components/assessment/review/ReviewSection.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-"use client";
-
-import { Button } from "@/app/components/ui";
-import { ChevronRightIcon } from "@/app/components/icons";
-import type { ReactNode } from "react";
-
-interface ReviewSectionProps {
-  title: string;
-  isOpen: boolean;
-  onToggle: () => void;
-  onEdit?: () => void;
-  headerAction?: ReactNode;
-  badge?: string;
-  children: ReactNode;
-}
-
-export default function ReviewSection({
-  title,
-  isOpen,
-  onToggle,
-  onEdit,
-  headerAction,
-  badge,
-  children,
-}: ReviewSectionProps) {
-  return (
-    <div
-      className={`overflow-hidden rounded-lg border bg-bg-primary ${
-        isOpen ? "border-accent-primary" : "border-border"
-      }`}
-    >
-      <div
-        onClick={onToggle}
-        className={`flex w-full cursor-pointer items-center justify-between px-4 py-3.5 text-left transition-colors ${
-          isOpen ? "bg-accent-subtle/15" : "bg-bg-primary"
-        }`}
-        role="button"
-        tabIndex={0}
-        onKeyDown={(event) => {
-          if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            onToggle();
-          }
-        }}
-      >
-        <div className="flex items-center gap-3">
-          <ChevronRightIcon
-            className={`h-4 w-4 flex-shrink-0 text-text-secondary transition-transform ${
-              isOpen ? "rotate-90" : "rotate-0"
-            }`}
-          />
-          <span className="text-sm font-semibold text-text-primary">
-            {title}
-          </span>
-          {badge && (
-            <span className="rounded-full bg-bg-secondary px-2 py-0.5 text-[10px] font-medium text-text-secondary">
-              {badge}
-            </span>
-          )}
-        </div>
-        <div className="flex items-center gap-2">
-          {headerAction}
-          {onEdit && (
-            <Button
-              type="button"
-              variant="secondary"
-              size="sm"
-              onClick={(event) => {
-                event.stopPropagation();
-                onEdit();
-              }}
-            >
-              Edit
-            </Button>
-          )}
-        </div>
-      </div>
-
-      {isOpen && (
-        <div className="border-t border-border px-4 pb-4 pt-1">{children}</div>
-      )}
-    </div>
-  );
-}
diff --git a/app/components/assessment/review/SchemaReview.tsx b/app/components/assessment/review/SchemaReview.tsx
deleted file mode 100644
index 9be4a785..00000000
--- a/app/components/assessment/review/SchemaReview.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-"use client";
-
-import type { SchemaProperty } from "@/app/lib/types/assessment";
-import ReviewSection from "./ReviewSection";
-
-interface SchemaReviewProps {
-  outputSchema: SchemaProperty[];
-  isOpen: boolean;
-  onToggle: () => void;
-  onEdit: () => void;
-}
-
-export default function SchemaReview({
-  outputSchema,
-  isOpen,
-  onToggle,
-  onEdit,
-}: SchemaReviewProps) {
-  return (
-    <ReviewSection
-      title="Response Format"
-      isOpen={isOpen}
-      onToggle={onToggle}
-      onEdit={onEdit}
-      badge={
-        outputSchema.length > 0 ? `${outputSchema.length} fields` : "Free text"
-      }
-    >
-      <div className="pt-2">
-        {outputSchema.length > 0 ? (
-          <div className="flex flex-wrap gap-1.5">
-            {outputSchema.map((property) => (
-              <span
-                key={property.id}
-                className="inline-flex items-center gap-1 rounded bg-accent-subtle/30 px-2 py-0.5 font-mono text-xs font-medium text-accent-primary"
-              >
-                {property.name || "(unnamed)"}
-                <span className="font-sans text-[10px] opacity-70">
-                  {property.isArray ? `${property.type}[]` : property.type}
-                </span>
-              </span>
-            ))}
-          </div>
-        ) : (
-          <div className="rounded-md bg-bg-secondary p-3 text-xs text-text-secondary">
-            No response format defined — model will return free-form text.
-          </div>
-        )}
-      </div>
-    </ReviewSection>
-  );
-}
diff --git a/app/components/assessment/review/SubmitReview.tsx b/app/components/assessment/review/SubmitReview.tsx
deleted file mode 100644
index defde80f..00000000
--- a/app/components/assessment/review/SubmitReview.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-"use client";
-
-import { Button } from "@/app/components/ui";
-import { ChevronLeftIcon, PlayIcon } from "@/app/components/icons";
-
-interface SubmitReviewProps {
-  isSubmitting: boolean;
-  canSubmit: boolean;
-  submitBlockerMessage: string;
-  onSubmit: () => void;
-  onBack: () => void;
-}
-
-export default function SubmitReview({
-  isSubmitting,
-  canSubmit,
-  submitBlockerMessage,
-  onSubmit,
-  onBack,
-}: SubmitReviewProps) {
-  return (
-    <div className="sticky bottom-0 z-10 mt-auto border-t border-neutral-200 bg-neutral-50 py-2">
-      <div className="mx-auto flex w-full max-w-5xl items-center justify-between">
-        <Button
-          type="button"
-          variant="outline"
-          size="lg"
-          onClick={onBack}
-          disabled={isSubmitting}
-          className="!rounded-lg !px-6"
-        >
-          <ChevronLeftIcon className="h-3.5 w-3.5" />
-          Back
-        </Button>
-        <div className="flex items-center gap-3">
-          {!isSubmitting && !canSubmit && (
-            <span className="text-xs text-neutral-500">
-              {submitBlockerMessage}
-            </span>
-          )}
-          <Button
-            type="button"
-            size="lg"
-            onClick={onSubmit}
-            disabled={isSubmitting || !canSubmit}
-            className="!rounded-lg !px-8"
-          >
-            {isSubmitting ? (
-              <>
-                <div className="h-4 w-4 animate-spin rounded-full border-2 border-neutral-500 border-t-transparent" />
-                Submitting...
-              </>
-            ) : (
-              <>
-                <PlayIcon className="h-5 w-5" />
-                Submit Evaluation
-              </>
-            )}
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/app/components/assessment/wizard/AssessmentStep.tsx b/app/components/assessment/wizard/AssessmentStep.tsx
new file mode 100644
index 00000000..a6c6cb19
--- /dev/null
+++ b/app/components/assessment/wizard/AssessmentStep.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import EditorStepLayout from "@/app/components/assessment/editor/EditorStepLayout";
+import PromptZoneCard from "@/app/components/assessment/editor/PromptZoneCard";
+import OutputSchemaEditorInner from "@/app/components/assessment/output-schema/OutputSchemaEditorInner";
+import {
+  ASSESSMENT_ZONE_COPY,
+  ASSESSMENT_ZONE_MIN_HEIGHT,
+} from "@/app/lib/assessment/promptCopy";
+import type { AssessmentStepProps } from "@/app/lib/types/assessment";
+
+export default function AssessmentStep({
+  zones,
+  columns,
+  fieldTypes,
+  fieldStrict,
+  sampleRow,
+  outputSchema,
+  onZoneChange,
+  onFieldType,
+  onFieldStrict,
+  onOutputSchema,
+}: AssessmentStepProps) {
+  return (
+    <EditorStepLayout
+      zones={zones}
+      columns={columns}
+      fieldTypes={fieldTypes}
+      sampleRow={sampleRow}
+    >
+      <div>
+        <h2 className="text-lg font-semibold text-text-primary">Assessment</h2>
+        <p className="mt-0.5 text-[13px] text-text-secondary">
+          Write the assessor like a document: who the AI is, what it assesses,
+          what it returns.
+        </p>
+      </div>
+
+      <PromptZoneCard
+        zones={zones}
+        copy={ASSESSMENT_ZONE_COPY}
+        zoneMinHeight={ASSESSMENT_ZONE_MIN_HEIGHT}
+        columns={columns}
+        fieldTypes={fieldTypes}
+        fieldStrict={fieldStrict}
+        onZoneChange={onZoneChange}
+        onFieldType={onFieldType}
+        onFieldStrict={onFieldStrict}
+      />
+
+      <section className="overflow-hidden rounded-2xl border border-border bg-bg-primary">
+        <div className="border-b border-border bg-bg-secondary px-5 py-3">
+          <h3 className="text-[11px] font-semibold tracking-wider uppercase text-text-secondary">
+            Output schema
+          </h3>
+          <p className="mt-0.5 text-xs text-text-secondary">
+            Enforced as structured output — every field becomes a results
+            column.
+          </p>
+        </div>
+        <div className="px-5 py-4">
+          <OutputSchemaEditorInner
+            schema={outputSchema}
+            setSchema={onOutputSchema}
+          />
+        </div>
+      </section>
+    </EditorStepLayout>
+  );
+}
diff --git a/app/components/assessment/wizard/PrefilterStep.tsx b/app/components/assessment/wizard/PrefilterStep.tsx
new file mode 100644
index 00000000..fa23be2e
--- /dev/null
+++ b/app/components/assessment/wizard/PrefilterStep.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import CompactToggleSwitch from "@/app/components/assessment/CompactToggleSwitch";
+import EditorStepLayout from "@/app/components/assessment/editor/EditorStepLayout";
+import PromptZoneCard from "@/app/components/assessment/editor/PromptZoneCard";
+import {
+  PREFILTER_ZONE_COPY,
+  PREFILTER_ZONE_MIN_HEIGHT,
+} from "@/app/lib/assessment/promptCopy";
+import type { PrefilterStepProps } from "@/app/lib/types/assessment";
+
+export default function PrefilterStep({
+  enabled,
+  zones,
+  columns,
+  fieldTypes,
+  fieldStrict,
+  sampleRow,
+  onToggle,
+  onZoneChange,
+  onFieldType,
+  onFieldStrict,
+}: PrefilterStepProps) {
+  return (
+    <EditorStepLayout
+      zones={enabled ? zones : { instructions: "", submission: "" }}
+      columns={columns}
+      fieldTypes={fieldTypes}
+      sampleRow={sampleRow}
+      previewDisabledNote={
+        enabled
+          ? undefined
+          : "Pre-filter is off — every submission goes straight to the assessment."
+      }
+    >
+      <div className="flex flex-wrap items-start justify-between gap-3">
+        <div>
+          <h2 className="text-lg font-semibold text-text-primary">
+            Pre-filter
+          </h2>
+          <p className="mt-0.5 text-[13px] text-text-secondary">
+            Optional relevance check — rejected submissions never reach the
+            assessment.
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-text-secondary">
+            {enabled ? "On" : "Off"}
+          </span>
+          <CompactToggleSwitch
+            checked={enabled}
+            onChange={() => onToggle(!enabled)}
+            title={enabled ? "Turn pre-filter off" : "Turn pre-filter on"}
+          />
+        </div>
+      </div>
+
+      {enabled && (
+        <>
+          <PromptZoneCard
+            zones={zones}
+            copy={PREFILTER_ZONE_COPY}
+            zoneMinHeight={PREFILTER_ZONE_MIN_HEIGHT}
+            columns={columns}
+            fieldTypes={fieldTypes}
+            fieldStrict={fieldStrict}
+            onZoneChange={onZoneChange}
+            onFieldType={onFieldType}
+            onFieldStrict={onFieldStrict}
+          />
+
+          <p className="flex flex-wrap items-center gap-2 rounded-xl border border-border bg-bg-secondary px-3 py-2 text-xs text-text-secondary">
+            <b className="font-semibold text-text-primary">Output is fixed:</b>
+            <span className="rounded-full bg-status-success-bg px-2 py-0.5 text-status-success-text">
+              ✓ Accepted
+            </span>
+            <span className="rounded-full bg-status-error-bg px-2 py-0.5 text-status-error-text">
+              ✗ Rejected
+            </span>
+            <span>with a reason.</span>
+          </p>
+        </>
+      )}
+    </EditorStepLayout>
+  );
+}
diff --git a/app/components/assessment/wizard/ReviewSaveModal.tsx b/app/components/assessment/wizard/ReviewSaveModal.tsx
new file mode 100644
index 00000000..62550fb7
--- /dev/null
+++ b/app/components/assessment/wizard/ReviewSaveModal.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import { useState } from "react";
+import { Button, Field, Modal } from "@/app/components/ui";
+import { DocumentFileIcon, ImageIcon } from "@/app/components/icons";
+import {
+  fieldTypeOf,
+  TOKEN_RE,
+  tokenName,
+} from "@/app/lib/assessment/promptTokens";
+import { schemaToJsonSchema } from "@/app/lib/utils/assessment";
+import type {
+  PromptFieldType,
+  ReviewSaveModalProps,
+  WizardDraft,
+} from "@/app/lib/types/assessment";
+
+const PREVIEW_LIMIT = 420;
+const VALUE_LIMIT = 90;
+
+const eyebrow =
+  "mb-2 text-[11px] font-semibold tracking-wider uppercase text-text-secondary";
+const blockHeading =
+  "bg-bg-secondary px-3 py-1.5 text-[10px] font-semibold tracking-wider uppercase text-text-secondary";
+const blockBody =
+  "max-h-48 overflow-auto px-3 py-2 font-mono text-xs leading-6 whitespace-pre-wrap";
+
+export default function ReviewSaveModal({
+  open,
+  draft,
+  sampleRow,
+  defaultName,
+  isSaving,
+  onClose,
+  onSave,
+}: ReviewSaveModalProps) {
+  const [name, setName] = useState(defaultName);
+  const [commitMessage, setCommitMessage] = useState("");
+
+  const referenced = referencedFields(draft);
+  const schemaJson = schemaToJsonSchema(draft.outputSchema);
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      title="Review & save"
+      maxWidth="max-w-3xl"
+    >
+      <div className="flex flex-col gap-6 px-6 py-4">
+        <section>
+          <p className={eyebrow}>Your submission set needs these columns</p>
+          {referenced.length === 0 ? (
+            <p className="text-xs text-text-secondary">
+              No columns referenced yet.
+            </p>
+          ) : (
+            <div className="flex flex-wrap gap-1.5">
+              {referenced.map(({ name: column, type, strict }) => (
+                <span
+                  key={column}
+                  className="inline-flex items-center gap-1.5 rounded-full border border-border bg-bg-secondary px-2.5 py-1 font-mono text-[11px] text-text-primary"
+                >
+                  {type === "text" ? (
+                    "@"
+                  ) : type === "image" ? (
+                    <ImageIcon className="h-3 w-3" />
+                  ) : (
+                    <DocumentFileIcon className="h-3 w-3" />
+                  )}
+                  {column}
+                  <span className="font-sans text-[10px] text-text-secondary">
+                    {type}
+                    {strict && " · required"}
+                  </span>
+                </span>
+              ))}
+            </div>
+          )}
+        </section>
+
+        <section>
+          <p className={eyebrow}>Assembled prompt</p>
+          <div className="overflow-hidden rounded-xl border border-border">
+            <p className={blockHeading}>
+              Instructions (same for every submission)
+            </p>
+            <pre className={blockBody}>
+              {truncate(draft.assessment.instructions, PREVIEW_LIMIT) ||
+                "(empty)"}
+            </pre>
+            <p className={`${blockHeading} border-t border-border`}>
+              Submission (preview with the first row)
+            </p>
+            <pre className={blockBody}>
+              {fillTokens(draft.assessment.submission, sampleRow) || "(empty)"}
+            </pre>
+            <p className={`${blockHeading} border-t border-border`}>
+              Output schema (enforced as structured output)
+            </p>
+            <pre className={blockBody}>
+              {schemaJson
+                ? JSON.stringify(schemaJson, null, 2)
+                : "No output fields defined yet."}
+            </pre>
+          </div>
+        </section>
+
+        <section className="flex flex-col gap-3 border-t border-border pt-4">
+          <Field
+            label="Assessor name"
+            value={name}
+            onChange={setName}
+            placeholder="e.g., SIM Idea Evaluation"
+            className="!rounded-md !bg-bg-primary"
+          />
+          <Field
+            label="Save note"
+            value={commitMessage}
+            onChange={setCommitMessage}
+            placeholder="Optional — what changed?"
+            className="!rounded-md !bg-bg-primary"
+          />
+        </section>
+      </div>
+
+      <div className="flex items-center justify-end gap-3 border-t border-border px-6 py-4">
+        <Button type="button" variant="outline" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button
+          type="button"
+          disabled={!name.trim() || isSaving}
+          onClick={() => onSave(name.trim(), commitMessage.trim())}
+        >
+          {isSaving ? "Saving..." : "Save assessor"}
+        </Button>
+      </div>
+    </Modal>
+  );
+}
+
+function referencedFields(
+  draft: WizardDraft,
+): { name: string; type: PromptFieldType; strict: boolean }[] {
+  const names = new Set<string>();
+  [draft.prefilter, draft.assessment].forEach((zones) => {
+    [zones.instructions, zones.submission].forEach((text) => {
+      for (const match of text.matchAll(TOKEN_RE)) {
+        names.add(tokenName(match[0]));
+      }
+    });
+  });
+
+  return [...names].map((name) => ({
+    name,
+    type: fieldTypeOf(draft.fieldTypes, name),
+    strict: draft.fieldStrict[name] ?? false,
+  }));
+}
+
+function truncate(value: string, limit: number): string {
+  return value.length > limit ? `${value.slice(0, limit)} …` : value;
+}
+
+function fillTokens(text: string, sampleRow: Record<string, string>): string {
+  return text.replace(TOKEN_RE, (raw) => {
+    const value = sampleRow[tokenName(raw)];
+    if (!value) return raw;
+    return value.length > VALUE_LIMIT
+      ? `${value.slice(0, VALUE_LIMIT)}…`
+      : value;
+  });
+}
diff --git a/app/components/assessment/wizard/RunStep.tsx b/app/components/assessment/wizard/RunStep.tsx
new file mode 100644
index 00000000..46e2e5f6
--- /dev/null
+++ b/app/components/assessment/wizard/RunStep.tsx
@@ -0,0 +1,183 @@
+"use client";
+
+import { useState } from "react";
+import { Button, Field, Select } from "@/app/components/ui";
+import { CloudUploadIcon, EyeIcon } from "@/app/components/icons";
+import CreatePanel from "@/app/components/assessment/datasets/CreatePanel";
+import DataViewModal from "@/app/components/assessment/DataViewModal";
+import { RUN_PREVIEW_ROW_LIMIT } from "@/app/lib/assessment/constants";
+import type {
+  RunStepProps,
+  UseSubmissionStepResult,
+} from "@/app/lib/types/assessment";
+
+interface PreviewState {
+  isLoading: boolean;
+  isDisabled: boolean;
+  rows: string[][];
+}
+
+function previewState(step: UseSubmissionStepResult): PreviewState {
+  return {
+    isLoading: step.viewingId === step.selectedId,
+    isDisabled: !step.selectedId || step.viewingId !== null,
+    rows: step.viewModalData?.rows.slice(0, RUN_PREVIEW_ROW_LIMIT) ?? [],
+  };
+}
+
+function previewSubtitle(shown: number, total: number | undefined): string {
+  if (total === undefined || total <= shown) {
+    return `${shown} row${shown === 1 ? "" : "s"}`;
+  }
+  return `First ${shown} of ${total} rows`;
+}
+
+export default function RunStep({ wizard, step }: RunStepProps) {
+  const [showUpload, setShowUpload] = useState(false);
+  const linkedId = wizard.versionDetail?.submission_id;
+
+  const selected = step.submissions.find(
+    (submission) => submission.submission_id === step.selectedId,
+  );
+  const preview = previewState(step);
+
+  const closeUpload = () => {
+    step.form.reset();
+    setShowUpload(false);
+  };
+
+  const options = step.submissions.map((submission) => {
+    const isDefault = submission.submission_id === linkedId;
+    return {
+      value: submission.submission_id,
+      label: `${submission.name} (${submission.total_items} items)${
+        isDefault ? " — default" : ""
+      }`,
+    };
+  });
+
+  return (
+    <div className="flex-1 overflow-auto p-6">
+      <div className="mx-auto flex w-full max-w-2xl flex-col gap-4">
+        <div>
+          <h2 className="text-lg font-semibold text-text-primary">
+            Run assessment
+          </h2>
+          <p className="mt-0.5 text-sm text-text-secondary">
+            Confirm the submission set and assessor version, then run.
+          </p>
+        </div>
+
+        <section className="rounded-2xl border border-border bg-bg-primary p-5">
+          <h3 className="text-sm font-semibold text-text-primary">
+            Submission
+          </h3>
+          <p className="mb-3 text-xs text-text-secondary">
+            Which submissions should this run assess?
+          </p>
+          <div className="flex items-center gap-2">
+            <Select
+              aria-label="Submission set"
+              value={step.selectedId}
+              options={options}
+              placeholder={options.length ? undefined : "No submissions yet"}
+              onChange={(event) => void step.handleSelect(event.target.value)}
+            />
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="shrink-0 rounded-md!"
+              disabled={preview.isDisabled}
+              onClick={() =>
+                void step.handleView(step.selectedId, selected?.name ?? "")
+              }
+            >
+              <EyeIcon className="h-3.5 w-3.5" />
+              {preview.isLoading ? "Loading..." : "Preview"}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              className="shrink-0 rounded-md!"
+              onClick={() => (showUpload ? closeUpload() : setShowUpload(true))}
+            >
+              <CloudUploadIcon className="h-3.5 w-3.5" />
+              Upload new
+            </Button>
+          </div>
+          <p className="mt-2 text-xs text-text-secondary">
+            Defaults to the set linked to this assessor version.
+          </p>
+
+          {showUpload && (
+            <div className="mt-3 border-t border-dashed border-border pt-3">
+              <CreatePanel
+                layout="inline"
+                form={step.form}
+                isCreating={step.isCreating}
+                onCancel={() => setShowUpload(false)}
+                onCreate={async () => {
+                  await step.handleCreate();
+                  setShowUpload(false);
+                }}
+              />
+            </div>
+          )}
+        </section>
+
+        <section className="rounded-2xl border border-border bg-bg-primary p-5">
+          <h3 className="text-sm font-semibold text-text-primary">Assessor</h3>
+          <p className="mb-3 text-xs text-text-secondary">
+            Every row runs through the pre-filter, then this assessor version.
+          </p>
+          {wizard.context ? (
+            <div className="flex flex-wrap items-center gap-2 rounded-xl border border-border bg-bg-secondary px-3 py-2.5">
+              <span className="text-[13px] font-semibold text-text-primary">
+                {wizard.context.assessorName}
+              </span>
+              <span className="rounded-full border border-border bg-bg-primary px-2 py-0.5 text-[10px] font-semibold tracking-wide uppercase text-text-secondary">
+                v{wizard.context.version}
+              </span>
+              {wizard.versionDetail?.model && (
+                <span className="rounded-full bg-bg-primary px-2 py-0.5 font-mono text-[10px] text-text-secondary">
+                  {wizard.versionDetail.model}
+                </span>
+              )}
+            </div>
+          ) : (
+            <p className="rounded-xl border border-dashed border-border bg-bg-secondary px-3 py-2.5 text-xs leading-5 text-text-secondary">
+              This assessor hasn’t been saved yet, so there is no version to
+              run. Review &amp; save lands in the next slice — until then, start
+              a run from Home by selecting an existing assessor version.
+            </p>
+          )}
+        </section>
+
+        <section className="rounded-2xl border border-border bg-bg-primary p-5">
+          <h3 className="mb-3 text-sm font-semibold text-text-primary">
+            Run name
+          </h3>
+          <Field
+            label=""
+            value={wizard.runName}
+            onChange={wizard.setRunName}
+            placeholder="e.g., SIM Pilot — Batch 2"
+            className="!rounded-md !bg-bg-primary"
+          />
+        </section>
+      </div>
+
+      {step.viewModalData && (
+        <DataViewModal
+          title={step.viewModalData.name}
+          subtitle={previewSubtitle(preview.rows.length, selected?.total_items)}
+          headers={step.viewModalData.headers}
+          rows={preview.rows}
+          onClose={() => step.setViewModalData(null)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/app/components/assessment/wizard/SavedNextModal.tsx b/app/components/assessment/wizard/SavedNextModal.tsx
new file mode 100644
index 00000000..9236d7e4
--- /dev/null
+++ b/app/components/assessment/wizard/SavedNextModal.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { Button, Modal } from "@/app/components/ui";
+import { CheckIcon } from "@/app/components/icons";
+import type { SavedNextModalProps } from "@/app/lib/types/assessment";
+
+export default function SavedNextModal({
+  open,
+  title,
+  onRun,
+  onHome,
+}: SavedNextModalProps) {
+  return (
+    <Modal
+      open={open}
+      onClose={onHome}
+      maxWidth="max-w-md"
+      maxHeight="max-h-fit"
+      showClose={false}
+    >
+      <div className="px-6 py-6 text-center">
+        <span className="mx-auto mb-3 inline-flex h-11 w-11 items-center justify-center rounded-full bg-status-success-bg text-status-success">
+          <CheckIcon className="h-5 w-5" />
+        </span>
+        <h3 className="text-base font-semibold text-text-primary">{title}</h3>
+        <p className="mt-1 text-[13px] leading-5 text-text-secondary">
+          Run an assessment on this version now, or go back to the assessment
+          home.
+        </p>
+      </div>
+      <div className="flex items-center justify-center gap-3 border-t border-border px-6 py-4">
+        <Button type="button" variant="outline" onClick={onHome}>
+          Go to home
+        </Button>
+        <Button type="button" onClick={onRun}>
+          Run assessment
+        </Button>
+      </div>
+    </Modal>
+  );
+}
diff --git a/app/components/assessment/wizard/SubmissionStep.tsx b/app/components/assessment/wizard/SubmissionStep.tsx
new file mode 100644
index 00000000..697121f0
--- /dev/null
+++ b/app/components/assessment/wizard/SubmissionStep.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { Button, Modal } from "@/app/components/ui";
+import { WarningIcon } from "@/app/components/icons";
+import DataViewModal from "@/app/components/assessment/DataViewModal";
+import CreatePanel from "@/app/components/assessment/datasets/CreatePanel";
+import SubmissionList from "@/app/components/assessment/datasets/SubmissionList";
+import type { SubmissionStepProps } from "@/app/lib/types/assessment";
+
+export default function SubmissionStep({ step }: SubmissionStepProps) {
+  const { confirmDeleteId, pendingDelete } = step;
+
+  return (
+    <div className="flex min-h-0 flex-1 overflow-hidden">
+      <SubmissionList
+        submissions={step.submissions}
+        selectedId={step.selectedId}
+        isLoading={step.isLoading}
+        isLoadingColumns={step.isLoadingColumns}
+        viewingId={step.viewingId}
+        onSelect={step.handleSelect}
+        onView={step.handleView}
+        onRequestDelete={step.setConfirmDeleteId}
+      />
+
+      <CreatePanel
+        form={step.form}
+        isCreating={step.isCreating}
+        onCreate={step.handleCreate}
+      />
+
+      {step.viewModalData && (
+        <DataViewModal
+          title={step.viewModalData.name}
+          headers={step.viewModalData.headers}
+          rows={step.viewModalData.rows}
+          onClose={() => step.setViewModalData(null)}
+        />
+      )}
+
+      {confirmDeleteId !== null && (
+        <Modal
+          open
+          onClose={() => step.setConfirmDeleteId(null)}
+          maxWidth="max-w-md"
+          maxHeight="max-h-[90vh]"
+          showClose={false}
+        >
+          <div className="px-6 py-5">
+            <div className="flex items-start gap-3">
+              <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-status-error-bg text-status-error">
+                <WarningIcon className="w-5 h-5" />
+              </span>
+              <div>
+                <h3 className="text-sm font-semibold text-text-primary">
+                  Delete submission
+                </h3>
+                <p className="mt-1 text-sm text-text-secondary">
+                  Are you sure you want to delete{" "}
+                  <b className="break-all text-text-primary">
+                    {pendingDelete?.name}
+                  </b>
+                  ? This action cannot be undone.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center justify-end gap-3 border-t border-border px-6 py-4">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => step.setConfirmDeleteId(null)}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              variant="danger"
+              disabled={step.deletingId === confirmDeleteId}
+              onClick={() => {
+                void step.handleDelete(confirmDeleteId);
+                step.setConfirmDeleteId(null);
+              }}
+            >
+              {step.deletingId === confirmDeleteId ? "Deleting..." : "Delete"}
+            </Button>
+          </div>
+        </Modal>
+      )}
+    </div>
+  );
+}
diff --git a/app/components/assessment/wizard/WizardFooter.tsx b/app/components/assessment/wizard/WizardFooter.tsx
new file mode 100644
index 00000000..3574a82b
--- /dev/null
+++ b/app/components/assessment/wizard/WizardFooter.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { Button } from "@/app/components/ui";
+import type { WizardFooterProps } from "@/app/lib/types/assessment";
+
+export default function WizardFooter({
+  showBack,
+  hint,
+  nextLabel,
+  nextDisabled,
+  isBusy,
+  onBack,
+  onNext,
+}: WizardFooterProps) {
+  return (
+    <div className="flex h-16 shrink-0 items-center justify-between gap-3 border-t border-border bg-bg-secondary px-6">
+      <Button
+        type="button"
+        variant="outline"
+        onClick={onBack}
+        className={showBack ? "" : "invisible"}
+      >
+        ‹ Back
+      </Button>
+
+      <div className="flex min-w-0 items-center gap-3">
+        <span className="truncate text-xs text-text-secondary">{hint}</span>
+        <Button
+          type="button"
+          onClick={onNext}
+          disabled={nextDisabled || isBusy}
+          className="shrink-0"
+        >
+          {isBusy ? "Submitting..." : nextLabel}
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/assessment/wizard/WizardStepBody.tsx b/app/components/assessment/wizard/WizardStepBody.tsx
new file mode 100644
index 00000000..769e393e
--- /dev/null
+++ b/app/components/assessment/wizard/WizardStepBody.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import SubmissionStep from "./SubmissionStep";
+import PrefilterStep from "./PrefilterStep";
+import AssessmentStep from "./AssessmentStep";
+import RunStep from "./RunStep";
+import type { WizardStepBodyProps } from "@/app/lib/types/assessment";
+
+export default function WizardStepBody({
+  wizard,
+  submission,
+  columns,
+  sampleRow,
+}: WizardStepBodyProps) {
+  const { draft } = wizard;
+
+  if (wizard.step === 1) return <SubmissionStep step={submission} />;
+
+  if (wizard.step === 2) {
+    return (
+      <PrefilterStep
+        enabled={draft.draft.prefilterEnabled}
+        zones={draft.draft.prefilter}
+        columns={columns}
+        fieldTypes={draft.draft.fieldTypes}
+        fieldStrict={draft.draft.fieldStrict}
+        sampleRow={sampleRow}
+        onToggle={draft.setPrefilterEnabled}
+        onZoneChange={(zone, value) => draft.setZone("prefilter", zone, value)}
+        onFieldType={draft.setFieldType}
+        onFieldStrict={draft.setFieldStrict}
+      />
+    );
+  }
+
+  if (wizard.step === 3) {
+    return (
+      <AssessmentStep
+        zones={draft.draft.assessment}
+        columns={columns}
+        fieldTypes={draft.draft.fieldTypes}
+        fieldStrict={draft.draft.fieldStrict}
+        sampleRow={sampleRow}
+        outputSchema={draft.draft.outputSchema}
+        onZoneChange={(zone, value) => draft.setZone("assessment", zone, value)}
+        onFieldType={draft.setFieldType}
+        onFieldStrict={draft.setFieldStrict}
+        onOutputSchema={draft.setOutputSchema}
+      />
+    );
+  }
+
+  return <RunStep wizard={wizard} step={submission} />;
+}
diff --git a/app/components/assessment/wizard/WizardView.tsx b/app/components/assessment/wizard/WizardView.tsx
new file mode 100644
index 00000000..aa3635f3
--- /dev/null
+++ b/app/components/assessment/wizard/WizardView.tsx
@@ -0,0 +1,118 @@
+"use client";
+
+import Stepper from "@/app/components/assessment/Stepper";
+import ModelChip from "@/app/components/assessment/model/ModelChip";
+import { ASSESSMENT_WIZARD_STEPS } from "@/app/lib/assessment/constants";
+import {
+  isWizardStepAllowed,
+  promptStepFor,
+} from "@/app/lib/assessment/wizard";
+import { useSubmissionStep } from "@/app/hooks";
+import { useAssessmentDatasetStore } from "@/app/lib/store/assessment";
+import ReviewSaveModal from "./ReviewSaveModal";
+import SavedNextModal from "./SavedNextModal";
+import WizardFooter from "./WizardFooter";
+import WizardStepBody from "./WizardStepBody";
+import { wizardFooterState, wizardContextLabel } from "./wizardCopy";
+import type {
+  UseAssessmentWizardResult,
+  WizardViewProps,
+} from "@/app/lib/types/assessment";
+
+function runPrimaryAction(wizard: UseAssessmentWizardResult): void {
+  if (wizard.step === 4) {
+    void wizard.submitRun();
+    return;
+  }
+  if (wizard.step === 3 && (wizard.flow !== "run" || wizard.isDirty)) {
+    wizard.openReview();
+    return;
+  }
+  wizard.next();
+}
+
+export default function WizardView({ wizard, onHome }: WizardViewProps) {
+  const submission = useSubmissionStep();
+  const columns = useAssessmentDatasetStore((state) => state.columns);
+  const sampleRow = useAssessmentDatasetStore((state) => state.sampleRow);
+  const draft = wizard.draft;
+  const promptStep = promptStepFor(wizard.step);
+  const selectedSubmission = submission.submissions.find(
+    (item) => item.submission_id === wizard.submissionId,
+  );
+  const footer = wizardFooterState({
+    wizard,
+    hasSubmission: Boolean(wizard.submissionId),
+    rowCount: selectedSubmission?.total_items ?? null,
+    hasPendingUpload: Boolean(submission.form.file),
+  });
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <Stepper
+        steps={ASSESSMENT_WIZARD_STEPS}
+        currentStep={wizard.step}
+        completedSteps={wizard.completedSteps}
+        onStepClick={wizard.goToStep}
+        onHome={onHome}
+        isStepAllowed={(candidate) =>
+          isWizardStepAllowed({
+            flow: wizard.flow,
+            step: candidate,
+            currentStep: wizard.step,
+            completedSteps: wizard.completedSteps,
+          })
+        }
+        trailing={
+          <>
+            <span className="truncate text-xs text-text-secondary">
+              {wizardContextLabel(wizard)}
+            </span>
+            {promptStep && (
+              <ModelChip
+                step={promptStep}
+                selection={draft.draft.models[promptStep]}
+                onModel={draft.setModel}
+                onParam={draft.setModelParam}
+              />
+            )}
+          </>
+        }
+      />
+
+      <WizardStepBody
+        wizard={wizard}
+        submission={submission}
+        columns={columns}
+        sampleRow={sampleRow}
+      />
+
+      <WizardFooter
+        showBack={footer.showBack}
+        hint={footer.hint}
+        nextLabel={footer.nextLabel}
+        nextDisabled={footer.nextDisabled}
+        isBusy={wizard.isSubmitting}
+        onBack={wizard.back}
+        onNext={() => runPrimaryAction(wizard)}
+      />
+
+      <ReviewSaveModal
+        open={wizard.isReviewOpen}
+        draft={draft.draft}
+        sampleRow={sampleRow}
+        defaultName={wizard.context?.assessorName ?? ""}
+        isSaving={wizard.isSaving}
+        onClose={wizard.closeReview}
+        onSave={wizard.saveVersion}
+      />
+
+      <SavedNextModal
+        open={wizard.savedTitle !== null}
+        title={wizard.savedTitle ?? ""}
+        onRun={() => wizard.dismissSaved("run")}
+        onHome={() => wizard.dismissSaved("home")}
+      />
+    </div>
+  );
+}
diff --git a/app/components/assessment/wizard/wizardCopy.ts b/app/components/assessment/wizard/wizardCopy.ts
new file mode 100644
index 00000000..d66ab619
--- /dev/null
+++ b/app/components/assessment/wizard/wizardCopy.ts
@@ -0,0 +1,131 @@
+import { wizardEntryStep } from "@/app/lib/assessment/wizard";
+import type {
+  AssessmentWizardStep,
+  UseAssessmentWizardResult,
+} from "@/app/lib/types/assessment";
+
+interface FooterState {
+  showBack: boolean;
+  hint: string;
+  nextLabel: string;
+  nextDisabled: boolean;
+}
+
+interface FooterInput {
+  wizard: UseAssessmentWizardResult;
+  hasSubmission: boolean;
+  rowCount: number | null;
+  hasPendingUpload: boolean;
+}
+
+const NEXT_LABELS: Record<AssessmentWizardStep, string> = {
+  1: "Next: Pre-filter",
+  2: "Next: Assessment",
+  3: "Review & save",
+  4: "Run assessment",
+};
+
+const STEP_HINTS: Record<AssessmentWizardStep, string> = {
+  1: "",
+  2: "Pre-filter is optional — toggle it off to skip",
+  3: "",
+  4: "",
+};
+
+export function wizardFooterState({
+  wizard,
+  hasSubmission,
+  rowCount,
+  hasPendingUpload,
+}: FooterInput): FooterState {
+  const { step, flow, submissionName } = wizard;
+  const showBack = step !== wizardEntryStep(flow);
+
+  if (step === 1) {
+    return {
+      showBack,
+      hint: hasSubmission
+        ? `Selected: ${submissionName}`
+        : "Select or upload a submission set",
+      nextLabel: NEXT_LABELS[1],
+      nextDisabled: !hasSubmission,
+    };
+  }
+
+  if (step === 3) {
+    return { showBack, ...assessmentStepFooter(wizard) };
+  }
+
+  if (step !== 4) {
+    return {
+      showBack,
+      hint: STEP_HINTS[step],
+      nextLabel: NEXT_LABELS[step],
+      nextDisabled: false,
+    };
+  }
+
+  return {
+    showBack,
+    hint: runStepHint({
+      hasVersion: Boolean(wizard.context),
+      hasSubmission,
+      rowCount,
+      hasPendingUpload,
+    }),
+    nextLabel: NEXT_LABELS[4],
+    nextDisabled: !hasSubmission || !wizard.context || hasPendingUpload,
+  };
+}
+
+function assessmentStepFooter(
+  wizard: UseAssessmentWizardResult,
+): Omit<FooterState, "showBack"> {
+  const { flow, canSave, isDirty } = wizard;
+
+  if (flow === "run") {
+    return isDirty
+      ? {
+          hint: "Saving bumps a new version — the run uses it",
+          nextLabel: "Review & save",
+          nextDisabled: false,
+        }
+      : {
+          hint: "Unchanged — runs the selected version",
+          nextLabel: "Next: Run assessment",
+          nextDisabled: false,
+        };
+  }
+
+  const hint = canSave
+    ? "Saving creates a new assessor version"
+    : flow === "edit"
+      ? "No changes yet — edit something to save a new version"
+      : "Write the assessment prompt to enable Review & save";
+
+  return { hint, nextLabel: NEXT_LABELS[3], nextDisabled: !canSave };
+}
+
+function runStepHint({
+  hasVersion,
+  hasSubmission,
+  rowCount,
+  hasPendingUpload,
+}: Omit<FooterInput, "wizard"> & { hasVersion: boolean }): string {
+  if (hasPendingUpload) {
+    return "Create the uploaded submission first, or cancel it";
+  }
+  if (!hasVersion) return "Save the assessor first to run it";
+  if (!hasSubmission) return "Select a submission set";
+  if (rowCount === null) return "Every row of the set will be queued";
+  return `${rowCount} row${rowCount === 1 ? "" : "s"} will be queued`;
+}
+
+export function wizardContextLabel(wizard: UseAssessmentWizardResult): string {
+  const { flow, context } = wizard;
+  if (flow === "new") return "New assessor";
+  if (!context) return "";
+  return flow === "edit"
+    ? `Editing ${context.assessorName} · from v${context.version}`
+    : `${context.assessorName} v${context.version}`;
+}
diff --git a/app/components/datasets/UploadDatasetModal.tsx b/app/components/datasets/UploadDatasetModal.tsx
index 7c0be20e..923f5804 100644
--- a/app/components/datasets/UploadDatasetModal.tsx
+++ b/app/components/datasets/UploadDatasetModal.tsx
@@ -48,7 +48,7 @@ export default function UploadDatasetModal({
         <div className="border-2 border-dashed rounded-lg p-12 text-center transition-colors border-border">
           <div className="space-y-4">
             <div className="text-text-secondary">
-              <CloudUploadIcon className="mx-auto" />
+              <CloudUploadIcon className="mx-auto h-12 w-12" />
             </div>
             <input
               ref={fileInputRef}
diff --git a/app/components/document/UploadDocumentModal.tsx b/app/components/document/UploadDocumentModal.tsx
index d9d41674..8d1235bf 100644
--- a/app/components/document/UploadDocumentModal.tsx
+++ b/app/components/document/UploadDocumentModal.tsx
@@ -94,7 +94,7 @@ export function UploadDocumentModal({
           <div className="border-2 border-dashed rounded-lg p-10 text-center transition-colors border-border">
             <div className="space-y-4">
               <div className="text-text-secondary">
-                <CloudUploadIcon className="mx-auto" />
+                <CloudUploadIcon className="mx-auto h-12 w-12" />
               </div>
               <div>
                 <input
diff --git a/app/components/icons/common/HomeIcon.tsx b/app/components/icons/common/HomeIcon.tsx
new file mode 100644
index 00000000..7f49e589
--- /dev/null
+++ b/app/components/icons/common/HomeIcon.tsx
@@ -0,0 +1,23 @@
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function HomeIcon({ className, style }: IconProps) {
+  return (
+    <svg
+      className={`w-4 h-4 ${className ?? ""}`}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+      style={style}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M3 10.5L12 3l9 7.5M5 9.5V20a1 1 0 001 1h4v-6h4v6h4a1 1 0 001-1V9.5"
+      />
+    </svg>
+  );
+}
diff --git a/app/components/icons/common/ImageIcon.tsx b/app/components/icons/common/ImageIcon.tsx
new file mode 100644
index 00000000..3c9f4aaa
--- /dev/null
+++ b/app/components/icons/common/ImageIcon.tsx
@@ -0,0 +1,25 @@
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function ImageIcon({ className, style }: IconProps) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+      style={style}
+    >
+      <rect x="3" y="5" width="18" height="14" rx="2" />
+      <circle cx="8.5" cy="10" r="1.5" />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M21 15l-4.5-4.5L9 18"
+      />
+    </svg>
+  );
+}
diff --git a/app/components/icons/common/LockClosedIcon.tsx b/app/components/icons/common/LockClosedIcon.tsx
new file mode 100644
index 00000000..d823ec8d
--- /dev/null
+++ b/app/components/icons/common/LockClosedIcon.tsx
@@ -0,0 +1,20 @@
+interface IconProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export default function LockClosedIcon({ className, style }: IconProps) {
+  return (
+    <svg
+      className={`w-3 h-3 ${className ?? ""}`}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2.2}
+      style={style}
+    >
+      <rect x="4.5" y="10.5" width="15" height="10" rx="2" />
+      <path strokeLinecap="round" d="M8 10.5V7a4 4 0 018 0v3.5" />
+    </svg>
+  );
+}
diff --git a/app/components/icons/document/CloudUploadIcon.tsx b/app/components/icons/document/CloudUploadIcon.tsx
index 01917fa5..5240812d 100644
--- a/app/components/icons/document/CloudUploadIcon.tsx
+++ b/app/components/icons/document/CloudUploadIcon.tsx
@@ -5,7 +5,7 @@ interface IconProps {
 export default function CloudUploadIcon({ className }: IconProps) {
   return (
     <svg
-      className={`w-12 h-12 ${className ?? ""}`}
+      className={className}
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
diff --git a/app/components/icons/index.tsx b/app/components/icons/index.tsx
index ed9c9556..d4b6d4d7 100644
--- a/app/components/icons/index.tsx
+++ b/app/components/icons/index.tsx
@@ -21,6 +21,9 @@ export { default as SidebarToggleIcon } from "./common/SidebarToggleIcon";
 export { default as MailIcon } from "./common/MailIcon";
 export { default as ErrorCircleIcon } from "./common/ErrorCircleIcon";
 export { default as DownloadIcon } from "./common/DownloadIcon";
+export { default as HomeIcon } from "./common/HomeIcon";
+export { default as ImageIcon } from "./common/ImageIcon";
+export { default as LockClosedIcon } from "./common/LockClosedIcon";
 
 // Evaluations Icons
 export { default as ChevronUpIcon } from "./evaluations/ChevronUpIcon";
diff --git a/app/components/settings/credentials/CredentialForm.tsx b/app/components/settings/credentials/CredentialForm.tsx
index e0f63416..15a19d53 100644
--- a/app/components/settings/credentials/CredentialForm.tsx
+++ b/app/components/settings/credentials/CredentialForm.tsx
@@ -60,6 +60,7 @@ export default function CredentialForm({
               onChange={(val) => onChange(field.key, val)}
               placeholder={field.placeholder}
               type={field.type || "text"}
+              required={field.required}
             />
           ))}
 
diff --git a/app/components/settings/credentials/CredentialFormPanel.tsx b/app/components/settings/credentials/CredentialFormPanel.tsx
index fb9d8300..43676213 100644
--- a/app/components/settings/credentials/CredentialFormPanel.tsx
+++ b/app/components/settings/credentials/CredentialFormPanel.tsx
@@ -71,6 +71,7 @@ export default function CredentialFormPanel({
               onChange={(val) => onChange(field.key, val)}
               placeholder={field.placeholder}
               type={field.type || "text"}
+              required={field.required}
             />
           ))}
 
diff --git a/app/components/settings/onboarding/OnboardingCredentials.tsx b/app/components/settings/onboarding/OnboardingCredentials.tsx
index 49ad565e..9a047349 100644
--- a/app/components/settings/onboarding/OnboardingCredentials.tsx
+++ b/app/components/settings/onboarding/OnboardingCredentials.tsx
@@ -9,7 +9,12 @@ import {
   Credential,
   ProviderDef,
 } from "@/app/lib/types/credentials";
-import { getExistingForProvider } from "@/app/lib/utils";
+import {
+  buildCredentialPayload,
+  getExistingForProvider,
+  missingCredentialFields,
+  populateCredentialForm,
+} from "@/app/lib/utils";
 import ProviderSidebar from "@/app/components/settings/ProviderSidebar";
 import { CredentialFormPanel } from "@/app/components/settings/credentials";
 
@@ -62,48 +67,37 @@ export default function OnboardingCredentials({
   // Re-populate form when provider or credentials change
   useEffect(() => {
     const existing = getExistingForProvider(selectedProvider, credentials);
-    if (existing) {
-      setExistingCredential(existing);
-      setIsActive(existing.is_active);
-      const populated: Record<string, string> = {};
-      selectedProvider.fields.forEach((f) => {
-        populated[f.key] = existing.credential[f.key] || "";
-      });
-      setFormValues(populated);
-    } else {
-      setExistingCredential(null);
-      setIsActive(true);
-      const blank: Record<string, string> = {};
-      selectedProvider.fields.forEach((f) => {
-        blank[f.key] = "";
-      });
-      setFormValues(blank);
-    }
+    setExistingCredential(existing);
+    setIsActive(existing ? existing.is_active : true);
+    setFormValues(populateCredentialForm(selectedProvider, existing));
   }, [selectedProvider, credentials]);
 
   const handleSave = async () => {
-    const missing = selectedProvider.fields.filter(
-      (f) => !formValues[f.key]?.trim(),
-    );
+    const missing = missingCredentialFields(selectedProvider, formValues);
     if (missing.length > 0) {
       toast.error(`Please fill in: ${missing.map((f) => f.label).join(", ")}`);
       return;
     }
 
+    const built = buildCredentialPayload(selectedProvider, formValues);
+    if (built.error) {
+      toast.error(built.error);
+      return;
+    }
+    if (Object.keys(built.payload).length === 0) {
+      toast.error("No changes to save");
+      return;
+    }
+
     setIsSaving(true);
     try {
-      const innerPayload: Record<string, string> = {};
-      selectedProvider.fields.forEach((f) => {
-        innerPayload[f.key] = formValues[f.key].trim();
-      });
-
       await apiFetch(credentialsUrl, apiKey, {
         method: "PATCH",
         body: JSON.stringify({
           provider: selectedProvider.credentialKey,
           is_active: isActive,
           credential: {
-            [selectedProvider.credentialKey]: innerPayload,
+            [selectedProvider.credentialKey]: built.payload,
           },
         }),
       });
@@ -122,21 +116,8 @@ export default function OnboardingCredentials({
 
   const handleCancel = () => {
     const existing = getExistingForProvider(selectedProvider, credentials);
-    if (existing) {
-      setIsActive(existing.is_active);
-      const populated: Record<string, string> = {};
-      selectedProvider.fields.forEach((f) => {
-        populated[f.key] = existing.credential[f.key] || "";
-      });
-      setFormValues(populated);
-    } else {
-      const blank: Record<string, string> = {};
-      selectedProvider.fields.forEach((f) => {
-        blank[f.key] = "";
-      });
-      setFormValues(blank);
-      setIsActive(true);
-    }
+    setIsActive(existing ? existing.is_active : true);
+    setFormValues(populateCredentialForm(selectedProvider, existing));
   };
 
   const handleDelete = async () => {
diff --git a/app/components/ui/CursorPager.tsx b/app/components/ui/CursorPager.tsx
new file mode 100644
index 00000000..dc8460d6
--- /dev/null
+++ b/app/components/ui/CursorPager.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { ChevronLeftIcon, ChevronRightIcon } from "@/app/components/icons";
+
+interface CursorPagerProps {
+  hasPrev: boolean;
+  hasNext: boolean;
+  onPrev: () => void;
+  onNext: () => void;
+  label?: string;
+  className?: string;
+}
+
+const buttonBase =
+  "min-w-7 h-7 inline-flex items-center justify-center rounded-lg border text-xs font-medium transition-colors cursor-pointer disabled:cursor-default disabled:opacity-35";
+const idleStyles =
+  "border-border bg-bg-primary text-text-secondary hover:border-accent-muted hover:text-text-primary";
+
+/** Prev/next only — the API reports `has_more`, never a total page count. */
+export default function CursorPager({
+  hasPrev,
+  hasNext,
+  onPrev,
+  onNext,
+  label = "Pagination",
+  className = "",
+}: CursorPagerProps) {
+  if (!hasPrev && !hasNext) return null;
+
+  return (
+    <nav
+      aria-label={label}
+      className={`inline-flex items-center gap-1.5 ${className}`}
+    >
+      <button
+        type="button"
+        aria-label="Previous page"
+        disabled={!hasPrev}
+        onClick={onPrev}
+        className={`${buttonBase} ${idleStyles}`}
+      >
+        <ChevronLeftIcon className="w-3 h-3" />
+      </button>
+      <button
+        type="button"
+        aria-label="Next page"
+        disabled={!hasNext}
+        onClick={onNext}
+        className={`${buttonBase} ${idleStyles}`}
+      >
+        <ChevronRightIcon className="w-3 h-3" />
+      </button>
+    </nav>
+  );
+}
diff --git a/app/components/ui/Field.tsx b/app/components/ui/Field.tsx
index f11d1491..b1aca97b 100644
--- a/app/components/ui/Field.tsx
+++ b/app/components/ui/Field.tsx
@@ -14,6 +14,51 @@ interface FieldProps {
   autoFocus?: boolean;
   className?: string;
   maxLength?: number;
+  required?: boolean;
+  rows?: number;
+}
+
+interface ControlProps extends Omit<FieldProps, "label" | "error"> {
+  inputType: string;
+  controlClass: string;
+}
+
+function FieldControl({
+  value,
+  onChange,
+  placeholder,
+  type,
+  inputType,
+  controlClass,
+  disabled,
+  autoFocus,
+  maxLength,
+  required,
+  rows,
+}: ControlProps) {
+  const shared = {
+    value,
+    placeholder,
+    disabled,
+    autoFocus,
+    maxLength,
+    required,
+    onChange: (
+      event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    ) => onChange(event.target.value),
+  };
+
+  if (type === "textarea") {
+    return (
+      <textarea
+        {...shared}
+        rows={rows ?? 6}
+        className={`${controlClass} font-mono resize-y`}
+      />
+    );
+  }
+
+  return <input {...shared} type={inputType} className={controlClass} />;
 }
 
 export default function Field({
@@ -27,28 +72,39 @@ export default function Field({
   autoFocus = false,
   className = "",
   maxLength,
+  required,
+  rows,
 }: FieldProps) {
   const [showPassword, setShowPassword] = useState(false);
   const isPassword = type === "password";
   const inputType = isPassword ? (showPassword ? "text" : "password") : type;
+  const controlClass = `w-full px-3 py-2 rounded-lg border text-sm text-text-primary bg-white placeholder:text-neutral-400 focus:outline-none focus:ring-accent-primary/20 focus:border-accent-primary transition-colors ${
+    isPassword ? "pr-10" : ""
+  } ${error ? "border-red-400" : "border-border"} ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`;
 
   return (
     <div>
       <label className="block text-xs font-medium text-text-secondary mb-1">
         {label}
+        {required && (
+          <span className="text-red-500 ml-0.5" aria-hidden="true">
+            *
+          </span>
+        )}
       </label>
       <div className="relative">
-        <input
-          type={inputType}
+        <FieldControl
           value={value}
-          onChange={(e) => onChange(e.target.value)}
+          onChange={onChange}
           placeholder={placeholder}
+          type={type}
+          inputType={inputType}
+          controlClass={controlClass}
           disabled={disabled}
           autoFocus={autoFocus}
           maxLength={maxLength}
-          className={`w-full px-3 py-2 rounded-lg border text-sm text-text-primary bg-white placeholder:text-neutral-400 focus:outline-none focus:ring-accent-primary/20 focus:border-accent-primary transition-colors ${
-            isPassword ? "pr-10" : ""
-          } ${error ? "border-red-400" : "border-border"} ${disabled ? "opacity-50 cursor-not-allowed" : ""} ${className}`}
+          required={required}
+          rows={rows}
         />
         {isPassword && (
           <button
diff --git a/app/components/ui/Pager.tsx b/app/components/ui/Pager.tsx
new file mode 100644
index 00000000..4367c2d6
--- /dev/null
+++ b/app/components/ui/Pager.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { ChevronLeftIcon, ChevronRightIcon } from "@/app/components/icons";
+import { PAGER_WINDOW_SIZE } from "@/app/lib/assessment/constants";
+import { pageWindow } from "@/app/lib/utils/assessment";
+
+interface PagerProps {
+  page: number;
+  pages: number;
+  onGoto: (page: number) => void;
+  label?: string;
+  className?: string;
+}
+
+const buttonBase =
+  "min-w-7 h-7 px-2 inline-flex items-center justify-center rounded-lg border text-xs font-medium transition-colors cursor-pointer disabled:cursor-default disabled:opacity-35";
+const idleStyles =
+  "border-border bg-bg-primary text-text-secondary hover:border-accent-muted hover:text-text-primary";
+const currentStyles =
+  "border-accent-primary bg-accent-primary text-white font-semibold";
+
+export default function Pager({
+  page,
+  pages,
+  onGoto,
+  label = "Pagination",
+  className = "",
+}: PagerProps) {
+  if (pages <= 1) return null;
+
+  return (
+    <nav
+      aria-label={label}
+      className={`inline-flex items-center gap-1.5 ${className}`}
+    >
+      <button
+        type="button"
+        aria-label="Previous page"
+        disabled={page <= 1}
+        onClick={() => onGoto(page - 1)}
+        className={`${buttonBase} ${idleStyles} px-0`}
+      >
+        <ChevronLeftIcon className="w-3 h-3" />
+      </button>
+
+      {pageWindow(page, pages, PAGER_WINDOW_SIZE).map((candidate) => (
+        <button
+          key={candidate}
+          type="button"
+          aria-label={`Page ${candidate}`}
+          aria-current={candidate === page ? "page" : undefined}
+          onClick={() => onGoto(candidate)}
+          className={`${buttonBase} ${
+            candidate === page ? currentStyles : idleStyles
+          }`}
+        >
+          {candidate}
+        </button>
+      ))}
+
+      <button
+        type="button"
+        aria-label="Next page"
+        disabled={page >= pages}
+        onClick={() => onGoto(page + 1)}
+        className={`${buttonBase} ${idleStyles} px-0`}
+      >
+        <ChevronRightIcon className="w-3 h-3" />
+      </button>
+    </nav>
+  );
+}
diff --git a/app/components/ui/Select.tsx b/app/components/ui/Select.tsx
index 4d7643da..4cecfe23 100644
--- a/app/components/ui/Select.tsx
+++ b/app/components/ui/Select.tsx
@@ -11,6 +11,7 @@ interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
 export default function Select({
   options,
   placeholder,
+  className = "",
   ...props
 }: SelectProps) {
   const isGrouped = options.some((o) => o.group !== undefined);
@@ -31,7 +32,7 @@ export default function Select({
 
   return (
     <select
-      className="w-full text-sm rounded-md border border-border bg-bg-primary text-text-primary px-2.5 py-1.5 outline-none focus:ring-1 focus:ring-accent-primary/20 focus:border-accent-primary cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
+      className={`w-full text-sm rounded-md border border-border bg-bg-primary text-text-primary px-2.5 py-1.5 outline-none focus:ring-1 focus:ring-accent-primary/20 focus:border-accent-primary cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${className}`}
       {...props}
     >
       {placeholder && <option value="">{placeholder}</option>}
diff --git a/app/components/ui/SplitPane.tsx b/app/components/ui/SplitPane.tsx
new file mode 100644
index 00000000..f389168a
--- /dev/null
+++ b/app/components/ui/SplitPane.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import { ReactNode, useCallback, useRef, useState } from "react";
+
+interface SplitPaneProps {
+  left: ReactNode;
+  right: ReactNode;
+  /** Left pane width as a percentage; clamped to MIN..MAX. */
+  defaultLeftPercent?: number;
+  label?: string;
+}
+
+const MIN_PERCENT = 28;
+const MAX_PERCENT = 72;
+const KEY_STEP = 4;
+
+const clamp = (value: number) =>
+  Math.min(MAX_PERCENT, Math.max(MIN_PERCENT, value));
+
+/**
+ * Two panes with a draggable divider. Stacks vertically below `lg`, where a
+ * horizontal split has no room. Keyboard-resizable via the divider's arrow keys.
+ */
+export default function SplitPane({
+  left,
+  right,
+  defaultLeftPercent = 52,
+  label = "Resize panes",
+}: SplitPaneProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [leftPercent, setLeftPercent] = useState(clamp(defaultLeftPercent));
+  const [isDragging, setIsDragging] = useState(false);
+
+  const resizeTo = useCallback((clientX: number) => {
+    const bounds = containerRef.current?.getBoundingClientRect();
+    if (!bounds || bounds.width === 0) return;
+    setLeftPercent(clamp(((clientX - bounds.left) / bounds.width) * 100));
+  }, []);
+
+  const onPointerDown = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      event.currentTarget.setPointerCapture(event.pointerId);
+      setIsDragging(true);
+    },
+    [],
+  );
+
+  const onPointerMove = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      if (isDragging) resizeTo(event.clientX);
+    },
+    [isDragging, resizeTo],
+  );
+
+  const onKeyDown = useCallback((event: React.KeyboardEvent) => {
+    if (event.key === "ArrowLeft") {
+      setLeftPercent((current) => clamp(current - KEY_STEP));
+    } else if (event.key === "ArrowRight") {
+      setLeftPercent((current) => clamp(current + KEY_STEP));
+    }
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      style={{ ["--split-left" as string]: `${leftPercent}%` }}
+      className="flex min-h-0 flex-1 flex-col overflow-y-auto lg:flex-row lg:overflow-hidden"
+    >
+      <div className="flex min-h-[60vh] flex-1 flex-col overflow-hidden lg:min-h-0 lg:w-[var(--split-left)] lg:flex-none">
+        {left}
+      </div>
+
+      <div
+        role="separator"
+        aria-orientation="vertical"
+        aria-label={label}
+        aria-valuenow={Math.round(leftPercent)}
+        aria-valuemin={MIN_PERCENT}
+        aria-valuemax={MAX_PERCENT}
+        tabIndex={0}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={() => setIsDragging(false)}
+        onKeyDown={onKeyDown}
+        className={`hidden w-[5px] shrink-0 cursor-col-resize transition-colors focus-visible:bg-accent-primary lg:block ${
+          isDragging ? "bg-accent-primary" : "bg-border hover:bg-accent-muted"
+        }`}
+      />
+
+      <div className="flex min-h-[60vh] flex-1 flex-col overflow-hidden border-t border-border lg:min-h-0 lg:border-t-0">
+        {right}
+      </div>
+    </div>
+  );
+}
diff --git a/app/components/ui/index.ts b/app/components/ui/index.ts
index 7f5c4c4c..5eeff6a6 100644
--- a/app/components/ui/index.ts
+++ b/app/components/ui/index.ts
@@ -2,8 +2,11 @@ export { default as Button } from "./Button";
 export { default as Checkbox } from "./Checkbox";
 export { default as Field } from "./Field";
 export { default as Select } from "./Select";
+export { default as SplitPane } from "./SplitPane";
 export { default as MultiSelect } from "./MultiSelect";
 export { default as Modal } from "./Modal";
+export { default as CursorPager } from "./CursorPager";
+export { default as Pager } from "./Pager";
 export { default as RadioGroup } from "./RadioGroup";
 export { default as Loader, LoaderBox } from "./Loader";
 export { ToggleOnIcon, ToggleOffIcon } from "./ToggleThumbIcons";
diff --git a/app/hooks/index.ts b/app/hooks/index.ts
index c8c473c9..ff463380 100644
--- a/app/hooks/index.ts
+++ b/app/hooks/index.ts
@@ -1,6 +1,13 @@
+export { useAssessmentData } from "./useAssessmentData";
+export { useAssessmentHome } from "./useAssessmentHome";
+export { useAssessmentHomeData } from "./useAssessmentHomeData";
 export { useConfigs } from "./useConfigs";
 export { useDebouncedValue } from "./useDebouncedValue";
-export { useOnboardingActivation } from "./useOnboardingActivation";
 export { useInfiniteScroll } from "./useInfiniteScroll";
+export { useOnboardingActivation } from "./useOnboardingActivation";
 export { usePaginatedList } from "./usePaginatedList";
+export { usePromptMentions } from "./usePromptMentions";
+export { useRunResults } from "./useRunResults";
+export { useSubmissionStep } from "./useSubmissionStep";
+export { useSyncedScroll } from "./useSyncedScroll";
 export type { UsePaginatedListResult } from "@/app/lib/types/pagination";
diff --git a/app/hooks/useAssessmentData.ts b/app/hooks/useAssessmentData.ts
new file mode 100644
index 00000000..0d02e119
--- /dev/null
+++ b/app/hooks/useAssessmentData.ts
@@ -0,0 +1,17 @@
+"use client";
+
+/**
+ * Single access point for assessment data: the API-backed source bound to the
+ * active API key.
+ */
+import { useMemo } from "react";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { createApiAssessmentSource } from "@/app/lib/assessment/apiSource";
+import type { AssessmentDataSource } from "@/app/lib/types/assessment";
+
+export function useAssessmentData(): AssessmentDataSource {
+  const { activeKey } = useAuth();
+  const apiKey = activeKey?.key ?? "";
+
+  return useMemo(() => createApiAssessmentSource(apiKey), [apiKey]);
+}
diff --git a/app/hooks/useAssessmentDatasetsTab.ts b/app/hooks/useAssessmentDatasetsTab.ts
deleted file mode 100644
index 319f3281..00000000
--- a/app/hooks/useAssessmentDatasetsTab.ts
+++ /dev/null
@@ -1,361 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-import { apiFetch } from "@/app/lib/apiClient";
-import type { Dataset } from "@/app/lib/types/dataset";
-import { useToast } from "@/app/hooks/useToast";
-import { useAuth } from "@/app/lib/context/AuthContext";
-import {
-  extractCreatedDataset,
-  fetchDatasetPreview,
-  handleForbiddenError,
-  isAllowedDatasetFile,
-  isBlankCell,
-} from "@/app/lib/utils/assessment";
-import { PREVIEW_ROW_LIMIT } from "@/app/lib/assessment/results";
-import {
-  DATASET_SAMPLE_ROW_LIMIT,
-  MAX_DATASET_FILE_BYTES,
-} from "@/app/lib/assessment/constants";
-import type {
-  CreateDatasetResponse,
-  DatasetPreview,
-  DatasetResponse,
-  DatasetsTabProps,
-  DatasetViewModalData,
-} from "@/app/lib/types/assessment";
-
-type UseAssessmentDatasetsTabParams = Pick<
-  DatasetsTabProps,
-  | "onForbidden"
-  | "datasetId"
-  | "setDatasetId"
-  | "setSelectedDatasetName"
-  | "onColumnsLoaded"
->;
-
-export interface UseAssessmentDatasetsTabResult {
-  datasets: Dataset[];
-  isLoading: boolean;
-  isLoadingColumns: boolean;
-  viewingId: number | null;
-  canProceed: boolean;
-  datasetName: string;
-  datasetDescription: string;
-  uploadedFile: File | null;
-  isDragging: boolean;
-  isUploading: boolean;
-  fileInputRef: React.RefObject<HTMLInputElement | null>;
-  viewModalData: DatasetViewModalData | null;
-  confirmDeleteId: number | null;
-  deletingId: number | null;
-  datasetPendingDelete: Dataset | undefined;
-  setDatasetName: (value: string) => void;
-  setDatasetDescription: (value: string) => void;
-  setUploadedFile: (value: File | null) => void;
-  setIsDragging: (value: boolean) => void;
-  setConfirmDeleteId: (value: number | null) => void;
-  setViewModalData: (value: DatasetViewModalData | null) => void;
-  handleFileSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  resetForm: () => void;
-  handleCreateDataset: () => Promise<void>;
-  handleDatasetSelect: (id: string, name?: string) => Promise<void>;
-  handleViewDataset: (datasetId: number, name: string) => Promise<void>;
-  handleDeleteDataset: (id: number) => Promise<void>;
-  handleDrop: (event: React.DragEvent<HTMLDivElement>) => void;
-}
-
-export function useAssessmentDatasetsTab({
-  onForbidden,
-  datasetId,
-  setDatasetId,
-  setSelectedDatasetName,
-  onColumnsLoaded,
-}: UseAssessmentDatasetsTabParams): UseAssessmentDatasetsTabResult {
-  const toast = useToast();
-  const { activeKey, isAuthenticated } = useAuth();
-  const apiKey = activeKey?.key ?? "";
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const [datasets, setDatasets] = useState<Dataset[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isLoadingColumns, setIsLoadingColumns] = useState(false);
-  const [datasetName, setDatasetName] = useState("");
-  const [datasetDescription, setDatasetDescription] = useState("");
-  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
-  const [isUploading, setIsUploading] = useState(false);
-  const [isDragging, setIsDragging] = useState(false);
-  const [viewingId, setViewingId] = useState<number | null>(null);
-  const [viewModalData, setViewModalData] =
-    useState<DatasetViewModalData | null>(null);
-  const [confirmDeleteId, setConfirmDeleteId] = useState<number | null>(null);
-  const [deletingId, setDeletingId] = useState<number | null>(null);
-  const [previewCache, setPreviewCache] = useState<
-    Record<string, DatasetPreview>
-  >({});
-
-  const loadDatasets = useCallback(async () => {
-    if (!isAuthenticated) return;
-    setIsLoading(true);
-    try {
-      const data = await apiFetch<DatasetResponse>(
-        "/api/assessment/datasets",
-        apiKey,
-      );
-      setDatasets(Array.isArray(data) ? data : data.data || []);
-    } catch (error) {
-      if (handleForbiddenError(error, onForbidden)) return;
-      console.error("Failed to load datasets:", error);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [apiKey, isAuthenticated, onForbidden]);
-
-  useEffect(() => {
-    loadDatasets();
-  }, [loadDatasets]);
-
-  useEffect(() => {
-    if (!datasetId || datasets.length === 0) return;
-    const selected = datasets.find(
-      (dataset) => dataset.dataset_id.toString() === datasetId,
-    );
-    if (selected?.dataset_name) {
-      setSelectedDatasetName(selected.dataset_name);
-    }
-  }, [datasetId, datasets, setSelectedDatasetName]);
-
-  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-
-    if (!isAllowedDatasetFile(file.name)) {
-      toast.error("Please select a CSV or Excel (.xlsx, .xls) file");
-      event.target.value = "";
-      return;
-    }
-
-    if (file.size > MAX_DATASET_FILE_BYTES) {
-      toast.error(
-        `File too large. Max ${MAX_DATASET_FILE_BYTES / (1024 * 1024)}MB allowed.`,
-      );
-      event.target.value = "";
-      return;
-    }
-
-    setUploadedFile(file);
-    if (!datasetName) {
-      setDatasetName(file.name.replace(/\.(csv|xlsx|xls)$/i, ""));
-    }
-  };
-
-  const resetForm = () => {
-    setDatasetName("");
-    setDatasetDescription("");
-    setUploadedFile(null);
-    if (fileInputRef.current) fileInputRef.current.value = "";
-  };
-
-  const handleDatasetSelect = async (id: string, name?: string) => {
-    setDatasetId(id);
-    if (!id) {
-      setSelectedDatasetName("");
-      onColumnsLoaded([]);
-      return;
-    }
-
-    const resolvedName =
-      name ??
-      datasets.find((dataset) => dataset.dataset_id.toString() === id)
-        ?.dataset_name ??
-      "";
-    setSelectedDatasetName(resolvedName);
-
-    setIsLoadingColumns(true);
-    try {
-      const cached = previewCache[id];
-      const parsed =
-        cached ??
-        (await fetchDatasetPreview(id, apiKey, DATASET_SAMPLE_ROW_LIMIT));
-      if (!cached) {
-        setPreviewCache((prev) => ({ ...prev, [id]: parsed }));
-      }
-      const keptIdx = parsed.headers
-        .map((_, colIdx) => colIdx)
-        .filter((colIdx) =>
-          parsed.rows.some((row) => !isBlankCell(row[colIdx])),
-        );
-
-      const filteredHeaders = keptIdx.map((idx) => parsed.headers[idx]);
-      const firstRow = parsed.rows[0] || [];
-      const sampleRow = Object.fromEntries(
-        keptIdx.map((idx) => [
-          parsed.headers[idx],
-          String(firstRow[idx] ?? ""),
-        ]),
-      );
-      onColumnsLoaded(filteredHeaders, sampleRow);
-    } catch (error) {
-      if (handleForbiddenError(error, onForbidden)) return;
-      const message =
-        error instanceof Error
-          ? error.message
-          : "Failed to fetch dataset columns.";
-      onColumnsLoaded([]);
-      setDatasetId("");
-      setSelectedDatasetName("");
-      toast.error(message);
-    } finally {
-      setIsLoadingColumns(false);
-    }
-  };
-
-  const handleCreateDataset = async () => {
-    if (!uploadedFile || !datasetName.trim() || !isAuthenticated) return;
-
-    setIsUploading(true);
-    try {
-      const formData = new FormData();
-      formData.append("file", uploadedFile);
-      formData.append("dataset_name", datasetName.trim());
-      if (datasetDescription.trim()) {
-        formData.append("description", datasetDescription.trim());
-      }
-
-      const data = await apiFetch<CreateDatasetResponse>(
-        "/api/assessment/datasets",
-        apiKey,
-        {
-          method: "POST",
-          body: formData,
-        },
-      );
-      await loadDatasets();
-
-      const created = extractCreatedDataset(data);
-      if (created?.dataset_id) {
-        void handleDatasetSelect(
-          created.dataset_id.toString(),
-          created.dataset_name ?? datasetName.trim(),
-        );
-      }
-
-      resetForm();
-      toast.success("Dataset created successfully!");
-    } catch (error) {
-      if (handleForbiddenError(error, onForbidden)) return;
-      toast.error(
-        `Failed to create dataset: ${error instanceof Error ? error.message : "Unknown error"}`,
-      );
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  const handleViewDataset = async (selectedDatasetId: number, name: string) => {
-    const cacheKey = String(selectedDatasetId);
-    const cached = previewCache[cacheKey];
-    if (cached) {
-      setViewModalData({ name, headers: cached.headers, rows: cached.rows });
-      return;
-    }
-
-    setViewingId(selectedDatasetId);
-    try {
-      const parsed = await fetchDatasetPreview(
-        selectedDatasetId,
-        apiKey,
-        PREVIEW_ROW_LIMIT,
-      );
-      setPreviewCache((prev) => ({ ...prev, [cacheKey]: parsed }));
-      setViewModalData({ name, headers: parsed.headers, rows: parsed.rows });
-    } catch (error) {
-      if (handleForbiddenError(error, onForbidden)) return;
-      toast.error(
-        error instanceof Error ? error.message : "Failed to view dataset",
-      );
-    } finally {
-      setViewingId(null);
-    }
-  };
-
-  const handleDeleteDataset = async (id: number) => {
-    setDeletingId(id);
-    try {
-      await apiFetch(`/api/assessment/datasets/${id}`, apiKey, {
-        method: "DELETE",
-      });
-      toast.success("Dataset deleted");
-      if (datasetId === id.toString()) {
-        setDatasetId("");
-        setSelectedDatasetName("");
-      }
-      void loadDatasets();
-    } catch (error) {
-      if (handleForbiddenError(error, onForbidden)) return;
-      toast.error(
-        error instanceof Error ? error.message : "Failed to delete dataset",
-      );
-    } finally {
-      setDeletingId(null);
-    }
-  };
-
-  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    setIsDragging(false);
-
-    const file = event.dataTransfer.files?.[0];
-    if (!file || !isAllowedDatasetFile(file.name)) return;
-
-    if (file.size > MAX_DATASET_FILE_BYTES) {
-      toast.error(
-        `File too large. Max ${MAX_DATASET_FILE_BYTES / (1024 * 1024)}MB allowed.`,
-      );
-      return;
-    }
-
-    const dataTransfer = new DataTransfer();
-    dataTransfer.items.add(file);
-    if (!fileInputRef.current) return;
-
-    fileInputRef.current.files = dataTransfer.files;
-    fileInputRef.current.dispatchEvent(new Event("change", { bubbles: true }));
-  };
-
-  const canProceed = Boolean(datasetId) && !isLoadingColumns;
-  const datasetPendingDelete = datasets.find(
-    (dataset) => dataset.dataset_id === confirmDeleteId,
-  );
-
-  return {
-    datasets,
-    isLoading,
-    isLoadingColumns,
-    viewingId,
-    canProceed,
-    datasetName,
-    datasetDescription,
-    uploadedFile,
-    isDragging,
-    isUploading,
-    fileInputRef,
-    viewModalData,
-    confirmDeleteId,
-    deletingId,
-    datasetPendingDelete,
-    setDatasetName,
-    setDatasetDescription,
-    setUploadedFile,
-    setIsDragging,
-    setConfirmDeleteId,
-    setViewModalData,
-    handleFileSelect,
-    resetForm,
-    handleCreateDataset,
-    handleDatasetSelect,
-    handleViewDataset,
-    handleDeleteDataset,
-    handleDrop,
-  };
-}
diff --git a/app/hooks/useAssessmentDownload.ts b/app/hooks/useAssessmentDownload.ts
deleted file mode 100644
index 045e23c6..00000000
--- a/app/hooks/useAssessmentDownload.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-"use client";
-
-import { useCallback, useState } from "react";
-import { getAsyncErrorMessage } from "@/app/lib/assessment/results";
-import type { ExportFormat } from "@/app/lib/types/assessment";
-import type { ToastContextType } from "@/app/lib/types/toast";
-
-interface UseAssessmentDownloadParams {
-  apiKey: string;
-  isAuthenticated: boolean;
-  onForbidden?: () => void;
-  toast: ToastContextType;
-}
-
-export default function useAssessmentDownload({
-  apiKey,
-  isAuthenticated,
-  onForbidden,
-  toast,
-}: UseAssessmentDownloadParams) {
-  const [downloadingId, setDownloadingId] = useState<string | null>(null);
-
-  const buildAuthHeaders = useCallback(() => {
-    const headers = new Headers();
-    if (apiKey) headers.set("X-API-KEY", apiKey);
-    return headers;
-  }, [apiKey]);
-
-  const triggerDownload = useCallback(
-    async (url: string, format: ExportFormat, key: string) => {
-      if (!isAuthenticated) return;
-      setDownloadingId(key);
-      try {
-        const response = await fetch(`${url}?export_format=${format}`, {
-          headers: buildAuthHeaders(),
-          credentials: "include",
-        });
-        if (response.status === 403) {
-          onForbidden?.();
-          return;
-        }
-        if (!response.ok) {
-          const err = await response.json().catch(() => ({}));
-          throw new Error(
-            err.error ||
-              err.message ||
-              err.detail ||
-              `Export failed (${response.status})`,
-          );
-        }
-        const blob = await response.blob();
-        const disposition = response.headers.get("content-disposition") || "";
-        const filenameMatch = disposition.match(/filename="?([^"]+)"?/);
-        const filename = filenameMatch?.[1] || `export.${format}`;
-
-        const a = document.createElement("a");
-        a.href = URL.createObjectURL(blob);
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        a.remove();
-        URL.revokeObjectURL(a.href);
-        toast.success("Download started");
-      } catch (error) {
-        toast.error(getAsyncErrorMessage("Export failed", error));
-      } finally {
-        setDownloadingId(null);
-      }
-    },
-    [buildAuthHeaders, isAuthenticated, onForbidden, toast],
-  );
-
-  const handleAssessmentDownload = useCallback(
-    (assessmentId: number, format: ExportFormat) =>
-      triggerDownload(
-        `/api/assessment/assessments/${assessmentId}/results`,
-        format,
-        `assessment-${assessmentId}`,
-      ),
-    [triggerDownload],
-  );
-
-  const handleRunDownload = useCallback(
-    (runId: number, format: ExportFormat) =>
-      triggerDownload(
-        `/api/assessment/runs/${runId}/results`,
-        format,
-        `run-${runId}`,
-      ),
-    [triggerDownload],
-  );
-
-  return { downloadingId, handleAssessmentDownload, handleRunDownload };
-}
diff --git a/app/hooks/useAssessmentFeatureGuard.ts b/app/hooks/useAssessmentFeatureGuard.ts
new file mode 100644
index 00000000..44cd2078
--- /dev/null
+++ b/app/hooks/useAssessmentFeatureGuard.ts
@@ -0,0 +1,40 @@
+"use client";
+
+/**
+ * A 403 from the assessment API means the feature is off for this org/project:
+ * drop the client flag and leave the page. Data hooks call `guard(error)` in their
+ * catch blocks and skip their own toast when it returns true.
+ */
+import { useCallback, useRef } from "react";
+import { useRouter } from "next/navigation";
+import { useToast } from "@/app/hooks/useToast";
+import { handleForbiddenError } from "@/app/lib/utils/assessment";
+import { removeFeatureFromClient } from "@/app/lib/utils/features";
+import { FeatureFlag } from "@/app/lib/constants";
+
+export interface UseAssessmentFeatureGuardResult {
+  guard: (error: unknown) => boolean;
+}
+
+export function useAssessmentFeatureGuard(): UseAssessmentFeatureGuardResult {
+  const router = useRouter();
+  const toast = useToast();
+  const redirectingRef = useRef(false);
+
+  const onForbidden = useCallback(() => {
+    if (redirectingRef.current) return;
+    redirectingRef.current = true;
+    toast.error(
+      "Assessment feature is disabled for this organization/project.",
+    );
+    removeFeatureFromClient(FeatureFlag.ASSESSMENT);
+    if (typeof window !== "undefined") router.replace("/");
+  }, [router, toast]);
+
+  const guard = useCallback(
+    (error: unknown) => handleForbiddenError(error, onForbidden),
+    [onForbidden],
+  );
+
+  return { guard };
+}
diff --git a/app/hooks/useAssessmentHome.ts b/app/hooks/useAssessmentHome.ts
new file mode 100644
index 00000000..8ee10f67
--- /dev/null
+++ b/app/hooks/useAssessmentHome.ts
@@ -0,0 +1,161 @@
+"use client";
+
+/**
+ * View state for Assessment Home. The version selection is the pivot: it enables
+ * Edit, reveals New run, and filters the runs panel. Loading lives in
+ * useAssessmentHomeData.
+ */
+import { useCallback, useMemo, useState } from "react";
+import { useAssessmentHomeData } from "@/app/hooks/useAssessmentHomeData";
+import {
+  buildHomeRunRows,
+  buildRunFilterOptions,
+  matchesRunFilter,
+  versionFilterValue,
+} from "@/app/lib/assessment/home";
+import { RUNS_PER_PAGE } from "@/app/lib/assessment/constants";
+import { paginate } from "@/app/lib/utils/assessment";
+import {
+  RUN_FILTER_ALL,
+  type AssessorSelection,
+  type RunFilterValue,
+  type UseAssessmentHomeResult,
+} from "@/app/lib/types/assessment";
+
+export function useAssessmentHome(
+  initialSelection: AssessorSelection | null = null,
+): UseAssessmentHomeResult {
+  const source = useAssessmentHomeData();
+  const [selection, setSelection] = useState<AssessorSelection | null>(
+    initialSelection,
+  );
+  const [expandedAssessorIds, setExpandedAssessorIds] = useState<Set<string>>(
+    new Set(),
+  );
+  const [runPage, setRunPage] = useState(1);
+  const [runFilter, setRunFilter] = useState<RunFilterValue>(
+    initialSelection
+      ? versionFilterValue(initialSelection.configId, initialSelection.version)
+      : RUN_FILTER_ALL,
+  );
+
+  const {
+    assessors,
+    knownAssessors,
+    assessments,
+    versionsByAssessor,
+    loadVersions,
+  } = source;
+
+  const applySelection = useCallback((next: AssessorSelection | null) => {
+    setSelection(next);
+    setRunFilter(
+      next ? versionFilterValue(next.configId, next.version) : RUN_FILTER_ALL,
+    );
+    setRunPage(1);
+  }, []);
+
+  // Selecting an assessor means its latest version, which is one fetch away.
+  const selectAssessor = useCallback(
+    (configId: string) => {
+      if (selection?.configId === configId) {
+        applySelection(null);
+        return;
+      }
+      const known = versionsByAssessor[configId];
+      const resolve = known ? Promise.resolve(known) : loadVersions(configId);
+      void resolve.then((versions) => {
+        const latest = versions[0]?.version;
+        if (latest) applySelection({ configId, version: latest });
+      });
+    },
+    [applySelection, loadVersions, selection, versionsByAssessor],
+  );
+
+  // A deleted assessor or version must not stay selected — Edit would 404.
+  const deleteAssessor = useCallback(
+    async (configId: string) => {
+      await source.deleteAssessor(configId);
+      if (selection?.configId === configId) applySelection(null);
+    },
+    [applySelection, selection, source],
+  );
+
+  const deleteAssessorVersion = useCallback(
+    async (configId: string, version: number) => {
+      await source.deleteAssessorVersion(configId, version);
+      if (selection?.configId === configId && selection.version === version) {
+        applySelection(null);
+      }
+    },
+    [applySelection, selection, source],
+  );
+
+  const selectVersion = useCallback(
+    (configId: string, version: number) => {
+      const isSelected =
+        selection?.configId === configId && selection.version === version;
+      applySelection(isSelected ? null : { configId, version });
+    },
+    [applySelection, selection],
+  );
+
+  const toggleAssessorExpanded = useCallback(
+    (configId: string) => {
+      setExpandedAssessorIds((current) => {
+        const next = new Set(current);
+        if (next.has(configId)) next.delete(configId);
+        else next.add(configId);
+        return next;
+      });
+      if (!versionsByAssessor[configId]) loadVersions(configId);
+    },
+    [loadVersions, versionsByAssessor],
+  );
+
+  const changeRunFilter = useCallback((value: RunFilterValue) => {
+    setRunFilter(value);
+    setRunPage(1);
+  }, []);
+
+  // Newest run first; the source list arrives oldest-first from the API.
+  // Named off every assessor seen so far, not just the page on screen.
+  const runSlice = useMemo(() => {
+    const rows = buildHomeRunRows(assessments, knownAssessors)
+      .reverse()
+      .filter((row) => matchesRunFilter(row, runFilter));
+    return paginate(rows, runPage, RUNS_PER_PAGE);
+  }, [assessments, knownAssessors, runFilter, runPage]);
+
+  const runFilterOptions = useMemo(
+    () => buildRunFilterOptions(knownAssessors, assessments),
+    [assessments, knownAssessors],
+  );
+
+  return {
+    isLoading: source.isLoading,
+    error: source.error,
+    refresh: source.refresh,
+    assessors,
+    hasPrevAssessors: source.hasPrevAssessors,
+    hasNextAssessors: source.hasNextAssessors,
+    showPrevAssessors: source.showPrevAssessors,
+    showNextAssessors: source.showNextAssessors,
+    assessorSearch: source.assessorSearch,
+    setAssessorSearch: source.setAssessorSearch,
+    expandedAssessorIds,
+    toggleAssessorExpanded,
+    versionsByAssessor,
+    selection,
+    selectAssessor,
+    selectVersion,
+    deleteAssessor,
+    deleteAssessorVersion,
+    deletingKey: source.deletingKey,
+    runSlice,
+    runFilter,
+    setRunFilter: changeRunFilter,
+    runFilterOptions,
+    gotoRunPage: setRunPage,
+  };
+}
diff --git a/app/hooks/useAssessmentHomeData.ts b/app/hooks/useAssessmentHomeData.ts
new file mode 100644
index 00000000..15a3e051
--- /dev/null
+++ b/app/hooks/useAssessmentHomeData.ts
@@ -0,0 +1,225 @@
+"use client";
+
+/**
+ * Loading side of Assessment Home: assessors, runs, version lists and retry.
+ * The runs list polls on one slow cadence; assessors load on user action.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useToast } from "@/app/hooks/useToast";
+import { useAssessmentData } from "@/app/hooks/useAssessmentData";
+import { useAssessmentFeatureGuard } from "@/app/hooks/useAssessmentFeatureGuard";
+import {
+  ASSESSORS_PER_PAGE,
+  ASSESSOR_SEARCH_DEBOUNCE_MS,
+  RESULTS_POLL_INTERVAL_MS,
+} from "@/app/lib/assessment/constants";
+import { getAsyncErrorMessage } from "@/app/lib/assessment/results";
+import type {
+  AssessmentRun,
+  AssessorSummary,
+  AssessorVersion,
+} from "@/app/lib/types/assessment";
+
+export interface UseAssessmentHomeDataResult {
+  /** The current page of assessors. */
+  assessors: AssessorSummary[];
+  /** Every assessor seen so far, so a run row off the current page keeps its name. */
+  knownAssessors: AssessorSummary[];
+  hasPrevAssessors: boolean;
+  hasNextAssessors: boolean;
+  showPrevAssessors: () => void;
+  showNextAssessors: () => void;
+  assessorSearch: string;
+  setAssessorSearch: (value: string) => void;
+  assessments: AssessmentRun[];
+  versionsByAssessor: Record<string, AssessorVersion[]>;
+  loadVersions: (configId: string) => Promise<AssessorVersion[]>;
+  deleteAssessor: (configId: string) => Promise<void>;
+  deleteAssessorVersion: (configId: string, version: number) => Promise<void>;
+  /** Config id, or `<configId>:v<n>`, while its delete is in flight. */
+  deletingKey: string | null;
+  isLoading: boolean;
+  error: string | null;
+  refresh: () => Promise<void>;
+}
+
+export function useAssessmentHomeData(): UseAssessmentHomeDataResult {
+  const toast = useToast();
+  const data = useAssessmentData();
+  const { guard } = useAssessmentFeatureGuard();
+
+  const [assessors, setAssessors] = useState<AssessorSummary[]>([]);
+  const [assessorIndex, setAssessorIndex] = useState<
+    Record<string, AssessorSummary>
+  >({});
+  const [assessorSkip, setAssessorSkip] = useState(0);
+  const [hasNextAssessors, setHasNextAssessors] = useState(false);
+  const [assessorSearch, setAssessorSearch] = useState("");
+  const [searchTerm, setSearchTerm] = useState("");
+  const [assessments, setAssessments] = useState<AssessmentRun[]>([]);
+  const [versionsByAssessor, setVersionsByAssessor] = useState<
+    Record<string, AssessorVersion[]>
+  >({});
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [deletingKey, setDeletingKey] = useState<string | null>(null);
+  const isMountedRef = useRef(true);
+
+  const loadAssessments = useCallback(async () => {
+    try {
+      const next = await data.listAssessments();
+      if (!isMountedRef.current) return;
+      setAssessments(next);
+      setError(null);
+    } catch (caught) {
+      if (guard(caught)) return;
+      if (isMountedRef.current) {
+        setError(getAsyncErrorMessage("load assessments", caught));
+      }
+    }
+  }, [data, guard]);
+
+  const loadAssessors = useCallback(async () => {
+    try {
+      const page = await data.listAssessors({
+        skip: assessorSkip,
+        limit: ASSESSORS_PER_PAGE,
+        search: searchTerm,
+      });
+      if (!isMountedRef.current) return;
+      setAssessors(page.items);
+      setHasNextAssessors(page.hasMore);
+      setAssessorIndex((current) => ({
+        ...current,
+        ...Object.fromEntries(page.items.map((item) => [item.id, item])),
+      }));
+    } catch (caught) {
+      if (guard(caught)) return;
+      if (isMountedRef.current) {
+        setError(getAsyncErrorMessage("load assessors", caught));
+      }
+    }
+  }, [assessorSkip, data, guard, searchTerm]);
+
+  // Only the runs list rides the interval; assessors change on user action.
+  const refresh = useCallback(async () => {
+    await Promise.all([loadAssessors(), loadAssessments()]);
+    if (isMountedRef.current) setIsLoading(false);
+  }, [loadAssessments, loadAssessors]);
+
+  const loadVersions = useCallback(
+    async (configId: string) => {
+      try {
+        const versions = await data.listAssessorVersions(configId);
+        if (isMountedRef.current) {
+          setVersionsByAssessor((current) => ({
+            ...current,
+            [configId]: versions,
+          }));
+        }
+        return versions;
+      } catch (caught) {
+        toast.error(getAsyncErrorMessage("load versions", caught));
+        return [];
+      }
+    },
+    [data, toast],
+  );
+
+  const deleteAssessor = useCallback(
+    async (configId: string) => {
+      setDeletingKey(configId);
+      try {
+        await data.deleteAssessor(configId);
+        setVersionsByAssessor(({ [configId]: _dropped, ...rest }) => rest);
+        setAssessorIndex(({ [configId]: _gone, ...rest }) => rest);
+        await loadAssessors();
+        toast.success("Assessor deleted");
+      } catch (caught) {
+        toast.error(getAsyncErrorMessage("delete assessor", caught));
+      } finally {
+        if (isMountedRef.current) setDeletingKey(null);
+      }
+    },
+    [data, loadAssessors, toast],
+  );
+
+  const deleteAssessorVersion = useCallback(
+    async (configId: string, version: number) => {
+      setDeletingKey(`${configId}:v${version}`);
+      try {
+        await data.deleteAssessorVersion(configId, version);
+        await loadVersions(configId);
+        toast.success(`Version v${version} deleted`);
+      } catch (caught) {
+        toast.error(getAsyncErrorMessage("delete version", caught));
+      } finally {
+        if (isMountedRef.current) setDeletingKey(null);
+      }
+    },
+    [data, loadVersions, toast],
+  );
+
+  const changeSearch = useCallback((value: string) => {
+    setAssessorSearch(value);
+    setAssessorSkip(0);
+  }, []);
+
+  // The search box hits the API, so let typing settle before asking for a page.
+  useEffect(() => {
+    const timer = setTimeout(
+      () => setSearchTerm(assessorSearch),
+      ASSESSOR_SEARCH_DEBOUNCE_MS,
+    );
+    return () => clearTimeout(timer);
+  }, [assessorSearch]);
+
+  // Owns the assessors fetch: mount, and every page or search change after it.
+  useEffect(() => {
+    void loadAssessors();
+  }, [loadAssessors]);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    void loadAssessments().finally(() => {
+      if (isMountedRef.current) setIsLoading(false);
+    });
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, [loadAssessments]);
+
+  useEffect(() => {
+    const interval = setInterval(
+      () => void loadAssessments(),
+      RESULTS_POLL_INTERVAL_MS,
+    );
+    return () => clearInterval(interval);
+  }, [loadAssessments]);
+
+  return {
+    assessors,
+    knownAssessors: Object.values(assessorIndex),
+    hasPrevAssessors: assessorSkip > 0,
+    hasNextAssessors,
+    showPrevAssessors: useCallback(
+      () => setAssessorSkip((skip) => Math.max(0, skip - ASSESSORS_PER_PAGE)),
+      [],
+    ),
+    showNextAssessors: useCallback(
+      () => setAssessorSkip((skip) => skip + ASSESSORS_PER_PAGE),
+      [],
+    ),
+    assessorSearch,
+    setAssessorSearch: changeSearch,
+    assessments,
+    versionsByAssessor,
+    loadVersions,
+    deleteAssessor,
+    deleteAssessorVersion,
+    deletingKey,
+    isLoading,
+    error,
+    refresh,
+  };
+}
diff --git a/app/hooks/useAssessmentResults.ts b/app/hooks/useAssessmentResults.ts
deleted file mode 100644
index ec7da3da..00000000
--- a/app/hooks/useAssessmentResults.ts
+++ /dev/null
@@ -1,331 +0,0 @@
-"use client";
-
-// Fetches, polls, and manages assessment run list state including filtering and retry.
-import { useCallback, useEffect, useState } from "react";
-import { apiFetch } from "@/app/lib/apiClient";
-import { useAuth } from "@/app/lib/context/AuthContext";
-import { handleForbiddenError } from "@/app/lib/utils/assessment";
-import {
-  filterAssessments,
-  getAsyncErrorMessage,
-  getResultsCounts,
-  normalizeAssessmentRun,
-} from "@/app/lib/assessment/results";
-import { RESULTS_POLL_INTERVAL_MS } from "@/app/lib/assessment/constants";
-import useConfigRunDetails from "@/app/hooks/useConfigRunDetails";
-import useAssessmentDownload from "@/app/hooks/useAssessmentDownload";
-import type {
-  AssessmentChildRun,
-  AssessmentChildRunListResponse,
-  AssessmentListResponse,
-  AssessmentRun,
-  PostProcessingConfig,
-  StatusFilter,
-} from "@/app/lib/types/assessment";
-import type { ToastContextType } from "@/app/lib/types/toast";
-
-interface UseAssessmentResultsParams {
-  onForbidden?: () => void;
-  toast: ToastContextType;
-}
-
-const POST_PROCESSING_NON_DATA_FIELDS = new Set([
-  "assessment_id",
-  "dataset_id",
-  "dataset_name",
-  "run_id",
-  "run_name",
-  "run_status",
-  "config_id",
-  "config_version",
-  "response_id",
-  "input_tokens",
-  "output_tokens",
-  "total_tokens",
-  "updated_at",
-  "result_status",
-  "error",
-  "row_id",
-  "experiment_name",
-]);
-
-export default function useAssessmentResults({
-  onForbidden,
-  toast,
-}: UseAssessmentResultsParams) {
-  const { activeKey, isAuthenticated } = useAuth();
-  const apiKey = activeKey?.key ?? "";
-  const [assessments, setAssessments] = useState<AssessmentRun[]>([]);
-  const [childRunsByAssessment, setChildRunsByAssessment] = useState<
-    Record<number, AssessmentChildRun[]>
-  >({});
-  const [isLoading, setIsLoading] = useState(false);
-  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
-  const [rerunningId, setRerunningId] = useState<number | null>(null);
-  const [resumingId, setResumingId] = useState<number | null>(null);
-  const [retryingAssessmentId, setRetryingAssessmentId] = useState<
-    number | null
-  >(null);
-  const [expandedId, setExpandedId] = useState<number | null>(null);
-
-  const {
-    configDetailsByKey,
-    configLoadingKeys,
-    configErrorKeys,
-    loadConfigDetail,
-  } = useConfigRunDetails({ apiKey, isAuthenticated });
-
-  const { downloadingId, handleAssessmentDownload, handleRunDownload } =
-    useAssessmentDownload({ apiKey, isAuthenticated, onForbidden, toast });
-
-  const loadAssessments = useCallback(async () => {
-    if (!isAuthenticated) return;
-    setIsLoading(true);
-    try {
-      const data = await apiFetch<AssessmentListResponse>(
-        "/api/assessment/assessments",
-        apiKey,
-      );
-      const list = Array.isArray(data) ? data : data.data || [];
-      setAssessments(list.map(normalizeAssessmentRun));
-    } catch (e) {
-      if (handleForbiddenError(e, onForbidden)) return;
-      console.error("Failed to load assessments:", e);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [apiKey, isAuthenticated, onForbidden]);
-
-  const loadChildRuns = useCallback(
-    async (assessmentId: number) => {
-      if (!isAuthenticated) return;
-      try {
-        const data = await apiFetch<AssessmentChildRunListResponse>(
-          `/api/assessment/runs?assessment_id=${assessmentId}`,
-          apiKey,
-        );
-        const list = Array.isArray(data) ? data : data.data || [];
-        setChildRunsByAssessment((prev) => ({ ...prev, [assessmentId]: list }));
-      } catch (e) {
-        if (handleForbiddenError(e, onForbidden)) return;
-        console.error("Failed to load child runs:", e);
-      }
-    },
-    [apiKey, isAuthenticated, onForbidden],
-  );
-
-  useEffect(() => {
-    loadAssessments();
-  }, [loadAssessments]);
-
-  useEffect(() => {
-    if (!isAuthenticated) return;
-    const timer = setInterval(() => {
-      void loadAssessments();
-      if (expandedId !== null) {
-        void loadChildRuns(expandedId);
-      }
-    }, RESULTS_POLL_INTERVAL_MS);
-
-    return () => clearInterval(timer);
-  }, [expandedId, isAuthenticated, loadAssessments, loadChildRuns]);
-
-  useEffect(() => {
-    if (expandedId === null) return;
-    const runs = childRunsByAssessment[expandedId] || [];
-    runs.forEach((run) => {
-      if (run.config_id && run.config_version) {
-        void loadConfigDetail(run.config_id, run.config_version);
-      }
-    });
-  }, [childRunsByAssessment, expandedId, loadConfigDetail]);
-
-  const handleRerun = useCallback(
-    async (run: AssessmentChildRun) => {
-      if (!isAuthenticated) {
-        toast.error("Please sign in to retry this run");
-        return;
-      }
-
-      setRerunningId(run.id);
-      try {
-        await apiFetch(`/api/assessment/runs/${run.id}/retry`, apiKey, {
-          method: "POST",
-        });
-
-        toast.success("Run re-submitted successfully!");
-        void loadAssessments();
-        if (run.assessment_id) {
-          void loadChildRuns(run.assessment_id);
-        }
-      } catch (error) {
-        if (handleForbiddenError(error, onForbidden)) return;
-        toast.error(getAsyncErrorMessage("Re-run failed", error));
-      } finally {
-        setRerunningId(null);
-      }
-    },
-    [
-      apiKey,
-      isAuthenticated,
-      loadAssessments,
-      loadChildRuns,
-      onForbidden,
-      toast,
-    ],
-  );
-
-  const handleResume = useCallback(
-    async (run: AssessmentChildRun) => {
-      if (!isAuthenticated) {
-        toast.error("Please sign in to resume this run");
-        return;
-      }
-
-      setResumingId(run.id);
-      try {
-        await apiFetch(`/api/assessment/runs/${run.id}/resume`, apiKey, {
-          method: "POST",
-        });
-
-        toast.success("Run resumed from failed stage!");
-        void loadAssessments();
-        if (run.assessment_id) {
-          void loadChildRuns(run.assessment_id);
-        }
-      } catch (error) {
-        if (handleForbiddenError(error, onForbidden)) return;
-        toast.error(getAsyncErrorMessage("Resume failed", error));
-      } finally {
-        setResumingId(null);
-      }
-    },
-    [
-      apiKey,
-      isAuthenticated,
-      loadAssessments,
-      loadChildRuns,
-      onForbidden,
-      toast,
-    ],
-  );
-
-  const handleRetryAssessment = useCallback(
-    async (assessmentId: number) => {
-      if (!isAuthenticated) {
-        toast.error("Please sign in to retry this assessment");
-        return;
-      }
-
-      setRetryingAssessmentId(assessmentId);
-      try {
-        await apiFetch(
-          `/api/assessment/assessments/${assessmentId}/retry`,
-          apiKey,
-          {
-            method: "POST",
-          },
-        );
-
-        toast.success("Assessment re-submitted successfully!");
-        void loadAssessments();
-        if (expandedId !== null) {
-          void loadChildRuns(expandedId);
-        }
-      } catch (error) {
-        if (handleForbiddenError(error, onForbidden)) return;
-        toast.error(getAsyncErrorMessage("Retry failed", error));
-      } finally {
-        setRetryingAssessmentId(null);
-      }
-    },
-    [
-      apiKey,
-      expandedId,
-      isAuthenticated,
-      loadAssessments,
-      loadChildRuns,
-      onForbidden,
-      toast,
-    ],
-  );
-
-  const handleExpand = useCallback(
-    (assessmentId: number) => {
-      const next = expandedId === assessmentId ? null : assessmentId;
-      setExpandedId(next);
-      if (next !== null && !childRunsByAssessment[next]) {
-        loadChildRuns(next);
-      }
-    },
-    [childRunsByAssessment, expandedId, loadChildRuns],
-  );
-
-  const handlePreview = useCallback(
-    (runId: number, label: string) => {
-      if (!isAuthenticated) return;
-      const url = `/assessment/results/${runId}?title=${encodeURIComponent(label)}`;
-      window.open(url, "_blank", "noopener,noreferrer");
-    },
-    [isAuthenticated],
-  );
-
-  const handleSavePostProcessing = useCallback(
-    async (runId: number, config: PostProcessingConfig | null) => {
-      await apiFetch(`/api/assessment/runs/${runId}/post-processing`, apiKey, {
-        method: "PATCH",
-        body: JSON.stringify(config),
-      });
-      if (expandedId !== null) void loadChildRuns(expandedId);
-    },
-    [apiKey, expandedId, loadChildRuns],
-  );
-
-  const handleFetchRunColumns = useCallback(
-    async (runId: number): Promise<string[]> => {
-      try {
-        const res = await apiFetch<
-          { data?: Record<string, unknown>[] } | Record<string, unknown>[]
-        >(`/api/assessment/runs/${runId}/results?export_format=json`, apiKey);
-        const rows: Record<string, unknown>[] = Array.isArray(res)
-          ? res
-          : (res.data ?? []);
-        if (rows.length === 0) return [];
-        return Object.keys(rows[0]).filter(
-          (k) => !POST_PROCESSING_NON_DATA_FIELDS.has(k),
-        );
-      } catch {
-        return [];
-      }
-    },
-    [apiKey],
-  );
-
-  return {
-    assessments,
-    counts: getResultsCounts(assessments),
-    filteredRuns: filterAssessments(assessments, statusFilter),
-    childRunsByAssessment,
-    configDetailsByKey,
-    configLoadingKeys,
-    configErrorKeys,
-    isLoading,
-    statusFilter,
-    setStatusFilter,
-    rerunningId,
-    resumingId,
-    retryingAssessmentId,
-    expandedId,
-    downloadingId,
-    loadAssessments,
-    handleExpand,
-    handleRetryAssessment,
-    handleRerun,
-    handleResume,
-    handlePreview,
-    handleAssessmentDownload,
-    handleRunDownload,
-    handleSavePostProcessing,
-    handleFetchRunColumns,
-  };
-}
diff --git a/app/hooks/useAssessmentWizard.ts b/app/hooks/useAssessmentWizard.ts
new file mode 100644
index 00000000..bc4642f4
--- /dev/null
+++ b/app/hooks/useAssessmentWizard.ts
@@ -0,0 +1,176 @@
+"use client";
+
+/**
+ * The 4-step assessment wizard: which flow is running, which step is open, and the
+ * run it ends with. Step 1 owns submission state (useSubmissionStep); this hook only
+ * needs the selected set, which it reads from the assessment store.
+ */
+import { useCallback, useMemo, useState } from "react";
+import { useAssessorVersionContext } from "@/app/hooks/useAssessorVersionContext";
+import { useRunNameDraft } from "@/app/hooks/useRunNameDraft";
+import { useWizardDraft } from "@/app/hooks/useWizardDraft";
+import { useVersionSaveFlow } from "@/app/hooks/useVersionSaveFlow";
+import { useRunSubmit } from "@/app/hooks/useRunSubmit";
+import { useAssessmentDatasetStore } from "@/app/lib/store/assessment";
+import {
+  isWizardStepAllowed,
+  wizardEntryStep,
+  wizardOpenSteps,
+} from "@/app/lib/assessment/wizard";
+import type {
+  AssessmentWizardFlow,
+  AssessorVersionDetail,
+  AssessmentWizardStep,
+  UseAssessmentWizardResult,
+  WizardContext,
+} from "@/app/lib/types/assessment";
+
+interface UseAssessmentWizardParams {
+  onExit: () => void;
+  onRunCreated: (context: WizardContext) => void;
+}
+
+export function useAssessmentWizard({
+  onExit,
+  onRunCreated,
+}: UseAssessmentWizardParams): UseAssessmentWizardResult {
+  const version = useAssessorVersionContext();
+  const draft = useWizardDraft();
+
+  const submissionId = useAssessmentDatasetStore((state) => state.datasetId);
+  const submissionName = useAssessmentDatasetStore(
+    (state) => state.datasetName,
+  );
+  const submissionColumns = useAssessmentDatasetStore((state) => state.columns);
+  const clearDataset = useAssessmentDatasetStore((state) => state.clearDataset);
+
+  const [flow, setFlow] = useState<AssessmentWizardFlow>("new");
+  const [step, setStep] = useState<AssessmentWizardStep>(1);
+  const [completedSteps, setCompletedSteps] = useState<Set<number>>(new Set());
+  const [context, setContext] = useState<WizardContext | null>(null);
+  const { runName, setRunName } = useRunNameDraft(context, step === 4);
+
+  // A saved version becomes the wizard's context, and the flow continues as a run.
+  const onSaved = useCallback(
+    (next: WizardContext, detail: AssessorVersionDetail) => {
+      setContext(next);
+      setFlow("run");
+      setCompletedSteps(new Set([1, 2, 3]));
+      version.adopt(detail);
+    },
+    [version],
+  );
+
+  const saveFlow = useVersionSaveFlow({
+    draft: draft.draft,
+    submissionId,
+    submissionColumns,
+    context,
+    onSaved,
+  });
+
+  const { isSubmitting, submitRun } = useRunSubmit({
+    context,
+    submissionId,
+    runName,
+    onRunCreated,
+  });
+
+  const start = useCallback(
+    (nextFlow: AssessmentWizardFlow, nextContext: WizardContext | null) => {
+      const entry = wizardEntryStep(nextFlow);
+      setFlow(nextFlow);
+      setContext(nextContext);
+      setStep(entry);
+      setCompletedSteps(
+        new Set(wizardOpenSteps(nextFlow).filter((open) => open < entry)),
+      );
+      if (nextContext) {
+        version.load(nextContext, (detail) => {
+          draft.loadFromVersion(detail);
+          saveFlow.rebaseline(detail);
+        });
+      } else {
+        version.reset();
+        draft.reset();
+        clearDataset();
+        saveFlow.rebaseline(null);
+      }
+    },
+    [clearDataset, draft, saveFlow, version],
+  );
+
+  const starters = useMemo(
+    () => ({
+      startNew: () => start("new", null),
+      startEdit: (nextContext: WizardContext) => start("edit", nextContext),
+      startRun: (nextContext: WizardContext) => start("run", nextContext),
+    }),
+    [start],
+  );
+
+  const goToStep = useCallback(
+    (nextStep: number) => {
+      const allowed = isWizardStepAllowed({
+        flow,
+        step: nextStep,
+        currentStep: step,
+        completedSteps,
+      });
+      if (allowed) setStep(nextStep as AssessmentWizardStep);
+    },
+    [completedSteps, flow, step],
+  );
+
+  const next = useCallback(() => {
+    const open = wizardOpenSteps(flow);
+    setCompletedSteps((current) => new Set(current).add(step));
+    const following = open[open.indexOf(step) + 1];
+    if (following) setStep(following);
+  }, [flow, step]);
+
+  const back = useCallback(() => {
+    const open = wizardOpenSteps(flow);
+    const index = open.indexOf(step);
+    if (index <= 0) onExit();
+    else setStep(open[index - 1]);
+  }, [flow, onExit, step]);
+
+  const dismissSaved = useCallback(
+    (next: "run" | "home") => {
+      saveFlow.dismissSaved();
+      if (next === "run") setStep(4);
+      else onExit();
+    },
+    [onExit, saveFlow],
+  );
+
+  return {
+    flow,
+    step,
+    completedSteps,
+    context,
+    versionDetail: version.versionDetail,
+    isLoadingContext: version.isLoading,
+    draft,
+    submissionId,
+    submissionName,
+    runName,
+    setRunName,
+    isSubmitting,
+    isDirty: saveFlow.isDirty,
+    canSave: saveFlow.canSave,
+    isSaving: saveFlow.isSaving,
+    isReviewOpen: saveFlow.isReviewOpen,
+    savedTitle: saveFlow.savedTitle,
+    openReview: saveFlow.openReview,
+    closeReview: saveFlow.closeReview,
+    saveVersion: saveFlow.saveVersion,
+    dismissSaved,
+    ...starters,
+    goToStep,
+    next,
+    back,
+    submitRun,
+  };
+}
diff --git a/app/hooks/useAssessmentWorkflow.ts b/app/hooks/useAssessmentWorkflow.ts
index 10e8ce30..aa3209cb 100644
--- a/app/hooks/useAssessmentWorkflow.ts
+++ b/app/hooks/useAssessmentWorkflow.ts
@@ -1,297 +1,54 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useRouter } from "next/navigation";
-import { useToast } from "@/app/hooks/useToast";
-import { useAuth } from "@/app/lib/context/AuthContext";
-import { apiFetch } from "@/app/lib/apiClient";
-import {
-  getAssessmentSubmitBlocker,
-  getAssessmentSubmitError,
-  handleForbiddenError,
-  schemaToJsonSchema,
-} from "@/app/lib/utils/assessment";
-import { removeFeatureFromClient } from "@/app/lib/utils/features";
-import { FeatureFlag } from "@/app/lib/constants";
-import { PAGE_TABS } from "@/app/lib/assessment/constants";
-import { useAssessmentDatasetStore } from "@/app/lib/store/assessment";
+/**
+ * Composition root for /assessment: which surface is showing (Home or the wizard),
+ * and the version Home should preselect when the wizard hands control back.
+ */
+import { useCallback, useState } from "react";
+import { useAssessmentWizard } from "@/app/hooks/useAssessmentWizard";
 import type {
-  AssessmentFormState,
-  AssessmentTabId,
-  ConfigSelection,
+  AssessmentView,
+  AssessorSelection,
   PageLayoutProps,
-  PrefilterConfig,
-  PostProcessingConfig,
-  SchemaProperty,
+  WizardContext,
 } from "@/app/lib/types/assessment";
 
 export type UseAssessmentWorkflowResult = PageLayoutProps;
 
 export function useAssessmentWorkflow(): UseAssessmentWorkflowResult {
-  const router = useRouter();
-  const { error: showToastError, success: showToastSuccess } = useToast();
-  const { activeKey } = useAuth();
-  const [activeTab, setActiveTab] = useState<AssessmentTabId>("datasets");
-  const [configStep, setConfigStep] = useState(1);
-  const [completedConfigSteps, setCompletedConfigSteps] = useState<Set<number>>(
-    new Set(),
+  const [view, setView] = useState<AssessmentView>("home");
+  const [homeSelection, setHomeSelection] = useState<AssessorSelection | null>(
+    null,
   );
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [experimentName, setExperimentName] = useState("");
-  const featureRedirectingRef = useRef(false);
-  const {
-    datasetId,
-    datasetName,
-    columns,
-    sampleRow,
-    columnMapping,
-    setDatasetId,
-    setDatasetName,
-    setDataset,
-    setColumnMapping,
-    clearDataset,
-  } = useAssessmentDatasetStore();
-  const [promptTemplate, setPromptTemplate] = useState("");
-  const [systemInstruction, setSystemInstruction] = useState("");
-  const [outputSchema, setOutputSchema] = useState<SchemaProperty[]>([]);
-  const [configs, setConfigs] = useState<ConfigSelection[]>([]);
-  const [prefilterConfig, setPrefilterConfig] =
-    useState<PrefilterConfig | null>(null);
-  const [postProcessingConfig, setPostProcessingConfig] =
-    useState<PostProcessingConfig | null>(null);
 
-  const handleForbidden = useCallback(
-    (options?: { notify?: boolean }) => {
-      if (featureRedirectingRef.current) return;
-      featureRedirectingRef.current = true;
+  const onGoHome = useCallback(() => setView("home"), []);
 
-      if (options?.notify) {
-        showToastError(
-          "Assessment feature is disabled for this organization/project.",
-        );
-      }
-
-      removeFeatureFromClient(FeatureFlag.ASSESSMENT);
-      if (
-        typeof window !== "undefined" &&
-        window.location.pathname !== "/evaluations"
-      ) {
-        router.replace("/");
-      }
-    },
-    [router, showToastError],
-  );
-
-  const handleForbiddenWithNotify = useCallback(() => {
-    handleForbidden({ notify: true });
-  }, [handleForbidden]);
-
-  const markConfigCompleted = useCallback((step: number) => {
-    setCompletedConfigSteps((prev) => new Set([...prev, step]));
-  }, []);
-
-  const handleConfigNext = useCallback(
-    (fromStep: number) => {
-      markConfigCompleted(fromStep);
-      setConfigStep(fromStep + 1);
-    },
-    [markConfigCompleted],
-  );
-
-  const handleColumnsLoaded = useCallback(
-    (loadedColumns: string[], firstRow: Record<string, string> = {}) => {
-      const currentId = useAssessmentDatasetStore.getState().datasetId;
-      setDataset(currentId, loadedColumns, firstRow);
-      setPromptTemplate("");
-    },
-    [setDataset],
-  );
-
-  useEffect(() => {
-    setPrefilterConfig(null);
-  }, [datasetId]);
-
-  const outputSchemaJson = useMemo(
-    () => schemaToJsonSchema(outputSchema),
-    [outputSchema],
-  );
-
-  const handleSubmit = useCallback(async () => {
-    const validationError = getAssessmentSubmitError({
-      datasetId,
-      hasMapperSelection:
-        columnMapping.textColumns.length > 0 ||
-        columnMapping.attachments.length > 0,
-      hasResponseFormat: outputSchema.some((field) => field.name.trim()),
-      configCount: configs.length,
-      experimentName,
+  const onRunCreated = useCallback((context: WizardContext) => {
+    setHomeSelection({
+      configId: context.configId,
+      version: context.version,
     });
-    if (validationError) {
-      showToastError(validationError);
-      return;
-    }
-
-    setIsSubmitting(true);
-    try {
-      await apiFetch("/api/assessment/runs", activeKey?.key ?? "", {
-        method: "POST",
-        body: JSON.stringify({
-          experiment_name: experimentName.trim(),
-          dataset_id: parseInt(datasetId, 10),
-          prompt_template: promptTemplate || null,
-          system_instruction: systemInstruction.trim() || null,
-          text_columns: columnMapping.textColumns,
-          attachments: columnMapping.attachments.map(
-            ({ column, type, format, type_column, type_value_map }) => ({
-              column,
-              type,
-              format,
-              ...(type_column ? { type_column, type_value_map } : {}),
-            }),
-          ),
-          output_schema: outputSchemaJson,
-          configs: configs.map(({ config_id, config_version }) => ({
-            config_id,
-            config_version,
-          })),
-          prefilter_config: prefilterConfig ?? null,
-          post_processing_config: postProcessingConfig ?? null,
-        }),
-      });
-
-      showToastSuccess("Assessment submitted!");
-      setConfigStep(1);
-      setCompletedConfigSteps(new Set());
-      setExperimentName("");
-      clearDataset();
-      setSystemInstruction("");
-      setPromptTemplate("");
-      setOutputSchema([]);
-      setConfigs([]);
-      setPrefilterConfig(null);
-      setPostProcessingConfig(null);
-      setActiveTab("results");
-    } catch (error) {
-      if (handleForbiddenError(error, handleForbiddenWithNotify)) return;
-      showToastError(
-        `Failed to submit: ${error instanceof Error ? error.message : "Unknown error"}`,
-      );
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [
-    clearDataset,
-    columnMapping,
-    configs,
-    datasetId,
-    experimentName,
-    handleForbiddenWithNotify,
-    prefilterConfig,
-    outputSchema,
-    outputSchemaJson,
-    postProcessingConfig,
-    promptTemplate,
-    activeKey,
-    systemInstruction,
-    showToastError,
-    showToastSuccess,
-  ]);
+    setView("home");
+  }, []);
 
-  const formState: AssessmentFormState = {
-    experimentName,
-    datasetId,
-    datasetName,
-    columns,
-    sampleRow,
-    columnMapping,
-    systemInstruction,
-    promptTemplate,
-    outputSchema,
-    configs,
-    prefilterConfig,
-    postProcessingConfig,
-  };
+  const wizard = useAssessmentWizard({ onExit: onGoHome, onRunCreated });
 
-  const hasDataset = !!datasetId && columns.length > 0;
-  const hasMapperSelection =
-    columnMapping.textColumns.length > 0 ||
-    columnMapping.attachments.length > 0;
-  const hasConfiguredResponseFormat = outputSchema.some((field) =>
-    field.name.trim(),
-  );
-  const canReachReview = configs.length > 0 && hasConfiguredResponseFormat;
-  const canSubmitAssessment =
-    !!datasetId &&
-    hasMapperSelection &&
-    hasConfiguredResponseFormat &&
-    configs.length > 0 &&
-    experimentName.trim().length > 0 &&
-    !isSubmitting;
-  const submitBlockerMessage = getAssessmentSubmitBlocker({
-    datasetId,
-    hasMapperSelection,
-    hasResponseFormat: hasConfiguredResponseFormat,
-    configCount: configs.length,
-    experimentName,
-  });
-  const effectiveCompletedConfigSteps = useMemo(() => {
-    const merged = new Set(completedConfigSteps);
-    if (hasMapperSelection) merged.add(1);
-    if (hasMapperSelection) merged.add(2); // Prefilter is optional and always passable
-    if (canReachReview) merged.add(3);
-    if (canReachReview) merged.add(4); // Post Processing is optional and always passable
-    return merged;
-  }, [canReachReview, completedConfigSteps, hasMapperSelection]);
+  const openWizard = useCallback((start: () => void) => {
+    start();
+    setView("wizard");
+  }, []);
 
   return {
-    activeTab,
-    tabs: [...PAGE_TABS],
-    onTabSwitch: setActiveTab,
-    datasetsTabProps: {
-      onForbidden: handleForbiddenWithNotify,
-      datasetId,
-      setDatasetId,
-      setSelectedDatasetName: setDatasetName,
-      onColumnsLoaded: handleColumnsLoaded,
-      onNext: () => {
-        setActiveTab("config");
-        setConfigStep(1);
-      },
-    },
-    configPanelProps: {
-      canSubmitAssessment,
-      columns,
-      columnMapping,
-      completedSteps: effectiveCompletedConfigSteps,
-      configStep,
-      configs,
-      datasetId,
-      experimentName,
-      formState,
-      hasDataset,
-      isSubmitting,
-      prefilterConfig,
-      outputSchema,
-      systemInstruction,
-      promptTemplate,
-      sampleRow,
-      setActiveTabToDatasets: () => setActiveTab("datasets"),
-      setColumnMapping,
-      setConfigStep,
-      setConfigs,
-      setExperimentName,
-      setPrefilterConfig,
-      setOutputSchema,
-      setSystemInstruction,
-      setPromptTemplate,
-      postProcessingConfig,
-      setPostProcessingConfig,
-      submitBlockerMessage,
-      onSubmit: handleSubmit,
-      onStepComplete: handleConfigNext,
-    },
-    evaluationsTabProps: {
-      onForbidden: handleForbiddenWithNotify,
+    view,
+    homeSelection,
+    onGoHome,
+    wizard: {
+      ...wizard,
+      startNew: () => openWizard(wizard.startNew),
+      startEdit: (context: WizardContext) =>
+        openWizard(() => wizard.startEdit(context)),
+      startRun: (context: WizardContext) =>
+        openWizard(() => wizard.startRun(context)),
     },
   };
 }
diff --git a/app/hooks/useAssessorSave.ts b/app/hooks/useAssessorSave.ts
new file mode 100644
index 00000000..235835de
--- /dev/null
+++ b/app/hooks/useAssessorSave.ts
@@ -0,0 +1,67 @@
+"use client";
+
+/**
+ * Saving an assessor version: bump `vN+1` (or create `v1`), then re-baseline so
+ * the wizard stops reporting a diff. After a save the flow continues in run
+ * context, which is why the caller gets the new version back.
+ */
+import { useCallback, useState } from "react";
+import { useToast } from "@/app/hooks/useToast";
+import { useAssessmentData } from "@/app/hooks/useAssessmentData";
+import {
+  draftToVersionInput,
+  versionDetailFrom,
+} from "@/app/lib/assessment/draft";
+import { getAsyncErrorMessage } from "@/app/lib/assessment/results";
+import type {
+  AssessorVersionDetail,
+  SaveAssessorVersionResult,
+  WizardDraft,
+} from "@/app/lib/types/assessment";
+
+export interface SaveAssessorParams {
+  draft: WizardDraft;
+  submissionId: string;
+  submissionColumns: string[];
+  configId: string | null;
+  name: string;
+  commitMessage: string;
+}
+
+export interface UseAssessorSaveResult {
+  isSaving: boolean;
+  save: (
+    params: SaveAssessorParams,
+  ) => Promise<
+    (SaveAssessorVersionResult & { detail: AssessorVersionDetail }) | null
+  >;
+}
+
+export function useAssessorSave(): UseAssessorSaveResult {
+  const toast = useToast();
+  const data = useAssessmentData();
+  const [isSaving, setIsSaving] = useState(false);
+
+  const save = useCallback(
+    async (params: SaveAssessorParams) => {
+      setIsSaving(true);
+      try {
+        const input = draftToVersionInput(params);
+        const saved = await data.saveAssessorVersion(input);
+        toast.success(`Assessor "${params.name}" saved as v${saved.version}`);
+        return {
+          ...saved,
+          detail: versionDetailFrom(input, saved.config_id, saved.version),
+        };
+      } catch (caught) {
+        toast.error(getAsyncErrorMessage("save assessor", caught));
+        return null;
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [data, toast],
+  );
+
+  return { isSaving, save };
+}
diff --git a/app/hooks/useAssessorVersionContext.ts b/app/hooks/useAssessorVersionContext.ts
new file mode 100644
index 00000000..207726cc
--- /dev/null
+++ b/app/hooks/useAssessorVersionContext.ts
@@ -0,0 +1,111 @@
+"use client";
+
+/**
+ * Loads the assessor version an `edit` / `run` flow is anchored to, plus the
+ * submission set it links to — the `edit` flow opens on step 2, so the prompt
+ * zones need that set's columns and sample row before step 1 is ever visited.
+ */
+import { useCallback, useState } from "react";
+import { useToast } from "@/app/hooks/useToast";
+import { useAssessmentData } from "@/app/hooks/useAssessmentData";
+import { useAssessmentDatasetStore } from "@/app/lib/store/assessment";
+import { nonBlankColumns, toDatasetPreview } from "@/app/lib/utils/assessment";
+import { getAsyncErrorMessage } from "@/app/lib/assessment/results";
+import type {
+  AssessmentDataSource,
+  AssessorVersionDetail,
+  WizardContext,
+} from "@/app/lib/types/assessment";
+
+export interface UseAssessorVersionContextResult {
+  versionDetail: AssessorVersionDetail | null;
+  isLoading: boolean;
+  load: (
+    context: WizardContext,
+    onLoaded: (detail: AssessorVersionDetail) => void,
+  ) => void;
+  /** Adopt a version we just wrote, without a refetch. */
+  adopt: (detail: AssessorVersionDetail) => void;
+  reset: () => void;
+}
+
+export function useAssessorVersionContext(): UseAssessorVersionContextResult {
+  const toast = useToast();
+  const data = useAssessmentData();
+  const setDataset = useAssessmentDatasetStore((state) => state.setDataset);
+  const [versionDetail, setVersionDetail] =
+    useState<AssessorVersionDetail | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const load = useCallback(
+    (
+      context: WizardContext,
+      onLoaded: (detail: AssessorVersionDetail) => void,
+    ) => {
+      setIsLoading(true);
+      setVersionDetail(null);
+      data
+        .getAssessorVersion(context.configId, context.version)
+        .then(async (detail) => {
+          setVersionDetail(detail);
+          onLoaded(detail);
+          await selectLinkedSubmission(data, detail, setDataset);
+        })
+        .catch((caught) =>
+          toast.error(getAsyncErrorMessage("load assessor version", caught)),
+        )
+        .finally(() => setIsLoading(false));
+    },
+    [data, setDataset, toast],
+  );
+
+  const adopt = useCallback((detail: AssessorVersionDetail) => {
+    setVersionDetail(detail);
+  }, []);
+
+  const reset = useCallback(() => setVersionDetail(null), []);
+
+  return { versionDetail, isLoading, load, adopt, reset };
+}
+
+type SetDataset = ReturnType<
+  typeof useAssessmentDatasetStore.getState
+>["setDataset"];
+
+const LINKED_RUN_LOOKUP_LIMIT = 5;
+
+/**
+ * The config blob stores no submission, so a reopened version takes the one its
+ * most recent run used. A version never run leaves step 1 for the user to fill.
+ */
+async function linkedSubmissionId(
+  data: AssessmentDataSource,
+  detail: AssessorVersionDetail,
+): Promise<string | null> {
+  if (detail.submission_id) return String(detail.submission_id);
+
+  const runs = await data.listAssessments({
+    config_id: detail.config_id,
+    version: detail.version,
+    limit: LINKED_RUN_LOOKUP_LIMIT,
+  });
+  return runs.find((run) => run.submission_id)?.submission_id ?? null;
+}
+
+async function selectLinkedSubmission(
+  data: AssessmentDataSource,
+  detail: AssessorVersionDetail,
+  setDataset: SetDataset,
+): Promise<void> {
+  const id = await linkedSubmissionId(data, detail);
+  if (!id) return;
+
+  const [submissions, preview] = await Promise.all([
+    data.listSubmissions(),
+    data.getSubmissionPreview(id).then(toDatasetPreview),
+  ]);
+
+  const name = submissions.find((item) => item.submission_id === id)?.name;
+  const { headers, sampleRow } = nonBlankColumns(preview);
+  setDataset(id, headers, sampleRow, name);
+}
diff --git a/app/hooks/useLatestConfigModels.ts b/app/hooks/useLatestConfigModels.ts
deleted file mode 100644
index 48b61fc7..00000000
--- a/app/hooks/useLatestConfigModels.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import {
-  fetchConfigSelection,
-  fetchConfigVersionsPage,
-} from "@/app/lib/utils/assessmentFetcher";
-import type { ConfigPublic } from "@/app/lib/types/configs";
-import type { LatestConfigModel } from "@/app/lib/types/assessment";
-
-/**
- * Resolves the provider/model of each config's latest version, lazily and once
- * per config. Entries are `null` while loading or when unavailable so the UI
- * can hide the model badge without a separate loading flag.
- */
-export default function useLatestConfigModels(
-  configCards: ConfigPublic[],
-  apiKey: string,
-  isAuthenticated: boolean,
-): Record<string, LatestConfigModel> {
-  const [latestModelByConfig, setLatestModelByConfig] = useState<
-    Record<string, LatestConfigModel>
-  >({});
-
-  useEffect(() => {
-    if (!isAuthenticated || configCards.length === 0) return;
-    configCards.forEach((card) => {
-      if (latestModelByConfig[card.id] !== undefined) return;
-      setLatestModelByConfig((prev) =>
-        prev[card.id] !== undefined ? prev : { ...prev, [card.id]: null },
-      );
-      void (async () => {
-        try {
-          const versions = await fetchConfigVersionsPage(apiKey, card.id, {
-            skip: 0,
-            limit: 1,
-          });
-          const latest = versions.items[0];
-          if (!latest) return;
-          const selection = await fetchConfigSelection(
-            apiKey,
-            { id: card.id, name: card.name },
-            latest.version,
-          );
-          setLatestModelByConfig((prev) => ({
-            ...prev,
-            [card.id]: {
-              provider: selection.provider,
-              model: selection.model,
-            },
-          }));
-        } catch {
-          // leave entry as null; UI hides model when unavailable
-        }
-      })();
-    });
-  }, [apiKey, configCards, isAuthenticated, latestModelByConfig]);
-
-  return latestModelByConfig;
-}
diff --git a/app/hooks/usePromptAndConfigStep.ts b/app/hooks/usePromptAndConfigStep.ts
deleted file mode 100644
index a65f931d..00000000
--- a/app/hooks/usePromptAndConfigStep.ts
+++ /dev/null
@@ -1,414 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useAuth } from "@/app/lib/context/AuthContext";
-import { useToast } from "@/app/hooks/useToast";
-import { DEFAULT_PAGE_LIMIT } from "@/app/lib/constants";
-import {
-  ASSESSMENT_CONFIG_VERSION_PAGE_SIZE,
-  MAX_CONFIGS,
-} from "@/app/lib/assessment/constants";
-import {
-  buildDefaultParams,
-  buildInitialAssessmentConfigDraft,
-  buildInitialAssessmentVersionState,
-  fetchConfigPage,
-  fetchConfigSelection,
-  fetchConfigVersionsPage,
-  getDefaultModelForProvider,
-  getModelConfigDefinition,
-  getModelsByProvider,
-  saveAssessmentConfig,
-} from "@/app/lib/utils/assessmentFetcher";
-import {
-  type ConfigMode,
-  type ConfigSelection,
-  type PromptAndConfigStepProps,
-  type UsePromptAndConfigStepResult,
-  type VersionListState,
-} from "@/app/lib/types/assessment";
-import type {
-  CompletionConfig,
-  ConfigBlob,
-  ConfigPublic,
-} from "@/app/lib/types/configs";
-import useLatestConfigModels from "@/app/hooks/useLatestConfigModels";
-
-type UsePromptAndConfigStepParams = Pick<
-  PromptAndConfigStepProps,
-  "textColumns" | "promptTemplate" | "configs" | "setConfigs" | "outputSchema"
->;
-
-export function usePromptAndConfigStep({
-  textColumns,
-  promptTemplate,
-  configs,
-  setConfigs,
-  outputSchema,
-}: UsePromptAndConfigStepParams): UsePromptAndConfigStepResult {
-  const toast = useToast();
-  const { activeKey, isAuthenticated } = useAuth();
-  const apiKey = activeKey?.key ?? "";
-
-  const [configMode, setConfigMode] = useState<ConfigMode>("existing");
-  const [configCards, setConfigCards] = useState<ConfigPublic[]>([]);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [isLoadingConfigs, setIsLoadingConfigs] = useState(true);
-  const [hasMoreConfigs, setHasMoreConfigs] = useState(true);
-  const [nextConfigSkip, setNextConfigSkip] = useState(0);
-  const [expandedConfigId, setExpandedConfigId] = useState<string | null>(null);
-  const [versionStateByConfig, setVersionStateByConfig] = useState<
-    Record<string, VersionListState>
-  >({});
-  const [loadingSelectionKeys, setLoadingSelectionKeys] = useState<
-    Record<string, boolean>
-  >({});
-  const hasLoadedInitialConfigsRef = useRef(false);
-
-  const [draft, setDraft] = useState<ConfigBlob>(() =>
-    buildInitialAssessmentConfigDraft(),
-  );
-  const [configName, setConfigName] = useState("");
-  const [commitMessage, setCommitMessage] = useState("");
-  const [isSaving, setIsSaving] = useState(false);
-
-  const draftParams = draft.completion.params as Record<
-    string,
-    string | number | undefined
-  >;
-  const currentProvider = draft.completion.provider ?? "openai";
-  const providerModels = useMemo(
-    () => getModelsByProvider(currentProvider),
-    [currentProvider],
-  );
-  const currentModel = String(draftParams.model || providerModels[0]?.value);
-  const currentParamDefs = useMemo(
-    () => getModelConfigDefinition(currentModel),
-    [currentModel],
-  );
-
-  const usedColumns = useMemo(
-    () => textColumns.filter((col) => promptTemplate.includes(`{${col}}`)),
-    [promptTemplate, textColumns],
-  );
-  const namedSchemaFields = outputSchema.filter((field) => field.name.trim());
-  const hasConfiguredResponseFormat = namedSchemaFields.length > 0;
-  const canProceed = configs.length > 0 && hasConfiguredResponseFormat;
-  const nextBlockerMessage =
-    configs.length === 0
-      ? "Select at least one configuration to continue"
-      : !hasConfiguredResponseFormat
-        ? "Set response format to continue"
-        : "";
-  const responseSummary =
-    namedSchemaFields.length > 0
-      ? `${namedSchemaFields.length} fields`
-      : "Not set";
-  const promptStatus = promptTemplate.trim()
-    ? `${usedColumns.length} placeholders`
-    : "Empty";
-
-  const isSelected = useCallback(
-    (configId: string, version: number) =>
-      configs.some(
-        (config) =>
-          config.config_id === configId && config.config_version === version,
-      ),
-    [configs],
-  );
-
-  const addSelection = useCallback(
-    (selection: ConfigSelection) => {
-      if (
-        configs.some(
-          (config) =>
-            config.config_id === selection.config_id &&
-            config.config_version === selection.config_version,
-        )
-      ) {
-        toast.error("This configuration version is already selected");
-        return;
-      }
-      if (configs.length >= MAX_CONFIGS) {
-        toast.error(`You can select up to ${MAX_CONFIGS} configurations`);
-        return;
-      }
-      setConfigs((prev) => [...prev, selection]);
-    },
-    [configs, setConfigs, toast],
-  );
-
-  const removeSelection = useCallback(
-    (configId: string, version: number) => {
-      setConfigs((prev) =>
-        prev.filter(
-          (config) =>
-            !(
-              config.config_id === configId && config.config_version === version
-            ),
-        ),
-      );
-    },
-    [setConfigs],
-  );
-
-  const toggleVersionSelection = useCallback(
-    async (config: ConfigPublic, version: number) => {
-      if (!isAuthenticated) return;
-      const key = `${config.id}:${version}`;
-      if (isSelected(config.id, version)) {
-        removeSelection(config.id, version);
-        return;
-      }
-      setLoadingSelectionKeys((prev) => ({ ...prev, [key]: true }));
-      try {
-        const selection = await fetchConfigSelection(apiKey, config, version);
-        addSelection(selection);
-      } catch {
-        toast.error("Failed to load configuration details");
-      } finally {
-        setLoadingSelectionKeys((prev) => ({ ...prev, [key]: false }));
-      }
-    },
-    [addSelection, apiKey, isAuthenticated, isSelected, removeSelection, toast],
-  );
-
-  const loadConfigs = useCallback(
-    async (skip: number, replace: boolean) => {
-      if (!isAuthenticated) {
-        if (replace) setIsLoadingConfigs(false);
-        return;
-      }
-      if (replace) setIsLoadingConfigs(true);
-      try {
-        const result = await fetchConfigPage({
-          apiKey,
-          skip,
-          limit: DEFAULT_PAGE_LIMIT,
-        });
-        setConfigCards((prev) =>
-          replace ? result.items : [...prev, ...result.items],
-        );
-        setHasMoreConfigs(result.hasMore);
-        setNextConfigSkip(result.nextSkip);
-      } catch {
-        toast.error("Failed to load configurations");
-      } finally {
-        setIsLoadingConfigs(false);
-      }
-    },
-    [apiKey, isAuthenticated, toast],
-  );
-
-  useEffect(() => {
-    if (!isAuthenticated) return;
-    if (!hasLoadedInitialConfigsRef.current) {
-      hasLoadedInitialConfigsRef.current = true;
-      void loadConfigs(0, true);
-    }
-  }, [isAuthenticated, loadConfigs]);
-
-  const latestModelByConfig = useLatestConfigModels(
-    configCards,
-    apiKey,
-    isAuthenticated,
-  );
-
-  const filteredConfigCards = useMemo(() => {
-    const query = searchQuery.trim().toLowerCase();
-    if (!query) return configCards;
-    return configCards.filter((config) =>
-      `${config.name} ${config.description || ""}`
-        .toLowerCase()
-        .includes(query),
-    );
-  }, [configCards, searchQuery]);
-
-  const loadVersions = useCallback(
-    async (configId: string, skip: number) => {
-      if (!isAuthenticated) return;
-      setVersionStateByConfig((prev) => ({
-        ...prev,
-        [configId]: {
-          ...(prev[configId] ?? buildInitialAssessmentVersionState()),
-          isLoading: true,
-          error: null,
-        },
-      }));
-      try {
-        const result = await fetchConfigVersionsPage(apiKey, configId, {
-          skip,
-          limit: ASSESSMENT_CONFIG_VERSION_PAGE_SIZE,
-        });
-        setVersionStateByConfig((prev) => {
-          const existing =
-            prev[configId] ?? buildInitialAssessmentVersionState();
-          return {
-            ...prev,
-            [configId]: {
-              items:
-                skip === 0
-                  ? result.items
-                  : [...existing.items, ...result.items],
-              isLoading: false,
-              error: null,
-              hasMore: result.hasMore,
-              nextSkip: result.nextSkip,
-            },
-          };
-        });
-      } catch {
-        setVersionStateByConfig((prev) => ({
-          ...prev,
-          [configId]: {
-            ...(prev[configId] ?? buildInitialAssessmentVersionState()),
-            isLoading: false,
-            error: "Failed to load versions",
-          },
-        }));
-      }
-    },
-    [apiKey, isAuthenticated],
-  );
-
-  const toggleConfigExpansion = useCallback(
-    (configId: string) => {
-      if (expandedConfigId === configId) {
-        setExpandedConfigId(null);
-        return;
-      }
-      setExpandedConfigId(configId);
-      if (!versionStateByConfig[configId]) {
-        void loadVersions(configId, 0);
-      }
-    },
-    [expandedConfigId, loadVersions, versionStateByConfig],
-  );
-
-  const updateDraftParam = (key: string, value: string | number) => {
-    setDraft((prev) => ({
-      ...prev,
-      completion: {
-        ...prev.completion,
-        params: { ...prev.completion.params, [key]: value },
-      },
-    }));
-  };
-
-  const handleProviderChange = (provider: CompletionConfig["provider"]) => {
-    const defaultModel = getDefaultModelForProvider(provider);
-    setDraft((prev) => ({
-      ...prev,
-      completion: {
-        ...prev.completion,
-        provider,
-        params: {
-          instructions: String(prev.completion.params.instructions || ""),
-          model: defaultModel,
-          ...buildDefaultParams(defaultModel),
-        },
-      },
-    }));
-  };
-
-  const handleModelChange = (modelName: string) => {
-    setDraft((prev) => ({
-      ...prev,
-      completion: {
-        ...prev.completion,
-        params: {
-          instructions: String(prev.completion.params.instructions || ""),
-          model: modelName,
-          ...buildDefaultParams(modelName),
-        },
-      },
-    }));
-  };
-
-  const handleCreateAndAdd = async () => {
-    if (!isAuthenticated) {
-      toast.error("Please sign in to create configurations");
-      return;
-    }
-    if (!configName.trim()) {
-      toast.error("Configuration name is required");
-      return;
-    }
-    setIsSaving(true);
-    try {
-      const existingConfig =
-        configCards.find(
-          (c) =>
-            c.name.trim().toLowerCase() === configName.trim().toLowerCase(),
-        ) ?? null;
-      const saved = await saveAssessmentConfig({
-        apiKey,
-        configName: configName.trim(),
-        commitMessage: commitMessage.trim(),
-        configBlob: draft,
-        existingConfig: existingConfig
-          ? { id: existingConfig.id, name: existingConfig.name }
-          : null,
-      });
-      addSelection({
-        config_id: saved.config_id,
-        config_version: saved.config_version,
-        name: configName.trim(),
-        provider: draft.completion.provider,
-        model: currentModel,
-      });
-      setDraft(buildInitialAssessmentConfigDraft());
-      setConfigName("");
-      setCommitMessage("");
-      setConfigMode("existing");
-      toast.success("Configuration saved and added!");
-      void loadConfigs(0, true);
-    } catch (err) {
-      toast.error(
-        err instanceof Error ? err.message : "Failed to save configuration",
-      );
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  return {
-    promptStatus,
-    responseSummary,
-    hasConfiguredResponseFormat,
-    canProceed,
-    nextBlockerMessage,
-    configMode,
-    setConfigMode,
-    removeSelection,
-    filteredConfigCards,
-    searchQuery,
-    setSearchQuery,
-    isLoadingConfigs,
-    hasMoreConfigs,
-    nextConfigSkip,
-    expandedConfigId,
-    versionStateByConfig,
-    latestModelByConfig,
-    loadingSelectionKeys,
-    isSelected,
-    loadConfigs,
-    loadVersions,
-    toggleConfigExpansion,
-    toggleVersionSelection,
-    currentProvider,
-    currentModel,
-    providerModels,
-    currentParamDefs,
-    draftParams,
-    configName,
-    commitMessage,
-    isSaving,
-    setConfigName,
-    setCommitMessage,
-    handleProviderChange,
-    handleModelChange,
-    updateDraftParam,
-    handleCreateAndAdd,
-  };
-}
diff --git a/app/hooks/usePromptMentions.ts b/app/hooks/usePromptMentions.ts
new file mode 100644
index 00000000..b01f1273
--- /dev/null
+++ b/app/hooks/usePromptMentions.ts
@@ -0,0 +1,310 @@
+"use client";
+
+/**
+ * Three-stage `@`-mentions for the prompt zones. Stage 1 suggests submission
+ * columns (with a "create field" escape hatch); picking one asks its type — Text /
+ * Image / PDF — and then whether a row may leave it blank, because those two
+ * choices define the input schema. Stage 1 reuses useAtMention for trigger
+ * detection, caret placement and insertion; stages 2–3 are this hook's own small
+ * state machine, which a token's marker can also open directly at stage 3.
+ */
+import { useCallback, useMemo, useRef, useState } from "react";
+import { useAtMention } from "@/app/lib/hooks/useAtMention";
+import {
+  PROMPT_FIELD_TYPE_LABELS,
+  canonicalToken,
+  fieldTypeOf,
+} from "@/app/lib/assessment/promptTokens";
+import type {
+  MentionColumnOption,
+  MentionStage,
+  MentionStrictOption,
+  MentionTypeOption,
+  PromptFieldType,
+  UsePromptMentionsParams,
+  UsePromptMentionsResult,
+} from "@/app/lib/types/assessment";
+
+const TYPE_ORDER: PromptFieldType[] = ["text", "image", "pdf"];
+
+/** Grace for the pointer to travel from a token's marker into its dropdown. */
+const HOVER_CLOSE_DELAY_MS = 200;
+
+// Optional first: it is the backend default, so it is what a plain `@Column` means.
+const STRICT_CHOICES: Omit<MentionStrictOption, "isCurrent">[] = [
+  { strict: false, label: "Optional", hint: "rows may leave it blank" },
+  { strict: true, label: "Required", hint: "a blank row fails the run" },
+];
+
+function strictIndexOf(
+  fieldStrict: Record<string, boolean>,
+  name: string,
+): number {
+  return STRICT_CHOICES.findIndex(
+    (choice) => choice.strict === (fieldStrict[name] ?? false),
+  );
+}
+
+/** Timer for hover-opened boxes: closes once the pointer has left marker and box. */
+function useHoverClose() {
+  const openedByHover = useRef(false);
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const cancelHoverClose = useCallback(() => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = null;
+  }, []);
+
+  const armHover = useCallback(
+    (via: "hover" | "click") => {
+      cancelHoverClose();
+      openedByHover.current = via === "hover";
+    },
+    [cancelHoverClose],
+  );
+
+  const resetHover = useCallback(() => {
+    cancelHoverClose();
+    openedByHover.current = false;
+  }, [cancelHoverClose]);
+
+  const scheduleHover = useCallback(
+    (close: () => void) => {
+      if (!openedByHover.current) return;
+      cancelHoverClose();
+      timer.current = setTimeout(close, HOVER_CLOSE_DELAY_MS);
+    },
+    [cancelHoverClose],
+  );
+
+  return { armHover, resetHover, cancelHoverClose, scheduleHover };
+}
+
+export function usePromptMentions({
+  columns,
+  fieldTypes,
+  fieldStrict,
+  value,
+  onChange,
+  onFieldType,
+  onFieldStrict,
+}: UsePromptMentionsParams): UsePromptMentionsResult {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const mirrorRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [pendingField, setPendingField] = useState<string | null>(null);
+  const [stage, setStage] = useState<MentionStage | null>(null);
+  const [optionIndex, setOptionIndex] = useState(0);
+  // Inserting closes stage 1, which clears its caret position — keep it for stages 2–3.
+  const [stagePosition, setStagePosition] = useState<{
+    top: number;
+    left: number;
+  } | null>(null);
+  const { armHover, resetHover, cancelHoverClose, scheduleHover } =
+    useHoverClose();
+
+  const mention = useAtMention({
+    columns,
+    inputRef: inputRef as React.RefObject<HTMLTextAreaElement>,
+    mirrorRef: mirrorRef as React.RefObject<HTMLDivElement>,
+    dropdownRef: dropdownRef as React.RefObject<HTMLDivElement>,
+    insertFormat: (column) =>
+      canonicalToken(column, fieldTypeOf(fieldTypes, column)),
+  });
+
+  const columnOptions = useMemo<MentionColumnOption[]>(() => {
+    const query = mention.state.query;
+    if (query === null) return [];
+    const options: MentionColumnOption[] = mention.options.map((name) => ({
+      name,
+      isCreate: false,
+      type: fieldTypeOf(fieldTypes, name),
+    }));
+    const exact = columns.some(
+      (column) => column.toLowerCase() === query.toLowerCase(),
+    );
+    if (query && !exact) {
+      options.push({ name: query, isCreate: true, type: "text" });
+    }
+    return options;
+  }, [columns, fieldTypes, mention.options, mention.state.query]);
+
+  const typeOptions = useMemo<MentionTypeOption[]>(() => {
+    if (!pendingField) return [];
+    const current = fieldTypeOf(fieldTypes, pendingField);
+    return TYPE_ORDER.map((type) => ({
+      type,
+      label: PROMPT_FIELD_TYPE_LABELS[type],
+      isCurrent: type === current,
+    }));
+  }, [fieldTypes, pendingField]);
+
+  const strictOptions = useMemo<MentionStrictOption[]>(() => {
+    if (!pendingField) return [];
+    const current = fieldStrict[pendingField] ?? false;
+    return STRICT_CHOICES.map((choice) => ({
+      ...choice,
+      isCurrent: choice.strict === current,
+    }));
+  }, [fieldStrict, pendingField]);
+
+  const closeStages = useCallback(() => {
+    resetHover();
+    setPendingField(null);
+    setStage(null);
+    setStagePosition(null);
+  }, [resetHover]);
+
+  const closeAll = useCallback(() => {
+    closeStages();
+    mention.close();
+  }, [closeStages, mention]);
+
+  /** Stage 1 → insert the token, then ask for its type. */
+  const pickColumn = useCallback(
+    (option: MentionColumnOption) => {
+      setStagePosition(mention.state.pos);
+      mention.insert(option.name, value, onChange);
+      setPendingField(option.name);
+      setStage("type");
+      setOptionIndex(
+        Math.max(0, TYPE_ORDER.indexOf(fieldTypeOf(fieldTypes, option.name))),
+      );
+    },
+    [fieldTypes, mention, onChange, value],
+  );
+
+  /** Stage 2 → record the type, then ask whether a row may leave it blank. */
+  const pickType = useCallback(
+    (type: PromptFieldType) => {
+      if (!pendingField) return;
+      onFieldType(pendingField, type);
+      setStage("strict");
+      setOptionIndex(strictIndexOf(fieldStrict, pendingField));
+    },
+    [fieldStrict, onFieldType, pendingField],
+  );
+
+  /** Stage 3 → record strictness and hand focus back to the textarea. */
+  const pickStrict = useCallback(
+    (strict: boolean) => {
+      if (pendingField) onFieldStrict(pendingField, strict);
+      closeStages();
+      inputRef.current?.focus();
+    },
+    [closeStages, onFieldStrict, pendingField],
+  );
+
+  /** From a token's marker: straight to the required/optional question. */
+  const openStrictFor = useCallback(
+    (
+      name: string,
+      position: { top: number; left: number },
+      via: "hover" | "click",
+    ) => {
+      armHover(via);
+      mention.close();
+      setPendingField(name);
+      setStage("strict");
+      setStagePosition(position);
+      setOptionIndex(strictIndexOf(fieldStrict, name));
+      if (via === "click") inputRef.current?.focus();
+    },
+    [armHover, fieldStrict, mention],
+  );
+
+  const onKeyDown = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (!stage) {
+        if (mention.state.query !== null && columnOptions.length > 0) {
+          handleColumnKeys(event, columnOptions, mention, pickColumn);
+        }
+        return;
+      }
+      handleOptionKeys(event, {
+        count: stage === "type" ? TYPE_ORDER.length : STRICT_CHOICES.length,
+        optionIndex,
+        setOptionIndex,
+        pick: (index) =>
+          stage === "type"
+            ? pickType(TYPE_ORDER[index])
+            : pickStrict(STRICT_CHOICES[index].strict),
+        cancel: closeStages,
+      });
+    },
+    [
+      closeStages,
+      columnOptions,
+      mention,
+      optionIndex,
+      pickColumn,
+      pickStrict,
+      pickType,
+      stage,
+    ],
+  );
+
+  return {
+    inputRef,
+    mirrorRef,
+    dropdownRef,
+    isOpen: stage !== null || mention.state.query !== null,
+    position: stage ? stagePosition : mention.state.pos,
+    activeIndex: stage ? optionIndex : mention.state.index,
+    pendingField,
+    stage,
+    columnOptions,
+    typeOptions,
+    strictOptions,
+    onInput: mention.onInput,
+    onKeyDown,
+    pickColumn,
+    pickType,
+    pickStrict,
+    openStrictFor,
+    scheduleHoverClose: () => scheduleHover(closeStages),
+    cancelHoverClose,
+    closeAll,
+  };
+}
+
+function handleColumnKeys(
+  event: React.KeyboardEvent,
+  options: MentionColumnOption[],
+  mention: ReturnType<typeof useAtMention>,
+  pick: (option: MentionColumnOption) => void,
+): void {
+  if (event.key === "Enter" || event.key === "Tab") {
+    event.preventDefault();
+    pick(options[Math.min(mention.state.index, options.length - 1)]);
+    return;
+  }
+  // Arrow keys and Escape are already handled by the stage-1 engine.
+  mention.onKeyDown(event, "", () => {});
+}
+
+function handleOptionKeys(
+  event: React.KeyboardEvent,
+  handlers: {
+    count: number;
+    optionIndex: number;
+    setOptionIndex: (value: number) => void;
+    pick: (index: number) => void;
+    cancel: () => void;
+  },
+): void {
+  const { count, optionIndex, setOptionIndex, pick, cancel } = handlers;
+  if (event.key === "ArrowDown") {
+    event.preventDefault();
+    setOptionIndex((optionIndex + 1) % count);
+  } else if (event.key === "ArrowUp") {
+    event.preventDefault();
+    setOptionIndex((optionIndex - 1 + count) % count);
+  } else if (event.key === "Enter" || event.key === "Tab") {
+    event.preventDefault();
+    pick(optionIndex);
+  } else if (event.key === "Escape") {
+    event.preventDefault();
+    cancel();
+  }
+}
diff --git a/app/hooks/usePromptPlaceholderEditor.ts b/app/hooks/usePromptPlaceholderEditor.ts
deleted file mode 100644
index 2ffd69bc..00000000
--- a/app/hooks/usePromptPlaceholderEditor.ts
+++ /dev/null
@@ -1,292 +0,0 @@
-"use client";
-
-import {
-  type KeyboardEvent,
-  type RefObject,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import type { SampleRow, ValueSetter } from "@/app/lib/types/assessment";
-
-interface UsePromptPlaceholderEditorParams {
-  value: string;
-  onChange: ValueSetter<string>;
-  previewMode: boolean;
-  textColumns: string[];
-  sampleRow: SampleRow;
-  enablePlaceholders: boolean;
-}
-
-export interface UsePromptPlaceholderEditorResult {
-  textareaRef: RefObject<HTMLTextAreaElement | null>;
-  mirrorRef: RefObject<HTMLDivElement | null>;
-  dropdownRef: RefObject<HTMLDivElement | null>;
-  mentionQuery: string | null;
-  mentionIndex: number;
-  mentionPos: { top: number; left: number } | null;
-  mentionOptions: string[];
-  setMentionIndex: (index: number) => void;
-  handleInput: () => void;
-  handleKeyDown: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
-  insertMention: (column: string) => void;
-  insertPlaceholder: (column: string) => void;
-  usedColumns: string[];
-  orderedColumns: string[];
-  previewText: string;
-}
-
-export function usePromptPlaceholderEditor({
-  value,
-  onChange,
-  previewMode,
-  textColumns,
-  sampleRow,
-  enablePlaceholders,
-}: UsePromptPlaceholderEditorParams): UsePromptPlaceholderEditorResult {
-  const [mentionQuery, setMentionQuery] = useState<string | null>(null);
-  const [mentionIndex, setMentionIndex] = useState(0);
-  const [mentionPos, setMentionPos] = useState<{
-    top: number;
-    left: number;
-  } | null>(null);
-  const [mentionStart, setMentionStart] = useState<number | null>(null);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const mirrorRef = useRef<HTMLDivElement>(null);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const mentionOptions = useMemo(() => {
-    if (!enablePlaceholders || mentionQuery === null) return [];
-    const normalized = mentionQuery.toLowerCase();
-    return textColumns.filter((col) => col.toLowerCase().includes(normalized));
-  }, [enablePlaceholders, mentionQuery, textColumns]);
-
-  const computeCaretPosition = useCallback(() => {
-    const textarea = textareaRef.current;
-    const mirror = mirrorRef.current;
-    if (!textarea || !mirror) return null;
-
-    const style = window.getComputedStyle(textarea);
-    [
-      "font-family",
-      "font-size",
-      "font-weight",
-      "line-height",
-      "letter-spacing",
-      "padding-top",
-      "padding-left",
-      "padding-right",
-      "padding-bottom",
-      "border-top-width",
-      "border-left-width",
-      "word-wrap",
-      "overflow-wrap",
-      "tab-size",
-      "box-sizing",
-    ].forEach((prop) => {
-      mirror.style.setProperty(prop, style.getPropertyValue(prop));
-    });
-    mirror.style.width = `${textarea.clientWidth}px`;
-    mirror.style.whiteSpace = "pre-wrap";
-    mirror.style.wordWrap = "break-word";
-    mirror.style.position = "absolute";
-    mirror.style.visibility = "hidden";
-    mirror.style.left = "0";
-    mirror.style.top = "0";
-
-    mirror.textContent = textarea.value.substring(0, textarea.selectionStart);
-    const marker = document.createElement("span");
-    marker.textContent = "​";
-    mirror.appendChild(marker);
-
-    const markerRect = marker.getBoundingClientRect();
-    const mirrorRect = mirror.getBoundingClientRect();
-
-    return {
-      top:
-        markerRect.top -
-        mirrorRect.top -
-        textarea.scrollTop +
-        parseInt(style.lineHeight, 10) +
-        6,
-      left: markerRect.left - mirrorRect.left,
-    };
-  }, []);
-
-  const closeMention = useCallback(() => {
-    setMentionQuery(null);
-    setMentionStart(null);
-    setMentionPos(null);
-  }, []);
-
-  const handleInput = useCallback(() => {
-    if (!enablePlaceholders) {
-      closeMention();
-      return;
-    }
-
-    const textarea = textareaRef.current;
-    if (!textarea) return;
-    const cursor = textarea.selectionStart;
-    const editorValue = textarea.value;
-    let index = cursor - 1;
-    while (
-      index >= 0 &&
-      editorValue[index] !== "@" &&
-      editorValue[index] !== " " &&
-      editorValue[index] !== "\n" &&
-      editorValue[index] !== "\t"
-    ) {
-      index -= 1;
-    }
-    if (index >= 0 && editorValue[index] === "@") {
-      setMentionQuery(editorValue.substring(index + 1, cursor));
-      setMentionStart(index);
-      setMentionIndex(0);
-      setMentionPos(computeCaretPosition());
-      return;
-    }
-    closeMention();
-  }, [closeMention, computeCaretPosition, enablePlaceholders]);
-
-  const insertMention = useCallback(
-    (column: string) => {
-      const textarea = textareaRef.current;
-      if (!textarea || mentionStart === null) return;
-      const cursor = textarea.selectionStart;
-      const nextValue = `${value.substring(0, mentionStart)}{${column}}${value.substring(cursor)}`;
-      const nextCursor = mentionStart + column.length + 2;
-      onChange(nextValue);
-      closeMention();
-      setTimeout(() => {
-        textarea.focus();
-        textarea.setSelectionRange(nextCursor, nextCursor);
-      }, 0);
-    },
-    [closeMention, mentionStart, onChange, value],
-  );
-
-  const insertPlaceholder = (column: string) => {
-    const textarea = textareaRef.current;
-    if (!textarea) return;
-    const start = textarea.selectionStart;
-    const end = textarea.selectionEnd;
-    const nextValue = `${value.slice(0, start)}{${column}}${value.slice(end)}`;
-    const nextCursor = start + column.length + 2;
-    onChange(nextValue);
-    setTimeout(() => {
-      textarea.focus();
-      textarea.setSelectionRange(nextCursor, nextCursor);
-    }, 0);
-  };
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLTextAreaElement>) => {
-      if (
-        !enablePlaceholders ||
-        mentionQuery === null ||
-        mentionOptions.length === 0
-      )
-        return;
-      if (event.key === "ArrowDown") {
-        event.preventDefault();
-        setMentionIndex((prev) => (prev + 1) % mentionOptions.length);
-      } else if (event.key === "ArrowUp") {
-        event.preventDefault();
-        setMentionIndex(
-          (prev) => (prev - 1 + mentionOptions.length) % mentionOptions.length,
-        );
-      } else if (event.key === "Enter" || event.key === "Tab") {
-        event.preventDefault();
-        insertMention(mentionOptions[mentionIndex]);
-      } else if (event.key === "Escape") {
-        closeMention();
-      }
-    },
-    [
-      closeMention,
-      enablePlaceholders,
-      insertMention,
-      mentionIndex,
-      mentionOptions,
-      mentionQuery,
-    ],
-  );
-
-  useEffect(() => {
-    const handleClick = (event: MouseEvent) => {
-      const target = event.target as Node;
-      if (
-        textareaRef.current &&
-        !textareaRef.current.contains(target) &&
-        dropdownRef.current &&
-        !dropdownRef.current.contains(target)
-      ) {
-        closeMention();
-      }
-    };
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, [closeMention]);
-
-  useEffect(() => {
-    if (dropdownRef.current && mentionOptions.length > 0) {
-      const active = dropdownRef.current.children[mentionIndex] as
-        | HTMLElement
-        | undefined;
-      active?.scrollIntoView({ block: "nearest" });
-    }
-  }, [mentionIndex, mentionOptions.length]);
-
-  useEffect(() => {
-    if (previewMode || !enablePlaceholders) {
-      closeMention();
-    }
-  }, [closeMention, enablePlaceholders, previewMode]);
-
-  const usedColumns = useMemo(
-    () => textColumns.filter((col) => value.includes(`{${col}}`)),
-    [textColumns, value],
-  );
-
-  const orderedColumns = useMemo(() => {
-    const used = textColumns.filter((col) => usedColumns.includes(col));
-    const unused = textColumns.filter((col) => !usedColumns.includes(col));
-    return [...used, ...unused];
-  }, [textColumns, usedColumns]);
-
-  const previewText = useMemo(() => {
-    if (!value.trim()) return "";
-    if (!enablePlaceholders) return value;
-
-    let next = value;
-    textColumns.forEach((col) => {
-      const safe = col.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-      next = next.replace(
-        new RegExp(`\\{${safe}\\}`, "g"),
-        sampleRow[col] || "",
-      );
-    });
-    return next;
-  }, [enablePlaceholders, sampleRow, textColumns, value]);
-
-  return {
-    textareaRef,
-    mirrorRef,
-    dropdownRef,
-    mentionQuery,
-    mentionIndex,
-    mentionPos,
-    mentionOptions,
-    setMentionIndex,
-    handleInput,
-    handleKeyDown,
-    insertMention,
-    insertPlaceholder,
-    usedColumns,
-    orderedColumns,
-    previewText,
-  };
-}
diff --git a/app/hooks/useRunNameDraft.ts b/app/hooks/useRunNameDraft.ts
new file mode 100644
index 00000000..655671a8
--- /dev/null
+++ b/app/hooks/useRunNameDraft.ts
@@ -0,0 +1,38 @@
+"use client";
+
+/**
+ * The run-name field on step 4. Defaults to `{assessor} — run {n}` once the
+ * assessor's existing runs are counted, the way the prototype names runs.
+ */
+import { useEffect, useState } from "react";
+import { useAssessmentData } from "@/app/hooks/useAssessmentData";
+import type { WizardContext } from "@/app/lib/types/assessment";
+
+export interface UseRunNameDraftResult {
+  runName: string;
+  setRunName: (value: string) => void;
+}
+
+export function useRunNameDraft(
+  context: WizardContext | null,
+  isRunStep: boolean,
+): UseRunNameDraftResult {
+  const data = useAssessmentData();
+  const [runName, setRunName] = useState("");
+
+  useEffect(() => {
+    if (!isRunStep || !context) return;
+    let cancelled = false;
+    void data.listAssessments().then((runs) => {
+      const count = runs.filter(
+        (run) => run.config?.id === context.configId,
+      ).length;
+      if (!cancelled) setRunName(`${context.assessorName} — run ${count + 1}`);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [context, data, isRunStep]);
+
+  return { runName, setRunName };
+}
diff --git a/app/hooks/useRunResults.ts b/app/hooks/useRunResults.ts
new file mode 100644
index 00000000..f1c49b70
--- /dev/null
+++ b/app/hooks/useRunResults.ts
@@ -0,0 +1,136 @@
+"use client";
+
+/**
+ * One run's results, through the data source: the raw rows (for the detail
+ * modal) plus the table projection the grids render.
+ *
+ * Polls while the run is in flight and stops at a terminal status, so an open
+ * results tab fills in as stages land.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useToast } from "@/app/hooks/useToast";
+import { useAssessmentData } from "@/app/hooks/useAssessmentData";
+import {
+  getAsyncErrorMessage,
+  jsonResultsToTableData,
+  normalizeStatus,
+} from "@/app/lib/assessment/results";
+import {
+  RESULTS_POLL_INTERVAL_MS,
+  SPREADSHEET_PREVIEW_ROW_LIMIT,
+  TERMINAL_ASSESSMENT_STATUSES,
+} from "@/app/lib/assessment/constants";
+import type {
+  AssessmentStatusValue,
+  BatchCounts,
+  ResultsTarget,
+} from "@/app/lib/types/assessment";
+
+export interface UseRunResultsResult {
+  results: Record<string, unknown>[];
+  headers: string[];
+  rows: string[][];
+  status: AssessmentStatusValue | null;
+  counts: BatchCounts | null;
+  totalItems: number;
+  isPolling: boolean;
+  isLoading: boolean;
+  error: string | null;
+}
+
+export function useRunResults(
+  target: ResultsTarget | null,
+): UseRunResultsResult {
+  const toast = useToast();
+  const data = useAssessmentData();
+  const [results, setResults] = useState<Record<string, unknown>[]>([]);
+  const [table, setTable] = useState<{ headers: string[]; rows: string[][] }>({
+    headers: [],
+    rows: [],
+  });
+  const [status, setStatus] = useState<AssessmentStatusValue | null>(null);
+  const [counts, setCounts] = useState<BatchCounts | null>(null);
+  const [totalItems, setTotalItems] = useState(0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const warnedRef = useRef(false);
+  const cancelledRef = useRef(false);
+
+  const assessmentId = target?.assessment_id ?? null;
+  const method = target?.method ?? null;
+
+  const load = useCallback(async () => {
+    if (!assessmentId || !method) return;
+    try {
+      const payload = await data.getRunResults({
+        assessment_id: assessmentId,
+        method,
+      });
+      if (cancelledRef.current) return;
+
+      setResults(payload.rows);
+      setStatus(payload.status);
+      setCounts(payload.counts);
+      setTotalItems(payload.total_items);
+      setTable(
+        jsonResultsToTableData(payload.rows, {
+          rowLimit: SPREADSHEET_PREVIEW_ROW_LIMIT,
+        }),
+      );
+      setError(null);
+
+      if (
+        payload.rows.length > SPREADSHEET_PREVIEW_ROW_LIMIT &&
+        !warnedRef.current
+      ) {
+        warnedRef.current = true;
+        toast.warning(
+          `Preview capped at ${SPREADSHEET_PREVIEW_ROW_LIMIT} rows. Download CSV for full data.`,
+        );
+      }
+    } catch (caught) {
+      if (!cancelledRef.current) {
+        setError(getAsyncErrorMessage("load results", caught));
+      }
+    } finally {
+      if (!cancelledRef.current) setIsLoading(false);
+    }
+  }, [assessmentId, data, method, toast]);
+
+  useEffect(() => {
+    cancelledRef.current = false;
+    if (!assessmentId) {
+      setError("Invalid assessment id.");
+      setIsLoading(false);
+      return;
+    }
+
+    setIsLoading(true);
+    void load();
+    return () => {
+      cancelledRef.current = true;
+    };
+  }, [assessmentId, load]);
+
+  const isPolling =
+    status !== null &&
+    !TERMINAL_ASSESSMENT_STATUSES.has(normalizeStatus(status));
+
+  useEffect(() => {
+    if (!isPolling) return;
+    const interval = setInterval(() => void load(), RESULTS_POLL_INTERVAL_MS);
+    return () => clearInterval(interval);
+  }, [isPolling, load]);
+
+  return {
+    results,
+    headers: table.headers,
+    rows: table.rows,
+    status,
+    counts,
+    totalItems,
+    isPolling,
+    isLoading,
+    error,
+  };
+}
diff --git a/app/hooks/useRunSubmit.ts b/app/hooks/useRunSubmit.ts
new file mode 100644
index 00000000..aa38b73d
--- /dev/null
+++ b/app/hooks/useRunSubmit.ts
@@ -0,0 +1,52 @@
+"use client";
+
+/** Creates the run that ends the wizard, then hands control back to Home. */
+import { useCallback, useState } from "react";
+import { useToast } from "@/app/hooks/useToast";
+import { useAssessmentData } from "@/app/hooks/useAssessmentData";
+import { getAsyncErrorMessage } from "@/app/lib/assessment/results";
+import type { WizardContext } from "@/app/lib/types/assessment";
+
+interface UseRunSubmitParams {
+  context: WizardContext | null;
+  submissionId: string;
+  runName: string;
+  onRunCreated: (context: WizardContext) => void;
+}
+
+export interface UseRunSubmitResult {
+  isSubmitting: boolean;
+  submitRun: () => Promise<void>;
+}
+
+export function useRunSubmit({
+  context,
+  submissionId,
+  runName,
+  onRunCreated,
+}: UseRunSubmitParams): UseRunSubmitResult {
+  const toast = useToast();
+  const data = useAssessmentData();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const submitRun = useCallback(async () => {
+    if (!context || !submissionId) return;
+    setIsSubmitting(true);
+    try {
+      const run = await data.createRun({
+        experiment_name: runName.trim() || `${context.assessorName} — new run`,
+        submission_id: submissionId,
+        config_id: context.configId,
+        config_version: context.version,
+      });
+      toast.success(`Run "${run.experiment_name}" submitted`);
+      onRunCreated(context);
+    } catch (caught) {
+      toast.error(getAsyncErrorMessage("start run", caught));
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [context, data, onRunCreated, runName, submissionId, toast]);
+
+  return { isSubmitting, submitRun };
+}
diff --git a/app/hooks/useSubmissionForm.ts b/app/hooks/useSubmissionForm.ts
new file mode 100644
index 00000000..9cefa821
--- /dev/null
+++ b/app/hooks/useSubmissionForm.ts
@@ -0,0 +1,84 @@
+"use client";
+
+/**
+ * The "create submission set" form: name, description, and the file — picked from
+ * the browser dialog or dropped on the zone, validated the same way either route.
+ */
+import { useCallback, useRef, useState } from "react";
+import { useToast } from "@/app/hooks/useToast";
+import { isAllowedDatasetFile } from "@/app/lib/utils/assessment";
+import { MAX_DATASET_FILE_BYTES } from "@/app/lib/assessment/constants";
+import type { UseSubmissionFormResult } from "@/app/lib/types/assessment";
+
+const MAX_FILE_MB = MAX_DATASET_FILE_BYTES / (1024 * 1024);
+const EXTENSION_RE = /\.(csv|xlsx|xls)$/i;
+
+export function useSubmissionForm(): UseSubmissionFormResult {
+  const toast = useToast();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [file, setFile] = useState<File | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const accept = useCallback(
+    (candidate: File) => {
+      if (!isAllowedDatasetFile(candidate.name)) {
+        toast.error("Please select a CSV or Excel (.xlsx, .xls) file");
+        return;
+      }
+      if (candidate.size > MAX_DATASET_FILE_BYTES) {
+        toast.error(`File too large. Max ${MAX_FILE_MB}MB allowed.`);
+        return;
+      }
+      setFile(candidate);
+      setName((current) => current || candidate.name.replace(EXTENSION_RE, ""));
+    },
+    [toast],
+  );
+
+  const removeFile = useCallback(() => {
+    setFile(null);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  }, []);
+
+  const reset = useCallback(() => {
+    setName("");
+    setDescription("");
+    removeFile();
+  }, [removeFile]);
+
+  const handleFileSelect = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const selected = event.target.files?.[0];
+      if (selected) accept(selected);
+      event.target.value = "";
+    },
+    [accept],
+  );
+
+  const handleDrop = useCallback(
+    (event: React.DragEvent<HTMLElement>) => {
+      event.preventDefault();
+      setIsDragging(false);
+      const dropped = event.dataTransfer.files?.[0];
+      if (dropped) accept(dropped);
+    },
+    [accept],
+  );
+
+  return {
+    name,
+    description,
+    file,
+    isDragging,
+    fileInputRef,
+    setName,
+    setDescription,
+    setIsDragging,
+    removeFile,
+    reset,
+    handleFileSelect,
+    handleDrop,
+  };
+}
diff --git a/app/hooks/useSubmissionList.ts b/app/hooks/useSubmissionList.ts
new file mode 100644
index 00000000..14d37433
--- /dev/null
+++ b/app/hooks/useSubmissionList.ts
@@ -0,0 +1,62 @@
+"use client";
+
+/** Loads submission sets and their previews through the data source, caching previews. */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useToast } from "@/app/hooks/useToast";
+import { useAssessmentData } from "@/app/hooks/useAssessmentData";
+import { useAssessmentFeatureGuard } from "@/app/hooks/useAssessmentFeatureGuard";
+import { toDatasetPreview } from "@/app/lib/utils/assessment";
+import { getAsyncErrorMessage } from "@/app/lib/assessment/results";
+import type {
+  AssessmentSubmission,
+  DatasetPreview,
+} from "@/app/lib/types/assessment";
+
+export interface UseSubmissionListResult {
+  submissions: AssessmentSubmission[];
+  isLoading: boolean;
+  reload: () => Promise<void>;
+  loadPreview: (id: string) => Promise<DatasetPreview>;
+  forgetPreview: (id: string) => void;
+}
+
+export function useSubmissionList(): UseSubmissionListResult {
+  const toast = useToast();
+  const data = useAssessmentData();
+  const { guard } = useAssessmentFeatureGuard();
+  const [submissions, setSubmissions] = useState<AssessmentSubmission[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const previewCache = useRef<Record<string, DatasetPreview>>({});
+
+  const reload = useCallback(async () => {
+    try {
+      setSubmissions(await data.listSubmissions());
+    } catch (caught) {
+      if (guard(caught)) return;
+      toast.error(getAsyncErrorMessage("load submissions", caught));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [data, guard, toast]);
+
+  const loadPreview = useCallback(
+    async (id: string) => {
+      const cached = previewCache.current[id];
+      if (cached) return cached;
+      const preview = toDatasetPreview(await data.getSubmissionPreview(id));
+      previewCache.current[id] = preview;
+      return preview;
+    },
+    [data],
+  );
+
+  const forgetPreview = useCallback((id: string) => {
+    delete previewCache.current[id];
+  }, []);
+
+  useEffect(() => {
+    void reload();
+  }, [reload]);
+
+  return { submissions, isLoading, reload, loadPreview, forgetPreview };
+}
diff --git a/app/hooks/useSubmissionStep.ts b/app/hooks/useSubmissionStep.ts
new file mode 100644
index 00000000..94053980
--- /dev/null
+++ b/app/hooks/useSubmissionStep.ts
@@ -0,0 +1,161 @@
+"use client";
+
+/**
+ * Wizard step 1 — submission sets. Composes the list (useSubmissionList) and the
+ * create form (useSubmissionForm), owns selection plus the create/view/delete
+ * actions, and reports the selection into the assessment store so later steps can
+ * read the set's columns and sample row.
+ */
+import { useCallback, useEffect, useState } from "react";
+import { useToast } from "@/app/hooks/useToast";
+import { useAssessmentData } from "@/app/hooks/useAssessmentData";
+import { useSubmissionForm } from "@/app/hooks/useSubmissionForm";
+import { useSubmissionList } from "@/app/hooks/useSubmissionList";
+import { useAssessmentDatasetStore } from "@/app/lib/store/assessment";
+import { nonBlankColumns } from "@/app/lib/utils/assessment";
+import { getAsyncErrorMessage } from "@/app/lib/assessment/results";
+import type {
+  DatasetViewModalData,
+  UseSubmissionStepResult,
+} from "@/app/lib/types/assessment";
+
+export function useSubmissionStep(): UseSubmissionStepResult {
+  const toast = useToast();
+  const data = useAssessmentData();
+  const form = useSubmissionForm();
+  const list = useSubmissionList();
+
+  const selectedId = useAssessmentDatasetStore((state) => state.datasetId);
+  const setDataset = useAssessmentDatasetStore((state) => state.setDataset);
+  const setDatasetId = useAssessmentDatasetStore((state) => state.setDatasetId);
+  const setDatasetName = useAssessmentDatasetStore(
+    (state) => state.setDatasetName,
+  );
+
+  const [isLoadingColumns, setIsLoadingColumns] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
+  const [viewingId, setViewingId] = useState<string | null>(null);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+  const [viewModalData, setViewModalData] =
+    useState<DatasetViewModalData | null>(null);
+  const [confirmDeleteId, setConfirmDeleteId] = useState<string | null>(null);
+
+  const handleSelect = useCallback(
+    async (id: string, selectedName?: string) => {
+      setDatasetId(id);
+      if (!id) {
+        setDatasetName("");
+        return;
+      }
+
+      const resolvedName =
+        selectedName ??
+        list.submissions.find((item) => item.submission_id === id)?.name ??
+        "";
+      setDatasetName(resolvedName);
+      setIsLoadingColumns(true);
+      try {
+        const preview = await list.loadPreview(id);
+        const { headers, sampleRow } = nonBlankColumns(preview);
+        setDataset(id, headers, sampleRow, resolvedName);
+      } catch (caught) {
+        setDatasetId("");
+        setDatasetName("");
+        toast.error(getAsyncErrorMessage("load submission columns", caught));
+      } finally {
+        setIsLoadingColumns(false);
+      }
+    },
+    [list, setDataset, setDatasetId, setDatasetName, toast],
+  );
+
+  const handleCreate = useCallback(async () => {
+    if (!form.file || !form.name.trim()) return;
+    setIsCreating(true);
+    try {
+      const created = await data.createSubmission({
+        name: form.name.trim(),
+        description: form.description.trim() || undefined,
+        file: form.file,
+      });
+      await list.reload();
+      form.reset();
+      toast.success(`Submission set "${created.name}" created`);
+      await handleSelect(created.submission_id, created.name);
+    } catch (caught) {
+      toast.error(getAsyncErrorMessage("create submission set", caught));
+    } finally {
+      setIsCreating(false);
+    }
+  }, [data, form, handleSelect, list, toast]);
+
+  const handleView = useCallback(
+    async (submissionId: string, viewName: string) => {
+      setViewingId(submissionId);
+      try {
+        const preview = await list.loadPreview(String(submissionId));
+        setViewModalData({
+          name: viewName,
+          headers: preview.headers,
+          rows: preview.rows,
+        });
+      } catch (caught) {
+        toast.error(getAsyncErrorMessage("open submission set", caught));
+      } finally {
+        setViewingId(null);
+      }
+    },
+    [list, toast],
+  );
+
+  const handleDelete = useCallback(
+    async (id: string) => {
+      setDeletingId(id);
+      try {
+        await data.deleteSubmission(id);
+        list.forgetPreview(String(id));
+        if (selectedId === id.toString()) {
+          setDatasetId("");
+          setDatasetName("");
+        }
+        await list.reload();
+        toast.success("Submission set deleted");
+      } catch (caught) {
+        toast.error(getAsyncErrorMessage("delete submission set", caught));
+      } finally {
+        setDeletingId(null);
+      }
+    },
+    [data, list, selectedId, setDatasetId, setDatasetName, toast],
+  );
+
+  // The wizard can preselect a version's linked set before the list arrives.
+  useEffect(() => {
+    const selected = list.submissions.find(
+      (item) => item.submission_id === selectedId,
+    );
+    if (selected) setDatasetName(selected.name);
+  }, [list.submissions, selectedId, setDatasetName]);
+
+  return {
+    form,
+    submissions: list.submissions,
+    selectedId,
+    isLoading: list.isLoading,
+    isLoadingColumns,
+    isCreating,
+    viewingId,
+    deletingId,
+    viewModalData,
+    confirmDeleteId,
+    pendingDelete: list.submissions.find(
+      (item) => item.submission_id === confirmDeleteId,
+    ),
+    setConfirmDeleteId,
+    setViewModalData,
+    handleCreate,
+    handleSelect,
+    handleView,
+    handleDelete,
+  };
+}
diff --git a/app/hooks/useSyncedScroll.ts b/app/hooks/useSyncedScroll.ts
new file mode 100644
index 00000000..0fd79c31
--- /dev/null
+++ b/app/hooks/useSyncedScroll.ts
@@ -0,0 +1,275 @@
+"use client";
+
+/**
+ * Keeps the editor and its preview aligned on their section headings rather than
+ * on total height — the editor carries cards (output schema, the fixed-output
+ * strip) the preview has no counterpart for.
+ *
+ * What makes it feel smooth:
+ * - **monotone cubic mapping** (`createScrollMapper`), so the follower's speed
+ *   doesn't jump when crossing an anchor;
+ * - a **tail anchor**, so the end of the last zone lands the preview at its
+ *   bottom instead of holding at the last heading;
+ * - **damped follow** in one rAF loop — the follower eases toward its target
+ *   instead of snapping to it once per wheel event;
+ * - **echo suppression**, because writing `scrollTop` fires the follower's own
+ *   scroll event, which would otherwise drive back and fight the leader;
+ * - **cached anchors**, re-measured only when a pane resizes or its content
+ *   changes, so starting a scroll doesn't force a layout.
+ */
+import { useCallback, useEffect, useRef } from "react";
+import {
+  createScrollMapper,
+  type ScrollAnchor,
+  type ScrollMapper,
+} from "@/app/lib/assessment/scrollMap";
+
+type PaneKey = "editor" | "preview";
+
+/** How long the driving pane keeps the lock after its last scroll event. */
+const DRIVER_IDLE_MS = 140;
+/**
+ * Fraction of the remaining distance covered per frame. Heavier easing for a
+ * long jump (crossing to another section) so it glides; lighter for the small
+ * per-frame deltas of a normal scroll, where easing would read as lag —
+ * measured at ≤16px of trail even at 24px/frame.
+ */
+const EASE_NEAR = 0.6;
+const EASE_FAR = 0.3;
+const FAR_DISTANCE_PX = 150;
+const SETTLE_PX = 0.5;
+const ANCHOR_GAP = 14;
+const ECHO_TOLERANCE_PX = 1.5;
+const REMEASURE_DEBOUNCE_MS = 120;
+
+interface FollowState {
+  goal: { pane: HTMLElement; key: PaneKey; to: number } | null;
+  frame: number | null;
+  /** The last value we wrote to each pane, to recognise our own echo. */
+  written: Record<PaneKey, number | null>;
+  driver: PaneKey | null;
+  snap: boolean;
+}
+
+const maxScroll = (el: HTMLElement) =>
+  Math.max(0, el.scrollHeight - el.clientHeight);
+
+const clamp = (value: number, low: number, high: number) =>
+  Math.min(high, Math.max(low, value));
+
+function offsetIn(pane: HTMLElement, el: HTMLElement, bottom = false): number {
+  const rect = el.getBoundingClientRect();
+  const paneRect = pane.getBoundingClientRect();
+  return (bottom ? rect.bottom : rect.top) - paneRect.top + pane.scrollTop;
+}
+
+/** Strictly increasing on both axes, so the mapping stays invertible. */
+function pushAnchor(anchors: ScrollAnchor[], anchor: ScrollAnchor): void {
+  const last = anchors[anchors.length - 1];
+  if (!last || (anchor[0] > last[0] + 2 && anchor[1] > last[1] + 2)) {
+    anchors.push(anchor);
+  }
+}
+
+function measureAnchors(
+  editor: HTMLElement,
+  preview: HTMLElement,
+  editorSelector: string,
+  previewSelector: string,
+): ScrollAnchor[] {
+  const headings = [...editor.querySelectorAll<HTMLElement>(editorSelector)];
+  const targets = [...preview.querySelectorAll<HTMLElement>(previewSelector)];
+  const editorMax = maxScroll(editor);
+  const previewMax = maxScroll(preview);
+
+  const anchors: ScrollAnchor[] = [[0, 0]];
+  const count = Math.min(headings.length, targets.length);
+  for (let i = 0; i < count; i += 1) {
+    pushAnchor(anchors, [
+      clamp(offsetIn(editor, headings[i]) - ANCHOR_GAP, 0, editorMax),
+      clamp(offsetIn(preview, targets[i]) - ANCHOR_GAP, 0, previewMax),
+    ]);
+  }
+
+  // Tail: the end of the last zone lines up with the end of the preview.
+  const tail = count > 0 ? headings[count - 1].nextElementSibling : null;
+  if (tail instanceof HTMLElement) {
+    pushAnchor(anchors, [
+      clamp(offsetIn(editor, tail, true) - editor.clientHeight, 0, editorMax),
+      previewMax,
+    ]);
+  }
+
+  return anchors;
+}
+
+function proportional(source: HTMLElement, target: HTMLElement): number | null {
+  const sourceMax = maxScroll(source);
+  const targetMax = maxScroll(target);
+  if (sourceMax <= 2 || targetMax <= 2) return null;
+  return (source.scrollTop / sourceMax) * targetMax;
+}
+
+/** Writing `scrollTop` fires the follower's own scroll event; skip that one. */
+function isEcho(state: FollowState, key: PaneKey, scrollTop: number): boolean {
+  const value = state.written[key];
+  if (value === null || Math.abs(scrollTop - value) > ECHO_TOLERANCE_PX) {
+    return false;
+  }
+  state.written[key] = null;
+  return true;
+}
+
+function stepFollow(state: FollowState): void {
+  state.frame = null;
+  const goal = state.goal;
+  if (!goal) return;
+
+  const { pane, key, to } = goal;
+  const distance = to - pane.scrollTop;
+  const settled = state.snap || Math.abs(distance) <= SETTLE_PX;
+  const ease = Math.abs(distance) > FAR_DISTANCE_PX ? EASE_FAR : EASE_NEAR;
+  const next = settled ? to : pane.scrollTop + distance * ease;
+
+  state.written[key] = next;
+  pane.scrollTop = next;
+
+  if (settled) {
+    state.goal = null;
+  } else {
+    state.frame = requestAnimationFrame(() => stepFollow(state));
+  }
+}
+
+function scheduleFollow(state: FollowState): void {
+  if (state.frame === null) {
+    state.frame = requestAnimationFrame(() => stepFollow(state));
+  }
+}
+
+export function useSyncedScroll(params: {
+  editorRef: React.RefObject<HTMLDivElement | null>;
+  previewRef: React.RefObject<HTMLDivElement | null>;
+  /** Elements to align on, e.g. the zone headings and the preview's `h1`s. */
+  editorAnchorSelector: string;
+  previewAnchorSelector: string;
+}) {
+  const { editorRef, previewRef, editorAnchorSelector, previewAnchorSelector } =
+    params;
+
+  const stateRef = useRef<FollowState>({
+    goal: null,
+    frame: null,
+    written: { editor: null, preview: null },
+    driver: null,
+    snap: false,
+  });
+  const mapperRef = useRef<ScrollMapper | null>(null);
+  const idleRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const invalidate = useCallback(() => {
+    mapperRef.current = null;
+  }, []);
+
+  const getMapper = useCallback((): ScrollMapper | null => {
+    const editor = editorRef.current;
+    const preview = previewRef.current;
+    if (!editor || !preview) return null;
+    if (!mapperRef.current) {
+      const anchors = measureAnchors(
+        editor,
+        preview,
+        editorAnchorSelector,
+        previewAnchorSelector,
+      );
+      mapperRef.current =
+        anchors.length > 1 ? createScrollMapper(anchors) : null;
+    }
+    return mapperRef.current;
+  }, [editorAnchorSelector, editorRef, previewAnchorSelector, previewRef]);
+
+  const claimDriver = useCallback((key: PaneKey): boolean => {
+    const state = stateRef.current;
+    if (state.driver && state.driver !== key) return false;
+
+    state.driver = key;
+    if (idleRef.current) clearTimeout(idleRef.current);
+    idleRef.current = setTimeout(() => {
+      state.driver = null;
+    }, DRIVER_IDLE_MS);
+    return true;
+  }, []);
+
+  const sync = useCallback(
+    (source: HTMLElement, sourceKey: PaneKey) => {
+      const state = stateRef.current;
+      const editor = editorRef.current;
+      const preview = previewRef.current;
+      if (!editor || !preview) return;
+      if (isEcho(state, sourceKey, source.scrollTop)) return;
+      if (!claimDriver(sourceKey)) return;
+
+      const fromEditor = sourceKey === "editor";
+      const pane = fromEditor ? preview : editor;
+      const mapper = getMapper();
+      const mapped = mapper
+        ? mapper[fromEditor ? "forward" : "backward"](source.scrollTop)
+        : proportional(source, pane);
+      if (mapped === null) return;
+
+      state.goal = {
+        pane,
+        key: fromEditor ? "preview" : "editor",
+        to: clamp(mapped, 0, maxScroll(pane)),
+      };
+      scheduleFollow(state);
+    },
+    [claimDriver, editorRef, getMapper, previewRef],
+  );
+
+  useEffect(() => {
+    const editor = editorRef.current;
+    const preview = previewRef.current;
+    const state = stateRef.current;
+    if (!editor || !preview) return;
+
+    const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    state.snap = motionQuery.matches;
+    const onMotionChange = () => {
+      state.snap = motionQuery.matches;
+    };
+    motionQuery.addEventListener("change", onMotionChange);
+
+    const onEditorScroll = () => sync(editor, "editor");
+    const onPreviewScroll = () => sync(preview, "preview");
+    editor.addEventListener("scroll", onEditorScroll, { passive: true });
+    preview.addEventListener("scroll", onPreviewScroll, { passive: true });
+
+    // Anchors only move when a pane resizes or its content changes.
+    let debounce: ReturnType<typeof setTimeout> | null = null;
+    const scheduleRemeasure = () => {
+      if (debounce) clearTimeout(debounce);
+      debounce = setTimeout(invalidate, REMEASURE_DEBOUNCE_MS);
+    };
+    const resizeObserver = new ResizeObserver(scheduleRemeasure);
+    resizeObserver.observe(editor);
+    resizeObserver.observe(preview);
+    const mutationObserver = new MutationObserver(scheduleRemeasure);
+    mutationObserver.observe(preview, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+
+    return () => {
+      motionQuery.removeEventListener("change", onMotionChange);
+      editor.removeEventListener("scroll", onEditorScroll);
+      preview.removeEventListener("scroll", onPreviewScroll);
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+      if (debounce) clearTimeout(debounce);
+      if (state.frame !== null) cancelAnimationFrame(state.frame);
+      if (idleRef.current) clearTimeout(idleRef.current);
+    };
+  }, [editorRef, invalidate, previewRef, sync]);
+}
diff --git a/app/hooks/useVersionSaveFlow.ts b/app/hooks/useVersionSaveFlow.ts
new file mode 100644
index 00000000..3d488f7b
--- /dev/null
+++ b/app/hooks/useVersionSaveFlow.ts
@@ -0,0 +1,118 @@
+"use client";
+
+/**
+ * The save half of the wizard: whether the draft differs from the version it was
+ * loaded from, the Review & save dialog, and what happens after a save.
+ *
+ * The baseline is derived from the loaded version's own detail rather than from
+ * whatever the draft happens to hold at that moment — the draft and the linked
+ * submission set arrive in separate renders, and comparing against a
+ * half-applied draft would report a phantom diff.
+ */
+import { useCallback, useMemo, useState } from "react";
+import { useAssessorSave } from "@/app/hooks/useAssessorSave";
+import {
+  draftFromVersion,
+  emptyDraft,
+  hasAssessmentContent,
+  serializeDraft,
+} from "@/app/lib/assessment/draft";
+import type {
+  AssessorVersionDetail,
+  WizardContext,
+  WizardDraft,
+} from "@/app/lib/types/assessment";
+
+interface UseVersionSaveFlowParams {
+  draft: WizardDraft;
+  submissionId: string;
+  submissionColumns: string[];
+  context: WizardContext | null;
+  onSaved: (context: WizardContext, detail: AssessorVersionDetail) => void;
+}
+
+export interface UseVersionSaveFlowResult {
+  isDirty: boolean;
+  canSave: boolean;
+  isSaving: boolean;
+  isReviewOpen: boolean;
+  savedTitle: string | null;
+  openReview: () => void;
+  closeReview: () => void;
+  saveVersion: (name: string, commitMessage: string) => Promise<void>;
+  dismissSaved: () => void;
+  /** Called when a flow starts, so the diff is measured from the right place. */
+  rebaseline: (detail: AssessorVersionDetail | null) => void;
+}
+
+function baselineOf(detail: AssessorVersionDetail | null): string {
+  return detail
+    ? serializeDraft(
+        draftFromVersion(detail),
+        String(detail.submission_id ?? ""),
+      )
+    : serializeDraft(emptyDraft(), "");
+}
+
+export function useVersionSaveFlow({
+  draft,
+  submissionId,
+  submissionColumns,
+  context,
+  onSaved,
+}: UseVersionSaveFlowParams): UseVersionSaveFlowResult {
+  const { isSaving, save } = useAssessorSave();
+  const [baseline, setBaseline] = useState(() => baselineOf(null));
+  const [isReviewOpen, setIsReviewOpen] = useState(false);
+  const [savedTitle, setSavedTitle] = useState<string | null>(null);
+  const isDirty = useMemo(
+    () => serializeDraft(draft, submissionId) !== baseline,
+    [baseline, draft, submissionId],
+  );
+
+  const rebaseline = useCallback((detail: AssessorVersionDetail | null) => {
+    setBaseline(baselineOf(detail));
+    setSavedTitle(null);
+    setIsReviewOpen(false);
+  }, []);
+
+  const saveVersion = useCallback(
+    async (name: string, commitMessage: string) => {
+      const saved = await save({
+        draft,
+        submissionId,
+        submissionColumns,
+        configId: context?.configId ?? null,
+        name,
+        commitMessage,
+      });
+      if (!saved) return;
+
+      setIsReviewOpen(false);
+      setBaseline(baselineOf(saved.detail));
+      setSavedTitle(`Assessor "${name}" saved as v${saved.version}`);
+      onSaved(
+        {
+          configId: saved.config_id,
+          version: saved.version,
+          assessorName: name,
+        },
+        saved.detail,
+      );
+    },
+    [context, draft, onSaved, save, submissionColumns, submissionId],
+  );
+
+  return {
+    isDirty,
+    canSave: context ? isDirty : hasAssessmentContent(draft),
+    isSaving,
+    isReviewOpen,
+    savedTitle,
+    openReview: useCallback(() => setIsReviewOpen(true), []),
+    closeReview: useCallback(() => setIsReviewOpen(false), []),
+    saveVersion,
+    dismissSaved: useCallback(() => setSavedTitle(null), []),
+    rebaseline,
+  };
+}
diff --git a/app/hooks/useWizardDraft.ts b/app/hooks/useWizardDraft.ts
new file mode 100644
index 00000000..d433be17
--- /dev/null
+++ b/app/hooks/useWizardDraft.ts
@@ -0,0 +1,126 @@
+"use client";
+
+/**
+ * What steps 2–3 edit: the two prompt zones per step, each referenced column's
+ * type, and the output schema. Loading a saved version fills it from the wire
+ * shapes, so an assessor reopens exactly as it was authored.
+ */
+import { useCallback, useState } from "react";
+import { rewriteToken } from "@/app/lib/assessment/promptTokens";
+import { draftFromVersion, emptyDraft } from "@/app/lib/assessment/draft";
+import {
+  buildDefaultParams,
+  getDefaultModelForProvider,
+} from "@/app/lib/data/assessmentModels";
+import type {
+  AssessorVersionDetail,
+  PromptFieldType,
+  PromptStepId,
+  PromptZoneId,
+  PromptZones,
+  SchemaProperty,
+  UseWizardDraftResult,
+  WizardDraft,
+} from "@/app/lib/types/assessment";
+import type { ProviderType } from "@/app/lib/types/configs";
+
+export function useWizardDraft(): UseWizardDraftResult {
+  const [draft, setDraft] = useState<WizardDraft>(emptyDraft);
+
+  const setPrefilterEnabled = useCallback((prefilterEnabled: boolean) => {
+    setDraft((current) => ({ ...current, prefilterEnabled }));
+  }, []);
+
+  const setZone = useCallback(
+    (step: PromptStepId, zone: PromptZoneId, value: string) => {
+      setDraft((current) => ({
+        ...current,
+        [step]: { ...current[step], [zone]: value },
+      }));
+    },
+    [],
+  );
+
+  /** A type change rewrites that column's token in every zone. */
+  const setFieldType = useCallback((name: string, type: PromptFieldType) => {
+    setDraft((current) => ({
+      ...current,
+      fieldTypes: { ...current.fieldTypes, [name]: type },
+      prefilter: rewriteZones(current.prefilter, name, type),
+      assessment: rewriteZones(current.assessment, name, type),
+    }));
+  }, []);
+
+  const setFieldStrict = useCallback((name: string, strict: boolean) => {
+    setDraft((current) => ({
+      ...current,
+      fieldStrict: { ...current.fieldStrict, [name]: strict },
+    }));
+  }, []);
+
+  const setOutputSchema = useCallback((outputSchema: SchemaProperty[]) => {
+    setDraft((current) => ({ ...current, outputSchema }));
+  }, []);
+
+  /** Switching model resets its parameters — each model accepts a different set. */
+  const setModel = useCallback(
+    (step: PromptStepId, provider: ProviderType, model: string) => {
+      // Changing provider passes no model — fall back to that provider's first.
+      const next = model || getDefaultModelForProvider(provider);
+      setDraft((current) => ({
+        ...current,
+        models: {
+          ...current.models,
+          [step]: { provider, model: next, params: buildDefaultParams(next) },
+        },
+      }));
+    },
+    [],
+  );
+
+  const setModelParam = useCallback(
+    (step: PromptStepId, key: string, value: string | number) => {
+      setDraft((current) => ({
+        ...current,
+        models: {
+          ...current.models,
+          [step]: {
+            ...current.models[step],
+            params: { ...current.models[step].params, [key]: value },
+          },
+        },
+      }));
+    },
+    [],
+  );
+
+  const loadFromVersion = useCallback((detail: AssessorVersionDetail) => {
+    setDraft(draftFromVersion(detail));
+  }, []);
+
+  const reset = useCallback(() => setDraft(emptyDraft()), []);
+
+  return {
+    draft,
+    setPrefilterEnabled,
+    setZone,
+    setFieldType,
+    setFieldStrict,
+    setOutputSchema,
+    setModel,
+    setModelParam,
+    loadFromVersion,
+    reset,
+  };
+}
+
+function rewriteZones(
+  zones: PromptZones,
+  name: string,
+  type: PromptFieldType,
+): PromptZones {
+  return {
+    instructions: rewriteToken(zones.instructions, name, type),
+    submission: rewriteToken(zones.submission, name, type),
+  };
+}
diff --git a/app/lib/assessment/api/assessors.ts b/app/lib/assessment/api/assessors.ts
new file mode 100644
index 00000000..e39b436a
--- /dev/null
+++ b/app/lib/assessment/api/assessors.ts
@@ -0,0 +1,147 @@
+/**
+ * Assessor fetchers. Assessors are ASSESSMENT-tagged configs, so these ride the
+ * existing `/api/configs` routes. Network only, no React.
+ */
+import { apiFetch } from "@/app/lib/apiClient";
+import { ASSESSMENT_TAG } from "@/app/lib/assessment/constants";
+import {
+  blobToVersionDetail,
+  versionDetailToBlob,
+  type AssessmentBlob,
+} from "@/app/lib/assessment/configBlob";
+import {
+  fetchConfigPage,
+  fetchConfigVersionDetail,
+  fetchConfigVersionsPage,
+} from "@/app/lib/utils/assessmentFetcher";
+import type {
+  AssessorPageQuery,
+  AssessorSummary,
+  AssessorVersion,
+  AssessorVersionDetail,
+  PagedResult,
+  SaveAssessorVersionInput,
+  SaveAssessorVersionResult,
+} from "@/app/lib/types/assessment";
+import type {
+  ConfigVersionResponse,
+  ConfigWithVersion,
+} from "@/app/lib/types/configs";
+
+const VERSION_PAGE_LIMIT = 100;
+
+/** One page of assessors; `has_more` from the API drives the next/prev chevrons. */
+export async function listAssessors(
+  apiKey: string,
+  page: AssessorPageQuery = {},
+): Promise<PagedResult<AssessorSummary>> {
+  return fetchConfigPage({
+    apiKey,
+    skip: page.skip,
+    limit: page.limit,
+    search: page.search,
+  });
+}
+
+export async function listAssessorVersions(
+  apiKey: string,
+  configId: string,
+): Promise<AssessorVersion[]> {
+  const page = await fetchConfigVersionsPage(apiKey, configId, {
+    limit: VERSION_PAGE_LIMIT,
+  });
+  return page.items;
+}
+
+export async function getAssessorVersion(
+  apiKey: string,
+  configId: string,
+  version: number,
+): Promise<AssessorVersionDetail> {
+  const detail = await fetchConfigVersionDetail(apiKey, configId, version);
+  return blobToVersionDetail(
+    configId,
+    detail.version,
+    detail.commit_message ?? null,
+    detail.config_blob as unknown as AssessmentBlob,
+  );
+}
+
+export async function deleteAssessor(
+  apiKey: string,
+  configId: string,
+): Promise<void> {
+  const response = await apiFetch<{ success: boolean; error?: string }>(
+    `/api/configs/${configId}`,
+    apiKey,
+    { method: "DELETE" },
+  );
+  if (!response.success) {
+    throw new Error(response.error || "Failed to delete the assessor");
+  }
+}
+
+export async function deleteAssessorVersion(
+  apiKey: string,
+  configId: string,
+  version: number,
+): Promise<void> {
+  const response = await apiFetch<{ success: boolean; error?: string }>(
+    `/api/configs/${configId}/versions/${version}`,
+    apiKey,
+    { method: "DELETE" },
+  );
+  if (!response.success) {
+    throw new Error(response.error || "Failed to delete the version");
+  }
+}
+
+/** First save creates the config with its v1 blob; later saves append a version. */
+export async function saveAssessorVersion(
+  apiKey: string,
+  input: SaveAssessorVersionInput,
+): Promise<SaveAssessorVersionResult> {
+  const configBlob = versionDetailToBlob(input);
+  const commitMessage = input.commit_message || "Updated assessor";
+
+  if (!input.config_id) {
+    const created = await apiFetch<{
+      success: boolean;
+      data?: ConfigWithVersion;
+      error?: string;
+    }>("/api/configs", apiKey, {
+      method: "POST",
+      body: JSON.stringify({
+        name: input.name,
+        description: input.description ?? null,
+        tag: ASSESSMENT_TAG,
+        config_blob: configBlob,
+        commit_message: commitMessage,
+      }),
+    });
+    if (!created.success || !created.data) {
+      throw new Error(created.error || "Failed to create the assessor");
+    }
+    return {
+      config_id: created.data.id,
+      version: created.data.version.version,
+    };
+  }
+
+  const query = new URLSearchParams({ tag: ASSESSMENT_TAG });
+  const response = await apiFetch<ConfigVersionResponse>(
+    `/api/configs/${input.config_id}/versions?${query}`,
+    apiKey,
+    {
+      method: "POST",
+      body: JSON.stringify({
+        config_blob: configBlob,
+        commit_message: commitMessage,
+      }),
+    },
+  );
+  if (!response.success || !response.data) {
+    throw new Error(response.error || "Failed to save the assessor version");
+  }
+  return { config_id: input.config_id, version: response.data.version };
+}
diff --git a/app/lib/assessment/api/runs.ts b/app/lib/assessment/api/runs.ts
new file mode 100644
index 00000000..ed83c651
--- /dev/null
+++ b/app/lib/assessment/api/runs.ts
@@ -0,0 +1,84 @@
+/**
+ * Assessment run fetchers against the BATCH API. Network only, no React.
+ */
+import { apiFetch } from "@/app/lib/apiClient";
+import { ASSESSMENT_BATCH_ENDPOINT } from "@/app/lib/assessment/constants";
+import { flattenBatchDetail } from "@/app/lib/assessment/batchResults";
+import type {
+  AssessmentDetail,
+  AssessmentResultsPayload,
+  AssessmentRun,
+  CreateRunInput,
+  ListAssessmentsQuery,
+  ResultsTarget,
+} from "@/app/lib/types/assessment";
+
+type Envelope<T> = T | { data?: T };
+
+const unwrap = <T>(response: Envelope<T>, fallback: T): T =>
+  (response as { data?: T })?.data ?? (response as T) ?? fallback;
+
+function buildQuery(query: ListAssessmentsQuery): string {
+  const params = new URLSearchParams();
+  for (const [key, value] of Object.entries(query)) {
+    if (value !== undefined && value !== null) params.set(key, String(value));
+  }
+  const search = params.toString();
+  return search ? `?${search}` : "";
+}
+
+export async function listAssessments(
+  apiKey: string,
+  query: ListAssessmentsQuery = {},
+): Promise<AssessmentRun[]> {
+  const response = await apiFetch<Envelope<AssessmentRun[]>>(
+    `${ASSESSMENT_BATCH_ENDPOINT}${buildQuery(query)}`,
+    apiKey,
+  );
+  return Array.isArray(response) ? response : unwrap(response, []);
+}
+
+export async function getAssessmentDetail(
+  apiKey: string,
+  assessmentId: string,
+): Promise<AssessmentDetail> {
+  const response = await apiFetch<Envelope<AssessmentDetail>>(
+    `${ASSESSMENT_BATCH_ENDPOINT}/${assessmentId}`,
+    apiKey,
+  );
+  return unwrap(response, {} as AssessmentDetail);
+}
+
+export async function createRun(
+  apiKey: string,
+  input: CreateRunInput,
+): Promise<AssessmentRun> {
+  const response = await apiFetch<Envelope<{ assessment_id: string }>>(
+    ASSESSMENT_BATCH_ENDPOINT,
+    apiKey,
+    {
+      method: "POST",
+      body: JSON.stringify({
+        experiment_name: input.experiment_name,
+        config: { id: input.config_id, version: input.config_version },
+        input: { submission_doc_id: input.submission_id },
+      }),
+    },
+  );
+  const ack = unwrap(response, {} as { assessment_id: string });
+  // The submit ack is flat; read the full row back so callers get a list-shaped run.
+  return getAssessmentDetail(apiKey, ack.assessment_id);
+}
+
+export async function getRunResults(
+  apiKey: string,
+  target: ResultsTarget,
+): Promise<AssessmentResultsPayload> {
+  const detail = await getAssessmentDetail(apiKey, target.assessment_id);
+  return {
+    status: detail.status,
+    rows: flattenBatchDetail(detail),
+    total_items: detail.total_items ?? 0,
+    counts: detail.counts ?? null,
+  };
+}
diff --git a/app/lib/assessment/api/submissions.ts b/app/lib/assessment/api/submissions.ts
new file mode 100644
index 00000000..85d18071
--- /dev/null
+++ b/app/lib/assessment/api/submissions.ts
@@ -0,0 +1,71 @@
+/**
+ * Submission-file fetchers. Network only, no React.
+ *
+ * The backend paths still read `/datasets`; everything they return is a submission.
+ */
+import { apiFetch } from "@/app/lib/apiClient";
+import { DATASET_SAMPLE_ROW_LIMIT } from "@/app/lib/assessment/constants";
+import type {
+  AssessmentSubmission,
+  CreateSubmissionInput,
+  SubmissionPreviewPayload,
+} from "@/app/lib/types/assessment";
+
+const ENDPOINT = "/api/assessment/datasets";
+
+type Envelope<T> = T | { data?: T };
+
+const unwrap = <T>(response: Envelope<T>, fallback: T): T =>
+  (response as { data?: T })?.data ?? (response as T) ?? fallback;
+
+export async function listSubmissions(
+  apiKey: string,
+): Promise<AssessmentSubmission[]> {
+  const response = await apiFetch<Envelope<AssessmentSubmission[]>>(
+    ENDPOINT,
+    apiKey,
+  );
+  return Array.isArray(response) ? response : unwrap(response, []);
+}
+
+export async function getSubmissionPreview(
+  apiKey: string,
+  submissionId: string,
+): Promise<SubmissionPreviewPayload> {
+  const response = await apiFetch<Envelope<AssessmentSubmission>>(
+    `${ENDPOINT}/${submissionId}?limit_rows=${DATASET_SAMPLE_ROW_LIMIT}`,
+    apiKey,
+  );
+  const submission = unwrap(response, {} as AssessmentSubmission);
+  return {
+    total_items: submission.total_items,
+    preview: submission.preview ?? undefined,
+  };
+}
+
+export async function createSubmission(
+  apiKey: string,
+  { name, description, file }: CreateSubmissionInput,
+): Promise<AssessmentSubmission> {
+  const body = new FormData();
+  body.append("dataset_name", name);
+  if (description) body.append("description", description);
+  body.append("file", file);
+
+  const response = await apiFetch<Envelope<AssessmentSubmission>>(
+    ENDPOINT,
+    apiKey,
+    { method: "POST", body },
+  );
+  return unwrap(response, {} as AssessmentSubmission);
+}
+
+export async function deleteSubmission(
+  apiKey: string,
+  submissionId: string,
+): Promise<void> {
+  await apiFetch<null>(`${ENDPOINT}/${submissionId}`, apiKey, {
+    method: "DELETE",
+    acceptEmpty: true,
+  });
+}
diff --git a/app/lib/assessment/apiSource.ts b/app/lib/assessment/apiSource.ts
new file mode 100644
index 00000000..ae101be0
--- /dev/null
+++ b/app/lib/assessment/apiSource.ts
@@ -0,0 +1,35 @@
+/**
+ * API-backed assessment data source. Composition only — fetchers live in `api/`.
+ */
+import * as assessors from "@/app/lib/assessment/api/assessors";
+import * as runs from "@/app/lib/assessment/api/runs";
+import * as submissions from "@/app/lib/assessment/api/submissions";
+import type { AssessmentDataSource } from "@/app/lib/types/assessment";
+
+export function createApiAssessmentSource(
+  apiKey: string,
+): AssessmentDataSource {
+  return {
+    listSubmissions: () => submissions.listSubmissions(apiKey),
+    getSubmissionPreview: (submissionId) =>
+      submissions.getSubmissionPreview(apiKey, submissionId),
+    createSubmission: (input) => submissions.createSubmission(apiKey, input),
+    deleteSubmission: (submissionId) =>
+      submissions.deleteSubmission(apiKey, submissionId),
+
+    listAssessors: (page) => assessors.listAssessors(apiKey, page),
+    listAssessorVersions: (configId) =>
+      assessors.listAssessorVersions(apiKey, configId),
+    getAssessorVersion: (configId, version) =>
+      assessors.getAssessorVersion(apiKey, configId, version),
+    deleteAssessor: (configId) => assessors.deleteAssessor(apiKey, configId),
+    deleteAssessorVersion: (configId, version) =>
+      assessors.deleteAssessorVersion(apiKey, configId, version),
+    saveAssessorVersion: (input) =>
+      assessors.saveAssessorVersion(apiKey, input),
+
+    listAssessments: (query) => runs.listAssessments(apiKey, query),
+    createRun: (input) => runs.createRun(apiKey, input),
+    getRunResults: (target) => runs.getRunResults(apiKey, target),
+  };
+}
diff --git a/app/lib/assessment/batchResults.ts b/app/lib/assessment/batchResults.ts
new file mode 100644
index 00000000..fe77462e
--- /dev/null
+++ b/app/lib/assessment/batchResults.ts
@@ -0,0 +1,119 @@
+/**
+ * Flattens the nested BATCH result into the wide row the results table and detail
+ * modal already read. No React, no network.
+ *
+ * Kept on this side deliberately: `output.assessment` keys come from the user's own
+ * json_output_schema, and the `X_score`/`X_reason` pairing is this UI's convention,
+ * not something to freeze into a public API contract.
+ */
+import {
+  ASSESSMENT_OUTPUT_KEY_PREFIX,
+  MAX_OUTPUT_FLATTEN_DEPTH,
+  REASON_OBJECT_KEYS,
+  RESULT_REASON_SUFFIX,
+  RESULT_SCORE_SUFFIX,
+  SCORE_OBJECT_KEYS,
+  PREFILTER_DECISION_KEY,
+  PREFILTER_REASONING_KEY,
+} from "@/app/lib/assessment/constants";
+import type {
+  AssessmentDetail,
+  BatchItemOutput,
+  BatchResultRow,
+} from "@/app/lib/types/assessment";
+
+type FlatRow = Record<string, unknown>;
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+const pick = (source: Record<string, unknown>, keys: readonly string[]) =>
+  keys.map((key) => source[key]).find((value) => value !== undefined);
+
+const asCell = (value: unknown): unknown =>
+  Array.isArray(value) || isPlainObject(value) ? JSON.stringify(value) : value;
+
+/** `{score, reason}` under one key becomes the `X_score` / `X_reason` pair. */
+function writeScorePair(
+  target: FlatRow,
+  key: string,
+  value: Record<string, unknown>,
+): boolean {
+  const score = pick(value, SCORE_OBJECT_KEYS);
+  if (score === undefined) return false;
+
+  target[`${key}${RESULT_SCORE_SUFFIX}`] = score;
+  const reason = pick(value, REASON_OBJECT_KEYS);
+  if (reason !== undefined) {
+    target[`${key}${RESULT_REASON_SUFFIX}`] = reason;
+  }
+  return true;
+}
+
+function flattenOutput(
+  target: FlatRow,
+  output: Record<string, unknown>,
+  taken: Set<string>,
+  prefix = "",
+  depth = 0,
+): void {
+  for (const [rawKey, value] of Object.entries(output)) {
+    const key = `${prefix}${rawKey}`;
+
+    if (isPlainObject(value)) {
+      if (writeScorePair(target, key, value)) continue;
+      if (depth < MAX_OUTPUT_FLATTEN_DEPTH) {
+        flattenOutput(target, value, taken, `${key}_`, depth + 1);
+        continue;
+      }
+    }
+
+    // An output key colliding with an input column keeps both, prefixed.
+    const safeKey = taken.has(key)
+      ? `${ASSESSMENT_OUTPUT_KEY_PREFIX}${key}`
+      : key;
+    target[safeKey] = asCell(value);
+  }
+}
+
+function writeAssessment(target: FlatRow, output: BatchItemOutput): void {
+  const assessment = output.assessment;
+  if (assessment === null || assessment === undefined) return;
+
+  if (typeof assessment === "string") {
+    target.assessment_output = assessment;
+    return;
+  }
+  flattenOutput(target, assessment, new Set(Object.keys(target)));
+}
+
+function writePreFilter(target: FlatRow, output: BatchItemOutput): void {
+  const verdict = output.pre_filter?.topic_relevance;
+  if (!verdict) return;
+
+  target[PREFILTER_DECISION_KEY] = verdict.verdict ? "pass" : "fail";
+  target[PREFILTER_REASONING_KEY] = verdict.reasoning;
+}
+
+function rowStatus(row: BatchResultRow): string {
+  if (row.error) return "error";
+  if (row.output.pre_filter?.topic_relevance?.verdict === false)
+    return "filtered";
+  return row.output.assessment == null ? "processing" : "assessed";
+}
+
+/** One flat record per row: input columns first, then verdicts, then the output. */
+export function flattenBatchRow(row: BatchResultRow): FlatRow {
+  const flat: FlatRow = { ...(row.input ?? {}) };
+  writePreFilter(flat, row.output);
+  writeAssessment(flat, row.output);
+
+  flat.row_index = row.row_index;
+  flat.error = row.error ?? null;
+  flat.result_status = rowStatus(row);
+  return flat;
+}
+
+export function flattenBatchDetail(detail: AssessmentDetail): FlatRow[] {
+  return detail.items.map(flattenBatchRow);
+}
diff --git a/app/lib/assessment/configBlob.ts b/app/lib/assessment/configBlob.ts
new file mode 100644
index 00000000..d3222a7a
--- /dev/null
+++ b/app/lib/assessment/configBlob.ts
@@ -0,0 +1,240 @@
+/**
+ * Maps between the wizard's `AssessorVersionDetail` and the ASSESSMENT config blob
+ * the backend stores. Pure — no React, no network.
+ *
+ * `input_schema` is the only record of a column's type, so it carries the
+ * attachments both ways: flattening it to text loses them on reopen.
+ */
+import type {
+  AssessorModelSelection,
+  AssessorVersionDetail,
+  Attachment,
+  ModelParams,
+  PrefilterConfig,
+  PromptFieldType,
+} from "@/app/lib/types/assessment";
+import type { ProviderType } from "@/app/lib/types/configs";
+
+/** The stored blob. Loosely typed: the config service owns its exact shape. */
+export type AssessmentBlob = Record<string, unknown>;
+
+interface InputColumn {
+  type: PromptFieldType;
+  format: "url" | "base64" | null;
+  /** `true` rejects a row where the column is absent or blank; backend default is `false`. */
+  strict?: boolean;
+}
+
+const PLACEHOLDER_RE = /\{([A-Za-z_]\w*)\}/g;
+
+const asRecord = (value: unknown): Record<string, unknown> =>
+  typeof value === "object" && value !== null
+    ? (value as Record<string, unknown>)
+    : {};
+
+const asString = (value: unknown, fallback = ""): string =>
+  typeof value === "string" ? value : fallback;
+
+/** Params the wizard owns; the rest of the blob's params are structural. */
+const STRUCTURAL_PARAM_KEYS = new Set([
+  "model",
+  "submission",
+  "instructions",
+  "json_output_schema",
+]);
+
+function modelParams(params: Record<string, unknown>): ModelParams {
+  const out: ModelParams = {};
+  for (const [key, value] of Object.entries(params)) {
+    if (STRUCTURAL_PARAM_KEYS.has(key)) continue;
+    if (typeof value === "string" || typeof value === "number")
+      out[key] = value;
+  }
+  return out;
+}
+
+function columnTypes(blob: AssessmentBlob): Record<string, InputColumn> {
+  return Object.fromEntries(
+    Object.entries(asRecord(blob.input_schema)).map(([name, spec]) => {
+      const column = asRecord(spec);
+      return [
+        name,
+        {
+          type: asString(column.type, "text") as PromptFieldType,
+          format: (column.format as "url" | "base64" | null) ?? null,
+          strict: column.strict === true,
+        },
+      ];
+    }),
+  );
+}
+
+function attachmentsFrom(columns: Record<string, InputColumn>): Attachment[] {
+  return Object.entries(columns)
+    .filter(([, column]) => column.type !== "text")
+    .map(([name, column]) => ({
+      column: name,
+      type: column.type as "image" | "pdf",
+      format: column.format ?? "url",
+    }));
+}
+
+function placeholders(template: string): string[] {
+  return [
+    ...new Set([...template.matchAll(PLACEHOLDER_RE)].map((match) => match[1])),
+  ];
+}
+
+function prefilterSelection(
+  prefilters: Record<string, unknown>,
+): AssessorModelSelection | null {
+  const topic = asRecord(prefilters.topic_relevance);
+  if (!Object.keys(topic).length) return null;
+
+  const params = asRecord(topic.params);
+  return {
+    provider: asString(topic.provider, "openai") as ProviderType,
+    model: asString(params.model),
+    params: modelParams(params),
+  };
+}
+
+function prefilterConfig(
+  prefilters: Record<string, unknown>,
+  columns: Record<string, InputColumn>,
+): PrefilterConfig | null {
+  const topic = asRecord(prefilters.topic_relevance);
+  if (!Object.keys(topic).length) return null;
+
+  const params = asRecord(topic.params);
+  // No stored template means the pre-filter read every column.
+  const referenced = params.submission
+    ? placeholders(asString(params.submission))
+    : Object.keys(columns);
+  const isAttachment = (name: string) =>
+    Boolean(columns[name]) && columns[name].type !== "text";
+
+  return {
+    topic_relevance: {
+      columns: referenced.filter((name) => !isAttachment(name)),
+      attachment_columns: referenced.filter(isAttachment),
+      prompt: asString(params.instructions),
+    },
+  };
+}
+
+export function blobToVersionDetail(
+  configId: string,
+  version: number,
+  commitMessage: string | null,
+  blob: AssessmentBlob,
+): AssessorVersionDetail {
+  const assessment = asRecord(blob.assessment);
+  const params = asRecord(assessment.params);
+  const prefilters = asRecord(blob.pre_filters);
+  const columns = columnTypes(blob);
+
+  return {
+    config_id: configId,
+    version,
+    commit_message: commitMessage,
+    provider: asString(assessment.provider, "openai") as ProviderType,
+    model: asString(params.model),
+    params: modelParams(params),
+    submission_id: null,
+    system_instruction: asString(params.instructions),
+    prompt_template: asString(params.submission),
+    attachments: attachmentsFrom(columns),
+    strict_columns: Object.entries(columns)
+      .filter(([, column]) => column.strict)
+      .map(([name]) => name),
+    prefilter_config: prefilterConfig(prefilters, columns),
+    prefilter_model: prefilterSelection(prefilters),
+    output_schema:
+      (params.json_output_schema as Record<string, unknown> | undefined) ??
+      null,
+  };
+}
+
+/** Only the columns the prompts reference; the backend drops the rest of the sheet. */
+function inputSchema(
+  referenced: string[],
+  attachments: Attachment[],
+  strictColumns: string[],
+): Record<string, InputColumn> {
+  const byColumn = new Map(attachments.map((item) => [item.column, item]));
+  const strict = new Set(strictColumns);
+  const names = [...new Set([...referenced, ...byColumn.keys()])];
+
+  return Object.fromEntries(
+    names.map((name) => {
+      const attachment = byColumn.get(name);
+      const column: InputColumn =
+        attachment && attachment.type !== "mixed"
+          ? { type: attachment.type, format: attachment.format ?? "url" }
+          : { type: "text", format: null };
+      return [name, strict.has(name) ? { ...column, strict: true } : column];
+    }),
+  );
+}
+
+/** The pre-filter's own template, so it reads the chosen columns and no others. */
+function prefilterTemplate(columns: string[]): string {
+  return columns.map((name) => `${name}: {${name}}`).join("\n");
+}
+
+/** Columns the prompts read: the assessment template's placeholders plus the pre-filter's picks. */
+function referencedColumns(
+  detail: Omit<AssessorVersionDetail, "config_id" | "version">,
+): string[] {
+  const topic = detail.prefilter_config?.topic_relevance;
+  return [
+    ...placeholders(detail.prompt_template),
+    ...(topic?.columns ?? []),
+    ...(topic?.attachment_columns ?? []),
+  ];
+}
+
+export function versionDetailToBlob(
+  detail: Omit<AssessorVersionDetail, "config_id" | "version">,
+): AssessmentBlob {
+  const topic = detail.prefilter_config?.topic_relevance;
+  const blob: AssessmentBlob = {
+    input_schema: inputSchema(
+      referencedColumns(detail),
+      detail.attachments,
+      detail.strict_columns,
+    ),
+    assessment: {
+      provider: detail.provider,
+      type: "text",
+      params: {
+        ...detail.params,
+        model: detail.model,
+        instructions: detail.system_instruction,
+        submission: detail.prompt_template,
+        ...(detail.output_schema
+          ? { json_output_schema: detail.output_schema }
+          : {}),
+      },
+    },
+  };
+
+  if (topic) {
+    const referenced = [...topic.columns, ...(topic.attachment_columns ?? [])];
+    blob.pre_filters = {
+      topic_relevance: {
+        provider: detail.prefilter_model?.provider ?? detail.provider,
+        params: {
+          ...(detail.prefilter_model?.params ?? {}),
+          model: detail.prefilter_model?.model ?? detail.model,
+          instructions: topic.prompt,
+          ...(referenced.length
+            ? { submission: prefilterTemplate(referenced) }
+            : {}),
+        },
+      },
+    };
+  }
+  return blob;
+}
diff --git a/app/lib/assessment/constants.ts b/app/lib/assessment/constants.ts
index a3bae083..9fbc8e6e 100644
--- a/app/lib/assessment/constants.ts
+++ b/app/lib/assessment/constants.ts
@@ -1,13 +1,8 @@
 import type {
-  AssessmentTab,
-  ColumnRole,
   PostProcessingConfig,
   PostProcessingFilterRule,
-  ResultsCounts,
   ResultTone,
-  RoleOption,
   SchemaPropertyType,
-  StatusFilter,
   Step,
 } from "@/app/lib/types/assessment";
 
@@ -16,7 +11,37 @@ export const ASSESSMENT_FEATURE_FLAG = ASSESSMENT_TAG;
 export const ASSESSMENT_CONFIG_TAG = ASSESSMENT_TAG;
 export const ASSESSMENT_CONFIG_VERSION_PAGE_SIZE = 8;
 
+export const ASSESSORS_PER_PAGE = 8;
+/** Typing settles before the assessors search hits the API. */
+export const ASSESSOR_SEARCH_DEBOUNCE_MS = 300;
+export const RUNS_PER_PAGE = 4;
+export const PAGER_WINDOW_SIZE = 3;
+
+/** One cadence for the runs list and an open results tab. A batch run takes
+ * minutes, and each detail poll streams two objects out of storage. */
 export const RESULTS_POLL_INTERVAL_MS = 60_000;
+
+export const ASSESSMENT_BATCH_ENDPOINT = "/api/assessment/batch";
+export const TERMINAL_ASSESSMENT_STATUSES: ReadonlySet<string> = new Set([
+  "completed",
+  "completed_with_errors",
+  "failed",
+]);
+
+/** Step 4's preview is a sanity check on the chosen set, not a data browser. */
+export const RUN_PREVIEW_ROW_LIMIT = 10;
+
+/** Result-row key conventions the table and the detail modal both read. */
+export const RESULT_SCORE_SUFFIX = "_score";
+export const RESULT_REASON_SUFFIX = "_reason";
+export const PREFILTER_DECISION_KEY = "prefilter_decision";
+export const PREFILTER_REASONING_KEY = "prefilter_reasoning";
+/** Keys a nested `{score, reason}` output object may use. */
+export const SCORE_OBJECT_KEYS = ["score", "value", "rating"] as const;
+export const REASON_OBJECT_KEYS = ["reason", "reasoning", "rationale"] as const;
+/** Applied when an output key collides with an input column. */
+export const ASSESSMENT_OUTPUT_KEY_PREFIX = "assessment_";
+export const MAX_OUTPUT_FLATTEN_DEPTH = 2;
 export const SPREADSHEET_STATE_STORAGE_PREFIX = "kaapi_sheet_state_";
 export const SPREADSHEET_STATE_SCHEMA_VERSION = 1;
 export const SPREADSHEET_STATE_DEBOUNCE_MS = 800;
@@ -42,33 +67,12 @@ export const COMPLETED_ASSESSMENT_STATUSES: ReadonlySet<string> = new Set([
 ]);
 
 // Friendly labels for pipeline stages (backend Stage enum values).
+/** The BATCH pipeline has two stages, and a run without a pre-filter has one. */
 export const STAGE_LABELS: Record<string, string> = {
-  PRE_FILTER_TOPIC_RELEVANCE: "Topic Relevance",
-  PRE_FILTER_DUPLICATE_DETECTION: "Duplicate Detection",
-  L2_ASSESSMENT: "Assessment",
+  topic_relevance: "Pre-filter",
+  assessment: "Assessment",
 };
 
-export const STATUS_FILTER_OPTIONS: Array<{
-  value: StatusFilter;
-  label: string;
-}> = [
-  { value: "all", label: "All Status" },
-  { value: "processing", label: "Processing" },
-  { value: "completed", label: "Completed" },
-  { value: "failed", label: "Failed" },
-];
-
-export const RESULT_SUMMARY_ITEMS: Array<{
-  key: keyof ResultsCounts;
-  label: string;
-  tone: ResultTone;
-}> = [
-  { key: "total", label: "Total", tone: "default" },
-  { key: "processing", label: "Processing", tone: "warning" },
-  { key: "completed", label: "Completed", tone: "success" },
-  { key: "failed", label: "Failed", tone: "error" },
-];
-
 export const STATUS_BADGE_CLASSES: Record<ResultTone, string> = {
   default: "bg-status-default-bg text-status-default-text",
   warning: "bg-status-warning-bg text-status-warning-text",
@@ -83,19 +87,12 @@ export const ASSESSMENT_CARD_CLASSES: Record<ResultTone, string> = {
   error: "border-l-status-error",
 };
 
-export const SUMMARY_BADGE_CLASSES: Record<ResultTone, string> = {
-  default: "bg-bg-secondary text-text-primary",
-  warning: "bg-bg-secondary text-status-warning-text",
-  success: "bg-bg-secondary text-status-success-text",
-  error: "bg-bg-secondary text-status-error-text",
-};
-
-export const ASSESSMENT_CONFIG_STEPS: Step[] = [
-  { id: 1, label: "Mapper" },
-  { id: 2, label: "Eliminatory (opt.)" },
-  { id: 3, label: "Evaluation" },
-  { id: 4, label: "Post Processing (opt.)" },
-  { id: 5, label: "Review" },
+/** The v2 flow strip, shown on Home (inert) and inside the wizard (live). */
+export const ASSESSMENT_WIZARD_STEPS: Step[] = [
+  { id: 1, label: "Submission" },
+  { id: 2, label: "Pre-filter (opt.)" },
+  { id: 3, label: "Assessment" },
+  { id: 4, label: "Run assessment" },
 ];
 
 export const SCHEMA_TYPE_OPTIONS: Array<{
@@ -110,99 +107,9 @@ export const SCHEMA_TYPE_OPTIONS: Array<{
   { value: "object", label: "Group" },
 ];
 
-export const ASSESSMENT_ROLE_OPTION_MAP: Record<ColumnRole, RoleOption> = {
-  text: {
-    value: "text",
-    label: "Text",
-  },
-  attachment: {
-    value: "attachment",
-    label: "Attachment",
-  },
-  ground_truth: {
-    value: "ground_truth",
-    label: "Ground Truth",
-  },
-  unmapped: {
-    value: "unmapped",
-    label: "Skip",
-  },
-};
-
-export const ASSESSMENT_ROLE_OPTIONS = Object.values(
-  ASSESSMENT_ROLE_OPTION_MAP,
-);
-
-export const REVIEW_SECTIONS = {
-  dataset: 1,
-  columns: 2,
-  prefilter: 3,
-  input: 4,
-  configs: 5,
-  schema: 6,
-  postProcessing: 7,
-} as const;
-
-export const INITIAL_REVIEW_OPEN_SECTIONS = new Set<number>(
-  Object.values(REVIEW_SECTIONS),
-);
-
-export const DEFAULT_SYSTEM_PROMPT = "(not set)";
-export const DEFAULT_USER_PROMPT =
-  "(not set: backend concatenates mapped text columns)";
-
-export const DEFAULT_PREFILTER_TOPIC_RELEVANCE_PROMPT = `You are a pre-filter screener for the School Innovation Marathon (SIM), a national competition for Indian school students (grades 6–12).
-
-You act as the FIRST FILTER only. Novelty scoring happens here as a basic gate; deeper evaluation happens later.
-
-PHILOSOPHY: Inclusive. Maximize idea retention. Reject only when the rules clearly demand it. Never penalize for weak language, poor grammar, regional languages (Hindi, Telugu, Tamil, etc.), or AI-assisted writing. Decisions must be evidence-based — use only the provided inputs and never assume missing details.
-
-INPUTS: Each submission has TEXT columns and may also have ATTACHMENTS (images or PDFs). The attached document(s) are provided alongside the text.
-
-STEP 1 — COMPREHENSION
-Extract the idea from the text columns and from any attachments.
-- If the text is unclear, use the attachments to understand the idea.
-- If the attachments are unclear, rely on the text.
-
-STEP 2 — TOPIC RELEVANCE CHECK
-Assess each input column independently as relevant or irrelevant:
-  relevant = the column (or document) describes a real-world problem/solution attempt, however simple
-  irrelevant = blank, gibberish, a scientific fact, pure personal opinion, or no connection to any innovation context
-
-DOCUMENT CONDITION (apply ONLY when an attachment/document is present for the row):
-- Judge the document's relevance from its actual content (the image or PDF), not from its filename or URL.
-- A document is relevant if it shows or supports the idea — e.g. a prototype photo, diagram, poster, report, or demonstration tied to the problem/solution.
-- A document is irrelevant if it is blank, unreadable, unrelated to the submission, or shows no connection to any innovation context.
-- If NO document is present for the row, ignore document relevance entirely — base the decision on the text columns only. Do not penalize a submission for missing attachments.
-
-CASE 1 — ALL present inputs (text columns and any document) are irrelevant → REJECT immediately. Skip novelty scoring.
-CASE 2 — ANY input (a text column OR the document) is relevant → proceed to novelty scoring.
-
-STEP 3 — NOVELTY SCORING (Case 2 only)
-Score novelty 1–10 based on how original the solution mechanism is. When a document is present, factor what it reveals about the idea into this judgement:
-
-1–2: Generic statement with no mechanism ("use water carefully", "spread awareness", "recycle more")
-3–4: Widely-known, off-the-shelf existing product or solution with no meaningful new application
-     (e.g. standard homework reminder app, basic recycling bin, existing commercial pill dispenser)
-5–6: Existing concept applied to a new specific context, OR combines known elements in a non-obvious way for a specific user group
-     (e.g. laser mirror alarm for grid infrastructure theft, Arduino rain sensor for clothes protection, smart traffic gate system)
-7–8: Significant new mechanism or integration not commonly seen
-     (e.g. camera app reading medicine labels in regional languages with dosage alerts)
-9–10: Highly original novel design
-
-DECISION RULE:
-  Novelty ≥ 5 → ACCEPT
-  Novelty ≤ 4 → REJECT
-
-RULES:
-- Never reject because of poor spelling, mixed languages, short text, AI-like writing, or a missing attachment
-- If the idea is unclear but shows a genuine attempt at problem + solution → lean ACCEPT
-- A real problem with any proposed mechanism (even common) scores at least 5
-- Score novelty relative to what is expected from a school student, not a PhD researcher
-- When borderline between two scores, pick the higher one
-- A working prototype does NOT raise novelty — novelty is about the idea, not execution`;
-
-export const DATASET_LEFT_PANEL_CLASSES = "w-[40%] min-w-[360px] max-w-[500px]";
+/** The create-submission form sits to the right of the list, at a fixed width. */
+export const SUBMISSION_FORM_PANEL_CLASSES =
+  "w-[40%] min-w-[360px] max-w-[500px]";
 export const ALLOWED_DATASET_EXTENSIONS = [".csv", ".xlsx", ".xls"] as const;
 
 export const JSON_TOKEN_CLASSES = {
@@ -241,22 +148,4 @@ export function emptyPostProcessingConfig(): PostProcessingConfig {
   return { computed_columns: [], sort: [], filter: [] };
 }
 
-export const DOWNLOAD_MENU_WIDTH = 144;
-
 export const UNIVER_MUTATION_TYPE = 2;
-
-export const CONFIGS_VISIBLE_BATCH_SIZE = 2;
-
-export const PAGE_TABS: ReadonlyArray<AssessmentTab> = [
-  { id: "datasets", label: "Datasets" },
-  { id: "config", label: "Config" },
-  { id: "results", label: "Result" },
-];
-
-export const MAX_CONFIGS = 4;
-
-export const ATTACHMENT_FORMATS: Record<string, string[]> = {
-  mixed: ["url", "base64"],
-  image: ["url", "base64"],
-  pdf: ["url", "base64"],
-};
diff --git a/app/lib/assessment/draft.ts b/app/lib/assessment/draft.ts
new file mode 100644
index 00000000..45be2eed
--- /dev/null
+++ b/app/lib/assessment/draft.ts
@@ -0,0 +1,216 @@
+/**
+ * The wizard draft: its empty shape, how a saved version maps into it, and how
+ * it serializes — for the "has anything actually changed?" check and for the
+ * save payload. Whitespace-only edits must never count as a change. No React.
+ */
+import {
+  fieldTypesFromAttachments,
+  fromWireTemplate,
+  toWireTemplate,
+} from "@/app/lib/assessment/promptTokens";
+import { fromJsonSchema } from "@/app/lib/utils/outputSchema";
+import {
+  buildDefaultParams,
+  getDefaultModelForProvider,
+} from "@/app/lib/data/assessmentModels";
+import { schemaToJsonSchema } from "@/app/lib/utils/assessment";
+import type {
+  AssessorModelSelection,
+  AssessorVersionDetail,
+  PromptZones,
+  SaveAssessorVersionInput,
+  WizardDraft,
+} from "@/app/lib/types/assessment";
+import type { ProviderType } from "@/app/lib/types/configs";
+
+const EMPTY_ZONES: PromptZones = { instructions: "", submission: "" };
+const DEFAULT_PROVIDER: ProviderType = "openai";
+
+export function defaultModel(): AssessorModelSelection {
+  const model = getDefaultModelForProvider(DEFAULT_PROVIDER);
+  return {
+    provider: DEFAULT_PROVIDER,
+    model,
+    params: buildDefaultParams(model),
+  };
+}
+
+export function emptyDraft(): WizardDraft {
+  return {
+    prefilterEnabled: false,
+    prefilter: EMPTY_ZONES,
+    assessment: EMPTY_ZONES,
+    fieldTypes: {},
+    fieldStrict: {},
+    outputSchema: [],
+    models: { prefilter: defaultModel(), assessment: defaultModel() },
+  };
+}
+
+export function draftFromVersion(detail: AssessorVersionDetail): WizardDraft {
+  const relevance = detail.prefilter_config?.topic_relevance;
+  const fieldTypes = fieldTypesFromAttachments(detail.attachments);
+
+  return {
+    prefilterEnabled: Boolean(relevance),
+    prefilter: {
+      instructions: relevance?.prompt ?? "",
+      submission: (relevance?.columns ?? [])
+        .map((column) => `${column}: @${column}`)
+        .join("\n"),
+    },
+    assessment: {
+      instructions: detail.system_instruction,
+      submission: fromWireTemplate(detail.prompt_template, detail.attachments),
+    },
+    fieldTypes,
+    fieldStrict: Object.fromEntries(
+      detail.strict_columns.map((column) => [column, true]),
+    ),
+    outputSchema: detail.output_schema
+      ? fromJsonSchema(detail.output_schema)
+      : [],
+    models: {
+      assessment: {
+        provider: detail.provider,
+        model: detail.model,
+        params: detail.params,
+      },
+      prefilter: detail.prefilter_model ?? defaultModel(),
+    },
+  };
+}
+
+export function normalizeWhitespace(value: string): string {
+  return value.replace(/\s+/g, " ").trim();
+}
+
+/** The columns marked required, sorted so two drafts compare by content. */
+export function strictColumns(fieldStrict: Record<string, boolean>): string[] {
+  return Object.keys(fieldStrict)
+    .filter((name) => fieldStrict[name])
+    .sort();
+}
+
+export function serializeDraft(
+  draft: WizardDraft,
+  submissionId: string,
+): string {
+  return JSON.stringify({
+    submissionId,
+    prefilterEnabled: draft.prefilterEnabled,
+    prefilter: {
+      instructions: normalizeWhitespace(draft.prefilter.instructions),
+      submission: normalizeWhitespace(draft.prefilter.submission),
+    },
+    assessment: {
+      instructions: normalizeWhitespace(draft.assessment.instructions),
+      submission: normalizeWhitespace(draft.assessment.submission),
+    },
+    fieldTypes: Object.entries(draft.fieldTypes)
+      .filter(([, type]) => type !== "text")
+      .sort(),
+    strict: strictColumns(draft.fieldStrict),
+    schema: draft.outputSchema
+      .filter((field) => field.name.trim())
+      .map((field) => [field.name.trim(), field.type, field.isArray]),
+    models: draft.models,
+  });
+}
+
+/** True when the assessment prompt has content — the bar for a brand-new assessor. */
+export function hasAssessmentContent(draft: WizardDraft): boolean {
+  return Boolean(
+    normalizeWhitespace(draft.assessment.instructions) ||
+    normalizeWhitespace(draft.assessment.submission),
+  );
+}
+
+/** Draft → the save payload, in the wire shapes the backend already accepts. */
+export function draftToVersionInput(params: {
+  draft: WizardDraft;
+  submissionId: string;
+  submissionColumns: string[];
+  configId: string | null;
+  name: string;
+  commitMessage: string;
+}): SaveAssessorVersionInput {
+  const {
+    draft,
+    submissionId,
+    submissionColumns,
+    configId,
+    name,
+    commitMessage,
+  } = params;
+  const { template, attachments } = toWireTemplate(
+    draft.assessment.submission,
+    draft.fieldTypes,
+  );
+  const prefilter = toWireTemplate(
+    draft.prefilter.submission,
+    draft.fieldTypes,
+  );
+
+  return {
+    config_id: configId,
+    name,
+    input_columns: submissionColumns,
+    commit_message: commitMessage || null,
+    provider: draft.models.assessment.provider,
+    model: draft.models.assessment.model,
+    params: draft.models.assessment.params,
+    submission_id: submissionId || null,
+    system_instruction: draft.assessment.instructions,
+    prompt_template: template,
+    attachments,
+    strict_columns: strictColumns(draft.fieldStrict),
+    prefilter_config: draft.prefilterEnabled
+      ? {
+          topic_relevance: {
+            columns: prefilterColumns(prefilter.template),
+            attachment_columns: prefilter.attachments.map(
+              (item) => item.column,
+            ),
+            prompt: draft.prefilter.instructions,
+          },
+        }
+      : null,
+    prefilter_model: draft.prefilterEnabled ? draft.models.prefilter : null,
+    output_schema: schemaToJsonSchema(draft.outputSchema) as Record<
+      string,
+      unknown
+    > | null,
+  };
+}
+
+/** The columns the pre-filter prompt references, in `{Column}` wire form. */
+function prefilterColumns(template: string): string[] {
+  return [
+    ...new Set([...template.matchAll(/\{([A-Za-z_]\w*)\}/g)].map((m) => m[1])),
+  ];
+}
+
+/** The version a save produced, for re-baselining without a refetch. */
+export function versionDetailFrom(
+  input: SaveAssessorVersionInput,
+  configId: string,
+  version: number,
+): AssessorVersionDetail {
+  return {
+    config_id: configId,
+    version,
+    commit_message: input.commit_message,
+    provider: input.provider,
+    model: input.model,
+    params: input.params,
+    submission_id: input.submission_id,
+    system_instruction: input.system_instruction,
+    prompt_template: input.prompt_template,
+    attachments: input.attachments,
+    strict_columns: input.strict_columns,
+    prefilter_config: input.prefilter_config,
+    prefilter_model: input.prefilter_model,
+    output_schema: input.output_schema,
+  };
+}
diff --git a/app/lib/assessment/home.ts b/app/lib/assessment/home.ts
new file mode 100644
index 00000000..85ca25c8
--- /dev/null
+++ b/app/lib/assessment/home.ts
@@ -0,0 +1,117 @@
+/**
+ * Pure derivations for the Assessment Home surface: run rows, the runs filter
+ * vocabulary, and assessor search. No React, no network.
+ */
+import {
+  RUN_FILTER_ALL,
+  type AssessmentRun,
+  type AssessorSummary,
+  type HomeRunRow,
+  type RunFilterValue,
+} from "@/app/lib/types/assessment";
+import {
+  getStageProgress,
+  isActiveStatus,
+  type StageProgress,
+} from "@/app/lib/assessment/results";
+
+export const assessorFilterValue = (configId: string) => `a:${configId}`;
+export const versionFilterValue = (configId: string, version: number) =>
+  `v:${configId}:${version}`;
+
+/** One execution per assessment, so the row reads its config pin off the run. */
+export function buildHomeRunRows(
+  assessments: AssessmentRun[],
+  assessors: AssessorSummary[],
+): HomeRunRow[] {
+  const byId = new Map(assessors.map((item) => [item.id, item]));
+
+  return assessments.map((assessment) => toRunRow(assessment, byId));
+}
+
+/** A run's rail is its own stages — the API reports what this run actually has. */
+function stagesOf(assessment: AssessmentRun): StageProgress[] {
+  const stages = assessment.stages ?? [];
+  if (!assessment.stage || stages.length === 0) return [];
+  return getStageProgress({
+    stage: assessment.stage,
+    stage_status: assessment.stage_status ?? null,
+    pipeline: {
+      stages: stages.map((stage, index) => ({ stage, order: index + 1 })),
+    },
+  });
+}
+
+function assessorFacts(assessor: AssessorSummary | undefined): {
+  assessorName: string;
+} {
+  return { assessorName: assessor?.name ?? "Deleted assessor" };
+}
+
+function toRunRow(
+  assessment: AssessmentRun,
+  assessors: Map<string, AssessorSummary>,
+): HomeRunRow {
+  const configId = assessment.config?.id ?? "";
+  const assessor = assessors.get(configId);
+
+  return {
+    assessment,
+    ...assessorFacts(assessor),
+    version: assessment.config?.version ?? null,
+    cost: null,
+    stages: stagesOf(assessment),
+    isActive: isActiveStatus(assessment.status),
+  };
+}
+
+/**
+ * Version entries come from the runs themselves: an assessor's version list is
+ * only fetched when its row is opened, and a version nothing ran under would
+ * filter to an empty table anyway.
+ */
+export function buildRunFilterOptions(
+  assessors: AssessorSummary[],
+  assessments: AssessmentRun[],
+): { value: string; label: string }[] {
+  const options = [{ value: RUN_FILTER_ALL, label: "All runs" }];
+
+  assessors.forEach((assessor) => {
+    options.push({
+      value: assessorFilterValue(assessor.id),
+      label: `${assessor.name} — all versions`,
+    });
+
+    const versions = [
+      ...new Set(
+        assessments
+          .filter((run) => run.config?.id === assessor.id)
+          .map((run) => run.config?.version)
+          .filter((version): version is number => typeof version === "number"),
+      ),
+    ].sort((left, right) => right - left);
+
+    versions.forEach((version) => {
+      options.push({
+        value: versionFilterValue(assessor.id, version),
+        label: `${assessor.name} v${version}`,
+      });
+    });
+  });
+
+  return options;
+}
+
+export function matchesRunFilter(
+  row: HomeRunRow,
+  filter: RunFilterValue,
+): boolean {
+  if (filter === RUN_FILTER_ALL) return true;
+  const config = row.assessment.config;
+  if (!config?.id) return false;
+
+  if (filter.startsWith("a:")) return config.id === filter.slice(2);
+
+  const [, configId, version] = filter.split(":");
+  return config.id === configId && config.version === Number(version);
+}
diff --git a/app/lib/assessment/promptCopy.ts b/app/lib/assessment/promptCopy.ts
new file mode 100644
index 00000000..6e005be3
--- /dev/null
+++ b/app/lib/assessment/promptCopy.ts
@@ -0,0 +1,35 @@
+/** Zone labels, hints and placeholders for the prompt editor steps. */
+import type { PromptZoneCopy, PromptZoneId } from "@/app/lib/types/assessment";
+
+/** Both zones of a step are the same height, so the card reads as one document. */
+export const PREFILTER_ZONE_MIN_HEIGHT = 200;
+export const ASSESSMENT_ZONE_MIN_HEIGHT = 280;
+
+export const PREFILTER_ZONE_COPY: Record<PromptZoneId, PromptZoneCopy> = {
+  instructions: {
+    label: "Instructions",
+    hint: "Same for every submission — what to Accept, what to Reject",
+    placeholder:
+      "Describe your accept/reject criteria. Example: Accept genuine student innovation submissions; reject empty, copied, or unrelated text.",
+  },
+  submission: {
+    label: "Submission",
+    hint: "Per submission row — type @ to reference submission columns · ? optional · * required",
+    placeholder: "Type @ to reference submission columns, e.g. @Problem",
+  },
+};
+
+export const ASSESSMENT_ZONE_COPY: Record<PromptZoneId, PromptZoneCopy> = {
+  instructions: {
+    label: "Instructions",
+    hint: "Same for every submission — rubric, marking scheme, model answers",
+    placeholder:
+      "Tell the AI who it is and how to assess. Example: You are an experienced teacher assessing scanned answer sheets for a Class 8 Social Science paper (4 questions, 20 marks)…",
+  },
+  submission: {
+    label: "Submission",
+    hint: "Per submission row — type @ to reference submission columns · ? optional · * required",
+    placeholder:
+      "Lay out one submission. Type @ to reference submission columns, e.g. @Problem",
+  },
+};
diff --git a/app/lib/assessment/promptTokens.ts b/app/lib/assessment/promptTokens.ts
new file mode 100644
index 00000000..fdaab59e
--- /dev/null
+++ b/app/lib/assessment/promptTokens.ts
@@ -0,0 +1,197 @@
+/**
+ * Prompt tokens: the one place that knows `@Column` (text), `<Column>` (attachment)
+ * and the legacy `{Column}` form, how they highlight, how they resolve against a
+ * sample row, and how they convert to and from the wire payload. No React.
+ */
+import type {
+  Attachment,
+  PromptFieldType,
+  PromptSegment,
+  PreviewBlock,
+  PreviewBlockType,
+  PromptZones,
+} from "@/app/lib/types/assessment";
+
+export const TOKEN_RE = /@[A-Za-z_]\w*|\{[A-Za-z_]\w*\}|<[A-Za-z_]\w*>/g;
+
+export const PROMPT_FIELD_TYPE_LABELS: Record<PromptFieldType, string> = {
+  text: "Text",
+  image: "Image (link)",
+  pdf: "PDF (link)",
+};
+
+export function tokenName(raw: string): string {
+  return raw.startsWith("@") ? raw.slice(1) : raw.slice(1, -1);
+}
+
+export function fieldTypeOf(
+  fieldTypes: Record<string, PromptFieldType>,
+  name: string,
+): PromptFieldType {
+  return fieldTypes[name] ?? "text";
+}
+
+/** Text columns stay `@Column`; image/PDF columns read as `<Column>`. */
+export function canonicalToken(name: string, type: PromptFieldType): string {
+  return type === "text" ? `@${name}` : `<${name}>`;
+}
+
+function segmentKind(
+  name: string,
+  columns: string[],
+  fieldTypes: Record<string, PromptFieldType>,
+): PromptSegment["kind"] {
+  if (!columns.includes(name)) return "unknown";
+  return fieldTypeOf(fieldTypes, name) === "text" ? "text" : "attachment";
+}
+
+/** Splits prompt text into plain runs and tokens, for highlighting and preview. */
+export function splitTokens(
+  text: string,
+  columns: string[],
+  fieldTypes: Record<string, PromptFieldType>,
+): PromptSegment[] {
+  const segments: PromptSegment[] = [];
+  let last = 0;
+
+  for (const match of text.matchAll(TOKEN_RE)) {
+    const index = match.index ?? 0;
+    if (index > last) {
+      segments.push({ kind: "plain", text: text.slice(last, index) });
+    }
+    const name = tokenName(match[0]);
+    segments.push({
+      kind: segmentKind(name, columns, fieldTypes),
+      text: match[0],
+      name,
+    });
+    last = index + match[0].length;
+  }
+
+  if (last < text.length) {
+    segments.push({ kind: "plain", text: text.slice(last) });
+  }
+  return segments;
+}
+
+/** Rewrites every reference to `name` into the form its type implies. */
+export function rewriteToken(
+  text: string,
+  name: string,
+  type: PromptFieldType,
+): string {
+  const pattern = new RegExp(`(@${name}\\b|\\{${name}\\}|<${name}>)`, "g");
+  return text.replace(pattern, canonicalToken(name, type));
+}
+
+const BLOCK_PREFIXES: { prefix: string; type: PreviewBlockType }[] = [
+  { prefix: "## ", type: "h2" },
+  { prefix: "# ", type: "h1" },
+  { prefix: "- ", type: "li" },
+];
+
+function blockOf(line: string): { type: PreviewBlockType; body: string } {
+  const matched = BLOCK_PREFIXES.find(({ prefix }) => line.startsWith(prefix));
+  return matched
+    ? { type: matched.type, body: line.slice(matched.prefix.length) }
+    : { type: "p", body: line };
+}
+
+/**
+ * The preview document: instructions then submission under mirrored headings,
+ * with tokens resolved against row 1 of the selected submission set.
+ */
+export function buildPreviewBlocks(params: {
+  zones: PromptZones;
+  columns: string[];
+  fieldTypes: Record<string, PromptFieldType>;
+  sampleRow: Record<string, string>;
+}): PreviewBlock[] {
+  const { zones, columns, fieldTypes, sampleRow } = params;
+  const source: string[] = [];
+  if (zones.instructions.trim()) {
+    source.push("# Instructions", zones.instructions);
+  }
+  if (zones.submission.trim()) {
+    source.push("# Submission", zones.submission);
+  }
+
+  return source
+    .join("\n\n")
+    .split("\n")
+    .filter((line) => line.trim().length > 0)
+    .map((line) => {
+      const { type, body } = blockOf(line);
+      return {
+        type,
+        segments: resolveSegments(body, columns, fieldTypes, sampleRow),
+      };
+    });
+}
+
+const PREVIEW_VALUE_LIMIT = 260;
+
+function resolveSegments(
+  text: string,
+  columns: string[],
+  fieldTypes: Record<string, PromptFieldType>,
+  sampleRow: Record<string, string>,
+): PromptSegment[] {
+  return splitTokens(text, columns, fieldTypes).map((segment) => {
+    if (segment.kind !== "text" || !segment.name) return segment;
+    const value = sampleRow[segment.name];
+    if (!value) return { ...segment, kind: "unknown" };
+    return {
+      ...segment,
+      text:
+        value.length > PREVIEW_VALUE_LIMIT
+          ? `${value.slice(0, PREVIEW_VALUE_LIMIT)}…`
+          : value,
+    };
+  });
+}
+
+/**
+ * Editor text → wire payload. `prompt_template` keeps the `{Column}` form the
+ * backend already accepts; image/PDF columns also travel in `attachments`.
+ */
+export function toWireTemplate(
+  text: string,
+  fieldTypes: Record<string, PromptFieldType>,
+): { template: string; attachments: Attachment[] } {
+  const attachments: Attachment[] = [];
+
+  const template = text.replace(TOKEN_RE, (raw) => {
+    const name = tokenName(raw);
+    const type = fieldTypeOf(fieldTypes, name);
+    if (type !== "text" && !attachments.some((item) => item.column === name)) {
+      attachments.push({ column: name, type, format: "url" });
+    }
+    return `{${name}}`;
+  });
+
+  return { template, attachments };
+}
+
+/** Wire payload → editor text, so a saved version reopens as it was authored. */
+export function fromWireTemplate(
+  template: string,
+  attachments: Attachment[],
+): string {
+  const byColumn = new Map(attachments.map((item) => [item.column, item.type]));
+  return template.replace(TOKEN_RE, (raw) => {
+    const name = tokenName(raw);
+    const type = byColumn.get(name);
+    return type && type !== "mixed" ? `<${name}>` : `@${name}`;
+  });
+}
+
+export function fieldTypesFromAttachments(
+  attachments: Attachment[],
+): Record<string, PromptFieldType> {
+  return Object.fromEntries(
+    attachments
+      .filter((item) => item.type !== "mixed")
+      .map((item) => [item.column, item.type as PromptFieldType]),
+  );
+}
diff --git a/app/lib/assessment/resultRow.ts b/app/lib/assessment/resultRow.ts
new file mode 100644
index 00000000..16ec4d0d
--- /dev/null
+++ b/app/lib/assessment/resultRow.ts
@@ -0,0 +1,107 @@
+/**
+ * Reads one result row for the detail view: pairs `X_score` with `X_reason`,
+ * separates the long-form text fields from the short ones, and picks out
+ * document links. Pure — the modal only renders what this returns.
+ */
+import {
+  RESULT_REASON_SUFFIX,
+  RESULT_SCORE_SUFFIX,
+} from "@/app/lib/assessment/constants";
+
+export interface ResultScore {
+  metric: string;
+  score: string;
+  reason: string;
+}
+
+export interface ResultField {
+  label: string;
+  value: string;
+}
+
+export interface ResultRowDetail {
+  scores: ResultScore[];
+  longText: ResultField[];
+  meta: ResultField[];
+  documents: string[];
+}
+
+const SCORE_SUFFIX = RESULT_SCORE_SUFFIX;
+const REASON_SUFFIX = RESULT_REASON_SUFFIX;
+const LONG_TEXT_MIN = 160;
+const DOCUMENT_KEYS = ["documents", "document", "attachments"];
+const HIDDEN_KEYS = new Set([
+  "run_id",
+  "run_name",
+  "assessment_id",
+  "dataset_id",
+  "dataset_name",
+  "config_id",
+  "config_version",
+  "response_id",
+  "row_id",
+  "row_index",
+  "result_status",
+  "error",
+]);
+
+const asText = (value: unknown): string => {
+  if (value === null || value === undefined) return "";
+  if (typeof value === "object") return JSON.stringify(value, null, 2);
+  return String(value);
+};
+
+const humanize = (key: string) => key.replace(/_/g, " ");
+
+function documentLinks(value: unknown): string[] {
+  if (Array.isArray(value)) return value.map(asText).filter(Boolean);
+  return asText(value)
+    .split(/[\n,]/)
+    .map((item) => item.trim())
+    .filter(Boolean);
+}
+
+export function readResultRow(row: Record<string, unknown>): ResultRowDetail {
+  const scores: ResultScore[] = [];
+  const longText: ResultField[] = [];
+  const meta: ResultField[] = [];
+  let documents: string[] = [];
+
+  Object.entries(row).forEach(([key, raw]) => {
+    const lower = key.toLowerCase();
+    if (HIDDEN_KEYS.has(lower) || key.endsWith(REASON_SUFFIX)) return;
+
+    if (DOCUMENT_KEYS.includes(lower)) {
+      documents = documentLinks(raw);
+      return;
+    }
+
+    if (key.endsWith(SCORE_SUFFIX)) {
+      const metric = key.slice(0, -SCORE_SUFFIX.length);
+      scores.push({
+        metric: humanize(metric),
+        score: asText(raw),
+        reason: asText(row[`${metric}${REASON_SUFFIX}`]),
+      });
+      return;
+    }
+
+    const value = asText(raw);
+    if (!value) return;
+    const field = { label: humanize(key), value };
+    if (value.length >= LONG_TEXT_MIN) longText.push(field);
+    else meta.push(field);
+  });
+
+  return { scores, longText, meta, documents };
+}
+
+/** A short, human title for the row — its first identifying text field. */
+export function resultRowTitle(row: Record<string, unknown>): string {
+  const candidates = ["title", "name", "cid", "id"];
+  for (const key of candidates) {
+    const match = Object.keys(row).find((item) => item.toLowerCase() === key);
+    if (match && asText(row[match])) return asText(row[match]);
+  }
+  return "Submission";
+}
diff --git a/app/lib/assessment/results.ts b/app/lib/assessment/results.ts
index 91c1b808..5add7dbe 100644
--- a/app/lib/assessment/results.ts
+++ b/app/lib/assessment/results.ts
@@ -1,16 +1,14 @@
-// Result status utilities: status checks, counts, filters, and label formatting for assessment runs.
+// Result utilities: status checks, labels, run normalization, and spreadsheet state.
 import type {
-  AssessmentChildRun,
-  AssessmentRun,
+  PipelineConfig,
   ResultTone,
-  ResultsCounts,
   SpreadsheetStateEnvelope,
-  StatusFilter,
 } from "@/app/lib/types/assessment";
 import {
   ACTIVE_ASSESSMENT_STATUSES,
   COMPLETED_ASSESSMENT_STATUSES,
   FAILED_ASSESSMENT_STATUSES,
+  TERMINAL_ASSESSMENT_STATUSES,
   SPREADSHEET_STATE_SCHEMA_VERSION,
   SPREADSHEET_STATE_STORAGE_PREFIX,
   STAGE_LABELS,
@@ -28,8 +26,18 @@ export interface StageProgress {
   status: StageProgressStatus;
 }
 
-// Per-stage progress for a child run, derived from pipeline + stage + stage_status.
-export function getStageProgress(run: AssessmentChildRun): StageProgress[] {
+/**
+ * The stage fields `getStageProgress` reads. `AssessmentChildRun` satisfies it
+ * structurally; Home passes a parent run's `run_stats[0]` with a default pipeline.
+ */
+export interface StageProgressInput {
+  stage: string | null;
+  stage_status: string | null;
+  pipeline: PipelineConfig | null;
+}
+
+// Per-stage progress for a run, derived from pipeline + stage + stage_status.
+export function getStageProgress(run: StageProgressInput): StageProgress[] {
   const stages = run.pipeline?.stages ?? [];
   if (stages.length === 0 || !run.stage) return [];
 
@@ -61,118 +69,57 @@ export function getStageProgress(run: AssessmentChildRun): StageProgress[] {
   });
 }
 
-// True once any stage has completed, so partial results are worth previewing.
-export function hasViewableResults(run: AssessmentChildRun): boolean {
-  if (isCompletedStatus(run.status)) return true;
-  return getStageProgress(run).some((s) => s.status === "completed");
+/** The API returns uppercase statuses; the status sets are lowercase. */
+export function normalizeStatus(status: string): string {
+  return (status ?? "").trim().toLowerCase();
 }
 
 export function isActiveStatus(status: string): boolean {
-  return ACTIVE_ASSESSMENT_STATUSES.has(status);
+  return ACTIVE_ASSESSMENT_STATUSES.has(normalizeStatus(status));
 }
 
 export function isFailedStatus(status: string): boolean {
-  return FAILED_ASSESSMENT_STATUSES.has(status);
+  return FAILED_ASSESSMENT_STATUSES.has(normalizeStatus(status));
 }
 
 export function isCompletedStatus(status: string): boolean {
-  return COMPLETED_ASSESSMENT_STATUSES.has(status);
+  return COMPLETED_ASSESSMENT_STATUSES.has(normalizeStatus(status));
 }
 
 export function canRetryStatus(status: string): boolean {
   return isFailedStatus(status);
 }
 
-function safeCount(value: unknown, fallback = 0): number {
-  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
-}
-
-/** Backfill run-count fields from run_stats when the API omits them. */
-export function normalizeAssessmentRun(run: AssessmentRun): AssessmentRun {
-  const runStats = Array.isArray(run.run_stats) ? run.run_stats : [];
-  const pendingRuns = safeCount(
-    run.pending_runs,
-    runStats.filter((item) => item.status === "pending").length,
-  );
-  const processingRuns = safeCount(
-    run.processing_runs,
-    Math.max(
-      0,
-      runStats.filter((item) => isActiveStatus(item.status)).length -
-        pendingRuns,
-    ),
-  );
-  const completedRuns = safeCount(
-    run.completed_runs,
-    runStats.filter((item) => isCompletedStatus(item.status)).length,
-  );
-  const failedRuns = safeCount(
-    run.failed_runs,
-    runStats.filter((item) => isFailedStatus(item.status)).length,
-  );
-  const totalRuns = safeCount(
-    run.total_runs,
-    runStats.length ||
-      pendingRuns + processingRuns + completedRuns + failedRuns,
-  );
-
-  return {
-    ...run,
-    total_runs: totalRuns,
-    pending_runs: pendingRuns,
-    processing_runs: processingRuns,
-    completed_runs: completedRuns,
-    failed_runs: failedRuns,
-  };
+/** Finished, however it ended — the rows it produced are final and exportable. */
+export function isTerminalStatus(status: string): boolean {
+  return TERMINAL_ASSESSMENT_STATUSES.has(normalizeStatus(status));
 }
 
 export function getResultTone(status: string): ResultTone {
-  if (isCompletedStatus(status)) return "success";
-  if (status === "failed" || status === "prefilter_failed") return "error";
-  if (isActiveStatus(status) || status === "completed_with_errors") {
+  const value = normalizeStatus(status);
+  if (isCompletedStatus(value)) return "success";
+  if (value === "failed" || value === "prefilter_failed") return "error";
+  if (isActiveStatus(value) || value === "completed_with_errors") {
     return "warning";
   }
   return "default";
 }
 
 export function formatStatusLabel(status: string): string {
-  return status.replace(/_/g, " ");
+  return normalizeStatus(status).replace(/_/g, " ");
 }
 
 export function getAsyncErrorMessage(action: string, error: unknown): string {
   return `${action}: ${error instanceof Error ? error.message : "Unknown error"}`;
 }
 
-export function getResultsCounts(assessments: AssessmentRun[]): ResultsCounts {
-  return {
-    total: assessments.length,
-    processing: assessments.filter((run) => isActiveStatus(run.status)).length,
-    completed: assessments.filter((run) => isCompletedStatus(run.status))
-      .length,
-    failed: assessments.filter((run) => isFailedStatus(run.status)).length,
-  };
-}
-
-export function filterAssessments(
-  assessments: AssessmentRun[],
-  statusFilter: StatusFilter,
-): AssessmentRun[] {
-  if (statusFilter === "all") return assessments;
-
-  return assessments.filter((run) => {
-    if (statusFilter === "processing") return isActiveStatus(run.status);
-    if (statusFilter === "failed") return isFailedStatus(run.status);
-    return run.status === statusFilter;
-  });
-}
-
 export const PREVIEW_ROW_LIMIT = 10;
 
-export function spreadsheetStorageKey(runId: number): string {
+export function spreadsheetStorageKey(runId: string): string {
   return `${SPREADSHEET_STATE_STORAGE_PREFIX}${runId}`;
 }
 
-export function loadSpreadsheetState(runId: number): object | null {
+export function loadSpreadsheetState(runId: string): object | null {
   try {
     const raw = localStorage.getItem(spreadsheetStorageKey(runId));
     if (!raw) return null;
@@ -210,7 +157,7 @@ function evictOldestSpreadsheetStates(keep: number): void {
   }
 }
 
-export function persistSpreadsheetState(runId: number, data: object): void {
+export function persistSpreadsheetState(runId: string, data: object): void {
   const envelope: SpreadsheetStateEnvelope = {
     v: SPREADSHEET_STATE_SCHEMA_VERSION,
     ts: Date.now(),
@@ -333,6 +280,23 @@ export function savedSnapshotMatchesHeaders(
 }
 
 /** Serialize a string matrix to CSV with RFC-4180 quoting. */
+/** Excel needs the BOM to read UTF-8 (keeps Hindi/Telugu text intact). */
+const BOM_UTF8 = "\uFEFF";
+
+/** Downloads a matrix as a CSV file. Browser-only; no-ops server-side. */
+export function downloadCsv(fileName: string, matrix: string[][]): void {
+  if (typeof document === "undefined") return;
+  const blob = new Blob([BOM_UTF8, rowsToCsv(matrix)], {
+    type: "text/csv;charset=utf-8;",
+  });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = `${fileName || "results"}.csv`;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
 export function rowsToCsv(matrix: string[][]): string {
   const escape = (cell: string) =>
     /[",\n\r]/.test(cell) ? `"${cell.replace(/"/g, '""')}"` : cell;
@@ -364,6 +328,7 @@ export function jsonResultsToTableData(
       "result_status",
       "error",
       "row_id",
+      "row_index",
       "experiment_name",
     ]);
 
diff --git a/app/lib/assessment/scrollMap.ts b/app/lib/assessment/scrollMap.ts
new file mode 100644
index 00000000..b1f0f788
--- /dev/null
+++ b/app/lib/assessment/scrollMap.ts
@@ -0,0 +1,118 @@
+/**
+ * Maps one pane's scroll position onto another's, given matched anchor points.
+ *
+ * Piecewise-linear interpolation makes the follower's *speed* jump at every
+ * anchor (the slope changes abruptly), which reads as jerk. This uses monotone
+ * cubic interpolation (Fritsch–Carlson): C1-continuous, so speed changes
+ * gradually, and monotone, so the follower never backs up or overshoots.
+ * No DOM, no React.
+ */
+
+/** `[sourceScrollTop, targetScrollTop]`, strictly increasing on both axes. */
+export type ScrollAnchor = [number, number];
+
+export interface ScrollMapper {
+  forward: (value: number) => number;
+  backward: (value: number) => number;
+}
+
+/** Average of the neighbouring secants, flattened at local extrema. */
+function initialSlopes(secants: number[]): number[] {
+  const slopes = [secants[0]];
+  for (let i = 1; i < secants.length; i += 1) {
+    const before = secants[i - 1];
+    const after = secants[i];
+    slopes.push(before * after <= 0 ? 0 : (before + after) / 2);
+  }
+  slopes.push(secants[secants.length - 1]);
+  return slopes;
+}
+
+/** Fritsch–Carlson: clamp the slopes so no segment can overshoot. */
+function limitSlopes(slopes: number[], secants: number[]): void {
+  for (let i = 0; i < secants.length; i += 1) {
+    const secant = secants[i];
+    if (secant === 0) {
+      slopes[i] = 0;
+      slopes[i + 1] = 0;
+      continue;
+    }
+    const alpha = slopes[i] / secant;
+    const beta = slopes[i + 1] / secant;
+    const scale = Math.hypot(alpha, beta);
+    if (scale > 3) {
+      slopes[i] = (3 / scale) * alpha * secant;
+      slopes[i + 1] = (3 / scale) * beta * secant;
+    }
+  }
+}
+
+/** Slopes that keep a cubic through these points monotone. */
+function monotoneSlopes(xs: number[], ys: number[]): number[] {
+  const secants: number[] = [];
+  for (let i = 0; i < xs.length - 1; i += 1) {
+    secants.push((ys[i + 1] - ys[i]) / (xs[i + 1] - xs[i]));
+  }
+
+  const slopes = initialSlopes(secants);
+  limitSlopes(slopes, secants);
+  return slopes;
+}
+
+function evaluate(
+  xs: number[],
+  ys: number[],
+  slopes: number[],
+  value: number,
+): number {
+  if (value <= xs[0]) return ys[0];
+  const last = xs.length - 1;
+  if (value >= xs[last]) return ys[last];
+
+  let index = 0;
+  while (index < last && value > xs[index + 1]) index += 1;
+
+  const span = xs[index + 1] - xs[index];
+  const t = (value - xs[index]) / span;
+  const t2 = t * t;
+  const t3 = t2 * t;
+
+  // Hermite basis
+  return (
+    (2 * t3 - 3 * t2 + 1) * ys[index] +
+    (t3 - 2 * t2 + t) * span * slopes[index] +
+    (-2 * t3 + 3 * t2) * ys[index + 1] +
+    (t3 - t2) * span * slopes[index + 1]
+  );
+}
+
+function linear(xs: number[], ys: number[], value: number): number {
+  if (value <= xs[0]) return ys[0];
+  const last = xs.length - 1;
+  if (value >= xs[last]) return ys[last];
+  let index = 0;
+  while (index < last && value > xs[index + 1]) index += 1;
+  const ratio = (value - xs[index]) / (xs[index + 1] - xs[index]);
+  return ys[index] + ratio * (ys[index + 1] - ys[index]);
+}
+
+export function createScrollMapper(anchors: ScrollAnchor[]): ScrollMapper {
+  const xs = anchors.map(([source]) => source);
+  const ys = anchors.map(([, target]) => target);
+
+  // Two points is a straight line; a cubic needs three to be worth building.
+  if (anchors.length < 3) {
+    return {
+      forward: (value) => linear(xs, ys, value),
+      backward: (value) => linear(ys, xs, value),
+    };
+  }
+
+  const forwardSlopes = monotoneSlopes(xs, ys);
+  const backwardSlopes = monotoneSlopes(ys, xs);
+
+  return {
+    forward: (value) => evaluate(xs, ys, forwardSlopes, value),
+    backward: (value) => evaluate(ys, xs, backwardSlopes, value),
+  };
+}
diff --git a/app/lib/assessment/wizard.ts b/app/lib/assessment/wizard.ts
new file mode 100644
index 00000000..d9535f98
--- /dev/null
+++ b/app/lib/assessment/wizard.ts
@@ -0,0 +1,105 @@
+/** Pure step + flow rules for the assessment wizard. No React, no network. */
+import type {
+  AssessmentWizardFlow,
+  AssessmentWizardStep,
+  PromptStepId,
+  Step,
+} from "@/app/lib/types/assessment";
+
+export interface StepState {
+  isActive: boolean;
+  isCompleted: boolean;
+  isClickable: boolean;
+}
+
+/**
+ * Which steps each flow opens, and where it starts:
+ * `new` walks 1→4 in order, `edit` reworks 1–3 from the pre-filter,
+ * `run` lands on the run step with 2–3 open for tweaks.
+ */
+const FLOW_OPEN_STEPS: Record<AssessmentWizardFlow, AssessmentWizardStep[]> = {
+  new: [1, 2, 3, 4],
+  edit: [1, 2, 3],
+  run: [2, 3, 4],
+};
+
+const FLOW_ENTRY_STEP: Record<AssessmentWizardFlow, AssessmentWizardStep> = {
+  new: 1,
+  edit: 2,
+  run: 4,
+};
+
+export function wizardOpenSteps(
+  flow: AssessmentWizardFlow,
+): AssessmentWizardStep[] {
+  return FLOW_OPEN_STEPS[flow];
+}
+
+export function wizardEntryStep(
+  flow: AssessmentWizardFlow,
+): AssessmentWizardStep {
+  return FLOW_ENTRY_STEP[flow];
+}
+
+/** Steps 2 and 3 are the prompt steps; each carries its own model. */
+export function promptStepFor(step: number): PromptStepId | null {
+  if (step === 2) return "prefilter";
+  if (step === 3) return "assessment";
+  return null;
+}
+
+export function isWizardStepAllowed(params: {
+  flow: AssessmentWizardFlow;
+  step: number;
+  currentStep: number;
+  completedSteps: Set<number>;
+}): boolean {
+  const { flow, step, currentStep, completedSteps } = params;
+  const open = wizardOpenSteps(flow);
+  if (!open.includes(step as AssessmentWizardStep)) return false;
+  if (flow !== "new") return true;
+
+  // New assessors walk forward: a later step opens once every earlier one is done.
+  return (
+    step <= currentStep ||
+    open
+      .filter((candidate) => candidate < step)
+      .every((candidate) => completedSteps.has(candidate))
+  );
+}
+
+export function getStepState(params: {
+  step: Step;
+  steps: Step[];
+  currentStep: number;
+  completedSteps: Set<number>;
+  locked: boolean;
+  isStepAllowed?: (step: number) => boolean;
+}): StepState {
+  const { step, steps, currentStep, completedSteps, locked, isStepAllowed } =
+    params;
+  if (locked) {
+    return { isActive: false, isCompleted: false, isClickable: false };
+  }
+
+  const isCompleted = completedSteps.has(step.id);
+  const isUnlockedAhead =
+    step.id > currentStep &&
+    steps.filter((s) => s.id < step.id).every((s) => completedSteps.has(s.id));
+
+  return {
+    isActive: currentStep === step.id,
+    isCompleted,
+    isClickable: isStepAllowed
+      ? isStepAllowed(step.id)
+      : isCompleted || step.id <= currentStep || isUnlockedAhead,
+  };
+}
+
+export function stepPillClasses(state: StepState): string {
+  if (state.isActive) {
+    return "border-accent-primary! bg-accent-primary! text-white!";
+  }
+  if (state.isCompleted) return "bg-bg-secondary! text-text-primary!";
+  return "bg-transparent! text-text-secondary!";
+}
diff --git a/app/lib/data/assessmentModels.ts b/app/lib/data/assessmentModels.ts
index f695ca04..df5a158c 100644
--- a/app/lib/data/assessmentModels.ts
+++ b/app/lib/data/assessmentModels.ts
@@ -3,345 +3,209 @@ import type {
   ConfigParamDefinition,
   ModelOption,
 } from "@/app/lib/types/assessment";
-import type { ConfigBlob } from "@/app/lib/types/configs";
+import type { ConfigBlob, ProviderType } from "@/app/lib/types/configs";
 
-export const GPT4_STYLE_CONFIG = {
-  top_p: {
-    max: 1.0,
-    min: 0.0,
-    type: "float",
-    default: 1.0,
-    description: "Nucleus sampling. Use either this or temperature, not both.",
-  },
-  temperature: {
-    max: 2.0,
-    min: 0.0,
-    type: "float",
-    default: 1.0,
-    description: "Controls randomness. Lower = more deterministic.",
-  },
-} as const satisfies Record<string, ConfigParamDefinition>;
+const TEMPERATURE: ConfigParamDefinition = {
+  type: "float",
+  default: 1.0,
+  min: 0.0,
+  max: 2.0,
+  description: "Controls randomness. Lower = more deterministic.",
+};
 
-const GEMINI_TEMPERATURE_CONFIG = {
-  temperature: {
-    max: 2.0,
-    min: 0.0,
-    type: "float",
-    default: 0.4,
-    description: "Controls randomness. Lower = more deterministic.",
-  },
-} as const satisfies Record<string, ConfigParamDefinition>;
+const TOP_P: ConfigParamDefinition = {
+  type: "float",
+  default: 1.0,
+  min: 0.0,
+  max: 1.0,
+  description: "Nucleus sampling. Use either this or temperature, not both.",
+};
 
-const GEMINI_THINKING_CONFIG = {
-  ...GEMINI_TEMPERATURE_CONFIG,
-  thinking_level: {
-    type: "enum",
-    default: "LOW",
-    options: ["MINIMAL", "LOW", "MEDIUM", "HIGH"],
-    description: "Controls how much the model thinks before responding.",
-  },
-} as const satisfies Record<string, ConfigParamDefinition>;
+const MAX_OUTPUT_TOKENS: ConfigParamDefinition = {
+  type: "int",
+  default: 2048,
+  min: 1,
+  max: 32768,
+  description: "Max tokens in the response.",
+};
 
-const GEMINI_THINKING_NO_MINIMAL_CONFIG = {
-  ...GEMINI_TEMPERATURE_CONFIG,
-  thinking_level: {
-    type: "enum",
-    default: "LOW",
-    options: ["LOW", "MEDIUM", "HIGH"],
-    description: "Controls how much the model thinks before responding.",
-  },
-} as const satisfies Record<string, ConfigParamDefinition>;
+const SUMMARY: ConfigParamDefinition = {
+  type: "enum",
+  default: "auto",
+  options: ["auto", "detailed", "concise"],
+  description: "Summarize the reasoning result.",
+};
 
-const ANTHROPIC_MODEL_CONFIG = {
-  top_p: {
-    max: 1.0,
-    min: 0.0,
-    type: "float",
-    default: 1.0,
-    description: "Nucleus sampling. Use either this or temperature, not both.",
-  },
-  temperature: {
-    max: 1.0,
-    min: 0.0,
-    type: "float",
-    default: 1.0,
-    description: "Controls randomness. Lower = more deterministic.",
-  },
-} as const satisfies Record<string, ConfigParamDefinition>;
+const GEMINI_TEMPERATURE: ConfigParamDefinition = {
+  type: "float",
+  default: 1,
+  min: 0,
+  max: 2,
+  description: "Controls randomness.",
+};
 
-const ANTHROPIC_OPUS_CONFIG = {
-  effort: {
-    type: "enum",
-    default: "high",
-    options: ["low", "medium", "high", "xhigh", "max"],
-    description:
-      "Reasoning effort. Higher = deeper thinking and more tokens. xhigh suits coding/agentic work.",
-  },
-  thinking: {
-    type: "enum",
-    default: "adaptive",
-    options: ["adaptive", "disabled"],
-    description:
-      "Adaptive thinking lets Claude decide depth. Sampling params (temperature/top_p) are not supported on Opus 4.8.",
-  },
-} as const satisfies Record<string, ConfigParamDefinition>;
+const THINKING_LEVEL_DESCRIPTION =
+  "Max reasoning depth before output. high = best quality, low = faster/cheaper.";
+
+const OPENAI_EFFORT_DESCRIPTION =
+  "How long the model spends reasoning. Higher = better but slower.";
+
+const ANTHROPIC_EFFORT_OPTIONS = ["low", "medium", "high", "xhigh", "max"];
+
+export const GPT4_STYLE_CONFIG: Record<string, ConfigParamDefinition> = {
+  top_p: TOP_P,
+  temperature: TEMPERATURE,
+  max_output_tokens: MAX_OUTPUT_TOKENS,
+};
+
+function openaiReasoning(
+  effortOptions: string[],
+): Record<string, ConfigParamDefinition> {
+  return {
+    effort: {
+      type: "enum",
+      default: "medium",
+      options: effortOptions,
+      description: OPENAI_EFFORT_DESCRIPTION,
+    },
+    summary: SUMMARY,
+  };
+}
+
+function anthropicReasoning(
+  description: string,
+): Record<string, ConfigParamDefinition> {
+  return {
+    effort: {
+      type: "enum",
+      default: "high",
+      options: ANTHROPIC_EFFORT_OPTIONS,
+      description,
+    },
+  };
+}
+
+function geminiThinking(
+  defaultLevel: string,
+): Record<string, ConfigParamDefinition> {
+  return {
+    temperature: GEMINI_TEMPERATURE,
+    thinking_level: {
+      type: "enum",
+      default: defaultLevel,
+      options: ["low", "medium", "high"],
+      description: THINKING_LEVEL_DESCRIPTION,
+    },
+  };
+}
+
+const GEMINI_TEXT_MODELS: Omit<AssessmentModelConfig, "provider">[] = [
+  { model_name: "gemini-3-pro-preview", config: geminiThinking("high") },
+  { model_name: "gemini-3.5-flash-preview", config: geminiThinking("low") },
+  { model_name: "gemini-3-flash-preview", config: geminiThinking("low") },
+];
+
+function geminiModelsFor(provider: ProviderType): AssessmentModelConfig[] {
+  return GEMINI_TEXT_MODELS.map((model) => ({ provider, ...model }));
+}
 
 export const ASSESSMENT_MODEL_CONFIGS: AssessmentModelConfig[] = [
-  // OpenAI
   { provider: "openai", model_name: "gpt-4o-mini", config: GPT4_STYLE_CONFIG },
   { provider: "openai", model_name: "gpt-4o", config: GPT4_STYLE_CONFIG },
   { provider: "openai", model_name: "gpt-4.1", config: GPT4_STYLE_CONFIG },
   { provider: "openai", model_name: "gpt-4.1-mini", config: GPT4_STYLE_CONFIG },
   { provider: "openai", model_name: "gpt-4.1-nano", config: GPT4_STYLE_CONFIG },
-  {
-    provider: "openai",
-    model_name: "o3-mini",
-    config: {
-      effort: {
-        type: "enum",
-        default: "medium",
-        options: ["low", "medium", "high"],
-        description:
-          "How long the model spends reasoning. Higher = better but slower.",
-      },
-      summary: {
-        type: "enum",
-        default: "auto",
-        options: ["auto", "detailed", "concise"],
-        description: "Summarize the reasoning result.",
-      },
-    },
-  },
-  {
-    provider: "openai",
-    model_name: "o3",
-    config: {
-      effort: {
-        type: "enum",
-        default: "medium",
-        options: ["low", "medium", "high"],
-        description:
-          "How long the model spends reasoning. Higher = better but slower.",
-      },
-      summary: {
-        type: "enum",
-        default: "auto",
-        options: ["auto", "detailed", "concise"],
-        description: "Summarize the reasoning result.",
-      },
-    },
-  },
-  {
-    provider: "openai",
-    model_name: "o4-mini",
-    config: {
-      effort: {
-        type: "enum",
-        default: "medium",
-        options: ["low", "medium", "high"],
-        description:
-          "How long the model spends reasoning. Higher = better but slower.",
-      },
-      summary: {
-        type: "enum",
-        default: "auto",
-        options: ["auto", "detailed", "concise"],
-        description: "Summarize the reasoning result.",
-      },
-    },
-  },
   {
     provider: "openai",
     model_name: "gpt-5",
-    config: {
-      effort: {
-        type: "enum",
-        default: "medium",
-        options: ["minimal", "low", "medium", "high"],
-        description:
-          "How long the model spends reasoning. Higher = better but slower.",
-      },
-      summary: {
-        type: "enum",
-        default: "auto",
-        options: ["auto", "detailed", "concise"],
-        description: "Summarize the reasoning result.",
-      },
-    },
+    config: openaiReasoning(["minimal", "low", "medium", "high"]),
   },
   {
     provider: "openai",
     model_name: "gpt-5-mini",
-    config: {
-      effort: {
-        type: "enum",
-        default: "medium",
-        options: ["minimal", "low", "medium", "high"],
-        description:
-          "How long the model spends reasoning. Higher = better but slower.",
-      },
-      summary: {
-        type: "enum",
-        default: "auto",
-        options: ["auto", "detailed", "concise"],
-        description: "Summarize the reasoning result.",
-      },
-    },
+    config: openaiReasoning(["minimal", "low", "medium", "high"]),
   },
   {
     provider: "openai",
     model_name: "gpt-5-nano",
-    config: {
-      effort: {
-        type: "enum",
-        default: "medium",
-        options: ["minimal", "low", "medium", "high"],
-        description:
-          "How long the model spends reasoning. Higher = better but slower.",
-      },
-      summary: {
-        type: "enum",
-        default: "auto",
-        options: ["auto", "detailed", "concise"],
-        description: "Summarize the reasoning result.",
-      },
-    },
+    config: openaiReasoning(["minimal", "low", "medium", "high"]),
   },
   {
     provider: "openai",
     model_name: "gpt-5.1",
-    config: {
-      effort: {
-        type: "enum",
-        default: "medium",
-        options: ["none", "low", "medium", "high"],
-        description:
-          "How long the model spends reasoning. Higher = better but slower.",
-      },
-      summary: {
-        type: "enum",
-        default: "auto",
-        options: ["auto", "detailed", "concise"],
-        description: "Summarize the reasoning result.",
-      },
-    },
-  },
-  {
-    provider: "openai",
-    model_name: "gpt-5.1-chat-latest",
-    config: {
-      summary: {
-        type: "enum",
-        default: "auto",
-        options: ["auto", "detailed", "concise"],
-        description: "Summarize the reasoning result.",
-      },
-    },
+    config: openaiReasoning(["none", "low", "medium", "high"]),
   },
   {
     provider: "openai",
     model_name: "gpt-5.2",
-    config: {
-      effort: {
-        type: "enum",
-        default: "medium",
-        options: ["none", "low", "medium", "high", "xhigh"],
-        description:
-          "How long the model spends reasoning. Higher = better but slower.",
-      },
-      summary: {
-        type: "enum",
-        default: "auto",
-        options: ["auto", "detailed", "concise"],
-        description: "Summarize the reasoning result.",
-      },
-    },
+    config: openaiReasoning(["none", "low", "medium", "high", "xhigh"]),
   },
   {
     provider: "openai",
-    model_name: "gpt-5.2-chat-latest",
-    config: {
-      summary: {
-        type: "enum",
-        default: "auto",
-        options: ["auto", "detailed", "concise"],
-        description: "Summarize the reasoning result.",
-      },
-    },
+    model_name: "gpt-5.4",
+    config: openaiReasoning(["none", "low", "medium", "high", "xhigh"]),
   },
   {
     provider: "openai",
-    model_name: "gpt-5.2-pro",
-    config: {
-      summary: {
-        type: "enum",
-        default: "auto",
-        options: ["auto", "detailed", "concise"],
-        description: "Summarize the reasoning result.",
-      },
-    },
+    model_name: "gpt-5.4-mini",
+    config: openaiReasoning(["none", "low", "medium", "high", "xhigh"]),
   },
-  // Google (Gemini)
   {
-    provider: "google-aistudio",
-    model_name: "gemini-2.0-flash-lite",
-    config: GEMINI_TEMPERATURE_CONFIG,
-  },
-  {
-    provider: "google-aistudio",
-    model_name: "gemini-2.0-flash",
-    config: GEMINI_TEMPERATURE_CONFIG,
-  },
-  {
-    provider: "google-aistudio",
-    model_name: "gemini-2.5-flash-lite",
-    config: GEMINI_TEMPERATURE_CONFIG,
-  },
-  {
-    provider: "google-aistudio",
-    model_name: "gemini-2.5-flash",
-    config: GEMINI_TEMPERATURE_CONFIG,
+    provider: "openai",
+    model_name: "gpt-5.4-nano",
+    config: openaiReasoning(["none", "low", "medium", "high", "xhigh"]),
   },
   {
-    provider: "google-aistudio",
-    model_name: "gemini-2.5-pro",
-    config: GEMINI_TEMPERATURE_CONFIG,
+    provider: "openai",
+    model_name: "gpt-5.4-pro",
+    config: openaiReasoning(["none", "low", "medium", "high", "xhigh"]),
   },
   {
-    provider: "google-aistudio",
-    model_name: "gemini-3.1-flash-lite",
-    config: GEMINI_THINKING_CONFIG,
+    provider: "openai",
+    model_name: "gpt-5.6-luna",
+    config: openaiReasoning(["none", "low", "medium", "high", "xhigh", "max"]),
   },
   {
-    provider: "google-aistudio",
-    model_name: "gemini-3.1-pro-preview",
-    config: GEMINI_THINKING_NO_MINIMAL_CONFIG,
+    provider: "openai",
+    model_name: "gpt-5.6-sol",
+    config: openaiReasoning(["none", "low", "medium", "high", "xhigh", "max"]),
   },
   {
-    provider: "google-aistudio",
-    model_name: "gemini-3-flash-preview",
-    config: GEMINI_THINKING_CONFIG,
+    provider: "openai",
+    model_name: "gpt-5.6-terra",
+    config: openaiReasoning(["none", "low", "medium", "high", "xhigh", "max"]),
   },
+  ...geminiModelsFor("google-aistudio"),
+  ...geminiModelsFor("google-gcp"),
+  { provider: "anthropic", model_name: "claude-sonnet-4-6", config: {} },
+  { provider: "anthropic", model_name: "claude-haiku-4-5", config: {} },
   {
     provider: "anthropic",
-    model_name: "claude-haiku-4-5",
-    config: ANTHROPIC_MODEL_CONFIG,
+    model_name: "claude-sonnet-5",
+    config: anthropicReasoning(
+      "Reasoning depth with adaptive thinking. Higher = better but slower/costlier.",
+    ),
   },
   {
     provider: "anthropic",
-    model_name: "claude-sonnet-4-6",
-    config: ANTHROPIC_MODEL_CONFIG,
+    model_name: "claude-opus-4-8",
+    config: anthropicReasoning(
+      "Reasoning depth with adaptive thinking. Higher = better but slower/costlier.",
+    ),
   },
   {
     provider: "anthropic",
-    model_name: "claude-opus-4-8",
-    config: ANTHROPIC_OPUS_CONFIG,
+    model_name: "claude-fable-5",
+    config: anthropicReasoning(
+      "Reasoning depth. Thinking is always on for this model. Higher = better but slower/costlier.",
+    ),
   },
 ];
 
 export const PROVIDER_OPTIONS = [
   { value: "openai", label: "OpenAI" },
-  { value: "google-aistudio", label: "Google (Gemini)" },
+  { value: "google-aistudio", label: "Google AI Studio (Gemini)" },
+  { value: "google-gcp", label: "Google Vertex AI (Gemini)" },
   { value: "anthropic", label: "Anthropic (Claude)" },
 ] as const;
 
diff --git a/app/lib/modelSchema.ts b/app/lib/modelSchema.ts
index 0b195dd5..375adfb2 100644
--- a/app/lib/modelSchema.ts
+++ b/app/lib/modelSchema.ts
@@ -61,6 +61,8 @@ export const PROVIDER_LABELS: Record<string, string> = {
   openai: "OpenAI",
   google: "Google",
   "google-aistudio": "Google AI Studio",
+  "google-gcp": "Google Vertex AI",
+  anthropic: "Anthropic",
 };
 
 export function getProviderLabel(provider: string): string {
diff --git a/app/lib/types/assessment/batch.ts b/app/lib/types/assessment/batch.ts
new file mode 100644
index 00000000..b0d7be20
--- /dev/null
+++ b/app/lib/types/assessment/batch.ts
@@ -0,0 +1,88 @@
+export type AssessmentMethodValue = "BATCH" | "RUN" | "RESPONSE";
+
+export type AssessmentStatusValue =
+  | "PENDING"
+  | "PROCESSING"
+  | "COMPLETED"
+  | "COMPLETED_WITH_ERRORS"
+  | "FAILED";
+
+export interface AssessmentConfigRef {
+  id: string;
+  version: number;
+}
+
+export interface BatchPreFilterVerdict {
+  verdict: boolean;
+  reasoning: string;
+}
+
+export interface BatchPreFilter {
+  topic_relevance?: BatchPreFilterVerdict | null;
+}
+
+export interface BatchItemOutput {
+  assessment?: Record<string, unknown> | string | null;
+  pre_filter?: BatchPreFilter | null;
+}
+
+export interface BatchResultRow {
+  row_index: number;
+  input?: Record<string, string> | null;
+  output: BatchItemOutput;
+  error?: string | null;
+}
+
+export interface BatchCounts {
+  assessed: number;
+  filtered: number;
+  errors: number;
+}
+
+export interface AssessmentSummary {
+  assessment_id: string;
+  method: AssessmentMethodValue;
+  status: AssessmentStatusValue;
+  experiment_name?: string | null;
+  submission_id?: string | null;
+  submission_name?: string | null;
+  config?: AssessmentConfigRef | null;
+  total_items: number;
+  stages?: string[];
+  stage?: string | null;
+  stage_status?: string | null;
+  error?: string | null;
+  inserted_at: string;
+  updated_at: string;
+}
+
+export interface AssessmentDetail extends AssessmentSummary {
+  counts: BatchCounts;
+  items: BatchResultRow[];
+}
+
+export interface CreateBatchAssessmentPayload {
+  experiment_name: string;
+  config: AssessmentConfigRef;
+  input: { submission_doc_id: string } | { data: Record<string, string>[] };
+}
+
+export interface ListAssessmentsQuery {
+  config_id?: string;
+  version?: number;
+  method?: AssessmentMethodValue;
+  limit?: number;
+  offset?: number;
+}
+
+export interface ResultsTarget {
+  assessment_id: string;
+  method: AssessmentMethodValue;
+}
+
+export interface AssessmentResultsPayload {
+  status: AssessmentStatusValue;
+  rows: Record<string, unknown>[];
+  total_items: number;
+  counts: BatchCounts | null;
+}
diff --git a/app/lib/types/assessment/config.ts b/app/lib/types/assessment/config.ts
index 72ecd8b5..cd43c7ec 100644
--- a/app/lib/types/assessment/config.ts
+++ b/app/lib/types/assessment/config.ts
@@ -1,4 +1,3 @@
-// Assessment types: model configurations, versions, and config-selection UI.
 import type {
   CompletionConfig,
   ConfigPublic,
@@ -23,7 +22,7 @@ export type ConfigParamType = "float" | "int" | "enum";
 export interface ConfigParamDefinition {
   type: ConfigParamType;
   default: number | string;
-  description: string;
+  description?: string;
   min?: number;
   max?: number;
   options?: string[];
diff --git a/app/lib/types/assessment/core.ts b/app/lib/types/assessment/core.ts
index e4675fd6..b30fb0ba 100644
--- a/app/lib/types/assessment/core.ts
+++ b/app/lib/types/assessment/core.ts
@@ -1,4 +1,3 @@
-// Assessment types: generic utilities, navigation, and tab primitives.
 import type { Dispatch, SetStateAction } from "react";
 
 export type ValueSetter<T> = (value: T) => void;
@@ -21,7 +20,14 @@ export interface PagedResult<T> {
   nextSkip: number;
 }
 
-export type AssessmentTabId = "datasets" | "config" | "results";
+export interface PageSlice<T> {
+  items: T[];
+  page: number;
+  pages: number;
+  total: number;
+}
+
+export type AssessmentTabId = "home" | "datasets" | "config" | "results";
 export interface AssessmentTab {
   id: AssessmentTabId;
   label: string;
diff --git a/app/lib/types/assessment/dataSource.ts b/app/lib/types/assessment/dataSource.ts
new file mode 100644
index 00000000..78764745
--- /dev/null
+++ b/app/lib/types/assessment/dataSource.ts
@@ -0,0 +1,104 @@
+import type { PagedResult } from "./core";
+import type { Attachment, PrefilterConfig } from "./dataset";
+import type {
+  AssessmentResultsPayload,
+  ListAssessmentsQuery,
+  ResultsTarget,
+} from "./batch";
+import type {
+  AssessmentSubmission,
+  CreateSubmissionInput,
+  SubmissionPreviewPayload,
+} from "./submission";
+import type {
+  ConfigPublic,
+  ConfigVersionItems,
+  ProviderType,
+} from "@/app/lib/types/configs";
+import type { AssessmentRun } from "./results";
+
+export type ModelParams = Record<string, string | number>;
+
+export interface AssessorModelSelection {
+  provider: ProviderType;
+  model: string;
+  params: ModelParams;
+}
+
+export type AssessorSummary = ConfigPublic;
+
+export interface AssessorPageQuery {
+  skip?: number;
+  limit?: number;
+  search?: string;
+}
+
+export type AssessorVersion = ConfigVersionItems;
+
+export interface AssessorVersionDetail {
+  config_id: string;
+  version: number;
+  commit_message: string | null;
+  provider: ProviderType;
+  model: string;
+  params: ModelParams;
+  submission_id: string | null;
+  system_instruction: string;
+  prompt_template: string;
+  attachments: Attachment[];
+  strict_columns: string[];
+  prefilter_config: PrefilterConfig | null;
+  prefilter_model: AssessorModelSelection | null;
+  output_schema: Record<string, unknown> | null;
+}
+
+export interface SaveAssessorVersionInput extends Omit<
+  AssessorVersionDetail,
+  "config_id" | "version"
+> {
+  config_id: string | null;
+  name: string;
+  description?: string | null;
+  input_columns: string[];
+}
+
+export interface SaveAssessorVersionResult {
+  config_id: string;
+  version: number;
+}
+
+export interface CreateRunInput {
+  experiment_name: string;
+  submission_id: string;
+  config_id: string;
+  config_version: number;
+}
+
+export interface AssessmentDataSource {
+  listSubmissions: () => Promise<AssessmentSubmission[]>;
+  getSubmissionPreview: (
+    submissionId: string,
+  ) => Promise<SubmissionPreviewPayload>;
+  createSubmission: (
+    input: CreateSubmissionInput,
+  ) => Promise<AssessmentSubmission>;
+  deleteSubmission: (submissionId: string) => Promise<void>;
+
+  listAssessors: (
+    page?: AssessorPageQuery,
+  ) => Promise<PagedResult<AssessorSummary>>;
+  listAssessorVersions: (configId: string) => Promise<AssessorVersion[]>;
+  deleteAssessor: (configId: string) => Promise<void>;
+  deleteAssessorVersion: (configId: string, version: number) => Promise<void>;
+  getAssessorVersion: (
+    configId: string,
+    version: number,
+  ) => Promise<AssessorVersionDetail>;
+  saveAssessorVersion: (
+    input: SaveAssessorVersionInput,
+  ) => Promise<SaveAssessorVersionResult>;
+
+  listAssessments: (query?: ListAssessmentsQuery) => Promise<AssessmentRun[]>;
+  createRun: (input: CreateRunInput) => Promise<AssessmentRun>;
+  getRunResults: (target: ResultsTarget) => Promise<AssessmentResultsPayload>;
+}
diff --git a/app/lib/types/assessment/dataset.ts b/app/lib/types/assessment/dataset.ts
index ded47968..f997963c 100644
--- a/app/lib/types/assessment/dataset.ts
+++ b/app/lib/types/assessment/dataset.ts
@@ -1,11 +1,9 @@
-// Assessment types: datasets, column mapping, output schema, prefilter, review.
 import type { Dataset } from "@/app/lib/types/dataset";
 import type {
   CreateResponse,
   LabeledValue,
   ListResponse,
   SampleRow,
-  StepNavigationProps,
   ValueSetter,
 } from "./core";
 
@@ -13,7 +11,6 @@ export interface Attachment {
   column: string;
   type: "image" | "pdf" | "mixed";
   format: "url" | "base64";
-  // For 'mixed': column whose value decides each row's type + the value->type map.
   type_column?: string | null;
   type_value_map?: Record<string, string> | null;
 }
@@ -51,27 +48,14 @@ export interface PrefilterTopicRelevanceConfig {
   prompt: string;
 }
 
-export interface PrefilterDuplicateDetectionConfig {
-  columns: string[];
-}
-
 export interface PrefilterConfig {
   topic_relevance?: PrefilterTopicRelevanceConfig;
-  duplicate_detection?: PrefilterDuplicateDetectionConfig;
-}
-
-export interface PrefilterStepProps extends StepNavigationProps {
-  columns: string[];
-  attachmentColumns?: string[];
-  prefilterConfig: PrefilterConfig | null;
-  setPrefilterConfig: ValueSetter<PrefilterConfig | null>;
 }
 
 export interface ColumnConfig {
   role: ColumnRole;
   attachmentType?: "image" | "pdf" | "mixed";
   attachmentFormat?: string;
-  // For 'mixed': the type-deciding column + comma-separated values per type.
   attachmentTypeColumn?: string;
   attachmentImageValues?: string;
   attachmentPdfValues?: string;
@@ -83,12 +67,6 @@ export interface RoleVisuals {
   activeButtonClass: string;
 }
 
-export interface ColumnMapperStepProps extends StepNavigationProps {
-  columns: string[];
-  columnMapping: ColumnMapping;
-  setColumnMapping: ValueSetter<ColumnMapping>;
-}
-
 export interface AssessmentDatasetState {
   datasetId: string;
   datasetName: string;
diff --git a/app/lib/types/assessment/home.ts b/app/lib/types/assessment/home.ts
new file mode 100644
index 00000000..7623410b
--- /dev/null
+++ b/app/lib/types/assessment/home.ts
@@ -0,0 +1,144 @@
+import type { ReactNode } from "react";
+import type { PageSlice } from "./core";
+import type { WizardContext } from "./wizard";
+import type { AssessorSummary, AssessorVersion } from "./dataSource";
+import type { AssessmentRun } from "./results";
+import type { StageProgress } from "@/app/lib/assessment/results";
+
+export interface AssessorSelection {
+  configId: string;
+  version: number;
+}
+
+export type RunFilterValue = string;
+
+export const RUN_FILTER_ALL = "all";
+
+export interface HomeRunRow {
+  assessment: AssessmentRun;
+  assessorName: string;
+  version: number | null;
+  cost: string | null;
+  stages: StageProgress[];
+  isActive: boolean;
+}
+
+export interface UseAssessmentHomeResult {
+  isLoading: boolean;
+  error: string | null;
+  refresh: () => Promise<void>;
+
+  assessors: AssessorSummary[];
+  hasPrevAssessors: boolean;
+  hasNextAssessors: boolean;
+  showPrevAssessors: () => void;
+  showNextAssessors: () => void;
+  assessorSearch: string;
+  setAssessorSearch: (value: string) => void;
+  expandedAssessorIds: ReadonlySet<string>;
+  toggleAssessorExpanded: (configId: string) => void;
+  versionsByAssessor: Record<string, AssessorVersion[]>;
+
+  selection: AssessorSelection | null;
+  selectAssessor: (configId: string) => void;
+  selectVersion: (configId: string, version: number) => void;
+  deleteAssessor: (configId: string) => Promise<void>;
+  deleteAssessorVersion: (configId: string, version: number) => Promise<void>;
+  deletingKey: string | null;
+
+  runSlice: PageSlice<HomeRunRow>;
+  runFilter: RunFilterValue;
+  setRunFilter: (value: RunFilterValue) => void;
+  runFilterOptions: { value: string; label: string }[];
+  gotoRunPage: (page: number) => void;
+}
+
+export type DeleteTarget =
+  | { kind: "assessor"; configId: string; name: string }
+  | { kind: "version"; configId: string; version: number };
+
+export interface HomeViewProps {
+  initialSelection: AssessorSelection | null;
+  onNewAssessor: () => void;
+  onEditVersion: (context: WizardContext) => void;
+  onNewRun: (context: WizardContext) => void;
+}
+
+export interface HomePanelProps {
+  title: string;
+  headerActions?: ReactNode;
+  banner?: ReactNode;
+  children: ReactNode;
+  countLabel: string;
+  page?: number;
+  pages?: number;
+  onGoto?: (page: number) => void;
+  cursor?: {
+    hasPrev: boolean;
+    hasNext: boolean;
+    onPrev: () => void;
+    onNext: () => void;
+  };
+  className?: string;
+}
+
+export interface AssessorsPanelProps {
+  home: UseAssessmentHomeResult;
+  onNewAssessor: () => void;
+  onEditVersion: () => void;
+}
+
+export interface AssessorRowProps {
+  assessor: AssessorSummary;
+  selection: AssessorSelection | null;
+  versions: AssessorVersion[] | undefined;
+  isExpanded: boolean;
+  deletingKey: string | null;
+  onSelectAssessor: (configId: string) => void;
+  onSelectVersion: (configId: string, version: number) => void;
+  onToggleExpanded: (configId: string) => void;
+  onRequestDeleteAssessor: (assessor: AssessorSummary) => void;
+  onRequestDeleteVersion: (configId: string, version: number) => void;
+}
+
+export interface AssessorVersionChipsProps {
+  assessor: AssessorSummary;
+  versions: AssessorVersion[] | undefined;
+  chipCount: number;
+  selectedVersion: number | null;
+  isExpanded: boolean;
+  onSelectVersion: (configId: string, version: number) => void;
+  onToggleExpanded: (configId: string) => void;
+}
+
+export interface AssessorVersionListProps {
+  configId: string;
+  versions: AssessorVersion[] | undefined;
+  selectedVersion: number | null;
+  deletingKey: string | null;
+  onSelectVersion: (configId: string, version: number) => void;
+  onRequestDeleteVersion: (configId: string, version: number) => void;
+}
+
+export interface DeleteAssessorDialogProps {
+  target: DeleteTarget;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export interface RunsPanelProps {
+  home: UseAssessmentHomeResult;
+  onNewRun: () => void;
+}
+
+export interface RunRowProps {
+  row: HomeRunRow;
+}
+
+export interface RunRowActionsProps {
+  row: HomeRunRow;
+}
+
+export interface RunRowMetaProps {
+  row: HomeRunRow;
+}
diff --git a/app/lib/types/assessment/index.ts b/app/lib/types/assessment/index.ts
index c64b413a..cd26e52d 100644
--- a/app/lib/types/assessment/index.ts
+++ b/app/lib/types/assessment/index.ts
@@ -1,6 +1,11 @@
-// Barrel for assessment types. Import from "@/app/lib/types/assessment".
 export * from "./core";
+export * from "./batch";
 export * from "./config";
 export * from "./dataset";
+export * from "./submission";
+export * from "./dataSource";
+export * from "./home";
+export * from "./prompt";
 export * from "./results";
+export * from "./wizard";
 export * from "./workflow";
diff --git a/app/lib/types/assessment/prompt.ts b/app/lib/types/assessment/prompt.ts
new file mode 100644
index 00000000..eca3a04a
--- /dev/null
+++ b/app/lib/types/assessment/prompt.ts
@@ -0,0 +1,198 @@
+import type { KeyboardEvent, ReactNode, RefObject } from "react";
+import type {
+  AssessorModelSelection,
+  AssessorVersionDetail,
+} from "./dataSource";
+import type { SchemaProperty } from "./dataset";
+import type { ProviderType } from "@/app/lib/types/configs";
+
+export type PromptFieldType = "text" | "image" | "pdf";
+
+export type PromptZoneId = "instructions" | "submission";
+
+export interface PromptZones {
+  instructions: string;
+  submission: string;
+}
+
+export type PromptStepId = "prefilter" | "assessment";
+
+export interface PromptZoneCopy {
+  label: string;
+  hint: string;
+  placeholder: string;
+}
+
+export type PromptSegmentKind = "plain" | "text" | "attachment" | "unknown";
+
+export interface PromptSegment {
+  kind: PromptSegmentKind;
+  text: string;
+  name?: string;
+}
+
+export type PreviewBlockType = "h1" | "h2" | "li" | "p";
+
+export interface PreviewBlock {
+  type: PreviewBlockType;
+  segments: PromptSegment[];
+}
+
+export interface WizardDraft {
+  prefilterEnabled: boolean;
+  prefilter: PromptZones;
+  assessment: PromptZones;
+  fieldTypes: Record<string, PromptFieldType>;
+  fieldStrict: Record<string, boolean>;
+  outputSchema: SchemaProperty[];
+  models: Record<PromptStepId, AssessorModelSelection>;
+}
+
+export interface UseWizardDraftResult {
+  draft: WizardDraft;
+  setPrefilterEnabled: (enabled: boolean) => void;
+  setZone: (step: PromptStepId, zone: PromptZoneId, value: string) => void;
+  setFieldType: (name: string, type: PromptFieldType) => void;
+  setFieldStrict: (name: string, strict: boolean) => void;
+  setOutputSchema: (schema: SchemaProperty[]) => void;
+  setModel: (step: PromptStepId, provider: ProviderType, model: string) => void;
+  setModelParam: (
+    step: PromptStepId,
+    key: string,
+    value: string | number,
+  ) => void;
+  loadFromVersion: (detail: AssessorVersionDetail) => void;
+  reset: () => void;
+}
+
+export type MentionStage = "type" | "strict";
+
+export interface MentionColumnOption {
+  name: string;
+  isCreate: boolean;
+  type: PromptFieldType;
+}
+
+export interface MentionTypeOption {
+  type: PromptFieldType;
+  label: string;
+  isCurrent: boolean;
+}
+
+export interface MentionStrictOption {
+  strict: boolean;
+  label: string;
+  hint: string;
+  isCurrent: boolean;
+}
+
+export interface UsePromptMentionsParams {
+  columns: string[];
+  fieldTypes: Record<string, PromptFieldType>;
+  fieldStrict: Record<string, boolean>;
+  value: string;
+  onChange: (value: string) => void;
+  onFieldType: (name: string, type: PromptFieldType) => void;
+  onFieldStrict: (name: string, strict: boolean) => void;
+}
+
+export interface UsePromptMentionsResult {
+  inputRef: RefObject<HTMLTextAreaElement | null>;
+  mirrorRef: RefObject<HTMLDivElement | null>;
+  dropdownRef: RefObject<HTMLDivElement | null>;
+  isOpen: boolean;
+  position: { top: number; left: number } | null;
+  activeIndex: number;
+  pendingField: string | null;
+  stage: MentionStage | null;
+  columnOptions: MentionColumnOption[];
+  typeOptions: MentionTypeOption[];
+  strictOptions: MentionStrictOption[];
+  onInput: (value: string, cursor: number) => void;
+  onKeyDown: (event: KeyboardEvent) => void;
+  pickColumn: (option: MentionColumnOption) => void;
+  pickType: (type: PromptFieldType) => void;
+  pickStrict: (strict: boolean) => void;
+  openStrictFor: (
+    name: string,
+    position: { top: number; left: number },
+    via: "hover" | "click",
+  ) => void;
+  scheduleHoverClose: () => void;
+  cancelHoverClose: () => void;
+  closeAll: () => void;
+}
+
+export interface MentionDropdownProps {
+  dropdownRef: RefObject<HTMLDivElement | null>;
+  position: { top: number; left: number } | null;
+  activeIndex: number;
+  pendingField: string | null;
+  stage: MentionStage | null;
+  columnOptions: MentionColumnOption[];
+  typeOptions: MentionTypeOption[];
+  strictOptions: MentionStrictOption[];
+  onPickColumn: (option: MentionColumnOption) => void;
+  onPickType: (type: PromptFieldType) => void;
+  onPickStrict: (strict: boolean) => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+}
+
+export interface PreviewPaneProps {
+  paneRef: RefObject<HTMLDivElement | null>;
+  zones: PromptZones;
+  columns: string[];
+  fieldTypes: Record<string, PromptFieldType>;
+  sampleRow: Record<string, string>;
+  disabledNote?: string;
+}
+
+export interface PromptZoneCardProps {
+  zones: PromptZones;
+  copy: Record<PromptZoneId, PromptZoneCopy>;
+  zoneMinHeight: number;
+  columns: string[];
+  fieldTypes: Record<string, PromptFieldType>;
+  fieldStrict: Record<string, boolean>;
+  onZoneChange: (zone: PromptZoneId, value: string) => void;
+  onFieldType: (name: string, type: PromptFieldType) => void;
+  onFieldStrict: (name: string, strict: boolean) => void;
+}
+
+export interface PromptZoneEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  minHeight: number;
+  enableMentions: boolean;
+  columns: string[];
+  fieldTypes: Record<string, PromptFieldType>;
+  fieldStrict: Record<string, boolean>;
+  onFieldType: (name: string, type: PromptFieldType) => void;
+  onFieldStrict: (name: string, strict: boolean) => void;
+  ariaLabel: string;
+}
+
+export interface EditorStepLayoutProps {
+  children: ReactNode;
+  zones: PromptZones;
+  columns: string[];
+  fieldTypes: Record<string, PromptFieldType>;
+  sampleRow: Record<string, string>;
+  previewDisabledNote?: string;
+}
+
+export interface ModelChipProps {
+  step: PromptStepId;
+  selection: AssessorModelSelection;
+  onModel: (step: PromptStepId, provider: ProviderType, model: string) => void;
+  onParam: (step: PromptStepId, key: string, value: string | number) => void;
+}
+
+export interface ModelPickerProps {
+  step: PromptStepId;
+  selection: AssessorModelSelection;
+  onModel: (step: PromptStepId, provider: ProviderType, model: string) => void;
+  onParam: (step: PromptStepId, key: string, value: string | number) => void;
+}
diff --git a/app/lib/types/assessment/results.ts b/app/lib/types/assessment/results.ts
index 13f1cc9d..8618253e 100644
--- a/app/lib/types/assessment/results.ts
+++ b/app/lib/types/assessment/results.ts
@@ -1,4 +1,3 @@
-// Assessment types: runs, child runs, post-processing, results, spreadsheet.
 import type { ListResponse } from "./core";
 
 export interface PipelineStageEntry {
@@ -11,6 +10,8 @@ export interface PipelineConfig {
   stages: PipelineStageEntry[];
 }
 
+import type { AssessmentSummary } from "./batch";
+
 export interface AssessmentRunStat {
   run_id: number;
   config_id: string | null;
@@ -24,24 +25,10 @@ export interface AssessmentRunStat {
   prefilter_total_rejected: number | null;
   stage: string | null;
   stage_status: string | null;
+  cost?: string | null;
 }
 
-export interface AssessmentRun {
-  id: number;
-  experiment_name: string;
-  dataset_name: string | null;
-  dataset_id: number | null;
-  status: string;
-  total_runs: number;
-  pending_runs: number;
-  processing_runs: number;
-  completed_runs: number;
-  failed_runs: number;
-  run_stats: AssessmentRunStat[];
-  error_message: string | null;
-  inserted_at: string;
-  updated_at: string;
-}
+export type AssessmentRun = AssessmentSummary;
 
 export interface PostProcessingComputedColumn {
   name: string;
@@ -100,20 +87,12 @@ export interface AssessmentChildRun {
   updated_at: string;
 }
 
-export type StatusFilter = "all" | "processing" | "completed" | "failed";
 export type ExportFormat = "csv" | "xlsx";
 export type ResultTone = "default" | "warning" | "success" | "error";
 export type AssessmentTag = "ASSESSMENT";
 export type AssessmentListResponse = ListResponse<AssessmentRun>;
 export type AssessmentChildRunListResponse = ListResponse<AssessmentChildRun>;
 
-export interface ResultsCounts {
-  total: number;
-  processing: number;
-  completed: number;
-  failed: number;
-}
-
 export type UniverCommandInfo = {
   id: string;
   type?: number;
@@ -134,3 +113,16 @@ export type SpreadsheetStateEnvelope = {
   ts: number;
   data: object;
 };
+
+export interface ResultsToolbarProps {
+  title: string;
+  subtitle: string;
+  onBack: () => void;
+  onDownload: () => void;
+}
+
+export interface SpreadsheetViewProps {
+  runId: string;
+  headers: string[];
+  rows: string[][];
+}
diff --git a/app/lib/types/assessment/submission.ts b/app/lib/types/assessment/submission.ts
new file mode 100644
index 00000000..497045f3
--- /dev/null
+++ b/app/lib/types/assessment/submission.ts
@@ -0,0 +1,92 @@
+import type { ValueSetter } from "./core";
+import type { DatasetViewModalData } from "./dataset";
+import type { ChangeEvent, DragEvent } from "react";
+
+export interface AssessmentSubmission {
+  submission_id: string;
+  name: string;
+  description?: string | null;
+  total_items: number;
+  object_store_url?: string | null;
+  signed_url?: string | null;
+  preview?: SubmissionPreviewRows | null;
+}
+
+export interface SubmissionPreviewRows {
+  headers?: string[];
+  rows?: string[][];
+  returned_rows?: number;
+  truncated?: boolean;
+}
+
+export interface SubmissionPreviewPayload {
+  total_items?: number;
+  preview?: SubmissionPreviewRows;
+}
+
+export interface SubmissionPreview {
+  headers: string[];
+  rows: string[][];
+  totalItems: number;
+  truncated: boolean;
+}
+
+export interface CreateSubmissionInput {
+  name: string;
+  description?: string;
+  file: File;
+}
+
+export interface UseSubmissionFormResult {
+  name: string;
+  description: string;
+  file: File | null;
+  isDragging: boolean;
+  fileInputRef: React.RefObject<HTMLInputElement | null>;
+  setName: (value: string) => void;
+  setDescription: (value: string) => void;
+  setIsDragging: (value: boolean) => void;
+  removeFile: () => void;
+  reset: () => void;
+  handleFileSelect: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  handleDrop: (event: React.DragEvent<HTMLElement>) => void;
+}
+
+export interface UseSubmissionStepResult {
+  form: UseSubmissionFormResult;
+  submissions: AssessmentSubmission[];
+  selectedId: string;
+  isLoading: boolean;
+  isLoadingColumns: boolean;
+  isCreating: boolean;
+  viewingId: string | null;
+  deletingId: string | null;
+  viewModalData: DatasetViewModalData | null;
+  confirmDeleteId: string | null;
+  pendingDelete: AssessmentSubmission | undefined;
+  setConfirmDeleteId: (value: string | null) => void;
+  setViewModalData: (value: DatasetViewModalData | null) => void;
+  handleCreate: () => Promise<void>;
+  handleSelect: (id: string, name?: string) => Promise<void>;
+  handleView: (submissionId: string, name: string) => Promise<void>;
+  handleDelete: (id: string) => Promise<void>;
+}
+
+export interface SubmissionListProps {
+  submissions: AssessmentSubmission[];
+  selectedId: string;
+  isLoading: boolean;
+  isLoadingColumns: boolean;
+  viewingId: string | null;
+  onSelect: (id: string, name?: string) => void;
+  onView: (submissionId: string, name: string) => void;
+  onRequestDelete: ValueSetter<string>;
+}
+
+export interface CreatePanelProps {
+  form: UseSubmissionFormResult;
+  isCreating: boolean;
+  onCreate: () => void;
+  layout?: "panel" | "inline";
+  onCancel?: () => void;
+}
diff --git a/app/lib/types/assessment/wizard.ts b/app/lib/types/assessment/wizard.ts
new file mode 100644
index 00000000..298822ef
--- /dev/null
+++ b/app/lib/types/assessment/wizard.ts
@@ -0,0 +1,144 @@
+import type { ReactNode } from "react";
+import type { Step, ValueSetter } from "./core";
+import type { SchemaProperty } from "./dataset";
+import type { AssessorVersionDetail } from "./dataSource";
+import type {
+  PromptFieldType,
+  PromptZoneId,
+  PromptZones,
+  UseWizardDraftResult,
+  WizardDraft,
+} from "./prompt";
+import type { UseSubmissionStepResult } from "./submission";
+
+export type AssessmentView = "home" | "wizard";
+
+export type AssessmentWizardFlow = "new" | "edit" | "run";
+export type AssessmentWizardStep = 1 | 2 | 3 | 4;
+
+export interface WizardContext {
+  configId: string;
+  version: number;
+  assessorName: string;
+}
+
+export interface UseAssessmentWizardResult {
+  flow: AssessmentWizardFlow;
+  step: AssessmentWizardStep;
+  completedSteps: Set<number>;
+  context: WizardContext | null;
+  versionDetail: AssessorVersionDetail | null;
+  isLoadingContext: boolean;
+  draft: UseWizardDraftResult;
+
+  submissionId: string;
+  submissionName: string;
+
+  runName: string;
+  setRunName: (value: string) => void;
+  isSubmitting: boolean;
+
+  isDirty: boolean;
+  canSave: boolean;
+  isSaving: boolean;
+  isReviewOpen: boolean;
+  savedTitle: string | null;
+  openReview: () => void;
+  closeReview: () => void;
+  saveVersion: (name: string, commitMessage: string) => Promise<void>;
+  dismissSaved: (next: "run" | "home") => void;
+
+  startNew: () => void;
+  startEdit: (context: WizardContext) => void;
+  startRun: (context: WizardContext) => void;
+  goToStep: (step: number) => void;
+  next: () => void;
+  back: () => void;
+  submitRun: () => Promise<void>;
+}
+
+export interface WizardViewProps {
+  wizard: UseAssessmentWizardResult;
+  onHome: () => void;
+}
+
+export interface WizardStepBodyProps {
+  wizard: UseAssessmentWizardResult;
+  submission: UseSubmissionStepResult;
+  columns: string[];
+  sampleRow: Record<string, string>;
+}
+
+export interface WizardFooterProps {
+  showBack: boolean;
+  hint: string;
+  nextLabel: string;
+  nextDisabled: boolean;
+  isBusy: boolean;
+  onBack: () => void;
+  onNext: () => void;
+}
+
+export interface SubmissionStepProps {
+  step: UseSubmissionStepResult;
+}
+
+export interface PrefilterStepProps {
+  enabled: boolean;
+  zones: PromptZones;
+  columns: string[];
+  fieldTypes: Record<string, PromptFieldType>;
+  fieldStrict: Record<string, boolean>;
+  sampleRow: Record<string, string>;
+  onToggle: (enabled: boolean) => void;
+  onZoneChange: (zone: PromptZoneId, value: string) => void;
+  onFieldType: (name: string, type: PromptFieldType) => void;
+  onFieldStrict: (name: string, strict: boolean) => void;
+}
+
+export interface AssessmentStepProps {
+  zones: PromptZones;
+  columns: string[];
+  fieldTypes: Record<string, PromptFieldType>;
+  fieldStrict: Record<string, boolean>;
+  sampleRow: Record<string, string>;
+  outputSchema: SchemaProperty[];
+  onZoneChange: (zone: PromptZoneId, value: string) => void;
+  onFieldType: (name: string, type: PromptFieldType) => void;
+  onFieldStrict: (name: string, strict: boolean) => void;
+  onOutputSchema: (schema: SchemaProperty[]) => void;
+}
+
+export interface RunStepProps {
+  wizard: UseAssessmentWizardResult;
+  step: UseSubmissionStepResult;
+}
+
+export interface ReviewSaveModalProps {
+  open: boolean;
+  draft: WizardDraft;
+  sampleRow: Record<string, string>;
+  defaultName: string;
+  isSaving: boolean;
+  onClose: () => void;
+  onSave: (name: string, commitMessage: string) => void;
+}
+
+export interface SavedNextModalProps {
+  open: boolean;
+  title: string;
+  onRun: () => void;
+  onHome: () => void;
+}
+
+export interface StepperProps {
+  steps: Step[];
+  currentStep: number;
+  onStepClick: ValueSetter<number>;
+  completedSteps: Set<number>;
+  locked?: boolean;
+  isStepAllowed?: (step: number) => boolean;
+  onHome?: () => void;
+  leading?: ReactNode;
+  trailing?: ReactNode;
+}
diff --git a/app/lib/types/assessment/workflow.ts b/app/lib/types/assessment/workflow.ts
index 64e2293b..362b3842 100644
--- a/app/lib/types/assessment/workflow.ts
+++ b/app/lib/types/assessment/workflow.ts
@@ -1,98 +1,14 @@
-// Assessment types: composite page/panel/step props that span sub-domains.
-import type {
-  AssessmentTab,
-  AssessmentTabId,
-  SampleRow,
-  StateSetter,
-  StepNavigationProps,
-  ValueSetter,
-  WithForbiddenHandler,
-} from "./core";
-import type { ConfigSelection } from "./config";
-import type { ColumnMapping, PrefilterConfig, SchemaProperty } from "./dataset";
+import type { StepNavigationProps } from "./core";
+import type { ColumnMapping, SchemaProperty } from "./dataset";
+import type { AssessorSelection } from "./home";
 import type { PostProcessingConfig } from "./results";
-
-export interface AssessmentFormState {
-  experimentName: string;
-  datasetId: string;
-  datasetName: string;
-  columns: string[];
-  sampleRow: SampleRow;
-  columnMapping: ColumnMapping;
-  systemInstruction: string;
-  promptTemplate: string;
-  outputSchema: SchemaProperty[];
-  configs: ConfigSelection[];
-  prefilterConfig: PrefilterConfig | null;
-  postProcessingConfig: PostProcessingConfig | null;
-}
-
-export interface PromptPanelProps {
-  textColumns: string[];
-  sampleRow: SampleRow;
-  systemInstruction: string;
-  setSystemInstruction: ValueSetter<string>;
-  promptTemplate: string;
-  setPromptTemplate: ValueSetter<string>;
-}
-
-export interface ResponseSchemaProps {
-  schema: SchemaProperty[];
-  setSchema: ValueSetter<SchemaProperty[]>;
-  summary: string;
-  hasFields: boolean;
-}
-
-export interface ConfigPanelProps {
-  canSubmitAssessment: boolean;
-  columns: string[];
-  columnMapping: ColumnMapping;
-  completedSteps: Set<number>;
-  configStep: number;
-  configs: ConfigSelection[];
-  datasetId: string | null;
-  experimentName: string;
-  formState: AssessmentFormState;
-  hasDataset: boolean;
-  isSubmitting: boolean;
-  prefilterConfig: PrefilterConfig | null;
-  outputSchema: SchemaProperty[];
-  systemInstruction: string;
-  promptTemplate: string;
-  sampleRow: SampleRow;
-  setActiveTabToDatasets: () => void;
-  setColumnMapping: ValueSetter<ColumnMapping>;
-  setConfigStep: ValueSetter<number>;
-  setConfigs: StateSetter<ConfigSelection[]>;
-  setExperimentName: ValueSetter<string>;
-  setPrefilterConfig: ValueSetter<PrefilterConfig | null>;
-  setOutputSchema: ValueSetter<SchemaProperty[]>;
-  setSystemInstruction: ValueSetter<string>;
-  setPromptTemplate: ValueSetter<string>;
-  postProcessingConfig: PostProcessingConfig | null;
-  setPostProcessingConfig: ValueSetter<PostProcessingConfig | null>;
-  submitBlockerMessage: string;
-  onSubmit: () => void;
-  onStepComplete: ValueSetter<number>;
-}
-
-export type EvaluationsTabProps = WithForbiddenHandler;
-
-export interface DatasetsTabProps extends WithForbiddenHandler {
-  datasetId: string;
-  setDatasetId: ValueSetter<string>;
-  setSelectedDatasetName: ValueSetter<string>;
-  onColumnsLoaded: (columns: string[], sampleRow?: SampleRow) => void;
-  onNext: () => void;
-}
+import type { AssessmentView, UseAssessmentWizardResult } from "./wizard";
 
 export interface PageLayoutProps {
-  activeTab: AssessmentTabId;
-  tabs: AssessmentTab[];
-  onTabSwitch: ValueSetter<AssessmentTabId>;
-  datasetsTabProps: DatasetsTabProps;
-  configPanelProps: ConfigPanelProps;
-  evaluationsTabProps: EvaluationsTabProps;
+  view: AssessmentView;
+  wizard: UseAssessmentWizardResult;
+  homeSelection: AssessorSelection | null;
+  onGoHome: () => void;
 }
 
 export interface PostProcessingStepProps extends StepNavigationProps {
@@ -108,16 +24,3 @@ export interface PostProcessingPanelProps {
   initialConfig: PostProcessingConfig | null;
   onSave: (config: PostProcessingConfig) => Promise<void>;
 }
-
-export interface PromptAndConfigStepProps extends StepNavigationProps {
-  textColumns: string[];
-  sampleRow: SampleRow;
-  systemInstruction: string;
-  setSystemInstruction: ValueSetter<string>;
-  promptTemplate: string;
-  setPromptTemplate: ValueSetter<string>;
-  configs: ConfigSelection[];
-  setConfigs: StateSetter<ConfigSelection[]>;
-  outputSchema: SchemaProperty[];
-  setOutputSchema: ValueSetter<SchemaProperty[]>;
-}
diff --git a/app/lib/types/configs.ts b/app/lib/types/configs.ts
index 1ab8a890..2ae3ff97 100644
--- a/app/lib/types/configs.ts
+++ b/app/lib/types/configs.ts
@@ -4,6 +4,7 @@ export type ProviderType =
   | "openai"
   | "google"
   | "google-aistudio"
+  | "google-gcp"
   | "anthropic";
 
 export interface SavedConfig {
diff --git a/app/lib/types/credentials.ts b/app/lib/types/credentials.ts
index b5fae9eb..b10e8aaa 100644
--- a/app/lib/types/credentials.ts
+++ b/app/lib/types/credentials.ts
@@ -2,7 +2,10 @@ export interface FieldDef {
   key: string;
   label: string;
   placeholder: string;
-  type?: "text" | "password";
+  type?: "text" | "password" | "textarea";
+  required?: boolean;
+  json?: boolean;
+  jsonRequiredKeys?: string[];
 }
 
 export interface ProviderDef {
@@ -35,6 +38,7 @@ export const PROVIDERS: ProviderDef[] = [
         label: "API Key",
         placeholder: "sk-xxxxx-xxxxx-xxxxx",
         type: "password",
+        required: true,
       },
     ],
   },
@@ -49,12 +53,19 @@ export const PROVIDERS: ProviderDef[] = [
         label: "Secret Key",
         placeholder: "sk-lf-xxxxx",
         type: "password",
+        required: true,
+      },
+      {
+        key: "public_key",
+        label: "Public Key",
+        placeholder: "pk-lf-xxxxx",
+        required: true,
       },
-      { key: "public_key", label: "Public Key", placeholder: "pk-lf-xxxxx" },
       {
         key: "host",
         label: "Host URL",
         placeholder: "https://cloud.langfuse.com",
+        required: true,
       },
     ],
   },
@@ -70,6 +81,56 @@ export const PROVIDERS: ProviderDef[] = [
         label: "API Key",
         placeholder: "AIzaSy-xxxxx",
         type: "password",
+        required: true,
+      },
+    ],
+  },
+  {
+    id: "google-gcp",
+    name: "Google Vertex AI",
+    description:
+      "Run Gemini on Vertex AI. Batch jobs read and write through your own GCS bucket, authenticated with a service account.",
+    credentialKey: "google-gcp",
+    fields: [
+      {
+        key: "api_key",
+        label: "API Key",
+        placeholder: "AIzaSy-xxxxx",
+        type: "password",
+        required: true,
+      },
+      {
+        key: "project_id",
+        label: "GCP Project ID",
+        placeholder: "my-gcp-project",
+        required: true,
+      },
+      {
+        key: "location",
+        label: "Region",
+        placeholder: "us-central1",
+        required: true,
+      },
+      {
+        key: "gcs_bucket",
+        label: "GCS Bucket",
+        placeholder: "my-batch-bucket",
+        required: true,
+      },
+      {
+        key: "sa_key",
+        label: "Service Account Key (JSON)",
+        placeholder: '{\n  "type": "service_account",\n  "project_id": "…"\n}',
+        type: "textarea",
+        required: true,
+        json: true,
+        jsonRequiredKeys: [
+          "type",
+          "project_id",
+          "private_key",
+          "client_email",
+          "token_uri",
+        ],
       },
     ],
   },
@@ -84,6 +145,7 @@ export const PROVIDERS: ProviderDef[] = [
         label: "API Key",
         placeholder: "sk-ant-xxxxx",
         type: "password",
+        required: true,
       },
     ],
   },
@@ -98,6 +160,7 @@ export const PROVIDERS: ProviderDef[] = [
         label: "API Key",
         placeholder: "sk_xxxxx",
         type: "password",
+        required: true,
       },
     ],
   },
@@ -112,6 +175,7 @@ export const PROVIDERS: ProviderDef[] = [
         label: "API Key",
         placeholder: "xxxxx",
         type: "password",
+        required: true,
       },
     ],
   },
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index 1c3aad16..a5e54787 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -1,4 +1,4 @@
-import { Credential, ProviderDef } from "@/app/lib/types/credentials";
+import { Credential, FieldDef, ProviderDef } from "@/app/lib/types/credentials";
 import { formatDistanceToNow } from "date-fns";
 import { clearConfigCache } from "@/app/lib/store/config";
 import {
@@ -33,6 +33,103 @@ export function getExistingForProvider(
   return creds.find((c) => c.provider === provider.credentialKey) || null;
 }
 
+export function isMaskedCredentialValue(value: string): boolean {
+  return value.includes("*");
+}
+
+export function populateCredentialForm(
+  provider: ProviderDef,
+  existing: Credential | null,
+): Record<string, string> {
+  const values: Record<string, string> = {};
+  provider.fields.forEach((field) => {
+    const stored = existing?.credential?.[field.key];
+    if (stored === undefined || stored === null) {
+      values[field.key] = "";
+    } else if (typeof stored === "string") {
+      values[field.key] = stored;
+    } else {
+      values[field.key] = JSON.stringify(stored, null, 2);
+    }
+  });
+  return values;
+}
+
+export interface CredentialPayloadResult {
+  payload: Record<string, unknown>;
+  error: string | null;
+}
+
+function repairPemNewlines(value: Record<string, unknown>) {
+  for (const [key, entry] of Object.entries(value)) {
+    if (
+      typeof entry === "string" &&
+      entry.includes("-----BEGIN") &&
+      entry.includes("\\n") &&
+      !entry.includes("\n")
+    ) {
+      value[key] = entry.replace(/\\n/g, "\n");
+    }
+  }
+}
+
+function parseJsonField(
+  field: FieldDef,
+  raw: string,
+): { value?: Record<string, unknown>; error?: string } {
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return { error: `${field.label} must be valid JSON` };
+  }
+
+  if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+    return { error: `${field.label} must be a JSON object` };
+  }
+
+  const value = parsed as Record<string, unknown>;
+  repairPemNewlines(value);
+
+  const missing = (field.jsonRequiredKeys ?? []).filter((key) => !value[key]);
+  if (missing.length > 0) {
+    return { error: `${field.label} is missing: ${missing.join(", ")}` };
+  }
+
+  return { value };
+}
+
+export function buildCredentialPayload(
+  provider: ProviderDef,
+  formValues: Record<string, string>,
+): CredentialPayloadResult {
+  const payload: Record<string, unknown> = {};
+
+  for (const field of provider.fields) {
+    const raw = (formValues[field.key] ?? "").trim();
+    if (!raw || isMaskedCredentialValue(raw)) continue;
+
+    if (field.json) {
+      const parsed = parseJsonField(field, raw);
+      if (parsed.error) return { payload, error: parsed.error };
+      payload[field.key] = parsed.value;
+    } else {
+      payload[field.key] = raw;
+    }
+  }
+
+  return { payload, error: null };
+}
+
+export function missingCredentialFields(
+  provider: ProviderDef,
+  formValues: Record<string, string>,
+): FieldDef[] {
+  return provider.fields.filter(
+    (field) => field.required && !formValues[field.key]?.trim(),
+  );
+}
+
 export const formatRelativeTime = (timestamp: string | number): string => {
   const now = Date.now();
 
diff --git a/app/lib/utils/assessment.ts b/app/lib/utils/assessment.ts
index 383dbb4a..c72e3862 100644
--- a/app/lib/utils/assessment.ts
+++ b/app/lib/utils/assessment.ts
@@ -10,6 +10,7 @@ import type {
   CreateDatasetResponse,
   DatasetPreview,
   DatasetPreviewResponse,
+  PageSlice,
   ReviewColumn,
   RoleVisuals,
   SchemaProperty,
@@ -22,6 +23,30 @@ export function isAllowedDatasetFile(fileName: string): boolean {
   );
 }
 
+/** Shape adapter shared by the API path and the mock data source. */
+export function toDatasetPreview(
+  response: DatasetPreviewResponse,
+): DatasetPreview {
+  const payload = response?.data ?? response;
+  const preview = payload?.preview;
+  if (!preview) {
+    throw new Error("Dataset preview is unavailable.");
+  }
+
+  const headers = preview.headers ?? [];
+  if (headers.length === 0) {
+    throw new Error("Dataset file is missing column headers.");
+  }
+
+  const rowCount = preview.returned_rows ?? 0;
+  return {
+    headers,
+    rows: preview.rows ?? [],
+    totalItems: payload.total_items ?? rowCount,
+    truncated: Boolean(preview.truncated),
+  };
+}
+
 export async function fetchDatasetPreview(
   id: string | number,
   apiKey: string,
@@ -41,22 +66,28 @@ export async function fetchDatasetPreview(
     throw new Error(message);
   }
 
-  const payload = res?.data ?? res;
-  const preview = payload?.preview;
-  if (!preview) {
-    throw new Error("Dataset preview is unavailable.");
-  }
-
-  const headers = preview.headers ?? [];
-  if (headers.length === 0) {
-    throw new Error("Dataset file is missing column headers.");
-  }
+  return toDatasetPreview(res);
+}
 
+/**
+ * Columns the sheet names. The header decides, not the sampled cells: a named
+ * column that happens to be empty in the preview is still in every row the
+ * backend parses, and `input_schema` must declare it or the run 422s.
+ */
+export function nonBlankColumns(preview: DatasetPreview): {
+  headers: string[];
+  sampleRow: Record<string, string>;
+} {
+  const keptIdx = preview.headers
+    .map((_, colIdx) => colIdx)
+    .filter((colIdx) => !isBlankCell(preview.headers[colIdx]));
+
+  const firstRow = preview.rows[0] || [];
   return {
-    headers,
-    rows: preview.rows ?? [],
-    totalItems: payload?.total_items ?? preview.returned_rows ?? 0,
-    truncated: Boolean(preview.truncated),
+    headers: keptIdx.map((idx) => preview.headers[idx]),
+    sampleRow: Object.fromEntries(
+      keptIdx.map((idx) => [preview.headers[idx], String(firstRow[idx] ?? "")]),
+    ),
   };
 }
 
@@ -239,6 +270,36 @@ export function isBlankCell(cell: string | undefined): boolean {
   return cell == null || String(cell).trim() === "";
 }
 
+export function paginate<T>(
+  items: T[],
+  page: number,
+  perPage: number,
+): PageSlice<T> {
+  const pages = Math.max(1, Math.ceil(items.length / perPage));
+  const safePage = Math.min(Math.max(1, page), pages);
+  return {
+    items: items.slice((safePage - 1) * perPage, safePage * perPage),
+    page: safePage,
+    pages,
+    total: items.length,
+  };
+}
+
+/** Page numbers to show around the current one, so long lists stay one row wide. */
+export function pageWindow(
+  page: number,
+  pages: number,
+  size: number,
+): number[] {
+  const start = Math.max(1, Math.min(page - 1, pages - size + 1));
+  const end = Math.min(pages, start + size - 1);
+  const window: number[] = [];
+  for (let candidate = start; candidate <= end; candidate += 1) {
+    window.push(candidate);
+  }
+  return window;
+}
+
 interface AssessmentSubmitChecks {
   datasetId: string | null;
   hasMapperSelection: boolean;
diff --git a/app/lib/utils/assessmentFetcher.ts b/app/lib/utils/assessmentFetcher.ts
index 46635e72..22ae9cd4 100644
--- a/app/lib/utils/assessmentFetcher.ts
+++ b/app/lib/utils/assessmentFetcher.ts
@@ -89,10 +89,12 @@ function buildPageResult<T>(
   items: T[],
   skip: number,
   limit: number,
+  metadata?: Record<string, unknown> | null,
 ): PagedResult<T> {
+  const reported = metadata?.has_more;
   return {
     items,
-    hasMore: items.length === limit,
+    hasMore: typeof reported === "boolean" ? reported : items.length === limit,
     nextSkip: skip + items.length,
   };
 }
@@ -117,6 +119,7 @@ export async function fetchConfigPage(params: {
   apiKey: string;
   skip?: number;
   limit?: number;
+  search?: string;
 }): Promise<PagedResult<ConfigPublic>> {
   const skip = params.skip ?? 0;
   const limit = params.limit ?? DEFAULT_PAGE_LIMIT;
@@ -125,6 +128,7 @@ export async function fetchConfigPage(params: {
     limit: String(limit),
     tag: ASSESSMENT_TAG,
   });
+  if (params.search?.trim()) query.set("query", params.search.trim());
   const data = await apiFetch<ConfigListResponse>(
     `/api/configs?${query.toString()}`,
     params.apiKey,
@@ -132,7 +136,7 @@ export async function fetchConfigPage(params: {
   if (!data.success || !data.data) {
     throw new Error(data.error || "Failed to fetch configs");
   }
-  return buildPageResult(data.data, skip, limit);
+  return buildPageResult(data.data, skip, limit, data.metadata);
 }
 
 export async function fetchConfigVersionsPage(
@@ -154,7 +158,7 @@ export async function fetchConfigVersionsPage(
   if (!data.success || !data.data) {
     throw new Error(data.error || "Failed to fetch config versions");
   }
-  return buildPageResult(data.data, skip, limit);
+  return buildPageResult(data.data, skip, limit, data.metadata);
 }
 
 export async function fetchConfigVersionDetail(