feat: implement auth, projects, and frontend foundation

apps/web/src/api/client.ts

@@ -0,0 +1,26 @@
+import axios from "axios";
+
+const BASE_URL = import.meta.env.VITE_API_BASE_URL ?? "http://localhost:8000";
+
+export const apiClient = axios.create({
+  baseURL: BASE_URL,
+  withCredentials: true,
+  headers: {
+    "Content-Type": "application/json"
+  }
+});
+
+export const shouldSkipAuthRedirect = (path: string): boolean => {
+  return path.startsWith("/login") || path.startsWith("/auth");
+};
+
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    const status = error?.response?.status;
+    if (status === 401 && !shouldSkipAuthRedirect(window.location.pathname)) {
+      window.location.assign("/auth/login");
+    }
+    return Promise.reject(error);
+  }
+);

apps/web/src/api/dashboard.ts

@@ -0,0 +1,13 @@
+import { apiClient } from "./client";
+
+export type DashboardSummary = {
+  projects: number;
+  repositories: number;
+  sshKeys: number;
+  recentActivity: string[];
+};
+
+export const getDashboardSummary = async (): Promise<DashboardSummary> => {
+  const response = await apiClient.get<DashboardSummary>("/dashboard/summary");
+  return response.data;
+};

apps/web/src/api/projects.ts

@@ -0,0 +1,51 @@
+import { apiClient } from "./client";
+import type { Project } from "../types";
+
+export type ProjectCreateInput = {
+  name: string;
+  description?: string | null;
+};
+
+export type ProjectUpdateInput = {
+  name?: string | null;
+  description?: string | null;
+};
+
+export type SetDefaultSSHKeyInput = {
+  ssh_key_id: string;
+};
+
+export const listProjects = async (): Promise<Project[]> => {
+  const response = await apiClient.get<Project[]>("/projects");
+  return response.data;
+};
+
+export const createProject = async (
+  input: ProjectCreateInput
+): Promise<Project> => {
+  const response = await apiClient.post<Project>("/projects", input);
+  return response.data;
+};
+
+export const updateProject = async (
+  projectId: string,
+  input: ProjectUpdateInput
+): Promise<Project> => {
+  const response = await apiClient.patch<Project>(`/projects/${projectId}`, input);
+  return response.data;
+};
+
+export const deleteProject = async (projectId: string): Promise<void> => {
+  await apiClient.delete(`/projects/${projectId}`);
+};
+
+export const setDefaultSSHKey = async (
+  projectId: string,
+  input: SetDefaultSSHKeyInput
+): Promise<Project> => {
+  const response = await apiClient.patch<Project>(
+    `/projects/${projectId}/default-ssh-key`,
+    input
+  );
+  return response.data;
+};

apps/web/src/components/app-shell.tsx

@@ -0,0 +1,56 @@
+import { Link, NavLink, Outlet } from "react-router-dom";
+
+import { useAuth } from "../state/auth";
+
+const NAV_ITEMS = [
+  { to: "/", label: "Dashboard" },
+  { to: "/projects", label: "Projects" },
+  { to: "/repositories", label: "Repositories" },
+  { to: "/ssh-keys", label: "SSH Keys" },
+  { to: "/settings", label: "Settings" }
+];
+
+export const AppShell = () => {
+  const { user, logout } = useAuth();
+
+  return (
+    <div className="shell">
+      <header className="shell-header">
+        <Link className="brand" to="/">
+          Headquarter
+        </Link>
+        <div className="header-actions">
+          <div className="user-chip">{user?.name ?? "User"}</div>
+          <button
+            className="ghost-button"
+            onClick={() => {
+              void logout();
+            }}
+            type="button"
+          >
+            Logout
+          </button>
+        </div>
+      </header>
+
+      <div className="shell-body">
+        <aside className="shell-nav" aria-label="Primary navigation">
+          {NAV_ITEMS.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              className={({ isActive }) => (isActive ? "nav-item nav-item-active" : "nav-item")}
+              end={item.to === "/"}
+            >
+              {item.label}
+            </NavLink>
+          ))}
+        </aside>
+
+        <main className="shell-content">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+};

