@calliopelabs/cli 0.4.6 → 0.6.0

package/dist/ui-cli.js

@@ -1,19 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Calliope CLI - Ink UI Integration
+ * Calliope CLI - Ink UI
  *
- * Connects the ink-based UI to the existing agent/provider logic.
+ * Component hierarchy inspired by Claude Code:
+ * App
+ * └── TerminalChat (main hub)
+ *     ├── MessageHistory (Static for messages)
+ *     │   └── MessageItem (formatted messages)
+ *     ├── ProcessingIndicator (animated spinner)
+ *     ├── ChatInput (input line)
+ *     └── StatusBar (footer)
  */
 import { useState, useCallback, useRef, useEffect } from 'react';
 import { render, Box, Text, useInput, useApp, useStdout, Static } from 'ink';
 import TextInput from 'ink-text-input';
+import * as fs from 'fs';
 import * as config from './config.js';
 import { chat, getAvailableProviders, selectProvider } from './providers.js';
 import { TOOLS, executeTool } from './tools.js';
-import { getSystemPrompt, DEFAULT_MODELS } from './types.js';
+import { getSystemPrompt, DEFAULT_MODELS, MODE_CONFIG, RISK_CONFIG, supportsVision, calculateCost } from './types.js';
 import { getVersion, getLatestVersion, performUpgrade } from './version-check.js';
 import { getAvailableModels } from './model-detection.js';
-// ASCII Banner
+import { assessToolRisk } from './risk.js';
+import { formatError } from './errors.js';
+import * as storage from './storage.js';
+import { parseFileReferences, processFilesForMessage, formatFileInfo } from './files.js';
+import { renderMarkdown } from './markdown.js';
+import * as mcp from './mcp.js';
+import * as skills from './skills.js';
+import * as memory from './memory.js';
+import * as hooks from './hooks.js';
+import * as modelRouter from './model-router.js';
+import * as summarization from './summarization.js';
+import { requiresConfirmation } from './risk.js';
+// ============================================================================
+// Constants
+// ============================================================================
 const BANNER_LINES = [
     ' ██████╗ █████╗ ██╗     ██╗     ██╗ ██████╗ ██████╗ ███████╗',
     '██╔════╝██╔══██╗██║     ██║     ██║██╔═══██╗██╔══██╗██╔════╝',
@@ -22,185 +44,367 @@ const BANNER_LINES = [
     '╚██████╗██║  ██║███████╗███████╗██║╚██████╔╝██║     ███████╗',
     ' ╚═════╝╚═╝  ╚═╝╚══════╝╚══════╝╚═╝ ╚═════╝ ╚═╝     ╚══════╝',
 ];
-// Format helpers
-const formatTokens = (n) => n >= 1000 ? `${(n / 1000).toFixed(1)}K` : String(n);
-const formatCost = (c) => c < 0.01 ? '<$0.01' : `$${c.toFixed(2)}`;
-const formatTime = (d) => {
-    const s = Math.floor((Date.now() - d.getTime()) / 1000);
-    if (s < 60)
-        return `${s}s`;
-    const m = Math.floor(s / 60);
-    return m < 60 ? `${m}m` : `${Math.floor(m / 60)}h${m % 60}m`;
-};
-// Spinner frames
 const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
-// Animated Spinner component
-function Spinner({ label }) {
-    const [frame, setFrame] = useState(0);
-    useEffect(() => {
-        const timer = setInterval(() => {
-            setFrame(f => (f + 1) % SPINNER_FRAMES.length);
-        }, 80);
-        return () => clearInterval(timer);
-    }, []);
-    return (_jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: SPINNER_FRAMES[frame] }), _jsxs(Text, { dimColor: true, children: [" ", label] })] }));
-}
-// Tool icons
 const TOOL_ICONS = {
     shell: '⚡',
     read_file: '📄',
     write_file: '✍️',
     list_files: '📁',
     think: '💭',
+    execute_code: '▶️',
+    web_search: '🔍',
+    git: '🔀',
+    mermaid: '📊',
 };
-// Separator
-function Sep() {
+// ============================================================================
+// Utility Components
+// ============================================================================
+function Separator() {
     const { stdout } = useStdout();
-    return _jsx(Text, { dimColor: true, children: '─'.repeat(stdout?.columns || 80) });
+    const width = stdout?.columns || 80;
+    return _jsx(Text, { dimColor: true, children: '─'.repeat(width) });
 }
-// Message component with nice formatting
-function Message({ msg }) {
-    if (msg.type === 'user') {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: " " }), _jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "\u203A" }), " ", msg.content] })] }));
-    }
-    if (msg.type === 'assistant') {
-        const lines = msg.content.split('\n');
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { children: " " }), _jsx(Text, { children: _jsx(Text, { color: "cyan", children: "\u2727 Calliope:" }) }), _jsx(Text, { children: " " }), lines.map((line, i) => (_jsxs(Text, { children: [_jsx(Text, { color: "blue", children: "\u2502" }), " ", line] }, i))), _jsx(Text, { children: " " })] }));
-    }
-    if (msg.type === 'tool') {
-        // Parse tool message format: "⚡ tool_name: preview" or just result lines
-        const isToolCall = msg.content.startsWith('⚡');
-        if (isToolCall) {
-            const match = msg.content.match(/^⚡ (\w+): (.*)$/);
-            if (match) {
-                const [, toolName, preview] = match;
-                const icon = TOOL_ICONS[toolName] || '⚙️';
-                return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "\u256D\u2500" }), " ", icon, " ", _jsx(Text, { color: "yellow", children: toolName })] }), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "\u2502" }), "  ", _jsx(Text, { dimColor: true, children: preview })] })] }));
+function ThinkingDisplay({ state }) {
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setFrame(f => (f + 1) % SPINNER_FRAMES.length);
+        }, 80);
+        return () => clearInterval(timer);
+    }, []);
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: SPINNER_FRAMES[frame] }), _jsxs(Text, { children: [" ", state.status] }), state.iteration && state.maxIterations && (_jsxs(Text, { dimColor: true, children: [" (", state.iteration, "/", state.maxIterations, ")"] }))] }), state.detail && (_jsx(Box, { marginLeft: 2, children: _jsxs(Text, { dimColor: true, children: ["\u21B3 ", state.detail] }) })), state.thinking && (_jsxs(Box, { flexDirection: "column", marginLeft: 2, marginTop: 1, children: [_jsx(Text, { color: "magenta", children: "\uD83D\uDCAD Thinking:" }), state.thinking.split('\n').slice(0, 5).map((line, i) => (_jsxs(Text, { dimColor: true, children: ["   ", line.substring(0, 80)] }, i))), state.thinking.split('\n').length > 5 && (_jsx(Text, { dimColor: true, children: "   ..." }))] }))] }));
+}
+// Legacy simple indicator for non-agent operations
+function ProcessingIndicator({ label }) {
+    const [frame, setFrame] = useState(0);
+    useEffect(() => {
+        const timer = setInterval(() => {
+            setFrame(f => (f + 1) % SPINNER_FRAMES.length);
+        }, 80);
+        return () => clearInterval(timer);
+    }, []);
+    return (_jsxs(Box, { marginY: 1, children: [_jsx(Text, { color: "cyan", children: SPINNER_FRAMES[frame] }), _jsxs(Text, { dimColor: true, children: [" ", label] })] }));
+}
+// ============================================================================
+// Message Components
+// ============================================================================
+function MessageItem({ msg }) {
+    switch (msg.type) {
+        case 'user':
+            return (_jsx(Box, { flexDirection: "column", marginTop: 1, children: _jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: "\u203A" }), " ", msg.content] }) }));
+        case 'assistant': {
+            // Render markdown with syntax highlighting
+            const rendered = renderMarkdown(msg.content);
+            const lines = rendered.split('\n');
+            return (_jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, children: [_jsx(Text, { color: "cyan", children: "\u2727 Calliope:" }), _jsx(Text, { children: " " }), lines.map((line, i) => (_jsxs(Text, { children: [_jsx(Text, { color: "blue", children: "\u2502" }), " ", line] }, i)))] }));
+        }
+        case 'tool': {
+            const isToolCall = msg.content.startsWith('⚡');
+            if (isToolCall) {
+                const match = msg.content.match(/^⚡ (\w+): (.*)$/);
+                if (match) {
+                    const [, toolName, preview] = match;
+                    const icon = TOOL_ICONS[toolName] || '⚙️';
+                    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "\u256D\u2500" }), " ", icon, " ", _jsx(Text, { color: "yellow", children: toolName })] }), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "\u2502" }), "  ", _jsx(Text, { dimColor: true, children: preview })] })] }));
+                }
+            }
+            // Check for diff output from write_file
+            const isDiff = msg.content.startsWith('DIFF:');
+            if (isDiff) {
+                const lines = msg.content.split('\n');
+                const header = lines[0];
+                const isNewFile = header.includes('NEW_FILE:');
+                const filePath = isNewFile
+                    ? header.replace('DIFF:NEW_FILE:', '')
+                    : header.replace('DIFF:', '');
+                const diffLines = lines.slice(1, 12);
+                const hasMore = lines.length > 12;
+                return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "\u251C\u2500\u2500" }), _jsxs(Text, { color: "yellow", children: [" ", isNewFile ? '(new file)' : '(modified)'] })] }), diffLines.map((line, i) => {
+                            let color;
+                            if (line.startsWith('+ '))
+                                color = 'green';
+                            else if (line.startsWith('- '))
+                                color = 'red';
+                            else if (line.startsWith('@@'))
+                                color = 'cyan';
+                            return (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "\u2502" }), _jsxs(Text, { color: color, children: ["  ", line.substring(0, 80)] })] }, i));
+                        }), hasMore && _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "\u2502" }), "  ", _jsx(Text, { dimColor: true, children: "..." })] }), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "\u2570\u2500" }), " ", _jsx(Text, { color: "green", children: "\u2713" }), " ", _jsx(Text, { dimColor: true, children: filePath })] })] }));
             }
+            // Regular tool result
+            const lines = msg.content.split('\n').slice(0, 5);
+            const hasMore = msg.content.split('\n').length > 5;
+            const hasError = msg.content.toLowerCase().includes('error');
+            return (_jsxs(Box, { flexDirection: "column", children: [lines.map((line, i) => (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "\u2502" }), "  ", _jsx(Text, { dimColor: true, children: line.substring(0, 100) })] }, i))), hasMore && _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "\u2502" }), "  ", _jsx(Text, { dimColor: true, children: "..." })] }), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "\u2570\u2500" }), " ", hasError ? _jsx(Text, { color: "red", children: "\u2717" }) : _jsx(Text, { color: "green", children: "\u2713" })] })] }));
         }
