apteva 0.4.41 → 0.4.44

package/src/web/components/tests/TestsPage.tsx

@@ -271,7 +271,7 @@ export function TestsPage() {
       running: "bg-blue-900/50 text-blue-400",
     };
     return (
-      <span className={`px-2 py-0.5 rounded text-xs font-medium ${colors[status] || "bg-[#222] text-[#666]"}`}>
+      <span className={`px-2 py-0.5 rounded text-xs font-medium ${colors[status] || "bg-[var(--color-surface-raised)] text-[var(--color-text-muted)]"}`}>
         {status.toUpperCase()}
       </span>
     );
@@ -297,7 +297,7 @@ export function TestsPage() {
       <div className="flex items-center justify-between mb-6">
         <div>
           <h1 className="text-xl font-bold">Tests</h1>
-          <p className="text-sm text-[#666] mt-1">
+          <p className="text-sm text-[var(--color-text-muted)] mt-1">
             Describe behavior, AI handles the rest
           </p>
         </div>
@@ -306,14 +306,14 @@ export function TestsPage() {
             <button
               onClick={handleRunAll}
               disabled={runningAll}
-              className="px-4 py-2 bg-[#1a1a1a] hover:bg-[#222] text-[#e0e0e0] rounded text-sm font-medium transition disabled:opacity-50"
+              className="px-4 py-2 bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] text-[var(--color-text)] rounded text-sm font-medium transition disabled:opacity-50"
             >
               {runningAll ? "Running..." : "Run All"}
             </button>
           )}
           <button
             onClick={openCreate}
-            className="px-4 py-2 bg-[#f97316] hover:bg-[#fb923c] text-white rounded text-sm font-medium transition"
+            className="px-4 py-2 bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-white rounded text-sm font-medium transition"
           >
             + New Test
           </button>
