vectra-js 0.9.3 → 0.9.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/.github/ISSUE_TEMPLATE/bug_report.md +38 -0
  2. package/.github/ISSUE_TEMPLATE/feature_request.md +20 -0
  3. package/.github/dependabot.yml +11 -0
  4. package/.github/workflows/npm-publish.yml +39 -0
  5. package/CODE_OF_CONDUCT.md +128 -0
  6. package/README.md +30 -0
  7. package/bin/vectra.js +9 -3
  8. package/package.json +23 -21
  9. package/src/backends/chroma_store.js +13 -2
  10. package/src/config.js +9 -0
  11. package/src/core.js +203 -1
  12. package/src/dashboard/dashboard-script.js +260 -0
  13. package/src/dashboard/index.html +362 -0
  14. package/src/dashboard/logo.png +0 -0
  15. package/src/dashboard/trace-script.js +184 -0
  16. package/src/dashboard/trace.html +239 -0
  17. package/src/observability.js +226 -0
  18. package/src/processor.js +1 -1
  19. package/src/ui/index.html +278 -236
  20. package/src/ui/logo.png +0 -0
  21. package/src/ui/script.js +59 -10
  22. package/src/ui/style.css +2 -2
  23. package/src/webconfig_server.js +162 -2
package/src/ui/index.html CHANGED
@@ -2,10 +2,42 @@
2
2
  <html lang="en">
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
+ <link rel="icon" type="image/png" href="logo.png">
5
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
7
  <title>Vectra Configuration</title>
7
8
  <!-- Tailwind CSS CDN -->
8
9
  <script src="https://cdn.tailwindcss.com"></script>
10
+ <script>
11
+ tailwind.config = {
12
+ darkMode: 'class',
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ brand: {
17
+ 50: '#f5f3ff',
18
+ 100: '#ede9fe',
19
+ 200: '#ddd6fe',
20
+ 300: '#c4b5fd',
21
+ 400: '#a78bfa',
22
+ 500: '#8b5cf6',
23
+ 600: '#7c3aed',
24
+ 700: '#6d28d9',
25
+ 800: '#5b21b6',
26
+ 900: '#4c1d95',
27
+ 950: '#2e1065',
28
+ },
29
+ dark: {
30
+ 950: '#020204',
31
+ 900: '#08080C',
32
+ 850: '#0F0F16',
33
+ 800: '#14141F',
34
+ 700: '#1C1C2E',
35
+ }
36
+ }
37
+ }
38
+ }
39
+ }
40
+ </script>
9
41
  <link rel="preconnect" href="https://fonts.googleapis.com">
10
42
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
43
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@@ -16,64 +48,68 @@
16
48
  .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
17
49
 
18
50
  /* Smooth transition for JSON opacity */
19
- .json-section { transition: opacity 0.3s ease-in-out; }
20
- .json-dimmed { opacity: 0.4; filter: blur(0.5px); grayscale: 100%; }
21
- .json-active { opacity: 1; }
22
- </style>
51
+ .json-section { transition: opacity 0.3s ease-in-out; }
52
+ .json-dimmed { opacity: 0.4; filter: blur(0.5px); grayscale: 100%; }
53
+ .json-active { opacity: 1; }
54
+
55
+ /* Dark mode overrides */
56
+ .dark input[type="checkbox"] {
57
+ background-color: #020204;
58
+ border-color: rgba(255,255,255,0.1);
59
+ }
60
+ </style>
23
61
  </head>
24
- <body class="bg-gray-50 text-slate-800 antialiased h-screen flex overflow-hidden">
62
+ <body class="bg-gray-50 dark:bg-dark-950 text-slate-900 dark:text-white antialiased h-screen flex overflow-hidden">
25
63
 
26
64
  <!-- Sidebar / Navigation (20%) -->
27
- <aside class="w-[20%] bg-white border-r border-gray-200 flex-shrink-0 flex flex-col z-20 shadow-sm">
28
- <div class="p-6 border-b border-gray-100 flex items-center space-x-3">
29
- <div class="bg-indigo-600 p-2 rounded-lg text-white">
30
- <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
31
- </div>
32
- <span class="font-bold text-xl tracking-tight text-gray-900">Vectra</span>
65
+ <aside class="w-[20%] bg-white dark:bg-dark-900 border-r border-slate-200 dark:border-white/5 flex-shrink-0 flex flex-col z-20 shadow-sm">
66
+ <div class="p-6 border-b border-slate-200 dark:border-white/5 flex items-center space-x-3">
67
+ <img src="logo.png" alt="Vectra" class="w-8 h-8">
68
+ <span class="font-bold text-xl tracking-tight text-slate-900 dark:text-white">Vectra</span>
33
69
  </div>
34
70
 
35
71
  <nav class="flex-1 overflow-y-auto p-4 space-y-1">
36
- <a href="#embedding" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors active" data-target="embedding">
72
+ <a href="#embedding" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 dark:text-gray-400 hover:bg-slate-50 dark:hover:bg-white/5 hover:text-slate-900 dark:hover:text-white transition-colors active" data-target="embedding">
37
73
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
38
74
  <span>Embedding</span>
39
75
  </a>
40
- <a href="#llm" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors" data-target="llm">
76
+ <a href="#llm" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 dark:text-gray-400 hover:bg-slate-50 dark:hover:bg-white/5 hover:text-slate-900 dark:hover:text-white transition-colors" data-target="llm">
41
77
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
42
78
  <span>LLM Provider</span>
43
79
  </a>
44
- <a href="#database" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors" data-target="database">
80
+ <a href="#database" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 dark:text-gray-400 hover:bg-slate-50 dark:hover:bg-white/5 hover:text-slate-900 dark:hover:text-white transition-colors" data-target="database">
45
81
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg>
46
82
  <span>Database</span>
47
83
  </a>
48
- <a href="#chunking" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors" data-target="chunking">
84
+ <a href="#chunking" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 dark:text-gray-400 hover:bg-slate-50 dark:hover:bg-white/5 hover:text-slate-900 dark:hover:text-white transition-colors" data-target="chunking">
49
85
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
50
86
  <span>Chunking</span>
51
87
  </a>
52
- <a href="#retrieval" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors" data-target="retrieval">
88
+ <a href="#retrieval" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 dark:text-gray-400 hover:bg-slate-50 dark:hover:bg-white/5 hover:text-slate-900 dark:hover:text-white transition-colors" data-target="retrieval">
53
89
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
54
90
  <span>Retrieval</span>
55
91
  </a>
56
- <a href="#reranking" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors" data-target="reranking">
92
+ <a href="#reranking" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 dark:text-gray-400 hover:bg-slate-50 dark:hover:bg-white/5 hover:text-slate-900 dark:hover:text-white transition-colors" data-target="reranking">
57
93
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path></svg>
58
94
  <span>Reranking</span>
59
95
  </a>
60
- <a href="#metadata" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors" data-target="metadata">
96
+ <a href="#metadata" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 dark:text-gray-400 hover:bg-slate-50 dark:hover:bg-white/5 hover:text-slate-900 dark:hover:text-white transition-colors" data-target="metadata">
61
97
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></svg>
62
98
  <span>Metadata</span>
63
99
  </a>
