From b786c43f97be4e76082d7e2b28a04dd91644ae9c Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 27 Feb 2026 11:19:00 +0000
Subject: [PATCH] Increase font sizes across app and fix OpenRouter Docker
 config
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Font fixes:
- Bump base HTML font from 15px to 16px (all rem-based sizes increase ~7%)
- Bump custom scales: micro 11→12px, 2xs 12→13px, xxs 13→14px
- ProvidersPage: model names, health results, setup guide text-xs → text-sm
- App.tsx: sidebar section labels, header brand, active agent label text-xs → text-sm

Docker fix:
- Add OPENROUTER_API_KEY to docker-compose.yml and docker-compose.prod.yml
  backend environment — was missing, causing OpenRouter to show "Not configured"
  even when the key was set in .env

https://claude.ai/code/session_01L4Znfyk3R94BRbEp9pbkXk
---
 docker-compose.prod.yml              |  1 +
 docker-compose.yml                   |  1 +
 frontend/src/App.tsx                 |  6 +++---
 frontend/src/index.css               |  2 +-
 frontend/src/pages/ProvidersPage.tsx | 14 +++++++-------
 frontend/tailwind.config.js          |  6 +++---
 6 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
index e5282c9..706d3fe 100644
--- a/docker-compose.prod.yml
+++ b/docker-compose.prod.yml
@@ -45,6 +45,7 @@ services:
     environment:
       - ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY}
       - OPENAI_API_KEY=${OPENAI_API_KEY:-}