apps/web/src/components/protected-route.test.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { describe, expect, it, vi } from "vitest";
+
+import { ProtectedRoute } from "./protected-route";
+
+const mockUseAuth = vi.fn();
+
+vi.mock("../state/auth", () => ({
+  useAuth: () => mockUseAuth()
+}));
+
+describe("ProtectedRoute", () => {
+  it("shows loading while session is resolving", () => {
+    mockUseAuth.mockReturnValue({ state: "loading" });
+
+    render(
+      <MemoryRouter initialEntries={["/"]}>
+        <ProtectedRoute>
+          <div>private content</div>
+        </ProtectedRoute>
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText("Checking session...")).toBeInTheDocument();
+  });
+
+  it("redirects unauthenticated users to login", () => {
+    mockUseAuth.mockReturnValue({ state: "unauthenticated" });
+
+    render(
+      <MemoryRouter initialEntries={["/settings"]}>
+        <Routes>
+          <Route
+            path="/settings"
+            element={
+              <ProtectedRoute>
+                <div>private content</div>
+              </ProtectedRoute>
+            }
+          />
+          <Route path="/login" element={<div>login page</div>} />
+        </Routes>
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText("login page")).toBeInTheDocument();
+  });
+});

apps/web/src/components/protected-route.tsx

@@ -0,0 +1,19 @@
+import { Navigate, useLocation } from "react-router-dom";
+
+import { useAuth } from "../state/auth";
+
+export const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
+  const { state } = useAuth();
+  const location = useLocation();
+
+  if (state === "loading") {
+    return <div className="center-screen">Checking session...</div>;
+  }
+
+  if (state === "unauthenticated") {
+    const nextPath = encodeURIComponent(location.pathname);
+    return <Navigate to={`/login?next=${nextPath}`} replace />;
+  }
+
+  return <>{children}</>;
+};

apps/web/src/main.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+
+import { AppRouter } from "./router";
+import { AuthProvider } from "./state/auth";
+import "./styles.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <AuthProvider>
+        <AppRouter />
+      </AuthProvider>
+    </BrowserRouter>
+  </React.StrictMode>
+);

apps/web/src/pages/dashboard.test.tsx

@@ -0,0 +1,54 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { DashboardPage } from "./dashboard";
+
+const mockGet = vi.fn();
+
+vi.mock("../api/dashboard", () => ({
+  getDashboardSummary: (...args: unknown[]) => mockGet(...args)
+}));
+
+describe("DashboardPage", () => {
+  beforeEach(() => {
+    mockGet.mockReset();
+  });
+
+  it("shows loading then empty state when summary has no data", async () => {
+    mockGet.mockResolvedValue({
+      projects: 0,
+      repositories: 0,
+      sshKeys: 0,
+      recentActivity: []
+    });
+
+    render(<DashboardPage />);
+
+    expect(screen.getByText("Loading dashboard...")).toBeInTheDocument();
+    await waitFor(() => {
+      expect(screen.getByText("No activity yet")).toBeInTheDocument();
+    });
+  });
+
+  it("shows retry action when summary request fails", async () => {
+    mockGet.mockRejectedValueOnce(new Error("failed"));
+    mockGet.mockResolvedValueOnce({
+      projects: 2,
+      repositories: 5,
+      sshKeys: 1,
+      recentActivity: ["Created repo"]
+    });
+
+    render(<DashboardPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Dashboard is unavailable")).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Retry" }));
+
+    await waitFor(() => {
+      expect(screen.getByText("2")).toBeInTheDocument();
+    });
+  });
+});

apps/web/src/pages/dashboard.tsx