-        // Tool result
-        const lines = msg.content.split('\n').slice(0, 5);
-        const hasMore = msg.content.split('\n').length > 5;
-        const hasError = msg.content.toLowerCase().includes('error');
-        return (_jsxs(Box, { flexDirection: "column", children: [lines.map((line, i) => (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "\u2502" }), "  ", _jsx(Text, { dimColor: true, children: line.substring(0, 100) })] }, i))), hasMore && _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "\u2502" }), "  ", _jsx(Text, { dimColor: true, children: "..." })] }), _jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: "\u2570\u2500" }), " ", hasError ? _jsx(Text, { color: "red", children: "\u2717" }) : _jsx(Text, { color: "green", children: "\u2713" })] })] }));
+        case 'system':
+            return _jsx(Text, { color: "yellow", children: msg.content });
+        case 'error':
+            return _jsxs(Text, { color: "red", children: ["\u2717 ", msg.content] });
+        default:
+            return _jsx(Text, { children: msg.content });
     }
-    if (msg.type === 'system') {
-        return _jsx(Text, { color: "yellow", children: msg.content });
-    }
-    // error
-    return _jsxs(Text, { color: "red", children: ["\u2717 ", msg.content] });
 }
-function ModelSelector({ models, selectedIndex, onSelect, onCancel }) {
-    const [index, setIndex] = useState(selectedIndex);
+function MessageHistory({ messages }) {
+    return (_jsx(Static, { items: messages, children: (msg) => (_jsx(Box, { children: _jsx(MessageItem, { msg: msg }) }, msg.id)) }));
+}
+// ============================================================================
+// Modal Components
+// ============================================================================
+function ModelSelector({ models, onSelect, onCancel }) {
+    const [index, setIndex] = useState(0);
     const pageSize = 10;
     const start = Math.max(0, Math.min(index - Math.floor(pageSize / 2), models.length - pageSize));
     const visible = models.slice(start, start + pageSize);
     useInput((input, key) => {
-        if (key.upArrow) {
+        if (key.upArrow)
             setIndex(i => Math.max(0, i - 1));
-        }
-        else if (key.downArrow) {
+        else if (key.downArrow)
             setIndex(i => Math.min(models.length - 1, i + 1));
-        }
-        else if (key.return) {
+        else if (key.return)
             onSelect(models[index].id);
-        }
-        else if (key.escape || input === 'q') {
+        else if (key.escape || input === 'q')
             onCancel();
-        }
     });
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "yellow", children: "Select model (\u2191/\u2193 navigate, Enter select, Esc cancel):" }), visible.map((model, i) => {
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsx(Text, { color: "yellow", children: "Select model (\u2191/\u2193 navigate, Enter select, Esc cancel):" }), visible.map((model, i) => {
                 const globalIndex = start + i;
                 const isSelected = globalIndex === index;
                 const name = model.name || model.id;
                 const displayName = name.length > 50 ? name.slice(0, 47) + '...' : name;
-                return (_jsx(Box, { children: _jsxs(Text, { color: isSelected ? 'cyan' : undefined, bold: isSelected, children: [isSelected ? '❯ ' : '  ', displayName] }) }, model.id));
+                return (_jsxs(Text, { color: isSelected ? 'cyan' : undefined, bold: isSelected, children: [isSelected ? '❯ ' : '  ', displayName] }, model.id));
             }), models.length > pageSize && (_jsxs(Text, { dimColor: true, children: ["  (", index + 1, "/", models.length, ")"] }))] }));
 }
 function UpgradePrompt({ currentVersion, latestVersion, onConfirm, onCancel }) {
     useInput((input, key) => {
-        if (input === 'y' || input === 'Y') {
+        if (input === 'y' || input === 'Y')
             onConfirm();
-        }
-        else if (input === 'n' || input === 'N' || key.escape) {
+        else if (input === 'n' || input === 'N' || key.escape)
             onCancel();
-        }
     });
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "yellow", children: ["Update available: v", currentVersion, " \u2192 ", _jsxs(Text, { color: "green", children: ["v", latestVersion] })] }), _jsxs(Text, { children: ["Upgrade now? ", _jsx(Text, { color: "cyan", children: "(y/N)" })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, children: [_jsxs(Text, { color: "yellow", children: ["Update available: v", currentVersion, " \u2192 ", _jsxs(Text, { color: "green", children: ["v", latestVersion] })] }), _jsxs(Text, { children: ["Upgrade now? ", _jsx(Text, { color: "cyan", children: "(y/N)" })] })] }));
+}
+function ToolConfirmation({ toolCall, riskLevel, reason, onConfirm, onDeny }) {
+    useInput((input, key) => {
+        if (input === 'y' || input === 'Y')
+            onConfirm();
+        else if (input === 'n' || input === 'N' || key.escape)
+            onDeny();
+    });
+    const args = toolCall.arguments;
+    const preview = String(args.command || args.path || args.operation || '...');
+    const riskColor = riskLevel === 'critical' ? 'red' : 'yellow';
+    const riskIcon = riskLevel === 'critical' ? '⚠️' : '⚡';
+    return (_jsxs(Box, { flexDirection: "column", marginY: 1, borderStyle: "round", borderColor: riskColor, paddingX: 1, children: [_jsxs(Text, { color: riskColor, bold: true, children: [riskIcon, " ", riskLevel.toUpperCase(), " RISK OPERATION"] }), _jsx(Text, { children: " " }), _jsxs(Text, { children: ["Tool: ", _jsx(Text, { color: "cyan", children: toolCall.name })] }), _jsxs(Text, { children: ["Command: ", _jsx(Text, { dimColor: true, children: preview.substring(0, 60) })] }), _jsxs(Text, { children: ["Reason: ", _jsx(Text, { dimColor: true, children: reason })] }), _jsx(Text, { children: " " }), _jsxs(Text, { children: ["Execute this operation? ", _jsx(Text, { color: "cyan", children: "(y/N)" })] })] }));
+}
+// ============================================================================
+// Input Components
+// ============================================================================
+function ChatInput({ value, onChange, onSubmit, disabled, mode }) {
+    if (disabled)
+        return null;
+    const modeConfig = MODE_CONFIG[mode];
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Separator, {}), _jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: "calliope " }), _jsx(Text, { children: modeConfig.icon }), _jsx(Text, { dimColor: true, children: "> " }), _jsx(TextInput, { value: value, onChange: onChange, onSubmit: onSubmit })] })] }));
+}
+// Context window limits by model (approximate)
+const CONTEXT_LIMITS = {
+    'claude-sonnet-4': 200000,
+    'claude-opus-4': 200000,
+    'claude-3': 200000,
+    'gpt-4o': 128000,
+    'gpt-4-turbo': 128000,
+    'gpt-4': 8192,
+    'gemini-2': 1000000,
+    'gemini-1.5-pro': 1000000,
+    'gemini-1.5-flash': 1000000,
+    'llama-3.3': 128000,
+    'llama-3.1': 128000,
+    'mistral-large': 128000,
+    'default': 32000,
+};
+function getContextLimit(model) {
+    for (const [key, limit] of Object.entries(CONTEXT_LIMITS)) {
+        if (model.toLowerCase().includes(key.toLowerCase())) {
+            return limit;
+        }
+    }
+    return CONTEXT_LIMITS.default;
 }
