@drewsepsi/nextpi 0.1.0

package/app/page.tsx

@@ -0,0 +1,1643 @@
+// Styling updated to use globals.css — visual changes only
+'use client';
+
+import { useState, useEffect, useRef, useCallback } from 'react';
+import {
+  Search,
+  RefreshCw,
+  Send,
+  Terminal,
+  Trash2,
+  ChevronUp,
+  ChevronDown,
+  Activity,
+  Folder,
+  FolderOpen,
+  Brain,
+  User,
+  Bot,
+  Wrench,
+  FileText,
+  Save,
+  X,
+  FilePlus,
+  RotateCcw,
+  AlertTriangle,
+  Undo,
+  ChevronsDownUp,
+  ChevronsUpDown,
+  Play,
+  Square,
+  Globe,
+  ExternalLink,
+  HelpCircle,
+  Command,
+  Settings,
+} from 'lucide-react';
+import { Tree, type TreeViewElement } from '@/components/ui/file-tree';
+
+// Types
+interface Message {
+  id: string;
+  content: string;
+  thinking?: string;
+  isUser: boolean;
+  isStreaming?: boolean;
+}
+
+interface Activity {
+  id: string;
+  name: string;
+  type: string;
+  status: 'running' | 'success' | 'error';
+  details?: string;
+  time: string;
+  elapsed?: number;
+}
+
+interface TerminalLine {
+  id: string;
+  content: string;
+  type: 'info' | 'command' | 'output' | 'error' | 'success';
+  timestamp: string;
+}
+
+interface SessionInfo {
+  model: string;
+  messages: number;
+  tokens: number;
+  tools: string[];
+}
+
+// Markdown renderer
+function renderMarkdown(text: string): string {
+  let html = text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;');
+
+  // Code blocks
+  html = html.replace(/```(\w+)?\n([\s\S]*?)```/g, (match, lang, code) => {
+    return `<pre><code class="language-${lang || 'text'}">${code.trim()}</code></pre>`;
+  });
+
+  // Inline code
+  html = html.replace(/`([^`]+)`/g, '<code>$1</code>');
+
+  // Headers
+  html = html.replace(/^### (.*$)/gm, '<h3>$1</h3>');
+  html = html.replace(/^## (.*$)/gm, '<h2>$1</h2>');
+  html = html.replace(/^# (.*$)/gm, '<h1>$1</h1>');
+
+  // Bold and italic
+  html = html.replace(/\*\*\*(.*?)\*\*\*/g, '<strong><em>$1</em></strong>');
+  html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+  html = html.replace(/\*(.*?)\*/g, '<em>$1</em>');
+
+  // Links
+  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+
+  // Line breaks
+  html = html.replace(/\n\n/g, '</p><p>');
+  html = html.replace(/\n/g, '<br>');
+
+  if (!html.startsWith('<')) {
+    html = `<p>${html}</p>`;
+  }
+
+  return html;
+}
+
+const MODELS = [
+  { id: 'openrouter/free', name: 'OpenRouter Free (Auto)', description: 'Fast and reliable, uses free models.' },
+  { id: 'anthropic/claude-3.5-sonnet', name: 'Claude 3.5 Sonnet', description: 'Very capable, balanced speed & intelligence.' },
+  { id: 'anthropic/claude-3-opus', name: 'Claude 3 Opus', description: 'Most powerful Claude model.' },
+  { id: 'openai/gpt-4o', name: 'GPT-4o', description: 'Flagship OpenAI model.' },
+  { id: 'openai/gpt-4o-mini', name: 'GPT-4o Mini', description: 'Fastest OpenAI model.' },
+  { id: 'google/gemini-2.0-flash-exp:free', name: 'Gemini 2.0 Flash', description: "Google's fastest large model (Free Preview)." },
+  { id: 'google/gemini-pro-1.5', name: 'Gemini 1.5 Pro', description: "Google's most capable model." },
+  { id: 'meta-llama/llama-3.2-90b-vision-instruct', name: 'Llama 3.2 90B', description: "Meta's latest high-performing open model." },
+  { id: 'qwen/qwen-2.5-72b-instruct', name: 'Qwen 2.5 72B', description: 'Powerful instruction-tuned model from Alibaba.' },
+];
+
+export default function Home() {
+  // State
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [isStreaming, setIsStreaming] = useState(false);
+  const [currentMessage, setCurrentMessage] = useState('');
+  const [currentThinking, setCurrentThinking] = useState('');
+  const [activities, setActivities] = useState<Activity[]>([]);
+  const [terminalLines, setTerminalLines] = useState<TerminalLine[]>([]);
+  const [isTerminalExpanded, setIsTerminalExpanded] = useState(false);
+  const [activeTab, setActiveTab] = useState<'activity' | 'files'>('activity');
+  const [connectionStatus, setConnectionStatus] = useState<'connecting' | 'connected' | 'error'>('connecting');
+  const [sessionInfo, setSessionInfo] = useState<SessionInfo | null>(null);
+  const [showThinking, setShowThinking] = useState(true);
+  const [fileElements, setFileElements] = useState<TreeViewElement[]>([]);
+  const [expandedFolders, setExpandedFolders] = useState<string[]>([]);
+  const [selectedFileId, setSelectedFileId] = useState<string | undefined>(undefined);
+  const isInitialLoad = useRef(true);
+
+  // File Editor State
+  const [editingFile, setEditingFile] = useState<{ id: string, name: string } | null>(null);
+  const [editorContent, setEditorContent] = useState('');
+  const [originalContent, setOriginalContent] = useState('');
+  const [isEditorOpen, setIsEditorOpen] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isDeleteConfirmOpen, setIsDeleteConfirmOpen] = useState(false);
+  const [isNewFileModalOpen, setIsNewFileModalOpen] = useState(false);
+  const [newFileName, setNewFileName] = useState('');
+  const [targetDirectory, setTargetDirectory] = useState<string>('');
+  const [contextMenu, setContextMenu] = useState<{ x: number, y: number, folderId: string } | null>(null);
+  const [isModelSelectorOpen, setIsModelSelectorOpen] = useState(false);
+
+  // Preview State
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const [previewUrl, setPreviewUrl] = useState('http://localhost:3000');
+
+  // Settings & Config State
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const [configInfo, setConfigInfo] = useState<{ hasKey: boolean, maskedKey: string | null }>({ hasKey: false, maskedKey: null });
+  const [tempApiKey, setTempApiKey] = useState('');
+  const [isSavingConfig, setIsSavingConfig] = useState(false);
+  const [isHelpOpen, setIsHelpOpen] = useState(false);
+
+  // Refs
+  const chatRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const eventSourceRef = useRef<EventSource | null>(null);
+  const activityTimers = useRef<Map<string, number>>(new Map());
+  const accumulatedMessageRef = useRef<string>('');
+  const accumulatedThinkingRef = useRef<string>('');
+
+  // Scroll to bottom of chat
+  const scrollToBottom = useCallback(() => {
+    if (chatRef.current) {
+      chatRef.current.scrollTop = chatRef.current.scrollHeight;
+    }
+  }, []);
+
+  // Add terminal line
+  const addTerminalLine = useCallback((content: string, type: TerminalLine['type'] = 'info') => {
+    const timestamp = new Date().toLocaleTimeString('en-US', {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
+    });
+
+    setTerminalLines(prev => [...prev, {
+      id: `term-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
+      content,
+      type,
+      timestamp
+    }]);
+  }, []);
+
+  // Add activity
+  const addActivity = useCallback((name: string, type: string, details?: string, explicitId?: string) => {
+    // Use explicitId (e.g. tool name) when provided so tool_end can find it by the same key
+    const id = explicitId ?? `activity-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+    const time = new Date().toLocaleTimeString('en-US', {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+
+    const activity: Activity = {
+      id,
+      name,
+      type,
+      status: 'running',
+      details,
+      time,
+      elapsed: 0
+    };
+
+    setActivities(prev => [activity, ...prev]);
+
+    // Start elapsed timer
+    const startTime = Date.now();
+    const timer = window.setInterval(() => {
+      setActivities(prev => prev.map(a =>
+        a.id === id ? { ...a, elapsed: Math.round((Date.now() - startTime) / 100) / 10 } : a
+      ));
+    }, 100);
+
+    activityTimers.current.set(id, timer);
+    return id;
+  }, []);
+
+  // Get all folders for selection
+  const getAllFolders = useCallback((elements: TreeViewElement[]): { id: string, name: string }[] => {
+    const folders: { id: string, name: string }[] = [{ id: '', name: 'Project Root' }];
+
+    const scan = (items: TreeViewElement[]) => {
+      for (const item of items) {
+        if (item.type === 'folder') {
+          folders.push({ id: item.id, name: item.id });
+          if (item.children) scan(item.children);
+        }
+      }
+    };
+
+    scan(elements);
+    return folders;
+  }, []);
+
+  const handleAddNewFile = useCallback((dirId: string = '') => {
+    setTargetDirectory(dirId);
+    setNewFileName('');
+    setIsNewFileModalOpen(true);
+    setContextMenu(null);
+  }, []);
+  const handleContextMenu = useCallback((e: React.MouseEvent, folderId: string) => {
+    e.preventDefault();
+    setContextMenu({ x: e.clientX, y: e.clientY, folderId });
+  }, []);
+
+  // Fetch config on mount
+  useEffect(() => {
+    fetch('/api/config')
+      .then(res => res.json())
+      .then(data => {
+        setConfigInfo(data);
+        if (!data.hasKey) {
+          setIsSettingsOpen(true);
+        }
+      });
+  }, []);
+
+  const handleSaveConfig = async () => {
+    if (!tempApiKey.trim()) return;
+    setIsSavingConfig(true);
+    try {
+      const res = await fetch('/api/config', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ apiKey: tempApiKey })
+      });
+      if (res.ok) {
+        setTempApiKey('');
+        const data = await (await fetch('/api/config')).json();
+        setConfigInfo(data);
+        setIsSettingsOpen(false);
+        addTerminalLine('API configuration updated successfully', 'success');
+      }
+    } catch (err) {
+      addTerminalLine('Failed to save API configuration', 'error');
+    } finally {
+      setIsSavingConfig(false);
+    }
+  };
+
+  useEffect(() => {
+    const handleClickOutside = () => setContextMenu(null);
+    window.addEventListener('click', handleClickOutside);
+    return () => window.removeEventListener('click', handleClickOutside);
+  }, []);
+
+  const expandAll = useCallback(() => {
+    const getAllFolderIds = (elements: TreeViewElement[]): string[] => {
+      const ids: string[] = [];
+      for (const el of elements) {
+        if (el.type === 'folder') {
+          ids.push(el.id);
+          if (el.children) {
+            ids.push(...getAllFolderIds(el.children));
+          }
+        }
+      }
+      return ids;
+    };
+    setExpandedFolders(getAllFolderIds(fileElements));
+  }, [fileElements]);
+
+  const collapseAll = useCallback(() => {
+    setExpandedFolders([]);
+  }, []);
+
+
+  const toggleAllFolders = useCallback(() => {
+    if (expandedFolders.length > 0) {
+      collapseAll();
+    } else {
+      expandAll();
+    }
+  }, [expandedFolders.length, expandAll, collapseAll]);
+
+  // Complete activity
+  const completeActivity = useCallback((id: string, success: boolean) => {
+    // Clear timer
+    const timer = activityTimers.current.get(id);
+    if (timer) {
+      clearInterval(timer);
+      activityTimers.current.delete(id);
+    }
+
+    setActivities(prev => prev.map(a =>
+      a.id === id ? { ...a, status: success ? 'success' : 'error' } : a
+    ));
+  }, []);
+
+  // Load chat history
+  const loadMessages = useCallback(async () => {
+    try {
+      const response = await fetch('/api/messages');
+      if (response.ok) {
+        const data = await response.json();
+        if (data.messages && data.messages.length > 0) {
+          setMessages(data.messages);
+        }
+      }
+    } catch (err) {
+      console.error('Failed to load messages:', err);
+    }
+  }, []);
+
+  // Load session info
+  const loadSessionInfo = useCallback(async () => {
+    try {
+      const response = await fetch('/api/session');
+      if (response.ok) {
+        const data = await response.json();
+        setSessionInfo(data);
+      }
+    } catch (err) {
+      console.error('Failed to load session info:', err);
+    }
+  }, []);
+
+  // Load file tree
+  const loadFileTree = useCallback(async () => {
+    try {
+      const response = await fetch('/api/files');
+      if (response.ok) {
+        const data = await response.json();
+        setFileElements(data.elements);
+        // Only auto-expand if no folders are currently expanded and it's the initial load
+        if (isInitialLoad.current && expandedFolders.length === 0) {
+          const getIdsToExpand = (elements: TreeViewElement[], depth = 0): string[] => {
+            if (depth >= 2) return [];
+            const ids: string[] = [];
+            for (const el of elements) {
+              if (el.type === 'folder') {
+                ids.push(el.id);
+                if (el.children) {
+                  ids.push(...getIdsToExpand(el.children, depth + 1));
+                }
+              }
+            }
+            return ids;
+          };
+          setExpandedFolders(getIdsToExpand(data.elements));
+          isInitialLoad.current = false;
+        }
+      }
+    } catch (err) {
+      console.error('Failed to load file tree:', err);
+    }
+  }, []);
+
+  // Handle file operations
+  const handleFileSelect = useCallback(async (id: string | undefined) => {
+    if (!id) return;
+
+    // Find the element to see if it's a file
+    const findElement = (elements: TreeViewElement[], targetId: string): TreeViewElement | null => {
+      for (const el of elements) {
+        if (el.id === targetId) return el;
+        if (el.children) {
+          const found = findElement(el.children, targetId);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+
+    const element = findElement(fileElements, id);
+    if (!element || element.type !== 'file') return;
+
+    try {
+      // The id is the relative path
+      const pathSegments = id.replace(/\\/g, '/').split('/');
+      const response = await fetch(`/api/files/${pathSegments.join('/')}`);
+      if (response.ok) {
+        const data = await response.json();
+        setEditingFile({ id, name: element.name });
+        setEditorContent(data.content);
+        setOriginalContent(data.content);
+        setIsEditorOpen(true);
+      } else {
+        addTerminalLine(`Failed to load file: ${id}`, 'error');
+      }
+    } catch (err) {
+      console.error('Error loading file:', err);
+      addTerminalLine(`Error loading file: ${id}`, 'error');
+    }
+  }, [fileElements, addTerminalLine]);
+
+  const saveFile = async () => {
+    if (!editingFile) return;
+    setIsSaving(true);
+    try {
+      const pathSegments = editingFile.id.replace(/\\/g, '/').split('/');
+      const response = await fetch(`/api/files/${pathSegments.join('/')}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ content: editorContent })
+      });
+
+      if (response.ok) {
+        addTerminalLine(`File saved: ${editingFile.name}`, 'info');
+        setOriginalContent(editorContent);
+        setIsEditorOpen(false);
+        loadFileTree();
+      } else {
+        const data = await response.json();
+        addTerminalLine(`Failed to save file: ${data.error}`, 'error');
+      }
+    } catch (err) {
+      addTerminalLine(`Error saving file: ${(err as Error).message}`, 'error');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const deleteFile = async () => {
+    if (!editingFile) return;
+
+    setIsDeleting(true);
+    try {
+      const pathSegments = editingFile.id.replace(/\\/g, '/').split('/');
+      const response = await fetch(`/api/files/${pathSegments.join('/')}`, {
+        method: 'DELETE'
+      });
+
+      if (response.ok) {
+        addTerminalLine(`File deleted: ${editingFile.name}`, 'info');
+        setIsEditorOpen(false);
+        setIsDeleteConfirmOpen(false);
+        loadFileTree();
+      } else {
+        const data = await response.json();
+        addTerminalLine(`Failed to delete file: ${data.error}`, 'error');
+      }
+    } catch (err) {
+      addTerminalLine(`Error deleting file: ${(err as Error).message}`, 'error');
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const handleExpandedChange = useCallback((items: string[] | undefined) => {
+    setExpandedFolders(items || []);
+  }, []);
+
+  const handleSelectedIdChange = useCallback((id: string | undefined) => {
+    setSelectedFileId(id);
+    if (id) {
+      handleFileSelect(id);
+    }
+  }, [handleFileSelect]);
+
+  // Connect to SSE
+  useEffect(() => {
+    const connectEventSource = () => {
+      if (eventSourceRef.current) {
+        eventSourceRef.current.close();
+      }
+
+      const eventSource = new EventSource('/api/stream');
+      eventSourceRef.current = eventSource;
+
+      eventSource.onopen = () => {
+        setConnectionStatus('connected');
+      };
+
+      eventSource.onmessage = (e) => {
+        const data = JSON.parse(e.data);
+
+        switch (data.type) {
+          case 'start':
+            setIsStreaming(true);
+            accumulatedMessageRef.current = '';
+            accumulatedThinkingRef.current = '';
+            setCurrentMessage('');
+            setCurrentThinking('');
+            addTerminalLine('Agent started responding', 'info');
+            break;
+
+          case 'thinking':
+            accumulatedThinkingRef.current += data.content;
+            setCurrentThinking(accumulatedThinkingRef.current);
+            scrollToBottom();
+            break;
+
+          case 'content':
+            accumulatedMessageRef.current += data.content;
+            setCurrentMessage(accumulatedMessageRef.current);
+            scrollToBottom();
+            break;
+
+          case 'tool_start':
+            // Use tool name as the activity ID so tool_end can look it up
+            addActivity(data.tool, 'tool', JSON.stringify(data.args).slice(0, 80), data.tool);
+            addTerminalLine(`$ ${data.tool}: ${JSON.stringify(data.args)}`, 'command');
+            break;
+
+          case 'tool_end':
+            completeActivity(data.tool, !data.isError);
+            if (data.output) {
+              addTerminalLine(data.output.slice(0, 500), 'output');
+            }
+            if (data.error) {
+              addTerminalLine(`Error: ${data.error}`, 'error');
+            }
+            break;
+
+          case 'end':
+            setIsStreaming(false);
+            // Move accumulated content to a local variable before clearing
+            const finalContent = accumulatedMessageRef.current;
+            const finalThinking = accumulatedThinkingRef.current;
+
+            if (finalContent || finalThinking) {
+              setMessages(prev => [...prev, {
+                id: `msg-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
+                content: finalContent,
+                thinking: finalThinking,
+                isUser: false
+              }]);
+            }
+
+            // Clear refs and state
+            accumulatedMessageRef.current = '';
+            accumulatedThinkingRef.current = '';
+            setCurrentMessage('');
+            setCurrentThinking('');
+
+            addTerminalLine('Agent finished', 'info');
+            loadSessionInfo();
+            // Also sync from backend to be absolutely sure we have the full history
+            setTimeout(loadMessages, 500);
+            break;
+
+          case 'compacting':
+            addActivity('context-compact', 'tool', 'Compacting conversation');
+            addTerminalLine('Compacting context...', 'info');
+            break;
+
+          case 'retry':
+            addActivity(`Retry ${data.attempt}/${data.maxAttempts}`, 'retry', `Delay: ${data.delayMs}ms`);
+            addTerminalLine(`Retrying attempt ${data.attempt}/${data.maxAttempts}`, 'info');
+            break;
+
+          case 'connected':
+            setConnectionStatus('connected');
+            break;
+        }
+      };
+
+      eventSource.onerror = () => {
+        setConnectionStatus('error');
+        eventSource.close();
+        setTimeout(connectEventSource, 3000);
+      };
+    };
+
+    connectEventSource();
+    loadSessionInfo();
+    loadMessages(); // Load existing history
+    loadFileTree();
+
+    return () => {
+      eventSourceRef.current?.close();
+      // Clear all timers
+      activityTimers.current.forEach(timer => clearInterval(timer));
+    };
+  }, [addActivity, addTerminalLine, completeActivity, loadFileTree, loadSessionInfo, loadMessages]);
+
+  // Send message
+  const sendMessage = async () => {
+    if (!input.trim() || isStreaming) return;
+
+    const userMessage = input.trim();
+    setInput('');
+
+    // Slash command handling
+    if (userMessage.startsWith('/')) {
+      const command = userMessage.split(' ')[0].toLowerCase();
+
+      if (command === '/clear' || command === '/new') {
+        addTerminalLine(`Executing command: ${command}`, 'info');
+        await resetSession();
+        return;
+      }
+
+      if (command === '/model') {
+        setIsModelSelectorOpen(true);
+        addTerminalLine('Opening model selector...', 'info');
+        return;
+      }
+
+      // If unrecognized slash command, maybe just inform the user or ignore
+      addTerminalLine(`Unknown command: ${command}`, 'error');
+      return;
+    }
+
+    // Add user message
+    setMessages(prev => [...prev, {
+      id: `msg-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`,
+      content: userMessage,
+      isUser: true
+    }]);
+
+    setIsStreaming(true);
+
+    try {
+      const response = await fetch('/api/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: userMessage })
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to send message');
+      }
+    } catch (err: unknown) {
+      setIsStreaming(false);
+      addTerminalLine(`Error: ${(err as Error).message}`, 'error');
+    }
+  };
+
+  // Select model
+  const selectModel = async (modelId: string) => {
+    setIsModelSelectorOpen(false);
+    addTerminalLine(`Switching to model: ${modelId}`, 'info');
+
+    try {
+      const response = await fetch('/api/session', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ modelId })
+      });
+
+      if (response.ok) {
+        setMessages([]);
+        setCurrentMessage('');
+        setActivities([]);
+        setTerminalLines([]);
+        addTerminalLine(`Switched to ${modelId}`, 'info');
+        loadSessionInfo();
+      } else {
+        addTerminalLine(`Failed to switch model: ${response.statusText}`, 'error');
+      }
+    } catch (err) {
+      console.error('Failed to switch model:', err);
+      addTerminalLine('Error switching model', 'error');
+    }
+  };
+
+  // Reset session
+  const resetSession = async () => {
+    try {
+      const response = await fetch('/api/session', { method: 'POST' });
+      if (response.ok) {
+        setMessages([]);
+        setCurrentMessage('');
+        setActivities([]);
+        setTerminalLines([]);
+        addTerminalLine('Session reset', 'info');
+        loadSessionInfo();
+      }
+    } catch (err) {
+      console.error('Failed to reset session:', err);
+    }
+  };
+
+  // Handle input keydown
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
+    }
+  };
+
+  // Get activity icon
+  const getActivityIcon = (type: string) => {
+    switch (type) {
+      case 'tool': return Wrench;
+      case 'retry': return RefreshCw;
+      default: return Activity;
+    }
+  };
+
+  return (
+    <div className="app-wrapper">
+      {/* Sidebar */}
+      <aside className="sidebar" role="complementary" aria-label="Activity and file browser">
+        {/* Connection Status */}
+        <div className="connection-status">
+          <span
+            className={`status-indicator ${connectionStatus}`}
+            role="status"
+            aria-label={`Connection: ${connectionStatus}`}
+          ></span>
+          <span className="status-text">
+            {connectionStatus === 'connected' ? 'Connected' :
+              connectionStatus === 'connecting' ? 'Connecting…' : 'Disconnected'}
+          </span>
+        </div>
+
+        {/* Tabs */}
+        <div className="sidebar-tabs" role="tablist" aria-label="Sidebar panels">
+          <button
+            className={`sidebar-tab ${activeTab === 'activity' ? 'active' : ''}`}
+            onClick={() => setActiveTab('activity')}
+            role="tab"
+            aria-selected={activeTab === 'activity'}
+            aria-controls="panel-activity"
+          >
+            <Activity size={14} />
+            <span>Activity</span>
+          </button>
+          <button
+            className={`sidebar-tab ${activeTab === 'files' ? 'active' : ''}`}
+            onClick={() => setActiveTab('files')}
+            role="tab"
+            aria-selected={activeTab === 'files'}
+            aria-controls="panel-files"
+          >
+            <Folder size={14} />
+            <span>Files</span>
+          </button>
+        </div>
+
+        {/* Activity Panel */}
+        {activeTab === 'activity' && (
+          <div className="sidebar-panel active" id="panel-activity" role="tabpanel">
+            <div className="panel-header">
+              <h3>Activity Log</h3>
+              <button
+                className="btn-icon"
+                onClick={() => setActivities([])}
+                aria-label="Clear activity log"
+              >
+                <Trash2 size={14} />
+              </button>
+            </div>
+            <div className="activity-log">
+              {activities.length === 0 ? (
+                <div className="activity-empty">
+                  {/* Accessible empty state */}
+                  <span>Waiting for activity…</span>
+                </div>
+              ) : (
+                activities.map(activity => {
+                  const Icon = getActivityIcon(activity.type);
+                  return (
+                    <div key={activity.id} className="activity-item">
+                      <div className="activity-item-header">
+                        <Icon
+                          size={14}
+                          className={`activity-item-icon ${activity.status === 'running' ? 'running' : ''}`}
+                        />
+                        <span className="activity-item-name">{activity.name}</span>
+                        <span className={`activity-item-status ${activity.status}`}>
+                          {activity.status === 'running'
+                            ? `${activity.elapsed?.toFixed(1)}s`
+                            : activity.status}
+                        </span>
+                      </div>
+                      {activity.details && (
+                        <div className="activity-item-details">{activity.details}</div>
+                      )}
+                      <div className="activity-item-time">{activity.time}</div>
+                    </div>
+                  );
+                })
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Files Panel */}
+        {activeTab === 'files' && (
+          <div className="sidebar-panel active flex flex-col" id="panel-files" role="tabpanel">
+            <div className="panel-header">
+              <div className="flex items-center gap-2">
+                <FolderOpen size={14} className="text-muted-foreground" />
+                <h3>Files</h3>
+              </div>
+              <div className="flex items-center gap-1">
+                <button
+                  className="btn-icon h-8 w-8 bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground transition-all duration-200"
+                  onClick={toggleAllFolders}
+                  title={expandedFolders.length > 0 ? "Collapse All" : "Expand All"}
+                >
+                  {expandedFolders.length > 0 ? <ChevronsDownUp size={16} /> : <ChevronsUpDown size={16} />}
+                </button>
+                <button
+                  className="btn-icon h-8 w-8 bg-primary/10 text-primary hover:bg-primary hover:text-primary-foreground transition-all duration-200 shadow-sm"
+                  onClick={() => {
+                    setNewFileName('');
+                    setTargetDirectory('');
+                    setIsNewFileModalOpen(true);
+                  }}
+                  title="New File"
+                >
+                  <FilePlus size={18} />
+                </button>
+                <span className="text-xs text-muted-foreground ml-1">
+                  {fileElements.length} {fileElements.length === 1 ? 'item' : 'items'}
+                </span>
+              </div>
+            </div>
+            <div className="file-browser flex-1 overflow-hidden px-2 py-2">
+              {fileElements.length === 0 ? (
+                <div className="flex items-center justify-center h-full text-muted-foreground text-sm">
+                  Loading…
+                </div>
+              ) : (
+                <Tree
+                  elements={fileElements}
+                  initialExpandedItems={expandedFolders}
+                  initialSelectedId={selectedFileId}
+                  onExpandedItemsChange={handleExpandedChange}
+                  onSelectedIdChange={handleSelectedIdChange}
+                  onFolderContextMenu={handleContextMenu}
+                  className="h-full"
+                />
+              )}
+            </div>
+          </div>
+        )}
+      </aside>
+
+      {/* Main Content */}
+      <div className="app">
+        {/* Header */}
+        <header className="header">
+          <div className="header-brand">
+            <Search className="header-icon" size={18} />
+            <h1 className="header-title">NextPi</h1>
+          </div>
+
+          <div className="header-meta">
+            <div className="header-info">
+              <span><strong>Model</strong> {sessionInfo?.model || '—'}</span>
+              <span><strong>Messages</strong> {sessionInfo?.messages || 0}</span>
+              <span><strong>Tokens</strong> ~{sessionInfo?.tokens || 0}</span>
+            </div>
+
+            <label className="thinking-toggle">
+              <input
+                type="checkbox"
+                checked={showThinking}
+                onChange={(e) => setShowThinking(e.target.checked)}
+              />
+              <Brain size={14} />
+              <span>Thinking</span>
+            </label>
+
+            <button
+              className={`thinking-toggle ${isSettingsOpen ? 'bg-accent text-foreground' : ''}`}
+              onClick={() => setIsSettingsOpen(true)}
+            >
+              <Settings size={14} />
+              <span>Settings</span>
+            </button>
+
+            <button
+              className={`thinking-toggle ${isHelpOpen ? 'bg-accent text-foreground' : ''}`}
+              onClick={() => setIsHelpOpen(true)}
+            >
+              <HelpCircle size={14} />
+              <span>Help</span>
+            </button>
+
+            <button className="btn btn-secondary" onClick={resetSession} aria-label="Start new session">
+              <RefreshCw size={14} />
+              <span>New Session</span>
+            </button>
+
+            <div className="w-px h-6 bg-border mx-1" />
+
+            <button
+              className={`btn ${isPreviewOpen ? 'bg-destructive/10 text-destructive hover:bg-destructive/20 border-destructive/20' : 'btn-primary'} h-9 px-4 transition-all duration-300 shadow-sm`}
+              onClick={() => setIsPreviewOpen(!isPreviewOpen)}
+              aria-label={isPreviewOpen ? "Stop App" : "Run App"}
+            >
+              {isPreviewOpen ? (
+                <>
+                  <div className="size-2 rounded-full bg-destructive animate-pulse mr-2 shadow-[0_0_10px_rgba(239,68,68,0.6)]" />
+                  <Square size={14} className="mr-2 fill-current opacity-70" />
+                  <span>Stop App</span>
+                </>
+              ) : (
+                <>
+                  <Play size={14} className="mr-2 fill-current" />
+                  <span>Run App</span>
+                </>
+              )}
+            </button>
+          </div>
+        </header>
+
+        <div className="app-content-area">
+          <div className="chat-section">
+            <main className="chat-container" ref={chatRef} aria-label="Chat messages" aria-live="polite">
+              {messages.length === 0 && !isStreaming && (
+                <div className="empty-state">
+                  <Bot className="empty-state-icon" size={48} />
+                  <p className="empty-state-title">How can I help you today?</p>
+                  <p className="empty-state-hint">
+                    Ask me to research topics, search the web, fetch documentation,
+                    or help with coding tasks. Use <kbd>Shift+Enter</kbd> for new lines.
+                  </p>
+                </div>
+              )}
+
+              {messages.map(msg => (
+                <div key={msg.id} className={`message message-${msg.isUser ? 'user' : 'assistant'}`}>
+                  <div className="message-header">
+                    {msg.isUser ? <User size={14} /> : <Bot size={14} />}
+                    <span>{msg.isUser ? 'You' : 'Assistant'}</span>
+                  </div>
+                  <div className="message-bubble">
+                    {showThinking && msg.thinking && (
+                      <div className="thinking-block">
+                        <div className="thinking-header">
+                          <Brain size={12} className="text-muted-foreground" />
+                          <span>Reasoning</span>
+                        </div>
+                        <div className="thinking-content italic text-muted-foreground/80 leading-relaxed text-sm">
+                          {msg.thinking}
+                        </div>
+                      </div>
+                    )}
+                    <div
+                      className="message-content"
+                      dangerouslySetInnerHTML={{
+                        __html: msg.isUser
+                          ? msg.content.replace(/</g, '&lt;').replace(/>/g, '&gt;')
+                          : renderMarkdown(msg.content)
+                      }}
+                    />
+                  </div>
+                </div>
+              ))}
+
+              {(isStreaming && (currentMessage || currentThinking)) && (
+                <div className="message message-assistant">
+                  <div className="message-header">
+                    <Bot size={14} />
+                    <span>NextPi</span>
+                  </div>
+                  <div className="message-bubble">
+                    {showThinking && currentThinking && (
+                      <div className="thinking-block">
+                        <div className="thinking-header">
+                          <Brain size={12} className="text-muted-foreground" />
+                          <span>Reasoning</span>
+                        </div>
+                        <div className="thinking-content italic text-muted-foreground/80 leading-relaxed text-sm">
+                          {currentThinking}
+                        </div>
+                      </div>
+                    )}
+                    {currentMessage ? (
+                      <div
+                        className="message-content"
+                        dangerouslySetInnerHTML={{ __html: renderMarkdown(currentMessage) }}
+                      />
+                    ) : (
+                      <div className="flex gap-2 text-sm text-muted-foreground animate-pulse mt-2 ml-1 items-center">
+                        <div className="size-1.5 rounded-full bg-current" />
+                        Generating...
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {isStreaming && !currentMessage && !currentThinking && (
+                <div className="flex gap-2 text-sm text-muted-foreground animate-pulse mt-2 ml-4 mb-4 items-center">
+                  <div className="size-1.5 rounded-full bg-current" />
+                  Thinking...
+                </div>
+              )}
+            </main>
+
+            {/* Terminal Panel */}
+            <div className={`terminal-panel ${isTerminalExpanded ? 'expanded' : 'collapsed'}`}>
+              <div
+                className="terminal-header"
+                onClick={() => setIsTerminalExpanded(!isTerminalExpanded)}
+                role="button"
+                tabIndex={0}
+                aria-expanded={isTerminalExpanded}
+                aria-controls="terminal-content"
+                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setIsTerminalExpanded(!isTerminalExpanded); } }}
+              >
+                <div className="terminal-title">
+                  <Terminal size={14} />
+                  <span>Terminal Output</span>
+                  {terminalLines.length > 0 && (
+                    <span className="terminal-badge">{terminalLines.length}</span>
+                  )}
+                </div>
+                <div className="terminal-controls">
+                  <button
+                    className="btn-icon"
+                    onClick={(e) => { e.stopPropagation(); setTerminalLines([]); }}
+                    aria-label="Clear terminal"
+                  >
+                    <Trash2 size={14} />
+                  </button>
+                  <button className="btn-icon" aria-label={isTerminalExpanded ? 'Collapse terminal' : 'Expand terminal'}>
+                    {isTerminalExpanded ? <ChevronDown size={14} /> : <ChevronUp size={14} />}
+                  </button>
+                </div>
+              </div>
+              <div className="terminal-content" id="terminal-content">
+                <div className="terminal-lines">
+                  {terminalLines.length === 0 ? (
+                    <div className="terminal-line terminal-line-info">
+                      Terminal ready. Agent commands will appear here.
+                    </div>
+                  ) : (
+                    terminalLines.map(line => (
+                      <div key={line.id} className={`terminal-line terminal-line-${line.type}`}>
+                        <span className="terminal-line-timestamp">[{line.timestamp}]</span>
+                        {line.content}
+                      </div>
+                    ))
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Input */}
+            <footer className="input-area relative">
+              {input.trim().startsWith('/') && (
+
+                <div className="absolute bottom-full left-4 mb-2 w-48 bg-card border rounded-lg shadow-xl overflow-hidden animate-in slide-in-from-bottom-2 duration-200 z-50">
+                  <div className="p-2 border-b bg-muted/50 text-[10px] font-bold text-muted-foreground uppercase tracking-wider">
+                    Available Commands
+                  </div>
+                  <div className="p-1">
+                    {[
+                      { cmd: '/clear', desc: 'Clear chat & reset' },
+                      { cmd: '/new', desc: 'Start new session' },
+                      { cmd: '/model', desc: 'Select AI model' },
+                    ].map((s) => (
+                      <button
+                        key={s.cmd}
+                        className="w-full flex flex-col items-start px-3 py-1.5 hover:bg-muted rounded-md transition-colors text-left"
+                        onClick={async () => {
+                          if (s.cmd === '/model') {
+                            setIsModelSelectorOpen(true);
+                            setInput('');
+                          } else if (s.cmd === '/clear' || s.cmd === '/new') {
+                            setInput('');
+                            await resetSession();
+                          } else {
+                            setInput(s.cmd);
+                            inputRef.current?.focus();
+                          }
+                        }}
+
+                      >
+                        <span className="text-sm font-mono font-semibold text-primary">{s.cmd}</span>
+                        <span className="text-[10px] text-muted-foreground">{s.desc}</span>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+              <div className="input-wrapper">
+                <div className="flex items-end gap-3.5">
+                  <textarea
+                    ref={inputRef}
+                    className="message-input"
+                    placeholder="Ask anything or type / for commands…"
+                    rows={1}
+                    value={input}
+                    onChange={(e) => setInput(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    disabled={isStreaming}
+                    aria-label="Message input"
+                  />
+                  <button
+                    className="btn-send mb-0.5"
+                    onClick={sendMessage}
+                    disabled={!input.trim() || isStreaming}
+                    aria-label="Send message"
+                  >
+                    <Send size={18} />
+                  </button>
+                </div>
+                <span className="input-hint">Enter to send · Shift+Enter for new line</span>
+              </div>
+            </footer>
+          </div>
+
+          {isPreviewOpen && (
+            <aside className="preview-section">
+              <div className="preview-header">
+                <div className="preview-address-bar">
+                  <Globe size={14} />
+                  <input
+                    type="text"
+                    value={previewUrl}
+                    onChange={(e) => setPreviewUrl(e.target.value)}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        const url = previewUrl;
+                        setPreviewUrl('');
+                        setTimeout(() => setPreviewUrl(url), 10);
+                      }
+                    }}
+                  />
+                  <button
+                    className="btn-icon h-7 w-7"
+                    onClick={() => {
+                      const url = previewUrl;
+                      setPreviewUrl('');
+                      setTimeout(() => setPreviewUrl(url), 10);
+                    }}
+                    title="Reload Preview"
+                  >
+                    <RefreshCw size={12} />
+                  </button>
+                </div>
+                <a
+                  href={previewUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="btn-icon h-8 w-8 text-muted-foreground hover:text-foreground"
+                  title="Open in new tab"
+                >
+                  <ExternalLink size={16} />
+                </a>
+                <button
+                  className="btn-icon h-8 w-8 hover:bg-destructive/10 hover:text-destructive"
+                  onClick={() => setIsPreviewOpen(false)}
+                  title="Close Preview"
+                >
+                  <X size={18} />
+                </button>
+              </div>
+              <div className="preview-content">
+                <iframe
+                  src={previewUrl}
+                  title="App Preview"
+                  sandbox="allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts"
+                />
+              </div>
+            </aside>
+          )}
+        </div>
+      </div>
+
+      {/* File Editor Modal */}
+      {isEditorOpen && (
+        <div
+          className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm animate-in fade-in duration-200"
+          onClick={(e) => { if (e.target === e.currentTarget) setIsEditorOpen(false); }}
+        >
+          <div className="bg-card w-full max-w-4xl h-[80vh] border rounded-xl shadow-2xl flex flex-col overflow-hidden animate-in zoom-in-95 duration-200">
+            {/* Modal Header */}
+            <div className="px-6 py-4 border-b flex items-center justify-between bg-muted/30">
+              <div className="flex items-center gap-3">
+                <FileText className="text-sky-400" size={18} />
+                <div>
+                  <h2 className="text-lg font-semibold leading-none">{editingFile?.name}</h2>
+                  <p className="text-xs text-muted-foreground mt-1">{editingFile?.id}</p>
+                </div>
+              </div>
+              <div className="flex items-center gap-2">
+                <button
+                  className="btn-icon text-muted-foreground hover:bg-destructive/10 hover:text-destructive transition-colors mr-2"
+                  onClick={() => setIsDeleteConfirmOpen(true)}
+                  title="Delete File"
+                >
+                  <Trash2 size={18} />
+                </button>
+                <div className="w-px h-6 bg-border mr-1" />
+                {editorContent !== originalContent && (
+                  <button
+                    className="btn btn-secondary h-9 px-3 animate-in fade-in slide-in-from-right-2 duration-200"
+                    onClick={() => setEditorContent(originalContent)}
+                    disabled={isSaving || isDeleting}
+                  >
+                    <RotateCcw size={14} className="mr-2" />
+                    <span>Revert</span>
+                  </button>
+                )}
+                <button
+                  className="btn btn-primary h-9 px-4"
+                  onClick={saveFile}
+                  disabled={isSaving || isDeleting}
+                >
+                  {isSaving ? <RefreshCw size={14} className="mr-2 animate-spin" /> : <Save size={14} className="mr-2" />}
+                  <span>Save Changes</span>
+                </button>
+                <div className="w-px h-6 bg-border mx-1" />
+                <button
+                  className="btn-icon hover:bg-muted"
+                  onClick={() => setIsEditorOpen(false)}
+                >
+                  <X size={20} />
+                </button>
+              </div>
+            </div>
+
+            {/* Modal Content */}
+            <div className="flex-1 overflow-hidden p-4 bg-zinc-950">
+              <textarea
+                className="w-full h-full bg-transparent text-zinc-300 font-mono text-sm resize-none focus:outline-none scrollbar-thin p-2"
+                spellCheck={false}
+                value={editorContent}
+                onChange={(e) => setEditorContent(e.target.value)}
+                placeholder="File is empty..."
+              />
+            </div>
+
+            {/* Modal Footer */}
+            <div className="px-6 py-3 border-t bg-muted/30 flex justify-between items-center text-xs text-muted-foreground font-mono">
+              <div>
+                {editorContent.length} characters · {editorContent.split('\n').length} lines
+              </div>
+              <div>
+                UTF-8
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Delete Confirmation Modal */}
+      {isDeleteConfirmOpen && (
+        <div
+          className="fixed inset-0 z-[60] flex items-center justify-center bg-background/60 backdrop-blur-md animate-in fade-in duration-200"
+          onClick={(e) => { if (e.target === e.currentTarget) setIsDeleteConfirmOpen(false); }}
+        >
+          <div className="bg-card w-full max-w-sm border rounded-xl shadow-2xl p-6 animate-in zoom-in-95 duration-200">
+            <div className="flex items-center gap-3 mb-4 text-destructive">
+              <div className="p-2 bg-destructive/10 rounded-lg">
+                <AlertTriangle size={20} />
+              </div>
+              <h3 className="text-lg font-semibold">Delete File?</h3>
+            </div>
+            <p className="text-sm text-muted-foreground mb-6 leading-relaxed">
+              Are you sure you want to delete <span className="font-mono text-foreground font-medium">{editingFile?.name}</span>? This action is permanent and cannot be undone.
+            </p>
+            <div className="flex justify-end gap-3">
+              <button
+                className="btn btn-secondary h-9 px-4"
+                onClick={() => setIsDeleteConfirmOpen(false)}
+                disabled={isDeleting}
+              >
+                Cancel
+              </button>
+              <button
+                className="btn bg-destructive text-destructive-foreground hover:bg-destructive/90 h-9 px-4 shadow-sm"
+                onClick={deleteFile}
+                disabled={isDeleting}
+              >
+                {isDeleting ? <RefreshCw size={14} className="mr-2 animate-spin" /> : <Trash2 size={14} className="mr-2" />}
+                Delete Forever
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* New File Modal */}
+      {isNewFileModalOpen && (
+        <div
+          className="fixed inset-0 z-[70] flex items-center justify-center bg-background/60 backdrop-blur-md animate-in fade-in duration-200"
+          onClick={(e) => { if (e.target === e.currentTarget) setIsNewFileModalOpen(false); }}
+        >
+          <div className="bg-card w-full max-w-sm border rounded-xl shadow-2xl p-6 animate-in zoom-in-95 duration-200">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="p-2 bg-primary/10 rounded-lg text-primary">
+                <FilePlus size={20} />
+              </div>
+              <h3 className="text-lg font-semibold text-foreground">Create New File</h3>
+            </div>
+
+            <div className="space-y-6">
+              <div className="space-y-2">
+                <label className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                  Target Directory
+                </label>
+                <div className="grid grid-cols-1 gap-2 max-h-40 overflow-y-auto pr-2 scrollbar-thin">
+                  {getAllFolders(fileElements).map((folder) => (
+                    <button
+                      key={folder.id}
+                      onClick={() => setTargetDirectory(folder.id)}
+                      className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-all ${targetDirectory === folder.id
+                        ? 'bg-primary text-primary-foreground shadow-sm'
+                        : 'bg-muted/30 text-muted-foreground hover:bg-muted hover:text-foreground'
+                        }`}
+                    >
+                      <Folder size={14} className={targetDirectory === folder.id ? 'text-primary-foreground' : 'text-amber-500/70'} />
+                      <span className="truncate">{folder.name}</span>
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div className="space-y-2">
+                <label htmlFor="filename" className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                  File Name
+                </label>
+                <input
+                  id="filename"
+                  autoFocus
+                  type="text"
+                  className="w-full bg-muted/50 border border-border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all font-mono"
+                  placeholder="e.g. index.ts"
+                  value={newFileName}
+                  onChange={(e) => setNewFileName(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && newFileName.trim()) {
+                      const fullPath = targetDirectory ? `${targetDirectory}/${newFileName.trim()}` : newFileName.trim();
+                      setEditingFile({ id: fullPath, name: newFileName.trim() });
+                      setEditorContent('');
+                      setIsEditorOpen(true);
+                      setIsNewFileModalOpen(false);
+                    } else if (e.key === 'Escape') {
+                      setIsNewFileModalOpen(false);
+                    }
+                  }}
+                />
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-3 mt-8">
+              <button
+                className="btn btn-secondary h-10 px-4"
+                onClick={() => setIsNewFileModalOpen(false)}
+              >
+                Cancel
+              </button>
+              <button
+                className="btn btn-primary h-10 px-6"
+                disabled={!newFileName.trim()}
+                onClick={() => {
+                  const fullPath = targetDirectory ? `${targetDirectory}/${newFileName.trim()}` : newFileName.trim();
+                  setEditingFile({ id: fullPath, name: newFileName.trim() });
+                  setEditorContent('');
+                  setIsEditorOpen(true);
+                  setIsNewFileModalOpen(false);
+                }}
+              >
+                Create File
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Model Selector Modal */}
+      {isModelSelectorOpen && (
+        <div
+          className="fixed inset-0 z-[80] flex items-center justify-center bg-background/60 backdrop-blur-md animate-in fade-in duration-200"
+          onClick={(e) => { if (e.target === e.currentTarget) setIsModelSelectorOpen(false); }}
+        >
+          <div className="bg-card w-full max-w-md border rounded-xl shadow-2xl p-6 animate-in zoom-in-95 duration-200">
+            <div className="flex items-center justify-between mb-6">
+              <div className="flex items-center gap-3">
+                <div className="p-2 bg-primary/10 rounded-lg text-primary">
+                  <Bot size={20} />
+                </div>
+                <h3 className="text-lg font-semibold text-foreground">Select AI Model</h3>
+              </div>
+              <button
+                className="btn-icon hover:bg-muted"
+                onClick={() => setIsModelSelectorOpen(false)}
+              >
+                <X size={20} />
+              </button>
+            </div>
+
+            <div className="grid grid-cols-1 gap-2 max-h-[60vh] overflow-y-auto pr-2 scrollbar-thin">
+              {MODELS.map((model) => (
+                <button
+                  key={model.id}
+                  onClick={() => selectModel(model.id)}
+                  className={`flex flex-col gap-1 px-4 py-3 rounded-lg text-left transition-all border ${sessionInfo?.model === model.id
+                    ? 'bg-primary/5 border-primary shadow-sm'
+                    : 'bg-muted/30 border-transparent hover:bg-muted hover:border-border'
+                    }`}
+                >
+                  <div className="flex items-center justify-between">
+                    <span className={`font-medium ${sessionInfo?.model === model.id ? 'text-primary' : 'text-foreground'}`}>
+                      {model.name}
+                    </span>
+                    {sessionInfo?.model === model.id && (
+                      <span className="text-[10px] bg-primary text-primary-foreground px-1.5 py-0.5 rounded-full font-bold uppercase tracking-wider">
+                        Active
+                      </span>
+                    )}
+                  </div>
+                  <span className="text-xs text-muted-foreground leading-relaxed">
+                    {model.description}
+                  </span>
+                </button>
+              ))}
+            </div>
+
+            <div className="mt-6 pt-6 border-t flex justify-center">
+              <p className="text-[10px] text-muted-foreground uppercase tracking-widest font-semibold flex items-center gap-2">
+                <RefreshCw size={10} />
+                Session will be reset on model change
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Context Menu */}
+
+      {contextMenu && (
+        <div
+          className="fixed z-[100] bg-card border rounded-xl shadow-2xl py-1.5 min-w-44 animate-in fade-in zoom-in-95 duration-100"
+          style={{ top: contextMenu.y, left: contextMenu.x }}
+          onClick={(e) => e.stopPropagation()}
+        >
+          <button
+            className="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-foreground hover:bg-primary hover:text-primary-foreground transition-colors text-left"
+            onClick={() => handleAddNewFile(contextMenu.folderId)}
+          >
+            <FilePlus size={15} />
+            <span>Add File here</span>
+          </button>
+          <div className="h-px bg-border my-1 mx-2" />
+          <button
+            className="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-muted-foreground/60 transition-colors text-left cursor-not-allowed"
+            disabled
+          >
+            <Folder size={15} />
+            <span>New Folder (soon)</span>
+          </button>
+        </div>
+      )}
+
+      {/* Settings Modal */}
+      {isSettingsOpen && (
+        <div className="fixed inset-0 z-[150] flex items-center justify-center p-4 bg-background/80 backdrop-blur-sm animate-in fade-in duration-200">
+          <div className="bg-card w-full max-w-md border rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
+            <div className="p-6">
+              <div className="flex items-center gap-3 mb-6">
+                <div className="w-10 h-10 rounded-xl bg-primary/10 text-primary flex items-center justify-center">
+                  <Settings size={22} />
+                </div>
+                <div>
+                  <h2 className="text-xl font-semibold tracking-tight">Settings</h2>
+                  <p className="text-sm text-muted-foreground line-clamp-1">Configure your NextPi workspace</p>
+                </div>
+              </div>
+
+              <div className="space-y-6">
+                <div className="space-y-2.5">
+                  <div className="flex items-center justify-between">
+                    <label className="text-sm font-medium">OpenRouter API Key</label>
+                    {configInfo.hasKey && (
+                      <span className="text-[10px] uppercase tracking-wider font-bold text-emerald-500 bg-emerald-500/10 px-1.5 py-0.5 rounded">Active</span>
+                    )}
+                  </div>
+                  <input
+                    type="password"
+                    className="w-full px-3.5 py-2.5 bg-background border rounded-xl outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all text-sm"
+                    placeholder={configInfo.hasKey ? `Keys ends in ${configInfo.maskedKey?.slice(-4)}` : "sk-or-v1-..."}
+                    value={tempApiKey}
+                    onChange={(e) => setTempApiKey(e.target.value)}
+                  />
+                  <p className="text-[11px] text-muted-foreground leading-relaxed">
+                    Your key is stored locally in <code className="bg-muted px-1 rounded">~/.nextpi/config.json</code>.
+                    It is never shared with anyone except OpenRouter.
+                  </p>
+                </div>
+
+                <div className="flex items-center gap-3 pt-2">
+                  <button
+                    className="flex-1 btn btn-primary py-2.5 justify-center"
+                    onClick={handleSaveConfig}
+                    disabled={!tempApiKey.trim() || isSavingConfig}
+                  >
+                    {isSavingConfig ? 'Saving...' : 'Save Configuration'}
+                  </button>
+                  {configInfo.hasKey && (
+                    <button
+                      className="btn btn-secondary py-2.5 px-4"
+                      onClick={() => {
+                        setIsSettingsOpen(false);
+                        setTempApiKey('');
+                      }}
+                    >
+                      Close
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+
+            <div className="px-6 py-4 bg-muted/50 border-t flex items-center justify-between">
+              <span className="text-[11px] text-muted-foreground">NextPi v0.1.0</span>
+              <a
+                href="https://openrouter.ai/keys"
+                target="_blank"
+                rel="noreferrer"
+                className="text-[11px] text-primary hover:underline flex items-center gap-1"
+              >
+                Get a key <ExternalLink size={10} />
+              </a>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Help Modal */}
+      {isHelpOpen && (
+        <div className="fixed inset-0 z-[150] flex items-center justify-center p-4 bg-background/80 backdrop-blur-sm animate-in fade-in duration-200">
+          <div className="bg-card w-full max-w-lg border rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
+            <div className="p-6">
+              <div className="flex items-center justify-between mb-6">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-xl bg-primary/10 text-primary flex items-center justify-center">
+                    <HelpCircle size={22} />
+                  </div>
+                  <div>
+                    <h2 className="text-xl font-semibold tracking-tight">Quick Guide</h2>
+                    <p className="text-sm text-muted-foreground">Master the NextPi workspace</p>
+                  </div>
+                </div>
+                <button onClick={() => setIsHelpOpen(false)} className="btn-icon">
+                  <X size={20} />
+                </button>
+              </div>
+
+              <div className="space-y-6">
+                {/* Keyboard Shortcuts */}
+                <div className="space-y-3">
+                  <h3 className="text-sm font-bold uppercase tracking-widest text-muted-foreground/50 flex items-center gap-2">
+                    <Command size={14} /> Keyboard Shortcuts
+                  </h3>
+                  <div className="grid grid-cols-2 gap-2">
+                    {[
+                      { key: 'Enter', desc: 'Send Message' },
+                      { key: 'Shift + Enter', desc: 'New Line' },
+                      { key: '/', desc: 'Quick Commands' },
+                      { key: 'Esc', desc: 'Close Modals' },
+                    ].map(s => (
+                      <div key={s.key} className="flex items-center justify-between p-2.5 bg-muted/30 rounded-xl border border-border/50">
+                        <span className="text-xs text-muted-foreground">{s.desc}</span>
+                        <kbd className="px-1.5 py-0.5 bg-background border rounded text-[10px] font-bold shadow-sm">{s.key}</kbd>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Slash Commands */}
+                <div className="space-y-3">
+                  <h3 className="text-sm font-bold uppercase tracking-widest text-muted-foreground/50 flex items-center gap-2">
+                    <Play size={14} /> Core Concepts
+                  </h3>
+                  <div className="space-y-2">
+                    <div className="p-3 bg-primary/[0.03] border border-primary/10 rounded-xl">
+                      <p className="text-xs leading-relaxed text-foreground/80">
+                        <strong>The Agent </strong> is aware of your entire project directory. It can create files, run terminal commands, and research your codebase automatically.
+                      </p>
+                    </div>
+                    <div className="p-3 bg-primary/[0.03] border border-primary/10 rounded-xl">
+                      <p className="text-xs leading-relaxed text-foreground/80">
+                        <strong>Thinking Phase </strong> shows the agent's internal reasoning. Toggle it in the header if you want a cleaner view or need to understand its "logic."
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="mt-8 flex justify-center">
+                <button
+                  className="btn btn-primary px-8 py-2.5 rounded-full"
+                  onClick={() => setIsHelpOpen(false)}
+                >
+                  Got it!
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}