made a pixelated interface with catppuccin styling.

.dockerignore

@@ -0,0 +1,22 @@
+# Git
+.git
+.gitignore
+
+# Documentation
+README.md
+project.md
+CLAUDE.md
+
+# IDE
+.vscode
+.idea
+.cursor
+
+# Docker
+Dockerfile
+docker-compose.yml
+.dockerignore
+
+# Misc
+*.log
+.DS_Store

CLAUDE.md

@@ -0,0 +1,58 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+DevDen is a self-hosted AI chat platform that enables organizations to provide AI-powered Q&A based on their own knowledge bases. Users interact through a clean chat interface while administrators manage knowledge bases, AI providers, and user access through a terminal-style dashboard.
+
+**Current Status:** Early prototype stage with static frontend (HTML/CSS/JS). Backend infrastructure is not yet implemented.
+
+## Architecture
+
+**Planned Technology Stack:**
+- **Frontend:** Vanilla JavaScript (prototype), potential migration to Svelte
+- **Backend:** FastAPI (Python)
+- **Database:** PostgreSQL (users, conversations, settings)
+- **Cache:** Redis (sessions)
+- **Vector DB:** Qdrant or ChromaDB (semantic search)
+- **Auth:** Microsoft Entra ID
+- **AI Providers:** Claude, OpenAI, Gemini, OpenRouter, Ollama (local)
+
+**Two-Interface Design:**
+- Clean chat interface for end users (warm, accessible design)
+- Terminal-style dashboard for administrators
+
+## Current Files
+
+- `index.html` - Main chat interface structure
+- `script.js` - Chat interaction logic (mock responses currently)
+- `style.css` - UI styling with fox-themed color scheme (accent: `#d4a574`)
+
+## Development Phases (from project.md)
+
+1. Core Chat - Basic chat with single AI provider
+2. Knowledge Base - Document indexing and semantic search
+3. Authentication - Microsoft Entra ID integration
+4. Admin Dashboard - Management interface
+5. Multi-Provider - Multiple AI provider support
+6. Git Integration - Auto-sync from repositories
+7. Polish - Production readiness
+
+## Commands (Future)
+
+When Docker infrastructure is implemented:
+```bash
+docker-compose up -d
+docker-compose exec devden-web python manage.py init-db
+docker-compose exec devden-web python manage.py create-admin --email admin@company.com
+docker-compose logs -f devden-web
+```
+
+## Design Decisions
+
+- Knowledge bases connect via Git repositories (auto-sync) or Docker volumes (local files)
+- Source transparency: answers show which documents were referenced
+- User quotas configurable per-user (questions per day/month)
+- API keys encrypted at rest
+- All data stays on-premises (self-hosted)

Dockerfile

@@ -0,0 +1,13 @@
+# Use nginx alpine for minimal size
+FROM nginx:alpine
+
+# Copy static files to nginx html directory
+COPY index.html /usr/share/nginx/html/
+COPY style.css /usr/share/nginx/html/
+COPY script.js /usr/share/nginx/html/
+
+# Expose port 80
+EXPOSE 80
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -1,240 +1,330 @@
-## 📦 **Naam: "DevDen"** (of alternatieven: "CodeBurrow", "TerminalNest", "AskDen")
+## 🦊 DevDen
 
-**Tagline:** *"Your cozy AI-powered development terminal"*
+**Your AI assistant, powered by your knowledge**
 
 ---
 
-## 🎯 **Concept Beschrijving**
+## What is DevDen?
 
-DevDen is een self-hosted, terminal-stijl webinterface die developers een unified interface geeft om met verschillende AI providers te praten, gekoppeld aan hun eigen codebases en kennisbanken. Het combineert de vertrouwdheid van een terminal met de kracht van moderne AI, waarbij je volledige controle houdt over je data en AI provider keuzes.
+DevDen is a self-hosted AI chat platform that lets people ask questions and get answers from AI providers like Claude, OpenAI, Gemini, and others. The key difference? As an administrator, you control what knowledge the AI has access to by connecting your own documentation, manuals, wikis, or any other information sources.
+
+Think of it as giving your users a smart assistant that knows exactly what's in your company documentation, support guides, or knowledge bases - without them having to search through files themselves.
 
 ---
 
-## 🏗️ **Architectuur Overzicht**
+## Who is it for?
 
-### **Core Components**
+**Companies** - Employees can ask questions about HR policies, procedures, or internal processes
 
-1. **Frontend: Terminal Interface**
+**Support Teams** - Customers get instant answers based on your product documentation
-   - Clean, terminal-achtige UI (denk: groen-op-zwart, of customizable themes)
-   - Command-line style interacties met autocomplete
-   - Split-pane view: terminal + context viewer
-   - Syntax highlighting voor code responses
-   - Session management (bewaar conversatie geschiedenis)
 
-2. **Backend: API Gateway**
+**Organizations** - Members can query policies, regulations, or guidelines
-   - FastAPI (past bij je Python stack)
-   - Provider abstraction layer
-   - Request routing en rate limiting
-   - WebSocket support voor streaming responses
 
-3. **Knowledge Base Engine**
+**Communities** - Users can get answers about rules, resources, or FAQs
-   - Git repository indexing
-   - Docker volume mounting
-   - Vector embeddings voor semantic search
-   - File watching voor auto-updates
-   - Support voor multiple knowledge bases per user/project
-
-4. **Provider Manager**
-   - Unified interface voor alle AI providers
-   - API key management per provider
-   - Fallback logic (als één provider down is)
-   - Cost tracking per provider/model
-   - Model capability mapping
 
 ---
 
-## 🔐 **Authenticatie: Microsoft Entra ID**
+## How does it work?
 
-**Setup:**
+**For Users (the simple part):**
-- OAuth 2.0 flow met Entra ID
-- Role-based access control (RBAC)
-- Multi-tenant support (voor meerdere orgs)
-- API token generation voor programmatic access
 
-**User Management:**
+1. User visits DevDen and logs in with their Microsoft account
-- Per-user provider API keys (encrypted)
+2. User types a question in the chat interface
-- Per-user knowledge base access
+3. AI reads the question, searches your knowledge base, and provides an answer
-- Usage quotas en billing (optioneel)
+4. User can see where the answer came from (which document or page)
+5. Conversation is saved so they can refer back to it later
+
+That's it. No training needed, no complicated setup for end users.
+
+**For You (the admin):**
+
+1. You set up DevDen with Docker Compose on your server
+2. You add your API keys for the AI providers you want to use
+3. You connect your knowledge bases (either from Git repositories or local folders)
+4. You configure who can access DevDen via Microsoft Entra ID
+5. You monitor usage, costs, and manage everything through the admin dashboard
+
+DevDen automatically indexes your documentation, and when users ask questions, it finds the relevant information and gives it to the AI as context.
 
 ---
 