-// Main App
-function App({ skipPermissions = false }) {
+function StatusBar({ provider, model, stats, mode, contextTokens, }) {
+    const formatTokens = (n) => n >= 1000 ? `${(n / 1000).toFixed(1)}K` : String(n);
+    const formatCost = (c) => c < 0.01 ? '<$0.01' : `$${c.toFixed(2)}`;
+    const displayModel = model.length > 25 ? model.slice(0, 22) + '...' : model;
+    const modeConfig = MODE_CONFIG[mode];
+    // Context usage indicator
+    const contextLimit = getContextLimit(model);
+    const contextPct = Math.min(100, Math.round((contextTokens / contextLimit) * 100));
+    const contextColor = contextPct > 80 ? 'red' : contextPct > 50 ? 'yellow' : 'green';
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Separator, {}), _jsxs(Text, { dimColor: true, children: [modeConfig.icon, " ", modeConfig.label, ' │ ', provider, ":", displayModel, ' │ ', _jsxs(Text, { color: contextColor, children: [formatTokens(contextTokens), "/", formatTokens(contextLimit)] }), ' │ ', formatTokens(stats.inputTokens + stats.outputTokens), " used", ' │ ', formatCost(stats.cost), ' │ ', _jsx(Text, { dimColor: true, children: "Esc: exit" })] })] }));
+}
+// ============================================================================
+// Main Chat Component
+// ============================================================================
+function TerminalChat() {
     const { exit } = useApp();
     const { stdout } = useStdout();
-    // State
+    const width = stdout?.columns || 80;
+    // Core state
     const [input, setInput] = useState('');
     const [messages, setMessages] = useState([]);
     const [isProcessing, setIsProcessing] = useState(false);
+    const [thinkingState, setThinkingState] = useState(null);
+    const [streamingResponse, setStreamingResponse] = useState('');
+    // Config state
     const [provider, setProvider] = useState(config.get('defaultProvider'));
     const [model, setModel] = useState(config.get('defaultModel'));
     const [persona, setPersona] = useState(config.get('persona'));
-    // Model selection state
-    const [modelSelectMode, setModelSelectMode] = useState(false);
+    const [mode, setMode] = useState('hybrid'); // Default to hybrid mode
+    const [confirmMode, setConfirmMode] = useState(true); // Require confirmation for risky ops
+    // Modal state
+    const [modalMode, setModalMode] = useState('none');
+    const [pendingToolCall, setPendingToolCall] = useState(null);
     const [availableModels, setAvailableModels] = useState([]);
-    const [modelLoading, setModelLoading] = useState(false);
-    // Upgrade state
-    const [upgradeMode, setUpgradeMode] = useState(false);
     const [latestVersion, setLatestVersion] = useState(null);
-    const [upgrading, setUpgrading] = useState(false);
+    // Stats
     const [stats, setStats] = useState({
-        provider: selectProvider(config.get('defaultProvider')),
-        model: config.get('defaultModel') || DEFAULT_MODELS[selectProvider(config.get('defaultProvider'))],
         inputTokens: 0,
         outputTokens: 0,
         cost: 0,
-        messages: 0,
-        startTime: new Date(),
+        messageCount: 0,
     });
-    // Conversation history for LLM
+    const [contextTokens, setContextTokens] = useState(0);
+    // LLM conversation history
     const llmMessages = useRef([
         { role: 'system', content: getSystemPrompt(persona) }
     ]);
-    // Add UI message
+    // Estimate context tokens (rough: ~4 chars per token)
+    const estimateContextTokens = useCallback(() => {
+        let chars = 0;
+        for (const msg of llmMessages.current) {
+            if (typeof msg.content === 'string') {
+                chars += msg.content.length;
+            }
+            else if (Array.isArray(msg.content)) {
+                for (const block of msg.content) {
+                    if (block.type === 'text') {
+                        chars += block.text.length;
+                    }
+                    else if (block.type === 'image') {
+                        chars += 1000; // Images count as ~250 tokens
+                    }
+                }
+            }
+        }
+        return Math.round(chars / 4);
+    }, []);
+    // Session state
+    const sessionRef = useRef(null);
+    const [autoRoute, setAutoRoute] = useState(false); // Auto model routing
+    const [memoryLoaded, setMemoryLoaded] = useState(false);
+    // Initialize session and load memory on mount
+    useEffect(() => {
+        const session = storage.getOrCreateSession(process.cwd());
+        sessionRef.current = session;
+        // Load memory context into system prompt
+        if (!memoryLoaded) {
+            const cwd = process.cwd();
+            const memoryContext = memory.buildMemoryContext(cwd);
+            if (memoryContext.trim()) {
+                // Append memory context to system prompt
+                const currentSystem = llmMessages.current[0];
+                if (currentSystem && currentSystem.role === 'system') {
+                    const systemContent = typeof currentSystem.content === 'string'
+                        ? currentSystem.content
+                        : '';
+                    llmMessages.current[0] = {
+                        role: 'system',
+                        content: systemContent + '\n\n--- Project Context ---\n' + memoryContext,
+                    };
+                }
+            }
+            setMemoryLoaded(true);
+            // Execute session start hooks
+            hooks.executeHooks('session-start', {}).catch(() => { });
+        }
+    }, [memoryLoaded]);
+    // Derived values
+    const actualProvider = selectProvider(provider);
+    const actualModel = model || DEFAULT_MODELS[actualProvider];
+    const isModalActive = modalMode !== 'none';
+    // Add message helper
     const addMessage = useCallback((type, content) => {
-        setMessages(prev => [...prev, { id: `${Date.now()}-${Math.random()}`, type, content }]);
+        setMessages(prev => [...prev, {
+                id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+                type,
+                content
+            }]);
     }, []);
-    // Handle commands
+    // Handle slash commands
     const handleCommand = useCallback(async (cmd) => {
         const parts = cmd.split(/\s+/);
         const command = parts[0].toLowerCase();
         switch (command) {
             case '/help':
             case '/h':
-                addMessage('system', `Commands: /help /provider /model /models /persona /clear /status /config /upgrade /exit\nLoop mode: use --legacy flag`);
-                return true;
+                addMessage('system', `Commands:
+  /mode [plan|hybrid|work] - Switch modes (Shift+Tab to cycle)
+  /provider [name]         - Switch AI provider
+  /model [name]            - Switch model
+  /route [on|off|test]     - Auto model routing by complexity
+  /persona [name]          - Switch personality
+  /todo [add|done|list]    - Manage TODOs
+  /plans [list|view]       - View plan history
+  /session [list|info]     - Session management
+  /history [search]        - Chat history
+  /context [load|summary]  - Context management
+  /summarize [context|compact] - Summarize/compact context
+  /clear                   - Clear conversation
+  /copy                    - Copy last response to clipboard
+  /export [file.md]        - Export conversation to markdown
+  /edit                    - Edit and resend last message
+  /undo                    - Remove last exchange
+  /confirm [on|off]        - Toggle risky op confirmation
+  /profile [name|save|del] - Switch/save/delete profiles
+  /mcp [add|remove|tools]  - Manage MCP servers
+  /skills [add|remove]     - Manage agent skills
+  /memory [init|add|show]  - Project memory (CALLIOPE.md)
+  /project [init|show|run] - Project config (.calliope)
+  /find <pattern>          - Fuzzy file search
+  /branch [new|switch]     - Conversation branches
+  /theme [name|list]       - Color themes
+  /hooks [list|add]        - Pre/post tool hooks
+  /search <query>          - Search conversation
+  /status                  - Show status
+  /config                  - Show config
+  /upgrade                 - Check for updates
+  /exit                    - Exit
+
+File references: @filename, ./path, /absolute/path
+Modes: 📋 Plan | 🔄 Hybrid | 🔧 Work
+Auto-route: ${autoRoute ? 'ON' : 'OFF'}`);
+                break;
             case '/provider':
             case '/p':
                 if (parts[1]) {
                     const p = parts[1].toLowerCase();
                     setProvider(p);
-                    setStats(s => ({ ...s, provider: selectProvider(p) }));
                     addMessage('system', `Provider: ${selectProvider(p)}`);
                 }
                 else {
-                    addMessage('system', `Provider: ${selectProvider(provider)} | Available: ${getAvailableProviders().join(', ')}`);
+                    addMessage('system', `Provider: ${actualProvider} | Available: ${getAvailableProviders().join(', ')}`);
                 }
-                return true;
+                break;
             case '/model':
             case '/m':
                 if (parts[1]) {
                     setModel(parts[1]);
-                    setStats(s => ({ ...s, model: parts[1] }));
                     addMessage('system', `Model: ${parts[1]}`);
                 }
                 else {
-                    // Trigger inline model selection
-                    setModelLoading(true);
-                    addMessage('system', `Discovering models for ${selectProvider(provider)}...`);
+                    addMessage('system', `Discovering models for ${actualProvider}...`);
                     try {
-                        const models = await getAvailableModels(selectProvider(provider));
+                        const models = await getAvailableModels(actualProvider);
                         if (models.length > 0) {
                             setAvailableModels(models);
-                            setModelSelectMode(true);
+                            setModalMode('model');
                         }
                         else {
                             addMessage('error', 'No models found');
@@ -209,20 +413,15 @@ function App({ skipPermissions = false }) {
                     catch (e) {
                         addMessage('error', `Failed to fetch models: ${e instanceof Error ? e.message : String(e)}`);
                     }
-                    finally {
-                        setModelLoading(false);
-                    }
                 }
-                return true;
+                break;
             case '/models':
-                // Trigger inline model selection
-                setModelLoading(true);
-                addMessage('system', `Discovering models for ${selectProvider(provider)}...`);
+                addMessage('system', `Discovering models for ${actualProvider}...`);
                 try {
-                    const models = await getAvailableModels(selectProvider(provider));
+                    const models = await getAvailableModels(actualProvider);
                     if (models.length > 0) {
                         setAvailableModels(models);
-                        setModelSelectMode(true);
+                        setModalMode('model');
                     }
                     else {
                         addMessage('error', 'No models found');
@@ -231,10 +430,18 @@ function App({ skipPermissions = false }) {
                 catch (e) {
                     addMessage('error', `Failed to fetch models: ${e instanceof Error ? e.message : String(e)}`);
                 }
-                finally {
-                    setModelLoading(false);
+                break;
+            case '/mode':
+                if (parts[1] && ['plan', 'hybrid', 'work'].includes(parts[1])) {
+                    const m = parts[1];
+                    setMode(m);
+                    addMessage('system', `Mode: ${MODE_CONFIG[m].icon} ${MODE_CONFIG[m].label} - ${MODE_CONFIG[m].description}`);
+                }
+                else {
+                    const currentConfig = MODE_CONFIG[mode];
+                    addMessage('system', `Mode: ${currentConfig.icon} ${currentConfig.label}\nOptions: plan (📋), hybrid (🔄), work (🔧)\nUse Shift+Tab to cycle`);
                 }
-                return true;
+                break;
             case '/persona':
                 if (parts[1] && ['calliope', 'professional', 'minimal'].includes(parts[1])) {
                     const p = parts[1];
@@ -245,29 +452,634 @@ function App({ skipPermissions = false }) {
                 else {
                     addMessage('system', `Persona: ${persona} | Options: calliope, professional, minimal`);
                 }
-                return true;
+                break;
             case '/clear':
             case '/c':
                 setMessages([]);
                 llmMessages.current = [{ role: 'system', content: getSystemPrompt(persona) }];
-                setStats(s => ({ ...s, messages: 0, inputTokens: 0, outputTokens: 0, cost: 0 }));
-                return true;
+                setStats({ inputTokens: 0, outputTokens: 0, cost: 0, messageCount: 0 });
+                break;
+            case '/copy': {
+                // Copy last assistant response to clipboard
+                const lastAssistant = [...messages].reverse().find(m => m.type === 'assistant');
+                if (lastAssistant) {
+                    try {
+                        const { execSync } = await import('child_process');
+                        // Try different clipboard commands based on platform
+                        const content = lastAssistant.content;
+                        if (process.platform === 'darwin') {
+                            execSync('pbcopy', { input: content });
+                        }
+                        else if (process.platform === 'win32') {
+                            execSync('clip', { input: content });
+                        }
+                        else {
+                            // Linux - try xclip, xsel, or wl-copy
+                            try {
+                                execSync('xclip -selection clipboard', { input: content });
+                            }
+                            catch {
+                                try {
+                                    execSync('xsel --clipboard --input', { input: content });
+                                }
+                                catch {
+                                    execSync('wl-copy', { input: content });
+                                }
+                            }
+                        }
+                        addMessage('system', '✓ Copied to clipboard');
+                    }
+                    catch (e) {
+                        addMessage('error', `Clipboard not available: ${e instanceof Error ? e.message : String(e)}`);
+                    }
+                }
+                else {
+                    addMessage('system', 'No assistant message to copy');
+                }
+                break;
+            }
+            case '/export': {
+                // Export conversation to markdown
+                const filename = parts[1] || `calliope-export-${Date.now()}.md`;
+                const fs = await import('fs');
+                const path = await import('path');
+                let markdown = `# Calliope Conversation Export\n\n`;
+                markdown += `**Date:** ${new Date().toLocaleString()}\n`;
+                markdown += `**Provider:** ${actualProvider}\n`;
+                markdown += `**Model:** ${actualModel}\n\n---\n\n`;
+                for (const msg of messages) {
+                    if (msg.type === 'user') {
+                        markdown += `## 👤 User\n\n${msg.content}\n\n`;
+                    }
+                    else if (msg.type === 'assistant') {
+                        markdown += `## 🤖 Assistant\n\n${msg.content}\n\n`;
+                    }
+                    else if (msg.type === 'tool') {
+                        markdown += `> 🔧 Tool: ${msg.content}\n\n`;
+                    }
+                    else if (msg.type === 'system') {
+                        markdown += `> ℹ️ ${msg.content}\n\n`;
+                    }
+                    else if (msg.type === 'error') {
+                        markdown += `> ⚠️ Error: ${msg.content}\n\n`;
+                    }
+                }
+                const filepath = path.resolve(process.cwd(), filename);
+                fs.writeFileSync(filepath, markdown);
+                addMessage('system', `✓ Exported to ${filename}`);
+                break;
+            }
+            case '/edit': {
+                // Edit last user message
+                const lastUserIdx = [...messages].reverse().findIndex(m => m.type === 'user');
+                if (lastUserIdx >= 0) {
+                    const lastUser = messages[messages.length - 1 - lastUserIdx];
+                    setInput(lastUser.content);
+                    addMessage('system', 'Edit the message above and press Enter to resend');
+                }
+                else {
+                    addMessage('system', 'No user message to edit');
+                }
+                break;
+            }
+            case '/undo': {
+                // Remove last exchange (user message + assistant response)
+                let removed = 0;
+                const newMessages = [...messages];
+                // Remove from the end until we've removed a user message
+                while (newMessages.length > 0 && removed < 10) {
+                    const last = newMessages.pop();
+                    removed++;
+                    if (last?.type === 'user')
+                        break;
+                }
+                // Also remove from LLM context
+                while (llmMessages.current.length > 1) {
+                    const last = llmMessages.current[llmMessages.current.length - 1];
+                    if (last.role === 'user') {
+                        llmMessages.current.pop();
+                        break;
+                    }
+                    llmMessages.current.pop();
+                }
+                setMessages(newMessages);
+                addMessage('system', `✓ Removed last ${removed} message(s)`);
+                break;
+            }
             case '/status':
             case '/s':
-                addMessage('system', `${selectProvider(provider)}:${model || DEFAULT_MODELS[selectProvider(provider)]} | ${stats.messages} msgs | ${formatTokens(stats.inputTokens + stats.outputTokens)} tokens | ${formatCost(stats.cost)}`);
-                return true;
+                addMessage('system', `${actualProvider}:${actualModel} | ${stats.messageCount} msgs | ${stats.inputTokens + stats.outputTokens} tokens`);
+                break;
             case '/config':
                 addMessage('system', `Config: ${config.getConfigPath()}\nProviders: ${config.getConfiguredProviders().join(', ') || 'none'}`);
-                return true;
+                break;
             case '/setup':
-                addMessage('system', 'Setup requires legacy CLI mode. Run: calliope --legacy then /setup');
-                return true;
             case '/loop':
-                addMessage('system', 'Loop mode requires legacy CLI. Run: calliope --legacy');
-                return true;
-            case '/cancel-loop':
-                addMessage('system', 'No active loop');
-                return true;
+                addMessage('system', 'This feature requires legacy CLI. Run: calliope --legacy');
+                break;
+            case '/confirm':
+                if (parts[1] === 'on') {
+                    setConfirmMode(true);
+                    addMessage('system', '✓ Confirmation mode ON - will ask before risky operations');
+                }
+                else if (parts[1] === 'off') {
+                    setConfirmMode(false);
+                    addMessage('system', '⚠️ Confirmation mode OFF - risky operations will auto-execute');
+                }
+                else {
+                    addMessage('system', `Confirm mode: ${confirmMode ? 'ON' : 'OFF'}\nUsage: /confirm [on|off]`);
+                }
+                break;
+            case '/profile': {
+                const subCmd = parts[1];
+                if (subCmd === 'list' || !subCmd) {
+                    const profiles = config.listProfiles();
+                    const active = config.getActiveProfile();
+                    const list = profiles.map(p => {
+                        const marker = p.name === active ? '→ ' : '  ';
+                        const tag = p.builtin ? '(built-in)' : '(custom)';
+                        return `${marker}${p.name}: ${p.profile.provider}/${p.profile.model || 'default'} ${tag}`;
+                    }).join('\n');
+                    addMessage('system', `Profiles:\n${list}\n\nUsage: /profile <name> | /profile save <name>`);
+                }
+                else if (subCmd === 'save' && parts[2]) {
+                    const name = parts[2];
+                    config.saveProfile(name, {
+                        provider: provider,
+                        model: model,
+                        persona: persona,
+                        confirmMode: confirmMode,
+                    });
+                    addMessage('system', `✓ Saved profile: ${name}`);
+                }
+                else if (subCmd === 'delete' && parts[2]) {
+                    const name = parts[2];
+                    if (config.deleteProfile(name)) {
+                        addMessage('system', `✓ Deleted profile: ${name}`);
+                    }
+                    else {
+                        addMessage('error', `Cannot delete profile: ${name} (built-in or not found)`);
+                    }
+                }
+                else {
+                    // Load profile
+                    const profile = config.getProfile(subCmd);
+                    if (profile) {
+                        setProvider(profile.provider);
+                        if (profile.model)
+                            setModel(profile.model);
+                        setPersona(profile.persona);
+                        if (profile.confirmMode !== undefined)
+                            setConfirmMode(profile.confirmMode);
+                        config.setActiveProfile(subCmd);
+                        addMessage('system', `✓ Loaded profile: ${subCmd} (${profile.provider}/${profile.model || 'default'})`);
+                    }
+                    else {
+                        addMessage('error', `Profile not found: ${subCmd}\nBuilt-in: fast, smart, cheap, local`);
+                    }
+                }
+                break;
+            }
+            case '/mcp': {
+                const subCmd = parts[1];
+                if (subCmd === 'list' || !subCmd) {
+                    const servers = mcp.listServers();
+                    if (servers.length === 0) {
+                        addMessage('system', 'No MCP servers registered.\n\nUsage:\n  /mcp add <url>  - Register MCP server\n  /mcp remove <id> - Remove server');
+                    }
+                    else {
+                        const list = servers.map(s => {
+                            const status = s.status === 'connected' ? '🟢' : s.status === 'error' ? '🔴' : '⚪';
+                            return `${status} ${s.name} (${s.tools.length} tools)\n   ${s.url}`;
+                        }).join('\n\n');
+                        addMessage('system', `MCP Servers:\n\n${list}`);
+                    }
+                }
+                else if (subCmd === 'add' && parts[2]) {
+                    const url = parts[2];
+                    addMessage('system', `Registering MCP server: ${url}...`);
+                    try {
+                        const server = await mcp.registerServer(url);
+                        addMessage('system', `✓ Registered: ${server.name} (${server.tools.length} tools)`);
+                    }
+                    catch (e) {
+                        addMessage('error', `Failed to register: ${e instanceof Error ? e.message : String(e)}`);
+                    }
+                }
+                else if ((subCmd === 'remove' || subCmd === 'rm') && parts[2]) {
+                    if (mcp.unregisterServer(parts[2])) {
+                        addMessage('system', '✓ Server removed');
+                    }
+                    else {
+                        addMessage('error', 'Server not found');
+                    }
+                }
+                else if (subCmd === 'refresh') {
+                    const servers = mcp.listServers();
+                    let connected = 0;
+                    for (const s of servers) {
+                        const updated = await mcp.refreshServer(s.id);
+                        if (updated?.status === 'connected')
+                            connected++;
+                    }
+                    addMessage('system', `Refreshed ${servers.length} servers (${connected} connected)`);
+                }
+                else if (subCmd === 'tools') {
+                    const tools = mcp.getMCPTools();
+                    if (tools.length === 0) {
+                        addMessage('system', 'No MCP tools available. Add servers with /mcp add <url>');
+                    }
+                    else {
+                        const list = tools.map(t => `• ${t.name}\n  ${t.description}`).join('\n\n');
+                        addMessage('system', `MCP Tools:\n\n${list}`);
+                    }
+                }
+                else {
+                    addMessage('system', 'Usage: /mcp [list|add <url>|remove <id>|refresh|tools]');
+                }
+                break;
+            }
+            case '/skills': {
+                const subCmd = parts[1];
+                if (subCmd === 'list' || !subCmd) {
+                    const allSkills = skills.getSkills();
+                    if (allSkills.length === 0) {
+                        addMessage('system', 'No skills installed.\n\nUsage:\n  /skills add <name>     - Install from agentskills.io\n  /skills add <github-url> - Install from GitHub\n  /skills add <path>     - Install from local directory');
+                    }
+                    else {
+                        const list = allSkills.map(s => {
+                            const src = s.source === 'github' ? '(GitHub)' : s.source === 'registry' ? '(agentskills.io)' : '(local)';
+                            return `• ${s.metadata.name} ${src}\n  ${s.metadata.description.substring(0, 80)}...`;
+                        }).join('\n\n');
+                        addMessage('system', `Installed Skills:\n\n${list}`);
+                    }
+                }
+                else if (subCmd === 'add' && parts[2]) {
+                    const source = parts[2];
+                    addMessage('system', `Installing skill: ${source}...`);
+                    try {
+                        let skill;
+                        if (source.startsWith('http')) {
+                            skill = await skills.installFromGithub(source);
+                        }
+                        else if (fs.existsSync(source)) {
+                            skill = skills.installLocalSkill(source);
+                        }
+                        else {
+                            skill = await skills.installFromRegistry(source);
+                        }
+                        if (skill) {
+                            addMessage('system', `✓ Installed: ${skill.metadata.name}`);
+                        }
+                        else {
+                            addMessage('error', 'Failed to install skill');
+                        }
+                    }
+                    catch (e) {
+                        addMessage('error', `Failed: ${e instanceof Error ? e.message : String(e)}`);
+                    }
+                }
+                else if ((subCmd === 'remove' || subCmd === 'rm') && parts[2]) {
+                    if (skills.uninstallSkill(parts[2])) {
+                        addMessage('system', '✓ Skill removed');
+                    }
+                    else {
+                        addMessage('error', 'Skill not found');
+                    }
+                }
+                else if (subCmd === 'info' && parts[2]) {
+                    const skill = skills.getSkill(parts[2]);
+                    if (skill) {
+                        let info = `# ${skill.metadata.name}\n\n`;
+                        info += `${skill.metadata.description}\n\n`;
+                        if (skill.metadata.compatibility)
+                            info += `Compatibility: ${skill.metadata.compatibility}\n`;
+                        if (skill.metadata.license)
+                            info += `License: ${skill.metadata.license}\n`;
+                        if (skill.sourceUrl)
+                            info += `Source: ${skill.sourceUrl}\n`;
+                        addMessage('system', info);
+                    }
+                    else {
+                        addMessage('error', 'Skill not found');
+                    }
+                }
+                else {
+                    addMessage('system', 'Usage: /skills [list|add <source>|remove <name>|info <name>]');
+                }
+                break;
+            }
+            case '/memory': {
+                const memory = await import('./memory.js');
+                const subCmd = parts[1];
+                const cwd = process.cwd();
+                if (subCmd === 'init') {
+                    const memPath = memory.initProjectMemory(cwd);
+                    addMessage('system', `Created: ${memPath}\nEdit the file to add context and preferences.`);
+                }
+                else if (subCmd === 'show' || !subCmd) {
+                    const memPath = memory.findProjectMemory(cwd);
+                    if (!memPath) {
+                        addMessage('system', 'No CALLIOPE.md found.\nRun /memory init to create one.');
+                    }
+                    else {
+                        const mem = memory.loadMemory(memPath);
+                        let info = `Memory: ${memPath}\n\n`;
+                        if (mem.context.length)
+                            info += `**Context:**\n${mem.context.map(c => `  - ${c}`).join('\n')}\n\n`;
+                        if (mem.preferences.length)
+                            info += `**Preferences:**\n${mem.preferences.map(p => `  - ${p}`).join('\n')}\n\n`;
+                        if (mem.history.length)
+                            info += `**History:**\n${mem.history.slice(-5).map(h => `  - ${h}`).join('\n')}\n`;
+                        addMessage('system', info);
+                    }
+                }
+                else if (subCmd === 'add' && parts[2]) {
+                    const type = parts[2];
+                    const content = parts.slice(3).join(' ');
+                    if (!content) {
+                        addMessage('error', 'Usage: /memory add <type> <content>');
+                    }
+                    else {
+                        let memPath = memory.findProjectMemory(cwd);
+                        if (!memPath) {
+                            memPath = memory.initProjectMemory(cwd);
+                        }
+                        memory.addMemoryEntry(memPath, {
+                            type,
+                            content,
+                            timestamp: new Date().toISOString().split('T')[0],
+                        });
+                        addMessage('system', `Added ${type}: ${content}`);
+                    }
+                }
+                else if (subCmd === 'remove' && parts[2]) {
+                    const type = parts[2];
+                    const content = parts.slice(3).join(' ');
+                    const memPath = memory.findProjectMemory(cwd);
+                    if (memPath && memory.removeMemoryEntry(memPath, type, content)) {
+                        addMessage('system', `Removed matching ${type}`);
+                    }
+                    else {
+                        addMessage('error', 'Entry not found');
+                    }
+                }
+                else if (subCmd === 'global') {
+                    const globalMem = memory.getGlobalMemory();
+                    let info = 'Global Memory:\n\n';
+                    if (globalMem.preferences.length)
+                        info += `**Preferences:**\n${globalMem.preferences.map(p => `  - ${p}`).join('\n')}\n`;
+                    if (globalMem.notes.length)
+                        info += `**Notes:**\n${globalMem.notes.map(n => `  - ${n}`).join('\n')}\n`;
+                    addMessage('system', info || 'No global memories yet.');
+                }
+                else {
+                    addMessage('system', 'Usage: /memory [init|show|add <type> <text>|remove <type> <text>|global]');
+                }
+                break;
+            }
+            case '/find': {
+                const fuzzy = await import('./fuzzy-search.js');
+                const query = parts.slice(1).join(' ');
+                if (!query) {
+                    addMessage('system', 'Usage: /find <pattern>\nFuzzy search for files');
+                }
+                else {
+                    const results = fuzzy.searchWithHighlight(process.cwd(), query, { maxResults: 20 });
+                    if (results.length === 0) {
+                        addMessage('system', 'No files found');
+                    }
+                    else {
+                        const list = results.map((r, i) => `${i + 1}. ${r.highlighted}`).join('\n');
+                        addMessage('system', `Found ${results.length} files:\n\n${list}`);
+                    }
+                }
+                break;
+            }
+            case '/branch': {
+                const branching = await import('./branching.js');
+                const subCmd = parts[1];
+                const sessionId = `session_${Date.now()}`; // Would use actual session ID
+                if (subCmd === 'list' || !subCmd) {
+                    const tree = branching.getBranchTree(sessionId);
+                    addMessage('system', `Branches:\n${tree}`);
+                }
+                else if (subCmd === 'new' && parts[2]) {
+                    const branch = branching.createBranch(sessionId, parts[2], llmMessages.current, parts.slice(3).join(' '));
+                    addMessage('system', `Created branch: ${branch.name}`);
+                }
+                else if (subCmd === 'switch' && parts[2]) {
+                    const msgs = branching.switchBranch(sessionId, parts[2], llmMessages.current);
+                    if (msgs) {
+                        llmMessages.current = msgs;
+                        addMessage('system', `Switched to branch: ${parts[2]}`);
+                    }
+                    else {
+                        addMessage('error', 'Branch not found');
+                    }
+                }
+                else if (subCmd === 'delete' && parts[2]) {
+                    if (branching.deleteBranch(sessionId, parts[2])) {
+                        addMessage('system', 'Branch deleted');
+                    }
+                    else {
+                        addMessage('error', 'Cannot delete branch');
+                    }
+                }
+                else {
+                    addMessage('system', 'Usage: /branch [list|new <name>|switch <name>|delete <name>]');
+                }
+                break;
+            }
+            case '/theme': {
+                const themes = await import('./themes.js');
+                const subCmd = parts[1];
+                if (subCmd === 'list' || !subCmd) {
+                    const list = themes.listThemes();
+                    const current = themes.getCurrentThemeName();
+                    const formatted = list.map(t => {
+                        const marker = t.name === current ? ' *' : '';
+                        const custom = t.custom ? ' (custom)' : '';
+                        return `  ${t.name}${marker}${custom} - ${t.description || 'No description'}`;
+                    }).join('\n');
+                    addMessage('system', `Available themes:\n${formatted}`);
+                }
+                else if (themes.setCurrentTheme(subCmd)) {
+                    themes.clearThemeCache();
+                    addMessage('system', `Theme set to: ${subCmd}`);
+                }
+                else {
+                    addMessage('error', `Theme not found: ${subCmd}`);
+                }
+                break;
+            }
+            case '/hooks': {
+                const hooks = await import('./hooks.js');
+                const subCmd = parts[1];
+                if (subCmd === 'list' || !subCmd) {
+                    addMessage('system', hooks.listHooksFormatted());
+                }
+                else if (subCmd === 'add' && parts[2]) {
+                    const event = parts[2];
+                    const command = parts.slice(3).join(' ');
+                    if (!command) {
+                        addMessage('system', 'Usage: /hooks add <event> <command>');
+                    }
+                    else {
+                        hooks.addHook({ event, name: `Hook for ${event}`, command, enabled: true, async: false });
+                        addMessage('system', 'Hook added');
+                    }
+                }
+                else if (subCmd === 'init') {
+                    hooks.initDefaultHooks();
+                    addMessage('system', 'Default hooks initialized');
+                }
+                else {
+                    addMessage('system', 'Usage: /hooks [list|add <event> <command>|init]');
+                }
+                break;
+            }
+            case '/search': {
+                const query = parts.slice(1).join(' ');
+                if (!query) {
+                    addMessage('system', 'Usage: /search <query>\nSearch conversation history');
+                }
+                else {
+                    const lower = query.toLowerCase();
+                    const matches = messages.filter(m => m.content.toLowerCase().includes(lower));
+                    if (matches.length === 0) {
+                        addMessage('system', 'No matches found');
+                    }
+                    else {
+                        const results = matches.slice(-10).map(m => {
+                            const preview = m.content.slice(0, 100).replace(/\n/g, ' ');
+                            return `[${m.type}] ${preview}...`;
+                        }).join('\n\n');
+                        addMessage('system', `Found ${matches.length} matches:\n\n${results}`);
+                    }
+                }
+                break;
+            }
+            case '/project': {
+                const projectConfig = await import('./project-config.js');
+                const subCmd = parts[1];
+                const cwd = process.cwd();
+                if (subCmd === 'init') {
+                    const configPath = projectConfig.createProjectConfig(cwd);
+                    addMessage('system', `Created project config: ${configPath}\nEdit the file to customize settings.`);
+                }
+                else if (subCmd === 'show' || !subCmd) {
+                    const configPath = projectConfig.findProjectConfig(cwd);
+                    if (!configPath) {
+                        addMessage('system', 'No project config found.\nRun /project init to create one.');
+                    }
+                    else {
+                        const cfg = projectConfig.loadProjectConfig(configPath);
+                        if (cfg) {
+                            let info = `Config: ${configPath}\n\n`;
+                            if (cfg.project)
+                                info += `Project: ${cfg.project}\n`;
+                            if (cfg.provider)
+                                info += `Provider: ${cfg.provider}\n`;
+                            if (cfg.model)
+                                info += `Model: ${cfg.model}\n`;
+                            if (cfg.tech?.length)
+                                info += `Tech: ${cfg.tech.join(', ')}\n`;
+                            if (cfg.conventions?.length)
+                                info += `\nConventions:\n${cfg.conventions.map(c => `  - ${c}`).join('\n')}\n`;
+                            if (cfg.commands)
+                                info += `\nCommands: ${Object.keys(cfg.commands).join(', ')}\n`;
+                            addMessage('system', info);
+                        }
+                        else {
+                            addMessage('error', 'Failed to parse config');
+                        }
+                    }
+                }
+                else if (subCmd === 'run' && parts[2]) {
+                    const configPath = projectConfig.findProjectConfig(cwd);
+                    const cfg = configPath ? projectConfig.loadProjectConfig(configPath) : null;
+                    const cmdName = parts[2];
+                    if (cfg?.commands?.[cmdName]) {
+                        addMessage('system', `Running: ${cfg.commands[cmdName]}`);
+                        // Queue the command to run
+                        const { spawn } = await import('child_process');
+                        const proc = spawn('sh', ['-c', cfg.commands[cmdName]], { cwd, stdio: 'pipe' });
+                        let output = '';
+                        proc.stdout?.on('data', (d) => output += d.toString());
+                        proc.stderr?.on('data', (d) => output += d.toString());
+                        proc.on('close', (code) => {
+                            addMessage('system', `Exit ${code}\n${output}`);
+                        });
+                    }
+                    else {
+                        addMessage('error', `Command not found: ${cmdName}`);
+                    }
+                }
+                else {
+                    addMessage('system', 'Usage: /project [init|show|run <cmd>]');
+                }
+                break;
+            }
+            case '/route':
+            case '/autoroute': {
+                if (parts[1] === 'on') {
+                    setAutoRoute(true);
+                    addMessage('system', '✓ Auto-routing ON - model selected based on task complexity');
+                }
+                else if (parts[1] === 'off') {
+                    setAutoRoute(false);
+                    addMessage('system', '✓ Auto-routing OFF - using fixed model');
+                }
+                else if (parts[1] === 'test' && parts[2]) {
+                    const testMsg = parts.slice(2).join(' ');
+                    const decision = modelRouter.routeRequest(testMsg, actualProvider);
+                    addMessage('system', `Route test: ${decision.tier} tier (${decision.complexity})\nModel: ${decision.model.model}\nReason: ${decision.reason}\nConfidence: ${Math.round(decision.confidence * 100)}%`);
+                }
+                else {
+                    const tiers = modelRouter.getAllTiers(actualProvider);
+                    addMessage('system', `Auto-route: ${autoRoute ? 'ON' : 'OFF'}\n\nModel tiers for ${actualProvider}:\n  fast: ${tiers.fast.model}\n  balanced: ${tiers.balanced.model}\n  smart: ${tiers.smart.model}\n\nUsage: /route [on|off|test <message>]`);
+                }
+                break;
+            }
+            case '/summarize': {
+                const subCmd = parts[1];
+                if (subCmd === 'context' || !subCmd) {
+                    const msgCount = llmMessages.current.length;
+                    if (msgCount < 5) {
+                        addMessage('system', 'Not enough messages to summarize.');
+                    }
+                    else {
+                        const summary = summarization.extractKeyInfo(llmMessages.current);
+                        let info = 'Context Summary:\n\n';
+                        if (summary.topics.length)
+                            info += `**Topics:** ${summary.topics.join(', ')}\n`;
+                        if (summary.decisions.length)
+                            info += `**Decisions:**\n${summary.decisions.map(d => `  - ${d}`).join('\n')}\n`;
+                        if (summary.actions.length)
+                            info += `**Actions:**\n${summary.actions.map(a => `  - ${a}`).join('\n')}\n`;
+                        if (summary.codeChanges.length)
+                            info += `**Code Changes:**\n${summary.codeChanges.slice(0, 5).map(c => `  - ${c}`).join('\n')}\n`;
+                        addMessage('system', info || 'No key information extracted.');
+                    }
+                }
+                else if (subCmd === 'compact') {
+                    // Summarize and compact the conversation
+                    const result = summarization.summarizeConversation(llmMessages.current, { maxTokens: 50000 });
+                    if (result.summarizedCount > 0) {
+                        llmMessages.current = result.messages;
+                        setContextTokens(estimateContextTokens());
+                        addMessage('system', `✓ Compacted ${result.summarizedCount} messages (${result.originalTokens} → ${result.reducedTokens} tokens)`);
+                    }
+                    else {
+                        addMessage('system', 'Context already within limits, no compaction needed.');
+                    }
+                }
+                else {
+                    addMessage('system', 'Usage: /summarize [context|compact]');
+                }
+                break;
+            }
             case '/upgrade':
                 addMessage('system', 'Checking for updates...');
                 try {
@@ -275,69 +1087,322 @@ function App({ skipPermissions = false }) {
                     const latest = await getLatestVersion();
                     if (!latest) {
                         addMessage('error', 'Could not check for updates');
-                        return true;
-                    }
-                    const currentParts = current.split('.').map(Number);
-                    const latestParts = latest.split('.').map(Number);
-                    let hasUpdate = false;
-                    for (let i = 0; i < 3; i++) {
-                        if ((latestParts[i] || 0) > (currentParts[i] || 0)) {
-                            hasUpdate = true;
-                            break;
-                        }
-                        if ((latestParts[i] || 0) < (currentParts[i] || 0))
-                            break;
+                        break;
                     }
-                    if (!hasUpdate) {
-                        addMessage('system', `You're on the latest version (v${current})`);
+                    const [cMaj, cMin, cPat] = current.split('.').map(Number);
+                    const [lMaj, lMin, lPat] = latest.split('.').map(Number);
+                    const hasUpdate = lMaj > cMaj || (lMaj === cMaj && lMin > cMin) || (lMaj === cMaj && lMin === cMin && lPat > cPat);
+                    if (hasUpdate) {
+                        setLatestVersion(latest);
+                        setModalMode('upgrade');
                     }
                     else {
-                        setLatestVersion(latest);
-                        setUpgradeMode(true);
+                        addMessage('system', `You're on the latest version (v${current})`);
                     }
                 }
                 catch (e) {
                     addMessage('error', `Failed to check for updates: ${e instanceof Error ? e.message : String(e)}`);
                 }
-                return true;
+                break;
+            case '/session':
+                if (parts[1] === 'list') {
+                    const sessions = storage.listSessions(5);
+                    if (sessions.length === 0) {
+                        addMessage('system', 'No previous sessions found.');
+                    }
+                    else {
+                        const list = sessions.map(s => `${s.projectName} (${new Date(s.lastAccessedAt).toLocaleDateString()}) - ${s.messageCount} msgs`).join('\n');
+                        addMessage('system', `Recent sessions:\n${list}`);
+                    }
+                }
+                else if (parts[1] === 'info') {
+                    const session = sessionRef.current;
+                    if (session) {
+                        addMessage('system', `Session: ${session.projectName}\nCreated: ${new Date(session.createdAt).toLocaleString()}\nMessages: ${session.messageCount}`);
+                    }
+                    else {
+                        addMessage('system', 'No active session.');
+                    }
+                }
+                else {
+                    addMessage('system', 'Usage: /session [list|info]');
+                }
+                break;
+            case '/todo': {
+                const subCommand = parts[1];
+                if (subCommand === 'add' && parts.length > 2) {
+                    const content = parts.slice(2).join(' ');
+                    const isGlobal = content.includes('--global');
+                    const isHigh = content.includes('--priority') && content.includes('high');
+                    const cleanContent = content.replace(/--global|--priority\s*\w+/g, '').trim();
+                    const todo = storage.addTodo(cleanContent, {
+                        global: isGlobal,
+                        priority: isHigh ? 'high' : 'normal',
+                    });
+                    addMessage('system', `✓ TODO added (#${todo.id.slice(-4)}${isGlobal ? ', global' : ''})`);
+                }
+                else if (subCommand === 'done' && parts[2]) {
+                    const id = parts[2];
+                    const todos = [...storage.getSessionTodos(), ...storage.getGlobalTodos()];
+                    const todo = todos.find(t => t.id.endsWith(id) || t.id === id);
+                    if (todo) {
+                        storage.updateTodo(todo.id, { status: 'completed' });
+                        addMessage('system', `✓ TODO #${id} marked done`);
+                    }
+                    else {
+                        addMessage('error', `TODO #${id} not found`);
+                    }
+                }
+                else if (subCommand === 'list' || !subCommand) {
+                    const sessionTodos = storage.getSessionTodos();
+                    const globalTodos = storage.getGlobalTodos();
+                    const pending = [...sessionTodos, ...globalTodos].filter(t => t.status !== 'completed');
+                    const completed = [...sessionTodos, ...globalTodos].filter(t => t.status === 'completed').slice(-3);
+                    if (pending.length === 0 && completed.length === 0) {
+                        addMessage('system', 'No TODOs. Use /todo add <task> to create one.');
+                    }
+                    else {
+                        let output = '📋 TODOs:\n';
+                        if (pending.length > 0) {
+                            output += pending.map(t => `  ${t.priority === 'high' ? '!' : '□'} #${t.id.slice(-4)} ${t.content}`).join('\n');
+                        }
+                        if (completed.length > 0) {
+                            output += '\n\nCompleted:\n' + completed.map(t => `  ✓ #${t.id.slice(-4)} ${t.content}`).join('\n');
+                        }
+                        addMessage('system', output);
+                    }
+                }
+                else {
+                    addMessage('system', 'Usage: /todo [add <task>|done <id>|list]');
+                }
+                break;
+            }
+            case '/plans': {
+                const subCommand = parts[1];
+                if (subCommand === 'list' || !subCommand) {
+                    const plans = storage.getPlans();
+                    if (plans.length === 0) {
+                        addMessage('system', 'No plans yet. Plans are created in hybrid mode.');
+                    }
+                    else {
+                        const list = plans.slice(0, 5).map(p => `${p.status === 'completed' ? '✓' : '○'} ${p.id.slice(-4)}: ${p.title}`).join('\n');
+                        addMessage('system', `📋 Plans:\n${list}`);
+                    }
+                }
+                else if (subCommand === 'view' && parts[2]) {
+                    const plans = storage.getPlans();
+                    const plan = plans.find(p => p.id.endsWith(parts[2]) || p.id === parts[2]);
+                    if (plan) {
+                        const phases = plan.phases.map(ph => `  ${ph.status === 'completed' ? '✓' : '○'} ${ph.name} (${ph.risk} risk)`).join('\n');
+                        addMessage('system', `Plan: ${plan.title}\nStatus: ${plan.status}\n\nPhases:\n${phases}`);
+                    }
+                    else {
+                        addMessage('error', `Plan #${parts[2]} not found`);
+                    }
+                }
+                else {
+                    addMessage('system', 'Usage: /plans [list|view <id>]');
+                }
+                break;
+            }
+            case '/history': {
+                const subCommand = parts[1];
+                if (subCommand === 'search' && parts[2]) {
+                    const query = parts.slice(2).join(' ');
+                    const results = storage.searchChatHistory(query);
+                    if (results.length === 0) {
+                        addMessage('system', `No matches for "${query}"`);
+                    }
+                    else {
+                        const list = results.slice(-5).map(m => `${new Date(m.timestamp).toLocaleTimeString()}: ${m.content.substring(0, 60)}...`).join('\n');
+                        addMessage('system', `🔍 Found ${results.length} matches:\n${list}`);
+                    }
+                }
+                else if (subCommand === 'clear') {
+                    addMessage('system', 'History is preserved per session. Start a new session for fresh history.');
+                }
+                else {
+                    const history = storage.getChatHistory(5);
+                    if (history.length === 0) {
+                        addMessage('system', 'No chat history yet.');
+                    }
+                    else {
+                        const list = history.map(m => `${m.role}: ${m.content.substring(0, 50)}...`).join('\n');
+                        addMessage('system', `Recent history:\n${list}\n\nUse /history search <query> to search.`);
+                    }
+                }
+                break;
+            }
+            case '/context': {
+                const subCommand = parts[1];
+                if (subCommand === 'load') {
+                    const limit = parseInt(parts[2]) || 20;
+                    const history = storage.getChatHistory(limit);
+                    if (history.length > 0) {
+                        // Load history into LLM context
+                        for (const msg of history) {
+                            if (msg.role === 'user' || msg.role === 'assistant') {
+                                llmMessages.current.push({
+                                    role: msg.role,
+                                    content: msg.content,
+                                });
+                            }
+                        }
+                        addMessage('system', `✓ Loaded ${history.length} messages into context`);
+                    }
+                    else {
+                        addMessage('system', 'No history to load.');
+                    }
+                }
+                else if (subCommand === 'summary') {
+                    const msgCount = llmMessages.current.length;
+                    const estTokens = llmMessages.current.reduce((sum, m) => sum + (m.content?.length || 0) / 4, 0);
+                    addMessage('system', `Context: ${msgCount} messages (~${Math.round(estTokens)} tokens)`);
+                }
+                else {
+                    addMessage('system', 'Usage: /context [load [n]|summary]');
+                }
+                break;
+            }
             case '/exit':
             case '/quit':
             case '/q':
                 exit();
-                return true;
+                break;
             default:
-                addMessage('error', `Unknown command: ${command}`);
-                return true;
+                addMessage('error', `Unknown command: ${command}. Type /help for help.`);
+        }
+    }, [actualProvider, actualModel, persona, stats, addMessage, exit]);
+    // Run agent with user prompt
+    const runAgent = useCallback(async (content) => {
+        llmMessages.current.push({ role: 'user', content });
+        setStats(s => ({ ...s, messageCount: s.messageCount + 1 }));
+        setStreamingResponse('');
+        // Auto-route to appropriate model based on task complexity
+        let effectiveModel = model;
+        if (autoRoute && typeof content === 'string') {
+            const routeDecision = modelRouter.routeRequest(content, provider, {
+                messageCount: stats.messageCount,
+                hasCode: content.includes('```') || /\.(ts|js|py|go|rs|java)/.test(content),
+            });
+            effectiveModel = routeDecision.model.model;
+            if (effectiveModel !== model) {
+                addMessage('system', `[Auto-route: ${routeDecision.tier} tier - ${routeDecision.reason}]`);
+            }
         }
-    }, [provider, model, persona, stats, addMessage, exit]);
-    // Run agent
-    const runAgent = useCallback(async (prompt) => {
-        llmMessages.current.push({ role: 'user', content: prompt });
-        setStats(s => ({ ...s, messages: s.messages + 1 }));
         const maxIterations = config.get('maxIterations');
-        let iteration = 0;
-        while (iteration < maxIterations) {
-            iteration++;
+        for (let i = 0; i < maxIterations; i++) {
             try {
-                const response = await chat(provider, llmMessages.current, TOOLS, model);
-                // Update token stats
+                // Update thinking state for LLM call
+                setThinkingState({
+                    status: i === 0 ? 'Analyzing request...' : 'Processing response...',
+                    detail: `Iteration ${i + 1}/${maxIterations}`,
+                    iteration: i + 1,
+                    maxIterations,
+                });
+                // Streaming callback for final response
+                const onToken = (token) => {
+                    setThinkingState(null); // Clear thinking when streaming starts
+                    setStreamingResponse(prev => prev + token);
+                };
+                // Retry callback for error recovery
+                const onRetry = (attempt, error, delayMs) => {
+                    setThinkingState({
+                        status: `Retrying... (attempt ${attempt + 1})`,
+                        detail: `${error.message.substring(0, 40)}... Waiting ${Math.round(delayMs / 1000)}s`,
+                        iteration: i + 1,
+                        maxIterations,
+                    });
+                };
+                const response = await chat(provider, llmMessages.current, TOOLS, effectiveModel, onToken, onRetry);
+                // Update token stats and cost
                 if (response.usage) {
+                    const usageCost = calculateCost(model || DEFAULT_MODELS[provider], response.usage.inputTokens, response.usage.outputTokens);
                     setStats(s => ({
                         ...s,
                         inputTokens: s.inputTokens + response.usage.inputTokens,
                         outputTokens: s.outputTokens + response.usage.outputTokens,
+                        cost: s.cost + usageCost,
                     }));
                 }
                 // Handle tool calls
-                if (response.toolCalls && response.toolCalls.length > 0) {
+                if (response.toolCalls?.length) {
                     llmMessages.current.push({
                         role: 'assistant',
                         content: response.content,
                         toolCalls: response.toolCalls,
                     });
                     for (const toolCall of response.toolCalls) {
-                        addMessage('tool', `⚡ ${toolCall.name}: ${toolCall.arguments.command || toolCall.arguments.path || '...'}`);
+                        const args = toolCall.arguments;
+                        const toolPreview = String(args.command || args.path || '...');
+                        // Assess risk
+                        const risk = assessToolRisk(toolCall);
+                        const riskConfig = RISK_CONFIG[risk.level];
+                        const riskDisplay = risk.level !== 'none' ? ` [${riskConfig.bar}]` : '';
+                        // Special handling for think tool
+                        if (toolCall.name === 'think') {
+                            const thought = String(args.thought || '');
+                            setThinkingState({
+                                status: 'Reasoning...',
+                                detail: thought.substring(0, 60) + (thought.length > 60 ? '...' : ''),
+                                thinking: thought,
+                                iteration: i + 1,
+                                maxIterations,
+                            });
+                        }
+                        else {
+                            setThinkingState({
+                                status: `Executing ${toolCall.name}...`,
+                                detail: toolPreview.substring(0, 60),
+                                thinking: undefined,
+                                iteration: i + 1,
+                                maxIterations,
+                            });
+                        }
+                        // In plan mode, don't execute tools (except think)
+                        if (mode === 'plan' && toolCall.name !== 'think') {
+                            addMessage('tool', `📋 ${toolCall.name}: ${toolPreview}${riskDisplay} (plan mode - not executed)`);
+                            llmMessages.current.push({
+                                role: 'tool',
+                                content: '[Plan mode: Tool not executed. Describe what this would do.]',
+                                toolCallId: toolCall.id,
+                            });
+                            continue;
+                        }
+                        // Check if confirmation is required for risky operations
+                        if (confirmMode && requiresConfirmation(risk, false) && toolCall.name !== 'think') {
+                            // Show warning and skip execution
+                            const riskIcon = risk.level === 'critical' ? '🛑' : '⚠️';
+                            addMessage('tool', `${riskIcon} ${toolCall.name}: ${toolPreview}${riskDisplay}\n  → Requires confirmation (use /confirm off to disable)`);
+                            llmMessages.current.push({
+                                role: 'tool',
+                                content: `[Operation blocked - ${risk.level} risk: ${risk.reason}. User confirmation required.]`,
+                                toolCallId: toolCall.id,
+                            });
+                            continue;
+                        }
+                        addMessage('tool', `⚡ ${toolCall.name}: ${toolPreview}${riskDisplay}`);
+                        // Execute pre-tool hooks
+                        const preHookResult = await hooks.checkHooksAllow('pre-tool', {
+                            tool: toolCall.name,
+                            toolArgs: args,
+                        });
+                        if (!preHookResult.allowed) {
+                            addMessage('tool', `🛑 Blocked by hook: ${preHookResult.reason}`);
+                            llmMessages.current.push({
+                                role: 'tool',
+                                content: `[Blocked by hook: ${preHookResult.reason}]`,
+                                toolCallId: toolCall.id,
+                            });
+                            continue;
+                        }
                         const result = await executeTool(toolCall, process.cwd());
+                        // Execute post-tool hooks
+                        hooks.executeHooks('post-tool', {
+                            tool: toolCall.name,
+                            toolArgs: args,
+                            toolResult: result.result,
+                        }).catch(() => { });
                         const preview = result.result.split('\n').slice(0, 3).join('\n');
                         addMessage('tool', preview + (result.result.split('\n').length > 3 ? '\n...' : ''));
                         llmMessages.current.push({
@@ -348,19 +1413,31 @@ function App({ skipPermissions = false }) {
                     }
                     continue;
                 }
-                // Final response
+                // Final response - move streaming content to message history
+                setThinkingState(null);
                 llmMessages.current.push({ role: 'assistant', content: response.content });
                 addMessage('assistant', response.content);
+                setStreamingResponse('');
+                setContextTokens(estimateContextTokens());
+                // Auto-continue if response was truncated due to length
+                if (response.finishReason === 'length') {
+                    addMessage('system', '(auto-continuing...)');
+                    llmMessages.current.push({ role: 'user', content: 'Please continue where you left off.' });
+                    continue; // Loop again to get continuation
+                }
                 break;
             }
             catch (error) {
-                const msg = error instanceof Error ? error.message : String(error);
-                addMessage('error', `Error: ${msg}`);
+                setThinkingState(null);
+                setStreamingResponse('');
+                addMessage('error', formatError(error));
                 break;
             }
         }
-    }, [provider, model, addMessage]);
-    // Handle submit
+        // Update context tokens after agent run
+        setContextTokens(estimateContextTokens());
+    }, [provider, model, addMessage, mode, estimateContextTokens]);
+    // Handle input submission
     const handleSubmit = useCallback(async (value) => {
         const trimmed = value.trim();
         if (!trimmed || isProcessing)
@@ -370,54 +1447,59 @@ function App({ skipPermissions = false }) {
             await handleCommand(trimmed);
             return;
         }
-        addMessage('user', trimmed);
+        // Parse file references from input
+        const { text: cleanText, files } = parseFileReferences(trimmed, process.cwd());
+        // Show user message (with file info if any)
+        if (files.length > 0) {
+            const fileInfo = formatFileInfo(files);
+            addMessage('user', `${cleanText}\n📎 ${fileInfo}`);
+        }
+        else {
+            addMessage('user', trimmed);
+        }
         setIsProcessing(true);
         try {
-            await runAgent(trimmed);
+            // Build message content (with file/image support)
+            let messageContent;
+            if (files.length > 0) {
+                const visionSupported = supportsVision(provider, model);
+                const { content, warnings } = processFilesForMessage(cleanText || trimmed, files, visionSupported);
+                // Show any warnings about files
+                for (const warning of warnings) {
+                    addMessage('system', warning);
+                }
+                messageContent = content;
+            }
+            else {
+                messageContent = trimmed;
+            }
+            await runAgent(messageContent);
         }
         finally {
             setIsProcessing(false);
+            setThinkingState(null);
+            setStreamingResponse('');
         }
-    }, [isProcessing, handleCommand, runAgent, addMessage]);
-    // Track terminal width for resize
-    const [width, setWidth] = useState(stdout?.columns || 80);
-    useEffect(() => {
-        const handleResize = () => {
-            setWidth(stdout?.columns || 80);
-        };
-        process.stdout.on('resize', handleResize);
-        return () => {
-            process.stdout.off('resize', handleResize);
-        };
-    }, [stdout]);
-    // Escape to exit (but not when in model select mode)
-    useInput((_, key) => {
-        if (key.escape && !modelSelectMode)
-            exit();
-    }, { isActive: !modelSelectMode });
-    // Model selection handlers
+    }, [isProcessing, handleCommand, runAgent, addMessage, provider, model]);
+    // Modal handlers
     const handleModelSelect = useCallback((selectedModel) => {
         setModel(selectedModel);
-        setStats(s => ({ ...s, model: selectedModel }));
         addMessage('system', `Model: ${selectedModel}`);
-        setModelSelectMode(false);
+        setModalMode('none');
         setAvailableModels([]);
     }, [addMessage]);
-    const handleModelCancel = useCallback(() => {
-        setModelSelectMode(false);
+    const handleModalCancel = useCallback(() => {
+        setModalMode('none');
         setAvailableModels([]);
-        addMessage('system', 'Model selection cancelled');
-    }, [addMessage]);
-    // Upgrade handlers
+        setLatestVersion(null);
+    }, []);
     const handleUpgradeConfirm = useCallback(async () => {
-        setUpgradeMode(false);
-        setUpgrading(true);
+        setModalMode('none');
         addMessage('system', 'Upgrading...');
         try {
             const success = await performUpgrade();
             if (success) {
                 addMessage('system', 'Upgrade complete! Restarting...');
-                // Restart the CLI
                 const { spawn } = await import('child_process');
                 const child = spawn(process.argv[0], process.argv.slice(1), {
                     stdio: 'inherit',
@@ -433,49 +1515,62 @@ function App({ skipPermissions = false }) {
         catch (e) {
             addMessage('error', `Upgrade failed: ${e instanceof Error ? e.message : String(e)}`);
         }
-        finally {
-            setUpgrading(false);
-            setLatestVersion(null);
-        }
-    }, [addMessage]);
-    const handleUpgradeCancel = useCallback(() => {
-        setUpgradeMode(false);
         setLatestVersion(null);
-        addMessage('system', 'Upgrade cancelled');
     }, [addMessage]);
-    const actualModel = model || DEFAULT_MODELS[selectProvider(provider)];
-    return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsx(Static, { items: messages, children: (msg) => (_jsx(Box, { marginBottom: msg.type === 'assistant' ? 1 : 0, children: _jsx(Message, { msg: msg }) }, msg.id)) }), isProcessing && _jsx(Spinner, { label: "Thinking..." }), modelLoading && _jsx(Spinner, { label: "Loading models..." }), modelSelectMode && availableModels.length > 0 && (_jsx(ModelSelector, { models: availableModels, selectedIndex: 0, onSelect: handleModelSelect, onCancel: handleModelCancel })), upgradeMode && latestVersion && (_jsx(UpgradePrompt, { currentVersion: getVersion(), latestVersion: latestVersion, onConfirm: handleUpgradeConfirm, onCancel: handleUpgradeCancel })), upgrading && _jsx(Text, { color: "yellow", children: "\u280B Upgrading..." }), !modelSelectMode && !upgradeMode && !upgrading && (_jsxs(Box, { flexDirection: "column", children: [_jsx(Sep, {}), _jsxs(Box, { children: [_jsx(Text, { color: "cyan", children: "calliope" }), _jsx(Text, { dimColor: true, children: "> " }), _jsx(TextInput, { value: input, onChange: setInput, onSubmit: handleSubmit })] })] })), _jsxs(Box, { flexDirection: "column", children: [_jsx(Sep, {}), _jsxs(Text, { dimColor: true, children: [selectProvider(provider), ":", actualModel.length > 25 ? actualModel.slice(0, 22) + '...' : actualModel, ' │ ', formatTokens(stats.inputTokens + stats.outputTokens), " tokens", ' │ ', formatCost(stats.cost)] })] })] }));
+    // Cycle through modes
+    const cycleMode = useCallback(() => {
+        setMode(current => {
+            const modes = ['plan', 'hybrid', 'work'];
+            const idx = modes.indexOf(current);
+            const next = modes[(idx + 1) % modes.length];
+            return next;
+        });
+    }, []);
+    // Keyboard shortcuts (Escape to exit, Shift+Tab to cycle mode)
+    useInput((input, key) => {
+        if (key.escape && !isModalActive)
+            exit();
+        // Shift+Tab to cycle mode (key.shift && key.tab)
+        if (key.shift && key.tab && !isProcessing) {
+            cycleMode();
+        }
+    }, { isActive: !isModalActive });
+    // Render
+    return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsx(MessageHistory, { messages: messages }), streamingResponse && (_jsxs(Box, { flexDirection: "column", marginTop: 1, marginBottom: 1, children: [_jsx(Text, { color: "cyan", children: "\u2727 Calliope:" }), _jsx(Text, { children: " " }), streamingResponse.split('\n').map((line, i) => (_jsxs(Text, { children: [_jsx(Text, { color: "blue", children: "\u2502" }), " ", line] }, i))), _jsx(Text, { color: "blue", children: "\u2502" }), _jsx(Text, { color: "cyan", children: "\u258C" })] })), isProcessing && thinkingState && !streamingResponse && _jsx(ThinkingDisplay, { state: thinkingState }), isProcessing && !thinkingState && !streamingResponse && _jsx(ProcessingIndicator, { label: "Processing..." }), modalMode === 'model' && availableModels.length > 0 && (_jsx(ModelSelector, { models: availableModels, onSelect: handleModelSelect, onCancel: handleModalCancel })), modalMode === 'upgrade' && latestVersion && (_jsx(UpgradePrompt, { currentVersion: getVersion(), latestVersion: latestVersion, onConfirm: handleUpgradeConfirm, onCancel: handleModalCancel })), _jsx(ChatInput, { value: input, onChange: setInput, onSubmit: handleSubmit, disabled: isModalActive || isProcessing, mode: mode }), _jsx(StatusBar, { provider: actualProvider, model: actualModel, mode: mode, stats: stats, contextTokens: contextTokens })] }));
+}
+// ============================================================================
+// App Wrapper & Entry Point
+// ============================================================================
+function App() {
+    return _jsx(TerminalChat, {});
 }
-// ANSI colors for banner
-const c = {
+// ANSI colors for pre-Ink banner
+const ansi = {
     reset: '\x1b[0m',
     cyan: '\x1b[36m',
     brightCyan: '\x1b[96m',
     dim: '\x1b[2m',
 };
-// Print banner before Ink starts
 function printBanner(provider, model) {
     console.log();
-    console.log(`${c.brightCyan}${BANNER_LINES[0]}${c.reset}`);
-    console.log(`${c.brightCyan}${BANNER_LINES[1]}${c.reset}`);
-    console.log(`${c.cyan}${BANNER_LINES[2]}${c.reset}`);
-    console.log(`${c.cyan}${BANNER_LINES[3]}${c.reset}`);
-    console.log(`${c.brightCyan}${BANNER_LINES[4]}${c.reset}`);
-    console.log(`${c.cyan}${BANNER_LINES[5]}${c.reset}`);
+    console.log(`${ansi.brightCyan}${BANNER_LINES[0]}${ansi.reset}`);
+    console.log(`${ansi.brightCyan}${BANNER_LINES[1]}${ansi.reset}`);
+    console.log(`${ansi.cyan}${BANNER_LINES[2]}${ansi.reset}`);
+    console.log(`${ansi.cyan}${BANNER_LINES[3]}${ansi.reset}`);
+    console.log(`${ansi.brightCyan}${BANNER_LINES[4]}${ansi.reset}`);
+    console.log(`${ansi.cyan}${BANNER_LINES[5]}${ansi.reset}`);
     console.log();
-    console.log(`${c.dim}        The Muse of Digital Eloquence${c.reset}`);
+    console.log(`${ansi.dim}        The Muse of Digital Eloquence${ansi.reset}`);
     console.log();
-    console.log(`  ${c.dim}v${getVersion()} | ${provider}:${model}${c.reset}`);
-    console.log(`  ${c.dim}/help for commands | ESC to exit${c.reset}`);
+    console.log(`  ${ansi.dim}v${getVersion()} | ${provider}:${model}${ansi.reset}`);
+    console.log(`  ${ansi.dim}/help for commands | ESC to exit${ansi.reset}`);
     console.log();
 }
-// Export start function
 export async function startInkCLI(options = {}) {
-    // Print banner before Ink takes over
     const provider = selectProvider(config.get('defaultProvider'));
     const model = config.get('defaultModel') || DEFAULT_MODELS[provider];
     printBanner(provider, model);
-    const { waitUntilExit } = render(_jsx(App, { skipPermissions: options.skipPermissions }));
+    const { waitUntilExit } = render(_jsx(App, {}));
     await waitUntilExit();
 }
 //# sourceMappingURL=ui-cli.js.map