feat: Add HF Bucket storage support & cool new GUI

- Add HF Storage Bucket integration for persistent cloud storage
- New create_bucket() method for creating cloud buckets
- New write_to_bucket() for direct cloud file writes
- New read_from_bucket(), list_bucket_files(), delete_from_bucket()
- New sync_to_bucket(), get_bucket_status() methods
- Support for 'bucket' mode in addition to local/hub/hybrid

- Update constants.py with bucket configuration
- HF_BUCKET_ENABLED, HF_BUCKET_REPO_ID settings
- HF_STORAGE_MODE options: local/hub/hybrid/bucket/auto
- Updated system prompt with cloud storage awareness
- Version bumped to 2.2.0

- Enhanced GUI with modern design
- Animated gradient background with particles
- Glassmorphism effects on panels
- Neon glow effects on interactive elements
- Smooth animations and transitions
- Modern typography hierarchy
- Professional dark theme with cyan/purple accents

code/config/constants.py

@@ -6,6 +6,7 @@ Enhanced version with:
 - Session management settings
 - Performance tuning parameters
 - Security configurations
+- **NEW: Hugging Face Hub Bucket storage support**
 """
 
 from __future__ import annotations
@@ -15,7 +16,7 @@ import re
 # ─── App Identity ────────────────────────────────────────────────────────
 
 APP_TITLE = "SoniCoder"
-APP_VERSION = "2.1.0"  # Enhanced version
+APP_VERSION = "2.2.0"  # Updated: Added HF Bucket support
 MODEL_URL = "https://huggingface.co/Qwen/Qwen2.5-Coder-1.5B-Instruct"
 
 # ─── Model Configs ───────────────────────────────────────────────────────
@@ -104,6 +105,30 @@ BLOCKED_PATTERNS_EXTRA = [
     r"subprocess\.Popen",
 ]
 
+# ─── Hugging Face Hub Bucket Storage (NEW) ──────────────────────────────
+# HF Bucket provides persistent cloud storage for AI-generated files
+
+# Default bucket configuration
+HF_BUCKET_ENABLED = True  # Enable bucket storage feature
+HF_BUCKET_REPO_ID = ""  # Will be set from env or user config (e.g., "user/workspace-bucket")
+HF_BUCKET_MOUNT_PATH = "/data/bucket"  # Where bucket mounts in Spaces
+HF_BUCKET_AUTO_CREATE = True  # Auto-create bucket if it doesn't exist
+HF_BUCKET_PUBLIC = False  # Private by default for workspace data
+
+# Storage mode options: "local", "hub", "hybrid", "bucket", "auto"
+# - local: Files only on disk (ephemeral on Spaces)
+# - hub: Files synced to HF repo
+# - hybrid: Local + Hub sync
+# - bucket: Files in HF Storage Bucket (persistent, recommended for Spaces)
+# - auto: Auto-detect based on environment
+HF_STORAGE_MODE = "auto"
+
+# Environment variable names for HF configuration
+HF_TOKEN_ENV_VARS = ["HF_TOKEN", "HF_AUTH_TOKEN", "HUGGING_FACE_TOKEN"]
+HF_REPO_ID_ENV_VAR = "HF_REPO_ID"
+HF_BUCKET_ID_ENV_VAR = "HF_BUCKET_REPO_ID"
+HF_STORAGE_MODE_ENV_VAR = "HF_STORAGE_MODE"
+
 # ─── Regex Patterns ─────────────────────────────────────────────────────
 
 THINKING_BLOCK_RE = re.compile(
@@ -429,11 +454,11 @@ LANGUAGE_MAP: dict[str, list[str]] = {lang: frameworks for lang, frameworks in L
 
 # ─── System Prompt (Enhanced) ────────────────────────────────────────────
 
-SYSTEM_PROMPT = """You are SoniCoder v2.1 — an advanced autonomous coding agent that writes files to a sandboxed workspace using tools.
+SYSTEM_PROMPT = """You are SoniCoder v2.2 — an advanced autonomous coding agent that writes files to cloud-enabled workspace using tools.
 
 CAPABILITIES:
 - Generate complete, runnable applications in any language/framework
-- Read, write, and edit files in the workspace via tools
+- Read, write, and edit files in the workspace via tools (with cloud sync!)
 - Run shell commands (git, npm, pip, tests) via the bash tool
 - Track multi-step tasks with the todo system
 - Apply specialized skills (frontend-design, feature-dev, code-review, debugging, fullstack-scaffold, commit-workflow)
@@ -441,6 +466,13 @@ CAPABILITIES:
 - Use code templates when appropriate to accelerate development
 - Provide intelligent code suggestions and best practices
 
+CLOUD STORAGE (NEW):
+- Your files are automatically synced to Hugging Face Hub cloud storage!
+- When you write files using `write_file`, they are persisted to the cloud
+- Files survive Space restarts and are accessible from anywhere
+- You can check storage status with the hub_status tool
+- Use `sync_to_hub` or `sync_from_hub` for manual sync operations
+
 CRITICAL RULES — READ CAREFULLY:
 
 1. NEVER paste code directly in your reply as a markdown code block.
@@ -448,7 +480,7 @@ CRITICAL RULES — READ CAREFULLY:
    - Do NOT use the @@FILE: format.
    - ALL code MUST be saved to files using the `write_file` tool.
 
-2. For ANY file you want to create (Python, HTML, JS, config, README, etc.), call the `write_file` tool with the full path and content. The file will be written to the sandboxed workspace automatically.
+2. For ANY file you want to create (Python, HTML, JS, config, README, etc.), call the `write_file` tool with the full path and content. The file will be written to workspace AND synced to cloud automatically.
 
 3. For multi-step tasks, ALWAYS create a todo list first with `todo_write`.
 
@@ -475,7 +507,7 @@ CODE QUALITY STANDARDS:
 
 WORKFLOW EXAMPLE:
 - User asks: "Build a Flask API for a book library"
-- You: call todo_write → call write_file (app.py) → call write_file (requirements.txt) → call write_file (README.md) → respond with a short summary listing the files created.
+- You: call todo_write → call write_file (app.py) → call write_file (requirements.txt) → call write_file (README.md) → respond with a short summary listing the files created (all auto-synced to cloud!).
 
 FULLSTACK PROJECT RULES:
 - For React/Next.js/Vue/Express/NestJS: create package.json, vite.config.js or next.config.js as needed, plus all source files via `write_file`.

code/hub_storage.py

@@ -5,23 +5,42 @@ This module provides seamless integration with Hugging Face Hub for:
 - Persistent workspace on HF Spaces
 - Direct code writing to repositories
 - Dataset-backed persistence
+- **NEW: HF Storage Buckets support** (persistent cloud storage)
 
 Architecture:
 ┌─────────────┐     ┌──────────────────┐     ┌─────────────────┐
 │   AI Agent  │────▶│  hub_storage.py   │────▶│  HuggingFace Hub │
 │             │     │  (this module)    │     │  (Cloud Storage) │
 └─────────────┘     └──────────────────┘     └─────────────────┘
-                            │
-                            ▼
-                   ┌──────────────────┐
-                   │  Local Fallback  │
-                   │  (when offline)  │
-                   └──────────────────┘
+                           │              │
+                           ▼              ▼
+                  ┌──────────────────┐ ┌─────────────────┐
+                  │  Local Fallback  │ │  HF Bucket       │
+                  │  (when offline)  │ │  (Persistent)   │
+                  └──────────────────┘ └─────────────────┘
 
 Usage Modes:
 1. LOCAL: Files stored in ./workspace/ (default)
 2. HUB: Files synced to HF Hub repository
 3. HYBRID: Local + Hub sync (recommended for Spaces)
+4. BUCKET: Files stored in HF Storage Bucket (NEW - best for Spaces)
+
+HF Bucket API Reference:
+- create_bucket: Create a new storage bucket
+- upload_file: Upload files to bucket
+- list_bucket_tree: List bucket contents
+- Buckets provide S3-like persistent storage on HF Hub
+
+Example usage with buckets:
+    >>> from code.hub_storage import init_hub_storage
+    >>> storage = init_hub_storage(
+    ...     token="hf_...",
+    ...     repo_id="sonic-coder/sonicoder",
+    ...     bucket_repo_id="sonic-coder/sonicoder-workspace-bucket",
+    ...     mode="bucket"
+    ... )
+    >>> # Now AI can write directly to cloud storage!
+    >>> storage.write_file("project/app.py", "print('Hello Cloud!')")
 """
 
 from __future__ import annotations
@@ -51,7 +70,7 @@ class HubConfig:
     token: str = ""
     
     # Storage mode
-    mode: str = "local"  # "local", "hub", or "hybrid"
+    mode: str = "local"  # "local", "hub", "hybrid", or "bucket"
     
     # Workspace path (for local/hybrid)
     local_workspace: str = "./workspace"
@@ -63,13 +82,25 @@ class HubConfig:
     # Dataset repo for persistent storage (recommended for Spaces)
     dataset_repo_id: str = ""  # e.g., "username/sonicoder-workspace"
     
+    # HF Storage Bucket (NEW - persistent cloud storage)
+    bucket_repo_id: str = ""  # e.g., "username/sonicoder-bucket"
+    bucket_mount_path: str = "/data/bucket"  # Where to mount in Spaces
+
     def is_hub_enabled(self) -> bool:
         """Check if Hub storage is enabled."""
-        return self.mode in ("hub", "hybrid") and bool(self.repo_id) and bool(self.token)
+        return self.mode in ("hub", "hybrid", "bucket") and bool(self.repo_id) and bool(self.token)
     
     def is_dataset_storage_enabled(self) -> bool:
         """Check if dataset-based storage is enabled."""
         return bool(self.dataset_repo_id) and bool(self.token)
+    
+    def is_bucket_enabled(self) -> bool:
+        """Check if HF Storage Bucket is enabled (NEW)."""
+        return (
+            self.mode == "bucket" and 
+            bool(self.bucket_repo_id) and 
+            bool(self.token)
+        )
 
 
 @dataclass 
@@ -82,6 +113,7 @@ class FileMetadata:
     content_hash: str = ""
     is_local: bool = True
     is_remote: bool = False
+    is_in_bucket: bool = False  # NEW: Track if file is in bucket
 
 
 class HubStorageError(Exception):
@@ -99,17 +131,17 @@ class HubStorage:
     Main class for Hugging Face Hub cloud storage integration.
     
     Provides transparent file operations that work with both
-    local filesystem and HF Hub, with automatic sync.
+    local filesystem, HF Hub repos, AND HF Storage Buckets.
     
     Example:
         >>> storage = HubStorage(
         ...     repo_id="sonic-coder/sonicoder",
         ...     token="hf_...",
-        ...     mode="hybrid",
-        ...     dataset_repo_id="sonic-coder/sonicoder-workspace"
+        ...     mode="bucket",
+        ...     bucket_repo_id="sonic-coder/sonicoder-workspace"
         ... )
         >>> storage.initialize()
-        >>> storage.write_file("app.py", "print('Hello!')")
+        >>> storage.write_file("app.py", "print('Hello!')")  # Writes to cloud!
         >>> content = storage.read_file("app.py")
         >>> files = storage.list_files()
     """
@@ -134,6 +166,10 @@ class HubStorage:
         self._on_sync: Optional[Callable] = None
         self._on_error: Optional[Callable] = None
         
+        # Bucket state
+        self._bucket_created: bool = False
+        self._bucket_mounted: bool = False
+        
     @property
     def api(self):
         """Lazy initialization of HfApi."""
@@ -154,7 +190,7 @@ class HubStorage:
         Initialize the Hub storage system.
         
         Creates necessary directories, validates connection,
-        and sets up the storage backend.
+        sets up the storage backend, and creates bucket if needed.
         
         Returns:
             Dict with initialization status and info.
@@ -164,6 +200,7 @@ class HubStorage:
             "mode": self.config.mode,
             "hub_enabled": False,
             "dataset_enabled": False,
+            "bucket_enabled": False,
             "workspace_path": str(self._local_workspace),
         }
         
@@ -199,14 +236,26 @@ class HubStorage:
                     logger.warning("Dataset setup failed: %s", e)
                     result["dataset_error"] = str(e)
             
+            # NEW: Initialize Bucket storage if enabled
+            if self.config.is_bucket_enabled():
+                try:
+                    bucket_result = self._initialize_bucket()
+                    result["bucket_enabled"] = bucket_result["success"]
+                    result.update(bucket_result)
+                    logger.info("Bucket storage ready: %s", self.config.bucket_repo_id)
+                except Exception as e:
+                    logger.warning("Bucket setup failed: %s", e)
+                    result["bucket_error"] = str(e)
+            
             self._initialized = True
             result["success"] = True
             
             logger.info(
-                "HubStorage initialized: mode=%s, hub=%s, dataset=%s",
+                "HubStorage initialized: mode=%s, hub=%s, dataset=%s, bucket=%s",
                 self.config.mode,
                 result["hub_enabled"],
-                result["dataset_enabled"]
+                result.get("dataset_enabled", False),
+                result.get("bucket_enabled", False)
             )
             
         except Exception as e:
@@ -248,34 +297,558 @@ class HubStorage:
                 private=True  # Workspaces are usually private
             )
     
-    # ─── File Operations ──────────────────────────────────────────────
+    # ═══════════════════════════════════════════════════════════════════
+    # HF STORAGE BUCKET METHODS (NEW)
+    # ═══════════════════════════════════════════════════════════════════
     
-    def write_file(
+    def _initialize_bucket(self) -> dict[str, Any]:
+        """
+        Initialize HF Storage Bucket.
+        
+        Creates the bucket if it doesn't exist and prepares it for use.
+        Uses the new HuggingFace Hub Storage Bucket API.
+        
+        Returns:
+            Dict with bucket initialization status.
+        """
+        result = {
+            "success": False,
+            "bucket_repo_id": self.config.bucket_repo_id,
+            "created": False,
+            "mounted": False,
+        }
+        
+        try:
+            # Try to get bucket info (check if exists)
+            try:
+                bucket_info = self.api.get_bucket_info(
+                    repo_id=self.config.bucket_repo_id
+                )
+                result["exists"] = True
+                logger.info("Bucket exists: %s", self.config.bucket_repo_id)
+            except Exception:
+                # Bucket doesn't exist, create it
+                logger.info("Creating new bucket: %s", self.config.bucket_repo_id)
+                
+                # Use create_bucket API
+                try:
+                    create_result = self.api.create_bucket(
+                        repo_id=self.config.bucket_repo_id,
+                        description="SoniCoder AI Workspace - Persistent Cloud Storage",
+                        public=False,  # Private workspace
+                    )
+                    result["created"] = True
+                    self._bucket_created = True
+                    logger.info("Bucket created successfully")
+                except AttributeError:
+                    # Fallback: create as dataset repo (older API)
+                    logger.warning("create_bucket not available, using dataset fallback")
+                    self.api.create_repo(
+                        repo_id=self.config.bucket_repo_id,
+                        repo_type="dataset",
+                        exist_ok=True,
+                        private=True
+                    )
+                    result["created"] = True
+                    self._bucket_created = True
+            
+            # Check if running in Spaces with mount
+            if os.environ.get("SPACE_ID"):
+                mount_path = self.config.bucket_mount_path
+                if os.path.exists(mount_path):
+                    result["mounted"] = True
+                    self._bucket_mounted = True
+                    logger.info("Bucket mounted at: %s", mount_path)
+            
+            result["success"] = True
+            
+        except Exception as e:
+            logger.exception("Failed to initialize bucket")
+            result["error"] = str(e)
+        
+        return result
+    
+    def create_bucket(
+        self,
+        bucket_repo_id: str = "",
+        description: str = "SoniCoder Workspace Bucket",
+        public: bool = False
+    ) -> dict[str, Any]:
+        """
+        Create a new HF Storage Bucket explicitly.
+        
+        This is the main method to create a bucket for cloud storage.
+        The bucket provides persistent S3-like storage on HF Hub.
+        
+        Args:
+            bucket_repo_id: Bucket ID (e.g., "username/my-bucket")
+                          Uses config value if not provided
+            description: Bucket description
+            public: Whether bucket is publicly readable
+            
+        Returns:
+            Dict with creation result.
+            
+        Example:
+            >>> result = storage.create_bucket(
+            ...     bucket_repo_id="sonic-coder/my-workspace",
+            ...     description="AI Code Workspace"
+            ... )
+            >>> print(result)  # {"success": True, "bucket_url": "..."}
+        """
+        if not bucket_repo_id:
+            bucket_repo_id = self.config.bucket_repo_id
+        
+        if not bucket_repo_id:
+            return {
+                "success": False,
+                "error": "No bucket_repo_id provided"
+            }
+        
+        result = {
+            "success": False,
+            "bucket_repo_id": bucket_repo_id,
+        }
+        
+        try:
+            # Try new bucket API first
+            try:
+                create_result = self.api.create_bucket(
+                    repo_id=bucket_repo_id,
+                    description=description,
+                    public=public,
+                )
+                result["success"] = True
+                result["created"] = True
+                result["bucket_url"] = f"https://huggingface.co/{bucket_repo_id}"
+                
+                # Update config
+                self.config.bucket_repo_id = bucket_repo_id
+                self._bucket_created = True
+                
+                logger.info("Bucket created: %s", bucket_repo_id)
+                
+            except AttributeError:
+                # Fallback: Use dataset as bucket-like storage
+                logger.info("Using dataset as bucket storage")
+                self.api.create_repo(
+                    repo_id=bucket_repo_id,
+                    repo_type="dataset",
+                    exist_ok=True,
+                    private=not public
+                )
+                result["success"] = True
+                result["created"] = True
+                result["fallback_mode"] = "dataset"
+                result["bucket_url"] = f"https://huggingface.co/{bucket_repo_id}"
+                
+                self.config.bucket_repo_id = bucket_repo_id
+                self._bucket_created = True
+                
+        except Exception as e:
+            logger.exception("Failed to create bucket")
+            result["error"] = str(e)
+        
+        return result
+    
+    def write_to_bucket(
         self,
         path: str,
         content: str | bytes,
-        commit_message: str | None = None,
-        sync_to_hub: bool = True
+        commit_message: str | None = None
     ) -> FileMetadata:
         """