64
- <a href="#query-planning" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors" data-target="query-planning">
100
+ <a href="#query-planning" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 dark:text-gray-400 hover:bg-slate-50 dark:hover:bg-white/5 hover:text-slate-900 dark:hover:text-white transition-colors" data-target="query-planning">
65
101
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="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-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path></svg>
66
102
  <span>Query Planning</span>
67
103
  </a>
68
- <a href="#grounding" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors" data-target="grounding">
104
+ <a href="#grounding" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 dark:text-gray-400 hover:bg-slate-50 dark:hover:bg-white/5 hover:text-slate-900 dark:hover:text-white transition-colors" data-target="grounding">
69
105
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg>
70
106
  <span>Grounding</span>
71
107
  </a>
72
- <a href="#generation" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors" data-target="generation">
108
+ <a href="#generation" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-400 hover:bg-white/5 hover:text-white transition-colors" data-target="generation">
73
109
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="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"></path></svg>
74
110
  <span>Generation</span>
75
111
  </a>
76
- <a href="#prompts" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-indigo-600 transition-colors" data-target="prompts">
112
+ <a href="#prompts" class="nav-item w-full flex items-center space-x-3 px-3 py-2.5 rounded-lg text-sm font-medium text-slate-600 dark:text-gray-400 hover:bg-slate-50 dark:hover:bg-white/5 hover:text-slate-900 dark:hover:text-white transition-colors" data-target="prompts">
77
113
  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
78
114
  <span>Prompts</span>
79
115
  </a>
@@ -86,49 +122,55 @@
86
122
  </aside>
87
123
 
88
124
  <!-- Main Content (50%) -->
89
- <main class="w-[50%] flex flex-col overflow-hidden border-r border-gray-200 bg-gray-50">
125
+ <main class="w-[50%] flex flex-col overflow-hidden border-r border-white/5 bg-dark-950">
90
126
  <!-- Configuration Forms Area -->
91
127
  <div class="flex-1 overflow-y-auto p-8 lg:p-12 scroll-smooth" id="main-scroll">
92
128
  <div class="max-w-3xl mx-auto space-y-12 pb-32">
93
129
 
94
130
  <header class="mb-8 flex justify-between items-end">
95
131
  <div>
96
- <h1 class="text-3xl font-bold text-gray-900 tracking-tight">Pipeline Settings</h1>
97
- <p class="text-base text-gray-600 mt-2">Configure your RAG pipeline parameters and behavior.</p>
132
+ <h1 class="text-3xl font-bold text-gray-900 dark:text-white tracking-tight">Pipeline Settings</h1>
133
+ <p class="text-base text-gray-500 dark:text-gray-400 mt-2">Configure your RAG pipeline parameters and behavior.</p>
98
134
  </div>
99
- <div class="flex items-center space-x-6">
135
+ <div class="flex items-center space-x-4">
136
+ <!-- Dark Mode Toggle -->
137
+ <button id="theme-toggle" type="button" class="p-2 text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors rounded-lg hover:bg-gray-100 dark:hover:bg-white/5">
138
+ <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
139
+ <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
140
+ </button>
141
+
100
142
  <!-- Backend Toggle -->
101
- <div class="flex items-center bg-white rounded-lg p-1 border border-gray-200 shadow-sm">
102
- <button type="button" id="backend-node" class="px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200 text-indigo-600 bg-indigo-50 shadow-sm">
143
+ <div class="flex items-center bg-gray-100 dark:bg-dark-900 rounded-lg p-1 border border-gray-200 dark:border-white/10 shadow-sm">
144
+ <button type="button" id="backend-node" class="px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200 text-brand-600 dark:text-brand-400 bg-white dark:bg-brand-900/20 shadow-sm">
103
145
  Node.js
104
146
  </button>
105
- <button type="button" id="backend-python" class="px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200 text-gray-500 hover:text-gray-900">
147
+ <button type="button" id="backend-python" class="px-3 py-1.5 text-sm font-medium rounded-md transition-all duration-200 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white">
106
148
  Python
107
149
  </button>
108
150
  </div>
109
151
 
110
152
  <div class="flex items-center space-x-2">
111
- <input type="checkbox" id="auto-focus-toggle" class="rounded text-indigo-600 focus:ring-indigo-500 border-gray-300 h-4 w-4">
112
- <label for="auto-focus-toggle" class="text-sm text-gray-700 select-none">Auto-Focus Mode</label>
113
- </div>
153
+ <input type="checkbox" id="auto-focus-toggle" class="rounded text-brand-600 focus:ring-brand-500 border-gray-300 dark:border-white/10 bg-white dark:bg-dark-800 h-4 w-4">
154
+ <label for="auto-focus-toggle" class="text-sm text-gray-700 dark:text-gray-300 select-none">Auto-Focus Mode</label>
155
+ </div>
114
156
  </div>
115
157
  </header>
116
158
 
117
159
  <form id="config-form" class="space-y-10">
118
160
 
119
161
  <!-- Embedding Section -->
120
- <section id="embedding" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
121
- <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="embedding-content">
162
+ <section id="embedding" class="scroll-mt-6 bg-white dark:bg-dark-900 rounded-xl shadow-sm border border-slate-200 dark:border-white/5 overflow-hidden transition-all duration-200 hover:shadow-md">
163
+ <div class="px-6 py-4 border-b border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-white/5 flex justify-between items-center cursor-pointer accordion-header" data-target="embedding-content">
122
164
  <div>
123
- <h2 class="text-lg font-semibold text-gray-900">Embedding Model</h2>
124
- <p class="text-xs text-gray-500 mt-0.5">Define how text is converted into vectors.</p>
165
+ <h2 class="text-lg font-semibold text-slate-900 dark:text-white">Embedding Model</h2>
166
+ <p class="text-xs text-slate-500 dark:text-gray-400 mt-0.5">Define how text is converted into vectors.</p>
125
167
  </div>
126
- <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
168
+ <svg class="w-5 h-5 text-slate-400 dark:text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
127
169
  </div>
128
170
  <div id="embedding-content" class="p-6 space-y-6">
129
171
  <div>
130
- <label class="block text-sm font-medium text-gray-700 mb-1">Provider</label>
131
- <select name="embedding.provider" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
172
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Provider</label>
173
+ <select name="embedding.provider" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border">
132
174
  <option value="openai">OpenAI</option>
133
175
  <option value="gemini">Gemini</option>
134
176
  <option value="anthropic">Anthropic</option>
@@ -137,35 +179,35 @@
137
179
  </select>
138
180
  </div>
139
181
  <div>
140
- <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label>
141
- <input type="password" name="embedding.apiKey" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="sk-...">
182
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">API Key</label>
183
+ <input type="password" name="embedding.apiKey" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="sk-...">
142
184
  </div>
143
185
  <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
144
186
  <div>
145
- <label class="block text-sm font-medium text-gray-700 mb-1">Model Name</label>
146
- <input type="text" name="embedding.modelName" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="text-embedding-3-small">
187
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Model Name</label>
188
+ <input type="text" name="embedding.modelName" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="text-embedding-3-small">
147
189
  </div>
148
190
  <div>
149
- <label class="block text-sm font-medium text-gray-700 mb-1">Dimensions</label>
150
- <input type="number" name="embedding.dimensions" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="1536">
191
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Dimensions</label>
192
+ <input type="number" name="embedding.dimensions" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="1536">
151
193
  </div>
