feat: Codex coding agent, realtime counter, light mode, UI polish

Codex Mode:
- Three-tab system in sidebar (LU | Codex | OpenClaw coming soon)
- Codex coding agent with dedicated useCodex hook
- File tree panel with folder navigation (back, refresh, click-to-browse)
- Working directory injection for shell/file tools
- Separate conversations per mode (LU chats ≠ Codex chats)
- CodexView with tool blocks, thinking, token counter, memory
- Mode switch clears active chat from other mode

UI Polish:
- Realtime elapsed time counter during generation (both modes)
- Code blocks collapse by default (>4 lines)
- Tool call blocks: monochrome, no dropdown arrows, click to expand
- Message bubbles: compact, minimal borders, light mode support
- Light mode fixes across all new components
- Strip Gemma 4 <channel> tags from output

Thinking:
- Provider-agnostic: Ollama native think:true, OpenAI/Anthropic via
  system prompt with <think> tag parser fallback
- Think toggle button in both LU and Codex headers

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: PurpleDoubleD

src/components/chat/ChatInput.tsx

@@ -117,7 +117,7 @@ export function ChatInput({ onSend, onStop, isGenerating, pendingApproval, onApp
         className={`flex flex-col rounded-lg border px-2.5 py-2 transition-colors ${
           isDragOver
             ? 'bg-blue-500/5 border-blue-500/30'
-            : 'bg-white/[0.03] border-white/[0.06]'
+            : 'bg-gray-50 dark:bg-white/[0.03] border-gray-200 dark:border-white/[0.06]'
         }`}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
@@ -181,7 +181,7 @@ export function ChatInput({ onSend, onStop, isGenerating, pendingApproval, onApp
             onPaste={handlePaste}
             placeholder={isDragOver ? "Drop images here..." : isTranscribing ? "Transcribing..." : isVoiceRecording ? "Recording..." : "Message..."}
             rows={1}
-            className="flex-1 bg-transparent resize-none text-gray-200 placeholder-gray-600 focus:outline-none text-[0.75rem] leading-relaxed max-h-[200px]"
+            className="flex-1 bg-transparent resize-none text-gray-800 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-600 focus:outline-none text-[0.75rem] leading-relaxed max-h-[200px]"
           />
 
           {isGenerating ? (

src/components/chat/ChatModeTabs.tsx

@@ -0,0 +1,40 @@
+import { MessageSquare, Code, Bot } from 'lucide-react'
+import { useCodexStore } from '../../stores/codexStore'
+import type { ChatMode } from '../../types/codex'
+
+const TABS: { mode: ChatMode; label: string; icon: typeof Code; disabled?: boolean; tag?: string }[] = [
+  { mode: 'lu', label: 'LU', icon: MessageSquare },
+  { mode: 'codex', label: 'Codex', icon: Code },
+  { mode: 'openclaw', label: 'OpenClaw', icon: Bot, disabled: true, tag: 'Soon' },
+]
+
+export function ChatModeTabs() {
+  const chatMode = useCodexStore((s) => s.chatMode)
+  const setChatMode = useCodexStore((s) => s.setChatMode)
+
+  return (
+    <div className="flex items-center gap-0.5 px-2 py-0.5">
+      {TABS.map(({ mode, label, icon: Icon, disabled, tag }) => {
+        const isActive = chatMode === mode
+        return (
+          <button
+            key={mode}
+            onClick={() => !disabled && setChatMode(mode)}
+            disabled={disabled}
+            className={`flex items-center gap-1 px-2 py-0.5 rounded text-[0.55rem] font-medium transition-all ${
+              isActive
+                ? 'bg-white/10 text-white border border-white/15'
+                : disabled
+                  ? 'text-gray-700 cursor-default'
+                  : 'text-gray-500 hover:text-gray-300 hover:bg-white/5 border border-transparent'
+            }`}
+          >
+            <Icon size={9} />
+            <span>{label}</span>
+            {tag && <span className="text-[0.4rem] text-gray-600 ml-0.5">{tag}</span>}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

src/components/chat/ChatView.tsx

@@ -21,6 +21,9 @@ import { ABCompare } from './ABCompare'
 import { useCompareStore } from '../../stores/compareStore'
 import { exportConversation } from '../../lib/chat-export'
 import { PermissionOverrideBar } from './PermissionOverrideBar'
+import { RealtimeCounter } from './RealtimeCounter'
+import { CodexView } from './CodexView'
+import { useCodexStore } from '../../stores/codexStore'
 
 export function ChatView() {
   const { sendMessage, stopGeneration, isGenerating, isLoadingModel, regenerateMessage, editAndResend, pendingApproval, approveToolCall, rejectToolCall } = useChat()
@@ -37,6 +40,7 @@ export function ChatView() {
   const allPersonas = useSettingsStore((s) => s.personas)
   const thinkingEnabled = useSettingsStore((s) => s.settings.thinkingEnabled)
   const updateSettings = useSettingsStore((s) => s.updateSettings)
+  const chatMode = useCodexStore((s) => s.chatMode)
 
   const docCount = useRAGStore((s) =>
     activeConversationId ? (s.documents[activeConversationId] || []).length : 0
@@ -85,15 +89,23 @@ export function ChatView() {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.25, ease: 'easeOut' }}
           >
-            <div className="flex-1 flex flex-col min-w-0">
-              {/* Top bar — compact */}
+            <div className="flex-1 flex flex-col min-w-0 relative">
+              {/* Codex mode */}
+              {chatMode === 'codex' ? (
+                <CodexView />
+              ) : chatMode === 'openclaw' ? (
+                <div className="flex-1 flex items-center justify-center">
+                  <p className="text-[0.7rem] text-gray-600">OpenClaw — Coming Soon</p>
+                </div>
+              ) : (<>
+              {/* Top bar — compact (LU mode) */}
               <div className="flex items-center gap-1.5 px-2 pt-0.5">
                 {/* Left: Tools Active dropdown (only when agent is active) */}
                 {isAgentActive && (
                   <div className="relative">
                     <button
                       onClick={() => setToolsDropdownOpen(!toolsDropdownOpen)}
-                      className="flex items-center gap-1 px-2 py-0.5 rounded border border-white/[0.06] text-gray-500 hover:border-white/15 transition-colors text-[0.55rem]"
+                      className="flex items-center gap-1 px-2 py-0.5 rounded border border-gray-200 dark:border-white/[0.06] text-gray-500 hover:border-gray-400 dark:hover:border-white/15 transition-colors text-[0.55rem]"
                     >
                       <Wrench size={9} className="text-green-400" />
                       <span>Tools</span>
@@ -102,7 +114,7 @@ export function ChatView() {
                     {toolsDropdownOpen && (
                       <>
                         <div className="fixed inset-0 z-40" onClick={() => setToolsDropdownOpen(false)} />
-                        <div className="absolute left-0 top-full mt-0.5 z-50 w-28 rounded-md bg-[#1a1a1a] border border-white/10 shadow-xl py-0.5 px-0.5">
+                        <div className="absolute left-0 top-full mt-0.5 z-50 w-28 rounded-md bg-white dark:bg-[#1a1a1a] border border-gray-200 dark:border-white/10 shadow-xl py-0.5 px-0.5">
                           <PermissionOverrideBar />
                         </div>
                       </>
@@ -116,7 +128,7 @@ export function ChatView() {
                   className={`flex items-center gap-1 px-2 py-0.5 rounded border transition-colors text-[0.55rem] ${
                     thinkingEnabled
                       ? 'border-blue-500/30 text-blue-400'
-                      : 'border-white/[0.06] text-gray-600'
+                      : 'border-gray-200 dark:border-white/[0.06] text-gray-600'
                   }`}
                   title="Toggle thinking mode — model reasons before answering"
                 >
@@ -137,15 +149,15 @@ export function ChatView() {
                 <div className="relative">
                   <button
                     onClick={() => setExportOpen(!exportOpen)}
-                    className="flex items-center gap-1 px-2 py-0.5 rounded border border-white/[0.06] hover:border-white/15 text-gray-500 transition-colors text-[0.55rem]"
+                    className="flex items-center gap-1 px-2 py-0.5 rounded border border-gray-200 dark:border-white/[0.06] hover:border-gray-400 dark:hover:border-white/15 text-gray-500 transition-colors text-[0.55rem]"
                     title="Export chat"
                   >
                     <Download size={10} />
                   </button>
                   {exportOpen && (
                     <>
                       <div className="fixed inset-0 z-40" onClick={() => setExportOpen(false)} />
-                      <div className="absolute right-0 top-full mt-1 z-50 w-32 rounded-lg bg-[#1a1a1a] border border-white/10 shadow-xl py-1">
+                      <div className="absolute right-0 top-full mt-1 z-50 w-32 rounded-lg bg-white dark:bg-[#1a1a1a] border border-gray-200 dark:border-white/10 shadow-xl py-1">
                         {(['markdown', 'json'] as const).map(fmt => (
                           <button
                             key={fmt}
@@ -168,7 +180,7 @@ export function ChatView() {
                 <div className="relative">
                   <button
                     onClick={() => setPersonaOpen(!personaOpen)}
-                    className="flex items-center gap-1 px-2 py-0.5 rounded border border-white/[0.06] hover:border-white/15 text-gray-500 transition-colors text-[0.55rem]"
+                    className="flex items-center gap-1 px-2 py-0.5 rounded border border-gray-200 dark:border-white/[0.06] hover:border-gray-400 dark:hover:border-white/15 text-gray-500 transition-colors text-[0.55rem]"
                   >
                     <User size={10} />
                     <span className="max-w-[60px] truncate">{activePersona?.name || 'No Filter'}</span>
@@ -177,9 +189,9 @@ export function ChatView() {
                   {personaOpen && (
                     <>
                       <div className="fixed inset-0 z-40" onClick={() => setPersonaOpen(false)} />
-                      <div className="absolute right-0 top-full mt-1 z-50 w-44 max-h-[220px] overflow-y-auto scrollbar-thin rounded-lg bg-[#1a1a1a] border border-white/10 shadow-xl py-1">
+                      <div className="absolute right-0 top-full mt-1 z-50 w-44 max-h-[220px] overflow-y-auto scrollbar-thin rounded-lg bg-white dark:bg-[#1a1a1a] border border-gray-200 dark:border-white/10 shadow-xl py-1">
                         {activePersona && (
-                          <div className="px-2 pb-1 mb-1 border-b border-white/[0.06]">
+                          <div className="px-2 pb-1 mb-1 border-b border-gray-200 dark:border-white/[0.06]">
                             <div className="px-2 py-1 rounded-md bg-white/[0.06] border border-white/10 text-[0.55rem] text-white font-medium flex items-center gap-1.5">
                               <div className="w-1 h-1 rounded-full bg-green-400 shrink-0" />
                               {activePersona.name}
@@ -207,7 +219,7 @@ export function ChatView() {
                     'flex items-center gap-1 px-2 py-0.5 rounded border transition-colors text-[0.55rem] ' +
                     (ragPanelOpen || ragEnabled
                       ? 'border-green-500/30 text-green-400'
-                      : 'border-white/[0.06] hover:border-white/15 text-gray-500')
+                      : 'border-gray-200 dark:border-white/[0.06] hover:border-gray-400 dark:hover:border-white/15 text-gray-500')
                   }
                   title="Document Chat (RAG)"
                 >
@@ -231,7 +243,7 @@ export function ChatView() {
                       ? 'border-green-500/30 text-green-400'
                       : activeModel && !isAgentCompatible(activeModel)
                         ? 'border-white/[0.04] text-gray-600 opacity-50'
-                        : 'border-white/[0.06] text-gray-500')
+                        : 'border-gray-200 dark:border-white/[0.06] text-gray-500')
                   }>
                     <Bot size={10} />
                     <div className="flex flex-col items-start leading-none">
@@ -249,6 +261,7 @@ export function ChatView() {
                 onRegenerate={regenerateMessage}
                 onEdit={editAndResend}
               />
+              <RealtimeCounter isRunning={isGenerating} />
               <ChatInput
                 onSend={sendMessage}
                 onStop={stopGeneration}
@@ -257,6 +270,7 @@ export function ChatView() {
                 onApprove={approveToolCall}
                 onReject={rejectToolCall}
               />
+            </>)}
             </div>
 
             {/* RAG Panel */}

src/components/chat/CodeBlock.tsx

@@ -1,32 +1,39 @@
 import { useState } from 'react'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
-import { Copy, Check } from 'lucide-react'
+import { Copy, Check, ChevronDown } from 'lucide-react'
 
 interface Props {
   code: string
   language?: string
 }
 
+const COLLAPSE_THRESHOLD = 4 // lines — always start collapsed unless very short
+
 export function CodeBlock({ code, language }: Props) {
   const [copied, setCopied] = useState(false)
+  const lineCount = code.split('\n').length
+  const isLong = lineCount > COLLAPSE_THRESHOLD
+  const [expanded, setExpanded] = useState(!isLong)
 
   const handleCopy = () => {
     navigator.clipboard.writeText(code)
     setCopied(true)
     setTimeout(() => setCopied(false), 2000)
   }
 
+  const displayCode = expanded ? code : code.split('\n').slice(0, COLLAPSE_THRESHOLD).join('\n')
+
   return (
-    <div className="relative group rounded-lg overflow-hidden my-3 border border-white/5">
-      <div className="flex items-center justify-between px-4 py-1.5 bg-white/5 border-b border-white/5">
-        <span className="text-xs text-gray-400 font-mono">{language || 'code'}</span>
+    <div className="relative group rounded-lg overflow-hidden my-1.5 border border-gray-200 dark:border-white/5">
+      <div className="flex items-center justify-between px-3 py-1 bg-gray-50 dark:bg-white/5 border-b border-gray-200 dark:border-white/5">
+        <span className="text-[0.6rem] text-gray-400 font-mono">{language || 'code'}</span>
         <button
           onClick={handleCopy}
-          className="flex items-center gap-1 text-xs text-gray-400 hover:text-white transition-colors"
+          className="flex items-center gap-1 text-[0.6rem] text-gray-400 hover:text-gray-700 dark:hover:text-white transition-colors"
           aria-label="Copy code"
         >
-          {copied ? <Check size={14} /> : <Copy size={14} />}
+          {copied ? <Check size={11} /> : <Copy size={11} />}
           {copied ? 'Copied' : 'Copy'}
         </button>
       </div>
@@ -35,13 +42,22 @@ export function CodeBlock({ code, language }: Props) {
         style={oneDark}
         customStyle={{
           margin: 0,
-          padding: '1rem',
+          padding: '0.75rem',
           background: 'rgba(0, 0, 0, 0.3)',
-          fontSize: '0.85rem',
+          fontSize: '0.75rem',
         }}
       >
-        {code}
+        {displayCode}
       </SyntaxHighlighter>
+      {isLong && (
+        <button
+          onClick={() => setExpanded(!expanded)}
+          className="w-full flex items-center justify-center gap-1 py-1 bg-gray-50 dark:bg-white/5 text-[0.55rem] text-gray-400 hover:text-gray-700 dark:hover:text-white border-t border-gray-200 dark:border-white/5 transition-colors"
+        >
+          <ChevronDown size={9} className={`transition-transform ${expanded ? 'rotate-180' : ''}`} />
+          {expanded ? 'Collapse' : `Show all ${lineCount} lines`}
+        </button>
+      )}
     </div>
   )
 }

src/components/chat/CodexEventBlock.tsx

@@ -0,0 +1,67 @@
+import { Terminal, FileEdit, Brain, AlertCircle, CheckCircle, ChevronDown } from 'lucide-react'
+import { useState } from 'react'
+import type { CodexEvent } from '../../types/codex'
+
+interface Props {
+  event: CodexEvent
+}
+
+export function CodexEventBlock({ event }: Props) {
+  const [open, setOpen] = useState(event.type === 'error')
+
+  if (event.type === 'instruction' || event.type === 'done') return null
+
+  const icons = {
+    file_change: FileEdit,
+    terminal_output: Terminal,
+    reasoning: Brain,
+    error: AlertCircle,
+  }
+
+  const colors = {
+    file_change: 'text-amber-400',
+    terminal_output: 'text-green-400',
+    reasoning: 'text-blue-400',
+    error: 'text-red-400',
+  }
+
+  const labels = {
+    file_change: event.filePath || 'File changed',
+    terminal_output: 'Terminal',
+    reasoning: 'Thinking',
+    error: 'Error',
+  }
+
+  const Icon = icons[event.type as keyof typeof icons] || CheckCircle
+  const color = colors[event.type as keyof typeof colors] || 'text-gray-400'
+  const label = labels[event.type as keyof typeof labels] || event.type
+
+  return (
+    <div className="mb-0.5">
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-1.5 py-0.5 text-left hover:opacity-80 transition-opacity w-full"
+      >
+        <Icon size={10} className={color} />
+        <span className={`text-[0.6rem] ${color}`}>{label}</span>
+        <ChevronDown size={8} className={`text-gray-600 ml-auto transition-transform ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {open && (
+        <div className="pl-4 pb-1">
+          <pre className={`text-[0.58rem] leading-relaxed rounded px-2 py-1 overflow-auto scrollbar-thin max-h-[250px] ${
+            event.type === 'terminal_output'
+              ? 'bg-black/20 text-green-300/70'
+              : event.type === 'error'
+                ? 'bg-red-500/5 text-red-400/80'
+                : event.type === 'reasoning'
+                  ? 'text-blue-200/40 italic'
+                  : 'bg-white/[0.02] text-gray-400'
+          }`}>
+            {event.content}
+          </pre>
+        </div>
+      )}
+    </div>
+  )
+}