-## 📚 **Knowledge Base Integratie**
+## Two Different Interfaces
 
-### **Opties:**
+**Clean Chat Interface (for regular users)**
 
-1. **Git Integration**
+A simple, friendly chat interface that looks like WhatsApp or any modern messaging app. Users just type questions and get answers. No technical knowledge required. Perfect for employees, customers, or community members.
-   - Clone repos via URL + credentials
-   - Auto-sync op interval of webhook
-   - Branch/tag selection
-   - .devdenignore voor exclusions
 
-2. **Volume Mounting**
+**Terminal-Style Dashboard (for you, the admin)**
-   - Docker volumes voor local codebases
-   - Read-only of read-write access
-   - Hot-reload bij file changes
 
-3. **Future Options:**
+A more technical, terminal-inspired interface where you manage everything: knowledge bases, AI providers, user access, usage statistics, and costs. This gives you full control over the platform.
-   - Confluence/Notion integration
-   - S3/Azure Blob storage
-   - Database schema introspection
-   - API documentation scraping
-
-**Indexing:**
-- Chunk documents voor context
-- Vector embeddings (gebruik Ollama local, of OpenAI)
-- Metadata extraction (file types, authors, dates)
-- Full-text search + semantic search
 
 ---
 
-## 🎨 **UI/UX Features**
+## Knowledge Base Options
 
-### **Terminal Commands**
+You can connect your documentation in two ways:
-```
-/model claude-sonnet-4        # Switch AI model
-/kb add my-project            # Add knowledge base
-/kb search "authentication"    # Search in KB
-/provider openai              # Switch provider
-/session save my-analysis     # Save session
-/export markdown              # Export conversation
-/clear                        # Clear terminal
-/help                         # Show commands
-```
 
-### **Context Awareness**
+**Git Repositories**
-- Toon welke knowledge base chunks gebruikt worden
+
-- Highlight relevante files in sidebar
+Connect any Git repository (GitHub, GitLab, etc.) and DevDen will automatically clone and index it. Whenever you update the documentation in Git, DevDen can automatically sync and re-index the new content.
-- Token usage indicator
+
-- Model capabilities badge
+Great for: Documentation that multiple people maintain, version-controlled content, automated workflows
+
+**Docker Volumes**
+
+Mount a local folder with your documents and DevDen will index everything inside. Any changes to files are detected and the index updates automatically.
+
+Great for: Local files, quick setup, direct file system access
+
+DevDen can index markdown files, text files, PDFs, Word documents, and more.
 
 ---
 
-## 🐳 **Docker Setup**
+## AI Provider Flexibility
 
-### **docker-compose.yml Structure**
+You're not locked into a single AI provider. DevDen supports:
 
-```yaml
+- **Claude** (Anthropic) - Sonnet, Opus, Haiku models
-services:
+- **OpenAI** - GPT-4 and other models
-  devden-web:      # Frontend + Backend
+- **OpenRouter** - Access to many different AI models through one API
-  devden-db:       # PostgreSQL voor sessions/users
+- **Google Gemini** - Google's AI models
-  devden-redis:    # Caching + session storage
+- **Ollama** - Run AI models locally on your own hardware (no API costs)
-  devden-vector:   # Vector DB (qdrant/chroma)
-  ollama:          # Optional local AI
-```
 
-**Volumes:**
+You can set a default provider, allow users to choose, or even set up automatic fallbacks if one provider is having issues.
-- `/data/knowledge-bases` - Mounted KB directories
-- `/data/git-repos` - Cloned repositories
-- `/data/configs` - User configs + API keys
 
 ---
 
-## 🔧 **Provider Configuration**
+## Authentication & Security
 
-### **providers.yaml**
+**Microsoft Entra ID Integration**
-```yaml
-providers:
-  claude:
-    models: [sonnet-4, opus-4, haiku-4]
-    capabilities: [code, vision, long-context]
 
-  openai:
+Users log in with their existing Microsoft/Azure AD accounts. No need to create separate accounts or remember new passwords.
-    models: [gpt-4, gpt-4-turbo]
-    capabilities: [code, vision]
 
-  openrouter:
+You control:
-    proxy: true
+- Which users or groups can access DevDen
-    models: [all-available]
+- How many questions users can ask per day
+- Which knowledge bases different users can access
 
-  gemini:
+**Data Privacy**
-    models: [gemini-pro, gemini-ultra]
 
-  ollama:
+Everything runs on your server. Conversations are stored in your database, not with the AI providers. Knowledge bases never leave your infrastructure. Only the actual questions and selected context are sent to the AI provider's API.
-    local: true
-    endpoint: http://ollama:11434
-```
 
 ---
 
-## 🌟 **Killer Features**
+## What Makes DevDen Special?
 
-1. **Smart Context Selection**
+**Context-Aware Answers**
-   - AI suggests relevant files from KB
-   - Automatic dependency detection
-   - "What's changed" git diff integration
 
-2. **Collaborative Sessions**
+Instead of generic AI responses, users get answers specific to your organization because the AI has access to your documentation.
-   - Share session URLs
-   - Real-time collaboration (optional)
-   - Export sessions als gists
 
-3. **Cost Optimization**
+**Source Transparency**
-   - Use cheap models voor simple queries
-   - Automatic switching based op task complexity
-   - Monthly budget alerts
 
-4. **Privacy First**
+Every answer shows which documents or pages were used, so users can verify information or read more if they want.
-   - All data self-hosted
+
-   - Optional E2E encryption voor KB
+**Full Control**
-   - Audit logs voor compliance
+
-   - No telemetry naar providers (alleen noodzakelijke API calls)
+You decide which AI providers to use, what documentation to include, who has access, and you can see all usage statistics and costs.
+
+**Self-Hosted**
+
+Your data stays on your server. No external service has access to your knowledge base or user conversations.
+
+**Cost Effective**
+
+Only pay for what you use. AI providers charge per token/request, so you only pay when users ask questions. Running DevDen itself just requires a server (or even just a computer with Docker).
 
 ---
 
-## 📊 **Tech Stack**
+## Example Use Cases
 