152
194
  </div>
153
195
  </div>
154
196
  </section>
155
197
 
156
198
  <!-- LLM Section -->
157
- <section id="llm" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
158
- <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="llm-content">
199
+ <section id="llm" class="scroll-mt-6 bg-white dark:bg-dark-900 rounded-xl shadow-sm border border-slate-200 dark:border-white/5 overflow-hidden transition-all duration-200 hover:shadow-md">
200
+ <div class="px-6 py-4 border-b border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-white/5 flex justify-between items-center cursor-pointer accordion-header" data-target="llm-content">
159
201
  <div>
160
- <h2 class="text-lg font-semibold text-gray-900">LLM Provider</h2>
161
- <p class="text-xs text-gray-500 mt-0.5">Configure the generation model.</p>
202
+ <h2 class="text-lg font-semibold text-slate-900 dark:text-white">LLM Provider</h2>
203
+ <p class="text-xs text-slate-500 dark:text-gray-400 mt-0.5">Configure the generation model.</p>
162
204
  </div>
163
- <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
205
+ <svg class="w-5 h-5 text-slate-400 dark:text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
164
206
  </div>
165
207
  <div id="llm-content" class="p-6 space-y-6">
166
208
  <div>
167
- <label class="block text-sm font-medium text-gray-700 mb-1">Provider</label>
168
- <select name="llm.provider" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
209
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Provider</label>
210
+ <select name="llm.provider" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border">
169
211
  <option value="openai">OpenAI</option>
170
212
  <option value="gemini">Gemini</option>
171
213
  <option value="anthropic">Anthropic</option>
@@ -174,51 +216,51 @@
174
216
  </select>
175
217
  </div>
176
218
  <div>
177
- <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label>
178
- <input type="password" name="llm.apiKey" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="sk-...">
219
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">API Key</label>
220
+ <input type="password" name="llm.apiKey" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="sk-...">
179
221
  </div>
180
222
  <div>
181
- <label class="block text-sm font-medium text-gray-700 mb-1">Model Name</label>
182
- <input type="text" name="llm.modelName" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="gpt-4o">
223
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Model Name</label>
224
+ <input type="text" name="llm.modelName" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="gpt-4o">
183
225
  </div>
184
226
  <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
185
227
  <div>
186
- <label class="block text-sm font-medium text-gray-700 mb-1">Temperature</label>
228
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Temperature</label>
187
229
  <div class="flex items-center space-x-3">
188
- <input type="range" id="temp-slider" min="0" max="1" step="0.1" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
189
- <input type="number" id="temp-input" step="0.1" min="0" max="1" name="llm.temperature" class="w-20 rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-2 border text-center">
230
+ <input type="range" id="temp-slider" min="0" max="1" step="0.1" class="w-full h-2 bg-slate-200 dark:bg-dark-800 rounded-lg appearance-none cursor-pointer">
231
+ <input type="number" id="temp-input" step="0.1" min="0" max="1" name="llm.temperature" class="w-20 rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-2 border text-center">
190
232
  </div>
191
233
  </div>
192
234
  <div>
193
- <label class="block text-sm font-medium text-gray-700 mb-1">Max Tokens</label>
194
- <input type="number" name="llm.maxTokens" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="1024">
235
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Max Tokens</label>
236
+ <input type="number" name="llm.maxTokens" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="1024">
195
237
  </div>
196
238
  </div>
197
239
  <div>
198
- <label class="block text-sm font-medium text-gray-700 mb-1">Base URL</label>
199
- <input type="text" name="llm.baseUrl" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="https://api.openai.com/v1 (Optional)">
200
- <p class="mt-1 text-xs text-gray-500 hidden" id="openrouter-base-hint">OpenRouter Default: https://openrouter.ai/api/v1</p>
240
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Base URL</label>
241
+ <input type="text" name="llm.baseUrl" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="https://api.openai.com/v1 (Optional)">
242
+ <p class="mt-1 text-xs text-slate-500 dark:text-gray-500 hidden" id="openrouter-base-hint">OpenRouter Default: https://openrouter.ai/api/v1</p>
201
243
  </div>
202
244
 
203
245
  <!-- OpenRouter Specifics -->
204
- <div id="openrouter-extras" class="hidden space-y-4 border-l-4 border-indigo-100 pl-4 py-2">
205
- <h3 class="text-sm font-medium text-indigo-900">OpenRouter Configuration</h3>
246
+ <div id="openrouter-extras" class="hidden space-y-4 border-l-4 border-brand-500/50 pl-4 py-2">
247
+ <h3 class="text-sm font-medium text-brand-600 dark:text-brand-400">OpenRouter Configuration</h3>
206
248
  <div>
207
- <label class="block text-sm font-medium text-gray-700 mb-1">Site URL (Referer)</label>
208
- <input type="text" id="or-referer" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="https://your-site.com">
249
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Site URL (Referer)</label>
250
+ <input type="text" id="or-referer" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="https://your-site.com">
209
251
  </div>
210
252
  <div>
211
- <label class="block text-sm font-medium text-gray-700 mb-1">Site Name (Title)</label>
212
- <input type="text" id="or-title" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="My App">
253
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Site Name (Title)</label>
254
+ <input type="text" id="or-title" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="My App">
213
255
  </div>
214
256
  </div>
215
257
 
216
258
  <div>
217
- <label class="block text-sm font-medium text-gray-700 mb-2">Default Headers</label>
259
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-2">Default Headers</label>
218
260
  <div id="headers-builder" class="space-y-2 mb-3">
219
261
  <!-- Dynamic rows -->
220
262
  </div>
221
- <button type="button" id="add-header-btn" class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
263
+ <button type="button" id="add-header-btn" class="inline-flex items-center px-3 py-1.5 border border-slate-300 dark:border-white/10 shadow-sm text-xs font-medium rounded text-slate-700 dark:text-gray-300 bg-white dark:bg-dark-800 hover:bg-slate-50 dark:hover:bg-dark-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500">
222
264
  <svg class="-ml-0.5 mr-2 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
223
265
  <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
224
266
  </svg>
@@ -230,18 +272,18 @@
230
272
  </section>
231
273
 
232
274
  <!-- Database Section -->
233
- <section id="database" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
234
- <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="database-content">
275
+ <section id="database" class="scroll-mt-6 bg-white dark:bg-dark-900 rounded-xl shadow-sm border border-slate-200 dark:border-white/5 overflow-hidden transition-all duration-200 hover:shadow-md">
276
+ <div class="px-6 py-4 border-b border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-white/5 flex justify-between items-center cursor-pointer accordion-header" data-target="database-content">
235
277
  <div>
236
- <h2 class="text-lg font-semibold text-gray-900">Vector Database</h2>
237
- <p class="text-xs text-gray-500 mt-0.5">Storage for your documents and embeddings.</p>
278
+ <h2 class="text-lg font-semibold text-slate-900 dark:text-white">Vector Database</h2>
279
+ <p class="text-xs text-slate-500 dark:text-gray-400 mt-0.5">Storage for your documents and embeddings.</p>
238
280
  </div>
239
- <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
281
+ <svg class="w-5 h-5 text-slate-400 dark:text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
240
282
  </div>
241
283
  <div id="database-content" class="p-6 space-y-6">