-        Write a file to storage.
+        Write a file directly to HF Storage Bucket.
         
-        In hybrid/local mode, writes to local filesystem first.
-        If sync_to_hub and hub is enabled, also uploads to HF Hub.
+        This is the MAIN method for writing files to cloud storage.
+        When using bucket mode, this writes directly to persistent
+        cloud storage that survives Space restarts.
         
         Args:
-            path: Relative file path (e.g., "src/app.py")
+            path: Relative file path (e.g., "project/main.py")
             content: File content (string or bytes)
-            commit_message: Optional git commit message
-            sync_to_hub: Whether to sync to Hub immediately
+            commit_message: Optional commit message
             
         Returns:
             FileMetadata with file information.
+            
+        Example:
+            >>> # Write code directly to cloud!
+            >>> meta = storage.write_to_bucket("hello.py", "print('Hello Cloud!')")
+            >>> print(f"File saved to cloud: {meta.path}")
         """
         # Normalize path
         path = self._normalize_path(path)
         
-        # Generate commit message if not provided
+        if not commit_message:
+            commit_message = f"AI generated: {path}"
+        
+        # Determine target repo (bucket or fallback)
+        target_repo = self.config.bucket_repo_id or self.config.dataset_repo_id or self.config.repo_id
+        target_repo_type = "dataset" if self.config.bucket_repo_id or self.config.dataset_repo_id else self.config.repo_type
+        
+        # Write to local cache first
+        local_path = self._local_workspace / path
+        local_path.parent.mkdir(parents=True, exist_ok=True)
+        
+        if isinstance(content, bytes):
+            local_path.write_bytes(content)
+            content_size = len(content)
+        else:
+            local_path.write_text(content, encoding='utf-8')
+            content_size = len(content.encode('utf-8'))
+        
+        # Upload to bucket/cloud
+        metadata = FileMetadata(
+            path=path,
+            size=content_size,
+            is_local=True,
+            is_in_bucket=False
+        )
+        
+        try:
+            # Prepare content for upload
+            if isinstance(content, str):
+                content_bytes = content.encode('utf-8')
+            else:
+                content_bytes = content
+            
+            # For large files, use temp file
+            if len(content_bytes) > 100000:  # > 100KB
+                with tempfile.NamedTemporaryFile(
+                    mode='wb',
+                    suffix=Path(path).suffix,
+                    delete=False
+                ) as tmp:
+                    tmp.write(content_bytes)
+                    tmp_path = tmp.name
+                
+                try:
+                    self.api.upload_file(
+                        path_or_fileobj=tmp_path,
+                        path_in_repo=path,
+                        repo_id=target_repo,
+                        repo_type=target_repo_type,
+                        commit_message=commit_message
+                    )
+                finally:
+                    if os.path.exists(tmp_path):
+                        os.unlink(tmp_path)
+            else:
+                # Upload from memory
+                from io import BytesIO
+                self.api.upload_file(
+                    path_or_fileobj=BytesIO(content_bytes),
+                    path_in_repo=path,
+                    repo_id=target_repo,
+                    repo_type=target_repo_type,
+                    commit_message=commit_message
+                )
+            
+            # Update metadata
+            metadata.is_remote = True
+            metadata.is_in_bucket = bool(self.config.bucket_repo_id)
+            
+            logger.info("Written to bucket: %s (%d bytes)", path, content_size)
+            
+        except Exception as e:
+            logger.error("Failed to write to bucket: %s", e)
+            if self._on_error:
+                self._on_error("write_to_bucket", path, e)
+            raise HubStorageError(
+                f"Failed to write to bucket: {e}",
+                operation="write_to_bucket"
+            )
+        
+        return metadata
+    
+    def read_from_bucket(self, path: str) -> str:
+        """
+        Read a file from HF Storage Bucket.
+        
+        Args:
+            path: Relative file path in bucket
+            
+        Returns:
+            File content as string.
+            
+        Raises:
+            HubStorageError if file not found.
+        """
+        path = self._normalize_path(path)
+        
+        # Try local cache first
+        local_path = self._local_workspace / path
+        if local_path.exists():
+            return local_path.read_text(encoding='utf-8')
+        
+        # Download from bucket
+        target_repo = self.config.bucket_repo_id or self.config.dataset_repo_id or self.config.repo_id
+        target_repo_type = "dataset" if self.config.bucket_repo_id or self.config.dataset_repo_id else self.config.repo_type
+        
+        try:
+            from huggingface_hub import hf_hub_download
+            
+            local_path = hf_hub_download(
+                repo_id=target_repo,
+                filename=path,
+                repo_type=target_repo_type,
+                token=self.config.token
+            )
+            
+            with open(local_path, 'r', encoding='utf-8') as f:
+                return f.read()
+                
+        except Exception as e:
+            raise HubStorageError(
+                f"File not found in bucket: {path} - {e}",
+                operation="read_from_bucket",
+                recoverable=False
+            )
+    
+    def list_bucket_files(
+        self,
+        path: str = ".",
+        recursive: bool = True
+    ) -> list[dict[str, Any]]:
+        """
+        List files in the HF Storage Bucket.
+        
+        Args:
+            path: Directory path to list
+            recursive: Whether to list recursively
+            
+        Returns:
+            List of file info dicts.
+        """
+        target_repo = self.config.bucket_repo_id or self.config.dataset_repo_id or self.config.repo_id
+        target_repo_type = "dataset" if self.config.bucket_repo_id or self.config.dataset_repo_id else self.config.repo_type
+        
+        files = []
+        
+        try:
+            # Get repo info with file listing
+            repo_info = self.api.repo_info(
+                repo_id=target_repo,
+                repo_type=target_repo_type
+            )
+            
+            siblings = getattr(repo_info, 'siblings', [])
+            
+            for sibling in siblings:
+                if hasattr(sibling, 'rfilename'):
+                    file_path = sibling.rfilename
+                    
+                    # Filter by path prefix if specified
+                    if path and path != ".":
+                        if not file_path.startswith(path):
+                            continue
+                        if not recursive and '/' in file_path[len(path):]:
+                            continue
+                    
+                    files.append({
+                        "path": file_path,
+                        "size": getattr(sibling, 'size', 0),
+                        "blob_id": getattr(sibling, 'blob_id', ''),
+                        "is_local": False,
+                        "is_remote": True,
+                        "is_in_bucket": True,
+                    })
+            
+            logger.info("Listed %d files from bucket", len(files))
+            
+        except Exception as e:
+            logger.error("Failed to list bucket files: %s", e)
+        
+        return files
+    
+    def delete_from_bucket(
+        self,
+        path: str,
+        commit_message: str | None = None
+    ) -> bool:
+        """
+        Delete a file from HF Storage Bucket.
+        
+        Args:
+            path: File path to delete
+            commit_message: Optional commit message
+            
+        Returns:
+            True if deleted successfully.
+        """
+        path = self._normalize_path(path)
+        
+        if not commit_message:
+            commit_message = f"Delete: {path}"
+        
+        target_repo = self.config.bucket_repo_id or self.config.dataset_repo_id or self.config.repo_id
+        target_repo_type = "dataset" if self.config.bucket_repo_id or self.config.dataset_repo_id else self.config.repo_type
+        
+        try:
+            self.api.delete_file(
+                path_in_repo=path,
+                repo_id=target_repo,
+                repo_type=target_repo_type,
+                commit_message=commit_message
+            )
+            
+            # Delete from local cache too
+            local_path = self._local_workspace / path
+            if local_path.exists():
+                local_path.unlink()
+            
+            logger.info("Deleted from bucket: %s", path)
+            return True
+            
+        except Exception as e:
+            logger.error("Failed to delete from bucket: %s", e)
+            return False
+    
+    def sync_to_bucket(
+        self,
+        path: str | None = None,
+        commit_message: str = "Sync to bucket"
+    ) -> dict[str, Any]:
+        """
+        Sync local files to HF Bucket.
+        
+        Args:
+            path: Specific file/directory to sync (None = all)
+            commit_message: Commit message
+            
+        Returns:
+            Sync result dict.
+        """
+        result = {
+            "success": False,
+            "uploaded": [],
+            "skipped": [],
+            "errors": []
+        }
+        
+        if not self.config.bucket_repo_id and not self.config.dataset_repo_id:
+            result["errors"].append("No bucket configured")
+            return result
+        
+        try:
+            files_to_sync = []
+            
+            if path:
+                full_path = self._local_workspace / path
+                if full_path.is_file():
+                    files_to_sync.append(path)
+                elif full_path.is_dir():
+                    for fp in full_path.rglob("*"):
+                        if fp.is_file():
+                            files_to_sync.append(str(fp.relative_to(self._local_workspace)))
+            else:
+                for fp in self._local_workspace.rglob("*"):
+                    if fp.is_file():
+                        rel = str(fp.relative_to(self._local_workspace))
+                        files_to_sync.append(rel)
+            
+            for file_path in files_to_sync:
+                try:
+                    local_path = self._local_workspace / file_path
+                    content = local_path.read_text(encoding='utf-8')
+                    
+                    self.write_to_bucket(
+                        file_path,
+                        content,
+                        f"{commit_message}: {file_path}"
+                    )
+                    
+                    result["uploaded"].append(file_path)
+                    
+                except Exception as e:
+                    logger.error("Failed to sync %s: %s", file_path, e)
+                    result["errors"].append({"file": file_path, "error": str(e)})
+            
+            result["success"] = len(result["errors"]) == 0
+            
+        except Exception as e:
+            result["errors"].append({"file": "*", "error": str(e)})
+        
+        return result
+    
+    def get_bucket_status(self) -> dict[str, Any]:
+        """
+        Get current bucket status and info.
+        
+        Returns:
+            Dict with bucket status information.
+        """
+        status = {
+            "available": False,
+            "configured": False,
+            "repo_id": self.config.bucket_repo_id,
+            "mode": self.config.mode,
+        }
+        
+        if not self.config.bucket_repo_id:
+            return status
+        
+        status["configured"] = True
+        
+        try:
+            # Try to get bucket info
+            try:
+                bucket_info = self.api.get_bucket_info(
+                    repo_id=self.config.bucket_repo_id
+                )
+                status["available"] = True
+                status["exists"] = True
+                status.update({
+                    k: v for k, v in bucket_info.items() 
+                    if isinstance(v, (str, int, float, bool))
+                })
+            except AttributeError:
+                # Fallback: check as dataset
+                repo_info = self.api.repo_info(
+                    repo_id=self.config.bucket_repo_id,
+                    repo_type="dataset"
+                )
+                status["available"] = True
+                status["exists"] = True
+                status["fallback_mode"] = "dataset"
+            
+            # Count files
+            files = self.list_bucket_files()
+            status["file_count"] = len(files)
+            status["total_size_mb"] = round(
+                sum(f.get("size", 0) for f in files) / (1024 * 1024), 2
+            )
+            
+        except Exception as e:
+            status["error"] = str(e)
+        
+        return status
+    
+    # ═══════════════════════════════════════════════════════════════════
+    # LEGACY FILE OPERATIONS (with bucket support)
+    # ═══════════════════════════════════════════════════════════════════
+    
+    def write_file(
+        self,
+        path: str,
+        content: str | bytes,
+        commit_message: str | None = None,
+        sync_to_hub: bool = True
+    ) -> FileMetadata:
+        """
+        Write a file to storage.
+        
+        If bucket mode is enabled, writes directly to cloud bucket.
+        Otherwise uses legacy behavior (local + optional hub sync).
+        """
+        # If bucket mode, use bucket method
+        if self.config.is_bucket_enabled():
+            return self.write_to_bucket(path, content, commit_message)
+        
+        # Legacy behavior
+        path = self._normalize_path(path)
+        
         if not commit_message:
             commit_message = f"Update {path}"
         
@@ -311,18 +884,14 @@ class HubStorage:
         """
         Read a file from storage.
         