@@ -322,19 +322,19 @@ export function TestsPage() {
 
       {/* Test list */}
       {loading ? (
-        <div className="text-[#666] text-sm">Loading...</div>
+        <div className="text-[var(--color-text-muted)] text-sm">Loading...</div>
       ) : tests.length === 0 ? (
         <div className="text-center py-16">
-          <div className="text-[#333] text-4xl mb-4">
+          <div className="text-[var(--color-border-light)] text-4xl mb-4">
             <svg className="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
             </svg>
           </div>
-          <p className="text-[#666] mb-2">No tests yet</p>
-          <p className="text-xs text-[#555] mb-4">Describe what your agents should do and let AI verify it</p>
+          <p className="text-[var(--color-text-muted)] mb-2">No tests yet</p>
+          <p className="text-xs text-[var(--color-text-faint)] mb-4">Describe what your agents should do and let AI verify it</p>
           <button
             onClick={openCreate}
-            className="px-4 py-2 bg-[#f97316] hover:bg-[#fb923c] text-white rounded text-sm font-medium transition"
+            className="px-4 py-2 bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] text-white rounded text-sm font-medium transition"
           >
             Create your first test
           </button>
@@ -342,7 +342,7 @@ export function TestsPage() {
       ) : (
         <div className="space-y-3">
           {tests.map(tc => (
-            <div key={tc.id} className="bg-[#111] border border-[#1a1a1a] rounded-lg p-4">
+            <div key={tc.id} className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg p-4">
               <div className="flex items-start justify-between">
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2 mb-1">
@@ -352,18 +352,18 @@ export function TestsPage() {
                       : tc.last_run && (<>
                           {statusBadge(tc.last_run.status)}
                           {tc.last_run.score != null && (
-                            <span className="text-xs text-[#888] font-mono">{tc.last_run.score}/10</span>
+                            <span className="text-xs text-[var(--color-text-secondary)] font-mono">{tc.last_run.score}/10</span>
                           )}
                         </>)
                     }
                   </div>
                   {tc.behavior && (
-                    <p className="text-xs text-[#888] mb-1.5 line-clamp-2">{tc.behavior}</p>
+                    <p className="text-xs text-[var(--color-text-secondary)] mb-1.5 line-clamp-2">{tc.behavior}</p>
                   )}
-                  <div className="text-xs text-[#666] space-y-0.5">
+                  <div className="text-xs text-[var(--color-text-muted)] space-y-0.5">
                     <div>
                       Agent:{" "}
-                      <span className="text-[#888]">
+                      <span className="text-[var(--color-text-secondary)]">
                         {tc.agent_name || (tc.last_run?.selected_agent_name
                           ? `${tc.last_run.selected_agent_name} (auto-selected)`
                           : "Auto (AI picks)")}
@@ -371,18 +371,18 @@ export function TestsPage() {
                     </div>
                     {tc.last_run?.generated_message && (
                       <div className="truncate">
-                        Message: <span className="text-[#888]">"{tc.last_run.generated_message}"</span>
+                        Message: <span className="text-[var(--color-text-secondary)]">"{tc.last_run.generated_message}"</span>
                       </div>
                     )}
                     {tc.input_message && !tc.last_run?.generated_message && (
                       <div className="truncate">
-                        Message: <span className="text-[#888]">"{tc.input_message}"</span>
+                        Message: <span className="text-[var(--color-text-secondary)]">"{tc.input_message}"</span>
                       </div>
                     )}
                     {tc.last_run && (
                       <div>
                         Last run:{" "}
-                        <span className="text-[#888]">
+                        <span className="text-[var(--color-text-secondary)]">
                           {tc.last_run.duration_ms ? `${(tc.last_run.duration_ms / 1000).toFixed(1)}s` : "---"}
                           {tc.last_run.judge_reasoning && ` --- "${tc.last_run.judge_reasoning.slice(0, 80)}${tc.last_run.judge_reasoning.length > 80 ? "..." : ""}"`}
                         </span>
@@ -393,7 +393,7 @@ export function TestsPage() {
                 <div className="flex items-center gap-1 ml-3 shrink-0">
                   <button
                     onClick={() => viewRuns(tc.id)}
-                    className="px-2 py-1 text-xs text-[#666] hover:text-[#888] hover:bg-[#1a1a1a] rounded transition"
+                    className="px-2 py-1 text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)] rounded transition"
                     title="View run history"
                   >
                     History
@@ -401,19 +401,19 @@ export function TestsPage() {
                   <button
                     onClick={() => handleRun(tc.id)}
                     disabled={runningTests.has(tc.id)}
-                    className="px-3 py-1 text-xs bg-[#1a1a1a] hover:bg-[#222] text-[#e0e0e0] rounded transition disabled:opacity-50"
+                    className="px-3 py-1 text-xs bg-[var(--color-surface-raised)] hover:bg-[var(--color-surface-raised)] text-[var(--color-text)] rounded transition disabled:opacity-50"
                   >
                     {runningTests.has(tc.id) ? "Running..." : "Run"}
                   </button>
                   <button
                     onClick={() => openEdit(tc)}
-                    className="px-2 py-1 text-xs text-[#666] hover:text-[#888] hover:bg-[#1a1a1a] rounded transition"
+                    className="px-2 py-1 text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-raised)] rounded transition"
                   >
                     Edit
                   </button>
                   <button
                     onClick={() => handleDelete(tc.id)}
-                    className="px-2 py-1 text-xs text-[#666] hover:text-red-400 hover:bg-[#1a1a1a] rounded transition"
+                    className="px-2 py-1 text-xs text-[var(--color-text-muted)] hover:text-red-400 hover:bg-[var(--color-surface-raised)] rounded transition"
                   >
                     Delete
                   </button>
@@ -428,50 +428,50 @@ export function TestsPage() {
       {selectedRuns && (
         <div className="mt-6">
           <div className="flex items-center justify-between mb-3">
-            <h2 className="text-sm font-bold text-[#888]">Run History</h2>
+            <h2 className="text-sm font-bold text-[var(--color-text-secondary)]">Run History</h2>
             <button
               onClick={() => { setSelectedRuns(null); setExpandedRun(null); }}
-              className="text-xs text-[#666] hover:text-[#888]"
+              className="text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text-secondary)]"
             >
               Close
             </button>
           </div>
           {selectedRuns.runs.length === 0 ? (
-            <p className="text-sm text-[#666]">No runs yet</p>
+            <p className="text-sm text-[var(--color-text-muted)]">No runs yet</p>
           ) : (
             <div className="space-y-2">
               {selectedRuns.runs.map(run => (
-                <div key={run.id} className="bg-[#0d0d0d] border border-[#1a1a1a] rounded p-3">
+                <div key={run.id} className="bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded p-3">
                   <div
                     className="flex items-center justify-between cursor-pointer"
                     onClick={() => setExpandedRun(expandedRun === run.id ? null : run.id)}
                   >
                     <div className="flex items-center gap-3">
                       {statusBadge(run.status)}
-                      <span className="text-xs text-[#666]">
+                      <span className="text-xs text-[var(--color-text-muted)]">
                         {run.duration_ms ? `${(run.duration_ms / 1000).toFixed(1)}s` : "---"}
                       </span>
                       {run.score != null && (
-                        <span className="text-xs text-[#888] font-mono">{run.score}/10</span>
+                        <span className="text-xs text-[var(--color-text-secondary)] font-mono">{run.score}/10</span>
                       )}
                       {run.selected_agent_name && (
-                        <span className="text-xs text-[#555]">
+                        <span className="text-xs text-[var(--color-text-faint)]">
                           Agent: {run.selected_agent_name}
                         </span>
                       )}
-                      <span className="text-xs text-[#555]">
+                      <span className="text-xs text-[var(--color-text-faint)]">
                         {new Date(run.created_at).toLocaleString()}
                       </span>
                     </div>
-                    <span className="text-xs text-[#555]">{expandedRun === run.id ? "---" : "+"}</span>
+                    <span className="text-xs text-[var(--color-text-faint)]">{expandedRun === run.id ? "---" : "+"}</span>
                   </div>
                   {expandedRun === run.id && (
                     <div className="mt-3 space-y-2">
                       {run.planner_reasoning && (
                         <div>
-                          <div className="text-xs text-[#666] mb-1">Planner:</div>
-                          <div className="text-sm text-[#aaa] bg-[#0a0a0a] p-2 rounded">
-                            {run.selected_agent_name && <span className="text-[#f97316]">{run.selected_agent_name}</span>}
+                          <div className="text-xs text-[var(--color-text-muted)] mb-1">Planner:</div>
+                          <div className="text-sm text-[var(--color-text-secondary)] bg-[var(--color-bg)] p-2 rounded">
+                            {run.selected_agent_name && <span className="text-[var(--color-accent)]">{run.selected_agent_name}</span>}
                             {run.selected_agent_name && " --- "}
                             {run.planner_reasoning}
                           </div>
@@ -479,26 +479,26 @@ export function TestsPage() {
                       )}
                       {run.generated_message && (
                         <div>
-                          <div className="text-xs text-[#666] mb-1">Generated Message:</div>
-                          <div className="text-sm text-[#aaa] bg-[#0a0a0a] p-2 rounded">"{run.generated_message}"</div>
+                          <div className="text-xs text-[var(--color-text-muted)] mb-1">Generated Message:</div>
+                          <div className="text-sm text-[var(--color-text-secondary)] bg-[var(--color-bg)] p-2 rounded">"{run.generated_message}"</div>
                         </div>
                       )}
                       {run.judge_reasoning && (
                         <div>
-                          <div className="text-xs text-[#666] mb-1">Judge:</div>
-                          <div className="text-sm text-[#aaa] bg-[#0a0a0a] p-2 rounded">{run.judge_reasoning}</div>
+                          <div className="text-xs text-[var(--color-text-muted)] mb-1">Judge:</div>
+                          <div className="text-sm text-[var(--color-text-secondary)] bg-[var(--color-bg)] p-2 rounded">{run.judge_reasoning}</div>
                         </div>
                       )}
                       {run.error && (
                         <div>
                           <div className="text-xs text-red-400 mb-1">Error:</div>
-                          <div className="text-sm text-red-300 bg-[#0a0a0a] p-2 rounded">{run.error}</div>
+                          <div className="text-sm text-red-300 bg-[var(--color-bg)] p-2 rounded">{run.error}</div>
                         </div>
                       )}
                       {run.agent_response && (
                         <div>
-                          <div className="text-xs text-[#666] mb-1">Agent Response (Thread):</div>
-                          <pre className="text-xs text-[#888] bg-[#0a0a0a] p-2 rounded overflow-auto max-h-64">
+                          <div className="text-xs text-[var(--color-text-muted)] mb-1">Agent Response (Thread):</div>
+                          <pre className="text-xs text-[var(--color-text-secondary)] bg-[var(--color-bg)] p-2 rounded overflow-auto max-h-64">
                             {run.agent_response}
                           </pre>
                         </div>
@@ -515,34 +515,34 @@ export function TestsPage() {
       {/* Create/Edit Form Modal */}
       {showForm && (
         <div className="fixed inset-0 bg-black/60 z-50 flex items-center justify-center" onClick={() => setShowForm(false)}>
-          <div className="bg-[#111] border border-[#1a1a1a] rounded-lg w-full max-w-lg mx-4 p-6" onClick={e => e.stopPropagation()}>
+          <div className="bg-[var(--color-surface)] border border-[var(--color-border)] rounded-lg w-full max-w-lg mx-4 p-6" onClick={e => e.stopPropagation()}>
             <h2 className="text-lg font-bold mb-4">{editingTest ? "Edit Test" : "New Test"}</h2>
 
             <div className="space-y-4">
               <div>
-                <label className="block text-xs text-[#666] mb-1">Name</label>
+                <label className="block text-xs text-[var(--color-text-muted)] mb-1">Name</label>
                 <input
                   value={formName}
                   onChange={e => setFormName(e.target.value)}
                   placeholder="e.g. Social Media Posting"
-                  className="w-full bg-[#0a0a0a] border border-[#222] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#f97316]"
+                  className="w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded px-3 py-2 text-sm focus:outline-none focus:border-[var(--color-accent)]"
                 />
               </div>
 
               <div>
-                <label className="block text-xs text-[#666] mb-1">Behavior</label>
+                <label className="block text-xs text-[var(--color-text-muted)] mb-1">Behavior</label>
                 <textarea
                   value={formBehavior}
                   onChange={e => setFormBehavior(e.target.value)}
                   placeholder="Describe what should happen, e.g. 'When asked to post on social media, the agent creates a proper post with relevant hashtags and confirms it was published'"
                   rows={3}
-                  className="w-full bg-[#0a0a0a] border border-[#222] rounded px-3 py-2 text-sm focus:outline-none focus:border-[#f97316] resize-none"
+                  className="w-full bg-[var(--color-bg)] border border-[var(--color-border-light)] rounded px-3 py-2 text-sm focus:outline-none focus:border-[var(--color-accent)] resize-none"
                 />
-                <p className="text-xs text-[#555] mt-1">AI will generate the test message and evaluate results based on this</p>
+                <p className="text-xs text-[var(--color-text-faint)] mt-1">AI will generate the test message and evaluate results based on this</p>
               </div>
 
               <div>
-                <label className="block text-xs text-[#666] mb-1">Agent</label>
+                <label className="block text-xs text-[var(--color-text-muted)] mb-1">Agent</label>
                 <Select
                   value={formAgentId}
                   onChange={setFormAgentId}
@@ -552,21 +552,21 @@ export function TestsPage() {
                     label: `${a.name} (${a.status})`,
                   }))}
                 />
-                <p className="text-xs text-[#555] mt-1">Leave empty to let AI choose the right agent</p>
+                <p className="text-xs text-[var(--color-text-faint)] mt-1">Leave empty to let AI choose the right agent</p>
               </div>
             </div>
 
             <div className="flex justify-end gap-2 mt-6">
               <button
                 onClick={() => setShowForm(false)}
-                className="px-4 py-2 text-sm text-[#888] hover:text-[#e0e0e0] transition"
+                className="px-4 py-2 text-sm text-[var(--color-text-secondary)] hover:text-[var(--color-text)] transition"
               >
                 Cancel
               </button>
               <button
                 onClick={handleSave}
                 disabled={!formName || !formBehavior}
-                className="px-4 py-2 bg-[#f97316] hover:bg-[#fb923c] disabled:opacity-50 text-white rounded text-sm font-medium transition"
+                className="px-4 py-2 bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] disabled:opacity-50 text-white rounded text-sm font-medium transition"
               >
                 {editingTest ? "Save" : "Create"}
               </button>

package/src/web/components/threads/ThreadsPage.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback, useMemo } from "react";
 import { Chat, convertApiMessages } from "@apteva/apteva-kit";
-import { useAgentActivity, useAuth, useProjects, useTelemetryContext } from "../../context";
+import { useAgentActivity, useAuth, useProjects, useTelemetryContext, useTheme } from "../../context";
 import type { TelemetryEvent } from "../../context";
 import type { Agent, Route } from "../../types";
 
@@ -20,6 +20,7 @@ interface ThreadsPageProps {
 }
 
 export function ThreadsPage({ agents, onNavigate }: ThreadsPageProps) {
+  const { theme } = useTheme();
   const { authFetch } = useAuth();
   const { currentProjectId } = useProjects();
   const { events: realtimeEvents, statusChangeCounter } = useTelemetryContext();
@@ -146,7 +147,7 @@ export function ThreadsPage({ agents, onNavigate }: ThreadsPageProps) {
       <div className="px-6 pt-6 pb-4 shrink-0">
         <div className="flex items-center justify-between">
           <h1 className="text-xl font-semibold">Threads</h1>
-          <span className="text-sm text-[#666]">
+          <span className="text-sm text-[var(--color-text-muted)]">
             {threads.length} threads from {runningCount} running agents
           </span>
         </div>
@@ -162,7 +163,7 @@ export function ThreadsPage({ agents, onNavigate }: ThreadsPageProps) {
               <button
                 onClick={() => setShowAgentPicker(!showAgentPicker)}
                 disabled={runningAgents.length === 0}
-                className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-[#f97316]/10 text-[#f97316] text-sm font-medium hover:bg-[#f97316]/20 transition disabled:opacity-30 disabled:cursor-not-allowed"
+                className="w-full flex items-center justify-center gap-2 px-3 py-2 rounded-lg bg-[var(--color-accent-10)] text-[var(--color-accent)] text-sm font-medium hover:bg-[var(--color-accent-20)] transition disabled:opacity-30 disabled:cursor-not-allowed"
               >
                 <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
@@ -174,15 +175,15 @@ export function ThreadsPage({ agents, onNavigate }: ThreadsPageProps) {
               {showAgentPicker && (
                 <>
                   <div className="fixed inset-0 z-40" onClick={() => setShowAgentPicker(false)} />
-                  <div className="absolute top-full left-0 right-0 mt-1 bg-[#111] border border-[#222] rounded-lg shadow-xl z-50 max-h-60 overflow-auto">
+                  <div className="absolute top-full left-0 right-0 mt-1 bg-[var(--color-surface)] border border-[var(--color-border-light)] rounded-lg shadow-xl z-50 max-h-60 overflow-auto">
                     {runningAgents.map(agent => (
                       <button
                         key={agent.id}
                         onClick={() => startNewChat(agent)}
-                        className="w-full text-left px-3 py-2.5 hover:bg-[#1a1a1a] transition"
+                        className="w-full text-left px-3 py-2.5 hover:bg-[var(--color-surface-raised)] transition"
                       >
                         <p className="text-sm font-medium truncate">{agent.name}</p>
-                        <p className="text-[10px] text-[#555]">{agent.provider} · {agent.model}</p>
+                        <p className="text-[10px] text-[var(--color-text-faint)]">{agent.provider} · {agent.model}</p>
                       </button>
                     ))}
                   </div>
@@ -193,11 +194,11 @@ export function ThreadsPage({ agents, onNavigate }: ThreadsPageProps) {
 
           <div className="flex-1 overflow-auto px-2 pb-2">
             {loadingThreads ? (
-              <div className="p-6 text-center text-[#555] text-sm">Loading threads...</div>
+              <div className="p-6 text-center text-[var(--color-text-faint)] text-sm">Loading threads...</div>
             ) : threads.length === 0 ? (
-              <div className="p-6 text-center text-[#555] text-sm">
+              <div className="p-6 text-center text-[var(--color-text-faint)] text-sm">
                 <p>No threads yet</p>
-                <p className="mt-1 text-[#444]">Start a conversation or wait for agents</p>
+                <p className="mt-1 text-[var(--color-text-faint)]">Start a conversation or wait for agents</p>
               </div>
             ) : (
               <div className="space-y-0.5">
@@ -219,7 +220,7 @@ export function ThreadsPage({ agents, onNavigate }: ThreadsPageProps) {
         <div className="flex-1 flex flex-col min-h-0 overflow-hidden">
           {chatAgentId && chatKey ? (
             loadingMessages ? (
-              <div className="flex-1 flex items-center justify-center text-[#666]">Loading messages...</div>
+              <div className="flex-1 flex items-center justify-center text-[var(--color-text-muted)]">Loading messages...</div>
             ) : (
               <Chat
                 key={chatKey}
@@ -230,17 +231,18 @@ export function ThreadsPage({ agents, onNavigate }: ThreadsPageProps) {
                 placeholder={`Message ${chatAgentName}...`}
                 headerTitle={chatAgentName}
                 variant="terminal"
+                theme={theme.id as "light" | "dark"}
                 showHeader={true}
               />
             )
           ) : (
             <div className="flex-1 flex items-center justify-center">
-              <div className="text-center text-[#555]">
-                <svg className="w-12 h-12 mx-auto mb-3 text-[#333]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <div className="text-center text-[var(--color-text-faint)]">
+                <svg className="w-12 h-12 mx-auto mb-3 text-[var(--color-border-light)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                 </svg>
                 <p className="text-sm">Select a thread or start a new conversation</p>
-                <p className="text-xs text-[#444] mt-1">Chat with any running agent</p>
+                <p className="text-xs text-[var(--color-text-faint)] mt-1">Chat with any running agent</p>
               </div>
             </div>
           )}
@@ -267,32 +269,32 @@ function ThreadRow({ thread, selected, activities, onSelect }: {
       onClick={onSelect}
       className={`w-full text-left px-3 py-2.5 rounded-lg transition ${
         selected
-          ? "bg-[#f97316]/10"
-          : "hover:bg-[#151515]"
+          ? "bg-[var(--color-accent-10)]"
+          : "hover:bg-[var(--color-bg-secondary)]"
       }`}
     >
       <div className="flex items-center justify-between gap-2 mb-1">
         <span className="text-sm font-medium truncate">
           {thread.title || `Thread ${thread.id.slice(0, 8)}`}
         </span>
-        <span className="text-[10px] text-[#555] shrink-0">{timeAgo(thread.updated_at)}</span>
+        <span className="text-[10px] text-[var(--color-text-faint)] shrink-0">{timeAgo(thread.updated_at)}</span>
       </div>
       <div className="flex items-center gap-1.5">
         <span
           className={`w-1.5 h-1.5 rounded-full shrink-0 ${
-            isActive ? "bg-green-400 animate-pulse" : "bg-[#444]"
+            isActive ? "bg-green-400 animate-pulse" : "bg-[var(--color-scrollbar)]"
           }`}
         />
-        <span className="text-[11px] text-[#f97316]">{thread.agent_name}</span>
+        <span className="text-[11px] text-[var(--color-accent)]">{thread.agent_name}</span>
         {thread.message_count != null && (
           <>
-            <span className="text-[#333]">&middot;</span>
-            <span className="text-[10px] text-[#555]">{thread.message_count} msgs</span>
+            <span className="text-[var(--color-border-light)]">&middot;</span>
+            <span className="text-[10px] text-[var(--color-text-faint)]">{thread.message_count} msgs</span>
           </>
         )}
       </div>
       {activityText && (
-        <p className="text-[11px] text-[#555] truncate mt-1">{activityText}</p>
+        <p className="text-[11px] text-[var(--color-text-faint)] truncate mt-1">{activityText}</p>
       )}
     </button>
   );

package/src/web/context/ProjectContext.tsx

@@ -20,6 +20,7 @@ interface ProjectContextValue {
   unassignedCount: number;
   projectsEnabled: boolean; // Feature flag
   metaAgentEnabled: boolean; // Feature flag
+  costTrackingEnabled: boolean; // Feature flag
   setCurrentProjectId: (id: string | null) => void;
   createProject: (data: { name: string; description?: string; color?: string }) => Promise<Project | null>;
   updateProject: (id: string, data: { name?: string; description?: string; color?: string }) => Promise<Project | null>;
@@ -58,6 +59,7 @@ export function ProjectProvider({ children }: ProjectProviderProps) {
   const [unassignedCount, setUnassignedCount] = useState(0);
   const [projectsEnabled, setProjectsEnabled] = useState(false);
   const [metaAgentEnabled, setMetaAgentEnabled] = useState(false);
+  const [costTrackingEnabled, setCostTrackingEnabled] = useState(true);
 
   // Fetch feature flags on mount
   useEffect(() => {
@@ -66,10 +68,12 @@ export function ProjectProvider({ children }: ProjectProviderProps) {
       .then(data => {
         setProjectsEnabled(data.projects === true);
         setMetaAgentEnabled(data.metaAgent === true);
+        setCostTrackingEnabled(data.costTracking !== false);
       })
       .catch(() => {
         setProjectsEnabled(false);
         setMetaAgentEnabled(false);
+        setCostTrackingEnabled(true);
       });
   }, []);
 
@@ -198,12 +202,13 @@ export function ProjectProvider({ children }: ProjectProviderProps) {
     unassignedCount,
     projectsEnabled,
     metaAgentEnabled,
+    costTrackingEnabled,
     setCurrentProjectId,
     createProject,
     updateProject,
     deleteProject,
     refreshProjects,
-  }), [projects, currentProjectId, currentProject, isLoading, error, unassignedCount, projectsEnabled, metaAgentEnabled, setCurrentProjectId, createProject, updateProject, deleteProject, refreshProjects]);
+  }), [projects, currentProjectId, currentProject, isLoading, error, unassignedCount, projectsEnabled, metaAgentEnabled, costTrackingEnabled, setCurrentProjectId, createProject, updateProject, deleteProject, refreshProjects]);
 
   return <ProjectContext.Provider value={value}>{children}</ProjectContext.Provider>;
 }

package/src/web/context/ThemeContext.tsx

@@ -0,0 +1,69 @@
+import React, { createContext, useContext, useState, useEffect, useCallback, useMemo, type ReactNode } from "react";
+import { themes, resolveTheme, type ThemeMode, type Theme } from "../themes";
+
+interface ThemeContextValue {
+  mode: ThemeMode;
+  theme: Theme; // resolved theme
+  setMode: (mode: ThemeMode) => void;
+}
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+
+export function useTheme(): ThemeContextValue {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+const STORAGE_KEY = "apteva_theme_mode";
+
+function getSystemPrefersDark(): boolean {
+  if (typeof window === "undefined") return true;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+}
+
+function applyTheme(theme: Theme) {
+  const root = document.documentElement;
+  for (const [key, value] of Object.entries(theme.colors)) {
+    root.style.setProperty(key, value);
+  }
+  root.setAttribute("data-theme", theme.id);
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [mode, setModeState] = useState<ThemeMode>(() => {
+    if (typeof window !== "undefined") {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored === "dark" || stored === "light" || stored === "auto") return stored;
+    }
+    return "auto";
+  });
+
+  const [prefersDark, setPrefersDark] = useState(getSystemPrefersDark);
+
+  // Listen for system theme changes
+  useEffect(() => {
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = (e: MediaQueryListEvent) => setPrefersDark(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+
+  const theme = useMemo(() => resolveTheme(mode, prefersDark), [mode, prefersDark]);
+
+  // Apply CSS variables whenever theme changes
+  useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+
+  const setMode = useCallback((newMode: ThemeMode) => {
+    setModeState(newMode);
+    localStorage.setItem(STORAGE_KEY, newMode);
+  }, []);
+
+  const value = useMemo(() => ({ mode, theme, setMode }), [mode, theme, setMode]);
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}

package/src/web/context/index.ts

@@ -5,3 +5,5 @@ export { AuthProvider, useAuth, useAuthHeaders } from "./AuthContext";
 
 export { ProjectProvider, useProjects } from "./ProjectContext";
 export type { Project } from "./ProjectContext";
+
+export { ThemeProvider, useTheme } from "./ThemeContext";

package/src/web/styles.css

@@ -3,7 +3,8 @@
 @tailwind utilities;
 
 html, body {
-  background-color: #0a0a0a;
+  background-color: var(--color-bg, #0a0a0a);
+  color: var(--color-text, #e0e0e0);
   min-height: 100%;
   margin: 0;
   -webkit-font-smoothing: antialiased;
@@ -20,8 +21,8 @@ html, body {
 }
 
 ::selection {
-  background-color: #f97316;
-  color: #0a0a0a;
+  background-color: var(--color-selection-bg, #f97316);
+  color: var(--color-selection-text, #0a0a0a);
 }
 
 .line-clamp-2 {
@@ -67,3 +68,4 @@ html, body {
   animation: slideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1), highlightFade 2s 0.5s ease-out;
   overflow: hidden;
 }
+