242
284
  <div>
243
- <label class="block text-sm font-medium text-gray-700 mb-1">Type</label>
244
- <select name="database.type" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
285
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Type</label>
286
+ <select name="database.type" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border">
245
287
  <option value="prisma">Prisma (PostgreSQL)</option>
246
288
  <option value="chroma">ChromaDB</option>
247
289
  <option value="qdrant">Qdrant</option>
@@ -249,54 +291,54 @@
249
291
  </select>
250
292
  </div>
251
293
  <div>
252
- <label class="block text-sm font-medium text-gray-700 mb-1">Table / Collection Name</label>
253
- <input type="text" name="database.tableName" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="Document">
294
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Table / Collection Name</label>
295
+ <input type="text" name="database.tableName" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="Document">
254
296
  </div>
255
297
  <div>
256
- <label class="block text-sm font-medium text-gray-700 mb-1">Column Map (JSON)</label>
257
- <textarea name="database.columnMap" rows="4" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border font-mono text-xs"></textarea>
258
- <p class="mt-1 text-xs text-gray-500">Maps internal fields (content, vector, metadata) to DB columns.</p>
298
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Column Map (JSON)</label>
299
+ <textarea name="database.columnMap" rows="4" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border font-mono text-xs"></textarea>
300
+ <p class="mt-1 text-xs text-slate-500 dark:text-gray-500">Maps internal fields (content, vector, metadata) to DB columns.</p>
259
301
  </div>
260
302
  </div>
261
303
  </section>
262
304
 
263
305
  <!-- Chunking Section -->
264
- <section id="chunking" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
265
- <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="chunking-content">
306
+ <section id="chunking" class="scroll-mt-6 bg-white dark:bg-dark-900 rounded-xl shadow-sm border border-slate-200 dark:border-white/5 overflow-hidden transition-all duration-200 hover:shadow-md">
307
+ <div class="px-6 py-4 border-b border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-white/5 flex justify-between items-center cursor-pointer accordion-header" data-target="chunking-content">
266
308
  <div>
267
- <h2 class="text-lg font-semibold text-gray-900">Chunking Strategy</h2>
268
- <p class="text-xs text-gray-500 mt-0.5">Split documents for processing.</p>
309
+ <h2 class="text-lg font-semibold text-slate-900 dark:text-white">Chunking Strategy</h2>
310
+ <p class="text-xs text-slate-500 dark:text-gray-400 mt-0.5">Split documents for processing.</p>
269
311
  </div>
270
- <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
312
+ <svg class="w-5 h-5 text-slate-400 dark:text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
271
313
  </div>
272
314
  <div id="chunking-content" class="p-6 space-y-6">
273
315
  <div>
274
- <label class="block text-sm font-medium text-gray-700 mb-1">Strategy</label>
275
- <select name="chunking.strategy" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
316
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Strategy</label>
317
+ <select name="chunking.strategy" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border">
276
318
  <option value="recursive">Recursive Character</option>
277
319
  <option value="agentic">Agentic (Semantic)</option>
278
320
  </select>
279
321
  </div>
280
322
  <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
281
323
  <div>
282
- <label class="block text-sm font-medium text-gray-700 mb-1">Chunk Size</label>
283
- <input type="number" name="chunking.chunkSize" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="1000">
324
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Chunk Size</label>
325
+ <input type="number" name="chunking.chunkSize" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="1000">
284
326
  </div>
285
327
  <div>
286
- <label class="block text-sm font-medium text-gray-700 mb-1">Chunk Overlap</label>
287
- <input type="number" name="chunking.chunkOverlap" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="200">
328
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Chunk Overlap</label>
329
+ <input type="number" name="chunking.chunkOverlap" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="200">
288
330
  </div>
289
331
  </div>
290
332
  <div>
291
- <label class="block text-sm font-medium text-gray-700 mb-1">Separators (JSON Array)</label>
292
- <textarea name="chunking.separators" rows="2" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border font-mono text-xs"></textarea>
333
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Separators (JSON Array)</label>
334
+ <textarea name="chunking.separators" rows="2" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border font-mono text-xs"></textarea>
293
335
  </div>
294
- <div id="agentic-llm-content" class="space-y-4 hidden border-l-4 border-indigo-100 pl-4 py-2">
295
- <h3 class="text-sm font-medium text-indigo-900">Agentic Chunking LLM</h3>
336
+ <div id="agentic-llm-content" class="space-y-4 hidden border-l-4 border-brand-500/50 pl-4 py-2">
337
+ <h3 class="text-sm font-medium text-brand-600 dark:text-brand-400">Agentic Chunking LLM</h3>
296
338
  <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
297
339
  <div>
298
- <label class="block text-sm font-medium text-gray-700 mb-1">Provider</label>
299
- <select name="chunking.agentic.provider" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
340
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Provider</label>
341
+ <select name="chunking.agentic.provider" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border">
300
342
  <option value="openai">OpenAI</option>
301
343
  <option value="gemini">Gemini</option>
302
344
  <option value="anthropic">Anthropic</option>
@@ -305,24 +347,24 @@
305
347
  </select>
306
348
  </div>
307
349
  <div>
308
- <label class="block text-sm font-medium text-gray-700 mb-1">Model Name</label>
309
- <input type="text" name="chunking.agentic.modelName" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="gpt-4o-mini">
350
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Model Name</label>
351
+ <input type="text" name="chunking.agentic.modelName" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="gpt-4o-mini">
310
352
  </div>
311
353
  <div>
312
- <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label>
313
- <input type="password" name="chunking.agentic.apiKey" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="sk-...">
354
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">API Key</label>
355
+ <input type="password" name="chunking.agentic.apiKey" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="sk-...">
314
356
  </div>
315
357
  <div>
316
- <label class="block text sm font-medium text-gray-700 mb-1">Temperature</label>
317
- <input type="number" step="0.1" min="0" max="1" name="chunking.agentic.temperature" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="0">
358
+ <label class="block text sm font-medium text-slate-700 dark:text-gray-300 mb-1">Temperature</label>
359
+ <input type="number" step="0.1" min="0" max="1" name="chunking.agentic.temperature" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="0">
318
360
  </div>
319
361
  <div>
320
- <label class="block text-sm font-medium text-gray-700 mb-1">Max Tokens</label>
321
- <input type="number" name="chunking.agentic.maxTokens" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="512">
362
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Max Tokens</label>
363
+ <input type="number" name="chunking.agentic.maxTokens" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="512">
322
364
  </div>
323
365
  <div class="sm:col-span-2">
324
- <label class="block text-sm font-medium text-gray-700 mb-1">Base URL</label>
325
- <input type="text" name="chunking.agentic.baseUrl" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="https://...">
366
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Base URL</label>
367
+ <input type="text" name="chunking.agentic.baseUrl" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="https://...">
326
368
  </div>
327
369
  </div>
328
370
  </div>
@@ -330,24 +372,24 @@
330
372
  </section>
331
373
 
332
374
  <!-- Retrieval Section -->
333
- <section id="retrieval" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
334
- <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="retrieval-content">
375
+ <section id="retrieval" class="scroll-mt-6 bg-white dark:bg-dark-900 rounded-xl shadow-sm border border-slate-200 dark:border-white/5 overflow-hidden transition-all duration-200 hover:shadow-md">
376
+ <div class="px-6 py-4 border-b border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-white/5 flex justify-between items-center cursor-pointer accordion-header" data-target="retrieval-content">
335
377
  <div>
