From 04a96f3dc3a0286c36e48279367c73baab0beeb9 Mon Sep 17 00:00:00 2001
From: John Lightner <jlightner@a.xpltd.co>
Date: Tue, 7 Apr 2026 02:47:24 -0500
Subject: [PATCH] MAESTRO: Implement Projects page with card grid, creation
 modal, and comprehensive tests

---
 Auto Run Docs/02b-frontend-dashboard.md  |   3 +-
 frontend/src/pages/ProjectsPage.test.tsx | 297 +++++++++++++++++++
 frontend/src/pages/ProjectsPage.tsx      | 352 ++++++++++++++++++++++-
 3 files changed, 647 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/pages/ProjectsPage.test.tsx

diff --git a/Auto Run Docs/02b-frontend-dashboard.md b/Auto Run Docs/02b-frontend-dashboard.md
index 1ed6173..3281f42 100644
--- a/Auto Run Docs/02b-frontend-dashboard.md	
+++ b/Auto Run Docs/02b-frontend-dashboard.md	
@@ -11,7 +11,8 @@ Build the React frontend: setup wizard, experiment builder, real-time observabil
 - [x] Build the auth context provider (frontend/src/contexts/AuthContext.tsx). Manage JWT state, provide login/logout functions, expose current user info, handle token expiry with automatic redirect to login. Wrap the entire app in this provider.
   <!-- AuthProvider wraps app in App.tsx. Manages JWT via client.ts token functions, validates session on mount via auth.me(), auto-redirects to /login on expired/missing token, exposes useAuth() hook with user/isAuthenticated/isLoading/login/logout. Public paths (/login, /setup) bypass redirect. 10 tests added. App.test.tsx updated for auth-aware routing. -->
 
-- [ ] Implement the Projects page (frontend/src/pages/Projects.tsx). Card grid showing all projects with name, description, experiment count, last activity timestamp, and a progress indicator showing best score across all experiments. Include a "New Project" button that opens a creation modal. Click a card to navigate to its experiments.
+- [x] Implement the Projects page (frontend/src/pages/Projects.tsx). Card grid showing all projects with name, description, experiment count, last activity timestamp, and a progress indicator showing best score across all experiments. Include a "New Project" button that opens a creation modal. Click a card to navigate to its experiments.
+  <!-- Implemented in ProjectsPage.tsx. Shows loading/error/empty states. Card grid with name, description, last activity timestamp, experiment & best score indicators. "New Project" button opens creation modal with name + description fields, validation, and error handling. Cards navigate to /experiments/:id on click. 12 tests added. -->
 
 - [ ] Implement the Experiment Builder (frontend/src/pages/Experiment.tsx). This is the most complex page. It has several sections: (1) Basic info (name, description), (2) Sample data input (paste text, upload file, or enter JSON), (3) Pipeline stage builder (add/remove stages, each with a prompt template editor with syntax highlighting, model selector dropdown populated from configured endpoints, and parameter controls), (4) Scoring config (checkboxes for which scorers to enable, weight sliders for each), (5) Parameter space definition (for each parameter, set type: fixed/range/options and values), (6) Action buttons: Save Draft, Run Single, Start Sweep.
 