-**Frontend:**
+**HR Support Bot**
-- Svelte/Alpine.js (lightweight)
-- Xterm.js voor terminal emulation
-- TailwindCSS voor styling
 
-**Backend:**
+Knowledge Base: Employee handbook, vacation policies, benefits documentation
-- FastAPI (Python)
-- PostgreSQL (users, sessions, configs)
-- Redis (caching, rate limiting)
-- Qdrant/ChromaDB (vector search)
 
-**Infrastructure:**
+Questions users ask:
-- Docker + Docker Compose
+- "How many vacation days do I have?"
-- Nginx reverse proxy
+- "What's the parental leave policy?"
-- Traefik voor routing (optioneel)
+- "How do I submit an expense report?"
+
+**IT Helpdesk**
+
+Knowledge Base: IT documentation, troubleshooting guides, software manuals
+
+Questions users ask:
+- "How do I reset my password?"
+- "My laptop won't connect to WiFi, what should I do?"
+- "Which VPN should I use for remote work?"
+
+**Customer Support**
+
+Knowledge Base: Product documentation, FAQs, return policies
+
+Questions customers ask:
+- "How do I set up my new device?"
+- "What's your return policy?"
+- "Is this product compatible with X?"
+
+**Internal Wiki Alternative**
+
+Instead of employees searching through wiki pages, they just ask DevDen and get instant answers with sources.
 
 ---
 
-## 🚀 **MVP Feature Set**
+## Technical Overview
 
-**Phase 1: Core**
+**What You Need**
-- [ ] Terminal UI met basic commands
-- [ ] Claude + OpenAI provider support
-- [ ] Volume-based KB (single directory)
-- [ ] Basic auth (admin/password)
-- [ ] Session persistence
 
-**Phase 2: Enhanced**
+- A server (VPS, cloud instance, or even a local machine)
-- [ ] Microsoft Entra ID integration
+- Docker and Docker Compose installed
-- [ ] Git repository integration
+- API keys for the AI providers you want to use
-- [ ] Vector search in KB
+- Microsoft Entra ID tenant for authentication
-- [ ] OpenRouter + Gemini providers
+- Your documentation/knowledge base ready
-- [ ] Cost tracking
 
-**Phase 3: Advanced**
+**What DevDen Includes**
-- [ ] Ollama local models
+
-- [ ] Multi-KB support
+- Web-based chat interface (frontend)
-- [ ] Collaborative features
+- API backend (FastAPI with Python)
-- [ ] Advanced prompt templates
+- PostgreSQL database (stores users, conversations, settings)
-- [ ] API voor external integrations
+- Redis (caching and session management)
+- Vector database (Qdrant or ChromaDB - for semantic search in your docs)
+- Optional: Ollama container (for local AI models)
+
+Everything runs in Docker containers, making it easy to deploy and manage.
 
 ---
 
-## 🎨 **Visual Identity**
+## Admin Features
 
-Gezien je voorliefde voor cozy aesthetics:
+**Knowledge Base Management**
 