336
- <h2 class="text-lg font-semibold text-gray-900">Retrieval Strategy</h2>
337
- <p class="text-xs text-gray-500 mt-0.5">Find relevant context.</p>
378
+ <h2 class="text-lg font-semibold text-slate-900 dark:text-white">Retrieval Strategy</h2>
379
+ <p class="text-xs text-slate-500 dark:text-gray-400 mt-0.5">Find relevant context.</p>
338
380
  </div>
339
381
  <div class="flex items-center space-x-3">
340
- <label class="flex items-center space-x-2 text-xs text-gray-600 select-none">
341
- <input type="checkbox" name="toggle.retrieval" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
382
+ <label class="flex items-center space-x-2 text-xs text-slate-600 dark:text-gray-300 select-none">
383
+ <input type="checkbox" name="toggle.retrieval" class="h-4 w-4 text-brand-500 focus:ring-brand-500 border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 rounded">
342
384
  <span>Enable</span>
343
385
  </label>
344
- <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
386
+ <svg class="w-5 h-5 text-slate-400 dark:text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
345
387
  </div>
346
388
  </div>
347
389
  <div id="retrieval-content" class="p-6 space-y-6">
348
390
  <div>
349
- <label class="block text-sm font-medium text-gray-700 mb-1">Strategy</label>
350
- <select name="retrieval.strategy" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
391
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Strategy</label>
392
+ <select name="retrieval.strategy" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border">
351
393
  <option value="naive">Naive (Cosine Similarity)</option>
352
394
  <option value="hyde">HyDE (Hypothetical Document)</option>
353
395
  <option value="multi_query">Multi-Query</option>
@@ -356,24 +398,24 @@
356
398
  </select>
357
399
  </div>
358
400
  <div>
359
- <label class="block text-sm font-medium text-gray-700 mb-1">Hybrid Alpha (0.0 - 1.0)</label>
360
- <input type="number" step="0.1" min="0" max="1" name="retrieval.hybridAlpha" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="0.5">
361
- <p class="mt-1 text-xs text-gray-500">0.0 = Keyword only, 1.0 = Vector only.</p>
401
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Hybrid Alpha (0.0 - 1.0)</label>
402
+ <input type="number" step="0.1" min="0" max="1" name="retrieval.hybridAlpha" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="0.5">
403
+ <p class="mt-1 text-xs text-slate-500 dark:text-gray-500">0.0 = Keyword only, 1.0 = Vector only.</p>
362
404
  </div>
363
405
  <div>
364
- <label class="block text-sm font-medium text-gray-700 mb-1">MMR Lambda (0.0 - 1.0)</label>
365
- <input type="number" step="0.05" min="0" max="1" name="retrieval.mmrLambda" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="0.5">
406
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">MMR Lambda (0.0 - 1.0)</label>
407
+ <input type="number" step="0.05" min="0" max="1" name="retrieval.mmrLambda" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="0.5">
366
408
  </div>
367
409
  <div>
368
- <label class="block text-sm font-medium text-gray-700 mb-1">MMR Fetch K</label>
369
- <input type="number" step="1" min="1" name="retrieval.mmrFetchK" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="20">
410
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">MMR Fetch K</label>
411
+ <input type="number" step="1" min="1" name="retrieval.mmrFetchK" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="20">
370
412
  </div>
371
- <div id="retrieval-llm-content" class="space-y-4 hidden border-l-4 border-indigo-100 pl-4 py-2">
372
- <h3 class="text-sm font-medium text-indigo-900">Retrieval LLM Config</h3>
413
+ <div id="retrieval-llm-content" class="space-y-4 hidden border-l-4 border-brand-500/50 pl-4 py-2">
414
+ <h3 class="text-sm font-medium text-brand-600 dark:text-brand-400">Retrieval LLM Config</h3>
373
415
  <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
374
416
  <div>
375
- <label class="block text-sm font-medium text-gray-700 mb-1">Provider</label>
376
- <select name="retrieval.llm.provider" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
417
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Provider</label>
418
+ <select name="retrieval.llm.provider" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border">
377
419
  <option value="openai">OpenAI</option>
378
420
  <option value="gemini">Gemini</option>
379
421
  <option value="anthropic">Anthropic</option>
@@ -382,20 +424,20 @@
382
424
  </select>
383
425
  </div>
384
426
  <div>
385
- <label class="block text-sm font-medium text-gray-700 mb-1">Model Name</label>
386
- <input type="text" name="retrieval.llm.modelName" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="gpt-4o-mini">
427
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Model Name</label>
428
+ <input type="text" name="retrieval.llm.modelName" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="gpt-4o-mini">
387
429
  </div>
388
430
  <div>
389
- <label class="block text-sm font-medium text-gray-700 mb-1">Temperature</label>
390
- <input type="number" step="0.1" min="0" max="1" name="retrieval.llm.temperature" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="0">
431
+ <label class="block text-sm font-medium text-gray-300 mb-1">Temperature</label>
432
+ <input type="number" step="0.1" min="0" max="1" name="retrieval.llm.temperature" class="block w-full rounded-md border-white/10 bg-dark-950 text-white shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="0">
391
433
  </div>
392
434
  <div>
393
- <label class="block text-sm font-medium text-gray-700 mb-1">Max Tokens</label>
394
- <input type="number" name="retrieval.llm.maxTokens" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="512">
435
+ <label class="block text-sm font-medium text-gray-300 mb-1">Max Tokens</label>
436
+ <input type="number" name="retrieval.llm.maxTokens" class="block w-full rounded-md border-white/10 bg-dark-950 text-white shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="512">
395
437
  </div>
396
438
  <div class="sm:col-span-2">
397
- <label class="block text-sm font-medium text-gray-700 mb-1">Base URL</label>
398
- <input type="text" name="retrieval.llm.baseUrl" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="https://...">
439
+ <label class="block text-sm font-medium text-gray-300 mb-1">Base URL</label>
440
+ <input type="text" name="retrieval.llm.baseUrl" class="block w-full rounded-md border-white/10 bg-dark-950 text-white shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="https://...">
399
441
  </div>
400
442
  </div>
401
443
  </div>
@@ -403,33 +445,33 @@
403
445
  </section>
404
446
 
405
447
  <!-- Reranking Section -->
406
- <section id="reranking" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
407
- <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="reranking-content">
448
+ <section id="reranking" class="scroll-mt-6 bg-white dark:bg-dark-900 rounded-xl shadow-sm border border-slate-200 dark:border-white/5 overflow-hidden transition-all duration-200 hover:shadow-md">
449
+ <div class="px-6 py-4 border-b border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-white/5 flex justify-between items-center cursor-pointer accordion-header" data-target="reranking-content">
408
450
  <div>
409
- <h2 class="text-lg font-semibold text-gray-900">Reranking</h2>
410
- <p class="text-xs text-gray-500 mt-0.5">Improve result relevance.</p>
451
+ <h2 class="text-lg font-semibold text-slate-900 dark:text-white">Reranking</h2>
452
+ <p class="text-xs text-slate-500 dark:text-gray-400 mt-0.5">Improve result relevance.</p>
411
453
  </div>