@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+import { getDashboardSummary, type DashboardSummary } from "../api/dashboard";
+
+const CARDS = [
+  { label: "Projects", key: "projects" },
+  { label: "Repositories", key: "repositories" },
+  { label: "SSH Keys", key: "sshKeys" }
+] as const;
+
+type DashboardStatus = "loading" | "ready" | "error";
+
+export const DashboardPage = () => {
+  const [status, setStatus] = useState<DashboardStatus>("loading");
+  const [summary, setSummary] = useState<DashboardSummary | null>(null);
+
+  const loadSummary = useCallback(async () => {
+    setStatus("loading");
+    try {
+      const data = await getDashboardSummary();
+      setSummary(data);
+      setStatus("ready");
+    } catch {
+      setSummary(null);
+      setStatus("error");
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadSummary();
+  }, [loadSummary]);
+
+  const cards = useMemo(() => CARDS, []);
+  const isEmpty =
+    status === "ready" &&
+    summary !== null &&
+    summary.projects === 0 &&
+    summary.repositories === 0 &&
+    summary.sshKeys === 0 &&
+    summary.recentActivity.length === 0;
+
+  return (
+    <section className="stack">
+      <h1>Dashboard</h1>
+      <p className="muted">Your workspace overview will appear here.</p>
+
+      {status === "loading" && <p className="muted">Loading dashboard...</p>}
+
+      {status === "error" && (
+        <div className="card stack">
+          <p>Dashboard is unavailable</p>
+          <button className="secondary-button" onClick={() => void loadSummary()} type="button">
+            Retry
+          </button>
+        </div>
+      )}
+
+      <div className="card-grid">
+        {cards.map((card) => (
+          <article className="card" key={card.label}>
+            <p className="card-label">{card.label}</p>
+            <p className="card-value">{summary ? String(summary[card.key]) : "-"}</p>
+          </article>
+        ))}
+      </div>
+
+      {isEmpty && <p className="muted">No activity yet</p>}
+
+      <div className="quick-actions">
+        <button className="primary-button" type="button">
+          New Project
+        </button>
+        <button className="secondary-button" type="button">
+          Add Repository
+        </button>
+      </div>
+    </section>
+  );
+};

apps/web/src/pages/placeholder.tsx

@@ -0,0 +1,32 @@
+export const PlaceholderPage = ({ title }: { title: string }) => {
+  return (
+    <section className="stack">
+      <h1>{title}</h1>
+      <p className="muted">This page is part of the frontend foundation scaffold.</p>
+    </section>
+  );
+};
+
+export const NotFoundPage = () => {
+  return (
+    <section className="stack center-screen">
+      <h1>404</h1>
+      <p className="muted">The page you requested does not exist.</p>
+    </section>
+  );
+};
+
+export const LoginRedirectPage = () => {
+  const nextPath = new URLSearchParams(window.location.search).get("next") ?? "/";
+  const encodedNext = encodeURIComponent(nextPath);
+
+  return (
+    <section className="stack center-screen">
+      <h1>Sign in required</h1>
+      <p className="muted">You need to authenticate to access this section.</p>
+      <a className="primary-button" href={`/auth/login?next=${encodedNext}`}>
+        Continue to login
+      </a>
+    </section>
+  );
+};

apps/web/src/pages/projects.test.tsx

@@ -0,0 +1,163 @@
+import { cleanup, fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { ProjectsPage } from "./projects";
+import * as projectsApi from "../api/projects";
+
+const mockProjects = [
+  {
+    id: "proj-1",
+    name: "Alpha Project",
+    description: "First project",
+    owner_id: "user-1",
+    default_ssh_key_id: null,
+  },
+  {
+    id: "proj-2",
+    name: "Beta Project",
+    description: null,
+    owner_id: "user-1",
+    default_ssh_key_id: null,
+  },
+];
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe("ProjectsPage", () => {
+  it("renders loading state initially", () => {
+    vi.spyOn(projectsApi, "listProjects").mockImplementation(() => new Promise(() => {}));
+    render(<ProjectsPage />);
+    expect(screen.getByText(/loading projects/i)).toBeInTheDocument();
+  });
+
+  it("renders project list after loading", async () => {
+    vi.spyOn(projectsApi, "listProjects").mockResolvedValue(mockProjects);
+    render(<ProjectsPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Alpha Project")).toBeInTheDocument();
+    });
+    expect(screen.getByText("Beta Project")).toBeInTheDocument();
+    expect(screen.getByText("First project")).toBeInTheDocument();
+  });
+
+  it("renders empty state when no projects", async () => {
+    vi.spyOn(projectsApi, "listProjects").mockResolvedValue([]);
+    render(<ProjectsPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/no projects yet/i)).toBeInTheDocument();
+    });
+  });
+
+  it("renders error state with retry button", async () => {
+    vi.spyOn(projectsApi, "listProjects").mockRejectedValue(new Error("fail"));
+    render(<ProjectsPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/failed to load projects/i)).toBeInTheDocument();
+    });
+    expect(screen.getByRole("button", { name: /retry/i })).toBeInTheDocument();
+  });
+
+  it("opens create dialog and submits new project", async () => {
+    const listMock = vi.spyOn(projectsApi, "listProjects").mockResolvedValue([]);
+    const createMock = vi.spyOn(projectsApi, "createProject").mockResolvedValue(mockProjects[0]);
+
+    render(<ProjectsPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/no projects yet/i)).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: /new project/i }));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+
+    fireEvent.change(screen.getByPlaceholderText(/project name/i), {
+      target: { value: "Gamma Project" },
+    });
+    fireEvent.change(screen.getByPlaceholderText(/optional description/i), {
+      target: { value: "A new project" },
+    });
+    fireEvent.click(screen.getByRole("button", { name: /create/i }));
+
+    await waitFor(() => {
+      expect(createMock).toHaveBeenCalledWith({
+        name: "Gamma Project",
+        description: "A new project",
+      });
+    });
+    expect(listMock).toHaveBeenCalledTimes(2);
+  });
+
+  it("shows validation error when name is empty", async () => {
+    vi.spyOn(projectsApi, "listProjects").mockResolvedValue([]);
+
+    render(<ProjectsPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText(/no projects yet/i)).toBeInTheDocument();
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: /new project/i }));
+    fireEvent.click(screen.getByRole("button", { name: /create/i }));
+
+    expect(screen.getByText(/project name is required/i)).toBeInTheDocument();
+  });
+
+  it("opens edit dialog and saves changes", async () => {
+    const listMock = vi.spyOn(projectsApi, "listProjects").mockResolvedValue(mockProjects);
+    const updateMock = vi.spyOn(projectsApi, "updateProject").mockResolvedValue(mockProjects[0]);
+
+    render(<ProjectsPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Alpha Project")).toBeInTheDocument();
+    });
+
+    const alphaCard = screen.getByText("Alpha Project").closest(".project-card") as HTMLElement | null;
+    if (!alphaCard) throw new Error("Card not found");
+
+    fireEvent.click(within(alphaCard).getByRole("button", { name: /edit/i }));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+
+    const nameInput = screen.getByDisplayValue("Alpha Project");
+    fireEvent.change(nameInput, { target: { value: "Alpha Updated" } });
+    fireEvent.click(screen.getByRole("button", { name: /save/i }));
+
+    await waitFor(() => {
+      expect(updateMock).toHaveBeenCalledWith("proj-1", {
+        name: "Alpha Updated",
+        description: "First project",
+      });
+    });
+    expect(listMock).toHaveBeenCalledTimes(2);
+  });
+
+  it("shows delete confirmation and deletes project", async () => {
+    const listMock = vi.spyOn(projectsApi, "listProjects").mockResolvedValue(mockProjects);
+    const deleteMock = vi.spyOn(projectsApi, "deleteProject").mockResolvedValue(undefined);
+
+    render(<ProjectsPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Alpha Project")).toBeInTheDocument();
+    });
+
+    const alphaCard = screen.getByText("Alpha Project").closest(".project-card") as HTMLElement | null;
+    if (!alphaCard) throw new Error("Card not found");
+
+    fireEvent.click(within(alphaCard).getByRole("button", { name: /delete/i }));
+    expect(within(alphaCard).getByText(/are you sure/i)).toBeInTheDocument();
+
+    fireEvent.click(within(alphaCard).getByRole("button", { name: /delete/i }));
+
+    await waitFor(() => {
+      expect(deleteMock).toHaveBeenCalledWith("proj-1");
+    });
+    expect(listMock).toHaveBeenCalledTimes(2);
+  });
+});