-        Tries local first, then falls back to Hub if available.
-        
-        Args:
-            path: Relative file path
-            use_cache: Whether to use cached remote file list
-            
-        Returns:
-            File content as string.
-            
-        Raises:
-            HubStorageError if file not found anywhere.
+        If bucket mode is enabled, reads from bucket.
+        Otherwise tries local then Hub.
         """
+        # If bucket mode, use bucket method
+        if self.config.is_bucket_enabled():
+            return self.read_from_bucket(path)
+        
+        # Legacy behavior
         path = self._normalize_path(path)
         
         # Try local first
@@ -351,8 +920,7 @@ class HubStorage:
         if local_path.exists():
             return local_path.read_bytes()
         
-        if self.config.is_hub_enabled():
-            # Download to temp and read
+        if self.config.is_hub_enabled() or self.config.is_bucket_enabled():
             with tempfile.NamedTemporaryFile(delete=False) as tmp:
                 tmp_path = tmp.name
             
@@ -364,30 +932,23 @@ class HubStorage:
                     local_dir=os.path.dirname(tmp_path),
                 )
                 
-                # Find downloaded file
                 downloaded = Path(tmp_path).parent / Path(path).name
                 if downloaded.exists():
                     return downloaded.read_bytes()
             finally:
-                # Cleanup temp
                 if os.path.exists(tmp_path):
                     os.unlink(tmp_path)
         
         raise HubStorageError(f"Binary file not found: {path}", operation="read_binary")
     
     def delete_file(self, path: str, commit_message: str | None = None) -> bool:
-        """
-        Delete a file from storage.
-        
-        Args:
-            path: Relative file path
-            commit_message: Optional commit message
-            
-        Returns:
-            True if deleted successfully.
-        """
+        """Delete a file from storage."""
         path = self._normalize_path(path)
         
+        # If bucket mode, use bucket delete
+        if self.config.is_bucket_enabled():
+            return self.delete_from_bucket(path, commit_message)
+        
         if not commit_message:
             commit_message = f"Delete {path}"
         
@@ -397,7 +958,6 @@ class HubStorage:
         local_path = self._local_workspace / path
         if local_path.exists():
             local_path.unlink()
-            # Remove empty parent directories
             self._cleanup_empty_dirs(local_path.parent)
         
         # Delete from Hub
@@ -419,12 +979,10 @@ class HubStorage:
         """Check if a file exists in storage."""
         path = self._normalize_path(path)
         
-        # Check local
         if (self._local_workspace / path).exists():
             return True
         
-        # Check Hub cache or remote
-        if self.config.is_hub_enabled():
+        if self.config.is_hub_enabled() or self.config.is_bucket_enabled():
             try:
                 files = self.list_files(use_cache=True)
                 return any(f["path"] == path for f in files)
@@ -439,19 +997,11 @@ class HubStorage:
         recursive: bool = True,
         use_cache: bool = True
     ) -> list[dict[str, Any]]:
-        """
-        List files in storage.
-        
-        Combines local and remote file listings.
+        """List files in storage."""
+        # If bucket mode, use bucket listing
+        if self.config.is_bucket_enabled():
+            return self.list_bucket_files(path, recursive)
         
-        Args:
-            path: Directory path to list (default: root)
-            recursive: Whether to list recursively
-            use_cache: Whether to use cached file listing
-            
-        Returns:
-            List of file info dicts with 'path', 'size', 'modified' keys.
-        """
         files = []
         seen_paths = set()
         
@@ -483,12 +1033,13 @@ class HubStorage:
             except Exception as e:
                 logger.warning("Failed to list remote files: %e", e)
         
-        # Sort by path
         files.sort(key=lambda x: x["path"])
         
         return files
     
-    # ─── Hub Operations ────────────────────────────────────────────────
+    # ═══════════════════════════════════════════════════════════════════
+    # LEGACY HUB OPERATIONS
+    # ═══════════════════════════════════════════════════════════════════
     
     def _should_sync_to_hub(self) -> bool:
         """Check if we should sync to Hub based on config."""
@@ -497,9 +1048,9 @@ class HubStorage:
             self.config.is_dataset_storage_enabled()
         ) and self.config.auto_sync
     
+
     def _get_target_repo(self) -> str:
         """Get the target repository ID for operations."""
-        # Prefer dataset repo for workspace files
         if self.config.is_dataset_storage_enabled():
             return self.config.dataset_repo_id
         return self.config.repo_id
@@ -518,8 +1069,7 @@ class HubStorage:
     ) -> FileMetadata:
         """Upload a file to HF Hub."""
         
-        # For large content, use temp file
-        if isinstance(content, str) and len(content) > 100000:  # > 100KB
+        if isinstance(content, str) and len(content) > 100000:
             with tempfile.NamedTemporaryFile(
                 mode='w',
                 suffix=Path(path).suffix,
@@ -540,7 +1090,6 @@ class HubStorage:
             finally:
                 os.unlink(tmp_path)
         else:
-            # Upload directly from content
             content_bytes = content.encode('utf-8') if isinstance(content, str) else content
             
             from io import BytesIO
@@ -563,8 +1112,6 @@ class HubStorage:
     
     def _download_from_hub(self, path: str) -> str:
         """Download a file from HF Hub."""
-        
-        # Use hf_hub_download for caching
         from huggingface_hub import hf_hub_download
         
         local_path = hf_hub_download(
@@ -574,7 +1121,6 @@ class HubStorage:
             token=self.config.token
         )
         
-        # Read and return content
         with open(local_path, 'r', encoding='utf-8') as f:
             return f.read()
     
@@ -584,12 +1130,10 @@ class HubStorage:
     ) -> list[dict[str, Any]]:
         """List files in the Hub repository."""
         
-        # Check cache
         if use_cache and self._remote_cache:
             if time.time() - self._cache_timestamp < self._cache_ttl:
                 return list(self._remote_cache.values())
         
-        # Fetch from API
         repo_info = self.api.repo_info(
             repo_id=self._get_target_repo(),
             repo_type=self._get_target_repo_type()
@@ -608,29 +1152,25 @@ class HubStorage:
                     "is_remote": True,
                 })
         
-        # Update cache
         self._remote_cache = {f["path"]: f for f in files}
         self._cache_timestamp = time.time()
         
         return files
     
-    # ─── Sync Operations ──────────────────────────────────────────────
+    # ═══════════════════════════════════════════════════════════════════
+    # SYNC OPERATIONS
+    # ═══════════════════════════════════════════════════════════════════
     
     def sync_to_hub(
         self,
         path: str | None = None,
         commit_message: str = "Sync workspace"
     ) -> dict[str, Any]:
-        """
-        Sync local files to Hub.
+        """Sync local files to Hub/Bucket."""
+        # If bucket mode, use bucket sync
+        if self.config.is_bucket_enabled():
+            return self.sync_to_bucket(path, commit_message)
         
-        Args:
-            path: Specific file or directory to sync (None = all)
-            commit_message: Commit message for changes
-            
-        Returns:
-            Dict with sync results.
-        """
         result = {
             "success": False,
             "uploaded": [],
@@ -646,7 +1186,6 @@ class HubStorage:
             files_to_sync = []
             
             if path:
-                # Sync specific file/directory
                 full_path = self._local_workspace / path
                 if full_path.is_file():
                     files_to_sync.append(path)
@@ -655,13 +1194,11 @@ class HubStorage:
                         if fp.is_file():
                             files_to_sync.append(str(fp.relative_to(self._local_workspace)))
             else:
-                # Sync all local files
                 for fp in self._local_workspace.rglob("*"):
                     if fp.is_file():
                         rel = str(fp.relative_to(self._local_workspace))
                         files_to_sync.append(rel)
             
-            # Upload each file
             for file_path in files_to_sync:
                 try:
                     local_path = self._local_workspace / file_path
@@ -694,15 +1231,7 @@ class HubStorage:
         self,
         path: str | None = None
     ) -> dict[str, Any]:
-        """
-        Sync files from Hub to local.
-        
-        Args:
-            path: Specific file to download (None = all)
-            
-        Returns:
-            Dict with sync results.
-        """
+        """Sync files from Hub to local."""
         result = {
             "success": False,
             "downloaded": [],
@@ -711,14 +1240,12 @@ class HubStorage:
         
         try:
             if path:
-                # Download specific file
                 content = self._download_from_hub(path)
                 local_path = self._local_workspace / path
                 local_path.parent.mkdir(parents=True, exist_ok=True)
                 local_path.write_text(content, encoding='utf-8')
                 result["downloaded"].append(path)
             else:
-                # Download all files
                 remote_files = self._list_hub_files(use_cache=False)
                 
                 for rf in remote_files:
@@ -743,37 +1270,28 @@ class HubStorage:
         return result
     
     def full_sync(self) -> dict[str, Any]:
-        """
-        Perform bidirectional sync between local and Hub.
-        
-        Merges changes from both sides.
-        """
+        """Perform bidirectional sync between local and Hub."""
         result = {
             "to_hub": {},
             "from_hub": {}
         }
         
-        # Push local to hub
         result["to_hub"] = self.sync_to_hub(commit_message="Full sync push")
-        
-        # Pull new/updated from hub
         result["from_hub"] = self.sync_from_hub()
         
         return result
     
-    # ─── Utility Methods ──────────────────────────────────────────────
+    # ═══════════════════════════════════════════════════════════════════
+    # UTILITY METHODS
+    # ═══════════════════════════════════════════════════════════════════
     
     def _normalize_path(self, path: str) -> str:
         """Normalize a file path."""
-        # Remove leading ./
         if path.startswith("./"):
             path = path[2:]
-        # Convert backslashes
         path = path.replace("\\", "/")
-        # Remove double slashes
         while "//" in path:
             path = path.replace("//", "/")
-        # Security: prevent path traversal
         if ".." in path:
             raise HubStorageError(
                 "Path traversal detected",
@@ -800,6 +1318,7 @@ class HubStorage:
             "mode": self.config.mode,
             "hub_enabled": self.config.is_hub_enabled(),
             "dataset_enabled": self.config.is_dataset_storage_enabled(),
+            "bucket_enabled": self.config.is_bucket_enabled(),
             "local_files": 0,
             "local_size_mb": 0,
             "last_sync": self._cache_timestamp,
@@ -814,6 +1333,14 @@ class HubStorage:
         
         stats["local_size_mb"] = round(stats["local_size_mb"], 2)
         
+        # Add bucket stats if available
+        if self.config.is_bucket_enabled():
+            try:
+                bucket_status = self.get_bucket_status()
+                stats["bucket_stats"] = bucket_status
+            except Exception:
+                pass
+        
         return stats
     
     def clear_cache(self) -> None:
@@ -832,16 +1359,7 @@ class HubStorage:
     
     @contextmanager
     def batch_operation(self, commit_message: str = "Batch update"):
-        """
-        Context manager for batch operations.
-        
-        All writes within the context are grouped into one commit.
-        
-        Usage:
-            with storage.batch_operation("Create API"):
-                storage.write_file("app.py", "...")
-                storage.write_file("config.py", "...")
-        """
+        """Context manager for batch operations."""
         original_auto_sync = self.config.auto_sync
         self.config.auto_sync = False
         
@@ -850,14 +1368,18 @@ class HubStorage:
         try:
             yield files_written
             
-            # Commit all at once
             if files_written:
-                self.sync_to_hub(commit_message=commit_message)
+                if self.config.is_bucket_enabled():
+                    self.sync_to_bucket(commit_message=commit_message)
+                else:
+                    self.sync_to_hub(commit_message=commit_message)
         finally:
             self.config.auto_sync = original_auto_sync
 
 
-# ─── Global Instance Management ────────────────────────────────────────
+# ════════════════════════════════════════════════════════════════════════
+# GLOBAL INSTANCE MANAGEMENT
+# ════════════════════════════════════════════════════════════════════════
 
 _global_storage: Optional[HubStorage] = None
 
@@ -874,6 +1396,7 @@ def init_hub_storage(
     token: str = "",
     repo_id: str = "",
     dataset_repo_id: str = "",
+    bucket_repo_id: str = "",  # NEW: Bucket support
     mode: str = "auto",
     **kwargs
 ) -> HubStorage:
@@ -881,23 +1404,37 @@ def init_hub_storage(
     Initialize the global HubStorage instance.
     
     Auto-detects environment when running on HF Spaces.
+    Now supports HF Storage Buckets for persistent cloud storage!
     
     Args:
         token: HF API token
         repo_id: Main repository ID
         dataset_repo_id: Dataset repository for workspace storage
-        mode: Storage mode ("local", "hub", "hybrid", "auto")
+        bucket_repo_id: HF Storage Bucket ID (NEW - recommended for Spaces)
+        mode: Storage mode ("local", "hub", "hybrid", "bucket", "auto")
         
     Returns:
         Initialized HubStorage instance.
+        
+    Example with bucket:
+        >>> storage = init_hub_storage(
+        ...     token="hf_...",
+        ...     bucket_repo_id="sonic-coder/my-workspace-bucket",
+        ...     mode="bucket"
+        ... )
     """
     global _global_storage
     
     # Auto-detect mode
     if mode == "auto":
-        # Check if running on HF Spaces
         if os.environ.get("SPACE_ID"):
-            mode = "hybrid" if token else "local"
+            # On Spaces, prefer bucket if available
+            if bucket_repo_id:
+                mode = "bucket"
+            elif token:
+                mode = "hybrid"
+            else:
+                mode = "local"
         else:
             mode = "local"
     
@@ -909,6 +1446,7 @@ def init_hub_storage(
         token=token,
         repo_id=repo_id,
         dataset_repo_id=dataset_repo_id,
+        bucket_repo_id=bucket_repo_id,
         mode=mode,
         **kwargs
     )
@@ -926,6 +1464,13 @@ def is_hub_available() -> bool:
     return _global_storage.config.is_hub_enabled()
 
 
+def is_bucket_available() -> bool:
+    """Check if HF Bucket storage is available (NEW)."""
+    if _global_storage is None:
+        return False
+    return _global_storage.config.is_bucket_enabled()
+
+
 def get_storage_mode() -> str:
     """Get current storage mode."""
     if _global_storage is None:

index.html

@@ -7,496 +7,2285 @@
 <meta name="description" content="AI-powered code agent with MCP support, multiple 1B models, and Gemini CLI patterns">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 <style>
 /* ═══════════════════════════════════════════════════════
-   RESET & BASE
+   SONICODER V2 - FUTURISTIC UI DESIGN SYSTEM
+   Premium AI Code Agent Interface
    ═══════════════════════════════════════════════════════ */