412
- <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
454
+ <svg class="w-5 h-5 text-slate-400 dark:text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
413
455
  </div>
414
456
  <div id="reranking-content" class="p-6 space-y-6">
415
457
  <div class="flex items-center space-x-3">
416
- <input type="checkbox" name="reranking.enabled" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
417
- <label class="text-sm font-medium text-gray-700">Enable Reranking</label>
458
+ <input type="checkbox" name="reranking.enabled" class="h-4 w-4 text-brand-500 focus:ring-brand-500 border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 rounded">
459
+ <label class="text-sm font-medium text-slate-700 dark:text-gray-300">Enable Reranking</label>
418
460
  </div>
419
461
  <div>
420
- <label class="block text-sm font-medium text-gray-700 mb-1">Top N</label>
421
- <input type="number" name="reranking.topN" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="5">
462
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Top N</label>
463
+ <input type="number" name="reranking.topN" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="5">
422
464
  </div>
423
465
  <div>
424
- <label class="block text-sm font-medium text-gray-700 mb-1">Window Size</label>
425
- <input type="number" name="reranking.windowSize" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="20">
466
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Window Size</label>
467
+ <input type="number" name="reranking.windowSize" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="20">
426
468
  </div>
427
- <div id="reranking-llm-content" class="space-y-4 hidden border-l-4 border-indigo-100 pl-4 py-2">
428
- <h3 class="text-sm font-medium text-indigo-900">Reranking LLM Config</h3>
469
+ <div id="reranking-llm-content" class="space-y-4 hidden border-l-4 border-brand-500/50 pl-4 py-2">
470
+ <h3 class="text-sm font-medium text-brand-600 dark:text-brand-400">Reranking LLM Config</h3>
429
471
  <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
430
472
  <div>
431
- <label class="block text-sm font-medium text-gray-700 mb-1">Provider</label>
432
- <select name="reranking.llm.provider" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
473
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Provider</label>
474
+ <select name="reranking.llm.provider" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border">
433
475
  <option value="openai">OpenAI</option>
434
476
  <option value="gemini">Gemini</option>
435
477
  <option value="anthropic">Anthropic</option>
@@ -438,168 +480,168 @@
438
480
  </select>
439
481
  </div>
440
482
  <div>
441
- <label class="block text-sm font-medium text-gray-700 mb-1">Model Name</label>
442
- <input type="text" name="reranking.llm.modelName" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="gpt-4o-mini">
483
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Model Name</label>
484
+ <input type="text" name="reranking.llm.modelName" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="gpt-4o-mini">
443
485
  </div>
444
486
  <div>
445
- <label class="block text-sm font-medium text-gray-700 mb-1">Temperature</label>
446
- <input type="number" step="0.1" min="0" max="1" name="reranking.llm.temperature" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="0">
487
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Temperature</label>
488
+ <input type="number" step="0.1" min="0" max="1" name="reranking.llm.temperature" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="0">
447
489
  </div>
448
490
  <div>
449
- <label class="block text-sm font-medium text-gray-700 mb-1">Max Tokens</label>
450
- <input type="number" name="reranking.llm.maxTokens" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="512">
491
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Max Tokens</label>
492
+ <input type="number" name="reranking.llm.maxTokens" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="512">
451
493
  </div>
452
494
  <div class="sm:col-span-2">
453
- <label class="block text-sm font-medium text-gray-700 mb-1">Base URL</label>
454
- <input type="text" name="reranking.llm.baseUrl" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="https://...">
495
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Base URL</label>
496
+ <input type="text" name="reranking.llm.baseUrl" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="https://...">
455
497
  </div>
456
498
  </div>
457
499
  </div>
458
500
  </div>
459
501
  </section>
460
502
  <!-- Metadata Section -->
461
- <section id="metadata" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
462
- <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="metadata-content">
503
+ <section id="metadata" class="scroll-mt-6 bg-white dark:bg-dark-900 rounded-xl shadow-sm border border-slate-200 dark:border-white/5 overflow-hidden transition-all duration-200 hover:shadow-md">
504
+ <div class="px-6 py-4 border-b border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-white/5 flex justify-between items-center cursor-pointer accordion-header" data-target="metadata-content">
463
505
  <div>
464
- <h2 class="text-lg font-semibold text-gray-900">Metadata</h2>
465
- <p class="text-xs text-gray-500 mt-0.5">Configure metadata extraction and filters.</p>
506
+ <h2 class="text-lg font-semibold text-slate-900 dark:text-white">Metadata</h2>
507
+ <p class="text-xs text-slate-500 dark:text-gray-400 mt-0.5">Configure metadata extraction and filters.</p>
466
508
  </div>
467
509
  <div class="flex items-center space-x-3">
468
- <label class="flex items-center space-x-2 text-xs text-gray-600 select-none">
469
- <input type="checkbox" name="toggle.metadata" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
510
+ <label class="flex items-center space-x-2 text-xs text-slate-600 dark:text-gray-300 select-none">
511
+ <input type="checkbox" name="toggle.metadata" class="h-4 w-4 text-brand-500 focus:ring-brand-500 border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 rounded">
470
512
  <span>Enable</span>
471
513
  </label>
472
- <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
514
+ <svg class="w-5 h-5 text-slate-400 dark:text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
473
515
  </div>
474
516
  </div>
475
517
  <div id="metadata-content" class="p-6 space-y-6">
476
518
  <div>
477
- <label class="block text-sm font-medium text-gray-700 mb-1">Filters (JSON)</label>
478
- <textarea name="metadata.filters" rows="3" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border font-mono text-xs"></textarea>
479
- <p class="mt-1 text-xs text-gray-500">Global metadata filters to apply.</p>
519
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Filters (JSON)</label>
520
+ <textarea name="metadata.filters" rows="3" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border font-mono text-xs"></textarea>
521
+ <p class="mt-1 text-xs text-slate-500 dark:text-gray-400">Global metadata filters to apply.</p>
480
522
  </div>
481
523
  </div>
482
524
  </section>
483
525
 
484
526
  <!-- Query Planning Section -->
485
- <section id="query-planning" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
486
- <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="query-planning-content">
527
+ <section id="query-planning" class="scroll-mt-6 bg-white dark:bg-dark-900 rounded-xl shadow-sm border border-slate-200 dark:border-white/5 overflow-hidden transition-all duration-200 hover:shadow-md">
528
+ <div class="px-6 py-4 border-b border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-white/5 flex justify-between items-center cursor-pointer accordion-header" data-target="query-planning-content">
487
529
  <div>
488
- <h2 class="text-lg font-semibold text-gray-900">Query Planning</h2>
489
- <p class="text-xs text-gray-500 mt-0.5">Decompose and optimize queries.</p>
530
+ <h2 class="text-lg font-semibold text-slate-900 dark:text-white">Query Planning</h2>
531
+ <p class="text-xs text-slate-500 dark:text-gray-400 mt-0.5">Decompose and optimize queries.</p>
490
532
  </div>
491
533
  <div class="flex items-center space-x-3">
492
- <label class="flex items-center space-x-2 text-xs text-gray-600 select-none">
493
- <input type="checkbox" name="toggle.queryPlanning" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
534
+ <label class="flex items-center space-x-2 text-xs text-slate-600 dark:text-gray-300 select-none">
535
+ <input type="checkbox" name="toggle.queryPlanning" class="h-4 w-4 text-brand-500 focus:ring-brand-500 border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 rounded">
494
536
  <span>Enable</span>
