diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
index dd84ea7..9b77ea7 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -1,10 +1,9 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Describe the bug**
@@ -12,6 +11,7 @@ A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/enhancement-request.md b/.github/ISSUE_TEMPLATE/enhancement-request.md
index 0f518f5..ca50336 100644
--- a/.github/ISSUE_TEMPLATE/enhancement-request.md
+++ b/.github/ISSUE_TEMPLATE/enhancement-request.md
@@ -1,10 +1,9 @@
 ---
 name: Enhancement Request
 about: Describe this issue template's purpose here.
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Describe the current behavior**
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
index bbcbbe7..2bc5d5f 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Is your feature request related to a problem? Please describe.**
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index b9719f4..7c9b501 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -2,11 +2,9 @@ name: Kaapi CI
 
 on:
   push:
-    branches:
-      - main
+    branches: [main]
   pull_request:
-    branches:
-      - main
+    branches: ["**"]
 
 jobs:
   lint-and-build:
@@ -19,11 +17,14 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          cache: 'npm'
+          cache: "npm"
 
       - name: Install dependencies
         run: npm ci
 
+      - name: Check Formatting with Prettier
+        run: npm run format:check
+
       - name: Run Linting
         run: npm run lint
 
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..ecb7018
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,15 @@
+node_modules
+.next
+out
+build
+coverage
+dist
+.git
+.husky
+public/mock-data
+*.tsbuildinfo
+next-env.d.ts
+.prettierrc
+package-lock.json
+yarn.lock
+pnpm-lock.yaml
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..9b4f01c
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf"
+}
diff --git a/app/coming-soon/guardrails/page.tsx b/app/coming-soon/guardrails/page.tsx
index 1e4ab0f..771d966 100644
--- a/app/coming-soon/guardrails/page.tsx
+++ b/app/coming-soon/guardrails/page.tsx
@@ -2,7 +2,7 @@
  * Guardrails - Coming Soon Page
  */
 
-import ComingSoon from '@/app/components/ComingSoon';
+import ComingSoon from "@/app/components/ComingSoon";
 
 export default function GuardrailsPage() {
   return (
diff --git a/app/coming-soon/model-testing/page.tsx b/app/coming-soon/model-testing/page.tsx
index cf2e4e2..503cb2a 100644
--- a/app/coming-soon/model-testing/page.tsx
+++ b/app/coming-soon/model-testing/page.tsx
@@ -2,7 +2,7 @@
  * Model Testing - Coming Soon Page
  */
 
-import ComingSoon from '@/app/components/ComingSoon';
+import ComingSoon from "@/app/components/ComingSoon";
 
 export default function ModelTestingPage() {
   return (
diff --git a/app/coming-soon/redteaming/page.tsx b/app/coming-soon/redteaming/page.tsx
index 9c39ffd..ad3e5ea 100644
--- a/app/coming-soon/redteaming/page.tsx
+++ b/app/coming-soon/redteaming/page.tsx
@@ -2,7 +2,7 @@
  * Redteaming - Coming Soon Page
  */
 
-import ComingSoon from '@/app/components/ComingSoon';
+import ComingSoon from "@/app/components/ComingSoon";
 
 export default function RedteamingPage() {
   return (
diff --git a/app/coming-soon/text-to-speech/page.tsx b/app/coming-soon/text-to-speech/page.tsx
index 7c49372..a829f4e 100644
--- a/app/coming-soon/text-to-speech/page.tsx
+++ b/app/coming-soon/text-to-speech/page.tsx
@@ -2,7 +2,7 @@
  * Text-to-Speech - Coming Soon Page
  */
 
-import ComingSoon from '@/app/components/ComingSoon';
+import ComingSoon from "@/app/components/ComingSoon";
 
 export default function TextToSpeechPage() {
   return (
diff --git a/app/components/ComingSoon.tsx b/app/components/ComingSoon.tsx
index 90bb293..f309174 100644
--- a/app/components/ComingSoon.tsx
+++ b/app/components/ComingSoon.tsx
@@ -3,20 +3,27 @@
  * Features a coffee brewing theme to match Kaapi branding
  */
 
-"use client"
-import { useRouter } from 'next/navigation';
-import { colors } from '@/app/lib/colors';
+"use client";
+
+import { useRouter } from "next/navigation";
+import { colors } from "@/app/lib/colors";
 
 interface ComingSoonProps {
   featureName: string;
   description?: string;
 }
 
-export default function ComingSoon({ featureName, description }: ComingSoonProps) {
+export default function ComingSoon({
+  featureName,
+  description,
+}: ComingSoonProps) {
   const router = useRouter();
 
   return (
-    <div className="w-full h-screen flex flex-col" style={{ backgroundColor: colors.bg.secondary }}>
+    <div
+      className="w-full h-screen flex flex-col"
+      style={{ backgroundColor: colors.bg.secondary }}
+    >
       <div className="flex-1 flex items-center justify-center p-6">
         <div className="max-w-md w-full text-center">
           {/* Coffee Cup Animation */}
@@ -24,8 +31,8 @@ export default function ComingSoon({ featureName, description }: ComingSoonProps
             <div
               className="text-8xl animate-bounce"
               style={{
-                animationDuration: '2s',
-                animationIterationCount: 'infinite'
+                animationDuration: "2s",
+                animationIterationCount: "infinite",
               }}
             >
               ☕
@@ -35,7 +42,7 @@ export default function ComingSoon({ featureName, description }: ComingSoonProps
               <div
                 className="text-3xl opacity-60"
                 style={{
-                  animation: 'steam 3s ease-in-out infinite'
+                  animation: "steam 3s ease-in-out infinite",
                 }}
               >
                 ～
@@ -48,27 +55,21 @@ export default function ComingSoon({ featureName, description }: ComingSoonProps
             className="text-3xl font-bold mb-4"
             style={{
               color: colors.text.primary,
-              letterSpacing: '-0.02em'
+              letterSpacing: "-0.02em",
             }}
           >
             {featureName}
           </h1>
 
-          <div
-            className="inline-block px-4 py-2 rounded-full mb-6 bg-[#fef3c7] border border-[#fde68a]"
-          >
-            <p
-              className="text-sm font-semibold text-[#92400e]"
-            >
+          <div className="inline-block px-4 py-2 rounded-full mb-6 bg-[#fef3c7] border border-[#fde68a]">
+            <p className="text-sm font-semibold text-[#92400e]">
               🚧 Being Brewed
             </p>
           </div>
 
-          <p
-            className="text-lg mb-8"
-            style={{ color: colors.text.secondary }}
-          >
-            {description || "This feature is currently being crafted with care. Check back soon for something amazing!"}
+          <p className="text-lg mb-8" style={{ color: colors.text.secondary }}>
+            {description ||
+              "This feature is currently being crafted with care. Check back soon for something amazing!"}
           </p>
 
           {/* Fun fact */}
@@ -76,7 +77,7 @@ export default function ComingSoon({ featureName, description }: ComingSoonProps
             className="border rounded-lg p-4 mb-8"
             style={{
               backgroundColor: colors.bg.primary,
-              borderColor: colors.border
+              borderColor: colors.border,
             }}
           >
             <p
@@ -85,10 +86,7 @@ export default function ComingSoon({ featureName, description }: ComingSoonProps
             >
               ☕ Kaapi Fact
             </p>
-            <p
-              className="text-sm"
-              style={{ color: colors.text.secondary }}
-            >
+            <p className="text-sm" style={{ color: colors.text.secondary }}>
               Great features, like great coffee, take time to brew.
             </p>
           </div>
@@ -100,8 +98,8 @@ export default function ComingSoon({ featureName, description }: ComingSoonProps
             style={{
               backgroundColor: colors.accent.primary,
               color: colors.bg.primary,
-              border: 'none',
-              transition: 'all 0.15s ease'
+              border: "none",
+              transition: "all 0.15s ease",
             }}
             onMouseEnter={(e) => {
               e.currentTarget.style.backgroundColor = colors.accent.hover;
@@ -117,7 +115,8 @@ export default function ComingSoon({ featureName, description }: ComingSoonProps
 
       <style jsx global>{`
         @keyframes steam {
-          0%, 100% {
+          0%,
+          100% {
             transform: translateY(0) translateX(-50%) scale(1);
             opacity: 0.6;
           }
diff --git a/app/components/ConfigCard.tsx b/app/components/ConfigCard.tsx
index 73a0444..0152ea4 100644
--- a/app/components/ConfigCard.tsx
+++ b/app/components/ConfigCard.tsx
@@ -4,12 +4,13 @@
  * Version management happens in Prompt Editor, not here
  */
 
-"use client"
-import React, { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { colors } from '@/app/lib/colors';
-import { ConfigGroup, SavedConfig } from '@/app/lib/types/configs';
-import { formatRelativeTime } from '@/app/lib/utils';
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { colors } from "@/app/lib/colors";
+import { ConfigGroup, SavedConfig } from "@/app/lib/types/configs";
+import { formatRelativeTime } from "@/app/lib/utils";
 
 interface ConfigCardProps {
   configGroup: ConfigGroup;
@@ -20,7 +21,7 @@ interface ConfigCardProps {
 export default function ConfigCard({
   configGroup,
   evaluationCount = 0,
-  onUseInEvaluation
+  onUseInEvaluation,
 }: ConfigCardProps) {
   const router = useRouter();
   const { latestVersion, totalVersions } = configGroup;
@@ -28,14 +29,18 @@ export default function ConfigCard({
   const [showVectorStores, setShowVectorStores] = useState(false);
 
   const handleEdit = () => {
-    router.push(`/configurations/prompt-editor?config=${latestVersion.config_id}&version=${latestVersion.version}`);
+    router.push(
+      `/configurations/prompt-editor?config=${latestVersion.config_id}&version=${latestVersion.version}`,
+    );
   };
 
   const handleUseInEvaluation = () => {
     if (onUseInEvaluation) {
       onUseInEvaluation(latestVersion);
     } else {
-      router.push(`/evaluations?config=${latestVersion.config_id}&version=${latestVersion.version}`);
+      router.push(
+        `/evaluations?config=${latestVersion.config_id}&version=${latestVersion.version}`,
+      );
     }
   };
 
@@ -72,7 +77,7 @@ export default function ConfigCard({
             style={{
               backgroundColor: colors.bg.secondary,
               color: colors.text.secondary,
-              border: `1px solid ${colors.border}`
+              border: `1px solid ${colors.border}`,
             }}
           >
             v{latestVersion.version}
@@ -86,7 +91,9 @@ export default function ConfigCard({
             style={{ backgroundColor: colors.bg.secondary }}
           >
             <span style={{ color: colors.text.secondary }}>Provider: </span>
-            <span style={{ color: colors.text.primary, fontWeight: 500 }}>{latestVersion.provider}</span>
+            <span style={{ color: colors.text.primary, fontWeight: 500 }}>
+              {latestVersion.provider}
+            </span>
           </div>
           <div
             className="px-2.5 py-1 rounded-md text-xs"
@@ -94,9 +101,9 @@ export default function ConfigCard({
           >
             <span style={{ color: colors.text.secondary }}>Type: </span>
             <span style={{ color: colors.text.primary, fontWeight: 500 }}>
-              {latestVersion.type === 'text' && '📝 Text'}
-              {latestVersion.type === 'stt' && '🎤 STT'}
-              {latestVersion.type === 'tts' && '🔊 TTS'}
+              {latestVersion.type === "text" && "📝 Text"}
+              {latestVersion.type === "stt" && "🎤 STT"}
+              {latestVersion.type === "tts" && "🔊 TTS"}
             </span>
           </div>
           <div
@@ -104,14 +111,18 @@ export default function ConfigCard({
             style={{ backgroundColor: colors.bg.secondary }}
           >
             <span style={{ color: colors.text.secondary }}>Model: </span>
-            <span style={{ color: colors.text.primary, fontWeight: 500 }}>{latestVersion.modelName}</span>
+            <span style={{ color: colors.text.primary, fontWeight: 500 }}>
+              {latestVersion.modelName}
+            </span>
           </div>
           <div
             className="px-2.5 py-1 rounded-md text-xs"
             style={{ backgroundColor: colors.bg.secondary }}
           >
             <span style={{ color: colors.text.secondary }}>Temp: </span>
-            <span style={{ color: colors.text.primary, fontWeight: 500 }}>{latestVersion.temperature.toFixed(2)}</span>
+            <span style={{ color: colors.text.primary, fontWeight: 500 }}>
+              {latestVersion.temperature.toFixed(2)}
+            </span>
           </div>
         </div>
 
@@ -130,13 +141,18 @@ export default function ConfigCard({
                 Tools ({latestVersion.tools.length})
               </span>
               <svg
-                className={`w-3 h-3 transition-transform ${showTools ? 'rotate-180' : ''}`}
+                className={`w-3 h-3 transition-transform ${showTools ? "rotate-180" : ""}`}
                 style={{ color: colors.text.secondary }}
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
               >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M19 9l-7 7-7-7"
+                />
               </svg>
             </button>
             {showTools && (
@@ -149,14 +165,17 @@ export default function ConfigCard({
               >
                 {latestVersion.tools.map((tool, idx) => (
                   <div key={idx} className="space-y-1">
-                    <div style={{ color: colors.text.primary, fontWeight: 500 }}>
+                    <div
+                      style={{ color: colors.text.primary, fontWeight: 500 }}
+                    >
                       {tool.type}
                     </div>
-                    {tool.knowledge_base_ids && tool.knowledge_base_ids.length > 0 && (
-                      <div style={{ color: colors.text.secondary }}>
-                        Knowledge Bases: {tool.knowledge_base_ids.length}
-                      </div>
-                    )}
+                    {tool.knowledge_base_ids &&
+                      tool.knowledge_base_ids.length > 0 && (
+                        <div style={{ color: colors.text.secondary }}>
+                          Knowledge Bases: {tool.knowledge_base_ids.length}
+                        </div>
+                      )}
                     {tool.max_num_results && (
                       <div style={{ color: colors.text.secondary }}>
                         Max Results: {tool.max_num_results}
@@ -169,54 +188,69 @@ export default function ConfigCard({
                 {(() => {
                   // Collect all knowledge_base_ids from all tools
                   const allVectorStoreIds = latestVersion.tools
-                    .flatMap(tool => tool.knowledge_base_ids || [])
-                    .filter(id => id);
+                    .flatMap((tool) => tool.knowledge_base_ids || [])
+                    .filter((id) => id);
 
-                  return allVectorStoreIds.length > 0 && (
-                    <div className="mt-3 pt-2" style={{ borderTop: `1px solid ${colors.border}` }}>
-                      <button
-                        onClick={() => setShowVectorStores(!showVectorStores)}
-                        className="w-full flex items-center justify-between px-2 py-1 rounded-md transition-colors"
-                        style={{
-                          backgroundColor: colors.bg.primary,
-                        }}
+                  return (
+                    allVectorStoreIds.length > 0 && (
+                      <div
+                        className="mt-3 pt-2"
+                        style={{ borderTop: `1px solid ${colors.border}` }}
                       >
-                        <span style={{ color: colors.text.secondary, fontSize: '11px' }}>
-                          Knowledge Base IDs ({allVectorStoreIds.length})
-                        </span>
-                        <svg
-                          className={`w-3 h-3 transition-transform ${showVectorStores ? 'rotate-180' : ''}`}
-                          style={{ color: colors.text.secondary }}
-                          fill="none"
-                          viewBox="0 0 24 24"
-                          stroke="currentColor"
-                        >
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                        </svg>
-                      </button>
-                      {showVectorStores && (
-                        <div
-                          className="mt-1 p-2 rounded-md space-y-1"
+                        <button
+                          onClick={() => setShowVectorStores(!showVectorStores)}
+                          className="w-full flex items-center justify-between px-2 py-1 rounded-md transition-colors"
                           style={{
                             backgroundColor: colors.bg.primary,
-                            color: colors.text.primary,
                           }}
                         >
-                          {allVectorStoreIds.map((id, idx) => (
-                            <div
-                              key={idx}
-                              className="break-all"
-                              style={{
-                                fontFamily: 'monospace',
-                                fontSize: '10px',
-                              }}
-                            >
-                              {id}
-                            </div>
-                          ))}
-                        </div>
-                      )}
-                    </div>
+                          <span
+                            style={{
+                              color: colors.text.secondary,
+                              fontSize: "11px",
+                            }}
+                          >
+                            Knowledge Base IDs ({allVectorStoreIds.length})
+                          </span>
+                          <svg
+                            className={`w-3 h-3 transition-transform ${showVectorStores ? "rotate-180" : ""}`}
+                            style={{ color: colors.text.secondary }}
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M19 9l-7 7-7-7"
+                            />
+                          </svg>
+                        </button>
+                        {showVectorStores && (
+                          <div
+                            className="mt-1 p-2 rounded-md space-y-1"
+                            style={{
+                              backgroundColor: colors.bg.primary,
+                              color: colors.text.primary,
+                            }}
+                          >
+                            {allVectorStoreIds.map((id, idx) => (
+                              <div
+                                key={idx}
+                                className="break-all"
+                                style={{
+                                  fontFamily: "monospace",
+                                  fontSize: "10px",
+                                }}
+                              >
+                                {id}
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    )
                   );
                 })()}
               </div>
@@ -229,26 +263,30 @@ export default function ConfigCard({
           className="rounded-md p-3 mb-4 text-xs font-mono overflow-hidden"
           style={{
             backgroundColor: colors.bg.secondary,
-            maxHeight: '60px',
+            maxHeight: "60px",
           }}
         >
-          <p
-            className="line-clamp-2"
-            style={{ color: colors.text.secondary }}
-          >
-            {latestVersion.instructions || 'No instructions set'}
+          <p className="line-clamp-2" style={{ color: colors.text.secondary }}>
+            {latestVersion.instructions || "No instructions set"}
           </p>
         </div>
 
         {/* Meta Info */}
-        <div className="flex items-center gap-4 text-xs mb-4" style={{ color: colors.text.secondary }}>
+        <div
+          className="flex items-center gap-4 text-xs mb-4"
+          style={{ color: colors.text.secondary }}
+        >
           <span>Updated {formatRelativeTime(latestVersion.timestamp)}</span>
           <span>|</span>
-          <span>{totalVersions} version{totalVersions !== 1 ? 's' : ''}</span>
+          <span>
+            {totalVersions} version{totalVersions !== 1 ? "s" : ""}
+          </span>
           {evaluationCount > 0 && (
             <>
               <span>|</span>
-              <span>{evaluationCount} evaluation{evaluationCount !== 1 ? 's' : ''}</span>
+              <span>
+                {evaluationCount} evaluation{evaluationCount !== 1 ? "s" : ""}
+              </span>
             </>
           )}
         </div>
@@ -263,11 +301,25 @@ export default function ConfigCard({
               border: `1px solid ${colors.border}`,
               color: colors.text.primary,
             }}
-            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = colors.bg.secondary}
-            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = colors.bg.primary}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = colors.bg.secondary)
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = colors.bg.primary)
+            }
           >
-            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+              />
             </svg>
             Open in Editor
           </button>
@@ -277,14 +329,33 @@ export default function ConfigCard({
             style={{
               backgroundColor: colors.accent.primary,
               color: colors.bg.primary,
-              border: 'none',
+              border: "none",
             }}
-            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = colors.accent.hover}
-            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = colors.accent.primary}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = colors.accent.hover)
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = colors.accent.primary)
+            }
           >
-            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+              />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
             </svg>
             Run Evaluation
           </button>
diff --git a/app/components/ConfigDrawer.tsx b/app/components/ConfigDrawer.tsx
index 320ebaa..c6bec61 100644
--- a/app/components/ConfigDrawer.tsx
+++ b/app/components/ConfigDrawer.tsx
@@ -6,13 +6,13 @@
 
 "use client";
 
-import React, { useState } from 'react';
-import { colors } from '@/app/lib/colors';
-import { SavedConfig } from './SimplifiedConfigEditor';
-import { Tool } from '@/app/lib/configTypes';
+import React, { useState } from "react";
+import { colors } from "@/app/lib/colors";
+import { SavedConfig } from "./SimplifiedConfigEditor";
+import { Tool } from "@/app/lib/configTypes";
 
 interface DiffLine {
-  type: 'same' | 'added' | 'removed';
+  type: "same" | "added" | "removed";
   content: string;
   lineNumber: number;
 }
@@ -41,11 +41,11 @@ interface ConfigDrawerProps {
 
 const MODEL_OPTIONS = {
   openai: [
-    { value: 'gpt-4o', label: 'GPT-4o' },
-    { value: 'gpt-4o-mini', label: 'GPT-4o Mini' },
-    { value: 'gpt-4-turbo', label: 'GPT-4 Turbo' },
-    { value: 'gpt-4', label: 'GPT-4' },
-    { value: 'gpt-3.5-turbo', label: 'GPT-3.5 Turbo' },
+    { value: "gpt-4o", label: "GPT-4o" },
+    { value: "gpt-4o-mini", label: "GPT-4o Mini" },
+    { value: "gpt-4-turbo", label: "GPT-4 Turbo" },
+    { value: "gpt-4", label: "GPT-4" },
+    { value: "gpt-3.5-turbo", label: "GPT-3.5 Turbo" },
   ],
   // anthropic: [
   //   { value: 'claude-3-5-sonnet-20241022', label: 'Claude 3.5 Sonnet' },
@@ -60,9 +60,12 @@ const MODEL_OPTIONS = {
   // ],
 };
 
-function generateDiff(text1: string, text2: string): { left: DiffLine[], right: DiffLine[] } {
-  const lines1 = text1.split('\n');
-  const lines2 = text2.split('\n');
+function generateDiff(
+  text1: string,
+  text2: string,
+): { left: DiffLine[]; right: DiffLine[] } {
+  const lines1 = text1.split("\n");
+  const lines2 = text2.split("\n");
   const left: DiffLine[] = [];
   const right: DiffLine[] = [];
   const maxLen = Math.max(lines1.length, lines2.length);
@@ -72,17 +75,17 @@ function generateDiff(text1: string, text2: string): { left: DiffLine[], right:
     const line2 = lines2[i] !== undefined ? lines2[i] : null;
 
     if (line1 === null && line2 !== null) {
-      left.push({ type: 'same', content: '', lineNumber: i + 1 });
-      right.push({ type: 'added', content: line2, lineNumber: i + 1 });
+      left.push({ type: "same", content: "", lineNumber: i + 1 });
+      right.push({ type: "added", content: line2, lineNumber: i + 1 });
     } else if (line1 !== null && line2 === null) {
-      left.push({ type: 'removed', content: line1, lineNumber: i + 1 });
-      right.push({ type: 'same', content: '', lineNumber: i + 1 });
+      left.push({ type: "removed", content: line1, lineNumber: i + 1 });
+      right.push({ type: "same", content: "", lineNumber: i + 1 });
     } else if (line1 !== line2) {
-      left.push({ type: 'removed', content: line1 || '', lineNumber: i + 1 });
-      right.push({ type: 'added', content: line2 || '', lineNumber: i + 1 });
+      left.push({ type: "removed", content: line1 || "", lineNumber: i + 1 });
+      right.push({ type: "added", content: line2 || "", lineNumber: i + 1 });
     } else {
-      left.push({ type: 'same', content: line1 || '', lineNumber: i + 1 });
-      right.push({ type: 'same', content: line2 || '', lineNumber: i + 1 });
+      left.push({ type: "same", content: line1 || "", lineNumber: i + 1 });
+      right.push({ type: "same", content: line2 || "", lineNumber: i + 1 });
     }
   }
 
@@ -100,10 +103,14 @@ export default function ConfigDrawer({
   onLoadConfig,
   onApplyConfig,
 }: ConfigDrawerProps) {
-  const [activeTab, setActiveTab] = useState<'current' | 'saved' | 'compare'>('current');
-  const [leftConfigId, setLeftConfigId] = useState<string>('current');
-  const [rightConfigId, setRightConfigId] = useState<string>('');
-  const [expandedConfigs, setExpandedConfigs] = useState<Set<string>>(new Set());
+  const [activeTab, setActiveTab] = useState<"current" | "saved" | "compare">(
+    "current",
+  );
+  const [leftConfigId, setLeftConfigId] = useState<string>("current");
+  const [rightConfigId, setRightConfigId] = useState<string>("");
+  const [expandedConfigs, setExpandedConfigs] = useState<Set<string>>(
+    new Set(),
+  );
   const [isCreatingNew, setIsCreatingNew] = useState(false);
 
   // Sync isCreatingNew with selectedConfigId
@@ -125,16 +132,19 @@ export default function ConfigDrawer({
   };
 
   // Group saved configs by name
-  const groupedConfigs = savedConfigs.reduce((acc, config) => {
-    if (!acc[config.name]) {
-      acc[config.name] = [];
-    }
-    acc[config.name].push(config);
-    return acc;
-  }, {} as Record<string, SavedConfig[]>);
+  const groupedConfigs = savedConfigs.reduce(
+    (acc, config) => {
+      if (!acc[config.name]) {
+        acc[config.name] = [];
+      }
+      acc[config.name].push(config);
+      return acc;
+    },
+    {} as Record<string, SavedConfig[]>,
+  );
 
   // Sort versions within each group (newest first)
-  Object.keys(groupedConfigs).forEach(name => {
+  Object.keys(groupedConfigs).forEach((name) => {
     groupedConfigs[name].sort((a, b) => b.version - a.version);
   });
 
@@ -142,9 +152,10 @@ export default function ConfigDrawer({
   const formatTimestamp = (timestamp: number | string) => {
     // eslint-disable-next-line react-hooks/purity
     const now = Date.now(); // Current time in UTC milliseconds
-    const date = typeof timestamp === 'string'
-      ? new Date(timestamp).getTime() // Parse UTC timestamp to milliseconds
-      : timestamp;
+    const date =
+      typeof timestamp === "string"
+        ? new Date(timestamp).getTime() // Parse UTC timestamp to milliseconds
+        : timestamp;
 
     // Calculate difference (works the same in any timezone)
     const diff = now - date;
@@ -152,18 +163,18 @@ export default function ConfigDrawer({
     const hours = Math.floor(diff / 3600000);
     const days = Math.floor(diff / 86400000);
 
-    if (minutes < 1) return 'just now';
+    if (minutes < 1) return "just now";
     if (minutes < 60) return `${minutes} min ago`;
     if (hours < 24) return `${hours} hr ago`;
-    return `${days} day${days > 1 ? 's' : ''} ago`;
+    return `${days} day${days > 1 ? "s" : ""} ago`;
   };
 
   // Get content for comparison
   const getContentForComparison = (configId: string) => {
-    if (configId === 'current') {
-      return { ...currentConfig, label: 'Current (unsaved)' };
+    if (configId === "current") {
+      return { ...currentConfig, label: "Current (unsaved)" };
     }
-    const config = savedConfigs.find(c => c.id === configId);
+    const config = savedConfigs.find((c) => c.id === configId);
     if (config) {
       return { ...config, label: `${config.name} v${config.version}` };
     }
@@ -172,11 +183,11 @@ export default function ConfigDrawer({
 
   // Build compare options
   const buildCompareOptions = () => [
-    { value: 'current', label: '📝 Current (unsaved)' },
-    ...savedConfigs.map(c => ({
+    { value: "current", label: "📝 Current (unsaved)" },
+    ...savedConfigs.map((c) => ({
       value: c.id,
-      label: `${c.name} v${c.version} · ${formatTimestamp(c.timestamp)}`
-    }))
+      label: `${c.name} v${c.version} · ${formatTimestamp(c.timestamp)}`,
+    })),
   ];
 
   // Swap comparison
@@ -188,7 +199,7 @@ export default function ConfigDrawer({
 
   // Handle load config
   const handleLoadConfigLocal = (configId: string) => {
-    const config = savedConfigs.find(c => c.id === configId);
+    const config = savedConfigs.find((c) => c.id === configId);
     if (config) {
       onLoadConfig(config);
       setIsCreatingNew(false);
@@ -202,28 +213,28 @@ export default function ConfigDrawer({
     const newTools = [
       ...tools,
       {
-        type: 'file_search' as const,
-        knowledge_base_ids: [''],
+        type: "file_search" as const,
+        knowledge_base_ids: [""],
         max_num_results: 20,
       },
     ];
-    onConfigChange('tools', newTools);
+    onConfigChange("tools", newTools);
   };
 
   const removeTool = (index: number) => {
     const newTools = tools.filter((_, i) => i !== index);
-    onConfigChange('tools', newTools);
+    onConfigChange("tools", newTools);
   };
 
   const updateTool = (index: number, field: keyof Tool, value: unknown) => {
     const newTools = [...tools];
-    if (field === 'knowledge_base_ids') {
+    if (field === "knowledge_base_ids") {
       newTools[index][field] = [value as string];
     } else {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       (newTools[index] as any)[field] = value;
     }
-    onConfigChange('tools', newTools);
+    onConfigChange("tools", newTools);
   };
 
   if (!isOpen) return null;
@@ -233,7 +244,7 @@ export default function ConfigDrawer({
       {/* Backdrop */}
       <div
         className="fixed inset-0 z-40"
-        style={{ backgroundColor: 'rgba(0, 0, 0, 0.3)' }}
+        style={{ backgroundColor: "rgba(0, 0, 0, 0.3)" }}
         onClick={onClose}
       />
 
@@ -246,60 +257,69 @@ export default function ConfigDrawer({
           bottom: 0,
           backgroundColor: colors.bg.primary,
           borderLeft: `1px solid ${colors.border}`,
-          boxShadow: '-4px 0 12px rgba(0, 0, 0, 0.15)',
+          boxShadow: "-4px 0 12px rgba(0, 0, 0, 0.15)",
         }}
       >
         {/* Header with Tabs */}
         <div
           style={{
-            padding: '20px',
+            padding: "20px",
             borderBottom: `1px solid ${colors.border}`,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
           }}
         >
-          <div style={{ display: 'flex', gap: '12px' }}>
+          <div style={{ display: "flex", gap: "12px" }}>
             <button
-              onClick={() => setActiveTab('current')}
+              onClick={() => setActiveTab("current")}
               style={{
-                padding: '6px 12px',
-                backgroundColor: activeTab === 'current' ? colors.accent.primary : 'transparent',
-                color: activeTab === 'current' ? '#ffffff' : colors.text.primary,
+                padding: "6px 12px",
+                backgroundColor:
+                  activeTab === "current"
+                    ? colors.accent.primary
+                    : "transparent",
+                color:
+                  activeTab === "current" ? "#ffffff" : colors.text.primary,
                 border: `1px solid ${colors.border}`,
-                borderRadius: '4px',
-                cursor: 'pointer',
-                fontSize: '13px',
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontSize: "13px",
                 fontWeight: 500,
               }}
             >
               Current
             </button>
             <button
-              onClick={() => setActiveTab('saved')}
+              onClick={() => setActiveTab("saved")}
               style={{
-                padding: '6px 12px',
-                backgroundColor: activeTab === 'saved' ? colors.accent.primary : 'transparent',
-                color: activeTab === 'saved' ? '#ffffff' : colors.text.primary,
+                padding: "6px 12px",
+                backgroundColor:
+                  activeTab === "saved" ? colors.accent.primary : "transparent",
+                color: activeTab === "saved" ? "#ffffff" : colors.text.primary,
                 border: `1px solid ${colors.border}`,
-                borderRadius: '4px',
-                cursor: 'pointer',
-                fontSize: '13px',
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontSize: "13px",
                 fontWeight: 500,
               }}
             >
               Saved
             </button>
             <button
-              onClick={() => setActiveTab('compare')}
+              onClick={() => setActiveTab("compare")}
               style={{
-                padding: '6px 12px',
-                backgroundColor: activeTab === 'compare' ? colors.accent.primary : 'transparent',
-                color: activeTab === 'compare' ? '#ffffff' : colors.text.primary,
+                padding: "6px 12px",
+                backgroundColor:
+                  activeTab === "compare"
+                    ? colors.accent.primary
+                    : "transparent",
+                color:
+                  activeTab === "compare" ? "#ffffff" : colors.text.primary,
                 border: `1px solid ${colors.border}`,
-                borderRadius: '4px',
-                cursor: 'pointer',
-                fontSize: '13px',
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontSize: "13px",
                 fontWeight: 500,
               }}
             >
@@ -309,12 +329,12 @@ export default function ConfigDrawer({
           <button
             onClick={onClose}
             style={{
-              background: 'none',
-              border: 'none',
-              fontSize: '20px',
-              cursor: 'pointer',
+              background: "none",
+              border: "none",
+              fontSize: "20px",
+              cursor: "pointer",
               color: colors.text.secondary,
-              padding: '4px',
+              padding: "4px",
             }}
           >
             ✕
@@ -325,27 +345,29 @@ export default function ConfigDrawer({
         <div
           style={{
             flex: 1,
-            overflowY: 'auto',
-            padding: '20px',
+            overflowY: "auto",
+            padding: "20px",
           }}
         >
           {/* CURRENT TAB */}
-          {activeTab === 'current' && (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+          {activeTab === "current" && (
+            <div
+              style={{ display: "flex", flexDirection: "column", gap: "16px" }}
+            >
               {/* Config Selector */}
               <div>
                 <label
                   style={{
-                    display: 'block',
-                    fontSize: '12px',
+                    display: "block",
+                    fontSize: "12px",
                     fontWeight: 600,
                     color: colors.text.primary,
-                    marginBottom: '6px',
+                    marginBottom: "6px",
                   }}
                 >
                   Configuration
                 </label>
-                <div style={{ display: 'flex', gap: '8px' }}>
+                <div style={{ display: "flex", gap: "8px" }}>
                   {!isCreatingNew ? (
                     <>
                       <select
@@ -357,10 +379,10 @@ export default function ConfigDrawer({
                         }}
                         style={{
                           flex: 1,
-                          padding: '8px',
+                          padding: "8px",
                           border: `1px solid ${colors.border}`,
-                          borderRadius: '4px',
-                          fontSize: '13px',
+                          borderRadius: "4px",
+                          fontSize: "13px",
                           backgroundColor: colors.bg.primary,
                         }}
                       >
@@ -374,17 +396,17 @@ export default function ConfigDrawer({
                       <button
                         onClick={() => {
                           setIsCreatingNew(true);
-                          onConfigChange('name', '');
-                          onConfigChange('selectedConfigId', '');
+                          onConfigChange("name", "");
+                          onConfigChange("selectedConfigId", "");
                         }}
                         style={{
-                          padding: '8px 12px',
+                          padding: "8px 12px",
                           backgroundColor: colors.accent.primary,
-                          color: '#ffffff',
-                          border: 'none',
-                          borderRadius: '4px',
-                          cursor: 'pointer',
-                          fontSize: '13px',
+                          color: "#ffffff",
+                          border: "none",
+                          borderRadius: "4px",
+                          cursor: "pointer",
+                          fontSize: "13px",
                           fontWeight: 500,
                         }}
                       >
@@ -396,26 +418,26 @@ export default function ConfigDrawer({
                       <input
                         type="text"
                         value={currentConfig.name}
-                        onChange={(e) => onConfigChange('name', e.target.value)}
+                        onChange={(e) => onConfigChange("name", e.target.value)}
                         placeholder="Enter config name..."
                         style={{
                           flex: 1,
-                          padding: '8px',
+                          padding: "8px",
                           border: `1px solid ${colors.border}`,
-                          borderRadius: '4px',
-                          fontSize: '13px',
+                          borderRadius: "4px",
+                          fontSize: "13px",
                         }}
                       />
                       <button
                         onClick={() => setIsCreatingNew(false)}
                         style={{
-                          padding: '8px 12px',
+                          padding: "8px 12px",
                           backgroundColor: colors.bg.secondary,
                           color: colors.text.primary,
                           border: `1px solid ${colors.border}`,
-                          borderRadius: '4px',
-                          cursor: 'pointer',
-                          fontSize: '13px',
+                          borderRadius: "4px",
+                          cursor: "pointer",
+                          fontSize: "13px",
                         }}
                       >
                         Cancel
@@ -429,11 +451,11 @@ export default function ConfigDrawer({
               <div>
                 <label
                   style={{
-                    display: 'block',
-                    fontSize: '12px',
+                    display: "block",
+                    fontSize: "12px",
                     fontWeight: 600,
                     color: colors.text.primary,
-                    marginBottom: '6px',
+                    marginBottom: "6px",
                   }}
                 >
                   Provider
@@ -441,17 +463,21 @@ export default function ConfigDrawer({
                 <select
                   value={currentConfig.provider}
                   onChange={(e) => {
-                    onConfigChange('provider', e.target.value);
+                    onConfigChange("provider", e.target.value);
                     // Reset model when provider changes
-                    const newProvider = e.target.value as keyof typeof MODEL_OPTIONS;
-                    onConfigChange('modelName', MODEL_OPTIONS[newProvider][0].value);
+                    const newProvider = e.target
+                      .value as keyof typeof MODEL_OPTIONS;
+                    onConfigChange(
+                      "modelName",
+                      MODEL_OPTIONS[newProvider][0].value,
+                    );
                   }}
                   style={{
-                    width: '100%',
-                    padding: '8px',
+                    width: "100%",
+                    padding: "8px",
                     border: `1px solid ${colors.border}`,
-                    borderRadius: '4px',
-                    fontSize: '13px',
+                    borderRadius: "4px",
+                    fontSize: "13px",
                     backgroundColor: colors.bg.primary,
                   }}
                 >
@@ -465,28 +491,30 @@ export default function ConfigDrawer({
               <div>
                 <label
                   style={{
-                    display: 'block',
-                    fontSize: '12px',
+                    display: "block",
+                    fontSize: "12px",
                     fontWeight: 600,
                     color: colors.text.primary,
-                    marginBottom: '6px',
+                    marginBottom: "6px",
                   }}
                 >
                   Model
                 </label>
                 <select
                   value={currentConfig.modelName}
-                  onChange={(e) => onConfigChange('modelName', e.target.value)}
+                  onChange={(e) => onConfigChange("modelName", e.target.value)}
                   style={{
-                    width: '100%',
-                    padding: '8px',
+                    width: "100%",
+                    padding: "8px",
                     border: `1px solid ${colors.border}`,
-                    borderRadius: '4px',
-                    fontSize: '13px',
+                    borderRadius: "4px",
+                    fontSize: "13px",
                     backgroundColor: colors.bg.primary,
                   }}
                 >
-                  {MODEL_OPTIONS[currentConfig.provider as keyof typeof MODEL_OPTIONS].map((model) => (
+                  {MODEL_OPTIONS[
+                    currentConfig.provider as keyof typeof MODEL_OPTIONS
+                  ].map((model) => (
                     <option key={model.value} value={model.value}>
                       {model.label}
                     </option>
@@ -498,28 +526,30 @@ export default function ConfigDrawer({
               <div>
                 <label
                   style={{
-                    display: 'block',
-                    fontSize: '12px',
+                    display: "block",
+                    fontSize: "12px",
                     fontWeight: 600,
                     color: colors.text.primary,
-                    marginBottom: '6px',
+                    marginBottom: "6px",
                   }}
                 >
                   Instructions
                 </label>
                 <textarea
                   value={currentConfig.instructions}
-                  onChange={(e) => onConfigChange('instructions', e.target.value)}
+                  onChange={(e) =>
+                    onConfigChange("instructions", e.target.value)
+                  }
                   placeholder="Enter instructions..."
                   style={{
-                    width: '100%',
-                    minHeight: '120px',
-                    padding: '8px',
+                    width: "100%",
+                    minHeight: "120px",
+                    padding: "8px",
                     border: `1px solid ${colors.border}`,
-                    borderRadius: '4px',
-                    fontSize: '13px',
-                    fontFamily: 'monospace',
-                    resize: 'vertical',
+                    borderRadius: "4px",
+                    fontSize: "13px",
+                    fontFamily: "monospace",
+                    resize: "vertical",
                   }}
                 />
               </div>
@@ -528,11 +558,11 @@ export default function ConfigDrawer({
               <div>
                 <label
                   style={{
-                    display: 'block',
-                    fontSize: '12px',
+                    display: "block",
+                    fontSize: "12px",
                     fontWeight: 600,
                     color: colors.text.primary,
-                    marginBottom: '6px',
+                    marginBottom: "6px",
                   }}
                 >
                   Temperature: {currentConfig.temperature.toFixed(1)}
@@ -543,16 +573,18 @@ export default function ConfigDrawer({
                   max="1"
                   step="0.1"
                   value={currentConfig.temperature}
-                  onChange={(e) => onConfigChange('temperature', parseFloat(e.target.value))}
-                  style={{ width: '100%', accentColor: colors.accent.primary }}
+                  onChange={(e) =>
+                    onConfigChange("temperature", parseFloat(e.target.value))
+                  }
+                  style={{ width: "100%", accentColor: colors.accent.primary }}
                 />
                 <div
                   style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    fontSize: '11px',
+                    display: "flex",
+                    justifyContent: "space-between",
+                    fontSize: "11px",
                     color: colors.text.secondary,
-                    marginTop: '4px',
+                    marginTop: "4px",
                   }}
                 >
                   <span>Focused (0)</span>
@@ -565,15 +597,15 @@ export default function ConfigDrawer({
               <div>
                 <div
                   style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    marginBottom: '8px',
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginBottom: "8px",
                   }}
                 >
                   <label
                     style={{
-                      fontSize: '12px',
+                      fontSize: "12px",
                       fontWeight: 600,
                       color: colors.text.primary,
                     }}
@@ -583,13 +615,13 @@ export default function ConfigDrawer({
                   <button
                     onClick={addTool}
                     style={{
-                      padding: '4px 8px',
+                      padding: "4px 8px",
                       backgroundColor: colors.accent.primary,
-                      color: '#ffffff',
-                      border: 'none',
-                      borderRadius: '4px',
-                      cursor: 'pointer',
-                      fontSize: '11px',
+                      color: "#ffffff",
+                      border: "none",
+                      borderRadius: "4px",
+                      cursor: "pointer",
+                      fontSize: "11px",
                     }}
                   >
                     + Add Tool
@@ -599,67 +631,75 @@ export default function ConfigDrawer({
                   <div
                     key={index}
                     style={{
-                      padding: '12px',
+                      padding: "12px",
                       border: `1px solid ${colors.border}`,
-                      borderRadius: '4px',
-                      marginBottom: '8px',
+                      borderRadius: "4px",
+                      marginBottom: "8px",
                       backgroundColor: colors.bg.secondary,
                     }}
                   >
                     <div
                       style={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        marginBottom: '8px',
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                        marginBottom: "8px",
                       }}
                     >
-                      <span style={{ fontSize: '12px', fontWeight: 600 }}>File Search</span>
+                      <span style={{ fontSize: "12px", fontWeight: 600 }}>
+                        File Search
+                      </span>
                       <button
                         onClick={() => removeTool(index)}
                         style={{
-                          background: 'none',
-                          border: 'none',
+                          background: "none",
+                          border: "none",
                           color: colors.status.error,
-                          cursor: 'pointer',
-                          fontSize: '12px',
+                          cursor: "pointer",
+                          fontSize: "12px",
                         }}
                       >
                         Remove
                       </button>
                     </div>
-                    <div style={{ marginBottom: '8px' }}>
+                    <div style={{ marginBottom: "8px" }}>
                       <label
                         style={{
-                          display: 'block',
-                          fontSize: '11px',
+                          display: "block",
+                          fontSize: "11px",
                           color: colors.text.secondary,
-                          marginBottom: '4px',
+                          marginBottom: "4px",
                         }}
                       >
                         Knowledge Base ID
                       </label>
                       <input
                         type="text"
-                        value={tool.knowledge_base_ids[0] || ''}
-                        onChange={(e) => updateTool(index, 'knowledge_base_ids', e.target.value)}
+                        value={tool.knowledge_base_ids[0] || ""}
+                        onChange={(e) =>
+                          updateTool(
+                            index,
+                            "knowledge_base_ids",
+                            e.target.value,
+                          )
+                        }
                         placeholder="vs_abc123"
                         style={{
-                          width: '100%',
-                          padding: '6px',
+                          width: "100%",
+                          padding: "6px",
                           border: `1px solid ${colors.border}`,
-                          borderRadius: '4px',
-                          fontSize: '12px',
+                          borderRadius: "4px",
+                          fontSize: "12px",
                         }}
                       />
                     </div>
                     <div>
                       <label
                         style={{
-                          display: 'block',
-                          fontSize: '11px',
+                          display: "block",
+                          fontSize: "11px",
                           color: colors.text.secondary,
-                          marginBottom: '4px',
+                          marginBottom: "4px",
                         }}
                       >
                         Max Results
@@ -668,14 +708,18 @@ export default function ConfigDrawer({
                         type="number"
                         value={tool.max_num_results}
                         onChange={(e) =>
-                          updateTool(index, 'max_num_results', parseInt(e.target.value) || 20)
+                          updateTool(
+                            index,
+                            "max_num_results",
+                            parseInt(e.target.value) || 20,
+                          )
                         }
                         style={{
-                          width: '100%',
-                          padding: '6px',
+                          width: "100%",
+                          padding: "6px",
                           border: `1px solid ${colors.border}`,
-                          borderRadius: '4px',
-                          fontSize: '12px',
+                          borderRadius: "4px",
+                          fontSize: "12px",
                         }}
                       />
                     </div>
@@ -687,26 +731,28 @@ export default function ConfigDrawer({
               <div>
                 <label
                   style={{
-                    display: 'block',
-                    fontSize: '12px',
+                    display: "block",
+                    fontSize: "12px",
                     fontWeight: 600,
                     color: colors.text.primary,
-                    marginBottom: '6px',
+                    marginBottom: "6px",
                   }}
                 >
                   Commit Message (Optional)
                 </label>
                 <input
                   type="text"
-                  value={currentConfig.commitMessage || ''}
-                  onChange={(e) => onConfigChange('commitMessage', e.target.value)}
+                  value={currentConfig.commitMessage || ""}
+                  onChange={(e) =>
+                    onConfigChange("commitMessage", e.target.value)
+                  }
                   placeholder="Describe this configuration..."
                   style={{
-                    width: '100%',
-                    padding: '8px',
+                    width: "100%",
+                    padding: "8px",
                     border: `1px solid ${colors.border}`,
-                    borderRadius: '4px',
-                    fontSize: '13px',
+                    borderRadius: "4px",
+                    fontSize: "13px",
                   }}
                 />
               </div>
@@ -715,14 +761,14 @@ export default function ConfigDrawer({
               <button
                 onClick={onSaveConfig}
                 style={{
-                  width: '100%',
-                  padding: '12px',
+                  width: "100%",
+                  padding: "12px",
                   backgroundColor: colors.status.success,
-                  color: '#ffffff',
-                  border: 'none',
-                  borderRadius: '4px',
-                  cursor: 'pointer',
-                  fontSize: '14px',
+                  color: "#ffffff",
+                  border: "none",
+                  borderRadius: "4px",
+                  cursor: "pointer",
+                  fontSize: "14px",
                   fontWeight: 600,
                 }}
               >
@@ -732,14 +778,23 @@ export default function ConfigDrawer({
           )}
 
           {/* SAVED TAB */}
-          {activeTab === 'saved' && (
+          {activeTab === "saved" && (
             <div className="space-y-3">
-              <div className="text-xs font-semibold mb-3" style={{ color: colors.text.secondary }}>
+              <div
+                className="text-xs font-semibold mb-3"
+                style={{ color: colors.text.secondary }}
+              >
                 📚 Saved Configurations
               </div>
               {Object.keys(groupedConfigs).length === 0 ? (
-                <div className="border-2 border-dashed rounded-lg p-6 text-center" style={{ borderColor: colors.border }}>
-                  <p className="text-sm" style={{ color: colors.text.secondary }}>
+                <div
+                  className="border-2 border-dashed rounded-lg p-6 text-center"
+                  style={{ borderColor: colors.border }}
+                >
+                  <p
+                    className="text-sm"
+                    style={{ color: colors.text.secondary }}
+                  >
                     No saved configurations yet
                   </p>
                 </div>
@@ -753,7 +808,7 @@ export default function ConfigDrawer({
                       className="border rounded-lg overflow-hidden"
                       style={{
                         borderColor: colors.border,
-                        transition: 'all 0.15s ease'
+                        transition: "all 0.15s ease",
                       }}
                     >
                       {/* Config Header */}
@@ -762,21 +817,37 @@ export default function ConfigDrawer({
                         className="p-3 cursor-pointer"
                         style={{
                           backgroundColor: colors.bg.secondary,
-                          transition: 'all 0.15s ease'
+                          transition: "all 0.15s ease",
                         }}
-                        onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#f5f5f5'}
-                        onMouseLeave={(e) => e.currentTarget.style.backgroundColor = colors.bg.secondary}
+                        onMouseEnter={(e) =>
+                          (e.currentTarget.style.backgroundColor = "#f5f5f5")
+                        }
+                        onMouseLeave={(e) =>
+                          (e.currentTarget.style.backgroundColor =
+                            colors.bg.secondary)
+                        }
                       >
                         <div className="flex items-start gap-2">
-                          <span className="text-sm" style={{ color: colors.text.secondary }}>
-                            {isExpanded ? '▼' : '▶'}
+                          <span
+                            className="text-sm"
+                            style={{ color: colors.text.secondary }}
+                          >
+                            {isExpanded ? "▼" : "▶"}
                           </span>
                           <div className="flex-1">
-                            <div className="text-sm font-semibold" style={{ color: colors.text.primary }}>
+                            <div
+                              className="text-sm font-semibold"
+                              style={{ color: colors.text.primary }}
+                            >
                               {configName}
                             </div>
-                            <div className="text-xs mt-0.5" style={{ color: colors.text.secondary }}>
-                              {versions.length} version{versions.length > 1 ? 's' : ''} • Latest: {latestVersion.provider}/{latestVersion.modelName}
+                            <div
+                              className="text-xs mt-0.5"
+                              style={{ color: colors.text.secondary }}
+                            >
+                              {versions.length} version
+                              {versions.length > 1 ? "s" : ""} • Latest:{" "}
+                              {latestVersion.provider}/{latestVersion.modelName}
                             </div>
                           </div>
                         </div>
@@ -784,16 +855,26 @@ export default function ConfigDrawer({
 
                       {/* Versions List */}
                       {isExpanded && (
-                        <div className="border-t" style={{ borderColor: colors.border }}>
+                        <div
+                          className="border-t"
+                          style={{ borderColor: colors.border }}
+                        >
                           {versions.map((version, idx) => (
                             <div
                               key={version.id}
                               className="p-3 border-l-2"
                               style={{
-                                backgroundColor: idx === 0 ? '#f0fdf4' : colors.bg.primary,
-                                borderLeftColor: idx === 0 ? colors.status.success : colors.border,
-                                marginLeft: '12px',
-                                borderTop: idx > 0 ? `1px solid ${colors.border}` : 'none'
+                                backgroundColor:
+                                  idx === 0 ? "#f0fdf4" : colors.bg.primary,
+                                borderLeftColor:
+                                  idx === 0
+                                    ? colors.status.success
+                                    : colors.border,
+                                marginLeft: "12px",
+                                borderTop:
+                                  idx > 0
+                                    ? `1px solid ${colors.border}`
+                                    : "none",
                               }}
                             >
                               <div className="flex items-start gap-2 mb-2">
@@ -802,7 +883,7 @@ export default function ConfigDrawer({
                                   style={{
                                     backgroundColor: colors.bg.secondary,
                                     color: colors.text.primary,
-                                    border: `1px solid ${colors.border}`
+                                    border: `1px solid ${colors.border}`,
                                   }}
                                 >
                                   v{version.version}
@@ -811,17 +892,22 @@ export default function ConfigDrawer({
                                   <span
                                     className="px-2 py-0.5 rounded text-xs font-medium"
                                     style={{
-                                      backgroundColor: '#dcfce7',
-                                      color: '#15803d',
-                                      border: '1px solid #86efac'
+                                      backgroundColor: "#dcfce7",
+                                      color: "#15803d",
+                                      border: "1px solid #86efac",
                                     }}
                                   >
                                     Latest
                                   </span>
                                 )}
                               </div>
-                              <div className="text-xs mb-2" style={{ color: colors.text.secondary }}>
-                                {formatTimestamp(version.timestamp)} • {version.provider}/{version.modelName} • T:{version.temperature}
+                              <div
+                                className="text-xs mb-2"
+                                style={{ color: colors.text.secondary }}
+                              >
+                                {formatTimestamp(version.timestamp)} •{" "}
+                                {version.provider}/{version.modelName} • T:
+                                {version.temperature}
                               </div>
                               <div className="flex gap-2">
                                 <button
@@ -832,33 +918,45 @@ export default function ConfigDrawer({
                                   className="flex-1 px-3 py-1.5 rounded-md text-xs font-medium"
                                   style={{
                                     backgroundColor: colors.bg.primary,
-                                    borderWidth: '1px',
+                                    borderWidth: "1px",
                                     borderColor: colors.border,
                                     color: colors.text.primary,
-                                    transition: 'all 0.15s ease'
+                                    transition: "all 0.15s ease",
                                   }}
-                                  onMouseEnter={(e) => e.currentTarget.style.backgroundColor = colors.bg.secondary}
-                                  onMouseLeave={(e) => e.currentTarget.style.backgroundColor = colors.bg.primary}
+                                  onMouseEnter={(e) =>
+                                    (e.currentTarget.style.backgroundColor =
+                                      colors.bg.secondary)
+                                  }
+                                  onMouseLeave={(e) =>
+                                    (e.currentTarget.style.backgroundColor =
+                                      colors.bg.primary)
+                                  }
                                 >
                                   📥 Load
                                 </button>
                                 <button
                                   onClick={(e) => {
                                     e.stopPropagation();
-                                    setLeftConfigId('current');
+                                    setLeftConfigId("current");
                                     setRightConfigId(version.id);
-                                    setActiveTab('compare');
+                                    setActiveTab("compare");
                                   }}
                                   className="flex-1 px-3 py-1.5 rounded-md text-xs font-medium"
                                   style={{
                                     backgroundColor: colors.bg.primary,
-                                    borderWidth: '1px',
+                                    borderWidth: "1px",
                                     borderColor: colors.border,
                                     color: colors.text.primary,
-                                    transition: 'all 0.15s ease'
+                                    transition: "all 0.15s ease",
                                   }}
-                                  onMouseEnter={(e) => e.currentTarget.style.backgroundColor = colors.bg.secondary}
-                                  onMouseLeave={(e) => e.currentTarget.style.backgroundColor = colors.bg.primary}
+                                  onMouseEnter={(e) =>
+                                    (e.currentTarget.style.backgroundColor =
+                                      colors.bg.secondary)
+                                  }
+                                  onMouseLeave={(e) =>
+                                    (e.currentTarget.style.backgroundColor =
+                                      colors.bg.primary)
+                                  }
                                 >
                                   🔍 Diff
                                 </button>
@@ -875,16 +973,24 @@ export default function ConfigDrawer({
           )}
 
           {/* COMPARE TAB */}
-          {activeTab === 'compare' && (
+          {activeTab === "compare" && (
             <div className="space-y-4">
-              <div className="text-xs font-semibold mb-3" style={{ color: colors.text.secondary }}>
+              <div
+                className="text-xs font-semibold mb-3"
+                style={{ color: colors.text.secondary }}
+              >
                 🔄 Compare Configurations
               </div>
 
               {/* Comparison Selectors */}
               <div className="space-y-3">
                 <div>
-                  <label className="block text-xs mb-1" style={{ color: colors.text.secondary }}>Left:</label>
+                  <label
+                    className="block text-xs mb-1"
+                    style={{ color: colors.text.secondary }}
+                  >
+                    Left:
+                  </label>
                   <select
                     value={leftConfigId}
                     onChange={(e) => setLeftConfigId(e.target.value)}
@@ -892,11 +998,13 @@ export default function ConfigDrawer({
                     style={{
                       borderColor: colors.border,
                       backgroundColor: colors.bg.primary,
-                      color: colors.text.primary
+                      color: colors.text.primary,
                     }}
                   >
-                    {buildCompareOptions().map(opt => (
-                      <option key={opt.value} value={opt.value}>{opt.label}</option>
+                    {buildCompareOptions().map((opt) => (
+                      <option key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </option>
                     ))}
                   </select>
                 </div>
@@ -907,13 +1015,14 @@ export default function ConfigDrawer({
                     className="px-3 py-1.5 rounded-md text-xs font-medium"
                     style={{
                       backgroundColor: colors.bg.primary,
-                      borderWidth: '1px',
+                      borderWidth: "1px",
                       borderColor: colors.border,
                       color: colors.text.secondary,
-                      transition: 'all 0.15s ease'
+                      transition: "all 0.15s ease",
                     }}
                     onMouseEnter={(e) => {
-                      e.currentTarget.style.backgroundColor = colors.bg.secondary;
+                      e.currentTarget.style.backgroundColor =
+                        colors.bg.secondary;
                       e.currentTarget.style.color = colors.text.primary;
                     }}
                     onMouseLeave={(e) => {
@@ -926,7 +1035,12 @@ export default function ConfigDrawer({
                 </div>
 
                 <div>
-                  <label className="block text-xs mb-1" style={{ color: colors.text.secondary }}>Right:</label>
+                  <label
+                    className="block text-xs mb-1"
+                    style={{ color: colors.text.secondary }}
+                  >
+                    Right:
+                  </label>
                   <select
                     value={rightConfigId}
                     onChange={(e) => setRightConfigId(e.target.value)}
@@ -934,128 +1048,200 @@ export default function ConfigDrawer({
                     style={{
                       borderColor: colors.border,
                       backgroundColor: colors.bg.primary,
-                      color: colors.text.primary
+                      color: colors.text.primary,
                     }}
                   >
                     <option value="">Select config...</option>
-                    {buildCompareOptions().map(opt => (
-                      <option key={opt.value} value={opt.value}>{opt.label}</option>
+                    {buildCompareOptions().map((opt) => (
+                      <option key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </option>
                     ))}
                   </select>
                 </div>
               </div>
 
               {/* Diff View */}
-              {rightConfigId && (() => {
-                const leftContent = getContentForComparison(leftConfigId);
-                const rightContent = getContentForComparison(rightConfigId);
-                if (!leftContent || !rightContent) return null;
+              {rightConfigId &&
+                (() => {
+                  const leftContent = getContentForComparison(leftConfigId);
+                  const rightContent = getContentForComparison(rightConfigId);
+                  if (!leftContent || !rightContent) return null;
 
-                const { left, right } = generateDiff(leftContent.instructions, rightContent.instructions);
+                  const { left, right } = generateDiff(
+                    leftContent.instructions,
+                    rightContent.instructions,
+                  );
 
-                return (
-                  <div className="space-y-3">
-                    <div className="border rounded-lg overflow-hidden" style={{ borderColor: colors.border }}>
-                      <div className="grid grid-cols-2 border-b" style={{ borderColor: colors.border, backgroundColor: colors.bg.secondary }}>
-                        <div className="px-2 py-1.5 text-xs font-semibold" style={{ color: colors.text.primary }}>
-                          {leftContent.label}
-                        </div>
-                        <div className="px-2 py-1.5 text-xs font-semibold border-l" style={{ color: colors.text.primary, borderColor: colors.border }}>
-                          {rightContent.label}
-                        </div>
-                      </div>
-                      <div className="grid grid-cols-2 max-h-64 overflow-auto font-mono text-xs">
-                        <div style={{ backgroundColor: colors.bg.primary }}>
-                          {left.map((line, idx) => (
-                            <div
-                              key={idx}
-                              className="px-2 py-0.5"
-                              style={{
-                                backgroundColor: line.type === 'removed' ? '#fee2e2' : line.type === 'added' ? 'transparent' : colors.bg.primary,
-                                color: line.type === 'removed' ? colors.status.error : colors.text.primary,
-                                minHeight: '20px',
-                                fontSize: '11px'
-                              }}
-                            >
-                              {line.type === 'removed' && '- '}
-                              {line.content || '\u00A0'}
-                            </div>
-                          ))}
+                  return (
+                    <div className="space-y-3">
+                      <div
+                        className="border rounded-lg overflow-hidden"
+                        style={{ borderColor: colors.border }}
+                      >
+                        <div
+                          className="grid grid-cols-2 border-b"
+                          style={{
+                            borderColor: colors.border,
+                            backgroundColor: colors.bg.secondary,
+                          }}
+                        >
+                          <div
+                            className="px-2 py-1.5 text-xs font-semibold"
+                            style={{ color: colors.text.primary }}
+                          >
+                            {leftContent.label}
+                          </div>
+                          <div
+                            className="px-2 py-1.5 text-xs font-semibold border-l"
+                            style={{
+                              color: colors.text.primary,
+                              borderColor: colors.border,
+                            }}
+                          >
+                            {rightContent.label}
+                          </div>
                         </div>
-                        <div className="border-l" style={{ borderColor: colors.border, backgroundColor: colors.bg.primary }}>
-                          {right.map((line, idx) => (
-                            <div
-                              key={idx}
-                              className="px-2 py-0.5"
-                              style={{
-                                backgroundColor: line.type === 'added' ? '#dcfce7' : line.type === 'removed' ? 'transparent' : colors.bg.primary,
-                                color: line.type === 'added' ? '#15803d' : colors.text.primary,
-                                minHeight: '20px',
-                                fontSize: '11px'
-                              }}
-                            >
-                              {line.type === 'added' && '+ '}
-                              {line.content || '\u00A0'}
-                            </div>
-                          ))}
+                        <div className="grid grid-cols-2 max-h-64 overflow-auto font-mono text-xs">
+                          <div style={{ backgroundColor: colors.bg.primary }}>
+                            {left.map((line, idx) => (
+                              <div
+                                key={idx}
+                                className="px-2 py-0.5"
+                                style={{
+                                  backgroundColor:
+                                    line.type === "removed"
+                                      ? "#fee2e2"
+                                      : line.type === "added"
+                                        ? "transparent"
+                                        : colors.bg.primary,
+                                  color:
+                                    line.type === "removed"
+                                      ? colors.status.error
+                                      : colors.text.primary,
+                                  minHeight: "20px",
+                                  fontSize: "11px",
+                                }}
+                              >
+                                {line.type === "removed" && "- "}
+                                {line.content || "\u00A0"}
+                              </div>
+                            ))}
+                          </div>
+                          <div
+                            className="border-l"
+                            style={{
+                              borderColor: colors.border,
+                              backgroundColor: colors.bg.primary,
+                            }}
+                          >
+                            {right.map((line, idx) => (
+                              <div
+                                key={idx}
+                                className="px-2 py-0.5"
+                                style={{
+                                  backgroundColor:
+                                    line.type === "added"
+                                      ? "#dcfce7"
+                                      : line.type === "removed"
+                                        ? "transparent"
+                                        : colors.bg.primary,
+                                  color:
+                                    line.type === "added"
+                                      ? "#15803d"
+                                      : colors.text.primary,
+                                  minHeight: "20px",
+                                  fontSize: "11px",
+                                }}
+                              >
+                                {line.type === "added" && "+ "}
+                                {line.content || "\u00A0"}
+                              </div>
+                            ))}
+                          </div>
                         </div>
                       </div>
-                    </div>
 
-                    {/* Apply Buttons */}
-                    <div className="flex gap-2">
-                      <button
-                        onClick={() => {
-                          onApplyConfig(leftConfigId);
-                          onClose();
-                        }}
-                        disabled={leftConfigId === 'current'}
-                        className="flex-1 px-3 py-2 rounded-md text-xs font-medium"
-                        style={{
-                          backgroundColor: leftConfigId === 'current' ? colors.bg.secondary : colors.bg.primary,
-                          borderWidth: '1px',
-                          borderColor: colors.border,
-                          color: leftConfigId === 'current' ? colors.text.secondary : colors.text.primary,
-                          cursor: leftConfigId === 'current' ? 'not-allowed' : 'pointer',
-                          transition: 'all 0.15s ease'
-                        }}
-                        onMouseEnter={(e) => {
-                          if (leftConfigId !== 'current') e.currentTarget.style.backgroundColor = colors.bg.secondary;
-                        }}
-                        onMouseLeave={(e) => {
-                          if (leftConfigId !== 'current') e.currentTarget.style.backgroundColor = colors.bg.primary;
-                        }}
-                      >
-                        ← Use Left
-                      </button>
-                      <button
-                        onClick={() => {
-                          onApplyConfig(rightConfigId);
-                          onClose();
-                        }}
-                        disabled={rightConfigId === 'current'}
-                        className="flex-1 px-3 py-2 rounded-md text-xs font-medium"
-                        style={{
-                          backgroundColor: rightConfigId === 'current' ? colors.bg.secondary : colors.bg.primary,
-                          borderWidth: '1px',
-                          borderColor: colors.border,
-                          color: rightConfigId === 'current' ? colors.text.secondary : colors.text.primary,
-                          cursor: rightConfigId === 'current' ? 'not-allowed' : 'pointer',
-                          transition: 'all 0.15s ease'
-                        }}
-                        onMouseEnter={(e) => {
-                          if (rightConfigId !== 'current') e.currentTarget.style.backgroundColor = colors.bg.secondary;
-                        }}
-                        onMouseLeave={(e) => {
-                          if (rightConfigId !== 'current') e.currentTarget.style.backgroundColor = colors.bg.primary;
-                        }}
-                      >
-                        Use Right →
-                      </button>
+                      {/* Apply Buttons */}
+                      <div className="flex gap-2">
+                        <button
+                          onClick={() => {
+                            onApplyConfig(leftConfigId);
+                            onClose();
+                          }}
+                          disabled={leftConfigId === "current"}
+                          className="flex-1 px-3 py-2 rounded-md text-xs font-medium"
+                          style={{
+                            backgroundColor:
+                              leftConfigId === "current"
+                                ? colors.bg.secondary
+                                : colors.bg.primary,
+                            borderWidth: "1px",
+                            borderColor: colors.border,
+                            color:
+                              leftConfigId === "current"
+                                ? colors.text.secondary
+                                : colors.text.primary,
+                            cursor:
+                              leftConfigId === "current"
+                                ? "not-allowed"
+                                : "pointer",
+                            transition: "all 0.15s ease",
+                          }}
+                          onMouseEnter={(e) => {
+                            if (leftConfigId !== "current")
+                              e.currentTarget.style.backgroundColor =
+                                colors.bg.secondary;
+                          }}
+                          onMouseLeave={(e) => {
+                            if (leftConfigId !== "current")
+                              e.currentTarget.style.backgroundColor =
+                                colors.bg.primary;
+                          }}
+                        >
+                          ← Use Left
+                        </button>
+                        <button
+                          onClick={() => {
+                            onApplyConfig(rightConfigId);
+                            onClose();
+                          }}
+                          disabled={rightConfigId === "current"}
+                          className="flex-1 px-3 py-2 rounded-md text-xs font-medium"
+                          style={{
+                            backgroundColor:
+                              rightConfigId === "current"
+                                ? colors.bg.secondary
+                                : colors.bg.primary,
+                            borderWidth: "1px",
+                            borderColor: colors.border,
+                            color:
+                              rightConfigId === "current"
+                                ? colors.text.secondary
+                                : colors.text.primary,
+                            cursor:
+                              rightConfigId === "current"
+                                ? "not-allowed"
+                                : "pointer",
+                            transition: "all 0.15s ease",
+                          }}
+                          onMouseEnter={(e) => {
+                            if (rightConfigId !== "current")
+                              e.currentTarget.style.backgroundColor =
+                                colors.bg.secondary;
+                          }}
+                          onMouseLeave={(e) => {
+                            if (rightConfigId !== "current")
+                              e.currentTarget.style.backgroundColor =
+                                colors.bg.primary;
+                          }}
+                        >
+                          Use Right →
+                        </button>
+                      </div>
                     </div>
-                  </div>
-                );
-              })()}
+                  );
+                })()}
             </div>
           )}
         </div>
diff --git a/app/components/DetailedResultsTable.tsx b/app/components/DetailedResultsTable.tsx
index 19ff7d3..b9729f4 100644
--- a/app/components/DetailedResultsTable.tsx
+++ b/app/components/DetailedResultsTable.tsx
@@ -5,27 +5,36 @@
  * Supports both row format (individual traces) and grouped format (multiple answers per question)
  */
 
-import React, { useState, useEffect } from 'react';
-import { TraceScore, getScoreObject, normalizeToIndividualScores, hasSummaryScores, isNewScoreObjectV2, isGroupedFormat, GroupedTraceItem, EvalJob } from '@/app/components/types';
+import React, { useState, useEffect } from "react";
+import {
+  TraceScore,
+  getScoreObject,
+  normalizeToIndividualScores,
+  hasSummaryScores,
+  isNewScoreObjectV2,
+  isGroupedFormat,
+  GroupedTraceItem,
+  EvalJob,
+} from "@/app/components/types";
 
 // Helper function to format score value with color
 const formatScoreValue = (score: TraceScore | undefined) => {
-  if (!score) return { value: 'N/A', color: '#737373', bg: 'transparent' };
+  if (!score) return { value: "N/A", color: "#737373", bg: "transparent" };
 
-  if (score.data_type === 'CATEGORICAL') {
+  if (score.data_type === "CATEGORICAL") {
     const catValue = String(score.value);
-    let color = '#171717';
-    let bg = '#fafafa';
-
-    if (catValue === 'CORRECT') {
-      color = '#15803d';
-      bg = '#dcfce7';
-    } else if (catValue === 'PARTIAL') {
-      color = '#92400e';
-      bg = '#fef3c7';
-    } else if (catValue === 'INCORRECT') {
-      color = '#dc2626';
-      bg = '#fee2e2';
+    let color = "#171717";
+    let bg = "#fafafa";
+
+    if (catValue === "CORRECT") {
+      color = "#15803d";
+      bg = "#dcfce7";
+    } else if (catValue === "PARTIAL") {
+      color = "#92400e";
+      bg = "#fef3c7";
+    } else if (catValue === "INCORRECT") {
+      color = "#dc2626";
+      bg = "#fee2e2";
     }
 
     return { value: catValue, color, bg };
@@ -34,19 +43,19 @@ const formatScoreValue = (score: TraceScore | undefined) => {
   // NUMERIC
   const numValue = Number(score.value);
   const formattedValue = numValue.toFixed(2);
-  let color = '#171717';
-  let bg = 'transparent';
+  let color = "#171717";
+  let bg = "transparent";
 
   // Color based on value
   if (numValue >= 0.7) {
-    color = '#15803d';
-    bg = '#dcfce7';
+    color = "#15803d";
+    bg = "#dcfce7";
   } else if (numValue >= 0.5) {
-    color = '#92400e';
-    bg = '#fef3c7';
+    color = "#92400e";
+    bg = "#fef3c7";
   } else {
-    color = '#dc2626';
-    bg = '#fee2e2';
+    color = "#dc2626";
+    bg = "#fee2e2";
   }
 
   return { value: formattedValue, color, bg };
@@ -56,16 +65,18 @@ interface DetailedResultsTableProps {
   job: EvalJob;
 }
 
-export default function DetailedResultsTable({ job }: DetailedResultsTableProps) {
+export default function DetailedResultsTable({
+  job,
+}: DetailedResultsTableProps) {
   const [openCommentId, setOpenCommentId] = useState<string | null>(null);
   const [commentPos, setCommentPos] = useState({ top: 0, left: 0 });
 
   useEffect(() => {
     if (!openCommentId) return;
     const handleScroll = () => setOpenCommentId(null);
-    window.addEventListener('scroll', handleScroll, true);
+    window.addEventListener("scroll", handleScroll, true);
     return () => {
-      window.removeEventListener('scroll', handleScroll, true);
+      window.removeEventListener("scroll", handleScroll, true);
     };
   }, [openCommentId]);
 
@@ -74,8 +85,11 @@ export default function DetailedResultsTable({ job }: DetailedResultsTableProps)
   // 1. First check: Does it have summary_scores at all?
   if (!scoreObject || !hasSummaryScores(scoreObject)) {
     return (
-      <div className="border rounded-lg p-6 text-center" style={{ backgroundColor: '#fef3c7', borderColor: '#fbbf24' }}>
-        <p className="text-sm" style={{ color: '#92400e' }}>
+      <div
+        className="border rounded-lg p-6 text-center"
+        style={{ backgroundColor: "#fef3c7", borderColor: "#fbbf24" }}
+      >
+        <p className="text-sm" style={{ color: "#92400e" }}>
           No detailed results available or using legacy format
         </p>
       </div>
@@ -86,7 +100,11 @@ export default function DetailedResultsTable({ job }: DetailedResultsTableProps)
   if (isNewScoreObjectV2(scoreObject)) {
     // Check if grouped format
     if (isGroupedFormat(scoreObject.traces)) {
-      return <GroupedResultsTable traces={scoreObject.traces as GroupedTraceItem[]} />;
+      return (
+        <GroupedResultsTable
+          traces={scoreObject.traces as GroupedTraceItem[]}
+        />
+      );
     }
     // Otherwise show row format
   }
@@ -98,44 +116,78 @@ export default function DetailedResultsTable({ job }: DetailedResultsTableProps)
   // 4. If no individual scores available (e.g., BasicScoreObject with only summary_scores)
   if (!individual_scores || individual_scores.length === 0) {
     return (
-      <div className="border rounded-lg p-6 text-center" style={{ backgroundColor: '#fef3c7', borderColor: '#fbbf24' }}>
-        <p className="text-sm" style={{ color: '#92400e' }}>
-          No individual scores available. Only summary metrics are available for this evaluation.
+      <div
+        className="border rounded-lg p-6 text-center"
+        style={{ backgroundColor: "#fef3c7", borderColor: "#fbbf24" }}
+      >
+        <p className="text-sm" style={{ color: "#92400e" }}>
+          No individual scores available. Only summary metrics are available for
+          this evaluation.
         </p>
       </div>
     );
   }
 
   // Get all unique score names from the first item
-  const scoreNames = individual_scores[0]?.trace_scores?.map(s => s.name) || [];
+  const scoreNames =
+    individual_scores[0]?.trace_scores?.map((s) => s.name) || [];
 
   // Helper function to get score value by name
-  const getScoreByName = (scores: TraceScore[], name: string): TraceScore | undefined => {
+  const getScoreByName = (
+    scores: TraceScore[],
+    name: string,
+  ): TraceScore | undefined => {
     if (!scores || !Array.isArray(scores)) return undefined;
-    return scores.find(s => s?.name === name);
+    return scores.find((s) => s?.name === name);
   };
 
   return (
-    <div className="border rounded-lg overflow-hidden" style={{ backgroundColor: '#ffffff', borderColor: '#e5e5e5' }}>
+    <div
+      className="border rounded-lg overflow-hidden"
+      style={{ backgroundColor: "#ffffff", borderColor: "#e5e5e5" }}
+    >
       {/* Table Container */}
       <div className="overflow-x-auto">
-        <table className="w-full border-collapse" style={{ minWidth: '800px' }}>
+        <table className="w-full border-collapse" style={{ minWidth: "800px" }}>
           {/* Table Header */}
           <thead>
-            <tr style={{ backgroundColor: '#fafafa', borderBottom: '1px solid #e5e5e5' }}>
-              <th className="px-4 py-3 text-left text-xs font-semibold uppercase" style={{ color: '#171717', width: '5%' }}>
-              </th>
-              <th className="px-4 py-3 text-left text-xs font-semibold uppercase" style={{ color: '#171717', width: '25%' }}>
+            <tr
+              style={{
+                backgroundColor: "#fafafa",
+                borderBottom: "1px solid #e5e5e5",
+              }}
+            >
+              <th
+                className="px-4 py-3 text-left text-xs font-semibold uppercase"
+                style={{ color: "#171717", width: "5%" }}
+              ></th>
+              <th
+                className="px-4 py-3 text-left text-xs font-semibold uppercase"
+                style={{ color: "#171717", width: "25%" }}
+              >
                 Question
               </th>
-              <th className="px-4 py-3 text-left text-xs font-semibold uppercase" style={{ color: '#171717', width: '25%' }}>
+              <th
+                className="px-4 py-3 text-left text-xs font-semibold uppercase"
+                style={{ color: "#171717", width: "25%" }}
+              >
                 Ground Truth
               </th>
-              <th className="px-4 py-3 text-left text-xs font-semibold uppercase" style={{ color: '#171717', width: '25%' }}>
+              <th
+                className="px-4 py-3 text-left text-xs font-semibold uppercase"
+                style={{ color: "#171717", width: "25%" }}
+              >
                 Answer
               </th>
               {scoreNames.map((scoreName) => (
-                <th key={scoreName} className="px-4 py-3 text-center text-xs font-semibold uppercase" style={{ color: '#171717', width: `${20 / scoreNames.length}%` }}>
+                <th
+                  key={scoreName}
+                  className="px-4 py-3 text-center text-xs font-semibold uppercase"
+                  style={{
+                    color: "#171717",
+                    width: `${20 / scoreNames.length}%`,
+                  }}
+                >
                   {scoreName}
                 </th>
               ))}
@@ -145,36 +197,45 @@ export default function DetailedResultsTable({ job }: DetailedResultsTableProps)
           {/* Table Body */}
           <tbody>
             {individual_scores.map((item, index) => {
-              const question = item.input?.question || 'N/A';
-              const answer = item.output?.answer || 'N/A';
-              const groundTruth = item.metadata?.ground_truth || 'N/A';
+              const question = item.input?.question || "N/A";
+              const answer = item.output?.answer || "N/A";
+              const groundTruth = item.metadata?.ground_truth || "N/A";
 
               return (
                 <tr
                   key={item.trace_id || index}
                   className="border-b"
-                  style={{ borderColor: '#e5e5e5', transition: 'background-color 0.15s ease' }}
+                  style={{
+                    borderColor: "#e5e5e5",
+                    transition: "background-color 0.15s ease",
+                  }}
                   onMouseEnter={(e) => {
                     const row = e.currentTarget;
-                    row.style.backgroundColor = '#fafafa';
+                    row.style.backgroundColor = "#fafafa";
                   }}
                   onMouseLeave={(e) => {
                     const row = e.currentTarget;
-                    row.style.backgroundColor = '#ffffff';
+                    row.style.backgroundColor = "#ffffff";
                   }}
                 >
-                  <td className="px-4 py-3 text-sm font-medium align-top" style={{ color: '#737373' }}>
+                  <td
+                    className="px-4 py-3 text-sm font-medium align-top"
+                    style={{ color: "#737373" }}
+                  >
                     {index + 1}
                   </td>
 
                   {/* Question */}
-                  <td className="px-4 py-3 align-top" style={{ backgroundColor: '#fafafa' }}>
+                  <td
+                    className="px-4 py-3 align-top"
+                    style={{ backgroundColor: "#fafafa" }}
+                  >
                     <div
                       className="text-sm overflow-auto"
                       style={{
-                        color: '#171717',
-                        lineHeight: '1.5',
-                        maxHeight: '150px'
+                        color: "#171717",
+                        lineHeight: "1.5",
+                        maxHeight: "150px",
                       }}
                     >
                       {question}
@@ -182,13 +243,16 @@ export default function DetailedResultsTable({ job }: DetailedResultsTableProps)
                   </td>
 
                   {/* Ground Truth */}
-                  <td className="px-4 py-3 align-top" style={{ backgroundColor: '#fafafa' }}>
+                  <td
+                    className="px-4 py-3 align-top"
+                    style={{ backgroundColor: "#fafafa" }}
+                  >
                     <div
                       className="text-sm overflow-auto"
                       style={{
-                        color: '#171717',
-                        lineHeight: '1.5',
-                        maxHeight: '150px'
+                        color: "#171717",
+                        lineHeight: "1.5",
+                        maxHeight: "150px",
                       }}
                     >
                       {groundTruth}
@@ -200,9 +264,9 @@ export default function DetailedResultsTable({ job }: DetailedResultsTableProps)
                     <div
                       className="text-sm overflow-auto"
                       style={{
-                        color: '#171717',
-                        lineHeight: '1.5',
-                        maxHeight: '150px'
+                        color: "#171717",
+                        lineHeight: "1.5",
+                        maxHeight: "150px",
                       }}
                     >
                       {answer}
@@ -215,15 +279,18 @@ export default function DetailedResultsTable({ job }: DetailedResultsTableProps)
                     const { value, color, bg } = formatScoreValue(score);
 
                     return (
-                      <td key={scoreName} className="px-4 py-3 text-center align-top">
+                      <td
+                        key={scoreName}
+                        className="px-4 py-3 text-center align-top"
+                      >
                         <div className="flex items-center justify-center gap-2">
                           <div
                             className="inline-block px-2 py-1 rounded text-xs font-medium"
                             style={{
                               color,
                               backgroundColor: bg,
-                              borderWidth: bg === 'transparent' ? '1px' : '0',
-                              borderColor: '#e5e5e5'
+                              borderWidth: bg === "transparent" ? "1px" : "0",
+                              borderColor: "#e5e5e5",
                             }}
                           >
                             {value}
@@ -233,15 +300,28 @@ export default function DetailedResultsTable({ job }: DetailedResultsTableProps)
                               <div
                                 className="inline-flex items-center justify-center w-4 h-4 rounded-full text-xs font-normal"
                                 style={{
-                                  backgroundColor: openCommentId === `${index}-${scoreName}` ? '#171717' : '#fafafa',
-                                  color: openCommentId === `${index}-${scoreName}` ? '#ffffff' : '#737373',
+                                  backgroundColor:
+                                    openCommentId === `${index}-${scoreName}`
+                                      ? "#171717"
+                                      : "#fafafa",
+                                  color:
+                                    openCommentId === `${index}-${scoreName}`
+                                      ? "#ffffff"
+                                      : "#737373",
                                 }}
                                 onMouseEnter={(e) => {
-                                  const rect = e.currentTarget.getBoundingClientRect();
+                                  const rect =
+                                    e.currentTarget.getBoundingClientRect();
                                   const tooltipWidth = 300;
                                   const centerX = rect.left + rect.width / 2;
-                                  const clampedLeft = Math.min(Math.max(centerX - tooltipWidth / 2, 8), window.innerWidth - tooltipWidth - 8);
-                                  setCommentPos({ top: rect.top - 8, left: clampedLeft });
+                                  const clampedLeft = Math.min(
+                                    Math.max(centerX - tooltipWidth / 2, 8),
+                                    window.innerWidth - tooltipWidth - 8,
+                                  );
+                                  setCommentPos({
+                                    top: rect.top - 8,
+                                    left: clampedLeft,
+                                  });
                                   setOpenCommentId(`${index}-${scoreName}`);
                                 }}
                                 onMouseLeave={() => setOpenCommentId(null)}
@@ -252,13 +332,13 @@ export default function DetailedResultsTable({ job }: DetailedResultsTableProps)
                                 <div
                                   className="fixed z-50 px-3 py-2 rounded-md text-xs whitespace-normal pointer-events-none"
                                   style={{
-                                    backgroundColor: '#171717',
-                                    color: '#ffffff',
-                                    width: '300px',
-                                    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+                                    backgroundColor: "#171717",
+                                    color: "#ffffff",
+                                    width: "300px",
+                                    boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
                                     top: commentPos.top,
                                     left: commentPos.left,
-                                    transform: 'translateY(-100%)',
+                                    transform: "translateY(-100%)",
                                   }}
                                 >
                                   {score.comment}
@@ -287,16 +367,19 @@ function GroupedResultsTable({ traces }: { traces: GroupedTraceItem[] }) {
   useEffect(() => {
     if (!openCommentId) return;
     const handleScroll = () => setOpenCommentId(null);
-    window.addEventListener('scroll', handleScroll, true);
+    window.addEventListener("scroll", handleScroll, true);
     return () => {
-      window.removeEventListener('scroll', handleScroll, true);
+      window.removeEventListener("scroll", handleScroll, true);
     };
   }, [openCommentId]);
 
   if (!traces || traces.length === 0) {
     return (
-      <div className="border rounded-lg p-6 text-center" style={{ backgroundColor: '#fef3c7', borderColor: '#fbbf24' }}>
-        <p className="text-sm" style={{ color: '#92400e' }}>
+      <div
+        className="border rounded-lg p-6 text-center"
+        style={{ backgroundColor: "#fef3c7", borderColor: "#fbbf24" }}
+      >
+        <p className="text-sm" style={{ color: "#92400e" }}>
           No grouped results available
         </p>
       </div>
@@ -304,7 +387,7 @@ function GroupedResultsTable({ traces }: { traces: GroupedTraceItem[] }) {
   }
 
   // Get max answers count
-  const maxAnswers = Math.max(...traces.map(t => t.llm_answers.length));
+  const maxAnswers = Math.max(...traces.map((t) => t.llm_answers.length));
 
   // Fixed column widths (in pixels) for predictable layout
   const COLUMN_WIDTHS = {
@@ -316,32 +399,56 @@ function GroupedResultsTable({ traces }: { traces: GroupedTraceItem[] }) {
 
   // Calculate minimum table width based on number of answers
   // This ensures horizontal scroll activates at the right point
-  const fixedColumnsWidth = COLUMN_WIDTHS.qId + COLUMN_WIDTHS.question + COLUMN_WIDTHS.groundTruth;
-  const tableMinWidth = fixedColumnsWidth + (maxAnswers * COLUMN_WIDTHS.answer);
+  const fixedColumnsWidth =
+    COLUMN_WIDTHS.qId + COLUMN_WIDTHS.question + COLUMN_WIDTHS.groundTruth;
+  const tableMinWidth = fixedColumnsWidth + maxAnswers * COLUMN_WIDTHS.answer;
 
   return (
-    <div className="border rounded-lg overflow-hidden" style={{ backgroundColor: '#ffffff', borderColor: '#e5e5e5' }}>
+    <div
+      className="border rounded-lg overflow-hidden"
+      style={{ backgroundColor: "#ffffff", borderColor: "#e5e5e5" }}
+    >
       {/* Table Container - overflow-x-auto enables horizontal scroll when table exceeds viewport */}
       <div className="overflow-x-auto">
-        <table className="w-full border-collapse" style={{ minWidth: `${tableMinWidth}px` }}>
+        <table
+          className="w-full border-collapse"
+          style={{ minWidth: `${tableMinWidth}px` }}
+        >
           {/* Table Header - matching row format styling */}
           <thead>
-            <tr style={{ backgroundColor: '#fafafa', borderBottom: '1px solid #e5e5e5' }}>
+            <tr
+              style={{
+                backgroundColor: "#fafafa",
+                borderBottom: "1px solid #e5e5e5",
+              }}
+            >
               <th
                 className="px-4 py-3 text-left text-xs font-semibold uppercase"
-                style={{ color: '#171717', width: `${COLUMN_WIDTHS.qId}px`, minWidth: `${COLUMN_WIDTHS.qId}px` }}
+                style={{
+                  color: "#171717",
+                  width: `${COLUMN_WIDTHS.qId}px`,
+                  minWidth: `${COLUMN_WIDTHS.qId}px`,
+                }}
               >
                 Q.ID
               </th>
               <th
                 className="px-4 py-3 text-left text-xs font-semibold uppercase"
-                style={{ color: '#171717', width: `${COLUMN_WIDTHS.question}px`, minWidth: `${COLUMN_WIDTHS.question}px` }}
+                style={{
+                  color: "#171717",
+                  width: `${COLUMN_WIDTHS.question}px`,
+                  minWidth: `${COLUMN_WIDTHS.question}px`,
+                }}
               >
                 Question
               </th>
               <th
                 className="px-4 py-3 text-left text-xs font-semibold uppercase"
-                style={{ color: '#171717', width: `${COLUMN_WIDTHS.groundTruth}px`, minWidth: `${COLUMN_WIDTHS.groundTruth}px` }}
+                style={{
+                  color: "#171717",
+                  width: `${COLUMN_WIDTHS.groundTruth}px`,
+                  minWidth: `${COLUMN_WIDTHS.groundTruth}px`,
+                }}
               >
                 Ground Truth
               </th>
@@ -349,7 +456,11 @@ function GroupedResultsTable({ traces }: { traces: GroupedTraceItem[] }) {
                 <th
                   key={`answer-${i}`}
                   className="px-4 py-3 text-left text-xs font-semibold uppercase"
-                  style={{ color: '#171717', width: `${COLUMN_WIDTHS.answer}px`, minWidth: `${COLUMN_WIDTHS.answer}px` }}
+                  style={{
+                    color: "#171717",
+                    width: `${COLUMN_WIDTHS.answer}px`,
+                    minWidth: `${COLUMN_WIDTHS.answer}px`,
+                  }}
                 >
                   Answer {i + 1}
                 </th>
@@ -364,10 +475,13 @@ function GroupedResultsTable({ traces }: { traces: GroupedTraceItem[] }) {
                 {/* Text row */}
                 <tr
                   key={`${group.question_id || index}-text`}
-                  style={{ backgroundColor: '#ffffff' }}
+                  style={{ backgroundColor: "#ffffff" }}
                 >
                   {/* Question ID */}
-                  <td className="px-4 pt-3 pb-1 text-sm font-medium align-top" style={{ color: '#737373' }}>
+                  <td
+                    className="px-4 pt-3 pb-1 text-sm font-medium align-top"
+                    style={{ color: "#737373" }}
+                  >
                     {group.question_id}
                   </td>
 
@@ -375,7 +489,11 @@ function GroupedResultsTable({ traces }: { traces: GroupedTraceItem[] }) {
                   <td className="px-4 pt-3 pb-1 align-top bg-[#fafafa]">
                     <div
                       className="text-sm overflow-auto"
-                      style={{ color: '#171717', lineHeight: '1.5', maxHeight: '150px' }}
+                      style={{
+                        color: "#171717",
+                        lineHeight: "1.5",
+                        maxHeight: "150px",
+                      }}
                     >
                       {group.question}
                     </div>
@@ -385,7 +503,11 @@ function GroupedResultsTable({ traces }: { traces: GroupedTraceItem[] }) {
                   <td className="px-4 pt-3 pb-1 align-top bg-[#fafafa]">
                     <div
                       className="text-sm overflow-auto"
-                      style={{ color: '#171717', lineHeight: '1.5', maxHeight: '150px' }}
+                      style={{
+                        color: "#171717",
+                        lineHeight: "1.5",
+                        maxHeight: "150px",
+                      }}
                     >
                       {group.ground_truth_answer}
                     </div>
@@ -395,7 +517,10 @@ function GroupedResultsTable({ traces }: { traces: GroupedTraceItem[] }) {
                   {Array.from({ length: maxAnswers }, (_, answerIndex) => {
                     const answer = group.llm_answers[answerIndex];
                     return (
-                      <td key={answerIndex} className="px-4 pt-3 pb-1 align-top">
+                      <td
+                        key={answerIndex}
+                        className="px-4 pt-3 pb-1 align-top"
+                      >
                         {answer ? (
                           <div className="text-sm overflow-auto text-[#171717] leading-6 max-h-[150px]">
                             {answer}
@@ -414,81 +539,128 @@ function GroupedResultsTable({ traces }: { traces: GroupedTraceItem[] }) {
                 >
                   {/* Empty cells for Q.ID, Question, Ground Truth */}
                   <td className="px-4 pt-1 pb-3" />
-                  <td className="px-4 pt-1 pb-3" style={{ backgroundColor: '#fafafa' }} />
-                  <td className="px-4 pt-1 pb-3" style={{ backgroundColor: '#fafafa' }} />
+                  <td
+                    className="px-4 pt-1 pb-3"
+                    style={{ backgroundColor: "#fafafa" }}
+                  />
+                  <td
+                    className="px-4 pt-1 pb-3"
+                    style={{ backgroundColor: "#fafafa" }}
+                  />
 
                   {/* Score cells */}
                   {Array.from({ length: maxAnswers }, (_, answerIndex) => {
-                    const answerScores: TraceScore[] = group.scores?.[answerIndex] || [];
+                    const answerScores: TraceScore[] =
+                      group.scores?.[answerIndex] || [];
                     const answer = group.llm_answers[answerIndex];
 
                     return (
-                      <td key={answerIndex} className="px-4 pt-1 pb-3 align-bottom">
+                      <td
+                        key={answerIndex}
+                        className="px-4 pt-1 pb-3 align-bottom"
+                      >
                         {answer && answerScores.length > 0 ? (
                           <div className="space-y-1">
-                            {answerScores.map((score: TraceScore, scoreIdx: number) => {
-                              if (!score) return null;
-                              const { value, color, bg } = formatScoreValue(score);
-                              return (
-                                <div key={score.name || scoreIdx} className="flex items-center justify-between gap-1">
-                                  <span className="text-xs truncate min-w-0" style={{ color: '#737373' }}>{score.name}:</span>
-                                  <div className="flex items-center gap-1 flex-shrink-0">
-                                    <div
-                                      className="inline-block px-2 py-0.5 rounded text-xs font-medium"
-                                      style={{
-                                        color,
-                                        backgroundColor: bg,
-                                        borderWidth: bg === 'transparent' ? '1px' : '0',
-                                        borderColor: '#e5e5e5'
-                                      }}
+                            {answerScores.map(
+                              (score: TraceScore, scoreIdx: number) => {
+                                if (!score) return null;
+                                const { value, color, bg } =
+                                  formatScoreValue(score);
+                                return (
+                                  <div
+                                    key={score.name || scoreIdx}
+                                    className="flex items-center justify-between gap-1"
+                                  >
+                                    <span
+                                      className="text-xs truncate min-w-0"
+                                      style={{ color: "#737373" }}
                                     >
-                                      {value}
+                                      {score.name}:
+                                    </span>
+                                    <div className="flex items-center gap-1 flex-shrink-0">
+                                      <div
+                                        className="inline-block px-2 py-0.5 rounded text-xs font-medium"
+                                        style={{
+                                          color,
+                                          backgroundColor: bg,
+                                          borderWidth:
+                                            bg === "transparent" ? "1px" : "0",
+                                          borderColor: "#e5e5e5",
+                                        }}
+                                      >
+                                        {value}
+                                      </div>
+                                      {score?.comment &&
+                                        (() => {
+                                          const commentId = `g${index}-a${answerIndex}-s${scoreIdx}`;
+                                          return (
+                                            <>
+                                              <div
+                                                className="inline-flex items-center justify-center w-4 h-4 rounded-full text-xs font-normal"
+                                                style={{
+                                                  backgroundColor:
+                                                    openCommentId === commentId
+                                                      ? "#171717"
+                                                      : "#fafafa",
+                                                  color:
+                                                    openCommentId === commentId
+                                                      ? "#ffffff"
+                                                      : "#737373",
+                                                }}
+                                                onMouseEnter={(e) => {
+                                                  const rect =
+                                                    e.currentTarget.getBoundingClientRect();
+                                                  const tooltipWidth = 300;
+                                                  const centerX =
+                                                    rect.left + rect.width / 2;
+                                                  const clampedLeft = Math.min(
+                                                    Math.max(
+                                                      centerX -
+                                                        tooltipWidth / 2,
+                                                      8,
+                                                    ),
+                                                    window.innerWidth -
+                                                      tooltipWidth -
+                                                      8,
+                                                  );
+                                                  setCommentPos({
+                                                    top: rect.top - 8,
+                                                    left: clampedLeft,
+                                                  });
+                                                  setOpenCommentId(commentId);
+                                                }}
+                                                onMouseLeave={() =>
+                                                  setOpenCommentId(null)
+                                                }
+                                              >
+                                                i
+                                              </div>
+                                              {openCommentId === commentId && (
+                                                <div
+                                                  className="fixed z-50 px-3 py-2 rounded-md text-xs whitespace-normal pointer-events-none"
+                                                  style={{
+                                                    backgroundColor: "#171717",
+                                                    color: "#ffffff",
+                                                    width: "300px",
+                                                    boxShadow:
+                                                      "0 4px 6px rgba(0, 0, 0, 0.1)",
+                                                    top: commentPos.top,
+                                                    left: commentPos.left,
+                                                    transform:
+                                                      "translateY(-100%)",
+                                                  }}
+                                                >
+                                                  {score.comment}
+                                                </div>
+                                              )}
+                                            </>
+                                          );
+                                        })()}
                                     </div>
-                                    {score?.comment && (() => {
-                                      const commentId = `g${index}-a${answerIndex}-s${scoreIdx}`;
-                                      return (
-                                        <>
-                                          <div
-                                            className="inline-flex items-center justify-center w-4 h-4 rounded-full text-xs font-normal"
-                                            style={{
-                                              backgroundColor: openCommentId === commentId ? '#171717' : '#fafafa',
-                                              color: openCommentId === commentId ? '#ffffff' : '#737373',
-                                            }}
-                                            onMouseEnter={(e) => {
-                                              const rect = e.currentTarget.getBoundingClientRect();
-                                              const tooltipWidth = 300;
-                                              const centerX = rect.left + rect.width / 2;
-                                              const clampedLeft = Math.min(Math.max(centerX - tooltipWidth / 2, 8), window.innerWidth - tooltipWidth - 8);
-                                              setCommentPos({ top: rect.top - 8, left: clampedLeft });
-                                              setOpenCommentId(commentId);
-                                            }}
-                                            onMouseLeave={() => setOpenCommentId(null)}
-                                          >
-                                            i
-                                          </div>
-                                          {openCommentId === commentId && (
-                                            <div
-                                              className="fixed z-50 px-3 py-2 rounded-md text-xs whitespace-normal pointer-events-none"
-                                              style={{
-                                                backgroundColor: '#171717',
-                                                color: '#ffffff',
-                                                width: '300px',
-                                                boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
-                                                top: commentPos.top,
-                                                left: commentPos.left,
-                                                transform: 'translateY(-100%)',
-                                              }}
-                                            >
-                                              {score.comment}
-                                            </div>
-                                          )}
-                                        </>
-                                      );
-                                    })()}
                                   </div>
-                                </div>
-                              );
-                            })}
+                                );
+                              },
+                            )}
                           </div>
                         ) : null}
                       </td>
diff --git a/app/components/ErrorModal.tsx b/app/components/ErrorModal.tsx
index 1100ada..8d71be7 100644
--- a/app/components/ErrorModal.tsx
+++ b/app/components/ErrorModal.tsx
@@ -1,6 +1,6 @@
-'use client';
+"use client";
 
-import React from 'react';
+import React from "react";
 
 interface ErrorModalProps {
   isOpen: boolean;
@@ -9,7 +9,12 @@ interface ErrorModalProps {
   message: string;
 }
 
-export default function ErrorModal({ isOpen, onClose, title = 'Error', message }: ErrorModalProps) {
+export default function ErrorModal({
+  isOpen,
+  onClose,
+  title = "Error",
+  message,
+}: ErrorModalProps) {
   if (!isOpen) return null;
 
   return (
@@ -26,8 +31,18 @@ export default function ErrorModal({ isOpen, onClose, title = 'Error', message }
         <div className="flex items-start justify-between p-6 border-b border-gray-200">
           <div className="flex items-center gap-3">
             <div className="flex-shrink-0 w-10 h-10 rounded-full bg-red-100 flex items-center justify-center">
-              <svg className="w-6 h-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              <svg
+                className="w-6 h-6 text-red-600"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                />
               </svg>
             </div>
             <h3 className="text-lg font-semibold text-gray-900">{title}</h3>
@@ -36,8 +51,18 @@ export default function ErrorModal({ isOpen, onClose, title = 'Error', message }
             onClick={onClose}
             className="text-gray-400 hover:text-gray-600 transition-colors"
           >
-            <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            <svg
+              className="w-6 h-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
             </svg>
           </button>
         </div>
diff --git a/app/components/Loader.tsx b/app/components/Loader.tsx
index ebf0f9a..529dcfe 100644
--- a/app/components/Loader.tsx
+++ b/app/components/Loader.tsx
@@ -3,15 +3,19 @@
  * Matches the design system with smooth animations
  */
 
-import React from 'react';
+import React from "react";
 
 interface LoaderProps {
-  size?: 'sm' | 'md' | 'lg';
+  size?: "sm" | "md" | "lg";
   message?: string;
   fullScreen?: boolean;
 }
 
-export default function Loader({ size = 'md', message, fullScreen = false }: LoaderProps) {
+export default function Loader({
+  size = "md",
+  message,
+  fullScreen = false,
+}: LoaderProps) {
   const sizeMap = {
     sm: 20,
     md: 32,
@@ -27,19 +31,15 @@ export default function Loader({ size = 'md', message, fullScreen = false }: Loa
         style={{
           width: `${spinnerSize}px`,
           height: `${spinnerSize}px`,
-          border: '3px solid #e5e5e5',
-          borderTopColor: '#171717',
-          borderRadius: '50%',
-          animation: 'spin 0.8s linear infinite',
+          border: "3px solid #e5e5e5",
+          borderTopColor: "#171717",
+          borderRadius: "50%",
+          animation: "spin 0.8s linear infinite",
         }}
       />
       {/* Message */}
       {message && (
-        <p
-          className="text-sm font-medium text-[#737373]"
-        >
-          {message}
-        </p>
+        <p className="text-sm font-medium text-[#737373]">{message}</p>
       )}
       {/* CSS Animation */}
       <style jsx>{`
@@ -54,9 +54,7 @@ export default function Loader({ size = 'md', message, fullScreen = false }: Loa
 
   if (fullScreen) {
     return (
-      <div
-        className="w-full h-screen flex items-center justify-center bg-[#fafafa]"
-      >
+      <div className="w-full h-screen flex items-center justify-center bg-[#fafafa]">
         {loaderContent}
       </div>
     );
@@ -68,11 +66,15 @@ export default function Loader({ size = 'md', message, fullScreen = false }: Loa
 /**
  * LoaderBox - Loader inside a bordered container
  */
-export function LoaderBox({ message, size = 'md' }: { message?: string; size?: 'sm' | 'md' | 'lg' }) {
+export function LoaderBox({
+  message,
+  size = "md",
+}: {
+  message?: string;
+  size?: "sm" | "md" | "lg";
+}) {
   return (
-    <div
-      className="border rounded-lg p-8 text-center bg-[#ffffff] border-[#e5e5e5]"
-    >
+    <div className="border rounded-lg p-8 text-center bg-[#ffffff] border-[#e5e5e5]">
       <Loader size={size} message={message} />
     </div>
   );
diff --git a/app/components/ScoreDisplay.tsx b/app/components/ScoreDisplay.tsx
index 756d6f8..2f8b1db 100644
--- a/app/components/ScoreDisplay.tsx
+++ b/app/components/ScoreDisplay.tsx
@@ -3,28 +3,27 @@
  * Displays average scores from summary_scores array
  */
 
-"use client"
-import React from 'react';
-import { ScoreObject, hasSummaryScores } from './types';
+"use client";
+
+import { ScoreObject, hasSummaryScores } from "./types";
 
 interface ScoreDisplayProps {
   score: ScoreObject | null;
   errorMessage?: string | null;
 }
 
-export default function ScoreDisplay({ score, errorMessage }: ScoreDisplayProps) {
+export default function ScoreDisplay({
+  score,
+  errorMessage,
+}: ScoreDisplayProps) {
   // No score available
   if (!score) {
     return (
-      <div
-        className="inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-sm bg-[hsl(0,0%,95%)] border border-[hsl(0,0%,85%)] text-[hsl(330,3%,49%)]"
-      >
+      <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-sm bg-[hsl(0,0%,95%)] border border-[hsl(0,0%,85%)] text-[hsl(330,3%,49%)]">
         <span className="font-medium">Score:</span>
         <span>N/A</span>
         {errorMessage && (
-          <span className="text-xs text-[hsl(8,86%,40%)]">
-            (Error)
-          </span>
+          <span className="text-xs text-[hsl(8,86%,40%)]">(Error)</span>
         )}
       </div>
     );
@@ -36,9 +35,7 @@ export default function ScoreDisplay({ score, errorMessage }: ScoreDisplayProps)
 
     if (summaryScores.length === 0) {
       return (
-        <div
-          className="inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-sm bg-[hsl(0,0%,95%)] border border-[hsl(0,0%,85%)] text-[hsl(330,3%,49%)]"
-        >
+        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-sm bg-[hsl(0,0%,95%)] border border-[hsl(0,0%,85%)] text-[hsl(330,3%,49%)]">
           <span className="font-medium">Score:</span>
           <span>No scores available</span>
         </div>
@@ -46,15 +43,17 @@ export default function ScoreDisplay({ score, errorMessage }: ScoreDisplayProps)
     }
 
     // Separate numeric and categorical scores
-    const numericScores = summaryScores.filter(s => s.data_type === 'NUMERIC');
-    const categoricalScores = summaryScores.filter(s => s.data_type === 'CATEGORICAL');
+    const numericScores = summaryScores.filter(
+      (s) => s.data_type === "NUMERIC",
+    );
+    const categoricalScores = summaryScores.filter(
+      (s) => s.data_type === "CATEGORICAL",
+    );
 
     // If no numeric scores at all, show a message
     if (numericScores.length === 0 && categoricalScores.length === 0) {
       return (
-        <div
-          className="inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-sm bg-[hsl(0,0%,95%)] border border-[hsl(0,0%,85%)] text-[hsl(330,3%,49%)]"
-        >
+        <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-sm bg-[hsl(0,0%,95%)] border border-[hsl(0,0%,85%)] text-[hsl(330,3%,49%)]">
           <span className="font-medium">Score:</span>
           <span>No numeric scores available</span>
         </div>
@@ -65,7 +64,8 @@ export default function ScoreDisplay({ score, errorMessage }: ScoreDisplayProps)
     return (
       <div className="flex items-center gap-2 flex-wrap">
         {numericScores.map((summary, idx) => {
-          const value = summary.avg !== undefined ? summary.avg.toFixed(2) : 'N/A';
+          const value =
+            summary.avg !== undefined ? summary.avg.toFixed(2) : "N/A";
           const std = summary.std !== undefined ? summary.std.toFixed(2) : null;
 
           return (
@@ -75,9 +75,7 @@ export default function ScoreDisplay({ score, errorMessage }: ScoreDisplayProps)
             >
               <span>{summary.name}:</span>
               <span className="font-semibold text-[#171717]">{value}</span>
-              {std !== null && (
-                <span>±{std}</span>
-              )}
+              {std !== null && <span>±{std}</span>}
             </span>
           );
         })}
@@ -87,11 +85,9 @@ export default function ScoreDisplay({ score, errorMessage }: ScoreDisplayProps)
 
   // Fallback for unsupported format
   return (
-    <div
-      className="inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-sm bg-[hsl(0,0%,95%)] border border-[hsl(0,0%,85%)] text-[hsl(330,3%,49%)]"
-    >
+    <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-md text-sm bg-[hsl(0,0%,95%)] border border-[hsl(0,0%,85%)] text-[hsl(330,3%,49%)]">
       <span className="font-medium">Score:</span>
       <span>Unsupported format</span>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index fe5eede..8064621 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -3,10 +3,11 @@
  * Provides hierarchical navigation with expandable submenus
  */
 
-"use client"
-import React, { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { colors } from '@/app/lib/colors';
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { colors } from "@/app/lib/colors";
 
 interface SubMenuItem {
   name: string;
@@ -27,22 +28,25 @@ interface SidebarProps {
   activeRoute?: string;
 }
 
-export default function Sidebar({ collapsed, activeRoute = '/evaluations' }: SidebarProps) {
+export default function Sidebar({
+  collapsed,
+  activeRoute = "/evaluations",
+}: SidebarProps) {
   const router = useRouter();
   const [expandedMenus, setExpandedMenus] = useState<Record<string, boolean>>({
-    'Evaluations': true,
-    'Configurations': false,
+    Evaluations: true,
+    Configurations: false,
   });
 
   // Load expanded state from localStorage
   useEffect(() => {
-    const saved = localStorage.getItem('sidebar-expanded-menus');
+    const saved = localStorage.getItem("sidebar-expanded-menus");
     if (saved) {
       try {
         // eslint-disable-next-line react-hooks/set-state-in-effect
         setExpandedMenus(JSON.parse(saved));
       } catch (e) {
-        console.error('Failed to load sidebar state:', e);
+        console.error("Failed to load sidebar state:", e);
       }
     }
   }, []);
@@ -51,103 +55,185 @@ export default function Sidebar({ collapsed, activeRoute = '/evaluations' }: Sid
   const toggleMenu = (menuName: string) => {
     const newState = { ...expandedMenus, [menuName]: !expandedMenus[menuName] };
     setExpandedMenus(newState);
-    localStorage.setItem('sidebar-expanded-menus', JSON.stringify(newState));
+    localStorage.setItem("sidebar-expanded-menus", JSON.stringify(newState));
   };
 
   const navItems: MenuItem[] = [
     {
-      name: 'Evaluations',
+      name: "Evaluations",
       icon: (
-        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 7h6m-6 4h6" />
+        <svg
+          className="w-5 h-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 7h6m-6 4h6"
+          />
         </svg>
       ),
       submenu: [
-        { name: 'Text', route: '/evaluations' },
-        { name: 'Speech-to-Text', route: '/speech-to-text' },
-        { name: 'Text-to-Speech', route: '/text-to-speech' },
-      ]
+        { name: "Text", route: "/evaluations" },
+        { name: "Speech-to-Text", route: "/speech-to-text" },
+        { name: "Text-to-Speech", route: "/text-to-speech" },
+      ],
     },
     {
-      name: 'Documents',
-      route: '/document',
+      name: "Documents",
+      route: "/document",
       icon: (
-        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+        <svg
+          className="w-5 h-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
+          />
         </svg>
       ),
     },
     {
-      name: 'Knowledge Base',
-      route: '/knowledge-base',
+      name: "Knowledge Base",
+      route: "/knowledge-base",
       icon: (
-        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+        <svg
+          className="w-5 h-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+          />
         </svg>
       ),
     },
     {
-      name: 'Configurations',
+      name: "Configurations",
       icon: (
-        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+        <svg
+          className="w-5 h-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+          />
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+          />
         </svg>
       ),
       submenu: [
-        { name: 'Library', route: '/configurations' },
-        { name: 'Prompt Editor', route: '/configurations/prompt-editor' },
-      ]
+        { name: "Library", route: "/configurations" },
+        { name: "Prompt Editor", route: "/configurations/prompt-editor" },
+      ],
     },
     {
-      name: 'Settings',
-      route: '/settings/credentials',
+      name: "Settings",
+      route: "/settings/credentials",
       icon: (
-        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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
+          className="w-5 h-5"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            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>
       ),
-    }
+    },
   ];
 
   const bottomItem: MenuItem = {
-    name: 'Keystore',
-    route: '/keystore',
+    name: "Keystore",
+    route: "/keystore",
     icon: (
-      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+      <svg
+        className="w-5 h-5"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
+        />
       </svg>
-    )
+    ),
   };
 
   return (
     <aside
       className="border-r transition-all duration-300 ease-in-out h-full flex-shrink-0 flex flex-col"
       style={{
-        width: collapsed ? '0px' : '240px',
+        width: collapsed ? "0px" : "240px",
         backgroundColor: colors.bg.secondary,
         borderColor: colors.border,
-        overflow: 'hidden',
+        overflow: "hidden",
       }}
     >
       {/* Header */}
-      <div className="px-5 py-6" style={{ borderBottom: `1px solid ${colors.border}` }}>
-        <h2 className="text-sm font-semibold" style={{ color: colors.text.primary, letterSpacing: '-0.01em' }}>Kaapi Konsole</h2>
-        <p className="text-xs mt-0.5" style={{ color: colors.text.secondary }}>Tech4Dev</p>
+      <div
+        className="px-5 py-6"
+        style={{ borderBottom: `1px solid ${colors.border}` }}
+      >
+        <h2
+          className="text-sm font-semibold"
+          style={{ color: colors.text.primary, letterSpacing: "-0.01em" }}
+        >
+          Kaapi Konsole
+        </h2>
+        <p className="text-xs mt-0.5" style={{ color: colors.text.secondary }}>
+          Tech4Dev
+        </p>
       </div>
 
       {/* Main Navigation */}
-      <nav className="p-3 space-y-1 flex-1 overflow-y-auto" style={{ width: '240px' }}>
+      <nav
+        className="p-3 space-y-1 flex-1 overflow-y-auto"
+        style={{ width: "240px" }}
+      >
         {navItems.map((item) => {
           const hasSubmenu = item.submenu && item.submenu.length > 0;
           const isExpanded = expandedMenus[item.name];
           const isActive = activeRoute === item.route;
 
           // Check if any child or nested child is active
-          const hasActiveChild = hasSubmenu && item.submenu?.some(sub =>
-            activeRoute === sub.route ||
-            (sub.submenu && sub.submenu.some(nested => activeRoute === nested.route))
-          );
+          const hasActiveChild =
+            hasSubmenu &&
+            item.submenu?.some(
+              (sub) =>
+                activeRoute === sub.route ||
+                (sub.submenu &&
+                  sub.submenu.some((nested) => activeRoute === nested.route)),
+            );
 
           return (
             <div key={item.name}>
@@ -162,11 +248,16 @@ export default function Sidebar({ collapsed, activeRoute = '/evaluations' }: Sid
                 }}
                 className="w-full text-left px-3 py-2 rounded-md text-sm flex items-center gap-2.5"
                 style={{
-                  backgroundColor: isActive ? colors.bg.primary : 'transparent',
-                  color: (isActive || hasActiveChild) ? colors.text.primary : colors.text.secondary,
-                  fontWeight: (isActive || hasActiveChild) ? 600 : 500,
-                  transition: 'all 0.15s ease',
-                  border: isActive ? `1px solid ${colors.border}` : '1px solid transparent'
+                  backgroundColor: isActive ? colors.bg.primary : "transparent",
+                  color:
+                    isActive || hasActiveChild
+                      ? colors.text.primary
+                      : colors.text.secondary,
+                  fontWeight: isActive || hasActiveChild ? 600 : 500,
+                  transition: "all 0.15s ease",
+                  border: isActive
+                    ? `1px solid ${colors.border}`
+                    : "1px solid transparent",
                 }}
                 onMouseEnter={(e) => {
                   if (!isActive) {
@@ -176,25 +267,34 @@ export default function Sidebar({ collapsed, activeRoute = '/evaluations' }: Sid
                 }}
                 onMouseLeave={(e) => {
                   if (!isActive) {
-                    e.currentTarget.style.backgroundColor = 'transparent';
-                    e.currentTarget.style.color = (hasActiveChild) ? colors.text.primary : colors.text.secondary;
+                    e.currentTarget.style.backgroundColor = "transparent";
+                    e.currentTarget.style.color = hasActiveChild
+                      ? colors.text.primary
+                      : colors.text.secondary;
                   }
                 }}
               >
-                <span style={{ opacity: (isActive || hasActiveChild) ? 1 : 0.7 }}>{item.icon}</span>
+                <span style={{ opacity: isActive || hasActiveChild ? 1 : 0.7 }}>
+                  {item.icon}
+                </span>
                 <span className="flex-1">{item.name}</span>
                 {hasSubmenu && (
                   <svg
                     className="w-4 h-4"
                     style={{
-                      transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
-                      transition: 'transform 0.15s ease'
+                      transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
+                      transition: "transform 0.15s ease",
                     }}
                     fill="none"
                     viewBox="0 0 24 24"
                     stroke="currentColor"
                   >
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 5l7 7-7 7"
+                    />
                   </svg>
                 )}
               </button>
@@ -205,15 +305,20 @@ export default function Sidebar({ collapsed, activeRoute = '/evaluations' }: Sid
                   className="ml-3 mt-1 space-y-0.5 overflow-hidden"
                   style={{
                     borderLeft: `2px solid ${colors.border}`,
-                    paddingLeft: '12px',
-                    animation: 'slideDown 0.15s ease-out'
+                    paddingLeft: "12px",
+                    animation: "slideDown 0.15s ease-out",
                   }}
                 >
                   {item.submenu?.map((subItem) => {
-                    const hasNestedSubmenu = subItem.submenu && subItem.submenu.length > 0;
+                    const hasNestedSubmenu =
+                      subItem.submenu && subItem.submenu.length > 0;
                     const isNestedExpanded = expandedMenus[subItem.name];
                     const isSubActive = activeRoute === subItem.route;
-                    const hasActiveNestedChild = hasNestedSubmenu && subItem.submenu?.some(nested => activeRoute === nested.route);
+                    const hasActiveNestedChild =
+                      hasNestedSubmenu &&
+                      subItem.submenu?.some(
+                        (nested) => activeRoute === nested.route,
+                      );
 
                     return (
                       <div key={subItem.name}>
@@ -227,22 +332,34 @@ export default function Sidebar({ collapsed, activeRoute = '/evaluations' }: Sid
                           }}
                           className="w-full text-left px-3 py-1.5 rounded-md text-xs flex items-center justify-between gap-2"
                           style={{
-                            backgroundColor: isSubActive ? colors.bg.primary : 'transparent',
-                            color: (isSubActive || hasActiveNestedChild) ? colors.text.primary : colors.text.secondary,
-                            fontWeight: (isSubActive || hasActiveNestedChild) ? 500 : 400,
-                            transition: 'all 0.15s ease',
-                            border: isSubActive ? `1px solid ${colors.border}` : '1px solid transparent'
+                            backgroundColor: isSubActive
+                              ? colors.bg.primary
+                              : "transparent",
+                            color:
+                              isSubActive || hasActiveNestedChild
+                                ? colors.text.primary
+                                : colors.text.secondary,
+                            fontWeight:
+                              isSubActive || hasActiveNestedChild ? 500 : 400,
+                            transition: "all 0.15s ease",
+                            border: isSubActive
+                              ? `1px solid ${colors.border}`
+                              : "1px solid transparent",
                           }}
                           onMouseEnter={(e) => {
                             if (!isSubActive) {
-                              e.currentTarget.style.backgroundColor = colors.bg.primary;
+                              e.currentTarget.style.backgroundColor =
+                                colors.bg.primary;
                               e.currentTarget.style.color = colors.text.primary;
                             }
                           }}
                           onMouseLeave={(e) => {
                             if (!isSubActive) {
-                              e.currentTarget.style.backgroundColor = 'transparent';
-                              e.currentTarget.style.color = (hasActiveNestedChild) ? colors.text.primary : colors.text.secondary;
+                              e.currentTarget.style.backgroundColor =
+                                "transparent";
+                              e.currentTarget.style.color = hasActiveNestedChild
+                                ? colors.text.primary
+                                : colors.text.secondary;
                             }
                           }}
                         >
@@ -251,9 +368,9 @@ export default function Sidebar({ collapsed, activeRoute = '/evaluations' }: Sid
                             <span
                               className="text-[10px] px-1.5 py-0.5 rounded"
                               style={{
-                                backgroundColor: '#fef3c7',
-                                color: '#92400e',
-                                fontWeight: 600
+                                backgroundColor: "#fef3c7",
+                                color: "#92400e",
+                                fontWeight: 600,
                               }}
                             >
                               ☕
@@ -263,14 +380,21 @@ export default function Sidebar({ collapsed, activeRoute = '/evaluations' }: Sid
                             <svg
                               className="w-3 h-3"
                               style={{
-                                transform: isNestedExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
-                                transition: 'transform 0.15s ease'
+                                transform: isNestedExpanded
+                                  ? "rotate(90deg)"
+                                  : "rotate(0deg)",
+                                transition: "transform 0.15s ease",
                               }}
                               fill="none"
                               viewBox="0 0 24 24"
                               stroke="currentColor"
                             >
-                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M9 5l7 7-7 7"
+                              />
                             </svg>
                           )}
                         </button>
@@ -281,34 +405,48 @@ export default function Sidebar({ collapsed, activeRoute = '/evaluations' }: Sid
                             className="ml-2 mt-0.5 space-y-0.5 overflow-hidden"
                             style={{
                               borderLeft: `1px solid ${colors.border}`,
-                              paddingLeft: '10px',
-                              animation: 'slideDown 0.15s ease-out'
+                              paddingLeft: "10px",
+                              animation: "slideDown 0.15s ease-out",
                             }}
                           >
                             {subItem.submenu?.map((nestedItem) => {
-                              const isNestedActive = activeRoute === nestedItem.route;
+                              const isNestedActive =
+                                activeRoute === nestedItem.route;
                               return (
                                 <button
                                   key={nestedItem.route}
-                                  onClick={() => nestedItem.route && router.push(nestedItem.route)}
+                                  onClick={() =>
+                                    nestedItem.route &&
+                                    router.push(nestedItem.route)
+                                  }
                                   className="w-full text-left px-2.5 py-1 rounded-md text-xs flex items-center justify-between gap-2"
                                   style={{
-                                    backgroundColor: isNestedActive ? colors.bg.primary : 'transparent',
-                                    color: isNestedActive ? colors.text.primary : colors.text.secondary,
+                                    backgroundColor: isNestedActive
+                                      ? colors.bg.primary
+                                      : "transparent",
+                                    color: isNestedActive
+                                      ? colors.text.primary
+                                      : colors.text.secondary,
                                     fontWeight: isNestedActive ? 500 : 400,
-                                    transition: 'all 0.15s ease',
-                                    border: isNestedActive ? `1px solid ${colors.border}` : '1px solid transparent'
+                                    transition: "all 0.15s ease",
+                                    border: isNestedActive
+                                      ? `1px solid ${colors.border}`
+                                      : "1px solid transparent",
                                   }}
                                   onMouseEnter={(e) => {
                                     if (!isNestedActive) {
-                                      e.currentTarget.style.backgroundColor = colors.bg.primary;
-                                      e.currentTarget.style.color = colors.text.primary;
+                                      e.currentTarget.style.backgroundColor =
+                                        colors.bg.primary;
+                                      e.currentTarget.style.color =
+                                        colors.text.primary;
                                     }
                                   }}
                                   onMouseLeave={(e) => {
                                     if (!isNestedActive) {
-                                      e.currentTarget.style.backgroundColor = 'transparent';
-                                      e.currentTarget.style.color = colors.text.secondary;
+                                      e.currentTarget.style.backgroundColor =
+                                        "transparent";
+                                      e.currentTarget.style.color =
+                                        colors.text.secondary;
                                     }
                                   }}
                                 >
@@ -317,9 +455,9 @@ export default function Sidebar({ collapsed, activeRoute = '/evaluations' }: Sid
                                     <span
                                       className="text-[10px] px-1.5 py-0.5 rounded"
                                       style={{
-                                        backgroundColor: '#fef3c7',
-                                        color: '#92400e',
-                                        fontWeight: 600
+                                        backgroundColor: "#fef3c7",
+                                        color: "#92400e",
+                                        fontWeight: 600,
                                       }}
                                     >
                                       ☕
@@ -341,16 +479,28 @@ export default function Sidebar({ collapsed, activeRoute = '/evaluations' }: Sid
       </nav>
 
       {/* Bottom Section - Keystore */}
-      <div className="p-3 border-t" style={{ borderColor: colors.border, width: '240px' }}>
+      <div
+        className="p-3 border-t"
+        style={{ borderColor: colors.border, width: "240px" }}
+      >
         <button
           onClick={() => router.push(bottomItem.route!)}
           className="w-full text-left px-3 py-2 rounded-md text-sm flex items-center gap-2.5"
           style={{
-            backgroundColor: activeRoute === bottomItem.route ? colors.bg.primary : 'transparent',
-            color: activeRoute === bottomItem.route ? colors.text.primary : colors.text.secondary,
+            backgroundColor:
+              activeRoute === bottomItem.route
+                ? colors.bg.primary
+                : "transparent",
+            color:
+              activeRoute === bottomItem.route
+                ? colors.text.primary
+                : colors.text.secondary,
             fontWeight: activeRoute === bottomItem.route ? 500 : 400,
-            transition: 'all 0.15s ease',
-            border: activeRoute === bottomItem.route ? `1px solid ${colors.border}` : '1px solid transparent'
+            transition: "all 0.15s ease",
+            border:
+              activeRoute === bottomItem.route
+                ? `1px solid ${colors.border}`
+                : "1px solid transparent",
           }}
           onMouseEnter={(e) => {
             if (activeRoute !== bottomItem.route) {
@@ -360,12 +510,14 @@ export default function Sidebar({ collapsed, activeRoute = '/evaluations' }: Sid
           }}
           onMouseLeave={(e) => {
             if (activeRoute !== bottomItem.route) {
-              e.currentTarget.style.backgroundColor = 'transparent';
+              e.currentTarget.style.backgroundColor = "transparent";
               e.currentTarget.style.color = colors.text.secondary;
             }
           }}
         >
-          <span style={{ opacity: activeRoute === bottomItem.route ? 1 : 0.7 }}>{bottomItem.icon}</span>
+          <span style={{ opacity: activeRoute === bottomItem.route ? 1 : 0.7 }}>
+            {bottomItem.icon}
+          </span>
           {bottomItem.name}
         </button>
       </div>
diff --git a/app/components/SimplifiedConfigEditor.tsx b/app/components/SimplifiedConfigEditor.tsx
index bfb23cc..2057bc1 100644
--- a/app/components/SimplifiedConfigEditor.tsx
+++ b/app/components/SimplifiedConfigEditor.tsx
@@ -10,6 +10,7 @@
  */
 
 "use client";
+
 import { useState, useEffect } from "react";
 import ConfigDrawer from "./ConfigDrawer";
 import { useToast } from "./Toast";
@@ -26,7 +27,6 @@ import {
 } from "@/app/lib/configTypes";
 import { colors } from "../lib/colors";
 
-// UI representation of a config version (flattened for easier display)
 export interface SavedConfig {
   id: string; // version id
   config_id: string; // parent config id
@@ -521,7 +521,9 @@ export default function SimplifiedConfigEditor({
               onClick={() => setIsDrawerOpen(true)}
               className="px-4 py-2 rounded-md text-sm font-medium flex items-center gap-2 relative"
               style={{
-                backgroundColor: hasUnsavedChanges ? "#fffbeb" : colors.bg.primary,
+                backgroundColor: hasUnsavedChanges
+                  ? "#fffbeb"
+                  : colors.bg.primary,
                 borderWidth: "1px",
                 borderColor: hasUnsavedChanges ? "#fcd34d" : "#e5e5e5",
                 color: hasUnsavedChanges ? "#b45309" : "#171717",
diff --git a/app/components/StatusBadge.tsx b/app/components/StatusBadge.tsx
index f2ee9f2..48df1e5 100644
--- a/app/components/StatusBadge.tsx
+++ b/app/components/StatusBadge.tsx
@@ -3,30 +3,29 @@
  * Displays status with appropriate color based on job/evaluation state
  */
 
-"use client"
-import React from 'react';
-import { getStatusColor } from './utils';
+"use client";
+
+import { getStatusColor } from "./utils";
 
 interface StatusBadgeProps {
   status: string;
-  size?: 'sm' | 'md';
+  size?: "sm" | "md";
 }
 
-export default function StatusBadge({ status, size = 'sm' }: StatusBadgeProps) {
+export default function StatusBadge({ status, size = "sm" }: StatusBadgeProps) {
   const colors = getStatusColor(status);
 
-  const sizeClasses = size === 'md'
-    ? 'px-3 py-1.5 text-sm'
-    : 'px-2 py-1 text-xs';
+  const sizeClasses =
+    size === "md" ? "px-3 py-1.5 text-sm" : "px-2 py-1 text-xs";
 
   return (
     <div
       className={`inline-block ${sizeClasses} rounded font-semibold`}
       style={{
         backgroundColor: colors.bg,
-        borderWidth: '1px',
+        borderWidth: "1px",
         borderColor: colors.border,
-        color: colors.text
+        color: colors.text,
       }}
     >
       {status.toUpperCase()}
diff --git a/app/components/TabNavigation.tsx b/app/components/TabNavigation.tsx
index bfbc841..8244846 100644
--- a/app/components/TabNavigation.tsx
+++ b/app/components/TabNavigation.tsx
@@ -3,9 +3,9 @@
  * Provides a tab interface with active state highlighting
  */
 
-"use client"
-import React from 'react';
-import { colors } from '@/app/lib/colors';
+"use client";
+
+import { colors } from "@/app/lib/colors";
 
 export interface Tab {
   id: string;
@@ -18,9 +18,16 @@ interface TabNavigationProps {
   onTabChange: (tabId: string) => void;
 }
 
-export default function TabNavigation({ tabs, activeTab, onTabChange }: TabNavigationProps) {
+export default function TabNavigation({
+  tabs,
+  activeTab,
+  onTabChange,
+}: TabNavigationProps) {
   return (
-    <div className="border-b flex gap-1 px-4" style={{ backgroundColor: colors.bg.primary, borderColor: colors.border }}>
+    <div
+      className="border-b flex gap-1 px-4"
+      style={{ backgroundColor: colors.bg.primary, borderColor: colors.border }}
+    >
       {tabs.map((tab) => {
         const isActive = activeTab === tab.id;
         return (
@@ -29,7 +36,7 @@ export default function TabNavigation({ tabs, activeTab, onTabChange }: TabNavig
             onClick={() => onTabChange(tab.id)}
             className="px-4 py-2.5 text-sm font-medium border-b-2 transition-colors"
             style={{
-              borderColor: isActive ? colors.accent.primary : 'transparent',
+              borderColor: isActive ? colors.accent.primary : "transparent",
               color: isActive ? colors.accent.primary : colors.text.secondary,
             }}
           >
diff --git a/app/components/Toast.tsx b/app/components/Toast.tsx
index 9c43557..5912187 100644
--- a/app/components/Toast.tsx
+++ b/app/components/Toast.tsx
@@ -1,7 +1,8 @@
-"use client"
-import React, { createContext, useContext, useState, useCallback } from 'react';
+"use client";
 
-export type ToastType = 'success' | 'error' | 'info' | 'warning';
+import React, { createContext, useContext, useState, useCallback } from "react";
+
+export type ToastType = "success" | "error" | "info" | "warning";
 
 export interface Toast {
   id: string;
@@ -29,37 +30,54 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
     setToasts((prev) => prev.filter((toast) => toast.id !== id));
   }, []);
 
-  const addToast = useCallback((message: string, type: ToastType = 'info', duration: number = 5000) => {
-    const id = `toast-${Date.now()}-${Math.random()}`;
-    const toast: Toast = { id, message, type, duration };
+  const addToast = useCallback(
+    (message: string, type: ToastType = "info", duration: number = 5000) => {
+      const id = `toast-${Date.now()}-${Math.random()}`;
+      const toast: Toast = { id, message, type, duration };
 
-    setToasts((prev) => [...prev, toast]);
+      setToasts((prev) => [...prev, toast]);
 
-    if (duration > 0) {
-      setTimeout(() => {
-        removeToast(id);
-      }, duration);
-    }
-  }, [removeToast]);
+      if (duration > 0) {
+        setTimeout(() => {
+          removeToast(id);
+        }, duration);
+      }
+    },
+    [removeToast],
+  );
 
-  const success = useCallback((message: string, duration?: number) => {
-    addToast(message, 'success', duration);
-  }, [addToast]);
+  const success = useCallback(
+    (message: string, duration?: number) => {
+      addToast(message, "success", duration);
+    },
+    [addToast],
+  );
 
-  const error = useCallback((message: string, duration?: number) => {
-    addToast(message, 'error', duration);
-  }, [addToast]);
+  const error = useCallback(
+    (message: string, duration?: number) => {
+      addToast(message, "error", duration);
+    },
+    [addToast],
+  );
 
-  const info = useCallback((message: string, duration?: number) => {
-    addToast(message, 'info', duration);
-  }, [addToast]);
+  const info = useCallback(
+    (message: string, duration?: number) => {
+      addToast(message, "info", duration);
+    },
+    [addToast],
+  );
 
-  const warning = useCallback((message: string, duration?: number) => {
-    addToast(message, 'warning', duration);
-  }, [addToast]);
+  const warning = useCallback(
+    (message: string, duration?: number) => {
+      addToast(message, "warning", duration);
+    },
+    [addToast],
+  );
 
   return (
-    <ToastContext.Provider value={{ toasts, addToast, removeToast, success, error, info, warning }}>
+    <ToastContext.Provider
+      value={{ toasts, addToast, removeToast, success, error, info, warning }}
+    >
       {children}
       <ToastContainer toasts={toasts} removeToast={removeToast} />
     </ToastContext.Provider>
@@ -69,19 +87,27 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
 export function useToast() {
   const context = useContext(ToastContext);
   if (!context) {
-    throw new Error('useToast must be used within ToastProvider');
+    throw new Error("useToast must be used within ToastProvider");
   }
   return context;
 }
 
 // Toast Container Component
-function ToastContainer({ toasts, removeToast }: { toasts: Toast[]; removeToast: (id: string) => void }) {
+function ToastContainer({
+  toasts,
+  removeToast,
+}: {
+  toasts: Toast[];
+  removeToast: (id: string) => void;
+}) {
   return (
-    <div
-      className="fixed top-4 right-4 z-[9999] flex flex-col gap-2 pointer-events-none max-w-[420px]"
-    >
+    <div className="fixed top-4 right-4 z-[9999] flex flex-col gap-2 pointer-events-none max-w-[420px]">
       {toasts.map((toast) => (
-        <ToastItem key={toast.id} toast={toast} onClose={() => removeToast(toast.id)} />
+        <ToastItem
+          key={toast.id}
+          toast={toast}
+          onClose={() => removeToast(toast.id)}
+        />
       ))}
     </div>
   );
@@ -95,7 +121,7 @@ function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
     <div
       className="pointer-events-auto animate-slideIn"
       style={{
-        animation: 'slideIn 0.2s ease-out',
+        animation: "slideIn 0.2s ease-out",
       }}
     >
       <div
@@ -107,24 +133,68 @@ function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
       >
         {/* Icon */}
         <div className="flex-shrink-0 mt-0.5">
-          {toast.type === 'success' && (
-            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: styles.icon }}>
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+          {toast.type === "success" && (
+            <svg
+              className="w-5 h-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              style={{ color: styles.icon }}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
             </svg>
           )}
-          {toast.type === 'error' && (
-            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: styles.icon }}>
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+          {toast.type === "error" && (
+            <svg
+              className="w-5 h-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              style={{ color: styles.icon }}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
             </svg>
           )}
-          {toast.type === 'warning' && (
-            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: styles.icon }}>
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          {toast.type === "warning" && (
+            <svg
+              className="w-5 h-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              style={{ color: styles.icon }}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+              />
             </svg>
           )}
-          {toast.type === 'info' && (
-            <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: styles.icon }}>
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          {toast.type === "info" && (
+            <svg
+              className="w-5 h-5"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              style={{ color: styles.icon }}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
             </svg>
           )}
         </div>
@@ -140,8 +210,18 @@ function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
           className="flex-shrink-0 rounded-md p-1 hover:bg-black/5 transition-colors"
           style={{ color: styles.text }}
         >
-          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M6 18L18 6M6 6l12 12"
+            />
           </svg>
         </button>
       </div>
@@ -151,34 +231,34 @@ function ToastItem({ toast, onClose }: { toast: Toast; onClose: () => void }) {
 
 function getToastStyles(type: ToastType) {
   switch (type) {
-    case 'success':
+    case "success":
       return {
-        bg: '#f0fdf4',
-        border: '#86efac',
-        text: '#15803d',
-        icon: '#16a34a',
+        bg: "#f0fdf4",
+        border: "#86efac",
+        text: "#15803d",
+        icon: "#16a34a",
       };
-    case 'error':
+    case "error":
       return {
-        bg: '#fef2f2',
-        border: '#fca5a5',
-        text: '#b91c1c',
-        icon: '#dc2626',
+        bg: "#fef2f2",
+        border: "#fca5a5",
+        text: "#b91c1c",
+        icon: "#dc2626",
       };
-    case 'warning':
+    case "warning":
       return {
-        bg: '#fffbeb',
-        border: '#fcd34d',
-        text: '#b45309',
-        icon: '#f59e0b',
+        bg: "#fffbeb",
+        border: "#fcd34d",
+        text: "#b45309",
+        icon: "#f59e0b",
       };
-    case 'info':
+    case "info":
     default:
       return {
-        bg: '#eff6ff',
-        border: '#93c5fd',
-        text: '#1e40af',
-        icon: '#3b82f6',
+        bg: "#eff6ff",
+        border: "#93c5fd",
+        text: "#1e40af",
+        icon: "#3b82f6",
       };
   }
 }
diff --git a/app/components/evaluations/DatasetsTab.tsx b/app/components/evaluations/DatasetsTab.tsx
index b301429..5d7674e 100644
--- a/app/components/evaluations/DatasetsTab.tsx
+++ b/app/components/evaluations/DatasetsTab.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import { useState, useEffect, useRef } from 'react';
-import { colors } from '@/app/lib/colors';
-import { APIKey } from '@/app/keystore/page';
-import { Dataset } from '@/app/datasets/page';
-import { useToast } from '@/app/components/Toast';
-import EvalDatasetDescription from './EvalDatasetDescription';
+import { useState, useEffect, useRef } from "react";
+import { colors } from "@/app/lib/colors";
+import { APIKey } from "@/app/keystore/page";
+import { Dataset } from "@/app/datasets/page";
+import { useToast } from "@/app/components/Toast";
+import EvalDatasetDescription from "./EvalDatasetDescription";
 
 export interface DatasetsTabProps {
   leftPanelWidth: number;
@@ -52,39 +52,42 @@ export default function DatasetsTab({
   const [isDragging, setIsDragging] = useState(false);
   const [deletingId, setDeletingId] = useState<number | null>(null);
   const [showDuplicationInfo, setShowDuplicationInfo] = useState(false);
-  const [duplicationInfoPos, setDuplicationInfoPos] = useState({ top: 0, left: 0 });
+  const [duplicationInfoPos, setDuplicationInfoPos] = useState({
+    top: 0,
+    left: 0,
+  });
 
   useEffect(() => {
     if (!showDuplicationInfo) return;
     const handleClick = () => setShowDuplicationInfo(false);
     const handleScroll = () => setShowDuplicationInfo(false);
-    document.addEventListener('click', handleClick);
-    window.addEventListener('scroll', handleScroll, true);
+    document.addEventListener("click", handleClick);
+    window.addEventListener("scroll", handleScroll, true);
     return () => {
-      document.removeEventListener('click', handleClick);
-      window.removeEventListener('scroll', handleScroll, true);
+      document.removeEventListener("click", handleClick);
+      window.removeEventListener("scroll", handleScroll, true);
     };
   }, [showDuplicationInfo]);
 
   const handleDeleteDataset = async (datasetId: number) => {
-    const selectedKey = apiKeys.find(k => k.id === selectedKeyId);
+    const selectedKey = apiKeys.find((k) => k.id === selectedKeyId);
     if (!selectedKey) return;
 
     setDeletingId(datasetId);
     try {
       const response = await fetch(`/api/evaluations/datasets/${datasetId}`, {
-        method: 'DELETE',
-        headers: { 'X-API-KEY': selectedKey.key },
+        method: "DELETE",
+        headers: { "X-API-KEY": selectedKey.key },
       });
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || 'Failed to delete dataset');
+        throw new Error(errorData.error || "Failed to delete dataset");
       }
-      toast.success('Dataset deleted');
+      toast.success("Dataset deleted");
       loadStoredDatasets();
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
-      toast.error(err.message || 'Failed to delete dataset');
+      toast.error(err.message || "Failed to delete dataset");
     } finally {
       setDeletingId(null);
     }
@@ -92,43 +95,55 @@ export default function DatasetsTab({
 
   const [confirmDeleteId, setConfirmDeleteId] = useState<number | null>(null);
   const [viewingId, setViewingId] = useState<number | null>(null);
-  const [viewModalData, setViewModalData] = useState<{ name: string; headers: string[]; rows: string[][]; signedUrl: string } | null>(null);
+  const [viewModalData, setViewModalData] = useState<{
+    name: string;
+    headers: string[];
+    rows: string[][];
+    signedUrl: string;
+  } | null>(null);
 
   const handleViewDataset = async (datasetId: number, datasetName: string) => {
-    const selectedKey = apiKeys.find(k => k.id === selectedKeyId);
+    const selectedKey = apiKeys.find((k) => k.id === selectedKeyId);
     if (!selectedKey) return;
 
     setViewingId(datasetId);
     try {
-      const response = await fetch(`/api/evaluations/datasets/${datasetId}?include_signed_url=true&fetch_content=true`, {
-        method: 'GET',
-        headers: { 'X-API-KEY': selectedKey.key },
-      });
+      const response = await fetch(
+        `/api/evaluations/datasets/${datasetId}?include_signed_url=true&fetch_content=true`,
+        {
+          method: "GET",
+          headers: { "X-API-KEY": selectedKey.key },
+        },
+      );
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || 'Failed to get dataset');
+        throw new Error(errorData.error || "Failed to get dataset");
       }
       const data = await response.json();
       const signedUrl = data?.data?.signed_url || data?.signed_url;
       const csvText = data?.csv_content;
       if (!csvText) {
-        toast.error('No data available for this dataset');
+        toast.error("No data available for this dataset");
         return;
       }
 
       // Parse CSV
-      const lines = csvText.split('\n').filter((l: string) => l.trim());
+      const lines = csvText.split("\n").filter((l: string) => l.trim());
       const parseRow = (line: string): string[] => {
         const result: string[] = [];
-        let current = '';
+        let current = "";
         let inQuotes = false;
         for (let i = 0; i < line.length; i++) {
           if (line[i] === '"') {
-            if (inQuotes && line[i + 1] === '"') { current += '"'; i++; }
-            else { inQuotes = !inQuotes; }
-          } else if (line[i] === ',' && !inQuotes) {
+            if (inQuotes && line[i + 1] === '"') {
+              current += '"';
+              i++;
+            } else {
+              inQuotes = !inQuotes;
+            }
+          } else if (line[i] === "," && !inQuotes) {
             result.push(current.trim());
-            current = '';
+            current = "";
           } else {
             current += line[i];
           }
@@ -140,10 +155,15 @@ export default function DatasetsTab({
       const headers = lines.length > 0 ? parseRow(lines[0]) : [];
       const rows = lines.slice(1).map(parseRow);
 
-      setViewModalData({ name: datasetName, headers, rows, signedUrl: signedUrl || '' });
+      setViewModalData({
+        name: datasetName,
+        headers,
+        rows,
+        signedUrl: signedUrl || "",
+      });
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
-      toast.error(err.message || 'Failed to view dataset');
+      toast.error(err.message || "Failed to view dataset");
     } finally {
       setViewingId(null);
     }
@@ -151,13 +171,23 @@ export default function DatasetsTab({
 
   const handleDownloadFromModal = () => {
     if (!viewModalData) return;
-    const csvLines = [viewModalData.headers.join(',')];
-    viewModalData.rows.forEach(row => {
-      csvLines.push(row.map(cell => cell.includes(',') || cell.includes('"') || cell.includes('\n') ? `"${cell.replace(/"/g, '""')}"` : cell).join(','));
+    const csvLines = [viewModalData.headers.join(",")];
+    viewModalData.rows.forEach((row) => {
+      csvLines.push(
+        row
+          .map((cell) =>
+            cell.includes(",") || cell.includes('"') || cell.includes("\n")
+              ? `"${cell.replace(/"/g, '""')}"`
+              : cell,
+          )
+          .join(","),
+      );
+    });
+    const blob = new Blob([csvLines.join("\n")], {
+      type: "text/csv;charset=utf-8;",
     });
-    const blob = new Blob([csvLines.join('\n')], { type: 'text/csv;charset=utf-8;' });
     const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
+    const link = document.createElement("a");
     link.href = url;
     link.download = `${viewModalData.name}.csv`;
     document.body.appendChild(link);
@@ -170,12 +200,14 @@ export default function DatasetsTab({
     e.preventDefault();
     setIsDragging(false);
     const file = e.dataTransfer.files?.[0];
-    if (file && file.name.endsWith('.csv')) {
+    if (file && file.name.endsWith(".csv")) {
       const dt = new DataTransfer();
       dt.items.add(file);
       if (fileInputRef.current) {
         fileInputRef.current.files = dt.files;
-        fileInputRef.current.dispatchEvent(new Event('change', { bubbles: true }));
+        fileInputRef.current.dispatchEvent(
+          new Event("change", { bubbles: true }),
+        );
       }
     }
   };
@@ -185,62 +217,96 @@ export default function DatasetsTab({
       {/* Left Panel - Create Dataset Form */}
       <div
         className="flex-shrink-0 border-r flex flex-col overflow-hidden"
-        style={{ width: `${leftPanelWidth}px`, backgroundColor: colors.bg.primary, borderColor: colors.border }}
+        style={{
+          width: `${leftPanelWidth}px`,
+          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 }}>
+            <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 }}>
+            <p
+              className="text-xs mt-0.5"
+              style={{ color: colors.text.secondary }}
+            >
               Upload a CSV with golden question-answer pairs
             </p>
           </div>
 
           {/* Name */}
           <div>
-            <label className="block text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
+            <label
+              className="block text-xs font-medium mb-1.5"
+              style={{ color: colors.text.secondary }}
+            >
               Name *
             </label>
             <input
               type="text"
               value={datasetName}
-              onChange={e => setDatasetName(e.target.value)}
+              onChange={(e) => setDatasetName(e.target.value)}
               placeholder="e.g., QnA Dataset v1"
               className="w-full px-3 py-2 border rounded-md text-sm"
-              style={{ backgroundColor: colors.bg.primary, borderColor: colors.border, color: colors.text.primary }}
+              style={{
+                backgroundColor: colors.bg.primary,
+                borderColor: colors.border,
+                color: colors.text.primary,
+              }}
             />
           </div>
 
           {/* Description */}
           <div>
-            <label className="block text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
+            <label
+              className="block text-xs font-medium mb-1.5"
+              style={{ color: colors.text.secondary }}
+            >
               Description
             </label>
             <input
               type="text"
               value={datasetDescription}
-              onChange={e => setDatasetDescription(e.target.value)}
+              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 }}
+              style={{
+                backgroundColor: colors.bg.primary,
+                borderColor: colors.border,
+                color: colors.text.primary,
+              }}
             />
           </div>
 
           {/* Duplication Factor */}
           <div>
-            <label className="text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
+            <label
+              className="text-xs font-medium mb-1.5"
+              style={{ color: colors.text.secondary }}
+            >
               <span className="inline-flex items-center gap-1">
                 Duplication Factor
                 <span
                   className="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-[9px] font-normal cursor-pointer shrink-0"
-                  style={{ backgroundColor: colors.bg.primary, border: `1px solid ${colors.border}`, color: colors.text.secondary }}
+                  style={{
+                    backgroundColor: colors.bg.primary,
+                    border: `1px solid ${colors.border}`,
+                    color: colors.text.secondary,
+                  }}
                   onClick={(e) => {
                     e.stopPropagation();
                     e.preventDefault();
                     const rect = e.currentTarget.getBoundingClientRect();
-                    setDuplicationInfoPos({ top: rect.bottom + 4, left: rect.left });
+                    setDuplicationInfoPos({
+                      top: rect.bottom + 4,
+                      left: rect.left,
+                    });
                     setShowDuplicationInfo(!showDuplicationInfo);
                   }}
                 >
@@ -249,12 +315,32 @@ export default function DatasetsTab({
                 {showDuplicationInfo && (
                   <div
                     className="fixed z-50 rounded-lg shadow-lg border text-xs p-3"
-                    style={{ backgroundColor: colors.bg.primary, borderColor: colors.border, width: '280px', top: duplicationInfoPos.top, left: duplicationInfoPos.left }}
+                    style={{
+                      backgroundColor: colors.bg.primary,
+                      borderColor: colors.border,
+                      width: "280px",
+                      top: duplicationInfoPos.top,
+                      left: duplicationInfoPos.left,
+                    }}
                     onClick={(e) => e.stopPropagation()}
                   >
-                    <div className="font-semibold mb-1" style={{ color: colors.text.primary }}>Duplication Factor</div>
-                    <p style={{ color: colors.text.secondary, lineHeight: '1.5' }}>
-                      Controls how many times each question is sent to the AI to generate an answer. For example, setting this to 3 means the AI answers each question 3 separate times — helpful for checking if the AI gives consistent and reliable responses each time.
+                    <div
+                      className="font-semibold mb-1"
+                      style={{ color: colors.text.primary }}
+                    >
+                      Duplication Factor
+                    </div>
+                    <p
+                      style={{
+                        color: colors.text.secondary,
+                        lineHeight: "1.5",
+                      }}
+                    >
+                      Controls how many times each question is sent to the AI to
+                      generate an answer. For example, setting this to 3 means
+                      the AI answers each question 3 separate times — helpful
+                      for checking if the AI gives consistent and reliable
+                      responses each time.
                     </p>
                   </div>
                 )}
@@ -262,19 +348,28 @@ export default function DatasetsTab({
             </label>
             <select
               value={duplicationFactor}
-              onChange={e => setDuplicationFactor(e.target.value)}
+              onChange={(e) => setDuplicationFactor(e.target.value)}
               className="w-full px-3 py-2 border rounded-md text-sm"
-              style={{ backgroundColor: colors.bg.primary, borderColor: colors.border, color: colors.text.primary }}
+              style={{
+                backgroundColor: colors.bg.primary,
+                borderColor: colors.border,
+                color: colors.text.primary,
+              }}
             >
-              {[1, 2, 3, 4, 5].map(n => (
-                <option key={n} value={String(n)}>{n}</option>
+              {[1, 2, 3, 4, 5].map((n) => (
+                <option key={n} value={String(n)}>
+                  {n}
+                </option>
               ))}
             </select>
           </div>
 
           {/* CSV Upload */}
           <div>
-            <label className="block text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
+            <label
+              className="block text-xs font-medium mb-1.5"
+              style={{ color: colors.text.secondary }}
+            >
               Upload CSV *
             </label>
 
@@ -287,15 +382,37 @@ export default function DatasetsTab({
             />
 
             {uploadedFile ? (
-              <div className="rounded-lg p-3" style={{ backgroundColor: colors.bg.secondary }}>
+              <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
+                      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 }}>
+                      <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>
@@ -303,35 +420,72 @@ export default function DatasetsTab({
                   <button
                     onClick={() => {
                       onRemoveFile();
-                      if (fileInputRef.current) fileInputRef.current.value = '';
+                      if (fileInputRef.current) fileInputRef.current.value = "";
                     }}
                     className="p-1 rounded"
                     style={{ color: colors.text.secondary }}
                     aria-label="Remove file"
                   >
-                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                    <svg
+                      className="w-4 h-4"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M6 18L18 6M6 6l12 12"
+                      />
                     </svg>
                   </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 }}
+                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); }}
+                onDragOver={(e) => {
+                  e.preventDefault();
+                  setIsDragging(true);
+                }}
                 onDragLeave={() => setIsDragging(false)}
                 onDrop={handleDrop}
               >
-                <svg className="mx-auto h-8 w-8 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: colors.border }}>
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                <svg
+                  className="mx-auto h-8 w-8 mb-2"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  style={{ color: colors.border }}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={1.5}
+                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                  />
                 </svg>
-                <p className="text-sm font-medium mb-1" style={{ color: colors.text.primary }}>
+                <p
+                  className="text-sm font-medium mb-1"
+                  style={{ color: colors.text.primary }}
+                >
                   Drop CSV here, or click to browse
                 </p>
                 <p className="text-xs" style={{ color: colors.text.secondary }}>
-                  Format: <span className="font-mono" style={{ color: colors.text.primary }}>question,answer</span>
+                  Format:{" "}
+                  <span
+                    className="font-mono"
+                    style={{ color: colors.text.primary }}
+                  >
+                    question,answer
+                  </span>
                 </p>
               </div>
             )}
@@ -339,7 +493,13 @@ export default function DatasetsTab({
         </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 }}>
+        <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"
@@ -352,39 +512,78 @@ export default function DatasetsTab({
             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',
+              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' }} />
+                <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'
+              "Create Dataset"
             )}
           </button>
         </div>
       </div>
 
       {/* Right Panel - Dataset List */}
-      <div className="flex-1 flex flex-col overflow-hidden" style={{ backgroundColor: colors.bg.secondary }}>
+      <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 }}>
+            <h3
+              className="text-base font-semibold"
+              style={{ color: colors.text.primary }}
+            >
               Datasets
             </h3>
           </div>
 
           {storedDatasets.length === 0 ? (
             <div className="p-16 text-center">
-              <svg className="w-12 h-12 mx-auto mb-3" style={{ color: colors.border }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 7v10c0 2 3.6 3 8 3s8-1 8-3V7M4 7c0 2 3.6 3 8 3s8-1 8-3M4 7c0-2 3.6-3 8-3s8 1 8 3M4 12c0 2 3.6 3 8 3s8-1 8-3" />
+              <svg
+                className="w-12 h-12 mx-auto mb-3"
+                style={{ color: colors.border }}
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={1.5}
+                  d="M4 7v10c0 2 3.6 3 8 3s8-1 8-3V7M4 7c0 2 3.6 3 8 3s8-1 8-3M4 7c0-2 3.6-3 8-3s8 1 8 3M4 12c0 2 3.6 3 8 3s8-1 8-3"
+                />
               </svg>
-              <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>
+              <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">
@@ -394,53 +593,75 @@ export default function DatasetsTab({
                   className="rounded-lg overflow-hidden"
                   style={{
                     backgroundColor: colors.bg.primary,
-                    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.04)',
-                    borderLeft: '3px solid #DCCFC3',
+                    boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
+                    borderLeft: "3px solid #DCCFC3",
                   }}
                 >
                   <div className="px-5 py-4">
                     <div className="flex items-start justify-between gap-4">
                       <div className="min-w-0 flex-1">
-                        <div className="text-sm font-semibold truncate" style={{ color: colors.text.primary }}>
+                        <div
+                          className="text-sm font-semibold truncate"
+                          style={{ color: colors.text.primary }}
+                        >
                           {dataset.dataset_name}
                         </div>
                         {dataset.description && (
-                          <EvalDatasetDescription description={dataset.description} />
+                          <EvalDatasetDescription
+                            description={dataset.description}
+                          />
                         )}
-                        <div className="flex items-center gap-3 mt-2 text-xs" style={{ color: colors.text.secondary }}>
+                        <div
+                          className="flex items-center gap-3 mt-2 text-xs"
+                          style={{ color: colors.text.secondary }}
+                        >
                           <span>{dataset.total_items} items</span>
                           {dataset.duplication_factor > 1 && (
                             <>
                               <span style={{ color: colors.border }}>·</span>
-                              <span>x{dataset.duplication_factor} duplication</span>
-                            </>
-                          )}
-                          {dataset.original_items > 0 && dataset.original_items !== dataset.total_items && (
-                            <>
-                              <span style={{ color: colors.border }}>·</span>
-                              <span>{dataset.original_items} original</span>
+                              <span>
+                                x{dataset.duplication_factor} duplication
+                              </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={() => handleViewDataset(dataset.dataset_id, dataset.dataset_name)}
+                          onClick={() =>
+                            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',
+                            backgroundColor: "transparent",
                             borderColor: colors.border,
                             color: colors.text.primary,
                             opacity: viewingId === dataset.dataset_id ? 0.5 : 1,
                           }}
                         >
-                          {viewingId === dataset.dataset_id ? 'Loading...' : 'View'}
+                          {viewingId === dataset.dataset_id
+                            ? "Loading..."
+                            : "View"}
                         </button>
                         <button
                           onClick={() => setConfirmDeleteId(dataset.dataset_id)}
                           className="px-3 py-1.5 rounded-lg text-xs font-medium border"
-                          style={{ backgroundColor: 'transparent', borderColor: colors.border, color: 'hsl(8, 86%, 40%)' }}
+                          style={{
+                            backgroundColor: "transparent",
+                            borderColor: colors.border,
+                            color: "hsl(8, 86%, 40%)",
+                          }}
                         >
                           Delete
                         </button>
@@ -458,29 +679,47 @@ export default function DatasetsTab({
       {viewModalData && (
         <div
           className="fixed inset-0 z-50 flex items-center justify-center"
-          style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+          style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
           onClick={() => setViewModalData(null)}
         >
           <div
             className="rounded-lg shadow-xl flex flex-col"
-            style={{ backgroundColor: colors.bg.primary, width: '80vw', maxWidth: '1000px', maxHeight: '80vh' }}
+            style={{
+              backgroundColor: colors.bg.primary,
+              width: "80vw",
+              maxWidth: "1000px",
+              maxHeight: "80vh",
+            }}
             onClick={(e) => e.stopPropagation()}
           >
             {/* Modal Header */}
-            <div className="flex items-center justify-between px-6 py-4 border-b flex-shrink-0" style={{ borderColor: colors.border }}>
+            <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 }}>
+                <h3
+                  className="text-sm font-semibold"
+                  style={{ color: colors.text.primary }}
+                >
                   {viewModalData.name}
                 </h3>
-                <p className="text-xs mt-0.5" style={{ color: colors.text.secondary }}>
-                  {viewModalData.rows.length} rows · {viewModalData.headers.length} columns
+                <p
+                  className="text-xs mt-0.5"
+                  style={{ color: colors.text.secondary }}
+                >
+                  {viewModalData.rows.length} rows ·{" "}
+                  {viewModalData.headers.length} columns
                 </p>
               </div>
               <div className="flex items-center gap-2">
                 <button
                   onClick={handleDownloadFromModal}
                   className="px-3 py-1.5 rounded-md text-xs font-medium"
-                  style={{ backgroundColor: colors.accent.primary, color: '#ffffff' }}
+                  style={{
+                    backgroundColor: colors.accent.primary,
+                    color: "#ffffff",
+                  }}
                 >
                   Download CSV
                 </button>
@@ -490,8 +729,18 @@ export default function DatasetsTab({
                   style={{ color: colors.text.secondary }}
                   aria-label="Close modal"
                 >
-                  <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                  <svg
+                    className="w-5 h-5"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M6 18L18 6M6 6l12 12"
+                    />
                   </svg>
                 </button>
               </div>
@@ -501,11 +750,29 @@ export default function DatasetsTab({
             <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>
+                  <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>
                     {viewModalData.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 }}>
+                      <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>
                     ))}
@@ -513,14 +780,35 @@ export default function DatasetsTab({
                 </thead>
                 <tbody>
                   {viewModalData.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 }}>
+                    <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>}
+                        <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>
                       ))}
@@ -534,57 +822,98 @@ export default function DatasetsTab({
       )}
 
       {/* Delete Confirmation Modal */}
-      {confirmDeleteId !== null && (() => {
-        const dataset = storedDatasets.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)}
-          >
+      {confirmDeleteId !== null &&
+        (() => {
+          const dataset = storedDatasets.find(
+            (d) => d.dataset_id === confirmDeleteId,
+          );
+          return (
             <div
-              className="rounded-lg shadow-xl w-full max-w-md"
-              style={{ backgroundColor: colors.bg.primary }}
-              onClick={(e) => e.stopPropagation()}
+              className="fixed inset-0 z-50 flex items-center justify-center"
+              style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
+              onClick={() => setConfirmDeleteId(null)}
             >
-              <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)' }}>
-                    <svg className="w-5 h-5" style={{ color: 'hsl(8, 86%, 40%)' }} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                      <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01M5.07 19h13.86c1.54 0 2.5-1.67 1.73-3L13.73 4c-.77-1.33-2.69-1.33-3.46 0L3.34 16c-.77 1.33.19 3 1.73 3z" />
-                    </svg>
-                  </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
+                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)" }}
+                    >
+                      <svg
+                        className="w-5 h-5"
+                        style={{ color: "hsl(8, 86%, 40%)" }}
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        strokeWidth={2}
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          d="M12 9v2m0 4h.01M5.07 19h13.86c1.54 0 2.5-1.67 1.73-3L13.73 4c-.77-1.33-2.69-1.33-3.46 0L3.34 16c-.77 1.33.19 3 1.73 3z"
+                        />
+                      </svg>
+                    </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>
-              <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 }}
+                <div
+                  className="flex items-center justify-end gap-3 px-6 py-4 border-t"
+                  style={{ borderColor: colors.border }}
                 >
-                  {deletingId === confirmDeleteId ? 'Deleting...' : 'Delete'}
-                </button>
+                  <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>
-        );
-      })()}
+          );
+        })()}
     </div>
   );
 }
diff --git a/app/components/evaluations/EvalDatasetDescription.tsx b/app/components/evaluations/EvalDatasetDescription.tsx
index 76c9f01..4579101 100644
--- a/app/components/evaluations/EvalDatasetDescription.tsx
+++ b/app/components/evaluations/EvalDatasetDescription.tsx
@@ -1,28 +1,38 @@
-"use client"
+"use client";
 
-import { useState } from 'react';
-import { colors } from '@/app/lib/colors';
+import { useState } from "react";
+import { colors } from "@/app/lib/colors";
 
 const EVAL_DESCRIPTION_CHAR_LIMIT = 100;
 
-export default function EvalDatasetDescription({ description }: { description: string }) {
+export default function EvalDatasetDescription({
+  description,
+}: {
+  description: string;
+}) {
   const [expanded, setExpanded] = useState(false);
   const isLong = description.length > EVAL_DESCRIPTION_CHAR_LIMIT;
 
   return (
-    <div className="mt-2 text-xs leading-relaxed break-words overflow-hidden" style={{ color: colors.text.secondary }}>
+    <div
+      className="mt-2 text-xs leading-relaxed break-words overflow-hidden"
+      style={{ color: colors.text.secondary }}
+    >
       <span>
         {isLong && !expanded
-          ? description.slice(0, EVAL_DESCRIPTION_CHAR_LIMIT).trimEnd() + '...'
+          ? description.slice(0, EVAL_DESCRIPTION_CHAR_LIMIT).trimEnd() + "..."
           : description}
       </span>
       {isLong && (
         <button
-          onClick={(e) => { e.stopPropagation(); setExpanded(!expanded); }}
+          onClick={(e) => {
+            e.stopPropagation();
+            setExpanded(!expanded);
+          }}
           className="mt-1 block text-xs font-medium"
           style={{ color: colors.text.primary }}
         >
-          {expanded ? 'Show less' : 'Read more'}
+          {expanded ? "Show less" : "Read more"}
         </button>
       )}
     </div>
diff --git a/app/components/evaluations/EvalRunCard.tsx b/app/components/evaluations/EvalRunCard.tsx
index 606bf38..c50db96 100644
--- a/app/components/evaluations/EvalRunCard.tsx
+++ b/app/components/evaluations/EvalRunCard.tsx
@@ -1,33 +1,40 @@
-"use client"
+"use client";
 
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { colors } from '@/app/lib/colors';
-import { EvalJob, AssistantConfig, getScoreObject } from '@/app/components/types';
-import { getStatusColor } from '@/app/components/utils';
-import { timeAgo } from '@/app/lib/utils';
-import ConfigModal from '@/app/components/ConfigModal';
-import ScoreDisplay from '@/app/components/ScoreDisplay';
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { colors } from "@/app/lib/colors";
+import {
+  EvalJob,
+  AssistantConfig,
+  getScoreObject,
+} from "@/app/components/types";
+import { getStatusColor } from "@/app/components/utils";
+import { timeAgo } from "@/app/lib/utils";
+import ConfigModal from "@/app/components/ConfigModal";
+import ScoreDisplay from "@/app/components/ScoreDisplay";
 
 export interface EvalRunCardProps {
   job: EvalJob;
   assistantConfig?: AssistantConfig;
 }
 
-export default function EvalRunCard({ job, assistantConfig }: EvalRunCardProps) {
+export default function EvalRunCard({
+  job,
+  assistantConfig,
+}: EvalRunCardProps) {
   const router = useRouter();
   const [isConfigModalOpen, setIsConfigModalOpen] = useState(false);
 
-  const isCompleted = job.status?.toLowerCase() === 'completed';
+  const isCompleted = job.status?.toLowerCase() === "completed";
   const scoreObj = getScoreObject(job);
-  const statusColor = getStatusColor(job.status || '');
+  const statusColor = getStatusColor(job.status || "");
 
   return (
     <div
       className="rounded-lg overflow-hidden"
       style={{
         backgroundColor: colors.bg.primary,
-        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.04)',
+        boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
         borderLeft: `3px solid ${statusColor.border}`,
       }}
     >
@@ -35,17 +42,26 @@ export default function EvalRunCard({ job, assistantConfig }: EvalRunCardProps)
         {/* Row 1: Run Name (left) | Status (right) */}
         <div className="flex items-start justify-between gap-4">
           <div className="min-w-0 flex-1">
-            <div className="text-sm font-semibold truncate" style={{ color: colors.text.primary }}>
+            <div
+              className="text-sm font-semibold truncate"
+              style={{ color: colors.text.primary }}
+            >
               {job.run_name}
             </div>
             {job.inserted_at && (
-              <div className="text-xs mt-0.5" style={{ color: colors.text.secondary }}>
+              <div
+                className="text-xs mt-0.5"
+                style={{ color: colors.text.secondary }}
+              >
                 {timeAgo(job.inserted_at)}
               </div>
             )}
             {/* Error message (if failed) */}
             {job.error_message && (
-              <div className="mt-2 text-xs break-words overflow-hidden" style={{ color: 'hsl(8, 86%, 40%)' }}>
+              <div
+                className="mt-2 text-xs break-words overflow-hidden"
+                style={{ color: "hsl(8, 86%, 40%)" }}
+              >
                 {job.error_message}
               </div>
             )}
@@ -67,17 +83,33 @@ export default function EvalRunCard({ job, assistantConfig }: EvalRunCardProps)
 
         {/* Row 3: Dataset + Config (left) | Actions (right) */}
         <div className="flex items-center justify-between gap-4 mt-3">
-          <div className="flex items-center gap-3 text-xs" style={{ color: colors.text.secondary }}>
+          <div
+            className="flex items-center gap-3 text-xs"
+            style={{ color: colors.text.secondary }}
+          >
             {job.dataset_name && (
               <span className="flex items-center gap-1.5">
-                <svg className="w-3.5 h-3.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M4 7v10c0 2 3.6 3 8 3s8-1 8-3V7M4 7c0 2 3.6 3 8 3s8-1 8-3M4 7c0-2 3.6-3 8-3s8 1 8 3M4 12c0 2 3.6 3 8 3s8-1 8-3" />
+                <svg
+                  className="w-3.5 h-3.5 flex-shrink-0"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M4 7v10c0 2 3.6 3 8 3s8-1 8-3V7M4 7c0 2 3.6 3 8 3s8-1 8-3M4 7c0-2 3.6-3 8-3s8 1 8 3M4 12c0 2 3.6 3 8 3s8-1 8-3"
+                  />
                 </svg>
                 {job.dataset_name}
               </span>
             )}
             {job.assistant_id && assistantConfig?.name && (
-              <span className="px-1.5 py-0.5 rounded" style={{ backgroundColor: colors.bg.secondary }}>
+              <span
+                className="px-1.5 py-0.5 rounded"
+                style={{ backgroundColor: colors.bg.secondary }}
+              >
                 {assistantConfig.name}
               </span>
             )}
@@ -87,7 +119,7 @@ export default function EvalRunCard({ job, assistantConfig }: EvalRunCardProps)
               onClick={() => setIsConfigModalOpen(true)}
               className="px-3 py-1.5 rounded-lg text-xs font-medium border"
               style={{
-                backgroundColor: 'transparent',
+                backgroundColor: "transparent",
                 borderColor: colors.border,
                 color: colors.text.primary,
               }}
@@ -99,9 +131,11 @@ export default function EvalRunCard({ job, assistantConfig }: EvalRunCardProps)
               disabled={!isCompleted}
               className="px-3 py-1.5 rounded-lg text-xs font-medium border cursor-pointer disabled:cursor-not-allowed"
               style={{
-                backgroundColor: 'transparent',
+                backgroundColor: "transparent",
                 borderColor: colors.border,
-                color: isCompleted ? colors.text.primary : colors.text.secondary,
+                color: isCompleted
+                  ? colors.text.primary
+                  : colors.text.secondary,
                 opacity: isCompleted ? 1 : 0.5,
               }}
             >
diff --git a/app/components/evaluations/EvaluationsTab.tsx b/app/components/evaluations/EvaluationsTab.tsx
index 63e0b01..68ed5cb 100644
--- a/app/components/evaluations/EvaluationsTab.tsx
+++ b/app/components/evaluations/EvaluationsTab.tsx
@@ -1,16 +1,16 @@
-"use client"
+"use client";
 
-import { useState, useEffect, useCallback } from 'react';
-import { colors } from '@/app/lib/colors';
-import { APIKey } from '@/app/keystore/page';
-import { Dataset } from '@/app/datasets/page';
-import { EvalJob, AssistantConfig } from '@/app/components/types';
-import ConfigSelector from '@/app/components/ConfigSelector';
-import Loader from '@/app/components/Loader';
-import EvalRunCard from './EvalRunCard';
-import EvalDatasetDescription from './EvalDatasetDescription';
+import { useState, useEffect, useCallback } from "react";
+import { colors } from "@/app/lib/colors";
+import { APIKey } from "@/app/keystore/page";
+import { Dataset } from "@/app/datasets/page";
+import { EvalJob, AssistantConfig } from "@/app/components/types";
+import ConfigSelector from "@/app/components/ConfigSelector";
+import Loader from "@/app/components/Loader";
+import EvalRunCard from "./EvalRunCard";
+import EvalDatasetDescription from "./EvalDatasetDescription";
 
-type Tab = 'datasets' | 'evaluations';
+type Tab = "datasets" | "evaluations";
 
 export interface EvaluationsTabProps {
   leftPanelWidth: number;
@@ -48,21 +48,30 @@ export default function EvaluationsTab({
   const [evalJobs, setEvalJobs] = useState<EvalJob[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [assistantConfigs, setAssistantConfigs] = useState<Map<string, AssistantConfig>>(new Map());
-  const [statusFilter, setStatusFilter] = useState<string>('all');
+  const [assistantConfigs, setAssistantConfigs] = useState<
+    Map<string, AssistantConfig>
+  >(new Map());
+  const [statusFilter, setStatusFilter] = useState<string>("all");
 
-  const selectedDataset = storedDatasets.find(d => d.dataset_id.toString() === selectedDatasetId);
-  const canRun = experimentName.trim() && selectedDatasetId && selectedConfigId && selectedConfigVersion && !isEvaluating;
+  const selectedDataset = storedDatasets.find(
+    (d) => d.dataset_id.toString() === selectedDatasetId,
+  );
+  const canRun =
+    experimentName.trim() &&
+    selectedDatasetId &&
+    selectedConfigId &&
+    selectedConfigVersion &&
+    !isEvaluating;
 
   // Fetch evaluation jobs
   const fetchEvaluations = useCallback(async () => {
     if (!selectedKeyId) {
-      setError('Please select an API key first');
+      setError("Please select an API key first");
       return;
     }
-    const selectedKey = apiKeys.find(k => k.id === selectedKeyId);
+    const selectedKey = apiKeys.find((k) => k.id === selectedKeyId);
     if (!selectedKey) {
-      setError('Selected API key not found');
+      setError("Selected API key not found");
       return;
     }
 
@@ -70,46 +79,60 @@ export default function EvaluationsTab({
     setError(null);
 
     try {
-      const response = await fetch('/api/evaluations', {
-        method: 'GET',
-        headers: { 'X-API-KEY': selectedKey.key },
+      const response = await fetch("/api/evaluations", {
+        method: "GET",
+        headers: { "X-API-KEY": selectedKey.key },
       });
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || errorData.message || `Failed to fetch evaluations: ${response.status}`);
+        throw new Error(
+          errorData.error ||
+            errorData.message ||
+            `Failed to fetch evaluations: ${response.status}`,
+        );
       }
       const data = await response.json();
-      setEvalJobs(Array.isArray(data) ? data : (data.data || []));
+      setEvalJobs(Array.isArray(data) ? data : data.data || []);
     } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : 'Failed to fetch evaluation jobs');
+      setError(
+        err instanceof Error ? err.message : "Failed to fetch evaluation jobs",
+      );
     } finally {
       setIsLoading(false);
     }
   }, [apiKeys, selectedKeyId]);
 
   // Fetch assistant config
-  const fetchAssistantConfig = useCallback(async (assistantId: string) => {
-    if (!selectedKeyId) return;
-    const selectedKey = apiKeys.find(k => k.id === selectedKeyId);
-    if (!selectedKey) return;
+  const fetchAssistantConfig = useCallback(
+    async (assistantId: string) => {
+      if (!selectedKeyId) return;
+      const selectedKey = apiKeys.find((k) => k.id === selectedKeyId);
+      if (!selectedKey) return;
 
-    try {
-      const response = await fetch(`/api/assistant/${assistantId}`, {
-        method: 'GET',
-        headers: { 'X-API-KEY': selectedKey.key },
-      });
-      if (!response.ok) return;
-      const result = await response.json();
-      if (result.success && result.data) {
-        setAssistantConfigs(prev => new Map(prev).set(assistantId, result.data));
+      try {
+        const response = await fetch(`/api/assistant/${assistantId}`, {
+          method: "GET",
+          headers: { "X-API-KEY": selectedKey.key },
+        });
+        if (!response.ok) return;
+        const result = await response.json();
+        if (result.success && result.data) {
+          setAssistantConfigs((prev) =>
+            new Map(prev).set(assistantId, result.data),
+          );
+        }
+      } catch (err) {
+        console.error(
+          `Failed to fetch assistant config for ${assistantId}:`,
+          err,
+        );
       }
-    } catch (err) {
-      console.error(`Failed to fetch assistant config for ${assistantId}:`, err);
-    }
-  }, [apiKeys, selectedKeyId]);
+    },
+    [apiKeys, selectedKeyId],
+  );
 
   useEffect(() => {
-    evalJobs.forEach(job => {
+    evalJobs.forEach((job) => {
       if (job.assistant_id && !assistantConfigs.has(job.assistant_id)) {
         fetchAssistantConfig(job.assistant_id);
       }
@@ -125,33 +148,48 @@ export default function EvaluationsTab({
       {/* Left Panel - Configuration */}
       <div
         className="flex-shrink-0 border-r flex flex-col overflow-hidden"
-        style={{ width: `${leftPanelWidth}px`, backgroundColor: colors.bg.primary, borderColor: colors.border }}
+        style={{
+          width: `${leftPanelWidth}px`,
+          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 }}>
+            <h2
+              className="text-base font-semibold"
+              style={{ color: colors.text.primary }}
+            >
               Run New Evaluation
             </h2>
-            <p className="text-xs mt-0.5" style={{ color: colors.text.secondary }}>
+            <p
+              className="text-xs mt-0.5"
+              style={{ color: colors.text.secondary }}
+            >
               Test model responses against your golden datasets
             </p>
           </div>
 
           {/* Evaluation Name */}
           <div>
-            <label className="block text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
+            <label
+              className="block text-xs font-medium mb-1.5"
+              style={{ color: colors.text.secondary }}
+            >
               Name *
             </label>
             <input
               type="text"
               value={experimentName}
-              onChange={e => setExperimentName(e.target.value)}
+              onChange={(e) => setExperimentName(e.target.value)}
               placeholder="e.g., test_run_1"
               disabled={isEvaluating}
               className="w-full px-3 py-2 border rounded-md text-sm"
               style={{
-                backgroundColor: isEvaluating ? colors.bg.secondary : colors.bg.primary,
+                backgroundColor: isEvaluating
+                  ? colors.bg.secondary
+                  : colors.bg.primary,
                 borderColor: colors.border,
                 color: colors.text.primary,
               }}
@@ -171,16 +209,27 @@ export default function EvaluationsTab({
 
           {/* Dataset Selection */}
           <div className="pt-2">
-            <label className="block text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
+            <label
+              className="block text-xs font-medium mb-1.5"
+              style={{ color: colors.text.secondary }}
+            >
               Select Dataset *
             </label>
             {storedDatasets.length === 0 ? (
-              <div className="border rounded-md p-8 text-center" style={{ borderColor: colors.border }}>
-                <p className="text-sm" style={{ color: colors.text.secondary }}>No datasets available</p>
-                <p className="text-xs mt-1" style={{ color: colors.text.secondary }}>
-                  Create a dataset first in the{' '}
+              <div
+                className="border rounded-md p-8 text-center"
+                style={{ borderColor: colors.border }}
+              >
+                <p className="text-sm" style={{ color: colors.text.secondary }}>
+                  No datasets available
+                </p>
+                <p
+                  className="text-xs mt-1"
+                  style={{ color: colors.text.secondary }}
+                >
+                  Create a dataset first in the{" "}
                   <button
-                    onClick={() => setActiveTab('datasets')}
+                    onClick={() => setActiveTab("datasets")}
                     className="underline"
                     style={{ color: colors.accent.primary }}
                   >
@@ -192,16 +241,18 @@ export default function EvaluationsTab({
               <div className="relative">
                 <select
                   value={selectedDatasetId}
-                  onChange={e => setSelectedDatasetId(e.target.value)}
+                  onChange={(e) => setSelectedDatasetId(e.target.value)}
                   className="w-full px-3 py-2 border rounded-md text-sm appearance-none pr-8"
                   style={{
                     backgroundColor: colors.bg.primary,
                     borderColor: colors.border,
-                    color: selectedDatasetId ? colors.text.primary : colors.text.secondary,
+                    color: selectedDatasetId
+                      ? colors.text.primary
+                      : colors.text.secondary,
                   }}
                 >
                   <option value="">-- Select a dataset --</option>
-                  {storedDatasets.map(dataset => (
+                  {storedDatasets.map((dataset) => (
                     <option key={dataset.dataset_id} value={dataset.dataset_id}>
                       {dataset.dataset_name} ({dataset.total_items} items)
                     </option>
@@ -214,7 +265,12 @@ export default function EvaluationsTab({
                   viewBox="0 0 24 24"
                   stroke="currentColor"
                 >
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M19 9l-7 7-7-7"
+                  />
                 </svg>
               </div>
             )}
@@ -222,20 +278,46 @@ export default function EvaluationsTab({
 
           {/* Selected Dataset Info */}
           {selectedDataset && (
-            <div className="border rounded-lg p-3" style={{ borderColor: colors.status.success, backgroundColor: 'rgba(22, 163, 74, 0.02)' }}>
+            <div
+              className="border rounded-lg p-3"
+              style={{
+                borderColor: colors.status.success,
+                backgroundColor: "rgba(22, 163, 74, 0.02)",
+              }}
+            >
               <div className="flex items-start gap-2">
-                <svg className="w-5 h-5 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: colors.status.success }}>
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                <svg
+                  className="w-5 h-5 flex-shrink-0 mt-0.5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  style={{ color: colors.status.success }}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
                 </svg>
                 <div className="flex-1">
-                  <div className="text-sm font-medium" style={{ color: colors.text.primary }}>
+                  <div
+                    className="text-sm font-medium"
+                    style={{ color: colors.text.primary }}
+                  >
                     {selectedDataset.dataset_name}
                   </div>
                   {selectedDataset.description && (
-                    <EvalDatasetDescription description={selectedDataset.description} />
+                    <EvalDatasetDescription
+                      description={selectedDataset.description}
+                    />
                   )}
-                  <div className="text-xs mt-1" style={{ color: colors.text.secondary }}>
-                    {selectedDataset.total_items} items · x{selectedDataset.duplication_factor} duplication
+                  <div
+                    className="text-xs mt-1"
+                    style={{ color: colors.text.secondary }}
+                  >
+                    {selectedDataset.total_items} items · x
+                    {selectedDataset.duplication_factor} duplication
                   </div>
                 </div>
               </div>
@@ -244,7 +326,13 @@ export default function EvaluationsTab({
         </div>
 
         {/* Run Evaluation Button */}
-        <div className="flex-shrink-0 border-t px-4 py-3" style={{ borderColor: colors.border, backgroundColor: colors.bg.primary }}>
+        <div
+          className="flex-shrink-0 border-t px-4 py-3"
+          style={{
+            borderColor: colors.border,
+            backgroundColor: colors.bg.primary,
+          }}
+        >
           <button
             onClick={async () => {
               const success = await handleRunEvaluation();
@@ -253,19 +341,31 @@ export default function EvaluationsTab({
             disabled={!canRun}
             className="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium"
             style={{
-              backgroundColor: canRun ? colors.accent.primary : colors.bg.secondary,
-              color: canRun ? '#fff' : colors.text.secondary,
-              cursor: canRun ? 'pointer' : 'not-allowed',
+              backgroundColor: canRun
+                ? colors.accent.primary
+                : colors.bg.secondary,
+              color: canRun ? "#fff" : colors.text.secondary,
+              cursor: canRun ? "pointer" : "not-allowed",
             }}
           >
             {isEvaluating ? (
               <>
-                <div className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin" style={{ borderColor: colors.text.secondary, borderTopColor: 'transparent' }} />
+                <div
+                  className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
+                  style={{
+                    borderColor: colors.text.secondary,
+                    borderTopColor: "transparent",
+                  }}
+                />
                 Running Evaluation...
               </>
             ) : (
               <>
-                <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                <svg
+                  className="w-5 h-5"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                >
                   <path d="M8 5v14l11-7z" />
                 </svg>
                 Run Evaluation
@@ -276,11 +376,17 @@ export default function EvaluationsTab({
       </div>
 
       {/* Right Panel - Evaluation Runs */}
-      <div className="flex-1 flex flex-col overflow-hidden" style={{ backgroundColor: colors.bg.secondary }}>
+      <div
+        className="flex-1 flex flex-col overflow-hidden"
+        style={{ backgroundColor: colors.bg.secondary }}
+      >
         <div className="flex-1 overflow-auto p-4">
           {/* Header */}
           <div className="mb-4 flex items-center justify-between">
-            <h2 className="text-base font-semibold" style={{ color: colors.text.primary }}>
+            <h2
+              className="text-base font-semibold"
+              style={{ color: colors.text.primary }}
+            >
               Evaluation Runs
             </h2>
             <div className="flex items-center gap-2">
@@ -293,8 +399,8 @@ export default function EvaluationsTab({
                   borderColor: colors.border,
                   color: colors.text.primary,
                   backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")`,
-                  backgroundRepeat: 'no-repeat',
-                  backgroundPosition: 'right 6px center',
+                  backgroundRepeat: "no-repeat",
+                  backgroundPosition: "right 6px center",
                 }}
               >
                 <option value="all">All Status</option>
@@ -311,18 +417,29 @@ export default function EvaluationsTab({
                 aria-label="Refresh evaluations"
               >
                 <svg
-                  className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`}
+                  className={`w-4 h-4 ${isLoading ? "animate-spin" : ""}`}
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
                 >
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                  />
                 </svg>
               </button>
             </div>
           </div>
 
-          <div className="rounded-lg overflow-visible" style={{ backgroundColor: colors.bg.primary, boxShadow: '0 1px 3px rgba(0, 0, 0, 0.04)' }}>
+          <div
+            className="rounded-lg overflow-visible"
+            style={{
+              backgroundColor: colors.bg.primary,
+              boxShadow: "0 1px 3px rgba(0, 0, 0, 0.04)",
+            }}
+          >
             {/* Loading */}
             {isLoading && evalJobs.length === 0 && (
               <div className="p-16">
@@ -333,8 +450,13 @@ export default function EvaluationsTab({
             {/* Error */}
             {error && (
               <div className="p-4">
-                <div className="rounded-lg p-3" style={{ backgroundColor: 'hsl(8, 86%, 95%)' }}>
-                  <p className="text-sm" style={{ color: 'hsl(8, 86%, 40%)' }}>Error: {error}</p>
+                <div
+                  className="rounded-lg p-3"
+                  style={{ backgroundColor: "hsl(8, 86%, 95%)" }}
+                >
+                  <p className="text-sm" style={{ color: "hsl(8, 86%, 40%)" }}>
+                    Error: {error}
+                  </p>
                 </div>
               </div>
             )}
@@ -342,36 +464,73 @@ export default function EvaluationsTab({
             {/* Empty State */}
             {!isLoading && evalJobs.length === 0 && !error && (
               <div className="p-16 text-center">
-                <svg className="w-12 h-12 mx-auto mb-3" style={{ color: colors.border }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
+                <svg
+                  className="w-12 h-12 mx-auto mb-3"
+                  style={{ color: colors.border }}
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={1.5}
+                    d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+                  />
                 </svg>
-                <p className="text-sm font-medium mb-1" style={{ color: colors.text.primary }}>No evaluation runs yet</p>
-                <p className="text-xs" style={{ color: colors.text.secondary }}>Select a dataset and configuration, then run your first evaluation</p>
+                <p
+                  className="text-sm font-medium mb-1"
+                  style={{ color: colors.text.primary }}
+                >
+                  No evaluation runs yet
+                </p>
+                <p className="text-xs" style={{ color: colors.text.secondary }}>
+                  Select a dataset and configuration, then run your first
+                  evaluation
+                </p>
               </div>
             )}
 
             {/* Runs List */}
-            {evalJobs.length > 0 && (() => {
-              const filteredJobs = statusFilter === 'all'
-                ? evalJobs
-                : evalJobs.filter(job => job.status.toLowerCase() === statusFilter);
-              return filteredJobs.length > 0 ? (
-                <div className="p-4 space-y-3">
-                  {filteredJobs.map((job) => (
-                    <EvalRunCard
-                      key={job.id}
-                      job={job}
-                      assistantConfig={job.assistant_id ? assistantConfigs.get(job.assistant_id) : undefined}
-                    />
-                  ))}
-                </div>
-              ) : (
-                <div className="p-16 text-center">
-                  <p className="text-sm font-medium mb-1" style={{ color: colors.text.primary }}>No {statusFilter} runs</p>
-                  <p className="text-xs" style={{ color: colors.text.secondary }}>No evaluation runs with status &quot;{statusFilter}&quot;</p>
-                </div>
-              );
-            })()}
+            {evalJobs.length > 0 &&
+              (() => {
+                const filteredJobs =
+                  statusFilter === "all"
+                    ? evalJobs
+                    : evalJobs.filter(
+                        (job) => job.status.toLowerCase() === statusFilter,
+                      );
+                return filteredJobs.length > 0 ? (
+                  <div className="p-4 space-y-3">
+                    {filteredJobs.map((job) => (
+                      <EvalRunCard
+                        key={job.id}
+                        job={job}
+                        assistantConfig={
+                          job.assistant_id
+                            ? assistantConfigs.get(job.assistant_id)
+                            : undefined
+                        }
+                      />
+                    ))}
+                  </div>
+                ) : (
+                  <div className="p-16 text-center">
+                    <p
+                      className="text-sm font-medium mb-1"
+                      style={{ color: colors.text.primary }}
+                    >
+                      No {statusFilter} runs
+                    </p>
+                    <p
+                      className="text-xs"
+                      style={{ color: colors.text.secondary }}
+                    >
+                      No evaluation runs with status &quot;{statusFilter}&quot;
+                    </p>
+                  </div>
+                );
+              })()}
           </div>
         </div>
       </div>
diff --git a/app/components/icons/evaluations/CheckIcon.tsx b/app/components/icons/evaluations/CheckIcon.tsx
index 4ffc20e..45baf4e 100644
--- a/app/components/icons/evaluations/CheckIcon.tsx
+++ b/app/components/icons/evaluations/CheckIcon.tsx
@@ -5,8 +5,17 @@ interface IconProps {
 
 export default function CheckIcon({ className, style }: IconProps) {
   return (
-    <svg className={className} fill="currentColor" viewBox="0 0 20 20" style={style}>
-      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+    <svg
+      className={className}
+      fill="currentColor"
+      viewBox="0 0 20 20"
+      style={style}
+    >
+      <path
+        fillRule="evenodd"
+        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+        clipRule="evenodd"
+      />
     </svg>
   );
 }
diff --git a/app/components/icons/evaluations/ChevronDownIcon.tsx b/app/components/icons/evaluations/ChevronDownIcon.tsx
index f4049e4..d0dca0c 100644
--- a/app/components/icons/evaluations/ChevronDownIcon.tsx
+++ b/app/components/icons/evaluations/ChevronDownIcon.tsx
@@ -5,7 +5,14 @@ interface IconProps {
 
 export default function ChevronDownIcon({ className, style }: IconProps) {
   return (
-    <svg className={`w-3.5 h-3.5 ${className ?? ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} style={style}>
+    <svg
+      className={`w-3.5 h-3.5 ${className ?? ""}`}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+      style={style}
+    >
       <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
     </svg>
   );
diff --git a/app/components/icons/evaluations/ChevronUpIcon.tsx b/app/components/icons/evaluations/ChevronUpIcon.tsx
index c2f3488..65ba80b 100644
--- a/app/components/icons/evaluations/ChevronUpIcon.tsx
+++ b/app/components/icons/evaluations/ChevronUpIcon.tsx
@@ -5,7 +5,14 @@ interface IconProps {
 
 export default function ChevronUpIcon({ className, style }: IconProps) {
   return (
-    <svg className={`w-3.5 h-3.5 ${className ?? ''}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} style={style}>
+    <svg
+      className={`w-3.5 h-3.5 ${className ?? ""}`}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2}
+      style={style}
+    >
       <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
     </svg>
   );
diff --git a/app/components/icons/evaluations/EditIcon.tsx b/app/components/icons/evaluations/EditIcon.tsx
index 51fb243..3936570 100644
--- a/app/components/icons/evaluations/EditIcon.tsx
+++ b/app/components/icons/evaluations/EditIcon.tsx
@@ -5,8 +5,19 @@ interface IconProps {
 
 export default function EditIcon({ className, style }: IconProps) {
   return (
-    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" style={style}>
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+    <svg
+      className={className}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      style={style}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+      />
     </svg>
   );
 }
diff --git a/app/components/icons/evaluations/GearIcon.tsx b/app/components/icons/evaluations/GearIcon.tsx
index cba5702..fdf69d6 100644
--- a/app/components/icons/evaluations/GearIcon.tsx
+++ b/app/components/icons/evaluations/GearIcon.tsx
@@ -5,9 +5,25 @@ interface IconProps {
 
 export default function GearIcon({ className, style }: IconProps) {
   return (
-    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" style={style}>
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    <svg
+      className={className}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      style={style}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+      />
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+      />
     </svg>
   );
 }
diff --git a/app/components/icons/index.tsx b/app/components/icons/index.tsx
index 92eba34..9167c71 100644
--- a/app/components/icons/index.tsx
+++ b/app/components/icons/index.tsx
@@ -1,6 +1,6 @@
 // Evaluations Icons
-export { default as ChevronUpIcon } from './evaluations/ChevronUpIcon';
-export { default as ChevronDownIcon } from './evaluations/ChevronDownIcon';
-export { default as EditIcon } from './evaluations/EditIcon';
-export { default as GearIcon } from './evaluations/GearIcon';
-export { default as CheckIcon } from './evaluations/CheckIcon';
+export { default as ChevronUpIcon } from "./evaluations/ChevronUpIcon";
+export { default as ChevronDownIcon } from "./evaluations/ChevronDownIcon";
+export { default as EditIcon } from "./evaluations/EditIcon";
+export { default as GearIcon } from "./evaluations/GearIcon";
+export { default as CheckIcon } from "./evaluations/CheckIcon";
diff --git a/app/components/prompt-editor/ABTestTab.tsx b/app/components/prompt-editor/ABTestTab.tsx
index 4ae00e2..a4d3c8e 100644
--- a/app/components/prompt-editor/ABTestTab.tsx
+++ b/app/components/prompt-editor/ABTestTab.tsx
@@ -1,6 +1,10 @@
-import React from 'react';
-import { colors } from '@/app/lib/colors';
-import { Config, Commit, LegacyVariant, TestResult } from '@/app/configurations/prompt-editor/types';
+import { colors } from "@/app/lib/colors";
+import {
+  Config,
+  Commit,
+  LegacyVariant,
+  TestResult,
+} from "@/app/configurations/prompt-editor/types";
 
 interface ABTestTabProps {
   variants: LegacyVariant[];
@@ -32,14 +36,18 @@ export default function ABTestTab({
       ...variants,
       {
         id: nextLetter,
-        configId: '',
-        commitId: '',
+        configId: "",
+        commitId: "",
         name: `Variant ${nextLetter}`,
       },
     ]);
   };
 
-  const updateVariant = (index: number, field: keyof LegacyVariant, value: string) => {
+  const updateVariant = (
+    index: number,
+    field: keyof LegacyVariant,
+    value: string,
+  ) => {
     const newVariants = [...variants];
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (newVariants[index] as any)[field] = value;
@@ -53,27 +61,27 @@ export default function ABTestTab({
   const getBestVariant = () => {
     if (!testResults || testResults.length === 0) return null;
     return testResults.reduce((best, current) =>
-      current.score > best.score ? current : best
+      current.score > best.score ? current : best,
     );
   };
 
   const bestVariant = getBestVariant();
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
       {/* Variants Configuration */}
       <div>
         <div
           style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginBottom: '12px',
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "12px",
           }}
         >
           <label
             style={{
-              fontSize: '12px',
+              fontSize: "12px",
               fontWeight: 600,
               color: colors.text.primary,
             }}
@@ -84,13 +92,13 @@ export default function ABTestTab({
             <button
               onClick={addVariant}
               style={{
-                padding: '4px 8px',
+                padding: "4px 8px",
                 backgroundColor: colors.accent.primary,
-                color: '#ffffff',
-                border: 'none',
-                borderRadius: '4px',
-                cursor: 'pointer',
-                fontSize: '11px',
+                color: "#ffffff",
+                border: "none",
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontSize: "11px",
               }}
             >
               + Add Variant
@@ -106,18 +114,18 @@ export default function ABTestTab({
             <div
               key={variant.id}
               style={{
-                padding: '12px',
+                padding: "12px",
                 border: `1px solid ${colors.border}`,
-                borderRadius: '6px',
-                marginBottom: '12px',
+                borderRadius: "6px",
+                marginBottom: "12px",
                 backgroundColor: colors.bg.secondary,
               }}
             >
               <div
                 style={{
-                  fontSize: '13px',
+                  fontSize: "13px",
                   fontWeight: 600,
-                  marginBottom: '8px',
+                  marginBottom: "8px",
                   color: colors.text.primary,
                 }}
               >
@@ -125,26 +133,28 @@ export default function ABTestTab({
               </div>
 
               {/* Config Dropdown */}
-              <div style={{ marginBottom: '8px' }}>
+              <div style={{ marginBottom: "8px" }}>
                 <label
                   style={{
-                    display: 'block',
-                    fontSize: '11px',
+                    display: "block",
+                    fontSize: "11px",
                     color: colors.text.secondary,
-                    marginBottom: '4px',
+                    marginBottom: "4px",
                   }}
                 >
                   Configuration
                 </label>
                 <select
                   value={variant.configId}
-                  onChange={(e) => updateVariant(index, 'configId', e.target.value)}
+                  onChange={(e) =>
+                    updateVariant(index, "configId", e.target.value)
+                  }
                   style={{
-                    width: '100%',
-                    padding: '6px',
+                    width: "100%",
+                    padding: "6px",
                     border: `1px solid ${colors.border}`,
-                    borderRadius: '4px',
-                    fontSize: '12px',
+                    borderRadius: "4px",
+                    fontSize: "12px",
                     backgroundColor: colors.bg.primary,
                   }}
                 >
@@ -158,26 +168,28 @@ export default function ABTestTab({
               </div>
 
               {/* Prompt Dropdown */}
-              <div style={{ marginBottom: '8px' }}>
+              <div style={{ marginBottom: "8px" }}>
                 <label
                   style={{
-                    display: 'block',
-                    fontSize: '11px',
+                    display: "block",
+                    fontSize: "11px",
                     color: colors.text.secondary,
-                    marginBottom: '4px',
+                    marginBottom: "4px",
                   }}
                 >
                   Prompt Version
                 </label>
                 <select
                   value={variant.commitId}
-                  onChange={(e) => updateVariant(index, 'commitId', e.target.value)}
+                  onChange={(e) =>
+                    updateVariant(index, "commitId", e.target.value)
+                  }
                   style={{
-                    width: '100%',
-                    padding: '6px',
+                    width: "100%",
+                    padding: "6px",
                     border: `1px solid ${colors.border}`,
-                    borderRadius: '4px',
-                    fontSize: '12px',
+                    borderRadius: "4px",
+                    fontSize: "12px",
                     backgroundColor: colors.bg.primary,
                   }}
                 >
@@ -194,24 +206,27 @@ export default function ABTestTab({
               {config && commit && (
                 <div
                   style={{
-                    padding: '8px',
+                    padding: "8px",
                     backgroundColor: colors.bg.primary,
-                    borderRadius: '4px',
-                    fontSize: '11px',
+                    borderRadius: "4px",
+                    fontSize: "11px",
                     color: colors.text.secondary,
                   }}
                 >
                   <div>
-                    <strong>Type:</strong> {config.config_blob.completion.type || 'text'}
+                    <strong>Type:</strong>{" "}
+                    {config.config_blob.completion.type || "text"}
                   </div>
                   <div>
-                    <strong>Model:</strong> {config.config_blob.completion.params.model}
+                    <strong>Model:</strong>{" "}
+                    {config.config_blob.completion.params.model}
                   </div>
                   <div>
-                    <strong>Temp:</strong> {config.config_blob.completion.params.temperature}
+                    <strong>Temp:</strong>{" "}
+                    {config.config_blob.completion.params.temperature}
                   </div>
-                  <div style={{ marginTop: '4px', fontStyle: 'italic' }}>
-                    {commit.content.split('\n')[0].substring(0, 50)}...
+                  <div style={{ marginTop: "4px", fontStyle: "italic" }}>
+                    {commit.content.split("\n")[0].substring(0, 50)}...
                   </div>
                 </div>
               )}
@@ -224,11 +239,11 @@ export default function ABTestTab({
       <div>
         <label
           style={{
-            display: 'block',
-            fontSize: '12px',
+            display: "block",
+            fontSize: "12px",
             fontWeight: 600,
             color: colors.text.primary,
-            marginBottom: '6px',
+            marginBottom: "6px",
           }}
         >
           Test Input
@@ -238,13 +253,13 @@ export default function ABTestTab({
           onChange={(e) => onTestInputChange(e.target.value)}
           placeholder="Enter test prompt..."
           style={{
-            width: '100%',
-            minHeight: '80px',
-            padding: '8px',
+            width: "100%",
+            minHeight: "80px",
+            padding: "8px",
             border: `1px solid ${colors.border}`,
-            borderRadius: '4px',
-            fontSize: '13px',
-            resize: 'vertical',
+            borderRadius: "4px",
+            fontSize: "13px",
+            resize: "vertical",
           }}
         />
       </div>
@@ -254,22 +269,23 @@ export default function ABTestTab({
         onClick={onRunTest}
         disabled={!testInput.trim() || isRunningTest}
         style={{
-          width: '100%',
-          padding: '12px',
+          width: "100%",
+          padding: "12px",
           backgroundColor:
             !testInput.trim() || isRunningTest
               ? colors.text.secondary
               : colors.status.success,
-          color: '#ffffff',
-          border: 'none',
-          borderRadius: '4px',
-          cursor: !testInput.trim() || isRunningTest ? 'not-allowed' : 'pointer',
-          fontSize: '14px',
+          color: "#ffffff",
+          border: "none",
+          borderRadius: "4px",
+          cursor:
+            !testInput.trim() || isRunningTest ? "not-allowed" : "pointer",
+          fontSize: "14px",
           fontWeight: 600,
           opacity: !testInput.trim() || isRunningTest ? 0.6 : 1,
         }}
       >
-        {isRunningTest ? 'Running Test...' : '▶ Run Test'}
+        {isRunningTest ? "Running Test..." : "▶ Run Test"}
       </button>
 
       {/* Results Section */}
@@ -277,11 +293,11 @@ export default function ABTestTab({
         <div>
           <label
             style={{
-              display: 'block',
-              fontSize: '12px',
+              display: "block",
+              fontSize: "12px",
               fontWeight: 600,
               color: colors.text.primary,
-              marginBottom: '12px',
+              marginBottom: "12px",
             }}
           >
             Results
@@ -291,12 +307,12 @@ export default function ABTestTab({
           {bestVariant && (
             <div
               style={{
-                padding: '12px',
-                backgroundColor: '#d1fae5',
+                padding: "12px",
+                backgroundColor: "#d1fae5",
                 border: `1px solid ${colors.status.success}`,
-                borderRadius: '6px',
-                marginBottom: '12px',
-                fontSize: '13px',
+                borderRadius: "6px",
+                marginBottom: "12px",
+                fontSize: "13px",
                 fontWeight: 600,
                 color: colors.status.success,
               }}
@@ -317,24 +333,24 @@ export default function ABTestTab({
                 <div
                   key={result.variantId}
                   style={{
-                    padding: '12px',
+                    padding: "12px",
                     border: `1px solid ${colors.border}`,
-                    borderRadius: '6px',
-                    marginBottom: '8px',
+                    borderRadius: "6px",
+                    marginBottom: "8px",
                     backgroundColor: colors.bg.primary,
                   }}
                 >
                   <div
                     style={{
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      alignItems: 'center',
-                      marginBottom: '6px',
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      marginBottom: "6px",
                     }}
                   >
                     <span
                       style={{
-                        fontSize: '13px',
+                        fontSize: "13px",
                         fontWeight: 600,
                         color: colors.text.primary,
                       }}
@@ -343,7 +359,7 @@ export default function ABTestTab({
                     </span>
                     <span
                       style={{
-                        fontSize: '14px',
+                        fontSize: "14px",
                         fontWeight: 600,
                         color: colors.accent.primary,
                       }}
@@ -354,9 +370,9 @@ export default function ABTestTab({
                   {config && commit && (
                     <div
                       style={{
-                        fontSize: '11px',
+                        fontSize: "11px",
                         color: colors.text.secondary,
-                        marginBottom: '4px',
+                        marginBottom: "4px",
                       }}
                     >
                       {config.name} • {commit.message}
@@ -364,7 +380,7 @@ export default function ABTestTab({
                   )}
                   <div
                     style={{
-                      fontSize: '11px',
+                      fontSize: "11px",
                       color: colors.text.secondary,
                     }}
                   >
diff --git a/app/components/prompt-editor/BranchModal.tsx b/app/components/prompt-editor/BranchModal.tsx
index b162152..9956e9d 100644
--- a/app/components/prompt-editor/BranchModal.tsx
+++ b/app/components/prompt-editor/BranchModal.tsx
@@ -1,5 +1,5 @@
-import { colors } from '@/app/lib/colors';
-import { UnifiedCommit } from '@/app/configurations/prompt-editor/types';
+import { colors } from "@/app/lib/colors";
+import { UnifiedCommit } from "@/app/configurations/prompt-editor/types";
 
 interface BranchModalProps {
   isOpen: boolean;
@@ -16,25 +16,38 @@ export default function BranchModal({
   newBranchName,
   onBranchNameChange,
   onCreate,
-  onClose
+  onClose,
 }: BranchModalProps) {
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 flex items-center justify-center" style={{
-      backgroundColor: 'rgba(0, 0, 0, 0.5)',
-      zIndex: 1000
-    }}>
-      <div className="rounded-lg p-6 shadow-xl" style={{
-        backgroundColor: colors.bg.primary,
-        width: '400px'
-      }}>
-        <h3 className="text-lg font-semibold mb-4" style={{ color: colors.text.primary }}>
+    <div
+      className="fixed inset-0 flex items-center justify-center"
+      style={{
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        zIndex: 1000,
+      }}
+    >
+      <div
+        className="rounded-lg p-6 shadow-xl"
+        style={{
+          backgroundColor: colors.bg.primary,
+          width: "400px",
+        }}
+      >
+        <h3
+          className="text-lg font-semibold mb-4"
+          style={{ color: colors.text.primary }}
+        >
           Create New Branch
         </h3>
         <div className="mb-4">
-          <label className="block text-sm mb-2" style={{ color: colors.text.secondary }}>
-            From: <strong>#{branchFromCommit?.id}</strong> - {branchFromCommit?.message}
+          <label
+            className="block text-sm mb-2"
+            style={{ color: colors.text.secondary }}
+          >
+            From: <strong>#{branchFromCommit?.id}</strong> -{" "}
+            {branchFromCommit?.message}
           </label>
           <input
             type="text"
@@ -45,9 +58,9 @@ export default function BranchModal({
             style={{
               border: `1px solid ${colors.border}`,
               backgroundColor: colors.bg.primary,
-              color: colors.text.primary
+              color: colors.text.primary,
             }}
-            onKeyDown={(e) => e.key === 'Enter' && onCreate()}
+            onKeyDown={(e) => e.key === "Enter" && onCreate()}
             autoFocus
           />
         </div>
@@ -59,11 +72,15 @@ export default function BranchModal({
               backgroundColor: colors.bg.secondary,
               color: colors.text.primary,
               border: `1px solid ${colors.border}`,
-              cursor: 'pointer',
-              transition: 'all 0.15s ease'
+              cursor: "pointer",
+              transition: "all 0.15s ease",
             }}
-            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = colors.bg.primary}
-            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = colors.bg.secondary}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = colors.bg.primary)
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = colors.bg.secondary)
+            }
           >
             Cancel
           </button>
@@ -73,12 +90,16 @@ export default function BranchModal({
             style={{
               backgroundColor: colors.accent.primary,
               color: colors.bg.primary,
-              border: 'none',
-              cursor: 'pointer',
-              transition: 'all 0.15s ease'
+              border: "none",
+              cursor: "pointer",
+              transition: "all 0.15s ease",
             }}
-            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = colors.accent.hover}
-            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = colors.accent.primary}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = colors.accent.hover)
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = colors.accent.primary)
+            }
           >
             Create
           </button>
diff --git a/app/components/prompt-editor/CommitNode.tsx b/app/components/prompt-editor/CommitNode.tsx
index 4bba20d..f61f006 100644
--- a/app/components/prompt-editor/CommitNode.tsx
+++ b/app/components/prompt-editor/CommitNode.tsx
@@ -1,7 +1,9 @@
-import React from 'react';
-import { colors } from '@/app/lib/colors';
-import { UnifiedCommit } from '@/app/configurations/prompt-editor/types';
-import { getUnifiedBranchColor, formatTime } from '@/app/configurations/prompt-editor/utils';
+import { colors } from "@/app/lib/colors";
+import { UnifiedCommit } from "@/app/configurations/prompt-editor/types";
+import {
+  getUnifiedBranchColor,
+  formatTime,
+} from "@/app/configurations/prompt-editor/utils";
 
 interface CommitNodeProps {
   commit: UnifiedCommit;
@@ -20,7 +22,7 @@ export default function CommitNode({
   depth,
   isLastChild,
   verticalLines,
-  onSelect
+  onSelect,
 }: CommitNodeProps) {
   const branchColor = getUnifiedBranchColor(commits, commit.branch);
   const isSelected = selectedCommit?.id === commit.id;
@@ -28,74 +30,106 @@ export default function CommitNode({
   return (
     <div className="flex items-start mb-1">
       {verticalLines.map((showLine, idx) => (
-        <div key={idx} className="relative" style={{ width: '28px', height: '36px' }}>
-          {showLine && <div className="absolute" style={{
-            left: '13px',
-            top: 0,
-            width: '2px',
-            height: '100%',
-            backgroundColor: colors.border
-          }} />}
+        <div
+          key={idx}
+          className="relative"
+          style={{ width: "28px", height: "36px" }}
+        >
+          {showLine && (
+            <div
+              className="absolute"
+              style={{
+                left: "13px",
+                top: 0,
+                width: "2px",
+                height: "100%",
+                backgroundColor: colors.border,
+              }}
+            />
+          )}
         </div>
       ))}
 
       {depth > 0 && (
-        <div className="relative" style={{ width: '28px', height: '36px' }}>
-          <div className="absolute" style={{
-            left: '13px',
-            top: 0,
-            width: '2px',
-            height: '18px',
-            backgroundColor: colors.border
-          }} />
-          <div className="absolute" style={{
-            left: '13px',
-            top: '18px',
-            width: '15px',
-            height: '2px',
-            backgroundColor: colors.border
-          }} />
-          {!isLastChild && <div className="absolute" style={{
-            left: '13px',
-            top: '18px',
-            width: '2px',
-            height: '18px',
-            backgroundColor: colors.border
-          }} />}
+        <div className="relative" style={{ width: "28px", height: "36px" }}>
+          <div
+            className="absolute"
+            style={{
+              left: "13px",
+              top: 0,
+              width: "2px",
+              height: "18px",
+              backgroundColor: colors.border,
+            }}
+          />
+          <div
+            className="absolute"
+            style={{
+              left: "13px",
+              top: "18px",
+              width: "15px",
+              height: "2px",
+              backgroundColor: colors.border,
+            }}
+          />
+          {!isLastChild && (
+            <div
+              className="absolute"
+              style={{
+                left: "13px",
+                top: "18px",
+                width: "2px",
+                height: "18px",
+                backgroundColor: colors.border,
+              }}
+            />
+          )}
         </div>
       )}
 
-      <div className="rounded-full relative flex-shrink-0" style={{
-        width: '14px',
-        height: '14px',
-        background: branchColor,
-        border: `2px solid ${colors.bg.primary}`,
-        boxShadow: `0 0 0 2px ${branchColor}`,
-        marginTop: '11px',
-        marginRight: '10px'
-      }}>
+      <div
+        className="rounded-full relative flex-shrink-0"
+        style={{
+          width: "14px",
+          height: "14px",
+          background: branchColor,
+          border: `2px solid ${colors.bg.primary}`,
+          boxShadow: `0 0 0 2px ${branchColor}`,
+          marginTop: "11px",
+          marginRight: "10px",
+        }}
+      >
         {commit.mergeFrom && (
-          <div className="absolute rounded-full" style={{
-            top: '-2px',
-            right: '-2px',
-            width: '8px',
-            height: '8px',
-            background: '#8250df',
-            border: `1px solid ${colors.bg.primary}`
-          }} />
+          <div
+            className="absolute rounded-full"
+            style={{
+              top: "-2px",
+              right: "-2px",
+              width: "8px",
+              height: "8px",
+              background: "#8250df",
+              border: `1px solid ${colors.bg.primary}`,
+            }}
+          />
         )}
       </div>
 
       <div
         className="flex-1 rounded-md cursor-pointer"
         style={{
-          padding: '8px 12px',
+          padding: "8px 12px",
           backgroundColor: isSelected ? colors.bg.secondary : colors.bg.primary,
-          borderTop: isSelected ? `2px solid ${colors.accent.primary}` : `1px solid ${colors.border}`,
-          borderRight: isSelected ? `2px solid ${colors.accent.primary}` : `1px solid ${colors.border}`,
-          borderBottom: isSelected ? `2px solid ${colors.accent.primary}` : `1px solid ${colors.border}`,
+          borderTop: isSelected
+            ? `2px solid ${colors.accent.primary}`
+            : `1px solid ${colors.border}`,
+          borderRight: isSelected
+            ? `2px solid ${colors.accent.primary}`
+            : `1px solid ${colors.border}`,
+          borderBottom: isSelected
+            ? `2px solid ${colors.accent.primary}`
+            : `1px solid ${colors.border}`,
           borderLeft: `3px solid ${branchColor}`,
-          transition: 'all 0.15s ease'
+          transition: "all 0.15s ease",
         }}
         onClick={() => onSelect(commit)}
         onMouseEnter={(e) => {
@@ -109,14 +143,23 @@ export default function CommitNode({
           }
         }}
       >
-        <div className="text-xs font-semibold mb-1" style={{ color: colors.text.primary }}>
+        <div
+          className="text-xs font-semibold mb-1"
+          style={{ color: colors.text.primary }}
+        >
           {commit.message}
         </div>
-        <div className="text-[10px] flex items-center gap-2 flex-wrap" style={{ color: colors.text.secondary }}>
-          <span className="px-2 py-0.5 rounded-full font-semibold" style={{
-            backgroundColor: branchColor + '20',
-            color: branchColor
-          }}>
+        <div
+          className="text-[10px] flex items-center gap-2 flex-wrap"
+          style={{ color: colors.text.secondary }}
+        >
+          <span
+            className="px-2 py-0.5 rounded-full font-semibold"
+            style={{
+              backgroundColor: branchColor + "20",
+              color: branchColor,
+            }}
+          >
             {commit.branch}
           </span>
           <span>#{commit.id}</span>
@@ -125,7 +168,7 @@ export default function CommitNode({
           {commit.mergeFrom && (
             <>
               <span>•</span>
-              <span className="font-semibold" style={{ color: '#8250df' }}>
+              <span className="font-semibold" style={{ color: "#8250df" }}>
                 ← {commit.mergeFrom}
               </span>
             </>
diff --git a/app/components/prompt-editor/ConfigDiffPane.tsx b/app/components/prompt-editor/ConfigDiffPane.tsx
index 1e6c9f8..09018ef 100644
--- a/app/components/prompt-editor/ConfigDiffPane.tsx
+++ b/app/components/prompt-editor/ConfigDiffPane.tsx
@@ -1,5 +1,5 @@
-import { colors } from '@/app/lib/colors';
-import { SavedConfig } from '@/app/lib/types/configs';
+import { colors } from "@/app/lib/colors";
+import { SavedConfig } from "@/app/lib/types/configs";
 
 interface ConfigDiffPaneProps {
   selectedCommit: SavedConfig;
@@ -23,7 +23,7 @@ export default function ConfigDiffPane({
   // Compare provider
   if (compareWith.provider !== selectedCommit.provider) {
     configDiffs.push({
-      field: 'Provider',
+      field: "Provider",
       oldValue: compareWith.provider,
       newValue: selectedCommit.provider,
       changed: true,
@@ -33,7 +33,7 @@ export default function ConfigDiffPane({
   // Compare model
   if (compareWith.modelName !== selectedCommit.modelName) {
     configDiffs.push({
-      field: 'Model',
+      field: "Model",
       oldValue: compareWith.modelName,
       newValue: selectedCommit.modelName,
       changed: true,
@@ -43,7 +43,7 @@ export default function ConfigDiffPane({
   // Compare temperature
   if (compareWith.temperature !== selectedCommit.temperature) {
     configDiffs.push({
-      field: 'Temperature',
+      field: "Temperature",
       oldValue: compareWith.temperature,
       newValue: selectedCommit.temperature,
       changed: true,
@@ -55,7 +55,7 @@ export default function ConfigDiffPane({
   const newTools = selectedCommit.tools || [];
   if (JSON.stringify(oldTools) !== JSON.stringify(newTools)) {
     configDiffs.push({
-      field: 'Tools',
+      field: "Tools",
       oldValue: oldTools,
       newValue: newTools,
       changed: true,
@@ -66,17 +66,21 @@ export default function ConfigDiffPane({
 
   const renderValue = (value: unknown): string => {
     if (Array.isArray(value)) {
-      if (value.length === 0) return '[]';
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      return value.map((_idx: any) => {
-        const tool = _idx;
-        if (tool.type === 'file_search') {
-          return `File Search (${tool.knowledge_base_ids?.[0] || 'no store'})`;
-        }
-        return JSON.stringify(tool);
-      }).join(', ');
+      if (value.length === 0) return "[]";
+      return (
+        value
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          .map((_idx: any) => {
+            const tool = _idx;
+            if (tool.type === "file_search") {
+              return `File Search (${tool.knowledge_base_ids?.[0] || "no store"})`;
+            }
+            return JSON.stringify(tool);
+          })
+          .join(", ")
+      );
     }
-    if (typeof value === 'object') {
+    if (typeof value === "object") {
       return JSON.stringify(value, null, 2);
     }
     return String(value);
@@ -91,7 +95,10 @@ export default function ConfigDiffPane({
           borderColor: colors.border,
         }}
       >
-        <h3 className="text-sm font-semibold" style={{ color: colors.text.primary }}>
+        <h3
+          className="text-sm font-semibold"
+          style={{ color: colors.text.primary }}
+        >
           Configuration Changes
         </h3>
         <div className="text-xs mt-1" style={{ color: colors.text.secondary }}>
@@ -107,7 +114,10 @@ export default function ConfigDiffPane({
         {!hasChanges ? (
           <div
             className="border-2 border-dashed rounded-lg p-6 text-center"
-            style={{ borderColor: colors.border, backgroundColor: colors.bg.primary }}
+            style={{
+              borderColor: colors.border,
+              backgroundColor: colors.bg.primary,
+            }}
           >
             <p className="text-sm" style={{ color: colors.text.secondary }}>
               No configuration changes
@@ -141,7 +151,7 @@ export default function ConfigDiffPane({
                     <div
                       className="p-2 rounded text-sm font-mono break-all"
                       style={{
-                        backgroundColor: '#fee2e2',
+                        backgroundColor: "#fee2e2",
                         color: colors.status.error,
                       }}
                     >
@@ -158,8 +168,8 @@ export default function ConfigDiffPane({
                     <div
                       className="p-2 rounded text-sm font-mono break-all"
                       style={{
-                        backgroundColor: '#dcfce7',
-                        color: '#15803d',
+                        backgroundColor: "#dcfce7",
+                        color: "#15803d",
                       }}
                     >
                       {renderValue(diff.newValue)}
diff --git a/app/components/prompt-editor/ConfigDrawer.tsx b/app/components/prompt-editor/ConfigDrawer.tsx
index 1c84080..c560900 100644
--- a/app/components/prompt-editor/ConfigDrawer.tsx
+++ b/app/components/prompt-editor/ConfigDrawer.tsx
@@ -1,10 +1,15 @@
-import React from 'react';
-import { colors } from '@/app/lib/colors';
-import { Tool } from '@/app/lib/configTypes';
-import { Config, Commit, LegacyVariant, TestResult } from '@/app/configurations/prompt-editor/types';
-import CurrentConfigTab from './CurrentConfigTab';
-import HistoryTab from './HistoryTab';
-import ABTestTab from './ABTestTab';
+import React from "react";
+import { colors } from "@/app/lib/colors";
+import { Tool } from "@/app/lib/configTypes";
+import {
+  Config,
+  Commit,
+  LegacyVariant,
+  TestResult,
+} from "@/app/configurations/prompt-editor/types";
+import CurrentConfigTab from "./CurrentConfigTab";
+import HistoryTab from "./HistoryTab";
+import ABTestTab from "./ABTestTab";
 
 interface ConfigDrawerProps {
   isOpen: boolean;
@@ -97,14 +102,14 @@ export default function ConfigDrawer({
       {/* Backdrop */}
       <div
         style={{
-          position: 'fixed',
+          position: "fixed",
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
           backgroundColor: `rgba(0, 0, 0, ${isAnimating ? 0.3 : 0})`,
           zIndex: 1001,
-          transition: 'background-color 0.3s ease',
+          transition: "background-color 0.3s ease",
         }}
         onClick={onClose}
       />
@@ -112,71 +117,82 @@ export default function ConfigDrawer({
       {/* Drawer */}
       <div
         style={{
-          position: 'fixed',
+          position: "fixed",
           top: 0,
           right: 0,
-          width: '420px',
-          height: '100vh',
+          width: "420px",
+          height: "100vh",
           backgroundColor: colors.bg.primary,
-          boxShadow: '-4px 0 12px rgba(0, 0, 0, 0.15)',
+          boxShadow: "-4px 0 12px rgba(0, 0, 0, 0.15)",
           zIndex: 1002,
-          display: 'flex',
-          flexDirection: 'column',
-          transform: `translateX(${isAnimating ? '0' : '100%'})`,
-          transition: 'transform 0.3s ease-out',
+          display: "flex",
+          flexDirection: "column",
+          transform: `translateX(${isAnimating ? "0" : "100%"})`,
+          transition: "transform 0.3s ease-out",
         }}
       >
         {/* Header */}
         <div
           style={{
-            padding: '20px',
+            padding: "20px",
             borderBottom: `1px solid ${colors.border}`,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
           }}
         >
-          <div style={{ display: 'flex', gap: '12px' }}>
+          <div style={{ display: "flex", gap: "12px" }}>
             <button
-              onClick={() => onTabChange('current')}
+              onClick={() => onTabChange("current")}
               style={{
-                padding: '6px 12px',
-                backgroundColor: activeTab === 'current' ? colors.accent.primary : 'transparent',
-                color: activeTab === 'current' ? '#ffffff' : colors.text.primary,
+                padding: "6px 12px",
+                backgroundColor:
+                  activeTab === "current"
+                    ? colors.accent.primary
+                    : "transparent",
+                color:
+                  activeTab === "current" ? "#ffffff" : colors.text.primary,
                 border: `1px solid ${colors.border}`,
-                borderRadius: '4px',
-                cursor: 'pointer',
-                fontSize: '13px',
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontSize: "13px",
                 fontWeight: 500,
               }}
             >
               Current
             </button>
             <button
-              onClick={() => onTabChange('history')}
+              onClick={() => onTabChange("history")}
               style={{
-                padding: '6px 12px',
-                backgroundColor: activeTab === 'history' ? colors.accent.primary : 'transparent',
-                color: activeTab === 'history' ? '#ffffff' : colors.text.primary,
+                padding: "6px 12px",
+                backgroundColor:
+                  activeTab === "history"
+                    ? colors.accent.primary
+                    : "transparent",
+                color:
+                  activeTab === "history" ? "#ffffff" : colors.text.primary,
                 border: `1px solid ${colors.border}`,
-                borderRadius: '4px',
-                cursor: 'pointer',
-                fontSize: '13px',
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontSize: "13px",
                 fontWeight: 500,
               }}
             >
               History
             </button>
             <button
-              onClick={() => onTabChange('abtest')}
+              onClick={() => onTabChange("abtest")}
               style={{
-                padding: '6px 12px',
-                backgroundColor: activeTab === 'abtest' ? colors.accent.primary : 'transparent',
-                color: activeTab === 'abtest' ? '#ffffff' : colors.text.primary,
+                padding: "6px 12px",
+                backgroundColor:
+                  activeTab === "abtest"
+                    ? colors.accent.primary
+                    : "transparent",
+                color: activeTab === "abtest" ? "#ffffff" : colors.text.primary,
                 border: `1px solid ${colors.border}`,
-                borderRadius: '4px',
-                cursor: 'pointer',
-                fontSize: '13px',
+                borderRadius: "4px",
+                cursor: "pointer",
+                fontSize: "13px",
                 fontWeight: 500,
               }}
             >
@@ -186,12 +202,12 @@ export default function ConfigDrawer({
           <button
             onClick={onClose}
             style={{
-              background: 'none',
-              border: 'none',
-              fontSize: '20px',
-              cursor: 'pointer',
+              background: "none",
+              border: "none",
+              fontSize: "20px",
+              cursor: "pointer",
               color: colors.text.secondary,
-              padding: '4px',
+              padding: "4px",
             }}
           >
             ✕
@@ -202,49 +218,49 @@ export default function ConfigDrawer({
         <div
           style={{
             flex: 1,
-            overflowY: 'auto',
-            padding: '20px',
+            overflowY: "auto",
+            padding: "20px",
           }}
         >
           <div
             key={activeTab}
             style={{
-              animation: 'fadeIn 0.2s ease-in',
+              animation: "fadeIn 0.2s ease-in",
             }}
           >
-            {activeTab === 'current' && (
+            {activeTab === "current" && (
               <CurrentConfigTab
-              configs={configs}
-              selectedConfigId={selectedConfigId}
-              configName={configName}
-              provider={provider}
-              model={model}
-              instructions={instructions}
-              temperature={temperature}
-              tools={tools}
-              configCommitMsg={configCommitMsg}
-              onConfigNameChange={onConfigNameChange}
-              onProviderChange={onProviderChange}
-              onModelChange={onModelChange}
-              onInstructionsChange={onInstructionsChange}
-              onTemperatureChange={onTemperatureChange}
-              onToolsChange={onToolsChange}
-              onConfigCommitMsgChange={onConfigCommitMsgChange}
-              onSaveConfig={onSaveConfig}
-              onLoadConfig={onLoadConfig}
-              onUseCurrentPrompt={onUseCurrentPrompt}
-            />
-          )}
+                configs={configs}
+                selectedConfigId={selectedConfigId}
+                configName={configName}
+                provider={provider}
+                model={model}
+                instructions={instructions}
+                temperature={temperature}
+                tools={tools}
+                configCommitMsg={configCommitMsg}
+                onConfigNameChange={onConfigNameChange}
+                onProviderChange={onProviderChange}
+                onModelChange={onModelChange}
+                onInstructionsChange={onInstructionsChange}
+                onTemperatureChange={onTemperatureChange}
+                onToolsChange={onToolsChange}
+                onConfigCommitMsgChange={onConfigCommitMsgChange}
+                onSaveConfig={onSaveConfig}
+                onLoadConfig={onLoadConfig}
+                onUseCurrentPrompt={onUseCurrentPrompt}
+              />
+            )}
 
-          {activeTab === 'history' && (
-            <HistoryTab
-              configs={configs}
-              selectedConfigId={selectedConfigId}
-              onLoadConfig={onLoadConfig}
-            />
-          )}
+            {activeTab === "history" && (
+              <HistoryTab
+                configs={configs}
+                selectedConfigId={selectedConfigId}
+                onLoadConfig={onLoadConfig}
+              />
+            )}
 
-            {activeTab === 'abtest' && (
+            {activeTab === "abtest" && (
               <ABTestTab
                 variants={variants}
                 testInput={testInput}
diff --git a/app/components/prompt-editor/ConfigEditorPane.tsx b/app/components/prompt-editor/ConfigEditorPane.tsx
index ef0b90e..489c0ad 100644
--- a/app/components/prompt-editor/ConfigEditorPane.tsx
+++ b/app/components/prompt-editor/ConfigEditorPane.tsx
@@ -4,7 +4,11 @@ import { ConfigBlob, Tool } from "@/app/configurations/prompt-editor/types";
 import { SavedConfig, ConfigVersionItems } from "@/app/lib/types/configs";
 import { ConfigPublic } from "@/app/lib/configTypes";
 import { formatRelativeTime } from "@/app/lib/utils";
-import { MODEL_OPTIONS, PROVIDER_TYPES, PROVIDES_OPTIONS } from "@/app/lib/constants";
+import {
+  MODEL_OPTIONS,
+  PROVIDER_TYPES,
+  PROVIDES_OPTIONS,
+} from "@/app/lib/constants";
 
 interface ConfigEditorPaneProps {
   configBlob: ConfigBlob;
@@ -191,7 +195,11 @@ export default function ConfigEditorPane({
     });
   };
 
-  const handleUpdateTool = (index: number, field: keyof Tool, value: unknown) => {
+  const handleUpdateTool = (
+    index: number,
+    field: keyof Tool,
+    value: unknown,
+  ) => {
     const newTools = [...tools];
     if (field === "knowledge_base_ids") {
       newTools[index][field] = [value as string];
diff --git a/app/components/prompt-editor/CurrentConfigTab.tsx b/app/components/prompt-editor/CurrentConfigTab.tsx
index 1e3a2f5..3e38384 100644
--- a/app/components/prompt-editor/CurrentConfigTab.tsx
+++ b/app/components/prompt-editor/CurrentConfigTab.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
-import { colors } from '@/app/lib/colors';
-import { Config, Tool } from '@/app/configurations/prompt-editor/types';
+import { useState } from "react";
+import { colors } from "@/app/lib/colors";
+import { Config, Tool } from "@/app/configurations/prompt-editor/types";
 
 interface CurrentConfigTabProps {
   configs: Config[];
@@ -51,8 +51,8 @@ export default function CurrentConfigTab({
     onToolsChange([
       ...tools,
       {
-        type: 'file_search',
-        knowledge_base_ids: [''],
+        type: "file_search",
+        knowledge_base_ids: [""],
         max_num_results: 20,
       },
     ]);
@@ -64,7 +64,7 @@ export default function CurrentConfigTab({
 
   const updateTool = (index: number, field: keyof Tool, value: unknown) => {
     const newTools = [...tools];
-    if (field === 'knowledge_base_ids') {
+    if (field === "knowledge_base_ids") {
       newTools[index][field] = [value as string];
     } else {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -74,21 +74,21 @@ export default function CurrentConfigTab({
   };
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
       {/* Config Name Selector */}
       <div>
         <label
           style={{
-            display: 'block',
-            fontSize: '12px',
+            display: "block",
+            fontSize: "12px",
             fontWeight: 600,
             color: colors.text.primary,
-            marginBottom: '6px',
+            marginBottom: "6px",
           }}
         >
           Configuration
         </label>
-        <div style={{ display: 'flex', gap: '8px' }}>
+        <div style={{ display: "flex", gap: "8px" }}>
           {!isCreatingNew ? (
             <>
               <select
@@ -100,10 +100,10 @@ export default function CurrentConfigTab({
                 }}
                 style={{
                   flex: 1,
-                  padding: '8px',
+                  padding: "8px",
                   border: `1px solid ${colors.border}`,
-                  borderRadius: '4px',
-                  fontSize: '13px',
+                  borderRadius: "4px",
+                  fontSize: "13px",
                   backgroundColor: colors.bg.primary,
                 }}
               >
@@ -117,16 +117,16 @@ export default function CurrentConfigTab({
               <button
                 onClick={() => {
                   setIsCreatingNew(true);
-                  onConfigNameChange('');
+                  onConfigNameChange("");
                 }}
                 style={{
-                  padding: '8px 12px',
+                  padding: "8px 12px",
                   backgroundColor: colors.accent.primary,
-                  color: '#ffffff',
-                  border: 'none',
-                  borderRadius: '4px',
-                  cursor: 'pointer',
-                  fontSize: '13px',
+                  color: "#ffffff",
+                  border: "none",
+                  borderRadius: "4px",
+                  cursor: "pointer",
+                  fontSize: "13px",
                   fontWeight: 500,
                 }}
               >
@@ -142,22 +142,22 @@ export default function CurrentConfigTab({
                 placeholder="Enter config name..."
                 style={{
                   flex: 1,
-                  padding: '8px',
+                  padding: "8px",
                   border: `1px solid ${colors.border}`,
-                  borderRadius: '4px',
-                  fontSize: '13px',
+                  borderRadius: "4px",
+                  fontSize: "13px",
                 }}
               />
               <button
                 onClick={() => setIsCreatingNew(false)}
                 style={{
-                  padding: '8px 12px',
+                  padding: "8px 12px",
                   backgroundColor: colors.bg.secondary,
                   color: colors.text.primary,
                   border: `1px solid ${colors.border}`,
-                  borderRadius: '4px',
-                  cursor: 'pointer',
-                  fontSize: '13px',
+                  borderRadius: "4px",
+                  cursor: "pointer",
+                  fontSize: "13px",
                 }}
               >
                 Cancel
@@ -171,11 +171,11 @@ export default function CurrentConfigTab({
       <div>
         <label
           style={{
-            display: 'block',
-            fontSize: '12px',
+            display: "block",
+            fontSize: "12px",
             fontWeight: 600,
             color: colors.text.primary,
-            marginBottom: '6px',
+            marginBottom: "6px",
           }}
         >
           Provider
@@ -184,11 +184,11 @@ export default function CurrentConfigTab({
           value={provider}
           onChange={(e) => onProviderChange(e.target.value)}
           style={{
-            width: '100%',
-            padding: '8px',
+            width: "100%",
+            padding: "8px",
             border: `1px solid ${colors.border}`,
-            borderRadius: '4px',
-            fontSize: '13px',
+            borderRadius: "4px",
+            fontSize: "13px",
             backgroundColor: colors.bg.primary,
           }}
         >
@@ -202,11 +202,11 @@ export default function CurrentConfigTab({
       <div>
         <label
           style={{
-            display: 'block',
-            fontSize: '12px',
+            display: "block",
+            fontSize: "12px",
             fontWeight: 600,
             color: colors.text.primary,
-            marginBottom: '6px',
+            marginBottom: "6px",
           }}
         >
           Model
@@ -215,11 +215,11 @@ export default function CurrentConfigTab({
           value={model}
           onChange={(e) => onModelChange(e.target.value)}
           style={{
-            width: '100%',
-            padding: '8px',
+            width: "100%",
+            padding: "8px",
             border: `1px solid ${colors.border}`,
-            borderRadius: '4px',
-            fontSize: '13px',
+            borderRadius: "4px",
+            fontSize: "13px",
             backgroundColor: colors.bg.primary,
           }}
         >
@@ -234,15 +234,15 @@ export default function CurrentConfigTab({
       <div>
         <div
           style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginBottom: '6px',
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "6px",
           }}
         >
           <label
             style={{
-              fontSize: '12px',
+              fontSize: "12px",
               fontWeight: 600,
               color: colors.text.primary,
             }}
@@ -252,13 +252,13 @@ export default function CurrentConfigTab({
           <button
             onClick={onUseCurrentPrompt}
             style={{
-              padding: '4px 8px',
+              padding: "4px 8px",
               backgroundColor: colors.bg.secondary,
               color: colors.text.primary,
               border: `1px solid ${colors.border}`,
-              borderRadius: '4px',
-              cursor: 'pointer',
-              fontSize: '11px',
+              borderRadius: "4px",
+              cursor: "pointer",
+              fontSize: "11px",
             }}
           >
             Use Current Prompt
@@ -269,14 +269,14 @@ export default function CurrentConfigTab({
           onChange={(e) => onInstructionsChange(e.target.value)}
           placeholder="Enter instructions..."
           style={{
-            width: '100%',
-            minHeight: '120px',
-            padding: '8px',
+            width: "100%",
+            minHeight: "120px",
+            padding: "8px",
             border: `1px solid ${colors.border}`,
-            borderRadius: '4px',
-            fontSize: '13px',
-            fontFamily: 'monospace',
-            resize: 'vertical',
+            borderRadius: "4px",
+            fontSize: "13px",
+            fontFamily: "monospace",
+            resize: "vertical",
           }}
         />
       </div>
@@ -285,11 +285,11 @@ export default function CurrentConfigTab({
       <div>
         <label
           style={{
-            display: 'block',
-            fontSize: '12px',
+            display: "block",
+            fontSize: "12px",
             fontWeight: 600,
             color: colors.text.primary,
-            marginBottom: '6px',
+            marginBottom: "6px",
           }}
         >
           Temperature: {temperature.toFixed(1)}
@@ -301,15 +301,15 @@ export default function CurrentConfigTab({
           step="0.1"
           value={temperature}
           onChange={(e) => onTemperatureChange(parseFloat(e.target.value))}
-          style={{ width: '100%' }}
+          style={{ width: "100%" }}
         />
         <div
           style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            fontSize: '11px',
+            display: "flex",
+            justifyContent: "space-between",
+            fontSize: "11px",
             color: colors.text.secondary,
-            marginTop: '4px',
+            marginTop: "4px",
           }}
         >
           <span>Focused (0)</span>
@@ -322,15 +322,15 @@ export default function CurrentConfigTab({
       <div>
         <div
           style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginBottom: '8px',
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+            marginBottom: "8px",
           }}
         >
           <label
             style={{
-              fontSize: '12px',
+              fontSize: "12px",
               fontWeight: 600,
               color: colors.text.primary,
             }}
@@ -340,13 +340,13 @@ export default function CurrentConfigTab({
           <button
             onClick={addTool}
             style={{
-              padding: '4px 8px',
+              padding: "4px 8px",
               backgroundColor: colors.accent.primary,
-              color: '#ffffff',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: 'pointer',
-              fontSize: '11px',
+              color: "#ffffff",
+              border: "none",
+              borderRadius: "4px",
+              cursor: "pointer",
+              fontSize: "11px",
             }}
           >
             + Add Tool
@@ -356,67 +356,71 @@ export default function CurrentConfigTab({
           <div
             key={index}
             style={{
-              padding: '12px',
+              padding: "12px",
               border: `1px solid ${colors.border}`,
-              borderRadius: '4px',
-              marginBottom: '8px',
+              borderRadius: "4px",
+              marginBottom: "8px",
               backgroundColor: colors.bg.secondary,
             }}
           >
             <div
               style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                marginBottom: '8px',
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                marginBottom: "8px",
               }}
             >
-              <span style={{ fontSize: '12px', fontWeight: 600 }}>File Search</span>
+              <span style={{ fontSize: "12px", fontWeight: 600 }}>
+                File Search
+              </span>
               <button
                 onClick={() => removeTool(index)}
                 style={{
-                  background: 'none',
-                  border: 'none',
+                  background: "none",
+                  border: "none",
                   color: colors.status.error,
-                  cursor: 'pointer',
-                  fontSize: '12px',
+                  cursor: "pointer",
+                  fontSize: "12px",
                 }}
               >
                 Remove
               </button>
             </div>
-            <div style={{ marginBottom: '8px' }}>
+            <div style={{ marginBottom: "8px" }}>
               <label
                 style={{
-                  display: 'block',
-                  fontSize: '11px',
+                  display: "block",
+                  fontSize: "11px",
                   color: colors.text.secondary,
-                  marginBottom: '4px',
+                  marginBottom: "4px",
                 }}
               >
                 Knowledge Base ID
               </label>
               <input
                 type="text"
-                value={tool.knowledge_base_ids[0] || ''}
-                onChange={(e) => updateTool(index, 'knowledge_base_ids', e.target.value)}
+                value={tool.knowledge_base_ids[0] || ""}
+                onChange={(e) =>
+                  updateTool(index, "knowledge_base_ids", e.target.value)
+                }
                 placeholder="vs_abc123"
                 style={{
-                  width: '100%',
-                  padding: '6px',
+                  width: "100%",
+                  padding: "6px",
                   border: `1px solid ${colors.border}`,
-                  borderRadius: '4px',
-                  fontSize: '12px',
+                  borderRadius: "4px",
+                  fontSize: "12px",
                 }}
               />
             </div>
             <div>
               <label
                 style={{
-                  display: 'block',
-                  fontSize: '11px',
+                  display: "block",
+                  fontSize: "11px",
                   color: colors.text.secondary,
-                  marginBottom: '4px',
+                  marginBottom: "4px",
                 }}
               >
                 Max Results
@@ -425,14 +429,18 @@ export default function CurrentConfigTab({
                 type="number"
                 value={tool.max_num_results}
                 onChange={(e) =>
-                  updateTool(index, 'max_num_results', parseInt(e.target.value) || 20)
+                  updateTool(
+                    index,
+                    "max_num_results",
+                    parseInt(e.target.value) || 20,
+                  )
                 }
                 style={{
-                  width: '100%',
-                  padding: '6px',
+                  width: "100%",
+                  padding: "6px",
                   border: `1px solid ${colors.border}`,
-                  borderRadius: '4px',
-                  fontSize: '12px',
+                  borderRadius: "4px",
+                  fontSize: "12px",
                 }}
               />
             </div>
@@ -444,11 +452,11 @@ export default function CurrentConfigTab({
       <div>
         <label
           style={{
-            display: 'block',
-            fontSize: '12px',
+            display: "block",
+            fontSize: "12px",
             fontWeight: 600,
             color: colors.text.primary,
-            marginBottom: '6px',
+            marginBottom: "6px",
           }}
         >
           Commit Message (Optional)
@@ -459,11 +467,11 @@ export default function CurrentConfigTab({
           onChange={(e) => onConfigCommitMsgChange(e.target.value)}
           placeholder="Describe this configuration..."
           style={{
-            width: '100%',
-            padding: '8px',
+            width: "100%",
+            padding: "8px",
             border: `1px solid ${colors.border}`,
-            borderRadius: '4px',
-            fontSize: '13px',
+            borderRadius: "4px",
+            fontSize: "13px",
           }}
         />
       </div>
@@ -472,14 +480,14 @@ export default function CurrentConfigTab({
       <button
         onClick={onSaveConfig}
         style={{
-          width: '100%',
-          padding: '12px',
+          width: "100%",
+          padding: "12px",
           backgroundColor: colors.status.success,
-          color: '#ffffff',
-          border: 'none',
-          borderRadius: '4px',
-          cursor: 'pointer',
-          fontSize: '14px',
+          color: "#ffffff",
+          border: "none",
+          borderRadius: "4px",
+          cursor: "pointer",
+          fontSize: "14px",
           fontWeight: 600,
         }}
       >
diff --git a/app/components/prompt-editor/DiffView.tsx b/app/components/prompt-editor/DiffView.tsx
index 65cdd42..d9b73af 100644
--- a/app/components/prompt-editor/DiffView.tsx
+++ b/app/components/prompt-editor/DiffView.tsx
@@ -1,9 +1,9 @@
-import { useMemo, useState } from 'react';
-import { colors } from '@/app/lib/colors';
-import PromptDiffPane from './PromptDiffPane';
-import ConfigDiffPane from './ConfigDiffPane';
-import { SavedConfig, ConfigVersionItems } from '@/app/lib/types/configs';
-import { formatRelativeTime } from '@/app/lib/utils';
+import { useMemo, useState } from "react";
+import { colors } from "@/app/lib/colors";
+import PromptDiffPane from "./PromptDiffPane";
+import ConfigDiffPane from "./ConfigDiffPane";
+import { SavedConfig, ConfigVersionItems } from "@/app/lib/types/configs";
+import { formatRelativeTime } from "@/app/lib/utils";
 
 interface DiffViewProps {
   selectedCommit: SavedConfig;
@@ -13,7 +13,10 @@ interface DiffViewProps {
   onLoadVersion: (config: SavedConfig) => void;
   loadVersionsForConfig?: (config_id: string) => Promise<void>; // lightweight version list for a given config_id
   versionItemsMap?: Record<string, ConfigVersionItems[]>; // Lightweight version items per config_id. When provided, the compare dropdown shows ALL version
-  onFetchVersionDetail?: (config_id: string, version: number) => Promise<SavedConfig | null>; // Fetches a single version's full details
+  onFetchVersionDetail?: (
+    config_id: string,
+    version: number,
+  ) => Promise<SavedConfig | null>; // Fetches a single version's full details
 }
 
 // Group configs by name for the dropdown
@@ -39,7 +42,8 @@ export default function DiffView({
   const configGroups = useMemo((): ConfigGroupForCompare[] => {
     if (versionItemsMap && Object.keys(versionItemsMap).length > 0) {
       return Object.entries(versionItemsMap).map(([config_id, items]) => {
-        const nameFallback = commits.find(c => c.config_id === config_id)?.name ?? config_id;
+        const nameFallback =
+          commits.find((c) => c.config_id === config_id)?.name ?? config_id;
         const sorted = [...items].sort((a, b) => b.version - a.version);
         return { config_id, name: nameFallback, items: sorted };
       });
@@ -55,7 +59,7 @@ export default function DiffView({
       return {
         config_id,
         name: sorted[0].name,
-        items: sorted.map(v => ({
+        items: sorted.map((v) => ({
           id: v.id,
           config_id: v.config_id,
           version: v.version,
@@ -68,23 +72,39 @@ export default function DiffView({
   }, [commits, versionItemsMap]);
 
   // Encode option value as "config_id:version" so we can look up or fetch on select
-  const encodeValue = (config_id: string, version: number) => `${config_id}:${version}`;
-  const decodeValue = (val: string): { config_id: string; version: number } | null => {
-    const idx = val.lastIndexOf(':');
+  const encodeValue = (config_id: string, version: number) =>
+    `${config_id}:${version}`;
+  const decodeValue = (
+    val: string,
+  ): { config_id: string; version: number } | null => {
+    const idx = val.lastIndexOf(":");
     if (idx === -1) return null;
-    return { config_id: val.slice(0, idx), version: parseInt(val.slice(idx + 1), 10) };
+    return {
+      config_id: val.slice(0, idx),
+      version: parseInt(val.slice(idx + 1), 10),
+    };
   };
-  const currentValue = compareWith ? encodeValue(compareWith.config_id, compareWith.version) : '';
+  const currentValue = compareWith
+    ? encodeValue(compareWith.config_id, compareWith.version)
+    : "";
 
   const handleCompareSelect = async (rawValue: string) => {
-    if (!rawValue) { onCompareChange(null); return; }
+    if (!rawValue) {
+      onCompareChange(null);
+      return;
+    }
     const decoded = decodeValue(rawValue);
     if (!decoded) return;
     const { config_id, version } = decoded;
 
     // Fast path: already loaded
-    let detail = commits.find(c => c.config_id === config_id && c.version === version);
-    if (detail) { onCompareChange(detail); return; }
+    let detail = commits.find(
+      (c) => c.config_id === config_id && c.version === version,
+    );
+    if (detail) {
+      onCompareChange(detail);
+      return;
+    }
 
     if (onFetchVersionDetail) {
       setIsLoadingCompare(true);
@@ -96,17 +116,25 @@ export default function DiffView({
 
   return (
     <div className="flex-1 flex flex-col overflow-hidden">
-      <div className="px-6 py-4 border-b" style={{
-        backgroundColor: colors.bg.primary,
-        borderColor: colors.border
-      }}>
+      <div
+        className="px-6 py-4 border-b"
+        style={{
+          backgroundColor: colors.bg.primary,
+          borderColor: colors.border,
+        }}
+      >
         <div className="mb-3">
-          <div className="text-lg font-semibold mb-1" style={{ color: colors.text.primary }}>
+          <div
+            className="text-lg font-semibold mb-1"
+            style={{ color: colors.text.primary }}
+          >
             {selectedCommit.name} v{selectedCommit.version}
           </div>
           <div className="text-xs" style={{ color: colors.text.secondary }}>
-            {formatRelativeTime(selectedCommit.timestamp)} • {selectedCommit.provider}/{selectedCommit.modelName}
-            {selectedCommit.commit_message && ` • ${selectedCommit.commit_message}`}
+            {formatRelativeTime(selectedCommit.timestamp)} •{" "}
+            {selectedCommit.provider}/{selectedCommit.modelName}
+            {selectedCommit.commit_message &&
+              ` • ${selectedCommit.commit_message}`}
           </div>
         </div>
         <div className="space-y-2">
@@ -114,10 +142,14 @@ export default function DiffView({
             <select
               onFocus={() => {
                 if (loadVersionsForConfig) {
-                  configGroups.forEach(g => loadVersionsForConfig(g.config_id));
+                  configGroups.forEach((g) =>
+                    loadVersionsForConfig(g.config_id),
+                  );
                 }
               }}
-              onChange={(e) => { handleCompareSelect(e.target.value); }}
+              onChange={(e) => {
+                handleCompareSelect(e.target.value);
+              }}
               value={currentValue}
               disabled={isLoadingCompare}
               className="px-3 py-2 rounded-md text-sm min-w-[300px]"
@@ -125,18 +157,33 @@ export default function DiffView({
                 border: `1px solid ${colors.border}`,
                 backgroundColor: colors.bg.primary,
                 color: colors.text.primary,
-                outline: 'none',
+                outline: "none",
                 opacity: isLoadingCompare ? 0.6 : 1,
               }}
             >
-              <option value="">{isLoadingCompare ? 'Loading…' : 'Select version to compare...'}</option>
-              {configGroups.map(group => (
-                <optgroup key={group.config_id} label={`${group.name} (${group.items.length} versions)`}>
+              <option value="">
+                {isLoadingCompare ? "Loading…" : "Select version to compare..."}
+              </option>
+              {configGroups.map((group) => (
+                <optgroup
+                  key={group.config_id}
+                  label={`${group.name} (${group.items.length} versions)`}
+                >
                   {group.items
-                    .filter(v => !(v.config_id === selectedCommit.config_id && v.version === selectedCommit.version))
-                    .map(item => (
-                      <option key={item.id} value={encodeValue(item.config_id, item.version)}>
-                        v{item.version} - {item.commit_message || 'No message'} ({formatRelativeTime(item.inserted_at)})
+                    .filter(
+                      (v) =>
+                        !(
+                          v.config_id === selectedCommit.config_id &&
+                          v.version === selectedCommit.version
+                        ),
+                    )
+                    .map((item) => (
+                      <option
+                        key={item.id}
+                        value={encodeValue(item.config_id, item.version)}
+                      >
+                        v{item.version} - {item.commit_message || "No message"}{" "}
+                        ({formatRelativeTime(item.inserted_at)})
                       </option>
                     ))}
                 </optgroup>
@@ -151,12 +198,13 @@ export default function DiffView({
                     backgroundColor: colors.bg.secondary,
                     color: colors.text.primary,
                     border: `1px solid ${colors.border}`,
-                    cursor: 'pointer',
-                    transition: 'all 0.15s ease'
+                    cursor: "pointer",
+                    transition: "all 0.15s ease",
                   }}
                   onMouseEnter={(e) => {
-                    e.currentTarget.style.backgroundColor = colors.accent.primary;
-                    e.currentTarget.style.color = '#ffffff';
+                    e.currentTarget.style.backgroundColor =
+                      colors.accent.primary;
+                    e.currentTarget.style.color = "#ffffff";
                     e.currentTarget.style.borderColor = colors.accent.primary;
                   }}
                   onMouseLeave={(e) => {
@@ -167,30 +215,28 @@ export default function DiffView({
                 >
                   {compareWith.name === selectedCommit.name
                     ? `← Load v${compareWith.version}`
-                    : `← Load ${compareWith.name} v${compareWith.version}`
-                  }
+                    : `← Load ${compareWith.name} v${compareWith.version}`}
                 </button>
                 <button
                   onClick={() => onLoadVersion(selectedCommit)}
                   className="px-3 py-1.5 rounded text-xs font-medium"
                   style={{
                     backgroundColor: colors.accent.primary,
-                    color: '#ffffff',
+                    color: "#ffffff",
                     border: `1px solid ${colors.accent.primary}`,
-                    cursor: 'pointer',
-                    transition: 'all 0.15s ease'
+                    cursor: "pointer",
+                    transition: "all 0.15s ease",
                   }}
                   onMouseEnter={(e) => {
-                    e.currentTarget.style.opacity = '0.85';
+                    e.currentTarget.style.opacity = "0.85";
                   }}
                   onMouseLeave={(e) => {
-                    e.currentTarget.style.opacity = '1';
+                    e.currentTarget.style.opacity = "1";
                   }}
                 >
                   {compareWith.name === selectedCommit.name
                     ? `Load v${selectedCommit.version} →`
-                    : `Load ${selectedCommit.name} v${selectedCommit.version} →`
-                  }
+                    : `Load ${selectedCommit.name} v${selectedCommit.version} →`}
                 </button>
               </div>
             )}
@@ -199,8 +245,7 @@ export default function DiffView({
             <div className="text-xs" style={{ color: colors.text.secondary }}>
               {compareWith.name === selectedCommit.name
                 ? `Comparing v${compareWith.version} → v${selectedCommit.version}`
-                : `Comparing ${compareWith.name} v${compareWith.version} → ${selectedCommit.name} v${selectedCommit.version}`
-              }
+                : `Comparing ${compareWith.name} v${compareWith.version} → ${selectedCommit.name} v${selectedCommit.version}`}
             </div>
           )}
         </div>
@@ -208,7 +253,10 @@ export default function DiffView({
 
       {compareWith ? (
         <div className="flex flex-1 overflow-hidden">
-          <div className="flex-1 flex border-r" style={{ borderColor: colors.border }}>
+          <div
+            className="flex-1 flex border-r"
+            style={{ borderColor: colors.border }}
+          >
             <PromptDiffPane
               selectedCommit={selectedCommit}
               compareWith={compareWith}
@@ -224,13 +272,27 @@ export default function DiffView({
       ) : (
         <div className="flex-1 flex flex-col overflow-hidden">
           <div className="flex flex-1 overflow-hidden">
-            <div className="flex-1 flex border-r" style={{ borderColor: colors.border }}>
+            <div
+              className="flex-1 flex border-r"
+              style={{ borderColor: colors.border }}
+            >
               <div className="flex-1 flex flex-col overflow-hidden">
-                <div className="px-4 py-3 border-b" style={{ borderColor: colors.border }}>
-                  <h3 className="text-sm font-semibold" style={{ color: colors.text.primary }}>Prompt</h3>
+                <div
+                  className="px-4 py-3 border-b"
+                  style={{ borderColor: colors.border }}
+                >
+                  <h3
+                    className="text-sm font-semibold"
+                    style={{ color: colors.text.primary }}
+                  >
+                    Prompt
+                  </h3>
                 </div>
                 <div className="flex-1 p-4 overflow-auto">
-                  <pre className="text-sm whitespace-pre-wrap font-mono" style={{ color: colors.text.primary }}>
+                  <pre
+                    className="text-sm whitespace-pre-wrap font-mono"
+                    style={{ color: colors.text.primary }}
+                  >
                     {selectedCommit.promptContent}
                   </pre>
                 </div>
@@ -238,40 +300,96 @@ export default function DiffView({
             </div>
             <div className="flex-1 flex">
               <div className="flex-1 flex flex-col overflow-hidden">
-                <div className="px-4 py-3 border-b" style={{ borderColor: colors.border }}>
-                  <h3 className="text-sm font-semibold" style={{ color: colors.text.primary }}>Configuration</h3>
+                <div
+                  className="px-4 py-3 border-b"
+                  style={{ borderColor: colors.border }}
+                >
+                  <h3
+                    className="text-sm font-semibold"
+                    style={{ color: colors.text.primary }}
+                  >
+                    Configuration
+                  </h3>
                 </div>
                 <div className="flex-1 p-4 overflow-auto">
                   <div className="space-y-3">
                     <div>
-                      <div className="text-xs font-semibold mb-1" style={{ color: colors.text.secondary }}>Provider</div>
-                      <div className="text-sm" style={{ color: colors.text.primary }}>{selectedCommit.provider}</div>
+                      <div
+                        className="text-xs font-semibold mb-1"
+                        style={{ color: colors.text.secondary }}
+                      >
+                        Provider
+                      </div>
+                      <div
+                        className="text-sm"
+                        style={{ color: colors.text.primary }}
+                      >
+                        {selectedCommit.provider}
+                      </div>
                     </div>
                     <div>
-                      <div className="text-xs font-semibold mb-1" style={{ color: colors.text.secondary }}>Model</div>
-                      <div className="text-sm" style={{ color: colors.text.primary }}>{selectedCommit.modelName}</div>
+                      <div
+                        className="text-xs font-semibold mb-1"
+                        style={{ color: colors.text.secondary }}
+                      >
+                        Model
+                      </div>
+                      <div
+                        className="text-sm"
+                        style={{ color: colors.text.primary }}
+                      >
+                        {selectedCommit.modelName}
+                      </div>
                     </div>
                     <div>
-                      <div className="text-xs font-semibold mb-1" style={{ color: colors.text.secondary }}>Temperature</div>
-                      <div className="text-sm" style={{ color: colors.text.primary }}>{selectedCommit.temperature}</div>
+                      <div
+                        className="text-xs font-semibold mb-1"
+                        style={{ color: colors.text.secondary }}
+                      >
+                        Temperature
+                      </div>
+                      <div
+                        className="text-sm"
+                        style={{ color: colors.text.primary }}
+                      >
+                        {selectedCommit.temperature}
+                      </div>
                     </div>
-                    {selectedCommit.tools && selectedCommit.tools.length > 0 && (
-                      <div>
-                        <div className="text-xs font-semibold mb-1" style={{ color: colors.text.secondary }}>Tools</div>
-                        <div className="text-sm space-y-2">
-                          {selectedCommit.tools.map((tool, idx) => (
-                            <div key={idx} className="p-2 rounded" style={{ backgroundColor: colors.bg.secondary }}>
-                              <div className="text-xs font-semibold" style={{ color: colors.text.secondary }}>{tool.type}</div>
-                              {tool.knowledge_base_ids && (
-                                <div className="text-xs mt-1" style={{ color: colors.text.secondary }}>
-                                  Knowledge Base: {tool.knowledge_base_ids[0]}
+                    {selectedCommit.tools &&
+                      selectedCommit.tools.length > 0 && (
+                        <div>
+                          <div
+                            className="text-xs font-semibold mb-1"
+                            style={{ color: colors.text.secondary }}
+                          >
+                            Tools
+                          </div>
+                          <div className="text-sm space-y-2">
+                            {selectedCommit.tools.map((tool, idx) => (
+                              <div
+                                key={idx}
+                                className="p-2 rounded"
+                                style={{ backgroundColor: colors.bg.secondary }}
+                              >
+                                <div
+                                  className="text-xs font-semibold"
+                                  style={{ color: colors.text.secondary }}
+                                >
+                                  {tool.type}
                                 </div>
-                              )}
-                            </div>
-                          ))}
+                                {tool.knowledge_base_ids && (
+                                  <div
+                                    className="text-xs mt-1"
+                                    style={{ color: colors.text.secondary }}
+                                  >
+                                    Knowledge Base: {tool.knowledge_base_ids[0]}
+                                  </div>
+                                )}
+                              </div>
+                            ))}
+                          </div>
                         </div>
-                      </div>
-                    )}
+                      )}
                   </div>
                 </div>
               </div>
diff --git a/app/components/prompt-editor/EditorView.tsx b/app/components/prompt-editor/EditorView.tsx
index 29e0f93..e650902 100644
--- a/app/components/prompt-editor/EditorView.tsx
+++ b/app/components/prompt-editor/EditorView.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
-import { colors } from '@/app/lib/colors';
-import { Commit } from '@/app/configurations/prompt-editor/types';
-import { getBranchColor } from '@/app/configurations/prompt-editor/utils';
+import { colors } from "@/app/lib/colors";
+import { Commit } from "@/app/configurations/prompt-editor/types";
+import { getBranchColor } from "@/app/configurations/prompt-editor/utils";
 
 interface EditorViewProps {
   currentBranch: string;
@@ -20,36 +19,46 @@ export default function EditorView({
   commits,
   onContentChange,
   onCommitMessageChange,
-  onCommit
+  onCommit,
 }: EditorViewProps) {
   return (
-    <div className="flex-1 p-6 overflow-auto" style={{ backgroundColor: colors.bg.secondary }}>
+    <div
+      className="flex-1 p-6 overflow-auto"
+      style={{ backgroundColor: colors.bg.secondary }}
+    >
       <div className="max-w-4xl mx-auto">
         <div className="text-sm mb-4" style={{ color: colors.text.secondary }}>
-          Editing on <strong style={{ color: getBranchColor(commits, currentBranch) }}>{currentBranch}</strong>
+          Editing on{" "}
+          <strong style={{ color: getBranchColor(commits, currentBranch) }}>
+            {currentBranch}
+          </strong>
         </div>
         <textarea
           value={currentContent}
           onChange={(e) => onContentChange(e.target.value)}
           className="w-full rounded-md text-sm focus:outline-none"
           style={{
-            minHeight: '400px',
-            padding: '16px',
+            minHeight: "400px",
+            padding: "16px",
             border: `1px solid ${colors.border}`,
-            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
-            fontSize: '14px',
-            lineHeight: '1.6',
-            marginBottom: '16px',
-            resize: 'vertical',
+            fontFamily:
+              "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+            fontSize: "14px",
+            lineHeight: "1.6",
+            marginBottom: "16px",
+            resize: "vertical",
             backgroundColor: colors.bg.primary,
-            color: colors.text.primary
+            color: colors.text.primary,
           }}
           placeholder="Write your prompt here..."
         />
-        <div className="border rounded-lg p-4" style={{
-          backgroundColor: colors.bg.primary,
-          borderColor: colors.border
-        }}>
+        <div
+          className="border rounded-lg p-4"
+          style={{
+            backgroundColor: colors.bg.primary,
+            borderColor: colors.border,
+          }}
+        >
           <input
             type="text"
             placeholder="Describe your changes..."
@@ -59,20 +68,24 @@ export default function EditorView({
             style={{
               border: `1px solid ${colors.border}`,
               backgroundColor: colors.bg.primary,
-              color: colors.text.primary
+              color: colors.text.primary,
             }}
-            onKeyDown={(e) => e.key === 'Enter' && onCommit()}
+            onKeyDown={(e) => e.key === "Enter" && onCommit()}
           />
           <button
             onClick={onCommit}
             disabled={!commitMessage.trim()}
             className="px-6 py-2 rounded-md text-sm font-medium"
             style={{
-              backgroundColor: commitMessage.trim() ? colors.accent.primary : colors.bg.secondary,
-              color: commitMessage.trim() ? colors.bg.primary : colors.text.secondary,
-              border: 'none',
-              cursor: commitMessage.trim() ? 'pointer' : 'not-allowed',
-              transition: 'all 0.15s ease'
+              backgroundColor: commitMessage.trim()
+                ? colors.accent.primary
+                : colors.bg.secondary,
+              color: commitMessage.trim()
+                ? colors.bg.primary
+                : colors.text.secondary,
+              border: "none",
+              cursor: commitMessage.trim() ? "pointer" : "not-allowed",
+              transition: "all 0.15s ease",
             }}
             onMouseEnter={(e) => {
               if (commitMessage.trim()) {
diff --git a/app/components/prompt-editor/Header.tsx b/app/components/prompt-editor/Header.tsx
index 311f4e1..fcbcb5b 100644
--- a/app/components/prompt-editor/Header.tsx
+++ b/app/components/prompt-editor/Header.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import { useRouter } from 'next/navigation';
-import { colors } from '@/app/lib/colors';
+import { useRouter } from "next/navigation";
+import { colors } from "@/app/lib/colors";
 
 interface HeaderProps {
   sidebarCollapsed: boolean;
@@ -31,18 +30,21 @@ export default function Header({
   const handleUseInEvaluation = () => {
     const params = new URLSearchParams();
     if (currentConfigId && currentConfigVersion) {
-      params.set('config', currentConfigId);
-      params.set('version', currentConfigVersion.toString());
+      params.set("config", currentConfigId);
+      params.set("version", currentConfigVersion.toString());
     }
     // Preserve evaluation context when returning
-    if (datasetId) params.set('dataset', datasetId);
-    if (experimentName) params.set('experiment', experimentName);
+    if (datasetId) params.set("dataset", datasetId);
+    if (experimentName) params.set("experiment", experimentName);
 
     router.push(`/evaluations?${params.toString()}`);
   };
 
   return (
-    <div className="border-b px-6 py-3" style={{ backgroundColor: colors.bg.primary, borderColor: colors.border }}>
+    <div
+      className="border-b px-6 py-3"
+      style={{ backgroundColor: colors.bg.primary, borderColor: colors.border }}
+    >
       <div className="flex items-center justify-between">
         {/* Left: Sidebar toggle + Breadcrumb navigation */}
         <div className="flex items-center gap-3">
@@ -51,11 +53,11 @@ export default function Header({
             onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
             className="p-1.5 rounded flex-shrink-0"
             style={{
-              borderWidth: '1px',
+              borderWidth: "1px",
               borderColor: colors.border,
               backgroundColor: colors.bg.primary,
               color: colors.text.secondary,
-              transition: 'all 0.15s ease'
+              transition: "all 0.15s ease",
             }}
             onMouseEnter={(e) => {
               e.currentTarget.style.backgroundColor = colors.bg.secondary;
@@ -65,13 +67,28 @@ export default function Header({
               e.currentTarget.style.backgroundColor = colors.bg.primary;
               e.currentTarget.style.color = colors.text.secondary;
             }}
-            title={sidebarCollapsed ? 'Show navigation' : 'Hide navigation'}
+            title={sidebarCollapsed ? "Show navigation" : "Hide navigation"}
           >
-            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg
+              className="w-4 h-4"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
               {sidebarCollapsed ? (
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 5l7 7-7 7M5 5l7 7-7 7"
+                />
               ) : (
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
+                />
               )}
             </svg>
           </button>
@@ -79,24 +96,45 @@ export default function Header({
           {/* Breadcrumb Navigation */}
           <nav className="flex items-center gap-2 text-sm">
             <button
-              onClick={() => router.push('/configurations')}
+              onClick={() => router.push("/configurations")}
               className="font-medium transition-colors"
               style={{ color: colors.text.secondary }}
-              onMouseEnter={(e) => e.currentTarget.style.color = colors.accent.primary}
-              onMouseLeave={(e) => e.currentTarget.style.color = colors.text.secondary}
+              onMouseEnter={(e) =>
+                (e.currentTarget.style.color = colors.accent.primary)
+              }
+              onMouseLeave={(e) =>
+                (e.currentTarget.style.color = colors.text.secondary)
+              }
             >
               Configurations
             </button>
-            <svg className="w-4 h-4" style={{ color: colors.text.secondary }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            <svg
+              className="w-4 h-4"
+              style={{ color: colors.text.secondary }}
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 5l7 7-7 7"
+              />
             </svg>
-            <span className="font-semibold" style={{ color: colors.text.primary }}>
-              {currentConfigName || 'New Config'}
+            <span
+              className="font-semibold"
+              style={{ color: colors.text.primary }}
+            >
+              {currentConfigName || "New Config"}
             </span>
             {currentConfigVersion && (
               <span
                 className="text-xs px-1.5 py-0.5 rounded"
-                style={{ backgroundColor: colors.bg.secondary, color: colors.text.secondary }}
+                style={{
+                  backgroundColor: colors.bg.secondary,
+                  color: colors.text.secondary,
+                }}
               >
                 v{currentConfigVersion}
               </span>
@@ -109,9 +147,9 @@ export default function Header({
               <span
                 className="text-xs px-2 py-0.5 rounded-full"
                 style={{
-                  backgroundColor: '#fffbeb',
-                  color: '#b45309',
-                  border: '1px solid #fcd34d'
+                  backgroundColor: "#fffbeb",
+                  color: "#b45309",
+                  border: "1px solid #fcd34d",
                 }}
               >
                 Unsaved
@@ -121,13 +159,23 @@ export default function Header({
               <span
                 className="text-xs px-2 py-0.5 rounded-full flex items-center gap-1"
                 style={{
-                  backgroundColor: '#f0fdf4',
-                  color: '#16a34a',
-                  border: '1px solid #86efac'
+                  backgroundColor: "#f0fdf4",
+                  color: "#16a34a",
+                  border: "1px solid #86efac",
                 }}
               >
-                <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                <svg
+                  className="w-3 h-3"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
                 </svg>
                 Dataset ready
               </span>
@@ -141,10 +189,14 @@ export default function Header({
           disabled={hasUnsavedChanges}
           className="px-4 py-2 rounded-md text-sm font-medium flex items-center gap-2 transition-colors"
           style={{
-            backgroundColor: hasUnsavedChanges ? colors.bg.secondary : colors.accent.primary,
-            color: hasUnsavedChanges ? colors.text.secondary : colors.bg.primary,
-            border: hasUnsavedChanges ? `1px solid ${colors.border}` : 'none',
-            cursor: hasUnsavedChanges ? 'not-allowed' : 'pointer',
+            backgroundColor: hasUnsavedChanges
+              ? colors.bg.secondary
+              : colors.accent.primary,
+            color: hasUnsavedChanges
+              ? colors.text.secondary
+              : colors.bg.primary,
+            border: hasUnsavedChanges ? `1px solid ${colors.border}` : "none",
+            cursor: hasUnsavedChanges ? "not-allowed" : "pointer",
           }}
           onMouseEnter={(e) => {
             if (!hasUnsavedChanges) {
@@ -156,19 +208,45 @@ export default function Header({
               e.currentTarget.style.backgroundColor = colors.accent.primary;
             }
           }}
-          title={hasUnsavedChanges ? 'Save your changes first' : (fromEvaluations ? 'Return to evaluation with this config' : 'Use this config in an evaluation')}
+          title={
+            hasUnsavedChanges
+              ? "Save your changes first"
+              : fromEvaluations
+                ? "Return to evaluation with this config"
+                : "Use this config in an evaluation"
+          }
         >
-          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
             {fromEvaluations ? (
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z" />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M11 15l-3-3m0 0l3-3m-3 3h8M3 12a9 9 0 1118 0 9 9 0 01-18 0z"
+              />
             ) : (
               <>
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+                />
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
               </>
             )}
           </svg>
-          {fromEvaluations ? 'Back to Evaluation' : 'Run Evaluation'}
+          {fromEvaluations ? "Back to Evaluation" : "Run Evaluation"}
         </button>
       </div>
     </div>
diff --git a/app/components/prompt-editor/HistorySidebar.tsx b/app/components/prompt-editor/HistorySidebar.tsx
index a497384..3bb1db9 100644
--- a/app/components/prompt-editor/HistorySidebar.tsx
+++ b/app/components/prompt-editor/HistorySidebar.tsx
@@ -456,14 +456,17 @@ export default function HistorySidebar({
     new Set(),
   );
 
-  const toggleExpand = useCallback((configKey: string) => {
-    setExpandedConfigs((prev: Set<string>) => {
-      const next = new Set<string>(prev);
-      if (next.has(configKey)) next.delete(configKey);
-      else next.add(configKey);
-      return next;
-    });
-  }, [setExpandedConfigs]);
+  const toggleExpand = useCallback(
+    (configKey: string) => {
+      setExpandedConfigs((prev: Set<string>) => {
+        const next = new Set<string>(prev);
+        if (next.has(configKey)) next.delete(configKey);
+        else next.add(configKey);
+        return next;
+      });
+    },
+    [setExpandedConfigs],
+  );
 
   const handleExpandAllConfig = useCallback(
     (meta: ConfigPublic) => {
diff --git a/app/components/prompt-editor/HistoryTab.tsx b/app/components/prompt-editor/HistoryTab.tsx
index 3846e08..4472c6f 100644
--- a/app/components/prompt-editor/HistoryTab.tsx
+++ b/app/components/prompt-editor/HistoryTab.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
-import { colors } from '@/app/lib/colors';
-import { Config } from '@/app/configurations/prompt-editor/types';
+import { colors } from "@/app/lib/colors";
+import { Config } from "@/app/configurations/prompt-editor/types";
 
 interface HistoryTabProps {
   configs: Config[];
@@ -30,14 +29,14 @@ export default function HistoryTab({
   const sortedConfigs = [...configs].sort((a, b) => b.timestamp - a.timestamp);
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+    <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
       {sortedConfigs.length === 0 ? (
         <div
           style={{
-            padding: '24px',
-            textAlign: 'center',
+            padding: "24px",
+            textAlign: "center",
             color: colors.text.secondary,
-            fontSize: '13px',
+            fontSize: "13px",
           }}
         >
           No configurations saved yet.
@@ -48,15 +47,19 @@ export default function HistoryTab({
             key={config.id}
             onClick={() => onLoadConfig(config.id)}
             style={{
-              padding: '12px',
+              padding: "12px",
               border: `2px solid ${
-                selectedConfigId === config.id ? colors.accent.primary : colors.border
+                selectedConfigId === config.id
+                  ? colors.accent.primary
+                  : colors.border
               }`,
-              borderRadius: '6px',
-              cursor: 'pointer',
+              borderRadius: "6px",
+              cursor: "pointer",
               backgroundColor:
-                selectedConfigId === config.id ? colors.bg.secondary : colors.bg.primary,
-              transition: 'all 0.2s ease',
+                selectedConfigId === config.id
+                  ? colors.bg.secondary
+                  : colors.bg.primary,
+              transition: "all 0.2s ease",
             }}
             onMouseEnter={(e) => {
               if (selectedConfigId !== config.id) {
@@ -71,15 +74,15 @@ export default function HistoryTab({
           >
             <div
               style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                marginBottom: '6px',
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                marginBottom: "6px",
               }}
             >
               <span
                 style={{
-                  fontSize: '14px',
+                  fontSize: "14px",
                   fontWeight: 600,
                   color: colors.text.primary,
                 }}
@@ -88,7 +91,7 @@ export default function HistoryTab({
               </span>
               <span
                 style={{
-                  fontSize: '11px',
+                  fontSize: "11px",
                   color: colors.text.secondary,
                 }}
               >
@@ -97,20 +100,21 @@ export default function HistoryTab({
             </div>
             <div
               style={{
-                fontSize: '12px',
+                fontSize: "12px",
                 color: colors.text.secondary,
-                marginBottom: '6px',
+                marginBottom: "6px",
               }}
             >
-              {config.config_blob.completion.type || 'text'} • {config.config_blob.completion.params.model} • temp:{' '}
+              {config.config_blob.completion.type || "text"} •{" "}
+              {config.config_blob.completion.params.model} • temp:{" "}
               {config.config_blob.completion.params.temperature}
             </div>
             {config.commitMessage && (
               <div
                 style={{
-                  fontSize: '12px',
+                  fontSize: "12px",
                   color: colors.text.secondary,
-                  fontStyle: 'italic',
+                  fontStyle: "italic",
                 }}
               >
                 {config.commitMessage}
diff --git a/app/components/prompt-editor/MergeModal.tsx b/app/components/prompt-editor/MergeModal.tsx
index ceeecba..a736c6d 100644
--- a/app/components/prompt-editor/MergeModal.tsx
+++ b/app/components/prompt-editor/MergeModal.tsx
@@ -1,6 +1,9 @@
-import { colors } from '@/app/lib/colors';
-import { UnifiedCommit } from '@/app/configurations/prompt-editor/types';
-import { getAllUnifiedBranches, getUnifiedBranchColor } from '@/app/configurations/prompt-editor/utils';
+import { colors } from "@/app/lib/colors";
+import { UnifiedCommit } from "@/app/configurations/prompt-editor/types";
+import {
+  getAllUnifiedBranches,
+  getUnifiedBranchColor,
+} from "@/app/configurations/prompt-editor/utils";
 
 interface MergeModalProps {
   isOpen: boolean;
@@ -19,25 +22,43 @@ export default function MergeModal({
   commits,
   onMergeToBranchChange,
   onMerge,
-  onClose
+  onClose,
 }: MergeModalProps) {
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 flex items-center justify-center" style={{
-      backgroundColor: 'rgba(0, 0, 0, 0.5)',
-      zIndex: 1000
-    }}>
-      <div className="rounded-lg p-6 shadow-xl" style={{
-        backgroundColor: colors.bg.primary,
-        width: '450px'
-      }}>
-        <h3 className="text-lg font-semibold mb-4" style={{ color: colors.text.primary }}>
+    <div
+      className="fixed inset-0 flex items-center justify-center"
+      style={{
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        zIndex: 1000,
+      }}
+    >
+      <div
+        className="rounded-lg p-6 shadow-xl"
+        style={{
+          backgroundColor: colors.bg.primary,
+          width: "450px",
+        }}
+      >
+        <h3
+          className="text-lg font-semibold mb-4"
+          style={{ color: colors.text.primary }}
+        >
           Merge Branch
         </h3>
         <div className="mb-4">
-          <label className="block text-sm mb-2" style={{ color: colors.text.secondary }}>
-            Merge <strong style={{ color: getUnifiedBranchColor(commits, currentBranch) }}>{currentBranch}</strong> into:
+          <label
+            className="block text-sm mb-2"
+            style={{ color: colors.text.secondary }}
+          >
+            Merge{" "}
+            <strong
+              style={{ color: getUnifiedBranchColor(commits, currentBranch) }}
+            >
+              {currentBranch}
+            </strong>{" "}
+            into:
           </label>
           <select
             value={mergeToBranch}
@@ -46,39 +67,62 @@ export default function MergeModal({
             style={{
               border: `1px solid ${colors.border}`,
               backgroundColor: colors.bg.primary,
-              color: colors.text.primary
+              color: colors.text.primary,
             }}
           >
             <option value="">Select target branch...</option>
-            {getAllUnifiedBranches(commits).filter(b => b !== currentBranch).map(b => <option key={b} value={b}>{b}</option>)}
+            {getAllUnifiedBranches(commits)
+              .filter((b) => b !== currentBranch)
+              .map((b) => (
+                <option key={b} value={b}>
+                  {b}
+                </option>
+              ))}
           </select>
         </div>
-        {mergeToBranch && (() => {
-          const lastMerge = commits.filter(c => c.branch === mergeToBranch && c.mergeFrom === currentBranch).sort((a, b) => b.timestamp - a.timestamp)[0];
-          const newCommits = lastMerge ? commits.filter(c => c.branch === currentBranch && c.timestamp > lastMerge.timestamp) : commits.filter(c => c.branch === currentBranch);
-          return (
-            <div className="p-3 rounded-md mb-4 text-xs" style={{
-              backgroundColor: newCommits.length > 0 ? '#dafbe1' : '#fff8c5',
-              border: `1px solid ${newCommits.length > 0 ? colors.status.success : colors.status.warning}`,
-            }}>
-              {newCommits.length > 0 ? (
-                <>
-                  <strong style={{ color: '#116329' }}>✓ Ready</strong>
-                  <div style={{ color: '#116329', marginTop: '4px' }}>
-                    {newCommits.length} new commit{newCommits.length > 1 ? 's' : ''}
-                  </div>
-                </>
-              ) : (
-                <>
-                  <strong style={{ color: '#7d4e00' }}>⚠ No changes</strong>
-                  <div style={{ color: '#7d4e00', marginTop: '4px' }}>
-                    No new commits since last merge
-                  </div>
-                </>
-              )}
-            </div>
-          );
-        })()}
+        {mergeToBranch &&
+          (() => {
+            const lastMerge = commits
+              .filter(
+                (c) =>
+                  c.branch === mergeToBranch && c.mergeFrom === currentBranch,
+              )
+              .sort((a, b) => b.timestamp - a.timestamp)[0];
+            const newCommits = lastMerge
+              ? commits.filter(
+                  (c) =>
+                    c.branch === currentBranch &&
+                    c.timestamp > lastMerge.timestamp,
+                )
+              : commits.filter((c) => c.branch === currentBranch);
+            return (
+              <div
+                className="p-3 rounded-md mb-4 text-xs"
+                style={{
+                  backgroundColor:
+                    newCommits.length > 0 ? "#dafbe1" : "#fff8c5",
+                  border: `1px solid ${newCommits.length > 0 ? colors.status.success : colors.status.warning}`,
+                }}
+              >
+                {newCommits.length > 0 ? (
+                  <>
+                    <strong style={{ color: "#116329" }}>✓ Ready</strong>
+                    <div style={{ color: "#116329", marginTop: "4px" }}>
+                      {newCommits.length} new commit
+                      {newCommits.length > 1 ? "s" : ""}
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <strong style={{ color: "#7d4e00" }}>⚠ No changes</strong>
+                    <div style={{ color: "#7d4e00", marginTop: "4px" }}>
+                      No new commits since last merge
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })()}
         <div className="flex gap-2 justify-end">
           <button
             onClick={onClose}
@@ -87,11 +131,15 @@ export default function MergeModal({
               backgroundColor: colors.bg.secondary,
               color: colors.text.primary,
               border: `1px solid ${colors.border}`,
-              cursor: 'pointer',
-              transition: 'all 0.15s ease'
+              cursor: "pointer",
+              transition: "all 0.15s ease",
             }}
-            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = colors.bg.primary}
-            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = colors.bg.secondary}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = colors.bg.primary)
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = colors.bg.secondary)
+            }
           >
             Cancel
           </button>
@@ -101,12 +149,16 @@ export default function MergeModal({
             style={{
               backgroundColor: colors.accent.primary,
               color: colors.bg.primary,
-              border: 'none',
-              cursor: 'pointer',
-              transition: 'all 0.15s ease'
+              border: "none",
+              cursor: "pointer",
+              transition: "all 0.15s ease",
             }}
-            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = colors.accent.hover}
-            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = colors.accent.primary}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = colors.accent.hover)
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = colors.accent.primary)
+            }
           >
             Merge
           </button>
diff --git a/app/components/prompt-editor/PromptDiffPane.tsx b/app/components/prompt-editor/PromptDiffPane.tsx
index 1168852..a89f1b8 100644
--- a/app/components/prompt-editor/PromptDiffPane.tsx
+++ b/app/components/prompt-editor/PromptDiffPane.tsx
@@ -1,5 +1,5 @@
-import { colors } from '@/app/lib/colors';
-import { SavedConfig } from '@/app/lib/types/configs';
+import { colors } from "@/app/lib/colors";
+import { SavedConfig } from "@/app/lib/types/configs";
 
 interface PromptDiffPaneProps {
   selectedCommit: SavedConfig;
@@ -7,15 +7,18 @@ interface PromptDiffPaneProps {
 }
 
 interface DiffLine {
-  type: 'same' | 'added' | 'removed';
+  type: "same" | "added" | "removed";
   content: string;
   lineNumber: number;
 }
 
 // Simple diff utility - matches SimplifiedConfigEditor implementation
-function generateDiff(text1: string, text2: string): { left: DiffLine[], right: DiffLine[] } {
-  const lines1 = text1.split('\n');
-  const lines2 = text2.split('\n');
+function generateDiff(
+  text1: string,
+  text2: string,
+): { left: DiffLine[]; right: DiffLine[] } {
+  const lines1 = text1.split("\n");
+  const lines2 = text2.split("\n");
   const left: DiffLine[] = [];
   const right: DiffLine[] = [];
   const maxLen = Math.max(lines1.length, lines2.length);
@@ -26,20 +29,20 @@ function generateDiff(text1: string, text2: string): { left: DiffLine[], right:
 
     if (line1 === null && line2 !== null) {
       // Line only exists in text2 (added)
-      left.push({ type: 'same', content: '', lineNumber: i + 1 });
-      right.push({ type: 'added', content: line2, lineNumber: i + 1 });
+      left.push({ type: "same", content: "", lineNumber: i + 1 });
+      right.push({ type: "added", content: line2, lineNumber: i + 1 });
     } else if (line1 !== null && line2 === null) {
       // Line only exists in text1 (removed)
-      left.push({ type: 'removed', content: line1, lineNumber: i + 1 });
-      right.push({ type: 'same', content: '', lineNumber: i + 1 });
+      left.push({ type: "removed", content: line1, lineNumber: i + 1 });
+      right.push({ type: "same", content: "", lineNumber: i + 1 });
     } else if (line1 !== line2) {
       // Lines are different
-      left.push({ type: 'removed', content: line1 || '', lineNumber: i + 1 });
-      right.push({ type: 'added', content: line2 || '', lineNumber: i + 1 });
+      left.push({ type: "removed", content: line1 || "", lineNumber: i + 1 });
+      right.push({ type: "added", content: line2 || "", lineNumber: i + 1 });
     } else {
       // Lines are the same
-      left.push({ type: 'same', content: line1 || '', lineNumber: i + 1 });
-      right.push({ type: 'same', content: line2 || '', lineNumber: i + 1 });
+      left.push({ type: "same", content: line1 || "", lineNumber: i + 1 });
+      right.push({ type: "same", content: line2 || "", lineNumber: i + 1 });
     }
   }
 
@@ -50,8 +53,13 @@ export default function PromptDiffPane({
   selectedCommit,
   compareWith,
 }: PromptDiffPaneProps) {
-  const { left, right } = generateDiff(compareWith.promptContent, selectedCommit.promptContent);
-  const hasChanges = left.some(line => line.type !== 'same') || right.some(line => line.type !== 'same');
+  const { left, right } = generateDiff(
+    compareWith.promptContent,
+    selectedCommit.promptContent,
+  );
+  const hasChanges =
+    left.some((line) => line.type !== "same") ||
+    right.some((line) => line.type !== "same");
 
   return (
     <div className="flex-1 flex flex-col overflow-hidden">
@@ -62,17 +70,23 @@ export default function PromptDiffPane({
           borderColor: colors.border,
         }}
       >
-        <h3 className="text-sm font-semibold" style={{ color: colors.text.primary }}>
+        <h3
+          className="text-sm font-semibold"
+          style={{ color: colors.text.primary }}
+        >
           Prompt Changes
         </h3>
         <div className="text-xs mt-1" style={{ color: colors.text.secondary }}>
-          Side-by-side comparison: v{compareWith.version} ↔ v{selectedCommit.version}
+          Side-by-side comparison: v{compareWith.version} ↔ v
+          {selectedCommit.version}
         </div>
       </div>
 
       {!hasChanges ? (
         <div className="flex-1 flex items-center justify-center">
-          <p className="text-sm" style={{ color: colors.text.secondary }}>No prompt changes</p>
+          <p className="text-sm" style={{ color: colors.text.secondary }}>
+            No prompt changes
+          </p>
         </div>
       ) : (
         <div className="flex-1 flex flex-col overflow-hidden">
@@ -84,7 +98,10 @@ export default function PromptDiffPane({
               backgroundColor: colors.bg.secondary,
             }}
           >
-            <div className="px-3 py-2 text-xs font-semibold" style={{ color: colors.text.primary }}>
+            <div
+              className="px-3 py-2 text-xs font-semibold"
+              style={{ color: colors.text.primary }}
+            >
               v{compareWith.version} (Before)
             </div>
             <div
@@ -97,7 +114,14 @@ export default function PromptDiffPane({
 
           {/* Side-by-Side Diff */}
           <div className="flex-1 overflow-auto">
-            <div className="grid grid-cols-2" style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace', fontSize: '12px' }}>
+            <div
+              className="grid grid-cols-2"
+              style={{
+                fontFamily:
+                  "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+                fontSize: "12px",
+              }}
+            >
               {/* Left Panel */}
               <div style={{ backgroundColor: colors.bg.primary }}>
                 {left.map((line, idx) => (
@@ -106,18 +130,23 @@ export default function PromptDiffPane({
                     className="px-3 py-1"
                     style={{
                       backgroundColor:
-                        line.type === 'removed' ? '#fee2e2' :
-                        line.type === 'added' ? 'transparent' :
-                        colors.bg.primary,
-                      color: line.type === 'removed' ? colors.status.error : colors.text.primary,
-                      minHeight: '24px',
-                      lineHeight: '1.5',
-                      whiteSpace: 'pre-wrap',
-                      wordBreak: 'break-word',
+                        line.type === "removed"
+                          ? "#fee2e2"
+                          : line.type === "added"
+                            ? "transparent"
+                            : colors.bg.primary,
+                      color:
+                        line.type === "removed"
+                          ? colors.status.error
+                          : colors.text.primary,
+                      minHeight: "24px",
+                      lineHeight: "1.5",
+                      whiteSpace: "pre-wrap",
+                      wordBreak: "break-word",
                     }}
                   >
-                    {line.type === 'removed' && '- '}
-                    {line.content || '\u00A0'}
+                    {line.type === "removed" && "- "}
+                    {line.content || "\u00A0"}
                   </div>
                 ))}
               </div>
@@ -125,7 +154,10 @@ export default function PromptDiffPane({
               {/* Right Panel */}
               <div
                 className="border-l"
-                style={{ borderColor: colors.border, backgroundColor: colors.bg.primary }}
+                style={{
+                  borderColor: colors.border,
+                  backgroundColor: colors.bg.primary,
+                }}
               >
                 {right.map((line, idx) => (
                   <div
@@ -133,18 +165,21 @@ export default function PromptDiffPane({
                     className="px-3 py-1"
                     style={{
                       backgroundColor:
-                        line.type === 'added' ? '#dcfce7' :
-                        line.type === 'removed' ? 'transparent' :
-                        colors.bg.primary,
-                      color: line.type === 'added' ? '#15803d' : colors.text.primary,
-                      minHeight: '24px',
-                      lineHeight: '1.5',
-                      whiteSpace: 'pre-wrap',
-                      wordBreak: 'break-word',
+                        line.type === "added"
+                          ? "#dcfce7"
+                          : line.type === "removed"
+                            ? "transparent"
+                            : colors.bg.primary,
+                      color:
+                        line.type === "added" ? "#15803d" : colors.text.primary,
+                      minHeight: "24px",
+                      lineHeight: "1.5",
+                      whiteSpace: "pre-wrap",
+                      wordBreak: "break-word",
                     }}
                   >
-                    {line.type === 'added' && '+ '}
-                    {line.content || '\u00A0'}
+                    {line.type === "added" && "+ "}
+                    {line.content || "\u00A0"}
                   </div>
                 ))}
               </div>
diff --git a/app/components/prompt-editor/PromptEditorPane.tsx b/app/components/prompt-editor/PromptEditorPane.tsx
index dac04bd..dc3a7ea 100644
--- a/app/components/prompt-editor/PromptEditorPane.tsx
+++ b/app/components/prompt-editor/PromptEditorPane.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { colors } from '@/app/lib/colors';
+import { colors } from "@/app/lib/colors";
 
 interface PromptEditorPaneProps {
   currentContent: string;
@@ -20,7 +19,7 @@ export default function PromptEditorPane({
         className="px-4 py-3 border-b"
         style={{
           backgroundColor: colors.bg.primary,
-          borderColor: colors.border
+          borderColor: colors.border,
         }}
       >
         <h3
@@ -33,24 +32,28 @@ export default function PromptEditorPane({
           Editing on <strong>{currentBranch}</strong>
         </div>
       </div>
-      <div className="flex-1 p-4 overflow-auto" style={{ backgroundColor: colors.bg.secondary }}>
+      <div
+        className="flex-1 p-4 overflow-auto"
+        style={{ backgroundColor: colors.bg.secondary }}
+      >
         <textarea
           value={currentContent}
           onChange={(e) => onContentChange(e.target.value)}
           readOnly={isReadOnly}
           className="w-full h-full rounded-md text-sm focus:outline-none resize-none"
           style={{
-            minHeight: '100%',
-            padding: '16px',
+            minHeight: "100%",
+            padding: "16px",
             border: `1px solid ${colors.border}`,
-            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
-            fontSize: '14px',
-            lineHeight: '1.6',
+            fontFamily:
+              "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+            fontSize: "14px",
+            lineHeight: "1.6",
             backgroundColor: colors.bg.primary,
             color: colors.text.primary,
-            cursor: isReadOnly ? 'default' : 'text',
+            cursor: isReadOnly ? "default" : "text",
           }}
-          placeholder={isReadOnly ? '' : 'Write your prompt here...'}
+          placeholder={isReadOnly ? "" : "Write your prompt here..."}
         />
       </div>
     </div>
diff --git a/app/components/prompt-editor/UnifiedCommitBar.tsx b/app/components/prompt-editor/UnifiedCommitBar.tsx
index a81adf1..fb37fcf 100644
--- a/app/components/prompt-editor/UnifiedCommitBar.tsx
+++ b/app/components/prompt-editor/UnifiedCommitBar.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { colors } from '@/app/lib/colors';
+import { colors } from "@/app/lib/colors";
 
 interface UnifiedCommitBarProps {
   commitMessage: string;
@@ -26,7 +25,7 @@ export default function UnifiedCommitBar({
       style={{
         backgroundColor: colors.bg.primary,
         borderColor: colors.border,
-        padding: '12px 16px',
+        padding: "12px 16px",
       }}
     >
       <div className="flex items-center gap-4">
@@ -41,38 +40,46 @@ export default function UnifiedCommitBar({
           <div
             className="px-2 py-1 rounded text-xs font-medium"
             style={{
-              backgroundColor: hasPromptChanges ? colors.status.success : colors.bg.secondary,
-              color: hasPromptChanges ? '#ffffff' : colors.text.secondary,
+              backgroundColor: hasPromptChanges
+                ? colors.status.success
+                : colors.bg.secondary,
+              color: hasPromptChanges ? "#ffffff" : colors.text.secondary,
             }}
           >
-            {hasPromptChanges ? '✓' : ''} Prompt
+            {hasPromptChanges ? "✓" : ""} Prompt
           </div>
           <div
             className="px-2 py-1 rounded text-xs font-medium"
             style={{
-              backgroundColor: hasConfigChanges ? colors.status.success : colors.bg.secondary,
-              color: hasConfigChanges ? '#ffffff' : colors.text.secondary,
+              backgroundColor: hasConfigChanges
+                ? colors.status.success
+                : colors.bg.secondary,
+              color: hasConfigChanges ? "#ffffff" : colors.text.secondary,
             }}
           >
-            {hasConfigChanges ? '✓' : ''} Config
+            {hasConfigChanges ? "✓" : ""} Config
           </div>
         </div>
 
         {/* Commit Message Input */}
         <input
           type="text"
-          placeholder={hasAnyChanges ? 'Describe your changes...' : 'No changes to commit'}
+          placeholder={
+            hasAnyChanges ? "Describe your changes..." : "No changes to commit"
+          }
           value={commitMessage}
           onChange={(e) => onCommitMessageChange(e.target.value)}
           disabled={!hasAnyChanges}
           className="flex-1 px-4 py-2 rounded-md text-sm focus:outline-none"
           style={{
             border: `1px solid ${colors.border}`,
-            backgroundColor: hasAnyChanges ? colors.bg.primary : colors.bg.secondary,
+            backgroundColor: hasAnyChanges
+              ? colors.bg.primary
+              : colors.bg.secondary,
             color: colors.text.primary,
           }}
           onKeyDown={(e) => {
-            if (e.key === 'Enter' && commitMessage.trim() && hasAnyChanges) {
+            if (e.key === "Enter" && commitMessage.trim() && hasAnyChanges) {
               onCommit();
             }
           }}
@@ -92,10 +99,10 @@ export default function UnifiedCommitBar({
               commitMessage.trim() && hasAnyChanges
                 ? colors.bg.primary
                 : colors.text.secondary,
-            border: 'none',
+            border: "none",
             cursor:
-              commitMessage.trim() && hasAnyChanges ? 'pointer' : 'not-allowed',
-            transition: 'all 0.15s ease',
+              commitMessage.trim() && hasAnyChanges ? "pointer" : "not-allowed",
+            transition: "all 0.15s ease",
           }}
           onMouseEnter={(e) => {
             if (commitMessage.trim() && hasAnyChanges) {
diff --git a/app/components/speech-to-text/ModelComparisonCard.tsx b/app/components/speech-to-text/ModelComparisonCard.tsx
index 7fe9282..38ad0bb 100644
--- a/app/components/speech-to-text/ModelComparisonCard.tsx
+++ b/app/components/speech-to-text/ModelComparisonCard.tsx
@@ -6,8 +6,8 @@
  * - Expandable for full details
  */
 
-import React, { useState, useEffect } from 'react';
-import { colors } from '@/app/lib/colors';
+import React, { useState, useEffect } from "react";
+import { colors } from "@/app/lib/colors";
 
 interface WerMetrics {
   wer: number;
@@ -24,7 +24,7 @@ interface ModelComparisonCardProps {
   modelName: string;
   provider: string;
   transcript: string;
-  status: 'success' | 'error' | 'pending';
+  status: "success" | "error" | "pending";
   error?: string;
   strictMetrics?: WerMetrics;
   lenientMetrics?: WerMetrics;
@@ -38,17 +38,17 @@ interface ModelComparisonCardProps {
 // 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 < 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';
+  if (wer < 5) return "Excellent";
+  if (wer < 10) return "Good";
+  if (wer < 20) return "Fair";
+  return "Poor";
 };
 
 export default function ModelComparisonCard({
@@ -70,7 +70,7 @@ export default function ModelComparisonCard({
   // Reset expanded state when status changes to pending
   // Also reset when modelId changes (new model added)
   useEffect(() => {
-    if (status === 'pending') {
+    if (status === "pending") {
       // eslint-disable-next-line react-hooks/set-state-in-effect
       setIsExpanded(false);
     }
@@ -82,7 +82,8 @@ export default function ModelComparisonCard({
   };
 
   // Check if we have enough data to show expanded content
-  const hasExpandedContent = status === 'success' && (transcript || strictMetrics);
+  const hasExpandedContent =
+    status === "success" && (transcript || strictMetrics);
 
   return (
     <div
@@ -91,12 +92,10 @@ export default function ModelComparisonCard({
         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',
+            ? colors.status.error
+            : colors.border,
+        backgroundColor: isBest ? "rgba(22, 163, 74, 0.02)" : colors.bg.primary,
+        borderWidth: isBest ? "2px" : "1px",
       }}
     >
       {/* Minimal Header - Always Visible */}
@@ -113,9 +112,7 @@ export default function ModelComparisonCard({
 
             {/* 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]"
-              >
+              <span className="text-xs px-1.5 py-0.5 rounded-full font-medium flex-shrink-0 bg-[#dcfce7] text-[#15803d]">
                 Best
               </span>
             )}
@@ -123,20 +120,23 @@ export default function ModelComparisonCard({
 
           {/* Right side: Status/WER + Expand */}
           <div className="flex items-center gap-2 flex-shrink-0">
-            {status === 'pending' && (
+            {status === "pending" && (
               <div
                 className="w-4 h-4 border-2 border-t-transparent rounded-full animate-spin"
-                style={{ borderColor: colors.text.secondary, borderTopColor: 'transparent' }}
+                style={{
+                  borderColor: colors.text.secondary,
+                  borderTopColor: "transparent",
+                }}
               />
             )}
 
-            {status === 'error' && (
+            {status === "error" && (
               <span className="text-xs px-1.5 py-0.5 rounded bg-[#fee2e2] text-[#dc2626]">
                 Error
               </span>
             )}
 
-            {status === 'success' && werPercent !== null && (
+            {status === "success" && werPercent !== null && (
               <span
                 className="text-sm font-bold tabular-nums"
                 style={{ color: getWerColor(werPercent) }}
@@ -158,11 +158,16 @@ export default function ModelComparisonCard({
                   viewBox="0 0 24 24"
                   stroke="currentColor"
                   style={{
-                    transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
-                    transition: 'transform 0.2s ease',
+                    transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
+                    transition: "transform 0.2s ease",
                   }}
                 >
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M19 9l-7 7-7-7"
+                  />
                 </svg>
               </button>
             )}
@@ -170,9 +175,12 @@ export default function ModelComparisonCard({
         </div>
 
         {/* Error Message */}
-        {status === 'error' && (
-          <div className="text-xs mt-2 truncate" style={{ color: colors.status.error }}>
-            {error || 'Transcription failed'}
+        {status === "error" && (
+          <div
+            className="text-xs mt-2 truncate"
+            style={{ color: colors.status.error }}
+          >
+            {error || "Transcription failed"}
           </div>
         )}
       </div>
@@ -181,33 +189,60 @@ export default function ModelComparisonCard({
       {isExpanded && hasExpandedContent && (
         <div
           className="border-t px-3 pb-3 pt-2 space-y-3"
-          style={{ borderColor: colors.border, backgroundColor: colors.bg.secondary }}
+          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 }}>
+              <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) }}>
+                  <span
+                    className="text-lg font-bold"
+                    style={{ color: getWerColor(werPercent) }}
+                  >
                     {werPercent.toFixed(1)}%
                   </span>
-                  <span className="text-xs" style={{ color: getWerColor(werPercent) }}>
+                  <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 }}>
+              <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) }}>
+                  <span
+                    className="text-lg font-bold"
+                    style={{ color: getWerColor(lenientWerPercent) }}
+                  >
                     {lenientWerPercent.toFixed(1)}%
                   </span>
-                  <span className="text-xs" style={{ color: getWerColor(lenientWerPercent) }}>
+                  <span
+                    className="text-xs"
+                    style={{ color: getWerColor(lenientWerPercent) }}
+                  >
                     {getWerLabel(lenientWerPercent)}
                   </span>
                 </div>
@@ -218,9 +253,15 @@ export default function ModelComparisonCard({
             <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' }}
+                style={{
+                  borderColor: colors.text.secondary,
+                  borderTopColor: "transparent",
+                }}
               />
-              <span className="text-xs" style={{ color: colors.text.secondary }}>
+              <span
+                className="text-xs"
+                style={{ color: colors.text.secondary }}
+              >
                 Computing WER...
               </span>
             </div>
@@ -229,27 +270,71 @@ export default function ModelComparisonCard({
           {/* 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 }}>
+              <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 }}>
+              <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 }}>
+              <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 }}>
+              <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>
@@ -259,12 +344,18 @@ export default function ModelComparisonCard({
           {/* Transcription */}
           {transcript && (
             <div>
-              <div className="text-xs font-medium mb-1" style={{ color: colors.text.secondary }}>
+              <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 }}
+                style={{
+                  backgroundColor: colors.bg.primary,
+                  color: colors.text.primary,
+                }}
               >
                 {transcript}
               </div>
@@ -282,8 +373,18 @@ export default function ModelComparisonCard({
                 border: `1px solid ${colors.border}`,
               }}
             >
-              <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              <svg
+                className="w-3 h-3"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M9 5l7 7-7 7"
+                />
               </svg>
               View Diff Comparison
             </button>
diff --git a/app/components/speech-to-text/TranscriptionDiffViewer.tsx b/app/components/speech-to-text/TranscriptionDiffViewer.tsx
index ac11ce3..69473d9 100644
--- a/app/components/speech-to-text/TranscriptionDiffViewer.tsx
+++ b/app/components/speech-to-text/TranscriptionDiffViewer.tsx
@@ -5,11 +5,11 @@
  * Highlights substitutions (yellow), deletions (red), and insertions (green).
  */
 
-import React, { useMemo } from 'react';
-import { colors } from '@/app/lib/colors';
+import { useMemo } from "react";
+import { colors } from "@/app/lib/colors";
 
 export interface DiffSegment {
-  type: 'match' | 'substitution' | 'deletion' | 'insertion';
+  type: "match" | "substitution" | "deletion" | "insertion";
   reference?: string;
   hypothesis?: string;
 }
@@ -22,20 +22,29 @@ interface TranscriptionDiffViewerProps {
 }
 
 // Simple word-level diff algorithm
-export function computeWordDiff(reference: string, hypothesis: string): DiffSegment[] {
-  const refWords = reference.trim().split(/\s+/).filter(w => w.length > 0);
-  const hypWords = hypothesis.trim().split(/\s+/).filter(w => w.length > 0);
+export function computeWordDiff(
+  reference: string,
+  hypothesis: string,
+): DiffSegment[] {
+  const refWords = reference
+    .trim()
+    .split(/\s+/)
+    .filter((w) => w.length > 0);
+  const hypWords = hypothesis
+    .trim()
+    .split(/\s+/)
+    .filter((w) => w.length > 0);
 
   if (refWords.length === 0 && hypWords.length === 0) {
     return [];
   }
 
   if (refWords.length === 0) {
-    return hypWords.map(w => ({ type: 'insertion', hypothesis: w }));
+    return hypWords.map((w) => ({ type: "insertion", hypothesis: w }));
   }
 
   if (hypWords.length === 0) {
-    return refWords.map(w => ({ type: 'deletion', reference: w }));
+    return refWords.map((w) => ({ type: "deletion", reference: w }));
   }
 
   // Use dynamic programming for optimal alignment (Levenshtein-style)
@@ -43,8 +52,12 @@ export function computeWordDiff(reference: string, hypothesis: string): DiffSegm
   const n = hypWords.length;
 
   // Build cost matrix
-  const dp: number[][] = Array(m + 1).fill(null).map(() => Array(n + 1).fill(0));
-  const ops: string[][] = Array(m + 1).fill(null).map(() => Array(n + 1).fill(''));
+  const dp: number[][] = Array(m + 1)
+    .fill(null)
+    .map(() => Array(n + 1).fill(0));
+  const ops: string[][] = Array(m + 1)
+    .fill(null)
+    .map(() => Array(n + 1).fill(""));
 
   for (let i = 0; i <= m; i++) dp[i][0] = i;
   for (let j = 0; j <= n; j++) dp[0][j] = j;
@@ -56,7 +69,7 @@ export function computeWordDiff(reference: string, hypothesis: string): DiffSegm
 
       if (refWord === hypWord) {
         dp[i][j] = dp[i - 1][j - 1];
-        ops[i][j] = 'match';
+        ops[i][j] = "match";
       } else {
         const sub = dp[i - 1][j - 1] + 1;
         const del = dp[i - 1][j] + 1;
@@ -64,13 +77,13 @@ export function computeWordDiff(reference: string, hypothesis: string): DiffSegm
 
         if (sub <= del && sub <= ins) {
           dp[i][j] = sub;
-          ops[i][j] = 'sub';
+          ops[i][j] = "sub";
         } else if (del <= ins) {
           dp[i][j] = del;
-          ops[i][j] = 'del';
+          ops[i][j] = "del";
         } else {
           dp[i][j] = ins;
-          ops[i][j] = 'ins';
+          ops[i][j] = "ins";
         }
       }
     }
@@ -78,20 +91,31 @@ export function computeWordDiff(reference: string, hypothesis: string): DiffSegm
 
   // Backtrack to get alignment
   const segments: DiffSegment[] = [];
-  let i = m, j = n;
+  let i = m,
+    j = n;
 
   while (i > 0 || j > 0) {
-    if (i > 0 && j > 0 && ops[i][j] === 'match') {
-      segments.unshift({ type: 'match', reference: refWords[i - 1], hypothesis: hypWords[j - 1] });
-      i--; j--;
-    } else if (i > 0 && j > 0 && ops[i][j] === 'sub') {
-      segments.unshift({ type: 'substitution', reference: refWords[i - 1], hypothesis: hypWords[j - 1] });
-      i--; j--;
-    } else if (i > 0 && (j === 0 || ops[i][j] === 'del')) {
-      segments.unshift({ type: 'deletion', reference: refWords[i - 1] });
+    if (i > 0 && j > 0 && ops[i][j] === "match") {
+      segments.unshift({
+        type: "match",
+        reference: refWords[i - 1],
+        hypothesis: hypWords[j - 1],
+      });
+      i--;
+      j--;
+    } else if (i > 0 && j > 0 && ops[i][j] === "sub") {
+      segments.unshift({
+        type: "substitution",
+        reference: refWords[i - 1],
+        hypothesis: hypWords[j - 1],
+      });
+      i--;
+      j--;
+    } else if (i > 0 && (j === 0 || ops[i][j] === "del")) {
+      segments.unshift({ type: "deletion", reference: refWords[i - 1] });
       i--;
     } else {
-      segments.unshift({ type: 'insertion', hypothesis: hypWords[j - 1] });
+      segments.unshift({ type: "insertion", hypothesis: hypWords[j - 1] });
       j--;
     }
   }
@@ -105,18 +129,21 @@ export default function TranscriptionDiffViewer({
   showLegend = true,
   compact = false,
 }: TranscriptionDiffViewerProps) {
-  const diffSegments = useMemo(() =>
-    computeWordDiff(groundTruth, hypothesis),
-    [groundTruth, hypothesis]
+  const diffSegments = useMemo(
+    () => computeWordDiff(groundTruth, hypothesis),
+    [groundTruth, hypothesis],
   );
 
   const stats = useMemo(() => {
-    let matches = 0, substitutions = 0, deletions = 0, insertions = 0;
-    diffSegments.forEach(seg => {
-      if (seg.type === 'match') matches++;
-      else if (seg.type === 'substitution') substitutions++;
-      else if (seg.type === 'deletion') deletions++;
-      else if (seg.type === 'insertion') insertions++;
+    let matches = 0,
+      substitutions = 0,
+      deletions = 0,
+      insertions = 0;
+    diffSegments.forEach((seg) => {
+      if (seg.type === "match") matches++;
+      else if (seg.type === "substitution") substitutions++;
+      else if (seg.type === "deletion") deletions++;
+      else if (seg.type === "insertion") insertions++;
     });
     return { matches, substitutions, deletions, insertions };
   }, [diffSegments]);
@@ -130,28 +157,31 @@ export default function TranscriptionDiffViewer({
   }
 
   return (
-    <div className={compact ? 'space-y-2' : 'space-y-4'}>
+    <div className={compact ? "space-y-2" : "space-y-4"}>
       {/* Legend */}
       {showLegend && (
-        <div className="flex items-center gap-4 text-xs" style={{ color: colors.text.secondary }}>
+        <div
+          className="flex items-center gap-4 text-xs"
+          style={{ color: colors.text.secondary }}
+        >
           <div className="flex items-center gap-1.5">
             <span
               className="inline-block w-3 h-3 rounded"
-              style={{ backgroundColor: '#fef3c7' }}
+              style={{ backgroundColor: "#fef3c7" }}
             />
             <span>Substitution ({stats.substitutions})</span>
           </div>
           <div className="flex items-center gap-1.5">
             <span
               className="inline-block w-3 h-3 rounded"
-              style={{ backgroundColor: '#fee2e2' }}
+              style={{ backgroundColor: "#fee2e2" }}
             />
             <span>Deletion ({stats.deletions})</span>
           </div>
           <div className="flex items-center gap-1.5">
             <span
               className="inline-block w-3 h-3 rounded"
-              style={{ backgroundColor: '#dcfce7' }}
+              style={{ backgroundColor: "#dcfce7" }}
             />
             <span>Insertion ({stats.insertions})</span>
           </div>
@@ -165,28 +195,31 @@ export default function TranscriptionDiffViewer({
 
       {/* Ground Truth Row */}
       <div>
-        <div className="text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
+        <div
+          className="text-xs font-medium mb-1.5"
+          style={{ color: colors.text.secondary }}
+        >
           Ground Truth
         </div>
         <div
-          className={`${compact ? 'p-2' : 'p-3'} rounded-md font-mono text-sm leading-relaxed`}
+          className={`${compact ? "p-2" : "p-3"} rounded-md font-mono text-sm leading-relaxed`}
           style={{ backgroundColor: colors.bg.secondary }}
         >
           {diffSegments.map((seg, idx) => {
-            if (seg.type === 'insertion') {
+            if (seg.type === "insertion") {
               // Insertions don't appear in ground truth
               return null;
             }
 
-            const word = seg.reference || '';
-            let bgColor = 'transparent';
-            let textDecoration = 'none';
+            const word = seg.reference || "";
+            let bgColor = "transparent";
+            let textDecoration = "none";
 
-            if (seg.type === 'substitution') {
-              bgColor = '#fef3c7'; // yellow
-            } else if (seg.type === 'deletion') {
-              bgColor = '#fee2e2'; // red
-              textDecoration = 'line-through';
+            if (seg.type === "substitution") {
+              bgColor = "#fef3c7"; // yellow
+            } else if (seg.type === "deletion") {
+              bgColor = "#fee2e2"; // red
+              textDecoration = "line-through";
             }
 
             return (
@@ -196,13 +229,20 @@ export default function TranscriptionDiffViewer({
                   style={{
                     backgroundColor: bgColor,
                     textDecoration,
-                    color: seg.type === 'deletion' ? '#dc2626' : colors.text.primary,
+                    color:
+                      seg.type === "deletion" ? "#dc2626" : colors.text.primary,
                   }}
-                  title={seg.type === 'substitution' ? `→ "${seg.hypothesis}"` : undefined}
+                  title={
+                    seg.type === "substitution"
+                      ? `→ "${seg.hypothesis}"`
+                      : undefined
+                  }
                 >
                   {word}
                 </span>
-                {idx < diffSegments.length - 1 && diffSegments[idx + 1]?.type !== 'insertion' && ' '}
+                {idx < diffSegments.length - 1 &&
+                  diffSegments[idx + 1]?.type !== "insertion" &&
+                  " "}
               </span>
             );
           })}
@@ -211,40 +251,42 @@ export default function TranscriptionDiffViewer({
 
       {/* Hypothesis Row */}
       <div>
-        <div className="text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
+        <div
+          className="text-xs font-medium mb-1.5"
+          style={{ color: colors.text.secondary }}
+        >
           Hypothesis (Transcription)
         </div>
         <div
-          className={`${compact ? 'p-2' : 'p-3'} rounded-md font-mono text-sm leading-relaxed`}
+          className={`${compact ? "p-2" : "p-3"} rounded-md font-mono text-sm leading-relaxed`}
           style={{ backgroundColor: colors.bg.secondary }}
         >
           {diffSegments.map((seg, idx) => {
-            if (seg.type === 'deletion') {
+            if (seg.type === "deletion") {
               // Deletions don't appear in hypothesis, but show placeholder
               return (
                 <span key={idx}>
                   <span
                     className="px-1 mx-0.5 rounded text-xs"
                     style={{
-                      backgroundColor: '#fee2e2',
-                      color: '#dc2626',
+                      backgroundColor: "#fee2e2",
+                      color: "#dc2626",
                     }}
                     title={`Missing: "${seg.reference}"`}
                   >
                     ___
-                  </span>
-                  {' '}
+                  </span>{" "}
                 </span>
               );
             }
 
-            const word = seg.hypothesis || seg.reference || '';
-            let bgColor = 'transparent';
+            const word = seg.hypothesis || seg.reference || "";
+            let bgColor = "transparent";
 
-            if (seg.type === 'substitution') {
-              bgColor = '#fef3c7'; // yellow
-            } else if (seg.type === 'insertion') {
-              bgColor = '#dcfce7'; // green
+            if (seg.type === "substitution") {
+              bgColor = "#fef3c7"; // yellow
+            } else if (seg.type === "insertion") {
+              bgColor = "#dcfce7"; // green
             }
 
             return (
@@ -253,14 +295,22 @@ export default function TranscriptionDiffViewer({
                   className="px-0.5 rounded"
                   style={{
                     backgroundColor: bgColor,
-                    color: seg.type === 'insertion' ? '#16a34a' : colors.text.primary,
-                    fontWeight: seg.type === 'insertion' ? 500 : 'normal',
+                    color:
+                      seg.type === "insertion"
+                        ? "#16a34a"
+                        : colors.text.primary,
+                    fontWeight: seg.type === "insertion" ? 500 : "normal",
                   }}
-                  title={seg.type === 'substitution' ? `Was: "${seg.reference}"` : seg.type === 'insertion' ? 'Inserted' : undefined}
+                  title={
+                    seg.type === "substitution"
+                      ? `Was: "${seg.reference}"`
+                      : seg.type === "insertion"
+                        ? "Inserted"
+                        : undefined
+                  }
                 >
                   {word}
-                </span>
-                {' '}
+                </span>{" "}
               </span>
             );
           })}
@@ -270,32 +320,39 @@ export default function TranscriptionDiffViewer({
       {/* Inline comparison view */}
       {!compact && (
         <div>
-          <div className="text-xs font-medium mb-1.5" style={{ color: colors.text.secondary }}>
+          <div
+            className="text-xs font-medium mb-1.5"
+            style={{ color: colors.text.secondary }}
+          >
             Inline Comparison
           </div>
           <div
             className="p-3 rounded-md font-mono text-sm leading-loose border"
-            style={{ backgroundColor: colors.bg.primary, borderColor: colors.border }}
+            style={{
+              backgroundColor: colors.bg.primary,
+              borderColor: colors.border,
+            }}
           >
             {diffSegments.map((seg, idx) => {
-              if (seg.type === 'match') {
+              if (seg.type === "match") {
                 return (
                   <span key={idx}>
-                    <span style={{ color: colors.text.primary }}>{seg.reference}</span>
-                    {' '}
+                    <span style={{ color: colors.text.primary }}>
+                      {seg.reference}
+                    </span>{" "}
                   </span>
                 );
               }
 
-              if (seg.type === 'substitution') {
+              if (seg.type === "substitution") {
                 return (
                   <span key={idx}>
                     <span
                       className="px-1 rounded"
                       style={{
-                        backgroundColor: '#fef3c7',
-                        textDecoration: 'line-through',
-                        color: '#92400e',
+                        backgroundColor: "#fef3c7",
+                        textDecoration: "line-through",
+                        color: "#92400e",
                       }}
                     >
                       {seg.reference}
@@ -303,50 +360,47 @@ export default function TranscriptionDiffViewer({
                     <span
                       className="px-1 rounded ml-0.5"
                       style={{
-                        backgroundColor: '#fef3c7',
-                        color: '#92400e',
+                        backgroundColor: "#fef3c7",
+                        color: "#92400e",
                         fontWeight: 500,
                       }}
                     >
                       {seg.hypothesis}
-                    </span>
-                    {' '}
+                    </span>{" "}
                   </span>
                 );
               }
 
-              if (seg.type === 'deletion') {
+              if (seg.type === "deletion") {
                 return (
                   <span key={idx}>
                     <span
                       className="px-1 rounded"
                       style={{
-                        backgroundColor: '#fee2e2',
-                        textDecoration: 'line-through',
-                        color: '#dc2626',
+                        backgroundColor: "#fee2e2",
+                        textDecoration: "line-through",
+                        color: "#dc2626",
                       }}
                     >
                       {seg.reference}
-                    </span>
-                    {' '}
+                    </span>{" "}
                   </span>
                 );
               }
 
-              if (seg.type === 'insertion') {
+              if (seg.type === "insertion") {
                 return (
                   <span key={idx}>
                     <span
                       className="px-1 rounded"
                       style={{
-                        backgroundColor: '#dcfce7',
-                        color: '#16a34a',
+                        backgroundColor: "#dcfce7",
+                        color: "#16a34a",
                         fontWeight: 500,
                       }}
                     >
                       +{seg.hypothesis}
-                    </span>
-                    {' '}
+                    </span>{" "}
                   </span>
                 );
               }
diff --git a/app/components/speech-to-text/WaveformVisualizer.tsx b/app/components/speech-to-text/WaveformVisualizer.tsx
index 6d66006..9650048 100644
--- a/app/components/speech-to-text/WaveformVisualizer.tsx
+++ b/app/components/speech-to-text/WaveformVisualizer.tsx
@@ -5,8 +5,8 @@
  * Shows animated frequency bars when playing, static bars when paused
  */
 
-import React, { useRef, useEffect, useCallback } from 'react';
-import { colors } from '@/app/lib/colors';
+import { useRef, useEffect, useCallback } from "react";
+import { colors } from "@/app/lib/colors";
 
 interface WaveformVisualizerProps {
   audioElement: HTMLAudioElement | null;
@@ -33,8 +33,9 @@ export default function WaveformVisualizer({
     if (!audioElement || isInitialized.current) return;
 
     try {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const AudioContextClass = window.AudioContext || (window as any).webkitAudioContext;
+      const AudioContextClass =
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        window.AudioContext || (window as any).webkitAudioContext;
       const audioContext = new AudioContextClass();
       const analyser = audioContext.createAnalyser();
       analyser.fftSize = 64; // Higher = more frequency bins, smoother visualization
@@ -48,7 +49,7 @@ export default function WaveformVisualizer({
       sourceRef.current = source;
       isInitialized.current = true;
     } catch (error) {
-      console.error('Failed to initialize audio context:', error);
+      console.error("Failed to initialize audio context:", error);
     }
   }, [audioElement]);
 
@@ -57,7 +58,7 @@ export default function WaveformVisualizer({
     if (!canvasRef.current) return;
 
     const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
     if (!isPlaying || !analyserRef.current) {
@@ -78,7 +79,7 @@ export default function WaveformVisualizer({
           i * barWidth + gap / 2,
           (canvas.height - barHeight) / 2,
           barWidth - gap,
-          barHeight
+          barHeight,
         );
       }
       return;
@@ -131,7 +132,7 @@ export default function WaveformVisualizer({
 
   // Resume audio context if suspended
   useEffect(() => {
-    if (isPlaying && audioContextRef.current?.state === 'suspended') {
+    if (isPlaying && audioContextRef.current?.state === "suspended") {
       audioContextRef.current.resume();
     }
   }, [isPlaying]);
@@ -153,7 +154,7 @@ export default function WaveformVisualizer({
       ref={canvasRef}
       width={width}
       height={height}
-      style={{ width: '100%', height: `${height}px` }}
+      style={{ width: "100%", height: `${height}px` }}
     />
   );
 }
diff --git a/app/components/types.ts b/app/components/types.ts
index a745c2f..0287054 100644
--- a/app/components/types.ts
+++ b/app/components/types.ts
@@ -2,11 +2,10 @@
  * Shared TypeScript types for evaluation components
  */
 
-// New score structure types
 export interface TraceScore {
   name: string;
   value: number | string;
-  data_type: 'NUMERIC' | 'CATEGORICAL';
+  data_type: "NUMERIC" | "CATEGORICAL";
   comment?: string;
 }
 
@@ -28,7 +27,6 @@ export interface GroupedTraceItem {
   scores: TraceScore[][];
 }
 
-
 // Legacy individual score format (nested structure)
 export interface IndividualScore {
   trace_id: string;
@@ -51,7 +49,7 @@ export interface SummaryScore {
   avg?: number;
   std?: number;
   total_pairs: number;
-  data_type: 'NUMERIC' | 'CATEGORICAL';
+  data_type: "NUMERIC" | "CATEGORICAL";
   distribution?: Record<string, number>; // For categorical data
 }
 
@@ -84,7 +82,10 @@ export interface BasicScoreObject {
 }
 
 // Union type to support both old and new structures
-export type ScoreObject = NewScoreObjectV2 | BasicScoreObject | LegacyScoreObject;
+export type ScoreObject =
+  | NewScoreObjectV2
+  | BasicScoreObject
+  | LegacyScoreObject;
 
 export interface AssistantConfig {
   name: string;
@@ -137,32 +138,40 @@ export interface EvalJob {
 
 // Shared guard: Check if score has summary_scores and intelligently narrow to NewScoreObjectV2 or BasicScoreObject
 // Priority: If it has traces → NewScoreObjectV2, otherwise → BasicScoreObject
-export function hasSummaryScores(score: ScoreObject | null | undefined): score is NewScoreObjectV2 | BasicScoreObject {
+export function hasSummaryScores(
+  score: ScoreObject | null | undefined,
+): score is NewScoreObjectV2 | BasicScoreObject {
   if (!score) return false;
-  if (!('summary_scores' in score)) return false;
+  if (!("summary_scores" in score)) return false;
 
   // Prioritize traces format if available
-  if ('traces' in score) {
-    return true; 
+  if ("traces" in score) {
+    return true;
   }
 
   // Otherwise, it's BasicScoreObject (summary_scores only, no traces, no individual_scores)
   return true;
 }
 
-export function isNewScoreObjectV2(score: ScoreObject | null | undefined): score is NewScoreObjectV2 {
+export function isNewScoreObjectV2(
+  score: ScoreObject | null | undefined,
+): score is NewScoreObjectV2 {
   if (!score) return false;
-  return 'summary_scores' in score && 'traces' in score;
+  return "summary_scores" in score && "traces" in score;
 }
 
-export function isBasicScoreObject(score: ScoreObject | null | undefined): score is BasicScoreObject {
+export function isBasicScoreObject(
+  score: ScoreObject | null | undefined,
+): score is BasicScoreObject {
   if (!score) return false;
-  return 'summary_scores' in score && !('traces' in score);
+  return "summary_scores" in score && !("traces" in score);
 }
 
-export function isLegacyScoreObject(score: ScoreObject | null | undefined): score is LegacyScoreObject {
+export function isLegacyScoreObject(
+  score: ScoreObject | null | undefined,
+): score is LegacyScoreObject {
   if (!score) return false;
-  return 'cosine_similarity' in score;
+  return "cosine_similarity" in score;
 }
 
 // Helper to get score object from job
@@ -170,13 +179,17 @@ export function getScoreObject(job: EvalJob): ScoreObject | null {
   return job.scores || job.score || null;
 }
 
-export function isGroupedFormat(traces: TraceItem[] | GroupedTraceItem[]): traces is GroupedTraceItem[] {
+export function isGroupedFormat(
+  traces: TraceItem[] | GroupedTraceItem[],
+): traces is GroupedTraceItem[] {
   if (!traces || traces.length === 0) return false;
   return "llm_answers" in traces[0] && Array.isArray(traces[0].llm_answers);
 }
 
 // Normalize traces to IndividualScore format for table display
-export function normalizeToIndividualScores(score: ScoreObject | null | undefined): IndividualScore[] {
+export function normalizeToIndividualScores(
+  score: ScoreObject | null | undefined,
+): IndividualScore[] {
   if (!score) return [];
 
   if (isNewScoreObjectV2(score)) {
@@ -184,22 +197,22 @@ export function normalizeToIndividualScores(score: ScoreObject | null | undefine
     // Note: Grouped traces should be detected earlier and handled separately
     return score.traces.map((trace: TraceItem | GroupedTraceItem) => {
       // Handle regular TraceItem format
-      if ('llm_answer' in trace) {
+      if ("llm_answer" in trace) {
         return {
           trace_id: trace.trace_id,
           input: { question: trace.question },
           output: { answer: trace.llm_answer },
           metadata: { ground_truth: trace.ground_truth_answer },
-          trace_scores: trace.scores
+          trace_scores: trace.scores,
         };
       }
       // Should not reach here if grouped format is handled properly
       return {
-        trace_id: '',
-        trace_scores: []
+        trace_id: "",
+        trace_scores: [],
       };
     });
   }
 
   return [];
-}
\ No newline at end of file
+}
diff --git a/app/components/utils.ts b/app/components/utils.ts
index 2821b69..cc9f546 100644
--- a/app/components/utils.ts
+++ b/app/components/utils.ts
@@ -8,18 +8,18 @@
  * @returns Formatted date string (e.g., "15 Jan 2024, 14:30")
  */
 export const formatDate = (dateString?: string): string => {
-  if (!dateString) return 'N/A';
+  if (!dateString) return "N/A";
   try {
     const date = new Date(dateString);
     if (Number.isNaN(date.getTime())) {
       return dateString;
     }
-    const istDate = new Date(date.getTime() + (5.5 * 60 * 60 * 1000));
+    const istDate = new Date(date.getTime() + 5.5 * 60 * 60 * 1000);
     const day = istDate.getDate();
-    const month = istDate.toLocaleDateString('en-US', { month: 'short' });
+    const month = istDate.toLocaleDateString("en-US", { month: "short" });
     const year = istDate.getFullYear();
-    const hours = String(istDate.getHours()).padStart(2, '0');
-    const minutes = String(istDate.getMinutes()).padStart(2, '0');
+    const hours = String(istDate.getHours()).padStart(2, "0");
+    const minutes = String(istDate.getMinutes()).padStart(2, "0");
     return `${day} ${month} ${year}, ${hours}:${minutes}`;
   } catch {
     return dateString;
@@ -31,21 +31,39 @@ export const formatDate = (dateString?: string): string => {
  * @param status - Status string (completed, processing, failed, etc.)
  * @returns Object with bg, border, and text HSL color values
  */
-export const getStatusColor = (status: string): { bg: string; border: string; text: string } => {
+export const getStatusColor = (
+  status: string,
+): { bg: string; border: string; text: string } => {
   switch (status.toLowerCase()) {
-    case 'completed':
-    case 'success':
-      return { bg: 'hsl(134, 61%, 95%)', border: 'hsl(134, 61%, 70%)', text: 'hsl(134, 61%, 25%)' };
-    case 'processing':
-    case 'pending':
-    case 'queued':
-    case 'running':
-      return { bg: 'hsl(46, 100%, 95%)', border: 'hsl(46, 100%, 80%)', text: 'hsl(46, 100%, 25%)' };
-    case 'failed':
-    case 'error':
-      return { bg: 'hsl(8, 86%, 95%)', border: 'hsl(8, 86%, 80%)', text: 'hsl(8, 86%, 40%)' };
+    case "completed":
+    case "success":
+      return {
+        bg: "hsl(134, 61%, 95%)",
+        border: "hsl(134, 61%, 70%)",
+        text: "hsl(134, 61%, 25%)",
+      };
+    case "processing":
+    case "pending":
+    case "queued":
+    case "running":
+      return {
+        bg: "hsl(46, 100%, 95%)",
+        border: "hsl(46, 100%, 80%)",
+        text: "hsl(46, 100%, 25%)",
+      };
+    case "failed":
+    case "error":
+      return {
+        bg: "hsl(8, 86%, 95%)",
+        border: "hsl(8, 86%, 80%)",
+        text: "hsl(8, 86%, 40%)",
+      };
     default:
-      return { bg: 'hsl(0, 0%, 100%)', border: 'hsl(0, 0%, 85%)', text: 'hsl(330, 3%, 49%)' };
+      return {
+        bg: "hsl(0, 0%, 100%)",
+        border: "hsl(0, 0%, 85%)",
+        text: "hsl(330, 3%, 49%)",
+      };
   }
 };
 
@@ -54,7 +72,9 @@ export const getStatusColor = (status: string): { bg: string; border: string; te
  * @param scores - Array of similarity scores
  * @returns Object with high and medium threshold values (percentile-based)
  */
-export const calculateDynamicThresholds = (scores: number[]): { highThreshold: number; mediumThreshold: number } => {
+export const calculateDynamicThresholds = (
+  scores: number[],
+): { highThreshold: number; mediumThreshold: number } => {
   if (scores.length === 0) {
     return { highThreshold: 0.7, mediumThreshold: 0.5 };
   }
@@ -80,17 +100,29 @@ export const calculateDynamicThresholds = (scores: number[]): { highThreshold: n
  */
 export const getScoreColor = (
   similarity: number,
-  thresholds?: { highThreshold: number; mediumThreshold: number }
+  thresholds?: { highThreshold: number; mediumThreshold: number },
 ): { bg: string; border: string; text: string } => {
   // Use dynamic thresholds if provided, otherwise use fixed thresholds
   const highThreshold = thresholds?.highThreshold ?? 0.7;
   const mediumThreshold = thresholds?.mediumThreshold ?? 0.5;
 
   if (similarity >= highThreshold) {
-    return { bg: 'hsl(134, 61%, 95%)', border: 'hsl(134, 61%, 70%)', text: 'hsl(134, 61%, 25%)' };
+    return {
+      bg: "hsl(134, 61%, 95%)",
+      border: "hsl(134, 61%, 70%)",
+      text: "hsl(134, 61%, 25%)",
+    };
   } else if (similarity >= mediumThreshold) {
-    return { bg: 'hsl(46, 100%, 97%)', border: 'hsl(46, 100%, 85%)', text: 'hsla(50, 84%, 58%, 1.00)' };
+    return {
+      bg: "hsl(46, 100%, 97%)",
+      border: "hsl(46, 100%, 85%)",
+      text: "hsla(50, 84%, 58%, 1.00)",
+    };
   } else {
-    return { bg: 'hsl(8, 86%, 95%)', border: 'hsl(8, 86%, 80%)', text: 'hsl(8, 86%, 40%)' };
+    return {
+      bg: "hsl(8, 86%, 95%)",
+      border: "hsl(8, 86%, 80%)",
+      text: "hsl(8, 86%, 40%)",
+    };
   }
 };
diff --git a/app/configurations/page.tsx b/app/configurations/page.tsx
index a362468..1115c9c 100644
--- a/app/configurations/page.tsx
+++ b/app/configurations/page.tsx
@@ -8,28 +8,39 @@
  * - Create new config navigation
  */
 
-"use client"
+"use client";
 
-import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import Sidebar from '@/app/components/Sidebar';
-import { colors } from '@/app/lib/colors';
-import { useConfigs } from '@/app/hooks/useConfigs';
-import { SavedConfig } from '@/app/lib/types/configs';
-import ConfigCard from '@/app/components/ConfigCard';
-import { LoaderBox } from '@/app/components/Loader';
-import { EvalJob } from '@/app/components/types';
-import { useAuth } from '@/app/lib/context/AuthContext';
-import { useApp } from '@/app/lib/context/AppContext';
-import { apiFetch } from '@/app/lib/apiClient';
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import Sidebar from "@/app/components/Sidebar";
+import { colors } from "@/app/lib/colors";
+import { useConfigs } from "@/app/hooks/useConfigs";
+import { SavedConfig } from "@/app/lib/types/configs";
+import ConfigCard from "@/app/components/ConfigCard";
+import { LoaderBox } from "@/app/components/Loader";
+import { EvalJob } from "@/app/components/types";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { useApp } from "@/app/lib/context/AppContext";
+import { apiFetch } from "@/app/lib/apiClient";
 
 export default function ConfigLibraryPage() {
   const router = useRouter();
   const { sidebarCollapsed, setSidebarCollapsed } = useApp();
   const { activeKey } = useAuth();
-  const { configGroups, isLoading, error, refetch, isCached, loadMoreConfigs, hasMoreConfigs, isLoadingMore } = useConfigs({ pageSize: 10 });
-  const [searchQuery, setSearchQuery] = useState('');
-  const [evaluationCounts, setEvaluationCounts] = useState<Record<string, number>>({});
+  const {
+    configGroups,
+    isLoading,
+    error,
+    refetch,
+    isCached,
+    loadMoreConfigs,
+    hasMoreConfigs,
+    isLoadingMore,
+  } = useConfigs({ pageSize: 10 });
+  const [searchQuery, setSearchQuery] = useState("");
+  const [evaluationCounts, setEvaluationCounts] = useState<
+    Record<string, number>
+  >({});
 
   // Fetch evaluation counts for each config
   useEffect(() => {
@@ -37,8 +48,11 @@ export default function ConfigLibraryPage() {
       if (!activeKey) return;
 
       try {
-        const data = await apiFetch<EvalJob[] | { data: EvalJob[] }>('/api/evaluations', activeKey.key);
-        const jobs: EvalJob[] = Array.isArray(data) ? data : (data.data || []);
+        const data = await apiFetch<EvalJob[] | { data: EvalJob[] }>(
+          "/api/evaluations",
+          activeKey.key,
+        );
+        const jobs: EvalJob[] = Array.isArray(data) ? data : data.data || [];
 
         // Count evaluations per config_id
         const counts: Record<string, number> = {};
@@ -50,7 +64,7 @@ export default function ConfigLibraryPage() {
 
         setEvaluationCounts(counts);
       } catch (e) {
-        console.error('Failed to fetch evaluation counts:', e);
+        console.error("Failed to fetch evaluation counts:", e);
       }
     };
 
@@ -58,29 +72,42 @@ export default function ConfigLibraryPage() {
   }, [activeKey]);
 
   // Filter configs based on search query
-  const filteredConfigs = configGroups.filter((group) =>
-    group.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    group.latestVersion.modelName.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    group.latestVersion.instructions.toLowerCase().includes(searchQuery.toLowerCase())
+  const filteredConfigs = configGroups.filter(
+    (group) =>
+      group.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      group.latestVersion.modelName
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase()) ||
+      group.latestVersion.instructions
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase()),
   );
 
   const handleCreateNew = () => {
-    router.push('/configurations/prompt-editor?new=true');
+    router.push("/configurations/prompt-editor?new=true");
   };
 
   const handleUseInEvaluation = (config: SavedConfig) => {
-    router.push(`/evaluations?config=${config.config_id}&version=${config.version}`);
+    router.push(
+      `/evaluations?config=${config.config_id}&version=${config.version}`,
+    );
   };
 
   return (
-    <div className="w-full h-screen flex flex-col" style={{ backgroundColor: colors.bg.secondary }}>
+    <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="/configurations" />
 
         <div className="flex-1 flex flex-col overflow-hidden">
           <div
             className="border-b px-6 py-4"
-            style={{ backgroundColor: colors.bg.primary, borderColor: colors.border }}
+            style={{
+              backgroundColor: colors.bg.primary,
+              borderColor: colors.border,
+            }}
           >
             <div className="flex items-center gap-3">
               <button
@@ -100,19 +127,40 @@ export default function ConfigLibraryPage() {
                   e.currentTarget.style.color = colors.text.secondary;
                 }}
               >
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg
+                  className="w-4 h-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
                   {sidebarCollapsed ? (
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 5l7 7-7 7M5 5l7 7-7 7" />
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M13 5l7 7-7 7M5 5l7 7-7 7"
+                    />
                   ) : (
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M11 19l-7-7 7-7m8 14l-7-7 7-7"
+                    />
                   )}
                 </svg>
               </button>
               <div className="flex-1">
-                <h1 className="text-2xl font-semibold" style={{ color: colors.text.primary }}>
+                <h1
+                  className="text-2xl font-semibold"
+                  style={{ color: colors.text.primary }}
+                >
                   Configuration Library
                 </h1>
-                <p className="text-sm mt-0.5" style={{ color: colors.text.secondary }}>
+                <p
+                  className="text-sm mt-0.5"
+                  style={{ color: colors.text.secondary }}
+                >
                   Manage your prompts and model configurations
                 </p>
               </div>
@@ -122,7 +170,10 @@ export default function ConfigLibraryPage() {
           {/* Toolbar */}
           <div
             className="px-6 py-4 flex items-center gap-4"
-            style={{ borderBottom: `1px solid ${colors.border}`, backgroundColor: colors.bg.primary }}
+            style={{
+              borderBottom: `1px solid ${colors.border}`,
+              backgroundColor: colors.bg.primary,
+            }}
           >
             {/* Search */}
             <div className="flex-1 relative">
@@ -133,7 +184,12 @@ export default function ConfigLibraryPage() {
                 viewBox="0 0 24 24"
                 stroke="currentColor"
               >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                <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
                 type="text"
@@ -154,14 +210,24 @@ export default function ConfigLibraryPage() {
               <span
                 className="text-xs px-2 py-1 rounded-full flex items-center gap-1"
                 style={{
-                  backgroundColor: '#f0fdf4',
-                  color: '#16a34a',
-                  border: '1px solid #86efac'
+                  backgroundColor: "#f0fdf4",
+                  color: "#16a34a",
+                  border: "1px solid #86efac",
                 }}
                 title="Showing cached data. Click refresh to get latest."
               >
-                <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                <svg
+                  className="w-3 h-3"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M13 10V3L4 14h7v7l9-11h-7z"
+                  />
                 </svg>
                 Cached
               </span>
@@ -188,12 +254,17 @@ export default function ConfigLibraryPage() {
               title="Force refresh from server"
             >
               <svg
-                className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`}
+                className={`w-4 h-4 ${isLoading ? "animate-spin" : ""}`}
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
               >
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                />
               </svg>
             </button>
 
@@ -204,13 +275,27 @@ export default function ConfigLibraryPage() {
               style={{
                 backgroundColor: colors.accent.primary,
                 color: colors.bg.primary,
-                border: 'none',
+                border: "none",
               }}
-              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = colors.accent.hover}
-              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = colors.accent.primary}
+              onMouseEnter={(e) =>
+                (e.currentTarget.style.backgroundColor = colors.accent.hover)
+              }
+              onMouseLeave={(e) =>
+                (e.currentTarget.style.backgroundColor = colors.accent.primary)
+              }
             >
-              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 4v16m8-8H4"
+                />
               </svg>
               New Config
             </button>
@@ -224,22 +309,29 @@ export default function ConfigLibraryPage() {
               <div
                 className="rounded-lg p-6 text-center"
                 style={{
-                  backgroundColor: '#fef2f2',
-                  border: '1px solid #fecaca',
+                  backgroundColor: "#fef2f2",
+                  border: "1px solid #fecaca",
                 }}
               >
                 <svg
                   className="w-12 h-12 mx-auto mb-3"
-                  style={{ color: '#dc2626' }}
+                  style={{ color: "#dc2626" }}
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
                 >
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                  />
                 </svg>
-                <p className="text-sm font-medium" style={{ color: '#dc2626' }}>{error}</p>
+                <p className="text-sm font-medium" style={{ color: "#dc2626" }}>
+                  {error}
+                </p>
                 <button
-                  onClick={() => router.push('/keystore')}
+                  onClick={() => router.push("/keystore")}
                   className="mt-4 px-4 py-2 rounded-md text-sm font-medium transition-colors"
                   style={{
                     backgroundColor: colors.accent.primary,
@@ -266,13 +358,21 @@ export default function ConfigLibraryPage() {
                       viewBox="0 0 24 24"
                       stroke="currentColor"
                     >
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                      />
                     </svg>
-                    <p className="text-sm font-medium" style={{ color: colors.text.primary }}>
+                    <p
+                      className="text-sm font-medium"
+                      style={{ color: colors.text.primary }}
+                    >
                       No configs match &quot;{searchQuery}&quot;
                     </p>
                     <button
-                      onClick={() => setSearchQuery('')}
+                      onClick={() => setSearchQuery("")}
                       className="mt-2 text-sm underline"
                       style={{ color: colors.text.secondary }}
                     >
@@ -288,13 +388,29 @@ export default function ConfigLibraryPage() {
                       viewBox="0 0 24 24"
                       stroke="currentColor"
                     >
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+                      />
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                      />
                     </svg>
-                    <p className="text-sm font-medium" style={{ color: colors.text.primary }}>
+                    <p
+                      className="text-sm font-medium"
+                      style={{ color: colors.text.primary }}
+                    >
                       No configurations yet
                     </p>
-                    <p className="text-sm mt-1" style={{ color: colors.text.secondary }}>
+                    <p
+                      className="text-sm mt-1"
+                      style={{ color: colors.text.secondary }}
+                    >
                       Create your first configuration to get started
                     </p>
                     <button
@@ -317,7 +433,9 @@ export default function ConfigLibraryPage() {
                     <ConfigCard
                       key={configGroup.config_id}
                       configGroup={configGroup}
-                      evaluationCount={evaluationCounts[configGroup.config_id] || 0}
+                      evaluationCount={
+                        evaluationCounts[configGroup.config_id] || 0
+                      }
                       onUseInEvaluation={handleUseInEvaluation}
                     />
                   ))}
@@ -335,24 +453,36 @@ export default function ConfigLibraryPage() {
                       }}
                       onMouseEnter={(e) => {
                         if (!isLoadingMore) {
-                          e.currentTarget.style.backgroundColor = colors.bg.secondary;
+                          e.currentTarget.style.backgroundColor =
+                            colors.bg.secondary;
                           e.currentTarget.style.color = colors.text.primary;
                         }
                       }}
                       onMouseLeave={(e) => {
-                        e.currentTarget.style.backgroundColor = colors.bg.primary;
+                        e.currentTarget.style.backgroundColor =
+                          colors.bg.primary;
                         e.currentTarget.style.color = colors.text.secondary;
                       }}
                     >
                       {isLoadingMore ? (
                         <>
-                          <svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                          <svg
+                            className="w-4 h-4 animate-spin"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                          >
+                            <path
+                              strokeLinecap="round"
+                              strokeLinejoin="round"
+                              strokeWidth={2}
+                              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+                            />
                           </svg>
                           Loading...
                         </>
                       ) : (
-                        'Load More'
+                        "Load More"
                       )}
                     </button>
                   </div>
diff --git a/app/configurations/prompt-editor/types.ts b/app/configurations/prompt-editor/types.ts
index 506ec0a..7ee9a92 100644
--- a/app/configurations/prompt-editor/types.ts
+++ b/app/configurations/prompt-editor/types.ts
@@ -11,7 +11,7 @@ export interface Commit {
 }
 
 export interface DiffLine {
-  type: 'added' | 'removed' | 'unchanged';
+  type: "added" | "removed" | "unchanged";
   oldLine: string | null;
   newLine: string | null;
   oldNum: number | null;
@@ -24,15 +24,15 @@ export interface DiffStats {
 }
 
 export interface Tool {
-  type: 'file_search';
+  type: "file_search";
   knowledge_base_ids: string[];
   max_num_results: number;
 }
 
 export interface ConfigBlob {
   completion: {
-    provider: 'openai'; // | 'anthropic' | 'google'; // Only OpenAI supported for now
-    type?: 'text' | 'stt' | 'tts'; // Config type - optional for backward compatibility
+    provider: "openai"; // | 'anthropic' | 'google'; // Only OpenAI supported for now
+    type?: "text" | "stt" | "tts"; // Config type - optional for backward compatibility
     params: {
       model: string;
       instructions: string;
diff --git a/app/configurations/prompt-editor/utils.ts b/app/configurations/prompt-editor/utils.ts
index c412c1c..5d74126 100644
--- a/app/configurations/prompt-editor/utils.ts
+++ b/app/configurations/prompt-editor/utils.ts
@@ -1,11 +1,18 @@
-import { Commit, DiffLine, ConfigBlob, ConfigDiff, UnifiedCommit, UnifiedDiff } from './types';
+import {
+  Commit,
+  DiffLine,
+  ConfigBlob,
+  ConfigDiff,
+  UnifiedCommit,
+  UnifiedDiff,
+} from "./types";
 
 /**
  * Myers diff algorithm for optimized line-by-line diffing
  */
 export const getLineDiff = (oldText: string, newText: string): DiffLine[] => {
-  const oldLines = oldText.split('\n');
-  const newLines = newText.split('\n');
+  const oldLines = oldText.split("\n");
+  const newLines = newText.split("\n");
 
   const n = oldLines.length;
   const m = newLines.length;
@@ -16,7 +23,7 @@ export const getLineDiff = (oldText: string, newText: string): DiffLine[] => {
   v[1] = 0;
 
   for (let d = 0; d <= max; d++) {
-    trace.push({...v});
+    trace.push({ ...v });
     for (let k = -d; k <= d; k += 2) {
       let x;
       if (k === -d || (k !== d && v[k - 1] < v[k + 1])) {
@@ -35,7 +42,8 @@ export const getLineDiff = (oldText: string, newText: string): DiffLine[] => {
 
       if (x >= n && y >= m) {
         const result: DiffLine[] = [];
-        let x = n, y = m;
+        let x = n,
+          y = m;
 
         for (let d = trace.length - 1; d >= 0; d--) {
           const v = trace[d];
@@ -53,11 +61,11 @@ export const getLineDiff = (oldText: string, newText: string): DiffLine[] => {
 
           while (x > prevX && y > prevY) {
             result.unshift({
-              type: 'unchanged',
+              type: "unchanged",
               oldLine: oldLines[x - 1],
               newLine: newLines[y - 1],
               oldNum: x,
-              newNum: y
+              newNum: y,
             });
             x--;
             y--;
@@ -66,20 +74,20 @@ export const getLineDiff = (oldText: string, newText: string): DiffLine[] => {
           if (d > 0) {
             if (x === prevX) {
               result.unshift({
-                type: 'added',
+                type: "added",
                 oldLine: null,
                 newLine: newLines[y - 1],
                 oldNum: null,
-                newNum: y
+                newNum: y,
               });
               y--;
             } else {
               result.unshift({
-                type: 'removed',
+                type: "removed",
                 oldLine: oldLines[x - 1],
                 newLine: null,
                 oldNum: x,
-                newNum: null
+                newNum: null,
               });
               x--;
             }
@@ -98,22 +106,30 @@ export const getLineDiff = (oldText: string, newText: string): DiffLine[] => {
  * Get all unique branches from commits
  */
 export const getAllBranches = (commits: Commit[]): string[] => {
-  return [...new Set(commits.map(c => c.branch))];
+  return [...new Set(commits.map((c) => c.branch))];
 };
 
 /**
  * Get the latest commit on a specific branch
  */
-export const getLatestCommitOnBranch = (commits: Commit[], branchName: string): Commit | null => {
-  const branchCommits = commits.filter(c => c.branch === branchName);
-  return branchCommits.length > 0 ? branchCommits[branchCommits.length - 1] : null;
+export const getLatestCommitOnBranch = (
+  commits: Commit[],
+  branchName: string,
+): Commit | null => {
+  const branchCommits = commits.filter((c) => c.branch === branchName);
+  return branchCommits.length > 0
+    ? branchCommits[branchCommits.length - 1]
+    : null;
 };
 
 /**
  * Get color for a branch based on its index
  */
-export const getBranchColor = (commits: Commit[], branchName: string): string => {
-  const branchColors = ['#0969da', '#8250df', '#1f883d', '#d1242f', '#bf8700'];
+export const getBranchColor = (
+  commits: Commit[],
+  branchName: string,
+): string => {
+  const branchColors = ["#0969da", "#8250df", "#1f883d", "#d1242f", "#bf8700"];
   const index = getAllBranches(commits).indexOf(branchName);
   return branchColors[index % branchColors.length];
 };
@@ -121,8 +137,11 @@ export const getBranchColor = (commits: Commit[], branchName: string): string =>
 /**
  * Get color for a branch based on its index (unified version)
  */
-export const getUnifiedBranchColor = (commits: UnifiedCommit[], branchName: string): string => {
-  const branchColors = ['#0969da', '#8250df', '#1f883d', '#d1242f', '#bf8700'];
+export const getUnifiedBranchColor = (
+  commits: UnifiedCommit[],
+  branchName: string,
+): string => {
+  const branchColors = ["#0969da", "#8250df", "#1f883d", "#d1242f", "#bf8700"];
   const index = getAllUnifiedBranches(commits).indexOf(branchName);
   return branchColors[index % branchColors.length];
 };
@@ -134,7 +153,7 @@ export const formatTime = (timestamp: number): string => {
   const diff = Date.now() - timestamp;
   const hours = Math.floor(diff / 3600000);
   const days = Math.floor(diff / 86400000);
-  if (hours < 1) return 'Just now';
+  if (hours < 1) return "Just now";
   if (hours < 24) return `${hours}h ago`;
   if (days < 7) return `${days}d ago`;
   return new Date(timestamp).toLocaleDateString();
@@ -143,63 +162,73 @@ export const formatTime = (timestamp: number): string => {
 /**
  * Compare two ConfigBlob objects and return the differences
  */
-export const getConfigDiff = (oldConfig: ConfigBlob, newConfig: ConfigBlob): ConfigDiff[] => {
+export const getConfigDiff = (
+  oldConfig: ConfigBlob,
+  newConfig: ConfigBlob,
+): ConfigDiff[] => {
   const diffs: ConfigDiff[] = [];
 
   // Compare provider
   if (oldConfig.completion.provider !== newConfig.completion.provider) {
     diffs.push({
-      field: 'provider',
+      field: "provider",
       oldValue: oldConfig.completion.provider,
       newValue: newConfig.completion.provider,
-      path: 'completion.provider',
-      changed: true
+      path: "completion.provider",
+      changed: true,
     });
   }
 
   // Compare model
   if (oldConfig.completion.params.model !== newConfig.completion.params.model) {
     diffs.push({
-      field: 'model',
+      field: "model",
       oldValue: oldConfig.completion.params.model,
       newValue: newConfig.completion.params.model,
-      path: 'completion.params.model',
-      changed: true
+      path: "completion.params.model",
+      changed: true,
     });
   }
 
   // Compare instructions
-  if (oldConfig.completion.params.instructions !== newConfig.completion.params.instructions) {
+  if (
+    oldConfig.completion.params.instructions !==
+    newConfig.completion.params.instructions
+  ) {
     diffs.push({
-      field: 'instructions',
+      field: "instructions",
       oldValue: oldConfig.completion.params.instructions,
       newValue: newConfig.completion.params.instructions,
-      path: 'completion.params.instructions',
-      changed: true
+      path: "completion.params.instructions",
+      changed: true,
     });
   }
 
   // Compare temperature
-  if (oldConfig.completion.params.temperature !== newConfig.completion.params.temperature) {
+  if (
+    oldConfig.completion.params.temperature !==
+    newConfig.completion.params.temperature
+  ) {
     diffs.push({
-      field: 'temperature',
+      field: "temperature",
       oldValue: oldConfig.completion.params.temperature,
       newValue: newConfig.completion.params.temperature,
-      path: 'completion.params.temperature',
-      changed: true
+      path: "completion.params.temperature",
+      changed: true,
     });
   }
 
   // Compare tools (array comparison using JSON stringify for simplicity)
-  const toolsDifferent = JSON.stringify(oldConfig.completion.params.tools) !==
-                        JSON.stringify(newConfig.completion.params.tools);
+  const toolsDifferent =
+    JSON.stringify(oldConfig.completion.params.tools) !==
+    JSON.stringify(newConfig.completion.params.tools);
   if (toolsDifferent) {
     diffs.push({
-      field: 'tools',
+      field: "tools",
       oldValue: oldConfig.completion.params.tools,
       newValue: newConfig.completion.params.tools,
-      path: 'completion.params.tools',
-      changed: true
+      path: "completion.params.tools",
+      changed: true,
     });
   }
 
@@ -209,32 +238,44 @@ export const getConfigDiff = (oldConfig: ConfigBlob, newConfig: ConfigBlob): Con
 /**
  * Get unified diff combining prompt and config changes
  */
-export const getUnifiedDiff = (oldCommit: UnifiedCommit, newCommit: UnifiedCommit): UnifiedDiff => {
-  const promptDiff = getLineDiff(oldCommit.promptContent, newCommit.promptContent);
+export const getUnifiedDiff = (
+  oldCommit: UnifiedCommit,
+  newCommit: UnifiedCommit,
+): UnifiedDiff => {
+  const promptDiff = getLineDiff(
+    oldCommit.promptContent,
+    newCommit.promptContent,
+  );
   const configDiff = getConfigDiff(oldCommit.configBlob, newCommit.configBlob);
 
   return {
     promptDiff,
     configDiff,
     stats: {
-      promptAdditions: promptDiff.filter(d => d.type === 'added').length,
-      promptDeletions: promptDiff.filter(d => d.type === 'removed').length,
-      configChanges: configDiff.filter(d => d.changed).length
-    }
+      promptAdditions: promptDiff.filter((d) => d.type === "added").length,
+      promptDeletions: promptDiff.filter((d) => d.type === "removed").length,
+      configChanges: configDiff.filter((d) => d.changed).length,
+    },
   };
 };
 
 /**
  * Check if prompt has changes compared to committed version
  */
-export const hasPromptChanges = (current: string, committed: string): boolean => {
+export const hasPromptChanges = (
+  current: string,
+  committed: string,
+): boolean => {
   return current !== committed;
 };
 
 /**
  * Check if config has changes compared to committed version
  */
-export const hasConfigChanges = (current: ConfigBlob, committed: ConfigBlob): boolean => {
+export const hasConfigChanges = (
+  current: ConfigBlob,
+  committed: ConfigBlob,
+): boolean => {
   return JSON.stringify(current) !== JSON.stringify(committed);
 };
 
@@ -244,16 +285,16 @@ export const hasConfigChanges = (current: ConfigBlob, committed: ConfigBlob): bo
 export const generateCommitMessage = (
   promptChanged: boolean,
   configChanged: boolean,
-  configDiff: ConfigDiff[]
+  configDiff: ConfigDiff[],
 ): string => {
   if (promptChanged && configChanged) {
     const configSummary = configDiff
       .slice(0, 2)
-      .map(d => `${d.field}`)
-      .join(', ');
+      .map((d) => `${d.field}`)
+      .join(", ");
     return `Updated prompt and config (${configSummary})`;
   }
-  if (promptChanged) return 'Updated prompt';
+  if (promptChanged) return "Updated prompt";
   if (configChanged) {
     if (configDiff.length === 1) {
       const diff = configDiff[0];
@@ -261,20 +302,25 @@ export const generateCommitMessage = (
     }
     return `Updated config (${configDiff.length} changes)`;
   }
-  return 'No changes';
+  return "No changes";
 };
 
 /**
  * Get all unique branches from unified commits
  */
 export const getAllUnifiedBranches = (commits: UnifiedCommit[]): string[] => {
-  return [...new Set(commits.map(c => c.branch))];
+  return [...new Set(commits.map((c) => c.branch))];
 };
 
 /**
  * Get the latest unified commit on a specific branch
  */
-export const getLatestUnifiedCommitOnBranch = (commits: UnifiedCommit[], branchName: string): UnifiedCommit | null => {
-  const branchCommits = commits.filter(c => c.branch === branchName);
-  return branchCommits.length > 0 ? branchCommits[branchCommits.length - 1] : null;
+export const getLatestUnifiedCommitOnBranch = (
+  commits: UnifiedCommit[],
+  branchName: string,
+): UnifiedCommit | null => {
+  const branchCommits = commits.filter((c) => c.branch === branchName);
+  return branchCommits.length > 0
+    ? branchCommits[branchCommits.length - 1]
+    : null;
 };
diff --git a/app/datasets/page.tsx b/app/datasets/page.tsx
index 2e6b298..7aa8c8f 100644
--- a/app/datasets/page.tsx
+++ b/app/datasets/page.tsx
@@ -4,14 +4,15 @@
  * Allows users to upload CSV datasets and manage them via backend API
  */
 
-"use client"
-import { useState, useEffect } from 'react';
+"use client";
 
-import { useAuth } from '@/app/lib/context/AuthContext';
-import { useApp } from '@/app/lib/context/AppContext';
-import type { APIKey } from '@/app/keystore/page';
-import Sidebar from '@/app/components/Sidebar';
-import { useToast } from '@/app/components/Toast';
+import { useState, useEffect } from "react";
+
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { useApp } from "@/app/lib/context/AppContext";
+import type { APIKey } from "@/app/keystore/page";
+import Sidebar from "@/app/components/Sidebar";
+import { useToast } from "@/app/components/Toast";
 
 // Backend response interface
 export interface Dataset {
@@ -26,7 +27,7 @@ export interface Dataset {
 }
 
 // Keep for backward compatibility with evaluations page
-export const DATASETS_STORAGE_KEY = 'kaapi_datasets';
+export const DATASETS_STORAGE_KEY = "kaapi_datasets";
 
 export default function Datasets() {
   const toast = useToast();
@@ -34,8 +35,8 @@ export default function Datasets() {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [datasets, setDatasets] = useState<Dataset[]>([]);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
-  const [datasetName, setDatasetName] = useState('');
-  const [duplicationFactor, setDuplicationFactor] = useState('1');
+  const [datasetName, setDatasetName] = useState("");
+  const [duplicationFactor, setDuplicationFactor] = useState("1");
   const [isUploading, setIsUploading] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -55,7 +56,7 @@ export default function Datasets() {
 
   const fetchDatasets = async () => {
     if (!apiKey) {
-      setError('No API key found. Please add an API key in the Keystore.');
+      setError("No API key found. Please add an API key in the Keystore.");
       return;
     }
 
@@ -63,24 +64,28 @@ export default function Datasets() {
     setError(null);
 
     try {
-      const response = await fetch('/api/evaluations/datasets', {
-        method: 'GET',
+      const response = await fetch("/api/evaluations/datasets", {
+        method: "GET",
         headers: {
-          'X-API-KEY': apiKey.key,
+          "X-API-KEY": apiKey.key,
         },
       });
 
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || errorData.message || `Failed to fetch datasets: ${response.status}`);
+        throw new Error(
+          errorData.error ||
+            errorData.message ||
+            `Failed to fetch datasets: ${response.status}`,
+        );
       }
 
       const data = await response.json();
-      const datasetList = Array.isArray(data) ? data : (data.data || []);
+      const datasetList = Array.isArray(data) ? data : data.data || [];
       setDatasets(datasetList);
     } catch (err: unknown) {
-      console.error('Failed to fetch datasets:', err);
-      setError(err instanceof Error ? err.message : 'Failed to fetch datasets');
+      console.error("Failed to fetch datasets:", err);
+      setError(err instanceof Error ? err.message : "Failed to fetch datasets");
     } finally {
       setIsLoading(false);
     }
@@ -90,31 +95,31 @@ export default function Datasets() {
     const file = event.target.files?.[0];
     if (!file) return;
 
-    if (!file.name.endsWith('.csv')) {
-      toast.error('Please select a CSV file');
-      event.target.value = '';
+    if (!file.name.endsWith(".csv")) {
+      toast.error("Please select a CSV file");
+      event.target.value = "";
       return;
     }
 
     setSelectedFile(file);
     // Auto-fill dataset name from filename (without extension)
-    const nameFromFile = file.name.replace(/\.csv$/i, '');
+    const nameFromFile = file.name.replace(/\.csv$/i, "");
     setDatasetName(nameFromFile);
   };
 
   const handleUpload = async () => {
     if (!selectedFile) {
-      toast.error('Please select a file first');
+      toast.error("Please select a file first");
       return;
     }
 
     if (!datasetName.trim()) {
-      toast.error('Please enter a dataset name');
+      toast.error("Please enter a dataset name");
       return;
     }
 
     if (!apiKey) {
-      toast.error('No API key found. Please add an API key in the Keystore.');
+      toast.error("No API key found. Please add an API key in the Keystore.");
       return;
     }
 
@@ -123,23 +128,27 @@ export default function Datasets() {
     try {
       // Prepare FormData for upload
       const formData = new FormData();
-      formData.append('file', selectedFile);
-      formData.append('dataset_name', datasetName.trim());
+      formData.append("file", selectedFile);
+      formData.append("dataset_name", datasetName.trim());
 
-      formData.append('duplication_factor', duplicationFactor || '1');
+      formData.append("duplication_factor", duplicationFactor || "1");
 
       // Upload to backend
-      const response = await fetch('/api/evaluations/datasets', {
-        method: 'POST',
+      const response = await fetch("/api/evaluations/datasets", {
+        method: "POST",
         body: formData,
         headers: {
-          'X-API-KEY': apiKey.key,
-        }
+          "X-API-KEY": apiKey.key,
+        },
       });
 
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || errorData.message || `Upload failed with status ${response.status}`);
+        throw new Error(
+          errorData.error ||
+            errorData.message ||
+            `Upload failed with status ${response.status}`,
+        );
       }
 
       await response.json();
@@ -148,16 +157,18 @@ export default function Datasets() {
 
       // Reset form
       setSelectedFile(null);
-      setDatasetName('');
-      setDuplicationFactor('1');
+      setDatasetName("");
+      setDuplicationFactor("1");
 
       // Close modal
       setIsModalOpen(false);
 
-      toast.success('Dataset uploaded successfully!');
+      toast.success("Dataset uploaded successfully!");
     } catch (error) {
-      console.error('Upload error:', error);
-      toast.error(`Failed to upload dataset: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      console.error("Upload error:", error);
+      toast.error(
+        `Failed to upload dataset: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
     } finally {
       setIsUploading(false);
     }
@@ -165,34 +176,40 @@ export default function Datasets() {
 
   const handleDeleteDataset = async (datasetId: number) => {
     if (!apiKey) {
-      toast.error('No API key found');
+      toast.error("No API key found");
       return;
     }
 
     // Using browser confirm for now - could be replaced with a custom modal later
-    if (!confirm('Are you sure you want to delete this dataset?')) {
+    if (!confirm("Are you sure you want to delete this dataset?")) {
       return;
     }
 
     try {
       const response = await fetch(`/api/evaluations/datasets/${datasetId}`, {
-        method: 'DELETE',
+        method: "DELETE",
         headers: {
-          'X-API-KEY': apiKey.key,
+          "X-API-KEY": apiKey.key,
         },
       });
 
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || errorData.message || `Delete failed with status ${response.status}`);
+        throw new Error(
+          errorData.error ||
+            errorData.message ||
+            `Delete failed with status ${response.status}`,
+        );
       }
 
       // Refresh datasets list
       await fetchDatasets();
-      toast.success('Dataset deleted successfully');
+      toast.success("Dataset deleted successfully");
     } catch (error) {
-      console.error('Delete error:', error);
-      toast.error(`Failed to delete dataset: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      console.error("Delete error:", error);
+      toast.error(
+        `Failed to delete dataset: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
     }
   };
 
@@ -205,7 +222,10 @@ export default function Datasets() {
   const paginate = (pageNumber: number) => setCurrentPage(pageNumber);
 
   return (
-    <div className="w-full h-screen flex flex-col" style={{ backgroundColor: '#fafafa' }}>
+    <div
+      className="w-full h-screen flex flex-col"
+      style={{ backgroundColor: "#fafafa" }}
+    >
       <div className="flex flex-1 overflow-hidden">
         {/* Sidebar */}
         <Sidebar collapsed={sidebarCollapsed} activeRoute="/datasets" />
@@ -213,19 +233,29 @@ export default function Datasets() {
         {/* Main Content */}
         <div className="flex-1 flex flex-col overflow-hidden">
           {/* Title Section with Collapse Button */}
-          <div className="border-b px-6 py-4" style={{ backgroundColor: 'hsl(0, 0%, 100%)', borderColor: 'hsl(0, 0%, 85%)' }}>
+          <div
+            className="border-b px-6 py-4"
+            style={{
+              backgroundColor: "hsl(0, 0%, 100%)",
+              borderColor: "hsl(0, 0%, 85%)",
+            }}
+          >
             <div className="flex items-center gap-4">
               <button
                 onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
                 className="p-2 rounded-md transition-colors flex-shrink-0"
                 style={{
-                  borderWidth: '1px',
-                  borderColor: 'hsl(0, 0%, 85%)',
-                  backgroundColor: 'hsl(0, 0%, 100%)',
-                  color: 'hsl(330, 3%, 19%)'
+                  borderWidth: "1px",
+                  borderColor: "hsl(0, 0%, 85%)",
+                  backgroundColor: "hsl(0, 0%, 100%)",
+                  color: "hsl(330, 3%, 19%)",
                 }}
-                onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 95%)'}
-                onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 100%)'}
+                onMouseEnter={(e) =>
+                  (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 95%)")
+                }
+                onMouseLeave={(e) =>
+                  (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 100%)")
+                }
               >
                 <svg
                   className="w-5 h-5"
@@ -251,14 +281,27 @@ export default function Datasets() {
                 </svg>
               </button>
               <div>
-                <h1 className="text-2xl font-semibold" style={{ color: 'hsl(330, 3%, 19%)' }}>Datasets</h1>
-                <p className="text-sm mt-1" style={{ color: 'hsl(330, 3%, 49%)' }}>Manage your evaluation datasets</p>
+                <h1
+                  className="text-2xl font-semibold"
+                  style={{ color: "hsl(330, 3%, 19%)" }}
+                >
+                  Datasets
+                </h1>
+                <p
+                  className="text-sm mt-1"
+                  style={{ color: "hsl(330, 3%, 49%)" }}
+                >
+                  Manage your evaluation datasets
+                </p>
               </div>
             </div>
           </div>
 
           {/* Content Area */}
-          <div className="flex-1 overflow-auto p-6" style={{ backgroundColor: '#fafafa' }}>
+          <div
+            className="flex-1 overflow-auto p-6"
+            style={{ backgroundColor: "#fafafa" }}
+          >
             <div className="max-w-6xl mx-auto space-y-6">
               <DatasetListing
                 datasets={currentDatasets}
@@ -290,8 +333,8 @@ export default function Datasets() {
           onClose={() => {
             setIsModalOpen(false);
             setSelectedFile(null);
-            setDatasetName('');
-            setDuplicationFactor('1');
+            setDatasetName("");
+            setDuplicationFactor("1");
           }}
         />
       )}
@@ -326,21 +369,34 @@ function DatasetListing({
   return (
     <>
       {/* Datasets List Card */}
-      <div className="border rounded-lg p-6" style={{ backgroundColor: 'hsl(0, 0%, 100%)', borderColor: 'hsl(0, 0%, 85%)' }}>
+      <div
+        className="border rounded-lg p-6"
+        style={{
+          backgroundColor: "hsl(0, 0%, 100%)",
+          borderColor: "hsl(0, 0%, 85%)",
+        }}
+      >
         {/* Header with Upload Button */}
         <div className="flex items-center justify-between mb-4">
-          <h2 className="text-lg font-semibold" style={{ color: 'hsl(330, 3%, 19%)' }}>
+          <h2
+            className="text-lg font-semibold"
+            style={{ color: "hsl(330, 3%, 19%)" }}
+          >
             Your Datasets
           </h2>
           <button
             onClick={onUploadNew}
             className="px-4 py-2 rounded-md text-sm font-medium transition-colors"
             style={{
-              backgroundColor: '#171717',
-              color: 'hsl(0, 0%, 100%)'
+              backgroundColor: "#171717",
+              color: "hsl(0, 0%, 100%)",
             }}
-            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#404040'}
-            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#171717'}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = "#404040")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = "#171717")
+            }
           >
             + Upload New Dataset
           </button>
@@ -348,43 +404,83 @@ function DatasetListing({
 
         {/* Loading State */}
         {isLoading && datasets.length === 0 ? (
-          <div className="text-center py-12" style={{ color: 'hsl(330, 3%, 49%)' }}>
-            <svg className="w-12 h-12 mx-auto mb-4 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+          <div
+            className="text-center py-12"
+            style={{ color: "hsl(330, 3%, 49%)" }}
+          >
+            <svg
+              className="w-12 h-12 mx-auto mb-4 animate-spin"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+              />
             </svg>
             <p className="text-sm">Loading datasets...</p>
           </div>
         ) : !apiKey ? (
-          <div className="text-center py-12" style={{ color: 'hsl(330, 3%, 49%)' }}>
+          <div
+            className="text-center py-12"
+            style={{ color: "hsl(330, 3%, 49%)" }}
+          >
             <svg
               className="mx-auto h-12 w-12 mb-4"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
             >
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
+              />
             </svg>
-            <p className="font-medium mb-2" style={{ color: 'hsl(330, 3%, 19%)' }}>No API key found</p>
-            <p className="text-sm mb-4">Please add an API key in the Keystore to manage datasets</p>
+            <p
+              className="font-medium mb-2"
+              style={{ color: "hsl(330, 3%, 19%)" }}
+            >
+              No API key found
+            </p>
+            <p className="text-sm mb-4">
+              Please add an API key in the Keystore to manage datasets
+            </p>
             <a
               href="/keystore"
               className="inline-block px-6 py-2 rounded-md text-sm font-medium transition-colors"
               style={{
-                backgroundColor: '#171717',
-                color: 'hsl(0, 0%, 100%)'
+                backgroundColor: "#171717",
+                color: "hsl(0, 0%, 100%)",
               }}
             >
               Go to Keystore
             </a>
           </div>
         ) : error ? (
-          <div className="border rounded-lg p-6" style={{ backgroundColor: 'hsl(8, 86%, 95%)', borderColor: 'hsl(8, 86%, 80%)' }}>
-            <p className="text-sm font-medium" style={{ color: 'hsl(8, 86%, 40%)' }}>
+          <div
+            className="border rounded-lg p-6"
+            style={{
+              backgroundColor: "hsl(8, 86%, 95%)",
+              borderColor: "hsl(8, 86%, 80%)",
+            }}
+          >
+            <p
+              className="text-sm font-medium"
+              style={{ color: "hsl(8, 86%, 40%)" }}
+            >
               Error: {error}
             </p>
           </div>
         ) : datasets.length === 0 ? (
-          <div className="text-center py-12" style={{ color: 'hsl(330, 3%, 49%)' }}>
+          <div
+            className="text-center py-12"
+            style={{ color: "hsl(330, 3%, 49%)" }}
+          >
             <svg
               className="mx-auto h-12 w-12 mb-4"
               fill="none"
@@ -398,142 +494,263 @@ function DatasetListing({
                 d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
               />
             </svg>
-            <p className="font-medium mb-2" style={{ color: 'hsl(330, 3%, 19%)' }}>No datasets found</p>
-            <p className="text-sm mb-4">Upload your first CSV dataset to get started with evaluations</p>
+            <p
+              className="font-medium mb-2"
+              style={{ color: "hsl(330, 3%, 19%)" }}
+            >
+              No datasets found
+            </p>
+            <p className="text-sm mb-4">
+              Upload your first CSV dataset to get started with evaluations
+            </p>
             <button
               onClick={onUploadNew}
               className="px-6 py-2 rounded-md text-sm font-medium transition-colors"
               style={{
-                backgroundColor: '#171717',
-                color: 'hsl(0, 0%, 100%)'
+                backgroundColor: "#171717",
+                color: "hsl(0, 0%, 100%)",
               }}
-              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#404040'}
-              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#171717'}
+              onMouseEnter={(e) =>
+                (e.currentTarget.style.backgroundColor = "#404040")
+              }
+              onMouseLeave={(e) =>
+                (e.currentTarget.style.backgroundColor = "#171717")
+              }
             >
               Upload Your First Dataset
             </button>
           </div>
         ) : (
           <div className="space-y-3">
-          {datasets.map((dataset) => (
-            <div
-              key={dataset.dataset_id}
-              className="border rounded-lg p-4"
-              style={{
-                backgroundColor: 'hsl(0, 0%, 96.5%)',
-                borderColor: 'hsl(0, 0%, 85%)'
-              }}
-            >
-              <div className="flex items-start justify-between">
-                <div className="flex-1">
-                  <div className="flex items-center gap-3 mb-2">
-                    <svg className="w-6 h-6 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: '#171717' }}>
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                    </svg>
-                    <h3 className="text-lg font-semibold" style={{ color: 'hsl(330, 3%, 19%)' }}>
-                      {dataset.dataset_name}
-                    </h3>
-                  </div>
-                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
-                    <div>
-                      <div className="text-xs uppercase font-semibold mb-1" style={{ color: 'hsl(330, 3%, 49%)' }}>Dataset ID</div>
-                      <div className="text-sm font-medium" style={{ color: 'hsl(330, 3%, 19%)' }}>{dataset.dataset_id}</div>
-                    </div>
-                    <div>
-                      <div className="text-xs uppercase font-semibold mb-1" style={{ color: 'hsl(330, 3%, 49%)' }}>Total Items</div>
-                      <div className="text-sm font-medium" style={{ color: 'hsl(330, 3%, 19%)' }}>{dataset.total_items}</div>
-                    </div>
-                    <div>
-                      <div className="text-xs uppercase font-semibold mb-1" style={{ color: 'hsl(330, 3%, 49%)' }}>Original Items</div>
-                      <div className="text-sm font-medium" style={{ color: 'hsl(330, 3%, 19%)' }}>{dataset.original_items}</div>
+            {datasets.map((dataset) => (
+              <div
+                key={dataset.dataset_id}
+                className="border rounded-lg p-4"
+                style={{
+                  backgroundColor: "hsl(0, 0%, 96.5%)",
+                  borderColor: "hsl(0, 0%, 85%)",
+                }}
+              >
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-3 mb-2">
+                      <svg
+                        className="w-6 h-6 flex-shrink-0"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        style={{ color: "#171717" }}
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                        />
+                      </svg>
+                      <h3
+                        className="text-lg font-semibold"
+                        style={{ color: "hsl(330, 3%, 19%)" }}
+                      >
+                        {dataset.dataset_name}
+                      </h3>
                     </div>
-                    <div>
-                      <div className="text-xs uppercase font-semibold mb-1" style={{ color: 'hsl(330, 3%, 49%)' }}>Duplication Factor</div>
-                      <div className="text-sm font-medium" style={{ color: 'hsl(330, 3%, 19%)' }}>×{dataset.duplication_factor}</div>
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
+                      <div>
+                        <div
+                          className="text-xs uppercase font-semibold mb-1"
+                          style={{ color: "hsl(330, 3%, 49%)" }}
+                        >
+                          Dataset ID
+                        </div>
+                        <div
+                          className="text-sm font-medium"
+                          style={{ color: "hsl(330, 3%, 19%)" }}
+                        >
+                          {dataset.dataset_id}
+                        </div>
+                      </div>
+                      <div>
+                        <div
+                          className="text-xs uppercase font-semibold mb-1"
+                          style={{ color: "hsl(330, 3%, 49%)" }}
+                        >
+                          Total Items
+                        </div>
+                        <div
+                          className="text-sm font-medium"
+                          style={{ color: "hsl(330, 3%, 19%)" }}
+                        >
+                          {dataset.total_items}
+                        </div>
+                      </div>
+                      <div>
+                        <div
+                          className="text-xs uppercase font-semibold mb-1"
+                          style={{ color: "hsl(330, 3%, 49%)" }}
+                        >
+                          Original Items
+                        </div>
+                        <div
+                          className="text-sm font-medium"
+                          style={{ color: "hsl(330, 3%, 19%)" }}
+                        >
+                          {dataset.original_items}
+                        </div>
+                      </div>
+                      <div>
+                        <div
+                          className="text-xs uppercase font-semibold mb-1"
+                          style={{ color: "hsl(330, 3%, 49%)" }}
+                        >
+                          Duplication Factor
+                        </div>
+                        <div
+                          className="text-sm font-medium"
+                          style={{ color: "hsl(330, 3%, 19%)" }}
+                        >
+                          ×{dataset.duplication_factor}
+                        </div>
+                      </div>
                     </div>
                   </div>
-                </div>
-                <div className="flex items-center gap-2 ml-4">
-                  <button
-                    onClick={() => onDelete(dataset.dataset_id)}
-                    className="p-2 rounded-md transition-colors"
-                    style={{
-                      borderWidth: '1px',
-                      borderColor: 'hsl(8, 86%, 80%)',
-                      backgroundColor: 'hsl(0, 0%, 100%)',
-                      color: 'hsl(8, 86%, 40%)'
-                    }}
-                    onMouseEnter={(e) => {
-                      e.currentTarget.style.backgroundColor = 'hsl(8, 86%, 95%)';
-                    }}
-                    onMouseLeave={(e) => {
-                      e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 100%)';
-                    }}
-                    title="Delete Dataset"
-                  >
-                    <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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 className="flex items-center gap-2 ml-4">
+                    <button
+                      onClick={() => onDelete(dataset.dataset_id)}
+                      className="p-2 rounded-md transition-colors"
+                      style={{
+                        borderWidth: "1px",
+                        borderColor: "hsl(8, 86%, 80%)",
+                        backgroundColor: "hsl(0, 0%, 100%)",
+                        color: "hsl(8, 86%, 40%)",
+                      }}
+                      onMouseEnter={(e) => {
+                        e.currentTarget.style.backgroundColor =
+                          "hsl(8, 86%, 95%)";
+                      }}
+                      onMouseLeave={(e) => {
+                        e.currentTarget.style.backgroundColor =
+                          "hsl(0, 0%, 100%)";
+                      }}
+                      title="Delete Dataset"
+                    >
+                      <svg
+                        className="w-5 h-5"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          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>
                 </div>
               </div>
-            </div>
-          ))}
-        </div>
+            ))}
+          </div>
         )}
 
         {/* Pagination */}
-        {!isLoading && !error && apiKey && datasets.length > 0 && totalPages > 1 && (
-          <div className="flex items-center justify-between mt-6 pt-4 border-t" style={{ borderColor: 'hsl(0, 0%, 85%)' }}>
-            <p className="text-sm" style={{ color: 'hsl(330, 3%, 49%)' }}>
-              Page {currentPage} of {totalPages}
-            </p>
-            <div className="flex gap-2">
-              <button
-                onClick={() => onPageChange(currentPage - 1)}
-                disabled={currentPage === 1}
-                className="px-3 py-1 rounded-md text-sm font-medium transition-colors"
-                style={{
-                  backgroundColor: currentPage === 1 ? 'hsl(0, 0%, 95%)' : 'hsl(0, 0%, 100%)',
-                  color: currentPage === 1 ? 'hsl(330, 3%, 70%)' : 'hsl(330, 3%, 19%)',
-                  borderWidth: '1px',
-                  borderColor: 'hsl(0, 0%, 85%)',
-                  cursor: currentPage === 1 ? 'not-allowed' : 'pointer'
-                }}
-              >
-                Previous
-              </button>
-              <button
-                onClick={() => onPageChange(currentPage + 1)}
-                disabled={currentPage === totalPages}
-                className="px-3 py-1 rounded-md text-sm font-medium transition-colors"
-                style={{
-                  backgroundColor: currentPage === totalPages ? 'hsl(0, 0%, 95%)' : 'hsl(0, 0%, 100%)',
-                  color: currentPage === totalPages ? 'hsl(330, 3%, 70%)' : 'hsl(330, 3%, 19%)',
-                  borderWidth: '1px',
-                  borderColor: 'hsl(0, 0%, 85%)',
-                  cursor: currentPage === totalPages ? 'not-allowed' : 'pointer'
-                }}
-              >
-                Next
-              </button>
+        {!isLoading &&
+          !error &&
+          apiKey &&
+          datasets.length > 0 &&
+          totalPages > 1 && (
+            <div
+              className="flex items-center justify-between mt-6 pt-4 border-t"
+              style={{ borderColor: "hsl(0, 0%, 85%)" }}
+            >
+              <p className="text-sm" style={{ color: "hsl(330, 3%, 49%)" }}>
+                Page {currentPage} of {totalPages}
+              </p>
+              <div className="flex gap-2">
+                <button
+                  onClick={() => onPageChange(currentPage - 1)}
+                  disabled={currentPage === 1}
+                  className="px-3 py-1 rounded-md text-sm font-medium transition-colors"
+                  style={{
+                    backgroundColor:
+                      currentPage === 1
+                        ? "hsl(0, 0%, 95%)"
+                        : "hsl(0, 0%, 100%)",
+                    color:
+                      currentPage === 1
+                        ? "hsl(330, 3%, 70%)"
+                        : "hsl(330, 3%, 19%)",
+                    borderWidth: "1px",
+                    borderColor: "hsl(0, 0%, 85%)",
+                    cursor: currentPage === 1 ? "not-allowed" : "pointer",
+                  }}
+                >
+                  Previous
+                </button>
+                <button
+                  onClick={() => onPageChange(currentPage + 1)}
+                  disabled={currentPage === totalPages}
+                  className="px-3 py-1 rounded-md text-sm font-medium transition-colors"
+                  style={{
+                    backgroundColor:
+                      currentPage === totalPages
+                        ? "hsl(0, 0%, 95%)"
+                        : "hsl(0, 0%, 100%)",
+                    color:
+                      currentPage === totalPages
+                        ? "hsl(330, 3%, 70%)"
+                        : "hsl(330, 3%, 19%)",
+                    borderWidth: "1px",
+                    borderColor: "hsl(0, 0%, 85%)",
+                    cursor:
+                      currentPage === totalPages ? "not-allowed" : "pointer",
+                  }}
+                >
+                  Next
+                </button>
+              </div>
             </div>
-          </div>
-        )}
+          )}
       </div>
 
       {/* Info Card */}
-      <div className="border rounded-lg p-6" style={{ backgroundColor: 'hsl(202, 100%, 95%)', borderColor: 'hsl(202, 100%, 80%)' }}>
+      <div
+        className="border rounded-lg p-6"
+        style={{
+          backgroundColor: "hsl(202, 100%, 95%)",
+          borderColor: "hsl(202, 100%, 80%)",
+        }}
+      >
         <div className="flex gap-3">
-          <svg className="w-5 h-5 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: 'hsl(202, 100%, 35%)' }}>
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          <svg
+            className="w-5 h-5 flex-shrink-0 mt-0.5"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            style={{ color: "hsl(202, 100%, 35%)" }}
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
           </svg>
           <div>
-            <p className="text-sm font-medium" style={{ color: 'hsl(202, 100%, 25%)' }}>
+            <p
+              className="text-sm font-medium"
+              style={{ color: "hsl(202, 100%, 25%)" }}
+            >
               Storage Note
             </p>
-            <p className="text-sm mt-1" style={{ color: 'hsl(202, 100%, 30%)' }}>
-              Datasets are stored on the server and synced with Langfuse for evaluation tracking.
+            <p
+              className="text-sm mt-1"
+              style={{ color: "hsl(202, 100%, 30%)" }}
+            >
+              Datasets are stored on the server and synced with Langfuse for
+              evaluation tracking.
             </p>
           </div>
         </div>
@@ -576,157 +793,235 @@ export function UploadDatasetModal({
   // Handle escape key
   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
+      if (e.key === "Escape") {
         onClose();
       }
     };
-    window.addEventListener('keydown', handleEscape);
-    return () => window.removeEventListener('keydown', handleEscape);
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
   }, [onClose]);
 
   return (
     <div
       className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-modalBackdrop"
-      style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+      style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
       onClick={handleBackdropClick}
     >
       <div
         className="border rounded-lg shadow-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto animate-modalContent"
-        style={{ backgroundColor: 'hsl(0, 0%, 100%)', borderColor: 'hsl(0, 0%, 85%)' }}
+        style={{
+          backgroundColor: "hsl(0, 0%, 100%)",
+          borderColor: "hsl(0, 0%, 85%)",
+        }}
         onClick={(e) => e.stopPropagation()}
       >
         {/* Modal Header */}
-        <div className="border-b px-6 py-4 flex items-center justify-between" style={{ borderColor: 'hsl(0, 0%, 85%)' }}>
-          <h2 className="text-lg font-semibold" style={{ color: 'hsl(330, 3%, 19%)' }}>Upload New Dataset</h2>
+        <div
+          className="border-b px-6 py-4 flex items-center justify-between"
+          style={{ borderColor: "hsl(0, 0%, 85%)" }}
+        >
+          <h2
+            className="text-lg font-semibold"
+            style={{ color: "hsl(330, 3%, 19%)" }}
+          >
+            Upload New Dataset
+          </h2>
           <button
             onClick={onClose}
             className="p-1 rounded-md transition-colors"
-            style={{ color: 'hsl(330, 3%, 49%)' }}
-            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 95%)'}
-            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+            style={{ color: "hsl(330, 3%, 49%)" }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 95%)")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = "transparent")
+            }
           >
-            <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            <svg
+              className="w-6 h-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
             </svg>
           </button>
         </div>
 
         {/* Modal Body */}
         <div className="p-6">
-          <p className="text-sm mb-6" style={{ color: 'hsl(330, 3%, 49%)' }}>
-            Upload a CSV file containing your QnA dataset. The file will be stored in your browser&apos;s local storage.
+          <p className="text-sm mb-6" style={{ color: "hsl(330, 3%, 49%)" }}>
+            Upload a CSV file containing your QnA dataset. The file will be
+            stored in your browser&apos;s local storage.
           </p>
 
-        {/* File Selection Area */}
-        <div
-          className="border-2 border-dashed rounded-lg p-12 text-center transition-colors"
-          style={{
-            borderColor: 'hsl(0, 0%, 85%)',
-          }}
-        >
-          <div className="space-y-4">
-            <div style={{ color: 'hsl(330, 3%, 49%)' }}>
+          {/* File Selection Area */}
+          <div
+            className="border-2 border-dashed rounded-lg p-12 text-center transition-colors"
+            style={{
+              borderColor: "hsl(0, 0%, 85%)",
+            }}
+          >
+            <div className="space-y-4">
+              <div style={{ color: "hsl(330, 3%, 49%)" }}>
+                <svg
+                  className="mx-auto h-12 w-12"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                  />
+                </svg>
+              </div>
+              <div>
+                <label
+                  htmlFor="dataset-file-upload"
+                  className="px-6 py-2 rounded-md transition-colors inline-block text-sm font-medium"
+                  style={{
+                    backgroundColor: isUploading
+                      ? "hsl(0, 0%, 95%)"
+                      : "#171717",
+                    color: isUploading
+                      ? "hsl(330, 3%, 49%)"
+                      : "hsl(0, 0%, 100%)",
+                    cursor: isUploading ? "not-allowed" : "pointer",
+                  }}
+                >
+                  Choose CSV File
+                </label>
+                <input
+                  id="dataset-file-upload"
+                  type="file"
+                  accept=".csv"
+                  onChange={onFileSelect}
+                  disabled={isUploading}
+                  className="hidden"
+                />
+              </div>
+              {selectedFile && (
+                <div className="text-sm" style={{ color: "hsl(330, 3%, 49%)" }}>
+                  Selected:{" "}
+                  <span
+                    className="font-medium"
+                    style={{ color: "hsl(330, 3%, 19%)" }}
+                  >
+                    {selectedFile.name}
+                  </span>
+                  <span className="ml-2">
+                    ({Math.round(selectedFile.size / 1024)} KB)
+                  </span>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Dataset Name Field */}
+          {selectedFile && (
+            <>
+              <div className="mt-6">
+                <label
+                  className="block text-sm font-medium mb-2"
+                  style={{ color: "hsl(330, 3%, 19%)" }}
+                >
+                  Dataset Name{" "}
+                  <span style={{ color: "hsl(8, 86%, 40%)" }}>*</span>
+                </label>
+                <input
+                  type="text"
+                  value={datasetName}
+                  onChange={(e) => onDatasetNameChange(e.target.value)}
+                  placeholder="Enter dataset name"
+                  disabled={isUploading}
+                  className="w-full px-4 py-2 rounded-md border text-sm focus:outline-none focus:ring-2"
+                  style={{
+                    borderColor: datasetName ? "#171717" : "hsl(0, 0%, 85%)",
+                    backgroundColor: isUploading
+                      ? "hsl(0, 0%, 97%)"
+                      : "hsl(0, 0%, 100%)",
+                    color: "hsl(330, 3%, 19%)",
+                  }}
+                />
+              </div>
+
+              <div className="mt-4">
+                <label
+                  className="block text-sm font-medium mb-2"
+                  style={{ color: "hsl(330, 3%, 19%)" }}
+                >
+                  Duplication Factor (Optional)
+                </label>
+                <input
+                  type="number"
+                  value={duplicationFactor}
+                  onChange={(e) => onDuplicationFactorChange(e.target.value)}
+                  placeholder="1"
+                  min="1"
+                  disabled={isUploading}
+                  className="w-full px-4 py-2 rounded-md border text-sm focus:outline-none focus:ring-2"
+                  style={{
+                    borderColor: "hsl(0, 0%, 85%)",
+                    backgroundColor: isUploading
+                      ? "hsl(0, 0%, 97%)"
+                      : "hsl(0, 0%, 100%)",
+                    color: "hsl(330, 3%, 19%)",
+                  }}
+                />
+                <p
+                  className="text-xs mt-1"
+                  style={{ color: "hsl(330, 3%, 49%)" }}
+                >
+                  Number of times to duplicate the dataset rows (leave empty or
+                  1 for no duplication)
+                </p>
+              </div>
+            </>
+          )}
+
+          {/* Sample CSV Format */}
+          <div
+            className="mt-6 border rounded-lg p-3"
+            style={{
+              backgroundColor: "hsl(202, 100%, 95%)",
+              borderColor: "hsl(202, 100%, 80%)",
+            }}
+          >
+            <div className="flex gap-2">
               <svg
-                className="mx-auto h-12 w-12"
+                className="w-4 h-4 flex-shrink-0 mt-0.5"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
+                style={{ color: "hsl(202, 100%, 35%)" }}
               >
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
                   strokeWidth={2}
-                  d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                 />
               </svg>
-            </div>
-            <div>
-              <label
-                htmlFor="dataset-file-upload"
-                className="px-6 py-2 rounded-md transition-colors inline-block text-sm font-medium"
-                style={{
-                  backgroundColor: isUploading ? 'hsl(0, 0%, 95%)' : '#171717',
-                  color: isUploading ? 'hsl(330, 3%, 49%)' : 'hsl(0, 0%, 100%)',
-                  cursor: isUploading ? 'not-allowed' : 'pointer'
-                }}
-              >
-                Choose CSV File
-              </label>
-              <input
-                id="dataset-file-upload"
-                type="file"
-                accept=".csv"
-                onChange={onFileSelect}
-                disabled={isUploading}
-                className="hidden"
-              />
-            </div>
-            {selectedFile && (
-              <div className="text-sm" style={{ color: 'hsl(330, 3%, 49%)' }}>
-                Selected: <span className="font-medium" style={{ color: 'hsl(330, 3%, 19%)' }}>{selectedFile.name}</span>
-                <span className="ml-2">({Math.round(selectedFile.size / 1024)} KB)</span>
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Dataset Name Field */}
-        {selectedFile && (
-          <>
-            <div className="mt-6">
-              <label className="block text-sm font-medium mb-2" style={{ color: 'hsl(330, 3%, 19%)' }}>
-                Dataset Name <span style={{ color: 'hsl(8, 86%, 40%)' }}>*</span>
-              </label>
-              <input
-                type="text"
-                value={datasetName}
-                onChange={(e) => onDatasetNameChange(e.target.value)}
-                placeholder="Enter dataset name"
-                disabled={isUploading}
-                className="w-full px-4 py-2 rounded-md border text-sm focus:outline-none focus:ring-2"
-                style={{
-                  borderColor: datasetName ? '#171717' : 'hsl(0, 0%, 85%)',
-                  backgroundColor: isUploading ? 'hsl(0, 0%, 97%)' : 'hsl(0, 0%, 100%)',
-                  color: 'hsl(330, 3%, 19%)'
-                }}
-              />
-            </div>
-
-            <div className="mt-4">
-              <label className="block text-sm font-medium mb-2" style={{ color: 'hsl(330, 3%, 19%)' }}>
-                Duplication Factor (Optional)
-              </label>
-              <input
-                type="number"
-                value={duplicationFactor}
-                onChange={(e) => onDuplicationFactorChange(e.target.value)}
-                placeholder="1"
-                min="1"
-                disabled={isUploading}
-                className="w-full px-4 py-2 rounded-md border text-sm focus:outline-none focus:ring-2"
-                style={{
-                  borderColor: 'hsl(0, 0%, 85%)',
-                  backgroundColor: isUploading ? 'hsl(0, 0%, 97%)' : 'hsl(0, 0%, 100%)',
-                  color: 'hsl(330, 3%, 19%)'
-                }}
-              />
-              <p className="text-xs mt-1" style={{ color: 'hsl(330, 3%, 49%)' }}>
-                Number of times to duplicate the dataset rows (leave empty or 1 for no duplication)
-              </p>
-            </div>
-          </>
-        )}
-
-          {/* Sample CSV Format */}
-          <div className="mt-6 border rounded-lg p-3" style={{ backgroundColor: 'hsl(202, 100%, 95%)', borderColor: 'hsl(202, 100%, 80%)' }}>
-            <div className="flex gap-2">
-              <svg className="w-4 h-4 flex-shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: 'hsl(202, 100%, 35%)' }}>
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
               <div>
-                <p className="text-xs font-medium mb-1" style={{ color: 'hsl(202, 100%, 25%)' }}>Expected CSV Format:</p>
-                <pre className="text-xs font-mono" style={{ color: 'hsl(202, 100%, 30%)' }}>
-{`question,answer
+                <p
+                  className="text-xs font-medium mb-1"
+                  style={{ color: "hsl(202, 100%, 25%)" }}
+                >
+                  Expected CSV Format:
+                </p>
+                <pre
+                  className="text-xs font-mono"
+                  style={{ color: "hsl(202, 100%, 30%)" }}
+                >
+                  {`question,answer
 "What is X?","Answer Y"`}
                 </pre>
               </div>
@@ -735,18 +1030,25 @@ export function UploadDatasetModal({
         </div>
 
         {/* Modal Footer */}
-        <div className="border-t px-6 py-4 flex items-center justify-end gap-3" style={{ borderColor: 'hsl(0, 0%, 85%)' }}>
+        <div
+          className="border-t px-6 py-4 flex items-center justify-end gap-3"
+          style={{ borderColor: "hsl(0, 0%, 85%)" }}
+        >
           <button
             onClick={onClose}
             className="px-4 py-2 rounded-md text-sm font-medium transition-colors"
             style={{
-              borderWidth: '1px',
-              borderColor: 'hsl(0, 0%, 85%)',
-              backgroundColor: 'hsl(0, 0%, 100%)',
-              color: 'hsl(330, 3%, 19%)'
+              borderWidth: "1px",
+              borderColor: "hsl(0, 0%, 85%)",
+              backgroundColor: "hsl(0, 0%, 100%)",
+              color: "hsl(330, 3%, 19%)",
             }}
-            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 95%)'}
-            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 100%)'}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 95%)")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 100%)")
+            }
           >
             Cancel
           </button>
@@ -755,25 +1057,34 @@ export function UploadDatasetModal({
             disabled={!selectedFile || !datasetName.trim() || isUploading}
             className="px-4 py-2 rounded-md text-sm font-medium transition-colors"
             style={{
-              backgroundColor: (!selectedFile || !datasetName.trim() || isUploading) ? 'hsl(0, 0%, 95%)' : '#171717',
-              color: (!selectedFile || !datasetName.trim() || isUploading) ? 'hsl(330, 3%, 49%)' : 'hsl(0, 0%, 100%)',
-              cursor: (!selectedFile || !datasetName.trim() || isUploading) ? 'not-allowed' : 'pointer'
+              backgroundColor:
+                !selectedFile || !datasetName.trim() || isUploading
+                  ? "hsl(0, 0%, 95%)"
+                  : "#171717",
+              color:
+                !selectedFile || !datasetName.trim() || isUploading
+                  ? "hsl(330, 3%, 49%)"
+                  : "hsl(0, 0%, 100%)",
+              cursor:
+                !selectedFile || !datasetName.trim() || isUploading
+                  ? "not-allowed"
+                  : "pointer",
             }}
             onMouseEnter={(e) => {
               if (selectedFile && datasetName.trim() && !isUploading) {
-                e.currentTarget.style.backgroundColor = '#404040';
+                e.currentTarget.style.backgroundColor = "#404040";
               }
             }}
             onMouseLeave={(e) => {
               if (selectedFile && datasetName.trim() && !isUploading) {
-                e.currentTarget.style.backgroundColor = '#171717';
+                e.currentTarget.style.backgroundColor = "#171717";
               }
             }}
           >
-            {isUploading ? 'Uploading...' : 'Upload Dataset'}
+            {isUploading ? "Uploading..." : "Upload Dataset"}
           </button>
         </div>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/app/document/page.tsx b/app/document/page.tsx
index 8570a8e..89b2eeb 100644
--- a/app/document/page.tsx
+++ b/app/document/page.tsx
@@ -1,20 +1,20 @@
 "use client";
 
-import { useState, useEffect } from 'react';
-import { useAuth } from '@/app/lib/context/AuthContext';
-import { useApp } from '@/app/lib/context/AppContext';
-import type { APIKey } from '@/app/keystore/page';
-import Sidebar from '@/app/components/Sidebar';
-import { useToast } from '@/app/components/Toast';
-import { formatDate } from '@/app/components/utils';
+import { useState, useEffect } from "react";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { useApp } from "@/app/lib/context/AppContext";
+import type { APIKey } from "@/app/keystore/page";
+import Sidebar from "@/app/components/Sidebar";
+import { useToast } from "@/app/components/Toast";
+import { formatDate } from "@/app/components/utils";
 
 // Backend response interface
 export interface Document {
-  id: string;  // UUID from backend
-  fname: string;  // Filename from backend
+  id: string; // UUID from backend
+  fname: string; // Filename from backend
   object_store_url: string;
-  signed_url?: string;  // Signed URL for accessing the document
-  file_size?: number;  // File size in bytes (stored from client upload)
+  signed_url?: string; // Signed URL for accessing the document
+  file_size?: number; // File size in bytes (stored from client upload)
   inserted_at?: string;
   updated_at?: string;
 }
@@ -24,7 +24,9 @@ export default function DocumentPage() {
   const { sidebarCollapsed, setSidebarCollapsed } = useApp();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [documents, setDocuments] = useState<Document[]>([]);
-  const [selectedDocument, setSelectedDocument] = useState<Document | null>(null);
+  const [selectedDocument, setSelectedDocument] = useState<Document | null>(
+    null,
+  );
   const [isLoadingDocument, setIsLoadingDocument] = useState(false);
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
   const [isUploading, setIsUploading] = useState(false);
@@ -46,7 +48,7 @@ export default function DocumentPage() {
 
   const fetchDocuments = async () => {
     if (!apiKey) {
-      setError('No API key found. Please add an API key in the Keystore.');
+      setError("No API key found. Please add an API key in the Keystore.");
       return;
     }
 
@@ -54,37 +56,47 @@ export default function DocumentPage() {
     setError(null);
 
     try {
-      const response = await fetch('/api/document', {
-        method: 'GET',
+      const response = await fetch("/api/document", {
+        method: "GET",
         headers: {
-          'X-API-KEY': apiKey.key,
+          "X-API-KEY": apiKey.key,
         },
       });
 
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || errorData.message || `Failed to fetch documents: ${response.status}`);
+        throw new Error(
+          errorData.error ||
+            errorData.message ||
+            `Failed to fetch documents: ${response.status}`,
+        );
       }
 
       const data = await response.json();
-      const documentList = Array.isArray(data) ? data : (data.data || []);
+      const documentList = Array.isArray(data) ? data : data.data || [];
 
       // Load file sizes from localStorage
-      const fileSizeMap = JSON.parse(localStorage.getItem('document_file_sizes') || '{}');
+      const fileSizeMap = JSON.parse(
+        localStorage.getItem("document_file_sizes") || "{}",
+      );
       const documentsWithSize = documentList.map((doc: Document) => ({
         ...doc,
-        file_size: fileSizeMap[doc.id] || doc.file_size
+        file_size: fileSizeMap[doc.id] || doc.file_size,
       }));
 
       // Sort by inserted_at in descending order (latest first)
-      const sortedDocuments = documentsWithSize.sort((a: Document, b: Document) =>
-        new Date(b.inserted_at || 0).getTime() - new Date(a.inserted_at || 0).getTime()
+      const sortedDocuments = documentsWithSize.sort(
+        (a: Document, b: Document) =>
+          new Date(b.inserted_at || 0).getTime() -
+          new Date(a.inserted_at || 0).getTime(),
       );
 
       setDocuments(sortedDocuments);
     } catch (err: unknown) {
-      console.error('Failed to fetch documents:', err);
-      setError(err instanceof Error ? err.message : 'Failed to fetch documents');
+      console.error("Failed to fetch documents:", err);
+      setError(
+        err instanceof Error ? err.message : "Failed to fetch documents",
+      );
     } finally {
       setIsLoading(false);
     }
@@ -105,28 +117,37 @@ export default function DocumentPage() {
     try {
       // Prepare FormData for upload
       const formData = new FormData();
-      formData.append('src', selectedFile);
+      formData.append("src", selectedFile);
 
       // Upload to backend
-      const response = await fetch('/api/document', {
-        method: 'POST',
+      const response = await fetch("/api/document", {
+        method: "POST",
         body: formData,
         headers: {
-          'X-API-KEY': apiKey.key,
-        }
+          "X-API-KEY": apiKey.key,
+        },
       });
 
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || errorData.message || `Upload failed with status ${response.status}`);
+        throw new Error(
+          errorData.error ||
+            errorData.message ||
+            `Upload failed with status ${response.status}`,
+        );
       }
 
       const data = await response.json();
       // Store file size in localStorage for the uploaded document
       if (selectedFile && data.data?.id) {
-        const fileSizeMap = JSON.parse(localStorage.getItem('document_file_sizes') || '{}');
+        const fileSizeMap = JSON.parse(
+          localStorage.getItem("document_file_sizes") || "{}",
+        );
         fileSizeMap[data.data.id] = selectedFile.size;
-        localStorage.setItem('document_file_sizes', JSON.stringify(fileSizeMap));
+        localStorage.setItem(
+          "document_file_sizes",
+          JSON.stringify(fileSizeMap),
+        );
       }
 
       // Refresh documents list
@@ -138,10 +159,12 @@ export default function DocumentPage() {
       // Close modal
       setIsModalOpen(false);
 
-      toast.success('Document uploaded successfully!');
+      toast.success("Document uploaded successfully!");
     } catch (error) {
-      console.error('Upload error:', error);
-      toast.error(`Failed to upload document: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      console.error("Upload error:", error);
+      toast.error(
+        `Failed to upload document: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
     } finally {
       setIsUploading(false);
     }
@@ -149,26 +172,30 @@ export default function DocumentPage() {
 
   const handleDeleteDocument = async (documentId: string) => {
     if (!apiKey) {
-      toast.error('No API key found');
+      toast.error("No API key found");
       return;
     }
 
     // Using browser confirm for now - could be replaced with a custom modal later
-    if (!confirm('Are you sure you want to delete this document?')) {
+    if (!confirm("Are you sure you want to delete this document?")) {
       return;
     }
 
     try {
       const response = await fetch(`/api/document/${documentId}`, {
-        method: 'DELETE',
+        method: "DELETE",
         headers: {
-          'X-API-KEY': apiKey.key,
+          "X-API-KEY": apiKey.key,
         },
       });
 
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || errorData.message || `Delete failed with status ${response.status}`);
+        throw new Error(
+          errorData.error ||
+            errorData.message ||
+            `Delete failed with status ${response.status}`,
+        );
       }
 
       // Clear selected document if it was deleted
@@ -178,10 +205,12 @@ export default function DocumentPage() {
 
       // Refresh documents list
       await fetchDocuments();
-      toast.success('Document deleted successfully');
+      toast.success("Document deleted successfully");
     } catch (error) {
-      console.error('Delete error:', error);
-      toast.error(`Failed to delete document: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      console.error("Delete error:", error);
+      toast.error(
+        `Failed to delete document: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
     }
   };
 
@@ -200,30 +229,32 @@ export default function DocumentPage() {
     setIsLoadingDocument(true);
     try {
       const response = await fetch(`/api/document/${doc.id}`, {
-        method: 'GET',
+        method: "GET",
         headers: {
-          'X-API-KEY': apiKey.key,
+          "X-API-KEY": apiKey.key,
         },
       });
 
       if (!response.ok) {
-        throw new Error('Failed to fetch document details');
+        throw new Error("Failed to fetch document details");
       }
 
       const data = await response.json();
       const documentDetails = data.data || data;
 
       // Load file size from localStorage
-      const fileSizeMap = JSON.parse(localStorage.getItem('document_file_sizes') || '{}');
+      const fileSizeMap = JSON.parse(
+        localStorage.getItem("document_file_sizes") || "{}",
+      );
       const docWithSize = {
         ...documentDetails,
-        file_size: fileSizeMap[documentDetails.id] || documentDetails.file_size
+        file_size: fileSizeMap[documentDetails.id] || documentDetails.file_size,
       };
 
       setSelectedDocument(docWithSize);
     } catch (err) {
-      console.error('Failed to fetch document details:', err);
-      toast.error('Failed to load document preview');
+      console.error("Failed to fetch document details:", err);
+      toast.error("Failed to load document preview");
       // Fallback to the basic document info
       setSelectedDocument(doc);
     } finally {
@@ -232,7 +263,10 @@ export default function DocumentPage() {
   };
 
   return (
-    <div className="w-full h-screen flex flex-col" style={{ backgroundColor: '#fafafa' }}>
+    <div
+      className="w-full h-screen flex flex-col"
+      style={{ backgroundColor: "#fafafa" }}
+    >
       <div className="flex flex-1 overflow-hidden">
         {/* Sidebar */}
         <Sidebar collapsed={sidebarCollapsed} activeRoute="/document" />
@@ -240,19 +274,29 @@ export default function DocumentPage() {
         {/* Main Content */}
         <div className="flex-1 flex flex-col overflow-hidden">
           {/* Title Section with Collapse Button */}
-          <div className="border-b px-6 py-4" style={{ backgroundColor: 'hsl(0, 0%, 100%)', borderColor: 'hsl(0, 0%, 85%)' }}>
+          <div
+            className="border-b px-6 py-4"
+            style={{
+              backgroundColor: "hsl(0, 0%, 100%)",
+              borderColor: "hsl(0, 0%, 85%)",
+            }}
+          >
             <div className="flex items-center gap-4">
               <button
                 onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
                 className="p-2 rounded-md transition-colors flex-shrink-0"
                 style={{
-                  borderWidth: '1px',
-                  borderColor: 'hsl(0, 0%, 85%)',
-                  backgroundColor: 'hsl(0, 0%, 100%)',
-                  color: 'hsl(330, 3%, 19%)'
+                  borderWidth: "1px",
+                  borderColor: "hsl(0, 0%, 85%)",
+                  backgroundColor: "hsl(0, 0%, 100%)",
+                  color: "hsl(330, 3%, 19%)",
                 }}
-                onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 95%)'}
-                onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 100%)'}
+                onMouseEnter={(e) =>
+                  (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 95%)")
+                }
+                onMouseLeave={(e) =>
+                  (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 100%)")
+                }
               >
                 <svg
                   className="w-5 h-5"
@@ -278,16 +322,32 @@ export default function DocumentPage() {
                 </svg>
               </button>
               <div>
-                <h1 className="text-2xl font-semibold" style={{ color: 'hsl(330, 3%, 19%)' }}>Documents</h1>
-                <p className="text-sm mt-1" style={{ color: 'hsl(330, 3%, 49%)' }}>Manage your uploaded documents</p>
+                <h1
+                  className="text-2xl font-semibold"
+                  style={{ color: "hsl(330, 3%, 19%)" }}
+                >
+                  Documents
+                </h1>
+                <p
+                  className="text-sm mt-1"
+                  style={{ color: "hsl(330, 3%, 49%)" }}
+                >
+                  Manage your uploaded documents
+                </p>
               </div>
             </div>
           </div>
 
           {/* Content Area - Split View */}
-          <div className="flex-1 overflow-hidden flex" style={{ backgroundColor: '#fafafa' }}>
+          <div
+            className="flex-1 overflow-hidden flex"
+            style={{ backgroundColor: "#fafafa" }}
+          >
             {/* Left Side: Document List */}
-            <div className="w-1/3 border-r overflow-y-auto" style={{ borderColor: 'hsl(0, 0%, 85%)' }}>
+            <div
+              className="w-1/3 border-r overflow-y-auto"
+              style={{ borderColor: "hsl(0, 0%, 85%)" }}
+            >
               <DocumentListing
                 documents={currentDocuments}
                 selectedDocument={selectedDocument}
@@ -305,7 +365,10 @@ export default function DocumentPage() {
 
             {/* Right Side: Document Preview */}
             <div className="flex-1 overflow-y-auto">
-              <DocumentPreview document={selectedDocument} isLoading={isLoadingDocument} />
+              <DocumentPreview
+                document={selectedDocument}
+                isLoading={isLoadingDocument}
+              />
             </div>
           </div>
         </div>
@@ -358,66 +421,122 @@ function DocumentListing({
 }: DocumentListingProps) {
   return (
     <div className="h-full flex flex-col">
-      <div className="p-4 border-b" style={{ backgroundColor: 'hsl(0, 0%, 100%)', borderColor: 'hsl(0, 0%, 85%)' }}>
+      <div
+        className="p-4 border-b"
+        style={{
+          backgroundColor: "hsl(0, 0%, 100%)",
+          borderColor: "hsl(0, 0%, 85%)",
+        }}
+      >
         <div className="flex items-center justify-between mb-2">
-          <h2 className="text-lg font-semibold" style={{ color: 'hsl(330, 3%, 19%)' }}>
+          <h2
+            className="text-lg font-semibold"
+            style={{ color: "hsl(330, 3%, 19%)" }}
+          >
             Your Documents
           </h2>
           <button
             onClick={onUploadNew}
             className="px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
             style={{
-              backgroundColor: '#171717',
-              color: 'hsl(0, 0%, 100%)'
+              backgroundColor: "#171717",
+              color: "hsl(0, 0%, 100%)",
             }}
-            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#404040'}
-            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#171717'}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = "#404040")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = "#171717")
+            }
           >
             + Upload
           </button>
         </div>
       </div>
 
-      <div className="flex-1 overflow-y-auto p-4" style={{ backgroundColor: 'hsl(0, 0%, 98%)' }}>
+      <div
+        className="flex-1 overflow-y-auto p-4"
+        style={{ backgroundColor: "hsl(0, 0%, 98%)" }}
+      >
         {/* Loading State */}
         {isLoading && documents.length === 0 ? (
-          <div className="text-center py-12" style={{ color: 'hsl(330, 3%, 49%)' }}>
-            <svg className="w-12 h-12 mx-auto mb-4 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+          <div
+            className="text-center py-12"
+            style={{ color: "hsl(330, 3%, 49%)" }}
+          >
+            <svg
+              className="w-12 h-12 mx-auto mb-4 animate-spin"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+              />
             </svg>
             <p className="text-sm">Loading documents...</p>
           </div>
         ) : !apiKey ? (
-          <div className="text-center py-12" style={{ color: 'hsl(330, 3%, 49%)' }}>
+          <div
+            className="text-center py-12"
+            style={{ color: "hsl(330, 3%, 49%)" }}
+          >
             <svg
               className="mx-auto h-12 w-12 mb-4"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
             >
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
+              />
             </svg>
-            <p className="font-medium mb-2" style={{ color: 'hsl(330, 3%, 19%)' }}>No API key found</p>
-            <p className="text-sm mb-4">Please add an API key in the Keystore</p>
+            <p
+              className="font-medium mb-2"
+              style={{ color: "hsl(330, 3%, 19%)" }}
+            >
+              No API key found
+            </p>
+            <p className="text-sm mb-4">
+              Please add an API key in the Keystore
+            </p>
             <a
               href="/keystore"
               className="inline-block px-6 py-2 rounded-md text-sm font-medium transition-colors"
               style={{
-                backgroundColor: '#171717',
-                color: 'hsl(0, 0%, 100%)'
+                backgroundColor: "#171717",
+                color: "hsl(0, 0%, 100%)",
               }}
             >
               Go to Keystore
             </a>
           </div>
         ) : error ? (
-          <div className="border rounded-lg p-6" style={{ backgroundColor: 'hsl(8, 86%, 95%)', borderColor: 'hsl(8, 86%, 80%)' }}>
-            <p className="text-sm font-medium" style={{ color: 'hsl(8, 86%, 40%)' }}>
+          <div
+            className="border rounded-lg p-6"
+            style={{
+              backgroundColor: "hsl(8, 86%, 95%)",
+              borderColor: "hsl(8, 86%, 80%)",
+            }}
+          >
+            <p
+              className="text-sm font-medium"
+              style={{ color: "hsl(8, 86%, 40%)" }}
+            >
               Error: {error}
             </p>
           </div>
         ) : documents.length === 0 ? (
-          <div className="text-center py-12" style={{ color: 'hsl(330, 3%, 49%)' }}>
+          <div
+            className="text-center py-12"
+            style={{ color: "hsl(330, 3%, 49%)" }}
+          >
             <svg
               className="mx-auto h-12 w-12 mb-4"
               fill="none"
@@ -431,17 +550,28 @@ function DocumentListing({
                 d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
               />
             </svg>
-            <p className="font-medium mb-2" style={{ color: 'hsl(330, 3%, 19%)' }}>No documents found</p>
-            <p className="text-sm mb-4">Upload your first document to get started</p>
+            <p
+              className="font-medium mb-2"
+              style={{ color: "hsl(330, 3%, 19%)" }}
+            >
+              No documents found
+            </p>
+            <p className="text-sm mb-4">
+              Upload your first document to get started
+            </p>
             <button
               onClick={onUploadNew}
               className="px-6 py-2 rounded-md text-sm font-medium transition-colors"
               style={{
-                backgroundColor: '#171717',
-                color: 'hsl(0, 0%, 100%)'
+                backgroundColor: "#171717",
+                color: "hsl(0, 0%, 100%)",
               }}
-              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#404040'}
-              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#171717'}
+              onMouseEnter={(e) =>
+                (e.currentTarget.style.backgroundColor = "#404040")
+              }
+              onMouseLeave={(e) =>
+                (e.currentTarget.style.backgroundColor = "#171717")
+              }
             >
               Upload Your First Document
             </button>
@@ -453,30 +583,47 @@ function DocumentListing({
                 key={doc.id}
                 onClick={() => onSelect(doc)}
                 className={`border rounded-lg p-3 cursor-pointer transition-colors ${
-                  selectedDocument?.id === doc.id
-                    ? 'ring-2 ring-offset-1'
-                    : ''
+                  selectedDocument?.id === doc.id ? "ring-2 ring-offset-1" : ""
                 }`}
                 style={{
-                  backgroundColor: selectedDocument?.id === doc.id
-                    ? 'hsl(202, 100%, 95%)'
-                    : 'hsl(0, 0%, 100%)',
-                  borderColor: selectedDocument?.id === doc.id
-                    ? 'hsl(202, 100%, 50%)'
-                    : 'hsl(0, 0%, 85%)'
+                  backgroundColor:
+                    selectedDocument?.id === doc.id
+                      ? "hsl(202, 100%, 95%)"
+                      : "hsl(0, 0%, 100%)",
+                  borderColor:
+                    selectedDocument?.id === doc.id
+                      ? "hsl(202, 100%, 50%)"
+                      : "hsl(0, 0%, 85%)",
                 }}
               >
                 <div className="flex items-start justify-between gap-2">
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-2 mb-1">
-                      <svg className="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: '#171717' }}>
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                      <svg
+                        className="w-5 h-5 flex-shrink-0"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        style={{ color: "#171717" }}
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
+                        />
                       </svg>
-                      <h3 className="text-sm font-semibold truncate" style={{ color: 'hsl(330, 3%, 19%)' }}>
+                      <h3
+                        className="text-sm font-semibold truncate"
+                        style={{ color: "hsl(330, 3%, 19%)" }}
+                      >
                         {doc.fname}
                       </h3>
                     </div>
-                    <div className="text-xs" style={{ color: 'hsl(330, 3%, 49%)' }}>
+                    <div
+                      className="text-xs"
+                      style={{ color: "hsl(330, 3%, 49%)" }}
+                    >
                       <div>{formatDate(doc.inserted_at)}</div>
                     </div>
                   </div>
@@ -487,21 +634,33 @@ function DocumentListing({
                     }}
                     className="p-1.5 rounded-md transition-colors flex-shrink-0"
                     style={{
-                      borderWidth: '1px',
-                      borderColor: 'hsl(8, 86%, 80%)',
-                      backgroundColor: 'hsl(0, 0%, 100%)',
-                      color: 'hsl(8, 86%, 40%)'
+                      borderWidth: "1px",
+                      borderColor: "hsl(8, 86%, 80%)",
+                      backgroundColor: "hsl(0, 0%, 100%)",
+                      color: "hsl(8, 86%, 40%)",
                     }}
                     onMouseEnter={(e) => {
-                      e.currentTarget.style.backgroundColor = 'hsl(8, 86%, 95%)';
+                      e.currentTarget.style.backgroundColor =
+                        "hsl(8, 86%, 95%)";
                     }}
                     onMouseLeave={(e) => {
-                      e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 100%)';
+                      e.currentTarget.style.backgroundColor =
+                        "hsl(0, 0%, 100%)";
                     }}
                     title="Delete Document"
                   >
-                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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
+                      className="w-4 h-4"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        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>
@@ -511,43 +670,63 @@ function DocumentListing({
         )}
 
         {/* Pagination */}
-        {!isLoading && !error && apiKey && documents.length > 0 && totalPages > 1 && (
-          <div className="flex items-center justify-between mt-4 pt-4 border-t" style={{ borderColor: 'hsl(0, 0%, 85%)' }}>
-            <p className="text-sm" style={{ color: 'hsl(330, 3%, 49%)' }}>
-              Page {currentPage} of {totalPages}
-            </p>
-            <div className="flex gap-2">
-              <button
-                onClick={() => onPageChange(currentPage - 1)}
-                disabled={currentPage === 1}
-                className="px-3 py-1 rounded-md text-sm font-medium transition-colors"
-                style={{
-                  backgroundColor: currentPage === 1 ? 'hsl(0, 0%, 95%)' : 'hsl(0, 0%, 100%)',
-                  color: currentPage === 1 ? 'hsl(330, 3%, 70%)' : 'hsl(330, 3%, 19%)',
-                  borderWidth: '1px',
-                  borderColor: 'hsl(0, 0%, 85%)',
-                  cursor: currentPage === 1 ? 'not-allowed' : 'pointer'
-                }}
-              >
-                Previous
-              </button>
-              <button
-                onClick={() => onPageChange(currentPage + 1)}
-                disabled={currentPage === totalPages}
-                className="px-3 py-1 rounded-md text-sm font-medium transition-colors"
-                style={{
-                  backgroundColor: currentPage === totalPages ? 'hsl(0, 0%, 95%)' : 'hsl(0, 0%, 100%)',
-                  color: currentPage === totalPages ? 'hsl(330, 3%, 70%)' : 'hsl(330, 3%, 19%)',
-                  borderWidth: '1px',
-                  borderColor: 'hsl(0, 0%, 85%)',
-                  cursor: currentPage === totalPages ? 'not-allowed' : 'pointer'
-                }}
-              >
-                Next
-              </button>
+        {!isLoading &&
+          !error &&
+          apiKey &&
+          documents.length > 0 &&
+          totalPages > 1 && (
+            <div
+              className="flex items-center justify-between mt-4 pt-4 border-t"
+              style={{ borderColor: "hsl(0, 0%, 85%)" }}
+            >
+              <p className="text-sm" style={{ color: "hsl(330, 3%, 49%)" }}>
+                Page {currentPage} of {totalPages}
+              </p>
+              <div className="flex gap-2">
+                <button
+                  onClick={() => onPageChange(currentPage - 1)}
+                  disabled={currentPage === 1}
+                  className="px-3 py-1 rounded-md text-sm font-medium transition-colors"
+                  style={{
+                    backgroundColor:
+                      currentPage === 1
+                        ? "hsl(0, 0%, 95%)"
+                        : "hsl(0, 0%, 100%)",
+                    color:
+                      currentPage === 1
+                        ? "hsl(330, 3%, 70%)"
+                        : "hsl(330, 3%, 19%)",
+                    borderWidth: "1px",
+                    borderColor: "hsl(0, 0%, 85%)",
+                    cursor: currentPage === 1 ? "not-allowed" : "pointer",
+                  }}
+                >
+                  Previous
+                </button>
+                <button
+                  onClick={() => onPageChange(currentPage + 1)}
+                  disabled={currentPage === totalPages}
+                  className="px-3 py-1 rounded-md text-sm font-medium transition-colors"
+                  style={{
+                    backgroundColor:
+                      currentPage === totalPages
+                        ? "hsl(0, 0%, 95%)"
+                        : "hsl(0, 0%, 100%)",
+                    color:
+                      currentPage === totalPages
+                        ? "hsl(330, 3%, 70%)"
+                        : "hsl(330, 3%, 19%)",
+                    borderWidth: "1px",
+                    borderColor: "hsl(0, 0%, 85%)",
+                    cursor:
+                      currentPage === totalPages ? "not-allowed" : "pointer",
+                  }}
+                >
+                  Next
+                </button>
+              </div>
             </div>
-          </div>
-        )}
+          )}
       </div>
     </div>
   );
@@ -569,33 +748,46 @@ function DocumentPreview({ document, isLoading }: DocumentPreviewProps) {
   }, [document?.id]);
 
   const getFileExtension = (filename: string) => {
-    const parts = filename.split('.');
-    return parts.length > 1 ? parts[parts.length - 1].toLowerCase() : '';
+    const parts = filename.split(".");
+    return parts.length > 1 ? parts[parts.length - 1].toLowerCase() : "";
   };
 
- // const getFileSize = 
+  // const getFileSize =
 
   const getMimeType = (filename: string) => {
     const ext = getFileExtension(filename);
     const mimeTypes: { [key: string]: string } = {
-      'pdf': 'application/pdf',
-      'jpg': 'image/jpeg',
-      'jpeg': 'image/jpeg',
-      'png': 'image/png',
-      'gif': 'image/gif',
-      'txt': 'text/plain',
-      'doc': 'application/msword',
-      'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+      pdf: "application/pdf",
+      jpg: "image/jpeg",
+      jpeg: "image/jpeg",
+      png: "image/png",
+      gif: "image/gif",
+      txt: "text/plain",
+      doc: "application/msword",
+      docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
     };
-    return mimeTypes[ext] || 'application/octet-stream';
+    return mimeTypes[ext] || "application/octet-stream";
   };
 
   if (isLoading) {
     return (
-      <div className="h-full flex items-center justify-center" style={{ backgroundColor: 'hsl(0, 0%, 98%)' }}>
-        <div className="text-center" style={{ color: 'hsl(330, 3%, 49%)' }}>
-          <svg className="w-12 h-12 mx-auto mb-4 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+      <div
+        className="h-full flex items-center justify-center"
+        style={{ backgroundColor: "hsl(0, 0%, 98%)" }}
+      >
+        <div className="text-center" style={{ color: "hsl(330, 3%, 49%)" }}>
+          <svg
+            className="w-12 h-12 mx-auto mb-4 animate-spin"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+            />
           </svg>
           <p className="text-sm">Loading document...</p>
         </div>
@@ -605,8 +797,11 @@ function DocumentPreview({ document, isLoading }: DocumentPreviewProps) {
 
   if (!document) {
     return (
-      <div className="h-full flex items-center justify-center" style={{ backgroundColor: 'hsl(0, 0%, 98%)' }}>
-        <div className="text-center" style={{ color: 'hsl(330, 3%, 49%)' }}>
+      <div
+        className="h-full flex items-center justify-center"
+        style={{ backgroundColor: "hsl(0, 0%, 98%)" }}
+      >
+        <div className="text-center" style={{ color: "hsl(330, 3%, 49%)" }}>
           <svg
             className="mx-auto h-16 w-16 mb-4"
             fill="none"
@@ -620,61 +815,127 @@ function DocumentPreview({ document, isLoading }: DocumentPreviewProps) {
               d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
             />
           </svg>
-          <p className="text-lg font-medium" style={{ color: 'hsl(330, 3%, 19%)' }}>No document selected</p>
-          <p className="text-sm mt-2">Select a document from the list to preview</p>
+          <p
+            className="text-lg font-medium"
+            style={{ color: "hsl(330, 3%, 19%)" }}
+          >
+            No document selected
+          </p>
+          <p className="text-sm mt-2">
+            Select a document from the list to preview
+          </p>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="h-full overflow-y-auto p-8" style={{ backgroundColor: 'hsl(0, 0%, 98%)' }}>
+    <div
+      className="h-full overflow-y-auto p-8"
+      style={{ backgroundColor: "hsl(0, 0%, 98%)" }}
+    >
       <div className="max-w-4xl mx-auto">
-        <div className="border rounded-lg p-6 mb-6" style={{ backgroundColor: 'hsl(0, 0%, 100%)', borderColor: 'hsl(0, 0%, 85%)' }}>
-          <h2 className="text-lg font-semibold mb-4" style={{ color: 'hsl(330, 3%, 19%)' }}>
+        <div
+          className="border rounded-lg p-6 mb-6"
+          style={{
+            backgroundColor: "hsl(0, 0%, 100%)",
+            borderColor: "hsl(0, 0%, 85%)",
+          }}
+        >
+          <h2
+            className="text-lg font-semibold mb-4"
+            style={{ color: "hsl(330, 3%, 19%)" }}
+          >
             {document.fname}
           </h2>
           <div className="grid grid-cols-3 gap-4">
             <div>
-              <div className="text-xs uppercase font-semibold mb-1" style={{ color: 'hsl(330, 3%, 49%)' }}>File Type</div>
-              <div className="text-sm font-medium" style={{ color: 'hsl(330, 3%, 19%)' }}>{getFileExtension(document.fname).toUpperCase() || 'Unknown'}</div>
+              <div
+                className="text-xs uppercase font-semibold mb-1"
+                style={{ color: "hsl(330, 3%, 49%)" }}
+              >
+                File Type
+              </div>
+              <div
+                className="text-sm font-medium"
+                style={{ color: "hsl(330, 3%, 19%)" }}
+              >
+                {getFileExtension(document.fname).toUpperCase() || "Unknown"}
+              </div>
             </div>
             <div>
-              <div className="text-xs uppercase font-semibold mb-1" style={{ color: 'hsl(330, 3%, 49%)' }}>File Size</div>
-              <div className="text-sm font-medium" style={{ color: 'hsl(330, 3%, 19%)' }}>
+              <div
+                className="text-xs uppercase font-semibold mb-1"
+                style={{ color: "hsl(330, 3%, 49%)" }}
+              >
+                File Size
+              </div>
+              <div
+                className="text-sm font-medium"
+                style={{ color: "hsl(330, 3%, 19%)" }}
+              >
                 {document.file_size
                   ? document.file_size < 1024 * 1024
                     ? `${Math.round(document.file_size / 1024)} KB`
                     : `${(document.file_size / (1024 * 1024)).toFixed(2)} MB`
-                  : 'N/A'}
+                  : "N/A"}
               </div>
             </div>
             <div>
-              <div className="text-xs uppercase font-semibold mb-1" style={{ color: 'hsl(330, 3%, 49%)' }}>Uploaded at</div>
-              <div className="text-sm font-medium" style={{ color: 'hsl(330, 3%, 19%)' }}>{formatDate(document.inserted_at)}</div>
+              <div
+                className="text-xs uppercase font-semibold mb-1"
+                style={{ color: "hsl(330, 3%, 49%)" }}
+              >
+                Uploaded at
+              </div>
+              <div
+                className="text-sm font-medium"
+                style={{ color: "hsl(330, 3%, 19%)" }}
+              >
+                {formatDate(document.inserted_at)}
+              </div>
             </div>
           </div>
         </div>
 
         {/* Preview Area */}
-        <div className="border rounded-lg p-6 min-h-[600px]" style={{ backgroundColor: 'hsl(0, 0%, 100%)', borderColor: 'hsl(0, 0%, 85%)' }}>
-          <h3 className="text-lg font-semibold mb-4" style={{ color: 'hsl(330, 3%, 19%)' }}>Preview</h3>
+        <div
+          className="border rounded-lg p-6 min-h-[600px]"
+          style={{
+            backgroundColor: "hsl(0, 0%, 100%)",
+            borderColor: "hsl(0, 0%, 85%)",
+          }}
+        >
+          <h3
+            className="text-lg font-semibold mb-4"
+            style={{ color: "hsl(330, 3%, 19%)" }}
+          >
+            Preview
+          </h3>
 
           {/* Info message if signed_url is not available */}
           {!document.signed_url && document.object_store_url && (
-            <div className="mb-4 p-3 rounded-lg" style={{ backgroundColor: 'hsl(48, 100%, 95%)', borderColor: 'hsl(48, 100%, 80%)', borderWidth: '1px' }}>
-              <p className="text-xs" style={{ color: 'hsl(48, 100%, 30%)' }}>
-                ⚠️ Direct preview unavailable. The backend is not generating signed URLs. Please download the file to view it.
+            <div
+              className="mb-4 p-3 rounded-lg"
+              style={{
+                backgroundColor: "hsl(48, 100%, 95%)",
+                borderColor: "hsl(48, 100%, 80%)",
+                borderWidth: "1px",
+              }}
+            >
+              <p className="text-xs" style={{ color: "hsl(48, 100%, 30%)" }}>
+                ⚠️ Direct preview unavailable. The backend is not generating
+                signed URLs. Please download the file to view it.
               </p>
             </div>
           )}
 
           {document.signed_url ? (
             <>
-              {getMimeType(document.fname).startsWith('image/') ? (
+              {getMimeType(document.fname).startsWith("image/") ? (
                 imageLoadError ? (
                   <div className="text-center p-8">
-                    <p style={{ color: 'hsl(330, 3%, 49%)' }}>
+                    <p style={{ color: "hsl(330, 3%, 49%)" }}>
                       Failed to load image preview. Check console for details.
                     </p>
                   </div>
@@ -688,25 +949,43 @@ function DocumentPreview({ document, isLoading }: DocumentPreviewProps) {
                     }}
                   />
                 )
-              ) : getMimeType(document.fname) === 'application/pdf' ? (
+              ) : getMimeType(document.fname) === "application/pdf" ? (
                 <iframe
                   src={document.signed_url}
                   className="w-full h-[700px] rounded border"
                   title={document.fname}
-                  style={{ borderColor: 'hsl(0, 0%, 85%)' }}
+                  style={{ borderColor: "hsl(0, 0%, 85%)" }}
                 />
-              ) : getMimeType(document.fname).startsWith('text/') ? (
-                <div className="border rounded p-4 min-h-[400px]" style={{ backgroundColor: 'hsl(0, 0%, 98%)', borderColor: 'hsl(0, 0%, 85%)', color: 'hsl(330, 3%, 19%)' }}>
-                  <p className="text-sm mb-2" style={{ color: 'hsl(330, 3%, 49%)' }}>Text file preview:</p>
+              ) : getMimeType(document.fname).startsWith("text/") ? (
+                <div
+                  className="border rounded p-4 min-h-[400px]"
+                  style={{
+                    backgroundColor: "hsl(0, 0%, 98%)",
+                    borderColor: "hsl(0, 0%, 85%)",
+                    color: "hsl(330, 3%, 19%)",
+                  }}
+                >
+                  <p
+                    className="text-sm mb-2"
+                    style={{ color: "hsl(330, 3%, 49%)" }}
+                  >
+                    Text file preview:
+                  </p>
                   <iframe
                     src={document.signed_url}
                     className="w-full h-[500px] rounded border"
                     title={document.fname}
-                    style={{ borderColor: 'hsl(0, 0%, 85%)', backgroundColor: 'white' }}
+                    style={{
+                      borderColor: "hsl(0, 0%, 85%)",
+                      backgroundColor: "white",
+                    }}
                   />
                 </div>
               ) : (
-                <div className="flex flex-col items-center justify-center min-h-[400px]" style={{ color: 'hsl(330, 3%, 49%)' }}>
+                <div
+                  className="flex flex-col items-center justify-center min-h-[400px]"
+                  style={{ color: "hsl(330, 3%, 49%)" }}
+                >
                   <div className="text-center">
                     <svg
                       className="mx-auto h-12 w-12 mb-4"
@@ -721,15 +1000,27 @@ function DocumentPreview({ document, isLoading }: DocumentPreviewProps) {
                         d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                       />
                     </svg>
-                    <p className="mb-2">Preview not available for this file type</p>
-                    <p className="text-xs mb-4">Supported types: Images, PDFs, Text files</p>
-                    <p className="text-xs mb-4" style={{ color: 'hsl(330, 3%, 70%)' }}>File type: {getMimeType(document.fname)}</p>
+                    <p className="mb-2">
+                      Preview not available for this file type
+                    </p>
+                    <p className="text-xs mb-4">
+                      Supported types: Images, PDFs, Text files
+                    </p>
+                    <p
+                      className="text-xs mb-4"
+                      style={{ color: "hsl(330, 3%, 70%)" }}
+                    >
+                      File type: {getMimeType(document.fname)}
+                    </p>
                   </div>
                 </div>
               )}
             </>
           ) : (
-            <div className="flex items-center justify-center min-h-[400px]" style={{ color: 'hsl(330, 3%, 49%)' }}>
+            <div
+              className="flex items-center justify-center min-h-[400px]"
+              style={{ color: "hsl(330, 3%, 49%)" }}
+            >
               <div className="text-center">
                 <svg
                   className="mx-auto h-12 w-12 mb-4"
@@ -745,7 +1036,9 @@ function DocumentPreview({ document, isLoading }: DocumentPreviewProps) {
                   />
                 </svg>
                 <p className="mb-2">No preview available</p>
-                <p className="text-xs mb-4">Signed URL not generated by backend</p>
+                <p className="text-xs mb-4">
+                  Signed URL not generated by backend
+                </p>
               </div>
             </div>
           )}
@@ -758,11 +1051,15 @@ function DocumentPreview({ document, isLoading }: DocumentPreviewProps) {
                 download={document.fname}
                 className="inline-block px-6 py-2 rounded-md text-sm font-medium transition-colors"
                 style={{
-                  backgroundColor: '#171717',
-                  color: 'hsl(0, 0%, 100%)'
+                  backgroundColor: "#171717",
+                  color: "hsl(0, 0%, 100%)",
                 }}
-                onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#404040'}
-                onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#171717'}
+                onMouseEnter={(e) =>
+                  (e.currentTarget.style.backgroundColor = "#404040")
+                }
+                onMouseLeave={(e) =>
+                  (e.currentTarget.style.backgroundColor = "#171717")
+                }
               >
                 Download {document.fname}
               </a>
@@ -800,44 +1097,69 @@ export function UploadDocumentModal({
   // Handle escape key
   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
+      if (e.key === "Escape") {
         onClose();
       }
     };
-    window.addEventListener('keydown', handleEscape);
-    return () => window.removeEventListener('keydown', handleEscape);
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
   }, [onClose]);
 
   return (
     <div
       className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-modalBackdrop"
-      style={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }}
+      style={{ backgroundColor: "rgba(0, 0, 0, 0.5)" }}
       onClick={handleBackdropClick}
     >
       <div
         className="border rounded-lg shadow-lg max-w-2xl w-full max-h-[90vh] overflow-y-auto animate-modalContent"
-        style={{ backgroundColor: 'hsl(0, 0%, 100%)', borderColor: 'hsl(0, 0%, 85%)' }}
+        style={{
+          backgroundColor: "hsl(0, 0%, 100%)",
+          borderColor: "hsl(0, 0%, 85%)",
+        }}
         onClick={(e) => e.stopPropagation()}
       >
         {/* Modal Header */}
-        <div className="border-b px-6 py-4 flex items-center justify-between" style={{ borderColor: 'hsl(0, 0%, 85%)' }}>
-          <h2 className="text-lg font-semibold" style={{ color: 'hsl(330, 3%, 19%)' }}>Upload New Document</h2>
+        <div
+          className="border-b px-6 py-4 flex items-center justify-between"
+          style={{ borderColor: "hsl(0, 0%, 85%)" }}
+        >
+          <h2
+            className="text-lg font-semibold"
+            style={{ color: "hsl(330, 3%, 19%)" }}
+          >
+            Upload New Document
+          </h2>
           <button
             onClick={onClose}
             className="p-1 rounded-md transition-colors"
-            style={{ color: 'hsl(330, 3%, 49%)' }}
-            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 95%)'}
-            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+            style={{ color: "hsl(330, 3%, 49%)" }}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 95%)")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = "transparent")
+            }
           >
-            <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            <svg
+              className="w-6 h-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
             </svg>
           </button>
         </div>
 
         {/* Modal Body */}
         <div className="p-6">
-          <p className="text-sm mb-6" style={{ color: 'hsl(330, 3%, 49%)' }}>
+          <p className="text-sm mb-6" style={{ color: "hsl(330, 3%, 49%)" }}>
             Upload a document file. Supported formats: pdf, doc, txt and more.
           </p>
 
@@ -845,11 +1167,11 @@ export function UploadDocumentModal({
           <div
             className="border-2 border-dashed rounded-lg p-12 text-center transition-colors"
             style={{
-              borderColor: 'hsl(0, 0%, 85%)',
+              borderColor: "hsl(0, 0%, 85%)",
             }}
           >
             <div className="space-y-4">
-              <div style={{ color: 'hsl(330, 3%, 49%)' }}>
+              <div style={{ color: "hsl(330, 3%, 49%)" }}>
                 <svg
                   className="mx-auto h-12 w-12"
                   fill="none"
@@ -869,9 +1191,13 @@ export function UploadDocumentModal({
                   htmlFor="document-file-upload"
                   className="px-6 py-2 rounded-md transition-colors inline-block text-sm font-medium cursor-pointer"
                   style={{
-                    backgroundColor: isUploading ? 'hsl(0, 0%, 95%)' : '#171717',
-                    color: isUploading ? 'hsl(330, 3%, 49%)' : 'hsl(0, 0%, 100%)',
-                    cursor: isUploading ? 'not-allowed' : 'pointer'
+                    backgroundColor: isUploading
+                      ? "hsl(0, 0%, 95%)"
+                      : "#171717",
+                    color: isUploading
+                      ? "hsl(330, 3%, 49%)"
+                      : "hsl(0, 0%, 100%)",
+                    cursor: isUploading ? "not-allowed" : "pointer",
                   }}
                 >
                   Choose File
@@ -886,9 +1212,17 @@ export function UploadDocumentModal({
                 />
               </div>
               {selectedFile && (
-                <div className="text-sm" style={{ color: 'hsl(330, 3%, 49%)' }}>
-                  Selected: <span className="font-medium" style={{ color: 'hsl(330, 3%, 19%)' }}>{selectedFile.name}</span>
-                  <span className="ml-2">({Math.round(selectedFile.size / 1024)} KB)</span>
+                <div className="text-sm" style={{ color: "hsl(330, 3%, 49%)" }}>
+                  Selected:{" "}
+                  <span
+                    className="font-medium"
+                    style={{ color: "hsl(330, 3%, 19%)" }}
+                  >
+                    {selectedFile.name}
+                  </span>
+                  <span className="ml-2">
+                    ({Math.round(selectedFile.size / 1024)} KB)
+                  </span>
                 </div>
               )}
             </div>
@@ -897,7 +1231,10 @@ export function UploadDocumentModal({
           {/* Document Name Field (Read-only) */}
           {selectedFile && (
             <div className="mt-6">
-              <label className="block text-sm font-medium mb-2" style={{ color: 'hsl(330, 3%, 19%)' }}>
+              <label
+                className="block text-sm font-medium mb-2"
+                style={{ color: "hsl(330, 3%, 19%)" }}
+              >
                 Document Name
               </label>
               <input
@@ -906,13 +1243,16 @@ export function UploadDocumentModal({
                 readOnly
                 className="w-full px-4 py-2 rounded-md border text-sm"
                 style={{
-                  borderColor: 'hsl(0, 0%, 85%)',
-                  backgroundColor: 'hsl(0, 0%, 97%)',
-                  color: 'hsl(330, 3%, 49%)',
-                  cursor: 'not-allowed'
+                  borderColor: "hsl(0, 0%, 85%)",
+                  backgroundColor: "hsl(0, 0%, 97%)",
+                  color: "hsl(330, 3%, 49%)",
+                  cursor: "not-allowed",
                 }}
               />
-              <p className="text-xs mt-1" style={{ color: 'hsl(330, 3%, 49%)' }}>
+              <p
+                className="text-xs mt-1"
+                style={{ color: "hsl(330, 3%, 49%)" }}
+              >
                 The file will be uploaded with this name
               </p>
             </div>
@@ -920,18 +1260,25 @@ export function UploadDocumentModal({
         </div>
 
         {/* Modal Footer */}
-        <div className="border-t px-6 py-4 flex items-center justify-end gap-3" style={{ borderColor: 'hsl(0, 0%, 85%)' }}>
+        <div
+          className="border-t px-6 py-4 flex items-center justify-end gap-3"
+          style={{ borderColor: "hsl(0, 0%, 85%)" }}
+        >
           <button
             onClick={onClose}
             className="px-4 py-2 rounded-md text-sm font-medium transition-colors"
             style={{
-              borderWidth: '1px',
-              borderColor: 'hsl(0, 0%, 85%)',
-              backgroundColor: 'hsl(0, 0%, 100%)',
-              color: 'hsl(330, 3%, 19%)'
+              borderWidth: "1px",
+              borderColor: "hsl(0, 0%, 85%)",
+              backgroundColor: "hsl(0, 0%, 100%)",
+              color: "hsl(330, 3%, 19%)",
             }}
-            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 95%)'}
-            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 100%)'}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 95%)")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 100%)")
+            }
           >
             Cancel
           </button>
@@ -940,22 +1287,26 @@ export function UploadDocumentModal({
             disabled={!selectedFile || isUploading}
             className="px-4 py-2 rounded-md text-sm font-medium transition-colors"
             style={{
-              backgroundColor: (!selectedFile || isUploading) ? 'hsl(0, 0%, 95%)' : '#171717',
-              color: (!selectedFile || isUploading) ? 'hsl(330, 3%, 49%)' : 'hsl(0, 0%, 100%)',
-              cursor: (!selectedFile || isUploading) ? 'not-allowed' : 'pointer'
+              backgroundColor:
+                !selectedFile || isUploading ? "hsl(0, 0%, 95%)" : "#171717",
+              color:
+                !selectedFile || isUploading
+                  ? "hsl(330, 3%, 49%)"
+                  : "hsl(0, 0%, 100%)",
+              cursor: !selectedFile || isUploading ? "not-allowed" : "pointer",
             }}
             onMouseEnter={(e) => {
               if (selectedFile && !isUploading) {
-                e.currentTarget.style.backgroundColor = '#404040';
+                e.currentTarget.style.backgroundColor = "#404040";
               }
             }}
             onMouseLeave={(e) => {
               if (selectedFile && !isUploading) {
-                e.currentTarget.style.backgroundColor = '#171717';
+                e.currentTarget.style.backgroundColor = "#171717";
               }
             }}
           >
-            {isUploading ? 'Uploading...' : 'Upload Document'}
+            {isUploading ? "Uploading..." : "Upload Document"}
           </button>
         </div>
       </div>
diff --git a/app/evaluations/page.tsx b/app/evaluations/page.tsx
index 1411173..077a900 100644
--- a/app/evaluations/page.tsx
+++ b/app/evaluations/page.tsx
@@ -5,22 +5,22 @@
  * Tab 2 - Evaluations: Configure and run evaluations, view results
  */
 
-"use client"
-
-import { useState, useEffect, useCallback, Suspense } from 'react';
-import { colors } from '@/app/lib/colors';
-import { useSearchParams } from 'next/navigation'
-import { Dataset } from '@/app/datasets/page';
-import Sidebar from '@/app/components/Sidebar';
-import TabNavigation from '@/app/components/TabNavigation';
-import { useToast } from '@/app/components/Toast';
-import { useAuth } from '@/app/lib/context/AuthContext';
-import { useApp } from '@/app/lib/context/AppContext';
-import Loader from '@/app/components/Loader';
-import DatasetsTab from '@/app/components/evaluations/DatasetsTab';
-import EvaluationsTab from '@/app/components/evaluations/EvaluationsTab';
-
-type Tab = 'datasets' | 'evaluations';
+"use client";
+
+import { useState, useEffect, useCallback, Suspense } from "react";
+import { colors } from "@/app/lib/colors";
+import { useSearchParams } from "next/navigation";
+import { Dataset } from "@/app/datasets/page";
+import Sidebar from "@/app/components/Sidebar";
+import TabNavigation from "@/app/components/TabNavigation";
+import { useToast } from "@/app/components/Toast";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { useApp } from "@/app/lib/context/AppContext";
+import Loader from "@/app/components/Loader";
+import DatasetsTab from "@/app/components/evaluations/DatasetsTab";
+import EvaluationsTab from "@/app/components/evaluations/EvaluationsTab";
+
+type Tab = "datasets" | "evaluations";
 
 const leftPanelWidth = 450;
 
@@ -29,18 +29,20 @@ function SimplifiedEvalContent() {
   const toast = useToast();
 
   const [activeTab, setActiveTab] = useState<Tab>(() => {
-    const tabParam = searchParams.get('tab');
-    return (tabParam === 'evaluations' || tabParam === 'datasets') ? tabParam as Tab : 'datasets';
+    const tabParam = searchParams.get("tab");
+    return tabParam === "evaluations" || tabParam === "datasets"
+      ? (tabParam as Tab)
+      : "datasets";
   });
 
   const { sidebarCollapsed, setSidebarCollapsed } = useApp();
   const { apiKeys } = useAuth();
-  const [selectedKeyId, setSelectedKeyId] = useState<string>('');
+  const [selectedKeyId, setSelectedKeyId] = useState<string>("");
 
   // Dataset creation state
-  const [datasetName, setDatasetName] = useState('');
-  const [datasetDescription, setDatasetDescription] = useState('');
-  const [duplicationFactor, setDuplicationFactor] = useState('1');
+  const [datasetName, setDatasetName] = useState("");
+  const [datasetDescription, setDatasetDescription] = useState("");
+  const [duplicationFactor, setDuplicationFactor] = useState("1");
   const [uploadedFile, setUploadedFile] = useState<File | null>(null);
   const [isUploading, setIsUploading] = useState(false);
 
@@ -49,18 +51,20 @@ function SimplifiedEvalContent() {
 
   // Evaluation config state
   const [selectedDatasetId, setSelectedDatasetId] = useState<string>(() => {
-    return searchParams.get('dataset') || '';
+    return searchParams.get("dataset") || "";
   });
   const [experimentName, setExperimentName] = useState<string>(() => {
-    return searchParams.get('experiment') || '';
+    return searchParams.get("experiment") || "";
   });
   const [selectedConfigId, setSelectedConfigId] = useState<string>(() => {
-    return searchParams.get('config') || '';
-  });
-  const [selectedConfigVersion, setSelectedConfigVersion] = useState<number>(() => {
-    const version = searchParams.get('version');
-    return version ? parseInt(version) : 0;
+    return searchParams.get("config") || "";
   });
+  const [selectedConfigVersion, setSelectedConfigVersion] = useState<number>(
+    () => {
+      const version = searchParams.get("version");
+      return version ? parseInt(version) : 0;
+    },
+  );
   const [isEvaluating, setIsEvaluating] = useState(false);
 
   // Set initial selected key from context
@@ -72,21 +76,21 @@ function SimplifiedEvalContent() {
 
   // Fetch datasets from backend
   const loadStoredDatasets = useCallback(async () => {
-    const selectedKey = apiKeys.find(k => k.id === selectedKeyId);
+    const selectedKey = apiKeys.find((k) => k.id === selectedKeyId);
     if (!selectedKey) {
-      console.error('No selected API key found for loading datasets');
+      console.error("No selected API key found for loading datasets");
       return;
     }
     try {
-      const response = await fetch('/api/evaluations/datasets', {
-        method: 'GET',
-        headers: { 'X-API-KEY': selectedKey.key },
+      const response = await fetch("/api/evaluations/datasets", {
+        method: "GET",
+        headers: { "X-API-KEY": selectedKey.key },
       });
       if (!response.ok) return;
       const data = await response.json();
-      setStoredDatasets(Array.isArray(data) ? data : (data.data || []));
+      setStoredDatasets(Array.isArray(data) ? data : data.data || []);
     } catch (e) {
-      console.error('Failed to load datasets:', e);
+      console.error("Failed to load datasets:", e);
     }
   }, [apiKeys, selectedKeyId]);
 
@@ -98,9 +102,9 @@ function SimplifiedEvalContent() {
   const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0];
     if (!file) return;
-    if (!file.name.endsWith('.csv')) {
-      toast.error('Please select a CSV file');
-      event.target.value = '';
+    if (!file.name.endsWith(".csv")) {
+      toast.error("Please select a CSV file");
+      event.target.value = "";
       return;
     }
 
@@ -109,35 +113,42 @@ function SimplifiedEvalContent() {
     reader.onload = (e) => {
       const text = e.target?.result as string;
       if (!text) {
-        toast.error('Failed to read CSV file');
-        event.target.value = '';
+        toast.error("Failed to read CSV file");
+        event.target.value = "";
         return;
       }
-      const firstLine = text.split('\n')[0]?.trim();
+      const firstLine = text.split("\n")[0]?.trim();
       if (!firstLine) {
-        toast.error('CSV file is empty');
-        event.target.value = '';
+        toast.error("CSV file is empty");
+        event.target.value = "";
         return;
       }
-      const headers = firstLine.split(',').map(h => h.trim().replace(/^["']|["']$/g, '').toLowerCase());
-      const required = ['question', 'answer'];
-      const hasRequired = required.every(col => headers.includes(col));
-      const hasExtra = headers.some(col => !required.includes(col));
+      const headers = firstLine.split(",").map((h) =>
+        h
+          .trim()
+          .replace(/^["']|["']$/g, "")
+          .toLowerCase(),
+      );
+      const required = ["question", "answer"];
+      const hasRequired = required.every((col) => headers.includes(col));
+      const hasExtra = headers.some((col) => !required.includes(col));
 
       if (!hasRequired || hasExtra) {
-        toast.error('CSV must have exactly two columns: "question" and "answer"');
-        event.target.value = '';
+        toast.error(
+          'CSV must have exactly two columns: "question" and "answer"',
+        );
+        event.target.value = "";
         return;
       }
 
       setUploadedFile(file);
       if (!datasetName) {
-        setDatasetName(file.name.replace(/\.csv$/i, ''));
+        setDatasetName(file.name.replace(/\.csv$/i, ""));
       }
     };
     reader.onerror = () => {
-      toast.error('Failed to read CSV file');
-      event.target.value = '';
+      toast.error("Failed to read CSV file");
+      event.target.value = "";
     };
     reader.readAsText(file);
   };
@@ -145,40 +156,44 @@ function SimplifiedEvalContent() {
   // Create dataset
   const handleCreateDataset = async () => {
     if (!uploadedFile) {
-      toast.error('Please select a CSV file');
+      toast.error("Please select a CSV file");
       return;
     }
     if (!datasetName.trim()) {
-      toast.error('Please enter a dataset name');
+      toast.error("Please enter a dataset name");
       return;
     }
-    const selectedKey = apiKeys.find(k => k.id === selectedKeyId);
+    const selectedKey = apiKeys.find((k) => k.id === selectedKeyId);
     if (!selectedKey) {
-      toast.error('No API key selected. Please select one in the Keystore.');
+      toast.error("No API key selected. Please select one in the Keystore.");
       return;
     }
 
     setIsUploading(true);
     try {
       const formData = new FormData();
-      formData.append('file', uploadedFile);
-      formData.append('dataset_name', datasetName.trim());
+      formData.append("file", uploadedFile);
+      formData.append("dataset_name", datasetName.trim());
       if (datasetDescription.trim()) {
-        formData.append('description', datasetDescription.trim());
+        formData.append("description", datasetDescription.trim());
       }
       if (duplicationFactor && parseInt(duplicationFactor) > 1) {
-        formData.append('duplication_factor', duplicationFactor);
+        formData.append("duplication_factor", duplicationFactor);
       }
 
-      const response = await fetch('/api/evaluations/datasets', {
-        method: 'POST',
+      const response = await fetch("/api/evaluations/datasets", {
+        method: "POST",
         body: formData,
-        headers: { 'X-API-KEY': selectedKey.key },
+        headers: { "X-API-KEY": selectedKey.key },
       });
 
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || errorData.message || `Upload failed with status ${response.status}`);
+        throw new Error(
+          errorData.error ||
+            errorData.message ||
+            `Upload failed with status ${response.status}`,
+        );
       }
 
       const data = await response.json();
@@ -190,13 +205,15 @@ function SimplifiedEvalContent() {
 
       // Reset form
       setUploadedFile(null);
-      setDatasetName('');
-      setDatasetDescription('');
-      setDuplicationFactor('1');
+      setDatasetName("");
+      setDatasetDescription("");
+      setDuplicationFactor("1");
 
-      toast.success('Dataset created successfully!');
+      toast.success("Dataset created successfully!");
     } catch (error) {
-      toast.error(`Failed to create dataset: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      toast.error(
+        `Failed to create dataset: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
     } finally {
       setIsUploading(false);
     }
@@ -205,25 +222,25 @@ function SimplifiedEvalContent() {
   // Run evaluation
   const handleRunEvaluation = async () => {
     if (!selectedKeyId) {
-      toast.error('Please select an API key first');
+      toast.error("Please select an API key first");
       return;
     }
     if (!selectedDatasetId) {
-      toast.error('Please select a dataset first');
+      toast.error("Please select a dataset first");
       return;
     }
     if (!experimentName.trim()) {
-      toast.error('Please enter an evaluation name');
+      toast.error("Please enter an evaluation name");
       return;
     }
     if (!selectedConfigId || !selectedConfigVersion) {
-      toast.error('Please select a configuration before running evaluation');
+      toast.error("Please select a configuration before running evaluation");
       return;
     }
 
-    const selectedKey = apiKeys.find(k => k.id === selectedKeyId);
+    const selectedKey = apiKeys.find((k) => k.id === selectedKeyId);
     if (!selectedKey) {
-      toast.error('Selected API key not found');
+      toast.error("Selected API key not found");
       return;
     }
 
@@ -236,41 +253,58 @@ function SimplifiedEvalContent() {
         config_version: selectedConfigVersion,
       };
 
-      const response = await fetch('/api/evaluations', {
-        method: 'POST',
+      const response = await fetch("/api/evaluations", {
+        method: "POST",
         headers: {
-          'X-API-KEY': selectedKey.key,
-          'Content-Type': 'application/json',
+          "X-API-KEY": selectedKey.key,
+          "Content-Type": "application/json",
         },
         body: JSON.stringify(payload),
       });
 
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || errorData.message || `Evaluation failed with status ${response.status}`);
+        throw new Error(
+          errorData.error ||
+            errorData.message ||
+            `Evaluation failed with status ${response.status}`,
+        );
       }
 
       const data = await response.json();
-      const evalId = data.id || data.data?.id || data.eval_id || 'unknown';
+      const evalId = data.id || data.data?.id || data.eval_id || "unknown";
 
       setIsEvaluating(false);
-      toast.success(`Evaluation created! ${evalId !== 'unknown' ? `Job ID: ${evalId}` : ''}`);
+      toast.success(
+        `Evaluation created! ${evalId !== "unknown" ? `Job ID: ${evalId}` : ""}`,
+      );
       return true;
     } catch (error: unknown) {
-      toast.error(`Failed to run evaluation: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      toast.error(
+        `Failed to run evaluation: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
       setIsEvaluating(false);
       return false;
     }
   };
 
   return (
-    <div className="w-full h-screen flex flex-col" style={{ backgroundColor: colors.bg.secondary }}>
+    <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="/evaluations" />
 
         <div className="flex-1 flex flex-col overflow-hidden">
           {/* Title Section */}
-          <div className="border-b px-4 py-3 flex items-center justify-between flex-shrink-0" style={{ backgroundColor: colors.bg.primary, borderColor: colors.border }}>
+          <div
+            className="border-b px-4 py-3 flex items-center justify-between flex-shrink-0"
+            style={{
+              backgroundColor: colors.bg.primary,
+              borderColor: colors.border,
+            }}
+          >
             <div className="flex items-center gap-3">
               <button
                 onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
@@ -278,13 +312,34 @@ function SimplifiedEvalContent() {
                 style={{ color: colors.text.secondary }}
                 aria-label="Toggle sidebar"
               >
-                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M4 6h16M4 12h16M4 18h16"
+                  />
                 </svg>
               </button>
               <div>
-                <h1 className="text-base font-semibold" style={{ color: colors.text.primary, letterSpacing: '-0.01em' }}>Text Evaluation</h1>
-                <p className="text-xs" style={{ color: colors.text.secondary }}>Compare model response quality on your datasets across different configs</p>
+                <h1
+                  className="text-base font-semibold"
+                  style={{
+                    color: colors.text.primary,
+                    letterSpacing: "-0.01em",
+                  }}
+                >
+                  Text Evaluation
+                </h1>
+                <p className="text-xs" style={{ color: colors.text.secondary }}>
+                  Compare model response quality on your datasets across
+                  different configs
+                </p>
               </div>
             </div>
           </div>
@@ -292,8 +347,8 @@ function SimplifiedEvalContent() {
           {/* Tab Navigation */}
           <TabNavigation
             tabs={[
-              { id: 'datasets', label: 'Datasets' },
-              { id: 'evaluations', label: 'Evaluations' }
+              { id: "datasets", label: "Datasets" },
+              { id: "evaluations", label: "Evaluations" },
             ]}
             activeTab={activeTab}
             onTabChange={(tabId) => setActiveTab(tabId as Tab)}
@@ -301,19 +356,51 @@ function SimplifiedEvalContent() {
 
           {/* Tab Content */}
           {apiKeys.length === 0 ? (
-            <div className="flex-1 flex items-center justify-center" style={{ backgroundColor: colors.bg.secondary }}>
+            <div
+              className="flex-1 flex items-center justify-center"
+              style={{ backgroundColor: colors.bg.secondary }}
+            >
               <div className="text-center">
-                <svg className="mx-auto h-12 w-12 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: colors.border }}>
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
+                <svg
+                  className="mx-auto h-12 w-12 mb-4"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  style={{ color: colors.border }}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={1.5}
+                    d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
+                  />
                 </svg>
-                <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 to start creating datasets and running evaluations</p>
-                <a href="/keystore" className="inline-block px-4 py-2 rounded-md text-sm font-medium" style={{ backgroundColor: colors.accent.primary, color: '#ffffff' }}>
+                <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 to start creating datasets and
+                  running evaluations
+                </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>
-          ) : activeTab === 'datasets' ? (
+          ) : activeTab === "datasets" ? (
             <DatasetsTab
               leftPanelWidth={leftPanelWidth}
               datasetName={datasetName}
@@ -328,9 +415,9 @@ function SimplifiedEvalContent() {
               isUploading={isUploading}
               handleCreateDataset={handleCreateDataset}
               resetForm={() => {
-                setDatasetName('');
-                setDatasetDescription('');
-                setDuplicationFactor('1');
+                setDatasetName("");
+                setDatasetDescription("");
+                setDuplicationFactor("1");
                 setUploadedFile(null);
               }}
               storedDatasets={storedDatasets}
diff --git a/app/globals.css b/app/globals.css
index 724aa61..7de4e92 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -79,7 +79,8 @@ body {
 }
 
 /* Smooth transitions for all interactive elements */
-button, a {
+button,
+a {
   transition: all 0.2s ease-in-out;
 }
 
diff --git a/app/keystore/page.tsx b/app/keystore/page.tsx
index bd1ec60..42d50df 100644
--- a/app/keystore/page.tsx
+++ b/app/keystore/page.tsx
@@ -6,10 +6,10 @@
 
 "use client";
 
-import { useState, useEffect } from 'react';
-import Sidebar from '../components/Sidebar';
-import { useAuth } from '@/app/lib/context/AuthContext';
-import { useApp } from '@/app/lib/context/AppContext';
+import { useState, useEffect } from "react";
+import Sidebar from "../components/Sidebar";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { useApp } from "@/app/lib/context/AppContext";
 
 export interface APIKey {
   id: string;
@@ -19,23 +19,22 @@ export interface APIKey {
   createdAt?: string;
 }
 
-export const STORAGE_KEY = 'kaapi_api_keys';
+export const STORAGE_KEY = "kaapi_api_keys";
 
 export default function KaapiKeystore() {
   const { sidebarCollapsed, setSidebarCollapsed } = useApp();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { apiKeys, addKey, removeKey: removeApiKey } = useAuth();
-  const [newKeyLabel, setNewKeyLabel] = useState('');
-  const [newKeyValue, setNewKeyValue] = useState('');
-  const [newKeyProvider, setNewKeyProvider] = useState('Kaapi');
+  const [newKeyLabel, setNewKeyLabel] = useState("");
+  const [newKeyValue, setNewKeyValue] = useState("");
+  const [newKeyProvider, setNewKeyProvider] = useState("Kaapi");
   const [visibleKeys, setVisibleKeys] = useState<Set<string>>(new Set());
 
-
-  const providers = ['Kaapi'];
+  const providers = ["Kaapi"];
 
   const handleAddKey = () => {
     if (!newKeyLabel.trim() || !newKeyValue.trim()) {
-      alert('Please provide both label and API key');
+      alert("Please provide both label and API key");
       return;
     }
 
@@ -48,9 +47,9 @@ export default function KaapiKeystore() {
     };
 
     addKey(newKey);
-    setNewKeyLabel('');
-    setNewKeyValue('');
-    setNewKeyProvider('Kaapi');
+    setNewKeyLabel("");
+    setNewKeyValue("");
+    setNewKeyProvider("Kaapi");
 
     // Close modal after adding
     setIsModalOpen(false);
@@ -58,7 +57,7 @@ export default function KaapiKeystore() {
 
   const handleDeleteKey = (id: string) => {
     removeApiKey(id);
-    setVisibleKeys(prev => {
+    setVisibleKeys((prev) => {
       const next = new Set(prev);
       next.delete(id);
       return next;
@@ -66,7 +65,7 @@ export default function KaapiKeystore() {
   };
 
   const toggleKeyVisibility = (id: string) => {
-    setVisibleKeys(prev => {
+    setVisibleKeys((prev) => {
       const next = new Set(prev);
       if (next.has(id)) {
         next.delete(id);
@@ -79,7 +78,7 @@ export default function KaapiKeystore() {
 
   const copyToClipboard = (text: string) => {
     navigator.clipboard.writeText(text);
-    alert('API key copied to clipboard!');
+    alert("API key copied to clipboard!");
   };
 
   return (
@@ -96,8 +95,12 @@ export default function KaapiKeystore() {
               <button
                 onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
                 className="p-2 rounded-md transition-colors flex-shrink-0 border border-[hsl(0,0%,85%)] bg-[hsl(0,0%,100%)] text-[hsl(330,3%,19%)]"
-                onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 95%)'}
-                onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 100%)'}
+                onMouseEnter={(e) =>
+                  (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 95%)")
+                }
+                onMouseLeave={(e) =>
+                  (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 100%)")
+                }
               >
                 <svg
                   className="w-5 h-5"
@@ -123,8 +126,12 @@ export default function KaapiKeystore() {
                 </svg>
               </button>
               <div>
-                <h1 className="text-2xl font-semibold text-[hsl(330,3%,19%)]">Keystore</h1>
-                <p className="text-sm mt-1 text-[hsl(330,3%,49%)]">Manage your API keys securely</p>
+                <h1 className="text-2xl font-semibold text-[hsl(330,3%,19%)]">
+                  Keystore
+                </h1>
+                <p className="text-sm mt-1 text-[hsl(330,3%,49%)]">
+                  Manage your API keys securely
+                </p>
               </div>
             </div>
           </div>
@@ -193,8 +200,12 @@ function StoredKeysTab({
             <button
               onClick={onAddNew}
               className="px-4 py-2 rounded-md text-sm font-medium transition-colors bg-[#171717] text-[hsl(0,0%,100%)]"
-              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#404040'}
-              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#171717'}
+              onMouseEnter={(e) =>
+                (e.currentTarget.style.backgroundColor = "#404040")
+              }
+              onMouseLeave={(e) =>
+                (e.currentTarget.style.backgroundColor = "#171717")
+              }
             >
               + Add New Key
             </button>
@@ -216,13 +227,21 @@ function StoredKeysTab({
                 d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
               />
             </svg>
-            <p className="font-medium mb-2 text-[hsl(330,3%,19%)]">No API key stored yet</p>
-            <p className="text-sm mb-4">Add your API key to get started with evaluations</p>
+            <p className="font-medium mb-2 text-[hsl(330,3%,19%)]">
+              No API key stored yet
+            </p>
+            <p className="text-sm mb-4">
+              Add your API key to get started with evaluations
+            </p>
             <button
               onClick={onAddNew}
               className="px-6 py-2 rounded-md text-sm font-medium transition-colors bg-[#171717] text-[hsl(0,0%,100%)]"
-              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#404040'}
-              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#171717'}
+              onMouseEnter={(e) =>
+                (e.currentTarget.style.backgroundColor = "#404040")
+              }
+              onMouseLeave={(e) =>
+                (e.currentTarget.style.backgroundColor = "#171717")
+              }
             >
               Add API Key
             </button>
@@ -232,11 +251,22 @@ function StoredKeysTab({
             {/* Info Message */}
             <div className="border rounded-lg p-3 bg-[hsl(202,100%,95%)] border-[hsl(202,100%,80%)]">
               <div className="flex gap-2">
-                <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-[hsl(202,100%,35%)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                <svg
+                  className="w-4 h-4 flex-shrink-0 mt-0.5 text-[hsl(202,100%,35%)]"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
                 </svg>
                 <p className="text-xs text-[hsl(202,100%,30%)]">
-                  Only one API key can be stored at a time. Delete this key to add a different one.
+                  Only one API key can be stored at a time. Delete this key to
+                  add a different one.
                 </p>
               </div>
             </div>
@@ -249,9 +279,7 @@ function StoredKeysTab({
                 <div className="flex items-start justify-between">
                   <div className="flex-1">
                     <div className="flex items-center gap-2 mb-2">
-                      <span
-                        className="text-xs px-2 py-1 rounded bg-[#171717] text-[hsl(0,0%,100%)]"
-                      >
+                      <span className="text-xs px-2 py-1 rounded bg-[#171717] text-[hsl(0,0%,100%)]">
                         {apiKey.provider}
                       </span>
                       <h3 className="font-semibold text-[hsl(330,3%,19%)]">
@@ -259,12 +287,10 @@ function StoredKeysTab({
                       </h3>
                     </div>
                     <div className="flex items-center gap-2">
-                      <code
-                        className="text-sm px-3 py-1 rounded font-mono bg-[hsl(0,0%,100%)] text-[hsl(330,3%,19%)]"
-                      >
+                      <code className="text-sm px-3 py-1 rounded font-mono bg-[hsl(0,0%,100%)] text-[hsl(330,3%,19%)]">
                         {visibleKeys.has(apiKey.id)
                           ? apiKey.key
-                          : '•'.repeat(32)}
+                          : "•".repeat(32)}
                       </code>
                     </div>
                     <p className="text-xs mt-2 text-[hsl(330,3%,49%)]">
@@ -275,42 +301,91 @@ function StoredKeysTab({
                     <button
                       onClick={() => onToggleVisibility(apiKey.id)}
                       className="p-2 rounded-md transition-colors border border-[hsl(0,0%,85%)] bg-[hsl(0,0%,100%)] text-[hsl(330,3%,19%)]"
-                      onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 95%)'}
-                      onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 100%)'}
-                      title={visibleKeys.has(apiKey.id) ? 'Hide' : 'Show'}
+                      onMouseEnter={(e) =>
+                        (e.currentTarget.style.backgroundColor =
+                          "hsl(0, 0%, 95%)")
+                      }
+                      onMouseLeave={(e) =>
+                        (e.currentTarget.style.backgroundColor =
+                          "hsl(0, 0%, 100%)")
+                      }
+                      title={visibleKeys.has(apiKey.id) ? "Hide" : "Show"}
                     >
-                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <svg
+                        className="w-5 h-5"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
                         {visibleKeys.has(apiKey.id) ? (
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+                          />
                         ) : (
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                          />
                         )}
                       </svg>
                     </button>
                     <button
                       onClick={() => onCopy(apiKey.key)}
                       className="p-2 rounded-md transition-colors border border-[hsl(0,0%,85%)] bg-[hsl(0,0%,100%)] text-[hsl(330,3%,19%)]"
-                      onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 95%)'}
-                      onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 100%)'}
+                      onMouseEnter={(e) =>
+                        (e.currentTarget.style.backgroundColor =
+                          "hsl(0, 0%, 95%)")
+                      }
+                      onMouseLeave={(e) =>
+                        (e.currentTarget.style.backgroundColor =
+                          "hsl(0, 0%, 100%)")
+                      }
                       title="Copy"
                     >
-                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                      <svg
+                        className="w-5 h-5"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+                        />
                       </svg>
                     </button>
                     <button
                       onClick={() => onDelete(apiKey.id)}
                       className="p-2 rounded-md transition-colors border border-[hsl(8,86%,80%)] bg-[hsl(0,0%,100%)] text-[hsl(8,86%,40%)]"
                       onMouseEnter={(e) => {
-                        e.currentTarget.style.backgroundColor = 'hsl(8, 86%, 95%)';
+                        e.currentTarget.style.backgroundColor =
+                          "hsl(8, 86%, 95%)";
                       }}
                       onMouseLeave={(e) => {
-                        e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 100%)';
+                        e.currentTarget.style.backgroundColor =
+                          "hsl(0, 0%, 100%)";
                       }}
                       title="Delete"
                     >
-                      <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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
+                        className="w-5 h-5"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          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>
@@ -324,15 +399,26 @@ function StoredKeysTab({
       {/* Info Card */}
       <div className="border rounded-lg p-6 bg-[hsl(202,100%,95%)] border-[hsl(202,100%,80%)]">
         <div className="flex gap-3">
-          <svg className="w-5 h-5 flex-shrink-0 mt-0.5 text-[hsl(202,100%,35%)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          <svg
+            className="w-5 h-5 flex-shrink-0 mt-0.5 text-[hsl(202,100%,35%)]"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+            />
           </svg>
           <div>
             <p className="text-sm font-medium text-[hsl(202,100%,25%)]">
               Security Note
             </p>
             <p className="text-sm mt-1 text-[hsl(202,100%,30%)]">
-              API keys are stored in your browser&apos;s local storage. For production use, consider implementing secure server-side storage.
+              API keys are stored in your browser&apos;s local storage. For
+              production use, consider implementing secure server-side storage.
             </p>
           </div>
         </div>
@@ -375,12 +461,12 @@ function AddKeyModal({
   // Handle escape key
   useEffect(() => {
     const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
+      if (e.key === "Escape") {
         onClose();
       }
     };
-    window.addEventListener('keydown', handleEscape);
-    return () => window.removeEventListener('keydown', handleEscape);
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
   }, [onClose]);
 
   return (
@@ -394,15 +480,31 @@ function AddKeyModal({
       >
         {/* Modal Header */}
         <div className="border-b px-6 py-4 flex items-center justify-between border-[hsl(0,0%,85%)]">
-          <h2 className="text-lg font-semibold text-[hsl(330,3%,19%)]">Add New API Key</h2>
+          <h2 className="text-lg font-semibold text-[hsl(330,3%,19%)]">
+            Add New API Key
+          </h2>
           <button
             onClick={onClose}
             className="p-1 rounded-md transition-colors text-[hsl(330,3%,49%)]"
-            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 95%)'}
-            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 95%)")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = "transparent")
+            }
           >
-            <svg className="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            <svg
+              className="w-6 h-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
             </svg>
           </button>
         </div>
@@ -410,7 +512,8 @@ function AddKeyModal({
         {/* Modal Body */}
         <div className="p-6">
           <p className="text-sm mb-6 text-[hsl(330,3%,49%)]">
-            Add a new API key to use in your evaluation workflows. All keys are stored securely in your browser.
+            Add a new API key to use in your evaluation workflows. All keys are
+            stored securely in your browser.
           </p>
 
           <div className="space-y-4">
@@ -423,8 +526,10 @@ function AddKeyModal({
                 onChange={(e) => onProviderChange(e.target.value)}
                 className="w-full px-4 py-2 rounded-md border focus:outline-none focus:ring-2 border-[hsl(0,0%,85%)] bg-[hsl(0,0%,100%)] text-[hsl(330,3%,19%)]"
               >
-                {providers.map(provider => (
-                  <option key={provider} value={provider}>{provider}</option>
+                {providers.map((provider) => (
+                  <option key={provider} value={provider}>
+                    {provider}
+                  </option>
                 ))}
               </select>
             </div>
@@ -459,8 +564,18 @@ function AddKeyModal({
           {/* Info Card */}
           <div className="mt-6 border rounded-lg p-3 bg-[hsl(202,100%,95%)] border-[hsl(202,100%,80%)]">
             <div className="flex gap-2">
-              <svg className="w-4 h-4 flex-shrink-0 mt-0.5 text-[hsl(202,100%,35%)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              <svg
+                className="w-4 h-4 flex-shrink-0 mt-0.5 text-[hsl(202,100%,35%)]"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
               </svg>
               <p className="text-xs text-[hsl(202,100%,30%)]">
                 API keys are stored in your browser&apos;s local storage.
@@ -474,16 +589,24 @@ function AddKeyModal({
           <button
             onClick={onClose}
             className="px-4 py-2 rounded-md text-sm font-medium transition-colors border border-[hsl(0,0%,85%)] bg-[hsl(0,0%,100%)] text-[hsl(330,3%,19%)]"
-            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 95%)'}
-            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 100%)'}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 95%)")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 100%)")
+            }
           >
             Cancel
           </button>
           <button
             onClick={onAddKey}
             className="px-4 py-2 rounded-md text-sm font-medium transition-colors bg-[#171717] text-[hsl(0,0%,100%)]"
-            onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#404040'}
-            onMouseLeave={(e) => e.currentTarget.style.backgroundColor = '#171717'}
+            onMouseEnter={(e) =>
+              (e.currentTarget.style.backgroundColor = "#404040")
+            }
+            onMouseLeave={(e) =>
+              (e.currentTarget.style.backgroundColor = "#171717")
+            }
           >
             Add API Key
           </button>
diff --git a/app/knowledge-base/page.tsx b/app/knowledge-base/page.tsx
index 2eece0d..a5bf4c4 100644
--- a/app/knowledge-base/page.tsx
+++ b/app/knowledge-base/page.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import { useState, useEffect, useRef } from 'react';
-import { colors } from '@/app/lib/colors';
-import { formatDate } from '@/app/components/utils';
-import Sidebar from '@/app/components/Sidebar';
-import { useAuth } from '@/app/lib/context/AuthContext';
-import { useApp } from '@/app/lib/context/AppContext';
+import { useState, useEffect, useRef } from "react";
+import { colors } from "@/app/lib/colors";
+import { formatDate } from "@/app/components/utils";
+import Sidebar from "@/app/components/Sidebar";
+import { useAuth } from "@/app/lib/context/AuthContext";
+import { useApp } from "@/app/lib/context/AppContext";
 
 export interface Document {
   id: string;
@@ -21,7 +21,7 @@ export interface Collection {
   id: string;
   name?: string;
   description?: string;
-  knowledge_base_id?:string,
+  knowledge_base_id?: string;
   inserted_at: string;
   updated_at: string;
   status?: string;
@@ -33,13 +33,16 @@ export default function KnowledgeBasePage() {
   const { sidebarCollapsed, setSidebarCollapsed } = useApp();
   const [collections, setCollections] = useState<Collection[]>([]);
   const [availableDocuments, setAvailableDocuments] = useState<Document[]>([]);
-  const [selectedCollection, setSelectedCollection] = useState<Collection | null>(null);
+  const [selectedCollection, setSelectedCollection] =
+    useState<Collection | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [isCreating, setIsCreating] = useState(false);
   const [showCreateForm, setShowCreateForm] = useState(false);
   const [showDocumentPicker, setShowDocumentPicker] = useState(false);
   const [showConfirmDelete, setShowConfirmDelete] = useState(false);
-  const [collectionToDelete, setCollectionToDelete] = useState<string | null>(null);
+  const [collectionToDelete, setCollectionToDelete] = useState<string | null>(
+    null,
+  );
   const [showDocPreviewModal, setShowDocPreviewModal] = useState(false);
   const [previewDoc, setPreviewDoc] = useState<Document | null>(null);
   const { activeKey: apiKey } = useAuth();
@@ -52,43 +55,60 @@ export default function KnowledgeBasePage() {
   const fetchCollectionsRef = useRef<(() => Promise<void>) | null>(null);
 
   // Form state
-  const [collectionName, setCollectionName] = useState('');
-  const [collectionDescription, setCollectionDescription] = useState('');
-  const [selectedDocuments, setSelectedDocuments] = useState<Set<string>>(new Set());
+  const [collectionName, setCollectionName] = useState("");
+  const [collectionDescription, setCollectionDescription] = useState("");
+  const [selectedDocuments, setSelectedDocuments] = useState<Set<string>>(
+    new Set(),
+  );
 
   // Helper functions for name cache - using job_id as key
-  const CACHE_KEY = 'collection_job_cache';
-
-  const saveCollectionData = (jobId: string, name: string, description: string, collectionId?: string) => {
+  const CACHE_KEY = "collection_job_cache";
+
+  const saveCollectionData = (
+    jobId: string,
+    name: string,
+    description: string,
+    collectionId?: string,
+  ) => {
     try {
-      const cache = JSON.parse(localStorage.getItem(CACHE_KEY) || '{}');
+      const cache = JSON.parse(localStorage.getItem(CACHE_KEY) || "{}");
       cache[jobId] = { name, description, collection_id: collectionId };
       localStorage.setItem(CACHE_KEY, JSON.stringify(cache));
     } catch (e) {
-      console.error('Failed to save collection data:', e);
+      console.error("Failed to save collection data:", e);
     }
   };
 
-  const getCollectionDataByCollectionId = (collectionId: string): { name?: string; description?: string; job_id?: string } => {
+  const getCollectionDataByCollectionId = (
+    collectionId: string,
+  ): { name?: string; description?: string; job_id?: string } => {
     try {
-      const cache = JSON.parse(localStorage.getItem(CACHE_KEY) || '{}');
+      const cache = JSON.parse(localStorage.getItem(CACHE_KEY) || "{}");
       // Find the entry where collection_id matches
       for (const [jobId, data] of Object.entries(cache)) {
-        const cacheData = data as { name: string; description: string; collection_id?: string };
+        const cacheData = data as {
+          name: string;
+          description: string;
+          collection_id?: string;
+        };
         if (cacheData.collection_id === collectionId) {
-          return { name: cacheData.name, description: cacheData.description, job_id: jobId };
+          return {
+            name: cacheData.name,
+            description: cacheData.description,
+            job_id: jobId,
+          };
         }
       }
       return {};
     } catch (e) {
-      console.error('Failed to get collection data:', e);
+      console.error("Failed to get collection data:", e);
       return {};
     }
   };
 
   const deleteCollectionFromCache = (collectionId: string) => {
     try {
-      const cache = JSON.parse(localStorage.getItem(CACHE_KEY) || '{}');
+      const cache = JSON.parse(localStorage.getItem(CACHE_KEY) || "{}");
       for (const [jobId, data] of Object.entries(cache)) {
         const cacheData = data as { collection_id?: string };
         if (cacheData.collection_id === collectionId) {
@@ -98,31 +118,37 @@ export default function KnowledgeBasePage() {
       }
       localStorage.setItem(CACHE_KEY, JSON.stringify(cache));
     } catch (e) {
-      console.error('Failed to delete collection from cache:', e);
+      console.error("Failed to delete collection from cache:", e);
     }
   };
 
   const pruneStaleCache = (liveCollectionIds: Set<string>) => {
     try {
-      const cache = JSON.parse(localStorage.getItem(CACHE_KEY) || '{}');
+      const cache = JSON.parse(localStorage.getItem(CACHE_KEY) || "{}");
       let changed = false;
       for (const [jobId, data] of Object.entries(cache)) {
         const cacheData = data as { collection_id?: string };
         // Only prune entries that have a collection_id but it's no longer in the live list
-        if (cacheData.collection_id && !liveCollectionIds.has(cacheData.collection_id)) {
+        if (
+          cacheData.collection_id &&
+          !liveCollectionIds.has(cacheData.collection_id)
+        ) {
           delete cache[jobId];
           changed = true;
         }
       }
       if (changed) localStorage.setItem(CACHE_KEY, JSON.stringify(cache));
     } catch (e) {
-      console.error('Failed to prune stale cache:', e);
+      console.error("Failed to prune stale cache:", e);
     }
   };
 
   const enrichCollectionWithCache = async (
     collection: Collection,
-    jobStatusMap: Map<string, { status: string | null; collectionId: string | null }>
+    jobStatusMap: Map<
+      string,
+      { status: string | null; collectionId: string | null }
+    >,
   ): Promise<Collection> => {
     // First try to look up cached data by collection_id
     const cached = getCollectionDataByCollectionId(collection.id);
@@ -134,11 +160,15 @@ export default function KnowledgeBasePage() {
 
     // If we don't have cached data by collection_id, we need to find it by checking all jobs
     if (!jobId) {
-      const cache = JSON.parse(localStorage.getItem(CACHE_KEY) || '{}');
+      const cache = JSON.parse(localStorage.getItem(CACHE_KEY) || "{}");
 
       // Try each job_id in the cache to find which one matches this collection
       for (const [cachedJobId, data] of Object.entries(cache)) {
-        const cacheData = data as { name: string; description: string; collection_id?: string };
+        const cacheData = data as {
+          name: string;
+          description: string;
+          collection_id?: string;
+        };
 
         // If collection_id is not set yet, check the pre-fetched job status
         if (!cacheData.collection_id) {
@@ -150,7 +180,12 @@ export default function KnowledgeBasePage() {
             collectionJobStatus = jobInfo.status;
 
             // Update cache with collection_id for faster lookup next time
-            saveCollectionData(cachedJobId, cacheData.name, cacheData.description, collection.id);
+            saveCollectionData(
+              cachedJobId,
+              cacheData.name,
+              cacheData.description,
+              collection.id,
+            );
             break;
           }
         }
@@ -165,36 +200,49 @@ export default function KnowledgeBasePage() {
 
         // Update cache with collection_id if not already set
         if (jobInfo.collectionId && !cached.job_id) {
-          saveCollectionData(jobId, name || '', description || '', jobInfo.collectionId);
+          saveCollectionData(
+            jobId,
+            name || "",
+            description || "",
+            jobInfo.collectionId,
+          );
         }
       }
     }
 
     return {
       ...collection,
-      name: name || 'Untitled Collection',
-      description: description || '',
+      name: name || "Untitled Collection",
+      description: description || "",
       status: collectionJobStatus || undefined,
       job_id: jobId,
     };
   };
 
   // Pre-fetch job statuses only for entries that need collection_id resolution
-  const preFetchJobStatuses = async (collections: Collection[]): Promise<Map<string, { status: string | null; collectionId: string | null }>> => {
+  const preFetchJobStatuses = async (
+    collections: Collection[],
+  ): Promise<
+    Map<string, { status: string | null; collectionId: string | null }>
+  > => {
     if (!apiKey) return new Map();
 
-    const cache = JSON.parse(localStorage.getItem(CACHE_KEY) || '{}');
+    const cache = JSON.parse(localStorage.getItem(CACHE_KEY) || "{}");
 
     // Only fetch job statuses for entries without collection_id AND that might match our collections
     const jobIdsToFetch = new Set<string>();
 
-    collections.forEach(collection => {
+    collections.forEach((collection) => {
       // First check if this collection already has cached data with collection_id
       const cached = getCollectionDataByCollectionId(collection.id);
       if (!cached.job_id) {
         // No cached data found by collection_id, need to check all uncached jobs
         for (const [jobId, data] of Object.entries(cache)) {
-          const cacheData = data as { name: string; description: string; collection_id?: string };
+          const cacheData = data as {
+            name: string;
+            description: string;
+            collection_id?: string;
+          };
           if (!cacheData.collection_id) {
             jobIdsToFetch.add(jobId);
           }
@@ -212,25 +260,26 @@ export default function KnowledgeBasePage() {
       Array.from(jobIdsToFetch).map(async (jobId) => {
         try {
           const response = await fetch(`/api/collections/jobs/${jobId}`, {
-            headers: { 'X-API-KEY': apiKey.key },
+            headers: { "X-API-KEY": apiKey.key },
           });
 
           if (response.ok) {
             const result = await response.json();
             const jobData = result.data || result;
-            const collectionId = jobData.collection?.id || jobData.collection_id || null;
+            const collectionId =
+              jobData.collection?.id || jobData.collection_id || null;
 
             return {
               jobId,
               status: jobData.status || null,
-              collectionId: collectionId
+              collectionId: collectionId,
             };
           }
         } catch (error) {
-          console.error('Error fetching job status:', error);
+          console.error("Error fetching job status:", error);
         }
         return { jobId, status: null, collectionId: null };
-      })
+      }),
     );
 
     // Convert to Map for O(1) lookup
@@ -249,8 +298,8 @@ export default function KnowledgeBasePage() {
 
     setIsLoading(true);
     try {
-      const response = await fetch('/api/collections', {
-        headers: { 'X-API-KEY': apiKey.key },
+      const response = await fetch("/api/collections", {
+        headers: { "X-API-KEY": apiKey.key },
       });
 
       if (response.ok) {
@@ -262,30 +311,46 @@ export default function KnowledgeBasePage() {
 
         // Enrich collections with cached names and live status
         const enrichedCollections = await Promise.all(
-          collections.map((collection: Collection) => enrichCollectionWithCache(collection, jobStatusMap))
+          collections.map((collection: Collection) =>
+            enrichCollectionWithCache(collection, jobStatusMap),
+          ),
         );
 
         // Remove cache entries whose collection no longer exists on the backend
-        const liveIds = new Set<string>(enrichedCollections.map((c: Collection) => c.id));
+        const liveIds = new Set<string>(
+          enrichedCollections.map((c: Collection) => c.id),
+        );
         pruneStaleCache(liveIds);
 
         // Preserve optimistic entries not yet replaced by a real collection
         setCollections((prev) => {
-          const fetchedJobIds = new Set(enrichedCollections.map((c: Collection) => c.job_id).filter(Boolean));
+          const fetchedJobIds = new Set(
+            enrichedCollections
+              .map((c: Collection) => c.job_id)
+              .filter(Boolean),
+          );
           const activeOptimistic = prev.filter(
-            (c) => c.id.startsWith('optimistic-') && (!c.job_id || !fetchedJobIds.has(c.job_id))
+            (c) =>
+              c.id.startsWith("optimistic-") &&
+              (!c.job_id || !fetchedJobIds.has(c.job_id)),
           );
           // Sort by inserted_at in descending order (latest first)
           const combined = [...activeOptimistic, ...enrichedCollections];
-          return combined.sort((a, b) => new Date(b.inserted_at).getTime() - new Date(a.inserted_at).getTime());
+          return combined.sort(
+            (a, b) =>
+              new Date(b.inserted_at).getTime() -
+              new Date(a.inserted_at).getTime(),
+          );
         });
 
         // If selectedCollection is optimistic and the real one just arrived, fetch full details
         // Extract the logic outside the updater to avoid side effects
         let replacementId: string | null = null;
         setSelectedCollection((prev) => {
-          if (prev?.id.startsWith('optimistic-') && prev.job_id) {
-            const replacement = enrichedCollections.find((c: Collection) => c.job_id === prev.job_id);
+          if (prev?.id.startsWith("optimistic-") && prev.job_id) {
+            const replacement = enrichedCollections.find(
+              (c: Collection) => c.job_id === prev.job_id,
+            );
             if (replacement) {
               replacementId = replacement.id;
               // Don't set the replacement yet - let fetchCollectionDetails do it with full data
@@ -300,10 +365,10 @@ export default function KnowledgeBasePage() {
         }
       } else {
         const error = await response.json().catch(() => ({}));
-        console.error('Failed to fetch collections:', response.status, error);
+        console.error("Failed to fetch collections:", response.status, error);
       }
     } catch (error) {
-      console.error('Error fetching collections:', error);
+      console.error("Error fetching collections:", error);
     } finally {
       setIsLoading(false);
     }
@@ -314,28 +379,30 @@ export default function KnowledgeBasePage() {
     if (!apiKey) return;
 
     try {
-      const response = await fetch('/api/document', {
-        headers: { 'X-API-KEY': apiKey.key },
+      const response = await fetch("/api/document", {
+        headers: { "X-API-KEY": apiKey.key },
       });
 
       if (response.ok) {
         const result = await response.json();
 
         // Handle both direct array and wrapped response
-        const documentList = Array.isArray(result) ? result : (result.data || []);
+        const documentList = Array.isArray(result) ? result : result.data || [];
 
         // Sort by inserted_at in descending order (latest first)
-        const sortedDocuments = documentList.sort((a: Document, b: Document) =>
-          new Date(b.inserted_at || 0).getTime() - new Date(a.inserted_at || 0).getTime()
+        const sortedDocuments = documentList.sort(
+          (a: Document, b: Document) =>
+            new Date(b.inserted_at || 0).getTime() -
+            new Date(a.inserted_at || 0).getTime(),
         );
 
         setAvailableDocuments(sortedDocuments);
       } else {
         const error = await response.json().catch(() => ({}));
-        console.error('Failed to fetch documents:', response.status, error);
+        console.error("Failed to fetch documents:", response.status, error);
       }
     } catch (error) {
-      console.error('Error fetching documents:', error);
+      console.error("Error fetching documents:", error);
     }
   };
 
@@ -344,8 +411,10 @@ export default function KnowledgeBasePage() {
     if (!apiKey) return;
 
     // Don't fetch optimistic collections from the server
-    if (collectionId.startsWith('optimistic-')) {
-      const optimisticCollection = collections.find(c => c.id === collectionId);
+    if (collectionId.startsWith("optimistic-")) {
+      const optimisticCollection = collections.find(
+        (c) => c.id === collectionId,
+      );
       if (optimisticCollection) {
         setSelectedCollection(optimisticCollection);
       }
@@ -355,7 +424,7 @@ export default function KnowledgeBasePage() {
     setIsLoading(true);
     try {
       const response = await fetch(`/api/collections/${collectionId}`, {
-        headers: { 'X-API-KEY': apiKey.key },
+        headers: { "X-API-KEY": apiKey.key },
       });
 
       if (response.ok) {
@@ -371,24 +440,30 @@ export default function KnowledgeBasePage() {
         let status = undefined;
         if (cached.job_id) {
           try {
-            const jobResponse = await fetch(`/api/collections/jobs/${cached.job_id}`, {
-              headers: { 'X-API-KEY': apiKey.key },
-            });
+            const jobResponse = await fetch(
+              `/api/collections/jobs/${cached.job_id}`,
+              {
+                headers: { "X-API-KEY": apiKey.key },
+              },
+            );
             if (jobResponse.ok) {
               const jobResult = await jobResponse.json();
               const jobData = jobResult.data || jobResult;
               status = jobData.status || undefined;
             }
           } catch (error) {
-            console.error('Error fetching job status for collection details:', error);
+            console.error(
+              "Error fetching job status for collection details:",
+              error,
+            );
           }
         }
 
         // Enrich the collection with cached name/description and live status
         const enrichedCollection = {
           ...collectionData,
-          name: cached.name || collectionData.name || 'Untitled Collection',
-          description: cached.description || collectionData.description || '',
+          name: cached.name || collectionData.name || "Untitled Collection",
+          description: cached.description || collectionData.description || "",
           status: status,
           job_id: cached.job_id,
         };
@@ -396,7 +471,7 @@ export default function KnowledgeBasePage() {
         setSelectedCollection(enrichedCollection);
       }
     } catch (error) {
-      console.error('Error fetching collection details:', error);
+      console.error("Error fetching collection details:", error);
     } finally {
       setIsLoading(false);
     }
@@ -423,14 +498,15 @@ export default function KnowledgeBasePage() {
       for (const [collectionId, jobId] of Array.from(jobs)) {
         try {
           const response = await fetch(`/api/collections/jobs/${jobId}`, {
-            headers: { 'X-API-KEY': currentApiKey.key },
+            headers: { "X-API-KEY": currentApiKey.key },
           });
           if (!response.ok) continue;
 
           const result = await response.json();
           const jobData = result.data || result;
           const status = jobData.status || null;
-          const realCollectionId = jobData.collection?.id || jobData.collection_id || null;
+          const realCollectionId =
+            jobData.collection?.id || jobData.collection_id || null;
           const knowledgeBaseId = jobData.collection?.knowledge_base_id || null;
 
           if (status) {
@@ -439,39 +515,54 @@ export default function KnowledgeBasePage() {
               prev.map((c) => {
                 // Update by collectionId OR by job_id (handles optimistic->real transition)
                 if (c.id === collectionId || c.job_id === jobId) {
-                  return { ...c, status, knowledge_base_id: knowledgeBaseId || c.knowledge_base_id };
+                  return {
+                    ...c,
+                    status,
+                    knowledge_base_id: knowledgeBaseId || c.knowledge_base_id,
+                  };
                 }
                 return c;
-              })
+              }),
             );
             setSelectedCollection((prev) => {
               if (prev?.id === collectionId || prev?.job_id === jobId) {
-                return { ...prev, status, knowledge_base_id: knowledgeBaseId || prev?.knowledge_base_id };
+                return {
+                  ...prev,
+                  status,
+                  knowledge_base_id: knowledgeBaseId || prev?.knowledge_base_id,
+                };
               }
               return prev;
             });
 
             // If job is complete (not pending/in_progress/processing), remove from polling and trigger full refresh
-            const isComplete = !['pending', 'processing'].includes(status.toLowerCase());
+            const isComplete = !["pending", "processing"].includes(
+              status.toLowerCase(),
+            );
             if (isComplete) {
               jobs.delete(collectionId);
               anyResolved = true;
 
               // Persist real collectionId so enrichment finds it on next load
-              if (collectionId.startsWith('optimistic-') && realCollectionId) {
+              if (collectionId.startsWith("optimistic-") && realCollectionId) {
                 try {
-                  const cache = JSON.parse(localStorage.getItem(CACHE_KEY) || '{}');
+                  const cache = JSON.parse(
+                    localStorage.getItem(CACHE_KEY) || "{}",
+                  );
                   const existing = cache[jobId] || {};
-                  cache[jobId] = { ...existing, collection_id: realCollectionId };
+                  cache[jobId] = {
+                    ...existing,
+                    collection_id: realCollectionId,
+                  };
                   localStorage.setItem(CACHE_KEY, JSON.stringify(cache));
                 } catch (e) {
-                  console.error('Failed to update cache:', e);
+                  console.error("Failed to update cache:", e);
                 }
               }
             }
           }
         } catch (error) {
-          console.error('Polling error for job', jobId, error);
+          console.error("Polling error for job", jobId, error);
         }
       }
 
@@ -485,12 +576,12 @@ export default function KnowledgeBasePage() {
   // Create knowledge base
   const handleCreateClick = async () => {
     if (!apiKey) {
-      alert('No API key found');
+      alert("No API key found");
       return;
     }
 
     if (!collectionName.trim() || selectedDocuments.size === 0) {
-      alert('Please provide a name and select at least one document');
+      alert("Please provide a name and select at least one document");
       return;
     }
 
@@ -504,8 +595,8 @@ export default function KnowledgeBasePage() {
     // Immediately clear the form and switch to preview
     setShowCreateForm(false);
     setShowDocumentPicker(false);
-    setCollectionName('');
-    setCollectionDescription('');
+    setCollectionName("");
+    setCollectionDescription("");
     setSelectedDocuments(new Set());
 
     // Build an optimistic collection and show the preview right away
@@ -521,7 +612,7 @@ export default function KnowledgeBasePage() {
       description: descriptionAtCreation,
       inserted_at: now,
       updated_at: now,
-      status: 'pending',
+      status: "pending",
       documents: optimisticDocuments,
     };
 
@@ -529,17 +620,17 @@ export default function KnowledgeBasePage() {
     setSelectedCollection(optimisticCollection);
 
     try {
-      const response = await fetch('/api/collections', {
-        method: 'POST',
+      const response = await fetch("/api/collections", {
+        method: "POST",
         headers: {
-          'X-API-KEY': apiKey.key,
-          'Content-Type': 'application/json',
+          "X-API-KEY": apiKey.key,
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
           name: nameAtCreation,
           description: descriptionAtCreation,
           documents: docsAtCreation,
-          provider: 'openai',
+          provider: "openai",
         }),
       });
 
@@ -553,32 +644,36 @@ export default function KnowledgeBasePage() {
           // Attach job_id to the optimistic entry so polling picks it up
           setCollections((prev) =>
             prev.map((c) =>
-              c.id === optimisticId ? { ...c, job_id: jobId } : c
-            )
+              c.id === optimisticId ? { ...c, job_id: jobId } : c,
+            ),
           );
           setSelectedCollection((prev) =>
-            prev?.id === optimisticId ? { ...prev, job_id: jobId } : prev
+            prev?.id === optimisticId ? { ...prev, job_id: jobId } : prev,
           );
 
           // Register for polling immediately — don't wait for the next collections render
           activeJobsRef.current.set(optimisticId, jobId);
           startPolling();
         } else {
-          console.error('No job ID found in response - cannot save name to cache');
+          console.error(
+            "No job ID found in response - cannot save name to cache",
+          );
         }
 
         // Refresh the real list from the backend (replaces the optimistic entry once the backend knows about it)
         await fetchCollections();
       } else {
         const error = await response.json().catch(() => ({}));
-        alert(`Failed to create knowledge base: ${error.error || 'Unknown error'}`);
+        alert(
+          `Failed to create knowledge base: ${error.error || "Unknown error"}`,
+        );
         // Remove the optimistic entry on failure
         setCollections((prev) => prev.filter((c) => c.id !== optimisticId));
         setSelectedCollection(null);
       }
     } catch (error) {
-      console.error('Error creating knowledge base:', error);
-      alert('Failed to create knowledge base');
+      console.error("Error creating knowledge base:", error);
+      alert("Failed to create knowledge base");
       setCollections((prev) => prev.filter((c) => c.id !== optimisticId));
       setSelectedCollection(null);
     } finally {
@@ -606,16 +701,18 @@ export default function KnowledgeBasePage() {
 
     // Update status to "deleting" instead of removing immediately
     setCollections((prev) =>
-      prev.map((c) => (c.id === collectionId ? { ...c, status: 'deleting' } : c))
+      prev.map((c) =>
+        c.id === collectionId ? { ...c, status: "deleting" } : c,
+      ),
     );
     setSelectedCollection((prev) =>
-      prev?.id === collectionId ? { ...prev, status: 'deleting' } : prev
+      prev?.id === collectionId ? { ...prev, status: "deleting" } : prev,
     );
 
     try {
       const response = await fetch(`/api/collections/${collectionId}`, {
-        method: 'DELETE',
-        headers: { 'X-API-KEY': apiKey.key },
+        method: "DELETE",
+        headers: { "X-API-KEY": apiKey.key },
       });
 
       if (response.ok) {
@@ -629,9 +726,12 @@ export default function KnowledgeBasePage() {
             if (!currentApiKey) return;
 
             try {
-              const jobResponse = await fetch(`/api/collections/jobs/${jobId}`, {
-                headers: { 'X-API-KEY': currentApiKey.key },
-              });
+              const jobResponse = await fetch(
+                `/api/collections/jobs/${jobId}`,
+                {
+                  headers: { "X-API-KEY": currentApiKey.key },
+                },
+              );
 
               if (jobResponse.ok) {
                 const jobResult = await jobResponse.json();
@@ -639,20 +739,24 @@ export default function KnowledgeBasePage() {
                 const status = jobData.status;
                 const statusLower = status?.toLowerCase();
 
-                if (statusLower === 'successful') {
+                if (statusLower === "successful") {
                   // Job completed successfully - remove from UI and clean up cache
                   deleteCollectionFromCache(collectionId);
-                  setCollections((prev) => prev.filter((c) => c.id !== collectionId));
+                  setCollections((prev) =>
+                    prev.filter((c) => c.id !== collectionId),
+                  );
                   setSelectedCollection(null);
-                } else if (statusLower === 'failed') {
+                } else if (statusLower === "failed") {
                   // Job failed - restore original collection
-                  alert('Failed to delete collection');
+                  alert("Failed to delete collection");
                   if (originalCollection) {
                     setCollections((prev) =>
-                      prev.map((c) => (c.id === collectionId ? originalCollection : c))
+                      prev.map((c) =>
+                        c.id === collectionId ? originalCollection : c,
+                      ),
                     );
                     setSelectedCollection((prev) =>
-                      prev?.id === collectionId ? originalCollection : prev
+                      prev?.id === collectionId ? originalCollection : prev,
                     );
                   }
                 } else {
@@ -661,25 +765,29 @@ export default function KnowledgeBasePage() {
                 }
               } else {
                 // Failed to get job status
-                alert('Failed to check delete status');
+                alert("Failed to check delete status");
                 if (originalCollection) {
                   setCollections((prev) =>
-                    prev.map((c) => (c.id === collectionId ? originalCollection : c))
+                    prev.map((c) =>
+                      c.id === collectionId ? originalCollection : c,
+                    ),
                   );
                   setSelectedCollection((prev) =>
-                    prev?.id === collectionId ? originalCollection : prev
+                    prev?.id === collectionId ? originalCollection : prev,
                   );
                 }
               }
             } catch (error) {
-              console.error('Error polling delete status:', error);
-              alert('Failed to check delete status');
+              console.error("Error polling delete status:", error);
+              alert("Failed to check delete status");
               if (originalCollection) {
                 setCollections((prev) =>
-                  prev.map((c) => (c.id === collectionId ? originalCollection : c))
+                  prev.map((c) =>
+                    c.id === collectionId ? originalCollection : c,
+                  ),
                 );
                 setSelectedCollection((prev) =>
-                  prev?.id === collectionId ? originalCollection : prev
+                  prev?.id === collectionId ? originalCollection : prev,
                 );
               }
             }
@@ -694,27 +802,27 @@ export default function KnowledgeBasePage() {
           setSelectedCollection(null);
         }
       } else {
-        alert('Failed to delete collection');
+        alert("Failed to delete collection");
         // Restore the original collection on failure
         if (originalCollection) {
           setCollections((prev) =>
-            prev.map((c) => (c.id === collectionId ? originalCollection : c))
+            prev.map((c) => (c.id === collectionId ? originalCollection : c)),
           );
           setSelectedCollection((prev) =>
-            prev?.id === collectionId ? originalCollection : prev
+            prev?.id === collectionId ? originalCollection : prev,
           );
         }
       }
     } catch (error) {
-      console.error('Error deleting collection:', error);
-      alert('Failed to delete collection');
+      console.error("Error deleting collection:", error);
+      alert("Failed to delete collection");
       // Restore the original collection on error
       if (originalCollection) {
         setCollections((prev) =>
-          prev.map((c) => (c.id === collectionId ? originalCollection : c))
+          prev.map((c) => (c.id === collectionId ? originalCollection : c)),
         );
         setSelectedCollection((prev) =>
-          prev?.id === collectionId ? originalCollection : prev
+          prev?.id === collectionId ? originalCollection : prev,
         );
       }
     }
@@ -740,10 +848,14 @@ export default function KnowledgeBasePage() {
   }, [apiKey]);
 
   // Keep apiKeyRef in sync so polling always has the current key
-  useEffect(() => { apiKeyRef.current = apiKey; }, [apiKey]);
+  useEffect(() => {
+    apiKeyRef.current = apiKey;
+  }, [apiKey]);
 
   // Keep fetchCollectionsRef in sync so polling always has the current function
-  useEffect(() => { fetchCollectionsRef.current = fetchCollections; }, [fetchCollections]);
+  useEffect(() => {
+    fetchCollectionsRef.current = fetchCollections;
+  }, [fetchCollections]);
 
   // Sync activeJobsRef when collections change (picks up in-progress entries on initial load)
   useEffect(() => {
@@ -756,7 +868,8 @@ export default function KnowledgeBasePage() {
     // Add any new pending / processing collections
     let newJobAdded = false;
     collections.forEach((c) => {
-      const isProcessing = c.status && ['pending', 'processing'].includes(c.status.toLowerCase());
+      const isProcessing =
+        c.status && ["pending", "processing"].includes(c.status.toLowerCase());
 
       if (isProcessing && c.job_id && !activeJobsRef.current.has(c.id)) {
         activeJobsRef.current.set(c.id, c.job_id);
@@ -783,25 +896,38 @@ export default function KnowledgeBasePage() {
   }, []);
 
   return (
-    <div className="flex h-screen" style={{ backgroundColor: colors.bg.primary }}>
+    <div
+      className="flex h-screen"
+      style={{ backgroundColor: colors.bg.primary }}
+    >
       <Sidebar collapsed={sidebarCollapsed} activeRoute="/knowledge-base" />
 
       {/* Main Content */}
       <div className="flex-1 flex flex-col overflow-hidden">
         {/* Header with Collapse Button */}
-        <div className="border-b px-6 py-4" style={{ backgroundColor: colors.bg.primary, borderColor: colors.border }}>
+        <div
+          className="border-b px-6 py-4"
+          style={{
+            backgroundColor: colors.bg.primary,
+            borderColor: colors.border,
+          }}
+        >
           <div className="flex items-center gap-4">
             <button
               onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
               className="p-2 rounded-md transition-colors flex-shrink-0"
               style={{
-                borderWidth: '1px',
+                borderWidth: "1px",
                 borderColor: colors.border,
                 backgroundColor: colors.bg.primary,
-                color: colors.text.primary
+                color: colors.text.primary,
               }}
-              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = colors.bg.secondary}
-              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = colors.bg.primary}
+              onMouseEnter={(e) =>
+                (e.currentTarget.style.backgroundColor = colors.bg.secondary)
+              }
+              onMouseLeave={(e) =>
+                (e.currentTarget.style.backgroundColor = colors.bg.primary)
+              }
             >
               <svg
                 className="w-5 h-5"
@@ -827,10 +953,16 @@ export default function KnowledgeBasePage() {
               </svg>
             </button>
             <div>
-              <h1 className="text-2xl font-semibold" style={{ color: colors.text.primary }}>
+              <h1
+                className="text-2xl font-semibold"
+                style={{ color: colors.text.primary }}
+              >
                 Knowledge Base
               </h1>
-              <p className="text-sm mt-1" style={{ color: colors.text.secondary }}>
+              <p
+                className="text-sm mt-1"
+                style={{ color: colors.text.secondary }}
+              >
                 Manage your knowledge bases for RAG
               </p>
             </div>
@@ -864,412 +996,589 @@ export default function KnowledgeBasePage() {
 
             {/* Collections List */}
             <div className="flex-1 overflow-y-auto px-6 pb-6">
-          {isLoading && collections.length === 0 ? (
-            <div className="text-center py-8" style={{ color: colors.text.secondary }}>
-              Loading knowledge bases...
-            </div>
-          ) : collections.length === 0 ? (
-            <div className="text-center py-8" style={{ color: colors.text.secondary }}>
-              No knowledge bases yet. Create your first one!
-            </div>
-          ) : (
-            <div className="space-y-2">
-              {collections.map((collection) => (
+              {isLoading && collections.length === 0 ? (
                 <div
-                  key={collection.id}
-                  onClick={() => {
-                    setShowCreateForm(false);
-                    setShowDocumentPicker(false);
-                    fetchCollectionDetails(collection.id);
-                  }}
-                  className={`border rounded-lg p-3 cursor-pointer transition-colors ${
-                    selectedCollection?.id === collection.id ? 'ring-2 ring-offset-1' : ''
-                  }`}
-                  style={{
-                    backgroundColor: selectedCollection?.id === collection.id
-                      ? 'hsl(202, 100%, 95%)'
-                      : colors.bg.primary,
-                    borderColor: selectedCollection?.id === collection.id
-                      ? 'hsl(202, 100%, 50%)'
-                      : colors.border,
-                  }}
+                  className="text-center py-8"
+                  style={{ color: colors.text.secondary }}
                 >
-                  <div className="flex items-start justify-between gap-2">
-                    <div className="flex-1 min-w-0">
-                      <div className="flex items-center gap-2 mb-1">
-                        <svg className="w-5 h-5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: colors.text.primary }}>
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
-                        </svg>
-                        <h3 className="text-sm font-semibold truncate" style={{ color: colors.text.primary }}>
-                          {collection.name}
-                        </h3>
-                      </div>
-                      {collection.description && (
-                        <p className="text-xs truncate" style={{ color: colors.text.secondary }}>
-                          {collection.description}
-                        </p>
-                      )}
-                      <p className="text-xs mt-1" style={{ color: colors.text.secondary }}>
-                        {formatDate(collection.inserted_at)}
-                      </p>
-                    </div>
-                    {!collection.id.startsWith('optimistic-') && (
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleDeleteCollection(collection.id);
-                        }}
-                        className="p-1.5 rounded-md transition-colors flex-shrink-0"
-                        style={{
-                          borderWidth: '1px',
-                          borderColor: 'hsl(8, 86%, 80%)',
-                          backgroundColor: colors.bg.primary,
-                          color: 'hsl(8, 86%, 40%)',
-                        }}
-                        onMouseEnter={(e) => {
-                          e.currentTarget.style.backgroundColor = 'hsl(8, 86%, 95%)';
-                        }}
-                        onMouseLeave={(e) => {
-                          e.currentTarget.style.backgroundColor = colors.bg.primary;
-                        }}
-                        title="Delete Knowledge Base"
-                      >
-                        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} 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>
+                  Loading knowledge bases...
                 </div>
-              ))}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Right Panel - Create Form or Preview */}
-        <div className="w-2/3 flex flex-col">
-        {showCreateForm ? (
-          /* Create Form */
-          <div className="flex-1 overflow-y-auto p-6">
-            <div className="flex items-center justify-between mb-6">
-              <h2 className="text-xl font-semibold" style={{ color: colors.text.primary }}>
-                Create Knowledge Base
-              </h2>
-              <button
-                onClick={() => {
-                  setShowCreateForm(false);
-                  setShowDocumentPicker(false);
-                  setCollectionName('');
-                  setCollectionDescription('');
-                  setSelectedDocuments(new Set());
-                }}
-                className="p-2 rounded-md transition-colors"
-                style={{ color: colors.text.secondary }}
-              >
-                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
-            </div>
-
-            {/* Name Input */}
-            <div className="mb-4">
-              <label className="block text-sm font-medium mb-2" style={{ color: colors.text.primary }}>
-                Name *
-              </label>
-              <input
-                type="text"
-                value={collectionName}
-                onChange={(e) => setCollectionName(e.target.value)}
-                placeholder="Enter collection name"
-                className="w-full px-4 py-2 rounded-md border text-sm"
-                style={{
-                  borderColor: colors.border,
-                  backgroundColor: colors.bg.secondary,
-                  color: colors.text.primary,
-                }}
-              />
-            </div>
-
-            {/* Description Input */}
-            <div className="mb-4">
-              <label className="block text-sm font-medium mb-2" style={{ color: colors.text.primary }}>
-                Description
-              </label>
-              <textarea
-                value={collectionDescription}
-                onChange={(e) => setCollectionDescription(e.target.value)}
-                placeholder="Enter collection description (optional)"
-                rows={3}
-                className="w-full px-4 py-2 rounded-md border text-sm resize-none"
-                style={{
-                  borderColor: colors.border,
-                  backgroundColor: colors.bg.secondary,
-                  color: colors.text.primary,
-                }}
-              />
-            </div>
-
-            {/* Document Selection */}
-            <div className="mb-6">
-              <label className="block text-sm font-medium mb-2" style={{ color: colors.text.primary }}>
-                Select Documents *
-              </label>
-              <button
-                type="button"
-                onClick={() => setShowDocumentPicker(true)}
-                className="w-full px-4 py-3 rounded-md border text-left flex items-center justify-between"
-                style={{
-                  borderColor: colors.border,
-                  backgroundColor: colors.bg.secondary,
-                  color: colors.text.primary,
-                }}
-              >
-                <span className="text-sm">
-                  {selectedDocuments.size === 0
-                    ? 'Click to select documents'
-                    : `${selectedDocuments.size} document${selectedDocuments.size > 1 ? 's' : ''} selected`}
-                </span>
-                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                </svg>
-              </button>
-
-              {/* Show selected documents */}
-              {selectedDocuments.size > 0 && (
-                <div className="mt-3 space-y-2">
-                  {Array.from(selectedDocuments).map((docId) => {
-                    const doc = availableDocuments.find((d) => d.id === docId);
-                    if (!doc) return null;
-                    return (
-                      <div
-                        key={docId}
-                        className="flex items-center justify-between p-2 rounded-md"
-                        style={{
-                          backgroundColor: colors.bg.secondary,
-                          borderColor: colors.border,
-                          border: `1px solid ${colors.border}`,
-                        }}
-                      >
-                        <span className="text-sm truncate" style={{ color: colors.text.primary }}>
-                          {doc.fname}
-                        </span>
-                        <button
-                          onClick={() => toggleDocumentSelection(docId)}
-                          className="ml-2 p-1 rounded-md transition-colors"
-                          style={{ color: colors.text.secondary }}
-                        >
-                          <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                          </svg>
-                        </button>
+              ) : collections.length === 0 ? (
+                <div
+                  className="text-center py-8"
+                  style={{ color: colors.text.secondary }}
+                >
+                  No knowledge bases yet. Create your first one!
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  {collections.map((collection) => (
+                    <div
+                      key={collection.id}
+                      onClick={() => {
+                        setShowCreateForm(false);
+                        setShowDocumentPicker(false);
+                        fetchCollectionDetails(collection.id);
+                      }}
+                      className={`border rounded-lg p-3 cursor-pointer transition-colors ${
+                        selectedCollection?.id === collection.id
+                          ? "ring-2 ring-offset-1"
+                          : ""
+                      }`}
+                      style={{
+                        backgroundColor:
+                          selectedCollection?.id === collection.id
+                            ? "hsl(202, 100%, 95%)"
+                            : colors.bg.primary,
+                        borderColor:
+                          selectedCollection?.id === collection.id
+                            ? "hsl(202, 100%, 50%)"
+                            : colors.border,
+                      }}
+                    >
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center gap-2 mb-1">
+                            <svg
+                              className="w-5 h-5 flex-shrink-0"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke="currentColor"
+                              style={{ color: colors.text.primary }}
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+                              />
+                            </svg>
+                            <h3
+                              className="text-sm font-semibold truncate"
+                              style={{ color: colors.text.primary }}
+                            >
+                              {collection.name}
+                            </h3>
+                          </div>
+                          {collection.description && (
+                            <p
+                              className="text-xs truncate"
+                              style={{ color: colors.text.secondary }}
+                            >
+                              {collection.description}
+                            </p>
+                          )}
+                          <p
+                            className="text-xs mt-1"
+                            style={{ color: colors.text.secondary }}
+                          >
+                            {formatDate(collection.inserted_at)}
+                          </p>
+                        </div>
+                        {!collection.id.startsWith("optimistic-") && (
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleDeleteCollection(collection.id);
+                            }}
+                            className="p-1.5 rounded-md transition-colors flex-shrink-0"
+                            style={{
+                              borderWidth: "1px",
+                              borderColor: "hsl(8, 86%, 80%)",
+                              backgroundColor: colors.bg.primary,
+                              color: "hsl(8, 86%, 40%)",
+                            }}
+                            onMouseEnter={(e) => {
+                              e.currentTarget.style.backgroundColor =
+                                "hsl(8, 86%, 95%)";
+                            }}
+                            onMouseLeave={(e) => {
+                              e.currentTarget.style.backgroundColor =
+                                colors.bg.primary;
+                            }}
+                            title="Delete Knowledge Base"
+                          >
+                            <svg
+                              className="w-4 h-4"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                              stroke="currentColor"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                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>
-                    );
-                  })}
+                    </div>
+                  ))}
                 </div>
               )}
             </div>
-
-            {/* Create Button */}
-            <div className="flex justify-end">
-              <button
-                onClick={handleCreateClick}
-                disabled={isCreating || !collectionName.trim() || selectedDocuments.size === 0}
-                className="px-6 py-2 rounded-md text-sm font-medium"
-                style={{
-                  backgroundColor: colors.bg.secondary,
-                  color: colors.text.primary,
-                  border: `1px solid ${colors.border}`,
-                  opacity: isCreating || !collectionName.trim() || selectedDocuments.size === 0 ? 0.5 : 1,
-                }}
-              >
-                {isCreating ? 'Creating...' : 'Create'}
-              </button>
-            </div>
           </div>
-        ) : selectedCollection ? (
-          <>
-            {/* Preview Header */}
-            <div className="p-6 border-b" style={{ borderColor: colors.border }}>
-              <div className="flex items-start justify-between">
-                <div className="flex-1">
-                  <h2 className="text-xl font-semibold" style={{ color: colors.text.primary }}>
-                    {selectedCollection.name}
+
+          {/* Right Panel - Create Form or Preview */}
+          <div className="w-2/3 flex flex-col">
+            {showCreateForm ? (
+              /* Create Form */
+              <div className="flex-1 overflow-y-auto p-6">
+                <div className="flex items-center justify-between mb-6">
+                  <h2
+                    className="text-xl font-semibold"
+                    style={{ color: colors.text.primary }}
+                  >
+                    Create Knowledge Base
                   </h2>
-                  {selectedCollection.description && (
-                    <p className="text-sm mt-1" style={{ color: colors.text.secondary }}>
-                      {selectedCollection.description}
-                    </p>
-                  )}
-                </div>
-                {!selectedCollection.id.startsWith('optimistic-') && (
                   <button
-                    onClick={() => handleDeleteCollection(selectedCollection.id)}
-                    className="px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
-                    style={{
-                      backgroundColor: 'transparent',
-                      color: '#ef4444',
-                      border: '1px solid #ef4444',
+                    onClick={() => {
+                      setShowCreateForm(false);
+                      setShowDocumentPicker(false);
+                      setCollectionName("");
+                      setCollectionDescription("");
+                      setSelectedDocuments(new Set());
                     }}
+                    className="p-2 rounded-md transition-colors"
+                    style={{ color: colors.text.secondary }}
                   >
-                    Delete
+                    <svg
+                      className="w-5 h-5"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M6 18L18 6M6 6l12 12"
+                      />
+                    </svg>
                   </button>
-                )}
-              </div>
-
-              {/* Metadata */}
-              <div className="space-y-3 mt-6">
-                <div className="flex items-center gap-3">
-                  <div className="text-xs uppercase font-semibold" style={{ color: colors.text.secondary }}>
-                    Status:
-                  </div>
-                  <div className="text-sm font-semibold" style={{ color: colors.text.primary }}>
-                    {(selectedCollection.status || 'N/A').replace(/_/g, ' ').toUpperCase()}
-                  </div>
                 </div>
-                <div className="flex items-center gap-3">
-                  <div className="text-xs uppercase font-semibold" style={{ color: colors.text.secondary }}>
-                    Knowledge Base ID:
-                  </div>
-                  <div className="text-sm font-semibold" style={{ color: colors.text.primary }}>
-                    {selectedCollection.knowledge_base_id || 'N/A'}
-                  </div>
-                </div>
-                <div className="flex items-center gap-3">
-                  <div className="text-xs uppercase font-semibold" style={{ color: colors.text.secondary }}>
-                    Created:
-                  </div>
-                  <div className="text-sm font-semibold" style={{ color: colors.text.primary }}>
-                    {formatDate(selectedCollection.inserted_at)}
-                  </div>
+
+                {/* Name Input */}
+                <div className="mb-4">
+                  <label
+                    className="block text-sm font-medium mb-2"
+                    style={{ color: colors.text.primary }}
+                  >
+                    Name *
+                  </label>
+                  <input
+                    type="text"
+                    value={collectionName}
+                    onChange={(e) => setCollectionName(e.target.value)}
+                    placeholder="Enter collection name"
+                    className="w-full px-4 py-2 rounded-md border text-sm"
+                    style={{
+                      borderColor: colors.border,
+                      backgroundColor: colors.bg.secondary,
+                      color: colors.text.primary,
+                    }}
+                  />
                 </div>
-                <div className="flex items-center gap-3">
-                  <div className="text-xs uppercase font-semibold" style={{ color: colors.text.secondary }}>
-                    Last Updated:
-                  </div>
-                  <div className="text-sm font-semibold" style={{ color: colors.text.primary }}>
-                    {formatDate(selectedCollection.updated_at)}
-                  </div>
+
+                {/* Description Input */}
+                <div className="mb-4">
+                  <label
+                    className="block text-sm font-medium mb-2"
+                    style={{ color: colors.text.primary }}
+                  >
+                    Description
+                  </label>
+                  <textarea
+                    value={collectionDescription}
+                    onChange={(e) => setCollectionDescription(e.target.value)}
+                    placeholder="Enter collection description (optional)"
+                    rows={3}
+                    className="w-full px-4 py-2 rounded-md border text-sm resize-none"
+                    style={{
+                      borderColor: colors.border,
+                      backgroundColor: colors.bg.secondary,
+                      color: colors.text.primary,
+                    }}
+                  />
                 </div>
-              </div>
-            </div>
 
-            {/* Documents in Collection */}
-            <div className="flex-1 overflow-y-auto px-6 pt-6 pb-4">
-              <div className="flex items-center justify-between mb-4">
-                <h3 className="text-sm font-semibold" style={{ color: colors.text.primary }}>
-                  Documents Present ({selectedCollection.documents?.length || 0})
-                </h3>
-                {selectedCollection.documents && selectedCollection.documents.length > 0 && (
+                {/* Document Selection */}
+                <div className="mb-6">
+                  <label
+                    className="block text-sm font-medium mb-2"
+                    style={{ color: colors.text.primary }}
+                  >
+                    Select Documents *
+                  </label>
                   <button
-                    onClick={async () => {
-                      setShowDocPreviewModal(true);
-                      // Fetch the first document with signed_url
-                      const firstDoc = selectedCollection.documents![0];
-                      setPreviewDoc(firstDoc);
+                    type="button"
+                    onClick={() => setShowDocumentPicker(true)}
+                    className="w-full px-4 py-3 rounded-md border text-left flex items-center justify-between"
+                    style={{
+                      borderColor: colors.border,
+                      backgroundColor: colors.bg.secondary,
+                      color: colors.text.primary,
+                    }}
+                  >
+                    <span className="text-sm">
+                      {selectedDocuments.size === 0
+                        ? "Click to select documents"
+                        : `${selectedDocuments.size} document${selectedDocuments.size > 1 ? "s" : ""} selected`}
+                    </span>
+                    <svg
+                      className="w-5 h-5"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke="currentColor"
+                    >
+                      <path
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        strokeWidth={2}
+                        d="M9 5l7 7-7 7"
+                      />
+                    </svg>
+                  </button>
 
-                      if (apiKey) {
-                        try {
-                          const response = await fetch(`/api/document/${firstDoc.id}`, {
-                            method: 'GET',
-                            headers: {
-                              'X-API-KEY': apiKey.key,
-                            },
-                          });
+                  {/* Show selected documents */}
+                  {selectedDocuments.size > 0 && (
+                    <div className="mt-3 space-y-2">
+                      {Array.from(selectedDocuments).map((docId) => {
+                        const doc = availableDocuments.find(
+                          (d) => d.id === docId,
+                        );
+                        if (!doc) return null;
+                        return (
+                          <div
+                            key={docId}
+                            className="flex items-center justify-between p-2 rounded-md"
+                            style={{
+                              backgroundColor: colors.bg.secondary,
+                              borderColor: colors.border,
+                              border: `1px solid ${colors.border}`,
+                            }}
+                          >
+                            <span
+                              className="text-sm truncate"
+                              style={{ color: colors.text.primary }}
+                            >
+                              {doc.fname}
+                            </span>
+                            <button
+                              onClick={() => toggleDocumentSelection(docId)}
+                              className="ml-2 p-1 rounded-md transition-colors"
+                              style={{ color: colors.text.secondary }}
+                            >
+                              <svg
+                                className="w-4 h-4"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                                stroke="currentColor"
+                              >
+                                <path
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                  strokeWidth={2}
+                                  d="M6 18L18 6M6 6l12 12"
+                                />
+                              </svg>
+                            </button>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
 
-                          if (response.ok) {
-                            const data = await response.json();
-                            const documentDetails = data.data || data;
-                            setPreviewDoc(documentDetails);
-                          }
-                        } catch (err) {
-                          console.error('Failed to fetch document details for preview:', err);
-                        }
-                      }
-                    }}
-                    className="text-xs px-3 py-1.5 rounded-md hover:opacity-80 transition-opacity"
+                {/* Create Button */}
+                <div className="flex justify-end">
+                  <button
+                    onClick={handleCreateClick}
+                    disabled={
+                      isCreating ||
+                      !collectionName.trim() ||
+                      selectedDocuments.size === 0
+                    }
+                    className="px-6 py-2 rounded-md text-sm font-medium"
                     style={{
-                      color: colors.text.primary,
                       backgroundColor: colors.bg.secondary,
+                      color: colors.text.primary,
                       border: `1px solid ${colors.border}`,
+                      opacity:
+                        isCreating ||
+                        !collectionName.trim() ||
+                        selectedDocuments.size === 0
+                          ? 0.5
+                          : 1,
                     }}
                   >
-                    Preview
+                    {isCreating ? "Creating..." : "Create"}
                   </button>
-                )}
+                </div>
               </div>
-
-              {/* Document List */}
-              {selectedCollection.documents && selectedCollection.documents.length > 0 ? (
-                <div>
-                  {/* Header Row */}
-                  <div className="flex items-center justify-between pb-2 mb-2 border-b" style={{ borderColor: colors.border }}>
+            ) : selectedCollection ? (
+              <>
+                {/* Preview Header */}
+                <div
+                  className="p-6 border-b"
+                  style={{ borderColor: colors.border }}
+                >
+                  <div className="flex items-start justify-between">
                     <div className="flex-1">
-                      <p className="text-[10px] font-semibold uppercase" style={{ color: colors.text.secondary }}>
-                        Name
-                      </p>
+                      <h2
+                        className="text-xl font-semibold"
+                        style={{ color: colors.text.primary }}
+                      >
+                        {selectedCollection.name}
+                      </h2>
+                      {selectedCollection.description && (
+                        <p
+                          className="text-sm mt-1"
+                          style={{ color: colors.text.secondary }}
+                        >
+                          {selectedCollection.description}
+                        </p>
+                      )}
                     </div>
-                    <div className="flex-shrink-0">
-                      <p className="text-[10px] font-semibold uppercase" style={{ color: colors.text.secondary }}>
-                        Uploaded At
-                      </p>
+                    {!selectedCollection.id.startsWith("optimistic-") && (
+                      <button
+                        onClick={() =>
+                          handleDeleteCollection(selectedCollection.id)
+                        }
+                        className="px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
+                        style={{
+                          backgroundColor: "transparent",
+                          color: "#ef4444",
+                          border: "1px solid #ef4444",
+                        }}
+                      >
+                        Delete
+                      </button>
+                    )}
+                  </div>
+
+                  {/* Metadata */}
+                  <div className="space-y-3 mt-6">
+                    <div className="flex items-center gap-3">
+                      <div
+                        className="text-xs uppercase font-semibold"
+                        style={{ color: colors.text.secondary }}
+                      >
+                        Status:
+                      </div>
+                      <div
+                        className="text-sm font-semibold"
+                        style={{ color: colors.text.primary }}
+                      >
+                        {(selectedCollection.status || "N/A")
+                          .replace(/_/g, " ")
+                          .toUpperCase()}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <div
+                        className="text-xs uppercase font-semibold"
+                        style={{ color: colors.text.secondary }}
+                      >
+                        Knowledge Base ID:
+                      </div>
+                      <div
+                        className="text-sm font-semibold"
+                        style={{ color: colors.text.primary }}
+                      >
+                        {selectedCollection.knowledge_base_id || "N/A"}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <div
+                        className="text-xs uppercase font-semibold"
+                        style={{ color: colors.text.secondary }}
+                      >
+                        Created:
+                      </div>
+                      <div
+                        className="text-sm font-semibold"
+                        style={{ color: colors.text.primary }}
+                      >
+                        {formatDate(selectedCollection.inserted_at)}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <div
+                        className="text-xs uppercase font-semibold"
+                        style={{ color: colors.text.secondary }}
+                      >
+                        Last Updated:
+                      </div>
+                      <div
+                        className="text-sm font-semibold"
+                        style={{ color: colors.text.primary }}
+                      >
+                        {formatDate(selectedCollection.updated_at)}
+                      </div>
                     </div>
                   </div>
+                </div>
 
-                  {/* Document Rows */}
-                  <div className="space-y-2">
-                    {selectedCollection.documents
-                      .slice(0, showAllDocs ? selectedCollection.documents.length : 3)
-                      .map((doc) => (
-                        <div
-                          key={doc.id}
-                          className="flex items-center justify-between py-1"
+                {/* Documents in Collection */}
+                <div className="flex-1 overflow-y-auto px-6 pt-6 pb-4">
+                  <div className="flex items-center justify-between mb-4">
+                    <h3
+                      className="text-sm font-semibold"
+                      style={{ color: colors.text.primary }}
+                    >
+                      Documents Present (
+                      {selectedCollection.documents?.length || 0})
+                    </h3>
+                    {selectedCollection.documents &&
+                      selectedCollection.documents.length > 0 && (
+                        <button
+                          onClick={async () => {
+                            setShowDocPreviewModal(true);
+                            // Fetch the first document with signed_url
+                            const firstDoc = selectedCollection.documents![0];
+                            setPreviewDoc(firstDoc);
+
+                            if (apiKey) {
+                              try {
+                                const response = await fetch(
+                                  `/api/document/${firstDoc.id}`,
+                                  {
+                                    method: "GET",
+                                    headers: {
+                                      "X-API-KEY": apiKey.key,
+                                    },
+                                  },
+                                );
+
+                                if (response.ok) {
+                                  const data = await response.json();
+                                  const documentDetails = data.data || data;
+                                  setPreviewDoc(documentDetails);
+                                }
+                              } catch (err) {
+                                console.error(
+                                  "Failed to fetch document details for preview:",
+                                  err,
+                                );
+                              }
+                            }
+                          }}
+                          className="text-xs px-3 py-1.5 rounded-md hover:opacity-80 transition-opacity"
+                          style={{
+                            color: colors.text.primary,
+                            backgroundColor: colors.bg.secondary,
+                            border: `1px solid ${colors.border}`,
+                          }}
                         >
-                          <div className="flex-1 min-w-0 mr-4">
-                            <p className="text-sm truncate" style={{ color: colors.text.primary }}>
-                              {doc.fname}
-                            </p>
-                          </div>
-                          <div className="flex-shrink-0">
-                            <p className="text-xs" style={{ color: colors.text.secondary }}>
-                              {doc.inserted_at ? formatDate(doc.inserted_at) : 'N/A'}
-                            </p>
-                          </div>
-                        </div>
-                      ))}
+                          Preview
+                        </button>
+                      )}
                   </div>
 
-                  {/* Show More / Show Less Button */}
-                  {selectedCollection.documents.length > 3 && (
-                    <button
-                      onClick={() => setShowAllDocs(!showAllDocs)}
-                      className="w-full py-2 px-4 rounded-md text-sm font-medium transition-colors mt-3"
-                      style={{
-                        backgroundColor: 'transparent',
-                        color: colors.text.secondary,
-                        border: `1px solid ${colors.border}`,
-                      }}
+                  {/* Document List */}
+                  {selectedCollection.documents &&
+                  selectedCollection.documents.length > 0 ? (
+                    <div>
+                      {/* Header Row */}
+                      <div
+                        className="flex items-center justify-between pb-2 mb-2 border-b"
+                        style={{ borderColor: colors.border }}
+                      >
+                        <div className="flex-1">
+                          <p
+                            className="text-[10px] font-semibold uppercase"
+                            style={{ color: colors.text.secondary }}
+                          >
+                            Name
+                          </p>
+                        </div>
+                        <div className="flex-shrink-0">
+                          <p
+                            className="text-[10px] font-semibold uppercase"
+                            style={{ color: colors.text.secondary }}
+                          >
+                            Uploaded At
+                          </p>
+                        </div>
+                      </div>
+
+                      {/* Document Rows */}
+                      <div className="space-y-2">
+                        {selectedCollection.documents
+                          .slice(
+                            0,
+                            showAllDocs
+                              ? selectedCollection.documents.length
+                              : 3,
+                          )
+                          .map((doc) => (
+                            <div
+                              key={doc.id}
+                              className="flex items-center justify-between py-1"
+                            >
+                              <div className="flex-1 min-w-0 mr-4">
+                                <p
+                                  className="text-sm truncate"
+                                  style={{ color: colors.text.primary }}
+                                >
+                                  {doc.fname}
+                                </p>
+                              </div>
+                              <div className="flex-shrink-0">
+                                <p
+                                  className="text-xs"
+                                  style={{ color: colors.text.secondary }}
+                                >
+                                  {doc.inserted_at
+                                    ? formatDate(doc.inserted_at)
+                                    : "N/A"}
+                                </p>
+                              </div>
+                            </div>
+                          ))}
+                      </div>
+
+                      {/* Show More / Show Less Button */}
+                      {selectedCollection.documents.length > 3 && (
+                        <button
+                          onClick={() => setShowAllDocs(!showAllDocs)}
+                          className="w-full py-2 px-4 rounded-md text-sm font-medium transition-colors mt-3"
+                          style={{
+                            backgroundColor: "transparent",
+                            color: colors.text.secondary,
+                            border: `1px solid ${colors.border}`,
+                          }}
+                        >
+                          {showAllDocs
+                            ? "Show Less"
+                            : `Show More (${selectedCollection.documents.length - 3} more)`}
+                        </button>
+                      )}
+                    </div>
+                  ) : (
+                    <p
+                      className="text-sm text-center py-8"
+                      style={{ color: colors.text.secondary }}
                     >
-                      {showAllDocs ? 'Show Less' : `Show More (${selectedCollection.documents.length - 3} more)`}
-                    </button>
+                      No documents in this collection
+                    </p>
                   )}
                 </div>
-              ) : (
-                <p className="text-sm text-center py-8" style={{ color: colors.text.secondary }}>
-                  No documents in this collection
-                </p>
-              )}
-            </div>
-          </>
-        ) : (
-          <div className="flex-1 flex items-center justify-center" style={{ color: colors.text.secondary }}>
-            Select a knowledge base to view details
+              </>
+            ) : (
+              <div
+                className="flex-1 flex items-center justify-center"
+                style={{ color: colors.text.secondary }}
+              >
+                Select a knowledge base to view details
+              </div>
+            )}
           </div>
-        )}
         </div>
       </div>
-      </div>
 
       {/* Confirm Delete Modal */}
       {showConfirmDelete && (
@@ -1278,11 +1587,18 @@ export default function KnowledgeBasePage() {
             className="rounded-lg p-6 w-full max-w-md"
             style={{ backgroundColor: colors.bg.primary }}
           >
-            <h2 className="text-xl font-semibold mb-4" style={{ color: colors.text.primary }}>
+            <h2
+              className="text-xl font-semibold mb-4"
+              style={{ color: colors.text.primary }}
+            >
               Delete Collection
             </h2>
-            <p className="text-sm mb-6" style={{ color: colors.text.secondary }}>
-              Are you sure you want to delete this collection? This action cannot be undone.
+            <p
+              className="text-sm mb-6"
+              style={{ color: colors.text.secondary }}
+            >
+              Are you sure you want to delete this collection? This action
+              cannot be undone.
             </p>
             <div className="flex justify-end gap-3">
               <button
@@ -1292,7 +1608,7 @@ export default function KnowledgeBasePage() {
                 }}
                 className="px-4 py-2 rounded-md text-sm font-medium"
                 style={{
-                  backgroundColor: 'transparent',
+                  backgroundColor: "transparent",
                   color: colors.text.secondary,
                   border: `1px solid ${colors.border}`,
                 }}
@@ -1303,9 +1619,9 @@ export default function KnowledgeBasePage() {
                 onClick={handleConfirmDelete}
                 className="px-4 py-2 rounded-md text-sm font-medium"
                 style={{
-                  backgroundColor: '#ef4444',
-                  color: '#ffffff',
-                  border: '1px solid #ef4444',
+                  backgroundColor: "#ef4444",
+                  color: "#ffffff",
+                  border: "1px solid #ef4444",
                 }}
               >
                 Delete
@@ -1323,7 +1639,10 @@ export default function KnowledgeBasePage() {
             style={{ backgroundColor: colors.bg.primary }}
           >
             <div className="flex items-center justify-between mb-4">
-              <h2 className="text-xl font-semibold" style={{ color: colors.text.primary }}>
+              <h2
+                className="text-xl font-semibold"
+                style={{ color: colors.text.primary }}
+              >
                 Select Documents
               </h2>
               <button
@@ -1331,8 +1650,18 @@ export default function KnowledgeBasePage() {
                 className="p-2 rounded-md transition-colors"
                 style={{ color: colors.text.secondary }}
               >
-                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
                 </svg>
               </button>
             </div>
@@ -1340,7 +1669,10 @@ export default function KnowledgeBasePage() {
             {/* Document List */}
             <div className="flex-1 overflow-y-auto mb-4">
               {availableDocuments.length === 0 ? (
-                <div className="p-8 text-center text-sm" style={{ color: colors.text.secondary }}>
+                <div
+                  className="p-8 text-center text-sm"
+                  style={{ color: colors.text.secondary }}
+                >
                   No documents available. Please upload documents first.
                 </div>
               ) : (
@@ -1350,17 +1682,22 @@ export default function KnowledgeBasePage() {
                       key={doc.id}
                       className="flex items-center p-4 rounded-md border cursor-pointer transition-colors"
                       style={{
-                        backgroundColor: selectedDocuments.has(doc.id) ? colors.bg.secondary : 'transparent',
-                        borderColor: selectedDocuments.has(doc.id) ? colors.border : 'transparent',
+                        backgroundColor: selectedDocuments.has(doc.id)
+                          ? colors.bg.secondary
+                          : "transparent",
+                        borderColor: selectedDocuments.has(doc.id)
+                          ? colors.border
+                          : "transparent",
                       }}
                       onMouseEnter={(e) => {
                         if (!selectedDocuments.has(doc.id)) {
-                          e.currentTarget.style.backgroundColor = colors.bg.secondary;
+                          e.currentTarget.style.backgroundColor =
+                            colors.bg.secondary;
                         }
                       }}
                       onMouseLeave={(e) => {
                         if (!selectedDocuments.has(doc.id)) {
-                          e.currentTarget.style.backgroundColor = 'transparent';
+                          e.currentTarget.style.backgroundColor = "transparent";
                         }
                       }}
                     >
@@ -1371,10 +1708,16 @@ export default function KnowledgeBasePage() {
                         className="mr-3 w-4 h-4"
                       />
                       <div className="flex-1 min-w-0">
-                        <p className="text-sm font-medium truncate" style={{ color: colors.text.primary }}>
+                        <p
+                          className="text-sm font-medium truncate"
+                          style={{ color: colors.text.primary }}
+                        >
                           {doc.fname}
                         </p>
-                        <p className="text-xs mt-1" style={{ color: colors.text.secondary }}>
+                        <p
+                          className="text-xs mt-1"
+                          style={{ color: colors.text.secondary }}
+                        >
                           ID: {doc.id.substring(0, 8)}...
                         </p>
                       </div>
@@ -1385,16 +1728,20 @@ export default function KnowledgeBasePage() {
             </div>
 
             {/* Selected Count and Actions */}
-            <div className="flex items-center justify-between pt-4 border-t" style={{ borderColor: colors.border }}>
+            <div
+              className="flex items-center justify-between pt-4 border-t"
+              style={{ borderColor: colors.border }}
+            >
               <p className="text-sm" style={{ color: colors.text.secondary }}>
-                {selectedDocuments.size} document{selectedDocuments.size !== 1 ? 's' : ''} selected
+                {selectedDocuments.size} document
+                {selectedDocuments.size !== 1 ? "s" : ""} selected
               </p>
               <div className="flex gap-3">
                 <button
                   onClick={() => setShowDocumentPicker(false)}
                   className="px-4 py-2 rounded-md text-sm font-medium"
                   style={{
-                    backgroundColor: 'transparent',
+                    backgroundColor: "transparent",
                     color: colors.text.secondary,
                     border: `1px solid ${colors.border}`,
                   }}
@@ -1428,8 +1775,14 @@ export default function KnowledgeBasePage() {
             style={{ backgroundColor: colors.bg.primary }}
           >
             {/* Modal Header */}
-            <div className="flex items-center justify-between px-5 py-4 flex-shrink-0" style={{ borderBottom: `1px solid ${colors.border}` }}>
-              <h2 className="text-lg font-semibold" style={{ color: colors.text.primary }}>
+            <div
+              className="flex items-center justify-between px-5 py-4 flex-shrink-0"
+              style={{ borderBottom: `1px solid ${colors.border}` }}
+            >
+              <h2
+                className="text-lg font-semibold"
+                style={{ color: colors.text.primary }}
+              >
                 Document Preview
               </h2>
               <button
@@ -1440,8 +1793,18 @@ export default function KnowledgeBasePage() {
                 className="p-1.5 rounded-md transition-colors"
                 style={{ color: colors.text.secondary }}
               >
-                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                <svg
+                  className="w-5 h-5"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
                 </svg>
               </button>
             </div>
@@ -1462,12 +1825,15 @@ export default function KnowledgeBasePage() {
                       // Fetch the document with signed_url
                       if (apiKey) {
                         try {
-                          const response = await fetch(`/api/document/${doc.id}`, {
-                            method: 'GET',
-                            headers: {
-                              'X-API-KEY': apiKey.key,
+                          const response = await fetch(
+                            `/api/document/${doc.id}`,
+                            {
+                              method: "GET",
+                              headers: {
+                                "X-API-KEY": apiKey.key,
+                              },
                             },
-                          });
+                          );
 
                           if (response.ok) {
                             const data = await response.json();
@@ -1475,21 +1841,33 @@ export default function KnowledgeBasePage() {
                             setPreviewDoc(documentDetails);
                           }
                         } catch (err) {
-                          console.error('Failed to fetch document details for preview:', err);
+                          console.error(
+                            "Failed to fetch document details for preview:",
+                            err,
+                          );
                         }
                       }
                     }}
                     className="text-left px-4 py-3 flex-shrink-0 transition-colors"
                     style={{
-                      backgroundColor: previewDoc?.id === doc.id ? colors.bg.secondary : 'transparent',
+                      backgroundColor:
+                        previewDoc?.id === doc.id
+                          ? colors.bg.secondary
+                          : "transparent",
                       borderBottom: `1px solid ${colors.border}`,
                     }}
                   >
-                    <p className="text-sm truncate" style={{ color: colors.text.primary }}>
+                    <p
+                      className="text-sm truncate"
+                      style={{ color: colors.text.primary }}
+                    >
                       {doc.fname}
                     </p>
                     {doc.inserted_at && (
-                      <p className="text-xs mt-0.5" style={{ color: colors.text.secondary }}>
+                      <p
+                        className="text-xs mt-0.5"
+                        style={{ color: colors.text.secondary }}
+                      >
                         {formatDate(doc.inserted_at)}
                       </p>
                     )}
@@ -1498,18 +1876,26 @@ export default function KnowledgeBasePage() {
               </div>
 
               {/* Right pane — preview content */}
-              <div className="flex-1 overflow-hidden flex items-center justify-center" style={{ backgroundColor: colors.bg.secondary }}>
+              <div
+                className="flex-1 overflow-hidden flex items-center justify-center"
+                style={{ backgroundColor: colors.bg.secondary }}
+              >
                 {previewDoc?.signed_url ? (
                   <iframe
                     key={previewDoc.id}
                     src={previewDoc.signed_url}
                     title={previewDoc.fname}
                     className="w-full h-full"
-                    style={{ border: 'none' }}
+                    style={{ border: "none" }}
                   />
                 ) : (
-                  <p className="text-sm" style={{ color: colors.text.secondary }}>
-                    {previewDoc ? 'No preview available for this document' : 'Select a document to preview'}
+                  <p
+                    className="text-sm"
+                    style={{ color: colors.text.secondary }}
+                  >
+                    {previewDoc
+                      ? "No preview available for this document"
+                      : "Select a document to preview"}
                   </p>
                 )}
               </div>
diff --git a/app/lib/colors.ts b/app/lib/colors.ts
index d2545f0..0a3d032 100644
--- a/app/lib/colors.ts
+++ b/app/lib/colors.ts
@@ -6,29 +6,29 @@
 export const colors = {
   // Backgrounds
   bg: {
-    primary: '#ffffff',
-    secondary: '#fafafa',
+    primary: "#ffffff",
+    secondary: "#fafafa",
   },
 
   // Text
   text: {
-    primary: '#171717',
-    secondary: '#737373',
+    primary: "#171717",
+    secondary: "#737373",
   },
 
   // Borders
-  border: '#e5e5e5',
+  border: "#e5e5e5",
 
   // Accent (used for primary actions, active states)
   accent: {
-    primary: '#171717',
-    hover: '#404040',
+    primary: "#171717",
+    hover: "#404040",
   },
 
   // Status colors
   status: {
-    success: '#16a34a',
-    error: '#dc2626',
-    warning: '#f59e0b',
-  }
+    success: "#16a34a",
+    error: "#dc2626",
+    warning: "#f59e0b",
+  },
 } as const;
diff --git a/app/lib/configTypes.ts b/app/lib/configTypes.ts
index b5d4a10..8b2242c 100644
--- a/app/lib/configTypes.ts
+++ b/app/lib/configTypes.ts
@@ -4,7 +4,7 @@
 
 // Config Blob Structure
 export interface Tool {
-  type: 'file_search';
+  type: "file_search";
   knowledge_base_ids: string[];
   max_num_results: number;
 }
@@ -23,8 +23,8 @@ export interface CompletionParams {
 }
 
 export interface CompletionConfig {
-  provider: 'openai'; // | 'anthropic' | 'google'; // Only OpenAI supported for now
-  type?: 'text' | 'stt' | 'tts'; // Config type - optional for backward compatibility
+  provider: "openai"; // | 'anthropic' | 'google'; // Only OpenAI supported for now
+  type?: "text" | "stt" | "tts"; // Config type - optional for backward compatibility
   params: CompletionParams;
 }
 
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index 75a99ae..6af6fb1 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -3,7 +3,7 @@
  */
 
 /** localStorage key for the config cache */
-export const CACHE_KEY = 'kaapi_configs_cache';
+export const CACHE_KEY = "kaapi_configs_cache";
 
 /** Cache is considered stale after 5 minutes */
 export const CACHE_MAX_AGE_MS = 5 * 60 * 1000;
@@ -12,20 +12,19 @@ export const CACHE_MAX_AGE_MS = 5 * 60 * 1000;
 export const PAGE_SIZE = 10;
 
 /** Custom event dispatched when background validation invalidates the in-memory cache */
-export const CACHE_INVALIDATED_EVENT = 'kaapi:config-cache-invalidated';
-
+export const CACHE_INVALIDATED_EVENT = "kaapi:config-cache-invalidated";
 
 export const PROVIDES_OPTIONS = [
-  { value: 'openai', label: 'OpenAI' },
-  { value: 'anthropic', label: 'Anthropic' },
-  { value: 'google', label: 'Google' },
+  { value: "openai", label: "OpenAI" },
+  { value: "anthropic", label: "Anthropic" },
+  { value: "google", label: "Google" },
 ];
 
 export const PROVIDER_TYPES = [
-  { value: 'text', label: 'Text Completion' },
-  { value: 'stt', label: 'Speech-to-Text (Coming Soon)' },
-  { value: 'tts', label: 'Text-to-Speech (Coming Soon)' },
-]
+  { value: "text", label: "Text Completion" },
+  { value: "stt", label: "Speech-to-Text (Coming Soon)" },
+  { value: "tts", label: "Text-to-Speech (Coming Soon)" },
+];
 
 // Provider-specific models
 export const MODEL_OPTIONS = {
@@ -47,4 +46,4 @@ export const MODEL_OPTIONS = {
   //   { value: 'gemini-1.5-flash', label: 'Gemini 1.5 Flash' },
   //   { value: 'gemini-pro', label: 'Gemini Pro' },
   // ],
-};
\ No newline at end of file
+};
diff --git a/app/lib/context/AppContext.tsx b/app/lib/context/AppContext.tsx
index d8bdee1..44776e3 100644
--- a/app/lib/context/AppContext.tsx
+++ b/app/lib/context/AppContext.tsx
@@ -1,6 +1,6 @@
-'use client';
+"use client";
 
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useState } from "react";
 
 interface AppContextValue {
   sidebarCollapsed: boolean;
@@ -12,10 +12,12 @@ const AppContext = createContext<AppContextValue | null>(null);
 
 export function AppProvider({ children }: { children: React.ReactNode }) {
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-  const toggleSidebar = () => setSidebarCollapsed(prev => !prev);
+  const toggleSidebar = () => setSidebarCollapsed((prev) => !prev);
 
   return (
-    <AppContext.Provider value={{ sidebarCollapsed, setSidebarCollapsed, toggleSidebar }}>
+    <AppContext.Provider
+      value={{ sidebarCollapsed, setSidebarCollapsed, toggleSidebar }}
+    >
       {children}
     </AppContext.Provider>
   );
@@ -23,6 +25,6 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
 
 export function useApp() {
   const ctx = useContext(AppContext);
-  if (!ctx) throw new Error('useApp must be used within AppProvider');
+  if (!ctx) throw new Error("useApp must be used within AppProvider");
   return ctx;
 }
diff --git a/app/lib/store/configStore.ts b/app/lib/store/configStore.ts
index 30ceb1c..f1fd264 100644
--- a/app/lib/store/configStore.ts
+++ b/app/lib/store/configStore.ts
@@ -6,9 +6,9 @@
  * which works correctly with ES module semantics, unlike reassigning named exports.
  */
 
-import { ConfigPublic, ConfigVersionItems } from '@/app/lib/configTypes';
-import { ConfigCache, SavedConfig } from '@/app/lib/types/configs';
-import { CACHE_KEY } from '@/app/lib/constants';
+import { ConfigPublic, ConfigVersionItems } from "@/app/lib/configTypes";
+import { ConfigCache, SavedConfig } from "@/app/lib/types/configs";
+import { CACHE_KEY } from "@/app/lib/constants";
 
 /**
  * All module-level mutable singletons in one object.
@@ -53,7 +53,10 @@ export const configState = {
  * Key is `${config_id}:${version}`. Prevents duplicate fetches when the user
  * rapidly clicks the same history entry.
  */
-export const pendingSingleVersionLoads = new Map<string, Promise<SavedConfig | null>>();
+export const pendingSingleVersionLoads = new Map<
+  string,
+  Promise<SavedConfig | null>
+>();
 
 /**
  * Per-config in-flight version-load promises.
@@ -62,32 +65,32 @@ export const pendingSingleVersionLoads = new Map<string, Promise<SavedConfig | n
 export const pendingVersionLoads = new Map<string, Promise<void>>();
 
 export const loadCache = (): ConfigCache | null => {
-  if (typeof window === 'undefined') return null;
+  if (typeof window === "undefined") return null;
   try {
     const cached = localStorage.getItem(CACHE_KEY);
     if (cached) return JSON.parse(cached);
   } catch (e) {
-    console.error('Failed to load config cache:', e);
+    console.error("Failed to load config cache:", e);
   }
   return null;
 };
 
 export const saveCache = (cache: ConfigCache): void => {
-  if (typeof window === 'undefined') return;
+  if (typeof window === "undefined") return;
   try {
     localStorage.setItem(CACHE_KEY, JSON.stringify(cache));
   } catch (e) {
-    console.error('Failed to save config cache:', e);
+    console.error("Failed to save config cache:", e);
   }
 };
 
 export const clearConfigCache = (): void => {
-  if (typeof window === 'undefined') return;
+  if (typeof window === "undefined") return;
   try {
     localStorage.removeItem(CACHE_KEY);
     configState.inMemoryCache = null;
     configState.versionItemsCache = {};
   } catch (e) {
-    console.error('Failed to clear config cache:', e);
+    console.error("Failed to clear config cache:", e);
   }
 };
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index fe00e63..1bb2ee5 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -6,8 +6,8 @@ import {
   ConfigVersionPublic,
   ConfigVersionItems,
   Tool,
-} from './configTypes';
-import { SavedConfig, ConfigGroup } from './types/configs';
+} from "./configTypes";
+import { SavedConfig, ConfigGroup } from "./types/configs";
 
 export function timeAgo(dateStr: string): string {
   const date =
@@ -29,12 +29,15 @@ export const formatRelativeTime = (timestamp: string | number): string => {
   const now = Date.now();
 
   let date: number;
-  if (typeof timestamp === 'string') {
+  if (typeof timestamp === "string") {
     // If timestamp doesn't include timezone info, assume it's UTC
     // and append 'Z' to ensure it's interpreted as UTC
-    const utcTimestamp = timestamp.endsWith('Z') || timestamp.includes('+') || timestamp.includes('T') && timestamp.split('T')[1].includes('-')
-      ? timestamp
-      : timestamp + 'Z';
+    const utcTimestamp =
+      timestamp.endsWith("Z") ||
+      timestamp.includes("+") ||
+      (timestamp.includes("T") && timestamp.split("T")[1].includes("-"))
+        ? timestamp
+        : timestamp + "Z";
     date = new Date(utcTimestamp).getTime();
   } else {
     date = timestamp;
@@ -45,7 +48,7 @@ export const formatRelativeTime = (timestamp: string | number): string => {
   const hours = Math.floor(diff / 3600000);
   const days = Math.floor(diff / 86400000);
 
-  if (minutes < 1) return 'just now';
+  if (minutes < 1) return "just now";
   if (minutes < 60) return `${minutes}m ago`;
   if (hours < 24) return `${hours}h ago`;
   if (days < 30) return `${days}d ago`;
@@ -59,15 +62,15 @@ export const invalidateConfigCache = (): void => {
 
 /** Reads the first stored API key from localStorage. */
 export const getApiKey = (): string | null => {
-  if (typeof window === 'undefined') return null;
+  if (typeof window === "undefined") return null;
   try {
-    const stored = localStorage.getItem('kaapi_api_keys');
+    const stored = localStorage.getItem("kaapi_api_keys");
     if (stored) {
       const keys = JSON.parse(stored);
       return keys.length > 0 ? keys[0].key : null;
     }
   } catch (e) {
-    console.error('Failed to get API key:', e);
+    console.error("Failed to get API key:", e);
   }
   return null;
 };
@@ -94,7 +97,7 @@ export const flattenConfigVersion = (
     kbIds.forEach((kbId: string) => {
       if (kbId) {
         tools.push({
-          type: 'file_search',
+          type: "file_search",
           knowledge_base_ids: [kbId],
           max_num_results: params.max_num_results || 20,
         });
@@ -109,13 +112,13 @@ export const flattenConfigVersion = (
     description: config.description,
     version: version.version,
     timestamp: version.inserted_at,
-    instructions: params.instructions || '',
-    promptContent: params.instructions || '',
-    modelName: params.model || '',
+    instructions: params.instructions || "",
+    promptContent: params.instructions || "",
+    modelName: params.model || "",
     provider: blob.completion.provider,
-    type: blob.completion.type || 'text',
+    type: blob.completion.type || "text",
     temperature: params.temperature ?? 0.7,
-    vectorStoreIds: tools[0]?.knowledge_base_ids?.[0] || '',
+    vectorStoreIds: tools[0]?.knowledge_base_ids?.[0] || "",
     tools,
     commit_message: version.commit_message,
   };
diff --git a/app/page.tsx b/app/page.tsx
index 064e360..4075956 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,13 +1,14 @@
-"use client"
-import { useEffect } from 'react';
-import { useRouter } from 'next/navigation'
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
 
 export default function Home() {
   const router = useRouter();
 
   // Auto-redirect to evaluations page
   useEffect(() => {
-    router.push('/evaluations');
+    router.push("/evaluations");
   }, [router]);
 
   return (
@@ -27,9 +28,7 @@ export default function Home() {
               d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
             />
           </svg>
-          <p className="text-sm text-[#171717]">
-            Redirecting...
-          </p>
+          <p className="text-sm text-[#171717]">Redirecting...</p>
         </div>
       </div>
     </div>
diff --git a/app/settings/credentials/page.tsx b/app/settings/credentials/page.tsx
index 5b9d18b..35ce665 100644
--- a/app/settings/credentials/page.tsx
+++ b/app/settings/credentials/page.tsx
@@ -130,7 +130,9 @@ export default function CredentialsPage() {
       }
       await loadCredentials();
     } catch (err: unknown) {
-      toast.error(err instanceof Error ? err.message : "Failed to save credentials");
+      toast.error(
+        err instanceof Error ? err.message : "Failed to save credentials",
+      );
     } finally {
       setIsSaving(false);
     }
@@ -168,7 +170,9 @@ export default function CredentialsPage() {
       toast.success(`${selectedProvider.name} credentials removed`);
       await loadCredentials();
     } catch (err: unknown) {
-      toast.error(err instanceof Error ? err.message : "Failed to remove credentials");
+      toast.error(
+        err instanceof Error ? err.message : "Failed to remove credentials",
+      );
     } finally {
       setIsDeleting(false);
     }
diff --git a/app/test-evaluation/page.tsx b/app/test-evaluation/page.tsx
index 95b4d6b..7fba5f9 100644
--- a/app/test-evaluation/page.tsx
+++ b/app/test-evaluation/page.tsx
@@ -3,21 +3,35 @@
  * Navigate to /test-evaluation to see the mock data in action
  */
 
-"use client"
-import { useRouter } from 'next/navigation';
+"use client";
+
+import { useRouter } from "next/navigation";
 
 export default function TestEvaluationPage() {
   const router = useRouter();
 
   return (
-    <div className="min-h-screen flex items-center justify-center" style={{ backgroundColor: 'hsl(42, 63%, 94%)' }}>
+    <div
+      className="min-h-screen flex items-center justify-center"
+      style={{ backgroundColor: "hsl(42, 63%, 94%)" }}
+    >
       <div className="max-w-2xl mx-auto p-8">
-        <div className="border rounded-lg p-8" style={{ backgroundColor: 'hsl(0, 0%, 100%)', borderColor: 'hsl(0, 0%, 85%)' }}>
-          <h1 className="text-3xl font-bold mb-4" style={{ color: 'hsl(330, 3%, 19%)' }}>
+        <div
+          className="border rounded-lg p-8"
+          style={{
+            backgroundColor: "hsl(0, 0%, 100%)",
+            borderColor: "hsl(0, 0%, 85%)",
+          }}
+        >
+          <h1
+            className="text-3xl font-bold mb-4"
+            style={{ color: "hsl(330, 3%, 19%)" }}
+          >
             Test Evaluation Reports
           </h1>
-          <p className="mb-6" style={{ color: 'hsl(330, 3%, 49%)' }}>
-            Click on any evaluation below to view the mock data with the new table structure.
+          <p className="mb-6" style={{ color: "hsl(330, 3%, 49%)" }}>
+            Click on any evaluation below to view the mock data with the new
+            table structure.
           </p>
 
           <div className="space-y-4">
@@ -25,32 +39,63 @@ export default function TestEvaluationPage() {
             <div
               className="border rounded-lg p-4 cursor-pointer transition-colors"
               style={{
-                backgroundColor: 'hsl(0, 0%, 98%)',
-                borderColor: 'hsl(0, 0%, 85%)'
+                backgroundColor: "hsl(0, 0%, 98%)",
+                borderColor: "hsl(0, 0%, 85%)",
               }}
-              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'hsl(167, 59%, 95%)'}
-              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 98%)'}
-              onClick={() => router.push('/evaluations/43')}
+              onMouseEnter={(e) =>
+                (e.currentTarget.style.backgroundColor = "hsl(167, 59%, 95%)")
+              }
+              onMouseLeave={(e) =>
+                (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 98%)")
+              }
+              onClick={() => router.push("/evaluations/43")}
             >
               <div className="flex items-center justify-between">
                 <div>
-                  <h2 className="text-lg font-semibold mb-1" style={{ color: 'hsl(330, 3%, 19%)' }}>
+                  <h2
+                    className="text-lg font-semibold mb-1"
+                    style={{ color: "hsl(330, 3%, 19%)" }}
+                  >
                     Evaluation #43 - Hindi FAQ
                   </h2>
-                  <p className="text-sm" style={{ color: 'hsl(330, 3%, 49%)' }}>
+                  <p className="text-sm" style={{ color: "hsl(330, 3%, 49%)" }}>
                     4 Q&A pairs • Multiple score metrics • Hindi language
                   </p>
                   <div className="flex gap-2 mt-2">
-                    <span className="text-xs px-2 py-1 rounded" style={{ backgroundColor: 'hsl(134, 61%, 95%)', color: 'hsl(134, 61%, 25%)' }}>
+                    <span
+                      className="text-xs px-2 py-1 rounded"
+                      style={{
+                        backgroundColor: "hsl(134, 61%, 95%)",
+                        color: "hsl(134, 61%, 25%)",
+                      }}
+                    >
                       cosine_similarity
                     </span>
-                    <span className="text-xs px-2 py-1 rounded" style={{ backgroundColor: 'hsl(45, 93%, 90%)', color: 'hsl(45, 93%, 35%)' }}>
+                    <span
+                      className="text-xs px-2 py-1 rounded"
+                      style={{
+                        backgroundColor: "hsl(45, 93%, 90%)",
+                        color: "hsl(45, 93%, 35%)",
+                      }}
+                    >
                       SNEHA correctness
                     </span>
-                    <span className="text-xs px-2 py-1 rounded" style={{ backgroundColor: 'hsl(167, 59%, 95%)', color: 'hsl(167, 59%, 22%)' }}>
+                    <span
+                      className="text-xs px-2 py-1 rounded"
+                      style={{
+                        backgroundColor: "hsl(167, 59%, 95%)",
+                        color: "hsl(167, 59%, 22%)",
+                      }}
+                    >
                       llm_judge_relevance
                     </span>
-                    <span className="text-xs px-2 py-1 rounded" style={{ backgroundColor: 'hsl(0, 0%, 95%)', color: 'hsl(330, 3%, 49%)' }}>
+                    <span
+                      className="text-xs px-2 py-1 rounded"
+                      style={{
+                        backgroundColor: "hsl(0, 0%, 95%)",
+                        color: "hsl(330, 3%, 49%)",
+                      }}
+                    >
                       response_category
                     </span>
                   </div>
@@ -60,9 +105,14 @@ export default function TestEvaluationPage() {
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
-                  style={{ color: 'hsl(167, 59%, 22%)' }}
+                  style={{ color: "hsl(167, 59%, 22%)" }}
                 >
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                  />
                 </svg>
               </div>
             </div>
@@ -71,26 +121,45 @@ export default function TestEvaluationPage() {
             <div
               className="border rounded-lg p-4 cursor-pointer transition-colors"
               style={{
-                backgroundColor: 'hsl(0, 0%, 98%)',
-                borderColor: 'hsl(0, 0%, 85%)'
+                backgroundColor: "hsl(0, 0%, 98%)",
+                borderColor: "hsl(0, 0%, 85%)",
               }}
-              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'hsl(167, 59%, 95%)'}
-              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 98%)'}
-              onClick={() => router.push('/evaluations/44')}
+              onMouseEnter={(e) =>
+                (e.currentTarget.style.backgroundColor = "hsl(167, 59%, 95%)")
+              }
+              onMouseLeave={(e) =>
+                (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 98%)")
+              }
+              onClick={() => router.push("/evaluations/44")}
             >
               <div className="flex items-center justify-between">
                 <div>
-                  <h2 className="text-lg font-semibold mb-1" style={{ color: 'hsl(330, 3%, 19%)' }}>
+                  <h2
+                    className="text-lg font-semibold mb-1"
+                    style={{ color: "hsl(330, 3%, 19%)" }}
+                  >
                     Evaluation #44 - English FAQ
                   </h2>
-                  <p className="text-sm" style={{ color: 'hsl(330, 3%, 49%)' }}>
+                  <p className="text-sm" style={{ color: "hsl(330, 3%, 49%)" }}>
                     3 Q&A pairs • Multiple score metrics • English language
                   </p>
                   <div className="flex gap-2 mt-2">
-                    <span className="text-xs px-2 py-1 rounded" style={{ backgroundColor: 'hsl(134, 61%, 95%)', color: 'hsl(134, 61%, 25%)' }}>
+                    <span
+                      className="text-xs px-2 py-1 rounded"
+                      style={{
+                        backgroundColor: "hsl(134, 61%, 95%)",
+                        color: "hsl(134, 61%, 25%)",
+                      }}
+                    >
                       Higher avg score
                     </span>
-                    <span className="text-xs px-2 py-1 rounded" style={{ backgroundColor: 'hsl(167, 59%, 95%)', color: 'hsl(167, 59%, 22%)' }}>
+                    <span
+                      className="text-xs px-2 py-1 rounded"
+                      style={{
+                        backgroundColor: "hsl(167, 59%, 95%)",
+                        color: "hsl(167, 59%, 22%)",
+                      }}
+                    >
                       With assistant
                     </span>
                   </div>
@@ -100,32 +169,56 @@ export default function TestEvaluationPage() {
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
-                  style={{ color: 'hsl(167, 59%, 22%)' }}
+                  style={{ color: "hsl(167, 59%, 22%)" }}
                 >
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M9 5l7 7-7 7"
+                  />
                 </svg>
               </div>
             </div>
           </div>
 
-          <div className="mt-8 p-4 rounded-lg" style={{ backgroundColor: 'hsl(45, 93%, 95%)', borderColor: 'hsl(45, 93%, 75%)', borderWidth: '1px' }}>
-            <p className="text-sm" style={{ color: 'hsl(45, 93%, 25%)' }}>
-              <strong>Note:</strong> Mock mode is currently enabled. To switch back to real backend data, set <code className="px-1 py-0.5 rounded" style={{ backgroundColor: 'hsl(45, 93%, 90%)' }}>USE_MOCK_DATA = false</code> in <code>/app/api/evaluations/[id]/route.ts</code>
+          <div
+            className="mt-8 p-4 rounded-lg"
+            style={{
+              backgroundColor: "hsl(45, 93%, 95%)",
+              borderColor: "hsl(45, 93%, 75%)",
+              borderWidth: "1px",
+            }}
+          >
+            <p className="text-sm" style={{ color: "hsl(45, 93%, 25%)" }}>
+              <strong>Note:</strong> Mock mode is currently enabled. To switch
+              back to real backend data, set{" "}
+              <code
+                className="px-1 py-0.5 rounded"
+                style={{ backgroundColor: "hsl(45, 93%, 90%)" }}
+              >
+                USE_MOCK_DATA = false
+              </code>{" "}
+              in <code>/app/api/evaluations/[id]/route.ts</code>
             </p>
           </div>
 
           <div className="mt-6 flex gap-3">
             <button
-              onClick={() => router.push('/evaluations')}
+              onClick={() => router.push("/evaluations")}
               className="px-4 py-2 rounded-md text-sm font-medium transition-colors"
               style={{
-                backgroundColor: 'hsl(0, 0%, 100%)',
-                borderWidth: '1px',
-                borderColor: 'hsl(0, 0%, 85%)',
-                color: 'hsl(330, 3%, 19%)'
+                backgroundColor: "hsl(0, 0%, 100%)",
+                borderWidth: "1px",
+                borderColor: "hsl(0, 0%, 85%)",
+                color: "hsl(330, 3%, 19%)",
               }}
-              onMouseEnter={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 95%)'}
-              onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'hsl(0, 0%, 100%)'}
+              onMouseEnter={(e) =>
+                (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 95%)")
+              }
+              onMouseLeave={(e) =>
+                (e.currentTarget.style.backgroundColor = "hsl(0, 0%, 100%)")
+              }
             >
               Go to Evaluations Page
             </button>
diff --git a/eslint.config.mjs b/eslint.config.mjs
index fbb6290..f27a2b1 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -18,11 +18,14 @@ const eslintConfig = defineConfig([
   {
     rules: {
       "no-unused-vars": "off",
-      "@typescript-eslint/no-unused-vars": ["error", {
-        "varsIgnorePattern": "^_",
-        "argsIgnorePattern": "^_",
-        "caughtErrorsIgnorePattern": "^_"
-      }],
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          varsIgnorePattern: "^_",
+          argsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+        },
+      ],
       "react/no-unescaped-entities": "error",
       "no-duplicate-imports": "error",
       "prefer-const": "error",
diff --git a/instructions/COLOR_SCHEME.md b/instructions/COLOR_SCHEME.md
index 81ca72a..616d9d2 100644
--- a/instructions/COLOR_SCHEME.md
+++ b/instructions/COLOR_SCHEME.md
@@ -34,19 +34,23 @@ Edit `/app/lib/colors.ts` to change the entire app's color scheme.
 ## Quick Color Scheme Presets
 
 ### Vercel Style (Current)
+
 - Accent: `#0070f3` (blue)
 
 ### Linear Style
+
 - Accent: `#5E6AD2` (purple-blue)
 - Update `colors.accent.primary` to `#5E6AD2`
 - Update `colors.accent.hover` to `#4F5CC0`
 
 ### GitHub Style
+
 - Accent: `#2DA44E` (green)
 - Update `colors.accent.primary` to `#2DA44E`
 - Update `colors.accent.hover` to `#238636`
 
 ### Minimal Black
+
 - Accent: `#171717` (black)
 - Update `colors.accent.primary` to `#171717`
 - Update `colors.accent.hover` to `#404040`
diff --git a/instructions/CONFIG_AB.md b/instructions/CONFIG_AB.md
index c3d5ec1..8b16150 100644
--- a/instructions/CONFIG_AB.md
+++ b/instructions/CONFIG_AB.md
@@ -1,6 +1,7 @@
 I need to implement a configuration drawer and A/B testing feature for a prompt version control system. Here's what needs to be built:
 
 ## Context
+
 We have a React-based version control system for prompt templates (similar to Git). Users can commit prompts, create branches, view diffs, and merge. Now we need to add configuration management and A/B testing.
 
 ## Requirements
@@ -10,6 +11,7 @@ We have a React-based version control system for prompt templates (similar to Gi
 **Trigger:** Floating Action Button (FAB) - "⚙️" icon, bottom-right corner, 56x56px circle, blue background
 
 **Drawer Structure:**
+
 - Slides in from right when FAB clicked
 - 3 tabs: "Current" | "History" | "A/B Test"
 - Close button (X) top-right
@@ -33,7 +35,7 @@ We have a React-based version control system for prompt templates (similar to Gi
    - Default: gpt-4o-mini
 
 4. **Instructions Section**
-   - Label: "Instructions" 
+   - Label: "Instructions"
    - Button: "Use Current Prompt" (copies from main editor)
    - Textarea: multiline, monospace font, 120px min-height
 
@@ -59,6 +61,7 @@ We have a React-based version control system for prompt templates (similar to Gi
    - Text: "Save Configuration"
 
 **Data Structure for Config:**
+
 ```javascript
 {
   id: 'cfg1',
@@ -89,6 +92,7 @@ We have a React-based version control system for prompt templates (similar to Gi
 ### 3. History Tab
 
 **Display:**
+
 - List of all saved configs (reverse chronological)
 - Each card shows:
   - Config name (vX)
@@ -101,6 +105,7 @@ We have a React-based version control system for prompt templates (similar to Gi
 ### 4. A/B Test Tab
 
 **Variant Configuration:**
+
 - Show 2 variants by default (A and B)
 - Each variant card contains:
   - Header: "Variant A/B/C/D"
@@ -110,15 +115,18 @@ We have a React-based version control system for prompt templates (similar to Gi
 - "+ Add Variant" button (max 4 variants)
 
 **Test Input Section:**
+
 - Label: "Test Input"
 - Textarea for test prompt
 
 **Run Test Button:**
+
 - Full width, green
 - Text: "▶ Run Test"
 - Disabled if no test input
 
 **Results Section (appears after running):**
+
 - Card for each variant showing:
   - Variant name
   - Score (0.00-1.00 format)
@@ -127,9 +135,10 @@ We have a React-based version control system for prompt templates (similar to Gi
 - Highlight best performer with "🏆 Best: Variant X" in green box
 
 **Test Simulation:**
+
 ```javascript
 // For PoC, simulate API call:
-await new Promise(resolve => setTimeout(resolve, 1500));
+await new Promise((resolve) => setTimeout(resolve, 1500));
 const score = 0.7 + Math.random() * 0.25;
 const latency = 200 + Math.random() * 400;
 ```
@@ -137,33 +146,35 @@ const latency = 200 + Math.random() * 400;
 ### 5. State Management
 
 **New State Variables Needed:**
+
 ```javascript
 // Drawer
 const [drawerOpen, setDrawerOpen] = useState(false);
-const [drawerTab, setDrawerTab] = useState('config');
+const [drawerTab, setDrawerTab] = useState("config");
 
 // Configs
 const [configs, setConfigs] = useState([]);
-const [selectedConfigId, setSelectedConfigId] = useState('');
-const [configName, setConfigName] = useState('');
-const [provider, setProvider] = useState('openai');
-const [model, setModel] = useState('gpt-4o-mini');
-const [instructions, setInstructions] = useState('');
+const [selectedConfigId, setSelectedConfigId] = useState("");
+const [configName, setConfigName] = useState("");
+const [provider, setProvider] = useState("openai");
+const [model, setModel] = useState("gpt-4o-mini");
+const [instructions, setInstructions] = useState("");
 const [temperature, setTemperature] = useState(0.7);
 const [tools, setTools] = useState([]);
-const [configCommitMsg, setConfigCommitMsg] = useState('');
+const [configCommitMsg, setConfigCommitMsg] = useState("");
 
 // A/B Testing
 const [variants, setVariants] = useState([
-  { id: 'A', configId: '', commitId: '', name: 'Variant A' },
-  { id: 'B', configId: '', commitId: '', name: 'Variant B' }
+  { id: "A", configId: "", commitId: "", name: "Variant A" },
+  { id: "B", configId: "", commitId: "", name: "Variant B" },
 ]);
-const [testInput, setTestInput] = useState('');
+const [testInput, setTestInput] = useState("");
 const [testResults, setTestResults] = useState(null);
 const [isRunningTest, setIsRunningTest] = useState(false);
 ```
 
 ### 6. Key Functions to Implement
+
 ```javascript
 // Save new config version
 const saveConfig = () => {
@@ -171,19 +182,25 @@ const saveConfig = () => {
   // Create new config object with incremented version
   // Add to configs array
   // Show success alert
-}
+};
 
 // Load existing config
 const loadConfig = (configId) => {
   // Find config by ID
   // Populate all form fields
   // Set as selected config
-}
+};
 
 // Add/remove/update tools
-const addTool = () => { /* Add empty tool */ }
-const removeTool = (index) => { /* Remove by index */ }
-const updateTool = (index, field, value) => { /* Update specific field */ }
+const addTool = () => {
+  /* Add empty tool */
+};
+const removeTool = (index) => {
+  /* Remove by index */
+};
+const updateTool = (index, field, value) => {
+  /* Update specific field */
+};
 
 // Run A/B test
 const runABTest = async () => {
@@ -192,26 +209,32 @@ const runABTest = async () => {
   // Simulate API calls (1.5s delay)
   // Generate mock scores and latencies
   // Display results
-}
+};
 
 // Manage variants
-const addVariant = () => { /* Max 4 variants */ }
-const updateVariant = (index, field, value) => { /* Update variant config */ }
+const addVariant = () => {
+  /* Max 4 variants */
+};
+const updateVariant = (index, field, value) => {
+  /* Update variant config */
+};
 ```
 
 ### 7. UI/UX Details
 
 **Colors:**
 
-Use current B/W color scheme. Make sure the design system does not diverge. 
+Use current B/W color scheme. Make sure the design system does not diverge.
 
 **Spacing:**
+
 - Drawer padding: 20px
 - Section spacing: 16px bottom margin
 - Input padding: 8px
 - Label font: 12px, weight 600
 
 **Interactions:**
+
 - FAB hover: scale(1.1) transform
 - Drawer animation: slide in from right (can use conditional render for MVP)
 - Close drawer on: X button click, overlay click (optional)
@@ -219,6 +242,7 @@ Use current B/W color scheme. Make sure the design system does not diverge.
 ### 8. Integration Points
 
 **With Existing System:**
+
 - Access `currentContent` from main editor for "Use Current Prompt"
 - Access `commits` array for A/B test prompt selection
 - Add "▶ Run A/B Test" button in header (opens drawer to A/B tab)
@@ -226,6 +250,7 @@ Use current B/W color scheme. Make sure the design system does not diverge.
 ### 9. Starting Point
 
 If you have the existing version control code, add:
+
 1. FAB button positioned fixed bottom-right
 2. Conditional render of drawer when `drawerOpen === true`
 3. Tab switching logic
@@ -235,11 +260,13 @@ If you have the existing version control code, add:
 The drawer should NOT affect the existing version control tree, editor, or diff views. It's purely additive.
 
 ## File Structure
+
 - Single React component (or can split into sub-components)
 - Keep all state in parent component for MVP
 - No external dependencies beyond React
 
 ## Success Criteria
+
 ✅ FAB opens/closes drawer
 ✅ Can create and save configs with all fields
 ✅ Can load previous configs from history
@@ -247,4 +274,4 @@ The drawer should NOT affect the existing version control tree, editor, or diff
 ✅ Can run test and see simulated results
 ✅ Results show winner clearly
 ✅ "Use Current Prompt" syncs editor content
-✅ UI is clean and uncluttered
\ No newline at end of file
+✅ UI is clean and uncluttered
diff --git a/instructions/CONFIG_API.md b/instructions/CONFIG_API.md
index a8b9e06..c9ade1a 100644
--- a/instructions/CONFIG_API.md
+++ b/instructions/CONFIG_API.md
@@ -1,9 +1,11 @@
 # Config Management API Integration Instructions
 
 ## Overview
+
 Integrate the Config Management APIs into an existing Next.js UI. The API manages LLM configurations with version control (similar to git commits for config changes).
 
 ## Base URL & Auth
+
 - Base: `/api/v1/configs`
 - Auth: Bearer token via `Authorization` header OR API key via `X-API-KEY` header
 
@@ -14,6 +16,7 @@ Integrate the Config Management APIs into an existing Next.js UI. The API manage
 ### 1. Configs (Parent Entity)
 
 #### List Configs
+
 ```
 GET /api/v1/configs/
 Query: skip (default 0), limit (default 100, max 100)
@@ -21,6 +24,7 @@ Response: { success: boolean, data: ConfigPublic[], error?: string }
 ```
 
 #### Create Config
+
 ```
 POST /api/v1/configs/
 Body: ConfigCreate
@@ -28,12 +32,14 @@ Response 201: { success: boolean, data: ConfigWithVersion }
 ```
 
 #### Get Config
+
 ```
 GET /api/v1/configs/{config_id}
 Response: { success: boolean, data: ConfigPublic }
 ```
 
 #### Update Config (metadata only)
+
 ```
 PATCH /api/v1/configs/{config_id}
 Body: ConfigUpdate
@@ -41,6 +47,7 @@ Response: { success: boolean, data: ConfigPublic }
 ```
 
 #### Delete Config
+
 ```
 DELETE /api/v1/configs/{config_id}
 Response: { success: boolean, data: { message: string } }
@@ -49,6 +56,7 @@ Response: { success: boolean, data: { message: string } }
 ### 2. Config Versions (Child Entity)
 
 #### List Versions
+
 ```
 GET /api/v1/configs/{config_id}/versions
 Query: skip, limit
@@ -56,6 +64,7 @@ Response: { success: boolean, data: ConfigVersionItems[] }
 ```
 
 #### Create Version
+
 ```
 POST /api/v1/configs/{config_id}/versions
 Body: ConfigVersionCreate
@@ -63,12 +72,14 @@ Response 201: { success: boolean, data: ConfigVersionPublic }
 ```
 
 #### Get Specific Version
+
 ```
 GET /api/v1/configs/{config_id}/versions/{version_number}
 Response: { success: boolean, data: ConfigVersionPublic }
 ```
 
 #### Delete Version
+
 ```
 DELETE /api/v1/configs/{config_id}/versions/{version_number}
 Response: { success: boolean, data: { message: string } }
@@ -81,20 +92,20 @@ Response: { success: boolean, data: { message: string } }
 ```typescript
 // Request Types
 interface ConfigCreate {
-  name: string;                    // 1-128 chars, unique per project
-  description?: string | null;     // max 512 chars
+  name: string; // 1-128 chars, unique per project
+  description?: string | null; // max 512 chars
   config_blob: ConfigBlob;
-  commit_message?: string | null;  // max 512 chars
+  commit_message?: string | null; // max 512 chars
 }
 
 interface ConfigUpdate {
-  name?: string | null;            // 1-128 chars
-  description?: string | null;     // max 512 chars
+  name?: string | null; // 1-128 chars
+  description?: string | null; // max 512 chars
 }
 
 interface ConfigVersionCreate {
   config_blob: ConfigBlob;
-  commit_message?: string | null;  // max 512 chars
+  commit_message?: string | null; // max 512 chars
 }
 
 interface ConfigBlob {
@@ -102,18 +113,18 @@ interface ConfigBlob {
 }
 
 interface CompletionConfig {
-  provider: "openai";              // currently only "openai"
-  params: Record<string, any>;     // provider-specific params (model, temperature, etc.)
+  provider: "openai"; // currently only "openai"
+  params: Record<string, any>; // provider-specific params (model, temperature, etc.)
 }
 
 // Response Types
 interface ConfigPublic {
-  id: string;                      // UUID
+  id: string; // UUID
   name: string;
   description: string | null;
   project_id: number;
-  inserted_at: string;             // ISO datetime
-  updated_at: string;              // ISO datetime
+  inserted_at: string; // ISO datetime
+  updated_at: string; // ISO datetime
 }
 
 interface ConfigWithVersion extends ConfigPublic {
@@ -121,9 +132,9 @@ interface ConfigWithVersion extends ConfigPublic {
 }
 
 interface ConfigVersionPublic {
-  id: string;                      // UUID
-  config_id: string;               // UUID
-  version: number;                 // starts at 1, auto-increments
+  id: string; // UUID
+  config_id: string; // UUID
+  version: number; // starts at 1, auto-increments
   config_blob: Record<string, any>;
   commit_message: string | null;
   inserted_at: string;
@@ -131,8 +142,8 @@ interface ConfigVersionPublic {
 }
 
 interface ConfigVersionItems {
-  id: string;                      // UUID
-  config_id: string;               // UUID
+  id: string; // UUID
+  config_id: string; // UUID
   version: number;
   commit_message: string | null;
   inserted_at: string;
@@ -178,13 +189,13 @@ interface APIResponse<T> {
 
 1. **Config List View**: Display name, description, updated_at. Click to view versions.
 
-2. **Config Create Form**: 
+2. **Config Create Form**:
    - name (required, unique)
    - description (optional)
    - config_blob JSON editor or structured form
    - commit_message (optional, for initial version)
 
-3. **Version History View**: 
+3. **Version History View**:
    - Show versions in descending order (newest first)
    - Display version number, commit_message, timestamps
    - Click version to view full config_blob
@@ -201,4 +212,4 @@ interface APIResponse<T> {
 
 6. **Error Handling**:
    - 422: Validation errors (check response.error)
-   - Duplicate name error when creating config
\ No newline at end of file
+   - Duplicate name error when creating config
diff --git a/instructions/TESTING_MOCK_DATA.md b/instructions/TESTING_MOCK_DATA.md
index aa00797..f62f758 100644
--- a/instructions/TESTING_MOCK_DATA.md
+++ b/instructions/TESTING_MOCK_DATA.md
@@ -7,6 +7,7 @@ This guide explains how to test the new evaluation report UI with mock data.
 ### Option 1: Using the Test Page (Easiest)
 
 1. Start the development server:
+
    ```bash
    npm run dev
    ```
@@ -18,6 +19,7 @@ This guide explains how to test the new evaluation report UI with mock data.
 ### Option 2: Direct URL Access
 
 Navigate directly to the evaluation detail pages:
+
 - **Evaluation #43 (Hindi)**: http://localhost:3000/evaluations/43
 - **Evaluation #44 (English)**: http://localhost:3000/evaluations/44
 
@@ -26,6 +28,7 @@ Navigate directly to the evaluation detail pages:
 Located in `/public/mock-data/`:
 
 ### `evaluation-sample-1.json` (ID: 43)
+
 - **Language**: Hindi
 - **Items**: 4 Q&A pairs
 - **Scores**:
@@ -36,6 +39,7 @@ Located in `/public/mock-data/`:
 - **Features**: Mix of CORRECT, PARTIAL, and INCORRECT responses
 
 ### `evaluation-sample-2.json` (ID: 44)
+
 - **Language**: English
 - **Items**: 3 Q&A pairs
 - **Scores**: Same as above
@@ -45,6 +49,7 @@ Located in `/public/mock-data/`:
 ## What to Test
 
 ### 1. Table View
+
 - ✅ Question, Answer, Ground Truth columns display properly
 - ✅ All score columns appear dynamically
 - ✅ Long text truncates with expand/collapse (details/summary)
@@ -54,35 +59,42 @@ Located in `/public/mock-data/`:
 - ✅ Row hover effects work
 
 ### 2. Metrics Overview
+
 - ✅ All NUMERIC metrics show avg ± std
 - ✅ CATEGORICAL metrics show distribution
 - ✅ Responsive grid layout
 - ✅ Proper formatting (3 decimal places for scores)
 
 ### 3. CSV Export
+
 - ✅ Click "Export CSV" button
 - ✅ File downloads with all columns
 - ✅ Q&A pairs and scores included
 - ✅ Proper CSV escaping
 
 ### 4. Navigation
+
 - ✅ Back button returns to /evaluations?tab=results
 - ✅ View Config button opens modal
 - ✅ Sidebar navigation works
 
 ### 5. Assistant Info
+
 - ✅ Evaluation #44 shows assistant badge
 - ✅ Evaluation #43 shows no assistant
 
 ## Switching Between Mock and Real Data
 
 ### Enable Mock Data (Default)
+
 In `/app/api/evaluations/[id]/route.ts`:
+
 ```typescript
 const USE_MOCK_DATA = true;
 ```
 
 ### Disable Mock Data (Use Real Backend)
+
 ```typescript
 const USE_MOCK_DATA = false;
 ```
@@ -92,6 +104,7 @@ const USE_MOCK_DATA = false;
 ## ID Mapping
 
 The mock API maps IDs to files:
+
 - **ID 43, 1, or any other number** → `evaluation-sample-1.json`
 - **ID 44 or 2** → `evaluation-sample-2.json`
 
@@ -104,11 +117,11 @@ You can modify this mapping in `/app/api/evaluations/[id]/route.ts`
 3. Update the ID mapping in the API route:
 
 ```typescript
-let mockFileName = 'evaluation-sample-1.json';
-if (id === '44' || id === '2') {
-  mockFileName = 'evaluation-sample-2.json';
-} else if (id === '45') {
-  mockFileName = 'your-new-file.json'; // Add your mapping
+let mockFileName = "evaluation-sample-1.json";
+if (id === "44" || id === "2") {
+  mockFileName = "evaluation-sample-2.json";
+} else if (id === "45") {
+  mockFileName = "your-new-file.json"; // Add your mapping
 }
 ```
 
@@ -128,7 +141,7 @@ The mock data follows this structure:
       {
         "name": "cosine_similarity",
         "avg": 0.453,
-        "std": 0.060,
+        "std": 0.06,
         "total_pairs": 4,
         "data_type": "NUMERIC"
       },
@@ -166,16 +179,19 @@ The mock data follows this structure:
 ## Troubleshooting
 
 ### Mock data not loading
+
 - Check console for `[MOCK MODE]` logs
 - Verify files exist in `/public/mock-data/`
 - Ensure `USE_MOCK_DATA = true`
 
 ### Table not showing
+
 - Check browser console for errors
 - Verify `scores.individual_scores` exists in JSON
 - Check that all required fields are present
 
 ### Scores not color-coded
+
 - Verify `data_type` is set correctly
 - Check that NUMERIC values are numbers, not strings
 - Ensure CATEGORICAL values match expected values
@@ -200,6 +216,7 @@ After testing with mock data and confirming the UI works:
 ---
 
 **Need Help?** Check the implementation files:
+
 - Type definitions: `/app/components/types.ts`
 - Table component: `/app/components/DetailedResultsTable.tsx`
 - Detail page: `/app/evaluations/[id]/page.tsx`
diff --git a/instructions/VERCEL_DESIGN_SYSTEM.md b/instructions/VERCEL_DESIGN_SYSTEM.md
index ea7b913..b1c1ba9 100644
--- a/instructions/VERCEL_DESIGN_SYSTEM.md
+++ b/instructions/VERCEL_DESIGN_SYSTEM.md
@@ -17,6 +17,7 @@ A comprehensive guide to reproducing the minimalist, modern design aesthetic ins
 ### Core Colors
 
 **Light Mode**
+
 ```
 Backgrounds:
 - Primary:   #ffffff (pure white)
@@ -35,6 +36,7 @@ Accent:
 ```
 
 **Dark Mode**
+
 ```
 Backgrounds:
 - Primary:   #000000 (pure black)
@@ -51,6 +53,7 @@ Borders:
 ### Semantic Colors
 
 Used sparingly for status and feedback:
+
 ```
 Success: #16a34a (green-600)
 Error:   #dc2626 (red-600)
@@ -70,10 +73,12 @@ Warning: #f59e0b (amber-500)
 ## Typography
 
 ### Font Stack
+
 - **Sans-serif**: System font stack or Geist Sans (Vercel's font)
 - **Monospace**: Geist Mono for code
 
 ### Text Sizing
+
 ```
 Extra Small:  10px (badges, labels)
 Small:        12px (secondary UI, submenus)
@@ -83,6 +88,7 @@ Large:        20px+ (page titles, hero text)
 ```
 
 ### Font Weights
+
 ```
 Regular: 400 (default text)
 Medium:  500 (interactive elements, subheadings)
@@ -102,6 +108,7 @@ Semibold: 600 (active states, emphasis)
 ## Spacing System
 
 ### Scale (based on 4px grid)
+
 ```
 0.5 → 2px   (tight gaps)
 1   → 4px   (minimal spacing)
@@ -115,6 +122,7 @@ Semibold: 600 (active states, emphasis)
 ```
 
 ### Padding Patterns
+
 ```
 Buttons:     px-3 py-2 (12px × 8px)
 Inputs:      px-3 py-2 (12px × 8px)
@@ -124,6 +132,7 @@ Sections:    py-8 to py-12 (32px-48px vertical)
 ```
 
 ### Margin Patterns
+
 ```
 Between elements: 8-12px (space-y-2 to space-y-3)
 Between sections: 24-32px (my-6 to my-8)
@@ -137,6 +146,7 @@ Page margins:     24px minimum (px-6)
 ### Buttons
 
 **Primary Button**
+
 ```
 Background:  #171717
 Text:        #ffffff
@@ -157,6 +167,7 @@ Disabled:
 ```
 
 **Secondary Button**
+
 ```
 Background:  transparent
 Text:        #171717
@@ -171,6 +182,7 @@ Hover:
 ```
 
 **Ghost Button**
+
 ```
 Background:  transparent
 Text:        #737373
@@ -219,6 +231,7 @@ Hover (if interactive):
 ### Navigation Items
 
 **Sidebar Item**
+
 ```
 Default:
 - Background: transparent
@@ -239,6 +252,7 @@ Active:
 ```
 
 **Tab Navigation**
+
 ```
 Default:
 - Border bottom: 2px transparent
@@ -361,6 +375,7 @@ Margin:      16px 0
 ## Animation & Transitions
 
 ### Timing Functions
+
 ```
 Standard: ease-in-out
 Quick:    ease (for micro-interactions)
@@ -369,6 +384,7 @@ Exit:     ease-in
 ```
 
 ### Duration Scale
+
 ```
 Instant:   50ms  (color changes)
 Quick:     150ms (hover states, text color)
@@ -380,30 +396,51 @@ Slow:      500ms (layout changes)
 ### Common Animations
 
 **Fade In**
+
 ```css
 @keyframes fadeIn {
-  from { opacity: 0; transform: translateY(-4px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
-Duration: 0.2s
+duration: 0.2s;
 ```
 
 **Modal Entry**
+
 ```css
 @keyframes modalSlideUp {
-  from { opacity: 0; transform: translateY(20px) scale(0.95); }
-  to   { opacity: 1; transform: translateY(0) scale(1); }
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
-Duration: 0.3s
+duration: 0.3s;
 ```
 
 **Page Transition**
+
 ```css
 @keyframes pageIn {
-  from { opacity: 0; transform: translateY(8px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
-Duration: 0.3s
+duration: 0.3s;
 ```
 
 ### Animation Rules
@@ -421,6 +458,7 @@ Duration: 0.3s
 ### Hover States
 
 **General Rules**
+
 - Background lightens slightly (#fafafa)
 - Text darkens to primary color (#171717)
 - Border darkens one shade
@@ -430,6 +468,7 @@ Duration: 0.3s
 ### Focus States
 
 **Keyboard Navigation**
+
 - Use border color change, not glow
 - Border: 2px solid #171717
 - No box-shadow outline
@@ -438,6 +477,7 @@ Duration: 0.3s
 ### Active/Pressed States
 
 **On Click**
+
 - Slightly darker background
 - No scale down
 - 100ms transition (faster than hover)
@@ -445,6 +485,7 @@ Duration: 0.3s
 ### Loading States
 
 **Skeleton Loaders**
+
 ```
 Background:  #fafafa
 Animation:   pulse (opacity 1 → 0.5 → 1)
@@ -454,6 +495,7 @@ Radius:      match final element
 ```
 
 **Spinners**
+
 ```
 Size:        16-24px
 Color:       #171717
@@ -466,6 +508,7 @@ Line width:  2px
 ## Iconography
 
 ### Icon Style
+
 - **Outline style** (not filled)
 - **2px stroke width**
 - **24px default size** (scale down to 16px for compact UI)
@@ -473,6 +516,7 @@ Line width:  2px
 - **Match text color** of surrounding context
 
 ### Icon Spacing
+
 - **Gap from text**: 8-10px (0.5rem to 0.625rem)
 - **Icon-only buttons**: 32px × 32px touch target minimum
 
@@ -489,6 +533,7 @@ Heavy:   0 10px 15px rgba(0, 0, 0, 0.1)
 ```
 
 **When to Use Shadows**
+
 - Modals/dialogs: medium
 - Dropdown menus: light
 - Cards: none or subtle
@@ -519,6 +564,7 @@ Wide:         1280px+
 ```
 
 ### Mobile Adaptations
+
 - Reduce padding: 16px instead of 24px
 - Collapse sidebar to overlay/drawer
 - Stack horizontal layouts vertically
@@ -530,6 +576,7 @@ Wide:         1280px+
 ## Dark Mode Considerations
 
 ### Automatic Switching
+
 ```css
 @media (prefers-color-scheme: dark) {
   /* Apply dark theme */
@@ -539,15 +586,18 @@ Wide:         1280px+
 ### Dark Mode Colors
 
 **Backgrounds**
+
 - Pure black (#000) for drama
 - Slightly lighter (#0a0a0a) for panels
 - Very subtle borders (#262626)
 
 **Text**
+
 - Off-white (#ededed) not pure white
 - Gray (#a1a1a1) for secondary
 
 **Borders**
+
 - Much darker but still subtle (#262626)
 
 **Key Difference**: Dark mode has higher contrast between elements to maintain readability.
@@ -593,6 +643,7 @@ When implementing a new component, ensure:
 ## Implementation Notes
 
 ### CSS Variables Approach
+
 ```css
 :root {
   --bg-primary: #ffffff;
@@ -606,6 +657,7 @@ When implementing a new component, ensure:
 ```
 
 ### Tailwind CSS Approach
+
 ```javascript
 // tailwind.config.js
 theme: {
diff --git a/package-lock.json b/package-lock.json
index 3b17e39..48bbccf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "globals": "^16.5.0",
         "husky": "^9.1.7",
         "lint-staged": "^16.4.0",
+        "prettier": "^3.3.3",
         "tailwindcss": "^4",
         "typescript": "^5",
         "typescript-eslint": "^8.49.0"
@@ -5760,6 +5761,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+      "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
diff --git a/package.json b/package.json
index 2c83544..38e2ba0 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,8 @@
     "start": "next start",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "prepare": "husky"
   },
   "dependencies": {
@@ -31,12 +33,14 @@
     "globals": "^16.5.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.4.0",
+    "prettier": "^3.3.3",
     "tailwindcss": "^4",
     "typescript": "^5",
     "typescript-eslint": "^8.49.0"
   },
   "lint-staged": {
-    "**/*.{js,ts,jsx,tsx}": [
+    "**/*.{js,ts,jsx,tsx,json,md,css}": [
+      "prettier --write",
       "eslint --fix"
     ]
   }
diff --git a/test.json b/test.json
index 6bf28b3..5696b11 100644
--- a/test.json
+++ b/test.json
@@ -1,73 +1,73 @@
 {
-    "cosine_similarity": {
-        "avg": 0.5687263700870495, //show the average and std to the user
-        "std": 0.10842963051331153,
-        "total_pairs": 16,
-        "per_item_scores": [
-            {
-                "trace_id": "eb20f767-4ede-47fe-a63f-5852b9eb68ed",
-                "cosine_similarity": 0.6871883188105149
-            },
-            {
-                "trace_id": "7565f0c2-25f5-403f-8315-fb363420ca49",
-                "cosine_similarity": 0.46126594344912164
-            },
-            {
-                "trace_id": "20f42513-4cf9-40e4-930a-8470ff1a22a7",
-                "cosine_similarity": 0.6446542965396557
-            },
-            {
-                "trace_id": "f692593b-81c3-4f9b-bb46-6dbe2b1c766c",
-                "cosine_similarity": 0.46120519725439024
-            },
-            {
-                "trace_id": "9dc021cc-d78f-4c34-b659-1dfb1a736517",
-                "cosine_similarity": 0.6650813181568475
-            },
-            {
-                "trace_id": "85279581-2c33-407d-8ee3-294a2f385044",
-                "cosine_similarity": 0.46124023257743163
-            },
-            {
-                "trace_id": "3897ce10-041b-4205-ab52-923ca643dd57",
-                "cosine_similarity": 0.6618396771024554
-            },
-            {
-                "trace_id": "b060b217-dcf8-4173-813c-081c407f684c",
-                "cosine_similarity": 0.6984795184310869
-            },
-            {
-                "trace_id": "967fc160-5591-4be2-925a-7804256b7673",
-                "cosine_similarity": 0.7057062301313111
-            },
-            {
-                "trace_id": "7ac1a6e7-eb96-40b4-9765-80470de9675a",
-                "cosine_similarity": 0.6578021199890051
-            },
-            {
-                "trace_id": "4c72858e-15c0-4b70-96ec-b615361d30b4",
-                "cosine_similarity": 0.6888293517053641
-            },
-            {
-                "trace_id": "c309dbb2-f40c-4334-b9ec-8e773e2bb048",
-                "cosine_similarity": 0.46126594344912164
-            },
-            {
-                "trace_id": "b15c2a6f-884e-4e23-aeb4-b3391a20e6fb",
-                "cosine_similarity": 0.46126594344912164
-            },
-            {
-                "trace_id": "a995898f-4042-45b7-b864-e3dde8c44b34",
-                "cosine_similarity": 0.46126594344912164
-            },
-            {
-                "trace_id": "91b2c87d-d5ac-47a3-8736-df791fcbc5bd",
-                "cosine_similarity": 0.46126594344912164
-            },
-            {
-                "trace_id": "00dd9a33-dc59-48e7-8f50-ff6f6eb7237f",
-                "cosine_similarity": 0.46126594344912164
-            }
-        ]
-    }
-}
\ No newline at end of file
+  "cosine_similarity": {
+    "avg": 0.5687263700870495,
+    "std": 0.10842963051331153,
+    "total_pairs": 16,
+    "per_item_scores": [
+      {
+        "trace_id": "eb20f767-4ede-47fe-a63f-5852b9eb68ed",
+        "cosine_similarity": 0.6871883188105149
+      },
+      {
+        "trace_id": "7565f0c2-25f5-403f-8315-fb363420ca49",
+        "cosine_similarity": 0.46126594344912164
+      },
+      {
+        "trace_id": "20f42513-4cf9-40e4-930a-8470ff1a22a7",
+        "cosine_similarity": 0.6446542965396557
+      },
+      {
+        "trace_id": "f692593b-81c3-4f9b-bb46-6dbe2b1c766c",
+        "cosine_similarity": 0.46120519725439024
+      },
+      {
+        "trace_id": "9dc021cc-d78f-4c34-b659-1dfb1a736517",
+        "cosine_similarity": 0.6650813181568475
+      },
+      {
+        "trace_id": "85279581-2c33-407d-8ee3-294a2f385044",
+        "cosine_similarity": 0.46124023257743163
+      },
+      {
+        "trace_id": "3897ce10-041b-4205-ab52-923ca643dd57",
+        "cosine_similarity": 0.6618396771024554
+      },
+      {
+        "trace_id": "b060b217-dcf8-4173-813c-081c407f684c",
+        "cosine_similarity": 0.6984795184310869
+      },
+      {
+        "trace_id": "967fc160-5591-4be2-925a-7804256b7673",
+        "cosine_similarity": 0.7057062301313111
+      },
+      {
+        "trace_id": "7ac1a6e7-eb96-40b4-9765-80470de9675a",
+        "cosine_similarity": 0.6578021199890051
+      },
+      {
+        "trace_id": "4c72858e-15c0-4b70-96ec-b615361d30b4",
+        "cosine_similarity": 0.6888293517053641
+      },
+      {
+        "trace_id": "c309dbb2-f40c-4334-b9ec-8e773e2bb048",
+        "cosine_similarity": 0.46126594344912164
+      },
+      {
+        "trace_id": "b15c2a6f-884e-4e23-aeb4-b3391a20e6fb",
+        "cosine_similarity": 0.46126594344912164
+      },
+      {
+        "trace_id": "a995898f-4042-45b7-b864-e3dde8c44b34",
+        "cosine_similarity": 0.46126594344912164
+      },
+      {
+        "trace_id": "91b2c87d-d5ac-47a3-8736-df791fcbc5bd",
+        "cosine_similarity": 0.46126594344912164
+      },
+      {
+        "trace_id": "00dd9a33-dc59-48e7-8f50-ff6f6eb7237f",
+        "cosine_similarity": 0.46126594344912164
+      }
+    ]
+  }
+}