-*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
-:root{
-  --bg-deep:#0a0e14;--bg-panel:#0d1117;--bg-code:#161b22;
-  --border:#1e2a3a;--border-focus:#2d4a6a;
-  --green:#39ff14;--green-dim:#1a7a0a;--cyan:#00d4ff;--amber:#ffb300;
-  --purple:#a855f7;--gray-light:#e0e0e0;--gray-mid:#8b949e;--gray-dim:#484f58;
-  --red:#ff5555;--success:#50fa7b;--code-text:#f8f8f2;
-  --glow-green:0 0 8px rgba(57,255,20,0.3);--glow-cyan:0 0 8px rgba(0,212,255,0.3);
-  --glow-amber:0 0 8px rgba(255,179,0,0.2);--glow-purple:0 0 8px rgba(168,85,247,0.3);
-  --font-mono:'JetBrains Mono','Fira Code','Cascadia Code',monospace;
-  --radius:4px;--transition:0.2s ease;
-}
-html,body{height:100%;background:var(--bg-deep);color:var(--gray-light);font-family:var(--font-mono);font-size:13px;line-height:1.6;overflow:hidden}
-body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px)}
-::selection{background:rgba(57,255,20,0.25);color:#fff}
-::-webkit-scrollbar{width:6px;height:6px}
-::-webkit-scrollbar-track{background:transparent}
-::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
-::-webkit-scrollbar-thumb:hover{background:var(--gray-dim)}
-a{color:var(--cyan);text-decoration:none}
-a:hover{text-decoration:underline;text-shadow:var(--glow-cyan)}
-
-/* ═══ APP SHELL ═══ */
-#app{display:flex;flex-direction:column;height:100vh;max-height:100vh}
+
+/* ═══ CSS VARIABLES & DESIGN TOKENS ═══ */
+:root {
+  /* Core Colors */
+  --bg-deep: #050810;
+  --bg-primary: #0a0e17;
+  --bg-secondary: #0d1321;
+  --bg-tertiary: #111827;
+  --bg-elevated: #151d2e;
+  
+  /* Glass Effect Colors */
+  --glass-bg: rgba(15, 23, 42, 0.65);
+  --glass-bg-light: rgba(20, 30, 50, 0.5);
+  --glass-border: rgba(100, 180, 255, 0.12);
+  --glass-border-hover: rgba(0, 212, 255, 0.25);
+  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  
+  /* Accent Colors - Neon */
+  --cyan: #00d4ff;
+  --cyan-bright: #5eeaff;
+  --cyan-dim: #007a94;
+  --cyan-glow: rgba(0, 212, 255, 0.4);
+  --cyan-glow-subtle: rgba(0, 212, 255, 0.15);
+  
+  --purple: #a855f7;
+  --purple-bright: #c084fc;
+  --purple-dim: #7c3aed;
+  --purple-glow: rgba(168, 85, 247, 0.4);
+  --purple-glow-subtle: rgba(168, 85, 247, 0.15);
+  
+  --green: #39ff14;
+  --green-dim: #22c55e;
+  --green-glow: rgba(57, 255, 20, 0.35);
+  
+  --amber: #ffb300;
+  --amber-glow: rgba(255, 179, 0, 0.3);
+  
+  --red: #ff5555;
+  --red-glow: rgba(255, 85, 85, 0.3);
+  
+  /* Text Colors */
+  --text-primary: #f1f5f9;
+  --text-secondary: #94a3b8;
+  --text-muted: #64748b;
+  --text-accent: var(--cyan);
+  
+  /* Border Colors */
+  --border-default: rgba(71, 85, 105, 0.3);
+  --border-focus: var(--cyan);
+  --border-glow: 0 0 0 1px var(--cyan), 0 0 20px var(--cyan-glow);
+  
+  /* Typography */
+  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  
+  /* Spacing & Sizing */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --header-height: 56px;
+  --sidebar-width: 260px;
+  
+  /* Transitions */
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
+  
+  /* Z-Index Scale */
+  --z-base: 1;
+  --z-panel: 10;
+  --z-overlay: 100;
+  --z-modal: 1000;
+  --z-toast: 2000;
+}
+
+/* ═══ RESET & BASE ═══ */
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  height: 100%;
+  font-size: 14px;
+}
+
+body {
+  height: 100%;
+  background: var(--bg-deep);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  line-height: 1.6;
+  overflow: hidden;
+  position: relative;
+}
+
+::selection {
+  background: var(--cyan-glow);
+  color: white;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border-default);
+  border-radius: 3px;
+  transition: background var(--transition-fast);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--cyan-dim);
+}
+
+/* ═══ ANIMATED BACKGROUND SYSTEM ═══ */
+.bg-canvas {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.bg-gradient-mesh {
+  position: absolute;
+  inset: 0;
+  background: 
+    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
+    radial-gradient(ellipse 60% 80% at 80% 90%, rgba(168, 85, 247, 0.06) 0%, transparent 50%),
+    radial-gradient(ellipse 50% 50% at 50% 50%, rgba(57, 255, 20, 0.03) 0%, transparent 60%);
+  animation: meshFloat 20s ease-in-out infinite alternate;
+}
+
+@keyframes meshFloat {
+  0% { transform: scale(1) rotate(0deg); opacity: 1; }
+  50% { transform: scale(1.1) rotate(1deg); opacity: 0.9; }
+  100% { transform: scale(1) rotate(-1deg); opacity: 1; }
+}
+
+.particles-container {
+  position: absolute;
+  inset: 0;
+}
+
+.particle {
+  position: absolute;
+  width: 2px;
+  height: 2px;
+  background: var(--cyan);
+  border-radius: 50%;
+  box-shadow: 0 0 6px var(--cyan-glow), 0 0 12px var(--cyan-glow-subtle);
+  opacity: 0;
+  animation: particleFloat linear infinite;
+}
+
+.particle:nth-child(odd) {
+  background: var(--purple);
+  box-shadow: 0 0 6px var(--purple-glow), 0 0 12px var(--purple-glow-subtle);
+}
+
+@keyframes particleFloat {
+  0% { 
+    opacity: 0; 
+    transform: translateY(100vh) scale(0);
+  }
+  10% {
+    opacity: 0.6;
+    transform: translateY(90vh) scale(1);
+  }
+  90% {
+    opacity: 0.6;
+    transform: translateY(10vh) scale(1);
+  }
+  100% { 
+    opacity: 0; 
+    transform: translateY(-10vh) scale(0);
+  }
+}
+
+.grid-overlay {
+  position: absolute;
+  inset: 0;
+  background-image: 
+    linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
+  background-size: 50px 50px;
+  mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
+  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
+}
+
+.scanline {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--cyan-glow-subtle), transparent);
+  animation: scanlineMove 8s linear infinite;
+  opacity: 0.5;
+}
+
+@keyframes scanlineMove {
+  0% { top: -2px; }
+  100% { top: 100%; }
+}
+
+/* ═══ MAIN LAYOUT ═══ */
+.app-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  position: relative;
+  z-index: var(--z-base);
+}
 
 /* ═══ HEADER ═══ */
-#header{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:var(--bg-panel);border-bottom:1px solid var(--border);flex-shrink:0;gap:16px}
-.header-title{display:flex;flex-direction:column;gap:2px}
-.header-ascii{color:var(--green);font-size:11px;line-height:1.3;text-shadow:var(--glow-green);white-space:pre;letter-spacing:.5px}
-.header-subtitle{color:var(--gray-mid);font-size:11px;padding-left:3px}
-.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
-.pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:1px solid var(--border);border-radius:12px;font-size:11px;color:var(--gray-mid);text-decoration:none;transition:all var(--transition);cursor:default}
-.pill .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
-.pill .dot.ready{background:var(--success);box-shadow:0 0 6px var(--success)}
-.pill .dot.loading{background:var(--amber);box-shadow:0 0 6px var(--amber);animation:pulse 1.5s ease infinite}
-.pill .dot.error{background:var(--red);box-shadow:0 0 6px var(--red)}
-.pill .dot.unknown{background:var(--gray-dim)}
-@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
-
-#model-select{background:var(--bg-deep);border:1px solid var(--border);color:var(--cyan);font-family:var(--font-mono);font-size:11px;padding:5px 8px;border-radius:var(--radius);outline:none;cursor:pointer;transition:border-color var(--transition)}
-#model-select:focus{border-color:var(--border-focus)}
-#model-select option{background:var(--bg-deep);color:var(--gray-light)}
-
-.mcp-pill .dot.connected{background:var(--success);box-shadow:0 0 6px var(--success)}
-.mcp-pill .dot.disconnected{background:var(--red);box-shadow:0 0 6px var(--red)}
-
-.header-btn{background:transparent;border:1px solid var(--border);color:var(--amber);font-family:var(--font-mono);font-size:11px;padding:5px 12px;border-radius:var(--radius);cursor:pointer;transition:all var(--transition);letter-spacing:1px;white-space:nowrap}
-.header-btn:hover{border-color:var(--amber);background:rgba(255,179,0,.08);text-shadow:var(--glow-amber)}
-
-/* ═══ BANNER ═══ */
-#banner{background:linear-gradient(90deg,rgba(168,85,247,.08),rgba(57,255,20,.05));border-bottom:1px solid var(--border);color:var(--gray-mid);font-size:12px;padding:7px 18px;text-align:center;flex-shrink:0}
-#banner strong{color:var(--gray-light);font-weight:600}
-#banner a{color:var(--purple);font-weight:600}
+.header {
+  height: var(--header-height);
+  min-height: var(--header-height);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-bottom: 1px solid var(--glass-border);
+  position: relative;
+  z-index: var(--z-panel);
+}
+
+.header::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--cyan-glow-subtle), var(--purple-glow-subtle), transparent);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  transition: transform var(--transition-fast);
+}
+
+.logo:hover {
+  transform: scale(1.02);
+}
+
+.logo-icon {
+  width: 36px;
+  height: 36px;
+  background: linear-gradient(135deg, var(--cyan), var(--purple));
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  font-weight: 700;
+  color: white;
+  box-shadow: 0 4px 15px var(--cyan-glow), 0 0 30px var(--purple-glow-subtle);
+  animation: logoPulse 3s ease-in-out infinite;
+  position: relative;
+  overflow: hidden;
+}
+
+.logo-icon::after {
+  content: '';
+  position: absolute;
+  inset: -50%;
+  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.3), transparent);
+  animation: logoShine 4s linear infinite;
+}
+
+@keyframes logoPulse {
+  0%, 100% { box-shadow: 0 4px 15px var(--cyan-glow), 0 0 30px var(--purple-glow-subtle); }
+  50% { box-shadow: 0 4px 25px var(--cyan-glow), 0 0 40px var(--purple-glow); }
+}
+
+@keyframes logoShine {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+.logo-text {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.2;
+}
+
+.logo-title {
+  font-size: 16px;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+  background: linear-gradient(135deg, var(--text-primary), var(--cyan-bright));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.logo-version {
+  font-size: 10px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-weight: 500;
+}
+
+.header-center {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.model-selector {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 14px;
+  background: var(--glass-bg-light);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  position: relative;
+  overflow: hidden;
+}
+
+.model-selector:hover {
+  border-color: var(--glass-border-hover);
+  box-shadow: 0 0 20px var(--cyan-glow-subtle);
+}
+
+.model-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--text-muted);
+  transition: all var(--transition-base);
+}
+
+.model-dot.ready {
+  background: var(--green);
+  box-shadow: 0 0 8px var(--green-glow);
+  animation: dotPulse 2s ease-in-out infinite;
+}
+
+.model-dot.loading {
+  background: var(--amber);
+  animation: dotSpin 1s linear infinite;
+}
+
+.model-dot.error {
+  background: var(--red);
+  box-shadow: 0 0 8px var(--red-glow);
+}
+
+@keyframes dotPulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.2); opacity: 0.7; }
+}
+
+@keyframes dotSpin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.model-text {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.status-indicators {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.status-pill {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 12px;
+  background: var(--glass-bg-light);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  font-size: 11px;
+  font-weight: 500;
+  transition: all var(--transition-fast);
+}
+
+.status-pill:hover {
+  border-color: var(--glass-border-hover);
+}
+
+.status-pill .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-muted);
+}
+
+.status-pill .dot.connected,
+.status-pill .dot.ready {
+  background: var(--green);
+  box-shadow: 0 0 6px var(--green-glow);
+}
+
+.status-pill .dot.disconnected {
+  background: var(--red);
+}
+
+.status-pill .dot.loading {
+  background: var(--amber);
+  animation: dotSpin 1s linear infinite;
+}
+
+.btn-icon {
+  width: 34px;
+  height: 34px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--glass-bg-light);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  font-size: 14px;
+}
+
+.btn-icon:hover {
+  background: var(--glass-bg);
+  border-color: var(--cyan-dim);
+  color: var(--cyan);
+  box-shadow: 0 0 15px var(--cyan-glow-subtle);
+  transform: translateY(-1px);
+}
+
+.btn-icon:active {
+  transform: translateY(0);
+}
+
+/* ═══ MAIN CONTENT AREA ═══ */
+.main-content {
+  flex: 1;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+}
+
+/* ═══ SIDEBAR ═══ */
+.sidebar {
+  width: var(--sidebar-width);
+  min-width: var(--sidebar-width);
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-right: 1px solid var(--glass-border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  z-index: var(--z-panel);
+}
+
+.sidebar::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 1px;
+  background: linear-gradient(180deg, var(--cyan-glow-subtle), transparent, var(--purple-glow-subtle));
+  opacity: 0.5;
+}
+
+.sidebar-header {
+  padding: 16px;
+  border-bottom: 1px solid var(--glass-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar-title {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  color: var(--text-muted);
+}
+
+.sidebar-actions {
+  display: flex;
+  gap: 4px;
+}
+
+.btn-sidebar-action {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  font-size: 12px;
+}
+
+.btn-sidebar-action:hover {
+  background: var(--glass-bg-light);
+  color: var(--cyan);
+}
+
+.sidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+/* File Tree Styles */
+.file-tree {
+  font-family: var(--font-mono);
+  font-size: 12px;
+}
+
+.ws-dir {
+  margin-bottom: 4px;
+}
+
+.ws-dir-name {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: all var(--transition-fast);
+  user-select: none;
+}
+
+.ws-dir-name:hover {
+  background: var(--glass-bg-light);
+  color: var(--cyan);
+}
+
+.ws-dir-name::before {
+  content: '📁';
+  font-size: 11px;
+  filter: grayscale(0.3);
+}
+
+.ws-children {
+  margin-left: 16px;
+  padding-left: 12px;
+  border-left: 1px solid var(--border-default);
+}
+
+.ws-file {
+  margin-bottom: 2px;
+}
+
+.ws-file > span {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 8px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  color: var(--text-secondary);
+  transition: all var(--transition-fast);
+  font-size: 12px;
+}
+
+.ws-file > span:hover {
+  background: var(--glass-bg-light);
+  color: var(--cyan-bright);
+  padding-left: 12px;
+}
+
+.ws-file > span::before {
+  content: '📄';
+  font-size: 11px;
+}
+
+.ws-empty {
+  padding: 24px 12px;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+/* File Viewer */
+.file-viewer-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: var(--glass-bg-light);
+  border-bottom: 1px solid var(--glass-border);
+}
+
+.file-viewer-header button {
+  padding: 6px 12px;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  cursor: pointer;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  transition: all var(--transition-fast);
+}
+
+.file-viewer-header button:hover {
+  border-color: var(--cyan-dim);
+  color: var(--cyan);
+}
+
+.file-viewer-header span {
+  font-size: 12px;
+  color: var(--text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-viewer-content {
+  padding: 16px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.7;
+  color: var(--text-secondary);
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* Sidebar Sections */
+.sidebar-section {
+  margin-bottom: 16px;
+}
+
+.sidebar-section-title {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  color: var(--text-muted);
+  padding: 8px 12px 6px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* MCP Section */
+.mcp-server {
+  padding: 10px 12px;
+  background: var(--glass-bg-light);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-md);
+  margin-bottom: 8px;
+  transition: all var(--transition-fast);
+}
+
+.mcp-server:hover {
+  border-color: var(--glass-border-hover);
+}
+
+.mcp-server-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+}
+
+.mcp-server-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--text-muted);
+}
+
+.mcp-server-dot.connected {
+  background: var(--green);
+  box-shadow: 0 0 6px var(--green-glow);
+}
+
+.mcp-server-dot.disconnected {
+  background: var(--red);
+}
+
+.mcp-server-name {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-primary);
+  flex: 1;
+}
+
+.tool-badge {
+  font-size: 9px;
+  font-weight: 600;
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.tool-badge.success {
+  background: rgba(57, 255, 20, 0.15);
+  color: var(--green);
+}
+
+.tool-badge.error {
+  background: rgba(255, 85, 85, 0.15);
+  color: var(--red);
+}
+
+.tool-badge.running {
+  background: rgba(255, 179, 0, 0.15);
+  color: var(--amber);
+  animation: badgePulse 1.5s ease-in-out infinite;
+}
+
+@keyframes badgePulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.6; }
+}
+
+.mcp-tools {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.mcp-tool-tag {
+  font-size: 10px;
+  padding: 2px 8px;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+}
+
+.mcp-empty {
+  padding: 20px 12px;
+  text-align: center;
+  color: var(--text-muted);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+/* ═══ CHAT AREA ═══ */
+.chat-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  scroll-behavior: smooth;
+}
+
+.chat-messages::-webkit-scrollbar {
+  width: 4px;
+}
+
+/* Welcome Banner */
+.welcome-banner {
+  max-width: 600px;
+  margin: 40px auto;
+  text-align: center;
+  padding: 40px;
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  position: relative;
+  overflow: hidden;
+}
+
+.welcome-banner::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--cyan), var(--purple), transparent);
+}
+
+.welcome-banner::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse at center top, var(--cyan-glow-subtle), transparent 70%);
+  pointer-events: none;
+}
+
+.banner-icon {
+  font-size: 48px;
+  margin-bottom: 16px;
+  display: block;
+  animation: bannerFloat 3s ease-in-out infinite;
+}
+
+@keyframes bannerFloat {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+
+.banner-title {
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 8px;
+  background: linear-gradient(135deg, var(--text-primary), var(--cyan-bright), var(--purple-bright));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.banner-model {
+  font-size: 13px;
+  color: var(--cyan);
+  margin-bottom: 16px;
+  font-family: var(--font-mono);
+}
+
+.banner-desc {
+  color: var(--text-secondary);
+  font-size: 14px;
+  line-height: 1.7;
+  margin-bottom: 24px;
+}
+
+.examples-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: center;
+}
+
+.examples-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  margin-right: 4px;
+}
+
+.example-chip {
+  padding: 8px 14px;
+  background: var(--glass-bg-light);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-xl);
+  font-size: 12px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  position: relative;
+  overflow: hidden;
+}
+
+.example-chip::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, var(--cyan-glow-subtle), var(--purple-glow-subtle));
+  opacity: 0;
+  transition: opacity var(--transition-fast);
+}
+
+.example-chip:hover {
+  border-color: var(--cyan-dim);
+  color: var(--cyan);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 20px var(--cyan-glow-subtle);
+}
+
+.example-chip:hover::before {
+  opacity: 1;
+}
+
+.example-chip span {
+  position: relative;
+  z-index: 1;
+}
+
+/* Message Styles */
+.msg {
+  margin-bottom: 20px;
+  animation: msgSlideIn 0.3s ease-out;
+  position: relative;
+}
+
+@keyframes msgSlideIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.msg-user {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.msg-user .msg-content-wrapper {
+  max-width: 75%;
+  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(0, 212, 255, 0.05));
+  border: 1px solid rgba(0, 212, 255, 0.2);
+  border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg);
+  padding: 14px 18px;
+  position: relative;
+}
+
+.msg-user .msg-content-wrapper::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--cyan-glow-subtle), transparent);
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+}
+
+.msg-assistant {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.msg-assistant .msg-content-wrapper {
+  max-width: 85%;
+  background: var(--glass-bg);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px;
+  padding: 14px 18px;
+  position: relative;
+}
+
+.msg-system {
+  display: flex;
+  justify-content: center;
+}
+
+.msg-system .msg-content-wrapper {
+  max-width: 80%;
+  background: var(--glass-bg-light);
+  border: 1px dashed var(--glass-border);
+  border-radius: var(--radius-md);
+  padding: 12px 20px;
+  text-align: center;
+}
+
+.msg-prefix {
+  font-weight: 600;
+  margin-right: 6px;
+}
+
+.msg-user .msg-prefix {
+  color: var(--cyan);
+}
+
+.msg-assistant .msg-prefix {
+  color: var(--purple);
+}
+
+.msg-system .msg-prefix {
+  color: var(--amber);
+}
+
+.msg-content {
+  color: var(--text-primary);
+  line-height: 1.7;
+  word-wrap: break-word;
+}
+
+.msg-body {
+  margin-top: 8px;
+}
+
+.iteration-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  background: var(--purple-glow-subtle);
+  border: 1px solid var(--purple);
+  border-radius: var(--radius-sm);
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--purple-bright);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 10px;
+  animation: iterationGlow 2s ease-in-out infinite;
+}
+
+@keyframes iterationGlow {
+  0%, 100% { box-shadow: 0 0 10px var(--purple-glow-subtle); }
+  50% { box-shadow: 0 0 20px var(--purple-glow); }
+}
+
+/* Code Block Styles */
+.code-block-wrap {
+  margin: 12px 0;
+  background: var(--bg-deep);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  position: relative;
+}
+
+.code-block-wrap::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, var(--cyan-glow-subtle), var(--purple-glow-subtle));
+}
+
+.code-block-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-default);
+}
+
+.code-lang {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--cyan);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  font-family: var(--font-mono);
+}
+
+.btn-copy {
+  padding: 4px 10px;
+  background: var(--glass-bg-light);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  font-size: 11px;
+  cursor: pointer;
+  font-family: var(--font-mono);
+  transition: all var(--transition-fast);
+}
+
+.btn-copy:hover {
+  border-color: var(--cyan-dim);
+  color: var(--cyan);
+  box-shadow: 0 0 10px var(--cyan-glow-subtle);
+}
+
+.btn-copy.copied {
+  background: rgba(57, 255, 20, 0.15);
+  border-color: var(--green);
+  color: var(--green);
+}
+
+.code-block-wrap pre {
+  margin: 0;
+  padding: 14px;
+  overflow-x: auto;
+}
+
+.code-block-wrap code {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.7;
+  color: var(--code-text, #e0e0e0);
+  --code-text: #e2e8f0;
+}
+
+/* Inline code */
+.msg-content code:not([id]) {
+  padding: 2px 6px;
+  background: var(--bg-deep);
+  border: 1px solid var(--border-default);
+  border-radius: 4px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--cyan-bright);
+}
+
+/* Headings in messages */
+.msg-content h1, .msg-content h2, .msg-content h3 {
+  margin: 16px 0 8px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.msg-content h1 { font-size: 18px; color: var(--cyan-bright); }
+.msg-content h2 { font-size: 16px; color: var(--purple-bright); }
+.msg-content h3 { font-size: 14px; }
+
+.msg-content strong {
+  color: var(--text-primary);
+  font-weight: 600;
+}
+
+.msg-content em {
+  color: var(--cyan);
+  font-style: normal;
+}
+
+.msg-content li {
+  margin-left: 20px;
+  margin-bottom: 4px;
+  list-style: none;
+  position: relative;
+}
+
+.msg-content li::before {
+  content: '▹';
+  position: absolute;
+  left: -16px;
+  color: var(--cyan);
+}
+
+/* Streaming Cursor */
+.streaming-cursor {
+  display: inline-block;
+  width: 8px;
+  height: 16px;
+  background: var(--cyan);
+  margin-left: 2px;
+  vertical-align: text-bottom;
+  animation: cursorBlink 1s step-end infinite;
+  border-radius: 1px;
+}
+
+@keyframes cursorBlink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+/* Tool Call Block */
+.tool-block {
+  margin: 12px 0;
+  background: var(--bg-deep);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  animation: toolSlideIn 0.3s ease-out;
+}
+
+@keyframes toolSlideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.tool-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 14px;
+  background: var(--bg-tertiary);
+  border-bottom: 1px solid var(--border-default);
+  cursor: pointer;
+  transition: background var(--transition-fast);
+}
+
+.tool-header:hover {
+  background: var(--bg-elevated);
+}
 