diff --git a/frontend/src/pages/ProjectsPage.test.tsx b/frontend/src/pages/ProjectsPage.test.tsx
new file mode 100644
index 0000000..95d12cf
--- /dev/null
+++ b/frontend/src/pages/ProjectsPage.test.tsx
@@ -0,0 +1,297 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import ProjectsPage from "./ProjectsPage";
+import * as client from "../api/client";
+
+const mockNavigate = vi.fn();
+vi.mock("react-router-dom", async () => {
+  const actual = await vi.importActual("react-router-dom");
+  return {
+    ...actual,
+    useNavigate: () => mockNavigate,
+  };
+});
+
+const MOCK_PROJECTS: client.ProjectResponse[] = [
+  {
+    id: "p1",
+    name: "Summarizer",
+    description: "Tune summarization prompts",
+    owner_id: "u1",
+    created_at: "2026-04-01T10:00:00Z",
+    updated_at: "2026-04-07T08:00:00Z",
+  },
+  {
+    id: "p2",
+    name: "Classifier",
+    description: null,
+    owner_id: "u1",
+    created_at: "2026-03-20T12:00:00Z",
+    updated_at: "2026-03-25T15:30:00Z",
+  },
+];
+
+function renderProjects() {
+  return render(
+    <MemoryRouter initialEntries={["/projects"]}>
+      <ProjectsPage />
+    </MemoryRouter>,
+  );
+}
+
+describe("ProjectsPage", () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    mockNavigate.mockReset();
+  });
+
+  it("shows loading state initially", () => {
+    vi.spyOn(client.projects, "list").mockImplementation(
+      () => new Promise(() => {}), // never resolves
+    );
+    renderProjects();
+    expect(screen.getByText("Loading projects…")).toBeInTheDocument();
+  });
+
+  it("renders project cards after loading", async () => {
+    vi.spyOn(client.projects, "list").mockResolvedValue({
+      items: MOCK_PROJECTS,
+      total: 2,
+    });
+    renderProjects();
+
+    await waitFor(() => {
+      expect(screen.getByText("Summarizer")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Classifier")).toBeInTheDocument();
+    expect(
+      screen.getByText("Tune summarization prompts"),
+    ).toBeInTheDocument();
+  });
+
+  it("shows empty state when no projects exist", async () => {
+    vi.spyOn(client.projects, "list").mockResolvedValue({
+      items: [],
+      total: 0,
+    });
+    renderProjects();
+
+    await waitFor(() => {
+      expect(screen.getByText("No projects yet")).toBeInTheDocument();
+    });
+    expect(
+      screen.getByRole("button", { name: "Create First Project" }),
+    ).toBeInTheDocument();
+  });
+
+  it("shows error state on API failure", async () => {
+    vi.spyOn(client.projects, "list").mockRejectedValue(
+      new client.ApiError(500, "Internal Server Error", { detail: "DB error" }),
+    );
+    renderProjects();
+
+    await waitFor(() => {
+      expect(screen.getByRole("alert")).toHaveTextContent(
+        "Failed to load projects (500)",
+      );
+    });
+  });
+
+  it("shows network error on fetch failure", async () => {
+    vi.spyOn(client.projects, "list").mockRejectedValue(
+      new Error("fetch failed"),
+    );
+    renderProjects();
+
+    await waitFor(() => {
+      expect(screen.getByRole("alert")).toHaveTextContent(
+        "Network error",
+      );
+    });
+  });
+
+  it("retries loading on retry button click", async () => {
+    const listSpy = vi
+      .spyOn(client.projects, "list")
+      .mockRejectedValueOnce(new Error("fail"))
+      .mockResolvedValueOnce({ items: MOCK_PROJECTS, total: 2 });
+
+    renderProjects();
+
+    await waitFor(() => {
+      expect(screen.getByText("Retry")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    await user.click(screen.getByText("Retry"));
+
+    await waitFor(() => {
+      expect(screen.getByText("Summarizer")).toBeInTheDocument();
+    });
+    expect(listSpy).toHaveBeenCalledTimes(2);
+  });
+
+  it("navigates to experiments when clicking a project card", async () => {
+    vi.spyOn(client.projects, "list").mockResolvedValue({
+      items: MOCK_PROJECTS,
+      total: 2,
+    });
+    renderProjects();
+
+    await waitFor(() => {
+      expect(screen.getByText("Summarizer")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    await user.click(screen.getByText("Summarizer"));
+
+    expect(mockNavigate).toHaveBeenCalledWith("/experiments/p1");
+  });
+
+  it("opens and closes the new project modal", async () => {
+    vi.spyOn(client.projects, "list").mockResolvedValue({
+      items: [],
+      total: 0,
+    });
+    renderProjects();
+
+    await waitFor(() => {
+      expect(screen.getByText("No projects yet")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    // Click the header "New Project" button
+    await user.click(screen.getByRole("button", { name: "New Project" }));
+
+    expect(screen.getByTestId("new-project-modal")).toBeInTheDocument();
+    expect(screen.getByText("New Project", { selector: "h2" })).toBeInTheDocument();
+
+    // Close via Cancel
+    await user.click(screen.getByRole("button", { name: "Cancel" }));
+    expect(screen.queryByTestId("new-project-modal")).not.toBeInTheDocument();
+  });
+
+  it("creates a project via the modal", async () => {
+    const newProject: client.ProjectResponse = {
+      id: "p-new",
+      name: "New Project",
+      description: "Created via modal",
+      owner_id: "u1",
+      created_at: "2026-04-07T12:00:00Z",
+      updated_at: "2026-04-07T12:00:00Z",
+    };
+    vi.spyOn(client.projects, "list").mockResolvedValue({
+      items: [],
+      total: 0,
+    });
+    vi.spyOn(client.projects, "create").mockResolvedValue(newProject);
+
+    renderProjects();
+
+    await waitFor(() => {
+      expect(screen.getByText("No projects yet")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: "New Project" }));
+
+    const modal = screen.getByTestId("new-project-modal");
+    await user.type(within(modal).getByLabelText("Name"), "New Project");
+    await user.type(
+      within(modal).getByLabelText("Description"),
+      "Created via modal",
+    );
+    await user.click(
+      within(modal).getByRole("button", { name: "Create Project" }),
+    );
+
+    await waitFor(() => {
+      expect(client.projects.create).toHaveBeenCalledWith({
+        name: "New Project",
+        description: "Created via modal",
+      });
+    });
+
+    // Modal closes and card appears
+    expect(screen.queryByTestId("new-project-modal")).not.toBeInTheDocument();
+    expect(screen.getByText("Created via modal")).toBeInTheDocument();
+  });
+
+  it("shows validation error when project name is empty", async () => {
+    vi.spyOn(client.projects, "list").mockResolvedValue({
+      items: [],
+      total: 0,
+    });
+    renderProjects();
+
+    await waitFor(() => {
+      expect(screen.getByText("No projects yet")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: "New Project" }));
+
+    const modal = screen.getByTestId("new-project-modal");
+    await user.click(
+      within(modal).getByRole("button", { name: "Create Project" }),
+    );
+
+    expect(within(modal).getByRole("alert")).toHaveTextContent(
+      "Project name is required",
+    );
+  });
+
+  it("shows API error in modal on create failure", async () => {
+    vi.spyOn(client.projects, "list").mockResolvedValue({
+      items: [],
+      total: 0,
+    });
+    vi.spyOn(client.projects, "create").mockRejectedValue(
+      new client.ApiError(400, "Bad Request", { detail: "Name taken" }),
+    );
+
+    renderProjects();
+
+    await waitFor(() => {
+      expect(screen.getByText("No projects yet")).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    await user.click(screen.getByRole("button", { name: "New Project" }));
+
+    const modal = screen.getByTestId("new-project-modal");
+    await user.type(within(modal).getByLabelText("Name"), "Test");
+    await user.click(
+      within(modal).getByRole("button", { name: "Create Project" }),
+    );
+
+    await waitFor(() => {
+      expect(within(modal).getByRole("alert")).toHaveTextContent(
+        "Failed to create project: Name taken",
+      );
+    });
+  });
+
+  it("opens modal from empty state CTA button", async () => {
+    vi.spyOn(client.projects, "list").mockResolvedValue({
+      items: [],
+      total: 0,
+    });
+    renderProjects();
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("button", { name: "Create First Project" }),
+      ).toBeInTheDocument();
+    });
+
+    const user = userEvent.setup();
+    await user.click(
+      screen.getByRole("button", { name: "Create First Project" }),
+    );
+
+    expect(screen.getByTestId("new-project-modal")).toBeInTheDocument();
+  });
+});
diff --git a/frontend/src/pages/ProjectsPage.tsx b/frontend/src/pages/ProjectsPage.tsx
index d8dec90..97dd2e0 100644
--- a/frontend/src/pages/ProjectsPage.tsx
+++ b/frontend/src/pages/ProjectsPage.tsx
@@ -1,8 +1,352 @@
-export default function ProjectsPage() {
+import { useEffect, useState, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  projects,
+  ApiError,
+} from "../api/client";
+import type { ProjectResponse, ProjectCreate } from "../api/client";
+
+// ---------------------------------------------------------------------------
+// New Project Modal
+// ---------------------------------------------------------------------------
+
+function NewProjectModal({
+  open,
+  onClose,
+  onCreated,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onCreated: (p: ProjectResponse) => void;
+}) {
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  function reset() {
+    setName("");
+    setDescription("");
+    setError(null);
+    setSubmitting(false);
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+
+    if (!name.trim()) {
+      setError("Project name is required.");
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      const payload: ProjectCreate = { name: name.trim() };
+      if (description.trim()) {
+        payload.description = description.trim();
+      }
+      const created = await projects.create(payload);
+      reset();
+      onCreated(created);
+    } 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;
+        setError(`Failed to create project: ${detail}`);
+      } else {
+        setError("Network error. Is the server running?");
+      }
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  if (!open) return null;
+
   return (
-    <div className="p-8">
-      <h1 className="mb-4 text-2xl font-bold">Projects</h1>
-      <p className="text-gray-600">Manage your prompt tuning projects.</p>
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40"
+      data-testid="new-project-modal"
+    >
+      <div className="w-full max-w-md rounded-xl bg-white dark:bg-slate-800 p-6 shadow-2xl ring-1 ring-slate-200 dark:ring-slate-700">
+        <h2 className="mb-4 text-xl font-bold text-slate-900 dark:text-white">
+          New Project
+        </h2>
+
+        <form onSubmit={handleSubmit}>
+          {error && (
+            <div
+              role="alert"
+              className="mb-4 rounded-lg bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 p-3 text-sm text-red-700 dark:text-red-300"
+            >
+              {error}
+            </div>
+          )}
+
+          <div className="mb-4">
+            <label
+              htmlFor="project-name"
+              className="mb-1.5 block text-sm font-medium text-slate-700 dark:text-slate-300"
+            >
+              Name
+            </label>
+            <input
+              id="project-name"
+              type="text"
+              value={name}
+              onChange={(e) => setName(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 Prompt Project"
+              disabled={submitting}
+            />
+          </div>
+
+          <div className="mb-6">
+            <label
+              htmlFor="project-description"
+              className="mb-1.5 block text-sm font-medium text-slate-700 dark:text-slate-300"
+            >
+              Description
+            </label>
+            <textarea
+              id="project-description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              rows={3}
+              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 are you tuning?"
+              disabled={submitting}
+            />
+          </div>
+
+          <div className="flex items-center justify-end gap-3">
+            <button
+              type="button"
+              onClick={() => {
+                reset();
+                onClose();
+              }}
+              disabled={submitting}
+              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"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={submitting}
+              className="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 disabled:opacity-50 disabled:cursor-not-allowed transition"
+            >
+              {submitting ? "Creating…" : "Create Project"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Project Card
+// ---------------------------------------------------------------------------
+
+function ProjectCard({
+  project,
+  onClick,
+}: {
+  project: ProjectResponse;
+  onClick: () => void;
+}) {
+  const updatedDate = new Date(project.updated_at);
+  const timeAgo = formatTimeAgo(updatedDate);
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="w-full text-left rounded-xl bg-white dark:bg-slate-800 p-5 shadow-md ring-1 ring-slate-200 dark:ring-slate-700 hover:ring-indigo-400 dark:hover:ring-indigo-500 hover:shadow-lg transition-all duration-200 group"
+    >
+      <div className="flex items-start justify-between mb-3">
+        <h3 className="text-lg font-semibold text-slate-900 dark:text-white group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">
+          {project.name}
+        </h3>
+        <span className="shrink-0 ml-2 text-xs text-slate-400 dark:text-slate-500">
+          {timeAgo}
+        </span>
+      </div>
+
+      {project.description && (
+        <p className="mb-4 text-sm text-slate-600 dark:text-slate-400 line-clamp-2">
+          {project.description}
+        </p>
+      )}
+
+      <div className="flex items-center gap-4 text-xs text-slate-500 dark:text-slate-400">
+        <span className="flex items-center gap-1">
+          <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+          </svg>
+          Experiments
+        </span>
+        <span className="flex items-center gap-1">
+          <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+            <path strokeLinecap="round" strokeLinejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
+          </svg>
+          Best score
+        </span>
+      </div>
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Helper
+// ---------------------------------------------------------------------------
+
+function formatTimeAgo(date: Date): string {
+  const now = Date.now();
+  const diffMs = now - date.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+
+  if (diffSec < 60) return "just now";
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) return `${diffMin}m ago`;
+  const diffHr = Math.floor(diffMin / 60);
+  if (diffHr < 24) return `${diffHr}h ago`;
+  const diffDay = Math.floor(diffHr / 24);
+  if (diffDay < 30) return `${diffDay}d ago`;
+  return date.toLocaleDateString();
+}
+
+// ---------------------------------------------------------------------------
+// Projects Page
+// ---------------------------------------------------------------------------
+
+export default function ProjectsPage() {
+  const navigate = useNavigate();
+  const [projectList, setProjectList] = useState<ProjectResponse[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const loadProjects = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const resp = await projects.list();
+      setProjectList(resp.items);
+    } catch (err: unknown) {
+      if (err instanceof ApiError) {
+        setError(`Failed to load projects (${err.status}).`);
+      } else {
+        setError("Network error. Is the server running?");
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadProjects();
+  }, [loadProjects]);
+
+  function handleProjectCreated(p: ProjectResponse) {
+    setProjectList((prev) => [p, ...prev]);
+    setModalOpen(false);
+  }
+
+  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-5xl">
+        {/* Header */}
+        <div className="mb-8 flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold text-slate-900 dark:text-white">
+              Projects
+            </h1>
+            <p className="mt-1 text-slate-500 dark:text-slate-400">
+              Manage your prompt tuning projects.
+            </p>
+          </div>
+          <button
+            type="button"
+            onClick={() => setModalOpen(true)}
+            className="rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 transition"
+          >
+            New Project
+          </button>
+        </div>
+
+        {/* Loading state */}
+        {loading && (
+          <p className="text-center text-slate-500 dark:text-slate-400 animate-pulse py-16">
+            Loading projects…
+          </p>
+        )}
+
+        {/* Error state */}
+        {!loading && error && (
+          <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={loadProjects}
+              className="mt-3 text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500"
+            >
+              Retry
+            </button>
+          </div>
+        )}
+
+        {/* Empty state */}
+        {!loading && !error && projectList.length === 0 && (
+          <div className="rounded-xl bg-white dark:bg-slate-800 p-12 text-center shadow ring-1 ring-slate-200 dark:ring-slate-700">
+            <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-900/40 text-indigo-600 dark:text-indigo-400">
+              <svg className="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
+              </svg>
+            </div>
+            <h2 className="text-lg font-semibold text-slate-900 dark:text-white">
+              No projects yet
+            </h2>
+            <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
+              Create your first project to start tuning prompts.
+            </p>
+            <button
+              type="button"
+              onClick={() => setModalOpen(true)}
+              className="mt-5 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 transition"
+            >
+              Create First Project
+            </button>
+          </div>
+        )}
+
+        {/* Project grid */}
+        {!loading && !error && projectList.length > 0 && (
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+            {projectList.map((project) => (
+              <ProjectCard
+                key={project.id}
+                project={project}
+                onClick={() => navigate(`/experiments/${project.id}`)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* New Project Modal */}
+      <NewProjectModal
+        open={modalOpen}
+        onClose={() => setModalOpen(false)}
+        onCreated={handleProjectCreated}
+      />
     </div>
   );
 }