apps/web/src/pages/projects.tsx

@@ -0,0 +1,215 @@
+import { useCallback, useEffect, useState } from "react";
+
+import {
+  createProject,
+  deleteProject,
+  listProjects,
+  updateProject,
+  type ProjectCreateInput,
+  type ProjectUpdateInput,
+} from "../api/projects";
+import type { Project } from "../types";
+
+type ProjectsStatus = "loading" | "ready" | "error";
+type DialogMode = "none" | "create" | "edit";
+
+export const ProjectsPage = () => {
+  const [status, setStatus] = useState<ProjectsStatus>("loading");
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [dialogMode, setDialogMode] = useState<DialogMode>("none");
+  const [editingProject, setEditingProject] = useState<Project | null>(null);
+  const [formName, setFormName] = useState("");
+  const [formDescription, setFormDescription] = useState("");
+  const [formError, setFormError] = useState<string | null>(null);
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+
+  const loadProjects = useCallback(async () => {
+    setStatus("loading");
+    try {
+      const data = await listProjects();
+      setProjects(data);
+      setStatus("ready");
+    } catch {
+      setProjects([]);
+      setStatus("error");
+    }
+  }, []);
+
+  useEffect(() => {
+    void loadProjects();
+  }, [loadProjects]);
+
+  const openCreate = () => {
+    setFormName("");
+    setFormDescription("");
+    setFormError(null);
+    setEditingProject(null);
+    setDialogMode("create");
+  };
+
+  const openEdit = (project: Project) => {
+    setFormName(project.name);
+    setFormDescription(project.description ?? "");
+    setFormError(null);
+    setEditingProject(project);
+    setDialogMode("edit");
+  };
+
+  const closeDialog = () => {
+    setDialogMode("none");
+    setEditingProject(null);
+    setFormError(null);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setFormError(null);
+
+    if (!formName.trim()) {
+      setFormError("Project name is required");
+      return;
+    }
+
+    try {
+      if (dialogMode === "create") {
+        const input: ProjectCreateInput = {
+          name: formName.trim(),
+          description: formDescription.trim() || null,
+        };
+        await createProject(input);
+      } else if (dialogMode === "edit" && editingProject) {
+        const input: ProjectUpdateInput = {
+          name: formName.trim(),
+          description: formDescription.trim() || null,
+        };
+        await updateProject(editingProject.id, input);
+      }
+      closeDialog();
+      await loadProjects();
+    } catch {
+      setFormError("Failed to save project");
+    }
+  };
+
+  const handleDelete = async (projectId: string) => {
+    try {
+      await deleteProject(projectId);
+      setDeleteConfirmId(null);
+      await loadProjects();
+    } catch {
+      setDeleteConfirmId(null);
+    }
+  };
+
+  const isEmpty = status === "ready" && projects.length === 0;
+
+  return (
+    <section className="stack">
+      <div className="page-header">
+        <h1>Projects</h1>
+        <button className="primary-button" onClick={openCreate} type="button">
+          New Project
+        </button>
+      </div>
+
+      {status === "loading" && <p className="muted">Loading projects...</p>}
+
+      {status === "error" && (
+        <div className="card stack">
+          <p>Failed to load projects</p>
+          <button className="secondary-button" onClick={() => void loadProjects()} type="button">
+            Retry
+          </button>
+        </div>
+      )}
+
+      {isEmpty && <p className="muted">No projects yet. Create your first project above.</p>}
+
+      {status === "ready" && projects.length > 0 && (
+        <div className="project-list">
+          {projects.map((project) => (
+            <article className="card project-card" key={project.id}>
+              <div className="project-info">
+                <h3>{project.name}</h3>
+                {project.description && <p className="muted">{project.description}</p>}
+              </div>
+              <div className="project-actions">
+                <button
+                  className="ghost-button"
+                  onClick={() => openEdit(project)}
+                  type="button"
+                >
+                  Edit
+                </button>
+                {deleteConfirmId === project.id ? (
+                  <div className="delete-confirm">
+                    <span>Are you sure?</span>
+                    <button
+                      className="danger-button"
+                      onClick={() => void handleDelete(project.id)}
+                      type="button"
+                    >
+                      Delete
+                    </button>
+                    <button
+                      className="ghost-button"
+                      onClick={() => setDeleteConfirmId(null)}
+                      type="button"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                ) : (
+                  <button
+                    className="ghost-button danger-text"
+                    onClick={() => setDeleteConfirmId(project.id)}
+                    type="button"
+                  >
+                    Delete
+                  </button>
+                )}
+              </div>
+            </article>
+          ))}
+        </div>
+      )}
+
+      {dialogMode !== "none" && (
+        <div className="dialog-overlay" role="dialog" aria-modal="true">
+          <div className="dialog">
+            <h2>{dialogMode === "create" ? "Create Project" : "Edit Project"}</h2>
+            <form onSubmit={handleSubmit} className="stack">
+              <label className="form-field">
+                Name
+                <input
+                  type="text"
+                  value={formName}
+                  onChange={(e) => setFormName(e.target.value)}
+                  placeholder="Project name"
+                />
+              </label>
+              <label className="form-field">
+                Description
+                <textarea
+                  value={formDescription}
+                  onChange={(e) => setFormDescription(e.target.value)}
+                  placeholder="Optional description"
+                  rows={3}
+                />
+              </label>
+              {formError && <p className="error-text">{formError}</p>}
+              <div className="dialog-actions">
+                <button className="secondary-button" onClick={closeDialog} type="button">
+                  Cancel
+                </button>
+                <button className="primary-button" type="submit">
+                  {dialogMode === "create" ? "Create" : "Save"}
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </section>
+  );
+};

apps/web/src/router.tsx

@@ -0,0 +1,31 @@
+import { Navigate, Route, Routes } from "react-router-dom";
+
+import { AppShell } from "./components/app-shell";
+import { ProtectedRoute } from "./components/protected-route";
+import { DashboardPage } from "./pages/dashboard";
+import { LoginRedirectPage, NotFoundPage, PlaceholderPage } from "./pages/placeholder";
+import { ProjectsPage } from "./pages/projects";
+
+export const AppRouter = () => {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginRedirectPage />} />
+      <Route
+        path="/"
+        element={
+          <ProtectedRoute>
+            <AppShell />
+          </ProtectedRoute>
+        }
+      >
+        <Route index element={<DashboardPage />} />
+        <Route path="projects" element={<ProjectsPage />} />
+        <Route path="repositories" element={<PlaceholderPage title="Repositories" />} />
+        <Route path="ssh-keys" element={<PlaceholderPage title="SSH Keys" />} />
+        <Route path="settings" element={<PlaceholderPage title="Settings" />} />
+      </Route>
+      <Route path="/404" element={<NotFoundPage />} />
+      <Route path="*" element={<Navigate to="/404" replace />} />
+    </Routes>
+  );
+};

