UI: brighten muted text for better readability on dark theme

Bump base text colors: text-2 #7a7a96 → #8e8ea8, text-3 #42425c →
#5c5c78, muted-foreground aligned. Also raise opacity modifiers on
text-3 across all components (/20,/25 → /50, /30 → /60, /40 → /70)
so timestamps, metadata, and placeholders are actually visible.

Author: waydelyle

src/app/globals.css

@@ -57,8 +57,8 @@
   --color-border-hi: rgba(255,255,255,0.07);
   --color-border-focus: rgba(99,102,241,0.5);
   --color-text: #e2e2ec;
-  --color-text-2: #7a7a96;
-  --color-text-3: #42425c;
+  --color-text-2: #8e8ea8;
+  --color-text-3: #5c5c78;
   --color-accent-soft: rgba(99,102,241,0.08);
   --color-accent-glow: rgba(99,102,241,0.18);
   --color-accent-bright: #818CF8;
@@ -91,7 +91,7 @@
   --secondary: #13131e;
   --secondary-foreground: #e2e2ec;
   --muted: #13131e;
-  --muted-foreground: #7a7a96;
+  --muted-foreground: #8e8ea8;
   --accent: #6366F1;
   --accent-foreground: #ffffff;
   --destructive: #F43F5E;

src/components/agents/agent-card.tsx

@@ -62,7 +62,7 @@ export function AgentCard({ agent, isDefault, onSetDefault }: Props) {
           <button
             onClick={(e) => { e.stopPropagation(); onSetDefault(agent.id) }}
             className="shrink-0 text-[10px] font-600 uppercase tracking-wider px-2 py-0.5 rounded-[6px] cursor-pointer
-              transition-all border-none bg-transparent text-text-3/30 hover:text-accent-bright hover:bg-accent-soft"
+              transition-all border-none bg-transparent text-text-3/60 hover:text-accent-bright hover:bg-accent-soft"
             style={{ fontFamily: 'inherit' }}
             title="Set as default agent for Main Chat"
           >
@@ -86,9 +86,9 @@ export function AgentCard({ agent, isDefault, onSetDefault }: Props) {
           </span>
         )}
       </div>
-      <div className="text-[12px] text-text-3/40 mt-1.5 truncate">{agent.description}</div>
+      <div className="text-[12px] text-text-3/70 mt-1.5 truncate">{agent.description}</div>
       <div className="flex items-center gap-2 mt-1.5">
-        <span className="text-[11px] text-text-3/30 font-mono">{agent.model || agent.provider}</span>
+        <span className="text-[11px] text-text-3/60 font-mono">{agent.model || agent.provider}</span>
         {agent.tools?.includes('browser') && (
           <span className="text-[10px] font-600 uppercase tracking-wider text-sky-400/70 bg-sky-400/[0.08] px-1.5 py-0.5 rounded-[5px]">
             browser

src/components/agents/agent-chat-list.tsx

@@ -104,7 +104,7 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
             onChange={(e) => setSearch(e.target.value)}
             placeholder="Search agents..."
             className="w-full px-4 py-2.5 rounded-[12px] border border-white/[0.04] bg-surface text-text
-              text-[13px] outline-none transition-all duration-200 placeholder:text-text-3/40 focus-glow"
+              text-[13px] outline-none transition-all duration-200 placeholder:text-text-3/70 focus-glow"
             style={{ fontFamily: 'inherit' }}
           />
         </div>
@@ -136,12 +136,12 @@ export function AgentChatList({ inSidebar, onSelect }: Props) {
                   {agent.name}
                 </span>
                 {/* Provider badge */}
-                <span className="text-[10px] text-text-3/30 font-mono shrink-0">
+                <span className="text-[10px] text-text-3/60 font-mono shrink-0">
                   {agent.model ? agent.model.split('/').pop()?.split(':')[0] : agent.provider}
                 </span>
               </div>
               {preview && (
-                <div className="text-[12px] text-text-3/40 mt-1 truncate pl-[18px]">
+                <div className="text-[12px] text-text-3/70 mt-1 truncate pl-[18px]">
                   {preview}
                 </div>
               )}

src/components/agents/agent-list.tsx

@@ -82,7 +82,7 @@ export function AgentList({ inSidebar }: Props) {
             onChange={(e) => setSearch(e.target.value)}
             placeholder="Search agents..."
             className="w-full px-4 py-2.5 rounded-[12px] border border-white/[0.04] bg-surface text-text
-              text-[13px] outline-none transition-all duration-200 placeholder:text-text-3/40 focus-glow"
+              text-[13px] outline-none transition-all duration-200 placeholder:text-text-3/70 focus-glow"
             style={{ fontFamily: 'inherit' }}
           />
         </div>

src/components/agents/agent-sheet.tsx

@@ -315,7 +315,7 @@ export function AgentSheet() {
             style={{ fontFamily: 'inherit' }}
           />
         </div>
-        <p className="text-[11px] text-text-3/40 mt-1.5">Press Enter or comma to add. Other agents see these when deciding delegation.</p>
+        <p className="text-[11px] text-text-3/70 mt-1.5">Press Enter or comma to add. Other agents see these when deciding delegation.</p>
       </div>
 
       <div className="mb-8">
@@ -660,7 +660,7 @@ export function AgentSheet() {
               })}
             </div>
           ) : (
-            <p className="text-[12px] text-text-3/40">No skills found in ~/.claude/skills/</p>
+            <p className="text-[12px] text-text-3/70">No skills found in ~/.claude/skills/</p>
           )}
         </div>
       )}

