diff --git a/app/(main)/datasets/page.tsx b/app/(main)/datasets/page.tsx
index 1234bc1..05d9316 100644
--- a/app/(main)/datasets/page.tsx
+++ b/app/(main)/datasets/page.tsx
@@ -10,11 +10,11 @@ import { useState, useEffect } from "react";
 
 import { useAuth } from "@/app/lib/context/AuthContext";
 import { useApp } from "@/app/lib/context/AppContext";
+import { Dataset } from "@/app/lib/types/datasets";
 import { apiFetch } from "@/app/lib/apiClient";
 import Sidebar from "@/app/components/Sidebar";
 import PageHeader from "@/app/components/PageHeader";
 import { useToast } from "@/app/components/Toast";
-import { Dataset } from "@/app/lib/types/dataset";
 
 export const DATASETS_STORAGE_KEY = "kaapi_datasets";
 
diff --git a/app/(main)/keystore/page.tsx b/app/(main)/keystore/page.tsx
index fcd20e9..c66a8ba 100644
--- a/app/(main)/keystore/page.tsx
+++ b/app/(main)/keystore/page.tsx
@@ -13,8 +13,6 @@ import { useAuth } from "@/app/lib/context/AuthContext";
 import { useApp } from "@/app/lib/context/AppContext";
 import { APIKey } from "@/app/lib/types/credentials";
 
-export const STORAGE_KEY = "kaapi_api_keys";
-
 export default function KaapiKeystore() {
   const { sidebarCollapsed } = useApp();
   const [isModalOpen, setIsModalOpen] = useState(false);
diff --git a/app/api/assessment/assessments/[assessment_id]/results/route.ts b/app/api/assessment/assessments/[assessment_id]/results/route.ts
new file mode 100644
index 0000000..8cc5d3b
--- /dev/null
+++ b/app/api/assessment/assessments/[assessment_id]/results/route.ts
@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  assessmentApiFetch,
+  safeParseJson,
+  toDownloadResponse,
+} from "@/app/api/assessment/utils";
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ assessment_id: string }> },
+) {
+  try {
+    const { assessment_id } = await params;
+    const queryParams = new URLSearchParams(request.nextUrl.searchParams);
+    queryParams.set("get_trace_info", "true");
+
+    const response = await assessmentApiFetch(
+      request,
+      `/api/v1/assessment/assessments/${assessment_id}/results?${queryParams.toString()}`,
+      { method: "GET" },
+    );
+
+    const downloadResponse = await toDownloadResponse(response);
+    if (downloadResponse) {
+      return downloadResponse;
+    }
+
+    const data = await safeParseJson(response);
+    return NextResponse.json(data, { status: response.status });
+  } catch (error: unknown) {
+    console.error("Assessment results proxy error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to forward request",
+      },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/assessment/assessments/[assessment_id]/retry/route.ts b/app/api/assessment/assessments/[assessment_id]/retry/route.ts
new file mode 100644
index 0000000..2ed01c9
--- /dev/null
+++ b/app/api/assessment/assessments/[assessment_id]/retry/route.ts
@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+
+interface RouteContext {
+  params: Promise<{ assessment_id: string }>;
+}
+
+export async function POST(request: NextRequest, context: RouteContext) {
+  try {
+    const { assessment_id } = await context.params;
+    const { status, data } = await apiClient(
+      request,
+      `/api/v1/assessment/assessments/${assessment_id}/retry`,
+      { method: "POST" },
+    );
+
+    return NextResponse.json(data, { status });
+  } catch (error: unknown) {
+    console.error("Assessment retry proxy error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to forward assessment retry request",
+      },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/assessment/assessments/route.ts b/app/api/assessment/assessments/route.ts
new file mode 100644
index 0000000..4dfdda5
--- /dev/null
+++ b/app/api/assessment/assessments/route.ts
@@ -0,0 +1,25 @@
+import { NextRequest, NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+
+export async function GET(request: NextRequest) {
+  try {
+    const queryString = request.nextUrl.searchParams.toString();
+    const endpoint = `/api/v1/assessment/assessments${
+      queryString ? `?${queryString}` : ""
+    }`;
+
+    const { status, data } = await apiClient(request, endpoint, {
+      method: "GET",
+    });
+
+    return NextResponse.json(data, { status });
+  } catch (error: unknown) {
+    console.error("Assessment list proxy error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to forward request to backend",
+      },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/assessment/datasets/[dataset_id]/route.ts b/app/api/assessment/datasets/[dataset_id]/route.ts
new file mode 100644
index 0000000..0132b04
--- /dev/null
+++ b/app/api/assessment/datasets/[dataset_id]/route.ts
@@ -0,0 +1,95 @@
+import { NextRequest, NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ dataset_id: string }> },
+) {
+  try {
+    const { dataset_id } = await params;
+    const fetchContent =
+      request.nextUrl.searchParams.get("fetch_content") === "true";
+
+    // Always request signed URL when fetch_content is needed
+    const backendParams = new URLSearchParams(request.nextUrl.searchParams);
+    if (fetchContent) {
+      backendParams.set("include_signed_url", "true");
+    }
+    const endpoint = `/api/v1/assessment/datasets/${dataset_id}${
+      backendParams.toString() ? `?${backendParams.toString()}` : ""
+    }`;
+
+    const { status, data } = await apiClient(request, endpoint, {
+      method: "GET",
+    });
+
+    if (status >= 400) {
+      return NextResponse.json(data, { status });
+    }
+
+    // Download file from S3 server-side and return as base64
+    if (fetchContent) {
+      const signedUrl =
+        (data as { data?: { signed_url?: string }; signed_url?: string })?.data
+          ?.signed_url ||
+        (data as { data?: { signed_url?: string }; signed_url?: string })
+          ?.signed_url;
+
+      if (!signedUrl) {
+        return NextResponse.json(
+          { error: "No signed URL available" },
+          { status: 404 },
+        );
+      }
+
+      const fileResponse = await fetch(signedUrl);
+      if (!fileResponse.ok) {
+        return NextResponse.json(
+          { error: "Failed to fetch file from storage" },
+          { status: 502 },
+        );
+      }
+
+      const arrayBuffer = await fileResponse.arrayBuffer();
+      const base64 = Buffer.from(arrayBuffer).toString("base64");
+      return NextResponse.json(
+        { ...(data as Record<string, unknown>), file_content: base64 },
+        { status: 200 },
+      );
+    }
+
+    return NextResponse.json(data, { status });
+  } catch (error: unknown) {
+    console.error("Assessment dataset details proxy error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to forward request to backend",
+      },
+      { status: 500 },
+    );
+  }
+}
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ dataset_id: string }> },
+) {
+  try {
+    const { dataset_id } = await params;
+    const { status, data } = await apiClient(
+      request,
+      `/api/v1/assessment/datasets/${dataset_id}`,
+      { method: "DELETE" },
+    );
+
+    return NextResponse.json(data, { status });
+  } catch (error: unknown) {
+    console.error("Assessment dataset delete proxy error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to forward request to backend",
+      },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/assessment/datasets/route.ts b/app/api/assessment/datasets/route.ts
new file mode 100644
index 0000000..f262d35
--- /dev/null
+++ b/app/api/assessment/datasets/route.ts
@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+
+export async function GET(request: NextRequest) {
+  try {
+    const { status, data } = await apiClient(
+      request,
+      "/api/v1/assessment/datasets",
+      { method: "GET" },
+    );
+
+    return NextResponse.json(data, { status });
+  } catch (error: unknown) {
+    console.error("Assessment datasets list proxy error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to forward request to backend",
+      },
+      { status: 500 },
+    );
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const formData = await request.formData();
+
+    const { status, data } = await apiClient(
+      request,
+      "/api/v1/assessment/datasets",
+      {
+        method: "POST",
+        body: formData,
+      },
+    );
+
+    return NextResponse.json(data, { status });
+  } catch (error: unknown) {
+    console.error("Assessment datasets create proxy error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to forward request to backend",
+      },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/assessment/evaluations/[evaluation_id]/results/route.ts b/app/api/assessment/evaluations/[evaluation_id]/results/route.ts
new file mode 100644
index 0000000..a9b64c7
--- /dev/null
+++ b/app/api/assessment/evaluations/[evaluation_id]/results/route.ts
@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from "next/server";
+import {
+  assessmentApiFetch,
+  safeParseJson,
+  toDownloadResponse,
+} from "@/app/api/assessment/utils";
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ evaluation_id: string }> },
+) {
+  try {
+    const { evaluation_id } = await params;
+    const queryString = request.nextUrl.searchParams.toString();
+    const endpoint = `/api/v1/assessment/evaluations/${evaluation_id}/results${
+      queryString ? `?${queryString}` : ""
+    }`;
+
+    const response = await assessmentApiFetch(request, endpoint, {
+      method: "GET",
+    });
+
+    const downloadResponse = await toDownloadResponse(response);
+    if (downloadResponse) {
+      return downloadResponse;
+    }
+
+    const data = await safeParseJson(response);
+    return NextResponse.json(data, { status: response.status });
+  } catch (error: unknown) {
+    console.error("Assessment evaluation results proxy error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to forward request",
+      },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/assessment/evaluations/[evaluation_id]/retry/route.ts b/app/api/assessment/evaluations/[evaluation_id]/retry/route.ts
new file mode 100644
index 0000000..c260689
--- /dev/null
+++ b/app/api/assessment/evaluations/[evaluation_id]/retry/route.ts
@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+
+interface RouteContext {
+  params: Promise<{ evaluation_id: string }>;
+}
+
+export async function POST(request: NextRequest, context: RouteContext) {
+  try {
+    const { evaluation_id } = await context.params;
+    const { status, data } = await apiClient(
+      request,
+      `/api/v1/assessment/evaluations/${evaluation_id}/retry`,
+      { method: "POST" },
+    );
+
+    return NextResponse.json(data, { status });
+  } catch (error: unknown) {
+    console.error("Assessment evaluation retry proxy error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to forward evaluation retry request",
+      },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/assessment/evaluations/route.ts b/app/api/assessment/evaluations/route.ts
new file mode 100644
index 0000000..48c34a6
--- /dev/null
+++ b/app/api/assessment/evaluations/route.ts
@@ -0,0 +1,50 @@
+import { NextRequest, NextResponse } from "next/server";
+import { apiClient } from "@/app/lib/apiClient";
+
+export async function GET(request: NextRequest) {
+  try {
+    const queryString = request.nextUrl.searchParams.toString();
+    const endpoint = `/api/v1/assessment/evaluations${
+      queryString ? `?${queryString}` : ""
+    }`;
+
+    const { status, data } = await apiClient(request, endpoint, {
+      method: "GET",
+    });
+
+    return NextResponse.json(data, { status });
+  } catch (error: unknown) {
+    console.error("Assessment evaluations list proxy error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to forward request to backend",
+      },
+      { status: 500 },
+    );
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+
+    const { status, data } = await apiClient(
+      request,
+      "/api/v1/assessment/evaluations",
+      {
+        method: "POST",
+        body: JSON.stringify(body),
+      },
+    );
+
+    return NextResponse.json(data, { status });
+  } catch (error: unknown) {
+    console.error("Assessment evaluations create proxy error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to forward request to backend",
+      },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/assessment/events/route.ts b/app/api/assessment/events/route.ts
new file mode 100644
index 0000000..52993bb
--- /dev/null
+++ b/app/api/assessment/events/route.ts
@@ -0,0 +1,44 @@
+import { NextRequest, NextResponse } from "next/server";
+import { assessmentApiFetch } from "@/app/api/assessment/utils";
+
+export const runtime = "nodejs";
+export const dynamic = "force-dynamic";
+
+export async function GET(request: NextRequest) {
+  try {
+    const response = await assessmentApiFetch(
+      request,
+      "/api/v1/assessment/events",
+      {
+        method: "GET",
+        headers: { Accept: "text/event-stream" },
+        cache: "no-store",
+      },
+    );
+
+    if (!response.ok || !response.body) {
+      const text = await response.text();
+      return NextResponse.json(
+        { error: "Failed to connect assessment event stream", details: text },
+        { status: response.status || 500 },
+      );
+    }
+
+    return new Response(response.body, {
+      headers: {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache, no-transform",
+        Connection: "keep-alive",
+        "X-Accel-Buffering": "no",
+      },
+    });
+  } catch (error: unknown) {
+    console.error("Assessment events proxy error:", error);
+    return NextResponse.json(
+      {
+        error: "Failed to connect assessment event stream",
+      },
+      { status: 500 },
+    );
+  }
+}
diff --git a/app/api/assessment/utils.ts b/app/api/assessment/utils.ts
new file mode 100644
index 0000000..8cfee62
--- /dev/null
+++ b/app/api/assessment/utils.ts
@@ -0,0 +1,87 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const BACKEND_URL = process.env.BACKEND_URL || "http://localhost:8000";
+
+const DOWNLOAD_CONTENT_TYPE_HINTS = [
+  "text/csv",
+  "spreadsheetml",
+  "octet-stream",
+  "application/zip",
+];
+
+export function isDownloadContentType(contentType: string): boolean {
+  return DOWNLOAD_CONTENT_TYPE_HINTS.some((hint) => contentType.includes(hint));
+}
+
+function buildAssessmentAuthHeaders(
+  request: NextRequest | Request,
+  headers: Headers = new Headers(),
+): Headers {
+  const apiKey = request.headers.get("X-API-KEY") || "";
+  const cookie = request.headers.get("Cookie") || "";
+
+  if (apiKey) {
+    headers.set("X-API-KEY", apiKey);
+  }
+  if (cookie) {
+    headers.set("Cookie", cookie);
+  }
+
+  return headers;
+}
+
+export async function assessmentApiFetch(
+  request: NextRequest | Request,
+  endpoint: string,
+  options: RequestInit = {},
+): Promise<Response> {
+  const headers = buildAssessmentAuthHeaders(
+    request,
+    new Headers(options.headers),
+  );
+  if (
+    options.body !== undefined &&
+    !(options.body instanceof FormData) &&
+    !headers.has("Content-Type")
+  ) {
+    headers.set("Content-Type", "application/json");
+  }
+
+  return fetch(`${BACKEND_URL}${endpoint}`, {
+    ...options,
+    headers,
+    credentials: "include",
+  });
+}
+
+export async function safeParseJson(
+  response: Response,
+): Promise<Record<string, unknown> | unknown[] | null> {
+  const text = response.status === 204 ? "" : await response.text();
+  if (!text) return null;
+  try {
+    return JSON.parse(text) as Record<string, unknown> | unknown[];
+  } catch {
+    return null;
+  }
+}
+
+export async function toDownloadResponse(
+  response: Response,
+): Promise<NextResponse | null> {
+  const contentType = response.headers.get("content-type") || "";
+  if (!isDownloadContentType(contentType)) {
+    return null;
+  }
+
+  const blob = await response.blob();
+  const headers = new Headers();
+  headers.set("Content-Type", contentType);
+
+  const disposition = response.headers.get("content-disposition");
+  if (disposition) {
+    headers.set("Content-Disposition", disposition);
+  }
+
+  return new NextResponse(blob, { status: response.status, headers });
+}
diff --git a/app/api/auth/logout/route.ts b/app/api/auth/logout/route.ts
index 5111c38..8461a4f 100644
--- a/app/api/auth/logout/route.ts
+++ b/app/api/auth/logout/route.ts
@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
 import { apiClient } from "@/app/lib/apiClient";
-import { clearRoleCookie } from "@/app/lib/authCookie";
+import { clearFeaturesCookie, clearRoleCookie } from "@/app/lib/authCookie";
 
 export async function POST(request: NextRequest) {
   const { status, data, headers } = await apiClient(
@@ -17,6 +17,7 @@ export async function POST(request: NextRequest) {
   }
 
   clearRoleCookie(res);
+  clearFeaturesCookie(res);
 
   return res;
 }
diff --git a/app/api/configs/[config_id]/versions/route.ts b/app/api/configs/[config_id]/versions/route.ts
index 9ac697d..44e1247 100644
--- a/app/api/configs/[config_id]/versions/route.ts
+++ b/app/api/configs/[config_id]/versions/route.ts
@@ -8,10 +8,11 @@ export async function GET(
   const { config_id } = await params;
 
   try {
-    const { status, data } = await apiClient(
-      request,
-      `/api/v1/configs/${config_id}/versions`,
-    );
+    const { searchParams } = new URL(request.url);
+    const queryString = searchParams.toString();
+    const endpoint = `/api/v1/configs/${config_id}/versions${queryString ? `?${queryString}` : ""}`;
+    const { status, data } = await apiClient(request, endpoint);
+
     return NextResponse.json(data, { status });
   } catch (_error) {
     return NextResponse.json(
@@ -29,7 +30,6 @@ export async function POST(
 
   try {
     const body = await request.json();
-
     const { status, data } = await apiClient(
       request,
       `/api/v1/configs/${config_id}/versions`,
diff --git a/app/api/configs/route.ts b/app/api/configs/route.ts
index d0f6016..f4dd6b8 100644
--- a/app/api/configs/route.ts
+++ b/app/api/configs/route.ts
@@ -7,6 +7,7 @@ export async function GET(request: Request) {
     const queryString = searchParams.toString();
     const endpoint = `/api/v1/configs/${queryString ? `?${queryString}` : ""}`;
     const { status, data } = await apiClient(request, endpoint);
+
     return NextResponse.json(data, { status });
   } catch (error) {
     return NextResponse.json(
@@ -23,14 +24,15 @@ export async function GET(request: Request) {
 export async function POST(request: Request) {
   try {
     const body = await request.json();
-
     const { status, data } = await apiClient(request, "/api/v1/configs/", {
       method: "POST",
       body: JSON.stringify(body),
     });
+
     return NextResponse.json(data, { status });
   } catch (error) {
     console.error("Proxy error:", error);
+
     return NextResponse.json(
       {
         error: "Failed to forward request",
diff --git a/app/api/users/me/route.ts b/app/api/users/me/route.ts
index 6b9fe0f..32686d7 100644
--- a/app/api/users/me/route.ts
+++ b/app/api/users/me/route.ts
@@ -1,6 +1,9 @@
 import { NextRequest, NextResponse } from "next/server";
 import { apiClient } from "@/app/lib/apiClient";
-import { setRoleCookieFromBody } from "@/app/lib/authCookie";
+import {
+  setFeaturesCookieFromBody,
+  setRoleCookieFromBody,
+} from "@/app/lib/authCookie";
 
 export async function GET(request: NextRequest) {
   try {
@@ -9,6 +12,7 @@ export async function GET(request: NextRequest) {
 
     if (status >= 200 && status < 300) {
       setRoleCookieFromBody(res, data);
+      setFeaturesCookieFromBody(res, data);
     }
 
     return res;
diff --git a/app/assessment/AssessmentPageClient.tsx b/app/assessment/AssessmentPageClient.tsx
new file mode 100644
index 0000000..49c5ecd
--- /dev/null
+++ b/app/assessment/AssessmentPageClient.tsx
@@ -0,0 +1,721 @@
+"use client";
+
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  Suspense,
+  useMemo,
+} from "react";
+import { useRouter } from "next/navigation";
+import { colors } from "@/app/lib/colors";
+import { apiFetch } from "@/app/lib/apiClient";
+import { STORAGE_KEY } from "@/app/lib/constants/keystore";
+import { FeatureFlag } from "@/app/lib/constants/featureFlags";
+import { removeFeatureFromClient } from "@/app/lib/featureState";
+import { APIKey } from "@/app/lib/types/credentials";
+import Sidebar from "@/app/components/Sidebar";
+import Loader from "@/app/components/Loader";
+import { MenuIcon, KeyIcon, DatabaseIcon } from "@/app/components/icons";
+import { useToast } from "@/app/components/Toast";
+import Stepper, { Step } from "./components/Stepper";
+import DatasetStep from "./components/DatasetStep";
+import ColumnMapperStep from "./components/ColumnMapperStep";
+import PromptAndConfigStep from "./components/PromptAndConfigStep";
+import ReviewStep from "./components/ReviewStep";
+import EvaluationsTab from "./components/EvaluationsTab";
+import { useAssessmentEvents } from "./useAssessmentEvents";
+import { ConfigSelection, SchemaProperty, AssessmentFormState } from "./types";
+import { useAssessmentDatasetStore } from "./store";
+import { schemaToJsonSchema } from "./schemaUtils";
+import { handleForbiddenApiError } from "./errorUtils";
+
+type TabId = "datasets" | "config" | "results";
+
+const TABS: { id: TabId; label: string }[] = [
+  { id: "datasets", label: "Datasets" },
+  { id: "config", label: "Config" },
+  { id: "results", label: "Result" },
+];
+
+const CONFIG_STEPS: Step[] = [
+  { id: 1, label: "Mapper" },
+  { id: 2, label: "Prompt & Config" },
+  { id: 3, label: "Review" },
+];
+
+declare global {
+  interface Window {
+    __assessmentForbiddenNavLock?: boolean;
+  }
+}
+
+function ShimmerDot({ color }: { color: string }) {
+  return (
+    <span className="relative ml-1.5 inline-flex h-1.5 w-1.5">
+      <span
+        className="absolute inline-flex h-full w-full rounded-full opacity-60 animate-ping"
+        style={{ backgroundColor: color }}
+      />
+      <span
+        className="relative inline-flex h-1.5 w-1.5 rounded-full"
+        style={{ backgroundColor: color }}
+      />
+    </span>
+  );
+}
+
+type IndicatorState = "none" | "processing" | "failed" | "success";
+type DatasetSummary = { dataset_id: number; dataset_name?: string };
+type EvaluationStatusRun = { status: string; updated_at: string };
+
+function AssessmentContent() {
+  const router = useRouter();
+  const toast = useToast();
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [activeTab, setActiveTab] = useState<TabId>("datasets");
+  const [configStep, setConfigStep] = useState(1);
+  const [completedConfigSteps, setCompletedConfigSteps] = useState<Set<number>>(
+    new Set(),
+  );
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [apiKeys, setApiKeys] = useState<APIKey[]>([]);
+  const [selectedKeyId, setSelectedKeyId] = useState("");
+  const [evalIndicator, setEvalIndicator] = useState<IndicatorState>("none");
+  const dismissedRef = useRef(false);
+  const featureRedirectingRef = useRef(false);
+  const [assessmentRefreshToken, setAssessmentRefreshToken] = useState(0);
+  const [experimentName, setExperimentName] = useState("");
+  const {
+    datasetId,
+    datasetName,
+    columns,
+    sampleRow,
+    columnMapping,
+    setDatasetId,
+    setDatasetName,
+    setDataset,
+    setColumnMapping,
+    clearDataset,
+  } = useAssessmentDatasetStore();
+  const [promptTemplate, setPromptTemplate] = useState("");
+  const [outputSchema, setOutputSchema] = useState<SchemaProperty[]>([]);
+  const [configs, setConfigs] = useState<ConfigSelection[]>([]);
+
+  useEffect(() => {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      try {
+        const keys = JSON.parse(stored);
+        setApiKeys(keys);
+        if (keys.length > 0) setSelectedKeyId(keys[0].id);
+      } catch (e) {
+        console.error("Failed to load API keys:", e);
+      }
+    }
+  }, []);
+
+  const selectedKey = apiKeys.find((k) => k.id === selectedKeyId);
+
+  const handleAssessmentForbidden = useCallback(
+    (options?: { notify?: boolean }) => {
+      if (
+        typeof window !== "undefined" &&
+        window.__assessmentForbiddenNavLock
+      ) {
+        return;
+      }
+      if (featureRedirectingRef.current) {
+        return;
+      }
+
+      if (typeof window !== "undefined") {
+        window.__assessmentForbiddenNavLock = true;
+      }
+      featureRedirectingRef.current = true;
+
+      if (options?.notify) {
+        toast.error(
+          "Assessment feature is disabled for this organization/project.",
+        );
+      }
+      removeFeatureFromClient(FeatureFlag.ASSESSMENT);
+      if (
+        typeof window !== "undefined" &&
+        window.location.pathname !== "/evaluations"
+      ) {
+        router.replace("/");
+      }
+    },
+    [router, toast],
+  );
+
+  const handleAssessmentForbiddenWithNotify = useCallback(() => {
+    handleAssessmentForbidden({ notify: true });
+  }, [handleAssessmentForbidden]);
+
+  // Backfill dataset name when old persisted state has only datasetId.
+  useEffect(() => {
+    if (!selectedKey?.key || !datasetId || datasetName) return;
+
+    let cancelled = false;
+
+    (async () => {
+      try {
+        const data = await apiFetch<
+          { data?: DatasetSummary[] } | DatasetSummary[]
+        >("/api/assessment/datasets", selectedKey.key);
+        if (cancelled) return;
+
+        const datasets: DatasetSummary[] = Array.isArray(data)
+          ? data
+          : data.data || [];
+        const selected = datasets.find(
+          (dataset: { dataset_id: number; dataset_name?: string }) =>
+            dataset.dataset_id.toString() === datasetId,
+        );
+        if (!cancelled && selected?.dataset_name) {
+          setDatasetName(selected.dataset_name);
+        }
+      } catch (error) {
+        if (handleForbiddenApiError(error, handleAssessmentForbiddenWithNotify))
+          return;
+        // ignore non-forbidden backfill failures; review will fallback gracefully
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    datasetId,
+    datasetName,
+    selectedKey?.key,
+    setDatasetName,
+    handleAssessmentForbiddenWithNotify,
+  ]);
+
+  useEffect(() => {
+    if (!selectedKey?.key) return;
+
+    let cancelled = false;
+
+    (async () => {
+      try {
+        if (cancelled) return;
+        await apiFetch("/api/assessment/evaluations?limit=1", selectedKey.key);
+      } catch (error) {
+        if (handleForbiddenApiError(error, handleAssessmentForbiddenWithNotify))
+          return;
+        console.error("Assessment feature check failed:", error);
+        // silently ignore
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [handleAssessmentForbiddenWithNotify, selectedKey?.key]);
+
+  const pollEvalStatus = useCallback(async () => {
+    if (!selectedKey) return;
+    try {
+      const data = await apiFetch<
+        { data?: EvaluationStatusRun[] } | EvaluationStatusRun[]
+      >("/api/assessment/evaluations?limit=10", selectedKey.key);
+      const runs: EvaluationStatusRun[] = Array.isArray(data)
+        ? data
+        : data.data || [];
+
+      const hasProcessing = runs.some(
+        (r: { status: string }) =>
+          r.status === "processing" || r.status === "pending",
+      );
+
+      if (hasProcessing) {
+        setEvalIndicator("processing");
+        dismissedRef.current = false;
+        return;
+      }
+
+      if (dismissedRef.current) {
+        setEvalIndicator("none");
+        return;
+      }
+
+      if (runs.length > 0) {
+        const recent = runs[0];
+        const updatedAt = new Date(recent.updated_at).getTime();
+        const fiveMinAgo = Date.now() - 5 * 60 * 1000;
+
+        if (updatedAt > fiveMinAgo) {
+          if (
+            recent.status === "failed" ||
+            recent.status === "completed_with_errors"
+          ) {
+            setEvalIndicator("failed");
+            return;
+          }
+          if (recent.status === "completed") {
+            setEvalIndicator("success");
+            return;
+          }
+        }
+      }
+
+      setEvalIndicator("none");
+    } catch (error) {
+      if (handleForbiddenApiError(error, handleAssessmentForbiddenWithNotify))
+        return;
+      // silently fail
+    }
+  }, [handleAssessmentForbiddenWithNotify, selectedKey]);
+
+  useEffect(() => {
+    if (!selectedKey) return;
+    pollEvalStatus();
+  }, [pollEvalStatus, selectedKey]);
+
+  useAssessmentEvents(
+    selectedKey?.key || "",
+    () => {
+      setAssessmentRefreshToken((prev) => prev + 1);
+      void pollEvalStatus();
+    },
+    activeTab === "results",
+    handleAssessmentForbiddenWithNotify,
+  );
+
+  const handleTabSwitch = (tab: TabId) => {
+    if (
+      tab === "results" &&
+      (evalIndicator === "failed" || evalIndicator === "success")
+    ) {
+      dismissedRef.current = true;
+      setEvalIndicator("none");
+    }
+    setActiveTab(tab);
+  };
+
+  const hasDraftData =
+    !!datasetId ||
+    columnMapping.textColumns.length > 0 ||
+    columnMapping.attachments.length > 0 ||
+    columnMapping.groundTruthColumns.length > 0 ||
+    !!promptTemplate.trim() ||
+    configs.length > 0 ||
+    outputSchema.length > 0 ||
+    !!experimentName.trim();
+
+  const resetDraftState = () => {
+    dismissedRef.current = false;
+    setEvalIndicator("none");
+    clearDataset();
+    setPromptTemplate("");
+    setOutputSchema([]);
+    setConfigs([]);
+    setExperimentName("");
+    setConfigStep(1);
+    setCompletedConfigSteps(new Set());
+    setActiveTab("datasets");
+  };
+
+  const markConfigCompleted = (step: number) => {
+    setCompletedConfigSteps((prev) => new Set([...prev, step]));
+  };
+
+  const handleConfigNext = (fromStep: number) => {
+    markConfigCompleted(fromStep);
+    setConfigStep(fromStep + 1);
+  };
+
+  const handleColumnsLoaded = useCallback(
+    (cols: string[], firstRow: Record<string, string> = {}) => {
+      const currentId = useAssessmentDatasetStore.getState().datasetId;
+      setDataset(currentId, cols, firstRow);
+      setPromptTemplate("");
+    },
+    [setDataset],
+  );
+
+  const handleSubmit = useCallback(async () => {
+    if (!selectedKey) {
+      toast.error("No API key selected");
+      return;
+    }
+    if (!experimentName.trim()) {
+      toast.error("Experiment name is required");
+      return;
+    }
+
+    setIsSubmitting(true);
+    try {
+      const payload = {
+        experiment_name: experimentName.trim(),
+        dataset_id: parseInt(datasetId, 10),
+        prompt_template: promptTemplate || null,
+        text_columns: columnMapping.textColumns,
+        attachments: columnMapping.attachments.map(
+          ({ column, type, format }) => ({ column, type, format }),
+        ),
+        output_schema: schemaToJsonSchema(outputSchema) || null,
+        configs: configs.map(({ config_id, config_version }) => ({
+          config_id,
+          config_version,
+        })),
+      };
+
+      await apiFetch("/api/assessment/evaluations", selectedKey.key, {
+        method: "POST",
+        body: JSON.stringify(payload),
+      });
+
+      toast.success("Assessment evaluation submitted!");
+      setConfigStep(1);
+      setCompletedConfigSteps(new Set());
+      setExperimentName("");
+      clearDataset();
+      setPromptTemplate("");
+      setOutputSchema([]);
+      setConfigs([]);
+      dismissedRef.current = false;
+      setActiveTab("results");
+      pollEvalStatus();
+    } catch (error) {
+      if (handleForbiddenApiError(error, handleAssessmentForbiddenWithNotify))
+        return;
+      toast.error(
+        `Failed to submit: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [
+    clearDataset,
+    columnMapping,
+    configs,
+    datasetId,
+    experimentName,
+    handleAssessmentForbiddenWithNotify,
+    outputSchema,
+    pollEvalStatus,
+    promptTemplate,
+    selectedKey,
+    toast,
+  ]);
+
+  const formState: AssessmentFormState = {
+    experimentName,
+    datasetId,
+    datasetName,
+    columns,
+    columnMapping,
+    promptTemplate,
+    outputSchema,
+    configs,
+  };
+
+  const hasDataset = !!datasetId && columns.length > 0;
+  const hasMapperSelection = columnMapping.textColumns.length > 0;
+  const hasConfiguredResponseFormat = outputSchema.some((field) =>
+    field.name.trim(),
+  );
+  const canReachReview = configs.length > 0 && hasConfiguredResponseFormat;
+  const effectiveCompletedConfigSteps = useMemo(() => {
+    const merged = new Set(completedConfigSteps);
+    if (hasMapperSelection) merged.add(1);
+    if (canReachReview) merged.add(2);
+    return merged;
+  }, [canReachReview, completedConfigSteps, hasMapperSelection]);
+
+  const indicatorStyles: Record<
+    IndicatorState,
+    { dot: string; underline: string }
+  > = {
+    none: {
+      dot: "transparent",
+      underline: colors.text.primary,
+    },
+    processing: {
+      dot: "#f59e0b",
+      underline: "#f59e0b",
+    },
+    failed: {
+      dot: colors.status.error,
+      underline: colors.status.error,
+    },
+    success: {
+      dot: colors.status.success,
+      underline: colors.status.success,
+    },
+  };
+
+  const indicatorColor: Record<IndicatorState, string> = {
+    none: "transparent",
+    processing: indicatorStyles.processing.dot,
+    failed: indicatorStyles.failed.dot,
+    success: indicatorStyles.success.dot,
+  };
+
+  return (
+    <div
+      className="w-full h-screen flex flex-col"
+      style={{ backgroundColor: colors.bg.secondary }}
+    >
+      <div className="flex flex-1 overflow-hidden">
+        <Sidebar collapsed={sidebarCollapsed} activeRoute="/assessment" />
+
+        <div className="flex-1 flex flex-col overflow-hidden">
+          <div
+            className="border-b px-4 py-3 flex items-center gap-3 flex-shrink-0"
+            style={{
+              backgroundColor: colors.bg.primary,
+              borderColor: colors.border,
+            }}
+          >
+            <button
+              onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
+              aria-label="Toggle sidebar"
+              className="cursor-pointer p-1.5 rounded-md"
+              style={{ color: colors.text.secondary }}
+            >
+              <MenuIcon
+                className="w-5 h-5"
+                style={{ color: colors.text.secondary }}
+              />
+            </button>
+            <div>
+              <h1
+                className="text-base font-semibold"
+                style={{ color: colors.text.primary, letterSpacing: "-0.01em" }}
+              >
+                Assessment
+              </h1>
+              <p className="text-xs" style={{ color: colors.text.secondary }}>
+                Multi-modal batch evaluation with prompt templates, attachments,
+                and config comparison
+              </p>
+            </div>
+          </div>
+
+          {apiKeys.length === 0 ? (
+            <div className="flex-1 flex items-center justify-center">
+              <div className="text-center">
+                <span
+                  className="block mx-auto mb-4"
+                  style={{ color: colors.border }}
+                >
+                  <KeyIcon className="h-12 w-12" />
+                </span>
+                <p
+                  className="text-sm font-medium mb-1"
+                  style={{ color: colors.text.primary }}
+                >
+                  API key required
+                </p>
+                <p
+                  className="text-xs mb-4"
+                  style={{ color: colors.text.secondary }}
+                >
+                  Add an API key in the Keystore first
+                </p>
+                <a
+                  href="/keystore"
+                  className="inline-block px-4 py-2 rounded-md text-sm font-medium"
+                  style={{
+                    backgroundColor: colors.accent.primary,
+                    color: "#ffffff",
+                  }}
+                >
+                  Go to Keystore
+                </a>
+              </div>
+            </div>
+          ) : (
+            <>
+              <div
+                className="flex-shrink-0 border-b flex items-center justify-between pr-4"
+                style={{
+                  backgroundColor: colors.bg.primary,
+                  borderColor: colors.border,
+                }}
+              >
+                <div className="flex">
+                  {TABS.map((tab) => {
+                    const isActive = activeTab === tab.id;
+                    const showIndicator =
+                      tab.id === "results" && evalIndicator !== "none";
+                    const tabColor = isActive
+                      ? colors.text.primary
+                      : colors.text.secondary;
+
+                    return (
+                      <button
+                        key={tab.id}
+                        onClick={() => handleTabSwitch(tab.id)}
+                        className="cursor-pointer relative px-5 py-3 text-sm font-medium transition-colors flex items-center"
+                        style={{ color: tabColor }}
+                      >
+                        {tab.label}
+                        {showIndicator && (
+                          <ShimmerDot color={indicatorColor[evalIndicator]} />
+                        )}
+                        {isActive && (
+                          <div
+                            className="absolute bottom-0 left-0 right-0 h-0.5"
+                            style={{
+                              backgroundColor: showIndicator
+                                ? indicatorStyles[evalIndicator].underline
+                                : colors.text.primary,
+                            }}
+                          />
+                        )}
+                      </button>
+                    );
+                  })}
+                </div>
+                <button
+                  onClick={resetDraftState}
+                  disabled={!hasDraftData}
+                  className="cursor-pointer rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors"
+                  style={{
+                    borderColor: colors.border,
+                    backgroundColor: hasDraftData
+                      ? colors.bg.primary
+                      : colors.bg.secondary,
+                    color: hasDraftData
+                      ? colors.text.primary
+                      : colors.text.secondary,
+                    cursor: hasDraftData ? "pointer" : "not-allowed",
+                  }}
+                >
+                  Start New
+                </button>
+              </div>
+
+              {activeTab === "datasets" && (
+                <div className="flex-1 overflow-hidden flex flex-col">
+                  <DatasetStep
+                    apiKey={selectedKey?.key || ""}
+                    onForbidden={handleAssessmentForbiddenWithNotify}
+                    datasetId={datasetId}
+                    setDatasetId={setDatasetId}
+                    setSelectedDatasetName={setDatasetName}
+                    onColumnsLoaded={handleColumnsLoaded}
+                    onNext={() => {
+                      setActiveTab("config");
+                      setConfigStep(1);
+                    }}
+                  />
+                </div>
+              )}
+
+              <div
+                className={`flex-1 overflow-hidden flex flex-col ${
+                  activeTab === "config" ? "" : "hidden"
+                }`}
+              >
+                {!hasDataset ? (
+                  <div className="flex-1 flex items-center justify-center">
+                    <div className="text-center">
+                      <DatabaseIcon
+                        className="mx-auto h-12 w-12 mb-4"
+                        style={{ color: colors.border }}
+                      />
+                      <p
+                        className="text-sm font-medium mb-1"
+                        style={{ color: colors.text.primary }}
+                      >
+                        No dataset selected
+                      </p>
+                      <p
+                        className="text-xs mb-4"
+                        style={{ color: colors.text.secondary }}
+                      >
+                        Select a dataset first from the Datasets tab
+                      </p>
+                      <button
+                        onClick={() => setActiveTab("datasets")}
+                        className="cursor-pointer px-4 py-2 rounded-md text-sm font-medium"
+                        style={{
+                          backgroundColor: colors.accent.primary,
+                          color: "#ffffff",
+                        }}
+                      >
+                        Go to Datasets
+                      </button>
+                    </div>
+                  </div>
+                ) : (
+                  <>
+                    <Stepper
+                      steps={CONFIG_STEPS}
+                      currentStep={configStep}
+                      onStepClick={setConfigStep}
+                      completedSteps={effectiveCompletedConfigSteps}
+                    />
+                    <div className="flex-1 overflow-auto px-6 pt-6">
+                      <div className={configStep === 1 ? "block" : "hidden"}>
+                        <ColumnMapperStep
+                          columns={columns}
+                          columnMapping={columnMapping}
+                          setColumnMapping={setColumnMapping}
+                          onNext={() => handleConfigNext(1)}
+                          onBack={() => setActiveTab("datasets")}
+                        />
+                      </div>
+                      <div className={configStep === 2 ? "block" : "hidden"}>
+                        <PromptAndConfigStep
+                          textColumns={columnMapping.textColumns}
+                          sampleRow={sampleRow}
+                          promptTemplate={promptTemplate}
+                          setPromptTemplate={setPromptTemplate}
+                          configs={configs}
+                          setConfigs={setConfigs}
+                          outputSchema={outputSchema}
+                          setOutputSchema={setOutputSchema}
+                          onNext={() => handleConfigNext(2)}
+                          onBack={() => setConfigStep(1)}
+                        />
+                      </div>
+                      <div className={configStep === 3 ? "block" : "hidden"}>
+                        <ReviewStep
+                          formState={formState}
+                          experimentName={experimentName}
+                          setExperimentName={setExperimentName}
+                          isSubmitting={isSubmitting}
+                          onSubmit={handleSubmit}
+                          onBack={() => setConfigStep(2)}
+                          onEditStep={setConfigStep}
+                        />
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+
+              {activeTab === "results" && (
+                <div className="flex-1 overflow-hidden flex flex-col">
+                  <EvaluationsTab
+                    apiKey={selectedKey?.key || ""}
+                    refreshToken={assessmentRefreshToken}
+                    onForbidden={handleAssessmentForbiddenWithNotify}
+                  />
+                </div>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function AssessmentPageClient() {
+  return (
+    <Suspense fallback={<Loader size="lg" message="Loading..." fullScreen />}>
+      <AssessmentContent />
+    </Suspense>
+  );
+}
diff --git a/app/assessment/components/ColumnMapperStep.tsx b/app/assessment/components/ColumnMapperStep.tsx
new file mode 100644
index 0000000..87a8334
--- /dev/null
+++ b/app/assessment/components/ColumnMapperStep.tsx
@@ -0,0 +1,445 @@
+"use client";
+
+import { useState } from "react";
+import { colors } from "@/app/lib/colors";
+import { Attachment, ColumnMapping, ATTACHMENT_FORMATS } from "../types";
+
+interface ColumnMapperStepProps {
+  columns: string[];
+  columnMapping: ColumnMapping;
+  setColumnMapping: (mapping: ColumnMapping) => void;
+  onNext: () => void;
+  onBack: () => void;
+}
+
+type ColumnRole = "unmapped" | "text" | "attachment" | "ground_truth";
+
+interface ColumnConfig {
+  role: ColumnRole;
+  attachmentType?: "image" | "pdf";
+  attachmentFormat?: string;
+}
+
+interface RoleOption {
+  value: ColumnRole;
+  label: string;
+  accent: string;
+  activeBg: string;
+  activeBorder: string;
+  activeText: string;
+}
+
+const ROLE_OPTIONS: RoleOption[] = [
+  {
+    value: "text",
+    label: "Text",
+    accent: "#166534",
+    activeBg: "rgba(22, 101, 52, 0.08)",
+    activeBorder: "rgba(22, 101, 52, 0.2)",
+    activeText: "#166534",
+  },
+  {
+    value: "attachment",
+    label: "Attachment",
+    accent: "#7c2d12",
+    activeBg: "rgba(124, 45, 18, 0.08)",
+    activeBorder: "rgba(124, 45, 18, 0.24)",
+    activeText: "#7c2d12",
+  },
+  {
+    value: "ground_truth",
+    label: "Ground Truth",
+    accent: "#1d4ed8",
+    activeBg: "rgba(29, 78, 216, 0.08)",
+    activeBorder: "rgba(29, 78, 216, 0.24)",
+    activeText: "#1d4ed8",
+  },
+  {
+    value: "unmapped",
+    label: "Skip",
+    accent: colors.text.secondary,
+    activeBg: colors.bg.secondary,
+    activeBorder: colors.border,
+    activeText: colors.text.primary,
+  },
+];
+
+export default function ColumnMapperStep({
+  columns,
+  columnMapping,
+  setColumnMapping,
+  onNext,
+  onBack,
+}: ColumnMapperStepProps) {
+  const [columnConfigs, setColumnConfigs] = useState<
+    Record<string, ColumnConfig>
+  >(() => {
+    const configs: Record<string, ColumnConfig> = {};
+
+    columns.forEach((column) => {
+      if (columnMapping.textColumns.includes(column)) {
+        configs[column] = { role: "text" };
+        return;
+      }
+
+      if (columnMapping.groundTruthColumns.includes(column)) {
+        configs[column] = { role: "ground_truth" };
+        return;
+      }
+
+      const attachment = columnMapping.attachments.find(
+        (item) => item.column === column,
+      );
+      configs[column] = attachment
+        ? {
+            role: "attachment",
+            attachmentType: attachment.type,
+            attachmentFormat: attachment.format,
+          }
+        : { role: "unmapped" };
+    });
+
+    return configs;
+  });
+
+  const updateRole = (column: string, role: ColumnRole) => {
+    setColumnConfigs((prev) => {
+      const current = prev[column];
+
+      if (role !== "attachment") {
+        return {
+          ...prev,
+          [column]: { role },
+        };
+      }
+
+      return {
+        ...prev,
+        [column]: {
+          role,
+          attachmentType: current?.attachmentType || "image",
+          attachmentFormat: current?.attachmentFormat || "url",
+        },
+      };
+    });
+  };
+
+  const updateAttachmentType = (column: string, type: "image" | "pdf") => {
+    setColumnConfigs((prev) => ({
+      ...prev,
+      [column]: {
+        ...prev[column],
+        attachmentType: type,
+        attachmentFormat: "url",
+      },
+    }));
+  };
+
+  const updateAttachmentFormat = (column: string, format: string) => {
+    setColumnConfigs((prev) => ({
+      ...prev,
+      [column]: {
+        ...prev[column],
+        attachmentFormat: format,
+      },
+    }));
+  };
+
+  const handleNext = () => {
+    const textColumns: string[] = [];
+    const attachments: Attachment[] = [];
+    const groundTruthColumns: string[] = [];
+
+    Object.entries(columnConfigs).forEach(([column, config]) => {
+      if (config.role === "text") {
+        textColumns.push(column);
+      } else if (config.role === "ground_truth") {
+        groundTruthColumns.push(column);
+      } else if (
+        config.role === "attachment" &&
+        config.attachmentType &&
+        config.attachmentFormat
+      ) {
+        attachments.push({
+          column,
+          type: config.attachmentType,
+          format: config.attachmentFormat as Attachment["format"],
+        });
+      }
+    });
+
+    setColumnMapping({ textColumns, attachments, groundTruthColumns });
+    onNext();
+  };
+
+  const mappedCount = Object.values(columnConfigs).filter(
+    (config) => config.role !== "unmapped",
+  ).length;
+  const hasText = Object.values(columnConfigs).some(
+    (config) => config.role === "text",
+  );
+
+  return (
+    <div className="mx-auto flex min-h-full max-w-3xl flex-col">
+      <div className="flex-1 space-y-5 pb-16">
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <h2
+              className="text-lg font-semibold"
+              style={{ color: colors.text.primary }}
+            >
+              Map Columns
+            </h2>
+            <p
+              className="mt-1 text-sm"
+              style={{ color: colors.text.secondary }}
+            >
+              Choose a role for each column.
+            </p>
+          </div>
+          <div
+            className="rounded-full px-3 py-1 text-xs font-medium"
+            style={{
+              backgroundColor: colors.bg.secondary,
+              color: colors.text.secondary,
+            }}
+          >
+            {mappedCount}/{columns.length} mapped
+          </div>
+        </div>
+
+        {columns.length === 0 ? (
+          <div
+            className="rounded-2xl border px-6 py-10 text-center"
+            style={{
+              borderColor: colors.border,
+              backgroundColor: colors.bg.primary,
+            }}
+          >
+            <p
+              className="text-sm font-medium"
+              style={{ color: colors.text.primary }}
+            >
+              No columns found.
+            </p>
+            <p
+              className="mt-1 text-sm"
+              style={{ color: colors.text.secondary }}
+            >
+              Go back and select a dataset first.
+            </p>
+          </div>
+        ) : (
+          <div
+            className="overflow-hidden rounded-2xl border"
+            style={{
+              borderColor: colors.border,
+              backgroundColor: colors.bg.primary,
+            }}
+          >
+            {columns.map((column, index) => {
+              const config = columnConfigs[column] || {
+                role: "unmapped" as ColumnRole,
+              };
+              const activeOption =
+                ROLE_OPTIONS.find((option) => option.value === config.role) ||
+                ROLE_OPTIONS[3];
+
+              return (
+                <div
+                  key={column}
+                  className="px-4 py-4 sm:px-5"
+                  style={{
+                    borderTop:
+                      index === 0 ? "none" : `1px solid ${colors.border}`,
+                    backgroundColor: colors.bg.primary,
+                  }}
+                >
+                  <div
+                    className="flex flex-col gap-3 rounded-xl border px-3 py-3"
+                    style={{
+                      borderColor:
+                        config.role === "unmapped"
+                          ? colors.border
+                          : activeOption.activeBorder,
+                      backgroundColor:
+                        config.role === "unmapped"
+                          ? colors.bg.primary
+                          : activeOption.activeBg,
+                    }}
+                  >
+                    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                      <div className="min-w-0">
+                        <div className="flex items-center gap-2">
+                          <span
+                            className="h-2.5 w-2.5 rounded-full"
+                            style={{
+                              backgroundColor:
+                                config.role === "unmapped"
+                                  ? colors.border
+                                  : activeOption.accent,
+                            }}
+                          />
+                          <span
+                            className="font-mono text-sm font-semibold"
+                            style={{ color: colors.text.primary }}
+                          >
+                            {column}
+                          </span>
+                        </div>
+                      </div>
+
+                      <div className="flex flex-wrap gap-2">
+                        {ROLE_OPTIONS.map((option) => {
+                          const isActive = config.role === option.value;
+                          return (
+                            <button
+                              key={option.value}
+                              type="button"
+                              onClick={() => updateRole(column, option.value)}
+                              className="cursor-pointer rounded-full border px-4 py-2 text-sm font-medium transition-colors"
+                              style={{
+                                backgroundColor: isActive
+                                  ? option.activeBg
+                                  : colors.bg.primary,
+                                borderColor: isActive
+                                  ? option.activeBorder
+                                  : colors.border,
+                                color: isActive
+                                  ? option.activeText
+                                  : colors.text.secondary,
+                                boxShadow: isActive
+                                  ? `inset 0 0 0 1px ${option.accent}`
+                                  : "none",
+                              }}
+                            >
+                              {option.label}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </div>
+
+                    {config.role === "attachment" && (
+                      <div className="flex flex-col gap-3 pt-1 sm:flex-row">
+                        <label className="flex-1">
+                          <span
+                            className="mb-1 block text-xs font-medium"
+                            style={{ color: colors.text.secondary }}
+                          >
+                            Attachment Type
+                          </span>
+                          <select
+                            value={config.attachmentType || "image"}
+                            onChange={(event) =>
+                              updateAttachmentType(
+                                column,
+                                event.target.value as "image" | "pdf",
+                              )
+                            }
+                            className="cursor-pointer w-full rounded-lg border px-3 py-2 text-sm outline-none"
+                            style={{
+                              borderColor: colors.border,
+                              backgroundColor: colors.bg.primary,
+                              color: colors.text.primary,
+                            }}
+                          >
+                            <option value="image">Image</option>
+                            <option value="pdf">PDF</option>
+                          </select>
+                        </label>
+
+                        <label className="flex-1">
+                          <span
+                            className="mb-1 block text-xs font-medium"
+                            style={{ color: colors.text.secondary }}
+                          >
+                            Source
+                          </span>
+                          <select
+                            value={config.attachmentFormat || "url"}
+                            onChange={(event) =>
+                              updateAttachmentFormat(column, event.target.value)
+                            }
+                            className="cursor-pointer w-full rounded-lg border px-3 py-2 text-sm outline-none"
+                            style={{
+                              borderColor: colors.border,
+                              backgroundColor: colors.bg.primary,
+                              color: colors.text.primary,
+                            }}
+                          >
+                            {ATTACHMENT_FORMATS[
+                              config.attachmentType || "image"
+                            ].map((format) => (
+                              <option key={format} value={format}>
+                                {format}
+                              </option>
+                            ))}
+                          </select>
+                        </label>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      <div
+        className="sticky bottom-0 z-10 flex flex-col gap-3 border-t py-3 sm:flex-row sm:items-center sm:justify-between"
+        style={{
+          backgroundColor: colors.bg.secondary,
+          borderColor: colors.border,
+          marginLeft: "-1.5rem",
+          marginRight: "-1.5rem",
+          paddingLeft: "1.5rem",
+          paddingRight: "1.5rem",
+        }}
+      >
+        <button
+          type="button"
+          onClick={onBack}
+          className="rounded-lg border px-5 py-2.5 text-sm font-medium"
+          style={{
+            borderColor: colors.border,
+            backgroundColor: colors.bg.primary,
+            color: colors.text.primary,
+          }}
+        >
+          Back
+        </button>
+
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+          <span
+            className="text-xs"
+            style={{
+              color: hasText ? colors.text.secondary : colors.status.warning,
+            }}
+          >
+            {hasText
+              ? "Ready to continue."
+              : "Select at least one Text column."}
+          </span>
+          <button
+            type="button"
+            onClick={handleNext}
+            disabled={!hasText}
+            className="rounded-lg px-5 py-2.5 text-sm font-medium"
+            style={{
+              backgroundColor: hasText
+                ? colors.accent.primary
+                : colors.bg.secondary,
+              color: hasText ? colors.text.white : colors.text.secondary,
+              border: `1px solid ${hasText ? colors.accent.primary : colors.border}`,
+              cursor: hasText ? "pointer" : "not-allowed",
+            }}
+          >
+            Next: Prompt Editor
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/assessment/components/DataViewModal.tsx b/app/assessment/components/DataViewModal.tsx
new file mode 100644
index 0000000..5ccce9d
--- /dev/null
+++ b/app/assessment/components/DataViewModal.tsx
@@ -0,0 +1,194 @@
+"use client";
+
+import { colors } from "@/app/lib/colors";
+import CloseIcon from "@/app/components/icons/document/CloseIcon";
+
+export interface DataViewModalProps {
+  title: string;
+  subtitle?: string;
+  headers: string[];
+  rows: string[][];
+  onClose: () => void;
+}
+
+/**
+ * Reusable modal for viewing tabular data (dataset preview, result preview).
+ */
+export default function DataViewModal({
+  title,
+  subtitle,
+  headers,
+  rows,
+  onClose,
+}: DataViewModalProps) {
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center"
+      style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
+      onClick={onClose}
+    >
+      <div
+        className="rounded-lg shadow-xl flex flex-col"
+        style={{
+          backgroundColor: colors.bg.primary,
+          width: "85vw",
+          maxWidth: "1100px",
+          maxHeight: "80vh",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div
+          className="flex items-center justify-between px-6 py-4 border-b flex-shrink-0"
+          style={{ borderColor: colors.border }}
+        >
+          <div>
+            <h3
+              className="text-sm font-semibold"
+              style={{ color: colors.text.primary }}
+            >
+              {title}
+            </h3>
+            <p
+              className="text-xs mt-0.5"
+              style={{ color: colors.text.secondary }}
+            >
+              {subtitle ?? `${rows.length} rows · ${headers.length} columns`}
+            </p>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded"
+            style={{ color: colors.text.secondary }}
+          >
+            <CloseIcon className="w-5 h-5" />
+          </button>
+        </div>
+        <div className="flex-1 overflow-auto">
+          <table className="w-full text-sm">
+            <thead>
+              <tr
+                style={{
+                  backgroundColor: colors.bg.secondary,
+                  borderBottom: `1px solid ${colors.border}`,
+                }}
+              >
+                <th
+                  className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0"
+                  style={{
+                    color: colors.text.secondary,
+                    backgroundColor: colors.bg.secondary,
+                    width: "40px",
+                  }}
+                ></th>
+                {headers.map((header, i) => (
+                  <th
+                    key={i}
+                    className="px-4 py-2.5 text-left text-xs font-semibold uppercase tracking-wide sticky top-0"
+                    style={{
+                      color: colors.text.secondary,
+                      backgroundColor: colors.bg.secondary,
+                    }}
+                  >
+                    {header}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row, rowIdx) => (
+                <tr
+                  key={rowIdx}
+                  style={{ borderBottom: `1px solid ${colors.border}` }}
+                >
+                  <td
+                    className="px-4 py-2.5 text-xs"
+                    style={{ color: colors.text.secondary }}
+                  >
+                    {rowIdx + 1}
+                  </td>
+                  {row.map((cell, cellIdx) => (
+                    <td
+                      key={cellIdx}
+                      className="px-4 py-2.5"
+                      style={{ color: colors.text.primary }}
+                    >
+                      <div
+                        className="text-sm"
+                        style={{
+                          maxHeight: "120px",
+                          overflow: "auto",
+                          lineHeight: "1.5",
+                        }}
+                      >
+                        {cell || (
+                          <span style={{ color: colors.text.secondary }}>
+                            —
+                          </span>
+                        )}
+                      </div>
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Convert JSON result rows (array of objects) into headers + rows for DataViewModal.
+ * Filters out metadata-heavy fields and drops columns where every value is empty.
+ */
+export function jsonResultsToTableData(
+  results: Record<string, unknown>[],
+  opts?: { skipFields?: Set<string> },
+): { headers: string[]; rows: string[][] } {
+  if (results.length === 0) return { headers: [], rows: [] };
+
+  const skipFields =
+    opts?.skipFields ??
+    new Set([
+      "assessment_id",
+      "dataset_id",
+      "dataset_name",
+      "run_id",
+      "run_name",
+      "run_status",
+      "config_id",
+      "config_version",
+      "response_id",
+      "input_tokens",
+      "output_tokens",
+      "total_tokens",
+      "updated_at",
+      "result_status",
+      "error",
+      "row_id",
+      "experiment_name",
+    ]);
+
+  const allKeys = Array.from(new Set(results.flatMap((r) => Object.keys(r))));
+  const displayKeys = allKeys.filter((k) => !skipFields.has(k));
+
+  // Drop columns where every row is null / empty
+  const nonEmptyKeys = displayKeys.filter((key) =>
+    results.some((r) => {
+      const v = r[key];
+      return v != null && String(v).trim() !== "";
+    }),
+  );
+
+  const rows = results.map((r) =>
+    nonEmptyKeys.map((key) => {
+      const v = r[key];
+      if (v == null) return "";
+      if (typeof v === "object") return JSON.stringify(v);
+      return String(v);
+    }),
+  );
+
+  return { headers: nonEmptyKeys, rows };
+}
diff --git a/app/assessment/components/DatasetStep.tsx b/app/assessment/components/DatasetStep.tsx
new file mode 100644
index 0000000..ee90b18
--- /dev/null
+++ b/app/assessment/components/DatasetStep.tsx
@@ -0,0 +1,844 @@
+"use client";
+
+import { useState, useCallback, useEffect, useRef } from "react";
+import * as XLSX from "xlsx";
+import { apiFetch } from "@/app/lib/apiClient";
+import { colors } from "@/app/lib/colors";
+import { Dataset } from "@/app/lib/types/datasets";
+import { useToast } from "@/app/components/Toast";
+import {
+  CloseIcon,
+  CloudUploadIcon,
+  DatabaseIcon,
+  WarningIcon,
+} from "@/app/components/icons";
+import EvalDatasetDescription from "@/app/components/evaluations/EvalDatasetDescription";
+import DataViewModal from "./DataViewModal";
+import { handleForbiddenApiError } from "../errorUtils";
+
+interface DatasetStepProps {
+  apiKey: string;
+  onForbidden?: () => void;
+  datasetId: string;
+  setDatasetId: (id: string) => void;
+  setSelectedDatasetName: (name: string) => void;
+  onColumnsLoaded: (
+    columns: string[],
+    sampleRow?: Record<string, string>,
+  ) => void;
+  onNext: () => void;
+}
+
+type DatasetResponse = Dataset[] | { data?: Dataset[] };
+type CreateDatasetResponse =
+  | { dataset_id?: number; dataset_name?: string }
+  | { data?: { dataset_id?: number; dataset_name?: string } };
+type DatasetFileResponse = { file_content?: string };
+
+const LEFT_PANEL_CLASSES = "w-[40%] min-w-[360px] max-w-[500px]";
+
+export default function DatasetStep({
+  apiKey,
+  onForbidden,
+  datasetId,
+  setDatasetId,
+  setSelectedDatasetName,
+  onColumnsLoaded,
+  onNext,
+}: DatasetStepProps) {
+  const toast = useToast();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  // Dataset list
+  const [datasets, setDatasets] = useState<Dataset[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingColumns, setIsLoadingColumns] = useState(false);
+
+  // Create dataset form
+  const [datasetName, setDatasetName] = useState("");
+  const [datasetDescription, setDatasetDescription] = useState("");
+  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+
+  // View dataset modal
+  const [viewingId, setViewingId] = useState<number | null>(null);
+  const [viewModalData, setViewModalData] = useState<{
+    name: string;
+    headers: string[];
+    rows: string[][];
+  } | null>(null);
+
+  // Delete confirmation
+  const [confirmDeleteId, setConfirmDeleteId] = useState<number | null>(null);
+  const [deletingId, setDeletingId] = useState<number | null>(null);
+
+  // Fetch file via proxy (server-side S3 download) and parse with XLSX
+  const fetchAndParseFile = async (
+    id: string | number,
+  ): Promise<{ headers: string[]; rows: string[][] } | null> => {
+    const json = await apiFetch<DatasetFileResponse>(
+      `/api/assessment/datasets/${id}?fetch_content=true`,
+      apiKey,
+    );
+    const base64 = json?.file_content;
+    if (!base64) return null;
+
+    // Decode base64 to binary and parse with XLSX
+    const binary = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
+    const workbook = XLSX.read(binary, { type: "array" });
+    const sheet = workbook.Sheets[workbook.SheetNames[0]];
+    if (!sheet) return null;
+
+    const rawData: string[][] = XLSX.utils.sheet_to_json(sheet, {
+      header: 1,
+      defval: "",
+    });
+    if (rawData.length === 0) return null;
+
+    const headers = rawData[0].map(String);
+    const rows = rawData
+      .slice(1)
+      .filter((row) => row.some((cell) => String(cell).trim() !== ""));
+
+    return { headers, rows: rows.map((row) => row.map(String)) };
+  };
+
+  // Fetch datasets
+  const loadDatasets = useCallback(async () => {
+    if (!apiKey) return;
+    setIsLoading(true);
+    try {
+      const data = await apiFetch<DatasetResponse>(
+        "/api/assessment/datasets",
+        apiKey,
+      );
+      setDatasets(Array.isArray(data) ? data : data.data || []);
+    } catch (e) {
+      if (handleForbiddenApiError(e, onForbidden)) return;
+      console.error("Failed to load datasets:", e);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [apiKey, onForbidden]);
+
+  useEffect(() => {
+    loadDatasets();
+  }, [loadDatasets]);
+
+  // Hydrate selected dataset name from the loaded dataset list.
+  useEffect(() => {
+    if (!datasetId || datasets.length === 0) return;
+    const selected = datasets.find(
+      (dataset) => dataset.dataset_id.toString() === datasetId,
+    );
+    if (selected?.dataset_name) {
+      setSelectedDatasetName(selected.dataset_name);
+    }
+  }, [datasetId, datasets, setSelectedDatasetName]);
+
+  // File selection handler
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    const allowedExts = [".csv", ".xlsx", ".xls"];
+    const hasValidExt = allowedExts.some((ext) =>
+      file.name.toLowerCase().endsWith(ext),
+    );
+    if (!hasValidExt) {
+      toast.error("Please select a CSV or Excel (.xlsx, .xls) file");
+      event.target.value = "";
+      return;
+    }
+    setUploadedFile(file);
+    if (!datasetName) {
+      setDatasetName(file.name.replace(/\.(csv|xlsx|xls)$/i, ""));
+    }
+  };
+
+  // Create dataset
+  const handleCreateDataset = async () => {
+    if (!uploadedFile || !datasetName.trim() || !apiKey) return;
+
+    setIsUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append("file", uploadedFile);
+      formData.append("dataset_name", datasetName.trim());
+      if (datasetDescription.trim()) {
+        formData.append("description", datasetDescription.trim());
+      }
+
+      const data = await apiFetch<CreateDatasetResponse>(
+        "/api/assessment/datasets",
+        apiKey,
+        {
+          method: "POST",
+          body: formData,
+        },
+      );
+      await loadDatasets();
+
+      // Auto-select the created dataset
+      const created =
+        (data as { data?: { dataset_id?: number; dataset_name?: string } })
+          .data ?? (data as { dataset_id?: number; dataset_name?: string });
+      if (created?.dataset_id) {
+        void handleDatasetSelect(
+          created.dataset_id.toString(),
+          created.dataset_name ?? datasetName.trim(),
+        );
+      }
+
+      // Reset form
+      setUploadedFile(null);
+      setDatasetName("");
+      setDatasetDescription("");
+      if (fileInputRef.current) fileInputRef.current.value = "";
+
+      toast.success("Dataset created successfully!");
+    } catch (error) {
+      if (handleForbiddenApiError(error, onForbidden)) return;
+      toast.error(
+        `Failed to create dataset: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  // Select dataset and fetch columns
+  const handleDatasetSelect = async (id: string, name?: string) => {
+    setDatasetId(id);
+    if (!id) {
+      setSelectedDatasetName("");
+      return;
+    }
+    const resolvedName =
+      name ??
+      datasets.find((dataset) => dataset.dataset_id.toString() === id)
+        ?.dataset_name ??
+      "";
+    setSelectedDatasetName(resolvedName);
+
+    setIsLoadingColumns(true);
+    try {
+      const parsed = await fetchAndParseFile(id);
+      if (parsed?.headers) {
+        const firstRow = parsed.rows[0] || [];
+        const sampleRow = Object.fromEntries(
+          parsed.headers.map((header, index) => [
+            header,
+            String(firstRow[index] ?? ""),
+          ]),
+        );
+        onColumnsLoaded(parsed.headers, sampleRow);
+      }
+    } catch (e) {
+      if (handleForbiddenApiError(e, onForbidden)) return;
+      console.error("Failed to fetch dataset columns:", e);
+    } finally {
+      setIsLoadingColumns(false);
+    }
+  };
+
+  // View dataset
+  const handleViewDataset = async (datasetId: number, name: string) => {
+    setViewingId(datasetId);
+    try {
+      const parsed = await fetchAndParseFile(datasetId);
+      if (!parsed || !parsed.headers) {
+        toast.error("No data available");
+        return;
+      }
+
+      setViewModalData({
+        name,
+        headers: parsed.headers,
+        rows: parsed.rows,
+      });
+    } catch (err) {
+      if (handleForbiddenApiError(err, onForbidden)) return;
+      toast.error(
+        err instanceof Error ? err.message : "Failed to view dataset",
+      );
+    } finally {
+      setViewingId(null);
+    }
+  };
+
+  // Delete dataset
+  const handleDeleteDataset = async (id: number) => {
+    setDeletingId(id);
+    try {
+      await apiFetch(`/api/assessment/datasets/${id}`, apiKey, {
+        method: "DELETE",
+      });
+      toast.success("Dataset deleted");
+      if (datasetId === id.toString()) {
+        setDatasetId("");
+        setSelectedDatasetName("");
+      }
+      void loadDatasets();
+    } catch (err) {
+      if (handleForbiddenApiError(err, onForbidden)) return;
+      toast.error(
+        err instanceof Error ? err.message : "Failed to delete dataset",
+      );
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
+  // Drag and drop
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    setIsDragging(false);
+    const file = e.dataTransfer.files?.[0];
+    const allowedExts = [".csv", ".xlsx", ".xls"];
+    if (
+      file &&
+      allowedExts.some((ext) => file.name.toLowerCase().endsWith(ext))
+    ) {
+      const dt = new DataTransfer();
+      dt.items.add(file);
+      if (fileInputRef.current) {
+        fileInputRef.current.files = dt.files;
+        fileInputRef.current.dispatchEvent(
+          new Event("change", { bubbles: true }),
+        );
+      }
+    }
+  };
+
+  const resetForm = () => {
+    setDatasetName("");
+    setDatasetDescription("");
+    setUploadedFile(null);
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  };
+
+  const canProceed = datasetId && !isLoadingColumns;
+
+  return (
+    <div className="flex-1 flex overflow-hidden">
+      {/* Left Panel - Create Dataset + Experiment Name */}
+      <div
+        className={`${LEFT_PANEL_CLASSES} flex-shrink-0 border-r flex flex-col overflow-hidden`}
+        style={{
+          backgroundColor: colors.bg.primary,
+          borderColor: colors.border,
+        }}
+      >
+        <div className="flex-1 overflow-auto p-4 space-y-4">
+          {/* Page Title */}
+          <div>
+            <h2
+              className="text-base font-semibold"
+              style={{ color: colors.text.primary }}
+            >
+              Create New Dataset
+            </h2>
+            <p
+              className="text-xs mt-0.5"
+              style={{ color: colors.text.secondary }}
+            >
+              Upload a CSV file for evaluation
+            </p>
+          </div>
+
+          {/* Name */}
+          <div>
+            <label
+              htmlFor="dataset-name"
+              className="block text-xs font-medium mb-1.5"
+              style={{ color: colors.text.secondary }}
+            >
+              Name *
+            </label>
+            <input
+              id="dataset-name"
+              type="text"
+              value={datasetName}
+              onChange={(e) => setDatasetName(e.target.value)}
+              placeholder="e.g., Hindi QnA Dataset"
+              className="w-full px-3 py-2 border rounded-md text-sm"
+              style={{
+                backgroundColor: colors.bg.primary,
+                borderColor: colors.border,
+                color: colors.text.primary,
+              }}
+            />
+          </div>
+
+          {/* Description */}
+          <div>
+            <label
+              htmlFor="dataset-description"
+              className="block text-xs font-medium mb-1.5"
+              style={{ color: colors.text.secondary }}
+            >
+              Description
+            </label>
+            <input
+              id="dataset-description"
+              type="text"
+              value={datasetDescription}
+              onChange={(e) => setDatasetDescription(e.target.value)}
+              placeholder="Optional description"
+              className="w-full px-3 py-2 border rounded-md text-sm"
+              style={{
+                backgroundColor: colors.bg.primary,
+                borderColor: colors.border,
+                color: colors.text.primary,
+              }}
+            />
+          </div>
+
+          {/* CSV Upload */}
+          <div>
+            <label
+              className="block text-xs font-medium mb-1.5"
+              style={{ color: colors.text.secondary }}
+            >
+              Upload CSV *
+            </label>
+
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".csv,.xlsx,.xls"
+              onChange={handleFileSelect}
+              className="hidden"
+            />
+
+            {uploadedFile ? (
+              <div
+                className="rounded-lg p-3"
+                style={{ backgroundColor: colors.bg.secondary }}
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2.5">
+                    <svg
+                      className="w-4 h-4 flex-shrink-0"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      style={{ color: colors.status.success }}
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M5 13l4 4L19 7"
+                      />
+                    </svg>
+                    <div>
+                      <p
+                        className="text-sm font-medium"
+                        style={{ color: colors.text.primary }}
+                      >
+                        {uploadedFile.name}
+                      </p>
+                      <p
+                        className="text-xs"
+                        style={{ color: colors.text.secondary }}
+                      >
+                        {(uploadedFile.size / 1024).toFixed(1)} KB
+                      </p>
+                    </div>
+                  </div>
+                  <button
+                    onClick={() => {
+                      setUploadedFile(null);
+                      if (fileInputRef.current) fileInputRef.current.value = "";
+                    }}
+                    aria-label="Remove file"
+                    className="p-1 rounded"
+                    style={{ color: colors.text.secondary }}
+                  >
+                    <CloseIcon className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <div
+                className={`border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors ${isDragging ? "border-blue-400 bg-blue-50/30" : ""}`}
+                style={{
+                  borderColor: isDragging
+                    ? colors.accent.primary
+                    : colors.border,
+                }}
+                onClick={() => fileInputRef.current?.click()}
+                onDragOver={(e) => {
+                  e.preventDefault();
+                  setIsDragging(true);
+                }}
+                onDragLeave={() => setIsDragging(false)}
+                onDrop={handleDrop}
+              >
+                <span
+                  className="block mx-auto mb-2"
+                  style={{ color: colors.border }}
+                >
+                  <CloudUploadIcon className="h-8 w-8" />
+                </span>
+                <p
+                  className="text-sm font-medium mb-1"
+                  style={{ color: colors.text.primary }}
+                >
+                  Drop file here, or click to browse
+                </p>
+                <p className="text-xs" style={{ color: colors.text.secondary }}>
+                  CSV or Excel (.xlsx, .xls)
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Bottom Action Bar */}
+        <div
+          className="flex-shrink-0 border-t px-4 py-3 flex items-center justify-end gap-3"
+          style={{
+            borderColor: colors.border,
+            backgroundColor: colors.bg.primary,
+          }}
+        >
+          <button
+            onClick={resetForm}
+            className="px-4 py-2 rounded-lg text-sm font-medium"
+            style={{ color: colors.text.secondary }}
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleCreateDataset}
+            disabled={!uploadedFile || !datasetName.trim() || isUploading}
+            className="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium"
+            style={{
+              backgroundColor:
+                !uploadedFile || !datasetName.trim() || isUploading
+                  ? colors.bg.secondary
+                  : colors.accent.primary,
+              color:
+                !uploadedFile || !datasetName.trim() || isUploading
+                  ? colors.text.secondary
+                  : "#fff",
+              cursor:
+                !uploadedFile || !datasetName.trim() || isUploading
+                  ? "not-allowed"
+                  : "pointer",
+            }}
+          >
+            {isUploading ? (
+              <>
+                <div
+                  className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
+                  style={{
+                    borderColor: colors.text.secondary,
+                    borderTopColor: "transparent",
+                  }}
+                />
+                Creating...
+              </>
+            ) : (
+              "Create Dataset"
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Right Panel - Dataset List + Selection */}
+      <div
+        className="flex-1 flex flex-col overflow-hidden"
+        style={{ backgroundColor: colors.bg.secondary }}
+      >
+        <div className="flex-1 overflow-auto p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h3
+              className="text-base font-semibold"
+              style={{ color: colors.text.primary }}
+            >
+              Datasets
+            </h3>
+            {isLoadingColumns && (
+              <span
+                className="text-xs"
+                style={{ color: colors.text.secondary }}
+              >
+                Loading columns...
+              </span>
+            )}
+          </div>
+
+          {isLoading ? (
+            <div className="p-16 text-center">
+              <div
+                className="w-6 h-6 border-2 border-t-transparent rounded-full animate-spin mx-auto mb-3"
+                style={{
+                  borderColor: colors.text.secondary,
+                  borderTopColor: "transparent",
+                }}
+              />
+              <p className="text-sm" style={{ color: colors.text.secondary }}>
+                Loading datasets...
+              </p>
+            </div>
+          ) : datasets.length === 0 ? (
+            <div className="p-16 text-center">
+              <DatabaseIcon
+                className="w-12 h-12 mx-auto mb-3"
+                style={{ color: colors.border }}
+              />
+              <p
+                className="text-sm font-medium mb-1"
+                style={{ color: colors.text.primary }}
+              >
+                No datasets yet
+              </p>
+              <p className="text-xs" style={{ color: colors.text.secondary }}>
+                Create your first dataset using the form on the left
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {datasets.map((dataset) => {
+                const isSelected = datasetId === dataset.dataset_id.toString();
+                return (
+                  <div
+                    key={dataset.dataset_id}
+                    className="rounded-lg overflow-hidden cursor-pointer transition-all"
+                    style={{
+                      backgroundColor: colors.bg.primary,
+                      boxShadow: isSelected
+                        ? `0 0 0 2px ${colors.accent.primary}`
+                        : "0 1px 3px rgba(0, 0, 0, 0.04)",
+                      borderLeft: isSelected
+                        ? `3px solid ${colors.accent.primary}`
+                        : "3px solid #DCCFC3",
+                    }}
+                    onClick={() =>
+                      handleDatasetSelect(
+                        dataset.dataset_id.toString(),
+                        dataset.dataset_name,
+                      )
+                    }
+                  >
+                    <div className="px-5 py-4">
+                      <div className="flex items-start justify-between gap-4">
+                        <div className="min-w-0 flex-1">
+                          <div className="flex items-center gap-2">
+                            {isSelected && (
+                              <svg
+                                className="w-4 h-4 flex-shrink-0"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                                style={{ color: colors.status.success }}
+                              >
+                                <path
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                  strokeWidth={2}
+                                  d="M5 13l4 4L19 7"
+                                />
+                              </svg>
+                            )}
+                            <div
+                              className="text-sm font-semibold truncate"
+                              style={{ color: colors.text.primary }}
+                            >
+                              {dataset.dataset_name}
+                            </div>
+                          </div>
+                          {dataset.description && (
+                            <EvalDatasetDescription
+                              description={dataset.description}
+                            />
+                          )}
+                          <div
+                            className="flex items-center gap-3 mt-2 text-xs"
+                            style={{ color: colors.text.secondary }}
+                          >
+                            <span>{dataset.total_items} items</span>
+                            {dataset.original_items > 0 &&
+                              dataset.original_items !==
+                                dataset.total_items && (
+                                <>
+                                  <span style={{ color: colors.border }}>
+                                    ·
+                                  </span>
+                                  <span>{dataset.original_items} original</span>
+                                </>
+                              )}
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-2 flex-shrink-0">
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleViewDataset(
+                                dataset.dataset_id,
+                                dataset.dataset_name,
+                              );
+                            }}
+                            disabled={viewingId === dataset.dataset_id}
+                            className="px-3 py-1.5 rounded-lg text-xs font-medium border"
+                            style={{
+                              backgroundColor: "transparent",
+                              borderColor: colors.border,
+                              color: colors.text.primary,
+                              opacity:
+                                viewingId === dataset.dataset_id ? 0.5 : 1,
+                            }}
+                          >
+                            {viewingId === dataset.dataset_id
+                              ? "Loading..."
+                              : "View"}
+                          </button>
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setConfirmDeleteId(dataset.dataset_id);
+                            }}
+                            aria-label={`Delete ${dataset.dataset_name}`}
+                            className="px-3 py-1.5 rounded-lg text-xs font-medium border"
+                            style={{
+                              backgroundColor: "transparent",
+                              borderColor: colors.border,
+                              color: "hsl(8, 86%, 40%)",
+                            }}
+                          >
+                            Delete
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Next Button */}
+        <div
+          className="flex-shrink-0 border-t px-6 py-3 flex items-center justify-end"
+          style={{
+            borderColor: colors.border,
+            backgroundColor: colors.bg.primary,
+          }}
+        >
+          <button
+            onClick={onNext}
+            disabled={!canProceed}
+            className="px-6 py-2.5 rounded-lg text-sm font-medium"
+            style={{
+              backgroundColor: canProceed
+                ? colors.accent.primary
+                : colors.bg.secondary,
+              color: canProceed ? "#fff" : colors.text.secondary,
+              cursor: canProceed ? "pointer" : "not-allowed",
+            }}
+          >
+            Next: Map Columns
+          </button>
+        </div>
+      </div>
+
+      {/* View Dataset Modal */}
+      {viewModalData && (
+        <DataViewModal
+          title={viewModalData.name}
+          headers={viewModalData.headers}
+          rows={viewModalData.rows}
+          onClose={() => setViewModalData(null)}
+        />
+      )}
+
+      {/* Delete Confirmation Modal */}
+      {confirmDeleteId !== null &&
+        (() => {
+          const dataset = datasets.find(
+            (d) => d.dataset_id === confirmDeleteId,
+          );
+          return (
+            <div
+              className="fixed inset-0 z-50 flex items-center justify-center"
+              style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
+              onClick={() => setConfirmDeleteId(null)}
+            >
+              <div
+                className="rounded-lg shadow-xl w-full max-w-md"
+                style={{ backgroundColor: colors.bg.primary }}
+                onClick={(e) => e.stopPropagation()}
+              >
+                <div className="px-6 py-5">
+                  <div className="flex items-start gap-3">
+                    <div
+                      className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0"
+                      style={{ backgroundColor: "rgba(220, 38, 38, 0.1)" }}
+                    >
+                      <span style={{ color: "hsl(8, 86%, 40%)" }}>
+                        <WarningIcon className="w-5 h-5" />
+                      </span>
+                    </div>
+                    <div>
+                      <h3
+                        className="text-sm font-semibold"
+                        style={{ color: colors.text.primary }}
+                      >
+                        Delete dataset
+                      </h3>
+                      <p
+                        className="text-sm mt-1"
+                        style={{ color: colors.text.secondary }}
+                      >
+                        Are you sure you want to delete{" "}
+                        <strong style={{ color: colors.text.primary }}>
+                          {dataset?.dataset_name}
+                        </strong>
+                        ? This action cannot be undone.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  className="flex items-center justify-end gap-3 px-6 py-4 border-t"
+                  style={{ borderColor: colors.border }}
+                >
+                  <button
+                    onClick={() => setConfirmDeleteId(null)}
+                    className="px-4 py-2 rounded-lg text-sm font-medium border"
+                    style={{
+                      backgroundColor: "transparent",
+                      borderColor: colors.border,
+                      color: colors.text.primary,
+                    }}
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={() => {
+                      handleDeleteDataset(confirmDeleteId);
+                      setConfirmDeleteId(null);
+                    }}
+                    disabled={deletingId === confirmDeleteId}
+                    className="px-4 py-2 rounded-lg text-sm font-medium"
+                    style={{
+                      backgroundColor: "hsl(8, 86%, 40%)",
+                      color: "#ffffff",
+                      opacity: deletingId === confirmDeleteId ? 0.5 : 1,
+                    }}
+                  >
+                    {deletingId === confirmDeleteId ? "Deleting..." : "Delete"}
+                  </button>
+                </div>
+              </div>
+            </div>
+          );
+        })()}
+    </div>
+  );
+}
diff --git a/app/assessment/components/EvaluationsTab.tsx b/app/assessment/components/EvaluationsTab.tsx
new file mode 100644
index 0000000..e37bebd
--- /dev/null
+++ b/app/assessment/components/EvaluationsTab.tsx
@@ -0,0 +1,1105 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import { apiFetch } from "@/app/lib/apiClient";
+import { colors } from "@/app/lib/colors";
+import { useToast } from "@/app/components/Toast";
+import {
+  RefreshIcon,
+  DatabaseIcon,
+  ClipboardIcon,
+  ChevronDownIcon,
+  EyeIcon,
+} from "@/app/components/icons";
+import DataViewModal, { jsonResultsToTableData } from "./DataViewModal";
+import { ConfigResponse, ConfigVersionResponse } from "@/app/lib/configTypes";
+import { handleForbiddenApiError } from "../errorUtils";
+
+interface EvaluationsTabProps {
+  apiKey: string;
+  refreshToken: number;
+  onForbidden?: () => void;
+}
+
+interface AssessmentRun {
+  id: number;
+  experiment_name: string;
+  dataset_name: string | null;
+  dataset_id: number | null;
+  status: string;
+  total_runs: number;
+  pending_runs: number;
+  processing_runs: number;
+  completed_runs: number;
+  failed_runs: number;
+  run_stats: {
+    run_id: number;
+    config_id: string | null;
+    config_version: number | null;
+    status: string;
+    total_items: number;
+    error_message: string | null;
+    updated_at: string | null;
+  }[];
+  error_message: string | null;
+  inserted_at: string;
+  updated_at: string;
+}
+
+interface EvaluationRun {
+  id: number;
+  assessment_id: number | null;
+  run_name: string;
+  dataset_name: string | null;
+  dataset_id: number | null;
+  config_id: string | null;
+  config_version: number | null;
+  status: string;
+  total_items: number;
+  error_message: string | null;
+  organization_id: number;
+  project_id: number;
+  assessment_config: Record<string, unknown> | null;
+  inserted_at: string;
+  updated_at: string;
+}
+
+interface ConfigRunDetail {
+  configId: string;
+  version: number;
+  name: string;
+  description: string | null;
+  commitMessage: string | null;
+  provider: string | null;
+  model: string | null;
+}
+
+type StatusFilter = "all" | "processing" | "completed" | "failed";
+type ExportFormat = "csv" | "xlsx";
+type AssessmentListResponse = AssessmentRun[] | { data?: AssessmentRun[] };
+type EvaluationListResponse = EvaluationRun[] | { data?: EvaluationRun[] };
+
+const STATUS_COLORS: Record<string, { bg: string; text: string }> = {
+  pending: { bg: "rgba(202, 138, 4, 0.1)", text: "#92400e" },
+  processing: { bg: "rgba(202, 138, 4, 0.1)", text: "#92400e" },
+  in_progress: { bg: "rgba(202, 138, 4, 0.1)", text: "#92400e" },
+  completed: { bg: "rgba(22, 163, 74, 0.1)", text: "#166534" },
+  completed_with_errors: { bg: "rgba(245, 158, 11, 0.12)", text: "#9a3412" },
+  failed: { bg: "rgba(220, 38, 38, 0.1)", text: "#991b1b" },
+  cancelled: { bg: "rgba(107, 114, 128, 0.1)", text: "#374151" },
+};
+
+function formatRelativeTime(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return "just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 30) return `${diffDays} day${diffDays !== 1 ? "s" : ""} ago`;
+  const diffMonths = Math.floor(diffDays / 30);
+  return `about ${diffMonths} month${diffMonths !== 1 ? "s" : ""} ago`;
+}
+
+function DownloadDropdown({
+  onDownload,
+  disabled,
+  loading,
+}: {
+  onDownload: (format: ExportFormat) => void;
+  disabled?: boolean;
+  loading?: boolean;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node))
+        setOpen(false);
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen(!open)}
+        disabled={disabled || loading}
+        className="cursor-pointer inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium border transition-colors"
+        style={{
+          borderColor: colors.border,
+          color: disabled ? colors.text.secondary : colors.text.primary,
+          backgroundColor: "transparent",
+          opacity: disabled || loading ? 0.5 : 1,
+        }}
+        aria-label="Download results"
+        aria-expanded={open}
+      >
+        {loading ? (
+          <div
+            className="w-3.5 h-3.5 border-2 border-t-transparent rounded-full animate-spin"
+            style={{
+              borderColor: colors.text.secondary,
+              borderTopColor: "transparent",
+            }}
+          />
+        ) : (
+          <svg
+            className="w-3.5 h-3.5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+            />
+          </svg>
+        )}
+        Export
+        <ChevronDownIcon className="w-3 h-3" />
+      </button>
+      {open && (
+        <div
+          className="absolute right-0 mt-1 w-36 rounded-md shadow-lg border z-10 py-1"
+          style={{
+            backgroundColor: colors.bg.primary,
+            borderColor: colors.border,
+          }}
+        >
+          {(
+            [
+              ["csv", "CSV File"],
+              ["xlsx", "Excel Sheet"],
+            ] as const
+          ).map(([fmt, label]) => (
+            <button
+              key={fmt}
+              onClick={() => {
+                onDownload(fmt);
+                setOpen(false);
+              }}
+              className="cursor-pointer w-full text-left px-3 py-2 text-xs hover:opacity-80 transition-opacity"
+              style={{ color: colors.text.primary }}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function EvaluationsTab({
+  apiKey,
+  refreshToken,
+  onForbidden,
+}: EvaluationsTabProps) {
+  const toast = useToast();
+  const [assessments, setAssessments] = useState<AssessmentRun[]>([]);
+  const [childRunsByAssessment, setChildRunsByAssessment] = useState<
+    Record<number, EvaluationRun[]>
+  >({});
+  const [configDetailsByKey, setConfigDetailsByKey] = useState<
+    Record<string, ConfigRunDetail>
+  >({});
+  const [configLoadingKeys, setConfigLoadingKeys] = useState<
+    Record<string, boolean>
+  >({});
+  const [configErrorKeys, setConfigErrorKeys] = useState<
+    Record<string, string>
+  >({});
+  const [isLoading, setIsLoading] = useState(false);
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>("all");
+  const [rerunningId, setRerunningId] = useState<number | null>(null);
+  const [retryingAssessmentId, setRetryingAssessmentId] = useState<
+    number | null
+  >(null);
+  const [expandedId, setExpandedId] = useState<number | null>(null);
+  const [downloadingId, setDownloadingId] = useState<string | null>(null);
+  const [previewLoading, setPreviewLoading] = useState<number | null>(null);
+  const [previewModal, setPreviewModal] = useState<{
+    title: string;
+    headers: string[];
+    rows: string[][];
+  } | null>(null);
+
+  const buildAuthHeaders = useCallback(() => {
+    const headers = new Headers();
+    if (apiKey) headers.set("X-API-KEY", apiKey);
+    return headers;
+  }, [apiKey]);
+
+  const loadAssessments = useCallback(async () => {
+    if (!apiKey) return;
+    setIsLoading(true);
+    try {
+      const data = await apiFetch<AssessmentListResponse>(
+        "/api/assessment/assessments",
+        apiKey,
+      );
+      const list = Array.isArray(data) ? data : data.data || [];
+      setAssessments(list);
+    } catch (e) {
+      if (handleForbiddenApiError(e, onForbidden)) return;
+      console.error("Failed to load assessments:", e);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [apiKey, onForbidden]);
+
+  const loadChildRuns = useCallback(
+    async (assessmentId: number) => {
+      if (!apiKey) return;
+      try {
+        const data = await apiFetch<EvaluationListResponse>(
+          `/api/assessment/evaluations?assessment_id=${assessmentId}`,
+          apiKey,
+        );
+        const list = Array.isArray(data) ? data : data.data || [];
+        setChildRunsByAssessment((prev) => ({ ...prev, [assessmentId]: list }));
+      } catch (e) {
+        if (handleForbiddenApiError(e, onForbidden)) return;
+        console.error("Failed to load child runs:", e);
+      }
+    },
+    [apiKey, onForbidden],
+  );
+
+  const loadConfigDetail = useCallback(
+    async (configId: string, version: number) => {
+      if (!apiKey) return;
+
+      const key = `${configId}:${version}`;
+      if (configDetailsByKey[key] || configLoadingKeys[key]) return;
+
+      setConfigLoadingKeys((prev) => ({ ...prev, [key]: true }));
+      setConfigErrorKeys((prev) => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
+      });
+
+      try {
+        const [configResponse, versionResponse] = await Promise.all([
+          apiFetch<ConfigResponse>(`/api/configs/${configId}`, apiKey),
+          apiFetch<ConfigVersionResponse>(
+            `/api/configs/${configId}/versions/${version}`,
+            apiKey,
+          ),
+        ]);
+        const configJson = configResponse;
+        const versionJson = versionResponse;
+
+        if (
+          !configJson.success ||
+          !configJson.data ||
+          !versionJson.success ||
+          !versionJson.data
+        ) {
+          throw new Error(
+            configJson.error ||
+              versionJson.error ||
+              "Configuration details unavailable",
+          );
+        }
+
+        const detail: ConfigRunDetail = {
+          configId,
+          version,
+          name: configJson.data.name,
+          description: configJson.data.description,
+          commitMessage: versionJson.data.commit_message,
+          provider: versionJson.data.config_blob?.completion?.provider || null,
+          model:
+            versionJson.data.config_blob?.completion?.params?.model || null,
+        };
+
+        setConfigDetailsByKey((prev) => ({ ...prev, [key]: detail }));
+      } catch (error) {
+        setConfigErrorKeys((prev) => ({
+          ...prev,
+          [key]:
+            error instanceof Error
+              ? error.message
+              : "Failed to load configuration details",
+        }));
+      } finally {
+        setConfigLoadingKeys((prev) => {
+          const next = { ...prev };
+          delete next[key];
+          return next;
+        });
+      }
+    },
+    [apiKey, configDetailsByKey, configLoadingKeys],
+  );
+
+  useEffect(() => {
+    loadAssessments();
+  }, [loadAssessments]);
+
+  useEffect(() => {
+    if (!apiKey || refreshToken === 0) return;
+    void loadAssessments();
+    if (expandedId !== null) {
+      void loadChildRuns(expandedId);
+    }
+  }, [apiKey, expandedId, loadAssessments, loadChildRuns, refreshToken]);
+
+  useEffect(() => {
+    if (expandedId === null) return;
+    const runs = childRunsByAssessment[expandedId] || [];
+    runs.forEach((run) => {
+      if (run.config_id && run.config_version) {
+        void loadConfigDetail(run.config_id, run.config_version);
+      }
+    });
+  }, [childRunsByAssessment, expandedId, loadConfigDetail]);
+
+  const counts = {
+    total: assessments.length,
+    processing: assessments.filter(
+      (r) => r.status === "processing" || r.status === "pending",
+    ).length,
+    completed: assessments.filter((r) => r.status === "completed").length,
+    failed: assessments.filter(
+      (r) => r.status === "failed" || r.status === "completed_with_errors",
+    ).length,
+  };
+
+  const filteredRuns =
+    statusFilter === "all"
+      ? assessments
+      : assessments.filter((r) => {
+          if (statusFilter === "processing")
+            return r.status === "processing" || r.status === "pending";
+          if (statusFilter === "failed")
+            return (
+              r.status === "failed" || r.status === "completed_with_errors"
+            );
+          return r.status === statusFilter;
+        });
+
+  const triggerDownload = useCallback(
+    async (url: string, format: ExportFormat, key: string) => {
+      if (!apiKey) return;
+      setDownloadingId(key);
+      try {
+        const response = await fetch(`${url}?export_format=${format}`, {
+          headers: buildAuthHeaders(),
+          credentials: "include",
+        });
+        if (response.status === 403) {
+          onForbidden?.();
+          return;
+        }
+        if (!response.ok) {
+          const err = await response.json().catch(() => ({}));
+          throw new Error(
+            err.error ||
+              err.message ||
+              err.detail ||
+              `Export failed (${response.status})`,
+          );
+        }
+        const blob = await response.blob();
+        const disposition = response.headers.get("content-disposition") || "";
+        const filenameMatch = disposition.match(/filename="?([^"]+)"?/);
+        const filename = filenameMatch?.[1] || `export.${format}`;
+
+        const a = document.createElement("a");
+        a.href = URL.createObjectURL(blob);
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+        URL.revokeObjectURL(a.href);
+        toast.success("Download started");
+      } catch (error) {
+        toast.error(
+          `Export failed: ${error instanceof Error ? error.message : "Unknown error"}`,
+        );
+      } finally {
+        setDownloadingId(null);
+      }
+    },
+    [apiKey, buildAuthHeaders, onForbidden, toast],
+  );
+
+  const handleRerun = useCallback(
+    async (run: EvaluationRun) => {
+      if (!apiKey) {
+        toast.error("Cannot retry without an API key");
+        return;
+      }
+
+      setRerunningId(run.id);
+      try {
+        await apiFetch(`/api/assessment/evaluations/${run.id}/retry`, apiKey, {
+          method: "POST",
+        });
+
+        toast.success("Evaluation re-submitted successfully!");
+        loadAssessments();
+        if (run.assessment_id) {
+          loadChildRuns(run.assessment_id);
+        }
+      } catch (error) {
+        if (handleForbiddenApiError(error, onForbidden)) return;
+        toast.error(
+          `Re-run failed: ${error instanceof Error ? error.message : "Unknown error"}`,
+        );
+      } finally {
+        setRerunningId(null);
+      }
+    },
+    [apiKey, loadAssessments, loadChildRuns, onForbidden, toast],
+  );
+
+  const handleRetryAssessment = useCallback(
+    async (assessmentId: number) => {
+      if (!apiKey) {
+        toast.error("Cannot retry without an API key");
+        return;
+      }
+
+      setRetryingAssessmentId(assessmentId);
+      try {
+        await apiFetch(
+          `/api/assessment/assessments/${assessmentId}/retry`,
+          apiKey,
+          { method: "POST" },
+        );
+
+        toast.success("Assessment re-submitted successfully!");
+        void loadAssessments();
+        if (expandedId !== null) {
+          void loadChildRuns(expandedId);
+        }
+      } catch (error) {
+        if (handleForbiddenApiError(error, onForbidden)) return;
+        toast.error(
+          `Retry failed: ${error instanceof Error ? error.message : "Unknown error"}`,
+        );
+      } finally {
+        setRetryingAssessmentId(null);
+      }
+    },
+    [apiKey, expandedId, loadAssessments, loadChildRuns, onForbidden, toast],
+  );
+
+  const handleExpand = useCallback(
+    (assessmentId: number) => {
+      const next = expandedId === assessmentId ? null : assessmentId;
+      setExpandedId(next);
+      if (next !== null && !childRunsByAssessment[next]) {
+        loadChildRuns(next);
+      }
+    },
+    [childRunsByAssessment, expandedId, loadChildRuns],
+  );
+
+  const handlePreview = useCallback(
+    async (runId: number, label: string) => {
+      if (!apiKey) return;
+      setPreviewLoading(runId);
+      try {
+        const json = await apiFetch<
+          { data?: Record<string, unknown>[] } | Record<string, unknown>[]
+        >(
+          `/api/assessment/evaluations/${runId}/results?export_format=json`,
+          apiKey,
+        );
+        const results: Record<string, unknown>[] = Array.isArray(json)
+          ? json
+          : json.data || [];
+        const { headers, rows } = jsonResultsToTableData(results);
+        setPreviewModal({ title: label, headers, rows });
+      } catch (error) {
+        if (handleForbiddenApiError(error, onForbidden)) return;
+        toast.error(
+          `Preview failed: ${error instanceof Error ? error.message : "Unknown error"}`,
+        );
+      } finally {
+        setPreviewLoading(null);
+      }
+    },
+    [apiKey, onForbidden, toast],
+  );
+
+  const formatStatusLabel = (status: string) => status.replace(/_/g, " ");
+
+  return (
+    <div className="flex-1 overflow-auto">
+      <div
+        className="flex items-center justify-between px-6 py-4 border-b flex-shrink-0"
+        style={{
+          backgroundColor: colors.bg.primary,
+          borderColor: colors.border,
+        }}
+      >
+        <div className="flex items-center gap-3">
+          <h2
+            className="text-base font-semibold"
+            style={{ color: colors.text.primary }}
+          >
+            Assessments
+          </h2>
+          <div className="flex items-center gap-2 ml-2">
+            {[
+              {
+                label: "Total",
+                value: counts.total,
+                color: colors.text.primary,
+              },
+              {
+                label: "Processing",
+                value: counts.processing,
+                color: "#92400e",
+              },
+              { label: "Completed", value: counts.completed, color: "#166534" },
+              { label: "Failed", value: counts.failed, color: "#991b1b" },
+            ].map((item) => (
+              <span
+                key={item.label}
+                className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full"
+                style={{
+                  backgroundColor: colors.bg.secondary,
+                  color: item.color,
+                }}
+              >
+                <span className="font-semibold">{item.value}</span>
+                <span style={{ color: colors.text.secondary }}>
+                  {item.label.toLowerCase()}
+                </span>
+              </span>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <select
+            aria-label="Filter by status"
+            value={statusFilter}
+            onChange={(e) => setStatusFilter(e.target.value as StatusFilter)}
+            className="px-3 py-1.5 border rounded-md text-sm cursor-pointer"
+            style={{
+              backgroundColor: colors.bg.primary,
+              borderColor: colors.border,
+              color: colors.text.primary,
+            }}
+          >
+            <option value="all">All Status</option>
+            <option value="processing">Processing</option>
+            <option value="completed">Completed</option>
+            <option value="failed">Failed</option>
+          </select>
+
+          <button
+            onClick={loadAssessments}
+            disabled={isLoading}
+            className="cursor-pointer p-2 rounded-md border transition-colors"
+            style={{ borderColor: colors.border, color: colors.text.secondary }}
+            aria-label="Refresh assessments"
+          >
+            <RefreshIcon
+              className={`w-4 h-4 ${isLoading ? "animate-spin" : ""}`}
+            />
+          </button>
+        </div>
+      </div>
+
+      <div className="p-6">
+        {isLoading && assessments.length === 0 ? (
+          <div className="py-16 text-center">
+            <div
+              className="w-6 h-6 border-2 border-t-transparent rounded-full animate-spin mx-auto mb-3"
+              style={{
+                borderColor: colors.text.secondary,
+                borderTopColor: "transparent",
+              }}
+            />
+            <p className="text-sm" style={{ color: colors.text.secondary }}>
+              Loading assessments...
+            </p>
+          </div>
+        ) : filteredRuns.length === 0 ? (
+          <div className="py-16 text-center">
+            <span
+              className="block mx-auto mb-3 w-12 h-12"
+              style={{ color: colors.border }}
+            >
+              <ClipboardIcon className="w-12 h-12" />
+            </span>
+            <p
+              className="text-sm font-medium mb-1"
+              style={{ color: colors.text.primary }}
+            >
+              {statusFilter === "all"
+                ? "No assessments yet"
+                : `No ${statusFilter} assessments`}
+            </p>
+            <p className="text-xs" style={{ color: colors.text.secondary }}>
+              {statusFilter === "all"
+                ? "Submit an assessment from the Config tab to get started"
+                : "Try changing the status filter"}
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-4">
+            {filteredRuns.map((run) => {
+              const statusStyle =
+                STATUS_COLORS[run.status] || STATUS_COLORS.processing;
+              const isExpanded = expandedId === run.id;
+              const childRuns = childRunsByAssessment[run.id] || [];
+              const canRetryAssessment =
+                run.status === "failed" ||
+                run.status === "completed_with_errors";
+              const isRetryingAssessment = retryingAssessmentId === run.id;
+              const hasCompletedRuns = run.completed_runs > 0;
+
+              return (
+                <div
+                  key={run.id}
+                  className="rounded-xl border transition-shadow"
+                  style={{
+                    backgroundColor: colors.bg.primary,
+                    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
+                    borderColor: colors.border,
+                    borderLeft: `3px solid ${
+                      run.status === "completed"
+                        ? "#22c55e"
+                        : run.status === "failed"
+                          ? "#ef4444"
+                          : run.status === "completed_with_errors"
+                            ? "#f59e0b"
+                            : "#eab308"
+                    }`,
+                  }}
+                >
+                  <div className="px-5 py-4">
+                    <div className="flex items-start justify-between gap-4">
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-center gap-3 mb-1">
+                          <span
+                            className="text-sm font-bold truncate"
+                            style={{ color: colors.text.primary }}
+                          >
+                            {run.experiment_name}
+                          </span>
+                          <span
+                            className="text-[10px] px-1.5 py-0.5 rounded font-medium flex-shrink-0"
+                            style={{
+                              backgroundColor: colors.bg.secondary,
+                              color: colors.text.secondary,
+                            }}
+                          >
+                            {run.total_runs} configs
+                          </span>
+                        </div>
+
+                        <div
+                          className="text-xs mb-3"
+                          style={{ color: colors.text.secondary }}
+                        >
+                          {formatRelativeTime(run.inserted_at)}
+                        </div>
+
+                        <div className="flex flex-wrap items-center gap-2">
+                          {run.dataset_name && (
+                            <span
+                              className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs"
+                              style={{
+                                backgroundColor: colors.bg.secondary,
+                                color: colors.text.secondary,
+                              }}
+                            >
+                              <DatabaseIcon className="w-3.5 h-3.5 flex-shrink-0" />
+                              {run.dataset_name}
+                            </span>
+                          )}
+
+                          <span
+                            className="rounded-full px-2.5 py-1 text-xs"
+                            style={{
+                              backgroundColor: colors.bg.secondary,
+                              color: colors.text.secondary,
+                            }}
+                          >
+                            {run.completed_runs} completed
+                          </span>
+                          <span
+                            className="rounded-full px-2.5 py-1 text-xs"
+                            style={{
+                              backgroundColor: colors.bg.secondary,
+                              color: colors.text.secondary,
+                            }}
+                          >
+                            {run.processing_runs + run.pending_runs} active
+                          </span>
+                          {run.failed_runs > 0 && (
+                            <span
+                              className="rounded-full px-2.5 py-1 text-xs"
+                              style={{
+                                backgroundColor: "rgba(220, 38, 38, 0.08)",
+                                color: "#991b1b",
+                              }}
+                            >
+                              {run.failed_runs} failed
+                            </span>
+                          )}
+                        </div>
+
+                        {(run.status === "failed" ||
+                          run.status === "completed_with_errors") &&
+                          run.error_message && (
+                            <div
+                              className="mt-2 text-xs px-3 py-2 rounded-md"
+                              style={{
+                                backgroundColor: "rgba(220, 38, 38, 0.05)",
+                                color: "#991b1b",
+                              }}
+                            >
+                              {run.error_message}
+                            </div>
+                          )}
+                      </div>
+
+                      <div className="flex flex-col items-end gap-3 flex-shrink-0">
+                        <span
+                          className="text-xs font-bold px-3 py-1 rounded-md uppercase tracking-wide"
+                          style={{
+                            backgroundColor: statusStyle.bg,
+                            color: statusStyle.text,
+                          }}
+                        >
+                          {run.status.replace("_", " ")}
+                        </span>
+
+                        <div className="flex items-center gap-2">
+                          {hasCompletedRuns && (
+                            <DownloadDropdown
+                              onDownload={(fmt) =>
+                                triggerDownload(
+                                  `/api/assessment/assessments/${run.id}/results`,
+                                  fmt,
+                                  `assessment-${run.id}`,
+                                )
+                              }
+                              disabled={!hasCompletedRuns}
+                              loading={downloadingId === `assessment-${run.id}`}
+                            />
+                          )}
+                          {canRetryAssessment && (
+                            <button
+                              onClick={() => handleRetryAssessment(run.id)}
+                              disabled={isRetryingAssessment}
+                              className="px-3 py-1.5 rounded-lg text-xs font-medium"
+                              style={{
+                                backgroundColor: isRetryingAssessment
+                                  ? colors.border
+                                  : colors.text.primary,
+                                color: "#ffffff",
+                                opacity: isRetryingAssessment ? 0.7 : 1,
+                              }}
+                            >
+                              {isRetryingAssessment ? "Retrying..." : "Retry"}
+                            </button>
+                          )}
+                          <button
+                            onClick={() => handleExpand(run.id)}
+                            className="cursor-pointer px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors"
+                            style={{
+                              backgroundColor: isExpanded
+                                ? colors.bg.secondary
+                                : "transparent",
+                              borderColor: colors.border,
+                              color: colors.text.primary,
+                            }}
+                          >
+                            {isExpanded ? "Hide details" : "View details"}
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+
+                    {isExpanded && (
+                      <div
+                        className="mt-5 space-y-3 border-t pt-4"
+                        style={{ borderColor: colors.border }}
+                      >
+                        <div className="flex items-center justify-between gap-3">
+                          <div>
+                            <div
+                              className="text-sm font-semibold"
+                              style={{ color: colors.text.primary }}
+                            >
+                              Configurations in this assessment
+                            </div>
+                            <div
+                              className="mt-1 text-xs"
+                              style={{ color: colors.text.secondary }}
+                            >
+                              Each configuration keeps its own status, preview,
+                              and export actions.
+                            </div>
+                          </div>
+                          <div
+                            className="rounded-full px-2.5 py-1 text-[11px] font-medium"
+                            style={{
+                              backgroundColor: colors.bg.secondary,
+                              color: colors.text.secondary,
+                            }}
+                          >
+                            {childRuns.length} run
+                            {childRuns.length !== 1 ? "s" : ""}
+                          </div>
+                        </div>
+
+                        {childRuns.length === 0 ? (
+                          <div
+                            className="text-sm"
+                            style={{ color: colors.text.secondary }}
+                          >
+                            Loading child evaluation runs...
+                          </div>
+                        ) : (
+                          childRuns.map((childRun) => {
+                            const childStatusStyle =
+                              STATUS_COLORS[childRun.status] ||
+                              STATUS_COLORS.processing;
+                            const isFailedChild = childRun.status === "failed";
+                            const isCompletedChild =
+                              childRun.status === "completed";
+                            const isRerunning = rerunningId === childRun.id;
+                            const configKey =
+                              childRun.config_id && childRun.config_version
+                                ? `${childRun.config_id}:${childRun.config_version}`
+                                : null;
+                            const configDetail = configKey
+                              ? configDetailsByKey[configKey]
+                              : null;
+                            const isConfigLoading = configKey
+                              ? Boolean(configLoadingKeys[configKey])
+                              : false;
+                            const configError = configKey
+                              ? configErrorKeys[configKey]
+                              : null;
+                            const fallbackName = childRun.config_id
+                              ? `Config ${childRun.config_id.slice(0, 8)}`
+                              : "Configuration";
+                            const configName =
+                              configDetail?.name || fallbackName;
+                            const previewLabel = `${configName}${childRun.config_version ? ` v${childRun.config_version}` : ""}`;
+
+                            return (
+                              <div
+                                key={childRun.id}
+                                className="rounded-xl border p-4"
+                                style={{
+                                  borderColor: colors.border,
+                                  backgroundColor: colors.bg.secondary,
+                                }}
+                              >
+                                <div className="flex items-start justify-between gap-3">
+                                  <div className="min-w-0 flex-1">
+                                    <div className="flex flex-wrap items-center gap-2">
+                                      <span
+                                        className="text-sm font-semibold"
+                                        style={{ color: colors.text.primary }}
+                                      >
+                                        {configName}
+                                      </span>
+                                      {childRun.config_version !== null && (
+                                        <span
+                                          className="rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide"
+                                          style={{
+                                            backgroundColor: colors.bg.primary,
+                                            color: colors.text.secondary,
+                                          }}
+                                        >
+                                          v{childRun.config_version}
+                                        </span>
+                                      )}
+                                      {configDetail?.provider &&
+                                        configDetail?.model && (
+                                          <span
+                                            className="rounded-full px-2 py-0.5 text-[10px] font-medium"
+                                            style={{
+                                              backgroundColor:
+                                                "rgba(23, 23, 23, 0.05)",
+                                              color: colors.text.secondary,
+                                            }}
+                                          >
+                                            {configDetail.provider}/
+                                            {configDetail.model}
+                                          </span>
+                                        )}
+                                    </div>
+
+                                    <div
+                                      className="mt-1 text-sm"
+                                      style={{ color: colors.text.secondary }}
+                                    >
+                                      {isConfigLoading
+                                        ? "Loading configuration details..."
+                                        : configDetail?.description ||
+                                          configDetail?.commitMessage ||
+                                          "No description available for this configuration."}
+                                    </div>
+
+                                    <div
+                                      className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs"
+                                      style={{ color: colors.text.secondary }}
+                                    >
+                                      <span>{childRun.total_items} items</span>
+                                      {childRun.updated_at && (
+                                        <span>
+                                          {formatRelativeTime(
+                                            childRun.updated_at,
+                                          )}
+                                        </span>
+                                      )}
+                                      {childRun.config_id && (
+                                        <span className="font-mono">
+                                          ID {childRun.config_id.slice(0, 8)}
+                                        </span>
+                                      )}
+                                    </div>
+
+                                    {configError && (
+                                      <div
+                                        className="mt-2 text-xs"
+                                        style={{ color: "#991b1b" }}
+                                      >
+                                        {configError}
+                                      </div>
+                                    )}
+                                    {isFailedChild &&
+                                      childRun.error_message && (
+                                        <div
+                                          className="mt-2 text-xs"
+                                          style={{ color: "#991b1b" }}
+                                        >
+                                          {childRun.error_message}
+                                        </div>
+                                      )}
+                                  </div>
+
+                                  <div className="flex items-center gap-2 flex-shrink-0">
+                                    <span
+                                      className="text-xs font-bold px-2.5 py-1 rounded-md uppercase tracking-wide"
+                                      style={{
+                                        backgroundColor: childStatusStyle.bg,
+                                        color: childStatusStyle.text,
+                                      }}
+                                    >
+                                      {formatStatusLabel(childRun.status)}
+                                    </span>
+                                    {isCompletedChild && (
+                                      <button
+                                        onClick={() =>
+                                          handlePreview(
+                                            childRun.id,
+                                            previewLabel,
+                                          )
+                                        }
+                                        disabled={
+                                          previewLoading === childRun.id
+                                        }
+                                        className="cursor-pointer inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium border transition-colors"
+                                        style={{
+                                          borderColor: colors.border,
+                                          color: colors.text.primary,
+                                          backgroundColor: "transparent",
+                                          opacity:
+                                            previewLoading === childRun.id
+                                              ? 0.5
+                                              : 1,
+                                        }}
+                                      >
+                                        {previewLoading === childRun.id ? (
+                                          <div
+                                            className="w-3.5 h-3.5 border-2 border-t-transparent rounded-full animate-spin"
+                                            style={{
+                                              borderColor:
+                                                colors.text.secondary,
+                                              borderTopColor: "transparent",
+                                            }}
+                                          />
+                                        ) : (
+                                          <EyeIcon className="w-3.5 h-3.5" />
+                                        )}
+                                        Preview
+                                      </button>
+                                    )}
+                                    {isCompletedChild && (
+                                      <DownloadDropdown
+                                        onDownload={(fmt) =>
+                                          triggerDownload(
+                                            `/api/assessment/evaluations/${childRun.id}/results`,
+                                            fmt,
+                                            `run-${childRun.id}`,
+                                          )
+                                        }
+                                        loading={
+                                          downloadingId === `run-${childRun.id}`
+                                        }
+                                      />
+                                    )}
+                                    {isFailedChild && (
+                                      <button
+                                        onClick={() => handleRerun(childRun)}
+                                        disabled={isRerunning}
+                                        className="px-3 py-1.5 rounded-lg text-xs font-medium"
+                                        style={{
+                                          backgroundColor: isRerunning
+                                            ? colors.border
+                                            : colors.text.primary,
+                                          color: "#ffffff",
+                                          opacity: isRerunning ? 0.7 : 1,
+                                        }}
+                                      >
+                                        {isRerunning
+                                          ? "Re-running..."
+                                          : "Re-run"}
+                                      </button>
+                                    )}
+                                  </div>
+                                </div>
+                              </div>
+                            );
+                          })
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {previewModal && (
+        <DataViewModal
+          title={previewModal.title}
+          subtitle={`${previewModal.rows.length} rows · ${previewModal.headers.length} columns`}
+          headers={previewModal.headers}
+          rows={previewModal.rows}
+          onClose={() => setPreviewModal(null)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/app/assessment/components/JsonEditor.tsx b/app/assessment/components/JsonEditor.tsx
new file mode 100644
index 0000000..f7b413f
--- /dev/null
+++ b/app/assessment/components/JsonEditor.tsx
@@ -0,0 +1,271 @@
+"use client";
+
+import { useRef, useCallback, useId } from "react";
+import { colors } from "@/app/lib/colors";
+
+interface JsonEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  error?: string | null;
+  isValid?: boolean;
+  placeholder?: string;
+  minHeight?: number;
+}
+
+/* JSON token colors — light background */
+const C = {
+  key: "#0550ae", // blue — property keys
+  string: "#116329", // green — string values
+  number: "#953800", // orange — numbers
+  boolean: "#8250df", // purple — true/false
+  null: "#8250df", // purple — null
+  punct: "#6e7781", // gray — brackets, commas, colons
+};
+
+function highlight(code: string): string {
+  if (!code) return "";
+
+  const escHtml = (s: string) =>
+    s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+
+  const re =
+    /("(?:\\.|[^"\\])*")(\s*:)?|(\btrue\b|\bfalse\b|\bnull\b)|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g;
+  let result = "";
+  let cursor = 0;
+  let m: RegExpExecArray | null;
+
+  while ((m = re.exec(code)) !== null) {
+    // punctuation / whitespace between tokens
+    if (cursor < m.index) {
+      result += `<span style="color:${C.punct}">${escHtml(code.slice(cursor, m.index))}</span>`;
+    }
+
+    if (m[1] !== undefined) {
+      const isKey = !!m[2];
+      result += `<span style="color:${isKey ? C.key : C.string}">${escHtml(m[1])}</span>`;
+      if (m[2])
+        result += `<span style="color:${C.punct}">${escHtml(m[2])}</span>`;
+      cursor = m.index + m[0].length;
+    } else if (m[3] !== undefined) {
+      result += `<span style="color:${m[3] === "null" ? C.null : C.boolean}">${escHtml(m[3])}</span>`;
+      cursor = m.index + m[3].length;
+    } else if (m[4] !== undefined) {
+      result += `<span style="color:${C.number}">${escHtml(m[4])}</span>`;
+      cursor = m.index + m[4].length;
+    }
+  }
+
+  if (cursor < code.length) {
+    result += `<span style="color:${C.punct}">${escHtml(code.slice(cursor))}</span>`;
+  }
+
+  return result;
+}
+
+const FONT: React.CSSProperties = {
+  fontFamily:
+    "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+  fontSize: "13px",
+  lineHeight: "1.7",
+  tabSize: 2,
+};
+
+export default function JsonEditor({
+  value,
+  onChange,
+  error,
+  isValid,
+  placeholder,
+  minHeight = 400,
+}: JsonEditorProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const preRef = useRef<HTMLPreElement>(null);
+  const textareaId = useId();
+  const errorId = `${textareaId}-error`;
+
+  const syncScroll = useCallback(() => {
+    if (textareaRef.current && preRef.current) {
+      preRef.current.scrollTop = textareaRef.current.scrollTop;
+      preRef.current.scrollLeft = textareaRef.current.scrollLeft;
+    }
+  }, []);
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Tab") {
+      e.preventDefault();
+      const el = e.currentTarget;
+      const s = el.selectionStart;
+      const newVal =
+        value.substring(0, s) + "  " + value.substring(el.selectionEnd);
+      onChange(newVal);
+      requestAnimationFrame(() => {
+        el.selectionStart = el.selectionEnd = s + 2;
+      });
+      return;
+    }
+    const pairs: Record<string, string> = { "{": "}", "[": "]" };
+    if (pairs[e.key]) {
+      const el = e.currentTarget;
+      const s = el.selectionStart;
+      if (s === el.selectionEnd) {
+        e.preventDefault();
+        const newVal =
+          value.substring(0, s) + e.key + pairs[e.key] + value.substring(s);
+        onChange(newVal);
+        requestAnimationFrame(() => {
+          el.selectionStart = el.selectionEnd = s + 1;
+        });
+      }
+    }
+  };
+
+  const borderColor = error
+    ? "rgba(239,68,68,0.4)"
+    : isValid && value.trim()
+      ? "rgba(34,197,94,0.35)"
+      : colors.border;
+
+  return (
+    <div
+      className="rounded-xl overflow-hidden"
+      style={{ border: `1px solid ${borderColor}` }}
+    >
+      {/* Minimal top bar */}
+      <div
+        className="flex items-center justify-between px-4 py-2 border-b"
+        style={{
+          backgroundColor: colors.bg.secondary,
+          borderColor: colors.border,
+        }}
+      >
+        <div className="flex items-center gap-2">
+          <span
+            style={{ ...FONT, fontSize: "11px", color: colors.text.secondary }}
+          >
+            JSON
+          </span>
+          {value.trim() && (
+            <span
+              className="text-[10px] px-1.5 py-0.5 rounded-full"
+              style={
+                error
+                  ? {
+                      color: "#ef4444",
+                      backgroundColor: "rgba(239,68,68,0.07)",
+                    }
+                  : isValid
+                    ? {
+                        color: "#16a34a",
+                        backgroundColor: "rgba(22,163,74,0.07)",
+                      }
+                    : {}
+              }
+            >
+              {error ? "Invalid" : isValid ? "Valid" : ""}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-3">
+          {error && (
+            <span
+              id={errorId}
+              role="alert"
+              aria-live="polite"
+              className="text-[11px] truncate max-w-xs"
+              style={{ color: "#ef4444" }}
+            >
+              {error}
+            </span>
+          )}
+          {value.trim() && (
+            <button
+              type="button"
+              onClick={() => onChange("")}
+              className="cursor-pointer text-xs"
+              style={{ color: colors.text.secondary }}
+            >
+              Clear
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Editor */}
+      <div
+        className="relative overflow-auto"
+        style={{ minHeight, backgroundColor: colors.bg.primary }}
+      >
+        {/* Placeholder */}
+        {!value && placeholder && (
+          <pre
+            aria-hidden
+            style={{
+              ...FONT,
+              position: "absolute",
+              inset: 0,
+              padding: "16px 20px",
+              color: colors.border,
+              pointerEvents: "none",
+              zIndex: 0,
+              margin: 0,
+            }}
+          >
+            {placeholder}
+          </pre>
+        )}
+
+        {/* Highlighted layer */}
+        <pre
+          ref={preRef}
+          aria-hidden
+          style={{
+            ...FONT,
+            position: "absolute",
+            inset: 0,
+            padding: "16px 20px",
+            margin: 0,
+            pointerEvents: "none",
+            overflow: "hidden",
+            minHeight,
+            zIndex: 1,
+            whiteSpace: "pre",
+            wordBreak: "normal",
+          }}
+          dangerouslySetInnerHTML={{ __html: highlight(value) + "\n" }}
+        />
+
+        {/* Editable layer */}
+        <textarea
+          id={textareaId}
+          ref={textareaRef}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          onKeyDown={handleKeyDown}
+          onScroll={syncScroll}
+          spellCheck={false}
+          autoCapitalize="off"
+          autoComplete="off"
+          autoCorrect="off"
+          aria-label="JSON editor"
+          aria-invalid={!!error}
+          aria-describedby={error ? errorId : undefined}
+          className="relative w-full resize-none outline-none"
+          style={{
+            ...FONT,
+            position: "relative",
+            padding: "16px 20px",
+            backgroundColor: "transparent",
+            color: "transparent",
+            caretColor: colors.text.primary,
+            minHeight,
+            zIndex: 2,
+            border: "none",
+            display: "block",
+            whiteSpace: "pre",
+            wordBreak: "normal",
+          }}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/app/assessment/components/MultiConfigStep.tsx b/app/assessment/components/MultiConfigStep.tsx
new file mode 100644
index 0000000..d79fa54
--- /dev/null
+++ b/app/assessment/components/MultiConfigStep.tsx
@@ -0,0 +1,479 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+import { colors } from "@/app/lib/colors";
+import { useConfigs } from "@/app/hooks/useConfigs";
+import { SavedConfig } from "@/app/lib/types/configs";
+import { formatRelativeTime } from "@/app/lib/utils";
+import { ConfigSelection, MAX_CONFIGS } from "../types";
+
+interface MultiConfigStepProps {
+  configs: ConfigSelection[];
+  setConfigs: (configs: ConfigSelection[]) => void;
+  onNext: () => void;
+  onBack: () => void;
+}
+
+export default function MultiConfigStep({
+  configs,
+  setConfigs,
+  onNext,
+  onBack,
+}: MultiConfigStepProps) {
+  const { configGroups, isLoading, error } = useConfigs();
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const filteredGroups = searchQuery.trim()
+    ? configGroups.filter((g) =>
+        g.name.toLowerCase().includes(searchQuery.toLowerCase()),
+      )
+    : configGroups;
+
+  const isSelected = (configId: string, version: number) =>
+    configs.some(
+      (c) => c.config_id === configId && c.config_version === version,
+    );
+
+  const handleSelect = (config: SavedConfig) => {
+    if (isSelected(config.config_id, config.version)) {
+      setConfigs(
+        configs.filter(
+          (c) =>
+            !(
+              c.config_id === config.config_id &&
+              c.config_version === config.version
+            ),
+        ),
+      );
+    } else if (configs.length < MAX_CONFIGS) {
+      setConfigs([
+        ...configs,
+        {
+          config_id: config.config_id,
+          config_version: config.version,
+          name: config.name,
+          provider: config.provider,
+          model: config.modelName,
+        },
+      ]);
+    }
+    setSearchQuery("");
+  };
+
+  const removeConfig = (index: number) => {
+    setConfigs(configs.filter((_, i) => i !== index));
+  };
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(e.target as Node)
+      ) {
+        setIsDropdownOpen(false);
+        setSearchQuery("");
+      }
+    };
+    if (isDropdownOpen) {
+      document.addEventListener("mousedown", handleClick);
+      return () => document.removeEventListener("mousedown", handleClick);
+    }
+  }, [isDropdownOpen]);
+
+  // Focus input when dropdown opens
+  useEffect(() => {
+    if (isDropdownOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isDropdownOpen]);
+
+  return (
+    <div className="max-w-2xl mx-auto space-y-6">
+      <div>
+        <h2
+          className="text-lg font-semibold"
+          style={{ color: colors.text.primary }}
+        >
+          Select Configurations
+        </h2>
+        <p className="text-sm mt-1" style={{ color: colors.text.secondary }}>
+          Choose up to {MAX_CONFIGS} configurations for comparison. Each will
+          run as a separate batch.
+        </p>
+      </div>
+
+      {/* Selected configs as tags */}
+      {configs.length > 0 && (
+        <div>
+          <label
+            className="block text-xs font-medium mb-2"
+            style={{ color: colors.text.secondary }}
+          >
+            Selected ({configs.length}/{MAX_CONFIGS})
+          </label>
+          <div className="flex flex-wrap gap-2">
+            {configs.map((config, index) => (
+              <div
+                key={`${config.config_id}-${config.config_version}`}
+                className="inline-flex items-center gap-2 border rounded-full pl-3 pr-1.5 py-1.5"
+                style={{
+                  borderColor: colors.accent.primary,
+                  backgroundColor: "rgba(59, 130, 246, 0.05)",
+                }}
+              >
+                <div className="flex items-center gap-1.5">
+                  <span
+                    className="text-sm font-medium"
+                    style={{ color: colors.text.primary }}
+                  >
+                    {config.name}
+                  </span>
+                  <span
+                    className="text-[10px] px-1.5 py-0.5 rounded-full font-medium"
+                    style={{
+                      backgroundColor: colors.bg.secondary,
+                      color: colors.text.secondary,
+                    }}
+                  >
+                    v{config.config_version}
+                  </span>
+                  <span
+                    className="text-xs"
+                    style={{ color: colors.text.secondary }}
+                  >
+                    {config.provider}/{config.model}
+                  </span>
+                </div>
+                <button
+                  onClick={() => removeConfig(index)}
+                  className="p-0.5 rounded-full transition-colors hover:bg-red-50"
+                  style={{ color: colors.text.secondary }}
+                >
+                  <svg
+                    className="w-3.5 h-3.5"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    strokeWidth={2.5}
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      d="M6 18L18 6M6 6l12 12"
+                    />
+                  </svg>
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Config selector */}
+      {configs.length < MAX_CONFIGS && (
+        <div ref={dropdownRef} className="relative">
+          <label
+            className="block text-xs font-medium mb-1.5"
+            style={{ color: colors.text.secondary }}
+          >
+            Add Configuration
+          </label>
+
+          {isLoading ? (
+            <div
+              className="text-sm py-4 text-center"
+              style={{ color: colors.text.secondary }}
+            >
+              Loading configurations...
+            </div>
+          ) : error ? (
+            <div
+              className="text-sm py-4 text-center"
+              style={{ color: colors.status.error }}
+            >
+              {error}
+            </div>
+          ) : (
+            <div className="relative">
+              {/* Trigger / search input */}
+              <div
+                className="flex items-center border rounded-lg px-3 py-2.5 cursor-text"
+                style={{
+                  backgroundColor: colors.bg.primary,
+                  borderColor: isDropdownOpen
+                    ? colors.accent.primary
+                    : colors.border,
+                  boxShadow: isDropdownOpen
+                    ? `0 0 0 1px ${colors.accent.primary}`
+                    : "none",
+                }}
+                onClick={() => {
+                  setIsDropdownOpen(true);
+                  inputRef.current?.focus();
+                }}
+              >
+                <svg
+                  className="w-4 h-4 mr-2 flex-shrink-0"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  style={{ color: colors.text.secondary }}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                  />
+                </svg>
+                <input
+                  ref={inputRef}
+                  type="text"
+                  value={searchQuery}
+                  onChange={(e) => {
+                    setSearchQuery(e.target.value);
+                    if (!isDropdownOpen) setIsDropdownOpen(true);
+                  }}
+                  onFocus={() => setIsDropdownOpen(true)}
+                  placeholder={`Search configurations... (${MAX_CONFIGS - configs.length} remaining)`}
+                  className="flex-1 text-sm bg-transparent outline-none"
+                  style={{ color: colors.text.primary }}
+                />
+                {isDropdownOpen && (
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setIsDropdownOpen(false);
+                      setSearchQuery("");
+                    }}
+                    className="p-0.5 rounded"
+                    style={{ color: colors.text.secondary }}
+                  >
+                    <svg
+                      className="w-4 h-4"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                      strokeWidth={2}
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        d="M5 15l7-7 7 7"
+                      />
+                    </svg>
+                  </button>
+                )}
+              </div>
+
+              {/* Dropdown list */}
+              {isDropdownOpen && (
+                <div
+                  className="absolute z-50 w-full mt-1 rounded-lg border shadow-lg overflow-hidden"
+                  style={{
+                    backgroundColor: colors.bg.primary,
+                    borderColor: colors.border,
+                  }}
+                >
+                  <div className="max-h-72 overflow-auto">
+                    {filteredGroups.length === 0 ? (
+                      <div
+                        className="px-4 py-6 text-center text-sm"
+                        style={{ color: colors.text.secondary }}
+                      >
+                        {searchQuery
+                          ? `No configs match "${searchQuery}"`
+                          : "No configurations available"}
+                      </div>
+                    ) : (
+                      filteredGroups.map((group) => (
+                        <div key={group.config_id}>
+                          {/* Group header */}
+                          <div
+                            className="px-3 py-2 text-xs font-semibold uppercase tracking-wide sticky top-0 border-b"
+                            style={{
+                              backgroundColor: colors.bg.secondary,
+                              color: colors.text.secondary,
+                              borderColor: colors.border,
+                            }}
+                          >
+                            {group.name}
+                            <span className="font-normal ml-1 normal-case">
+                              ({group.totalVersions} version
+                              {group.totalVersions !== 1 ? "s" : ""})
+                            </span>
+                          </div>
+                          {/* Versions */}
+                          {group.versions.map((version) => {
+                            const selected = isSelected(
+                              version.config_id,
+                              version.version,
+                            );
+                            return (
+                              <button
+                                key={version.id}
+                                onClick={() => handleSelect(version)}
+                                className="w-full px-4 py-3 text-left flex items-center gap-3 transition-colors border-b"
+                                style={{
+                                  backgroundColor: selected
+                                    ? "rgba(59, 130, 246, 0.04)"
+                                    : colors.bg.primary,
+                                  borderColor: colors.border,
+                                }}
+                                onMouseEnter={(e) => {
+                                  if (!selected)
+                                    e.currentTarget.style.backgroundColor =
+                                      colors.bg.secondary;
+                                }}
+                                onMouseLeave={(e) => {
+                                  e.currentTarget.style.backgroundColor =
+                                    selected
+                                      ? "rgba(59, 130, 246, 0.04)"
+                                      : colors.bg.primary;
+                                }}
+                              >
+                                {/* Checkbox */}
+                                <div
+                                  className="w-4 h-4 rounded border flex-shrink-0 flex items-center justify-center"
+                                  style={{
+                                    borderColor: selected
+                                      ? colors.accent.primary
+                                      : colors.border,
+                                    backgroundColor: selected
+                                      ? colors.accent.primary
+                                      : "transparent",
+                                  }}
+                                >
+                                  {selected && (
+                                    <svg
+                                      className="w-3 h-3"
+                                      fill="none"
+                                      viewBox="0 0 24 24"
+                                      stroke="white"
+                                      strokeWidth={3}
+                                    >
+                                      <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        d="M5 13l4 4L19 7"
+                                      />
+                                    </svg>
+                                  )}
+                                </div>
+                                {/* Version info */}
+                                <div className="flex-1 min-w-0">
+                                  <div className="flex items-center gap-2">
+                                    <span
+                                      className="text-[10px] px-1.5 py-0.5 rounded font-medium"
+                                      style={{
+                                        backgroundColor: colors.bg.secondary,
+                                        color: colors.text.secondary,
+                                      }}
+                                    >
+                                      v{version.version}
+                                    </span>
+                                    <span
+                                      className="text-sm truncate"
+                                      style={{ color: colors.text.primary }}
+                                    >
+                                      {version.commit_message || "No message"}
+                                    </span>
+                                  </div>
+                                  <div
+                                    className="text-xs mt-0.5 flex items-center gap-1"
+                                    style={{ color: colors.text.secondary }}
+                                  >
+                                    <span>
+                                      {version.provider}/{version.modelName}
+                                    </span>
+                                    <span>·</span>
+                                    <span>
+                                      T:{version.temperature.toFixed(2)}
+                                    </span>
+                                    <span>·</span>
+                                    <span>
+                                      {formatRelativeTime(version.timestamp)}
+                                    </span>
+                                  </div>
+                                </div>
+                              </button>
+                            );
+                          })}
+                        </div>
+                      ))
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Empty state */}
+      {configs.length === 0 && !isLoading && !error && (
+        <div
+          className="rounded-lg border-2 border-dashed p-8 text-center"
+          style={{ borderColor: colors.border }}
+        >
+          <svg
+            className="mx-auto w-10 h-10 mb-3"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            style={{ color: colors.border }}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={1.5}
+              d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
+            />
+          </svg>
+          <p
+            className="text-sm font-medium mb-1"
+            style={{ color: colors.text.primary }}
+          >
+            No configurations selected
+          </p>
+          <p className="text-xs" style={{ color: colors.text.secondary }}>
+            Use the search above to find and select up to {MAX_CONFIGS}{" "}
+            configurations
+          </p>
+        </div>
+      )}
+
+      {/* Navigation */}
+      <div className="flex justify-between pt-4">
+        <button
+          onClick={onBack}
+          className="px-6 py-2.5 rounded-lg text-sm font-medium border"
+          style={{
+            borderColor: colors.border,
+            color: colors.text.primary,
+            backgroundColor: colors.bg.primary,
+          }}
+        >
+          Back
+        </button>
+        <button
+          onClick={onNext}
+          disabled={configs.length === 0}
+          className="px-6 py-2.5 rounded-lg text-sm font-medium"
+          style={{
+            backgroundColor:
+              configs.length > 0 ? colors.accent.primary : colors.bg.secondary,
+            color: configs.length > 0 ? "#fff" : colors.text.secondary,
+            cursor: configs.length > 0 ? "pointer" : "not-allowed",
+          }}
+        >
+          Next: Review
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/assessment/components/OutputSchemaStep.tsx b/app/assessment/components/OutputSchemaStep.tsx
new file mode 100644
index 0000000..89f8f07
--- /dev/null
+++ b/app/assessment/components/OutputSchemaStep.tsx
@@ -0,0 +1,874 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import JsonEditor from "./JsonEditor";
+import { colors } from "@/app/lib/colors";
+import { SchemaProperty, SchemaPropertyType } from "../types";
+
+/* ── Lazy-load Material Symbols ── */
+const MATERIAL_SYMBOLS_HREF =
+  "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=asterisk";
+
+function useMaterialSymbols() {
+  useEffect(() => {
+    if (document.querySelector(`link[href="${MATERIAL_SYMBOLS_HREF}"]`)) return;
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = MATERIAL_SYMBOLS_HREF;
+    document.head.appendChild(link);
+  }, []);
+}
+
+interface OutputSchemaStepProps {
+  schema: SchemaProperty[];
+  setSchema: (schema: SchemaProperty[]) => void;
+  onNext: () => void;
+  onBack: () => void;
+}
+
+interface OutputSchemaEditorProps {
+  schema: SchemaProperty[];
+  setSchema: (schema: SchemaProperty[]) => void;
+  title?: string;
+  description?: React.ReactNode;
+}
+
+const TYPE_OPTIONS: Array<{ value: SchemaPropertyType; label: string }> = [
+  { value: "string", label: "Text" },
+  { value: "number", label: "Number" },
+  { value: "integer", label: "Whole number" },
+  { value: "boolean", label: "Yes / No" },
+  { value: "enum", label: "Choice" },
+  { value: "object", label: "Group" },
+];
+
+let idCounter = 0;
+function genId() {
+  return `prop_${Date.now()}_${++idCounter}`;
+}
+
+function createProperty(): SchemaProperty {
+  return {
+    id: genId(),
+    name: "",
+    type: "string",
+    isArray: false,
+    isRequired: true,
+    children: [],
+    enumValues: [],
+  };
+}
+
+function updateInTree(
+  props: SchemaProperty[],
+  id: string,
+  updater: (p: SchemaProperty) => SchemaProperty,
+): SchemaProperty[] {
+  return props.map((p) => {
+    if (p.id === id) return updater(p);
+    if (p.children.length > 0)
+      return { ...p, children: updateInTree(p.children, id, updater) };
+    return p;
+  });
+}
+
+function removeFromTree(props: SchemaProperty[], id: string): SchemaProperty[] {
+  return props
+    .filter((p) => p.id !== id)
+    .map((p) => ({ ...p, children: removeFromTree(p.children, id) }));
+}
+
+function addChildToTree(
+  props: SchemaProperty[],
+  parentId: string,
+): SchemaProperty[] {
+  return props.map((p) => {
+    if (p.id === parentId)
+      return { ...p, children: [...p.children, createProperty()] };
+    if (p.children.length > 0)
+      return { ...p, children: addChildToTree(p.children, parentId) };
+    return p;
+  });
+}
+
+/* ── JSON Schema ↔ SchemaProperty[] conversion ── */
+function toJsonSchema(properties: SchemaProperty[]): object | null {
+  if (properties.length === 0) return null;
+  const props: Record<string, object> = {};
+  const required: string[] = [];
+  properties.forEach((p) => {
+    if (!p.name.trim()) return;
+    let def: object;
+    if (p.type === "object")
+      def = toJsonSchema(p.children) || { type: "object" };
+    else if (p.type === "enum")
+      def = { type: "string", enum: p.enumValues.filter((v) => v.trim()) };
+    else def = { type: p.type };
+    if (p.isArray) def = { type: "array", items: def };
+    props[p.name] = def;
+    if (p.isRequired) required.push(p.name);
+  });
+  return {
+    type: "object",
+    properties: props,
+    ...(required.length > 0 ? { required } : {}),
+  };
+}
+
+function fromJsonSchema(schema: Record<string, unknown>): SchemaProperty[] {
+  if (!schema || schema.type !== "object" || !schema.properties) return [];
+  const required: string[] = Array.isArray(schema.required)
+    ? (schema.required as string[])
+    : [];
+  const properties = schema.properties as Record<
+    string,
+    Record<string, unknown>
+  >;
+  return Object.entries(properties).map(([name, def]) => {
+    let type: SchemaPropertyType = "string";
+    let isArray = false;
+    let children: SchemaProperty[] = [];
+    let enumValues: string[] = [];
+    let actualDef: Record<string, unknown> = def;
+    if (def.type === "array" && def.items && typeof def.items === "object") {
+      isArray = true;
+      actualDef = def.items as Record<string, unknown>;
+    }
+    if (actualDef.type === "object") {
+      type = "object";
+      children = fromJsonSchema(actualDef as Record<string, unknown>);
+    } else if (Array.isArray(actualDef.enum)) {
+      type = "enum";
+      enumValues = actualDef.enum as string[];
+    } else {
+      type = (actualDef.type as SchemaPropertyType) || "string";
+    }
+    return {
+      id: genId(),
+      name,
+      type,
+      isArray,
+      isRequired: required.includes(name),
+      children,
+      enumValues,
+    };
+  });
+}
+
+function validateOpenApiSchema(raw: string): {
+  valid: boolean;
+  schema: Record<string, unknown> | null;
+  error: string | null;
+} {
+  if (!raw.trim()) return { valid: true, schema: null, error: null };
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return {
+      valid: false,
+      schema: null,
+      error: "Invalid JSON — check for syntax errors.",
+    };
+  }
+  if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+    return {
+      valid: false,
+      schema: null,
+      error: "Schema must be a JSON object.",
+    };
+  }
+  const obj = parsed as Record<string, unknown>;
+  if (obj.type !== "object") {
+    return {
+      valid: false,
+      schema: null,
+      error: 'Root schema must have "type": "object".',
+    };
+  }
+  if (!obj.properties || typeof obj.properties !== "object") {
+    return {
+      valid: false,
+      schema: null,
+      error: 'Schema must have a "properties" object.',
+    };
+  }
+  return { valid: true, schema: obj, error: null };
+}
+
+/* ── ActionBtn ── */
+function ActionBtn({
+  active,
+  onClick,
+  title,
+  children,
+}: {
+  active?: boolean;
+  onClick: () => void;
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      title={title}
+      className="w-9 h-9 flex items-center justify-center rounded-full transition-colors flex-shrink-0 cursor-pointer"
+      style={{
+        backgroundColor: active ? colors.accent.primary : colors.bg.secondary,
+        color: active ? "#ffffff" : colors.text.secondary,
+      }}
+    >
+      {children}
+    </button>
+  );
+}
+
+/* ── PropertyRow ── */
+interface PropertyRowProps {
+  property: SchemaProperty;
+  depth: number;
+  onUpdate: (
+    id: string,
+    updater: (p: SchemaProperty) => SchemaProperty,
+  ) => void;
+  onRemove: (id: string) => void;
+  onAddChild: (parentId: string) => void;
+  onAddEnumValue: (id: string) => void;
+  onUpdateEnumValue: (id: string, index: number, value: string) => void;
+  onRemoveEnumValue: (id: string, index: number) => void;
+}
+
+function PropertyRow({
+  property,
+  depth,
+  onUpdate,
+  onRemove,
+  onAddChild,
+  onAddEnumValue,
+  onUpdateEnumValue,
+  onRemoveEnumValue,
+}: PropertyRowProps) {
+  return (
+    <div>
+      <div className="flex items-center gap-2">
+        <input
+          type="text"
+          value={property.name}
+          onChange={(e) =>
+            onUpdate(property.id, (p) => ({ ...p, name: e.target.value }))
+          }
+          placeholder="name"
+          className="flex-1 min-w-0 h-9 px-3 border rounded-md text-sm"
+          style={{
+            backgroundColor: colors.bg.primary,
+            borderColor: colors.border,
+            color: colors.text.primary,
+          }}
+        />
+        <div className="relative flex-shrink-0">
+          <select
+            value={property.type}
+            onChange={(e) => {
+              const t = e.target.value as SchemaPropertyType;
+              onUpdate(property.id, (p) => ({
+                ...p,
+                type: t,
+                children: t === "object" ? p.children : [],
+                enumValues:
+                  t === "enum"
+                    ? p.enumValues.length > 0
+                      ? p.enumValues
+                      : [""]
+                    : [],
+              }));
+            }}
+            className="appearance-none h-9 pl-3 pr-7 border rounded-md text-sm cursor-pointer"
+            style={{
+              backgroundColor: colors.bg.primary,
+              borderColor: colors.border,
+              color: colors.text.primary,
+              minWidth: "110px",
+            }}
+          >
+            {TYPE_OPTIONS.map((option) => (
+              <option key={option.value} value={option.value}>
+                {option.label}
+              </option>
+            ))}
+          </select>
+          <svg
+            className="absolute right-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 pointer-events-none"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+            style={{ color: colors.text.secondary }}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+        </div>
+        <ActionBtn
+          active={property.isArray}
+          onClick={() =>
+            onUpdate(property.id, (p) => ({ ...p, isArray: !p.isArray }))
+          }
+          title={property.isArray ? "Remove array wrapper" : "Make array"}
+        >
+          <span className="text-xs font-mono font-bold leading-none">[]</span>
+        </ActionBtn>
+        <ActionBtn
+          active={property.isRequired}
+          onClick={() =>
+            onUpdate(property.id, (p) => ({ ...p, isRequired: !p.isRequired }))
+          }
+          title={property.isRequired ? "Mark optional" : "Mark required"}
+        >
+          <span
+            className="material-symbols-outlined"
+            style={{ fontSize: "18px" }}
+          >
+            asterisk
+          </span>
+        </ActionBtn>
+        <button
+          onClick={() => onRemove(property.id)}
+          className="w-8 h-8 flex items-center justify-center rounded-md transition-colors flex-shrink-0 cursor-pointer"
+          style={{ color: colors.text.secondary }}
+          title="Delete"
+        >
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={1.5}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+            />
+          </svg>
+        </button>
+      </div>
+
+      {property.type === "enum" && (
+        <div className="ml-3 mt-2 space-y-1.5">
+          {property.enumValues.map((val, idx) => (
+            <div key={idx} className="flex items-center gap-2">
+              <input
+                type="text"
+                value={val}
+                onChange={(e) =>
+                  onUpdateEnumValue(property.id, idx, e.target.value)
+                }
+                placeholder={`value ${idx + 1}`}
+                className="h-8 px-3 border rounded-md text-sm max-w-[240px]"
+                style={{
+                  backgroundColor: colors.bg.primary,
+                  borderColor: colors.border,
+                  color: colors.text.primary,
+                }}
+              />
+              <button
+                onClick={() => onRemoveEnumValue(property.id, idx)}
+                className="w-7 h-7 flex items-center justify-center rounded-md cursor-pointer"
+                style={{ color: colors.text.secondary }}
+              >
+                <svg
+                  className="w-3.5 h-3.5"
+                  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>
+          ))}
+          <button
+            onClick={() => onAddEnumValue(property.id)}
+            className="text-sm font-bold mt-0.5 cursor-pointer"
+            style={{ color: colors.text.primary }}
+          >
+            + Add enum value
+          </button>
+        </div>
+      )}
+
+      {property.type === "object" && (
+        <div className="mt-2 ml-6 space-y-3">
+          {property.children.map((child) => (
+            <PropertyRow
+              key={child.id}
+              property={child}
+              depth={depth + 1}
+              onUpdate={onUpdate}
+              onRemove={onRemove}
+              onAddChild={onAddChild}
+              onAddEnumValue={onAddEnumValue}
+              onUpdateEnumValue={onUpdateEnumValue}
+              onRemoveEnumValue={onRemoveEnumValue}
+            />
+          ))}
+          <button
+            onClick={() => onAddChild(property.id)}
+            className="text-sm font-bold cursor-pointer"
+            style={{ color: colors.text.primary }}
+          >
+            + Add nested property
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/* ── Modal wrapper ── */
+interface OutputSchemaModalProps {
+  open: boolean;
+  onClose: () => void;
+  schema: SchemaProperty[];
+  setSchema: (schema: SchemaProperty[]) => void;
+}
+
+export function OutputSchemaModal({
+  open,
+  onClose,
+  schema,
+  setSchema,
+}: OutputSchemaModalProps) {
+  const [draftSchema, setDraftSchema] = useState<SchemaProperty[]>([]);
+
+  useEffect(() => {
+    if (open) {
+      setDraftSchema(JSON.parse(JSON.stringify(schema)) as SchemaProperty[]);
+    }
+  }, [open]);
+
+  if (!open) return null;
+
+  const handleSave = () => {
+    setSchema(draftSchema);
+    onClose();
+  };
+
+  const handleReset = () => {
+    setDraftSchema([createProperty()]);
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div
+        className="absolute inset-0"
+        style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
+        onClick={onClose}
+      />
+      <div
+        className="relative flex flex-col rounded-2xl shadow-2xl"
+        style={{
+          backgroundColor: colors.bg.primary,
+          width: "720px",
+          maxWidth: "90vw",
+          maxHeight: "85vh",
+        }}
+      >
+        <div className="flex items-center justify-between px-6 pt-6 pb-2">
+          <h2
+            className="text-lg font-semibold"
+            style={{ color: colors.text.primary }}
+          >
+            Response format
+          </h2>
+          <button
+            onClick={onClose}
+            className="w-8 h-8 flex items-center justify-center rounded-full cursor-pointer"
+            style={{ color: colors.text.secondary }}
+          >
+            <svg
+              className="w-5 h-5"
+              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>
+
+        <p className="px-6 text-sm" style={{ color: colors.text.secondary }}>
+          Define the structure of the AI response. Use the visual editor or
+          switch to JSON.
+        </p>
+
+        <div className="flex-1 overflow-y-auto px-6 py-4">
+          <OutputSchemaEditorInner
+            schema={draftSchema}
+            setSchema={setDraftSchema}
+          />
+        </div>
+
+        <div
+          className="flex items-center justify-end gap-3 px-6 py-4 border-t"
+          style={{ borderColor: colors.border }}
+        >
+          <button
+            onClick={handleReset}
+            className="cursor-pointer rounded-lg border px-5 py-2 text-sm font-medium"
+            style={{
+              borderColor: colors.border,
+              color: colors.text.primary,
+              backgroundColor: colors.bg.primary,
+            }}
+          >
+            Reset
+          </button>
+          <button
+            onClick={handleSave}
+            className="cursor-pointer rounded-lg px-5 py-2 text-sm font-medium"
+            style={{ backgroundColor: colors.accent.primary, color: "#fff" }}
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ── Inner editor (used by both modal and standalone) ── */
+function OutputSchemaEditorInner({
+  schema,
+  setSchema,
+}: {
+  schema: SchemaProperty[];
+  setSchema: (schema: SchemaProperty[]) => void;
+}) {
+  useMaterialSymbols();
+
+  const [editorMode, setEditorMode] = useState<"visual" | "code">("visual");
+  const [codeValue, setCodeValue] = useState(() => {
+    const json = toJsonSchema(schema);
+    return json ? JSON.stringify(json, null, 2) : "";
+  });
+  const [codeError, setCodeError] = useState<string | null>(null);
+  const [codeIsValid, setCodeIsValid] = useState(false);
+  const hasInitializedDefaultFieldRef = useRef(false);
+  const hasUserClearedFromJsonRef = useRef(false);
+
+  const handleUpdate = useCallback(
+    (id: string, updater: (p: SchemaProperty) => SchemaProperty) => {
+      setSchema(updateInTree(schema, id, updater));
+    },
+    [schema, setSchema],
+  );
+
+  const handleRemove = useCallback(
+    (id: string) => {
+      const nextSchema = removeFromTree(schema, id);
+      setSchema(nextSchema.length > 0 ? nextSchema : [createProperty()]);
+    },
+    [schema, setSchema],
+  );
+  const handleAddChild = useCallback(
+    (parentId: string) => {
+      setSchema(addChildToTree(schema, parentId));
+    },
+    [schema, setSchema],
+  );
+  const handleAddEnumValue = useCallback(
+    (id: string) => {
+      setSchema(
+        updateInTree(schema, id, (p) => ({
+          ...p,
+          enumValues: [...p.enumValues, ""],
+        })),
+      );
+    },
+    [schema, setSchema],
+  );
+  const handleUpdateEnumValue = useCallback(
+    (id: string, index: number, value: string) => {
+      setSchema(
+        updateInTree(schema, id, (p) => ({
+          ...p,
+          enumValues: p.enumValues.map((v, i) => (i === index ? value : v)),
+        })),
+      );
+    },
+    [schema, setSchema],
+  );
+  const handleRemoveEnumValue = useCallback(
+    (id: string, index: number) => {
+      setSchema(
+        updateInTree(schema, id, (p) => ({
+          ...p,
+          enumValues: p.enumValues.filter((_, i) => i !== index),
+        })),
+      );
+    },
+    [schema, setSchema],
+  );
+
+  useEffect(() => {
+    if (editorMode !== "visual") {
+      return;
+    }
+
+    if (schema.length > 0) {
+      hasInitializedDefaultFieldRef.current = true;
+      hasUserClearedFromJsonRef.current = false;
+      return;
+    }
+
+    if (hasUserClearedFromJsonRef.current) {
+      return;
+    }
+
+    if (!hasInitializedDefaultFieldRef.current || schema.length === 0) {
+      hasInitializedDefaultFieldRef.current = true;
+      setSchema([createProperty()]);
+    }
+  }, [editorMode, schema.length, setSchema]);
+
+  /* Real-time validation + debounced auto-apply */
+  useEffect(() => {
+    if (editorMode !== "code") return;
+    const timer = setTimeout(() => {
+      if (!codeValue.trim()) {
+        setCodeError(null);
+        setCodeIsValid(false);
+        setSchema([]);
+        return;
+      }
+      const result = validateOpenApiSchema(codeValue);
+      if (result.valid) {
+        setCodeError(null);
+        setCodeIsValid(true);
+        if (result.schema) setSchema(fromJsonSchema(result.schema));
+        else setSchema([]);
+      } else {
+        setCodeError(result.error);
+        setCodeIsValid(false);
+      }
+    }, 400);
+    return () => clearTimeout(timer);
+  }, [codeValue, editorMode]);
+
+  const switchToVisual = () => {
+    const result = validateOpenApiSchema(codeValue);
+    if (!result.valid) {
+      setCodeError(result.error);
+      return;
+    }
+    if (result.schema) {
+      hasUserClearedFromJsonRef.current = false;
+      setSchema(fromJsonSchema(result.schema));
+    } else {
+      hasUserClearedFromJsonRef.current = true;
+      setSchema([]);
+    }
+    setCodeError(null);
+    setEditorMode("visual");
+  };
+
+  const switchToCode = () => {
+    const json = toJsonSchema(schema);
+    setCodeValue(json ? JSON.stringify(json, null, 2) : "");
+    setCodeError(null);
+    setCodeIsValid(false);
+    setEditorMode("code");
+  };
+
+  return (
+    <div className="space-y-5">
+      <div
+        className="flex items-center gap-1 p-1 rounded-lg w-fit"
+        style={{ backgroundColor: colors.bg.secondary }}
+      >
+        <button
+          onClick={() => (editorMode === "code" ? switchToVisual() : undefined)}
+          className="cursor-pointer px-4 py-1.5 rounded-md text-sm font-medium transition-all"
+          style={{
+            backgroundColor:
+              editorMode === "visual" ? colors.bg.primary : "transparent",
+            color:
+              editorMode === "visual"
+                ? colors.text.primary
+                : colors.text.secondary,
+            boxShadow:
+              editorMode === "visual" ? "0 1px 3px rgba(0,0,0,0.08)" : "none",
+          }}
+        >
+          Visual Editor
+        </button>
+        <button
+          onClick={() => (editorMode !== "code" ? switchToCode() : undefined)}
+          className="cursor-pointer px-4 py-1.5 rounded-md text-sm font-medium transition-all"
+          style={{
+            backgroundColor:
+              editorMode === "code" ? colors.bg.primary : "transparent",
+            color:
+              editorMode === "code"
+                ? colors.text.primary
+                : colors.text.secondary,
+            boxShadow:
+              editorMode === "code" ? "0 1px 3px rgba(0,0,0,0.08)" : "none",
+          }}
+        >
+          JSON
+        </button>
+      </div>
+
+      {editorMode === "visual" && (
+        <div className="space-y-3">
+          {schema.map((prop) => (
+            <PropertyRow
+              key={prop.id}
+              property={prop}
+              depth={0}
+              onUpdate={handleUpdate}
+              onRemove={handleRemove}
+              onAddChild={handleAddChild}
+              onAddEnumValue={handleAddEnumValue}
+              onUpdateEnumValue={handleUpdateEnumValue}
+              onRemoveEnumValue={handleRemoveEnumValue}
+            />
+          ))}
+          <button
+            onClick={() => setSchema([...schema, createProperty()])}
+            className="text-sm font-bold cursor-pointer px-4 py-2 rounded-lg"
+            style={{ color: "#fff", backgroundColor: colors.accent.primary }}
+          >
+            + Add field
+          </button>
+        </div>
+      )}
+
+      {editorMode === "code" && (
+        <JsonEditor
+          value={codeValue}
+          onChange={setCodeValue}
+          error={codeError}
+          isValid={codeIsValid}
+          minHeight={420}
+          placeholder={`{\n  "type": "object",\n  "properties": {\n    "score": { "type": "number" },\n    "reason": { "type": "string" }\n  },\n  "required": ["score", "reason"]\n}`}
+        />
+      )}
+    </div>
+  );
+}
+
+/* ── Public standalone editor (kept for backward compat) ── */
+export function OutputSchemaEditor({
+  schema,
+  setSchema,
+  title = "Response Format",
+  description,
+}: OutputSchemaEditorProps) {
+  return (
+    <div className="space-y-5">
+      {title && (
+        <div>
+          <h2
+            className="text-lg font-semibold"
+            style={{ color: colors.text.primary }}
+          >
+            {title}
+          </h2>
+          {description ? (
+            <p
+              className="text-xs mt-0.5"
+              style={{ color: colors.text.secondary }}
+            >
+              {description}
+            </p>
+          ) : null}
+        </div>
+      )}
+      <OutputSchemaEditorInner schema={schema} setSchema={setSchema} />
+    </div>
+  );
+}
+
+export default function OutputSchemaStep({
+  schema,
+  setSchema,
+  onNext,
+  onBack,
+}: OutputSchemaStepProps) {
+  return (
+    <div className="mx-auto flex min-h-full max-w-2xl flex-col">
+      <div className="flex-1 space-y-5 pb-16">
+        <OutputSchemaEditor
+          schema={schema}
+          setSchema={setSchema}
+          description="Leave this empty for free text, or add fields if you want a structured response."
+        />
+      </div>
+
+      {/* Navigation */}
+      <div
+        className="sticky bottom-0 z-10 flex items-center justify-between border-t py-2"
+        style={{
+          backgroundColor: colors.bg.secondary,
+          borderColor: colors.border,
+          marginLeft: "-1.5rem",
+          marginRight: "-1.5rem",
+          paddingLeft: "1.5rem",
+          paddingRight: "1.5rem",
+        }}
+      >
+        <button
+          onClick={onBack}
+          className="cursor-pointer rounded-lg border px-6 py-2.5 text-sm font-medium flex items-center gap-2"
+          style={{
+            borderColor: colors.border,
+            color: colors.text.primary,
+            backgroundColor: colors.bg.primary,
+          }}
+        >
+          <svg
+            className="w-3.5 h-3.5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M15 19l-7-7 7-7"
+            />
+          </svg>
+          Back
+        </button>
+        <button
+          onClick={onNext}
+          className="cursor-pointer rounded-lg px-6 py-2.5 text-sm font-medium"
+          style={{
+            backgroundColor: colors.accent.primary,
+            color: "#fff",
+            border: `1px solid ${colors.accent.primary}`,
+          }}
+        >
+          Next: Review
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/assessment/components/PromptAndConfigStep.tsx b/app/assessment/components/PromptAndConfigStep.tsx
new file mode 100644
index 0000000..9d94d43
--- /dev/null
+++ b/app/assessment/components/PromptAndConfigStep.tsx
@@ -0,0 +1,1820 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { colors } from "@/app/lib/colors";
+import {
+  ConfigBlob,
+  ConfigPublic,
+  ConfigVersionItems,
+} from "@/app/lib/configTypes";
+import { formatRelativeTime } from "@/app/lib/utils";
+import { ConfigSelection, MAX_CONFIGS, SchemaProperty } from "../types";
+import { OutputSchemaModal } from "./OutputSchemaStep";
+import {
+  buildDefaultParams,
+  ConfigParamDefinition,
+  DEFAULT_CONFIG,
+  getDefaultModelForProvider,
+  getModelConfigDefinition,
+  getModelsByProvider,
+  PAGE_SIZE,
+  PROVIDER_OPTIONS,
+} from "../config/constants";
+import {
+  fetchConfigPage,
+  fetchConfigSelection,
+  fetchConfigVersionsPage,
+  invalidateAssessmentConfigCache,
+  saveAssessmentConfig,
+} from "../config/api";
+import { useToast } from "@/app/components/Toast";
+
+interface PromptAndConfigStepProps {
+  textColumns: string[];
+  sampleRow: Record<string, string>;
+  promptTemplate: string;
+  setPromptTemplate: (template: string) => void;
+  configs: ConfigSelection[];
+  setConfigs: (configs: ConfigSelection[]) => void;
+  outputSchema: SchemaProperty[];
+  setOutputSchema: (schema: SchemaProperty[]) => void;
+  onNext: () => void;
+  onBack: () => void;
+}
+
+interface VersionListState {
+  items: ConfigVersionItems[];
+  isLoading: boolean;
+  error: string | null;
+  hasMore: boolean;
+  nextSkip: number;
+}
+
+type ConfigMode = "existing" | "create";
+
+const VERSION_PAGE_SIZE = 8;
+
+function buildInitialDraft(): ConfigBlob {
+  return JSON.parse(JSON.stringify(DEFAULT_CONFIG)) as ConfigBlob;
+}
+
+function buildInitialVersionState(): VersionListState {
+  return {
+    items: [],
+    isLoading: false,
+    error: null,
+    hasMore: true,
+    nextSkip: 0,
+  };
+}
+
+export default function PromptAndConfigStep({
+  textColumns,
+  sampleRow,
+  promptTemplate,
+  setPromptTemplate,
+  configs,
+  setConfigs,
+  outputSchema,
+  setOutputSchema,
+  onNext,
+  onBack,
+}: PromptAndConfigStepProps) {
+  const toast = useToast();
+
+  // ── Prompt editor state ──
+  const [previewMode, setPreviewMode] = useState(false);
+  const [mentionQuery, setMentionQuery] = useState<string | null>(null);
+  const [mentionIndex, setMentionIndex] = useState(0);
+  const [mentionPos, setMentionPos] = useState<{
+    top: number;
+    left: number;
+  } | null>(null);
+  const [mentionStart, setMentionStart] = useState<number | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const mirrorRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // ── Config state ──
+  const [configMode, setConfigMode] = useState<ConfigMode>("existing");
+  const [configCards, setConfigCards] = useState<ConfigPublic[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isLoadingConfigs, setIsLoadingConfigs] = useState(true);
+  const [hasMoreConfigs, setHasMoreConfigs] = useState(true);
+  const [nextConfigSkip, setNextConfigSkip] = useState(0);
+  const [expandedConfigId, setExpandedConfigId] = useState<string | null>(null);
+  const [versionStateByConfig, setVersionStateByConfig] = useState<
+    Record<string, VersionListState>
+  >({});
+  const [loadingSelectionKeys, setLoadingSelectionKeys] = useState<
+    Record<string, boolean>
+  >({});
+  const hasLoadedInitialConfigsRef = useRef(false);
+
+  // ── Create new config state ──
+  const [draft, setDraft] = useState<ConfigBlob>(() => buildInitialDraft());
+  const [configName, setConfigName] = useState("");
+  const [commitMessage, setCommitMessage] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+
+  const draftParams = draft.completion.params as Record<
+    string,
+    string | number | undefined
+  >;
+  const currentProvider = draft.completion.provider ?? "openai";
+  const providerModels = useMemo(
+    () => getModelsByProvider(currentProvider),
+    [currentProvider],
+  );
+  const currentModel = String(draftParams.model || providerModels[0]?.value);
+  const currentParamDefs = useMemo(
+    () => getModelConfigDefinition(currentModel),
+    [currentModel],
+  );
+
+  // ── Schema modal ──
+  const [schemaModalOpen, setSchemaModalOpen] = useState(false);
+  const [systemInstructionSheetOpen, setSystemInstructionSheetOpen] =
+    useState(false);
+
+  // ══════════════════════════════════════════════════════════
+  // PROMPT EDITOR LOGIC
+  // ══════════════════════════════════════════════════════════
+
+  const mentionOptions = useMemo(() => {
+    if (mentionQuery === null) return [];
+    const normalized = mentionQuery.toLowerCase();
+    return textColumns.filter((col) => col.toLowerCase().includes(normalized));
+  }, [mentionQuery, textColumns]);
+
+  const computeCaretPosition = useCallback(() => {
+    const textarea = textareaRef.current;
+    const mirror = mirrorRef.current;
+    if (!textarea || !mirror) return null;
+
+    const style = window.getComputedStyle(textarea);
+    [
+      "font-family",
+      "font-size",
+      "font-weight",
+      "line-height",
+      "letter-spacing",
+      "padding-top",
+      "padding-left",
+      "padding-right",
+      "padding-bottom",
+      "border-top-width",
+      "border-left-width",
+      "word-wrap",
+      "overflow-wrap",
+      "tab-size",
+      "box-sizing",
+    ].forEach((prop) => {
+      mirror.style.setProperty(prop, style.getPropertyValue(prop));
+    });
+    mirror.style.width = `${textarea.clientWidth}px`;
+    mirror.style.whiteSpace = "pre-wrap";
+    mirror.style.wordWrap = "break-word";
+    mirror.style.position = "absolute";
+    mirror.style.visibility = "hidden";
+    mirror.style.left = "0";
+    mirror.style.top = "0";
+
+    mirror.textContent = textarea.value.substring(0, textarea.selectionStart);
+    const marker = document.createElement("span");
+    marker.textContent = "\u200b";
+    mirror.appendChild(marker);
+
+    const markerRect = marker.getBoundingClientRect();
+    const mirrorRect = mirror.getBoundingClientRect();
+
+    return {
+      top:
+        markerRect.top -
+        mirrorRect.top -
+        textarea.scrollTop +
+        parseInt(style.lineHeight, 10) +
+        6,
+      left: markerRect.left - mirrorRect.left,
+    };
+  }, []);
+
+  const closeMention = useCallback(() => {
+    setMentionQuery(null);
+    setMentionStart(null);
+    setMentionPos(null);
+  }, []);
+
+  const handleInput = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    const cursor = textarea.selectionStart;
+    const value = textarea.value;
+    let index = cursor - 1;
+    while (
+      index >= 0 &&
+      value[index] !== "@" &&
+      value[index] !== " " &&
+      value[index] !== "\n" &&
+      value[index] !== "\t"
+    ) {
+      index -= 1;
+    }
+    if (index >= 0 && value[index] === "@") {
+      setMentionQuery(value.substring(index + 1, cursor));
+      setMentionStart(index);
+      setMentionIndex(0);
+      setMentionPos(computeCaretPosition());
+      return;
+    }
+    closeMention();
+  }, [closeMention, computeCaretPosition]);
+
+  const insertMention = useCallback(
+    (column: string) => {
+      const textarea = textareaRef.current;
+      if (!textarea || mentionStart === null) return;
+      const cursor = textarea.selectionStart;
+      const nextValue = `${promptTemplate.substring(0, mentionStart)}{${column}}${promptTemplate.substring(cursor)}`;
+      const nextCursor = mentionStart + column.length + 2;
+      setPromptTemplate(nextValue);
+      closeMention();
+      setTimeout(() => {
+        textarea.focus();
+        textarea.setSelectionRange(nextCursor, nextCursor);
+      }, 0);
+    },
+    [closeMention, mentionStart, promptTemplate, setPromptTemplate],
+  );
+
+  const insertPlaceholder = (column: string) => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const nextValue = `${promptTemplate.slice(0, start)}{${column}}${promptTemplate.slice(end)}`;
+    const nextCursor = start + column.length + 2;
+    setPromptTemplate(nextValue);
+    setTimeout(() => {
+      textarea.focus();
+      textarea.setSelectionRange(nextCursor, nextCursor);
+    }, 0);
+  };
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (mentionQuery === null || mentionOptions.length === 0) return;
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setMentionIndex((prev) => (prev + 1) % mentionOptions.length);
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setMentionIndex(
+          (prev) => (prev - 1 + mentionOptions.length) % mentionOptions.length,
+        );
+      } else if (event.key === "Enter" || event.key === "Tab") {
+        event.preventDefault();
+        insertMention(mentionOptions[mentionIndex]);
+      } else if (event.key === "Escape") {
+        closeMention();
+      }
+    },
+    [closeMention, insertMention, mentionIndex, mentionOptions, mentionQuery],
+  );
+
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (
+        textareaRef.current &&
+        !textareaRef.current.contains(target) &&
+        dropdownRef.current &&
+        !dropdownRef.current.contains(target)
+      ) {
+        closeMention();
+      }
+    };
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [closeMention]);
+
+  useEffect(() => {
+    if (dropdownRef.current && mentionOptions.length > 0) {
+      const active = dropdownRef.current.children[mentionIndex] as
+        | HTMLElement
+        | undefined;
+      active?.scrollIntoView({ block: "nearest" });
+    }
+  }, [mentionIndex, mentionOptions.length]);
+
+  const usedColumns = useMemo(
+    () => textColumns.filter((col) => promptTemplate.includes(`{${col}}`)),
+    [promptTemplate, textColumns],
+  );
+  const orderedColumns = useMemo(() => {
+    const used = textColumns.filter((col) => usedColumns.includes(col));
+    const unused = textColumns.filter((col) => !usedColumns.includes(col));
+    return [...used, ...unused];
+  }, [textColumns, usedColumns]);
+
+  const previewText = useMemo(() => {
+    if (!promptTemplate.trim()) return "";
+    let next = promptTemplate;
+    textColumns.forEach((col) => {
+      const safe = col.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      next = next.replace(
+        new RegExp(`\\{${safe}\\}`, "g"),
+        sampleRow[col] || "",
+      );
+    });
+    return next;
+  }, [promptTemplate, sampleRow, textColumns]);
+
+  // ══════════════════════════════════════════════════════════
+  // CONFIG SELECTION LOGIC (from ConfigurationStep)
+  // ══════════════════════════════════════════════════════════
+
+  const isSelected = useCallback(
+    (configId: string, version: number) =>
+      configs.some(
+        (c) => c.config_id === configId && c.config_version === version,
+      ),
+    [configs],
+  );
+
+  const addSelection = useCallback(
+    (selection: ConfigSelection) => {
+      if (
+        configs.some(
+          (c) =>
+            c.config_id === selection.config_id &&
+            c.config_version === selection.config_version,
+        )
+      ) {
+        toast.error("This configuration version is already selected");
+        return;
+      }
+      if (configs.length >= MAX_CONFIGS) {
+        toast.error(`You can select up to ${MAX_CONFIGS} configurations`);
+        return;
+      }
+      setConfigs([...configs, selection]);
+    },
+    [configs, setConfigs, toast],
+  );
+
+  const removeSelection = useCallback(
+    (configId: string, version: number) => {
+      setConfigs(
+        configs.filter(
+          (c) => !(c.config_id === configId && c.config_version === version),
+        ),
+      );
+    },
+    [configs, setConfigs],
+  );
+
+  const toggleVersionSelection = useCallback(
+    async (config: ConfigPublic, version: number) => {
+      const key = `${config.id}:${version}`;
+      if (isSelected(config.id, version)) {
+        removeSelection(config.id, version);
+        return;
+      }
+      setLoadingSelectionKeys((prev) => ({ ...prev, [key]: true }));
+      try {
+        const selection = await fetchConfigSelection(config, version);
+        addSelection(selection);
+      } catch {
+        toast.error("Failed to load configuration details");
+      } finally {
+        setLoadingSelectionKeys((prev) => ({ ...prev, [key]: false }));
+      }
+    },
+    [addSelection, isSelected, removeSelection, toast],
+  );
+
+  // Load configs
+  const loadConfigs = useCallback(
+    async (skip: number, replace: boolean) => {
+      if (replace) setIsLoadingConfigs(true);
+      try {
+        const result = await fetchConfigPage({ skip, limit: PAGE_SIZE });
+        setConfigCards((prev) =>
+          replace ? result.items : [...prev, ...result.items],
+        );
+        setHasMoreConfigs(result.hasMore);
+        setNextConfigSkip(result.nextSkip);
+      } catch {
+        toast.error("Failed to load configurations");
+      } finally {
+        setIsLoadingConfigs(false);
+      }
+    },
+    [toast],
+  );
+
+  useEffect(() => {
+    if (!hasLoadedInitialConfigsRef.current) {
+      hasLoadedInitialConfigsRef.current = true;
+      void loadConfigs(0, true);
+    }
+  }, [loadConfigs]);
+
+  const filteredConfigCards = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase();
+    if (!query) return configCards;
+    return configCards.filter((c) =>
+      `${c.name} ${c.description || ""}`.toLowerCase().includes(query),
+    );
+  }, [configCards, searchQuery]);
+
+  // Versions
+  const loadVersions = useCallback(async (configId: string, skip: number) => {
+    setVersionStateByConfig((prev) => ({
+      ...prev,
+      [configId]: {
+        ...(prev[configId] ?? buildInitialVersionState()),
+        isLoading: true,
+        error: null,
+      },
+    }));
+    try {
+      const result = await fetchConfigVersionsPage(configId, {
+        skip,
+        limit: VERSION_PAGE_SIZE,
+      });
+      setVersionStateByConfig((prev) => {
+        const existing = prev[configId] ?? buildInitialVersionState();
+        return {
+          ...prev,
+          [configId]: {
+            items:
+              skip === 0 ? result.items : [...existing.items, ...result.items],
+            isLoading: false,
+            error: null,
+            hasMore: result.hasMore,
+            nextSkip: result.nextSkip,
+          },
+        };
+      });
+    } catch {
+      setVersionStateByConfig((prev) => ({
+        ...prev,
+        [configId]: {
+          ...(prev[configId] ?? buildInitialVersionState()),
+          isLoading: false,
+          error: "Failed to load versions",
+        },
+      }));
+    }
+  }, []);
+
+  const toggleConfigExpansion = useCallback(
+    (configId: string) => {
+      if (expandedConfigId === configId) {
+        setExpandedConfigId(null);
+        return;
+      }
+      setExpandedConfigId(configId);
+      if (!versionStateByConfig[configId]) {
+        void loadVersions(configId, 0);
+      }
+    },
+    [expandedConfigId, loadVersions, versionStateByConfig],
+  );
+
+  // Create new config
+  const updateDraftParam = (key: string, value: string | number) => {
+    setDraft((prev) => ({
+      ...prev,
+      completion: {
+        ...prev.completion,
+        params: { ...prev.completion.params, [key]: value },
+      },
+    }));
+  };
+
+  const handleModelChange = (modelName: string) => {
+    setDraft((prev) => ({
+      ...prev,
+      completion: {
+        ...prev.completion,
+        params: {
+          instructions: String(prev.completion.params.instructions || ""),
+          model: modelName,
+          ...buildDefaultParams(modelName),
+        },
+      },
+    }));
+  };
+
+  const handleCreateAndAdd = async () => {
+    if (!configName.trim()) {
+      toast.error("Configuration name is required");
+      return;
+    }
+    setIsSaving(true);
+    try {
+      const saved = await saveAssessmentConfig({
+        configName: configName.trim(),
+        commitMessage: commitMessage.trim(),
+        configBlob: draft,
+      });
+      invalidateAssessmentConfigCache();
+      addSelection({
+        config_id: saved.config_id,
+        config_version: saved.config_version,
+        name: configName.trim(),
+        provider: draft.completion.provider,
+        model: currentModel,
+      });
+      setDraft(buildInitialDraft());
+      setConfigName("");
+      setCommitMessage("");
+      setConfigMode("existing");
+      toast.success("Configuration saved and added!");
+      void loadConfigs(0, true);
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : "Failed to save configuration",
+      );
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const renderParamControl = (
+    paramKey: string,
+    definition: ConfigParamDefinition,
+  ) => {
+    const value = draftParams[paramKey] ?? definition.default;
+    if (definition.type === "enum" && definition.options) {
+      return (
+        <select
+          value={String(value)}
+          onChange={(e) => updateDraftParam(paramKey, e.target.value)}
+          className="w-full rounded-xl border px-4 py-3 text-sm outline-none"
+          style={{
+            borderColor: colors.border,
+            backgroundColor: colors.bg.primary,
+            color: colors.text.primary,
+          }}
+        >
+          {definition.options.map((opt) => (
+            <option key={opt} value={opt}>
+              {opt}
+            </option>
+          ))}
+        </select>
+      );
+    }
+    const numValue = typeof value === "number" ? value : Number(value);
+    return (
+      <div className="flex items-center gap-3">
+        <input
+          type="range"
+          min={definition.min ?? 0}
+          max={definition.max ?? 2}
+          step={definition.type === "int" ? 1 : 0.01}
+          value={numValue}
+          onChange={(e) =>
+            updateDraftParam(paramKey, parseFloat(e.target.value))
+          }
+          className="flex-1"
+        />
+        <span
+          className="w-12 text-right text-sm font-mono"
+          style={{ color: colors.text.primary }}
+        >
+          {definition.type === "int" ? numValue : numValue.toFixed(2)}
+        </span>
+      </div>
+    );
+  };
+
+  const namedSchemaFields = outputSchema.filter((field) => field.name.trim());
+  const hasConfiguredResponseFormat = namedSchemaFields.length > 0;
+  // Response format is mandatory and at least one config must be selected.
+  const canProceed = configs.length > 0 && hasConfiguredResponseFormat;
+  const nextBlockerMessage =
+    configs.length === 0
+      ? "Select at least one configuration to continue"
+      : !hasConfiguredResponseFormat
+        ? "Set response format to continue"
+        : "";
+  const responseSummary =
+    namedSchemaFields.length > 0
+      ? `${namedSchemaFields.length} fields`
+      : "Not set";
+  const promptStatus = promptTemplate.trim()
+    ? `${usedColumns.length} placeholders`
+    : "Empty";
+
+  useEffect(() => {
+    if (configMode !== "create") {
+      setSystemInstructionSheetOpen(false);
+    }
+  }, [configMode]);
+
+  return (
+    <div className="mx-auto flex min-h-full max-w-7xl flex-col">
+      <div className="flex-1 pb-20">
+        <div className="mb-6 flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
+          <div>
+            <h2
+              className="text-xl font-semibold"
+              style={{ color: colors.text.primary }}
+            >
+              Prompt & Config
+            </h2>
+            <p
+              className="mt-1 text-sm"
+              style={{ color: colors.text.secondary }}
+            >
+              Write the task on the left. Tune behavior and output on the right.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <span
+              className="inline-flex items-center rounded-full border px-3 py-1.5 text-xs font-medium"
+              style={{
+                borderColor: colors.border,
+                backgroundColor: colors.bg.primary,
+                color: colors.text.secondary,
+              }}
+            >
+              Prompt: {promptStatus}
+            </span>
+            <span
+              className="inline-flex items-center rounded-full border px-3 py-1.5 text-xs font-medium"
+              style={{
+                borderColor: colors.border,
+                backgroundColor: colors.bg.primary,
+                color: colors.text.secondary,
+              }}
+            >
+              Behaviors: {configs.length}/{MAX_CONFIGS}
+            </span>
+            <span
+              className="inline-flex items-center rounded-full border px-3 py-1.5 text-xs font-medium"
+              style={{
+                borderColor: colors.border,
+                backgroundColor: colors.bg.primary,
+                color: colors.text.secondary,
+              }}
+            >
+              Output: {responseSummary}
+            </span>
+          </div>
+        </div>
+
+        <div className="grid gap-8 xl:grid-cols-[minmax(0,1fr)_minmax(480px,1.35fr)]">
+          <section className="min-w-0">
+            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+              <div>
+                <div
+                  className="text-base font-semibold"
+                  style={{ color: colors.text.primary }}
+                >
+                  User Prompt
+                </div>
+                <div
+                  className="mt-1 text-xs"
+                  style={{ color: colors.text.secondary }}
+                >
+                  Use `@` or tap a column chip to insert placeholders.
+                </div>
+              </div>
+              <div
+                className="flex items-center gap-1 rounded-xl p-1"
+                style={{ backgroundColor: colors.bg.primary }}
+              >
+                <button
+                  onClick={() => setPreviewMode(false)}
+                  className="cursor-pointer rounded-lg px-3 py-1.5 text-xs font-medium transition-all"
+                  style={{
+                    backgroundColor: !previewMode
+                      ? colors.accent.primary
+                      : "transparent",
+                    color: !previewMode ? "#ffffff" : colors.text.secondary,
+                  }}
+                >
+                  Edit
+                </button>
+                <button
+                  onClick={() => setPreviewMode(true)}
+                  className="cursor-pointer rounded-lg px-3 py-1.5 text-xs font-medium transition-all"
+                  style={{
+                    backgroundColor: previewMode
+                      ? colors.accent.primary
+                      : "transparent",
+                    color: previewMode ? "#ffffff" : colors.text.secondary,
+                  }}
+                >
+                  Preview
+                </button>
+              </div>
+            </div>
+
+            {!previewMode && (
+              <div className="mt-4 flex flex-wrap gap-2">
+                {orderedColumns.map((col) => {
+                  const isUsed = usedColumns.includes(col);
+                  return (
+                    <button
+                      key={col}
+                      type="button"
+                      onClick={() => insertPlaceholder(col)}
+                      className="cursor-pointer rounded-full border px-3 py-1.5 text-xs font-mono transition-colors"
+                      style={{
+                        backgroundColor: isUsed
+                          ? "rgba(22, 163, 74, 0.12)"
+                          : colors.bg.primary,
+                        borderColor: isUsed
+                          ? "rgba(22, 163, 74, 0.3)"
+                          : colors.border,
+                        color: isUsed ? "#166534" : colors.text.primary,
+                      }}
+                    >
+                      {`{${col}}`}
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+
+            <div className="mt-4">
+              {previewMode ? (
+                <div
+                  className="min-h-[460px] whitespace-pre-wrap break-words rounded-2xl border px-5 py-4 text-sm leading-7"
+                  style={{
+                    backgroundColor: colors.bg.secondary,
+                    borderColor: colors.border,
+                    color: colors.text.primary,
+                  }}
+                >
+                  {!promptTemplate.trim() ? (
+                    <span style={{ color: colors.text.secondary }}>
+                      Preview will appear here.
+                    </span>
+                  ) : Object.keys(sampleRow).length === 0 ? (
+                    <span style={{ color: colors.text.secondary }}>
+                      Sample data not available. Go back to Datasets and choose
+                      a row with values.
+                    </span>
+                  ) : (
+                    previewText || (
+                      <span style={{ color: colors.text.secondary }}>
+                        Preview will appear here.
+                      </span>
+                    )
+                  )}
+                </div>
+              ) : (
+                <div
+                  className="relative rounded-2xl border px-5 py-4"
+                  style={{
+                    borderColor: colors.border,
+                    backgroundColor: colors.bg.primary,
+                  }}
+                >
+                  <textarea
+                    ref={textareaRef}
+                    value={promptTemplate}
+                    onChange={(e) => {
+                      setPromptTemplate(e.target.value);
+                      setTimeout(handleInput, 0);
+                    }}
+                    onKeyDown={handleKeyDown}
+                    onSelect={handleInput}
+                    placeholder={`Describe what the AI should do.\n\nExample:\nEvaluate the student's answer.\nQuestion: {question}\nAnswer: {answer}\nContext: {context}`}
+                    className="min-h-[460px] w-full resize-y border-0 bg-transparent px-0 py-0 text-sm leading-7 outline-none"
+                    style={{ color: colors.text.primary }}
+                  />
+                  <div ref={mirrorRef} aria-hidden="true" />
+
+                  {mentionQuery !== null &&
+                    mentionOptions.length > 0 &&
+                    mentionPos && (
+                      <div
+                        ref={dropdownRef}
+                        className="absolute z-50 overflow-hidden rounded-xl border shadow-lg"
+                        style={{
+                          top: `${mentionPos.top + 16}px`,
+                          left: `${Math.max(16, Math.min(mentionPos.left + 16, 320))}px`,
+                          backgroundColor: colors.bg.primary,
+                          borderColor: colors.border,
+                          minWidth: "220px",
+                          maxHeight: "180px",
+                          overflowY: "auto",
+                        }}
+                      >
+                        {mentionOptions.map((col, idx) => (
+                          <button
+                            key={col}
+                            type="button"
+                            className="flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-left text-sm font-mono"
+                            style={{
+                              backgroundColor:
+                                idx === mentionIndex
+                                  ? colors.bg.secondary
+                                  : colors.bg.primary,
+                              color: colors.text.primary,
+                            }}
+                            onMouseEnter={() => setMentionIndex(idx)}
+                            onMouseDown={(e) => {
+                              e.preventDefault();
+                              insertMention(col);
+                            }}
+                          >
+                            <span
+                              className="rounded px-1.5 py-0.5 text-xs font-sans"
+                              style={{
+                                backgroundColor: colors.bg.secondary,
+                                color: colors.text.secondary,
+                              }}
+                            >
+                              @
+                            </span>
+                            {col}
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                </div>
+              )}
+            </div>
+          </section>
+
+          <aside className="space-y-5 xl:sticky xl:top-6 self-start">
+            <details
+              open
+              className="rounded-2xl border"
+              style={{
+                borderColor: colors.border,
+                backgroundColor: colors.bg.primary,
+              }}
+            >
+              <summary className="flex cursor-pointer items-center justify-between px-4 py-3">
+                <div className="min-w-0">
+                  <div
+                    className="text-sm font-semibold"
+                    style={{ color: colors.text.primary }}
+                  >
+                    Response Format
+                  </div>
+                  <div
+                    className="mt-1 text-xs"
+                    style={{ color: colors.text.secondary }}
+                  >
+                    {responseSummary}
+                  </div>
+                </div>
+                <button
+                  type="button"
+                  onClick={(event) => {
+                    event.preventDefault();
+                    setSchemaModalOpen(true);
+                  }}
+                  className="cursor-pointer rounded-lg px-3 py-1.5 text-xs font-medium"
+                  style={{
+                    backgroundColor: colors.accent.primary,
+                    color: "#fff",
+                  }}
+                >
+                  {namedSchemaFields.length > 0 ? "Edit" : "Set"}
+                </button>
+              </summary>
+            </details>
+
+            <details
+              open
+              className="rounded-2xl border"
+              style={{
+                borderColor: colors.border,
+                backgroundColor: colors.bg.primary,
+              }}
+            >
+              <summary className="flex cursor-pointer items-center justify-between px-4 py-3">
+                <div>
+                  <div
+                    className="text-sm font-semibold"
+                    style={{ color: colors.text.primary }}
+                  >
+                    AI Configuration
+                  </div>
+                  <div
+                    className="mt-1 text-xs"
+                    style={{ color: colors.text.secondary }}
+                  >
+                    {configs.length > 0
+                      ? `${configs.length} selected`
+                      : "Choose at least one configuration"}
+                  </div>
+                </div>
+                {configs.length > 0 && configs.length < MAX_CONFIGS && (
+                  <button
+                    type="button"
+                    onClick={(event) => {
+                      event.preventDefault();
+                      setConfigMode("existing");
+                    }}
+                    className="cursor-pointer rounded-lg border px-3 py-1.5 text-xs font-medium"
+                    style={{
+                      borderColor: colors.border,
+                      color: colors.text.primary,
+                      backgroundColor: colors.bg.primary,
+                    }}
+                  >
+                    Add more
+                  </button>
+                )}
+              </summary>
+
+              {configs.length > 0 && (
+                <div
+                  className="border-t px-4 py-4"
+                  style={{ borderColor: colors.border }}
+                >
+                  <div className="flex flex-wrap gap-2">
+                    {configs.map((c) => (
+                      <div
+                        key={`${c.config_id}-${c.config_version}`}
+                        className="inline-flex items-center gap-2 rounded-full border px-3 py-1.5"
+                        style={{
+                          borderColor: colors.accent.primary,
+                          backgroundColor: "rgba(23, 23, 23, 0.05)",
+                        }}
+                      >
+                        <span
+                          className="text-sm font-medium"
+                          style={{ color: colors.text.primary }}
+                        >
+                          {c.name}
+                        </span>
+                        <span
+                          className="text-xs"
+                          style={{ color: colors.text.secondary }}
+                        >
+                          v{c.config_version}{" "}
+                          {c.provider && c.model
+                            ? `· ${c.provider}/${c.model}`
+                            : ""}
+                        </span>
+                        <button
+                          onClick={() =>
+                            removeSelection(c.config_id, c.config_version)
+                          }
+                          className="cursor-pointer rounded-full p-0.5"
+                          style={{ color: colors.text.secondary }}
+                        >
+                          <svg
+                            className="h-3.5 w-3.5"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                            strokeWidth={2.5}
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              d="M6 18L18 6M6 6l12 12"
+                            />
+                          </svg>
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              <div
+                className="border-t px-4 py-4"
+                style={{ borderColor: colors.border }}
+              >
+                <div
+                  className="mb-4 inline-flex items-center gap-0 rounded-full p-1"
+                  style={{ backgroundColor: colors.bg.secondary }}
+                >
+                  <button
+                    onClick={() => setConfigMode("existing")}
+                    className="cursor-pointer rounded-full px-4 py-1.5 text-xs font-medium transition-all"
+                    style={{
+                      backgroundColor:
+                        configMode === "existing" ? "#171717" : "transparent",
+                      color:
+                        configMode === "existing"
+                          ? "#ffffff"
+                          : colors.text.secondary,
+                    }}
+                  >
+                    Saved
+                  </button>
+                  <button
+                    onClick={() => setConfigMode("create")}
+                    className="cursor-pointer rounded-full px-4 py-1.5 text-xs font-medium transition-all"
+                    style={{
+                      backgroundColor:
+                        configMode === "create" ? "#171717" : "transparent",
+                      color:
+                        configMode === "create"
+                          ? "#ffffff"
+                          : colors.text.secondary,
+                    }}
+                  >
+                    New
+                  </button>
+                </div>
+
+                {configMode === "existing" && (
+                  <div>
+                    <div className="mb-3">
+                      <input
+                        type="text"
+                        value={searchQuery}
+                        onChange={(e) => setSearchQuery(e.target.value)}
+                        placeholder="Search behaviors..."
+                        className="w-full rounded-xl border px-4 py-2.5 text-sm outline-none"
+                        style={{
+                          borderColor: colors.border,
+                          backgroundColor: colors.bg.secondary,
+                          color: colors.text.primary,
+                        }}
+                      />
+                    </div>
+
+                    {isLoadingConfigs ? (
+                      <div
+                        className="py-8 text-center text-sm"
+                        style={{ color: colors.text.secondary }}
+                      >
+                        Loading behaviors...
+                      </div>
+                    ) : filteredConfigCards.length === 0 ? (
+                      <div
+                        className="py-8 text-center text-sm"
+                        style={{ color: colors.text.secondary }}
+                      >
+                        {searchQuery
+                          ? "No behaviors match your search."
+                          : "No saved behaviors found."}
+                      </div>
+                    ) : (
+                      <div className="space-y-3 max-h-[560px] overflow-y-auto pr-1">
+                        {filteredConfigCards.map((config) => {
+                          const defaultSelected = isSelected(config.id, 1);
+                          const defaultLoading =
+                            loadingSelectionKeys[`${config.id}:1`];
+                          const isExpanded = expandedConfigId === config.id;
+                          const versions =
+                            versionStateByConfig[config.id] ??
+                            buildInitialVersionState();
+                          const knownVersionCount = versions.items.length;
+                          const hasVersionsPanel =
+                            knownVersionCount > 0 ||
+                            versions.hasMore ||
+                            versions.isLoading ||
+                            Boolean(versions.error);
+                          const previewVersions = versions.items.slice(0, 3);
+                          const versionCountLabel =
+                            knownVersionCount > 0
+                              ? `${knownVersionCount}${versions.hasMore ? "+" : ""}`
+                              : "Check";
+
+                          return (
+                            <div
+                              key={config.id}
+                              className="flex min-h-[188px] flex-col rounded-2xl border p-4"
+                              style={{
+                                borderColor: isExpanded
+                                  ? colors.accent.primary
+                                  : defaultSelected
+                                    ? colors.accent.primary
+                                    : colors.border,
+                                backgroundColor: colors.bg.primary,
+                                boxShadow: isExpanded
+                                  ? "0 10px 24px rgba(15, 23, 42, 0.06)"
+                                  : "0 1px 2px rgba(15, 23, 42, 0.03)",
+                              }}
+                            >
+                              <div className="flex min-h-[88px] items-start justify-between gap-3">
+                                <div className="min-w-0 flex-1">
+                                  <div
+                                    className="truncate text-sm font-semibold"
+                                    style={{ color: colors.text.primary }}
+                                  >
+                                    {config.name}
+                                  </div>
+                                  <div
+                                    className="mt-1 text-xs"
+                                    style={{ color: colors.text.secondary }}
+                                  >
+                                    {config.updated_at
+                                      ? formatRelativeTime(config.updated_at)
+                                      : "Saved behavior"}
+                                  </div>
+                                  {config.description && (
+                                    <div
+                                      className="mt-3 text-xs leading-5"
+                                      style={{ color: colors.text.secondary }}
+                                    >
+                                      {config.description}
+                                    </div>
+                                  )}
+                                </div>
+                                {defaultSelected && (
+                                  <span
+                                    className="shrink-0 rounded-full px-2.5 py-1 text-[11px] font-medium"
+                                    style={{
+                                      backgroundColor: colors.bg.secondary,
+                                      color: colors.text.primary,
+                                      border: `1px solid ${colors.border}`,
+                                    }}
+                                  >
+                                    Added
+                                  </span>
+                                )}
+                              </div>
+
+                              <div className="mt-4 flex items-center gap-2">
+                                <button
+                                  onClick={() =>
+                                    void toggleVersionSelection(config, 1)
+                                  }
+                                  disabled={Boolean(defaultLoading)}
+                                  className="cursor-pointer min-w-[152px] rounded-xl px-3 py-2.5 text-sm font-medium"
+                                  style={{
+                                    backgroundColor: defaultSelected
+                                      ? colors.bg.secondary
+                                      : colors.accent.primary,
+                                    color: defaultSelected
+                                      ? colors.text.primary
+                                      : "#fff",
+                                    border: `1px solid ${defaultSelected ? colors.border : colors.accent.primary}`,
+                                    cursor: defaultLoading
+                                      ? "progress"
+                                      : "pointer",
+                                  }}
+                                >
+                                  {defaultLoading
+                                    ? "Working..."
+                                    : defaultSelected
+                                      ? "Added"
+                                      : "Use this behavior"}
+                                </button>
+
+                                {hasVersionsPanel && (
+                                  <button
+                                    type="button"
+                                    onClick={() =>
+                                      toggleConfigExpansion(config.id)
+                                    }
+                                    aria-label={
+                                      isExpanded
+                                        ? "Hide saved versions"
+                                        : "View saved versions"
+                                    }
+                                    className="flex shrink-0 items-center gap-2 rounded-xl border px-3 py-2.5 text-xs font-medium transition-colors"
+                                    style={{
+                                      borderColor: isExpanded
+                                        ? colors.accent.primary
+                                        : colors.border,
+                                      backgroundColor: isExpanded
+                                        ? colors.bg.secondary
+                                        : colors.bg.primary,
+                                      color: colors.text.primary,
+                                    }}
+                                  >
+                                    <div className="relative h-5 w-7 shrink-0">
+                                      <span
+                                        className="absolute inset-x-1 top-0 h-3.5 rounded-md border"
+                                        style={{
+                                          borderColor: colors.border,
+                                          backgroundColor: colors.bg.primary,
+                                          opacity: 0.65,
+                                        }}
+                                      />
+                                      <span
+                                        className="absolute inset-x-0 top-1 h-3.5 rounded-md border"
+                                        style={{
+                                          borderColor: isExpanded
+                                            ? colors.accent.primary
+                                            : colors.border,
+                                          backgroundColor: colors.bg.secondary,
+                                        }}
+                                      />
+                                    </div>
+                                    <span className="font-semibold">
+                                      {isExpanded
+                                        ? "Hide versions"
+                                        : "View more versions"}
+                                    </span>
+                                    <span
+                                      className="rounded-full px-2 py-0.5 text-[10px] font-semibold"
+                                      style={{
+                                        backgroundColor: colors.bg.secondary,
+                                        color: colors.text.secondary,
+                                      }}
+                                    >
+                                      {versionCountLabel}
+                                    </span>
+                                    <svg
+                                      className="h-3.5 w-3.5 transition-transform duration-300 ease-in-out"
+                                      fill="none"
+                                      viewBox="0 0 24 24"
+                                      stroke="currentColor"
+                                      strokeWidth={2}
+                                      style={{
+                                        transform: isExpanded
+                                          ? "rotate(180deg)"
+                                          : "rotate(0deg)",
+                                      }}
+                                    >
+                                      <path
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        d="M19 9l-7 7-7-7"
+                                      />
+                                    </svg>
+                                  </button>
+                                )}
+                              </div>
+
+                              {hasVersionsPanel && (
+                                <div
+                                  className="mt-3 flex items-center gap-2 text-[11px]"
+                                  style={{ color: colors.text.secondary }}
+                                >
+                                  <div className="flex items-center -space-x-1.5">
+                                    {previewVersions.length > 0
+                                      ? previewVersions.map((version) => (
+                                          <span
+                                            key={version.id}
+                                            className="inline-flex h-5 min-w-5 items-center justify-center rounded-full border px-1 text-[9px] font-semibold"
+                                            style={{
+                                              borderColor: colors.border,
+                                              backgroundColor:
+                                                colors.bg.primary,
+                                              color: colors.text.secondary,
+                                            }}
+                                          >
+                                            v{version.version}
+                                          </span>
+                                        ))
+                                      : null}
+                                  </div>
+                                  <span>
+                                    {previewVersions.length > 0
+                                      ? "Saved versions"
+                                      : 'Tap "View versions" to load history'}
+                                  </span>
+                                </div>
+                              )}
+
+                              {hasVersionsPanel && (
+                                <div
+                                  className={`mt-3 overflow-hidden transition-all duration-300 ease-in-out ${isExpanded ? "max-h-[26rem] opacity-100" : "max-h-0 opacity-0"}`}
+                                  style={{
+                                    pointerEvents: isExpanded ? "auto" : "none",
+                                  }}
+                                >
+                                  <div
+                                    className="rounded-xl border p-3"
+                                    style={{
+                                      borderColor: colors.border,
+                                      backgroundColor: colors.bg.secondary,
+                                    }}
+                                  >
+                                    <div
+                                      className="mb-1 text-xs font-medium"
+                                      style={{ color: colors.text.secondary }}
+                                    >
+                                      Saved versions
+                                    </div>
+                                    {versions.isLoading &&
+                                    versions.items.length === 0 ? (
+                                      <div
+                                        className="py-2 text-center text-xs"
+                                        style={{ color: colors.text.secondary }}
+                                      >
+                                        Loading versions...
+                                      </div>
+                                    ) : (
+                                      <div className="max-h-52 space-y-2 overflow-y-auto pr-1">
+                                        {versions.items.map((v) => {
+                                          const vSelected = isSelected(
+                                            config.id,
+                                            v.version,
+                                          );
+                                          const vLoading =
+                                            loadingSelectionKeys[
+                                              `${config.id}:${v.version}`
+                                            ];
+
+                                          return (
+                                            <div
+                                              key={v.id}
+                                              className="flex items-center justify-between rounded-xl border px-3 py-2.5"
+                                              style={{
+                                                backgroundColor:
+                                                  colors.bg.primary,
+                                                borderColor: vSelected
+                                                  ? colors.accent.primary
+                                                  : colors.border,
+                                              }}
+                                            >
+                                              <div className="min-w-0">
+                                                <div
+                                                  className="text-xs font-semibold"
+                                                  style={{
+                                                    color: colors.text.primary,
+                                                  }}
+                                                >
+                                                  Version {v.version}
+                                                </div>
+                                                {v.commit_message && (
+                                                  <div
+                                                    className="mt-0.5 truncate text-[11px]"
+                                                    style={{
+                                                      color:
+                                                        colors.text.secondary,
+                                                    }}
+                                                  >
+                                                    {v.commit_message}
+                                                  </div>
+                                                )}
+                                              </div>
+                                              <button
+                                                onClick={() =>
+                                                  void toggleVersionSelection(
+                                                    config,
+                                                    v.version,
+                                                  )
+                                                }
+                                                disabled={Boolean(vLoading)}
+                                                className="cursor-pointer rounded-lg px-2.5 py-1 text-xs font-medium"
+                                                style={{
+                                                  backgroundColor: vSelected
+                                                    ? colors.bg.secondary
+                                                    : colors.accent.primary,
+                                                  color: vSelected
+                                                    ? colors.text.primary
+                                                    : "#fff",
+                                                  border: `1px solid ${vSelected ? colors.border : colors.accent.primary}`,
+                                                }}
+                                              >
+                                                {vLoading
+                                                  ? "..."
+                                                  : vSelected
+                                                    ? "Added"
+                                                    : "Use"}
+                                              </button>
+                                            </div>
+                                          );
+                                        })}
+                                        {versions.hasMore &&
+                                          !versions.isLoading && (
+                                            <button
+                                              onClick={() =>
+                                                void loadVersions(
+                                                  config.id,
+                                                  versions.nextSkip,
+                                                )
+                                              }
+                                              className="cursor-pointer w-full py-1.5 text-xs font-medium"
+                                              style={{
+                                                color: colors.accent.primary,
+                                              }}
+                                            >
+                                              Load more
+                                            </button>
+                                          )}
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+                              )}
+                            </div>
+                          );
+                        })}
+                        {hasMoreConfigs && (
+                          <button
+                            onClick={() =>
+                              void loadConfigs(nextConfigSkip, false)
+                            }
+                            className="cursor-pointer w-full rounded-xl border py-2 text-xs font-medium"
+                            style={{
+                              borderColor: colors.border,
+                              color: colors.text.primary,
+                              backgroundColor: colors.bg.primary,
+                            }}
+                          >
+                            Load more
+                          </button>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {configMode === "create" && (
+                  <div className="space-y-4">
+                    <div className="grid gap-3 sm:grid-cols-2">
+                      <div>
+                        <label
+                          className="mb-2 block text-xs font-semibold"
+                          style={{ color: colors.text.primary }}
+                        >
+                          Provider
+                        </label>
+                        <select
+                          value={draft.completion.provider}
+                          onChange={(e) => {
+                            const provider = e.target.value as "openai";
+                            const defaultModel =
+                              getDefaultModelForProvider(provider);
+                            setDraft((prev) => ({
+                              ...prev,
+                              completion: {
+                                ...prev.completion,
+                                provider,
+                                params: {
+                                  instructions: String(
+                                    prev.completion.params.instructions || "",
+                                  ),
+                                  model: defaultModel,
+                                  ...buildDefaultParams(defaultModel),
+                                },
+                              },
+                            }));
+                          }}
+                          className="w-full rounded-xl border px-4 py-3 text-sm outline-none"
+                          style={{
+                            borderColor: colors.border,
+                            backgroundColor: colors.bg.primary,
+                            color: colors.text.primary,
+                          }}
+                        >
+                          {PROVIDER_OPTIONS.map((opt) => (
+                            <option key={opt.value} value={opt.value}>
+                              {opt.label}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                      <div>
+                        <label
+                          className="mb-2 block text-xs font-semibold"
+                          style={{ color: colors.text.primary }}
+                        >
+                          Model
+                        </label>
+                        <select
+                          value={currentModel}
+                          onChange={(e) => handleModelChange(e.target.value)}
+                          className="w-full rounded-xl border px-4 py-3 text-sm outline-none"
+                          style={{
+                            borderColor: colors.border,
+                            backgroundColor: colors.bg.primary,
+                            color: colors.text.primary,
+                          }}
+                        >
+                          {providerModels.map((m) => (
+                            <option key={m.value} value={m.value}>
+                              {m.label}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                    </div>
+
+                    <div
+                      className="flex items-center justify-between rounded-xl border px-4 py-3"
+                      style={{
+                        borderColor: colors.border,
+                        backgroundColor: colors.bg.primary,
+                        color: colors.text.primary,
+                      }}
+                    >
+                      <div className="min-w-0">
+                        <div className="text-sm font-medium">
+                          System Instructions
+                        </div>
+                        <div
+                          className="mt-1 text-xs"
+                          style={{ color: colors.text.secondary }}
+                        >
+                          {String(draftParams.instructions || "").trim()
+                            ? "Added"
+                            : "Not added"}
+                        </div>
+                      </div>
+                      <button
+                        type="button"
+                        onClick={() => setSystemInstructionSheetOpen(true)}
+                        className="cursor-pointer rounded-lg px-3 py-1.5 text-xs font-medium"
+                        style={{
+                          backgroundColor: colors.accent.primary,
+                          color: "#fff",
+                        }}
+                      >
+                        {String(draftParams.instructions || "").trim()
+                          ? "Edit"
+                          : "+ Add"}
+                      </button>
+                    </div>
+
+                    <details
+                      className="rounded-xl border"
+                      style={{
+                        borderColor: colors.border,
+                        backgroundColor: colors.bg.secondary,
+                      }}
+                    >
+                      <summary
+                        className="cursor-pointer px-4 py-3 text-sm font-semibold"
+                        style={{ color: colors.text.primary }}
+                      >
+                        Advanced
+                      </summary>
+                      <div className="px-4 pb-4">
+                        {Object.entries(currentParamDefs).map(
+                          ([paramKey, definition]) => (
+                            <div
+                              key={paramKey}
+                              className="border-b py-4 last:border-b-0"
+                              style={{ borderColor: colors.border }}
+                            >
+                              <div className="mb-3 flex items-start justify-between gap-3">
+                                <div>
+                                  <div
+                                    className="text-sm font-semibold"
+                                    style={{ color: colors.text.primary }}
+                                  >
+                                    {paramKey}
+                                  </div>
+                                  <div
+                                    className="mt-1 text-xs leading-5"
+                                    style={{ color: colors.text.secondary }}
+                                  >
+                                    {definition.description}
+                                  </div>
+                                </div>
+                                <span
+                                  className="rounded-full px-2 py-0.5 text-[11px]"
+                                  style={{
+                                    backgroundColor: colors.bg.primary,
+                                    color: colors.text.secondary,
+                                  }}
+                                >
+                                  {String(definition.default)}
+                                </span>
+                              </div>
+                              {renderParamControl(paramKey, definition)}
+                            </div>
+                          ),
+                        )}
+                      </div>
+                    </details>
+
+                    <div className="grid gap-3">
+                      <div>
+                        <label
+                          className="mb-2 block text-xs font-semibold"
+                          style={{ color: colors.text.primary }}
+                        >
+                          Behavior name
+                        </label>
+                        <input
+                          value={configName}
+                          onChange={(e) => setConfigName(e.target.value)}
+                          placeholder="Helpful grader"
+                          className="w-full rounded-xl border px-4 py-3 text-sm outline-none"
+                          style={{
+                            borderColor: colors.border,
+                            backgroundColor: colors.bg.primary,
+                            color: colors.text.primary,
+                          }}
+                        />
+                      </div>
+                      <div>
+                        <label
+                          className="mb-2 block text-xs font-semibold"
+                          style={{ color: colors.text.primary }}
+                        >
+                          Save note
+                        </label>
+                        <input
+                          value={commitMessage}
+                          onChange={(e) => setCommitMessage(e.target.value)}
+                          placeholder="Optional"
+                          className="w-full rounded-xl border px-4 py-3 text-sm outline-none"
+                          style={{
+                            borderColor: colors.border,
+                            backgroundColor: colors.bg.primary,
+                            color: colors.text.primary,
+                          }}
+                        />
+                      </div>
+                    </div>
+
+                    <button
+                      onClick={() => void handleCreateAndAdd()}
+                      disabled={isSaving || !configName.trim()}
+                      className="w-full rounded-xl px-4 py-3 text-sm font-semibold"
+                      style={{
+                        backgroundColor:
+                          isSaving || !configName.trim()
+                            ? colors.bg.secondary
+                            : colors.accent.primary,
+                        color:
+                          isSaving || !configName.trim()
+                            ? colors.text.secondary
+                            : "#fff",
+                        cursor:
+                          isSaving || !configName.trim()
+                            ? "not-allowed"
+                            : "pointer",
+                      }}
+                    >
+                      {isSaving ? "Saving..." : "Save behavior"}
+                    </button>
+                  </div>
+                )}
+              </div>
+            </details>
+          </aside>
+        </div>
+
+        <OutputSchemaModal
+          open={schemaModalOpen}
+          onClose={() => setSchemaModalOpen(false)}
+          schema={outputSchema}
+          setSchema={setOutputSchema}
+        />
+        {systemInstructionSheetOpen && (
+          <div className="fixed inset-0 z-50">
+            <button
+              type="button"
+              className="absolute inset-0"
+              style={{ backgroundColor: "rgba(0, 0, 0, 0.45)" }}
+              onClick={() => setSystemInstructionSheetOpen(false)}
+              aria-label="Close system instructions"
+            />
+            <div
+              className="absolute inset-y-0 right-0 flex w-full max-w-2xl flex-col border-l shadow-2xl"
+              style={{
+                backgroundColor: colors.bg.primary,
+                borderColor: colors.border,
+              }}
+            >
+              <div
+                className="flex items-center justify-between border-b px-6 py-4"
+                style={{ borderColor: colors.border }}
+              >
+                <div>
+                  <h3
+                    className="text-lg font-semibold"
+                    style={{ color: colors.text.primary }}
+                  >
+                    System Instructions
+                  </h3>
+                  <p
+                    className="mt-1 text-sm"
+                    style={{ color: colors.text.secondary }}
+                  >
+                    Define how the model should behave before it sees the user
+                    prompt.
+                  </p>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => setSystemInstructionSheetOpen(false)}
+                  className="flex h-8 w-8 items-center justify-center rounded-full"
+                  style={{ color: colors.text.secondary }}
+                >
+                  <svg
+                    className="h-5 w-5"
+                    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-1 overflow-y-auto px-6 py-5">
+                <textarea
+                  value={String(draftParams.instructions || "")}
+                  onChange={(e) =>
+                    updateDraftParam("instructions", e.target.value)
+                  }
+                  placeholder="Tell the AI how it should respond."
+                  className="min-h-[360px] w-full resize-y rounded-2xl border px-4 py-4 text-sm leading-6 outline-none"
+                  style={{
+                    borderColor: colors.border,
+                    backgroundColor: colors.bg.secondary,
+                    color: colors.text.primary,
+                  }}
+                />
+              </div>
+              <div
+                className="flex items-center justify-end gap-3 border-t px-6 py-4"
+                style={{ borderColor: colors.border }}
+              >
+                <button
+                  type="button"
+                  onClick={() => updateDraftParam("instructions", "")}
+                  className="cursor-pointer rounded-lg border px-4 py-2 text-sm font-medium"
+                  style={{
+                    borderColor: colors.border,
+                    color: colors.text.primary,
+                    backgroundColor: colors.bg.primary,
+                  }}
+                >
+                  Clear
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setSystemInstructionSheetOpen(false)}
+                  className="cursor-pointer rounded-lg px-4 py-2 text-sm font-medium"
+                  style={{
+                    backgroundColor: colors.accent.primary,
+                    color: "#fff",
+                  }}
+                >
+                  Done
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* ── BOTTOM NAV ── */}
+      <div
+        className="sticky bottom-0 z-10 flex items-center justify-between border-t py-2"
+        style={{
+          backgroundColor: colors.bg.secondary,
+          borderColor: colors.border,
+          marginLeft: "-1.5rem",
+          marginRight: "-1.5rem",
+          paddingLeft: "1.5rem",
+          paddingRight: "1.5rem",
+        }}
+      >
+        <button
+          onClick={onBack}
+          className="flex cursor-pointer items-center gap-2 rounded-lg border px-6 py-2.5 text-sm font-medium"
+          style={{
+            borderColor: colors.border,
+            color: colors.text.primary,
+            backgroundColor: colors.bg.primary,
+          }}
+        >
+          <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="M15 19l-7-7 7-7"
+            />
+          </svg>
+          Back
+        </button>
+        <div className="flex items-center gap-3">
+          {!canProceed && (
+            <span className="text-xs" style={{ color: colors.text.secondary }}>
+              {nextBlockerMessage}
+            </span>
+          )}
+          <button
+            onClick={onNext}
+            disabled={!canProceed}
+            className="cursor-pointer rounded-lg px-6 py-2.5 text-sm font-medium"
+            style={{
+              backgroundColor: canProceed
+                ? colors.accent.primary
+                : colors.bg.secondary,
+              color: canProceed ? "#fff" : colors.text.secondary,
+              cursor: canProceed ? "pointer" : "not-allowed",
+            }}
+          >
+            Next: Review
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/assessment/components/PromptEditorStep.tsx b/app/assessment/components/PromptEditorStep.tsx
new file mode 100644
index 0000000..167577e
--- /dev/null
+++ b/app/assessment/components/PromptEditorStep.tsx
@@ -0,0 +1,532 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { colors } from "@/app/lib/colors";
+
+interface PromptEditorStepProps {
+  textColumns: string[];
+  sampleRow: Record<string, string>;
+  promptTemplate: string;
+  setPromptTemplate: (template: string) => void;
+  onNext: () => void;
+  onBack: () => void;
+}
+
+const MIN_EDITOR_WIDTH = 35;
+const MAX_EDITOR_WIDTH = 72;
+
+export default function PromptEditorStep({
+  textColumns,
+  sampleRow,
+  promptTemplate,
+  setPromptTemplate,
+  onNext,
+  onBack,
+}: PromptEditorStepProps) {
+  const [editorWidth, setEditorWidth] = useState(56);
+  const [mentionQuery, setMentionQuery] = useState<string | null>(null);
+  const [mentionIndex, setMentionIndex] = useState(0);
+  const [mentionPos, setMentionPos] = useState<{
+    top: number;
+    left: number;
+  } | null>(null);
+  const [mentionStart, setMentionStart] = useState<number | null>(null);
+  const [isDraggingDivider, setIsDraggingDivider] = useState(false);
+
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const mirrorRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const splitContainerRef = useRef<HTMLDivElement>(null);
+
+  const mentionOptions = useMemo(() => {
+    if (mentionQuery === null) return [];
+    const normalized = mentionQuery.toLowerCase();
+    return textColumns.filter((column) =>
+      column.toLowerCase().includes(normalized),
+    );
+  }, [mentionQuery, textColumns]);
+
+  const computeCaretPosition = useCallback(() => {
+    const textarea = textareaRef.current;
+    const mirror = mirrorRef.current;
+
+    if (!textarea || !mirror) return null;
+
+    const style = window.getComputedStyle(textarea);
+    const props = [
+      "font-family",
+      "font-size",
+      "font-weight",
+      "line-height",
+      "letter-spacing",
+      "padding-top",
+      "padding-left",
+      "padding-right",
+      "padding-bottom",
+      "border-top-width",
+      "border-left-width",
+      "word-wrap",
+      "overflow-wrap",
+      "tab-size",
+      "box-sizing",
+    ];
+
+    props.forEach((prop) => {
+      mirror.style.setProperty(prop, style.getPropertyValue(prop));
+    });
+
+    mirror.style.width = `${textarea.clientWidth}px`;
+    mirror.style.whiteSpace = "pre-wrap";
+    mirror.style.wordWrap = "break-word";
+    mirror.style.position = "absolute";
+    mirror.style.visibility = "hidden";
+    mirror.style.left = "0";
+    mirror.style.top = "0";
+
+    mirror.textContent = textarea.value.substring(0, textarea.selectionStart);
+    const marker = document.createElement("span");
+    marker.textContent = "\u200b";
+    mirror.appendChild(marker);
+
+    const markerRect = marker.getBoundingClientRect();
+    const mirrorRect = mirror.getBoundingClientRect();
+
+    return {
+      top:
+        markerRect.top -
+        mirrorRect.top -
+        textarea.scrollTop +
+        parseInt(style.lineHeight, 10) +
+        6,
+      left: markerRect.left - mirrorRect.left,
+    };
+  }, []);
+
+  const closeMention = useCallback(() => {
+    setMentionQuery(null);
+    setMentionStart(null);
+    setMentionPos(null);
+  }, []);
+
+  const handleInput = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    const cursor = textarea.selectionStart;
+    const value = textarea.value;
+
+    let index = cursor - 1;
+    while (
+      index >= 0 &&
+      value[index] !== "@" &&
+      value[index] !== " " &&
+      value[index] !== "\n" &&
+      value[index] !== "\t"
+    ) {
+      index -= 1;
+    }
+
+    if (index >= 0 && value[index] === "@") {
+      setMentionQuery(value.substring(index + 1, cursor));
+      setMentionStart(index);
+      setMentionIndex(0);
+      setMentionPos(computeCaretPosition());
+      return;
+    }
+
+    closeMention();
+  }, [closeMention, computeCaretPosition]);
+
+  const insertMention = useCallback(
+    (column: string) => {
+      const textarea = textareaRef.current;
+      if (!textarea || mentionStart === null) return;
+
+      const cursor = textarea.selectionStart;
+      const nextValue = `${promptTemplate.substring(0, mentionStart)}{${column}}${promptTemplate.substring(cursor)}`;
+      const nextCursor = mentionStart + column.length + 2;
+
+      setPromptTemplate(nextValue);
+      closeMention();
+
+      setTimeout(() => {
+        textarea.focus();
+        textarea.setSelectionRange(nextCursor, nextCursor);
+      }, 0);
+    },
+    [closeMention, mentionStart, promptTemplate, setPromptTemplate],
+  );
+
+  const insertPlaceholder = (column: string) => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const nextValue = `${promptTemplate.slice(0, start)}{${column}}${promptTemplate.slice(end)}`;
+    const nextCursor = start + column.length + 2;
+
+    setPromptTemplate(nextValue);
+
+    setTimeout(() => {
+      textarea.focus();
+      textarea.setSelectionRange(nextCursor, nextCursor);
+    }, 0);
+  };
+
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (mentionQuery === null || mentionOptions.length === 0) return;
+
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setMentionIndex((prev) => (prev + 1) % mentionOptions.length);
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setMentionIndex(
+          (prev) => (prev - 1 + mentionOptions.length) % mentionOptions.length,
+        );
+      } else if (event.key === "Enter" || event.key === "Tab") {
+        event.preventDefault();
+        insertMention(mentionOptions[mentionIndex]);
+      } else if (event.key === "Escape") {
+        closeMention();
+      }
+    },
+    [closeMention, insertMention, mentionIndex, mentionOptions, mentionQuery],
+  );
+
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      const target = event.target as Node;
+      if (
+        textareaRef.current &&
+        !textareaRef.current.contains(target) &&
+        dropdownRef.current &&
+        !dropdownRef.current.contains(target)
+      ) {
+        closeMention();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [closeMention]);
+
+  useEffect(() => {
+    if (dropdownRef.current && mentionOptions.length > 0) {
+      const active = dropdownRef.current.children[mentionIndex] as
+        | HTMLElement
+        | undefined;
+      active?.scrollIntoView({ block: "nearest" });
+    }
+  }, [mentionIndex, mentionOptions.length]);
+
+  useEffect(() => {
+    if (!isDraggingDivider) return;
+
+    const handleMouseMove = (event: MouseEvent) => {
+      const container = splitContainerRef.current;
+      if (!container) return;
+
+      const rect = container.getBoundingClientRect();
+      const percent = ((event.clientX - rect.left) / rect.width) * 100;
+      setEditorWidth(
+        Math.max(MIN_EDITOR_WIDTH, Math.min(MAX_EDITOR_WIDTH, percent)),
+      );
+    };
+
+    const handleMouseUp = () => {
+      setIsDraggingDivider(false);
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [isDraggingDivider]);
+
+  const usedColumns = useMemo(
+    () =>
+      textColumns.filter((column) => promptTemplate.includes(`{${column}}`)),
+    [promptTemplate, textColumns],
+  );
+
+  const orderedColumns = useMemo(() => {
+    const used = textColumns.filter((column) => usedColumns.includes(column));
+    const unused = textColumns.filter(
+      (column) => !usedColumns.includes(column),
+    );
+    return [...used, ...unused];
+  }, [textColumns, usedColumns]);
+
+  const previewText = useMemo(() => {
+    if (!promptTemplate.trim()) {
+      return "";
+    }
+
+    let next = promptTemplate;
+    textColumns.forEach((column) => {
+      const safeColumn = column.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      next = next.replace(
+        new RegExp(`\\{${safeColumn}\\}`, "g"),
+        sampleRow[column] || "",
+      );
+    });
+    return next;
+  }, [promptTemplate, sampleRow, textColumns]);
+
+  return (
+    <div className="mx-auto flex min-h-full max-w-6xl flex-col">
+      <div className="flex-1 space-y-3 pb-20">
+        <div>
+          <h2
+            className="text-lg font-semibold"
+            style={{ color: colors.text.primary }}
+          >
+            Prompt Editor
+          </h2>
+        </div>
+
+        <div
+          className="rounded-xl px-4 py-3"
+          style={{ backgroundColor: colors.bg.secondary }}
+        >
+          <div className="mb-3 flex items-center justify-between gap-3">
+            <div
+              className="text-sm font-medium"
+              style={{ color: colors.text.primary }}
+            >
+              Columns
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {orderedColumns.map((column) => {
+              const isUsed = usedColumns.includes(column);
+              return (
+                <button
+                  key={column}
+                  type="button"
+                  onClick={() => insertPlaceholder(column)}
+                  className="cursor-pointer rounded-full border px-3.5 py-2 text-sm font-mono font-xs transition-colors"
+                  style={{
+                    backgroundColor: isUsed
+                      ? "rgba(22, 163, 74, 0.12)"
+                      : colors.bg.primary,
+                    borderColor: isUsed
+                      ? "rgba(22, 163, 74, 0.3)"
+                      : colors.border,
+                    color: isUsed ? "#166534" : colors.text.primary,
+                  }}
+                >
+                  {`{${column}}`}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        <div
+          ref={splitContainerRef}
+          className="flex flex-col lg:flex-row"
+          style={{ minHeight: "520px" }}
+        >
+          <div
+            className="flex min-h-[320px] flex-col"
+            style={{ width: `${editorWidth}%` }}
+          >
+            <div className="px-0 py-2">
+              <div
+                className="text-sm font-semibold"
+                style={{ color: colors.text.primary }}
+              >
+                Editor
+              </div>
+            </div>
+
+            <div className="relative flex-1 pr-4">
+              <textarea
+                ref={textareaRef}
+                value={promptTemplate}
+                onChange={(event) => {
+                  setPromptTemplate(event.target.value);
+                  setTimeout(handleInput, 0);
+                }}
+                onKeyDown={handleKeyDown}
+                onSelect={handleInput}
+                placeholder={`Example:\nProblem:\n{Problem}\n\nSolution:\n{Solution}`}
+                className="h-full min-h-[260px] w-full resize-none rounded-xl border p-4 text-sm font-mono outline-none"
+                style={{
+                  backgroundColor: colors.bg.primary,
+                  borderColor: colors.border,
+                  color: colors.text.primary,
+                  boxShadow: "0 1px 2px rgba(0, 0, 0, 0.03)",
+                }}
+              />
+
+              <div ref={mirrorRef} aria-hidden="true" />
+
+              {mentionQuery !== null &&
+                mentionOptions.length > 0 &&
+                mentionPos && (
+                  <div
+                    ref={dropdownRef}
+                    className="absolute z-50 overflow-hidden rounded-xl border shadow-lg"
+                    style={{
+                      top: `${mentionPos.top + 16}px`,
+                      left: `${Math.max(16, Math.min(mentionPos.left + 16, 320))}px`,
+                      backgroundColor: colors.bg.primary,
+                      borderColor: colors.border,
+                      minWidth: "220px",
+                      maxHeight: "180px",
+                      overflowY: "auto",
+                    }}
+                  >
+                    {mentionOptions.map((column, index) => {
+                      const isActive = index === mentionIndex;
+                      return (
+                        <button
+                          key={column}
+                          type="button"
+                          className="flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-left text-sm font-mono"
+                          style={{
+                            backgroundColor: isActive
+                              ? colors.bg.secondary
+                              : colors.bg.primary,
+                            color: colors.text.primary,
+                          }}
+                          onMouseEnter={() => setMentionIndex(index)}
+                          onMouseDown={(event) => {
+                            event.preventDefault();
+                            insertMention(column);
+                          }}
+                        >
+                          <span
+                            className="rounded px-1.5 py-0.5 text-xs font-sans"
+                            style={{
+                              backgroundColor: colors.bg.secondary,
+                              color: colors.text.secondary,
+                            }}
+                          >
+                            @
+                          </span>
+                          {column}
+                        </button>
+                      );
+                    })}
+                  </div>
+                )}
+            </div>
+          </div>
+
+          <div
+            className="hidden w-8 cursor-col-resize items-center justify-center lg:flex"
+            style={{ backgroundColor: "transparent" }}
+            onMouseDown={(event) => {
+              event.preventDefault();
+              setIsDraggingDivider(true);
+            }}
+          >
+            <div
+              className="h-full w-px"
+              style={{ backgroundColor: colors.border }}
+            />
+          </div>
+
+          <div className="min-h-[320px] flex-1">
+            <div className="px-0 py-2 lg:pl-4">
+              <div
+                className="text-sm font-semibold"
+                style={{ color: colors.text.primary }}
+              >
+                Preview
+              </div>
+            </div>
+
+            <div className="h-full lg:pl-4">
+              <div
+                className="h-full min-h-[260px] whitespace-pre-wrap break-words rounded-xl border p-4 text-sm"
+                style={{
+                  backgroundColor: colors.bg.primary,
+                  borderColor: colors.border,
+                  color: colors.text.primary,
+                  boxShadow: "0 1px 2px rgba(0, 0, 0, 0.03)",
+                }}
+              >
+                {!promptTemplate.trim() ? (
+                  <span style={{ color: colors.text.secondary }}>
+                    Preview will appear here.
+                  </span>
+                ) : Object.keys(sampleRow).length === 0 ? (
+                  <span style={{ color: colors.text.secondary }}>
+                    Sample data not available — go back to the Datasets tab,
+                    re-select your dataset, and return here.
+                  </span>
+                ) : previewText ? (
+                  previewText
+                ) : (
+                  <span style={{ color: colors.text.secondary }}>
+                    Preview will appear here.
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        className="sticky bottom-0 z-10 flex items-center justify-between border-t py-2"
+        style={{
+          backgroundColor: colors.bg.secondary,
+          borderColor: colors.border,
+          marginLeft: "-1.5rem",
+          marginRight: "-1.5rem",
+          paddingLeft: "1.5rem",
+          paddingRight: "1.5rem",
+        }}
+      >
+        <button
+          type="button"
+          onClick={onBack}
+          className="flex cursor-pointer items-center gap-2 rounded-lg border px-6 py-2.5 text-sm font-medium"
+          style={{
+            borderColor: colors.border,
+            color: colors.text.primary,
+            backgroundColor: colors.bg.primary,
+          }}
+        >
+          <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="M15 19l-7-7 7-7"
+            />
+          </svg>
+          Back
+        </button>
+        <button
+          type="button"
+          onClick={onNext}
+          className="cursor-pointer rounded-lg px-6 py-2.5 text-sm font-medium"
+          style={{
+            backgroundColor: colors.accent.primary,
+            color: "#fff",
+            border: `1px solid ${colors.accent.primary}`,
+          }}
+        >
+          Next: Review
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/assessment/components/ReviewStep.tsx b/app/assessment/components/ReviewStep.tsx
new file mode 100644
index 0000000..cbe81d2
--- /dev/null
+++ b/app/assessment/components/ReviewStep.tsx
@@ -0,0 +1,597 @@
+"use client";
+
+import { useState } from "react";
+import { colors } from "@/app/lib/colors";
+import { AssessmentFormState } from "../types";
+import { schemaToJsonSchema } from "../schemaUtils";
+
+interface ReviewStepProps {
+  formState: AssessmentFormState;
+  experimentName: string;
+  setExperimentName: (name: string) => void;
+  isSubmitting: boolean;
+  onSubmit: () => void;
+  onBack: () => void;
+  onEditStep: (step: number) => void;
+}
+
+interface AccordionSectionProps {
+  title: string;
+  stepNumber: number;
+  isOpen: boolean;
+  onToggle: () => void;
+  onEdit?: () => void;
+  badge?: string;
+  children: React.ReactNode;
+}
+
+function AccordionSection({
+  title,
+  isOpen,
+  onToggle,
+  onEdit,
+  badge,
+  children,
+}: AccordionSectionProps) {
+  return (
+    <div
+      className="border rounded-lg overflow-hidden"
+      style={{
+        borderColor: isOpen ? colors.accent.primary : colors.border,
+        backgroundColor: colors.bg.primary,
+      }}
+    >
+      <div
+        onClick={onToggle}
+        className="w-full flex items-center justify-between px-4 py-3.5 text-left transition-colors cursor-pointer"
+        style={{
+          backgroundColor: isOpen
+            ? "rgba(59, 130, 246, 0.03)"
+            : colors.bg.primary,
+        }}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onToggle();
+          }
+        }}
+      >
+        <div className="flex items-center gap-3">
+          {/* Chevron */}
+          <svg
+            className="w-4 h-4 transition-transform flex-shrink-0"
+            style={{
+              color: colors.text.secondary,
+              transform: isOpen ? "rotate(90deg)" : "rotate(0deg)",
+            }}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M9 5l7 7-7 7"
+            />
+          </svg>
+          <span
+            className="text-sm font-semibold"
+            style={{ color: colors.text.primary }}
+          >
+            {title}
+          </span>
+          {badge && (
+            <span
+              className="text-[10px] px-2 py-0.5 rounded-full font-medium"
+              style={{
+                backgroundColor: colors.bg.secondary,
+                color: colors.text.secondary,
+              }}
+            >
+              {badge}
+            </span>
+          )}
+        </div>
+        {onEdit && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onEdit();
+            }}
+            className="cursor-pointer text-xs font-medium px-2.5 py-1 rounded-md transition-colors"
+            style={{
+              color: colors.accent.primary,
+              backgroundColor: colors.bg.secondary,
+            }}
+          >
+            Edit
+          </button>
+        )}
+      </div>
+
+      {isOpen && (
+        <div
+          className="px-4 pb-4 pt-1 border-t"
+          style={{ borderColor: colors.border }}
+        >
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function ReviewStep({
+  formState,
+  experimentName,
+  setExperimentName,
+  isSubmitting,
+  onSubmit,
+  onBack,
+  onEditStep,
+}: ReviewStepProps) {
+  const {
+    datasetId,
+    datasetName,
+    columnMapping,
+    promptTemplate,
+    outputSchema,
+    configs,
+  } = formState;
+  const [openSections, setOpenSections] = useState<Set<number>>(
+    new Set([1, 2, 3, 4, 5]),
+  );
+
+  const toggleSection = (section: number) => {
+    setOpenSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(section)) {
+        next.delete(section);
+      } else {
+        next.add(section);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <div className="mx-auto flex min-h-full max-w-2xl flex-col">
+      <div className="flex-1 space-y-4">
+        <div className="mb-2">
+          <h2
+            className="text-lg font-semibold"
+            style={{ color: colors.text.primary }}
+          >
+            Review & Submit
+          </h2>
+          <p className="text-sm mt-1" style={{ color: colors.text.secondary }}>
+            Verify your evaluation configuration before submitting.
+          </p>
+        </div>
+
+        {/* Experiment Name */}
+        <div
+          className="border rounded-lg p-4"
+          style={{
+            borderColor: colors.border,
+            backgroundColor: colors.bg.primary,
+          }}
+        >
+          <label
+            className="block text-xs font-medium mb-1.5"
+            style={{ color: colors.text.secondary }}
+          >
+            Experiment Name
+          </label>
+          <input
+            type="text"
+            value={experimentName}
+            onChange={(e) => setExperimentName(e.target.value)}
+            placeholder="e.g. GPT-4o vs Claude Sonnet on medical QA"
+            className="w-full px-3 py-2 rounded-md text-sm border outline-none transition-colors"
+            style={{
+              backgroundColor: colors.bg.secondary,
+              borderColor: colors.border,
+              color: colors.text.primary,
+            }}
+            onFocus={(e) =>
+              (e.target.style.borderColor = colors.accent.primary)
+            }
+            onBlur={(e) => (e.target.style.borderColor = colors.border)}
+          />
+          <p
+            className="text-[11px] mt-1.5"
+            style={{ color: colors.text.secondary }}
+          >
+            A descriptive name to identify this evaluation run.
+          </p>
+        </div>
+
+        {/* Dataset */}
+        <AccordionSection
+          title="Dataset"
+          stepNumber={1}
+          isOpen={openSections.has(1)}
+          onToggle={() => toggleSection(1)}
+        >
+          <div className="pt-2">
+            <div
+              className="text-xs font-medium mb-1"
+              style={{ color: colors.text.secondary }}
+            >
+              Dataset Name
+            </div>
+            <div
+              className="text-sm font-medium"
+              style={{ color: colors.text.primary }}
+            >
+              {datasetName || "Unknown dataset"}
+            </div>
+          </div>
+        </AccordionSection>
+
+        {/* Column Mapping */}
+        <AccordionSection
+          title="Column Mapping"
+          stepNumber={2}
+          isOpen={openSections.has(2)}
+          onToggle={() => toggleSection(2)}
+          onEdit={() => onEditStep(1)}
+          badge={`${columnMapping.textColumns.length + columnMapping.attachments.length + columnMapping.groundTruthColumns.length} mapped`}
+        >
+          <div className="space-y-3 pt-2">
+            {columnMapping.textColumns.length > 0 && (
+              <div className="space-y-1.5">
+                <span
+                  className="inline-flex rounded-md px-2 py-0.5 text-xs font-semibold"
+                  style={{
+                    backgroundColor: "rgba(22, 163, 74, 0.14)",
+                    color: "#166534",
+                  }}
+                >
+                  Text
+                </span>
+                <div className="flex flex-wrap gap-1.5">
+                  {columnMapping.textColumns.map((col) => (
+                    <span
+                      key={col}
+                      className="inline-flex rounded px-2 py-0.5 text-xs font-mono font-medium"
+                      style={{
+                        backgroundColor: colors.bg.secondary,
+                        color: colors.text.primary,
+                        border: `1px solid ${colors.border}`,
+                      }}
+                    >
+                      {col}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+            {columnMapping.attachments.length > 0 && (
+              <div className="space-y-1.5">
+                <span
+                  className="inline-flex rounded-md px-2 py-0.5 text-xs font-semibold"
+                  style={{
+                    backgroundColor: "rgba(249, 115, 22, 0.14)",
+                    color: "#9a3412",
+                  }}
+                >
+                  Attachments
+                </span>
+                <div className="flex flex-wrap gap-1.5">
+                  {columnMapping.attachments.map((a) => (
+                    <span
+                      key={a.column}
+                      className="inline-flex items-center gap-1 rounded px-2 py-0.5 text-xs font-mono font-medium"
+                      style={{
+                        backgroundColor: colors.bg.secondary,
+                        color: colors.text.primary,
+                        border: `1px solid ${colors.border}`,
+                      }}
+                    >
+                      {a.column}
+                      <span
+                        className="font-sans text-[10px]"
+                        style={{ color: colors.text.secondary }}
+                      >
+                        ({a.type}, {a.format})
+                      </span>
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+            {columnMapping.groundTruthColumns.length > 0 && (
+              <div className="space-y-1.5">
+                <span
+                  className="inline-flex rounded-md px-2 py-0.5 text-xs font-semibold"
+                  style={{
+                    backgroundColor: "rgba(59, 130, 246, 0.14)",
+                    color: "#1e40af",
+                  }}
+                >
+                  Ground Truth
+                </span>
+                <div className="flex flex-wrap gap-1.5">
+                  {columnMapping.groundTruthColumns.map((col) => (
+                    <span
+                      key={col}
+                      className="inline-flex rounded px-2 py-0.5 text-xs font-mono font-medium"
+                      style={{
+                        backgroundColor: colors.bg.secondary,
+                        color: colors.text.primary,
+                        border: `1px solid ${colors.border}`,
+                      }}
+                    >
+                      {col}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </AccordionSection>
+
+        {/* Prompt Template */}
+        <AccordionSection
+          title="Prompt Template"
+          stepNumber={3}
+          isOpen={openSections.has(3)}
+          onToggle={() => toggleSection(3)}
+          onEdit={() => onEditStep(2)}
+          badge={promptTemplate ? "Custom" : "Default"}
+        >
+          <div className="pt-2">
+            {promptTemplate ? (
+              <pre
+                className="text-xs font-mono whitespace-pre-wrap p-3 rounded-md"
+                style={{
+                  backgroundColor: colors.bg.secondary,
+                  color: colors.text.primary,
+                }}
+              >
+                {promptTemplate}
+              </pre>
+            ) : (
+              <div
+                className="text-xs rounded-md p-3"
+                style={{
+                  backgroundColor: colors.bg.secondary,
+                  color: colors.text.secondary,
+                }}
+              >
+                No template set — all text columns will be concatenated by the
+                backend.
+              </div>
+            )}
+          </div>
+        </AccordionSection>
+
+        {/* Configurations */}
+        <AccordionSection
+          title="Configurations"
+          stepNumber={4}
+          isOpen={openSections.has(4)}
+          onToggle={() => toggleSection(4)}
+          onEdit={() => onEditStep(2)}
+          badge={`${configs.length} selected`}
+        >
+          <div className="space-y-2 pt-2">
+            {configs.map((config, i) => (
+              <div
+                key={`${config.config_id}-${config.config_version}`}
+                className="flex items-center gap-3 p-2.5 rounded-md"
+                style={{ backgroundColor: colors.bg.secondary }}
+              >
+                <span
+                  className="w-5 h-5 flex items-center justify-center rounded-full text-[10px] font-bold flex-shrink-0"
+                  style={{
+                    backgroundColor: colors.accent.primary,
+                    color: "#fff",
+                  }}
+                >
+                  {i + 1}
+                </span>
+                <div className="flex-1 min-w-0">
+                  <span
+                    className="text-sm font-medium"
+                    style={{ color: colors.text.primary }}
+                  >
+                    {config.name}
+                  </span>
+                  <span
+                    className="text-[10px] ml-1.5 px-1.5 py-0.5 rounded font-medium"
+                    style={{
+                      backgroundColor: colors.bg.primary,
+                      color: colors.text.secondary,
+                    }}
+                  >
+                    v{config.config_version}
+                  </span>
+                </div>
+                <span
+                  className="text-xs flex-shrink-0"
+                  style={{ color: colors.text.secondary }}
+                >
+                  {config.provider}/{config.model}
+                </span>
+              </div>
+            ))}
+          </div>
+        </AccordionSection>
+
+        {/* Response Format */}
+        <AccordionSection
+          title="Response Format"
+          stepNumber={5}
+          isOpen={openSections.has(5)}
+          onToggle={() => toggleSection(5)}
+          onEdit={() => onEditStep(2)}
+          badge={
+            outputSchema.length > 0
+              ? `${outputSchema.length} fields`
+              : "Free text"
+          }
+        >
+          <div className="pt-2">
+            {outputSchema.length > 0 ? (
+              <div className="flex flex-wrap gap-1.5">
+                {outputSchema.map((p) => (
+                  <span
+                    key={p.id}
+                    className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-mono font-medium"
+                    style={{
+                      backgroundColor: "rgba(139, 92, 246, 0.1)",
+                      color: "#6d28d9",
+                    }}
+                  >
+                    {p.name || "(unnamed)"}
+                    <span className="font-sans text-[10px] opacity-70">
+                      {p.isArray ? `${p.type}[]` : p.type}
+                    </span>
+                  </span>
+                ))}
+              </div>
+            ) : (
+              <div
+                className="text-xs rounded-md p-3"
+                style={{
+                  backgroundColor: colors.bg.secondary,
+                  color: colors.text.secondary,
+                }}
+              >
+                No response format defined — model will return free-form text.
+              </div>
+            )}
+          </div>
+        </AccordionSection>
+
+        {/* Request payload (collapsible) */}
+        <details className="group">
+          <summary
+            className="text-xs font-medium cursor-pointer flex items-center gap-1.5 py-1"
+            style={{ color: colors.text.secondary }}
+          >
+            <svg
+              className="w-3.5 h-3.5 transition-transform group-open:rotate-90"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={2}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+            View request payload
+          </summary>
+          <pre
+            className="mt-2 text-xs font-mono whitespace-pre-wrap p-3 rounded-md overflow-auto max-h-64"
+            style={{
+              backgroundColor: colors.bg.secondary,
+              color: colors.text.primary,
+            }}
+          >
+            {JSON.stringify(
+              {
+                experiment_name: experimentName,
+                dataset_id: datasetId,
+                prompt_template: promptTemplate || null,
+                text_columns: columnMapping.textColumns,
+                attachments: columnMapping.attachments.map(
+                  ({ column, type, format }) => ({ column, type, format }),
+                ),
+                output_schema: schemaToJsonSchema(outputSchema) || null,
+                configs: configs.map(({ config_id, config_version }) => ({
+                  config_id,
+                  config_version,
+                })),
+              },
+              null,
+              2,
+            )}
+          </pre>
+        </details>
+      </div>
+      {/* end flex-1 content */}
+
+      {/* Navigation */}
+      <div
+        className="sticky bottom-0 z-10 flex items-center justify-between border-t py-2"
+        style={{
+          backgroundColor: colors.bg.secondary,
+          borderColor: colors.border,
+          marginLeft: "-1.5rem",
+          marginRight: "-1.5rem",
+          paddingLeft: "1.5rem",
+          paddingRight: "1.5rem",
+        }}
+      >
+        <button
+          onClick={onBack}
+          disabled={isSubmitting}
+          className="cursor-pointer rounded-lg border px-6 py-2.5 text-sm font-medium flex items-center gap-2"
+          style={{
+            borderColor: colors.border,
+            color: colors.text.primary,
+            backgroundColor: colors.bg.primary,
+          }}
+        >
+          <svg
+            className="w-3.5 h-3.5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M15 19l-7-7 7-7"
+            />
+          </svg>
+          Back
+        </button>
+        <button
+          onClick={onSubmit}
+          disabled={isSubmitting}
+          className="rounded-lg px-8 py-2.5 text-sm font-medium flex items-center gap-2"
+          style={{
+            backgroundColor: isSubmitting
+              ? colors.bg.secondary
+              : colors.accent.primary,
+            color: isSubmitting ? colors.text.secondary : "#fff",
+            cursor: isSubmitting ? "not-allowed" : "pointer",
+            border: `1px solid ${isSubmitting ? colors.border : colors.accent.primary}`,
+          }}
+        >
+          {isSubmitting ? (
+            <>
+              <div
+                className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
+                style={{
+                  borderColor: colors.text.secondary,
+                  borderTopColor: "transparent",
+                }}
+              />
+              Submitting...
+            </>
+          ) : (
+            <>
+              <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M8 5v14l11-7z" />
+              </svg>
+              Submit Evaluation
+            </>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/app/assessment/components/Stepper.tsx b/app/assessment/components/Stepper.tsx
new file mode 100644
index 0000000..eae2ec6
--- /dev/null
+++ b/app/assessment/components/Stepper.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import { colors } from "@/app/lib/colors";
+
+export interface Step {
+  id: number;
+  label: string;
+}
+
+interface StepperProps {
+  steps: Step[];
+  currentStep: number;
+  onStepClick: (step: number) => void;
+  completedSteps: Set<number>;
+}
+
+export default function Stepper({
+  steps,
+  currentStep,
+  onStepClick,
+  completedSteps,
+}: StepperProps) {
+  return (
+    <div
+      className="flex flex-wrap items-center gap-2 px-6 py-4 border-b"
+      style={{ borderColor: colors.border, backgroundColor: colors.bg.primary }}
+    >
+      {steps.map((step, index) => {
+        const isActive = currentStep === step.id;
+        const isCompleted = completedSteps.has(step.id);
+        const isSequentiallyUnlocked =
+          step.id > currentStep &&
+          steps
+            .filter((s) => s.id < step.id)
+            .every((s) => completedSteps.has(s.id));
+        const isClickable =
+          isCompleted || step.id <= currentStep || isSequentiallyUnlocked;
+
+        return (
+          <div key={step.id} className="flex items-center gap-2">
+            {index > 0 && (
+              <div
+                className="w-8 h-px"
+                style={{
+                  backgroundColor:
+                    isCompleted || isActive
+                      ? colors.accent.primary
+                      : colors.border,
+                }}
+              />
+            )}
+            <button
+              onClick={() => isClickable && onStepClick(step.id)}
+              disabled={!isClickable}
+              className="flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium text-left transition-colors"
+              style={{
+                backgroundColor: isActive
+                  ? colors.accent.primary
+                  : isCompleted
+                    ? colors.bg.secondary
+                    : "transparent",
+                color: isActive
+                  ? "#ffffff"
+                  : isCompleted
+                    ? colors.text.primary
+                    : colors.text.secondary,
+                border: `1px solid ${isActive ? colors.accent.primary : isCompleted ? colors.border : colors.border}`,
+                cursor: isClickable ? "pointer" : "default",
+                opacity: isClickable ? 1 : 0.5,
+              }}
+            >
+              {isCompleted && !isActive ? (
+                <svg
+                  className="w-3.5 h-3.5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M5 13l4 4L19 7"
+                  />
+                </svg>
+              ) : (
+                <span className="w-4 h-4 flex items-center justify-center text-[10px] font-bold">
+                  {step.id}
+                </span>
+              )}
+              <span className="max-w-[9rem] leading-4">{step.label}</span>
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/app/assessment/config/ConfigurationStep.tsx b/app/assessment/config/ConfigurationStep.tsx
new file mode 100644
index 0000000..cd26f86
--- /dev/null
+++ b/app/assessment/config/ConfigurationStep.tsx
@@ -0,0 +1,1678 @@
+"use client";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useToast } from "@/app/components/Toast";
+import { colors } from "@/app/lib/colors";
+import {
+  ConfigBlob,
+  ConfigPublic,
+  ConfigVersionItems,
+} from "@/app/lib/configTypes";
+import { formatRelativeTime } from "@/app/lib/utils";
+import { ConfigSelection, MAX_CONFIGS, SchemaProperty } from "../types";
+import { OutputSchemaModal } from "../components/OutputSchemaStep";
+import {
+  buildDefaultParams,
+  ConfigParamDefinition,
+  DEFAULT_CONFIG,
+  getDefaultModelForProvider,
+  getModelConfigDefinition,
+  getModelsByProvider,
+  PAGE_SIZE,
+  PROVIDER_OPTIONS,
+} from "./constants";
+import {
+  fetchConfigPage,
+  fetchConfigSelection,
+  fetchConfigVersionsPage,
+  invalidateAssessmentConfigCache,
+  saveAssessmentConfig,
+} from "./api";
+
+interface ConfigurationStepProps {
+  configs: ConfigSelection[];
+  setConfigs: (configs: ConfigSelection[]) => void;
+  outputSchema: SchemaProperty[];
+  setOutputSchema: (schema: SchemaProperty[]) => void;
+  onNext: () => void;
+  onBack: () => void;
+}
+
+interface VersionListState {
+  items: ConfigVersionItems[];
+  isLoading: boolean;
+  error: string | null;
+  hasMore: boolean;
+  nextSkip: number;
+}
+
+type Mode = "existing" | "create";
+type ConfigSubtab = "configs" | "schema";
+
+const VERSION_PAGE_SIZE = 8;
+
+function buildInitialDraft(): ConfigBlob {
+  return JSON.parse(JSON.stringify(DEFAULT_CONFIG)) as ConfigBlob;
+}
+
+function buildInitialVersionState(): VersionListState {
+  return {
+    items: [],
+    isLoading: false,
+    error: null,
+    hasMore: true,
+    nextSkip: 0,
+  };
+}
+
+const CONFIG_SECTION_META: Array<{
+  id: ConfigSubtab;
+  index: number;
+  title: string;
+  description: string;
+}> = [
+  {
+    id: "configs",
+    index: 1,
+    title: "AI Configuration",
+    description: "Choose the config the AI should use.",
+  },
+  {
+    id: "schema",
+    index: 2,
+    title: "Output",
+    description: "Choose how the answer should look.",
+  },
+];
+
+function SelectionChip({
+  config,
+  onRemove,
+}: {
+  config: ConfigSelection;
+  onRemove: (configId: string, version: number) => void;
+}) {
+  return (
+    <div
+      className="inline-flex items-center gap-2 rounded-full border px-3 py-1.5"
+      style={{
+        borderColor: colors.accent.primary,
+        backgroundColor: "rgba(23, 23, 23, 0.05)",
+      }}
+    >
+      <span
+        className="text-sm font-medium"
+        style={{ color: colors.text.primary }}
+      >
+        {config.name}
+      </span>
+      <span className="text-xs" style={{ color: colors.text.secondary }}>
+        v{config.config_version}{" "}
+        {config.provider && config.model
+          ? `• ${config.provider}/${config.model}`
+          : ""}
+      </span>
+      <button
+        onClick={() => onRemove(config.config_id, config.config_version)}
+        className="cursor-pointer rounded-full p-0.5"
+        style={{ color: colors.text.secondary }}
+        aria-label={`Remove ${config.name || "config"} version ${config.config_version}`}
+      >
+        <svg
+          className="h-3.5 w-3.5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={2.5}
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+    </div>
+  );
+}
+
+export default function ConfigurationStep({
+  configs,
+  setConfigs,
+  outputSchema,
+  setOutputSchema,
+  onNext,
+  onBack,
+}: ConfigurationStepProps) {
+  const toast = useToast();
+  const loadMoreRef = useRef<HTMLDivElement | null>(null);
+  const hasLoadedInitialConfigsRef = useRef(false);
+
+  const [mode, setMode] = useState<Mode>("existing");
+  const [configCards, setConfigCards] = useState<ConfigPublic[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isLoadingConfigs, setIsLoadingConfigs] = useState(true);
+  const [isLoadingMoreConfigs, setIsLoadingMoreConfigs] = useState(false);
+  const [configError, setConfigError] = useState<string | null>(null);
+  const [hasMoreConfigs, setHasMoreConfigs] = useState(true);
+  const [nextConfigSkip, setNextConfigSkip] = useState(0);
+  const [expandedConfigId, setExpandedConfigId] = useState<string | null>(null);
+  const [versionStateByConfig, setVersionStateByConfig] = useState<
+    Record<string, VersionListState>
+  >({});
+  const [loadingSelectionKeys, setLoadingSelectionKeys] = useState<
+    Record<string, boolean>
+  >({});
+
+  const [draft, setDraft] = useState<ConfigBlob>(() => buildInitialDraft());
+  const [configName, setConfigName] = useState("");
+  const [commitMessage, setCommitMessage] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+  const [activeSubtab, setActiveSubtab] = useState<ConfigSubtab>("configs");
+  const [schemaModalOpen, setSchemaModalOpen] = useState(false);
+
+  const draftParams = draft.completion.params as Record<
+    string,
+    string | number | undefined
+  >;
+  const currentProvider = draft.completion.provider ?? "openai";
+  const providerModels = useMemo(
+    () => getModelsByProvider(currentProvider),
+    [currentProvider],
+  );
+  const currentModel = String(draftParams.model || providerModels[0]?.value);
+  const currentParamDefs = useMemo(
+    () => getModelConfigDefinition(currentModel),
+    [currentModel],
+  );
+
+  const isSelected = useCallback(
+    (configId: string, version: number) =>
+      configs.some(
+        (item) =>
+          item.config_id === configId && item.config_version === version,
+      ),
+    [configs],
+  );
+
+  const selectedCountForConfig = useCallback(
+    (configId: string) =>
+      configs.filter((item) => item.config_id === configId).length,
+    [configs],
+  );
+
+  const filteredConfigCards = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase();
+    if (!query) {
+      return configCards;
+    }
+
+    return configCards.filter((config) => {
+      const haystack =
+        `${config.name} ${config.description || ""}`.toLowerCase();
+      return haystack.includes(query);
+    });
+  }, [configCards, searchQuery]);
+
+  const addSelection = useCallback(
+    (selection: ConfigSelection) => {
+      const alreadySelected = configs.some(
+        (item) =>
+          item.config_id === selection.config_id &&
+          item.config_version === selection.config_version,
+      );
+      if (alreadySelected) {
+        toast.error("This configuration version is already selected");
+        return;
+      }
+
+      if (configs.length >= MAX_CONFIGS) {
+        toast.error(`You can select up to ${MAX_CONFIGS} configurations`);
+        return;
+      }
+
+      setConfigs([...configs, selection]);
+    },
+    [configs, setConfigs, toast],
+  );
+
+  const removeSelection = useCallback(
+    (configId: string, version: number) => {
+      setConfigs(
+        configs.filter(
+          (item) =>
+            !(item.config_id === configId && item.config_version === version),
+        ),
+      );
+    },
+    [configs, setConfigs],
+  );
+
+  const loadConfigPage = useCallback(
+    async (reset: boolean) => {
+      if (reset) {
+        setIsLoadingConfigs(true);
+        setConfigError(null);
+      } else {
+        if (isLoadingMoreConfigs || !hasMoreConfigs) return;
+        setIsLoadingMoreConfigs(true);
+      }
+
+      try {
+        const page = await fetchConfigPage({
+          skip: reset ? 0 : nextConfigSkip,
+          limit: PAGE_SIZE,
+        });
+
+        setConfigCards((prev) => {
+          const incoming = reset ? page.items : [...prev, ...page.items];
+          const deduped = new Map(incoming.map((item) => [item.id, item]));
+          return Array.from(deduped.values());
+        });
+        setHasMoreConfigs(page.hasMore);
+        setNextConfigSkip(page.nextSkip);
+        if (reset && page.items.length > 0) {
+          setExpandedConfigId((current) =>
+            current && page.items.some((item) => item.id === current)
+              ? current
+              : null,
+          );
+        }
+      } catch (error) {
+        setConfigError(
+          error instanceof Error
+            ? error.message
+            : "Failed to load configurations",
+        );
+      } finally {
+        setIsLoadingConfigs(false);
+        setIsLoadingMoreConfigs(false);
+      }
+    },
+    [hasMoreConfigs, isLoadingMoreConfigs, nextConfigSkip],
+  );
+
+  useEffect(() => {
+    if (hasLoadedInitialConfigsRef.current) {
+      return;
+    }
+
+    hasLoadedInitialConfigsRef.current = true;
+    void loadConfigPage(true);
+  }, [loadConfigPage]);
+
+  const namedSchemaCount = outputSchema.filter((field) =>
+    field.name.trim(),
+  ).length;
+  const hasConfiguredResponseFormat = namedSchemaCount > 0;
+  const canFinishFromSchema = configs.length > 0 && hasConfiguredResponseFormat;
+  const schemaBlockerMessage =
+    configs.length === 0
+      ? "Select at least one configuration to continue"
+      : !hasConfiguredResponseFormat
+        ? "Set response format to continue"
+        : "";
+
+  useEffect(() => {
+    if (mode !== "existing") return undefined;
+    if (!hasMoreConfigs || isLoadingConfigs || isLoadingMoreConfigs)
+      return undefined;
+
+    const node = loadMoreRef.current;
+    if (!node) return undefined;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry?.isIntersecting) {
+          void loadConfigPage(false);
+        }
+      },
+      {
+        rootMargin: "320px 0px",
+      },
+    );
+
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [
+    hasMoreConfigs,
+    isLoadingConfigs,
+    isLoadingMoreConfigs,
+    loadConfigPage,
+    mode,
+  ]);
+
+  const loadVersions = useCallback(
+    async (configId: string, reset: boolean) => {
+      const currentState =
+        versionStateByConfig[configId] || buildInitialVersionState();
+      if (!reset && (!currentState.hasMore || currentState.isLoading)) {
+        return;
+      }
+
+      setVersionStateByConfig((prev) => ({
+        ...prev,
+        [configId]: {
+          ...(reset ? buildInitialVersionState() : currentState),
+          isLoading: true,
+          error: null,
+        },
+      }));
+
+      try {
+        const page = await fetchConfigVersionsPage(configId, {
+          skip: reset ? 0 : currentState.nextSkip,
+          limit: VERSION_PAGE_SIZE,
+        });
+
+        setVersionStateByConfig((prev) => {
+          const existing = reset ? [] : prev[configId]?.items || [];
+          const merged = [...existing, ...page.items];
+          const deduped = new Map(merged.map((item) => [item.version, item]));
+
+          return {
+            ...prev,
+            [configId]: {
+              items: Array.from(deduped.values()).sort(
+                (a, b) => b.version - a.version,
+              ),
+              isLoading: false,
+              error: null,
+              hasMore: page.hasMore,
+              nextSkip: page.nextSkip,
+            },
+          };
+        });
+      } catch (error) {
+        setVersionStateByConfig((prev) => ({
+          ...prev,
+          [configId]: {
+            ...(prev[configId] || buildInitialVersionState()),
+            isLoading: false,
+            error:
+              error instanceof Error
+                ? error.message
+                : "Failed to load versions",
+          },
+        }));
+      }
+    },
+    [versionStateByConfig],
+  );
+
+  const toggleConfigExpansion = useCallback(
+    (configId: string) => {
+      setExpandedConfigId((current) =>
+        current === configId ? null : configId,
+      );
+
+      const state = versionStateByConfig[configId];
+      if (!state || state.items.length === 0) {
+        void loadVersions(configId, true);
+      }
+    },
+    [loadVersions, versionStateByConfig],
+  );
+
+  const toggleVersionSelection = useCallback(
+    async (config: ConfigPublic, versionNumber: number) => {
+      if (isSelected(config.id, versionNumber)) {
+        removeSelection(config.id, versionNumber);
+        return;
+      }
+
+      if (configs.length >= MAX_CONFIGS) {
+        toast.error(`You can select up to ${MAX_CONFIGS} configurations`);
+        return;
+      }
+
+      const key = `${config.id}:${versionNumber}`;
+      setLoadingSelectionKeys((prev) => ({ ...prev, [key]: true }));
+
+      try {
+        const selection = await fetchConfigSelection(config, versionNumber);
+        addSelection(selection);
+      } catch (error) {
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Failed to select configuration",
+        );
+      } finally {
+        setLoadingSelectionKeys((prev) => {
+          const next = { ...prev };
+          delete next[key];
+          return next;
+        });
+      }
+    },
+    [addSelection, configs.length, isSelected, removeSelection, toast],
+  );
+
+  const updateDraftParam = useCallback(
+    (key: string, value: string | number) => {
+      setDraft((prev) => ({
+        ...prev,
+        completion: {
+          ...prev.completion,
+          params: {
+            ...prev.completion.params,
+            [key]: value,
+          },
+        },
+      }));
+    },
+    [],
+  );
+
+  const handleModelChange = useCallback((modelName: string) => {
+    setDraft((prev) => ({
+      ...prev,
+      completion: {
+        ...prev.completion,
+        params: {
+          instructions: String(prev.completion.params.instructions || ""),
+          model: modelName,
+          ...buildDefaultParams(modelName),
+        },
+      },
+    }));
+  }, []);
+
+  const handleCreateAndAdd = useCallback(async () => {
+    if (!configName.trim()) {
+      toast.error("Configuration name is required");
+      return;
+    }
+
+    if (configs.length >= MAX_CONFIGS) {
+      toast.error(`You can select up to ${MAX_CONFIGS} configurations`);
+      return;
+    }
+
+    setIsSaving(true);
+
+    try {
+      const saved = await saveAssessmentConfig({
+        configName,
+        commitMessage,
+        configBlob: draft,
+      });
+
+      addSelection(saved);
+      invalidateAssessmentConfigCache();
+      setCommitMessage("");
+      toast.success(`Configuration "${saved.name}" is ready to use`);
+      void loadConfigPage(true);
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to save configuration",
+      );
+    } finally {
+      setIsSaving(false);
+    }
+  }, [
+    addSelection,
+    commitMessage,
+    configName,
+    configs.length,
+    draft,
+    loadConfigPage,
+    toast,
+  ]);
+
+  const renderNumericParameter = (
+    paramKey: string,
+    definition: ConfigParamDefinition,
+  ) => {
+    const min = definition.min ?? 0;
+    const max = definition.max ?? 100;
+    const value = Number(draftParams[paramKey] ?? definition.default);
+    const rangeStep =
+      definition.type === "float"
+        ? 0.01
+        : Math.max(1, Math.round((max - min) / 100));
+
+    return (
+      <div className="space-y-3">
+        <div className="flex items-center gap-3">
+          <input
+            type="range"
+            min={min}
+            max={max}
+            step={rangeStep}
+            value={value}
+            onChange={(event) =>
+              updateDraftParam(
+                paramKey,
+                definition.type === "float"
+                  ? parseFloat(event.target.value)
+                  : parseInt(event.target.value, 10),
+              )
+            }
+            className="h-2 w-full cursor-pointer appearance-none rounded-full"
+            style={{
+              background: `linear-gradient(to right, ${colors.accent.primary} 0%, ${colors.accent.primary} ${((value - min) / (max - min || 1)) * 100}%, ${colors.border} ${((value - min) / (max - min || 1)) * 100}%, ${colors.border} 100%)`,
+            }}
+          />
+          <input
+            type="number"
+            min={min}
+            max={max}
+            step={definition.type === "float" ? "0.01" : "1"}
+            value={String(value)}
+            onChange={(event) => {
+              const nextValue =
+                definition.type === "float"
+                  ? parseFloat(event.target.value)
+                  : parseInt(event.target.value, 10);
+              updateDraftParam(
+                paramKey,
+                Number.isNaN(nextValue) ? definition.default : nextValue,
+              );
+            }}
+            className="w-24 rounded-xl border px-3 py-2 text-sm outline-none"
+            style={{
+              borderColor: colors.border,
+              backgroundColor: colors.bg.primary,
+              color: colors.text.primary,
+            }}
+          />
+        </div>
+        <div
+          className="flex items-center justify-between text-[11px]"
+          style={{ color: colors.text.secondary }}
+        >
+          <span>{min}</span>
+          <span>{max}</span>
+        </div>
+      </div>
+    );
+  };
+
+  const renderParamControl = (
+    paramKey: string,
+    definition: ConfigParamDefinition,
+  ) => {
+    const value = draftParams[paramKey] ?? definition.default;
+
+    if (definition.type === "enum") {
+      return (
+        <select
+          value={String(value)}
+          onChange={(event) => updateDraftParam(paramKey, event.target.value)}
+          className="w-full rounded-xl border px-3 py-2.5 text-sm outline-none"
+          style={{
+            borderColor: colors.border,
+            backgroundColor: colors.bg.primary,
+            color: colors.text.primary,
+          }}
+        >
+          {(definition.options || []).map((option) => (
+            <option key={option} value={option}>
+              {option}
+            </option>
+          ))}
+        </select>
+      );
+    }
+
+    return renderNumericParameter(paramKey, definition);
+  };
+
+  return (
+    <div className="mx-auto flex min-h-full max-w-7xl flex-col">
+      <div className="flex-1 space-y-6 pb-4">
+        <div>
+          <h2
+            className="text-lg font-semibold"
+            style={{ color: colors.text.primary }}
+          >
+            Configuration
+          </h2>
+        </div>
+
+        <div className="space-y-4">
+          <div
+            className="flex items-center gap-1 overflow-x-auto rounded-2xl border p-1"
+            style={{
+              borderColor: colors.border,
+              backgroundColor: colors.bg.primary,
+            }}
+            role="tablist"
+            aria-label="Configuration sections"
+          >
+            {CONFIG_SECTION_META.map((section) => {
+              const isActive = activeSubtab === section.id;
+              const status =
+                section.id === "configs"
+                  ? `${configs.length}/${MAX_CONFIGS} selected`
+                  : hasConfiguredResponseFormat
+                    ? `${namedSchemaCount} fields`
+                    : "Required";
+
+              return (
+                <button
+                  key={section.id}
+                  type="button"
+                  onClick={() => setActiveSubtab(section.id)}
+                  className="relative min-w-[200px] rounded-xl px-4 py-2.5 text-left transition-all"
+                  style={{
+                    backgroundColor: isActive
+                      ? colors.bg.secondary
+                      : "transparent",
+                    color: colors.text.primary,
+                    boxShadow: isActive ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
+                  }}
+                  aria-selected={isActive}
+                  role="tab"
+                >
+                  {isActive && (
+                    <span
+                      className="absolute bottom-0 left-4 right-4 h-0.5 rounded-full"
+                      style={{ backgroundColor: colors.accent.primary }}
+                    />
+                  )}
+                  <div className="flex items-center gap-2">
+                    <span
+                      className="flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-bold"
+                      style={{
+                        backgroundColor: isActive
+                          ? colors.accent.primary
+                          : colors.bg.primary,
+                        color: isActive ? "#ffffff" : colors.text.secondary,
+                      }}
+                    >
+                      {section.index}
+                    </span>
+                    <div className="min-w-0">
+                      <div className="text-sm font-medium leading-5">
+                        {section.title}
+                      </div>
+                      <div
+                        className="text-[11px]"
+                        style={{ color: colors.text.secondary }}
+                      >
+                        {status}
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+
+          {activeSubtab === "configs" && (
+            <div
+              className="rounded-2xl border p-4"
+              style={{
+                borderColor: colors.border,
+                backgroundColor: colors.bg.primary,
+              }}
+              role="tabpanel"
+            >
+              {configs.length > 0 && (
+                <div
+                  className="mb-4 rounded-2xl border p-3"
+                  style={{
+                    borderColor: colors.border,
+                    backgroundColor: colors.bg.secondary,
+                  }}
+                >
+                  <div className="mb-3 flex items-center justify-between gap-3">
+                    <h3
+                      className="text-sm font-semibold"
+                      style={{ color: colors.text.primary }}
+                    >
+                      Selected behavior
+                    </h3>
+                  </div>
+                  <div className="flex flex-wrap gap-2">
+                    {configs.map((config) => (
+                      <SelectionChip
+                        key={`${config.config_id}-${config.config_version}`}
+                        config={config}
+                        onRemove={removeSelection}
+                      />
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              <div
+                className="mb-4 inline-flex items-center gap-0 rounded-full p-1"
+                style={{ backgroundColor: colors.bg.secondary }}
+              >
+                <button
+                  type="button"
+                  onClick={() => setMode("existing")}
+                  className="cursor-pointer rounded-full px-4 py-1.5 text-sm font-medium transition-all"
+                  style={{
+                    backgroundColor:
+                      mode === "existing" ? "#171717" : "transparent",
+                    color:
+                      mode === "existing" ? "#ffffff" : colors.text.secondary,
+                  }}
+                >
+                  Saved
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setMode("create")}
+                  className="cursor-pointer rounded-full px-4 py-1.5 text-sm font-medium transition-all"
+                  style={{
+                    backgroundColor:
+                      mode === "create" ? "#171717" : "transparent",
+                    color:
+                      mode === "create" ? "#ffffff" : colors.text.secondary,
+                  }}
+                >
+                  New
+                </button>
+              </div>
+
+              {mode === "existing" ? (
+                <div className="space-y-5">
+                  <h3
+                    className="text-sm font-semibold"
+                    style={{ color: colors.text.primary }}
+                  >
+                    Choose behavior
+                  </h3>
+
+                  <div>
+                    <div className="mb-5">
+                      <input
+                        value={searchQuery}
+                        onChange={(event) => setSearchQuery(event.target.value)}
+                        placeholder="Search behaviors..."
+                        className="w-full rounded-2xl border px-4 py-3 text-sm outline-none"
+                        style={{
+                          borderColor: colors.border,
+                          backgroundColor: colors.bg.secondary,
+                          color: colors.text.primary,
+                        }}
+                      />
+                    </div>
+
+                    {isLoadingConfigs ? (
+                      <div
+                        className="py-12 text-center text-sm"
+                        style={{ color: colors.text.secondary }}
+                      >
+                        Loading behaviors...
+                      </div>
+                    ) : configError ? (
+                      <div
+                        className="py-12 text-center text-sm"
+                        style={{ color: colors.status.error }}
+                      >
+                        {configError}
+                      </div>
+                    ) : filteredConfigCards.length === 0 ? (
+                      <div
+                        className="py-12 text-center text-sm"
+                        style={{ color: colors.text.secondary }}
+                      >
+                        No saved behaviors found.
+                      </div>
+                    ) : (
+                      <div className="grid items-start gap-4 md:grid-cols-2 xl:grid-cols-3">
+                        {filteredConfigCards.map((config) => {
+                          const versions =
+                            versionStateByConfig[config.id] ||
+                            buildInitialVersionState();
+                          const isExpanded = expandedConfigId === config.id;
+                          const selectedVersions = selectedCountForConfig(
+                            config.id,
+                          );
+                          const defaultSelected = isSelected(config.id, 1);
+                          const defaultLoading =
+                            loadingSelectionKeys[`${config.id}:1`];
+                          const knownVersionCount = versions.items.length;
+                          const hasVersionsPanel =
+                            knownVersionCount > 0 ||
+                            versions.hasMore ||
+                            versions.isLoading ||
+                            Boolean(versions.error);
+                          const previewVersions = versions.items.slice(0, 3);
+                          const versionCountLabel =
+                            knownVersionCount > 0
+                              ? `${knownVersionCount}${versions.hasMore ? "+" : ""}`
+                              : "Check";
+
+                          return (
+                            <div
+                              key={config.id}
+                              className="self-start rounded-2xl border transition-shadow"
+                              style={{
+                                borderColor: isExpanded
+                                  ? colors.accent.primary
+                                  : colors.border,
+                                backgroundColor: colors.bg.primary,
+                                boxShadow: isExpanded
+                                  ? "0 10px 22px rgba(23, 23, 23, 0.07)"
+                                  : "0 1px 2px rgba(23, 23, 23, 0.03)",
+                              }}
+                            >
+                              <button
+                                onClick={() => toggleConfigExpansion(config.id)}
+                                className="cursor-pointer w-full rounded-2xl p-4 text-left"
+                              >
+                                <div className="flex items-start justify-between gap-3">
+                                  <div className="min-w-0">
+                                    <h4
+                                      className="truncate text-base font-semibold"
+                                      style={{ color: colors.text.primary }}
+                                    >
+                                      {config.name}
+                                    </h4>
+                                    <div
+                                      className="mt-1 text-xs"
+                                      style={{ color: colors.text.secondary }}
+                                    >
+                                      {formatRelativeTime(config.updated_at)}
+                                    </div>
+                                  </div>
+                                  {selectedVersions > 0 && (
+                                    <span
+                                      className="rounded-full px-2.5 py-1 text-[11px] font-medium"
+                                      style={{
+                                        backgroundColor:
+                                          "rgba(23, 23, 23, 0.06)",
+                                        color: colors.text.primary,
+                                      }}
+                                    >
+                                      In use
+                                    </span>
+                                  )}
+                                </div>
+
+                                <p
+                                  className="mt-3 text-sm leading-6"
+                                  style={{ color: colors.text.secondary }}
+                                >
+                                  {config.description ||
+                                    "No description provided for this configuration."}
+                                </p>
+                              </button>
+
+                              <div className="px-4 pb-4 pt-1">
+                                <div className="flex items-center gap-2">
+                                  <button
+                                    onClick={(event) => {
+                                      event.stopPropagation();
+                                      void toggleVersionSelection(config, 1);
+                                    }}
+                                    disabled={Boolean(defaultLoading)}
+                                    className="flex-1 rounded-xl px-4 py-2.5 text-sm font-medium"
+                                    style={{
+                                      backgroundColor: defaultSelected
+                                        ? colors.bg.secondary
+                                        : colors.accent.primary,
+                                      color: defaultSelected
+                                        ? colors.text.primary
+                                        : "#ffffff",
+                                      border: `1px solid ${defaultSelected ? colors.border : colors.accent.primary}`,
+                                      cursor: defaultLoading
+                                        ? "progress"
+                                        : "pointer",
+                                    }}
+                                  >
+                                    {defaultLoading
+                                      ? "Working..."
+                                      : defaultSelected
+                                        ? "Added"
+                                        : "Use this behavior"}
+                                  </button>
+                                </div>
+                                {hasVersionsPanel && (
+                                  <button
+                                    type="button"
+                                    onClick={() =>
+                                      toggleConfigExpansion(config.id)
+                                    }
+                                    aria-label={
+                                      isExpanded
+                                        ? "Hide saved versions"
+                                        : "View saved versions"
+                                    }
+                                    className="mt-2 flex w-full items-center gap-3 rounded-xl border px-3 py-2.5 text-left transition-colors"
+                                    style={{
+                                      borderColor: isExpanded
+                                        ? colors.accent.primary
+                                        : colors.border,
+                                      backgroundColor: isExpanded
+                                        ? colors.bg.secondary
+                                        : colors.bg.primary,
+                                      color: colors.text.primary,
+                                    }}
+                                  >
+                                    <div className="relative h-7 w-9 shrink-0">
+                                      <span
+                                        className="absolute inset-x-1 top-0 h-4 rounded-md border"
+                                        style={{
+                                          borderColor: colors.border,
+                                          backgroundColor: colors.bg.primary,
+                                          opacity: 0.65,
+                                        }}
+                                      />
+                                      <span
+                                        className="absolute inset-x-0 top-1.5 h-4 rounded-md border"
+                                        style={{
+                                          borderColor: isExpanded
+                                            ? colors.accent.primary
+                                            : colors.border,
+                                          backgroundColor: colors.bg.secondary,
+                                        }}
+                                      />
+                                    </div>
+
+                                    <div className="flex min-w-0 flex-1 items-center gap-2">
+                                      <div className="flex items-center -space-x-1.5">
+                                        {previewVersions.length > 0
+                                          ? previewVersions.map((version) => (
+                                              <span
+                                                key={version.id}
+                                                className="inline-flex h-6 min-w-6 items-center justify-center rounded-full border px-1.5 text-[10px] font-semibold"
+                                                style={{
+                                                  borderColor: colors.border,
+                                                  backgroundColor:
+                                                    colors.bg.primary,
+                                                  color: colors.text.secondary,
+                                                }}
+                                              >
+                                                v{version.version}
+                                              </span>
+                                            ))
+                                          : null}
+                                      </div>
+                                      <span className="text-xs font-semibold">
+                                        {isExpanded
+                                          ? "Hide versions"
+                                          : "View more versions"}
+                                      </span>
+                                      <span
+                                        className="rounded-full px-2 py-1 text-[10px] font-semibold"
+                                        style={{
+                                          backgroundColor: isExpanded
+                                            ? "rgba(23, 23, 23, 0.08)"
+                                            : colors.bg.secondary,
+                                          color: colors.text.secondary,
+                                        }}
+                                      >
+                                        {versionCountLabel}
+                                      </span>
+                                    </div>
+
+                                    <span
+                                      className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full border"
+                                      style={{
+                                        borderColor: isExpanded
+                                          ? colors.accent.primary
+                                          : colors.border,
+                                        backgroundColor: colors.bg.primary,
+                                      }}
+                                    >
+                                      <svg
+                                        className="h-3.5 w-3.5 transition-transform duration-300 ease-in-out"
+                                        fill="none"
+                                        viewBox="0 0 24 24"
+                                        stroke="currentColor"
+                                        strokeWidth={2}
+                                        style={{
+                                          transform: isExpanded
+                                            ? "rotate(180deg)"
+                                            : "rotate(0deg)",
+                                        }}
+                                      >
+                                        <path
+                                          strokeLinecap="round"
+                                          strokeLinejoin="round"
+                                          d="M19 9l-7 7-7-7"
+                                        />
+                                      </svg>
+                                    </span>
+                                  </button>
+                                )}
+                              </div>
+
+                              {hasVersionsPanel && (
+                                <div
+                                  className={`overflow-hidden border-t transition-all duration-300 ease-in-out ${isExpanded ? "max-h-[30rem] opacity-100" : "max-h-0 opacity-0"}`}
+                                  style={{
+                                    borderColor: colors.border,
+                                    backgroundColor: colors.bg.secondary,
+                                    pointerEvents: isExpanded ? "auto" : "none",
+                                  }}
+                                >
+                                  <div className="px-4 pb-4 pt-3">
+                                    <div className="mb-3 flex items-center justify-between gap-3">
+                                      <div>
+                                        <div
+                                          className="text-sm font-semibold"
+                                          style={{ color: colors.text.primary }}
+                                        >
+                                          Other versions
+                                        </div>
+                                        <div
+                                          className="mt-0.5 text-[11px]"
+                                          style={{
+                                            color: colors.text.secondary,
+                                          }}
+                                        >
+                                          Choose a different saved version for
+                                          this behavior.
+                                        </div>
+                                      </div>
+                                      <button
+                                        onClick={() =>
+                                          void loadVersions(config.id, true)
+                                        }
+                                        className="cursor-pointer text-xs font-medium"
+                                        style={{ color: colors.text.secondary }}
+                                      >
+                                        Refresh
+                                      </button>
+                                    </div>
+
+                                    {versions.error ? (
+                                      <div
+                                        className="rounded-xl border px-3 py-4 text-sm"
+                                        style={{
+                                          borderColor: colors.border,
+                                          color: colors.status.error,
+                                        }}
+                                      >
+                                        {versions.error}
+                                      </div>
+                                    ) : versions.items.length === 0 &&
+                                      versions.isLoading ? (
+                                      <div
+                                        className="rounded-xl border px-3 py-4 text-sm"
+                                        style={{
+                                          borderColor: colors.border,
+                                          color: colors.text.secondary,
+                                        }}
+                                      >
+                                        Loading versions...
+                                      </div>
+                                    ) : (
+                                      <div className="max-h-64 space-y-2 overflow-auto pr-1">
+                                        {versions.items.map((version) => {
+                                          const selected = isSelected(
+                                            config.id,
+                                            version.version,
+                                          );
+                                          const selectionKey = `${config.id}:${version.version}`;
+                                          const isSelecting =
+                                            loadingSelectionKeys[selectionKey];
+
+                                          return (
+                                            <div
+                                              key={version.id}
+                                              className="rounded-xl border px-3 py-2.5"
+                                              style={{
+                                                borderColor: selected
+                                                  ? colors.accent.primary
+                                                  : colors.border,
+                                                backgroundColor:
+                                                  colors.bg.primary,
+                                              }}
+                                            >
+                                              <div className="flex items-center justify-between gap-3">
+                                                <div className="min-w-0">
+                                                  <div
+                                                    className="text-sm font-semibold"
+                                                    style={{
+                                                      color:
+                                                        colors.text.primary,
+                                                    }}
+                                                  >
+                                                    Version {version.version}
+                                                  </div>
+                                                  <div
+                                                    className="mt-0.5 text-xs leading-5"
+                                                    style={{
+                                                      color:
+                                                        colors.text.secondary,
+                                                    }}
+                                                  >
+                                                    {version.commit_message ||
+                                                      config.name}
+                                                  </div>
+                                                  <div
+                                                    className="mt-1 text-[11px]"
+                                                    style={{
+                                                      color:
+                                                        colors.text.secondary,
+                                                    }}
+                                                  >
+                                                    {formatRelativeTime(
+                                                      version.updated_at,
+                                                    )}
+                                                  </div>
+                                                </div>
+                                                <button
+                                                  onClick={() =>
+                                                    void toggleVersionSelection(
+                                                      config,
+                                                      version.version,
+                                                    )
+                                                  }
+                                                  disabled={Boolean(
+                                                    isSelecting,
+                                                  )}
+                                                  className="shrink-0 rounded-xl px-3 py-2 text-xs font-medium"
+                                                  style={{
+                                                    backgroundColor: selected
+                                                      ? colors.bg.secondary
+                                                      : colors.accent.primary,
+                                                    color: selected
+                                                      ? colors.text.primary
+                                                      : "#ffffff",
+                                                    border: `1px solid ${selected ? colors.border : colors.accent.primary}`,
+                                                    cursor: isSelecting
+                                                      ? "progress"
+                                                      : "pointer",
+                                                  }}
+                                                >
+                                                  {isSelecting
+                                                    ? "Working..."
+                                                    : selected
+                                                      ? "Remove"
+                                                      : "Select"}
+                                                </button>
+                                              </div>
+                                            </div>
+                                          );
+                                        })}
+
+                                        {versions.hasMore && (
+                                          <button
+                                            onClick={() =>
+                                              void loadVersions(
+                                                config.id,
+                                                false,
+                                              )
+                                            }
+                                            disabled={versions.isLoading}
+                                            className="cursor-pointer w-full rounded-xl border px-4 py-2.5 text-sm font-medium"
+                                            style={{
+                                              borderColor: colors.border,
+                                              backgroundColor:
+                                                colors.bg.primary,
+                                              color: colors.text.primary,
+                                            }}
+                                          >
+                                            {versions.isLoading
+                                              ? "Loading more versions..."
+                                              : "Load more versions"}
+                                          </button>
+                                        )}
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+                              )}
+                            </div>
+                          );
+                        })}
+                      </div>
+                    )}
+
+                    <div ref={loadMoreRef} className="h-2 w-full" />
+
+                    {isLoadingMoreConfigs && (
+                      <div
+                        className="pt-4 text-center text-sm"
+                        style={{ color: colors.text.secondary }}
+                      >
+                        Loading more behaviors...
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ) : (
+                <div>
+                  <div className="grid gap-5 lg:grid-cols-[minmax(0,1.15fr)_1px_minmax(24rem,0.95fr)] lg:gap-5">
+                    <div>
+                      <div>
+                        <div className="mb-3">
+                          <h4
+                            className="text-sm font-semibold"
+                            style={{ color: colors.text.primary }}
+                          >
+                            Instructions
+                          </h4>
+                        </div>
+                        <textarea
+                          value={String(draftParams.instructions || "")}
+                          onChange={(event) =>
+                            updateDraftParam("instructions", event.target.value)
+                          }
+                          placeholder="Tell the AI how it should respond"
+                          className="min-h-[28rem] w-full rounded-2xl border px-4 py-4 text-sm leading-6 outline-none"
+                          style={{
+                            borderColor: colors.border,
+                            backgroundColor: colors.bg.primary,
+                            color: colors.text.primary,
+                          }}
+                        />
+                      </div>
+                    </div>
+
+                    <div
+                      className="hidden lg:block"
+                      style={{ backgroundColor: colors.border }}
+                    />
+
+                    <div className="space-y-8">
+                      <div>
+                        <h4
+                          className="mb-4 text-sm font-semibold"
+                          style={{ color: colors.text.primary }}
+                        >
+                          Basics
+                        </h4>
+                        <div className="space-y-4">
+                          <div>
+                            <label
+                              className="mb-2 block text-xs font-semibold"
+                              style={{ color: colors.text.primary }}
+                            >
+                              Behavior name
+                            </label>
+                            <input
+                              value={configName}
+                              onChange={(event) =>
+                                setConfigName(event.target.value)
+                              }
+                              placeholder="e.g. Helpful grader"
+                              className="w-full rounded-xl border px-4 py-3 text-sm outline-none"
+                              style={{
+                                borderColor: colors.border,
+                                backgroundColor: colors.bg.primary,
+                                color: colors.text.primary,
+                              }}
+                            />
+                          </div>
+
+                          <div className="grid gap-4 md:grid-cols-2">
+                            <div>
+                              <label
+                                className="mb-2 block text-xs font-semibold"
+                                style={{ color: colors.text.primary }}
+                              >
+                                AI service
+                              </label>
+                              <select
+                                value={draft.completion.provider}
+                                onChange={(event) => {
+                                  const provider = event.target
+                                    .value as "openai";
+                                  const defaultModel =
+                                    getDefaultModelForProvider(provider);
+                                  setDraft((prev) => ({
+                                    ...prev,
+                                    completion: {
+                                      ...prev.completion,
+                                      provider,
+                                      params: {
+                                        instructions: String(
+                                          prev.completion.params.instructions ||
+                                            "",
+                                        ),
+                                        model: defaultModel,
+                                        ...buildDefaultParams(defaultModel),
+                                      },
+                                    },
+                                  }));
+                                }}
+                                className="w-full rounded-xl border px-4 py-3 text-sm outline-none"
+                                style={{
+                                  borderColor: colors.border,
+                                  backgroundColor: colors.bg.primary,
+                                  color: colors.text.primary,
+                                }}
+                              >
+                                {PROVIDER_OPTIONS.map((option) => (
+                                  <option
+                                    key={option.value}
+                                    value={option.value}
+                                  >
+                                    {option.label}
+                                  </option>
+                                ))}
+                              </select>
+                            </div>
+
+                            <div>
+                              <label
+                                className="mb-2 block text-xs font-semibold"
+                                style={{ color: colors.text.primary }}
+                              >
+                                Model
+                              </label>
+                              <select
+                                value={currentModel}
+                                onChange={(event) =>
+                                  handleModelChange(event.target.value)
+                                }
+                                className="w-full rounded-xl border px-4 py-3 text-sm outline-none"
+                                style={{
+                                  borderColor: colors.border,
+                                  backgroundColor: colors.bg.primary,
+                                  color: colors.text.primary,
+                                }}
+                              >
+                                {providerModels.map((model) => (
+                                  <option key={model.value} value={model.value}>
+                                    {model.label}
+                                  </option>
+                                ))}
+                              </select>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      <details
+                        className="rounded-2xl border px-4 py-3"
+                        style={{
+                          borderColor: colors.border,
+                          backgroundColor: colors.bg.secondary,
+                        }}
+                      >
+                        <summary
+                          className="cursor-pointer text-sm font-semibold"
+                          style={{ color: colors.text.primary }}
+                        >
+                          Advanced settings
+                        </summary>
+                        <div className="mt-4">
+                          {Object.entries(currentParamDefs).map(
+                            ([paramKey, definition]) => (
+                              <div
+                                key={paramKey}
+                                className="border-b py-4 last:border-b-0"
+                                style={{ borderColor: colors.border }}
+                              >
+                                <div className="mb-3 flex items-start justify-between gap-3">
+                                  <div>
+                                    <div
+                                      className="text-sm font-semibold"
+                                      style={{ color: colors.text.primary }}
+                                    >
+                                      {paramKey}
+                                    </div>
+                                    <div
+                                      className="mt-1 text-xs leading-5"
+                                      style={{ color: colors.text.secondary }}
+                                    >
+                                      {definition.description}
+                                    </div>
+                                  </div>
+                                  <span
+                                    className="rounded-full px-2 py-0.5 text-[11px]"
+                                    style={{
+                                      backgroundColor: colors.bg.primary,
+                                      color: colors.text.secondary,
+                                    }}
+                                  >
+                                    default {String(definition.default)}
+                                  </span>
+                                </div>
+                                {renderParamControl(paramKey, definition)}
+                              </div>
+                            ),
+                          )}
+                        </div>
+                      </details>
+
+                      <div>
+                        <div className="mb-4">
+                          <h4
+                            className="text-sm font-semibold"
+                            style={{ color: colors.text.primary }}
+                          >
+                            Save behavior
+                          </h4>
+                        </div>
+
+                        <div className="space-y-4">
+                          <div>
+                            <label
+                              className="mb-2 block text-xs font-semibold"
+                              style={{ color: colors.text.primary }}
+                            >
+                              Save note
+                            </label>
+                            <input
+                              value={commitMessage}
+                              onChange={(event) =>
+                                setCommitMessage(event.target.value)
+                              }
+                              placeholder="Optional"
+                              className="w-full rounded-xl border px-4 py-3 text-sm outline-none"
+                              style={{
+                                borderColor: colors.border,
+                                backgroundColor: colors.bg.primary,
+                                color: colors.text.primary,
+                              }}
+                            />
+                          </div>
+
+                          <div
+                            className="rounded-xl p-3"
+                            style={{ backgroundColor: colors.bg.secondary }}
+                          >
+                            <div
+                              className="text-xs font-semibold uppercase tracking-[0.18em]"
+                              style={{ color: colors.text.secondary }}
+                            >
+                              Summary
+                            </div>
+                            <div className="mt-3 space-y-1.5 text-sm">
+                              <div style={{ color: colors.text.primary }}>
+                                {configName.trim() || "Unnamed configuration"}
+                              </div>
+                              <div style={{ color: colors.text.secondary }}>
+                                {draft.completion.provider}/{currentModel}
+                              </div>
+                              <div style={{ color: colors.text.secondary }}>
+                                {Object.keys(currentParamDefs).length} parameter
+                                {Object.keys(currentParamDefs).length === 1
+                                  ? ""
+                                  : "s"}{" "}
+                                configured
+                              </div>
+                            </div>
+                          </div>
+
+                          <button
+                            onClick={() => void handleCreateAndAdd()}
+                            disabled={isSaving || !configName.trim()}
+                            className="w-full rounded-2xl px-4 py-3 text-sm font-semibold"
+                            style={{
+                              backgroundColor:
+                                isSaving || !configName.trim()
+                                  ? colors.bg.primary
+                                  : colors.accent.primary,
+                              color:
+                                isSaving || !configName.trim()
+                                  ? colors.text.secondary
+                                  : "#ffffff",
+                              border: `1px solid ${isSaving || !configName.trim() ? colors.border : colors.accent.primary}`,
+                              cursor:
+                                isSaving || !configName.trim()
+                                  ? "not-allowed"
+                                  : "pointer",
+                            }}
+                          >
+                            {isSaving ? "Saving behavior..." : "Save behavior"}
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {activeSubtab === "schema" && (
+            <div
+              className="rounded-2xl border p-6"
+              style={{
+                borderColor: colors.border,
+                backgroundColor: colors.bg.primary,
+              }}
+              role="tabpanel"
+            >
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <h3
+                    className="text-sm font-semibold"
+                    style={{ color: colors.text.primary }}
+                  >
+                    Response format
+                  </h3>
+                  <p
+                    className="text-xs mt-1"
+                    style={{ color: colors.text.secondary }}
+                  >
+                    {hasConfiguredResponseFormat
+                      ? `${namedSchemaCount} field(s) defined`
+                      : "No schema defined. Response format is required."}
+                  </p>
+                </div>
+                <button
+                  onClick={() => setSchemaModalOpen(true)}
+                  className="cursor-pointer rounded-lg px-4 py-2 text-sm font-medium"
+                  style={{
+                    backgroundColor: colors.accent.primary,
+                    color: "#fff",
+                  }}
+                >
+                  {hasConfiguredResponseFormat
+                    ? "Edit schema"
+                    : "Define schema"}
+                </button>
+              </div>
+
+              {hasConfiguredResponseFormat && (
+                <div className="mt-4 flex flex-wrap gap-2">
+                  {outputSchema
+                    .filter((p) => p.name.trim())
+                    .map((p) => (
+                      <span
+                        key={p.id}
+                        className="inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs"
+                        style={{
+                          borderColor: colors.border,
+                          color: colors.text.primary,
+                        }}
+                      >
+                        <span className="font-medium">{p.name}</span>
+                        <span style={{ color: colors.text.secondary }}>
+                          {p.type}
+                          {p.isArray ? "[]" : ""}
+                        </span>
+                      </span>
+                    ))}
+                </div>
+              )}
+
+              <OutputSchemaModal
+                open={schemaModalOpen}
+                onClose={() => setSchemaModalOpen(false)}
+                schema={outputSchema}
+                setSchema={setOutputSchema}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+      {/* end space-y-6 content wrapper */}
+
+      <div
+        className="sticky bottom-0 z-10 flex items-center justify-between border-t py-2"
+        style={{
+          backgroundColor: colors.bg.secondary,
+          borderColor: colors.border,
+          marginLeft: "-1.5rem",
+          marginRight: "-1.5rem",
+          paddingLeft: "1.5rem",
+          paddingRight: "1.5rem",
+        }}
+      >
+        <button
+          onClick={
+            activeSubtab === "schema"
+              ? () => setActiveSubtab("configs")
+              : onBack
+          }
+          className="cursor-pointer rounded-lg border px-6 py-2.5 text-sm font-medium flex items-center gap-2"
+          style={{
+            borderColor: colors.border,
+            color: colors.text.primary,
+            backgroundColor: colors.bg.primary,
+          }}
+        >
+          <svg
+            className="w-3.5 h-3.5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M15 19l-7-7 7-7"
+            />
+          </svg>
+          Back
+        </button>
+
+        <div className="flex items-center gap-3">
+          {activeSubtab === "schema" && !canFinishFromSchema && (
+            <span className="text-xs" style={{ color: colors.text.secondary }}>
+              {schemaBlockerMessage}
+            </span>
+          )}
+          <button
+            onClick={
+              activeSubtab === "configs"
+                ? () => setActiveSubtab("schema")
+                : onNext
+            }
+            disabled={activeSubtab === "schema" && !canFinishFromSchema}
+            className="rounded-lg px-6 py-2.5 text-sm font-medium"
+            style={{
+              backgroundColor:
+                activeSubtab === "configs" || canFinishFromSchema
+                  ? colors.accent.primary
+                  : colors.bg.secondary,
+              color:
+                activeSubtab === "configs" || canFinishFromSchema
+                  ? "#ffffff"
+                  : colors.text.secondary,
+              cursor:
+                activeSubtab === "schema" && !canFinishFromSchema
+                  ? "not-allowed"
+                  : "pointer",
+              border: `1px solid ${activeSubtab === "configs" || canFinishFromSchema ? colors.accent.primary : colors.border}`,
+            }}
+          >
+            {activeSubtab === "configs"
+              ? "Next: Response Format"
+              : "Next: Review"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/app/assessment/config/api.ts b/app/assessment/config/api.ts
new file mode 100644
index 0000000..55603d6
--- /dev/null
+++ b/app/assessment/config/api.ts
@@ -0,0 +1,264 @@
+import {
+  ConfigBlob,
+  CompletionParams,
+  ConfigCreate,
+  ConfigListResponse,
+  ConfigPublic,
+  ConfigVersionCreate,
+  ConfigVersionItems,
+  ConfigVersionListResponse,
+  ConfigVersionPublic,
+  ConfigVersionResponse,
+  ConfigWithVersionResponse,
+} from "@/app/lib/configTypes";
+import { apiFetch } from "@/app/lib/apiClient";
+import { STORAGE_KEY } from "@/app/lib/constants/keystore";
+import { ConfigSelection } from "../types";
+import { CACHE_INVALIDATED_EVENT } from "./constants";
+
+export interface PagedResult<T> {
+  items: T[];
+  hasMore: boolean;
+  nextSkip: number;
+}
+
+function getApiKey(): string | null {
+  if (typeof window === "undefined") return null;
+
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (!stored) return null;
+
+    const keys = JSON.parse(stored);
+    return keys.length > 0 ? keys[0].key : null;
+  } catch (error) {
+    console.error(
+      "Failed to load API key for assessment config module:",
+      error,
+    );
+    return null;
+  }
+}
+
+function normalizeConfigBlobForApi(configBlob: ConfigBlob): ConfigBlob {
+  const nextParams: Partial<CompletionParams> = {};
+
+  Object.entries(configBlob.completion.params).forEach(([key, value]) => {
+    if (value !== undefined && value !== "") {
+      nextParams[key] = value;
+    }
+  });
+
+  return {
+    completion: {
+      provider: configBlob.completion.provider,
+      type: "text",
+      params: nextParams as CompletionParams,
+    },
+  };
+}
+
+function buildPageResult<T>(
+  items: T[],
+  skip: number,
+  limit: number,
+): PagedResult<T> {
+  return {
+    items,
+    hasMore: items.length === limit,
+    nextSkip: skip + items.length,
+  };
+}
+
+async function requestJson<T>(url: string, init?: RequestInit): Promise<T> {
+  const apiKey = getApiKey();
+  if (!apiKey) {
+    throw new Error("No API key found. Please add one in the Keystore.");
+  }
+
+  return apiFetch<T>(url, apiKey, init);
+}
+
+export function invalidateAssessmentConfigCache(): void {
+  if (typeof window === "undefined") return;
+
+  localStorage.removeItem("kaapi_configs_cache");
+  window.dispatchEvent(new CustomEvent(CACHE_INVALIDATED_EVENT));
+}
+
+export async function fetchConfigPage(params: {
+  skip?: number;
+  limit?: number;
+}): Promise<PagedResult<ConfigPublic>> {
+  const skip = params.skip ?? 0;
+  const limit = params.limit ?? 10;
+  const query = new URLSearchParams({
+    skip: String(skip),
+    limit: String(limit),
+  });
+  const data = await requestJson<ConfigListResponse>(
+    `/api/configs?${query.toString()}`,
+  );
+
+  if (!data.success || !data.data) {
+    throw new Error(data.error || "Failed to fetch configs");
+  }
+
+  return buildPageResult(data.data, skip, limit);
+}
+
+export async function fetchConfigVersionsPage(
+  configId: string,
+  params: {
+    skip?: number;
+    limit?: number;
+  },
+): Promise<PagedResult<ConfigVersionItems>> {
+  const skip = params.skip ?? 0;
+  const limit = params.limit ?? 10;
+  const query = new URLSearchParams({
+    skip: String(skip),
+    limit: String(limit),
+  });
+  const data = await requestJson<ConfigVersionListResponse>(
+    `/api/configs/${configId}/versions?${query.toString()}`,
+  );
+
+  if (!data.success || !data.data) {
+    throw new Error(data.error || "Failed to fetch config versions");
+  }
+
+  return buildPageResult(data.data, skip, limit);
+}
+
+export async function fetchConfigVersionDetail(
+  configId: string,
+  versionNumber: number,
+): Promise<ConfigVersionPublic> {
+  const data = await requestJson<ConfigVersionResponse>(
+    `/api/configs/${configId}/versions/${versionNumber}`,
+  );
+
+  if (!data.success || !data.data) {
+    throw new Error(data.error || "Failed to fetch version details");
+  }
+
+  return data.data;
+}
+
+export async function fetchConfigSelection(
+  config: Pick<ConfigPublic, "id" | "name">,
+  versionNumber: number,
+): Promise<ConfigSelection> {
+  const version = await fetchConfigVersionDetail(config.id, versionNumber);
+  const completion = version.config_blob.completion;
+
+  return {
+    config_id: config.id,
+    config_version: version.version,
+    name: config.name,
+    provider: completion.provider,
+    model: String(completion.params.model || ""),
+  };
+}
+
+async function findConfigByExactName(
+  name: string,
+): Promise<ConfigPublic | null> {
+  const normalizedName = name.trim().toLowerCase();
+  const limit = 100;
+  let skip = 0;
+
+  while (true) {
+    const page = await fetchConfigPage({ skip, limit });
+    const match = page.items.find(
+      (item) => item.name.trim().toLowerCase() === normalizedName,
+    );
+
+    if (match) {
+      return match;
+    }
+
+    if (!page.hasMore) {
+      return null;
+    }
+
+    skip = page.nextSkip;
+  }
+}
+
+export async function saveAssessmentConfig(params: {
+  configName: string;
+  commitMessage: string;
+  configBlob: ConfigBlob;
+}): Promise<ConfigSelection> {
+  const normalizedBlob = normalizeConfigBlobForApi(params.configBlob);
+  const trimmedName = params.configName.trim();
+
+  if (!trimmedName) {
+    throw new Error("Configuration name is required");
+  }
+
+  const existingConfig = await findConfigByExactName(trimmedName);
+
+  if (existingConfig) {
+    const versionCreate: ConfigVersionCreate = {
+      config_blob: normalizedBlob,
+      commit_message:
+        params.commitMessage.trim() || "Updated assessment configuration",
+    };
+    const data = await requestJson<ConfigVersionResponse>(
+      `/api/configs/${existingConfig.id}/versions`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(versionCreate),
+      },
+    );
+
+    if (!data.success || !data.data) {
+      throw new Error(data.error || "Failed to create config version");
+    }
+
+    invalidateAssessmentConfigCache();
+
+    return {
+      config_id: existingConfig.id,
+      config_version: data.data.version,
+      name: existingConfig.name,
+      provider: normalizedBlob.completion.provider,
+      model: String(normalizedBlob.completion.params.model || ""),
+    };
+  }
+
+  const configCreate: ConfigCreate = {
+    name: trimmedName,
+    description: "Assessment configuration",
+    config_blob: normalizedBlob,
+    commit_message:
+      params.commitMessage.trim() || "Initial assessment configuration",
+  };
+  const data = await requestJson<ConfigWithVersionResponse>("/api/configs", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(configCreate),
+  });
+
+  if (!data.success || !data.data) {
+    throw new Error(data.error || "Failed to create configuration");
+  }
+
+  invalidateAssessmentConfigCache();
+
+  return {
+    config_id: data.data.id,
+    config_version: data.data.version.version,
+    name: data.data.name,
+    provider: normalizedBlob.completion.provider,
+    model: String(normalizedBlob.completion.params.model || ""),
+  };
+}
diff --git a/app/assessment/config/constants.ts b/app/assessment/config/constants.ts
new file mode 100644
index 0000000..b841bdb
--- /dev/null
+++ b/app/assessment/config/constants.ts
@@ -0,0 +1,294 @@
+import { ConfigBlob } from "@/app/lib/configTypes";
+
+export type ConfigParamType = "float" | "int" | "enum";
+
+export interface ConfigParamDefinition {
+  type: ConfigParamType;
+  default: number | string;
+  description: string;
+  min?: number;
+  max?: number;
+  options?: string[];
+}
+
+export interface AssessmentModelConfig {
+  provider: "openai";
+  model_name: string;
+  config: Record<string, ConfigParamDefinition>;
+}
+
+export interface ModelOption {
+  value: string;
+  label: string;
+}
+
+// ── OpenAI param configs ─────────────────────────────────────────
+
+const GPT4_STYLE_CONFIG = {
+  top_p: {
+    max: 1.0,
+    min: 0.0,
+    type: "float",
+    default: 1.0,
+    description: "Nucleus sampling. Use either this or temperature, not both.",
+  },
+  temperature: {
+    max: 2.0,
+    min: 0.0,
+    type: "float",
+    default: 1.0,
+    description: "Controls randomness. Lower = more deterministic.",
+  },
+} as const satisfies Record<string, ConfigParamDefinition>;
+
+// ── All model configs ────────────────────────────────────────────
+
+export const ASSESSMENT_MODEL_CONFIGS: AssessmentModelConfig[] = [
+  // OpenAI
+  { provider: "openai", model_name: "gpt-4o-mini", config: GPT4_STYLE_CONFIG },
+  { provider: "openai", model_name: "gpt-4o", config: GPT4_STYLE_CONFIG },
+  { provider: "openai", model_name: "gpt-4.1", config: GPT4_STYLE_CONFIG },
+  { provider: "openai", model_name: "gpt-4.1-mini", config: GPT4_STYLE_CONFIG },
+  { provider: "openai", model_name: "gpt-4.1-nano", config: GPT4_STYLE_CONFIG },
+  {
+    provider: "openai",
+    model_name: "o3-mini",
+    config: {
+      effort: {
+        type: "enum",
+        default: "medium",
+        options: ["low", "medium", "high"],
+        description:
+          "How long the model spends reasoning. Higher = better but slower.",
+      },
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+  {
+    provider: "openai",
+    model_name: "o3",
+    config: {
+      effort: {
+        type: "enum",
+        default: "medium",
+        options: ["low", "medium", "high"],
+        description:
+          "How long the model spends reasoning. Higher = better but slower.",
+      },
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise", "null"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+  {
+    provider: "openai",
+    model_name: "o4-mini",
+    config: {
+      effort: {
+        type: "enum",
+        default: "medium",
+        options: ["low", "medium", "high"],
+        description:
+          "How long the model spends reasoning. Higher = better but slower.",
+      },
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise", "null"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+  {
+    provider: "openai",
+    model_name: "gpt-5",
+    config: {
+      effort: {
+        type: "enum",
+        default: "medium",
+        options: ["minimal", "low", "medium", "high"],
+        description:
+          "How long the model spends reasoning. Higher = better but slower.",
+      },
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise", "null"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+  {
+    provider: "openai",
+    model_name: "gpt-5-mini",
+    config: {
+      effort: {
+        type: "enum",
+        default: "medium",
+        options: ["minimal", "low", "medium", "high"],
+        description:
+          "How long the model spends reasoning. Higher = better but slower.",
+      },
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise", "null"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+  {
+    provider: "openai",
+    model_name: "gpt-5-nano",
+    config: {
+      effort: {
+        type: "enum",
+        default: "medium",
+        options: ["minimal", "low", "medium", "high"],
+        description:
+          "How long the model spends reasoning. Higher = better but slower.",
+      },
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise", "null"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+  {
+    provider: "openai",
+    model_name: "gpt-5.1",
+    config: {
+      effort: {
+        type: "enum",
+        default: "medium",
+        options: ["none", "low", "medium", "high"],
+        description:
+          "How long the model spends reasoning. Higher = better but slower.",
+      },
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise", "null"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+  {
+    provider: "openai",
+    model_name: "gpt-5.1-chat-latest",
+    config: {
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise", "null"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+  {
+    provider: "openai",
+    model_name: "gpt-5.2",
+    config: {
+      effort: {
+        type: "enum",
+        default: "medium",
+        options: ["none", "low", "medium", "high", "xhigh"],
+        description:
+          "How long the model spends reasoning. Higher = better but slower.",
+      },
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise", "null"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+  {
+    provider: "openai",
+    model_name: "gpt-5.2-chat-latest",
+    config: {
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise", "null"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+  {
+    provider: "openai",
+    model_name: "gpt-5.2-pro",
+    config: {
+      summary: {
+        type: "enum",
+        default: "auto",
+        options: ["auto", "detailed", "concise", "null"],
+        description: "Summarize the reasoning result.",
+      },
+    },
+  },
+];
+
+export const CACHE_KEY = "kaapi_configs_cache";
+export const CACHE_MAX_AGE_MS = 5 * 60 * 1000;
+export const PAGE_SIZE = 10;
+export const CACHE_INVALIDATED_EVENT = "kaapi:config-cache-invalidated";
+
+export const PROVIDER_OPTIONS = [{ value: "openai", label: "OpenAI" }] as const;
+
+export function getModelsByProvider(provider: string): ModelOption[] {
+  return ASSESSMENT_MODEL_CONFIGS.filter((m) => m.provider === provider).map(
+    ({ model_name }) => ({
+      value: model_name,
+      label: model_name,
+    }),
+  );
+}
+
+export function getDefaultModelForProvider(provider: string): string {
+  return (
+    ASSESSMENT_MODEL_CONFIGS.find((m) => m.provider === provider)?.model_name ??
+    "gpt-4o-mini"
+  );
+}
+
+export function getModelConfigDefinition(
+  modelName: string,
+): Record<string, ConfigParamDefinition> {
+  return (
+    ASSESSMENT_MODEL_CONFIGS.find((item) => item.model_name === modelName)
+      ?.config ?? GPT4_STYLE_CONFIG
+  );
+}
+
+export function buildDefaultParams(
+  modelName: string,
+): Record<string, number | string> {
+  const definition = getModelConfigDefinition(modelName);
+  return Object.fromEntries(
+    Object.entries(definition).map(([key, value]) => [key, value.default]),
+  );
+}
+
+export const DEFAULT_CONFIG: ConfigBlob = {
+  completion: {
+    provider: "openai",
+    type: "text",
+    params: {
+      model: "gpt-4o-mini",
+      instructions: "",
+      ...buildDefaultParams("gpt-4o-mini"),
+    },
+  },
+};
diff --git a/app/assessment/errorUtils.ts b/app/assessment/errorUtils.ts
new file mode 100644
index 0000000..00f1a0d
--- /dev/null
+++ b/app/assessment/errorUtils.ts
@@ -0,0 +1,19 @@
+export function isForbiddenApiError(error: unknown): boolean {
+  if (!error || !(error instanceof Error)) return false;
+  const message = error.message.toLowerCase();
+  return (
+    /request failed:\s*403/i.test(error.message) ||
+    message.includes("forbidden") ||
+    message.includes("not enabled") ||
+    message.includes("permission denied")
+  );
+}
+
+export function handleForbiddenApiError(
+  error: unknown,
+  onForbidden?: () => void,
+): boolean {
+  if (!isForbiddenApiError(error)) return false;
+  onForbidden?.();
+  return true;
+}
diff --git a/app/assessment/page.tsx b/app/assessment/page.tsx
new file mode 100644
index 0000000..3a5b0b9
--- /dev/null
+++ b/app/assessment/page.tsx
@@ -0,0 +1,5 @@
+import AssessmentPageClient from "@/app/assessment/AssessmentPageClient";
+
+export default function AssessmentPage() {
+  return <AssessmentPageClient />;
+}
diff --git a/app/assessment/schemaUtils.ts b/app/assessment/schemaUtils.ts
new file mode 100644
index 0000000..802e54a
--- /dev/null
+++ b/app/assessment/schemaUtils.ts
@@ -0,0 +1,42 @@
+import { SchemaProperty } from "./types";
+
+/**
+ * Convert SchemaProperty[] tree to a JSON Schema object.
+ * Returns null if no valid properties exist.
+ */
+export function schemaToJsonSchema(
+  properties: SchemaProperty[],
+): object | null {
+  if (properties.length === 0) return null;
+
+  const props: Record<string, object> = {};
+  const required: string[] = [];
+
+  properties.forEach((p) => {
+    if (!p.name.trim()) return;
+
+    let def: object;
+    if (p.type === "object") {
+      def = schemaToJsonSchema(p.children) || { type: "object" };
+    } else if (p.type === "enum") {
+      def = { type: "string", enum: p.enumValues.filter((v) => v.trim()) };
+    } else {
+      def = { type: p.type };
+    }
+
+    if (p.isArray) {
+      def = { type: "array", items: def };
+    }
+
+    props[p.name] = def;
+    if (p.isRequired) required.push(p.name);
+  });
+
+  if (Object.keys(props).length === 0) return null;
+
+  return {
+    type: "object",
+    properties: props,
+    ...(required.length > 0 ? { required } : {}),
+  };
+}
diff --git a/app/assessment/store.ts b/app/assessment/store.ts
new file mode 100644
index 0000000..2170877
--- /dev/null
+++ b/app/assessment/store.ts
@@ -0,0 +1,60 @@
+import { create } from "zustand";
+import { ColumnMapping } from "./types";
+
+interface AssessmentDatasetState {
+  datasetId: string;
+  datasetName: string;
+  columns: string[];
+  sampleRow: Record<string, string>;
+  columnMapping: ColumnMapping;
+
+  setDatasetId: (id: string) => void;
+  setDatasetName: (name: string) => void;
+  setDataset: (
+    datasetId: string,
+    columns: string[],
+    sampleRow: Record<string, string>,
+    datasetName?: string,
+  ) => void;
+  setColumnMapping: (mapping: ColumnMapping) => void;
+  clearDataset: () => void;
+}
+
+const DEFAULT_MAPPING: ColumnMapping = {
+  textColumns: [],
+  attachments: [],
+  groundTruthColumns: [],
+};
+
+export const useAssessmentDatasetStore = create<AssessmentDatasetState>()(
+  (set) => ({
+    datasetId: "",
+    datasetName: "",
+    columns: [],
+    sampleRow: {},
+    columnMapping: DEFAULT_MAPPING,
+
+    setDatasetId: (id) => set({ datasetId: id }),
+    setDatasetName: (name) => set({ datasetName: name }),
+
+    setDataset: (datasetId, columns, sampleRow, datasetName) =>
+      set((state) => ({
+        datasetId,
+        datasetName: datasetName ?? state.datasetName,
+        columns,
+        sampleRow,
+        columnMapping: DEFAULT_MAPPING,
+      })),
+
+    setColumnMapping: (mapping) => set({ columnMapping: mapping }),
+
+    clearDataset: () =>
+      set({
+        datasetId: "",
+        datasetName: "",
+        columns: [],
+        sampleRow: {},
+        columnMapping: DEFAULT_MAPPING,
+      }),
+  }),
+);
diff --git a/app/assessment/types.ts b/app/assessment/types.ts
new file mode 100644
index 0000000..e3a79ae
--- /dev/null
+++ b/app/assessment/types.ts
@@ -0,0 +1,69 @@
+/**
+ * Types for Assessment Evaluation
+ */
+
+export interface Attachment {
+  column: string;
+  type: "image" | "pdf";
+  format: "url" | "base64";
+}
+
+export interface ConfigSelection {
+  config_id: string;
+  config_version: number;
+  // UI display fields
+  name?: string;
+  provider?: string;
+  model?: string;
+}
+
+export interface ColumnMapping {
+  textColumns: string[];
+  attachments: Attachment[];
+  groundTruthColumns: string[];
+}
+
+export interface AssessmentFormState {
+  experimentName: string;
+  datasetId: string;
+  datasetName: string;
+  columns: string[]; // all columns from the dataset CSV
+  columnMapping: ColumnMapping;
+  promptTemplate: string;
+  outputSchema: SchemaProperty[];
+  configs: ConfigSelection[];
+}
+
+export interface AssessmentRequestBody {
+  experiment_name: string;
+  dataset_id: string;
+  prompt_template: string | null;
+  text_columns: string[];
+  attachments: Attachment[];
+  configs: { config_id: string; config_version: number }[];
+}
+
+export const ATTACHMENT_FORMATS: Record<string, string[]> = {
+  image: ["url", "base64"],
+  pdf: ["url", "base64"],
+};
+
+export type SchemaPropertyType =
+  | "string"
+  | "number"
+  | "integer"
+  | "boolean"
+  | "object"
+  | "enum";
+
+export interface SchemaProperty {
+  id: string;
+  name: string;
+  type: SchemaPropertyType;
+  isArray: boolean;
+  isRequired: boolean;
+  children: SchemaProperty[]; // for object type
+  enumValues: string[]; // for enum type
+}
+
+export const MAX_CONFIGS = 4;
diff --git a/app/assessment/useAssessmentEvents.ts b/app/assessment/useAssessmentEvents.ts
new file mode 100644
index 0000000..b9849f0
--- /dev/null
+++ b/app/assessment/useAssessmentEvents.ts
@@ -0,0 +1,204 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import {
+  ConsecutiveBreaker,
+  CircuitState,
+  handleAll,
+  circuitBreaker,
+  BrokenCircuitError,
+} from "cockatiel";
+
+const MAX_CONSECUTIVE_FAILURES = 5;
+const HALF_OPEN_AFTER_MS = 30_000;
+const RECONNECT_DELAY_MS = 1_000;
+
+function isAbortError(error: unknown) {
+  return error instanceof DOMException && error.name === "AbortError";
+}
+
+export function useAssessmentEvents(
+  apiKey: string,
+  onEvent: () => void,
+  enabled: boolean = true,
+  onForbidden?: () => void,
+) {
+  const onEventRef = useRef(onEvent);
+
+  useEffect(() => {
+    onEventRef.current = onEvent;
+  }, [onEvent]);
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    let reader: ReadableStreamDefaultReader<Uint8Array> | null = null;
+    let cancelled = false;
+    const abortController = new AbortController();
+    let reconnectTimeout: ReturnType<typeof setTimeout> | null = null;
+    let startInFlight = false;
+
+    const breakerPolicy = circuitBreaker(handleAll, {
+      halfOpenAfter: HALF_OPEN_AFTER_MS,
+      breaker: new ConsecutiveBreaker(MAX_CONSECUTIVE_FAILURES),
+    });
+
+    const scheduleReconnect = (delayMs = RECONNECT_DELAY_MS) => {
+      if (cancelled || reconnectTimeout !== null) return;
+      reconnectTimeout = setTimeout(() => {
+        reconnectTimeout = null;
+        void start();
+      }, delayMs);
+    };
+
+    breakerPolicy.onBreak(() => {
+      console.error("[useAssessmentEvents] Assessment SSE circuit opened.");
+    });
+
+    breakerPolicy.onHalfOpen(() => {
+      if (!cancelled) {
+        void start();
+      }
+    });
+
+    const connectAndStream = async (): Promise<void> => {
+      let response: Response;
+
+      try {
+        const headers = new Headers();
+        if (apiKey) {
+          headers.set("X-API-KEY", apiKey);
+        }
+
+        response = await fetch("/api/assessment/events", {
+          headers,
+          cache: "no-store",
+          credentials: "include",
+          signal: abortController.signal,
+        });
+      } catch (error) {
+        if (
+          cancelled ||
+          abortController.signal.aborted ||
+          isAbortError(error)
+        ) {
+          return;
+        }
+        throw error;
+      }
+
+      if (!response.ok || !response.body) {
+        if (response.status === 403 && onForbidden) {
+          onForbidden();
+        }
+        throw new Error(`SSE connection failed: ${response.status}`);
+      }
+
+      reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+
+      while (!cancelled) {
+        let chunk: ReadableStreamReadResult<Uint8Array>;
+
+        try {
+          chunk = await reader.read();
+        } catch (error) {
+          if (
+            cancelled ||
+            abortController.signal.aborted ||
+            isAbortError(error)
+          ) {
+            return;
+          }
+          throw error;
+        }
+
+        const { value, done } = chunk;
+        if (done) {
+          break;
+        }
+
+        buffer += decoder.decode(value, { stream: true });
+
+        const events = buffer.split("\n\n");
+        buffer = events.pop() || "";
+
+        for (const event of events) {
+          const lines = event.split("\n");
+          const eventName =
+            lines.find((line) => line.startsWith("event: "))?.slice(7) ?? "";
+          const dataLine = lines.find((line) => line.startsWith("data: "));
+          if (!dataLine || eventName === "ready") {
+            continue;
+          }
+
+          const relevantEvents = [
+            "assessment.child_status_changed",
+            "assessment.results_preparing",
+            "assessment.results_ready",
+          ];
+
+          try {
+            const payload = JSON.parse(dataLine.slice(6));
+            const eventType = payload?.type || payload?.data?.type || eventName;
+            if (relevantEvents.includes(eventType)) {
+              onEventRef.current();
+            }
+          } catch {
+            onEventRef.current();
+          }
+        }
+      }
+
+      if (!cancelled) {
+        throw new Error("Assessment SSE connection closed unexpectedly.");
+      }
+    };
+
+    const start = async () => {
+      if (cancelled || startInFlight) return;
+      startInFlight = true;
+
+      try {
+        await breakerPolicy.execute(async ({ signal }) => {
+          if (cancelled || signal.aborted) return;
+          await connectAndStream();
+        });
+
+        if (!cancelled && breakerPolicy.state === CircuitState.Closed) {
+          scheduleReconnect();
+        }
+      } catch (err) {
+        if (cancelled) return;
+        if (err instanceof BrokenCircuitError) {
+          console.error(
+            "[useAssessmentEvents] Assessment SSE circuit open; waiting for half-open.",
+          );
+          return;
+        }
+
+        console.error(
+          "[useAssessmentEvents] Assessment SSE connection failed.",
+          err,
+        );
+        if (breakerPolicy.state === CircuitState.Closed) {
+          scheduleReconnect();
+        }
+      } finally {
+        startInFlight = false;
+      }
+    };
+
+    void start();
+
+    return () => {
+      cancelled = true;
+      if (reconnectTimeout !== null) {
+        clearTimeout(reconnectTimeout);
+      }
+      void reader?.cancel().catch(() => {});
+      abortController.abort();
+    };
+  }, [apiKey, enabled, onForbidden]);
+}
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index 9fcd585..4f1300d 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -10,19 +10,20 @@ import { useRouter } from "next/navigation";
 import Image from "next/image";
 import { useAuth } from "@/app/lib/context/AuthContext";
 import {
+  AssessmentIcon,
+  BookOpenIcon,
+  ChevronRightIcon,
   ClipboardIcon,
   DocumentFileIcon,
-  BookOpenIcon,
   GearIcon,
-  SlidersIcon,
   ShieldCheckIcon,
-  ChevronRightIcon,
+  SlidersIcon,
 } from "@/app/components/icons";
+import { MenuItem, SidebarProps } from "@/app/lib/types/nav";
 import { LoginModal } from "@/app/components/auth";
 import { Branding, UserMenuPopover } from "@/app/components/user-menu";
 import GatePopover from "@/app/components/GatePopover";
 import { NAV_ITEMS } from "@/app/lib/navConfig";
-import { MenuItem, SidebarProps } from "@/app/lib/types/nav";
 
 /** Routes that are always accessible without auth */
 const PUBLIC_ROUTES = new Set(["/evaluations"]);
@@ -32,7 +33,9 @@ export default function Sidebar({
   activeRoute = "/evaluations",
 }: SidebarProps) {
   const router = useRouter();
-  const { currentUser, googleProfile, isAuthenticated, logout } = useAuth();
+  const [hasMounted, setHasMounted] = useState(false);
+  const { currentUser, googleProfile, isAuthenticated, logout, hasFeature } =
+    useAuth();
   const [expandedMenus, setExpandedMenus] = useState<Record<string, boolean>>({
     Evaluations: true,
     Configurations: false,
@@ -44,6 +47,10 @@ export default function Sidebar({
   const [gateRect, setGateRect] = useState<DOMRect | null>(null);
   const gateTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
   useEffect(() => {
     const saved = localStorage.getItem("sidebar-expanded-menus");
     if (saved) {
@@ -115,16 +122,25 @@ export default function Sidebar({
     gear: <GearIcon className="w-5 h-5" />,
     shield: <ShieldCheckIcon />,
     sliders: <SlidersIcon />,
+    assessment: <AssessmentIcon />,
   };
 
-  const navItems: MenuItem[] = NAV_ITEMS.filter(
-    (item) => !item.superuserOnly || currentUser?.is_superuser,
-  ).map((item) => ({
+  // Feature-gated items are deferred until after mount so the sidebar
+  // structure is identical between SSR and the first client render.
+  const navItems: MenuItem[] = NAV_ITEMS.filter((item) => {
+    if (item.superuserOnly && !currentUser?.is_superuser) return false;
+    if (item.featureFlag) {
+      if (!hasMounted) return false;
+      if (!hasFeature(item.featureFlag)) return false;
+    }
+    return true;
+  }).map((item) => ({
     name: item.name,
     route: item.route,
     icon: iconMap[item.icon],
     submenu: item.submenu,
     gateDescription: item.gateDescription,
+    featureFlag: item.featureFlag,
   }));
 
   const getGateDescription = (name: string): string => {
diff --git a/app/components/icons/index.tsx b/app/components/icons/index.tsx
index 450a0ed..95276de 100644
--- a/app/components/icons/index.tsx
+++ b/app/components/icons/index.tsx
@@ -40,6 +40,7 @@ export { default as BookOpenIcon } from "./sidebar/BookOpenIcon";
 export { default as SlidersIcon } from "./sidebar/SlidersIcon";
 export { default as ShieldCheckIcon } from "./sidebar/ShieldCheckIcon";
 export { default as LogoutIcon } from "./sidebar/LogoutIcon";
+export { default as AssessmentIcon } from "./sidebar/AssessmentIcon";
 
 // Prompt Editor Icons
 export { default as ChevronRightIcon } from "./prompt-editor/ChevronRightIcon";
diff --git a/app/components/icons/sidebar/AssessmentIcon.tsx b/app/components/icons/sidebar/AssessmentIcon.tsx
new file mode 100644
index 0000000..3de2421
--- /dev/null
+++ b/app/components/icons/sidebar/AssessmentIcon.tsx
@@ -0,0 +1,21 @@
+interface IconProps {
+  className?: string;
+}
+
+export default function AssessmentIcon({ className }: IconProps) {
+  return (
+    <svg
+      className={`w-5 h-5 ${className ?? ""}`}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+      />
+    </svg>
+  );
+}
diff --git a/app/components/speech-to-text/ModelComparisonCard.tsx b/app/components/speech-to-text/ModelComparisonCard.tsx
new file mode 100644
index 0000000..7b11240
--- /dev/null
+++ b/app/components/speech-to-text/ModelComparisonCard.tsx
@@ -0,0 +1,387 @@
+"use client";
+
+/**
+ * ModelComparisonCard Component
+ *
+ * Minimal card design showing just the essentials:
+ * - Model name + WER score
+ * - Expandable for full details
+ */
+
+import React, { useState, useEffect } from "react";
+import { colors } from "@/app/lib/colors";
+import { ChevronDownIcon, ChevronRightIcon } from "@/app/components/icons";
+
+interface WerMetrics {
+  wer: number;
+  substitutions: number;
+  deletions: number;
+  insertions: number;
+  semantic_errors: number;
+  reference_word_count: number;
+  hypothesis_word_count: number;
+}
+
+interface ModelComparisonCardProps {
+  modelId: string;
+  modelName: string;
+  provider: string;
+  transcript: string;
+  status: "success" | "error" | "pending";
+  error?: string;
+  strictMetrics?: WerMetrics;
+  lenientMetrics?: WerMetrics;
+  isBest?: boolean;
+  isWorst?: boolean;
+  isSelected?: boolean;
+  onClick?: () => void;
+  compact?: boolean;
+}
+
+// Get WER color based on value
+const getWerColor = (wer: number) => {
+  if (wer < 5) return colors.status.success;
+  if (wer < 10) return "#ca8a04"; // yellow-600
+  if (wer < 20) return colors.status.warning;
+  return colors.status.error;
+};
+
+// Get WER label
+const getWerLabel = (wer: number) => {
+  if (wer < 5) return "Excellent";
+  if (wer < 10) return "Good";
+  if (wer < 20) return "Fair";
+  return "Poor";
+};
+
+export default function ModelComparisonCard({
+  modelId,
+  modelName,
+  transcript,
+  status,
+  error,
+  strictMetrics,
+  lenientMetrics,
+  isBest = false,
+  isWorst = false,
+  onClick,
+}: ModelComparisonCardProps) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const detailsId = `model-card-details-${modelId}`;
+  const werPercent = strictMetrics ? strictMetrics.wer * 100 : null;
+  const lenientWerPercent = lenientMetrics ? lenientMetrics.wer * 100 : null;
+
+  // Reset expanded state when model changes.
+  useEffect(() => {
+    setIsExpanded(false);
+  }, [modelId]);
+
+  // Reset expanded state while pending.
+  useEffect(() => {
+    if (status === "pending") {
+      setIsExpanded(false);
+    }
+  }, [status]);
+
+  const handleExpandToggle = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsExpanded((prev) => !prev);
+  };
+
+  // Check if we have enough data to show expanded content
+  const hasExpandedContent =
+    status === "success" && (transcript || strictMetrics);
+
+  return (
+    <div
+      className="rounded-lg border overflow-hidden"
+      style={{
+        borderColor: isBest
+          ? colors.status.success
+          : isWorst
+            ? colors.status.error
+            : colors.border,
+        backgroundColor: isBest ? "rgba(22, 163, 74, 0.02)" : colors.bg.primary,
+        borderWidth: isBest ? "2px" : "1px",
+      }}
+    >
+      {/* Minimal Header - Always Visible */}
+      <div className="p-3">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2 min-w-0">
+            {/* Model Name */}
+            <span
+              className="text-sm font-medium truncate"
+              style={{ color: colors.text.primary }}
+            >
+              {modelName}
+            </span>
+
+            {/* Best Badge - small */}
+            {isBest && (
+              <span className="text-xs px-1.5 py-0.5 rounded-full font-medium flex-shrink-0 bg-[#dcfce7] text-[#15803d]">
+                Best
+              </span>
+            )}
+          </div>
+
+          {/* Right side: Status/WER + Expand */}
+          <div className="flex items-center gap-2 flex-shrink-0">
+            {status === "pending" && (
+              <div
+                className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
+                style={{
+                  borderColor: colors.text.secondary,
+                  borderTopColor: "transparent",
+                }}
+              />
+            )}
+
+            {status === "error" && (
+              <span className="text-xs px-1.5 py-0.5 rounded bg-[#fee2e2] text-[#dc2626]">
+                Error
+              </span>
+            )}
+
+            {status === "success" && werPercent !== null && (
+              <span
+                className="text-sm font-bold tabular-nums"
+                style={{ color: getWerColor(werPercent) }}
+              >
+                {werPercent.toFixed(1)}%
+              </span>
+            )}
+
+            {/* Expand Button - only show if there's content to expand */}
+            {hasExpandedContent && (
+              <button
+                type="button"
+                onClick={handleExpandToggle}
+                className="p-1 rounded hover:bg-gray-100"
+                style={{ color: colors.text.secondary }}
+                aria-label={isExpanded ? "Collapse details" : "Expand details"}
+                aria-expanded={isExpanded}
+                aria-controls={detailsId}
+              >
+                <ChevronDownIcon
+                  className="w-4 h-4"
+                  style={{
+                    transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+                    transition: "transform 0.2s ease",
+                  }}
+                />
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Error Message */}
+        {status === "error" && (
+          <div
+            className="text-xs mt-2 truncate"
+            style={{ color: colors.status.error }}
+          >
+            {error || "Transcription failed"}
+          </div>
+        )}
+      </div>
+
+      {/* Expanded Details - only render if expanded AND has content */}
+      {isExpanded && hasExpandedContent && (
+        <div
+          id={detailsId}
+          className="border-t px-3 pb-3 pt-2 space-y-3"
+          style={{
+            borderColor: colors.border,
+            backgroundColor: colors.bg.secondary,
+          }}
+        >
+          {/* WER Comparison */}
+          {werPercent !== null && lenientWerPercent !== null ? (
+            <div className="grid grid-cols-2 gap-3">
+              <div
+                className="p-2 rounded"
+                style={{ backgroundColor: colors.bg.primary }}
+              >
+                <div
+                  className="text-xs mb-0.5"
+                  style={{ color: colors.text.secondary }}
+                >
+                  Strict WER
+                </div>
+                <div className="flex items-baseline gap-1">
+                  <span
+                    className="text-lg font-bold"
+                    style={{ color: getWerColor(werPercent) }}
+                  >
+                    {werPercent.toFixed(1)}%
+                  </span>
+                  <span
+                    className="text-xs"
+                    style={{ color: getWerColor(werPercent) }}
+                  >
+                    {getWerLabel(werPercent)}
+                  </span>
+                </div>
+              </div>
+              <div
+                className="p-2 rounded"
+                style={{ backgroundColor: colors.bg.primary }}
+              >
+                <div
+                  className="text-xs mb-0.5"
+                  style={{ color: colors.text.secondary }}
+                >
+                  Lenient WER
+                </div>
+                <div className="flex items-baseline gap-1">
+                  <span
+                    className="text-lg font-bold"
+                    style={{ color: getWerColor(lenientWerPercent) }}
+                  >
+                    {lenientWerPercent.toFixed(1)}%
+                  </span>
+                  <span
+                    className="text-xs"
+                    style={{ color: getWerColor(lenientWerPercent) }}
+                  >
+                    {getWerLabel(lenientWerPercent)}
+                  </span>
+                </div>
+              </div>
+            </div>
+          ) : (
+            // Show loading state for WER if not available yet
+            <div className="flex items-center justify-center py-2">
+              <div
+                className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin mr-2"
+                style={{
+                  borderColor: colors.text.secondary,
+                  borderTopColor: "transparent",
+                }}
+              />
+              <span
+                className="text-xs"
+                style={{ color: colors.text.secondary }}
+              >
+                Computing WER...
+              </span>
+            </div>
+          )}
+
+          {/* Error Breakdown */}
+          {strictMetrics && (
+            <div className="grid grid-cols-4 gap-2 text-center">
+              <div
+                className="p-1.5 rounded"
+                style={{ backgroundColor: colors.bg.primary }}
+              >
+                <div
+                  className="text-xs"
+                  style={{ color: colors.text.secondary }}
+                >
+                  Sub
+                </div>
+                <div
+                  className="text-sm font-medium"
+                  style={{ color: colors.status.warning }}
+                >
+                  {strictMetrics.substitutions}
+                </div>
+              </div>
+              <div
+                className="p-1.5 rounded"
+                style={{ backgroundColor: colors.bg.primary }}
+              >
+                <div
+                  className="text-xs"
+                  style={{ color: colors.text.secondary }}
+                >
+                  Del
+                </div>
+                <div
+                  className="text-sm font-medium"
+                  style={{ color: colors.status.error }}
+                >
+                  {strictMetrics.deletions}
+                </div>
+              </div>
+              <div
+                className="p-1.5 rounded"
+                style={{ backgroundColor: colors.bg.primary }}
+              >
+                <div
+                  className="text-xs"
+                  style={{ color: colors.text.secondary }}
+                >
+                  Ins
+                </div>
+                <div
+                  className="text-sm font-medium"
+                  style={{ color: colors.accent.primary }}
+                >
+                  {strictMetrics.insertions}
+                </div>
+              </div>
+              <div
+                className="p-1.5 rounded"
+                style={{ backgroundColor: colors.bg.primary }}
+              >
+                <div
+                  className="text-xs"
+                  style={{ color: colors.text.secondary }}
+                >
+                  Words
+                </div>
+                <div
+                  className="text-sm font-medium"
+                  style={{ color: colors.text.primary }}
+                >
+                  {strictMetrics.reference_word_count}
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Transcription */}
+          {transcript && (
+            <div>
+              <div
+                className="text-xs font-medium mb-1"
+                style={{ color: colors.text.secondary }}
+              >
+                Transcription
+              </div>
+              <div
+                className="text-xs p-2 rounded leading-relaxed max-h-24 overflow-auto"
+                style={{
+                  backgroundColor: colors.bg.primary,
+                  color: colors.text.primary,
+                }}
+              >
+                {transcript}
+              </div>
+            </div>
+          )}
+
+          {/* View Diff Button */}
+          {onClick && (
+            <button
+              type="button"
+              onClick={onClick}
+              className="w-full py-1.5 rounded text-xs font-medium flex items-center justify-center gap-1"
+              style={{
+                backgroundColor: colors.bg.primary,
+                color: colors.text.secondary,
+                border: `1px solid ${colors.border}`,
+              }}
+            >
+              <ChevronRightIcon className="w-3 h-3" />
+              View Diff Comparison
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/app/lib/authCookie.ts b/app/lib/authCookie.ts
index 8f60025..2a000eb 100644
--- a/app/lib/authCookie.ts
+++ b/app/lib/authCookie.ts
@@ -2,9 +2,12 @@ import type { NextResponse } from "next/server";
 
 /** Cookie name used by middleware to gate routes. */
 export const ROLE_COOKIE = "kaapi_role";
+export const API_KEY_COOKIE = "kaapi_api_key";
+export const FEATURES_COOKIE = "kaapi_features";
 
 interface UserLike {
   is_superuser?: boolean;
+  features?: unknown;
 }
 
 /** Set the role cookie by appending a raw Set-Cookie header (won't overwrite existing cookies). */
@@ -31,6 +34,32 @@ export function clearRoleCookie(response: NextResponse): void {
   response.headers.append("Set-Cookie", cookie);
 }
 
+export function setFeaturesCookieFromBody(
+  response: NextResponse,
+  body: unknown,
+): void {
+  if (!body || typeof body !== "object") return;
+
+  const user = extractUser(body);
+  if (!user || !Array.isArray(user.features)) return;
+
+  const features = user.features.filter(
+    (f): f is string => typeof f === "string",
+  );
+  const value = encodeURIComponent(JSON.stringify(features));
+  const secure = process.env.NODE_ENV === "production" ? "; Secure" : "";
+  const cookie = `${FEATURES_COOKIE}=${value}; Path=/; Max-Age=${60 * 60 * 24 * 7}; SameSite=Lax${secure}`;
+
+  response.headers.append("Set-Cookie", cookie);
+}
+
+export function clearFeaturesCookie(response: NextResponse): void {
+  const secure = process.env.NODE_ENV === "production" ? "; Secure" : "";
+  const cookie = `${FEATURES_COOKIE}=; Path=/; Max-Age=0; SameSite=Lax${secure}`;
+
+  response.headers.append("Set-Cookie", cookie);
+}
+
 function extractUser(body: unknown): UserLike | null {
   if (!body || typeof body !== "object") return null;
   const outer = body as Record<string, unknown>;
diff --git a/app/lib/colors.ts b/app/lib/colors.ts
index 0a3d032..e2ab47b 100644
--- a/app/lib/colors.ts
+++ b/app/lib/colors.ts
@@ -14,6 +14,7 @@ export const colors = {
   text: {
     primary: "#171717",
     secondary: "#737373",
+    white: "#ffffff",
   },
 
   // Borders
diff --git a/app/lib/configTypes.ts b/app/lib/configTypes.ts
new file mode 100644
index 0000000..157cf0d
--- /dev/null
+++ b/app/lib/configTypes.ts
@@ -0,0 +1,101 @@
+/**
+ * TypeScript types for Config Management API
+ * Based on CONFIG_MGMT.md specification
+ */
+
+// Config Blob Structure
+export interface Tool {
+  type: "file_search";
+  knowledge_base_ids: string[];
+  max_num_results: number;
+}
+
+export interface CompletionParams {
+  model: string;
+  instructions: string;
+  temperature?: number;
+  // Frontend uses tools array for UI, but backend expects flattened fields
+  tools?: Tool[];
+  // Backend expects these as direct fields (flattened from tools array)
+  knowledge_base_ids?: string[];
+  max_num_results?: number;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any; // Allow additional provider-specific params
+}
+
+export interface CompletionConfig {
+  provider: "openai" | "google";
+  type?: "text" | "stt" | "tts"; // Config type - optional for backward compatibility
+  params: CompletionParams;
+}
+
+export interface ConfigBlob {
+  completion: CompletionConfig;
+}
+
+// Request Types
+export interface ConfigCreate {
+  name: string; // 1-128 chars, unique per project
+  description?: string | null; // max 512 chars
+  config_blob: ConfigBlob;
+  commit_message?: string | null; // max 512 chars
+}
+
+export interface ConfigUpdate {
+  name?: string | null; // 1-128 chars
+  description?: string | null; // max 512 chars
+}
+
+export interface ConfigVersionCreate {
+  config_blob: ConfigBlob;
+  commit_message?: string | null; // max 512 chars
+}
+
+// Response Types
+export interface ConfigPublic {
+  id: string; // UUID
+  name: string;
+  description: string | null;
+  project_id: number;
+  inserted_at: string; // ISO datetime
+  updated_at: string; // ISO datetime
+}
+
+export interface ConfigVersionPublic {
+  id: string; // UUID
+  config_id: string; // UUID
+  version: number; // starts at 1, auto-increments
+  config_blob: ConfigBlob;
+  commit_message: string | null;
+  inserted_at: string;
+  updated_at: string;
+}
+
+export interface ConfigWithVersion extends ConfigPublic {
+  version: ConfigVersionPublic;
+}
+
+export interface ConfigVersionItems {
+  id: string; // UUID
+  config_id: string; // UUID
+  version: number;
+  commit_message: string | null;
+  inserted_at: string;
+  updated_at: string;
+  // Note: config_blob excluded for list performance
+}
+
+// API Response Wrapper
+export interface APIResponse<T> {
+  success: boolean;
+  data: T | null;
+  error?: string | null;
+  metadata?: Record<string, unknown> | null;
+}
+
+// Helper type for list responses
+export type ConfigListResponse = APIResponse<ConfigPublic[]>;
+export type ConfigResponse = APIResponse<ConfigPublic>;
+export type ConfigWithVersionResponse = APIResponse<ConfigWithVersion>;
+export type ConfigVersionListResponse = APIResponse<ConfigVersionItems[]>;
+export type ConfigVersionResponse = APIResponse<ConfigVersionPublic>;
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index fde30b1..5e0c8da 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -36,6 +36,8 @@ export const CACHE_INVALIDATED_EVENT = "kaapi:config-cache-invalidated";
 
 /** Dispatched when the user's session is no longer valid (expired or revoked). */
 export const AUTH_EXPIRED_EVENT = "kaapi:auth-expired";
+/** Dispatched when client-side feature flags are updated. */
+export const FEATURES_UPDATED_EVENT = "kaapi:features-updated";
 
 export const PROVIDES_OPTIONS = [
   { value: "openai", label: "OpenAI" },
diff --git a/app/lib/constants/featureFlags.ts b/app/lib/constants/featureFlags.ts
new file mode 100644
index 0000000..dc16cec
--- /dev/null
+++ b/app/lib/constants/featureFlags.ts
@@ -0,0 +1,5 @@
+export const FeatureFlag = {
+  ASSESSMENT: "ASSESSMENT",
+} as const;
+
+export type FeatureFlagKey = (typeof FeatureFlag)[keyof typeof FeatureFlag];
diff --git a/app/lib/constants/keystore.ts b/app/lib/constants/keystore.ts
new file mode 100644
index 0000000..609f37c
--- /dev/null
+++ b/app/lib/constants/keystore.ts
@@ -0,0 +1 @@
+export const STORAGE_KEY = "kaapi_api_keys";
diff --git a/app/lib/context/AuthContext.tsx b/app/lib/context/AuthContext.tsx
index eb91b32..fc199dd 100644
--- a/app/lib/context/AuthContext.tsx
+++ b/app/lib/context/AuthContext.tsx
@@ -15,7 +15,11 @@ import {
   AuthContextValue,
 } from "@/app/lib/types/auth";
 import { apiFetch } from "@/app/lib/apiClient";
-import { AUTH_EXPIRED_EVENT, STORAGE_KEYS } from "@/app/lib/constants";
+import {
+  AUTH_EXPIRED_EVENT,
+  FEATURES_UPDATED_EVENT,
+  STORAGE_KEYS,
+} from "@/app/lib/constants";
 import { clearAllStorage } from "@/app/lib/utils";
 export type { User, GoogleProfile, Session } from "@/app/lib/types/auth";
 
@@ -95,6 +99,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     } else {
       localStorage.removeItem(STORAGE_KEYS.API_KEYS);
     }
+    window.dispatchEvent(new Event("kaapi-auth-changed"));
   }, []);
 
   const addKey = useCallback(
@@ -135,7 +140,9 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     setCurrentUser(null);
     clearAllStorage();
     setApiKeys([]);
-  }, [persist]);
+    window.dispatchEvent(new Event("kaapi-auth-changed"));
+    window.location.replace("/evaluations");
+  }, []);
 
   // logout when both access + refresh tokens are expired
   useEffect(() => {
@@ -144,8 +151,44 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
     return () => window.removeEventListener(AUTH_EXPIRED_EVENT, handleExpired);
   }, [logout]);
 
+  // keep auth state in sync when feature flags are updated client-side
+  useEffect(() => {
+    const handleFeaturesUpdated = (event: Event) => {
+      const customEvent = event as CustomEvent<{ features?: string[] }>;
+      const features = customEvent.detail?.features;
+      if (!Array.isArray(features)) return;
+
+      setCurrentUser((prev) =>
+        prev ? { ...prev, features: [...features] } : prev,
+      );
+      setSession((prev) =>
+        prev?.user
+          ? {
+              ...prev,
+              user: { ...prev.user, features: [...features] },
+            }
+          : prev,
+      );
+    };
+
+    window.addEventListener(
+      FEATURES_UPDATED_EVENT,
+      handleFeaturesUpdated as EventListener,
+    );
+    return () =>
+      window.removeEventListener(
+        FEATURES_UPDATED_EVENT,
+        handleFeaturesUpdated as EventListener,
+      );
+  }, []);
+
   const activeKey = apiKeys[0] ?? null;
   const isAuthenticated = !!activeKey || !!session;
+  const features = currentUser?.features ?? [];
+  const hasFeature = useCallback(
+    (flag: string) => features.includes(flag),
+    [features],
+  );
 
   return (
     <AuthContext.Provider
@@ -157,6 +200,8 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
         googleProfile: session?.googleProfile ?? null,
         session,
         isAuthenticated,
+        features,
+        hasFeature,
         addKey,
         removeKey,
         setKeys,
diff --git a/app/lib/featureState.ts b/app/lib/featureState.ts
new file mode 100644
index 0000000..9f0fbc1
--- /dev/null
+++ b/app/lib/featureState.ts
@@ -0,0 +1,67 @@
+import { FEATURES_UPDATED_EVENT, STORAGE_KEYS } from "@/app/lib/constants";
+
+const FEATURES_COOKIE = "kaapi_features";
+const COOKIE_MAX_AGE_SECONDS = 60 * 60 * 24 * 7;
+
+function parseFeatures(raw: string | undefined): string[] {
+  if (!raw) return [];
+  try {
+    const parsed: unknown = JSON.parse(decodeURIComponent(raw));
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter(
+      (feature): feature is string => typeof feature === "string",
+    );
+  } catch {
+    return [];
+  }
+}
+
+function readCookie(name: string): string | undefined {
+  if (typeof document === "undefined") return undefined;
+  const prefix = `${name}=`;
+  const entry = document.cookie
+    .split(";")
+    .map((part) => part.trim())
+    .find((part) => part.startsWith(prefix));
+  return entry?.slice(prefix.length);
+}
+
+function writeFeaturesCookie(features: string[]): void {
+  if (typeof document === "undefined") return;
+  const secure = process.env.NODE_ENV === "production" ? "; Secure" : "";
+  const value = encodeURIComponent(JSON.stringify(features));
+  document.cookie = `${FEATURES_COOKIE}=${value}; Path=/; Max-Age=${COOKIE_MAX_AGE_SECONDS}; SameSite=Lax${secure}`;
+}
+
+function syncSessionFeatures(features: string[]): void {
+  if (typeof localStorage === "undefined") return;
+  const raw = localStorage.getItem(STORAGE_KEYS.SESSION);
+  if (!raw) return;
+
+  try {
+    const parsed = JSON.parse(raw);
+    if (parsed?.user && typeof parsed.user === "object") {
+      parsed.user.features = features;
+      localStorage.setItem(STORAGE_KEYS.SESSION, JSON.stringify(parsed));
+    }
+  } catch {
+    // ignore malformed session payload
+  }
+}
+
+function broadcastFeatures(features: string[]): void {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(
+    new CustomEvent(FEATURES_UPDATED_EVENT, {
+      detail: { features },
+    }),
+  );
+}
+
+export function removeFeatureFromClient(feature: string): void {
+  const fromCookie = parseFeatures(readCookie(FEATURES_COOKIE));
+  const nextFeatures = fromCookie.filter((value) => value !== feature);
+  writeFeaturesCookie(nextFeatures);
+  syncSessionFeatures(nextFeatures);
+  broadcastFeatures(nextFeatures);
+}
diff --git a/app/lib/navConfig.ts b/app/lib/navConfig.ts
index dcf60ad..98cb958 100644
--- a/app/lib/navConfig.ts
+++ b/app/lib/navConfig.ts
@@ -1,3 +1,4 @@
+import { FeatureFlag } from "@/app/lib/constants/featureFlags";
 import { NavItemConfig, SettingsNavSection } from "@/app/lib/types/nav";
 
 export const SETTINGS_NAV: SettingsNavSection[] = [
@@ -34,6 +35,13 @@ export const NAV_ITEMS: NavItemConfig[] = [
     icon: "book",
     gateDescription: "Log in to manage your knowledge bases for RAG.",
   },
+  {
+    name: "Assessment",
+    route: "/assessment",
+    icon: "assessment",
+    featureFlag: FeatureFlag.ASSESSMENT,
+    gateDescription: "Log in to run assessments.",
+  },
   {
     name: "Configurations",
     icon: "gear",
diff --git a/app/lib/types/auth.ts b/app/lib/types/auth.ts
index 5c69a1a..cfba47d 100644
--- a/app/lib/types/auth.ts
+++ b/app/lib/types/auth.ts
@@ -6,6 +6,7 @@ export interface User {
   full_name: string;
   is_active: boolean;
   is_superuser: boolean;
+  features?: string[];
 }
 
 export interface GoogleProfile {
@@ -68,6 +69,8 @@ export interface AuthContextValue {
   googleProfile: GoogleProfile | null;
   session: Session | null;
   isAuthenticated: boolean;
+  features: string[];
+  hasFeature: (flag: string) => boolean;
   addKey: (key: APIKey) => void;
   removeKey: (id: string) => void;
   setKeys: (keys: APIKey[]) => void;
diff --git a/app/lib/types/datasets.ts b/app/lib/types/datasets.ts
new file mode 100644
index 0000000..0018781
--- /dev/null
+++ b/app/lib/types/datasets.ts
@@ -0,0 +1,10 @@
+export interface Dataset {
+  dataset_id: number;
+  dataset_name: string;
+  description?: string;
+  total_items: number;
+  original_items: number;
+  duplication_factor: number;
+  langfuse_dataset_id: string;
+  object_store_url: string;
+}
diff --git a/app/lib/types/nav.ts b/app/lib/types/nav.ts
index e17d3ec..f153b2c 100644
--- a/app/lib/types/nav.ts
+++ b/app/lib/types/nav.ts
@@ -1,4 +1,5 @@
 import React from "react";
+import type { FeatureFlagKey } from "@/app/lib/constants/featureFlags";
 
 export interface NavSubItem {
   name: string;
@@ -12,6 +13,7 @@ export interface NavItemConfig {
   submenu?: NavSubItem[];
   gateDescription?: string;
   superuserOnly?: boolean;
+  featureFlag?: FeatureFlagKey;
 }
 
 export interface SubMenuItem {
@@ -27,6 +29,7 @@ export interface MenuItem {
   icon: React.ReactNode;
   submenu?: SubMenuItem[];
   gateDescription?: string;
+  featureFlag?: FeatureFlagKey;
 }
 
 export interface SidebarProps {
diff --git a/middleware.ts b/middleware.ts
index 068da38..a5c6557 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -1,6 +1,8 @@
 import { NextResponse, type NextRequest } from "next/server";
-
-/** Route protection via `kaapi_role` cookie. Settings requires superuser. */
+import {
+  FeatureFlag,
+  type FeatureFlagKey,
+} from "@/app/lib/constants/featureFlags";
 
 const PUBLIC_ROUTES = new Set<string>([
   "/evaluations",
@@ -12,18 +14,37 @@ const PUBLIC_ROUTES = new Set<string>([
   "/coming-soon/text-to-speech",
 ]);
 
+const FEATURE_GATED_PREFIXES: Array<{
+  prefix: string;
+  flag: FeatureFlagKey;
+}> = [{ prefix: "/assessment", flag: FeatureFlag.ASSESSMENT }];
+
 const GUEST_ONLY_ROUTES = new Set<string>(["/keystore"]);
 
 const HOME_ROUTE = "/evaluations";
 const PATHNAME_STARTS_WITH = ["/settings"];
+const FEATURES_COOKIE = "kaapi_features";
+
+function parseFeatures(raw: string | undefined): Set<string> {
+  if (!raw) return new Set();
+  try {
+    const parsed: unknown = JSON.parse(decodeURIComponent(raw));
+    if (Array.isArray(parsed)) {
+      return new Set(parsed.filter((f): f is string => typeof f === "string"));
+    }
+  } catch {
+    /* ignore malformed cookie */
+  }
+  return new Set();
+}
 
 export function middleware(request: NextRequest) {
   const { pathname } = request.nextUrl;
   const role = request.cookies.get("kaapi_role")?.value;
+  const features = parseFeatures(request.cookies.get(FEATURES_COOKIE)?.value);
   const isAuthenticated = role === "superuser" || role === "user";
   const isSuperuser = role === "superuser";
 
-  // Guest-only routes: allowed when unauthenticated, blocked otherwise
   if (GUEST_ONLY_ROUTES.has(pathname)) {
     if (isAuthenticated) {
       return NextResponse.redirect(new URL(HOME_ROUTE, request.url));
@@ -31,27 +52,28 @@ export function middleware(request: NextRequest) {
     return NextResponse.next();
   }
 
-  // Allow public routes for everyone
   if (PUBLIC_ROUTES.has(pathname)) {
     return NextResponse.next();
   }
 
-  // /settings/* requires superuser
   if (PATHNAME_STARTS_WITH.some((prefix) => pathname.startsWith(prefix))) {
-    if (!isAuthenticated) {
-      return NextResponse.redirect(new URL(HOME_ROUTE, request.url));
-    }
-    if (!isSuperuser) {
+    if (!isAuthenticated || !isSuperuser) {
       return NextResponse.redirect(new URL(HOME_ROUTE, request.url));
     }
     return NextResponse.next();
   }
 
-  // Any other app route requires authentication
   if (!isAuthenticated) {
     return NextResponse.redirect(new URL(HOME_ROUTE, request.url));
   }
 
+  const gated = FEATURE_GATED_PREFIXES.find(
+    ({ prefix }) => pathname === prefix || pathname.startsWith(`${prefix}/`),
+  );
+  if (gated && !features.has(gated.flag)) {
+    return NextResponse.redirect(new URL(HOME_ROUTE, request.url));
+  }
+
   return NextResponse.next();
 }
 
diff --git a/package-lock.json b/package-lock.json
index 8b01b53..7ec6be4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "kaapi-frontend",
       "version": "0.1.0",
       "dependencies": {
+        "cockatiel": "^3.2.1",
         "@react-oauth/google": "^0.13.4",
         "date-fns": "^4.1.0",
         "date-fns-tz": "^3.2.0",
@@ -15,7 +16,9 @@
         "react": "19.2.0",
         "react-dom": "19.2.0",
         "react-router-dom": "^7.9.5",
-        "swr": "^2.3.6"
+        "swr": "^2.3.6",
+        "xlsx": "^0.18.5",
+        "zustand": "^5.0.12"
       },
       "devDependencies": {
         "@eslint/js": "^9.39.2",
@@ -1595,7 +1598,7 @@
       "version": "19.2.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
       "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -2175,6 +2178,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -2594,6 +2606,19 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -2667,6 +2692,24 @@
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
       "license": "MIT"
     },
+    "node_modules/cockatiel": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/cockatiel/-/cockatiel-3.2.1.tgz",
+      "integrity": "sha512-gfrHV6ZPkquExvMh9IOkKsBzNDk6sDuZ6DdBGUBkvFnTCqCxzpuq48RySgP0AnaqQkw2zynOFj9yly6T1Q2G5Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -2727,6 +2770,18 @@
         "node": ">=18"
       }
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2746,7 +2801,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/damerau-levenshtein": {
@@ -3753,6 +3808,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -6418,6 +6482,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/stable-hash": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz",
@@ -7160,6 +7236,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
@@ -7170,6 +7264,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
@@ -7229,6 +7344,35 @@
       "peerDependencies": {
         "zod": "^3.25.0 || ^4.0.0"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.12",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.12.tgz",
+      "integrity": "sha512-i77ae3aZq4dhMlRhJVCYgMLKuSiZAaUPAct2AksxQ+gOtimhGMdXljRT21P5BNpeT4kXlLIckvkPM029OljD7g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index e65d7f7..3f94d0f 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "cockatiel": "^3.2.1",
     "@react-oauth/google": "^0.13.4",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
@@ -20,7 +21,9 @@
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "react-router-dom": "^7.9.5",
-    "swr": "^2.3.6"
+    "swr": "^2.3.6",
+    "xlsx": "^0.18.5",
+    "zustand": "^5.0.12"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000..937e974
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,3169 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
+
+"@babel/code-frame@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz"
+  integrity sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.27.1"
+    js-tokens "^4.0.0"
+    picocolors "^1.1.1"
+
+"@babel/compat-data@^7.27.2":
+  version "7.28.5"
+  resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.5.tgz"
+  integrity sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA==
+
+"@babel/core@^7.0.0", "@babel/core@^7.24.4":
+  version "7.28.5"
+  resolved "https://registry.npmjs.org/@babel/core/-/core-7.28.5.tgz"
+  integrity sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==
+  dependencies:
+    "@babel/code-frame" "^7.27.1"
+    "@babel/generator" "^7.28.5"
+    "@babel/helper-compilation-targets" "^7.27.2"
+    "@babel/helper-module-transforms" "^7.28.3"
+    "@babel/helpers" "^7.28.4"
+    "@babel/parser" "^7.28.5"
+    "@babel/template" "^7.27.2"
+    "@babel/traverse" "^7.28.5"
+    "@babel/types" "^7.28.5"
+    "@jridgewell/remapping" "^2.3.5"
+    convert-source-map "^2.0.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
+
+"@babel/generator@^7.28.5":
+  version "7.28.5"
+  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz"
+  integrity sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==
+  dependencies:
+    "@babel/parser" "^7.28.5"
+    "@babel/types" "^7.28.5"
+    "@jridgewell/gen-mapping" "^0.3.12"
+    "@jridgewell/trace-mapping" "^0.3.28"
+    jsesc "^3.0.2"
+
+"@babel/helper-compilation-targets@^7.27.2":
+  version "7.27.2"
+  resolved "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz"
+  integrity sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==
+  dependencies:
+    "@babel/compat-data" "^7.27.2"
+    "@babel/helper-validator-option" "^7.27.1"
+    browserslist "^4.24.0"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
+"@babel/helper-globals@^7.28.0":
+  version "7.28.0"
+  resolved "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz"
+  integrity sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==
+
+"@babel/helper-module-imports@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz"
+  integrity sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==
+  dependencies:
+    "@babel/traverse" "^7.27.1"
+    "@babel/types" "^7.27.1"
+
+"@babel/helper-module-transforms@^7.28.3":
+  version "7.28.3"
+  resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz"
+  integrity sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.27.1"
+    "@babel/helper-validator-identifier" "^7.27.1"
+    "@babel/traverse" "^7.28.3"
+
+"@babel/helper-string-parser@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz"
+  integrity sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==
+
+"@babel/helper-validator-identifier@^7.27.1", "@babel/helper-validator-identifier@^7.28.5":
+  version "7.28.5"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz"
+  integrity sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==
+
+"@babel/helper-validator-option@^7.27.1":
+  version "7.27.1"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz"
+  integrity sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==
+
+"@babel/helpers@^7.28.4":
+  version "7.28.4"
+  resolved "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz"
+  integrity sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==
+  dependencies:
+    "@babel/template" "^7.27.2"
+    "@babel/types" "^7.28.4"
+
+"@babel/parser@^7.24.4", "@babel/parser@^7.27.2", "@babel/parser@^7.28.5":
+  version "7.28.5"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz"
+  integrity sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==
+  dependencies:
+    "@babel/types" "^7.28.5"
+
+"@babel/template@^7.27.2":
+  version "7.27.2"
+  resolved "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz"
+  integrity sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==
+  dependencies:
+    "@babel/code-frame" "^7.27.1"
+    "@babel/parser" "^7.27.2"
+    "@babel/types" "^7.27.1"
+
+"@babel/traverse@^7.27.1", "@babel/traverse@^7.28.3", "@babel/traverse@^7.28.5":
+  version "7.28.5"
+  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz"
+  integrity sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==
+  dependencies:
+    "@babel/code-frame" "^7.27.1"
+    "@babel/generator" "^7.28.5"
+    "@babel/helper-globals" "^7.28.0"
+    "@babel/parser" "^7.28.5"
+    "@babel/template" "^7.27.2"
+    "@babel/types" "^7.28.5"
+    debug "^4.3.1"
+
+"@babel/types@^7.27.1", "@babel/types@^7.28.4", "@babel/types@^7.28.5":
+  version "7.28.5"
+  resolved "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz"
+  integrity sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.27.1"
+    "@babel/helper-validator-identifier" "^7.28.5"
+
+"@emnapi/core@^1.4.3":
+  version "1.7.0"
+  resolved "https://registry.npmjs.org/@emnapi/core/-/core-1.7.0.tgz"
+  integrity sha512-pJdKGq/1iquWYtv1RRSljZklxHCOCAJFJrImO5ZLKPJVJlVUcs8yFwNQlqS0Lo8xT1VAXXTCZocF9n26FWEKsw==
+  dependencies:
+    "@emnapi/wasi-threads" "1.1.0"
+    tslib "^2.4.0"
+
+"@emnapi/runtime@^1.4.3":
+  version "1.7.0"
+  resolved "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.7.0.tgz"
+  integrity sha512-oAYoQnCYaQZKVS53Fq23ceWMRxq5EhQsE0x0RdQ55jT7wagMu5k+fS39v1fiSLrtrLQlXwVINenqhLMtTrV/1Q==
+  dependencies:
+    tslib "^2.4.0"
+
+"@emnapi/wasi-threads@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz"
+  integrity sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==
+  dependencies:
+    tslib "^2.4.0"
+
+"@eslint-community/eslint-utils@^4.7.0", "@eslint-community/eslint-utils@^4.8.0":
+  version "4.9.0"
+  resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.0.tgz"
+  integrity sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==
+  dependencies:
+    eslint-visitor-keys "^3.4.3"
+
+"@eslint-community/regexpp@^4.10.0", "@eslint-community/regexpp@^4.12.1":
+  version "4.12.2"
+  resolved "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz"
+  integrity sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==
+
+"@eslint/config-array@^0.21.1":
+  version "0.21.1"
+  resolved "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.1.tgz"
+  integrity sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==
+  dependencies:
+    "@eslint/object-schema" "^2.1.7"
+    debug "^4.3.1"
+    minimatch "^3.1.2"
+
+"@eslint/config-helpers@^0.4.2":
+  version "0.4.2"
+  resolved "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz"
+  integrity sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==
+  dependencies:
+    "@eslint/core" "^0.17.0"
+
+"@eslint/core@^0.17.0":
+  version "0.17.0"
+  resolved "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz"
+  integrity sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==
+  dependencies:
+    "@types/json-schema" "^7.0.15"
+
+"@eslint/eslintrc@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz"
+  integrity sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^10.0.1"
+    globals "^14.0.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
+"@eslint/js@^9.39.2", "@eslint/js@9.39.2":
+  version "9.39.2"
+  resolved "https://registry.npmjs.org/@eslint/js/-/js-9.39.2.tgz"
+  integrity sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==
+
+"@eslint/object-schema@^2.1.7":
+  version "2.1.7"
+  resolved "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz"
+  integrity sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==
+
+"@eslint/plugin-kit@^0.4.1":
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz"
+  integrity sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==
+  dependencies:
+    "@eslint/core" "^0.17.0"
+    levn "^0.4.1"
+
+"@humanfs/core@^0.19.1":
+  version "0.19.1"
+  resolved "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz"
+  integrity sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==
+
+"@humanfs/node@^0.16.6":
+  version "0.16.7"
+  resolved "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz"
+  integrity sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==
+  dependencies:
+    "@humanfs/core" "^0.19.1"
+    "@humanwhocodes/retry" "^0.4.0"
+
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
+"@humanwhocodes/retry@^0.4.0", "@humanwhocodes/retry@^0.4.2":
+  version "0.4.3"
+  resolved "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz"
+  integrity sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==
+
+"@img/colour@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz"
+  integrity sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==
+
+"@img/sharp-darwin-arm64@0.34.5":
+  version "0.34.5"
+  resolved "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz"
+  integrity sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==
+  optionalDependencies:
+    "@img/sharp-libvips-darwin-arm64" "1.2.4"
+
+"@img/sharp-libvips-darwin-arm64@1.2.4":
+  version "1.2.4"
+  resolved "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz"
+  integrity sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==
+
+"@jridgewell/gen-mapping@^0.3.12", "@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.13"
+  resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz"
+  integrity sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.5.0"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/remapping@^2.3.4", "@jridgewell/remapping@^2.3.5":
+  version "2.3.5"
+  resolved "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz"
+  integrity sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
+"@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.5.0", "@jridgewell/sourcemap-codec@^1.5.5":
+  version "1.5.5"
+  resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz"
+  integrity sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==
+
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.28":
+  version "0.3.31"
+  resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz"
+  integrity sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@next/env@16.0.7":
+  version "16.0.7"
+  resolved "https://registry.npmjs.org/@next/env/-/env-16.0.7.tgz"
+  integrity sha512-gpaNgUh5nftFKRkRQGnVi5dpcYSKGcZZkQffZ172OrG/XkrnS7UBTQ648YY+8ME92cC4IojpI2LqTC8sTDhAaw==
+
+"@next/eslint-plugin-next@16.0.1":
+  version "16.0.1"
+  resolved "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-16.0.1.tgz"
+  integrity sha512-g4Cqmv/gyFEXNeVB2HkqDlYKfy+YrlM2k8AVIO/YQVEPfhVruH1VA99uT1zELLnPLIeOnx8IZ6Ddso0asfTIdw==
+  dependencies:
+    fast-glob "3.3.1"
+
+"@next/swc-darwin-arm64@16.0.7":
+  version "16.0.7"
+  resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.0.7.tgz"
+  integrity sha512-LlDtCYOEj/rfSnEn/Idi+j1QKHxY9BJFmxx7108A6D8K0SB+bNgfYQATPk/4LqOl4C0Wo3LACg2ie6s7xqMpJg==
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3":
+  version "1.2.8"
+  resolved "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@nolyfill/is-core-module@1.0.39":
+  version "1.0.39"
+  resolved "https://registry.npmjs.org/@nolyfill/is-core-module/-/is-core-module-1.0.39.tgz"
+  integrity sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==
+
+"@rtsao/scc@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz"
+  integrity sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==
+
+"@swc/helpers@0.5.15":
+  version "0.5.15"
+  resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz"
+  integrity sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==
+  dependencies:
+    tslib "^2.8.0"
+
+"@tailwindcss/node@4.1.17":
+  version "4.1.17"
+  resolved "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.17.tgz"
+  integrity sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==
+  dependencies:
+    "@jridgewell/remapping" "^2.3.4"
+    enhanced-resolve "^5.18.3"
+    jiti "^2.6.1"
+    lightningcss "1.30.2"
+    magic-string "^0.30.21"
+    source-map-js "^1.2.1"
+    tailwindcss "4.1.17"
+
+"@tailwindcss/oxide-darwin-arm64@4.1.17":
+  version "4.1.17"
+  resolved "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.17.tgz"
+  integrity sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==
+
+"@tailwindcss/oxide@4.1.17":
+  version "4.1.17"
+  resolved "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.17.tgz"
+  integrity sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA==
+  optionalDependencies:
+    "@tailwindcss/oxide-android-arm64" "4.1.17"
+    "@tailwindcss/oxide-darwin-arm64" "4.1.17"
+    "@tailwindcss/oxide-darwin-x64" "4.1.17"
+    "@tailwindcss/oxide-freebsd-x64" "4.1.17"
+    "@tailwindcss/oxide-linux-arm-gnueabihf" "4.1.17"
+    "@tailwindcss/oxide-linux-arm64-gnu" "4.1.17"
+    "@tailwindcss/oxide-linux-arm64-musl" "4.1.17"
+    "@tailwindcss/oxide-linux-x64-gnu" "4.1.17"
+    "@tailwindcss/oxide-linux-x64-musl" "4.1.17"
+    "@tailwindcss/oxide-wasm32-wasi" "4.1.17"
+    "@tailwindcss/oxide-win32-arm64-msvc" "4.1.17"
+    "@tailwindcss/oxide-win32-x64-msvc" "4.1.17"
+
+"@tailwindcss/postcss@^4":
+  version "4.1.17"
+  resolved "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.17.tgz"
+  integrity sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    "@tailwindcss/node" "4.1.17"
+    "@tailwindcss/oxide" "4.1.17"
+    postcss "^8.4.41"
+    tailwindcss "4.1.17"
+
+"@tybys/wasm-util@^0.10.0":
+  version "0.10.1"
+  resolved "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz"
+  integrity sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==
+  dependencies:
+    tslib "^2.4.0"
+
+"@types/estree@^1.0.6":
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz"
+  integrity sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==
+
+"@types/json-schema@^7.0.15":
+  version "7.0.15"
+  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
+  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
+
+"@types/json5@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
+  integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
+
+"@types/node@^20":
+  version "20.19.24"
+  resolved "https://registry.npmjs.org/@types/node/-/node-20.19.24.tgz"
+  integrity sha512-FE5u0ezmi6y9OZEzlJfg37mqqf6ZDSF2V/NLjUyGrR9uTZ7Sb9F7bLNZ03S4XVUNRWGA7Ck4c1kK+YnuWjl+DA==
+  dependencies:
+    undici-types "~6.21.0"
+
+"@types/react-dom@^19":
+  version "19.2.2"
+  resolved "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.2.tgz"
+  integrity sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==
+
+"@types/react@^19", "@types/react@^19.2.0", "@types/react@>=18.0.0":
+  version "19.2.2"
+  resolved "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz"
+  integrity sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==
+  dependencies:
+    csstype "^3.0.2"
+
+"@typescript-eslint/eslint-plugin@8.49.0":
+  version "8.49.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.49.0.tgz"
+  integrity sha512-JXij0vzIaTtCwu6SxTh8qBc66kmf1xs7pI4UOiMDFVct6q86G0Zs7KRcEoJgY3Cav3x5Tq0MF5jwgpgLqgKG3A==
+  dependencies:
+    "@eslint-community/regexpp" "^4.10.0"
+    "@typescript-eslint/scope-manager" "8.49.0"
+    "@typescript-eslint/type-utils" "8.49.0"
+    "@typescript-eslint/utils" "8.49.0"
+    "@typescript-eslint/visitor-keys" "8.49.0"
+    ignore "^7.0.0"
+    natural-compare "^1.4.0"
+    ts-api-utils "^2.1.0"
+
+"@typescript-eslint/parser@^8.49.0", "@typescript-eslint/parser@8.49.0":
+  version "8.49.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.49.0.tgz"
+  integrity sha512-N9lBGA9o9aqb1hVMc9hzySbhKibHmB+N3IpoShyV6HyQYRGIhlrO5rQgttypi+yEeKsKI4idxC8Jw6gXKD4THA==
+  dependencies:
+    "@typescript-eslint/scope-manager" "8.49.0"
+    "@typescript-eslint/types" "8.49.0"
+    "@typescript-eslint/typescript-estree" "8.49.0"
+    "@typescript-eslint/visitor-keys" "8.49.0"
+    debug "^4.3.4"
+
+"@typescript-eslint/project-service@8.49.0":
+  version "8.49.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.49.0.tgz"
+  integrity sha512-/wJN0/DKkmRUMXjZUXYZpD1NEQzQAAn9QWfGwo+Ai8gnzqH7tvqS7oNVdTjKqOcPyVIdZdyCMoqN66Ia789e7g==
+  dependencies:
+    "@typescript-eslint/tsconfig-utils" "^8.49.0"
+    "@typescript-eslint/types" "^8.49.0"
+    debug "^4.3.4"
+
+"@typescript-eslint/scope-manager@8.49.0":
+  version "8.49.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.49.0.tgz"
+  integrity sha512-npgS3zi+/30KSOkXNs0LQXtsg9ekZ8OISAOLGWA/ZOEn0ZH74Ginfl7foziV8DT+D98WfQ5Kopwqb/PZOaIJGg==
+  dependencies:
+    "@typescript-eslint/types" "8.49.0"
+    "@typescript-eslint/visitor-keys" "8.49.0"
+
+"@typescript-eslint/tsconfig-utils@^8.49.0", "@typescript-eslint/tsconfig-utils@8.49.0":
+  version "8.49.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.49.0.tgz"
+  integrity sha512-8prixNi1/6nawsRYxet4YOhnbW+W9FK/bQPxsGB1D3ZrDzbJ5FXw5XmzxZv82X3B+ZccuSxo/X8q9nQ+mFecWA==
+
+"@typescript-eslint/type-utils@8.49.0":
+  version "8.49.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.49.0.tgz"
+  integrity sha512-KTExJfQ+svY8I10P4HdxKzWsvtVnsuCifU5MvXrRwoP2KOlNZ9ADNEWWsQTJgMxLzS5VLQKDjkCT/YzgsnqmZg==
+  dependencies:
+    "@typescript-eslint/types" "8.49.0"
+    "@typescript-eslint/typescript-estree" "8.49.0"
+    "@typescript-eslint/utils" "8.49.0"
+    debug "^4.3.4"
+    ts-api-utils "^2.1.0"
+
+"@typescript-eslint/types@^8.49.0", "@typescript-eslint/types@8.49.0":
+  version "8.49.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.49.0.tgz"
+  integrity sha512-e9k/fneezorUo6WShlQpMxXh8/8wfyc+biu6tnAqA81oWrEic0k21RHzP9uqqpyBBeBKu4T+Bsjy9/b8u7obXQ==
+
+"@typescript-eslint/typescript-estree@8.49.0":
+  version "8.49.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.49.0.tgz"
+  integrity sha512-jrLdRuAbPfPIdYNppHJ/D0wN+wwNfJ32YTAm10eJVsFmrVpXQnDWBn8niCSMlWjvml8jsce5E/O+86IQtTbJWA==
+  dependencies:
+    "@typescript-eslint/project-service" "8.49.0"
+    "@typescript-eslint/tsconfig-utils" "8.49.0"
+    "@typescript-eslint/types" "8.49.0"
+    "@typescript-eslint/visitor-keys" "8.49.0"
+    debug "^4.3.4"
+    minimatch "^9.0.4"
+    semver "^7.6.0"
+    tinyglobby "^0.2.15"
+    ts-api-utils "^2.1.0"
+
+"@typescript-eslint/utils@8.49.0":
+  version "8.49.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.49.0.tgz"
+  integrity sha512-N3W7rJw7Rw+z1tRsHZbK395TWSYvufBXumYtEGzypgMUthlg0/hmCImeA8hgO2d2G4pd7ftpxxul2J8OdtdaFA==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.7.0"
+    "@typescript-eslint/scope-manager" "8.49.0"
+    "@typescript-eslint/types" "8.49.0"
+    "@typescript-eslint/typescript-estree" "8.49.0"
+
+"@typescript-eslint/visitor-keys@8.49.0":
+  version "8.49.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.49.0.tgz"
+  integrity sha512-LlKaciDe3GmZFphXIc79THF/YYBugZ7FS1pO581E/edlVVNbZKDy93evqmrfQ9/Y4uN0vVhX4iuchq26mK/iiA==
+  dependencies:
+    "@typescript-eslint/types" "8.49.0"
+    eslint-visitor-keys "^4.2.1"
+
+"@unrs/resolver-binding-darwin-arm64@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.npmjs.org/@unrs/resolver-binding-darwin-arm64/-/resolver-binding-darwin-arm64-1.11.1.tgz"
+  integrity sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==
+
+acorn-jsx@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+"acorn@^6.0.0 || ^7.0.0 || ^8.0.0", acorn@^8.15.0:
+  version "8.15.0"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz"
+  integrity sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==
+
+adler-32@~1.3.0:
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz"
+  integrity sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==
+
+ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-escapes@^7.0.0:
+  version "7.3.0"
+  resolved "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-7.3.0.tgz"
+  integrity sha512-BvU8nYgGQBxcmMuEeUEmNTvrMVjJNSH7RgW24vXexN4Ven6qCvy4TntnvlnwnMLTVlcRQQdbRY8NKnaIoeWDNg==
+  dependencies:
+    environment "^1.0.0"
+
+ansi-regex@^6.2.2:
+  version "6.2.2"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz"
+  integrity sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==
+
+ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+ansi-styles@^6.2.1:
+  version "6.2.3"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz"
+  integrity sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==
+
+ansi-styles@^6.2.3:
+  version "6.2.3"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz"
+  integrity sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==
+
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
+aria-query@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz"
+  integrity sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==
+
+array-buffer-byte-length@^1.0.1, array-buffer-byte-length@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz"
+  integrity sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==
+  dependencies:
+    call-bound "^1.0.3"
+    is-array-buffer "^3.0.5"
+
+array-includes@^3.1.6, array-includes@^3.1.8, array-includes@^3.1.9:
+  version "3.1.9"
+  resolved "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz"
+  integrity sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.4"
+    define-properties "^1.2.1"
+    es-abstract "^1.24.0"
+    es-object-atoms "^1.1.1"
+    get-intrinsic "^1.3.0"
+    is-string "^1.1.1"
+    math-intrinsics "^1.1.0"
+
+array.prototype.findlast@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz"
+  integrity sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.findlastindex@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz"
+  integrity sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.4"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.9"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.1.1"
+    es-shim-unscopables "^1.1.0"
+
+array.prototype.flat@^1.3.1, array.prototype.flat@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz"
+  integrity sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.flatmap@^1.3.2, array.prototype.flatmap@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz"
+  integrity sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-shim-unscopables "^1.0.2"
+
+array.prototype.tosorted@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz"
+  integrity sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.3"
+    es-errors "^1.3.0"
+    es-shim-unscopables "^1.0.2"
+
+arraybuffer.prototype.slice@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz"
+  integrity sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==
+  dependencies:
+    array-buffer-byte-length "^1.0.1"
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    is-array-buffer "^3.0.4"
+
+ast-types-flow@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz"
+  integrity sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==
+
+async-function@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz"
+  integrity sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==
+
+available-typed-arrays@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz"
+  integrity sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==
+  dependencies:
+    possible-typed-array-names "^1.0.0"
+
+axe-core@^4.10.0:
+  version "4.11.0"
+  resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.11.0.tgz"
+  integrity sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==
+
+axobject-query@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz"
+  integrity sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+baseline-browser-mapping@^2.8.25:
+  version "2.8.25"
+  resolved "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.25.tgz"
+  integrity sha512-2NovHVesVF5TXefsGX1yzx1xgr7+m9JQenvz6FQY3qd+YXkKkYiv+vTCc7OriP9mcDZpTC5mAOYN4ocd29+erA==
+
+brace-expansion@^1.1.7:
+  version "1.1.12"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz"
+  integrity sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+brace-expansion@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz"
+  integrity sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==
+  dependencies:
+    balanced-match "^1.0.0"
+
+braces@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+browserslist@^4.24.0, "browserslist@>= 4.21.0":
+  version "4.28.0"
+  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.28.0.tgz"
+  integrity sha512-tbydkR/CxfMwelN0vwdP/pLkDwyAASZ+VfWm4EOwlB6SWhx1sYnWLqo8N5j0rAzPfzfRaxt0mM/4wPU/Su84RQ==
+  dependencies:
+    baseline-browser-mapping "^2.8.25"
+    caniuse-lite "^1.0.30001754"
+    electron-to-chromium "^1.5.249"
+    node-releases "^2.0.27"
+    update-browserslist-db "^1.1.4"
+
+call-bind-apply-helpers@^1.0.0, call-bind-apply-helpers@^1.0.1, call-bind-apply-helpers@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz"
+  integrity sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==
+  dependencies:
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+
+call-bind@^1.0.7, call-bind@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz"
+  integrity sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==
+  dependencies:
+    call-bind-apply-helpers "^1.0.0"
+    es-define-property "^1.0.0"
+    get-intrinsic "^1.2.4"
+    set-function-length "^1.2.2"
+
+call-bound@^1.0.2, call-bound@^1.0.3, call-bound@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz"
+  integrity sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==
+  dependencies:
+    call-bind-apply-helpers "^1.0.2"
+    get-intrinsic "^1.3.0"
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
+caniuse-lite@^1.0.30001579, caniuse-lite@^1.0.30001754:
+  version "1.0.30001754"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001754.tgz"
+  integrity sha512-x6OeBXueoAceOmotzx3PO4Zpt4rzpeIFsSr6AAePTZxSkXiYDUmpypEl7e2+8NCd9bD7bXjqyef8CJYPC1jfxg==
+
+cfb@~1.2.1:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz"
+  integrity sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==
+  dependencies:
+    adler-32 "~1.3.0"
+    crc-32 "~1.2.0"
+
+chalk@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+cli-cursor@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz"
+  integrity sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==
+  dependencies:
+    restore-cursor "^5.0.0"
+
+cli-truncate@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/cli-truncate/-/cli-truncate-5.2.0.tgz"
+  integrity sha512-xRwvIOMGrfOAnM1JYtqQImuaNtDEv9v6oIYAs4LIHwTiKee8uwvIi363igssOC0O5U04i4AlENs79LQLu9tEMw==
+  dependencies:
+    slice-ansi "^8.0.0"
+    string-width "^8.2.0"
+
+client-only@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
+cockatiel@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/cockatiel/-/cockatiel-3.2.1.tgz"
+  integrity sha512-gfrHV6ZPkquExvMh9IOkKsBzNDk6sDuZ6DdBGUBkvFnTCqCxzpuq48RySgP0AnaqQkw2zynOFj9yly6T1Q2G5Q==
+
+codepage@~1.15.0:
+  version "1.15.0"
+  resolved "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz"
+  integrity sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+colorette@^2.0.20:
+  version "2.0.20"
+  resolved "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz"
+  integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
+
+commander@^14.0.3:
+  version "14.0.3"
+  resolved "https://registry.npmjs.org/commander/-/commander-14.0.3.tgz"
+  integrity sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
+convert-source-map@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz"
+  integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
+
+cookie@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/cookie/-/cookie-1.0.2.tgz"
+  integrity sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==
+
+crc-32@~1.2.0, crc-32@~1.2.1:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz"
+  integrity sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==
+
+cross-spawn@^7.0.6:
+  version "7.0.6"
+  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz"
+  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+csstype@^3.0.2:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
+damerau-levenshtein@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
+  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
+
+data-view-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz"
+  integrity sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.2"
+
+data-view-byte-length@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz"
+  integrity sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.2"
+
+data-view-byte-offset@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz"
+  integrity sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    is-data-view "^1.0.1"
+
+date-fns-tz@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-3.2.0.tgz"
+  integrity sha512-sg8HqoTEulcbbbVXeg84u5UnlsQa8GS5QXMqjjYIhS4abEVVKIUwe0/l/UhrZdKaL/W5eWZNlbTeEIiOXTcsBQ==
+
+"date-fns@^3.0.0 || ^4.0.0", date-fns@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz"
+  integrity sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==
+
+debug@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.1.0, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@^4.4.0:
+  version "4.4.3"
+  resolved "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz"
+  integrity sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==
+  dependencies:
+    ms "^2.1.3"
+
+deep-is@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+
+define-data-property@^1.0.1, define-data-property@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz"
+  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
+  dependencies:
+    es-define-property "^1.0.0"
+    es-errors "^1.3.0"
+    gopd "^1.0.1"
+
+define-properties@^1.1.3, define-properties@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz"
+  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
+  dependencies:
+    define-data-property "^1.0.1"
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
+dequal@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
+detect-libc@^2.0.3, detect-libc@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz"
+  integrity sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==
+
+doctrine@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz"
+  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
+  dependencies:
+    esutils "^2.0.2"
+
+dunder-proto@^1.0.0, dunder-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz"
+  integrity sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==
+  dependencies:
+    call-bind-apply-helpers "^1.0.1"
+    es-errors "^1.3.0"
+    gopd "^1.2.0"
+
+electron-to-chromium@^1.5.249:
+  version "1.5.250"
+  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.250.tgz"
+  integrity sha512-/5UMj9IiGDMOFBnN4i7/Ry5onJrAGSbOGo3s9FEKmwobGq6xw832ccET0CE3CkkMBZ8GJSlUIesZofpyurqDXw==
+
+emoji-regex@^10.3.0:
+  version "10.6.0"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz"
+  integrity sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==
+
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+enhanced-resolve@^5.18.3:
+  version "5.18.3"
+  resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz"
+  integrity sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
+environment@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz"
+  integrity sha512-xUtoPkMggbz0MPyPiIWr1Kp4aeWJjDZ6SMvURhimjdZgsRuDplF5/s9hcgGhyXMhs+6vpnuoiZ2kFiu3FMnS8Q==
+
+es-abstract@^1.17.5, es-abstract@^1.23.2, es-abstract@^1.23.3, es-abstract@^1.23.5, es-abstract@^1.23.6, es-abstract@^1.23.9, es-abstract@^1.24.0:
+  version "1.24.0"
+  resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz"
+  integrity sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==
+  dependencies:
+    array-buffer-byte-length "^1.0.2"
+    arraybuffer.prototype.slice "^1.0.4"
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.4"
+    data-view-buffer "^1.0.2"
+    data-view-byte-length "^1.0.2"
+    data-view-byte-offset "^1.0.1"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.1.1"
+    es-set-tostringtag "^2.1.0"
+    es-to-primitive "^1.3.0"
+    function.prototype.name "^1.1.8"
+    get-intrinsic "^1.3.0"
+    get-proto "^1.0.1"
+    get-symbol-description "^1.1.0"
+    globalthis "^1.0.4"
+    gopd "^1.2.0"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    internal-slot "^1.1.0"
+    is-array-buffer "^3.0.5"
+    is-callable "^1.2.7"
+    is-data-view "^1.0.2"
+    is-negative-zero "^2.0.3"
+    is-regex "^1.2.1"
+    is-set "^2.0.3"
+    is-shared-array-buffer "^1.0.4"
+    is-string "^1.1.1"
+    is-typed-array "^1.1.15"
+    is-weakref "^1.1.1"
+    math-intrinsics "^1.1.0"
+    object-inspect "^1.13.4"
+    object-keys "^1.1.1"
+    object.assign "^4.1.7"
+    own-keys "^1.0.1"
+    regexp.prototype.flags "^1.5.4"
+    safe-array-concat "^1.1.3"
+    safe-push-apply "^1.0.0"
+    safe-regex-test "^1.1.0"
+    set-proto "^1.0.0"
+    stop-iteration-iterator "^1.1.0"
+    string.prototype.trim "^1.2.10"
+    string.prototype.trimend "^1.0.9"
+    string.prototype.trimstart "^1.0.8"
+    typed-array-buffer "^1.0.3"
+    typed-array-byte-length "^1.0.3"
+    typed-array-byte-offset "^1.0.4"
+    typed-array-length "^1.0.7"
+    unbox-primitive "^1.1.0"
+    which-typed-array "^1.1.19"
+
+es-define-property@^1.0.0, es-define-property@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz"
+  integrity sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==
+
+es-errors@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz"
+  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
+
+es-iterator-helpers@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.2.1.tgz"
+  integrity sha512-uDn+FE1yrDzyC0pCo961B2IHbdM8y/ACZsKD4dG6WqrjV53BADjwa7D+1aom2rsNVfLyDgU/eigvlJGJ08OQ4w==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.6"
+    es-errors "^1.3.0"
+    es-set-tostringtag "^2.0.3"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.6"
+    globalthis "^1.0.4"
+    gopd "^1.2.0"
+    has-property-descriptors "^1.0.2"
+    has-proto "^1.2.0"
+    has-symbols "^1.1.0"
+    internal-slot "^1.1.0"
+    iterator.prototype "^1.1.4"
+    safe-array-concat "^1.1.3"
+
+es-object-atoms@^1.0.0, es-object-atoms@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz"
+  integrity sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==
+  dependencies:
+    es-errors "^1.3.0"
+
+es-set-tostringtag@^2.0.3, es-set-tostringtag@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz"
+  integrity sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==
+  dependencies:
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
+
+es-shim-unscopables@^1.0.2, es-shim-unscopables@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz"
+  integrity sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==
+  dependencies:
+    hasown "^2.0.2"
+
+es-to-primitive@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz"
+  integrity sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==
+  dependencies:
+    is-callable "^1.2.7"
+    is-date-object "^1.0.5"
+    is-symbol "^1.0.4"
+
+escalade@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz"
+  integrity sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==
+
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+eslint-config-next@16.0.1:
+  version "16.0.1"
+  resolved "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-16.0.1.tgz"
+  integrity sha512-wNuHw5gNOxwLUvpg0cu6IL0crrVC9hAwdS/7UwleNkwyaMiWIOAwf8yzXVqBBzL3c9A7jVRngJxjoSpPP1aEhg==
+  dependencies:
+    "@next/eslint-plugin-next" "16.0.1"
+    eslint-import-resolver-node "^0.3.6"
+    eslint-import-resolver-typescript "^3.5.2"
+    eslint-plugin-import "^2.32.0"
+    eslint-plugin-jsx-a11y "^6.10.0"
+    eslint-plugin-react "^7.37.0"
+    eslint-plugin-react-hooks "^7.0.0"
+    globals "16.4.0"
+    typescript-eslint "^8.46.0"
+
+eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.9:
+  version "0.3.9"
+  resolved "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz"
+  integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==
+  dependencies:
+    debug "^3.2.7"
+    is-core-module "^2.13.0"
+    resolve "^1.22.4"
+
+eslint-import-resolver-typescript@^3.5.2:
+  version "3.10.1"
+  resolved "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.10.1.tgz"
+  integrity sha512-A1rHYb06zjMGAxdLSkN2fXPBwuSaQ0iO5M/hdyS0Ajj1VBaRp0sPD3dn1FhME3c/JluGFbwSxyCfqdSbtQLAHQ==
+  dependencies:
+    "@nolyfill/is-core-module" "1.0.39"
+    debug "^4.4.0"
+    get-tsconfig "^4.10.0"
+    is-bun-module "^2.0.0"
+    stable-hash "^0.0.5"
+    tinyglobby "^0.2.13"
+    unrs-resolver "^1.6.2"
+
+eslint-module-utils@^2.12.1:
+  version "2.12.1"
+  resolved "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.1.tgz"
+  integrity sha512-L8jSWTze7K2mTg0vos/RuLRS5soomksDPoJLXIslC7c8Wmut3bx7CPpJijDcBZtxQ5lrbUdM+s0OlNbz0DCDNw==
+  dependencies:
+    debug "^3.2.7"
+
+eslint-plugin-import@*, eslint-plugin-import@^2.32.0:
+  version "2.32.0"
+  resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz"
+  integrity sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==
+  dependencies:
+    "@rtsao/scc" "^1.1.0"
+    array-includes "^3.1.9"
+    array.prototype.findlastindex "^1.2.6"
+    array.prototype.flat "^1.3.3"
+    array.prototype.flatmap "^1.3.3"
+    debug "^3.2.7"
+    doctrine "^2.1.0"
+    eslint-import-resolver-node "^0.3.9"
+    eslint-module-utils "^2.12.1"
+    hasown "^2.0.2"
+    is-core-module "^2.16.1"
+    is-glob "^4.0.3"
+    minimatch "^3.1.2"
+    object.fromentries "^2.0.8"
+    object.groupby "^1.0.3"
+    object.values "^1.2.1"
+    semver "^6.3.1"
+    string.prototype.trimend "^1.0.9"
+    tsconfig-paths "^3.15.0"
+
+eslint-plugin-jsx-a11y@^6.10.0:
+  version "6.10.2"
+  resolved "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.10.2.tgz"
+  integrity sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==
+  dependencies:
+    aria-query "^5.3.2"
+    array-includes "^3.1.8"
+    array.prototype.flatmap "^1.3.2"
+    ast-types-flow "^0.0.8"
+    axe-core "^4.10.0"
+    axobject-query "^4.1.0"
+    damerau-levenshtein "^1.0.8"
+    emoji-regex "^9.2.2"
+    hasown "^2.0.2"
+    jsx-ast-utils "^3.3.5"
+    language-tags "^1.0.9"
+    minimatch "^3.1.2"
+    object.fromentries "^2.0.8"
+    safe-regex-test "^1.0.3"
+    string.prototype.includes "^2.0.1"
+
+eslint-plugin-react-hooks@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.0.1.tgz"
+  integrity sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==
+  dependencies:
+    "@babel/core" "^7.24.4"
+    "@babel/parser" "^7.24.4"
+    hermes-parser "^0.25.1"
+    zod "^3.25.0 || ^4.0.0"
+    zod-validation-error "^3.5.0 || ^4.0.0"
+
+eslint-plugin-react@^7.37.0, eslint-plugin-react@^7.37.5:
+  version "7.37.5"
+  resolved "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz"
+  integrity sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==
+  dependencies:
+    array-includes "^3.1.8"
+    array.prototype.findlast "^1.2.5"
+    array.prototype.flatmap "^1.3.3"
+    array.prototype.tosorted "^1.1.4"
+    doctrine "^2.1.0"
+    es-iterator-helpers "^1.2.1"
+    estraverse "^5.3.0"
+    hasown "^2.0.2"
+    jsx-ast-utils "^2.4.1 || ^3.0.0"
+    minimatch "^3.1.2"
+    object.entries "^1.1.9"
+    object.fromentries "^2.0.8"
+    object.values "^1.2.1"
+    prop-types "^15.8.1"
+    resolve "^2.0.0-next.5"
+    semver "^6.3.1"
+    string.prototype.matchall "^4.0.12"
+    string.prototype.repeat "^1.0.0"
+
+eslint-scope@^8.4.0:
+  version "8.4.0"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz"
+  integrity sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
+eslint-visitor-keys@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
+eslint-visitor-keys@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz"
+  integrity sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==
+
+eslint@*, "eslint@^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9", "eslint@^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9", "eslint@^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7", "eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0", "eslint@^6.0.0 || ^7.0.0 || >=8.0.0", "eslint@^8.57.0 || ^9.0.0", eslint@^9.39.2, eslint@>=9.0.0:
+  version "9.39.2"
+  resolved "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz"
+  integrity sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.8.0"
+    "@eslint-community/regexpp" "^4.12.1"
+    "@eslint/config-array" "^0.21.1"
+    "@eslint/config-helpers" "^0.4.2"
+    "@eslint/core" "^0.17.0"
+    "@eslint/eslintrc" "^3.3.1"
+    "@eslint/js" "9.39.2"
+    "@eslint/plugin-kit" "^0.4.1"
+    "@humanfs/node" "^0.16.6"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@humanwhocodes/retry" "^0.4.2"
+    "@types/estree" "^1.0.6"
+    ajv "^6.12.4"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.6"
+    debug "^4.3.2"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^8.4.0"
+    eslint-visitor-keys "^4.2.1"
+    espree "^10.4.0"
+    esquery "^1.5.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^8.0.0"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    ignore "^5.2.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.3"
+
+espree@^10.0.1, espree@^10.4.0:
+  version "10.4.0"
+  resolved "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz"
+  integrity sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==
+  dependencies:
+    acorn "^8.15.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^4.2.1"
+
+esquery@^1.5.0:
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz"
+  integrity sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+eventemitter3@^5.0.1:
+  version "5.0.4"
+  resolved "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz"
+  integrity sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==
+
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-glob@3.3.1:
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz"
+  integrity sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz"
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
+
+fastq@^1.6.0:
+  version "1.19.1"
+  resolved "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz"
+  integrity sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==
+  dependencies:
+    reusify "^1.0.4"
+
+fdir@^6.5.0:
+  version "6.5.0"
+  resolved "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz"
+  integrity sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==
+
+file-entry-cache@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz"
+  integrity sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==
+  dependencies:
+    flat-cache "^4.0.0"
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
+flat-cache@^4.0.0:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz"
+  integrity sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==
+  dependencies:
+    flatted "^3.2.9"
+    keyv "^4.5.4"
+
+flatted@^3.2.9:
+  version "3.3.3"
+  resolved "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz"
+  integrity sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==
+
+for-each@^0.3.3, for-each@^0.3.5:
+  version "0.3.5"
+  resolved "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz"
+  integrity sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==
+  dependencies:
+    is-callable "^1.2.7"
+
+frac@~1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz"
+  integrity sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==
+
+function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+function.prototype.name@^1.1.6, function.prototype.name@^1.1.8:
+  version "1.1.8"
+  resolved "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz"
+  integrity sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    functions-have-names "^1.2.3"
+    hasown "^2.0.2"
+    is-callable "^1.2.7"
+
+functions-have-names@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz"
+  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
+
+generator-function@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/generator-function/-/generator-function-2.0.1.tgz"
+  integrity sha512-SFdFmIJi+ybC0vjlHN0ZGVGHc3lgE0DxPAT0djjVg+kjOnSqclqmj0KQ7ykTOLP6YxoqOvuAODGdcHJn+43q3g==
+
+gensync@^1.0.0-beta.2:
+  version "1.0.0-beta.2"
+  resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
+  integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
+
+get-east-asian-width@^1.0.0, get-east-asian-width@^1.3.1, get-east-asian-width@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.5.0.tgz"
+  integrity sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==
+
+get-intrinsic@^1.2.4, get-intrinsic@^1.2.5, get-intrinsic@^1.2.6, get-intrinsic@^1.2.7, get-intrinsic@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz"
+  integrity sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==
+  dependencies:
+    call-bind-apply-helpers "^1.0.2"
+    es-define-property "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.1.1"
+    function-bind "^1.1.2"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    hasown "^2.0.2"
+    math-intrinsics "^1.1.0"
+
+get-proto@^1.0.0, get-proto@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz"
+  integrity sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-object-atoms "^1.0.0"
+
+get-symbol-description@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz"
+  integrity sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.6"
+
+get-tsconfig@^4.10.0:
+  version "4.13.0"
+  resolved "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.13.0.tgz"
+  integrity sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==
+  dependencies:
+    resolve-pkg-maps "^1.0.0"
+
+glob-parent@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
+globals@^14.0.0:
+  version "14.0.0"
+  resolved "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz"
+  integrity sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==
+
+globals@^16.5.0:
+  version "16.5.0"
+  resolved "https://registry.npmjs.org/globals/-/globals-16.5.0.tgz"
+  integrity sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==
+
+globals@16.4.0:
+  version "16.4.0"
+  resolved "https://registry.npmjs.org/globals/-/globals-16.4.0.tgz"
+  integrity sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw==
+
+globalthis@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz"
+  integrity sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==
+  dependencies:
+    define-properties "^1.2.1"
+    gopd "^1.0.1"
+
+gopd@^1.0.1, gopd@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz"
+  integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
+
+graceful-fs@^4.2.4:
+  version "4.2.11"
+  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
+has-bigints@^1.0.2:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz"
+  integrity sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-property-descriptors@^1.0.0, has-property-descriptors@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz"
+  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
+  dependencies:
+    es-define-property "^1.0.0"
+
+has-proto@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz"
+  integrity sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==
+  dependencies:
+    dunder-proto "^1.0.0"
+
+has-symbols@^1.0.3, has-symbols@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz"
+  integrity sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==
+
+has-tostringtag@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz"
+  integrity sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==
+  dependencies:
+    has-symbols "^1.0.3"
+
+hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+hermes-estree@0.25.1:
+  version "0.25.1"
+  resolved "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz"
+  integrity sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==
+
+hermes-parser@^0.25.1:
+  version "0.25.1"
+  resolved "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz"
+  integrity sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==
+  dependencies:
+    hermes-estree "0.25.1"
+
+husky@^9.1.7:
+  version "9.1.7"
+  resolved "https://registry.npmjs.org/husky/-/husky-9.1.7.tgz"
+  integrity sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA==
+
+ignore@^5.2.0:
+  version "5.3.2"
+  resolved "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz"
+  integrity sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==
+
+ignore@^7.0.0:
+  version "7.0.5"
+  resolved "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz"
+  integrity sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==
+
+import-fresh@^3.2.1:
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz"
+  integrity sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz"
+  integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
+
+internal-slot@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz"
+  integrity sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==
+  dependencies:
+    es-errors "^1.3.0"
+    hasown "^2.0.2"
+    side-channel "^1.1.0"
+
+is-array-buffer@^3.0.4, is-array-buffer@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz"
+  integrity sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    get-intrinsic "^1.2.6"
+
+is-async-function@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz"
+  integrity sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==
+  dependencies:
+    async-function "^1.0.0"
+    call-bound "^1.0.3"
+    get-proto "^1.0.1"
+    has-tostringtag "^1.0.2"
+    safe-regex-test "^1.1.0"
+
+is-bigint@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz"
+  integrity sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==
+  dependencies:
+    has-bigints "^1.0.2"
+
+is-boolean-object@^1.2.1:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz"
+  integrity sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
+is-bun-module@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/is-bun-module/-/is-bun-module-2.0.0.tgz"
+  integrity sha512-gNCGbnnnnFAUGKeZ9PdbyeGYJqewpmc2aKHUEMO5nQPWU9lOmv7jcmQIv+qHD8fXW6W7qfuCwX4rY9LNRjXrkQ==
+  dependencies:
+    semver "^7.7.1"
+
+is-callable@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz"
+  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
+
+is-core-module@^2.13.0, is-core-module@^2.16.1:
+  version "2.16.1"
+  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz"
+  integrity sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==
+  dependencies:
+    hasown "^2.0.2"
+
+is-data-view@^1.0.1, is-data-view@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz"
+  integrity sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==
+  dependencies:
+    call-bound "^1.0.2"
+    get-intrinsic "^1.2.6"
+    is-typed-array "^1.1.13"
+
+is-date-object@^1.0.5, is-date-object@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz"
+  integrity sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==
+  dependencies:
+    call-bound "^1.0.2"
+    has-tostringtag "^1.0.2"
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-finalizationregistry@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz"
+  integrity sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==
+  dependencies:
+    call-bound "^1.0.3"
+
+is-fullwidth-code-point@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz"
+  integrity sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==
+  dependencies:
+    get-east-asian-width "^1.3.1"
+
+is-fullwidth-code-point@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.1.0.tgz"
+  integrity sha512-5XHYaSyiqADb4RnZ1Bdad6cPp8Toise4TzEjcOYDHZkTCbKgiUl7WTUCpNWHuxmDt91wnsZBc9xinNzopv3JMQ==
+  dependencies:
+    get-east-asian-width "^1.3.1"
+
+is-generator-function@^1.0.10:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.2.tgz"
+  integrity sha512-upqt1SkGkODW9tsGNG5mtXTXtECizwtS2kA161M+gJPc1xdb/Ax629af6YrTwcOeQHbewrPNlE5Dx7kzvXTizA==
+  dependencies:
+    call-bound "^1.0.4"
+    generator-function "^2.0.0"
+    get-proto "^1.0.1"
+    has-tostringtag "^1.0.2"
+    safe-regex-test "^1.1.0"
+
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-map@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz"
+  integrity sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==
+
+is-negative-zero@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.3.tgz"
+  integrity sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==
+
+is-number-object@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz"
+  integrity sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-regex@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz"
+  integrity sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==
+  dependencies:
+    call-bound "^1.0.2"
+    gopd "^1.2.0"
+    has-tostringtag "^1.0.2"
+    hasown "^2.0.2"
+
+is-set@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz"
+  integrity sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==
+
+is-shared-array-buffer@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz"
+  integrity sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==
+  dependencies:
+    call-bound "^1.0.3"
+
+is-string@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz"
+  integrity sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==
+  dependencies:
+    call-bound "^1.0.3"
+    has-tostringtag "^1.0.2"
+
+is-symbol@^1.0.4, is-symbol@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz"
+  integrity sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==
+  dependencies:
+    call-bound "^1.0.2"
+    has-symbols "^1.1.0"
+    safe-regex-test "^1.1.0"
+
+is-typed-array@^1.1.13, is-typed-array@^1.1.14, is-typed-array@^1.1.15:
+  version "1.1.15"
+  resolved "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz"
+  integrity sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==
+  dependencies:
+    which-typed-array "^1.1.16"
+
+is-weakmap@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz"
+  integrity sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==
+
+is-weakref@^1.0.2, is-weakref@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz"
+  integrity sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==
+  dependencies:
+    call-bound "^1.0.3"
+
+is-weakset@^2.0.3:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz"
+  integrity sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==
+  dependencies:
+    call-bound "^1.0.3"
+    get-intrinsic "^1.2.6"
+
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+iterator.prototype@^1.1.4:
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz"
+  integrity sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.6"
+    get-proto "^1.0.0"
+    has-symbols "^1.1.0"
+    set-function-name "^2.0.2"
+
+jiti@*, jiti@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz"
+  integrity sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==
+
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
+jsesc@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz"
+  integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==
+
+json-buffer@3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz"
+  integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
+  integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
+
+json5@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz"
+  integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
+  dependencies:
+    minimist "^1.2.0"
+
+json5@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
+"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.5:
+  version "3.3.5"
+  resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz"
+  integrity sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==
+  dependencies:
+    array-includes "^3.1.6"
+    array.prototype.flat "^1.3.1"
+    object.assign "^4.1.4"
+    object.values "^1.1.6"
+
+keyv@^4.5.4:
+  version "4.5.4"
+  resolved "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz"
+  integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
+  dependencies:
+    json-buffer "3.0.1"
+
+language-subtag-registry@^0.3.20:
+  version "0.3.23"
+  resolved "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.23.tgz"
+  integrity sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==
+
+language-tags@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.npmjs.org/language-tags/-/language-tags-1.0.9.tgz"
+  integrity sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==
+  dependencies:
+    language-subtag-registry "^0.3.20"
+
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
+lightningcss-darwin-arm64@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz"
+  integrity sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==
+
+lightningcss@1.30.2:
+  version "1.30.2"
+  resolved "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz"
+  integrity sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==
+  dependencies:
+    detect-libc "^2.0.3"
+  optionalDependencies:
+    lightningcss-android-arm64 "1.30.2"
+    lightningcss-darwin-arm64 "1.30.2"
+    lightningcss-darwin-x64 "1.30.2"
+    lightningcss-freebsd-x64 "1.30.2"
+    lightningcss-linux-arm-gnueabihf "1.30.2"
+    lightningcss-linux-arm64-gnu "1.30.2"
+    lightningcss-linux-arm64-musl "1.30.2"
+    lightningcss-linux-x64-gnu "1.30.2"
+    lightningcss-linux-x64-musl "1.30.2"
+    lightningcss-win32-arm64-msvc "1.30.2"
+    lightningcss-win32-x64-msvc "1.30.2"
+
+lint-staged@^16.4.0:
+  version "16.4.0"
+  resolved "https://registry.npmjs.org/lint-staged/-/lint-staged-16.4.0.tgz"
+  integrity sha512-lBWt8hujh/Cjysw5GYVmZpFHXDCgZzhrOm8vbcUdobADZNOK/bRshr2kM3DfgrrtR1DQhfupW9gnIXOfiFi+bw==
+  dependencies:
+    commander "^14.0.3"
+    listr2 "^9.0.5"
+    picomatch "^4.0.3"
+    string-argv "^0.3.2"
+    tinyexec "^1.0.4"
+    yaml "^2.8.2"
+
+listr2@^9.0.5:
+  version "9.0.5"
+  resolved "https://registry.npmjs.org/listr2/-/listr2-9.0.5.tgz"
+  integrity sha512-ME4Fb83LgEgwNw96RKNvKV4VTLuXfoKudAmm2lP8Kk87KaMK0/Xrx/aAkMWmT8mDb+3MlFDspfbCs7adjRxA2g==
+  dependencies:
+    cli-truncate "^5.0.0"
+    colorette "^2.0.20"
+    eventemitter3 "^5.0.1"
+    log-update "^6.1.0"
+    rfdc "^1.4.1"
+    wrap-ansi "^9.0.0"
+
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
+log-update@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz"
+  integrity sha512-9ie8ItPR6tjY5uYJh8K/Zrv/RMZ5VOlOWvtZdEHYSTFKZfIBPQa9tOAEeAWhd+AnIneLJ22w5fjOYtoutpWq5w==
+  dependencies:
+    ansi-escapes "^7.0.0"
+    cli-cursor "^5.0.0"
+    slice-ansi "^7.1.0"
+    strip-ansi "^7.1.0"
+    wrap-ansi "^9.0.0"
+
+loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+lru-cache@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz"
+  integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==
+  dependencies:
+    yallist "^3.0.2"
+
+magic-string@^0.30.21:
+  version "0.30.21"
+  resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz"
+  integrity sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.5.5"
+
+math-intrinsics@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz"
+  integrity sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==
+
+merge2@^1.3.0:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+micromatch@^4.0.4:
+  version "4.0.8"
+  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
+mimic-function@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz"
+  integrity sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==
+
+minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@^9.0.4:
+  version "9.0.5"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimist@^1.2.0, minimist@^1.2.6:
+  version "1.2.8"
+  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz"
+  integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
+
+ms@^2.1.1, ms@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+nanoid@^3.3.11, nanoid@^3.3.6:
+  version "3.3.11"
+  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz"
+  integrity sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==
+
+napi-postinstall@^0.3.0:
+  version "0.3.4"
+  resolved "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.4.tgz"
+  integrity sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
+  integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
+
+next@^16.0.7:
+  version "16.0.7"
+  resolved "https://registry.npmjs.org/next/-/next-16.0.7.tgz"
+  integrity sha512-3mBRJyPxT4LOxAJI6IsXeFtKfiJUbjCLgvXO02fV8Wy/lIhPvP94Fe7dGhUgHXcQy4sSuYwQNcOLhIfOm0rL0A==
+  dependencies:
+    "@next/env" "16.0.7"
+    "@swc/helpers" "0.5.15"
+    caniuse-lite "^1.0.30001579"
+    postcss "8.4.31"
+    styled-jsx "5.1.6"
+  optionalDependencies:
+    "@next/swc-darwin-arm64" "16.0.7"
+    "@next/swc-darwin-x64" "16.0.7"
+    "@next/swc-linux-arm64-gnu" "16.0.7"
+    "@next/swc-linux-arm64-musl" "16.0.7"
+    "@next/swc-linux-x64-gnu" "16.0.7"
+    "@next/swc-linux-x64-musl" "16.0.7"
+    "@next/swc-win32-arm64-msvc" "16.0.7"
+    "@next/swc-win32-x64-msvc" "16.0.7"
+    sharp "^0.34.4"
+
+node-releases@^2.0.27:
+  version "2.0.27"
+  resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz"
+  integrity sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==
+
+object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+
+object-inspect@^1.13.3, object-inspect@^1.13.4:
+  version "1.13.4"
+  resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz"
+  integrity sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==
+
+object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+object.assign@^4.1.4, object.assign@^4.1.7:
+  version "4.1.7"
+  resolved "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz"
+  integrity sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+    has-symbols "^1.1.0"
+    object-keys "^1.1.1"
+
+object.entries@^1.1.9:
+  version "1.1.9"
+  resolved "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz"
+  integrity sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.4"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.1.1"
+
+object.fromentries@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz"
+  integrity sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+    es-object-atoms "^1.0.0"
+
+object.groupby@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz"
+  integrity sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.2"
+
+object.values@^1.1.6, object.values@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz"
+  integrity sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+onetime@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/onetime/-/onetime-7.0.0.tgz"
+  integrity sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==
+  dependencies:
+    mimic-function "^5.0.0"
+
+optionator@^0.9.3:
+  version "0.9.4"
+  resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz"
+  integrity sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.5"
+
+own-keys@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz"
+  integrity sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==
+  dependencies:
+    get-intrinsic "^1.2.6"
+    object-keys "^1.1.1"
+    safe-push-apply "^1.0.0"
+
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+picocolors@^1.0.0, picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
+picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+"picomatch@^3 || ^4", picomatch@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz"
+  integrity sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==
+
+possible-typed-array-names@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz"
+  integrity sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==
+
+postcss@^8.4.41:
+  version "8.5.6"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz"
+  integrity sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==
+  dependencies:
+    nanoid "^3.3.11"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
+postcss@8.4.31:
+  version "8.4.31"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
+prettier@^3.3.3:
+  version "3.8.1"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz"
+  integrity sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==
+
+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
+punycode@^2.1.0:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
+  integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+"react-dom@^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", react-dom@>=18, react-dom@19.2.0:
+  version "19.2.0"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz"
+  integrity sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==
+  dependencies:
+    scheduler "^0.27.0"
+
+react-is@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-router-dom@^7.9.5:
+  version "7.9.5"
+  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.9.5.tgz"
+  integrity sha512-mkEmq/K8tKN63Ae2M7Xgz3c9l9YNbY+NHH6NNeUmLA3kDkhKXRsNb/ZpxaEunvGo2/3YXdk5EJU3Hxp3ocaBPw==
+  dependencies:
+    react-router "7.9.5"
+
+react-router@7.9.5:
+  version "7.9.5"
+  resolved "https://registry.npmjs.org/react-router/-/react-router-7.9.5.tgz"
+  integrity sha512-JmxqrnBZ6E9hWmf02jzNn9Jm3UqyeimyiwzD69NjxGySG6lIz/1LVPsoTCwN7NBX2XjCEa1LIX5EMz1j2b6u6A==
+  dependencies:
+    cookie "^1.0.1"
+    set-cookie-parser "^2.6.0"
+
+"react@^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react@^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", react@^19.2.0, "react@>= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0", react@>=18, react@>=18.0.0, react@19.2.0:
+  version "19.2.0"
+  resolved "https://registry.npmjs.org/react/-/react-19.2.0.tgz"
+  integrity sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==
+
+reflect.getprototypeof@^1.0.6, reflect.getprototypeof@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz"
+  integrity sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.9"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.7"
+    get-proto "^1.0.1"
+    which-builtin-type "^1.2.1"
+
+regexp.prototype.flags@^1.5.3, regexp.prototype.flags@^1.5.4:
+  version "1.5.4"
+  resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz"
+  integrity sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==
+  dependencies:
+    call-bind "^1.0.8"
+    define-properties "^1.2.1"
+    es-errors "^1.3.0"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    set-function-name "^2.0.2"
+
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
+resolve-pkg-maps@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz"
+  integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
+
+resolve@^1.22.4:
+  version "1.22.11"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz"
+  integrity sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==
+  dependencies:
+    is-core-module "^2.16.1"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+resolve@^2.0.0-next.5:
+  version "2.0.0-next.5"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz"
+  integrity sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==
+  dependencies:
+    is-core-module "^2.13.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+restore-cursor@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/restore-cursor/-/restore-cursor-5.1.0.tgz"
+  integrity sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==
+  dependencies:
+    onetime "^7.0.0"
+    signal-exit "^4.1.0"
+
+reusify@^1.0.4:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz"
+  integrity sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==
+
+rfdc@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz"
+  integrity sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==
+
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
+safe-array-concat@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz"
+  integrity sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    get-intrinsic "^1.2.6"
+    has-symbols "^1.1.0"
+    isarray "^2.0.5"
+
+safe-push-apply@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz"
+  integrity sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==
+  dependencies:
+    es-errors "^1.3.0"
+    isarray "^2.0.5"
+
+safe-regex-test@^1.0.3, safe-regex-test@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz"
+  integrity sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    is-regex "^1.2.1"
+
+scheduler@^0.27.0:
+  version "0.27.0"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz"
+  integrity sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==
+
+semver@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz"
+  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+
+semver@^7.6.0:
+  version "7.7.3"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz"
+  integrity sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==
+
+semver@^7.7.1:
+  version "7.7.3"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz"
+  integrity sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==
+
+semver@^7.7.3:
+  version "7.7.3"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz"
+  integrity sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==
+
+set-cookie-parser@^2.6.0:
+  version "2.7.2"
+  resolved "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz"
+  integrity sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==
+
+set-function-length@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz"
+  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    function-bind "^1.1.2"
+    get-intrinsic "^1.2.4"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.2"
+
+set-function-name@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz"
+  integrity sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==
+  dependencies:
+    define-data-property "^1.1.4"
+    es-errors "^1.3.0"
+    functions-have-names "^1.2.3"
+    has-property-descriptors "^1.0.2"
+
+set-proto@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz"
+  integrity sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==
+  dependencies:
+    dunder-proto "^1.0.1"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+
+sharp@^0.34.4:
+  version "0.34.5"
+  resolved "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz"
+  integrity sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==
+  dependencies:
+    "@img/colour" "^1.0.0"
+    detect-libc "^2.1.2"
+    semver "^7.7.3"
+  optionalDependencies:
+    "@img/sharp-darwin-arm64" "0.34.5"
+    "@img/sharp-darwin-x64" "0.34.5"
+    "@img/sharp-libvips-darwin-arm64" "1.2.4"
+    "@img/sharp-libvips-darwin-x64" "1.2.4"
+    "@img/sharp-libvips-linux-arm" "1.2.4"
+    "@img/sharp-libvips-linux-arm64" "1.2.4"
+    "@img/sharp-libvips-linux-ppc64" "1.2.4"
+    "@img/sharp-libvips-linux-riscv64" "1.2.4"
+    "@img/sharp-libvips-linux-s390x" "1.2.4"
+    "@img/sharp-libvips-linux-x64" "1.2.4"
+    "@img/sharp-libvips-linuxmusl-arm64" "1.2.4"
+    "@img/sharp-libvips-linuxmusl-x64" "1.2.4"
+    "@img/sharp-linux-arm" "0.34.5"
+    "@img/sharp-linux-arm64" "0.34.5"
+    "@img/sharp-linux-ppc64" "0.34.5"
+    "@img/sharp-linux-riscv64" "0.34.5"
+    "@img/sharp-linux-s390x" "0.34.5"
+    "@img/sharp-linux-x64" "0.34.5"
+    "@img/sharp-linuxmusl-arm64" "0.34.5"
+    "@img/sharp-linuxmusl-x64" "0.34.5"
+    "@img/sharp-wasm32" "0.34.5"
+    "@img/sharp-win32-arm64" "0.34.5"
+    "@img/sharp-win32-ia32" "0.34.5"
+    "@img/sharp-win32-x64" "0.34.5"
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+side-channel-list@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz"
+  integrity sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+
+side-channel-map@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz"
+  integrity sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+
+side-channel-weakmap@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz"
+  integrity sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==
+  dependencies:
+    call-bound "^1.0.2"
+    es-errors "^1.3.0"
+    get-intrinsic "^1.2.5"
+    object-inspect "^1.13.3"
+    side-channel-map "^1.0.1"
+
+side-channel@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz"
+  integrity sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==
+  dependencies:
+    es-errors "^1.3.0"
+    object-inspect "^1.13.3"
+    side-channel-list "^1.0.0"
+    side-channel-map "^1.0.1"
+    side-channel-weakmap "^1.0.2"
+
+signal-exit@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
+slice-ansi@^7.1.0:
+  version "7.1.2"
+  resolved "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.2.tgz"
+  integrity sha512-iOBWFgUX7caIZiuutICxVgX1SdxwAVFFKwt1EvMYYec/NWO5meOJ6K5uQxhrYBdQJne4KxiqZc+KptFOWFSI9w==
+  dependencies:
+    ansi-styles "^6.2.1"
+    is-fullwidth-code-point "^5.0.0"
+
+slice-ansi@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.npmjs.org/slice-ansi/-/slice-ansi-8.0.0.tgz"
+  integrity sha512-stxByr12oeeOyY2BlviTNQlYV5xOj47GirPr4yA1hE9JCtxfQN0+tVbkxwCtYDQWhEKWFHsEK48ORg5jrouCAg==
+  dependencies:
+    ansi-styles "^6.2.3"
+    is-fullwidth-code-point "^5.1.0"
+
+source-map-js@^1.0.2, source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
+ssf@~0.11.2:
+  version "0.11.2"
+  resolved "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz"
+  integrity sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==
+  dependencies:
+    frac "~1.1.2"
+
+stable-hash@^0.0.5:
+  version "0.0.5"
+  resolved "https://registry.npmjs.org/stable-hash/-/stable-hash-0.0.5.tgz"
+  integrity sha512-+L3ccpzibovGXFK+Ap/f8LOS0ahMrHTf3xu7mMLSpEGU0EO9ucaysSylKo9eRDFNhWve/y275iPmIZ4z39a9iA==
+
+stop-iteration-iterator@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz"
+  integrity sha512-eLoXW/DHyl62zxY4SCaIgnRhuMr6ri4juEYARS8E6sCEqzKpOiE521Ucofdx+KnDZl5xmvGYaaKCk5FEOxJCoQ==
+  dependencies:
+    es-errors "^1.3.0"
+    internal-slot "^1.1.0"
+
+string-argv@^0.3.2:
+  version "0.3.2"
+  resolved "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz"
+  integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
+
+string-width@^7.0.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz"
+  integrity sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==
+  dependencies:
+    emoji-regex "^10.3.0"
+    get-east-asian-width "^1.0.0"
+    strip-ansi "^7.1.0"
+
+string-width@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-8.2.0.tgz"
+  integrity sha512-6hJPQ8N0V0P3SNmP6h2J99RLuzrWz2gvT7VnK5tKvrNqJoyS9W4/Fb8mo31UiPvy00z7DQXkP2hnKBVav76thw==
+  dependencies:
+    get-east-asian-width "^1.5.0"
+    strip-ansi "^7.1.2"
+
+string.prototype.includes@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz"
+  integrity sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.3"
+
+string.prototype.matchall@^4.0.12:
+  version "4.0.12"
+  resolved "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz"
+  integrity sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.3"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.6"
+    es-errors "^1.3.0"
+    es-object-atoms "^1.0.0"
+    get-intrinsic "^1.2.6"
+    gopd "^1.2.0"
+    has-symbols "^1.1.0"
+    internal-slot "^1.1.0"
+    regexp.prototype.flags "^1.5.3"
+    set-function-name "^2.0.2"
+    side-channel "^1.1.0"
+
+string.prototype.repeat@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz"
+  integrity sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.5"
+
+string.prototype.trim@^1.2.10:
+  version "1.2.10"
+  resolved "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz"
+  integrity sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    define-data-property "^1.1.4"
+    define-properties "^1.2.1"
+    es-abstract "^1.23.5"
+    es-object-atoms "^1.0.0"
+    has-property-descriptors "^1.0.2"
+
+string.prototype.trimend@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz"
+  integrity sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==
+  dependencies:
+    call-bind "^1.0.8"
+    call-bound "^1.0.2"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+string.prototype.trimstart@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz"
+  integrity sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==
+  dependencies:
+    call-bind "^1.0.7"
+    define-properties "^1.2.1"
+    es-object-atoms "^1.0.0"
+
+strip-ansi@^7.1.0, strip-ansi@^7.1.2:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz"
+  integrity sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==
+  dependencies:
+    ansi-regex "^6.2.2"
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz"
+  integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
+
+strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+styled-jsx@5.1.6:
+  version "5.1.6"
+  resolved "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz"
+  integrity sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA==
+  dependencies:
+    client-only "0.0.1"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+swr@^2.3.6:
+  version "2.3.6"
+  resolved "https://registry.npmjs.org/swr/-/swr-2.3.6.tgz"
+  integrity sha512-wfHRmHWk/isGNMwlLGlZX5Gzz/uTgo0o2IRuTMcf4CPuPFJZlq0rDaKUx+ozB5nBOReNV1kiOyzMfj+MBMikLw==
+  dependencies:
+    dequal "^2.0.3"
+    use-sync-external-store "^1.4.0"
+
+tailwindcss@^4, tailwindcss@4.1.17:
+  version "4.1.17"
+  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.17.tgz"
+  integrity sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==
+
+tapable@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz"
+  integrity sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==
+
+tinyexec@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/tinyexec/-/tinyexec-1.0.4.tgz"
+  integrity sha512-u9r3uZC0bdpGOXtlxUIdwf9pkmvhqJdrVCH9fapQtgy/OeTTMZ1nqH7agtvEfmGui6e1XxjcdrlxvxJvc3sMqw==
+
+tinyglobby@^0.2.13, tinyglobby@^0.2.15:
+  version "0.2.15"
+  resolved "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz"
+  integrity sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==
+  dependencies:
+    fdir "^6.5.0"
+    picomatch "^4.0.3"
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+ts-api-utils@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz"
+  integrity sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==
+
+tsconfig-paths@^3.15.0:
+  version "3.15.0"
+  resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz"
+  integrity sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.2"
+    minimist "^1.2.6"
+    strip-bom "^3.0.0"
+
+tslib@^2.4.0, tslib@^2.8.0:
+  version "2.8.1"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+typed-array-buffer@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz"
+  integrity sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==
+  dependencies:
+    call-bound "^1.0.3"
+    es-errors "^1.3.0"
+    is-typed-array "^1.1.14"
+
+typed-array-byte-length@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz"
+  integrity sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==
+  dependencies:
+    call-bind "^1.0.8"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-proto "^1.2.0"
+    is-typed-array "^1.1.14"
+
+typed-array-byte-offset@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz"
+  integrity sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    for-each "^0.3.3"
+    gopd "^1.2.0"
+    has-proto "^1.2.0"
+    is-typed-array "^1.1.15"
+    reflect.getprototypeof "^1.0.9"
+
+typed-array-length@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz"
+  integrity sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==
+  dependencies:
+    call-bind "^1.0.7"
+    for-each "^0.3.3"
+    gopd "^1.0.1"
+    is-typed-array "^1.1.13"
+    possible-typed-array-names "^1.0.0"
+    reflect.getprototypeof "^1.0.6"
+
+typescript-eslint@^8.46.0, typescript-eslint@^8.49.0:
+  version "8.49.0"
+  resolved "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.49.0.tgz"
+  integrity sha512-zRSVH1WXD0uXczCXw+nsdjGPUdx4dfrs5VQoHnUWmv1U3oNlAKv4FUNdLDhVUg+gYn+a5hUESqch//Rv5wVhrg==
+  dependencies:
+    "@typescript-eslint/eslint-plugin" "8.49.0"
+    "@typescript-eslint/parser" "8.49.0"
+    "@typescript-eslint/typescript-estree" "8.49.0"
+    "@typescript-eslint/utils" "8.49.0"
+
+typescript@^5, typescript@>=3.3.1, typescript@>=4.8.4, "typescript@>=4.8.4 <6.0.0":
+  version "5.9.3"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz"
+  integrity sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==
+
+unbox-primitive@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz"
+  integrity sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==
+  dependencies:
+    call-bound "^1.0.3"
+    has-bigints "^1.0.2"
+    has-symbols "^1.1.0"
+    which-boxed-primitive "^1.1.1"
+
+undici-types@~6.21.0:
+  version "6.21.0"
+  resolved "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz"
+  integrity sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==
+
+unrs-resolver@^1.6.2:
+  version "1.11.1"
+  resolved "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz"
+  integrity sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==
+  dependencies:
+    napi-postinstall "^0.3.0"
+  optionalDependencies:
+    "@unrs/resolver-binding-android-arm-eabi" "1.11.1"
+    "@unrs/resolver-binding-android-arm64" "1.11.1"
+    "@unrs/resolver-binding-darwin-arm64" "1.11.1"
+    "@unrs/resolver-binding-darwin-x64" "1.11.1"
+    "@unrs/resolver-binding-freebsd-x64" "1.11.1"
+    "@unrs/resolver-binding-linux-arm-gnueabihf" "1.11.1"
+    "@unrs/resolver-binding-linux-arm-musleabihf" "1.11.1"
+    "@unrs/resolver-binding-linux-arm64-gnu" "1.11.1"
+    "@unrs/resolver-binding-linux-arm64-musl" "1.11.1"
+    "@unrs/resolver-binding-linux-ppc64-gnu" "1.11.1"
+    "@unrs/resolver-binding-linux-riscv64-gnu" "1.11.1"
+    "@unrs/resolver-binding-linux-riscv64-musl" "1.11.1"
+    "@unrs/resolver-binding-linux-s390x-gnu" "1.11.1"
+    "@unrs/resolver-binding-linux-x64-gnu" "1.11.1"
+    "@unrs/resolver-binding-linux-x64-musl" "1.11.1"
+    "@unrs/resolver-binding-wasm32-wasi" "1.11.1"
+    "@unrs/resolver-binding-win32-arm64-msvc" "1.11.1"
+    "@unrs/resolver-binding-win32-ia32-msvc" "1.11.1"
+    "@unrs/resolver-binding-win32-x64-msvc" "1.11.1"
+
+update-browserslist-db@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.4.tgz"
+  integrity sha512-q0SPT4xyU84saUX+tomz1WLkxUbuaJnR1xWt17M7fJtEJigJeWUNGUqrauFXsHnqev9y9JTRGwk13tFBuKby4A==
+  dependencies:
+    escalade "^3.2.0"
+    picocolors "^1.1.1"
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+use-sync-external-store@^1.4.0, use-sync-external-store@>=1.2.0:
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz"
+  integrity sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==
+
+which-boxed-primitive@^1.1.0, which-boxed-primitive@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz"
+  integrity sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==
+  dependencies:
+    is-bigint "^1.1.0"
+    is-boolean-object "^1.2.1"
+    is-number-object "^1.1.1"
+    is-string "^1.1.1"
+    is-symbol "^1.1.1"
+
+which-builtin-type@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz"
+  integrity sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==
+  dependencies:
+    call-bound "^1.0.2"
+    function.prototype.name "^1.1.6"
+    has-tostringtag "^1.0.2"
+    is-async-function "^2.0.0"
+    is-date-object "^1.1.0"
+    is-finalizationregistry "^1.1.0"
+    is-generator-function "^1.0.10"
+    is-regex "^1.2.1"
+    is-weakref "^1.0.2"
+    isarray "^2.0.5"
+    which-boxed-primitive "^1.1.0"
+    which-collection "^1.0.2"
+    which-typed-array "^1.1.16"
+
+which-collection@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz"
+  integrity sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==
+  dependencies:
+    is-map "^2.0.3"
+    is-set "^2.0.3"
+    is-weakmap "^2.0.2"
+    is-weakset "^2.0.3"
+
+which-typed-array@^1.1.16, which-typed-array@^1.1.19:
+  version "1.1.19"
+  resolved "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz"
+  integrity sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==
+  dependencies:
+    available-typed-arrays "^1.0.7"
+    call-bind "^1.0.8"
+    call-bound "^1.0.4"
+    for-each "^0.3.5"
+    get-proto "^1.0.1"
+    gopd "^1.2.0"
+    has-tostringtag "^1.0.2"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+wmf@~1.0.1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz"
+  integrity sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==
+
+word-wrap@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz"
+  integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==
+
+word@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.npmjs.org/word/-/word-0.3.0.tgz"
+  integrity sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==
+
+wrap-ansi@^9.0.0:
+  version "9.0.2"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz"
+  integrity sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==
+  dependencies:
+    ansi-styles "^6.2.1"
+    string-width "^7.0.0"
+    strip-ansi "^7.1.0"
+
+xlsx@^0.18.5:
+  version "0.18.5"
+  resolved "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz"
+  integrity sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==
+  dependencies:
+    adler-32 "~1.3.0"
+    cfb "~1.2.1"
+    codepage "~1.15.0"
+    crc-32 "~1.2.1"
+    ssf "~0.11.2"
+    wmf "~1.0.1"
+    word "~0.3.0"
+
+yallist@^3.0.2:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz"
+  integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
+
+yaml@^2.8.2:
+  version "2.8.3"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-2.8.3.tgz"
+  integrity sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+"zod-validation-error@^3.5.0 || ^4.0.0":
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz"
+  integrity sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==
+
+"zod@^3.25.0 || ^4.0.0":
+  version "4.1.12"
+  resolved "https://registry.npmjs.org/zod/-/zod-4.1.12.tgz"
+  integrity sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==
+
+zustand@^5.0.12:
+  version "5.0.12"
+  resolved "https://registry.npmjs.org/zustand/-/zustand-5.0.12.tgz"
+  integrity sha512-i77ae3aZq4dhMlRhJVCYgMLKuSiZAaUPAct2AksxQ+gOtimhGMdXljRT21P5BNpeT4kXlLIckvkPM029OljD7g==