495
537
  </label>
496
- <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
538
+ <svg class="w-5 h-5 text-slate-400 dark:text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
497
539
  </div>
498
540
  </div>
499
541
  <div id="query-planning-content" class="p-6 space-y-6">
500
542
  <div>
501
- <label class="block text-sm font-medium text-gray-700 mb-1">Strategy</label>
502
- <select name="queryPlanning.strategy" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
543
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Strategy</label>
544
+ <select name="queryPlanning.strategy" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border">
503
545
  <option value="none">None</option>
504
546
  <option value="decomposition">Decomposition</option>
505
547
  <option value="hyde">HyDE</option>
506
548
  </select>
507
549
  </div>
508
550
  <div>
509
- <label class="block text-sm font-medium text-gray-700 mb-1">Initial Prompts (JSON Array)</label>
510
- <textarea name="queryPlanning.initialPrompts" rows="3" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border font-mono text-xs"></textarea>
551
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Initial Prompts (JSON Array)</label>
552
+ <textarea name="queryPlanning.initialPrompts" rows="3" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border font-mono text-xs"></textarea>
511
553
  </div>
512
554
  <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-3">
513
555
  <div>
514
- <label class="block text-sm font-medium text-gray-700 mb-1">Token Budget</label>
515
- <input type="number" name="queryPlanning.tokenBudget" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="2048">
556
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Token Budget</label>
557
+ <input type="number" name="queryPlanning.tokenBudget" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="2048">
516
558
  </div>
517
559
  <div>
518
- <label class="block text-sm font-medium text-gray-700 mb-1">Prefer Summaries Below</label>
519
- <input type="number" name="queryPlanning.preferSummariesBelow" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="1024">
560
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Prefer Summaries Below</label>
561
+ <input type="number" name="queryPlanning.preferSummariesBelow" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="1024">
520
562
  </div>
521
563
  <div class="flex items-center space-x-3 pt-6">
522
- <input type="checkbox" name="queryPlanning.includeCitations" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
523
- <label class="text-sm font-medium text-gray-700">Include Citations</label>
564
+ <input type="checkbox" name="queryPlanning.includeCitations" class="h-4 w-4 text-brand-500 focus:ring-brand-500 border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 rounded">
565
+ <label class="text-sm font-medium text-slate-700 dark:text-gray-300">Include Citations</label>
524
566
  </div>
525
567
  </div>
526
568
  </div>
527
569
  </section>
528
570
 
529
571
  <!-- Grounding Section -->
530
- <section id="grounding" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
531
- <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="grounding-content">
572
+ <section id="grounding" class="scroll-mt-6 bg-white dark:bg-dark-900 rounded-xl shadow-sm border border-slate-200 dark:border-white/5 overflow-hidden transition-all duration-200 hover:shadow-md">
573
+ <div class="px-6 py-4 border-b border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-white/5 flex justify-between items-center cursor-pointer accordion-header" data-target="grounding-content">
532
574
  <div>
533
- <h2 class="text-lg font-semibold text-gray-900">Grounding</h2>
534
- <p class="text-xs text-gray-500 mt-0.5">Verify and cite sources.</p>
575
+ <h2 class="text-lg font-semibold text-slate-900 dark:text-white">Grounding</h2>
576
+ <p class="text-xs text-slate-500 dark:text-gray-400 mt-0.5">Verify and cite sources.</p>
535
577
  </div>
536
578
  <div class="flex items-center space-x-3">
537
- <label class="flex items-center space-x-2 text-xs text-gray-600 select-none">
538
- <input type="checkbox" name="toggle.grounding" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
579
+ <label class="flex items-center space-x-2 text-xs text-slate-600 dark:text-gray-300 select-none">
580
+ <input type="checkbox" name="toggle.grounding" class="h-4 w-4 text-brand-500 focus:ring-brand-500 border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 rounded">
539
581
  <span>Enable</span>
540
582
  </label>
541
- <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
583
+ <svg class="w-5 h-5 text-slate-400 dark:text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
542
584
  </div>
543
585
  </div>
544
586
  <div id="grounding-content" class="p-6 space-y-6">
545
587
  <div class="flex items-center space-x-3">
546
- <input type="checkbox" name="grounding.enabled" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
547
- <label class="text-sm font-medium text-gray-700">Enable Grounding Check</label>
588
+ <input type="checkbox" name="grounding.enabled" class="h-4 w-4 text-brand-500 focus:ring-brand-500 border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 rounded">
589
+ <label class="text-sm font-medium text-slate-700 dark:text-gray-300">Enable Grounding Check</label>
548
590
  </div>
549
591
  <div>
550
- <label class="block text-sm font-medium text-gray-700 mb-1">Threshold (0.0 - 1.0)</label>
551
- <input type="number" step="0.1" min="0" max="1" name="grounding.threshold" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="0.7">
592
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Threshold (0.0 - 1.0)</label>
593
+ <input type="number" step="0.1" min="0" max="1" name="grounding.threshold" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="0.7">
552
594
  </div>
553
595
  <div class="flex items-center space-x-3">
554
- <input type="checkbox" name="grounding.strict" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
555
- <label class="text-sm font-medium text-gray-700">Strict Mode</label>
596
+ <input type="checkbox" name="grounding.strict" class="h-4 w-4 text-brand-500 focus:ring-brand-500 border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 rounded">
597
+ <label class="text-sm font-medium text-slate-700 dark:text-gray-300">Strict Mode</label>
556
598
  </div>
557
599
  <div>
558
- <label class="block text-sm font-medium text-gray-700 mb-1">Max Snippets</label>
559
- <input type="number" name="grounding.maxSnippets" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="3">
600
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Max Snippets</label>
601
+ <input type="number" name="grounding.maxSnippets" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="3">
560
602
  </div>
561
603
  </div>
562
604
  </section>
563
605
 
564
606
  <!-- Generation Section -->
565
- <section id="generation" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
566
- <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="generation-content">
607
+ <section id="generation" class="scroll-mt-6 bg-white dark:bg-dark-900 rounded-xl shadow-sm border border-slate-200 dark:border-white/5 overflow-hidden transition-all duration-200 hover:shadow-md">
608
+ <div class="px-6 py-4 border-b border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-white/5 flex justify-between items-center cursor-pointer accordion-header" data-target="generation-content">
567
609
  <div>
568
- <h2 class="text-lg font-semibold text-gray-900">Generation</h2>
569
- <p class="text-xs text-gray-500 mt-0.5">Final response generation settings.</p>
610
+ <h2 class="text-lg font-semibold text-slate-900 dark:text-white">Generation</h2>
611
+ <p class="text-xs text-slate-500 dark:text-gray-400 mt-0.5">Final response generation settings.</p>
570
612
  </div>
571
613
  <div class="flex items-center space-x-3">
572
- <label class="flex items-center space-x-2 text-xs text-gray-600 select-none">
573
- <input type="checkbox" name="toggle.generation" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
614
+ <label class="flex items-center space-x-2 text-xs text-slate-600 dark:text-gray-300 select-none">
615
+ <input type="checkbox" name="toggle.generation" class="h-4 w-4 text-brand-500 focus:ring-brand-500 border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 rounded">
574
616
  <span>Enable</span>
