fix: use theme-aware bg-surface instead of hardcoded bg-white

- Replace bg-white with bg-surface for proper light/dark mode support
- bg-surface maps to white in light mode, dark gray in dark mode
- Fixes broken dark mode appearance from previous commit

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/app/dashboard/agents/[id]/chat/[chatId]/page.tsx

@@ -623,7 +623,7 @@ export default function AgentChatPage(): React.ReactElement {
                 onKeyDown={handleKeyDown}
                 placeholder="Type a message..."
                 rows={1}
-                className="flex-1 px-4 py-3 bg-white border border-border rounded-lg text-foreground placeholder:text-foreground-tertiary focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none min-h-[48px] max-h-[200px]"
+                className="flex-1 px-4 py-3 bg-surface border border-border rounded-lg text-foreground placeholder:text-foreground-tertiary focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none min-h-[48px] max-h-[200px]"
                 style={{
                   height: 'auto',
                   minHeight: '48px',

apps/web/src/app/dashboard/agents/[id]/page.tsx

@@ -211,7 +211,7 @@ conv = resp.json()  # conv['data']['messages']`,
   const currentExample = examples[effectiveLang] ?? examples.curl ?? { language: 'bash', code: '' };
 
   return (
-    <div className="bg-white border border-border rounded-lg overflow-hidden mb-8">
+    <div className="bg-surface border border-border rounded-lg overflow-hidden mb-8">
       <div className="flex items-center justify-between p-4 border-b border-border">
         <h2 className="text-lg font-medium text-foreground">API Reference</h2>
         <code className="text-xs text-foreground-secondary font-mono bg-surface px-2 py-1 rounded">
@@ -674,7 +674,7 @@ export default function AgentDetailPage(): React.ReactElement {
       }
     >
       {/* Configuration */}
-      <div className="bg-white border border-border rounded-lg p-6 mb-8">
+      <div className="bg-surface border border-border rounded-lg p-6 mb-8">
         <div className="flex items-center justify-between mb-4">
           <h2 className="text-lg font-medium text-foreground">Configuration</h2>
           {!isEditing && (
@@ -698,7 +698,7 @@ export default function AgentDetailPage(): React.ReactElement {
                   name="name"
                   value={formData.name}
                   onChange={handleChange}
-                  className="w-full px-3 py-2 bg-white border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                 />
               </div>
               <div>
@@ -711,7 +711,7 @@ export default function AgentDetailPage(): React.ReactElement {
                   name="uid"
                   value={formData.uid}
                   onChange={handleChange}
-                  className="w-full px-3 py-2 bg-white border border-border rounded-lg text-foreground font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                 />
               </div>
             </div>
@@ -729,7 +729,7 @@ export default function AgentDetailPage(): React.ReactElement {
                 value={formData.description}
                 onChange={handleChange}
                 rows={2}
-                className="w-full px-3 py-2 bg-white border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none"
+                className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none"
               />
             </div>
 
@@ -746,7 +746,7 @@ export default function AgentDetailPage(): React.ReactElement {
                   name="provider"
                   value={formData.provider}
                   onChange={handleChange}
-                  className="w-full px-3 py-2 bg-white border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                 >
                   {SUPPORTED_PROVIDERS.map((p) => (
                     <option key={p} value={p}>
@@ -764,7 +764,7 @@ export default function AgentDetailPage(): React.ReactElement {
                   name="modelId"
                   value={formData.modelId}
                   onChange={handleChange}
-                  className="w-full px-3 py-2 bg-white border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                 >
                   {models.map((m) => (
                     <option key={m.id} value={m.id}>
@@ -788,7 +788,7 @@ export default function AgentDetailPage(): React.ReactElement {
                 value={formData.systemPrompt}
                 onChange={handleChange}
                 rows={6}
-                className="w-full px-3 py-2 bg-white border border-border rounded-lg text-foreground font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none"
+                className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground font-mono text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none"
               />
             </div>
 
@@ -809,7 +809,7 @@ export default function AgentDetailPage(): React.ReactElement {
                   min={0}
                   max={2}
                   step={0.1}
-                  className="w-full px-3 py-2 bg-white border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                 />
               </div>
               <div>
@@ -827,7 +827,7 @@ export default function AgentDetailPage(): React.ReactElement {
                   onChange={handleChange}
                   min={1}
                   max={100}
-                  className="w-full px-3 py-2 bg-white border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                 />
               </div>
               <div>
@@ -845,7 +845,7 @@ export default function AgentDetailPage(): React.ReactElement {
                   onChange={handleChange}
                   min={1}
                   max={100}
-                  className="w-full px-3 py-2 bg-white border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                 />
               </div>
             </div>
@@ -932,7 +932,7 @@ export default function AgentDetailPage(): React.ReactElement {
       <ApiDocsSection agent={agent} agentTools={agentTools} />
 
       {/* Tools Section */}
-      <div className="bg-white border border-border rounded-lg overflow-hidden mb-8">
+      <div className="bg-surface border border-border rounded-lg overflow-hidden mb-8">
         <div className="flex items-center justify-between p-4 border-b border-border">
           <h2 className="text-lg font-medium text-foreground">Tools</h2>
           <span className="text-sm text-foreground-tertiary">{agentTools.length} attached</span>
@@ -966,7 +966,7 @@ export default function AgentDetailPage(): React.ReactElement {
 
           {/* Search Results Dropdown */}
           {showToolSearch && toolSearch && (
-            <div className="absolute z-10 left-4 right-4 mt-1 bg-white border border-border rounded-lg shadow-lg max-h-64 overflow-y-auto">
+            <div className="absolute z-10 left-4 right-4 mt-1 bg-surface border border-border rounded-lg shadow-lg max-h-64 overflow-y-auto">
               {toolSearchResults.length > 0 ? (
                 toolSearchResults.map((tool) => (
                   <button
@@ -1047,7 +1047,7 @@ export default function AgentDetailPage(): React.ReactElement {
       </div>
 
       {/* Collections Section */}
-      <div className="bg-white border border-border rounded-lg overflow-hidden mb-8">
+      <div className="bg-surface border border-border rounded-lg overflow-hidden mb-8">
         <div className="flex items-center justify-between p-4 border-b border-border">
           <h2 className="text-lg font-medium text-foreground">Collections</h2>
           <span className="text-sm text-foreground-tertiary">
@@ -1083,7 +1083,7 @@ export default function AgentDetailPage(): React.ReactElement {
 
           {/* Search Results Dropdown */}
           {showCollectionSearch && collectionSearch && (
-            <div className="absolute z-10 left-4 right-4 mt-1 bg-white border border-border rounded-lg shadow-lg max-h-64 overflow-y-auto">
+            <div className="absolute z-10 left-4 right-4 mt-1 bg-surface border border-border rounded-lg shadow-lg max-h-64 overflow-y-auto">
               {collectionSearchResults.length > 0 ? (
                 collectionSearchResults.map((collection) => (
                   <button
@@ -1162,7 +1162,7 @@ export default function AgentDetailPage(): React.ReactElement {
       </div>
 
       {/* Danger Zone */}
-      <div className="bg-white border border-red-200 dark:border-red-800 rounded-lg p-6">
+      <div className="bg-surface border border-red-200 dark:border-red-800 rounded-lg p-6">
         <h2 className="text-lg font-medium text-red-600 dark:text-red-400 mb-4">Danger Zone</h2>
         <p className="text-sm text-foreground-secondary mb-4">
           Once you delete an agent, there is no going back. Please be certain.

apps/web/src/app/dashboard/agents/new/page.tsx

@@ -128,7 +128,7 @@ export default function NewAgentPage(): React.ReactElement {
         {/* Form */}
         <form onSubmit={handleSubmit} className="space-y-8">
           {/* Basic Info */}
-          <div className="bg-white border border-border rounded-lg p-6">
+          <div className="bg-surface border border-border rounded-lg p-6">
             <h2 className="text-lg font-medium text-foreground mb-4">Basic Information</h2>
 
             <div className="space-y-4">
@@ -145,7 +145,7 @@ export default function NewAgentPage(): React.ReactElement {
                   required
                   maxLength={100}
                   placeholder="My AI Agent"
-                  className="w-full px-3 py-2 bg-white border border-border rounded-lg text-foreground placeholder:text-foreground-tertiary focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground placeholder:text-foreground-tertiary focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                 />
               </div>
 
@@ -162,7 +162,7 @@ export default function NewAgentPage(): React.ReactElement {
                   maxLength={50}
                   pattern="[a-z0-9-]+"
                   placeholder="my-ai-agent"
-                  className="w-full px-3 py-2 bg-white border border-border rounded-lg text-foreground placeholder:text-foreground-tertiary focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary font-mono text-sm"
+                  className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground placeholder:text-foreground-tertiary focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary font-mono text-sm"
                 />
                 <p className="text-xs text-foreground-tertiary mt-1">
                   Used in API URLs. Lowercase letters, numbers, and hyphens only.
@@ -184,14 +184,14 @@ export default function NewAgentPage(): React.ReactElement {
                   maxLength={500}
                   rows={2}
                   placeholder="What does this agent do?"
-                  className="w-full px-3 py-2 bg-white border border-border rounded-lg text-foreground placeholder:text-foreground-tertiary focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none"
+                  className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground placeholder:text-foreground-tertiary focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none"
                 />
               </div>
             </div>
           </div>
 
           {/* Model Configuration */}
-          <div className="bg-white border border-border rounded-lg p-6">
+          <div className="bg-surface border border-border rounded-lg p-6">
             <h2 className="text-lg font-medium text-foreground mb-4">Model Configuration</h2>
 
             <div className="space-y-4">
@@ -209,7 +209,7 @@ export default function NewAgentPage(): React.ReactElement {
                     value={formData.provider}
                     onChange={handleChange}
                     required
-                    className="w-full px-3 py-2 bg-white border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                    className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                   >
                     {SUPPORTED_PROVIDERS.map((provider) => (
                       <option key={provider} value={provider}>
@@ -232,7 +232,7 @@ export default function NewAgentPage(): React.ReactElement {
                     value={formData.modelId}
                     onChange={handleChange}
                     required
-                    className="w-full px-3 py-2 bg-white border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                    className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                   >
                     {models.map((model) => (
                       <option key={model.id} value={model.id}>
@@ -258,7 +258,7 @@ export default function NewAgentPage(): React.ReactElement {
                   maxLength={10000}
                   rows={6}
                   placeholder="You are a helpful assistant that..."
-                  className="w-full px-3 py-2 bg-white border border-border rounded-lg text-foreground placeholder:text-foreground-tertiary focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none font-mono text-sm"
+                  className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground placeholder:text-foreground-tertiary focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary resize-none font-mono text-sm"
                 />
                 <p className="text-xs text-foreground-tertiary mt-1">
                   Instructions that define how the agent behaves.
@@ -282,7 +282,7 @@ export default function NewAgentPage(): React.ReactElement {
                     min={0}
                     max={2}
                     step={0.1}
-                    className="w-full px-3 py-2 bg-white border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                    className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                   />
                   <p className="text-xs text-foreground-tertiary mt-1">
                     0 = deterministic, 2 = creative
@@ -304,7 +304,7 @@ export default function NewAgentPage(): React.ReactElement {
                     onChange={handleChange}
                     min={1}
                     max={100}
-                    className="w-full px-3 py-2 bg-white border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                    className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                   />
                   <p className="text-xs text-foreground-tertiary mt-1">Per response turn</p>
                 </div>
@@ -324,7 +324,7 @@ export default function NewAgentPage(): React.ReactElement {
                     onChange={handleChange}
                     min={1}
                     max={100}
-                    className="w-full px-3 py-2 bg-white border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                    className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                   />
                   <p className="text-xs text-foreground-tertiary mt-1">
                     Recent messages to include

apps/web/src/app/dashboard/settings/api-keys/page.tsx

@@ -190,7 +190,7 @@ export default function ApiKeysPage(): React.ReactElement {
     >
       {/* Import from .env */}
       {showImport && (
-        <div className="bg-white border border-border rounded-lg p-6 mb-6">
+        <div className="bg-surface border border-border rounded-lg p-6 mb-6">
           <h2 className="text-lg font-medium text-foreground mb-4">Import from .env</h2>
           <textarea
             value={envText}
@@ -214,7 +214,7 @@ ANOTHER_SECRET=xyz789"
 
       {/* Add new key form */}
       {showAddForm && (
-        <div className="bg-white border border-border rounded-lg p-6 mb-6">
+        <div className="bg-surface border border-border rounded-lg p-6 mb-6">
           <h2 className="text-lg font-medium text-foreground mb-4">Add New Key</h2>
           {saveError && <p className="text-error text-sm mb-3">{saveError}</p>}
           <div className="space-y-3">
@@ -251,7 +251,7 @@ ANOTHER_SECRET=xyz789"
       )}
 
       {/* Keys Table */}
-      <div className="bg-white border border-border rounded-lg overflow-hidden">
+      <div className="bg-surface border border-border rounded-lg overflow-hidden">
         <Table>
           <TableHeader>
             <TableRow>