apps/web/src/state/auth.tsx

@@ -0,0 +1,63 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+
+import { apiClient } from "../api/client";
+import type { SessionPayload, SessionUser } from "../types";
+
+type AuthState = "loading" | "authenticated" | "unauthenticated";
+
+type AuthContextValue = {
+  state: AuthState;
+  user: SessionUser | null;
+  refreshSession: () => Promise<void>;
+  logout: () => Promise<void>;
+};
+
+const AuthContext = createContext<AuthContextValue | undefined>(undefined);
+
+export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+  const [state, setState] = useState<AuthState>("loading");
+  const [user, setUser] = useState<SessionUser | null>(null);
+
+  const refreshSession = useCallback(async () => {
+    setState("loading");
+    try {
+      const response = await apiClient.get<SessionPayload>("/auth/me");
+      setUser(response.data.user);
+      setState("authenticated");
+    } catch {
+      setUser(null);
+      setState("unauthenticated");
+    }
+  }, []);
+
+  const logout = useCallback(async () => {
+    await apiClient.post("/auth/logout");
+    setUser(null);
+    setState("unauthenticated");
+  }, []);
+
+  useEffect(() => {
+    void refreshSession();
+  }, [refreshSession]);
+
+  const value = useMemo(
+    () => ({
+      state,
+      user,
+      refreshSession,
+      logout
+    }),
+    [refreshSession, state, user, logout]
+  );
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+};
+
+export const useAuth = (): AuthContextValue => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within AuthProvider");
+  }
+
+  return context;
+};