src/components/auth/access-key-gate.tsx

@@ -222,7 +222,7 @@ export function AccessKeyGate({ onAuthenticated }: AccessKeyGateProps) {
                 autoComplete="off"
                 className="w-full max-w-[320px] px-6 py-4 rounded-[16px] border border-white/[0.08] bg-surface
                   text-text text-[16px] text-center font-mono outline-none
-                  transition-all duration-200 placeholder:text-text-3/40
+                  transition-all duration-200 placeholder:text-text-3/70
                   focus:border-accent-bright/30 focus:shadow-[0_0_30px_rgba(99,102,241,0.1)]"
               />
 

src/components/auth/user-picker.tsx

@@ -67,7 +67,7 @@ export function UserPicker() {
             autoFocus
             className="w-full max-w-[280px] px-6 py-4 rounded-[16px] border border-white/[0.08] bg-surface
               text-text text-[18px] text-center font-display font-600 outline-none
-              transition-all duration-200 placeholder:text-text-3/40
+              transition-all duration-200 placeholder:text-text-3/70
               focus:border-accent-bright/30 focus:shadow-[0_0_30px_rgba(99,102,241,0.1)]"
             style={{ fontFamily: 'inherit' }}
           />

src/components/chat/chat-header.tsx

@@ -265,13 +265,13 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
             <span className="text-[11px] text-text-3/60 font-mono block truncate">{shortPath(session.cwd)}</span>
             {modelName && (
               <>
-                <span className="text-[11px] text-text-3/30">·</span>
+                <span className="text-[11px] text-text-3/60">·</span>
                 <span className="text-[11px] text-text-3/50 font-mono truncate shrink-0">{modelName}</span>
               </>
             )}
             {lastUsage && !streaming && (
               <>
-                <span className="text-[11px] text-text-3/30">·</span>
+                <span className="text-[11px] text-text-3/60">·</span>
                 <UsageBadge {...lastUsage} />
               </>
             )}
@@ -456,7 +456,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
                 {copied ? 'Copied!' : `${resumeHandle.label}: ${resumeHandle.id}`}
               </span>
               {!copied && (
-                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3/30 shrink-0">
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-text-3/60 shrink-0">
                   <rect x="9" y="9" width="13" height="13" rx="2" />
                   <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
                 </svg>
@@ -478,7 +478,7 @@ export function ChatHeader({ session, streaming, onStop, onMenuToggle, onBack, m
               <span className="text-[11px] font-600 text-[#3B82F6] group-hover:text-[#F43F5E]">
                 Browser Active
               </span>
-              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" className="text-text-3/30 group-hover:text-[#F43F5E] shrink-0">
+              <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" className="text-text-3/60 group-hover:text-[#F43F5E] shrink-0">
                 <line x1="18" y1="6" x2="6" y2="18" />
                 <line x1="6" y1="6" x2="18" y2="18" />
               </svg>

src/components/chat/chat-tool-toggles.tsx

@@ -126,7 +126,7 @@ export function ChatToolToggles({ session }: Props) {
                     <span className={`text-[12px] ${enabled ? 'text-text-2' : 'text-text-3/70'}`}>
                       {label}
                       {TOOL_HINTS[toolId] && (
-                        <span className="ml-2 text-[10px] text-text-3/40 font-400">{TOOL_HINTS[toolId]}</span>
+                        <span className="ml-2 text-[10px] text-text-3/70 font-400">{TOOL_HINTS[toolId]}</span>
                       )}
                     </span>
                   </label>
@@ -152,7 +152,7 @@ export function ChatToolToggles({ session }: Props) {
           )}
 
           <div className="px-3 py-2 border-t border-white/[0.04] bg-white/[0.02]">
-            <p className="text-[10px] text-text-3/40">Changes apply to the next message</p>
+            <p className="text-[10px] text-text-3/70">Changes apply to the next message</p>
           </div>
         </div>
       )}

src/components/chat/message-bubble.tsx

@@ -189,7 +189,7 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
         <span className={`text-[12px] font-600 ${isUser ? 'text-accent-bright/70' : 'text-text-3'}`}>
           {isUser ? (currentUser ? currentUser.charAt(0).toUpperCase() + currentUser.slice(1) : 'You') : (assistantName || 'Claude')}
         </span>
-        <span className="text-[11px] text-text-3/40 font-mono">
+        <span className="text-[11px] text-text-3/70 font-mono">
           {message.time ? fmtTime(message.time) : ''}
         </span>
       </div>