From d5009ceeca5c968d14c10667fb792b1b93fde1be Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 10 Dec 2025 11:24:38 +0000
Subject: [PATCH 01/27] Initial plan


From dbdea5362bc6e40dcb9918c1a39dc85b778e7b6b Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 10 Dec 2025 11:39:05 +0000
Subject: [PATCH 02/27] Add browser mode infrastructure with WebSocket support

Co-authored-by: ClickerMonkey <421233+ClickerMonkey@users.noreply.github.com>
---
 .gitignore                                    |   1 +
 packages/cletus/esbuild.browser.cjs           |  45 +++
 packages/cletus/package.json                  |  10 +-
 packages/cletus/src/browser/app.tsx           |  96 +++++
 .../src/browser/components/ChatHeader.tsx     |  26 ++
 .../src/browser/components/ChatInput.tsx      | 147 +++++++
 .../src/browser/components/ChatList.tsx       |  90 +++++
 .../src/browser/components/Collapsible.tsx    |  27 ++
 .../src/browser/components/MessageItem.tsx    |  47 +++
 .../src/browser/components/MessageList.tsx    |  41 ++
 .../browser/components/OperationDisplay.tsx   |  81 ++++
 .../src/browser/components/SettingsView.tsx   |  84 ++++
 .../cletus/src/browser/components/Sidebar.tsx |  50 +++
 packages/cletus/src/browser/index.html        |  87 ++++
 .../cletus/src/browser/pages/ChatPage.tsx     |  78 ++++
 .../cletus/src/browser/pages/MainPage.tsx     |  39 ++
 packages/cletus/src/browser/server.ts         | 371 ++++++++++++++++++
 packages/cletus/src/browser/styles.css        | 212 ++++++++++
 packages/cletus/src/index.tsx                 |  28 +-
 19 files changed, 1554 insertions(+), 6 deletions(-)
 create mode 100644 packages/cletus/esbuild.browser.cjs
 create mode 100644 packages/cletus/src/browser/app.tsx
 create mode 100644 packages/cletus/src/browser/components/ChatHeader.tsx
 create mode 100644 packages/cletus/src/browser/components/ChatInput.tsx
 create mode 100644 packages/cletus/src/browser/components/ChatList.tsx
 create mode 100644 packages/cletus/src/browser/components/Collapsible.tsx
 create mode 100644 packages/cletus/src/browser/components/MessageItem.tsx
 create mode 100644 packages/cletus/src/browser/components/MessageList.tsx
 create mode 100644 packages/cletus/src/browser/components/OperationDisplay.tsx
 create mode 100644 packages/cletus/src/browser/components/SettingsView.tsx
 create mode 100644 packages/cletus/src/browser/components/Sidebar.tsx
 create mode 100644 packages/cletus/src/browser/index.html
 create mode 100644 packages/cletus/src/browser/pages/ChatPage.tsx
 create mode 100644 packages/cletus/src/browser/pages/MainPage.tsx
 create mode 100644 packages/cletus/src/browser/server.ts
 create mode 100644 packages/cletus/src/browser/styles.css

diff --git a/.gitignore b/.gitignore
index 2a68d65..bcd791e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@ node_modules/
 
 # Build outputs
 dist/
+dist-browser/
 *.tsbuildinfo
 # Build artifacts in source directories
 packages/*/src/**/*.js
diff --git a/packages/cletus/esbuild.browser.cjs b/packages/cletus/esbuild.browser.cjs
new file mode 100644
index 0000000..b1097f7
--- /dev/null
+++ b/packages/cletus/esbuild.browser.cjs
@@ -0,0 +1,45 @@
+const esbuild = require('esbuild');
+const fs = require('fs');
+const path = require('path');
+
+// Build the browser client
+esbuild.build({
+  entryPoints: ['src/browser/app.tsx'],
+  bundle: true,
+  platform: 'browser',
+  target: 'es2020',
+  outfile: 'dist-browser/app.js',
+  format: 'esm',
+  minify: true,
+  sourcemap: true,
+  logLevel: 'info',
+  define: {
+    'process.env.NODE_ENV': '"production"'
+  },
+  loader: {
+    '.css': 'css',
+  },
+}).then(() => {
+  // Copy static files
+  const distDir = path.join(__dirname, 'dist-browser');
+  if (!fs.existsSync(distDir)) {
+    fs.mkdirSync(distDir, { recursive: true });
+  }
+
+  // Copy HTML file
+  fs.copyFileSync(
+    path.join(__dirname, 'src/browser/index.html'),
+    path.join(distDir, 'index.html')
+  );
+
+  // Copy CSS file (it's imported in app.tsx but needs to be available)
+  fs.copyFileSync(
+    path.join(__dirname, 'src/browser/styles.css'),
+    path.join(distDir, 'styles.css')
+  );
+
+  console.log('✓ Browser client built successfully');
+}).catch((error) => {
+  console.error('Browser build failed:', error);
+  process.exit(1);
+});
diff --git a/packages/cletus/package.json b/packages/cletus/package.json
index b2c38df..e109f10 100644
--- a/packages/cletus/package.json
+++ b/packages/cletus/package.json
@@ -9,10 +9,10 @@
     "cletus": "dist/index.js"
   },
   "scripts": {
-    "build": "npm run clean && node esbuild.config.cjs",
+    "build": "npm run clean && node esbuild.config.cjs && node esbuild.browser.cjs",
     "dev": "tsx watch src/index.tsx",
     "start": "tsx --conditions=source src/index.tsx",
-    "clean": "rimraf dist tsconfig.tsbuildinfo",
+    "clean": "rimraf dist dist-browser tsconfig.tsbuildinfo",
     "typecheck": "tsc --noEmit",
     "test": "jest",
     "profile": "node --inspect dist/index.js",
@@ -49,7 +49,9 @@
     "ink-text-input": "^6.0.0",
     "mic": "^2.1.2",
     "react": "^19.2.0",
-    "sharp": "^0.34.3"
+    "react-dom": "^19.2.0",
+    "sharp": "^0.34.3",
+    "ws": "^8.18.0"
   },
   "optionalDependencies": {
     "puppeteer": "^24.31.0"
@@ -73,8 +75,10 @@
     "@types/node": "^24.9.1",
     "@types/pdf-parse": "^1.1.5",
     "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.0",
     "@types/uuid": "^10.0.0",
     "@types/wav": "^1.0.4",
+    "@types/ws": "^8.5.13",
     "babel-jest": "^29.7.0",
     "diff": "^8.0.2",
     "esbuild": "^0.26.0",
diff --git a/packages/cletus/src/browser/app.tsx b/packages/cletus/src/browser/app.tsx
new file mode 100644
index 0000000..f61ee3c
--- /dev/null
+++ b/packages/cletus/src/browser/app.tsx
@@ -0,0 +1,96 @@
+import React, { useState, useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import { ConfigFile, configExists } from '../file-manager';
+import { InkInitWizard } from '../components/InkInitWizard';
+import { MainPage } from './pages/MainPage';
+import { ChatPage } from './pages/ChatPage';
+import './styles.css';
+
+type AppView = 'loading' | 'init' | 'main' | 'chat';
+
+const App: React.FC = () => {
+  const [view, setView] = useState<AppView>('loading');
+  const [config, setConfig] = useState<ConfigFile | null>(null);
+  const [selectedChatId, setSelectedChatId] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function checkConfig() {
+      const exists = await configExists();
+      if (exists) {
+        const cfg = new ConfigFile();
+        await cfg.load();
+        setConfig(cfg);
+        setView('main');
+      } else {
+        setView('init');
+      }
+    }
+    checkConfig();
+  }, []);
+
+  if (view === 'loading') {
+    return (
+      <div className="loading-container">
+        <div className="spinner"></div>
+        <p>Loading...</p>
+      </div>
+    );
+  }
+
+  if (view === 'init') {
+    return (
+      <InkInitWizard
+        onComplete={(cfg) => {
+          setConfig(cfg);
+          setView('main');
+        }}
+      />
+    );
+  }
+
+  if (view === 'chat' && selectedChatId && config) {
+    return (
+      <ChatPage
+        chatId={selectedChatId}
+        config={config}
+        onBack={() => setView('main')}
+      />
+    );
+  }
+
+  if (view === 'main' && config) {
+    return (
+      <MainPage
+        config={config}
+        onChatSelect={(chatId) => {
+          setSelectedChatId(chatId);
+          setView('chat');
+        }}
+        onExit={() => {
+          if (typeof window !== 'undefined') {
+            window.close();
+          }
+        }}
+      />
+    );
+  }
+
+  return (
+    <div className="loading-container">
+      <div className="spinner"></div>
+      <p>Loading...</p>
+    </div>
+  );
+};
+
+const container = document.getElementById('root');
+if (!container) {
+  throw new Error('Root element not found');
+}
+
+const root = createRoot(container);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/packages/cletus/src/browser/components/ChatHeader.tsx b/packages/cletus/src/browser/components/ChatHeader.tsx
new file mode 100644
index 0000000..8f8bc48
--- /dev/null
+++ b/packages/cletus/src/browser/components/ChatHeader.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import type { ChatMeta } from '../../schemas';
+
+interface ChatHeaderProps {
+  chat: ChatMeta;
+  onBack: () => void;
+}
+
+export const ChatHeader: React.FC<ChatHeaderProps> = ({ chat, onBack }) => {
+  return (
+    <div className="header">
+      <div className="flex" style={{ alignItems: 'center', gap: '1rem' }}>
+        <button className="btn btn-small" onClick={onBack}>
+          ← Back
+        </button>
+        <div>
+          <h1>{chat.name}</h1>
+          <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', marginTop: '0.25rem' }}>
+            Mode: {chat.mode}
+            {chat.assistant && ` • Assistant: ${chat.assistant}`}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/ChatInput.tsx b/packages/cletus/src/browser/components/ChatInput.tsx
new file mode 100644
index 0000000..4b06188
--- /dev/null
+++ b/packages/cletus/src/browser/components/ChatInput.tsx
@@ -0,0 +1,147 @@
+import React, { useState, useRef, useEffect } from 'react';
+import type { ConfigFile } from '../../config';
+import type { ChatMeta } from '../../schemas';
+
+interface ChatInputProps {
+  chatId: string;
+  chatMeta: ChatMeta;
+  config: ConfigFile;
+  onMessageSent: () => void;
+}
+
+export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, config, onMessageSent }) => {
+  const [input, setInput] = useState('');
+  const [isConnecting, setIsConnecting] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [status, setStatus] = useState('');
+  const wsRef = useRef<WebSocket | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    // Connect WebSocket
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const ws = new WebSocket(`${protocol}//${window.location.host}`);
+
+    ws.onopen = () => {
+      setIsConnecting(false);
+      // Initialize chat
+      ws.send(JSON.stringify({
+        type: 'init_chat',
+        data: { chatId },
+      }));
+    };
+
+    ws.onmessage = (event) => {
+      const message = JSON.parse(event.data);
+      
+      switch (message.type) {
+        case 'chat_initialized':
+          console.log('Chat initialized');
+          break;
+        
+        case 'message_added':
+          onMessageSent();
+          break;
+
+        case 'status_update':
+          setStatus(message.data.status);
+          break;
+
+        case 'messages_updated':
+        case 'response_complete':
+          setIsProcessing(false);
+          setStatus('');
+          onMessageSent();
+          break;
+
+        case 'error':
+          console.error('WebSocket error:', message.data.message);
+          setIsProcessing(false);
+          setStatus('Error: ' + message.data.message);
+          break;
+      }
+    };
+
+    ws.onerror = (error) => {
+      console.error('WebSocket error:', error);
+      setIsConnecting(false);
+      setIsProcessing(false);
+    };
+
+    ws.onclose = () => {
+      setIsConnecting(false);
+      setIsProcessing(false);
+    };
+
+    wsRef.current = ws;
+    setIsConnecting(true);
+
+    return () => {
+      ws.close();
+    };
+  }, [chatId]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!input.trim() || isProcessing || !wsRef.current) {
+      return;
+    }
+
+    wsRef.current.send(JSON.stringify({
+      type: 'send_message',
+      data: { content: input.trim() },
+    }));
+
+    setInput('');
+    setIsProcessing(true);
+    setStatus('Processing...');
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit(e);
+    }
+  };
+
+  return (
+    <div style={{ borderTop: '1px solid var(--border)', padding: '1rem' }}>
+      {status && (
+        <div style={{
+          fontSize: '0.85rem',
+          color: 'var(--text-secondary)',
+          marginBottom: '0.5rem',
+          fontStyle: 'italic',
+        }}>
+          {status}
+        </div>
+      )}
+      
+      <form onSubmit={handleSubmit}>
+        <textarea
+          ref={textareaRef}
+          className="input textarea"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={isConnecting ? 'Connecting...' : isProcessing ? 'Processing...' : 'Type your message... (Enter to send, Shift+Enter for new line)'}
+          disabled={isConnecting || isProcessing}
+          style={{ minHeight: '80px', marginBottom: '0.5rem' }}
+        />
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <div style={{ fontSize: '0.85rem', color: 'var(--text-muted)' }}>
+            Mode: {chatMeta.mode}
+          </div>
+          <button
+            type="submit"
+            className="btn btn-primary"
+            disabled={!input.trim() || isProcessing || isConnecting}
+          >
+            {isProcessing ? 'Processing...' : 'Send'}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/ChatList.tsx b/packages/cletus/src/browser/components/ChatList.tsx
new file mode 100644
index 0000000..6bde74f
--- /dev/null
+++ b/packages/cletus/src/browser/components/ChatList.tsx
@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+import type { ConfigFile } from '../../config';
+import type { ChatMeta } from '../../schemas';
+
+interface ChatListProps {
+  config: ConfigFile;
+  onChatSelect: (chatId: string) => void;
+}
+
+export const ChatList: React.FC<ChatListProps> = ({ config, onChatSelect }) => {
+  const [isCreating, setIsCreating] = useState(false);
+  const [newChatName, setNewChatName] = useState('');
+
+  const chats = config.getChats();
+  const sortedChats = [...chats].sort((a, b) => b.updated - a.updated);
+
+  const handleCreateChat = async () => {
+    if (!newChatName.trim()) return;
+
+    const chatId = await config.createChat(newChatName.trim());
+    await config.load();
+    setIsCreating(false);
+    setNewChatName('');
+    onChatSelect(chatId);
+  };
+
+  return (
+    <div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
+        <h2 style={{ fontSize: '1.25rem', fontWeight: 600 }}>Your Chats</h2>
+        {!isCreating && (
+          <button className="btn btn-primary btn-small" onClick={() => setIsCreating(true)}>
+            + New Chat
+          </button>
+        )}
+      </div>
+
+      {isCreating && (
+        <div className="card" style={{ marginBottom: '1rem' }}>
+          <h3 style={{ marginBottom: '0.5rem', fontSize: '1rem' }}>Create New Chat</h3>
+          <input
+            type="text"
+            className="input"
+            placeholder="Chat name..."
+            value={newChatName}
+            onChange={(e) => setNewChatName(e.target.value)}
+            onKeyPress={(e) => e.key === 'Enter' && handleCreateChat()}
+            autoFocus
+            style={{ marginBottom: '0.5rem' }}
+          />
+          <div style={{ display: 'flex', gap: '0.5rem' }}>
+            <button className="btn btn-primary btn-small" onClick={handleCreateChat}>
+              Create
+            </button>
+            <button 
+              className="btn btn-small" 
+              onClick={() => {
+                setIsCreating(false);
+                setNewChatName('');
+              }}
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      )}
+
+      {sortedChats.length === 0 ? (
+        <div className="card" style={{ textAlign: 'center', padding: '2rem' }}>
+          <p style={{ color: 'var(--text-secondary)' }}>No chats yet. Create one to get started!</p>
+        </div>
+      ) : (
+        <div>
+          {sortedChats.map((chat) => (
+            <div
+              key={chat.id}
+              className="card card-hover"
+              onClick={() => onChatSelect(chat.id)}
+            >
+              <div style={{ fontWeight: 600, marginBottom: '0.25rem' }}>{chat.name}</div>
+              <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
+                Mode: {chat.mode} • Updated: {new Date(chat.updated).toLocaleDateString()}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/Collapsible.tsx b/packages/cletus/src/browser/components/Collapsible.tsx
new file mode 100644
index 0000000..8f70454
--- /dev/null
+++ b/packages/cletus/src/browser/components/Collapsible.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+
+interface CollapsibleProps {
+  title: string;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}
+
+export const Collapsible: React.FC<CollapsibleProps> = ({ title, defaultOpen = false, children }) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  return (
+    <div className="collapsible">
+      <div className="collapsible-header" onClick={() => setIsOpen(!isOpen)}>
+        <span>{title}</span>
+        <span className={`collapsible-arrow ${isOpen ? 'open' : ''}`}>
+          ▶
+        </span>
+      </div>
+      {isOpen && (
+        <div className="collapsible-content">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/MessageItem.tsx b/packages/cletus/src/browser/components/MessageItem.tsx
new file mode 100644
index 0000000..251d827
--- /dev/null
+++ b/packages/cletus/src/browser/components/MessageItem.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import type { ConfigFile } from '../../config';
+import type { Message } from '../../schemas';
+import { OperationDisplay } from './OperationDisplay';
+
+interface MessageItemProps {
+  message: Message;
+  config: ConfigFile;
+  showInput: boolean;
+  showOutput: boolean;
+}
+
+export const MessageItem: React.FC<MessageItemProps> = ({ message, config, showInput, showOutput }) => {
+  const { role, content, operations } = message;
+
+  return (
+    <div className={`message message-${role}`}>
+      <div style={{ fontSize: '0.75rem', fontWeight: 600, marginBottom: '0.5rem', opacity: 0.7 }}>
+        {role === 'user' ? 'You' : role === 'assistant' ? 'Assistant' : 'System'}
+      </div>
+      
+      {content && (
+        <div style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word' }}>
+          {content}
+        </div>
+      )}
+
+      {operations && operations.length > 0 && (
+        <div style={{ marginTop: '1rem' }}>
+          {operations.map((operation, index) => (
+            <OperationDisplay
+              key={index}
+              operation={operation}
+              config={config}
+              showInput={showInput}
+              showOutput={showOutput}
+            />
+          ))}
+        </div>
+      )}
+
+      <div style={{ fontSize: '0.7rem', marginTop: '0.5rem', opacity: 0.5 }}>
+        {new Date(message.created).toLocaleString()}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/MessageList.tsx b/packages/cletus/src/browser/components/MessageList.tsx
new file mode 100644
index 0000000..794ea13
--- /dev/null
+++ b/packages/cletus/src/browser/components/MessageList.tsx
@@ -0,0 +1,41 @@
+import React, { useEffect, useRef } from 'react';
+import type { ConfigFile } from '../../config';
+import type { Message } from '../../schemas';
+import { MessageItem } from './MessageItem';
+
+interface MessageListProps {
+  messages: Message[];
+  config: ConfigFile;
+}
+
+export const MessageList: React.FC<MessageListProps> = ({ messages, config }) => {
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const showInput = config.getData().user.showInput ?? false;
+  const showOutput = config.getData().user.showOutput ?? false;
+
+  useEffect(() => {
+    // Scroll to bottom when messages change
+    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages.length]);
+
+  return (
+    <div style={{ flex: 1, overflow: 'auto', padding: '1.5rem' }}>
+      {messages.length === 0 ? (
+        <div style={{ textAlign: 'center', color: 'var(--text-secondary)', marginTop: '2rem' }}>
+          <p>No messages yet. Start a conversation!</p>
+        </div>
+      ) : (
+        messages.map((message, index) => (
+          <MessageItem
+            key={index}
+            message={message}
+            config={config}
+            showInput={showInput}
+            showOutput={showOutput}
+          />
+        ))
+      )}
+      <div ref={bottomRef} />
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/OperationDisplay.tsx b/packages/cletus/src/browser/components/OperationDisplay.tsx
new file mode 100644
index 0000000..7c4cadb
--- /dev/null
+++ b/packages/cletus/src/browser/components/OperationDisplay.tsx
@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import type { ConfigFile } from '../../config';
+import type { Operation } from '../../schemas';
+import { Collapsible } from './Collapsible';
+import { createCletusAI } from '../../ai';
+import { Operations } from '../../operations/types';
+
+interface OperationDisplayProps {
+  operation: Operation;
+  config: ConfigFile;
+  showInput: boolean;
+  showOutput: boolean;
+}
+
+export const OperationDisplay: React.FC<OperationDisplayProps> = ({
+  operation,
+  config,
+  showInput,
+  showOutput,
+}) => {
+  const { type, status, input, output } = operation;
+  
+  // Get operation definition to check for custom render
+  const opDef = Operations[type];
+  
+  // Status color
+  const statusColor = 
+    status === 'done' ? 'var(--success)' :
+    status === 'doneError' ? 'var(--error)' :
+    status === 'rejected' ? 'var(--error)' :
+    status === 'analyzedBlocked' ? 'var(--warning)' :
+    'var(--text-secondary)';
+
+  return (
+    <div style={{ marginBottom: '0.5rem' }}>
+      <div style={{
+        padding: '0.75rem',
+        background: 'var(--surface)',
+        borderRadius: '6px',
+        borderLeft: `3px solid ${statusColor}`,
+      }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
+          <span style={{ fontWeight: 600, fontFamily: 'monospace', fontSize: '0.9rem' }}>
+            {type}
+          </span>
+          <span style={{ fontSize: '0.85rem', color: statusColor }}>
+            {status}
+          </span>
+        </div>
+
+        {showInput && input && (
+          <Collapsible title="Input" defaultOpen={false}>
+            <pre style={{
+              fontSize: '0.85rem',
+              overflow: 'auto',
+              background: 'var(--bg)',
+              padding: '0.5rem',
+              borderRadius: '4px',
+            }}>
+              {JSON.stringify(input, null, 2)}
+            </pre>
+          </Collapsible>
+        )}
+
+        {showOutput && output && (
+          <Collapsible title="Output" defaultOpen={false}>
+            <pre style={{
+              fontSize: '0.85rem',
+              overflow: 'auto',
+              background: 'var(--bg)',
+              padding: '0.5rem',
+              borderRadius: '4px',
+            }}>
+              {JSON.stringify(output, null, 2)}
+            </pre>
+          </Collapsible>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/SettingsView.tsx b/packages/cletus/src/browser/components/SettingsView.tsx
new file mode 100644
index 0000000..64ab2e3
--- /dev/null
+++ b/packages/cletus/src/browser/components/SettingsView.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import type { ConfigFile } from '../../config';
+
+interface SettingsViewProps {
+  config: ConfigFile;
+}
+
+export const SettingsView: React.FC<SettingsViewProps> = ({ config }) => {
+  const data = config.getData();
+
+  return (
+    <div style={{ maxWidth: '800px' }}>
+      <div className="card" style={{ marginBottom: '1rem' }}>
+        <h2 style={{ marginBottom: '1rem', fontSize: '1.25rem' }}>User Information</h2>
+        <div className="flex flex-col gap-2">
+          <div>
+            <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', marginBottom: '0.25rem' }}>
+              Name
+            </div>
+            <div style={{ fontWeight: 500 }}>{data.user.name}</div>
+          </div>
+          {data.user.pronouns && (
+            <div>
+              <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', marginBottom: '0.25rem' }}>
+                Pronouns
+              </div>
+              <div style={{ fontWeight: 500 }}>{data.user.pronouns}</div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <div className="card" style={{ marginBottom: '1rem' }}>
+        <h2 style={{ marginBottom: '1rem', fontSize: '1.25rem' }}>Assistants</h2>
+        {data.assistants.length === 0 ? (
+          <p style={{ color: 'var(--text-secondary)' }}>No assistants configured</p>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {data.assistants.map((assistant, index) => (
+              <div key={index} style={{ padding: '0.75rem', background: 'var(--bg)', borderRadius: '6px' }}>
+                <div style={{ fontWeight: 600, marginBottom: '0.25rem' }}>{assistant.name}</div>
+                {assistant.description && (
+                  <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
+                    {assistant.description}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="card" style={{ marginBottom: '1rem' }}>
+        <h2 style={{ marginBottom: '1rem', fontSize: '1.25rem' }}>Data Types</h2>
+        {data.types.length === 0 ? (
+          <p style={{ color: 'var(--text-secondary)' }}>No data types defined</p>
+        ) : (
+          <div className="flex flex-col gap-2">
+            {data.types.map((type, index) => (
+              <div key={index} style={{ padding: '0.75rem', background: 'var(--bg)', borderRadius: '6px' }}>
+                <div style={{ fontWeight: 600, marginBottom: '0.25rem' }}>
+                  {type.friendlyName} ({type.name})
+                </div>
+                {type.description && (
+                  <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
+                    {type.description}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="card">
+        <h2 style={{ marginBottom: '1rem', fontSize: '1.25rem' }}>Note</h2>
+        <p style={{ fontSize: '0.9rem', color: 'var(--text-secondary)' }}>
+          Settings can only be modified through the CLI version of Cletus. 
+          Run <code style={{ background: 'var(--surface)', padding: '0.125rem 0.5rem', borderRadius: '4px' }}>cletus</code> to access the settings menu.
+        </p>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/Sidebar.tsx b/packages/cletus/src/browser/components/Sidebar.tsx
new file mode 100644
index 0000000..236fcbd
--- /dev/null
+++ b/packages/cletus/src/browser/components/Sidebar.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+interface SidebarProps {
+  currentView: 'chats' | 'settings';
+  onViewChange: (view: 'chats' | 'settings') => void;
+  userName: string;
+}
+
+export const Sidebar: React.FC<SidebarProps> = ({ currentView, onViewChange, userName }) => {
+  return (
+    <div className="sidebar">
+      <div style={{ padding: '1.5rem', borderBottom: '1px solid var(--border)' }}>
+        <h2 style={{ fontSize: '1.25rem', fontWeight: 600 }}>Cletus</h2>
+        <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginTop: '0.25rem' }}>
+          Browser Mode
+        </div>
+      </div>
+      
+      <nav style={{ flex: 1, padding: '1rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+        <button
+          className={`btn ${currentView === 'chats' ? 'btn-primary' : ''}`}
+          onClick={() => onViewChange('chats')}
+          style={{ width: '100%', textAlign: 'left' }}
+        >
+          💬 Chats
+        </button>
+        
+        <button
+          className={`btn ${currentView === 'settings' ? 'btn-primary' : ''}`}
+          onClick={() => onViewChange('settings')}
+          style={{ width: '100%', textAlign: 'left' }}
+        >
+          ⚙️ Settings
+        </button>
+      </nav>
+
+      <div style={{ 
+        padding: '1rem', 
+        borderTop: '1px solid var(--border)',
+        fontSize: '0.85rem',
+        color: 'var(--text-secondary)'
+      }}>
+        <div>{userName}</div>
+        <div style={{ fontSize: '0.75rem', color: 'var(--text-muted)', marginTop: '0.25rem' }}>
+          v0.3.1
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/index.html b/packages/cletus/src/browser/index.html
new file mode 100644
index 0000000..8ab7d86
--- /dev/null
+++ b/packages/cletus/src/browser/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Cletus - Browser Mode</title>
+  <style>
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    :root {
+      --primary: #3b82f6;
+      --primary-hover: #2563eb;
+      --bg: #ffffff;
+      --surface: #f5f5f5;
+      --surface-hover: #e5e5e5;
+      --border: #e0e0e0;
+      --text: #000000;
+      --text-secondary: #666666;
+      --text-muted: #999999;
+      --success: #10b981;
+      --error: #ef4444;
+      --warning: #f59e0b;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --primary: #3b82f6;
+        --primary-hover: #60a5fa;
+        --bg: #1a1a1a;
+        --surface: #2a2a2a;
+        --surface-hover: #3a3a3a;
+        --border: #404040;
+        --text: #ffffff;
+        --text-secondary: #a0a0a0;
+        --text-muted: #707070;
+      }
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.6;
+    }
+
+    #root {
+      width: 100%;
+      height: 100vh;
+    }
+
+    .loading {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      flex-direction: column;
+      gap: 1rem;
+    }
+
+    .spinner {
+      width: 48px;
+      height: 48px;
+      border: 4px solid var(--border);
+      border-top-color: var(--primary);
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+  </style>
+</head>
+<body>
+  <div id="root">
+    <div class="loading">
+      <div class="spinner"></div>
+      <p>Loading Cletus...</p>
+    </div>
+  </div>
+  <script type="module" src="./app.js"></script>
+</body>
+</html>
diff --git a/packages/cletus/src/browser/pages/ChatPage.tsx b/packages/cletus/src/browser/pages/ChatPage.tsx
new file mode 100644
index 0000000..7f58538
--- /dev/null
+++ b/packages/cletus/src/browser/pages/ChatPage.tsx
@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react';
+import type { ConfigFile } from '../../config';
+import type { ChatMeta, Message } from '../../schemas';
+import { ChatFile } from '../../chat';
+import { ChatHeader } from '../components/ChatHeader';
+import { MessageList } from '../components/MessageList';
+import { ChatInput } from '../components/ChatInput';
+
+interface ChatPageProps {
+  chatId: string;
+  config: ConfigFile;
+  onBack: () => void;
+}
+
+export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack }) => {
+  const [chatFile] = useState(() => new ChatFile(chatId));
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const chatMeta = config.getChats().find((c) => c.id === chatId);
+
+  useEffect(() => {
+    const loadMessages = async () => {
+      try {
+        await chatFile.load();
+        setMessages(chatFile.getMessages());
+      } catch (error) {
+        console.error('Error loading chat:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadMessages();
+  }, [chatId]);
+
+  const handleMessagesUpdate = () => {
+    setMessages([...chatFile.getMessages()]);
+  };
+
+  if (!chatMeta) {
+    return (
+      <div className="app-container">
+        <div className="main-content" style={{ justifyContent: 'center', alignItems: 'center' }}>
+          <div style={{ textAlign: 'center' }}>
+            <h2>Chat not found</h2>
+            <button className="btn btn-primary" onClick={onBack} style={{ marginTop: '1rem' }}>
+              Go Back
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="app-container">
+      <div className="main-content">
+        <ChatHeader chat={chatMeta} onBack={onBack} />
+        {loading ? (
+          <div style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+            <div className="spinner"></div>
+          </div>
+        ) : (
+          <>
+            <MessageList messages={messages} config={config} />
+            <ChatInput 
+              chatId={chatId} 
+              chatMeta={chatMeta}
+              config={config}
+              onMessageSent={handleMessagesUpdate}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/pages/MainPage.tsx b/packages/cletus/src/browser/pages/MainPage.tsx
new file mode 100644
index 0000000..fc903f0
--- /dev/null
+++ b/packages/cletus/src/browser/pages/MainPage.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import type { ConfigFile } from '../../config';
+import { Sidebar } from '../components/Sidebar';
+import { ChatList } from '../components/ChatList';
+import { SettingsView } from '../components/SettingsView';
+
+interface MainPageProps {
+  config: ConfigFile;
+  onChatSelect: (chatId: string) => void;
+  onExit: () => void;
+}
+
+type MainView = 'chats' | 'settings';
+
+export const MainPage: React.FC<MainPageProps> = ({ config, onChatSelect, onExit }) => {
+  const [view, setView] = useState<MainView>('chats');
+
+  return (
+    <div className="app-container">
+      <Sidebar
+        currentView={view}
+        onViewChange={setView}
+        userName={config.getData().user.name}
+      />
+      <div className="main-content">
+        <div className="header">
+          <h1>{view === 'chats' ? 'Chats' : 'Settings'}</h1>
+        </div>
+        <div style={{ flex: 1, overflow: 'auto', padding: '1.5rem' }}>
+          {view === 'chats' ? (
+            <ChatList config={config} onChatSelect={onChatSelect} />
+          ) : (
+            <SettingsView config={config} />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
new file mode 100644
index 0000000..e31bb3a
--- /dev/null
+++ b/packages/cletus/src/browser/server.ts
@@ -0,0 +1,371 @@
+import http from 'http';
+import fs from 'fs/promises';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { WebSocketServer, WebSocket } from 'ws';
+import { ConfigFile, configExists } from '../file-manager';
+import { ChatFile } from '../chat';
+import { createCletusAI } from '../ai';
+import { createChatAgent } from '../agents/chat-agent';
+import { runChatOrchestrator } from '../agents/chat-orchestrator';
+import type { Message, ChatMeta } from '../schemas';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+interface ApiResponse {
+  success: boolean;
+  data?: any;
+  error?: string;
+}
+
+interface WSMessage {
+  type: string;
+  data?: any;
+}
+
+export async function startBrowserServer(port: number = 3000): Promise<void> {
+  const server = http.createServer(async (req, res) => {
+    const url = req.url || '/';
+
+    // Enable CORS for local development
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
+    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+
+    if (req.method === 'OPTIONS') {
+      res.writeHead(200);
+      res.end();
+      return;
+    }
+
+    try {
+      // API routes
+      if (url.startsWith('/api/')) {
+        await handleApiRequest(req, res, url);
+        return;
+      }
+
+      // Serve static files
+      await serveStaticFile(url, res);
+    } catch (error) {
+      console.error('Server error:', error);
+      res.writeHead(500, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ success: false, error: 'Internal server error' }));
+    }
+  });
+
+  // WebSocket server for real-time chat
+  const wss = new WebSocketServer({ server });
+  wss.on('connection', (ws) => handleWebSocketConnection(ws));
+
+  server.listen(port, () => {
+    console.log('\n╔════════════════════════════════════════╗');
+    console.log('║   Cletus Browser Mode                  ║');
+    console.log('╚════════════════════════════════════════╝\n');
+    console.log(`  🌐 Server: http://localhost:${port}`);
+    console.log('  ⌨️  Press Ctrl+C to exit\n');
+  });
+
+  // Handle graceful shutdown
+  process.on('SIGINT', () => {
+    console.log('\n\nShutting down...');
+    wss.close();
+    server.close(() => {
+      process.exit(0);
+    });
+  });
+}
+
+function handleWebSocketConnection(ws: WebSocket): void {
+  let config: ConfigFile | null = null;
+  let chatFile: ChatFile | null = null;
+  let abortController: AbortController | null = null;
+
+  ws.on('message', async (data) => {
+    try {
+      const message: WSMessage = JSON.parse(data.toString());
+      
+      switch (message.type) {
+        case 'init_chat':
+          const { chatId } = message.data;
+          config = new ConfigFile();
+          await config.load();
+          chatFile = new ChatFile(chatId);
+          await chatFile.load();
+          
+          ws.send(JSON.stringify({
+            type: 'chat_initialized',
+            data: {
+              messages: chatFile.getMessages(),
+              chat: config.getChats().find(c => c.id === chatId),
+            },
+          }));
+          break;
+
+        case 'send_message':
+          if (!config || !chatFile) {
+            ws.send(JSON.stringify({
+              type: 'error',
+              data: { message: 'Chat not initialized' },
+            }));
+            return;
+          }
+
+          const { content } = message.data;
+          const chat = config.getChats().find(c => c.id === chatFile!.id);
+          if (!chat) {
+            ws.send(JSON.stringify({
+              type: 'error',
+              data: { message: 'Chat not found' },
+            }));
+            return;
+          }
+
+          // Add user message
+          const userMessage: Omit<Message, 'created'> = {
+            role: 'user',
+            content,
+          };
+          await chatFile.addMessage(userMessage);
+          
+          ws.send(JSON.stringify({
+            type: 'message_added',
+            data: { message: { ...userMessage, created: Date.now() } },
+          }));
+
+          // Process AI response
+          abortController = new AbortController();
+          const ai = createCletusAI(config);
+          const chatAgent = createChatAgent(ai);
+
+          const chatStatus = (status: string) => {
+            ws.send(JSON.stringify({
+              type: 'status_update',
+              data: { status },
+            }));
+          };
+
+          const onRefreshChat = () => {
+            ws.send(JSON.stringify({
+              type: 'messages_updated',
+              data: { messages: chatFile!.getMessages() },
+            }));
+          };
+
+          try {
+            await runChatOrchestrator({
+              config,
+              chat,
+              chatData: chatFile,
+              chatAgent,
+              ai,
+              signal: abortController.signal,
+              chatStatus,
+              events: {
+                onRefreshChat,
+                onRefreshPending: onRefreshChat,
+              },
+            });
+
+            ws.send(JSON.stringify({
+              type: 'response_complete',
+              data: { messages: chatFile.getMessages() },
+            }));
+          } catch (error) {
+            if (error instanceof Error && error.name !== 'AbortError') {
+              ws.send(JSON.stringify({
+                type: 'error',
+                data: { message: error.message },
+              }));
+            }
+          }
+          break;
+
+        case 'cancel':
+          if (abortController) {
+            abortController.abort();
+            abortController = null;
+          }
+          break;
+      }
+    } catch (error) {
+      console.error('WebSocket error:', error);
+      ws.send(JSON.stringify({
+        type: 'error',
+        data: { message: error instanceof Error ? error.message : 'Unknown error' },
+      }));
+    }
+  });
+
+  ws.on('close', () => {
+    if (abortController) {
+      abortController.abort();
+    }
+  });
+}
+
+async function handleApiRequest(
+  req: http.IncomingMessage,
+  res: http.ServerResponse,
+  url: string
+): Promise<void> {
+  res.setHeader('Content-Type', 'application/json');
+
+  // Check if config exists
+  if (url === '/api/config/exists') {
+    const exists = await configExists();
+    sendJson(res, 200, { success: true, data: { exists } });
+    return;
+  }
+
+  // Get config
+  if (url === '/api/config' && req.method === 'GET') {
+    const exists = await configExists();
+    if (!exists) {
+      sendJson(res, 404, { success: false, error: 'Config not found' });
+      return;
+    }
+
+    const config = new ConfigFile();
+    await config.load();
+    const data = config.getData();
+
+    sendJson(res, 200, {
+      success: true,
+      data: {
+        user: data.user,
+        assistants: data.assistants,
+        chats: data.chats,
+        types: data.types,
+      },
+    });
+    return;
+  }
+
+  // Get chat messages
+  const chatMatch = url.match(/^\/api\/chat\/([^/]+)\/messages$/);
+  if (chatMatch && req.method === 'GET') {
+    const chatId = chatMatch[1];
+    const chatFile = new ChatFile(chatId);
+    
+    try {
+      await chatFile.load();
+      const messages = chatFile.getMessages();
+      sendJson(res, 200, { success: true, data: { messages } });
+    } catch (error) {
+      sendJson(res, 404, { success: false, error: 'Chat not found' });
+    }
+    return;
+  }
+
+  // Create chat
+  if (url === '/api/chat/create' && req.method === 'POST') {
+    const body = await readBody(req);
+    const { name } = JSON.parse(body);
+
+    const config = new ConfigFile();
+    await config.load();
+    const chatId = await config.createChat(name);
+    await config.load(); // Reload to get updated data
+
+    sendJson(res, 200, { success: true, data: { chatId } });
+    return;
+  }
+
+  // Update chat
+  const updateChatMatch = url.match(/^\/api\/chat\/([^/]+)$/);
+  if (updateChatMatch && req.method === 'PUT') {
+    const chatId = updateChatMatch[1];
+    const body = await readBody(req);
+    const updates = JSON.parse(body);
+
+    const config = new ConfigFile();
+    await config.load();
+    await config.updateChat(chatId, updates);
+    await config.load();
+
+    sendJson(res, 200, { success: true, data: {} });
+    return;
+  }
+
+  // Add message to chat
+  const addMessageMatch = url.match(/^\/api\/chat\/([^/]+)\/message$/);
+  if (addMessageMatch && req.method === 'POST') {
+    const chatId = addMessageMatch[1];
+    const body = await readBody(req);
+    const message = JSON.parse(body);
+
+    const chatFile = new ChatFile(chatId);
+    await chatFile.load();
+    await chatFile.addMessage(message);
+
+    sendJson(res, 200, { success: true, data: {} });
+    return;
+  }
+
+  // 404
+  sendJson(res, 404, { success: false, error: 'Not found' });
+}
+
+async function serveStaticFile(url: string, res: http.ServerResponse): Promise<void> {
+  // Default to index.html
+  if (url === '/' || !url.includes('.')) {
+    url = '/index.html';
+  }
+
+  // Security: prevent directory traversal
+  const safePath = path.normalize(url).replace(/^(\.\.[\/\\])+/, '');
+  const distDir = path.join(__dirname, '../../../dist-browser');
+  const filePath = path.join(distDir, safePath);
+
+  // Ensure file is within dist directory
+  if (!filePath.startsWith(distDir)) {
+    res.writeHead(403);
+    res.end('Forbidden');
+    return;
+  }
+
+  try {
+    const content = await fs.readFile(filePath);
+    
+    // Set content type
+    const ext = path.extname(filePath);
+    const contentTypes: Record<string, string> = {
+      '.html': 'text/html; charset=utf-8',
+      '.js': 'application/javascript; charset=utf-8',
+      '.css': 'text/css; charset=utf-8',
+      '.json': 'application/json',
+      '.png': 'image/png',
+      '.jpg': 'image/jpeg',
+      '.svg': 'image/svg+xml',
+      '.ico': 'image/x-icon',
+    };
+    const contentType = contentTypes[ext] || 'text/plain';
+    
+    res.setHeader('Content-Type', contentType);
+    res.writeHead(200);
+    res.end(content);
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+      res.writeHead(404);
+      res.end('Not found');
+    } else {
+      throw error;
+    }
+  }
+}
+
+function sendJson(res: http.ServerResponse, status: number, data: ApiResponse): void {
+  res.writeHead(status, { 'Content-Type': 'application/json' });
+  res.end(JSON.stringify(data));
+}
+
+async function readBody(req: http.IncomingMessage): Promise<string> {
+  return new Promise((resolve, reject) => {
+    let body = '';
+    req.on('data', chunk => body += chunk.toString());
+    req.on('end', () => resolve(body));
+    req.on('error', reject);
+  });
+}
diff --git a/packages/cletus/src/browser/styles.css b/packages/cletus/src/browser/styles.css
new file mode 100644
index 0000000..13e2ec8
--- /dev/null
+++ b/packages/cletus/src/browser/styles.css
@@ -0,0 +1,212 @@
+/* Base styles */
+.app-container {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.sidebar {
+  width: 280px;
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.header {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: var(--surface);
+}
+
+.header h1 {
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+/* Loading */
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  gap: 1rem;
+}
+
+/* Buttons */
+.btn {
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--text);
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.btn:hover {
+  background: var(--surface-hover);
+}
+
+.btn-primary {
+  background: var(--primary);
+  color: white;
+  border: none;
+}
+
+.btn-primary:hover {
+  background: var(--primary-hover);
+}
+
+.btn-small {
+  padding: 0.25rem 0.75rem;
+  font-size: 0.85rem;
+}
+
+/* Inputs */
+.input {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 0.9rem;
+  width: 100%;
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--primary);
+}
+
+.textarea {
+  min-height: 100px;
+  resize: vertical;
+  font-family: inherit;
+}
+
+/* Cards */
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.card-hover:hover {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+}
+
+/* Collapsible */
+.collapsible {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow: hidden;
+  margin-bottom: 0.5rem;
+}
+
+.collapsible-header {
+  padding: 0.75rem 1rem;
+  background: var(--surface);
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  user-select: none;
+}
+
+.collapsible-header:hover {
+  background: var(--surface-hover);
+}
+
+.collapsible-content {
+  padding: 1rem;
+  border-top: 1px solid var(--border);
+  background: var(--bg);
+}
+
+.collapsible-arrow {
+  transition: transform 0.2s;
+  font-size: 0.8rem;
+}
+
+.collapsible-arrow.open {
+  transform: rotate(90deg);
+}
+
+/* Messages */
+.message {
+  padding: 1rem;
+  margin-bottom: 1rem;
+  border-radius: 8px;
+}
+
+.message-user {
+  background: var(--primary);
+  color: white;
+  margin-left: 2rem;
+}
+
+.message-assistant {
+  background: var(--surface);
+  margin-right: 2rem;
+}
+
+.message-system {
+  background: var(--surface);
+  font-size: 0.9rem;
+  font-style: italic;
+  color: var(--text-secondary);
+}
+
+/* Utilities */
+.flex {
+  display: flex;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+}
+
+.text-muted {
+  color: var(--text-muted);
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.w-full {
+  width: 100%;
+}
diff --git a/packages/cletus/src/index.tsx b/packages/cletus/src/index.tsx
index 39d6ad5..1004cb5 100644
--- a/packages/cletus/src/index.tsx
+++ b/packages/cletus/src/index.tsx
@@ -87,9 +87,11 @@ const App: React.FC = () => {
 /**
  * Parse command line arguments
  */
-function parseArgs(): { profile?: string } {
+function parseArgs(): { profile?: string; browser?: boolean; port?: number } {
   const args = process.argv.slice(2);
   let profile: string | undefined;
+  let browser = false;
+  let port: number | undefined;
 
   for (let i = 0; i < args.length; i++) {
     const arg = args[i];
@@ -103,16 +105,36 @@ function parseArgs(): { profile?: string } {
       profile = args[i + 1];
       i++; // Skip next argument
     }
+    // Handle --browser flag
+    else if (arg === '--browser') {
+      browser = true;
+    }
+    // Handle --port=number format
+    else if (arg.startsWith('--port=')) {
+      port = parseInt(arg.substring('--port='.length), 10);
+    }
+    // Handle --port number format
+    else if (arg === '--port' && i + 1 < args.length) {
+      port = parseInt(args[i + 1], 10);
+      i++; // Skip next argument
+    }
   }
 
-  return { profile };
+  return { profile, browser, port };
 }
 
 async function main() {
   // Parse command line arguments and set global profile
-  const { profile } = parseArgs();
+  const { profile, browser, port } = parseArgs();
   setProfile(profile);
 
+  // If browser mode, start HTTP server instead of CLI
+  if (browser) {
+    const { startBrowserServer } = await import('./browser/server');
+    await startBrowserServer(port);
+    return;
+  }
+
   // Clear screen and move cursor to top
   process.stdout.write('\x1Bc');
 

From 4422742828fdcd73d198dbc4b31d2ca8189982f6 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 10 Dec 2025 11:44:08 +0000
Subject: [PATCH 03/27] Fix browser client to not import server-side
 dependencies

Co-authored-by: ClickerMonkey <421233+ClickerMonkey@users.noreply.github.com>
---
 package-lock.json                             | 47 +++++++++--
 packages/cletus/src/browser/app.tsx           | 79 ++++++++++++++-----
 .../src/browser/components/ChatHeader.tsx     |  8 +-
 .../src/browser/components/ChatInput.tsx      | 12 ++-
 .../src/browser/components/ChatList.tsx       | 43 +++++++---
 .../src/browser/components/MessageItem.tsx    | 20 +++--
 .../src/browser/components/MessageList.tsx    | 23 ++++--
 .../browser/components/OperationDisplay.tsx   | 18 ++---
 .../src/browser/components/SettingsView.tsx   | 21 ++++-
 .../cletus/src/browser/pages/ChatPage.tsx     | 61 +++++++++++---
 .../cletus/src/browser/pages/InitPage.tsx     | 38 +++++++++
 .../cletus/src/browser/pages/MainPage.tsx     | 34 ++++++--
 packages/cletus/src/browser/server.ts         |  3 +-
 13 files changed, 319 insertions(+), 88 deletions(-)
 create mode 100644 packages/cletus/src/browser/pages/InitPage.tsx

diff --git a/package-lock.json b/package-lock.json
index efdaa2f..da78453 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5527,6 +5527,16 @@
         "csstype": "^3.2.2"
       }
     },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
     "node_modules/@types/retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
@@ -5565,6 +5575,16 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/yargs": {
       "version": "17.0.35",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.35.tgz",
@@ -12341,15 +12361,26 @@
       "license": "MIT"
     },
     "node_modules/react": {
-      "version": "19.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
-      "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
-      "dev": true,
+      "version": "19.2.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz",
+      "integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==",
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-dom": {
+      "version": "19.2.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.1.tgz",
+      "integrity": "sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==",
+      "license": "MIT",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.1"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
@@ -12678,7 +12709,6 @@
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
       "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/semver": {
@@ -14190,7 +14220,6 @@
       "version": "8.18.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
       "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
-      "devOptional": true,
       "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
@@ -14450,7 +14479,9 @@
         "ink-text-input": "^6.0.0",
         "mic": "^2.1.2",
         "react": "^19.2.0",
-        "sharp": "^0.34.3"
+        "react-dom": "^19.2.0",
+        "sharp": "^0.34.3",
+        "ws": "^8.18.0"
       },
       "bin": {
         "cletus": "dist/index.js"
@@ -14474,8 +14505,10 @@
         "@types/node": "^24.9.1",
         "@types/pdf-parse": "^1.1.5",
         "@types/react": "^19.2.2",
+        "@types/react-dom": "^19.2.0",
         "@types/uuid": "^10.0.0",
         "@types/wav": "^1.0.4",
+        "@types/ws": "^8.5.13",
         "babel-jest": "^29.7.0",
         "diff": "^8.0.2",
         "esbuild": "^0.26.0",
diff --git a/packages/cletus/src/browser/app.tsx b/packages/cletus/src/browser/app.tsx
index f61ee3c..956a597 100644
--- a/packages/cletus/src/browser/app.tsx
+++ b/packages/cletus/src/browser/app.tsx
@@ -1,33 +1,74 @@
 import React, { useState, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
-import { ConfigFile, configExists } from '../file-manager';
-import { InkInitWizard } from '../components/InkInitWizard';
 import { MainPage } from './pages/MainPage';
 import { ChatPage } from './pages/ChatPage';
+import { InitPage } from './pages/InitPage';
 import './styles.css';
 
 type AppView = 'loading' | 'init' | 'main' | 'chat';
 
+interface ConfigData {
+  user: {
+    name: string;
+    pronouns?: string;
+    showInput?: boolean;
+    showOutput?: boolean;
+  };
+  assistants: Array<{
+    name: string;
+    description?: string;
+  }>;
+  chats: Array<{
+    id: string;
+    name: string;
+    mode: string;
+    assistant?: string;
+    created: number;
+    updated: number;
+  }>;
+  types: Array<{
+    name: string;
+    friendlyName: string;
+    description?: string;
+  }>;
+}
+
 const App: React.FC = () => {
   const [view, setView] = useState<AppView>('loading');
-  const [config, setConfig] = useState<ConfigFile | null>(null);
+  const [config, setConfig] = useState<ConfigData | null>(null);
   const [selectedChatId, setSelectedChatId] = useState<string | null>(null);
 
   useEffect(() => {
-    async function checkConfig() {
-      const exists = await configExists();
-      if (exists) {
-        const cfg = new ConfigFile();
-        await cfg.load();
-        setConfig(cfg);
-        setView('main');
-      } else {
+    async function loadConfig() {
+      try {
+        const response = await fetch('/api/config');
+        if (response.ok) {
+          const data = await response.json();
+          setConfig(data.data);
+          setView('main');
+        } else {
+          setView('init');
+        }
+      } catch (error) {
+        console.error('Failed to load config:', error);
         setView('init');
       }
     }
-    checkConfig();
+    loadConfig();
   }, []);
 
+  const reloadConfig = async () => {
+    try {
+      const response = await fetch('/api/config');
+      if (response.ok) {
+        const data = await response.json();
+        setConfig(data.data);
+      }
+    } catch (error) {
+      console.error('Failed to reload config:', error);
+    }
+  };
+
   if (view === 'loading') {
     return (
       <div className="loading-container">
@@ -39,10 +80,9 @@ const App: React.FC = () => {
 
   if (view === 'init') {
     return (
-      <InkInitWizard
-        onComplete={(cfg) => {
-          setConfig(cfg);
-          setView('main');
+      <InitPage
+        onComplete={() => {
+          reloadConfig().then(() => setView('main'));
         }}
       />
     );
@@ -54,6 +94,7 @@ const App: React.FC = () => {
         chatId={selectedChatId}
         config={config}
         onBack={() => setView('main')}
+        onConfigChange={reloadConfig}
       />
     );
   }
@@ -66,11 +107,7 @@ const App: React.FC = () => {
           setSelectedChatId(chatId);
           setView('chat');
         }}
-        onExit={() => {
-          if (typeof window !== 'undefined') {
-            window.close();
-          }
-        }}
+        onConfigChange={reloadConfig}
       />
     );
   }
diff --git a/packages/cletus/src/browser/components/ChatHeader.tsx b/packages/cletus/src/browser/components/ChatHeader.tsx
index 8f8bc48..21053a1 100644
--- a/packages/cletus/src/browser/components/ChatHeader.tsx
+++ b/packages/cletus/src/browser/components/ChatHeader.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import type { ChatMeta } from '../../schemas';
+
+interface ChatMeta {
+  id: string;
+  name: string;
+  mode: string;
+  assistant?: string;
+}
 
 interface ChatHeaderProps {
   chat: ChatMeta;
diff --git a/packages/cletus/src/browser/components/ChatInput.tsx b/packages/cletus/src/browser/components/ChatInput.tsx
index 4b06188..c8cf4c1 100644
--- a/packages/cletus/src/browser/components/ChatInput.tsx
+++ b/packages/cletus/src/browser/components/ChatInput.tsx
@@ -1,15 +1,19 @@
 import React, { useState, useRef, useEffect } from 'react';
-import type { ConfigFile } from '../../config';
-import type { ChatMeta } from '../../schemas';
+
+interface ChatMeta {
+  id: string;
+  name: string;
+  mode: string;
+  assistant?: string;
+}
 
 interface ChatInputProps {
   chatId: string;
   chatMeta: ChatMeta;
-  config: ConfigFile;
   onMessageSent: () => void;
 }
 
-export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, config, onMessageSent }) => {
+export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, onMessageSent }) => {
   const [input, setInput] = useState('');
   const [isConnecting, setIsConnecting] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
diff --git a/packages/cletus/src/browser/components/ChatList.tsx b/packages/cletus/src/browser/components/ChatList.tsx
index 6bde74f..2baba10 100644
--- a/packages/cletus/src/browser/components/ChatList.tsx
+++ b/packages/cletus/src/browser/components/ChatList.tsx
@@ -1,27 +1,50 @@
 import React, { useState } from 'react';
-import type { ConfigFile } from '../../config';
-import type { ChatMeta } from '../../schemas';
+
+interface ChatMeta {
+  id: string;
+  name: string;
+  mode: string;
+  created: number;
+  updated: number;
+}
+
+interface ConfigData {
+  chats: ChatMeta[];
+}
 
 interface ChatListProps {
-  config: ConfigFile;
+  config: ConfigData;
   onChatSelect: (chatId: string) => void;
+  onConfigChange: () => Promise<void>;
 }
 
-export const ChatList: React.FC<ChatListProps> = ({ config, onChatSelect }) => {
+export const ChatList: React.FC<ChatListProps> = ({ config, onChatSelect, onConfigChange }) => {
   const [isCreating, setIsCreating] = useState(false);
   const [newChatName, setNewChatName] = useState('');
 
-  const chats = config.getChats();
+  const chats = config.chats;
   const sortedChats = [...chats].sort((a, b) => b.updated - a.updated);
 
   const handleCreateChat = async () => {
     if (!newChatName.trim()) return;
 
-    const chatId = await config.createChat(newChatName.trim());
-    await config.load();
-    setIsCreating(false);
-    setNewChatName('');
-    onChatSelect(chatId);
+    try {
+      const response = await fetch('/api/chat/create', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: newChatName.trim() }),
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        await onConfigChange();
+        setIsCreating(false);
+        setNewChatName('');
+        onChatSelect(data.data.chatId);
+      }
+    } catch (error) {
+      console.error('Failed to create chat:', error);
+    }
   };
 
   return (
diff --git a/packages/cletus/src/browser/components/MessageItem.tsx b/packages/cletus/src/browser/components/MessageItem.tsx
index 251d827..106407a 100644
--- a/packages/cletus/src/browser/components/MessageItem.tsx
+++ b/packages/cletus/src/browser/components/MessageItem.tsx
@@ -1,16 +1,27 @@
 import React from 'react';
-import type { ConfigFile } from '../../config';
-import type { Message } from '../../schemas';
 import { OperationDisplay } from './OperationDisplay';
 
+interface Operation {
+  type: string;
+  status: string;
+  input: any;
+  output?: any;
+}
+
+interface Message {
+  role: 'user' | 'assistant' | 'system';
+  content?: string;
+  created: number;
+  operations?: Operation[];
+}
+
 interface MessageItemProps {
   message: Message;
-  config: ConfigFile;
   showInput: boolean;
   showOutput: boolean;
 }
 
-export const MessageItem: React.FC<MessageItemProps> = ({ message, config, showInput, showOutput }) => {
+export const MessageItem: React.FC<MessageItemProps> = ({ message, showInput, showOutput }) => {
   const { role, content, operations } = message;
 
   return (
@@ -31,7 +42,6 @@ export const MessageItem: React.FC<MessageItemProps> = ({ message, config, showI
             <OperationDisplay
               key={index}
               operation={operation}
-              config={config}
               showInput={showInput}
               showOutput={showOutput}
             />
diff --git a/packages/cletus/src/browser/components/MessageList.tsx b/packages/cletus/src/browser/components/MessageList.tsx
index 794ea13..5bd7092 100644
--- a/packages/cletus/src/browser/components/MessageList.tsx
+++ b/packages/cletus/src/browser/components/MessageList.tsx
@@ -1,17 +1,27 @@
 import React, { useEffect, useRef } from 'react';
-import type { ConfigFile } from '../../config';
-import type { Message } from '../../schemas';
 import { MessageItem } from './MessageItem';
 
+interface Message {
+  role: 'user' | 'assistant' | 'system';
+  content?: string;
+  created: number;
+  operations?: Array<{
+    type: string;
+    status: string;
+    input: any;
+    output?: any;
+  }>;
+}
+
 interface MessageListProps {
   messages: Message[];
-  config: ConfigFile;
+  showInput: boolean;
+  showOutput: boolean;
+  onMessagesUpdate: (messages: Message[]) => void;
 }
 
-export const MessageList: React.FC<MessageListProps> = ({ messages, config }) => {
+export const MessageList: React.FC<MessageListProps> = ({ messages, showInput, showOutput, onMessagesUpdate }) => {
   const bottomRef = useRef<HTMLDivElement>(null);
-  const showInput = config.getData().user.showInput ?? false;
-  const showOutput = config.getData().user.showOutput ?? false;
 
   useEffect(() => {
     // Scroll to bottom when messages change
@@ -29,7 +39,6 @@ export const MessageList: React.FC<MessageListProps> = ({ messages, config }) =>
           <MessageItem
             key={index}
             message={message}
-            config={config}
             showInput={showInput}
             showOutput={showOutput}
           />
diff --git a/packages/cletus/src/browser/components/OperationDisplay.tsx b/packages/cletus/src/browser/components/OperationDisplay.tsx
index 7c4cadb..dbe49ad 100644
--- a/packages/cletus/src/browser/components/OperationDisplay.tsx
+++ b/packages/cletus/src/browser/components/OperationDisplay.tsx
@@ -1,28 +1,26 @@
-import React, { useState } from 'react';
-import type { ConfigFile } from '../../config';
-import type { Operation } from '../../schemas';
+import React from 'react';
 import { Collapsible } from './Collapsible';
-import { createCletusAI } from '../../ai';
-import { Operations } from '../../operations/types';
+
+interface Operation {
+  type: string;
+  status: string;
+  input: any;
+  output?: any;
+}
 
 interface OperationDisplayProps {
   operation: Operation;
-  config: ConfigFile;
   showInput: boolean;
   showOutput: boolean;
 }
 
 export const OperationDisplay: React.FC<OperationDisplayProps> = ({
   operation,
-  config,
   showInput,
   showOutput,
 }) => {
   const { type, status, input, output } = operation;
   
-  // Get operation definition to check for custom render
-  const opDef = Operations[type];
-  
   // Status color
   const statusColor = 
     status === 'done' ? 'var(--success)' :
diff --git a/packages/cletus/src/browser/components/SettingsView.tsx b/packages/cletus/src/browser/components/SettingsView.tsx
index 64ab2e3..92c7d53 100644
--- a/packages/cletus/src/browser/components/SettingsView.tsx
+++ b/packages/cletus/src/browser/components/SettingsView.tsx
@@ -1,12 +1,27 @@
 import React from 'react';
-import type { ConfigFile } from '../../config';
+
+interface ConfigData {
+  user: {
+    name: string;
+    pronouns?: string;
+  };
+  assistants: Array<{
+    name: string;
+    description?: string;
+  }>;
+  types: Array<{
+    name: string;
+    friendlyName: string;
+    description?: string;
+  }>;
+}
 
 interface SettingsViewProps {
-  config: ConfigFile;
+  config: ConfigData;
 }
 
 export const SettingsView: React.FC<SettingsViewProps> = ({ config }) => {
-  const data = config.getData();
+  const data = config;
 
   return (
     <div style={{ maxWidth: '800px' }}>
diff --git a/packages/cletus/src/browser/pages/ChatPage.tsx b/packages/cletus/src/browser/pages/ChatPage.tsx
index 7f58538..05e60e6 100644
--- a/packages/cletus/src/browser/pages/ChatPage.tsx
+++ b/packages/cletus/src/browser/pages/ChatPage.tsx
@@ -1,31 +1,61 @@
 import React, { useState, useEffect } from 'react';
-import type { ConfigFile } from '../../config';
-import type { ChatMeta, Message } from '../../schemas';
-import { ChatFile } from '../../chat';
 import { ChatHeader } from '../components/ChatHeader';
 import { MessageList } from '../components/MessageList';
 import { ChatInput } from '../components/ChatInput';
 
+interface Message {
+  role: 'user' | 'assistant' | 'system';
+  content?: string;
+  created: number;
+  operations?: Array<{
+    type: string;
+    status: string;
+    input: any;
+    output?: any;
+  }>;
+}
+
+interface ChatMeta {
+  id: string;
+  name: string;
+  mode: string;
+  assistant?: string;
+  created: number;
+  updated: number;
+}
+
+interface ConfigData {
+  user: {
+    name: string;
+    showInput?: boolean;
+    showOutput?: boolean;
+  };
+  chats: Array<ChatMeta>;
+}
+
 interface ChatPageProps {
   chatId: string;
-  config: ConfigFile;
+  config: ConfigData;
   onBack: () => void;
+  onConfigChange: () => Promise<void>;
 }
 
-export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack }) => {
-  const [chatFile] = useState(() => new ChatFile(chatId));
+export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onConfigChange }) => {
   const [messages, setMessages] = useState<Message[]>([]);
   const [loading, setLoading] = useState(true);
 
-  const chatMeta = config.getChats().find((c) => c.id === chatId);
+  const chatMeta = config.chats.find((c) => c.id === chatId);
 
   useEffect(() => {
     const loadMessages = async () => {
       try {
-        await chatFile.load();
-        setMessages(chatFile.getMessages());
+        const response = await fetch(`/api/chat/${chatId}/messages`);
+        if (response.ok) {
+          const data = await response.json();
+          setMessages(data.data.messages || []);
+        }
       } catch (error) {
-        console.error('Error loading chat:', error);
+        console.error('Error loading messages:', error);
       } finally {
         setLoading(false);
       }
@@ -35,7 +65,8 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack }) =>
   }, [chatId]);
 
   const handleMessagesUpdate = () => {
-    setMessages([...chatFile.getMessages()]);
+    // Messages are updated via WebSocket in ChatInput
+    // This is just a callback for when we need to refresh
   };
 
   if (!chatMeta) {
@@ -63,11 +94,15 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack }) =>
           </div>
         ) : (
           <>
-            <MessageList messages={messages} config={config} />
+            <MessageList 
+              messages={messages}
+              showInput={config.user.showInput ?? false}
+              showOutput={config.user.showOutput ?? false}
+              onMessagesUpdate={setMessages}
+            />
             <ChatInput 
               chatId={chatId} 
               chatMeta={chatMeta}
-              config={config}
               onMessageSent={handleMessagesUpdate}
             />
           </>
diff --git a/packages/cletus/src/browser/pages/InitPage.tsx b/packages/cletus/src/browser/pages/InitPage.tsx
new file mode 100644
index 0000000..c342953
--- /dev/null
+++ b/packages/cletus/src/browser/pages/InitPage.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+interface InitPageProps {
+  onComplete: () => void;
+}
+
+export const InitPage: React.FC<InitPageProps> = ({ onComplete }) => {
+  return (
+    <div className="app-container">
+      <div className="main-content" style={{ justifyContent: 'center', alignItems: 'center' }}>
+        <div style={{ maxWidth: '600px', padding: '2rem', textAlign: 'center' }}>
+          <h1 style={{ marginBottom: '1.5rem', fontSize: '2rem' }}>Welcome to Cletus</h1>
+          <p style={{ marginBottom: '1rem', color: 'var(--text-secondary)' }}>
+            Cletus needs to be initialized before you can use the browser mode.
+          </p>
+          <p style={{ marginBottom: '1rem' }}>
+            Please run Cletus in CLI mode first to complete the setup:
+          </p>
+          <pre style={{
+            background: 'var(--surface)',
+            padding: '1rem',
+            borderRadius: '6px',
+            marginBottom: '1.5rem',
+            fontSize: '1.1rem',
+          }}>
+            <code>cletus</code>
+          </pre>
+          <p style={{ marginBottom: '1.5rem', fontSize: '0.9rem', color: 'var(--text-secondary)' }}>
+            After completing the setup wizard, click the button below to continue.
+          </p>
+          <button className="btn btn-primary" onClick={onComplete}>
+            I've completed setup - Refresh
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/pages/MainPage.tsx b/packages/cletus/src/browser/pages/MainPage.tsx
index fc903f0..d638294 100644
--- a/packages/cletus/src/browser/pages/MainPage.tsx
+++ b/packages/cletus/src/browser/pages/MainPage.tsx
@@ -1,18 +1,40 @@
 import React, { useState } from 'react';
-import type { ConfigFile } from '../../config';
 import { Sidebar } from '../components/Sidebar';
 import { ChatList } from '../components/ChatList';
 import { SettingsView } from '../components/SettingsView';
 
+interface ConfigData {
+  user: {
+    name: string;
+    pronouns?: string;
+  };
+  assistants: Array<{
+    name: string;
+    description?: string;
+  }>;
+  chats: Array<{
+    id: string;
+    name: string;
+    mode: string;
+    created: number;
+    updated: number;
+  }>;
+  types: Array<{
+    name: string;
+    friendlyName: string;
+    description?: string;
+  }>;
+}
+
 interface MainPageProps {
-  config: ConfigFile;
+  config: ConfigData;
   onChatSelect: (chatId: string) => void;
-  onExit: () => void;
+  onConfigChange: () => Promise<void>;
 }
 
 type MainView = 'chats' | 'settings';
 
-export const MainPage: React.FC<MainPageProps> = ({ config, onChatSelect, onExit }) => {
+export const MainPage: React.FC<MainPageProps> = ({ config, onChatSelect, onConfigChange }) => {
   const [view, setView] = useState<MainView>('chats');
 
   return (
@@ -20,7 +42,7 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onChatSelect, onExit
       <Sidebar
         currentView={view}
         onViewChange={setView}
-        userName={config.getData().user.name}
+        userName={config.user.name}
       />
       <div className="main-content">
         <div className="header">
@@ -28,7 +50,7 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onChatSelect, onExit
         </div>
         <div style={{ flex: 1, overflow: 'auto', padding: '1.5rem' }}>
           {view === 'chats' ? (
-            <ChatList config={config} onChatSelect={onChatSelect} />
+            <ChatList config={config} onChatSelect={onChatSelect} onConfigChange={onConfigChange} />
           ) : (
             <SettingsView config={config} />
           )}
diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
index e31bb3a..817daf9 100644
--- a/packages/cletus/src/browser/server.ts
+++ b/packages/cletus/src/browser/server.ts
@@ -3,7 +3,8 @@ import fs from 'fs/promises';
 import path from 'path';
 import { fileURLToPath } from 'url';
 import { WebSocketServer, WebSocket } from 'ws';
-import { ConfigFile, configExists } from '../file-manager';
+import { configExists } from '../file-manager';
+import { ConfigFile } from '../config';
 import { ChatFile } from '../chat';
 import { createCletusAI } from '../ai';
 import { createChatAgent } from '../agents/chat-agent';

From 2941728c5b746f0b6e1d3b382ac99ad23fd4a157 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 10 Dec 2025 12:03:58 +0000
Subject: [PATCH 04/27] Fix server initialization issues and lazy-load
 dependencies

Co-authored-by: ClickerMonkey <421233+ClickerMonkey@users.noreply.github.com>
---
 packages/cletus/src/browser/server.ts     | 17 ++++++++++-------
 packages/cletus/src/helpers/files.ts      |  4 +++-
 packages/cletus/src/index.tsx             |  1 +
 packages/cletus/src/operations/artist.tsx |  4 +++-
 packages/cletus/src/schemas.ts            |  1 -
 5 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
index 817daf9..147af01 100644
--- a/packages/cletus/src/browser/server.ts
+++ b/packages/cletus/src/browser/server.ts
@@ -6,13 +6,10 @@ import { WebSocketServer, WebSocket } from 'ws';
 import { configExists } from '../file-manager';
 import { ConfigFile } from '../config';
 import { ChatFile } from '../chat';
-import { createCletusAI } from '../ai';
-import { createChatAgent } from '../agents/chat-agent';
-import { runChatOrchestrator } from '../agents/chat-orchestrator';
 import type { Message, ChatMeta } from '../schemas';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+const __serverFilename = fileURLToPath(import.meta.url);
+const __serverDirname = path.dirname(__serverFilename);
 
 interface ApiResponse {
   success: boolean;
@@ -60,7 +57,7 @@ export async function startBrowserServer(port: number = 3000): Promise<void> {
   const wss = new WebSocketServer({ server });
   wss.on('connection', (ws) => handleWebSocketConnection(ws));
 
-  server.listen(port, () => {
+  server.listen(port, '127.0.0.1', () => {
     console.log('\n╔════════════════════════════════════════╗');
     console.log('║   Cletus Browser Mode                  ║');
     console.log('╚════════════════════════════════════════╝\n');
@@ -137,6 +134,12 @@ function handleWebSocketConnection(ws: WebSocket): void {
 
           // Process AI response
           abortController = new AbortController();
+          
+          // Lazy-load AI components
+          const { createCletusAI } = await import('../ai');
+          const { createChatAgent } = await import('../agents/chat-agent');
+          const { runChatOrchestrator } = await import('../agents/chat-orchestrator');
+          
           const ai = createCletusAI(config);
           const chatAgent = createChatAgent(ai);
 
@@ -317,7 +320,7 @@ async function serveStaticFile(url: string, res: http.ServerResponse): Promise<v
 
   // Security: prevent directory traversal
   const safePath = path.normalize(url).replace(/^(\.\.[\/\\])+/, '');
-  const distDir = path.join(__dirname, '../../../dist-browser');
+  const distDir = path.join(__serverDirname, '../../../dist-browser');
   const filePath = path.join(distDir, safePath);
 
   // Ensure file is within dist directory
diff --git a/packages/cletus/src/helpers/files.ts b/packages/cletus/src/helpers/files.ts
index 0ed4e0f..f296900 100644
--- a/packages/cletus/src/helpers/files.ts
+++ b/packages/cletus/src/helpers/files.ts
@@ -1,6 +1,5 @@
 import fs from "fs";
 import path from "path";
-import sharp from "sharp";
 import pdfParse from "pdf-parse";
 import XLSX from "xlsx";
 import * as mammoth from "mammoth";
@@ -948,6 +947,9 @@ async function processZipFile(
  */
 async function validateImage(imagePath: string): Promise<{ size: number, width: number, height: number } | false> {
   try {
+    // Lazy-load sharp to avoid loading it on startup
+    const sharp = (await import("sharp")).default;
+    
     // Get image dimensions using sharp
     const metadata = await sharp(imagePath).metadata();
     
diff --git a/packages/cletus/src/index.tsx b/packages/cletus/src/index.tsx
index 1004cb5..0ac2a11 100644
--- a/packages/cletus/src/index.tsx
+++ b/packages/cletus/src/index.tsx
@@ -139,6 +139,7 @@ async function main() {
   process.stdout.write('\x1Bc');
 
   // Initialize embed worker (don't await - let it init in background)
+  // Only initialize worker for CLI mode
   initWorker();
 
   const { waitUntilExit } = render(React.createElement(App), {
diff --git a/packages/cletus/src/operations/artist.tsx b/packages/cletus/src/operations/artist.tsx
index 7de503e..41049f3 100644
--- a/packages/cletus/src/operations/artist.tsx
+++ b/packages/cletus/src/operations/artist.tsx
@@ -1,7 +1,6 @@
 import { ImageGenerationResponse } from "@aeye/ai";
 import fs from 'fs/promises';
 import path from 'path';
-import sharp from "sharp";
 import url from 'url';
 import { abbreviate, cosineSimilarity, linkFile, paginateText, pluralize } from "../common";
 import { canEmbed, embed } from "../embed";
@@ -25,6 +24,9 @@ function linkImage(imagePath: string): string {
 async function loadImageAsDataUrl(cwd: string, imagePath: string): Promise<string> {
   const fullPath = resolveImage(cwd, imagePath);
 
+  // Lazy-load sharp
+  const sharp = (await import("sharp")).default;
+  
   const metadata = await sharp(fullPath).metadata();
   const width = metadata.width || 0;
   const height = metadata.height || 0;
diff --git a/packages/cletus/src/schemas.ts b/packages/cletus/src/schemas.ts
index 5f11feb..60256b9 100644
--- a/packages/cletus/src/schemas.ts
+++ b/packages/cletus/src/schemas.ts
@@ -1,6 +1,5 @@
 import { any, z } from 'zod';
 import { AUTONOMOUS } from './constants';
-import { cache } from 'sharp';
 
 // ============================================================================
 // User Schema

From bcd4cda05fafbfe6fae93c10c9733eeea82b9506 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 10 Dec 2025 12:06:42 +0000
Subject: [PATCH 05/27] Fix static file serving path and complete browser mode
 implementation

Co-authored-by: ClickerMonkey <421233+ClickerMonkey@users.noreply.github.com>
---
 packages/cletus/src/browser/server.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
index 147af01..d964445 100644
--- a/packages/cletus/src/browser/server.ts
+++ b/packages/cletus/src/browser/server.ts
@@ -320,7 +320,8 @@ async function serveStaticFile(url: string, res: http.ServerResponse): Promise<v
 
   // Security: prevent directory traversal
   const safePath = path.normalize(url).replace(/^(\.\.[\/\\])+/, '');
-  const distDir = path.join(__serverDirname, '../../../dist-browser');
+  // When bundled, this code is in dist/index.js, so dist-browser is ../dist-browser
+  const distDir = path.join(__serverDirname, '../dist-browser');
   const filePath = path.join(distDir, safePath);
 
   // Ensure file is within dist directory

From 3bba60e9ffd5d9151e9028774d49617c85595731 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 10 Dec 2025 12:11:44 +0000
Subject: [PATCH 06/27] Address code review feedback: improve path security and
 fix comments

Co-authored-by: ClickerMonkey <421233+ClickerMonkey@users.noreply.github.com>
---
 packages/cletus/src/browser/server.ts | 9 ++++-----
 packages/cletus/src/index.tsx         | 1 -
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
index d964445..24d9bb2 100644
--- a/packages/cletus/src/browser/server.ts
+++ b/packages/cletus/src/browser/server.ts
@@ -319,13 +319,12 @@ async function serveStaticFile(url: string, res: http.ServerResponse): Promise<v
   }
 
   // Security: prevent directory traversal
-  const safePath = path.normalize(url).replace(/^(\.\.[\/\\])+/, '');
   // When bundled, this code is in dist/index.js, so dist-browser is ../dist-browser
-  const distDir = path.join(__serverDirname, '../dist-browser');
-  const filePath = path.join(distDir, safePath);
+  const distDir = path.resolve(__serverDirname, '../dist-browser');
+  const filePath = path.resolve(distDir, url.slice(1)); // Remove leading slash
 
-  // Ensure file is within dist directory
-  if (!filePath.startsWith(distDir)) {
+  // Ensure file is within dist directory using resolved paths
+  if (!filePath.startsWith(distDir + path.sep) && filePath !== distDir) {
     res.writeHead(403);
     res.end('Forbidden');
     return;
diff --git a/packages/cletus/src/index.tsx b/packages/cletus/src/index.tsx
index 0ac2a11..1004cb5 100644
--- a/packages/cletus/src/index.tsx
+++ b/packages/cletus/src/index.tsx
@@ -139,7 +139,6 @@ async function main() {
   process.stdout.write('\x1Bc');
 
   // Initialize embed worker (don't await - let it init in background)
-  // Only initialize worker for CLI mode
   initWorker();
 
   const { waitUntilExit } = render(React.createElement(App), {

From d9bc4c1fb6235288e7e0604e4f8333ee4270433f Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Thu, 11 Dec 2025 10:57:47 -0500
Subject: [PATCH 07/27] Refactor UI components and add Tailwind CSS

Replaces legacy UI components with new modular components under 'ui', removes unused components, and introduces Tailwind CSS for styling. Adds Tailwind and related dependencies, updates build configs, and refactors browser app structure to support new operations and improved UI. Cleans up and reorganizes code for maintainability and scalability.
---
 package-lock.json                             | 2748 ++++++++++++++++-
 package.json                                  |    8 +
 packages/cletus/esbuild.browser.cjs           |  106 +-
 packages/cletus/package.json                  |    4 +
 packages/cletus/postcss.config.cjs            |    6 +
 packages/cletus/src/browser/app.tsx           |  160 +-
 .../src/browser/components/ChatInput.tsx      |   76 +-
 .../src/browser/components/ChatList.tsx       |  192 +-
 .../src/browser/components/Collapsible.tsx    |   27 -
 .../src/browser/components/MessageItem.tsx    |  158 +-
 .../src/browser/components/MessageList.tsx    |   22 +-
 .../browser/components/OperationDisplay.tsx   |   79 -
 .../src/browser/components/SettingsView.tsx   |   19 +-
 .../src/browser/components/ui/button.tsx      |   51 +
 .../cletus/src/browser/components/ui/card.tsx |   58 +
 .../src/browser/components/ui/input.tsx       |   23 +
 .../src/browser/components/ui/scroll-area.tsx |   19 +
 .../src/browser/components/ui/textarea.tsx    |   22 +
 packages/cletus/src/browser/index.html        |   78 +-
 packages/cletus/src/browser/lib/utils.ts      |    6 +
 .../operations/BaseOperationDisplay.tsx       |  194 ++
 .../src/browser/operations/architect.tsx      |  115 +
 .../cletus/src/browser/operations/artist.tsx  |   84 +
 .../cletus/src/browser/operations/clerk.tsx   |  181 ++
 .../cletus/src/browser/operations/dba.tsx     |  144 +
 .../cletus/src/browser/operations/index.tsx   |   66 +
 .../src/browser/operations/internet.tsx       |   54 +
 .../src/browser/operations/librarian.tsx      |   51 +
 .../cletus/src/browser/operations/planner.tsx |   43 +
 .../cletus/src/browser/operations/render.tsx  |   56 +
 .../src/browser/operations/secretary.tsx      |   56 +
 .../cletus/src/browser/pages/ChatPage.tsx     |  164 +-
 .../cletus/src/browser/pages/MainPage.tsx     |  127 +-
 packages/cletus/src/browser/server.ts         |  372 +--
 packages/cletus/src/browser/styles.css        |  245 +-
 packages/cletus/src/common.ts                 |  336 +-
 packages/cletus/src/index.tsx                 |    3 +
 packages/cletus/src/logger.ts                 |   14 +-
 packages/cletus/src/shared.ts                 |  319 ++
 packages/cletus/tailwind.config.cjs           |   73 +
 40 files changed, 5159 insertions(+), 1400 deletions(-)
 create mode 100644 packages/cletus/postcss.config.cjs
 delete mode 100644 packages/cletus/src/browser/components/Collapsible.tsx
 delete mode 100644 packages/cletus/src/browser/components/OperationDisplay.tsx
 create mode 100644 packages/cletus/src/browser/components/ui/button.tsx
 create mode 100644 packages/cletus/src/browser/components/ui/card.tsx
 create mode 100644 packages/cletus/src/browser/components/ui/input.tsx
 create mode 100644 packages/cletus/src/browser/components/ui/scroll-area.tsx
 create mode 100644 packages/cletus/src/browser/components/ui/textarea.tsx
 create mode 100644 packages/cletus/src/browser/lib/utils.ts
 create mode 100644 packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
 create mode 100644 packages/cletus/src/browser/operations/architect.tsx
 create mode 100644 packages/cletus/src/browser/operations/artist.tsx
 create mode 100644 packages/cletus/src/browser/operations/clerk.tsx
 create mode 100644 packages/cletus/src/browser/operations/dba.tsx
 create mode 100644 packages/cletus/src/browser/operations/index.tsx
 create mode 100644 packages/cletus/src/browser/operations/internet.tsx
 create mode 100644 packages/cletus/src/browser/operations/librarian.tsx
 create mode 100644 packages/cletus/src/browser/operations/planner.tsx
 create mode 100644 packages/cletus/src/browser/operations/render.tsx
 create mode 100644 packages/cletus/src/browser/operations/secretary.tsx
 create mode 100644 packages/cletus/src/shared.ts
 create mode 100644 packages/cletus/tailwind.config.cjs

diff --git a/package-lock.json b/package-lock.json
index da78453..29ac7f7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,15 @@
         "packages/test-integration"
       ],
       "devDependencies": {
+        "@tailwindcss/postcss": "^4.1.17",
+        "autoprefixer": "^10.4.22",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.559.0",
+        "postcss": "^8.5.6",
         "rimraf": "^6.1.0",
+        "tailwind-merge": "^3.4.0",
+        "tailwindcss": "^4.1.17",
         "tsconfig-paths": "^4.2.0",
         "typescript": "^5.9.3"
       }
@@ -88,6 +96,19 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@anthropic-ai/sdk": {
       "version": "0.70.1",
       "resolved": "https://registry.npmjs.org/@anthropic-ai/sdk/-/sdk-0.70.1.tgz",
@@ -2748,7 +2769,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "@emnapi/wasi-threads": "1.1.0",
         "tslib": "^2.4.0"
@@ -2771,7 +2791,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -4382,7 +4401,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "@emnapi/core": "^1.4.3",
         "@emnapi/runtime": "^1.4.3",
@@ -5321,6 +5339,290 @@
         "node": ">=18.0.0"
       }
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.17.tgz",
+      "integrity": "sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.30.2",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.17"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.17.tgz",
+      "integrity": "sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.17",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.17",
+        "@tailwindcss/oxide-darwin-x64": "4.1.17",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.17",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.17",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.17",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.17",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.17",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.17",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.17",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.17",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.17"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.17.tgz",
+      "integrity": "sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.17.tgz",
+      "integrity": "sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.17.tgz",
+      "integrity": "sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.17.tgz",
+      "integrity": "sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.17.tgz",
+      "integrity": "sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.17.tgz",
+      "integrity": "sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.17.tgz",
+      "integrity": "sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.17.tgz",
+      "integrity": "sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.17.tgz",
+      "integrity": "sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.17.tgz",
+      "integrity": "sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.6.0",
+        "@emnapi/runtime": "^1.6.0",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.0.7",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.17.tgz",
+      "integrity": "sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.17.tgz",
+      "integrity": "sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.17.tgz",
+      "integrity": "sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.17",
+        "@tailwindcss/oxide": "4.1.17",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.17"
+      }
+    },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
+      "integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+      }
+    },
     "node_modules/@tavily/core": {
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/@tavily/core/-/core-0.5.13.tgz",
@@ -5372,7 +5674,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "tslib": "^2.4.0"
       }
@@ -5422,6 +5723,15 @@
         "@babel/types": "^7.28.2"
       }
     },
+    "node_modules/@types/debug": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
+      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/ms": "*"
+      }
+    },
     "node_modules/@types/diff": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/@types/diff/-/diff-7.0.2.tgz",
@@ -5429,6 +5739,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/estree-jsx": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
+      "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "*"
+      }
+    },
     "node_modules/@types/file-type": {
       "version": "10.6.0",
       "resolved": "https://registry.npmjs.org/@types/file-type/-/file-type-10.6.0.tgz",
@@ -5459,6 +5784,15 @@
         "@types/tinycolor2": "*"
       }
     },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -5497,6 +5831,21 @@
         "pretty-format": "^30.0.0"
       }
     },
+    "node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
+    "node_modules/@types/ms": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-2.1.0.tgz",
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "24.10.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz",
@@ -5521,7 +5870,6 @@
       "version": "19.2.6",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.6.tgz",
       "integrity": "sha512-p/jUvulfgU7oKtj6Xpk8cA2Y1xKTtICGpJYeJXz2YVO2UcvjQgeRMLDGfDeqeRW2Ta+0QNFwcc8X3GH8SxZz6w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -5558,6 +5906,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/unist": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
+      "license": "MIT"
+    },
     "node_modules/@types/uuid": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
@@ -5616,7 +5970,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
       "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/@unrs/resolver-binding-android-arm-eabi": {
@@ -6065,6 +6418,44 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.22",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.22.tgz",
+      "integrity": "sha512-ARe0v/t9gO28Bznv6GgqARmVqcWOV3mfgUPn9becPHMiD3o9BwlRgaeccZnwTpZ7Zwqrm+c1sUSsMxIzQzc8Xg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.27.0",
+        "caniuse-lite": "^1.0.30001754",
+        "fraction.js": "^5.3.4",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/axios": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.2.tgz",
@@ -6233,6 +6624,16 @@
         "@babel/core": "^7.11.0 || ^8.0.0-beta.1"
       }
     },
+    "node_modules/bail": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
+      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -6605,8 +7006,18 @@
       ],
       "license": "CC-BY-4.0"
     },
-    "node_modules/cfb": {
-      "version": "1.2.2",
+    "node_modules/ccount": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/cfb": {
+      "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
       "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
       "dev": true,
@@ -6700,6 +7111,46 @@
         "node": ">=10"
       }
     },
+    "node_modules/character-entities": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-html4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-entities-legacy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/chownr": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
@@ -6756,6 +7207,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
     "node_modules/cli-boxes": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-3.0.0.tgz",
@@ -6910,6 +7374,16 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -6989,6 +7463,16 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -8113,11 +8597,23 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/data-uri-to-buffer": {
@@ -8134,7 +8630,6 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -8158,6 +8653,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/decode-named-character-reference": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz",
+      "integrity": "sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/dedent": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/dedent/-/dedent-1.7.0.tgz",
@@ -8255,6 +8763,15 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -8280,6 +8797,19 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "license": "MIT"
     },
+    "node_modules/devlop": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/devtools-protocol": {
       "version": "0.0.1521046",
       "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1521046.tgz",
@@ -8454,6 +8984,20 @@
         "once": "^1.4.0"
       }
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
+      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -8671,6 +9215,16 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-util-is-identifier-name": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
+      "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -8779,6 +9333,12 @@
         "node": "^18.14.0 || ^20.0.0 || ^22.0.0 || >=24.0.0"
       }
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
     "node_modules/extract-zip": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/extract-zip/-/extract-zip-2.0.1.tgz",
@@ -9044,6 +9604,20 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fs-minipass": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
@@ -9408,6 +9982,164 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-from-parse5": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.3.tgz",
+      "integrity": "sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hastscript": "^9.0.0",
+        "property-information": "^7.0.0",
+        "vfile": "^6.0.0",
+        "vfile-location": "^5.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-parse-selector": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-raw": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.1.0.tgz",
+      "integrity": "sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "hast-util-to-parse5": "^8.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "parse5": "^7.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-raw/node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/hast-util-raw/node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
+      "integrity": "sha512-zl6s8LwNyo1P9uw+XJGvZtdFF1GdAkOg8ujOw+4Pyb76874fLps4ueHXDhXWdk6YHQ6OgUtinliG7RsYvCbbBg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-js": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.1.tgz",
+      "integrity": "sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-whitespace": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hastscript": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-9.0.1.tgz",
+      "integrity": "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^4.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
@@ -9434,6 +10166,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/html-url-attributes": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
+      "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/http-proxy-agent": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@@ -9768,6 +10520,12 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+      "integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+      "license": "MIT"
+    },
     "node_modules/ip-address": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
@@ -9791,6 +10549,30 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -9834,6 +10616,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-descriptor": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.3.tgz",
@@ -9874,6 +10666,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/is-in-ci": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-in-ci/-/is-in-ci-2.0.0.tgz",
@@ -9900,6 +10702,18 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-plain-obj": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -10920,6 +11734,16 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -11140,33 +11964,294 @@
         "immediate": "~3.0.5"
       }
     },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "devOptional": true,
-      "license": "MIT"
-    },
-    "node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+    "node_modules/lightningcss": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
       "dev": true,
-      "license": "MIT",
+      "license": "MPL-2.0",
       "dependencies": {
-        "p-locate": "^4.1.0"
+        "detect-libc": "^2.0.3"
       },
       "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/lodash.debounce": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
-      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "cpu": [
+        "arm64"
+      ],
       "dev": true,
-      "license": "MIT"
-    },
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/locate-path": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -11174,157 +12259,1042 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
+    "node_modules/longest-streak": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
+      "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lop": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/lop/-/lop-0.4.2.tgz",
+      "integrity": "sha512-RefILVDQ4DKoRZsJ4Pj22TxE3omDO47yFpkIBoDKzkqPRISs5U1cnAdg/5583YPkWPaLIYHOKRMQSvjFsO26cw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "duck": "^0.1.12",
+        "option": "~0.2.1",
+        "underscore": "^1.13.1"
+      }
+    },
+    "node_modules/lru-cache": {
+      "version": "11.2.2",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.2.tgz",
+      "integrity": "sha512-F9ODfyqML2coTIsQpSkRHnLSZMtkU8Q+mSfcaIyKwy58u+8k5nvAYeiNhsyMARvzNcXJ9QfWVrcPsC9e9rAxtg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "20 || >=22"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.559.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.559.0.tgz",
+      "integrity": "sha512-3ymrkBPXWk3U2bwUDg6TdA6hP5iGDMgPEAMLhchEgTQmA+g0Zk24tOtKtXMx35w1PizTmsBC3RhP88QYm+7mHQ==",
+      "dev": true,
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
+      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "semver": "^7.5.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/make-error": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
+      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/makeerror": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
+      "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "tmpl": "1.0.5"
+      }
+    },
+    "node_modules/mammoth": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/mammoth/-/mammoth-1.11.0.tgz",
+      "integrity": "sha512-BcEqqY/BOwIcI1iR5tqyVlqc3KIaMRa4egSoK83YAVrBf6+yqdAAbtUcFDCWX8Zef8/fgNZ6rl4VUv+vVX8ddQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@xmldom/xmldom": "^0.8.6",
+        "argparse": "~1.0.3",
+        "base64-js": "^1.5.1",
+        "bluebird": "~3.4.0",
+        "dingbat-to-unicode": "^1.0.1",
+        "jszip": "^3.7.1",
+        "lop": "^0.4.2",
+        "path-is-absolute": "^1.0.0",
+        "underscore": "^1.13.1",
+        "xmlbuilder": "^10.0.0"
+      },
+      "bin": {
+        "mammoth": "bin/mammoth"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/markdown-table": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
+      "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/matcher": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz",
+      "integrity": "sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==",
+      "license": "MIT",
+      "dependencies": {
+        "escape-string-regexp": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/matcher/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
+      "integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mdast-util-from-markdown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.2.tgz",
+      "integrity": "sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark": "^4.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
+      "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-gfm-autolink-literal": "^2.0.0",
+        "mdast-util-gfm-footnote": "^2.0.0",
+        "mdast-util-gfm-strikethrough": "^2.0.0",
+        "mdast-util-gfm-table": "^2.0.0",
+        "mdast-util-gfm-task-list-item": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-find-and-replace": "^3.0.0",
+        "micromark-util-character": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-strikethrough": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "markdown-table": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-task-list-item": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-expression": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
+      "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdx-jsx": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.2.0.tgz",
+      "integrity": "sha512-lj/z8v0r6ZtsN/cGNNtemmmfoLAFZnjMbNyLzBafjzikOM+glrjNHPlf6lQDOTccj9n5b0PPihEBbhneMyGs1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-stringify-position": "^4.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-mdxjs-esm": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
+      "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree-jsx": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-phrasing": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.1.tgz",
+      "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-markdown": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.2.tgz",
+      "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "@types/unist": "^3.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^4.0.0",
+        "mdast-util-to-string": "^4.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-decode-string": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-string": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/mic": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/mic/-/mic-2.1.2.tgz",
+      "integrity": "sha512-rpl4tgdXX24sAzYwjRc5OZfGNAuhUIIjdd0cw8+Ubq7rp3iGhi40AdqcwurDWhEZADk60tPOxb3E2MpoeLeyxw==",
+      "license": "MIT"
+    },
+    "node_modules/micromark": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
+      "integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@types/debug": "^4.0.0",
+        "debug": "^4.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-core-commonmark": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz",
+      "integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "decode-named-character-reference": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-factory-destination": "^2.0.0",
+        "micromark-factory-label": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-factory-title": "^2.0.0",
+        "micromark-factory-whitespace": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-html-tag-name": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-subtokenize": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-extension-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-extension-gfm-autolink-literal": "^2.0.0",
+        "micromark-extension-gfm-footnote": "^2.0.0",
+        "micromark-extension-gfm-strikethrough": "^2.0.0",
+        "micromark-extension-gfm-table": "^2.0.0",
+        "micromark-extension-gfm-tagfilter": "^2.0.0",
+        "micromark-extension-gfm-task-list-item": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-strikethrough": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
+      "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-tagfilter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-factory-destination": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
+      "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-label": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.1.tgz",
+      "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-space": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.1.tgz",
+      "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-factory-title": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.1.tgz",
+      "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
       "license": "MIT",
       "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
       }
     },
-    "node_modules/lop": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/lop/-/lop-0.4.2.tgz",
-      "integrity": "sha512-RefILVDQ4DKoRZsJ4Pj22TxE3omDO47yFpkIBoDKzkqPRISs5U1cnAdg/5583YPkWPaLIYHOKRMQSvjFsO26cw==",
-      "dev": true,
-      "license": "BSD-2-Clause",
+    "node_modules/micromark-factory-whitespace": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.1.tgz",
+      "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "duck": "^0.1.12",
-        "option": "~0.2.1",
-        "underscore": "^1.13.1"
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
       }
     },
-    "node_modules/lru-cache": {
-      "version": "11.2.2",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.2.tgz",
-      "integrity": "sha512-F9ODfyqML2coTIsQpSkRHnLSZMtkU8Q+mSfcaIyKwy58u+8k5nvAYeiNhsyMARvzNcXJ9QfWVrcPsC9e9rAxtg==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": "20 || >=22"
+    "node_modules/micromark-util-character": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.1.tgz",
+      "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
       }
     },
-    "node_modules/make-dir": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
-      "integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
-      "dev": true,
+    "node_modules/micromark-util-chunked": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.1.tgz",
+      "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
       "license": "MIT",
       "dependencies": {
-        "semver": "^7.5.3"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "micromark-util-symbol": "^2.0.0"
       }
     },
-    "node_modules/make-dir/node_modules/semver": {
-      "version": "7.7.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
-      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
+    "node_modules/micromark-util-classify-character": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.1.tgz",
+      "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
       }
     },
-    "node_modules/make-error": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
-      "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true,
-      "license": "ISC"
+    "node_modules/micromark-util-combine-extensions": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.1.tgz",
+      "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
     },
-    "node_modules/makeerror": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
-      "integrity": "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg==",
-      "dev": true,
-      "license": "BSD-3-Clause",
+    "node_modules/micromark-util-decode-numeric-character-reference": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.2.tgz",
+      "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "tmpl": "1.0.5"
+        "micromark-util-symbol": "^2.0.0"
       }
     },
-    "node_modules/mammoth": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/mammoth/-/mammoth-1.11.0.tgz",
-      "integrity": "sha512-BcEqqY/BOwIcI1iR5tqyVlqc3KIaMRa4egSoK83YAVrBf6+yqdAAbtUcFDCWX8Zef8/fgNZ6rl4VUv+vVX8ddQ==",
-      "dev": true,
-      "license": "BSD-2-Clause",
+    "node_modules/micromark-util-decode-string": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.1.tgz",
+      "integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
       "dependencies": {
-        "@xmldom/xmldom": "^0.8.6",
-        "argparse": "~1.0.3",
-        "base64-js": "^1.5.1",
-        "bluebird": "~3.4.0",
-        "dingbat-to-unicode": "^1.0.1",
-        "jszip": "^3.7.1",
-        "lop": "^0.4.2",
-        "path-is-absolute": "^1.0.0",
-        "underscore": "^1.13.1",
-        "xmlbuilder": "^10.0.0"
-      },
-      "bin": {
-        "mammoth": "bin/mammoth"
-      },
-      "engines": {
-        "node": ">=12.0.0"
+        "decode-named-character-reference": "^1.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-decode-numeric-character-reference": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
       }
     },
-    "node_modules/matcher": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz",
-      "integrity": "sha512-OkeDaAZ/bQCxeFAozM55PKcKU0yJMPGifLwV4Qgjitu+5MoAfSQN4lsLJeXZ1b8w0x+/Emda6MZgXS1jvsapng==",
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-html-tag-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.1.tgz",
+      "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/micromark-util-normalize-identifier": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.1.tgz",
+      "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
       "license": "MIT",
       "dependencies": {
-        "escape-string-regexp": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
+        "micromark-util-symbol": "^2.0.0"
       }
     },
-    "node_modules/matcher/node_modules/escape-string-regexp": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
-      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+    "node_modules/micromark-util-resolve-all": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.1.tgz",
+      "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
       "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
       }
     },
-    "node_modules/math-intrinsics": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
-      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "dev": true,
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
       "license": "MIT",
-      "engines": {
-        "node": ">= 0.4"
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
       }
     },
-    "node_modules/merge-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "dev": true,
+    "node_modules/micromark-util-subtokenize": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz",
+      "integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      }
+    },
+    "node_modules/micromark-util-symbol": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.1.tgz",
+      "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
       "license": "MIT"
     },
-    "node_modules/mic": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/mic/-/mic-2.1.2.tgz",
-      "integrity": "sha512-rpl4tgdXX24sAzYwjRc5OZfGNAuhUIIjdd0cw8+Ubq7rp3iGhi40AdqcwurDWhEZADk60tPOxb3E2MpoeLeyxw==",
+    "node_modules/micromark-util-types": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz",
+      "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
       "license": "MIT"
     },
     "node_modules/micromatch": {
@@ -11462,7 +13432,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/mustache": {
@@ -11486,6 +13455,25 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/napi-postinstall": {
       "version": "0.3.4",
       "resolved": "https://registry.npmjs.org/napi-postinstall/-/napi-postinstall-0.3.4.tgz",
@@ -11610,6 +13598,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -11999,6 +13997,31 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-entities": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.2.tgz",
+      "integrity": "sha512-GG2AQYWoLgL877gQIKeRPGO1xF9+eG1ujIb5soS5gPvLQ1y2o8FL90w2QWNdf9I361Mpp7726c+lj3U0qK1uGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/parse-entities/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
+      "license": "MIT"
+    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -12180,6 +14203,56 @@
         "node": ">=4"
       }
     },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/pretty-format": {
       "version": "30.2.0",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-30.2.0.tgz",
@@ -12254,6 +14327,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/property-information": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.1.0.tgz",
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/proxy-agent": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/proxy-agent/-/proxy-agent-6.5.0.tgz",
@@ -12388,6 +14471,33 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-markdown": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-10.1.0.tgz",
+      "integrity": "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "html-url-attributes": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      }
+    },
     "node_modules/react-reconciler": {
       "version": "0.33.0",
       "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.33.0.tgz",
@@ -12478,6 +14588,87 @@
         "regjsparser": "bin/parser"
       }
     },
+    "node_modules/rehype-raw": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
+      "integrity": "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-raw": "^9.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-gfm": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
+      "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-gfm": "^3.0.0",
+        "micromark-extension-gfm": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-parse": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "micromark-util-types": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-rehype": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.2.tgz",
+      "integrity": "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-stringify": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/replicate": {
       "version": "0.34.1",
       "resolved": "https://registry.npmjs.org/replicate/-/replicate-0.34.1.tgz",
@@ -12951,6 +15142,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-support": {
       "version": "0.5.13",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
@@ -12962,6 +15163,16 @@
         "source-map": "^0.6.0"
       }
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -13147,6 +15358,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/stringify-entities": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "license": "MIT",
+      "dependencies": {
+        "character-entities-html4": "^2.0.0",
+        "character-entities-legacy": "^3.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz",
@@ -13249,6 +15474,24 @@
         "url": "https://github.com/sponsors/Borewit"
       }
     },
+    "node_modules/style-to-js": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/style-to-js/-/style-to-js-1.1.21.tgz",
+      "integrity": "sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "style-to-object": "1.0.14"
+      }
+    },
+    "node_modules/style-to-object": {
+      "version": "1.0.14",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+      "integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-parser": "0.2.7"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -13290,6 +15533,38 @@
         "url": "https://opencollective.com/synckit"
       }
     },
+    "node_modules/tailwind-merge": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
+      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.17.tgz",
+      "integrity": "sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/tar": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
@@ -13511,6 +15786,26 @@
         "url": "https://github.com/sponsors/Borewit"
       }
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/trough": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
+      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/ts-algebra": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ts-algebra/-/ts-algebra-2.0.0.tgz",
@@ -13753,6 +16048,93 @@
         "node": ">=4"
       }
     },
+    "node_modules/unified": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
+      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "bail": "^2.0.0",
+        "devlop": "^1.0.0",
+        "extend": "^3.0.0",
+        "is-plain-obj": "^4.0.0",
+        "trough": "^2.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-is": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
+      "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-stringify-position": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
+      "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/unist-util-visit-parents": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz",
+      "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unrs-resolver": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz",
@@ -13855,6 +16237,48 @@
         "node": ">=10.12.0"
       }
     },
+    "node_modules/vfile": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-location": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz",
+      "integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/vfile-message": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
+      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-stringify-position": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/walker": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
@@ -13923,6 +16347,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/web-namespaces": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+      "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/webdriver-bidi-protocol": {
       "version": "0.3.9",
       "resolved": "https://registry.npmjs.org/webdriver-bidi-protocol/-/webdriver-bidi-protocol-0.3.9.tgz",
@@ -14423,6 +16857,16 @@
         "zod": "^3.25 || ^4"
       }
     },
+    "node_modules/zwitch": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "packages/ai": {
       "name": "@aeye/ai",
       "version": "0.3.1",
@@ -14480,6 +16924,9 @@
         "mic": "^2.1.2",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
+        "react-markdown": "^10.1.0",
+        "rehype-raw": "^7.0.0",
+        "remark-gfm": "^4.0.1",
         "sharp": "^0.34.3",
         "ws": "^8.18.0"
       },
@@ -14498,6 +16945,7 @@
         "@jest/globals": "^29.7.0",
         "@langchain/core": "^0.3.79",
         "@langchain/textsplitters": "^0.1.0",
+        "@tailwindcss/typography": "^0.5.19",
         "@tavily/core": "^0.5.13",
         "@types/diff": "^7.0.2",
         "@types/file-type": "^10.6.0",
diff --git a/package.json b/package.json
index dcdec13..6bc511f 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,15 @@
     "url": "https://github.com/ClickerMonkey/aeye.git"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.17",
+    "autoprefixer": "^10.4.22",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.559.0",
+    "postcss": "^8.5.6",
     "rimraf": "^6.1.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.17",
     "tsconfig-paths": "^4.2.0",
     "typescript": "^5.9.3"
   }
diff --git a/packages/cletus/esbuild.browser.cjs b/packages/cletus/esbuild.browser.cjs
index b1097f7..310e66b 100644
--- a/packages/cletus/esbuild.browser.cjs
+++ b/packages/cletus/esbuild.browser.cjs
@@ -1,45 +1,73 @@
 const esbuild = require('esbuild');
 const fs = require('fs');
 const path = require('path');
+const postcss = require('postcss');
+const tailwindcss = require('@tailwindcss/postcss');
+const autoprefixer = require('autoprefixer');
 
-// Build the browser client
-esbuild.build({
-  entryPoints: ['src/browser/app.tsx'],
-  bundle: true,
-  platform: 'browser',
-  target: 'es2020',
-  outfile: 'dist-browser/app.js',
-  format: 'esm',
-  minify: true,
-  sourcemap: true,
-  logLevel: 'info',
-  define: {
-    'process.env.NODE_ENV': '"production"'
-  },
-  loader: {
-    '.css': 'css',
-  },
-}).then(() => {
-  // Copy static files
-  const distDir = path.join(__dirname, 'dist-browser');
-  if (!fs.existsSync(distDir)) {
-    fs.mkdirSync(distDir, { recursive: true });
+async function build() {
+  try {
+    const distDir = path.join(__dirname, 'dist-browser');
+    if (!fs.existsSync(distDir)) {
+      fs.mkdirSync(distDir, { recursive: true });
+    }
+
+    // Build Tailwind CSS using PostCSS
+    console.log('Building Tailwind CSS...');
+    const inputCss = fs.readFileSync(path.join(__dirname, 'src/browser/styles.css'), 'utf8');
+    const configPath = path.join(__dirname, 'tailwind.config.cjs');
+
+    const result = await postcss([
+      tailwindcss,
+      autoprefixer,
+    ]).process(inputCss, {
+      from: path.join(__dirname, 'src/browser/styles.css'),
+      to: path.join(distDir, 'styles.css'),
+    });
+
+    fs.writeFileSync(path.join(distDir, 'styles.css'), result.css);
+    console.log('✓ Tailwind CSS built successfully');
+
+    // Build the browser client
+    console.log('Building browser client...');
+    await esbuild.build({
+      entryPoints: ['src/browser/app.tsx'],
+      bundle: true,
+      platform: 'browser',
+      target: 'es2020',
+      outfile: 'dist-browser/app.js',
+      format: 'esm',
+      minify: true,
+      sourcemap: true,
+      logLevel: 'info',
+      define: {
+        'process.env.NODE_ENV': '"production"'
+      },
+      external: ['*.css'],
+    });
+
+    // Copy HTML file and update it to include the styles
+    const htmlContent = fs.readFileSync(
+      path.join(__dirname, 'src/browser/index.html'),
+      'utf-8'
+    );
+
+    // Inject the CSS link into the HTML with absolute path
+    const updatedHtml = htmlContent.replace(
+      '</head>',
+      '  <link rel="stylesheet" href="/styles.css">\n</head>'
+    );
+
+    fs.writeFileSync(
+      path.join(distDir, 'index.html'),
+      updatedHtml
+    );
+
+    console.log('✓ Browser client built successfully');
+  } catch (error) {
+    console.error('Browser build failed:', error);
+    process.exit(1);
   }
+}
 
-  // Copy HTML file
-  fs.copyFileSync(
-    path.join(__dirname, 'src/browser/index.html'),
-    path.join(distDir, 'index.html')
-  );
-
-  // Copy CSS file (it's imported in app.tsx but needs to be available)
-  fs.copyFileSync(
-    path.join(__dirname, 'src/browser/styles.css'),
-    path.join(distDir, 'styles.css')
-  );
-
-  console.log('✓ Browser client built successfully');
-}).catch((error) => {
-  console.error('Browser build failed:', error);
-  process.exit(1);
-});
+build();
diff --git a/packages/cletus/package.json b/packages/cletus/package.json
index e109f10..31a804e 100644
--- a/packages/cletus/package.json
+++ b/packages/cletus/package.json
@@ -50,6 +50,9 @@
     "mic": "^2.1.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
     "sharp": "^0.34.3",
     "ws": "^8.18.0"
   },
@@ -68,6 +71,7 @@
     "@jest/globals": "^29.7.0",
     "@langchain/core": "^0.3.79",
     "@langchain/textsplitters": "^0.1.0",
+    "@tailwindcss/typography": "^0.5.19",
     "@tavily/core": "^0.5.13",
     "@types/diff": "^7.0.2",
     "@types/file-type": "^10.6.0",
diff --git a/packages/cletus/postcss.config.cjs b/packages/cletus/postcss.config.cjs
new file mode 100644
index 0000000..12a703d
--- /dev/null
+++ b/packages/cletus/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/packages/cletus/src/browser/app.tsx b/packages/cletus/src/browser/app.tsx
index 956a597..51e6b85 100644
--- a/packages/cletus/src/browser/app.tsx
+++ b/packages/cletus/src/browser/app.tsx
@@ -1,79 +1,121 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { createRoot } from 'react-dom/client';
 import { MainPage } from './pages/MainPage';
 import { ChatPage } from './pages/ChatPage';
 import { InitPage } from './pages/InitPage';
-import './styles.css';
+import type { ChatMeta, Config } from '../schemas';
 
 type AppView = 'loading' | 'init' | 'main' | 'chat';
 
-interface ConfigData {
-  user: {
-    name: string;
-    pronouns?: string;
-    showInput?: boolean;
-    showOutput?: boolean;
-  };
-  assistants: Array<{
-    name: string;
-    description?: string;
-  }>;
-  chats: Array<{
-    id: string;
-    name: string;
-    mode: string;
-    assistant?: string;
-    created: number;
-    updated: number;
-  }>;
-  types: Array<{
-    name: string;
-    friendlyName: string;
-    description?: string;
-  }>;
-}
-
 const App: React.FC = () => {
   const [view, setView] = useState<AppView>('loading');
-  const [config, setConfig] = useState<ConfigData | null>(null);
+  const [config, setConfig] = useState<Config | null>(null);
   const [selectedChatId, setSelectedChatId] = useState<string | null>(null);
+  const wsRef = useRef<WebSocket | null>(null);
 
+  // Handle browser back/forward buttons
   useEffect(() => {
-    async function loadConfig() {
-      try {
-        const response = await fetch('/api/config');
-        if (response.ok) {
-          const data = await response.json();
-          setConfig(data.data);
-          setView('main');
-        } else {
+    const handlePopState = () => {
+      const path = window.location.pathname;
+      if (path === '/' || path === '/settings') {
+        setView('main');
+        setSelectedChatId(null);
+      } else if (path.startsWith('/chat/')) {
+        const chatId = path.split('/')[2];
+        setSelectedChatId(chatId);
+        setView('chat');
+      }
+    };
+
+    window.addEventListener('popstate', handlePopState);
+    return () => window.removeEventListener('popstate', handlePopState);
+  }, []);
+
+  useEffect(() => {
+    // Connect to WebSocket
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const ws = new WebSocket(`${protocol}//${window.location.host}`);
+
+    ws.onopen = () => {
+      console.log('WebSocket connected');
+      // Request config
+      ws.send(JSON.stringify({ type: 'get_config' }));
+    };
+
+    ws.onmessage = (event) => {
+      const message = JSON.parse(event.data);
+
+      switch (message.type) {
+        case 'config':
+          setConfig(message.data);
+
+          // Check URL to determine initial view
+          const path = window.location.pathname;
+          if (path.startsWith('/chat/')) {
+            const chatId = path.split('/')[2];
+            // Verify the chat exists in the config
+            const chatExists = message.data.chats.some((c: ChatMeta) => c.id === chatId);
+            if (chatExists) {
+              setSelectedChatId(chatId);
+              setView('chat');
+            } else {
+              // Chat doesn't exist, redirect to main
+              window.history.replaceState({}, '', '/');
+              setView('main');
+            }
+          } else if (path === '/settings') {
+            setView('main'); // MainPage handles settings view internally
+          } else {
+            setView('main');
+          }
+          break;
+
+        case 'config_not_found':
           setView('init');
-        }
-      } catch (error) {
-        console.error('Failed to load config:', error);
-        setView('init');
+          break;
+
+        case 'chat_created':
+          // Reload config after chat creation
+          ws.send(JSON.stringify({ type: 'get_config' }));
+          if (message.data.chatId) {
+            setSelectedChatId(message.data.chatId);
+            setView('chat');
+          }
+          break;
+
+        case 'error':
+          console.error('WebSocket error:', message.data.message);
+          break;
       }
-    }
-    loadConfig();
+    };
+
+    ws.onerror = (error) => {
+      console.error('WebSocket connection error:', error);
+      setView('init');
+    };
+
+    ws.onclose = () => {
+      console.log('WebSocket disconnected');
+    };
+
+    wsRef.current = ws;
+
+    return () => {
+      ws.close();
+    };
   }, []);
 
   const reloadConfig = async () => {
-    try {
-      const response = await fetch('/api/config');
-      if (response.ok) {
-        const data = await response.json();
-        setConfig(data.data);
-      }
-    } catch (error) {
-      console.error('Failed to reload config:', error);
+    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ type: 'get_config' }));
     }
   };
 
   if (view === 'loading') {
     return (
-      <div className="loading-container">
+      <div className="flex h-screen items-center justify-center flex-col gap-4">
         <div className="spinner"></div>
-        <p>Loading...</p>
+        <p className="neon-text-cyan">Loading...</p>
       </div>
     );
   }
@@ -82,7 +124,7 @@ const App: React.FC = () => {
     return (
       <InitPage
         onComplete={() => {
-          reloadConfig().then(() => setView('main'));
+          reloadConfig();
         }}
       />
     );
@@ -93,7 +135,11 @@ const App: React.FC = () => {
       <ChatPage
         chatId={selectedChatId}
         config={config}
-        onBack={() => setView('main')}
+        onBack={() => {
+          setView('main');
+          setSelectedChatId(null);
+          window.history.pushState({}, '', '/');
+        }}
         onConfigChange={reloadConfig}
       />
     );
@@ -113,9 +159,9 @@ const App: React.FC = () => {
   }
 
   return (
-    <div className="loading-container">
+    <div className="flex h-screen items-center justify-center flex-col gap-4">
       <div className="spinner"></div>
-      <p>Loading...</p>
+      <p className="neon-text-cyan">Loading...</p>
     </div>
   );
 };
diff --git a/packages/cletus/src/browser/components/ChatInput.tsx b/packages/cletus/src/browser/components/ChatInput.tsx
index c8cf4c1..a82c26b 100644
--- a/packages/cletus/src/browser/components/ChatInput.tsx
+++ b/packages/cletus/src/browser/components/ChatInput.tsx
@@ -1,11 +1,8 @@
 import React, { useState, useRef, useEffect } from 'react';
-
-interface ChatMeta {
-  id: string;
-  name: string;
-  mode: string;
-  assistant?: string;
-}
+import { Send, Loader2 } from 'lucide-react';
+import { Button } from './ui/button';
+import { Textarea } from './ui/textarea';
+import type { ChatMeta } from '../../schemas';
 
 interface ChatInputProps {
   chatId: string;
@@ -37,12 +34,12 @@ export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, onMessag
 
     ws.onmessage = (event) => {
       const message = JSON.parse(event.data);
-      
+
       switch (message.type) {
         case 'chat_initialized':
           console.log('Chat initialized');
           break;
-        
+
         case 'message_added':
           onMessageSent();
           break;
@@ -87,7 +84,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, onMessag
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    
+
     if (!input.trim() || isProcessing || !wsRef.current) {
       return;
     }
@@ -110,40 +107,57 @@ export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, onMessag
   };
 
   return (
-    <div style={{ borderTop: '1px solid var(--border)', padding: '1rem' }}>
+    <div className="p-4">
       {status && (
-        <div style={{
-          fontSize: '0.85rem',
-          color: 'var(--text-secondary)',
-          marginBottom: '0.5rem',
-          fontStyle: 'italic',
-        }}>
-          {status}
+        <div className="mb-3 flex items-center gap-2 text-sm text-neon-cyan animate-pulse">
+          <Loader2 className="w-4 h-4 animate-spin" />
+          <span>{status}</span>
         </div>
       )}
-      
-      <form onSubmit={handleSubmit}>
-        <textarea
+
+      <form onSubmit={handleSubmit} className="space-y-3">
+        <Textarea
           ref={textareaRef}
-          className="input textarea"
           value={input}
           onChange={(e) => setInput(e.target.value)}
           onKeyDown={handleKeyDown}
-          placeholder={isConnecting ? 'Connecting...' : isProcessing ? 'Processing...' : 'Type your message... (Enter to send, Shift+Enter for new line)'}
+          placeholder={
+            isConnecting
+              ? 'Connecting...'
+              : isProcessing
+              ? 'Processing...'
+              : 'Type your message... (Enter to send, Shift+Enter for new line)'
+          }
           disabled={isConnecting || isProcessing}
-          style={{ minHeight: '80px', marginBottom: '0.5rem' }}
+          className="min-h-[100px] resize-none"
         />
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-          <div style={{ fontSize: '0.85rem', color: 'var(--text-muted)' }}>
-            Mode: {chatMeta.mode}
+        <div className="flex items-center justify-between">
+          <div className="text-xs text-muted-foreground flex items-center gap-2">
+            <span className="px-2 py-1 rounded bg-muted text-muted-foreground">
+              {chatMeta.mode}
+            </span>
+            {chatMeta.assistant && (
+              <span className="text-neon-purple">{chatMeta.assistant}</span>
+            )}
           </div>
-          <button
+          <Button
             type="submit"
-            className="btn btn-primary"
+            variant="neon"
             disabled={!input.trim() || isProcessing || isConnecting}
+            className="gap-2"
           >
-            {isProcessing ? 'Processing...' : 'Send'}
-          </button>
+            {isProcessing ? (
+              <>
+                <Loader2 className="w-4 h-4 animate-spin" />
+                Processing
+              </>
+            ) : (
+              <>
+                <Send className="w-4 h-4" />
+                Send
+              </>
+            )}
+          </Button>
         </div>
       </form>
     </div>
diff --git a/packages/cletus/src/browser/components/ChatList.tsx b/packages/cletus/src/browser/components/ChatList.tsx
index 2baba10..a6dd1d5 100644
--- a/packages/cletus/src/browser/components/ChatList.tsx
+++ b/packages/cletus/src/browser/components/ChatList.tsx
@@ -1,27 +1,24 @@
 import React, { useState } from 'react';
-
-interface ChatMeta {
-  id: string;
-  name: string;
-  mode: string;
-  created: number;
-  updated: number;
-}
-
-interface ConfigData {
-  chats: ChatMeta[];
-}
+import { MessageSquare, Clock } from 'lucide-react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import type { Config } from '../../schemas';
 
 interface ChatListProps {
-  config: ConfigData;
+  config: Config;
   onChatSelect: (chatId: string) => void;
   onConfigChange: () => Promise<void>;
+  forceShowCreate?: boolean;
+  onCreateClose?: () => void;
 }
 
-export const ChatList: React.FC<ChatListProps> = ({ config, onChatSelect, onConfigChange }) => {
+export const ChatList: React.FC<ChatListProps> = ({ config, onChatSelect, onConfigChange, forceShowCreate = false, onCreateClose }) => {
   const [isCreating, setIsCreating] = useState(false);
   const [newChatName, setNewChatName] = useState('');
 
+  const showCreate = isCreating || forceShowCreate;
+
   const chats = config.chats;
   const sortedChats = [...chats].sort((a, b) => b.updated - a.updated);
 
@@ -29,82 +26,127 @@ export const ChatList: React.FC<ChatListProps> = ({ config, onChatSelect, onConf
     if (!newChatName.trim()) return;
 
     try {
-      const response = await fetch('/api/chat/create', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name: newChatName.trim() }),
-      });
+      // Send create chat message via WebSocket
+      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+      const ws = new WebSocket(`${protocol}//${window.location.host}`);
 
-      if (response.ok) {
-        const data = await response.json();
-        await onConfigChange();
-        setIsCreating(false);
-        setNewChatName('');
-        onChatSelect(data.data.chatId);
-      }
+      ws.onopen = () => {
+        ws.send(JSON.stringify({
+          type: 'create_chat',
+          data: { name: newChatName.trim() },
+        }));
+      };
+
+      ws.onmessage = async (event) => {
+        const message = JSON.parse(event.data);
+        if (message.type === 'chat_created') {
+          await onConfigChange();
+          setIsCreating(false);
+          setNewChatName('');
+          onCreateClose?.();
+          onChatSelect(message.data.chatId);
+          ws.close();
+        } else if (message.type === 'error') {
+          console.error('Failed to create chat:', message.data.message);
+          ws.close();
+        }
+      };
     } catch (error) {
       console.error('Failed to create chat:', error);
     }
   };
 
-  return (
-    <div>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem' }}>
-        <h2 style={{ fontSize: '1.25rem', fontWeight: 600 }}>Your Chats</h2>
-        {!isCreating && (
-          <button className="btn btn-primary btn-small" onClick={() => setIsCreating(true)}>
-            + New Chat
-          </button>
-        )}
-      </div>
+  const formatDate = (timestamp: number) => {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60);
 
-      {isCreating && (
-        <div className="card" style={{ marginBottom: '1rem' }}>
-          <h3 style={{ marginBottom: '0.5rem', fontSize: '1rem' }}>Create New Chat</h3>
-          <input
-            type="text"
-            className="input"
-            placeholder="Chat name..."
-            value={newChatName}
-            onChange={(e) => setNewChatName(e.target.value)}
-            onKeyPress={(e) => e.key === 'Enter' && handleCreateChat()}
-            autoFocus
-            style={{ marginBottom: '0.5rem' }}
-          />
-          <div style={{ display: 'flex', gap: '0.5rem' }}>
-            <button className="btn btn-primary btn-small" onClick={handleCreateChat}>
-              Create
-            </button>
-            <button 
-              className="btn btn-small" 
-              onClick={() => {
-                setIsCreating(false);
-                setNewChatName('');
-              }}
-            >
-              Cancel
-            </button>
-          </div>
-        </div>
+    if (diffInHours < 24) {
+      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    } else if (diffInHours < 24 * 7) {
+      return date.toLocaleDateString([], { weekday: 'short', hour: '2-digit', minute: '2-digit' });
+    } else {
+      return date.toLocaleDateString();
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {showCreate && (
+        <Card className="border-neon-cyan/50 shadow-lg">
+          <CardHeader>
+            <CardTitle className="neon-text-cyan">Create New Chat</CardTitle>
+            <CardDescription>Start a new conversation</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <Input
+              type="text"
+              placeholder="Enter chat name..."
+              value={newChatName}
+              onChange={(e) => setNewChatName(e.target.value)}
+              onKeyPress={(e) => e.key === 'Enter' && handleCreateChat()}
+              autoFocus
+            />
+            <div className="flex gap-2">
+              <Button variant="neon" onClick={handleCreateChat} className="flex-1">
+                Create
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => {
+                  setIsCreating(false);
+                  setNewChatName('');
+                  onCreateClose?.();
+                }}
+              >
+                Cancel
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
       )}
 
       {sortedChats.length === 0 ? (
-        <div className="card" style={{ textAlign: 'center', padding: '2rem' }}>
-          <p style={{ color: 'var(--text-secondary)' }}>No chats yet. Create one to get started!</p>
-        </div>
+        <Card className="border-dashed">
+          <CardContent className="py-12 text-center space-y-4">
+            <MessageSquare className="w-16 h-16 mx-auto text-muted-foreground" />
+            <div>
+              <p className="text-lg font-semibold text-muted-foreground">No chats yet</p>
+              <p className="text-sm text-muted-foreground mt-1">
+                Create a new chat to get started!
+              </p>
+            </div>
+            <Button variant="neon" onClick={() => setIsCreating(true)}>
+              Create Your First Chat
+            </Button>
+          </CardContent>
+        </Card>
       ) : (
-        <div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           {sortedChats.map((chat) => (
-            <div
+            <Card
               key={chat.id}
-              className="card card-hover"
+              className="cursor-pointer transition-all hover:scale-105 hover:border-neon-cyan/70 group"
               onClick={() => onChatSelect(chat.id)}
             >
-              <div style={{ fontWeight: 600, marginBottom: '0.25rem' }}>{chat.name}</div>
-              <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)' }}>
-                Mode: {chat.mode} • Updated: {new Date(chat.updated).toLocaleDateString()}
-              </div>
-            </div>
+              <CardHeader className="pb-3">
+                <div className="flex items-start justify-between">
+                  <MessageSquare className="w-5 h-5 text-neon-purple group-hover:text-neon-cyan transition-colors" />
+                  <span className="text-xs px-2 py-0.5 rounded-full bg-neon-purple/20 text-neon-purple border border-neon-purple/50">
+                    {chat.mode}
+                  </span>
+                </div>
+                <CardTitle className="text-lg mt-3 group-hover:neon-text-cyan transition-all">
+                  {chat.title}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                  <Clock className="w-3 h-3" />
+                  <span>{formatDate(chat.updated)}</span>
+                </div>
+              </CardContent>
+            </Card>
           ))}
         </div>
       )}
diff --git a/packages/cletus/src/browser/components/Collapsible.tsx b/packages/cletus/src/browser/components/Collapsible.tsx
deleted file mode 100644
index 8f70454..0000000
--- a/packages/cletus/src/browser/components/Collapsible.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, { useState } from 'react';
-
-interface CollapsibleProps {
-  title: string;
-  defaultOpen?: boolean;
-  children: React.ReactNode;
-}
-
-export const Collapsible: React.FC<CollapsibleProps> = ({ title, defaultOpen = false, children }) => {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-
-  return (
-    <div className="collapsible">
-      <div className="collapsible-header" onClick={() => setIsOpen(!isOpen)}>
-        <span>{title}</span>
-        <span className={`collapsible-arrow ${isOpen ? 'open' : ''}`}>
-          ▶
-        </span>
-      </div>
-      {isOpen && (
-        <div className="collapsible-content">
-          {children}
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/packages/cletus/src/browser/components/MessageItem.tsx b/packages/cletus/src/browser/components/MessageItem.tsx
index 106407a..25b1b04 100644
--- a/packages/cletus/src/browser/components/MessageItem.tsx
+++ b/packages/cletus/src/browser/components/MessageItem.tsx
@@ -1,19 +1,10 @@
 import React from 'react';
-import { OperationDisplay } from './OperationDisplay';
-
-interface Operation {
-  type: string;
-  status: string;
-  input: any;
-  output?: any;
-}
-
-interface Message {
-  role: 'user' | 'assistant' | 'system';
-  content?: string;
-  created: number;
-  operations?: Operation[];
-}
+import { User, Bot, Info } from 'lucide-react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { OperationDisplay } from '../operations';
+import { cn } from '../lib/utils';
+import type { Message, MessageContent } from '../../schemas';
 
 interface MessageItemProps {
   message: Message;
@@ -22,35 +13,128 @@ interface MessageItemProps {
 }
 
 export const MessageItem: React.FC<MessageItemProps> = ({ message, showInput, showOutput }) => {
-  const { role, content, operations } = message;
+  const { role, content, operations = [] } = message;
+
+  const isUser = role === 'user';
+  const isAssistant = role === 'assistant';
+  const isSystem = role === 'system';
+
+  // Map content items to their operations
+  const mappedContent = content.map((c) => ({
+    ...c,
+    operation: c.operationIndex !== undefined ? operations[c.operationIndex] : undefined,
+  }));
+
+  // Filter content: show text without operationIndex, and operations
+  const visibleContent = mappedContent.filter(
+    (c) => (c.operationIndex === undefined && c.content.trim().length > 0 && c.type === 'text') || c.operation
+  );
 
   return (
-    <div className={`message message-${role}`}>
-      <div style={{ fontSize: '0.75rem', fontWeight: 600, marginBottom: '0.5rem', opacity: 0.7 }}>
-        {role === 'user' ? 'You' : role === 'assistant' ? 'Assistant' : 'System'}
+    <div
+      className={cn(
+        'flex gap-4 mb-6 group',
+        isUser && 'flex-row-reverse'
+      )}
+    >
+      {/* Avatar */}
+      <div
+        className={cn(
+          'flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center',
+          isUser && 'bg-neon-purple/20 border-2 border-neon-purple',
+          isAssistant && 'bg-neon-cyan/20 border-2 border-neon-cyan',
+          isSystem && 'bg-muted border-2 border-border'
+        )}
+      >
+        {isUser && <User className="w-5 h-5 text-neon-purple" />}
+        {isAssistant && <Bot className="w-5 h-5 text-neon-cyan" />}
+        {isSystem && <Info className="w-5 h-5 text-muted-foreground" />}
       </div>
-      
-      {content && (
-        <div style={{ whiteSpace: 'pre-wrap', wordWrap: 'break-word' }}>
-          {content}
+
+      {/* Content */}
+      <div className={cn('flex-1 space-y-2', isUser && 'flex flex-col items-end')}>
+        {/* Header */}
+        <div
+          className={cn(
+            'text-xs font-semibold opacity-70',
+            isUser && 'text-neon-purple',
+            isAssistant && 'text-neon-cyan',
+            isSystem && 'text-muted-foreground'
+          )}
+        >
+          {isUser ? 'You' : isAssistant ? 'Assistant' : 'System'}
         </div>
-      )}
 
-      {operations && operations.length > 0 && (
-        <div style={{ marginTop: '1rem' }}>
-          {operations.map((operation, index) => (
-            <OperationDisplay
-              key={index}
-              operation={operation}
-              showInput={showInput}
-              showOutput={showOutput}
-            />
-          ))}
+        {/* Content and Operations in order */}
+        <div className={cn('flex-1 space-y-2', isUser && 'flex flex-col items-end')}>
+          {visibleContent.map((item, index) => {
+            // Render operation if this content item has an operation
+            if (item.operation) {
+              return (
+                <OperationDisplay
+                  key={index}
+                  operation={item.operation}
+                  showInput={showInput}
+                  showOutput={showOutput}
+                />
+              );
+            }
+
+            // Render text content
+            return (
+              <div
+                key={index}
+                className={cn(
+                  'rounded-lg p-4 max-w-3xl',
+                  'prose prose-invert prose-sm max-w-none',
+                  'prose-p:text-foreground prose-headings:text-foreground',
+                  'prose-strong:text-foreground prose-code:text-foreground',
+                  'prose-pre:bg-muted prose-pre:text-foreground',
+                  'prose-a:text-neon-cyan prose-a:no-underline hover:prose-a:underline',
+                  'prose-li:text-foreground prose-ul:text-foreground prose-ol:text-foreground',
+                  'text-foreground',
+                  isUser && 'bg-neon-purple/10 border border-neon-purple/30',
+                  isAssistant && 'bg-card',
+                  isSystem && 'bg-muted/50 border border-muted italic'
+                )}
+              >
+                <ReactMarkdown
+                  remarkPlugins={[remarkGfm]}
+                  components={{
+                    p: ({ children }) => <p className="text-foreground mb-2">{children}</p>,
+                    ul: ({ children }) => <ul className="text-foreground list-disc ml-6 mb-2 space-y-1">{children}</ul>,
+                    ol: ({ children }) => <ol className="text-foreground list-decimal ml-6 mb-2 space-y-1">{children}</ol>,
+                    li: ({ children }) => <li className="text-foreground ml-2">{children}</li>,
+                    code: ({ inline, children, ...props }: any) => {
+                      return inline ? (
+                        <code className="text-foreground bg-muted px-1 py-0.5 rounded" {...props}>
+                          {children}
+                        </code>
+                      ) : (
+                        <code className="text-foreground" {...props}>
+                          {children}
+                        </code>
+                      );
+                    },
+                    pre: ({ children }) => <pre className="text-foreground bg-muted p-3 rounded mb-2 overflow-x-auto">{children}</pre>,
+                    a: ({ href, children }) => (
+                      <a href={href} className="text-neon-cyan hover:underline" target="_blank" rel="noopener noreferrer">
+                        {children}
+                      </a>
+                    ),
+                  }}
+                >
+                  {item.content}
+                </ReactMarkdown>
+              </div>
+            );
+          })}
         </div>
-      )}
 
-      <div style={{ fontSize: '0.7rem', marginTop: '0.5rem', opacity: 0.5 }}>
-        {new Date(message.created).toLocaleString()}
+        {/* Timestamp */}
+        <div className="text-xs text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity">
+          {new Date(message.created).toLocaleString()}
+        </div>
       </div>
     </div>
   );
diff --git a/packages/cletus/src/browser/components/MessageList.tsx b/packages/cletus/src/browser/components/MessageList.tsx
index 5bd7092..512e978 100644
--- a/packages/cletus/src/browser/components/MessageList.tsx
+++ b/packages/cletus/src/browser/components/MessageList.tsx
@@ -29,20 +29,22 @@ export const MessageList: React.FC<MessageListProps> = ({ messages, showInput, s
   }, [messages.length]);
 
   return (
-    <div style={{ flex: 1, overflow: 'auto', padding: '1.5rem' }}>
+    <div className="flex-1 overflow-auto">
       {messages.length === 0 ? (
-        <div style={{ textAlign: 'center', color: 'var(--text-secondary)', marginTop: '2rem' }}>
+        <div className="text-center text-muted-foreground mt-8">
           <p>No messages yet. Start a conversation!</p>
         </div>
       ) : (
-        messages.map((message, index) => (
-          <MessageItem
-            key={index}
-            message={message}
-            showInput={showInput}
-            showOutput={showOutput}
-          />
-        ))
+        <div className="space-y-4">
+          {messages.map((message, index) => (
+            <MessageItem
+              key={index}
+              message={message}
+              showInput={showInput}
+              showOutput={showOutput}
+            />
+          ))}
+        </div>
       )}
       <div ref={bottomRef} />
     </div>
diff --git a/packages/cletus/src/browser/components/OperationDisplay.tsx b/packages/cletus/src/browser/components/OperationDisplay.tsx
deleted file mode 100644
index dbe49ad..0000000
--- a/packages/cletus/src/browser/components/OperationDisplay.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from 'react';
-import { Collapsible } from './Collapsible';
-
-interface Operation {
-  type: string;
-  status: string;
-  input: any;
-  output?: any;
-}
-
-interface OperationDisplayProps {
-  operation: Operation;
-  showInput: boolean;
-  showOutput: boolean;
-}
-
-export const OperationDisplay: React.FC<OperationDisplayProps> = ({
-  operation,
-  showInput,
-  showOutput,
-}) => {
-  const { type, status, input, output } = operation;
-  
-  // Status color
-  const statusColor = 
-    status === 'done' ? 'var(--success)' :
-    status === 'doneError' ? 'var(--error)' :
-    status === 'rejected' ? 'var(--error)' :
-    status === 'analyzedBlocked' ? 'var(--warning)' :
-    'var(--text-secondary)';
-
-  return (
-    <div style={{ marginBottom: '0.5rem' }}>
-      <div style={{
-        padding: '0.75rem',
-        background: 'var(--surface)',
-        borderRadius: '6px',
-        borderLeft: `3px solid ${statusColor}`,
-      }}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '0.5rem' }}>
-          <span style={{ fontWeight: 600, fontFamily: 'monospace', fontSize: '0.9rem' }}>
-            {type}
-          </span>
-          <span style={{ fontSize: '0.85rem', color: statusColor }}>
-            {status}
-          </span>
-        </div>
-
-        {showInput && input && (
-          <Collapsible title="Input" defaultOpen={false}>
-            <pre style={{
-              fontSize: '0.85rem',
-              overflow: 'auto',
-              background: 'var(--bg)',
-              padding: '0.5rem',
-              borderRadius: '4px',
-            }}>
-              {JSON.stringify(input, null, 2)}
-            </pre>
-          </Collapsible>
-        )}
-
-        {showOutput && output && (
-          <Collapsible title="Output" defaultOpen={false}>
-            <pre style={{
-              fontSize: '0.85rem',
-              overflow: 'auto',
-              background: 'var(--bg)',
-              padding: '0.5rem',
-              borderRadius: '4px',
-            }}>
-              {JSON.stringify(output, null, 2)}
-            </pre>
-          </Collapsible>
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/packages/cletus/src/browser/components/SettingsView.tsx b/packages/cletus/src/browser/components/SettingsView.tsx
index 92c7d53..d3f1f2b 100644
--- a/packages/cletus/src/browser/components/SettingsView.tsx
+++ b/packages/cletus/src/browser/components/SettingsView.tsx
@@ -1,23 +1,8 @@
 import React from 'react';
-
-interface ConfigData {
-  user: {
-    name: string;
-    pronouns?: string;
-  };
-  assistants: Array<{
-    name: string;
-    description?: string;
-  }>;
-  types: Array<{
-    name: string;
-    friendlyName: string;
-    description?: string;
-  }>;
-}
+import type { Config } from '../../schemas';
 
 interface SettingsViewProps {
-  config: ConfigData;
+  config: Config;
 }
 
 export const SettingsView: React.FC<SettingsViewProps> = ({ config }) => {
diff --git a/packages/cletus/src/browser/components/ui/button.tsx b/packages/cletus/src/browser/components/ui/button.tsx
new file mode 100644
index 0000000..c99ecb9
--- /dev/null
+++ b/packages/cletus/src/browser/components/ui/button.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90 neon-glow-purple',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground neon-border',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        neon: 'bg-card border-2 border-neon-cyan text-neon-cyan hover:bg-neon-cyan hover:text-background neon-glow transition-all duration-300',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/packages/cletus/src/browser/components/ui/card.tsx b/packages/cletus/src/browser/components/ui/card.tsx
new file mode 100644
index 0000000..a4df3e4
--- /dev/null
+++ b/packages/cletus/src/browser/components/ui/card.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'rounded-lg border border-border bg-card text-card-foreground shadow-sm transition-all hover:border-neon-purple/50 hover:shadow-lg',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+));
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  )
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/packages/cletus/src/browser/components/ui/input.tsx b/packages/cletus/src/browser/components/ui/input.tsx
new file mode 100644
index 0000000..ee60110
--- /dev/null
+++ b/packages/cletus/src/browser/components/ui/input.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neon-cyan focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/packages/cletus/src/browser/components/ui/scroll-area.tsx b/packages/cletus/src/browser/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..520f572
--- /dev/null
+++ b/packages/cletus/src/browser/components/ui/scroll-area.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
+  ({ className, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('relative overflow-auto', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+);
+ScrollArea.displayName = 'ScrollArea';
+
+export { ScrollArea };
diff --git a/packages/cletus/src/browser/components/ui/textarea.tsx b/packages/cletus/src/browser/components/ui/textarea.tsx
new file mode 100644
index 0000000..8cca0ea
--- /dev/null
+++ b/packages/cletus/src/browser/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neon-cyan focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
diff --git a/packages/cletus/src/browser/index.html b/packages/cletus/src/browser/index.html
index 8ab7d86..5f74a6c 100644
--- a/packages/cletus/src/browser/index.html
+++ b/packages/cletus/src/browser/index.html
@@ -1,87 +1,17 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Cletus - Browser Mode</title>
-  <style>
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-
-    :root {
-      --primary: #3b82f6;
-      --primary-hover: #2563eb;
-      --bg: #ffffff;
-      --surface: #f5f5f5;
-      --surface-hover: #e5e5e5;
-      --border: #e0e0e0;
-      --text: #000000;
-      --text-secondary: #666666;
-      --text-muted: #999999;
-      --success: #10b981;
-      --error: #ef4444;
-      --warning: #f59e0b;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      :root {
-        --primary: #3b82f6;
-        --primary-hover: #60a5fa;
-        --bg: #1a1a1a;
-        --surface: #2a2a2a;
-        --surface-hover: #3a3a3a;
-        --border: #404040;
-        --text: #ffffff;
-        --text-secondary: #a0a0a0;
-        --text-muted: #707070;
-      }
-    }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-      background: var(--bg);
-      color: var(--text);
-      line-height: 1.6;
-    }
-
-    #root {
-      width: 100%;
-      height: 100vh;
-    }
-
-    .loading {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100vh;
-      flex-direction: column;
-      gap: 1rem;
-    }
-
-    .spinner {
-      width: 48px;
-      height: 48px;
-      border: 4px solid var(--border);
-      border-top-color: var(--primary);
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
-    }
-
-    @keyframes spin {
-      to { transform: rotate(360deg); }
-    }
-  </style>
 </head>
 <body>
   <div id="root">
-    <div class="loading">
+    <div class="flex h-screen items-center justify-center flex-col gap-4">
       <div class="spinner"></div>
-      <p>Loading Cletus...</p>
+      <p class="neon-text-cyan">Loading Cletus...</p>
     </div>
   </div>
-  <script type="module" src="./app.js"></script>
+  <script type="module" src="/app.js"></script>
 </body>
 </html>
diff --git a/packages/cletus/src/browser/lib/utils.ts b/packages/cletus/src/browser/lib/utils.ts
new file mode 100644
index 0000000..9ad0df4
--- /dev/null
+++ b/packages/cletus/src/browser/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx b/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
new file mode 100644
index 0000000..9ce4b81
--- /dev/null
+++ b/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
@@ -0,0 +1,194 @@
+import React, { useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Operation } from '../../schemas';
+import { cn } from '../lib/utils';
+import { getStatusInfo, getElapsedTime } from './render';
+
+/**
+ * Expandable details component with tabs
+ */
+const OperationDetails: React.FC<{ operation: Operation }> = ({ operation }) => {
+  const [activeTab, setActiveTab] = useState<'input' | 'output' | 'analysis'>('input');
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const hasInput = operation.input !== undefined && operation.input !== null;
+  const hasOutput = operation.output !== undefined && operation.output !== null;
+  const hasAnalysis = operation.analysis !== undefined && operation.analysis !== null && operation.analysis.trim().length > 0;
+
+  if (!hasInput && !hasOutput && !hasAnalysis) {
+    return null;
+  }
+
+  // Default to first available tab
+  const effectiveTab =
+    (activeTab === 'input' && hasInput) ||
+    (activeTab === 'output' && hasOutput) ||
+    (activeTab === 'analysis' && hasAnalysis)
+      ? activeTab
+      : hasInput
+      ? 'input'
+      : hasOutput
+      ? 'output'
+      : 'analysis';
+
+  return (
+    <div className="ml-6 mt-2 border border-border rounded-lg overflow-hidden bg-muted/30">
+      {/* Tabs */}
+      <div className="flex border-b border-border">
+        {hasInput && (
+          <button
+            onClick={() => setActiveTab('input')}
+            className={cn(
+              'px-3 py-1.5 text-xs font-semibold transition-colors',
+              effectiveTab === 'input'
+                ? 'bg-muted text-foreground border-b-2 border-neon-cyan'
+                : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+            )}
+          >
+            Input
+          </button>
+        )}
+        {hasOutput && (
+          <button
+            onClick={() => setActiveTab('output')}
+            className={cn(
+              'px-3 py-1.5 text-xs font-semibold transition-colors',
+              effectiveTab === 'output'
+                ? 'bg-muted text-foreground border-b-2 border-neon-cyan'
+                : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+            )}
+          >
+            Output
+          </button>
+        )}
+        {hasAnalysis && (
+          <button
+            onClick={() => setActiveTab('analysis')}
+            className={cn(
+              'px-3 py-1.5 text-xs font-semibold transition-colors',
+              effectiveTab === 'analysis'
+                ? 'bg-muted text-foreground border-b-2 border-neon-cyan'
+                : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+            )}
+          >
+            Analysis
+          </button>
+        )}
+        <button
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="ml-auto px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground"
+        >
+          {isExpanded ? 'Collapse' : 'Expand'}
+        </button>
+      </div>
+
+      {/* Content */}
+      <textarea
+        readOnly
+        value={
+          effectiveTab === 'input'
+            ? JSON.stringify(operation.input, null, 2)
+            : effectiveTab === 'output'
+            ? JSON.stringify(operation.output, null, 2)
+            : operation.analysis || ''
+        }
+        className={cn(
+          'w-full p-3 text-xs font-mono bg-black text-white border-0 resize-y overflow-auto',
+          'focus:outline-none focus:ring-2 focus:ring-neon-cyan/50',
+          isExpanded ? 'h-auto' : 'max-h-[12rem]'
+        )}
+        style={isExpanded ? { height: 'auto', minHeight: '12rem' } : { height: '12rem' }}
+      />
+    </div>
+  );
+};
+
+interface BaseOperationDisplayProps {
+  operation: Operation;
+  label: string;
+  summary?: React.ReactNode | string | null;
+  borderColor?: string;
+  bgColor?: string;
+  labelColor?: string;
+  message?: { cost?: number; usage?: any };
+}
+
+/**
+ * Base operation display component with consistent styling
+ */
+export const BaseOperationDisplay: React.FC<BaseOperationDisplayProps> = ({
+  operation,
+  label,
+  summary,
+  borderColor = 'border-border',
+  bgColor = 'bg-card/50',
+  labelColor = 'text-foreground',
+  message,
+}) => {
+  const [isDetailsOpen, setIsDetailsOpen] = useState(false);
+  const { color: statusColor, label: statusLabel } = getStatusInfo(operation.status);
+  const elapsed = getElapsedTime(operation);
+
+  // Determine summary to display
+  const displaySummary = operation.error ? operation.error : summary;
+
+  return (
+    <div className={cn('mb-3 rounded-lg p-3', bgColor)}>
+      {/* Header - Clickable */}
+      <div
+        className="flex items-center gap-2 mb-2 cursor-pointer hover:opacity-80 transition-opacity"
+        onClick={() => setIsDetailsOpen(!isDetailsOpen)}
+      >
+        <span className={cn('text-lg', statusColor)}>●</span>
+        <span className={cn('font-mono text-sm', labelColor)}>{label}</span>
+        <span className="text-xs text-muted-foreground">[{statusLabel}]</span>
+        {elapsed && <span className="text-xs text-muted-foreground">({elapsed})</span>}
+      </div>
+
+      {/* Summary */}
+      {displaySummary && (
+        <div className={cn('ml-6 text-sm mb-2', operation.error ? 'text-red-400' : 'text-muted-foreground')}>
+          {typeof displaySummary === 'string' ? (
+            <>
+              <span className="text-foreground">→ </span>
+              <ReactMarkdown
+                remarkPlugins={[remarkGfm]}
+                className="inline"
+                components={{
+                  p: ({ children }) => <span>{children}</span>,
+                }}
+              >
+                {displaySummary}
+              </ReactMarkdown>
+            </>
+          ) : (
+            displaySummary
+          )}
+        </div>
+      )}
+
+      {/* Details */}
+      {isDetailsOpen && (
+        <>
+          <OperationDetails operation={operation} />
+
+          {/* Cost and Usage Info */}
+          {message && (message.cost !== undefined || message.usage) && (
+            <div className="ml-6 mt-2 text-xs text-muted-foreground">
+              {message.cost !== undefined && message.cost > 0 && (
+                <span>cost: ${message.cost.toFixed(5)}</span>
+              )}
+              {message.usage?.text && (
+                <span>
+                  {message.cost !== undefined && message.cost > 0 ? ' │ ' : ''}
+                  tokens: {(message.usage.text.input || 0) + (message.usage.text.output || 0)}
+                </span>
+              )}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/operations/architect.tsx b/packages/cletus/src/browser/operations/architect.tsx
new file mode 100644
index 0000000..def1b47
--- /dev/null
+++ b/packages/cletus/src/browser/operations/architect.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import { Operation } from '../../schemas';
+import { BaseOperationDisplay } from './BaseOperationDisplay';
+import { formatName } from '../../shared';
+
+interface OperationRendererProps {
+  operation: Operation;
+  showInput?: boolean;
+  showOutput?: boolean;
+}
+
+export const type_info: React.FC<OperationRendererProps> = ({ operation }) => {
+  const typeName = operation.cache?.typeName || formatName(operation.input.name);
+  const summary = operation.output?.type
+    ? `Found type: ${operation.output.type.friendlyName}`
+    : operation.output?.type === null
+    ? 'Type not found'
+    : operation.analysis;
+
+  return (
+    <BaseOperationDisplay
+      operation={operation}
+      label={`${typeName}Info()`}
+      summary={summary}
+      borderColor="border-neon-cyan/30"
+      bgColor="bg-neon-cyan/5"
+      labelColor="text-neon-cyan"
+    />
+  );
+};
+
+export const type_list: React.FC<OperationRendererProps> = ({ operation }) => {
+  const summary = operation.output?.types?.length
+    ? `Found ${operation.output.types.length} type${operation.output.types.length !== 1 ? 's' : ''}`
+    : operation.output?.types
+    ? 'No types found'
+    : operation.analysis;
+
+  return (
+    <BaseOperationDisplay
+      operation={operation}
+      label="TypeList()"
+      summary={summary}
+      borderColor="border-neon-cyan/30"
+      bgColor="bg-neon-cyan/5"
+      labelColor="text-neon-cyan"
+    />
+  );
+};
+
+export const type_create: React.FC<OperationRendererProps> = ({ operation }) => {
+  const typeName = operation.cache?.typeName || formatName(operation.input.name);
+  const summary = operation.output?.created ? 'Created type successfully' : operation.analysis;
+
+  return (
+    <BaseOperationDisplay
+      operation={operation}
+      label={`${typeName}Create()`}
+      summary={summary}
+      borderColor="border-neon-cyan/30"
+      bgColor="bg-neon-cyan/5"
+      labelColor="text-neon-cyan"
+    />
+  );
+};
+
+export const type_update: React.FC<OperationRendererProps> = ({ operation }) => {
+  const typeName = operation.cache?.typeName || formatName(operation.input.name);
+  const updateKeys = operation.input.update ? Object.keys(operation.input.update).join(', ') : '';
+  const summary = operation.output?.updated ? 'Updated type successfully' : operation.analysis;
+
+  return (
+    <BaseOperationDisplay
+      operation={operation}
+      label={`${typeName}Update(${updateKeys})`}
+      summary={summary}
+      borderColor="border-neon-cyan/30"
+      bgColor="bg-neon-cyan/5"
+      labelColor="text-neon-cyan"
+    />
+  );
+};
+
+export const type_delete: React.FC<OperationRendererProps> = ({ operation }) => {
+  const typeName = operation.cache?.typeName || formatName(operation.input.name);
+  const summary = operation.output?.deleted ? 'Deleted type successfully' : operation.analysis;
+
+  return (
+    <BaseOperationDisplay
+      operation={operation}
+      label={`${typeName}Delete()`}
+      summary={summary}
+      borderColor="border-neon-cyan/30"
+      bgColor="bg-neon-cyan/5"
+      labelColor="text-neon-cyan"
+    />
+  );
+};
+
+export const type_import: React.FC<OperationRendererProps> = ({ operation }) => {
+  const summary = operation.output?.imported
+    ? `Imported ${operation.output.imported} type${operation.output.imported !== 1 ? 's' : ''}`
+    : operation.analysis;
+
+  return (
+    <BaseOperationDisplay
+      operation={operation}
+      label={`TypeImport("${operation.input.path}")`}
+      summary={summary}
+      borderColor="border-neon-cyan/30"
+      bgColor="bg-neon-cyan/5"
+      labelColor="text-neon-cyan"
+    />
+  );
+};
diff --git a/packages/cletus/src/browser/operations/artist.tsx b/packages/cletus/src/browser/operations/artist.tsx
new file mode 100644
index 0000000..543d9e0
--- /dev/null
+++ b/packages/cletus/src/browser/operations/artist.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { Operation } from '../../schemas';
+import { getStatusInfo, getElapsedTime } from './render';
+import { cn } from '../lib/utils';
+
+interface OperationRendererProps {
+  operation: Operation;
+  showInput?: boolean;
+  showOutput?: boolean;
+}
+
+function createRenderer(getLabel: (op: Operation) => string, getSummary?: (op: Operation) => React.ReactNode | null) {
+  return ({ operation }: OperationRendererProps) => {
+    const { color: statusColor, label: statusLabel } = getStatusInfo(operation.status);
+    const elapsed = getElapsedTime(operation);
+    const summary = getSummary ? getSummary(operation) : null;
+
+    return (
+      <div className="mb-3 border border-neon-pink/30 rounded-lg p-3 bg-neon-pink/5">
+        <div className="flex items-center gap-2 mb-2">
+          <span className={cn('text-lg', statusColor)}>●</span>
+          <span className="font-mono text-sm text-neon-pink">{getLabel(operation)}</span>
+          <span className="text-xs text-muted-foreground">[{statusLabel}]</span>
+          {elapsed && <span className="text-xs text-muted-foreground">({elapsed})</span>}
+        </div>
+        {summary}
+      </div>
+    );
+  };
+}
+
+export const image_generate = createRenderer(
+  (op) => `ImageGen("${op.input.prompt?.substring(0, 30)}...")`,
+  (op) => {
+    if (operation.error) {
+      return <div className="ml-6 text-sm text-red-400">→ {operation.error}</div>;
+    }
+    if (op.output?.url) {
+      return (
+        <div className="ml-6 mt-2">
+          <img src={op.output.url} alt="Generated" className="max-w-sm rounded border border-neon-pink/30" />
+        </div>
+      );
+    }
+    return null;
+  }
+);
+
+export const image_edit = createRenderer(
+  (op) => `ImageEdit("${op.input.prompt?.substring(0, 30)}...")`,
+  (op) => {
+    if (operation.error) {
+      return <div className="ml-6 text-sm text-red-400">→ {operation.error}</div>;
+    }
+    if (op.output?.url) {
+      return (
+        <div className="ml-6 mt-2">
+          <img src={op.output.url} alt="Edited" className="max-w-sm rounded border border-neon-pink/30" />
+        </div>
+      );
+    }
+    return null;
+  }
+);
+
+export const image_analyze = createRenderer(
+  (op) => `ImageAnalyze("${op.input.path}")`,
+  (op) => op.output?.analysis ? <div className="ml-6 text-sm text-muted-foreground">→ {op.output.analysis}</div> : null
+);
+
+export const image_describe = createRenderer(
+  (op) => `ImageDescribe("${op.input.path}")`,
+  (op) => op.output?.description ? <div className="ml-6 text-sm text-muted-foreground">→ {op.output.description}</div> : null
+);
+
+export const image_find = createRenderer(
+  (op) => `ImageFind("${op.input.glob}")`,
+  (op) => op.output?.count !== undefined ? <div className="ml-6 text-sm text-muted-foreground">→ Found {op.output.count} image{op.output.count !== 1 ? 's' : ''}</div> : null
+);
+
+export const image_attach = createRenderer(
+  (op) => `ImageAttach("${op.input.path}")`,
+  (op) => op.output ? <div className="ml-6 text-sm text-muted-foreground">→ Attached to context</div> : null
+);
diff --git a/packages/cletus/src/browser/operations/clerk.tsx b/packages/cletus/src/browser/operations/clerk.tsx
new file mode 100644
index 0000000..cf1c22a
--- /dev/null
+++ b/packages/cletus/src/browser/operations/clerk.tsx
@@ -0,0 +1,181 @@
+import React from 'react';
+import { Operation } from '../../schemas';
+import { BaseOperationDisplay } from './BaseOperationDisplay';
+import { cn } from '../lib/utils';
+
+interface OperationRendererProps {
+  operation: Operation;
+  showInput?: boolean;
+  showOutput?: boolean;
+}
+
+export const file_search: React.FC<OperationRendererProps> = ({ operation }) => {
+  const summary = operation.output?.count !== undefined
+    ? `Found ${operation.output.count} file${operation.output.count !== 1 ? 's' : ''}`
+    : operation.analysis;
+  return <BaseOperationDisplay operation={operation} label={`Files("${operation.input.glob}")`} summary={summary} />;
+};
+
+export const file_summary: React.FC<OperationRendererProps> = ({ operation }) => (
+  <BaseOperationDisplay operation={operation} label={`Summary("${operation.input.path}")`} summary={operation.output?.summary || operation.analysis} />
+);
+
+export const file_index: React.FC<OperationRendererProps> = ({ operation }) => {
+  const summary = operation.output?.indexed !== undefined
+    ? `Indexed ${operation.output.indexed} file${operation.output.indexed !== 1 ? 's' : ''}`
+    : operation.analysis;
+  return <BaseOperationDisplay operation={operation} label={`Index("${operation.input.glob}")`} summary={summary} />;
+};
+
+export const file_create: React.FC<OperationRendererProps> = ({ operation }) => (
+  <BaseOperationDisplay operation={operation} label={`Create("${operation.input.path}")`} summary={operation.output?.fullPath ? `Created ${operation.output.fullPath}` : operation.analysis} />
+);
+
+export const file_copy: React.FC<OperationRendererProps> = ({ operation }) => (
+  <BaseOperationDisplay operation={operation} label={`Copy("${operation.input.from}" → "${operation.input.to}")`} summary={operation.output?.fullPath ? `Copied to ${operation.output.fullPath}` : operation.analysis} />
+);
+
+export const file_move: React.FC<OperationRendererProps> = ({ operation }) => (
+  <BaseOperationDisplay operation={operation} label={`Move("${operation.input.from}" → "${operation.input.to}")`} summary={operation.output?.fullPath ? `Moved to ${operation.output.fullPath}` : operation.analysis} />
+);
+
+export const file_stats: React.FC<OperationRendererProps> = ({ operation }) => {
+  let summary = operation.analysis;
+  if (operation.output) {
+    const size = operation.output.size;
+    const sizeStr = size < 1024 ? `${size}B` :
+                    size < 1024 * 1024 ? `${(size / 1024).toFixed(1)}KB` :
+                    `${(size / (1024 * 1024)).toFixed(1)}MB`;
+    summary = `${sizeStr} - ${operation.output.type}`;
+  }
+  return <BaseOperationDisplay operation={operation} label={`Stats("${operation.input.path}")`} summary={summary} />;
+};
+
+export const file_delete: React.FC<OperationRendererProps> = ({ operation }) => (
+  <BaseOperationDisplay operation={operation} label={`Delete("${operation.input.path}")`} summary={operation.output ? 'Deleted' : operation.analysis} />
+);
+
+export const file_read: React.FC<OperationRendererProps> = ({ operation }) => {
+  let summary = operation.analysis;
+  if (operation.output) {
+    const lines = (operation.output.content || '').split('\n').length;
+    summary = `${lines} line${lines !== 1 ? 's' : ''}`;
+  }
+  return <BaseOperationDisplay operation={operation} label={`Read("${operation.input.path}")`} summary={summary} />;
+};
+
+export const file_edit: React.FC<OperationRendererProps> = ({ operation }) => {
+  // Check if there are no changes to apply
+  if (operation.cache?.changed === false) {
+    return (
+      <BaseOperationDisplay
+        operation={operation}
+        label={`Edit("${operation.input.path}")`}
+        summary="No changes"
+      />
+    );
+  }
+
+  // Parse the diff to count additions and removals
+  const diff = operation.cache?.diff || operation.output || operation.analysis || '';
+  const diffLines = diff.split('\n');
+  let additions = 0;
+  let subtractions = 0;
+
+  diffLines.forEach(line => {
+    if (line.startsWith('+') && !line.startsWith('+++')) {
+      additions++;
+    } else if (line.startsWith('-') && !line.startsWith('---')) {
+      subtractions++;
+    }
+  });
+
+  // Build summary with diff visualization
+  const summaryContent = (
+    <div>
+      <span className="text-foreground">→ </span>
+      <span>
+        {operation.output ? 'Updated ' : operation.analysis ? 'Edit ' : 'Analyzing '}
+        <span className="text-neon-cyan">{operation.input.path}</span>
+        {diff && additions + subtractions > 0 && (
+          <span>
+            {' '}with {additions} addition{additions !== 1 ? 's' : ''} and {subtractions} removal{subtractions !== 1 ? 's' : ''}
+          </span>
+        )}
+      </span>
+
+      {/* Render diff */}
+      {diff && (
+        <div className="mt-2 text-xs font-mono">
+          {diffLines
+            .slice(4) // Skip header lines
+            .filter(line => !line.startsWith('\\'))
+            .map((line, index) => {
+              const isAddition = line.startsWith('+') && !line.startsWith('+++');
+              const isRemoval = line.startsWith('-') && !line.startsWith('---');
+              const isContext = line.startsWith(' ');
+              const isChunkHeader = line.startsWith('@@');
+
+              if (isChunkHeader) {
+                return (
+                  <div key={index} className="text-muted-foreground my-1">
+                    {index > 0 && <div className="my-1">...</div>}
+                  </div>
+                );
+              }
+
+              return (
+                <div
+                  key={index}
+                  className={cn(
+                    'whitespace-pre',
+                    isAddition && 'bg-green-900/30 text-green-300',
+                    isRemoval && 'bg-red-900/30 text-red-300',
+                    isContext && 'text-muted-foreground'
+                  )}
+                >
+                  {line}
+                </div>
+              );
+            })}
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <BaseOperationDisplay
+      operation={operation}
+      label={`Edit("${operation.input.path}")`}
+      summary={summaryContent}
+      borderColor={operation.output ? 'border-border' : operation.status === 'rejected' ? 'border-muted' : 'border-green-500/30'}
+      bgColor={operation.output ? 'bg-card/50' : operation.status === 'rejected' ? 'bg-muted/20' : 'bg-green-500/5'}
+    />
+  );
+};
+
+export const text_search: React.FC<OperationRendererProps> = ({ operation }) => {
+  const summary = operation.output?.matches !== undefined
+    ? `Found ${operation.output.matches} match${operation.output.matches !== 1 ? 'es' : ''}`
+    : operation.analysis;
+  return <BaseOperationDisplay operation={operation} label={`Search("${operation.input.pattern}")`} summary={summary} />;
+};
+
+export const dir_create: React.FC<OperationRendererProps> = ({ operation }) => (
+  <BaseOperationDisplay operation={operation} label={`MkDir("${operation.input.path}")`} summary={operation.output?.fullPath ? `Created ${operation.output.fullPath}` : operation.analysis} />
+);
+
+export const dir_summary: React.FC<OperationRendererProps> = ({ operation }) => (
+  <BaseOperationDisplay operation={operation} label={`DirSummary("${operation.input.path}")`} summary={operation.output?.summary || operation.analysis} />
+);
+
+export const file_attach: React.FC<OperationRendererProps> = ({ operation }) => (
+  <BaseOperationDisplay operation={operation} label={`Attach("${operation.input.path}")`} summary={operation.output ? 'Attached to context' : operation.analysis} />
+);
+
+export const shell: React.FC<OperationRendererProps> = ({ operation }) => {
+  const summary = operation.output
+    ? `Exit code: ${operation.output.exitCode || 0}`
+    : operation.analysis;
+  return <BaseOperationDisplay operation={operation} label={`Shell("${operation.input.command}")`} summary={summary} />;
+};
diff --git a/packages/cletus/src/browser/operations/dba.tsx b/packages/cletus/src/browser/operations/dba.tsx
new file mode 100644
index 0000000..9b48d25
--- /dev/null
+++ b/packages/cletus/src/browser/operations/dba.tsx
@@ -0,0 +1,144 @@
+import React from 'react';
+import { Operation } from '../../schemas';
+import { BaseOperationDisplay } from './BaseOperationDisplay';
+import { formatName, abbreviate } from '../../shared';
+
+interface OperationRendererProps {
+  operation: Operation;
+  showInput?: boolean;
+  showOutput?: boolean;
+}
+
+export const data_index: React.FC<OperationRendererProps> = ({ operation }) => {
+  const typeName = operation.cache?.typeName || formatName(operation.input.type);
+  const summary = operation.output?.libraryKnowledgeUpdated
+    ? `Knowledge updated for type: ${typeName}`
+    : operation.analysis;
+
+  return (
+    <BaseOperationDisplay
+      operation={operation}
+      label={`${typeName}Index()`}
+      summary={summary}
+      borderColor="border-neon-blue/30"
+      bgColor="bg-neon-blue/5"
+      labelColor="text-neon-blue"
+    />
+  );
+};
+
+export const data_import: React.FC<OperationRendererProps> = ({ operation }) => {
+  const typeName = operation.cache?.typeName || formatName(operation.input.type);
+  let summary = operation.analysis;
+
+  if (operation.output) {
+    summary = `Imported ${operation.output.imported} new, updated ${operation.output.updated}, skipped ${operation.output.updateSkippedNoChanges || 0} duplicate(s)`;
+  } else if (operation.cache?.importableCount !== undefined) {
+    summary = `Will import from ${operation.cache.importableCount} file(s)`;
+  }
+
+  return (
+    <BaseOperationDisplay
+      operation={operation}
+      label={`${typeName}Import("${operation.input.glob}")`}
+      summary={summary}
+      borderColor="border-neon-blue/30"
+      bgColor="bg-neon-blue/5"
+      labelColor="text-neon-blue"
+    />
+  );
+};
+
+export const data_search: React.FC<OperationRendererProps> = ({ operation }) => {
+  const typeName = operation.cache?.typeName || formatName(operation.input.type);
+  const query = abbreviate(operation.input.query, 20);
+  const summary = operation.output?.results
+    ? `Found ${operation.output.results.length} result${operation.output.results.length !== 1 ? 's' : ''}`
+    : operation.analysis;
+
+  return (
+    <BaseOperationDisplay
+      operation={operation}
+      label={`${typeName}Search("${query}")`}
+      summary={summary}
+      borderColor="border-neon-blue/30"
+      bgColor="bg-neon-blue/5"
+      labelColor="text-neon-blue"
+    />
+  );
+};
+
+export const data_get: React.FC<OperationRendererProps> = ({ operation }) => {
+  const typeName = operation.cache?.typeName || formatName(operation.input.type);
+  const offset = operation.input.offset ?? 0;
+  const limit = operation.input.limit ?? 10;
+
+  let summary = operation.analysis;
+  if (operation.output) {
+    const count = operation.output.records.length;
+    summary = `Retrieved ${count} of ${operation.output.total} record${operation.output.total !== 1 ? 's' : ''}`;
+  }
+
+  return (
+    <BaseOperationDisplay
+      operation={operation}
+      label={`${typeName}Get(offset: ${offset}, limit: ${limit})`}
+      summary={summary}
+      borderColor="border-neon-blue/30"
+      bgColor="bg-neon-blue/5"
+      labelColor="text-neon-blue"
+    />
+  );
+};
+
+export const query: React.FC<OperationRendererProps> = ({ operation }) => {
+  // Extract query information from input or cache
+  const isStringQuery = typeof operation.input.query === 'string';
+  const queryString = operation.cache?.queryString || (isStringQuery ? operation.input.query : null);
+
+  // Build label
+  let label: string;
+  if (queryString) {
+    const abbreviated = queryString.length > 50 ? queryString.substring(0, 50) + '...' : queryString;
+    label = `Query("${abbreviated}")`;
+  } else {
+    label = 'Query()';
+  }
+
+  // Build summary from output (matching CLI logic from dba.tsx lines 932-946)
+  let summary: string | null = null;
+  if (operation.output) {
+    const parts: string[] = [];
+    if (operation.output.rows?.length > 0) {
+      parts.push(`${operation.output.rows.length} row${operation.output.rows.length !== 1 ? 's' : ''}`);
+    }
+    if (operation.output.inserted?.length) {
+      const count = operation.output.inserted.reduce((a: number, b: any) => a + b.ids.length, 0);
+      parts.push(`${count} inserted`);
+    }
+    if (operation.output.updated?.length) {
+      const count = operation.output.updated.reduce((a: number, b: any) => a + b.ids.length, 0);
+      parts.push(`${count} updated`);
+    }
+    if (operation.output.deleted?.length) {
+      const count = operation.output.deleted.reduce((a: number, b: any) => a + b.ids.length, 0);
+      parts.push(`${count} deleted`);
+    }
+    summary = parts.length > 0 ? parts.join(', ') : 'Query executed';
+  } else if (operation.cache?.canCommit && !operation.cache.canCommit.canCommit) {
+    summary = `Cannot execute: ${operation.cache.canCommit.reason}`;
+  } else if (operation.analysis) {
+    summary = operation.analysis;
+  }
+
+  return (
+    <BaseOperationDisplay
+      operation={operation}
+      label={label}
+      summary={summary}
+      borderColor="border-neon-blue/30"
+      bgColor="bg-neon-blue/5"
+      labelColor="text-neon-blue"
+    />
+  );
+};
diff --git a/packages/cletus/src/browser/operations/index.tsx b/packages/cletus/src/browser/operations/index.tsx
new file mode 100644
index 0000000..d321c3c
--- /dev/null
+++ b/packages/cletus/src/browser/operations/index.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { Operation, OperationKind } from '../../schemas';
+import { OperationDisplay as DefaultOperationDisplay } from './render';
+
+// Import operation-specific renderers
+import * as clerk from './clerk';
+import * as planner from './planner';
+import * as architect from './architect';
+import * as dba from './dba';
+import * as artist from './artist';
+import * as internet from './internet';
+import * as librarian from './librarian';
+import * as secretary from './secretary';
+
+/**
+ * Registry of operation renderers
+ */
+const OperationRenderers: Partial<Record<OperationKind, React.FC<{
+  operation: Operation;
+  showInput?: boolean;
+  showOutput?: boolean;
+}>>> = {
+  // Clerk operations
+  ...clerk,
+
+  // Planner operations
+  ...planner,
+
+  // Architect operations
+  ...architect,
+
+  // DBA operations
+  ...dba,
+
+  // Artist operations
+  ...artist,
+
+  // Internet operations
+  ...internet,
+
+  // Librarian operations
+  ...librarian,
+
+  // Secretary operations
+  ...secretary,
+};
+
+interface OperationDisplayProps {
+  operation: Operation;
+  showInput?: boolean;
+  showOutput?: boolean;
+}
+
+/**
+ * Main operation display component that delegates to specific renderers
+ */
+export const OperationDisplay: React.FC<OperationDisplayProps> = (props) => {
+  const Renderer = OperationRenderers[props.operation.type as OperationKind];
+
+  if (Renderer) {
+    return <Renderer {...props} />;
+  }
+
+  // Fall back to default renderer
+  return <DefaultOperationDisplay {...props} />;
+};
diff --git a/packages/cletus/src/browser/operations/internet.tsx b/packages/cletus/src/browser/operations/internet.tsx
new file mode 100644
index 0000000..5b65678
--- /dev/null
+++ b/packages/cletus/src/browser/operations/internet.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Operation } from '../../schemas';
+import { getStatusInfo, getElapsedTime } from './render';
+import { cn } from '../lib/utils';
+
+interface OperationRendererProps {
+  operation: Operation;
+  showInput?: boolean;
+  showOutput?: boolean;
+}
+
+function createRenderer(getLabel: (op: Operation) => string, getSummary?: (op: Operation) => string | null) {
+  return ({ operation }: OperationRendererProps) => {
+    const { color: statusColor, label: statusLabel } = getStatusInfo(operation.status);
+    const elapsed = getElapsedTime(operation);
+    const summary = operation.error || (getSummary ? getSummary(operation) : null) || operation.analysis;
+
+    return (
+      <div className="mb-3 border border-neon-green/30 rounded-lg p-3 bg-neon-green/5">
+        <div className="flex items-center gap-2 mb-2">
+          <span className={cn('text-lg', statusColor)}>●</span>
+          <span className="font-mono text-sm text-neon-green">{getLabel(operation)}</span>
+          <span className="text-xs text-muted-foreground">[{statusLabel}]</span>
+          {elapsed && <span className="text-xs text-muted-foreground">({elapsed})</span>}
+        </div>
+        {summary && (
+          <div className={cn('ml-6 text-sm', operation.error ? 'text-red-400' : 'text-muted-foreground')}>
+            → {summary}
+          </div>
+        )}
+      </div>
+    );
+  };
+}
+
+export const web_search = createRenderer(
+  (op) => `WebSearch("${op.input.query}")`,
+  (op) => op.output?.results?.length ? `Found ${op.output.results.length} result${op.output.results.length !== 1 ? 's' : ''}` : null
+);
+
+export const web_get_page = createRenderer(
+  (op) => `WebGet("${op.input.url}")`,
+  (op) => op.output?.content ? `Retrieved ${op.output.content.length} characters` : null
+);
+
+export const web_api_call = createRenderer(
+  (op) => `API(${op.input.method} "${op.input.url}")`,
+  (op) => op.output?.status ? `Status ${op.output.status}` : null
+);
+
+export const web_download = createRenderer(
+  (op) => `Download("${op.input.url}")`,
+  (op) => op.output?.path ? `Saved to ${op.output.path}` : null
+);
diff --git a/packages/cletus/src/browser/operations/librarian.tsx b/packages/cletus/src/browser/operations/librarian.tsx
new file mode 100644
index 0000000..59eddce
--- /dev/null
+++ b/packages/cletus/src/browser/operations/librarian.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Operation } from '../../schemas';
+import { getStatusInfo, getElapsedTime } from './render';
+import { cn } from '../lib/utils';
+
+interface OperationRendererProps {
+  operation: Operation;
+  showInput?: boolean;
+  showOutput?: boolean;
+}
+
+function createRenderer(getLabel: (op: Operation) => string, getSummary?: (op: Operation) => string | null) {
+  return ({ operation }: OperationRendererProps) => {
+    const { color: statusColor, label: statusLabel } = getStatusInfo(operation.status);
+    const elapsed = getElapsedTime(operation);
+    const summary = operation.error || (getSummary ? getSummary(operation) : null) || operation.analysis;
+
+    return (
+      <div className="mb-3 border border-purple-400/30 rounded-lg p-3 bg-purple-400/5">
+        <div className="flex items-center gap-2 mb-2">
+          <span className={cn('text-lg', statusColor)}>●</span>
+          <span className="font-mono text-sm text-purple-400">{getLabel(operation)}</span>
+          <span className="text-xs text-muted-foreground">[{statusLabel}]</span>
+          {elapsed && <span className="text-xs text-muted-foreground">({elapsed})</span>}
+        </div>
+        {summary && (
+          <div className={cn('ml-6 text-sm', operation.error ? 'text-red-400' : 'text-muted-foreground')}>
+            → {summary}
+          </div>
+        )}
+      </div>
+    );
+  };
+}
+
+export const knowledge_search = createRenderer(
+  (op) => `KnowledgeSearch("${op.input.query}")`,
+  (op) => op.output?.results?.length ? `Found ${op.output.results.length} result${op.output.results.length !== 1 ? 's' : ''}` : null
+);
+
+export const knowledge_sources = createRenderer((op) => 'KnowledgeSources()');
+
+export const knowledge_add = createRenderer(
+  (op) => `KnowledgeAdd("${op.input.source}")`,
+  (op) => op.output?.added ? `Added ${op.output.added} entr${op.output.added !== 1 ? 'ies' : 'y'}` : null
+);
+
+export const knowledge_delete = createRenderer(
+  (op) => `KnowledgeDelete("${op.input.source}")`,
+  (op) => op.output?.deleted ? `Deleted ${op.output.deleted} entr${op.output.deleted !== 1 ? 'ies' : 'y'}` : null
+);
diff --git a/packages/cletus/src/browser/operations/planner.tsx b/packages/cletus/src/browser/operations/planner.tsx
new file mode 100644
index 0000000..b2c071e
--- /dev/null
+++ b/packages/cletus/src/browser/operations/planner.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { Operation } from '../../schemas';
+import { getStatusInfo, getElapsedTime } from './render';
+import { cn } from '../lib/utils';
+
+interface OperationRendererProps {
+  operation: Operation;
+  showInput?: boolean;
+  showOutput?: boolean;
+}
+
+function createRenderer(getLabel: (op: Operation) => string, getSummary?: (op: Operation) => string | null) {
+  return ({ operation, showInput = false, showOutput = false }: OperationRendererProps) => {
+    const { color: statusColor, label: statusLabel } = getStatusInfo(operation.status);
+    const elapsed = getElapsedTime(operation);
+    const label = getLabel(operation);
+    const summary = operation.error || (getSummary ? getSummary(operation) : null) || operation.analysis;
+
+    return (
+      <div className="mb-3 border border-neon-purple/30 rounded-lg p-3 bg-neon-purple/5">
+        <div className="flex items-center gap-2 mb-2">
+          <span className={cn('text-lg', statusColor)}>●</span>
+          <span className="font-mono text-sm text-neon-purple">{label}</span>
+          <span className="text-xs text-muted-foreground">[{statusLabel}]</span>
+          {elapsed && <span className="text-xs text-muted-foreground">({elapsed})</span>}
+        </div>
+        {summary && (
+          <div className={cn('ml-6 text-sm', operation.error ? 'text-red-400' : 'text-muted-foreground')}>
+            → {summary}
+          </div>
+        )}
+      </div>
+    );
+  };
+}
+
+export const todos_list = createRenderer((op) => 'TodosList()');
+export const todos_add = createRenderer((op) => `TodosAdd("${op.input.name}")`);
+export const todos_done = createRenderer((op) => `TodosDone("${op.input.id}")`);
+export const todos_get = createRenderer((op) => `TodosGet("${op.input.id}")`);
+export const todos_remove = createRenderer((op) => `TodosRemove("${op.input.id}")`);
+export const todos_replace = createRenderer((op) => 'TodosReplace()');
+export const todos_clear = createRenderer((op) => 'TodosClear()');
diff --git a/packages/cletus/src/browser/operations/render.tsx b/packages/cletus/src/browser/operations/render.tsx
new file mode 100644
index 0000000..1fda471
--- /dev/null
+++ b/packages/cletus/src/browser/operations/render.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Operation } from '../../schemas';
+import { BaseOperationDisplay } from './BaseOperationDisplay';
+
+/**
+ * Get status color and label for an operation status
+ */
+export function getStatusInfo(status: Operation['status']): { color: string; label: string } {
+  switch (status) {
+    case 'done':
+      return { color: 'text-green-400', label: 'completed' };
+    case 'doing':
+      return { color: 'text-orange-400', label: 'in progress' };
+    case 'analyzed':
+      return { color: 'text-yellow-400', label: 'pending approval' };
+    case 'doneError':
+      return { color: 'text-red-400', label: 'error' };
+    case 'analyzeError':
+      return { color: 'text-red-400', label: 'analysis error' };
+    case 'analyzedBlocked':
+      return { color: 'text-red-400', label: 'blocked' };
+    case 'rejected':
+      return { color: 'text-red-400', label: 'rejected' };
+    default:
+      return { color: 'text-muted-foreground', label: status };
+  }
+}
+
+/**
+ * Calculate elapsed time for an operation
+ */
+export function getElapsedTime(op: Operation): string {
+  if (!op.start) return '';
+  const duration = op.end ? op.end - op.start : Date.now() - op.start;
+
+  if (duration < 1000) return `${Math.round(duration)}ms`;
+  if (duration < 60000) return `${(duration / 1000).toFixed(1)}s`;
+  return `${Math.floor(duration / 60000)}m ${Math.round((duration % 60000) / 1000)}s`;
+}
+
+interface OperationDisplayProps {
+  operation: Operation;
+  showInput?: boolean;
+  showOutput?: boolean;
+}
+
+/**
+ * Default operation renderer - delegates to BaseOperationDisplay
+ */
+export const OperationDisplay: React.FC<OperationDisplayProps> = ({ operation }) => (
+  <BaseOperationDisplay
+    operation={operation}
+    label={operation.type}
+    summary={operation.analysis}
+  />
+);
diff --git a/packages/cletus/src/browser/operations/secretary.tsx b/packages/cletus/src/browser/operations/secretary.tsx
new file mode 100644
index 0000000..8f4f358
--- /dev/null
+++ b/packages/cletus/src/browser/operations/secretary.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Operation } from '../../schemas';
+import { getStatusInfo, getElapsedTime } from './render';
+import { cn } from '../lib/utils';
+
+interface OperationRendererProps {
+  operation: Operation;
+  showInput?: boolean;
+  showOutput?: boolean;
+}
+
+function createRenderer(getLabel: (op: Operation) => string, getSummary?: (op: Operation) => string | null) {
+  return ({ operation }: OperationRendererProps) => {
+    const { color: statusColor, label: statusLabel } = getStatusInfo(operation.status);
+    const elapsed = getElapsedTime(operation);
+    const summary = operation.error || (getSummary ? getSummary(operation) : null) || operation.analysis;
+
+    return (
+      <div className="mb-3 border border-yellow-400/30 rounded-lg p-3 bg-yellow-400/5">
+        <div className="flex items-center gap-2 mb-2">
+          <span className={cn('text-lg', statusColor)}>●</span>
+          <span className="font-mono text-sm text-yellow-400">{getLabel(operation)}</span>
+          <span className="text-xs text-muted-foreground">[{statusLabel}]</span>
+          {elapsed && <span className="text-xs text-muted-foreground">({elapsed})</span>}
+        </div>
+        {summary && (
+          <div className={cn('ml-6 text-sm', operation.error ? 'text-red-400' : 'text-muted-foreground')}>
+            → {summary}
+          </div>
+        )}
+      </div>
+    );
+  };
+}
+
+export const assistant_switch = createRenderer(
+  (op) => `SwitchAssistant("${op.input.name}")`,
+  (op) => op.output ? `Switched to ${op.input.name}` : null
+);
+
+export const assistant_update = createRenderer(
+  (op) => `UpdateAssistant("${op.input.name}")`,
+  (op) => op.output ? 'Assistant updated' : null
+);
+
+export const assistant_add = createRenderer(
+  (op) => `AddAssistant("${op.input.name}")`,
+  (op) => op.output ? 'Assistant created' : null
+);
+
+export const memory_list = createRenderer((op) => 'MemoryList()');
+
+export const memory_update = createRenderer(
+  (op) => 'UpdateMemory()',
+  (op) => op.output ? 'Memory updated' : null
+);
diff --git a/packages/cletus/src/browser/pages/ChatPage.tsx b/packages/cletus/src/browser/pages/ChatPage.tsx
index 05e60e6..b356b6b 100644
--- a/packages/cletus/src/browser/pages/ChatPage.tsx
+++ b/packages/cletus/src/browser/pages/ChatPage.tsx
@@ -1,41 +1,14 @@
-import React, { useState, useEffect } from 'react';
-import { ChatHeader } from '../components/ChatHeader';
+import React, { useState, useEffect, useRef } from 'react';
+import { ArrowLeft, Bot } from 'lucide-react';
+import { Button } from '../components/ui/button';
+import { ScrollArea } from '../components/ui/scroll-area';
 import { MessageList } from '../components/MessageList';
 import { ChatInput } from '../components/ChatInput';
-
-interface Message {
-  role: 'user' | 'assistant' | 'system';
-  content?: string;
-  created: number;
-  operations?: Array<{
-    type: string;
-    status: string;
-    input: any;
-    output?: any;
-  }>;
-}
-
-interface ChatMeta {
-  id: string;
-  name: string;
-  mode: string;
-  assistant?: string;
-  created: number;
-  updated: number;
-}
-
-interface ConfigData {
-  user: {
-    name: string;
-    showInput?: boolean;
-    showOutput?: boolean;
-  };
-  chats: Array<ChatMeta>;
-}
+import type { Message, Config } from '../../schemas';
 
 interface ChatPageProps {
   chatId: string;
-  config: ConfigData;
+  config: Config;
   onBack: () => void;
   onConfigChange: () => Promise<void>;
 }
@@ -43,25 +16,48 @@ interface ChatPageProps {
 export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onConfigChange }) => {
   const [messages, setMessages] = useState<Message[]>([]);
   const [loading, setLoading] = useState(true);
+  const wsRef = useRef<WebSocket | null>(null);
 
   const chatMeta = config.chats.find((c) => c.id === chatId);
 
   useEffect(() => {
-    const loadMessages = async () => {
-      try {
-        const response = await fetch(`/api/chat/${chatId}/messages`);
-        if (response.ok) {
-          const data = await response.json();
-          setMessages(data.data.messages || []);
-        }
-      } catch (error) {
-        console.error('Error loading messages:', error);
-      } finally {
+    // Connect to WebSocket and get messages
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const ws = new WebSocket(`${protocol}//${window.location.host}`);
+
+    ws.onopen = () => {
+      ws.send(JSON.stringify({
+        type: 'get_messages',
+        data: { chatId },
+      }));
+    };
+
+    ws.onmessage = (event) => {
+      const message = JSON.parse(event.data);
+
+      if (message.type === 'messages') {
+        setMessages(message.data.messages || []);
         setLoading(false);
+        ws.close();
+      } else if (message.type === 'error') {
+        console.error('Error loading messages:', message.data.message);
+        setLoading(false);
+        ws.close();
       }
     };
 
-    loadMessages();
+    ws.onerror = (error) => {
+      console.error('WebSocket error:', error);
+      setLoading(false);
+    };
+
+    wsRef.current = ws;
+
+    return () => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.close();
+      }
+    };
   }, [chatId]);
 
   const handleMessagesUpdate = () => {
@@ -71,40 +67,72 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
 
   if (!chatMeta) {
     return (
-      <div className="app-container">
-        <div className="main-content" style={{ justifyContent: 'center', alignItems: 'center' }}>
-          <div style={{ textAlign: 'center' }}>
-            <h2>Chat not found</h2>
-            <button className="btn btn-primary" onClick={onBack} style={{ marginTop: '1rem' }}>
-              Go Back
-            </button>
-          </div>
+      <div className="flex h-screen items-center justify-center bg-background">
+        <div className="text-center space-y-4">
+          <h2 className="text-2xl font-bold neon-text-cyan">Chat not found</h2>
+          <Button variant="neon" onClick={onBack}>
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            Go Back
+          </Button>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="app-container">
-      <div className="main-content">
-        <ChatHeader chat={chatMeta} onBack={onBack} />
+    <div className="flex h-screen bg-background">
+      {/* Main Chat Area */}
+      <div className="flex-1 flex flex-col">
+        {/* Chat Header */}
+        <div className="border-b border-border bg-card/30 backdrop-blur-sm p-4">
+          <div className="flex items-center gap-4">
+            <Button variant="ghost" size="icon" onClick={onBack}>
+              <ArrowLeft className="w-5 h-5" />
+            </Button>
+            <div className="flex-1">
+              <h2 className="text-xl font-bold neon-text-cyan">{chatMeta.title}</h2>
+              <div className="flex items-center gap-2 mt-1">
+                <span className="text-xs px-2 py-0.5 rounded-full bg-neon-purple/20 text-neon-purple border border-neon-purple/50">
+                  {chatMeta.mode}
+                </span>
+                {chatMeta.assistant && (
+                  <span className="text-xs text-muted-foreground flex items-center gap-1">
+                    <Bot className="w-3 h-3" />
+                    {chatMeta.assistant}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
         {loading ? (
-          <div style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-            <div className="spinner"></div>
+          <div className="flex-1 flex items-center justify-center">
+            <div className="text-center space-y-4">
+              <div className="spinner mx-auto"></div>
+              <p className="text-muted-foreground">Loading messages...</p>
+            </div>
           </div>
         ) : (
           <>
-            <MessageList 
-              messages={messages}
-              showInput={config.user.showInput ?? false}
-              showOutput={config.user.showOutput ?? false}
-              onMessagesUpdate={setMessages}
-            />
-            <ChatInput 
-              chatId={chatId} 
-              chatMeta={chatMeta}
-              onMessageSent={handleMessagesUpdate}
-            />
+            {/* Messages Area */}
+            <ScrollArea className="flex-1 p-6">
+              <MessageList
+                messages={messages}
+                showInput={config.user.showInput ?? false}
+                showOutput={config.user.showOutput ?? false}
+                onMessagesUpdate={setMessages}
+              />
+            </ScrollArea>
+
+            {/* Input Area */}
+            <div className="border-t border-border bg-card/30 backdrop-blur-sm">
+              <ChatInput
+                chatId={chatId}
+                chatMeta={chatMeta}
+                onMessageSent={handleMessagesUpdate}
+              />
+            </div>
           </>
         )}
       </div>
diff --git a/packages/cletus/src/browser/pages/MainPage.tsx b/packages/cletus/src/browser/pages/MainPage.tsx
index d638294..5fcf519 100644
--- a/packages/cletus/src/browser/pages/MainPage.tsx
+++ b/packages/cletus/src/browser/pages/MainPage.tsx
@@ -1,33 +1,13 @@
 import React, { useState } from 'react';
-import { Sidebar } from '../components/Sidebar';
+import { MessageSquare, Settings, Plus, Sparkles } from 'lucide-react';
+import { Button } from '../components/ui/button';
+import { ScrollArea } from '../components/ui/scroll-area';
 import { ChatList } from '../components/ChatList';
 import { SettingsView } from '../components/SettingsView';
-
-interface ConfigData {
-  user: {
-    name: string;
-    pronouns?: string;
-  };
-  assistants: Array<{
-    name: string;
-    description?: string;
-  }>;
-  chats: Array<{
-    id: string;
-    name: string;
-    mode: string;
-    created: number;
-    updated: number;
-  }>;
-  types: Array<{
-    name: string;
-    friendlyName: string;
-    description?: string;
-  }>;
-}
+import type { Config } from '../../schemas';
 
 interface MainPageProps {
-  config: ConfigData;
+  config: Config;
   onChatSelect: (chatId: string) => void;
   onConfigChange: () => Promise<void>;
 }
@@ -36,25 +16,98 @@ type MainView = 'chats' | 'settings';
 
 export const MainPage: React.FC<MainPageProps> = ({ config, onChatSelect, onConfigChange }) => {
   const [view, setView] = useState<MainView>('chats');
+  const [showNewChat, setShowNewChat] = useState(false);
 
   return (
-    <div className="app-container">
-      <Sidebar
-        currentView={view}
-        onViewChange={setView}
-        userName={config.user.name}
-      />
-      <div className="main-content">
-        <div className="header">
-          <h1>{view === 'chats' ? 'Chats' : 'Settings'}</h1>
+    <div className="flex h-screen bg-background">
+      {/* Sidebar */}
+      <div className="w-64 border-r border-border bg-card/50 backdrop-blur-sm flex flex-col">
+        <div className="p-6 border-b border-border">
+          <div className="flex items-center gap-3 mb-6">
+            <Sparkles className="w-8 h-8 text-neon-cyan" />
+            <h1 className="text-2xl font-bold neon-text-purple">Cletus</h1>
+          </div>
+          <div className="text-sm text-muted-foreground">
+            Welcome, <span className="text-neon-cyan font-semibold">{config.user.name}</span>
+          </div>
+        </div>
+
+        <nav className="flex-1 p-4">
+          <div className="space-y-2">
+            <Button
+              variant={view === 'chats' ? 'default' : 'ghost'}
+              className="w-full justify-start gap-3"
+              onClick={() => {
+                setView('chats');
+                window.history.pushState({}, '', '/');
+              }}
+            >
+              <MessageSquare className="w-4 h-4" />
+              Chats
+            </Button>
+            <Button
+              variant={view === 'settings' ? 'default' : 'ghost'}
+              className="w-full justify-start gap-3 text-foreground hover:text-foreground"
+              onClick={() => {
+                setView('settings');
+                window.history.pushState({}, '', '/settings');
+              }}
+            >
+              <Settings className="w-4 h-4" />
+              Settings
+            </Button>
+          </div>
+        </nav>
+
+        <div className="p-4 border-t border-border">
+          <div className="text-xs text-muted-foreground text-center">
+            <div className="neon-text-purple font-mono">Browser Mode</div>
+          </div>
         </div>
-        <div style={{ flex: 1, overflow: 'auto', padding: '1.5rem' }}>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 flex flex-col">
+        {/* Header */}
+        <div className="border-b border-border bg-card/30 backdrop-blur-sm p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <h2 className="text-3xl font-bold neon-text-cyan">
+                {view === 'chats' ? 'Your Chats' : 'Settings'}
+              </h2>
+              <p className="text-sm text-muted-foreground mt-1">
+                {view === 'chats'
+                  ? `${config.chats.length} conversation${config.chats.length !== 1 ? 's' : ''}`
+                  : 'Manage your preferences'
+                }
+              </p>
+            </div>
+            {view === 'chats' && (
+              <Button variant="neon" className="gap-2" onClick={() => setShowNewChat(true)}>
+                <Plus className="w-4 h-4" />
+                New Chat
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {/* Content Area */}
+        <ScrollArea className="flex-1 p-6">
           {view === 'chats' ? (
-            <ChatList config={config} onChatSelect={onChatSelect} onConfigChange={onConfigChange} />
+            <ChatList
+              config={config}
+              onChatSelect={(chatId) => {
+                window.history.pushState({}, '', `/chat/${chatId}`);
+                onChatSelect(chatId);
+              }}
+              onConfigChange={onConfigChange}
+              forceShowCreate={showNewChat}
+              onCreateClose={() => setShowNewChat(false)}
+            />
           ) : (
             <SettingsView config={config} />
           )}
-        </div>
+        </ScrollArea>
       </div>
     </div>
   );
diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
index 24d9bb2..3dd63ff 100644
--- a/packages/cletus/src/browser/server.ts
+++ b/packages/cletus/src/browser/server.ts
@@ -11,12 +11,6 @@ import type { Message, ChatMeta } from '../schemas';
 const __serverFilename = fileURLToPath(import.meta.url);
 const __serverDirname = path.dirname(__serverFilename);
 
-interface ApiResponse {
-  success: boolean;
-  data?: any;
-  error?: string;
-}
-
 interface WSMessage {
   type: string;
   data?: any;
@@ -26,36 +20,27 @@ export async function startBrowserServer(port: number = 3000): Promise<void> {
   const server = http.createServer(async (req, res) => {
     const url = req.url || '/';
 
-    // Enable CORS for local development
-    res.setHeader('Access-Control-Allow-Origin', '*');
-    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
-    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
-
-    if (req.method === 'OPTIONS') {
-      res.writeHead(200);
-      res.end();
-      return;
-    }
-
     try {
-      // API routes
-      if (url.startsWith('/api/')) {
-        await handleApiRequest(req, res, url);
-        return;
-      }
-
-      // Serve static files
+      // Serve static files only
       await serveStaticFile(url, res);
     } catch (error) {
       console.error('Server error:', error);
-      res.writeHead(500, { 'Content-Type': 'application/json' });
-      res.end(JSON.stringify({ success: false, error: 'Internal server error' }));
+      res.writeHead(500);
+      res.end('Internal server error');
     }
   });
 
-  // WebSocket server for real-time chat
+  // WebSocket server for all communication
   const wss = new WebSocketServer({ server });
-  wss.on('connection', (ws) => handleWebSocketConnection(ws));
+  const clients = new Set<WebSocket>();
+
+  wss.on('connection', (ws) => {
+    clients.add(ws);
+    ws.on('close', () => {
+      clients.delete(ws);
+    });
+    handleWebSocketConnection(ws);
+  });
 
   server.listen(port, '127.0.0.1', () => {
     console.log('\n╔════════════════════════════════════════╗');
@@ -68,10 +53,23 @@ export async function startBrowserServer(port: number = 3000): Promise<void> {
   // Handle graceful shutdown
   process.on('SIGINT', () => {
     console.log('\n\nShutting down...');
+
+    // Force close all WebSocket connections
+    clients.forEach((ws) => {
+      ws.close();
+    });
+
     wss.close();
     server.close(() => {
+      console.log('Server closed');
       process.exit(0);
     });
+
+    // Force exit after 1 second if server hasn't closed
+    setTimeout(() => {
+      console.log('Forcing shutdown...');
+      process.exit(0);
+    }, 1000);
   });
 }
 
@@ -83,81 +81,159 @@ function handleWebSocketConnection(ws: WebSocket): void {
   ws.on('message', async (data) => {
     try {
       const message: WSMessage = JSON.parse(data.toString());
-      
+
       switch (message.type) {
-        case 'init_chat':
-          const { chatId } = message.data;
-          config = new ConfigFile();
-          await config.load();
-          chatFile = new ChatFile(chatId);
-          await chatFile.load();
-          
-          ws.send(JSON.stringify({
-            type: 'chat_initialized',
-            data: {
-              messages: chatFile.getMessages(),
-              chat: config.getChats().find(c => c.id === chatId),
-            },
-          }));
+        case 'get_config':
+          try {
+            const exists = await configExists();
+            if (!exists) {
+              ws.send(JSON.stringify({
+                type: 'config_not_found',
+                data: {},
+              }));
+              return;
+            }
+
+            const configFile = new ConfigFile();
+            await configFile.load();
+            const configData = configFile.getData();
+
+            ws.send(JSON.stringify({
+              type: 'config',
+              data: {
+                user: configData.user,
+                assistants: configData.assistants,
+                chats: configData.chats,
+                types: configData.types,
+              },
+            }));
+          } catch (error) {
+            ws.send(JSON.stringify({
+              type: 'error',
+              data: { message: 'Failed to load config' },
+            }));
+          }
           break;
 
-        case 'send_message':
-          if (!config || !chatFile) {
+        case 'create_chat':
+          try {
+            const { name } = message.data;
+            const configFile = new ConfigFile();
+            await configFile.load();
+            const chatId = await configFile.createChat(name);
+            await configFile.load();
+
+            ws.send(JSON.stringify({
+              type: 'chat_created',
+              data: { chatId },
+            }));
+          } catch (error) {
             ws.send(JSON.stringify({
               type: 'error',
-              data: { message: 'Chat not initialized' },
+              data: { message: 'Failed to create chat' },
             }));
-            return;
           }
+          break;
 
-          const { content } = message.data;
-          const chat = config.getChats().find(c => c.id === chatFile!.id);
-          if (!chat) {
+        case 'init_chat':
+          try {
+            const { chatId } = message.data;
+            config = new ConfigFile();
+            await config.load();
+            chatFile = new ChatFile(chatId);
+            await chatFile.load();
+
+            ws.send(JSON.stringify({
+              type: 'chat_initialized',
+              data: {
+                messages: chatFile.getMessages(),
+                chat: config.getChats().find(c => c.id === chatId),
+              },
+            }));
+          } catch (error) {
             ws.send(JSON.stringify({
               type: 'error',
-              data: { message: 'Chat not found' },
+              data: { message: 'Failed to initialize chat' },
             }));
-            return;
           }
+          break;
 
-          // Add user message
-          const userMessage: Omit<Message, 'created'> = {
-            role: 'user',
-            content,
-          };
-          await chatFile.addMessage(userMessage);
-          
-          ws.send(JSON.stringify({
-            type: 'message_added',
-            data: { message: { ...userMessage, created: Date.now() } },
-          }));
+        case 'get_messages':
+          try {
+            const { chatId } = message.data;
+            const chatFileTemp = new ChatFile(chatId);
+            await chatFileTemp.load();
+            const messages = chatFileTemp.getMessages();
 
-          // Process AI response
-          abortController = new AbortController();
-          
-          // Lazy-load AI components
-          const { createCletusAI } = await import('../ai');
-          const { createChatAgent } = await import('../agents/chat-agent');
-          const { runChatOrchestrator } = await import('../agents/chat-orchestrator');
-          
-          const ai = createCletusAI(config);
-          const chatAgent = createChatAgent(ai);
-
-          const chatStatus = (status: string) => {
             ws.send(JSON.stringify({
-              type: 'status_update',
-              data: { status },
+              type: 'messages',
+              data: { messages },
             }));
-          };
+          } catch (error) {
+            ws.send(JSON.stringify({
+              type: 'error',
+              data: { message: 'Failed to load messages' },
+            }));
+          }
+          break;
 
-          const onRefreshChat = () => {
+        case 'send_message':
+          if (!config || !chatFile) {
             ws.send(JSON.stringify({
-              type: 'messages_updated',
-              data: { messages: chatFile!.getMessages() },
+              type: 'error',
+              data: { message: 'Chat not initialized' },
             }));
-          };
+            return;
+          }
 
           try {
+            const { content } = message.data;
+            const chat = config.getChats().find(c => c.id === chatFile!.id);
+            if (!chat) {
+              ws.send(JSON.stringify({
+                type: 'error',
+                data: { message: 'Chat not found' },
+              }));
+              return;
+            }
+
+            // Add user message
+            const userMessage: Omit<Message, 'created'> = {
+              role: 'user',
+              content,
+            };
+            await chatFile.addMessage(userMessage);
+
+            ws.send(JSON.stringify({
+              type: 'message_added',
+              data: { message: { ...userMessage, created: Date.now() } },
+            }));
+
+            // Process AI response
+            abortController = new AbortController();
+
+            // Lazy-load AI components
+            const { createCletusAI } = await import('../ai');
+            const { createChatAgent } = await import('../agents/chat-agent');
+            const { runChatOrchestrator } = await import('../agents/chat-orchestrator');
+
+            const ai = createCletusAI(config);
+            const chatAgent = createChatAgent(ai);
+
+            const chatStatus = (status: string) => {
+              ws.send(JSON.stringify({
+                type: 'status_update',
+                data: { status },
+              }));
+            };
+
+            const onRefreshChat = () => {
+              ws.send(JSON.stringify({
+                type: 'messages_updated',
+                data: { messages: chatFile!.getMessages() },
+              }));
+            };
+
             await runChatOrchestrator({
               config,
               chat,
@@ -192,6 +268,12 @@ function handleWebSocketConnection(ws: WebSocket): void {
             abortController = null;
           }
           break;
+
+        default:
+          ws.send(JSON.stringify({
+            type: 'error',
+            data: { message: `Unknown message type: ${message.type}` },
+          }));
       }
     } catch (error) {
       console.error('WebSocket error:', error);
@@ -209,109 +291,6 @@ function handleWebSocketConnection(ws: WebSocket): void {
   });
 }
 
-async function handleApiRequest(
-  req: http.IncomingMessage,
-  res: http.ServerResponse,
-  url: string
-): Promise<void> {
-  res.setHeader('Content-Type', 'application/json');
-
-  // Check if config exists
-  if (url === '/api/config/exists') {
-    const exists = await configExists();
-    sendJson(res, 200, { success: true, data: { exists } });
-    return;
-  }
-
-  // Get config
-  if (url === '/api/config' && req.method === 'GET') {
-    const exists = await configExists();
-    if (!exists) {
-      sendJson(res, 404, { success: false, error: 'Config not found' });
-      return;
-    }
-
-    const config = new ConfigFile();
-    await config.load();
-    const data = config.getData();
-
-    sendJson(res, 200, {
-      success: true,
-      data: {
-        user: data.user,
-        assistants: data.assistants,
-        chats: data.chats,
-        types: data.types,
-      },
-    });
-    return;
-  }
-
-  // Get chat messages
-  const chatMatch = url.match(/^\/api\/chat\/([^/]+)\/messages$/);
-  if (chatMatch && req.method === 'GET') {
-    const chatId = chatMatch[1];
-    const chatFile = new ChatFile(chatId);
-    
-    try {
-      await chatFile.load();
-      const messages = chatFile.getMessages();
-      sendJson(res, 200, { success: true, data: { messages } });
-    } catch (error) {
-      sendJson(res, 404, { success: false, error: 'Chat not found' });
-    }
-    return;
-  }
-
-  // Create chat
-  if (url === '/api/chat/create' && req.method === 'POST') {
-    const body = await readBody(req);
-    const { name } = JSON.parse(body);
-
-    const config = new ConfigFile();
-    await config.load();
-    const chatId = await config.createChat(name);
-    await config.load(); // Reload to get updated data
-
-    sendJson(res, 200, { success: true, data: { chatId } });
-    return;
-  }
-
-  // Update chat
-  const updateChatMatch = url.match(/^\/api\/chat\/([^/]+)$/);
-  if (updateChatMatch && req.method === 'PUT') {
-    const chatId = updateChatMatch[1];
-    const body = await readBody(req);
-    const updates = JSON.parse(body);
-
-    const config = new ConfigFile();
-    await config.load();
-    await config.updateChat(chatId, updates);
-    await config.load();
-
-    sendJson(res, 200, { success: true, data: {} });
-    return;
-  }
-
-  // Add message to chat
-  const addMessageMatch = url.match(/^\/api\/chat\/([^/]+)\/message$/);
-  if (addMessageMatch && req.method === 'POST') {
-    const chatId = addMessageMatch[1];
-    const body = await readBody(req);
-    const message = JSON.parse(body);
-
-    const chatFile = new ChatFile(chatId);
-    await chatFile.load();
-    await chatFile.addMessage(message);
-
-    sendJson(res, 200, { success: true, data: {} });
-    return;
-  }
-
-  // 404
-  sendJson(res, 404, { success: false, error: 'Not found' });
-}
-
 async function serveStaticFile(url: string, res: http.ServerResponse): Promise<void> {
   // Default to index.html
   if (url === '/' || !url.includes('.')) {
@@ -319,11 +298,10 @@ async function serveStaticFile(url: string, res: http.ServerResponse): Promise<v
   }
 
   // Security: prevent directory traversal
-  // When bundled, this code is in dist/index.js, so dist-browser is ../dist-browser
   const distDir = path.resolve(__serverDirname, '../dist-browser');
-  const filePath = path.resolve(distDir, url.slice(1)); // Remove leading slash
+  const filePath = path.resolve(distDir, url.slice(1));
 
-  // Ensure file is within dist directory using resolved paths
+  // Ensure file is within dist directory
   if (!filePath.startsWith(distDir + path.sep) && filePath !== distDir) {
     res.writeHead(403);
     res.end('Forbidden');
@@ -332,7 +310,7 @@ async function serveStaticFile(url: string, res: http.ServerResponse): Promise<v
 
   try {
     const content = await fs.readFile(filePath);
-    
+
     // Set content type
     const ext = path.extname(filePath);
     const contentTypes: Record<string, string> = {
@@ -346,7 +324,7 @@ async function serveStaticFile(url: string, res: http.ServerResponse): Promise<v
       '.ico': 'image/x-icon',
     };
     const contentType = contentTypes[ext] || 'text/plain';
-    
+
     res.setHeader('Content-Type', contentType);
     res.writeHead(200);
     res.end(content);
@@ -359,17 +337,3 @@ async function serveStaticFile(url: string, res: http.ServerResponse): Promise<v
     }
   }
 }
-
-function sendJson(res: http.ServerResponse, status: number, data: ApiResponse): void {
-  res.writeHead(status, { 'Content-Type': 'application/json' });
-  res.end(JSON.stringify(data));
-}
-
-async function readBody(req: http.IncomingMessage): Promise<string> {
-  return new Promise((resolve, reject) => {
-    let body = '';
-    req.on('data', chunk => body += chunk.toString());
-    req.on('end', () => resolve(body));
-    req.on('error', reject);
-  });
-}
diff --git a/packages/cletus/src/browser/styles.css b/packages/cletus/src/browser/styles.css
index 13e2ec8..f22bd6f 100644
--- a/packages/cletus/src/browser/styles.css
+++ b/packages/cletus/src/browser/styles.css
@@ -1,212 +1,109 @@
-/* Base styles */
-.app-container {
-  display: flex;
-  height: 100vh;
-  overflow: hidden;
-}
-
-.sidebar {
-  width: 280px;
-  background: var(--surface);
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.main-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.header {
-  padding: 1rem 1.5rem;
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: var(--surface);
-}
+@import "tailwindcss";
 
-.header h1 {
-  font-size: 1.5rem;
-  font-weight: 600;
-}
+@theme {
+  --color-background: oklch(0.15 0.02 264);
+  --color-foreground: oklch(0.98 0.01 264);
 
-/* Loading */
-.loading-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  gap: 1rem;
-}
+  --color-card: oklch(0.18 0.02 264);
+  --color-card-foreground: oklch(0.98 0.01 264);
 
-/* Buttons */
-.btn {
-  padding: 0.5rem 1rem;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--surface);
-  color: var(--text);
-  font-size: 0.9rem;
-  cursor: pointer;
-  transition: all 0.2s;
-}
+  --color-popover: oklch(0.18 0.02 264);
+  --color-popover-foreground: oklch(0.98 0.01 264);
 
-.btn:hover {
-  background: var(--surface-hover);
-}
+  --color-primary: oklch(0.70 0.25 300);
+  --color-primary-foreground: oklch(0.15 0.02 264);
 
-.btn-primary {
-  background: var(--primary);
-  color: white;
-  border: none;
-}
+  --color-secondary: oklch(0.30 0.05 264);
+  --color-secondary-foreground: oklch(0.98 0.01 264);
 
-.btn-primary:hover {
-  background: var(--primary-hover);
-}
+  --color-muted: oklch(0.30 0.05 264);
+  --color-muted-foreground: oklch(0.65 0.05 264);
 
-.btn-small {
-  padding: 0.25rem 0.75rem;
-  font-size: 0.85rem;
-}
+  --color-accent: oklch(0.30 0.05 264);
+  --color-accent-foreground: oklch(0.98 0.01 264);
 
-/* Inputs */
-.input {
-  padding: 0.5rem 0.75rem;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg);
-  color: var(--text);
-  font-size: 0.9rem;
-  width: 100%;
-}
+  --color-destructive: oklch(0.45 0.20 25);
+  --color-destructive-foreground: oklch(0.98 0.01 264);
 
-.input:focus {
-  outline: none;
-  border-color: var(--primary);
-}
+  --color-border: oklch(0.30 0.05 264);
+  --color-input: oklch(0.30 0.05 264);
+  --color-ring: oklch(0.70 0.25 300);
 
-.textarea {
-  min-height: 100px;
-  resize: vertical;
-  font-family: inherit;
-}
-
-/* Cards */
-.card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 1rem;
-  margin-bottom: 0.5rem;
-}
-
-.card-hover:hover {
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-}
-
-/* Collapsible */
-.collapsible {
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  overflow: hidden;
-  margin-bottom: 0.5rem;
-}
-
-.collapsible-header {
-  padding: 0.75rem 1rem;
-  background: var(--surface);
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  user-select: none;
-}
-
-.collapsible-header:hover {
-  background: var(--surface-hover);
-}
-
-.collapsible-content {
-  padding: 1rem;
-  border-top: 1px solid var(--border);
-  background: var(--bg);
-}
-
-.collapsible-arrow {
-  transition: transform 0.2s;
-  font-size: 0.8rem;
-}
+  --color-neon-cyan: oklch(0.70 0.18 200);
+  --color-neon-pink: oklch(0.70 0.18 350);
+  --color-neon-purple: oklch(0.65 0.20 300);
+  --color-neon-green: oklch(0.70 0.18 145);
+  --color-neon-blue: oklch(0.60 0.18 250);
 
-.collapsible-arrow.open {
-  transform: rotate(90deg);
+  --radius: 0.5rem;
 }
 
-/* Messages */
-.message {
-  padding: 1rem;
-  margin-bottom: 1rem;
-  border-radius: 8px;
+/* Custom neon effects - toned down */
+.neon-border {
+  box-shadow: 0 0 3px var(--color-neon-cyan);
 }
 
-.message-user {
-  background: var(--primary);
-  color: white;
-  margin-left: 2rem;
+.neon-text-cyan {
+  color: var(--color-neon-cyan);
+  text-shadow: 0 0 5px var(--color-neon-cyan);
 }
 
-.message-assistant {
-  background: var(--surface);
-  margin-right: 2rem;
+.neon-text-pink {
+  color: var(--color-neon-pink);
+  text-shadow: 0 0 5px var(--color-neon-pink);
 }
 
-.message-system {
-  background: var(--surface);
-  font-size: 0.9rem;
-  font-style: italic;
-  color: var(--text-secondary);
+.neon-text-purple {
+  color: var(--color-neon-purple);
+  text-shadow: 0 0 5px var(--color-neon-purple);
 }
 
-/* Utilities */
-.flex {
-  display: flex;
+.neon-glow {
+  box-shadow: 0 0 5px var(--color-neon-cyan),
+              0 0 10px var(--color-neon-cyan);
 }
 
-.flex-col {
-  flex-direction: column;
+.neon-glow-purple {
+  box-shadow: 0 0 5px var(--color-neon-purple),
+              0 0 10px var(--color-neon-purple);
 }
 
-.gap-2 {
-  gap: 0.5rem;
+.neon-glow-pink {
+  box-shadow: 0 0 5px var(--color-neon-pink),
+              0 0 10px var(--color-neon-pink);
 }
 
-.gap-4 {
-  gap: 1rem;
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 10px;
 }
 
-.p-4 {
-  padding: 1rem;
+::-webkit-scrollbar-track {
+  background: var(--color-background);
 }
 
-.text-sm {
-  font-size: 0.875rem;
+::-webkit-scrollbar-thumb {
+  background: var(--color-border);
+  border-radius: 5px;
 }
 
-.text-muted {
-  color: var(--text-muted);
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-neon-purple);
+  box-shadow: 0 0 5px var(--color-neon-purple);
 }
 
-.overflow-auto {
-  overflow: auto;
+/* Loading spinner */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
-.w-full {
-  width: 100%;
+.spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid var(--color-border);
+  border-top-color: var(--color-neon-cyan);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
 }
diff --git a/packages/cletus/src/common.ts b/packages/cletus/src/common.ts
index 733df0d..7444d33 100644
--- a/packages/cletus/src/common.ts
+++ b/packages/cletus/src/common.ts
@@ -5,95 +5,35 @@ import { Message, MessageContent } from "./schemas";
 import { Message as AIMessage, MessageContent as AIMessageContent } from "@aeye/core";
 import { detectMimeType } from "./helpers/files";
 
+// Re-export browser-safe functions from shared.ts
+export {
+  formatTime,
+  formatSize,
+  formatName,
+  abbreviate,
+  deleteUndefined,
+  pluralize,
+  cosineSimilarity,
+  chunkArray,
+  chunk,
+  groupMap,
+  group,
+  gate,
+  detectNewlineType,
+  normalizeNewlines,
+  convertNewlines,
+  type NewlineType,
+} from './shared';
+
 /**
  * Returns the appropriate label for the Alt/Option key based on the platform.
- * 
+ *
  * @returns "Opt" on macOS, "Alt" on other platforms
  */
 export function getAltKeyLabel(): string {
   return process.platform === 'darwin' ? 'Opt' : 'Alt';
 }
 
-/**
- * Formats time in milliseconds to a human-readable string.
- * 
- * @param ms - time in milliseconds
- * @returns 
- */
-export function formatTime(ms: number): string {
-  if (ms < 1) {
-    return `${ms.toFixed(2)}ms`;
-  } if (ms < 1000) {
-    return `${ms.toFixed(0)}ms`;
-  } else {
-    return `${(ms / 1000).toFixed(1)}s`;
-  }
-}
-
-/**
- * Formats a file size in bytes to a human-readable string.
- * 
- * @param bytes - file size in bytes
- * @returns formatted string like "1.5 KB", "2.3 MB", etc.
- */
-export function formatSize(bytes: number): string {
-  if (bytes < 1024) {
-    return `${bytes} B`;
-  } else if (bytes < 1024 * 1024) {
-    return `${(bytes / 1024).toFixed(1)} KB`;
-  } else if (bytes < 1024 * 1024 * 1024) {
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-  } else {
-    return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
-  }
-}
-
-/**
- * Formats name by converting camelCase, underscores, and hyphens to TitleCase.
- * 
- * @param x - input string
- * @returns 
- */
-export function formatName(x: string): string {
-  return x
-    .replace(/([a-z])([A-Z])/g, '$1$2') // camelCase to words
-    .replace(/[_-]+/g, ' ')               // underscores/hyphens to spaces
-    .replace(/\s+/g, ' ')                 // multiple spaces to single space
-    .trim()
-    .replace(/\b\w/g, (c) => c.toUpperCase()) // capitalize first letter of each word
-    .replace(/\s+/g, ''); 
-}
-
-/**
- * Abbreviate text to a maximum length, adding ellipsis if truncated.
- * 
- * @param text - input text
- * @param maxLength - maximum length
- * @returns 
- */
-export function abbreviate(text: string, maxLength: number, suffix: string = '…'): string {
-  if (text.length <= maxLength) {
-    return text;
-  } else {
-    return text.slice(0, maxLength - suffix.length) + suffix;
-  }
-}
-
-/**
- * Delete undefined properties from an object.
- * 
- * @param obj - input object
- * @returns 
- */
-export function deleteUndefined<T>(obj: T): T {
-  for (const key in obj) {
-    if (obj[key] === undefined) {
-      delete obj[key];
-    }
-  }
-  return obj;
-}
-
 /**
  * Format a value for text display (high-level representation without JSON escaping)
  * - Arrays: items on separate lines with hyphens
@@ -160,95 +100,6 @@ export function formatValueWithFormat(value: any, format: 'json' | 'yaml' = 'yam
   return formatValue(value, alreadyIndented);
 }
 
-/**
- * Pluralize a word based on count.
- * 
- * @param count - number of items
- * @param singular - singular form of the word
- * @param plural - plural form of the word
- * @param prefixCount - whether to prefix the count number
- * @returns pluralized string
- */
-export function pluralize(
-  count: number, 
-  singular: string, 
-  plural: string = singular + 's',
-  prefixCount: boolean = true,
-): string {
-  const unit = count === 1 ? singular : plural;
-  return prefixCount ? `${count} ${unit}` : unit;
-}
-
-/**
- * Calculate cosine similarity between two vectors
- */
-export function cosineSimilarity(a: number[], b: number[]): number {
-  if (a.length !== b.length) {
-    throw new Error('Vectors must have the same length');
-  }
-
-  let dotProduct = 0;
-  let magnitudeA = 0;
-  let magnitudeB = 0;
-
-  for (let i = 0; i < a.length; i++) {
-    dotProduct += a[i] * b[i];
-    magnitudeA += a[i] * a[i];
-    magnitudeB += b[i] * b[i];
-  }
-
-  magnitudeA = Math.sqrt(magnitudeA);
-  magnitudeB = Math.sqrt(magnitudeB);
-
-  if (magnitudeA === 0 || magnitudeB === 0) {
-    return 0;
-  }
-
-  return dotProduct / (magnitudeA * magnitudeB);
-}
-
-/**
- * Chunk an array into smaller arrays of a specified size.
- * 
- * @param array - input array
- * @param chunkSize - size of each chunk
- * @returns 
- */
-export function chunkArray<T>(array: T[], chunkSize: number): T[][] {
-  const chunks: T[][] = [];
-  for (let i = 0; i < array.length; i += chunkSize) {
-    chunks.push(array.slice(i, i + chunkSize));
-  }
-  return chunks;
-}
-
-/**
- * Chunk an array based on a predicate function.
- * 
- * @param array - input array
- * @param newChunk - function to determine if a new chunk should start
- * @returns 
- */
-export function chunk<T>(array: T[], newChunk: (prev: T, next: T, i: number) => boolean): T[][] {
-  const chunks: T[][] = [];
-  let currentChunk: T[] = [];
-  for (let i = 0; i < array.length; i++) {
-    if (currentChunk.length === 0) {
-      currentChunk.push(array[i]);
-    } else {
-      if (newChunk(currentChunk[currentChunk.length - 1], array[i], i)) {
-        chunks.push(currentChunk);
-        currentChunk = [array[i]];
-      } else {
-        currentChunk.push(array[i]);
-      }
-    }
-  }
-  if (currentChunk.length > 0) {
-    chunks.push(currentChunk);
-  }
-  return chunks;
-}
 
 /**
  * Paginate text by characters or lines. Never returns more than 64k characters. 
@@ -298,94 +149,6 @@ export function paginateText(
   }
 }
 
-/**
- * Groups items in an array by a key function, with optional value extraction and reduction.
- * 
- * @param array - The items to group
- * @param keyFn - Function to extract the key for grouping
- * @param valueFn - Function to extract the value for each item
- * @param reduceFn - Function to reduce the grouped values
- * @returns The grouped and reduced map
- */
-export function groupMap<T, K, V = T, R = V[]>(
-  array: T[],
-  keyFn: (item: T) => K,
-  valueFn?: (item: T) => V,
-  reduceFn?: (items: V[]) => R,
-): Map<K, R> {
-  const value = valueFn || ((item: T) => item as unknown as V);
-  const reduce = reduceFn || ((items: V[]) => items as unknown as R);
-
-  const valueMap = new Map<K, V[]>();
-  for (const item of array) {
-    const key = keyFn(item);
-    const group = valueMap.get(key) || [];
-    group.push(value(item));
-    valueMap.set(key, group);
-  }
-
-  const reducedMap = new Map<K, R>();
-  valueMap.forEach((items, key) => {
-    reducedMap.set(key, reduce(items));
-  });
-
-  return reducedMap;
-}
-
-
-/**
- * Groups items in an array by a key function, with optional value extraction and reduction.
- * 
- * @param array - The items to group
- * @param keyFn - Function to extract the key for grouping
- * @param valueFn - Function to extract the value for each item
- * @param reduceFn - Function to reduce the grouped values
- * @returns The grouped and reduced object
- */
-export function group<T, K extends PropertyKey, V = T, R = V[]>(
-  array: T[],
-  keyFn: (item: T) => K,
-  valueFn?: (item: T) => V,
-  reduceFn?: (items: V[]) => R,
-): Record<K, R> {
-  return Object.fromEntries(groupMap(array, keyFn, valueFn, reduceFn).entries()) as Record<K, R>;
-}
-
-/**
- * Creates a gate function to serialize async operations.
- * 
- * @returns A function that serializes async operations
- */
-export function gate() {
-  let keeper: Promise<void> = Promise.resolve();
-
-  return async<T>(fn: () => Promise<T>): Promise<T> => {
-    // Capture the current keeper immediately (before await)
-    const prevKeeper = keeper;
-    
-    // Create the new keeper promise immediately
-    let resolve!: () => void;
-    let reject!: (err: any) => void;
-    keeper = new Promise<void>((res, rej) => {
-      resolve = res;
-      reject = rej;
-    });
-
-    // Now wait for previous operation
-    await prevKeeper;
-
-    // Execute the function
-    try {
-      const result = await fn();
-      resolve(); // Release next waiting operation
-      return result;
-    } catch (err) {
-      reject(err); // Release next waiting operation with error
-      throw err;
-    }
-  };
-}
-
 
 /**
  * Converts a Message to a ChatMessage.
@@ -527,60 +290,3 @@ export function fileProtocol(path: string): string {
   return path;
 }
 
-/**
- * Newline types that can be detected in text content.
- */
-export type NewlineType = '\n' | '\r\n' | '\r';
-
-/**
- * Detects the predominant newline type in the given text content.
- * Returns '\n' (LF) as the default if no newlines are found.
- * 
- * @param content - The text content to analyze
- * @returns The detected newline type
- */
-export function detectNewlineType(content: string): NewlineType {
-  const crlfCount = (content.match(/\r\n/g) || []).length;
-  // Remove CRLF first, then count standalone LF and CR
-  const contentWithoutCrlf = content.replace(/\r\n/g, '');
-  const lfCount = (contentWithoutCrlf.match(/\n/g) || []).length;
-  const crCount = (contentWithoutCrlf.match(/\r/g) || []).length;
-
-  // Default to LF if no newlines found
-  if (crlfCount === 0 && lfCount === 0 && crCount === 0) {
-    return '\n';
-  }
-
-  // Return the most common newline type
-  if (crlfCount >= lfCount && crlfCount >= crCount) {
-    return '\r\n';
-  } else if (lfCount >= crCount) {
-    return '\n';
-  } else {
-    return '\r';
-  }
-}
-
-/**
- * Normalizes all newlines in text to LF (\n).
- * 
- * @param content - The text content to normalize
- * @returns Content with all newlines converted to LF
- */
-export function normalizeNewlines(content: string): string {
-  return content.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
-}
-
-/**
- * Converts LF newlines to the specified newline type.
- * 
- * @param content - The text content with LF newlines
- * @param newlineType - The target newline type
- * @returns Content with newlines converted to the specified type
- */
-export function convertNewlines(content: string, newlineType: NewlineType): string {
-  if (newlineType === '\n') {
-    return content;
-  }
-  return content.replace(/\n/g, newlineType);
-}
\ No newline at end of file
diff --git a/packages/cletus/src/index.tsx b/packages/cletus/src/index.tsx
index 1004cb5..df94e11 100644
--- a/packages/cletus/src/index.tsx
+++ b/packages/cletus/src/index.tsx
@@ -11,6 +11,7 @@ import { InkMainMenu } from './components/InkMainMenu';
 import { ConfigFile } from './config';
 import { configExists, setProfile } from './file-manager';
 import { initWorker } from './embed';
+import { interceptConsoleLogs } from './logger';
 
 type AppView = 'loading' | 'init' | 'main' | 'chat';
 
@@ -135,6 +136,8 @@ async function main() {
     return;
   }
 
+  interceptConsoleLogs();
+
   // Clear screen and move cursor to top
   process.stdout.write('\x1Bc');
 
diff --git a/packages/cletus/src/logger.ts b/packages/cletus/src/logger.ts
index d98e059..a05a65f 100644
--- a/packages/cletus/src/logger.ts
+++ b/packages/cletus/src/logger.ts
@@ -83,9 +83,11 @@ export const logger = {
   },
 };
 
-// Override console methods to use the logger
-console.log = (...args: any[]) => logger.log(args);
-console.error = (...args: any[]) => logger.log(args);
-console.debug = (...args: any[]) => logger.log(args);
-console.warn = (...args: any[]) => logger.log(args);
-console.info = (...args: any[]) => logger.log(args);
+export function interceptConsoleLogs(): void {
+  // Override console methods to use the logger
+  console.log = (...args: any[]) => logger.log(args);
+  console.error = (...args: any[]) => logger.log(args);
+  console.debug = (...args: any[]) => logger.log(args);
+  console.warn = (...args: any[]) => logger.log(args);
+  console.info = (...args: any[]) => logger.log(args);
+}
diff --git a/packages/cletus/src/shared.ts b/packages/cletus/src/shared.ts
new file mode 100644
index 0000000..118782a
--- /dev/null
+++ b/packages/cletus/src/shared.ts
@@ -0,0 +1,319 @@
+/**
+ * Shared utility functions that work in both Node.js and browser environments.
+ * This file should NOT import any Node.js-specific modules (fs, path, etc).
+ */
+
+/**
+ * Formats time in milliseconds to a human-readable string.
+ *
+ * @param ms - time in milliseconds
+ * @returns
+ */
+export function formatTime(ms: number): string {
+  if (ms < 1) {
+    return `${ms.toFixed(2)}ms`;
+  } if (ms < 1000) {
+    return `${ms.toFixed(0)}ms`;
+  } else {
+    return `${(ms / 1000).toFixed(1)}s`;
+  }
+}
+
+/**
+ * Formats a file size in bytes to a human-readable string.
+ *
+ * @param bytes - file size in bytes
+ * @returns formatted string like "1.5 KB", "2.3 MB", etc.
+ */
+export function formatSize(bytes: number): string {
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  } else if (bytes < 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  } else if (bytes < 1024 * 1024 * 1024) {
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  } else {
+    return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+  }
+}
+
+/**
+ * Formats name by converting camelCase, underscores, and hyphens to TitleCase.
+ *
+ * @param x - input string
+ * @returns
+ */
+export function formatName(x: string): string {
+  return x
+    .replace(/([a-z])([A-Z])/g, '$1$2') // camelCase to words
+    .replace(/[_-]+/g, ' ')               // underscores/hyphens to spaces
+    .replace(/\s+/g, ' ')                 // multiple spaces to single space
+    .trim()
+    .replace(/\b\w/g, (c) => c.toUpperCase()) // capitalize first letter of each word
+    .replace(/\s+/g, '');
+}
+
+/**
+ * Abbreviate text to a maximum length, adding ellipsis if truncated.
+ *
+ * @param text - input text
+ * @param maxLength - maximum length
+ * @returns
+ */
+export function abbreviate(text: string, maxLength: number, suffix: string = '…'): string {
+  if (text.length <= maxLength) {
+    return text;
+  } else {
+    return text.slice(0, maxLength - suffix.length) + suffix;
+  }
+}
+
+/**
+ * Delete undefined properties from an object.
+ *
+ * @param obj - input object
+ * @returns
+ */
+export function deleteUndefined<T>(obj: T): T {
+  for (const key in obj) {
+    if (obj[key] === undefined) {
+      delete obj[key];
+    }
+  }
+  return obj;
+}
+
+/**
+ * Pluralize a word based on count.
+ *
+ * @param count - number of items
+ * @param singular - singular form of the word
+ * @param plural - plural form of the word
+ * @param prefixCount - whether to prefix the count number
+ * @returns pluralized string
+ */
+export function pluralize(
+  count: number,
+  singular: string,
+  plural: string = singular + 's',
+  prefixCount: boolean = true,
+): string {
+  const unit = count === 1 ? singular : plural;
+  return prefixCount ? `${count} ${unit}` : unit;
+}
+
+/**
+ * Calculate cosine similarity between two vectors
+ */
+export function cosineSimilarity(a: number[], b: number[]): number {
+  if (a.length !== b.length) {
+    throw new Error('Vectors must have the same length');
+  }
+
+  let dotProduct = 0;
+  let magnitudeA = 0;
+  let magnitudeB = 0;
+
+  for (let i = 0; i < a.length; i++) {
+    dotProduct += a[i] * b[i];
+    magnitudeA += a[i] * a[i];
+    magnitudeB += b[i] * b[i];
+  }
+
+  magnitudeA = Math.sqrt(magnitudeA);
+  magnitudeB = Math.sqrt(magnitudeB);
+
+  if (magnitudeA === 0 || magnitudeB === 0) {
+    return 0;
+  }
+
+  return dotProduct / (magnitudeA * magnitudeB);
+}
+
+/**
+ * Chunk an array into smaller arrays of a specified size.
+ *
+ * @param array - input array
+ * @param chunkSize - size of each chunk
+ * @returns
+ */
+export function chunkArray<T>(array: T[], chunkSize: number): T[][] {
+  const chunks: T[][] = [];
+  for (let i = 0; i < array.length; i += chunkSize) {
+    chunks.push(array.slice(i, i + chunkSize));
+  }
+  return chunks;
+}
+
+/**
+ * Chunk an array based on a predicate function.
+ *
+ * @param array - input array
+ * @param newChunk - function to determine if a new chunk should start
+ * @returns
+ */
+export function chunk<T>(array: T[], newChunk: (prev: T, next: T, i: number) => boolean): T[][] {
+  const chunks: T[][] = [];
+  let currentChunk: T[] = [];
+  for (let i = 0; i < array.length; i++) {
+    if (currentChunk.length === 0) {
+      currentChunk.push(array[i]);
+    } else {
+      if (newChunk(currentChunk[currentChunk.length - 1], array[i], i)) {
+        chunks.push(currentChunk);
+        currentChunk = [array[i]];
+      } else {
+        currentChunk.push(array[i]);
+      }
+    }
+  }
+  if (currentChunk.length > 0) {
+    chunks.push(currentChunk);
+  }
+  return chunks;
+}
+
+/**
+ * Groups items in an array by a key function, with optional value extraction and reduction.
+ *
+ * @param array - The items to group
+ * @param keyFn - Function to extract the key for grouping
+ * @param valueFn - Function to extract the value for each item
+ * @param reduceFn - Function to reduce the grouped values
+ * @returns The grouped and reduced map
+ */
+export function groupMap<T, K, V = T, R = V[]>(
+  array: T[],
+  keyFn: (item: T) => K,
+  valueFn?: (item: T) => V,
+  reduceFn?: (items: V[]) => R,
+): Map<K, R> {
+  const value = valueFn || ((item: T) => item as unknown as V);
+  const reduce = reduceFn || ((items: V[]) => items as unknown as R);
+
+  const valueMap = new Map<K, V[]>();
+  for (const item of array) {
+    const key = keyFn(item);
+    const group = valueMap.get(key) || [];
+    group.push(value(item));
+    valueMap.set(key, group);
+  }
+
+  const reducedMap = new Map<K, R>();
+  valueMap.forEach((items, key) => {
+    reducedMap.set(key, reduce(items));
+  });
+
+  return reducedMap;
+}
+
+/**
+ * Groups items in an array by a key function, with optional value extraction and reduction.
+ *
+ * @param array - The items to group
+ * @param keyFn - Function to extract the key for grouping
+ * @param valueFn - Function to extract the value for each item
+ * @param reduceFn - Function to reduce the grouped values
+ * @returns The grouped and reduced object
+ */
+export function group<T, K extends PropertyKey, V = T, R = V[]>(
+  array: T[],
+  keyFn: (item: T) => K,
+  valueFn?: (item: T) => V,
+  reduceFn?: (items: V[]) => R,
+): Record<K, R> {
+  return Object.fromEntries(groupMap(array, keyFn, valueFn, reduceFn).entries()) as Record<K, R>;
+}
+
+/**
+ * Creates a gate function to serialize async operations.
+ *
+ * @returns A function that serializes async operations
+ */
+export function gate() {
+  let keeper: Promise<void> = Promise.resolve();
+
+  return async<T>(fn: () => Promise<T>): Promise<T> => {
+    // Capture the current keeper immediately (before await)
+    const prevKeeper = keeper;
+
+    // Create the new keeper promise immediately
+    let resolve!: () => void;
+    let reject!: (err: any) => void;
+    keeper = new Promise<void>((res, rej) => {
+      resolve = res;
+      reject = rej;
+    });
+
+    // Now wait for previous operation
+    await prevKeeper;
+
+    // Execute the function
+    try {
+      const result = await fn();
+      resolve(); // Release next waiting operation
+      return result;
+    } catch (err) {
+      reject(err); // Release next waiting operation with error
+      throw err;
+    }
+  };
+}
+
+/**
+ * Newline types that can be detected in text content.
+ */
+export type NewlineType = '\n' | '\r\n' | '\r';
+
+/**
+ * Detects the predominant newline type in the given text content.
+ * Returns '\n' (LF) as the default if no newlines are found.
+ *
+ * @param content - The text content to analyze
+ * @returns The detected newline type
+ */
+export function detectNewlineType(content: string): NewlineType {
+  const crlfCount = (content.match(/\r\n/g) || []).length;
+  // Remove CRLF first, then count standalone LF and CR
+  const contentWithoutCrlf = content.replace(/\r\n/g, '');
+  const lfCount = (contentWithoutCrlf.match(/\n/g) || []).length;
+  const crCount = (contentWithoutCrlf.match(/\r/g) || []).length;
+
+  // Default to LF if no newlines found
+  if (crlfCount === 0 && lfCount === 0 && crCount === 0) {
+    return '\n';
+  }
+
+  // Return the most common newline type
+  if (crlfCount >= lfCount && crlfCount >= crCount) {
+    return '\r\n';
+  } else if (lfCount >= crCount) {
+    return '\n';
+  } else {
+    return '\r';
+  }
+}
+
+/**
+ * Normalizes all newlines in text to LF (\n).
+ *
+ * @param content - The text content to normalize
+ * @returns Content with all newlines converted to LF
+ */
+export function normalizeNewlines(content: string): string {
+  return content.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+}
+
+/**
+ * Converts LF newlines to the specified newline type.
+ *
+ * @param content - The text content with LF newlines
+ * @param newlineType - The target newline type
+ * @returns Content with newlines converted to the specified type
+ */
+export function convertNewlines(content: string, newlineType: NewlineType): string {
+  if (newlineType === '\n') {
+    return content;
+  }
+  return content.replace(/\n/g, newlineType);
+}
diff --git a/packages/cletus/tailwind.config.cjs b/packages/cletus/tailwind.config.cjs
new file mode 100644
index 0000000..9fa916d
--- /dev/null
+++ b/packages/cletus/tailwind.config.cjs
@@ -0,0 +1,73 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './src/browser/**/*.{js,jsx,ts,tsx}',
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        neon: {
+          cyan: 'hsl(var(--neon-cyan))',
+          pink: 'hsl(var(--neon-pink))',
+          purple: 'hsl(var(--neon-purple))',
+          green: 'hsl(var(--neon-green))',
+          blue: 'hsl(var(--neon-blue))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'glow-pulse': {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.5' },
+        },
+        'neon-flicker': {
+          '0%, 100%': { opacity: '1' },
+          '50%': { opacity: '0.8' },
+        },
+      },
+      animation: {
+        'glow-pulse': 'glow-pulse 2s ease-in-out infinite',
+        'neon-flicker': 'neon-flicker 1.5s ease-in-out infinite',
+      },
+    },
+  },
+  plugins: [require('@tailwindcss/typography')],
+};

From 14149d620f623030cd2b2932a97e8625fb08347a Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Thu, 11 Dec 2025 20:22:28 -0500
Subject: [PATCH 08/27] Add chat UI components and selectors for new features

Introduces new React components for chat UI, including selectors for agent mode, assistant, model, and mode, as well as modals for chat settings, commands, and todos. Updates ChatInput and MessageItem to support richer metadata and message content, and improves UI consistency. Adds a migration script for chat message format and updates utility UI components for better accessibility and appearance.
---
 packages/cletus/migrate-chat.js               |  31 ++
 .../browser/components/AgentModeSelector.tsx  |  36 ++
 .../browser/components/AssistantSelector.tsx  |  36 ++
 .../src/browser/components/ChatFooter.tsx     |  69 +++
 .../src/browser/components/ChatInput.tsx      | 144 ++++--
 .../browser/components/ChatSettingsDialog.tsx | 142 ++++++
 .../src/browser/components/CommandsPanel.tsx  | 126 +++++
 .../src/browser/components/MessageItem.tsx    |   4 +-
 .../src/browser/components/ModeSelector.tsx   |  51 ++
 .../src/browser/components/ModelSelector.tsx  | 431 +++++++++++++++++
 .../src/browser/components/TodosModal.tsx     | 176 +++++++
 .../src/browser/components/ui/button.tsx      |   4 +-
 .../src/browser/components/ui/input.tsx       |   2 +-
 .../src/browser/components/ui/select.tsx      | 114 +++++
 .../cletus/src/browser/pages/ChatPage.tsx     | 331 +++++++++++--
 packages/cletus/src/browser/server.ts         | 450 +++++++++++++++---
 .../cletus/src/browser/websocket-types.ts     |  89 ++++
 packages/cletus/src/chat-ui.tsx               |   8 +-
 packages/cletus/src/tool-registry.ts          |   2 +-
 19 files changed, 2104 insertions(+), 142 deletions(-)
 create mode 100644 packages/cletus/migrate-chat.js
 create mode 100644 packages/cletus/src/browser/components/AgentModeSelector.tsx
 create mode 100644 packages/cletus/src/browser/components/AssistantSelector.tsx
 create mode 100644 packages/cletus/src/browser/components/ChatFooter.tsx
 create mode 100644 packages/cletus/src/browser/components/ChatSettingsDialog.tsx
 create mode 100644 packages/cletus/src/browser/components/CommandsPanel.tsx
 create mode 100644 packages/cletus/src/browser/components/ModeSelector.tsx
 create mode 100644 packages/cletus/src/browser/components/ModelSelector.tsx
 create mode 100644 packages/cletus/src/browser/components/TodosModal.tsx
 create mode 100644 packages/cletus/src/browser/components/ui/select.tsx
 create mode 100644 packages/cletus/src/browser/websocket-types.ts

diff --git a/packages/cletus/migrate-chat.js b/packages/cletus/migrate-chat.js
new file mode 100644
index 0000000..ac4119d
--- /dev/null
+++ b/packages/cletus/migrate-chat.js
@@ -0,0 +1,31 @@
+// Migration script to fix old chat format where content was a string
+const fs = require('fs');
+const path = require('path');
+
+const chatFile = process.argv[2];
+if (!chatFile) {
+  console.error('Usage: node migrate-chat.js <path-to-chat-file>');
+  process.exit(1);
+}
+
+const data = JSON.parse(fs.readFileSync(chatFile, 'utf-8'));
+
+let migrated = 0;
+data.messages.forEach((msg, index) => {
+  // Check if content is a string (old format)
+  if (typeof msg.content === 'string') {
+    console.log(`Migrating message ${index}: ${msg.role}`);
+    msg.content = [{
+      type: 'text',
+      content: msg.content
+    }];
+    migrated++;
+  }
+});
+
+if (migrated > 0) {
+  fs.writeFileSync(chatFile, JSON.stringify(data, null, 2));
+  console.log(`✓ Migrated ${migrated} message(s)`);
+} else {
+  console.log('No messages need migration');
+}
diff --git a/packages/cletus/src/browser/components/AgentModeSelector.tsx b/packages/cletus/src/browser/components/AgentModeSelector.tsx
new file mode 100644
index 0000000..49c8f23
--- /dev/null
+++ b/packages/cletus/src/browser/components/AgentModeSelector.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Select, SelectOption } from './ui/select';
+
+interface AgentModeSelectorProps {
+  agentMode: string;
+  onChange: (agentMode: string) => void;
+  disabled?: boolean;
+}
+
+const AGENT_MODE_OPTIONS: SelectOption[] = [
+  {
+    value: 'default',
+    label: 'Run Mode',
+    description: 'All toolsets available',
+  },
+  {
+    value: 'plan',
+    label: 'Plan Mode',
+    description: 'Only planning related tools',
+  },
+];
+
+export const AgentModeSelector: React.FC<AgentModeSelectorProps> = ({ agentMode, onChange, disabled }) => {
+  return (
+    <div className="flex items-center gap-2">
+      <label className="text-sm text-muted-foreground">Agent:</label>
+      <Select
+        value={agentMode || 'default'}
+        options={AGENT_MODE_OPTIONS}
+        onChange={onChange}
+        disabled={disabled}
+        className="min-w-[140px]"
+      />
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/AssistantSelector.tsx b/packages/cletus/src/browser/components/AssistantSelector.tsx
new file mode 100644
index 0000000..7412c40
--- /dev/null
+++ b/packages/cletus/src/browser/components/AssistantSelector.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Bot } from 'lucide-react';
+import { Select, SelectOption } from './ui/select';
+
+interface AssistantSelectorProps {
+  assistants: Array<{ name: string; prompt: string; created: number }>;
+  currentAssistant?: string;
+  onChange: (assistant: string) => void;
+}
+
+export const AssistantSelector: React.FC<AssistantSelectorProps> = ({
+  assistants,
+  currentAssistant,
+  onChange,
+}) => {
+  const options: SelectOption[] = [
+    { value: 'none', label: 'No assistant' },
+    ...assistants.map((assistant) => ({
+      value: assistant.name,
+      label: assistant.name,
+    })),
+  ];
+
+  return (
+    <div className="flex items-center gap-2">
+      <Bot className="w-4 h-4 text-muted-foreground" />
+      <Select
+        value={currentAssistant || 'none'}
+        options={options}
+        onChange={onChange}
+        placeholder="No assistant"
+        className="w-[180px]"
+      />
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/ChatFooter.tsx b/packages/cletus/src/browser/components/ChatFooter.tsx
new file mode 100644
index 0000000..3dd99e2
--- /dev/null
+++ b/packages/cletus/src/browser/components/ChatFooter.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import type { Config, ChatMeta } from '../../schemas';
+
+interface ChatFooterProps {
+  config: Config;
+  chatMeta: ChatMeta;
+  messageCount: number;
+  totalCost?: number;
+}
+
+const MODETEXT: Record<string, string> = {
+  none: 'local allowed',
+  read: 'read allowed',
+  create: 'create allowed',
+  update: 'update allowed',
+  delete: 'delete allowed',
+};
+
+const AGENTMODETEXT: Record<string, string> = {
+  default: 'run mode',
+  plan: 'plan mode',
+};
+
+export const ChatFooter: React.FC<ChatFooterProps> = ({
+  config,
+  chatMeta,
+  messageCount,
+  totalCost = 0,
+}) => {
+  const model = chatMeta.model || config.user.models?.chat || 'no model';
+  const assistant = chatMeta.assistant;
+  const modeText = MODETEXT[chatMeta.mode] || chatMeta.mode;
+  const agentModeText = AGENTMODETEXT[chatMeta.agentMode || 'default'];
+  const toolsetText = chatMeta.toolset ? `${chatMeta.toolset} toolset` : 'adaptive tools';
+  const messageText = `${messageCount} message${messageCount !== 1 ? 's' : ''}`;
+  const todoText = chatMeta.todos.length
+    ? `${chatMeta.todos.length} todo${chatMeta.todos.length !== 1 ? 's' : ''}`
+    : 'no todos';
+
+  return (
+    <div className="border-t border-border bg-card/30 backdrop-blur-sm px-6 py-2">
+      <div className="text-xs text-muted-foreground flex flex-wrap items-center gap-2">
+        <span className="text-foreground">{model}</span>
+        <span className="text-border">│</span>
+        {assistant && (
+          <>
+            <span>{assistant}</span>
+            <span className="text-border">│</span>
+          </>
+        )}
+        <span>{modeText}</span>
+        <span className="text-border">│</span>
+        <span>{agentModeText}</span>
+        <span className="text-border">│</span>
+        <span>{toolsetText}</span>
+        <span className="text-border">│</span>
+        <span>{messageText}</span>
+        <span className="text-border">│</span>
+        <span>{todoText}</span>
+        {totalCost > 0 && (
+          <>
+            <span className="text-border">│</span>
+            <span className="text-yellow-400">${totalCost.toFixed(4)}</span>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/ChatInput.tsx b/packages/cletus/src/browser/components/ChatInput.tsx
index a82c26b..792be98 100644
--- a/packages/cletus/src/browser/components/ChatInput.tsx
+++ b/packages/cletus/src/browser/components/ChatInput.tsx
@@ -1,16 +1,35 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Send, Loader2 } from 'lucide-react';
+import { Send, Loader2, X } from 'lucide-react';
 import { Button } from './ui/button';
 import { Textarea } from './ui/textarea';
-import type { ChatMeta } from '../../schemas';
+import type { ChatMeta, MessageContent, Config } from '../../schemas';
+import type { ClientMessage, ServerMessage } from '../websocket-types';
+import { sendClientMessage } from '../websocket-types';
+
+const MODETEXT: Record<string, string> = {
+  none: 'local allowed',
+  read: 'read allowed',
+  create: 'create allowed',
+  update: 'update allowed',
+  delete: 'delete allowed',
+};
+
+const AGENTMODETEXT: Record<string, string> = {
+  default: 'run mode',
+  plan: 'plan mode',
+};
 
 interface ChatInputProps {
   chatId: string;
   chatMeta: ChatMeta;
+  config: Config;
+  messageCount: number;
+  totalCost: number;
   onMessageSent: () => void;
+  onWebSocketMessage?: (message: ServerMessage) => void;
 }
 
-export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, onMessageSent }) => {
+export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, config, messageCount, totalCost, onMessageSent, onWebSocketMessage }) => {
   const [input, setInput] = useState('');
   const [isConnecting, setIsConnecting] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
@@ -18,6 +37,15 @@ export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, onMessag
   const wsRef = useRef<WebSocket | null>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
+  // Auto-resize textarea as content changes
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = 'auto';
+      textarea.style.height = `${Math.min(textarea.scrollHeight, window.innerHeight * 0.5)}px`;
+    }
+  }, [input]);
+
   useEffect(() => {
     // Connect WebSocket
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
@@ -26,33 +54,32 @@ export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, onMessag
     ws.onopen = () => {
       setIsConnecting(false);
       // Initialize chat
-      ws.send(JSON.stringify({
+      sendClientMessage(ws, {
         type: 'init_chat',
         data: { chatId },
-      }));
+      });
     };
 
     ws.onmessage = (event) => {
-      const message = JSON.parse(event.data);
+      const message = JSON.parse(event.data) as ServerMessage;
+
+      // Forward all messages to parent for handling
+      if (onWebSocketMessage) {
+        onWebSocketMessage(message);
+      }
 
       switch (message.type) {
         case 'chat_initialized':
           console.log('Chat initialized');
           break;
 
-        case 'message_added':
-          onMessageSent();
-          break;
-
         case 'status_update':
           setStatus(message.data.status);
           break;
 
-        case 'messages_updated':
         case 'response_complete':
           setIsProcessing(false);
           setStatus('');
-          onMessageSent();
           break;
 
         case 'error':
@@ -89,10 +116,16 @@ export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, onMessag
       return;
     }
 
-    wsRef.current.send(JSON.stringify({
+    // Send message with proper MessageContent[] format
+    const content: MessageContent[] = [{
+      type: 'text',
+      content: input.trim(),
+    }];
+
+    sendClientMessage(wsRef.current, {
       type: 'send_message',
-      data: { content: input.trim() },
-    }));
+      data: { chatId, content },
+    });
 
     setInput('');
     setIsProcessing(true);
@@ -106,6 +139,16 @@ export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, onMessag
     }
   };
 
+  const handleCancel = () => {
+    if (wsRef.current && isProcessing) {
+      sendClientMessage(wsRef.current, {
+        type: 'cancel',
+      });
+      setIsProcessing(false);
+      setStatus('');
+    }
+  };
+
   return (
     <div className="p-4">
       {status && (
@@ -129,35 +172,70 @@ export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, onMessag
               : 'Type your message... (Enter to send, Shift+Enter for new line)'
           }
           disabled={isConnecting || isProcessing}
-          className="min-h-[100px] resize-none"
+          className="min-h-[100px] max-h-[50vh] resize-none overflow-y-auto"
+          style={{ height: 'auto' }}
         />
         <div className="flex items-center justify-between">
-          <div className="text-xs text-muted-foreground flex items-center gap-2">
+          <div className="text-xs flex items-center gap-2 flex-wrap flex-1">
             <span className="px-2 py-1 rounded bg-muted text-muted-foreground">
               {chatMeta.mode}
             </span>
+            <span className="text-muted-foreground">│</span>
+            <span className="text-foreground">{chatMeta.model || config.user.models?.chat || 'no model'}</span>
             {chatMeta.assistant && (
-              <span className="text-neon-purple">{chatMeta.assistant}</span>
-            )}
-          </div>
-          <Button
-            type="submit"
-            variant="neon"
-            disabled={!input.trim() || isProcessing || isConnecting}
-            className="gap-2"
-          >
-            {isProcessing ? (
               <>
-                <Loader2 className="w-4 h-4 animate-spin" />
-                Processing
+                <span className="text-muted-foreground">│</span>
+                <span className="text-muted-foreground">{chatMeta.assistant}</span>
               </>
-            ) : (
+            )}
+            <span className="text-muted-foreground">│</span>
+            <span className="text-muted-foreground">{MODETEXT[chatMeta.mode] || chatMeta.mode}</span>
+            <span className="text-muted-foreground">│</span>
+            <span className="text-muted-foreground">{AGENTMODETEXT[chatMeta.agentMode || 'default']}</span>
+            <span className="text-muted-foreground">│</span>
+            <span className="text-muted-foreground">{chatMeta.toolset ? `${chatMeta.toolset} toolset` : 'adaptive tools'}</span>
+            <span className="text-muted-foreground">│</span>
+            <span className="text-muted-foreground">{messageCount} message{messageCount !== 1 ? 's' : ''}</span>
+            <span className="text-muted-foreground">│</span>
+            <span className="text-muted-foreground">{chatMeta.todos.length ? `${chatMeta.todos.length} todo${chatMeta.todos.length !== 1 ? 's' : ''}` : 'no todos'}</span>
+            {totalCost > 0 && (
               <>
-                <Send className="w-4 h-4" />
-                Send
+                <span className="text-muted-foreground">│</span>
+                <span className="text-yellow-400">${totalCost.toFixed(4)}</span>
               </>
             )}
-          </Button>
+          </div>
+          <div className="flex items-center gap-2 ml-2">
+            {isProcessing && (
+              <Button
+                type="button"
+                variant="destructive"
+                onClick={handleCancel}
+                className="gap-2"
+              >
+                <X className="w-4 h-4" />
+                Cancel
+              </Button>
+            )}
+            <Button
+              type="submit"
+              variant="neon"
+              disabled={!input.trim() || isProcessing || isConnecting}
+              className="gap-2"
+            >
+              {isProcessing ? (
+                <>
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                  Processing
+                </>
+              ) : (
+                <>
+                  <Send className="w-4 h-4" />
+                  Send
+                </>
+              )}
+            </Button>
+          </div>
         </div>
       </form>
     </div>
diff --git a/packages/cletus/src/browser/components/ChatSettingsDialog.tsx b/packages/cletus/src/browser/components/ChatSettingsDialog.tsx
new file mode 100644
index 0000000..248c33e
--- /dev/null
+++ b/packages/cletus/src/browser/components/ChatSettingsDialog.tsx
@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from 'react';
+import { X, Save, Settings } from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Textarea } from './ui/textarea';
+import { ScrollArea } from './ui/scroll-area';
+
+interface ChatSettingsDialogProps {
+  title: string;
+  prompt?: string;
+  cwd?: string;
+  onSave: (updates: { title?: string; prompt?: string; cwd?: string }) => void;
+  onClose: () => void;
+}
+
+export const ChatSettingsDialog: React.FC<ChatSettingsDialogProps> = ({
+  title: initialTitle,
+  prompt: initialPrompt,
+  cwd: initialCwd,
+  onSave,
+  onClose,
+}) => {
+  const [title, setTitle] = useState(initialTitle);
+  const [prompt, setPrompt] = useState(initialPrompt || '');
+  const [cwd, setCwd] = useState(initialCwd || '');
+
+  // Handle ESC key to close
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
+  const handleSave = () => {
+    const updates: { title?: string; prompt?: string; cwd?: string } = {};
+
+    if (title !== initialTitle) {
+      updates.title = title;
+    }
+    if (prompt !== initialPrompt) {
+      updates.prompt = prompt || undefined;
+    }
+    if (cwd !== initialCwd) {
+      updates.cwd = cwd || undefined;
+    }
+
+    if (Object.keys(updates).length > 0) {
+      onSave(updates);
+    }
+    onClose();
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="relative w-full max-w-2xl max-h-[80vh] bg-card rounded-lg border border-border shadow-2xl flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-border">
+          <div className="flex items-center gap-3">
+            <Settings className="w-6 h-6 text-neon-cyan" />
+            <h2 className="text-2xl font-bold neon-text-cyan">Chat Settings</h2>
+          </div>
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <X className="w-5 h-5" />
+          </Button>
+        </div>
+
+        {/* Content */}
+        <ScrollArea className="flex-1 p-6">
+          <div className="space-y-6">
+            {/* Title */}
+            <div>
+              <label className="block text-sm font-medium text-foreground mb-2">
+                Chat Title
+              </label>
+              <Input
+                type="text"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                placeholder="Enter chat title"
+                className="w-full"
+              />
+            </div>
+
+            {/* Custom Prompt */}
+            <div>
+              <label className="block text-sm font-medium text-foreground mb-2">
+                Custom Prompt
+              </label>
+              <Textarea
+                value={prompt}
+                onChange={(e) => setPrompt(e.target.value)}
+                placeholder="Enter custom prompt (optional)"
+                className="min-h-[120px] resize-none"
+              />
+              <p className="text-xs text-muted-foreground mt-2">
+                Override the default system prompt for this chat
+              </p>
+            </div>
+
+            {/* Working Directory */}
+            <div>
+              <label className="block text-sm font-medium text-foreground mb-2">
+                Working Directory
+              </label>
+              <Input
+                type="text"
+                value={cwd}
+                onChange={(e) => setCwd(e.target.value)}
+                placeholder="Enter working directory path (optional)"
+                className="w-full font-mono text-sm"
+              />
+              <p className="text-xs text-muted-foreground mt-2">
+                Set the current working directory for file operations
+              </p>
+            </div>
+          </div>
+        </ScrollArea>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-3 p-6 border-t border-border">
+          <Button variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button variant="neon" onClick={handleSave} className="gap-2">
+            <Save className="w-4 h-4" />
+            Save Changes
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/CommandsPanel.tsx b/packages/cletus/src/browser/components/CommandsPanel.tsx
new file mode 100644
index 0000000..cc2009a
--- /dev/null
+++ b/packages/cletus/src/browser/components/CommandsPanel.tsx
@@ -0,0 +1,126 @@
+import React, { useEffect } from 'react';
+import { X, HelpCircle } from 'lucide-react';
+import { Button } from './ui/button';
+import { ScrollArea } from './ui/scroll-area';
+
+interface Command {
+  name: string;
+  description: string;
+  usage?: string;
+}
+
+interface CommandsPanelProps {
+  onClose: () => void;
+}
+
+const COMMANDS: Command[] = [
+  { name: '/help', description: 'Show help information', usage: '/help' },
+  { name: '/quit', description: 'Exit chat', usage: '/quit' },
+  { name: '/assistant', description: 'Change assistant', usage: '/assistant <name>' },
+  { name: '/mode', description: 'Change mode', usage: '/mode <none|read|create|update|delete>' },
+  { name: '/model', description: 'Select chat model', usage: '/model' },
+  { name: '/prompt', description: 'Set custom prompt', usage: '/prompt <your prompt>' },
+  { name: '/title', description: 'Change chat title', usage: '/title <new title>' },
+  { name: '/todos', description: 'View todos', usage: '/todos' },
+  { name: '/do', description: 'Add a todo', usage: '/do <todo description>' },
+  { name: '/done', description: 'Mark a todo as done', usage: '/done <todo number>' },
+  { name: '/reset', description: 'Clear all todos', usage: '/reset' },
+  { name: '/clear', description: 'Clear all chat messages (requires confirmation)', usage: '/clear' },
+  { name: '/cd', description: 'Change current working directory', usage: '/cd [directory path]' },
+  { name: '/debug', description: 'Toggle debug logging', usage: '/debug' },
+];
+
+const COMMAND_CATEGORIES = {
+  'Chat Management': ['/help', '/quit', '/clear'],
+  'Configuration': ['/assistant', '/mode', '/model', '/prompt', '/title'],
+  'Todos': ['/todos', '/do', '/done', '/reset'],
+  'Advanced': ['/cd', '/debug'],
+};
+
+export const CommandsPanel: React.FC<CommandsPanelProps> = ({ onClose }) => {
+  const getCommandsByCategory = (category: string) => {
+    const commandNames = COMMAND_CATEGORIES[category as keyof typeof COMMAND_CATEGORIES] || [];
+    return COMMANDS.filter((cmd) => commandNames.includes(cmd.name));
+  };
+
+  // Handle ESC key to close
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="relative w-full max-w-3xl max-h-[80vh] bg-card rounded-lg border border-border shadow-2xl flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-border">
+          <div className="flex items-center gap-3">
+            <HelpCircle className="w-6 h-6 text-neon-cyan" />
+            <div>
+              <h2 className="text-2xl font-bold neon-text-cyan">Commands & Help</h2>
+              <p className="text-sm text-muted-foreground mt-1">
+                Available commands for this chat
+              </p>
+            </div>
+          </div>
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <X className="w-5 h-5" />
+          </Button>
+        </div>
+
+        {/* Content */}
+        <ScrollArea className="flex-1 p-6">
+          <div className="space-y-6">
+            {Object.keys(COMMAND_CATEGORIES).map((category) => (
+              <div key={category}>
+                <h3 className="text-lg font-semibold text-neon-purple mb-3">{category}</h3>
+                <div className="space-y-2">
+                  {getCommandsByCategory(category).map((command) => (
+                    <div
+                      key={command.name}
+                      className="p-3 rounded-lg bg-muted/30 border border-border"
+                    >
+                      <div className="flex items-start justify-between gap-4">
+                        <div className="flex-1">
+                          <code className="text-sm font-mono text-neon-cyan">{command.name}</code>
+                          <p className="text-sm text-muted-foreground mt-1">
+                            {command.description}
+                          </p>
+                        </div>
+                      </div>
+                      {command.usage && (
+                        <div className="mt-2 text-xs text-muted-foreground font-mono bg-black/30 px-2 py-1 rounded">
+                          {command.usage}
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-8 p-4 rounded-lg bg-muted/50 border border-border">
+            <h4 className="text-sm font-semibold text-foreground mb-2">Tips</h4>
+            <ul className="text-sm text-muted-foreground space-y-1">
+              <li>• Type "/" in the chat input to see command suggestions</li>
+              <li>• Use mode selectors in the header for quick access</li>
+              <li>• Press ESC to close this panel</li>
+            </ul>
+          </div>
+        </ScrollArea>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/MessageItem.tsx b/packages/cletus/src/browser/components/MessageItem.tsx
index 25b1b04..c1bb5c6 100644
--- a/packages/cletus/src/browser/components/MessageItem.tsx
+++ b/packages/cletus/src/browser/components/MessageItem.tsx
@@ -13,7 +13,7 @@ interface MessageItemProps {
 }
 
 export const MessageItem: React.FC<MessageItemProps> = ({ message, showInput, showOutput }) => {
-  const { role, content, operations = [] } = message;
+  const { role, name, content, operations = [] } = message;
 
   const isUser = role === 'user';
   const isAssistant = role === 'assistant';
@@ -62,7 +62,7 @@ export const MessageItem: React.FC<MessageItemProps> = ({ message, showInput, sh
             isSystem && 'text-muted-foreground'
           )}
         >
-          {isUser ? 'You' : isAssistant ? 'Assistant' : 'System'}
+          {isUser ? (name || 'You') : isAssistant ? (name || 'Assistant') : 'System'}
         </div>
 
         {/* Content and Operations in order */}
diff --git a/packages/cletus/src/browser/components/ModeSelector.tsx b/packages/cletus/src/browser/components/ModeSelector.tsx
new file mode 100644
index 0000000..9e3ff79
--- /dev/null
+++ b/packages/cletus/src/browser/components/ModeSelector.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { Select, SelectOption } from './ui/select';
+
+interface ModeSelectorProps {
+  mode: string;
+  onChange: (mode: string) => void;
+  disabled?: boolean;
+}
+
+const MODE_OPTIONS: SelectOption[] = [
+  {
+    value: 'none',
+    label: 'None',
+    description: 'All AI operations require approval (safest)',
+  },
+  {
+    value: 'read',
+    label: 'Read',
+    description: 'Auto-approve read operations',
+  },
+  {
+    value: 'create',
+    label: 'Create',
+    description: 'Auto-approve read & create operations',
+  },
+  {
+    value: 'update',
+    label: 'Update',
+    description: 'Auto-approve read, create & update operations',
+  },
+  {
+    value: 'delete',
+    label: 'Delete',
+    description: 'Auto-approve all operations (least safe)',
+  },
+];
+
+export const ModeSelector: React.FC<ModeSelectorProps> = ({ mode, onChange, disabled }) => {
+  return (
+    <div className="flex items-center gap-2">
+      <label className="text-sm text-muted-foreground">Mode:</label>
+      <Select
+        value={mode}
+        options={MODE_OPTIONS}
+        onChange={onChange}
+        disabled={disabled}
+        className="min-w-[140px]"
+      />
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/ModelSelector.tsx b/packages/cletus/src/browser/components/ModelSelector.tsx
new file mode 100644
index 0000000..72e8ae6
--- /dev/null
+++ b/packages/cletus/src/browser/components/ModelSelector.tsx
@@ -0,0 +1,431 @@
+import React, { useState, useEffect, useRef, useMemo } from 'react';
+import { X, Search } from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { ScrollArea } from './ui/scroll-area';
+import { cn } from '../lib/utils';
+
+interface ModelInfo {
+  id: string;
+  name: string;
+  provider: string;
+  contextWindow?: number;
+  maxOutputTokens?: number;
+  tier?: string;
+  capabilities?: Set<string>;
+  supportedParameters?: Set<string>;
+  pricing: {
+    text?: { input?: number; output?: number; cached?: number };
+    audio?: { input?: number; output?: number; perSecond?: number };
+    image?: {
+      input?: number;
+      output?: Array<{
+        quality: string;
+        sizes: Array<{ width: number; height: number; cost: number }>;
+      }>;
+    };
+    embeddings?: { cost?: number };
+    perRequest?: number;
+    reasoning?: { input?: number; output?: number; cached?: number };
+  };
+  metrics?: {
+    tokensPerSecond?: number;
+    timeToFirstToken?: number;
+  };
+}
+
+interface ScoredModel {
+  model: ModelInfo;
+  score: number;
+}
+
+interface ModelSelectorProps {
+  currentModel: string;
+  onSelect: (modelId: string) => void;
+  onClose: () => void;
+  onFetchModels: () => Promise<ScoredModel[]>;
+}
+
+type SortMode = 'score' | 'cost-asc' | 'cost-desc' | 'speed-desc' | 'speed-asc' | 'context-desc' | 'context-asc' | 'capable-desc' | 'capable-asc';
+
+export const ModelSelector: React.FC<ModelSelectorProps> = ({
+  currentModel,
+  onSelect,
+  onClose,
+  onFetchModels,
+}) => {
+  const [models, setModels] = useState<ScoredModel[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState('');
+  const [sortMode, setSortMode] = useState<SortMode>('score');
+  const fetchIdRef = useRef(0);
+
+  useEffect(() => {
+    const fetchId = ++fetchIdRef.current;
+
+    const fetchModels = async () => {
+      try {
+        setLoading(true);
+        const fetchedModels = await onFetchModels();
+
+        // Only update if this is still the latest fetch
+        if (fetchId === fetchIdRef.current) {
+          setModels(fetchedModels);
+        }
+      } catch (error) {
+        console.error('Failed to fetch models:', error);
+        if (fetchId === fetchIdRef.current) {
+          setModels([]);
+        }
+      } finally {
+        if (fetchId === fetchIdRef.current) {
+          setLoading(false);
+        }
+      }
+    };
+
+    fetchModels();
+  }, [onFetchModels]);
+
+  // Handle ESC key to close
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
+  const getModelCost = (model: ModelInfo): number | null => {
+    let totalCost = 0;
+    let costCount = 0;
+
+    if (model.pricing.text) {
+      const { input, output } = model.pricing.text;
+      if (input !== undefined) { totalCost += input; costCount++; }
+      if (output !== undefined) { totalCost += output; costCount++; }
+    }
+    if (model.pricing.audio) {
+      const { input, output, perSecond } = model.pricing.audio;
+      if (perSecond !== undefined) { totalCost += perSecond * 1000; costCount++; }
+      if (input !== undefined) { totalCost += input; costCount++; }
+      if (output !== undefined) { totalCost += output; costCount++; }
+    }
+    if (model.pricing.reasoning) {
+      const { input, output } = model.pricing.reasoning;
+      if (input !== undefined) { totalCost += input; costCount++; }
+      if (output !== undefined) { totalCost += output; costCount++; }
+    }
+
+    return costCount > 0 ? totalCost / costCount : null;
+  };
+
+  const getModelSpeed = (model: ModelInfo): number | null => {
+    return model.metrics?.tokensPerSecond ?? null;
+  };
+
+  const getModelContext = (model: ModelInfo): number | null => {
+    return model.contextWindow ?? null;
+  };
+
+  const getModelCapable = (model: ModelInfo): number => {
+    return (model.capabilities?.size ?? 0) + (model.supportedParameters?.size ?? 0);
+  };
+
+  // Memoize filtered and sorted models to prevent excessive recalculation
+  const filteredModels = useMemo(() => {
+    // First, deduplicate models by ID
+    const uniqueModels = Array.from(
+      new Map(models.map(scored => [scored.model.id, scored])).values()
+    );
+
+    // Filter by search
+    const filtered = uniqueModels.filter((scored) => {
+      if (!search) return true;
+      const model = scored.model;
+      const searchLower = search.toLowerCase();
+      return (
+        (model.id && model.id.toLowerCase().includes(searchLower)) ||
+        (model.name && model.name.toLowerCase().includes(searchLower)) ||
+        (model.provider && model.provider.toLowerCase().includes(searchLower))
+      );
+    });
+
+    // Sort
+    if (sortMode === 'score') {
+      return filtered; // Keep original order
+    }
+
+    return [...filtered].sort((a, b) => {
+      const modelA = a.model;
+      const modelB = b.model;
+      let valueA: number | null;
+      let valueB: number | null;
+      let descending = true;
+
+      switch (sortMode) {
+        case 'cost-asc':
+          valueA = getModelCost(modelA);
+          valueB = getModelCost(modelB);
+          descending = false;
+          break;
+        case 'cost-desc':
+          valueA = getModelCost(modelA);
+          valueB = getModelCost(modelB);
+          break;
+        case 'speed-desc':
+          valueA = getModelSpeed(modelA);
+          valueB = getModelSpeed(modelB);
+          break;
+        case 'speed-asc':
+          valueA = getModelSpeed(modelA);
+          valueB = getModelSpeed(modelB);
+          descending = false;
+          break;
+        case 'context-desc':
+          valueA = getModelContext(modelA);
+          valueB = getModelContext(modelB);
+          break;
+        case 'context-asc':
+          valueA = getModelContext(modelA);
+          valueB = getModelContext(modelB);
+          descending = false;
+          break;
+        case 'capable-desc':
+          valueA = getModelCapable(modelA);
+          valueB = getModelCapable(modelB);
+          break;
+        case 'capable-asc':
+          valueA = getModelCapable(modelA);
+          valueB = getModelCapable(modelB);
+          descending = false;
+          break;
+        default:
+          return 0;
+      }
+
+      if (valueA === null && valueB === null) return 0;
+      if (valueA === null) return 1;
+      if (valueB === null) return -1;
+
+      return descending ? valueB - valueA : valueA - valueB;
+    });
+  }, [models, search, sortMode]);
+
+  const formatCost = (model: ModelInfo): string => {
+    const costs: string[] = [];
+
+    if (model.pricing.text) {
+      const { input, output } = model.pricing.text;
+      if (input !== undefined && output !== undefined) {
+        costs.push(`$${input.toFixed(2)}/$${output.toFixed(2)}/M`);
+      } else if (input !== undefined) {
+        costs.push(`$${input.toFixed(2)}/M in`);
+      } else if (output !== undefined) {
+        costs.push(`$${output.toFixed(2)}/M out`);
+      }
+    }
+
+    if (model.pricing.audio) {
+      const { input, output, perSecond } = model.pricing.audio;
+      if (perSecond !== undefined) {
+        costs.push(`$${perSecond.toFixed(4)}/s 🎵`);
+      }
+      if (input !== undefined && output !== undefined) {
+        costs.push(`$${input.toFixed(2)}/$${output.toFixed(2)}/M 🎵`);
+      }
+    }
+
+    if (model.pricing.reasoning) {
+      const { input, output, cached } = model.pricing.reasoning;
+      if (input !== undefined && output !== undefined) {
+        costs.push(`$${input.toFixed(2)}/$${output.toFixed(2)}/M 🧠`);
+      }
+      if (cached !== undefined) {
+        costs.push(`$${cached.toFixed(2)}/M cached 🧠`);
+      }
+    }
+
+    if (model.pricing.perRequest) {
+      costs.push(`$${model.pricing.perRequest.toFixed(4)}/req`);
+    }
+
+    return costs.length > 0 ? costs.join(', ') : '-';
+  };
+
+  const formatMetrics = (model: ModelInfo): string => {
+    const parts: string[] = [];
+    if (model.metrics?.tokensPerSecond) {
+      parts.push(`${model.metrics.tokensPerSecond.toFixed(0)} tok/s`);
+    }
+    if (model.metrics?.timeToFirstToken) {
+      parts.push(`${model.metrics.timeToFirstToken.toFixed(0)}ms TTFT`);
+    }
+    return parts.length > 0 ? parts.join(', ') : '-';
+  };
+
+  const sortModes: Array<{ value: SortMode; label: string }> = [
+    { value: 'score', label: 'Score' },
+    { value: 'cost-asc', label: 'Cheapest' },
+    { value: 'cost-desc', label: 'Expensive' },
+    { value: 'speed-desc', label: 'Fastest' },
+    { value: 'speed-asc', label: 'Slowest' },
+    { value: 'context-desc', label: 'Largest Context' },
+    { value: 'context-asc', label: 'Smallest Context' },
+    { value: 'capable-desc', label: 'Most Capable' },
+    { value: 'capable-asc', label: 'Least Capable' },
+  ];
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="relative w-full max-w-6xl max-h-[90vh] bg-card rounded-lg border border-border shadow-2xl flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-border">
+          <div>
+            <h2 className="text-2xl font-bold neon-text-cyan">Select Model</h2>
+            {currentModel && (
+              <p className="text-sm text-muted-foreground mt-1">
+                Current: <span className="text-neon-cyan">{currentModel}</span>
+              </p>
+            )}
+          </div>
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <X className="w-5 h-5" />
+          </Button>
+        </div>
+
+        {/* Search and Sort */}
+        <div className="p-6 border-b border-border space-y-3">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+            <Input
+              type="text"
+              placeholder="Search models by id, name, or provider..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-10 text-foreground"
+              autoFocus
+            />
+          </div>
+          <div className="flex items-center gap-2 flex-wrap">
+            <span className="text-sm text-muted-foreground">Sort by:</span>
+            {sortModes.map(({ value, label }) => (
+              <button
+                key={value}
+                onClick={() => setSortMode(value)}
+                className={cn(
+                  'px-3 py-1 text-xs rounded-md transition-colors',
+                  sortMode === value
+                    ? 'bg-neon-cyan/20 text-neon-cyan border border-neon-cyan/50'
+                    : 'bg-muted text-foreground hover:bg-muted/80',
+                )}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+          <div className="text-sm text-muted-foreground">
+            Showing {filteredModels.length} model{filteredModels.length !== 1 ? 's' : ''}
+          </div>
+        </div>
+
+        {/* Model List */}
+        <ScrollArea className="flex-1 p-6">
+          {loading ? (
+            <div className="flex items-center justify-center py-12">
+              <div className="spinner"></div>
+              <span className="ml-3 text-muted-foreground">Loading models...</span>
+            </div>
+          ) : filteredModels.length === 0 ? (
+            <div className="text-center py-12 text-muted-foreground">
+              <p>No models found matching "{search}"</p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {filteredModels.map((scored, index) => {
+                const model = scored.model;
+                const isSelected = model.id === currentModel;
+                const score = `${(scored.score * 100).toFixed(0)}%`;
+                const context = model.contextWindow ? `${(model.contextWindow / 1000).toFixed(0)}k ctx` : '';
+                const maxOutput = model.maxOutputTokens ? `${(model.maxOutputTokens / 1000).toFixed(0)}k out` : '';
+                const capabilities = model.capabilities ? Array.from(model.capabilities).slice(0, 8).join(' ') : '';
+                const cost = formatCost(model);
+                const metrics = formatMetrics(model);
+
+                return (
+                  <button
+                    key={model.id}
+                    onClick={() => {
+                      onSelect(model.id);
+                      onClose();
+                    }}
+                    className={cn(
+                      'w-full text-left p-4 rounded-lg border transition-all',
+                      isSelected
+                        ? 'border-neon-cyan bg-neon-cyan/10'
+                        : 'border-border bg-card/50 hover:bg-card hover:border-neon-cyan/50',
+                    )}
+                  >
+                    <div className="space-y-2">
+                      {/* Main line: ID, score, provider, context */}
+                      <div className="flex items-start justify-between gap-4">
+                        <div className="flex-1">
+                          <span className={cn(
+                            'font-mono text-sm font-semibold',
+                            isSelected ? 'text-neon-cyan' : 'text-foreground'
+                          )}>
+                            {model.id}
+                          </span>
+                          <span className="text-xs text-muted-foreground ml-2">
+                            [{sortMode === 'score' ? score : `#${index + 1}`}]
+                          </span>
+                        </div>
+                        <div className="text-xs text-muted-foreground text-right">
+                          {model.provider} | {context} {maxOutput && `| ${maxOutput}`}
+                        </div>
+                      </div>
+
+                      {/* Cost line */}
+                      {cost !== '-' && (
+                        <div className="text-xs text-muted-foreground">
+                          <span className="text-foreground/70">Cost:</span> {cost}
+                        </div>
+                      )}
+
+                      {/* Metrics line */}
+                      {metrics !== '-' && (
+                        <div className="text-xs text-muted-foreground">
+                          <span className="text-foreground/70">Metrics:</span> {metrics}
+                        </div>
+                      )}
+
+                      {/* Tier and capabilities */}
+                      <div className="text-xs text-muted-foreground">
+                        {model.tier && <span className="text-foreground/70">{model.tier}</span>}
+                        {model.tier && capabilities && ' | '}
+                        {capabilities}
+                      </div>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </ScrollArea>
+
+        {/* Footer */}
+        <div className="p-4 border-t border-border text-xs text-muted-foreground">
+          Press ESC to close | Click outside to close
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/TodosModal.tsx b/packages/cletus/src/browser/components/TodosModal.tsx
new file mode 100644
index 0000000..636166e
--- /dev/null
+++ b/packages/cletus/src/browser/components/TodosModal.tsx
@@ -0,0 +1,176 @@
+import React, { useState, useEffect } from 'react';
+import { X, CheckSquare, Square, Plus, Trash2, RotateCcw } from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { ScrollArea } from './ui/scroll-area';
+import type { ChatMeta } from '../../schemas';
+
+interface TodosModalProps {
+  todos: ChatMeta['todos'];
+  onAddTodo: (todo: string) => void;
+  onToggleTodo: (index: number) => void;
+  onRemoveTodo: (index: number) => void;
+  onClearTodos: () => void;
+  onClose: () => void;
+}
+
+export const TodosModal: React.FC<TodosModalProps> = ({
+  todos,
+  onAddTodo,
+  onToggleTodo,
+  onRemoveTodo,
+  onClearTodos,
+  onClose,
+}) => {
+  const [newTodo, setNewTodo] = useState('');
+
+  // Handle ESC key to close
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onClose]);
+
+  const handleAdd = () => {
+    if (newTodo.trim()) {
+      onAddTodo(newTodo.trim());
+      setNewTodo('');
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleAdd();
+    }
+  };
+
+  const completedCount = todos.filter((t) => t.done).length;
+  const totalCount = todos.length;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        className="relative w-full max-w-2xl max-h-[80vh] bg-card rounded-lg border border-border shadow-2xl flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-border">
+          <div>
+            <h2 className="text-2xl font-bold neon-text-cyan flex items-center gap-2">
+              <CheckSquare className="w-6 h-6" />
+              Todos
+            </h2>
+            {totalCount > 0 && (
+              <p className="text-sm text-muted-foreground mt-1">
+                {completedCount} of {totalCount} completed
+              </p>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            {totalCount > 0 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onClearTodos}
+                className="gap-2 text-destructive hover:text-destructive"
+              >
+                <RotateCcw className="w-4 h-4" />
+                Clear All
+              </Button>
+            )}
+            <Button variant="ghost" size="icon" onClick={onClose}>
+              <X className="w-5 h-5" />
+            </Button>
+          </div>
+        </div>
+
+        {/* Add Todo */}
+        <div className="p-6 border-b border-border">
+          <div className="flex items-center gap-2">
+            <Input
+              type="text"
+              value={newTodo}
+              onChange={(e) => setNewTodo(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Add a new todo..."
+              className="flex-1"
+              autoFocus
+            />
+            <Button
+              variant="neon"
+              onClick={handleAdd}
+              disabled={!newTodo.trim()}
+              className="gap-2"
+            >
+              <Plus className="w-4 h-4" />
+              Add
+            </Button>
+          </div>
+        </div>
+
+        {/* Todos List */}
+        <ScrollArea className="flex-1 p-6">
+          {todos.length === 0 ? (
+            <div className="text-center py-12 text-muted-foreground">
+              <CheckSquare className="w-12 h-12 mx-auto mb-3 opacity-50" />
+              <p>No todos yet</p>
+              <p className="text-sm mt-1">Add one above to get started</p>
+            </div>
+          ) : (
+            <div className="space-y-2">
+              {todos.map((todo, index) => (
+                <div
+                  key={index}
+                  className={`flex items-start gap-3 p-3 rounded-lg border border-border bg-card/50 hover:bg-card transition-colors ${
+                    todo.done ? 'opacity-60' : ''
+                  }`}
+                >
+                  <button
+                    onClick={() => onToggleTodo(index)}
+                    className="flex-shrink-0 mt-0.5 text-muted-foreground hover:text-neon-cyan transition-colors"
+                  >
+                    {todo.done ? (
+                      <CheckSquare className="w-5 h-5 text-neon-cyan" />
+                    ) : (
+                      <Square className="w-5 h-5" />
+                    )}
+                  </button>
+                  <div className="flex-1 min-w-0">
+                    <p
+                      className={`text-sm ${
+                        todo.done
+                          ? 'line-through text-muted-foreground'
+                          : 'text-foreground'
+                      }`}
+                    >
+                      {todo.name}
+                    </p>
+                  </div>
+                  <button
+                    onClick={() => onRemoveTodo(index)}
+                    className="flex-shrink-0 text-muted-foreground hover:text-destructive transition-colors"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+
+        {/* Footer */}
+        <div className="p-4 border-t border-border text-xs text-muted-foreground">
+          Press ESC to close | Click outside to close
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/ui/button.tsx b/packages/cletus/src/browser/components/ui/button.tsx
index c99ecb9..8160a27 100644
--- a/packages/cletus/src/browser/components/ui/button.tsx
+++ b/packages/cletus/src/browser/components/ui/button.tsx
@@ -9,9 +9,9 @@ const buttonVariants = cva(
       variant: {
         default: 'bg-primary text-primary-foreground hover:bg-primary/90 neon-glow-purple',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground neon-border',
+        outline: 'border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground neon-border',
         secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        ghost: 'text-foreground hover:bg-accent hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
         neon: 'bg-card border-2 border-neon-cyan text-neon-cyan hover:bg-neon-cyan hover:text-background neon-glow transition-all duration-300',
       },
diff --git a/packages/cletus/src/browser/components/ui/input.tsx b/packages/cletus/src/browser/components/ui/input.tsx
index ee60110..daac325 100644
--- a/packages/cletus/src/browser/components/ui/input.tsx
+++ b/packages/cletus/src/browser/components/ui/input.tsx
@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neon-cyan focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all',
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neon-cyan focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all',
           className
         )}
         ref={ref}
diff --git a/packages/cletus/src/browser/components/ui/select.tsx b/packages/cletus/src/browser/components/ui/select.tsx
new file mode 100644
index 0000000..68fd12e
--- /dev/null
+++ b/packages/cletus/src/browser/components/ui/select.tsx
@@ -0,0 +1,114 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { cn } from '../../lib/utils';
+import { ChevronDown, Check } from 'lucide-react';
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps {
+  value: string;
+  options: SelectOption[];
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export const Select: React.FC<SelectProps> = ({
+  value,
+  options,
+  onChange,
+  placeholder = 'Select...',
+  className,
+  disabled = false,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [isOpen]);
+
+  const handleSelect = (optionValue: string) => {
+    onChange(optionValue);
+    setIsOpen(false);
+  };
+
+  return (
+    <div ref={containerRef} className={cn('relative', className)}>
+      <button
+        type="button"
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        disabled={disabled}
+        className={cn(
+          'flex items-center justify-between w-full rounded-md border border-border',
+          'bg-card px-3 py-2 text-sm text-foreground',
+          'hover:bg-muted/50 focus:outline-none focus:ring-2 focus:ring-neon-cyan/50',
+          'transition-colors',
+          disabled && 'opacity-50 cursor-not-allowed',
+        )}
+      >
+        <span className={cn(!selectedOption && 'text-muted-foreground')}>
+          {selectedOption ? selectedOption.label : placeholder}
+        </span>
+        <ChevronDown
+          className={cn(
+            'w-4 h-4 text-muted-foreground transition-transform',
+            isOpen && 'transform rotate-180',
+          )}
+        />
+      </button>
+
+      {isOpen && (
+        <div
+          className={cn(
+            'absolute z-50 w-full mt-1 rounded-md border border-border',
+            'bg-card shadow-lg max-h-60 overflow-auto',
+          )}
+        >
+          {options.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              onClick={() => !option.disabled && handleSelect(option.value)}
+              disabled={option.disabled}
+              className={cn(
+                'flex items-start gap-2 w-full px-3 py-2 text-sm text-left',
+                'hover:bg-muted/50 focus:bg-muted/50 focus:outline-none',
+                'transition-colors',
+                option.disabled && 'opacity-50 cursor-not-allowed',
+                value === option.value && 'bg-muted/30',
+              )}
+            >
+              <div className="flex-shrink-0 w-4 h-4 mt-0.5">
+                {value === option.value && <Check className="w-4 h-4 text-neon-cyan" />}
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="font-medium text-foreground">{option.label}</div>
+                {option.description && (
+                  <div className="text-xs text-muted-foreground mt-0.5">{option.description}</div>
+                )}
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/pages/ChatPage.tsx b/packages/cletus/src/browser/pages/ChatPage.tsx
index b356b6b..ee1d02c 100644
--- a/packages/cletus/src/browser/pages/ChatPage.tsx
+++ b/packages/cletus/src/browser/pages/ChatPage.tsx
@@ -1,10 +1,18 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { ArrowLeft, Bot } from 'lucide-react';
+import { ArrowLeft, Settings, CheckSquare, Trash2 } from 'lucide-react';
 import { Button } from '../components/ui/button';
 import { ScrollArea } from '../components/ui/scroll-area';
 import { MessageList } from '../components/MessageList';
 import { ChatInput } from '../components/ChatInput';
-import type { Message, Config } from '../../schemas';
+import { ModeSelector } from '../components/ModeSelector';
+import { AgentModeSelector } from '../components/AgentModeSelector';
+import { AssistantSelector } from '../components/AssistantSelector';
+import { ModelSelector } from '../components/ModelSelector';
+import { CommandsPanel } from '../components/CommandsPanel';
+import { ChatSettingsDialog } from '../components/ChatSettingsDialog';
+import { TodosModal } from '../components/TodosModal';
+import type { Message, Config, ChatMeta } from '../../schemas';
+import { sendClientMessage } from '../websocket-types';
 
 interface ChatPageProps {
   chatId: string;
@@ -15,10 +23,18 @@ interface ChatPageProps {
 
 export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onConfigChange }) => {
   const [messages, setMessages] = useState<Message[]>([]);
+  const [pendingMessage, setPendingMessage] = useState<Message | null>(null);
   const [loading, setLoading] = useState(true);
+  const [showModelSelector, setShowModelSelector] = useState(false);
+  const [showCommandsPanel, setShowCommandsPanel] = useState(false);
+  const [showChatSettings, setShowChatSettings] = useState(false);
+  const [showTodos, setShowTodos] = useState(false);
+  const [showClearConfirm, setShowClearConfirm] = useState(false);
+  const [totalCost, setTotalCost] = useState(0);
+  const [chatMetaState, setChatMetaState] = useState<ChatMeta | null>(null);
   const wsRef = useRef<WebSocket | null>(null);
 
-  const chatMeta = config.chats.find((c) => c.id === chatId);
+  const chatMeta = chatMetaState || config.chats.find((c) => c.id === chatId);
 
   useEffect(() => {
     // Connect to WebSocket and get messages
@@ -35,14 +51,29 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
     ws.onmessage = (event) => {
       const message = JSON.parse(event.data);
 
-      if (message.type === 'messages') {
-        setMessages(message.data.messages || []);
-        setLoading(false);
-        ws.close();
-      } else if (message.type === 'error') {
-        console.error('Error loading messages:', message.data.message);
-        setLoading(false);
-        ws.close();
+      switch (message.type) {
+        case 'messages':
+          setMessages(message.data.messages || []);
+          setLoading(false);
+          ws.close();
+          break;
+        case 'chat_updated':
+          // Update local chat meta when server sends updates
+          if (message.data.chat) {
+            setChatMetaState(message.data.chat);
+            onConfigChange(); // Refresh parent config
+          }
+          break;
+        case 'usage_update':
+          if (message.data.accumulatedCost !== undefined) {
+            setTotalCost(message.data.accumulatedCost);
+          }
+          break;
+        case 'error':
+          console.error('Error loading messages:', message.data.message);
+          setLoading(false);
+          ws.close();
+          break;
       }
     };
 
@@ -60,9 +91,178 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
     };
   }, [chatId]);
 
-  const handleMessagesUpdate = () => {
-    // Messages are updated via WebSocket in ChatInput
-    // This is just a callback for when we need to refresh
+  const handleWebSocketMessage = (message: any) => {
+    switch (message.type) {
+      case 'message_added':
+        // User message was added - reload to get it
+        handleMessagesUpdate();
+        break;
+
+      case 'pending_update':
+        // Show pending assistant message
+        setPendingMessage(message.data.pending);
+        break;
+
+      case 'message_updated':
+        // Update existing message (usually user message with usage info)
+        setMessages(prev => prev.map(msg =>
+          msg.created === message.data.message.created ? message.data.message : msg
+        ));
+        break;
+
+      case 'messages_updated':
+        // Server sent updated messages list
+        if (message.data.messages) {
+          setMessages(message.data.messages);
+        }
+        break;
+
+      case 'response_complete':
+        // Assistant response is complete - add the final message
+        setPendingMessage(null);
+        if (message.data.message) {
+          setMessages(prev => [...prev, message.data.message]);
+        }
+        break;
+
+      case 'usage_update':
+        if (message.data.accumulatedCost !== undefined) {
+          setTotalCost(message.data.accumulatedCost);
+        }
+        break;
+
+      case 'chat_updated':
+        if (message.data.chat) {
+          setChatMetaState(message.data.chat);
+          onConfigChange();
+        }
+        break;
+    }
+  };
+
+  const handleMessagesUpdate = async () => {
+    // Reload messages from server
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const ws = new WebSocket(`${protocol}//${window.location.host}`);
+
+    ws.onopen = () => {
+      ws.send(JSON.stringify({
+        type: 'get_messages',
+        data: { chatId },
+      }));
+    };
+
+    ws.onmessage = (event) => {
+      const message = JSON.parse(event.data);
+      if (message.type === 'messages') {
+        setMessages(message.data.messages || []);
+        ws.close();
+      } else if (message.type === 'error') {
+        console.error('Error refreshing messages:', message.data.message);
+        ws.close();
+      }
+    };
+  };
+
+  const sendWebSocketMessage = (type: string, data: any) => {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const ws = new WebSocket(`${protocol}//${window.location.host}`);
+
+    ws.onopen = () => {
+      ws.send(JSON.stringify({ type, data }));
+    };
+
+    ws.onmessage = (event) => {
+      const message = JSON.parse(event.data);
+      if (message.type === 'chat_updated' && message.data.chat) {
+        setChatMetaState(message.data.chat);
+        onConfigChange();
+      }
+      ws.close();
+    };
+  };
+
+  const handleModeChange = (mode: string) => {
+    sendWebSocketMessage('update_chat_meta', { chatId, updates: { mode } });
+  };
+
+  const handleAgentModeChange = (agentMode: string) => {
+    sendWebSocketMessage('update_chat_meta', { chatId, updates: { agentMode } });
+  };
+
+  const handleAssistantChange = (assistant: string) => {
+    const assistantValue = assistant === 'none' ? undefined : assistant;
+    sendWebSocketMessage('update_chat_meta', { chatId, updates: { assistant: assistantValue } });
+  };
+
+  const handleModelChange = (model: string) => {
+    sendWebSocketMessage('update_chat_meta', { chatId, updates: { model } });
+  };
+
+  const handleFetchModels = async (): Promise<any[]> => {
+    return new Promise((resolve, reject) => {
+      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+      const ws = new WebSocket(`${protocol}//${window.location.host}`);
+
+      ws.onopen = () => {
+        sendClientMessage(ws, { type: 'get_models' });
+      };
+
+      ws.onmessage = (event) => {
+        const message = JSON.parse(event.data);
+        if (message.type === 'models') {
+          resolve(message.data.models || []);
+          ws.close();
+        } else if (message.type === 'error') {
+          reject(new Error(message.data.message));
+          ws.close();
+        }
+      };
+
+      ws.onerror = () => {
+        reject(new Error('Failed to fetch models'));
+      };
+    });
+  };
+
+  const handleChatSettingsSave = (updates: { title?: string; prompt?: string; cwd?: string }) => {
+    sendWebSocketMessage('update_chat_meta', { chatId, updates });
+  };
+
+  const handleAddTodo = (todo: string) => {
+    sendWebSocketMessage('add_todo', { chatId, todo });
+  };
+
+  const handleToggleTodo = (index: number) => {
+    sendWebSocketMessage('toggle_todo', { chatId, index });
+  };
+
+  const handleRemoveTodo = (index: number) => {
+    sendWebSocketMessage('remove_todo', { chatId, index });
+  };
+
+  const handleClearTodos = () => {
+    if (confirm('Are you sure you want to clear all todos?')) {
+      sendWebSocketMessage('clear_todos', { chatId });
+    }
+  };
+
+  const handleClearMessages = () => {
+    if (showClearConfirm) {
+      sendWebSocketMessage('clear_messages', { chatId });
+      setMessages([]);
+      setShowClearConfirm(false);
+    } else {
+      setShowClearConfirm(true);
+    }
+  };
+
+  const handleDeleteChat = () => {
+    if (confirm(`Are you sure you want to delete "${chatMeta?.title}"? This cannot be undone.`)) {
+      sendWebSocketMessage('delete_chat', { chatId });
+      // Navigate back after deletion
+      setTimeout(() => onBack(), 500);
+    }
   };
 
   if (!chatMeta) {
@@ -83,25 +283,59 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
     <div className="flex h-screen bg-background">
       {/* Main Chat Area */}
       <div className="flex-1 flex flex-col">
-        {/* Chat Header */}
-        <div className="border-b border-border bg-card/30 backdrop-blur-sm p-4">
+        {/* Chat Header with Controls */}
+        <div className="relative z-10 border-b border-border bg-card/30 backdrop-blur-sm p-4">
           <div className="flex items-center gap-4">
             <Button variant="ghost" size="icon" onClick={onBack}>
               <ArrowLeft className="w-5 h-5" />
             </Button>
-            <div className="flex-1">
+            <div className="flex-1 flex items-center gap-2">
               <h2 className="text-xl font-bold neon-text-cyan">{chatMeta.title}</h2>
-              <div className="flex items-center gap-2 mt-1">
-                <span className="text-xs px-2 py-0.5 rounded-full bg-neon-purple/20 text-neon-purple border border-neon-purple/50">
-                  {chatMeta.mode}
-                </span>
-                {chatMeta.assistant && (
-                  <span className="text-xs text-muted-foreground flex items-center gap-1">
-                    <Bot className="w-3 h-3" />
-                    {chatMeta.assistant}
-                  </span>
-                )}
-              </div>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={handleDeleteChat}
+                title="Delete chat"
+                className="text-muted-foreground hover:text-destructive"
+              >
+                <Trash2 className="w-4 h-4" />
+              </Button>
+            </div>
+            <div className="flex items-center gap-3">
+              <AssistantSelector
+                assistants={config.assistants}
+                currentAssistant={chatMeta.assistant}
+                onChange={handleAssistantChange}
+              />
+              <ModeSelector mode={chatMeta.mode} onChange={handleModeChange} />
+              <AgentModeSelector
+                agentMode={chatMeta.agentMode || 'default'}
+                onChange={handleAgentModeChange}
+              />
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setShowTodos(true)}
+                title="Todos"
+              >
+                <CheckSquare className="w-5 h-5" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setShowChatSettings(true)}
+                title="Chat Settings"
+              >
+                <Settings className="w-5 h-5" />
+              </Button>
+              <Button
+                variant={showClearConfirm ? 'destructive' : 'ghost'}
+                size="icon"
+                onClick={handleClearMessages}
+                title={showClearConfirm ? 'Click again to confirm' : 'Clear messages'}
+              >
+                <Trash2 className="w-5 h-5" />
+              </Button>
             </div>
           </div>
         </div>
@@ -118,7 +352,7 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
             {/* Messages Area */}
             <ScrollArea className="flex-1 p-6">
               <MessageList
-                messages={messages}
+                messages={pendingMessage ? [...messages, pendingMessage] : messages}
                 showInput={config.user.showInput ?? false}
                 showOutput={config.user.showOutput ?? false}
                 onMessagesUpdate={setMessages}
@@ -130,12 +364,51 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
               <ChatInput
                 chatId={chatId}
                 chatMeta={chatMeta}
+                config={config}
+                messageCount={messages.length}
+                totalCost={totalCost}
                 onMessageSent={handleMessagesUpdate}
+                onWebSocketMessage={handleWebSocketMessage}
               />
             </div>
           </>
         )}
       </div>
+
+      {/* Modals */}
+      {showModelSelector && (
+        <ModelSelector
+          currentModel={chatMeta.model || config.user.models?.chat || ''}
+          onSelect={handleModelChange}
+          onClose={() => setShowModelSelector(false)}
+          onFetchModels={handleFetchModels}
+        />
+      )}
+
+      {showCommandsPanel && (
+        <CommandsPanel onClose={() => setShowCommandsPanel(false)} />
+      )}
+
+      {showChatSettings && (
+        <ChatSettingsDialog
+          title={chatMeta.title}
+          prompt={chatMeta.prompt}
+          cwd={chatMeta.cwd}
+          onSave={handleChatSettingsSave}
+          onClose={() => setShowChatSettings(false)}
+        />
+      )}
+
+      {showTodos && (
+        <TodosModal
+          todos={chatMeta.todos}
+          onAddTodo={handleAddTodo}
+          onToggleTodo={handleToggleTodo}
+          onRemoveTodo={handleRemoveTodo}
+          onClearTodos={handleClearTodos}
+          onClose={() => setShowTodos(false)}
+        />
+      )}
     </div>
   );
 };
diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
index 3dd63ff..d34f519 100644
--- a/packages/cletus/src/browser/server.ts
+++ b/packages/cletus/src/browser/server.ts
@@ -6,16 +6,59 @@ import { WebSocketServer, WebSocket } from 'ws';
 import { configExists } from '../file-manager';
 import { ConfigFile } from '../config';
 import { ChatFile } from '../chat';
-import type { Message, ChatMeta } from '../schemas';
+import type { Message, ChatMeta, MessageContent } from '../schemas';
+import type { ClientMessage, ServerMessage } from './websocket-types';
 
 const __serverFilename = fileURLToPath(import.meta.url);
 const __serverDirname = path.dirname(__serverFilename);
 
-interface WSMessage {
-  type: string;
-  data?: any;
+// Chat file cache with automatic cleanup
+interface ChatCacheEntry {
+  chatFile: ChatFile;
+  lastAccessed: number;
 }
 
+const chatCache = new Map<string, ChatCacheEntry>();
+const CACHE_EXPIRY_MS = 60 * 60 * 1000; // 1 hour
+
+async function getChat(chatId: string): Promise<ChatFile> {
+  const now = Date.now();
+
+  // Check cache
+  const cached = chatCache.get(chatId);
+  if (cached) {
+    cached.lastAccessed = now;
+    return cached.chatFile;
+  }
+
+  // Create and load new chat file
+  const chatFile = new ChatFile(chatId);
+  await chatFile.load();
+
+  chatCache.set(chatId, {
+    chatFile,
+    lastAccessed: now,
+  });
+
+  return chatFile;
+}
+
+function cleanupExpiredChats(): void {
+  const now = Date.now();
+  for (const [chatId, entry] of chatCache.entries()) {
+    if (now - entry.lastAccessed > CACHE_EXPIRY_MS) {
+      chatCache.delete(chatId);
+    }
+  }
+}
+
+function removeChat(chatId: string): void {
+  chatCache.delete(chatId);
+}
+
+// Run cleanup every 15 minutes
+setInterval(cleanupExpiredChats, 15 * 60 * 1000);
+
 export async function startBrowserServer(port: number = 3000): Promise<void> {
   const server = http.createServer(async (req, res) => {
     const url = req.url || '/';
@@ -75,22 +118,26 @@ export async function startBrowserServer(port: number = 3000): Promise<void> {
 
 function handleWebSocketConnection(ws: WebSocket): void {
   let config: ConfigFile | null = null;
-  let chatFile: ChatFile | null = null;
   let abortController: AbortController | null = null;
 
+  // Type-safe message sender
+  const sendMessage = (message: ServerMessage) => {
+    ws.send(JSON.stringify(message));
+  };
+
   ws.on('message', async (data) => {
     try {
-      const message: WSMessage = JSON.parse(data.toString());
+      const message = JSON.parse(data.toString()) as ClientMessage;
 
       switch (message.type) {
         case 'get_config':
           try {
             const exists = await configExists();
             if (!exists) {
-              ws.send(JSON.stringify({
+              sendMessage({
                 type: 'config_not_found',
                 data: {},
-              }));
+              });
               return;
             }
 
@@ -98,20 +145,15 @@ function handleWebSocketConnection(ws: WebSocket): void {
             await configFile.load();
             const configData = configFile.getData();
 
-            ws.send(JSON.stringify({
+            sendMessage({
               type: 'config',
-              data: {
-                user: configData.user,
-                assistants: configData.assistants,
-                chats: configData.chats,
-                types: configData.types,
-              },
-            }));
+              data: configData,
+            });
           } catch (error) {
-            ws.send(JSON.stringify({
+            sendMessage({
               type: 'error',
               data: { message: 'Failed to load config' },
-            }));
+            });
           }
           break;
 
@@ -120,18 +162,42 @@ function handleWebSocketConnection(ws: WebSocket): void {
             const { name } = message.data;
             const configFile = new ConfigFile();
             await configFile.load();
-            const chatId = await configFile.createChat(name);
-            await configFile.load();
 
-            ws.send(JSON.stringify({
+            // Generate chat ID and create new chat
+            const now = Date.now();
+            const chatId = new Date(now).toISOString().replace(/[-:]/g, '').slice(0, 15);
+            const newChat: ChatMeta = {
+              id: chatId,
+              title: name,
+              assistant: undefined,
+              prompt: undefined,
+              mode: 'none',
+              agentMode: 'default',
+              created: now,
+              updated: now,
+              todos: [],
+              questions: [],
+              toolset: undefined,
+              model: undefined,
+            };
+
+            await configFile.addChat(newChat);
+
+            // Create the chat messages file
+            const chatFile = new ChatFile(chatId);
+            await chatFile.save(() => {
+              // Initialize empty chat
+            });
+
+            sendMessage({
               type: 'chat_created',
               data: { chatId },
-            }));
+            });
           } catch (error) {
-            ws.send(JSON.stringify({
+            sendMessage({
               type: 'error',
               data: { message: 'Failed to create chat' },
-            }));
+            });
           }
           break;
 
@@ -140,74 +206,83 @@ function handleWebSocketConnection(ws: WebSocket): void {
             const { chatId } = message.data;
             config = new ConfigFile();
             await config.load();
-            chatFile = new ChatFile(chatId);
-            await chatFile.load();
+            const chatFile = await getChat(chatId);
 
-            ws.send(JSON.stringify({
+            sendMessage({
               type: 'chat_initialized',
               data: {
                 messages: chatFile.getMessages(),
                 chat: config.getChats().find(c => c.id === chatId),
               },
-            }));
+            });
           } catch (error) {
-            ws.send(JSON.stringify({
+            sendMessage({
               type: 'error',
               data: { message: 'Failed to initialize chat' },
-            }));
+            });
           }
           break;
 
         case 'get_messages':
           try {
             const { chatId } = message.data;
-            const chatFileTemp = new ChatFile(chatId);
-            await chatFileTemp.load();
-            const messages = chatFileTemp.getMessages();
+            const chatFile = await getChat(chatId);
+            const messages = chatFile.getMessages();
 
-            ws.send(JSON.stringify({
+            sendMessage({
               type: 'messages',
               data: { messages },
-            }));
+            });
           } catch (error) {
-            ws.send(JSON.stringify({
+            sendMessage({
               type: 'error',
               data: { message: 'Failed to load messages' },
-            }));
+            });
           }
           break;
 
         case 'send_message':
-          if (!config || !chatFile) {
-            ws.send(JSON.stringify({
+          if (!config) {
+            sendMessage({
               type: 'error',
-              data: { message: 'Chat not initialized' },
-            }));
+              data: { message: 'Config not loaded' },
+            });
             return;
           }
 
           try {
-            const { content } = message.data;
+            const { chatId, content } = message.data;
+            const chatFile = await getChat(chatId);
+
+            // Validate content is an array of MessageContent
+            if (!Array.isArray(content)) {
+              sendMessage({
+                type: 'error',
+                data: { message: 'Invalid message content: must be an array' },
+              });
+              return;
+            }
+
             const chat = config.getChats().find(c => c.id === chatFile!.id);
             if (!chat) {
-              ws.send(JSON.stringify({
+              sendMessage({
                 type: 'error',
                 data: { message: 'Chat not found' },
-              }));
+              });
               return;
             }
 
-            // Add user message
+            // Add user message with proper typing
             const userMessage: Omit<Message, 'created'> = {
               role: 'user',
-              content,
+              content: content as MessageContent[],
             };
             await chatFile.addMessage(userMessage);
 
-            ws.send(JSON.stringify({
+            sendMessage({
               type: 'message_added',
-              data: { message: { ...userMessage, created: Date.now() } },
-            }));
+              data: { message: { ...userMessage, created: Date.now() } as Message },
+            });
 
             // Process AI response
             abortController = new AbortController();
@@ -221,43 +296,112 @@ function handleWebSocketConnection(ws: WebSocket): void {
             const chatAgent = createChatAgent(ai);
 
             const chatStatus = (status: string) => {
-              ws.send(JSON.stringify({
+              sendMessage({
                 type: 'status_update',
                 data: { status },
-              }));
+              });
             };
 
             const onRefreshChat = () => {
-              ws.send(JSON.stringify({
+              sendMessage({
                 type: 'messages_updated',
                 data: { messages: chatFile!.getMessages() },
-              }));
+              });
+            };
+
+            const clearUsage = () => {
+              const defaultContext = ai.config.defaultContext;
+              if (defaultContext && defaultContext.usage) {
+                defaultContext.usage.accumulated = {};
+                defaultContext.usage.accumulatedCost = 0;
+              }
+            };
+
+            const getUsage = () => {
+              const defaultContext = ai.config.defaultContext;
+              if (defaultContext && defaultContext.usage) {
+                return {
+                  accumulated: defaultContext.usage.accumulated,
+                  accumulatedCost: defaultContext.usage.accumulatedCost,
+                };
+              }
+              return { accumulated: {}, accumulatedCost: 0 };
             };
 
             await runChatOrchestrator({
+              chatAgent,
+              messages: chatFile.getMessages(),
+              chatMeta: chat,
               config,
-              chat,
               chatData: chatFile,
-              chatAgent,
-              ai,
               signal: abortController.signal,
-              chatStatus,
+              clearUsage,
+              getUsage,
               events: {
                 onRefreshChat,
                 onRefreshPending: onRefreshChat,
               },
+            }, (event) => {
+              // Handle orchestrator events
+              switch (event.type) {
+                case 'pendingUpdate':
+                  sendMessage({
+                    type: 'pending_update',
+                    data: { pending: event.pending },
+                  });
+                  break;
+                case 'update':
+                  sendMessage({
+                    type: 'message_updated',
+                    data: { message: event.message },
+                  });
+                  break;
+                case 'status':
+                  chatStatus(event.status);
+                  break;
+                case 'usage':
+                  sendMessage({
+                    type: 'usage_update',
+                    data: {
+                      accumulated: event.accumulated,
+                      accumulatedCost: event.accumulatedCost,
+                      current: event.current,
+                    },
+                  });
+                  break;
+                case 'elapsed':
+                  sendMessage({
+                    type: 'elapsed_update',
+                    data: { ms: event.ms },
+                  });
+                  break;
+                case 'complete':
+                  // Add the complete message to chat file (like CLI does)
+                  if (event.message.content.length > 0 && chatFile) {
+                    chatFile.addMessage(event.message).catch((err) => {
+                      console.error('Failed to save complete message:', err);
+                    });
+                  }
+                  // Send the complete message
+                  sendMessage({
+                    type: 'response_complete',
+                    data: { message: event.message },
+                  });
+                  break;
+                case 'error':
+                  sendMessage({
+                    type: 'error',
+                    data: { message: event.error },
+                  });
+                  break;
+              }
             });
-
-            ws.send(JSON.stringify({
-              type: 'response_complete',
-              data: { messages: chatFile.getMessages() },
-            }));
           } catch (error) {
             if (error instanceof Error && error.name !== 'AbortError') {
-              ws.send(JSON.stringify({
+              sendMessage({
                 type: 'error',
                 data: { message: error.message },
-              }));
+              });
             }
           }
           break;
@@ -269,18 +413,186 @@ function handleWebSocketConnection(ws: WebSocket): void {
           }
           break;
 
+        case 'get_models':
+          try {
+            const { baseMetadata } = message.data || {};
+            // Lazy-load AI registry
+            const { createCletusAI } = await import('../ai');
+            const configFile = new ConfigFile();
+            await configFile.load();
+            const ai = createCletusAI(configFile);
+            const models = ai.registry.searchModels(baseMetadata || {});
+
+            sendMessage({
+              type: 'models',
+              data: { models },
+            });
+          } catch (error) {
+            sendMessage({
+              type: 'error',
+              data: { message: 'Failed to fetch models' },
+            });
+          }
+          break;
+
+        case 'update_chat_meta':
+          try {
+            const { chatId, updates } = message.data;
+            const configFile = new ConfigFile();
+            await configFile.load();
+            await configFile.updateChat(chatId, updates);
+            const updatedChat = configFile.getChats().find(c => c.id === chatId);
+
+            sendMessage({
+              type: 'chat_updated',
+              data: { chat: updatedChat },
+            });
+          } catch (error) {
+            sendMessage({
+              type: 'error',
+              data: { message: 'Failed to update chat metadata' },
+            });
+          }
+          break;
+
+        case 'add_todo':
+          try {
+            const { chatId, todo } = message.data;
+            const configFile = new ConfigFile();
+            await configFile.load();
+            const chat = configFile.getChats().find(c => c.id === chatId);
+            if (chat) {
+              chat.todos.push({ id: Math.random().toString(36).substring(7), name: todo, done: false });
+              await configFile.updateChat(chatId, { todos: chat.todos });
+              const updatedChat = configFile.getChats().find(c => c.id === chatId);
+              sendMessage({
+                type: 'chat_updated',
+                data: { chat: updatedChat },
+              });
+            }
+          } catch (error) {
+            sendMessage({
+              type: 'error',
+              data: { message: 'Failed to add todo' },
+            });
+          }
+          break;
+
+        case 'toggle_todo':
+          try {
+            const { chatId, index } = message.data;
+            const configFile = new ConfigFile();
+            await configFile.load();
+            const chat = configFile.getChats().find(c => c.id === chatId);
+            if (chat && chat.todos[index]) {
+              chat.todos[index].done = !chat.todos[index].done;
+              await configFile.updateChat(chatId, { todos: chat.todos });
+              const updatedChat = configFile.getChats().find(c => c.id === chatId);
+              sendMessage({
+                type: 'chat_updated',
+                data: { chat: updatedChat },
+              });
+            }
+          } catch (error) {
+            sendMessage({
+              type: 'error',
+              data: { message: 'Failed to toggle todo' },
+            });
+          }
+          break;
+
+        case 'remove_todo':
+          try {
+            const { chatId, index } = message.data;
+            const configFile = new ConfigFile();
+            await configFile.load();
+            const chat = configFile.getChats().find(c => c.id === chatId);
+            if (chat && chat.todos[index] !== undefined) {
+              chat.todos.splice(index, 1);
+              await configFile.updateChat(chatId, { todos: chat.todos });
+              const updatedChat = configFile.getChats().find(c => c.id === chatId);
+              sendMessage({
+                type: 'chat_updated',
+                data: { chat: updatedChat },
+              });
+            }
+          } catch (error) {
+            sendMessage({
+              type: 'error',
+              data: { message: 'Failed to remove todo' },
+            });
+          }
+          break;
+
+        case 'clear_todos':
+          try {
+            const { chatId } = message.data;
+            const configFile = new ConfigFile();
+            await configFile.load();
+            await configFile.updateChat(chatId, { todos: [] });
+            const updatedChat = configFile.getChats().find(c => c.id === chatId);
+            sendMessage({
+              type: 'chat_updated',
+              data: { chat: updatedChat },
+            });
+          } catch (error) {
+            sendMessage({
+              type: 'error',
+              data: { message: 'Failed to clear todos' },
+            });
+          }
+          break;
+
+        case 'clear_messages':
+          try {
+            const { chatId } = message.data;
+            const chatFile = await getChat(chatId);
+            await chatFile.save((data) => {
+              data.messages = [];
+            });
+            sendMessage({
+              type: 'messages_updated',
+              data: { messages: [] },
+            });
+          } catch (error) {
+            sendMessage({
+              type: 'error',
+              data: { message: 'Failed to clear messages' },
+            });
+          }
+          break;
+
+        case 'delete_chat':
+          try {
+            const { chatId } = message.data;
+            const configFile = new ConfigFile();
+            await configFile.load();
+            await configFile.deleteChat(chatId);
+            removeChat(chatId); // Remove from cache
+            sendMessage({
+              type: 'chat_deleted',
+              data: { chatId },
+            });
+          } catch (error) {
+            sendMessage({
+              type: 'error',
+              data: { message: 'Failed to delete chat' },
+            });
+          }
+          break;
+
         default:
-          ws.send(JSON.stringify({
+          sendMessage({
             type: 'error',
-            data: { message: `Unknown message type: ${message.type}` },
-          }));
+            data: { message: `Unknown message type: ${(message as any).type}` },
+          });
       }
     } catch (error) {
       console.error('WebSocket error:', error);
-      ws.send(JSON.stringify({
+      sendMessage({
         type: 'error',
         data: { message: error instanceof Error ? error.message : 'Unknown error' },
-      }));
+      });
     }
   });
 
diff --git a/packages/cletus/src/browser/websocket-types.ts b/packages/cletus/src/browser/websocket-types.ts
new file mode 100644
index 0000000..80beb88
--- /dev/null
+++ b/packages/cletus/src/browser/websocket-types.ts
@@ -0,0 +1,89 @@
+/**
+ * Type-safe WebSocket message protocol for browser-server communication
+ */
+
+import type { Message, ChatMeta, ChatMode, AgentMode, Config } from '../schemas';
+
+// Client -> Server Messages
+export type ClientMessage =
+  | { type: 'get_config'; data?: never }
+  | { type: 'create_chat'; data: { name: string } }
+  | { type: 'get_messages'; data: { chatId: string } }
+  | { type: 'init_chat'; data: { chatId: string } }
+  | { type: 'send_message'; data: { chatId: string; content: Message['content'] } }
+  | { type: 'cancel'; data?: never }
+  | { type: 'update_chat_meta'; data: { chatId: string; updates: Partial<ChatMeta> } }
+  | { type: 'add_todo'; data: { chatId: string; todo: string } }
+  | { type: 'toggle_todo'; data: { chatId: string; index: number } }
+  | { type: 'remove_todo'; data: { chatId: string; index: number } }
+  | { type: 'clear_todos'; data: { chatId: string } }
+  | { type: 'clear_messages'; data: { chatId: string } }
+  | { type: 'delete_chat'; data: { chatId: string } }
+  | { type: 'get_models'; data?: { baseMetadata?: any } };
+
+// Server -> Client Messages
+export type ServerMessage =
+  | { type: 'config'; data: Config }
+  | { type: 'config_not_found'; data: Record<string, never> }
+  | { type: 'chat_created'; data: { chatId: string } }
+  | { type: 'chat_initialized'; data: { messages: Message[]; chat?: ChatMeta } }
+  | { type: 'messages'; data: { messages: Message[] } }
+  | { type: 'message_added'; data: { message: Message } }
+  | { type: 'message_updated'; data: { message: Message } }
+  | { type: 'pending_update'; data: { pending: Message } }
+  | { type: 'messages_updated'; data: { messages: Message[] } }
+  | { type: 'response_complete'; data: { message: Message } }
+  | { type: 'chat_updated'; data: { chat?: ChatMeta } }
+  | { type: 'models'; data: { models: any[] } }
+  | { type: 'status_update'; data: { status: string } }
+  | { type: 'usage_update'; data: { accumulated: any; accumulatedCost: number; current: any } }
+  | { type: 'elapsed_update'; data: { ms: number } }
+  | { type: 'chat_deleted'; data: { chatId: string } }
+  | { type: 'error'; data: { message: string } };
+
+/**
+ * Type-safe WebSocket client interface
+ */
+export interface TypedWebSocket {
+  send(message: ClientMessage): void;
+  onMessage(handler: (message: ServerMessage) => void): void;
+  close(): void;
+}
+
+/**
+ * Helper to create a typed WebSocket wrapper
+ */
+export function createTypedWebSocket(url: string): TypedWebSocket {
+  const ws = new WebSocket(url);
+  const messageHandlers: Array<(message: ServerMessage) => void> = [];
+
+  ws.onmessage = (event) => {
+    try {
+      const message = JSON.parse(event.data) as ServerMessage;
+      messageHandlers.forEach(handler => handler(message));
+    } catch (error) {
+      console.error('Failed to parse WebSocket message:', error);
+    }
+  };
+
+  return {
+    send(message: ClientMessage) {
+      ws.send(JSON.stringify(message));
+    },
+    onMessage(handler: (message: ServerMessage) => void) {
+      messageHandlers.push(handler);
+    },
+    close() {
+      ws.close();
+    },
+  };
+}
+
+/**
+ * Type-safe helper to send a message via WebSocket
+ */
+export function sendClientMessage(ws: WebSocket | null, message: ClientMessage): void {
+  if (ws && ws.readyState === WebSocket.OPEN) {
+    ws.send(JSON.stringify(message));
+  }
+}
diff --git a/packages/cletus/src/chat-ui.tsx b/packages/cletus/src/chat-ui.tsx
index ba1353a..e024fdc 100644
--- a/packages/cletus/src/chat-ui.tsx
+++ b/packages/cletus/src/chat-ui.tsx
@@ -1,8 +1,8 @@
+import { getTotalTokens } from '@aeye/core';
+import events from 'events';
 import { Box, Static, Text, useInput } from 'ink';
 import TextInput from 'ink-text-input';
 import path from 'path';
-import fs from 'fs';
-import events from 'events'
 import React, { useEffect, useRef, useState } from 'react';
 import { createCletusAI } from './ai';
 import { ChatFile } from './chat';
@@ -11,16 +11,14 @@ import { MessageDisplay } from './components/MessageDisplay';
 import { ModelSelector } from './components/ModelSelector';
 import { CompletionResult, OperationApprovalMenu } from './components/OperationApprovalMenu';
 import { ConfigFile } from './config';
-import { getChatPath } from './file-manager';
 import type { AgentMode, ChatMeta, ChatMode, Message } from './schemas';
-import { getTotalTokens } from '@aeye/core';
 // @ts-ignore
 import mic from 'mic';
 import { Writer } from 'wav';
 import { createChatAgent } from './agents/chat-agent';
 import { runChatOrchestrator } from './agents/chat-orchestrator';
-import { COLORS } from './constants';
 import { getAltKeyLabel } from './common';
+import { COLORS } from './constants';
 import { fileIsDirectory } from './helpers/files';
 import { useAdaptiveDebounce, useSyncedState } from './hooks';
 import { logger } from './logger';
diff --git a/packages/cletus/src/tool-registry.ts b/packages/cletus/src/tool-registry.ts
index a27f481..eb0f3f2 100644
--- a/packages/cletus/src/tool-registry.ts
+++ b/packages/cletus/src/tool-registry.ts
@@ -172,7 +172,7 @@ export class ToolRegistry {
     if (ctx?.chatStatus) {
       const embedTools = this.getToolsToEmbed();
       const allTools = this.tools.size;
-      if (embedTools.length === allTools) {
+      if (embedTools.length === allTools && allTools > 0) {
         ctx.chatStatus(`Initializing adaptive tools (${allTools} tools)...`);
       } else if (embedTools.length > 0) {
         ctx.chatStatus(`Updating adaptive tools (${pluralize(embedTools.length, 'tool')})...`);

From 9c1288ebec84dcb42cb48d732f423b5c7ab3517c Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Sun, 14 Dec 2025 12:15:23 -0500
Subject: [PATCH 09/27] Add operation approval UI and server support

Introduces an OperationApprovalPanel React component for approving or rejecting operations in chat messages. Updates the WebSocket server and protocol to handle operation approval, including new 'handle_operations' message types and backend logic for updating message operations. Refactors message and operation handling in ChatPage and related components, improves type safety, and cleans up unused props. Adds a browser-specific tsconfig for improved TypeScript support.
---
 packages/cletus/src/agents/chat-agent.ts      |   2 +
 .../cletus/src/agents/chat-orchestrator.ts    |  43 +-
 .../browser/components/AgentModeSelector.tsx  |   9 +-
 .../src/browser/components/MessageItem.tsx    |   8 +-
 .../src/browser/components/MessageList.tsx    |  20 +-
 .../src/browser/components/ModeSelector.tsx   |   9 +-
 .../components/OperationApprovalPanel.tsx     | 178 +++++++
 .../src/browser/components/ui/select.tsx      |   4 +-
 .../operations/BaseOperationDisplay.tsx       |   3 +-
 .../cletus/src/browser/operations/index.tsx   |   4 -
 .../cletus/src/browser/operations/render.tsx  |   2 -
 .../cletus/src/browser/pages/ChatPage.tsx     | 244 ++++-----
 packages/cletus/src/browser/server.ts         | 467 ++++++++++--------
 .../cletus/src/browser/websocket-types.ts     |   3 +-
 packages/cletus/src/chat.ts                   |  12 +
 packages/cletus/tsconfig.browser.json         |  16 +
 packages/cletus/tsconfig.json                 |   7 +-
 17 files changed, 652 insertions(+), 379 deletions(-)
 create mode 100644 packages/cletus/src/browser/components/OperationApprovalPanel.tsx
 create mode 100644 packages/cletus/tsconfig.browser.json

diff --git a/packages/cletus/src/agents/chat-agent.ts b/packages/cletus/src/agents/chat-agent.ts
index 324930c..dad1cee 100644
--- a/packages/cletus/src/agents/chat-agent.ts
+++ b/packages/cletus/src/agents/chat-agent.ts
@@ -254,6 +254,8 @@ Tools:
   return chatPrompt;
 }
 
+export type CletusChatAgent = ReturnType<typeof createChatAgent>;
+
 /**
  * Get a human-readable description for a toolset
  */
diff --git a/packages/cletus/src/agents/chat-orchestrator.ts b/packages/cletus/src/agents/chat-orchestrator.ts
index 8d609d9..125f87f 100644
--- a/packages/cletus/src/agents/chat-orchestrator.ts
+++ b/packages/cletus/src/agents/chat-orchestrator.ts
@@ -96,6 +96,7 @@ export async function runChatOrchestrator(
   let messageUsage: Usage = {};
   let messageCost = 0;
   let toolTokens = 0;
+  let lastTextIndex = -1; // Track which content entry has the accumulated text
 
   const updateUsageEvent = () => {
     const accumulated = getUsage();
@@ -147,15 +148,26 @@ export async function runChatOrchestrator(
       };
 
       // Helper to get or create the last text content entry (not tied to an operation)
-      const getLastTextContent = () => {
+      const getLastTextContent = (forceNew = false) => {
+        // If forceNew, create a new entry
+        if (forceNew) {
+          const newContent = { type: 'text' as const, content: '' };
+          pending.content.push(newContent);
+          lastTextIndex = pending.content.length - 1;
+          return newContent;
+        }
+
         // Get the last entry - if it's text and not an operation, return it
         const last = pending.content[pending.content.length - 1];
         if (last && last.type === 'text' && last.operationIndex === undefined) {
+          lastTextIndex = pending.content.length - 1;
           return last;
         }
+
         // Create a new text content entry if none exists
         const newContent = { type: 'text' as const, content: '' };
         pending.content.push(newContent);
+        lastTextIndex = pending.content.length - 1;
         return newContent;
       };
 
@@ -273,10 +285,10 @@ export async function runChatOrchestrator(
               {
                 const lastContent = getLastTextContent();
                 lastContent.content += chunk.content;
-                
+
                 // Estimate text output tokens
                 updateEstimatedTextOutputTokens();
-                
+
                 onEvent({ type: 'pendingUpdate', pending });
                 onEvent({ type: 'status', status: '' });
                 updateUsageEvent();
@@ -285,17 +297,36 @@ export async function runChatOrchestrator(
 
             case 'text':
               {
+                // text event contains complete content for this iteration
+                // If we haven't accumulated via textPartial, use it directly
+                // Otherwise, textPartial has already accumulated it, so skip
                 const lastContent = getLastTextContent();
-                lastContent.content = chunk.content;
-                
+                if (lastContent.content === '') {
+                  // No textPartial events (non-streaming mode), use text content
+                  lastContent.content = chunk.content;
+                } else {
+                  // textPartial already accumulated, verify it matches
+                  // In streaming mode, text is redundant with textPartial accumulation
+                }
+
                 // Estimate text output tokens
                 updateEstimatedTextOutputTokens();
-                
+
                 onEvent({ type: 'pendingUpdate', pending });
                 updateUsageEvent();
               }
               break;
 
+            case 'toolOutput':
+              {
+                // After a tool completes, the next text should go into a new content entry
+                // This ensures content from different tool iterations doesn't get mixed
+                // Force creation of new text entry on next text event
+                getLastTextContent(true);
+                onEvent({ type: 'pendingUpdate', pending });
+              }
+              break;
+
             case 'requestUsage':
               const lastUserMessageIndex = messages.findLastIndex((msg) => msg.role === 'user');
               const lastUserMessage = messages[lastUserMessageIndex];
diff --git a/packages/cletus/src/browser/components/AgentModeSelector.tsx b/packages/cletus/src/browser/components/AgentModeSelector.tsx
index 49c8f23..4c8fb5c 100644
--- a/packages/cletus/src/browser/components/AgentModeSelector.tsx
+++ b/packages/cletus/src/browser/components/AgentModeSelector.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { Select, SelectOption } from './ui/select';
+import { AgentMode } from '../../schemas';
 
 interface AgentModeSelectorProps {
-  agentMode: string;
-  onChange: (agentMode: string) => void;
+  agentMode: AgentMode;
+  onChange: (agentMode: AgentMode) => void;
   disabled?: boolean;
 }
 
-const AGENT_MODE_OPTIONS: SelectOption[] = [
+const AGENT_MODE_OPTIONS: SelectOption<AgentMode>[] = [
   {
     value: 'default',
     label: 'Run Mode',
@@ -27,7 +28,7 @@ export const AgentModeSelector: React.FC<AgentModeSelectorProps> = ({ agentMode,
       <Select
         value={agentMode || 'default'}
         options={AGENT_MODE_OPTIONS}
-        onChange={onChange}
+        onChange={value => onChange(value as AgentMode)}
         disabled={disabled}
         className="min-w-[140px]"
       />
diff --git a/packages/cletus/src/browser/components/MessageItem.tsx b/packages/cletus/src/browser/components/MessageItem.tsx
index c1bb5c6..a2de476 100644
--- a/packages/cletus/src/browser/components/MessageItem.tsx
+++ b/packages/cletus/src/browser/components/MessageItem.tsx
@@ -4,15 +4,13 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { OperationDisplay } from '../operations';
 import { cn } from '../lib/utils';
-import type { Message, MessageContent } from '../../schemas';
+import type { Message } from '../../schemas';
 
 interface MessageItemProps {
   message: Message;
-  showInput: boolean;
-  showOutput: boolean;
 }
 
-export const MessageItem: React.FC<MessageItemProps> = ({ message, showInput, showOutput }) => {
+export const MessageItem: React.FC<MessageItemProps> = ({ message }) => {
   const { role, name, content, operations = [] } = message;
 
   const isUser = role === 'user';
@@ -74,8 +72,6 @@ export const MessageItem: React.FC<MessageItemProps> = ({ message, showInput, sh
                 <OperationDisplay
                   key={index}
                   operation={item.operation}
-                  showInput={showInput}
-                  showOutput={showOutput}
                 />
               );
             }
diff --git a/packages/cletus/src/browser/components/MessageList.tsx b/packages/cletus/src/browser/components/MessageList.tsx
index 512e978..a9a4faa 100644
--- a/packages/cletus/src/browser/components/MessageList.tsx
+++ b/packages/cletus/src/browser/components/MessageList.tsx
@@ -1,26 +1,12 @@
 import React, { useEffect, useRef } from 'react';
 import { MessageItem } from './MessageItem';
-
-interface Message {
-  role: 'user' | 'assistant' | 'system';
-  content?: string;
-  created: number;
-  operations?: Array<{
-    type: string;
-    status: string;
-    input: any;
-    output?: any;
-  }>;
-}
+import type { Message } from '../../schemas';
 
 interface MessageListProps {
   messages: Message[];
-  showInput: boolean;
-  showOutput: boolean;
-  onMessagesUpdate: (messages: Message[]) => void;
 }
 
-export const MessageList: React.FC<MessageListProps> = ({ messages, showInput, showOutput, onMessagesUpdate }) => {
+export const MessageList: React.FC<MessageListProps> = ({ messages }) => {
   const bottomRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -40,8 +26,6 @@ export const MessageList: React.FC<MessageListProps> = ({ messages, showInput, s
             <MessageItem
               key={index}
               message={message}
-              showInput={showInput}
-              showOutput={showOutput}
             />
           ))}
         </div>
diff --git a/packages/cletus/src/browser/components/ModeSelector.tsx b/packages/cletus/src/browser/components/ModeSelector.tsx
index 9e3ff79..1a1387d 100644
--- a/packages/cletus/src/browser/components/ModeSelector.tsx
+++ b/packages/cletus/src/browser/components/ModeSelector.tsx
@@ -1,13 +1,14 @@
 import React from 'react';
 import { Select, SelectOption } from './ui/select';
+import { ChatMode } from '../../schemas';
 
 interface ModeSelectorProps {
-  mode: string;
-  onChange: (mode: string) => void;
+  mode: ChatMode;
+  onChange: (mode: ChatMode) => void;
   disabled?: boolean;
 }
 
-const MODE_OPTIONS: SelectOption[] = [
+const MODE_OPTIONS: SelectOption<ChatMode>[] = [
   {
     value: 'none',
     label: 'None',
@@ -42,7 +43,7 @@ export const ModeSelector: React.FC<ModeSelectorProps> = ({ mode, onChange, disa
       <Select
         value={mode}
         options={MODE_OPTIONS}
-        onChange={onChange}
+        onChange={value => onChange(value as ChatMode)}
         disabled={disabled}
         className="min-w-[140px]"
       />
diff --git a/packages/cletus/src/browser/components/OperationApprovalPanel.tsx b/packages/cletus/src/browser/components/OperationApprovalPanel.tsx
new file mode 100644
index 0000000..232ae7d
--- /dev/null
+++ b/packages/cletus/src/browser/components/OperationApprovalPanel.tsx
@@ -0,0 +1,178 @@
+import React, { useState } from 'react';
+import { CheckCircle2, XCircle, AlertCircle } from 'lucide-react';
+import { Button } from './ui/button';
+import type { Message } from '../../schemas';
+
+interface OperationApprovalPanelProps {
+  message: Message;
+  onApproveReject: (approved: number[], rejected: number[]) => void;
+}
+
+export const OperationApprovalPanel: React.FC<OperationApprovalPanelProps> = ({
+  message,
+  onApproveReject,
+}) => {
+  const [operationDecisions, setOperationDecisions] = useState<Map<number, 'approve' | 'reject'>>(new Map());
+
+  // Get operations that need approval
+  const approvableOperations = (message.operations || [])
+    .map((op, idx) => ({ op, idx }))
+    .filter(({ op }) => op.status === 'analyzed');
+
+  if (approvableOperations.length === 0) {
+    return null;
+  }
+
+  const hasMultipleOperations = approvableOperations.length > 1;
+
+  const handleApproveAll = () => {
+    const approved = approvableOperations.map(({ idx }) => idx);
+    onApproveReject(approved, []);
+  };
+
+  const handleRejectAll = () => {
+    const rejected = approvableOperations.map(({ idx }) => idx);
+    onApproveReject([], rejected);
+  };
+
+  const handleToggleOperation = (idx: number) => {
+    const newDecisions = new Map(operationDecisions);
+    const currentDecision = newDecisions.get(idx);
+
+    if (currentDecision === 'approve') {
+      newDecisions.set(idx, 'reject');
+    } else if (currentDecision === 'reject') {
+      newDecisions.delete(idx); // Back to undecided
+    } else {
+      newDecisions.set(idx, 'approve');
+    }
+
+    setOperationDecisions(newDecisions);
+  };
+
+  const handleSubmitDecisions = () => {
+    const approved: number[] = [];
+    const rejected: number[] = [];
+
+    approvableOperations.forEach(({ idx }) => {
+      const decision = operationDecisions.get(idx);
+      if (decision === 'approve') {
+        approved.push(idx);
+      } else if (decision === 'reject') {
+        rejected.push(idx);
+      } else {
+        // Undecided operations are rejected by default
+        rejected.push(idx);
+      }
+    });
+
+    onApproveReject(approved, rejected);
+  };
+
+  const getOperationIcon = (idx: number) => {
+    const decision = operationDecisions.get(idx);
+    if (decision === 'approve') {
+      return <CheckCircle2 className="w-5 h-5 text-green-400" />;
+    } else if (decision === 'reject') {
+      return <XCircle className="w-5 h-5 text-red-400" />;
+    }
+    return <AlertCircle className="w-5 h-5 text-yellow-400" />;
+  };
+
+  const getOperationName = (type: string) => {
+    return type.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
+  };
+
+  return (
+    <div className="border border-yellow-500/30 rounded-lg p-4 mb-4 bg-yellow-500/5">
+      <div className="flex items-center gap-2 mb-3">
+        <AlertCircle className="w-5 h-5 text-yellow-400" />
+        <h3 className="font-semibold text-yellow-400">
+          {approvableOperations.length} {approvableOperations.length === 1 ? 'Operation' : 'Operations'} Require Approval
+        </h3>
+      </div>
+
+      {/* Quick actions for multiple operations */}
+      {hasMultipleOperations && (
+        <div className="flex gap-2 mb-3">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleApproveAll}
+            className="text-green-400 border-green-400/30 hover:bg-green-400/10"
+          >
+            <CheckCircle2 className="w-4 h-4 mr-2" />
+            Approve All
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleRejectAll}
+            className="text-red-400 border-red-400/30 hover:bg-red-400/10"
+          >
+            <XCircle className="w-4 h-4 mr-2" />
+            Reject All
+          </Button>
+        </div>
+      )}
+
+      {/* Operation list */}
+      <div className="space-y-2 mb-3">
+        {approvableOperations.map(({ op, idx }) => (
+          <div
+            key={idx}
+            className="flex items-start gap-3 p-3 rounded border border-border bg-card/30 cursor-pointer hover:bg-card/50 transition-colors"
+            onClick={() => handleToggleOperation(idx)}
+          >
+            <div className="flex-shrink-0 mt-0.5">
+              {getOperationIcon(idx)}
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="font-medium text-sm">{getOperationName(op.type)}</div>
+              {op.analysis && (
+                <div className="text-xs text-muted-foreground mt-1">{op.analysis}</div>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Submit button for individual decisions */}
+      {hasMultipleOperations && (
+        <div className="flex justify-end">
+          <Button
+            variant="neon"
+            size="sm"
+            onClick={handleSubmitDecisions}
+          >
+            Submit Decisions
+          </Button>
+        </div>
+      )}
+
+      {/* Single operation buttons */}
+      {!hasMultipleOperations && (
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleApproveAll}
+            className="flex-1 text-green-400 border-green-400/30 hover:bg-green-400/10"
+          >
+            <CheckCircle2 className="w-4 h-4 mr-2" />
+            Approve
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleRejectAll}
+            className="flex-1 text-red-400 border-red-400/30 hover:bg-red-400/10"
+          >
+            <XCircle className="w-4 h-4 mr-2" />
+            Reject
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/ui/select.tsx b/packages/cletus/src/browser/components/ui/select.tsx
index 68fd12e..b2c79e4 100644
--- a/packages/cletus/src/browser/components/ui/select.tsx
+++ b/packages/cletus/src/browser/components/ui/select.tsx
@@ -2,8 +2,8 @@ import React, { useState, useRef, useEffect } from 'react';
 import { cn } from '../../lib/utils';
 import { ChevronDown, Check } from 'lucide-react';
 
-export interface SelectOption {
-  value: string;
+export interface SelectOption<V extends string = string> {
+  value: V;
   label: string;
   description?: string;
   disabled?: boolean;
diff --git a/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx b/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
index 9ce4b81..769ea35 100644
--- a/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
+++ b/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
@@ -148,13 +148,12 @@ export const BaseOperationDisplay: React.FC<BaseOperationDisplayProps> = ({
 
       {/* Summary */}
       {displaySummary && (
-        <div className={cn('ml-6 text-sm mb-2', operation.error ? 'text-red-400' : 'text-muted-foreground')}>
+        <div className={cn('ml-6 text-sm mb-2 whitespace-pre-wrap', operation.error ? 'text-red-400' : 'text-muted-foreground')}>
           {typeof displaySummary === 'string' ? (
             <>
               <span className="text-foreground">→ </span>
               <ReactMarkdown
                 remarkPlugins={[remarkGfm]}
-                className="inline"
                 components={{
                   p: ({ children }) => <span>{children}</span>,
                 }}
diff --git a/packages/cletus/src/browser/operations/index.tsx b/packages/cletus/src/browser/operations/index.tsx
index d321c3c..f77c2f7 100644
--- a/packages/cletus/src/browser/operations/index.tsx
+++ b/packages/cletus/src/browser/operations/index.tsx
@@ -17,8 +17,6 @@ import * as secretary from './secretary';
  */
 const OperationRenderers: Partial<Record<OperationKind, React.FC<{
   operation: Operation;
-  showInput?: boolean;
-  showOutput?: boolean;
 }>>> = {
   // Clerk operations
   ...clerk,
@@ -47,8 +45,6 @@ const OperationRenderers: Partial<Record<OperationKind, React.FC<{
 
 interface OperationDisplayProps {
   operation: Operation;
-  showInput?: boolean;
-  showOutput?: boolean;
 }
 
 /**
diff --git a/packages/cletus/src/browser/operations/render.tsx b/packages/cletus/src/browser/operations/render.tsx
index 1fda471..02ecd21 100644
--- a/packages/cletus/src/browser/operations/render.tsx
+++ b/packages/cletus/src/browser/operations/render.tsx
@@ -40,8 +40,6 @@ export function getElapsedTime(op: Operation): string {
 
 interface OperationDisplayProps {
   operation: Operation;
-  showInput?: boolean;
-  showOutput?: boolean;
 }
 
 /**
diff --git a/packages/cletus/src/browser/pages/ChatPage.tsx b/packages/cletus/src/browser/pages/ChatPage.tsx
index ee1d02c..3c747f9 100644
--- a/packages/cletus/src/browser/pages/ChatPage.tsx
+++ b/packages/cletus/src/browser/pages/ChatPage.tsx
@@ -11,7 +11,9 @@ import { ModelSelector } from '../components/ModelSelector';
 import { CommandsPanel } from '../components/CommandsPanel';
 import { ChatSettingsDialog } from '../components/ChatSettingsDialog';
 import { TodosModal } from '../components/TodosModal';
-import type { Message, Config, ChatMeta } from '../../schemas';
+import { OperationApprovalPanel } from '../components/OperationApprovalPanel';
+import type { Message, Config, ChatMeta, ChatMode } from '../../schemas';
+import type { ClientMessage, ServerMessage } from '../websocket-types';
 import { sendClientMessage } from '../websocket-types';
 
 interface ChatPageProps {
@@ -33,48 +35,27 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
   const [totalCost, setTotalCost] = useState(0);
   const [chatMetaState, setChatMetaState] = useState<ChatMeta | null>(null);
   const wsRef = useRef<WebSocket | null>(null);
+  const modelsResolverRef = useRef<{
+    resolve: (models: any[]) => void;
+    reject: (error: Error) => void;
+  } | null>(null);
 
   const chatMeta = chatMetaState || config.chats.find((c) => c.id === chatId);
 
+  // Single WebSocket connection for the entire component
   useEffect(() => {
-    // Connect to WebSocket and get messages
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const ws = new WebSocket(`${protocol}//${window.location.host}`);
 
     ws.onopen = () => {
-      ws.send(JSON.stringify({
-        type: 'get_messages',
-        data: { chatId },
-      }));
+      console.log('WebSocket connected');
+      // Load initial messages
+      sendClientMessage(ws, { type: 'get_messages', data: { chatId } });
     };
 
     ws.onmessage = (event) => {
-      const message = JSON.parse(event.data);
-
-      switch (message.type) {
-        case 'messages':
-          setMessages(message.data.messages || []);
-          setLoading(false);
-          ws.close();
-          break;
-        case 'chat_updated':
-          // Update local chat meta when server sends updates
-          if (message.data.chat) {
-            setChatMetaState(message.data.chat);
-            onConfigChange(); // Refresh parent config
-          }
-          break;
-        case 'usage_update':
-          if (message.data.accumulatedCost !== undefined) {
-            setTotalCost(message.data.accumulatedCost);
-          }
-          break;
-        case 'error':
-          console.error('Error loading messages:', message.data.message);
-          setLoading(false);
-          ws.close();
-          break;
-      }
+      const message = JSON.parse(event.data) as ServerMessage;
+      handleServerMessage(message);
     };
 
     ws.onerror = (error) => {
@@ -82,6 +63,10 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
       setLoading(false);
     };
 
+    ws.onclose = () => {
+      console.log('WebSocket closed');
+    };
+
     wsRef.current = ws;
 
     return () => {
@@ -91,34 +76,37 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
     };
   }, [chatId]);
 
-  const handleWebSocketMessage = (message: any) => {
+  const handleServerMessage = (message: ServerMessage) => {
     switch (message.type) {
+      case 'messages':
+        setMessages(message.data.messages || []);
+        setLoading(false);
+        break;
+
       case 'message_added':
-        // User message was added - reload to get it
-        handleMessagesUpdate();
+        // User message was added - reload messages
+        if (wsRef.current) {
+          sendClientMessage(wsRef.current, { type: 'get_messages', data: { chatId } });
+        }
         break;
 
       case 'pending_update':
-        // Show pending assistant message
         setPendingMessage(message.data.pending);
         break;
 
       case 'message_updated':
-        // Update existing message (usually user message with usage info)
         setMessages(prev => prev.map(msg =>
           msg.created === message.data.message.created ? message.data.message : msg
         ));
         break;
 
       case 'messages_updated':
-        // Server sent updated messages list
         if (message.data.messages) {
           setMessages(message.data.messages);
         }
         break;
 
       case 'response_complete':
-        // Assistant response is complete - add the final message
         setPendingMessage(null);
         if (message.data.message) {
           setMessages(prev => [...prev, message.data.message]);
@@ -137,119 +125,115 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
           onConfigChange();
         }
         break;
-    }
-  };
 
-  const handleMessagesUpdate = async () => {
-    // Reload messages from server
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const ws = new WebSocket(`${protocol}//${window.location.host}`);
+      case 'status_update':
+        // Status updates can be handled here if needed
+        break;
 
-    ws.onopen = () => {
-      ws.send(JSON.stringify({
-        type: 'get_messages',
-        data: { chatId },
-      }));
-    };
+      case 'elapsed_update':
+        // Elapsed time updates can be handled here if needed
+        break;
 
-    ws.onmessage = (event) => {
-      const message = JSON.parse(event.data);
-      if (message.type === 'messages') {
-        setMessages(message.data.messages || []);
-        ws.close();
-      } else if (message.type === 'error') {
-        console.error('Error refreshing messages:', message.data.message);
-        ws.close();
-      }
-    };
-  };
+      case 'models':
+        // Resolve the pending models promise if one exists
+        if (modelsResolverRef.current) {
+          modelsResolverRef.current.resolve(message.data.models || []);
+          modelsResolverRef.current = null;
+        }
+        break;
 
-  const sendWebSocketMessage = (type: string, data: any) => {
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const ws = new WebSocket(`${protocol}//${window.location.host}`);
+      case 'chat_deleted':
+        // Chat was deleted
+        break;
 
-    ws.onopen = () => {
-      ws.send(JSON.stringify({ type, data }));
-    };
+      case 'error':
+        console.error('Server error:', message.data.message);
+        // Reject the pending models promise if one exists
+        if (modelsResolverRef.current) {
+          modelsResolverRef.current.reject(new Error(message.data.message));
+          modelsResolverRef.current = null;
+        }
+        setLoading(false);
+        break;
 
-    ws.onmessage = (event) => {
-      const message = JSON.parse(event.data);
-      if (message.type === 'chat_updated' && message.data.chat) {
-        setChatMetaState(message.data.chat);
-        onConfigChange();
-      }
-      ws.close();
-    };
+      default:
+        console.warn('Unhandled message type:', (message as any).type);
+    }
+  };
+
+  const send = (message: ClientMessage) => {
+    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+      sendClientMessage(wsRef.current, message);
+    } else {
+      console.error('WebSocket not connected');
+    }
   };
 
-  const handleModeChange = (mode: string) => {
-    sendWebSocketMessage('update_chat_meta', { chatId, updates: { mode } });
+  const handleModeChange = (mode: ChatMode) => {
+    send({ type: 'update_chat_meta', data: { chatId, updates: { mode } } });
   };
 
-  const handleAgentModeChange = (agentMode: string) => {
-    sendWebSocketMessage('update_chat_meta', { chatId, updates: { agentMode } });
+  const handleAgentModeChange = (agentMode: 'plan' | 'default' | undefined) => {
+    send({ type: 'update_chat_meta', data: { chatId, updates: { agentMode } } });
   };
 
   const handleAssistantChange = (assistant: string) => {
     const assistantValue = assistant === 'none' ? undefined : assistant;
-    sendWebSocketMessage('update_chat_meta', { chatId, updates: { assistant: assistantValue } });
+    send({ type: 'update_chat_meta', data: { chatId, updates: { assistant: assistantValue } } });
   };
 
   const handleModelChange = (model: string) => {
-    sendWebSocketMessage('update_chat_meta', { chatId, updates: { model } });
+    send({ type: 'update_chat_meta', data: { chatId, updates: { model } } });
   };
 
   const handleFetchModels = async (): Promise<any[]> => {
     return new Promise((resolve, reject) => {
-      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-      const ws = new WebSocket(`${protocol}//${window.location.host}`);
-
-      ws.onopen = () => {
-        sendClientMessage(ws, { type: 'get_models' });
-      };
-
-      ws.onmessage = (event) => {
-        const message = JSON.parse(event.data);
-        if (message.type === 'models') {
-          resolve(message.data.models || []);
-          ws.close();
-        } else if (message.type === 'error') {
-          reject(new Error(message.data.message));
-          ws.close();
+      if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+        reject(new Error('WebSocket not connected'));
+        return;
+      }
+
+      // Store the promise resolver for handleServerMessage to use
+      modelsResolverRef.current = { resolve, reject };
+
+      // Set up timeout
+      const timeout = setTimeout(() => {
+        if (modelsResolverRef.current) {
+          modelsResolverRef.current.reject(new Error('Timeout fetching models'));
+          modelsResolverRef.current = null;
         }
-      };
+      }, 10000);
 
-      ws.onerror = () => {
-        reject(new Error('Failed to fetch models'));
-      };
+      // Send the request
+      sendClientMessage(wsRef.current, { type: 'get_models' });
     });
   };
 
   const handleChatSettingsSave = (updates: { title?: string; prompt?: string; cwd?: string }) => {
-    sendWebSocketMessage('update_chat_meta', { chatId, updates });
+    send({ type: 'update_chat_meta', data: { chatId, updates } });
   };
 
   const handleAddTodo = (todo: string) => {
-    sendWebSocketMessage('add_todo', { chatId, todo });
+    send({ type: 'add_todo', data: { chatId, todo } });
   };
 
   const handleToggleTodo = (index: number) => {
-    sendWebSocketMessage('toggle_todo', { chatId, index });
+    send({ type: 'toggle_todo', data: { chatId, index } });
   };
 
   const handleRemoveTodo = (index: number) => {
-    sendWebSocketMessage('remove_todo', { chatId, index });
+    send({ type: 'remove_todo', data: { chatId, index } });
   };
 
   const handleClearTodos = () => {
     if (confirm('Are you sure you want to clear all todos?')) {
-      sendWebSocketMessage('clear_todos', { chatId });
+      send({ type: 'clear_todos', data: { chatId } });
     }
   };
 
   const handleClearMessages = () => {
     if (showClearConfirm) {
-      sendWebSocketMessage('clear_messages', { chatId });
+      send({ type: 'clear_messages', data: { chatId } });
       setMessages([]);
       setShowClearConfirm(false);
     } else {
@@ -259,12 +243,35 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
 
   const handleDeleteChat = () => {
     if (confirm(`Are you sure you want to delete "${chatMeta?.title}"? This cannot be undone.`)) {
-      sendWebSocketMessage('delete_chat', { chatId });
+      send({ type: 'delete_chat', data: { chatId } });
       // Navigate back after deletion
       setTimeout(() => onBack(), 500);
     }
   };
 
+  const handleMessagesUpdate = () => {
+    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+      sendClientMessage(wsRef.current, { type: 'get_messages', data: { chatId } });
+    }
+  };
+
+  const handleOperationApproval = (message: Message, approved: number[], rejected: number[]) => {
+    send({
+      type: 'handle_operations',
+      data: {
+        chatId,
+        messageCreated: message.created,
+        approved,
+        rejected,
+      },
+    });
+  };
+
+  // Check if there are any messages with operations needing approval
+  const hasOperationsNeedingApproval = messages.some(msg =>
+    msg.operations?.some(op => op.status === 'analyzed')
+  );
+
   if (!chatMeta) {
     return (
       <div className="flex h-screen items-center justify-center bg-background">
@@ -353,10 +360,21 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
             <ScrollArea className="flex-1 p-6">
               <MessageList
                 messages={pendingMessage ? [...messages, pendingMessage] : messages}
-                showInput={config.user.showInput ?? false}
-                showOutput={config.user.showOutput ?? false}
-                onMessagesUpdate={setMessages}
               />
+
+              {/* Show approval panels for messages with operations needing approval */}
+              {messages.map(msg => {
+                const needsApproval = msg.operations?.some(op => op.status === 'analyzed');
+                if (!needsApproval) return null;
+
+                return (
+                  <OperationApprovalPanel
+                    key={msg.created}
+                    message={msg}
+                    onApproveReject={(approved, rejected) => handleOperationApproval(msg, approved, rejected)}
+                  />
+                );
+              })}
             </ScrollArea>
 
             {/* Input Area */}
@@ -368,7 +386,7 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
                 messageCount={messages.length}
                 totalCost={totalCost}
                 onMessageSent={handleMessagesUpdate}
-                onWebSocketMessage={handleWebSocketMessage}
+                onWebSocketMessage={handleServerMessage}
               />
             </div>
           </>
@@ -393,7 +411,7 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
         <ChatSettingsDialog
           title={chatMeta.title}
           prompt={chatMeta.prompt}
-          cwd={chatMeta.cwd}
+          cwd={undefined}
           onSave={handleChatSettingsSave}
           onClose={() => setShowChatSettings(false)}
         />
diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
index d34f519..ba8a742 100644
--- a/packages/cletus/src/browser/server.ts
+++ b/packages/cletus/src/browser/server.ts
@@ -8,6 +8,10 @@ import { ConfigFile } from '../config';
 import { ChatFile } from '../chat';
 import type { Message, ChatMeta, MessageContent } from '../schemas';
 import type { ClientMessage, ServerMessage } from './websocket-types';
+import { OperationManager } from '../operations/manager';
+import { CletusAI, createCletusAI } from '../ai';
+import { CletusChatAgent, createChatAgent } from '../agents/chat-agent';
+import { runChatOrchestrator } from '../agents/chat-orchestrator';
 
 const __serverFilename = fileURLToPath(import.meta.url);
 const __serverDirname = path.dirname(__serverFilename);
@@ -82,7 +86,10 @@ export async function startBrowserServer(port: number = 3000): Promise<void> {
     ws.on('close', () => {
       clients.delete(ws);
     });
-    handleWebSocketConnection(ws);
+    handleWebSocketConnection(ws).catch(error => {
+      console.error('WebSocket connection error:', error);
+      ws.close();
+    });
   });
 
   server.listen(port, '127.0.0.1', () => {
@@ -116,8 +123,11 @@ export async function startBrowserServer(port: number = 3000): Promise<void> {
   });
 }
 
-function handleWebSocketConnection(ws: WebSocket): void {
+async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
   let config: ConfigFile | null = null;
+  let configPromise: Promise<boolean> | null = null;
+  let ai: CletusAI | null = null;
+  let chatAgent: CletusChatAgent | null = null;
   let abortController: AbortController | null = null;
 
   // Type-safe message sender
@@ -125,43 +135,118 @@ function handleWebSocketConnection(ws: WebSocket): void {
     ws.send(JSON.stringify(message));
   };
 
+  // Helper to send errors
+  const sendError = (e: any, message: string = typeof e === 'string' ? e : e.message) => {
+    sendMessage({
+      type: 'error',
+      data: { message },
+    });
+
+    console.error(e);
+  };
+
+  // Load config once at connection time
+  const ensureConfig = async () => {
+    if (!configPromise) {
+      configPromise = (async () => {
+        const exists = await configExists();
+        if (!exists) {
+          return false;
+        }
+        config = new ConfigFile();
+        await config.load();
+        return true;
+      })();
+    }
+    return await configPromise;
+  };
+
+  // Lazy-load AI and chat agent once
+  const ensureAI = async () => {
+    if (!ai || !chatAgent) {
+      await ensureConfig();
+      if (!config) {
+        throw new Error('Config not available');
+      }
+      ai = createCletusAI(config);
+      chatAgent = createChatAgent(ai);
+    }
+    return { ai, chatAgent };
+  };
+
+  const withConfig = async <T>(fn: (config: ConfigFile) => T) => {
+    try {
+      if (!await ensureConfig()) {
+        sendMessage({
+          type: 'config_not_found',
+          data: {},
+        });
+        return;
+      }
+    } catch (e: any) {
+      sendError(e);
+      return;
+    }
+
+    // Ensure config is loaded
+    if (config) {
+      try {
+        return await fn(config);
+      } catch (e: any) {
+        sendError(e);
+      }
+    } else {
+      sendMessage({
+        type: 'config_not_found',
+        data: {},
+      });
+    }
+  };
+
+  const withChatFile = async <T>(chatId: string, fn: (chatFile: ChatFile, chat: ChatMeta, config: ConfigFile) => T) => {
+    return await withConfig(async (config) => {
+      let chatFile: ChatFile;
+      try {
+        chatFile = await getChat(chatId);
+      } catch (e: any) {
+        sendError(e, 'Failed to load chat file');
+        return;
+      }
+
+      const chat = config.getChats().find(c => c.id === chatId);
+      if (!chat) {
+        sendError('Chat not found');
+
+        return;
+      }
+
+      try {
+        return await fn(chatFile, chat, config);
+      } catch (e: any) {
+        sendError(e, 'Failed to process chat file');
+      }
+    });
+  };
+
   ws.on('message', async (data) => {
     try {
       const message = JSON.parse(data.toString()) as ClientMessage;
 
       switch (message.type) {
         case 'get_config':
-          try {
-            const exists = await configExists();
-            if (!exists) {
-              sendMessage({
-                type: 'config_not_found',
-                data: {},
-              });
-              return;
-            }
-
-            const configFile = new ConfigFile();
-            await configFile.load();
-            const configData = configFile.getData();
+          withConfig((config) => {
+            const configData = config.getData();
 
             sendMessage({
               type: 'config',
               data: configData,
             });
-          } catch (error) {
-            sendMessage({
-              type: 'error',
-              data: { message: 'Failed to load config' },
-            });
-          }
+          });
           break;
 
-        case 'create_chat':
-          try {
-            const { name } = message.data;
-            const configFile = new ConfigFile();
-            await configFile.load();
+        case 'create_chat': {
+          const { name } = message.data;
+          await withConfig(async (config) => {
 
             // Generate chat ID and create new chat
             const now = Date.now();
@@ -181,7 +266,7 @@ function handleWebSocketConnection(ws: WebSocket): void {
               model: undefined,
             };
 
-            await configFile.addChat(newChat);
+            await config.addChat(newChat);
 
             // Create the chat messages file
             const chatFile = new ChatFile(chatId);
@@ -193,21 +278,12 @@ function handleWebSocketConnection(ws: WebSocket): void {
               type: 'chat_created',
               data: { chatId },
             });
-          } catch (error) {
-            sendMessage({
-              type: 'error',
-              data: { message: 'Failed to create chat' },
-            });
-          }
+          });
           break;
-
-        case 'init_chat':
-          try {
-            const { chatId } = message.data;
-            config = new ConfigFile();
-            await config.load();
-            const chatFile = await getChat(chatId);
-
+        }
+        case 'init_chat': {
+          const { chatId } = message.data;
+          await withChatFile(chatId, async (chatFile, _, config) => {
             sendMessage({
               type: 'chat_initialized',
               data: {
@@ -215,45 +291,25 @@ function handleWebSocketConnection(ws: WebSocket): void {
                 chat: config.getChats().find(c => c.id === chatId),
               },
             });
-          } catch (error) {
-            sendMessage({
-              type: 'error',
-              data: { message: 'Failed to initialize chat' },
-            });
-          }
+          });
           break;
-
-        case 'get_messages':
-          try {
-            const { chatId } = message.data;
-            const chatFile = await getChat(chatId);
+        }
+        case 'get_messages': {
+          const { chatId } = message.data;
+          await withChatFile(chatId, async (chatFile) => {
             const messages = chatFile.getMessages();
 
             sendMessage({
               type: 'messages',
               data: { messages },
             });
-          } catch (error) {
-            sendMessage({
-              type: 'error',
-              data: { message: 'Failed to load messages' },
-            });
-          }
+          });
           break;
-
-        case 'send_message':
-          if (!config) {
-            sendMessage({
-              type: 'error',
-              data: { message: 'Config not loaded' },
-            });
-            return;
-          }
-
-          try {
-            const { chatId, content } = message.data;
-            const chatFile = await getChat(chatId);
-
+        }
+        case 'send_message': {
+          const { chatId, content } = message.data;
+          await withChatFile(chatId, async (chatFile, chat, config) => {
+              
             // Validate content is an array of MessageContent
             if (!Array.isArray(content)) {
               sendMessage({
@@ -263,15 +319,6 @@ function handleWebSocketConnection(ws: WebSocket): void {
               return;
             }
 
-            const chat = config.getChats().find(c => c.id === chatFile!.id);
-            if (!chat) {
-              sendMessage({
-                type: 'error',
-                data: { message: 'Chat not found' },
-              });
-              return;
-            }
-
             // Add user message with proper typing
             const userMessage: Omit<Message, 'created'> = {
               role: 'user',
@@ -287,13 +334,8 @@ function handleWebSocketConnection(ws: WebSocket): void {
             // Process AI response
             abortController = new AbortController();
 
-            // Lazy-load AI components
-            const { createCletusAI } = await import('../ai');
-            const { createChatAgent } = await import('../agents/chat-agent');
-            const { runChatOrchestrator } = await import('../agents/chat-orchestrator');
-
-            const ai = createCletusAI(config);
-            const chatAgent = createChatAgent(ai);
+            // Ensure AI and chat agent are loaded
+            const { ai: aiInstance, chatAgent: chatAgentInstance } = await ensureAI();
 
             const chatStatus = (status: string) => {
               sendMessage({
@@ -302,15 +344,8 @@ function handleWebSocketConnection(ws: WebSocket): void {
               });
             };
 
-            const onRefreshChat = () => {
-              sendMessage({
-                type: 'messages_updated',
-                data: { messages: chatFile!.getMessages() },
-              });
-            };
-
             const clearUsage = () => {
-              const defaultContext = ai.config.defaultContext;
+              const defaultContext = aiInstance.config.defaultContext;
               if (defaultContext && defaultContext.usage) {
                 defaultContext.usage.accumulated = {};
                 defaultContext.usage.accumulatedCost = 0;
@@ -318,7 +353,7 @@ function handleWebSocketConnection(ws: WebSocket): void {
             };
 
             const getUsage = () => {
-              const defaultContext = ai.config.defaultContext;
+              const defaultContext = aiInstance.config.defaultContext;
               if (defaultContext && defaultContext.usage) {
                 return {
                   accumulated: defaultContext.usage.accumulated,
@@ -329,7 +364,7 @@ function handleWebSocketConnection(ws: WebSocket): void {
             };
 
             await runChatOrchestrator({
-              chatAgent,
+              chatAgent: chatAgentInstance,
               messages: chatFile.getMessages(),
               chatMeta: chat,
               config,
@@ -337,10 +372,6 @@ function handleWebSocketConnection(ws: WebSocket): void {
               signal: abortController.signal,
               clearUsage,
               getUsage,
-              events: {
-                onRefreshChat,
-                onRefreshPending: onRefreshChat,
-              },
             }, (event) => {
               // Handle orchestrator events
               switch (event.type) {
@@ -351,6 +382,7 @@ function handleWebSocketConnection(ws: WebSocket): void {
                   });
                   break;
                 case 'update':
+                  fireAndForget(chatFile.updateMessage(event.message));
                   sendMessage({
                     type: 'message_updated',
                     data: { message: event.message },
@@ -377,10 +409,8 @@ function handleWebSocketConnection(ws: WebSocket): void {
                   break;
                 case 'complete':
                   // Add the complete message to chat file (like CLI does)
-                  if (event.message.content.length > 0 && chatFile) {
-                    chatFile.addMessage(event.message).catch((err) => {
-                      console.error('Failed to save complete message:', err);
-                    });
+                  if (event.message.content.length > 0) {
+                    fireAndForget(chatFile.addMessage(event.message))
                   }
                   // Send the complete message
                   sendMessage({
@@ -396,16 +426,12 @@ function handleWebSocketConnection(ws: WebSocket): void {
                   break;
               }
             });
-          } catch (error) {
-            if (error instanceof Error && error.name !== 'AbortError') {
-              sendMessage({
-                type: 'error',
-                data: { message: error.message },
-              });
-            }
-          }
-          break;
 
+            // Clear abort controller
+            abortController = null;
+          });
+          break;
+        }
         case 'cancel':
           if (abortController) {
             abortController.abort();
@@ -416,12 +442,8 @@ function handleWebSocketConnection(ws: WebSocket): void {
         case 'get_models':
           try {
             const { baseMetadata } = message.data || {};
-            // Lazy-load AI registry
-            const { createCletusAI } = await import('../ai');
-            const configFile = new ConfigFile();
-            await configFile.load();
-            const ai = createCletusAI(configFile);
-            const models = ai.registry.searchModels(baseMetadata || {});
+            const { ai: aiInstance } = await ensureAI();
+            const models = aiInstance.registry.searchModels(baseMetadata || {});
 
             sendMessage({
               type: 'models',
@@ -435,118 +457,83 @@ function handleWebSocketConnection(ws: WebSocket): void {
           }
           break;
 
-        case 'update_chat_meta':
-          try {
-            const { chatId, updates } = message.data;
-            const configFile = new ConfigFile();
-            await configFile.load();
-            await configFile.updateChat(chatId, updates);
-            const updatedChat = configFile.getChats().find(c => c.id === chatId);
+        case 'update_chat_meta': {
+          const { chatId, updates } = message.data;
+          withConfig(async (config) => {
+              
+            await config.updateChat(chatId, updates);
+            const updatedChat = config.getChats().find(c => c.id === chatId);
 
             sendMessage({
               type: 'chat_updated',
               data: { chat: updatedChat },
             });
-          } catch (error) {
-            sendMessage({
-              type: 'error',
-              data: { message: 'Failed to update chat metadata' },
-            });
-          }
+          });
           break;
-
-        case 'add_todo':
-          try {
-            const { chatId, todo } = message.data;
-            const configFile = new ConfigFile();
-            await configFile.load();
-            const chat = configFile.getChats().find(c => c.id === chatId);
+        }
+        case 'add_todo': {
+          const { chatId, todo } = message.data;
+          withConfig(async (config) => {
+            const chat = config.getChats().find(c => c.id === chatId);
             if (chat) {
               chat.todos.push({ id: Math.random().toString(36).substring(7), name: todo, done: false });
-              await configFile.updateChat(chatId, { todos: chat.todos });
-              const updatedChat = configFile.getChats().find(c => c.id === chatId);
+              await config.updateChat(chatId, { todos: chat.todos });
+              const updatedChat = config.getChats().find(c => c.id === chatId);
               sendMessage({
                 type: 'chat_updated',
                 data: { chat: updatedChat },
               });
             }
-          } catch (error) {
-            sendMessage({
-              type: 'error',
-              data: { message: 'Failed to add todo' },
-            });
-          }
+          });
           break;
-
-        case 'toggle_todo':
-          try {
-            const { chatId, index } = message.data;
-            const configFile = new ConfigFile();
-            await configFile.load();
-            const chat = configFile.getChats().find(c => c.id === chatId);
+        }
+        case 'toggle_todo': {
+          const { chatId, index } = message.data;
+          withConfig(async (config) => {
+            const chat = config.getChats().find(c => c.id === chatId);
             if (chat && chat.todos[index]) {
               chat.todos[index].done = !chat.todos[index].done;
-              await configFile.updateChat(chatId, { todos: chat.todos });
-              const updatedChat = configFile.getChats().find(c => c.id === chatId);
+              await config.updateChat(chatId, { todos: chat.todos });
+              const updatedChat = config.getChats().find(c => c.id === chatId);
               sendMessage({
                 type: 'chat_updated',
                 data: { chat: updatedChat },
               });
             }
-          } catch (error) {
-            sendMessage({
-              type: 'error',
-              data: { message: 'Failed to toggle todo' },
-            });
-          }
+          });
           break;
-
-        case 'remove_todo':
-          try {
-            const { chatId, index } = message.data;
-            const configFile = new ConfigFile();
-            await configFile.load();
-            const chat = configFile.getChats().find(c => c.id === chatId);
+        }
+        case 'remove_todo': {
+          const { chatId, index } = message.data;
+          withConfig(async (config) => {
+            const chat = config.getChats().find(c => c.id === chatId);
             if (chat && chat.todos[index] !== undefined) {
               chat.todos.splice(index, 1);
-              await configFile.updateChat(chatId, { todos: chat.todos });
-              const updatedChat = configFile.getChats().find(c => c.id === chatId);
+              await config.updateChat(chatId, { todos: chat.todos });
+              const updatedChat = config.getChats().find(c => c.id === chatId);
               sendMessage({
                 type: 'chat_updated',
                 data: { chat: updatedChat },
               });
             }
-          } catch (error) {
-            sendMessage({
-              type: 'error',
-              data: { message: 'Failed to remove todo' },
-            });
-          }
+          });
           break;
-
-        case 'clear_todos':
-          try {
-            const { chatId } = message.data;
-            const configFile = new ConfigFile();
-            await configFile.load();
-            await configFile.updateChat(chatId, { todos: [] });
-            const updatedChat = configFile.getChats().find(c => c.id === chatId);
+        }
+        case 'clear_todos': {
+          const { chatId } = message.data;
+          withConfig(async (config) => {
+            await config.updateChat(chatId, { todos: [] });
+            const updatedChat = config.getChats().find(c => c.id === chatId);
             sendMessage({
               type: 'chat_updated',
               data: { chat: updatedChat },
             });
-          } catch (error) {
-            sendMessage({
-              type: 'error',
-              data: { message: 'Failed to clear todos' },
-            });
-          }
+          });
           break;
-
-        case 'clear_messages':
-          try {
-            const { chatId } = message.data;
-            const chatFile = await getChat(chatId);
+        }
+        case 'clear_messages': {
+          const { chatId } = message.data;
+          withChatFile(chatId, async (chatFile) => {
             await chatFile.save((data) => {
               data.messages = [];
             });
@@ -554,33 +541,75 @@ function handleWebSocketConnection(ws: WebSocket): void {
               type: 'messages_updated',
               data: { messages: [] },
             });
-          } catch (error) {
-            sendMessage({
-              type: 'error',
-              data: { message: 'Failed to clear messages' },
-            });
-          }
+          });
           break;
-
-        case 'delete_chat':
-          try {
-            const { chatId } = message.data;
-            const configFile = new ConfigFile();
-            await configFile.load();
-            await configFile.deleteChat(chatId);
+        }
+        case 'delete_chat': {
+          const { chatId } = message.data;
+          withConfig(async (config) => {
+            await config.deleteChat(chatId);
             removeChat(chatId); // Remove from cache
             sendMessage({
               type: 'chat_deleted',
               data: { chatId },
             });
-          } catch (error) {
+          });
+          break;
+        }
+        case 'handle_operations': {
+          const { chatId, messageCreated, approved, rejected } = message.data;
+          withChatFile(chatId, async (chatFile, chatMeta) => {
+            const messages = chatFile.getMessages();
+            const targetMessage = messages.find(m => m.created === messageCreated);
+          
+            if (!targetMessage || !targetMessage.operations) {
+              sendMessage({
+                type: 'error',
+                data: { message: 'Message or operations not found' },
+              });
+              return;
+            }
+
+            const operations = targetMessage.operations;
+            const manager = new OperationManager('none', operations);
+
+            // Mark rejected operations
+            for (const idx of rejected) {
+              if (operations[idx]) {
+                operations[idx].status = 'rejected';
+                manager.updateMessage(operations[idx]);
+              }
+            }
+
+            // Execute approved operations
+            if (approved.length > 0) {
+              const { ai } = await ensureAI();
+              const ctx = await ai.buildContext({
+                chat: chatMeta,
+                chatData: chatFile,
+                chatMessage: targetMessage,
+              });
+
+              for (const idx of approved) {
+                if (operations[idx]) {
+                  await manager.execute(operations[idx], true, ctx);
+                }
+              }
+            }
+
+            // Save updated message
+            await chatFile.save(d => {
+              d.messages = messages.map(m => m.created === messageCreated ? targetMessage : m);
+            });
+
+            // Send updated message back to client
             sendMessage({
-              type: 'error',
-              data: { message: 'Failed to delete chat' },
+              type: 'message_updated',
+              data: { message: targetMessage },
             });
-          }
+          });
           break;
-
+        }
         default:
           sendMessage({
             type: 'error',
@@ -649,3 +678,9 @@ async function serveStaticFile(url: string, res: http.ServerResponse): Promise<v
     }
   }
 }
+
+function fireAndForget<T>(promise: Promise<T>): void {
+  promise.catch((error) => {
+    console.error('Uncaught error:', error);
+  });
+}
\ No newline at end of file
diff --git a/packages/cletus/src/browser/websocket-types.ts b/packages/cletus/src/browser/websocket-types.ts
index 80beb88..ddaeebf 100644
--- a/packages/cletus/src/browser/websocket-types.ts
+++ b/packages/cletus/src/browser/websocket-types.ts
@@ -19,7 +19,8 @@ export type ClientMessage =
   | { type: 'clear_todos'; data: { chatId: string } }
   | { type: 'clear_messages'; data: { chatId: string } }
   | { type: 'delete_chat'; data: { chatId: string } }
-  | { type: 'get_models'; data?: { baseMetadata?: any } };
+  | { type: 'get_models'; data?: { baseMetadata?: any } }
+  | { type: 'handle_operations'; data: { chatId: string; messageCreated: number; approved: number[]; rejected: number[] } };
 
 // Server -> Client Messages
 export type ServerMessage =
diff --git a/packages/cletus/src/chat.ts b/packages/cletus/src/chat.ts
index bae8dff..87b5ef9 100644
--- a/packages/cletus/src/chat.ts
+++ b/packages/cletus/src/chat.ts
@@ -38,6 +38,18 @@ export class ChatFile extends JsonFile<ChatMessages> {
     });
   }
 
+  /**
+   * Update a message in the chat
+   */
+  async updateMessage(message: Message): Promise<void> {
+    await this.save((chat) => {
+      const index = chat.messages.findIndex((m) => m.created === message.created);
+      if (index !== -1) {
+        chat.messages[index] = message;
+      }
+    });
+  }
+
   /**
    * Get all messages
    */
diff --git a/packages/cletus/tsconfig.browser.json b/packages/cletus/tsconfig.browser.json
new file mode 100644
index 0000000..e9e78de
--- /dev/null
+++ b/packages/cletus/tsconfig.browser.json
@@ -0,0 +1,16 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "jsx": "react"
+  },
+  "include": [
+    "src/browser/**/*"
+  ],
+  "exclude": [
+    "src/browser/server.ts",
+    "src/browser/**/__tests__",
+    "src/browser/**/*.test.ts",
+    "src/browser/**/*.test.tsx"
+  ]
+}
diff --git a/packages/cletus/tsconfig.json b/packages/cletus/tsconfig.json
index 5fff080..c51175e 100644
--- a/packages/cletus/tsconfig.json
+++ b/packages/cletus/tsconfig.json
@@ -7,7 +7,12 @@
     "composite": false
   },
   "include": ["src/**/*"],
-  "exclude": ["src/**/__tests__", "src/**/*.test.ts", "src/**/*.test.tsx"],
+  "exclude": [
+    "src/**/__tests__",
+    "src/**/*.test.ts",
+    "src/**/*.test.tsx",
+    "src/browser/**/*"
+  ],
   "references": [
     { "path": "../core" },
     { "path": "../ai" },

From 1d2444fe8f4c13724ce83fe61c959161f2441542 Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Mon, 15 Dec 2025 10:10:06 -0500
Subject: [PATCH 10/27] Enhance chat settings and operation display UX

Adds folder picker for working directory in chat settings, improves chat title editing and message clearing confirmation in ChatPage, and synchronizes working directory (cwd) between client and server. Refactors BaseOperationDisplay to render JSON data in a more user-friendly HTML/table format. Updates websocket types and dba operation to support these changes.
---
 .../browser/components/ChatSettingsDialog.tsx |  40 ++-
 .../operations/BaseOperationDisplay.tsx       | 251 ++++++++++++++++--
 .../cletus/src/browser/pages/ChatPage.tsx     | 157 +++++++++--
 packages/cletus/src/browser/server.ts         |  28 +-
 .../cletus/src/browser/websocket-types.ts     |   4 +-
 packages/cletus/src/operations/dba.tsx        |   4 +-
 6 files changed, 428 insertions(+), 56 deletions(-)

diff --git a/packages/cletus/src/browser/components/ChatSettingsDialog.tsx b/packages/cletus/src/browser/components/ChatSettingsDialog.tsx
index 248c33e..f91e304 100644
--- a/packages/cletus/src/browser/components/ChatSettingsDialog.tsx
+++ b/packages/cletus/src/browser/components/ChatSettingsDialog.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
-import { X, Save, Settings } from 'lucide-react';
+import React, { useState, useEffect, useRef } from 'react';
+import { X, Save, Settings, FolderOpen } from 'lucide-react';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { Textarea } from './ui/textarea';
@@ -112,13 +112,35 @@ export const ChatSettingsDialog: React.FC<ChatSettingsDialogProps> = ({
               <label className="block text-sm font-medium text-foreground mb-2">
                 Working Directory
               </label>
-              <Input
-                type="text"
-                value={cwd}
-                onChange={(e) => setCwd(e.target.value)}
-                placeholder="Enter working directory path (optional)"
-                className="w-full font-mono text-sm"
-              />
+              <div className="flex items-center gap-2">
+                <Input
+                  type="text"
+                  value={cwd}
+                  onChange={(e) => setCwd(e.target.value)}
+                  placeholder="Enter working directory path (optional)"
+                  className="flex-1 font-mono text-sm"
+                />
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => {
+                    const input = document.createElement('input');
+                    input.type = 'file';
+                    input.webkitdirectory = true;
+                    input.onchange = (e: any) => {
+                      const files = e.target.files;
+                      if (files && files.length > 0) {
+                        const path = files[0].path || files[0].webkitRelativePath.split('/')[0];
+                        setCwd(path);
+                      }
+                    };
+                    input.click();
+                  }}
+                  title="Select folder"
+                >
+                  <FolderOpen className="w-4 h-4" />
+                </Button>
+              </div>
               <p className="text-xs text-muted-foreground mt-2">
                 Set the current working directory for file operations
               </p>
diff --git a/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx b/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
index 769ea35..77f9889 100644
--- a/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
+++ b/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
@@ -5,11 +5,177 @@ import { Operation } from '../../schemas';
 import { cn } from '../lib/utils';
 import { getStatusInfo, getElapsedTime } from './render';
 
+/**
+ * Checks if an array can be rendered as a table
+ */
+const canRenderAsTable = (data: any[]): boolean => {
+  if (data.length === 0) return false;
+
+  // All items must be objects
+  if (!data.every(item => item && typeof item === 'object' && !Array.isArray(item))) {
+    return false;
+  }
+
+  // Collect all unique keys
+  const allKeys = new Set<string>();
+  for (const item of data) {
+    Object.keys(item).forEach(key => allKeys.add(key));
+  }
+
+  // Must have <= 20 columns
+  if (allKeys.size > 20) return false;
+
+  // All values must be primitives (string, number, boolean, null, undefined)
+  for (const item of data) {
+    for (const value of Object.values(item)) {
+      if (value !== null && value !== undefined && typeof value === 'object') {
+        return false;
+      }
+    }
+  }
+
+  return true;
+};
+
+/**
+ * Renders a primitive value for table cells
+ */
+const renderPrimitiveValue = (value: any): React.ReactNode => {
+  if (value === null || value === undefined) {
+    return <span className="text-muted-foreground italic">null</span>;
+  }
+  if (typeof value === 'string') {
+    // Handle newlines in strings for table cells
+    const lines = value.split('\n');
+    return (
+      <span className="text-green-400">
+        {lines.map((line, i) => (
+          <React.Fragment key={i}>
+            {line}
+            {i < lines.length - 1 && <br />}
+          </React.Fragment>
+        ))}
+      </span>
+    );
+  }
+  if (typeof value === 'number') {
+    return <span className="text-blue-400">{value}</span>;
+  }
+  if (typeof value === 'boolean') {
+    return <span className="text-purple-400">{value.toString()}</span>;
+  }
+  return <span>{String(value)}</span>;
+};
+
+/**
+ * Renders JSON data in a friendly HTML format
+ */
+const renderJsonAsHtml = (data: any, depth: number = 0): React.ReactNode => {
+  if (data === null || data === undefined) {
+    return <span className="text-muted-foreground italic">null</span>;
+  }
+
+  if (typeof data === 'string') {
+    // Split by newlines and render each line
+    const lines = data.split('\n');
+    return (
+      <span className="text-green-400">
+        {lines.map((line, i) => (
+          <React.Fragment key={i}>
+            {line}
+            {i < lines.length - 1 && <br />}
+          </React.Fragment>
+        ))}
+      </span>
+    );
+  }
+
+  if (typeof data === 'number') {
+    return <span className="text-blue-400">{data}</span>;
+  }
+
+  if (typeof data === 'boolean') {
+    return <span className="text-purple-400">{data.toString()}</span>;
+  }
+
+  if (Array.isArray(data)) {
+    if (data.length === 0) {
+      return <span className="text-muted-foreground">[]</span>;
+    }
+
+    // Check if we can render as a table
+    if (canRenderAsTable(data)) {
+      // Collect all unique keys across all objects
+      const allKeys = new Set<string>();
+      data.forEach(item => {
+        Object.keys(item).forEach(key => allKeys.add(key));
+      });
+      const columns = Array.from(allKeys);
+
+      return (
+        <div className="overflow-x-auto">
+          <table className="w-full border-collapse text-xs">
+            <thead>
+              <tr className="border-b border-border">
+                {columns.map(col => (
+                  <th key={col} className="text-left p-2 text-cyan-400 font-semibold">
+                    {col}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {data.map((row, i) => (
+                <tr key={i} className="border-b border-border/50">
+                  {columns.map(col => (
+                    <td key={col} className="p-2">
+                      {renderPrimitiveValue(row[col])}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      );
+    }
+
+    // Default array rendering
+    return (
+      <div className="ml-4">
+        {data.map((item, i) => (
+          <div key={i} className="border-l border-border pl-2 my-1">
+            <span className="text-yellow-400">[{i}]:</span> {renderJsonAsHtml(item, depth + 1)}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (typeof data === 'object') {
+    const entries = Object.entries(data);
+    if (entries.length === 0) {
+      return <span className="text-muted-foreground">{'{}'}</span>;
+    }
+    return (
+      <div className="ml-4">
+        {entries.map(([key, value]) => (
+          <div key={key} className="border-l border-border pl-2 my-1">
+            <span className="text-cyan-400">{key}:</span> {renderJsonAsHtml(value, depth + 1)}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  return <span>{String(data)}</span>;
+};
+
 /**
  * Expandable details component with tabs
  */
 const OperationDetails: React.FC<{ operation: Operation }> = ({ operation }) => {
-  const [activeTab, setActiveTab] = useState<'input' | 'output' | 'analysis'>('input');
+  const [activeTab, setActiveTab] = useState<'input' | 'output' | 'inputJson' | 'outputJson' | 'analysis'>('input');
   const [isExpanded, setIsExpanded] = useState(false);
 
   const hasInput = operation.input !== undefined && operation.input !== null;
@@ -24,6 +190,8 @@ const OperationDetails: React.FC<{ operation: Operation }> = ({ operation }) =>
   const effectiveTab =
     (activeTab === 'input' && hasInput) ||
     (activeTab === 'output' && hasOutput) ||
+    (activeTab === 'inputJson' && hasInput) ||
+    (activeTab === 'outputJson' && hasOutput) ||
     (activeTab === 'analysis' && hasAnalysis)
       ? activeTab
       : hasInput
@@ -35,12 +203,12 @@ const OperationDetails: React.FC<{ operation: Operation }> = ({ operation }) =>
   return (
     <div className="ml-6 mt-2 border border-border rounded-lg overflow-hidden bg-muted/30">
       {/* Tabs */}
-      <div className="flex border-b border-border">
+      <div className="flex border-b border-border overflow-x-auto">
         {hasInput && (
           <button
             onClick={() => setActiveTab('input')}
             className={cn(
-              'px-3 py-1.5 text-xs font-semibold transition-colors',
+              'px-3 py-1.5 text-xs font-semibold transition-colors whitespace-nowrap',
               effectiveTab === 'input'
                 ? 'bg-muted text-foreground border-b-2 border-neon-cyan'
                 : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
@@ -53,7 +221,7 @@ const OperationDetails: React.FC<{ operation: Operation }> = ({ operation }) =>
           <button
             onClick={() => setActiveTab('output')}
             className={cn(
-              'px-3 py-1.5 text-xs font-semibold transition-colors',
+              'px-3 py-1.5 text-xs font-semibold transition-colors whitespace-nowrap',
               effectiveTab === 'output'
                 ? 'bg-muted text-foreground border-b-2 border-neon-cyan'
                 : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
@@ -62,11 +230,37 @@ const OperationDetails: React.FC<{ operation: Operation }> = ({ operation }) =>
             Output
           </button>
         )}
+        {hasInput && (
+          <button
+            onClick={() => setActiveTab('inputJson')}
+            className={cn(
+              'px-3 py-1.5 text-xs font-semibold transition-colors whitespace-nowrap',
+              effectiveTab === 'inputJson'
+                ? 'bg-muted text-foreground border-b-2 border-neon-cyan'
+                : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+            )}
+          >
+            Input (JSON)
+          </button>
+        )}
+        {hasOutput && (
+          <button
+            onClick={() => setActiveTab('outputJson')}
+            className={cn(
+              'px-3 py-1.5 text-xs font-semibold transition-colors whitespace-nowrap',
+              effectiveTab === 'outputJson'
+                ? 'bg-muted text-foreground border-b-2 border-neon-cyan'
+                : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+            )}
+          >
+            Output (JSON)
+          </button>
+        )}
         {hasAnalysis && (
           <button
             onClick={() => setActiveTab('analysis')}
             className={cn(
-              'px-3 py-1.5 text-xs font-semibold transition-colors',
+              'px-3 py-1.5 text-xs font-semibold transition-colors whitespace-nowrap',
               effectiveTab === 'analysis'
                 ? 'bg-muted text-foreground border-b-2 border-neon-cyan'
                 : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
@@ -77,29 +271,40 @@ const OperationDetails: React.FC<{ operation: Operation }> = ({ operation }) =>
         )}
         <button
           onClick={() => setIsExpanded(!isExpanded)}
-          className="ml-auto px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground"
+          className="ml-auto px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground whitespace-nowrap"
         >
           {isExpanded ? 'Collapse' : 'Expand'}
         </button>
       </div>
 
       {/* Content */}
-      <textarea
-        readOnly
-        value={
-          effectiveTab === 'input'
-            ? JSON.stringify(operation.input, null, 2)
-            : effectiveTab === 'output'
-            ? JSON.stringify(operation.output, null, 2)
-            : operation.analysis || ''
-        }
-        className={cn(
-          'w-full p-3 text-xs font-mono bg-black text-white border-0 resize-y overflow-auto',
-          'focus:outline-none focus:ring-2 focus:ring-neon-cyan/50',
-          isExpanded ? 'h-auto' : 'max-h-[12rem]'
-        )}
-        style={isExpanded ? { height: 'auto', minHeight: '12rem' } : { height: '12rem' }}
-      />
+      {effectiveTab === 'input' || effectiveTab === 'output' ? (
+        <div
+          className={cn(
+            'w-full p-3 text-xs font-mono bg-black text-white overflow-auto',
+            isExpanded ? 'min-h-[12rem]' : 'max-h-[12rem] h-[12rem]'
+          )}
+        >
+          {renderJsonAsHtml(effectiveTab === 'input' ? operation.input : operation.output)}
+        </div>
+      ) : (
+        <textarea
+          readOnly
+          value={
+            effectiveTab === 'inputJson'
+              ? JSON.stringify(operation.input, null, 2)
+              : effectiveTab === 'outputJson'
+              ? JSON.stringify(operation.output, null, 2)
+              : operation.analysis || ''
+          }
+          className={cn(
+            'w-full p-3 text-xs font-mono bg-black text-white border-0 resize-y overflow-auto',
+            'focus:outline-none focus:ring-2 focus:ring-neon-cyan/50',
+            isExpanded ? 'h-auto' : 'max-h-[12rem]'
+          )}
+          style={isExpanded ? { height: 'auto', minHeight: '12rem' } : { height: '12rem' }}
+        />
+      )}
     </div>
   );
 };
@@ -148,7 +353,7 @@ export const BaseOperationDisplay: React.FC<BaseOperationDisplayProps> = ({
 
       {/* Summary */}
       {displaySummary && (
-        <div className={cn('ml-6 text-sm mb-2 whitespace-pre-wrap', operation.error ? 'text-red-400' : 'text-muted-foreground')}>
+        <div className={cn('ml-6 text-sm mb-2 whitespace-pre-wrap max-h-[5rem] overflow-y-auto', operation.error ? 'text-red-400' : 'text-muted-foreground')}>
           {typeof displaySummary === 'string' ? (
             <>
               <span className="text-foreground">→ </span>
diff --git a/packages/cletus/src/browser/pages/ChatPage.tsx b/packages/cletus/src/browser/pages/ChatPage.tsx
index 3c747f9..4a749c2 100644
--- a/packages/cletus/src/browser/pages/ChatPage.tsx
+++ b/packages/cletus/src/browser/pages/ChatPage.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { ArrowLeft, Settings, CheckSquare, Trash2 } from 'lucide-react';
 import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
 import { ScrollArea } from '../components/ui/scroll-area';
 import { MessageList } from '../components/MessageList';
 import { ChatInput } from '../components/ChatInput';
@@ -32,8 +33,12 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
   const [showChatSettings, setShowChatSettings] = useState(false);
   const [showTodos, setShowTodos] = useState(false);
   const [showClearConfirm, setShowClearConfirm] = useState(false);
+  const [clearConfirmText, setClearConfirmText] = useState('');
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const [editedTitle, setEditedTitle] = useState('');
   const [totalCost, setTotalCost] = useState(0);
   const [chatMetaState, setChatMetaState] = useState<ChatMeta | null>(null);
+  const [cwd, setCwd] = useState<string | undefined>(undefined);
   const wsRef = useRef<WebSocket | null>(null);
   const modelsResolverRef = useRef<{
     resolve: (models: any[]) => void;
@@ -124,6 +129,9 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
           setChatMetaState(message.data.chat);
           onConfigChange();
         }
+        if (message.data.cwd !== undefined) {
+          setCwd(message.data.cwd);
+        }
         break;
 
       case 'status_update':
@@ -210,7 +218,11 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
   };
 
   const handleChatSettingsSave = (updates: { title?: string; prompt?: string; cwd?: string }) => {
-    send({ type: 'update_chat_meta', data: { chatId, updates } });
+    const { cwd: newCwd, ...metaUpdates } = updates;
+    send({
+      type: 'update_chat_meta',
+      data: { chatId, updates: metaUpdates, cwd: newCwd },
+    });
   };
 
   const handleAddTodo = (todo: string) => {
@@ -232,13 +244,33 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
   };
 
   const handleClearMessages = () => {
-    if (showClearConfirm) {
+    setShowClearConfirm(true);
+  };
+
+  const handleConfirmClear = () => {
+    if (clearConfirmText === 'CLEAR') {
       send({ type: 'clear_messages', data: { chatId } });
       setMessages([]);
       setShowClearConfirm(false);
-    } else {
-      setShowClearConfirm(true);
+      setClearConfirmText('');
+    }
+  };
+
+  const handleStartEditTitle = () => {
+    setEditedTitle(chatMeta?.title || '');
+    setIsEditingTitle(true);
+  };
+
+  const handleSaveTitle = () => {
+    if (editedTitle.trim() && editedTitle !== chatMeta?.title) {
+      send({ type: 'update_chat_meta', data: { chatId, updates: { title: editedTitle.trim() } } });
     }
+    setIsEditingTitle(false);
+  };
+
+  const handleCancelEditTitle = () => {
+    setIsEditingTitle(false);
+    setEditedTitle('');
   };
 
   const handleDeleteChat = () => {
@@ -297,16 +329,49 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
               <ArrowLeft className="w-5 h-5" />
             </Button>
             <div className="flex-1 flex items-center gap-2">
-              <h2 className="text-xl font-bold neon-text-cyan">{chatMeta.title}</h2>
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={handleDeleteChat}
-                title="Delete chat"
-                className="text-muted-foreground hover:text-destructive"
-              >
-                <Trash2 className="w-4 h-4" />
-              </Button>
+              {isEditingTitle ? (
+                <div className="flex items-center gap-2 flex-1">
+                  <Input
+                    type="text"
+                    value={editedTitle}
+                    onChange={(e) => setEditedTitle(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        handleSaveTitle();
+                      } else if (e.key === 'Escape') {
+                        handleCancelEditTitle();
+                      }
+                    }}
+                    className="flex-1 max-w-md"
+                    autoFocus
+                  />
+                  <Button variant="ghost" size="sm" onClick={handleSaveTitle}>
+                    Save
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={handleCancelEditTitle}>
+                    Cancel
+                  </Button>
+                </div>
+              ) : (
+                <>
+                  <h2
+                    className="text-xl font-bold neon-text-cyan cursor-pointer hover:opacity-80 transition-opacity"
+                    onClick={handleStartEditTitle}
+                    title="Click to edit title"
+                  >
+                    {chatMeta.title}
+                  </h2>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={handleDeleteChat}
+                    title="Delete chat"
+                    className="text-muted-foreground hover:text-destructive"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </Button>
+                </>
+              )}
             </div>
             <div className="flex items-center gap-3">
               <AssistantSelector
@@ -336,10 +401,10 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
                 <Settings className="w-5 h-5" />
               </Button>
               <Button
-                variant={showClearConfirm ? 'destructive' : 'ghost'}
+                variant="ghost"
                 size="icon"
                 onClick={handleClearMessages}
-                title={showClearConfirm ? 'Click again to confirm' : 'Clear messages'}
+                title="Clear messages"
               >
                 <Trash2 className="w-5 h-5" />
               </Button>
@@ -411,7 +476,7 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
         <ChatSettingsDialog
           title={chatMeta.title}
           prompt={chatMeta.prompt}
-          cwd={undefined}
+          cwd={cwd}
           onSave={handleChatSettingsSave}
           onClose={() => setShowChatSettings(false)}
         />
@@ -427,6 +492,64 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
           onClose={() => setShowTodos(false)}
         />
       )}
+
+      {/* Clear Messages Confirmation Dialog */}
+      {showClearConfirm && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
+          onClick={() => {
+            setShowClearConfirm(false);
+            setClearConfirmText('');
+          }}
+        >
+          <div
+            className="relative w-full max-w-md bg-card rounded-lg border border-border shadow-2xl p-6"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h2 className="text-xl font-bold text-destructive mb-4">Clear All Messages</h2>
+            <p className="text-foreground mb-4">
+              This will permanently delete all messages in this chat. This action cannot be undone.
+            </p>
+            <p className="text-muted-foreground mb-4">
+              Type <span className="font-mono font-bold text-foreground">CLEAR</span> to confirm:
+            </p>
+            <Input
+              type="text"
+              value={clearConfirmText}
+              onChange={(e) => setClearConfirmText(e.target.value)}
+              placeholder="Type CLEAR"
+              className="mb-4 font-mono"
+              autoFocus
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  handleConfirmClear();
+                } else if (e.key === 'Escape') {
+                  setShowClearConfirm(false);
+                  setClearConfirmText('');
+                }
+              }}
+            />
+            <div className="flex justify-end gap-3">
+              <Button
+                variant="ghost"
+                onClick={() => {
+                  setShowClearConfirm(false);
+                  setClearConfirmText('');
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="destructive"
+                onClick={handleConfirmClear}
+                disabled={clearConfirmText !== 'CLEAR'}
+              >
+                Clear Messages
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
index ba8a742..69d131d 100644
--- a/packages/cletus/src/browser/server.ts
+++ b/packages/cletus/src/browser/server.ts
@@ -284,6 +284,9 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
         case 'init_chat': {
           const { chatId } = message.data;
           await withChatFile(chatId, async (chatFile, _, config) => {
+            // Initialize AI to get default cwd
+            await ensureAI();
+
             sendMessage({
               type: 'chat_initialized',
               data: {
@@ -291,6 +294,14 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
                 chat: config.getChats().find(c => c.id === chatId),
               },
             });
+
+            // Send current cwd
+            sendMessage({
+              type: 'chat_updated',
+              data: {
+                cwd: ai?.config.defaultContext?.cwd
+              },
+            });
           });
           break;
         }
@@ -458,15 +469,26 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
           break;
 
         case 'update_chat_meta': {
-          const { chatId, updates } = message.data;
+          const { chatId, updates, cwd } = message.data;
           withConfig(async (config) => {
-              
+
             await config.updateChat(chatId, updates);
             const updatedChat = config.getChats().find(c => c.id === chatId);
 
+            // Update AI cwd if provided
+            if (cwd !== undefined && ai) {
+              if (!ai.config.defaultContext) {
+                ai.config.defaultContext = {};
+              }
+              ai.config.defaultContext.cwd = cwd;
+            }
+
             sendMessage({
               type: 'chat_updated',
-              data: { chat: updatedChat },
+              data: {
+                chat: updatedChat,
+                cwd: ai?.config.defaultContext?.cwd
+              },
             });
           });
           break;
diff --git a/packages/cletus/src/browser/websocket-types.ts b/packages/cletus/src/browser/websocket-types.ts
index ddaeebf..803eaca 100644
--- a/packages/cletus/src/browser/websocket-types.ts
+++ b/packages/cletus/src/browser/websocket-types.ts
@@ -12,7 +12,7 @@ export type ClientMessage =
   | { type: 'init_chat'; data: { chatId: string } }
   | { type: 'send_message'; data: { chatId: string; content: Message['content'] } }
   | { type: 'cancel'; data?: never }
-  | { type: 'update_chat_meta'; data: { chatId: string; updates: Partial<ChatMeta> } }
+  | { type: 'update_chat_meta'; data: { chatId: string; updates: Partial<ChatMeta>; cwd?: string } }
   | { type: 'add_todo'; data: { chatId: string; todo: string } }
   | { type: 'toggle_todo'; data: { chatId: string; index: number } }
   | { type: 'remove_todo'; data: { chatId: string; index: number } }
@@ -34,7 +34,7 @@ export type ServerMessage =
   | { type: 'pending_update'; data: { pending: Message } }
   | { type: 'messages_updated'; data: { messages: Message[] } }
   | { type: 'response_complete'; data: { message: Message } }
-  | { type: 'chat_updated'; data: { chat?: ChatMeta } }
+  | { type: 'chat_updated'; data: { chat?: ChatMeta; cwd?: string } }
   | { type: 'models'; data: { models: any[] } }
   | { type: 'status_update'; data: { status: string } }
   | { type: 'usage_update'; data: { accumulated: any; accumulatedCost: number; current: any } }
diff --git a/packages/cletus/src/operations/dba.tsx b/packages/cletus/src/operations/dba.tsx
index 4be2448..1ac1ce4 100644
--- a/packages/cletus/src/operations/dba.tsx
+++ b/packages/cletus/src/operations/dba.tsx
@@ -427,7 +427,7 @@ export const data_search = operationOf<
 
 export const data_get = operationOf<
   { type: string; offset?: number; limit?: number },
-  { records: Array<{ id: string; created: number; updated: number; fields: Record<string, any> }>; total: number },
+  { records: Array<Record<string, any>>; total: number },
   {},
   { typeName: string }
 >({
@@ -453,7 +453,7 @@ export const data_get = operationOf<
       id: record.id,
       created: record.created,
       updated: record.updated,
-      fields: record.fields,
+      ...record.fields,
     }));
 
     return { records, total };

From 33030e6fcde128ca625370a766c725b0ef63101d Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Mon, 15 Dec 2025 15:56:54 -0500
Subject: [PATCH 11/27] Add operation approval UI and refactor operation
 renderers

Introduces UI and logic for approving/rejecting assistant operations, including bulk and per-operation controls. Refactors operation renderer components to support approval props and concise summaries, and centralizes operation renderer prop types. Updates ChatInput, MessageList, and ChatPage to handle operation approval state and actions.
---
 .../src/browser/components/ChatInput.tsx      | 172 ++++++--------
 .../src/browser/components/MessageItem.tsx    |  25 +-
 .../src/browser/components/MessageList.tsx    |  36 ++-
 .../operations/BaseOperationDisplay.tsx       |  94 +++++++-
 .../cletus/src/browser/operations/artist.tsx  | 126 ++++++----
 .../cletus/src/browser/operations/clerk.tsx   |  33 ++-
 .../cletus/src/browser/operations/index.tsx   |   8 +-
 .../src/browser/operations/internet.tsx       |  79 +++---
 .../src/browser/operations/librarian.tsx      |  72 +++---
 .../cletus/src/browser/operations/planner.tsx | 131 +++++++---
 .../cletus/src/browser/operations/render.tsx  |  14 +-
 .../src/browser/operations/secretary.tsx      |  65 +++--
 .../cletus/src/browser/operations/types.ts    |  16 ++
 .../cletus/src/browser/pages/ChatPage.tsx     | 140 ++++++++---
 packages/cletus/src/browser/server.ts         | 224 ++++++++++++------
 packages/cletus/src/operations/planner.tsx    |  85 ++++---
 16 files changed, 874 insertions(+), 446 deletions(-)
 create mode 100644 packages/cletus/src/browser/operations/types.ts

diff --git a/packages/cletus/src/browser/components/ChatInput.tsx b/packages/cletus/src/browser/components/ChatInput.tsx
index 792be98..21770fb 100644
--- a/packages/cletus/src/browser/components/ChatInput.tsx
+++ b/packages/cletus/src/browser/components/ChatInput.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Send, Loader2, X } from 'lucide-react';
+import { Send, Loader2, X, CheckCircle2, XCircle } from 'lucide-react';
 import { Button } from './ui/button';
 import { Textarea } from './ui/textarea';
 import type { ChatMeta, MessageContent, Config } from '../../schemas';
@@ -25,16 +25,36 @@ interface ChatInputProps {
   config: Config;
   messageCount: number;
   totalCost: number;
-  onMessageSent: () => void;
-  onWebSocketMessage?: (message: ServerMessage) => void;
+  status: string;
+  isProcessing: boolean;
+  onSendMessage: (content: MessageContent[]) => void;
+  onCancel: () => void;
+  onModelClick?: () => void;
+  hasMultiplePendingOperations?: boolean;
+  allOperationsDecided?: boolean;
+  onApproveAll?: () => void;
+  onRejectAll?: () => void;
+  onSubmitDecisions?: () => void;
 }
 
-export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, config, messageCount, totalCost, onMessageSent, onWebSocketMessage }) => {
+export const ChatInput: React.FC<ChatInputProps> = ({
+  chatId,
+  chatMeta,
+  config,
+  messageCount,
+  totalCost,
+  status,
+  isProcessing,
+  onSendMessage,
+  onCancel,
+  onModelClick,
+  hasMultiplePendingOperations = false,
+  allOperationsDecided = false,
+  onApproveAll,
+  onRejectAll,
+  onSubmitDecisions,
+}) => {
   const [input, setInput] = useState('');
-  const [isConnecting, setIsConnecting] = useState(false);
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [status, setStatus] = useState('');
-  const wsRef = useRef<WebSocket | null>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
   // Auto-resize textarea as content changes
@@ -46,73 +66,10 @@ export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, config,
     }
   }, [input]);
 
-  useEffect(() => {
-    // Connect WebSocket
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const ws = new WebSocket(`${protocol}//${window.location.host}`);
-
-    ws.onopen = () => {
-      setIsConnecting(false);
-      // Initialize chat
-      sendClientMessage(ws, {
-        type: 'init_chat',
-        data: { chatId },
-      });
-    };
-
-    ws.onmessage = (event) => {
-      const message = JSON.parse(event.data) as ServerMessage;
-
-      // Forward all messages to parent for handling
-      if (onWebSocketMessage) {
-        onWebSocketMessage(message);
-      }
-
-      switch (message.type) {
-        case 'chat_initialized':
-          console.log('Chat initialized');
-          break;
-
-        case 'status_update':
-          setStatus(message.data.status);
-          break;
-
-        case 'response_complete':
-          setIsProcessing(false);
-          setStatus('');
-          break;
-
-        case 'error':
-          console.error('WebSocket error:', message.data.message);
-          setIsProcessing(false);
-          setStatus('Error: ' + message.data.message);
-          break;
-      }
-    };
-
-    ws.onerror = (error) => {
-      console.error('WebSocket error:', error);
-      setIsConnecting(false);
-      setIsProcessing(false);
-    };
-
-    ws.onclose = () => {
-      setIsConnecting(false);
-      setIsProcessing(false);
-    };
-
-    wsRef.current = ws;
-    setIsConnecting(true);
-
-    return () => {
-      ws.close();
-    };
-  }, [chatId]);
-
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
 
-    if (!input.trim() || isProcessing || !wsRef.current) {
+    if (!input.trim() || isProcessing) {
       return;
     }
 
@@ -122,14 +79,8 @@ export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, config,
       content: input.trim(),
     }];
 
-    sendClientMessage(wsRef.current, {
-      type: 'send_message',
-      data: { chatId, content },
-    });
-
+    onSendMessage(content);
     setInput('');
-    setIsProcessing(true);
-    setStatus('Processing...');
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
@@ -139,16 +90,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, config,
     }
   };
 
-  const handleCancel = () => {
-    if (wsRef.current && isProcessing) {
-      sendClientMessage(wsRef.current, {
-        type: 'cancel',
-      });
-      setIsProcessing(false);
-      setStatus('');
-    }
-  };
-
   return (
     <div className="p-4">
       {status && (
@@ -165,13 +106,11 @@ export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, config,
           onChange={(e) => setInput(e.target.value)}
           onKeyDown={handleKeyDown}
           placeholder={
-            isConnecting
-              ? 'Connecting...'
-              : isProcessing
+            isProcessing
               ? 'Processing...'
               : 'Type your message... (Enter to send, Shift+Enter for new line)'
           }
-          disabled={isConnecting || isProcessing}
+          disabled={isProcessing}
           className="min-h-[100px] max-h-[50vh] resize-none overflow-y-auto"
           style={{ height: 'auto' }}
         />
@@ -181,7 +120,13 @@ export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, config,
               {chatMeta.mode}
             </span>
             <span className="text-muted-foreground">│</span>
-            <span className="text-foreground">{chatMeta.model || config.user.models?.chat || 'no model'}</span>
+            <span
+              className="text-foreground cursor-pointer hover:text-neon-cyan transition-colors"
+              onClick={onModelClick}
+              title="Click to change model"
+            >
+              {chatMeta.model || config.user.models?.chat || 'no model'}
+            </span>
             {chatMeta.assistant && (
               <>
                 <span className="text-muted-foreground">│</span>
@@ -206,11 +151,46 @@ export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, config,
             )}
           </div>
           <div className="flex items-center gap-2 ml-2">
+            {/* Operation Approval Buttons */}
+            {hasMultiplePendingOperations && onApproveAll && onRejectAll && onSubmitDecisions && (
+              <>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={onApproveAll}
+                  className="text-green-400 border-green-400/30 hover:bg-green-400/10"
+                >
+                  <CheckCircle2 className="w-4 h-4 mr-1" />
+                  Approve All
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={onRejectAll}
+                  className="text-red-400 border-red-400/30 hover:bg-red-400/10"
+                >
+                  <XCircle className="w-4 h-4 mr-1" />
+                  Reject All
+                </Button>
+                <Button
+                  type="button"
+                  variant="neon"
+                  size="sm"
+                  onClick={onSubmitDecisions}
+                  disabled={!allOperationsDecided}
+                >
+                  Submit
+                </Button>
+              </>
+            )}
+
             {isProcessing && (
               <Button
                 type="button"
                 variant="destructive"
-                onClick={handleCancel}
+                onClick={onCancel}
                 className="gap-2"
               >
                 <X className="w-4 h-4" />
@@ -220,7 +200,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ chatId, chatMeta, config,
             <Button
               type="submit"
               variant="neon"
-              disabled={!input.trim() || isProcessing || isConnecting}
+              disabled={!input.trim() || isProcessing}
               className="gap-2"
             >
               {isProcessing ? (
diff --git a/packages/cletus/src/browser/components/MessageItem.tsx b/packages/cletus/src/browser/components/MessageItem.tsx
index a2de476..86c543d 100644
--- a/packages/cletus/src/browser/components/MessageItem.tsx
+++ b/packages/cletus/src/browser/components/MessageItem.tsx
@@ -8,9 +8,21 @@ import type { Message } from '../../schemas';
 
 interface MessageItemProps {
   message: Message;
+  operationDecisions?: Map<number, 'approve' | 'reject'>;
+  onToggleOperationDecision?: (idx: number, decision: 'approve' | 'reject') => void;
+  onApproveOperation?: (message: Message, idx: number) => void;
+  onRejectOperation?: (message: Message, idx: number) => void;
+  hasMultiplePendingOps?: boolean;
 }
 
-export const MessageItem: React.FC<MessageItemProps> = ({ message }) => {
+export const MessageItem: React.FC<MessageItemProps> = ({
+  message,
+  operationDecisions,
+  onToggleOperationDecision,
+  onApproveOperation,
+  onRejectOperation,
+  hasMultiplePendingOps = false,
+}) => {
   const { role, name, content, operations = [] } = message;
 
   const isUser = role === 'user';
@@ -67,11 +79,20 @@ export const MessageItem: React.FC<MessageItemProps> = ({ message }) => {
         <div className={cn('flex-1 space-y-2', isUser && 'flex flex-col items-end')}>
           {visibleContent.map((item, index) => {
             // Render operation if this content item has an operation
-            if (item.operation) {
+            if (item.operation && item.operationIndex !== undefined) {
+              const opIdx = item.operationIndex;
+              const needsApproval = item.operation.status === 'analyzed';
+
               return (
                 <OperationDisplay
                   key={index}
                   operation={item.operation}
+                  operationIndex={opIdx}
+                  approvalDecision={operationDecisions?.get(opIdx)}
+                  onToggleDecision={needsApproval && hasMultiplePendingOps ? onToggleOperationDecision : undefined}
+                  onApprove={needsApproval && !hasMultiplePendingOps && onApproveOperation ? (idx) => onApproveOperation(message, idx) : undefined}
+                  onReject={needsApproval && !hasMultiplePendingOps && onRejectOperation ? (idx) => onRejectOperation(message, idx) : undefined}
+                  hasMultipleOperations={hasMultiplePendingOps}
                 />
               );
             }
diff --git a/packages/cletus/src/browser/components/MessageList.tsx b/packages/cletus/src/browser/components/MessageList.tsx
index a9a4faa..4b1db0c 100644
--- a/packages/cletus/src/browser/components/MessageList.tsx
+++ b/packages/cletus/src/browser/components/MessageList.tsx
@@ -4,9 +4,19 @@ import type { Message } from '../../schemas';
 
 interface MessageListProps {
   messages: Message[];
+  operationDecisions?: Map<number, 'approve' | 'reject'>;
+  onToggleOperationDecision?: (idx: number, decision: 'approve' | 'reject') => void;
+  onApproveOperation?: (message: Message, idx: number) => void;
+  onRejectOperation?: (message: Message, idx: number) => void;
 }
 
-export const MessageList: React.FC<MessageListProps> = ({ messages }) => {
+export const MessageList: React.FC<MessageListProps> = ({
+  messages,
+  operationDecisions,
+  onToggleOperationDecision,
+  onApproveOperation,
+  onRejectOperation,
+}) => {
   const bottomRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -22,12 +32,24 @@ export const MessageList: React.FC<MessageListProps> = ({ messages }) => {
         </div>
       ) : (
         <div className="space-y-4">
-          {messages.map((message, index) => (
-            <MessageItem
-              key={index}
-              message={message}
-            />
-          ))}
+          {messages.map((message, index) => {
+            // Check if this is the last message with pending operations
+            const isLastMessage = index === messages.length - 1;
+            const hasPendingOps = message.operations?.some(op => op.status === 'analyzed');
+            const pendingOpCount = message.operations?.filter(op => op.status === 'analyzed').length || 0;
+
+            return (
+              <MessageItem
+                key={index}
+                message={message}
+                operationDecisions={operationDecisions}
+                onToggleOperationDecision={onToggleOperationDecision}
+                onApproveOperation={onApproveOperation}
+                onRejectOperation={onRejectOperation}
+                hasMultiplePendingOps={pendingOpCount > 1}
+              />
+            );
+          })}
         </div>
       )}
       <div ref={bottomRef} />
diff --git a/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx b/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
index 77f9889..235264f 100644
--- a/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
+++ b/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
@@ -1,15 +1,17 @@
 import React, { useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import { CheckCircle2, XCircle } from 'lucide-react';
 import { Operation } from '../../schemas';
 import { cn } from '../lib/utils';
 import { getStatusInfo, getElapsedTime } from './render';
+import { Button } from '../components/ui/button';
 
 /**
  * Checks if an array can be rendered as a table
  */
 const canRenderAsTable = (data: any[]): boolean => {
-  if (data.length === 0) return false;
+  if (data.length <= 1) return false;
 
   // All items must be objects
   if (!data.every(item => item && typeof item === 'object' && !Array.isArray(item))) {
@@ -317,6 +319,12 @@ interface BaseOperationDisplayProps {
   bgColor?: string;
   labelColor?: string;
   message?: { cost?: number; usage?: any };
+  operationIndex?: number;
+  onApprove?: (index: number) => void;
+  onReject?: (index: number) => void;
+  approvalDecision?: 'approve' | 'reject';
+  onToggleDecision?: (index: number, decision: 'approve' | 'reject') => void;
+  hasMultipleOperations?: boolean;
 }
 
 /**
@@ -330,6 +338,12 @@ export const BaseOperationDisplay: React.FC<BaseOperationDisplayProps> = ({
   bgColor = 'bg-card/50',
   labelColor = 'text-foreground',
   message,
+  operationIndex,
+  onApprove,
+  onReject,
+  approvalDecision,
+  onToggleDecision,
+  hasMultipleOperations = false,
 }) => {
   const [isDetailsOpen, setIsDetailsOpen] = useState(false);
   const { color: statusColor, label: statusLabel } = getStatusInfo(operation.status);
@@ -338,8 +352,23 @@ export const BaseOperationDisplay: React.FC<BaseOperationDisplayProps> = ({
   // Determine summary to display
   const displaySummary = operation.error ? operation.error : summary;
 
+  const needsApproval = operation.status === 'analyzed';
+
+  // Debug logging
+  if (needsApproval) {
+    console.log('Operation needs approval:', {
+      label,
+      operationIndex,
+      hasMultipleOperations,
+      hasOnApprove: !!onApprove,
+      hasOnReject: !!onReject,
+      hasOnToggle: !!onToggleDecision,
+      status: operation.status,
+    });
+  }
+
   return (
-    <div className={cn('mb-3 rounded-lg p-3', bgColor)}>
+    <div className={cn('mb-3 rounded-lg p-3', needsApproval ? 'bg-yellow-500/5 border border-yellow-500/30' : bgColor)}>
       {/* Header - Clickable */}
       <div
         className="flex items-center gap-2 mb-2 cursor-pointer hover:opacity-80 transition-opacity"
@@ -372,6 +401,67 @@ export const BaseOperationDisplay: React.FC<BaseOperationDisplayProps> = ({
         </div>
       )}
 
+      {/* Approval Buttons */}
+      {needsApproval && operationIndex !== undefined && (
+        <div className="ml-6 mb-2">
+          {!hasMultipleOperations && onApprove && onReject ? (
+            // Single operation: immediate approve/reject
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onApprove(operationIndex)}
+                className="bg-green-500/10 text-green-400 border-green-400/30 hover:bg-green-400/20"
+              >
+                <CheckCircle2 className="w-4 h-4 mr-2" />
+                Approve
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => onReject(operationIndex)}
+                className="bg-red-500/10 text-red-400 border-red-400/30 hover:bg-red-400/20"
+              >
+                <XCircle className="w-4 h-4 mr-2" />
+                Reject
+              </Button>
+            </div>
+          ) : (
+            // Multiple operations: toggle buttons
+            onToggleDecision && (
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => onToggleDecision(operationIndex, 'approve')}
+                  className={cn(
+                    approvalDecision === 'approve'
+                      ? 'bg-green-500/20 text-green-400 border-green-400 hover:bg-green-500/30'
+                      : 'text-green-400/50 border-green-400/30 hover:bg-green-400/10'
+                  )}
+                >
+                  <CheckCircle2 className="w-4 h-4 mr-2" />
+                  Approve
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => onToggleDecision(operationIndex, 'reject')}
+                  className={cn(
+                    approvalDecision === 'reject'
+                      ? 'bg-red-500/20 text-red-400 border-red-400 hover:bg-red-500/30'
+                      : 'text-red-400/50 border-red-400/30 hover:bg-red-400/10'
+                  )}
+                >
+                  <XCircle className="w-4 h-4 mr-2" />
+                  Reject
+                </Button>
+              </div>
+            )
+          )}
+        </div>
+      )}
+
       {/* Details */}
       {isDetailsOpen && (
         <>
diff --git a/packages/cletus/src/browser/operations/artist.tsx b/packages/cletus/src/browser/operations/artist.tsx
index 543d9e0..cca7359 100644
--- a/packages/cletus/src/browser/operations/artist.tsx
+++ b/packages/cletus/src/browser/operations/artist.tsx
@@ -1,84 +1,114 @@
 import React from 'react';
 import { Operation } from '../../schemas';
-import { getStatusInfo, getElapsedTime } from './render';
-import { cn } from '../lib/utils';
+import { abbreviate } from '../../shared';
+import { BaseOperationDisplay } from './BaseOperationDisplay';
+import { OperationRendererProps } from './types';
 
-interface OperationRendererProps {
-  operation: Operation;
-  showInput?: boolean;
-  showOutput?: boolean;
-}
-
-function createRenderer(getLabel: (op: Operation) => string, getSummary?: (op: Operation) => React.ReactNode | null) {
-  return ({ operation }: OperationRendererProps) => {
-    const { color: statusColor, label: statusLabel } = getStatusInfo(operation.status);
-    const elapsed = getElapsedTime(operation);
-    const summary = getSummary ? getSummary(operation) : null;
+function createRenderer(getLabel: (op: Operation) => string, getSummary?: (op: Operation) => string | React.ReactNode | null) {
+  return (props: OperationRendererProps) => {
+    const { operation } = props;
+    const label = getLabel(operation);
+    const summary = operation.error || (getSummary ? getSummary(operation) : null) || operation.analysis;
 
     return (
-      <div className="mb-3 border border-neon-pink/30 rounded-lg p-3 bg-neon-pink/5">
-        <div className="flex items-center gap-2 mb-2">
-          <span className={cn('text-lg', statusColor)}>●</span>
-          <span className="font-mono text-sm text-neon-pink">{getLabel(operation)}</span>
-          <span className="text-xs text-muted-foreground">[{statusLabel}]</span>
-          {elapsed && <span className="text-xs text-muted-foreground">({elapsed})</span>}
-        </div>
-        {summary}
-      </div>
+      <BaseOperationDisplay
+        {...props}
+        label={label}
+        summary={summary}
+        borderColor="border-neon-pink/30"
+        bgColor="bg-neon-pink/5"
+        labelColor="text-neon-pink"
+      />
     );
   };
 }
 
 export const image_generate = createRenderer(
-  (op) => `ImageGen("${op.input.prompt?.substring(0, 30)}...")`,
+  (op) => `ImageGenerate("${abbreviate(op.input.prompt, 30)}", n=${op.input.n || 1})`,
   (op) => {
-    if (operation.error) {
-      return <div className="ml-6 text-sm text-red-400">→ {operation.error}</div>;
-    }
-    if (op.output?.url) {
-      return (
-        <div className="ml-6 mt-2">
-          <img src={op.output.url} alt="Generated" className="max-w-sm rounded border border-neon-pink/30" />
-        </div>
-      );
+    if (op.output) {
+      const count = op.output.count;
+      // For browser, we can show the image inline if we have URLs
+      if (op.output.images && op.output.images.length > 0) {
+        return (
+          <div className="ml-6 mt-2">
+            <div className="text-sm mb-2">Generated {count} image{count !== 1 ? 's' : ''}</div>
+            <div className="flex gap-2 flex-wrap">
+              {op.output.images.map((img: string, i: number) => (
+                <img key={i} src={img} alt="Generated" className="max-w-sm rounded border border-neon-pink/30" />
+              ))}
+            </div>
+          </div>
+        );
+      }
+      return `Generated ${count} image${count !== 1 ? 's' : ''}`;
     }
     return null;
   }
 );
 
 export const image_edit = createRenderer(
-  (op) => `ImageEdit("${op.input.prompt?.substring(0, 30)}...")`,
+  (op) => `ImageEdit("${op.input.path}", "${abbreviate(op.input.prompt, 20)}")`,
   (op) => {
-    if (operation.error) {
-      return <div className="ml-6 text-sm text-red-400">→ {operation.error}</div>;
-    }
-    if (op.output?.url) {
-      return (
-        <div className="ml-6 mt-2">
-          <img src={op.output.url} alt="Edited" className="max-w-sm rounded border border-neon-pink/30" />
-        </div>
-      );
+    if (op.output) {
+      // For browser, we can show the edited image inline if we have a URL
+      if (op.output.editedLink) {
+        return (
+          <div className="ml-6 mt-2">
+            <div className="text-sm mb-2">Edited image saved</div>
+            <img src={op.output.editedLink} alt="Edited" className="max-w-sm rounded border border-neon-pink/30" />
+          </div>
+        );
+      }
+      return 'Edited image saved';
     }
     return null;
   }
 );
 
 export const image_analyze = createRenderer(
-  (op) => `ImageAnalyze("${op.input.path}")`,
-  (op) => op.output?.analysis ? <div className="ml-6 text-sm text-muted-foreground">→ {op.output.analysis}</div> : null
+  (op) => {
+    const pathCount = op.input.paths?.length || 1;
+    const firstPath = op.input.paths?.[0] || op.input.path || '';
+    const label = pathCount === 1 ? firstPath : `${pathCount} images`;
+    return `ImageAnalyze(${label}, "${abbreviate(op.input.prompt, 20)}")`;
+  },
+  (op) => {
+    if (op.output) {
+      return abbreviate(op.output.analysis, 60);
+    }
+    return null;
+  }
 );
 
 export const image_describe = createRenderer(
   (op) => `ImageDescribe("${op.input.path}")`,
-  (op) => op.output?.description ? <div className="ml-6 text-sm text-muted-foreground">→ {op.output.description}</div> : null
+  (op) => {
+    if (op.output) {
+      return abbreviate(op.output.description, 60);
+    }
+    return null;
+  }
 );
 
 export const image_find = createRenderer(
-  (op) => `ImageFind("${op.input.glob}")`,
-  (op) => op.output?.count !== undefined ? <div className="ml-6 text-sm text-muted-foreground">→ Found {op.output.count} image{op.output.count !== 1 ? 's' : ''}</div> : null
+  (op) => `ImageFind("${abbreviate(op.input.query, 50)}", "${op.input.glob}")`,
+  (op) => {
+    if (op.output) {
+      const resultCount = op.output.results.length;
+      const searched = op.output.searched;
+      return `Found ${resultCount} matching image${resultCount !== 1 ? 's' : ''} (searched ${searched})`;
+    }
+    return null;
+  }
 );
 
 export const image_attach = createRenderer(
   (op) => `ImageAttach("${op.input.path}")`,
-  (op) => op.output ? <div className="ml-6 text-sm text-muted-foreground">→ Attached to context</div> : null
+  (op) => {
+    if (op.output?.attached) {
+      return `Attached image: ${op.output.fullPath}`;
+    }
+    return null;
+  }
 );
diff --git a/packages/cletus/src/browser/operations/clerk.tsx b/packages/cletus/src/browser/operations/clerk.tsx
index cf1c22a..b56b273 100644
--- a/packages/cletus/src/browser/operations/clerk.tsx
+++ b/packages/cletus/src/browser/operations/clerk.tsx
@@ -1,42 +1,39 @@
 import React from 'react';
 import { Operation } from '../../schemas';
 import { BaseOperationDisplay } from './BaseOperationDisplay';
+import { OperationRendererProps } from './types';
 import { cn } from '../lib/utils';
 
-interface OperationRendererProps {
-  operation: Operation;
-  showInput?: boolean;
-  showOutput?: boolean;
-}
-
-export const file_search: React.FC<OperationRendererProps> = ({ operation }) => {
+export const file_search: React.FC<OperationRendererProps> = (props) => {
+  const { operation } = props;
   const summary = operation.output?.count !== undefined
     ? `Found ${operation.output.count} file${operation.output.count !== 1 ? 's' : ''}`
     : operation.analysis;
-  return <BaseOperationDisplay operation={operation} label={`Files("${operation.input.glob}")`} summary={summary} />;
+  return <BaseOperationDisplay {...props} label={`Files("${operation.input.glob}")`} summary={summary} />;
 };
 
-export const file_summary: React.FC<OperationRendererProps> = ({ operation }) => (
-  <BaseOperationDisplay operation={operation} label={`Summary("${operation.input.path}")`} summary={operation.output?.summary || operation.analysis} />
+export const file_summary: React.FC<OperationRendererProps> = (props) => (
+  <BaseOperationDisplay {...props} label={`Summary("${props.operation.input.path}")`} summary={props.operation.output?.summary || props.operation.analysis} />
 );
 
-export const file_index: React.FC<OperationRendererProps> = ({ operation }) => {
+export const file_index: React.FC<OperationRendererProps> = (props) => {
+  const { operation } = props;
   const summary = operation.output?.indexed !== undefined
     ? `Indexed ${operation.output.indexed} file${operation.output.indexed !== 1 ? 's' : ''}`
     : operation.analysis;
-  return <BaseOperationDisplay operation={operation} label={`Index("${operation.input.glob}")`} summary={summary} />;
+  return <BaseOperationDisplay {...props} label={`Index("${operation.input.glob}")`} summary={summary} />;
 };
 
-export const file_create: React.FC<OperationRendererProps> = ({ operation }) => (
-  <BaseOperationDisplay operation={operation} label={`Create("${operation.input.path}")`} summary={operation.output?.fullPath ? `Created ${operation.output.fullPath}` : operation.analysis} />
+export const file_create: React.FC<OperationRendererProps> = (props) => (
+  <BaseOperationDisplay {...props} label={`Create("${props.operation.input.path}")`} summary={props.operation.output?.fullPath ? `Created ${props.operation.output.fullPath}` : props.operation.analysis} />
 );
 
-export const file_copy: React.FC<OperationRendererProps> = ({ operation }) => (
-  <BaseOperationDisplay operation={operation} label={`Copy("${operation.input.from}" → "${operation.input.to}")`} summary={operation.output?.fullPath ? `Copied to ${operation.output.fullPath}` : operation.analysis} />
+export const file_copy: React.FC<OperationRendererProps> = (props) => (
+  <BaseOperationDisplay {...props} label={`Copy("${props.operation.input.from}" → "${props.operation.input.to}")`} summary={props.operation.output?.fullPath ? `Copied to ${props.operation.output.fullPath}` : props.operation.analysis} />
 );
 
-export const file_move: React.FC<OperationRendererProps> = ({ operation }) => (
-  <BaseOperationDisplay operation={operation} label={`Move("${operation.input.from}" → "${operation.input.to}")`} summary={operation.output?.fullPath ? `Moved to ${operation.output.fullPath}` : operation.analysis} />
+export const file_move: React.FC<OperationRendererProps> = (props) => (
+  <BaseOperationDisplay {...props} label={`Move("${props.operation.input.from}" → "${props.operation.input.to}")`} summary={props.operation.output?.fullPath ? `Moved to ${props.operation.output.fullPath}` : props.operation.analysis} />
 );
 
 export const file_stats: React.FC<OperationRendererProps> = ({ operation }) => {
diff --git a/packages/cletus/src/browser/operations/index.tsx b/packages/cletus/src/browser/operations/index.tsx
index f77c2f7..3416d15 100644
--- a/packages/cletus/src/browser/operations/index.tsx
+++ b/packages/cletus/src/browser/operations/index.tsx
@@ -45,13 +45,19 @@ const OperationRenderers: Partial<Record<OperationKind, React.FC<{
 
 interface OperationDisplayProps {
   operation: Operation;
+  operationIndex?: number;
+  onApprove?: (index: number) => void;
+  onReject?: (index: number) => void;
+  approvalDecision?: 'approve' | 'reject';
+  onToggleDecision?: (index: number, decision: 'approve' | 'reject') => void;
+  hasMultipleOperations?: boolean;
 }
 
 /**
  * Main operation display component that delegates to specific renderers
  */
 export const OperationDisplay: React.FC<OperationDisplayProps> = (props) => {
-  const Renderer = OperationRenderers[props.operation.type as OperationKind];
+  const Renderer = OperationRenderers[props.operation.type as OperationKind] as any;
 
   if (Renderer) {
     return <Renderer {...props} />;
diff --git a/packages/cletus/src/browser/operations/internet.tsx b/packages/cletus/src/browser/operations/internet.tsx
index 5b65678..e809d6e 100644
--- a/packages/cletus/src/browser/operations/internet.tsx
+++ b/packages/cletus/src/browser/operations/internet.tsx
@@ -1,54 +1,69 @@
 import React from 'react';
 import { Operation } from '../../schemas';
-import { getStatusInfo, getElapsedTime } from './render';
-import { cn } from '../lib/utils';
-
-interface OperationRendererProps {
-  operation: Operation;
-  showInput?: boolean;
-  showOutput?: boolean;
-}
+import { abbreviate } from '../../shared';
+import { BaseOperationDisplay } from './BaseOperationDisplay';
+import { OperationRendererProps } from './types';
 
 function createRenderer(getLabel: (op: Operation) => string, getSummary?: (op: Operation) => string | null) {
-  return ({ operation }: OperationRendererProps) => {
-    const { color: statusColor, label: statusLabel } = getStatusInfo(operation.status);
-    const elapsed = getElapsedTime(operation);
+  return (props: OperationRendererProps) => {
+    const { operation } = props;
+    const label = getLabel(operation);
     const summary = operation.error || (getSummary ? getSummary(operation) : null) || operation.analysis;
 
     return (
-      <div className="mb-3 border border-neon-green/30 rounded-lg p-3 bg-neon-green/5">
-        <div className="flex items-center gap-2 mb-2">
-          <span className={cn('text-lg', statusColor)}>●</span>
-          <span className="font-mono text-sm text-neon-green">{getLabel(operation)}</span>
-          <span className="text-xs text-muted-foreground">[{statusLabel}]</span>
-          {elapsed && <span className="text-xs text-muted-foreground">({elapsed})</span>}
-        </div>
-        {summary && (
-          <div className={cn('ml-6 text-sm', operation.error ? 'text-red-400' : 'text-muted-foreground')}>
-            → {summary}
-          </div>
-        )}
-      </div>
+      <BaseOperationDisplay
+        {...props}
+        label={label}
+        summary={summary}
+        borderColor="border-neon-green/30"
+        bgColor="bg-neon-green/5"
+        labelColor="text-neon-green"
+      />
     );
   };
 }
 
 export const web_search = createRenderer(
-  (op) => `WebSearch("${op.input.query}")`,
-  (op) => op.output?.results?.length ? `Found ${op.output.results.length} result${op.output.results.length !== 1 ? 's' : ''}` : null
+  (op) => `WebSearch("${abbreviate(op.input.query, 30)}")`,
+  (op) => {
+    if (op.output) {
+      return `Found ${op.output.results.length} result${op.output.results.length !== 1 ? 's' : ''}`;
+    }
+    return null;
+  }
 );
 
 export const web_get_page = createRenderer(
-  (op) => `WebGet("${op.input.url}")`,
-  (op) => op.output?.content ? `Retrieved ${op.output.content.length} characters` : null
+  (op) => `WebGetPage("${abbreviate(op.input.url, 30)}", ${op.input.type})`,
+  (op) => {
+    if (op.output) {
+      const parts: string[] = [`${op.output.totalLines} lines`];
+      if (op.output.matches) {
+        parts.push(`${op.output.matches.length} matches`);
+      }
+      return parts.join(', ');
+    }
+    return null;
+  }
 );
 
 export const web_api_call = createRenderer(
-  (op) => `API(${op.input.method} "${op.input.url}")`,
-  (op) => op.output?.status ? `Status ${op.output.status}` : null
+  (op) => `WebApiCall(${op.input.method} "${abbreviate(op.input.url, 60)}")`,
+  (op) => {
+    if (op.output) {
+      return `${op.output.status} ${op.output.statusText} (${op.output.body.length} bytes)`;
+    }
+    return null;
+  }
 );
 
 export const web_download = createRenderer(
-  (op) => `Download("${op.input.url}")`,
-  (op) => op.output?.path ? `Saved to ${op.output.path}` : null
+  (op) => `WebDownload("${abbreviate(op.input.url, 30)}")`,
+  (op) => {
+    if (op.output) {
+      const sizeKB = (op.output.size / 1024).toFixed(2);
+      return `${sizeKB} KB saved to ${op.output.path}`;
+    }
+    return null;
+  }
 );
diff --git a/packages/cletus/src/browser/operations/librarian.tsx b/packages/cletus/src/browser/operations/librarian.tsx
index 59eddce..6a66f89 100644
--- a/packages/cletus/src/browser/operations/librarian.tsx
+++ b/packages/cletus/src/browser/operations/librarian.tsx
@@ -1,51 +1,61 @@
 import React from 'react';
 import { Operation } from '../../schemas';
-import { getStatusInfo, getElapsedTime } from './render';
-import { cn } from '../lib/utils';
-
-interface OperationRendererProps {
-  operation: Operation;
-  showInput?: boolean;
-  showOutput?: boolean;
-}
+import { abbreviate } from '../../shared';
+import { BaseOperationDisplay } from './BaseOperationDisplay';
+import { OperationRendererProps } from './types';
 
 function createRenderer(getLabel: (op: Operation) => string, getSummary?: (op: Operation) => string | null) {
-  return ({ operation }: OperationRendererProps) => {
-    const { color: statusColor, label: statusLabel } = getStatusInfo(operation.status);
-    const elapsed = getElapsedTime(operation);
+  return (props: OperationRendererProps) => {
+    const { operation } = props;
+    const label = getLabel(operation);
     const summary = operation.error || (getSummary ? getSummary(operation) : null) || operation.analysis;
 
     return (
-      <div className="mb-3 border border-purple-400/30 rounded-lg p-3 bg-purple-400/5">
-        <div className="flex items-center gap-2 mb-2">
-          <span className={cn('text-lg', statusColor)}>●</span>
-          <span className="font-mono text-sm text-purple-400">{getLabel(operation)}</span>
-          <span className="text-xs text-muted-foreground">[{statusLabel}]</span>
-          {elapsed && <span className="text-xs text-muted-foreground">({elapsed})</span>}
-        </div>
-        {summary && (
-          <div className={cn('ml-6 text-sm', operation.error ? 'text-red-400' : 'text-muted-foreground')}>
-            → {summary}
-          </div>
-        )}
-      </div>
+      <BaseOperationDisplay
+        {...props}
+        label={label}
+        summary={summary}
+        borderColor="border-purple-400/30"
+        bgColor="bg-purple-400/5"
+        labelColor="text-purple-400"
+      />
     );
   };
 }
 
 export const knowledge_search = createRenderer(
-  (op) => `KnowledgeSearch("${op.input.query}")`,
-  (op) => op.output?.results?.length ? `Found ${op.output.results.length} result${op.output.results.length !== 1 ? 's' : ''}` : null
+  (op) => `KnowledgeSearch("${abbreviate(op.input.query, 25)}")`,
+  (op) => {
+    if (op.output) {
+      const count = op.output.results.length;
+      return `Found ${count} result${count !== 1 ? 's' : ''}`;
+    }
+    return null;
+  }
 );
 
-export const knowledge_sources = createRenderer((op) => 'KnowledgeSources()');
+export const knowledge_sources = createRenderer(
+  (op) => 'KnowledgeSources()',
+  (op) => {
+    if (op.output) {
+      const count = op.output.sources.length;
+      return `Listed ${count} source${count !== 1 ? 's' : ''}`;
+    }
+    return null;
+  }
+);
 
 export const knowledge_add = createRenderer(
-  (op) => `KnowledgeAdd("${op.input.source}")`,
-  (op) => op.output?.added ? `Added ${op.output.added} entr${op.output.added !== 1 ? 'ies' : 'y'}` : null
+  (op) => `KnowledgeAdd("${abbreviate(op.input.text, 30)}")`,
+  (op) => op.output?.added ? `Added: "${abbreviate(op.input.text, 50)}"` : null
 );
 
 export const knowledge_delete = createRenderer(
-  (op) => `KnowledgeDelete("${op.input.source}")`,
-  (op) => op.output?.deleted ? `Deleted ${op.output.deleted} entr${op.output.deleted !== 1 ? 'ies' : 'y'}` : null
+  (op) => `KnowledgeDelete("${op.input.sourcePattern}")`,
+  (op) => {
+    if (op.output) {
+      return `Deleted ${op.output.deletedCount} entr${op.output.deletedCount !== 1 ? 'ies' : 'y'}`;
+    }
+    return null;
+  }
 );
diff --git a/packages/cletus/src/browser/operations/planner.tsx b/packages/cletus/src/browser/operations/planner.tsx
index b2c071e..b5e0a49 100644
--- a/packages/cletus/src/browser/operations/planner.tsx
+++ b/packages/cletus/src/browser/operations/planner.tsx
@@ -1,43 +1,112 @@
 import React from 'react';
 import { Operation } from '../../schemas';
-import { getStatusInfo, getElapsedTime } from './render';
-import { cn } from '../lib/utils';
-
-interface OperationRendererProps {
-  operation: Operation;
-  showInput?: boolean;
-  showOutput?: boolean;
-}
+import { abbreviate } from '../../shared';
+import { BaseOperationDisplay } from './BaseOperationDisplay';
+import { OperationRendererProps } from './types';
 
 function createRenderer(getLabel: (op: Operation) => string, getSummary?: (op: Operation) => string | null) {
-  return ({ operation, showInput = false, showOutput = false }: OperationRendererProps) => {
-    const { color: statusColor, label: statusLabel } = getStatusInfo(operation.status);
-    const elapsed = getElapsedTime(operation);
+  return (props: OperationRendererProps) => {
+    const { operation } = props;
     const label = getLabel(operation);
     const summary = operation.error || (getSummary ? getSummary(operation) : null) || operation.analysis;
 
     return (
-      <div className="mb-3 border border-neon-purple/30 rounded-lg p-3 bg-neon-purple/5">
-        <div className="flex items-center gap-2 mb-2">
-          <span className={cn('text-lg', statusColor)}>●</span>
-          <span className="font-mono text-sm text-neon-purple">{label}</span>
-          <span className="text-xs text-muted-foreground">[{statusLabel}]</span>
-          {elapsed && <span className="text-xs text-muted-foreground">({elapsed})</span>}
-        </div>
-        {summary && (
-          <div className={cn('ml-6 text-sm', operation.error ? 'text-red-400' : 'text-muted-foreground')}>
-            → {summary}
-          </div>
-        )}
-      </div>
+      <BaseOperationDisplay
+        {...props}
+        label={label}
+        summary={summary}
+        borderColor="border-neon-purple/30"
+        bgColor="bg-neon-purple/5"
+        labelColor="text-neon-purple"
+      />
     );
   };
 }
 
-export const todos_list = createRenderer((op) => 'TodosList()');
-export const todos_add = createRenderer((op) => `TodosAdd("${op.input.name}")`);
-export const todos_done = createRenderer((op) => `TodosDone("${op.input.id}")`);
-export const todos_get = createRenderer((op) => `TodosGet("${op.input.id}")`);
-export const todos_remove = createRenderer((op) => `TodosRemove("${op.input.id}")`);
-export const todos_replace = createRenderer((op) => 'TodosReplace()');
-export const todos_clear = createRenderer((op) => 'TodosClear()');
+// Helper to extract todo name from analysis
+function getTodoName(op: Operation): string | null {
+  if (!op.analysis) return null;
+  // Analysis format: 'This will mark todo "name" as done.'
+  const match = op.analysis.match(/todo "([^"]+)"/);
+  return match ? match[1] : null;
+}
+
+export const todos_list = createRenderer(
+  (op) => 'TodosList()',
+  (op) => {
+    if (op.output) {
+      const count = op.output.todos.length;
+      return `${count} todo${count !== 1 ? 's' : ''}`;
+    }
+    return null;
+  }
+);
+
+export const todos_add = createRenderer(
+  (op) => `TodosAdd("${abbreviate(op.input.name, 64)}")`,
+  (op) => {
+    if (op.output) {
+      return `Added: "${op.output.name}"`;
+    }
+    return null;
+  }
+);
+
+export const todos_done = createRenderer(
+  (op) => {
+    const todoName = getTodoName(op);
+    return todoName ? `TodosDone("${abbreviate(todoName, 64)}")` : `TodosDone("${abbreviate(op.input.id, 64)}")`;
+  },
+  (op) => {
+    if (op.output) {
+      return 'Marked todo as done';
+    }
+    return null;
+  }
+);
+
+export const todos_get = createRenderer(
+  (op) => {
+    const todoName = getTodoName(op);
+    return todoName ? `TodosGet("${abbreviate(todoName, 64)}")` : `TodosGet("${abbreviate(op.input.id, 64)}")`;
+  },
+  (op) => {
+    if (op.output) {
+      return op.output.todo ? `Found: "${op.output.todo.name}"` : 'Todo not found';
+    }
+    return null;
+  }
+);
+
+export const todos_remove = createRenderer(
+  (op) => {
+    const todoName = getTodoName(op);
+    return todoName ? `TodosRemove("${abbreviate(todoName, 64)}")` : `TodosRemove("${abbreviate(op.input.id, 64)}")`;
+  },
+  (op) => {
+    if (op.output) {
+      return 'Removed todo';
+    }
+    return null;
+  }
+);
+
+export const todos_replace = createRenderer(
+  (op) => `TodosReplace(${op.input.todos.length} todos)`,
+  (op) => {
+    if (op.output) {
+      return `Replaced with ${op.output.count} todo${op.output.count !== 1 ? 's' : ''}`;
+    }
+    return null;
+  }
+);
+
+export const todos_clear = createRenderer(
+  (op) => 'TodosClear()',
+  (op) => {
+    if (op.output) {
+      return 'All todos cleared';
+    }
+    return null;
+  }
+);
diff --git a/packages/cletus/src/browser/operations/render.tsx b/packages/cletus/src/browser/operations/render.tsx
index 02ecd21..202d853 100644
--- a/packages/cletus/src/browser/operations/render.tsx
+++ b/packages/cletus/src/browser/operations/render.tsx
@@ -40,15 +40,21 @@ export function getElapsedTime(op: Operation): string {
 
 interface OperationDisplayProps {
   operation: Operation;
+  operationIndex?: number;
+  onApprove?: (index: number) => void;
+  onReject?: (index: number) => void;
+  approvalDecision?: 'approve' | 'reject';
+  onToggleDecision?: (index: number, decision: 'approve' | 'reject') => void;
+  hasMultipleOperations?: boolean;
 }
 
 /**
  * Default operation renderer - delegates to BaseOperationDisplay
  */
-export const OperationDisplay: React.FC<OperationDisplayProps> = ({ operation }) => (
+export const OperationDisplay: React.FC<OperationDisplayProps> = (props) => (
   <BaseOperationDisplay
-    operation={operation}
-    label={operation.type}
-    summary={operation.analysis}
+    {...props}
+    label={props.operation.type}
+    summary={props.operation.analysis}
   />
 );
diff --git a/packages/cletus/src/browser/operations/secretary.tsx b/packages/cletus/src/browser/operations/secretary.tsx
index 8f4f358..10da313 100644
--- a/packages/cletus/src/browser/operations/secretary.tsx
+++ b/packages/cletus/src/browser/operations/secretary.tsx
@@ -1,56 +1,55 @@
 import React from 'react';
 import { Operation } from '../../schemas';
-import { getStatusInfo, getElapsedTime } from './render';
-import { cn } from '../lib/utils';
-
-interface OperationRendererProps {
-  operation: Operation;
-  showInput?: boolean;
-  showOutput?: boolean;
-}
+import { abbreviate } from '../../shared';
+import { BaseOperationDisplay } from './BaseOperationDisplay';
+import { OperationRendererProps } from './types';
 
 function createRenderer(getLabel: (op: Operation) => string, getSummary?: (op: Operation) => string | null) {
-  return ({ operation }: OperationRendererProps) => {
-    const { color: statusColor, label: statusLabel } = getStatusInfo(operation.status);
-    const elapsed = getElapsedTime(operation);
+  return (props: OperationRendererProps) => {
+    const { operation } = props;
+    const label = getLabel(operation);
     const summary = operation.error || (getSummary ? getSummary(operation) : null) || operation.analysis;
 
     return (
-      <div className="mb-3 border border-yellow-400/30 rounded-lg p-3 bg-yellow-400/5">
-        <div className="flex items-center gap-2 mb-2">
-          <span className={cn('text-lg', statusColor)}>●</span>
-          <span className="font-mono text-sm text-yellow-400">{getLabel(operation)}</span>
-          <span className="text-xs text-muted-foreground">[{statusLabel}]</span>
-          {elapsed && <span className="text-xs text-muted-foreground">({elapsed})</span>}
-        </div>
-        {summary && (
-          <div className={cn('ml-6 text-sm', operation.error ? 'text-red-400' : 'text-muted-foreground')}>
-            → {summary}
-          </div>
-        )}
-      </div>
+      <BaseOperationDisplay
+        {...props}
+        label={label}
+        summary={summary}
+        borderColor="border-yellow-400/30"
+        bgColor="bg-yellow-400/5"
+        labelColor="text-yellow-400"
+      />
     );
   };
 }
 
 export const assistant_switch = createRenderer(
-  (op) => `SwitchAssistant("${op.input.name}")`,
-  (op) => op.output ? `Switched to ${op.input.name}` : null
+  (op) => `AssistantSwitch("${op.input.name}")`,
+  (op) => op.output ? `Switched to assistant: ${op.input.name}` : null
 );
 
 export const assistant_update = createRenderer(
-  (op) => `UpdateAssistant("${op.input.name}")`,
-  (op) => op.output ? 'Assistant updated' : null
+  (op) => `AssistantUpdate("${op.input.name}")`,
+  (op) => op.output ? `Updated assistant: ${op.input.name}` : null
 );
 
 export const assistant_add = createRenderer(
-  (op) => `AddAssistant("${op.input.name}")`,
-  (op) => op.output ? 'Assistant created' : null
+  (op) => `AssistantAdd("${op.input.name}")`,
+  (op) => op.output ? `Created assistant: ${op.input.name}` : null
 );
 
-export const memory_list = createRenderer((op) => 'MemoryList()');
+export const memory_list = createRenderer(
+  (op) => 'MemoryList()',
+  (op) => {
+    if (op.output) {
+      const count = op.output.memories.length;
+      return `${count} memor${count !== 1 ? 'ies' : 'y'}`;
+    }
+    return null;
+  }
+);
 
 export const memory_update = createRenderer(
-  (op) => 'UpdateMemory()',
-  (op) => op.output ? 'Memory updated' : null
+  (op) => `MemoryUpdate("${abbreviate(op.input.content, 30)}")`,
+  (op) => op.output ? `Added: "${abbreviate(op.input.content, 50)}"` : null
 );
diff --git a/packages/cletus/src/browser/operations/types.ts b/packages/cletus/src/browser/operations/types.ts
new file mode 100644
index 0000000..e0c62ae
--- /dev/null
+++ b/packages/cletus/src/browser/operations/types.ts
@@ -0,0 +1,16 @@
+import { Operation } from '../../schemas';
+
+/**
+ * Common props for all operation renderers
+ */
+export interface OperationRendererProps {
+  operation: Operation;
+  showInput?: boolean;
+  showOutput?: boolean;
+  operationIndex?: number;
+  onApprove?: (index: number) => void;
+  onReject?: (index: number) => void;
+  approvalDecision?: 'approve' | 'reject';
+  onToggleDecision?: (index: number, decision: 'approve' | 'reject') => void;
+  hasMultipleOperations?: boolean;
+}
diff --git a/packages/cletus/src/browser/pages/ChatPage.tsx b/packages/cletus/src/browser/pages/ChatPage.tsx
index 4a749c2..8883904 100644
--- a/packages/cletus/src/browser/pages/ChatPage.tsx
+++ b/packages/cletus/src/browser/pages/ChatPage.tsx
@@ -1,19 +1,18 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { ArrowLeft, Settings, CheckSquare, Trash2 } from 'lucide-react';
-import { Button } from '../components/ui/button';
-import { Input } from '../components/ui/input';
-import { ScrollArea } from '../components/ui/scroll-area';
-import { MessageList } from '../components/MessageList';
-import { ChatInput } from '../components/ChatInput';
-import { ModeSelector } from '../components/ModeSelector';
+import { ArrowLeft, CheckSquare, Settings, Trash2 } from 'lucide-react';
+import React, { useEffect, useRef, useState } from 'react';
+import type { ChatMeta, ChatMode, Config, Message, MessageContent } from '../../schemas';
 import { AgentModeSelector } from '../components/AgentModeSelector';
 import { AssistantSelector } from '../components/AssistantSelector';
-import { ModelSelector } from '../components/ModelSelector';
-import { CommandsPanel } from '../components/CommandsPanel';
+import { ChatInput } from '../components/ChatInput';
 import { ChatSettingsDialog } from '../components/ChatSettingsDialog';
+import { CommandsPanel } from '../components/CommandsPanel';
+import { MessageList } from '../components/MessageList';
+import { ModelSelector } from '../components/ModelSelector';
+import { ModeSelector } from '../components/ModeSelector';
 import { TodosModal } from '../components/TodosModal';
-import { OperationApprovalPanel } from '../components/OperationApprovalPanel';
-import type { Message, Config, ChatMeta, ChatMode } from '../../schemas';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { ScrollArea } from '../components/ui/scroll-area';
 import type { ClientMessage, ServerMessage } from '../websocket-types';
 import { sendClientMessage } from '../websocket-types';
 
@@ -37,8 +36,11 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
   const [isEditingTitle, setIsEditingTitle] = useState(false);
   const [editedTitle, setEditedTitle] = useState('');
   const [totalCost, setTotalCost] = useState(0);
+  const [operationDecisions, setOperationDecisions] = useState<Map<number, 'approve' | 'reject'>>(new Map());
   const [chatMetaState, setChatMetaState] = useState<ChatMeta | null>(null);
   const [cwd, setCwd] = useState<string | undefined>(undefined);
+  const [status, setStatus] = useState('');
+  const [isProcessing, setIsProcessing] = useState(false);
   const wsRef = useRef<WebSocket | null>(null);
   const modelsResolverRef = useRef<{
     resolve: (models: any[]) => void;
@@ -113,6 +115,8 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
 
       case 'response_complete':
         setPendingMessage(null);
+        setIsProcessing(false);
+        setStatus('');
         if (message.data.message) {
           setMessages(prev => [...prev, message.data.message]);
         }
@@ -135,7 +139,7 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
         break;
 
       case 'status_update':
-        // Status updates can be handled here if needed
+        setStatus(message.data.status);
         break;
 
       case 'elapsed_update':
@@ -156,6 +160,8 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
 
       case 'error':
         console.error('Server error:', message.data.message);
+        setIsProcessing(false);
+        setStatus('Error: ' + message.data.message);
         // Reject the pending models promise if one exists
         if (modelsResolverRef.current) {
           modelsResolverRef.current.reject(new Error(message.data.message));
@@ -177,6 +183,21 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
     }
   };
 
+  const handleSendMessage = (content: MessageContent[]) => {
+    send({
+      type: 'send_message',
+      data: { chatId, content },
+    });
+    setIsProcessing(true);
+    setStatus('Processing...');
+  };
+
+  const handleCancel = () => {
+    send({ type: 'cancel' });
+    setIsProcessing(false);
+    setStatus('');
+  };
+
   const handleModeChange = (mode: ChatMode) => {
     send({ type: 'update_chat_meta', data: { chatId, updates: { mode } } });
   };
@@ -297,11 +318,70 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
         rejected,
       },
     });
+    setOperationDecisions(new Map()); // Clear decisions after submission
+  };
+
+  const handleToggleOperationDecision = (idx: number, decision: 'approve' | 'reject') => {
+    const newDecisions = new Map(operationDecisions);
+    newDecisions.set(idx, decision);
+    setOperationDecisions(newDecisions);
+  };
+
+  const handleApproveAllOperations = () => {
+    const lastMessage = messages[messages.length - 1];
+    if (!lastMessage || lastMessage.role !== 'assistant') return;
+
+    const approvableOps = (lastMessage.operations || [])
+      .map((op, idx) => ({ op, idx }))
+      .filter(({ op }) => op.status === 'analyzed');
+
+    const approved = approvableOps.map(({ idx }) => idx);
+    handleOperationApproval(lastMessage, approved, []);
+  };
+
+  const handleRejectAllOperations = () => {
+    const lastMessage = messages[messages.length - 1];
+    if (!lastMessage || lastMessage.role !== 'assistant') return;
+
+    const approvableOps = (lastMessage.operations || [])
+      .map((op, idx) => ({ op, idx }))
+      .filter(({ op }) => op.status === 'analyzed');
+
+    const rejected = approvableOps.map(({ idx }) => idx);
+    handleOperationApproval(lastMessage, [], rejected);
+  };
+
+  const handleSubmitOperationDecisions = () => {
+    const lastMessage = messages[messages.length - 1];
+    if (!lastMessage || lastMessage.role !== 'assistant') return;
+
+    const approvableOps = (lastMessage.operations || [])
+      .map((op, idx) => ({ op, idx }))
+      .filter(({ op }) => op.status === 'analyzed');
+
+    const approved: number[] = [];
+    const rejected: number[] = [];
+
+    approvableOps.forEach(({ idx }) => {
+      const decision = operationDecisions.get(idx);
+      if (decision === 'approve') {
+        approved.push(idx);
+      } else if (decision === 'reject') {
+        rejected.push(idx);
+      }
+    });
+
+    handleOperationApproval(lastMessage, approved, rejected);
   };
 
   // Check if there are any messages with operations needing approval
-  const hasOperationsNeedingApproval = messages.some(msg =>
-    msg.operations?.some(op => op.status === 'analyzed')
+  const lastMessage = messages.length > 0 ? messages[messages.length - 1] : null;
+  const lastMessagePendingOps = lastMessage?.role === 'assistant'
+    ? (lastMessage.operations || []).filter(op => op.status === 'analyzed')
+    : [];
+  const hasMultiplePendingOps = lastMessagePendingOps.length > 1;
+  const allOperationsDecided = lastMessagePendingOps.every((_op, idx) =>
+    operationDecisions.has(idx)
   );
 
   if (!chatMeta) {
@@ -425,21 +505,11 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
             <ScrollArea className="flex-1 p-6">
               <MessageList
                 messages={pendingMessage ? [...messages, pendingMessage] : messages}
+                operationDecisions={operationDecisions}
+                onToggleOperationDecision={handleToggleOperationDecision}
+                onApproveOperation={(msg, idx) => handleOperationApproval(msg, [idx], [])}
+                onRejectOperation={(msg, idx) => handleOperationApproval(msg, [], [idx])}
               />
-
-              {/* Show approval panels for messages with operations needing approval */}
-              {messages.map(msg => {
-                const needsApproval = msg.operations?.some(op => op.status === 'analyzed');
-                if (!needsApproval) return null;
-
-                return (
-                  <OperationApprovalPanel
-                    key={msg.created}
-                    message={msg}
-                    onApproveReject={(approved, rejected) => handleOperationApproval(msg, approved, rejected)}
-                  />
-                );
-              })}
             </ScrollArea>
 
             {/* Input Area */}
@@ -450,8 +520,16 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
                 config={config}
                 messageCount={messages.length}
                 totalCost={totalCost}
-                onMessageSent={handleMessagesUpdate}
-                onWebSocketMessage={handleServerMessage}
+                status={status}
+                isProcessing={isProcessing}
+                onSendMessage={handleSendMessage}
+                onCancel={handleCancel}
+                onModelClick={() => setShowModelSelector(true)}
+                hasMultiplePendingOperations={hasMultiplePendingOps}
+                allOperationsDecided={allOperationsDecided}
+                onApproveAll={handleApproveAllOperations}
+                onRejectAll={handleRejectAllOperations}
+                onSubmitDecisions={handleSubmitOperationDecisions}
               />
             </div>
           </>
diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
index 69d131d..d1d9a34 100644
--- a/packages/cletus/src/browser/server.ts
+++ b/packages/cletus/src/browser/server.ts
@@ -11,7 +11,7 @@ import type { ClientMessage, ServerMessage } from './websocket-types';
 import { OperationManager } from '../operations/manager';
 import { CletusAI, createCletusAI } from '../ai';
 import { CletusChatAgent, createChatAgent } from '../agents/chat-agent';
-import { runChatOrchestrator } from '../agents/chat-orchestrator';
+import { OrchestratorEvent, runChatOrchestrator } from '../agents/chat-orchestrator';
 
 const __serverFilename = fileURLToPath(import.meta.url);
 const __serverDirname = path.dirname(__serverFilename);
@@ -129,6 +129,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
   let ai: CletusAI | null = null;
   let chatAgent: CletusChatAgent | null = null;
   let abortController: AbortController | null = null;
+  let configUpdateQueue: Promise<void> = Promise.resolve();
 
   // Type-safe message sender
   const sendMessage = (message: ServerMessage) => {
@@ -203,6 +204,33 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
     }
   };
 
+  // Helper to serialize config update operations
+  const withConfigUpdate = async <T>(fn: (config: ConfigFile) => Promise<T>) => {
+    // Queue this update to run after previous updates complete
+    const previousQueue = configUpdateQueue;
+
+    let resolveUpdate: () => void;
+    configUpdateQueue = new Promise<void>(resolve => {
+      resolveUpdate = resolve;
+    });
+
+    try {
+      // Wait for previous updates to complete
+      await previousQueue;
+
+      // Reload config to get latest state
+      if (config) {
+        await config.load();
+      }
+
+      // Run the update
+      return await withConfig(fn);
+    } finally {
+      // Mark this update as complete
+      resolveUpdate!();
+    }
+  };
+
   const withChatFile = async <T>(chatId: string, fn: (chatFile: ChatFile, chat: ChatMeta, config: ConfigFile) => T) => {
     return await withConfig(async (config) => {
       let chatFile: ChatFile;
@@ -228,6 +256,64 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
     });
   };
 
+  const handleOrchestratorEvent = (event: OrchestratorEvent, chatFile: ChatFile) => {
+    // Handle orchestrator events
+    switch (event.type) {
+      case 'pendingUpdate':
+        sendMessage({
+          type: 'pending_update',
+          data: { pending: event.pending },
+        });
+        break;
+      case 'update':
+        fireAndForget(chatFile.updateMessage(event.message));
+        sendMessage({
+          type: 'message_updated',
+          data: { message: event.message },
+        });
+        break;
+      case 'status':
+        sendMessage({
+          type: 'status_update',
+          data: { status: event.status },
+        });
+        break;
+      case 'usage':
+        sendMessage({
+          type: 'usage_update',
+          data: {
+            accumulated: event.accumulated,
+            accumulatedCost: event.accumulatedCost,
+            current: event.current,
+          },
+        });
+        break;
+      case 'elapsed':
+        sendMessage({
+          type: 'elapsed_update',
+          data: { ms: event.ms },
+        });
+        break;
+      case 'complete':
+        // Add the complete message to chat file (like CLI does)
+        if (event.message.content.length > 0) {
+          fireAndForget(chatFile.addMessage(event.message))
+        }
+        // Send the complete message
+        sendMessage({
+          type: 'response_complete',
+          data: { message: event.message },
+        });
+        break;
+      case 'error':
+        sendMessage({
+          type: 'error',
+          data: { message: event.error },
+        });
+        break;
+    }
+  };
+
   ws.on('message', async (data) => {
     try {
       const message = JSON.parse(data.toString()) as ClientMessage;
@@ -246,7 +332,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
 
         case 'create_chat': {
           const { name } = message.data;
-          await withConfig(async (config) => {
+          await withConfigUpdate(async (config) => {
 
             // Generate chat ID and create new chat
             const now = Date.now();
@@ -348,13 +434,6 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
             // Ensure AI and chat agent are loaded
             const { ai: aiInstance, chatAgent: chatAgentInstance } = await ensureAI();
 
-            const chatStatus = (status: string) => {
-              sendMessage({
-                type: 'status_update',
-                data: { status },
-              });
-            };
-
             const clearUsage = () => {
               const defaultContext = aiInstance.config.defaultContext;
               if (defaultContext && defaultContext.usage) {
@@ -384,62 +463,11 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
               clearUsage,
               getUsage,
             }, (event) => {
-              // Handle orchestrator events
-              switch (event.type) {
-                case 'pendingUpdate':
-                  sendMessage({
-                    type: 'pending_update',
-                    data: { pending: event.pending },
-                  });
-                  break;
-                case 'update':
-                  fireAndForget(chatFile.updateMessage(event.message));
-                  sendMessage({
-                    type: 'message_updated',
-                    data: { message: event.message },
-                  });
-                  break;
-                case 'status':
-                  chatStatus(event.status);
-                  break;
-                case 'usage':
-                  sendMessage({
-                    type: 'usage_update',
-                    data: {
-                      accumulated: event.accumulated,
-                      accumulatedCost: event.accumulatedCost,
-                      current: event.current,
-                    },
-                  });
-                  break;
-                case 'elapsed':
-                  sendMessage({
-                    type: 'elapsed_update',
-                    data: { ms: event.ms },
-                  });
-                  break;
-                case 'complete':
-                  // Add the complete message to chat file (like CLI does)
-                  if (event.message.content.length > 0) {
-                    fireAndForget(chatFile.addMessage(event.message))
-                  }
-                  // Send the complete message
-                  sendMessage({
-                    type: 'response_complete',
-                    data: { message: event.message },
-                  });
-                  break;
-                case 'error':
-                  sendMessage({
-                    type: 'error',
-                    data: { message: event.error },
-                  });
-                  break;
-              }
+              handleOrchestratorEvent(event, chatFile);
+            }).then(() => {
+              // Clear abort controller
+              abortController = null;
             });
-
-            // Clear abort controller
-            abortController = null;
           });
           break;
         }
@@ -470,7 +498,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
 
         case 'update_chat_meta': {
           const { chatId, updates, cwd } = message.data;
-          withConfig(async (config) => {
+          withConfigUpdate(async (config) => {
 
             await config.updateChat(chatId, updates);
             const updatedChat = config.getChats().find(c => c.id === chatId);
@@ -495,7 +523,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
         }
         case 'add_todo': {
           const { chatId, todo } = message.data;
-          withConfig(async (config) => {
+          withConfigUpdate(async (config) => {
             const chat = config.getChats().find(c => c.id === chatId);
             if (chat) {
               chat.todos.push({ id: Math.random().toString(36).substring(7), name: todo, done: false });
@@ -511,7 +539,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
         }
         case 'toggle_todo': {
           const { chatId, index } = message.data;
-          withConfig(async (config) => {
+          withConfigUpdate(async (config) => {
             const chat = config.getChats().find(c => c.id === chatId);
             if (chat && chat.todos[index]) {
               chat.todos[index].done = !chat.todos[index].done;
@@ -527,7 +555,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
         }
         case 'remove_todo': {
           const { chatId, index } = message.data;
-          withConfig(async (config) => {
+          withConfigUpdate(async (config) => {
             const chat = config.getChats().find(c => c.id === chatId);
             if (chat && chat.todos[index] !== undefined) {
               chat.todos.splice(index, 1);
@@ -543,7 +571,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
         }
         case 'clear_todos': {
           const { chatId } = message.data;
-          withConfig(async (config) => {
+          withConfigUpdate(async (config) => {
             await config.updateChat(chatId, { todos: [] });
             const updatedChat = config.getChats().find(c => c.id === chatId);
             sendMessage({
@@ -568,7 +596,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
         }
         case 'delete_chat': {
           const { chatId } = message.data;
-          withConfig(async (config) => {
+          withConfigUpdate(async (config) => {
             await config.deleteChat(chatId);
             removeChat(chatId); // Remove from cache
             sendMessage({
@@ -580,10 +608,10 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
         }
         case 'handle_operations': {
           const { chatId, messageCreated, approved, rejected } = message.data;
-          withChatFile(chatId, async (chatFile, chatMeta) => {
+          withChatFile(chatId, async (chatFile, chatMeta, config) => {
             const messages = chatFile.getMessages();
             const targetMessage = messages.find(m => m.created === messageCreated);
-          
+
             if (!targetMessage || !targetMessage.operations) {
               sendMessage({
                 type: 'error',
@@ -603,10 +631,13 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
               }
             }
 
+            // Ensure AI and chat agent are loaded
+            const { ai: aiInstance, chatAgent: chatAgentInstance } = await ensureAI();
+
             // Execute approved operations
+            let hasExecutedOperations = false;
             if (approved.length > 0) {
-              const { ai } = await ensureAI();
-              const ctx = await ai.buildContext({
+              const ctx = await aiInstance.buildContext({
                 chat: chatMeta,
                 chatData: chatFile,
                 chatMessage: targetMessage,
@@ -615,6 +646,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
               for (const idx of approved) {
                 if (operations[idx]) {
                   await manager.execute(operations[idx], true, ctx);
+                  hasExecutedOperations = true;
                 }
               }
             }
@@ -629,6 +661,50 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
               type: 'message_updated',
               data: { message: targetMessage },
             });
+
+            // If operations were executed, continue with the orchestrator
+            if (hasExecutedOperations) {
+              // Process AI response
+              abortController = new AbortController();
+
+              // Clear usage before running orchestrator
+              const clearUsage = () => {
+                const defaultContext = aiInstance.config.defaultContext;
+                if (defaultContext && defaultContext.usage) {
+                  defaultContext.usage.accumulated = {};
+                  defaultContext.usage.accumulatedCost = 0;
+                }
+              };
+
+              // Get current usage
+              const getUsage = () => {
+                const defaultContext = aiInstance.config.defaultContext;
+                if (defaultContext && defaultContext.usage) {
+                  return {
+                    accumulated: defaultContext.usage.accumulated,
+                    accumulatedCost: defaultContext.usage.accumulatedCost,
+                  };
+                }
+                return { accumulated: {}, accumulatedCost: 0 };
+              };
+
+              // Run orchestrator with updated chat file
+              await runChatOrchestrator({
+                chatAgent: chatAgentInstance,
+                messages: chatFile.getMessages(),
+                chatMeta: chatMeta,
+                config,
+                chatData: chatFile,
+                signal: abortController?.signal,
+                clearUsage,
+                getUsage,
+              }, (event) => {
+                handleOrchestratorEvent(event, chatFile);
+              }).then(() => {
+                // Clear abort controller
+                abortController = null;
+              });
+            }
           });
           break;
         }
diff --git a/packages/cletus/src/operations/planner.tsx b/packages/cletus/src/operations/planner.tsx
index 5d7bf71..67b47ac 100644
--- a/packages/cletus/src/operations/planner.tsx
+++ b/packages/cletus/src/operations/planner.tsx
@@ -106,7 +106,7 @@ export const todos_add = operationOf<{ name: string }, { id: string; name: strin
   ),
 });
 
-export const todos_done = operationOf<{ id: string }, { id: string; done: boolean }>({
+export const todos_done = operationOf<{ id: string }, { id: string; done: boolean }, {}, { todoName: string }>({
   mode: 'update',
   signature: 'todos_done(id: string)',
   status: () => 'Marking todo as done',
@@ -124,6 +124,7 @@ export const todos_done = operationOf<{ id: string }, { id: string; done: boolea
     return {
       analysis: `This will mark todo "${todo.name}" as done.`,
       doable: true,
+      cache: { todoName: todo.name },
     };
   },
   do: async ({ input }, { chat, config }) => {
@@ -145,28 +146,33 @@ export const todos_done = operationOf<{ id: string }, { id: string; done: boolea
 
     return { id: input.id, done: true };
   },
-  render: (op, ai, showInput, showOutput) => renderOperation(
-    op,
-    `TodosDone(id: ${abbreviate(op.input.id, 8)})`,
-    (op) => {
-      if (op.output) {
-        return 'Marked todo as done';
-      }
-      return null;
-    },
-    showInput, showOutput
-  ),
+  render: (op, ai, showInput, showOutput) => {
+    const todoName = op.cache?.todoName || op.input.id;
+    return renderOperation(
+      op,
+      `TodosDone("${abbreviate(todoName, 64)}")`,
+      (op) => {
+        if (op.output) {
+          return 'Marked todo as done';
+        }
+        return null;
+      },
+      showInput, showOutput
+    );
+  },
 });
 
-export const todos_get = operationOf<{ id: string }, { todo: TodoItem | null }>({
+export const todos_get = operationOf<{ id: string }, { todo: TodoItem | null }, {}, { todoName: string }>({
   mode: 'local',
   signature: 'todos_get(id: string)',
   status: () => 'Getting todo details',
   analyze: async ({ input }, { chat, config }) => {
     const chatObject = config.getChats().find((c) => c.id === chat?.id);
+    const todo = chatObject?.todos.find((t) => t.id === input.id);
     return {
       analysis: `This will get details for todo with id "${input.id}"`,
       doable: !!chatObject,
+      cache: todo ? { todoName: todo.name } : undefined,
     };
   },
   do: async ({ input }, { chat, config }) => {
@@ -174,20 +180,23 @@ export const todos_get = operationOf<{ id: string }, { todo: TodoItem | null }>(
     const todo = chatObject?.todos.find((t) => t.id === input.id);
     return { todo: todo || null };
   },
-  render: (op, ai, showInput, showOutput) => renderOperation(
-    op,
-    `TodosGet(id: ${abbreviate(op.input.id, 8)})`,
-    (op) => {
-      if (op.output) {
-        return op.output.todo ? `Found: "${op.output.todo.name}"` : 'Todo not found';
-      }
-      return null;
-    },
-    showInput, showOutput
-  ),
+  render: (op, ai, showInput, showOutput) => {
+    const todoName = op.cache?.todoName || op.input.id;
+    return renderOperation(
+      op,
+      `TodosGet("${abbreviate(todoName, 64)}")`,
+      (op) => {
+        if (op.output) {
+          return op.output.todo ? `Found: "${abbreviate(op.output.todo.name, 64)}"` : 'Todo not found';
+        }
+        return null;
+      },
+      showInput, showOutput
+    );
+  },
 });
 
-export const todos_remove = operationOf<{ id: string }, { id: string; removed: boolean }>({
+export const todos_remove = operationOf<{ id: string }, { id: string; removed: boolean }, {}, { todoName: string }>({
   mode: 'delete',
   signature: 'todos_remove(id: string)',
   status: () => 'Removing todo',
@@ -205,6 +214,7 @@ export const todos_remove = operationOf<{ id: string }, { id: string; removed: b
     return {
       analysis: `This will remove todo "${todo.name}"`,
       doable: true,
+      cache: { todoName: todo.name },
     };
   },
   do: async ({ input }, { chat, config }) => {
@@ -218,17 +228,20 @@ export const todos_remove = operationOf<{ id: string }, { id: string; removed: b
 
     return { id: input.id, removed: true };
   },
-  render: (op, ai, showInput, showOutput) => renderOperation(
-    op,
-    `TodosRemove(id: ${abbreviate(op.input.id, 8)})`,
-    (op) => {
-      if (op.output) {
-        return 'Removed todo';
-      }
-      return null;
-    },
-    showInput, showOutput
-  ),
+  render: (op, ai, showInput, showOutput) => {
+    const todoName = op.cache?.todoName || op.input.id;
+    return renderOperation(
+      op,
+      `TodosRemove("${abbreviate(todoName, 64)}")`,
+      (op) => {
+        if (op.output) {
+          return 'Removed todo';
+        }
+        return null;
+      },
+      showInput, showOutput
+    );
+  },
 });
 
 export const todos_replace = operationOf<{ todos: TodoItem[] }, { count: number }>({

From 20622bf01b70da1d8d3e1e36d3dade9bec3440f9 Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Tue, 16 Dec 2025 09:38:53 -0500
Subject: [PATCH 12/27] Add QuestionsModal component and integrate with
 ChatPage

Introduces a new QuestionsModal component for collecting user answers to dynamic questions. Integrates the modal into ChatPage, handling submission and cancellation, and updates chat metadata accordingly.
---
 .../src/browser/components/QuestionsModal.tsx | 337 ++++++++++++++++++
 .../cletus/src/browser/pages/ChatPage.tsx     |  42 +++
 2 files changed, 379 insertions(+)
 create mode 100644 packages/cletus/src/browser/components/QuestionsModal.tsx

diff --git a/packages/cletus/src/browser/components/QuestionsModal.tsx b/packages/cletus/src/browser/components/QuestionsModal.tsx
new file mode 100644
index 0000000..e4b14e4
--- /dev/null
+++ b/packages/cletus/src/browser/components/QuestionsModal.tsx
@@ -0,0 +1,337 @@
+import React, { useState } from 'react';
+import { X, CheckCircle2, ChevronLeft, ChevronRight } from 'lucide-react';
+import type { Question, MessageContent } from '../../schemas';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { cn } from '../lib/utils';
+
+interface QuestionsModalProps {
+  questions: Question[];
+  onSubmit: (content: MessageContent[]) => void;
+  onCancel: () => void;
+}
+
+export const QuestionsModal: React.FC<QuestionsModalProps> = ({
+  questions,
+  onSubmit,
+  onCancel,
+}) => {
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+  const [questionAnswers, setQuestionAnswers] = useState<Record<number, Set<number>>>({});
+  const [questionCustomAnswers, setQuestionCustomAnswers] = useState<Record<number, string>>({});
+  const [customAnswerInput, setCustomAnswerInput] = useState('');
+  const [isEditingCustom, setIsEditingCustom] = useState(false);
+
+  if (questions.length === 0) return null;
+
+  const currentQuestion = questions[currentQuestionIndex];
+  const currentSelections = questionAnswers[currentQuestionIndex] || new Set<number>();
+  const isRadio = currentQuestion.min === 1 && currentQuestion.max === 1;
+  const hasCustomAnswer = questionCustomAnswers[currentQuestionIndex]?.trim();
+  const totalAnswers = currentSelections.size + (hasCustomAnswer ? 1 : 0);
+  const canProceed = totalAnswers >= currentQuestion.min;
+
+  const handleToggleOption = (optionIndex: number) => {
+    const newSelections = new Set(currentSelections);
+    if (isRadio) {
+      // Radio: clear all and select current
+      newSelections.clear();
+      newSelections.add(optionIndex);
+    } else {
+      // Checkbox: toggle current
+      if (newSelections.has(optionIndex)) {
+        newSelections.delete(optionIndex);
+      } else if (newSelections.size < currentQuestion.max) {
+        newSelections.add(optionIndex);
+      }
+    }
+    setQuestionAnswers({ ...questionAnswers, [currentQuestionIndex]: newSelections });
+  };
+
+  const handleSaveCustomAnswer = () => {
+    if (customAnswerInput.trim()) {
+      setQuestionCustomAnswers({
+        ...questionCustomAnswers,
+        [currentQuestionIndex]: customAnswerInput.trim(),
+      });
+    } else {
+      // Remove custom answer if empty
+      const newCustomAnswers = { ...questionCustomAnswers };
+      delete newCustomAnswers[currentQuestionIndex];
+      setQuestionCustomAnswers(newCustomAnswers);
+    }
+    setIsEditingCustom(false);
+    setCustomAnswerInput('');
+  };
+
+  const handleNext = () => {
+    if (!canProceed) return;
+
+    if (currentQuestionIndex < questions.length - 1) {
+      setCurrentQuestionIndex(currentQuestionIndex + 1);
+    }
+  };
+
+  const handleBack = () => {
+    if (currentQuestionIndex > 0) {
+      setCurrentQuestionIndex(currentQuestionIndex - 1);
+    }
+  };
+
+  const handleSubmit = () => {
+    if (!canProceed) return;
+
+    // Format answers as markdown
+    let questionText = '## Questions\n';
+    let answerText = '## Answers\n';
+
+    for (let i = 0; i < questions.length; i++) {
+      const question = questions[i];
+      const selections = questionAnswers[i] || new Set<number>();
+      const customAnswer = questionCustomAnswers[i];
+
+      answerText += `**${question.name}:**\n`;
+      questionText += `**${question.name}:** ${question.min === question.max ? `(choose ${question.min})` : `(choose ${question.min}-${question.max})`}\n`;
+
+      for (const option of question.options) {
+        questionText += `- ${option.label}?\n`;
+      }
+
+      if (selections.size > 0) {
+        Array.from(selections).forEach((optionIndex) => {
+          if (optionIndex < question.options.length) {
+            answerText += `- ${question.options[optionIndex].label}\n`;
+          }
+        });
+      }
+
+      if (customAnswer) {
+        answerText += `- ${customAnswer}\n`;
+      }
+
+      if (selections.size === 0 && !customAnswer) {
+        answerText += `- (no answer provided)\n`;
+      }
+
+      if (question.custom) {
+        questionText += `- *${question.customLabel || 'Other'}?*\n`;
+      }
+
+      answerText += '\n';
+      questionText += '\n';
+    }
+
+    // Create content array with questions and answers
+    const content: MessageContent[] = [
+      { type: 'text', content: questionText.trim() },
+      { type: 'text', content: answerText.trim() },
+    ];
+
+    onSubmit(content);
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+      <div className="bg-card border border-border rounded-lg shadow-xl max-w-2xl w-full max-h-[80vh] flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-border">
+          <div>
+            <h2 className="text-lg font-semibold text-neon-cyan">Questions</h2>
+            <p className="text-sm text-muted-foreground">
+              {currentQuestionIndex + 1} of {questions.length}
+            </p>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onCancel}
+            className="text-muted-foreground hover:text-foreground"
+          >
+            <X className="w-5 h-5" />
+          </Button>
+        </div>
+
+        {/* Question tabs */}
+        <div className="flex gap-2 p-3 border-b border-border overflow-x-auto">
+          {questions.map((q, idx) => (
+            <button
+              key={idx}
+              onClick={() => setCurrentQuestionIndex(idx)}
+              className={cn(
+                'px-3 py-1.5 text-sm rounded transition-colors whitespace-nowrap h-8',
+                idx === currentQuestionIndex
+                  ? 'bg-neon-cyan/20 text-neon-cyan border border-neon-cyan'
+                  : 'bg-muted text-muted-foreground hover:text-foreground hover:bg-muted/80'
+              )}
+            >
+              {q.name}
+            </button>
+          ))}
+        </div>
+
+        {/* Question content */}
+        <div className="flex-1 overflow-y-auto p-6 space-y-4">
+          <div>
+            <h3 className="text-base font-medium text-foreground mb-1">{currentQuestion.name}</h3>
+            <p className="text-sm text-muted-foreground">
+              Select {currentQuestion.min === currentQuestion.max
+                ? currentQuestion.min
+                : `${currentQuestion.min}-${currentQuestion.max}`} option(s)
+            </p>
+          </div>
+
+          {/* Options */}
+          <div className="space-y-2">
+            {currentQuestion.options.map((option, optionIndex) => {
+              const isSelected = currentSelections.has(optionIndex);
+              return (
+                <button
+                  key={optionIndex}
+                  onClick={() => handleToggleOption(optionIndex)}
+                  className={cn(
+                    'w-full text-left p-3 rounded border transition-colors',
+                    isSelected
+                      ? 'bg-neon-cyan/10 border-neon-cyan text-neon-cyan'
+                      : 'bg-muted/50 border-border hover:border-muted-foreground'
+                  )}
+                >
+                  <div className="flex items-start gap-3">
+                    <div className="mt-0.5">
+                      {isRadio ? (
+                        <div className={cn(
+                          'w-4 h-4 rounded-full border-2 flex items-center justify-center',
+                          isSelected ? 'border-neon-cyan' : 'border-muted-foreground'
+                        )}>
+                          {isSelected && <div className="w-2 h-2 rounded-full bg-neon-cyan" />}
+                        </div>
+                      ) : (
+                        <div className={cn(
+                          'w-4 h-4 rounded border-2 flex items-center justify-center',
+                          isSelected ? 'border-neon-cyan bg-neon-cyan' : 'border-muted-foreground'
+                        )}>
+                          {isSelected && <CheckCircle2 className="w-3 h-3 text-background" />}
+                        </div>
+                      )}
+                    </div>
+                    <div className="flex-1">
+                      <div className={cn(
+                        'font-medium',
+                        isSelected ? 'text-neon-cyan' : 'text-foreground'
+                      )}>{option.label}</div>
+                      {option.description && (
+                        <div className="text-sm text-muted-foreground mt-1">
+                          {option.description}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Custom answer */}
+          {currentQuestion.custom && (
+            <div className="pt-2">
+              {!isEditingCustom ? (
+                <div>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      setIsEditingCustom(true);
+                      setCustomAnswerInput(questionCustomAnswers[currentQuestionIndex] || '');
+                    }}
+                    className="text-muted-foreground hover:text-foreground"
+                  >
+                    {hasCustomAnswer ? 'Edit custom answer' : currentQuestion.customLabel || 'Other (custom answer)'}
+                  </Button>
+                  {hasCustomAnswer && (
+                    <div className="mt-2 p-3 bg-neon-cyan/10 border border-neon-cyan rounded text-sm">
+                      <div className="font-medium text-neon-cyan mb-1">Custom answer:</div>
+                      <div className="text-foreground">{questionCustomAnswers[currentQuestionIndex]}</div>
+                    </div>
+                  )}
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  <label className="text-sm font-medium text-foreground">
+                    {currentQuestion.customLabel || 'Other (custom answer)'}
+                  </label>
+                  <Input
+                    value={customAnswerInput}
+                    onChange={(e) => setCustomAnswerInput(e.target.value)}
+                    placeholder="Enter your answer..."
+                    className="w-full mt-1"
+                    autoFocus
+                  />
+                  <div className="flex gap-2">
+                    <Button
+                      variant="neon"
+                      size="sm"
+                      onClick={handleSaveCustomAnswer}
+                    >
+                      Save
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        setIsEditingCustom(false);
+                        setCustomAnswerInput('');
+                      }}
+                    >
+                      Cancel
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Validation message */}
+          {!canProceed && (
+            <div className="text-sm text-yellow-400">
+              Please select at least {currentQuestion.min} option(s) to continue
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between p-4 border-t border-border">
+          <Button
+            variant="outline"
+            onClick={handleBack}
+            disabled={currentQuestionIndex === 0}
+            className="gap-2"
+          >
+            <ChevronLeft className="w-4 h-4" />
+            Back
+          </Button>
+
+          {currentQuestionIndex < questions.length - 1 ? (
+            <Button
+              variant="neon"
+              onClick={handleNext}
+              disabled={!canProceed}
+              className="gap-2"
+            >
+              Next
+              <ChevronRight className="w-4 h-4" />
+            </Button>
+          ) : (
+            <Button
+              variant="neon"
+              onClick={handleSubmit}
+              disabled={!canProceed}
+              className="gap-2"
+            >
+              <CheckCircle2 className="w-4 h-4" />
+              Submit Answers
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/pages/ChatPage.tsx b/packages/cletus/src/browser/pages/ChatPage.tsx
index 8883904..53f83f5 100644
--- a/packages/cletus/src/browser/pages/ChatPage.tsx
+++ b/packages/cletus/src/browser/pages/ChatPage.tsx
@@ -9,6 +9,7 @@ import { CommandsPanel } from '../components/CommandsPanel';
 import { MessageList } from '../components/MessageList';
 import { ModelSelector } from '../components/ModelSelector';
 import { ModeSelector } from '../components/ModeSelector';
+import { QuestionsModal } from '../components/QuestionsModal';
 import { TodosModal } from '../components/TodosModal';
 import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
@@ -198,6 +199,38 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
     setStatus('');
   };
 
+  const handleQuestionsSubmit = async (content: MessageContent[]) => {
+    // Clear questions from chat meta
+    send({
+      type: 'update_chat_meta',
+      data: { chatId, updates: { questions: [] } },
+    });
+
+    // Add the questions and answers as messages
+    // First message: assistant message with questions
+    send({
+      type: 'send_message',
+      data: {
+        chatId,
+        content: [content[0]], // questions
+      },
+    });
+
+    // Wait a bit for the first message to be processed
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // Second message: user message with answers, which will trigger the orchestrator
+    handleSendMessage([content[1]]); // answers
+  };
+
+  const handleQuestionsCancel = () => {
+    // Clear questions from chat meta
+    send({
+      type: 'update_chat_meta',
+      data: { chatId, updates: { questions: [] } },
+    });
+  };
+
   const handleModeChange = (mode: ChatMode) => {
     send({ type: 'update_chat_meta', data: { chatId, updates: { mode } } });
   };
@@ -571,6 +604,15 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
         />
       )}
 
+      {/* Questions Modal */}
+      {chatMeta.questions && chatMeta.questions.length > 0 && !isProcessing && (
+        <QuestionsModal
+          questions={chatMeta.questions}
+          onSubmit={handleQuestionsSubmit}
+          onCancel={handleQuestionsCancel}
+        />
+      )}
+
       {/* Clear Messages Confirmation Dialog */}
       {showClearConfirm && (
         <div

From 21fc26a3d81855b40616993d5f0c9b0a5263f4de Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Tue, 16 Dec 2025 17:28:10 -0500
Subject: [PATCH 13/27] Add ToolsetSelector and improve question answer flow

Introduces a new ToolsetSelector component for selecting toolsets in the chat UI and integrates it into ChatPage. Refactors the question answering flow: question answers are now submitted as structured data to the server, which formats and adds messages, clears questions, and triggers the orchestrator. Updates websocket types and server logic to support the new 'submit_question_answers' message. Cleans up ChatInput and AgentModeSelector UI for clarity.
---
 .../browser/components/AgentModeSelector.tsx  |  53 ++++---
 .../src/browser/components/ChatInput.tsx      |  27 ----
 .../src/browser/components/QuestionsModal.tsx |  51 +------
 .../browser/components/ToolsetSelector.tsx    |  71 +++++++++
 .../cletus/src/browser/pages/ChatPage.tsx     |  41 ++---
 packages/cletus/src/browser/server.ts         | 142 ++++++++++++++++++
 .../cletus/src/browser/websocket-types.ts     |   3 +-
 7 files changed, 269 insertions(+), 119 deletions(-)
 create mode 100644 packages/cletus/src/browser/components/ToolsetSelector.tsx

diff --git a/packages/cletus/src/browser/components/AgentModeSelector.tsx b/packages/cletus/src/browser/components/AgentModeSelector.tsx
index 4c8fb5c..bc7eec8 100644
--- a/packages/cletus/src/browser/components/AgentModeSelector.tsx
+++ b/packages/cletus/src/browser/components/AgentModeSelector.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { Select, SelectOption } from './ui/select';
 import { AgentMode } from '../../schemas';
+import { cn } from '../lib/utils';
 
 interface AgentModeSelectorProps {
   agentMode: AgentMode;
@@ -8,30 +8,39 @@ interface AgentModeSelectorProps {
   disabled?: boolean;
 }
 
-const AGENT_MODE_OPTIONS: SelectOption<AgentMode>[] = [
-  {
-    value: 'default',
-    label: 'Run Mode',
-    description: 'All toolsets available',
-  },
-  {
-    value: 'plan',
-    label: 'Plan Mode',
-    description: 'Only planning related tools',
-  },
-];
-
 export const AgentModeSelector: React.FC<AgentModeSelectorProps> = ({ agentMode, onChange, disabled }) => {
+  const currentMode = agentMode || 'default';
+
   return (
-    <div className="flex items-center gap-2">
-      <label className="text-sm text-muted-foreground">Agent:</label>
-      <Select
-        value={agentMode || 'default'}
-        options={AGENT_MODE_OPTIONS}
-        onChange={value => onChange(value as AgentMode)}
+    <div className="flex items-center gap-1 rounded-md border border-border bg-muted/30 p-1">
+      <button
+        onClick={() => onChange('default')}
+        disabled={disabled}
+        className={cn(
+          'px-3 py-1 text-sm rounded transition-colors',
+          currentMode === 'default'
+            ? 'bg-neon-cyan/20 text-neon-cyan border border-neon-cyan'
+            : 'text-muted-foreground hover:text-foreground hover:bg-muted/50',
+          disabled && 'opacity-50 cursor-not-allowed'
+        )}
+        title="Run Mode - All toolsets available"
+      >
+        Run
+      </button>
+      <button
+        onClick={() => onChange('plan')}
         disabled={disabled}
-        className="min-w-[140px]"
-      />
+        className={cn(
+          'px-3 py-1 text-sm rounded transition-colors',
+          currentMode === 'plan'
+            ? 'bg-neon-cyan/20 text-neon-cyan border border-neon-cyan'
+            : 'text-muted-foreground hover:text-foreground hover:bg-muted/50',
+          disabled && 'opacity-50 cursor-not-allowed'
+        )}
+        title="Plan Mode - Only planning related tools"
+      >
+        Plan
+      </button>
     </div>
   );
 };
diff --git a/packages/cletus/src/browser/components/ChatInput.tsx b/packages/cletus/src/browser/components/ChatInput.tsx
index 21770fb..53edb67 100644
--- a/packages/cletus/src/browser/components/ChatInput.tsx
+++ b/packages/cletus/src/browser/components/ChatInput.tsx
@@ -6,19 +6,6 @@ import type { ChatMeta, MessageContent, Config } from '../../schemas';
 import type { ClientMessage, ServerMessage } from '../websocket-types';
 import { sendClientMessage } from '../websocket-types';
 
-const MODETEXT: Record<string, string> = {
-  none: 'local allowed',
-  read: 'read allowed',
-  create: 'create allowed',
-  update: 'update allowed',
-  delete: 'delete allowed',
-};
-
-const AGENTMODETEXT: Record<string, string> = {
-  default: 'run mode',
-  plan: 'plan mode',
-};
-
 interface ChatInputProps {
   chatId: string;
   chatMeta: ChatMeta;
@@ -116,10 +103,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({
         />
         <div className="flex items-center justify-between">
           <div className="text-xs flex items-center gap-2 flex-wrap flex-1">
-            <span className="px-2 py-1 rounded bg-muted text-muted-foreground">
-              {chatMeta.mode}
-            </span>
-            <span className="text-muted-foreground">│</span>
             <span
               className="text-foreground cursor-pointer hover:text-neon-cyan transition-colors"
               onClick={onModelClick}
@@ -127,16 +110,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({
             >
               {chatMeta.model || config.user.models?.chat || 'no model'}
             </span>
-            {chatMeta.assistant && (
-              <>
-                <span className="text-muted-foreground">│</span>
-                <span className="text-muted-foreground">{chatMeta.assistant}</span>
-              </>
-            )}
-            <span className="text-muted-foreground">│</span>
-            <span className="text-muted-foreground">{MODETEXT[chatMeta.mode] || chatMeta.mode}</span>
-            <span className="text-muted-foreground">│</span>
-            <span className="text-muted-foreground">{AGENTMODETEXT[chatMeta.agentMode || 'default']}</span>
             <span className="text-muted-foreground">│</span>
             <span className="text-muted-foreground">{chatMeta.toolset ? `${chatMeta.toolset} toolset` : 'adaptive tools'}</span>
             <span className="text-muted-foreground">│</span>
diff --git a/packages/cletus/src/browser/components/QuestionsModal.tsx b/packages/cletus/src/browser/components/QuestionsModal.tsx
index e4b14e4..18b6dc1 100644
--- a/packages/cletus/src/browser/components/QuestionsModal.tsx
+++ b/packages/cletus/src/browser/components/QuestionsModal.tsx
@@ -7,7 +7,7 @@ import { cn } from '../lib/utils';
 
 interface QuestionsModalProps {
   questions: Question[];
-  onSubmit: (content: MessageContent[]) => void;
+  onSubmit: (questionAnswers: Record<number, Set<number>>, questionCustomAnswers: Record<number, string>) => void;
   onCancel: () => void;
 }
 
@@ -80,54 +80,7 @@ export const QuestionsModal: React.FC<QuestionsModalProps> = ({
 
   const handleSubmit = () => {
     if (!canProceed) return;
-
-    // Format answers as markdown
-    let questionText = '## Questions\n';
-    let answerText = '## Answers\n';
-
-    for (let i = 0; i < questions.length; i++) {
-      const question = questions[i];
-      const selections = questionAnswers[i] || new Set<number>();
-      const customAnswer = questionCustomAnswers[i];
-
-      answerText += `**${question.name}:**\n`;
-      questionText += `**${question.name}:** ${question.min === question.max ? `(choose ${question.min})` : `(choose ${question.min}-${question.max})`}\n`;
-
-      for (const option of question.options) {
-        questionText += `- ${option.label}?\n`;
-      }
-
-      if (selections.size > 0) {
-        Array.from(selections).forEach((optionIndex) => {
-          if (optionIndex < question.options.length) {
-            answerText += `- ${question.options[optionIndex].label}\n`;
-          }
-        });
-      }
-
-      if (customAnswer) {
-        answerText += `- ${customAnswer}\n`;
-      }
-
-      if (selections.size === 0 && !customAnswer) {
-        answerText += `- (no answer provided)\n`;
-      }
-
-      if (question.custom) {
-        questionText += `- *${question.customLabel || 'Other'}?*\n`;
-      }
-
-      answerText += '\n';
-      questionText += '\n';
-    }
-
-    // Create content array with questions and answers
-    const content: MessageContent[] = [
-      { type: 'text', content: questionText.trim() },
-      { type: 'text', content: answerText.trim() },
-    ];
-
-    onSubmit(content);
+    onSubmit(questionAnswers, questionCustomAnswers);
   };
 
   return (
diff --git a/packages/cletus/src/browser/components/ToolsetSelector.tsx b/packages/cletus/src/browser/components/ToolsetSelector.tsx
new file mode 100644
index 0000000..e029a9f
--- /dev/null
+++ b/packages/cletus/src/browser/components/ToolsetSelector.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Select, SelectOption } from './ui/select';
+
+interface ToolsetSelectorProps {
+  toolset?: string | null;
+  onChange: (toolset: string | null) => void;
+  disabled?: boolean;
+}
+
+const TOOLSET_OPTIONS: SelectOption<string>[] = [
+  {
+    value: 'adaptive',
+    label: 'Adaptive',
+    description: 'AI selects tools based on context',
+  },
+  {
+    value: 'planner',
+    label: 'Planner',
+    description: 'Todo and task management',
+  },
+  {
+    value: 'librarian',
+    label: 'Librarian',
+    description: 'File and code operations',
+  },
+  {
+    value: 'clerk',
+    label: 'Clerk',
+    description: 'Shell and system commands',
+  },
+  {
+    value: 'secretary',
+    label: 'Secretary',
+    description: 'Chat and message operations',
+  },
+  {
+    value: 'architect',
+    label: 'Architect',
+    description: 'Software design and planning',
+  },
+  {
+    value: 'artist',
+    label: 'Artist',
+    description: 'Image generation and editing',
+  },
+  {
+    value: 'internet',
+    label: 'Internet',
+    description: 'Web search and fetching',
+  },
+  {
+    value: 'dba',
+    label: 'DBA',
+    description: 'Database operations',
+  },
+];
+
+export const ToolsetSelector: React.FC<ToolsetSelectorProps> = ({ toolset, onChange, disabled }) => {
+  return (
+    <div className="flex items-center gap-2">
+      <label className="text-sm text-muted-foreground">Toolset:</label>
+      <Select
+        value={toolset || 'adaptive'}
+        options={TOOLSET_OPTIONS}
+        onChange={value => onChange(value === 'adaptive' ? null : value)}
+        disabled={disabled}
+        className="min-w-[140px]"
+      />
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/pages/ChatPage.tsx b/packages/cletus/src/browser/pages/ChatPage.tsx
index 53f83f5..d1fb434 100644
--- a/packages/cletus/src/browser/pages/ChatPage.tsx
+++ b/packages/cletus/src/browser/pages/ChatPage.tsx
@@ -11,6 +11,7 @@ import { ModelSelector } from '../components/ModelSelector';
 import { ModeSelector } from '../components/ModeSelector';
 import { QuestionsModal } from '../components/QuestionsModal';
 import { TodosModal } from '../components/TodosModal';
+import { ToolsetSelector } from '../components/ToolsetSelector';
 import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
 import { ScrollArea } from '../components/ui/scroll-area';
@@ -199,32 +200,24 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
     setStatus('');
   };
 
-  const handleQuestionsSubmit = async (content: MessageContent[]) => {
-    // Clear questions from chat meta
-    send({
-      type: 'update_chat_meta',
-      data: { chatId, updates: { questions: [] } },
-    });
+  const handleQuestionsSubmit = (questionAnswers: Record<number, Set<number>>, questionCustomAnswers: Record<number, string>) => {
+    // Convert Sets to arrays for JSON serialization
+    const answersArray: Record<number, number[]> = {};
+    for (const [key, value] of Object.entries(questionAnswers)) {
+      answersArray[Number(key)] = Array.from(value);
+    }
 
-    // Add the questions and answers as messages
-    // First message: assistant message with questions
+    // Send to server to format, add messages, and run orchestrator
     send({
-      type: 'send_message',
-      data: {
-        chatId,
-        content: [content[0]], // questions
-      },
+      type: 'submit_question_answers',
+      data: { chatId, questionAnswers: answersArray, questionCustomAnswers },
     });
-
-    // Wait a bit for the first message to be processed
-    await new Promise(resolve => setTimeout(resolve, 100));
-
-    // Second message: user message with answers, which will trigger the orchestrator
-    handleSendMessage([content[1]]); // answers
+    setIsProcessing(true);
+    setStatus('Processing answers...');
   };
 
   const handleQuestionsCancel = () => {
-    // Clear questions from chat meta
+    // Clear questions from chat meta without adding messages
     send({
       type: 'update_chat_meta',
       data: { chatId, updates: { questions: [] } },
@@ -239,6 +232,10 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
     send({ type: 'update_chat_meta', data: { chatId, updates: { agentMode } } });
   };
 
+  const handleToolsetChange = (toolset: string | null) => {
+    send({ type: 'update_chat_meta', data: { chatId, updates: { toolset: toolset || undefined } } });
+  };
+
   const handleAssistantChange = (assistant: string) => {
     const assistantValue = assistant === 'none' ? undefined : assistant;
     send({ type: 'update_chat_meta', data: { chatId, updates: { assistant: assistantValue } } });
@@ -497,6 +494,10 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
                 agentMode={chatMeta.agentMode || 'default'}
                 onChange={handleAgentModeChange}
               />
+              <ToolsetSelector
+                toolset={chatMeta.toolset}
+                onChange={handleToolsetChange}
+              />
               <Button
                 variant="ghost"
                 size="icon"
diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
index d1d9a34..393e7cd 100644
--- a/packages/cletus/src/browser/server.ts
+++ b/packages/cletus/src/browser/server.ts
@@ -708,6 +708,148 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
           });
           break;
         }
+        case 'submit_question_answers': {
+          const { chatId, questionAnswers, questionCustomAnswers } = message.data;
+          withChatFile(chatId, async (chatFile, chatMeta, config) => {
+            if (!chatMeta.questions || chatMeta.questions.length === 0) {
+              sendMessage({
+                type: 'error',
+                data: { message: 'No questions to answer' },
+              });
+              return;
+            }
+
+            // Format answers as markdown (matching CLI behavior)
+            let questionText = '## Questions\n';
+            let answerText = '## Answers\n';
+
+            for (let i = 0; i < chatMeta.questions.length; i++) {
+              const question = chatMeta.questions[i];
+              const selections = new Set(questionAnswers[i] || []);
+              const customAnswer = questionCustomAnswers[i];
+
+              answerText += `**${question.name}:**\n`;
+              questionText += `**${question.name}:** ${question.min === question.max ? `(choose ${question.min})` : `(choose ${question.min}-${question.max})`}\n`;
+
+              for (const option of question.options) {
+                questionText += `- ${option.label}?\n`;
+              }
+
+              if (selections.size > 0) {
+                Array.from(selections).forEach((optionIndex) => {
+                  if (optionIndex < question.options.length) {
+                    answerText += `- ${question.options[optionIndex].label}\n`;
+                  }
+                });
+              }
+
+              if (customAnswer) {
+                answerText += `- ${customAnswer}\n`;
+              }
+
+              if (selections.size === 0 && !customAnswer) {
+                answerText += `- (no answer provided)\n`;
+              }
+
+              if (question.custom) {
+                questionText += `- *${question.customLabel || 'Other'}?*\n`;
+              }
+
+              answerText += '\n';
+              questionText += '\n';
+            }
+
+            // Clear questions from chat meta
+            await withConfigUpdate(async (config) => {
+              const chats = config.getChats();
+              const chatIndex = chats.findIndex(c => c.id === chatId);
+              if (chatIndex !== -1) {
+                chats[chatIndex].questions = [];
+                await config.updateChat(chatId, { questions: [] });
+              }
+            });
+
+            // Add the formatted questions as an assistant message
+            const questionMessage: Message = {
+              role: 'assistant',
+              name: chatMeta.assistant,
+              content: [{ type: 'text', content: questionText.trim() }],
+              created: Date.now(),
+              operations: [],
+            };
+
+            await chatFile.addMessage(questionMessage);
+            sendMessage({
+              type: 'message_added',
+              data: { message: questionMessage },
+            });
+
+            // Add the formatted answer as a user message
+            const answerMessage: Message = {
+              role: 'user',
+              name: config.getData().user.name,
+              content: [{ type: 'text', content: answerText.trim() }],
+              created: Date.now(),
+            };
+
+            await chatFile.addMessage(answerMessage);
+            sendMessage({
+              type: 'message_added',
+              data: { message: answerMessage },
+            });
+
+            // Send updated chat meta
+            sendMessage({
+              type: 'chat_updated',
+              data: { chat: { ...chatMeta, questions: [] } },
+            });
+
+            // Ensure AI and chat agent are loaded
+            const { ai: aiInstance, chatAgent: chatAgentInstance } = await ensureAI();
+
+            // Run orchestrator
+            abortController = new AbortController();
+
+            // Clear usage before running orchestrator
+            const clearUsage = () => {
+              const defaultContext = aiInstance.config.defaultContext;
+              if (defaultContext && defaultContext.usage) {
+                defaultContext.usage.accumulated = {};
+                defaultContext.usage.accumulatedCost = 0;
+              }
+            };
+
+            // Get current usage
+            const getUsage = () => {
+              const defaultContext = aiInstance.config.defaultContext;
+              if (defaultContext && defaultContext.usage) {
+                return {
+                  accumulated: defaultContext.usage.accumulated,
+                  accumulatedCost: defaultContext.usage.accumulatedCost,
+                };
+              }
+              return { accumulated: {}, accumulatedCost: 0 };
+            };
+
+            // Run orchestrator with updated chat file
+            await runChatOrchestrator({
+              chatAgent: chatAgentInstance,
+              messages: chatFile.getMessages(),
+              chatMeta: { ...chatMeta, questions: [] },
+              config,
+              chatData: chatFile,
+              signal: abortController?.signal,
+              clearUsage,
+              getUsage,
+            }, (event) => {
+              handleOrchestratorEvent(event, chatFile);
+            }).then(() => {
+              // Clear abort controller
+              abortController = null;
+            });
+          });
+          break;
+        }
         default:
           sendMessage({
             type: 'error',
diff --git a/packages/cletus/src/browser/websocket-types.ts b/packages/cletus/src/browser/websocket-types.ts
index 803eaca..b0d94e2 100644
--- a/packages/cletus/src/browser/websocket-types.ts
+++ b/packages/cletus/src/browser/websocket-types.ts
@@ -20,7 +20,8 @@ export type ClientMessage =
   | { type: 'clear_messages'; data: { chatId: string } }
   | { type: 'delete_chat'; data: { chatId: string } }
   | { type: 'get_models'; data?: { baseMetadata?: any } }
-  | { type: 'handle_operations'; data: { chatId: string; messageCreated: number; approved: number[]; rejected: number[] } };
+  | { type: 'handle_operations'; data: { chatId: string; messageCreated: number; approved: number[]; rejected: number[] } }
+  | { type: 'submit_question_answers'; data: { chatId: string; questionAnswers: Record<number, number[]>; questionCustomAnswers: Record<number, string> } };
 
 // Server -> Client Messages
 export type ServerMessage =

From cb678f7cd1ee447524e122ba92be012f5bfab476 Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Wed, 17 Dec 2025 09:01:26 -0500
Subject: [PATCH 14/27] Add user profile modal and persistent tool tracking

Introduces a ProfileModal component for editing user settings in the browser UI, with support for updating user config via WebSocket. Adds persistent tool tracking in the chat agent context to keep recently used tools visible. Refactors toolset initialization and registration, and improves typing indicator UI. Also updates schemas, config, and WebSocket types to support user updates, and fixes minor UI and logic issues.
---
 packages/cletus/src/agents/chat-agent.ts      |  51 ++--
 .../cletus/src/agents/chat-orchestrator.ts    |  18 +-
 packages/cletus/src/agents/toolsets.ts        |   3 +
 packages/cletus/src/ai.ts                     |  10 +-
 packages/cletus/src/browser/app.tsx           |   1 +
 .../src/browser/components/MessageItem.tsx    |  11 +-
 .../src/browser/components/ProfileModal.tsx   | 241 ++++++++++++++++++
 .../browser/components/TypingIndicator.tsx    |  11 +
 .../src/browser/components/ui/checkbox.tsx    |  42 +++
 .../src/browser/components/ui/label.tsx       |  20 ++
 .../cletus/src/browser/pages/ChatPage.tsx     |  27 +-
 .../cletus/src/browser/pages/MainPage.tsx     |  54 +++-
 packages/cletus/src/browser/server.ts         |  14 +-
 packages/cletus/src/browser/styles.css        |  21 ++
 .../cletus/src/browser/websocket-types.ts     |   1 +
 .../src/components/InkSettingsTabView.tsx     |   2 +-
 packages/cletus/src/config.ts                 |   9 +
 packages/cletus/src/index.tsx                 |   6 +-
 packages/cletus/src/schemas.ts                |   2 +-
 packages/core/src/prompt.ts                   |   3 +
 20 files changed, 491 insertions(+), 56 deletions(-)
 create mode 100644 packages/cletus/src/browser/components/ProfileModal.tsx
 create mode 100644 packages/cletus/src/browser/components/TypingIndicator.tsx
 create mode 100644 packages/cletus/src/browser/components/ui/checkbox.tsx
 create mode 100644 packages/cletus/src/browser/components/ui/label.tsx

diff --git a/packages/cletus/src/agents/chat-agent.ts b/packages/cletus/src/agents/chat-agent.ts
index dad1cee..76afa56 100644
--- a/packages/cletus/src/agents/chat-agent.ts
+++ b/packages/cletus/src/agents/chat-agent.ts
@@ -1,4 +1,4 @@
-import { AnyTool } from '@aeye/core';
+import { AnyTool, Tuple } from '@aeye/core';
 import type { CletusAI, CletusAIContext } from '../ai';
 import { ADAPTIVE_TOOLING } from '../constants';
 import { Operations } from '../operations/types';
@@ -8,7 +8,6 @@ import {
   RegisteredTool,
   toolRegistry
 } from '../tool-registry';
-import { createUtilityTools } from '../tools/utility';
 import { createToolsets } from './toolsets';
 
 /**
@@ -24,12 +23,13 @@ async function initializeToolRegistry(ai: CletusAI, toolsets: ReturnType<typeof
     artistTools,
     internetTools,
     dbaTools,
+    utilityTools,
   } = toolsets;
 
   const ctx = await ai.buildContext({});
   const instruct = (tool: AnyTool) => getToolInstructions(tool, ctx);
 
-    // Register static toolsets
+    // Register toolsets
   await toolRegistry.registerToolset('planner', plannerTools, instruct);
   await toolRegistry.registerToolset('librarian', librarianTools, instruct);
   await toolRegistry.registerToolset('clerk', clerkTools, instruct);
@@ -38,12 +38,25 @@ async function initializeToolRegistry(ai: CletusAI, toolsets: ReturnType<typeof
   await toolRegistry.registerToolset('artist', artistTools, instruct);
   await toolRegistry.registerToolset('internet', internetTools, instruct);
   await toolRegistry.registerToolset('dba', dbaTools, instruct);
-
-  // Register utility tools
-  const utilityTools = createUtilityTools(ai);
   await toolRegistry.registerToolset('utility', utilityTools, instruct);
 }
 
+/**
+ * Initialize tool registry
+ */
+export async function initTools(ai: CletusAI) {
+  if (toolRegistry.getAllTools().length > 0) {
+    // Already initialized
+    return;
+  }
+
+  // Create all toolsets
+  const toolsets = createToolsets(ai);
+  
+  // Initialize the tool registry
+  initializeToolRegistry(ai, toolsets);
+}
+
 /**
  * Get tools based on current toolset or adaptive selection
  */
@@ -51,8 +64,10 @@ async function getActiveTools(ctx: CletusAIContext): Promise<RegisteredTool[]> {
   const toolset = ctx.chat?.toolset;
 
   // Get all tools with alwaysVisible metadata
+  // OR were marked as persistent in the AI context
   const alwaysVisibleTools = toolRegistry.getAllTools().filter(t => 
-    t.tool.input.metadata?.alwaysVisible === true
+    t.tool.input.metadata?.alwaysVisible === true ||
+    ctx.persistentTools?.has(t.name)
   );
 
   // Create a set to track tool names and prevent duplicates
@@ -101,14 +116,8 @@ async function getActiveTools(ctx: CletusAIContext): Promise<RegisteredTool[]> {
  * Create the main chat agent with adaptive tooling
  */
 export function createChatAgent(ai: CletusAI) {
-  // Create all toolsets
-  const toolsets = createToolsets(ai);
-  
-  // Initialize the tool registry
-  initializeToolRegistry(ai, toolsets);
-
-  // Create utility tools (always available)
-  const utilityTools = createUtilityTools(ai);
+  // Ensure tools are initialized
+  initTools(ai);
 
   // Build toolset descriptions for the prompt
   const buildToolsetDescriptions = (ctx: CletusAIContext) => {
@@ -217,17 +226,7 @@ Tools:
 - If you've executed ANY tools - DO NOT ask a question at the end of your response. You are either going to automatically continue your work OR the user will respond next. NEVER ask a question after executing tools. Only for clarifications.
 </importantRules>
 `,
-    tools: [
-      ...toolsets.architectTools,
-      ...toolsets.artistTools,
-      ...toolsets.clerkTools,
-      ...toolsets.dbaTools,
-      ...toolsets.internetTools,
-      ...toolsets.librarianTools,
-      ...toolsets.plannerTools,
-      ...toolsets.secretaryTools,
-      ...utilityTools,
-    ],
+    tools: toolRegistry.getAllTools().map(t => t.tool) as Tuple<AnyTool>,
     // Dynamic tools based on adaptive selection using retool
     retool: async (_, ctx) => {
       const activeTools = await getActiveTools(ctx);
diff --git a/packages/cletus/src/agents/chat-orchestrator.ts b/packages/cletus/src/agents/chat-orchestrator.ts
index 125f87f..3085d68 100644
--- a/packages/cletus/src/agents/chat-orchestrator.ts
+++ b/packages/cletus/src/agents/chat-orchestrator.ts
@@ -6,14 +6,14 @@ import { AUTONOMOUS } from '../constants';
 import { logger } from '../logger';
 import { OperationManager } from '../operations/manager';
 import type { ChatMeta, Message, Operation } from '../schemas';
-import { createChatAgent } from './chat-agent';
+import { CletusChatAgent } from './chat-agent';
 import { CletusAIContext } from '../ai';
 
 /**
  * Options for running the chat orchestrator
  */
 export interface OrchestratorOptions {
-  chatAgent: ReturnType<typeof createChatAgent>;
+  chatAgent: CletusChatAgent;
   messages: Message[];
   chatMeta: ChatMeta;
   config: ConfigFile;
@@ -96,7 +96,7 @@ export async function runChatOrchestrator(
   let messageUsage: Usage = {};
   let messageCost = 0;
   let toolTokens = 0;
-  let lastTextIndex = -1; // Track which content entry has the accumulated text
+  let lastTextIndex = -1; // Track wich content entry has the accumulated text
 
   const updateUsageEvent = () => {
     const accumulated = getUsage();
@@ -224,13 +224,14 @@ export async function runChatOrchestrator(
       let stackTrace: any;
 
       // Run chat agent
-      const chatContext = {
+      const chatContext: Partial<CletusAIContext> = {
         ops,
         chat: chatMeta,
         chatData,
         chatMessage: pending,
         config,
         signal,
+        persistentTools: new Set<string>(),
         messages: currentMessages,
         chatStatus: (status: string) => onEvent({ type: 'status', status }),
         chatInterrupt: () => {
@@ -323,7 +324,14 @@ export async function runChatOrchestrator(
                 // This ensures content from different tool iterations doesn't get mixed
                 // Force creation of new text entry on next text event
                 getLastTextContent(true);
-                onEvent({ type: 'pendingUpdate', pending });
+                onEvent({ type: 'pendingUpdate', pending }); 
+              }
+              break;
+
+            case 'toolParseName': 
+              {
+                // Track recent tool usage in context so tools don't leave view
+                chatContext.persistentTools!.add(chunk.tool.name);
               }
               break;
 
diff --git a/packages/cletus/src/agents/toolsets.ts b/packages/cletus/src/agents/toolsets.ts
index 2a66b89..b9ec109 100644
--- a/packages/cletus/src/agents/toolsets.ts
+++ b/packages/cletus/src/agents/toolsets.ts
@@ -10,6 +10,7 @@ import { createInternetTools } from '../tools/internet';
 import { createLibrarianTools } from '../tools/librarian';
 import { createPlannerTools } from '../tools/planner';
 import { createSecretaryTools } from '../tools/secretary';
+import { createUtilityTools } from '../tools/utility';
 
 
 /**
@@ -24,6 +25,7 @@ export function createToolsets(ai: CletusAI) {
   const artistTools = createArtistTools(ai);
   const internetTools = createInternetTools(ai);
   const dbaTools = createDBATools(ai);
+  const utilityTools = createUtilityTools(ai);
 
   return {
     plannerTools,
@@ -34,6 +36,7 @@ export function createToolsets(ai: CletusAI) {
     artistTools,
     internetTools,
     dbaTools,
+    utilityTools,
   };
 }
 
diff --git a/packages/cletus/src/ai.ts b/packages/cletus/src/ai.ts
index fcccd79..ff12965 100644
--- a/packages/cletus/src/ai.ts
+++ b/packages/cletus/src/ai.ts
@@ -13,7 +13,7 @@ import { ChatMeta, Message, TypeDefinition } from './schemas';
 import { RetryContext, RetryEvents } from 'packages/openai/src/retry';
 import z from 'zod';
 import { loadPromptFiles } from './prompt-loader';
-import { Usage, accumulateUsage, toJSONSchema } from '@aeye/core';
+import { ToolCompatible, Usage, accumulateUsage, toJSONSchema } from '@aeye/core';
 
 /**
  * Cletus AI Context
@@ -27,6 +27,7 @@ export interface CletusContext {
   chatMessage?: Message;
   cwd: string;
   cache: Record<string, any>;
+  persistentTools?: Set<string>;
   log: (msg: any) => void;
   chatStatus: (status: string) => void;
   chatInterrupt?: () => void;
@@ -277,16 +278,9 @@ export function createCletusAI(configFile: ConfigFile) {
   return ai;
 }
 
-export function createCletusTypeAI(ai: CletusAI) {
-  return ai.extend<{ type: TypeDefinition }>();
-}
-
 export type CletusAI = ReturnType<typeof createCletusAI>;
 export type CletusAIContext = ContextInfer<CletusAI>;
 
-export type CletusTypeAI = ReturnType<typeof createCletusTypeAI>;
-export type CletusTypeAIContext = ContextInfer<CletusTypeAI>;
-
 // Global tool properties - useful for debugging
 export const globalToolProperties = {
   // explanation: z.string().describe('Provide an explanation on why this tool is being used'),
diff --git a/packages/cletus/src/browser/app.tsx b/packages/cletus/src/browser/app.tsx
index 51e6b85..2e475af 100644
--- a/packages/cletus/src/browser/app.tsx
+++ b/packages/cletus/src/browser/app.tsx
@@ -152,6 +152,7 @@ const App: React.FC = () => {
         onChatSelect={(chatId) => {
           setSelectedChatId(chatId);
           setView('chat');
+          window.history.pushState({}, '', `/chat/${chatId}`);
         }}
         onConfigChange={reloadConfig}
       />
diff --git a/packages/cletus/src/browser/components/MessageItem.tsx b/packages/cletus/src/browser/components/MessageItem.tsx
index 86c543d..bbf9880 100644
--- a/packages/cletus/src/browser/components/MessageItem.tsx
+++ b/packages/cletus/src/browser/components/MessageItem.tsx
@@ -3,6 +3,7 @@ import { User, Bot, Info } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { OperationDisplay } from '../operations';
+import { TypingIndicator } from './TypingIndicator';
 import { cn } from '../lib/utils';
 import type { Message } from '../../schemas';
 
@@ -77,7 +78,12 @@ export const MessageItem: React.FC<MessageItemProps> = ({
 
         {/* Content and Operations in order */}
         <div className={cn('flex-1 space-y-2', isUser && 'flex flex-col items-end')}>
-          {visibleContent.map((item, index) => {
+          {visibleContent.length === 0 && isAssistant ? (
+            <div className="rounded-lg bg-card p-2">
+              <TypingIndicator />
+            </div>
+          ) : (
+            visibleContent.map((item, index) => {
             // Render operation if this content item has an operation
             if (item.operation && item.operationIndex !== undefined) {
               const opIdx = item.operationIndex;
@@ -145,7 +151,8 @@ export const MessageItem: React.FC<MessageItemProps> = ({
                 </ReactMarkdown>
               </div>
             );
-          })}
+            })
+          )}
         </div>
 
         {/* Timestamp */}
diff --git a/packages/cletus/src/browser/components/ProfileModal.tsx b/packages/cletus/src/browser/components/ProfileModal.tsx
new file mode 100644
index 0000000..00fb831
--- /dev/null
+++ b/packages/cletus/src/browser/components/ProfileModal.tsx
@@ -0,0 +1,241 @@
+import React, { useState } from 'react';
+import { X } from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { Checkbox } from './ui/checkbox';
+import type { Config } from '../../schemas';
+
+interface ProfileModalProps {
+  user: Config['user'];
+  onSave: (updates: Partial<Config['user']>) => void;
+  onClose: () => void;
+}
+
+export const ProfileModal: React.FC<ProfileModalProps> = ({ user, onSave, onClose }) => {
+  const [formData, setFormData] = useState({
+    name: user.name || '',
+    pronouns: user.pronouns || '',
+    globalPrompt: user.globalPrompt || '',
+    debug: user.debug ?? true,
+    showInput: user.showInput ?? false,
+    showOutput: user.showOutput ?? false,
+    showSystemMessages: user.showSystemMessages ?? true,
+    adaptiveTools: user.adaptiveTools ?? 14,
+    maxQuerySchemaTypes: user.maxQuerySchemaTypes ?? 5,
+    maxIterations: user.autonomous?.maxIterations ?? 10,
+    timeout: user.autonomous?.timeout ?? 600000,
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const updates: Partial<Config['user']> = {
+      name: formData.name.trim() || user.name,
+      pronouns: formData.pronouns.trim() || undefined,
+      globalPrompt: formData.globalPrompt.trim() || undefined,
+      debug: formData.debug,
+      showInput: formData.showInput,
+      showOutput: formData.showOutput,
+      showSystemMessages: formData.showSystemMessages,
+      adaptiveTools: formData.adaptiveTools,
+      maxQuerySchemaTypes: formData.maxQuerySchemaTypes,
+      autonomous: {
+        maxIterations: formData.maxIterations,
+        timeout: formData.timeout,
+      },
+    };
+
+    onSave(updates);
+    onClose();
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4"
+      onClick={onClose}
+    >
+      <div
+        className="relative w-full max-w-2xl max-h-[90vh] bg-card rounded-lg border border-border shadow-2xl overflow-hidden"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b border-border bg-card/50">
+          <h2 className="text-2xl font-bold neon-text-purple">Profile Settings</h2>
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <X className="w-5 h-5" />
+          </Button>
+        </div>
+
+        {/* Content */}
+        <form onSubmit={handleSubmit}>
+          <div className="p-6 space-y-6 overflow-y-auto max-h-[calc(90vh-160px)]">
+            {/* Basic Info */}
+            <div className="space-y-4">
+              <h3 className="text-lg font-semibold neon-text-cyan">Basic Information</h3>
+
+              <div className="space-y-2">
+                <Label htmlFor="name">Name *</Label>
+                <Input
+                  id="name"
+                  type="text"
+                  value={formData.name}
+                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                  required
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="pronouns">Pronouns</Label>
+                <Input
+                  id="pronouns"
+                  type="text"
+                  value={formData.pronouns}
+                  onChange={(e) => setFormData({ ...formData, pronouns: e.target.value })}
+                  placeholder="e.g., they/them, she/her, he/him"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="globalPrompt">Global Prompt</Label>
+                <textarea
+                  id="globalPrompt"
+                  value={formData.globalPrompt}
+                  onChange={(e) => setFormData({ ...formData, globalPrompt: e.target.value })}
+                  className="w-full min-h-[100px] px-3 py-2 text-sm rounded-md border border-input bg-background text-foreground resize-y"
+                  placeholder="Add a global prompt that will be included in all chats..."
+                />
+              </div>
+            </div>
+
+            {/* Display Settings */}
+            <div className="space-y-4">
+              <h3 className="text-lg font-semibold neon-text-cyan">Display Settings</h3>
+
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="debug"
+                  checked={formData.debug}
+                  onCheckedChange={(checked) => setFormData({ ...formData, debug: checked as boolean })}
+                />
+                <Label htmlFor="debug" className="cursor-pointer">
+                  Debug Mode
+                </Label>
+              </div>
+
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="showInput"
+                  checked={formData.showInput}
+                  onCheckedChange={(checked) => setFormData({ ...formData, showInput: checked as boolean })}
+                />
+                <Label htmlFor="showInput" className="cursor-pointer">
+                  Show Input Details
+                </Label>
+              </div>
+
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="showOutput"
+                  checked={formData.showOutput}
+                  onCheckedChange={(checked) => setFormData({ ...formData, showOutput: checked as boolean })}
+                />
+                <Label htmlFor="showOutput" className="cursor-pointer">
+                  Show Output Details
+                </Label>
+              </div>
+
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="showSystemMessages"
+                  checked={formData.showSystemMessages}
+                  onCheckedChange={(checked) => setFormData({ ...formData, showSystemMessages: checked as boolean })}
+                />
+                <Label htmlFor="showSystemMessages" className="cursor-pointer">
+                  Show System Messages
+                </Label>
+              </div>
+            </div>
+
+            {/* Advanced Settings */}
+            <div className="space-y-4">
+              <h3 className="text-lg font-semibold neon-text-cyan">Advanced Settings</h3>
+
+              <div className="space-y-2">
+                <Label htmlFor="adaptiveTools">Adaptive Tools Limit</Label>
+                <Input
+                  id="adaptiveTools"
+                  type="number"
+                  min="1"
+                  value={formData.adaptiveTools}
+                  onChange={(e) => setFormData({ ...formData, adaptiveTools: parseInt(e.target.value, 10) || 14 })}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Maximum number of adaptive tools to use
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="maxQuerySchemaTypes">Max Query Schema Types</Label>
+                <Input
+                  id="maxQuerySchemaTypes"
+                  type="number"
+                  min="0"
+                  value={formData.maxQuerySchemaTypes}
+                  onChange={(e) => setFormData({ ...formData, maxQuerySchemaTypes: parseInt(e.target.value, 10) || 5 })}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Maximum number of schema types for queries
+                </p>
+              </div>
+            </div>
+
+            {/* Autonomous Mode Settings */}
+            <div className="space-y-4">
+              <h3 className="text-lg font-semibold neon-text-cyan">Autonomous Mode</h3>
+
+              <div className="space-y-2">
+                <Label htmlFor="maxIterations">Max Iterations</Label>
+                <Input
+                  id="maxIterations"
+                  type="number"
+                  min="1"
+                  value={formData.maxIterations}
+                  onChange={(e) => setFormData({ ...formData, maxIterations: parseInt(e.target.value, 10) || 10 })}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Maximum number of autonomous iterations
+                </p>
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="timeout">Timeout (ms)</Label>
+                <Input
+                  id="timeout"
+                  type="number"
+                  min="1000"
+                  step="1000"
+                  value={formData.timeout}
+                  onChange={(e) => setFormData({ ...formData, timeout: parseInt(e.target.value, 10) || 600000 })}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Timeout for autonomous operations in milliseconds
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div className="flex justify-end gap-3 p-6 border-t border-border bg-card/50">
+            <Button type="button" variant="ghost" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button type="submit" variant="neon">
+              Save Changes
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/TypingIndicator.tsx b/packages/cletus/src/browser/components/TypingIndicator.tsx
new file mode 100644
index 0000000..bcd4050
--- /dev/null
+++ b/packages/cletus/src/browser/components/TypingIndicator.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+export const TypingIndicator: React.FC = () => {
+  return (
+    <div className="flex gap-1.5 p-4">
+      <div className="typing-dot"></div>
+      <div className="typing-dot" style={{ animationDelay: '0.2s' }}></div>
+      <div className="typing-dot" style={{ animationDelay: '0.4s' }}></div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/ui/checkbox.tsx b/packages/cletus/src/browser/components/ui/checkbox.tsx
new file mode 100644
index 0000000..9e8d89b
--- /dev/null
+++ b/packages/cletus/src/browser/components/ui/checkbox.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Check } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  checked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, checked, onCheckedChange, ...props }, ref) => {
+    return (
+      <div className="relative inline-flex items-center">
+        <input
+          type="checkbox"
+          ref={ref}
+          checked={checked}
+          onChange={(e) => onCheckedChange?.(e.target.checked)}
+          className="sr-only peer"
+          {...props}
+        />
+        <div
+          className={cn(
+            'h-5 w-5 shrink-0 rounded border border-input bg-background',
+            'peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2',
+            'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+            'peer-checked:bg-neon-purple peer-checked:border-neon-purple',
+            'transition-colors cursor-pointer',
+            className
+          )}
+        >
+          {checked && (
+            <Check className="h-4 w-4 text-white m-auto" strokeWidth={3} />
+          )}
+        </div>
+      </div>
+    );
+  }
+);
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };
diff --git a/packages/cletus/src/browser/components/ui/label.tsx b/packages/cletus/src/browser/components/ui/label.tsx
new file mode 100644
index 0000000..77dad15
--- /dev/null
+++ b/packages/cletus/src/browser/components/ui/label.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {}
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn(
+        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Label.displayName = 'Label';
+
+export { Label };
diff --git a/packages/cletus/src/browser/pages/ChatPage.tsx b/packages/cletus/src/browser/pages/ChatPage.tsx
index d1fb434..68c90d4 100644
--- a/packages/cletus/src/browser/pages/ChatPage.tsx
+++ b/packages/cletus/src/browser/pages/ChatPage.tsx
@@ -1,4 +1,4 @@
-import { ArrowLeft, CheckSquare, Settings, Trash2 } from 'lucide-react';
+import { ArrowLeft, CheckSquare, Settings, Trash2, User } from 'lucide-react';
 import React, { useEffect, useRef, useState } from 'react';
 import type { ChatMeta, ChatMode, Config, Message, MessageContent } from '../../schemas';
 import { AgentModeSelector } from '../components/AgentModeSelector';
@@ -9,6 +9,7 @@ import { CommandsPanel } from '../components/CommandsPanel';
 import { MessageList } from '../components/MessageList';
 import { ModelSelector } from '../components/ModelSelector';
 import { ModeSelector } from '../components/ModeSelector';
+import { ProfileModal } from '../components/ProfileModal';
 import { QuestionsModal } from '../components/QuestionsModal';
 import { TodosModal } from '../components/TodosModal';
 import { ToolsetSelector } from '../components/ToolsetSelector';
@@ -43,6 +44,7 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
   const [cwd, setCwd] = useState<string | undefined>(undefined);
   const [status, setStatus] = useState('');
   const [isProcessing, setIsProcessing] = useState(false);
+  const [showProfile, setShowProfile] = useState(false);
   const wsRef = useRef<WebSocket | null>(null);
   const modelsResolverRef = useRef<{
     resolve: (models: any[]) => void;
@@ -233,7 +235,7 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
   };
 
   const handleToolsetChange = (toolset: string | null) => {
-    send({ type: 'update_chat_meta', data: { chatId, updates: { toolset: toolset || undefined } } });
+    send({ type: 'update_chat_meta', data: { chatId, updates: { toolset: toolset } } });
   };
 
   const handleAssistantChange = (assistant: string) => {
@@ -404,6 +406,10 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
     handleOperationApproval(lastMessage, approved, rejected);
   };
 
+  const handleProfileSave = (updates: Partial<Config['user']>) => {
+    send({ type: 'update_user', data: { updates } });
+  };
+
   // Check if there are any messages with operations needing approval
   const lastMessage = messages.length > 0 ? messages[messages.length - 1] : null;
   const lastMessagePendingOps = lastMessage?.role === 'assistant'
@@ -522,6 +528,14 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
               >
                 <Trash2 className="w-5 h-5" />
               </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setShowProfile(true)}
+                title="Profile Settings"
+              >
+                <User className="w-5 h-5" />
+              </Button>
             </div>
           </div>
         </div>
@@ -614,6 +628,15 @@ export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onCo
         />
       )}
 
+      {/* Profile Modal */}
+      {showProfile && (
+        <ProfileModal
+          user={config.user}
+          onSave={handleProfileSave}
+          onClose={() => setShowProfile(false)}
+        />
+      )}
+
       {/* Clear Messages Confirmation Dialog */}
       {showClearConfirm && (
         <div
diff --git a/packages/cletus/src/browser/pages/MainPage.tsx b/packages/cletus/src/browser/pages/MainPage.tsx
index 5fcf519..4d86ba0 100644
--- a/packages/cletus/src/browser/pages/MainPage.tsx
+++ b/packages/cletus/src/browser/pages/MainPage.tsx
@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
-import { MessageSquare, Settings, Plus, Sparkles } from 'lucide-react';
+import { MessageSquare, Settings, Plus, Sparkles, User } from 'lucide-react';
 import { Button } from '../components/ui/button';
 import { ScrollArea } from '../components/ui/scroll-area';
 import { ChatList } from '../components/ChatList';
 import { SettingsView } from '../components/SettingsView';
+import { ProfileModal } from '../components/ProfileModal';
 import type { Config } from '../../schemas';
+import { sendClientMessage } from '../websocket-types';
 
 interface MainPageProps {
   config: Config;
@@ -17,6 +19,27 @@ type MainView = 'chats' | 'settings';
 export const MainPage: React.FC<MainPageProps> = ({ config, onChatSelect, onConfigChange }) => {
   const [view, setView] = useState<MainView>('chats');
   const [showNewChat, setShowNewChat] = useState(false);
+  const [showProfile, setShowProfile] = useState(false);
+
+  const handleProfileSave = (updates: Partial<Config['user']>) => {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const ws = new WebSocket(`${protocol}//${window.location.host}`);
+
+    ws.onopen = () => {
+      sendClientMessage(ws, { type: 'update_user', data: { updates } });
+    };
+
+    ws.onmessage = async (event) => {
+      const message = JSON.parse(event.data);
+      if (message.type === 'config') {
+        await onConfigChange();
+        ws.close();
+      } else if (message.type === 'error') {
+        console.error('Failed to update user:', message.data.message);
+        ws.close();
+      }
+    };
+  };
 
   return (
     <div className="flex h-screen bg-background">
@@ -27,8 +50,19 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onChatSelect, onConf
             <Sparkles className="w-8 h-8 text-neon-cyan" />
             <h1 className="text-2xl font-bold neon-text-purple">Cletus</h1>
           </div>
-          <div className="text-sm text-muted-foreground">
-            Welcome, <span className="text-neon-cyan font-semibold">{config.user.name}</span>
+          <div className="flex items-center justify-between">
+            <div className="text-sm text-muted-foreground">
+              Welcome, <span className="text-neon-cyan font-semibold">{config.user.name}</span>
+            </div>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={() => setShowProfile(true)}
+              title="Profile Settings"
+              className="h-8 w-8"
+            >
+              <User className="w-4 h-4" />
+            </Button>
           </div>
         </div>
 
@@ -96,10 +130,7 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onChatSelect, onConf
           {view === 'chats' ? (
             <ChatList
               config={config}
-              onChatSelect={(chatId) => {
-                window.history.pushState({}, '', `/chat/${chatId}`);
-                onChatSelect(chatId);
-              }}
+              onChatSelect={onChatSelect}
               onConfigChange={onConfigChange}
               forceShowCreate={showNewChat}
               onCreateClose={() => setShowNewChat(false)}
@@ -109,6 +140,15 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onChatSelect, onConf
           )}
         </ScrollArea>
       </div>
+
+      {/* Profile Modal */}
+      {showProfile && (
+        <ProfileModal
+          user={config.user}
+          onSave={handleProfileSave}
+          onClose={() => setShowProfile(false)}
+        />
+      )}
     </div>
   );
 };
diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
index 393e7cd..857c7d7 100644
--- a/packages/cletus/src/browser/server.ts
+++ b/packages/cletus/src/browser/server.ts
@@ -10,7 +10,7 @@ import type { Message, ChatMeta, MessageContent } from '../schemas';
 import type { ClientMessage, ServerMessage } from './websocket-types';
 import { OperationManager } from '../operations/manager';
 import { CletusAI, createCletusAI } from '../ai';
-import { CletusChatAgent, createChatAgent } from '../agents/chat-agent';
+import { CletusChatAgent, createChatAgent, initTools } from '../agents/chat-agent';
 import { OrchestratorEvent, runChatOrchestrator } from '../agents/chat-orchestrator';
 
 const __serverFilename = fileURLToPath(import.meta.url);
@@ -170,6 +170,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
         throw new Error('Config not available');
       }
       ai = createCletusAI(config);
+      await initTools(ai);
       chatAgent = createChatAgent(ai);
     }
     return { ai, chatAgent };
@@ -521,6 +522,17 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
           });
           break;
         }
+        case 'update_user': {
+          const { updates } = message.data;
+          withConfigUpdate(async (config) => {
+            await config.updateUser(updates);
+            sendMessage({
+              type: 'config',
+              data: config.getData(),
+            });
+          });
+          break;
+        }
         case 'add_todo': {
           const { chatId, todo } = message.data;
           withConfigUpdate(async (config) => {
diff --git a/packages/cletus/src/browser/styles.css b/packages/cletus/src/browser/styles.css
index f22bd6f..489cfed 100644
--- a/packages/cletus/src/browser/styles.css
+++ b/packages/cletus/src/browser/styles.css
@@ -107,3 +107,24 @@
   border-radius: 50%;
   animation: spin 0.8s linear infinite;
 }
+
+/* Typing indicator animation */
+@keyframes typing-bounce {
+  0%, 60%, 100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+  30% {
+    transform: translateY(-8px);
+    opacity: 1;
+  }
+}
+
+.typing-dot {
+  width: 8px;
+  height: 8px;
+  background-color: var(--color-neon-cyan);
+  border-radius: 50%;
+  animation: typing-bounce 1.4s infinite ease-in-out;
+  box-shadow: 0 0 4px var(--color-neon-cyan);
+}
diff --git a/packages/cletus/src/browser/websocket-types.ts b/packages/cletus/src/browser/websocket-types.ts
index b0d94e2..3c70ba4 100644
--- a/packages/cletus/src/browser/websocket-types.ts
+++ b/packages/cletus/src/browser/websocket-types.ts
@@ -13,6 +13,7 @@ export type ClientMessage =
   | { type: 'send_message'; data: { chatId: string; content: Message['content'] } }
   | { type: 'cancel'; data?: never }
   | { type: 'update_chat_meta'; data: { chatId: string; updates: Partial<ChatMeta>; cwd?: string } }
+  | { type: 'update_user'; data: { updates: Partial<Config['user']> } }
   | { type: 'add_todo'; data: { chatId: string; todo: string } }
   | { type: 'toggle_todo'; data: { chatId: string; index: number } }
   | { type: 'remove_todo'; data: { chatId: string; index: number } }
diff --git a/packages/cletus/src/components/InkSettingsTabView.tsx b/packages/cletus/src/components/InkSettingsTabView.tsx
index c64d805..410a9ed 100644
--- a/packages/cletus/src/components/InkSettingsTabView.tsx
+++ b/packages/cletus/src/components/InkSettingsTabView.tsx
@@ -230,7 +230,7 @@ export const InkSettingsTabView: React.FC<InkSettingsTabViewProps> = ({ config,
     } else if (editField === 'addApiKey') {
       if (editValue.trim() && providerKey) {
         await config.save((data) => {
-          data.providers[providerKey!] = { apiKey: editValue };
+          data.providers[providerKey!] = { apiKey: editValue } as any;
         });
         setMessage(`✓ ${providerKey} configured!`);
         setSubView(null);
diff --git a/packages/cletus/src/config.ts b/packages/cletus/src/config.ts
index 3a504d4..b10e64d 100644
--- a/packages/cletus/src/config.ts
+++ b/packages/cletus/src/config.ts
@@ -195,6 +195,15 @@ export class ConfigFile extends JsonFile<Config> {
     });
   }
 
+  /**
+   * Update user settings
+   */
+  async updateUser(updates: Partial<Config['user']>): Promise<void> {
+    await this.save((config) => {
+      Object.assign(config.user, updates);
+    });
+  }
+
   /**
    * Delete a chat
    */
diff --git a/packages/cletus/src/index.tsx b/packages/cletus/src/index.tsx
index df94e11..1dd8d3d 100644
--- a/packages/cletus/src/index.tsx
+++ b/packages/cletus/src/index.tsx
@@ -129,6 +129,9 @@ async function main() {
   const { profile, browser, port } = parseArgs();
   setProfile(profile);
 
+  // Initialize embed worker (don't await - let it init in background)
+  initWorker();
+
   // If browser mode, start HTTP server instead of CLI
   if (browser) {
     const { startBrowserServer } = await import('./browser/server');
@@ -141,9 +144,6 @@ async function main() {
   // Clear screen and move cursor to top
   process.stdout.write('\x1Bc');
 
-  // Initialize embed worker (don't await - let it init in background)
-  initWorker();
-
   const { waitUntilExit } = render(React.createElement(App), {
     exitOnCtrlC: false,
   });
diff --git a/packages/cletus/src/schemas.ts b/packages/cletus/src/schemas.ts
index 60256b9..9de5bc4 100644
--- a/packages/cletus/src/schemas.ts
+++ b/packages/cletus/src/schemas.ts
@@ -197,7 +197,7 @@ export const ChatMetaSchema = z.object({
   mode: ChatModeSchema.default('none'),
   agentMode: AgentModeSchema.default('default'),
   model: z.string().optional(),
-  toolset: z.string().optional(),
+  toolset: z.string().optional().nullable(),
   created: z.number(),
   updated: z.number(),
   todos: z.array(TodoItemSchema).default([]),
diff --git a/packages/core/src/prompt.ts b/packages/core/src/prompt.ts
index 208ad51..d878462 100644
--- a/packages/core/src/prompt.ts
+++ b/packages/core/src/prompt.ts
@@ -194,6 +194,7 @@ export type PromptToolEvents<TTools extends Tuple<AnyTool>> =
  * The events emitted during prompt execution/streaming.
  */
 export type PromptEvent<TOutput, TTools extends Tuple<AnyTool>> =
+  { type: 'request', request: Request, iterations: number } |
   { type: 'textPartial', content: string, request: Request } |
   { type: 'text', content: string, request: Request } |
   { type: 'refusal', content: string, request: Request } |
@@ -629,6 +630,8 @@ export class Prompt<
         ...(await this.metadataFn(input, ctx) || {}),
       };
 
+      yield emit({ type: 'request', request, iterations });
+
       const stream = streamer(request, ctx, metadata, streamController.signal);
 
       for await (const chunk of stream) {

From 23433937a50b828ffc55e56dd80d40eeb073ef95 Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Wed, 17 Dec 2025 14:57:16 -0500
Subject: [PATCH 15/27] Refactor chat UI to unified layout and improve
 operation renderers

Replaces the main chat UI with a new UnifiedLayout component, consolidating chat, sidebar, and settings into a single layout. Refactors operation renderer files to use a new createRenderer utility for consistent display and summary logic, and improves summary details for file, shell, and type operations. Removes unused display settings from the profile modal and updates operation renderer type signatures for stricter typing.
---
 packages/cletus/src/browser/app.tsx           |  70 +-
 .../src/browser/components/ChatSidebar.tsx    | 203 +++++
 .../src/browser/components/ProfileModal.tsx   |  57 --
 .../operations/BaseOperationDisplay.tsx       |   2 +-
 .../src/browser/operations/architect.tsx      | 159 ++--
 .../cletus/src/browser/operations/artist.tsx  |  42 +-
 .../cletus/src/browser/operations/clerk.tsx   | 477 ++++++++----
 .../cletus/src/browser/operations/dba.tsx     |  40 +-
 .../cletus/src/browser/operations/index.tsx   |   4 +-
 .../cletus/src/browser/operations/render.tsx  |  41 +-
 .../cletus/src/browser/operations/types.ts    |   2 -
 .../src/browser/pages/UnifiedLayout.tsx       | 737 ++++++++++++++++++
 packages/cletus/src/common.ts                 |  51 +-
 packages/cletus/src/operations/clerk.tsx      |   2 +-
 packages/cletus/src/operations/types.ts       |   7 +
 packages/cletus/src/shared.ts                 |  51 ++
 16 files changed, 1458 insertions(+), 487 deletions(-)
 create mode 100644 packages/cletus/src/browser/components/ChatSidebar.tsx
 create mode 100644 packages/cletus/src/browser/pages/UnifiedLayout.tsx

diff --git a/packages/cletus/src/browser/app.tsx b/packages/cletus/src/browser/app.tsx
index 2e475af..d6331ad 100644
--- a/packages/cletus/src/browser/app.tsx
+++ b/packages/cletus/src/browser/app.tsx
@@ -1,30 +1,20 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { createRoot } from 'react-dom/client';
-import { MainPage } from './pages/MainPage';
-import { ChatPage } from './pages/ChatPage';
+import { UnifiedLayout } from './pages/UnifiedLayout';
 import { InitPage } from './pages/InitPage';
-import type { ChatMeta, Config } from '../schemas';
+import type { Config } from '../schemas';
 
-type AppView = 'loading' | 'init' | 'main' | 'chat';
+type AppView = 'loading' | 'init' | 'main';
 
 const App: React.FC = () => {
   const [view, setView] = useState<AppView>('loading');
   const [config, setConfig] = useState<Config | null>(null);
-  const [selectedChatId, setSelectedChatId] = useState<string | null>(null);
   const wsRef = useRef<WebSocket | null>(null);
 
   // Handle browser back/forward buttons
   useEffect(() => {
     const handlePopState = () => {
-      const path = window.location.pathname;
-      if (path === '/' || path === '/settings') {
-        setView('main');
-        setSelectedChatId(null);
-      } else if (path.startsWith('/chat/')) {
-        const chatId = path.split('/')[2];
-        setSelectedChatId(chatId);
-        setView('chat');
-      }
+      // Unified layout handles routing internally
     };
 
     window.addEventListener('popstate', handlePopState);
@@ -48,41 +38,13 @@ const App: React.FC = () => {
       switch (message.type) {
         case 'config':
           setConfig(message.data);
-
-          // Check URL to determine initial view
-          const path = window.location.pathname;
-          if (path.startsWith('/chat/')) {
-            const chatId = path.split('/')[2];
-            // Verify the chat exists in the config
-            const chatExists = message.data.chats.some((c: ChatMeta) => c.id === chatId);
-            if (chatExists) {
-              setSelectedChatId(chatId);
-              setView('chat');
-            } else {
-              // Chat doesn't exist, redirect to main
-              window.history.replaceState({}, '', '/');
-              setView('main');
-            }
-          } else if (path === '/settings') {
-            setView('main'); // MainPage handles settings view internally
-          } else {
-            setView('main');
-          }
+          setView('main');
           break;
 
         case 'config_not_found':
           setView('init');
           break;
 
-        case 'chat_created':
-          // Reload config after chat creation
-          ws.send(JSON.stringify({ type: 'get_config' }));
-          if (message.data.chatId) {
-            setSelectedChatId(message.data.chatId);
-            setView('chat');
-          }
-          break;
-
         case 'error':
           console.error('WebSocket error:', message.data.message);
           break;
@@ -130,30 +92,10 @@ const App: React.FC = () => {
     );
   }
 
-  if (view === 'chat' && selectedChatId && config) {
-    return (
-      <ChatPage
-        chatId={selectedChatId}
-        config={config}
-        onBack={() => {
-          setView('main');
-          setSelectedChatId(null);
-          window.history.pushState({}, '', '/');
-        }}
-        onConfigChange={reloadConfig}
-      />
-    );
-  }
-
   if (view === 'main' && config) {
     return (
-      <MainPage
+      <UnifiedLayout
         config={config}
-        onChatSelect={(chatId) => {
-          setSelectedChatId(chatId);
-          setView('chat');
-          window.history.pushState({}, '', `/chat/${chatId}`);
-        }}
         onConfigChange={reloadConfig}
       />
     );
diff --git a/packages/cletus/src/browser/components/ChatSidebar.tsx b/packages/cletus/src/browser/components/ChatSidebar.tsx
new file mode 100644
index 0000000..aee6aec
--- /dev/null
+++ b/packages/cletus/src/browser/components/ChatSidebar.tsx
@@ -0,0 +1,203 @@
+import React, { useState } from 'react';
+import { MessageSquare, Clock, Plus, ChevronLeft, ChevronRight, User, Sparkles } from 'lucide-react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
+import { ScrollArea } from './ui/scroll-area';
+import type { Config } from '../../schemas';
+
+interface ChatSidebarProps {
+  config: Config;
+  currentChatId: string | null;
+  isCollapsed: boolean;
+  onToggleCollapse: () => void;
+  onChatSelect: (chatId: string) => void;
+  onConfigChange: () => Promise<void>;
+  onProfileClick: () => void;
+}
+
+export const ChatSidebar: React.FC<ChatSidebarProps> = ({
+  config,
+  currentChatId,
+  isCollapsed,
+  onToggleCollapse,
+  onChatSelect,
+  onConfigChange,
+  onProfileClick,
+}) => {
+  const chats = config.chats;
+  const sortedChats = [...chats].sort((a, b) => b.updated - a.updated);
+
+  const handleCreateChat = async () => {
+    // Generate timestamp-based name
+    const now = new Date();
+    const day = now.getDate();
+    const month = now.getMonth() + 1; // 0-indexed
+    const year = now.getFullYear();
+    const newChatName = `New Chat on ${day}/${month}/${year}`;
+
+    try {
+      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+      const ws = new WebSocket(`${protocol}//${window.location.host}`);
+
+      ws.onopen = () => {
+        ws.send(JSON.stringify({
+          type: 'create_chat',
+          data: { name: newChatName.trim() },
+        }));
+      };
+
+      ws.onmessage = async (event) => {
+        const message = JSON.parse(event.data);
+        if (message.type === 'chat_created') {
+          await onConfigChange();
+          onChatSelect(message.data.chatId);
+          ws.close();
+        } else if (message.type === 'error') {
+          console.error('Failed to create chat:', message.data.message);
+          ws.close();
+        }
+      };
+    } catch (error) {
+      console.error('Failed to create chat:', error);
+    }
+  };
+
+  const formatDate = (timestamp: number) => {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60);
+
+    if (diffInHours < 24) {
+      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    } else if (diffInHours < 24 * 7) {
+      return date.toLocaleDateString([], { weekday: 'short', hour: '2-digit', minute: '2-digit' });
+    } else {
+      return date.toLocaleDateString();
+    }
+  };
+
+  if (isCollapsed) {
+    return (
+      <div className="w-16 border-r border-border bg-card/50 backdrop-blur-sm flex flex-col items-center py-4 gap-4">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onToggleCollapse}
+          title="Expand sidebar"
+        >
+          <ChevronRight className="w-5 h-5" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={handleCreateChat}
+          title="New Chat"
+        >
+          <Plus className="w-5 h-5" />
+        </Button>
+        <div className="flex-1" />
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onProfileClick}
+          title="Profile"
+        >
+          <User className="w-5 h-5" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-80 border-r border-border bg-card/50 backdrop-blur-sm flex flex-col">
+      {/* Header */}
+      <div className="p-4 border-b border-border flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <Sparkles className="w-6 h-6 text-neon-cyan" />
+          <h2 className="text-lg font-bold neon-text-purple">Chats</h2>
+        </div>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onProfileClick}
+            title="Profile"
+          >
+            <User className="w-4 h-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onToggleCollapse}
+            title="Collapse sidebar"
+          >
+            <ChevronLeft className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* New Chat Button */}
+      <div className="p-4 border-b border-border">
+        <Button
+          variant="neon"
+          className="w-full gap-2"
+          onClick={handleCreateChat}
+        >
+          <Plus className="w-4 h-4" />
+          New Chat
+        </Button>
+      </div>
+
+      {/* Chat List */}
+      <ScrollArea className="flex-1">
+        <div className="p-2 space-y-2">
+          {sortedChats.map((chat) => (
+            <button
+              key={chat.id}
+              onClick={() => onChatSelect(chat.id)}
+              className={`w-full text-left p-3 rounded-lg transition-all hover:bg-card/80 border ${
+                currentChatId === chat.id
+                  ? 'bg-card border-neon-cyan/50 shadow-lg'
+                  : 'bg-card/50 border-transparent'
+              }`}
+            >
+              <div className="flex items-start gap-2 mb-2">
+                <MessageSquare className={`w-4 h-4 mt-0.5 flex-shrink-0 ${
+                  currentChatId === chat.id ? 'text-neon-cyan' : 'text-neon-purple'
+                }`} />
+                <div className="flex-1 min-w-0">
+                  <div className={`font-medium text-sm truncate ${
+                    currentChatId === chat.id ? 'neon-text-cyan' : 'text-foreground'
+                  }`}>
+                    {chat.title}
+                  </div>
+                </div>
+                <span className="text-xs px-1.5 py-0.5 rounded bg-neon-purple/20 text-neon-purple border border-neon-purple/50 flex-shrink-0">
+                  {chat.mode}
+                </span>
+              </div>
+              <div className="flex items-center gap-1 text-xs text-muted-foreground pl-6">
+                <Clock className="w-3 h-3" />
+                <span>{formatDate(chat.updated)}</span>
+              </div>
+            </button>
+          ))}
+          {sortedChats.length === 0 && (
+            <div className="text-center text-muted-foreground p-8">
+              <MessageSquare className="w-12 h-12 mx-auto mb-2 opacity-50" />
+              <p className="text-sm">No chats yet</p>
+            </div>
+          )}
+        </div>
+      </ScrollArea>
+
+      {/* User Info Footer */}
+      <div className="p-4 border-t border-border">
+        <div className="text-xs text-muted-foreground">
+          <span className="text-neon-cyan font-semibold">{config.user.name}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/cletus/src/browser/components/ProfileModal.tsx b/packages/cletus/src/browser/components/ProfileModal.tsx
index 00fb831..0892a6e 100644
--- a/packages/cletus/src/browser/components/ProfileModal.tsx
+++ b/packages/cletus/src/browser/components/ProfileModal.tsx
@@ -17,10 +17,6 @@ export const ProfileModal: React.FC<ProfileModalProps> = ({ user, onSave, onClos
     name: user.name || '',
     pronouns: user.pronouns || '',
     globalPrompt: user.globalPrompt || '',
-    debug: user.debug ?? true,
-    showInput: user.showInput ?? false,
-    showOutput: user.showOutput ?? false,
-    showSystemMessages: user.showSystemMessages ?? true,
     adaptiveTools: user.adaptiveTools ?? 14,
     maxQuerySchemaTypes: user.maxQuerySchemaTypes ?? 5,
     maxIterations: user.autonomous?.maxIterations ?? 10,
@@ -34,10 +30,6 @@ export const ProfileModal: React.FC<ProfileModalProps> = ({ user, onSave, onClos
       name: formData.name.trim() || user.name,
       pronouns: formData.pronouns.trim() || undefined,
       globalPrompt: formData.globalPrompt.trim() || undefined,
-      debug: formData.debug,
-      showInput: formData.showInput,
-      showOutput: formData.showOutput,
-      showSystemMessages: formData.showSystemMessages,
       adaptiveTools: formData.adaptiveTools,
       maxQuerySchemaTypes: formData.maxQuerySchemaTypes,
       autonomous: {
@@ -108,55 +100,6 @@ export const ProfileModal: React.FC<ProfileModalProps> = ({ user, onSave, onClos
               </div>
             </div>
 
-            {/* Display Settings */}
-            <div className="space-y-4">
-              <h3 className="text-lg font-semibold neon-text-cyan">Display Settings</h3>
-
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="debug"
-                  checked={formData.debug}
-                  onCheckedChange={(checked) => setFormData({ ...formData, debug: checked as boolean })}
-                />
-                <Label htmlFor="debug" className="cursor-pointer">
-                  Debug Mode
-                </Label>
-              </div>
-
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="showInput"
-                  checked={formData.showInput}
-                  onCheckedChange={(checked) => setFormData({ ...formData, showInput: checked as boolean })}
-                />
-                <Label htmlFor="showInput" className="cursor-pointer">
-                  Show Input Details
-                </Label>
-              </div>
-
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="showOutput"
-                  checked={formData.showOutput}
-                  onCheckedChange={(checked) => setFormData({ ...formData, showOutput: checked as boolean })}
-                />
-                <Label htmlFor="showOutput" className="cursor-pointer">
-                  Show Output Details
-                </Label>
-              </div>
-
-              <div className="flex items-center space-x-2">
-                <Checkbox
-                  id="showSystemMessages"
-                  checked={formData.showSystemMessages}
-                  onCheckedChange={(checked) => setFormData({ ...formData, showSystemMessages: checked as boolean })}
-                />
-                <Label htmlFor="showSystemMessages" className="cursor-pointer">
-                  Show System Messages
-                </Label>
-              </div>
-            </div>
-
             {/* Advanced Settings */}
             <div className="space-y-4">
               <h3 className="text-lg font-semibold neon-text-cyan">Advanced Settings</h3>
diff --git a/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx b/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
index 235264f..4c6c93c 100644
--- a/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
+++ b/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
@@ -311,7 +311,7 @@ const OperationDetails: React.FC<{ operation: Operation }> = ({ operation }) =>
   );
 };
 
-interface BaseOperationDisplayProps {
+export interface BaseOperationDisplayProps {
   operation: Operation;
   label: string;
   summary?: React.ReactNode | string | null;
diff --git a/packages/cletus/src/browser/operations/architect.tsx b/packages/cletus/src/browser/operations/architect.tsx
index def1b47..427069d 100644
--- a/packages/cletus/src/browser/operations/architect.tsx
+++ b/packages/cletus/src/browser/operations/architect.tsx
@@ -1,115 +1,48 @@
-import React from 'react';
-import { Operation } from '../../schemas';
-import { BaseOperationDisplay } from './BaseOperationDisplay';
-import { formatName } from '../../shared';
-
-interface OperationRendererProps {
-  operation: Operation;
-  showInput?: boolean;
-  showOutput?: boolean;
-}
-
-export const type_info: React.FC<OperationRendererProps> = ({ operation }) => {
-  const typeName = operation.cache?.typeName || formatName(operation.input.name);
-  const summary = operation.output?.type
-    ? `Found type: ${operation.output.type.friendlyName}`
-    : operation.output?.type === null
+import { formatName, pluralize } from '../../shared';
+import { createRenderer } from './render';
+
+const renderer = createRenderer({
+  borderColor: "border-neon-cyan/30",
+  bgColor: "bg-neon-cyan/5",
+  labelColor: "text-neon-cyan",
+});
+
+export const type_info = renderer<'type_info'>(
+  (op) => `${op.cache?.typeName || formatName(op.input.name)}Info()`,
+  (op) => op.output?.type
+    ? `Found type: ${op.output.type.friendlyName}`
+    : op.output?.type === null
     ? 'Type not found'
-    : operation.analysis;
-
-  return (
-    <BaseOperationDisplay
-      operation={operation}
-      label={`${typeName}Info()`}
-      summary={summary}
-      borderColor="border-neon-cyan/30"
-      bgColor="bg-neon-cyan/5"
-      labelColor="text-neon-cyan"
-    />
-  );
-};
-
-export const type_list: React.FC<OperationRendererProps> = ({ operation }) => {
-  const summary = operation.output?.types?.length
-    ? `Found ${operation.output.types.length} type${operation.output.types.length !== 1 ? 's' : ''}`
-    : operation.output?.types
+    : op.analysis,
+);
+
+export const type_list = renderer<'type_list'>(
+  () => 'TypeList()',
+  (op) => op.output?.types?.length
+    ? `Found ${op.output.types.length} type${op.output.types.length !== 1 ? 's' : ''}`
+    : op.output?.types
     ? 'No types found'
-    : operation.analysis;
-
-  return (
-    <BaseOperationDisplay
-      operation={operation}
-      label="TypeList()"
-      summary={summary}
-      borderColor="border-neon-cyan/30"
-      bgColor="bg-neon-cyan/5"
-      labelColor="text-neon-cyan"
-    />
-  );
-};
-
-export const type_create: React.FC<OperationRendererProps> = ({ operation }) => {
-  const typeName = operation.cache?.typeName || formatName(operation.input.name);
-  const summary = operation.output?.created ? 'Created type successfully' : operation.analysis;
-
-  return (
-    <BaseOperationDisplay
-      operation={operation}
-      label={`${typeName}Create()`}
-      summary={summary}
-      borderColor="border-neon-cyan/30"
-      bgColor="bg-neon-cyan/5"
-      labelColor="text-neon-cyan"
-    />
-  );
-};
-
-export const type_update: React.FC<OperationRendererProps> = ({ operation }) => {
-  const typeName = operation.cache?.typeName || formatName(operation.input.name);
-  const updateKeys = operation.input.update ? Object.keys(operation.input.update).join(', ') : '';
-  const summary = operation.output?.updated ? 'Updated type successfully' : operation.analysis;
-
-  return (
-    <BaseOperationDisplay
-      operation={operation}
-      label={`${typeName}Update(${updateKeys})`}
-      summary={summary}
-      borderColor="border-neon-cyan/30"
-      bgColor="bg-neon-cyan/5"
-      labelColor="text-neon-cyan"
-    />
-  );
-};
-
-export const type_delete: React.FC<OperationRendererProps> = ({ operation }) => {
-  const typeName = operation.cache?.typeName || formatName(operation.input.name);
-  const summary = operation.output?.deleted ? 'Deleted type successfully' : operation.analysis;
-
-  return (
-    <BaseOperationDisplay
-      operation={operation}
-      label={`${typeName}Delete()`}
-      summary={summary}
-      borderColor="border-neon-cyan/30"
-      bgColor="bg-neon-cyan/5"
-      labelColor="text-neon-cyan"
-    />
-  );
-};
-
-export const type_import: React.FC<OperationRendererProps> = ({ operation }) => {
-  const summary = operation.output?.imported
-    ? `Imported ${operation.output.imported} type${operation.output.imported !== 1 ? 's' : ''}`
-    : operation.analysis;
-
-  return (
-    <BaseOperationDisplay
-      operation={operation}
-      label={`TypeImport("${operation.input.path}")`}
-      summary={summary}
-      borderColor="border-neon-cyan/30"
-      bgColor="bg-neon-cyan/5"
-      labelColor="text-neon-cyan"
-    />
-  );
-};
+    : op.analysis,
+);
+
+export const type_create = renderer<'type_create'>(
+  (op) => `${op.cache?.typeName || formatName(op.input.name)}Create()`,
+  (op) => op.output?.created ? 'Created type successfully' : op.analysis,
+);
+
+export const type_update = renderer<'type_update'>(
+  (op) => `${op.cache?.typeName || formatName(op.input.name)}Update(${op.input.update ? Object.keys(op.input.update).join(', ') : ''})`,
+  (op) => op.output?.updated ? 'Updated type successfully' : op.analysis,
+);
+
+export const type_delete = renderer<'type_delete'>(
+  (op) => `${op.cache?.typeName || formatName(op.input.name)}Delete()`,
+  (op) => op.output?.deleted ? 'Deleted type successfully' : op.analysis,
+);
+
+export const type_import = renderer<'type_import'>(
+  (op) => `TypeImport("${op.input.glob}")`,
+  (op) => op.output?.discovered
+    ? `Imported ${pluralize(op.output.discovered.length, 'type')}`
+    : op.analysis,
+);
\ No newline at end of file
diff --git a/packages/cletus/src/browser/operations/artist.tsx b/packages/cletus/src/browser/operations/artist.tsx
index cca7359..4deba34 100644
--- a/packages/cletus/src/browser/operations/artist.tsx
+++ b/packages/cletus/src/browser/operations/artist.tsx
@@ -1,29 +1,13 @@
-import React from 'react';
-import { Operation } from '../../schemas';
 import { abbreviate } from '../../shared';
-import { BaseOperationDisplay } from './BaseOperationDisplay';
-import { OperationRendererProps } from './types';
+import { createRenderer } from './render';
 
-function createRenderer(getLabel: (op: Operation) => string, getSummary?: (op: Operation) => string | React.ReactNode | null) {
-  return (props: OperationRendererProps) => {
-    const { operation } = props;
-    const label = getLabel(operation);
-    const summary = operation.error || (getSummary ? getSummary(operation) : null) || operation.analysis;
+const renderer = createRenderer({
+  borderColor: "border-neon-pink/30",
+  bgColor: "bg-neon-pink/5",
+  labelColor: "text-neon-pink",
+});
 
-    return (
-      <BaseOperationDisplay
-        {...props}
-        label={label}
-        summary={summary}
-        borderColor="border-neon-pink/30"
-        bgColor="bg-neon-pink/5"
-        labelColor="text-neon-pink"
-      />
-    );
-  };
-}
-
-export const image_generate = createRenderer(
+export const image_generate = renderer<'image_generate'>(
   (op) => `ImageGenerate("${abbreviate(op.input.prompt, 30)}", n=${op.input.n || 1})`,
   (op) => {
     if (op.output) {
@@ -47,7 +31,7 @@ export const image_generate = createRenderer(
   }
 );
 
-export const image_edit = createRenderer(
+export const image_edit = renderer<'image_edit'>(
   (op) => `ImageEdit("${op.input.path}", "${abbreviate(op.input.prompt, 20)}")`,
   (op) => {
     if (op.output) {
@@ -66,10 +50,10 @@ export const image_edit = createRenderer(
   }
 );
 
-export const image_analyze = createRenderer(
+export const image_analyze = renderer<'image_analyze'>(
   (op) => {
     const pathCount = op.input.paths?.length || 1;
-    const firstPath = op.input.paths?.[0] || op.input.path || '';
+    const firstPath = op.input.paths?.[0] || '';
     const label = pathCount === 1 ? firstPath : `${pathCount} images`;
     return `ImageAnalyze(${label}, "${abbreviate(op.input.prompt, 20)}")`;
   },
@@ -81,7 +65,7 @@ export const image_analyze = createRenderer(
   }
 );
 
-export const image_describe = createRenderer(
+export const image_describe = renderer<'image_describe'>(
   (op) => `ImageDescribe("${op.input.path}")`,
   (op) => {
     if (op.output) {
@@ -91,7 +75,7 @@ export const image_describe = createRenderer(
   }
 );
 
-export const image_find = createRenderer(
+export const image_find = renderer<'image_find'>(
   (op) => `ImageFind("${abbreviate(op.input.query, 50)}", "${op.input.glob}")`,
   (op) => {
     if (op.output) {
@@ -103,7 +87,7 @@ export const image_find = createRenderer(
   }
 );
 
-export const image_attach = createRenderer(
+export const image_attach = renderer<'image_attach'>(
   (op) => `ImageAttach("${op.input.path}")`,
   (op) => {
     if (op.output?.attached) {
diff --git a/packages/cletus/src/browser/operations/clerk.tsx b/packages/cletus/src/browser/operations/clerk.tsx
index b56b273..eec0512 100644
--- a/packages/cletus/src/browser/operations/clerk.tsx
+++ b/packages/cletus/src/browser/operations/clerk.tsx
@@ -1,178 +1,367 @@
 import React from 'react';
-import { Operation } from '../../schemas';
 import { BaseOperationDisplay } from './BaseOperationDisplay';
 import { OperationRendererProps } from './types';
 import { cn } from '../lib/utils';
+import { createRenderer, linkFile } from './render';
+import { abbreviate, chunk, paginateText, pluralize } from '../../shared';
+import { CONSTS } from '../../constants';
 
-export const file_search: React.FC<OperationRendererProps> = (props) => {
-  const { operation } = props;
-  const summary = operation.output?.count !== undefined
-    ? `Found ${operation.output.count} file${operation.output.count !== 1 ? 's' : ''}`
-    : operation.analysis;
-  return <BaseOperationDisplay {...props} label={`Files("${operation.input.glob}")`} summary={summary} />;
-};
 
-export const file_summary: React.FC<OperationRendererProps> = (props) => (
-  <BaseOperationDisplay {...props} label={`Summary("${props.operation.input.path}")`} summary={props.operation.output?.summary || props.operation.analysis} />
+const renderer = createRenderer({
+  borderColor: "border-neon-green/30",
+  bgColor: "bg-neon-green/5",
+  labelColor: "text-neon-green",
+});
+
+export const file_search = renderer<'file_search'>(
+  (op) => `Files("${op.input.glob}", "${op.input.glob}")`,
+  (op) => {
+    if (op.output) {
+      return `Found ${pluralize(op.output.count, 'file')}`;
+    }
+    return null;
+  },
 );
 
-export const file_index: React.FC<OperationRendererProps> = (props) => {
-  const { operation } = props;
-  const summary = operation.output?.indexed !== undefined
-    ? `Indexed ${operation.output.indexed} file${operation.output.indexed !== 1 ? 's' : ''}`
-    : operation.analysis;
-  return <BaseOperationDisplay {...props} label={`Index("${operation.input.glob}")`} summary={summary} />;
-};
+export const file_summary = renderer<'file_summary'>(
+  (op) => `Summarize("${paginateText(op.input.path, 100, -100)}")`,
+  (op) => {
+    if (op.output) {
+      return `${linkFile(op.output.fullPath)}: ${abbreviate(op.output.summary, 60)}`;
+    }
+    return null;
+  },
+);
 
-export const file_create: React.FC<OperationRendererProps> = (props) => (
-  <BaseOperationDisplay {...props} label={`Create("${props.operation.input.path}")`} summary={props.operation.output?.fullPath ? `Created ${props.operation.output.fullPath}` : props.operation.analysis} />
+export const file_index = renderer<'file_index'>(
+  (op) => `Index("${op.input.glob}", ${op.input.index})`,
+  (op) => {
+    // Use cache for consistent rendering even if files change
+    const fileCount = op.cache?.indexableFiles?.length ?? op.output?.files.length;
+    if (fileCount !== undefined) {
+      const knowledgeCount = op.output?.knowledge;
+      if (knowledgeCount !== undefined) {
+        return `Indexed **${pluralize(fileCount, 'file')}**, **${pluralize(knowledgeCount, 'knowledge entry', 'knowledge entries')}**`;
+      }
+      return `Will index **${pluralize(fileCount, 'file')}**`;
+    }
+    return null;
+  }
 );
 
-export const file_copy: React.FC<OperationRendererProps> = (props) => (
-  <BaseOperationDisplay {...props} label={`Copy("${props.operation.input.from}" → "${props.operation.input.to}")`} summary={props.operation.output?.fullPath ? `Copied to ${props.operation.output.fullPath}` : props.operation.analysis} />
+export const file_create = renderer<'file_create'>(
+  (op) => `Write("${paginateText(op.input.path, 100, -100)}")`,
+  (op) => {
+    if (op.output) {
+      return `Created ${linkFile(op.output.fullPath)} with **${op.output.size.toLocaleString()}** characters, **${op.output.lines}** lines`;
+    }
+    return null;
+  }
 );
 
-export const file_move: React.FC<OperationRendererProps> = (props) => (
-  <BaseOperationDisplay {...props} label={`Move("${props.operation.input.from}" → "${props.operation.input.to}")`} summary={props.operation.output?.fullPath ? `Moved to ${props.operation.output.fullPath}` : props.operation.analysis} />
+export const file_copy = renderer<'file_copy'>(
+  (op) => `Copy("${op.input.glob}", "${op.input.target}")`,
+  (op) => {
+    // Use cache for consistent rendering
+    const count = op.cache?.sourceFiles?.length ?? op.output?.source?.length;
+    const fullTarget = op.cache?.fullTarget ?? op.output?.fullTarget;
+    if (count !== undefined) {
+      return op.output 
+        ? `Copied ${pluralize(count, 'file')} to ${fullTarget ? linkFile(fullTarget) : op.input.target}`
+        : `Will copy ${pluralize(count, 'file')} to ${fullTarget ? linkFile(fullTarget) : op.input.target}`;
+    }
+    return null;
+  }
 );
 
-export const file_stats: React.FC<OperationRendererProps> = ({ operation }) => {
-  let summary = operation.analysis;
-  if (operation.output) {
-    const size = operation.output.size;
-    const sizeStr = size < 1024 ? `${size}B` :
-                    size < 1024 * 1024 ? `${(size / 1024).toFixed(1)}KB` :
-                    `${(size / (1024 * 1024)).toFixed(1)}MB`;
-    summary = `${sizeStr} - ${operation.output.type}`;
+export const file_move = renderer<'file_move'>(
+  (op) => `Move("${op.input.glob}" → "${op.input.target}")`,
+  (op) => {
+    // Use cache for consistent rendering
+    const files = op.cache?.files ?? op.output?.files;
+    const targetPath = op.cache?.targetPath ?? op.output?.targetPath;
+    if (files) {
+      const count = files.length;
+      return op.output
+        ? `Moved ${pluralize(count, 'file')} to ${targetPath ? linkFile(targetPath) : op.input.target}`
+        : `Will move ${pluralize(count, 'file')} to ${targetPath ? linkFile(targetPath) : op.input.target}`;
+    }
+    return null;
   }
-  return <BaseOperationDisplay operation={operation} label={`Stats("${operation.input.path}")`} summary={summary} />;
-};
+);
 
-export const file_delete: React.FC<OperationRendererProps> = ({ operation }) => (
-  <BaseOperationDisplay operation={operation} label={`Delete("${operation.input.path}")`} summary={operation.output ? 'Deleted' : operation.analysis} />
+export const file_stats = renderer<'file_stats'>(
+  (op) => `FileStats("${paginateText(op.input.path, 100, -100)}")`,
+  (op) => {
+    if (op.output) {
+      const sizeKB = (op.output.size / 1024).toFixed(1);
+      return `${linkFile(op.output.fullPath)}: **${op.output.type}**, **${sizeKB} KB**${op.output.lines ? `, **${op.output.lines}** lines` : ''}`;
+    }
+    return null;
+  }
 );
 
-export const file_read: React.FC<OperationRendererProps> = ({ operation }) => {
-  let summary = operation.analysis;
-  if (operation.output) {
-    const lines = (operation.output.content || '').split('\n').length;
-    summary = `${lines} line${lines !== 1 ? 's' : ''}`;
+export const file_delete = renderer<'file_delete'>(
+  (op) => `Delete("${paginateText(op.input.path, 100, -100)}")`,
+  (op) => {
+    if (op.output) {
+      return `Deleted ${op.input.path}`;
+    }
+    return null;
   }
-  return <BaseOperationDisplay operation={operation} label={`Read("${operation.input.path}")`} summary={summary} />;
-};
+);
 
-export const file_edit: React.FC<OperationRendererProps> = ({ operation }) => {
-  // Check if there are no changes to apply
-  if (operation.cache?.changed === false) {
-    return (
-      <BaseOperationDisplay
-        operation={operation}
-        label={`Edit("${operation.input.path}")`}
-        summary="No changes"
-      />
-    );
+export const file_read = renderer<'file_read'>(
+  (op) => `Read("${paginateText(op.input.path, 100, -100)}")`,
+  (op) => {
+    if (op.output) {
+      const params: string[] = [];
+
+      // Add limit/offset info if non-default
+      const limitOffsetMode = op.input.limitOffsetMode || 'characters';
+      const defaultLimit = limitOffsetMode === 'characters' ? CONSTS.MAX_CHARACTERS : CONSTS.MAX_LINES;
+      if (op.input.limit && op.input.limit !== defaultLimit) {
+        params.push(`limit=${op.input.limit} ${limitOffsetMode}`);
+      }
+      if (op.input.offset) {
+        params.push(`offset=${op.input.offset}`);
+      }
+      if (op.input.limitOffsetMode && op.input.limitOffsetMode !== 'characters') {
+        params.push(`mode=${op.input.limitOffsetMode}`);
+      }
+
+      // Add boolean flags if enabled
+      if (op.input.showLines) params.push('lines');
+      if (op.input.describeImages) params.push('describe');
+      if (op.input.extractImages) params.push('extract');
+      if (op.input.transcribeImages) params.push('transcribe');
+
+      const paramsStr = params.length > 0 ? ` (${params.join(', ')})` : '';
+      return `Read ${linkFile(op.output.fullPath)}: **${op.output.content.length.toLocaleString()}** characters${op.output.truncated ? ' *(truncated)*' : ''}${paramsStr}`;
+    }
+    return null;
   }
+);
 
-  // Parse the diff to count additions and removals
-  const diff = operation.cache?.diff || operation.output || operation.analysis || '';
-  const diffLines = diff.split('\n');
-  let additions = 0;
-  let subtractions = 0;
-
-  diffLines.forEach(line => {
-    if (line.startsWith('+') && !line.startsWith('+++')) {
-      additions++;
-    } else if (line.startsWith('-') && !line.startsWith('---')) {
-      subtractions++;
+export const file_edit = renderer<'file_edit'>(
+  (op) => `Edit("${paginateText(op.input.path, 100, -100)}")`,
+  (op) => {
+    if (op.cache?.changed === false) {
+      return 'No changes';
     }
-  });
-
-  // Build summary with diff visualization
-  const summaryContent = (
-    <div>
-      <span className="text-foreground">→ </span>
-      <span>
-        {operation.output ? 'Updated ' : operation.analysis ? 'Edit ' : 'Analyzing '}
-        <span className="text-neon-cyan">{operation.input.path}</span>
-        {diff && additions + subtractions > 0 && (
-          <span>
-            {' '}with {additions} addition{additions !== 1 ? 's' : ''} and {subtractions} removal{subtractions !== 1 ? 's' : ''}
-          </span>
-        )}
-      </span>
-
-      {/* Render diff */}
-      {diff && (
-        <div className="mt-2 text-xs font-mono">
-          {diffLines
-            .slice(4) // Skip header lines
-            .filter(line => !line.startsWith('\\'))
-            .map((line, index) => {
-              const isAddition = line.startsWith('+') && !line.startsWith('+++');
-              const isRemoval = line.startsWith('-') && !line.startsWith('---');
-              const isContext = line.startsWith(' ');
-              const isChunkHeader = line.startsWith('@@');
-
-              if (isChunkHeader) {
-                return (
-                  <div key={index} className="text-muted-foreground my-1">
-                    {index > 0 && <div className="my-1">...</div>}
-                  </div>
-                );
-              }
-
-              return (
-                <div
-                  key={index}
-                  className={cn(
-                    'whitespace-pre',
-                    isAddition && 'bg-green-900/30 text-green-300',
-                    isRemoval && 'bg-red-900/30 text-red-300',
-                    isContext && 'text-muted-foreground'
-                  )}
-                >
-                  {line}
-                </div>
-              );
-            })}
+    
+    // diff format:
+    // Index: [filename]
+    // ===================================================================
+    // --- [filename]     before
+    // +++ [filename]     after
+    // @@ -old_index,old_lines +new_index,new_lines @@
+    // [+- ]line
+    // \ ignore
+    const lineClasses = {
+      '+': 'bg-green-900/30 text-green-300',
+      '-': 'bg-red-900/30 text-red-300',
+      ' ': 'text-muted-foreground',
+    } as const;
+
+    // render format:
+    // [gray line number] [+- ] content
+    // ... divider
+    let additions = 0;
+    let subtractions = 0;
+    const diff = op.cache?.diff || op.output || op.analysis || '';
+    const diffLines = diff.split('\n');
+    const relevantLines = diffLines.slice(4).filter(line => !line.startsWith('\\'));
+    const changeSetLines = chunk(relevantLines, (_, line) => line.startsWith('@@'));
+    const changeSets = changeSetLines.map((setLines, setLinesIndex) => {
+      const [, lineStartText, lineCountText] = /^@@ -\d+,\d+ \+(\d+),(\d+) @@$/.exec(setLines[0]) || [];
+      const lineStart = parseInt(lineStartText, 10);
+      const lineCount = parseInt(lineCountText, 10);
+      const linePadding = (lineStart + lineCount).toString().length + 1;
+      const lines = setLines.slice(1);
+      const lineNumbers: string[] = [];
+      let currentLineNumber = lineStart;
+      let removed = 0;
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (line.startsWith('-')) {
+          removed++;
+          subtractions++;
+        } else if (line.startsWith('+')) {
+          currentLineNumber -= removed;
+          removed = 0;
+          additions++;
+        }
+        lineNumbers.push(currentLineNumber.toFixed(0).padStart(linePadding, ' '));
+        currentLineNumber++;
+      }
+      // Trim empty lines at start and end
+      while (lines.length > 0 && lines[0].trim() === '') {
+        lines.shift();
+        lineNumbers.shift();
+      }
+      while (lines.length > 0 && lines[lines.length - 1].trim() === '') {
+        lines.pop();
+        lineNumbers.pop();
+      }
+
+      return (
+        <div key={setLinesIndex}>
+          {lines.map((line, lineIndex) => (
+            <div key={lineIndex} className=''>
+              <div color="gray">{lineNumbers[lineIndex]} </div>
+              <div className={lineClasses[line[0] as '+' | '-' | ' ']}>
+                {line}
+              </div>
+            </div>
+          ))}
         </div>
-      )}
-    </div>
-  );
-
-  return (
-    <BaseOperationDisplay
-      operation={operation}
-      label={`Edit("${operation.input.path}")`}
-      summary={summaryContent}
-      borderColor={operation.output ? 'border-border' : operation.status === 'rejected' ? 'border-muted' : 'border-green-500/30'}
-      bgColor={operation.output ? 'bg-card/50' : operation.status === 'rejected' ? 'bg-muted/20' : 'bg-green-500/5'}
-    />
-  );
-};
+      );
+    });
 
-export const text_search: React.FC<OperationRendererProps> = ({ operation }) => {
-  const summary = operation.output?.matches !== undefined
-    ? `Found ${operation.output.matches} match${operation.output.matches !== 1 ? 'es' : ''}`
-    : operation.analysis;
-  return <BaseOperationDisplay operation={operation} label={`Search("${operation.input.pattern}")`} summary={summary} />;
-};
+    const changeSetsGrouped = changeSets.map((set, index) => (
+      <React.Fragment key={index}>
+        {index > 0 && (<div>...</div>)}
+        {set}
+      </React.Fragment>
+    ));
+
+    /* Ink version
+      const fullPath = path.resolve(ai.config.defaultContext!.cwd!, op.input.path);
+      const url = fileProtocol(fullPath);
+
+      const boxStyle = op.output
+        ? {}
+        : op.status === 'rejected'
+          ? { borderStyle: 'round', borderColor: 'gray' } as const
+          : { borderStyle: 'round', borderColor: lineStyles['+'].backgroundColor } as const;
+
+      return (
+        <Box {...boxStyle} flexDirection="column" flexGrow={1}>
+          <Box marginLeft={2} flexGrow={1}>
+            <Text>{'→ '}</Text>
+            <Text>{op.output ? 'Updated ' : op.analysis ? 'Edit ' : 'Analyzing '}</Text>
+            <Link url={url}>{op.input.path}</Link>
+            {diff && (
+              <Text> with {pluralize(additions, 'addition')} and {pluralize(subtractions, 'removal')}</Text>
+            )}
+          </Box>
+          {changeSetsGrouped}
+        </Box>
+      );
+    */
+    
+      // React Web Version:
+    return (
+      <div>
+        <span className="text-foreground">→ </span>
+        <span>
+          {op.output ? 'Updated ' : op.analysis ? 'Edit ' : 'Analyzing '}
+          <span className="text-neon-cyan">{op.input.path}</span>
+          {diff && (additions + subtractions) > 0 && (
+            <span>
+              {' '}with {pluralize(additions, 'addition')} and {pluralize(subtractions, 'removal')}
+            </span>
+          )}
+        </span>
+        {changeSetsGrouped}
+      </div>
+    );
+  },
+  (op) => ({
+    borderColor: op.output ? 'border-border' : op.status === 'rejected' ? 'border-muted' : 'border-green-500/30',
+    bgColor: op.output ? 'bg-card/50' : op.status === 'rejected' ? 'bg-muted/20' : 'bg-green-500/5',
+  })
+);
 
-export const dir_create: React.FC<OperationRendererProps> = ({ operation }) => (
-  <BaseOperationDisplay operation={operation} label={`MkDir("${operation.input.path}")`} summary={operation.output?.fullPath ? `Created ${operation.output.fullPath}` : operation.analysis} />
+export const text_search = renderer<'text_search'>(
+  (op) => `Search("${abbreviate(op.input.regex, 20)}", "${op.input.glob}")`,
+  (op) => {
+    // Use cache for consistent rendering when results are available
+    const searchedCount = op.cache?.searchableFiles?.length ?? op.output?.searched;
+    if (op.output) {
+      const output = op.output;
+      if (output.fileCount !== undefined) {
+        return `Found ${pluralize(output.fileCount, 'file')} (searched ${searchedCount ?? output.searched})`;
+      } else if (output.matchCount !== undefined) {
+        return `Found ${pluralize(output.matchCount, 'match', 'matches')} (searched ${pluralize(searchedCount ?? output.searched ?? 0, 'file')})`;
+      } else if (output.matches) {
+        return `Found matches in ${pluralize(output.matches.length, 'file')}`;
+      } else {
+        return `Searched ${pluralize(searchedCount ?? output.searched ?? 0, 'file')}`;
+      }
+    } else if (searchedCount !== undefined) {
+      return `Will search ${pluralize(searchedCount, 'file')}`;
+    }
+    return null;
+  }
+);
+
+export const dir_create = renderer<'dir_create'>(
+  (op) => `Dir("${paginateText(op.input.path, 100, -100)}")`,
+  (op) => {
+    if (op.output) {
+      return `Created directory ${linkFile(op.output.fullPath)}`;
+    }
+    return null;
+  }
 );
 
-export const dir_summary: React.FC<OperationRendererProps> = ({ operation }) => (
-  <BaseOperationDisplay operation={operation} label={`DirSummary("${operation.input.path}")`} summary={operation.output?.summary || operation.analysis} />
+export const dir_summary = renderer<'dir_summary'>(
+  (op) => `DirSummary("${paginateText(op.input.path || '.', 100, -100)}")`,
+  (op) => {
+    if (op.output) {
+      return `${linkFile(op.output.fullPath)}: ${pluralize(op.output.fileCount, 'file')}, ${pluralize(op.output.dirCount, 'dir')}, ${pluralize(op.output.extCount, 'extension')}`;
+    }
+    return null;
+  }
 );
 
-export const file_attach: React.FC<OperationRendererProps> = ({ operation }) => (
-  <BaseOperationDisplay operation={operation} label={`Attach("${operation.input.path}")`} summary={operation.output ? 'Attached to context' : operation.analysis} />
+export const file_attach = renderer<'file_attach'>(
+  (op) => `FileAttach("${paginateText(op.input.path, 100, -100)}")`,
+  (op) => {
+    if (op.output?.attached) {
+      return `Attached file: ${linkFile(op.output.fullPath)}`;
+    }
+    return null;
+  }
 );
 
-export const shell: React.FC<OperationRendererProps> = ({ operation }) => {
-  const summary = operation.output
-    ? `Exit code: ${operation.output.exitCode || 0}`
-    : operation.analysis;
-  return <BaseOperationDisplay operation={operation} label={`Shell("${operation.input.command}")`} summary={summary} />;
+const processShellOutput = (stdout: string, stderr: string) => {
+  const allOutput = stdout + stderr;
+  const lines = allOutput.split('\n').filter(l => l.length > 0);
+  return { allOutput, lines, lineCount: lines.length };
 };
+
+export const shell = renderer<'shell'>(
+  (op) => `Shell("${op.input.command}")`,
+  (op) => {
+    if (!op.output) {
+      return 'Executing...';
+    }
+
+    const { lines, lineCount } = processShellOutput(op.output.stdout, op.output.stderr);
+    const lastLines = lines.slice(-4);
+    const exitCode = op.output.exitCode;
+    const signal = op.output.signal;
+
+    const statusText = exitCode !== null 
+      ? `Exit code: ${exitCode}`
+      : signal 
+        ? `Terminated by signal: ${signal}`
+        : 'Running...';
+
+    return (
+      <>
+        {lastLines.length > 0 && (
+          <div className="mt-1 p-2 bg-muted rounded font-mono text-sm">
+            {lastLines.map((line, index) => (
+              <div key={index}>{line}</div>
+            ))}
+          </div>
+        )}
+        {pluralize(lineCount, 'line')} - {statusText}
+      </>
+    );
+  }
+);
\ No newline at end of file
diff --git a/packages/cletus/src/browser/operations/dba.tsx b/packages/cletus/src/browser/operations/dba.tsx
index 9b48d25..97c48eb 100644
--- a/packages/cletus/src/browser/operations/dba.tsx
+++ b/packages/cletus/src/browser/operations/dba.tsx
@@ -2,30 +2,28 @@ import React from 'react';
 import { Operation } from '../../schemas';
 import { BaseOperationDisplay } from './BaseOperationDisplay';
 import { formatName, abbreviate } from '../../shared';
+import { createRenderer } from './render';
 
-interface OperationRendererProps {
-  operation: Operation;
-  showInput?: boolean;
-  showOutput?: boolean;
-}
 
-export const data_index: React.FC<OperationRendererProps> = ({ operation }) => {
-  const typeName = operation.cache?.typeName || formatName(operation.input.type);
-  const summary = operation.output?.libraryKnowledgeUpdated
-    ? `Knowledge updated for type: ${typeName}`
-    : operation.analysis;
+const renderer = createRenderer({
+  borderColor: "border-neon-blue/30",
+  bgColor: "bg-neon-blue/5",
+  labelColor: "text-neon-blue",
+});
 
-  return (
-    <BaseOperationDisplay
-      operation={operation}
-      label={`${typeName}Index()`}
-      summary={summary}
-      borderColor="border-neon-blue/30"
-      bgColor="bg-neon-blue/5"
-      labelColor="text-neon-blue"
-    />
-  );
-};
+export const data_index = renderer<'data_index'>(
+  (op) => {
+    const typeName = op.cache?.typeName || op.input.type;
+    return `${formatName(typeName)}Index()`;
+  },
+  (op) => {
+    const typeName = op.cache?.typeName || op.input.type;
+    if (op.output?.libraryKnowledgeUpdated) {
+      return `Knowledge updated for type: ${typeName}`;
+    }
+    return null;
+  }
+);
 
 export const data_import: React.FC<OperationRendererProps> = ({ operation }) => {
   const typeName = operation.cache?.typeName || formatName(operation.input.type);
diff --git a/packages/cletus/src/browser/operations/index.tsx b/packages/cletus/src/browser/operations/index.tsx
index 3416d15..e9228b8 100644
--- a/packages/cletus/src/browser/operations/index.tsx
+++ b/packages/cletus/src/browser/operations/index.tsx
@@ -15,9 +15,9 @@ import * as secretary from './secretary';
 /**
  * Registry of operation renderers
  */
-const OperationRenderers: Partial<Record<OperationKind, React.FC<{
+const OperationRenderers: Record<OperationKind, React.FC<{
   operation: Operation;
-}>>> = {
+}>> = {
   // Clerk operations
   ...clerk,
 
diff --git a/packages/cletus/src/browser/operations/render.tsx b/packages/cletus/src/browser/operations/render.tsx
index 202d853..2107938 100644
--- a/packages/cletus/src/browser/operations/render.tsx
+++ b/packages/cletus/src/browser/operations/render.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { Operation } from '../../schemas';
-import { BaseOperationDisplay } from './BaseOperationDisplay';
+import { Operation, OperationKind } from '../../schemas';
+import { OperationDataFor, OperationFor } from '../../operations/types';
+import { BaseOperationDisplay, BaseOperationDisplayProps } from './BaseOperationDisplay';
 
 /**
  * Get status color and label for an operation status
@@ -38,7 +39,7 @@ export function getElapsedTime(op: Operation): string {
   return `${Math.floor(duration / 60000)}m ${Math.round((duration % 60000) / 1000)}s`;
 }
 
-interface OperationDisplayProps {
+export interface OperationDisplayProps {
   operation: Operation;
   operationIndex?: number;
   onApprove?: (index: number) => void;
@@ -58,3 +59,37 @@ export const OperationDisplay: React.FC<OperationDisplayProps> = (props) => (
     summary={props.operation.analysis}
   />
 );
+
+/**
+ * Create a renderer for a specific operation kind
+ * @param common 
+ * @returns 
+ */
+export const createRenderer = (common: Partial<BaseOperationDisplayProps> = {}) => {
+  return <K extends OperationKind>(
+    getLabel: (op: OperationDataFor<K>) => string, 
+    getSummary?: (op: OperationDataFor<K>) => string | React.ReactNode | null,
+    getProps?: (op: OperationDataFor<K>) => Partial<BaseOperationDisplayProps>
+  ) => {
+    return (props: OperationDisplayProps) => {
+      const operation = props.operation as any as OperationDataFor<K>;
+      const label = getLabel(operation);
+      const summary = operation.error || (getSummary ? getSummary(operation) : null) || operation.analysis;
+      const additionalProps = getProps ? getProps(operation) : {};
+
+      return (
+        <BaseOperationDisplay
+          {...common}
+          {...additionalProps}
+          operation={operation}
+          label={label}
+          summary={summary}
+        />
+      );
+    };
+  }
+};
+
+export function linkFile(path: string) {
+  return path;
+}
\ No newline at end of file
diff --git a/packages/cletus/src/browser/operations/types.ts b/packages/cletus/src/browser/operations/types.ts
index e0c62ae..7ac37e2 100644
--- a/packages/cletus/src/browser/operations/types.ts
+++ b/packages/cletus/src/browser/operations/types.ts
@@ -5,8 +5,6 @@ import { Operation } from '../../schemas';
  */
 export interface OperationRendererProps {
   operation: Operation;
-  showInput?: boolean;
-  showOutput?: boolean;
   operationIndex?: number;
   onApprove?: (index: number) => void;
   onReject?: (index: number) => void;
diff --git a/packages/cletus/src/browser/pages/UnifiedLayout.tsx b/packages/cletus/src/browser/pages/UnifiedLayout.tsx
new file mode 100644
index 0000000..9961203
--- /dev/null
+++ b/packages/cletus/src/browser/pages/UnifiedLayout.tsx
@@ -0,0 +1,737 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ArrowLeft, CheckSquare, Settings, Trash2, MessageSquare, Sparkles } from 'lucide-react';
+import type { ChatMeta, ChatMode, Config, Message, MessageContent } from '../../schemas';
+import { AgentModeSelector } from '../components/AgentModeSelector';
+import { AssistantSelector } from '../components/AssistantSelector';
+import { ChatInput } from '../components/ChatInput';
+import { ChatSettingsDialog } from '../components/ChatSettingsDialog';
+import { ChatSidebar } from '../components/ChatSidebar';
+import { MessageList } from '../components/MessageList';
+import { ModelSelector } from '../components/ModelSelector';
+import { ModeSelector } from '../components/ModeSelector';
+import { ProfileModal } from '../components/ProfileModal';
+import { QuestionsModal } from '../components/QuestionsModal';
+import { TodosModal } from '../components/TodosModal';
+import { ToolsetSelector } from '../components/ToolsetSelector';
+import { Button } from '../components/ui/button';
+import { Input } from '../components/ui/input';
+import { ScrollArea } from '../components/ui/scroll-area';
+import type { ServerMessage } from '../websocket-types';
+import { sendClientMessage } from '../websocket-types';
+
+interface UnifiedLayoutProps {
+  config: Config;
+  onConfigChange: () => Promise<void>;
+}
+
+export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigChange }) => {
+  const [selectedChatId, setSelectedChatId] = useState<string | null>(null);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [pendingMessage, setPendingMessage] = useState<Message | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [showModelSelector, setShowModelSelector] = useState(false);
+  const [showChatSettings, setShowChatSettings] = useState(false);
+  const [showTodos, setShowTodos] = useState(false);
+  const [showProfile, setShowProfile] = useState(false);
+  const [showClearConfirm, setShowClearConfirm] = useState(false);
+  const [clearConfirmText, setClearConfirmText] = useState('');
+  const [isEditingTitle, setIsEditingTitle] = useState(false);
+  const [editedTitle, setEditedTitle] = useState('');
+  const [totalCost, setTotalCost] = useState(0);
+  const [operationDecisions, setOperationDecisions] = useState<Map<number, 'approve' | 'reject'>>(new Map());
+  const [chatMetaState, setChatMetaState] = useState<ChatMeta | null>(null);
+  const [cwd, setCwd] = useState<string | undefined>(undefined);
+  const [status, setStatus] = useState('');
+  const [isProcessing, setIsProcessing] = useState(false);
+  const wsRef = useRef<WebSocket | null>(null);
+  const modelsResolverRef = useRef<{
+    resolve: (models: any[]) => void;
+    reject: (error: Error) => void;
+  } | null>(null);
+
+  const chatMeta = chatMetaState || config.chats.find((c) => c.id === selectedChatId);
+
+  // Auto-select last chat on mount
+  useEffect(() => {
+    if (!selectedChatId && config.chats.length > 0) {
+      const lastChat = [...config.chats].sort((a, b) => b.updated - a.updated)[0];
+      if (lastChat) {
+        setSelectedChatId(lastChat.id);
+        window.history.replaceState({}, '', `/chat/${lastChat.id}`);
+      }
+    }
+  }, [config.chats, selectedChatId]);
+
+  // WebSocket connection
+  useEffect(() => {
+    if (!selectedChatId) return;
+
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const ws = new WebSocket(`${protocol}//${window.location.host}`);
+
+    ws.onopen = () => {
+      console.log('WebSocket connected');
+      sendClientMessage(ws, { type: 'get_messages', data: { chatId: selectedChatId } });
+    };
+
+    ws.onmessage = (event) => {
+      const message = JSON.parse(event.data) as ServerMessage;
+      handleServerMessage(message);
+    };
+
+    ws.onerror = (error) => {
+      console.error('WebSocket error:', error);
+      setLoading(false);
+    };
+
+    ws.onclose = () => {
+      console.log('WebSocket closed');
+    };
+
+    wsRef.current = ws;
+
+    return () => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.close();
+      }
+    };
+  }, [selectedChatId]);
+
+  const handleServerMessage = (message: ServerMessage) => {
+    switch (message.type) {
+      case 'messages':
+        setMessages(message.data.messages || []);
+        setLoading(false);
+        break;
+
+      case 'message_added':
+        if (wsRef.current && selectedChatId) {
+          sendClientMessage(wsRef.current, { type: 'get_messages', data: { chatId: selectedChatId } });
+        }
+        break;
+
+      case 'pending_update':
+        setPendingMessage(message.data.pending);
+        break;
+
+      case 'message_updated':
+        setMessages(prev => prev.map(msg =>
+          msg.created === message.data.message.created ? message.data.message : msg
+        ));
+        break;
+
+      case 'messages_updated':
+        if (message.data.messages) {
+          setMessages(message.data.messages);
+        }
+        break;
+
+      case 'response_complete':
+        setPendingMessage(null);
+        setIsProcessing(false);
+        setStatus('');
+        if (message.data.message) {
+          setMessages(prev => [...prev, message.data.message]);
+        }
+        break;
+
+      case 'usage_update':
+        if (message.data.accumulatedCost !== undefined) {
+          setTotalCost(message.data.accumulatedCost);
+        }
+        break;
+
+      case 'chat_updated':
+        if (message.data.chat) {
+          setChatMetaState(message.data.chat);
+          onConfigChange();
+        }
+        if (message.data.cwd !== undefined) {
+          setCwd(message.data.cwd);
+        }
+        break;
+
+      case 'status_update':
+        setStatus(message.data.status);
+        break;
+
+      case 'elapsed_update':
+        break;
+
+      case 'models':
+        if (modelsResolverRef.current) {
+          modelsResolverRef.current.resolve(message.data.models || []);
+          modelsResolverRef.current = null;
+        }
+        break;
+
+      case 'chat_deleted':
+        break;
+
+      case 'error':
+        console.error('Server error:', message.data.message);
+        setIsProcessing(false);
+        setStatus('Error: ' + message.data.message);
+        if (modelsResolverRef.current) {
+          modelsResolverRef.current.reject(new Error(message.data.message));
+          modelsResolverRef.current = null;
+        }
+        setLoading(false);
+        break;
+
+      default:
+        console.warn('Unhandled message type:', (message as any).type);
+    }
+  };
+
+  const send = (message: any) => {
+    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+      sendClientMessage(wsRef.current, message);
+    } else {
+      console.error('WebSocket not connected');
+    }
+  };
+
+  const handleChatSelect = (chatId: string) => {
+    setSelectedChatId(chatId);
+    setMessages([]);
+    setPendingMessage(null);
+    setLoading(true);
+    window.history.pushState({}, '', `/chat/${chatId}`);
+  };
+
+  const handleSendMessage = (content: MessageContent[]) => {
+    if (!selectedChatId) return;
+    send({
+      type: 'send_message',
+      data: { chatId: selectedChatId, content },
+    });
+    setIsProcessing(true);
+    setStatus('Processing...');
+  };
+
+  const handleCancel = () => {
+    send({ type: 'cancel' });
+    setIsProcessing(false);
+    setStatus('');
+  };
+
+  const handleQuestionsSubmit = (questionAnswers: Record<number, Set<number>>, questionCustomAnswers: Record<number, string>) => {
+    if (!selectedChatId) return;
+    const answersArray: Record<number, number[]> = {};
+    for (const [key, value] of Object.entries(questionAnswers)) {
+      answersArray[Number(key)] = Array.from(value);
+    }
+
+    send({
+      type: 'submit_question_answers',
+      data: { chatId: selectedChatId, questionAnswers: answersArray, questionCustomAnswers },
+    });
+    setIsProcessing(true);
+    setStatus('Processing answers...');
+  };
+
+  const handleQuestionsCancel = () => {
+    if (!selectedChatId) return;
+    send({
+      type: 'update_chat_meta',
+      data: { chatId: selectedChatId, updates: { questions: [] } },
+    });
+  };
+
+  const handleModeChange = (mode: ChatMode) => {
+    if (!selectedChatId) return;
+    send({ type: 'update_chat_meta', data: { chatId: selectedChatId, updates: { mode } } });
+  };
+
+  const handleAgentModeChange = (agentMode: 'plan' | 'default' | undefined) => {
+    if (!selectedChatId) return;
+    send({ type: 'update_chat_meta', data: { chatId: selectedChatId, updates: { agentMode } } });
+  };
+
+  const handleToolsetChange = (toolset: string | null) => {
+    if (!selectedChatId) return;
+    send({ type: 'update_chat_meta', data: { chatId: selectedChatId, updates: { toolset: toolset } } });
+  };
+
+  const handleAssistantChange = (assistant: string) => {
+    if (!selectedChatId) return;
+    const assistantValue = assistant === 'none' ? undefined : assistant;
+    send({ type: 'update_chat_meta', data: { chatId: selectedChatId, updates: { assistant: assistantValue } } });
+  };
+
+  const handleModelChange = (model: string) => {
+    if (!selectedChatId) return;
+    send({ type: 'update_chat_meta', data: { chatId: selectedChatId, updates: { model } } });
+  };
+
+  const handleFetchModels = async (): Promise<any[]> => {
+    return new Promise((resolve, reject) => {
+      if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+        reject(new Error('WebSocket not connected'));
+        return;
+      }
+
+      modelsResolverRef.current = { resolve, reject };
+
+      const timeout = setTimeout(() => {
+        if (modelsResolverRef.current) {
+          modelsResolverRef.current.reject(new Error('Timeout fetching models'));
+          modelsResolverRef.current = null;
+        }
+      }, 10000);
+
+      sendClientMessage(wsRef.current, { type: 'get_models' });
+    });
+  };
+
+  const handleChatSettingsSave = (updates: { title?: string; prompt?: string; cwd?: string }) => {
+    if (!selectedChatId) return;
+    const { cwd: newCwd, ...metaUpdates } = updates;
+    send({
+      type: 'update_chat_meta',
+      data: { chatId: selectedChatId, updates: metaUpdates, cwd: newCwd },
+    });
+  };
+
+  const handleAddTodo = (todo: string) => {
+    if (!selectedChatId) return;
+    send({ type: 'add_todo', data: { chatId: selectedChatId, todo } });
+  };
+
+  const handleToggleTodo = (index: number) => {
+    if (!selectedChatId) return;
+    send({ type: 'toggle_todo', data: { chatId: selectedChatId, index } });
+  };
+
+  const handleRemoveTodo = (index: number) => {
+    if (!selectedChatId) return;
+    send({ type: 'remove_todo', data: { chatId: selectedChatId, index } });
+  };
+
+  const handleClearTodos = () => {
+    if (!selectedChatId) return;
+    if (confirm('Are you sure you want to clear all todos?')) {
+      send({ type: 'clear_todos', data: { chatId: selectedChatId } });
+    }
+  };
+
+  const handleClearMessages = () => {
+    setShowClearConfirm(true);
+  };
+
+  const handleConfirmClear = () => {
+    if (!selectedChatId) return;
+    if (clearConfirmText === 'CLEAR') {
+      send({ type: 'clear_messages', data: { chatId: selectedChatId } });
+      setMessages([]);
+      setShowClearConfirm(false);
+      setClearConfirmText('');
+    }
+  };
+
+  const handleStartEditTitle = () => {
+    setEditedTitle(chatMeta?.title || '');
+    setIsEditingTitle(true);
+  };
+
+  const handleSaveTitle = () => {
+    if (!selectedChatId || !editedTitle.trim() || editedTitle === chatMeta?.title) {
+      setIsEditingTitle(false);
+      return;
+    }
+    send({ type: 'update_chat_meta', data: { chatId: selectedChatId, updates: { title: editedTitle.trim() } } });
+    setIsEditingTitle(false);
+  };
+
+  const handleCancelEditTitle = () => {
+    setIsEditingTitle(false);
+    setEditedTitle('');
+  };
+
+  const handleDeleteChat = () => {
+    if (!selectedChatId || !chatMeta) return;
+    if (confirm(`Are you sure you want to delete "${chatMeta.title}"? This cannot be undone.`)) {
+      send({ type: 'delete_chat', data: { chatId: selectedChatId } });
+      setSelectedChatId(null);
+      setMessages([]);
+      setTimeout(() => onConfigChange(), 500);
+    }
+  };
+
+  const handleOperationApproval = (message: Message, approved: number[], rejected: number[]) => {
+    if (!selectedChatId) return;
+    send({
+      type: 'handle_operations',
+      data: {
+        chatId: selectedChatId,
+        messageCreated: message.created,
+        approved,
+        rejected,
+      },
+    });
+    setOperationDecisions(new Map());
+  };
+
+  const handleToggleOperationDecision = (idx: number, decision: 'approve' | 'reject') => {
+    const newDecisions = new Map(operationDecisions);
+    newDecisions.set(idx, decision);
+    setOperationDecisions(newDecisions);
+  };
+
+  const handleApproveAllOperations = () => {
+    const lastMessage = messages[messages.length - 1];
+    if (!lastMessage || lastMessage.role !== 'assistant') return;
+
+    const approvableOps = (lastMessage.operations || [])
+      .map((op, idx) => ({ op, idx }))
+      .filter(({ op }) => op.status === 'analyzed');
+
+    const approved = approvableOps.map(({ idx }) => idx);
+    handleOperationApproval(lastMessage, approved, []);
+  };
+
+  const handleRejectAllOperations = () => {
+    const lastMessage = messages[messages.length - 1];
+    if (!lastMessage || lastMessage.role !== 'assistant') return;
+
+    const approvableOps = (lastMessage.operations || [])
+      .map((op, idx) => ({ op, idx }))
+      .filter(({ op }) => op.status === 'analyzed');
+
+    const rejected = approvableOps.map(({ idx }) => idx);
+    handleOperationApproval(lastMessage, [], rejected);
+  };
+
+  const handleSubmitOperationDecisions = () => {
+    const lastMessage = messages[messages.length - 1];
+    if (!lastMessage || lastMessage.role !== 'assistant') return;
+
+    const approvableOps = (lastMessage.operations || [])
+      .map((op, idx) => ({ op, idx }))
+      .filter(({ op }) => op.status === 'analyzed');
+
+    const approved: number[] = [];
+    const rejected: number[] = [];
+
+    approvableOps.forEach(({ idx }) => {
+      const decision = operationDecisions.get(idx);
+      if (decision === 'approve') {
+        approved.push(idx);
+      } else if (decision === 'reject') {
+        rejected.push(idx);
+      }
+    });
+
+    handleOperationApproval(lastMessage, approved, rejected);
+  };
+
+  const handleProfileSave = (updates: Partial<Config['user']>) => {
+    send({ type: 'update_user', data: { updates } });
+  };
+
+  // Get the actual last message being rendered (including pending)
+  const allMessages = pendingMessage ? [...messages, pendingMessage] : messages;
+  const lastMessage = allMessages.length > 0 ? allMessages[allMessages.length - 1] : null;
+  const lastMessagePendingOps = lastMessage?.role === 'assistant'
+    ? (lastMessage.operations || []).filter(op => op.status === 'analyzed')
+    : [];
+  const hasMultiplePendingOps = lastMessagePendingOps.length > 1;
+  const allOperationsDecided = lastMessagePendingOps.every((_op, idx) =>
+    operationDecisions.has(idx)
+  );
+
+  // Empty state when no chat is selected
+  if (!selectedChatId || !chatMeta) {
+    return (
+      <div className="flex h-screen bg-background">
+        <ChatSidebar
+          config={config}
+          currentChatId={null}
+          isCollapsed={sidebarCollapsed}
+          onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
+          onChatSelect={handleChatSelect}
+          onConfigChange={onConfigChange}
+          onProfileClick={() => setShowProfile(true)}
+        />
+        <div className="flex-1 flex items-center justify-center">
+          <div className="text-center space-y-6">
+            <Sparkles className="w-24 h-24 mx-auto text-neon-cyan opacity-50" />
+            <div>
+              <h2 className="text-3xl font-bold neon-text-cyan mb-2">Welcome to Cletus</h2>
+              <p className="text-muted-foreground">
+                {config.chats.length === 0
+                  ? 'Create a new chat to get started'
+                  : 'Select a chat from the sidebar'}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {showProfile && (
+          <ProfileModal
+            user={config.user}
+            onSave={handleProfileSave}
+            onClose={() => setShowProfile(false)}
+          />
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex h-screen bg-background">
+      <ChatSidebar
+        config={config}
+        currentChatId={selectedChatId}
+        isCollapsed={sidebarCollapsed}
+        onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
+        onChatSelect={handleChatSelect}
+        onConfigChange={onConfigChange}
+        onProfileClick={() => setShowProfile(true)}
+      />
+
+      {/* Main Chat Area */}
+      <div className="flex-1 flex flex-col">
+        {/* Chat Header */}
+        <div className="relative z-10 border-b border-border bg-card/30 backdrop-blur-sm p-4">
+          <div className="flex items-center gap-4">
+            <div className="flex-1 flex items-center gap-2">
+              {isEditingTitle ? (
+                <div className="flex items-center gap-2 flex-1">
+                  <Input
+                    type="text"
+                    value={editedTitle}
+                    onChange={(e) => setEditedTitle(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        handleSaveTitle();
+                      } else if (e.key === 'Escape') {
+                        handleCancelEditTitle();
+                      }
+                    }}
+                    className="flex-1 max-w-md"
+                    autoFocus
+                  />
+                  <Button variant="ghost" size="sm" onClick={handleSaveTitle}>
+                    Save
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={handleCancelEditTitle}>
+                    Cancel
+                  </Button>
+                </div>
+              ) : (
+                <>
+                  <h2
+                    className="text-xl font-bold neon-text-cyan cursor-pointer hover:opacity-80 transition-opacity"
+                    onClick={handleStartEditTitle}
+                    title="Click to edit title"
+                  >
+                    {chatMeta.title}
+                  </h2>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    onClick={handleDeleteChat}
+                    title="Delete chat"
+                    className="text-muted-foreground hover:text-destructive"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </Button>
+                </>
+              )}
+            </div>
+            <div className="flex items-center gap-3">
+              <AssistantSelector
+                assistants={config.assistants}
+                currentAssistant={chatMeta.assistant}
+                onChange={handleAssistantChange}
+              />
+              <ModeSelector mode={chatMeta.mode} onChange={handleModeChange} />
+              <AgentModeSelector
+                agentMode={chatMeta.agentMode || 'default'}
+                onChange={handleAgentModeChange}
+              />
+              <ToolsetSelector
+                toolset={chatMeta.toolset}
+                onChange={handleToolsetChange}
+              />
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setShowTodos(true)}
+                title="Todos"
+              >
+                <CheckSquare className="w-5 h-5" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={() => setShowChatSettings(true)}
+                title="Chat Settings"
+              >
+                <Settings className="w-5 h-5" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                onClick={handleClearMessages}
+                title="Clear messages"
+              >
+                <Trash2 className="w-5 h-5" />
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="flex-1 flex items-center justify-center">
+            <div className="text-center space-y-4">
+              <div className="spinner mx-auto"></div>
+              <p className="text-muted-foreground">Loading messages...</p>
+            </div>
+          </div>
+        ) : (
+          <>
+            {/* Messages Area */}
+            <ScrollArea className="flex-1 p-6">
+              <MessageList
+                messages={pendingMessage ? [...messages, pendingMessage] : messages}
+                operationDecisions={operationDecisions}
+                onToggleOperationDecision={handleToggleOperationDecision}
+                onApproveOperation={(msg, idx) => handleOperationApproval(msg, [idx], [])}
+                onRejectOperation={(msg, idx) => handleOperationApproval(msg, [], [idx])}
+              />
+            </ScrollArea>
+
+            {/* Input Area */}
+            <div className="border-t border-border bg-card/30 backdrop-blur-sm">
+              <ChatInput
+                chatId={selectedChatId}
+                chatMeta={chatMeta}
+                config={config}
+                messageCount={messages.length}
+                totalCost={totalCost}
+                status={status}
+                isProcessing={isProcessing}
+                onSendMessage={handleSendMessage}
+                onCancel={handleCancel}
+                onModelClick={() => setShowModelSelector(true)}
+                hasMultiplePendingOperations={hasMultiplePendingOps}
+                allOperationsDecided={allOperationsDecided}
+                onApproveAll={handleApproveAllOperations}
+                onRejectAll={handleRejectAllOperations}
+                onSubmitDecisions={handleSubmitOperationDecisions}
+              />
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* Modals */}
+      {showModelSelector && (
+        <ModelSelector
+          currentModel={chatMeta.model || config.user.models?.chat || ''}
+          onSelect={handleModelChange}
+          onClose={() => setShowModelSelector(false)}
+          onFetchModels={handleFetchModels}
+        />
+      )}
+
+      {showChatSettings && (
+        <ChatSettingsDialog
+          title={chatMeta.title}
+          prompt={chatMeta.prompt}
+          cwd={cwd}
+          onSave={handleChatSettingsSave}
+          onClose={() => setShowChatSettings(false)}
+        />
+      )}
+
+      {showTodos && (
+        <TodosModal
+          todos={chatMeta.todos}
+          onAddTodo={handleAddTodo}
+          onToggleTodo={handleToggleTodo}
+          onRemoveTodo={handleRemoveTodo}
+          onClearTodos={handleClearTodos}
+          onClose={() => setShowTodos(false)}
+        />
+      )}
+
+      {chatMeta.questions && chatMeta.questions.length > 0 && !isProcessing && (
+        <QuestionsModal
+          questions={chatMeta.questions}
+          onSubmit={handleQuestionsSubmit}
+          onCancel={handleQuestionsCancel}
+        />
+      )}
+
+      {showProfile && (
+        <ProfileModal
+          user={config.user}
+          onSave={handleProfileSave}
+          onClose={() => setShowProfile(false)}
+        />
+      )}
+
+      {showClearConfirm && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
+          onClick={() => {
+            setShowClearConfirm(false);
+            setClearConfirmText('');
+          }}
+        >
+          <div
+            className="relative w-full max-w-md bg-card rounded-lg border border-border shadow-2xl p-6"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <h2 className="text-xl font-bold text-destructive mb-4">Clear All Messages</h2>
+            <p className="text-foreground mb-4">
+              This will permanently delete all messages in this chat. This action cannot be undone.
+            </p>
+            <p className="text-muted-foreground mb-4">
+              Type <span className="font-mono font-bold text-foreground">CLEAR</span> to confirm:
+            </p>
+            <Input
+              type="text"
+              value={clearConfirmText}
+              onChange={(e) => setClearConfirmText(e.target.value)}
+              placeholder="Type CLEAR"
+              className="mb-4 font-mono"
+              autoFocus
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  handleConfirmClear();
+                } else if (e.key === 'Escape') {
+                  setShowClearConfirm(false);
+                  setClearConfirmText('');
+                }
+              }}
+            />
+            <div className="flex justify-end gap-3">
+              <Button
+                variant="ghost"
+                onClick={() => {
+                  setShowClearConfirm(false);
+                  setClearConfirmText('');
+                }}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="destructive"
+                onClick={handleConfirmClear}
+                disabled={clearConfirmText !== 'CLEAR'}
+              >
+                Clear Messages
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/cletus/src/common.ts b/packages/cletus/src/common.ts
index 7444d33..b5a87c5 100644
--- a/packages/cletus/src/common.ts
+++ b/packages/cletus/src/common.ts
@@ -22,6 +22,7 @@ export {
   detectNewlineType,
   normalizeNewlines,
   convertNewlines,
+  paginateText,
   type NewlineType,
 } from './shared';
 
@@ -100,56 +101,6 @@ export function formatValueWithFormat(value: any, format: 'json' | 'yaml' = 'yam
   return formatValue(value, alreadyIndented);
 }
 
-
-/**
- * Paginate text by characters or lines. Never returns more than 64k characters. 
- * In line mode it doesn't return more than 1k lines.
- * 
- * @param text - input text
- * @param limit - maximum length
- * @param offset - starting offset
- * @param limitOffsetMode - 'characters' or 'lines'
- * @returns 
- */
-export function paginateText(
-  text: string, 
-  limit: number = 0,
-  offset: number = 0,
-  limitOffsetMode: 'characters' | 'lines' = 'characters',
-): string {
- if (limitOffsetMode === 'lines') {
-    const lines = text.split('\n');
-    const max = Math.min(limit || CONSTS.MAX_LINES, CONSTS.MAX_LINES);
-    if (lines.length <= max) {
-      return text;
-    }
-
-    const start = (offset + lines.length) % lines.length;
-    const end = start + max;
-    let paginated = lines.slice(start, end);
-    const characters = lines.reduce((sum, line) => sum + line.length + 1, 0); // +1 for newline
-
-    if (characters <= CONSTS.MAX_CHARACTERS) {
-      return paginated.join('\n');
-    }
-
-    return offset < 0 
-      ? text.slice(-CONSTS.MAX_CHARACTERS) 
-      : text.slice(0, CONSTS.MAX_CHARACTERS);
-  } else { 
-    const max = Math.min(limit || CONSTS.MAX_CHARACTERS, CONSTS.MAX_CHARACTERS);
-    if (text.length < max) {
-      return text;
-    }
-
-    const start = (offset + text.length) % text.length;
-    const end = start + max;
-
-    return text.slice(start, end);
-  }
-}
-
-
 /**
  * Converts a Message to a ChatMessage.
  * 
diff --git a/packages/cletus/src/operations/clerk.tsx b/packages/cletus/src/operations/clerk.tsx
index d42b03a..61d0b50 100644
--- a/packages/cletus/src/operations/clerk.tsx
+++ b/packages/cletus/src/operations/clerk.tsx
@@ -1765,7 +1765,7 @@ export const shell = operationOf<
             </>
           )}
           <Text color={exitCode === 0 ? 'green' : exitCode !== null ? 'red' : 'yellow'}>
-            {lineCount} {lineCount === 1 ? 'line' : 'lines'} • {statusText}
+            {pluralize(lineCount, 'line')} • {statusText}
           </Text>
         </Box>
       );
diff --git a/packages/cletus/src/operations/types.ts b/packages/cletus/src/operations/types.ts
index 2ddf2f1..70d99e4 100644
--- a/packages/cletus/src/operations/types.ts
+++ b/packages/cletus/src/operations/types.ts
@@ -164,6 +164,13 @@ export const Operations = {
 // Operation type for a specific operation kind
 export type OperationFor<K extends OperationKind> = typeof Operations[K];
 
+// Full operation data (input, output, cache) for a specific operation kind
+export type OperationDataFor<K extends OperationKind> = OperationOf<
+  OperationInputFor<K>,
+  OperationOutputFor<K>,
+  OperationCacheFor<K>
+>;
+
 // Operation input and output types for a specific operation kind
 export type OperationInputFor<K extends OperationKind> = OperationFor<K> extends OperationDefinition<infer I, infer O, infer C> ? I : never;
 
diff --git a/packages/cletus/src/shared.ts b/packages/cletus/src/shared.ts
index 118782a..a07f1f4 100644
--- a/packages/cletus/src/shared.ts
+++ b/packages/cletus/src/shared.ts
@@ -3,6 +3,8 @@
  * This file should NOT import any Node.js-specific modules (fs, path, etc).
  */
 
+import { CONSTS } from "./constants";
+
 /**
  * Formats time in milliseconds to a human-readable string.
  *
@@ -317,3 +319,52 @@ export function convertNewlines(content: string, newlineType: NewlineType): stri
   }
   return content.replace(/\n/g, newlineType);
 }
+
+
+/**
+ * Paginate text by characters or lines. Never returns more than 64k characters. 
+ * In line mode it doesn't return more than 1k lines.
+ * 
+ * @param text - input text
+ * @param limit - maximum length
+ * @param offset - starting offset
+ * @param limitOffsetMode - 'characters' or 'lines'
+ * @returns 
+ */
+export function paginateText(
+  text: string, 
+  limit: number = 0,
+  offset: number = 0,
+  limitOffsetMode: 'characters' | 'lines' = 'characters',
+): string {
+ if (limitOffsetMode === 'lines') {
+    const lines = text.split('\n');
+    const max = Math.min(limit || CONSTS.MAX_LINES, CONSTS.MAX_LINES);
+    if (lines.length <= max) {
+      return text;
+    }
+
+    const start = (offset + lines.length) % lines.length;
+    const end = start + max;
+    let paginated = lines.slice(start, end);
+    const characters = lines.reduce((sum, line) => sum + line.length + 1, 0); // +1 for newline
+
+    if (characters <= CONSTS.MAX_CHARACTERS) {
+      return paginated.join('\n');
+    }
+
+    return offset < 0 
+      ? text.slice(-CONSTS.MAX_CHARACTERS) 
+      : text.slice(0, CONSTS.MAX_CHARACTERS);
+  } else { 
+    const max = Math.min(limit || CONSTS.MAX_CHARACTERS, CONSTS.MAX_CHARACTERS);
+    if (text.length < max) {
+      return text;
+    }
+
+    const start = (offset + text.length) % text.length;
+    const end = start + max;
+
+    return text.slice(start, end);
+  }
+}

From 4c83e033ca32fcacf97c76a32a03e308e0f0b24c Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Wed, 17 Dec 2025 21:55:56 -0500
Subject: [PATCH 16/27] Consistent web operation rendering

---
 .../src/browser/components/MessageList.tsx    |   4 +-
 .../operations/BaseOperationDisplay.tsx       |   2 +-
 .../cletus/src/browser/operations/artist.tsx  |   6 +-
 .../cletus/src/browser/operations/clerk.tsx   |  34 +--
 .../cletus/src/browser/operations/dba.tsx     | 266 ++++++++++--------
 .../src/browser/operations/internet.tsx       |  44 +--
 .../src/browser/operations/librarian.tsx      |  46 +--
 .../cletus/src/browser/operations/planner.tsx |  46 +--
 .../cletus/src/browser/operations/render.tsx  |   2 +-
 .../src/browser/operations/secretary.tsx      |  40 +--
 .../cletus/src/browser/operations/types.ts    |  14 -
 packages/cletus/src/chat-ui.tsx               |   2 +-
 .../cletus/src/components/InkMainMenu.tsx     |   2 +-
 packages/cletus/src/components/Link.tsx       |   2 +-
 packages/cletus/src/components/Markdown.tsx   |   3 +-
 .../cletus/src/components/MessageDisplay.tsx  |   3 +-
 .../src/components/OperationApprovalMenu.tsx  |   2 +-
 packages/cletus/src/constants.ts              |  96 -------
 packages/cletus/src/helpers/render.tsx        |   4 +-
 packages/cletus/src/operations/dba.tsx        |   3 +-
 packages/cletus/src/operations/internet.tsx   |   8 +-
 packages/cletus/src/operations/librarian.tsx  |  10 +-
 packages/cletus/src/operations/planner.tsx    |   5 +-
 packages/cletus/src/operations/secretary.tsx  |   5 +-
 packages/cletus/src/theme.ts                  |  98 +++++++
 25 files changed, 340 insertions(+), 407 deletions(-)
 delete mode 100644 packages/cletus/src/browser/operations/types.ts

diff --git a/packages/cletus/src/browser/components/MessageList.tsx b/packages/cletus/src/browser/components/MessageList.tsx
index 4b1db0c..de94462 100644
--- a/packages/cletus/src/browser/components/MessageList.tsx
+++ b/packages/cletus/src/browser/components/MessageList.tsx
@@ -34,8 +34,8 @@ export const MessageList: React.FC<MessageListProps> = ({
         <div className="space-y-4">
           {messages.map((message, index) => {
             // Check if this is the last message with pending operations
-            const isLastMessage = index === messages.length - 1;
-            const hasPendingOps = message.operations?.some(op => op.status === 'analyzed');
+            // const isLastMessage = index === messages.length - 1;
+            // const hasPendingOps = message.operations?.some(op => op.status === 'analyzed');
             const pendingOpCount = message.operations?.filter(op => op.status === 'analyzed').length || 0;
 
             return (
diff --git a/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx b/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
index 4c6c93c..d037dd4 100644
--- a/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
+++ b/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
@@ -368,7 +368,7 @@ export const BaseOperationDisplay: React.FC<BaseOperationDisplayProps> = ({
   }
 
   return (
-    <div className={cn('mb-3 rounded-lg p-3', needsApproval ? 'bg-yellow-500/5 border border-yellow-500/30' : bgColor)}>
+    <div className={cn('mb-3 rounded-lg p-3', needsApproval ? 'bg-yellow-500/5 border ' + borderColor : bgColor)}>
       {/* Header - Clickable */}
       <div
         className="flex items-center gap-2 mb-2 cursor-pointer hover:opacity-80 transition-opacity"
diff --git a/packages/cletus/src/browser/operations/artist.tsx b/packages/cletus/src/browser/operations/artist.tsx
index 4deba34..1d5b9a9 100644
--- a/packages/cletus/src/browser/operations/artist.tsx
+++ b/packages/cletus/src/browser/operations/artist.tsx
@@ -1,4 +1,4 @@
-import { abbreviate } from '../../shared';
+import { abbreviate, pluralize } from '../../shared';
 import { createRenderer } from './render';
 
 const renderer = createRenderer({
@@ -25,7 +25,7 @@ export const image_generate = renderer<'image_generate'>(
           </div>
         );
       }
-      return `Generated ${count} image${count !== 1 ? 's' : ''}`;
+      return `Generated ${pluralize(count, 'image')}`;
     }
     return null;
   }
@@ -81,7 +81,7 @@ export const image_find = renderer<'image_find'>(
     if (op.output) {
       const resultCount = op.output.results.length;
       const searched = op.output.searched;
-      return `Found ${resultCount} matching image${resultCount !== 1 ? 's' : ''} (searched ${searched})`;
+      return `Found ${pluralize(resultCount, 'matching image')} (searched ${searched})`;
     }
     return null;
   }
diff --git a/packages/cletus/src/browser/operations/clerk.tsx b/packages/cletus/src/browser/operations/clerk.tsx
index eec0512..ee2fee0 100644
--- a/packages/cletus/src/browser/operations/clerk.tsx
+++ b/packages/cletus/src/browser/operations/clerk.tsx
@@ -1,10 +1,7 @@
 import React from 'react';
-import { BaseOperationDisplay } from './BaseOperationDisplay';
-import { OperationRendererProps } from './types';
-import { cn } from '../lib/utils';
-import { createRenderer, linkFile } from './render';
-import { abbreviate, chunk, paginateText, pluralize } from '../../shared';
 import { CONSTS } from '../../constants';
+import { abbreviate, chunk, paginateText, pluralize } from '../../shared';
+import { createRenderer, linkFile } from './render';
 
 
 const renderer = createRenderer({
@@ -226,32 +223,7 @@ export const file_edit = renderer<'file_edit'>(
       </React.Fragment>
     ));
 
-    /* Ink version
-      const fullPath = path.resolve(ai.config.defaultContext!.cwd!, op.input.path);
-      const url = fileProtocol(fullPath);
-
-      const boxStyle = op.output
-        ? {}
-        : op.status === 'rejected'
-          ? { borderStyle: 'round', borderColor: 'gray' } as const
-          : { borderStyle: 'round', borderColor: lineStyles['+'].backgroundColor } as const;
-
-      return (
-        <Box {...boxStyle} flexDirection="column" flexGrow={1}>
-          <Box marginLeft={2} flexGrow={1}>
-            <Text>{'→ '}</Text>
-            <Text>{op.output ? 'Updated ' : op.analysis ? 'Edit ' : 'Analyzing '}</Text>
-            <Link url={url}>{op.input.path}</Link>
-            {diff && (
-              <Text> with {pluralize(additions, 'addition')} and {pluralize(subtractions, 'removal')}</Text>
-            )}
-          </Box>
-          {changeSetsGrouped}
-        </Box>
-      );
-    */
-    
-      // React Web Version:
+    // React Web Version:
     return (
       <div>
         <span className="text-foreground">→ </span>
diff --git a/packages/cletus/src/browser/operations/dba.tsx b/packages/cletus/src/browser/operations/dba.tsx
index 97c48eb..1090f9e 100644
--- a/packages/cletus/src/browser/operations/dba.tsx
+++ b/packages/cletus/src/browser/operations/dba.tsx
@@ -1,7 +1,5 @@
-import React from 'react';
-import { Operation } from '../../schemas';
-import { BaseOperationDisplay } from './BaseOperationDisplay';
-import { formatName, abbreviate } from '../../shared';
+import type { Query } from '../../helpers/dba';
+import { abbreviate, formatName, pluralize } from '../../shared';
 import { createRenderer } from './render';
 
 
@@ -11,10 +9,69 @@ const renderer = createRenderer({
   labelColor: "text-neon-blue",
 });
 
+/**
+ * Get the kind of a query statement for display
+ */
+function getQueryKind(query: Query): string {
+  if ('kind' in query) {
+    if (query.kind === 'withs') {
+      return 'cte';
+    }
+    return query.kind.toLowerCase();
+  }
+  return 'query';
+}
+
+/**
+ * Get a brief description of the query for display
+ */
+function describeQuery(query: Query): string {
+  if ('kind' in query) {
+    switch (query.kind) {
+      case 'select':
+        const selectParts: string[] = [];
+        if (query.from?.kind === 'table') {
+          selectParts.push(`from ${query.from.table}`);
+        }
+        if (query.joins?.length) {
+          selectParts.push(`${query.joins.length} join(s)`);
+        }
+        if (query.where?.length) {
+          selectParts.push('filtered');
+        }
+        if (query.groupBy?.length) {
+          selectParts.push('grouped');
+        }
+        return selectParts.length > 0 ? selectParts.join(', ') : 'simple';
+
+      case 'insert':
+        return `into ${query.table}`;
+
+      case 'update':
+        return `${query.table}`;
+
+      case 'delete':
+        return `from ${query.table}`;
+
+      case 'union':
+      case 'intersect':
+      case 'except':
+        return `${query.kind}`;
+
+      case 'withs':
+        const cteNames = query.withs.map(w => w.name).join(', ');
+        return `CTEs: ${cteNames}`;
+
+      default:
+        return '';
+    }
+  }
+  return '';
+}
+
 export const data_index = renderer<'data_index'>(
   (op) => {
-    const typeName = op.cache?.typeName || op.input.type;
-    return `${formatName(typeName)}Index()`;
+    return `${formatName(op.cache?.typeName || op.input.type)}Index()`;
   },
   (op) => {
     const typeName = op.cache?.typeName || op.input.type;
@@ -25,118 +82,105 @@ export const data_index = renderer<'data_index'>(
   }
 );
 
-export const data_import: React.FC<OperationRendererProps> = ({ operation }) => {
-  const typeName = operation.cache?.typeName || formatName(operation.input.type);
-  let summary = operation.analysis;
-
-  if (operation.output) {
-    summary = `Imported ${operation.output.imported} new, updated ${operation.output.updated}, skipped ${operation.output.updateSkippedNoChanges || 0} duplicate(s)`;
-  } else if (operation.cache?.importableCount !== undefined) {
-    summary = `Will import from ${operation.cache.importableCount} file(s)`;
+export const data_import = renderer<'data_import'>(
+  (op) => {
+    const typeName = op.cache?.typeName || formatName(op.input.type);
+    return `${typeName}Import("${op.input.glob}")`;
+  },
+  (op) => {
+    if (op.output) {
+      return `Imported ${op.output.imported} new, updated ${op.output.updated}, skipped ${op.output.updateSkippedNoChanges || 0} duplicate(s)`;
+    } else if (op.cache?.importableCount !== undefined) {
+      return `Will import from ${op.cache.importableCount} file(s)`;
+    }
+    return null;
   }
+);
 
-  return (
-    <BaseOperationDisplay
-      operation={operation}
-      label={`${typeName}Import("${operation.input.glob}")`}
-      summary={summary}
-      borderColor="border-neon-blue/30"
-      bgColor="bg-neon-blue/5"
-      labelColor="text-neon-blue"
-    />
-  );
-};
-
-export const data_search: React.FC<OperationRendererProps> = ({ operation }) => {
-  const typeName = operation.cache?.typeName || formatName(operation.input.type);
-  const query = abbreviate(operation.input.query, 20);
-  const summary = operation.output?.results
-    ? `Found ${operation.output.results.length} result${operation.output.results.length !== 1 ? 's' : ''}`
-    : operation.analysis;
-
-  return (
-    <BaseOperationDisplay
-      operation={operation}
-      label={`${typeName}Search("${query}")`}
-      summary={summary}
-      borderColor="border-neon-blue/30"
-      bgColor="bg-neon-blue/5"
-      labelColor="text-neon-blue"
-    />
-  );
-};
-
-export const data_get: React.FC<OperationRendererProps> = ({ operation }) => {
-  const typeName = operation.cache?.typeName || formatName(operation.input.type);
-  const offset = operation.input.offset ?? 0;
-  const limit = operation.input.limit ?? 10;
-
-  let summary = operation.analysis;
-  if (operation.output) {
-    const count = operation.output.records.length;
-    summary = `Retrieved ${count} of ${operation.output.total} record${operation.output.total !== 1 ? 's' : ''}`;
+export const data_search = renderer<'data_search'>(
+  (op) => {
+    const typeName = op.cache?.typeName || formatName(op.input.type);
+    const query = abbreviate(op.input.query, 20);
+    return `${typeName}Search("${query}")`;
+  },
+  (op) => {
+    if (op.output) {
+      return `Found ${pluralize(op.output.results.length, 'result')}`;
+    }
+    return null;
   }
+);
 
-  return (
-    <BaseOperationDisplay
-      operation={operation}
-      label={`${typeName}Get(offset: ${offset}, limit: ${limit})`}
-      summary={summary}
-      borderColor="border-neon-blue/30"
-      bgColor="bg-neon-blue/5"
-      labelColor="text-neon-blue"
-    />
-  );
-};
-
-export const query: React.FC<OperationRendererProps> = ({ operation }) => {
-  // Extract query information from input or cache
-  const isStringQuery = typeof operation.input.query === 'string';
-  const queryString = operation.cache?.queryString || (isStringQuery ? operation.input.query : null);
-
-  // Build label
-  let label: string;
-  if (queryString) {
-    const abbreviated = queryString.length > 50 ? queryString.substring(0, 50) + '...' : queryString;
-    label = `Query("${abbreviated}")`;
-  } else {
-    label = 'Query()';
+export const data_get = renderer<'data_get'>(
+  (op) => {
+    const typeName = op.cache?.typeName || formatName(op.input.type);
+    const offset = op.input.offset ?? 0;
+    const limit = op.input.limit ?? 10;
+    return `${typeName}Get(${offset}, ${limit})`;
+  },
+  (op) => {
+    if (op.output) {
+      return `Retrieved ${op.output.records.length} of ${op.output.total} records`;
+    }
+    return null;
   }
+);
 
-  // Build summary from output (matching CLI logic from dba.tsx lines 932-946)
-  let summary: string | null = null;
-  if (operation.output) {
-    const parts: string[] = [];
-    if (operation.output.rows?.length > 0) {
-      parts.push(`${operation.output.rows.length} row${operation.output.rows.length !== 1 ? 's' : ''}`);
-    }
-    if (operation.output.inserted?.length) {
-      const count = operation.output.inserted.reduce((a: number, b: any) => a + b.ids.length, 0);
-      parts.push(`${count} inserted`);
+export const query = renderer<'query'>(
+  (op) => {
+    // Check if the query was originally a string
+    const isStringQuery = typeof op.input.query === 'string';
+    const queryToUse = op.cache?.builtQuery || (typeof op.input.query === 'string' ? null : op.input.query);
+
+    let kind: string;
+    let description: string;
+
+    if (isStringQuery && op.cache?.queryString) {
+      // For string queries, use abbreviated string in render
+      kind = 'query';
+      description = abbreviate(op.cache.queryString, 100);
+    } else if (queryToUse) {
+      kind = getQueryKind(queryToUse);
+      description = describeQuery(queryToUse);
+    } else {
+      kind = 'query';
+      description = '';
     }
-    if (operation.output.updated?.length) {
-      const count = operation.output.updated.reduce((a: number, b: any) => a + b.ids.length, 0);
-      parts.push(`${count} updated`);
+
+    // Determine render name based on referenced tables
+    const referencedTables = op.cache?.payload?.result?.tables || [];
+    if (referencedTables.length === 1) {
+      // Single table - use typeName format
+      const typeName = formatName(referencedTables[0]);
+      return `${typeName}Query(${kind}${description ? `: ${description}` : ''})`;
+    } else {
+      // Multiple tables or unknown - just use Query
+      return `Query(${kind}${description ? `: ${description}` : ''})`;
     }
-    if (operation.output.deleted?.length) {
-      const count = operation.output.deleted.reduce((a: number, b: any) => a + b.ids.length, 0);
-      parts.push(`${count} deleted`);
+  },
+  (op) => {
+    // Build summary from output (matching CLI logic from dba.tsx lines 932-946)
+    if (op.output) {
+      const parts: string[] = [];
+      if (op.output.rows?.length > 0) {
+        parts.push(`${op.output.rows.length} row${op.output.rows.length !== 1 ? 's' : ''}`);
+      }
+      if (op.output.inserted?.length) {
+        const count = op.output.inserted.reduce((a: number, b: any) => a + b.ids.length, 0);
+        parts.push(`${count} inserted`);
+      }
+      if (op.output.updated?.length) {
+        const count = op.output.updated.reduce((a: number, b: any) => a + b.ids.length, 0);
+        parts.push(`${count} updated`);
+      }
+      if (op.output.deleted?.length) {
+        const count = op.output.deleted.reduce((a: number, b: any) => a + b.ids.length, 0);
+        parts.push(`${count} deleted`);
+      }
+      return parts.length > 0 ? parts.join(', ') : 'Query executed';
+    } else if (op.cache?.canCommit && !op.cache.canCommit.canCommit) {
+      return `Cannot execute: ${op.cache.canCommit.reason}`;
     }
-    summary = parts.length > 0 ? parts.join(', ') : 'Query executed';
-  } else if (operation.cache?.canCommit && !operation.cache.canCommit.canCommit) {
-    summary = `Cannot execute: ${operation.cache.canCommit.reason}`;
-  } else if (operation.analysis) {
-    summary = operation.analysis;
+    return null;
   }
-
-  return (
-    <BaseOperationDisplay
-      operation={operation}
-      label={label}
-      summary={summary}
-      borderColor="border-neon-blue/30"
-      bgColor="bg-neon-blue/5"
-      labelColor="text-neon-blue"
-    />
-  );
-};
+);
diff --git a/packages/cletus/src/browser/operations/internet.tsx b/packages/cletus/src/browser/operations/internet.tsx
index e809d6e..eb87781 100644
--- a/packages/cletus/src/browser/operations/internet.tsx
+++ b/packages/cletus/src/browser/operations/internet.tsx
@@ -1,45 +1,29 @@
-import React from 'react';
-import { Operation } from '../../schemas';
-import { abbreviate } from '../../shared';
-import { BaseOperationDisplay } from './BaseOperationDisplay';
-import { OperationRendererProps } from './types';
+import { abbreviate, pluralize } from '../../shared';
+import { createRenderer } from './render';
 
-function createRenderer(getLabel: (op: Operation) => string, getSummary?: (op: Operation) => string | null) {
-  return (props: OperationRendererProps) => {
-    const { operation } = props;
-    const label = getLabel(operation);
-    const summary = operation.error || (getSummary ? getSummary(operation) : null) || operation.analysis;
+const renderer = createRenderer({
+  borderColor: "border-neon-green/30",
+  bgColor: "bg-neon-green/5",
+  labelColor: "text-neon-green",
+});
 
-    return (
-      <BaseOperationDisplay
-        {...props}
-        label={label}
-        summary={summary}
-        borderColor="border-neon-green/30"
-        bgColor="bg-neon-green/5"
-        labelColor="text-neon-green"
-      />
-    );
-  };
-}
-
-export const web_search = createRenderer(
+export const web_search = renderer<'web_search'>(
   (op) => `WebSearch("${abbreviate(op.input.query, 30)}")`,
   (op) => {
     if (op.output) {
-      return `Found ${op.output.results.length} result${op.output.results.length !== 1 ? 's' : ''}`;
+      return `Found ${pluralize(op.output.results.length, 'result')}`;
     }
     return null;
   }
 );
 
-export const web_get_page = createRenderer(
+export const web_get_page = renderer<'web_get_page'>(
   (op) => `WebGetPage("${abbreviate(op.input.url, 30)}", ${op.input.type})`,
   (op) => {
     if (op.output) {
-      const parts: string[] = [`${op.output.totalLines} lines`];
+      const parts: string[] = [pluralize(op.output.totalLines, 'line')];
       if (op.output.matches) {
-        parts.push(`${op.output.matches.length} matches`);
+        parts.push(pluralize(op.output.matches.length, 'match', 'matches'));
       }
       return parts.join(', ');
     }
@@ -47,7 +31,7 @@ export const web_get_page = createRenderer(
   }
 );
 
-export const web_api_call = createRenderer(
+export const web_api_call = renderer<'web_api_call'>(
   (op) => `WebApiCall(${op.input.method} "${abbreviate(op.input.url, 60)}")`,
   (op) => {
     if (op.output) {
@@ -57,7 +41,7 @@ export const web_api_call = createRenderer(
   }
 );
 
-export const web_download = createRenderer(
+export const web_download = renderer<'web_download'>(
   (op) => `WebDownload("${abbreviate(op.input.url, 30)}")`,
   (op) => {
     if (op.output) {
diff --git a/packages/cletus/src/browser/operations/librarian.tsx b/packages/cletus/src/browser/operations/librarian.tsx
index 6a66f89..0c7e9d9 100644
--- a/packages/cletus/src/browser/operations/librarian.tsx
+++ b/packages/cletus/src/browser/operations/librarian.tsx
@@ -1,60 +1,42 @@
-import React from 'react';
-import { Operation } from '../../schemas';
-import { abbreviate } from '../../shared';
-import { BaseOperationDisplay } from './BaseOperationDisplay';
-import { OperationRendererProps } from './types';
+import { abbreviate, pluralize } from '../../shared';
+import { createRenderer } from './render';
 
-function createRenderer(getLabel: (op: Operation) => string, getSummary?: (op: Operation) => string | null) {
-  return (props: OperationRendererProps) => {
-    const { operation } = props;
-    const label = getLabel(operation);
-    const summary = operation.error || (getSummary ? getSummary(operation) : null) || operation.analysis;
+const renderer = createRenderer({
+  borderColor: "border-purple-400/30",
+  bgColor: "bg-purple-400/5",
+  labelColor: "text-purple-400",
+});
 
-    return (
-      <BaseOperationDisplay
-        {...props}
-        label={label}
-        summary={summary}
-        borderColor="border-purple-400/30"
-        bgColor="bg-purple-400/5"
-        labelColor="text-purple-400"
-      />
-    );
-  };
-}
-
-export const knowledge_search = createRenderer(
+export const knowledge_search = renderer<'knowledge_search'>(
   (op) => `KnowledgeSearch("${abbreviate(op.input.query, 25)}")`,
   (op) => {
     if (op.output) {
-      const count = op.output.results.length;
-      return `Found ${count} result${count !== 1 ? 's' : ''}`;
+      return `Found ${pluralize(op.output.results.length, 'result')}`;
     }
     return null;
   }
 );
 
-export const knowledge_sources = createRenderer(
+export const knowledge_sources = renderer<'knowledge_sources'>(
   (op) => 'KnowledgeSources()',
   (op) => {
     if (op.output) {
-      const count = op.output.sources.length;
-      return `Listed ${count} source${count !== 1 ? 's' : ''}`;
+      return `Listed ${pluralize(op.output.sources.length, 'source')}`;
     }
     return null;
   }
 );
 
-export const knowledge_add = createRenderer(
+export const knowledge_add = renderer<'knowledge_add'>(
   (op) => `KnowledgeAdd("${abbreviate(op.input.text, 30)}")`,
   (op) => op.output?.added ? `Added: "${abbreviate(op.input.text, 50)}"` : null
 );
 
-export const knowledge_delete = createRenderer(
+export const knowledge_delete = renderer<'knowledge_delete'>(
   (op) => `KnowledgeDelete("${op.input.sourcePattern}")`,
   (op) => {
     if (op.output) {
-      return `Deleted ${op.output.deletedCount} entr${op.output.deletedCount !== 1 ? 'ies' : 'y'}`;
+      return `Deleted ${pluralize(op.output.deletedCount, 'entry', 'entries')}`;
     }
     return null;
   }
diff --git a/packages/cletus/src/browser/operations/planner.tsx b/packages/cletus/src/browser/operations/planner.tsx
index b5e0a49..5773d8d 100644
--- a/packages/cletus/src/browser/operations/planner.tsx
+++ b/packages/cletus/src/browser/operations/planner.tsx
@@ -1,27 +1,12 @@
-import React from 'react';
 import { Operation } from '../../schemas';
-import { abbreviate } from '../../shared';
-import { BaseOperationDisplay } from './BaseOperationDisplay';
-import { OperationRendererProps } from './types';
+import { abbreviate, pluralize } from '../../shared';
+import { createRenderer } from './render';
 
-function createRenderer(getLabel: (op: Operation) => string, getSummary?: (op: Operation) => string | null) {
-  return (props: OperationRendererProps) => {
-    const { operation } = props;
-    const label = getLabel(operation);
-    const summary = operation.error || (getSummary ? getSummary(operation) : null) || operation.analysis;
-
-    return (
-      <BaseOperationDisplay
-        {...props}
-        label={label}
-        summary={summary}
-        borderColor="border-neon-purple/30"
-        bgColor="bg-neon-purple/5"
-        labelColor="text-neon-purple"
-      />
-    );
-  };
-}
+const renderer = createRenderer({
+  borderColor: "border-neon-purple/30",
+  bgColor: "bg-neon-purple/5",
+  labelColor: "text-neon-purple",
+});
 
 // Helper to extract todo name from analysis
 function getTodoName(op: Operation): string | null {
@@ -31,18 +16,17 @@ function getTodoName(op: Operation): string | null {
   return match ? match[1] : null;
 }
 
-export const todos_list = createRenderer(
+export const todos_list = renderer<'todos_list'>(
   (op) => 'TodosList()',
   (op) => {
     if (op.output) {
-      const count = op.output.todos.length;
-      return `${count} todo${count !== 1 ? 's' : ''}`;
+      return pluralize(op.output.todos.length, 'todo');
     }
     return null;
   }
 );
 
-export const todos_add = createRenderer(
+export const todos_add = renderer<'todos_add'>(
   (op) => `TodosAdd("${abbreviate(op.input.name, 64)}")`,
   (op) => {
     if (op.output) {
@@ -52,7 +36,7 @@ export const todos_add = createRenderer(
   }
 );
 
-export const todos_done = createRenderer(
+export const todos_done = renderer<'todos_done'>(
   (op) => {
     const todoName = getTodoName(op);
     return todoName ? `TodosDone("${abbreviate(todoName, 64)}")` : `TodosDone("${abbreviate(op.input.id, 64)}")`;
@@ -65,7 +49,7 @@ export const todos_done = createRenderer(
   }
 );
 
-export const todos_get = createRenderer(
+export const todos_get = renderer<'todos_get'>(
   (op) => {
     const todoName = getTodoName(op);
     return todoName ? `TodosGet("${abbreviate(todoName, 64)}")` : `TodosGet("${abbreviate(op.input.id, 64)}")`;
@@ -78,7 +62,7 @@ export const todos_get = createRenderer(
   }
 );
 
-export const todos_remove = createRenderer(
+export const todos_remove = renderer<'todos_remove'>(
   (op) => {
     const todoName = getTodoName(op);
     return todoName ? `TodosRemove("${abbreviate(todoName, 64)}")` : `TodosRemove("${abbreviate(op.input.id, 64)}")`;
@@ -91,7 +75,7 @@ export const todos_remove = createRenderer(
   }
 );
 
-export const todos_replace = createRenderer(
+export const todos_replace = renderer<'todos_replace'>(
   (op) => `TodosReplace(${op.input.todos.length} todos)`,
   (op) => {
     if (op.output) {
@@ -101,7 +85,7 @@ export const todos_replace = createRenderer(
   }
 );
 
-export const todos_clear = createRenderer(
+export const todos_clear = renderer<'todos_clear'>(
   (op) => 'TodosClear()',
   (op) => {
     if (op.output) {
diff --git a/packages/cletus/src/browser/operations/render.tsx b/packages/cletus/src/browser/operations/render.tsx
index 2107938..dbda48b 100644
--- a/packages/cletus/src/browser/operations/render.tsx
+++ b/packages/cletus/src/browser/operations/render.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Operation, OperationKind } from '../../schemas';
-import { OperationDataFor, OperationFor } from '../../operations/types';
+import { OperationDataFor } from '../../operations/types';
 import { BaseOperationDisplay, BaseOperationDisplayProps } from './BaseOperationDisplay';
 
 /**
diff --git a/packages/cletus/src/browser/operations/secretary.tsx b/packages/cletus/src/browser/operations/secretary.tsx
index 10da313..f193bd6 100644
--- a/packages/cletus/src/browser/operations/secretary.tsx
+++ b/packages/cletus/src/browser/operations/secretary.tsx
@@ -1,55 +1,41 @@
 import React from 'react';
 import { Operation } from '../../schemas';
-import { abbreviate } from '../../shared';
+import { abbreviate, pluralize } from '../../shared';
 import { BaseOperationDisplay } from './BaseOperationDisplay';
-import { OperationRendererProps } from './types';
+import { createRenderer } from './render';
 
-function createRenderer(getLabel: (op: Operation) => string, getSummary?: (op: Operation) => string | null) {
-  return (props: OperationRendererProps) => {
-    const { operation } = props;
-    const label = getLabel(operation);
-    const summary = operation.error || (getSummary ? getSummary(operation) : null) || operation.analysis;
+const renderer = createRenderer({
+  borderColor: "border-yellow-400/30",
+  bgColor: "bg-yellow-400/5",
+  labelColor: "text-yellow-400",
+});
 
-    return (
-      <BaseOperationDisplay
-        {...props}
-        label={label}
-        summary={summary}
-        borderColor="border-yellow-400/30"
-        bgColor="bg-yellow-400/5"
-        labelColor="text-yellow-400"
-      />
-    );
-  };
-}
-
-export const assistant_switch = createRenderer(
+export const assistant_switch = renderer<'assistant_switch'>(
   (op) => `AssistantSwitch("${op.input.name}")`,
   (op) => op.output ? `Switched to assistant: ${op.input.name}` : null
 );
 
-export const assistant_update = createRenderer(
+export const assistant_update = renderer<'assistant_update'>(
   (op) => `AssistantUpdate("${op.input.name}")`,
   (op) => op.output ? `Updated assistant: ${op.input.name}` : null
 );
 
-export const assistant_add = createRenderer(
+export const assistant_add = renderer<'assistant_add'>(
   (op) => `AssistantAdd("${op.input.name}")`,
   (op) => op.output ? `Created assistant: ${op.input.name}` : null
 );
 
-export const memory_list = createRenderer(
+export const memory_list = renderer<'memory_list'>(
   (op) => 'MemoryList()',
   (op) => {
     if (op.output) {
-      const count = op.output.memories.length;
-      return `${count} memor${count !== 1 ? 'ies' : 'y'}`;
+      return pluralize(op.output.memories.length, 'memory', 'memories');
     }
     return null;
   }
 );
 
-export const memory_update = createRenderer(
+export const memory_update = renderer<'memory_update'>(
   (op) => `MemoryUpdate("${abbreviate(op.input.content, 30)}")`,
   (op) => op.output ? `Added: "${abbreviate(op.input.content, 50)}"` : null
 );
diff --git a/packages/cletus/src/browser/operations/types.ts b/packages/cletus/src/browser/operations/types.ts
deleted file mode 100644
index 7ac37e2..0000000
--- a/packages/cletus/src/browser/operations/types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { Operation } from '../../schemas';
-
-/**
- * Common props for all operation renderers
- */
-export interface OperationRendererProps {
-  operation: Operation;
-  operationIndex?: number;
-  onApprove?: (index: number) => void;
-  onReject?: (index: number) => void;
-  approvalDecision?: 'approve' | 'reject';
-  onToggleDecision?: (index: number, decision: 'approve' | 'reject') => void;
-  hasMultipleOperations?: boolean;
-}
diff --git a/packages/cletus/src/chat-ui.tsx b/packages/cletus/src/chat-ui.tsx
index e024fdc..7e6410d 100644
--- a/packages/cletus/src/chat-ui.tsx
+++ b/packages/cletus/src/chat-ui.tsx
@@ -18,7 +18,7 @@ import { Writer } from 'wav';
 import { createChatAgent } from './agents/chat-agent';
 import { runChatOrchestrator } from './agents/chat-orchestrator';
 import { getAltKeyLabel } from './common';
-import { COLORS } from './constants';
+import { COLORS } from './theme';
 import { fileIsDirectory } from './helpers/files';
 import { useAdaptiveDebounce, useSyncedState } from './hooks';
 import { logger } from './logger';
diff --git a/packages/cletus/src/components/InkMainMenu.tsx b/packages/cletus/src/components/InkMainMenu.tsx
index f9419af..11ee9f4 100644
--- a/packages/cletus/src/components/InkMainMenu.tsx
+++ b/packages/cletus/src/components/InkMainMenu.tsx
@@ -8,7 +8,7 @@ import type { ChatMeta } from '../schemas';
 import { InkSettingsTabView } from './InkSettingsTabView';
 import Gradient from 'ink-gradient';
 import BigText from 'ink-big-text';
-import { COLORS } from '../constants';
+import { COLORS } from '../theme';
 import packageJson from '../../package.json';
 
 type MainMenuView = 'menu' | 'settings' | 'create-chat-assistant' | 'create-chat-prompt' | 'create-chat-mode';
diff --git a/packages/cletus/src/components/Link.tsx b/packages/cletus/src/components/Link.tsx
index 429167d..f3e9eed 100644
--- a/packages/cletus/src/components/Link.tsx
+++ b/packages/cletus/src/components/Link.tsx
@@ -1,6 +1,6 @@
 import { Text } from 'ink';
 import React from 'react';
-import { COLORS } from '../constants';
+import { COLORS } from '../theme';
 
 const openLink = `\x1b]8;;`;
 const delimiter = `\x07`;
diff --git a/packages/cletus/src/components/Markdown.tsx b/packages/cletus/src/components/Markdown.tsx
index 2c6a283..9426ff5 100644
--- a/packages/cletus/src/components/Markdown.tsx
+++ b/packages/cletus/src/components/Markdown.tsx
@@ -1,9 +1,8 @@
 import { Box, BoxProps, Text, TextProps } from "ink";
 import { highlight, supportsLanguage } from "cli-highlight";
 import React from 'react';
-import { COLORS } from "../constants";
+import { COLORS } from "../theme";
 import { Link } from "./Link";
-import { logger } from "../logger";
 
 type LineSegment = { text: string;  url?: string; styles?: { bold?: boolean; italic?: boolean; underline?: boolean; strikethrough?: boolean; backgroundColor?: string, color?: string; } };
 
diff --git a/packages/cletus/src/components/MessageDisplay.tsx b/packages/cletus/src/components/MessageDisplay.tsx
index 4b98559..62d345f 100644
--- a/packages/cletus/src/components/MessageDisplay.tsx
+++ b/packages/cletus/src/components/MessageDisplay.tsx
@@ -1,7 +1,6 @@
 import { Box, Text } from 'ink';
 import React from 'react';
-import { ConfigFile } from '../config';
-import { COLORS } from '../constants';
+import { COLORS } from '../theme';
 import { Operations } from '../operations/types';
 import type { Message } from '../schemas';
 import { Markdown } from './Markdown';
diff --git a/packages/cletus/src/components/OperationApprovalMenu.tsx b/packages/cletus/src/components/OperationApprovalMenu.tsx
index eaff32c..74dd596 100644
--- a/packages/cletus/src/components/OperationApprovalMenu.tsx
+++ b/packages/cletus/src/components/OperationApprovalMenu.tsx
@@ -3,7 +3,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import type { CletusAI } from '../ai';
 import { ChatFile } from '../chat';
 import { formatName, formatTime, pluralize } from '../common';
-import { COLORS } from '../constants';
+import { COLORS } from '../theme';
 import { logger } from '../logger';
 import { OperationManager } from '../operations/manager';
 import type { ChatMeta, Message, Operation } from '../schemas';
diff --git a/packages/cletus/src/constants.ts b/packages/cletus/src/constants.ts
index b9fef6d..b7a3a81 100644
--- a/packages/cletus/src/constants.ts
+++ b/packages/cletus/src/constants.ts
@@ -1,99 +1,3 @@
-import { adaptiveColor, isLightTerminal, adjustHexForLightMode } from './theme';
-
-/**
- * Get color constants for the Cletus UI based on terminal theme
- */
-function getColors() {
-  const isLight = isLightTerminal();
-  
-  return {
-    // User colors
-    USER: isLight ? adjustHexForLightMode('#9d4edd', 0.5) : '#9d4edd',
-    USER_INPUT_BORDER: isLight ? adjustHexForLightMode('#9d4edd', 0.5) : '#9d4edd',
-    USER_INPUT_PROMPT: isLight ? adjustHexForLightMode('#9d4edd', 0.5) : '#9d4edd',
-
-    // Assistant colors
-    ASSISTANT: adaptiveColor('green', 'green'), // Green works on both
-
-    // System colors
-    SYSTEM: adaptiveColor('yellow', '#b8860b'), // Darker yellow for light mode
-
-    // Status indicator colors
-    STATUS_USER: isLight ? adjustHexForLightMode('#9d4edd', 0.5) : '#9d4edd',
-    STATUS_NO_OPS: adaptiveColor('gray', '#666666'), // Darker gray for light mode
-    STATUS_DONE: adaptiveColor('green', 'green'), // Green works on both
-    STATUS_ANALYZED: adaptiveColor('yellow', '#b8860b'), // Darker yellow for light mode
-    STATUS_IN_PROGRESS: adaptiveColor('rgb(255,165,0)', 'rgb(180,120,0)'), // Darker orange for light mode
-
-    // Menu Gradient
-    MENU_GRADIENT: isLight 
-      ? [
-          adjustHexForLightMode('#9d4edd', 0.5),
-          'rgb(0,90,180)',
-          'rgb(180,120,0)',
-        ]
-      : [
-          '#9d4edd',
-          'rgb(0,128,255)',
-          'rgb(255,165,0)',
-        ],
-
-    // Operation approval menu colors
-    APPROVAL_BORDER: adaptiveColor('yellow', '#b8860b'),
-    APPROVAL_SELECTED: adaptiveColor('cyan', 'rgb(0,139,139)'), // Dark cyan for light mode
-    APPROVAL_UNSELECTED: adaptiveColor('white', 'black'),
-
-    // Processing states
-    PROCESSING_BORDER: adaptiveColor('cyan', 'rgb(0,139,139)'), // Dark cyan for light mode
-    PROCESSING_TEXT: adaptiveColor('cyan', 'rgb(0,139,139)'), // Dark cyan for light mode
-
-    // Completion states
-    SUCCESS_BORDER: adaptiveColor('green', 'green'),
-    SUCCESS_TEXT: adaptiveColor('green', 'green'),
-    ERROR_BORDER: adaptiveColor('red', 'red'),
-    ERROR_TEXT: adaptiveColor('red', 'red'),
-
-    // Input states
-    INPUT_TRANSCRIBING: adaptiveColor('blue', 'rgb(0,0,180)'), // Darker blue for light mode
-    INPUT_WAITING: adaptiveColor('gray', '#666666'),
-    INPUT_APPROVAL_MENU: adaptiveColor('gray', '#666666'),
-
-    // Markdown colors
-    MAKRDOWN_HEADINGS: isLight 
-      ? [
-          { color: 'rgb(0,139,139)', bold: true }, // Dark cyan
-          { color: 'rgb(0,120,120)', bold: true },
-          { color: 'rgb(0,100,100)', bold: true },
-          { color: 'rgb(0,80,80)', bold: true },
-          { color: 'rgb(0,60,60)', bold: true },
-          { color: 'rgb(0,40,40)', bold: false },
-        ]
-      : [
-          { color: 'rgb(0,255,255)', bold: true },
-          { color: 'rgb(0,210,210)', bold: true },
-          { color: 'rgb(0,165,165)', bold: true },
-          { color: 'rgb(0,130,130)', bold: true },
-          { color: 'rgb(0,95,95)', bold: true },
-          { color: 'rgb(0,60,60)', bold: false },
-        ],
-    MARKDOWN_CODE_BACKGROUND: adaptiveColor('rgb(25,25,25)', 'rgb(240,240,240)'), // Light gray for light mode
-    MARKDOWN_LINK: adaptiveColor('rgb(15,101,187)', 'rgb(10,70,130)'), // Darker blue for light mode
-    MARKDOWN_BLOCKQUOTE: adaptiveColor('rgb(30,30,30)', 'rgb(235,235,235)'), // Light gray for light mode
-
-    // Other UI elements
-    DIM_TEXT: adaptiveColor('gray', '#666666'),
-  };
-}
-
-/**
- * Color constants for the Cletus UI
- */
-export const COLORS = getColors();
-
-/**
- * Type for color values
- */
-export type ColorValue = typeof COLORS[keyof typeof COLORS];
 
 /**
  * General constants for Cletus operations
diff --git a/packages/cletus/src/helpers/render.tsx b/packages/cletus/src/helpers/render.tsx
index 46f373e..1288348 100644
--- a/packages/cletus/src/helpers/render.tsx
+++ b/packages/cletus/src/helpers/render.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Box, Text } from "ink";
-import { COLORS } from "../constants";
-import { abbreviate, formatTime, formatValue as formatValueText } from "../common";
+import { COLORS } from "../theme";
+import { formatTime, formatValue as formatValueText } from "../common";
 import { Operation } from "../schemas";
 import { Markdown } from "../components/Markdown";
 
diff --git a/packages/cletus/src/operations/dba.tsx b/packages/cletus/src/operations/dba.tsx
index 1ac1ce4..311849c 100644
--- a/packages/cletus/src/operations/dba.tsx
+++ b/packages/cletus/src/operations/dba.tsx
@@ -415,8 +415,7 @@ export const data_search = operationOf<
       `${formatName(typeName)}Search("${abbreviate(op.input.query, 20)}")`,
       (op) => {
         if (op.output) {
-          const count = op.output.results.length;
-          return `Found ${count} result${count !== 1 ? 's' : ''}`;
+          return `Found ${pluralize(op.output.results.length, 'result')}`;
         }
         return null;
       },
diff --git a/packages/cletus/src/operations/internet.tsx b/packages/cletus/src/operations/internet.tsx
index d44972c..d6cd19e 100644
--- a/packages/cletus/src/operations/internet.tsx
+++ b/packages/cletus/src/operations/internet.tsx
@@ -4,7 +4,7 @@ import fs from 'fs';
 import path from 'path';
 import { Readable } from 'stream';
 import { finished } from 'stream/promises';
-import { abbreviate, linkFile } from '../common';
+import { abbreviate, linkFile, pluralize } from '../common';
 import { operationOf } from './types';
 import { renderOperation } from '../helpers/render';
 import { detectExtension, fileExists, fileIsDirectory, fileIsWritable } from '../helpers/files';
@@ -69,7 +69,7 @@ export const web_search = operationOf<
     `WebSearch("${abbreviate(op.input.query, 30)}")`,
     (op) => {
       if (op.output) {
-        return `Found ${op.output.results.length} result${op.output.results.length !== 1 ? 's' : ''}`;
+        return `Found ${pluralize(op.output.results.length, 'result')}`;
       }
       return null;
     },
@@ -245,9 +245,9 @@ export const web_get_page = operationOf<
     `WebGetPage("${abbreviate(op.input.url, 30)}", ${op.input.type})`,
     (op) => {
       if (op.output) {
-        const parts: string[] = [`${op.output.totalLines} lines`];
+        const parts: string[] = [pluralize(op.output.totalLines, 'line')];
         if (op.output.matches) {
-          parts.push(`${op.output.matches.length} matches`);
+          parts.push(pluralize(op.output.matches.length, 'match', 'matches'));
         }
         return parts.join(', ');
       }
diff --git a/packages/cletus/src/operations/librarian.tsx b/packages/cletus/src/operations/librarian.tsx
index 0dea94a..d97c2e5 100644
--- a/packages/cletus/src/operations/librarian.tsx
+++ b/packages/cletus/src/operations/librarian.tsx
@@ -1,5 +1,5 @@
 import { getModel } from "@aeye/core";
-import { abbreviate } from "../common";
+import { abbreviate, pluralize } from "../common";
 import { KnowledgeFile } from "../knowledge";
 import { operationOf } from "./types";
 import { renderOperation } from "../helpers/render";
@@ -46,8 +46,7 @@ export const knowledge_search = operationOf<
     `KnowledgeSearch("${abbreviate(op.input.query, 25)}")`,
     (op) => {
       if (op.output) {
-        const count = op.output.results.length;
-        return `Found ${count} result${count !== 1 ? 's' : ''}`;
+        return `Found ${pluralize(op.output.results.length, 'result')}`;
       }
       return null;
     },
@@ -84,8 +83,7 @@ export const knowledge_sources = operationOf<{}, { sources: string[] }>({
     'KnowledgeSources()',
     (op) => {
       if (op.output) {
-        const count = op.output.sources.length;
-        return `Listed ${count} source${count !== 1 ? 's' : ''}`;
+        return `Listed ${pluralize(op.output.sources.length, 'source')}`;
       }
       return null;
     },
@@ -221,7 +219,7 @@ export const knowledge_delete = operationOf<
     `KnowledgeDelete("${op.input.sourcePattern}")`,
     (op) => {
       if (op.output) {
-        return `Deleted ${op.output.deletedCount} entr${op.output.deletedCount !== 1 ? 'ies' : 'y'}`;
+        return `Deleted ${pluralize(op.output.deletedCount, 'entry', 'entries')}`;
       }
       return null;
     },
diff --git a/packages/cletus/src/operations/planner.tsx b/packages/cletus/src/operations/planner.tsx
index 67b47ac..bc99ae7 100644
--- a/packages/cletus/src/operations/planner.tsx
+++ b/packages/cletus/src/operations/planner.tsx
@@ -1,4 +1,4 @@
-import { abbreviate } from "../common";
+import { abbreviate, pluralize } from "../common";
 import { renderOperation } from "../helpers/render";
 import type { TodoItem } from "../schemas";
 import { operationOf } from "./types";
@@ -60,8 +60,7 @@ export const todos_list = operationOf<{}, { todos: TodoItem[] }>({
     'TodosList()',
     (op) => {
       if (op.output) {
-        const count = op.output.todos.length;
-        return `${count} todo${count !== 1 ? 's' : ''}`;
+        return pluralize(op.output.todos.length, 'todo');
       }
       return null;
     }
diff --git a/packages/cletus/src/operations/secretary.tsx b/packages/cletus/src/operations/secretary.tsx
index 61fe84e..455bcdc 100644
--- a/packages/cletus/src/operations/secretary.tsx
+++ b/packages/cletus/src/operations/secretary.tsx
@@ -1,4 +1,4 @@
-import { abbreviate } from "../common";
+import { abbreviate, pluralize } from "../common";
 import { renderOperation } from "../helpers/render";
 import { operationOf } from "./types";
 
@@ -172,8 +172,7 @@ export const memory_list = operationOf<
     'MemoryList()',
     (op) => {
       if (op.output) {
-        const count = op.output.memories.length;
-        return `${count} memor${count !== 1 ? 'ies' : 'y'}`;
+        return pluralize(op.output.memories.length, 'memory', 'memories');
       }
       return null;
     },
diff --git a/packages/cletus/src/theme.ts b/packages/cletus/src/theme.ts
index 1be984f..2bce959 100644
--- a/packages/cletus/src/theme.ts
+++ b/packages/cletus/src/theme.ts
@@ -118,3 +118,101 @@ export function adjustHexForLightMode(hex: string, factor: number = 0.6): string
 
   return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
 }
+
+
+
+/**
+ * Get color constants for the Cletus UI based on terminal theme
+ */
+function getColors() {
+  const isLight = isLightTerminal();
+  
+  return {
+    // User colors
+    USER: isLight ? adjustHexForLightMode('#9d4edd', 0.5) : '#9d4edd',
+    USER_INPUT_BORDER: isLight ? adjustHexForLightMode('#9d4edd', 0.5) : '#9d4edd',
+    USER_INPUT_PROMPT: isLight ? adjustHexForLightMode('#9d4edd', 0.5) : '#9d4edd',
+
+    // Assistant colors
+    ASSISTANT: adaptiveColor('green', 'green'), // Green works on both
+
+    // System colors
+    SYSTEM: adaptiveColor('yellow', '#b8860b'), // Darker yellow for light mode
+
+    // Status indicator colors
+    STATUS_USER: isLight ? adjustHexForLightMode('#9d4edd', 0.5) : '#9d4edd',
+    STATUS_NO_OPS: adaptiveColor('gray', '#666666'), // Darker gray for light mode
+    STATUS_DONE: adaptiveColor('green', 'green'), // Green works on both
+    STATUS_ANALYZED: adaptiveColor('yellow', '#b8860b'), // Darker yellow for light mode
+    STATUS_IN_PROGRESS: adaptiveColor('rgb(255,165,0)', 'rgb(180,120,0)'), // Darker orange for light mode
+
+    // Menu Gradient
+    MENU_GRADIENT: isLight 
+      ? [
+          adjustHexForLightMode('#9d4edd', 0.5),
+          'rgb(0,90,180)',
+          'rgb(180,120,0)',
+        ]
+      : [
+          '#9d4edd',
+          'rgb(0,128,255)',
+          'rgb(255,165,0)',
+        ],
+
+    // Operation approval menu colors
+    APPROVAL_BORDER: adaptiveColor('yellow', '#b8860b'),
+    APPROVAL_SELECTED: adaptiveColor('cyan', 'rgb(0,139,139)'), // Dark cyan for light mode
+    APPROVAL_UNSELECTED: adaptiveColor('white', 'black'),
+
+    // Processing states
+    PROCESSING_BORDER: adaptiveColor('cyan', 'rgb(0,139,139)'), // Dark cyan for light mode
+    PROCESSING_TEXT: adaptiveColor('cyan', 'rgb(0,139,139)'), // Dark cyan for light mode
+
+    // Completion states
+    SUCCESS_BORDER: adaptiveColor('green', 'green'),
+    SUCCESS_TEXT: adaptiveColor('green', 'green'),
+    ERROR_BORDER: adaptiveColor('red', 'red'),
+    ERROR_TEXT: adaptiveColor('red', 'red'),
+
+    // Input states
+    INPUT_TRANSCRIBING: adaptiveColor('blue', 'rgb(0,0,180)'), // Darker blue for light mode
+    INPUT_WAITING: adaptiveColor('gray', '#666666'),
+    INPUT_APPROVAL_MENU: adaptiveColor('gray', '#666666'),
+
+    // Markdown colors
+    MAKRDOWN_HEADINGS: isLight 
+      ? [
+          { color: 'rgb(0,139,139)', bold: true }, // Dark cyan
+          { color: 'rgb(0,120,120)', bold: true },
+          { color: 'rgb(0,100,100)', bold: true },
+          { color: 'rgb(0,80,80)', bold: true },
+          { color: 'rgb(0,60,60)', bold: true },
+          { color: 'rgb(0,40,40)', bold: false },
+        ]
+      : [
+          { color: 'rgb(0,255,255)', bold: true },
+          { color: 'rgb(0,210,210)', bold: true },
+          { color: 'rgb(0,165,165)', bold: true },
+          { color: 'rgb(0,130,130)', bold: true },
+          { color: 'rgb(0,95,95)', bold: true },
+          { color: 'rgb(0,60,60)', bold: false },
+        ],
+    MARKDOWN_CODE_BACKGROUND: adaptiveColor('rgb(25,25,25)', 'rgb(240,240,240)'), // Light gray for light mode
+    MARKDOWN_LINK: adaptiveColor('rgb(15,101,187)', 'rgb(10,70,130)'), // Darker blue for light mode
+    MARKDOWN_BLOCKQUOTE: adaptiveColor('rgb(30,30,30)', 'rgb(235,235,235)'), // Light gray for light mode
+
+    // Other UI elements
+    DIM_TEXT: adaptiveColor('gray', '#666666'),
+  };
+}
+
+/**
+ * Color constants for the Cletus UI
+ */
+export const COLORS = getColors();
+
+
+/**
+ * Type for color values
+ */
+export type ColorValue = typeof COLORS[keyof typeof COLORS];
\ No newline at end of file

From 9e2d87cd42fb63c621fa8e1284fd213986b0b3b3 Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Thu, 18 Dec 2025 07:05:13 -0500
Subject: [PATCH 17/27] Refactor chat orchestration and operation rendering

Extracted chat orchestration logic into a reusable runChat function in server.ts to reduce code duplication and improve maintainability. Simplified OperationDisplay in index.tsx to directly use operation-specific renderers and moved the OperationDisplayProps interface to render.tsx.
---
 .../cletus/src/browser/operations/index.tsx   |  21 +-
 .../cletus/src/browser/operations/render.tsx  |  13 +-
 packages/cletus/src/browser/server.ts         | 194 ++++++------------
 3 files changed, 70 insertions(+), 158 deletions(-)

diff --git a/packages/cletus/src/browser/operations/index.tsx b/packages/cletus/src/browser/operations/index.tsx
index e9228b8..0fc11fe 100644
--- a/packages/cletus/src/browser/operations/index.tsx
+++ b/packages/cletus/src/browser/operations/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Operation, OperationKind } from '../../schemas';
-import { OperationDisplay as DefaultOperationDisplay } from './render';
+import { OperationDisplayProps } from './render';
 
 // Import operation-specific renderers
 import * as clerk from './clerk';
@@ -43,26 +43,11 @@ const OperationRenderers: Record<OperationKind, React.FC<{
   ...secretary,
 };
 
-interface OperationDisplayProps {
-  operation: Operation;
-  operationIndex?: number;
-  onApprove?: (index: number) => void;
-  onReject?: (index: number) => void;
-  approvalDecision?: 'approve' | 'reject';
-  onToggleDecision?: (index: number, decision: 'approve' | 'reject') => void;
-  hasMultipleOperations?: boolean;
-}
-
 /**
  * Main operation display component that delegates to specific renderers
  */
 export const OperationDisplay: React.FC<OperationDisplayProps> = (props) => {
-  const Renderer = OperationRenderers[props.operation.type as OperationKind] as any;
-
-  if (Renderer) {
-    return <Renderer {...props} />;
-  }
+  const Renderer = OperationRenderers[props.operation.type];
 
-  // Fall back to default renderer
-  return <DefaultOperationDisplay {...props} />;
+  return <Renderer {...props} />;
 };
diff --git a/packages/cletus/src/browser/operations/render.tsx b/packages/cletus/src/browser/operations/render.tsx
index dbda48b..1257f49 100644
--- a/packages/cletus/src/browser/operations/render.tsx
+++ b/packages/cletus/src/browser/operations/render.tsx
@@ -49,17 +49,6 @@ export interface OperationDisplayProps {
   hasMultipleOperations?: boolean;
 }
 
-/**
- * Default operation renderer - delegates to BaseOperationDisplay
- */
-export const OperationDisplay: React.FC<OperationDisplayProps> = (props) => (
-  <BaseOperationDisplay
-    {...props}
-    label={props.operation.type}
-    summary={props.operation.analysis}
-  />
-);
-
 /**
  * Create a renderer for a specific operation kind
  * @param common 
@@ -80,8 +69,8 @@ export const createRenderer = (common: Partial<BaseOperationDisplayProps> = {})
       return (
         <BaseOperationDisplay
           {...common}
+          {...props}
           {...additionalProps}
-          operation={operation}
           label={label}
           summary={summary}
         />
diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
index 857c7d7..fe81906 100644
--- a/packages/cletus/src/browser/server.ts
+++ b/packages/cletus/src/browser/server.ts
@@ -315,6 +315,52 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
     }
   };
 
+  const runChat = async (chatFile: ChatFile, chatMeta: ChatMeta, config: ConfigFile) => {
+    // Ensure AI and chat agent are loaded
+    const { ai: aiInstance, chatAgent: chatAgentInstance } = await ensureAI();
+
+    // Run orchestrator
+    abortController = new AbortController();
+
+    // Clear usage before running orchestrator
+    const clearUsage = () => {
+      const defaultContext = aiInstance.config.defaultContext;
+      if (defaultContext && defaultContext.usage) {
+        defaultContext.usage.accumulated = {};
+        defaultContext.usage.accumulatedCost = 0;
+      }
+    };
+
+    // Get current usage
+    const getUsage = () => {
+      const defaultContext = aiInstance.config.defaultContext;
+      if (defaultContext && defaultContext.usage) {
+        return {
+          accumulated: defaultContext.usage.accumulated,
+          accumulatedCost: defaultContext.usage.accumulatedCost,
+        };
+      }
+      return { accumulated: {}, accumulatedCost: 0 };
+    };
+
+    // Run orchestrator with updated chat file
+    await runChatOrchestrator({
+      chatAgent: chatAgentInstance,
+      messages: chatFile.getMessages(),
+      chatMeta: { ...chatMeta, questions: [] },
+      config,
+      chatData: chatFile,
+      signal: abortController?.signal,
+      clearUsage,
+      getUsage,
+    }, (event) => {
+      handleOrchestratorEvent(event, chatFile);
+    }).then(() => {
+      // Clear abort controller
+      abortController = null;
+    });
+  };
+
   ws.on('message', async (data) => {
     try {
       const message = JSON.parse(data.toString()) as ClientMessage;
@@ -429,46 +475,8 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
               data: { message: { ...userMessage, created: Date.now() } as Message },
             });
 
-            // Process AI response
-            abortController = new AbortController();
-
-            // Ensure AI and chat agent are loaded
-            const { ai: aiInstance, chatAgent: chatAgentInstance } = await ensureAI();
-
-            const clearUsage = () => {
-              const defaultContext = aiInstance.config.defaultContext;
-              if (defaultContext && defaultContext.usage) {
-                defaultContext.usage.accumulated = {};
-                defaultContext.usage.accumulatedCost = 0;
-              }
-            };
-
-            const getUsage = () => {
-              const defaultContext = aiInstance.config.defaultContext;
-              if (defaultContext && defaultContext.usage) {
-                return {
-                  accumulated: defaultContext.usage.accumulated,
-                  accumulatedCost: defaultContext.usage.accumulatedCost,
-                };
-              }
-              return { accumulated: {}, accumulatedCost: 0 };
-            };
-
-            await runChatOrchestrator({
-              chatAgent: chatAgentInstance,
-              messages: chatFile.getMessages(),
-              chatMeta: chat,
-              config,
-              chatData: chatFile,
-              signal: abortController.signal,
-              clearUsage,
-              getUsage,
-            }, (event) => {
-              handleOrchestratorEvent(event, chatFile);
-            }).then(() => {
-              // Clear abort controller
-              abortController = null;
-            });
+            // Run the chat
+            await runChat(chatFile, chat, config);
           });
           break;
         }
@@ -632,8 +640,20 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
               return;
             }
 
+            const broadcastMessageUpdate = () => {
+              sendMessage({
+                type: 'message_updated',
+                data: { message: targetMessage },
+              });
+            };
+
             const operations = targetMessage.operations;
-            const manager = new OperationManager('none', operations);
+            const manager = new OperationManager(
+              'none', 
+              operations,
+              () => {},
+              (op, opIndex) => broadcastMessageUpdate(),
+            );
 
             // Mark rejected operations
             for (const idx of rejected) {
@@ -669,53 +689,12 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
             });
 
             // Send updated message back to client
-            sendMessage({
-              type: 'message_updated',
-              data: { message: targetMessage },
-            });
+            broadcastMessageUpdate();
 
             // If operations were executed, continue with the orchestrator
             if (hasExecutedOperations) {
-              // Process AI response
-              abortController = new AbortController();
-
-              // Clear usage before running orchestrator
-              const clearUsage = () => {
-                const defaultContext = aiInstance.config.defaultContext;
-                if (defaultContext && defaultContext.usage) {
-                  defaultContext.usage.accumulated = {};
-                  defaultContext.usage.accumulatedCost = 0;
-                }
-              };
-
-              // Get current usage
-              const getUsage = () => {
-                const defaultContext = aiInstance.config.defaultContext;
-                if (defaultContext && defaultContext.usage) {
-                  return {
-                    accumulated: defaultContext.usage.accumulated,
-                    accumulatedCost: defaultContext.usage.accumulatedCost,
-                  };
-                }
-                return { accumulated: {}, accumulatedCost: 0 };
-              };
-
-              // Run orchestrator with updated chat file
-              await runChatOrchestrator({
-                chatAgent: chatAgentInstance,
-                messages: chatFile.getMessages(),
-                chatMeta: chatMeta,
-                config,
-                chatData: chatFile,
-                signal: abortController?.signal,
-                clearUsage,
-                getUsage,
-              }, (event) => {
-                handleOrchestratorEvent(event, chatFile);
-              }).then(() => {
-                // Clear abort controller
-                abortController = null;
-              });
+              // Run the chat
+              await runChat(chatFile, chatMeta, config);
             }
           });
           break;
@@ -816,49 +795,8 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
               data: { chat: { ...chatMeta, questions: [] } },
             });
 
-            // Ensure AI and chat agent are loaded
-            const { ai: aiInstance, chatAgent: chatAgentInstance } = await ensureAI();
-
-            // Run orchestrator
-            abortController = new AbortController();
-
-            // Clear usage before running orchestrator
-            const clearUsage = () => {
-              const defaultContext = aiInstance.config.defaultContext;
-              if (defaultContext && defaultContext.usage) {
-                defaultContext.usage.accumulated = {};
-                defaultContext.usage.accumulatedCost = 0;
-              }
-            };
-
-            // Get current usage
-            const getUsage = () => {
-              const defaultContext = aiInstance.config.defaultContext;
-              if (defaultContext && defaultContext.usage) {
-                return {
-                  accumulated: defaultContext.usage.accumulated,
-                  accumulatedCost: defaultContext.usage.accumulatedCost,
-                };
-              }
-              return { accumulated: {}, accumulatedCost: 0 };
-            };
-
-            // Run orchestrator with updated chat file
-            await runChatOrchestrator({
-              chatAgent: chatAgentInstance,
-              messages: chatFile.getMessages(),
-              chatMeta: { ...chatMeta, questions: [] },
-              config,
-              chatData: chatFile,
-              signal: abortController?.signal,
-              clearUsage,
-              getUsage,
-            }, (event) => {
-              handleOrchestratorEvent(event, chatFile);
-            }).then(() => {
-              // Clear abort controller
-              abortController = null;
-            });
+            // Run the chat
+            await runChat(chatFile, chatMeta, config);
           });
           break;
         }

From f1d9acffbef7404d1971bcaccc31dac3deb98b85 Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Thu, 18 Dec 2025 09:47:16 -0500
Subject: [PATCH 18/27] Improve operation approval UX and add processing states

Adds visual feedback and disables buttons during operation processing in ChatInput and BaseOperationDisplay. Introduces a 'hasOperationsProcessing' prop to ChatInput and updates UnifiedLayout to track and pass this state. Also adds a Cache (JSON) tab to operation details and removes the unused ChatPage component.
---
 .../src/browser/components/ChatInput.tsx      |  33 +-
 .../operations/BaseOperationDisplay.tsx       |  62 +-
 .../cletus/src/browser/pages/ChatPage.tsx     | 699 ------------------
 .../src/browser/pages/UnifiedLayout.tsx       |  23 +
 4 files changed, 103 insertions(+), 714 deletions(-)
 delete mode 100644 packages/cletus/src/browser/pages/ChatPage.tsx

diff --git a/packages/cletus/src/browser/components/ChatInput.tsx b/packages/cletus/src/browser/components/ChatInput.tsx
index 53edb67..98b0cc9 100644
--- a/packages/cletus/src/browser/components/ChatInput.tsx
+++ b/packages/cletus/src/browser/components/ChatInput.tsx
@@ -19,6 +19,7 @@ interface ChatInputProps {
   onModelClick?: () => void;
   hasMultiplePendingOperations?: boolean;
   allOperationsDecided?: boolean;
+  hasOperationsProcessing?: boolean;
   onApproveAll?: () => void;
   onRejectAll?: () => void;
   onSubmitDecisions?: () => void;
@@ -37,6 +38,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
   onModelClick,
   hasMultiplePendingOperations = false,
   allOperationsDecided = false,
+  hasOperationsProcessing = false,
   onApproveAll,
   onRejectAll,
   onSubmitDecisions,
@@ -132,17 +134,28 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                   variant="outline"
                   size="sm"
                   onClick={onApproveAll}
-                  className="text-green-400 border-green-400/30 hover:bg-green-400/10"
+                  disabled={hasOperationsProcessing}
+                  className="text-green-400 border-green-400/30 hover:bg-green-400/10 disabled:opacity-50 disabled:cursor-not-allowed"
                 >
-                  <CheckCircle2 className="w-4 h-4 mr-1" />
-                  Approve All
+                  {hasOperationsProcessing ? (
+                    <>
+                      <Loader2 className="w-4 h-4 mr-1 animate-spin" />
+                      Processing...
+                    </>
+                  ) : (
+                    <>
+                      <CheckCircle2 className="w-4 h-4 mr-1" />
+                      Approve All
+                    </>
+                  )}
                 </Button>
                 <Button
                   type="button"
                   variant="outline"
                   size="sm"
                   onClick={onRejectAll}
-                  className="text-red-400 border-red-400/30 hover:bg-red-400/10"
+                  disabled={hasOperationsProcessing}
+                  className="text-red-400 border-red-400/30 hover:bg-red-400/10 disabled:opacity-50 disabled:cursor-not-allowed"
                 >
                   <XCircle className="w-4 h-4 mr-1" />
                   Reject All
@@ -152,9 +165,17 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                   variant="neon"
                   size="sm"
                   onClick={onSubmitDecisions}
-                  disabled={!allOperationsDecided}
+                  disabled={!allOperationsDecided || hasOperationsProcessing}
+                  className="disabled:opacity-50 disabled:cursor-not-allowed"
                 >
-                  Submit
+                  {hasOperationsProcessing ? (
+                    <>
+                      <Loader2 className="w-4 h-4 mr-1 animate-spin" />
+                      Processing...
+                    </>
+                  ) : (
+                    'Submit'
+                  )}
                 </Button>
               </>
             )}
diff --git a/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx b/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
index d037dd4..ca7b544 100644
--- a/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
+++ b/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { CheckCircle2, XCircle } from 'lucide-react';
+import { CheckCircle2, XCircle, Loader2 } from 'lucide-react';
 import { Operation } from '../../schemas';
 import { cn } from '../lib/utils';
 import { getStatusInfo, getElapsedTime } from './render';
@@ -177,14 +177,15 @@ const renderJsonAsHtml = (data: any, depth: number = 0): React.ReactNode => {
  * Expandable details component with tabs
  */
 const OperationDetails: React.FC<{ operation: Operation }> = ({ operation }) => {
-  const [activeTab, setActiveTab] = useState<'input' | 'output' | 'inputJson' | 'outputJson' | 'analysis'>('input');
+  const [activeTab, setActiveTab] = useState<'input' | 'output' | 'inputJson' | 'outputJson' | 'cacheJson' | 'analysis'>('input');
   const [isExpanded, setIsExpanded] = useState(false);
 
   const hasInput = operation.input !== undefined && operation.input !== null;
   const hasOutput = operation.output !== undefined && operation.output !== null;
+  const hasCache = operation.cache !== undefined && operation.cache !== null && Object.keys(operation.cache).length > 0;
   const hasAnalysis = operation.analysis !== undefined && operation.analysis !== null && operation.analysis.trim().length > 0;
 
-  if (!hasInput && !hasOutput && !hasAnalysis) {
+  if (!hasInput && !hasOutput && !hasCache && !hasAnalysis) {
     return null;
   }
 
@@ -194,12 +195,15 @@ const OperationDetails: React.FC<{ operation: Operation }> = ({ operation }) =>
     (activeTab === 'output' && hasOutput) ||
     (activeTab === 'inputJson' && hasInput) ||
     (activeTab === 'outputJson' && hasOutput) ||
+    (activeTab === 'cacheJson' && hasCache) ||
     (activeTab === 'analysis' && hasAnalysis)
       ? activeTab
       : hasInput
       ? 'input'
       : hasOutput
       ? 'output'
+      : hasCache
+      ? 'cacheJson'
       : 'analysis';
 
   return (
@@ -258,6 +262,19 @@ const OperationDetails: React.FC<{ operation: Operation }> = ({ operation }) =>
             Output (JSON)
           </button>
         )}
+        {hasCache && (
+          <button
+            onClick={() => setActiveTab('cacheJson')}
+            className={cn(
+              'px-3 py-1.5 text-xs font-semibold transition-colors whitespace-nowrap',
+              effectiveTab === 'cacheJson'
+                ? 'bg-muted text-foreground border-b-2 border-neon-cyan'
+                : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+            )}
+          >
+            Cache (JSON)
+          </button>
+        )}
         {hasAnalysis && (
           <button
             onClick={() => setActiveTab('analysis')}
@@ -297,6 +314,8 @@ const OperationDetails: React.FC<{ operation: Operation }> = ({ operation }) =>
               ? JSON.stringify(operation.input, null, 2)
               : effectiveTab === 'outputJson'
               ? JSON.stringify(operation.output, null, 2)
+              : effectiveTab === 'cacheJson'
+              ? JSON.stringify(operation.cache, null, 2)
               : operation.analysis || ''
           }
           className={cn(
@@ -353,6 +372,7 @@ export const BaseOperationDisplay: React.FC<BaseOperationDisplayProps> = ({
   const displaySummary = operation.error ? operation.error : summary;
 
   const needsApproval = operation.status === 'analyzed';
+  const isOperationProcessing = operation.status === 'doing';
 
   // Debug logging
   if (needsApproval) {
@@ -411,16 +431,27 @@ export const BaseOperationDisplay: React.FC<BaseOperationDisplayProps> = ({
                 variant="outline"
                 size="sm"
                 onClick={() => onApprove(operationIndex)}
-                className="bg-green-500/10 text-green-400 border-green-400/30 hover:bg-green-400/20"
+                disabled={isOperationProcessing}
+                className="bg-green-500/10 text-green-400 border-green-400/30 hover:bg-green-400/20 disabled:opacity-50 disabled:cursor-not-allowed"
               >
-                <CheckCircle2 className="w-4 h-4 mr-2" />
-                Approve
+                {isOperationProcessing ? (
+                  <>
+                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                    Processing...
+                  </>
+                ) : (
+                  <>
+                    <CheckCircle2 className="w-4 h-4 mr-2" />
+                    Approve
+                  </>
+                )}
               </Button>
               <Button
                 variant="outline"
                 size="sm"
                 onClick={() => onReject(operationIndex)}
-                className="bg-red-500/10 text-red-400 border-red-400/30 hover:bg-red-400/20"
+                disabled={isOperationProcessing}
+                className="bg-red-500/10 text-red-400 border-red-400/30 hover:bg-red-400/20 disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 <XCircle className="w-4 h-4 mr-2" />
                 Reject
@@ -434,20 +465,33 @@ export const BaseOperationDisplay: React.FC<BaseOperationDisplayProps> = ({
                   variant="outline"
                   size="sm"
                   onClick={() => onToggleDecision(operationIndex, 'approve')}
+                  disabled={isOperationProcessing}
                   className={cn(
+                    'disabled:opacity-50 disabled:cursor-not-allowed',
                     approvalDecision === 'approve'
                       ? 'bg-green-500/20 text-green-400 border-green-400 hover:bg-green-500/30'
                       : 'text-green-400/50 border-green-400/30 hover:bg-green-400/10'
                   )}
                 >
-                  <CheckCircle2 className="w-4 h-4 mr-2" />
-                  Approve
+                  {isOperationProcessing && approvalDecision === 'approve' ? (
+                    <>
+                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                      Processing...
+                    </>
+                  ) : (
+                    <>
+                      <CheckCircle2 className="w-4 h-4 mr-2" />
+                      Approve
+                    </>
+                  )}
                 </Button>
                 <Button
                   variant="outline"
                   size="sm"
                   onClick={() => onToggleDecision(operationIndex, 'reject')}
+                  disabled={isOperationProcessing}
                   className={cn(
+                    'disabled:opacity-50 disabled:cursor-not-allowed',
                     approvalDecision === 'reject'
                       ? 'bg-red-500/20 text-red-400 border-red-400 hover:bg-red-500/30'
                       : 'text-red-400/50 border-red-400/30 hover:bg-red-400/10'
diff --git a/packages/cletus/src/browser/pages/ChatPage.tsx b/packages/cletus/src/browser/pages/ChatPage.tsx
deleted file mode 100644
index 68c90d4..0000000
--- a/packages/cletus/src/browser/pages/ChatPage.tsx
+++ /dev/null
@@ -1,699 +0,0 @@
-import { ArrowLeft, CheckSquare, Settings, Trash2, User } from 'lucide-react';
-import React, { useEffect, useRef, useState } from 'react';
-import type { ChatMeta, ChatMode, Config, Message, MessageContent } from '../../schemas';
-import { AgentModeSelector } from '../components/AgentModeSelector';
-import { AssistantSelector } from '../components/AssistantSelector';
-import { ChatInput } from '../components/ChatInput';
-import { ChatSettingsDialog } from '../components/ChatSettingsDialog';
-import { CommandsPanel } from '../components/CommandsPanel';
-import { MessageList } from '../components/MessageList';
-import { ModelSelector } from '../components/ModelSelector';
-import { ModeSelector } from '../components/ModeSelector';
-import { ProfileModal } from '../components/ProfileModal';
-import { QuestionsModal } from '../components/QuestionsModal';
-import { TodosModal } from '../components/TodosModal';
-import { ToolsetSelector } from '../components/ToolsetSelector';
-import { Button } from '../components/ui/button';
-import { Input } from '../components/ui/input';
-import { ScrollArea } from '../components/ui/scroll-area';
-import type { ClientMessage, ServerMessage } from '../websocket-types';
-import { sendClientMessage } from '../websocket-types';
-
-interface ChatPageProps {
-  chatId: string;
-  config: Config;
-  onBack: () => void;
-  onConfigChange: () => Promise<void>;
-}
-
-export const ChatPage: React.FC<ChatPageProps> = ({ chatId, config, onBack, onConfigChange }) => {
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [pendingMessage, setPendingMessage] = useState<Message | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [showModelSelector, setShowModelSelector] = useState(false);
-  const [showCommandsPanel, setShowCommandsPanel] = useState(false);
-  const [showChatSettings, setShowChatSettings] = useState(false);
-  const [showTodos, setShowTodos] = useState(false);
-  const [showClearConfirm, setShowClearConfirm] = useState(false);
-  const [clearConfirmText, setClearConfirmText] = useState('');
-  const [isEditingTitle, setIsEditingTitle] = useState(false);
-  const [editedTitle, setEditedTitle] = useState('');
-  const [totalCost, setTotalCost] = useState(0);
-  const [operationDecisions, setOperationDecisions] = useState<Map<number, 'approve' | 'reject'>>(new Map());
-  const [chatMetaState, setChatMetaState] = useState<ChatMeta | null>(null);
-  const [cwd, setCwd] = useState<string | undefined>(undefined);
-  const [status, setStatus] = useState('');
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [showProfile, setShowProfile] = useState(false);
-  const wsRef = useRef<WebSocket | null>(null);
-  const modelsResolverRef = useRef<{
-    resolve: (models: any[]) => void;
-    reject: (error: Error) => void;
-  } | null>(null);
-
-  const chatMeta = chatMetaState || config.chats.find((c) => c.id === chatId);
-
-  // Single WebSocket connection for the entire component
-  useEffect(() => {
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const ws = new WebSocket(`${protocol}//${window.location.host}`);
-
-    ws.onopen = () => {
-      console.log('WebSocket connected');
-      // Load initial messages
-      sendClientMessage(ws, { type: 'get_messages', data: { chatId } });
-    };
-
-    ws.onmessage = (event) => {
-      const message = JSON.parse(event.data) as ServerMessage;
-      handleServerMessage(message);
-    };
-
-    ws.onerror = (error) => {
-      console.error('WebSocket error:', error);
-      setLoading(false);
-    };
-
-    ws.onclose = () => {
-      console.log('WebSocket closed');
-    };
-
-    wsRef.current = ws;
-
-    return () => {
-      if (ws.readyState === WebSocket.OPEN) {
-        ws.close();
-      }
-    };
-  }, [chatId]);
-
-  const handleServerMessage = (message: ServerMessage) => {
-    switch (message.type) {
-      case 'messages':
-        setMessages(message.data.messages || []);
-        setLoading(false);
-        break;
-
-      case 'message_added':
-        // User message was added - reload messages
-        if (wsRef.current) {
-          sendClientMessage(wsRef.current, { type: 'get_messages', data: { chatId } });
-        }
-        break;
-
-      case 'pending_update':
-        setPendingMessage(message.data.pending);
-        break;
-
-      case 'message_updated':
-        setMessages(prev => prev.map(msg =>
-          msg.created === message.data.message.created ? message.data.message : msg
-        ));
-        break;
-
-      case 'messages_updated':
-        if (message.data.messages) {
-          setMessages(message.data.messages);
-        }
-        break;
-
-      case 'response_complete':
-        setPendingMessage(null);
-        setIsProcessing(false);
-        setStatus('');
-        if (message.data.message) {
-          setMessages(prev => [...prev, message.data.message]);
-        }
-        break;
-
-      case 'usage_update':
-        if (message.data.accumulatedCost !== undefined) {
-          setTotalCost(message.data.accumulatedCost);
-        }
-        break;
-
-      case 'chat_updated':
-        if (message.data.chat) {
-          setChatMetaState(message.data.chat);
-          onConfigChange();
-        }
-        if (message.data.cwd !== undefined) {
-          setCwd(message.data.cwd);
-        }
-        break;
-
-      case 'status_update':
-        setStatus(message.data.status);
-        break;
-
-      case 'elapsed_update':
-        // Elapsed time updates can be handled here if needed
-        break;
-
-      case 'models':
-        // Resolve the pending models promise if one exists
-        if (modelsResolverRef.current) {
-          modelsResolverRef.current.resolve(message.data.models || []);
-          modelsResolverRef.current = null;
-        }
-        break;
-
-      case 'chat_deleted':
-        // Chat was deleted
-        break;
-
-      case 'error':
-        console.error('Server error:', message.data.message);
-        setIsProcessing(false);
-        setStatus('Error: ' + message.data.message);
-        // Reject the pending models promise if one exists
-        if (modelsResolverRef.current) {
-          modelsResolverRef.current.reject(new Error(message.data.message));
-          modelsResolverRef.current = null;
-        }
-        setLoading(false);
-        break;
-
-      default:
-        console.warn('Unhandled message type:', (message as any).type);
-    }
-  };
-
-  const send = (message: ClientMessage) => {
-    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-      sendClientMessage(wsRef.current, message);
-    } else {
-      console.error('WebSocket not connected');
-    }
-  };
-
-  const handleSendMessage = (content: MessageContent[]) => {
-    send({
-      type: 'send_message',
-      data: { chatId, content },
-    });
-    setIsProcessing(true);
-    setStatus('Processing...');
-  };
-
-  const handleCancel = () => {
-    send({ type: 'cancel' });
-    setIsProcessing(false);
-    setStatus('');
-  };
-
-  const handleQuestionsSubmit = (questionAnswers: Record<number, Set<number>>, questionCustomAnswers: Record<number, string>) => {
-    // Convert Sets to arrays for JSON serialization
-    const answersArray: Record<number, number[]> = {};
-    for (const [key, value] of Object.entries(questionAnswers)) {
-      answersArray[Number(key)] = Array.from(value);
-    }
-
-    // Send to server to format, add messages, and run orchestrator
-    send({
-      type: 'submit_question_answers',
-      data: { chatId, questionAnswers: answersArray, questionCustomAnswers },
-    });
-    setIsProcessing(true);
-    setStatus('Processing answers...');
-  };
-
-  const handleQuestionsCancel = () => {
-    // Clear questions from chat meta without adding messages
-    send({
-      type: 'update_chat_meta',
-      data: { chatId, updates: { questions: [] } },
-    });
-  };
-
-  const handleModeChange = (mode: ChatMode) => {
-    send({ type: 'update_chat_meta', data: { chatId, updates: { mode } } });
-  };
-
-  const handleAgentModeChange = (agentMode: 'plan' | 'default' | undefined) => {
-    send({ type: 'update_chat_meta', data: { chatId, updates: { agentMode } } });
-  };
-
-  const handleToolsetChange = (toolset: string | null) => {
-    send({ type: 'update_chat_meta', data: { chatId, updates: { toolset: toolset } } });
-  };
-
-  const handleAssistantChange = (assistant: string) => {
-    const assistantValue = assistant === 'none' ? undefined : assistant;
-    send({ type: 'update_chat_meta', data: { chatId, updates: { assistant: assistantValue } } });
-  };
-
-  const handleModelChange = (model: string) => {
-    send({ type: 'update_chat_meta', data: { chatId, updates: { model } } });
-  };
-
-  const handleFetchModels = async (): Promise<any[]> => {
-    return new Promise((resolve, reject) => {
-      if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
-        reject(new Error('WebSocket not connected'));
-        return;
-      }
-
-      // Store the promise resolver for handleServerMessage to use
-      modelsResolverRef.current = { resolve, reject };
-
-      // Set up timeout
-      const timeout = setTimeout(() => {
-        if (modelsResolverRef.current) {
-          modelsResolverRef.current.reject(new Error('Timeout fetching models'));
-          modelsResolverRef.current = null;
-        }
-      }, 10000);
-
-      // Send the request
-      sendClientMessage(wsRef.current, { type: 'get_models' });
-    });
-  };
-
-  const handleChatSettingsSave = (updates: { title?: string; prompt?: string; cwd?: string }) => {
-    const { cwd: newCwd, ...metaUpdates } = updates;
-    send({
-      type: 'update_chat_meta',
-      data: { chatId, updates: metaUpdates, cwd: newCwd },
-    });
-  };
-
-  const handleAddTodo = (todo: string) => {
-    send({ type: 'add_todo', data: { chatId, todo } });
-  };
-
-  const handleToggleTodo = (index: number) => {
-    send({ type: 'toggle_todo', data: { chatId, index } });
-  };
-
-  const handleRemoveTodo = (index: number) => {
-    send({ type: 'remove_todo', data: { chatId, index } });
-  };
-
-  const handleClearTodos = () => {
-    if (confirm('Are you sure you want to clear all todos?')) {
-      send({ type: 'clear_todos', data: { chatId } });
-    }
-  };
-
-  const handleClearMessages = () => {
-    setShowClearConfirm(true);
-  };
-
-  const handleConfirmClear = () => {
-    if (clearConfirmText === 'CLEAR') {
-      send({ type: 'clear_messages', data: { chatId } });
-      setMessages([]);
-      setShowClearConfirm(false);
-      setClearConfirmText('');
-    }
-  };
-
-  const handleStartEditTitle = () => {
-    setEditedTitle(chatMeta?.title || '');
-    setIsEditingTitle(true);
-  };
-
-  const handleSaveTitle = () => {
-    if (editedTitle.trim() && editedTitle !== chatMeta?.title) {
-      send({ type: 'update_chat_meta', data: { chatId, updates: { title: editedTitle.trim() } } });
-    }
-    setIsEditingTitle(false);
-  };
-
-  const handleCancelEditTitle = () => {
-    setIsEditingTitle(false);
-    setEditedTitle('');
-  };
-
-  const handleDeleteChat = () => {
-    if (confirm(`Are you sure you want to delete "${chatMeta?.title}"? This cannot be undone.`)) {
-      send({ type: 'delete_chat', data: { chatId } });
-      // Navigate back after deletion
-      setTimeout(() => onBack(), 500);
-    }
-  };
-
-  const handleMessagesUpdate = () => {
-    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-      sendClientMessage(wsRef.current, { type: 'get_messages', data: { chatId } });
-    }
-  };
-
-  const handleOperationApproval = (message: Message, approved: number[], rejected: number[]) => {
-    send({
-      type: 'handle_operations',
-      data: {
-        chatId,
-        messageCreated: message.created,
-        approved,
-        rejected,
-      },
-    });
-    setOperationDecisions(new Map()); // Clear decisions after submission
-  };
-
-  const handleToggleOperationDecision = (idx: number, decision: 'approve' | 'reject') => {
-    const newDecisions = new Map(operationDecisions);
-    newDecisions.set(idx, decision);
-    setOperationDecisions(newDecisions);
-  };
-
-  const handleApproveAllOperations = () => {
-    const lastMessage = messages[messages.length - 1];
-    if (!lastMessage || lastMessage.role !== 'assistant') return;
-
-    const approvableOps = (lastMessage.operations || [])
-      .map((op, idx) => ({ op, idx }))
-      .filter(({ op }) => op.status === 'analyzed');
-
-    const approved = approvableOps.map(({ idx }) => idx);
-    handleOperationApproval(lastMessage, approved, []);
-  };
-
-  const handleRejectAllOperations = () => {
-    const lastMessage = messages[messages.length - 1];
-    if (!lastMessage || lastMessage.role !== 'assistant') return;
-
-    const approvableOps = (lastMessage.operations || [])
-      .map((op, idx) => ({ op, idx }))
-      .filter(({ op }) => op.status === 'analyzed');
-
-    const rejected = approvableOps.map(({ idx }) => idx);
-    handleOperationApproval(lastMessage, [], rejected);
-  };
-
-  const handleSubmitOperationDecisions = () => {
-    const lastMessage = messages[messages.length - 1];
-    if (!lastMessage || lastMessage.role !== 'assistant') return;
-
-    const approvableOps = (lastMessage.operations || [])
-      .map((op, idx) => ({ op, idx }))
-      .filter(({ op }) => op.status === 'analyzed');
-
-    const approved: number[] = [];
-    const rejected: number[] = [];
-
-    approvableOps.forEach(({ idx }) => {
-      const decision = operationDecisions.get(idx);
-      if (decision === 'approve') {
-        approved.push(idx);
-      } else if (decision === 'reject') {
-        rejected.push(idx);
-      }
-    });
-
-    handleOperationApproval(lastMessage, approved, rejected);
-  };
-
-  const handleProfileSave = (updates: Partial<Config['user']>) => {
-    send({ type: 'update_user', data: { updates } });
-  };
-
-  // Check if there are any messages with operations needing approval
-  const lastMessage = messages.length > 0 ? messages[messages.length - 1] : null;
-  const lastMessagePendingOps = lastMessage?.role === 'assistant'
-    ? (lastMessage.operations || []).filter(op => op.status === 'analyzed')
-    : [];
-  const hasMultiplePendingOps = lastMessagePendingOps.length > 1;
-  const allOperationsDecided = lastMessagePendingOps.every((_op, idx) =>
-    operationDecisions.has(idx)
-  );
-
-  if (!chatMeta) {
-    return (
-      <div className="flex h-screen items-center justify-center bg-background">
-        <div className="text-center space-y-4">
-          <h2 className="text-2xl font-bold neon-text-cyan">Chat not found</h2>
-          <Button variant="neon" onClick={onBack}>
-            <ArrowLeft className="w-4 h-4 mr-2" />
-            Go Back
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex h-screen bg-background">
-      {/* Main Chat Area */}
-      <div className="flex-1 flex flex-col">
-        {/* Chat Header with Controls */}
-        <div className="relative z-10 border-b border-border bg-card/30 backdrop-blur-sm p-4">
-          <div className="flex items-center gap-4">
-            <Button variant="ghost" size="icon" onClick={onBack}>
-              <ArrowLeft className="w-5 h-5" />
-            </Button>
-            <div className="flex-1 flex items-center gap-2">
-              {isEditingTitle ? (
-                <div className="flex items-center gap-2 flex-1">
-                  <Input
-                    type="text"
-                    value={editedTitle}
-                    onChange={(e) => setEditedTitle(e.target.value)}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter') {
-                        handleSaveTitle();
-                      } else if (e.key === 'Escape') {
-                        handleCancelEditTitle();
-                      }
-                    }}
-                    className="flex-1 max-w-md"
-                    autoFocus
-                  />
-                  <Button variant="ghost" size="sm" onClick={handleSaveTitle}>
-                    Save
-                  </Button>
-                  <Button variant="ghost" size="sm" onClick={handleCancelEditTitle}>
-                    Cancel
-                  </Button>
-                </div>
-              ) : (
-                <>
-                  <h2
-                    className="text-xl font-bold neon-text-cyan cursor-pointer hover:opacity-80 transition-opacity"
-                    onClick={handleStartEditTitle}
-                    title="Click to edit title"
-                  >
-                    {chatMeta.title}
-                  </h2>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    onClick={handleDeleteChat}
-                    title="Delete chat"
-                    className="text-muted-foreground hover:text-destructive"
-                  >
-                    <Trash2 className="w-4 h-4" />
-                  </Button>
-                </>
-              )}
-            </div>
-            <div className="flex items-center gap-3">
-              <AssistantSelector
-                assistants={config.assistants}
-                currentAssistant={chatMeta.assistant}
-                onChange={handleAssistantChange}
-              />
-              <ModeSelector mode={chatMeta.mode} onChange={handleModeChange} />
-              <AgentModeSelector
-                agentMode={chatMeta.agentMode || 'default'}
-                onChange={handleAgentModeChange}
-              />
-              <ToolsetSelector
-                toolset={chatMeta.toolset}
-                onChange={handleToolsetChange}
-              />
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => setShowTodos(true)}
-                title="Todos"
-              >
-                <CheckSquare className="w-5 h-5" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => setShowChatSettings(true)}
-                title="Chat Settings"
-              >
-                <Settings className="w-5 h-5" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={handleClearMessages}
-                title="Clear messages"
-              >
-                <Trash2 className="w-5 h-5" />
-              </Button>
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => setShowProfile(true)}
-                title="Profile Settings"
-              >
-                <User className="w-5 h-5" />
-              </Button>
-            </div>
-          </div>
-        </div>
-
-        {loading ? (
-          <div className="flex-1 flex items-center justify-center">
-            <div className="text-center space-y-4">
-              <div className="spinner mx-auto"></div>
-              <p className="text-muted-foreground">Loading messages...</p>
-            </div>
-          </div>
-        ) : (
-          <>
-            {/* Messages Area */}
-            <ScrollArea className="flex-1 p-6">
-              <MessageList
-                messages={pendingMessage ? [...messages, pendingMessage] : messages}
-                operationDecisions={operationDecisions}
-                onToggleOperationDecision={handleToggleOperationDecision}
-                onApproveOperation={(msg, idx) => handleOperationApproval(msg, [idx], [])}
-                onRejectOperation={(msg, idx) => handleOperationApproval(msg, [], [idx])}
-              />
-            </ScrollArea>
-
-            {/* Input Area */}
-            <div className="border-t border-border bg-card/30 backdrop-blur-sm">
-              <ChatInput
-                chatId={chatId}
-                chatMeta={chatMeta}
-                config={config}
-                messageCount={messages.length}
-                totalCost={totalCost}
-                status={status}
-                isProcessing={isProcessing}
-                onSendMessage={handleSendMessage}
-                onCancel={handleCancel}
-                onModelClick={() => setShowModelSelector(true)}
-                hasMultiplePendingOperations={hasMultiplePendingOps}
-                allOperationsDecided={allOperationsDecided}
-                onApproveAll={handleApproveAllOperations}
-                onRejectAll={handleRejectAllOperations}
-                onSubmitDecisions={handleSubmitOperationDecisions}
-              />
-            </div>
-          </>
-        )}
-      </div>
-
-      {/* Modals */}
-      {showModelSelector && (
-        <ModelSelector
-          currentModel={chatMeta.model || config.user.models?.chat || ''}
-          onSelect={handleModelChange}
-          onClose={() => setShowModelSelector(false)}
-          onFetchModels={handleFetchModels}
-        />
-      )}
-
-      {showCommandsPanel && (
-        <CommandsPanel onClose={() => setShowCommandsPanel(false)} />
-      )}
-
-      {showChatSettings && (
-        <ChatSettingsDialog
-          title={chatMeta.title}
-          prompt={chatMeta.prompt}
-          cwd={cwd}
-          onSave={handleChatSettingsSave}
-          onClose={() => setShowChatSettings(false)}
-        />
-      )}
-
-      {showTodos && (
-        <TodosModal
-          todos={chatMeta.todos}
-          onAddTodo={handleAddTodo}
-          onToggleTodo={handleToggleTodo}
-          onRemoveTodo={handleRemoveTodo}
-          onClearTodos={handleClearTodos}
-          onClose={() => setShowTodos(false)}
-        />
-      )}
-
-      {/* Questions Modal */}
-      {chatMeta.questions && chatMeta.questions.length > 0 && !isProcessing && (
-        <QuestionsModal
-          questions={chatMeta.questions}
-          onSubmit={handleQuestionsSubmit}
-          onCancel={handleQuestionsCancel}
-        />
-      )}
-
-      {/* Profile Modal */}
-      {showProfile && (
-        <ProfileModal
-          user={config.user}
-          onSave={handleProfileSave}
-          onClose={() => setShowProfile(false)}
-        />
-      )}
-
-      {/* Clear Messages Confirmation Dialog */}
-      {showClearConfirm && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
-          onClick={() => {
-            setShowClearConfirm(false);
-            setClearConfirmText('');
-          }}
-        >
-          <div
-            className="relative w-full max-w-md bg-card rounded-lg border border-border shadow-2xl p-6"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <h2 className="text-xl font-bold text-destructive mb-4">Clear All Messages</h2>
-            <p className="text-foreground mb-4">
-              This will permanently delete all messages in this chat. This action cannot be undone.
-            </p>
-            <p className="text-muted-foreground mb-4">
-              Type <span className="font-mono font-bold text-foreground">CLEAR</span> to confirm:
-            </p>
-            <Input
-              type="text"
-              value={clearConfirmText}
-              onChange={(e) => setClearConfirmText(e.target.value)}
-              placeholder="Type CLEAR"
-              className="mb-4 font-mono"
-              autoFocus
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') {
-                  handleConfirmClear();
-                } else if (e.key === 'Escape') {
-                  setShowClearConfirm(false);
-                  setClearConfirmText('');
-                }
-              }}
-            />
-            <div className="flex justify-end gap-3">
-              <Button
-                variant="ghost"
-                onClick={() => {
-                  setShowClearConfirm(false);
-                  setClearConfirmText('');
-                }}
-              >
-                Cancel
-              </Button>
-              <Button
-                variant="destructive"
-                onClick={handleConfirmClear}
-                disabled={clearConfirmText !== 'CLEAR'}
-              >
-                Clear Messages
-              </Button>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/packages/cletus/src/browser/pages/UnifiedLayout.tsx b/packages/cletus/src/browser/pages/UnifiedLayout.tsx
index 9961203..a303c9b 100644
--- a/packages/cletus/src/browser/pages/UnifiedLayout.tsx
+++ b/packages/cletus/src/browser/pages/UnifiedLayout.tsx
@@ -362,6 +362,23 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
 
   const handleOperationApproval = (message: Message, approved: number[], rejected: number[]) => {
     if (!selectedChatId) return;
+
+    // Update local state immediately to show visual feedback
+    setMessages(prev => prev.map(msg => {
+      if (msg.created === message.created) {
+        const updatedOperations = (msg.operations || []).map((op, idx) => {
+          if (approved.includes(idx)) {
+            return { ...op, status: 'doing' as const };
+          } else if (rejected.includes(idx)) {
+            return { ...op, status: 'rejected' as const };
+          }
+          return op;
+        });
+        return { ...msg, operations: updatedOperations };
+      }
+      return msg;
+    }));
+
     send({
       type: 'handle_operations',
       data: {
@@ -372,6 +389,8 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
       },
     });
     setOperationDecisions(new Map());
+    setIsProcessing(true);
+    setStatus('Executing operations...');
   };
 
   const handleToggleOperationDecision = (idx: number, decision: 'approve' | 'reject') => {
@@ -441,6 +460,9 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
   const allOperationsDecided = lastMessagePendingOps.every((_op, idx) =>
     operationDecisions.has(idx)
   );
+  const hasOperationsProcessing = lastMessage?.role === 'assistant'
+    ? (lastMessage.operations || []).some(op => op.status === 'doing')
+    : false;
 
   // Empty state when no chat is selected
   if (!selectedChatId || !chatMeta) {
@@ -620,6 +642,7 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
                 onModelClick={() => setShowModelSelector(true)}
                 hasMultiplePendingOperations={hasMultiplePendingOps}
                 allOperationsDecided={allOperationsDecided}
+                hasOperationsProcessing={hasOperationsProcessing}
                 onApproveAll={handleApproveAllOperations}
                 onRejectAll={handleRejectAllOperations}
                 onSubmitDecisions={handleSubmitOperationDecisions}

From e6967a9754fabaf232edcd8d4e47b6adaaf55c21 Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Thu, 18 Dec 2025 11:51:20 -0500
Subject: [PATCH 19/27] Improve chat message persistence and error handling

ChatSidebar header updated from 'Chats' to 'Cletus'. In server.ts, added process-level error and warning handlers to prevent silent crashes. Enhanced chat message persistence by saving or updating pending and complete messages immediately, ensuring no data loss on errors or cancellations. Improved fireAndForget utility to accept async functions, and ensured partial progress is saved on orchestrator errors.
---
 .../src/browser/components/ChatSidebar.tsx    |  2 +-
 packages/cletus/src/browser/server.ts         | 62 +++++++++++++++++--
 2 files changed, 57 insertions(+), 7 deletions(-)

diff --git a/packages/cletus/src/browser/components/ChatSidebar.tsx b/packages/cletus/src/browser/components/ChatSidebar.tsx
index aee6aec..d6064fb 100644
--- a/packages/cletus/src/browser/components/ChatSidebar.tsx
+++ b/packages/cletus/src/browser/components/ChatSidebar.tsx
@@ -115,7 +115,7 @@ export const ChatSidebar: React.FC<ChatSidebarProps> = ({
       <div className="p-4 border-b border-border flex items-center justify-between">
         <div className="flex items-center gap-3">
           <Sparkles className="w-6 h-6 text-neon-cyan" />
-          <h2 className="text-lg font-bold neon-text-purple">Chats</h2>
+          <h2 className="text-lg font-bold neon-text-purple">Cletus</h2>
         </div>
         <div className="flex items-center gap-1">
           <Button
diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
index fe81906..1040fb4 100644
--- a/packages/cletus/src/browser/server.ts
+++ b/packages/cletus/src/browser/server.ts
@@ -100,6 +100,19 @@ export async function startBrowserServer(port: number = 3000): Promise<void> {
     console.log('  ⌨️  Press Ctrl+C to exit\n');
   });
 
+  // Handle & log these to avoid silent crashes
+  process.on('uncaughtException', (err => {
+    console.error('Uncaught exception:', err);
+  }));
+
+  process.on('unhandledRejection', (reason, promise) => {
+    console.error('Unhandled promise rejection:', reason);
+  });
+
+  process.on('warning', (warning) => {
+    console.warn('Process warning:', warning);
+  });
+
   // Handle graceful shutdown
   process.on('SIGINT', () => {
     console.log('\n\nShutting down...');
@@ -257,10 +270,29 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
     });
   };
 
+  /**
+   * Save or update a message in the chat file.
+   * If message exists (by created timestamp), update it. Otherwise, add it.
+   */
+  const saveOrUpdateMessage = async (chatFile: ChatFile, message: Message) => {
+    const messages = chatFile.getMessages();
+    const existingMessage = messages.find(m => m.created === message.created);
+
+    if (existingMessage) {
+      await chatFile.updateMessage(message);
+    } else {
+      await chatFile.addMessage(message);
+    }
+  };
+
   const handleOrchestratorEvent = (event: OrchestratorEvent, chatFile: ChatFile) => {
     // Handle orchestrator events
     switch (event.type) {
       case 'pendingUpdate':
+        // Save pending message immediately to chat file so it persists
+        // This ensures messages are never lost due to errors or cancellations
+        fireAndForget(saveOrUpdateMessage(chatFile, event.pending));
+
         sendMessage({
           type: 'pending_update',
           data: { pending: event.pending },
@@ -296,10 +328,13 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
         });
         break;
       case 'complete':
-        // Add the complete message to chat file (like CLI does)
-        if (event.message.content.length > 0) {
-          fireAndForget(chatFile.addMessage(event.message))
-        }
+        // Update the message if it exists (from pending), or add it if it doesn't
+        fireAndForget(async () => {
+          if (event.message.content.length > 0) {
+            await saveOrUpdateMessage(chatFile, event.message);
+          }
+        });
+
         // Send the complete message
         sendMessage({
           type: 'response_complete',
@@ -307,6 +342,18 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
         });
         break;
       case 'error':
+        // Try to save any pending message state before reporting error
+        // This ensures partial progress isn't lost when errors occur
+        fireAndForget(async () => {
+          const messages = chatFile.getMessages();
+          // Find the most recent assistant message that might be pending
+          const lastAssistantMsg = messages.filter(m => m.role === 'assistant').pop();
+          if (lastAssistantMsg) {
+            // Update the message to persist any partial progress
+            await chatFile.updateMessage(lastAssistantMsg);
+          }
+        });
+
         sendMessage({
           type: 'error',
           data: { message: event.error },
@@ -664,7 +711,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
             }
 
             // Ensure AI and chat agent are loaded
-            const { ai: aiInstance, chatAgent: chatAgentInstance } = await ensureAI();
+            const { ai: aiInstance } = await ensureAI();
 
             // Execute approved operations
             let hasExecutedOperations = false;
@@ -869,7 +916,10 @@ async function serveStaticFile(url: string, res: http.ServerResponse): Promise<v
   }
 }
 
-function fireAndForget<T>(promise: Promise<T>): void {
+function fireAndForget<T>(promise: Promise<T> | (() => Promise<T>)): void {
+  if (typeof promise === 'function') {
+    promise = promise();
+  }
   promise.catch((error) => {
     console.error('Uncaught error:', error);
   });

From dab7a69ca11565dbc92f0bbf660ad28f791f59d6 Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Thu, 18 Dec 2025 16:14:45 -0500
Subject: [PATCH 20/27] Refactor chat UI and logic for unified layout

Removed MainPage and ChatList components, consolidating chat selection and creation logic into UnifiedLayout and ChatSidebar. Improved message loading feedback and temporary message handling for a more responsive UI. Updated server-side WebSocket handling to support interruptible operations and more robust operation execution feedback. Added 'processing' state to client-server protocol for better UI state management.
---
 .../src/browser/components/ChatInput.tsx      |   8 +-
 .../src/browser/components/ChatList.tsx       | 155 ------------
 .../src/browser/components/ChatSidebar.tsx    |  47 +---
 .../src/browser/components/MessageList.tsx    |  14 +-
 .../cletus/src/browser/pages/MainPage.tsx     | 154 ------------
 .../src/browser/pages/UnifiedLayout.tsx       | 225 +++++++++++++-----
 packages/cletus/src/browser/server.ts         | 123 ++++++----
 .../cletus/src/browser/websocket-types.ts     |   3 +-
 8 files changed, 276 insertions(+), 453 deletions(-)
 delete mode 100644 packages/cletus/src/browser/components/ChatList.tsx
 delete mode 100644 packages/cletus/src/browser/pages/MainPage.tsx

diff --git a/packages/cletus/src/browser/components/ChatInput.tsx b/packages/cletus/src/browser/components/ChatInput.tsx
index 98b0cc9..d043046 100644
--- a/packages/cletus/src/browser/components/ChatInput.tsx
+++ b/packages/cletus/src/browser/components/ChatInput.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Send, Loader2, X, CheckCircle2, XCircle } from 'lucide-react';
+import { Send, Loader2, X, CheckCircle2, XCircle, StopCircle } from 'lucide-react';
 import { Button } from './ui/button';
 import { Textarea } from './ui/textarea';
 import type { ChatMeta, MessageContent, Config } from '../../schemas';
@@ -184,11 +184,11 @@ export const ChatInput: React.FC<ChatInputProps> = ({
               <Button
                 type="button"
                 variant="destructive"
+                size="icon"
                 onClick={onCancel}
-                className="gap-2"
+                title="Stop"
               >
-                <X className="w-4 h-4" />
-                Cancel
+                <StopCircle className="w-5 h-5" />
               </Button>
             )}
             <Button
diff --git a/packages/cletus/src/browser/components/ChatList.tsx b/packages/cletus/src/browser/components/ChatList.tsx
deleted file mode 100644
index a6dd1d5..0000000
--- a/packages/cletus/src/browser/components/ChatList.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-import React, { useState } from 'react';
-import { MessageSquare, Clock } from 'lucide-react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/card';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import type { Config } from '../../schemas';
-
-interface ChatListProps {
-  config: Config;
-  onChatSelect: (chatId: string) => void;
-  onConfigChange: () => Promise<void>;
-  forceShowCreate?: boolean;
-  onCreateClose?: () => void;
-}
-
-export const ChatList: React.FC<ChatListProps> = ({ config, onChatSelect, onConfigChange, forceShowCreate = false, onCreateClose }) => {
-  const [isCreating, setIsCreating] = useState(false);
-  const [newChatName, setNewChatName] = useState('');
-
-  const showCreate = isCreating || forceShowCreate;
-
-  const chats = config.chats;
-  const sortedChats = [...chats].sort((a, b) => b.updated - a.updated);
-
-  const handleCreateChat = async () => {
-    if (!newChatName.trim()) return;
-
-    try {
-      // Send create chat message via WebSocket
-      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-      const ws = new WebSocket(`${protocol}//${window.location.host}`);
-
-      ws.onopen = () => {
-        ws.send(JSON.stringify({
-          type: 'create_chat',
-          data: { name: newChatName.trim() },
-        }));
-      };
-
-      ws.onmessage = async (event) => {
-        const message = JSON.parse(event.data);
-        if (message.type === 'chat_created') {
-          await onConfigChange();
-          setIsCreating(false);
-          setNewChatName('');
-          onCreateClose?.();
-          onChatSelect(message.data.chatId);
-          ws.close();
-        } else if (message.type === 'error') {
-          console.error('Failed to create chat:', message.data.message);
-          ws.close();
-        }
-      };
-    } catch (error) {
-      console.error('Failed to create chat:', error);
-    }
-  };
-
-  const formatDate = (timestamp: number) => {
-    const date = new Date(timestamp);
-    const now = new Date();
-    const diffInHours = (now.getTime() - date.getTime()) / (1000 * 60 * 60);
-
-    if (diffInHours < 24) {
-      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-    } else if (diffInHours < 24 * 7) {
-      return date.toLocaleDateString([], { weekday: 'short', hour: '2-digit', minute: '2-digit' });
-    } else {
-      return date.toLocaleDateString();
-    }
-  };
-
-  return (
-    <div className="space-y-6">
-      {showCreate && (
-        <Card className="border-neon-cyan/50 shadow-lg">
-          <CardHeader>
-            <CardTitle className="neon-text-cyan">Create New Chat</CardTitle>
-            <CardDescription>Start a new conversation</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-3">
-            <Input
-              type="text"
-              placeholder="Enter chat name..."
-              value={newChatName}
-              onChange={(e) => setNewChatName(e.target.value)}
-              onKeyPress={(e) => e.key === 'Enter' && handleCreateChat()}
-              autoFocus
-            />
-            <div className="flex gap-2">
-              <Button variant="neon" onClick={handleCreateChat} className="flex-1">
-                Create
-              </Button>
-              <Button
-                variant="outline"
-                onClick={() => {
-                  setIsCreating(false);
-                  setNewChatName('');
-                  onCreateClose?.();
-                }}
-              >
-                Cancel
-              </Button>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {sortedChats.length === 0 ? (
-        <Card className="border-dashed">
-          <CardContent className="py-12 text-center space-y-4">
-            <MessageSquare className="w-16 h-16 mx-auto text-muted-foreground" />
-            <div>
-              <p className="text-lg font-semibold text-muted-foreground">No chats yet</p>
-              <p className="text-sm text-muted-foreground mt-1">
-                Create a new chat to get started!
-              </p>
-            </div>
-            <Button variant="neon" onClick={() => setIsCreating(true)}>
-              Create Your First Chat
-            </Button>
-          </CardContent>
-        </Card>
-      ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {sortedChats.map((chat) => (
-            <Card
-              key={chat.id}
-              className="cursor-pointer transition-all hover:scale-105 hover:border-neon-cyan/70 group"
-              onClick={() => onChatSelect(chat.id)}
-            >
-              <CardHeader className="pb-3">
-                <div className="flex items-start justify-between">
-                  <MessageSquare className="w-5 h-5 text-neon-purple group-hover:text-neon-cyan transition-colors" />
-                  <span className="text-xs px-2 py-0.5 rounded-full bg-neon-purple/20 text-neon-purple border border-neon-purple/50">
-                    {chat.mode}
-                  </span>
-                </div>
-                <CardTitle className="text-lg mt-3 group-hover:neon-text-cyan transition-all">
-                  {chat.title}
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                  <Clock className="w-3 h-3" />
-                  <span>{formatDate(chat.updated)}</span>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/packages/cletus/src/browser/components/ChatSidebar.tsx b/packages/cletus/src/browser/components/ChatSidebar.tsx
index d6064fb..e0895eb 100644
--- a/packages/cletus/src/browser/components/ChatSidebar.tsx
+++ b/packages/cletus/src/browser/components/ChatSidebar.tsx
@@ -1,10 +1,8 @@
-import React, { useState } from 'react';
-import { MessageSquare, Clock, Plus, ChevronLeft, ChevronRight, User, Sparkles } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Clock, MessageSquare, Plus, Sparkles, User } from 'lucide-react';
+import React from 'react';
+import type { Config } from '../../schemas';
 import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
 import { ScrollArea } from './ui/scroll-area';
-import type { Config } from '../../schemas';
 
 interface ChatSidebarProps {
   config: Config;
@@ -12,8 +10,8 @@ interface ChatSidebarProps {
   isCollapsed: boolean;
   onToggleCollapse: () => void;
   onChatSelect: (chatId: string) => void;
-  onConfigChange: () => Promise<void>;
   onProfileClick: () => void;
+  onCreateChat?: () => void;
 }
 
 export const ChatSidebar: React.FC<ChatSidebarProps> = ({
@@ -22,44 +20,15 @@ export const ChatSidebar: React.FC<ChatSidebarProps> = ({
   isCollapsed,
   onToggleCollapse,
   onChatSelect,
-  onConfigChange,
   onProfileClick,
+  onCreateChat,
 }) => {
   const chats = config.chats;
   const sortedChats = [...chats].sort((a, b) => b.updated - a.updated);
 
-  const handleCreateChat = async () => {
-    // Generate timestamp-based name
-    const now = new Date();
-    const day = now.getDate();
-    const month = now.getMonth() + 1; // 0-indexed
-    const year = now.getFullYear();
-    const newChatName = `New Chat on ${day}/${month}/${year}`;
-
-    try {
-      const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-      const ws = new WebSocket(`${protocol}//${window.location.host}`);
-
-      ws.onopen = () => {
-        ws.send(JSON.stringify({
-          type: 'create_chat',
-          data: { name: newChatName.trim() },
-        }));
-      };
-
-      ws.onmessage = async (event) => {
-        const message = JSON.parse(event.data);
-        if (message.type === 'chat_created') {
-          await onConfigChange();
-          onChatSelect(message.data.chatId);
-          ws.close();
-        } else if (message.type === 'error') {
-          console.error('Failed to create chat:', message.data.message);
-          ws.close();
-        }
-      };
-    } catch (error) {
-      console.error('Failed to create chat:', error);
+  const handleCreateChat = () => {
+    if (onCreateChat) {
+      onCreateChat();
     }
   };
 
diff --git a/packages/cletus/src/browser/components/MessageList.tsx b/packages/cletus/src/browser/components/MessageList.tsx
index de94462..423418a 100644
--- a/packages/cletus/src/browser/components/MessageList.tsx
+++ b/packages/cletus/src/browser/components/MessageList.tsx
@@ -1,9 +1,11 @@
 import React, { useEffect, useRef } from 'react';
+import { Loader2 } from 'lucide-react';
 import { MessageItem } from './MessageItem';
 import type { Message } from '../../schemas';
 
 interface MessageListProps {
   messages: Message[];
+  loading?: boolean;
   operationDecisions?: Map<number, 'approve' | 'reject'>;
   onToggleOperationDecision?: (idx: number, decision: 'approve' | 'reject') => void;
   onApproveOperation?: (message: Message, idx: number) => void;
@@ -12,6 +14,7 @@ interface MessageListProps {
 
 export const MessageList: React.FC<MessageListProps> = ({
   messages,
+  loading = false,
   operationDecisions,
   onToggleOperationDecision,
   onApproveOperation,
@@ -28,7 +31,14 @@ export const MessageList: React.FC<MessageListProps> = ({
     <div className="flex-1 overflow-auto">
       {messages.length === 0 ? (
         <div className="text-center text-muted-foreground mt-8">
-          <p>No messages yet. Start a conversation!</p>
+          {loading ? (
+            <div className="flex items-center justify-center gap-2">
+              <Loader2 className="w-5 h-5 animate-spin" />
+              <p>Loading messages...</p>
+            </div>
+          ) : (
+            <p>No messages yet. Start a conversation!</p>
+          )}
         </div>
       ) : (
         <div className="space-y-4">
@@ -40,7 +50,7 @@ export const MessageList: React.FC<MessageListProps> = ({
 
             return (
               <MessageItem
-                key={index}
+                key={message.created}
                 message={message}
                 operationDecisions={operationDecisions}
                 onToggleOperationDecision={onToggleOperationDecision}
diff --git a/packages/cletus/src/browser/pages/MainPage.tsx b/packages/cletus/src/browser/pages/MainPage.tsx
deleted file mode 100644
index 4d86ba0..0000000
--- a/packages/cletus/src/browser/pages/MainPage.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-import React, { useState } from 'react';
-import { MessageSquare, Settings, Plus, Sparkles, User } from 'lucide-react';
-import { Button } from '../components/ui/button';
-import { ScrollArea } from '../components/ui/scroll-area';
-import { ChatList } from '../components/ChatList';
-import { SettingsView } from '../components/SettingsView';
-import { ProfileModal } from '../components/ProfileModal';
-import type { Config } from '../../schemas';
-import { sendClientMessage } from '../websocket-types';
-
-interface MainPageProps {
-  config: Config;
-  onChatSelect: (chatId: string) => void;
-  onConfigChange: () => Promise<void>;
-}
-
-type MainView = 'chats' | 'settings';
-
-export const MainPage: React.FC<MainPageProps> = ({ config, onChatSelect, onConfigChange }) => {
-  const [view, setView] = useState<MainView>('chats');
-  const [showNewChat, setShowNewChat] = useState(false);
-  const [showProfile, setShowProfile] = useState(false);
-
-  const handleProfileSave = (updates: Partial<Config['user']>) => {
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const ws = new WebSocket(`${protocol}//${window.location.host}`);
-
-    ws.onopen = () => {
-      sendClientMessage(ws, { type: 'update_user', data: { updates } });
-    };
-
-    ws.onmessage = async (event) => {
-      const message = JSON.parse(event.data);
-      if (message.type === 'config') {
-        await onConfigChange();
-        ws.close();
-      } else if (message.type === 'error') {
-        console.error('Failed to update user:', message.data.message);
-        ws.close();
-      }
-    };
-  };
-
-  return (
-    <div className="flex h-screen bg-background">
-      {/* Sidebar */}
-      <div className="w-64 border-r border-border bg-card/50 backdrop-blur-sm flex flex-col">
-        <div className="p-6 border-b border-border">
-          <div className="flex items-center gap-3 mb-6">
-            <Sparkles className="w-8 h-8 text-neon-cyan" />
-            <h1 className="text-2xl font-bold neon-text-purple">Cletus</h1>
-          </div>
-          <div className="flex items-center justify-between">
-            <div className="text-sm text-muted-foreground">
-              Welcome, <span className="text-neon-cyan font-semibold">{config.user.name}</span>
-            </div>
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={() => setShowProfile(true)}
-              title="Profile Settings"
-              className="h-8 w-8"
-            >
-              <User className="w-4 h-4" />
-            </Button>
-          </div>
-        </div>
-
-        <nav className="flex-1 p-4">
-          <div className="space-y-2">
-            <Button
-              variant={view === 'chats' ? 'default' : 'ghost'}
-              className="w-full justify-start gap-3"
-              onClick={() => {
-                setView('chats');
-                window.history.pushState({}, '', '/');
-              }}
-            >
-              <MessageSquare className="w-4 h-4" />
-              Chats
-            </Button>
-            <Button
-              variant={view === 'settings' ? 'default' : 'ghost'}
-              className="w-full justify-start gap-3 text-foreground hover:text-foreground"
-              onClick={() => {
-                setView('settings');
-                window.history.pushState({}, '', '/settings');
-              }}
-            >
-              <Settings className="w-4 h-4" />
-              Settings
-            </Button>
-          </div>
-        </nav>
-
-        <div className="p-4 border-t border-border">
-          <div className="text-xs text-muted-foreground text-center">
-            <div className="neon-text-purple font-mono">Browser Mode</div>
-          </div>
-        </div>
-      </div>
-
-      {/* Main Content */}
-      <div className="flex-1 flex flex-col">
-        {/* Header */}
-        <div className="border-b border-border bg-card/30 backdrop-blur-sm p-6">
-          <div className="flex items-center justify-between">
-            <div>
-              <h2 className="text-3xl font-bold neon-text-cyan">
-                {view === 'chats' ? 'Your Chats' : 'Settings'}
-              </h2>
-              <p className="text-sm text-muted-foreground mt-1">
-                {view === 'chats'
-                  ? `${config.chats.length} conversation${config.chats.length !== 1 ? 's' : ''}`
-                  : 'Manage your preferences'
-                }
-              </p>
-            </div>
-            {view === 'chats' && (
-              <Button variant="neon" className="gap-2" onClick={() => setShowNewChat(true)}>
-                <Plus className="w-4 h-4" />
-                New Chat
-              </Button>
-            )}
-          </div>
-        </div>
-
-        {/* Content Area */}
-        <ScrollArea className="flex-1 p-6">
-          {view === 'chats' ? (
-            <ChatList
-              config={config}
-              onChatSelect={onChatSelect}
-              onConfigChange={onConfigChange}
-              forceShowCreate={showNewChat}
-              onCreateClose={() => setShowNewChat(false)}
-            />
-          ) : (
-            <SettingsView config={config} />
-          )}
-        </ScrollArea>
-      </div>
-
-      {/* Profile Modal */}
-      {showProfile && (
-        <ProfileModal
-          user={config.user}
-          onSave={handleProfileSave}
-          onClose={() => setShowProfile(false)}
-        />
-      )}
-    </div>
-  );
-};
diff --git a/packages/cletus/src/browser/pages/UnifiedLayout.tsx b/packages/cletus/src/browser/pages/UnifiedLayout.tsx
index a303c9b..b2b70b1 100644
--- a/packages/cletus/src/browser/pages/UnifiedLayout.tsx
+++ b/packages/cletus/src/browser/pages/UnifiedLayout.tsx
@@ -29,6 +29,8 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [messages, setMessages] = useState<Message[]>([]);
   const [pendingMessage, setPendingMessage] = useState<Message | null>(null);
+  const [temporaryUserMessage, setTemporaryUserMessage] = useState<Message | null>(null);
+  const [temporaryAssistantMessage, setTemporaryAssistantMessage] = useState<Message | null>(null);
   const [loading, setLoading] = useState(false);
   const [showModelSelector, setShowModelSelector] = useState(false);
   const [showChatSettings, setShowChatSettings] = useState(false);
@@ -49,6 +51,7 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
     resolve: (models: any[]) => void;
     reject: (error: Error) => void;
   } | null>(null);
+  const pendingChatSelectRef = useRef<string | null>(null);
 
   const chatMeta = chatMetaState || config.chats.find((c) => c.id === selectedChatId);
 
@@ -58,11 +61,35 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
       const lastChat = [...config.chats].sort((a, b) => b.updated - a.updated)[0];
       if (lastChat) {
         setSelectedChatId(lastChat.id);
+        setLoading(true);
         window.history.replaceState({}, '', `/chat/${lastChat.id}`);
       }
     }
   }, [config.chats, selectedChatId]);
 
+  // Handle pending chat selection after config updates
+  useEffect(() => {
+    console.log('[UnifiedLayout] Effect fired, pendingChatSelectRef:', pendingChatSelectRef.current, 'config.chats.length:', config.chats.length);
+    if (pendingChatSelectRef.current) {
+      const chatToSelect = pendingChatSelectRef.current;
+
+      console.log('[UnifiedLayout] Attempting to select chat:', chatToSelect);
+      // Check if chat exists in config
+      const chatExists = config.chats.find(c => c.id === chatToSelect);
+      console.log('[UnifiedLayout] Chat exists in config:', !!chatExists);
+
+      if (chatExists) {
+        // Chat is in config, select it now
+        pendingChatSelectRef.current = null;
+        console.log('[UnifiedLayout] Calling handleChatSelect');
+        handleChatSelect(chatToSelect);
+      } else {
+        // Chat not in config yet, keep waiting for next config update
+        console.log('[UnifiedLayout] Chat not found, waiting for next config update');
+      }
+    }
+  }, [config.chats]);
+
   // WebSocket connection
   useEffect(() => {
     if (!selectedChatId) return;
@@ -106,12 +133,16 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
         break;
 
       case 'message_added':
+        // Clear temporary user message when real message is added
+        setTemporaryUserMessage(null);
         if (wsRef.current && selectedChatId) {
           sendClientMessage(wsRef.current, { type: 'get_messages', data: { chatId: selectedChatId } });
         }
         break;
 
       case 'pending_update':
+        // Clear temporary assistant message when real pending message arrives
+        setTemporaryAssistantMessage(null);
         setPendingMessage(message.data.pending);
         break;
 
@@ -129,6 +160,7 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
 
       case 'response_complete':
         setPendingMessage(null);
+        setTemporaryAssistantMessage(null);
         setIsProcessing(false);
         setStatus('');
         if (message.data.message) {
@@ -159,6 +191,13 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
       case 'elapsed_update':
         break;
 
+      case 'processing':
+        setIsProcessing(message.data);
+        if (!message.data) {
+          setStatus('');
+        }
+        break;
+
       case 'models':
         if (modelsResolverRef.current) {
           modelsResolverRef.current.resolve(message.data.models || []);
@@ -166,7 +205,36 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
         }
         break;
 
+      case 'chat_created':
+        console.log('[UnifiedLayout] Received chat_created:', message.data.chatId);
+        // Store the chat to select after config updates
+        if (message.data.chatId) {
+          pendingChatSelectRef.current = message.data.chatId;
+          console.log('[UnifiedLayout] Set pendingChatSelectRef to:', message.data.chatId);
+        }
+        // Refresh config - the effect will handle selection
+        console.log('[UnifiedLayout] Calling onConfigChange');
+        onConfigChange().then(() => {
+          // If chat still not found after first reload, try again
+          console.log('[UnifiedLayout] First config reload complete');
+          if (pendingChatSelectRef.current) {
+            console.log('[UnifiedLayout] Chat still pending, reloading config again after delay');
+            setTimeout(() => onConfigChange(), 200);
+          }
+        });
+        break;
+
       case 'chat_deleted':
+        // Clear selection if deleted chat was selected
+        if (message.data.chatId === selectedChatId) {
+          setSelectedChatId(null);
+          setMessages([]);
+          setPendingMessage(null);
+          setTemporaryUserMessage(null);
+          setTemporaryAssistantMessage(null);
+        }
+        // Refresh config - auto-select effect will handle selecting another chat
+        onConfigChange();
         break;
 
       case 'error':
@@ -197,24 +265,41 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
     setSelectedChatId(chatId);
     setMessages([]);
     setPendingMessage(null);
+    setTemporaryUserMessage(null);
+    setTemporaryAssistantMessage(null);
     setLoading(true);
     window.history.pushState({}, '', `/chat/${chatId}`);
   };
 
   const handleSendMessage = (content: MessageContent[]) => {
     if (!selectedChatId) return;
+
+    // Create temporary user message for immediate display
+    const tempUserMsg: Message = {
+      role: 'user',
+      content,
+      created: Date.now(),
+    };
+    setTemporaryUserMessage(tempUserMsg);
+
+    // Create temporary assistant message placeholder
+    const tempAssistantMsg: Message = {
+      role: 'assistant',
+      content: [],
+      created: Date.now() + 1,
+    };
+    setTemporaryAssistantMessage(tempAssistantMsg);
+
     send({
       type: 'send_message',
       data: { chatId: selectedChatId, content },
     });
-    setIsProcessing(true);
-    setStatus('Processing...');
+    // Server will send 'processing' message to update isProcessing state
   };
 
   const handleCancel = () => {
     send({ type: 'cancel' });
-    setIsProcessing(false);
-    setStatus('');
+    // Server will send 'processing' message to update isProcessing state
   };
 
   const handleQuestionsSubmit = (questionAnswers: Record<number, Set<number>>, questionCustomAnswers: Record<number, string>) => {
@@ -228,8 +313,7 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
       type: 'submit_question_answers',
       data: { chatId: selectedChatId, questionAnswers: answersArray, questionCustomAnswers },
     });
-    setIsProcessing(true);
-    setStatus('Processing answers...');
+    // Server will send 'processing' message to update isProcessing state
   };
 
   const handleQuestionsCancel = () => {
@@ -363,8 +447,8 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
   const handleOperationApproval = (message: Message, approved: number[], rejected: number[]) => {
     if (!selectedChatId) return;
 
-    // Update local state immediately to show visual feedback
-    setMessages(prev => prev.map(msg => {
+    // Helper function to update operations in a message
+    const updateMessageOperations = (msg: Message) => {
       if (msg.created === message.created) {
         const updatedOperations = (msg.operations || []).map((op, idx) => {
           if (approved.includes(idx)) {
@@ -377,7 +461,13 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
         return { ...msg, operations: updatedOperations };
       }
       return msg;
-    }));
+    };
+
+    // Update local state immediately to show visual feedback
+    setMessages(prev => prev.map(updateMessageOperations));
+
+    // Also update pending message if it matches
+    setPendingMessage(prev => prev ? updateMessageOperations(prev) : null);
 
     send({
       type: 'handle_operations',
@@ -389,8 +479,7 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
       },
     });
     setOperationDecisions(new Map());
-    setIsProcessing(true);
-    setStatus('Executing operations...');
+    // Server will send 'processing' message to update isProcessing state
   };
 
   const handleToggleOperationDecision = (idx: number, decision: 'approve' | 'reject') => {
@@ -450,8 +539,38 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
     send({ type: 'update_user', data: { updates } });
   };
 
-  // Get the actual last message being rendered (including pending)
-  const allMessages = pendingMessage ? [...messages, pendingMessage] : messages;
+  const handleCreateChat = () => {
+    // Generate timestamp-based name
+    const now = new Date();
+    const day = now.getDate();
+    const month = now.getMonth() + 1; // 0-indexed
+    const year = now.getFullYear();
+    const name = `New Chat on ${day}/${month}/${year}`;
+
+    send({
+      type: 'create_chat',
+      data: { name },
+    });
+  };
+
+  // Get the actual last message being rendered (including pending and temporary)
+  let allMessages = [...messages];
+
+  // Add temporary user message if it exists
+  if (temporaryUserMessage) {
+    allMessages.push(temporaryUserMessage);
+  }
+
+  // Add temporary assistant message if it exists (and no real pending message yet)
+  if (temporaryAssistantMessage && !pendingMessage) {
+    allMessages.push(temporaryAssistantMessage);
+  }
+
+  // Add pending message if it exists (replaces temporary assistant message)
+  if (pendingMessage) {
+    allMessages.push(pendingMessage);
+  }
+
   const lastMessage = allMessages.length > 0 ? allMessages[allMessages.length - 1] : null;
   const lastMessagePendingOps = lastMessage?.role === 'assistant'
     ? (lastMessage.operations || []).filter(op => op.status === 'analyzed')
@@ -474,8 +593,8 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
           isCollapsed={sidebarCollapsed}
           onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
           onChatSelect={handleChatSelect}
-          onConfigChange={onConfigChange}
           onProfileClick={() => setShowProfile(true)}
+          onCreateChat={handleCreateChat}
         />
         <div className="flex-1 flex items-center justify-center">
           <div className="text-center space-y-6">
@@ -510,8 +629,8 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
         isCollapsed={sidebarCollapsed}
         onToggleCollapse={() => setSidebarCollapsed(!sidebarCollapsed)}
         onChatSelect={handleChatSelect}
-        onConfigChange={onConfigChange}
         onProfileClick={() => setShowProfile(true)}
+        onCreateChat={handleCreateChat}
       />
 
       {/* Main Chat Area */}
@@ -607,49 +726,41 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
           </div>
         </div>
 
-        {loading ? (
-          <div className="flex-1 flex items-center justify-center">
-            <div className="text-center space-y-4">
-              <div className="spinner mx-auto"></div>
-              <p className="text-muted-foreground">Loading messages...</p>
-            </div>
+        <>
+          {/* Messages Area */}
+          <ScrollArea className="flex-1 p-6">
+            <MessageList
+              messages={allMessages}
+              loading={loading}
+              operationDecisions={operationDecisions}
+              onToggleOperationDecision={handleToggleOperationDecision}
+              onApproveOperation={(msg, idx) => handleOperationApproval(msg, [idx], [])}
+              onRejectOperation={(msg, idx) => handleOperationApproval(msg, [], [idx])}
+            />
+          </ScrollArea>
+
+          {/* Input Area */}
+          <div className="border-t border-border bg-card/30 backdrop-blur-sm">
+            <ChatInput
+              chatId={selectedChatId}
+              chatMeta={chatMeta}
+              config={config}
+              messageCount={messages.length}
+              totalCost={totalCost}
+              status={status}
+              isProcessing={isProcessing}
+              onSendMessage={handleSendMessage}
+              onCancel={handleCancel}
+              onModelClick={() => setShowModelSelector(true)}
+              hasMultiplePendingOperations={hasMultiplePendingOps}
+              allOperationsDecided={allOperationsDecided}
+              hasOperationsProcessing={hasOperationsProcessing}
+              onApproveAll={handleApproveAllOperations}
+              onRejectAll={handleRejectAllOperations}
+              onSubmitDecisions={handleSubmitOperationDecisions}
+            />
           </div>
-        ) : (
-          <>
-            {/* Messages Area */}
-            <ScrollArea className="flex-1 p-6">
-              <MessageList
-                messages={pendingMessage ? [...messages, pendingMessage] : messages}
-                operationDecisions={operationDecisions}
-                onToggleOperationDecision={handleToggleOperationDecision}
-                onApproveOperation={(msg, idx) => handleOperationApproval(msg, [idx], [])}
-                onRejectOperation={(msg, idx) => handleOperationApproval(msg, [], [idx])}
-              />
-            </ScrollArea>
-
-            {/* Input Area */}
-            <div className="border-t border-border bg-card/30 backdrop-blur-sm">
-              <ChatInput
-                chatId={selectedChatId}
-                chatMeta={chatMeta}
-                config={config}
-                messageCount={messages.length}
-                totalCost={totalCost}
-                status={status}
-                isProcessing={isProcessing}
-                onSendMessage={handleSendMessage}
-                onCancel={handleCancel}
-                onModelClick={() => setShowModelSelector(true)}
-                hasMultiplePendingOperations={hasMultiplePendingOps}
-                allOperationsDecided={allOperationsDecided}
-                hasOperationsProcessing={hasOperationsProcessing}
-                onApproveAll={handleApproveAllOperations}
-                onRejectAll={handleRejectAllOperations}
-                onSubmitDecisions={handleSubmitOperationDecisions}
-              />
-            </div>
-          </>
-        )}
+        </>
       </div>
 
       {/* Modals */}
diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
index 1040fb4..55bd806 100644
--- a/packages/cletus/src/browser/server.ts
+++ b/packages/cletus/src/browser/server.ts
@@ -12,6 +12,7 @@ import { OperationManager } from '../operations/manager';
 import { CletusAI, createCletusAI } from '../ai';
 import { CletusChatAgent, createChatAgent, initTools } from '../agents/chat-agent';
 import { OrchestratorEvent, runChatOrchestrator } from '../agents/chat-orchestrator';
+import { send } from 'process';
 
 const __serverFilename = fileURLToPath(import.meta.url);
 const __serverDirname = path.dirname(__serverFilename);
@@ -149,6 +150,21 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
     ws.send(JSON.stringify(message));
   };
 
+  // Helper to run interruptible operations
+  const startProcessing = <T>(fn: (signal: AbortSignal) => Promise<T>) => {
+    if (abortController) {
+      throw new Error('Another operation is already in progress');
+    }
+    abortController = new AbortController();
+    try {
+      sendMessage({ type: 'processing', data: true });
+      return fn(abortController.signal);
+    } finally {
+      sendMessage({ type: 'processing', data: false });
+      abortController = null;
+    }
+  };
+
   // Helper to send errors
   const sendError = (e: any, message: string = typeof e === 'string' ? e : e.message) => {
     sendMessage({
@@ -291,11 +307,14 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
       case 'pendingUpdate':
         // Save pending message immediately to chat file so it persists
         // This ensures messages are never lost due to errors or cancellations
-        fireAndForget(saveOrUpdateMessage(chatFile, event.pending));
-
-        sendMessage({
-          type: 'pending_update',
-          data: { pending: event.pending },
+        // We MUST await this to prevent race conditions where the user approves
+        // operations before the message is saved
+        fireAndForget(async () => {
+          await saveOrUpdateMessage(chatFile, event.pending);
+          sendMessage({
+            type: 'pending_update',
+            data: { pending: event.pending },
+          });
         });
         break;
       case 'update':
@@ -366,9 +385,6 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
     // Ensure AI and chat agent are loaded
     const { ai: aiInstance, chatAgent: chatAgentInstance } = await ensureAI();
 
-    // Run orchestrator
-    abortController = new AbortController();
-
     // Clear usage before running orchestrator
     const clearUsage = () => {
       const defaultContext = aiInstance.config.defaultContext;
@@ -391,20 +407,19 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
     };
 
     // Run orchestrator with updated chat file
-    await runChatOrchestrator({
-      chatAgent: chatAgentInstance,
-      messages: chatFile.getMessages(),
-      chatMeta: { ...chatMeta, questions: [] },
-      config,
-      chatData: chatFile,
-      signal: abortController?.signal,
-      clearUsage,
-      getUsage,
-    }, (event) => {
-      handleOrchestratorEvent(event, chatFile);
-    }).then(() => {
-      // Clear abort controller
-      abortController = null;
+    await startProcessing(async (signal)  => {
+      await runChatOrchestrator({
+        chatAgent: chatAgentInstance,
+        messages: chatFile.getMessages(),
+        chatMeta: { ...chatMeta, questions: [] },
+        config,
+        chatData: chatFile,
+        signal,
+        clearUsage,
+        getUsage,
+      }, (event) => {
+        handleOrchestratorEvent(event, chatFile);
+      });
     });
   };
 
@@ -699,9 +714,28 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
               'none', 
               operations,
               () => {},
-              (op, opIndex) => broadcastMessageUpdate(),
+              (op, opIndex) => {
+                // Update the message content when operation is executed.
+                // Move to end of message content array to ensure visibility.
+                const contentIndex = targetMessage.content.findIndex((c) => c.operationIndex === opIndex);
+                if (contentIndex !== -1) {
+                  const content = targetMessage.content.splice(contentIndex, 1)[0];
+                  content.content = op.message || '';
+                  targetMessage.content.push(content);
+                  
+                  chatFile.updateMessage(targetMessage);
+                  broadcastMessageUpdate();
+                }
+              },
             );
 
+            // Mark approved operations as 'doing' immediately
+            for (const idx of approved) {
+              if (operations[idx]) {
+                operations[idx].status = 'doing';
+              }
+            }
+
             // Mark rejected operations
             for (const idx of rejected) {
               if (operations[idx]) {
@@ -710,34 +744,41 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
               }
             }
 
+            // Save and broadcast the updated operation statuses immediately
+            await chatFile.updateMessage(targetMessage);
+            broadcastMessageUpdate();
+
             // Ensure AI and chat agent are loaded
             const { ai: aiInstance } = await ensureAI();
 
             // Execute approved operations
             let hasExecutedOperations = false;
             if (approved.length > 0) {
-              const ctx = await aiInstance.buildContext({
-                chat: chatMeta,
-                chatData: chatFile,
-                chatMessage: targetMessage,
-              });
+              await startProcessing(async (signal) => {
+                const ctx = await aiInstance.buildContext({
+                  ops: manager,
+                  chat: chatMeta,
+                  chatData: chatFile,
+                  chatMessage: targetMessage,
+                  config,
+                  signal,
+                  chatStatus: (status) => {
+                    sendMessage({
+                      type: 'status_update',
+                      data: { status },
+                    });
+                  },
+                });
 
-              for (const idx of approved) {
-                if (operations[idx]) {
-                  await manager.execute(operations[idx], true, ctx);
-                  hasExecutedOperations = true;
+                for (const idx of approved) {
+                  if (operations[idx]) {
+                    await manager.execute(operations[idx], true, ctx);
+                    hasExecutedOperations = true;
+                  }
                 }
-              }
+              });
             }
 
-            // Save updated message
-            await chatFile.save(d => {
-              d.messages = messages.map(m => m.created === messageCreated ? targetMessage : m);
-            });
-
-            // Send updated message back to client
-            broadcastMessageUpdate();
-
             // If operations were executed, continue with the orchestrator
             if (hasExecutedOperations) {
               // Run the chat
diff --git a/packages/cletus/src/browser/websocket-types.ts b/packages/cletus/src/browser/websocket-types.ts
index 3c70ba4..8e16128 100644
--- a/packages/cletus/src/browser/websocket-types.ts
+++ b/packages/cletus/src/browser/websocket-types.ts
@@ -42,7 +42,8 @@ export type ServerMessage =
   | { type: 'usage_update'; data: { accumulated: any; accumulatedCost: number; current: any } }
   | { type: 'elapsed_update'; data: { ms: number } }
   | { type: 'chat_deleted'; data: { chatId: string } }
-  | { type: 'error'; data: { message: string } };
+  | { type: 'error'; data: { message: string } }
+  | { type: 'processing'; data: boolean };
 
 /**
  * Type-safe WebSocket client interface

From 6f87612ab3fccd0f74c810a0858523eb05ddf5ad Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Thu, 18 Dec 2025 17:00:36 -0500
Subject: [PATCH 21/27] Refactor WebSocket handling with context provider

Introduces a WebSocketContext and provider to manage WebSocket connections and state across the app. Refactors app and main page components to use the new context, improving code organization and connection lifecycle management. Updates websocket-types to support message handler unsubscription and connection state checks. Renames UnifiedLayout to MainPage for clarity.
---
 .../cletus/src/browser/WebSocketContext.tsx   | 62 ++++++++++++++
 packages/cletus/src/browser/app.tsx           | 63 +++++++-------
 .../pages/{UnifiedLayout.tsx => MainPage.tsx} | 83 ++++++-------------
 packages/cletus/src/browser/server.ts         |  4 +-
 .../cletus/src/browser/websocket-types.ts     | 21 ++++-
 5 files changed, 135 insertions(+), 98 deletions(-)
 create mode 100644 packages/cletus/src/browser/WebSocketContext.tsx
 rename packages/cletus/src/browser/pages/{UnifiedLayout.tsx => MainPage.tsx} (91%)

diff --git a/packages/cletus/src/browser/WebSocketContext.tsx b/packages/cletus/src/browser/WebSocketContext.tsx
new file mode 100644
index 0000000..06a6eda
--- /dev/null
+++ b/packages/cletus/src/browser/WebSocketContext.tsx
@@ -0,0 +1,62 @@
+import React, { createContext, useContext, useEffect, useState, useRef } from 'react';
+import { createTypedWebSocket, TypedWebSocket } from './websocket-types';
+
+interface WebSocketContextType {
+  ws: TypedWebSocket | null;
+  isConnected: boolean;
+}
+
+const WebSocketContext = createContext<WebSocketContextType>({
+  ws: null,
+  isConnected: false,
+});
+
+export const useWebSocket = () => {
+  const context = useContext(WebSocketContext);
+  if (!context.ws) {
+    throw new Error('useWebSocket must be used within a WebSocketProvider');
+  }
+  return context;
+};
+
+interface WebSocketProviderProps {
+  children: React.ReactNode;
+}
+
+export const WebSocketProvider: React.FC<WebSocketProviderProps> = ({ children }) => {
+  const [isConnected, setIsConnected] = useState(false);
+  const wsRef = useRef<TypedWebSocket | null>(null);
+
+  useEffect(() => {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const url = `${protocol}//${window.location.host}`;
+
+    console.log('[WebSocketContext] Connecting to:', url);
+    const ws = createTypedWebSocket(url);
+    wsRef.current = ws;
+
+    // Wait for connection to open
+    const checkConnection = setInterval(() => {
+      if (ws.isOpen()) {
+        console.log('[WebSocketContext] Connected');
+        setIsConnected(true);
+        clearInterval(checkConnection);
+      }
+    }, 100);
+
+    // Cleanup on unmount
+    return () => {
+      clearInterval(checkConnection);
+      console.log('[WebSocketContext] Closing connection');
+      ws.close();
+      wsRef.current = null;
+      setIsConnected(false);
+    };
+  }, []);
+
+  return (
+    <WebSocketContext.Provider value={{ ws: wsRef.current, isConnected }}>
+      {children}
+    </WebSocketContext.Provider>
+  );
+};
diff --git a/packages/cletus/src/browser/app.tsx b/packages/cletus/src/browser/app.tsx
index d6331ad..e0db577 100644
--- a/packages/cletus/src/browser/app.tsx
+++ b/packages/cletus/src/browser/app.tsx
@@ -1,15 +1,16 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
-import { UnifiedLayout } from './pages/UnifiedLayout';
+import { MainPage } from './pages/MainPage';
 import { InitPage } from './pages/InitPage';
+import { WebSocketProvider, useWebSocket } from './WebSocketContext';
 import type { Config } from '../schemas';
 
 type AppView = 'loading' | 'init' | 'main';
 
-const App: React.FC = () => {
+const AppContent: React.FC = () => {
   const [view, setView] = useState<AppView>('loading');
   const [config, setConfig] = useState<Config | null>(null);
-  const wsRef = useRef<WebSocket | null>(null);
+  const { ws, isConnected } = useWebSocket();
 
   // Handle browser back/forward buttons
   useEffect(() => {
@@ -21,55 +22,39 @@ const App: React.FC = () => {
     return () => window.removeEventListener('popstate', handlePopState);
   }, []);
 
+  // Request config when WebSocket connects
   useEffect(() => {
-    // Connect to WebSocket
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const ws = new WebSocket(`${protocol}//${window.location.host}`);
-
-    ws.onopen = () => {
-      console.log('WebSocket connected');
-      // Request config
-      ws.send(JSON.stringify({ type: 'get_config' }));
-    };
+    if (!isConnected || !ws) return;
 
-    ws.onmessage = (event) => {
-      const message = JSON.parse(event.data);
+    console.log('[App] WebSocket connected, requesting config');
+    ws.send({ type: 'get_config' });
 
+    // Listen for config-related messages
+    const unsubscribe = ws.onMessage((message) => {
       switch (message.type) {
         case 'config':
+          console.log('[App] Received config');
           setConfig(message.data);
           setView('main');
           break;
 
         case 'config_not_found':
+          console.log('[App] Config not found, showing init page');
           setView('init');
           break;
 
         case 'error':
-          console.error('WebSocket error:', message.data.message);
+          console.error('[App] WebSocket error:', message.data.message);
           break;
       }
-    };
-
-    ws.onerror = (error) => {
-      console.error('WebSocket connection error:', error);
-      setView('init');
-    };
-
-    ws.onclose = () => {
-      console.log('WebSocket disconnected');
-    };
+    });
 
-    wsRef.current = ws;
-
-    return () => {
-      ws.close();
-    };
-  }, []);
+    return unsubscribe;
+  }, [isConnected, ws]);
 
   const reloadConfig = async () => {
-    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-      wsRef.current.send(JSON.stringify({ type: 'get_config' }));
+    if (ws && isConnected) {
+      ws.send({ type: 'get_config' });
     }
   };
 
@@ -94,7 +79,7 @@ const App: React.FC = () => {
 
   if (view === 'main' && config) {
     return (
-      <UnifiedLayout
+      <MainPage
         config={config}
         onConfigChange={reloadConfig}
       />
@@ -109,6 +94,14 @@ const App: React.FC = () => {
   );
 };
 
+const App: React.FC = () => {
+  return (
+    <WebSocketProvider>
+      <AppContent />
+    </WebSocketProvider>
+  );
+};
+
 const container = document.getElementById('root');
 if (!container) {
   throw new Error('Root element not found');
diff --git a/packages/cletus/src/browser/pages/UnifiedLayout.tsx b/packages/cletus/src/browser/pages/MainPage.tsx
similarity index 91%
rename from packages/cletus/src/browser/pages/UnifiedLayout.tsx
rename to packages/cletus/src/browser/pages/MainPage.tsx
index b2b70b1..7c6224a 100644
--- a/packages/cletus/src/browser/pages/UnifiedLayout.tsx
+++ b/packages/cletus/src/browser/pages/MainPage.tsx
@@ -17,14 +17,15 @@ import { Button } from '../components/ui/button';
 import { Input } from '../components/ui/input';
 import { ScrollArea } from '../components/ui/scroll-area';
 import type { ServerMessage } from '../websocket-types';
-import { sendClientMessage } from '../websocket-types';
+import { useWebSocket } from '../WebSocketContext';
 
-interface UnifiedLayoutProps {
+interface MainPageProps {
   config: Config;
   onConfigChange: () => Promise<void>;
 }
 
-export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigChange }) => {
+export const MainPage: React.FC<MainPageProps> = ({ config, onConfigChange }) => {
+  const { ws, isConnected } = useWebSocket();
   const [selectedChatId, setSelectedChatId] = useState<string | null>(null);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [messages, setMessages] = useState<Message[]>([]);
@@ -46,7 +47,6 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
   const [cwd, setCwd] = useState<string | undefined>(undefined);
   const [status, setStatus] = useState('');
   const [isProcessing, setIsProcessing] = useState(false);
-  const wsRef = useRef<WebSocket | null>(null);
   const modelsResolverRef = useRef<{
     resolve: (models: any[]) => void;
     reject: (error: Error) => void;
@@ -69,61 +69,36 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
 
   // Handle pending chat selection after config updates
   useEffect(() => {
-    console.log('[UnifiedLayout] Effect fired, pendingChatSelectRef:', pendingChatSelectRef.current, 'config.chats.length:', config.chats.length);
     if (pendingChatSelectRef.current) {
       const chatToSelect = pendingChatSelectRef.current;
 
-      console.log('[UnifiedLayout] Attempting to select chat:', chatToSelect);
       // Check if chat exists in config
       const chatExists = config.chats.find(c => c.id === chatToSelect);
-      console.log('[UnifiedLayout] Chat exists in config:', !!chatExists);
-
       if (chatExists) {
         // Chat is in config, select it now
         pendingChatSelectRef.current = null;
-        console.log('[UnifiedLayout] Calling handleChatSelect');
         handleChatSelect(chatToSelect);
-      } else {
-        // Chat not in config yet, keep waiting for next config update
-        console.log('[UnifiedLayout] Chat not found, waiting for next config update');
       }
     }
   }, [config.chats]);
 
-  // WebSocket connection
+  // Request messages when chat is selected and WebSocket is connected
   useEffect(() => {
-    if (!selectedChatId) return;
+    if (!selectedChatId || !isConnected || !ws) return;
 
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const ws = new WebSocket(`${protocol}//${window.location.host}`);
+    ws.send({ type: 'get_messages', data: { chatId: selectedChatId } });
+  }, [selectedChatId, isConnected, ws]);
 
-    ws.onopen = () => {
-      console.log('WebSocket connected');
-      sendClientMessage(ws, { type: 'get_messages', data: { chatId: selectedChatId } });
-    };
+  // Listen for WebSocket messages
+  useEffect(() => {
+    if (!ws) return;
 
-    ws.onmessage = (event) => {
-      const message = JSON.parse(event.data) as ServerMessage;
+    const unsubscribe = ws.onMessage((message) => {
       handleServerMessage(message);
-    };
-
-    ws.onerror = (error) => {
-      console.error('WebSocket error:', error);
-      setLoading(false);
-    };
-
-    ws.onclose = () => {
-      console.log('WebSocket closed');
-    };
+    });
 
-    wsRef.current = ws;
-
-    return () => {
-      if (ws.readyState === WebSocket.OPEN) {
-        ws.close();
-      }
-    };
-  }, [selectedChatId]);
+    return unsubscribe;
+  }, [ws]);
 
   const handleServerMessage = (message: ServerMessage) => {
     switch (message.type) {
@@ -135,8 +110,8 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
       case 'message_added':
         // Clear temporary user message when real message is added
         setTemporaryUserMessage(null);
-        if (wsRef.current && selectedChatId) {
-          sendClientMessage(wsRef.current, { type: 'get_messages', data: { chatId: selectedChatId } });
+        if (ws && selectedChatId) {
+          ws.send({ type: 'get_messages', data: { chatId: selectedChatId } });
         }
         break;
 
@@ -205,23 +180,17 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
         }
         break;
 
+      case 'config':
+        // Config received
+        break;
+
       case 'chat_created':
-        console.log('[UnifiedLayout] Received chat_created:', message.data.chatId);
         // Store the chat to select after config updates
         if (message.data.chatId) {
           pendingChatSelectRef.current = message.data.chatId;
-          console.log('[UnifiedLayout] Set pendingChatSelectRef to:', message.data.chatId);
         }
         // Refresh config - the effect will handle selection
-        console.log('[UnifiedLayout] Calling onConfigChange');
-        onConfigChange().then(() => {
-          // If chat still not found after first reload, try again
-          console.log('[UnifiedLayout] First config reload complete');
-          if (pendingChatSelectRef.current) {
-            console.log('[UnifiedLayout] Chat still pending, reloading config again after delay');
-            setTimeout(() => onConfigChange(), 200);
-          }
-        });
+        onConfigChange();
         break;
 
       case 'chat_deleted':
@@ -254,8 +223,8 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
   };
 
   const send = (message: any) => {
-    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
-      sendClientMessage(wsRef.current, message);
+    if (ws && ws.isOpen()) {
+      ws.send(message);
     } else {
       console.error('WebSocket not connected');
     }
@@ -352,7 +321,7 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
 
   const handleFetchModels = async (): Promise<any[]> => {
     return new Promise((resolve, reject) => {
-      if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+      if (!ws || !ws.isOpen()) {
         reject(new Error('WebSocket not connected'));
         return;
       }
@@ -366,7 +335,7 @@ export const UnifiedLayout: React.FC<UnifiedLayoutProps> = ({ config, onConfigCh
         }
       }, 10000);
 
-      sendClientMessage(wsRef.current, { type: 'get_models' });
+      ws.send({ type: 'get_models' });
     });
   };
 
diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
index 55bd806..36d6fbb 100644
--- a/packages/cletus/src/browser/server.ts
+++ b/packages/cletus/src/browser/server.ts
@@ -430,11 +430,9 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
       switch (message.type) {
         case 'get_config':
           withConfig((config) => {
-            const configData = config.getData();
-
             sendMessage({
               type: 'config',
-              data: configData,
+              data: config.getData(),
             });
           });
           break;
diff --git a/packages/cletus/src/browser/websocket-types.ts b/packages/cletus/src/browser/websocket-types.ts
index 8e16128..1bab914 100644
--- a/packages/cletus/src/browser/websocket-types.ts
+++ b/packages/cletus/src/browser/websocket-types.ts
@@ -50,8 +50,9 @@ export type ServerMessage =
  */
 export interface TypedWebSocket {
   send(message: ClientMessage): void;
-  onMessage(handler: (message: ServerMessage) => void): void;
+  onMessage(handler: (message: ServerMessage) => void): () => void;
   close(): void;
+  isOpen(): boolean;
 }
 
 /**
@@ -72,14 +73,28 @@ export function createTypedWebSocket(url: string): TypedWebSocket {
 
   return {
     send(message: ClientMessage) {
-      ws.send(JSON.stringify(message));
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify(message));
+      } else {
+        console.error('WebSocket is not open. ReadyState:', ws.readyState);
+      }
     },
-    onMessage(handler: (message: ServerMessage) => void) {
+    onMessage(handler: (message: ServerMessage) => void): () => void {
       messageHandlers.push(handler);
+      // Return unsubscribe function
+      return () => {
+        const index = messageHandlers.indexOf(handler);
+        if (index > -1) {
+          messageHandlers.splice(index, 1);
+        }
+      };
     },
     close() {
       ws.close();
     },
+    isOpen() {
+      return ws.readyState === WebSocket.OPEN;
+    },
   };
 }
 

From cc6f6e31004bec486d8e4eb78160d02183b58473 Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Thu, 18 Dec 2025 19:22:30 -0500
Subject: [PATCH 22/27] Refactor WebSocketContext to use state for ws instance

Replaces useRef with useState for managing the WebSocket instance in WebSocketProvider. Updates context initialization and useWebSocket hook to improve type safety and error handling.
---
 .../cletus/src/browser/WebSocketContext.tsx   | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/cletus/src/browser/WebSocketContext.tsx b/packages/cletus/src/browser/WebSocketContext.tsx
index 06a6eda..0002b3e 100644
--- a/packages/cletus/src/browser/WebSocketContext.tsx
+++ b/packages/cletus/src/browser/WebSocketContext.tsx
@@ -6,14 +6,11 @@ interface WebSocketContextType {
   isConnected: boolean;
 }
 
-const WebSocketContext = createContext<WebSocketContextType>({
-  ws: null,
-  isConnected: false,
-});
+const WebSocketContext = createContext<WebSocketContextType | undefined>(undefined);
 
 export const useWebSocket = () => {
   const context = useContext(WebSocketContext);
-  if (!context.ws) {
+  if (context === undefined) {
     throw new Error('useWebSocket must be used within a WebSocketProvider');
   }
   return context;
@@ -24,20 +21,20 @@ interface WebSocketProviderProps {
 }
 
 export const WebSocketProvider: React.FC<WebSocketProviderProps> = ({ children }) => {
+  const [ws, setWs] = useState<TypedWebSocket | null>(null);
   const [isConnected, setIsConnected] = useState(false);
-  const wsRef = useRef<TypedWebSocket | null>(null);
 
   useEffect(() => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     const url = `${protocol}//${window.location.host}`;
 
     console.log('[WebSocketContext] Connecting to:', url);
-    const ws = createTypedWebSocket(url);
-    wsRef.current = ws;
+    const websocket = createTypedWebSocket(url);
+    setWs(websocket);
 
     // Wait for connection to open
     const checkConnection = setInterval(() => {
-      if (ws.isOpen()) {
+      if (websocket.isOpen()) {
         console.log('[WebSocketContext] Connected');
         setIsConnected(true);
         clearInterval(checkConnection);
@@ -48,14 +45,14 @@ export const WebSocketProvider: React.FC<WebSocketProviderProps> = ({ children }
     return () => {
       clearInterval(checkConnection);
       console.log('[WebSocketContext] Closing connection');
-      ws.close();
-      wsRef.current = null;
+      websocket.close();
+      setWs(null);
       setIsConnected(false);
     };
   }, []);
 
   return (
-    <WebSocketContext.Provider value={{ ws: wsRef.current, isConnected }}>
+    <WebSocketContext.Provider value={{ ws, isConnected }}>
       {children}
     </WebSocketContext.Provider>
   );

From 651f02853d09bf4295c64eb580b47446d9c35db6 Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Thu, 18 Dec 2025 20:26:11 -0500
Subject: [PATCH 23/27] Fix message handling and improve chat state updates

Refactors message creation to ensure consistent 'created' timestamps and corrects temporary message logic in MainPage. Improves chat state clearing on chat selection and prevents duplicate messages. Also updates renderer function signatures for better type safety.
---
 .../cletus/src/browser/operations/artist.tsx  |  5 ++--
 .../cletus/src/browser/operations/clerk.tsx   |  4 +--
 .../src/browser/operations/secretary.tsx      |  3 --
 .../cletus/src/browser/pages/MainPage.tsx     | 30 ++++++++++++++-----
 packages/cletus/src/browser/server.ts         | 12 ++------
 packages/cletus/src/chat.ts                   |  4 +--
 6 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/packages/cletus/src/browser/operations/artist.tsx b/packages/cletus/src/browser/operations/artist.tsx
index 1d5b9a9..5e01d5e 100644
--- a/packages/cletus/src/browser/operations/artist.tsx
+++ b/packages/cletus/src/browser/operations/artist.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { abbreviate, pluralize } from '../../shared';
 import { createRenderer } from './render';
 
@@ -9,7 +10,7 @@ const renderer = createRenderer({
 
 export const image_generate = renderer<'image_generate'>(
   (op) => `ImageGenerate("${abbreviate(op.input.prompt, 30)}", n=${op.input.n || 1})`,
-  (op) => {
+  (op): string | React.ReactNode | null => {
     if (op.output) {
       const count = op.output.count;
       // For browser, we can show the image inline if we have URLs
@@ -33,7 +34,7 @@ export const image_generate = renderer<'image_generate'>(
 
 export const image_edit = renderer<'image_edit'>(
   (op) => `ImageEdit("${op.input.path}", "${abbreviate(op.input.prompt, 20)}")`,
-  (op) => {
+  (op): string | React.ReactNode | null => {
     if (op.output) {
       // For browser, we can show the edited image inline if we have a URL
       if (op.output.editedLink) {
diff --git a/packages/cletus/src/browser/operations/clerk.tsx b/packages/cletus/src/browser/operations/clerk.tsx
index ee2fee0..3efdc7f 100644
--- a/packages/cletus/src/browser/operations/clerk.tsx
+++ b/packages/cletus/src/browser/operations/clerk.tsx
@@ -142,7 +142,7 @@ export const file_read = renderer<'file_read'>(
 
 export const file_edit = renderer<'file_edit'>(
   (op) => `Edit("${paginateText(op.input.path, 100, -100)}")`,
-  (op) => {
+  (op): string | React.ReactNode | null => {
     if (op.cache?.changed === false) {
       return 'No changes';
     }
@@ -307,7 +307,7 @@ const processShellOutput = (stdout: string, stderr: string) => {
 
 export const shell = renderer<'shell'>(
   (op) => `Shell("${op.input.command}")`,
-  (op) => {
+  (op): string | React.ReactNode | null => {
     if (!op.output) {
       return 'Executing...';
     }
diff --git a/packages/cletus/src/browser/operations/secretary.tsx b/packages/cletus/src/browser/operations/secretary.tsx
index f193bd6..831d324 100644
--- a/packages/cletus/src/browser/operations/secretary.tsx
+++ b/packages/cletus/src/browser/operations/secretary.tsx
@@ -1,7 +1,4 @@
-import React from 'react';
-import { Operation } from '../../schemas';
 import { abbreviate, pluralize } from '../../shared';
-import { BaseOperationDisplay } from './BaseOperationDisplay';
 import { createRenderer } from './render';
 
 const renderer = createRenderer({
diff --git a/packages/cletus/src/browser/pages/MainPage.tsx b/packages/cletus/src/browser/pages/MainPage.tsx
index 7c6224a..8b7bfb7 100644
--- a/packages/cletus/src/browser/pages/MainPage.tsx
+++ b/packages/cletus/src/browser/pages/MainPage.tsx
@@ -108,11 +108,12 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onConfigChange }) =>
         break;
 
       case 'message_added':
-        // Clear temporary user message when real message is added
-        setTemporaryUserMessage(null);
-        if (ws && selectedChatId) {
-          ws.send({ type: 'get_messages', data: { chatId: selectedChatId } });
+        // Clear temporary user message when real user message is added
+        if (message.data.message.role === 'user') {
+          setTemporaryUserMessage(null);
         }
+        // Add the message to the messages array
+        setMessages(prev => [...prev, message.data.message]);
         break;
 
       case 'pending_update':
@@ -139,7 +140,12 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onConfigChange }) =>
         setIsProcessing(false);
         setStatus('');
         if (message.data.message) {
-          setMessages(prev => [...prev, message.data.message]);
+          setMessages(prev => {
+            if (!prev.find(m => m.created === message.data.message.created)) {
+              return [...prev, message.data.message];
+            }
+            return prev;
+          });
         }
         break;
 
@@ -189,6 +195,14 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onConfigChange }) =>
         if (message.data.chatId) {
           pendingChatSelectRef.current = message.data.chatId;
         }
+        
+        // Clear data immediately, once config with new chat is refreshed it will be populated.
+        setMessages([]);
+        setPendingMessage(null);
+        setTemporaryUserMessage(null);
+        setTemporaryAssistantMessage(null);
+        setStatus('');
+
         // Refresh config - the effect will handle selection
         onConfigChange();
         break;
@@ -243,11 +257,13 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onConfigChange }) =>
   const handleSendMessage = (content: MessageContent[]) => {
     if (!selectedChatId) return;
 
+    const now = Date.now();
+
     // Create temporary user message for immediate display
     const tempUserMsg: Message = {
       role: 'user',
       content,
-      created: Date.now(),
+      created: now-2,
     };
     setTemporaryUserMessage(tempUserMsg);
 
@@ -255,7 +271,7 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onConfigChange }) =>
     const tempAssistantMsg: Message = {
       role: 'assistant',
       content: [],
-      created: Date.now() + 1,
+      created: now-1,
     };
     setTemporaryAssistantMessage(tempAssistantMsg);
 
diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
index 36d6fbb..8639ed7 100644
--- a/packages/cletus/src/browser/server.ts
+++ b/packages/cletus/src/browser/server.ts
@@ -524,15 +524,16 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
             }
 
             // Add user message with proper typing
-            const userMessage: Omit<Message, 'created'> = {
+            const userMessage: Message = {
               role: 'user',
               content: content as MessageContent[],
+              created: Date.now(),
             };
             await chatFile.addMessage(userMessage);
 
             sendMessage({
               type: 'message_added',
-              data: { message: { ...userMessage, created: Date.now() } as Message },
+              data: { message: userMessage },
             });
 
             // Run the chat
@@ -727,13 +728,6 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
               },
             );
 
-            // Mark approved operations as 'doing' immediately
-            for (const idx of approved) {
-              if (operations[idx]) {
-                operations[idx].status = 'doing';
-              }
-            }
-
             // Mark rejected operations
             for (const idx of rejected) {
               if (operations[idx]) {
diff --git a/packages/cletus/src/chat.ts b/packages/cletus/src/chat.ts
index 87b5ef9..6f37537 100644
--- a/packages/cletus/src/chat.ts
+++ b/packages/cletus/src/chat.ts
@@ -29,11 +29,11 @@ export class ChatFile extends JsonFile<ChatMessages> {
   /**
    * Add a message to the chat
    */
-  async addMessage(message: Omit<Message, 'created'>): Promise<void> {
+  async addMessage(message: Omit<Message, 'created'> & { created?: number }): Promise<void> {
     await this.save((chat) => {
       chat.messages.push({
-        ...message,
         created: Date.now(),
+        ...message,
       });
     });
   }

From c9c818858f8c777b0b4776a7d0373693ce9e5e5a Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Thu, 18 Dec 2025 20:35:17 -0500
Subject: [PATCH 24/27] Add image viewer and local file serving support

Introduces an ImageViewer component for zooming, panning, and downloading images, and updates image rendering in MessageItem and artist operations to use ClickableImage. Adds a /file route to the browser server for serving local files, enabling secure access to images and other assets. Also increases summary display height in BaseOperationDisplay for improved readability.
---
 .../src/browser/components/ImageViewer.tsx    | 204 ++++++++++++++++++
 .../src/browser/components/MessageItem.tsx    |   8 +
 .../operations/BaseOperationDisplay.tsx       |   2 +-
 .../cletus/src/browser/operations/artist.tsx  |  14 +-
 packages/cletus/src/browser/server.ts         |  79 +++++++
 5 files changed, 304 insertions(+), 3 deletions(-)
 create mode 100644 packages/cletus/src/browser/components/ImageViewer.tsx

diff --git a/packages/cletus/src/browser/components/ImageViewer.tsx b/packages/cletus/src/browser/components/ImageViewer.tsx
new file mode 100644
index 0000000..8dcd7af
--- /dev/null
+++ b/packages/cletus/src/browser/components/ImageViewer.tsx
@@ -0,0 +1,204 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { X, Download, ZoomIn, ZoomOut, Maximize2 } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+interface ImageViewerProps {
+  src: string;
+  alt?: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const ImageViewer: React.FC<ImageViewerProps> = ({ src, alt, isOpen, onClose }) => {
+  const [scale, setScale] = useState(1);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const imageRef = useRef<HTMLImageElement>(null);
+
+  // Reset state when opening
+  useEffect(() => {
+    if (isOpen) {
+      setScale(1);
+      setPosition({ x: 0, y: 0 });
+      setIsDragging(false);
+    }
+  }, [isOpen]);
+
+  // Handle escape key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+    window.addEventListener('keydown', handleEscape);
+    return () => window.removeEventListener('keydown', handleEscape);
+  }, [isOpen, onClose]);
+
+  // Handle wheel zoom
+  const handleWheel = (e: React.WheelEvent) => {
+    e.preventDefault();
+    const delta = e.deltaY > 0 ? -0.1 : 0.1;
+    setScale((prev) => Math.max(0.5, Math.min(5, prev + delta)));
+  };
+
+  // Handle mouse drag
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (scale > 1) {
+      setIsDragging(true);
+      setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
+    }
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (isDragging) {
+      setPosition({ x: e.clientX - dragStart.x, y: e.clientY - dragStart.y });
+    }
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  // Zoom controls
+  const zoomIn = () => setScale((prev) => Math.min(5, prev + 0.25));
+  const zoomOut = () => setScale((prev) => Math.max(0.5, prev - 0.25));
+  const resetZoom = () => {
+    setScale(1);
+    setPosition({ x: 0, y: 0 });
+  };
+
+  // Download image
+  const downloadImage = async () => {
+    try {
+      const response = await fetch(src);
+      const blob = await response.blob();
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      // Extract filename from src or use default
+      const filename = src.split('/').pop() || 'image.png';
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Failed to download image:', error);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-50 bg-black/95 flex items-center justify-center"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) {
+          onClose();
+        }
+      }}
+    >
+      {/* Controls */}
+      <div className="absolute top-4 right-4 flex gap-2 z-10">
+        <button
+          onClick={zoomOut}
+          className="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors"
+          title="Zoom Out"
+        >
+          <ZoomOut className="w-5 h-5 text-white" />
+        </button>
+        <button
+          onClick={zoomIn}
+          className="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors"
+          title="Zoom In"
+        >
+          <ZoomIn className="w-5 h-5 text-white" />
+        </button>
+        <button
+          onClick={resetZoom}
+          className="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors"
+          title="Reset Zoom"
+        >
+          <Maximize2 className="w-5 h-5 text-white" />
+        </button>
+        <button
+          onClick={downloadImage}
+          className="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors"
+          title="Download"
+        >
+          <Download className="w-5 h-5 text-white" />
+        </button>
+        <button
+          onClick={onClose}
+          className="p-2 bg-white/10 hover:bg-white/20 rounded-lg transition-colors"
+          title="Close (ESC)"
+        >
+          <X className="w-5 h-5 text-white" />
+        </button>
+      </div>
+
+      {/* Zoom indicator */}
+      <div className="absolute top-4 left-4 px-3 py-1 bg-white/10 rounded-lg text-white text-sm">
+        {Math.round(scale * 100)}%
+      </div>
+
+      {/* Image */}
+      <div
+        className={cn(
+          'relative max-w-[90vw] max-h-[90vh] overflow-hidden',
+          isDragging ? 'cursor-grabbing' : scale > 1 ? 'cursor-grab' : 'cursor-default'
+        )}
+        onWheel={handleWheel}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseUp}
+      >
+        <img
+          ref={imageRef}
+          src={src}
+          alt={alt}
+          className="select-none pointer-events-none"
+          style={{
+            transform: `scale(${scale}) translate(${position.x / scale}px, ${position.y / scale}px)`,
+            transition: isDragging ? 'none' : 'transform 0.2s ease-out',
+            maxWidth: '90vw',
+            maxHeight: '90vh',
+            objectFit: 'contain',
+          }}
+          draggable={false}
+        />
+      </div>
+
+      {/* Instructions */}
+      <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 px-4 py-2 bg-white/10 rounded-lg text-white text-xs text-center">
+        Scroll to zoom • Drag to pan • ESC or click outside to close
+      </div>
+    </div>
+  );
+};
+
+interface ClickableImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  src: string;
+  alt?: string;
+  className?: string;
+}
+
+export const ClickableImage: React.FC<ClickableImageProps> = ({ src, alt, className, ...props }) => {
+  const [isViewerOpen, setIsViewerOpen] = useState(false);
+
+  return (
+    <>
+      <img
+        src={src}
+        alt={alt}
+        className={cn('cursor-pointer hover:opacity-90 transition-opacity', className)}
+        onClick={() => setIsViewerOpen(true)}
+        {...props}
+      />
+      <ImageViewer src={src} alt={alt} isOpen={isViewerOpen} onClose={() => setIsViewerOpen(false)} />
+    </>
+  );
+};
diff --git a/packages/cletus/src/browser/components/MessageItem.tsx b/packages/cletus/src/browser/components/MessageItem.tsx
index bbf9880..4101a49 100644
--- a/packages/cletus/src/browser/components/MessageItem.tsx
+++ b/packages/cletus/src/browser/components/MessageItem.tsx
@@ -5,6 +5,7 @@ import remarkGfm from 'remark-gfm';
 import { OperationDisplay } from '../operations';
 import { TypingIndicator } from './TypingIndicator';
 import { cn } from '../lib/utils';
+import { ClickableImage } from './ImageViewer';
 import type { Message } from '../../schemas';
 
 interface MessageItemProps {
@@ -145,6 +146,13 @@ export const MessageItem: React.FC<MessageItemProps> = ({
                         {children}
                       </a>
                     ),
+                    img: ({ src, alt, ...props }: any) => {
+                      // Transform local file paths to use the /file route
+                      const imageSrc = src && !src.startsWith('http://') && !src.startsWith('https://') && !src.startsWith('data:')
+                        ? `/file?path=${encodeURIComponent(src)}`
+                        : src;
+                      return <ClickableImage src={imageSrc} alt={alt} className="max-w-full rounded" {...props} />;
+                    },
                   }}
                 >
                   {item.content}
diff --git a/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx b/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
index ca7b544..6385501 100644
--- a/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
+++ b/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
@@ -402,7 +402,7 @@ export const BaseOperationDisplay: React.FC<BaseOperationDisplayProps> = ({
 
       {/* Summary */}
       {displaySummary && (
-        <div className={cn('ml-6 text-sm mb-2 whitespace-pre-wrap max-h-[5rem] overflow-y-auto', operation.error ? 'text-red-400' : 'text-muted-foreground')}>
+        <div className={cn('ml-6 text-sm mb-2 whitespace-pre-wrap max-h-[8rem] overflow-y-auto', operation.error ? 'text-red-400' : 'text-muted-foreground')}>
           {typeof displaySummary === 'string' ? (
             <>
               <span className="text-foreground">→ </span>
diff --git a/packages/cletus/src/browser/operations/artist.tsx b/packages/cletus/src/browser/operations/artist.tsx
index 5e01d5e..2330b38 100644
--- a/packages/cletus/src/browser/operations/artist.tsx
+++ b/packages/cletus/src/browser/operations/artist.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { abbreviate, pluralize } from '../../shared';
 import { createRenderer } from './render';
+import { ClickableImage } from '../components/ImageViewer';
 
 const renderer = createRenderer({
   borderColor: "border-neon-pink/30",
@@ -20,7 +21,12 @@ export const image_generate = renderer<'image_generate'>(
             <div className="text-sm mb-2">Generated {count} image{count !== 1 ? 's' : ''}</div>
             <div className="flex gap-2 flex-wrap">
               {op.output.images.map((img: string, i: number) => (
-                <img key={i} src={img} alt="Generated" className="max-w-sm rounded border border-neon-pink/30" />
+                <ClickableImage
+                  key={i}
+                  src={`/file?path=${encodeURIComponent(img)}`}
+                  alt="Generated"
+                  className="max-w-sm rounded border border-neon-pink/30"
+                />
               ))}
             </div>
           </div>
@@ -41,7 +47,11 @@ export const image_edit = renderer<'image_edit'>(
         return (
           <div className="ml-6 mt-2">
             <div className="text-sm mb-2">Edited image saved</div>
-            <img src={op.output.editedLink} alt="Edited" className="max-w-sm rounded border border-neon-pink/30" />
+            <ClickableImage
+              src={`/file?path=${encodeURIComponent(op.output.editedLink)}`}
+              alt="Edited"
+              className="max-w-sm rounded border border-neon-pink/30"
+            />
           </div>
         );
       }
diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
index 8639ed7..cfb18be 100644
--- a/packages/cletus/src/browser/server.ts
+++ b/packages/cletus/src/browser/server.ts
@@ -69,6 +69,12 @@ export async function startBrowserServer(port: number = 3000): Promise<void> {
     const url = req.url || '/';
 
     try {
+      // Handle file serving route
+      if (url.startsWith('/file?')) {
+        await serveLocalFile(url, res);
+        return;
+      }
+
       // Serve static files only
       await serveStaticFile(url, res);
     } catch (error) {
@@ -902,6 +908,79 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
   });
 }
 
+async function serveLocalFile(url: string, res: http.ServerResponse): Promise<void> {
+  try {
+    // Parse query string to get path parameter
+    const queryStart = url.indexOf('?');
+    if (queryStart === -1) {
+      res.writeHead(400);
+      res.end('Bad request: missing query string');
+      return;
+    }
+
+    const queryString = url.slice(queryStart + 1);
+    const params = new URLSearchParams(queryString);
+    const encodedPath = params.get('path');
+
+    if (!encodedPath) {
+      res.writeHead(400);
+      res.end('Bad request: missing path parameter');
+      return;
+    }
+
+    // Decode the path
+    const filePath = decodeURIComponent(encodedPath);
+
+    // Resolve to absolute path
+    const absolutePath = path.isAbsolute(filePath) ? filePath : path.resolve(process.cwd(), filePath);
+
+    // Read the file
+    const content = await fs.readFile(absolutePath);
+
+    // Determine content type based on file extension
+    const ext = path.extname(absolutePath).toLowerCase();
+    const contentTypes: Record<string, string> = {
+      '.html': 'text/html; charset=utf-8',
+      '.htm': 'text/html; charset=utf-8',
+      '.css': 'text/css; charset=utf-8',
+      '.js': 'application/javascript; charset=utf-8',
+      '.json': 'application/json',
+      '.xml': 'application/xml',
+      '.txt': 'text/plain; charset=utf-8',
+      '.md': 'text/markdown; charset=utf-8',
+      // Images
+      '.png': 'image/png',
+      '.jpg': 'image/jpeg',
+      '.jpeg': 'image/jpeg',
+      '.gif': 'image/gif',
+      '.webp': 'image/webp',
+      '.svg': 'image/svg+xml',
+      '.ico': 'image/x-icon',
+      '.bmp': 'image/bmp',
+      // Other
+      '.pdf': 'application/pdf',
+      '.zip': 'application/zip',
+    };
+    const contentType = contentTypes[ext] || 'application/octet-stream';
+
+    res.setHeader('Content-Type', contentType);
+    res.writeHead(200);
+    res.end(content);
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+      res.writeHead(404);
+      res.end('File not found');
+    } else if ((error as NodeJS.ErrnoException).code === 'EACCES') {
+      res.writeHead(403);
+      res.end('Access denied');
+    } else {
+      console.error('Error serving file:', error);
+      res.writeHead(500);
+      res.end('Internal server error');
+    }
+  }
+}
+
 async function serveStaticFile(url: string, res: http.ServerResponse): Promise<void> {
   // Default to index.html
   if (url === '/' || !url.includes('.')) {

From 2866e57507ec3fe3b23a9073446e7f3751005368 Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Fri, 19 Dec 2025 21:21:04 -0500
Subject: [PATCH 25/27] Implement chat-scoped operation and broadcast
 management

Introduces ChatOperationManager and BroadcastManager to manage per-chat operation state and broadcast server events to all clients watching a chat. Adds ConnectionRegistry for tracking client subscriptions to chats, enabling real-time multi-client synchronization. Refactors WebSocket server and client logic to support chat subscription, operation state sync, and robust cancellation, and updates message types and handlers for chat-scoped events. Also improves chat creation UX and tool type safety.
---
 packages/ai/src/ai.ts                         |  83 +++--
 packages/ai/src/types.ts                      |  17 ++
 packages/cletus/src/agents/chat-agent.ts      |  11 +-
 packages/cletus/src/ai.ts                     |   6 +-
 packages/cletus/src/browser/app.tsx           |   1 -
 .../cletus/src/browser/broadcast-manager.ts   | 120 ++++++++
 .../src/browser/chat-operation-manager.ts     | 133 ++++++++
 .../src/browser/components/ChatSidebar.tsx    |   6 +-
 .../cletus/src/browser/connection-registry.ts | 119 ++++++++
 .../cletus/src/browser/pages/MainPage.tsx     |  94 ++++--
 packages/cletus/src/browser/server.ts         | 287 ++++++++++--------
 .../cletus/src/browser/websocket-types.ts     |  31 +-
 packages/cletus/src/tool-registry.ts          |  13 +-
 13 files changed, 721 insertions(+), 200 deletions(-)
 create mode 100644 packages/cletus/src/browser/broadcast-manager.ts
 create mode 100644 packages/cletus/src/browser/chat-operation-manager.ts
 create mode 100644 packages/cletus/src/browser/connection-registry.ts

diff --git a/packages/ai/src/ai.ts b/packages/ai/src/ai.ts
index d5259f0..01f7d87 100644
--- a/packages/ai/src/ai.ts
+++ b/packages/ai/src/ai.ts
@@ -5,7 +5,7 @@
  * Provides type-safe, scoped access to AI capabilities with hooks and context injection.
  */
 
-import { accumulateUsage, Agent, Events, Extend, FnResolved, MessageContentType, Prompt, resolveFn, RetoolResult, Tool, ToolCompatible, Tuple } from '@aeye/core';
+import { accumulateUsage, Agent, Events, Extend, Fn, FnResolved, MessageContentType, Prompt, resolveFn, RetoolResult, Tool, ToolCompatible, Tuple } from '@aeye/core';
 import { ChatAPI } from './apis/chat';
 import { EmbedAPI } from './apis/embed';
 import { ImageAPI } from './apis/image';
@@ -48,6 +48,57 @@ import type {
   Usage
 } from './types';
 
+// Helper types for AI components
+
+type AIToolInput<
+  T extends AIBaseTypes,
+  TName extends string = string,
+  TParams extends object = {},
+  TOutput = unknown,
+  TRefs extends Tuple<ComponentFor<T>> = []
+> = Omit<ToolInput<
+  AIContext<T>,
+  AIMetadata<T>,
+  TName,
+  TParams,
+  TOutput,
+  // @ts-ignore
+  TRefs
+>, 'types'>;
+
+type AIPromptInput<
+  T extends AIBaseTypes,
+  TName extends string = string,
+  TInput extends object = {},
+  TOutput extends object | string = string,
+  TTools extends Tuple<ToolCompatible<AIContextRequired<T>, AIMetadataRequired<T>>> = []
+> = Omit<PromptInput<
+  AIContext<T>,
+  AIMetadata<T>,
+  TName,
+  TInput,
+  TOutput,
+  // @ts-ignore
+  TTools
+>, 'types' | 'retool'> & {
+  retool?: Fn<RetoolResult<AIContextRequired<T>, AIMetadataRequired<T>, TTools>, [TInput | undefined, Context<T>]>;
+};
+
+type AIAgentInput<
+  T extends AIBaseTypes,
+  TName extends string = string,
+  TInput extends object = {},
+  TOutput = unknown,
+  TRefs extends Tuple<ComponentFor<T>> = []
+> = Omit<AgentInput<
+  AIContext<T>,
+  AIMetadata<T>,
+  TName,
+  TInput,
+  TOutput,
+  // @ts-ignore
+  TRefs
+>, 'types'>;
 
 /**
  * AI Class
@@ -728,15 +779,7 @@ export class AI<T extends AIBaseTypes> {
     TOutput extends object | string = string,
     TTools extends Tuple<ToolCompatible<AIContextRequired<T>, AIMetadataRequired<T>>> = []
   >(
-    options: Omit<PromptInput<
-      AIContext<T>,
-      AIMetadata<T>,
-      TName,
-      TInput,
-      TOutput,
-      // @ts-ignore
-      TTools
-    >, 'types'>
+    options: AIPromptInput<T, TName, TInput, TOutput, TTools>
   ) {
     const { input, schema, config, reconfig, retool, validate, applicable, metadataFn, ...rest } = options;
 
@@ -829,15 +872,7 @@ export class AI<T extends AIBaseTypes> {
     TOutput = unknown,
     TRefs extends Tuple<ComponentFor<T>> = []
   >(
-    options: Omit<ToolInput<
-      AIContext<T>,
-      AIMetadata<T>,
-      TName,
-      TParams,
-      TOutput,
-      // @ts-ignore
-      TRefs
-    >, 'types'>
+    options: AIToolInput<T, TName, TParams, TOutput, TRefs>
   ) {
     const { input, schema, call, validate, applicable, ...rest } = options;
 
@@ -900,15 +935,7 @@ export class AI<T extends AIBaseTypes> {
     TOutput = unknown,
     TRefs extends Tuple<ComponentFor<T>> = []
   >(
-    options: Omit<AgentInput<
-      AIContext<T>,
-      AIMetadata<T>,
-      TName,
-      TInput,
-      TOutput,
-      // @ts-ignore
-      TRefs
-    >, 'types'>
+    options: AIAgentInput<T, TName, TInput, TOutput, TRefs>
   ) {
     const { call, applicable, metadataFn, ...rest } = options;
 
diff --git a/packages/ai/src/types.ts b/packages/ai/src/types.ts
index 0b922b9..2d5a8e7 100644
--- a/packages/ai/src/types.ts
+++ b/packages/ai/src/types.ts
@@ -28,6 +28,7 @@ import type {
   Response,
   Simplify,
   Streamer,
+  ToolCompatible,
   ToolInput,
   Usage,
 } from '@aeye/core';
@@ -549,6 +550,14 @@ export type Context<T extends AIBaseTypes> = CoreContext<
  */
 export type ContextInfer<A> = A extends AI<infer T> ? Context<T> : never;
 
+/**
+ * Infers the component context type with required fields from an AI instance
+ */
+export type ComponentInfer<A> = A extends AI<infer T> ? ComponentCompatible<
+  AIContextRequired<T>,
+  AIMetadataRequired<T>
+> : never;
+
 /**
  * Component type for AI instance
  */
@@ -557,6 +566,14 @@ export type ComponentFor<T extends AIBaseTypes> = ComponentCompatible<
   AIMetadataRequired<T>
 >;
 
+/**
+ * Tool type for AI instance
+ */
+export type ToolInfer<A> = A extends AI<infer T> ? ToolCompatible<
+  AIContextRequired<T>,
+  AIMetadataRequired<T>
+> : never;
+
 // ============================================================================
 // Request/Response Types for Capabilities
 // ============================================================================
diff --git a/packages/cletus/src/agents/chat-agent.ts b/packages/cletus/src/agents/chat-agent.ts
index 76afa56..5142e1a 100644
--- a/packages/cletus/src/agents/chat-agent.ts
+++ b/packages/cletus/src/agents/chat-agent.ts
@@ -1,5 +1,5 @@
 import { AnyTool, Tuple } from '@aeye/core';
-import type { CletusAI, CletusAIContext } from '../ai';
+import type { CletusAI, CletusAIContext, CletusTool } from '../ai';
 import { ADAPTIVE_TOOLING } from '../constants';
 import { Operations } from '../operations/types';
 import {
@@ -27,7 +27,7 @@ async function initializeToolRegistry(ai: CletusAI, toolsets: ReturnType<typeof
   } = toolsets;
 
   const ctx = await ai.buildContext({});
-  const instruct = (tool: AnyTool) => getToolInstructions(tool, ctx);
+  const instruct = (tool: CletusTool) => getToolInstructions(tool, ctx);
 
     // Register toolsets
   await toolRegistry.registerToolset('planner', plannerTools, instruct);
@@ -219,14 +219,15 @@ Tools:
 </rules>
 
 <importantRules>
-- Don't present the results of an operation in <input> or <output> tags - those are only for your internal processing.
-- Past tool call results will be formatted in <input>, <analysis>, and <output> tags automatically. This is not a formatting you need to do yourself - you need to make tool calls to get actual results.
+- Assistant messages with <input> & <analysis> tags are preliminary tool outputs that is awaiting user approval or rejection before producing output. Do NOT treat these as final outputs. You will be notified when the user approves or rejects them.
+- Assistant messages with <output> tags are final results from approved operations. These can be presented to the user directly.
+- Don't present anything in <input>, <analysis>, or <output> tags - those are produced by the Cletus system and not by you even though they are marked as Assistant messages.
 - Don't ask for permission to perform operations - if you need to do something, just do it. The user will be asked for approval automatically if needed.
 - Todos are exclusively for Cletus's internal management of user requests. They are only referred to as todos - anything else should be assumed to be a separate data type.
 - If you've executed ANY tools - DO NOT ask a question at the end of your response. You are either going to automatically continue your work OR the user will respond next. NEVER ask a question after executing tools. Only for clarifications.
 </importantRules>
 `,
-    tools: toolRegistry.getAllTools().map(t => t.tool) as Tuple<AnyTool>,
+    tools: toolRegistry.getAllTools().map(t => t.tool) as Tuple<CletusTool>,
     // Dynamic tools based on adaptive selection using retool
     retool: async (_, ctx) => {
       const activeTools = await getActiveTools(ctx);
diff --git a/packages/cletus/src/ai.ts b/packages/cletus/src/ai.ts
index ff12965..b8ce3ac 100644
--- a/packages/cletus/src/ai.ts
+++ b/packages/cletus/src/ai.ts
@@ -1,4 +1,4 @@
-import { AI, ContextInfer } from '@aeye/ai';
+import { AI, ContextInfer, ToolInfer } from '@aeye/ai';
 import { models, replicateTransformers } from '@aeye/models';
 import { OpenAIProvider } from '@aeye/openai';
 import { OpenRouterProvider } from '@aeye/openrouter';
@@ -45,11 +45,12 @@ export interface CletusContext {
  * Cletus AI Metadata
  */
 export interface CletusMetadata {
-  // Model selection metadata can go here
   /** Whether this tool should always be visible/available regardless of toolset or adaptive selection */
   alwaysVisible?: boolean;
   /** Whether this tool should be included in the default tool selection when no user messages exist yet */
   defaultVisible?: boolean;
+  /** Whether this tool should be included based on which client is running Cletus */
+  onlyClient?: 'browser' | 'cli';
 }
 
 /**
@@ -280,6 +281,7 @@ export function createCletusAI(configFile: ConfigFile) {
 
 export type CletusAI = ReturnType<typeof createCletusAI>;
 export type CletusAIContext = ContextInfer<CletusAI>;
+export type CletusTool = ToolInfer<CletusAI>;
 
 // Global tool properties - useful for debugging
 export const globalToolProperties = {
diff --git a/packages/cletus/src/browser/app.tsx b/packages/cletus/src/browser/app.tsx
index e0db577..a438831 100644
--- a/packages/cletus/src/browser/app.tsx
+++ b/packages/cletus/src/browser/app.tsx
@@ -81,7 +81,6 @@ const AppContent: React.FC = () => {
     return (
       <MainPage
         config={config}
-        onConfigChange={reloadConfig}
       />
     );
   }
diff --git a/packages/cletus/src/browser/broadcast-manager.ts b/packages/cletus/src/browser/broadcast-manager.ts
new file mode 100644
index 0000000..e6a4ded
--- /dev/null
+++ b/packages/cletus/src/browser/broadcast-manager.ts
@@ -0,0 +1,120 @@
+import type { WebSocket } from 'ws';
+import type { ServerMessage } from './websocket-types';
+import type { OrchestratorEvent } from '../agents/chat-orchestrator';
+import { ConnectionRegistry } from './connection-registry';
+import { ChatOperationManager } from './chat-operation-manager';
+
+/**
+ * Centralized message broadcasting with chat-scoped routing.
+ *
+ * Handles sending messages to specific clients or broadcasting to all clients
+ * watching a particular chat.
+ */
+export class BroadcastManager {
+  constructor(
+    private registry: ConnectionRegistry,
+    private operationManager: ChatOperationManager
+  ) {}
+
+  /**
+   * Broadcast a message to all clients currently subscribed to a specific chat.
+   */
+  broadcastToChat(chatId: string, message: ServerMessage): void {
+    const clients = this.registry.getClientsForChat(chatId);
+    const messageStr = JSON.stringify(message);
+
+    for (const ws of clients) {
+      if (ws.readyState === 1) { // WebSocket.OPEN = 1
+        ws.send(messageStr);
+      }
+    }
+  }
+
+  /**
+   * Send a message to a specific connection.
+   */
+  sendToConnection(connectionId: string, message: ServerMessage): void {
+    const connection = this.registry.getConnection(connectionId);
+    if (!connection) return;
+
+    if (connection.ws.readyState === 1) { // WebSocket.OPEN = 1
+      connection.ws.send(JSON.stringify(message));
+    }
+  }
+
+  /**
+   * Convert an orchestrator event to a server message and broadcast to all
+   * clients watching the chat.
+   */
+  broadcastOperationEvent(chatId: string, event: OrchestratorEvent): void {
+    switch (event.type) {
+      case 'pendingUpdate':
+        // Update operation manager state
+        this.operationManager.updatePendingMessage(chatId, event.pending);
+
+        this.broadcastToChat(chatId, {
+          type: 'pending_update',
+          data: { chatId, pending: event.pending },
+        });
+        break;
+
+      case 'update':
+        this.broadcastToChat(chatId, {
+          type: 'message_updated',
+          data: { chatId, message: event.message },
+        });
+        break;
+
+      case 'status':
+        this.broadcastToChat(chatId, {
+          type: 'status_update',
+          data: { chatId, status: event.status },
+        });
+        break;
+
+      case 'usage':
+        this.broadcastToChat(chatId, {
+          type: 'usage_update',
+          data: {
+            chatId,
+            accumulated: event.accumulated,
+            accumulatedCost: event.accumulatedCost,
+            current: event.current,
+          },
+        });
+        break;
+
+      case 'complete':
+        this.broadcastToChat(chatId, {
+          type: 'response_complete',
+          data: { chatId, message: event.message },
+        });
+        break;
+
+      case 'error':
+        this.broadcastToChat(chatId, {
+          type: 'error',
+          data: { chatId, message: event.error },
+        });
+        break;
+    }
+  }
+
+  /**
+   * Send the current operation state for a chat to a specific connection.
+   * Used when a client subscribes to a chat.
+   */
+  sendOperationState(connectionId: string, chatId: string): void {
+    const state = this.operationManager.getOperationState(chatId);
+
+    this.sendToConnection(connectionId, {
+      type: 'operation_state',
+      data: {
+        chatId,
+        status: state?.status || 'idle',
+        pendingMessage: state?.pendingMessage || null,
+        startTime: state?.startTime || null,
+      },
+    });
+  }
+}
diff --git a/packages/cletus/src/browser/chat-operation-manager.ts b/packages/cletus/src/browser/chat-operation-manager.ts
new file mode 100644
index 0000000..653b586
--- /dev/null
+++ b/packages/cletus/src/browser/chat-operation-manager.ts
@@ -0,0 +1,133 @@
+import type { Message } from '../schemas';
+
+/**
+ * Represents the state of an operation for a specific chat.
+ */
+export interface ChatOperationState {
+  chatId: string;
+  abortController: AbortController;
+  status: 'idle' | 'processing' | 'waiting_approval';
+  startTime: number;
+  lastActivity: number;
+  pendingMessage: Message | null;
+}
+
+/**
+ * Manages per-chat operation state independently of WebSocket connections.
+ *
+ * This allows operations to persist even when clients disconnect, and enables
+ * multiple clients to watch the same chat's operations in real-time.
+ */
+export class ChatOperationManager {
+  private operations: Map<string, ChatOperationState> = new Map();
+  private readonly CLEANUP_TIMEOUT_MS = 60 * 60 * 1000; // 1 hour
+
+  /**
+   * Start a new operation for a chat. Throws if an operation is already in progress.
+   */
+  startOperation(chatId: string): AbortController {
+    const existing = this.operations.get(chatId);
+    if (existing && existing.status === 'processing') {
+      throw new Error(`Chat ${chatId} already has an operation in progress`);
+    }
+
+    const abortController = new AbortController();
+    const state: ChatOperationState = {
+      chatId,
+      abortController,
+      status: 'processing',
+      startTime: Date.now(),
+      lastActivity: Date.now(),
+      pendingMessage: null,
+    };
+
+    this.operations.set(chatId, state);
+    return abortController;
+  }
+
+  /**
+   * Cancel an ongoing operation for a chat. Idempotent - safe to call multiple times.
+   */
+  cancelOperation(chatId: string): void {
+    const state = this.operations.get(chatId);
+    if (!state) return;
+
+    state.abortController.abort();
+    state.status = 'idle';
+    state.lastActivity = Date.now();
+  }
+
+  /**
+   * Mark an operation as complete. Should be called when operation finishes successfully or with error.
+   */
+  completeOperation(chatId: string): void {
+    const state = this.operations.get(chatId);
+    if (!state) return;
+
+    state.status = 'idle';
+    state.lastActivity = Date.now();
+  }
+
+  /**
+   * Update the status of an operation (e.g., to 'waiting_approval').
+   */
+  updateStatus(chatId: string, status: ChatOperationState['status']): void {
+    const state = this.operations.get(chatId);
+    if (!state) return;
+
+    state.status = status;
+    state.lastActivity = Date.now();
+  }
+
+  /**
+   * Update the pending message for an operation.
+   */
+  updatePendingMessage(chatId: string, message: Message | null): void {
+    const state = this.operations.get(chatId);
+    if (!state) return;
+
+    state.pendingMessage = message;
+    state.lastActivity = Date.now();
+  }
+
+  /**
+   * Get the current operation state for a chat. Returns null if no operation exists.
+   */
+  getOperationState(chatId: string): ChatOperationState | null {
+    return this.operations.get(chatId) || null;
+  }
+
+  /**
+   * Get all active chat IDs (any status).
+   */
+  getActiveChatIds(): string[] {
+    return Array.from(this.operations.keys());
+  }
+
+  /**
+   * Clean up old completed operations to prevent memory leaks.
+   * Removes operations that have been idle for longer than CLEANUP_TIMEOUT_MS.
+   */
+  cleanup(): void {
+    const now = Date.now();
+
+    for (const [chatId, state] of this.operations.entries()) {
+      // Only clean up idle operations that have been inactive for a while
+      if (state.status === 'idle' && now - state.lastActivity > this.CLEANUP_TIMEOUT_MS) {
+        this.operations.delete(chatId);
+      }
+    }
+  }
+
+  /**
+   * Abort all active operations. Used for graceful shutdown.
+   */
+  abortAll(): void {
+    for (const [chatId, state] of this.operations.entries()) {
+      if (state.status !== 'idle') {
+        state.abortController.abort();
+        state.status = 'idle';
+      }
+    }
+  }
+}
diff --git a/packages/cletus/src/browser/components/ChatSidebar.tsx b/packages/cletus/src/browser/components/ChatSidebar.tsx
index e0895eb..b546734 100644
--- a/packages/cletus/src/browser/components/ChatSidebar.tsx
+++ b/packages/cletus/src/browser/components/ChatSidebar.tsx
@@ -12,6 +12,7 @@ interface ChatSidebarProps {
   onChatSelect: (chatId: string) => void;
   onProfileClick: () => void;
   onCreateChat?: () => void;
+  isCreatingChat?: boolean;
 }
 
 export const ChatSidebar: React.FC<ChatSidebarProps> = ({
@@ -22,6 +23,7 @@ export const ChatSidebar: React.FC<ChatSidebarProps> = ({
   onChatSelect,
   onProfileClick,
   onCreateChat,
+  isCreatingChat = false,
 }) => {
   const chats = config.chats;
   const sortedChats = [...chats].sort((a, b) => b.updated - a.updated);
@@ -62,6 +64,7 @@ export const ChatSidebar: React.FC<ChatSidebarProps> = ({
           size="icon"
           onClick={handleCreateChat}
           title="New Chat"
+          disabled={isCreatingChat}
         >
           <Plus className="w-5 h-5" />
         </Button>
@@ -112,9 +115,10 @@ export const ChatSidebar: React.FC<ChatSidebarProps> = ({
           variant="neon"
           className="w-full gap-2"
           onClick={handleCreateChat}
+          disabled={isCreatingChat}
         >
           <Plus className="w-4 h-4" />
-          New Chat
+          {isCreatingChat ? 'Creating...' : 'New Chat'}
         </Button>
       </div>
 
diff --git a/packages/cletus/src/browser/connection-registry.ts b/packages/cletus/src/browser/connection-registry.ts
new file mode 100644
index 0000000..a38ba13
--- /dev/null
+++ b/packages/cletus/src/browser/connection-registry.ts
@@ -0,0 +1,119 @@
+import type { WebSocket } from 'ws';
+import { randomBytes } from 'crypto';
+
+/**
+ * Represents a client WebSocket connection with its associated metadata.
+ */
+export interface ClientConnection {
+  ws: WebSocket;
+  connectionId: string;
+  activeChatId: string | null;
+  connectedAt: number;
+}
+
+/**
+ * Tracks which clients are subscribed to which chats for broadcasting.
+ *
+ * This enables multi-client real-time synchronization where multiple browser
+ * windows can view the same chat and receive updates simultaneously.
+ */
+export class ConnectionRegistry {
+  private connections: Map<string, ClientConnection> = new Map();
+
+  /**
+   * Register a new WebSocket connection and return its unique ID.
+   */
+  registerConnection(ws: WebSocket): string {
+    const connectionId = this.generateConnectionId();
+    const connection: ClientConnection = {
+      ws,
+      connectionId,
+      activeChatId: null,
+      connectedAt: Date.now(),
+    };
+
+    this.connections.set(connectionId, connection);
+    return connectionId;
+  }
+
+  /**
+   * Unregister a connection when client disconnects.
+   */
+  unregisterConnection(connectionId: string): void {
+    this.connections.delete(connectionId);
+  }
+
+  /**
+   * Set the active chat for a connection (used for subscribe_chat).
+   */
+  setActiveChat(connectionId: string, chatId: string | null): void {
+    const connection = this.connections.get(connectionId);
+    if (!connection) return;
+
+    connection.activeChatId = chatId;
+  }
+
+  /**
+   * Get the active chat ID for a connection.
+   */
+  getActiveChat(connectionId: string): string | null {
+    const connection = this.connections.get(connectionId);
+    return connection?.activeChatId || null;
+  }
+
+  /**
+   * Get all WebSocket clients currently subscribed to a specific chat.
+   */
+  getClientsForChat(chatId: string): WebSocket[] {
+    const clients: WebSocket[] = [];
+
+    for (const connection of this.connections.values()) {
+      if (connection.activeChatId === chatId) {
+        clients.push(connection.ws);
+      }
+    }
+
+    return clients;
+  }
+
+  /**
+   * Get a specific connection by ID.
+   */
+  getConnection(connectionId: string): ClientConnection | null {
+    return this.connections.get(connectionId) || null;
+  }
+
+  /**
+   * Get all registered connections.
+   */
+  getAllConnections(): ClientConnection[] {
+    return Array.from(this.connections.values());
+  }
+
+  /**
+   * Get count of active connections.
+   */
+  getConnectionCount(): number {
+    return this.connections.size;
+  }
+
+  /**
+   * Get count of clients watching a specific chat.
+   */
+  getChatClientCount(chatId: string): number {
+    let count = 0;
+    for (const connection of this.connections.values()) {
+      if (connection.activeChatId === chatId) {
+        count++;
+      }
+    }
+    return count;
+  }
+
+  /**
+   * Generate a unique connection ID.
+   */
+  private generateConnectionId(): string {
+    return randomBytes(16).toString('hex');
+  }
+}
diff --git a/packages/cletus/src/browser/pages/MainPage.tsx b/packages/cletus/src/browser/pages/MainPage.tsx
index 8b7bfb7..56d93f4 100644
--- a/packages/cletus/src/browser/pages/MainPage.tsx
+++ b/packages/cletus/src/browser/pages/MainPage.tsx
@@ -21,10 +21,9 @@ import { useWebSocket } from '../WebSocketContext';
 
 interface MainPageProps {
   config: Config;
-  onConfigChange: () => Promise<void>;
 }
 
-export const MainPage: React.FC<MainPageProps> = ({ config, onConfigChange }) => {
+export const MainPage: React.FC<MainPageProps> = ({ config }) => {
   const { ws, isConnected } = useWebSocket();
   const [selectedChatId, setSelectedChatId] = useState<string | null>(null);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
@@ -47,6 +46,7 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onConfigChange }) =>
   const [cwd, setCwd] = useState<string | undefined>(undefined);
   const [status, setStatus] = useState('');
   const [isProcessing, setIsProcessing] = useState(false);
+  const [isCreatingChat, setIsCreatingChat] = useState(false);
   const modelsResolverRef = useRef<{
     resolve: (models: any[]) => void;
     reject: (error: Error) => void;
@@ -78,15 +78,26 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onConfigChange }) =>
         // Chat is in config, select it now
         pendingChatSelectRef.current = null;
         handleChatSelect(chatToSelect);
+        // Clear creating state when chat is selected
+        setIsCreatingChat(false);
       }
     }
   }, [config.chats]);
 
-  // Request messages when chat is selected and WebSocket is connected
+  // Subscribe to chat when selected or when reconnecting
   useEffect(() => {
     if (!selectedChatId || !isConnected || !ws) return;
 
+    // Subscribe to the chat (will receive operation_state and messages)
+    ws.send({ type: 'subscribe_chat', data: { chatId: selectedChatId } });
     ws.send({ type: 'get_messages', data: { chatId: selectedChatId } });
+
+    // Cleanup: unsubscribe when effect re-runs or component unmounts
+    return () => {
+      if (ws && ws.isOpen()) {
+        ws.send({ type: 'unsubscribe_chat', data: { chatId: selectedChatId } });
+      }
+    };
   }, [selectedChatId, isConnected, ws]);
 
   // Listen for WebSocket messages
@@ -100,7 +111,30 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onConfigChange }) =>
     return unsubscribe;
   }, [ws]);
 
+  // State that changes and the handler function needs
+  const getHandlerState = () => ({
+    selectedChatId,
+    isCreatingChat,
+  });
+  const handleState = useRef(getHandlerState())
+  useEffect(() => {
+    handleState.current = getHandlerState();
+  });
+
+  // Handle incoming server messages
   const handleServerMessage = (message: ServerMessage) => {
+    const { isCreatingChat, selectedChatId } = handleState.current;
+
+    const isChatCreation = isCreatingChat && message.type === 'chat_created';
+    const isAnotherChat = 'chatId' in message.data && message.data.chatId !== selectedChatId;
+
+    if (!isChatCreation && isAnotherChat) {
+      console.log('[MainPage] Ignoring message for different chat:', { selectedChatId, message, isCreatingChat });
+
+      // This event is for a different chat, ignore it
+      return;
+    }
+
     switch (message.type) {
       case 'messages':
         setMessages(message.data.messages || []);
@@ -158,7 +192,7 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onConfigChange }) =>
       case 'chat_updated':
         if (message.data.chat) {
           setChatMetaState(message.data.chat);
-          onConfigChange();
+          send({ type: 'get_config' });
         }
         if (message.data.cwd !== undefined) {
           setCwd(message.data.cwd);
@@ -169,16 +203,25 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onConfigChange }) =>
         setStatus(message.data.status);
         break;
 
-      case 'elapsed_update':
-        break;
-
       case 'processing':
-        setIsProcessing(message.data);
-        if (!message.data) {
+        setIsProcessing(message.data.isProcessing);
+        if (!message.data.isProcessing) {
           setStatus('');
         }
         break;
 
+      case 'operation_state':
+        // Sync operation state when subscribing to a chat
+        setIsProcessing(message.data.status === 'processing');
+        if (message.data.pendingMessage) {
+          setPendingMessage(message.data.pendingMessage);
+        }
+        break;
+
+      case 'chat_subscribed':
+        // Chat subscription confirmed
+        break;
+
       case 'models':
         if (modelsResolverRef.current) {
           modelsResolverRef.current.resolve(message.data.models || []);
@@ -195,16 +238,9 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onConfigChange }) =>
         if (message.data.chatId) {
           pendingChatSelectRef.current = message.data.chatId;
         }
-        
-        // Clear data immediately, once config with new chat is refreshed it will be populated.
-        setMessages([]);
-        setPendingMessage(null);
-        setTemporaryUserMessage(null);
-        setTemporaryAssistantMessage(null);
-        setStatus('');
 
         // Refresh config - the effect will handle selection
-        onConfigChange();
+        send({ type: 'get_config' });
         break;
 
       case 'chat_deleted':
@@ -217,12 +253,13 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onConfigChange }) =>
           setTemporaryAssistantMessage(null);
         }
         // Refresh config - auto-select effect will handle selecting another chat
-        onConfigChange();
+        send({ type: 'get_config' });
         break;
 
       case 'error':
         console.error('Server error:', message.data.message);
         setIsProcessing(false);
+        setIsCreatingChat(false); // Clear creating state on error
         setStatus('Error: ' + message.data.message);
         if (modelsResolverRef.current) {
           modelsResolverRef.current.reject(new Error(message.data.message));
@@ -245,13 +282,24 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onConfigChange }) =>
   };
 
   const handleChatSelect = (chatId: string) => {
+    // Unsubscribe from previous chat
+    if (selectedChatId && ws) {
+      send({ type: 'unsubscribe_chat', data: { chatId: selectedChatId } });
+    }
+
     setSelectedChatId(chatId);
     setMessages([]);
     setPendingMessage(null);
     setTemporaryUserMessage(null);
     setTemporaryAssistantMessage(null);
+    setStatus(''); // Clear any previous error or status messages
     setLoading(true);
     window.history.pushState({}, '', `/chat/${chatId}`);
+
+    // Subscribe to new chat (will receive operation_state)
+    if (ws) {
+      send({ type: 'subscribe_chat', data: { chatId } });
+    }
   };
 
   const handleSendMessage = (content: MessageContent[]) => {
@@ -283,7 +331,8 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onConfigChange }) =>
   };
 
   const handleCancel = () => {
-    send({ type: 'cancel' });
+    if (!selectedChatId) return;
+    send({ type: 'cancel', data: { chatId: selectedChatId } });
     // Server will send 'processing' message to update isProcessing state
   };
 
@@ -425,7 +474,7 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onConfigChange }) =>
       send({ type: 'delete_chat', data: { chatId: selectedChatId } });
       setSelectedChatId(null);
       setMessages([]);
-      setTimeout(() => onConfigChange(), 500);
+      setTimeout(() => send({ type: 'get_config' }), 500);
     }
   };
 
@@ -525,6 +574,9 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onConfigChange }) =>
   };
 
   const handleCreateChat = () => {
+    // Set loading state immediately
+    setIsCreatingChat(true);
+
     // Generate timestamp-based name
     const now = new Date();
     const day = now.getDate();
@@ -580,6 +632,7 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onConfigChange }) =>
           onChatSelect={handleChatSelect}
           onProfileClick={() => setShowProfile(true)}
           onCreateChat={handleCreateChat}
+          isCreatingChat={isCreatingChat}
         />
         <div className="flex-1 flex items-center justify-center">
           <div className="text-center space-y-6">
@@ -616,6 +669,7 @@ export const MainPage: React.FC<MainPageProps> = ({ config, onConfigChange }) =>
         onChatSelect={handleChatSelect}
         onProfileClick={() => setShowProfile(true)}
         onCreateChat={handleCreateChat}
+        isCreatingChat={isCreatingChat}
       />
 
       {/* Main Chat Area */}
diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
index cfb18be..1f75162 100644
--- a/packages/cletus/src/browser/server.ts
+++ b/packages/cletus/src/browser/server.ts
@@ -12,6 +12,9 @@ import { OperationManager } from '../operations/manager';
 import { CletusAI, createCletusAI } from '../ai';
 import { CletusChatAgent, createChatAgent, initTools } from '../agents/chat-agent';
 import { OrchestratorEvent, runChatOrchestrator } from '../agents/chat-orchestrator';
+import { ChatOperationManager } from './chat-operation-manager';
+import { ConnectionRegistry } from './connection-registry';
+import { BroadcastManager } from './broadcast-manager';
 import { send } from 'process';
 
 const __serverFilename = fileURLToPath(import.meta.url);
@@ -64,6 +67,14 @@ function removeChat(chatId: string): void {
 // Run cleanup every 15 minutes
 setInterval(cleanupExpiredChats, 15 * 60 * 1000);
 
+// Server-level state (shared across all connections)
+const connectionRegistry = new ConnectionRegistry();
+const chatOperationManager = new ChatOperationManager();
+const broadcastManager = new BroadcastManager(connectionRegistry, chatOperationManager);
+
+// Periodic cleanup of old completed operations
+setInterval(() => chatOperationManager.cleanup(), 5 * 60 * 1000);
+
 export async function startBrowserServer(port: number = 3000): Promise<void> {
   const server = http.createServer(async (req, res) => {
     const url = req.url || '/';
@@ -124,6 +135,22 @@ export async function startBrowserServer(port: number = 3000): Promise<void> {
   process.on('SIGINT', () => {
     console.log('\n\nShutting down...');
 
+    // Abort all ongoing operations
+    chatOperationManager.abortAll();
+
+    // Broadcast shutdown message to all clients
+    for (const connection of connectionRegistry.getAllConnections()) {
+      if (connection.activeChatId && connection.ws.readyState === 1) {
+        connection.ws.send(JSON.stringify({
+          type: 'error',
+          data: {
+            chatId: connection.activeChatId,
+            message: 'Server shutting down - operation cancelled'
+          }
+        } as ServerMessage));
+      }
+    }
+
     // Force close all WebSocket connections
     clients.forEach((ws) => {
       ws.close();
@@ -144,31 +171,18 @@ export async function startBrowserServer(port: number = 3000): Promise<void> {
 }
 
 async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
+  // Register this connection
+  const connectionId = connectionRegistry.registerConnection(ws);
+
   let config: ConfigFile | null = null;
   let configPromise: Promise<boolean> | null = null;
   let ai: CletusAI | null = null;
   let chatAgent: CletusChatAgent | null = null;
-  let abortController: AbortController | null = null;
   let configUpdateQueue: Promise<void> = Promise.resolve();
 
-  // Type-safe message sender
+  // Type-safe message sender for this connection
   const sendMessage = (message: ServerMessage) => {
-    ws.send(JSON.stringify(message));
-  };
-
-  // Helper to run interruptible operations
-  const startProcessing = <T>(fn: (signal: AbortSignal) => Promise<T>) => {
-    if (abortController) {
-      throw new Error('Another operation is already in progress');
-    }
-    abortController = new AbortController();
-    try {
-      sendMessage({ type: 'processing', data: true });
-      return fn(abortController.signal);
-    } finally {
-      sendMessage({ type: 'processing', data: false });
-      abortController = null;
-    }
+    broadcastManager.sendToConnection(connectionId, message);
   };
 
   // Helper to send errors
@@ -307,50 +321,18 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
     }
   };
 
-  const handleOrchestratorEvent = (event: OrchestratorEvent, chatFile: ChatFile) => {
+  const handleOrchestratorEvent = (chatId: string, event: OrchestratorEvent, chatFile: ChatFile) => {
     // Handle orchestrator events
     switch (event.type) {
       case 'pendingUpdate':
         // Save pending message immediately to chat file so it persists
         // This ensures messages are never lost due to errors or cancellations
-        // We MUST await this to prevent race conditions where the user approves
-        // operations before the message is saved
         fireAndForget(async () => {
           await saveOrUpdateMessage(chatFile, event.pending);
-          sendMessage({
-            type: 'pending_update',
-            data: { pending: event.pending },
-          });
         });
         break;
       case 'update':
         fireAndForget(chatFile.updateMessage(event.message));
-        sendMessage({
-          type: 'message_updated',
-          data: { message: event.message },
-        });
-        break;
-      case 'status':
-        sendMessage({
-          type: 'status_update',
-          data: { status: event.status },
-        });
-        break;
-      case 'usage':
-        sendMessage({
-          type: 'usage_update',
-          data: {
-            accumulated: event.accumulated,
-            accumulatedCost: event.accumulatedCost,
-            current: event.current,
-          },
-        });
-        break;
-      case 'elapsed':
-        sendMessage({
-          type: 'elapsed_update',
-          data: { ms: event.ms },
-        });
         break;
       case 'complete':
         // Update the message if it exists (from pending), or add it if it doesn't
@@ -359,12 +341,6 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
             await saveOrUpdateMessage(chatFile, event.message);
           }
         });
-
-        // Send the complete message
-        sendMessage({
-          type: 'response_complete',
-          data: { message: event.message },
-        });
         break;
       case 'error':
         // Try to save any pending message state before reporting error
@@ -378,16 +354,16 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
             await chatFile.updateMessage(lastAssistantMsg);
           }
         });
-
-        sendMessage({
-          type: 'error',
-          data: { message: event.error },
-        });
         break;
     }
+
+    // Broadcast event to all clients watching this chat
+    broadcastManager.broadcastOperationEvent(chatId, event);
   };
 
   const runChat = async (chatFile: ChatFile, chatMeta: ChatMeta, config: ConfigFile) => {
+    const chatId = chatMeta.id;
+
     // Ensure AI and chat agent are loaded
     const { ai: aiInstance, chatAgent: chatAgentInstance } = await ensureAI();
 
@@ -412,21 +388,48 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
       return { accumulated: {}, accumulatedCost: 0 };
     };
 
-    // Run orchestrator with updated chat file
-    await startProcessing(async (signal)  => {
+    // Start operation for this chat (get chat-scoped abort controller)
+    const abortController = chatOperationManager.startOperation(chatId);
+
+    // Broadcast processing start to all clients watching this chat
+    broadcastManager.broadcastToChat(chatId, {
+      type: 'processing',
+      data: { chatId, isProcessing: true },
+    });
+
+    try {
+      // Run orchestrator with updated chat file
       await runChatOrchestrator({
         chatAgent: chatAgentInstance,
         messages: chatFile.getMessages(),
         chatMeta: { ...chatMeta, questions: [] },
         config,
         chatData: chatFile,
-        signal,
+        signal: abortController.signal,
         clearUsage,
         getUsage,
       }, (event) => {
-        handleOrchestratorEvent(event, chatFile);
+        handleOrchestratorEvent(chatId, event, chatFile);
       });
-    });
+
+      // Mark operation as complete
+      chatOperationManager.completeOperation(chatId);
+    } catch (error: any) {
+      // Mark operation as complete even on error
+      chatOperationManager.completeOperation(chatId);
+
+      // Broadcast error to all clients
+      broadcastManager.broadcastToChat(chatId, {
+        type: 'error',
+        data: { chatId, message: error.message || 'Unknown error' },
+      });
+    } finally {
+      // Broadcast processing end to all clients watching this chat
+      broadcastManager.broadcastToChat(chatId, {
+        type: 'processing',
+        data: { chatId, isProcessing: false },
+      });
+    }
   };
 
   ws.on('message', async (data) => {
@@ -480,30 +483,6 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
           });
           break;
         }
-        case 'init_chat': {
-          const { chatId } = message.data;
-          await withChatFile(chatId, async (chatFile, _, config) => {
-            // Initialize AI to get default cwd
-            await ensureAI();
-
-            sendMessage({
-              type: 'chat_initialized',
-              data: {
-                messages: chatFile.getMessages(),
-                chat: config.getChats().find(c => c.id === chatId),
-              },
-            });
-
-            // Send current cwd
-            sendMessage({
-              type: 'chat_updated',
-              data: {
-                cwd: ai?.config.defaultContext?.cwd
-              },
-            });
-          });
-          break;
-        }
         case 'get_messages': {
           const { chatId } = message.data;
           await withChatFile(chatId, async (chatFile) => {
@@ -511,7 +490,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
 
             sendMessage({
               type: 'messages',
-              data: { messages },
+              data: { chatId, messages },
             });
           });
           break;
@@ -539,7 +518,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
 
             sendMessage({
               type: 'message_added',
-              data: { message: userMessage },
+              data: { chatId, message: userMessage },
             });
 
             // Run the chat
@@ -547,12 +526,45 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
           });
           break;
         }
-        case 'cancel':
-          if (abortController) {
-            abortController.abort();
-            abortController = null;
+        case 'cancel': {
+          const { chatId } = message.data;
+          chatOperationManager.cancelOperation(chatId);
+
+          // Broadcast cancellation to all clients watching this chat
+          broadcastManager.broadcastToChat(chatId, {
+            type: 'processing',
+            data: { chatId, isProcessing: false },
+          });
+          break;
+        }
+
+        case 'subscribe_chat': {
+          const { chatId } = message.data;
+
+          // Register this connection as watching this chat
+          connectionRegistry.setActiveChat(connectionId, chatId);
+
+          // Send confirmation
+          sendMessage({
+            type: 'chat_subscribed',
+            data: { chatId },
+          });
+
+          // Send current operation state for this chat
+          broadcastManager.sendOperationState(connectionId, chatId);
+          break;
+        }
+
+        case 'unsubscribe_chat': {
+          const { chatId } = message.data;
+
+          // Unregister this connection from watching this chat
+          const currentChatId = connectionRegistry.getActiveChat(connectionId);
+          if (currentChatId === chatId) {
+            connectionRegistry.setActiveChat(connectionId, null);
           }
           break;
+        }
 
         case 'get_models':
           try {
@@ -590,6 +602,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
             sendMessage({
               type: 'chat_updated',
               data: {
+                chatId,
                 chat: updatedChat,
                 cwd: ai?.config.defaultContext?.cwd
               },
@@ -618,7 +631,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
               const updatedChat = config.getChats().find(c => c.id === chatId);
               sendMessage({
                 type: 'chat_updated',
-                data: { chat: updatedChat },
+                data: { chatId, chat: updatedChat },
               });
             }
           });
@@ -634,7 +647,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
               const updatedChat = config.getChats().find(c => c.id === chatId);
               sendMessage({
                 type: 'chat_updated',
-                data: { chat: updatedChat },
+                data: { chatId, chat: updatedChat },
               });
             }
           });
@@ -650,7 +663,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
               const updatedChat = config.getChats().find(c => c.id === chatId);
               sendMessage({
                 type: 'chat_updated',
-                data: { chat: updatedChat },
+                data: { chatId, chat: updatedChat },
               });
             }
           });
@@ -663,7 +676,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
             const updatedChat = config.getChats().find(c => c.id === chatId);
             sendMessage({
               type: 'chat_updated',
-              data: { chat: updatedChat },
+              data: { chatId, chat: updatedChat },
             });
           });
           break;
@@ -676,20 +689,28 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
             });
             sendMessage({
               type: 'messages_updated',
-              data: { messages: [] },
+              data: { chatId, messages: [] },
             });
           });
           break;
         }
         case 'delete_chat': {
           const { chatId } = message.data;
+
+          // Abort any ongoing operation for this chat
+          chatOperationManager.cancelOperation(chatId);
+
           withConfigUpdate(async (config) => {
             await config.deleteChat(chatId);
             removeChat(chatId); // Remove from cache
-            sendMessage({
-              type: 'chat_deleted',
-              data: { chatId },
-            });
+
+            // Broadcast deletion to all clients (not just those watching this chat)
+            for (const connection of connectionRegistry.getAllConnections()) {
+              broadcastManager.sendToConnection(connection.connectionId, {
+                type: 'chat_deleted',
+                data: { chatId },
+              });
+            }
           });
           break;
         }
@@ -702,21 +723,21 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
             if (!targetMessage || !targetMessage.operations) {
               sendMessage({
                 type: 'error',
-                data: { message: 'Message or operations not found' },
+                data: { chatId, message: 'Message or operations not found' },
               });
               return;
             }
 
             const broadcastMessageUpdate = () => {
-              sendMessage({
+              broadcastManager.broadcastToChat(chatId, {
                 type: 'message_updated',
-                data: { message: targetMessage },
+                data: { chatId, message: targetMessage },
               });
             };
 
             const operations = targetMessage.operations;
             const manager = new OperationManager(
-              'none', 
+              'none',
               operations,
               () => {},
               (op, opIndex) => {
@@ -727,7 +748,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
                   const content = targetMessage.content.splice(contentIndex, 1)[0];
                   content.content = op.message || '';
                   targetMessage.content.push(content);
-                  
+
                   chatFile.updateMessage(targetMessage);
                   broadcastMessageUpdate();
                 }
@@ -752,18 +773,27 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
             // Execute approved operations
             let hasExecutedOperations = false;
             if (approved.length > 0) {
-              await startProcessing(async (signal) => {
+              // Start operation for this chat
+              const abortController = chatOperationManager.startOperation(chatId);
+
+              // Broadcast processing start
+              broadcastManager.broadcastToChat(chatId, {
+                type: 'processing',
+                data: { chatId, isProcessing: true },
+              });
+
+              try {
                 const ctx = await aiInstance.buildContext({
                   ops: manager,
                   chat: chatMeta,
                   chatData: chatFile,
                   chatMessage: targetMessage,
                   config,
-                  signal,
+                  signal: abortController.signal,
                   chatStatus: (status) => {
-                    sendMessage({
+                    broadcastManager.broadcastToChat(chatId, {
                       type: 'status_update',
-                      data: { status },
+                      data: { chatId, status },
                     });
                   },
                 });
@@ -774,7 +804,21 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
                     hasExecutedOperations = true;
                   }
                 }
-              });
+
+                chatOperationManager.completeOperation(chatId);
+              } catch (error: any) {
+                chatOperationManager.completeOperation(chatId);
+                broadcastManager.broadcastToChat(chatId, {
+                  type: 'error',
+                  data: { chatId, message: error.message || 'Operation execution failed' },
+                });
+              } finally {
+                // Broadcast processing end
+                broadcastManager.broadcastToChat(chatId, {
+                  type: 'processing',
+                  data: { chatId, isProcessing: false },
+                });
+              }
             }
 
             // If operations were executed, continue with the orchestrator
@@ -858,7 +902,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
             await chatFile.addMessage(questionMessage);
             sendMessage({
               type: 'message_added',
-              data: { message: questionMessage },
+              data: { chatId, message: questionMessage },
             });
 
             // Add the formatted answer as a user message
@@ -872,13 +916,13 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
             await chatFile.addMessage(answerMessage);
             sendMessage({
               type: 'message_added',
-              data: { message: answerMessage },
+              data: { chatId, message: answerMessage },
             });
 
             // Send updated chat meta
             sendMessage({
               type: 'chat_updated',
-              data: { chat: { ...chatMeta, questions: [] } },
+              data: { chatId, chat: { ...chatMeta, questions: [] } },
             });
 
             // Run the chat
@@ -902,9 +946,8 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
   });
 
   ws.on('close', () => {
-    if (abortController) {
-      abortController.abort();
-    }
+    connectionRegistry.unregisterConnection(connectionId);
+    // Note: Operations continue running even after client disconnects!
   });
 }
 
diff --git a/packages/cletus/src/browser/websocket-types.ts b/packages/cletus/src/browser/websocket-types.ts
index 1bab914..190a903 100644
--- a/packages/cletus/src/browser/websocket-types.ts
+++ b/packages/cletus/src/browser/websocket-types.ts
@@ -9,9 +9,10 @@ export type ClientMessage =
   | { type: 'get_config'; data?: never }
   | { type: 'create_chat'; data: { name: string } }
   | { type: 'get_messages'; data: { chatId: string } }
-  | { type: 'init_chat'; data: { chatId: string } }
   | { type: 'send_message'; data: { chatId: string; content: Message['content'] } }
-  | { type: 'cancel'; data?: never }
+  | { type: 'cancel'; data: { chatId: string } }
+  | { type: 'subscribe_chat'; data: { chatId: string } }
+  | { type: 'unsubscribe_chat'; data: { chatId: string } }
   | { type: 'update_chat_meta'; data: { chatId: string; updates: Partial<ChatMeta>; cwd?: string } }
   | { type: 'update_user'; data: { updates: Partial<Config['user']> } }
   | { type: 'add_todo'; data: { chatId: string; todo: string } }
@@ -29,21 +30,21 @@ export type ServerMessage =
   | { type: 'config'; data: Config }
   | { type: 'config_not_found'; data: Record<string, never> }
   | { type: 'chat_created'; data: { chatId: string } }
-  | { type: 'chat_initialized'; data: { messages: Message[]; chat?: ChatMeta } }
-  | { type: 'messages'; data: { messages: Message[] } }
-  | { type: 'message_added'; data: { message: Message } }
-  | { type: 'message_updated'; data: { message: Message } }
-  | { type: 'pending_update'; data: { pending: Message } }
-  | { type: 'messages_updated'; data: { messages: Message[] } }
-  | { type: 'response_complete'; data: { message: Message } }
-  | { type: 'chat_updated'; data: { chat?: ChatMeta; cwd?: string } }
+  | { type: 'chat_subscribed'; data: { chatId: string } }
+  | { type: 'messages'; data: { chatId: string; messages: Message[] } }
+  | { type: 'message_added'; data: { chatId: string; message: Message } }
+  | { type: 'message_updated'; data: { chatId: string; message: Message } }
+  | { type: 'pending_update'; data: { chatId: string; pending: Message } }
+  | { type: 'messages_updated'; data: { chatId: string; messages: Message[] } }
+  | { type: 'response_complete'; data: { chatId: string; message: Message } }
+  | { type: 'chat_updated'; data: { chatId: string; chat?: ChatMeta; cwd?: string } }
   | { type: 'models'; data: { models: any[] } }
-  | { type: 'status_update'; data: { status: string } }
-  | { type: 'usage_update'; data: { accumulated: any; accumulatedCost: number; current: any } }
-  | { type: 'elapsed_update'; data: { ms: number } }
+  | { type: 'status_update'; data: { chatId: string; status: string } }
+  | { type: 'usage_update'; data: { chatId: string; accumulated: any; accumulatedCost: number; current: any } }
+  | { type: 'operation_state'; data: { chatId: string; status: 'idle' | 'processing' | 'waiting_approval'; pendingMessage: Message | null; startTime: number | null } }
   | { type: 'chat_deleted'; data: { chatId: string } }
-  | { type: 'error'; data: { message: string } }
-  | { type: 'processing'; data: boolean };
+  | { type: 'error'; data: { chatId?: string; message: string } }
+  | { type: 'processing'; data: { chatId: string; isProcessing: boolean } };
 
 /**
  * Type-safe WebSocket client interface
diff --git a/packages/cletus/src/tool-registry.ts b/packages/cletus/src/tool-registry.ts
index eb0f3f2..4ce0a4c 100644
--- a/packages/cletus/src/tool-registry.ts
+++ b/packages/cletus/src/tool-registry.ts
@@ -1,10 +1,11 @@
-import { AnyTool, Message, resolveFn } from '@aeye/core';
+import { Message, resolveFn } from '@aeye/core';
+import { CletusAIContext, CletusTool } from './ai';
 import { cosineSimilarity, pluralize } from './common';
 import { ADAPTIVE_TOOLING } from './constants';
 import { embed } from './embed';
-import { CletusAIContext } from './ai';
 import { getCachedVector, setCachedVector } from './embedding-cache';
 
+
 /**
  * Registered tool with embedded instructions for semantic search
  */
@@ -14,7 +15,7 @@ export interface RegisteredTool {
   /** Toolset this tool belongs to */
   toolset: string;
   /** Tool reference */
-  tool: AnyTool;
+  tool: CletusTool;
   /** Embedded instruction vector (null if not yet embedded) */
   vector: number[] | null;
   /** Instructions text used for embedding */
@@ -31,7 +32,7 @@ export class ToolRegistry {
   /**
    * Register a tool with its toolset
    */
-  async register(toolset: string, tool: AnyTool, instructions: string): Promise<void> {
+  async register(toolset: string, tool: CletusTool, instructions: string): Promise<void> {
     const name = tool.name;
 
     const existing = this.tools.get(name);
@@ -55,7 +56,7 @@ export class ToolRegistry {
   /**
    * Register multiple tools from a toolset
    */
-  async registerToolset(toolset: string, tools: AnyTool[], getInstructions: (tool: AnyTool) => Promise<string>): Promise<void> {
+  async registerToolset(toolset: string, tools: CletusTool[], getInstructions: (tool: CletusTool) => Promise<string>): Promise<void> {
     for (const tool of tools) {
       await this.register(toolset, tool, await getInstructions(tool));
     }
@@ -234,7 +235,7 @@ export type StaticToolsetName = typeof STATIC_TOOLSETS[number] | 'utility';
 /**
  * Extract instructions from a tool (uses instructions first, falls back to description)
  */
-export async function getToolInstructions(tool: AnyTool, ctx?: CletusAIContext): Promise<string> {
+export async function getToolInstructions(tool: CletusTool, ctx?: CletusAIContext): Promise<string> {
   const input = tool.input;
   // Use instructions first if available, then fall back to description
   const instructions = input.instructionsFn && ctx

From 04765b1df3272391306ff3ffc5d3091678c699ac Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Fri, 19 Dec 2025 21:55:21 -0500
Subject: [PATCH 26/27] Remove unused chat UI components and refactor
 operations

Deleted obsolete components: ChatFooter, ChatHeader, CommandsPanel, and OperationApprovalPanel. Refactored operation display logic by moving and renaming BaseOperationDisplay to OperationDisplay, consolidating status helpers, and updating props usage. Improved operation approval handling and streamlined message operation status updates.
---
 .../src/browser/components/ChatFooter.tsx     |  69 -------
 .../src/browser/components/ChatHeader.tsx     |  32 ----
 .../src/browser/components/CommandsPanel.tsx  | 126 -------------
 .../src/browser/components/MessageItem.tsx    |  11 +-
 .../src/browser/components/MessageList.tsx    |   6 +-
 .../components/OperationApprovalPanel.tsx     | 178 ------------------
 .../OperationDisplay.tsx}                     |  59 ++++--
 .../cletus/src/browser/operations/index.tsx   |   4 +-
 .../cletus/src/browser/operations/render.tsx  |  63 ++-----
 packages/cletus/src/browser/server.ts         |  20 +-
 10 files changed, 80 insertions(+), 488 deletions(-)
 delete mode 100644 packages/cletus/src/browser/components/ChatFooter.tsx
 delete mode 100644 packages/cletus/src/browser/components/ChatHeader.tsx
 delete mode 100644 packages/cletus/src/browser/components/CommandsPanel.tsx
 delete mode 100644 packages/cletus/src/browser/components/OperationApprovalPanel.tsx
 rename packages/cletus/src/browser/{operations/BaseOperationDisplay.tsx => components/OperationDisplay.tsx} (92%)

diff --git a/packages/cletus/src/browser/components/ChatFooter.tsx b/packages/cletus/src/browser/components/ChatFooter.tsx
deleted file mode 100644
index 3dd99e2..0000000
--- a/packages/cletus/src/browser/components/ChatFooter.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import type { Config, ChatMeta } from '../../schemas';
-
-interface ChatFooterProps {
-  config: Config;
-  chatMeta: ChatMeta;
-  messageCount: number;
-  totalCost?: number;
-}
-
-const MODETEXT: Record<string, string> = {
-  none: 'local allowed',
-  read: 'read allowed',
-  create: 'create allowed',
-  update: 'update allowed',
-  delete: 'delete allowed',
-};
-
-const AGENTMODETEXT: Record<string, string> = {
-  default: 'run mode',
-  plan: 'plan mode',
-};
-
-export const ChatFooter: React.FC<ChatFooterProps> = ({
-  config,
-  chatMeta,
-  messageCount,
-  totalCost = 0,
-}) => {
-  const model = chatMeta.model || config.user.models?.chat || 'no model';
-  const assistant = chatMeta.assistant;
-  const modeText = MODETEXT[chatMeta.mode] || chatMeta.mode;
-  const agentModeText = AGENTMODETEXT[chatMeta.agentMode || 'default'];
-  const toolsetText = chatMeta.toolset ? `${chatMeta.toolset} toolset` : 'adaptive tools';
-  const messageText = `${messageCount} message${messageCount !== 1 ? 's' : ''}`;
-  const todoText = chatMeta.todos.length
-    ? `${chatMeta.todos.length} todo${chatMeta.todos.length !== 1 ? 's' : ''}`
-    : 'no todos';
-
-  return (
-    <div className="border-t border-border bg-card/30 backdrop-blur-sm px-6 py-2">
-      <div className="text-xs text-muted-foreground flex flex-wrap items-center gap-2">
-        <span className="text-foreground">{model}</span>
-        <span className="text-border">│</span>
-        {assistant && (
-          <>
-            <span>{assistant}</span>
-            <span className="text-border">│</span>
-          </>
-        )}
-        <span>{modeText}</span>
-        <span className="text-border">│</span>
-        <span>{agentModeText}</span>
-        <span className="text-border">│</span>
-        <span>{toolsetText}</span>
-        <span className="text-border">│</span>
-        <span>{messageText}</span>
-        <span className="text-border">│</span>
-        <span>{todoText}</span>
-        {totalCost > 0 && (
-          <>
-            <span className="text-border">│</span>
-            <span className="text-yellow-400">${totalCost.toFixed(4)}</span>
-          </>
-        )}
-      </div>
-    </div>
-  );
-};
diff --git a/packages/cletus/src/browser/components/ChatHeader.tsx b/packages/cletus/src/browser/components/ChatHeader.tsx
deleted file mode 100644
index 21053a1..0000000
--- a/packages/cletus/src/browser/components/ChatHeader.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-
-interface ChatMeta {
-  id: string;
-  name: string;
-  mode: string;
-  assistant?: string;
-}
-
-interface ChatHeaderProps {
-  chat: ChatMeta;
-  onBack: () => void;
-}
-
-export const ChatHeader: React.FC<ChatHeaderProps> = ({ chat, onBack }) => {
-  return (
-    <div className="header">
-      <div className="flex" style={{ alignItems: 'center', gap: '1rem' }}>
-        <button className="btn btn-small" onClick={onBack}>
-          ← Back
-        </button>
-        <div>
-          <h1>{chat.name}</h1>
-          <div style={{ fontSize: '0.85rem', color: 'var(--text-secondary)', marginTop: '0.25rem' }}>
-            Mode: {chat.mode}
-            {chat.assistant && ` • Assistant: ${chat.assistant}`}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/cletus/src/browser/components/CommandsPanel.tsx b/packages/cletus/src/browser/components/CommandsPanel.tsx
deleted file mode 100644
index cc2009a..0000000
--- a/packages/cletus/src/browser/components/CommandsPanel.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import React, { useEffect } from 'react';
-import { X, HelpCircle } from 'lucide-react';
-import { Button } from './ui/button';
-import { ScrollArea } from './ui/scroll-area';
-
-interface Command {
-  name: string;
-  description: string;
-  usage?: string;
-}
-
-interface CommandsPanelProps {
-  onClose: () => void;
-}
-
-const COMMANDS: Command[] = [
-  { name: '/help', description: 'Show help information', usage: '/help' },
-  { name: '/quit', description: 'Exit chat', usage: '/quit' },
-  { name: '/assistant', description: 'Change assistant', usage: '/assistant <name>' },
-  { name: '/mode', description: 'Change mode', usage: '/mode <none|read|create|update|delete>' },
-  { name: '/model', description: 'Select chat model', usage: '/model' },
-  { name: '/prompt', description: 'Set custom prompt', usage: '/prompt <your prompt>' },
-  { name: '/title', description: 'Change chat title', usage: '/title <new title>' },
-  { name: '/todos', description: 'View todos', usage: '/todos' },
-  { name: '/do', description: 'Add a todo', usage: '/do <todo description>' },
-  { name: '/done', description: 'Mark a todo as done', usage: '/done <todo number>' },
-  { name: '/reset', description: 'Clear all todos', usage: '/reset' },
-  { name: '/clear', description: 'Clear all chat messages (requires confirmation)', usage: '/clear' },
-  { name: '/cd', description: 'Change current working directory', usage: '/cd [directory path]' },
-  { name: '/debug', description: 'Toggle debug logging', usage: '/debug' },
-];
-
-const COMMAND_CATEGORIES = {
-  'Chat Management': ['/help', '/quit', '/clear'],
-  'Configuration': ['/assistant', '/mode', '/model', '/prompt', '/title'],
-  'Todos': ['/todos', '/do', '/done', '/reset'],
-  'Advanced': ['/cd', '/debug'],
-};
-
-export const CommandsPanel: React.FC<CommandsPanelProps> = ({ onClose }) => {
-  const getCommandsByCategory = (category: string) => {
-    const commandNames = COMMAND_CATEGORIES[category as keyof typeof COMMAND_CATEGORIES] || [];
-    return COMMANDS.filter((cmd) => commandNames.includes(cmd.name));
-  };
-
-  // Handle ESC key to close
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [onClose]);
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"
-      onClick={onClose}
-    >
-      <div
-        className="relative w-full max-w-3xl max-h-[80vh] bg-card rounded-lg border border-border shadow-2xl flex flex-col"
-        onClick={(e) => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-border">
-          <div className="flex items-center gap-3">
-            <HelpCircle className="w-6 h-6 text-neon-cyan" />
-            <div>
-              <h2 className="text-2xl font-bold neon-text-cyan">Commands & Help</h2>
-              <p className="text-sm text-muted-foreground mt-1">
-                Available commands for this chat
-              </p>
-            </div>
-          </div>
-          <Button variant="ghost" size="icon" onClick={onClose}>
-            <X className="w-5 h-5" />
-          </Button>
-        </div>
-
-        {/* Content */}
-        <ScrollArea className="flex-1 p-6">
-          <div className="space-y-6">
-            {Object.keys(COMMAND_CATEGORIES).map((category) => (
-              <div key={category}>
-                <h3 className="text-lg font-semibold text-neon-purple mb-3">{category}</h3>
-                <div className="space-y-2">
-                  {getCommandsByCategory(category).map((command) => (
-                    <div
-                      key={command.name}
-                      className="p-3 rounded-lg bg-muted/30 border border-border"
-                    >
-                      <div className="flex items-start justify-between gap-4">
-                        <div className="flex-1">
-                          <code className="text-sm font-mono text-neon-cyan">{command.name}</code>
-                          <p className="text-sm text-muted-foreground mt-1">
-                            {command.description}
-                          </p>
-                        </div>
-                      </div>
-                      {command.usage && (
-                        <div className="mt-2 text-xs text-muted-foreground font-mono bg-black/30 px-2 py-1 rounded">
-                          {command.usage}
-                        </div>
-                      )}
-                    </div>
-                  ))}
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <div className="mt-8 p-4 rounded-lg bg-muted/50 border border-border">
-            <h4 className="text-sm font-semibold text-foreground mb-2">Tips</h4>
-            <ul className="text-sm text-muted-foreground space-y-1">
-              <li>• Type "/" in the chat input to see command suggestions</li>
-              <li>• Use mode selectors in the header for quick access</li>
-              <li>• Press ESC to close this panel</li>
-            </ul>
-          </div>
-        </ScrollArea>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/cletus/src/browser/components/MessageItem.tsx b/packages/cletus/src/browser/components/MessageItem.tsx
index 4101a49..904f73b 100644
--- a/packages/cletus/src/browser/components/MessageItem.tsx
+++ b/packages/cletus/src/browser/components/MessageItem.tsx
@@ -12,8 +12,8 @@ interface MessageItemProps {
   message: Message;
   operationDecisions?: Map<number, 'approve' | 'reject'>;
   onToggleOperationDecision?: (idx: number, decision: 'approve' | 'reject') => void;
-  onApproveOperation?: (message: Message, idx: number) => void;
-  onRejectOperation?: (message: Message, idx: number) => void;
+  onApproveOperation: (message: Message, idx: number) => void;
+  onRejectOperation: (message: Message, idx: number) => void;
   hasMultiplePendingOps?: boolean;
 }
 
@@ -88,7 +88,6 @@ export const MessageItem: React.FC<MessageItemProps> = ({
             // Render operation if this content item has an operation
             if (item.operation && item.operationIndex !== undefined) {
               const opIdx = item.operationIndex;
-              const needsApproval = item.operation.status === 'analyzed';
 
               return (
                 <OperationDisplay
@@ -96,9 +95,9 @@ export const MessageItem: React.FC<MessageItemProps> = ({
                   operation={item.operation}
                   operationIndex={opIdx}
                   approvalDecision={operationDecisions?.get(opIdx)}
-                  onToggleDecision={needsApproval && hasMultiplePendingOps ? onToggleOperationDecision : undefined}
-                  onApprove={needsApproval && !hasMultiplePendingOps && onApproveOperation ? (idx) => onApproveOperation(message, idx) : undefined}
-                  onReject={needsApproval && !hasMultiplePendingOps && onRejectOperation ? (idx) => onRejectOperation(message, idx) : undefined}
+                  onToggleDecision={onToggleOperationDecision}
+                  onApprove={() => onApproveOperation(message, opIdx)}
+                  onReject={() => onRejectOperation(message, opIdx)}
                   hasMultipleOperations={hasMultiplePendingOps}
                 />
               );
diff --git a/packages/cletus/src/browser/components/MessageList.tsx b/packages/cletus/src/browser/components/MessageList.tsx
index 423418a..28eeb2a 100644
--- a/packages/cletus/src/browser/components/MessageList.tsx
+++ b/packages/cletus/src/browser/components/MessageList.tsx
@@ -8,8 +8,8 @@ interface MessageListProps {
   loading?: boolean;
   operationDecisions?: Map<number, 'approve' | 'reject'>;
   onToggleOperationDecision?: (idx: number, decision: 'approve' | 'reject') => void;
-  onApproveOperation?: (message: Message, idx: number) => void;
-  onRejectOperation?: (message: Message, idx: number) => void;
+  onApproveOperation: (message: Message, idx: number) => void;
+  onRejectOperation: (message: Message, idx: number) => void;
 }
 
 export const MessageList: React.FC<MessageListProps> = ({
@@ -46,7 +46,7 @@ export const MessageList: React.FC<MessageListProps> = ({
             // Check if this is the last message with pending operations
             // const isLastMessage = index === messages.length - 1;
             // const hasPendingOps = message.operations?.some(op => op.status === 'analyzed');
-            const pendingOpCount = message.operations?.filter(op => op.status === 'analyzed').length || 0;
+            const pendingOpCount = message.operations?.filter(op => op.status === 'analyzed' || op.status === 'doing').length || 0;
 
             return (
               <MessageItem
diff --git a/packages/cletus/src/browser/components/OperationApprovalPanel.tsx b/packages/cletus/src/browser/components/OperationApprovalPanel.tsx
deleted file mode 100644
index 232ae7d..0000000
--- a/packages/cletus/src/browser/components/OperationApprovalPanel.tsx
+++ /dev/null
@@ -1,178 +0,0 @@
-import React, { useState } from 'react';
-import { CheckCircle2, XCircle, AlertCircle } from 'lucide-react';
-import { Button } from './ui/button';
-import type { Message } from '../../schemas';
-
-interface OperationApprovalPanelProps {
-  message: Message;
-  onApproveReject: (approved: number[], rejected: number[]) => void;
-}
-
-export const OperationApprovalPanel: React.FC<OperationApprovalPanelProps> = ({
-  message,
-  onApproveReject,
-}) => {
-  const [operationDecisions, setOperationDecisions] = useState<Map<number, 'approve' | 'reject'>>(new Map());
-
-  // Get operations that need approval
-  const approvableOperations = (message.operations || [])
-    .map((op, idx) => ({ op, idx }))
-    .filter(({ op }) => op.status === 'analyzed');
-
-  if (approvableOperations.length === 0) {
-    return null;
-  }
-
-  const hasMultipleOperations = approvableOperations.length > 1;
-
-  const handleApproveAll = () => {
-    const approved = approvableOperations.map(({ idx }) => idx);
-    onApproveReject(approved, []);
-  };
-
-  const handleRejectAll = () => {
-    const rejected = approvableOperations.map(({ idx }) => idx);
-    onApproveReject([], rejected);
-  };
-
-  const handleToggleOperation = (idx: number) => {
-    const newDecisions = new Map(operationDecisions);
-    const currentDecision = newDecisions.get(idx);
-
-    if (currentDecision === 'approve') {
-      newDecisions.set(idx, 'reject');
-    } else if (currentDecision === 'reject') {
-      newDecisions.delete(idx); // Back to undecided
-    } else {
-      newDecisions.set(idx, 'approve');
-    }
-
-    setOperationDecisions(newDecisions);
-  };
-
-  const handleSubmitDecisions = () => {
-    const approved: number[] = [];
-    const rejected: number[] = [];
-
-    approvableOperations.forEach(({ idx }) => {
-      const decision = operationDecisions.get(idx);
-      if (decision === 'approve') {
-        approved.push(idx);
-      } else if (decision === 'reject') {
-        rejected.push(idx);
-      } else {
-        // Undecided operations are rejected by default
-        rejected.push(idx);
-      }
-    });
-
-    onApproveReject(approved, rejected);
-  };
-
-  const getOperationIcon = (idx: number) => {
-    const decision = operationDecisions.get(idx);
-    if (decision === 'approve') {
-      return <CheckCircle2 className="w-5 h-5 text-green-400" />;
-    } else if (decision === 'reject') {
-      return <XCircle className="w-5 h-5 text-red-400" />;
-    }
-    return <AlertCircle className="w-5 h-5 text-yellow-400" />;
-  };
-
-  const getOperationName = (type: string) => {
-    return type.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
-  };
-
-  return (
-    <div className="border border-yellow-500/30 rounded-lg p-4 mb-4 bg-yellow-500/5">
-      <div className="flex items-center gap-2 mb-3">
-        <AlertCircle className="w-5 h-5 text-yellow-400" />
-        <h3 className="font-semibold text-yellow-400">
-          {approvableOperations.length} {approvableOperations.length === 1 ? 'Operation' : 'Operations'} Require Approval
-        </h3>
-      </div>
-
-      {/* Quick actions for multiple operations */}
-      {hasMultipleOperations && (
-        <div className="flex gap-2 mb-3">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleApproveAll}
-            className="text-green-400 border-green-400/30 hover:bg-green-400/10"
-          >
-            <CheckCircle2 className="w-4 h-4 mr-2" />
-            Approve All
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleRejectAll}
-            className="text-red-400 border-red-400/30 hover:bg-red-400/10"
-          >
-            <XCircle className="w-4 h-4 mr-2" />
-            Reject All
-          </Button>
-        </div>
-      )}
-
-      {/* Operation list */}
-      <div className="space-y-2 mb-3">
-        {approvableOperations.map(({ op, idx }) => (
-          <div
-            key={idx}
-            className="flex items-start gap-3 p-3 rounded border border-border bg-card/30 cursor-pointer hover:bg-card/50 transition-colors"
-            onClick={() => handleToggleOperation(idx)}
-          >
-            <div className="flex-shrink-0 mt-0.5">
-              {getOperationIcon(idx)}
-            </div>
-            <div className="flex-1 min-w-0">
-              <div className="font-medium text-sm">{getOperationName(op.type)}</div>
-              {op.analysis && (
-                <div className="text-xs text-muted-foreground mt-1">{op.analysis}</div>
-              )}
-            </div>
-          </div>
-        ))}
-      </div>
-
-      {/* Submit button for individual decisions */}
-      {hasMultipleOperations && (
-        <div className="flex justify-end">
-          <Button
-            variant="neon"
-            size="sm"
-            onClick={handleSubmitDecisions}
-          >
-            Submit Decisions
-          </Button>
-        </div>
-      )}
-
-      {/* Single operation buttons */}
-      {!hasMultipleOperations && (
-        <div className="flex gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleApproveAll}
-            className="flex-1 text-green-400 border-green-400/30 hover:bg-green-400/10"
-          >
-            <CheckCircle2 className="w-4 h-4 mr-2" />
-            Approve
-          </Button>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleRejectAll}
-            className="flex-1 text-red-400 border-red-400/30 hover:bg-red-400/10"
-          >
-            <XCircle className="w-4 h-4 mr-2" />
-            Reject
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx b/packages/cletus/src/browser/components/OperationDisplay.tsx
similarity index 92%
rename from packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
rename to packages/cletus/src/browser/components/OperationDisplay.tsx
index 6385501..f49dcf1 100644
--- a/packages/cletus/src/browser/operations/BaseOperationDisplay.tsx
+++ b/packages/cletus/src/browser/components/OperationDisplay.tsx
@@ -4,8 +4,44 @@ import remarkGfm from 'remark-gfm';
 import { CheckCircle2, XCircle, Loader2 } from 'lucide-react';
 import { Operation } from '../../schemas';
 import { cn } from '../lib/utils';
-import { getStatusInfo, getElapsedTime } from './render';
-import { Button } from '../components/ui/button';
+import { Button } from './ui/button';
+
+
+/**
+ * Get status color and label for an operation status
+ */
+export function getStatusInfo(status: Operation['status']): { color: string; label: string } {
+  switch (status) {
+    case 'done':
+      return { color: 'text-green-400', label: 'completed' };
+    case 'doing':
+      return { color: 'text-orange-400', label: 'in progress' };
+    case 'analyzed':
+      return { color: 'text-yellow-400', label: 'pending approval' };
+    case 'doneError':
+      return { color: 'text-red-400', label: 'error' };
+    case 'analyzeError':
+      return { color: 'text-red-400', label: 'analysis error' };
+    case 'analyzedBlocked':
+      return { color: 'text-red-400', label: 'blocked' };
+    case 'rejected':
+      return { color: 'text-red-400', label: 'rejected' };
+    default:
+      return { color: 'text-muted-foreground', label: status };
+  }
+}
+
+/**
+ * Calculate elapsed time for an operation
+ */
+export function getElapsedTime(op: Operation): string {
+  if (!op.start) return '';
+  const duration = op.end ? op.end - op.start : Date.now() - op.start;
+
+  if (duration < 1000) return `${Math.round(duration)}ms`;
+  if (duration < 60000) return `${(duration / 1000).toFixed(1)}s`;
+  return `${Math.floor(duration / 60000)}m ${Math.round((duration % 60000) / 1000)}s`;
+}
 
 /**
  * Checks if an array can be rendered as a table
@@ -330,7 +366,7 @@ const OperationDetails: React.FC<{ operation: Operation }> = ({ operation }) =>
   );
 };
 
-export interface BaseOperationDisplayProps {
+export interface OperationDisplayProps {
   operation: Operation;
   label: string;
   summary?: React.ReactNode | string | null;
@@ -349,7 +385,7 @@ export interface BaseOperationDisplayProps {
 /**
  * Base operation display component with consistent styling
  */
-export const BaseOperationDisplay: React.FC<BaseOperationDisplayProps> = ({
+export const OperationDisplay: React.FC<OperationDisplayProps> = ({
   operation,
   label,
   summary,
@@ -374,19 +410,6 @@ export const BaseOperationDisplay: React.FC<BaseOperationDisplayProps> = ({
   const needsApproval = operation.status === 'analyzed';
   const isOperationProcessing = operation.status === 'doing';
 
-  // Debug logging
-  if (needsApproval) {
-    console.log('Operation needs approval:', {
-      label,
-      operationIndex,
-      hasMultipleOperations,
-      hasOnApprove: !!onApprove,
-      hasOnReject: !!onReject,
-      hasOnToggle: !!onToggleDecision,
-      status: operation.status,
-    });
-  }
-
   return (
     <div className={cn('mb-3 rounded-lg p-3', needsApproval ? 'bg-yellow-500/5 border ' + borderColor : bgColor)}>
       {/* Header - Clickable */}
@@ -422,7 +445,7 @@ export const BaseOperationDisplay: React.FC<BaseOperationDisplayProps> = ({
       )}
 
       {/* Approval Buttons */}
-      {needsApproval && operationIndex !== undefined && (
+      {(needsApproval || isOperationProcessing) && operationIndex !== undefined && (
         <div className="ml-6 mb-2">
           {!hasMultipleOperations && onApprove && onReject ? (
             // Single operation: immediate approve/reject
diff --git a/packages/cletus/src/browser/operations/index.tsx b/packages/cletus/src/browser/operations/index.tsx
index 0fc11fe..2a04044 100644
--- a/packages/cletus/src/browser/operations/index.tsx
+++ b/packages/cletus/src/browser/operations/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Operation, OperationKind } from '../../schemas';
-import { OperationDisplayProps } from './render';
+import { RendererDisplayProps } from './render';
 
 // Import operation-specific renderers
 import * as clerk from './clerk';
@@ -46,7 +46,7 @@ const OperationRenderers: Record<OperationKind, React.FC<{
 /**
  * Main operation display component that delegates to specific renderers
  */
-export const OperationDisplay: React.FC<OperationDisplayProps> = (props) => {
+export const OperationDisplay: React.FC<RendererDisplayProps> = (props) => {
   const Renderer = OperationRenderers[props.operation.type];
 
   return <Renderer {...props} />;
diff --git a/packages/cletus/src/browser/operations/render.tsx b/packages/cletus/src/browser/operations/render.tsx
index 1257f49..ee475d5 100644
--- a/packages/cletus/src/browser/operations/render.tsx
+++ b/packages/cletus/src/browser/operations/render.tsx
@@ -1,73 +1,38 @@
 import React from 'react';
 import { Operation, OperationKind } from '../../schemas';
 import { OperationDataFor } from '../../operations/types';
-import { BaseOperationDisplay, BaseOperationDisplayProps } from './BaseOperationDisplay';
+import { OperationDisplay, OperationDisplayProps } from '../components/OperationDisplay';
 
-/**
- * Get status color and label for an operation status
- */
-export function getStatusInfo(status: Operation['status']): { color: string; label: string } {
-  switch (status) {
-    case 'done':
-      return { color: 'text-green-400', label: 'completed' };
-    case 'doing':
-      return { color: 'text-orange-400', label: 'in progress' };
-    case 'analyzed':
-      return { color: 'text-yellow-400', label: 'pending approval' };
-    case 'doneError':
-      return { color: 'text-red-400', label: 'error' };
-    case 'analyzeError':
-      return { color: 'text-red-400', label: 'analysis error' };
-    case 'analyzedBlocked':
-      return { color: 'text-red-400', label: 'blocked' };
-    case 'rejected':
-      return { color: 'text-red-400', label: 'rejected' };
-    default:
-      return { color: 'text-muted-foreground', label: status };
-  }
-}
-
-/**
- * Calculate elapsed time for an operation
- */
-export function getElapsedTime(op: Operation): string {
-  if (!op.start) return '';
-  const duration = op.end ? op.end - op.start : Date.now() - op.start;
-
-  if (duration < 1000) return `${Math.round(duration)}ms`;
-  if (duration < 60000) return `${(duration / 1000).toFixed(1)}s`;
-  return `${Math.floor(duration / 60000)}m ${Math.round((duration % 60000) / 1000)}s`;
-}
 
-export interface OperationDisplayProps {
-  operation: Operation;
-  operationIndex?: number;
-  onApprove?: (index: number) => void;
-  onReject?: (index: number) => void;
-  approvalDecision?: 'approve' | 'reject';
-  onToggleDecision?: (index: number, decision: 'approve' | 'reject') => void;
-  hasMultipleOperations?: boolean;
-}
+export type RendererDisplayProps = Pick<OperationDisplayProps, 
+  'operation' | 
+  'operationIndex' |
+  'onApprove' |
+  'onReject' |
+  'approvalDecision' |
+  'onToggleDecision' |
+  'hasMultipleOperations'
+>;
 
 /**
  * Create a renderer for a specific operation kind
  * @param common 
  * @returns 
  */
-export const createRenderer = (common: Partial<BaseOperationDisplayProps> = {}) => {
+export const createRenderer = (common: Partial<OperationDisplayProps> = {}) => {
   return <K extends OperationKind>(
     getLabel: (op: OperationDataFor<K>) => string, 
     getSummary?: (op: OperationDataFor<K>) => string | React.ReactNode | null,
-    getProps?: (op: OperationDataFor<K>) => Partial<BaseOperationDisplayProps>
+    getProps?: (op: OperationDataFor<K>) => Partial<OperationDisplayProps>
   ) => {
-    return (props: OperationDisplayProps) => {
+    return (props: RendererDisplayProps) => {
       const operation = props.operation as any as OperationDataFor<K>;
       const label = getLabel(operation);
       const summary = operation.error || (getSummary ? getSummary(operation) : null) || operation.analysis;
       const additionalProps = getProps ? getProps(operation) : {};
 
       return (
-        <BaseOperationDisplay
+        <OperationDisplay
           {...common}
           {...props}
           {...additionalProps}
diff --git a/packages/cletus/src/browser/server.ts b/packages/cletus/src/browser/server.ts
index 1f75162..0400ef6 100644
--- a/packages/cletus/src/browser/server.ts
+++ b/packages/cletus/src/browser/server.ts
@@ -6,7 +6,7 @@ import { WebSocketServer, WebSocket } from 'ws';
 import { configExists } from '../file-manager';
 import { ConfigFile } from '../config';
 import { ChatFile } from '../chat';
-import type { Message, ChatMeta, MessageContent } from '../schemas';
+import type { Message, ChatMeta, MessageContent, OperationStatus } from '../schemas';
 import type { ClientMessage, ServerMessage } from './websocket-types';
 import { OperationManager } from '../operations/manager';
 import { CletusAI, createCletusAI } from '../ai';
@@ -762,17 +762,26 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
                 manager.updateMessage(operations[idx]);
               }
             }
+            
+            // Emit fake doing for now
+            const previousStatus: Record<number, OperationStatus> = {};
+            for (const idx of approved) {
+              if (operations[idx]) {
+                previousStatus[idx] = operations[idx].status;
+                operations[idx].status = 'doing';
+              }
+            }
 
             // Save and broadcast the updated operation statuses immediately
-            await chatFile.updateMessage(targetMessage);
+            chatFile.updateMessage(targetMessage);
             broadcastMessageUpdate();
 
-            // Ensure AI and chat agent are loaded
-            const { ai: aiInstance } = await ensureAI();
-
             // Execute approved operations
             let hasExecutedOperations = false;
             if (approved.length > 0) {
+              // Ensure AI and chat agent are loaded
+              const { ai: aiInstance } = await ensureAI();
+
               // Start operation for this chat
               const abortController = chatOperationManager.startOperation(chatId);
 
@@ -800,6 +809,7 @@ async function handleWebSocketConnection(ws: WebSocket): Promise<void> {
 
                 for (const idx of approved) {
                   if (operations[idx]) {
+                    operations[idx].status = previousStatus[idx] || 'analyzed';
                     await manager.execute(operations[idx], true, ctx);
                     hasExecutedOperations = true;
                   }

From 8fba633b9578460caba9305ddd0b337502901a12 Mon Sep 17 00:00:00 2001
From: Philip Diffenderfer <pdiffenderfer@gmail.com>
Date: Fri, 19 Dec 2025 22:14:46 -0500
Subject: [PATCH 27/27] Update cletus agent guidelines and tool instructions

Expanded documentation for the cletus agent to include browser architecture, stricter TypeScript guidelines, and detailed instructions for adding and implementing tools and operations. Clarifies operation execution, code reuse, and rendering practices for both CLI and web environments.
---
 .github/agents/cletus.md | 47 +++++++++++++++++++++++++++-------------
 1 file changed, 32 insertions(+), 15 deletions(-)

diff --git a/.github/agents/cletus.md b/.github/agents/cletus.md
index e4ad353..514fe52 100644
--- a/.github/agents/cletus.md
+++ b/.github/agents/cletus.md
@@ -10,18 +10,35 @@ description: An agent that understands the cletus package.
 
 # Cletus Developer
 
-This agent updates the packages/cletus package which is a CLI AI agent focused on file and data management.
-Before creating a new function, look throughout codebase for a similar function/behavior. Try to reuse that.
-Try to parallelize operations where possible.
-Long running operations should have chatStatus updates.
-Importing files should be done with searchFiles + processFile.
-
-### Adding Tools
-How to:
-1. Add tool name to OperationKindSchema in schemas.ts
-2. Add tool definition in tools/[agent].ts, add it to tool list at the bottom
-3. Add tool operation implementation in operations/[agent].tsx
-
-### Update Tools
-1. Update tool definition in tools/[agent].ts
-2. Update tool operation implementation in operations/[agent].tsx
+This agent updates the packages/cletus package which is a CLI & browser AI agent focused on file and data management.
+
+The browser version has a TypeScript & Node backend that communicates with the frontend via websockets. The front-end is built with TypeScript & React.
+
+## aeye Coding Guidelines:
+1. Avoid using `any`, `unknown`, or `as X` casts. These methods hide type issues and make code less safe.
+2. Types should not be redefined - import them from their source. Most types are in packages/cletus/src/common/types or packages/cletus/src/common/schemas.
+3. If you need a subset or transformed version of a type - use TypeScript utility types (Pick, Omit, etc) over redefining.
+4. When you see duplicate code, consider refactoring it into a reusable function or component.
+5. A lot of utility functions are in packages/cletus/src/shared. Check there before creating new ones (`pluralize`, `formatName`, `abbreviate`, `formatSize`, `formatTime`, `formatSize`, `chunk`, `group`, `gate`, `paginateText`, etc).
+
+
+## Adding Tools & Operations
+
+Some tools have operation counterparts. Operations are an action that could require user approval before execution. An analysis is run if the user needs to give permission and informs the LLM of what will be done. Once approved, the operation is executed.
+
+The tools that don't fit into the operation model (like utility tools) can be added as regular tools in the utility tools section.
+
+### Operation Guidelines
+
+- The base operation types are in packages/cletus/src/operations/types.ts
+- The operation implementation and CLI rendering are in packages/cletus/src/operations/[toolset].tsx
+- Each operation should be defined in OperationKindSchema in packages/cletus/src/schemas.ts
+- The web renderers for operations are in packages/cletus/src/browser/operations/[toolset].tsx. A web renderer must be defined.
+- The tool definition is in packages/cletus/src/tools/[toolset].ts
+
+### Operation Execution
+
+- Try to parallelize operations in `do` where possible.
+- Long running operations should have chatStatus updates. (if it involves iterating over long running tasks, embedding, file processing, making prompt calls, etc)
+- Importing files should be done with searchFiles + processFile.
+- If something in any render function depends on certain things existing (files, types, etc) the parts that should be rendered can be placed in the operation's cache during analysis/execution and rendered conditionally based on their presence. That way when things change or are removed the rendering is consistent.