-**Color Palette:**
+- Add/remove knowledge bases
-- Primary: Warm terminal green (#7CFC00)
+- Enable/disable specific knowledge bases
-- Background: Deep charcoal (#1e1e1e)
+- See sync status and last update time
-- Accent: Cappuccino brown (#8B7355)
+- View how many documents are indexed
-- Highlights: Soft amber (#FFB347)
+- Configure auto-sync intervals
 
-**Mascot Concept:**
+**User Management**
-Een cozy fox in een burrow met een terminal, omringd door code snippets en boeken (knowledge bases). Warm, friendly, tech-savvy.
+
+- See all active users
+- View per-user usage statistics
+- Set usage limits (questions per day/month)
+- Control access to specific knowledge bases
+- Export user data (GDPR compliance)
+
+**Provider Settings**
+
+- Configure multiple AI providers
+- Set default provider and model
+- Add/rotate API keys
+- Monitor API usage and costs
+- Set up fallback providers
+
+**Analytics Dashboard**
+
+- Total questions asked (today/week/month)
+- Most active users
+- Most asked topics
+- Response times
+- Cost tracking per provider
+- Most used knowledge bases
+
+**System Monitoring**
+
+- Health status of all services
+- Database connection status
+- Vector database status
+- API provider connectivity
+- Error logs and alerts
+
+---
+
+## Development Phases
+
+**Phase 1: Basic Chat**
+
+Get a working chat interface where users can ask questions and get answers from Claude or OpenAI.
+
+**Phase 2: Knowledge Base**
+
+Add document indexing and semantic search so the AI can use your documentation.
+
+**Phase 3: Authentication**
+
+Integrate Microsoft Entra ID so users can securely log in.
+
+**Phase 4: Admin Dashboard**
+
+Build the admin interface so you can manage everything.
+
+**Phase 5: Multi-Provider**
+
+Add support for multiple AI providers and switching between them.
+
+**Phase 6: Git Integration**
+
+Add automatic syncing from Git repositories.
+
+**Phase 7: Polish**
+
+Add all the nice-to-have features like conversation export, mobile responsiveness, advanced search, etc.
+
+---
+
+## Why "DevDen"?
+
+The name combines "Dev" (short for development or device - it's a tool for building better workflows) with "Den" (a cozy, safe space - like a fox's burrow). 
+
+The fox mascot represents intelligence, adaptability, and resourcefulness - just like the platform itself. The "den" is where knowledge lives, protected and organized, ready to be accessed when needed.
+
+Plus, it fits nicely with your other project names like Burrow and Bean Den, keeping that warm, cozy aesthetic.
+
+---
+
+## Cost Estimation
+
+For a small organization (50 users, 1000 questions per month):
+
+**AI Costs:**
+- Claude Sonnet: around 10-15 dollars per month
+- OpenAI GPT-4: around 25-35 dollars per month
+- Ollama (local): free, just electricity
+
+**Hosting:**
+- Small VPS: 20-40 dollars per month
+- Or self-host: just electricity
+
+**Total: Roughly 30-75 dollars per month depending on usage and provider choice**
+
+Much cheaper than enterprise chat platforms or support desk solutions, and you have full control.
+
+---
+
+## Privacy & Compliance
+
+**Data Residency**
+
+All data stays on your server. Conversations, user data, and knowledge bases are stored in your database, not on external servers.
+
+**GDPR Compliant**
+
+Users can request to see their data or have it deleted. Admin tools make this easy to manage.
+
+**Audit Logs**
+
+All admin actions are logged. You can see who did what and when.
+
+**Encryption**
+
+API keys are encrypted in the database. Conversations can be encrypted at rest. HTTPS for all traffic.
+
+---
+
+## Next Steps
+
+If you want to build DevDen, the next step would be to create:
+
+1. A detailed technical architecture document
+2. Database schema design
+3. API endpoint specifications
+4. UI/UX wireframes and mockups
+5. A development roadmap with specific tasks

docker-compose.yml

@@ -0,0 +1,9 @@
+version: '3.8'
+
+services:
+  devden-web:
+    build: .
+    container_name: devden
+    ports:
+      - "3000:80"
+    restart: unless-stopped

index.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>DevDen</title>
+        <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+        <!-- Welcome Screen (centered, shown initially) -->
+        <div class="welcome-screen" id="welcomeScreen">
+            <div class="logo">
+                <span class="logo-dev">Dev</span
+                ><span class="logo-den">Den</span>
+            </div>
+            <div class="input-container">
+                <div class="input-box">
+                    <input
+                        type="text"
+                        id="welcomeInput"
+                        placeholder="Ask anything..."
+                        autocomplete="off"
+                        autofocus
+                    />
+                </div>
+                <div class="hint">Press <kbd>Enter</kbd> to send</div>
+            </div>
+        </div>
+
+        <!-- Chat Screen (shown after first message) -->
+        <div class="chat-screen hidden" id="chatScreen">
+            <div class="chat-messages" id="chatMessages"></div>
+            <div class="input-container chat-input">
+                <div class="input-box">
+                    <input
+                        type="text"
+                        id="chatInput"
+                        placeholder="Ask anything..."
+                        autocomplete="off"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <script src="script.js"></script>
+    </body>
+</html>

project.md

@@ -0,0 +1,809 @@
+## 🦊 **DevDen**
+
+**Tagline:** *"Your AI assistant, powered by your knowledge"*
+
+---
+
+## 🎯 **What is DevDen?**
+
+DevDen is a self-hosted AI chat platform where users can ask questions to different AI providers (Claude, OpenAI, etc.). As an administrator, you configure the knowledge bases (e.g., company documentation, manuals, internal wikis), allowing the AI to provide accurate answers based on your specific information.
+
+**Use Cases:**
+- **Companies**: Employees can ask questions about business processes, HR policies, IT support
+- **Support Teams**: Customers get AI-powered support with access to product documentation
+- **Organizations**: Members get answers about regulations, procedures, FAQs
+- **Communities**: Community members can ask questions about guidelines, resources
+
+---
+
+## 👥 **Two Roles**
+
+### **Administrator (you)**
+- Configures AI providers (API keys)
+- Manages knowledge bases (git repos, volumes)
+- Sets up users and access (via Entra ID)
+- Monitors usage and costs
+- Controls what information the AI uses
+
+### **Users (end users)**
+- Login via Microsoft account
+- Ask questions in terminal-style chat
+- Get answers from AI + your knowledge base
+- See their chat history
+- Simple and accessible - no tech knowledge needed
+
+---
+
+## 💬 **User Experience (end user)**
+
+### **Simple and Direct**
+```
+╔════════════════════════════════════════════════╗
+║ 🦊 DevDen Chat                          [⚙️]  ║
+╠════════════════════════════════════════════════╣
+║                                                ║
+║ You: What is the vacation policy?             ║
+║                                                ║
+║ AI: Based on the employee handbook...         ║
+║ You are entitled to 25 vacation days per      ║
+║ year...                                        ║
+║                                                ║
+║ 📎 Source: HR Handbook 2024, page 12         ║
+║                                                ║
+║ You: And how do I request it?                 ║
+║                                                ║
+║ AI: You can request vacation through...       ║
+║                                                ║
+║ Your question: █                               ║
+╚════════════════════════════════════════════════╝
+```
+
+**Users see:**
+- Clean chat interface (no complicated options)
+- Simple question/answer flow
+- Where the answer comes from (transparency)
+- Their previous conversations
+- *Optional: ability to choose AI provider if you allow it*
+
+---
+
+## ⚙️ **Admin Dashboard**
+
+You as administrator have a separate admin interface:
+
+### **Knowledge Base Management**
+```
+📚 Knowledge Bases
+
+✓ HR Handbook          [Git: company/hr-docs]
+✓ IT Support Docs      [Volume: /data/it-docs]
+✓ Product Catalog      [Git: company/products]
+○ Inactive KB          [Disabled]
+
+[+ Add Knowledge Base]
+```
+
+**Per Knowledge Base:**
+- On/Off toggle (activate/deactivate)
+- Sync status (last update)
+- Number of indexed documents
+- Content preview
+
+### **Provider Settings**
+```
+🤖 AI Providers
+
+✓ Claude Sonnet 4      [Default]
+  API Key: ••••••••••1234
+  Max tokens: 4000
+  Cost per 1M tokens: $3.00
+  
+✓ OpenAI GPT-4
+  API Key: ••••••••••5678
+  [Fallback provider]
+  
+○ Ollama (Local)
+  [Disabled]
+```
+
+### **User Management**
+```
+👥 Users (via Microsoft Entra ID)
+
+Active Users: 42
+- john@company.com      Last active: 2 min ago
+- lisa@company.com      Last active: 1 hour ago
+- ...
+
+Usage Stats:
+- Total questions today: 127
+- Avg response time: 2.3s
+- Most asked topic: HR policies
+```
+
+### **Analytics Dashboard**
+```
+📊 Usage Overview
+
+Today:        127 questions
+This week:    892 questions
+This month:   3,421 questions
+
+Top Topics:
+1. HR policies (34%)
+2. IT support (28%)
+3. Product info (22%)
+4. Other (16%)
+
+Cost Overview:
+- This month: $45.20
+- Avg per question: $0.013
+```
+
+---
+
+## 🏗️ **Architecture (simplified)**
+
+### **For end users**
+```
+User → Login (Microsoft) → Chat Interface → AI answer
+                                ↓
+                           Knowledge Base
+```
+
+### **Technical**
+```
+Frontend (Chat UI)
+    ↓
+Backend API
+    ↓
+┌─────────────┬──────────────┬─────────────┐
+│ AI Provider │ Knowledge DB │ User Auth   │
+│ (Claude/etc)│ (Vector DB)  │ (Entra ID)  │
+└─────────────┴──────────────┴─────────────┘
+```
+
+---
+
+## 📚 **Knowledge Base Setup (Admin)**
+
+### **Option 1: Git Repository**
+```yaml
+# Admin configures in UI or config file
+knowledge_base:
+  name: "HR Documentation"
+  type: git
+  url: "https://github.com/company/hr-docs"
+  branch: main
+  auto_sync: hourly
+  enabled: true
+```
+
+**Benefits:**
+- Automatic updates on git push
+- Version control
+- Multiple people can update documentation
+
+### **Option 2: Docker Volume**
+```yaml
+knowledge_base:
+  name: "IT Support Docs"
+  type: volume
+  path: "/data/it-docs"
+  watch: true  # Auto-refresh on file changes
+  enabled: true
+```
+
+**Benefits:**
+- Direct filesystem access
+- Easy for local files
+- Real-time updates
+
+### **What gets indexed?**
+- Markdown files (`.md`)
+- Text files (`.txt`)
+- PDFs (text extraction)
+- Word documents (`.docx`)
+- *Optional: HTML, JSON, CSV, etc.*
+
+---
+
+## 🎨 **User Interface Styles**
+
+### **Option 1: Terminal Style (for you as admin)**
+Terminal aesthetic, tech-savvy look, everything you saw before.
+
+### **Option 2: Clean Chat (for end users)**
+More like modern chat apps (WhatsApp, iMessage):
+- Large, clear text
+- Clean message bubbles
+- Minimal UI chrome
+- Mobile-friendly
+- Accessible for non-tech people
+
+```
+┌────────────────────────────────────┐
+│                                    │
+│  What is the vacation policy?  ○  │
+│                                    │
+│  ○  Based on the employee         │
+│     handbook you are entitled     │
+│     to 25 vacation days...        │
+│                                    │
+│     📎 HR Handbook 2024           │
+│                                    │
+│  Type your question...         [→]│
+└────────────────────────────────────┘
+```
+
+**Or both:**
+- Admin interface = terminal style
+- User interface = clean chat style
+
+---
+
+## 🔐 **Authentication Flow**
+
+```
+1. User goes to devden.company.com
+2. "Login with Microsoft" button
+3. Redirect to Microsoft login
+4. After login → back to DevDen chat
+5. User can ask questions
+```
+
+**Admin can configure:**
+- Which Microsoft groups/users have access
+- Per-user quotas (max X questions per day)
+- Access to specific knowledge bases
+
+---
+
+## 💡 **Practical Examples**
+
+### **Example 1: HR Support**
+**Knowledge Base:** HR handbook, vacation policy, employment terms
+
+**User question:**
+"How many vacation days do I get after 4 years of service?"
+
+**AI answer:**
+"After 4 years of service, you are entitled to 27 vacation days per year (25 base + 2 extra for seniority).
+
+📎 Source: HR Handbook 2024, section 3.2 'Vacation Policy'"
+
+---
+
+### **Example 2: IT Support**
+**Knowledge Base:** IT documentation, troubleshooting guides, FAQ
+
+**User question:**
+"My laptop won't start, what should I do?"
+
+**AI answer:**
+"Try these steps first:
+1. Hold the power button for 10 seconds
+2. Connect the charger
+3. Try restarting again
+
+If this doesn't work, create a ticket at servicedesk@company.com
+
+📎 Source: IT Support Guide - Laptop Troubleshooting"
+
+---
+
+### **Example 3: Customer Support**
+**Knowledge Base:** Product documentation, FAQ, return policy
+
+**User question:**
+"How can I return a product?"
+
+**AI answer:**
+"You can return products within 30 days:
+1. Log in to your account
+2. Go to 'My Orders'
+3. Click 'Return' on the product
+4. Print the return label
+
+Returns are free within the US.
+
+📎 Source: Return Policy 2024"
+
+---
+
+## 🚀 **MVP Feature Set**
+
+### **For Users:**
+- [ ] Login via Microsoft
+- [ ] Chat interface (simple and clean)
+- [ ] Ask questions → get AI answers
+- [ ] See which sources were used
+- [ ] View chat history
+- [ ] Export conversation
+
+### **For Admin (you):**
+- [ ] Add knowledge base (git/volume)
+- [ ] Configure AI provider
+- [ ] Manage user access
+- [ ] View usage stats
+- [ ] Cost tracking
+- [ ] Toggle KB on/off
+
+### **Technical:**
+- [ ] FastAPI backend
+- [ ] Docker Compose setup
+- [ ] Vector DB for KB search
+- [ ] Entra ID integration
+- [ ] Multi-provider support (Claude, OpenAI, etc.)
+
+---
+
+## 📂 **Project Structure**
+
+```
+devden/
+├── docker-compose.yml
+├── .env.example
+├── frontend/
+│   ├── src/
+│   │   ├── components/
+│   │   │   ├── chat/
+│   │   │   │   ├── ChatInterface.svelte
+│   │   │   │   ├── MessageBubble.svelte
+│   │   │   │   └── InputBox.svelte
+│   │   │   └── admin/
+│   │   │       ├── Dashboard.svelte
+│   │   │       ├── KnowledgeBaseManager.svelte
+│   │   │       ├── ProviderSettings.svelte
+│   │   │       └── UserManagement.svelte
+│   │   ├── stores/
+│   │   └── routes/
+│   └── package.json
+├── backend/
+│   ├── app/
+│   │   ├── main.py
+│   │   ├── api/
+│   │   │   ├── chat.py          # Chat endpoints
+│   │   │   ├── auth.py          # Entra ID auth
+│   │   │   ├── admin.py         # Admin endpoints
+│   │   │   └── kb.py            # KB management
+│   │   ├── services/
+│   │   │   ├── provider_manager.py   # AI provider abstraction
+│   │   │   ├── kb_indexer.py         # Index documents
+│   │   │   ├── vector_search.py      # Semantic search
+│   │   │   └── chat_service.py       # Chat logic
+│   │   ├── models/
+│   │   │   ├── user.py
+│   │   │   ├── conversation.py
+│   │   │   ├── knowledge_base.py
+│   │   │   └── provider.py
+│   │   └── core/
+│   │       ├── config.py
+│   │       └── security.py
+│   └── requirements.txt
+├── knowledge-bases/         # Volume mount for KBs
+└── docs/
+    ├── README.md
+    ├── SETUP.md
+    └── ADMIN_GUIDE.md
+```
+
+---
+
+## 🔧 **Configuration Example**
+
+### **docker-compose.yml**
+```yaml
+version: '3.8'
+
+services:
+  devden-web:
+    build: .
+    ports:
+      - "3000:3000"
+    environment:
+      - DATABASE_URL=postgresql://devden:password@db:5432/devden
+      - REDIS_URL=redis://redis:6379
+      - VECTOR_DB_URL=http://qdrant:6333
+    volumes:
+      - ./knowledge-bases:/app/knowledge-bases
+    depends_on:
+      - db
+      - redis
+      - qdrant
+
+  db:
+    image: postgres:16
+    environment:
+      POSTGRES_DB: devden
+      POSTGRES_USER: devden
+      POSTGRES_PASSWORD: password
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+
+  redis:
+    image: redis:7-alpine
+    volumes:
+      - redis_data:/data
+
+  qdrant:
+    image: qdrant/qdrant:latest
+    ports:
+      - "6333:6333"
+    volumes:
+      - qdrant_data:/qdrant/storage
+
+  ollama:
+    image: ollama/ollama:latest
+    volumes:
+      - ollama_data:/root/.ollama
+    # Optional: only if you want local models
+
+volumes:
+  postgres_data:
+  redis_data:
+  qdrant_data:
+  ollama_data:
+```
+
+### **config.yaml**
+```yaml
+devden:
+  name: "Company DevDen"
+  admin_email: "mats@company.com"
+  
+ui:
+  theme: cappuccino
+  user_interface: clean_chat
+  admin_interface: terminal
+  
+providers:
+  claude:
+    enabled: true
+    default_model: claude-sonnet-4
+    api_key_env: CLAUDE_API_KEY
+    
+  openai:
+    enabled: true
+    default_model: gpt-4-turbo
+    api_key_env: OPENAI_API_KEY
+    
+  openrouter:
+    enabled: true
+    api_key_env: OPENROUTER_API_KEY
+    
+  gemini:
+    enabled: true
+    api_key_env: GEMINI_API_KEY
+    
+  ollama:
+    enabled: false
+    endpoint: http://ollama:11434
+
+knowledge_bases:
+  - name: hr_handbook
+    type: git
+    url: https://github.com/company/hr-docs
+    branch: main
+    auto_sync: true
+    sync_interval: 1h
+    enabled: true
+    
+  - name: it_support
+    type: volume
+    path: /app/knowledge-bases/it-docs
+    watch: true
+    file_patterns: ["*.md", "*.txt", "*.pdf"]
+    enabled: true
+
+auth:
+  provider: entra_id
+  tenant_id: ${ENTRA_TENANT_ID}
+  client_id: ${ENTRA_CLIENT_ID}
+  client_secret: ${ENTRA_CLIENT_SECRET}
+  redirect_uri: http://localhost:3000/auth/callback
+  
+  # Optional: restrict to specific groups
+  allowed_groups:
+    - "DevDen Users"
+    - "IT Support Team"
+
+limits:
+  max_questions_per_user_per_day: 100
+  max_tokens_per_response: 4000
+  conversation_retention_days: 90
+```
+
+---
+
+## 🎯 **Development Roadmap**
+
+### **Phase 1: Core Chat (Week 1-2)**
+**Goal:** Basic working chat with one AI provider
+
+- [ ] Docker Compose setup
+- [ ] FastAPI backend skeleton
+- [ ] Simple chat UI (web interface)
+- [ ] PostgreSQL database setup
+- [ ] Claude API integration
+- [ ] Basic conversation storage
+- [ ] WebSocket for streaming responses
+
+**Deliverable:** Users can ask questions and get answers from Claude
+
+---
+
+### **Phase 2: Knowledge Base (Week 3-4)**
+**Goal:** AI can use your documentation to answer questions
+
+- [ ] Vector database (Qdrant) integration
+- [ ] Document indexer (markdown, txt, pdf)
+- [ ] Volume-based KB support
+- [ ] Chunking & embedding service
+- [ ] Semantic search implementation
+- [ ] Context injection into prompts
+- [ ] Show sources in chat UI
+
+**Deliverable:** AI answers questions using your knowledge base
+
+---
+
+### **Phase 3: Authentication (Week 5)**
+**Goal:** Secure access with Microsoft Entra ID
+
+- [ ] Entra ID OAuth2 flow
+- [ ] User session management
+- [ ] JWT token handling
+- [ ] User database schema
+- [ ] Login/logout UI
+- [ ] Protected API routes
+
+**Deliverable:** Users must login with Microsoft to access DevDen
+
+---
+
+### **Phase 4: Admin Dashboard (Week 6)**
+**Goal:** You can manage everything via UI
+
+- [ ] Admin authentication & authorization
+- [ ] KB management UI (add/remove/toggle)
+- [ ] Provider settings UI
+- [ ] User management UI
+- [ ] Usage statistics dashboard
+- [ ] Cost tracking
+
+**Deliverable:** Complete admin control panel
+
+---
+
+### **Phase 5: Multi-Provider (Week 7)**
+**Goal:** Support multiple AI providers
+
+- [ ] Provider abstraction layer
+- [ ] OpenAI integration
+- [ ] OpenRouter integration
+- [ ] Gemini integration
+- [ ] Provider selection logic
+- [ ] Fallback mechanism
+
+**Deliverable:** Users can use different AI providers
+
+---
+
+### **Phase 6: Git Integration (Week 8)**
+**Goal:** Auto-sync knowledge bases from Git
+
+- [ ] Git clone/pull service
+- [ ] Webhook support for auto-sync
+- [ ] Branch selection
+- [ ] Scheduled sync jobs
+- [ ] Git KB UI in admin panel
+
+**Deliverable:** Knowledge bases auto-update from Git repos
+
+---
+
+### **Phase 7: Polish & Features (Week 9-10)**
+**Goal:** Production-ready platform
+
+- [ ] Conversation history UI
+- [ ] Export conversations (markdown, JSON)
+- [ ] Search in chat history
+- [ ] Mobile responsive design
+- [ ] Error handling & logging
+- [ ] Rate limiting
+- [ ] Health checks & monitoring
+- [ ] Documentation
+
+**Deliverable:** Production-ready DevDen
+
+---
+
+## 💰 **Cost Estimation**
+
+### **AI Provider Costs (example)**
+Based on 1000 questions per month:
+
+```
+Scenario: Average question uses 500 input tokens + 1000 output tokens
+
+Claude Sonnet 4:
+- Input: 1000 × 500 = 500k tokens
+- Output: 1000 × 1000 = 1M tokens
+- Cost: ~$4.50/month
+
+OpenAI GPT-4 Turbo:
+- Similar usage
+- Cost: ~$15/month
+
+With KB context (adds ~2k tokens per question):
+- Claude: ~$12/month
+- OpenAI: ~$35/month
+```
+
+**Hosting Costs:**
+- VPS (4GB RAM, 2 CPU): ~$20/month
+- Or self-host: electricity costs only
+
+**Total: ~$35-55/month for 1000 questions**
+
+---
+
+## 🦊 **Visual Identity**
+
+### **Logo Concept**
+A cozy fox in a den/burrow with a chat bubble, surrounded by documents/books (knowledge bases). Warm, friendly, accessible.
+
+### **Color Themes**
+
+**Cappuccino (default for users)**
+```
+Background: #f5f1ed (warm cream)
+Text: #2d2419 (dark brown)
+Accent: #8b4513 (saddle brown)
+Bubble (user): #d4a574 (tan)
+Bubble (AI): #e8d5b7 (light tan)
+```
+
+**Terminal (for admin)**
+```
+Background: #1a1410 (deep brown)
+Text: #e8d5b7 (cream)
+Accent: #8b4513 (saddle brown)
+Highlight: #d4a574 (tan)
+```
+
+---
+
+## 🎨 **UI Mockups**
+
+### **User Chat Interface (Clean Style)**
+```
+┌─────────────────────────────────────────────┐
+│  🦊 DevDen                        John Doe  │
+├─────────────────────────────────────────────┤
+│                                             │
+│  ┌─────────────────────────────────────┐   │
+│  │ What is the vacation policy?        │   │
+│  └─────────────────────────────────────┘   │
+│                          12:34 PM           │
+│                                             │
+│   ┌─────────────────────────────────────┐  │
+│   │ Based on the employee handbook,     │  │
+│   │ you are entitled to 25 vacation     │  │
+│   │ days per year.                      │  │
+│   │                                     │  │
+│   │ 📎 HR Handbook 2024, page 12       │  │
+│   └─────────────────────────────────────┘  │
+│  12:34 PM                                   │
+│                                             │
+│  ┌─────────────────────────────────────┐   │
+│  │ How do I request vacation?          │   │
+│  └─────────────────────────────────────┘   │
+│                          12:35 PM           │
+│                                             │
+│   ┌─────────────────────────────────────┐  │
+│   │ You can request vacation through... │  │
+│   └─────────────────────────────────────┘  │
+│                                             │
+├─────────────────────────────────────────────┤
+│  Type your question...               [Send]│
+└─────────────────────────────────────────────┘
+```
+
+### **Admin Dashboard (Terminal Style)**
+```
+╔═══════════════════════════════════════════════╗
+║ 🦊 DevDen Admin                      [Logout] ║
+╠═══════════════════════════════════════════════╣
+║                                               ║
+║ admin@devden:~$ dashboard                     ║
+║                                               ║
+║ ┌─ System Status ─────────────────────────┐  ║
+║ │ ✓ Backend API      Running              │  ║
+║ │ ✓ Database         Connected            │  ║
+║ │ ✓ Vector DB        Healthy              │  ║
+║ │ ✓ Claude API       Active               │  ║
+║ └─────────────────────────────────────────┘  ║
+║                                               ║
+║ ┌─ Usage Today ───────────────────────────┐  ║
+║ │ Questions: 127                          │  ║
+║ │ Active Users: 24                        │  ║
+║ │ Avg Response Time: 2.3s                 │  ║
+║ │ Cost: $1.45                             │  ║
+║ └─────────────────────────────────────────┘  ║
+║                                               ║
+║ admin@devden:~$ kb list                       ║
+║                                               ║
+║ ✓ hr_handbook        [Git]  1,234 docs       ║
+║ ✓ it_support         [Vol]    567 docs       ║
+║ ○ product_catalog    [Git]  Disabled         ║
+║                                               ║
+║ admin@devden:~$ █                             ║
+╚═══════════════════════════════════════════════╝
+```
+
+---
+
+## 🚀 **Quick Start Guide (Future)**
+
+```bash
+# Clone repository
+git clone https://github.com/mats/devden
+cd devden
+
+# Configure environment
+cp .env.example .env
+# Edit .env with your:
+# - API keys (Claude, OpenAI, etc.)
+# - Entra ID credentials
+# - Database passwords
+
+# Configure knowledge bases
+cp config.example.yaml config.yaml
+# Edit config.yaml with your KB sources
+
+# Start with Docker Compose
+docker-compose up -d
+
+# Initialize database
+docker-compose exec devden-web python manage.py init-db
+
+# Create admin user
+docker-compose exec devden-web python manage.py create-admin \
+  --email mats@company.com
+
+# Access DevDen
+# Users: http://localhost:3000
+# Admin: http://localhost:3000/admin
+
+# View logs
+docker-compose logs -f devden-web
+```
+
+---
+
+## 🔒 **Security Considerations**
+
+### **Data Protection**
+- All API keys encrypted at rest
+- User conversations encrypted in database
+- HTTPS only in production
+- Secure session management
+- No AI provider gets user identity
+
+### **Access Control**
+- Entra ID for authentication
+- Role-based access (user/admin)
+- Per-user rate limiting
+- Audit logs for all admin actions
+- IP whitelisting option
+
+### **Privacy**
+- Conversations stored locally (not with AI providers)
+- Users can delete their history
+- Admin can export/delete user data (GDPR compliance)
+- No telemetry or tracking
+- Knowledge base never leaves your server
+
+---

script.js

@@ -0,0 +1,97 @@
+const welcomeScreen = document.getElementById("welcomeScreen");
+const chatScreen = document.getElementById("chatScreen");
+const chatMessages = document.getElementById("chatMessages");
+const welcomeInput = document.getElementById("welcomeInput");
+const chatInput = document.getElementById("chatInput");
+
+let isInChat = false;
+
+function switchToChat() {
+  welcomeScreen.classList.add("hidden");
+  chatScreen.classList.remove("hidden");
+  chatInput.focus();
+  isInChat = true;
+}
+
+function addMessage(text, type = "user") {
+  const msg = document.createElement("div");
+  msg.className = `message ${type}`;
+  msg.innerHTML = `<div class="message-text">${escapeHtml(text)}</div>`;
+  chatMessages.appendChild(msg);
+  scrollToBottom();
+}
+
+function showTyping() {
+  const typing = document.createElement("div");
+  typing.className = "message assistant";
+  typing.id = "typing";
+  typing.innerHTML = `
+        <div class="message-text">
+            <div class="typing">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+        </div>
+    `;
+  chatMessages.appendChild(typing);
+  scrollToBottom();
+}
+
+function hideTyping() {
+  const typing = document.getElementById("typing");
+  if (typing) typing.remove();
+}
+
+function scrollToBottom() {
+  chatMessages.scrollTop = chatMessages.scrollHeight;
+}
+
+function escapeHtml(text) {
+  const div = document.createElement("div");
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+function sendMessage(text) {
+  if (!text.trim()) return;
+
+  if (!isInChat) {
+    switchToChat();
+  }
+
+  addMessage(text, "user");
+  chatInput.value = "";
+  chatInput.disabled = true;
+
+  showTyping();
+
+  setTimeout(() => {
+    hideTyping();
+    addMessage(
+      "I'm DevDen - your AI assistant. Soon I'll be connected to your knowledge base!",
+      "assistant",
+    );
+    chatInput.disabled = false;
+    chatInput.focus();
+  }, 1000);
+}
+
+// Welcome screen input handler
+welcomeInput.addEventListener("keydown", (e) => {
+  if (e.key === "Enter") {
+    e.preventDefault();
+    const text = welcomeInput.value.trim();
+    if (text) {
+      sendMessage(text);
+    }
+  }
+});
+
+// Chat input handler
+chatInput.addEventListener("keydown", (e) => {
+  if (e.key === "Enter") {
+    e.preventDefault();
+    sendMessage(chatInput.value);
+  }
+});

style.css

@@ -0,0 +1,231 @@
+@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap");
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Catppuccin Mocha Palette */
+:root {
+    --ctp-rosewater: #f5e0dc;
+    --ctp-flamingo: #f2cdcd;
+    --ctp-pink: #f5c2e7;
+    --ctp-mauve: #cba6f7;
+    --ctp-red: #f38ba8;
+    --ctp-maroon: #eba0ac;
+    --ctp-peach: #fab387;
+    --ctp-yellow: #f9e2af;
+    --ctp-green: #a6e3a1;
+    --ctp-teal: #94e2d5;
+    --ctp-sky: #89dceb;
+    --ctp-sapphire: #74c7ec;
+    --ctp-blue: #89b4fa;
+    --ctp-lavender: #b4befe;
+    --ctp-text: #cdd6f4;
+    --ctp-subtext1: #bac2de;
+    --ctp-subtext0: #a6adc8;
+    --ctp-overlay2: #9399b2;
+    --ctp-overlay1: #7f849c;
+    --ctp-overlay0: #6c7086;
+    --ctp-surface2: #585b70;
+    --ctp-surface1: #45475a;
+    --ctp-surface0: #313244;
+    --ctp-base: #1e1e2e;
+    --ctp-mantle: #181825;
+    --ctp-crust: #11111b;
+}
+
+body {
+    font-family: "JetBrains Mono", monospace;
+    background: var(--ctp-base);
+    color: var(--ctp-text);
+    height: 100vh;
+    overflow: hidden;
+    image-rendering: pixelated;
+}
+
+.hidden {
+    display: none !important;
+}
+
+/* ==================== WELCOME SCREEN ==================== */
+.welcome-screen {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 32px;
+}
+
+.logo {
+    font-size: 48px;
+    font-weight: 700;
+    letter-spacing: 4px;
+    text-transform: uppercase;
+    user-select: none;
+    display: flex;
+    gap: 4px;
+}
+
+.logo-dev {
+    color: var(--ctp-overlay1);
+}
+
+.logo-den {
+    color: var(--ctp-mauve);
+}
+
+/* ==================== INPUT STYLES ==================== */
+.input-container {
+    width: 100%;
+    max-width: 560px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 0 16px;
+}
+
+.input-box {
+    display: flex;
+    align-items: center;
+    background: var(--ctp-surface0);
+    border: 2px solid var(--ctp-surface1);
+    padding: 12px 16px;
+    transition: border-color 0.15s ease;
+}
+
+.input-box:focus-within {
+    border-color: var(--ctp-mauve);
+}
+
+input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--ctp-text);
+    font-size: 14px;
+    font-family: inherit;
+}
+
+input::placeholder {
+    color: var(--ctp-overlay0);
+}
+
+.hint {
+    text-align: center;
+    font-size: 11px;
+    color: var(--ctp-overlay0);
+}
+
+kbd {
+    background: var(--ctp-surface1);
+    color: var(--ctp-subtext1);
+    padding: 2px 6px;
+    font-size: 10px;
+    font-family: inherit;
+}
+
+/* ==================== CHAT SCREEN ==================== */
+.chat-screen {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: var(--ctp-base);
+}
+
+.chat-messages {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px 0;
+}
+
+.chat-messages::-webkit-scrollbar {
+    width: 8px;
+}
+
+.chat-messages::-webkit-scrollbar-track {
+    background: var(--ctp-mantle);
+}
+
+.chat-messages::-webkit-scrollbar-thumb {
+    background: var(--ctp-surface1);
+}
+
+.chat-messages::-webkit-scrollbar-thumb:hover {
+    background: var(--ctp-surface2);
+}
+
+/* ==================== MESSAGES ==================== */
+.message {
+    font-size: 13px;
+    line-height: 1.6;
+    padding: 8px 16px;
+    border-left: 3px solid transparent;
+    opacity: 0;
+    animation: fadeIn 0.2s ease forwards;
+}
+
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+    }
+}
+
+.message.user {
+    border-left-color: var(--ctp-sapphire);
+    background: var(--ctp-mantle);
+}
+
+.message.user .message-text {
+    color: var(--ctp-text);
+}
+
+.message.assistant {
+    border-left-color: var(--ctp-mauve);
+}
+
+.message.assistant .message-text {
+    color: var(--ctp-subtext1);
+}
+
+/* ==================== CHAT INPUT ==================== */
+.chat-input {
+    padding: 16px;
+    max-width: 100%;
+    background: var(--ctp-mantle);
+    border-top: 2px solid var(--ctp-surface0);
+}
+
+/* ==================== TYPING INDICATOR ==================== */
+.typing {
+    display: inline-flex;
+    gap: 4px;
+}
+
+.typing span {
+    width: 6px;
+    height: 6px;
+    background: var(--ctp-mauve);
+    animation: blink 1s infinite step-start;
+}
+
+.typing span:nth-child(2) {
+    animation-delay: 0.33s;
+}
+
+.typing span:nth-child(3) {
+    animation-delay: 0.66s;
+}
+
+@keyframes blink {
+    0%,
+    100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.2;
+    }
+}