-/* ═══ MAIN LAYOUT ═══ */
-#main{display:flex;flex:1;min-height:0;overflow:hidden}
-
-/* ═══ TERMINAL PANEL ═══ */
-#terminal-panel{display:flex;flex-direction:column;flex:1;min-width:0;border-right:1px solid var(--border)}
-.panel-label{padding:6px 16px;font-size:10px;letter-spacing:2px;color:var(--gray-dim);border-bottom:1px solid var(--border);background:rgba(13,17,23,.6);text-transform:uppercase;flex-shrink:0}
-#chat-messages{flex:1;overflow-y:auto;padding:16px;scroll-behavior:smooth}
-
-/* Messages */
-.msg{margin-bottom:14px;line-height:1.65;animation:msgIn .25s ease}
-@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
-.msg-prefix{font-weight:600;margin-right:4px}
-.msg-user .msg-prefix{color:var(--green);text-shadow:var(--glow-green)}
-.msg-user .msg-content{color:var(--green);text-shadow:var(--glow-green)}
-.msg-assistant .msg-prefix{color:var(--cyan);text-shadow:var(--glow-cyan);float:left}
-.msg-assistant .msg-body{overflow:hidden}
-.msg-assistant .msg-content{color:var(--gray-light)}
-.msg-system .msg-prefix{color:var(--amber);text-shadow:var(--glow-amber)}
-.msg-system .msg-content{color:var(--amber);opacity:.85}
-
-.msg-content strong{color:#fff;font-weight:600}
-.msg-content em{font-style:italic;color:var(--gray-mid)}
-.msg-content code:not(pre code){background:var(--bg-code);color:var(--code-text);padding:1px 5px;border-radius:3px;font-size:12px;border:1px solid var(--border)}
-.msg-content a{color:var(--cyan)}
-.msg-content ul,.msg-content ol{margin:6px 0 6px 20px}
-.msg-content li{margin-bottom:3px}
-.msg-content h1,.msg-content h2,.msg-content h3{color:var(--cyan);margin:10px 0 6px;font-size:14px;text-shadow:var(--glow-cyan)}
-.msg-content p{margin:4px 0}
-
-/* Code blocks */
-.code-block-wrap{margin:8px 0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg-code)}
-.code-block-header{display:flex;align-items:center;justify-content:space-between;padding:4px 10px;background:rgba(30,42,58,.5);border-bottom:1px solid var(--border);font-size:11px}
-.code-lang{color:var(--amber);text-transform:uppercase;letter-spacing:1px}
-.btn-copy{background:transparent;border:1px solid var(--border);color:var(--gray-mid);font-family:var(--font-mono);font-size:10px;padding:2px 8px;border-radius:3px;cursor:pointer;transition:all var(--transition)}
-.btn-copy:hover{border-color:var(--green);color:var(--green)}
-.btn-copy.copied{border-color:var(--success);color:var(--success)}
-.code-block-wrap pre{margin:0;padding:10px 12px;overflow-x:auto;font-size:12px;line-height:1.5;color:var(--code-text)}
-.code-block-wrap pre code{font-family:var(--font-mono);background:none;border:none;padding:0}
-
-/* Tool calls */
-.tool-block{margin:8px 0;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-code);overflow:hidden}
-.tool-header{display:flex;align-items:center;gap:8px;padding:6px 10px;background:rgba(30,42,58,.5);border-bottom:1px solid var(--border);font-size:11px;cursor:pointer}
-.tool-icon{font-size:13px}
-.tool-name{color:var(--purple);font-weight:600;flex:1}
-.tool-badge{padding:1px 8px;border-radius:10px;font-size:10px;font-weight:600;letter-spacing:.5px}
-.tool-badge.running{background:rgba(255,179,0,.15);color:var(--amber);border:1px solid rgba(255,179,0,.3)}
-.tool-badge.success{background:rgba(80,250,123,.1);color:var(--success);border:1px solid rgba(80,250,123,.3)}
-.tool-badge.error{background:rgba(255,85,85,.1);color:var(--red);border:1px solid rgba(255,85,85,.3)}
-.tool-args{padding:6px 10px;font-size:11px;color:var(--gray-dim);border-bottom:1px solid rgba(30,42,58,.3);display:none}
-.tool-block.open .tool-args{display:block}
-.tool-result{padding:8px 10px;font-size:11px;color:var(--gray-mid);max-height:200px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;display:none}
-.tool-block.open .tool-result{display:block}
-.tool-result.error-output{color:var(--red)}
-
-/* Streaming cursor */
-.streaming-cursor::after{content:'\2588';animation:blink .8s step-end infinite;color:var(--green);margin-left:2px}
-@keyframes blink{50%{opacity:0}}
-
-/* Iteration badge */
-.iteration-badge{display:inline-flex;align-items:center;gap:4px;margin:4px 0 2px;padding:2px 8px;border-radius:10px;background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.2);font-size:10px;color:var(--purple);letter-spacing:.5px}
+.tool-icon {
+  font-size: 16px;
+}
+
+.tool-name {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-primary);
+  flex: 1;
+}
+
+.tool-args {
+  padding: 12px 14px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-muted);
+  white-space: pre-wrap;
+  word-break: break-all;
+  border-bottom: 1px solid var(--border-default);
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.tool-result {
+  padding: 12px 14px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.tool-result.error-output {
+  color: var(--red);
+}
 
 /* ═══ INPUT AREA ═══ */
-#input-area{flex-shrink:0;border-top:1px solid var(--border);background:var(--bg-panel);padding:10px 16px 8px}
-#input-row{display:flex;gap:8px;align-items:flex-end}
-.input-prompt{color:var(--green);font-weight:700;font-size:14px;line-height:36px;text-shadow:var(--glow-green);flex-shrink:0}
-#chat-input{flex:1;background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--radius);color:var(--green);font-family:var(--font-mono);font-size:13px;padding:8px 12px;resize:none;outline:none;min-height:36px;max-height:120px;line-height:1.5;transition:border-color var(--transition);caret-color:var(--green);text-shadow:var(--glow-green)}
-#chat-input::placeholder{color:var(--gray-dim);text-shadow:none}
-#chat-input:focus{border-color:var(--border-focus)}
-#btn-send,#btn-stop{font-family:var(--font-mono);font-size:12px;padding:8px 14px;border-radius:var(--radius);cursor:pointer;transition:all var(--transition);letter-spacing:1px;flex-shrink:0;height:36px;display:flex;align-items:center;gap:4px}
-#btn-send{background:transparent;border:1px solid var(--green);color:var(--green)}
-#btn-send:hover:not(:disabled){background:var(--green);color:var(--bg-deep);box-shadow:0 0 12px rgba(57,255,20,.3)}
-#btn-send:disabled{opacity:.3;cursor:not-allowed}
-#btn-stop{background:transparent;border:1px solid var(--red);color:var(--red);display:none}
-#btn-stop:hover{background:var(--red);color:var(--bg-deep);box-shadow:0 0 12px rgba(255,85,85,.3)}
-#examples-row{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
-.examples-label{font-size:10px;color:var(--gray-dim);letter-spacing:1px;text-transform:uppercase;flex-shrink:0}
-.example-chip{background:rgba(30,42,58,.4);border:1px solid var(--border);border-radius:12px;padding:3px 10px;font-family:var(--font-mono);font-size:11px;color:var(--gray-mid);cursor:pointer;transition:all var(--transition);white-space:nowrap}
-.example-chip:hover{border-color:var(--purple);color:var(--purple);background:rgba(168,85,247,.05);text-shadow:var(--glow-purple)}
-
-/* ═══ OPTIONS ROW ═══ */
-#options-row{display:flex;align-items:center;gap:6px;margin-top:6px;flex-wrap:wrap}
-.opt-group{display:inline-flex;align-items:center;gap:4px;background:rgba(30,42,58,.3);border:1px solid var(--border);border-radius:var(--radius);padding:2px 4px 2px 6px;transition:border-color var(--transition)}
-.opt-group:hover{border-color:var(--border-focus)}
-.opt-group label{font-size:9px;color:var(--gray-dim);letter-spacing:1px;text-transform:uppercase;flex-shrink:0}
-.opt-group select{background:transparent;border:none;color:var(--cyan);font-family:var(--font-mono);font-size:11px;padding:3px 4px;outline:none;cursor:pointer;max-width:120px}
-.opt-group select option{background:var(--bg-deep);color:var(--gray-light)}
-.opt-toggle{display:inline-flex;align-items:center;gap:5px;background:rgba(30,42,58,.3);border:1px solid var(--border);border-radius:var(--radius);padding:3px 8px;font-size:10px;color:var(--gray-mid);cursor:pointer;transition:all var(--transition);user-select:none;letter-spacing:.5px}
-.opt-toggle:hover{border-color:var(--border-focus);color:var(--gray-light)}
-.opt-toggle input{display:none}
-.opt-toggle .toggle-dot{width:8px;height:8px;border-radius:50%;background:var(--gray-dim);transition:all var(--transition)}
-.opt-toggle.active{color:var(--amber);border-color:rgba(255,179,0,.4);background:rgba(255,179,0,.08);text-shadow:var(--glow-amber)}
-.opt-toggle.active .toggle-dot{background:var(--amber);box-shadow:0 0 6px var(--amber)}
-.opt-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:rgba(30,42,58,.3);border:1px solid var(--border);border-radius:var(--radius);color:var(--gray-mid);cursor:pointer;transition:all var(--transition);font-size:13px;flex-shrink:0}
-.opt-icon-btn:hover{border-color:var(--cyan);color:var(--cyan);text-shadow:var(--glow-cyan)}
-.opt-icon-btn input{display:none}
-.img-preview{display:inline-flex;align-items:center;gap:4px;background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.3);border-radius:var(--radius);padding:2px 6px;font-size:10px;color:var(--cyan);cursor:pointer}
-.img-preview img{width:18px;height:18px;border-radius:2px;object-fit:cover}
-.img-preview .remove{cursor:pointer;color:var(--red);margin-left:2px}
-
-/* ═══ OUTPUT PANEL ═══ */
-#output-panel{display:flex;flex-direction:column;width:45%;min-width:340px;max-width:55%;min-height:0;background:var(--bg-panel)}
-#output-tabs{display:flex;border-bottom:1px solid var(--border);background:rgba(13,17,23,.6);flex-shrink:0}
-.output-tab{flex:1;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--gray-dim);font-family:var(--font-mono);font-size:11px;padding:8px 6px;cursor:pointer;transition:all var(--transition);letter-spacing:.5px;text-transform:uppercase}
-.output-tab:hover{color:var(--gray-mid)}
-.output-tab.active{color:var(--cyan);border-bottom-color:var(--cyan);text-shadow:var(--glow-cyan)}
-#output-content{flex:1;min-height:0;overflow:hidden;position:relative}
-.tab-pane{display:none;height:100%;min-height:0}
-.tab-pane.active{display:flex;flex-direction:column}
-
-/* Preview */
-#pane-preview{align-items:stretch;justify-content:stretch;position:relative;min-height:0;overflow:hidden}
-.preview-placeholder{align-self:center;margin:auto;text-align:center;color:var(--gray-dim);padding:40px 20px}
-.preview-placeholder .ascii-art{font-size:11px;line-height:1.3;margin-bottom:16px;color:var(--border-focus)}
-.preview-placeholder .placeholder-text{font-size:12px;letter-spacing:.5px}
-#preview-iframe{display:none;position:absolute;inset:0;width:100%;height:100%;min-height:0;border:none;background:#fff}
-#btn-fullscreen{display:none;position:absolute;top:8px;right:8px;background:rgba(13,17,23,.8);border:1px solid var(--border);color:var(--gray-mid);font-family:var(--font-mono);font-size:11px;padding:4px 10px;border-radius:var(--radius);cursor:pointer;z-index:5;transition:all var(--transition)}
-#btn-fullscreen:hover{border-color:var(--cyan);color:var(--cyan)}
-
-/* Console */
-#pane-console{padding:12px 16px;gap:12px;overflow-y:auto}
-.console-section{margin-bottom:8px}
-.console-label{font-size:10px;letter-spacing:2px;color:var(--gray-dim);margin-bottom:4px;text-transform:uppercase}
-.console-output{background:var(--bg-deep);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word;min-height:40px;max-height:280px;overflow-y:auto}
-#console-stdout{color:var(--success)}
-#console-stderr{color:var(--red)}
-
-/* Code */
-#pane-code{padding:0}
-.code-tab-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);background:rgba(30,42,58,.3);flex-shrink:0}
-.code-tab-lang{font-size:11px;color:var(--amber);letter-spacing:1px;text-transform:uppercase}
-.code-tab-actions{display:flex;gap:8px}
-.code-tab-btn{background:transparent;border:1px solid var(--border);color:var(--gray-mid);font-family:var(--font-mono);font-size:10px;padding:3px 8px;border-radius:3px;cursor:pointer;transition:all var(--transition)}
-.code-tab-btn:hover{border-color:var(--cyan);color:var(--cyan)}
-#code-display{flex:1;overflow:auto;padding:12px;background:var(--bg-code)}
-#code-display pre{margin:0;font-size:12px;line-height:1.5;color:var(--code-text)}
-.code-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:var(--gray-dim);font-size:12px}
-
-/* Files */
-#pane-files{padding:0}
-.files-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);background:rgba(30,42,58,.3);flex-shrink:0}
-.files-header span{font-size:11px;color:var(--amber);letter-spacing:1px;text-transform:uppercase}
-.files-breadcrumb{padding:6px 12px;font-size:11px;color:var(--gray-dim);border-bottom:1px solid var(--border);background:rgba(30,42,58,.2)}
-.files-breadcrumb span{color:var(--cyan);cursor:pointer}
-.files-breadcrumb span:hover{text-shadow:var(--glow-cyan)}
-#files-tree{flex:1;overflow-y:auto;padding:8px 12px;font-size:12px;line-height:1.8;color:var(--gray-mid)}
-#files-tree .ws-empty{color:var(--gray-dim);font-style:italic;padding:8px 0}
-#files-tree .ws-dir{margin:2px 0}
-#files-tree .ws-dir-name{color:var(--cyan);font-weight:500;cursor:default}
-#files-tree .ws-children{margin-left:14px;border-left:1px dashed var(--border);padding-left:6px}
-#files-tree .ws-file{cursor:pointer;padding:1px 4px;border-radius:3px;transition:background .15s}
-#files-tree .ws-file:hover{background:var(--bg-code);color:var(--green)}
-#files-tree .ws-file span{color:var(--gray-light)}
-#file-viewer{flex:1;overflow:auto;padding:12px;background:var(--bg-code);display:none}
-#file-viewer pre{margin:0;font-size:11px;line-height:1.5;color:var(--code-text);white-space:pre-wrap;word-break:break-word}
-.file-viewer-header{display:flex;align-items:center;gap:10px;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg-code)}
-.file-viewer-header button{background:var(--border);color:var(--gray-light);border:1px solid var(--border-focus);padding:4px 10px;border-radius:3px;cursor:pointer;font-family:var(--font-mono);font-size:11px}
-.file-viewer-header button:hover{background:var(--border-focus)}
-.file-viewer-header span{color:var(--cyan);font-size:12px}
-.file-line-num{color:var(--gray-dim);display:inline-block;width:50px;text-align:right;margin-right:12px;user-select:none;border-right:1px solid var(--border);padding-right:8px}
-
-/* MCP */
-#pane-mcp{padding:16px;gap:12px;overflow-y:auto}
-.mcp-server{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:8px}
-.mcp-server-header{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(30,42,58,.5);border-bottom:1px solid var(--border);font-size:12px}
-.mcp-server-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
-.mcp-server-dot.connected{background:var(--success);box-shadow:0 0 6px var(--success)}
-.mcp-server-dot.disconnected{background:var(--red);box-shadow:0 0 6px var(--red)}
-.mcp-server-name{font-weight:600;color:var(--gray-light);flex:1}
-.mcp-tools{padding:8px 12px;display:flex;flex-wrap:wrap;gap:4px}
-.mcp-tool-tag{padding:2px 8px;background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.2);border-radius:10px;font-size:10px;color:var(--cyan)}
-.mcp-empty{color:var(--gray-dim);font-size:12px;text-align:center;padding:40px 20px}
+.input-area {
+  padding: 16px 20px;
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-top: 1px solid var(--glass-border);
+  position: relative;
+}
+
+.input-area::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--cyan-glow-subtle), var(--purple-glow-subtle), transparent);
+}
+
+.options-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+  align-items: center;
+}
+
+.option-group {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.option-group label {
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+}
+
+.option-select {
+  padding: 6px 10px;
+  background: var(--glass-bg-light);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  outline: none;
+}
+
+.option-select:hover, .option-select:focus {
+  border-color: var(--cyan-dim);
+  box-shadow: 0 0 10px var(--cyan-glow-subtle);
+}
+
+.option-checkbox {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  font-size: 11px;
+  color: var(--text-muted);
+  padding: 6px 10px;
+  background: var(--glass-bg-light);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-sm);
+  transition: all var(--transition-fast);
+}
+
+.option-checkbox:hover {
+  border-color: var(--glass-border-hover);
+}
+
+.option-checkbox input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 14px;
+  height: 14px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-default);
+  border-radius: 3px;
+  cursor: pointer;
+  position: relative;
+  transition: all var(--transition-fast);
+}
+
+.option-checkbox input[type="checkbox"]:checked {
+  background: var(--cyan);
+  border-color: var(--cyan);
+  box-shadow: 0 0 8px var(--cyan-glow);
+}
+
+.option-checkbox input[type="checkbox"]:checked::after {
+  content: '✓';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 10px;
+  color: var(--bg-deep);
+  font-weight: bold;
+}
+
+.image-upload-btn {
+  padding: 6px 12px;
+  background: var(--glass-bg-light);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  font-size: 11px;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.image-upload-btn:hover {
+  border-color: var(--purple-dim);
+  color: var(--purple);
+}
+
+#opt-image-input {
+  display: none;
+}
+
+.image-preview-container {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+}
+
+.img-preview {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  background: var(--glass-bg-light);
+  border: 1px solid var(--purple-dim);
+  border-radius: var(--radius-sm);
+  animation: imgAppear 0.3s ease-out;
+}
+
+@keyframes imgAppear {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.img-preview img {
+  width: 28px;
+  height: 28px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.img-preview span {
+  font-size: 11px;
+  color: var(--text-secondary);
+  max-width: 100px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.img-preview .remove {
+  cursor: pointer;
+  color: var(--text-muted);
+  font-size: 16px;
+  line-height: 1;
+  transition: color var(--transition-fast);
+}
+
+.img-preview .remove:hover {
+  color: var(--red);
+}
+
+.input-row {
+  display: flex;
+  gap: 10px;
+  align-items: flex-end;
+}
+
+.input-wrapper {
+  flex: 1;
+  position: relative;
+}
+
+.chat-input {
+  width: 100%;
+  min-height: 48px;
+  max-height: 150px;
+  padding: 14px 18px;
+  padding-right: 50px;
+  background: var(--bg-deep);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg);
+  color: var(--text-primary);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.5;
+  resize: none;
+  outline: none;
+  transition: all var(--transition-fast);
+}
+
+.chat-input::placeholder {
+  color: var(--text-muted);
+}
+
+.chat-input:focus {
+  border-color: var(--cyan);
+  box-shadow: 0 0 0 3px var(--cyan-glow-subtle), 0 0 30px var(--cyan-glow-subtle);
+}
+
+.chat-input:not(:placeholder-shown) {
+  border-color: var(--glass-border-hover);
+}
+
+.input-hint {
+  position: absolute;
+  right: 14px;
+  bottom: 12px;
+  font-size: 10px;
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+}
+
+.send-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.btn-send, .btn-stop {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  font-size: 18px;
+  transition: all var(--transition-base);
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-send {
+  background: linear-gradient(135deg, var(--cyan), var(--cyan-dim));
+  color: var(--bg-deep);
+  box-shadow: 0 4px 20px var(--cyan-glow);
+}
+
+.btn-send:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 30px var(--cyan-glow), 0 0 40px var(--cyan-glow-subtle);
+}
+
+.btn-send:active {
+  transform: translateY(0);
+}
+
+.btn-send::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, transparent, rgba(255,255,255,0.2), transparent);
+  transform: translateX(-100%);
+  transition: transform 0.5s;
+}
+
+.btn-send:hover::after {
+  transform: translateX(100%);
+}
+
+.btn-stop {
+  background: linear-gradient(135deg, var(--red), #cc4444);
+  color: white;
+  box-shadow: 0 4px 20px var(--red-glow);
+  display: none;
+}
+
+.btn-stop:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 30px var(--red-glow);
+}
+
+/* ═══ OUTPUT PANEL (Right Side) ═══ */
+.output-panel {
+  width: 380px;
+  min-width: 380px;
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border-left: 1px solid var(--glass-border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  z-index: var(--z-panel);
+}
+
+.output-panel::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 1px;
+  background: linear-gradient(180deg, var(--purple-glow-subtle), transparent, var(--cyan-glow-subtle));
+  opacity: 0.5;
+}
+
+.output-tabs {
+  display: flex;
+  padding: 8px;
+  gap: 4px;
+  border-bottom: 1px solid var(--glass-border);
+  background: var(--glass-bg-light);
+}
+
+.output-tab {
+  flex: 1;
+  padding: 8px 12px;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  text-align: center;
+}
+
+.output-tab:hover {
+  color: var(--text-secondary);
+  background: var(--glass-bg);
+}
+
+.output-tab.active {
+  background: var(--glass-bg);
+  color: var(--cyan);
+  box-shadow: 0 0 15px var(--cyan-glow-subtle);
+}
+
+.tab-pane {
+  display: none;
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px;
+}
+
+.tab-pane.active {
+  display: block;
+}
+
+/* Preview Pane */
+.preview-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-deep);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.preview-placeholder {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-muted);
+  text-align: center;
+  padding: 24px;
+}
+
+.preview-placeholder-icon {
+  font-size: 36px;
+  margin-bottom: 12px;
+  opacity: 0.5;
+}
+
+.preview-placeholder-text {
+  font-size: 13px;
+}
+
+.preview-iframe {
+  flex: 1;
+  width: 100%;
+  border: none;
+  background: white;
+  display: none;
+}
+
+.preview-toolbar {
+  display: flex;
+  justify-content: flex-end;
+  padding: 8px;
+  background: var(--bg-tertiary);
+  border-top: 1px solid var(--border-default);
+}
+
+.btn-fullscreen {
+  padding: 6px 12px;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  font-size: 11px;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  display: none;
+}
+
+.btn-fullscreen:hover {
+  border-color: var(--cyan-dim);
+  color: var(--cyan);
+}
+
+/* Code Pane */
+.code-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.code-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+}
+
+.code-tab-btn {
+  padding: 5px 10px;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  font-size: 10px;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.code-tab-btn:hover {
+  border-color: var(--cyan-dim);
+  color: var(--cyan);
+}
+
+.code-content {
+  flex: 1;
+  background: var(--bg-deep);
+  border: 1px solid var(--border-default);
+  border-top: none;
+  border-radius: 0 0 var(--radius-md) var(--radius-md);
+  padding: 14px;
+  overflow: auto;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  line-height: 1.7;
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+/* Console Pane */
+.console-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.console-section {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.console-label {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+  padding: 6px 8px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.console-label.stdout { color: var(--green); }
+.console-label.stderr { color: var(--red); }
+
+.console-output {
+  flex: 1;
+  background: var(--bg-deep);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-sm);
+  padding: 10px;
+  overflow: auto;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  line-height: 1.6;
+  color: var(--text-secondary);
+  white-space: pre-wrap;
+  word-break: break-all;
+}
 
 /* ═══ STATUS BAR ═══ */
-#status-bar{display:flex;align-items:center;gap:8px;padding:5px 16px;border-top:1px solid var(--border);background:var(--bg-panel);font-size:11px;flex-shrink:0}
-.status-indicator{display:inline-flex;align-items:center;gap:6px}
-.status-dot{font-size:10px;line-height:1}
-#status-text{letter-spacing:1px;text-transform:uppercase}
-.status-idle{color:var(--gray-dim)}
-.status-working{color:var(--amber);text-shadow:var(--glow-amber)}
-.status-success{color:var(--success);text-shadow:0 0 8px rgba(80,250,123,.3)}
-.status-error{color:var(--red);text-shadow:0 0 8px rgba(255,85,85,.3)}
-.status-info{color:var(--cyan);text-shadow:var(--glow-cyan)}
-@keyframes spin{to{transform:rotate(360deg)}}
-.status-working .status-dot{display:inline-block;animation:spin 1s linear infinite}
-
-/* ═══ FULLSCREEN ═══ */
-#fullscreen-overlay{display:none;position:fixed;inset:0;z-index:1000;background:var(--bg-deep);flex-direction:column}
-#fullscreen-overlay.active{display:flex}
-#fullscreen-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;border-bottom:1px solid var(--border);background:var(--bg-panel)}
-#fullscreen-bar span{color:var(--cyan);font-size:12px;letter-spacing:1px}
-#btn-exit-fullscreen{background:transparent;border:1px solid var(--border);color:var(--gray-mid);font-family:var(--font-mono);font-size:11px;padding:4px 12px;border-radius:var(--radius);cursor:pointer;transition:all var(--transition)}
-#btn-exit-fullscreen:hover{border-color:var(--red);color:var(--red)}
-#fullscreen-iframe{flex:1;border:none;background:#fff}
-
-/* ═══ RESPONSIVE ═══ */
-@media(max-width:900px){
-  #main{flex-direction:column}
-  #terminal-panel{border-right:none;border-bottom:1px solid var(--border);max-height:55vh}
-  #output-panel{width:100%;max-width:100%;min-width:0;flex:1}
-  .header-ascii{font-size:10px}
-  #chat-input{font-size:12px}
-}
-@media(max-width:600px){
-  #header{padding:8px 12px;gap:8px}
-  .header-ascii{display:none}
-  .header-subtitle{display:none}
-  .pill{font-size:10px;padding:3px 8px}
-  #chat-messages{padding:10px}
-  #input-area{padding:8px 10px 6px}
-  #examples-row{display:none}
+.status-bar {
+  height: 28px;
+  min-height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 16px;
+  background: var(--bg-primary);
+  border-top: 1px solid var(--glass-border);
+  font-size: 11px;
+  font-family: var(--font-mono);
+}
+
+.status-left, .status-right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.status-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-muted);
+}
+
+.status-item .indicator {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.status-idle { color: var(--text-muted); }
+.status-working { color: var(--amber); }
+.status-success { color: var(--green); }
+.status-error { color: var(--red); }
+.status-info { color: var(--cyan); }
+
+.status-working .indicator {
+  animation: statusPulse 1s ease-in-out infinite;
+}
+
+@keyframes statusPulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(0.8); }
+}
+
+/* ═══ FULLSCREEN OVERLAY ═══ */
+.fullscreen-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(5, 8, 16, 0.95);
+  backdrop-filter: blur(10px);
+  z-index: var(--z-modal);
+  display: none;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.fullscreen-overlay.active {
+  display: flex;
+  animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.fullscreen-close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  font-size: 20px;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.fullscreen-close:hover {
+  border-color: var(--red);
+  color: var(--red);
+}
+
+.fullscreen-iframe {
+  width: 90vw;
+  height: 90vh;
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius-lg);
+  background: white;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+/* ═══ RESPONSIVE ADJUSTMENTS ═══ */
+@media (max-width: 1200px) {
+  .output-panel {
+    width: 300px;
+    min-width: 300px;
+  }
+  
+  .sidebar {
+    width: 220px;
+    min-width: 220px;
+  }
+}
+
+@media (max-width: 900px) {
+  .sidebar {
+    display: none;
+  }
+  
+  .output-panel {
+    width: 250px;
+    min-width: 250px;
+  }
+}
+
+@media (max-width: 600px) {
+  .header-center {
+    display: none;
+  }
+  
+  .status-indicators {
+    display: none;
+  }
+  
+  .options-bar {
+    display: none;
+  }
+  
+  .output-panel {
+    position: fixed;
+    right: 0;
+    top: var(--header-height);
+    bottom: 28px;
+    width: 100%;
+    min-width: 100%;
+    transform: translateX(100%);
+    transition: transform var(--transition-base);
+    z-index: var(--z-overlay);
+  }
+  
+  .output-panel.show {
+    transform: translateX(0);
+  }
+}
+
+/* ═══ LOADING/SPINNER ANIMATIONS ═══ */
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid var(--glass-border);
+  border-top-color: var(--cyan);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.typing-indicator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 8px 12px;
+}
+
+.typing-indicator span {
+  width: 6px;
+  height: 6px;
+  background: var(--cyan);
+  border-radius: 50%;
+  animation: typingBounce 1.4s ease-in-out infinite;
+}
+
+.typing-indicator span:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.typing-indicator span:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes typingBounce {
+  0%, 80%, 100% { 
+    transform: scale(0.6);
+    opacity: 0.4;
+  }
+  40% { 
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* ═══ UTILITY CLASSES ═══ */
+.hidden { display: none !important; }
+.visible { display: block !important; }
+
+/* Glow effects on hover for interactive elements */
+.glow-hover {
+  transition: box-shadow var(--transition-fast);
+}
+
+.glow-hover:hover {
+  box-shadow: 0 0 20px var(--cyan-glow-subtle);
 }
 </style>
 </head>
 <body>
-<div id="app">
-  <header id="header">
-    <div class="header-title">
-      <div class="header-ascii">&#9556;&#9552;&#9552;&#9552;&#9552;&#9552;&#9552; SONICODER v2 &#9552;&#9552;&#9552;&#9552;&#9552;&#9552;&#9562;</div>
-      <div class="header-subtitle">AI Code Agent | MCP Support | <span id="header-model-name">Loading...</span></div>
+
+<!-- Animated Background -->
+<div class="bg-canvas">
+  <div class="bg-gradient-mesh"></div>
+  <div class="particles-container" id="particles"></div>
+  <div class="grid-overlay"></div>
+  <div class="scanline"></div>
+</div>
+
+<!-- Main App Container -->
+<div class="app-container">
+
+  <!-- Header -->
+  <header class="header">
+    <div class="header-left">
+      <div class="logo" onclick="newChat()">
+        <div class="logo-icon">⚡</div>
+        <div class="logo-text">
+          <span class="logo-title">SoniCoder</span>
+          <span class="logo-version">v2.0 AI Agent</span>
+        </div>
+      </div>
     </div>
-    <div class="header-actions">
-      <div class="pill" id="model-pill">
-        <span class="dot loading" id="model-dot"></span>
-        <span id="model-pill-text">Loading...</span>
+    
+    <div class="header-center">
+      <div class="model-selector" onclick="toggleModelMenu()">
+        <span class="model-dot" id="model-dot"></span>
+        <span class="model-text" id="model-pill-text">Loading...</span>
+        <span style="font-size: 10px; color: var(--text-muted);">▼</span>
       </div>
-      <select id="model-select" title="Switch AI model"></select>
-      <div class="pill mcp-pill" id="mcp-pill">
-        <span class="dot disconnected" id="mcp-dot"></span>
+      
+      <div class="status-pill">
+        <span class="dot" id="mcp-dot"></span>
         <span id="mcp-pill-text">MCP</span>
       </div>
-      <button class="header-btn" onclick="newChat()" title="Start a new chat session">[NEW]</button>
+    </div>
+    
+    <div class="header-right">
+      <button class="btn-icon" onclick="refreshWorkspace()" title="Refresh Workspace">↻</button>
+      <button class="btn-icon" onclick="newChat()" title="New Chat">+</button>
     </div>
   </header>
 
-  <div id="banner">
-    Powered by <a id="banner-model-link" href="https://huggingface.co/openbmb/MiniCPM5-1B" target="_blank" rel="noopener"><strong id="banner-model-name">MiniCPM5-1B</strong></a> running locally &mdash; no external APIs. Supports MCP tools, multiple 1B models, and agentic code generation with Gemini CLI patterns.
-  </div>
-
-  <div id="main">
-    <div id="terminal-panel">
-      <div class="panel-label">Terminal</div>
-      <div id="chat-messages"></div>
-      <div id="input-area">
-        <div id="input-row">
-          <span class="input-prompt">&#10095;</span>
-          <textarea id="chat-input" rows="1" placeholder="Describe what you want to build..." spellcheck="false"></textarea>
-          <button id="btn-send" onclick="handleSend()" title="Send message">&#10148;</button>
-          <button id="btn-stop" onclick="stopGeneration()" title="Stop generation">&#9632; STOP</button>
+  <!-- Main Content -->
+  <main class="main-content">
+    
+    <!-- Sidebar -->
+    <aside class="sidebar">
+      <div class="sidebar-header">
+        <span class="sidebar-title">Workspace</span>
+        <div class="sidebar-actions">
+          <button class="btn-sidebar-action" onclick="refreshWorkspace()" title="Refresh">↻</button>
+        </div>
+      </div>
+      
+      <div class="sidebar-content">
+        <div class="file-tree" id="files-tree"></div>
+        <div class="file-viewer" id="file-viewer"></div>
+      </div>
+      
+      <div class="sidebar-section">
+        <div class="sidebar-section-title">🔌 MCP Servers</div>
+        <div class="sidebar-content" style="padding: 0 12px;">
+          <div id="mcp-content"></div>
         </div>
-        <div id="options-row">
-          <div class="opt-group">
+      </div>
+    </aside>
+
+    <!-- Chat Area -->
+    <section class="chat-area">
+      <div class="chat-messages" id="chat-messages">
+        <!-- Messages will be inserted here -->
+      </div>
+      
+      <!-- Input Area -->
+      <div class="input-area">
+        <div class="options-bar">
+          <div class="option-group">
             <label>Lang</label>
-            <select id="opt-language" onchange="updateFrameworkOptions()" title="Target language">
+            <select class="option-select" id="opt-language" onchange="updateFrameworkOptions()">
               <option value="">Auto</option>
             </select>
           </div>
-          <div class="opt-group">
+          
+          <div class="option-group">
             <label>FW</label>
-            <select id="opt-framework" title="Target framework">
+            <select class="option-select" id="opt-framework">
               <option value="">Auto</option>
             </select>
           </div>
-          <div class="opt-group">
+          
+          <div class="option-group">
             <label>Skill</label>
-            <select id="opt-skill" title="Apply a skill (use /skill command for multiple)">
+            <select class="option-select" id="opt-skill">
               <option value="">None</option>
             </select>
           </div>
-          <div class="opt-group">
+          
+          <div class="option-group">
             <label>Agent</label>
-            <select id="opt-agent" title="Activate a custom agent persona" onchange="setActiveAgent(this.value)">
+            <select class="option-select" id="opt-agent" onchange="setActiveAgent(this.value)">
               <option value="">Default</option>
             </select>
           </div>
-          <label class="opt-toggle" id="opt-search-toggle" title="Search the web before generating">
+          
+          <label class="option-checkbox">
             <input type="checkbox" id="opt-search">
-            <span class="toggle-dot"></span>
-            <span>Web</span>
+            <span>Web Search</span>
           </label>
-          <label class="opt-icon-btn" title="Attach image (for VLM models)">
+          
+          <label class="image-upload-btn">
+            🖼️ Image
             <input type="file" id="opt-image-input" accept="image/*" onchange="handleImageSelect(event)">
-            <span>&#128247;</span>
           </label>
-          <span id="image-preview-container"></span>
+          
+          <div class="image-preview-container" id="image-preview-container"></div>
+        </div>
+        
+        <div class="input-row">
+          <div class="input-wrapper">
+            <textarea 
+              class="chat-input" 
+              id="chat-input" 
+              placeholder="Ask SoniCoder to build something amazing..."
+              rows="1"
+              onkeydown="handleKeyDown(event)"
+              oninput="autoResize(this)"
+            ></textarea>
+            <span class="input-hint">Ctrl+Enter</span>
+          </div>
+          
+          <div class="send-buttons">
+            <button class="btn-send" id="btn-send" onclick="handleSend()">➤</button>
+            <button class="btn-stop" id="btn-stop" onclick="stopGeneration()">■</button>
+          </div>
         </div>
-        <div id="examples-row"></div>
       </div>
-    </div>
+    </section>
 
-    <div id="output-panel">
-      <div id="output-tabs">
+    <!-- Output Panel -->
+    <aside class="output-panel">
+      <div class="output-tabs">
         <button class="output-tab active" data-tab="preview" onclick="switchTab('preview')">Preview</button>
-        <button class="output-tab" data-tab="console" onclick="switchTab('console')">Console</button>
         <button class="output-tab" data-tab="code" onclick="switchTab('code')">Code</button>
-        <button class="output-tab" data-tab="files" onclick="switchTab('files')">Files</button>
-        <button class="output-tab" data-tab="mcp" onclick="switchTab('mcp')">MCP</button>
+        <button class="output-tab" data-tab="console" onclick="switchTab('console')">Console</button>
       </div>
-      <div id="output-content">
-        <div class="tab-pane active" id="pane-preview">
+      
+      <div class="tab-pane active" id="pane-preview">
+        <div class="preview-container">
           <div class="preview-placeholder" id="preview-placeholder">
-            <div class="ascii-art">
- &#9484;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9488;
- &#9474;   &#9585;&#9473;&#9473;&#9473;&#9586;              &#9474;
- &#9474;   &#9474; &#9654; &#9474;  OUTPUT      &#9474;
- &#9474;   &#9589;&#9473;&#9473;&#9473;&#9588;              &#9474;
- &#9492;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9472;&#9496;</div>
-            <div class="placeholder-text">Generated code preview will appear here</div>
+            <div class="preview-placeholder-icon">🖥️</div>
+            <div class="preview-placeholder-text">Preview will appear here<br><small>when HTML is generated</small></div>
+          </div>
+          <iframe class="preview-iframe" id="preview-iframe" sandbox="allow-scripts allow-same-origin"></iframe>
+          <div class="preview-toolbar">
+            <button class="btn-fullscreen" id="btn-fullscreen" onclick="openFullscreen()">⛶ Fullscreen</button>
+          </div>
+        </div>
+      </div>
+      
+      <div class="tab-pane" id="pane-code">
+        <div class="code-container">
+          <div class="code-toolbar">
+            <span style="font-size: 11px; color: var(--text-muted);">Generated Code</span>
+            <button class="code-tab-btn" onclick="copyCode()">📋 Copy</button>
           </div>
-          <iframe id="preview-iframe" sandbox="allow-scripts"></iframe>
-          <button id="btn-fullscreen" onclick="openFullscreen()">&#10570; FULLSCREEN</button>
+          <pre class="code-content" id="generated-code">// Code will appear here...</pre>
         </div>
-        <div class="tab-pane" id="pane-console">
+      </div>
+      
+      <div class="tab-pane" id="pane-console">
+        <div class="console-container">
           <div class="console-section">
-            <div class="console-label">stdout:</div>
+            <div class="console-label stdout">● STDOUT</div>
             <div class="console-output" id="console-stdout">No output yet.</div>
           </div>
           <div class="console-section">
-            <div class="console-label">stderr:</div>
+            <div class="console-label stderr">● STDERR</div>
             <div class="console-output" id="console-stderr">No errors.</div>
           </div>
         </div>
-        <div class="tab-pane" id="pane-code">
-          <div class="code-tab-header">
-            <span class="code-tab-lang" id="code-tab-lang">&mdash;</span>
-            <div class="code-tab-actions">
-              <button class="code-tab-btn" onclick="copyCode()">&#128203; Copy</button>
-            </div>
-          </div>
-          <div id="code-display"><div class="code-placeholder">No code generated yet.</div></div>
-        </div>
-        <div class="tab-pane" id="pane-files">
-          <div class="files-header">
-            <span>Workspace</span>
-            <button class="code-tab-btn" onclick="refreshWorkspace()">&#8635; Refresh</button>
-          </div>
-          <div id="files-tree"></div>
-          <div id="file-viewer"><pre id="file-content"></pre></div>
-        </div>
-        <div class="tab-pane" id="pane-mcp">
-          <div id="mcp-content"><div class="mcp-empty">Loading MCP status...</div></div>
-        </div>
       </div>
-    </div>
-  </div>
+    </aside>
 
-  <div id="status-bar">
-    <div class="status-indicator status-idle" id="status-indicator">
-      <span class="status-dot">&#9679;</span>
-      <span id="status-text">LOADING MODEL...</span>
+  </main>
+
+  <!-- Status Bar -->
+  <footer class="status-bar">
+    <div class="status-left">
+      <span class="status-item status-idle" id="status-display">
+        <span class="indicator"></span>
+        <span id="status-text">IDLE</span>
+      </span>
+    </div>
+    <div class="status-right">
+      <span class="status-item">
+        <span id="header-model-name"></span>
+      </span>
+      <span class="status-item">Local Mode</span>
+      <span class="status-item">SoniCoder v2</span>
     </div>
-  </div>
+  </footer>
+
 </div>
 
-<div id="fullscreen-overlay">
-  <div id="fullscreen-bar">
-    <span>PREVIEW</span>
-    <button id="btn-exit-fullscreen" onclick="closeFullscreen()">[&#10005; CLOSE]</button>
-  </div>
-  <iframe id="fullscreen-iframe" sandbox="allow-scripts"></iframe>
+<!-- Fullscreen Overlay -->
+<div class="fullscreen-overlay" id="fullscreen-overlay">
+  <button class="fullscreen-close" onclick="closeFullscreen()">✕</button>
+  <iframe class="fullscreen-iframe" id="fullscreen-iframe" sandbox="allow-scripts allow-same-origin"></iframe>
 </div>
 
 <script>
-// ═══ STATE ═══
+// ═══════════════════════════════════════════════════════
+//   SONICODER V2 - APPLICATION LOGIC
+//   ═══════════════════════════════════════════════════════
+
+// State Management
 var state = {
   sessionId: '',
   isGenerating: false,
   modelReady: false,
-  activeTab: 'preview',
+  config: null,
   toolCalls: {},
   currentStreamDiv: null,
   lastCode: '',
-  lastCodeLang: '',
   consoleStdout: '',
   consoleStderr: '',
-  generatedFiles: [],
-  attachedImage: null,   // {dataUrl, file_url} or null
-  config: null,           // last loaded runtime config
+  attachedImage: null,
+  activeTab: 'preview'
 };
 
-// ═══ INIT ═══
+// ═══ INITIALIZATION ═══
+
 document.addEventListener('DOMContentLoaded', function() {
+  initParticles();
   loadConfig();
   pollModelStatus();
-  refreshWorkspace();
   loadMcpStatus();
-
-  var input = document.getElementById('chat-input');
-  input.addEventListener('input', autoResize);
-  input.addEventListener('keydown', function(e) {
-    if (e.key === 'Enter' && e.shiftKey) { e.preventDefault(); handleSend(); }
-  });
-
-  // Wire up the Web search toggle
-  var searchToggle = document.getElementById('opt-search-toggle');
-  searchToggle.addEventListener('click', function(e) {
-    e.preventDefault();
-    var cb = document.getElementById('opt-search');
-    cb.checked = !cb.checked;
-    searchToggle.classList.toggle('active', cb.checked);
-  });
+  refreshWorkspace();
+  
+  // Add welcome message
+  addMessage('system', 'Welcome to **SoniCoder v2** — Your AI Code Agent. What would you like to build today?');
 });
 
-function autoResize() {
-  var el = document.getElementById('chat-input');
-  el.style.height = 'auto';
-  el.style.height = Math.min(el.scrollHeight, 120) + 'px';
-}
-
-// ═══ API HELPERS ═══
-
-function setStatus(cls, text) {
-  var ind = document.getElementById('status-indicator');
-  ind.className = 'status-indicator ' + cls;
-  document.getElementById('status-text').textContent = text;
+function initParticles() {
+  var container = document.getElementById('particles');
+  var particleCount = 30;
+  
+  for (var i = 0; i < particleCount; i++) {
+    var particle = document.createElement('div');
+    particle.className = 'particle';
+    particle.style.left = Math.random() * 100 + '%';
+    particle.style.width = (Math.random() * 3 + 1) + 'px';
+    particle.style.height = particle.style.width;
+    particle.style.animationDuration = (Math.random() * 20 + 15) + 's';
+    particle.style.animationDelay = (Math.random() * 20) + 's';
+    container.appendChild(particle);
+  }
 }
 
 async function loadConfig() {
   try {
-    var resp = await fetch('/api/get_config');
-    var config = await resp.json();
-    state.config = config;
-    var sel = document.getElementById('model-select');
-    sel.innerHTML = '';
-    (config.models || []).forEach(function(m) {
-      var opt = document.createElement('option');
-      opt.value = m.key;
-      opt.textContent = m.name + ' (' + m.size_gb + 'GB)';
-      if (m.key === config.default_model) opt.selected = true;
-      sel.appendChild(opt);
-    });
-    sel.addEventListener('change', function() { switchModel(sel.value); });
+    var resp = await fetch('/api/config');
+    state.config = await resp.json();
+    var config = state.config;
 
     // Populate language selector
     var langSel = document.getElementById('opt-language');
@@ -614,21 +2403,20 @@ async function pollModelStatus() {
 
     if (data.status === 'ready') {
       state.modelReady = true;
-      dot.className = 'dot ready';
+      dot.className = 'model-dot ready';
       pillText.textContent = data.model_name || 'Ready';
       document.getElementById('header-model-name').textContent = data.model_name || '';
-      document.getElementById('banner-model-name').textContent = data.model_name || '';
       setStatus('status-success', 'MODEL READY');
       setTimeout(function() {
         if (!state.isGenerating) setStatus('status-idle', 'IDLE');
       }, 3000);
       return;
     } else if (data.status === 'loading') {
-      dot.className = 'dot loading';
+      dot.className = 'model-dot loading';
       pillText.textContent = 'Loading...';
       setStatus('status-working', 'LOADING MODEL...');
     } else {
-      dot.className = 'dot error';
+      dot.className = 'model-dot error';
       pillText.textContent = 'Error';
       setStatus('status-error', 'MODEL ERROR');
     }
@@ -638,7 +2426,7 @@ async function pollModelStatus() {
 
 async function switchModel(key) {
   try {
-    document.getElementById('model-dot').className = 'dot loading';
+    document.getElementById('model-dot').className = 'model-dot loading';
     document.getElementById('model-pill-text').textContent = 'Switching...';
     setStatus('status-working', 'SWITCHING MODEL...');
     await fetch('/api/switch_model', {
@@ -657,7 +2445,6 @@ async function refreshWorkspace() {
     tree.style.display = 'block';
     document.getElementById('file-viewer').style.display = 'none';
 
-    // The backend returns {success: bool, tree: {name, type, children: [...]}}
     var rootNode = data.tree;
     if (!rootNode || typeof rootNode === 'string') {
       tree.innerHTML = '<div class="ws-empty">' + escHtml(rootNode || '(empty workspace)') + '</div>';
@@ -668,7 +2455,7 @@ async function refreshWorkspace() {
       if (!node) return '';
       var name = escHtml(node.name || '');
       if (node.type === 'dir') {
-        var html = '<div class="ws-dir"><span class="ws-dir-name">&#128193; ' + name + '</span>';
+        var html = '<div class="ws-dir"><span class="ws-dir-name">' + name + '</span>';
         if (node.children && node.children.length > 0) {
           html += '<div class="ws-children">';
           for (var i = 0; i < node.children.length; i++) {
@@ -680,7 +2467,7 @@ async function refreshWorkspace() {
         return html;
       } else {
         var size = node.size ? ' (' + formatSize(node.size) + ')' : '';
-        return '<div class="ws-file" data-path="' + name + '" onclick="openWorkspaceFile(\'' + name.replace(/'/g, "\\'") + '\")"><span>&#128196; ' + name + size + '</span></div>';
+        return '<div class="ws-file" data-path="' + name + '" onclick="openWorkspaceFile(\'' + name.replace(/'/g, "\\'") + '\')"><span>' + name + size + '</span></div>';
       }
     }
 
@@ -716,7 +2503,7 @@ async function openWorkspaceFile(path) {
     tree.style.display = 'none';
     var viewer = document.getElementById('file-viewer');
     viewer.style.display = 'block';
-    viewer.innerHTML = '<div class="file-viewer-header"><button onclick="refreshWorkspace()">&#8634; Back</button><span>' + escHtml(path) + '</span></div><pre class="file-viewer-content">' + escHtml(data.content || '') + '</pre>';
+    viewer.innerHTML = '<div class="file-viewer-header"><button onclick="refreshWorkspace()">↻ Back</button><span>' + escHtml(path) + '</span></div><pre class="file-viewer-content">' + escHtml(data.content || '') + '</pre>';
   } catch(e) {
     alert('Error reading file: ' + e.message);
   }
@@ -765,7 +2552,6 @@ async function loadMcpStatus() {
 }
 
 function renderExamples(config) {
-  // Use the examples from config; fall back to a curated list if missing.
   var examples = [];
   if (config && Array.isArray(config.examples) && config.examples.length) {
     examples = config.examples.map(function(e) {
@@ -782,9 +2568,9 @@ function renderExamples(config) {
       'Make a React calculator component',
     ];
   }
-  // Show at most 6 examples so the row doesn't overflow on narrow screens.
   examples = examples.slice(0, 6);
   var row = document.getElementById('examples-row');
+  if (!row) return;
   row.innerHTML = '<span class="examples-label">Try:</span>';
   examples.forEach(function(ex) {
     var chip = document.createElement('span');
@@ -827,6 +2613,20 @@ document.addEventListener('keydown', function(e) {
   if (e.key === 'Escape') closeFullscreen();
 });
 
+// ═══ INPUT HANDLING ═══
+
+function handleKeyDown(event) {
+  if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+    event.preventDefault();
+    handleSend();
+  }
+}
+
+function autoResize(textarea) {
+  textarea.style.height = 'auto';
+  textarea.style.height = Math.min(textarea.scrollHeight, 150) + 'px';
+}
+
 // ═══ MESSAGES ═══
 
 function escHtml(t) { var d = document.createElement('div'); d.textContent = t; return d.innerHTML; }
@@ -837,14 +2637,19 @@ function addMessage(role, content, extra) {
   var div = document.createElement('div');
   div.className = 'msg msg-' + role;
   div.id = extra.msgId || '';
+  
+  var wrapper = document.createElement('div');
+  wrapper.className = 'msg-content-wrapper';
+  
   var prefix = '';
-  if (role === 'user') prefix = '<span class="msg-prefix">&gt; </span>';
-  else if (role === 'assistant') prefix = '<span class="msg-prefix">&#9670; </span>';
-  else if (role === 'system') prefix = '<span class="msg-prefix">&#9888; </span>';
-  var bodyClass = role === 'assistant' ? '<div class="msg-body">' : '';
-  var bodyClose = role === 'assistant' ? '</div>' : '';
+  if (role === 'user') prefix = '<span class="msg-prefix">▸ </span>';
+  else if (role === 'assistant') prefix = '<span class="msg-prefix">◈ </span>';
+  else if (role === 'system') prefix = '<span class="msg-prefix">◉ </span>';
+  
   var iterationHtml = extra.iteration ? '<div class="iteration-badge">Iteration ' + extra.iteration + '/' + extra.max_iterations + '</div>' : '';
-  div.innerHTML = iterationHtml + prefix + '<span class="msg-content">' + renderMd(content) + '</span>' + bodyClose + bodyClose;
+  wrapper.innerHTML = iterationHtml + prefix + '<span class="msg-content">' + renderMd(content) + '</span>';
+  
+  div.appendChild(wrapper);
   container.appendChild(div);
   container.scrollTop = container.scrollHeight;
   return div;
@@ -856,7 +2661,7 @@ function renderMd(text) {
   // Code blocks
   text = text.replace(/```(\w*)\n([\s\S]*?)```/g, function(_, lang, code) {
     var id = 'cb_' + Date.now() + Math.random().toString(36).substr(2,4);
-    return '<div class="code-block-wrap"><div class="code-block-header"><span class="code-lang">' + (lang||'code') + '</span><button class="btn-copy" onclick="copyBlock(\'' + id + '\')">&#128203; Copy</button></div><pre><code id="' + id + '">' + code.trim() + '</code></pre></div>';
+    return '<div class="code-block-wrap"><div class="code-block-header"><span class="code-lang">' + (lang||'code') + '</span><button class="btn-copy" onclick="copyBlock(\'' + id + '\')">📋 Copy</button></div><pre><code id="' + id + '">' + code.trim() + '</code></pre></div>';
   });
   text = text.replace(/`([^`]+)`/g, '<code>$1</code>');
   text = text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
@@ -874,9 +2679,9 @@ function copyBlock(id) {
   if (!el) return;
   navigator.clipboard.writeText(el.textContent).then(function() {
     var btn = el.closest('.code-block-wrap').querySelector('.btn-copy');
-    btn.textContent = 'Copied!';
+    btn.textContent = '✓ Copied!';
     btn.classList.add('copied');
-    setTimeout(function() { btn.innerHTML = '&#128203; Copy'; btn.classList.remove('copied'); }, 2000);
+    setTimeout(function() { btn.innerHTML = '📋 Copy'; btn.classList.remove('copied'); }, 2000);
   });
 }
 
@@ -884,8 +2689,8 @@ function copyCode() {
   if (!state.lastCode) return;
   navigator.clipboard.writeText(state.lastCode).then(function() {
     var btn = document.querySelector('#pane-code .code-tab-btn');
-    btn.textContent = 'Copied!';
-    setTimeout(function() { btn.innerHTML = '&#128203; Copy'; }, 2000);
+    btn.textContent = '✓ Copied!';
+    setTimeout(function() { btn.innerHTML = '📋 Copy'; }, 2000);
   });
 }
 
@@ -906,7 +2711,7 @@ function addToolCall(toolName, args) {
   }
   div.innerHTML =
     '<div class="tool-header">' +
-      '<span class="tool-icon">&#9889;</span>' +
+      '<span class="tool-icon">⚡</span>' +
       '<span class="tool-name">' + escHtml(toolName) + '</span>' +
       '<span class="tool-badge running">RUNNING</span>' +
     '</div>' +
@@ -1056,8 +2861,6 @@ async function handleSend() {
               break;
             case 'complete':
               finalizeStream(ev.content || 'Done.');
-              // Always refresh workspace on completion — files may have been
-              // written via write_file tool calls OR via the fallback extractor.
               setTimeout(refreshWorkspace, 500);
               setStatus('status-success', 'COMPLETE');
               setTimeout(function() { if (!state.isGenerating) setStatus('status-idle', 'IDLE'); }, 3000);
@@ -1120,7 +2923,7 @@ function showPreview(html) {
   var btn = document.getElementById('btn-fullscreen');
   placeholder.style.display = 'none';
   iframe.style.display = 'block';
-  btn.style.display = 'block';
+  btn.style.display = 'inline-block';
   iframe.srcdoc = html;
   switchTab('preview');
 }
@@ -1129,6 +2932,21 @@ function updateConsole() {
   document.getElementById('console-stdout').textContent = state.consoleStdout || 'No output yet.';
   document.getElementById('console-stderr').textContent = state.consoleStderr || 'No errors.';
 }
+
+// ═══ STATUS HELPER ═══
+
+function setStatus(className, text) {
+  var el = document.getElementById('status-display');
+  el.className = 'status-item ' + className;
+  document.getElementById('status-text').textContent = text;
+}
+
+// ═══ MODEL MENU TOGGLE (placeholder) ═══
+
+function toggleModelMenu() {
+  // Could implement dropdown menu here
+  console.log('Model menu toggle clicked');
+}
 </script>
 </body>
-</html>
+</html>