apps/web/src/styles.css

@@ -0,0 +1,296 @@
+:root {
+  color-scheme: light;
+  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
+  --bg: #f4f1ea;
+  --panel: #fffef9;
+  --ink: #1d1d1b;
+  --muted: #5f5b55;
+  --brand: #275d4b;
+  --brand-strong: #154236;
+  --border: #d8d0c5;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: radial-gradient(circle at top right, #fff5d6, var(--bg));
+  color: var(--ink);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.shell {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.shell-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.85rem 1.25rem;
+  border-bottom: 1px solid var(--border);
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(7px);
+}
+
+.brand {
+  font-weight: 700;
+  letter-spacing: 0.02em;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.shell-body {
+  display: grid;
+  grid-template-columns: 230px 1fr;
+  min-height: calc(100vh - 57px);
+}
+
+.shell-nav {
+  border-right: 1px solid var(--border);
+  padding: 1rem 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.nav-item {
+  padding: 0.65rem 0.75rem;
+  border-radius: 10px;
+  color: var(--muted);
+}
+
+.nav-item:hover {
+  background: #ece7df;
+  color: var(--ink);
+}
+
+.nav-item-active {
+  background: var(--brand);
+  color: #f7fff7;
+}
+
+.shell-content {
+  padding: 1.25rem;
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.9rem;
+}
+
+.card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 1rem;
+}
+
+.card-label {
+  margin: 0;
+  color: var(--muted);
+}
+
+.card-value {
+  margin: 0.45rem 0 0;
+  font-size: 1.6rem;
+  font-weight: 700;
+}
+
+.quick-actions {
+  display: flex;
+  gap: 0.6rem;
+}
+
+.primary-button,
+.secondary-button,
+.ghost-button {
+  border-radius: 10px;
+  border: 1px solid transparent;
+  padding: 0.58rem 0.85rem;
+  cursor: pointer;
+  font: inherit;
+}
+
+.primary-button {
+  background: var(--brand);
+  color: white;
+}
+
+.primary-button:hover {
+  background: var(--brand-strong);
+}
+
+.secondary-button {
+  border-color: var(--border);
+  background: var(--panel);
+}
+
+.ghost-button {
+  border-color: var(--border);
+  background: transparent;
+}
+
+.user-chip {
+  border: 1px solid var(--border);
+  background: var(--panel);
+  border-radius: 999px;
+  padding: 0.35rem 0.7rem;
+  font-size: 0.9rem;
+}
+
+.center-screen {
+  min-height: 55vh;
+  display: grid;
+  place-content: center;
+  text-align: center;
+}
+
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.project-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.project-card {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.project-info h3 {
+  margin: 0 0 0.35rem;
+}
+
+.project-info p {
+  margin: 0;
+}
+
+.project-actions {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.delete-confirm {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.danger-button {
+  border-radius: 10px;
+  border: 1px solid transparent;
+  padding: 0.58rem 0.85rem;
+  cursor: pointer;
+  font: inherit;
+  background: #b91c1c;
+  color: white;
+}
+
+.danger-text {
+  color: #b91c1c;
+}
+
+.error-text {
+  color: #b91c1c;
+  margin: 0;
+}
+
+.dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  display: grid;
+  place-content: center;
+  z-index: 50;
+}
+
+.dialog {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 1.25rem;
+  min-width: 320px;
+  max-width: 90vw;
+}
+
+.dialog h2 {
+  margin: 0 0 1rem;
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.form-field input,
+.form-field textarea {
+  padding: 0.55rem 0.7rem;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  font: inherit;
+}
+
+.dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.6rem;
+}
+
+@media (max-width: 860px) {
+  .shell-body {
+    grid-template-columns: 1fr;
+  }
+
+  .shell-nav {
+    flex-direction: row;
+    overflow-x: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .card-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .quick-actions {
+    flex-direction: column;
+  }
+
+  .project-card {
+    flex-direction: column;
+  }
+}

apps/web/src/test/setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

apps/web/src/types.ts

@@ -0,0 +1,17 @@
+export type SessionUser = {
+  id: string;
+  email: string;
+  name: string;
+};
+
+export type SessionPayload = {
+  user: SessionUser;
+};
+
+export type Project = {
+  id: string;
+  name: string;
+  description: string | null;
+  owner_id: string;
+  default_ssh_key_id: string | null;
+};