575
617
  </label>
576
- <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
618
+ <svg class="w-5 h-5 text-slate-400 dark:text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
577
619
  </div>
578
620
  </div>
579
621
  <div id="generation-content" class="p-6 space-y-6">
580
622
  <div>
581
- <label class="block text-sm font-medium text-gray-700 mb-1">Style</label>
582
- <select name="generation.style" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
623
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Style</label>
624
+ <select name="generation.style" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border">
583
625
  <option value="concise">Concise</option>
584
626
  <option value="detailed">Detailed</option>
585
627
  <option value="creative">Creative</option>
586
628
  </select>
587
629
  </div>
588
630
  <div>
589
- <label class="block text-sm font-medium text-gray-700 mb-1">Max Length</label>
590
- <input type="number" name="generation.maxLength" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border" placeholder="2048">
631
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Max Length</label>
632
+ <input type="number" name="generation.maxLength" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border" placeholder="2048">
591
633
  </div>
592
634
  <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2">
593
635
  <div>
594
- <label class="block text-sm font-medium text-gray-700 mb-1">Structured Output</label>
595
- <select name="generation.structuredOutput" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
636
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Structured Output</label>
637
+ <select name="generation.structuredOutput" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border">
596
638
  <option value="none">None</option>
597
639
  <option value="citations">Citations</option>
598
640
  </select>
599
641
  </div>
600
642
  <div>
601
- <label class="block text-sm font-medium text-gray-700 mb-1">Output Format</label>
602
- <select name="generation.outputFormat" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border">
643
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">Output Format</label>
644
+ <select name="generation.outputFormat" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border">
603
645
  <option value="text">Text</option>
604
646
  <option value="json">JSON</option>
605
647
  </select>
@@ -609,28 +651,28 @@
609
651
  </section>
610
652
 
611
653
  <!-- Prompts Section -->
612
- <section id="prompts" class="scroll-mt-6 bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-md">
613
- <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center cursor-pointer accordion-header" data-target="prompts-content">
654
+ <section id="prompts" class="scroll-mt-6 bg-white dark:bg-dark-900 rounded-xl shadow-sm border border-slate-200 dark:border-white/5 overflow-hidden transition-all duration-200 hover:shadow-md">
655
+ <div class="px-6 py-4 border-b border-slate-100 dark:border-white/5 bg-slate-50 dark:bg-white/5 flex justify-between items-center cursor-pointer accordion-header" data-target="prompts-content">
614
656
  <div>
615
- <h2 class="text-lg font-semibold text-gray-900">Prompts</h2>
616
- <p class="text-xs text-gray-500 mt-0.5">Customize system and user prompts.</p>
657
+ <h2 class="text-lg font-semibold text-slate-900 dark:text-white">Prompts</h2>
658
+ <p class="text-xs text-slate-500 dark:text-gray-400 mt-0.5">Customize system and user prompts.</p>
617
659
  </div>
618
660
  <div class="flex items-center space-x-3">
619
- <label class="flex items-center space-x-2 text-xs text-gray-600 select-none">
620
- <input type="checkbox" name="toggle.prompts" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
661
+ <label class="flex items-center space-x-2 text-xs text-slate-600 dark:text-gray-300 select-none">
662
+ <input type="checkbox" name="toggle.prompts" class="h-4 w-4 text-brand-500 focus:ring-brand-500 border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 rounded">
621
663
  <span>Enable</span>
622
664
  </label>
623
- <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
665
+ <svg class="w-5 h-5 text-slate-400 dark:text-gray-400 transform transition-transform duration-200 accordion-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
624
666
  </div>
625
667
  </div>
626
668
  <div id="prompts-content" class="p-6 space-y-6">
627
669
  <div>
628
- <label class="block text-sm font-medium text-gray-700 mb-1">System Prompt</label>
629
- <textarea name="prompts.system" rows="4" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border font-mono text-xs"></textarea>
670
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">System Prompt</label>
671
+ <textarea name="prompts.system" rows="4" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border font-mono text-xs"></textarea>
630
672
  </div>
631
673
  <div>
632
- <label class="block text-sm font-medium text-gray-700 mb-1">User Prompt Template</label>
633
- <textarea name="prompts.user" rows="4" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm py-2 px-3 border font-mono text-xs"></textarea>
674
+ <label class="block text-sm font-medium text-slate-700 dark:text-gray-300 mb-1">User Prompt Template</label>
675
+ <textarea name="prompts.user" rows="4" class="block w-full rounded-md border-slate-300 dark:border-white/10 bg-white dark:bg-dark-950 text-slate-900 dark:text-white shadow-sm focus:border-brand-500 focus:ring-brand-500 sm:text-sm py-2 px-3 border font-mono text-xs"></textarea>
634
676
  </div>
635
677
  </div>
636
678
  </section>
@@ -638,9 +680,9 @@
638
680
  </div>
639
681
 
640
682
  <!-- Sticky Footer for Save -->
641
- <div class="fixed bottom-0 left-[20%] right-[30%] p-4 bg-white/90 backdrop-blur-sm border-t border-gray-200 z-10 flex justify-end items-center space-x-4">
683
+ <div class="fixed bottom-0 left-[20%] right-[30%] p-4 bg-white/90 dark:bg-dark-950/90 backdrop-blur-sm border-t border-slate-200 dark:border-white/5 z-10 flex justify-end items-center space-x-4">
642
684
  <div id="status-msg" class="text-sm font-medium transition-colors duration-300"></div>
643
- <button id="save-btn" class="inline-flex justify-center items-center py-2.5 px-6 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all transform hover:scale-105">
685
+ <button id="save-btn" class="inline-flex justify-center items-center py-2.5 px-6 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-brand-600 hover:bg-brand-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 transition-all transform hover:scale-105">
644
686
  Save Configuration
645
687
  </button>
646
688
  </div>
@@ -648,10 +690,10 @@
648
690
  </main>
649
691
 
650
692
  <!-- Live Summary Sidebar (30%) -->
651
- <aside class="w-[30%] bg-gray-50 border-l border-gray-200 flex-shrink-0 flex flex-col hidden lg:flex">
652
- <div class="px-6 py-4 border-b border-gray-200 bg-white shadow-sm z-10">
653
- <h3 class="text-sm font-semibold text-gray-900 uppercase tracking-wider">Live Preview</h3>
654
- <p class="text-xs text-gray-500 mt-1">Real-time configuration state</p>
693
+ <aside class="w-[30%] bg-gray-50 dark:bg-dark-900 border-l border-gray-200 dark:border-white/5 flex-shrink-0 flex flex-col hidden lg:flex">
694
+ <div class="px-6 py-4 border-b border-gray-200 dark:border-white/5 bg-white dark:bg-dark-950 shadow-sm z-10">
695
+ <h3 class="text-sm font-semibold text-gray-900 dark:text-white uppercase tracking-wider">Live Preview</h3>
696
+ <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Real-time configuration state</p>
655
697
  </div>
656
698
  <div id="preview-scroll" class="flex-1 overflow-y-auto p-4 bg-[#1e1e1e] text-[#d4d4d4] font-mono text-xs">
657
699
  <div id="json-preview" class="space-y-1">