+      - OPENROUTER_API_KEY=${OPENROUTER_API_KEY:-}
       - OLLAMA_URL=${OLLAMA_URL:-http://ollama:11434}
       - DEFAULT_MODEL=${DEFAULT_MODEL:-claude-opus-4-6}
       - SECRET_KEY=${SECRET_KEY}
diff --git a/docker-compose.yml b/docker-compose.yml
index a5da40d..cc47f9a 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -14,6 +14,7 @@ services:
     environment:
       - ANTHROPIC_API_KEY=${ANTHROPIC_API_KEY}
       - OPENAI_API_KEY=${OPENAI_API_KEY:-}
+      - OPENROUTER_API_KEY=${OPENROUTER_API_KEY:-}
       - OLLAMA_URL=${OLLAMA_URL:-http://ollama:11434}
       - DEFAULT_MODEL=${DEFAULT_MODEL:-claude-opus-4-6}
       - SECRET_KEY=${SECRET_KEY:?SECRET_KEY environment variable is required}
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e727906..12251db 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1245,7 +1245,7 @@ function AppInner() {
         <div className="flex items-center gap-2.5">
           <div className="text-2xl leading-none select-none text-mizan-gold" style={{ fontFamily: "Georgia, serif" }}>&#1605;&#1610;&#1586;&#1575;&#1606;</div>
           <div className="flex flex-col">
-            <span className="text-xs font-semibold text-gray-900 dark:text-gray-100 tracking-wide">MIZAN</span>
+            <span className="text-sm font-semibold text-gray-900 dark:text-gray-100 tracking-wide">MIZAN</span>
             <span className="text-xs text-gray-400 dark:text-gray-500 tracking-widest">v{appVersion}</span>
           </div>
         </div>
@@ -1273,7 +1273,7 @@ function AppInner() {
           <div className="flex-1 py-2">
             {navSections.map(section => (
               <div key={section.label} className="px-2 mb-1">
-                <div className="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 px-3 py-2">
+                <div className="text-sm font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 px-3 py-2">
                   {section.label}
                 </div>
                 {section.items.map(item => (
@@ -1297,7 +1297,7 @@ function AppInner() {
 
           {selectedAgent && (
             <div className="px-3 py-3 border-t border-gray-200 dark:border-zinc-800">
-              <div className="text-xs uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-1.5">Active Agent</div>
+              <div className="text-sm uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-1.5">Active Agent</div>
               <div className="flex items-center gap-2">
                 <div className="w-7 h-7 rounded-full bg-gray-100 dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 flex items-center justify-center text-mizan-gold text-xs font-semibold">
                   {selectedAgent.name[0]?.toUpperCase()}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 050d8b4..90ad9bf 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -27,7 +27,7 @@
   }
 
   html {
-    font-size: 15px;
+    font-size: 16px;
   }
 
   body {
diff --git a/frontend/src/pages/ProvidersPage.tsx b/frontend/src/pages/ProvidersPage.tsx
index c85d180..4468e0b 100644
--- a/frontend/src/pages/ProvidersPage.tsx
+++ b/frontend/src/pages/ProvidersPage.tsx
@@ -144,7 +144,7 @@ export default function ProvidersPage({ api, addTerminalLine }: PageProps) {
                   </div>
                   <div>
                     <div className="font-medium text-gray-900 dark:text-gray-100">{provider.display}</div>
-                    <div className="text-xs text-gray-500 dark:text-gray-400">
+                    <div className="text-sm text-gray-500 dark:text-gray-400">
                       {provider.configured ? (
                         <span className="text-emerald-600 dark:text-emerald-400">Configured</span>
                       ) : (
@@ -161,7 +161,7 @@ export default function ProvidersPage({ api, addTerminalLine }: PageProps) {
                     {provider.models.slice(0, 3).map((m) => (
                       <div
                         key={m.id}
-                        className={`text-xs px-2 py-1 rounded cursor-pointer transition-colors ${
+                        className={`text-sm px-2 py-1 rounded cursor-pointer transition-colors ${
                           selectedProvider === provider.name && selectedModel === m.id
                             ? "bg-mizan-gold/10 text-mizan-gold border border-mizan-gold/20"
                             : "bg-gray-100 dark:bg-white/5 text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-white/10"
@@ -210,7 +210,7 @@ export default function ProvidersPage({ api, addTerminalLine }: PageProps) {
 
                 {/* Health result */}
                 {h && (
-                  <div className={`mt-2 px-2 py-1 rounded text-xs ${h.healthy
+                  <div className={`mt-2 px-2 py-1 rounded text-sm ${h.healthy
                     ? "bg-emerald-50 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-400"
                     : "bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400"
                   }`}>
@@ -270,7 +270,7 @@ export default function ProvidersPage({ api, addTerminalLine }: PageProps) {
             </div>
             <div className="max-h-64 overflow-y-auto space-y-1 scrollbar-thin">
               {models[browseProvider].length === 0 ? (
-                <div className="text-xs text-gray-400 dark:text-gray-500 py-4 text-center">
+                <div className="text-sm text-gray-400 dark:text-gray-500 py-4 text-center">
                   No models found. {browseProvider === "ollama" ? "Is Ollama running?" : "Check API key."}
                 </div>
               ) : (
@@ -288,7 +288,7 @@ export default function ProvidersPage({ api, addTerminalLine }: PageProps) {
                     }}
                   >
                     <div>
-                      <div className="text-xs font-mono text-gray-900 dark:text-gray-200">{m.id}</div>
+                      <div className="text-sm font-mono text-gray-900 dark:text-gray-200">{m.id}</div>
                       {m.name && m.name !== m.id && (
                         <div className="text-xs text-gray-500 dark:text-gray-400">{m.name}</div>
                       )}
@@ -310,8 +310,8 @@ export default function ProvidersPage({ api, addTerminalLine }: PageProps) {
 
         {/* Setup Guide */}
         <div className="card">
-          <h3 className="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-2 uppercase tracking-wider">Quick Setup</h3>
-          <div className="space-y-2 text-xs font-mono">
+          <h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 mb-2 uppercase tracking-wider">Quick Setup</h3>
+          <div className="space-y-2 text-sm font-mono">
             <div>
               <span className="text-amber-600 dark:text-amber-400">Anthropic:</span>{" "}
               <span className="text-gray-600 dark:text-gray-400">ANTHROPIC_API_KEY=sk-ant-...</span>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index a842ecd..0fb9afb 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -21,9 +21,9 @@ export default {
         mono: ['IBM Plex Mono', 'ui-monospace', 'monospace'],
       },
       fontSize: {
-        'micro': '11px',
-        '2xs': '12px',
-        'xxs': '13px',
+        'micro': '12px',
+        '2xs': '13px',
+        'xxs': '14px',
       },
     },
   },