feat(ui): add light theme toggle

.gitignore

@@ -59,4 +59,5 @@ Thumbs.db
 
 # Temporary working files (specs, scratch) — never commit
 tmp/
+verification-screenshots/
 ArchFlow.iml

frontend/src/App.tsx

@@ -27,6 +27,7 @@ import { useAuthStore } from './stores/auth-store'
 import { useWorkspaceStore } from './stores/workspace-store'
 import { useWorkspaceSocket } from './hooks/use-realtime'
 import { ChatBubble } from './components/agent-chat/ChatBubble'
+import { ThemeProvider } from './components/theme/ThemeProvider'
 import './index.css'
 
 const queryClient = new QueryClient({
@@ -74,10 +75,11 @@ function App() {
 
   return (
     <QueryClientProvider client={queryClient}>
-      {isAuthenticated && <WorkspaceCacheReset />}
-      {isAuthenticated && workspaceId && <WorkspaceSocketGate />}
-      <BrowserRouter>
-        <Routes>
+      <ThemeProvider>
+        {isAuthenticated && <WorkspaceCacheReset />}
+        {isAuthenticated && workspaceId && <WorkspaceSocketGate />}
+        <BrowserRouter>
+          <Routes>
           <Route
             path="/login"
             element={isAuthenticated ? <Navigate to="/" replace /> : <AuthPage />}
@@ -213,11 +215,12 @@ function App() {
                 : <Navigate to="/" replace />
             }
           />
-        </Routes>
-        {/* Agent chat bubble — floats over all workspace pages, outside route
-            layout but inside the Router so useNavigate() (in useViewChange) works. */}
-        {isAuthenticated && <ChatBubble />}
-      </BrowserRouter>
+          </Routes>
+          {/* Agent chat bubble — floats over all workspace pages, outside route
+              layout but inside the Router so useNavigate() (in useViewChange) works. */}
+          {isAuthenticated && <ChatBubble />}
+        </BrowserRouter>
+      </ThemeProvider>
     </QueryClientProvider>
   )
 }

frontend/src/components/agents-settings/AnalyticsConsentModal.tsx

@@ -46,20 +46,20 @@ function ModalBody({
     >
       <div
         onClick={(e) => e.stopPropagation()}
-        className="w-[520px] max-h-[85vh] overflow-y-auto rounded-lg border border-neutral-800 bg-neutral-900 text-neutral-100 shadow-2xl"
+        className="w-[520px] max-h-[85vh] overflow-y-auto rounded-lg border border-border-base bg-panel text-text-base shadow-popup"
       >
-        <div className="px-5 py-4 border-b border-neutral-800">
+        <div className="px-5 py-4 border-b border-border-base">
           <h3 className="text-sm font-semibold">Включити аналітику агентів?</h3>
         </div>
 
-        <div className="px-5 py-4 space-y-4 text-[12.5px] leading-relaxed text-neutral-300">
+        <div className="px-5 py-4 space-y-4 text-[12.5px] leading-relaxed text-text-2">
           <p>
             Це допомагає нам зробити агентів кращими: ми бачимо які запити погано
             спрацьовують і покращуємо логіку.
           </p>
 
           <div>
-            <h4 className="text-[11px] uppercase tracking-wider text-neutral-500 mb-1">
+            <h4 className="text-[11px] uppercase tracking-wider text-text-3 mb-1">
               Що збирається
             </h4>
             <ul className="list-disc list-inside space-y-0.5">
@@ -70,7 +70,7 @@ function ModalBody({
           </div>
 
           <div>
-            <h4 className="text-[11px] uppercase tracking-wider text-neutral-500 mb-1">
+            <h4 className="text-[11px] uppercase tracking-wider text-text-3 mb-1">
               Що НЕ збирається
             </h4>
             <ul className="list-disc list-inside space-y-0.5">
@@ -81,7 +81,7 @@ function ModalBody({
           </div>
 
           <div>
-            <h4 className="text-[11px] uppercase tracking-wider text-neutral-500 mb-1">
+            <h4 className="text-[11px] uppercase tracking-wider text-text-3 mb-1">
               Куди йде
             </h4>
             <ul className="list-disc list-inside space-y-0.5">
@@ -92,7 +92,7 @@ function ModalBody({
           </div>
 
           <div className="pt-1">
-            <h4 className="text-[11px] uppercase tracking-wider text-neutral-500 mb-2">
+            <h4 className="text-[11px] uppercase tracking-wider text-text-3 mb-2">
               Виберіть рівень
             </h4>
             <div className="space-y-1.5">
@@ -121,18 +121,18 @@ function ModalBody({
           </div>
         </div>
 
-        <div className="px-5 py-3 border-t border-neutral-800 flex justify-end gap-2">
+        <div className="px-5 py-3 border-t border-border-base flex justify-end gap-2">
           <button
             onClick={onCancel}
             data-testid="consent-cancel"
-            className="text-xs text-neutral-400 hover:text-neutral-200 px-3 py-1.5"
+            className="text-xs text-text-2 hover:text-text-base px-3 py-1.5"
           >
             Скасувати
           </button>
           <button
             onClick={() => onConfirm(value)}
             data-testid="consent-confirm"
-            className="bg-blue-600 hover:bg-blue-500 text-white text-xs font-medium rounded px-3 py-1.5"
+            className="bg-coral hover:bg-coral-2 text-on-accent text-xs font-medium rounded px-3 py-1.5"
           >
             Підтвердити
           </button>
@@ -165,8 +165,8 @@ function ConsentOption({
         className="mt-0.5"
       />
       <span>
-        <span className="text-neutral-100">{label}</span>
-        <span className="text-neutral-500"> — {hint}</span>
+        <span className="text-text-base">{label}</span>
+        <span className="text-text-3"> — {hint}</span>
       </span>
     </label>
   )

frontend/src/components/agents-settings/ModelPricingTable.tsx

@@ -34,11 +34,11 @@ export function ModelPricingTable({ pricing, onChange }: Props) {
   return (
     <div
       data-testid="model-pricing-table"
-      className="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden"
+      className="bg-panel border border-border-base rounded-lg overflow-hidden"
     >
       <table className="w-full text-sm">
         <thead>
-          <tr className="text-xs text-neutral-500 border-b border-neutral-800">
+          <tr className="text-xs text-text-3 border-b border-border-base">
             <th className="text-left px-4 py-2 font-medium">Model</th>
             <th className="text-left px-4 py-2 font-medium">Input ($/1M tokens)</th>
             <th className="text-left px-4 py-2 font-medium">Output ($/1M tokens)</th>
@@ -50,7 +50,7 @@ export function ModelPricingTable({ pricing, onChange }: Props) {
             <tr>
               <td
                 colSpan={4}
-                className="px-4 py-3 text-xs text-neutral-500 italic"
+                className="px-4 py-3 text-xs text-text-3 italic"
               >
                 No pricing overrides — falling back to LiteLLM defaults.
               </td>
@@ -60,9 +60,9 @@ export function ModelPricingTable({ pricing, onChange }: Props) {
             <tr
               key={modelId}
               data-testid={`pricing-row-${modelId}`}
-              className="border-b border-neutral-800 last:border-0"
+              className="border-b border-border-base last:border-0"
             >
-              <td className="px-4 py-2 text-xs font-mono text-neutral-300">
+              <td className="px-4 py-2 text-xs font-mono text-text-2">
                 {modelId}
               </td>
               <td className="px-4 py-2">
@@ -77,7 +77,7 @@ export function ModelPricingTable({ pricing, onChange }: Props) {
                     })
                   }
                   data-testid={`pricing-${modelId}-input`}
-                  className="w-28 bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-xs outline-none focus:border-neutral-500"
+                  className="w-28 bg-surface border border-border-base rounded px-2 py-1 text-xs text-text-base outline-none focus:border-border-hi"
                 />
               </td>
               <td className="px-4 py-2">
@@ -92,7 +92,7 @@ export function ModelPricingTable({ pricing, onChange }: Props) {
                     })
                   }
                   data-testid={`pricing-${modelId}-output`}
-                  className="w-28 bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-xs outline-none focus:border-neutral-500"
+                  className="w-28 bg-surface border border-border-base rounded px-2 py-1 text-xs text-text-base outline-none focus:border-border-hi"
                 />
               </td>
               <td className="px-4 py-2 text-right">
@@ -108,15 +108,15 @@ export function ModelPricingTable({ pricing, onChange }: Props) {
             </tr>
           ))}
           {/* Add row */}
-          <tr className="bg-neutral-950">
+          <tr className="bg-surface">
             <td className="px-4 py-2">
               <input
                 type="text"
                 value={newId}
                 onChange={(e) => setNewId(e.target.value)}
                 placeholder="claude-haiku-3-5"
                 data-testid="pricing-new-id"
-                className="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-xs outline-none focus:border-neutral-500"
+                className="w-full bg-panel border border-border-base rounded px-2 py-1 text-xs text-text-base placeholder:text-text-4 outline-none focus:border-border-hi"
               />
             </td>
             <td className="px-4 py-2">
@@ -127,7 +127,7 @@ export function ModelPricingTable({ pricing, onChange }: Props) {
                 onChange={(e) => setNewInput(e.target.value)}
                 placeholder="0.80"
                 data-testid="pricing-new-input"
-                className="w-28 bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-xs outline-none focus:border-neutral-500"
+                className="w-28 bg-panel border border-border-base rounded px-2 py-1 text-xs text-text-base placeholder:text-text-4 outline-none focus:border-border-hi"
               />
             </td>
             <td className="px-4 py-2">
@@ -138,7 +138,7 @@ export function ModelPricingTable({ pricing, onChange }: Props) {
                 onChange={(e) => setNewOutput(e.target.value)}
                 placeholder="4.00"
                 data-testid="pricing-new-output"
-                className="w-28 bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-xs outline-none focus:border-neutral-500"
+                className="w-28 bg-panel border border-border-base rounded px-2 py-1 text-xs text-text-base placeholder:text-text-4 outline-none focus:border-border-hi"
               />
             </td>
             <td className="px-4 py-2 text-right">
@@ -147,7 +147,7 @@ export function ModelPricingTable({ pricing, onChange }: Props) {
                 onClick={addRow}
                 disabled={!newId.trim()}
                 data-testid="pricing-add"
-                className="text-xs text-blue-400 hover:text-blue-300 disabled:opacity-40 disabled:cursor-not-allowed"
+                className="text-xs text-coral hover:text-coral-2 disabled:opacity-40 disabled:cursor-not-allowed"
               >
                 + Add row
               </button>

frontend/src/components/agents-settings/PerAgentOverrideTable.tsx

@@ -32,11 +32,11 @@ export function PerAgentOverrideTable({ agents, defaultModel, onChange }: Props)
   return (
     <div
       data-testid="per-agent-table"
-      className="bg-neutral-900 border border-neutral-800 rounded-lg overflow-hidden"
+      className="bg-panel border border-border-base rounded-lg overflow-hidden"
     >
       <table className="w-full text-sm">
         <thead>
-          <tr className="text-xs text-neutral-500 border-b border-neutral-800">
+          <tr className="text-xs text-text-3 border-b border-border-base">
             <th className="text-left px-4 py-2 font-medium">Agent</th>
             <th className="text-left px-4 py-2 font-medium">Model</th>
             <th className="text-left px-4 py-2 font-medium">Turn limit</th>
@@ -51,9 +51,9 @@ export function PerAgentOverrideTable({ agents, defaultModel, onChange }: Props)
               <tr
                 key={agentId}
                 data-testid={`agent-row-${agentId}`}
-                className="border-b border-neutral-800 last:border-0"
+                className="border-b border-border-base last:border-0"
               >
-                <td className="px-4 py-2 text-xs text-neutral-300 font-mono">
+                <td className="px-4 py-2 text-xs text-text-2 font-mono">
                   {agentId}
                 </td>
                 <td className="px-4 py-2">
@@ -69,7 +69,7 @@ export function PerAgentOverrideTable({ agents, defaultModel, onChange }: Props)
                       )
                     }
                     data-testid={`agent-${agentId}-model`}
-                    className="w-full bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-xs outline-none focus:border-neutral-500"
+                    className="w-full bg-surface border border-border-base rounded px-2 py-1 text-xs text-text-base placeholder:text-text-4 outline-none focus:border-border-hi"
                   />
                 </td>
                 <td className="px-4 py-2">
@@ -86,7 +86,7 @@ export function PerAgentOverrideTable({ agents, defaultModel, onChange }: Props)
                       )
                     }
                     data-testid={`agent-${agentId}-turn_limit`}
-                    className="w-20 bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-xs outline-none focus:border-neutral-500"
+                    className="w-20 bg-surface border border-border-base rounded px-2 py-1 text-xs text-text-base placeholder:text-text-4 outline-none focus:border-border-hi"
                   />
                 </td>
                 <td className="px-4 py-2">
@@ -103,7 +103,7 @@ export function PerAgentOverrideTable({ agents, defaultModel, onChange }: Props)
                       )
                     }
                     data-testid={`agent-${agentId}-budget_usd`}
-                    className="w-24 bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-xs outline-none focus:border-neutral-500"
+                    className="w-24 bg-surface border border-border-base rounded px-2 py-1 text-xs text-text-base placeholder:text-text-4 outline-none focus:border-border-hi"
                   />
                 </td>
                 <td className="px-4 py-2">
@@ -117,7 +117,7 @@ export function PerAgentOverrideTable({ agents, defaultModel, onChange }: Props)
                       )
                     }
                     data-testid={`agent-${agentId}-budget_scope`}
-                    className="bg-neutral-800 border border-neutral-700 rounded px-2 py-1 text-xs outline-none focus:border-neutral-500"
+                    className="bg-surface border border-border-base rounded px-2 py-1 text-xs text-text-base outline-none focus:border-border-hi"
                   >
                     <option value="">—</option>
                     <option value="per_session">per_session</option>