diff --git a/frontend/src/App.test.tsx b/frontend/src/App.test.tsx
index 86204f5..c2cd0f7 100644
--- a/frontend/src/App.test.tsx
+++ b/frontend/src/App.test.tsx
@@ -67,7 +67,11 @@ describe("App routing", () => {
     it("renders ExperimentPage at /experiments/:id", async () => {
       renderWithRouter("/experiments/abc-123");
       await waitFor(() => {
-        expect(screen.getByText("Experiment")).toBeInTheDocument();
+        // Page attempts to load experiment — may show error or loading state
+        expect(
+          screen.getByText("Loading experiment…") ||
+            screen.getByRole("alert"),
+        ).toBeInTheDocument();
       });
     });
 
diff --git a/frontend/src/pages/ExperimentPage.test.tsx b/frontend/src/pages/ExperimentPage.test.tsx
new file mode 100644
index 0000000..4156383
--- /dev/null
+++ b/frontend/src/pages/ExperimentPage.test.tsx
@@ -0,0 +1,493 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import ExperimentPage from "./ExperimentPage";
+import * as client from "../api/client";
+
+// ---------------------------------------------------------------------------
+// Mocks
+// ---------------------------------------------------------------------------
+
+const mockNavigate = vi.fn();
+vi.mock("react-router-dom", async () => {
+  const actual = await vi.importActual("react-router-dom");
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+const MOCK_EXPERIMENT: client.ExperimentResponse = {
+  id: "exp-1",
+  project_id: "proj-1",
+  name: "Test Experiment",
+  description: "A test experiment",
+  sample_data: { text: "Hello world" },
+  pipeline_stages: {
+    stages: [
+      {
+        id: "s1",
+        prompt_template: "Summarize: {{ input_data }}",
+        model: "gpt-4",
+        endpoint_id: "ep-1",
+        parameters: {},
+      },
+    ],
+  },
+  scoring_config: null,
+  parameter_space: null,
+  status: "draft",
+  created_at: "2026-04-01T10:00:00Z",
+  updated_at: "2026-04-07T08:00:00Z",
+};
+
+const MOCK_ENDPOINTS: client.EndpointResponse[] = [
+  { id: "ep-1", name: "Local vLLM", url: "http://localhost:8080", default_model: "gpt-4" },
+  { id: "ep-2", name: "OpenAI", url: "https://api.openai.com", default_model: "gpt-3.5-turbo" },
+];
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function renderNew() {
+  return render(
+    <MemoryRouter initialEntries={["/experiments/new"]}>
+      <Routes>
+        <Route path="/experiments/:id" element={<ExperimentPage />} />
+      </Routes>
+    </MemoryRouter>,
+  );
+}
+
+function renderExisting(id = "exp-1") {
+  return render(
+    <MemoryRouter initialEntries={[`/experiments/${id}`]}>
+      <Routes>
+        <Route path="/experiments/:id" element={<ExperimentPage />} />
+      </Routes>
+    </MemoryRouter>,
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe("ExperimentPage", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    mockNavigate.mockReset();
+    // Default stubs
+    vi.spyOn(client.endpoints, "list").mockResolvedValue({
+      items: MOCK_ENDPOINTS,
+      total: 2,
+    });
+  });
+
+  // ---- New experiment ---------------------------------------------------
+
+  it("renders new experiment form without loading data", async () => {
+    renderNew();
+
+    await waitFor(() => {
+      expect(screen.getByText("New Experiment")).toBeInTheDocument();
+    });
+    expect(screen.getByLabelText("Name")).toHaveValue("");
+    expect(screen.getByLabelText("Description")).toHaveValue("");
+  });
+
+  it("shows all six sections for new experiment", async () => {
+    renderNew();
+
+    await waitFor(() => {
+      expect(screen.getByText("Basic Info")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Sample Data")).toBeInTheDocument();
+    expect(screen.getByText("Pipeline Stages")).toBeInTheDocument();
+    expect(screen.getByText("Scoring Configuration")).toBeInTheDocument();
+    expect(screen.getByText("Parameter Space")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Save Draft" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Run Single" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Start Sweep" })).toBeInTheDocument();
+  });
+
+  // ---- Loading existing experiment --------------------------------------
+
+  it("loads and populates existing experiment data", async () => {
+    vi.spyOn(client.experiments, "get").mockResolvedValue(MOCK_EXPERIMENT);
+    renderExisting();
+
+    await waitFor(() => {
+      expect(screen.getByText("Edit Experiment")).toBeInTheDocument();
+    });
+    expect(screen.getByLabelText("Name")).toHaveValue("Test Experiment");
+    expect(screen.getByLabelText("Description")).toHaveValue(
+      "A test experiment",
+    );
+  });
+
+  it("shows loading state while fetching", () => {
+    vi.spyOn(client.experiments, "get").mockImplementation(
+      () => new Promise(() => {}),
+    );
+    renderExisting();
+    expect(screen.getByText("Loading experiment…")).toBeInTheDocument();
+  });
+
+  it("shows error state on load failure", async () => {
+    vi.spyOn(client.experiments, "get").mockRejectedValue(
+      new client.ApiError(404, "Not Found", { detail: "Not found" }),
+    );
+    renderExisting();
+
+    await waitFor(() => {
+      expect(screen.getByRole("alert")).toHaveTextContent(
+        "Failed to load experiment (404)",
+      );
+    });
+  });
+
+  it("shows network error on fetch failure", async () => {
+    vi.spyOn(client.experiments, "get").mockRejectedValue(
+      new Error("fetch failed"),
+    );
+    renderExisting();
+
+    await waitFor(() => {
+      expect(screen.getByRole("alert")).toHaveTextContent("Network error");
+    });
+  });
+
+  it("retries loading on retry button click", async () => {
+    const getSpy = vi
+      .spyOn(client.experiments, "get")
+      .mockRejectedValueOnce(new Error("fail"))
+      .mockResolvedValueOnce(MOCK_EXPERIMENT);
+
+    renderExisting();
+
+    await waitFor(() => {
+      expect(screen.getByText("Retry")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    await user.click(screen.getByText("Retry"));
+
+    await waitFor(() => {
+      expect(screen.getByLabelText("Name")).toHaveValue("Test Experiment");
+    });
+    expect(getSpy).toHaveBeenCalledTimes(2);
+  });
+
+  // ---- Sample data section ----------------------------------------------
+
+  it("switches between sample data modes", async () => {
+    renderNew();
+
+    await waitFor(() => {
+      expect(screen.getByText("Sample Data")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+
+    // Default: text mode
+    expect(screen.getByPlaceholderText("Paste your sample data here...")).toBeInTheDocument();
+
+    // Switch to JSON
+    await user.click(screen.getByRole("button", { name: "JSON" }));
+    expect(screen.getByPlaceholderText('{"key": "value"}')).toBeInTheDocument();
+
+    // Switch to file upload
+    await user.click(screen.getByRole("button", { name: "Upload File" }));
+    expect(screen.getByTestId("file-upload")).toBeInTheDocument();
+  });
+
+  it("shows JSON validation error for invalid JSON", async () => {
+    renderNew();
+
+    await waitFor(() => {
+      expect(screen.getByText("Sample Data")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: "JSON" }));
+
+    const textarea = screen.getByPlaceholderText('{"key": "value"}');
+    await user.type(textarea, "not json");
+
+    expect(screen.getByRole("alert")).toHaveTextContent("Invalid JSON");
+  });
+
+  // ---- Pipeline stages --------------------------------------------------
+
+  it("adds and removes pipeline stages", async () => {
+    renderNew();
+
+    await waitFor(() => {
+      expect(screen.getByText("Pipeline Stages")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+
+    // Initially empty
+    expect(screen.getByText("No stages yet. Add a pipeline stage to get started.")).toBeInTheDocument();
+
+    // Add a stage
+    await user.click(screen.getByRole("button", { name: "Add Stage" }));
+    expect(screen.getByTestId("pipeline-stage-0")).toBeInTheDocument();
+    expect(screen.getByText("Stage 1")).toBeInTheDocument();
+
+    // Add another
+    await user.click(screen.getByRole("button", { name: "Add Stage" }));
+    expect(screen.getByTestId("pipeline-stage-1")).toBeInTheDocument();
+    expect(screen.getByText("Stage 2")).toBeInTheDocument();
+
+    // Remove first stage
+    await user.click(screen.getByRole("button", { name: "Remove stage 1" }));
+    expect(screen.queryByText("Stage 2")).not.toBeInTheDocument();
+    expect(screen.getByText("Stage 1")).toBeInTheDocument();
+  });
+
+  it("shows template variable hints in pipeline stage", async () => {
+    renderNew();
+
+    await waitFor(() => {
+      expect(screen.getByText("Pipeline Stages")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: "Add Stage" }));
+
+    expect(screen.getByText("{{ input_data }}")).toBeInTheDocument();
+    expect(screen.getByText("{{ previous_stage_output }}")).toBeInTheDocument();
+  });
+
+  it("shows preview of prompt template", async () => {
+    renderNew();
+
+    await waitFor(() => {
+      expect(screen.getByText("Pipeline Stages")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: "Add Stage" }));
+
+    const stage = screen.getByTestId("pipeline-stage-0");
+    const templateInput = within(stage).getByPlaceholderText(
+      /Enter your prompt template/,
+    );
+    await user.type(templateInput, "Summarize: {{{{ input_data }}}}");
+
+    await user.click(within(stage).getByText("Preview"));
+    expect(screen.getByTestId("stage-preview-0")).toHaveTextContent(
+      "Summarize: [input_data]",
+    );
+  });
+
+  // ---- Scoring configuration --------------------------------------------
+
+  it("toggles scorers and shows weight slider", async () => {
+    renderNew();
+
+    await waitFor(() => {
+      expect(screen.getByText("Scoring Configuration")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+
+    // All scorers should be visible
+    expect(screen.getByText("length")).toBeInTheDocument();
+    expect(screen.getByText("similarity")).toBeInTheDocument();
+    expect(screen.getByText("llm_judge")).toBeInTheDocument();
+
+    // Enable length scorer
+    const lengthCheckbox = screen.getByRole("checkbox", { name: /length/i });
+    expect(lengthCheckbox).not.toBeChecked();
+    await user.click(lengthCheckbox);
+    expect(lengthCheckbox).toBeChecked();
+
+    // Weight slider should appear
+    expect(screen.getByRole("slider", { name: /Weight for length/i })).toBeInTheDocument();
+  });
+
+  // ---- Parameter space --------------------------------------------------
+
+  it("adds and removes parameters", async () => {
+    renderNew();
+
+    await waitFor(() => {
+      expect(screen.getByText("Parameter Space")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+
+    expect(screen.getByText("No parameters defined. Add parameters to sweep over.")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Add Parameter" }));
+    expect(screen.getByTestId("parameter-0")).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "Remove parameter 1" }));
+    expect(screen.queryByTestId("parameter-0")).not.toBeInTheDocument();
+  });
+
+  it("switches parameter types", async () => {
+    renderNew();
+
+    await waitFor(() => {
+      expect(screen.getByText("Parameter Space")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: "Add Parameter" }));
+
+    const param = screen.getByTestId("parameter-0");
+
+    // Default is fixed — shows fixed value input
+    expect(
+      within(param).getByRole("textbox", { name: /fixed value/i }),
+    ).toBeInTheDocument();
+
+    // Switch to range
+    await user.click(within(param).getByRole("button", { name: "range" }));
+    expect(
+      within(param).getByRole("spinbutton", { name: /min/i }),
+    ).toBeInTheDocument();
+    expect(
+      within(param).getByRole("spinbutton", { name: /max/i }),
+    ).toBeInTheDocument();
+    expect(
+      within(param).getByRole("spinbutton", { name: /step/i }),
+    ).toBeInTheDocument();
+
+    // Switch to options
+    await user.click(within(param).getByRole("button", { name: "options" }));
+    expect(
+      within(param).getByRole("textbox", { name: /options/i }),
+    ).toBeInTheDocument();
+  });
+
+  // ---- Save / actions ---------------------------------------------------
+
+  it("shows validation error when saving without a name", async () => {
+    renderNew();
+
+    await waitFor(() => {
+      expect(screen.getByText("New Experiment")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: "Save Draft" }));
+
+    expect(screen.getByRole("status")).toHaveTextContent(
+      "Experiment name is required",
+    );
+  });
+
+  it("creates a new experiment on Save Draft", async () => {
+    const created: client.ExperimentResponse = {
+      ...MOCK_EXPERIMENT,
+      id: "exp-new",
+    };
+    vi.spyOn(client.experiments, "create").mockResolvedValue(created);
+
+    renderNew();
+
+    await waitFor(() => {
+      expect(screen.getByText("New Experiment")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    await user.type(screen.getByLabelText("Name"), "My New Experiment");
+    await user.click(screen.getByRole("button", { name: "Save Draft" }));
+
+    await waitFor(() => {
+      expect(client.experiments.create).toHaveBeenCalledWith(
+        expect.objectContaining({ name: "My New Experiment" }),
+      );
+    });
+
+    expect(mockNavigate).toHaveBeenCalledWith("/experiments/exp-new", {
+      replace: true,
+    });
+  });
+
+  it("updates an existing experiment on Save Draft", async () => {
+    vi.spyOn(client.experiments, "get").mockResolvedValue(MOCK_EXPERIMENT);
+    vi.spyOn(client.experiments, "update").mockResolvedValue(MOCK_EXPERIMENT);
+
+    renderExisting();
+
+    await waitFor(() => {
+      expect(screen.getByLabelText("Name")).toHaveValue("Test Experiment");
+    });
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: "Save Draft" }));
+
+    await waitFor(() => {
+      expect(client.experiments.update).toHaveBeenCalledWith(
+        "exp-1",
+        expect.objectContaining({ name: "Test Experiment" }),
+      );
+    });
+
+    expect(screen.getByRole("status")).toHaveTextContent("Saved!");
+  });
+
+  it("shows save error on API failure", async () => {
+    vi.spyOn(client.experiments, "create").mockRejectedValue(
+      new client.ApiError(400, "Bad Request", { detail: "Invalid config" }),
+    );
+
+    renderNew();
+
+    await waitFor(() => {
+      expect(screen.getByText("New Experiment")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    await user.type(screen.getByLabelText("Name"), "Test");
+    await user.click(screen.getByRole("button", { name: "Save Draft" }));
+
+    await waitFor(() => {
+      expect(screen.getByRole("status")).toHaveTextContent(
+        "Save failed: Invalid config",
+      );
+    });
+  });
+
+  it("starts a sweep and navigates to live page", async () => {
+    vi.spyOn(client.experiments, "get").mockResolvedValue(MOCK_EXPERIMENT);
+    vi.spyOn(client.experiments, "update").mockResolvedValue(MOCK_EXPERIMENT);
+    vi.spyOn(client.experiments, "startSweep").mockResolvedValue(undefined as never);
+
+    renderExisting();
+
+    await waitFor(() => {
+      expect(screen.getByLabelText("Name")).toHaveValue("Test Experiment");
+    });
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: "Start Sweep" }));
+
+    await waitFor(() => {
+      expect(client.experiments.startSweep).toHaveBeenCalledWith("exp-1");
+    });
+    expect(mockNavigate).toHaveBeenCalledWith("/live/exp-1");
+  });
+
+  it("navigates back when clicking Back button", async () => {
+    renderNew();
+
+    await waitFor(() => {
+      expect(screen.getByText("New Experiment")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: "Back" }));
+
+    expect(mockNavigate).toHaveBeenCalledWith(-1);
+  });
+});
diff --git a/frontend/src/pages/ExperimentPage.tsx b/frontend/src/pages/ExperimentPage.tsx
index e87250e..8f49e84 100644
--- a/frontend/src/pages/ExperimentPage.tsx
+++ b/frontend/src/pages/ExperimentPage.tsx
@@ -1,8 +1,1091 @@
-export default function ExperimentPage() {
+import { useState, useEffect, useCallback } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import {
+  experiments,
+  endpoints as endpointsApi,
+  ApiError,
+} from "../api/client";
+import type {
+  ExperimentResponse,
+  ExperimentUpdate,
+  EndpointResponse,
+} from "../api/client";
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface PipelineStage {
+  id: string;
+  prompt_template: string;
+  model: string;
+  endpoint_id: string;
+  parameters: Record<string, unknown>;
+}
+
+export interface ScorerConfig {
+  name: string;
+  enabled: boolean;
+  weight: number;
+}
+
+export type ParamType = "fixed" | "range" | "options";
+
+export interface ParameterDef {
+  id: string;
+  name: string;
+  type: ParamType;
+  fixed_value: string;
+  range_min: string;
+  range_max: string;
+  range_step: string;
+  options_values: string;
+}
+
+const AVAILABLE_SCORERS: ScorerConfig[] = [
+  { name: "length", enabled: false, weight: 1 },
+  { name: "similarity", enabled: false, weight: 1 },
+  { name: "llm_judge", enabled: false, weight: 1 },
+  { name: "regex_match", enabled: false, weight: 1 },
+  { name: "json_valid", enabled: false, weight: 1 },
+];
+
+const TEMPLATE_VARIABLES = [
+  "input_data",
+  "previous_stage_output",
+  "stage_index",
+  "experiment_name",
+];
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+let _stageCounter = 0;
+function newStageId(): string {
+  _stageCounter += 1;
+  return `stage-${_stageCounter}-${Date.now()}`;
+}
+
+let _paramCounter = 0;
+function newParamId(): string {
+  _paramCounter += 1;
+  return `param-${_paramCounter}-${Date.now()}`;
+}
+
+function defaultStage(): PipelineStage {
+  return {
+    id: newStageId(),
+    prompt_template: "",
+    model: "",
+    endpoint_id: "",
+    parameters: {},
+  };
+}
+
+function defaultParam(): ParameterDef {
+  return {
+    id: newParamId(),
+    name: "",
+    type: "fixed",
+    fixed_value: "",
+    range_min: "0",
+    range_max: "1",
+    range_step: "0.1",
+    options_values: "",
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Section: Basic Info
+// ---------------------------------------------------------------------------
+
+function BasicInfoSection({
+  name,
+  description,
+  onNameChange,
+  onDescriptionChange,
+}: {
+  name: string;
+  description: string;
+  onNameChange: (v: string) => void;
+  onDescriptionChange: (v: string) => void;
+}) {
   return (
-    <div className="p-8">
-      <h1 className="mb-4 text-2xl font-bold">Experiment</h1>
-      <p className="text-gray-600">Configure and run prompt experiments.</p>
+    <section
+      aria-labelledby="section-basic-info"
+      className="rounded-xl bg-white dark:bg-slate-800 p-6 shadow ring-1 ring-slate-200 dark:ring-slate-700"
+    >
+      <h2
+        id="section-basic-info"
+        className="mb-4 text-lg font-semibold text-slate-900 dark:text-white"
+      >
+        Basic Info
+      </h2>
+      <div className="space-y-4">
+        <div>
+          <label
+            htmlFor="experiment-name"
+            className="mb-1.5 block text-sm font-medium text-slate-700 dark:text-slate-300"
+          >
+            Name
+          </label>
+          <input
+            id="experiment-name"
+            type="text"
+            value={name}
+            onChange={(e) => onNameChange(e.target.value)}
+            className="w-full rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 px-3 py-2.5 text-slate-900 dark:text-white placeholder-slate-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition"
+            placeholder="My Experiment"
+          />
+        </div>
+        <div>
+          <label
+            htmlFor="experiment-description"
+            className="mb-1.5 block text-sm font-medium text-slate-700 dark:text-slate-300"
+          >
+            Description
+          </label>
+          <textarea
+            id="experiment-description"
+            value={description}
+            onChange={(e) => onDescriptionChange(e.target.value)}
+            rows={2}
+            className="w-full rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 px-3 py-2.5 text-slate-900 dark:text-white placeholder-slate-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition resize-none"
+            placeholder="What does this experiment test?"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Section: Sample Data
+// ---------------------------------------------------------------------------
+
+type SampleDataMode = "text" | "json" | "file";
+
+function SampleDataSection({
+  sampleData,
+  onSampleDataChange,
+}: {
+  sampleData: string;
+  onSampleDataChange: (v: string) => void;
+}) {
+  const [mode, setMode] = useState<SampleDataMode>("text");
+  const [jsonError, setJsonError] = useState<string | null>(null);
+
+  function handleModeChange(newMode: SampleDataMode) {
+    setMode(newMode);
+    setJsonError(null);
+  }
+
+  function handleChange(value: string) {
+    onSampleDataChange(value);
+    if (mode === "json") {
+      try {
+        if (value.trim()) JSON.parse(value);
+        setJsonError(null);
+      } catch {
+        setJsonError("Invalid JSON");
+      }
+    }
+  }
+
+  function handleFileUpload(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (ev) => {
+      const text = ev.target?.result;
+      if (typeof text === "string") {
+        onSampleDataChange(text);
+      }
+    };
+    reader.readAsText(file);
+  }
+
+  const modeButtons: { value: SampleDataMode; label: string }[] = [
+    { value: "text", label: "Paste Text" },
+    { value: "json", label: "JSON" },
+    { value: "file", label: "Upload File" },
+  ];
+
+  return (
+    <section
+      aria-labelledby="section-sample-data"
+      className="rounded-xl bg-white dark:bg-slate-800 p-6 shadow ring-1 ring-slate-200 dark:ring-slate-700"
+    >
+      <h2
+        id="section-sample-data"
+        className="mb-4 text-lg font-semibold text-slate-900 dark:text-white"
+      >
+        Sample Data
+      </h2>
+
+      <div className="mb-3 flex gap-2">
+        {modeButtons.map((m) => (
+          <button
+            key={m.value}
+            type="button"
+            onClick={() => handleModeChange(m.value)}
+            className={`rounded-lg px-3 py-1.5 text-sm font-medium transition ${
+              mode === m.value
+                ? "bg-indigo-600 text-white"
+                : "bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-600"
+            }`}
+          >
+            {m.label}
+          </button>
+        ))}
+      </div>
+
+      {mode === "file" ? (
+        <div>
+          <input
+            type="file"
+            accept=".txt,.json,.csv,.md"
+            onChange={handleFileUpload}
+            data-testid="file-upload"
+            className="block w-full text-sm text-slate-500 dark:text-slate-400 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-indigo-50 dark:file:bg-indigo-900/30 file:text-indigo-700 dark:file:text-indigo-300 hover:file:bg-indigo-100"
+          />
+          {sampleData && (
+            <pre className="mt-3 max-h-40 overflow-auto rounded-lg bg-slate-50 dark:bg-slate-900 p-3 text-xs text-slate-700 dark:text-slate-300">
+              {sampleData.slice(0, 500)}
+              {sampleData.length > 500 && "…"}
+            </pre>
+          )}
+        </div>
+      ) : (
+        <div>
+          <textarea
+            value={sampleData}
+            onChange={(e) => handleChange(e.target.value)}
+            rows={5}
+            className="w-full rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 px-3 py-2.5 text-sm font-mono text-slate-900 dark:text-white placeholder-slate-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition resize-none"
+            placeholder={
+              mode === "json"
+                ? '{"key": "value"}'
+                : "Paste your sample data here..."
+            }
+          />
+          {jsonError && (
+            <p
+              role="alert"
+              className="mt-1 text-xs text-red-600 dark:text-red-400"
+            >
+              {jsonError}
+            </p>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Section: Pipeline Stage Builder
+// ---------------------------------------------------------------------------
+
+function PipelineStageCard({
+  stage,
+  index,
+  endpointList,
+  onUpdate,
+  onRemove,
+}: {
+  stage: PipelineStage;
+  index: number;
+  endpointList: EndpointResponse[];
+  onUpdate: (s: PipelineStage) => void;
+  onRemove: () => void;
+}) {
+  const [showPreview, setShowPreview] = useState(false);
+
+  function renderPreview(): string {
+    let result = stage.prompt_template;
+    TEMPLATE_VARIABLES.forEach((v) => {
+      result = result.replace(
+        new RegExp(`\\{\\{\\s*${v}\\s*\\}\\}`, "g"),
+        `[${v}]`,
+      );
+    });
+    return result;
+  }
+
+  return (
+    <div
+      data-testid={`pipeline-stage-${index}`}
+      className="rounded-lg border border-slate-200 dark:border-slate-700 p-4 space-y-3"
+    >
+      <div className="flex items-center justify-between">
+        <h4 className="text-sm font-semibold text-slate-800 dark:text-slate-200">
+          Stage {index + 1}
+        </h4>
+        <button
+          type="button"
+          onClick={onRemove}
+          aria-label={`Remove stage ${index + 1}`}
+          className="rounded p-1 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition"
+        >
+          <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Prompt template */}
+      <div>
+        <label className="mb-1 block text-xs font-medium text-slate-600 dark:text-slate-400">
+          Prompt Template
+        </label>
+        <textarea
+          value={stage.prompt_template}
+          onChange={(e) =>
+            onUpdate({ ...stage, prompt_template: e.target.value })
+          }
+          rows={4}
+          className="w-full rounded-lg border border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900 px-3 py-2 text-sm font-mono text-slate-900 dark:text-white placeholder-slate-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition resize-none"
+          placeholder="Enter your prompt template using {{ variable }} syntax..."
+        />
+        <div className="mt-1 flex items-center gap-2">
+          <span className="text-xs text-slate-400">Variables:</span>
+          {TEMPLATE_VARIABLES.map((v) => (
+            <span
+              key={v}
+              className="rounded bg-slate-100 dark:bg-slate-700 px-1.5 py-0.5 text-xs font-mono text-slate-600 dark:text-slate-300"
+            >
+              {`{{ ${v} }}`}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {/* Model selector */}
+      <div>
+        <label className="mb-1 block text-xs font-medium text-slate-600 dark:text-slate-400">
+          Model
+        </label>
+        <select
+          value={`${stage.endpoint_id}::${stage.model}`}
+          onChange={(e) => {
+            const [eid, ...modelParts] = e.target.value.split("::");
+            onUpdate({
+              ...stage,
+              endpoint_id: eid,
+              model: modelParts.join("::"),
+            });
+          }}
+          className="w-full rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 px-3 py-2 text-sm text-slate-900 dark:text-white focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition"
+        >
+          <option value="::">Select a model...</option>
+          {endpointList.map((ep) => (
+            <option key={ep.id} value={`${ep.id}::${ep.default_model || ep.name}`}>
+              {ep.name}{ep.default_model ? ` — ${ep.default_model}` : ""}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Preview button */}
+      <div>
+        <button
+          type="button"
+          onClick={() => setShowPreview(!showPreview)}
+          className="text-xs font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500 transition"
+        >
+          {showPreview ? "Hide Preview" : "Preview"}
+        </button>
+        {showPreview && (
+          <pre
+            data-testid={`stage-preview-${index}`}
+            className="mt-2 rounded-lg bg-slate-50 dark:bg-slate-900 p-3 text-xs text-slate-700 dark:text-slate-300 whitespace-pre-wrap"
+          >
+            {renderPreview() || "(empty template)"}
+          </pre>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function PipelineSection({
+  stages,
+  endpointList,
+  onStagesChange,
+}: {
+  stages: PipelineStage[];
+  endpointList: EndpointResponse[];
+  onStagesChange: (s: PipelineStage[]) => void;
+}) {
+  function addStage() {
+    onStagesChange([...stages, defaultStage()]);
+  }
+
+  function removeStage(index: number) {
+    onStagesChange(stages.filter((_, i) => i !== index));
+  }
+
+  function updateStage(index: number, updated: PipelineStage) {
+    onStagesChange(stages.map((s, i) => (i === index ? updated : s)));
+  }
+
+  return (
+    <section
+      aria-labelledby="section-pipeline"
+      className="rounded-xl bg-white dark:bg-slate-800 p-6 shadow ring-1 ring-slate-200 dark:ring-slate-700"
+    >
+      <div className="mb-4 flex items-center justify-between">
+        <h2
+          id="section-pipeline"
+          className="text-lg font-semibold text-slate-900 dark:text-white"
+        >
+          Pipeline Stages
+        </h2>
+        <button
+          type="button"
+          onClick={addStage}
+          className="rounded-lg bg-indigo-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-indigo-500 transition"
+        >
+          Add Stage
+        </button>
+      </div>
+
+      {stages.length === 0 ? (
+        <p className="text-sm text-slate-500 dark:text-slate-400">
+          No stages yet. Add a pipeline stage to get started.
+        </p>
+      ) : (
+        <div className="space-y-4">
+          {stages.map((stage, i) => (
+            <PipelineStageCard
+              key={stage.id}
+              stage={stage}
+              index={i}
+              endpointList={endpointList}
+              onUpdate={(s) => updateStage(i, s)}
+              onRemove={() => removeStage(i)}
+            />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Section: Scoring Config
+// ---------------------------------------------------------------------------
+
+function ScoringSection({
+  scorers,
+  onScorersChange,
+}: {
+  scorers: ScorerConfig[];
+  onScorersChange: (s: ScorerConfig[]) => void;
+}) {
+  function toggleScorer(index: number) {
+    onScorersChange(
+      scorers.map((s, i) =>
+        i === index ? { ...s, enabled: !s.enabled } : s,
+      ),
+    );
+  }
+
+  function setWeight(index: number, weight: number) {
+    onScorersChange(
+      scorers.map((s, i) => (i === index ? { ...s, weight } : s)),
+    );
+  }
+
+  return (
+    <section
+      aria-labelledby="section-scoring"
+      className="rounded-xl bg-white dark:bg-slate-800 p-6 shadow ring-1 ring-slate-200 dark:ring-slate-700"
+    >
+      <h2
+        id="section-scoring"
+        className="mb-4 text-lg font-semibold text-slate-900 dark:text-white"
+      >
+        Scoring Configuration
+      </h2>
+      <div className="space-y-3">
+        {scorers.map((scorer, i) => (
+          <div
+            key={scorer.name}
+            className="flex items-center gap-4 rounded-lg border border-slate-200 dark:border-slate-700 px-4 py-3"
+          >
+            <label className="flex items-center gap-2 min-w-[140px]">
+              <input
+                type="checkbox"
+                checked={scorer.enabled}
+                onChange={() => toggleScorer(i)}
+                className="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500"
+              />
+              <span className="text-sm font-medium text-slate-800 dark:text-slate-200">
+                {scorer.name}
+              </span>
+            </label>
+            {scorer.enabled && (
+              <div className="flex items-center gap-2 flex-1">
+                <label className="text-xs text-slate-500 dark:text-slate-400">
+                  Weight
+                </label>
+                <input
+                  type="range"
+                  min="0"
+                  max="10"
+                  step="0.5"
+                  value={scorer.weight}
+                  onChange={(e) => setWeight(i, parseFloat(e.target.value))}
+                  className="flex-1"
+                  aria-label={`Weight for ${scorer.name}`}
+                />
+                <span className="w-8 text-right text-xs font-mono text-slate-600 dark:text-slate-300">
+                  {scorer.weight}
+                </span>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Section: Parameter Space
+// ---------------------------------------------------------------------------
+
+function ParameterSpaceSection({
+  params,
+  onParamsChange,
+}: {
+  params: ParameterDef[];
+  onParamsChange: (p: ParameterDef[]) => void;
+}) {
+  function addParam() {
+    onParamsChange([...params, defaultParam()]);
+  }
+
+  function removeParam(index: number) {
+    onParamsChange(params.filter((_, i) => i !== index));
+  }
+
+  function updateParam(index: number, updated: ParameterDef) {
+    onParamsChange(params.map((p, i) => (i === index ? updated : p)));
+  }
+
+  return (
+    <section
+      aria-labelledby="section-params"
+      className="rounded-xl bg-white dark:bg-slate-800 p-6 shadow ring-1 ring-slate-200 dark:ring-slate-700"
+    >
+      <div className="mb-4 flex items-center justify-between">
+        <h2
+          id="section-params"
+          className="text-lg font-semibold text-slate-900 dark:text-white"
+        >
+          Parameter Space
+        </h2>
+        <button
+          type="button"
+          onClick={addParam}
+          className="rounded-lg bg-indigo-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-indigo-500 transition"
+        >
+          Add Parameter
+        </button>
+      </div>
+
+      {params.length === 0 ? (
+        <p className="text-sm text-slate-500 dark:text-slate-400">
+          No parameters defined. Add parameters to sweep over.
+        </p>
+      ) : (
+        <div className="space-y-4">
+          {params.map((param, i) => (
+            <div
+              key={param.id}
+              data-testid={`parameter-${i}`}
+              className="rounded-lg border border-slate-200 dark:border-slate-700 p-4 space-y-3"
+            >
+              <div className="flex items-center justify-between">
+                <input
+                  type="text"
+                  value={param.name}
+                  onChange={(e) =>
+                    updateParam(i, { ...param, name: e.target.value })
+                  }
+                  className="rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 px-3 py-1.5 text-sm text-slate-900 dark:text-white placeholder-slate-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition"
+                  placeholder="Parameter name"
+                  aria-label={`Parameter ${i + 1} name`}
+                />
+                <button
+                  type="button"
+                  onClick={() => removeParam(i)}
+                  aria-label={`Remove parameter ${i + 1}`}
+                  className="rounded p-1 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition"
+                >
+                  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+                  </svg>
+                </button>
+              </div>
+
+              <div className="flex gap-2">
+                {(["fixed", "range", "options"] as ParamType[]).map((t) => (
+                  <button
+                    key={t}
+                    type="button"
+                    onClick={() => updateParam(i, { ...param, type: t })}
+                    className={`rounded-lg px-3 py-1 text-xs font-medium transition ${
+                      param.type === t
+                        ? "bg-indigo-600 text-white"
+                        : "bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-600"
+                    }`}
+                  >
+                    {t}
+                  </button>
+                ))}
+              </div>
+
+              {param.type === "fixed" && (
+                <input
+                  type="text"
+                  value={param.fixed_value}
+                  onChange={(e) =>
+                    updateParam(i, { ...param, fixed_value: e.target.value })
+                  }
+                  className="w-full rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 px-3 py-1.5 text-sm text-slate-900 dark:text-white placeholder-slate-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition"
+                  placeholder="Fixed value"
+                  aria-label={`Parameter ${i + 1} fixed value`}
+                />
+              )}
+
+              {param.type === "range" && (
+                <div className="flex gap-2">
+                  <input
+                    type="number"
+                    value={param.range_min}
+                    onChange={(e) =>
+                      updateParam(i, { ...param, range_min: e.target.value })
+                    }
+                    className="w-full rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 px-3 py-1.5 text-sm text-slate-900 dark:text-white focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition"
+                    placeholder="Min"
+                    aria-label={`Parameter ${i + 1} min`}
+                  />
+                  <input
+                    type="number"
+                    value={param.range_max}
+                    onChange={(e) =>
+                      updateParam(i, { ...param, range_max: e.target.value })
+                    }
+                    className="w-full rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 px-3 py-1.5 text-sm text-slate-900 dark:text-white focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition"
+                    placeholder="Max"
+                    aria-label={`Parameter ${i + 1} max`}
+                  />
+                  <input
+                    type="number"
+                    value={param.range_step}
+                    onChange={(e) =>
+                      updateParam(i, { ...param, range_step: e.target.value })
+                    }
+                    className="w-full rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 px-3 py-1.5 text-sm text-slate-900 dark:text-white focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition"
+                    placeholder="Step"
+                    aria-label={`Parameter ${i + 1} step`}
+                  />
+                </div>
+              )}
+
+              {param.type === "options" && (
+                <input
+                  type="text"
+                  value={param.options_values}
+                  onChange={(e) =>
+                    updateParam(i, {
+                      ...param,
+                      options_values: e.target.value,
+                    })
+                  }
+                  className="w-full rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 px-3 py-1.5 text-sm text-slate-900 dark:text-white placeholder-slate-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 transition"
+                  placeholder="Comma-separated values (e.g. 0.1, 0.5, 1.0)"
+                  aria-label={`Parameter ${i + 1} options`}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Section: Action Buttons
+// ---------------------------------------------------------------------------
+
+function ActionButtons({
+  saving,
+  onSaveDraft,
+  onRunSingle,
+  onStartSweep,
+}: {
+  saving: boolean;
+  onSaveDraft: () => void;
+  onRunSingle: () => void;
+  onStartSweep: () => void;
+}) {
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      <button
+        type="button"
+        onClick={onSaveDraft}
+        disabled={saving}
+        className="rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-4 py-2.5 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition"
+      >
+        {saving ? "Saving…" : "Save Draft"}
+      </button>
+      <button
+        type="button"
+        onClick={onRunSingle}
+        disabled={saving}
+        className="rounded-lg bg-emerald-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-emerald-500 disabled:opacity-50 disabled:cursor-not-allowed transition"
+      >
+        Run Single
+      </button>
+      <button
+        type="button"
+        onClick={onStartSweep}
+        disabled={saving}
+        className="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed transition"
+      >
+        Start Sweep
+      </button>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main Page
+// ---------------------------------------------------------------------------
+
+export default function ExperimentPage() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+
+  // Experiment state
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [saveMessage, setSaveMessage] = useState<string | null>(null);
+
+  // Form fields
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [sampleData, setSampleData] = useState("");
+  const [stages, setStages] = useState<PipelineStage[]>([]);
+  const [scorers, setScorers] = useState<ScorerConfig[]>(AVAILABLE_SCORERS);
+  const [params, setParams] = useState<ParameterDef[]>([]);
+
+  // Endpoints for model selectors
+  const [endpointList, setEndpointList] = useState<EndpointResponse[]>([]);
+
+  const isNew = !id || id === "new";
+
+  // Load existing experiment if editing
+  const loadExperiment = useCallback(async () => {
+    if (isNew) {
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    try {
+      const exp = await experiments.get(id!);
+      setName(exp.name);
+      setDescription(exp.description || "");
+
+      if (exp.sample_data) {
+        setSampleData(
+          typeof exp.sample_data === "string"
+            ? exp.sample_data
+            : JSON.stringify(exp.sample_data, null, 2),
+        );
+      }
+
+      if (exp.pipeline_stages && Array.isArray((exp.pipeline_stages as Record<string, unknown>).stages)) {
+        setStages(
+          (exp.pipeline_stages as Record<string, unknown>).stages as PipelineStage[],
+        );
+      }
+
+      if (exp.scoring_config && Array.isArray((exp.scoring_config as Record<string, unknown>).scorers)) {
+        setScorers(
+          (exp.scoring_config as Record<string, unknown>).scorers as ScorerConfig[],
+        );
+      }
+
+      if (exp.parameter_space && Array.isArray((exp.parameter_space as Record<string, unknown>).params)) {
+        setParams(
+          (exp.parameter_space as Record<string, unknown>).params as ParameterDef[],
+        );
+      }
+    } catch (err: unknown) {
+      if (err instanceof ApiError) {
+        setError(`Failed to load experiment (${err.status}).`);
+      } else {
+        setError("Network error. Is the server running?");
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [id, isNew]);
+
+  const loadEndpoints = useCallback(async () => {
+    try {
+      const resp = await endpointsApi.list();
+      setEndpointList(resp.items);
+    } catch {
+      // Non-critical — just won't have models to pick from
+    }
+  }, []);
+
+  useEffect(() => {
+    loadExperiment();
+    loadEndpoints();
+  }, [loadExperiment, loadEndpoints]);
+
+  function buildPayload(): ExperimentUpdate {
+    const payload: ExperimentUpdate = {
+      name: name.trim(),
+      description: description.trim() || null,
+    };
+
+    // Sample data
+    if (sampleData.trim()) {
+      try {
+        payload.sample_data = JSON.parse(sampleData);
+      } catch {
+        payload.sample_data = { text: sampleData };
+      }
+    }
+
+    // Pipeline
+    payload.pipeline_stages = { stages };
+
+    // Scoring
+    payload.scoring_config = { scorers };
+
+    // Parameters
+    payload.parameter_space = { params };
+
+    return payload;
+  }
+
+  async function handleSaveDraft() {
+    if (!name.trim()) {
+      setSaveMessage("Experiment name is required.");
+      return;
+    }
+
+    setSaving(true);
+    setSaveMessage(null);
+    try {
+      const payload = buildPayload();
+      if (isNew) {
+        const created = await experiments.create({
+          name: payload.name!,
+          description: payload.description,
+          sample_data: payload.sample_data,
+          pipeline_stages: payload.pipeline_stages,
+          scoring_config: payload.scoring_config,
+          parameter_space: payload.parameter_space,
+        });
+        setSaveMessage("Experiment created!");
+        navigate(`/experiments/${created.id}`, { replace: true });
+      } else {
+        await experiments.update(id!, payload);
+        setSaveMessage("Saved!");
+      }
+    } catch (err: unknown) {
+      if (err instanceof ApiError) {
+        const detail =
+          err.body && typeof err.body === "object" && "detail" in err.body
+            ? String((err.body as Record<string, unknown>).detail)
+            : err.statusText;
+        setSaveMessage(`Save failed: ${detail}`);
+      } else {
+        setSaveMessage("Network error. Is the server running?");
+      }
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleRunSingle() {
+    await handleSaveDraft();
+    if (!isNew && id) {
+      navigate(`/live/${id}`);
+    }
+  }
+
+  async function handleStartSweep() {
+    if (!name.trim()) {
+      setSaveMessage("Experiment name is required.");
+      return;
+    }
+
+    setSaving(true);
+    setSaveMessage(null);
+    try {
+      const payload = buildPayload();
+      let experimentId = id;
+
+      if (isNew) {
+        const created = await experiments.create({
+          name: payload.name!,
+          description: payload.description,
+          sample_data: payload.sample_data,
+          pipeline_stages: payload.pipeline_stages,
+          scoring_config: payload.scoring_config,
+          parameter_space: payload.parameter_space,
+        });
+        experimentId = created.id;
+      } else {
+        await experiments.update(id!, payload);
+      }
+
+      await experiments.startSweep(experimentId!);
+      navigate(`/live/${experimentId}`);
+    } catch (err: unknown) {
+      if (err instanceof ApiError) {
+        const detail =
+          err.body && typeof err.body === "object" && "detail" in err.body
+            ? String((err.body as Record<string, unknown>).detail)
+            : err.statusText;
+        setSaveMessage(`Failed: ${detail}`);
+      } else {
+        setSaveMessage("Network error. Is the server running?");
+      }
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // Render
+  // -------------------------------------------------------------------------
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-indigo-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 px-4 py-8">
+        <div className="mx-auto max-w-4xl">
+          <p className="text-center text-slate-500 dark:text-slate-400 animate-pulse py-16">
+            Loading experiment…
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-indigo-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 px-4 py-8">
+        <div className="mx-auto max-w-4xl">
+          <div
+            role="alert"
+            className="rounded-xl bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 p-6 text-center"
+          >
+            <p className="text-red-700 dark:text-red-300">{error}</p>
+            <button
+              type="button"
+              onClick={loadExperiment}
+              className="mt-3 text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500"
+            >
+              Retry
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-indigo-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 px-4 py-8">
+      <div className="mx-auto max-w-4xl space-y-6">
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-slate-900 dark:text-white">
+              {isNew ? "New Experiment" : "Edit Experiment"}
+            </h1>
+            <p className="mt-1 text-slate-500 dark:text-slate-400">
+              Configure and run prompt experiments.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={() => navigate(-1)}
+            className="rounded-lg px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700 transition"
+          >
+            Back
+          </button>
+        </div>
+
+        {/* Save message */}
+        {saveMessage && (
+          <div
+            role="status"
+            className={`rounded-lg p-3 text-sm ${
+              saveMessage.startsWith("Save failed") ||
+              saveMessage.startsWith("Failed") ||
+              saveMessage.startsWith("Network error") ||
+              saveMessage.startsWith("Experiment name")
+                ? "bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300"
+                : "bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-800 text-green-700 dark:text-green-300"
+            }`}
+          >
+            {saveMessage}
+          </div>
+        )}
+
+        {/* 1. Basic Info */}
+        <BasicInfoSection
+          name={name}
+          description={description}
+          onNameChange={setName}
+          onDescriptionChange={setDescription}
+        />
+
+        {/* 2. Sample Data */}
+        <SampleDataSection
+          sampleData={sampleData}
+          onSampleDataChange={setSampleData}
+        />
+
+        {/* 3. Pipeline Stages */}
+        <PipelineSection
+          stages={stages}
+          endpointList={endpointList}
+          onStagesChange={setStages}
+        />
+
+        {/* 4. Scoring Config */}
+        <ScoringSection scorers={scorers} onScorersChange={setScorers} />
+
+        {/* 5. Parameter Space */}
+        <ParameterSpaceSection params={params} onParamsChange={setParams} />
+
+        {/* 6. Action Buttons */}
+        <ActionButtons
+          saving={saving}
+          onSaveDraft={handleSaveDraft}
+          onRunSingle={handleRunSingle}
+          onStartSweep={handleStartSweep}
+        />
+      </div>
     </div>
   );
 }