@jvittechs/j 1.0.11

package/dist/web-chat/app.js

@@ -0,0 +1,2012 @@
+/**
+ * Jai1 Web Chat - Main Application
+ * Refined Terminal Aesthetic - Vanilla JS
+ */
+
+(function () {
+    'use strict';
+
+    // ============================================
+    // Constants
+    // ============================================
+    const STORAGE_KEYS = {
+        SESSION: 'wc_session',
+        CONVERSATIONS: 'wc_conversations',
+        SETTINGS: 'wc_settings',
+        THEME: 'wc_theme',
+    };
+
+    const MAX_STORAGE_SIZE = 4.5 * 1024 * 1024;
+    const MAX_CONTEXT_TOKENS = 175000; // 175K token limit
+    const MAX_MENTIONED_FILES = 5; // Maximum files that can be mentioned
+
+    // ============================================
+    // Agent Definitions
+    // ============================================
+    const AGENTS = [
+        {
+            id: 'default',
+            name: 'General Assistant',
+            icon: '⚡',
+            description: 'General purpose AI assistant',
+            systemPrompt: null,
+        },
+        {
+            id: 'architect',
+            name: 'Software Architect',
+            icon: '🏗️',
+            description: 'System design & architecture expert',
+            systemPrompt: `You are a Senior Software Architect specializing in web application architecture for offshore development projects.
+
+## Core Expertise
+- **Architecture Patterns**: Monolithic (primary), MVC, Modular architecture
+- **Backend**: Laravel 12, NestJS 11, CakePHP 5, ExpressJS 5, Hono 4
+- **Frontend**: Next.js 16, Nuxt.js 4 with Tailwind CSS 4
+- **Databases**: MySQL 9, PostgreSQL 18, MSSQL (SQL Server 2022)
+- **Caching**: Redis 8, Valkey 9
+- **Cloud**: AWS (EC2, ALB, S3, SQS, SES, CloudFront), Cloudflare (Workers, D1, R2, KV, Pages)
+
+## Mindset
+- Design for maintainability and scalability within monolithic architecture
+- Consider team size (2-15 members per lab) when proposing solutions
+- Balance between ideal architecture and practical implementation
+- Focus on clear documentation for offshore collaboration
+
+## Best Practices
+- Prefer monolithic architecture unless microservices are truly needed
+- Use modular structure within monolith (Laravel Modules, NestJS modules)
+- Design clear API contracts for frontend-backend separation
+- Plan database schema with proper indexes and relationships
+- Consider caching strategy early (Redis/Valkey)
+
+When designing architecture:
+1. Understand project requirements and team constraints
+2. Choose appropriate tech stack from the standard toolset
+3. Design database schema and API structure
+4. Plan for deployment (AWS/Cloudflare)
+5. Document architecture decisions and rationale`,
+        },
+        {
+            id: 'fullstack',
+            name: 'Fullstack Developer',
+            icon: '🔄',
+            description: 'End-to-end development specialist',
+            systemPrompt: `You are a Senior Fullstack Developer proficient in the JV-IT tech stack.
+
+## Tech Stack
+**Backend**: Laravel 12, NestJS 11, ExpressJS 5, Hono 4
+**Frontend**: Next.js 16, Nuxt.js 4
+**Styling**: Tailwind CSS 4, shadcn/ui + Radix UI, Nuxt UI, Lucide React
+**Database**: MySQL 9, PostgreSQL 18, Redis 8
+**Tools**: Git, Monorepo structure for full-stack Node.js projects
+
+## Mindset
+- Build features end-to-end with cohesive user experience
+- Write clean, maintainable code following framework conventions
+- Consider both developer experience and user experience
+- Think about data flow from UI to database and back
+- Use Day.js or date-fns for date/time handling
+
+## Best Practices
+- Follow MVC pattern consistently
+- Use TypeScript in Node.js projects for type safety
+- Implement proper error handling at every layer
+- Use Tailwind CSS utility classes efficiently
+- Leverage shadcn/ui components for React, Nuxt UI for Vue
+
+When developing features:
+1. Understand requirements completely
+2. Design database schema and API contracts
+3. Implement backend with proper validation
+4. Build frontend with accessible UI components
+5. Add error handling and edge cases
+6. Test across different scenarios`,
+        },
+        {
+            id: 'backend',
+            name: 'Backend Developer',
+            icon: '⚙️',
+            description: 'Server-side & API specialist',
+            systemPrompt: `You are a Senior Backend Developer specializing in Laravel, NestJS, and Node.js.
+
+## Core Expertise
+**PHP**: Laravel 12, CakePHP 5, PSR standards, Composer
+**Node.js**: NestJS 11, ExpressJS 5, Hono 4, TypeScript
+**Databases**: MySQL 9, PostgreSQL 18, MSSQL, Redis 8, Valkey 9
+**Cloud**: AWS (EC2, S3, SQS, SES), Cloudflare Workers, D1, R2
+
+## Mindset
+- Performance-first: optimize queries, use caching (Redis/Valkey)
+- Security-conscious: input validation, SQL injection prevention, XSS
+- Reliability: proper error handling, logging
+- Follow framework conventions strictly
+
+## Laravel Best Practices
+- Use Eloquent relationships and scopes effectively
+- Leverage Form Requests for validation
+- Use Jobs and Queues (SQS) for heavy operations
+- Cache aggressively with Redis
+- Follow PSR-12 coding standards
+
+## Node.js Best Practices
+- Use NestJS modules for clean architecture
+- Leverage decorators and dependency injection
+- Use Hono for edge computing (Cloudflare Workers)
+- TypeScript with strict mode enabled
+
+When developing backend features:
+1. Define API contracts (endpoints, request/response)
+2. Design database schema with proper migrations
+3. Implement business logic with separation of concerns
+4. Add input validation and error handling
+5. Consider caching and queue strategies`,
+        },
+        {
+            id: 'laravel',
+            name: 'Laravel Specialist',
+            icon: '🔴',
+            description: 'Laravel framework expert',
+            systemPrompt: `You are a Laravel Expert with deep knowledge of Laravel 12 and the PHP ecosystem.
+
+## Core Expertise
+- Laravel 12 features and conventions
+- Eloquent ORM: relationships, scopes, accessors/mutators, query optimization
+- Blade templates and components
+- Laravel packages: Sanctum, Horizon, Scout, Telescope
+- Queue system with AWS SQS
+- Testing: PHPUnit, Pest
+
+## Laravel Patterns
+- Repository pattern for data access abstraction
+- Service classes for business logic
+- Form Requests for validation
+- API Resources for response transformation
+- Events, Listeners, and Jobs for async processing
+- Policies and Gates for authorization
+
+## Database
+- MySQL 9 / PostgreSQL 18 optimization
+- Proper migrations and seeders
+- Query optimization with eager loading
+- Redis 8 / Valkey 9 for caching and sessions
+
+## Best Practices
+- Follow "The Laravel Way" - use built-in features first
+- Keep controllers thin, models focused
+- Use strict typing and return types (PHP 8.3+)
+- Follow PSR-12 coding standards
+- Cache routes, config, views in production
+- Use environment-based configuration
+
+When building Laravel features:
+1. Plan database schema with migrations
+2. Create Models with relationships and scopes
+3. Add Form Requests for validation
+4. Implement business logic in Service classes
+5. Build Controllers that orchestrate the flow
+6. Write Feature and Unit tests`,
+        },
+        {
+            id: 'frontend',
+            name: 'Frontend Developer',
+            icon: '🎨',
+            description: 'UI/UX & frontend specialist',
+            systemPrompt: `You are a Senior Frontend Developer specializing in Next.js and Nuxt.js.
+
+## Core Expertise
+**React**: Next.js 16, shadcn/ui, Radix UI, Lucide React
+**Vue**: Nuxt.js 4, Nuxt UI
+**Styling**: Tailwind CSS 4 (utility-first approach)
+**State**: React Query, SWR, Pinia (Vue)
+**Date/Time**: Day.js, date-fns
+
+## Mindset
+- User-centric: prioritize usability and accessibility
+- Performance: Core Web Vitals, lazy loading, image optimization
+- Component-driven: reusable, composable UI components
+- Use Tailwind CSS utility classes efficiently
+
+## Component Libraries
+- **React projects**: shadcn/ui + Radix UI (accessible, customizable)
+- **Vue projects**: Nuxt UI (native Nuxt integration)
+- **Icons**: Lucide React for React, Lucide Vue for Vue
+
+## Best Practices
+- Follow accessibility standards (WCAG 2.1 AA)
+- Implement responsive design (mobile-first with Tailwind)
+- Use semantic HTML elements
+- Handle loading, error, and empty states properly
+- Optimize images with Next.js Image or Nuxt Image
+
+## Tailwind CSS Tips
+- Use design tokens from tailwind.config
+- Leverage @apply sparingly, prefer utility classes
+- Use dark mode with class strategy
+- Group related utilities logically
+
+When building UI:
+1. Break down into reusable components
+2. Use appropriate component library (shadcn or Nuxt UI)
+3. Implement with accessibility in mind
+4. Add proper loading and error states
+5. Ensure responsive design with Tailwind`,
+        },
+        {
+            id: 'devops',
+            name: 'DevOps Engineer',
+            icon: '🚀',
+            description: 'CI/CD & infrastructure specialist',
+            systemPrompt: `You are a DevOps Engineer with expertise in AWS and Cloudflare infrastructure.
+
+## AWS Stack
+- **Compute**: EC2 with Auto Scaling, Bastion Host for secure access
+- **Load Balancing**: ALB (Application Load Balancer)
+- **Storage**: S3 for files and assets
+- **Messaging**: SQS for queues, SES for emails
+- **CDN**: CloudFront for content delivery
+- **Monitoring**: CloudWatch for logs and metrics
+- **API**: API Gateway for managed APIs
+
+## Cloudflare Stack
+- **Edge Computing**: Cloudflare Workers (JavaScript/TypeScript)
+- **Database**: D1 (serverless SQLite)
+- **Storage**: R2 (S3-compatible, zero egress)
+- **Cache**: KV for low-latency data
+- **Hosting**: Cloudflare Pages for static sites
+
+## Mindset
+- Automate deployment processes (CI/CD improvement area)
+- Infrastructure as Code when possible
+- Security: proper IAM roles, security groups
+- Cost optimization: right-sizing instances, reserved capacity
+- Monitoring and alerting for production issues
+
+## Deployment Patterns
+- EC2 with ALB for traditional apps
+- Cloudflare Workers for edge computing
+- S3/R2 + CloudFront/CDN for static assets
+- SQS for async job processing
+
+## Best Practices
+- Use Bastion Host for secure SSH access
+- Configure proper security groups
+- Set up CloudWatch alarms for critical metrics
+- Use environment variables for configuration
+- Document deployment procedures
+
+When designing infrastructure:
+1. Understand workload requirements
+2. Choose AWS vs Cloudflare based on use case
+3. Design for high availability
+4. Set up monitoring and alerting
+5. Document runbooks for operations`,
+        },
+        {
+            id: 'reviewer',
+            name: 'Code Reviewer',
+            icon: '🔍',
+            description: 'Code quality & best practices expert',
+            systemPrompt: `You are a Senior Code Reviewer focused on code quality and best practices.
+
+## Review Focus
+**Code Quality**: Readability, maintainability, framework conventions
+**Security**: OWASP Top 10, input validation, SQL injection, XSS
+**Performance**: Query optimization, N+1 problems, caching
+**Testing**: Coverage gaps, test quality (improvement area)
+
+## Framework-Specific Checks
+
+### Laravel
+- Eloquent N+1 queries (use eager loading)
+- Mass assignment protection
+- Form Request validation
+- Proper use of middleware
+- PSR-12 compliance
+
+### NestJS/Node.js
+- TypeScript strict mode compliance
+- Proper dependency injection
+- Error handling middleware
+- Input validation with class-validator
+
+### Frontend (Next.js/Nuxt.js)
+- Component accessibility
+- Proper use of Tailwind utilities
+- Image optimization
+- Client vs server rendering decisions
+
+## Mindset
+- Constructive feedback with specific suggestions
+- Explain the "why" behind each suggestion
+- Prioritize: security > correctness > performance > style
+- Consider team context and constraints
+- Acknowledge good practices too
+
+## Common Issues
+- SQL injection in raw queries
+- Missing input validation
+- N+1 query problems in Eloquent/ORM
+- Hardcoded credentials or secrets
+- Missing error handling
+- Inconsistent coding style
+
+When reviewing code:
+1. Check for security vulnerabilities first
+2. Verify correctness and edge cases
+3. Evaluate framework convention compliance
+4. Suggest specific improvements with examples
+5. Note areas that need test coverage`,
+        },
+    ];
+
+    // ============================================
+    // State
+    // ============================================
+    let state = {
+        session: null,
+        models: [],
+        selectedModel: '',
+        selectedAgent: 'default',
+        conversations: [],
+        currentConversationId: null,
+        isStreaming: false,
+        modelStats: null, // { date, models: { [modelId]: { limit, used, remaining } } }
+        // File mention state
+        mentionedFiles: [], // Array of { path, name, size, language }
+        fileSearchResults: [], // Autocomplete results
+        isFileSearching: false, // Autocomplete loading state
+        fileServiceInfo: null, // { workingDir, maxFiles }
+    };
+
+    // ============================================
+    // Token Estimation Helper
+    // ============================================
+    function estimateTokens(text) {
+        if (!text) return 0;
+        // Rough estimation: ~4 characters per token for English
+        // This is a simple heuristic, actual tokenization varies by model
+        return Math.ceil(text.length / 4);
+    }
+
+    function getConversationTokens(conversation) {
+        if (!conversation || !conversation.messages) return 0;
+        let totalTokens = 0;
+        conversation.messages.forEach((msg) => {
+            totalTokens += estimateTokens(msg.content);
+        });
+        return totalTokens;
+    }
+
+    function formatTokenCount(tokens) {
+        // Always show in K format, minimum 1K
+        if (tokens < 1000) {
+            return '< 1K';
+        }
+        return (tokens / 1000).toFixed(1) + 'K';
+    };
+
+    // ============================================
+    // DOM Elements
+    // ============================================
+    const elements = {
+        modelSelect: document.getElementById('model-select'),
+        connectionStatus: document.getElementById('connection-status'),
+        newChatBtn: document.getElementById('new-chat-btn'),
+        conversationsList: document.getElementById('conversations-list'),
+        messages: document.getElementById('messages'),
+        welcomeMessage: document.getElementById('welcome-message'),
+        messageInput: document.getElementById('message-input'),
+        sendBtn: document.getElementById('send-btn'),
+        charCount: document.getElementById('char-count'),
+        errorModal: document.getElementById('error-modal'),
+        errorTitle: document.getElementById('error-title'),
+        errorMessage: document.getElementById('error-message'),
+        errorCloseBtn: document.getElementById('error-close-btn'),
+        loadingOverlay: document.getElementById('loading-overlay'),
+        // Stats panel elements
+        sidebarRight: document.getElementById('sidebar-right'),
+        toggleRightSidebarBtn: document.getElementById('toggle-right-sidebar-btn'),
+        statsList: document.getElementById('stats-list'),
+        statsDate: document.getElementById('stats-date'),
+        refreshStatsBtn: document.getElementById('refresh-stats-btn'),
+        promptsList: document.getElementById('prompts-list'),
+        // Theme toggle
+        themeToggleBtn: document.getElementById('theme-toggle-btn'),
+        // Agent selector
+        agentSelect: document.getElementById('agent-select'),
+    };
+
+    // ============================================
+    // Storage Utilities
+    // ============================================
+    const Storage = {
+        get(key) {
+            try {
+                const item = localStorage.getItem(key);
+                return item ? JSON.parse(item) : null;
+            } catch (e) {
+                console.error('Storage get error:', e);
+                return null;
+            }
+        },
+
+        set(key, value) {
+            try {
+                localStorage.setItem(key, JSON.stringify(value));
+                return true;
+            } catch (e) {
+                if (e.name === 'QuotaExceededError') {
+                    this.cleanup();
+                    try {
+                        localStorage.setItem(key, JSON.stringify(value));
+                        return true;
+                    } catch (e2) {
+                        console.error('Storage still full after cleanup:', e2);
+                        return false;
+                    }
+                }
+                console.error('Storage set error:', e);
+                return false;
+            }
+        },
+
+        remove(key) {
+            try {
+                localStorage.removeItem(key);
+            } catch (e) {
+                console.error('Storage remove error:', e);
+            }
+        },
+
+        cleanup() {
+            const conversations = this.get(STORAGE_KEYS.CONVERSATIONS) || [];
+            while (conversations.length > 1 && this.getSize() > MAX_STORAGE_SIZE) {
+                conversations.shift();
+                this.set(STORAGE_KEYS.CONVERSATIONS, conversations);
+            }
+        },
+
+        getSize() {
+            let total = 0;
+            for (const key in localStorage) {
+                if (localStorage.hasOwnProperty(key)) {
+                    total += localStorage[key].length * 2;
+                }
+            }
+            return total;
+        },
+    };
+
+    // ============================================
+    // Theme Manager
+    // ============================================
+    const Theme = {
+        DARK: 'dark',
+        LIGHT: 'light',
+
+        init() {
+            // Check saved preference, then system preference
+            const saved = Storage.get(STORAGE_KEYS.THEME);
+            if (saved) {
+                this.set(saved);
+            } else {
+                // Check system preference
+                const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                this.set(prefersDark ? this.DARK : this.LIGHT);
+            }
+
+            // Listen for system theme changes
+            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
+                if (!Storage.get(STORAGE_KEYS.THEME)) {
+                    this.set(e.matches ? this.DARK : this.LIGHT);
+                }
+            });
+        },
+
+        get() {
+            return document.documentElement.getAttribute('data-theme') || this.DARK;
+        },
+
+        set(theme) {
+            document.documentElement.setAttribute('data-theme', theme);
+            Storage.set(STORAGE_KEYS.THEME, theme);
+        },
+
+        toggle() {
+            const current = this.get();
+            this.set(current === this.DARK ? this.LIGHT : this.DARK);
+        },
+    };
+
+    // ============================================
+    // API Client
+    // ============================================
+    const API = {
+        getSessionToken() {
+            const urlParams = new URLSearchParams(window.location.search);
+            const urlToken = urlParams.get('session');
+            if (urlToken) {
+                return urlToken;
+            }
+            const session = Storage.get(STORAGE_KEYS.SESSION);
+            return session?.token || null;
+        },
+
+        async request(endpoint, options = {}) {
+            const token = this.getSessionToken();
+            const headers = {
+                'Content-Type': 'application/json',
+                ...(token && { 'X-Session-Token': token }),
+                ...options.headers,
+            };
+
+            const response = await fetch(endpoint, {
+                ...options,
+                headers,
+            });
+
+            if (!response.ok) {
+                const error = await response.json().catch(() => ({}));
+                throw new APIError(
+                    error.error?.message || response.statusText,
+                    error.error?.code || `HTTP_${response.status}`,
+                    response.status
+                );
+            }
+
+            return response;
+        },
+
+        async getSession() {
+            const response = await this.request('/api/session');
+            return response.json();
+        },
+
+        async getModels() {
+            const response = await this.request('/api/models');
+            return response.json();
+        },
+
+        async getStats() {
+            const response = await this.request('/api/stats');
+            return response.json();
+        },
+
+        async *streamChat(message, model, history = [], systemPrompt = null) {
+            const response = await this.request('/api/chat', {
+                method: 'POST',
+                body: JSON.stringify({ message, model, history, systemPrompt }),
+            });
+
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
+
+            try {
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) break;
+
+                    // Append new chunk to buffer
+                    buffer += decoder.decode(value, { stream: true });
+
+                    // Process only complete lines (ending with \n)
+                    const lines = buffer.split('\n');
+                    // Keep the last incomplete line in buffer
+                    buffer = lines.pop() || '';
+
+                    for (const line of lines) {
+                        const trimmedLine = line.trim();
+                        if (!trimmedLine) continue;
+
+                        if (trimmedLine.startsWith('data: ')) {
+                            const data = trimmedLine.slice(6);
+                            try {
+                                yield JSON.parse(data);
+                            } catch (e) {
+                                // Skip malformed data
+                            }
+                        }
+                    }
+                }
+
+                // Process any remaining content in buffer
+                if (buffer.trim()) {
+                    const trimmedLine = buffer.trim();
+                    if (trimmedLine.startsWith('data: ')) {
+                        const data = trimmedLine.slice(6);
+                        try {
+                            yield JSON.parse(data);
+                        } catch (e) {
+                            // Skip malformed data
+                        }
+                    }
+                }
+            } finally {
+                reader.releaseLock();
+            }
+        },
+
+        // === File API Methods ===
+
+        async getFileServiceInfo() {
+            const response = await this.request('/api/files/info');
+            return response.json();
+        },
+
+        async searchFiles(query, limit = 10) {
+            const response = await this.request(`/api/files/search?q=${encodeURIComponent(query)}&limit=${limit}`);
+            return response.json();
+        },
+
+        async readFile(filePath) {
+            const response = await this.request(`/api/files/read?path=${encodeURIComponent(filePath)}`);
+            return response.json();
+        },
+
+        async readFiles(paths) {
+            const response = await this.request('/api/files/batch', {
+                method: 'POST',
+                body: JSON.stringify({ paths }),
+            });
+            return response.json();
+        },
+    };
+
+    class APIError extends Error {
+        constructor(message, code, status) {
+            super(message);
+            this.code = code;
+            this.status = status;
+        }
+    }
+
+    // ============================================
+    // Conversation Management
+    // ============================================
+    const Conversations = {
+        load() {
+            state.conversations = Storage.get(STORAGE_KEYS.CONVERSATIONS) || [];
+        },
+
+        save() {
+            Storage.set(STORAGE_KEYS.CONVERSATIONS, state.conversations);
+        },
+
+        create() {
+            const id = 'conv_' + Date.now();
+            const conversation = {
+                id,
+                title: 'New Thread',
+                model: state.selectedModel,
+                agent: state.selectedAgent,
+                createdAt: new Date().toISOString(),
+                messages: [],
+            };
+            state.conversations.unshift(conversation);
+            state.currentConversationId = id;
+            this.save();
+            return conversation;
+        },
+
+        getCurrent() {
+            return state.conversations.find((c) => c.id === state.currentConversationId);
+        },
+
+        addMessage(role, content) {
+            const conversation = this.getCurrent();
+            if (!conversation) return;
+
+            conversation.messages.push({
+                role,
+                content,
+                timestamp: new Date().toISOString(),
+            });
+
+            if (role === 'user' && conversation.messages.length === 1) {
+                conversation.title = content.slice(0, 40) + (content.length > 40 ? '...' : '');
+            }
+
+            this.save();
+        },
+
+        updateLastAssistantMessage(content) {
+            const conversation = this.getCurrent();
+            if (!conversation) return;
+
+            const lastMsg = conversation.messages[conversation.messages.length - 1];
+            if (lastMsg && lastMsg.role === 'assistant') {
+                lastMsg.content = content;
+                this.save();
+            }
+        },
+
+        delete(id) {
+            const index = state.conversations.findIndex((c) => c.id === id);
+            if (index !== -1) {
+                state.conversations.splice(index, 1);
+                if (state.currentConversationId === id) {
+                    state.currentConversationId = state.conversations[0]?.id || null;
+                }
+                this.save();
+            }
+        },
+
+        switchTo(id) {
+            state.currentConversationId = id;
+            const conversation = this.getCurrent();
+            if (conversation) {
+                if (conversation.model) {
+                    state.selectedModel = conversation.model;
+                    elements.modelSelect.value = conversation.model;
+                }
+                if (conversation.agent) {
+                    state.selectedAgent = conversation.agent;
+                    if (elements.agentSelect) {
+                        elements.agentSelect.value = conversation.agent;
+                    }
+                }
+            }
+        },
+    };
+
+    // ============================================
+    // File Mention System
+    // ============================================
+    const FileMention = {
+        autocompleteEl: null,
+        debounceTimer: null,
+        selectedIndex: -1,
+        mentionStartPos: -1,
+        lastQuery: '',
+
+        init() {
+            // Create autocomplete dropdown
+            this.createAutocompleteElement();
+            // Create mentioned files container
+            this.createMentionedFilesContainer();
+            // Load file service info
+            this.loadFileServiceInfo();
+        },
+
+        createAutocompleteElement() {
+            this.autocompleteEl = document.createElement('div');
+            this.autocompleteEl.className = 'file-autocomplete hidden';
+            this.autocompleteEl.innerHTML = `
+                <div class="file-autocomplete-header">
+                    <span class="autocomplete-icon">📁</span>
+                    <span class="autocomplete-title">Files</span>
+                    <span class="autocomplete-hint">↑↓ to navigate, Enter to select, Esc to close</span>
+                </div>
+                <div class="file-autocomplete-list"></div>
+            `;
+            // Insert before input container
+            const inputArea = document.querySelector('.input-area');
+            if (inputArea) {
+                inputArea.insertBefore(this.autocompleteEl, inputArea.querySelector('.input-container'));
+            }
+        },
+
+        createMentionedFilesContainer() {
+            const container = document.createElement('div');
+            container.id = 'mentioned-files';
+            container.className = 'mentioned-files hidden';
+            // Insert before input selectors
+            const inputArea = document.querySelector('.input-area');
+            const selectors = inputArea?.querySelector('.input-selectors');
+            if (inputArea && selectors) {
+                inputArea.insertBefore(container, selectors);
+            }
+        },
+
+        async loadFileServiceInfo() {
+            try {
+                const response = await API.getFileServiceInfo();
+                if (response.success && response.data) {
+                    state.fileServiceInfo = response.data;
+                }
+            } catch (error) {
+                console.error('Failed to load file service info:', error);
+            }
+        },
+
+        // Detect @ mention in textarea
+        detectMention(textarea) {
+            const text = textarea.value;
+            const cursorPos = textarea.selectionStart;
+
+            // Find @ before cursor
+            let atPos = -1;
+            for (let i = cursorPos - 1; i >= 0; i--) {
+                const char = text[i];
+                if (char === '@') {
+                    atPos = i;
+                    break;
+                }
+                // Stop at whitespace or newline (not a mention)
+                if (char === ' ' || char === '\n' || char === '\t') {
+                    break;
+                }
+            }
+
+            if (atPos === -1) {
+                this.hideAutocomplete();
+                return null;
+            }
+
+            // Extract query after @
+            const query = text.substring(atPos + 1, cursorPos);
+            this.mentionStartPos = atPos;
+            return query;
+        },
+
+        async handleInput(textarea) {
+            const query = this.detectMention(textarea);
+
+            if (query === null) {
+                return;
+            }
+
+            // Debounce search
+            clearTimeout(this.debounceTimer);
+            this.debounceTimer = setTimeout(async () => {
+                if (query.length >= 1) {
+                    await this.searchFiles(query);
+                } else {
+                    this.hideAutocomplete();
+                }
+            }, 150);
+        },
+
+        async searchFiles(query) {
+            if (query === this.lastQuery) return;
+            this.lastQuery = query;
+
+            state.isFileSearching = true;
+            this.selectedIndex = 0; // Reset selection for new search
+            this.showAutocomplete();
+            this.renderLoading();
+
+            try {
+                const response = await API.searchFiles(query, 10);
+                if (response.success && response.data) {
+                    state.fileSearchResults = response.data.files || [];
+                    this.selectedIndex = state.fileSearchResults.length > 0 ? 0 : -1;
+                    this.renderResults();
+                }
+            } catch (error) {
+                console.error('File search error:', error);
+                this.renderError('Failed to search files');
+            } finally {
+                state.isFileSearching = false;
+            }
+        },
+
+        showAutocomplete() {
+            if (this.autocompleteEl) {
+                this.autocompleteEl.classList.remove('hidden');
+            }
+        },
+
+        hideAutocomplete() {
+            if (this.autocompleteEl) {
+                this.autocompleteEl.classList.add('hidden');
+            }
+            this.selectedIndex = -1;
+            this.mentionStartPos = -1;
+            this.lastQuery = '';
+            state.fileSearchResults = [];
+        },
+
+        renderLoading() {
+            const list = this.autocompleteEl?.querySelector('.file-autocomplete-list');
+            if (list) {
+                list.innerHTML = `
+                    <div class="file-autocomplete-loading">
+                        <span class="loading-spinner">◌</span>
+                        <span>Searching files...</span>
+                    </div>
+                `;
+            }
+        },
+
+        renderError(message) {
+            const list = this.autocompleteEl?.querySelector('.file-autocomplete-list');
+            if (list) {
+                list.innerHTML = `
+                    <div class="file-autocomplete-error">
+                        <span>⚠</span>
+                        <span>${escapeHtml(message)}</span>
+                    </div>
+                `;
+            }
+        },
+
+        renderResults() {
+            const list = this.autocompleteEl?.querySelector('.file-autocomplete-list');
+            if (!list) return;
+
+            if (state.fileSearchResults.length === 0) {
+                list.innerHTML = `
+                    <div class="file-autocomplete-empty">
+                        <span>No files found</span>
+                    </div>
+                `;
+                return;
+            }
+
+            list.innerHTML = '';
+            state.fileSearchResults.forEach((file, index) => {
+                const item = document.createElement('div');
+                item.className = 'file-autocomplete-item' + (index === this.selectedIndex ? ' selected' : '');
+                item.dataset.index = index;
+                item.innerHTML = `
+                    <span class="file-icon">${this.getFileIcon(file.extension)}</span>
+                    <span class="file-path">${escapeHtml(file.path)}</span>
+                    <span class="file-size">${this.formatFileSize(file.size)}</span>
+                `;
+                item.addEventListener('click', () => this.selectFile(index));
+                item.addEventListener('mouseenter', () => {
+                    this.selectedIndex = index;
+                    this.updateSelection();
+                });
+                list.appendChild(item);
+            });
+        },
+
+        getFileIcon(extension) {
+            const iconMap = {
+                'ts': '📘', 'tsx': '📘', 'js': '📙', 'jsx': '📙',
+                'vue': '💚', 'php': '🐘', 'py': '🐍',
+                'json': '📋', 'md': '📝', 'css': '🎨', 'scss': '🎨',
+                'html': '🌐', 'sql': '🗄️', 'sh': '⚙️',
+            };
+            return iconMap[extension] || '📄';
+        },
+
+        formatFileSize(bytes) {
+            if (bytes < 1024) return bytes + 'B';
+            if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + 'KB';
+            return (bytes / (1024 * 1024)).toFixed(1) + 'MB';
+        },
+
+        updateSelection() {
+            const items = this.autocompleteEl?.querySelectorAll('.file-autocomplete-item');
+            items?.forEach((item, index) => {
+                item.classList.toggle('selected', index === this.selectedIndex);
+            });
+        },
+
+        handleKeydown(e, textarea) {
+            if (this.autocompleteEl?.classList.contains('hidden')) {
+                return false;
+            }
+
+            // No results to navigate
+            if (state.fileSearchResults.length === 0) {
+                if (e.key === 'Escape') {
+                    e.preventDefault();
+                    this.hideAutocomplete();
+                    return true;
+                }
+                return false;
+            }
+
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    if (this.selectedIndex < 0) {
+                        this.selectedIndex = 0;
+                    } else {
+                        this.selectedIndex = Math.min(this.selectedIndex + 1, state.fileSearchResults.length - 1);
+                    }
+                    this.updateSelection();
+                    this.scrollToSelected();
+                    return true;
+
+                case 'ArrowUp':
+                    e.preventDefault();
+                    if (this.selectedIndex < 0) {
+                        this.selectedIndex = state.fileSearchResults.length - 1;
+                    } else if (this.selectedIndex > 0) {
+                        this.selectedIndex--;
+                    }
+                    this.updateSelection();
+                    this.scrollToSelected();
+                    return true;
+
+                case 'Enter':
+                    if (this.selectedIndex >= 0) {
+                        e.preventDefault();
+                        this.selectFile(this.selectedIndex, textarea);
+                        return true;
+                    } else if (state.fileSearchResults.length > 0) {
+                        // Select first item if none selected
+                        e.preventDefault();
+                        this.selectFile(0, textarea);
+                        return true;
+                    }
+                    break;
+
+                case 'Escape':
+                    e.preventDefault();
+                    this.hideAutocomplete();
+                    return true;
+
+                case 'Tab':
+                    if (state.fileSearchResults.length > 0) {
+                        e.preventDefault();
+                        this.selectFile(Math.max(this.selectedIndex, 0), textarea);
+                        return true;
+                    }
+                    break;
+            }
+
+            return false;
+        },
+
+        scrollToSelected() {
+            const list = this.autocompleteEl?.querySelector('.file-autocomplete-list');
+            const selectedItem = list?.querySelector('.file-autocomplete-item.selected');
+            if (selectedItem && list) {
+                selectedItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
+        },
+
+        selectFile(index, textarea = elements.messageInput) {
+            const file = state.fileSearchResults[index];
+            if (!file) return;
+
+            // Check if already mentioned
+            if (state.mentionedFiles.some(f => f.path === file.path)) {
+                this.hideAutocomplete();
+                // Remove the @query from textarea
+                this.removeMentionText(textarea);
+                return;
+            }
+
+            // Check max files limit
+            if (state.mentionedFiles.length >= MAX_MENTIONED_FILES) {
+                alert(`Maximum ${MAX_MENTIONED_FILES} files can be mentioned per message`);
+                this.hideAutocomplete();
+                return;
+            }
+
+            // Add to mentioned files
+            state.mentionedFiles.push(file);
+            this.renderMentionedFiles();
+
+            // Remove @query from textarea
+            this.removeMentionText(textarea);
+
+            this.hideAutocomplete();
+            textarea.focus();
+        },
+
+        removeMentionText(textarea) {
+            if (this.mentionStartPos >= 0) {
+                const text = textarea.value;
+                const cursorPos = textarea.selectionStart;
+                const newText = text.substring(0, this.mentionStartPos) + text.substring(cursorPos);
+                textarea.value = newText;
+                textarea.selectionStart = textarea.selectionEnd = this.mentionStartPos;
+                // Trigger input event
+                textarea.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+        },
+
+        renderMentionedFiles() {
+            const container = document.getElementById('mentioned-files');
+            if (!container) return;
+
+            if (state.mentionedFiles.length === 0) {
+                container.classList.add('hidden');
+                container.innerHTML = '';
+                return;
+            }
+
+            container.classList.remove('hidden');
+            container.innerHTML = `
+                <div class="mentioned-files-header">
+                    <span class="mentioned-icon">📎</span>
+                    <span class="mentioned-title">Attached Files (${state.mentionedFiles.length}/${MAX_MENTIONED_FILES})</span>
+                </div>
+                <div class="mentioned-files-list">
+                    ${state.mentionedFiles.map((file, index) => `
+                        <div class="mentioned-file-badge" data-index="${index}">
+                            <span class="badge-icon">${this.getFileIcon(file.extension)}</span>
+                            <span class="badge-path">${escapeHtml(file.path)}</span>
+                            <button class="badge-remove" title="Remove file">×</button>
+                        </div>
+                    `).join('')}
+                </div>
+            `;
+
+            // Add remove handlers
+            container.querySelectorAll('.badge-remove').forEach(btn => {
+                btn.addEventListener('click', (e) => {
+                    const index = parseInt(e.target.closest('.mentioned-file-badge').dataset.index);
+                    this.removeFile(index);
+                });
+            });
+        },
+
+        removeFile(index) {
+            state.mentionedFiles.splice(index, 1);
+            this.renderMentionedFiles();
+        },
+
+        clearFiles() {
+            state.mentionedFiles = [];
+            this.renderMentionedFiles();
+        },
+
+        // Get file contents for mentioned files
+        async getFileContents() {
+            if (state.mentionedFiles.length === 0) {
+                return [];
+            }
+
+            const paths = state.mentionedFiles.map(f => f.path);
+            try {
+                const response = await API.readFiles(paths);
+                if (response.success && response.data) {
+                    return response.data.files || [];
+                }
+            } catch (error) {
+                console.error('Failed to read files:', error);
+            }
+            return [];
+        },
+
+        // Format file context for LLM
+        formatFileContext(files) {
+            if (!files || files.length === 0) return '';
+
+            let context = '\n\n[Attached Files]\n\n';
+            files.forEach(file => {
+                if (file.error) {
+                    context += `--- ${file.path} ---\n[Error: ${file.error}]\n\n`;
+                } else {
+                    context += `--- ${file.path} ---\n\`\`\`${file.language || 'text'}\n${file.content}\n\`\`\`\n\n`;
+                }
+            });
+            return context;
+        },
+    };
+
+    // ============================================
+    // UI Rendering
+    // ============================================
+    const UI = {
+        renderConversationsList() {
+            elements.conversationsList.innerHTML = '';
+
+            if (state.conversations.length === 0) {
+                elements.conversationsList.innerHTML = `
+                    <div style="padding: 16px; color: var(--color-text-dim); text-align: center; font-size: 12px; font-family: var(--font-mono);">
+                        No threads yet
+                    </div>
+                `;
+                return;
+            }
+
+            state.conversations.forEach((conv) => {
+                const tokens = getConversationTokens(conv);
+                const tokenClass = tokens > MAX_CONTEXT_TOKENS ? 'token-exceeded' : (tokens > MAX_CONTEXT_TOKENS * 0.8 ? 'token-warning' : '');
+                const item = document.createElement('div');
+                item.className = 'conversation-item' + (conv.id === state.currentConversationId ? ' active' : '');
+                item.innerHTML = `
+                    <div class="conversation-info">
+                        <span class="title">${escapeHtml(conv.title)}</span>
+                        <span class="token-count ${tokenClass}" title="Estimated tokens">${formatTokenCount(tokens)}</span>
+                    </div>
+                    <button class="delete-btn" title="Delete thread">×</button>
+                `;
+
+                item.querySelector('.conversation-info').addEventListener('click', () => {
+                    Conversations.switchTo(conv.id);
+                    this.renderConversationsList();
+                    this.renderMessages();
+                });
+
+                item.querySelector('.delete-btn').addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    if (confirm('Delete this thread?')) {
+                        Conversations.delete(conv.id);
+                        this.renderConversationsList();
+                        this.renderMessages();
+                    }
+                });
+
+                elements.conversationsList.appendChild(item);
+            });
+        },
+
+        renderMessages() {
+            const conversation = Conversations.getCurrent();
+
+            if (!conversation || conversation.messages.length === 0) {
+                elements.welcomeMessage.classList.remove('hidden');
+                const children = Array.from(elements.messages.children);
+                children.forEach((child) => {
+                    if (child !== elements.welcomeMessage) {
+                        child.remove();
+                    }
+                });
+                return;
+            }
+
+            elements.welcomeMessage.classList.add('hidden');
+            elements.messages.innerHTML = '';
+
+            conversation.messages.forEach((msg) => {
+                this.appendMessage(msg.role, msg.content, msg.timestamp);
+            });
+
+            this.scrollToBottom();
+        },
+
+        appendMessage(role, content, timestamp = null, isLoading = false) {
+            elements.welcomeMessage.classList.add('hidden');
+
+            const time = timestamp
+                ? new Date(timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+                : new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+            const avatar = role === 'user' ? '◉' : '⚡';
+            const roleName = role === 'user' ? 'you' : 'jai1';
+
+            const msgEl = document.createElement('div');
+            msgEl.className = `message ${role}`;
+
+            msgEl.innerHTML = `
+                <div class="message-avatar">${avatar}</div>
+                <div class="message-content">
+                    <div class="message-header">
+                        <span class="message-role">${roleName}</span>
+                        <div class="message-meta">
+                             <button class="message-copy-btn" title="Copy raw message" aria-label="Copy raw message">
+                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                                </svg>
+                             </button>
+                             <span class="message-time">${time}</span>
+                        </div>
+                    </div>
+                    <div class="message-body"></div>
+                </div>
+            `;
+
+            // Add content to message body (after DOM is created)
+            const bodyEl = msgEl.querySelector('.message-body');
+            if (isLoading) {
+                bodyEl.innerHTML = '<div class="loading-message"><span class="loading-dot"></span><span class="loading-dot"></span><span class="loading-dot"></span></div>';
+            } else {
+                // Create zero-md element programmatically
+                const zeroMd = this.createZeroMdElement(content);
+                bodyEl.appendChild(zeroMd);
+            }
+
+            // Attach event listener for copy button
+            const copyBtn = msgEl.querySelector('.message-copy-btn');
+            if (copyBtn) {
+                copyBtn.addEventListener('click', async () => {
+                     try {
+                        await navigator.clipboard.writeText(content);
+                        copyBtn.classList.add('copied');
+                        setTimeout(() => copyBtn.classList.remove('copied'), 2000);
+                     } catch (err) {
+                        console.error('Failed to copy', err);
+                     }
+                });
+            }
+
+            elements.messages.appendChild(msgEl);
+            this.postProcessMessage(msgEl);
+            this.scrollToBottom();
+
+            return msgEl;
+        },
+
+        updateStreamingMessage(msgEl, content, isComplete = false) {
+            const bodyEl = msgEl.querySelector('.message-body');
+            if (bodyEl) {
+                // Clear and recreate zero-md element
+                bodyEl.innerHTML = '';
+                const zeroMd = this.createZeroMdElement(content);
+                bodyEl.appendChild(zeroMd);
+
+                if (!isComplete) {
+                    const cursor = document.createElement('span');
+                    cursor.className = 'streaming-cursor';
+                    bodyEl.appendChild(cursor);
+                } else {
+                    this.postProcessMessage(msgEl);
+                }
+                this.scrollToBottom();
+            }
+        },
+
+        showError(msgEl, errorMessage) {
+            const bodyEl = msgEl.querySelector('.message-body');
+            if (bodyEl) {
+                bodyEl.innerHTML += `<div class="message-error">⚠ ${escapeHtml(errorMessage)}</div>`;
+            }
+        },
+
+        createZeroMdElement(content) {
+            // Create zero-md web component programmatically
+            const zeroMd = document.createElement('zero-md');
+            zeroMd.id = 'md-' + Math.random().toString(36).substr(2, 9);
+
+            // Create markdown script
+            const mdScript = document.createElement('script');
+            mdScript.type = 'text/markdown';
+            mdScript.textContent = content;
+            zeroMd.appendChild(mdScript);
+
+            // Create custom styles template
+            const template = document.createElement('template');
+            template.setAttribute('data-append', '');
+            template.innerHTML = `
+                <style>
+                    /* Integrate with chat theme */
+                    :host {
+                        display: block;
+                        color: var(--text-primary);
+                    }
+                    a {
+                        color: var(--accent-primary);
+                        text-decoration: none;
+                    }
+                    a:hover {
+                        text-decoration: underline;
+                    }
+                    code {
+                        background: var(--bg-secondary);
+                        padding: 0.2em 0.4em;
+                        border-radius: 3px;
+                        font-family: 'JetBrains Mono', monospace;
+                    }
+                    pre {
+                        background: var(--bg-secondary);
+                        padding: 1em;
+                        border-radius: 8px;
+                        overflow-x: auto;
+                    }
+                    pre code {
+                        background: none;
+                        padding: 0;
+                    }
+                    table {
+                        border-collapse: collapse;
+                        width: 100%;
+                    }
+                    th, td {
+                        border: 1px solid var(--border-color);
+                        padding: 0.5em;
+                    }
+                    th {
+                        background: var(--bg-secondary);
+                    }
+                </style>
+            `;
+            zeroMd.appendChild(template);
+
+            return zeroMd;
+        },
+
+        // Process rendered content - zero-md handles rendering automatically
+        async postProcessMessage(msgEl) {
+            // Wait for zero-md to finish rendering
+            const zeroMdEls = msgEl.querySelectorAll('zero-md');
+            if (zeroMdEls.length > 0) {
+                await Promise.all(
+                    Array.from(zeroMdEls).map(el =>
+                        new Promise(resolve => {
+                            if (el.shadowRoot) {
+                                resolve();
+                            } else {
+                                el.addEventListener('zero-md-rendered', () => resolve(), { once: true });
+                            }
+                        })
+                    )
+                );
+            }
+        },
+        scrollToBottom() {
+            elements.messages.scrollTop = elements.messages.scrollHeight;
+        },
+        updateModelsDropdown() {
+            elements.modelSelect.innerHTML = '';
+            state.models.forEach((model) => {
+                const option = document.createElement('option');
+                option.value = model.id;
+                option.textContent = model.id;
+                if (model.id === state.selectedModel) {
+                    option.selected = true;
+                }
+                elements.modelSelect.appendChild(option);
+            });
+        },
+
+        updateAgentsDropdown() {
+            if (!elements.agentSelect) return;
+            elements.agentSelect.innerHTML = '';
+            AGENTS.forEach((agent) => {
+                const option = document.createElement('option');
+                option.value = agent.id;
+                option.textContent = `${agent.icon} ${agent.name}`;
+                if (agent.id === state.selectedAgent) {
+                    option.selected = true;
+                }
+                elements.agentSelect.appendChild(option);
+            });
+        },
+
+        getAgentById(id) {
+            return AGENTS.find((a) => a.id === id) || AGENTS[0];
+        },
+
+        setLoading(show) {
+            if (show) {
+                elements.loadingOverlay.classList.remove('hidden');
+            } else {
+                elements.loadingOverlay.classList.add('hidden');
+            }
+        },
+
+        setStreaming(streaming) {
+            state.isStreaming = streaming;
+            const conversation = Conversations.getCurrent();
+            const tokens = conversation ? getConversationTokens(conversation) : 0;
+            const isOverLimit = tokens > MAX_CONTEXT_TOKENS;
+
+            elements.messageInput.disabled = streaming || isOverLimit;
+            elements.sendBtn.disabled = streaming || isOverLimit || !elements.messageInput.value.trim();
+            elements.modelSelect.disabled = streaming;
+
+            // Show/hide token limit warning
+            this.updateTokenLimitWarning(isOverLimit);
+
+            if (streaming) {
+                elements.sendBtn.innerHTML = `
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
+                        <rect x="6" y="6" width="12" height="12" rx="2"></rect>
+                    </svg>
+                `;
+            } else {
+                elements.sendBtn.innerHTML = `
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <line x1="5" y1="12" x2="19" y2="12"></line>
+                        <polyline points="12 5 19 12 12 19"></polyline>
+                    </svg>
+                `;
+            }
+        },
+
+        showErrorModal(title, message) {
+            elements.errorTitle.textContent = title;
+            elements.errorMessage.textContent = message;
+            elements.errorModal.classList.remove('hidden');
+            document.body.style.overflow = 'hidden';
+        },
+
+        hideErrorModal() {
+            elements.errorModal.classList.add('hidden');
+            document.body.style.overflow = '';
+        },
+
+        updateConnectionStatus(connected) {
+            if (elements.connectionStatus) {
+                elements.connectionStatus.className = 'connection-status' + (connected ? '' : ' disconnected');
+                const statusText = elements.connectionStatus.querySelector('.status-text');
+                if (statusText) {
+                    statusText.textContent = connected ? 'connected' : 'disconnected';
+                }
+            }
+        },
+
+        updateTokenLimitWarning(isOverLimit) {
+            const existingWarning = document.querySelector('.token-limit-warning');
+            if (isOverLimit) {
+                if (!existingWarning) {
+                    const warning = document.createElement('div');
+                    warning.className = 'token-limit-warning';
+                    warning.innerHTML = `
+                        <span class="warning-icon">⚠️</span>
+                        <span>Context limit exceeded (175K tokens). Please create a new thread for best results.</span>
+                    `;
+                    const inputArea = document.querySelector('.input-area');
+                    inputArea.insertBefore(warning, inputArea.firstChild);
+                }
+                elements.messageInput.placeholder = 'Context limit exceeded - create new thread';
+            } else {
+                if (existingWarning) {
+                    existingWarning.remove();
+                }
+                elements.messageInput.placeholder = 'Ask anything...';
+            }
+        },
+
+        checkTokenLimit() {
+            const conversation = Conversations.getCurrent();
+            const tokens = conversation ? getConversationTokens(conversation) : 0;
+            const isOverLimit = tokens > MAX_CONTEXT_TOKENS;
+            this.updateTokenLimitWarning(isOverLimit);
+            return isOverLimit;
+        },
+
+        renderStats() {
+            if (!elements.statsList || !state.modelStats) return;
+
+            const { date, models } = state.modelStats;
+
+            // Update date display
+            if (elements.statsDate) {
+                elements.statsDate.textContent = `Today: ${date}`;
+            }
+
+            // Clear and render stats
+            elements.statsList.innerHTML = '';
+
+            const modelIds = Object.keys(models);
+            if (modelIds.length === 0) {
+                elements.statsList.innerHTML = `
+                    <div class="stats-loading">
+                        <span>No models available</span>
+                    </div>
+                `;
+                return;
+            }
+
+            modelIds.forEach((modelId) => {
+                const stat = models[modelId];
+                const percentage = stat.limit > 0 ? (stat.used / stat.limit) * 100 : 0;
+
+                // Determine status class
+                let barClass = '';
+                let remainingClass = '';
+                if (percentage >= 90) {
+                    barClass = 'danger';
+                    remainingClass = 'critical';
+                } else if (percentage >= 70) {
+                    barClass = 'warning';
+                    remainingClass = 'low';
+                }
+
+                const item = document.createElement('div');
+                item.className = 'stats-item';
+                item.innerHTML = `
+                    <div class="stats-item-header">
+                        <span class="stats-item-name" title="${modelId}">${this.truncateModelName(modelId)}</span>
+                        <span class="stats-item-count">${stat.used}/${stat.limit}</span>
+                    </div>
+                    <div class="stats-item-bar">
+                        <div class="stats-item-bar-fill ${barClass}" style="width: ${Math.min(percentage, 100)}%"></div>
+                    </div>
+                `;
+
+                elements.statsList.appendChild(item);
+            });
+        },
+
+        truncateModelName(name) {
+            if (name.length <= 20) return name;
+            return name.substring(0, 18) + '...';
+        },
+
+        updateStatsAfterChat(modelId) {
+            if (!state.modelStats || !state.modelStats.models[modelId]) return;
+
+            // Update local stats
+            const stat = state.modelStats.models[modelId];
+            stat.used += 1;
+            stat.remaining = Math.max(0, stat.limit - stat.used);
+
+            // Re-render stats
+            this.renderStats();
+        },
+
+        setStatsLoading(loading) {
+            if (!elements.statsList) return;
+
+            if (loading) {
+                elements.statsList.innerHTML = `
+                    <div class="stats-loading">
+                        <span class="stats-loading-icon">◌</span>
+                        <span>Loading stats...</span>
+                    </div>
+                `;
+            }
+        },
+
+        toggleRightSidebar() {
+            if (elements.sidebarRight) {
+                elements.sidebarRight.classList.toggle('hidden');
+            }
+        },
+    };
+
+    // ============================================
+    // Event Handlers
+    // ============================================
+    function setupEventListeners() {
+        // Send button
+        elements.sendBtn.addEventListener('click', handleSend);
+
+        // Enter to send (Shift+Enter for new line)
+        elements.messageInput.addEventListener('keydown', (e) => {
+            // First check if FileMention wants to handle this key
+            if (FileMention.handleKeydown(e, elements.messageInput)) {
+                return;
+            }
+
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                handleSend();
+            }
+        });
+
+        // Auto-resize textarea and handle file mention
+        elements.messageInput.addEventListener('input', () => {
+            const el = elements.messageInput;
+            el.style.height = 'auto';
+            el.style.height = Math.min(el.scrollHeight, 200) + 'px';
+
+            // Update char count
+            if (el.value.length > 0) {
+                elements.charCount.textContent = el.value.length.toLocaleString();
+            } else {
+                elements.charCount.textContent = '';
+            }
+
+            // Enable/disable send button
+            elements.sendBtn.disabled = !el.value.trim() || state.isStreaming;
+
+            // Handle file mention detection
+            FileMention.handleInput(el);
+        });
+
+        // New chat button
+        elements.newChatBtn.addEventListener('click', () => {
+            Conversations.create();
+            UI.renderConversationsList();
+            UI.renderMessages();
+            elements.messageInput.focus();
+        });
+
+        // Model selector
+        elements.modelSelect.addEventListener('change', (e) => {
+            state.selectedModel = e.target.value;
+            Storage.set(STORAGE_KEYS.SETTINGS, { selectedModel: state.selectedModel });
+
+            const conversation = Conversations.getCurrent();
+            if (conversation) {
+                conversation.model = state.selectedModel;
+                Conversations.save();
+            }
+        });
+
+        // Agent selector
+        if (elements.agentSelect) {
+            elements.agentSelect.addEventListener('change', (e) => {
+                state.selectedAgent = e.target.value;
+                Storage.set(STORAGE_KEYS.SETTINGS, {
+                    ...Storage.get(STORAGE_KEYS.SETTINGS),
+                    selectedAgent: state.selectedAgent,
+                });
+
+                const conversation = Conversations.getCurrent();
+                if (conversation) {
+                    conversation.agent = state.selectedAgent;
+                    Conversations.save();
+                }
+            });
+        }
+
+        // Error modal close
+        elements.errorCloseBtn.addEventListener('click', () => {
+            UI.hideErrorModal();
+        });
+
+        // Close modal on backdrop click
+        elements.errorModal.addEventListener('click', (e) => {
+            if (e.target === elements.errorModal || e.target.classList.contains('modal-backdrop')) {
+                UI.hideErrorModal();
+            }
+        });
+
+        // Keyboard shortcuts
+        document.addEventListener('keydown', (e) => {
+            // Cmd/Ctrl + N = New chat
+            if ((e.metaKey || e.ctrlKey) && e.key === 'n') {
+                e.preventDefault();
+                Conversations.create();
+                UI.renderConversationsList();
+                UI.renderMessages();
+                elements.messageInput.focus();
+            }
+
+            // Escape = Close modal
+            if (e.key === 'Escape') {
+                UI.hideErrorModal();
+            }
+        });
+
+        // Toggle right sidebar
+        if (elements.toggleRightSidebarBtn) {
+            elements.toggleRightSidebarBtn.addEventListener('click', () => {
+                UI.toggleRightSidebar();
+            });
+        }
+
+        // Refresh stats button
+        if (elements.refreshStatsBtn) {
+            elements.refreshStatsBtn.addEventListener('click', async () => {
+                await loadStats();
+            });
+        }
+
+        // Quick prompts
+        if (elements.promptsList) {
+            elements.promptsList.addEventListener('click', (e) => {
+                const promptItem = e.target.closest('.prompt-item');
+                if (promptItem) {
+                    const promptText = promptItem.dataset.prompt;
+                    if (promptText) {
+                        elements.messageInput.value = promptText + ' ';
+                        elements.messageInput.focus();
+                        // Trigger input event to update UI
+                        elements.messageInput.dispatchEvent(new Event('input'));
+                    }
+                }
+            });
+        }
+
+        // Theme toggle
+        if (elements.themeToggleBtn) {
+            elements.themeToggleBtn.addEventListener('click', () => {
+                Theme.toggle();
+            });
+        }
+    }
+
+    async function loadStats() {
+        try {
+            UI.setStatsLoading(true);
+            const statsResponse = await API.getStats();
+            if (statsResponse.success && statsResponse.data) {
+                state.modelStats = statsResponse.data;
+                UI.renderStats();
+            }
+        } catch (error) {
+            console.error('Failed to load stats:', error);
+            if (elements.statsList) {
+                elements.statsList.innerHTML = `
+                    <div class="stats-loading">
+                        <span>Failed to load stats</span>
+                    </div>
+                `;
+            }
+        }
+    }
+
+    async function handleSend() {
+        const content = elements.messageInput.value.trim();
+        if (!content || state.isStreaming) return;
+
+        // Ensure we have a conversation
+        if (!state.currentConversationId) {
+            Conversations.create();
+            UI.renderConversationsList();
+        }
+
+        // Clear input
+        elements.messageInput.value = '';
+        elements.messageInput.style.height = 'auto';
+        elements.charCount.textContent = '';
+
+        // Get file contents if any files are mentioned
+        let fileContents = [];
+        let fileContextStr = '';
+        const hasMentionedFiles = state.mentionedFiles.length > 0;
+        if (hasMentionedFiles) {
+            fileContents = await FileMention.getFileContents();
+            fileContextStr = FileMention.formatFileContext(fileContents);
+            FileMention.clearFiles(); // Clear after getting contents
+        }
+
+        // Build full message with file context
+        const fullMessage = fileContextStr ? content + fileContextStr : content;
+
+        // Display user message (show original content, not with file context)
+        const displayMessage = hasMentionedFiles
+            ? content + `\n\n📎 _${fileContents.length} file(s) attached_`
+            : content;
+
+        // Add user message
+        Conversations.addMessage('user', displayMessage);
+        UI.appendMessage('user', displayMessage);
+
+        // Check token limit before sending
+        if (UI.checkTokenLimit()) {
+            return;
+        }
+
+        // Create assistant message placeholder with loading state
+        const assistantMsgEl = UI.appendMessage('assistant', '', null, true);
+        UI.setStreaming(true);
+
+        let fullResponse = '';
+
+        try {
+            // Get history (last 10 messages for context)
+            const conversation = Conversations.getCurrent();
+            const history = conversation.messages.slice(-11, -1).map((m) => ({
+                role: m.role,
+                content: m.content,
+            }));
+
+            // Get system prompt from agent
+            const agent = UI.getAgentById(conversation.agent || state.selectedAgent);
+            const systemPrompt = agent.systemPrompt;
+
+            // Stream response (send fullMessage with file context)
+            for await (const event of API.streamChat(fullMessage, state.selectedModel, history, systemPrompt)) {
+                if (event.type === 'chunk') {
+                    fullResponse += event.content;
+                    UI.updateStreamingMessage(assistantMsgEl, fullResponse);
+                } else if (event.type === 'done') {
+                    UI.updateStreamingMessage(assistantMsgEl, fullResponse, true);
+                    Conversations.addMessage('assistant', fullResponse);
+                    // Update stats after successful chat
+                    UI.updateStatsAfterChat(state.selectedModel);
+                    // Update conversation list to show new token count
+                    UI.renderConversationsList();
+                    // Check if we've exceeded token limit after response
+                    UI.checkTokenLimit();
+                } else if (event.type === 'error') {
+                    UI.showError(assistantMsgEl, event.message);
+                    if (event.code === 'ERR-WC-001') {
+                        UI.updateConnectionStatus(false);
+                    }
+                }
+            }
+        } catch (error) {
+            console.error('Chat error:', error);
+
+            if (error.status === 401) {
+                UI.updateConnectionStatus(false);
+                UI.showErrorModal('Session Expired', "Please run 'jai1 chat --web' again to start a new session.");
+            } else {
+                UI.showError(assistantMsgEl, error.message || 'Failed to get response');
+            }
+        } finally {
+            UI.setStreaming(false);
+            elements.messageInput.focus();
+        }
+    }
+
+    // ============================================
+    // Initialization
+    // ============================================
+    async function init() {
+        // Initialize theme first to prevent flash
+        Theme.init();
+
+        try {
+            // Get session token from URL and store it
+            const urlParams = new URLSearchParams(window.location.search);
+            const urlToken = urlParams.get('session');
+
+            if (urlToken) {
+                Storage.set(STORAGE_KEYS.SESSION, {
+                    token: urlToken,
+                    storedAt: new Date().toISOString(),
+                });
+
+                // Clean URL
+                window.history.replaceState({}, '', window.location.pathname);
+            }
+
+            // Validate session
+            const sessionResponse = await API.getSession();
+            if (!sessionResponse.success) {
+                throw new Error('Invalid session');
+            }
+
+            state.session = sessionResponse.data;
+            UI.updateConnectionStatus(true);
+
+            // Get models
+            const modelsResponse = await API.getModels();
+            state.models = modelsResponse.data || [];
+
+            // Load settings
+            const settings = Storage.get(STORAGE_KEYS.SETTINGS) || {};
+            // Default to jai1-auto if available, otherwise first model
+            const defaultModel = state.models.find(m => m.id === 'jai1-auto')?.id || state.models[0]?.id || '';
+            state.selectedModel = settings.selectedModel || defaultModel;
+            state.selectedAgent = settings.selectedAgent || 'default';
+
+            // Load conversations
+            Conversations.load();
+
+            // If we have conversations, select the first one
+            if (state.conversations.length > 0) {
+                state.currentConversationId = state.conversations[0].id;
+                // Restore agent from conversation
+                const currentConv = Conversations.getCurrent();
+                if (currentConv && currentConv.agent) {
+                    state.selectedAgent = currentConv.agent;
+                }
+            }
+
+            // Render UI
+            UI.updateModelsDropdown();
+            UI.updateAgentsDropdown();
+            UI.renderConversationsList();
+            UI.renderMessages();
+
+            // Setup event listeners
+            setupEventListeners();
+
+            // Initialize file mention system
+            FileMention.init();
+
+            // Load stats (only once at init)
+            loadStats();
+
+
+            // Configure Mermaid if available
+            if (typeof mermaid !== 'undefined') {
+                mermaid.initialize({
+                    startOnLoad: false,
+                    theme: 'dark',
+                    securityLevel: 'loose'
+                });
+            }
+            if (typeof marked !== 'undefined') {
+                marked.setOptions({
+                    breaks: true,
+                    gfm: true,
+                });
+            }
+
+            // Hide loading
+            UI.setLoading(false);
+
+            // Focus input
+            elements.messageInput.focus();
+        } catch (error) {
+            console.error('Init error:', error);
+            UI.setLoading(false);
+
+            if (error.status === 401 || error.message.includes('session')) {
+                UI.showErrorModal('Session Invalid', "Please run 'jai1 chat --web' again to start a new session.");
+            } else {
+                UI.showErrorModal('Connection Error', 'Failed to connect to Jai1 server. Please try again.');
+            }
+        }
+    }
+
+    // ============================================
+    // Utilities
+    // ============================================
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    // ============================================
+    // Start
+    // ============================================
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();