chore: release version 1.0.0

This reverts commit 9c0e898d17.

.env.example

@@ -97,6 +97,22 @@ AWS_BEDROCK_CONFIG=
 # Include this environment variable if you want more logging for debugging locally
 VITE_LOG_LEVEL=debug
 
+# Get your GitHub Personal Access Token here -
+# https://github.com/settings/tokens
+# This token is used for:
+# 1. Importing/cloning GitHub repositories without rate limiting
+# 2. Accessing private repositories
+# 3. Automatic GitHub authentication (no need to manually connect in the UI)
+# 
+# For classic tokens, ensure it has these scopes: repo, read:org, read:user
+# For fine-grained tokens, ensure it has Repository and Organization access
+VITE_GITHUB_ACCESS_TOKEN=
+
+# Specify the type of GitHub token you're using
+# Can be 'classic' or 'fine-grained'
+# Classic tokens are recommended for broader access
+VITE_GITHUB_TOKEN_TYPE=classic
+
 # Example Context Values for qwen2.5-coder:32b
 # 
 # DEFAULT_NUM_CTX=32768 # Consumes 36GB of VRAM

.env.production

@@ -0,0 +1,115 @@
+# Rename this file to .env once you have filled in the below environment variables!
+
+# Get your GROQ API Key here -
+# https://console.groq.com/keys
+# You only need this environment variable set if you want to use Groq models
+GROQ_API_KEY=
+
+# Get your HuggingFace API Key here -
+# https://huggingface.co/settings/tokens
+# You only need this environment variable set if you want to use HuggingFace models
+HuggingFace_API_KEY=
+
+# Get your Open AI API Key by following these instructions -
+# https://help.openai.com/en/articles/4936850-where-do-i-find-my-openai-api-key
+# You only need this environment variable set if you want to use GPT models
+OPENAI_API_KEY=
+
+# Get your Anthropic API Key in your account settings -
+# https://console.anthropic.com/settings/keys
+# You only need this environment variable set if you want to use Claude models
+ANTHROPIC_API_KEY=
+
+# Get your OpenRouter API Key in your account settings -
+# https://openrouter.ai/settings/keys
+# You only need this environment variable set if you want to use OpenRouter models
+OPEN_ROUTER_API_KEY=
+
+# Get your Google Generative AI API Key by following these instructions -
+# https://console.cloud.google.com/apis/credentials
+# You only need this environment variable set if you want to use Google Generative AI models
+GOOGLE_GENERATIVE_AI_API_KEY=
+
+# You only need this environment variable set if you want to use oLLAMA models
+# DONT USE http://localhost:11434 due to IPV6 issues
+# USE EXAMPLE http://127.0.0.1:11434
+OLLAMA_API_BASE_URL=
+
+# You only need this environment variable set if you want to use OpenAI Like models
+OPENAI_LIKE_API_BASE_URL=
+
+# You only need this environment variable set if you want to use Together AI models
+TOGETHER_API_BASE_URL=
+
+# You only need this environment variable set if you want to use DeepSeek models through their API
+DEEPSEEK_API_KEY=
+
+# Get your OpenAI Like API Key
+OPENAI_LIKE_API_KEY=
+
+# Get your Together API Key
+TOGETHER_API_KEY=
+
+# You only need this environment variable set if you want to use Hyperbolic models
+HYPERBOLIC_API_KEY=
+HYPERBOLIC_API_BASE_URL=
+
+# Get your Mistral API Key by following these instructions -
+# https://console.mistral.ai/api-keys/
+# You only need this environment variable set if you want to use Mistral models
+MISTRAL_API_KEY=
+
+# Get the Cohere Api key by following these instructions -
+# https://dashboard.cohere.com/api-keys
+# You only need this environment variable set if you want to use Cohere models
+COHERE_API_KEY=
+
+# Get LMStudio Base URL from LM Studio Developer Console
+# Make sure to enable CORS
+# DONT USE http://localhost:1234 due to IPV6 issues
+# Example: http://127.0.0.1:1234
+LMSTUDIO_API_BASE_URL=
+
+# Get your xAI API key
+# https://x.ai/api
+# You only need this environment variable set if you want to use xAI models
+XAI_API_KEY=
+
+# Get your Perplexity API Key here - 
+# https://www.perplexity.ai/settings/api
+# You only need this environment variable set if you want to use Perplexity models
+PERPLEXITY_API_KEY=
+
+# Get your AWS configuration
+# https://console.aws.amazon.com/iam/home
+AWS_BEDROCK_CONFIG=
+
+# Include this environment variable if you want more logging for debugging locally
+VITE_LOG_LEVEL=
+
+# Get your GitHub Personal Access Token here -
+# https://github.com/settings/tokens
+# This token is used for:
+# 1. Importing/cloning GitHub repositories without rate limiting
+# 2. Accessing private repositories
+# 3. Automatic GitHub authentication (no need to manually connect in the UI)
+# 
+# For classic tokens, ensure it has these scopes: repo, read:org, read:user
+# For fine-grained tokens, ensure it has Repository and Organization access
+VITE_GITHUB_ACCESS_TOKEN=
+
+# Specify the type of GitHub token you're using
+# Can be 'classic' or 'fine-grained'
+# Classic tokens are recommended for broader access
+VITE_GITHUB_TOKEN_TYPE=
+
+# Netlify Authentication
+VITE_NETLIFY_ACCESS_TOKEN=
+
+# Example Context Values for qwen2.5-coder:32b
+# 
+# DEFAULT_NUM_CTX=32768 # Consumes 36GB of VRAM
+# DEFAULT_NUM_CTX=24576 # Consumes 32GB of VRAM
+# DEFAULT_NUM_CTX=12288 # Consumes 26GB of VRAM
+# DEFAULT_NUM_CTX=6144 # Consumes 24GB of VRAM
+DEFAULT_NUM_CTX=

.eslintrc.json

@@ -0,0 +1,15 @@
+{
+    "env": {
+      "browser": true,
+      "es2021": true
+    },
+    "extends": [
+      "eslint:recommended",
+      "plugin:prettier/recommended"
+    ],
+    "rules": {
+      // example: turn off console warnings
+      "no-console": "off"
+    }
+  }
+  

.github/workflows/docker.yaml

@@ -2,11 +2,14 @@ name: Docker Publish
 
 on:
   push:
-    branches:
-      - main
-      - stable
+    branches: [main, stable]
+    tags: ['v*', '*.*.*']
   workflow_dispatch:
 
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
 permissions:
   packages: write
   contents: read
@@ -18,13 +21,14 @@ env:
 jobs:
   docker-build-publish:
     runs-on: ubuntu-latest
+    # timeout-minutes: 30
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
-
+      
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
-
+        
       - name: Log in to GitHub Container Registry
         uses: docker/login-action@v3
         with:
@@ -37,25 +41,22 @@ jobs:
         uses: docker/metadata-action@v4
         with:
           images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=raw,value=latest,enable=${{ github.ref == 'refs/heads/main' }}
+            type=raw,value=stable,enable=${{ github.ref == 'refs/heads/stable' }}
+            type=ref,event=tag
+            type=sha,format=short
+            type=raw,value=${{ github.ref_name }},enable=${{ startsWith(github.ref, 'refs/tags/') || github.ref == 'refs/heads/main' || github.ref == 'refs/heads/stable' }}
 
-      - name: Build and push Docker image for main
-        if: github.ref == 'refs/heads/main'
+      - name: Build and push Docker image
         uses: docker/build-push-action@v6
         with:
           context: .
+          platforms: linux/amd64,linux/arm64
+          target: bolt-ai-production
           push: true
-          tags: |
-            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:latest
-            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }}
-          labels: ${{ steps.meta.outputs.labels }}
-
-      - name: Build and push Docker image for stable
-        if: github.ref == 'refs/heads/stable'
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          push: true
-          tags: |
-            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:stable
-            ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ github.sha }}
+          tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
+          
+      - name: Check manifest
+        run: docker buildx imagetools inspect ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }}

.github/workflows/electron.yml

@@ -0,0 +1,98 @@
+name: Electron Build and Release
+
+on:
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: 'Tag for the release (e.g., v1.0.0). Leave empty if not applicable.'
+        required: false
+  push:
+    branches:
+      - electron
+    tags:
+      - 'v*'
+
+permissions:
+  contents: write
+
+jobs:
+  build:
+    runs-on: ${{ matrix.os }}
+    
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest, macos-latest] # Use unsigned macOS builds for now
+        node-version: [18.18.0]
+      fail-fast: false
+
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 9.14.4
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v3
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      # Install Linux dependencies
+      - name: Install Linux dependencies
+        if: matrix.os == 'ubuntu-latest'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y rpm
+
+      # Build
+      - name: Build Electron app
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NODE_OPTIONS: "--max_old_space_size=4096"
+        run: |
+          if [ "$RUNNER_OS" == "Windows" ]; then
+            pnpm run electron:build:win
+          elif [ "$RUNNER_OS" == "macOS" ]; then
+            pnpm run electron:build:mac
+          else
+            pnpm run electron:build:linux
+          fi
+        shell: bash
+
+      # Create Release
+      - name: Create Release
+        uses: softprops/action-gh-release@v2
+        with:
+          # Use the workflow_dispatch input tag if available, else use the Git ref name.
+          tag_name: ${{ github.event_name == 'workflow_dispatch' && github.event.inputs.tag || github.ref_name }}
+          # Only branch pushes remain drafts. For workflow_dispatch and tag pushes the release is published.
+          draft: ${{ github.event_name != 'workflow_dispatch' && github.ref_type == 'branch' }}
+          # For tag pushes, name the release as "Release <tagname>", otherwise "Electron Release".
+          name: ${{ (github.event_name == 'push' && github.ref_type == 'tag') && format('Release {0}', github.ref_name) || 'Electron Release' }}
+          files: |
+            dist/*.exe
+            dist/*.dmg
+            dist/*.deb
+            dist/*.AppImage
+            dist/*.zip
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -25,6 +25,7 @@ dist-ssr
 /.history
 /.cache
 /build
+functions/build/
 .env.local
 .env
 .dev.vars
@@ -44,3 +45,4 @@ changelogUI.md
 docs/instructions/Roadmap.md
 .cursorrules
 *.md
+.qodo

.tool-versions

@@ -1,2 +0,0 @@
-nodejs 20.15.1
-pnpm 9.4.0

CHANGES.md

@@ -0,0 +1,92 @@
+# File and Folder Locking Feature Implementation
+
+## Overview
+
+This implementation adds persistent file and folder locking functionality to the BoltDIY project. When a file or folder is locked, it cannot be modified by either the user or the AI until it is unlocked. All locks are scoped to the current chat/project to prevent locks from one project affecting files with matching names in other projects.
+
+## New Files
+
+### 1. `app/components/chat/LockAlert.tsx`
+
+- A dedicated alert component for displaying lock-related error messages
+- Features a distinctive amber/yellow color scheme and lock icon
+- Provides clear instructions to the user about locked files
+
+### 2. `app/lib/persistence/lockedFiles.ts`
+
+- Core functionality for persisting file and folder locks in localStorage
+- Provides functions for adding, removing, and retrieving locked files and folders
+- Defines the lock modes: "full" (no modifications) and "scoped" (only additions allowed)
+- Implements chat ID scoping to isolate locks to specific projects
+
+### 3. `app/utils/fileLocks.ts`
+
+- Utility functions for checking if a file or folder is locked
+- Helps avoid circular dependencies between components and stores
+- Provides a consistent interface for lock checking across the application
+- Extracts chat ID from URL for project-specific lock scoping
+
+## Modified Files
+
+### 1. `app/components/chat/ChatAlert.tsx`
+
+- Updated to use the new LockAlert component for locked file errors
+- Maintains backward compatibility with other error types
+
+### 2. `app/components/editor/codemirror/CodeMirrorEditor.tsx`
+
+- Added checks to prevent editing of locked files
+- Updated to use the new fileLocks utility
+- Displays appropriate tooltips when a user attempts to edit a locked file
+
+### 3. `app/components/workbench/EditorPanel.tsx`
+
+- Added safety checks for unsavedFiles to prevent errors
+- Improved handling of locked files in the editor panel
+
+### 4. `app/components/workbench/FileTree.tsx`
+
+- Added visual indicators for locked files and folders in the file tree
+- Improved handling of locked files and folders in the file tree
+- Added context menu options for locking and unlocking folders
+
+### 5. `app/lib/stores/editor.ts`
+
+- Added checks to prevent updating locked files
+- Improved error handling for locked files
+
+### 6. `app/lib/stores/files.ts`
+
+- Added core functionality for locking and unlocking files and folders
+- Implemented persistence of locked files and folders across page refreshes
+- Added methods for checking if a file or folder is locked
+- Added chat ID scoping to prevent locks from affecting other projects
+
+### 7. `app/lib/stores/workbench.ts`
+
+- Added methods for locking and unlocking files and folders
+- Improved error handling for locked files and folders
+- Fixed issues with alert initialization
+- Added support for chat ID scoping of locks
+
+### 8. `app/types/actions.ts`
+
+- Added `isLockedFile` property to the ActionAlert interface
+- Improved type definitions for locked file alerts
+
+## Key Features
+
+1. **Persistent File and Folder Locking**: Locks are stored in localStorage and persist across page refreshes
+2. **Visual Indicators**: Locked files and folders are clearly marked in the UI with lock icons
+3. **Improved Error Messages**: Clear, visually distinct error messages when attempting to modify locked items
+4. **Lock Modes**: Support for both full locks (no modifications) and scoped locks (only additions allowed)
+5. **Prevention of AI Modifications**: The AI is prevented from modifying locked files and folders
+6. **Project-Specific Locks**: Locks are scoped to the current chat/project to prevent conflicts
+7. **Recursive Folder Locking**: Locking a folder automatically locks all files and subfolders within it
+
+## UI Improvements
+
+1. **Enhanced Alert Design**: Modern, visually appealing alert design with better spacing and typography
+2. **Contextual Icons**: Different icons and colors for different types of alerts
+3. **Improved Error Details**: Better formatting of error details with monospace font and left border
+4. **Responsive Buttons**: Better positioned and styled buttons with appropriate hover effects

README.md

@@ -1,8 +1,8 @@
-# bolt.diy (Previously oTToDev)
+# bolt.diy
 
 [![bolt.diy: AI-Powered Full-Stack Web Development in the Browser](./public/social_preview_index.jpg)](https://bolt.diy)
 
-Welcome to bolt.diy, the official open source version of Bolt.new (previously known as oTToDev and bolt.new ANY LLM), which allows you to choose the LLM that you use for each prompt! Currently, you can use OpenAI, Anthropic, Ollama, OpenRouter, Gemini, LMStudio, Mistral, xAI, HuggingFace, DeepSeek, or Groq models - and it is easily extended to use any other model supported by the Vercel AI SDK! See the instructions below for running this locally and extending it to include more models.
+Welcome to bolt.diy, the official open source version of Bolt.new, which allows you to choose the LLM that you use for each prompt! Currently, you can use OpenAI, Anthropic, Ollama, OpenRouter, Gemini, LMStudio, Mistral, xAI, HuggingFace, DeepSeek, or Groq models - and it is easily extended to use any other model supported by the Vercel AI SDK! See the instructions below for running this locally and extending it to include more models.
 
 -----
 Check the [bolt.diy Docs](https://stackblitz-labs.github.io/bolt.diy/) for more offical installation instructions and more informations.
@@ -83,7 +83,8 @@ project, please check the [project management guide](./PROJECT.md) to get starte
 - ⬜ **HIGH PRIORITY** - Prevent bolt from rewriting files as often (file locking and diffs)
 - ⬜ **HIGH PRIORITY** - Better prompting for smaller LLMs (code window sometimes doesn't start)
 - ⬜ **HIGH PRIORITY** - Run agents in the backend as opposed to a single model call
-- ⬜ Deploy directly to Vercel/Netlify/other similar platforms
+- ✅ Deploy directly to Netlify (@xKevIsDev)
+- ⬜ Supabase Integration
 - ⬜ Have LLM plan the project in a MD file for better results/transparency
 - ⬜ VSCode Integration with git-like confirmations
 - ⬜ Upload documents for knowledge - UI design templates, a code base to reference coding style, etc.
@@ -101,8 +102,9 @@ project, please check the [project management guide](./PROJECT.md) to get starte
 - **Attach images to prompts** for better contextual understanding.
 - **Integrated terminal** to view output of LLM-run commands.
 - **Revert code to earlier versions** for easier debugging and quicker changes.
-- **Download projects as ZIP** for easy portability.
+- **Download projects as ZIP** for easy portability Sync to a folder on the host.
 - **Integration-ready Docker support** for a hassle-free setup.
+- **Deploy** directly to **Netlify**
 
 ## Setup
 
@@ -241,8 +243,7 @@ This method is recommended for developers who want to:
 1. **Clone the Repository**:
 
    ```bash
-   # Using HTTPS
-   git clone https://github.com/stackblitz-labs/bolt.diy.git
+   git clone -b stable https://github.com/stackblitz-labs/bolt.diy.git
    ```
 
 2. **Navigate to Project Directory**:
@@ -251,21 +252,31 @@ This method is recommended for developers who want to:
    cd bolt.diy
    ```
 
-3. **Switch to the Main Branch**:
-   ```bash
-   git checkout main
-   ```
-4. **Install Dependencies**:
+3. **Install Dependencies**:
 
    ```bash
    pnpm install
    ```
 
-5. **Start the Development Server**:
+4. **Start the Development Server**:
    ```bash
    pnpm run dev
    ```
 
+5. **(OPTIONAL)** Switch to the Main Branch if you want to use pre-release/testbranch:
+   ```bash
+   git checkout main
+   pnpm install
+   pnpm run dev
+   ```
+  Hint: Be aware that this can have beta-features and more likely got bugs than the stable release
+
+>**Open the WebUI to test (Default: http://localhost:5173)**
+>   - Beginngers: 
+>     - Try to use a sophisticated Provider/Model like Anthropic with Claude Sonnet 3.x Models to get best results
+>     - Explanation: The System Prompt currently implemented in bolt.diy cant cover the best performance for all providers and models out there. So it works better with some models, then other, even if the models itself are perfect for >programming
+>     - Future: Planned is a Plugin/Extentions-Library so there can be different System Prompts for different Models, which will help to get better results
+
 #### Staying Updated
 
 To get the latest changes from the repository:
@@ -279,7 +290,7 @@ To get the latest changes from the repository:
 2. **Pull Latest Updates**:
 
    ```bash
-   git pull origin main
+   git pull 
    ```
 
 3. **Update Dependencies**:
@@ -349,3 +360,9 @@ Explore upcoming features and priorities on our [Roadmap](https://roadmap.sh/r/o
 ## FAQ
 
 For answers to common questions, issues, and to see a list of recommended models, visit our [FAQ Page](FAQ.md).
+
+
+# Licensing
+**Who needs a commercial WebContainer API license?**
+
+bolt.diy source code is distributed as MIT, but it uses WebContainers API that [requires licensing](https://webcontainers.io/enterprise) for production usage in a commercial, for-profit setting. (Prototypes or POCs do not require a commercial license.) If you're using the API to meet the needs of your customers, prospective customers, and/or employees, you need a license to ensure compliance with our Terms of Service. Usage of the API in violation of these terms may result in your access being revoked.

app/components/@settings/core/ControlPanel.tsx

@@ -29,7 +29,7 @@ import ProfileTab from '~/components/@settings/tabs/profile/ProfileTab';
 import SettingsTab from '~/components/@settings/tabs/settings/SettingsTab';
 import NotificationsTab from '~/components/@settings/tabs/notifications/NotificationsTab';
 import FeaturesTab from '~/components/@settings/tabs/features/FeaturesTab';
-import DataTab from '~/components/@settings/tabs/data/DataTab';
+import { DataTab } from '~/components/@settings/tabs/data/DataTab';
 import DebugTab from '~/components/@settings/tabs/debug/DebugTab';
 import { EventLogsTab } from '~/components/@settings/tabs/event-logs/EventLogsTab';
 import UpdateTab from '~/components/@settings/tabs/update/UpdateTab';
@@ -413,10 +413,10 @@ export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
   return (
     <RadixDialog.Root open={open}>
       <RadixDialog.Portal>
-        <div className="fixed inset-0 flex items-center justify-center z-[100]">
+        <div className="fixed inset-0 flex items-center justify-center z-[100] modern-scrollbar">
           <RadixDialog.Overlay asChild>
             <motion.div
-              className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+              className="absolute inset-0 bg-black/70 dark:bg-black/80 backdrop-blur-sm"
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}

app/components/@settings/tabs/connections/ConnectionDiagnostics.tsx

@@ -0,0 +1,595 @@
+import React, { useState } from 'react';
+import { toast } from 'react-toastify';
+import { Button } from '~/components/ui/Button';
+import { Badge } from '~/components/ui/Badge';
+import { classNames } from '~/utils/classNames';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/Collapsible';
+import { CodeBracketIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+
+// Helper function to safely parse JSON
+const safeJsonParse = (item: string | null) => {
+  if (!item) {
+    return null;
+  }
+
+  try {
+    return JSON.parse(item);
+  } catch (e) {
+    console.error('Failed to parse JSON from localStorage:', e);
+    return null;
+  }
+};
+
+/**
+ * A diagnostics component to help troubleshoot connection issues
+ */
+export default function ConnectionDiagnostics() {
+  const [diagnosticResults, setDiagnosticResults] = useState<any>(null);
+  const [isRunning, setIsRunning] = useState(false);
+  const [showDetails, setShowDetails] = useState(false);
+
+  // Run diagnostics when requested
+  const runDiagnostics = async () => {
+    try {
+      setIsRunning(true);
+      setDiagnosticResults(null);
+
+      // Check browser-side storage
+      const localStorageChecks = {
+        githubConnection: localStorage.getItem('github_connection'),
+        netlifyConnection: localStorage.getItem('netlify_connection'),
+        vercelConnection: localStorage.getItem('vercel_connection'),
+        supabaseConnection: localStorage.getItem('supabase_connection'),
+      };
+
+      // Get diagnostic data from server
+      const response = await fetch('/api/system/diagnostics');
+
+      if (!response.ok) {
+        throw new Error(`Diagnostics API error: ${response.status}`);
+      }
+
+      const serverDiagnostics = await response.json();
+
+      // === GitHub Checks ===
+      const githubConnectionParsed = safeJsonParse(localStorageChecks.githubConnection);
+      const githubToken = githubConnectionParsed?.token;
+      const githubAuthHeaders = {
+        ...(githubToken ? { Authorization: `Bearer ${githubToken}` } : {}),
+        'Content-Type': 'application/json',
+      };
+      console.log('Testing GitHub endpoints with token:', githubToken ? 'present' : 'missing');
+
+      const githubEndpoints = [
+        { name: 'User', url: '/api/system/git-info?action=getUser' },
+        { name: 'Repos', url: '/api/system/git-info?action=getRepos' },
+        { name: 'Default', url: '/api/system/git-info' },
+      ];
+      const githubResults = await Promise.all(
+        githubEndpoints.map(async (endpoint) => {
+          try {
+            const resp = await fetch(endpoint.url, { headers: githubAuthHeaders });
+            return { endpoint: endpoint.name, status: resp.status, ok: resp.ok };
+          } catch (error) {
+            return {
+              endpoint: endpoint.name,
+              error: error instanceof Error ? error.message : String(error),
+              ok: false,
+            };
+          }
+        }),
+      );
+
+      // === Netlify Checks ===
+      const netlifyConnectionParsed = safeJsonParse(localStorageChecks.netlifyConnection);
+      const netlifyToken = netlifyConnectionParsed?.token;
+      let netlifyUserCheck = null;
+
+      if (netlifyToken) {
+        try {
+          const netlifyResp = await fetch('https://api.netlify.com/api/v1/user', {
+            headers: { Authorization: `Bearer ${netlifyToken}` },
+          });
+          netlifyUserCheck = { status: netlifyResp.status, ok: netlifyResp.ok };
+        } catch (error) {
+          netlifyUserCheck = {
+            error: error instanceof Error ? error.message : String(error),
+            ok: false,
+          };
+        }
+      }
+
+      // === Vercel Checks ===
+      const vercelConnectionParsed = safeJsonParse(localStorageChecks.vercelConnection);
+      const vercelToken = vercelConnectionParsed?.token;
+      let vercelUserCheck = null;
+
+      if (vercelToken) {
+        try {
+          const vercelResp = await fetch('https://api.vercel.com/v2/user', {
+            headers: { Authorization: `Bearer ${vercelToken}` },
+          });
+          vercelUserCheck = { status: vercelResp.status, ok: vercelResp.ok };
+        } catch (error) {
+          vercelUserCheck = {
+            error: error instanceof Error ? error.message : String(error),
+            ok: false,
+          };
+        }
+      }
+
+      // === Supabase Checks ===
+      const supabaseConnectionParsed = safeJsonParse(localStorageChecks.supabaseConnection);
+      const supabaseUrl = supabaseConnectionParsed?.projectUrl;
+      const supabaseAnonKey = supabaseConnectionParsed?.anonKey;
+      let supabaseCheck = null;
+
+      if (supabaseUrl && supabaseAnonKey) {
+        supabaseCheck = { ok: true, status: 200, message: 'URL and Key present in localStorage' };
+      } else {
+        supabaseCheck = { ok: false, message: 'URL or Key missing in localStorage' };
+      }
+
+      // Compile results
+      const results = {
+        timestamp: new Date().toISOString(),
+        localStorage: {
+          hasGithubConnection: Boolean(localStorageChecks.githubConnection),
+          hasNetlifyConnection: Boolean(localStorageChecks.netlifyConnection),
+          hasVercelConnection: Boolean(localStorageChecks.vercelConnection),
+          hasSupabaseConnection: Boolean(localStorageChecks.supabaseConnection),
+          githubConnectionParsed,
+          netlifyConnectionParsed,
+          vercelConnectionParsed,
+          supabaseConnectionParsed,
+        },
+        apiEndpoints: {
+          github: githubResults,
+          netlify: netlifyUserCheck,
+          vercel: vercelUserCheck,
+          supabase: supabaseCheck,
+        },
+        serverDiagnostics,
+      };
+
+      setDiagnosticResults(results);
+
+      // Display simple results
+      if (results.localStorage.hasGithubConnection && results.apiEndpoints.github.some((r: { ok: boolean }) => !r.ok)) {
+        toast.error('GitHub API connections are failing. Try reconnecting.');
+      }
+
+      if (results.localStorage.hasNetlifyConnection && netlifyUserCheck && !netlifyUserCheck.ok) {
+        toast.error('Netlify API connection is failing. Try reconnecting.');
+      }
+
+      if (results.localStorage.hasVercelConnection && vercelUserCheck && !vercelUserCheck.ok) {
+        toast.error('Vercel API connection is failing. Try reconnecting.');
+      }
+
+      if (results.localStorage.hasSupabaseConnection && supabaseCheck && !supabaseCheck.ok) {
+        toast.warning('Supabase connection check failed or missing details. Verify settings.');
+      }
+
+      if (
+        !results.localStorage.hasGithubConnection &&
+        !results.localStorage.hasNetlifyConnection &&
+        !results.localStorage.hasVercelConnection &&
+        !results.localStorage.hasSupabaseConnection
+      ) {
+        toast.info('No connection data found in browser storage.');
+      }
+    } catch (error) {
+      console.error('Diagnostics error:', error);
+      toast.error('Error running diagnostics');
+      setDiagnosticResults({ error: error instanceof Error ? error.message : String(error) });
+    } finally {
+      setIsRunning(false);
+    }
+  };
+
+  // Helper to reset GitHub connection
+  const resetGitHubConnection = () => {
+    try {
+      localStorage.removeItem('github_connection');
+      document.cookie = 'githubToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+      document.cookie = 'githubUsername=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+      document.cookie = 'git:github.com=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+      toast.success('GitHub connection data cleared. Please refresh the page and reconnect.');
+      setDiagnosticResults(null);
+    } catch (error) {
+      console.error('Error clearing GitHub data:', error);
+      toast.error('Failed to clear GitHub connection data');
+    }
+  };
+
+  // Helper to reset Netlify connection
+  const resetNetlifyConnection = () => {
+    try {
+      localStorage.removeItem('netlify_connection');
+      document.cookie = 'netlifyToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+      toast.success('Netlify connection data cleared. Please refresh the page and reconnect.');
+      setDiagnosticResults(null);
+    } catch (error) {
+      console.error('Error clearing Netlify data:', error);
+      toast.error('Failed to clear Netlify connection data');
+    }
+  };
+
+  // Helper to reset Vercel connection
+  const resetVercelConnection = () => {
+    try {
+      localStorage.removeItem('vercel_connection');
+      toast.success('Vercel connection data cleared. Please refresh the page and reconnect.');
+      setDiagnosticResults(null);
+    } catch (error) {
+      console.error('Error clearing Vercel data:', error);
+      toast.error('Failed to clear Vercel connection data');
+    }
+  };
+
+  // Helper to reset Supabase connection
+  const resetSupabaseConnection = () => {
+    try {
+      localStorage.removeItem('supabase_connection');
+      toast.success('Supabase connection data cleared. Please refresh the page and reconnect.');
+      setDiagnosticResults(null);
+    } catch (error) {
+      console.error('Error clearing Supabase data:', error);
+      toast.error('Failed to clear Supabase connection data');
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      {/* Connection Status Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {/* GitHub Connection Card */}
+        <div className="p-4 rounded-lg bg-bolt-elements-background dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 dark:hover:border-bolt-elements-borderColorActive/70 transition-all duration-200 h-[180px] flex flex-col">
+          <div className="flex items-center gap-2">
+            <div className="i-ph:github-logo text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent w-4 h-4" />
+            <div className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+              GitHub Connection
+            </div>
+          </div>
+          {diagnosticResults ? (
+            <>
+              <div className="flex items-center gap-2 mt-2">
+                <span
+                  className={classNames(
+                    'text-xl font-semibold',
+                    diagnosticResults.localStorage.hasGithubConnection
+                      ? 'text-green-500 dark:text-green-400'
+                      : 'text-red-500 dark:text-red-400',
+                  )}
+                >
+                  {diagnosticResults.localStorage.hasGithubConnection ? 'Connected' : 'Not Connected'}
+                </span>
+              </div>
+              {diagnosticResults.localStorage.hasGithubConnection && (
+                <>
+                  <div className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
+                    <div className="i-ph:user w-3.5 h-3.5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                    User: {diagnosticResults.localStorage.githubConnectionParsed?.user?.login || 'N/A'}
+                  </div>
+                  <div className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
+                    <div className="i-ph:check-circle w-3.5 h-3.5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                    API Status:{' '}
+                    <Badge
+                      variant={
+                        diagnosticResults.apiEndpoints.github.every((r: { ok: boolean }) => r.ok)
+                          ? 'default'
+                          : 'destructive'
+                      }
+                      className="ml-1"
+                    >
+                      {diagnosticResults.apiEndpoints.github.every((r: { ok: boolean }) => r.ok) ? 'OK' : 'Failed'}
+                    </Badge>
+                  </div>
+                </>
+              )}
+              {!diagnosticResults.localStorage.hasGithubConnection && (
+                <Button
+                  onClick={() => window.location.reload()}
+                  variant="outline"
+                  size="sm"
+                  className="mt-auto self-start hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors"
+                >
+                  <div className="i-ph:plug w-3.5 h-3.5 mr-1" />
+                  Connect Now
+                </Button>
+              )}
+            </>
+          ) : (
+            <div className="flex items-center justify-center h-full">
+              <div className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary flex items-center gap-2">
+                <div className="i-ph:info w-4 h-4" />
+                Run diagnostics to check connection status
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Netlify Connection Card */}
+        <div className="p-4 rounded-lg bg-bolt-elements-background dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 dark:hover:border-bolt-elements-borderColorActive/70 transition-all duration-200 h-[180px] flex flex-col">
+          <div className="flex items-center gap-2">
+            <div className="i-bolt:netlify text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent w-4 h-4" />
+            <div className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+              Netlify Connection
+            </div>
+          </div>
+          {diagnosticResults ? (
+            <>
+              <div className="flex items-center gap-2 mt-2">
+                <span
+                  className={classNames(
+                    'text-xl font-semibold',
+                    diagnosticResults.localStorage.hasNetlifyConnection
+                      ? 'text-green-500 dark:text-green-400'
+                      : 'text-red-500 dark:text-red-400',
+                  )}
+                >
+                  {diagnosticResults.localStorage.hasNetlifyConnection ? 'Connected' : 'Not Connected'}
+                </span>
+              </div>
+              {diagnosticResults.localStorage.hasNetlifyConnection && (
+                <>
+                  <div className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
+                    <div className="i-ph:user w-3.5 h-3.5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                    User:{' '}
+                    {diagnosticResults.localStorage.netlifyConnectionParsed?.user?.full_name ||
+                      diagnosticResults.localStorage.netlifyConnectionParsed?.user?.email ||
+                      'N/A'}
+                  </div>
+                  <div className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
+                    <div className="i-ph:check-circle w-3.5 h-3.5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                    API Status:{' '}
+                    <Badge
+                      variant={diagnosticResults.apiEndpoints.netlify?.ok ? 'default' : 'destructive'}
+                      className="ml-1"
+                    >
+                      {diagnosticResults.apiEndpoints.netlify?.ok ? 'OK' : 'Failed'}
+                    </Badge>
+                  </div>
+                </>
+              )}
+              {!diagnosticResults.localStorage.hasNetlifyConnection && (
+                <Button
+                  onClick={() => window.location.reload()}
+                  variant="outline"
+                  size="sm"
+                  className="mt-auto self-start hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors"
+                >
+                  <div className="i-ph:plug w-3.5 h-3.5 mr-1" />
+                  Connect Now
+                </Button>
+              )}
+            </>
+          ) : (
+            <div className="flex items-center justify-center h-full">
+              <div className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary flex items-center gap-2">
+                <div className="i-ph:info w-4 h-4" />
+                Run diagnostics to check connection status
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Vercel Connection Card */}
+        <div className="p-4 rounded-lg bg-bolt-elements-background dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 dark:hover:border-bolt-elements-borderColorActive/70 transition-all duration-200 h-[180px] flex flex-col">
+          <div className="flex items-center gap-2">
+            <div className="i-si:vercel text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent w-4 h-4" />
+            <div className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+              Vercel Connection
+            </div>
+          </div>
+          {diagnosticResults ? (
+            <>
+              <div className="flex items-center gap-2 mt-2">
+                <span
+                  className={classNames(
+                    'text-xl font-semibold',
+                    diagnosticResults.localStorage.hasVercelConnection
+                      ? 'text-green-500 dark:text-green-400'
+                      : 'text-red-500 dark:text-red-400',
+                  )}
+                >
+                  {diagnosticResults.localStorage.hasVercelConnection ? 'Connected' : 'Not Connected'}
+                </span>
+              </div>
+              {diagnosticResults.localStorage.hasVercelConnection && (
+                <>
+                  <div className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
+                    <div className="i-ph:user w-3.5 h-3.5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                    User:{' '}
+                    {diagnosticResults.localStorage.vercelConnectionParsed?.user?.username ||
+                      diagnosticResults.localStorage.vercelConnectionParsed?.user?.user?.username ||
+                      'N/A'}
+                  </div>
+                  <div className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
+                    <div className="i-ph:check-circle w-3.5 h-3.5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                    API Status:{' '}
+                    <Badge
+                      variant={diagnosticResults.apiEndpoints.vercel?.ok ? 'default' : 'destructive'}
+                      className="ml-1"
+                    >
+                      {diagnosticResults.apiEndpoints.vercel?.ok ? 'OK' : 'Failed'}
+                    </Badge>
+                  </div>
+                </>
+              )}
+              {!diagnosticResults.localStorage.hasVercelConnection && (
+                <Button
+                  onClick={() => window.location.reload()}
+                  variant="outline"
+                  size="sm"
+                  className="mt-auto self-start hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors"
+                >
+                  <div className="i-ph:plug w-3.5 h-3.5 mr-1" />
+                  Connect Now
+                </Button>
+              )}
+            </>
+          ) : (
+            <div className="flex items-center justify-center h-full">
+              <div className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary flex items-center gap-2">
+                <div className="i-ph:info w-4 h-4" />
+                Run diagnostics to check connection status
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Supabase Connection Card */}
+        <div className="p-4 rounded-lg bg-bolt-elements-background dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 dark:hover:border-bolt-elements-borderColorActive/70 transition-all duration-200 h-[180px] flex flex-col">
+          <div className="flex items-center gap-2">
+            <div className="i-si:supabase text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent w-4 h-4" />
+            <div className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+              Supabase Connection
+            </div>
+          </div>
+          {diagnosticResults ? (
+            <>
+              <div className="flex items-center gap-2 mt-2">
+                <span
+                  className={classNames(
+                    'text-xl font-semibold',
+                    diagnosticResults.localStorage.hasSupabaseConnection
+                      ? 'text-green-500 dark:text-green-400'
+                      : 'text-red-500 dark:text-red-400',
+                  )}
+                >
+                  {diagnosticResults.localStorage.hasSupabaseConnection ? 'Configured' : 'Not Configured'}
+                </span>
+              </div>
+              {diagnosticResults.localStorage.hasSupabaseConnection && (
+                <>
+                  <div className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5 truncate">
+                    <div className="i-ph:link w-3.5 h-3.5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent flex-shrink-0" />
+                    Project URL: {diagnosticResults.localStorage.supabaseConnectionParsed?.projectUrl || 'N/A'}
+                  </div>
+                  <div className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mt-2 flex items-center gap-1.5">
+                    <div className="i-ph:check-circle w-3.5 h-3.5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                    Config Status:{' '}
+                    <Badge
+                      variant={diagnosticResults.apiEndpoints.supabase?.ok ? 'default' : 'destructive'}
+                      className="ml-1"
+                    >
+                      {diagnosticResults.apiEndpoints.supabase?.ok ? 'OK' : 'Check Failed'}
+                    </Badge>
+                  </div>
+                </>
+              )}
+              {!diagnosticResults.localStorage.hasSupabaseConnection && (
+                <Button
+                  onClick={() => window.location.reload()}
+                  variant="outline"
+                  size="sm"
+                  className="mt-auto self-start hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors"
+                >
+                  <div className="i-ph:plug w-3.5 h-3.5 mr-1" />
+                  Configure Now
+                </Button>
+              )}
+            </>
+          ) : (
+            <div className="flex items-center justify-center h-full">
+              <div className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary flex items-center gap-2">
+                <div className="i-ph:info w-4 h-4" />
+                Run diagnostics to check connection status
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex flex-wrap gap-4">
+        <Button
+          onClick={runDiagnostics}
+          disabled={isRunning}
+          variant="outline"
+          className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors"
+        >
+          {isRunning ? (
+            <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+          ) : (
+            <div className="i-ph:activity w-4 h-4" />
+          )}
+          {isRunning ? 'Running Diagnostics...' : 'Run Diagnostics'}
+        </Button>
+
+        <Button
+          onClick={resetGitHubConnection}
+          disabled={isRunning || !diagnosticResults?.localStorage.hasGithubConnection}
+          variant="outline"
+          className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <div className="i-ph:github-logo w-4 h-4" />
+          Reset GitHub
+        </Button>
+
+        <Button
+          onClick={resetNetlifyConnection}
+          disabled={isRunning || !diagnosticResults?.localStorage.hasNetlifyConnection}
+          variant="outline"
+          className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <div className="i-si:netlify w-4 h-4" />
+          Reset Netlify
+        </Button>
+
+        <Button
+          onClick={resetVercelConnection}
+          disabled={isRunning || !diagnosticResults?.localStorage.hasVercelConnection}
+          variant="outline"
+          className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <div className="i-si:vercel w-4 h-4" />
+          Reset Vercel
+        </Button>
+
+        <Button
+          onClick={resetSupabaseConnection}
+          disabled={isRunning || !diagnosticResults?.localStorage.hasSupabaseConnection}
+          variant="outline"
+          className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+        >
+          <div className="i-si:supabase w-4 h-4" />
+          Reset Supabase
+        </Button>
+      </div>
+
+      {/* Details Panel */}
+      {diagnosticResults && (
+        <div className="mt-4">
+          <Collapsible open={showDetails} onOpenChange={setShowDetails} className="w-full">
+            <CollapsibleTrigger className="w-full">
+              <div className="flex items-center justify-between p-4 rounded-lg bg-bolt-elements-background dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 dark:hover:border-bolt-elements-borderColorActive/70 transition-all duration-200">
+                <div className="flex items-center gap-2">
+                  <CodeBracketIcon className="w-4 h-4 text-blue-500" />
+                  <span className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                    Diagnostic Details
+                  </span>
+                </div>
+                <ChevronDownIcon
+                  className={classNames(
+                    'w-4 h-4 transform transition-transform duration-200 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary',
+                    showDetails ? 'rotate-180' : '',
+                  )}
+                />
+              </div>
+            </CollapsibleTrigger>
+            <CollapsibleContent className="overflow-hidden">
+              <div className="p-4 mt-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor">
+                <pre className="text-xs overflow-auto max-h-96 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+                  {JSON.stringify(diagnosticResults, null, 2)}
+                </pre>
+              </div>
+            </CollapsibleContent>
+          </Collapsible>
+        </div>
+      )}
+    </div>
+  );
+}

app/components/@settings/tabs/connections/ConnectionsTab.tsx

@@ -1,27 +1,183 @@
 import { motion } from 'framer-motion';
-import { GithubConnection } from './GithubConnection';
-import { NetlifyConnection } from './NetlifyConnection';
+import React, { Suspense, useState } from 'react';
+import { classNames } from '~/utils/classNames';
+import ConnectionDiagnostics from './ConnectionDiagnostics';
+import { Button } from '~/components/ui/Button';
+import VercelConnection from './VercelConnection';
+
+// Use React.lazy for dynamic imports
+const GitHubConnection = React.lazy(() => import('./GithubConnection'));
+const NetlifyConnection = React.lazy(() => import('./NetlifyConnection'));
+
+// Loading fallback component
+const LoadingFallback = () => (
+  <div className="p-4 bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor">
+    <div className="flex items-center justify-center gap-2 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+      <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+      <span>Loading connection...</span>
+    </div>
+  </div>
+);
 
 export default function ConnectionsTab() {
+  const [isEnvVarsExpanded, setIsEnvVarsExpanded] = useState(false);
+  const [showDiagnostics, setShowDiagnostics] = useState(false);
+
   return (
-    <div className="space-y-4">
+    <div className="space-y-6">
       {/* Header */}
       <motion.div
-        className="flex items-center gap-2 mb-2"
+        className="flex items-center justify-between gap-2"
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.1 }}
       >
-        <div className="i-ph:plugs-connected w-5 h-5 text-purple-500" />
-        <h2 className="text-lg font-medium text-bolt-elements-textPrimary">Connection Settings</h2>
+        <div className="flex items-center gap-2">
+          <div className="i-ph:plugs-connected w-5 h-5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+          <h2 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+            Connection Settings
+          </h2>
+        </div>
+        <Button
+          onClick={() => setShowDiagnostics(!showDiagnostics)}
+          variant="outline"
+          className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary transition-colors"
+        >
+          {showDiagnostics ? (
+            <>
+              <div className="i-ph:eye-slash w-4 h-4" />
+              Hide Diagnostics
+            </>
+          ) : (
+            <>
+              <div className="i-ph:wrench w-4 h-4" />
+              Troubleshoot Connections
+            </>
+          )}
+        </Button>
       </motion.div>
-      <p className="text-sm text-bolt-elements-textSecondary mb-6">
+      <p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
         Manage your external service connections and integrations
       </p>
 
-      <div className="grid grid-cols-1 gap-4">
-        <GithubConnection />
-        <NetlifyConnection />
+      {/* Diagnostics Tool - Conditionally rendered */}
+      {showDiagnostics && <ConnectionDiagnostics />}
+
+      {/* Environment Variables Info - Collapsible */}
+      <motion.div
+        className="bg-bolt-elements-background dark:bg-bolt-elements-background rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.2 }}
+      >
+        <div className="p-6">
+          <button
+            onClick={() => setIsEnvVarsExpanded(!isEnvVarsExpanded)}
+            className={classNames(
+              'w-full bg-transparent flex items-center justify-between',
+              'hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary',
+              'dark:hover:bg-bolt-elements-item-backgroundActive/10 dark:hover:text-bolt-elements-textPrimary',
+              'rounded-md p-2 -m-2 transition-colors',
+            )}
+          >
+            <div className="flex items-center gap-2">
+              <div className="i-ph:info w-5 h-5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+              <h3 className="text-base font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                Environment Variables
+              </h3>
+            </div>
+            <div
+              className={classNames(
+                'i-ph:caret-down w-4 h-4 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary transition-transform',
+                isEnvVarsExpanded ? 'rotate-180' : '',
+              )}
+            />
+          </button>
+
+          {isEnvVarsExpanded && (
+            <div className="mt-4">
+              <p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mb-2">
+                You can configure connections using environment variables in your{' '}
+                <code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 rounded">
+                  .env.local
+                </code>{' '}
+                file:
+              </p>
+              <div className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 p-3 rounded-md text-xs font-mono overflow-x-auto">
+                <div className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+                  # GitHub Authentication
+                </div>
+                <div className="text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                  VITE_GITHUB_ACCESS_TOKEN=your_token_here
+                </div>
+                <div className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+                  # Optional: Specify token type (defaults to 'classic' if not specified)
+                </div>
+                <div className="text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                  VITE_GITHUB_TOKEN_TYPE=classic|fine-grained
+                </div>
+                <div className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mt-2">
+                  # Netlify Authentication
+                </div>
+                <div className="text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                  VITE_NETLIFY_ACCESS_TOKEN=your_token_here
+                </div>
+              </div>
+              <div className="mt-3 text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary space-y-1">
+                <p>
+                  <span className="font-medium">Token types:</span>
+                </p>
+                <ul className="list-disc list-inside pl-2 space-y-1">
+                  <li>
+                    <span className="font-medium">classic</span> - Personal Access Token with{' '}
+                    <code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 rounded">
+                      repo, read:org, read:user
+                    </code>{' '}
+                    scopes
+                  </li>
+                  <li>
+                    <span className="font-medium">fine-grained</span> - Fine-grained token with Repository and
+                    Organization access
+                  </li>
+                </ul>
+                <p className="mt-2">
+                  When set, these variables will be used automatically without requiring manual connection.
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+      </motion.div>
+
+      <div className="grid grid-cols-1 gap-6">
+        <Suspense fallback={<LoadingFallback />}>
+          <GitHubConnection />
+        </Suspense>
+        <Suspense fallback={<LoadingFallback />}>
+          <NetlifyConnection />
+        </Suspense>
+        <Suspense fallback={<LoadingFallback />}>
+          <VercelConnection />
+        </Suspense>
+      </div>
+
+      {/* Additional help text */}
+      <div className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 p-4 rounded-lg">
+        <p className="flex items-center gap-1 mb-2">
+          <span className="i-ph:lightbulb w-4 h-4 text-bolt-elements-icon-success dark:text-bolt-elements-icon-success" />
+          <span className="font-medium">Troubleshooting Tip:</span>
+        </p>
+        <p className="mb-2">
+          If you're having trouble with connections, try using the troubleshooting tool at the top of this page. It can
+          help diagnose and fix common connection issues.
+        </p>
+        <p>For persistent issues:</p>
+        <ol className="list-decimal list-inside pl-4 mt-1">
+          <li>Check your browser console for errors</li>
+          <li>Verify that your tokens have the correct permissions</li>
+          <li>Try clearing your browser cache and cookies</li>
+          <li>Ensure your browser allows third-party cookies if using integrations</li>
+        </ol>
       </div>
     </div>
   );

app/components/@settings/tabs/connections/NetlifyConnection.tsx

@@ -1,263 +1,731 @@
-import React, { useEffect, useState } from 'react';
-import { motion } from 'framer-motion';
+import React, { useState, useEffect } from 'react';
 import { toast } from 'react-toastify';
-import { useStore } from '@nanostores/react';
-import { logStore } from '~/lib/stores/logs';
 import { classNames } from '~/utils/classNames';
+import { useStore } from '@nanostores/react';
+import { netlifyConnection, updateNetlifyConnection, initializeNetlifyConnection } from '~/lib/stores/netlify';
+import type { NetlifySite, NetlifyDeploy, NetlifyBuild, NetlifyUser } from '~/types/netlify';
 import {
-  netlifyConnection,
-  isConnecting,
-  isFetchingStats,
-  updateNetlifyConnection,
-  fetchNetlifyStats,
-} from '~/lib/stores/netlify';
-import type { NetlifyUser } from '~/types/netlify';
+  CloudIcon,
+  BuildingLibraryIcon,
+  ClockIcon,
+  CodeBracketIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+  TrashIcon,
+  ArrowPathIcon,
+  LockClosedIcon,
+  LockOpenIcon,
+  RocketLaunchIcon,
+} from '@heroicons/react/24/outline';
+import { Button } from '~/components/ui/Button';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/Collapsible';
+import { formatDistanceToNow } from 'date-fns';
+import { Badge } from '~/components/ui/Badge';
 
-export function NetlifyConnection() {
+// Add the Netlify logo SVG component at the top of the file
+const NetlifyLogo = () => (
+  <svg viewBox="0 0 40 40" className="w-5 h-5">
+    <path
+      fill="currentColor"
+      d="M28.589 14.135l-.014-.006c-.008-.003-.016-.006-.023-.013a.11.11 0 0 1-.028-.093l.773-4.726 3.625 3.626-3.77 1.604a.083.083 0 0 1-.033.006h-.015c-.005-.003-.01-.007-.02-.017a1.716 1.716 0 0 0-.495-.381zm5.258-.288l3.876 3.876c.805.806 1.208 1.208 1.674 1.355a2 2 0 0 1 1.206 0c.466-.148.869-.55 1.674-1.356L8.73 28.73l2.349-3.643c.011-.018.022-.034.04-.047.025-.018.061-.01.091 0a2.434 2.434 0 0 0 1.638-.083c.027-.01.054-.017.075.002a.19.19 0 0 1 .028.032L21.95 38.05zM7.863 27.863L5.8 25.8l4.074-1.738a.084.084 0 0 1 .033-.007c.034 0 .054.034.072.065a2.91 2.91 0 0 0 .13.184l.013.016c.012.017.004.034-.008.05l-2.25 3.493zm-2.976-2.976l-2.61-2.61c-.444-.444-.766-.766-.99-1.043l7.936 1.646a.84.84 0 0 0 .03.005c.049.008.103.017.103.063 0 .05-.059.073-.109.092l-.023.01-4.337 1.837zM.831 19.892a2 2 0 0 1 .09-.495c.148-.466.55-.868 1.356-1.674l3.34-3.34a2175.525 2175.525 0 0 0 4.626 6.687c.027.036.057.076.026.106-.146.161-.292.337-.395.528a.16.16 0 0 1-.05.062c-.013.008-.027.005-.042.002H9.78L.831 19.892zm5.68-6.403l4.491-4.491c.422.185 1.958.834 3.332 1.414 1.04.44 1.988.84 2.286.97.03.012.057.024.07.054.008.018.004.041 0 .06a2.003 2.003 0 0 0 .523 1.828c.03.03 0 .073-.026.11l-.014.021-4.56 7.063c-.012.02-.023.037-.043.05-.024.015-.058.008-.086.001a2.274 2.274 0 0 0-.543-.074c-.164 0-.342.03-.522.063h-.001c-.02.003-.038.007-.054-.005a.21.21 0 0 1-.045-.051l-4.808-7.013zm5.398-5.398l5.814-5.814c.805-.805 1.208-1.208 1.674-1.355a2 2 0 0 1 1.206 0c.466.147.869.55 1.674 1.355l1.26 1.26-4.135 6.404a.155.155 0 0 1-.041.048c-.025.017-.06.01-.09 0a2.097 2.097 0 0 0-1.92.37c-.027.028-.067.012-.101-.003-.54-.235-4.74-2.01-5.341-2.265zm12.506-3.676l3.818 3.818-.92 5.698v.015a.135.135 0 0 1-.008.038c-.01.02-.03.024-.05.03a1.83 1.83 0 0 0-.548.273.154.154 0 0 0-.02.017c-.011.012-.022.023-.04.025a.114.114 0 0 1-.043-.007l-5.818-2.472-.011-.005c-.037-.015-.081-.033-.081-.071a2.198 2.198 0 0 0-.31-.915c-.028-.046-.059-.094-.035-.141l4.066-6.303zm-3.932 8.606l5.454 2.31c.03.014.063.027.076.058a.106.106 0 0 1 0 .057c-.016.08-.03.171-.03.263v.153c0 .038-.039.054-.075.069l-.011.004c-.864.369-12.13 5.173-12.147 5.173-.017 0-.035 0-.052-.017-.03-.03 0-.072.027-.11a.76.76 0 0 0 .014-.02l4.482-6.94.008-.012c.026-.042.056-.089.104-.089l.045.007c.102.014.192.027.283.027.68 0 1.31-.331 1.69-.897a.16.16 0 0 1 .034-.04c.027-.02.067-.01.098.004zm-6.246 9.185l12.28-5.237s.018 0 .035.017c.067.067.124.112.179.154l.027.017c.025.014.05.03.052.056 0 .01 0 .016-.002.025L25.756 23.7l-.004.026c-.007.05-.014.107-.061.107a1.729 1.729 0 0 0-1.373.847l-.005.008c-.014.023-.027.045-.05.057-.021.01-.048.006-.07.001l-9.793-2.02c-.01-.002-.152-.519-.163-.52z"
+    />
+  </svg>
+);
+
+// Add new interface for site actions
+interface SiteAction {
+  name: string;
+  icon: React.ComponentType<any>;
+  action: (siteId: string) => Promise<void>;
+  requiresConfirmation?: boolean;
+  variant?: 'default' | 'destructive' | 'outline';
+}
+
+export default function NetlifyConnection() {
   const connection = useStore(netlifyConnection);
-  const connecting = useStore(isConnecting);
-  const fetchingStats = useStore(isFetchingStats);
-  const [isSitesExpanded, setIsSitesExpanded] = useState(false);
+  const [tokenInput, setTokenInput] = useState('');
+  const [fetchingStats, setFetchingStats] = useState(false);
+  const [sites, setSites] = useState<NetlifySite[]>([]);
+  const [deploys, setDeploys] = useState<NetlifyDeploy[]>([]);
+  const [builds, setBuilds] = useState<NetlifyBuild[]>([]);
+  const [deploymentCount, setDeploymentCount] = useState(0);
+  const [lastUpdated, setLastUpdated] = useState('');
+  const [isStatsOpen, setIsStatsOpen] = useState(false);
+  const [activeSiteIndex, setActiveSiteIndex] = useState(0);
+  const [isActionLoading, setIsActionLoading] = useState(false);
+  const [isConnecting, setIsConnecting] = useState(false);
 
-  useEffect(() => {
-    const fetchSites = async () => {
-      if (connection.user && connection.token) {
-        await fetchNetlifyStats(connection.token);
-      }
-    };
-    fetchSites();
-  }, [connection.user, connection.token]);
+  // Add site actions
+  const siteActions: SiteAction[] = [
+    {
+      name: 'Clear Cache',
+      icon: ArrowPathIcon,
+      action: async (siteId: string) => {
+        try {
+          const response = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}/cache`, {
+            method: 'POST',
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+            },
+          });
 
-  const handleConnect = async (event: React.FormEvent) => {
-    event.preventDefault();
-    isConnecting.set(true);
+          if (!response.ok) {
+            throw new Error('Failed to clear cache');
+          }
 
+          toast.success('Site cache cleared successfully');
+        } catch (err: unknown) {
+          const error = err instanceof Error ? err.message : 'Unknown error';
+          toast.error(`Failed to clear site cache: ${error}`);
+        }
+      },
+    },
+    {
+      name: 'Delete Site',
+      icon: TrashIcon,
+      action: async (siteId: string) => {
+        try {
+          const response = await fetch(`https://api.netlify.com/api/v1/sites/${siteId}`, {
+            method: 'DELETE',
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+            },
+          });
+
+          if (!response.ok) {
+            throw new Error('Failed to delete site');
+          }
+
+          toast.success('Site deleted successfully');
+          fetchNetlifyStats(connection.token);
+        } catch (err: unknown) {
+          const error = err instanceof Error ? err.message : 'Unknown error';
+          toast.error(`Failed to delete site: ${error}`);
+        }
+      },
+      requiresConfirmation: true,
+      variant: 'destructive',
+    },
+  ];
+
+  // Add deploy management functions
+  const handleDeploy = async (siteId: string, deployId: string, action: 'lock' | 'unlock' | 'publish') => {
     try {
-      const response = await fetch('https://api.netlify.com/api/v1/user', {
+      setIsActionLoading(true);
+
+      const endpoint =
+        action === 'publish'
+          ? `https://api.netlify.com/api/v1/sites/${siteId}/deploys/${deployId}/restore`
+          : `https://api.netlify.com/api/v1/deploys/${deployId}/${action}`;
+
+      const response = await fetch(endpoint, {
+        method: 'POST',
         headers: {
           Authorization: `Bearer ${connection.token}`,
-          'Content-Type': 'application/json',
         },
       });
 
       if (!response.ok) {
-        throw new Error('Invalid token or unauthorized');
+        throw new Error(`Failed to ${action} deploy`);
+      }
+
+      toast.success(`Deploy ${action}ed successfully`);
+      fetchNetlifyStats(connection.token);
+    } catch (err: unknown) {
+      const error = err instanceof Error ? err.message : 'Unknown error';
+      toast.error(`Failed to ${action} deploy: ${error}`);
+    } finally {
+      setIsActionLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    // Initialize connection with environment token if available
+    initializeNetlifyConnection();
+  }, []);
+
+  useEffect(() => {
+    // Check if we have a connection with a token but no stats
+    if (connection.user && connection.token && (!connection.stats || !connection.stats.sites)) {
+      fetchNetlifyStats(connection.token);
+    }
+
+    // Update local state from connection
+    if (connection.stats) {
+      setSites(connection.stats.sites || []);
+      setDeploys(connection.stats.deploys || []);
+      setBuilds(connection.stats.builds || []);
+      setDeploymentCount(connection.stats.deploys?.length || 0);
+      setLastUpdated(connection.stats.lastDeployTime || '');
+    }
+  }, [connection]);
+
+  const handleConnect = async () => {
+    if (!tokenInput) {
+      toast.error('Please enter a Netlify API token');
+      return;
+    }
+
+    setIsConnecting(true);
+
+    try {
+      const response = await fetch('https://api.netlify.com/api/v1/user', {
+        headers: {
+          Authorization: `Bearer ${tokenInput}`,
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
       }
 
       const userData = (await response.json()) as NetlifyUser;
+
+      // Update the connection store
       updateNetlifyConnection({
         user: userData,
-        token: connection.token,
+        token: tokenInput,
       });
 
-      await fetchNetlifyStats(connection.token);
-      toast.success('Successfully connected to Netlify');
+      toast.success('Connected to Netlify successfully');
+
+      // Fetch stats after successful connection
+      fetchNetlifyStats(tokenInput);
     } catch (error) {
-      console.error('Auth error:', error);
-      logStore.logError('Failed to authenticate with Netlify', { error });
-      toast.error('Failed to connect to Netlify');
-      updateNetlifyConnection({ user: null, token: '' });
+      console.error('Error connecting to Netlify:', error);
+      toast.error(`Failed to connect to Netlify: ${error instanceof Error ? error.message : 'Unknown error'}`);
     } finally {
-      isConnecting.set(false);
+      setIsConnecting(false);
+      setTokenInput('');
     }
   };
 
   const handleDisconnect = () => {
+    // Clear from localStorage
+    localStorage.removeItem('netlify_connection');
+
+    // Remove cookies
+    document.cookie = 'netlifyToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+
+    // Update the store
     updateNetlifyConnection({ user: null, token: '' });
     toast.success('Disconnected from Netlify');
   };
 
+  const fetchNetlifyStats = async (token: string) => {
+    setFetchingStats(true);
+
+    try {
+      // Fetch sites
+      const sitesResponse = await fetch('https://api.netlify.com/api/v1/sites', {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (!sitesResponse.ok) {
+        throw new Error(`Failed to fetch sites: ${sitesResponse.statusText}`);
+      }
+
+      const sitesData = (await sitesResponse.json()) as NetlifySite[];
+      setSites(sitesData);
+
+      // Fetch recent deploys for the first site (if any)
+      let deploysData: NetlifyDeploy[] = [];
+      let buildsData: NetlifyBuild[] = [];
+      let lastDeployTime = '';
+
+      if (sitesData && sitesData.length > 0) {
+        const firstSite = sitesData[0];
+
+        // Fetch deploys
+        const deploysResponse = await fetch(`https://api.netlify.com/api/v1/sites/${firstSite.id}/deploys`, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        if (deploysResponse.ok) {
+          deploysData = (await deploysResponse.json()) as NetlifyDeploy[];
+          setDeploys(deploysData);
+          setDeploymentCount(deploysData.length);
+
+          // Get the latest deploy time
+          if (deploysData.length > 0) {
+            lastDeployTime = deploysData[0].created_at;
+            setLastUpdated(lastDeployTime);
+
+            // Fetch builds for the site
+            const buildsResponse = await fetch(`https://api.netlify.com/api/v1/sites/${firstSite.id}/builds`, {
+              headers: {
+                Authorization: `Bearer ${token}`,
+              },
+            });
+
+            if (buildsResponse.ok) {
+              buildsData = (await buildsResponse.json()) as NetlifyBuild[];
+              setBuilds(buildsData);
+            }
+          }
+        }
+      }
+
+      // Update the stats in the store
+      updateNetlifyConnection({
+        stats: {
+          sites: sitesData,
+          deploys: deploysData,
+          builds: buildsData,
+          lastDeployTime,
+          totalSites: sitesData.length,
+        },
+      });
+
+      toast.success('Netlify stats updated');
+    } catch (error) {
+      console.error('Error fetching Netlify stats:', error);
+      toast.error(`Failed to fetch Netlify stats: ${error instanceof Error ? error.message : 'Unknown error'}`);
+    } finally {
+      setFetchingStats(false);
+    }
+  };
+
+  const renderStats = () => {
+    if (!connection.user || !connection.stats) {
+      return null;
+    }
+
+    return (
+      <div className="mt-6">
+        <Collapsible open={isStatsOpen} onOpenChange={setIsStatsOpen}>
+          <CollapsibleTrigger asChild>
+            <div className="flex items-center justify-between p-4 rounded-lg bg-bolt-elements-background dark:bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70 dark:hover:border-bolt-elements-borderColorActive/70 transition-all duration-200">
+              <div className="flex items-center gap-2">
+                <div className="i-ph:chart-bar w-4 h-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                <span className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                  Netlify Stats
+                </span>
+              </div>
+              <div
+                className={classNames(
+                  'i-ph:caret-down w-4 h-4 transform transition-transform duration-200 text-bolt-elements-textSecondary',
+                  isStatsOpen ? 'rotate-180' : '',
+                )}
+              />
+            </div>
+          </CollapsibleTrigger>
+          <CollapsibleContent className="overflow-hidden">
+            <div className="space-y-4 mt-4">
+              <div className="flex flex-wrap items-center gap-4">
+                <Badge
+                  variant="outline"
+                  className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
+                >
+                  <BuildingLibraryIcon className="h-4 w-4 text-bolt-elements-item-contentAccent" />
+                  <span>{connection.stats.totalSites} Sites</span>
+                </Badge>
+                <Badge
+                  variant="outline"
+                  className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
+                >
+                  <RocketLaunchIcon className="h-4 w-4 text-bolt-elements-item-contentAccent" />
+                  <span>{deploymentCount} Deployments</span>
+                </Badge>
+                {lastUpdated && (
+                  <Badge
+                    variant="outline"
+                    className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
+                  >
+                    <ClockIcon className="h-4 w-4 text-bolt-elements-item-contentAccent" />
+                    <span>Updated {formatDistanceToNow(new Date(lastUpdated))} ago</span>
+                  </Badge>
+                )}
+              </div>
+              {sites.length > 0 && (
+                <div className="mt-4 space-y-4">
+                  <div className="bg-bolt-elements-background dark:bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg p-4">
+                    <div className="flex items-center justify-between mb-4">
+                      <h4 className="text-sm font-medium flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                        <BuildingLibraryIcon className="h-4 w-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                        Your Sites
+                      </h4>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => fetchNetlifyStats(connection.token)}
+                        disabled={fetchingStats}
+                        className="flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive/10"
+                      >
+                        <ArrowPathIcon
+                          className={classNames(
+                            'h-4 w-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent',
+                            { 'animate-spin': fetchingStats },
+                          )}
+                        />
+                        {fetchingStats ? 'Refreshing...' : 'Refresh'}
+                      </Button>
+                    </div>
+                    <div className="space-y-3">
+                      {sites.map((site, index) => (
+                        <div
+                          key={site.id}
+                          className={classNames(
+                            'bg-bolt-elements-background dark:bg-bolt-elements-background-depth-1 border rounded-lg p-4 transition-all',
+                            activeSiteIndex === index
+                              ? 'border-bolt-elements-item-contentAccent bg-bolt-elements-item-backgroundActive/10'
+                              : 'border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive/70',
+                          )}
+                          onClick={() => {
+                            setActiveSiteIndex(index);
+                          }}
+                        >
+                          <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-2">
+                              <CloudIcon className="h-5 w-5 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                              <span className="font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                                {site.name}
+                              </span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <Badge
+                                variant={site.published_deploy?.state === 'ready' ? 'default' : 'destructive'}
+                                className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
+                              >
+                                {site.published_deploy?.state === 'ready' ? (
+                                  <CheckCircleIcon className="h-4 w-4 text-green-500" />
+                                ) : (
+                                  <XCircleIcon className="h-4 w-4 text-red-500" />
+                                )}
+                                <span className="text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                                  {site.published_deploy?.state || 'Unknown'}
+                                </span>
+                              </Badge>
+                            </div>
+                          </div>
+
+                          <div className="mt-3 flex items-center gap-2">
+                            <a
+                              href={site.ssl_url || site.url}
+                              target="_blank"
+                              rel="noopener noreferrer"
+                              className="text-sm flex items-center gap-1 transition-colors text-bolt-elements-link-text hover:text-bolt-elements-link-textHover dark:text-white dark:hover:text-bolt-elements-link-textHover"
+                              onClick={(e) => e.stopPropagation()}
+                            >
+                              <CloudIcon className="h-3 w-3 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                              <span className="underline decoration-1 underline-offset-2">
+                                {site.ssl_url || site.url}
+                              </span>
+                            </a>
+                          </div>
+
+                          {activeSiteIndex === index && (
+                            <>
+                              <div className="mt-4 pt-3 border-t border-bolt-elements-borderColor">
+                                <div className="flex items-center gap-2">
+                                  {siteActions.map((action) => (
+                                    <Button
+                                      key={action.name}
+                                      variant={action.variant || 'outline'}
+                                      size="sm"
+                                      onClick={async (e) => {
+                                        e.stopPropagation();
+
+                                        if (action.requiresConfirmation) {
+                                          if (!confirm(`Are you sure you want to ${action.name.toLowerCase()}?`)) {
+                                            return;
+                                          }
+                                        }
+
+                                        setIsActionLoading(true);
+                                        await action.action(site.id);
+                                        setIsActionLoading(false);
+                                      }}
+                                      disabled={isActionLoading}
+                                      className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
+                                    >
+                                      <action.icon className="h-4 w-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                                      {action.name}
+                                    </Button>
+                                  ))}
+                                </div>
+                              </div>
+                              {site.published_deploy && (
+                                <div className="mt-3 text-sm">
+                                  <div className="flex items-center gap-1">
+                                    <ClockIcon className="h-4 w-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                                    <span className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+                                      Published {formatDistanceToNow(new Date(site.published_deploy.published_at))} ago
+                                    </span>
+                                  </div>
+                                  {site.published_deploy.branch && (
+                                    <div className="flex items-center gap-1 mt-1">
+                                      <CodeBracketIcon className="h-4 w-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                                      <span className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+                                        Branch: {site.published_deploy.branch}
+                                      </span>
+                                    </div>
+                                  )}
+                                </div>
+                              )}
+                            </>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                  {activeSiteIndex !== -1 && deploys.length > 0 && (
+                    <div className="bg-bolt-elements-background dark:bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg p-4">
+                      <div className="flex items-center justify-between mb-3">
+                        <h4 className="text-sm font-medium flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                          <BuildingLibraryIcon className="h-4 w-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                          Recent Deployments
+                        </h4>
+                      </div>
+                      <div className="space-y-2">
+                        {deploys.map((deploy) => (
+                          <div
+                            key={deploy.id}
+                            className="bg-bolt-elements-background dark:bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg p-3"
+                          >
+                            <div className="flex items-center justify-between">
+                              <div className="flex items-center gap-2">
+                                <Badge
+                                  variant={
+                                    deploy.state === 'ready'
+                                      ? 'default'
+                                      : deploy.state === 'error'
+                                        ? 'destructive'
+                                        : 'outline'
+                                  }
+                                  className="flex items-center gap-1"
+                                >
+                                  {deploy.state === 'ready' ? (
+                                    <CheckCircleIcon className="h-4 w-4 text-green-500" />
+                                  ) : deploy.state === 'error' ? (
+                                    <XCircleIcon className="h-4 w-4 text-red-500" />
+                                  ) : (
+                                    <BuildingLibraryIcon className="h-4 w-4 text-bolt-elements-item-contentAccent" />
+                                  )}
+                                  <span className="text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                                    {deploy.state}
+                                  </span>
+                                </Badge>
+                              </div>
+                              <span className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+                                {formatDistanceToNow(new Date(deploy.created_at))} ago
+                              </span>
+                            </div>
+                            {deploy.branch && (
+                              <div className="mt-2 text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary flex items-center gap-1">
+                                <CodeBracketIcon className="h-3 w-3 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                                <span className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+                                  Branch: {deploy.branch}
+                                </span>
+                              </div>
+                            )}
+                            {deploy.deploy_url && (
+                              <div className="mt-2 text-xs">
+                                <a
+                                  href={deploy.deploy_url}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  className="flex items-center gap-1 transition-colors text-bolt-elements-link-text hover:text-bolt-elements-link-textHover dark:text-white dark:hover:text-bolt-elements-link-textHover"
+                                  onClick={(e) => e.stopPropagation()}
+                                >
+                                  <CloudIcon className="h-3 w-3 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                                  <span className="underline decoration-1 underline-offset-2">{deploy.deploy_url}</span>
+                                </a>
+                              </div>
+                            )}
+                            <div className="flex items-center gap-2 mt-2">
+                              <Button
+                                variant="outline"
+                                size="sm"
+                                onClick={() => handleDeploy(sites[activeSiteIndex].id, deploy.id, 'publish')}
+                                disabled={isActionLoading}
+                                className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
+                              >
+                                <BuildingLibraryIcon className="h-4 w-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                                Publish
+                              </Button>
+                              {deploy.state === 'ready' ? (
+                                <Button
+                                  variant="outline"
+                                  size="sm"
+                                  onClick={() => handleDeploy(sites[activeSiteIndex].id, deploy.id, 'lock')}
+                                  disabled={isActionLoading}
+                                  className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
+                                >
+                                  <LockClosedIcon className="h-4 w-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                                  Lock
+                                </Button>
+                              ) : (
+                                <Button
+                                  variant="outline"
+                                  size="sm"
+                                  onClick={() => handleDeploy(sites[activeSiteIndex].id, deploy.id, 'unlock')}
+                                  disabled={isActionLoading}
+                                  className="flex items-center gap-1 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary"
+                                >
+                                  <LockOpenIcon className="h-4 w-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                                  Unlock
+                                </Button>
+                              )}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                  {activeSiteIndex !== -1 && builds.length > 0 && (
+                    <div className="bg-bolt-elements-background dark:bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg p-4">
+                      <div className="flex items-center justify-between mb-3">
+                        <h4 className="text-sm font-medium flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                          <CodeBracketIcon className="h-4 w-4 text-bolt-elements-item-contentAccent dark:text-bolt-elements-item-contentAccent" />
+                          Recent Builds
+                        </h4>
+                      </div>
+                      <div className="space-y-2">
+                        {builds.map((build) => (
+                          <div
+                            key={build.id}
+                            className="bg-bolt-elements-background dark:bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg p-3"
+                          >
+                            <div className="flex items-center justify-between">
+                              <div className="flex items-center gap-2">
+                                <Badge
+                                  variant={
+                                    build.done && !build.error ? 'default' : build.error ? 'destructive' : 'outline'
+                                  }
+                                  className="flex items-center gap-1"
+                                >
+                                  {build.done && !build.error ? (
+                                    <CheckCircleIcon className="h-4 w-4" />
+                                  ) : build.error ? (
+                                    <XCircleIcon className="h-4 w-4" />
+                                  ) : (
+                                    <CodeBracketIcon className="h-4 w-4" />
+                                  )}
+                                  <span className="text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+                                    {build.done ? (build.error ? 'Failed' : 'Completed') : 'In Progress'}
+                                  </span>
+                                </Badge>
+                              </div>
+                              <span className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+                                {formatDistanceToNow(new Date(build.created_at))} ago
+                              </span>
+                            </div>
+                            {build.error && (
+                              <div className="mt-2 text-xs text-bolt-elements-textDestructive dark:text-bolt-elements-textDestructive flex items-center gap-1">
+                                <XCircleIcon className="h-3 w-3 text-bolt-elements-textDestructive dark:text-bolt-elements-textDestructive" />
+                                Error: {build.error}
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+    );
+  };
+
   return (
-    <motion.div
-      className="bg-[#FFFFFF] dark:bg-[#0A0A0A] rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A]"
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ delay: 0.3 }}
-    >
-      <div className="p-6 space-y-6">
+    <div className="space-y-6 bg-bolt-elements-background dark:bg-bolt-elements-background border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg">
+      <div className="p-6">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
-            <img
-              className="w-5 h-5"
-              height="24"
-              width="24"
-              crossOrigin="anonymous"
-              src="https://cdn.simpleicons.org/netlify"
-            />
-            <h3 className="text-base font-medium text-bolt-elements-textPrimary">Netlify Connection</h3>
+            <div className="text-[#00AD9F]">
+              <NetlifyLogo />
+            </div>
+            <h2 className="text-lg font-medium text-bolt-elements-textPrimary">Netlify Connection</h2>
           </div>
         </div>
 
         {!connection.user ? (
-          <div className="space-y-4">
-            <div>
-              <label className="block text-sm text-bolt-elements-textSecondary mb-2">Personal Access Token</label>
-              <input
-                type="password"
-                value={connection.token}
-                onChange={(e) => updateNetlifyConnection({ ...connection, token: e.target.value })}
-                disabled={connecting}
-                placeholder="Enter your Netlify personal access token"
-                className={classNames(
-                  'w-full px-3 py-2 rounded-lg text-sm',
-                  'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
-                  'border border-[#E5E5E5] dark:border-[#333333]',
-                  'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
-                  'focus:outline-none focus:ring-1 focus:ring-[#00AD9F]',
-                  'disabled:opacity-50',
-                )}
-              />
-              <div className="mt-2 text-sm text-bolt-elements-textSecondary">
-                <a
-                  href="https://app.netlify.com/user/applications#personal-access-tokens"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-[#00AD9F] hover:underline inline-flex items-center gap-1"
-                >
-                  Get your token
-                  <div className="i-ph:arrow-square-out w-4 h-4" />
-                </a>
-              </div>
-            </div>
-
-            <button
-              onClick={handleConnect}
-              disabled={connecting || !connection.token}
+          <div className="mt-4">
+            <label className="block text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mb-2">
+              API Token
+            </label>
+            <input
+              type="password"
+              value={tokenInput}
+              onChange={(e) => setTokenInput(e.target.value)}
+              placeholder="Enter your Netlify API token"
               className={classNames(
-                'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
-                'bg-[#00AD9F] text-white',
-                'hover:bg-[#00968A]',
-                'disabled:opacity-50 disabled:cursor-not-allowed',
+                'w-full px-3 py-2 rounded-lg text-sm',
+                'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
+                'border border-[#E5E5E5] dark:border-[#333333]',
+                'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                'focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive',
+                'disabled:opacity-50',
               )}
-            >
-              {connecting ? (
-                <>
-                  <div className="i-ph:spinner-gap animate-spin" />
-                  Connecting...
-                </>
-              ) : (
-                <>
-                  <div className="i-ph:plug-charging w-4 h-4" />
-                  Connect
-                </>
-              )}
-            </button>
+            />
+            <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+              <a
+                href="https://app.netlify.com/user/applications#personal-access-tokens"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-bolt-elements-borderColorActive hover:underline inline-flex items-center gap-1"
+              >
+                Get your token
+                <div className="i-ph:arrow-square-out w-4 h-4" />
+              </a>
+            </div>
+            <div className="flex items-center justify-between mt-4">
+              <button
+                onClick={handleConnect}
+                disabled={isConnecting || !tokenInput}
+                className={classNames(
+                  'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                  'bg-[#303030] text-white',
+                  'hover:bg-[#5E41D0] hover:text-white',
+                  'disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200',
+                  'transform active:scale-95',
+                )}
+              >
+                {isConnecting ? (
+                  <>
+                    <div className="i-ph:spinner-gap animate-spin" />
+                    Connecting...
+                  </>
+                ) : (
+                  <>
+                    <div className="i-ph:plug-charging w-4 h-4" />
+                    Connect
+                  </>
+                )}
+              </button>
+            </div>
           </div>
         ) : (
-          <div className="space-y-6">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-3">
-                <button
-                  onClick={handleDisconnect}
-                  className={classNames(
-                    'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
-                    'bg-red-500 text-white',
-                    'hover:bg-red-600',
-                  )}
-                >
-                  <div className="i-ph:plug w-4 h-4" />
-                  Disconnect
-                </button>
-                <span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
-                  <div className="i-ph:check-circle w-4 h-4 text-green-500" />
-                  Connected to Netlify
-                </span>
-              </div>
+          <div className="flex flex-col w-full gap-4 mt-4">
+            <div className="flex items-center gap-3">
+              <button
+                onClick={handleDisconnect}
+                className={classNames(
+                  'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                  'bg-red-500 text-white',
+                  'hover:bg-red-600',
+                )}
+              >
+                <div className="i-ph:plug w-4 h-4" />
+                Disconnect
+              </button>
+              <span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
+                <div className="i-ph:check-circle w-4 h-4 text-green-500" />
+                Connected to Netlify
+              </span>
             </div>
-
-            <div className="flex items-center gap-4 p-4 bg-[#F8F8F8] dark:bg-[#1A1A1A] rounded-lg">
-              <img
-                src={connection.user.avatar_url}
-                referrerPolicy="no-referrer"
-                crossOrigin="anonymous"
-                alt={connection.user.full_name}
-                className="w-12 h-12 rounded-full border-2 border-[#00AD9F]"
-              />
-              <div>
-                <h4 className="text-sm font-medium text-bolt-elements-textPrimary">{connection.user.full_name}</h4>
-                <p className="text-sm text-bolt-elements-textSecondary">{connection.user.email}</p>
-              </div>
-            </div>
-
-            {fetchingStats ? (
-              <div className="flex items-center gap-2 text-sm text-bolt-elements-textSecondary">
-                <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
-                Fetching Netlify sites...
-              </div>
-            ) : (
-              <div>
-                <button
-                  onClick={() => setIsSitesExpanded(!isSitesExpanded)}
-                  className="w-full bg-transparent text-left text-sm font-medium text-bolt-elements-textPrimary mb-3 flex items-center gap-2"
-                >
-                  <div className="i-ph:buildings w-4 h-4" />
-                  Your Sites ({connection.stats?.totalSites || 0})
-                  <div
-                    className={classNames(
-                      'i-ph:caret-down w-4 h-4 ml-auto transition-transform',
-                      isSitesExpanded ? 'rotate-180' : '',
-                    )}
-                  />
-                </button>
-                {isSitesExpanded && connection.stats?.sites?.length ? (
-                  <div className="grid gap-3">
-                    {connection.stats.sites.map((site) => (
-                      <a
-                        key={site.id}
-                        href={site.admin_url}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="block p-4 rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-[#00AD9F] dark:hover:border-[#00AD9F] transition-colors"
-                      >
-                        <div className="flex items-center justify-between">
-                          <div>
-                            <h5 className="text-sm font-medium text-bolt-elements-textPrimary flex items-center gap-2">
-                              <div className="i-ph:globe w-4 h-4 text-[#00AD9F]" />
-                              {site.name}
-                            </h5>
-                            <div className="flex items-center gap-2 mt-2 text-xs text-bolt-elements-textSecondary">
-                              <a
-                                href={site.url}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                className="hover:text-[#00AD9F]"
-                              >
-                                {site.url}
-                              </a>
-                              {site.published_deploy && (
-                                <>
-                                  <span>•</span>
-                                  <span className="flex items-center gap-1">
-                                    <div className="i-ph:clock w-3 h-3" />
-                                    {new Date(site.published_deploy.published_at).toLocaleDateString()}
-                                  </span>
-                                </>
-                              )}
-                            </div>
-                          </div>
-                          {site.build_settings?.provider && (
-                            <div className="text-xs text-bolt-elements-textSecondary px-2 py-1 rounded-md bg-[#F0F0F0] dark:bg-[#252525]">
-                              <span className="flex items-center gap-1">
-                                <div className="i-ph:git-branch w-3 h-3" />
-                                {site.build_settings.provider}
-                              </span>
-                            </div>
-                          )}
-                        </div>
-                      </a>
-                    ))}
-                  </div>
-                ) : isSitesExpanded ? (
-                  <div className="text-sm text-bolt-elements-textSecondary flex items-center gap-2">
-                    <div className="i-ph:info w-4 h-4" />
-                    No sites found in your Netlify account
-                  </div>
-                ) : null}
-              </div>
-            )}
+            {renderStats()}
           </div>
         )}
       </div>
-    </motion.div>
+    </div>
   );
 }

app/components/@settings/tabs/connections/VercelConnection.tsx

@@ -0,0 +1,290 @@
+import React, { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { toast } from 'react-toastify';
+import { useStore } from '@nanostores/react';
+import { logStore } from '~/lib/stores/logs';
+import { classNames } from '~/utils/classNames';
+import {
+  vercelConnection,
+  isConnecting,
+  isFetchingStats,
+  updateVercelConnection,
+  fetchVercelStats,
+} from '~/lib/stores/vercel';
+
+export default function VercelConnection() {
+  const connection = useStore(vercelConnection);
+  const connecting = useStore(isConnecting);
+  const fetchingStats = useStore(isFetchingStats);
+  const [isProjectsExpanded, setIsProjectsExpanded] = useState(false);
+
+  useEffect(() => {
+    const fetchProjects = async () => {
+      if (connection.user && connection.token) {
+        await fetchVercelStats(connection.token);
+      }
+    };
+    fetchProjects();
+  }, [connection.user, connection.token]);
+
+  const handleConnect = async (event: React.FormEvent) => {
+    event.preventDefault();
+    isConnecting.set(true);
+
+    try {
+      const response = await fetch('https://api.vercel.com/v2/user', {
+        headers: {
+          Authorization: `Bearer ${connection.token}`,
+          'Content-Type': 'application/json',
+        },
+      });
+
+      if (!response.ok) {
+        throw new Error('Invalid token or unauthorized');
+      }
+
+      const userData = (await response.json()) as any;
+      updateVercelConnection({
+        user: userData.user || userData, // Handle both possible structures
+        token: connection.token,
+      });
+
+      await fetchVercelStats(connection.token);
+      toast.success('Successfully connected to Vercel');
+    } catch (error) {
+      console.error('Auth error:', error);
+      logStore.logError('Failed to authenticate with Vercel', { error });
+      toast.error('Failed to connect to Vercel');
+      updateVercelConnection({ user: null, token: '' });
+    } finally {
+      isConnecting.set(false);
+    }
+  };
+
+  const handleDisconnect = () => {
+    updateVercelConnection({ user: null, token: '' });
+    toast.success('Disconnected from Vercel');
+  };
+
+  console.log('connection', connection);
+
+  return (
+    <motion.div
+      className="bg-[#FFFFFF] dark:bg-[#0A0A0A] rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A]"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.3 }}
+    >
+      <div className="p-6 space-y-6">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <img
+              className="w-5 h-5 dark:invert"
+              height="24"
+              width="24"
+              crossOrigin="anonymous"
+              src={`https://cdn.simpleicons.org/vercel/black`}
+            />
+            <h3 className="text-base font-medium text-bolt-elements-textPrimary">Vercel Connection</h3>
+          </div>
+        </div>
+
+        {!connection.user ? (
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm text-bolt-elements-textSecondary mb-2">Personal Access Token</label>
+              <input
+                type="password"
+                value={connection.token}
+                onChange={(e) => updateVercelConnection({ ...connection, token: e.target.value })}
+                disabled={connecting}
+                placeholder="Enter your Vercel personal access token"
+                className={classNames(
+                  'w-full px-3 py-2 rounded-lg text-sm',
+                  'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
+                  'border border-[#E5E5E5] dark:border-[#333333]',
+                  'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                  'focus:outline-none focus:ring-1 focus:ring-bolt-elements-borderColorActive',
+                  'disabled:opacity-50',
+                )}
+              />
+              <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+                <a
+                  href="https://vercel.com/account/tokens"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-bolt-elements-borderColorActive hover:underline inline-flex items-center gap-1"
+                >
+                  Get your token
+                  <div className="i-ph:arrow-square-out w-4 h-4" />
+                </a>
+              </div>
+            </div>
+
+            <button
+              onClick={handleConnect}
+              disabled={connecting || !connection.token}
+              className={classNames(
+                'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                'bg-[#303030] text-white',
+                'hover:bg-[#5E41D0] hover:text-white',
+                'disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200',
+                'transform active:scale-95',
+              )}
+            >
+              {connecting ? (
+                <>
+                  <div className="i-ph:spinner-gap animate-spin" />
+                  Connecting...
+                </>
+              ) : (
+                <>
+                  <div className="i-ph:plug-charging w-4 h-4" />
+                  Connect
+                </>
+              )}
+            </button>
+          </div>
+        ) : (
+          <div className="space-y-6">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                <button
+                  onClick={handleDisconnect}
+                  className={classNames(
+                    'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                    'bg-red-500 text-white',
+                    'hover:bg-red-600',
+                  )}
+                >
+                  <div className="i-ph:plug w-4 h-4" />
+                  Disconnect
+                </button>
+                <span className="text-sm text-bolt-elements-textSecondary flex items-center gap-1">
+                  <div className="i-ph:check-circle w-4 h-4 text-green-500" />
+                  Connected to Vercel
+                </span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-4 p-4 bg-[#F8F8F8] dark:bg-[#1A1A1A] rounded-lg">
+              {/* Debug output */}
+              <pre className="hidden">{JSON.stringify(connection.user, null, 2)}</pre>
+
+              <img
+                src={`https://vercel.com/api/www/avatar?u=${connection.user?.username || connection.user?.user?.username}`}
+                referrerPolicy="no-referrer"
+                crossOrigin="anonymous"
+                alt="User Avatar"
+                className="w-12 h-12 rounded-full border-2 border-bolt-elements-borderColorActive"
+              />
+              <div>
+                <h4 className="text-sm font-medium text-bolt-elements-textPrimary">
+                  {connection.user?.username || connection.user?.user?.username || 'Vercel User'}
+                </h4>
+                <p className="text-sm text-bolt-elements-textSecondary">
+                  {connection.user?.email || connection.user?.user?.email || 'No email available'}
+                </p>
+              </div>
+            </div>
+
+            {fetchingStats ? (
+              <div className="flex items-center gap-2 text-sm text-bolt-elements-textSecondary">
+                <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+                Fetching Vercel projects...
+              </div>
+            ) : (
+              <div>
+                <button
+                  onClick={() => setIsProjectsExpanded(!isProjectsExpanded)}
+                  className="w-full bg-transparent text-left text-sm font-medium text-bolt-elements-textPrimary mb-3 flex items-center gap-2"
+                >
+                  <div className="i-ph:buildings w-4 h-4" />
+                  Your Projects ({connection.stats?.totalProjects || 0})
+                  <div
+                    className={classNames(
+                      'i-ph:caret-down w-4 h-4 ml-auto transition-transform',
+                      isProjectsExpanded ? 'rotate-180' : '',
+                    )}
+                  />
+                </button>
+                {isProjectsExpanded && connection.stats?.projects?.length ? (
+                  <div className="grid gap-3">
+                    {connection.stats.projects.map((project) => (
+                      <a
+                        key={project.id}
+                        href={`https://vercel.com/dashboard/${project.id}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="block p-4 rounded-lg border border-bolt-elements-borderColor hover:border-bolt-elements-borderColorActive transition-colors"
+                      >
+                        <div className="flex items-center justify-between">
+                          <div>
+                            <h5 className="text-sm font-medium text-bolt-elements-textPrimary flex items-center gap-2">
+                              <div className="i-ph:globe w-4 h-4 text-bolt-elements-borderColorActive" />
+                              {project.name}
+                            </h5>
+                            <div className="flex items-center gap-2 mt-2 text-xs text-bolt-elements-textSecondary">
+                              {project.targets?.production?.alias && project.targets.production.alias.length > 0 ? (
+                                <>
+                                  <a
+                                    href={`https://${project.targets.production.alias.find((a: string) => a.endsWith('.vercel.app') && !a.includes('-projects.vercel.app')) || project.targets.production.alias[0]}`}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="hover:text-bolt-elements-borderColorActive"
+                                  >
+                                    {project.targets.production.alias.find(
+                                      (a: string) => a.endsWith('.vercel.app') && !a.includes('-projects.vercel.app'),
+                                    ) || project.targets.production.alias[0]}
+                                  </a>
+                                  <span>•</span>
+                                  <span className="flex items-center gap-1">
+                                    <div className="i-ph:clock w-3 h-3" />
+                                    {new Date(project.createdAt).toLocaleDateString()}
+                                  </span>
+                                </>
+                              ) : project.latestDeployments && project.latestDeployments.length > 0 ? (
+                                <>
+                                  <a
+                                    href={`https://${project.latestDeployments[0].url}`}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="hover:text-bolt-elements-borderColorActive"
+                                  >
+                                    {project.latestDeployments[0].url}
+                                  </a>
+                                  <span>•</span>
+                                  <span className="flex items-center gap-1">
+                                    <div className="i-ph:clock w-3 h-3" />
+                                    {new Date(project.latestDeployments[0].created).toLocaleDateString()}
+                                  </span>
+                                </>
+                              ) : null}
+                            </div>
+                          </div>
+                          {project.framework && (
+                            <div className="text-xs text-bolt-elements-textSecondary px-2 py-1 rounded-md bg-[#F0F0F0] dark:bg-[#252525]">
+                              <span className="flex items-center gap-1">
+                                <div className="i-ph:code w-3 h-3" />
+                                {project.framework}
+                              </span>
+                            </div>
+                          )}
+                        </div>
+                      </a>
+                    ))}
+                  </div>
+                ) : isProjectsExpanded ? (
+                  <div className="text-sm text-bolt-elements-textSecondary flex items-center gap-2">
+                    <div className="i-ph:info w-4 h-4" />
+                    No projects found in your Vercel account
+                  </div>
+                ) : null}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </motion.div>
+  );
+}

app/components/@settings/tabs/connections/components/ConnectionForm.tsx

@@ -16,7 +16,7 @@ interface ConnectionFormProps {
 export function ConnectionForm({ authState, setAuthState, onSave, onDisconnect }: ConnectionFormProps) {
   // Check for saved token on mount
   useEffect(() => {
-    const savedToken = Cookies.get(GITHUB_TOKEN_KEY) || getLocalStorage(GITHUB_TOKEN_KEY);
+    const savedToken = Cookies.get(GITHUB_TOKEN_KEY) || Cookies.get('githubToken') || getLocalStorage(GITHUB_TOKEN_KEY);
 
     if (savedToken && !authState.tokenInfo?.token) {
       setAuthState((prev: GitHubAuthState) => ({
@@ -30,6 +30,9 @@ export function ConnectionForm({ authState, setAuthState, onSave, onDisconnect }
           followers: 0,
         },
       }));
+
+      // Ensure the token is also saved with the correct key for API requests
+      Cookies.set('githubToken', savedToken);
     }
   }, []);
 

app/components/@settings/tabs/connections/components/GitHubAuthDialog.tsx

@@ -0,0 +1,190 @@
+import React, { useState } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { motion } from 'framer-motion';
+import { toast } from 'react-toastify';
+import Cookies from 'js-cookie';
+import type { GitHubUserResponse } from '~/types/GitHub';
+
+interface GitHubAuthDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function GitHubAuthDialog({ isOpen, onClose }: GitHubAuthDialogProps) {
+  const [token, setToken] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [tokenType, setTokenType] = useState<'classic' | 'fine-grained'>('classic');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!token.trim()) {
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      const response = await fetch('https://api.github.com/user', {
+        headers: {
+          Accept: 'application/vnd.github.v3+json',
+          Authorization: `Bearer ${token}`,
+        },
+      });
+
+      if (response.ok) {
+        const userData = (await response.json()) as GitHubUserResponse;
+
+        // Save connection data
+        const connectionData = {
+          token,
+          tokenType,
+          user: {
+            login: userData.login,
+            avatar_url: userData.avatar_url,
+            name: userData.name || userData.login,
+          },
+          connected_at: new Date().toISOString(),
+        };
+
+        localStorage.setItem('github_connection', JSON.stringify(connectionData));
+
+        // Set cookies for API requests
+        Cookies.set('githubToken', token);
+        Cookies.set('githubUsername', userData.login);
+        Cookies.set('git:github.com', JSON.stringify({ username: token, password: 'x-oauth-basic' }));
+
+        toast.success(`Successfully connected as ${userData.login}`);
+        setToken('');
+        onClose();
+      } else {
+        if (response.status === 401) {
+          toast.error('Invalid GitHub token. Please check and try again.');
+        } else {
+          toast.error(`GitHub API error: ${response.status} ${response.statusText}`);
+        }
+      }
+    } catch (error) {
+      console.error('Error connecting to GitHub:', error);
+      toast.error('Failed to connect to GitHub. Please try again.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999]" />
+        <div className="fixed inset-0 flex items-center justify-center z-[9999]">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            transition={{ duration: 0.2 }}
+          >
+            <Dialog.Content className="bg-white dark:bg-[#1A1A1A] rounded-lg shadow-xl max-w-sm w-full mx-4 overflow-hidden">
+              <div className="p-4 space-y-3">
+                <h2 className="text-lg font-semibold text-[#111111] dark:text-white">Access Private Repositories</h2>
+
+                <p className="text-sm text-[#666666] dark:text-[#999999]">
+                  To access private repositories, you need to connect your GitHub account by providing a personal access
+                  token.
+                </p>
+
+                <div className="bg-[#F9F9F9] dark:bg-[#252525] p-4 rounded-lg space-y-3">
+                  <h3 className="text-base font-medium text-[#111111] dark:text-white">Connect with GitHub Token</h3>
+
+                  <form onSubmit={handleSubmit} className="space-y-3">
+                    <div>
+                      <label className="block text-sm text-[#666666] dark:text-[#999999] mb-1">
+                        GitHub Personal Access Token
+                      </label>
+                      <input
+                        type="password"
+                        value={token}
+                        onChange={(e) => setToken(e.target.value)}
+                        placeholder="ghp_xxxxxxxxxxxxxxxxxxxx"
+                        className="w-full px-3 py-1.5 rounded-lg border border-[#E5E5E5] dark:border-[#333333] bg-white dark:bg-[#1A1A1A] text-[#111111] dark:text-white placeholder-[#999999] text-sm"
+                      />
+                      <div className="mt-1 text-xs text-[#666666] dark:text-[#999999]">
+                        Get your token at{' '}
+                        <a
+                          href="https://github.com/settings/tokens"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-purple-500 hover:underline"
+                        >
+                          github.com/settings/tokens
+                        </a>
+                      </div>
+                    </div>
+
+                    <div className="space-y-1">
+                      <label className="block text-sm text-[#666666] dark:text-[#999999]">Token Type</label>
+                      <div className="flex gap-4">
+                        <label className="flex items-center gap-2">
+                          <input
+                            type="radio"
+                            checked={tokenType === 'classic'}
+                            onChange={() => setTokenType('classic')}
+                            className="w-3.5 h-3.5 accent-purple-500"
+                          />
+                          <span className="text-sm text-[#111111] dark:text-white">Classic</span>
+                        </label>
+                        <label className="flex items-center gap-2">
+                          <input
+                            type="radio"
+                            checked={tokenType === 'fine-grained'}
+                            onChange={() => setTokenType('fine-grained')}
+                            className="w-3.5 h-3.5 accent-purple-500"
+                          />
+                          <span className="text-sm text-[#111111] dark:text-white">Fine-grained</span>
+                        </label>
+                      </div>
+                    </div>
+
+                    <button
+                      type="submit"
+                      disabled={isSubmitting}
+                      className="w-full py-2 bg-purple-500 hover:bg-purple-600 text-white rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+                    >
+                      {isSubmitting ? 'Connecting...' : 'Connect to GitHub'}
+                    </button>
+                  </form>
+                </div>
+
+                <div className="bg-amber-50 dark:bg-amber-900/20 p-3 rounded-lg space-y-1.5">
+                  <h3 className="text-sm text-amber-800 dark:text-amber-300 font-medium flex items-center gap-1.5">
+                    <span className="i-ph:warning-circle w-4 h-4" />
+                    Accessing Private Repositories
+                  </h3>
+                  <p className="text-xs text-amber-700 dark:text-amber-400">
+                    Important things to know about accessing private repositories:
+                  </p>
+                  <ul className="list-disc pl-4 text-xs text-amber-700 dark:text-amber-400 space-y-0.5">
+                    <li>You must be granted access to the repository by its owner</li>
+                    <li>Your GitHub token must have the 'repo' scope</li>
+                    <li>For organization repositories, you may need additional permissions</li>
+                    <li>No token can give you access to repositories you don't have permission for</li>
+                  </ul>
+                </div>
+              </div>
+
+              <div className="border-t border-[#E5E5E5] dark:border-[#333333] p-3 flex justify-end">
+                <Dialog.Close asChild>
+                  <button
+                    onClick={onClose}
+                    className="px-4 py-1.5 bg-transparent bg-[#F5F5F5] hover:bg-[#E5E5E5] dark:bg-[#252525] dark:hover:bg-[#333333] rounded-lg text-[#111111] dark:text-white transition-colors text-sm"
+                  >
+                    Close
+                  </button>
+                </Dialog.Close>
+              </div>
+            </Dialog.Content>
+          </motion.div>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

app/components/@settings/tabs/connections/components/PushToGitHubDialog.tsx

@@ -1,7 +1,10 @@
 import * as Dialog from '@radix-ui/react-dialog';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { toast } from 'react-toastify';
 import { motion } from 'framer-motion';
+import { Octokit } from '@octokit/rest';
+
+// Internal imports
 import { getLocalStorage } from '~/lib/persistence';
 import { classNames } from '~/utils/classNames';
 import type { GitHubUserResponse } from '~/types/GitHub';
@@ -10,7 +13,9 @@ import { workbenchStore } from '~/lib/stores/workbench';
 import { extractRelativePath } from '~/utils/diff';
 import { formatSize } from '~/utils/formatSize';
 import type { FileMap, File } from '~/lib/stores/files';
-import { Octokit } from '@octokit/rest';
+
+// UI Components
+import { Badge, EmptyState, StatusIndicator, SearchInput } from '~/components/ui';
 
 interface PushToGitHubDialogProps {
   isOpen: boolean;
@@ -37,6 +42,8 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
   const [isLoading, setIsLoading] = useState(false);
   const [user, setUser] = useState<GitHubUserResponse | null>(null);
   const [recentRepos, setRecentRepos] = useState<GitHubRepo[]>([]);
+  const [filteredRepos, setFilteredRepos] = useState<GitHubRepo[]>([]);
+  const [repoSearchQuery, setRepoSearchQuery] = useState('');
   const [isFetchingRepos, setIsFetchingRepos] = useState(false);
   const [showSuccessDialog, setShowSuccessDialog] = useState(false);
   const [createdRepoUrl, setCreatedRepoUrl] = useState('');
@@ -58,7 +65,34 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
     }
   }, [isOpen]);
 
-  const fetchRecentRepos = async (token: string) => {
+  /*
+   * Filter repositories based on search query
+   * const debouncedSetRepoSearchQuery = useDebouncedCallback((value: string) => setRepoSearchQuery(value), 300);
+   */
+
+  useEffect(() => {
+    if (recentRepos.length === 0) {
+      setFilteredRepos([]);
+      return;
+    }
+
+    if (!repoSearchQuery.trim()) {
+      setFilteredRepos(recentRepos);
+      return;
+    }
+
+    const query = repoSearchQuery.toLowerCase().trim();
+    const filtered = recentRepos.filter(
+      (repo) =>
+        repo.name.toLowerCase().includes(query) ||
+        (repo.description && repo.description.toLowerCase().includes(query)) ||
+        (repo.language && repo.language.toLowerCase().includes(query)),
+    );
+
+    setFilteredRepos(filtered);
+  }, [recentRepos, repoSearchQuery]);
+
+  const fetchRecentRepos = useCallback(async (token: string) => {
     if (!token) {
       logStore.logError('No GitHub token available');
       toast.error('GitHub authentication required');
@@ -68,53 +102,89 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
 
     try {
       setIsFetchingRepos(true);
+      console.log('Fetching GitHub repositories with token:', token.substring(0, 5) + '...');
 
-      const response = await fetch(
-        'https://api.github.com/user/repos?sort=updated&per_page=5&type=all&affiliation=owner,organization_member',
-        {
+      // Fetch ALL repos by paginating through all pages
+      let allRepos: GitHubRepo[] = [];
+      let page = 1;
+      let hasMore = true;
+
+      while (hasMore) {
+        const requestUrl = `https://api.github.com/user/repos?sort=updated&per_page=100&page=${page}&affiliation=owner,organization_member`;
+        const response = await fetch(requestUrl, {
           headers: {
             Accept: 'application/vnd.github.v3+json',
             Authorization: `Bearer ${token.trim()}`,
           },
-        },
-      );
+        });
 
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
+        if (!response.ok) {
+          let errorData: { message?: string } = {};
 
-        if (response.status === 401) {
-          toast.error('GitHub token expired. Please reconnect your account.');
-
-          // Clear invalid token
-          const connection = getLocalStorage('github_connection');
-
-          if (connection) {
-            localStorage.removeItem('github_connection');
-            setUser(null);
+          try {
+            errorData = await response.json();
+            console.error('Error response data:', errorData);
+          } catch (e) {
+            errorData = { message: 'Could not parse error response' };
+            console.error('Could not parse error response:', e);
           }
-        } else {
-          logStore.logError('Failed to fetch GitHub repositories', {
-            status: response.status,
-            statusText: response.statusText,
-            error: errorData,
-          });
-          toast.error(`Failed to fetch repositories: ${response.statusText}`);
+
+          if (response.status === 401) {
+            toast.error('GitHub token expired. Please reconnect your account.');
+
+            // Clear invalid token
+            const connection = getLocalStorage('github_connection');
+
+            if (connection) {
+              localStorage.removeItem('github_connection');
+              setUser(null);
+            }
+          } else if (response.status === 403 && response.headers.get('x-ratelimit-remaining') === '0') {
+            // Rate limit exceeded
+            const resetTime = response.headers.get('x-ratelimit-reset');
+            const resetDate = resetTime ? new Date(parseInt(resetTime) * 1000).toLocaleTimeString() : 'soon';
+            toast.error(`GitHub API rate limit exceeded. Limit resets at ${resetDate}`);
+          } else {
+            logStore.logError('Failed to fetch GitHub repositories', {
+              status: response.status,
+              statusText: response.statusText,
+              error: errorData,
+            });
+            toast.error(`Failed to fetch repositories: ${errorData.message || response.statusText}`);
+          }
+
+          return;
         }
 
-        return;
-      }
+        try {
+          const repos = (await response.json()) as GitHubRepo[];
+          allRepos = allRepos.concat(repos);
 
-      const repos = (await response.json()) as GitHubRepo[];
-      setRecentRepos(repos);
+          if (repos.length < 100) {
+            hasMore = false;
+          } else {
+            page += 1;
+          }
+        } catch (parseError) {
+          console.error('Error parsing JSON response:', parseError);
+          logStore.logError('Failed to parse GitHub repositories response', { parseError });
+          toast.error('Failed to parse repository data');
+          setRecentRepos([]);
+
+          return;
+        }
+      }
+      setRecentRepos(allRepos);
     } catch (error) {
+      console.error('Exception while fetching GitHub repositories:', error);
       logStore.logError('Failed to fetch GitHub repositories', { error });
       toast.error('Failed to fetch recent repositories');
     } finally {
       setIsFetchingRepos(false);
     }
-  };
+  }, []);
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
 
     const connection = getLocalStorage('github_connection');
@@ -136,15 +206,24 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
       const octokit = new Octokit({ auth: connection.token });
 
       try {
-        await octokit.repos.get({
+        const { data: existingRepo } = await octokit.repos.get({
           owner: connection.user.login,
           repo: repoName,
         });
 
         // If we get here, the repo exists
-        const confirmOverwrite = window.confirm(
-          `Repository "${repoName}" already exists. Do you want to update it? This will add or modify files in the repository.`,
-        );
+        let confirmMessage = `Repository "${repoName}" already exists. Do you want to update it? This will add or modify files in the repository.`;
+
+        // Add visibility change warning if needed
+        if (existingRepo.private !== isPrivate) {
+          const visibilityChange = isPrivate
+            ? 'This will also change the repository from public to private.'
+            : 'This will also change the repository from private to public.';
+
+          confirmMessage += `\n\n${visibilityChange}`;
+        }
+
+        const confirmOverwrite = window.confirm(confirmMessage);
 
         if (!confirmOverwrite) {
           setIsLoading(false);
@@ -177,7 +256,7 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
     } finally {
       setIsLoading(false);
     }
-  };
+  }
 
   const handleClose = () => {
     setRepoName('');
@@ -201,27 +280,46 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
               transition={{ duration: 0.2 }}
               className="w-[90vw] md:w-[600px] max-h-[85vh] overflow-y-auto"
             >
-              <Dialog.Content className="bg-white dark:bg-[#1E1E1E] rounded-lg border border-[#E5E5E5] dark:border-[#333333] shadow-xl">
+              <Dialog.Content
+                className="bg-white dark:bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark shadow-xl"
+                aria-describedby="success-dialog-description"
+              >
                 <div className="p-6 space-y-4">
                   <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2 text-green-500">
-                      <div className="i-ph:check-circle w-5 h-5" />
-                      <h3 className="text-lg font-medium">Successfully pushed to GitHub</h3>
+                    <div className="flex items-center gap-3">
+                      <div className="w-10 h-10 rounded-xl bg-green-500/10 flex items-center justify-center text-green-500">
+                        <div className="i-ph:check-circle w-5 h-5" />
+                      </div>
+                      <div>
+                        <h3 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
+                          Successfully pushed to GitHub
+                        </h3>
+                        <p
+                          id="success-dialog-description"
+                          className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark"
+                        >
+                          Your code is now available on GitHub
+                        </p>
+                      </div>
                     </div>
-                    <Dialog.Close
-                      onClick={handleClose}
-                      className="p-2 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400"
-                    >
-                      <div className="i-ph:x w-5 h-5" />
+                    <Dialog.Close asChild>
+                      <button
+                        onClick={handleClose}
+                        className="p-2 rounded-lg transition-all duration-200 ease-in-out bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary dark:text-bolt-elements-textTertiary-dark dark:hover:text-bolt-elements-textPrimary-dark hover:bg-bolt-elements-background-depth-2 dark:hover:bg-bolt-elements-background-depth-3 focus:outline-none focus:ring-2 focus:ring-bolt-elements-borderColor dark:focus:ring-bolt-elements-borderColor-dark"
+                      >
+                        <span className="i-ph:x block w-5 h-5" aria-hidden="true" />
+                        <span className="sr-only">Close dialog</span>
+                      </button>
                     </Dialog.Close>
                   </div>
 
-                  <div className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg p-3 text-left">
-                    <p className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark mb-2">
+                  <div className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg p-4 text-left border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark">
+                    <p className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark mb-2 flex items-center gap-2">
+                      <span className="i-ph:github-logo w-4 h-4 text-purple-500" />
                       Repository URL
                     </p>
                     <div className="flex items-center gap-2">
-                      <code className="flex-1 text-sm bg-bolt-elements-background dark:bg-bolt-elements-background-dark px-3 py-2 rounded border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark font-mono">
+                      <code className="flex-1 text-sm bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-4 px-3 py-2 rounded border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark font-mono">
                         {createdRepoUrl}
                       </code>
                       <motion.button
@@ -229,27 +327,28 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
                           navigator.clipboard.writeText(createdRepoUrl);
                           toast.success('URL copied to clipboard');
                         }}
-                        className="p-2 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary dark:text-bolt-elements-textSecondary-dark dark:hover:text-bolt-elements-textPrimary-dark"
-                        whileHover={{ scale: 1.1 }}
-                        whileTap={{ scale: 0.9 }}
+                        className="p-2 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary dark:text-bolt-elements-textSecondary-dark dark:hover:text-bolt-elements-textPrimary-dark bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-4 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark"
+                        whileHover={{ scale: 1.05 }}
+                        whileTap={{ scale: 0.95 }}
                       >
                         <div className="i-ph:copy w-4 h-4" />
                       </motion.button>
                     </div>
                   </div>
 
-                  <div className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg p-3">
-                    <p className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark mb-2">
+                  <div className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg p-4 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark">
+                    <p className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark mb-2 flex items-center gap-2">
+                      <span className="i-ph:files w-4 h-4 text-purple-500" />
                       Pushed Files ({pushedFiles.length})
                     </p>
-                    <div className="max-h-[200px] overflow-y-auto custom-scrollbar">
+                    <div className="max-h-[200px] overflow-y-auto custom-scrollbar pr-2">
                       {pushedFiles.map((file) => (
                         <div
                           key={file.path}
-                          className="flex items-center justify-between py-1 text-sm text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark"
+                          className="flex items-center justify-between py-1.5 text-sm text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark border-b border-bolt-elements-borderColor/30 dark:border-bolt-elements-borderColor-dark/30 last:border-0"
                         >
-                          <span className="font-mono truncate flex-1">{file.path}</span>
-                          <span className="text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark ml-2">
+                          <span className="font-mono truncate flex-1 text-xs">{file.path}</span>
+                          <span className="text-xs px-2 py-0.5 rounded-full bg-bolt-elements-background-depth-3 dark:bg-bolt-elements-background-depth-4 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark ml-2">
                             {formatSize(file.size)}
                           </span>
                         </div>
@@ -274,7 +373,7 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
                         navigator.clipboard.writeText(createdRepoUrl);
                         toast.success('URL copied to clipboard');
                       }}
-                      className="px-4 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] text-gray-600 dark:text-gray-400 hover:bg-[#E5E5E5] dark:hover:bg-[#252525] text-sm inline-flex items-center gap-2"
+                      className="px-4 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 text-sm inline-flex items-center gap-2 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark"
                       whileHover={{ scale: 1.02 }}
                       whileTap={{ scale: 0.98 }}
                     >
@@ -283,7 +382,7 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
                     </motion.button>
                     <motion.button
                       onClick={handleClose}
-                      className="px-4 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] text-gray-600 dark:text-gray-400 hover:bg-[#E5E5E5] dark:hover:bg-[#252525] text-sm"
+                      className="px-4 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 text-sm border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark"
                       whileHover={{ scale: 1.02 }}
                       whileTap={{ scale: 0.98 }}
                     >
@@ -312,29 +411,57 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
               transition={{ duration: 0.2 }}
               className="w-[90vw] md:w-[500px]"
             >
-              <Dialog.Content className="bg-white dark:bg-[#0A0A0A] rounded-lg p-6 border border-[#E5E5E5] dark:border-[#1A1A1A] shadow-xl">
-                <div className="text-center space-y-4">
+              <Dialog.Content
+                className="bg-white dark:bg-bolt-elements-background-depth-1 rounded-lg p-6 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark shadow-xl"
+                aria-describedby="connection-required-description"
+              >
+                <div className="relative text-center space-y-4">
+                  <Dialog.Close asChild>
+                    <button
+                      onClick={handleClose}
+                      className="absolute right-0 top-0 p-2 rounded-lg transition-all duration-200 ease-in-out bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary dark:text-bolt-elements-textTertiary-dark dark:hover:text-bolt-elements-textPrimary-dark hover:bg-bolt-elements-background-depth-2 dark:hover:bg-bolt-elements-background-depth-3 focus:outline-none focus:ring-2 focus:ring-bolt-elements-borderColor dark:focus:ring-bolt-elements-borderColor-dark"
+                    >
+                      <span className="i-ph:x block w-5 h-5" aria-hidden="true" />
+                      <span className="sr-only">Close dialog</span>
+                    </button>
+                  </Dialog.Close>
                   <motion.div
                     initial={{ scale: 0.8 }}
                     animate={{ scale: 1 }}
                     transition={{ delay: 0.1 }}
-                    className="mx-auto w-12 h-12 rounded-xl bg-bolt-elements-background-depth-3 flex items-center justify-center text-purple-500"
+                    className="mx-auto w-16 h-16 rounded-xl bg-bolt-elements-background-depth-3 flex items-center justify-center text-purple-500"
                   >
-                    <div className="i-ph:github-logo w-6 h-6" />
+                    <div className="i-ph:github-logo w-8 h-8" />
                   </motion.div>
-                  <h3 className="text-lg font-medium text-gray-900 dark:text-white">GitHub Connection Required</h3>
-                  <p className="text-sm text-gray-600 dark:text-gray-400">
-                    Please connect your GitHub account in Settings {'>'} Connections to push your code to GitHub.
-                  </p>
-                  <motion.button
-                    className="px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600 inline-flex items-center gap-2"
-                    whileHover={{ scale: 1.02 }}
-                    whileTap={{ scale: 0.98 }}
-                    onClick={handleClose}
+                  <h3 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
+                    GitHub Connection Required
+                  </h3>
+                  <p
+                    id="connection-required-description"
+                    className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark max-w-md mx-auto"
                   >
-                    <div className="i-ph:x-circle" />
-                    Close
-                  </motion.button>
+                    To push your code to GitHub, you need to connect your GitHub account in Settings {'>'} Connections
+                    first.
+                  </p>
+                  <div className="pt-2 flex justify-center gap-3">
+                    <motion.button
+                      className="px-4 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark text-sm hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark"
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                      onClick={handleClose}
+                    >
+                      Close
+                    </motion.button>
+                    <motion.a
+                      href="/settings/connections"
+                      className="px-4 py-2 rounded-lg bg-purple-500 text-white text-sm hover:bg-purple-600 inline-flex items-center gap-2"
+                      whileHover={{ scale: 1.02 }}
+                      whileTap={{ scale: 0.98 }}
+                    >
+                      <div className="i-ph:gear" />
+                      Go to Settings
+                    </motion.a>
+                  </div>
                 </div>
               </Dialog.Content>
             </motion.div>
@@ -356,7 +483,10 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
             transition={{ duration: 0.2 }}
             className="w-[90vw] md:w-[500px]"
           >
-            <Dialog.Content className="bg-white dark:bg-[#0A0A0A] rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A] shadow-xl">
+            <Dialog.Content
+              className="bg-white dark:bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark shadow-xl"
+              aria-describedby="push-dialog-description"
+            >
               <div className="p-6">
                 <div className="flex items-center gap-4 mb-6">
                   <motion.div
@@ -365,130 +495,189 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
                     transition={{ delay: 0.1 }}
                     className="w-10 h-10 rounded-xl bg-bolt-elements-background-depth-3 flex items-center justify-center text-purple-500"
                   >
-                    <div className="i-ph:git-branch w-5 h-5" />
+                    <div className="i-ph:github-logo w-5 h-5" />
                   </motion.div>
                   <div>
-                    <Dialog.Title className="text-lg font-medium text-gray-900 dark:text-white">
+                    <Dialog.Title className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
                       Push to GitHub
                     </Dialog.Title>
-                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                    <p
+                      id="push-dialog-description"
+                      className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark"
+                    >
                       Push your code to a new or existing GitHub repository
                     </p>
                   </div>
-                  <Dialog.Close
-                    className="ml-auto p-2 text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400"
-                    onClick={handleClose}
-                  >
-                    <div className="i-ph:x w-5 h-5" />
+                  <Dialog.Close asChild>
+                    <button
+                      onClick={handleClose}
+                      className="ml-auto p-2 rounded-lg transition-all duration-200 ease-in-out bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary dark:text-bolt-elements-textTertiary-dark dark:hover:text-bolt-elements-textPrimary-dark hover:bg-bolt-elements-background-depth-2 dark:hover:bg-bolt-elements-background-depth-3 focus:outline-none focus:ring-2 focus:ring-bolt-elements-borderColor dark:focus:ring-bolt-elements-borderColor-dark"
+                    >
+                      <span className="i-ph:x block w-5 h-5" aria-hidden="true" />
+                      <span className="sr-only">Close dialog</span>
+                    </button>
                   </Dialog.Close>
                 </div>
 
-                <div className="flex items-center gap-3 mb-6 p-3 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg">
-                  <img src={user.avatar_url} alt={user.login} className="w-10 h-10 rounded-full" />
+                <div className="flex items-center gap-3 mb-6 p-4 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark">
+                  <div className="relative">
+                    <img src={user.avatar_url} alt={user.login} className="w-10 h-10 rounded-full" />
+                    <div className="absolute -bottom-1 -right-1 w-5 h-5 rounded-full bg-purple-500 flex items-center justify-center text-white">
+                      <div className="i-ph:github-logo w-3 h-3" />
+                    </div>
+                  </div>
                   <div>
-                    <p className="text-sm font-medium text-gray-900 dark:text-white">{user.name || user.login}</p>
-                    <p className="text-sm text-gray-500 dark:text-gray-400">@{user.login}</p>
+                    <p className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
+                      {user.name || user.login}
+                    </p>
+                    <p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark">
+                      @{user.login}
+                    </p>
                   </div>
                 </div>
 
                 <form onSubmit={handleSubmit} className="space-y-4">
                   <div className="space-y-2">
-                    <label htmlFor="repoName" className="text-sm text-gray-600 dark:text-gray-400">
+                    <label
+                      htmlFor="repoName"
+                      className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark"
+                    >
                       Repository Name
                     </label>
-                    <input
-                      id="repoName"
-                      type="text"
-                      value={repoName}
-                      onChange={(e) => setRepoName(e.target.value)}
-                      placeholder="my-awesome-project"
-                      className="w-full px-4 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 border border-[#E5E5E5] dark:border-[#1A1A1A] text-gray-900 dark:text-white placeholder-gray-400"
-                      required
-                    />
+                    <div className="relative">
+                      <div className="absolute left-3 top-1/2 -translate-y-1/2 text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark">
+                        <span className="i-ph:git-branch w-4 h-4" />
+                      </div>
+                      <input
+                        id="repoName"
+                        type="text"
+                        value={repoName}
+                        onChange={(e) => setRepoName(e.target.value)}
+                        placeholder="my-awesome-project"
+                        className="w-full pl-10 px-4 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark placeholder-bolt-elements-textTertiary dark:placeholder-bolt-elements-textTertiary-dark focus:outline-none focus:ring-2 focus:ring-purple-500"
+                        required
+                      />
+                    </div>
                   </div>
 
-                  {recentRepos.length > 0 && (
-                    <div className="space-y-2">
-                      <label className="text-sm text-gray-600 dark:text-gray-400">Recent Repositories</label>
-                      <div className="space-y-2">
-                        {recentRepos.map((repo) => (
-                          <motion.button
-                            key={repo.full_name}
-                            type="button"
-                            onClick={() => setRepoName(repo.name)}
-                            className="w-full p-3 text-left rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 transition-colors group"
-                            whileHover={{ scale: 1.01 }}
-                            whileTap={{ scale: 0.99 }}
-                          >
-                            <div className="flex items-center justify-between">
-                              <div className="flex items-center gap-2">
-                                <div className="i-ph:git-repository w-4 h-4 text-purple-500" />
-                                <span className="text-sm font-medium text-gray-900 dark:text-white group-hover:text-purple-500">
-                                  {repo.name}
-                                </span>
-                              </div>
-                              {repo.private && (
-                                <span className="text-xs px-2 py-1 rounded-full bg-purple-500/10 text-purple-500">
-                                  Private
-                                </span>
-                              )}
-                            </div>
-                            {repo.description && (
-                              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400 line-clamp-2">
-                                {repo.description}
-                              </p>
-                            )}
-                            <div className="mt-2 flex items-center gap-3 text-xs text-gray-400 dark:text-gray-500">
-                              {repo.language && (
-                                <span className="flex items-center gap-1">
-                                  <div className="i-ph:code w-3 h-3" />
-                                  {repo.language}
-                                </span>
-                              )}
-                              <span className="flex items-center gap-1">
-                                <div className="i-ph:star w-3 h-3" />
-                                {repo.stargazers_count.toLocaleString()}
-                              </span>
-                              <span className="flex items-center gap-1">
-                                <div className="i-ph:git-fork w-3 h-3" />
-                                {repo.forks_count.toLocaleString()}
-                              </span>
-                              <span className="flex items-center gap-1">
-                                <div className="i-ph:clock w-3 h-3" />
-                                {new Date(repo.updated_at).toLocaleDateString()}
-                              </span>
-                            </div>
-                          </motion.button>
-                        ))}
-                      </div>
+                  <div className="space-y-2">
+                    <div className="flex items-center justify-between mb-2">
+                      <label className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark">
+                        Recent Repositories
+                      </label>
+                      <span className="text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark">
+                        {filteredRepos.length} of {recentRepos.length}
+                      </span>
                     </div>
-                  )}
+
+                    <div className="mb-2">
+                      <SearchInput
+                        placeholder="Search repositories..."
+                        value={repoSearchQuery}
+                        onChange={(e) => setRepoSearchQuery(e.target.value)}
+                        onClear={() => setRepoSearchQuery('')}
+                        className="bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark text-sm"
+                      />
+                    </div>
+
+                    {recentRepos.length === 0 && !isFetchingRepos ? (
+                      <EmptyState
+                        icon="i-ph:github-logo"
+                        title="No repositories found"
+                        description="We couldn't find any repositories in your GitHub account."
+                        variant="compact"
+                      />
+                    ) : (
+                      <div className="space-y-2 max-h-[200px] overflow-y-auto pr-2 custom-scrollbar">
+                        {filteredRepos.length === 0 && repoSearchQuery.trim() !== '' ? (
+                          <EmptyState
+                            icon="i-ph:magnifying-glass"
+                            title="No matching repositories"
+                            description="Try a different search term"
+                            variant="compact"
+                          />
+                        ) : (
+                          filteredRepos.map((repo) => (
+                            <motion.button
+                              key={repo.full_name}
+                              type="button"
+                              onClick={() => setRepoName(repo.name)}
+                              className="w-full p-3 text-left rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 transition-colors group border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark hover:border-purple-500/30"
+                              whileHover={{ scale: 1.01 }}
+                              whileTap={{ scale: 0.99 }}
+                            >
+                              <div className="flex items-center justify-between">
+                                <div className="flex items-center gap-2">
+                                  <div className="i-ph:git-branch w-4 h-4 text-purple-500" />
+                                  <span className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark group-hover:text-purple-500">
+                                    {repo.name}
+                                  </span>
+                                </div>
+                                {repo.private && (
+                                  <Badge variant="primary" size="sm" icon="i-ph:lock w-3 h-3">
+                                    Private
+                                  </Badge>
+                                )}
+                              </div>
+                              {repo.description && (
+                                <p className="mt-1 text-xs text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark line-clamp-2">
+                                  {repo.description}
+                                </p>
+                              )}
+                              <div className="mt-2 flex items-center gap-2 flex-wrap">
+                                {repo.language && (
+                                  <Badge variant="subtle" size="sm" icon="i-ph:code w-3 h-3">
+                                    {repo.language}
+                                  </Badge>
+                                )}
+                                <Badge variant="subtle" size="sm" icon="i-ph:star w-3 h-3">
+                                  {repo.stargazers_count.toLocaleString()}
+                                </Badge>
+                                <Badge variant="subtle" size="sm" icon="i-ph:git-fork w-3 h-3">
+                                  {repo.forks_count.toLocaleString()}
+                                </Badge>
+                                <Badge variant="subtle" size="sm" icon="i-ph:clock w-3 h-3">
+                                  {new Date(repo.updated_at).toLocaleDateString()}
+                                </Badge>
+                              </div>
+                            </motion.button>
+                          ))
+                        )}
+                      </div>
+                    )}
+                  </div>
 
                   {isFetchingRepos && (
-                    <div className="flex items-center justify-center py-4 text-gray-500 dark:text-gray-400">
-                      <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4 mr-2" />
-                      Loading repositories...
+                    <div className="flex items-center justify-center py-4">
+                      <StatusIndicator status="loading" pulse={true} label="Loading repositories..." />
                     </div>
                   )}
-
-                  <div className="flex items-center gap-2">
-                    <input
-                      type="checkbox"
-                      id="private"
-                      checked={isPrivate}
-                      onChange={(e) => setIsPrivate(e.target.checked)}
-                      className="rounded border-[#E5E5E5] dark:border-[#1A1A1A] text-purple-500 focus:ring-purple-500 dark:bg-[#0A0A0A]"
-                    />
-                    <label htmlFor="private" className="text-sm text-gray-600 dark:text-gray-400">
-                      Make repository private
-                    </label>
+                  <div className="p-3 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark">
+                    <div className="flex items-center gap-2">
+                      <input
+                        type="checkbox"
+                        id="private"
+                        checked={isPrivate}
+                        onChange={(e) => setIsPrivate(e.target.checked)}
+                        className="rounded border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark text-purple-500 focus:ring-purple-500 dark:bg-bolt-elements-background-depth-3"
+                      />
+                      <label
+                        htmlFor="private"
+                        className="text-sm text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark"
+                      >
+                        Make repository private
+                      </label>
+                    </div>
+                    <p className="text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark mt-2 ml-6">
+                      Private repositories are only visible to you and people you share them with
+                    </p>
                   </div>
 
                   <div className="pt-4 flex gap-2">
                     <motion.button
                       type="button"
                       onClick={handleClose}
-                      className="px-4 py-2 rounded-lg bg-[#F5F5F5] dark:bg-[#1A1A1A] text-gray-600 dark:text-gray-400 hover:bg-[#E5E5E5] dark:hover:bg-[#252525] text-sm"
+                      className="px-4 py-2 rounded-lg bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 text-sm border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark"
                       whileHover={{ scale: 1.02 }}
                       whileTap={{ scale: 0.98 }}
                     >
@@ -506,12 +695,12 @@ export function PushToGitHubDialog({ isOpen, onClose, onPush }: PushToGitHubDial
                     >
                       {isLoading ? (
                         <>
-                          <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+                          <div className="i-ph:spinner-gap animate-spin w-4 h-4" />
                           Pushing...
                         </>
                       ) : (
                         <>
-                          <div className="i-ph:git-branch w-4 h-4" />
+                          <div className="i-ph:github-logo w-4 h-4" />
                           Push to GitHub
                         </>
                       )}

app/components/@settings/tabs/connections/components/RepositoryCard.tsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import type { GitHubRepoInfo } from '~/types/GitHub';
+
+interface RepositoryCardProps {
+  repo: GitHubRepoInfo;
+  onSelect: () => void;
+}
+
+import { useMemo } from 'react';
+
+export function RepositoryCard({ repo, onSelect }: RepositoryCardProps) {
+  // Use a consistent styling for all repository cards
+  const getCardStyle = () => {
+    return 'from-bolt-elements-background-depth-1 to-bolt-elements-background-depth-1 dark:from-bolt-elements-background-depth-2-dark dark:to-bolt-elements-background-depth-2-dark';
+  };
+
+  // Format the date in a more readable format
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    const now = new Date();
+    const diffTime = Math.abs(now.getTime() - date.getTime());
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+    if (diffDays <= 1) {
+      return 'Today';
+    }
+
+    if (diffDays <= 2) {
+      return 'Yesterday';
+    }
+
+    if (diffDays <= 7) {
+      return `${diffDays} days ago`;
+    }
+
+    if (diffDays <= 30) {
+      return `${Math.floor(diffDays / 7)} weeks ago`;
+    }
+
+    return date.toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  const cardStyle = useMemo(() => getCardStyle(), []);
+
+  // const formattedDate = useMemo(() => formatDate(repo.updated_at), [repo.updated_at]);
+
+  return (
+    <motion.div
+      className={`p-5 rounded-xl bg-gradient-to-br ${cardStyle} border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark hover:border-purple-500/40 transition-all duration-300 shadow-sm hover:shadow-md`}
+      whileHover={{
+        scale: 1.02,
+        y: -2,
+        transition: { type: 'spring', stiffness: 400, damping: 17 },
+      }}
+      whileTap={{ scale: 0.98 }}
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+    >
+      <div className="flex items-start justify-between mb-3 gap-3">
+        <div className="flex items-start gap-3">
+          <div className="w-10 h-10 rounded-xl bg-bolt-elements-background-depth-1/80 dark:bg-bolt-elements-background-depth-4/80 backdrop-blur-sm flex items-center justify-center text-purple-500 shadow-sm">
+            <span className="i-ph:git-branch w-5 h-5" />
+          </div>
+          <div>
+            <h3 className="font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark text-base">
+              {repo.name}
+            </h3>
+            <p className="text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark flex items-center gap-1">
+              <span className="i-ph:user w-3 h-3" />
+              {repo.full_name.split('/')[0]}
+            </p>
+          </div>
+        </div>
+        <motion.button
+          onClick={onSelect}
+          className="px-4 py-2 h-9 rounded-lg bg-purple-500 text-white hover:bg-purple-600 transition-all duration-200 flex items-center gap-2 min-w-[100px] justify-center text-sm shadow-sm hover:shadow-md"
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+        >
+          <span className="i-ph:git-pull-request w-3.5 h-3.5" />
+          Import
+        </motion.button>
+      </div>
+
+      {repo.description && (
+        <div className="mb-4 bg-bolt-elements-background-depth-1/50 dark:bg-bolt-elements-background-depth-4/50 backdrop-blur-sm p-3 rounded-lg border border-bolt-elements-borderColor/30 dark:border-bolt-elements-borderColor-dark/30">
+          <p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark line-clamp-2">
+            {repo.description}
+          </p>
+        </div>
+      )}
+
+      <div className="flex flex-wrap items-center gap-2">
+        {repo.private && (
+          <span className="flex items-center gap-1 px-2 py-1 rounded-lg bg-purple-500/10 text-purple-600 dark:text-purple-400 text-xs">
+            <span className="i-ph:lock w-3 h-3" />
+            Private
+          </span>
+        )}
+        {repo.language && (
+          <span className="flex items-center gap-1 px-2 py-1 rounded-lg bg-bolt-elements-background-depth-1/50 dark:bg-bolt-elements-background-depth-4/50 backdrop-blur-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark text-xs border border-bolt-elements-borderColor/30 dark:border-bolt-elements-borderColor-dark/30">
+            <span className="i-ph:code w-3 h-3" />
+            {repo.language}
+          </span>
+        )}
+        <span className="flex items-center gap-1 px-2 py-1 rounded-lg bg-bolt-elements-background-depth-1/50 dark:bg-bolt-elements-background-depth-4/50 backdrop-blur-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark text-xs border border-bolt-elements-borderColor/30 dark:border-bolt-elements-borderColor-dark/30">
+          <span className="i-ph:star w-3 h-3" />
+          {repo.stargazers_count.toLocaleString()}
+        </span>
+        {repo.forks_count > 0 && (
+          <span className="flex items-center gap-1 px-2 py-1 rounded-lg bg-bolt-elements-background-depth-1/50 dark:bg-bolt-elements-background-depth-4/50 backdrop-blur-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark text-xs border border-bolt-elements-borderColor/30 dark:border-bolt-elements-borderColor-dark/30">
+            <span className="i-ph:git-fork w-3 h-3" />
+            {repo.forks_count.toLocaleString()}
+          </span>
+        )}
+      </div>
+
+      <div className="mt-3 pt-3 border-t border-bolt-elements-borderColor/30 dark:border-bolt-elements-borderColor-dark/30 flex items-center justify-between">
+        <span className="flex items-center gap-1 text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark">
+          <span className="i-ph:clock w-3 h-3" />
+          Updated {formatDate(repo.updated_at)}
+        </span>
+
+        {repo.topics && repo.topics.length > 0 && (
+          <span className="text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark">
+            {repo.topics.slice(0, 1).map((topic) => (
+              <span
+                key={topic}
+                className="px-1.5 py-0.5 rounded-full bg-bolt-elements-background-depth-1/50 dark:bg-bolt-elements-background-depth-4/50 text-xs"
+              >
+                {topic}
+              </span>
+            ))}
+            {repo.topics.length > 1 && <span className="ml-1">+{repo.topics.length - 1}</span>}
+          </span>
+        )}
+      </div>
+    </motion.div>
+  );
+}

app/components/@settings/tabs/connections/components/RepositoryDialogContext.tsx

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+// Create a context to share the setShowAuthDialog function with child components
+export interface RepositoryDialogContextType {
+  setShowAuthDialog: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+// Default context value with a no-op function
+export const RepositoryDialogContext = createContext<RepositoryDialogContextType>({
+  // This is intentionally empty as it will be overridden by the provider
+  setShowAuthDialog: () => {
+    // No operation
+  },
+});

app/components/@settings/tabs/connections/components/RepositoryList.tsx

@@ -0,0 +1,58 @@
+import React, { useContext } from 'react';
+import type { GitHubRepoInfo } from '~/types/GitHub';
+import { EmptyState, StatusIndicator } from '~/components/ui';
+import { RepositoryCard } from './RepositoryCard';
+import { RepositoryDialogContext } from './RepositoryDialogContext';
+
+interface RepositoryListProps {
+  repos: GitHubRepoInfo[];
+  isLoading: boolean;
+  onSelect: (repo: GitHubRepoInfo) => void;
+  activeTab: string;
+}
+
+export function RepositoryList({ repos, isLoading, onSelect, activeTab }: RepositoryListProps) {
+  // Access the parent component's setShowAuthDialog function
+  const { setShowAuthDialog } = useContext(RepositoryDialogContext);
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col items-center justify-center py-8 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark">
+        <StatusIndicator status="loading" pulse={true} size="lg" label="Loading repositories..." className="mb-2" />
+        <p className="text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark">
+          This may take a moment
+        </p>
+      </div>
+    );
+  }
+
+  if (repos.length === 0) {
+    if (activeTab === 'my-repos') {
+      return (
+        <EmptyState
+          icon="i-ph:folder-simple-dashed"
+          title="No repositories found"
+          description="Connect your GitHub account or create a new repository to get started"
+          actionLabel="Connect GitHub Account"
+          onAction={() => setShowAuthDialog(true)}
+        />
+      );
+    } else {
+      return (
+        <EmptyState
+          icon="i-ph:magnifying-glass"
+          title="No repositories found"
+          description="Try searching with different keywords or filters"
+        />
+      );
+    }
+  }
+
+  return (
+    <div className="space-y-3">
+      {repos.map((repo) => (
+        <RepositoryCard key={repo.full_name} repo={repo} onSelect={() => onSelect(repo)} />
+      ))}
+    </div>
+  );
+}

app/components/@settings/tabs/connections/components/StatsDialog.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { motion } from 'framer-motion';
+import type { RepositoryStats } from '~/types/GitHub';
+import { formatSize } from '~/utils/formatSize';
+import { RepositoryStats as RepoStats } from '~/components/ui';
+
+interface StatsDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  stats: RepositoryStats;
+  isLargeRepo?: boolean;
+}
+
+export function StatsDialog({ isOpen, onClose, onConfirm, stats, isLargeRepo }: StatsDialogProps) {
+  return (
+    <Dialog.Root open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[9999]" />
+        <div className="fixed inset-0 flex items-center justify-center z-[9999]">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            transition={{ duration: 0.2 }}
+            className="w-[90vw] md:w-[500px]"
+          >
+            <Dialog.Content className="bg-white dark:bg-bolt-elements-background-depth-1 rounded-lg border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark shadow-xl">
+              <div className="p-6 space-y-4">
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-xl bg-bolt-elements-background-depth-3 flex items-center justify-center text-purple-500">
+                    <span className="i-ph:git-branch w-5 h-5" />
+                  </div>
+                  <div>
+                    <h3 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
+                      Repository Overview
+                    </h3>
+                    <p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark">
+                      Review repository details before importing
+                    </p>
+                  </div>
+                </div>
+
+                <div className="mt-4 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 p-4 rounded-lg">
+                  <RepoStats stats={stats} />
+                </div>
+
+                {isLargeRepo && (
+                  <div className="p-3 bg-yellow-50 dark:bg-yellow-500/10 rounded-lg text-sm flex items-start gap-2">
+                    <span className="i-ph:warning text-yellow-600 dark:text-yellow-500 w-4 h-4 flex-shrink-0 mt-0.5" />
+                    <div className="text-yellow-800 dark:text-yellow-500">
+                      This repository is quite large ({formatSize(stats.totalSize)}). Importing it might take a while
+                      and could impact performance.
+                    </div>
+                  </div>
+                )}
+              </div>
+              <div className="border-t border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark p-4 flex justify-end gap-3 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-b-lg">
+                <motion.button
+                  onClick={onClose}
+                  className="px-4 py-2 rounded-lg bg-bolt-elements-background-depth-3 dark:bg-bolt-elements-background-depth-4 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary dark:text-bolt-elements-textSecondary-dark dark:hover:text-bolt-elements-textPrimary-dark transition-colors"
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  Cancel
+                </motion.button>
+                <motion.button
+                  onClick={onConfirm}
+                  className="px-4 py-2 rounded-lg bg-purple-500 text-white hover:bg-purple-600 transition-colors"
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
+                >
+                  Import Repository
+                </motion.button>
+              </div>
+            </Dialog.Content>
+          </motion.div>
+        </div>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

app/components/@settings/tabs/data/DataVisualization.tsx

@@ -0,0 +1,384 @@
+import { useState, useEffect } from 'react';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement,
+  PointElement,
+  LineElement,
+} from 'chart.js';
+import { Bar, Pie } from 'react-chartjs-2';
+import type { Chat } from '~/lib/persistence/chats';
+import { classNames } from '~/utils/classNames';
+
+// Register ChartJS components
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ArcElement, PointElement, LineElement);
+
+type DataVisualizationProps = {
+  chats: Chat[];
+};
+
+export function DataVisualization({ chats }: DataVisualizationProps) {
+  const [chatsByDate, setChatsByDate] = useState<Record<string, number>>({});
+  const [messagesByRole, setMessagesByRole] = useState<Record<string, number>>({});
+  const [apiKeyUsage, setApiKeyUsage] = useState<Array<{ provider: string; count: number }>>([]);
+  const [averageMessagesPerChat, setAverageMessagesPerChat] = useState<number>(0);
+  const [isDarkMode, setIsDarkMode] = useState(false);
+
+  useEffect(() => {
+    const isDark = document.documentElement.classList.contains('dark');
+    setIsDarkMode(isDark);
+
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.attributeName === 'class') {
+          setIsDarkMode(document.documentElement.classList.contains('dark'));
+        }
+      });
+    });
+
+    observer.observe(document.documentElement, { attributes: true });
+
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    if (!chats || chats.length === 0) {
+      return;
+    }
+
+    // Process chat data
+    const chatDates: Record<string, number> = {};
+    const roleCounts: Record<string, number> = {};
+    const apiUsage: Record<string, number> = {};
+    let totalMessages = 0;
+
+    chats.forEach((chat) => {
+      const date = new Date(chat.timestamp).toLocaleDateString();
+      chatDates[date] = (chatDates[date] || 0) + 1;
+
+      chat.messages.forEach((message) => {
+        roleCounts[message.role] = (roleCounts[message.role] || 0) + 1;
+        totalMessages++;
+
+        if (message.role === 'assistant') {
+          const providerMatch = message.content.match(/provider:\s*([\w-]+)/i);
+          const provider = providerMatch ? providerMatch[1] : 'unknown';
+          apiUsage[provider] = (apiUsage[provider] || 0) + 1;
+        }
+      });
+    });
+
+    const sortedDates = Object.keys(chatDates).sort((a, b) => new Date(a).getTime() - new Date(b).getTime());
+    const sortedChatsByDate: Record<string, number> = {};
+    sortedDates.forEach((date) => {
+      sortedChatsByDate[date] = chatDates[date];
+    });
+
+    setChatsByDate(sortedChatsByDate);
+    setMessagesByRole(roleCounts);
+    setApiKeyUsage(Object.entries(apiUsage).map(([provider, count]) => ({ provider, count })));
+    setAverageMessagesPerChat(totalMessages / chats.length);
+  }, [chats]);
+
+  // Get theme colors from CSS variables to ensure theme consistency
+  const getThemeColor = (varName: string): string => {
+    // Get the CSS variable value from document root
+    if (typeof document !== 'undefined') {
+      return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
+    }
+
+    // Fallback for SSR
+    return isDarkMode ? '#FFFFFF' : '#000000';
+  };
+
+  // Theme-aware chart colors with enhanced dark mode visibility using CSS variables
+  const chartColors = {
+    grid: isDarkMode ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.1)',
+    text: getThemeColor('--bolt-elements-textPrimary'),
+    textSecondary: getThemeColor('--bolt-elements-textSecondary'),
+    background: getThemeColor('--bolt-elements-bg-depth-1'),
+    accent: getThemeColor('--bolt-elements-button-primary-text'),
+    border: getThemeColor('--bolt-elements-borderColor'),
+  };
+
+  const getChartColors = (index: number) => {
+    // Define color palettes based on Bolt design tokens
+    const baseColors = [
+      // Indigo
+      {
+        base: getThemeColor('--bolt-elements-button-primary-text'),
+      },
+
+      // Pink
+      {
+        base: isDarkMode ? 'rgb(244, 114, 182)' : 'rgb(236, 72, 153)',
+      },
+
+      // Green
+      {
+        base: getThemeColor('--bolt-elements-icon-success'),
+      },
+
+      // Yellow
+      {
+        base: isDarkMode ? 'rgb(250, 204, 21)' : 'rgb(234, 179, 8)',
+      },
+
+      // Blue
+      {
+        base: isDarkMode ? 'rgb(56, 189, 248)' : 'rgb(14, 165, 233)',
+      },
+    ];
+
+    // Get the base color for this index
+    const color = baseColors[index % baseColors.length].base;
+
+    // Parse color and generate variations with appropriate opacity
+    let r = 0,
+      g = 0,
+      b = 0;
+
+    // Handle rgb/rgba format
+    const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+    const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([0-9.]+)\)/);
+
+    if (rgbMatch) {
+      [, r, g, b] = rgbMatch.map(Number);
+    } else if (rgbaMatch) {
+      [, r, g, b] = rgbaMatch.map(Number);
+    } else if (color.startsWith('#')) {
+      // Handle hex format
+      const hex = color.slice(1);
+      const bigint = parseInt(hex, 16);
+      r = (bigint >> 16) & 255;
+      g = (bigint >> 8) & 255;
+      b = bigint & 255;
+    }
+
+    return {
+      bg: `rgba(${r}, ${g}, ${b}, ${isDarkMode ? 0.7 : 0.5})`,
+      border: `rgba(${r}, ${g}, ${b}, ${isDarkMode ? 0.9 : 0.8})`,
+    };
+  };
+
+  const chartData = {
+    history: {
+      labels: Object.keys(chatsByDate),
+      datasets: [
+        {
+          label: 'Chats Created',
+          data: Object.values(chatsByDate),
+          backgroundColor: getChartColors(0).bg,
+          borderColor: getChartColors(0).border,
+          borderWidth: 1,
+        },
+      ],
+    },
+    roles: {
+      labels: Object.keys(messagesByRole),
+      datasets: [
+        {
+          label: 'Messages by Role',
+          data: Object.values(messagesByRole),
+          backgroundColor: Object.keys(messagesByRole).map((_, i) => getChartColors(i).bg),
+          borderColor: Object.keys(messagesByRole).map((_, i) => getChartColors(i).border),
+          borderWidth: 1,
+        },
+      ],
+    },
+    apiUsage: {
+      labels: apiKeyUsage.map((item) => item.provider),
+      datasets: [
+        {
+          label: 'API Usage',
+          data: apiKeyUsage.map((item) => item.count),
+          backgroundColor: apiKeyUsage.map((_, i) => getChartColors(i).bg),
+          borderColor: apiKeyUsage.map((_, i) => getChartColors(i).border),
+          borderWidth: 1,
+        },
+      ],
+    },
+  };
+
+  const baseChartOptions = {
+    responsive: true,
+    maintainAspectRatio: false,
+    color: chartColors.text,
+    plugins: {
+      legend: {
+        position: 'top' as const,
+        labels: {
+          color: chartColors.text,
+          font: {
+            weight: 'bold' as const,
+            size: 12,
+          },
+          padding: 16,
+          usePointStyle: true,
+        },
+      },
+      title: {
+        display: true,
+        color: chartColors.text,
+        font: {
+          size: 16,
+          weight: 'bold' as const,
+        },
+        padding: 16,
+      },
+      tooltip: {
+        titleColor: chartColors.text,
+        bodyColor: chartColors.text,
+        backgroundColor: isDarkMode
+          ? 'rgba(23, 23, 23, 0.8)' // Dark bg using Tailwind gray-900
+          : 'rgba(255, 255, 255, 0.8)', // Light bg
+        borderColor: chartColors.border,
+        borderWidth: 1,
+      },
+    },
+  };
+
+  const chartOptions = {
+    ...baseChartOptions,
+    plugins: {
+      ...baseChartOptions.plugins,
+      title: {
+        ...baseChartOptions.plugins.title,
+        text: 'Chat History',
+      },
+    },
+    scales: {
+      x: {
+        grid: {
+          color: chartColors.grid,
+          drawBorder: false,
+        },
+        border: {
+          display: false,
+        },
+        ticks: {
+          color: chartColors.text,
+          font: {
+            weight: 500,
+          },
+        },
+      },
+      y: {
+        grid: {
+          color: chartColors.grid,
+          drawBorder: false,
+        },
+        border: {
+          display: false,
+        },
+        ticks: {
+          color: chartColors.text,
+          font: {
+            weight: 500,
+          },
+        },
+      },
+    },
+  };
+
+  const pieOptions = {
+    ...baseChartOptions,
+    plugins: {
+      ...baseChartOptions.plugins,
+      title: {
+        ...baseChartOptions.plugins.title,
+        text: 'Message Distribution',
+      },
+      legend: {
+        ...baseChartOptions.plugins.legend,
+        position: 'right' as const,
+      },
+      datalabels: {
+        color: chartColors.text,
+        font: {
+          weight: 'bold' as const,
+        },
+      },
+    },
+  };
+
+  if (chats.length === 0) {
+    return (
+      <div className="text-center py-8">
+        <div className="i-ph-chart-line-duotone w-12 h-12 mx-auto mb-4 text-bolt-elements-textTertiary opacity-80" />
+        <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-2">No Data Available</h3>
+        <p className="text-bolt-elements-textSecondary">
+          Start creating chats to see your usage statistics and data visualization.
+        </p>
+      </div>
+    );
+  }
+
+  const cardClasses = classNames(
+    'p-6 rounded-lg shadow-sm',
+    'bg-bolt-elements-bg-depth-1',
+    'border border-bolt-elements-borderColor',
+  );
+
+  const statClasses = classNames('text-3xl font-bold text-bolt-elements-textPrimary', 'flex items-center gap-3');
+
+  return (
+    <div className="space-y-8">
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <div className={cardClasses}>
+          <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Total Chats</h3>
+          <div className={statClasses}>
+            <div className="i-ph-chats-duotone w-8 h-8 text-indigo-500 dark:text-indigo-400" />
+            <span>{chats.length}</span>
+          </div>
+        </div>
+
+        <div className={cardClasses}>
+          <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Total Messages</h3>
+          <div className={statClasses}>
+            <div className="i-ph-chat-text-duotone w-8 h-8 text-pink-500 dark:text-pink-400" />
+            <span>{Object.values(messagesByRole).reduce((sum, count) => sum + count, 0)}</span>
+          </div>
+        </div>
+
+        <div className={cardClasses}>
+          <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Avg. Messages/Chat</h3>
+          <div className={statClasses}>
+            <div className="i-ph-chart-bar-duotone w-8 h-8 text-green-500 dark:text-green-400" />
+            <span>{averageMessagesPerChat.toFixed(1)}</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className={cardClasses}>
+          <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-6">Chat History</h3>
+          <div className="h-64">
+            <Bar data={chartData.history} options={chartOptions} />
+          </div>
+        </div>
+
+        <div className={cardClasses}>
+          <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-6">Message Distribution</h3>
+          <div className="h-64">
+            <Pie data={chartData.roles} options={pieOptions} />
+          </div>
+        </div>
+      </div>
+
+      {apiKeyUsage.length > 0 && (
+        <div className={cardClasses}>
+          <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-6">API Usage by Provider</h3>
+          <div className="h-64">
+            <Pie data={chartData.apiUsage} options={pieOptions} />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/components/@settings/tabs/debug/DebugTab.tsx

@@ -342,24 +342,86 @@ export default function DebugTab() {
     try {
       setLoading((prev) => ({ ...prev, systemInfo: true }));
 
-      // Get browser info
-      const ua = navigator.userAgent;
-      const browserName = ua.includes('Firefox')
-        ? 'Firefox'
-        : ua.includes('Chrome')
-          ? 'Chrome'
-          : ua.includes('Safari')
-            ? 'Safari'
-            : ua.includes('Edge')
-              ? 'Edge'
-              : 'Unknown';
-      const browserVersion = ua.match(/(Firefox|Chrome|Safari|Edge)\/([0-9.]+)/)?.[2] || 'Unknown';
+      // Get better OS detection
+      const userAgent = navigator.userAgent;
+      let detectedOS = 'Unknown';
+      let detectedArch = 'unknown';
+
+      // Improved OS detection
+      if (userAgent.indexOf('Win') !== -1) {
+        detectedOS = 'Windows';
+      } else if (userAgent.indexOf('Mac') !== -1) {
+        detectedOS = 'macOS';
+      } else if (userAgent.indexOf('Linux') !== -1) {
+        detectedOS = 'Linux';
+      } else if (userAgent.indexOf('Android') !== -1) {
+        detectedOS = 'Android';
+      } else if (/iPhone|iPad|iPod/.test(userAgent)) {
+        detectedOS = 'iOS';
+      }
+
+      // Better architecture detection
+      if (userAgent.indexOf('x86_64') !== -1 || userAgent.indexOf('x64') !== -1 || userAgent.indexOf('WOW64') !== -1) {
+        detectedArch = 'x64';
+      } else if (userAgent.indexOf('x86') !== -1 || userAgent.indexOf('i686') !== -1) {
+        detectedArch = 'x86';
+      } else if (userAgent.indexOf('arm64') !== -1 || userAgent.indexOf('aarch64') !== -1) {
+        detectedArch = 'arm64';
+      } else if (userAgent.indexOf('arm') !== -1) {
+        detectedArch = 'arm';
+      }
+
+      // Get browser info with improved detection
+      const browserName = (() => {
+        if (userAgent.indexOf('Edge') !== -1 || userAgent.indexOf('Edg/') !== -1) {
+          return 'Edge';
+        }
+
+        if (userAgent.indexOf('Chrome') !== -1) {
+          return 'Chrome';
+        }
+
+        if (userAgent.indexOf('Firefox') !== -1) {
+          return 'Firefox';
+        }
+
+        if (userAgent.indexOf('Safari') !== -1) {
+          return 'Safari';
+        }
+
+        return 'Unknown';
+      })();
+
+      const browserVersionMatch = userAgent.match(/(Edge|Edg|Chrome|Firefox|Safari)[\s/](\d+(\.\d+)*)/);
+      const browserVersion = browserVersionMatch ? browserVersionMatch[2] : 'Unknown';
 
       // Get performance metrics
       const memory = (performance as any).memory || {};
       const timing = performance.timing;
       const navigation = performance.navigation;
-      const connection = (navigator as any).connection;
+      const connection = (navigator as any).connection || {};
+
+      // Try to use Navigation Timing API Level 2 when available
+      let loadTime = 0;
+      let domReadyTime = 0;
+
+      try {
+        const navEntries = performance.getEntriesByType('navigation');
+
+        if (navEntries.length > 0) {
+          const navTiming = navEntries[0] as PerformanceNavigationTiming;
+          loadTime = navTiming.loadEventEnd - navTiming.startTime;
+          domReadyTime = navTiming.domContentLoadedEventEnd - navTiming.startTime;
+        } else {
+          // Fall back to older API
+          loadTime = timing.loadEventEnd - timing.navigationStart;
+          domReadyTime = timing.domContentLoadedEventEnd - timing.navigationStart;
+        }
+      } catch {
+        // Fall back to older API if Navigation Timing API Level 2 is not available
+        loadTime = timing.loadEventEnd - timing.navigationStart;
+        domReadyTime = timing.domContentLoadedEventEnd - timing.navigationStart;
+      }
 
       // Get battery info
       let batteryInfo;
@@ -405,9 +467,9 @@ export default function DebugTab() {
       const memoryPercentage = totalMemory ? (usedMemory / totalMemory) * 100 : 0;
 
       const systemInfo: SystemInfo = {
-        os: navigator.platform,
-        arch: navigator.userAgent.includes('x64') ? 'x64' : navigator.userAgent.includes('arm') ? 'arm' : 'unknown',
-        platform: navigator.platform,
+        os: detectedOS,
+        arch: detectedArch,
+        platform: navigator.platform || 'unknown',
         cpus: navigator.hardwareConcurrency + ' cores',
         memory: {
           total: formatBytes(totalMemory),
@@ -423,7 +485,7 @@ export default function DebugTab() {
           userAgent: navigator.userAgent,
           cookiesEnabled: navigator.cookieEnabled,
           online: navigator.onLine,
-          platform: navigator.platform,
+          platform: navigator.platform || 'unknown',
           cores: navigator.hardwareConcurrency,
         },
         screen: {
@@ -445,8 +507,8 @@ export default function DebugTab() {
             usagePercentage: memory.totalJSHeapSize ? (memory.usedJSHeapSize / memory.totalJSHeapSize) * 100 : 0,
           },
           timing: {
-            loadTime: timing.loadEventEnd - timing.navigationStart,
-            domReadyTime: timing.domContentLoadedEventEnd - timing.navigationStart,
+            loadTime,
+            domReadyTime,
             readyStart: timing.fetchStart - timing.navigationStart,
             redirectTime: timing.redirectEnd - timing.redirectStart,
             appcacheTime: timing.domainLookupStart - timing.fetchStart,
@@ -483,6 +545,23 @@ export default function DebugTab() {
     }
   };
 
+  // Helper function to format bytes to human readable format with better precision
+  const formatBytes = (bytes: number) => {
+    if (bytes === 0) {
+      return '0 B';
+    }
+
+    const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+
+    // Return with proper precision based on unit size
+    if (i === 0) {
+      return `${bytes} ${units[i]}`;
+    }
+
+    return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${units[i]}`;
+  };
+
   const getWebAppInfo = async () => {
     try {
       setLoading((prev) => ({ ...prev, webAppInfo: true }));
@@ -520,20 +599,6 @@ export default function DebugTab() {
     }
   };
 
-  // Helper function to format bytes to human readable format
-  const formatBytes = (bytes: number) => {
-    const units = ['B', 'KB', 'MB', 'GB'];
-    let size = bytes;
-    let unitIndex = 0;
-
-    while (size >= 1024 && unitIndex < units.length - 1) {
-      size /= 1024;
-      unitIndex++;
-    }
-
-    return `${Math.round(size)} ${units[unitIndex]}`;
-  };
-
   const handleLogPerformance = () => {
     try {
       setLoading((prev) => ({ ...prev, performance: true }));
@@ -1077,7 +1142,7 @@ export default function DebugTab() {
     {
       id: 'json',
       label: 'Export as JSON',
-      icon: 'i-ph:file-json',
+      icon: 'i-ph:file-js',
       handler: exportDebugInfo,
     },
     {
@@ -1587,7 +1652,7 @@ export default function DebugTab() {
                     <span className="text-bolt-elements-textPrimary">{systemInfo.platform}</span>
                   </div>
                   <div className="text-sm flex items-center gap-2">
-                    <div className="i-ph:microchip text-bolt-elements-textSecondary w-4 h-4" />
+                    <div className="i-ph:circuitry text-bolt-elements-textSecondary w-4 h-4" />
                     <span className="text-bolt-elements-textSecondary">Architecture: </span>
                     <span className="text-bolt-elements-textPrimary">{systemInfo.arch}</span>
                   </div>
@@ -1597,7 +1662,7 @@ export default function DebugTab() {
                     <span className="text-bolt-elements-textPrimary">{systemInfo.cpus}</span>
                   </div>
                   <div className="text-sm flex items-center gap-2">
-                    <div className="i-ph:node text-bolt-elements-textSecondary w-4 h-4" />
+                    <div className="i-ph:graph text-bolt-elements-textSecondary w-4 h-4" />
                     <span className="text-bolt-elements-textSecondary">Node Version: </span>
                     <span className="text-bolt-elements-textPrimary">{systemInfo.node}</span>
                   </div>
@@ -1852,7 +1917,7 @@ export default function DebugTab() {
                       <span className="text-bolt-elements-textPrimary">{webAppInfo.environment}</span>
                     </div>
                     <div className="text-sm flex items-center gap-2">
-                      <div className="i-ph:node text-bolt-elements-textSecondary w-4 h-4" />
+                      <div className="i-ph:graph text-bolt-elements-textSecondary w-4 h-4" />
                       <span className="text-bolt-elements-textSecondary">Node Version:</span>
                       <span className="text-bolt-elements-textPrimary">{webAppInfo.runtimeInfo.nodeVersion}</span>
                     </div>
@@ -1887,7 +1952,7 @@ export default function DebugTab() {
                       <>
                         <div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-800">
                           <div className="text-sm flex items-center gap-2">
-                            <div className="i-ph:git-repository text-bolt-elements-textSecondary w-4 h-4" />
+                            <div className="i-ph:git-fork text-bolt-elements-textSecondary w-4 h-4" />
                             <span className="text-bolt-elements-textSecondary">Repository:</span>
                             <span className="text-bolt-elements-textPrimary">
                               {webAppInfo.gitInfo.github.currentRepo.fullName}

app/components/@settings/tabs/event-logs/EventLogsTab.tsx

@@ -763,7 +763,7 @@ export function EventLogsTab() {
     {
       id: 'json',
       label: 'Export as JSON',
-      icon: 'i-ph:file-json',
+      icon: 'i-ph:file-js',
       handler: exportAsJSON,
     },
     {

app/components/chat/Artifact.tsx

@@ -35,7 +35,11 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
 
   const actions = useStore(
     computed(artifact.runner.actions, (actions) => {
-      return Object.values(actions);
+      // Filter out Supabase actions except for migrations
+      return Object.values(actions).filter((action) => {
+        // Exclude actions with type 'supabase' or actions that contain 'supabase' in their content
+        return action.type !== 'supabase' && !(action.type === 'shell' && action.content?.includes('supabase'));
+      });
     }),
   );
 
@@ -50,77 +54,105 @@ export const Artifact = memo(({ messageId }: ArtifactProps) => {
     }
 
     if (actions.length !== 0 && artifact.type === 'bundled') {
-      const finished = !actions.find((action) => action.status !== 'complete');
+      const finished = !actions.find(
+        (action) => action.status !== 'complete' && !(action.type === 'start' && action.status === 'running'),
+      );
 
       if (allActionFinished !== finished) {
         setAllActionFinished(finished);
       }
     }
-  }, [actions]);
+  }, [actions, artifact.type, allActionFinished]);
+
+  // Determine the dynamic title based on state for bundled artifacts
+  const dynamicTitle =
+    artifact?.type === 'bundled'
+      ? allActionFinished
+        ? artifact.id === 'restored-project-setup'
+          ? 'Project Restored' // Title when restore is complete
+          : 'Project Created' // Title when initial creation is complete
+        : artifact.id === 'restored-project-setup'
+          ? 'Restoring Project...' // Title during restore
+          : 'Creating Project...' // Title during initial creation
+      : artifact?.title; // Fallback to original title for non-bundled or if artifact is missing
 
   return (
-    <div className="artifact border border-bolt-elements-borderColor flex flex-col overflow-hidden rounded-lg w-full transition-border duration-150">
-      <div className="flex">
-        <button
-          className="flex items-stretch bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover w-full overflow-hidden"
-          onClick={() => {
-            const showWorkbench = workbenchStore.showWorkbench.get();
-            workbenchStore.showWorkbench.set(!showWorkbench);
-          }}
-        >
-          {artifact.type == 'bundled' && (
-            <>
-              <div className="p-4">
-                {allActionFinished ? (
-                  <div className={'i-ph:files-light'} style={{ fontSize: '2rem' }}></div>
-                ) : (
-                  <div className={'i-svg-spinners:90-ring-with-bg'} style={{ fontSize: '2rem' }}></div>
-                )}
+    <>
+      <div className="artifact border border-bolt-elements-borderColor flex flex-col overflow-hidden rounded-lg w-full transition-border duration-150">
+        <div className="flex">
+          <button
+            className="flex items-stretch bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover w-full overflow-hidden"
+            onClick={() => {
+              const showWorkbench = workbenchStore.showWorkbench.get();
+              workbenchStore.showWorkbench.set(!showWorkbench);
+            }}
+          >
+            <div className="px-5 p-3.5 w-full text-left">
+              <div className="w-full text-bolt-elements-textPrimary font-medium leading-5 text-sm">
+                {/* Use the dynamic title here */}
+                {dynamicTitle}
               </div>
-              <div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
-            </>
-          )}
-          <div className="px-5 p-3.5 w-full text-left">
-            <div className="w-full text-bolt-elements-textPrimary font-medium leading-5 text-sm">{artifact?.title}</div>
-            <div className="w-full w-full text-bolt-elements-textSecondary text-xs mt-0.5">Click to open Workbench</div>
+              <div className="w-full w-full text-bolt-elements-textSecondary text-xs mt-0.5">
+                Click to open Workbench
+              </div>
+            </div>
+          </button>
+          {artifact.type !== 'bundled' && <div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />}
+          <AnimatePresence>
+            {actions.length && artifact.type !== 'bundled' && (
+              <motion.button
+                initial={{ width: 0 }}
+                animate={{ width: 'auto' }}
+                exit={{ width: 0 }}
+                transition={{ duration: 0.15, ease: cubicEasingFn }}
+                className="bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover"
+                onClick={toggleActions}
+              >
+                <div className="p-4">
+                  <div className={showActions ? 'i-ph:caret-up-bold' : 'i-ph:caret-down-bold'}></div>
+                </div>
+              </motion.button>
+            )}
+          </AnimatePresence>
+        </div>
+        {artifact.type === 'bundled' && (
+          <div className="flex items-center gap-1.5 p-5 bg-bolt-elements-actions-background border-t border-bolt-elements-artifacts-borderColor">
+            <div className={classNames('text-lg', getIconColor(allActionFinished ? 'complete' : 'running'))}>
+              {allActionFinished ? (
+                <div className="i-ph:check"></div>
+              ) : (
+                <div className="i-svg-spinners:90-ring-with-bg"></div>
+              )}
+            </div>
+            <div className="text-bolt-elements-textPrimary font-medium leading-5 text-sm">
+              {/* This status text remains the same */}
+              {allActionFinished
+                ? artifact.id === 'restored-project-setup'
+                  ? 'Restore files from snapshot'
+                  : 'Initial files created'
+                : 'Creating initial files'}
+            </div>
           </div>
-        </button>
-        <div className="bg-bolt-elements-artifacts-borderColor w-[1px]" />
+        )}
         <AnimatePresence>
-          {actions.length && artifact.type !== 'bundled' && (
-            <motion.button
-              initial={{ width: 0 }}
-              animate={{ width: 'auto' }}
-              exit={{ width: 0 }}
-              transition={{ duration: 0.15, ease: cubicEasingFn }}
-              className="bg-bolt-elements-artifacts-background hover:bg-bolt-elements-artifacts-backgroundHover"
-              onClick={toggleActions}
+          {artifact.type !== 'bundled' && showActions && actions.length > 0 && (
+            <motion.div
+              className="actions"
+              initial={{ height: 0 }}
+              animate={{ height: 'auto' }}
+              exit={{ height: '0px' }}
+              transition={{ duration: 0.15 }}
             >
-              <div className="p-4">
-                <div className={showActions ? 'i-ph:caret-up-bold' : 'i-ph:caret-down-bold'}></div>
+              <div className="bg-bolt-elements-artifacts-borderColor h-[1px]" />
+
+              <div className="p-5 text-left bg-bolt-elements-actions-background">
+                <ActionList actions={actions} />
               </div>
-            </motion.button>
+            </motion.div>
           )}
         </AnimatePresence>
       </div>
-      <AnimatePresence>
-        {artifact.type !== 'bundled' && showActions && actions.length > 0 && (
-          <motion.div
-            className="actions"
-            initial={{ height: 0 }}
-            animate={{ height: 'auto' }}
-            exit={{ height: '0px' }}
-            transition={{ duration: 0.15 }}
-          >
-            <div className="bg-bolt-elements-artifacts-borderColor h-[1px]" />
-
-            <div className="p-5 text-left bg-bolt-elements-actions-background">
-              <ActionList actions={actions} />
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
+    </>
   );
 });
 

app/components/chat/AssistantMessage.tsx

@@ -1,13 +1,17 @@
-import { memo } from 'react';
+import { memo, Fragment } from 'react';
 import { Markdown } from './Markdown';
 import type { JSONValue } from 'ai';
 import Popover from '~/components/ui/Popover';
 import { workbenchStore } from '~/lib/stores/workbench';
 import { WORK_DIR } from '~/utils/constants';
+import WithTooltip from '~/components/ui/Tooltip';
 
 interface AssistantMessageProps {
   content: string;
   annotations?: JSONValue[];
+  messageId?: string;
+  onRewind?: (messageId: string) => void;
+  onFork?: (messageId: string) => void;
 }
 
 function openArtifactInWorkbench(filePath: string) {
@@ -34,7 +38,7 @@ function normalizedFilePath(path: string) {
   return normalizedPath;
 }
 
-export const AssistantMessage = memo(({ content, annotations }: AssistantMessageProps) => {
+export const AssistantMessage = memo(({ content, annotations, messageId, onRewind, onFork }: AssistantMessageProps) => {
   const filteredAnnotations = (annotations?.filter(
     (annotation: JSONValue) => annotation && typeof annotation === 'object' && Object.keys(annotation).includes('type'),
   ) || []) as { type: string; value: any } & { [key: string]: any }[];
@@ -78,7 +82,7 @@ export const AssistantMessage = memo(({ content, annotations }: AssistantMessage
                         {codeContext.map((x) => {
                           const normalized = normalizedFilePath(x);
                           return (
-                            <>
+                            <Fragment key={normalized}>
                               <code
                                 className="bg-bolt-elements-artifacts-inlineCode-background text-bolt-elements-artifacts-inlineCode-text px-1.5 py-1 rounded-md text-bolt-elements-item-contentAccent hover:underline cursor-pointer"
                                 onClick={(e) => {
@@ -89,7 +93,7 @@ export const AssistantMessage = memo(({ content, annotations }: AssistantMessage
                               >
                                 {normalized}
                               </code>
-                            </>
+                            </Fragment>
                           );
                         })}
                       </div>
@@ -100,11 +104,35 @@ export const AssistantMessage = memo(({ content, annotations }: AssistantMessage
               <div className="context"></div>
             </Popover>
           )}
-          {usage && (
-            <div>
-              Tokens: {usage.totalTokens} (prompt: {usage.promptTokens}, completion: {usage.completionTokens})
-            </div>
-          )}
+          <div className="flex w-full items-center justify-between">
+            {usage && (
+              <div>
+                Tokens: {usage.totalTokens} (prompt: {usage.promptTokens}, completion: {usage.completionTokens})
+              </div>
+            )}
+            {(onRewind || onFork) && messageId && (
+              <div className="flex gap-2 flex-col lg:flex-row ml-auto">
+                {onRewind && (
+                  <WithTooltip tooltip="Revert to this message">
+                    <button
+                      onClick={() => onRewind(messageId)}
+                      key="i-ph:arrow-u-up-left"
+                      className="i-ph:arrow-u-up-left text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"
+                    />
+                  </WithTooltip>
+                )}
+                {onFork && (
+                  <WithTooltip tooltip="Fork chat from this message">
+                    <button
+                      onClick={() => onFork(messageId)}
+                      key="i-ph:git-fork"
+                      className="i-ph:git-fork text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors"
+                    />
+                  </WithTooltip>
+                )}
+              </div>
+            )}
+          </div>
         </div>
       </>
       <Markdown html>{content}</Markdown>

app/components/chat/BaseChat.tsx

@@ -29,13 +29,20 @@ import type { ProviderInfo } from '~/types/model';
 import { ScreenshotStateManager } from './ScreenshotStateManager';
 import { toast } from 'react-toastify';
 import StarterTemplates from './StarterTemplates';
-import type { ActionAlert } from '~/types/actions';
+import type { ActionAlert, SupabaseAlert, DeployAlert } from '~/types/actions';
+import DeployChatAlert from '~/components/deploy/DeployAlert';
 import ChatAlert from './ChatAlert';
 import type { ModelInfo } from '~/lib/modules/llm/types';
 import ProgressCompilation from './ProgressCompilation';
 import type { ProgressAnnotation } from '~/types/context';
 import type { ActionRunner } from '~/lib/runtime/action-runner';
 import { LOCAL_PROVIDERS } from '~/lib/stores/settings';
+import { SupabaseChatAlert } from '~/components/chat/SupabaseAlert';
+import { SupabaseConnection } from './SupabaseConnection';
+import { ExpoQrModal } from '~/components/workbench/ExpoQrModal';
+import { expoUrlAtom } from '~/lib/stores/qrCodeStore';
+import { useStore } from '@nanostores/react';
+import { StickToBottom, useStickToBottomContext } from '~/lib/hooks';
 
 const TEXTAREA_MIN_HEIGHT = 76;
 
@@ -69,6 +76,10 @@ interface BaseChatProps {
   setImageDataList?: (dataList: string[]) => void;
   actionAlert?: ActionAlert;
   clearAlert?: () => void;
+  supabaseAlert?: SupabaseAlert;
+  clearSupabaseAlert?: () => void;
+  deployAlert?: DeployAlert;
+  clearDeployAlert?: () => void;
   data?: JSONValue[] | undefined;
   actionRunner?: ActionRunner;
 }
@@ -77,8 +88,6 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
   (
     {
       textareaRef,
-      messageRef,
-      scrollRef,
       showChat = true,
       chatStarted = false,
       isStreaming = false,
@@ -105,6 +114,10 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
       messages,
       actionAlert,
       clearAlert,
+      deployAlert,
+      clearDeployAlert,
+      supabaseAlert,
+      clearSupabaseAlert,
       data,
       actionRunner,
     },
@@ -119,6 +132,15 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     const [transcript, setTranscript] = useState('');
     const [isModelLoading, setIsModelLoading] = useState<string | undefined>('all');
     const [progressAnnotations, setProgressAnnotations] = useState<ProgressAnnotation[]>([]);
+    const expoUrl = useStore(expoUrlAtom);
+    const [qrModalOpen, setQrModalOpen] = useState(false);
+
+    useEffect(() => {
+      if (expoUrl) {
+        setQrModalOpen(true);
+      }
+    }, [expoUrl]);
+
     useEffect(() => {
       if (data) {
         const progressList = data.filter(
@@ -313,7 +335,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
         data-chat-visible={showChat}
       >
         <ClientOnly>{() => <Menu />}</ClientOnly>
-        <div ref={scrollRef} className="flex flex-col lg:flex-row overflow-y-auto w-full h-full">
+        <div className="flex flex-col lg:flex-row overflow-y-auto w-full h-full">
           <div className={classNames(styles.Chat, 'flex flex-col flex-grow lg:min-w-[var(--chat-min-width)] h-full')}>
             {!chatStarted && (
               <div id="intro" className="mt-[16vh] max-w-chat mx-auto text-center px-4 lg:px-0">
@@ -325,30 +347,52 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                 </p>
               </div>
             )}
-            <div
-              className={classNames('pt-6 px-2 sm:px-6', {
-                'h-full flex flex-col': chatStarted,
+            <StickToBottom
+              className={classNames('pt-6 px-2 sm:px-6 relative', {
+                'h-full flex flex-col modern-scrollbar': chatStarted,
               })}
-              ref={scrollRef}
+              resize="smooth"
+              initial="smooth"
             >
-              <ClientOnly>
-                {() => {
-                  return chatStarted ? (
-                    <Messages
-                      ref={messageRef}
-                      className="flex flex-col w-full flex-1 max-w-chat pb-6 mx-auto z-1"
-                      messages={messages}
-                      isStreaming={isStreaming}
-                    />
-                  ) : null;
-                }}
-              </ClientOnly>
+              <StickToBottom.Content className="flex flex-col gap-4">
+                <ClientOnly>
+                  {() => {
+                    return chatStarted ? (
+                      <Messages
+                        className="flex flex-col w-full flex-1 max-w-chat pb-6 mx-auto z-1"
+                        messages={messages}
+                        isStreaming={isStreaming}
+                      />
+                    ) : null;
+                  }}
+                </ClientOnly>
+              </StickToBottom.Content>
               <div
-                className={classNames('flex flex-col gap-4 w-full max-w-chat mx-auto z-prompt mb-6', {
+                className={classNames('my-auto flex flex-col gap-2 w-full max-w-chat mx-auto z-prompt mb-6', {
                   'sticky bottom-2': chatStarted,
                 })}
               >
-                <div className="bg-bolt-elements-background-depth-2">
+                <div className="flex flex-col gap-2">
+                  {deployAlert && (
+                    <DeployChatAlert
+                      alert={deployAlert}
+                      clearAlert={() => clearDeployAlert?.()}
+                      postMessage={(message: string | undefined) => {
+                        sendMessage?.({} as any, message);
+                        clearSupabaseAlert?.();
+                      }}
+                    />
+                  )}
+                  {supabaseAlert && (
+                    <SupabaseChatAlert
+                      alert={supabaseAlert}
+                      clearAlert={() => clearSupabaseAlert?.()}
+                      postMessage={(message) => {
+                        sendMessage?.({} as any, message);
+                        clearSupabaseAlert?.();
+                      }}
+                    />
+                  )}
                   {actionAlert && (
                     <ChatAlert
                       alert={actionAlert}
@@ -360,10 +404,11 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                     />
                   )}
                 </div>
+                <ScrollToBottom />
                 {progressAnnotations && <ProgressCompilation data={progressAnnotations} />}
                 <div
                   className={classNames(
-                    'bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt',
+                    'relative bg-bolt-elements-background-depth-2 p-3 rounded-lg border border-bolt-elements-borderColor relative w-full max-w-chat mx-auto z-prompt',
 
                     /*
                      * {
@@ -413,15 +458,17 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                             apiKeys={apiKeys}
                             modelLoading={isModelLoading}
                           />
-                          {(providerList || []).length > 0 && provider && !LOCAL_PROVIDERS.includes(provider.name) && (
-                            <APIKeyManager
-                              provider={provider}
-                              apiKey={apiKeys[provider.name] || ''}
-                              setApiKey={(key) => {
-                                onApiKeysChange(provider.name, key);
-                              }}
-                            />
-                          )}
+                          {(providerList || []).length > 0 &&
+                            provider &&
+                            (!LOCAL_PROVIDERS.includes(provider.name) || 'OpenAILike') && (
+                              <APIKeyManager
+                                provider={provider}
+                                apiKey={apiKeys[provider.name] || ''}
+                                setApiKey={(key) => {
+                                  onApiKeysChange(provider.name, key);
+                                }}
+                              />
+                            )}
                         </div>
                       )}
                     </ClientOnly>
@@ -588,28 +635,32 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                           a new line
                         </div>
                       ) : null}
+                      <SupabaseConnection />
+                      <ExpoQrModal open={qrModalOpen} onClose={() => setQrModalOpen(false)} />
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div className="flex flex-col justify-center gap-5">
+            </StickToBottom>
+            <div className="flex flex-col justify-center">
               {!chatStarted && (
                 <div className="flex justify-center gap-2">
                   {ImportButtons(importChat)}
                   <GitCloneButton importChat={importChat} />
                 </div>
               )}
-              {!chatStarted &&
-                ExamplePrompts((event, messageInput) => {
-                  if (isStreaming) {
-                    handleStop?.();
-                    return;
-                  }
+              <div className="flex flex-col gap-5">
+                {!chatStarted &&
+                  ExamplePrompts((event, messageInput) => {
+                    if (isStreaming) {
+                      handleStop?.();
+                      return;
+                    }
 
-                  handleSendMessage?.(event, messageInput);
-                })}
-              {!chatStarted && <StarterTemplates />}
+                    handleSendMessage?.(event, messageInput);
+                  })}
+                {!chatStarted && <StarterTemplates />}
+              </div>
             </div>
           </div>
           <ClientOnly>
@@ -628,3 +679,19 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
     return <Tooltip.Provider delayDuration={200}>{baseChat}</Tooltip.Provider>;
   },
 );
+
+function ScrollToBottom() {
+  const { isAtBottom, scrollToBottom } = useStickToBottomContext();
+
+  return (
+    !isAtBottom && (
+      <button
+        className="absolute z-50 top-[0%] translate-y-[-100%] text-4xl rounded-lg left-[50%] translate-x-[-50%] px-1.5 py-0.5 flex items-center gap-2 bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor text-bolt-elements-textPrimary text-sm"
+        onClick={() => scrollToBottom()}
+      >
+        Go to last message
+        <span className="i-ph:arrow-down animate-bounce" />
+      </button>
+    )
+  );
+}

app/components/chat/Chat.client.tsx

@@ -8,7 +8,7 @@ import { useChat } from 'ai/react';
 import { useAnimate } from 'framer-motion';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { cssTransition, toast, ToastContainer } from 'react-toastify';
-import { useMessageParser, usePromptEnhancer, useShortcuts, useSnapScroll } from '~/lib/hooks';
+import { useMessageParser, usePromptEnhancer, useShortcuts } from '~/lib/hooks';
 import { description, useChatHistory } from '~/lib/persistence';
 import { chatStore } from '~/lib/stores/chat';
 import { workbenchStore } from '~/lib/stores/workbench';
@@ -26,6 +26,7 @@ import { getTemplates, selectStarterTemplate } from '~/utils/selectStarterTempla
 import { logStore } from '~/lib/stores/logs';
 import { streamingState } from '~/lib/stores/streaming';
 import { filesToArtifacts } from '~/utils/fileUtils';
+import { supabaseConnection } from '~/lib/stores/supabase';
 
 const toastAnimation = cssTransition({
   enter: 'animated fadeInRight',
@@ -80,6 +81,7 @@ export function Chat() {
         position="bottom-right"
         pauseOnFocusLoss
         transition={toastAnimation}
+        autoClose={3000}
       />
     </>
   );
@@ -123,6 +125,12 @@ export const ChatImpl = memo(
     const [fakeLoading, setFakeLoading] = useState(false);
     const files = useStore(workbenchStore.files);
     const actionAlert = useStore(workbenchStore.alert);
+    const deployAlert = useStore(workbenchStore.deployAlert);
+    const supabaseConn = useStore(supabaseConnection); // Add this line to get Supabase connection
+    const selectedProject = supabaseConn.stats?.projects?.find(
+      (project) => project.id === supabaseConn.selectedProjectId,
+    );
+    const supabaseAlert = useStore(workbenchStore.supabaseAlert);
     const { activeProviders, promptId, autoSelectTemplate, contextOptimizationEnabled } = useSettings();
 
     const [model, setModel] = useState(() => {
@@ -160,6 +168,14 @@ export const ChatImpl = memo(
         files,
         promptId,
         contextOptimization: contextOptimizationEnabled,
+        supabase: {
+          isConnected: supabaseConn.isConnected,
+          hasSelectedProject: !!selectedProject,
+          credentials: {
+            supabaseUrl: supabaseConn?.credentials?.supabaseUrl,
+            anonKey: supabaseConn?.credentials?.anonKey,
+          },
+        },
       },
       sendExtraMessageFields: true,
       onError: (e) => {
@@ -294,6 +310,9 @@ export const ChatImpl = memo(
         return;
       }
 
+      // If no locked items, proceed normally with the original message
+      const finalMessageContent = messageContent;
+
       runAnimation();
 
       if (!chatStarted) {
@@ -301,7 +320,7 @@ export const ChatImpl = memo(
 
         if (autoSelectTemplate) {
           const { template, title } = await selectStarterTemplate({
-            message: messageContent,
+            message: finalMessageContent,
             model,
             provider,
           });
@@ -323,7 +342,16 @@ export const ChatImpl = memo(
                 {
                   id: `1-${new Date().getTime()}`,
                   role: 'user',
-                  content: messageContent,
+                  content: [
+                    {
+                      type: 'text',
+                      text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${finalMessageContent}`,
+                    },
+                    ...imageDataList.map((imageData) => ({
+                      type: 'image',
+                      image: imageData,
+                    })),
+                  ] as any,
                 },
                 {
                   id: `2-${new Date().getTime()}`,
@@ -338,6 +366,15 @@ export const ChatImpl = memo(
                 },
               ]);
               reload();
+              setInput('');
+              Cookies.remove(PROMPT_COOKIE_KEY);
+
+              setUploadedFiles([]);
+              setImageDataList([]);
+
+              resetEnhancer();
+
+              textareaRef.current?.blur();
               setFakeLoading(false);
 
               return;
@@ -353,7 +390,7 @@ export const ChatImpl = memo(
             content: [
               {
                 type: 'text',
-                text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${messageContent}`,
+                text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${finalMessageContent}`,
               },
               ...imageDataList.map((imageData) => ({
                 type: 'image',
@@ -364,6 +401,15 @@ export const ChatImpl = memo(
         ]);
         reload();
         setFakeLoading(false);
+        setInput('');
+        Cookies.remove(PROMPT_COOKIE_KEY);
+
+        setUploadedFiles([]);
+        setImageDataList([]);
+
+        resetEnhancer();
+
+        textareaRef.current?.blur();
 
         return;
       }
@@ -383,7 +429,7 @@ export const ChatImpl = memo(
           content: [
             {
               type: 'text',
-              text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${userUpdateArtifact}${messageContent}`,
+              text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${userUpdateArtifact}${finalMessageContent}`,
             },
             ...imageDataList.map((imageData) => ({
               type: 'image',
@@ -399,7 +445,7 @@ export const ChatImpl = memo(
           content: [
             {
               type: 'text',
-              text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${messageContent}`,
+              text: `[Model: ${model}]\n\n[Provider: ${provider.name}]\n\n${finalMessageContent}`,
             },
             ...imageDataList.map((imageData) => ({
               type: 'image',
@@ -440,8 +486,6 @@ export const ChatImpl = memo(
       [],
     );
 
-    const [messageRef, scrollRef] = useSnapScroll();
-
     useEffect(() => {
       const storedApiKeys = Cookies.get('apiKeys');
 
@@ -479,8 +523,6 @@ export const ChatImpl = memo(
         provider={provider}
         setProvider={handleProviderChange}
         providerList={activeProviders}
-        messageRef={messageRef}
-        scrollRef={scrollRef}
         handleInputChange={(e) => {
           onTextareaChange(e);
           debouncedCachePrompt(e);
@@ -517,6 +559,10 @@ export const ChatImpl = memo(
         setImageDataList={setImageDataList}
         actionAlert={actionAlert}
         clearAlert={() => workbenchStore.clearAlert()}
+        supabaseAlert={supabaseAlert}
+        clearSupabaseAlert={() => workbenchStore.clearSupabaseAlert()}
+        deployAlert={deployAlert}
+        clearDeployAlert={() => workbenchStore.clearDeployAlert()}
         data={chatData}
       />
     );

app/components/chat/CodeBlock.tsx

@@ -35,18 +35,21 @@ export const CodeBlock = memo(
     };
 
     useEffect(() => {
+      let effectiveLanguage = language;
+
       if (language && !isSpecialLang(language) && !(language in bundledLanguages)) {
-        logger.warn(`Unsupported language '${language}'`);
+        logger.warn(`Unsupported language '${language}', falling back to plaintext`);
+        effectiveLanguage = 'plaintext';
       }
 
-      logger.trace(`Language = ${language}`);
+      logger.trace(`Language = ${effectiveLanguage}`);
 
       const processCode = async () => {
-        setHTML(await codeToHtml(code, { lang: language, theme }));
+        setHTML(await codeToHtml(code, { lang: effectiveLanguage, theme }));
       };
 
       processCode();
-    }, [code]);
+    }, [code, language, theme]);
 
     return (
       <div className={classNames('relative group text-left', className)}>

app/components/chat/ExamplePrompts.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
 const EXAMPLE_PROMPTS = [
+  { text: 'Create a mobile app about bolt.diy' },
   { text: 'Build a todo app in React using Tailwind' },
   { text: 'Build a simple blog using Astro' },
   { text: 'Create a cookie consent form using Material UI' },

app/components/chat/FilePreview.tsx

@@ -12,18 +12,21 @@ const FilePreview: React.FC<FilePreviewProps> = ({ files, imageDataList, onRemov
   }
 
   return (
-    <div className="flex flex-row overflow-x-auto -mt-2">
+    <div className="flex flex-row overflow-x-auto mx-2 -mt-1 p-2 bg-bolt-elements-background-depth-3 border border-b-none border-bolt-elements-borderColor rounded-lg rounded-b-none">
       {files.map((file, index) => (
         <div key={file.name + file.size} className="mr-2 relative">
           {imageDataList[index] && (
-            <div className="relative pt-4 pr-4">
-              <img src={imageDataList[index]} alt={file.name} className="max-h-20" />
+            <div className="relative">
+              <img src={imageDataList[index]} alt={file.name} className="max-h-20 rounded-lg" />
               <button
                 onClick={() => onRemove(index)}
-                className="absolute top-1 right-1 z-10 bg-black rounded-full w-5 h-5 shadow-md hover:bg-gray-900 transition-colors flex items-center justify-center"
+                className="absolute -top-1 -right-1 z-10 bg-black rounded-full w-5 h-5 shadow-md hover:bg-gray-900 transition-colors flex items-center justify-center"
               >
                 <div className="i-ph:x w-3 h-3 text-gray-200" />
               </button>
+              <div className="absolute bottom-0 w-full h-5 flex items-center px-2 rounded-b-lg text-bolt-elements-textTertiary font-thin text-xs bg-bolt-elements-background-depth-2">
+                <span className="truncate">{file.name}</span>
+              </div>
             </div>
           )}
         </div>

app/components/chat/GitCloneButton.tsx

@@ -27,7 +27,8 @@ const IGNORE_PATTERNS = [
   '**/npm-debug.log*',
   '**/yarn-debug.log*',
   '**/yarn-error.log*',
-  '**/*lock.json',
+
+  // Include this so npm install runs much faster '**/*lock.json',
   '**/*lock.yaml',
 ];
 
@@ -70,7 +71,7 @@ export default function GitCloneButton({ importChat, className }: GitCloneButton
           // Skip binary files
           if (
             content instanceof Uint8Array &&
-            !filePath.match(/\.(txt|md|astro|mjs|js|jsx|ts|tsx|json|html|css|scss|less|yml|yaml|xml|svg)$/i)
+            !filePath.match(/\.(txt|md|astro|mjs|js|jsx|ts|tsx|json|html|css|scss|less|yml|yaml|xml|svg|vue|svelte)$/i)
           ) {
             skippedFiles.push(filePath);
             continue;
@@ -156,13 +157,13 @@ ${escapeBoltTags(file.content)}
       <Button
         onClick={() => setIsDialogOpen(true)}
         title="Clone a Git Repo"
-        variant="outline"
+        variant="default"
         size="lg"
         className={classNames(
-          'gap-2 bg-[#F5F5F5] dark:bg-[#252525]',
-          'text-bolt-elements-textPrimary dark:text-white',
-          'hover:bg-[#E5E5E5] dark:hover:bg-[#333333]',
-          'border-[#E5E5E5] dark:border-[#333333]',
+          'gap-2 bg-bolt-elements-background-depth-1',
+          'text-bolt-elements-textPrimary',
+          'hover:bg-bolt-elements-background-depth-2',
+          'border border-bolt-elements-borderColor',
           'h-10 px-4 py-2 min-w-[120px] justify-center',
           'transition-all duration-200 ease-in-out',
           className,

app/components/chat/ImportFolderButton.tsx

@@ -120,13 +120,13 @@ export const ImportFolderButton: React.FC<ImportFolderButtonProps> = ({ classNam
           input?.click();
         }}
         title="Import Folder"
-        variant="outline"
+        variant="default"
         size="lg"
         className={classNames(
-          'gap-2 bg-[#F5F5F5] dark:bg-[#252525]',
-          'text-bolt-elements-textPrimary dark:text-white',
-          'hover:bg-[#E5E5E5] dark:hover:bg-[#333333]',
-          'border-[#E5E5E5] dark:border-[#333333]',
+          'gap-2 bg-bolt-elements-background-depth-1',
+          'text-bolt-elements-textPrimary',
+          'hover:bg-bolt-elements-background-depth-2',
+          'border border-bolt-elements-borderColor',
           'h-10 px-4 py-2 min-w-[120px] justify-center',
           'transition-all duration-200 ease-in-out',
           className,

app/components/chat/Messages.client.tsx

@@ -7,7 +7,6 @@ import { useLocation } from '@remix-run/react';
 import { db, chatId } from '~/lib/persistence/useChatHistory';
 import { forkChat } from '~/lib/persistence/db';
 import { toast } from 'react-toastify';
-import WithTooltip from '~/components/ui/Tooltip';
 import { useStore } from '@nanostores/react';
 import { profileStore } from '~/lib/stores/profile';
 import { forwardRef } from 'react';
@@ -63,7 +62,7 @@ export const Messages = forwardRef<HTMLDivElement, MessagesProps>(
               return (
                 <div
                   key={index}
-                  className={classNames('flex gap-4 p-6 w-full rounded-[calc(0.75rem-1px)]', {
+                  className={classNames('flex gap-4 p-6 py-5 w-full rounded-[calc(0.75rem-1px)]', {
                     'bg-bolt-elements-messages-background': isUserMessage || !isStreaming || (isStreaming && !isLast),
                     'bg-gradient-to-b from-bolt-elements-messages-background from-30% to-transparent':
                       isStreaming && isLast,
@@ -89,42 +88,21 @@ export const Messages = forwardRef<HTMLDivElement, MessagesProps>(
                     {isUserMessage ? (
                       <UserMessage content={content} />
                     ) : (
-                      <AssistantMessage content={content} annotations={message.annotations} />
+                      <AssistantMessage
+                        content={content}
+                        annotations={message.annotations}
+                        messageId={messageId}
+                        onRewind={handleRewind}
+                        onFork={handleFork}
+                      />
                     )}
                   </div>
-                  {!isUserMessage && (
-                    <div className="flex gap-2 flex-col lg:flex-row">
-                      {messageId && (
-                        <WithTooltip tooltip="Revert to this message">
-                          <button
-                            onClick={() => handleRewind(messageId)}
-                            key="i-ph:arrow-u-up-left"
-                            className={classNames(
-                              'i-ph:arrow-u-up-left',
-                              'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
-                            )}
-                          />
-                        </WithTooltip>
-                      )}
-
-                      <WithTooltip tooltip="Fork chat from this message">
-                        <button
-                          onClick={() => handleFork(messageId)}
-                          key="i-ph:git-fork"
-                          className={classNames(
-                            'i-ph:git-fork',
-                            'text-xl text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-colors',
-                          )}
-                        />
-                      </WithTooltip>
-                    </div>
-                  )}
                 </div>
               );
             })
           : null}
         {isStreaming && (
-          <div className="text-center w-full text-bolt-elements-textSecondary i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
+          <div className="text-center w-full  text-bolt-elements-item-contentAccent i-svg-spinners:3-dots-fade text-4xl mt-4"></div>
         )}
       </div>
     );

app/components/chat/ModelSelector.tsx

@@ -3,7 +3,6 @@ import { useEffect, useState, useRef } from 'react';
 import type { KeyboardEvent } from 'react';
 import type { ModelInfo } from '~/lib/modules/llm/types';
 import { classNames } from '~/utils/classNames';
-import * as React from 'react';
 
 interface ModelSelectorProps {
   model?: string;
@@ -27,17 +26,28 @@ export const ModelSelector = ({
 }: ModelSelectorProps) => {
   const [modelSearchQuery, setModelSearchQuery] = useState('');
   const [isModelDropdownOpen, setIsModelDropdownOpen] = useState(false);
-  const [focusedIndex, setFocusedIndex] = useState(-1);
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const optionsRef = useRef<(HTMLDivElement | null)[]>([]);
-  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [focusedModelIndex, setFocusedModelIndex] = useState(-1);
+  const modelSearchInputRef = useRef<HTMLInputElement>(null);
+  const modelOptionsRef = useRef<(HTMLDivElement | null)[]>([]);
+  const modelDropdownRef = useRef<HTMLDivElement>(null);
+  const [providerSearchQuery, setProviderSearchQuery] = useState('');
+  const [isProviderDropdownOpen, setIsProviderDropdownOpen] = useState(false);
+  const [focusedProviderIndex, setFocusedProviderIndex] = useState(-1);
+  const providerSearchInputRef = useRef<HTMLInputElement>(null);
+  const providerOptionsRef = useRef<(HTMLDivElement | null)[]>([]);
+  const providerDropdownRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+      if (modelDropdownRef.current && !modelDropdownRef.current.contains(event.target as Node)) {
         setIsModelDropdownOpen(false);
         setModelSearchQuery('');
       }
+
+      if (providerDropdownRef.current && !providerDropdownRef.current.contains(event.target as Node)) {
+        setIsProviderDropdownOpen(false);
+        setProviderSearchQuery('');
+      }
     };
 
     document.addEventListener('mousedown', handleClickOutside);
@@ -45,7 +55,6 @@ export const ModelSelector = ({
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
-  // Filter models based on search query
   const filteredModels = [...modelList]
     .filter((e) => e.provider === provider?.name && e.name)
     .filter(
@@ -54,20 +63,31 @@ export const ModelSelector = ({
         model.name.toLowerCase().includes(modelSearchQuery.toLowerCase()),
     );
 
-  // Reset focused index when search query changes or dropdown opens/closes
+  const filteredProviders = providerList.filter((p) =>
+    p.name.toLowerCase().includes(providerSearchQuery.toLowerCase()),
+  );
+
   useEffect(() => {
-    setFocusedIndex(-1);
+    setFocusedModelIndex(-1);
   }, [modelSearchQuery, isModelDropdownOpen]);
 
-  // Focus search input when dropdown opens
   useEffect(() => {
-    if (isModelDropdownOpen && searchInputRef.current) {
-      searchInputRef.current.focus();
+    setFocusedProviderIndex(-1);
+  }, [providerSearchQuery, isProviderDropdownOpen]);
+
+  useEffect(() => {
+    if (isModelDropdownOpen && modelSearchInputRef.current) {
+      modelSearchInputRef.current.focus();
     }
   }, [isModelDropdownOpen]);
 
-  // Handle keyboard navigation
-  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+  useEffect(() => {
+    if (isProviderDropdownOpen && providerSearchInputRef.current) {
+      providerSearchInputRef.current.focus();
+    }
+  }, [isProviderDropdownOpen]);
+
+  const handleModelKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
     if (!isModelDropdownOpen) {
       return;
     }
@@ -75,50 +95,30 @@ export const ModelSelector = ({
     switch (e.key) {
       case 'ArrowDown':
         e.preventDefault();
-        setFocusedIndex((prev) => {
-          const next = prev + 1;
-
-          if (next >= filteredModels.length) {
-            return 0;
-          }
-
-          return next;
-        });
+        setFocusedModelIndex((prev) => (prev + 1 >= filteredModels.length ? 0 : prev + 1));
         break;
-
       case 'ArrowUp':
         e.preventDefault();
-        setFocusedIndex((prev) => {
-          const next = prev - 1;
-
-          if (next < 0) {
-            return filteredModels.length - 1;
-          }
-
-          return next;
-        });
+        setFocusedModelIndex((prev) => (prev - 1 < 0 ? filteredModels.length - 1 : prev - 1));
         break;
-
       case 'Enter':
         e.preventDefault();
 
-        if (focusedIndex >= 0 && focusedIndex < filteredModels.length) {
-          const selectedModel = filteredModels[focusedIndex];
+        if (focusedModelIndex >= 0 && focusedModelIndex < filteredModels.length) {
+          const selectedModel = filteredModels[focusedModelIndex];
           setModel?.(selectedModel.name);
           setIsModelDropdownOpen(false);
           setModelSearchQuery('');
         }
 
         break;
-
       case 'Escape':
         e.preventDefault();
         setIsModelDropdownOpen(false);
         setModelSearchQuery('');
         break;
-
       case 'Tab':
-        if (!e.shiftKey && focusedIndex === filteredModels.length - 1) {
+        if (!e.shiftKey && focusedModelIndex === filteredModels.length - 1) {
           setIsModelDropdownOpen(false);
         }
 
@@ -126,25 +126,76 @@ export const ModelSelector = ({
     }
   };
 
-  // Focus the selected option
-  useEffect(() => {
-    if (focusedIndex >= 0 && optionsRef.current[focusedIndex]) {
-      optionsRef.current[focusedIndex]?.scrollIntoView({ block: 'nearest' });
+  const handleProviderKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    if (!isProviderDropdownOpen) {
+      return;
     }
-  }, [focusedIndex]);
 
-  // Update enabled providers when cookies change
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setFocusedProviderIndex((prev) => (prev + 1 >= filteredProviders.length ? 0 : prev + 1));
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setFocusedProviderIndex((prev) => (prev - 1 < 0 ? filteredProviders.length - 1 : prev - 1));
+        break;
+      case 'Enter':
+        e.preventDefault();
+
+        if (focusedProviderIndex >= 0 && focusedProviderIndex < filteredProviders.length) {
+          const selectedProvider = filteredProviders[focusedProviderIndex];
+
+          if (setProvider) {
+            setProvider(selectedProvider);
+
+            const firstModel = modelList.find((m) => m.provider === selectedProvider.name);
+
+            if (firstModel && setModel) {
+              setModel(firstModel.name);
+            }
+          }
+
+          setIsProviderDropdownOpen(false);
+          setProviderSearchQuery('');
+        }
+
+        break;
+      case 'Escape':
+        e.preventDefault();
+        setIsProviderDropdownOpen(false);
+        setProviderSearchQuery('');
+        break;
+      case 'Tab':
+        if (!e.shiftKey && focusedProviderIndex === filteredProviders.length - 1) {
+          setIsProviderDropdownOpen(false);
+        }
+
+        break;
+    }
+  };
+
+  useEffect(() => {
+    if (focusedModelIndex >= 0 && modelOptionsRef.current[focusedModelIndex]) {
+      modelOptionsRef.current[focusedModelIndex]?.scrollIntoView({ block: 'nearest' });
+    }
+  }, [focusedModelIndex]);
+
+  useEffect(() => {
+    if (focusedProviderIndex >= 0 && providerOptionsRef.current[focusedProviderIndex]) {
+      providerOptionsRef.current[focusedProviderIndex]?.scrollIntoView({ block: 'nearest' });
+    }
+  }, [focusedProviderIndex]);
+
   useEffect(() => {
-    // If current provider is disabled, switch to first enabled provider
     if (providerList.length === 0) {
       return;
     }
 
-    if (provider && !providerList.map((p) => p.name).includes(provider.name)) {
+    if (provider && !providerList.some((p) => p.name === provider.name)) {
       const firstEnabledProvider = providerList[0];
       setProvider?.(firstEnabledProvider);
 
-      // Also update the model to the first available one for the new provider
       const firstModel = modelList.find((m) => m.provider === firstEnabledProvider.name);
 
       if (firstModel) {
@@ -165,32 +216,136 @@ export const ModelSelector = ({
   }
 
   return (
-    <div className="mb-2 flex gap-2 flex-col sm:flex-row">
-      <select
-        value={provider?.name ?? ''}
-        onChange={(e) => {
-          const newProvider = providerList.find((p: ProviderInfo) => p.name === e.target.value);
+    <div className="flex gap-2 flex-col sm:flex-row">
+      {/* Provider Combobox */}
+      <div className="relative flex w-full" onKeyDown={handleProviderKeyDown} ref={providerDropdownRef}>
+        <div
+          className={classNames(
+            'w-full p-2 rounded-lg border border-bolt-elements-borderColor',
+            'bg-bolt-elements-prompt-background text-bolt-elements-textPrimary',
+            'focus-within:outline-none focus-within:ring-2 focus-within:ring-bolt-elements-focus',
+            'transition-all cursor-pointer',
+            isProviderDropdownOpen ? 'ring-2 ring-bolt-elements-focus' : undefined,
+          )}
+          onClick={() => setIsProviderDropdownOpen(!isProviderDropdownOpen)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              setIsProviderDropdownOpen(!isProviderDropdownOpen);
+            }
+          }}
+          role="combobox"
+          aria-expanded={isProviderDropdownOpen}
+          aria-controls="provider-listbox"
+          aria-haspopup="listbox"
+          tabIndex={0}
+        >
+          <div className="flex items-center justify-between">
+            <div className="truncate">{provider?.name || 'Select provider'}</div>
+            <div
+              className={classNames(
+                'i-ph:caret-down w-4 h-4 text-bolt-elements-textSecondary opacity-75',
+                isProviderDropdownOpen ? 'rotate-180' : undefined,
+              )}
+            />
+          </div>
+        </div>
 
-          if (newProvider && setProvider) {
-            setProvider(newProvider);
-          }
+        {isProviderDropdownOpen && (
+          <div
+            className="absolute z-20 w-full mt-1 py-1 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 shadow-lg"
+            role="listbox"
+            id="provider-listbox"
+          >
+            <div className="px-2 pb-2">
+              <div className="relative">
+                <input
+                  ref={providerSearchInputRef}
+                  type="text"
+                  value={providerSearchQuery}
+                  onChange={(e) => setProviderSearchQuery(e.target.value)}
+                  placeholder="Search providers..."
+                  className={classNames(
+                    'w-full pl-2 py-1.5 rounded-md text-sm',
+                    'bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor',
+                    'text-bolt-elements-textPrimary placeholder:text-bolt-elements-textTertiary',
+                    'focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus',
+                    'transition-all',
+                  )}
+                  onClick={(e) => e.stopPropagation()}
+                  role="searchbox"
+                  aria-label="Search providers"
+                />
+                <div className="absolute left-2.5 top-1/2 -translate-y-1/2">
+                  <span className="i-ph:magnifying-glass text-bolt-elements-textTertiary" />
+                </div>
+              </div>
+            </div>
 
-          const firstModel = [...modelList].find((m) => m.provider === e.target.value);
+            <div
+              className={classNames(
+                'max-h-60 overflow-y-auto',
+                'sm:scrollbar-none',
+                '[&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:h-2',
+                '[&::-webkit-scrollbar-thumb]:bg-bolt-elements-borderColor',
+                '[&::-webkit-scrollbar-thumb]:hover:bg-bolt-elements-borderColorHover',
+                '[&::-webkit-scrollbar-thumb]:rounded-full',
+                '[&::-webkit-scrollbar-track]:bg-bolt-elements-background-depth-2',
+                '[&::-webkit-scrollbar-track]:rounded-full',
+                'sm:[&::-webkit-scrollbar]:w-1.5 sm:[&::-webkit-scrollbar]:h-1.5',
+                'sm:hover:[&::-webkit-scrollbar-thumb]:bg-bolt-elements-borderColor/50',
+                'sm:hover:[&::-webkit-scrollbar-thumb:hover]:bg-bolt-elements-borderColor',
+                'sm:[&::-webkit-scrollbar-track]:bg-transparent',
+              )}
+            >
+              {filteredProviders.length === 0 ? (
+                <div className="px-3 py-2 text-sm text-bolt-elements-textTertiary">No providers found</div>
+              ) : (
+                filteredProviders.map((providerOption, index) => (
+                  <div
+                    ref={(el) => (providerOptionsRef.current[index] = el)}
+                    key={providerOption.name}
+                    role="option"
+                    aria-selected={provider?.name === providerOption.name}
+                    className={classNames(
+                      'px-3 py-2 text-sm cursor-pointer',
+                      'hover:bg-bolt-elements-background-depth-3',
+                      'text-bolt-elements-textPrimary',
+                      'outline-none',
+                      provider?.name === providerOption.name || focusedProviderIndex === index
+                        ? 'bg-bolt-elements-background-depth-2'
+                        : undefined,
+                      focusedProviderIndex === index ? 'ring-1 ring-inset ring-bolt-elements-focus' : undefined,
+                    )}
+                    onClick={(e) => {
+                      e.stopPropagation();
 
-          if (firstModel && setModel) {
-            setModel(firstModel.name);
-          }
-        }}
-        className="flex-1 p-2 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-prompt-background text-bolt-elements-textPrimary focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus transition-all"
-      >
-        {providerList.map((provider: ProviderInfo) => (
-          <option key={provider.name} value={provider.name}>
-            {provider.name}
-          </option>
-        ))}
-      </select>
+                      if (setProvider) {
+                        setProvider(providerOption);
 
-      <div className="relative flex-1 lg:max-w-[70%]" onKeyDown={handleKeyDown} ref={dropdownRef}>
+                        const firstModel = modelList.find((m) => m.provider === providerOption.name);
+
+                        if (firstModel && setModel) {
+                          setModel(firstModel.name);
+                        }
+                      }
+
+                      setIsProviderDropdownOpen(false);
+                      setProviderSearchQuery('');
+                    }}
+                    tabIndex={focusedProviderIndex === index ? 0 : -1}
+                  >
+                    {providerOption.name}
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Model Combobox */}
+      <div className="relative flex w-full min-w-[70%]" onKeyDown={handleModelKeyDown} ref={modelDropdownRef}>
         <div
           className={classNames(
             'w-full p-2 rounded-lg border border-bolt-elements-borderColor',
@@ -225,20 +380,20 @@ export const ModelSelector = ({
 
         {isModelDropdownOpen && (
           <div
-            className="absolute z-10 w-full mt-1 py-1 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2  shadow-lg"
+            className="absolute z-10 w-full mt-1 py-1 rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 shadow-lg"
             role="listbox"
             id="model-listbox"
           >
             <div className="px-2 pb-2">
               <div className="relative">
                 <input
-                  ref={searchInputRef}
+                  ref={modelSearchInputRef}
                   type="text"
                   value={modelSearchQuery}
                   onChange={(e) => setModelSearchQuery(e.target.value)}
                   placeholder="Search models..."
                   className={classNames(
-                    'w-full pl-8 pr-3 py-1.5 rounded-md text-sm',
+                    'w-full pl-2 py-1.5 rounded-md text-sm',
                     'bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor',
                     'text-bolt-elements-textPrimary placeholder:text-bolt-elements-textTertiary',
                     'focus:outline-none focus:ring-2 focus:ring-bolt-elements-focus',
@@ -277,8 +432,8 @@ export const ModelSelector = ({
               ) : (
                 filteredModels.map((modelOption, index) => (
                   <div
-                    ref={(el) => (optionsRef.current[index] = el)}
-                    key={index}
+                    ref={(el) => (modelOptionsRef.current[index] = el)}
+                    key={index} // Consider using modelOption.name if unique
                     role="option"
                     aria-selected={model === modelOption.name}
                     className={classNames(
@@ -286,10 +441,10 @@ export const ModelSelector = ({
                       'hover:bg-bolt-elements-background-depth-3',
                       'text-bolt-elements-textPrimary',
                       'outline-none',
-                      model === modelOption.name || focusedIndex === index
+                      model === modelOption.name || focusedModelIndex === index
                         ? 'bg-bolt-elements-background-depth-2'
                         : undefined,
-                      focusedIndex === index ? 'ring-1 ring-inset ring-bolt-elements-focus' : undefined,
+                      focusedModelIndex === index ? 'ring-1 ring-inset ring-bolt-elements-focus' : undefined,
                     )}
                     onClick={(e) => {
                       e.stopPropagation();
@@ -297,7 +452,7 @@ export const ModelSelector = ({
                       setIsModelDropdownOpen(false);
                       setModelSearchQuery('');
                     }}
-                    tabIndex={focusedIndex === index ? 0 : -1}
+                    tabIndex={focusedModelIndex === index ? 0 : -1}
                   >
                     {modelOption.label}
                   </div>

app/components/chat/NetlifyDeploymentLink.client.tsx

@@ -30,10 +30,10 @@ export function NetlifyDeploymentLink() {
             rel="noopener noreferrer"
             className="inline-flex items-center justify-center w-8 h-8 rounded hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-textSecondary hover:text-[#00AD9F] z-50"
             onClick={(e) => {
-              e.stopPropagation(); // Add this to prevent click from bubbling up
+              e.stopPropagation(); // This is to prevent click from bubbling up
             }}
           >
-            <div className="i-ph:rocket-launch w-5 h-5" />
+            <div className="i-ph:link w-4 h-4 hover:text-blue-400" />
           </a>
         </Tooltip.Trigger>
         <Tooltip.Portal>

app/components/chat/StarterTemplates.tsx

@@ -21,19 +21,11 @@ const FrameworkLink: React.FC<FrameworkLinkProps> = ({ template }) => (
 );
 
 const StarterTemplates: React.FC = () => {
-  // Debug: Log available templates and their icons
-  React.useEffect(() => {
-    console.log(
-      'Available templates:',
-      STARTER_TEMPLATES.map((t) => ({ name: t.name, icon: t.icon })),
-    );
-  }, []);
-
   return (
     <div className="flex flex-col items-center gap-4">
       <span className="text-sm text-gray-500">or start a blank app with your favorite stack</span>
       <div className="flex justify-center">
-        <div className="flex w-70 flex-wrap items-center justify-center gap-4">
+        <div className="flex flex-wrap justify-center items-center gap-4 max-w-sm">
           {STARTER_TEMPLATES.map((template) => (
             <FrameworkLink key={template.name} template={template} />
           ))}

app/components/chat/SupabaseAlert.tsx

@@ -0,0 +1,199 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import type { SupabaseAlert } from '~/types/actions';
+import { classNames } from '~/utils/classNames';
+import { supabaseConnection } from '~/lib/stores/supabase';
+import { useStore } from '@nanostores/react';
+import { useState } from 'react';
+
+interface Props {
+  alert: SupabaseAlert;
+  clearAlert: () => void;
+  postMessage: (message: string) => void;
+}
+
+export function SupabaseChatAlert({ alert, clearAlert, postMessage }: Props) {
+  const { content } = alert;
+  const connection = useStore(supabaseConnection);
+  const [isExecuting, setIsExecuting] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(true);
+
+  // Determine connection state
+  const isConnected = !!(connection.token && connection.selectedProjectId);
+
+  // Set title and description based on connection state
+  const title = isConnected ? 'Supabase Query' : 'Supabase Connection Required';
+  const description = isConnected ? 'Execute database query' : 'Supabase connection required';
+  const message = isConnected
+    ? 'Please review the proposed changes and apply them to your database.'
+    : 'Please connect to Supabase to continue with this operation.';
+
+  const handleConnectClick = () => {
+    // Dispatch an event to open the Supabase connection dialog
+    document.dispatchEvent(new CustomEvent('open-supabase-connection'));
+  };
+
+  // Determine if we should show the Connect button or Apply Changes button
+  const showConnectButton = !isConnected;
+
+  const executeSupabaseAction = async (sql: string) => {
+    if (!connection.token || !connection.selectedProjectId) {
+      console.error('No Supabase token or project selected');
+      return;
+    }
+
+    setIsExecuting(true);
+
+    try {
+      const response = await fetch('/api/supabase/query', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${connection.token}`,
+        },
+        body: JSON.stringify({
+          projectId: connection.selectedProjectId,
+          query: sql,
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData = (await response.json()) as any;
+        throw new Error(`Supabase query failed: ${errorData.error?.message || response.statusText}`);
+      }
+
+      const result = await response.json();
+      console.log('Supabase query executed successfully:', result);
+      clearAlert();
+    } catch (error) {
+      console.error('Failed to execute Supabase action:', error);
+      postMessage(
+        `*Error executing Supabase query please fix and return the query again*\n\`\`\`\n${error instanceof Error ? error.message : String(error)}\n\`\`\`\n`,
+      );
+    } finally {
+      setIsExecuting(false);
+    }
+  };
+
+  const cleanSqlContent = (content: string) => {
+    if (!content) {
+      return '';
+    }
+
+    let cleaned = content.replace(/\/\*[\s\S]*?\*\//g, '');
+
+    cleaned = cleaned.replace(/(--).*$/gm, '').replace(/(#).*$/gm, '');
+
+    const statements = cleaned
+      .split(';')
+      .map((stmt) => stmt.trim())
+      .filter((stmt) => stmt.length > 0)
+      .join(';\n\n');
+
+    return statements;
+  };
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -20 }}
+        transition={{ duration: 0.3 }}
+        className="max-w-chat rounded-lg border-l-2 border-l-[#098F5F] border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2"
+      >
+        {/* Header */}
+        <div className="p-4 pb-2">
+          <div className="flex items-center gap-2">
+            <img height="10" width="18" crossOrigin="anonymous" src="https://cdn.simpleicons.org/supabase" />
+            <h3 className="text-sm font-medium text-[#3DCB8F]">{title}</h3>
+          </div>
+        </div>
+
+        {/* SQL Content */}
+        <div className="px-4">
+          {!isConnected ? (
+            <div className="p-3 rounded-md bg-bolt-elements-background-depth-3">
+              <span className="text-sm text-bolt-elements-textPrimary">
+                You must first connect to Supabase and select a project.
+              </span>
+            </div>
+          ) : (
+            <>
+              <div
+                className="flex items-center p-2 rounded-md bg-bolt-elements-background-depth-3 cursor-pointer"
+                onClick={() => setIsCollapsed(!isCollapsed)}
+              >
+                <div className="i-ph:database text-bolt-elements-textPrimary mr-2"></div>
+                <span className="text-sm text-bolt-elements-textPrimary flex-grow">
+                  {description || 'Create table and setup auth'}
+                </span>
+                <div
+                  className={`i-ph:caret-up text-bolt-elements-textPrimary transition-transform ${isCollapsed ? 'rotate-180' : ''}`}
+                ></div>
+              </div>
+
+              {!isCollapsed && content && (
+                <div className="mt-2 p-3 bg-bolt-elements-background-depth-4 rounded-md overflow-auto max-h-60 font-mono text-xs text-bolt-elements-textSecondary">
+                  <pre>{cleanSqlContent(content)}</pre>
+                </div>
+              )}
+            </>
+          )}
+        </div>
+
+        {/* Message and Actions */}
+        <div className="p-4">
+          <p className="text-sm text-bolt-elements-textSecondary mb-4">{message}</p>
+
+          <div className="flex gap-2">
+            {showConnectButton ? (
+              <button
+                onClick={handleConnectClick}
+                className={classNames(
+                  `px-3 py-2 rounded-md text-sm font-medium`,
+                  'bg-[#098F5F]',
+                  'hover:bg-[#0aa06c]',
+                  'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500',
+                  'text-white',
+                  'flex items-center gap-1.5',
+                )}
+              >
+                Connect to Supabase
+              </button>
+            ) : (
+              <button
+                onClick={() => executeSupabaseAction(content)}
+                disabled={isExecuting}
+                className={classNames(
+                  `px-3 py-2 rounded-md text-sm font-medium`,
+                  'bg-[#098F5F]',
+                  'hover:bg-[#0aa06c]',
+                  'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500',
+                  'text-white',
+                  'flex items-center gap-1.5',
+                  isExecuting ? 'opacity-70 cursor-not-allowed' : '',
+                )}
+              >
+                {isExecuting ? 'Applying...' : 'Apply Changes'}
+              </button>
+            )}
+            <button
+              onClick={clearAlert}
+              disabled={isExecuting}
+              className={classNames(
+                `px-3 py-2 rounded-md text-sm font-medium`,
+                'bg-[#503B26]',
+                'hover:bg-[#774f28]',
+                'focus:outline-none',
+                'text-[#F79007]',
+                isExecuting ? 'opacity-70 cursor-not-allowed' : '',
+              )}
+            >
+              Dismiss
+            </button>
+          </div>
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}

app/components/chat/SupabaseConnection.tsx

@@ -0,0 +1,339 @@
+import { useEffect } from 'react';
+import { useSupabaseConnection } from '~/lib/hooks/useSupabaseConnection';
+import { classNames } from '~/utils/classNames';
+import { useStore } from '@nanostores/react';
+import { chatId } from '~/lib/persistence/useChatHistory';
+import { fetchSupabaseStats } from '~/lib/stores/supabase';
+import { Dialog, DialogRoot, DialogClose, DialogTitle, DialogButton } from '~/components/ui/Dialog';
+
+export function SupabaseConnection() {
+  const {
+    connection: supabaseConn,
+    connecting,
+    fetchingStats,
+    isProjectsExpanded,
+    setIsProjectsExpanded,
+    isDropdownOpen: isDialogOpen,
+    setIsDropdownOpen: setIsDialogOpen,
+    handleConnect,
+    handleDisconnect,
+    selectProject,
+    handleCreateProject,
+    updateToken,
+    isConnected,
+    fetchProjectApiKeys,
+  } = useSupabaseConnection();
+
+  const currentChatId = useStore(chatId);
+
+  useEffect(() => {
+    const handleOpenConnectionDialog = () => {
+      setIsDialogOpen(true);
+    };
+
+    document.addEventListener('open-supabase-connection', handleOpenConnectionDialog);
+
+    return () => {
+      document.removeEventListener('open-supabase-connection', handleOpenConnectionDialog);
+    };
+  }, [setIsDialogOpen]);
+
+  useEffect(() => {
+    if (isConnected && currentChatId) {
+      const savedProjectId = localStorage.getItem(`supabase-project-${currentChatId}`);
+
+      /*
+       * If there's no saved project for this chat but there is a global selected project,
+       * use the global one instead of clearing it
+       */
+      if (!savedProjectId && supabaseConn.selectedProjectId) {
+        // Save the current global project to this chat
+        localStorage.setItem(`supabase-project-${currentChatId}`, supabaseConn.selectedProjectId);
+      } else if (savedProjectId && savedProjectId !== supabaseConn.selectedProjectId) {
+        selectProject(savedProjectId);
+      }
+    }
+  }, [isConnected, currentChatId]);
+
+  useEffect(() => {
+    if (currentChatId && supabaseConn.selectedProjectId) {
+      localStorage.setItem(`supabase-project-${currentChatId}`, supabaseConn.selectedProjectId);
+    } else if (currentChatId && !supabaseConn.selectedProjectId) {
+      localStorage.removeItem(`supabase-project-${currentChatId}`);
+    }
+  }, [currentChatId, supabaseConn.selectedProjectId]);
+
+  useEffect(() => {
+    if (isConnected && supabaseConn.token) {
+      fetchSupabaseStats(supabaseConn.token).catch(console.error);
+    }
+  }, [isConnected, supabaseConn.token]);
+
+  useEffect(() => {
+    if (isConnected && supabaseConn.selectedProjectId && supabaseConn.token && !supabaseConn.credentials) {
+      fetchProjectApiKeys(supabaseConn.selectedProjectId).catch(console.error);
+    }
+  }, [isConnected, supabaseConn.selectedProjectId, supabaseConn.token, supabaseConn.credentials]);
+
+  return (
+    <div className="relative">
+      <div className="flex border border-bolt-elements-borderColor rounded-md overflow-hidden mr-2 text-sm">
+        <Button
+          active
+          disabled={connecting}
+          onClick={() => setIsDialogOpen(!isDialogOpen)}
+          className="hover:bg-bolt-elements-item-backgroundActive !text-white flex items-center gap-2"
+        >
+          <img
+            className="w-4 h-4"
+            height="20"
+            width="20"
+            crossOrigin="anonymous"
+            src="https://cdn.simpleicons.org/supabase"
+          />
+          {isConnected && supabaseConn.project && (
+            <span className="ml-1 text-xs max-w-[100px] truncate">{supabaseConn.project.name}</span>
+          )}
+        </Button>
+      </div>
+
+      <DialogRoot open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        {isDialogOpen && (
+          <Dialog className="max-w-[520px] p-6">
+            {!isConnected ? (
+              <div className="space-y-4">
+                <DialogTitle>
+                  <img
+                    className="w-5 h-5"
+                    height="24"
+                    width="24"
+                    crossOrigin="anonymous"
+                    src="https://cdn.simpleicons.org/supabase"
+                  />
+                  Connect to Supabase
+                </DialogTitle>
+
+                <div>
+                  <label className="block text-sm text-bolt-elements-textSecondary mb-2">Access Token</label>
+                  <input
+                    type="password"
+                    value={supabaseConn.token}
+                    onChange={(e) => updateToken(e.target.value)}
+                    disabled={connecting}
+                    placeholder="Enter your Supabase access token"
+                    className={classNames(
+                      'w-full px-3 py-2 rounded-lg text-sm',
+                      'bg-[#F8F8F8] dark:bg-[#1A1A1A]',
+                      'border border-[#E5E5E5] dark:border-[#333333]',
+                      'text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary',
+                      'focus:outline-none focus:ring-1 focus:ring-[#3ECF8E]',
+                      'disabled:opacity-50',
+                    )}
+                  />
+                  <div className="mt-2 text-sm text-bolt-elements-textSecondary">
+                    <a
+                      href="https://app.supabase.com/account/tokens"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-[#3ECF8E] hover:underline inline-flex items-center gap-1"
+                    >
+                      Get your token
+                      <div className="i-ph:arrow-square-out w-4 h-4" />
+                    </a>
+                  </div>
+                </div>
+
+                <div className="flex justify-end gap-2 mt-6">
+                  <DialogClose asChild>
+                    <DialogButton type="secondary">Cancel</DialogButton>
+                  </DialogClose>
+                  <button
+                    onClick={handleConnect}
+                    disabled={connecting || !supabaseConn.token}
+                    className={classNames(
+                      'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
+                      'bg-[#3ECF8E] text-white',
+                      'hover:bg-[#3BBF84]',
+                      'disabled:opacity-50 disabled:cursor-not-allowed',
+                    )}
+                  >
+                    {connecting ? (
+                      <>
+                        <div className="i-ph:spinner-gap animate-spin" />
+                        Connecting...
+                      </>
+                    ) : (
+                      <>
+                        <div className="i-ph:plug-charging w-4 h-4" />
+                        Connect
+                      </>
+                    )}
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <div className="space-y-4">
+                <div className="flex items-center justify-between mb-2">
+                  <DialogTitle>
+                    <img
+                      className="w-5 h-5"
+                      height="24"
+                      width="24"
+                      crossOrigin="anonymous"
+                      src="https://cdn.simpleicons.org/supabase"
+                    />
+                    Supabase Connection
+                  </DialogTitle>
+                </div>
+
+                <div className="flex items-center gap-4 p-3 bg-[#F8F8F8] dark:bg-[#1A1A1A] rounded-lg">
+                  <div>
+                    <h4 className="text-sm font-medium text-bolt-elements-textPrimary">{supabaseConn.user?.email}</h4>
+                    <p className="text-xs text-bolt-elements-textSecondary">Role: {supabaseConn.user?.role}</p>
+                  </div>
+                </div>
+
+                {fetchingStats ? (
+                  <div className="flex items-center gap-2 text-sm text-bolt-elements-textSecondary">
+                    <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+                    Fetching projects...
+                  </div>
+                ) : (
+                  <div>
+                    <div className="flex items-center justify-between mb-2">
+                      <button
+                        onClick={() => setIsProjectsExpanded(!isProjectsExpanded)}
+                        className="bg-transparent text-left text-sm font-medium text-bolt-elements-textPrimary flex items-center gap-2"
+                      >
+                        <div className="i-ph:database w-4 h-4" />
+                        Your Projects ({supabaseConn.stats?.totalProjects || 0})
+                        <div
+                          className={classNames(
+                            'i-ph:caret-down w-4 h-4 transition-transform',
+                            isProjectsExpanded ? 'rotate-180' : '',
+                          )}
+                        />
+                      </button>
+                      <div className="flex items-center gap-2">
+                        <button
+                          onClick={() => fetchSupabaseStats(supabaseConn.token)}
+                          className="px-2 py-1 rounded-md text-xs bg-[#F0F0F0] dark:bg-[#252525] text-bolt-elements-textSecondary hover:bg-[#E5E5E5] dark:hover:bg-[#333333] flex items-center gap-1"
+                          title="Refresh projects list"
+                        >
+                          <div className="i-ph:arrows-clockwise w-3 h-3" />
+                          Refresh
+                        </button>
+                        <button
+                          onClick={() => handleCreateProject()}
+                          className="px-2 py-1 rounded-md text-xs bg-[#3ECF8E] text-white hover:bg-[#3BBF84] flex items-center gap-1"
+                        >
+                          <div className="i-ph:plus w-3 h-3" />
+                          New Project
+                        </button>
+                      </div>
+                    </div>
+
+                    {isProjectsExpanded && (
+                      <>
+                        {!supabaseConn.selectedProjectId && (
+                          <div className="mb-2 p-3 bg-[#F8F8F8] dark:bg-[#1A1A1A] rounded-lg text-sm text-bolt-elements-textSecondary">
+                            Select a project or create a new one for this chat
+                          </div>
+                        )}
+
+                        {supabaseConn.stats?.projects?.length ? (
+                          <div className="grid gap-2 max-h-60 overflow-y-auto">
+                            {supabaseConn.stats.projects.map((project) => (
+                              <div
+                                key={project.id}
+                                className="block p-3 rounded-lg border border-[#E5E5E5] dark:border-[#1A1A1A] hover:border-[#3ECF8E] dark:hover:border-[#3ECF8E] transition-colors"
+                              >
+                                <div className="flex items-center justify-between">
+                                  <div>
+                                    <h5 className="text-sm font-medium text-bolt-elements-textPrimary flex items-center gap-1">
+                                      <div className="i-ph:database w-3 h-3 text-[#3ECF8E]" />
+                                      {project.name}
+                                    </h5>
+                                    <div className="text-xs text-bolt-elements-textSecondary mt-1">
+                                      {project.region}
+                                    </div>
+                                  </div>
+                                  <button
+                                    onClick={() => selectProject(project.id)}
+                                    className={classNames(
+                                      'px-3 py-1 rounded-md text-xs',
+                                      supabaseConn.selectedProjectId === project.id
+                                        ? 'bg-[#3ECF8E] text-white'
+                                        : 'bg-[#F0F0F0] dark:bg-[#252525] text-bolt-elements-textSecondary hover:bg-[#3ECF8E] hover:text-white',
+                                    )}
+                                  >
+                                    {supabaseConn.selectedProjectId === project.id ? (
+                                      <span className="flex items-center gap-1">
+                                        <div className="i-ph:check w-3 h-3" />
+                                        Selected
+                                      </span>
+                                    ) : (
+                                      'Select'
+                                    )}
+                                  </button>
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        ) : (
+                          <div className="text-sm text-bolt-elements-textSecondary flex items-center gap-2">
+                            <div className="i-ph:info w-4 h-4" />
+                            No projects found
+                          </div>
+                        )}
+                      </>
+                    )}
+                  </div>
+                )}
+
+                <div className="flex justify-end gap-2 mt-6">
+                  <DialogClose asChild>
+                    <DialogButton type="secondary">Close</DialogButton>
+                  </DialogClose>
+                  <DialogButton type="danger" onClick={handleDisconnect}>
+                    <div className="i-ph:plugs w-4 h-4" />
+                    Disconnect
+                  </DialogButton>
+                </div>
+              </div>
+            )}
+          </Dialog>
+        )}
+      </DialogRoot>
+    </div>
+  );
+}
+
+interface ButtonProps {
+  active?: boolean;
+  disabled?: boolean;
+  children?: any;
+  onClick?: VoidFunction;
+  className?: string;
+}
+
+function Button({ active = false, disabled = false, children, onClick, className }: ButtonProps) {
+  return (
+    <button
+      className={classNames(
+        'flex items-center p-1.5',
+        {
+          'bg-bolt-elements-item-backgroundDefault hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary':
+            !active,
+          'bg-bolt-elements-item-backgroundDefault text-bolt-elements-item-contentAccent': active && !disabled,
+          'bg-bolt-elements-item-backgroundDefault text-alpha-gray-20 dark:text-alpha-white-20 cursor-not-allowed':
+            disabled,
+        },
+        className,
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+}

app/components/chat/UserMessage.tsx

@@ -16,7 +16,7 @@ export function UserMessage({ content }: UserMessageProps) {
     const images = content.filter((item) => item.type === 'image' && item.image);
 
     return (
-      <div className="overflow-hidden pt-[4px]">
+      <div className="overflow-hidden flex items-center">
         <div className="flex flex-col gap-4">
           {textContent && <Markdown html>{textContent}</Markdown>}
           {images.map((item, index) => (

app/components/chat/VercelDeploymentLink.client.tsx

@@ -0,0 +1,158 @@
+import { useStore } from '@nanostores/react';
+import { vercelConnection } from '~/lib/stores/vercel';
+import { chatId } from '~/lib/persistence/useChatHistory';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { useEffect, useState } from 'react';
+
+export function VercelDeploymentLink() {
+  const connection = useStore(vercelConnection);
+  const currentChatId = useStore(chatId);
+  const [deploymentUrl, setDeploymentUrl] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    async function fetchProjectData() {
+      if (!connection.token || !currentChatId) {
+        return;
+      }
+
+      // Check if we have a stored project ID for this chat
+      const projectId = localStorage.getItem(`vercel-project-${currentChatId}`);
+
+      if (!projectId) {
+        return;
+      }
+
+      setIsLoading(true);
+
+      try {
+        // Fetch projects directly from the API
+        const projectsResponse = await fetch('https://api.vercel.com/v9/projects', {
+          headers: {
+            Authorization: `Bearer ${connection.token}`,
+            'Content-Type': 'application/json',
+          },
+          cache: 'no-store',
+        });
+
+        if (!projectsResponse.ok) {
+          throw new Error(`Failed to fetch projects: ${projectsResponse.status}`);
+        }
+
+        const projectsData = (await projectsResponse.json()) as any;
+        const projects = projectsData.projects || [];
+
+        // Extract the chat number from currentChatId
+        const chatNumber = currentChatId.split('-')[0];
+
+        // Find project by matching the chat number in the name
+        const project = projects.find((p: { name: string | string[] }) => p.name.includes(`bolt-diy-${chatNumber}`));
+
+        if (project) {
+          // Fetch project details including deployments
+          const projectDetailsResponse = await fetch(`https://api.vercel.com/v9/projects/${project.id}`, {
+            headers: {
+              Authorization: `Bearer ${connection.token}`,
+              'Content-Type': 'application/json',
+            },
+            cache: 'no-store',
+          });
+
+          if (projectDetailsResponse.ok) {
+            const projectDetails = (await projectDetailsResponse.json()) as any;
+
+            // Try to get URL from production aliases first
+            if (projectDetails.targets?.production?.alias && projectDetails.targets.production.alias.length > 0) {
+              // Find the clean URL (without -projects.vercel.app)
+              const cleanUrl = projectDetails.targets.production.alias.find(
+                (a: string) => a.endsWith('.vercel.app') && !a.includes('-projects.vercel.app'),
+              );
+
+              if (cleanUrl) {
+                setDeploymentUrl(`https://${cleanUrl}`);
+                return;
+              } else {
+                // If no clean URL found, use the first alias
+                setDeploymentUrl(`https://${projectDetails.targets.production.alias[0]}`);
+                return;
+              }
+            }
+          }
+
+          // If no aliases or project details failed, try fetching deployments
+          const deploymentsResponse = await fetch(
+            `https://api.vercel.com/v6/deployments?projectId=${project.id}&limit=1`,
+            {
+              headers: {
+                Authorization: `Bearer ${connection.token}`,
+                'Content-Type': 'application/json',
+              },
+              cache: 'no-store',
+            },
+          );
+
+          if (deploymentsResponse.ok) {
+            const deploymentsData = (await deploymentsResponse.json()) as any;
+
+            if (deploymentsData.deployments && deploymentsData.deployments.length > 0) {
+              setDeploymentUrl(`https://${deploymentsData.deployments[0].url}`);
+              return;
+            }
+          }
+        }
+
+        // Fallback to API call if not found in fetched projects
+        const fallbackResponse = await fetch(`/api/vercel-deploy?projectId=${projectId}&token=${connection.token}`, {
+          method: 'GET',
+        });
+
+        const data = await fallbackResponse.json();
+
+        if ((data as { deploy?: { url?: string } }).deploy?.url) {
+          setDeploymentUrl((data as { deploy: { url: string } }).deploy.url);
+        } else if ((data as { project?: { url?: string } }).project?.url) {
+          setDeploymentUrl((data as { project: { url: string } }).project.url);
+        }
+      } catch (err) {
+        console.error('Error fetching Vercel deployment:', err);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchProjectData();
+  }, [connection.token, currentChatId]);
+
+  if (!deploymentUrl) {
+    return null;
+  }
+
+  return (
+    <Tooltip.Provider>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <a
+            href={deploymentUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center justify-center w-8 h-8 rounded hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-textSecondary hover:text-[#000000] z-50"
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <div className={`i-ph:link w-4 h-4 hover:text-blue-400 ${isLoading ? 'animate-pulse' : ''}`} />
+          </a>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content
+            className="px-3 py-2 rounded bg-bolt-elements-background-depth-3 text-bolt-elements-textPrimary text-xs z-50"
+            sideOffset={5}
+          >
+            {deploymentUrl}
+            <Tooltip.Arrow className="fill-bolt-elements-background-depth-3" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  );
+}

app/components/chat/chatExportAndImport/ImportButtons.tsx

@@ -64,13 +64,13 @@ export function ImportButtons(importChat: ((description: string, messages: Messa
               const input = document.getElementById('chat-import');
               input?.click();
             }}
-            variant="outline"
+            variant="default"
             size="lg"
             className={classNames(
-              'gap-2 bg-[#F5F5F5] dark:bg-[#252525]',
-              'text-bolt-elements-textPrimary dark:text-white',
-              'hover:bg-[#E5E5E5] dark:hover:bg-[#333333]',
-              'border-[#E5E5E5] dark:border-[#333333]',
+              'gap-2 bg-bolt-elements-background-depth-1',
+              'text-bolt-elements-textPrimary',
+              'hover:bg-bolt-elements-background-depth-2',
+              'border border-bolt-elements-borderColor',
               'h-10 px-4 py-2 min-w-[120px] justify-center',
               'transition-all duration-200 ease-in-out',
             )}
@@ -81,10 +81,10 @@ export function ImportButtons(importChat: ((description: string, messages: Messa
           <ImportFolderButton
             importChat={importChat}
             className={classNames(
-              'gap-2 bg-[#F5F5F5] dark:bg-[#252525]',
-              'text-bolt-elements-textPrimary dark:text-white',
-              'hover:bg-[#E5E5E5] dark:hover:bg-[#333333]',
-              'border border-[#E5E5E5] dark:border-[#333333]',
+              'gap-2 bg-bolt-elements-background-depth-1',
+              'text-bolt-elements-textPrimary',
+              'hover:bg-bolt-elements-background-depth-2',
+              'border border-[rgba(0,0,0,0.08)] dark:border-[rgba(255,255,255,0.08)]',
               'h-10 px-4 py-2 min-w-[120px] justify-center',
               'transition-all duration-200 ease-in-out rounded-lg',
             )}

app/components/deploy/DeployAlert.tsx

@@ -0,0 +1,197 @@
+import { AnimatePresence, motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+import type { DeployAlert } from '~/types/actions';
+
+interface DeployAlertProps {
+  alert: DeployAlert;
+  clearAlert: () => void;
+  postMessage: (message: string) => void;
+}
+
+export default function DeployChatAlert({ alert, clearAlert, postMessage }: DeployAlertProps) {
+  const { type, title, description, content, url, stage, buildStatus, deployStatus } = alert;
+
+  // Determine if we should show the deployment progress
+  const showProgress = stage && (buildStatus || deployStatus);
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0, y: -20 }}
+        transition={{ duration: 0.3 }}
+        className={`rounded-lg border border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 p-4 mb-2`}
+      >
+        <div className="flex items-start">
+          {/* Icon */}
+          <motion.div
+            className="flex-shrink-0"
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ delay: 0.2 }}
+          >
+            <div
+              className={classNames(
+                'text-xl',
+                type === 'success'
+                  ? 'i-ph:check-circle-duotone text-bolt-elements-icon-success'
+                  : type === 'error'
+                    ? 'i-ph:warning-duotone text-bolt-elements-button-danger-text'
+                    : 'i-ph:info-duotone text-bolt-elements-loader-progress',
+              )}
+            ></div>
+          </motion.div>
+          {/* Content */}
+          <div className="ml-3 flex-1">
+            <motion.h3
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.1 }}
+              className={`text-sm font-medium text-bolt-elements-textPrimary`}
+            >
+              {title}
+            </motion.h3>
+            <motion.div
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.2 }}
+              className={`mt-2 text-sm text-bolt-elements-textSecondary`}
+            >
+              <p>{description}</p>
+
+              {/* Deployment Progress Visualization */}
+              {showProgress && (
+                <div className="mt-4 mb-2">
+                  <div className="flex items-center space-x-2 mb-3">
+                    {/* Build Step */}
+                    <div className="flex items-center">
+                      <div
+                        className={classNames(
+                          'w-6 h-6 rounded-full flex items-center justify-center',
+                          buildStatus === 'running'
+                            ? 'bg-bolt-elements-loader-progress'
+                            : buildStatus === 'complete'
+                              ? 'bg-bolt-elements-icon-success'
+                              : buildStatus === 'failed'
+                                ? 'bg-bolt-elements-button-danger-background'
+                                : 'bg-bolt-elements-textTertiary',
+                        )}
+                      >
+                        {buildStatus === 'running' ? (
+                          <div className="i-svg-spinners:90-ring-with-bg text-white text-xs"></div>
+                        ) : buildStatus === 'complete' ? (
+                          <div className="i-ph:check text-white text-xs"></div>
+                        ) : buildStatus === 'failed' ? (
+                          <div className="i-ph:x text-white text-xs"></div>
+                        ) : (
+                          <span className="text-white text-xs">1</span>
+                        )}
+                      </div>
+                      <span className="ml-2">Build</span>
+                    </div>
+
+                    {/* Connector Line */}
+                    <div
+                      className={classNames(
+                        'h-0.5 w-8',
+                        buildStatus === 'complete' ? 'bg-bolt-elements-icon-success' : 'bg-bolt-elements-textTertiary',
+                      )}
+                    ></div>
+
+                    {/* Deploy Step */}
+                    <div className="flex items-center">
+                      <div
+                        className={classNames(
+                          'w-6 h-6 rounded-full flex items-center justify-center',
+                          deployStatus === 'running'
+                            ? 'bg-bolt-elements-loader-progress'
+                            : deployStatus === 'complete'
+                              ? 'bg-bolt-elements-icon-success'
+                              : deployStatus === 'failed'
+                                ? 'bg-bolt-elements-button-danger-background'
+                                : 'bg-bolt-elements-textTertiary',
+                        )}
+                      >
+                        {deployStatus === 'running' ? (
+                          <div className="i-svg-spinners:90-ring-with-bg text-white text-xs"></div>
+                        ) : deployStatus === 'complete' ? (
+                          <div className="i-ph:check text-white text-xs"></div>
+                        ) : deployStatus === 'failed' ? (
+                          <div className="i-ph:x text-white text-xs"></div>
+                        ) : (
+                          <span className="text-white text-xs">2</span>
+                        )}
+                      </div>
+                      <span className="ml-2">Deploy</span>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {content && (
+                <div className="text-xs text-bolt-elements-textSecondary p-2 bg-bolt-elements-background-depth-3 rounded mt-4 mb-4">
+                  {content}
+                </div>
+              )}
+              {url && type === 'success' && (
+                <div className="mt-2">
+                  <a
+                    href={url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-bolt-elements-item-contentAccent hover:underline flex items-center"
+                  >
+                    <span className="mr-1">View deployed site</span>
+                    <div className="i-ph:arrow-square-out"></div>
+                  </a>
+                </div>
+              )}
+            </motion.div>
+
+            {/* Actions */}
+            <motion.div
+              className="mt-4"
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.3 }}
+            >
+              <div className={classNames('flex gap-2')}>
+                {type === 'error' && (
+                  <button
+                    onClick={() =>
+                      postMessage(`*Fix this deployment error*\n\`\`\`\n${content || description}\n\`\`\`\n`)
+                    }
+                    className={classNames(
+                      `px-2 py-1.5 rounded-md text-sm font-medium`,
+                      'bg-bolt-elements-button-primary-background',
+                      'hover:bg-bolt-elements-button-primary-backgroundHover',
+                      'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bolt-elements-button-danger-background',
+                      'text-bolt-elements-button-primary-text',
+                      'flex items-center gap-1.5',
+                    )}
+                  >
+                    <div className="i-ph:chat-circle-duotone"></div>
+                    Ask Bolt
+                  </button>
+                )}
+                <button
+                  onClick={clearAlert}
+                  className={classNames(
+                    `px-2 py-1.5 rounded-md text-sm font-medium`,
+                    'bg-bolt-elements-button-secondary-background',
+                    'hover:bg-bolt-elements-button-secondary-backgroundHover',
+                    'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-bolt-elements-button-secondary-background',
+                    'text-bolt-elements-button-secondary-text',
+                  )}
+                >
+                  Dismiss
+                </button>
+              </div>
+            </motion.div>
+          </div>
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}

app/components/deploy/NetlifyDeploy.client.tsx

@@ -0,0 +1,243 @@
+import { toast } from 'react-toastify';
+import { useStore } from '@nanostores/react';
+import { netlifyConnection } from '~/lib/stores/netlify';
+import { workbenchStore } from '~/lib/stores/workbench';
+import { webcontainer } from '~/lib/webcontainer';
+import { path } from '~/utils/path';
+import { useState } from 'react';
+import type { ActionCallbackData } from '~/lib/runtime/message-parser';
+import { chatId } from '~/lib/persistence/useChatHistory';
+
+export function useNetlifyDeploy() {
+  const [isDeploying, setIsDeploying] = useState(false);
+  const netlifyConn = useStore(netlifyConnection);
+  const currentChatId = useStore(chatId);
+
+  const handleNetlifyDeploy = async () => {
+    if (!netlifyConn.user || !netlifyConn.token) {
+      toast.error('Please connect to Netlify first in the settings tab!');
+      return false;
+    }
+
+    if (!currentChatId) {
+      toast.error('No active chat found');
+      return false;
+    }
+
+    try {
+      setIsDeploying(true);
+
+      const artifact = workbenchStore.firstArtifact;
+
+      if (!artifact) {
+        throw new Error('No active project found');
+      }
+
+      // Create a deployment artifact for visual feedback
+      const deploymentId = `deploy-artifact`;
+      workbenchStore.addArtifact({
+        id: deploymentId,
+        messageId: deploymentId,
+        title: 'Netlify Deployment',
+        type: 'standalone',
+      });
+
+      const deployArtifact = workbenchStore.artifacts.get()[deploymentId];
+
+      // Notify that build is starting
+      deployArtifact.runner.handleDeployAction('building', 'running', { source: 'netlify' });
+
+      // Set up build action
+      const actionId = 'build-' + Date.now();
+      const actionData: ActionCallbackData = {
+        messageId: 'netlify build',
+        artifactId: artifact.id,
+        actionId,
+        action: {
+          type: 'build' as const,
+          content: 'npm run build',
+        },
+      };
+
+      // Add the action first
+      artifact.runner.addAction(actionData);
+
+      // Then run it
+      await artifact.runner.runAction(actionData);
+
+      if (!artifact.runner.buildOutput) {
+        // Notify that build failed
+        deployArtifact.runner.handleDeployAction('building', 'failed', {
+          error: 'Build failed. Check the terminal for details.',
+          source: 'netlify',
+        });
+        throw new Error('Build failed');
+      }
+
+      // Notify that build succeeded and deployment is starting
+      deployArtifact.runner.handleDeployAction('deploying', 'running', { source: 'netlify' });
+
+      // Get the build files
+      const container = await webcontainer;
+
+      // Remove /home/project from buildPath if it exists
+      const buildPath = artifact.runner.buildOutput.path.replace('/home/project', '');
+
+      console.log('Original buildPath', buildPath);
+
+      // Check if the build path exists
+      let finalBuildPath = buildPath;
+
+      // List of common output directories to check if the specified build path doesn't exist
+      const commonOutputDirs = [buildPath, '/dist', '/build', '/out', '/output', '/.next', '/public'];
+
+      // Verify the build path exists, or try to find an alternative
+      let buildPathExists = false;
+
+      for (const dir of commonOutputDirs) {
+        try {
+          await container.fs.readdir(dir);
+          finalBuildPath = dir;
+          buildPathExists = true;
+          console.log(`Using build directory: ${finalBuildPath}`);
+          break;
+        } catch (error) {
+          // Directory doesn't exist, try the next one
+          console.log(`Directory ${dir} doesn't exist, trying next option. ${error}`);
+          continue;
+        }
+      }
+
+      if (!buildPathExists) {
+        throw new Error('Could not find build output directory. Please check your build configuration.');
+      }
+
+      async function getAllFiles(dirPath: string): Promise<Record<string, string>> {
+        const files: Record<string, string> = {};
+        const entries = await container.fs.readdir(dirPath, { withFileTypes: true });
+
+        for (const entry of entries) {
+          const fullPath = path.join(dirPath, entry.name);
+
+          if (entry.isFile()) {
+            const content = await container.fs.readFile(fullPath, 'utf-8');
+
+            // Remove build path prefix from the path
+            const deployPath = fullPath.replace(finalBuildPath, '');
+            files[deployPath] = content;
+          } else if (entry.isDirectory()) {
+            const subFiles = await getAllFiles(fullPath);
+            Object.assign(files, subFiles);
+          }
+        }
+
+        return files;
+      }
+
+      const fileContents = await getAllFiles(finalBuildPath);
+
+      // Use chatId instead of artifact.id
+      const existingSiteId = localStorage.getItem(`netlify-site-${currentChatId}`);
+
+      const response = await fetch('/api/netlify-deploy', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          siteId: existingSiteId || undefined,
+          files: fileContents,
+          token: netlifyConn.token,
+          chatId: currentChatId,
+        }),
+      });
+
+      const data = (await response.json()) as any;
+
+      if (!response.ok || !data.deploy || !data.site) {
+        console.error('Invalid deploy response:', data);
+
+        // Notify that deployment failed
+        deployArtifact.runner.handleDeployAction('deploying', 'failed', {
+          error: data.error || 'Invalid deployment response',
+          source: 'netlify',
+        });
+        throw new Error(data.error || 'Invalid deployment response');
+      }
+
+      const maxAttempts = 20; // 2 minutes timeout
+      let attempts = 0;
+      let deploymentStatus;
+
+      while (attempts < maxAttempts) {
+        try {
+          const statusResponse = await fetch(
+            `https://api.netlify.com/api/v1/sites/${data.site.id}/deploys/${data.deploy.id}`,
+            {
+              headers: {
+                Authorization: `Bearer ${netlifyConn.token}`,
+              },
+            },
+          );
+
+          deploymentStatus = (await statusResponse.json()) as any;
+
+          if (deploymentStatus.state === 'ready' || deploymentStatus.state === 'uploaded') {
+            break;
+          }
+
+          if (deploymentStatus.state === 'error') {
+            // Notify that deployment failed
+            deployArtifact.runner.handleDeployAction('deploying', 'failed', {
+              error: 'Deployment failed: ' + (deploymentStatus.error_message || 'Unknown error'),
+              source: 'netlify',
+            });
+            throw new Error('Deployment failed: ' + (deploymentStatus.error_message || 'Unknown error'));
+          }
+
+          attempts++;
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+        } catch (error) {
+          console.error('Status check error:', error);
+          attempts++;
+          await new Promise((resolve) => setTimeout(resolve, 2000));
+        }
+      }
+
+      if (attempts >= maxAttempts) {
+        // Notify that deployment timed out
+        deployArtifact.runner.handleDeployAction('deploying', 'failed', {
+          error: 'Deployment timed out',
+          source: 'netlify',
+        });
+        throw new Error('Deployment timed out');
+      }
+
+      // Store the site ID if it's a new site
+      if (data.site) {
+        localStorage.setItem(`netlify-site-${currentChatId}`, data.site.id);
+      }
+
+      // Notify that deployment completed successfully
+      deployArtifact.runner.handleDeployAction('complete', 'complete', {
+        url: deploymentStatus.ssl_url || deploymentStatus.url,
+        source: 'netlify',
+      });
+
+      return true;
+    } catch (error) {
+      console.error('Deploy error:', error);
+      toast.error(error instanceof Error ? error.message : 'Deployment failed');
+
+      return false;
+    } finally {
+      setIsDeploying(false);
+    }
+  };
+
+  return {
+    isDeploying,
+    handleNetlifyDeploy,
+    isConnected: !!netlifyConn.user,
+  };
+}

app/components/deploy/VercelDeploy.client.tsx

@@ -0,0 +1,193 @@
+import { toast } from 'react-toastify';
+import { useStore } from '@nanostores/react';
+import { vercelConnection } from '~/lib/stores/vercel';
+import { workbenchStore } from '~/lib/stores/workbench';
+import { webcontainer } from '~/lib/webcontainer';
+import { path } from '~/utils/path';
+import { useState } from 'react';
+import type { ActionCallbackData } from '~/lib/runtime/message-parser';
+import { chatId } from '~/lib/persistence/useChatHistory';
+
+export function useVercelDeploy() {
+  const [isDeploying, setIsDeploying] = useState(false);
+  const vercelConn = useStore(vercelConnection);
+  const currentChatId = useStore(chatId);
+
+  const handleVercelDeploy = async () => {
+    if (!vercelConn.user || !vercelConn.token) {
+      toast.error('Please connect to Vercel first in the settings tab!');
+      return false;
+    }
+
+    if (!currentChatId) {
+      toast.error('No active chat found');
+      return false;
+    }
+
+    try {
+      setIsDeploying(true);
+
+      const artifact = workbenchStore.firstArtifact;
+
+      if (!artifact) {
+        throw new Error('No active project found');
+      }
+
+      // Create a deployment artifact for visual feedback
+      const deploymentId = `deploy-vercel-project`;
+      workbenchStore.addArtifact({
+        id: deploymentId,
+        messageId: deploymentId,
+        title: 'Vercel Deployment',
+        type: 'standalone',
+      });
+
+      const deployArtifact = workbenchStore.artifacts.get()[deploymentId];
+
+      // Notify that build is starting
+      deployArtifact.runner.handleDeployAction('building', 'running', { source: 'vercel' });
+
+      const actionId = 'build-' + Date.now();
+      const actionData: ActionCallbackData = {
+        messageId: 'vercel build',
+        artifactId: artifact.id,
+        actionId,
+        action: {
+          type: 'build' as const,
+          content: 'npm run build',
+        },
+      };
+
+      // Add the action first
+      artifact.runner.addAction(actionData);
+
+      // Then run it
+      await artifact.runner.runAction(actionData);
+
+      if (!artifact.runner.buildOutput) {
+        // Notify that build failed
+        deployArtifact.runner.handleDeployAction('building', 'failed', {
+          error: 'Build failed. Check the terminal for details.',
+          source: 'vercel',
+        });
+        throw new Error('Build failed');
+      }
+
+      // Notify that build succeeded and deployment is starting
+      deployArtifact.runner.handleDeployAction('deploying', 'running', { source: 'vercel' });
+
+      // Get the build files
+      const container = await webcontainer;
+
+      // Remove /home/project from buildPath if it exists
+      const buildPath = artifact.runner.buildOutput.path.replace('/home/project', '');
+
+      // Check if the build path exists
+      let finalBuildPath = buildPath;
+
+      // List of common output directories to check if the specified build path doesn't exist
+      const commonOutputDirs = [buildPath, '/dist', '/build', '/out', '/output', '/.next', '/public'];
+
+      // Verify the build path exists, or try to find an alternative
+      let buildPathExists = false;
+
+      for (const dir of commonOutputDirs) {
+        try {
+          await container.fs.readdir(dir);
+          finalBuildPath = dir;
+          buildPathExists = true;
+          console.log(`Using build directory: ${finalBuildPath}`);
+          break;
+        } catch (error) {
+          console.log(`Directory ${dir} doesn't exist, trying next option. ${error}`);
+
+          // Directory doesn't exist, try the next one
+          continue;
+        }
+      }
+
+      if (!buildPathExists) {
+        throw new Error('Could not find build output directory. Please check your build configuration.');
+      }
+
+      // Get all files recursively
+      async function getAllFiles(dirPath: string): Promise<Record<string, string>> {
+        const files: Record<string, string> = {};
+        const entries = await container.fs.readdir(dirPath, { withFileTypes: true });
+
+        for (const entry of entries) {
+          const fullPath = path.join(dirPath, entry.name);
+
+          if (entry.isFile()) {
+            const content = await container.fs.readFile(fullPath, 'utf-8');
+
+            // Remove build path prefix from the path
+            const deployPath = fullPath.replace(finalBuildPath, '');
+            files[deployPath] = content;
+          } else if (entry.isDirectory()) {
+            const subFiles = await getAllFiles(fullPath);
+            Object.assign(files, subFiles);
+          }
+        }
+
+        return files;
+      }
+
+      const fileContents = await getAllFiles(finalBuildPath);
+
+      // Use chatId instead of artifact.id
+      const existingProjectId = localStorage.getItem(`vercel-project-${currentChatId}`);
+
+      const response = await fetch('/api/vercel-deploy', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          projectId: existingProjectId || undefined,
+          files: fileContents,
+          token: vercelConn.token,
+          chatId: currentChatId,
+        }),
+      });
+
+      const data = (await response.json()) as any;
+
+      if (!response.ok || !data.deploy || !data.project) {
+        console.error('Invalid deploy response:', data);
+
+        // Notify that deployment failed
+        deployArtifact.runner.handleDeployAction('deploying', 'failed', {
+          error: data.error || 'Invalid deployment response',
+          source: 'vercel',
+        });
+        throw new Error(data.error || 'Invalid deployment response');
+      }
+
+      if (data.project) {
+        localStorage.setItem(`vercel-project-${currentChatId}`, data.project.id);
+      }
+
+      // Notify that deployment completed successfully
+      deployArtifact.runner.handleDeployAction('complete', 'complete', {
+        url: data.deploy.url,
+        source: 'vercel',
+      });
+
+      return true;
+    } catch (err) {
+      console.error('Vercel deploy error:', err);
+      toast.error(err instanceof Error ? err.message : 'Vercel deployment failed');
+
+      return false;
+    } finally {
+      setIsDeploying(false);
+    }
+  };
+
+  return {
+    isDeploying,
+    handleVercelDeploy,
+    isConnected: !!vercelConn.user,
+  };
+}

app/components/editor/codemirror/CodeMirrorEditor.tsx

@@ -21,13 +21,18 @@ import type { Theme } from '~/types/theme';
 import { classNames } from '~/utils/classNames';
 import { debounce } from '~/utils/debounce';
 import { createScopedLogger, renderLogger } from '~/utils/logger';
+import { isFileLocked, getCurrentChatId } from '~/utils/fileLocks';
 import { BinaryContent } from './BinaryContent';
 import { getTheme, reconfigureTheme } from './cm-theme';
 import { indentKeyBinding } from './indent';
 import { getLanguage } from './languages';
+import { createEnvMaskingExtension } from './EnvMasking';
 
 const logger = createScopedLogger('CodeMirrorEditor');
 
+// Create a module-level reference to the current document for use in tooltip functions
+let currentDocRef: EditorDocument | undefined;
+
 export interface EditorDocument {
   value: string;
   isBinary: boolean;
@@ -46,8 +51,10 @@ type TextEditorDocument = EditorDocument & {
 };
 
 export interface ScrollPosition {
-  top: number;
-  left: number;
+  top?: number;
+  left?: number;
+  line?: number;
+  column?: number;
 }
 
 export interface EditorUpdate {
@@ -134,6 +141,9 @@ export const CodeMirrorEditor = memo(
 
     const [languageCompartment] = useState(new Compartment());
 
+    // Add a compartment for the env masking extension
+    const [envMaskingCompartment] = useState(new Compartment());
+
     const containerRef = useRef<HTMLDivElement | null>(null);
     const viewRef = useRef<EditorView>();
     const themeRef = useRef<Theme>();
@@ -152,9 +162,44 @@ export const CodeMirrorEditor = memo(
       onChangeRef.current = onChange;
       onSaveRef.current = onSave;
       docRef.current = doc;
+
+      // Update the module-level reference for use in tooltip functions
+      currentDocRef = doc;
       themeRef.current = theme;
     });
 
+    useEffect(() => {
+      if (!viewRef.current || !doc || doc.isBinary) {
+        return;
+      }
+
+      if (typeof doc.scroll?.line === 'number') {
+        const line = doc.scroll.line;
+        const column = doc.scroll.column ?? 0;
+
+        try {
+          // Check if the line number is valid for the current document
+          const totalLines = viewRef.current.state.doc.lines;
+
+          // Only proceed if the line number is within the document's range
+          if (line < totalLines) {
+            const linePos = viewRef.current.state.doc.line(line + 1).from + column;
+            viewRef.current.dispatch({
+              selection: { anchor: linePos },
+              scrollIntoView: true,
+            });
+            viewRef.current.focus();
+          } else {
+            logger.warn(`Invalid line number ${line + 1} in ${totalLines}-line document`);
+          }
+        } catch (error) {
+          logger.error('Error scrolling to line:', error);
+        }
+      } else if (typeof doc.scroll?.top === 'number' || typeof doc.scroll?.left === 'number') {
+        viewRef.current.scrollDOM.scrollTo(doc.scroll.left ?? 0, doc.scroll.top ?? 0);
+      }
+    }, [doc?.scroll?.line, doc?.scroll?.column, doc?.scroll?.top, doc?.scroll?.left]);
+
     useEffect(() => {
       const onUpdate = debounce((update: EditorUpdate) => {
         onChangeRef.current?.(update);
@@ -214,6 +259,7 @@ export const CodeMirrorEditor = memo(
       if (!doc) {
         const state = newEditorState('', theme, settings, onScrollRef, debounceScroll, onSaveRef, [
           languageCompartment.of([]),
+          envMaskingCompartment.of([]),
         ]);
 
         view.setState(state);
@@ -236,6 +282,7 @@ export const CodeMirrorEditor = memo(
       if (!state) {
         state = newEditorState(doc.value, theme, settings, onScrollRef, debounceScroll, onSaveRef, [
           languageCompartment.of([]),
+          envMaskingCompartment.of([createEnvMaskingExtension(() => docRef.current?.filePath)]),
         ]);
 
         editorStates.set(doc.filePath, state);
@@ -251,6 +298,16 @@ export const CodeMirrorEditor = memo(
         autoFocusOnDocumentChange,
         doc as TextEditorDocument,
       );
+
+      // Check if the file is locked and update the editor state accordingly
+      const currentChatId = getCurrentChatId();
+      const { locked } = isFileLocked(doc.filePath, currentChatId);
+
+      if (locked) {
+        view.dispatch({
+          effects: [editableStateEffect.of(false)],
+        });
+      }
     }, [doc?.value, editable, doc?.filePath, autoFocusOnDocumentChange]);
 
     return (
@@ -392,8 +449,13 @@ function setEditorDocument(
     });
   }
 
+  // Check if the file is locked
+  const currentChatId = getCurrentChatId();
+  const { locked } = isFileLocked(doc.filePath, currentChatId);
+
+  // Set editable state based on both the editable prop and the file's lock state
   view.dispatch({
-    effects: [editableStateEffect.of(editable && !doc.isBinary)],
+    effects: [editableStateEffect.of(editable && !doc.isBinary && !locked)],
   });
 
   getLanguage(doc.filePath).then((languageSupport) => {
@@ -411,11 +473,36 @@ function setEditorDocument(
       const newLeft = doc.scroll?.left ?? 0;
       const newTop = doc.scroll?.top ?? 0;
 
+      if (typeof doc.scroll?.line === 'number') {
+        const line = doc.scroll.line;
+        const column = doc.scroll.column ?? 0;
+
+        try {
+          // Check if the line number is valid for the current document
+          const totalLines = view.state.doc.lines;
+
+          // Only proceed if the line number is within the document's range
+          if (line < totalLines) {
+            const linePos = view.state.doc.line(line + 1).from + column;
+            view.dispatch({
+              selection: { anchor: linePos },
+              scrollIntoView: true,
+            });
+            view.focus();
+          } else {
+            logger.warn(`Invalid line number ${line + 1} in ${totalLines}-line document`);
+          }
+        } catch (error) {
+          logger.error('Error scrolling to line:', error);
+        }
+
+        return;
+      }
+
       const needsScrolling = currentLeft !== newLeft || currentTop !== newTop;
 
       if (autoFocus && editable) {
         if (needsScrolling) {
-          // we have to wait until the scroll position was changed before we can set the focus
           view.scrollDOM.addEventListener(
             'scroll',
             () => {
@@ -424,7 +511,6 @@ function setEditorDocument(
             { once: true },
           );
         } else {
-          // if the scroll position is still the same we can focus immediately
           view.focus();
         }
       }
@@ -439,6 +525,20 @@ function getReadOnlyTooltip(state: EditorState) {
     return [];
   }
 
+  // Get the current document from the module-level reference
+  const currentDoc = currentDocRef;
+  let tooltipMessage = 'Cannot edit file while AI response is being generated';
+
+  // If we have a current document, check if it's locked
+  if (currentDoc?.filePath) {
+    const currentChatId = getCurrentChatId();
+    const { locked } = isFileLocked(currentDoc.filePath, currentChatId);
+
+    if (locked) {
+      tooltipMessage = 'This file is locked and cannot be edited';
+    }
+  }
+
   return state.selection.ranges
     .filter((range) => {
       return range.empty;
@@ -452,7 +552,7 @@ function getReadOnlyTooltip(state: EditorState) {
         create: () => {
           const divElement = document.createElement('div');
           divElement.className = 'cm-readonly-tooltip';
-          divElement.textContent = 'Cannot edit file while AI response is being generated';
+          divElement.textContent = tooltipMessage;
 
           return { dom: divElement };
         },

app/components/editor/codemirror/EnvMasking.ts

@@ -0,0 +1,80 @@
+import { EditorView, Decoration, type DecorationSet, ViewPlugin, WidgetType } from '@codemirror/view';
+
+// Create a proper WidgetType class for the masked text
+class MaskedTextWidget extends WidgetType {
+  constructor(private readonly _value: string) {
+    super();
+  }
+
+  eq(other: MaskedTextWidget) {
+    return other._value === this._value;
+  }
+
+  toDOM() {
+    const span = document.createElement('span');
+    span.textContent = '*'.repeat(this._value.length);
+    span.className = 'cm-masked-text';
+
+    return span;
+  }
+
+  ignoreEvent() {
+    return false;
+  }
+}
+
+export function createEnvMaskingExtension(getFilePath: () => string | undefined) {
+  return ViewPlugin.fromClass(
+    class {
+      decorations: DecorationSet;
+
+      constructor(view: EditorView) {
+        this.decorations = this.buildDecorations(view);
+      }
+
+      update(update: { docChanged: boolean; view: EditorView; viewportChanged: boolean }) {
+        if (update.docChanged || update.viewportChanged) {
+          this.decorations = this.buildDecorations(update.view);
+        }
+      }
+
+      buildDecorations(view: EditorView) {
+        const filePath = getFilePath();
+        const isEnvFile = filePath?.endsWith('.env') || filePath?.includes('.env.') || filePath?.includes('/.env');
+
+        if (!isEnvFile) {
+          return Decoration.none;
+        }
+
+        const decorations: any[] = [];
+        const doc = view.state.doc;
+
+        for (let i = 1; i <= doc.lines; i++) {
+          const line = doc.line(i);
+          const text = line.text;
+
+          // Match lines with KEY=VALUE format
+          const match = text.match(/^([^=]+)=(.+)$/);
+
+          if (match && !text.trim().startsWith('#')) {
+            const [, key, value] = match;
+            const valueStart = line.from + key.length + 1;
+
+            // Create a decoration that replaces the value with asterisks
+            decorations.push(
+              Decoration.replace({
+                inclusive: true,
+                widget: new MaskedTextWidget(value),
+              }).range(valueStart, line.to),
+            );
+          }
+        }
+
+        return Decoration.set(decorations);
+      }
+    },
+    {
+      decorations: (v) => v.decorations,
+    },
+  );
+}

app/components/git/GitUrlImport.client.tsx

@@ -31,7 +31,8 @@ const IGNORE_PATTERNS = [
   '**/npm-debug.log*',
   '**/yarn-debug.log*',
   '**/yarn-error.log*',
-  '**/*lock.json',
+
+  // Include this so npm install runs much faster '**/*lock.json',
   '**/*lock.yaml',
 ];
 

app/components/header/HeaderActionButtons.client.tsx

@@ -1,33 +1,36 @@
 import { useStore } from '@nanostores/react';
-import { toast } from 'react-toastify';
 import useViewport from '~/lib/hooks';
 import { chatStore } from '~/lib/stores/chat';
 import { netlifyConnection } from '~/lib/stores/netlify';
+import { vercelConnection } from '~/lib/stores/vercel';
 import { workbenchStore } from '~/lib/stores/workbench';
-import { webcontainer } from '~/lib/webcontainer';
 import { classNames } from '~/utils/classNames';
-import { path } from '~/utils/path';
 import { useEffect, useRef, useState } from 'react';
-import type { ActionCallbackData } from '~/lib/runtime/message-parser';
-import { chatId } from '~/lib/persistence/useChatHistory'; // Add this import
 import { streamingState } from '~/lib/stores/streaming';
 import { NetlifyDeploymentLink } from '~/components/chat/NetlifyDeploymentLink.client';
+import { VercelDeploymentLink } from '~/components/chat/VercelDeploymentLink.client';
+import { useVercelDeploy } from '~/components/deploy/VercelDeploy.client';
+import { useNetlifyDeploy } from '~/components/deploy/NetlifyDeploy.client';
 
 interface HeaderActionButtonsProps {}
 
 export function HeaderActionButtons({}: HeaderActionButtonsProps) {
   const showWorkbench = useStore(workbenchStore.showWorkbench);
   const { showChat } = useStore(chatStore);
-  const connection = useStore(netlifyConnection);
+  const netlifyConn = useStore(netlifyConnection);
+  const vercelConn = useStore(vercelConnection);
   const [activePreviewIndex] = useState(0);
   const previews = useStore(workbenchStore.previews);
   const activePreview = previews[activePreviewIndex];
   const [isDeploying, setIsDeploying] = useState(false);
+  const [deployingTo, setDeployingTo] = useState<'netlify' | 'vercel' | null>(null);
   const isSmallViewport = useViewport(1024);
   const canHideChat = showWorkbench || !showChat;
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const isStreaming = useStore(streamingState);
+  const { handleVercelDeploy } = useVercelDeploy();
+  const { handleNetlifyDeploy } = useNetlifyDeploy();
 
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
@@ -40,166 +43,27 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
-  const currentChatId = useStore(chatId);
-
-  const handleDeploy = async () => {
-    if (!connection.user || !connection.token) {
-      toast.error('Please connect to Netlify first in the settings tab!');
-      return;
-    }
-
-    if (!currentChatId) {
-      toast.error('No active chat found');
-      return;
-    }
+  const onVercelDeploy = async () => {
+    setIsDeploying(true);
+    setDeployingTo('vercel');
 
     try {
-      setIsDeploying(true);
-
-      const artifact = workbenchStore.firstArtifact;
-
-      if (!artifact) {
-        throw new Error('No active project found');
-      }
-
-      const actionId = 'build-' + Date.now();
-      const actionData: ActionCallbackData = {
-        messageId: 'netlify build',
-        artifactId: artifact.id,
-        actionId,
-        action: {
-          type: 'build' as const,
-          content: 'npm run build',
-        },
-      };
-
-      // Add the action first
-      artifact.runner.addAction(actionData);
-
-      // Then run it
-      await artifact.runner.runAction(actionData);
-
-      if (!artifact.runner.buildOutput) {
-        throw new Error('Build failed');
-      }
-
-      // Get the build files
-      const container = await webcontainer;
-
-      // Remove /home/project from buildPath if it exists
-      const buildPath = artifact.runner.buildOutput.path.replace('/home/project', '');
-
-      // Get all files recursively
-      async function getAllFiles(dirPath: string): Promise<Record<string, string>> {
-        const files: Record<string, string> = {};
-        const entries = await container.fs.readdir(dirPath, { withFileTypes: true });
-
-        for (const entry of entries) {
-          const fullPath = path.join(dirPath, entry.name);
-
-          if (entry.isFile()) {
-            const content = await container.fs.readFile(fullPath, 'utf-8');
-
-            // Remove /dist prefix from the path
-            const deployPath = fullPath.replace(buildPath, '');
-            files[deployPath] = content;
-          } else if (entry.isDirectory()) {
-            const subFiles = await getAllFiles(fullPath);
-            Object.assign(files, subFiles);
-          }
-        }
-
-        return files;
-      }
-
-      const fileContents = await getAllFiles(buildPath);
-
-      // Use chatId instead of artifact.id
-      const existingSiteId = localStorage.getItem(`netlify-site-${currentChatId}`);
-
-      // Deploy using the API route with file contents
-      const response = await fetch('/api/deploy', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          siteId: existingSiteId || undefined,
-          files: fileContents,
-          token: connection.token,
-          chatId: currentChatId, // Use chatId instead of artifact.id
-        }),
-      });
-
-      const data = (await response.json()) as any;
-
-      if (!response.ok || !data.deploy || !data.site) {
-        console.error('Invalid deploy response:', data);
-        throw new Error(data.error || 'Invalid deployment response');
-      }
-
-      // Poll for deployment status
-      const maxAttempts = 20; // 2 minutes timeout
-      let attempts = 0;
-      let deploymentStatus;
-
-      while (attempts < maxAttempts) {
-        try {
-          const statusResponse = await fetch(
-            `https://api.netlify.com/api/v1/sites/${data.site.id}/deploys/${data.deploy.id}`,
-            {
-              headers: {
-                Authorization: `Bearer ${connection.token}`,
-              },
-            },
-          );
-
-          deploymentStatus = (await statusResponse.json()) as any;
-
-          if (deploymentStatus.state === 'ready' || deploymentStatus.state === 'uploaded') {
-            break;
-          }
-
-          if (deploymentStatus.state === 'error') {
-            throw new Error('Deployment failed: ' + (deploymentStatus.error_message || 'Unknown error'));
-          }
-
-          attempts++;
-          await new Promise((resolve) => setTimeout(resolve, 1000));
-        } catch (error) {
-          console.error('Status check error:', error);
-          attempts++;
-          await new Promise((resolve) => setTimeout(resolve, 2000));
-        }
-      }
-
-      if (attempts >= maxAttempts) {
-        throw new Error('Deployment timed out');
-      }
-
-      // Store the site ID if it's a new site
-      if (data.site) {
-        localStorage.setItem(`netlify-site-${currentChatId}`, data.site.id);
-      }
-
-      toast.success(
-        <div>
-          Deployed successfully!{' '}
-          <a
-            href={deploymentStatus.ssl_url || deploymentStatus.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="underline"
-          >
-            View site
-          </a>
-        </div>,
-      );
-    } catch (error) {
-      console.error('Deploy error:', error);
-      toast.error(error instanceof Error ? error.message : 'Deployment failed');
+      await handleVercelDeploy();
     } finally {
       setIsDeploying(false);
+      setDeployingTo(null);
+    }
+  };
+
+  const onNetlifyDeploy = async () => {
+    setIsDeploying(true);
+    setDeployingTo('netlify');
+
+    try {
+      await handleNetlifyDeploy();
+    } finally {
+      setIsDeploying(false);
+      setDeployingTo(null);
     }
   };
 
@@ -213,7 +77,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
             onClick={() => setIsDropdownOpen(!isDropdownOpen)}
             className="px-4 hover:bg-bolt-elements-item-backgroundActive flex items-center gap-2"
           >
-            {isDeploying ? 'Deploying...' : 'Deploy'}
+            {isDeploying ? `Deploying to ${deployingTo}...` : 'Deploy'}
             <div
               className={classNames('i-ph:caret-down w-4 h-4 transition-transform', isDropdownOpen ? 'rotate-180' : '')}
             />
@@ -225,10 +89,10 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
             <Button
               active
               onClick={() => {
-                handleDeploy();
+                onNetlifyDeploy();
                 setIsDropdownOpen(false);
               }}
-              disabled={isDeploying || !activePreview || !connection.user}
+              disabled={isDeploying || !activePreview || !netlifyConn.user}
               className="flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md group relative"
             >
               <img
@@ -238,15 +102,20 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
                 crossOrigin="anonymous"
                 src="https://cdn.simpleicons.org/netlify"
               />
-              <span className="mx-auto">{!connection.user ? 'No Account Connected' : 'Deploy to Netlify'}</span>
-              {connection.user && <NetlifyDeploymentLink />}
+              <span className="mx-auto">
+                {!netlifyConn.user ? 'No Netlify Account Connected' : 'Deploy to Netlify'}
+              </span>
+              {netlifyConn.user && <NetlifyDeploymentLink />}
             </Button>
             <Button
-              active={false}
-              disabled
-              className="flex items-center w-full rounded-md px-4 py-2 text-sm text-bolt-elements-textTertiary gap-2"
+              active
+              onClick={() => {
+                onVercelDeploy();
+                setIsDropdownOpen(false);
+              }}
+              disabled={isDeploying || !activePreview || !vercelConn.user}
+              className="flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md group relative"
             >
-              <span className="sr-only">Coming Soon</span>
               <img
                 className="w-5 h-5 bg-black p-1 rounded"
                 height="24"
@@ -255,7 +124,8 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
                 src="https://cdn.simpleicons.org/vercel/white"
                 alt="vercel"
               />
-              <span className="mx-auto">Deploy to Vercel (Coming Soon)</span>
+              <span className="mx-auto">{!vercelConn.user ? 'No Vercel Account Connected' : 'Deploy to Vercel'}</span>
+              {vercelConn.user && <VercelDeploymentLink />}
             </Button>
             <Button
               active={false}
@@ -269,7 +139,7 @@ export function HeaderActionButtons({}: HeaderActionButtonsProps) {
                 width="24"
                 crossOrigin="anonymous"
                 src="https://cdn.simpleicons.org/cloudflare"
-                alt="vercel"
+                alt="cloudflare"
               />
               <span className="mx-auto">Deploy to Cloudflare (Coming Soon)</span>
             </Button>

app/components/sidebar/HistoryItem.tsx

@@ -1,19 +1,30 @@
 import { useParams } from '@remix-run/react';
 import { classNames } from '~/utils/classNames';
-import * as Dialog from '@radix-ui/react-dialog';
 import { type ChatHistoryItem } from '~/lib/persistence';
 import WithTooltip from '~/components/ui/Tooltip';
 import { useEditChatDescription } from '~/lib/hooks';
-import { forwardRef, type ForwardedRef } from 'react';
+import { forwardRef, type ForwardedRef, useCallback } from 'react';
+import { Checkbox } from '~/components/ui/Checkbox';
 
 interface HistoryItemProps {
   item: ChatHistoryItem;
   onDelete?: (event: React.UIEvent) => void;
   onDuplicate?: (id: string) => void;
   exportChat: (id?: string) => void;
+  selectionMode?: boolean;
+  isSelected?: boolean;
+  onToggleSelection?: (id: string) => void;
 }
 
-export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: HistoryItemProps) {
+export function HistoryItem({
+  item,
+  onDelete,
+  onDuplicate,
+  exportChat,
+  selectionMode = false,
+  isSelected = false,
+  onToggleSelection,
+}: HistoryItemProps) {
   const { id: urlId } = useParams();
   const isActiveChat = urlId === item.urlId;
 
@@ -24,13 +35,56 @@ export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: History
       syncWithGlobalStore: isActiveChat,
     });
 
+  const handleItemClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (selectionMode) {
+        e.preventDefault();
+        e.stopPropagation();
+        console.log('Item clicked in selection mode:', item.id);
+        onToggleSelection?.(item.id);
+      }
+    },
+    [selectionMode, item.id, onToggleSelection],
+  );
+
+  const handleCheckboxChange = useCallback(() => {
+    console.log('Checkbox changed for item:', item.id);
+    onToggleSelection?.(item.id);
+  }, [item.id, onToggleSelection]);
+
+  const handleDeleteClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      console.log('Delete button clicked for item:', item.id);
+
+      if (onDelete) {
+        onDelete(event as unknown as React.UIEvent);
+      }
+    },
+    [onDelete, item.id],
+  );
+
   return (
     <div
       className={classNames(
         'group rounded-lg text-sm text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50/80 dark:hover:bg-gray-800/30 overflow-hidden flex justify-between items-center px-3 py-2 transition-colors',
         { 'text-gray-900 dark:text-white bg-gray-50/80 dark:bg-gray-800/30': isActiveChat },
+        { 'cursor-pointer': selectionMode },
       )}
+      onClick={selectionMode ? handleItemClick : undefined}
     >
+      {selectionMode && (
+        <div className="flex items-center mr-2" onClick={(e) => e.stopPropagation()}>
+          <Checkbox
+            id={`select-${item.id}`}
+            checked={isSelected}
+            onCheckedChange={handleCheckboxChange}
+            className="h-4 w-4"
+          />
+        </div>
+      )}
+
       {editing ? (
         <form onSubmit={handleSubmit} className="flex-1 flex items-center gap-2">
           <input
@@ -49,14 +103,17 @@ export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: History
           />
         </form>
       ) : (
-        <a href={`/chat/${item.urlId}`} className="flex w-full relative truncate block">
+        <a
+          href={`/chat/${item.urlId}`}
+          className="flex w-full relative truncate block"
+          onClick={selectionMode ? handleItemClick : undefined}
+        >
           <WithTooltip tooltip={currentDescription}>
             <span className="truncate pr-24">{currentDescription}</span>
           </WithTooltip>
           <div
             className={classNames(
-              'absolute right-0 top-0 bottom-0 flex items-center bg-white dark:bg-gray-950 group-hover:bg-gray-50/80 dark:group-hover:bg-gray-800/30 px-2',
-              { 'bg-gray-50/80 dark:bg-gray-800/30': isActiveChat },
+              'absolute right-0 top-0 bottom-0 flex items-center bg-transparent px-2 transition-colors',
             )}
           >
             <div className="flex items-center gap-2.5 text-gray-400 dark:text-gray-500 opacity-0 group-hover:opacity-100 transition-opacity">
@@ -72,7 +129,10 @@ export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: History
                 <ChatActionButton
                   toolTipContent="Duplicate"
                   icon="i-ph:copy h-4 w-4"
-                  onClick={() => onDuplicate?.(item.id)}
+                  onClick={(event) => {
+                    event.preventDefault();
+                    onDuplicate?.(item.id);
+                  }}
                 />
               )}
               <ChatActionButton
@@ -83,17 +143,12 @@ export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: History
                   toggleEditMode();
                 }}
               />
-              <Dialog.Trigger asChild>
-                <ChatActionButton
-                  toolTipContent="Delete"
-                  icon="i-ph:trash h-4 w-4"
-                  className="hover:text-red-500"
-                  onClick={(event) => {
-                    event.preventDefault();
-                    onDelete?.(event);
-                  }}
-                />
-              </Dialog.Trigger>
+              <ChatActionButton
+                toolTipContent="Delete"
+                icon="i-ph:trash h-4 w-4"
+                className="hover:text-red-500 dark:hover:text-red-400"
+                onClick={handleDeleteClick}
+              />
             </div>
           </div>
         </a>

app/components/sidebar/Menu.client.tsx

@@ -5,9 +5,9 @@ import { Dialog, DialogButton, DialogDescription, DialogRoot, DialogTitle } from
 import { ThemeSwitch } from '~/components/ui/ThemeSwitch';
 import { ControlPanel } from '~/components/@settings/core/ControlPanel';
 import { SettingsButton } from '~/components/ui/SettingsButton';
+import { Button } from '~/components/ui/Button';
 import { db, deleteById, getAll, chatId, type ChatHistoryItem, useChatHistory } from '~/lib/persistence';
 import { cubicEasingFn } from '~/utils/easings';
-import { logger } from '~/utils/logger';
 import { HistoryItem } from './HistoryItem';
 import { binDates } from './date-binning';
 import { useSearchFilter } from '~/lib/hooks/useSearchFilter';
@@ -36,7 +36,10 @@ const menuVariants = {
   },
 } satisfies Variants;
 
-type DialogContent = { type: 'delete'; item: ChatHistoryItem } | null;
+type DialogContent =
+  | { type: 'delete'; item: ChatHistoryItem }
+  | { type: 'bulkDelete'; items: ChatHistoryItem[] }
+  | null;
 
 function CurrentDateTime() {
   const [dateTime, setDateTime] = useState(new Date());
@@ -51,7 +54,7 @@ function CurrentDateTime() {
 
   return (
     <div className="flex items-center gap-2 px-4 py-2 text-sm text-gray-600 dark:text-gray-400 border-b border-gray-100 dark:border-gray-800/50">
-      <div className="h-4 w-4 i-lucide:clock opacity-80" />
+      <div className="h-4 w-4 i-ph:clock opacity-80" />
       <div className="flex gap-2">
         <span>{dateTime.toLocaleDateString()}</span>
         <span>{dateTime.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</span>
@@ -68,6 +71,8 @@ export const Menu = () => {
   const [dialogContent, setDialogContent] = useState<DialogContent>(null);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const profile = useStore(profileStore);
+  const [selectionMode, setSelectionMode] = useState(false);
+  const [selectedItems, setSelectedItems] = useState<string[]>([]);
 
   const { filteredItems: filteredList, handleSearchChange } = useSearchFilter({
     items: list,
@@ -83,35 +88,195 @@ export const Menu = () => {
     }
   }, []);
 
-  const deleteItem = useCallback((event: React.UIEvent, item: ChatHistoryItem) => {
-    event.preventDefault();
+  const deleteChat = useCallback(
+    async (id: string): Promise<void> => {
+      if (!db) {
+        throw new Error('Database not available');
+      }
 
-    if (db) {
-      deleteById(db, item.id)
+      // Delete chat snapshot from localStorage
+      try {
+        const snapshotKey = `snapshot:${id}`;
+        localStorage.removeItem(snapshotKey);
+        console.log('Removed snapshot for chat:', id);
+      } catch (snapshotError) {
+        console.error(`Error deleting snapshot for chat ${id}:`, snapshotError);
+      }
+
+      // Delete the chat from the database
+      await deleteById(db, id);
+      console.log('Successfully deleted chat:', id);
+    },
+    [db],
+  );
+
+  const deleteItem = useCallback(
+    (event: React.UIEvent, item: ChatHistoryItem) => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      // Log the delete operation to help debugging
+      console.log('Attempting to delete chat:', { id: item.id, description: item.description });
+
+      deleteChat(item.id)
         .then(() => {
+          toast.success('Chat deleted successfully', {
+            position: 'bottom-right',
+            autoClose: 3000,
+          });
+
+          // Always refresh the list
           loadEntries();
 
           if (chatId.get() === item.id) {
             // hard page navigation to clear the stores
+            console.log('Navigating away from deleted chat');
             window.location.pathname = '/';
           }
         })
         .catch((error) => {
-          toast.error('Failed to delete conversation');
-          logger.error(error);
+          console.error('Failed to delete chat:', error);
+          toast.error('Failed to delete conversation', {
+            position: 'bottom-right',
+            autoClose: 3000,
+          });
+
+          // Still try to reload entries in case data has changed
+          loadEntries();
         });
-    }
-  }, []);
+    },
+    [loadEntries, deleteChat],
+  );
+
+  const deleteSelectedItems = useCallback(
+    async (itemsToDeleteIds: string[]) => {
+      if (!db || itemsToDeleteIds.length === 0) {
+        console.log('Bulk delete skipped: No DB or no items to delete.');
+        return;
+      }
+
+      console.log(`Starting bulk delete for ${itemsToDeleteIds.length} chats`, itemsToDeleteIds);
+
+      let deletedCount = 0;
+      const errors: string[] = [];
+      const currentChatId = chatId.get();
+      let shouldNavigate = false;
+
+      // Process deletions sequentially using the shared deleteChat logic
+      for (const id of itemsToDeleteIds) {
+        try {
+          await deleteChat(id);
+          deletedCount++;
+
+          if (id === currentChatId) {
+            shouldNavigate = true;
+          }
+        } catch (error) {
+          console.error(`Error deleting chat ${id}:`, error);
+          errors.push(id);
+        }
+      }
+
+      // Show appropriate toast message
+      if (errors.length === 0) {
+        toast.success(`${deletedCount} chat${deletedCount === 1 ? '' : 's'} deleted successfully`);
+      } else {
+        toast.warning(`Deleted ${deletedCount} of ${itemsToDeleteIds.length} chats. ${errors.length} failed.`, {
+          autoClose: 5000,
+        });
+      }
+
+      // Reload the list after all deletions
+      await loadEntries();
+
+      // Clear selection state
+      setSelectedItems([]);
+      setSelectionMode(false);
+
+      // Navigate if needed
+      if (shouldNavigate) {
+        console.log('Navigating away from deleted chat');
+        window.location.pathname = '/';
+      }
+    },
+    [deleteChat, loadEntries, db],
+  );
 
   const closeDialog = () => {
     setDialogContent(null);
   };
 
+  const toggleSelectionMode = () => {
+    setSelectionMode(!selectionMode);
+
+    if (selectionMode) {
+      // If turning selection mode OFF, clear selection
+      setSelectedItems([]);
+    }
+  };
+
+  const toggleItemSelection = useCallback((id: string) => {
+    setSelectedItems((prev) => {
+      const newSelectedItems = prev.includes(id) ? prev.filter((itemId) => itemId !== id) : [...prev, id];
+      console.log('Selected items updated:', newSelectedItems);
+
+      return newSelectedItems; // Return the new array
+    });
+  }, []); // No dependencies needed
+
+  const handleBulkDeleteClick = useCallback(() => {
+    if (selectedItems.length === 0) {
+      toast.info('Select at least one chat to delete');
+      return;
+    }
+
+    const selectedChats = list.filter((item) => selectedItems.includes(item.id));
+
+    if (selectedChats.length === 0) {
+      toast.error('Could not find selected chats');
+      return;
+    }
+
+    setDialogContent({ type: 'bulkDelete', items: selectedChats });
+  }, [selectedItems, list]); // Keep list dependency
+
+  const selectAll = useCallback(() => {
+    const allFilteredIds = filteredList.map((item) => item.id);
+    setSelectedItems((prev) => {
+      const allFilteredAreSelected = allFilteredIds.length > 0 && allFilteredIds.every((id) => prev.includes(id));
+
+      if (allFilteredAreSelected) {
+        // Deselect only the filtered items
+        const newSelectedItems = prev.filter((id) => !allFilteredIds.includes(id));
+        console.log('Deselecting all filtered items. New selection:', newSelectedItems);
+
+        return newSelectedItems;
+      } else {
+        // Select all filtered items, adding them to any existing selections
+        const newSelectedItems = [...new Set([...prev, ...allFilteredIds])];
+        console.log('Selecting all filtered items. New selection:', newSelectedItems);
+
+        return newSelectedItems;
+      }
+    });
+  }, [filteredList]); // Depends only on filteredList
+
   useEffect(() => {
     if (open) {
       loadEntries();
     }
-  }, [open]);
+  }, [open, loadEntries]);
+
+  // Exit selection mode when sidebar is closed
+  useEffect(() => {
+    if (!open && selectionMode) {
+      /*
+       * Don't clear selection state anymore when sidebar closes
+       * This allows the selection to persist when reopening the sidebar
+       */
+      console.log('Sidebar closed, preserving selection state');
+    }
+  }, [open, selectionMode]);
 
   useEffect(() => {
     const enterThreshold = 40;
@@ -138,11 +303,6 @@ export const Menu = () => {
     };
   }, [isSettingsOpen]);
 
-  const handleDeleteClick = (event: React.UIEvent, item: ChatHistoryItem) => {
-    event.preventDefault();
-    setDialogContent({ type: 'delete', item });
-  };
-
   const handleDuplicate = async (id: string) => {
     await duplicateCurrentChat(id);
     loadEntries(); // Reload the list after duplication
@@ -157,6 +317,11 @@ export const Menu = () => {
     setIsSettingsOpen(false);
   };
 
+  const setDialogContentWithLogging = useCallback((content: DialogContent) => {
+    console.log('Setting dialog content:', content);
+    setDialogContent(content);
+  }, []);
+
   return (
     <>
       <motion.div
@@ -196,16 +361,30 @@ export const Menu = () => {
         <CurrentDateTime />
         <div className="flex-1 flex flex-col h-full w-full overflow-hidden">
           <div className="p-4 space-y-3">
-            <a
-              href="/"
-              className="flex gap-2 items-center bg-purple-50 dark:bg-purple-500/10 text-purple-700 dark:text-purple-300 hover:bg-purple-100 dark:hover:bg-purple-500/20 rounded-lg px-4 py-2 transition-colors"
-            >
-              <span className="inline-block i-lucide:message-square h-4 w-4" />
-              <span className="text-sm font-medium">Start new chat</span>
-            </a>
+            <div className="flex gap-2">
+              <a
+                href="/"
+                className="flex-1 flex gap-2 items-center bg-purple-50 dark:bg-purple-500/10 text-purple-700 dark:text-purple-300 hover:bg-purple-100 dark:hover:bg-purple-500/20 rounded-lg px-4 py-2 transition-colors"
+              >
+                <span className="inline-block i-ph:plus-circle h-4 w-4" />
+                <span className="text-sm font-medium">Start new chat</span>
+              </a>
+              <button
+                onClick={toggleSelectionMode}
+                className={classNames(
+                  'flex gap-1 items-center rounded-lg px-3 py-2 transition-colors',
+                  selectionMode
+                    ? 'bg-purple-600 dark:bg-purple-500 text-white border border-purple-700 dark:border-purple-600'
+                    : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700',
+                )}
+                aria-label={selectionMode ? 'Exit selection mode' : 'Enter selection mode'}
+              >
+                <span className={selectionMode ? 'i-ph:x h-4 w-4' : 'i-ph:check-square h-4 w-4'} />
+              </button>
+            </div>
             <div className="relative w-full">
               <div className="absolute left-3 top-1/2 -translate-y-1/2">
-                <span className="i-lucide:search h-4 w-4 text-gray-400 dark:text-gray-500" />
+                <span className="i-ph:magnifying-glass h-4 w-4 text-gray-400 dark:text-gray-500" />
               </div>
               <input
                 className="w-full bg-gray-50 dark:bg-gray-900 relative pl-9 pr-3 py-2 rounded-lg focus:outline-none focus:ring-1 focus:ring-purple-500/50 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-500 border border-gray-200 dark:border-gray-800"
@@ -216,7 +395,24 @@ export const Menu = () => {
               />
             </div>
           </div>
-          <div className="text-gray-600 dark:text-gray-400 text-sm font-medium px-4 py-2">Your Chats</div>
+          <div className="flex items-center justify-between text-sm px-4 py-2">
+            <div className="font-medium text-gray-600 dark:text-gray-400">Your Chats</div>
+            {selectionMode && (
+              <div className="flex items-center gap-2">
+                <Button variant="ghost" size="sm" onClick={selectAll}>
+                  {selectedItems.length === filteredList.length ? 'Deselect all' : 'Select all'}
+                </Button>
+                <Button
+                  variant="destructive"
+                  size="sm"
+                  onClick={handleBulkDeleteClick}
+                  disabled={selectedItems.length === 0}
+                >
+                  Delete selected
+                </Button>
+              </div>
+            )}
+          </div>
           <div className="flex-1 overflow-auto px-3 pb-3">
             {filteredList.length === 0 && (
               <div className="px-4 text-gray-500 dark:text-gray-400 text-sm">
@@ -235,8 +431,16 @@ export const Menu = () => {
                         key={item.id}
                         item={item}
                         exportChat={exportChat}
-                        onDelete={(event) => handleDeleteClick(event, item)}
+                        onDelete={(event) => {
+                          event.preventDefault();
+                          event.stopPropagation();
+                          console.log('Delete triggered for item:', item);
+                          setDialogContentWithLogging({ type: 'delete', item });
+                        }}
                         onDuplicate={() => handleDuplicate(item.id)}
+                        selectionMode={selectionMode}
+                        isSelected={selectedItems.includes(item.id)}
+                        onToggleSelection={toggleItemSelection}
                       />
                     ))}
                   </div>
@@ -264,6 +468,7 @@ export const Menu = () => {
                       <DialogButton
                         type="danger"
                         onClick={(event) => {
+                          console.log('Dialog delete button clicked for item:', dialogContent.item);
                           deleteItem(event, dialogContent.item);
                           closeDialog();
                         }}
@@ -273,6 +478,49 @@ export const Menu = () => {
                     </div>
                   </>
                 )}
+                {dialogContent?.type === 'bulkDelete' && (
+                  <>
+                    <div className="p-6 bg-white dark:bg-gray-950">
+                      <DialogTitle className="text-gray-900 dark:text-white">Delete Selected Chats?</DialogTitle>
+                      <DialogDescription className="mt-2 text-gray-600 dark:text-gray-400">
+                        <p>
+                          You are about to delete {dialogContent.items.length}{' '}
+                          {dialogContent.items.length === 1 ? 'chat' : 'chats'}:
+                        </p>
+                        <div className="mt-2 max-h-32 overflow-auto border border-gray-100 dark:border-gray-800 rounded-md bg-gray-50 dark:bg-gray-900 p-2">
+                          <ul className="list-disc pl-5 space-y-1">
+                            {dialogContent.items.map((item) => (
+                              <li key={item.id} className="text-sm">
+                                <span className="font-medium text-gray-900 dark:text-white">{item.description}</span>
+                              </li>
+                            ))}
+                          </ul>
+                        </div>
+                        <p className="mt-3">Are you sure you want to delete these chats?</p>
+                      </DialogDescription>
+                    </div>
+                    <div className="flex justify-end gap-3 px-6 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800">
+                      <DialogButton type="secondary" onClick={closeDialog}>
+                        Cancel
+                      </DialogButton>
+                      <DialogButton
+                        type="danger"
+                        onClick={() => {
+                          /*
+                           * Pass the current selectedItems to the delete function.
+                           * This captures the state at the moment the user confirms.
+                           */
+                          const itemsToDeleteNow = [...selectedItems];
+                          console.log('Bulk delete confirmed for', itemsToDeleteNow.length, 'items', itemsToDeleteNow);
+                          deleteSelectedItems(itemsToDeleteNow);
+                          closeDialog();
+                        }}
+                      >
+                        Delete
+                      </DialogButton>
+                    </div>
+                  </>
+                )}
               </Dialog>
             </DialogRoot>
           </div>

app/components/ui/Badge.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { classNames } from '~/utils/classNames';
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-bolt-elements-ring focus:ring-offset-2',
+  'inline-flex items-center gap-1 transition-colors focus:outline-none focus:ring-2 focus:ring-bolt-elements-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
@@ -15,18 +15,39 @@ const badgeVariants = cva(
           'border-transparent bg-bolt-elements-background text-bolt-elements-textSecondary hover:bg-bolt-elements-background/80',
         destructive: 'border-transparent bg-red-500/10 text-red-500 hover:bg-red-500/20',
         outline: 'text-bolt-elements-textPrimary',
+        primary: 'bg-purple-500/10 text-purple-600 dark:text-purple-400',
+        success: 'bg-green-500/10 text-green-600 dark:text-green-400',
+        warning: 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400',
+        danger: 'bg-red-500/10 text-red-600 dark:text-red-400',
+        info: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',
+        subtle:
+          'border border-bolt-elements-borderColor/30 dark:border-bolt-elements-borderColor-dark/30 bg-white/50 dark:bg-bolt-elements-background-depth-4/50 backdrop-blur-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark',
+      },
+      size: {
+        default: 'rounded-full px-2.5 py-0.5 text-xs font-semibold',
+        sm: 'rounded-full px-1.5 py-0.5 text-xs',
+        md: 'rounded-md px-2 py-1 text-xs font-medium',
+        lg: 'rounded-md px-2.5 py-1.5 text-sm',
       },
     },
     defaultVariants: {
       variant: 'default',
+      size: 'default',
     },
   },
 );
 
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+  icon?: string;
+}
 
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={classNames(badgeVariants({ variant }), className)} {...props} />;
+function Badge({ className, variant, size, icon, children, ...props }: BadgeProps) {
+  return (
+    <div className={classNames(badgeVariants({ variant, size }), className)} {...props}>
+      {icon && <span className={icon} />}
+      {children}
+    </div>
+  );
 }
 
 export { Badge, badgeVariants };

app/components/ui/Breadcrumbs.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { classNames } from '~/utils/classNames';
+import { motion } from 'framer-motion';
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+  icon?: string;
+  onClick?: () => void;
+}
+
+interface BreadcrumbsProps {
+  items: BreadcrumbItem[];
+  className?: string;
+  separator?: string;
+  maxItems?: number;
+  renderItem?: (item: BreadcrumbItem, index: number, isLast: boolean) => React.ReactNode;
+}
+
+export function Breadcrumbs({
+  items,
+  className,
+  separator = 'i-ph:caret-right',
+  maxItems = 0,
+  renderItem,
+}: BreadcrumbsProps) {
+  const displayItems =
+    maxItems > 0 && items.length > maxItems
+      ? [
+          ...items.slice(0, 1),
+          { label: '...', onClick: undefined, href: undefined },
+          ...items.slice(-Math.max(1, maxItems - 2)),
+        ]
+      : items;
+
+  const defaultRenderItem = (item: BreadcrumbItem, index: number, isLast: boolean) => {
+    const content = (
+      <div className="flex items-center gap-1.5">
+        {item.icon && <span className={classNames(item.icon, 'w-3.5 h-3.5')} />}
+        <span
+          className={classNames(
+            isLast
+              ? 'font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark'
+              : 'text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark hover:text-bolt-elements-textPrimary dark:hover:text-bolt-elements-textPrimary-dark',
+            item.onClick || item.href ? 'cursor-pointer' : '',
+          )}
+        >
+          {item.label}
+        </span>
+      </div>
+    );
+
+    if (item.href && !isLast) {
+      return (
+        <motion.a href={item.href} className="hover:underline" whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
+          {content}
+        </motion.a>
+      );
+    }
+
+    if (item.onClick && !isLast) {
+      return (
+        <motion.button
+          type="button"
+          onClick={item.onClick}
+          className="hover:underline"
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+        >
+          {content}
+        </motion.button>
+      );
+    }
+
+    return content;
+  };
+
+  return (
+    <nav className={classNames('flex items-center', className)} aria-label="Breadcrumbs">
+      <ol className="flex items-center gap-1.5">
+        {displayItems.map((item, index) => {
+          const isLast = index === displayItems.length - 1;
+
+          return (
+            <li key={index} className="flex items-center">
+              {renderItem ? renderItem(item, index, isLast) : defaultRenderItem(item, index, isLast)}
+              {!isLast && (
+                <span
+                  className={classNames(
+                    separator,
+                    'w-3 h-3 mx-1 text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark',
+                  )}
+                />
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

app/components/ui/Button.tsx

@@ -10,7 +10,7 @@ const buttonVariants = cva(
         default: 'bg-bolt-elements-background text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-2',
         destructive: 'bg-red-500 text-white hover:bg-red-600',
         outline:
-          'border border-input bg-transparent hover:bg-bolt-elements-background-depth-2 hover:text-bolt-elements-textPrimary',
+          'border border-bolt-elements-borderColor bg-transparent hover:bg-bolt-elements-background-depth-2 hover:text-bolt-elements-textPrimary text-bolt-elements-textPrimary dark:border-bolt-elements-borderColorActive',
         secondary:
           'bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-2',
         ghost: 'hover:bg-bolt-elements-background-depth-1 hover:text-bolt-elements-textPrimary',

app/components/ui/Checkbox.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+import { classNames } from '~/utils/classNames';
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={classNames(
+      'peer h-4 w-4 shrink-0 rounded-sm border transition-colors',
+      'bg-transparent dark:bg-transparent',
+      'border-gray-400 dark:border-gray-600',
+      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:ring-purple-500 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-950',
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      'data-[state=checked]:bg-purple-500 dark:data-[state=checked]:bg-purple-500',
+      'data-[state=checked]:border-purple-500 dark:data-[state=checked]:border-purple-500',
+      'data-[state=checked]:text-white',
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+      <Check className="h-3 w-3" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };

app/components/ui/CloseButton.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+
+interface CloseButtonProps {
+  onClick?: () => void;
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+/**
+ * CloseButton component
+ *
+ * A button with an X icon used for closing dialogs, modals, etc.
+ * The button has a transparent background and only shows a background on hover.
+ */
+export function CloseButton({ onClick, className, size = 'md' }: CloseButtonProps) {
+  const sizeClasses = {
+    sm: 'p-1',
+    md: 'p-2',
+    lg: 'p-3',
+  };
+
+  const iconSizeClasses = {
+    sm: 'w-3 h-3',
+    md: 'w-4 h-4',
+    lg: 'w-5 h-5',
+  };
+
+  return (
+    <motion.button
+      type="button"
+      onClick={onClick}
+      className={classNames(
+        'text-bolt-elements-textTertiary hover:text-bolt-elements-textSecondary dark:text-bolt-elements-textTertiary-dark dark:hover:text-bolt-elements-textSecondary-dark',
+        'rounded-lg hover:bg-bolt-elements-background-depth-2 dark:hover:bg-bolt-elements-background-depth-3',
+        'transition-colors duration-200',
+        'focus:outline-none focus:ring-2 focus:ring-purple-500/50',
+        sizeClasses[size],
+        className,
+      )}
+      whileHover={{ scale: 1.05 }}
+      whileTap={{ scale: 0.95 }}
+      aria-label="Close"
+    >
+      <div className={classNames('i-ph:x', iconSizeClasses[size])} />
+    </motion.button>
+  );
+}

app/components/ui/CodeBlock.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import { classNames } from '~/utils/classNames';
+import { motion } from 'framer-motion';
+import { FileIcon } from './FileIcon';
+import { Tooltip } from './Tooltip';
+
+interface CodeBlockProps {
+  code: string;
+  language?: string;
+  filename?: string;
+  showLineNumbers?: boolean;
+  highlightLines?: number[];
+  maxHeight?: string;
+  className?: string;
+  onCopy?: () => void;
+}
+
+export function CodeBlock({
+  code,
+  language,
+  filename,
+  showLineNumbers = true,
+  highlightLines = [],
+  maxHeight = '400px',
+  className,
+  onCopy,
+}: CodeBlockProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+    onCopy?.();
+  };
+
+  const lines = code.split('\n');
+
+  return (
+    <div
+      className={classNames(
+        'rounded-lg overflow-hidden border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark',
+        'bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3',
+        className,
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-2 bg-bolt-elements-background-depth-3 dark:bg-bolt-elements-background-depth-4 border-b border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark">
+        <div className="flex items-center gap-2">
+          {filename && (
+            <>
+              <FileIcon filename={filename} size="sm" />
+              <span className="text-xs font-medium text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark">
+                {filename}
+              </span>
+            </>
+          )}
+          {language && !filename && (
+            <span className="text-xs font-medium text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark uppercase">
+              {language}
+            </span>
+          )}
+        </div>
+        <Tooltip content={copied ? 'Copied!' : 'Copy code'}>
+          <motion.button
+            onClick={handleCopy}
+            className="p-1.5 rounded-md text-bolt-elements-textTertiary hover:text-bolt-elements-textSecondary dark:text-bolt-elements-textTertiary-dark dark:hover:text-bolt-elements-textSecondary-dark hover:bg-bolt-elements-background-depth-2 dark:hover:bg-bolt-elements-background-depth-3 transition-colors"
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            {copied ? <span className="i-ph:check w-4 h-4 text-green-500" /> : <span className="i-ph:copy w-4 h-4" />}
+          </motion.button>
+        </Tooltip>
+      </div>
+
+      {/* Code content */}
+      <div className={classNames('overflow-auto', 'font-mono text-sm', 'custom-scrollbar')} style={{ maxHeight }}>
+        <table className="min-w-full border-collapse">
+          <tbody>
+            {lines.map((line, index) => (
+              <tr
+                key={index}
+                className={classNames(
+                  highlightLines.includes(index + 1) ? 'bg-purple-500/10 dark:bg-purple-500/20' : '',
+                  'hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4',
+                )}
+              >
+                {showLineNumbers && (
+                  <td className="py-1 pl-4 pr-2 text-right select-none text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark border-r border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark">
+                    <span className="inline-block min-w-[1.5rem] text-xs">{index + 1}</span>
+                  </td>
+                )}
+                <td className="py-1 pl-4 pr-4 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark whitespace-pre">
+                  {line || ' '}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

app/components/ui/Dialog.tsx

@@ -1,9 +1,13 @@
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { motion, type Variants } from 'framer-motion';
-import React, { memo, type ReactNode } from 'react';
+import React, { memo, type ReactNode, useState, useEffect } from 'react';
 import { classNames } from '~/utils/classNames';
 import { cubicEasingFn } from '~/utils/easings';
 import { IconButton } from './IconButton';
+import { Button } from './Button';
+import { FixedSizeList } from 'react-window';
+import { Checkbox } from './Checkbox';
+import { Label } from './Label';
 
 export { Close as DialogClose, Root as DialogRoot } from '@radix-ui/react-dialog';
 
@@ -17,12 +21,14 @@ interface DialogButtonProps {
 export const DialogButton = memo(({ type, children, onClick, disabled }: DialogButtonProps) => {
   return (
     <button
-      className={classNames('inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm transition-colors', {
-        'bg-purple-500 text-white hover:bg-purple-600 dark:bg-purple-500 dark:hover:bg-purple-600': type === 'primary',
-        'bg-transparent text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100':
-          type === 'secondary',
-        'bg-transparent text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10': type === 'danger',
-      })}
+      className={classNames(
+        'inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm transition-colors',
+        type === 'primary'
+          ? 'bg-purple-500 text-white hover:bg-purple-600 dark:bg-purple-500 dark:hover:bg-purple-600'
+          : type === 'secondary'
+            ? 'bg-transparent text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100'
+            : 'bg-transparent text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10',
+      )}
       onClick={onClick}
       disabled={disabled}
     >
@@ -34,7 +40,7 @@ export const DialogButton = memo(({ type, children, onClick, disabled }: DialogB
 export const DialogTitle = memo(({ className, children, ...props }: RadixDialog.DialogTitleProps) => {
   return (
     <RadixDialog.Title
-      className={classNames('text-lg font-medium text-bolt-elements-textPrimary', 'flex items-center gap-2', className)}
+      className={classNames('text-lg font-medium text-bolt-elements-textPrimary flex items-center gap-2', className)}
       {...props}
     >
       {children}
@@ -45,7 +51,7 @@ export const DialogTitle = memo(({ className, children, ...props }: RadixDialog.
 export const DialogDescription = memo(({ className, children, ...props }: RadixDialog.DialogDescriptionProps) => {
   return (
     <RadixDialog.Description
-      className={classNames('text-sm text-bolt-elements-textSecondary', 'mt-1', className)}
+      className={classNames('text-sm text-bolt-elements-textSecondary mt-1', className)}
       {...props}
     >
       {children}
@@ -99,11 +105,7 @@ export const Dialog = memo(({ children, className, showCloseButton = true, onClo
     <RadixDialog.Portal>
       <RadixDialog.Overlay asChild>
         <motion.div
-          className={classNames(
-            'fixed inset-0 z-[9999]',
-            'bg-[#FAFAFA]/80 dark:bg-[#0A0A0A]/80',
-            'backdrop-blur-[2px]',
-          )}
+          className={classNames('fixed inset-0 z-[9999] bg-black/70 dark:bg-black/80 backdrop-blur-sm')}
           initial="closed"
           animate="open"
           exit="closed"
@@ -114,11 +116,7 @@ export const Dialog = memo(({ children, className, showCloseButton = true, onClo
       <RadixDialog.Content asChild>
         <motion.div
           className={classNames(
-            'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
-            'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
-            'rounded-lg shadow-lg',
-            'border border-[#E5E5E5] dark:border-[#1A1A1A]',
-            'z-[9999] w-[520px]',
+            'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-950 rounded-lg shadow-xl border border-bolt-elements-borderColor z-[9999] w-[520px] focus:outline-none',
             className,
           )}
           initial="closed"
@@ -132,7 +130,7 @@ export const Dialog = memo(({ children, className, showCloseButton = true, onClo
               <RadixDialog.Close asChild onClick={onClose}>
                 <IconButton
                   icon="i-ph:x"
-                  className="absolute top-3 right-3 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary"
+                  className="absolute top-3 right-3 text-bolt-elements-textTertiary hover:text-bolt-elements-textSecondary"
                 />
               </RadixDialog.Close>
             )}
@@ -142,3 +140,310 @@ export const Dialog = memo(({ children, className, showCloseButton = true, onClo
     </RadixDialog.Portal>
   );
 });
+
+/**
+ * Props for the ConfirmationDialog component
+ */
+export interface ConfirmationDialogProps {
+  /**
+   * Whether the dialog is open
+   */
+  isOpen: boolean;
+
+  /**
+   * Callback when the dialog is closed
+   */
+  onClose: () => void;
+
+  /**
+   * Callback when the confirm button is clicked
+   */
+  onConfirm: () => void;
+
+  /**
+   * The title of the dialog
+   */
+  title: string;
+
+  /**
+   * The description of the dialog
+   */
+  description: string;
+
+  /**
+   * The text for the confirm button
+   */
+  confirmLabel?: string;
+
+  /**
+   * The text for the cancel button
+   */
+  cancelLabel?: string;
+
+  /**
+   * The variant of the confirm button
+   */
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+
+  /**
+   * Whether the confirm button is in a loading state
+   */
+  isLoading?: boolean;
+}
+
+/**
+ * A reusable confirmation dialog component that uses the Dialog component
+ */
+export function ConfirmationDialog({
+  isOpen,
+  onClose,
+  title,
+  description,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  variant = 'default',
+  isLoading = false,
+  onConfirm,
+}: ConfirmationDialogProps) {
+  return (
+    <RadixDialog.Root open={isOpen} onOpenChange={onClose}>
+      <Dialog showCloseButton={false}>
+        <div className="p-6 bg-white dark:bg-gray-950 relative z-10">
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription className="mb-4">{description}</DialogDescription>
+          <div className="flex justify-end space-x-2">
+            <Button variant="outline" onClick={onClose} disabled={isLoading}>
+              {cancelLabel}
+            </Button>
+            <Button
+              variant={variant}
+              onClick={onConfirm}
+              disabled={isLoading}
+              className={
+                variant === 'destructive'
+                  ? 'bg-red-500 text-white hover:bg-red-600'
+                  : 'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent hover:bg-bolt-elements-button-primary-backgroundHover'
+              }
+            >
+              {isLoading ? (
+                <>
+                  <div className="i-ph-spinner-gap-bold animate-spin w-4 h-4 mr-2" />
+                  {confirmLabel}
+                </>
+              ) : (
+                confirmLabel
+              )}
+            </Button>
+          </div>
+        </div>
+      </Dialog>
+    </RadixDialog.Root>
+  );
+}
+
+/**
+ * Type for selection item in SelectionDialog
+ */
+type SelectionItem = {
+  id: string;
+  label: string;
+  description?: string;
+};
+
+/**
+ * Props for the SelectionDialog component
+ */
+export interface SelectionDialogProps {
+  /**
+   * The title of the dialog
+   */
+  title: string;
+
+  /**
+   * The items to select from
+   */
+  items: SelectionItem[];
+
+  /**
+   * Whether the dialog is open
+   */
+  isOpen: boolean;
+
+  /**
+   * Callback when the dialog is closed
+   */
+  onClose: () => void;
+
+  /**
+   * Callback when the confirm button is clicked with selected item IDs
+   */
+  onConfirm: (selectedIds: string[]) => void;
+
+  /**
+   * The text for the confirm button
+   */
+  confirmLabel?: string;
+
+  /**
+   * The maximum height of the selection list
+   */
+  maxHeight?: string;
+}
+
+/**
+ * A reusable selection dialog component that uses the Dialog component
+ */
+export function SelectionDialog({
+  title,
+  items,
+  isOpen,
+  onClose,
+  onConfirm,
+  confirmLabel = 'Confirm',
+  maxHeight = '60vh',
+}: SelectionDialogProps) {
+  const [selectedItems, setSelectedItems] = useState<string[]>([]);
+  const [selectAll, setSelectAll] = useState(false);
+
+  // Reset selected items when dialog opens
+  useEffect(() => {
+    if (isOpen) {
+      setSelectedItems([]);
+      setSelectAll(false);
+    }
+  }, [isOpen]);
+
+  const handleToggleItem = (id: string) => {
+    setSelectedItems((prev) => (prev.includes(id) ? prev.filter((itemId) => itemId !== id) : [...prev, id]));
+  };
+
+  const handleSelectAll = () => {
+    if (selectedItems.length === items.length) {
+      setSelectedItems([]);
+      setSelectAll(false);
+    } else {
+      setSelectedItems(items.map((item) => item.id));
+      setSelectAll(true);
+    }
+  };
+
+  const handleConfirm = () => {
+    onConfirm(selectedItems);
+    onClose();
+  };
+
+  // Calculate the height for the virtualized list
+  const listHeight = Math.min(
+    items.length * 60,
+    parseInt(maxHeight.replace('vh', '')) * window.innerHeight * 0.01 - 40,
+  );
+
+  // Render each item in the virtualized list
+  const ItemRenderer = ({ index, style }: { index: number; style: React.CSSProperties }) => {
+    const item = items[index];
+    return (
+      <div
+        key={item.id}
+        className={classNames(
+          'flex items-start space-x-3 p-2 rounded-md transition-colors',
+          selectedItems.includes(item.id)
+            ? 'bg-bolt-elements-item-backgroundAccent'
+            : 'bg-bolt-elements-bg-depth-2 hover:bg-bolt-elements-item-backgroundActive',
+        )}
+        style={{
+          ...style,
+          width: '100%',
+          boxSizing: 'border-box',
+        }}
+      >
+        <Checkbox
+          id={`item-${item.id}`}
+          checked={selectedItems.includes(item.id)}
+          onCheckedChange={() => handleToggleItem(item.id)}
+        />
+        <div className="grid gap-1.5 leading-none">
+          <Label
+            htmlFor={`item-${item.id}`}
+            className={classNames(
+              'text-sm font-medium cursor-pointer',
+              selectedItems.includes(item.id)
+                ? 'text-bolt-elements-item-contentAccent'
+                : 'text-bolt-elements-textPrimary',
+            )}
+          >
+            {item.label}
+          </Label>
+          {item.description && <p className="text-xs text-bolt-elements-textSecondary">{item.description}</p>}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <RadixDialog.Root open={isOpen} onOpenChange={onClose}>
+      <Dialog showCloseButton={false}>
+        <div className="p-6 bg-white dark:bg-gray-950 relative z-10">
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription className="mt-2 mb-4">
+            Select the items you want to include and click{' '}
+            <span className="text-bolt-elements-item-contentAccent font-medium">{confirmLabel}</span>.
+          </DialogDescription>
+
+          <div className="py-4">
+            <div className="flex items-center justify-between mb-4">
+              <span className="text-sm font-medium text-bolt-elements-textSecondary">
+                {selectedItems.length} of {items.length} selected
+              </span>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleSelectAll}
+                className="text-xs h-8 px-2 text-bolt-elements-textPrimary hover:text-bolt-elements-item-contentAccent hover:bg-bolt-elements-item-backgroundAccent bg-bolt-elements-bg-depth-2 dark:bg-transparent"
+              >
+                {selectAll ? 'Deselect All' : 'Select All'}
+              </Button>
+            </div>
+
+            <div
+              className="pr-2 border rounded-md border-bolt-elements-borderColor bg-bolt-elements-bg-depth-2"
+              style={{
+                maxHeight,
+              }}
+            >
+              {items.length > 0 ? (
+                <FixedSizeList
+                  height={listHeight}
+                  width="100%"
+                  itemCount={items.length}
+                  itemSize={60}
+                  className="scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-bolt-elements-bg-depth-3"
+                >
+                  {ItemRenderer}
+                </FixedSizeList>
+              ) : (
+                <div className="text-center py-4 text-sm text-bolt-elements-textTertiary">No items to display</div>
+              )}
+            </div>
+          </div>
+
+          <div className="flex justify-between mt-6">
+            <Button
+              variant="outline"
+              onClick={onClose}
+              className="border-bolt-elements-borderColor text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleConfirm}
+              disabled={selectedItems.length === 0}
+              className="bg-accent-500 text-white hover:bg-accent-600 disabled:opacity-50 disabled:pointer-events-none"
+            >
+              {confirmLabel}
+            </Button>
+          </div>
+        </div>
+      </Dialog>
+    </RadixDialog.Root>
+  );
+}

app/components/ui/EmptyState.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { classNames } from '~/utils/classNames';
+import { Button } from './Button';
+import { motion } from 'framer-motion';
+
+// Variant-specific styles
+const VARIANT_STYLES = {
+  default: {
+    container: 'py-8 p-6',
+    icon: {
+      container: 'w-12 h-12 mb-3',
+      size: 'w-6 h-6',
+    },
+    title: 'text-base',
+    description: 'text-sm mt-1',
+    actions: 'mt-4',
+    buttonSize: 'default' as const,
+  },
+  compact: {
+    container: 'py-4 p-4',
+    icon: {
+      container: 'w-10 h-10 mb-2',
+      size: 'w-5 h-5',
+    },
+    title: 'text-sm',
+    description: 'text-xs mt-0.5',
+    actions: 'mt-3',
+    buttonSize: 'sm' as const,
+  },
+};
+
+interface EmptyStateProps {
+  /** Icon class name */
+  icon?: string;
+
+  /** Title text */
+  title: string;
+
+  /** Optional description text */
+  description?: string;
+
+  /** Primary action button label */
+  actionLabel?: string;
+
+  /** Primary action button callback */
+  onAction?: () => void;
+
+  /** Secondary action button label */
+  secondaryActionLabel?: string;
+
+  /** Secondary action button callback */
+  onSecondaryAction?: () => void;
+
+  /** Additional class name */
+  className?: string;
+
+  /** Component size variant */
+  variant?: 'default' | 'compact';
+}
+
+/**
+ * EmptyState component
+ *
+ * A component for displaying empty states with optional actions.
+ */
+export function EmptyState({
+  icon = 'i-ph:folder-simple-dashed',
+  title,
+  description,
+  actionLabel,
+  onAction,
+  secondaryActionLabel,
+  onSecondaryAction,
+  className,
+  variant = 'default',
+}: EmptyStateProps) {
+  // Get styles based on variant
+  const styles = VARIANT_STYLES[variant];
+
+  // Animation variants for buttons
+  const buttonAnimation = {
+    whileHover: { scale: 1.02 },
+    whileTap: { scale: 0.98 },
+  };
+
+  return (
+    <div
+      className={classNames(
+        'flex flex-col items-center justify-center',
+        'text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark',
+        'bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg',
+        styles.container,
+        className,
+      )}
+    >
+      {/* Icon */}
+      <div
+        className={classNames(
+          'rounded-full bg-bolt-elements-background-depth-3 dark:bg-bolt-elements-background-depth-4 flex items-center justify-center',
+          styles.icon.container,
+        )}
+      >
+        <span
+          className={classNames(
+            icon,
+            styles.icon.size,
+            'text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark',
+          )}
+        />
+      </div>
+
+      {/* Title */}
+      <p className={classNames('font-medium', styles.title)}>{title}</p>
+
+      {/* Description */}
+      {description && (
+        <p
+          className={classNames(
+            'text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark text-center max-w-xs',
+            styles.description,
+          )}
+        >
+          {description}
+        </p>
+      )}
+
+      {/* Action buttons */}
+      {(actionLabel || secondaryActionLabel) && (
+        <div className={classNames('flex items-center gap-2', styles.actions)}>
+          {actionLabel && onAction && (
+            <motion.div {...buttonAnimation}>
+              <Button
+                onClick={onAction}
+                variant="default"
+                size={styles.buttonSize}
+                className="bg-purple-500 hover:bg-purple-600 text-white"
+              >
+                {actionLabel}
+              </Button>
+            </motion.div>
+          )}
+
+          {secondaryActionLabel && onSecondaryAction && (
+            <motion.div {...buttonAnimation}>
+              <Button onClick={onSecondaryAction} variant="outline" size={styles.buttonSize}>
+                {secondaryActionLabel}
+              </Button>
+            </motion.div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

app/components/ui/FileIcon.tsx

@@ -0,0 +1,346 @@
+import React from 'react';
+import { classNames } from '~/utils/classNames';
+
+interface FileIconProps {
+  filename: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+export function FileIcon({ filename, size = 'md', className }: FileIconProps) {
+  const getFileExtension = (filename: string): string => {
+    return filename.split('.').pop()?.toLowerCase() || '';
+  };
+
+  const getIconForExtension = (extension: string): string => {
+    // Code files
+    if (['js', 'jsx', 'ts', 'tsx'].includes(extension)) {
+      return 'i-ph:file-js';
+    }
+
+    if (['html', 'htm', 'xhtml'].includes(extension)) {
+      return 'i-ph:file-html';
+    }
+
+    if (['css', 'scss', 'sass', 'less'].includes(extension)) {
+      return 'i-ph:file-css';
+    }
+
+    if (['json', 'jsonc'].includes(extension)) {
+      return 'i-ph:brackets-curly';
+    }
+
+    if (['md', 'markdown'].includes(extension)) {
+      return 'i-ph:file-text';
+    }
+
+    if (['py', 'pyc', 'pyd', 'pyo'].includes(extension)) {
+      return 'i-ph:file-py';
+    }
+
+    if (['java', 'class', 'jar'].includes(extension)) {
+      return 'i-ph:file-code';
+    }
+
+    if (['php'].includes(extension)) {
+      return 'i-ph:file-code';
+    }
+
+    if (['rb', 'ruby'].includes(extension)) {
+      return 'i-ph:file-rs';
+    }
+
+    if (['c', 'cpp', 'h', 'hpp', 'cc'].includes(extension)) {
+      return 'i-ph:file-cpp';
+    }
+
+    if (['go'].includes(extension)) {
+      return 'i-ph:file-rs';
+    }
+
+    if (['rs', 'rust'].includes(extension)) {
+      return 'i-ph:file-rs';
+    }
+
+    if (['swift'].includes(extension)) {
+      return 'i-ph:file-code';
+    }
+
+    if (['kt', 'kotlin'].includes(extension)) {
+      return 'i-ph:file-code';
+    }
+
+    if (['dart'].includes(extension)) {
+      return 'i-ph:file-code';
+    }
+
+    // Config files
+    if (['yml', 'yaml'].includes(extension)) {
+      return 'i-ph:file-cloud';
+    }
+
+    if (['xml', 'svg'].includes(extension)) {
+      return 'i-ph:file-code';
+    }
+
+    if (['toml'].includes(extension)) {
+      return 'i-ph:file-text';
+    }
+
+    if (['ini', 'conf', 'config'].includes(extension)) {
+      return 'i-ph:file-text';
+    }
+
+    if (['env', 'env.local', 'env.development', 'env.production'].includes(extension)) {
+      return 'i-ph:file-lock';
+    }
+
+    // Document files
+    if (['pdf'].includes(extension)) {
+      return 'i-ph:file-pdf';
+    }
+
+    if (['doc', 'docx'].includes(extension)) {
+      return 'i-ph:file-doc';
+    }
+
+    if (['xls', 'xlsx'].includes(extension)) {
+      return 'i-ph:file-xls';
+    }
+
+    if (['ppt', 'pptx'].includes(extension)) {
+      return 'i-ph:file-ppt';
+    }
+
+    if (['txt'].includes(extension)) {
+      return 'i-ph:file-text';
+    }
+
+    // Image files
+    if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'ico', 'tiff'].includes(extension)) {
+      return 'i-ph:file-image';
+    }
+
+    // Audio/Video files
+    if (['mp3', 'wav', 'ogg', 'flac', 'aac'].includes(extension)) {
+      return 'i-ph:file-audio';
+    }
+
+    if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', 'mkv'].includes(extension)) {
+      return 'i-ph:file-video';
+    }
+
+    // Archive files
+    if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2'].includes(extension)) {
+      return 'i-ph:file-zip';
+    }
+
+    // Special files
+    if (filename === 'package.json') {
+      return 'i-ph:package';
+    }
+
+    if (filename === 'tsconfig.json') {
+      return 'i-ph:file-ts';
+    }
+
+    if (filename === 'README.md') {
+      return 'i-ph:book-open';
+    }
+
+    if (filename === 'LICENSE') {
+      return 'i-ph:scales';
+    }
+
+    if (filename === '.gitignore') {
+      return 'i-ph:git-branch';
+    }
+
+    if (filename.startsWith('Dockerfile')) {
+      return 'i-ph:file-code';
+    }
+
+    // Default
+    return 'i-ph:file';
+  };
+
+  const getIconColorForExtension = (extension: string): string => {
+    // Code files
+    if (['js', 'jsx'].includes(extension)) {
+      return 'text-yellow-500';
+    }
+
+    if (['ts', 'tsx'].includes(extension)) {
+      return 'text-blue-500';
+    }
+
+    if (['html', 'htm', 'xhtml'].includes(extension)) {
+      return 'text-orange-500';
+    }
+
+    if (['css', 'scss', 'sass', 'less'].includes(extension)) {
+      return 'text-blue-400';
+    }
+
+    if (['json', 'jsonc'].includes(extension)) {
+      return 'text-yellow-400';
+    }
+
+    if (['md', 'markdown'].includes(extension)) {
+      return 'text-gray-500';
+    }
+
+    if (['py', 'pyc', 'pyd', 'pyo'].includes(extension)) {
+      return 'text-green-500';
+    }
+
+    if (['java', 'class', 'jar'].includes(extension)) {
+      return 'text-red-500';
+    }
+
+    if (['php'].includes(extension)) {
+      return 'text-purple-500';
+    }
+
+    if (['rb', 'ruby'].includes(extension)) {
+      return 'text-red-600';
+    }
+
+    if (['c', 'cpp', 'h', 'hpp', 'cc'].includes(extension)) {
+      return 'text-blue-600';
+    }
+
+    if (['go'].includes(extension)) {
+      return 'text-cyan-500';
+    }
+
+    if (['rs', 'rust'].includes(extension)) {
+      return 'text-orange-600';
+    }
+
+    if (['swift'].includes(extension)) {
+      return 'text-orange-500';
+    }
+
+    if (['kt', 'kotlin'].includes(extension)) {
+      return 'text-purple-400';
+    }
+
+    if (['dart'].includes(extension)) {
+      return 'text-cyan-400';
+    }
+
+    // Config files
+    if (['yml', 'yaml'].includes(extension)) {
+      return 'text-purple-300';
+    }
+
+    if (['xml'].includes(extension)) {
+      return 'text-orange-300';
+    }
+
+    if (['svg'].includes(extension)) {
+      return 'text-green-400';
+    }
+
+    if (['toml'].includes(extension)) {
+      return 'text-gray-500';
+    }
+
+    if (['ini', 'conf', 'config'].includes(extension)) {
+      return 'text-gray-500';
+    }
+
+    if (['env', 'env.local', 'env.development', 'env.production'].includes(extension)) {
+      return 'text-green-500';
+    }
+
+    // Document files
+    if (['pdf'].includes(extension)) {
+      return 'text-red-500';
+    }
+
+    if (['doc', 'docx'].includes(extension)) {
+      return 'text-blue-600';
+    }
+
+    if (['xls', 'xlsx'].includes(extension)) {
+      return 'text-green-600';
+    }
+
+    if (['ppt', 'pptx'].includes(extension)) {
+      return 'text-red-600';
+    }
+
+    if (['txt'].includes(extension)) {
+      return 'text-gray-500';
+    }
+
+    // Image files
+    if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'ico', 'tiff'].includes(extension)) {
+      return 'text-pink-500';
+    }
+
+    // Audio/Video files
+    if (['mp3', 'wav', 'ogg', 'flac', 'aac'].includes(extension)) {
+      return 'text-green-500';
+    }
+
+    if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', 'mkv'].includes(extension)) {
+      return 'text-blue-500';
+    }
+
+    // Archive files
+    if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2'].includes(extension)) {
+      return 'text-yellow-600';
+    }
+
+    // Special files
+    if (filename === 'package.json') {
+      return 'text-red-400';
+    }
+
+    if (filename === 'tsconfig.json') {
+      return 'text-blue-500';
+    }
+
+    if (filename === 'README.md') {
+      return 'text-blue-400';
+    }
+
+    if (filename === 'LICENSE') {
+      return 'text-gray-500';
+    }
+
+    if (filename === '.gitignore') {
+      return 'text-orange-500';
+    }
+
+    if (filename.startsWith('Dockerfile')) {
+      return 'text-blue-500';
+    }
+
+    // Default
+    return 'text-gray-400';
+  };
+
+  const getSizeClass = (size: 'sm' | 'md' | 'lg'): string => {
+    switch (size) {
+      case 'sm':
+        return 'w-4 h-4';
+      case 'md':
+        return 'w-5 h-5';
+      case 'lg':
+        return 'w-6 h-6';
+      default:
+        return 'w-5 h-5';
+    }
+  };
+
+  const extension = getFileExtension(filename);
+  const icon = getIconForExtension(extension);
+  const color = getIconColorForExtension(extension);
+  const sizeClass = getSizeClass(size);
+
+  return <span className={classNames(icon, color, sizeClass, className)} />;
+}

app/components/ui/FilterChip.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+
+interface FilterChipProps {
+  /** The label text to display */
+  label: string;
+
+  /** Optional value to display after the label */
+  value?: string | number;
+
+  /** Function to call when the remove button is clicked */
+  onRemove?: () => void;
+
+  /** Whether the chip is active/selected */
+  active?: boolean;
+
+  /** Optional icon to display before the label */
+  icon?: string;
+
+  /** Additional class name */
+  className?: string;
+}
+
+/**
+ * FilterChip component
+ *
+ * A chip component for displaying filters with optional remove button.
+ */
+export function FilterChip({ label, value, onRemove, active = false, icon, className }: FilterChipProps) {
+  // Animation variants
+  const variants = {
+    initial: { opacity: 0, scale: 0.9 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.9 },
+  };
+
+  return (
+    <motion.div
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      variants={variants}
+      transition={{ duration: 0.2 }}
+      className={classNames(
+        'inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium transition-all',
+        active
+          ? 'bg-purple-500/15 text-purple-600 dark:text-purple-400 border border-purple-500/30'
+          : 'bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark',
+        onRemove && 'pr-1',
+        className,
+      )}
+    >
+      {/* Icon */}
+      {icon && <span className={classNames(icon, 'text-inherit')} />}
+
+      {/* Label and value */}
+      <span>
+        {label}
+        {value !== undefined && ': '}
+        {value !== undefined && (
+          <span
+            className={
+              active
+                ? 'text-purple-700 dark:text-purple-300 font-semibold'
+                : 'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark'
+            }
+          >
+            {value}
+          </span>
+        )}
+      </span>
+
+      {/* Remove button */}
+      {onRemove && (
+        <button
+          type="button"
+          onClick={onRemove}
+          className={classNames(
+            'ml-1 p-0.5 rounded-full hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 transition-colors',
+            active
+              ? 'text-purple-600 dark:text-purple-400'
+              : 'text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark',
+          )}
+          aria-label={`Remove ${label} filter`}
+        >
+          <span className="i-ph:x w-3 h-3" />
+        </button>
+      )}
+    </motion.div>
+  );
+}

app/components/ui/GradientCard.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+
+// Predefined gradient colors
+const GRADIENT_COLORS = [
+  'from-purple-500/10 to-blue-500/5',
+  'from-blue-500/10 to-cyan-500/5',
+  'from-cyan-500/10 to-green-500/5',
+  'from-green-500/10 to-yellow-500/5',
+  'from-yellow-500/10 to-orange-500/5',
+  'from-orange-500/10 to-red-500/5',
+  'from-red-500/10 to-pink-500/5',
+  'from-pink-500/10 to-purple-500/5',
+];
+
+interface GradientCardProps {
+  /** Custom gradient class (overrides seed-based gradient) */
+  gradient?: string;
+
+  /** Seed string to determine gradient color */
+  seed?: string;
+
+  /** Whether to apply hover animation effect */
+  hoverEffect?: boolean;
+
+  /** Whether to apply border effect */
+  borderEffect?: boolean;
+
+  /** Card content */
+  children: React.ReactNode;
+
+  /** Additional class name */
+  className?: string;
+
+  /** Additional props */
+  [key: string]: any;
+}
+
+/**
+ * GradientCard component
+ *
+ * A card with a gradient background that can be determined by a seed string.
+ */
+export function GradientCard({
+  gradient,
+  seed,
+  hoverEffect = true,
+  borderEffect = true,
+  className,
+  children,
+  ...props
+}: GradientCardProps) {
+  // Get gradient color based on seed or use provided gradient
+  const gradientClass = gradient || getGradientColorFromSeed(seed);
+
+  // Animation variants for hover effect
+  const hoverAnimation = hoverEffect
+    ? {
+        whileHover: {
+          scale: 1.02,
+          y: -2,
+          transition: { type: 'spring', stiffness: 400, damping: 17 },
+        },
+        whileTap: { scale: 0.98 },
+      }
+    : undefined;
+
+  return (
+    <motion.div
+      className={classNames(
+        'p-5 rounded-xl bg-gradient-to-br',
+        gradientClass,
+        borderEffect
+          ? 'border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark hover:border-purple-500/40'
+          : '',
+        'transition-all duration-300 shadow-sm',
+        hoverEffect ? 'hover:shadow-md' : '',
+        className,
+      )}
+      {...hoverAnimation}
+      {...props}
+    >
+      {children}
+    </motion.div>
+  );
+}
+
+/**
+ * Calculate a gradient color based on the seed string for visual variety
+ */
+function getGradientColorFromSeed(seedString?: string): string {
+  if (!seedString) {
+    return GRADIENT_COLORS[0];
+  }
+
+  const index = seedString.length % GRADIENT_COLORS.length;
+
+  return GRADIENT_COLORS[index];
+}

app/components/ui/IconButton.tsx

@@ -46,7 +46,7 @@ export const IconButton = memo(
         <button
           ref={ref}
           className={classNames(
-            'flex items-center text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive rounded-md p-1 enabled:hover:bg-bolt-elements-item-backgroundActive disabled:cursor-not-allowed',
+            'flex items-center text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive rounded-md p-1 enabled:hover:bg-bolt-elements-item-backgroundActive disabled:cursor-not-allowed focus:outline-none',
             {
               [classNames('opacity-30', disabledClassName)]: disabled,
             },

app/components/ui/RepositoryStats.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Badge } from './Badge';
+import { classNames } from '~/utils/classNames';
+import { formatSize } from '~/utils/formatSize';
+
+interface RepositoryStatsProps {
+  stats: {
+    totalFiles?: number;
+    totalSize?: number;
+    languages?: Record<string, number>;
+    hasPackageJson?: boolean;
+    hasDependencies?: boolean;
+  };
+  className?: string;
+  compact?: boolean;
+}
+
+export function RepositoryStats({ stats, className, compact = false }: RepositoryStatsProps) {
+  const { totalFiles, totalSize, languages, hasPackageJson, hasDependencies } = stats;
+
+  return (
+    <div className={classNames('space-y-3', className)}>
+      {!compact && (
+        <p className="text-sm font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
+          Repository Statistics:
+        </p>
+      )}
+
+      <div className={classNames('grid gap-3', compact ? 'grid-cols-2' : 'grid-cols-2 md:grid-cols-3')}>
+        {totalFiles !== undefined && (
+          <div className="flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
+            <span className="i-ph:files text-purple-500 w-4 h-4" />
+            <span className={compact ? 'text-xs' : 'text-sm'}>Total Files: {totalFiles.toLocaleString()}</span>
+          </div>
+        )}
+
+        {totalSize !== undefined && (
+          <div className="flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark">
+            <span className="i-ph:database text-purple-500 w-4 h-4" />
+            <span className={compact ? 'text-xs' : 'text-sm'}>Total Size: {formatSize(totalSize)}</span>
+          </div>
+        )}
+      </div>
+
+      {languages && Object.keys(languages).length > 0 && (
+        <div className={compact ? 'pt-1' : 'pt-2'}>
+          <div className="flex items-center gap-2 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark mb-2">
+            <span className="i-ph:code text-purple-500 w-4 h-4" />
+            <span className={compact ? 'text-xs' : 'text-sm'}>Languages:</span>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {Object.entries(languages)
+              .sort(([, a], [, b]) => b - a)
+              .slice(0, compact ? 3 : 5)
+              .map(([lang, size]) => (
+                <Badge key={lang} variant="subtle" size={compact ? 'sm' : 'md'}>
+                  {lang} ({formatSize(size)})
+                </Badge>
+              ))}
+            {Object.keys(languages).length > (compact ? 3 : 5) && (
+              <Badge variant="subtle" size={compact ? 'sm' : 'md'}>
+                +{Object.keys(languages).length - (compact ? 3 : 5)} more
+              </Badge>
+            )}
+          </div>
+        </div>
+      )}
+
+      {(hasPackageJson || hasDependencies) && (
+        <div className={compact ? 'pt-1' : 'pt-2'}>
+          <div className="flex flex-wrap gap-2">
+            {hasPackageJson && (
+              <Badge variant="primary" size={compact ? 'sm' : 'md'} icon="i-ph:package w-3.5 h-3.5">
+                package.json
+              </Badge>
+            )}
+            {hasDependencies && (
+              <Badge variant="primary" size={compact ? 'sm' : 'md'} icon="i-ph:tree-structure w-3.5 h-3.5">
+                Dependencies
+              </Badge>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/components/ui/SearchInput.tsx

@@ -0,0 +1,80 @@
+import React, { forwardRef } from 'react';
+import { classNames } from '~/utils/classNames';
+import { Input } from './Input';
+import { motion, AnimatePresence } from 'framer-motion';
+
+interface SearchInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  /** Function to call when the clear button is clicked */
+  onClear?: () => void;
+
+  /** Whether to show the clear button when there is input */
+  showClearButton?: boolean;
+
+  /** Additional class name for the search icon */
+  iconClassName?: string;
+
+  /** Additional class name for the container */
+  containerClassName?: string;
+
+  /** Whether the search is loading */
+  loading?: boolean;
+}
+
+/**
+ * SearchInput component
+ *
+ * A search input field with a search icon and optional clear button.
+ */
+export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
+  (
+    { className, onClear, showClearButton = true, iconClassName, containerClassName, loading = false, ...props },
+    ref,
+  ) => {
+    const hasValue = Boolean(props.value);
+
+    return (
+      <div className={classNames('relative flex items-center w-full', containerClassName)}>
+        {/* Search icon or loading spinner */}
+        <div
+          className={classNames(
+            'absolute left-3 top-1/2 -translate-y-1/2 text-bolt-elements-textTertiary',
+            iconClassName,
+          )}
+        >
+          {loading ? (
+            <span className="i-ph:spinner-gap animate-spin w-4 h-4" />
+          ) : (
+            <span className="i-ph:magnifying-glass w-4 h-4" />
+          )}
+        </div>
+
+        {/* Input field */}
+        <Input
+          ref={ref}
+          className={classNames('pl-10', hasValue && showClearButton ? 'pr-10' : '', className)}
+          {...props}
+        />
+
+        {/* Clear button */}
+        <AnimatePresence>
+          {hasValue && showClearButton && (
+            <motion.button
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.8 }}
+              transition={{ duration: 0.15 }}
+              type="button"
+              onClick={onClear}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-bolt-elements-textTertiary hover:text-bolt-elements-textSecondary p-1 rounded-full hover:bg-bolt-elements-background-depth-2"
+              aria-label="Clear search"
+            >
+              <span className="i-ph:x w-3.5 h-3.5" />
+            </motion.button>
+          )}
+        </AnimatePresence>
+      </div>
+    );
+  },
+);
+
+SearchInput.displayName = 'SearchInput';

app/components/ui/SearchResultItem.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+import { Badge } from './Badge';
+
+interface SearchResultItemProps {
+  title: string;
+  subtitle?: string;
+  description?: string;
+  icon?: string;
+  iconBackground?: string;
+  iconColor?: string;
+  tags?: string[];
+  metadata?: Array<{
+    icon?: string;
+    label: string;
+    value?: string | number;
+  }>;
+  actionLabel?: string;
+  onAction?: () => void;
+  onClick?: () => void;
+  className?: string;
+}
+
+export function SearchResultItem({
+  title,
+  subtitle,
+  description,
+  icon,
+  iconBackground = 'bg-bolt-elements-background-depth-1/80 dark:bg-bolt-elements-background-depth-4/80',
+  iconColor = 'text-purple-500',
+  tags,
+  metadata,
+  actionLabel,
+  onAction,
+  onClick,
+  className,
+}: SearchResultItemProps) {
+  return (
+    <motion.div
+      className={classNames(
+        'p-5 rounded-xl border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark hover:border-purple-500/40 transition-all duration-300 shadow-sm hover:shadow-md bg-bolt-elements-background-depth-1/50 dark:bg-bolt-elements-background-depth-3/50',
+        onClick ? 'cursor-pointer' : '',
+        className,
+      )}
+      whileHover={{
+        scale: 1.01,
+        y: -1,
+        transition: { type: 'spring', stiffness: 400, damping: 17 },
+      }}
+      whileTap={{ scale: 0.99 }}
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+      onClick={onClick}
+    >
+      <div className="flex items-start justify-between mb-3 gap-3">
+        <div className="flex items-start gap-3">
+          {icon && (
+            <div
+              className={classNames(
+                'w-10 h-10 rounded-xl backdrop-blur-sm flex items-center justify-center shadow-sm',
+                iconBackground,
+              )}
+            >
+              <span className={classNames(icon, 'w-5 h-5', iconColor)} />
+            </div>
+          )}
+          <div>
+            <h3 className="font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark text-base">
+              {title}
+            </h3>
+            {subtitle && (
+              <p className="text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark flex items-center gap-1">
+                {subtitle}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {actionLabel && onAction && (
+          <motion.button
+            onClick={(e) => {
+              e.stopPropagation();
+              onAction();
+            }}
+            className="px-4 py-2 h-9 rounded-lg bg-purple-500 text-white hover:bg-purple-600 transition-all duration-200 flex items-center gap-2 min-w-[100px] justify-center text-sm shadow-sm hover:shadow-md"
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            {actionLabel}
+          </motion.button>
+        )}
+      </div>
+
+      {description && (
+        <div className="mb-4 bg-bolt-elements-background-depth-1/50 dark:bg-bolt-elements-background-depth-4/50 backdrop-blur-sm p-3 rounded-lg border border-bolt-elements-borderColor/30 dark:border-bolt-elements-borderColor-dark/30">
+          <p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark line-clamp-2">
+            {description}
+          </p>
+        </div>
+      )}
+
+      {tags && tags.length > 0 && (
+        <div className="flex flex-wrap items-center gap-2 mb-3">
+          {tags.map((tag) => (
+            <Badge key={tag} variant="subtle" size="sm">
+              {tag}
+            </Badge>
+          ))}
+        </div>
+      )}
+
+      {metadata && metadata.length > 0 && (
+        <div className="flex flex-wrap items-center gap-3 text-xs text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark">
+          {metadata.map((item, index) => (
+            <div key={index} className="flex items-center gap-1">
+              {item.icon && <span className={classNames(item.icon, 'w-3.5 h-3.5')} />}
+              <span>
+                {item.label}
+                {item.value !== undefined && ': '}
+                {item.value !== undefined && (
+                  <span className="text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark">
+                    {item.value}
+                  </span>
+                )}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+    </motion.div>
+  );
+}

app/components/ui/SettingsButton.tsx

@@ -11,6 +11,7 @@ export const SettingsButton = memo(({ onClick }: SettingsButtonProps) => {
       icon="i-ph:gear"
       size="xl"
       title="Settings"
+      data-testid="settings-button"
       className="text-[#666] hover:text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive/10 transition-colors"
     />
   );

app/components/ui/StatusIndicator.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { classNames } from '~/utils/classNames';
+
+// Status types supported by the component
+type StatusType = 'online' | 'offline' | 'away' | 'busy' | 'success' | 'warning' | 'error' | 'info' | 'loading';
+
+// Size types for the indicator
+type SizeType = 'sm' | 'md' | 'lg';
+
+// Status color mapping
+const STATUS_COLORS: Record<StatusType, string> = {
+  online: 'bg-green-500',
+  success: 'bg-green-500',
+  offline: 'bg-red-500',
+  error: 'bg-red-500',
+  away: 'bg-yellow-500',
+  warning: 'bg-yellow-500',
+  busy: 'bg-red-500',
+  info: 'bg-blue-500',
+  loading: 'bg-purple-500',
+};
+
+// Size class mapping
+const SIZE_CLASSES: Record<SizeType, string> = {
+  sm: 'w-2 h-2',
+  md: 'w-3 h-3',
+  lg: 'w-4 h-4',
+};
+
+// Text size mapping based on indicator size
+const TEXT_SIZE_CLASSES: Record<SizeType, string> = {
+  sm: 'text-xs',
+  md: 'text-sm',
+  lg: 'text-base',
+};
+
+interface StatusIndicatorProps {
+  /** The status to display */
+  status: StatusType;
+
+  /** Size of the indicator */
+  size?: SizeType;
+
+  /** Whether to show a pulsing animation */
+  pulse?: boolean;
+
+  /** Optional label text */
+  label?: string;
+
+  /** Additional class name */
+  className?: string;
+}
+
+/**
+ * StatusIndicator component
+ *
+ * A component for displaying status indicators with optional labels and pulse animations.
+ */
+export function StatusIndicator({ status, size = 'md', pulse = false, label, className }: StatusIndicatorProps) {
+  // Get the color class for the status
+  const colorClass = STATUS_COLORS[status] || 'bg-gray-500';
+
+  // Get the size class for the indicator
+  const sizeClass = SIZE_CLASSES[size];
+
+  // Get the text size class for the label
+  const textSizeClass = TEXT_SIZE_CLASSES[size];
+
+  return (
+    <div className={classNames('flex items-center gap-2', className)}>
+      {/* Status indicator dot */}
+      <span className={classNames('rounded-full relative', colorClass, sizeClass)}>
+        {/* Pulse animation */}
+        {pulse && <span className={classNames('absolute inset-0 rounded-full animate-ping opacity-75', colorClass)} />}
+      </span>
+
+      {/* Optional label */}
+      {label && (
+        <span
+          className={classNames(
+            'text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark',
+            textSizeClass,
+          )}
+        >
+          {label}
+        </span>
+      )}
+    </div>
+  );
+}

app/components/ui/Tabs.tsx

@@ -11,7 +11,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={classNames(
-      'inline-flex h-10 items-center justify-center rounded-md bg-bolt-elements-background p-1 text-bolt-elements-textSecondary',
+      'inline-flex h-10 items-center justify-center rounded-md bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-3-dark p-1 text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark',
       className,
     )}
     {...props}
@@ -26,7 +26,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={classNames(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-bolt-elements-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bolt-elements-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-bolt-elements-background data-[state=active]:text-bolt-elements-textPrimary data-[state=active]:shadow-sm',
+      'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-bolt-elements-background dark:ring-offset-bolt-elements-background-dark transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-bolt-elements-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-bolt-elements-background-depth-0 dark:data-[state=active]:bg-bolt-elements-background-depth-2-dark data-[state=active]:text-bolt-elements-textPrimary dark:data-[state=active]:text-bolt-elements-textPrimary-dark data-[state=active]:shadow-sm',
       className,
     )}
     {...props}

app/components/ui/TabsWithSlider.tsx

@@ -0,0 +1,112 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+
+interface Tab {
+  /** Unique identifier for the tab */
+  id: string;
+
+  /** Content to display in the tab */
+  label: React.ReactNode;
+
+  /** Optional icon to display before the label */
+  icon?: string;
+}
+
+interface TabsWithSliderProps {
+  /** Array of tab objects */
+  tabs: Tab[];
+
+  /** ID of the currently active tab */
+  activeTab: string;
+
+  /** Function called when a tab is clicked */
+  onChange: (tabId: string) => void;
+
+  /** Additional class name for the container */
+  className?: string;
+
+  /** Additional class name for inactive tabs */
+  tabClassName?: string;
+
+  /** Additional class name for the active tab */
+  activeTabClassName?: string;
+
+  /** Additional class name for the slider */
+  sliderClassName?: string;
+}
+
+/**
+ * TabsWithSlider component
+ *
+ * A tabs component with an animated slider that moves to the active tab.
+ */
+export function TabsWithSlider({
+  tabs,
+  activeTab,
+  onChange,
+  className,
+  tabClassName,
+  activeTabClassName,
+  sliderClassName,
+}: TabsWithSliderProps) {
+  // State for slider dimensions
+  const [sliderDimensions, setSliderDimensions] = useState({ width: 0, left: 0 });
+
+  // Refs for tab elements
+  const tabsRef = useRef<(HTMLButtonElement | null)[]>([]);
+
+  // Update slider position when active tab changes
+  useEffect(() => {
+    const activeIndex = tabs.findIndex((tab) => tab.id === activeTab);
+
+    if (activeIndex !== -1 && tabsRef.current[activeIndex]) {
+      const activeTabElement = tabsRef.current[activeIndex];
+
+      if (activeTabElement) {
+        setSliderDimensions({
+          width: activeTabElement.offsetWidth,
+          left: activeTabElement.offsetLeft,
+        });
+      }
+    }
+  }, [activeTab, tabs]);
+
+  return (
+    <div className={classNames('relative flex gap-2', className)}>
+      {/* Tab buttons */}
+      {tabs.map((tab, index) => (
+        <button
+          key={tab.id}
+          ref={(el) => (tabsRef.current[index] = el)}
+          onClick={() => onChange(tab.id)}
+          className={classNames(
+            'px-4 py-2 h-10 rounded-lg transition-all duration-200 flex items-center gap-2 min-w-[120px] justify-center relative overflow-hidden',
+            tab.id === activeTab
+              ? classNames('text-white shadow-sm shadow-purple-500/20', activeTabClassName)
+              : classNames(
+                  'bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark hover:bg-bolt-elements-background-depth-3 dark:hover:bg-bolt-elements-background-depth-4 border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor-dark',
+                  tabClassName,
+                ),
+          )}
+        >
+          <span className={classNames('flex items-center gap-2', tab.id === activeTab ? 'font-medium' : '')}>
+            {tab.icon && <span className={tab.icon} />}
+            {tab.label}
+          </span>
+        </button>
+      ))}
+
+      {/* Animated slider */}
+      <motion.div
+        className={classNames('absolute bottom-0 left-0 h-10 rounded-lg bg-purple-500 -z-10', sliderClassName)}
+        initial={false}
+        animate={{
+          width: sliderDimensions.width,
+          x: sliderDimensions.left,
+        }}
+        transition={{ type: 'spring', stiffness: 300, damping: 30 }}
+      />
+    </div>
+  );
+}

app/components/ui/Tooltip.tsx

@@ -1,7 +1,9 @@
-import * as Tooltip from '@radix-ui/react-tooltip';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { forwardRef, type ForwardedRef, type ReactElement } from 'react';
+import { classNames } from '~/utils/classNames';
 
-interface TooltipProps {
+// Original WithTooltip component
+interface WithTooltipProps {
   tooltip: React.ReactNode;
   children: ReactElement;
   sideOffset?: number;
@@ -25,55 +27,96 @@ const WithTooltip = forwardRef(
       position = 'top',
       maxWidth = 250,
       delay = 0,
-    }: TooltipProps,
+    }: WithTooltipProps,
     _ref: ForwardedRef<HTMLElement>,
   ) => {
     return (
-      <Tooltip.Root delayDuration={delay}>
-        <Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
-        <Tooltip.Portal>
-          <Tooltip.Content
-            side={position}
-            className={`
-              z-[2000]
-              px-2.5
-              py-1.5
-              max-h-[300px]
-              select-none
-              rounded-md
-              bg-bolt-elements-background-depth-3
-              text-bolt-elements-textPrimary
-              text-sm
-              leading-tight
-              shadow-lg
-              animate-in
-              fade-in-0
-              zoom-in-95
-              data-[state=closed]:animate-out
-              data-[state=closed]:fade-out-0
-              data-[state=closed]:zoom-out-95
-              ${className}
-            `}
-            sideOffset={sideOffset}
-            style={{
-              maxWidth,
-              ...tooltipStyle,
-            }}
-          >
-            <div className="break-words">{tooltip}</div>
-            <Tooltip.Arrow
+      <TooltipPrimitive.Provider>
+        <TooltipPrimitive.Root delayDuration={delay}>
+          <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+          <TooltipPrimitive.Portal>
+            <TooltipPrimitive.Content
+              side={position}
               className={`
-                fill-bolt-elements-background-depth-3
-                ${arrowClassName}
+                z-[2000]
+                px-2.5
+                py-1.5
+                max-h-[300px]
+                select-none
+                rounded-md
+                bg-bolt-elements-background-depth-3
+                text-bolt-elements-textPrimary
+                text-sm
+                leading-tight
+                shadow-lg
+                animate-in
+                fade-in-0
+                zoom-in-95
+                data-[state=closed]:animate-out
+                data-[state=closed]:fade-out-0
+                data-[state=closed]:zoom-out-95
+                ${className}
               `}
-              width={12}
-              height={6}
-            />
-          </Tooltip.Content>
-        </Tooltip.Portal>
-      </Tooltip.Root>
+              sideOffset={sideOffset}
+              style={{
+                maxWidth,
+                ...tooltipStyle,
+              }}
+            >
+              <div className="break-words">{tooltip}</div>
+              <TooltipPrimitive.Arrow
+                className={`
+                  fill-bolt-elements-background-depth-3
+                  ${arrowClassName}
+                `}
+                width={12}
+                height={6}
+              />
+            </TooltipPrimitive.Content>
+          </TooltipPrimitive.Portal>
+        </TooltipPrimitive.Root>
+      </TooltipPrimitive.Provider>
     );
   },
 );
 
+// New Tooltip component with simpler API
+interface TooltipProps {
+  content: React.ReactNode;
+  children: React.ReactNode;
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  align?: 'start' | 'center' | 'end';
+  delayDuration?: number;
+  className?: string;
+}
+
+export function Tooltip({
+  content,
+  children,
+  side = 'top',
+  align = 'center',
+  delayDuration = 300,
+  className,
+}: TooltipProps) {
+  return (
+    <TooltipPrimitive.Provider>
+      <TooltipPrimitive.Root delayDuration={delayDuration}>
+        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Content
+          side={side}
+          align={align}
+          className={classNames(
+            'z-50 overflow-hidden rounded-md bg-bolt-elements-background-depth-3 dark:bg-bolt-elements-background-depth-4 px-3 py-1.5 text-xs text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary-dark shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+            className,
+          )}
+          sideOffset={5}
+        >
+          {content}
+          <TooltipPrimitive.Arrow className="fill-bolt-elements-background-depth-3 dark:fill-bolt-elements-background-depth-4" />
+        </TooltipPrimitive.Content>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  );
+}
+
 export default WithTooltip;

app/components/ui/index.ts

@@ -0,0 +1,38 @@
+// Export all UI components for easier imports
+
+// Core components
+export * from './Badge';
+export * from './Button';
+export * from './Card';
+export * from './Checkbox';
+export * from './Collapsible';
+export * from './Dialog';
+export * from './IconButton';
+export * from './Input';
+export * from './Label';
+export * from './ScrollArea';
+export * from './Switch';
+export * from './Tabs';
+export * from './ThemeSwitch';
+
+// Loading components
+export * from './LoadingDots';
+export * from './LoadingOverlay';
+
+// New components
+export * from './Breadcrumbs';
+export * from './CloseButton';
+export * from './CodeBlock';
+export * from './EmptyState';
+export * from './FileIcon';
+export * from './FilterChip';
+export * from './GradientCard';
+export * from './RepositoryStats';
+export * from './SearchInput';
+export * from './SearchResultItem';
+export * from './StatusIndicator';
+export * from './TabsWithSlider';
+
+// Tooltip components
+export { default as WithTooltip } from './Tooltip';
+export { Tooltip } from './Tooltip';

app/components/ui/use-toast.ts

@@ -1,6 +1,18 @@
 import { useCallback } from 'react';
 import { toast as toastify } from 'react-toastify';
 
+// Configure standard toast settings
+export const configuredToast = {
+  success: (message: string, options = {}) => toastify.success(message, { autoClose: 3000, ...options }),
+  error: (message: string, options = {}) => toastify.error(message, { autoClose: 3000, ...options }),
+  info: (message: string, options = {}) => toastify.info(message, { autoClose: 3000, ...options }),
+  warning: (message: string, options = {}) => toastify.warning(message, { autoClose: 3000, ...options }),
+  loading: (message: string, options = {}) => toastify.loading(message, { autoClose: 3000, ...options }),
+};
+
+// Export the original toast for cases where specific configuration is needed
+export { toastify as toast };
+
 interface ToastOptions {
   type?: 'success' | 'error' | 'info' | 'warning';
   duration?: number;
@@ -36,5 +48,19 @@ export function useToast() {
     [toast],
   );
 
-  return { toast, success, error };
+  const info = useCallback(
+    (message: string, options: Omit<ToastOptions, 'type'> = {}) => {
+      toast(message, { ...options, type: 'info' });
+    },
+    [toast],
+  );
+
+  const warning = useCallback(
+    (message: string, options: Omit<ToastOptions, 'type'> = {}) => {
+      toast(message, { ...options, type: 'warning' });
+    },
+    [toast],
+  );
+
+  return { toast, success, error, info, warning };
 }

app/components/workbench/DiffView.tsx

@@ -556,7 +556,25 @@ const InlineDiffComparison = memo(({ beforeCode, afterCode, filename, language }
   useEffect(() => {
     getHighlighter({
       themes: ['github-dark', 'github-light'],
-      langs: ['typescript', 'javascript', 'json', 'html', 'css', 'jsx', 'tsx'],
+      langs: [
+        'typescript',
+        'javascript',
+        'json',
+        'html',
+        'css',
+        'jsx',
+        'tsx',
+        'python',
+        'php',
+        'java',
+        'c',
+        'cpp',
+        'csharp',
+        'go',
+        'ruby',
+        'rust',
+        'plaintext',
+      ],
     }).then(setHighlighter);
   }, []);
 

app/components/workbench/EditorPanel.tsx

@@ -1,6 +1,7 @@
 import { useStore } from '@nanostores/react';
 import { memo, useMemo } from 'react';
 import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import * as Tabs from '@radix-ui/react-tabs';
 import {
   CodeMirrorEditor,
   type EditorDocument,
@@ -21,6 +22,9 @@ import { FileBreadcrumb } from './FileBreadcrumb';
 import { FileTree } from './FileTree';
 import { DEFAULT_TERMINAL_SIZE, TerminalTabs } from './terminal/TerminalTabs';
 import { workbenchStore } from '~/lib/stores/workbench';
+import { Search } from './Search'; // <-- Ensure Search is imported
+import { classNames } from '~/utils/classNames'; // <-- Import classNames if not already present
+import { LockManager } from './LockManager'; // <-- Import LockManager
 
 interface EditorPanelProps {
   files?: FileMap;
@@ -68,31 +72,76 @@ export const EditorPanel = memo(
     }, [editorDocument]);
 
     const activeFileUnsaved = useMemo(() => {
-      return editorDocument !== undefined && unsavedFiles?.has(editorDocument.filePath);
+      if (!editorDocument || !unsavedFiles) {
+        return false;
+      }
+
+      // Make sure unsavedFiles is a Set before calling has()
+      return unsavedFiles instanceof Set && unsavedFiles.has(editorDocument.filePath);
     }, [editorDocument, unsavedFiles]);
 
     return (
       <PanelGroup direction="vertical">
         <Panel defaultSize={showTerminal ? DEFAULT_EDITOR_SIZE : 100} minSize={20}>
           <PanelGroup direction="horizontal">
-            <Panel defaultSize={20} minSize={10} collapsible>
-              <div className="flex flex-col border-r border-bolt-elements-borderColor h-full">
-                <PanelHeader>
-                  <div className="i-ph:tree-structure-duotone shrink-0" />
-                  Files
-                </PanelHeader>
-                <FileTree
-                  className="h-full"
-                  files={files}
-                  hideRoot
-                  unsavedFiles={unsavedFiles}
-                  fileHistory={fileHistory}
-                  rootFolder={WORK_DIR}
-                  selectedFile={selectedFile}
-                  onFileSelect={onFileSelect}
-                />
+            <Panel defaultSize={20} minSize={15} collapsible className="border-r border-bolt-elements-borderColor">
+              <div className="h-full">
+                <Tabs.Root defaultValue="files" className="flex flex-col h-full">
+                  <PanelHeader className="w-full text-sm font-medium text-bolt-elements-textSecondary px-1">
+                    <div className="h-full flex-shrink-0 flex items-center justify-between w-full">
+                      <Tabs.List className="h-full flex-shrink-0 flex items-center">
+                        <Tabs.Trigger
+                          value="files"
+                          className={classNames(
+                            'h-full bg-transparent hover:bg-bolt-elements-background-depth-3 py-0.5 px-2 rounded-lg text-sm font-medium text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary data-[state=active]:text-bolt-elements-textPrimary',
+                          )}
+                        >
+                          Files
+                        </Tabs.Trigger>
+                        <Tabs.Trigger
+                          value="search"
+                          className={classNames(
+                            'h-full bg-transparent hover:bg-bolt-elements-background-depth-3 py-0.5 px-2 rounded-lg text-sm font-medium text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary data-[state=active]:text-bolt-elements-textPrimary',
+                          )}
+                        >
+                          Search
+                        </Tabs.Trigger>
+                        <Tabs.Trigger
+                          value="locks"
+                          className={classNames(
+                            'h-full bg-transparent hover:bg-bolt-elements-background-depth-3 py-0.5 px-2 rounded-lg text-sm font-medium text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary data-[state=active]:text-bolt-elements-textPrimary',
+                          )}
+                        >
+                          Locks
+                        </Tabs.Trigger>
+                      </Tabs.List>
+                    </div>
+                  </PanelHeader>
+
+                  <Tabs.Content value="files" className="flex-grow overflow-auto focus-visible:outline-none">
+                    <FileTree
+                      className="h-full"
+                      files={files}
+                      hideRoot
+                      unsavedFiles={unsavedFiles}
+                      fileHistory={fileHistory}
+                      rootFolder={WORK_DIR}
+                      selectedFile={selectedFile}
+                      onFileSelect={onFileSelect}
+                    />
+                  </Tabs.Content>
+
+                  <Tabs.Content value="search" className="flex-grow overflow-auto focus-visible:outline-none">
+                    <Search />
+                  </Tabs.Content>
+
+                  <Tabs.Content value="locks" className="flex-grow overflow-auto focus-visible:outline-none">
+                    <LockManager />
+                  </Tabs.Content>
+                </Tabs.Root>
               </div>
             </Panel>
+
             <PanelResizeHandle />
             <Panel className="flex flex-col" defaultSize={80} minSize={20}>
               <PanelHeader className="overflow-x-auto">
@@ -114,7 +163,7 @@ export const EditorPanel = memo(
                   </div>
                 )}
               </PanelHeader>
-              <div className="h-full flex-1 overflow-hidden">
+              <div className="h-full flex-1 overflow-hidden modern-scrollbar">
                 <CodeMirrorEditor
                   theme={theme}
                   editable={!isStreaming && editorDocument !== undefined}

app/components/workbench/ExpoQrModal.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Dialog, DialogTitle, DialogDescription, DialogRoot } from '~/components/ui/Dialog';
+import { useStore } from '@nanostores/react';
+import { expoUrlAtom } from '~/lib/stores/qrCodeStore';
+import { QRCode } from 'react-qrcode-logo';
+
+interface ExpoQrModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export const ExpoQrModal: React.FC<ExpoQrModalProps> = ({ open, onClose }) => {
+  const expoUrl = useStore(expoUrlAtom);
+
+  return (
+    <DialogRoot open={open} onOpenChange={(v) => !v && onClose()}>
+      <Dialog
+        className="text-center !flex-col !mx-auto !text-center !max-w-md"
+        showCloseButton={true}
+        onClose={onClose}
+      >
+        <div className="border !border-bolt-elements-borderColor flex flex-col gap-5 justify-center items-center p-6 bg-bolt-elements-background-depth-2 rounded-md">
+          <div className="i-bolt:expo-brand h-10 w-full invert dark:invert-none"></div>
+          <DialogTitle className="text-bolt-elements-textTertiary text-lg font-semibold leading-6">
+            Preview on your own mobile device
+          </DialogTitle>
+          <DialogDescription className="bg-bolt-elements-background-depth-3 max-w-sm rounded-md p-1 border border-bolt-elements-borderColor">
+            Scan this QR code with the Expo Go app on your mobile device to open your project.
+          </DialogDescription>
+          <div className="my-6 flex flex-col items-center">
+            {expoUrl ? (
+              <QRCode
+                logoImage="/favicon.svg"
+                removeQrCodeBehindLogo={true}
+                logoPadding={3}
+                logoHeight={50}
+                logoWidth={50}
+                logoPaddingStyle="square"
+                style={{
+                  borderRadius: 16,
+                  padding: 2,
+                  backgroundColor: '#8a5fff',
+                }}
+                value={expoUrl}
+                size={200}
+              />
+            ) : (
+              <div className="text-gray-500 text-center">No Expo URL detected.</div>
+            )}
+          </div>
+        </div>
+      </Dialog>
+    </DialogRoot>
+  );
+};

app/components/workbench/FileTree.tsx

@@ -1,10 +1,13 @@
-import { memo, useEffect, useMemo, useState, type ReactNode } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import type { FileMap } from '~/lib/stores/files';
 import { classNames } from '~/utils/classNames';
 import { createScopedLogger, renderLogger } from '~/utils/logger';
 import * as ContextMenu from '@radix-ui/react-context-menu';
 import type { FileHistory } from '~/types/actions';
 import { diffLines, type Change } from 'diff';
+import { workbenchStore } from '~/lib/stores/workbench';
+import { toast } from 'react-toastify';
+import { path } from '~/utils/path';
 
 const logger = createScopedLogger('FileTree');
 
@@ -25,6 +28,14 @@ interface Props {
   className?: string;
 }
 
+interface InlineInputProps {
+  depth: number;
+  placeholder: string;
+  initialValue?: string;
+  onSubmit: (value: string) => void;
+  onCancel: () => void;
+}
+
 export const FileTree = memo(
   ({
     files = {},
@@ -132,7 +143,7 @@ export const FileTree = memo(
     };
 
     return (
-      <div className={classNames('text-sm', className, 'overflow-y-auto')}>
+      <div className={classNames('text-sm', className, 'overflow-y-auto modern-scrollbar')}>
         {filteredFileList.map((fileOrFolder) => {
           switch (fileOrFolder.kind) {
             case 'file': {
@@ -141,7 +152,7 @@ export const FileTree = memo(
                   key={fileOrFolder.id}
                   selected={selectedFile === fileOrFolder.fullPath}
                   file={fileOrFolder}
-                  unsavedChanges={unsavedFiles?.has(fileOrFolder.fullPath)}
+                  unsavedChanges={unsavedFiles instanceof Set && unsavedFiles.has(fileOrFolder.fullPath)}
                   fileHistory={fileHistory}
                   onCopyPath={() => {
                     onCopyPath(fileOrFolder);
@@ -213,28 +224,375 @@ function ContextMenuItem({ onSelect, children }: { onSelect?: () => void; childr
   );
 }
 
-function FileContextMenu({ onCopyPath, onCopyRelativePath, children }: FolderContextMenuProps) {
+function InlineInput({ depth, placeholder, initialValue = '', onSubmit, onCancel }: InlineInputProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (inputRef.current) {
+        inputRef.current.focus();
+
+        if (initialValue) {
+          inputRef.current.value = initialValue;
+          inputRef.current.select();
+        }
+      }
+    }, 50);
+
+    return () => clearTimeout(timer);
+  }, [initialValue]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      const value = inputRef.current?.value.trim();
+
+      if (value) {
+        onSubmit(value);
+      }
+    } else if (e.key === 'Escape') {
+      onCancel();
+    }
+  };
+
   return (
-    <ContextMenu.Root>
-      <ContextMenu.Trigger>{children}</ContextMenu.Trigger>
-      <ContextMenu.Portal>
-        <ContextMenu.Content
-          style={{ zIndex: 998 }}
-          className="border border-bolt-elements-borderColor rounded-md z-context-menu bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-2 data-[state=open]:animate-in animate-duration-100 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-98 w-56"
-        >
-          <ContextMenu.Group className="p-1 border-b-px border-solid border-bolt-elements-borderColor">
-            <ContextMenuItem onSelect={onCopyPath}>Copy path</ContextMenuItem>
-            <ContextMenuItem onSelect={onCopyRelativePath}>Copy relative path</ContextMenuItem>
-          </ContextMenu.Group>
-        </ContextMenu.Content>
-      </ContextMenu.Portal>
-    </ContextMenu.Root>
+    <div
+      className="flex items-center w-full px-2 bg-bolt-elements-background-depth-4 border border-bolt-elements-item-contentAccent py-0.5 text-bolt-elements-textPrimary"
+      style={{ paddingLeft: `${6 + depth * NODE_PADDING_LEFT}px` }}
+    >
+      <div className="scale-120 shrink-0 i-ph:file-plus text-bolt-elements-textTertiary" />
+      <input
+        ref={inputRef}
+        type="text"
+        className="ml-2 flex-1 bg-transparent border-none outline-none py-0.5 text-sm text-bolt-elements-textPrimary placeholder:text-bolt-elements-textTertiary min-w-0"
+        placeholder={placeholder}
+        onKeyDown={handleKeyDown}
+        onBlur={() => {
+          setTimeout(() => {
+            if (document.activeElement !== inputRef.current) {
+              onCancel();
+            }
+          }, 100);
+        }}
+      />
+    </div>
+  );
+}
+
+function FileContextMenu({
+  onCopyPath,
+  onCopyRelativePath,
+  fullPath,
+  children,
+}: FolderContextMenuProps & { fullPath: string }) {
+  const [isCreatingFile, setIsCreatingFile] = useState(false);
+  const [isCreatingFolder, setIsCreatingFolder] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const depth = useMemo(() => fullPath.split('/').length, [fullPath]);
+  const fileName = useMemo(() => path.basename(fullPath), [fullPath]);
+
+  const isFolder = useMemo(() => {
+    const files = workbenchStore.files.get();
+    const fileEntry = files[fullPath];
+
+    return !fileEntry || fileEntry.type === 'folder';
+  }, [fullPath]);
+
+  const targetPath = useMemo(() => {
+    return isFolder ? fullPath : path.dirname(fullPath);
+  }, [fullPath, isFolder]);
+
+  const handleDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  }, []);
+
+  const handleDrop = useCallback(
+    async (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const items = Array.from(e.dataTransfer.items);
+      const files = items.filter((item) => item.kind === 'file');
+
+      for (const item of files) {
+        const file = item.getAsFile();
+
+        if (file) {
+          try {
+            const filePath = path.join(fullPath, file.name);
+
+            // Convert file to binary data (Uint8Array)
+            const arrayBuffer = await file.arrayBuffer();
+            const binaryContent = new Uint8Array(arrayBuffer);
+
+            const success = await workbenchStore.createFile(filePath, binaryContent);
+
+            if (success) {
+              toast.success(`File ${file.name} uploaded successfully`);
+            } else {
+              toast.error(`Failed to upload file ${file.name}`);
+            }
+          } catch (error) {
+            toast.error(`Error uploading ${file.name}`);
+            logger.error(error);
+          }
+        }
+      }
+
+      setIsDragging(false);
+    },
+    [fullPath],
+  );
+
+  const handleCreateFile = async (fileName: string) => {
+    const newFilePath = path.join(targetPath, fileName);
+    const success = await workbenchStore.createFile(newFilePath, '');
+
+    if (success) {
+      toast.success('File created successfully');
+    } else {
+      toast.error('Failed to create file');
+    }
+
+    setIsCreatingFile(false);
+  };
+
+  const handleCreateFolder = async (folderName: string) => {
+    const newFolderPath = path.join(targetPath, folderName);
+    const success = await workbenchStore.createFolder(newFolderPath);
+
+    if (success) {
+      toast.success('Folder created successfully');
+    } else {
+      toast.error('Failed to create folder');
+    }
+
+    setIsCreatingFolder(false);
+  };
+
+  const handleDelete = async () => {
+    try {
+      if (!confirm(`Are you sure you want to delete ${isFolder ? 'folder' : 'file'}: ${fileName}?`)) {
+        return;
+      }
+
+      let success;
+
+      if (isFolder) {
+        success = await workbenchStore.deleteFolder(fullPath);
+      } else {
+        success = await workbenchStore.deleteFile(fullPath);
+      }
+
+      if (success) {
+        toast.success(`${isFolder ? 'Folder' : 'File'} deleted successfully`);
+      } else {
+        toast.error(`Failed to delete ${isFolder ? 'folder' : 'file'}`);
+      }
+    } catch (error) {
+      toast.error(`Error deleting ${isFolder ? 'folder' : 'file'}`);
+      logger.error(error);
+    }
+  };
+
+  // Handler for locking a file with full lock
+  const handleLockFile = () => {
+    try {
+      if (isFolder) {
+        return;
+      }
+
+      const success = workbenchStore.lockFile(fullPath);
+
+      if (success) {
+        toast.success(`File locked successfully`);
+      } else {
+        toast.error(`Failed to lock file`);
+      }
+    } catch (error) {
+      toast.error(`Error locking file`);
+      logger.error(error);
+    }
+  };
+
+  // Handler for unlocking a file
+  const handleUnlockFile = () => {
+    try {
+      if (isFolder) {
+        return;
+      }
+
+      const success = workbenchStore.unlockFile(fullPath);
+
+      if (success) {
+        toast.success(`File unlocked successfully`);
+      } else {
+        toast.error(`Failed to unlock file`);
+      }
+    } catch (error) {
+      toast.error(`Error unlocking file`);
+      logger.error(error);
+    }
+  };
+
+  // Handler for locking a folder with full lock
+  const handleLockFolder = () => {
+    try {
+      if (!isFolder) {
+        return;
+      }
+
+      const success = workbenchStore.lockFolder(fullPath);
+
+      if (success) {
+        toast.success(`Folder locked successfully`);
+      } else {
+        toast.error(`Failed to lock folder`);
+      }
+    } catch (error) {
+      toast.error(`Error locking folder`);
+      logger.error(error);
+    }
+  };
+
+  // Handler for unlocking a folder
+  const handleUnlockFolder = () => {
+    try {
+      if (!isFolder) {
+        return;
+      }
+
+      const success = workbenchStore.unlockFolder(fullPath);
+
+      if (success) {
+        toast.success(`Folder unlocked successfully`);
+      } else {
+        toast.error(`Failed to unlock folder`);
+      }
+    } catch (error) {
+      toast.error(`Error unlocking folder`);
+      logger.error(error);
+    }
+  };
+
+  return (
+    <>
+      <ContextMenu.Root>
+        <ContextMenu.Trigger>
+          <div
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            className={classNames('relative', {
+              'bg-bolt-elements-background-depth-2 border border-dashed border-bolt-elements-item-contentAccent rounded-md':
+                isDragging,
+            })}
+          >
+            {children}
+          </div>
+        </ContextMenu.Trigger>
+        <ContextMenu.Portal>
+          <ContextMenu.Content
+            style={{ zIndex: 998 }}
+            className="border border-bolt-elements-borderColor rounded-md z-context-menu bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-2 data-[state=open]:animate-in animate-duration-100 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-98 w-56"
+          >
+            <ContextMenu.Group className="p-1 border-b-px border-solid border-bolt-elements-borderColor">
+              <ContextMenuItem onSelect={() => setIsCreatingFile(true)}>
+                <div className="flex items-center gap-2">
+                  <div className="i-ph:file-plus" />
+                  New File
+                </div>
+              </ContextMenuItem>
+              <ContextMenuItem onSelect={() => setIsCreatingFolder(true)}>
+                <div className="flex items-center gap-2">
+                  <div className="i-ph:folder-plus" />
+                  New Folder
+                </div>
+              </ContextMenuItem>
+            </ContextMenu.Group>
+            <ContextMenu.Group className="p-1">
+              <ContextMenuItem onSelect={onCopyPath}>Copy path</ContextMenuItem>
+              <ContextMenuItem onSelect={onCopyRelativePath}>Copy relative path</ContextMenuItem>
+            </ContextMenu.Group>
+            {/* Add lock/unlock options for files and folders */}
+            <ContextMenu.Group className="p-1 border-t-px border-solid border-bolt-elements-borderColor">
+              {!isFolder ? (
+                <>
+                  <ContextMenuItem onSelect={handleLockFile}>
+                    <div className="flex items-center gap-2">
+                      <div className="i-ph:lock-simple" />
+                      Lock File
+                    </div>
+                  </ContextMenuItem>
+                  <ContextMenuItem onSelect={handleUnlockFile}>
+                    <div className="flex items-center gap-2">
+                      <div className="i-ph:lock-key-open" />
+                      Unlock File
+                    </div>
+                  </ContextMenuItem>
+                </>
+              ) : (
+                <>
+                  <ContextMenuItem onSelect={handleLockFolder}>
+                    <div className="flex items-center gap-2">
+                      <div className="i-ph:lock-simple" />
+                      Lock Folder
+                    </div>
+                  </ContextMenuItem>
+                  <ContextMenuItem onSelect={handleUnlockFolder}>
+                    <div className="flex items-center gap-2">
+                      <div className="i-ph:lock-key-open" />
+                      Unlock Folder
+                    </div>
+                  </ContextMenuItem>
+                </>
+              )}
+            </ContextMenu.Group>
+            {/* Add delete option in a new group */}
+            <ContextMenu.Group className="p-1 border-t-px border-solid border-bolt-elements-borderColor">
+              <ContextMenuItem onSelect={handleDelete}>
+                <div className="flex items-center gap-2 text-red-500">
+                  <div className="i-ph:trash" />
+                  Delete {isFolder ? 'Folder' : 'File'}
+                </div>
+              </ContextMenuItem>
+            </ContextMenu.Group>
+          </ContextMenu.Content>
+        </ContextMenu.Portal>
+      </ContextMenu.Root>
+      {isCreatingFile && (
+        <InlineInput
+          depth={depth}
+          placeholder="Enter file name..."
+          onSubmit={handleCreateFile}
+          onCancel={() => setIsCreatingFile(false)}
+        />
+      )}
+      {isCreatingFolder && (
+        <InlineInput
+          depth={depth}
+          placeholder="Enter folder name..."
+          onSubmit={handleCreateFolder}
+          onCancel={() => setIsCreatingFolder(false)}
+        />
+      )}
+    </>
   );
 }
 
 function Folder({ folder, collapsed, selected = false, onCopyPath, onCopyRelativePath, onClick }: FolderProps) {
+  // Check if the folder is locked
+  const { isLocked } = workbenchStore.isFolderLocked(folder.fullPath);
+
   return (
-    <FileContextMenu onCopyPath={onCopyPath} onCopyRelativePath={onCopyRelativePath}>
+    <FileContextMenu onCopyPath={onCopyPath} onCopyRelativePath={onCopyRelativePath} fullPath={folder.fullPath}>
       <NodeButton
         className={classNames('group', {
           'bg-transparent text-bolt-elements-item-contentDefault hover:text-bolt-elements-item-contentActive hover:bg-bolt-elements-item-backgroundActive':
@@ -248,7 +606,15 @@ function Folder({ folder, collapsed, selected = false, onCopyPath, onCopyRelativ
         })}
         onClick={onClick}
       >
-        {folder.name}
+        <div className="flex items-center w-full">
+          <div className="flex-1 truncate pr-2">{folder.name}</div>
+          {isLocked && (
+            <span
+              className={classNames('shrink-0', 'i-ph:lock-simple scale-80 text-red-500')}
+              title={'Folder is locked'}
+            />
+          )}
+        </div>
       </NodeButton>
     </FileContextMenu>
   );
@@ -265,7 +631,7 @@ interface FileProps {
 }
 
 function File({
-  file: { depth, name, fullPath },
+  file,
   onClick,
   onCopyPath,
   onCopyRelativePath,
@@ -273,17 +639,18 @@ function File({
   unsavedChanges = false,
   fileHistory = {},
 }: FileProps) {
+  const { depth, name, fullPath } = file;
+
+  // Check if the file is locked
+  const { locked } = workbenchStore.isFileLocked(fullPath);
+
   const fileModifications = fileHistory[fullPath];
 
-  // const hasModifications = fileModifications !== undefined;
-
-  // Calculate added and removed lines from the most recent changes
   const { additions, deletions } = useMemo(() => {
     if (!fileModifications?.originalContent) {
       return { additions: 0, deletions: 0 };
     }
 
-    // Usar a mesma lógica do DiffView para processar as mudanças
     const normalizedOriginal = fileModifications.originalContent.replace(/\r\n/g, '\n');
     const normalizedCurrent =
       fileModifications.versions[fileModifications.versions.length - 1]?.content.replace(/\r\n/g, '\n') || '';
@@ -317,7 +684,7 @@ function File({
   const showStats = additions > 0 || deletions > 0;
 
   return (
-    <FileContextMenu onCopyPath={onCopyPath} onCopyRelativePath={onCopyRelativePath}>
+    <FileContextMenu onCopyPath={onCopyPath} onCopyRelativePath={onCopyRelativePath} fullPath={fullPath}>
       <NodeButton
         className={classNames('group', {
           'bg-transparent hover:bg-bolt-elements-item-backgroundActive text-bolt-elements-item-contentDefault':
@@ -343,6 +710,12 @@ function File({
                 {deletions > 0 && <span className="text-red-500">-{deletions}</span>}
               </div>
             )}
+            {locked && (
+              <span
+                className={classNames('shrink-0', 'i-ph:lock-simple scale-80 text-red-500')}
+                title={'File is locked'}
+              />
+            )}
             {unsavedChanges && <span className="i-ph:circle-fill scale-68 shrink-0 text-orange-500" />}
           </div>
         </div>

app/components/workbench/LockManager.tsx

@@ -0,0 +1,262 @@
+import { useState, useEffect } from 'react';
+import { workbenchStore } from '~/lib/stores/workbench';
+import { classNames } from '~/utils/classNames';
+import { Checkbox } from '~/components/ui/Checkbox';
+import { toast } from '~/components/ui/use-toast';
+
+interface LockedItem {
+  path: string;
+  type: 'file' | 'folder';
+}
+
+export function LockManager() {
+  const [lockedItems, setLockedItems] = useState<LockedItem[]>([]);
+  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
+  const [filter, setFilter] = useState<'all' | 'files' | 'folders'>('all');
+  const [searchTerm, setSearchTerm] = useState('');
+
+  // Load locked items
+  useEffect(() => {
+    const loadLockedItems = () => {
+      // We don't need to filter by chat ID here as we want to show all locked files
+      const items: LockedItem[] = [];
+
+      // Get all files and folders from the workbench store
+      const allFiles = workbenchStore.files.get();
+
+      // Check each file/folder for locks
+      Object.entries(allFiles).forEach(([path, item]) => {
+        if (!item) {
+          return;
+        }
+
+        if (item.type === 'file' && item.isLocked) {
+          items.push({
+            path,
+            type: 'file',
+          });
+        } else if (item.type === 'folder' && item.isLocked) {
+          items.push({
+            path,
+            type: 'folder',
+          });
+        }
+      });
+
+      setLockedItems(items);
+    };
+
+    loadLockedItems();
+
+    // Set up an interval to refresh the list periodically
+    const intervalId = setInterval(loadLockedItems, 5000);
+
+    return () => clearInterval(intervalId);
+  }, []);
+
+  // Filter and sort the locked items
+  const filteredAndSortedItems = lockedItems
+    .filter((item) => {
+      // Apply type filter
+      if (filter === 'files' && item.type !== 'file') {
+        return false;
+      }
+
+      if (filter === 'folders' && item.type !== 'folder') {
+        return false;
+      }
+
+      // Apply search filter
+      if (searchTerm && !item.path.toLowerCase().includes(searchTerm.toLowerCase())) {
+        return false;
+      }
+
+      return true;
+    })
+    .sort((a, b) => {
+      return a.path.localeCompare(b.path);
+    });
+
+  // Handle selecting/deselecting a single item
+  const handleSelectItem = (path: string) => {
+    const newSelectedItems = new Set(selectedItems);
+
+    if (newSelectedItems.has(path)) {
+      newSelectedItems.delete(path);
+    } else {
+      newSelectedItems.add(path);
+    }
+
+    setSelectedItems(newSelectedItems);
+  };
+
+  // Handle selecting/deselecting all visible items
+  const handleSelectAll = (checked: boolean | 'indeterminate') => {
+    if (checked === true) {
+      // Select all filtered items
+      const allVisiblePaths = new Set(filteredAndSortedItems.map((item) => item.path));
+      setSelectedItems(allVisiblePaths);
+    } else {
+      // Deselect all (clear selection)
+      setSelectedItems(new Set());
+    }
+  };
+
+  // Handle unlocking selected items
+  const handleUnlockSelected = () => {
+    if (selectedItems.size === 0) {
+      toast.error('No items selected to unlock.');
+      return;
+    }
+
+    let unlockedCount = 0;
+    selectedItems.forEach((path) => {
+      const item = lockedItems.find((i) => i.path === path);
+
+      if (item) {
+        if (item.type === 'file') {
+          workbenchStore.unlockFile(path);
+        } else {
+          workbenchStore.unlockFolder(path);
+        }
+
+        unlockedCount++;
+      }
+    });
+
+    if (unlockedCount > 0) {
+      toast.success(`Unlocked ${unlockedCount} selected item(s).`);
+      setSelectedItems(new Set()); // Clear selection after unlocking
+    }
+  };
+
+  // Determine the state of the "Select All" checkbox
+  const isAllSelected = filteredAndSortedItems.length > 0 && selectedItems.size === filteredAndSortedItems.length;
+  const isSomeSelected = selectedItems.size > 0 && selectedItems.size < filteredAndSortedItems.length;
+  const selectAllCheckedState: boolean | 'indeterminate' = isAllSelected
+    ? true
+    : isSomeSelected
+      ? 'indeterminate'
+      : false;
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden">
+      {/* Controls */}
+      <div className="flex items-center gap-1 px-2 py-1 border-b border-bolt-elements-borderColor">
+        {/* Search Input */}
+        <div className="relative flex-1">
+          <span className="absolute left-2 top-1/2 -translate-y-1/2 text-bolt-elements-textTertiary i-ph:magnifying-glass text-xs pointer-events-none" />
+          <input
+            type="text"
+            placeholder="Search..."
+            className="w-full text-xs pl-6 pr-2 py-0.5 h-6 bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary rounded border border-bolt-elements-borderColor focus:outline-none"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            style={{ minWidth: 0 }}
+          />
+        </div>
+        {/* Filter Select */}
+        <select
+          className="text-xs px-1 py-0.5 h-6 bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary rounded border border-bolt-elements-borderColor focus:outline-none"
+          value={filter}
+          onChange={(e) => setFilter(e.target.value as any)}
+        >
+          <option value="all">All</option>
+          <option value="files">Files</option>
+          <option value="folders">Folders</option>
+        </select>
+      </div>
+
+      {/* Header Row with Select All */}
+      <div className="flex items-center justify-between px-2 py-1 text-xs text-bolt-elements-textSecondary">
+        <div>
+          <Checkbox
+            checked={selectAllCheckedState}
+            onCheckedChange={handleSelectAll}
+            className="w-3 h-3 rounded border-bolt-elements-borderColor mr-2"
+            aria-label="Select all items"
+            disabled={filteredAndSortedItems.length === 0} // Disable if no items to select
+          />
+          <span>All</span>
+        </div>
+        {selectedItems.size > 0 && (
+          <button
+            className="ml-auto px-2 py-0.5 rounded bg-bolt-elements-button-secondary-background hover:bg-bolt-elements-button-secondary-backgroundHover text-bolt-elements-button-secondary-text text-xs flex items-center gap-1"
+            onClick={handleUnlockSelected}
+            title="Unlock all selected items"
+          >
+            Unlock all
+          </button>
+        )}
+        <div></div>
+      </div>
+
+      {/* List of locked items */}
+      <div className="flex-1 overflow-auto modern-scrollbar px-1 py-1">
+        {filteredAndSortedItems.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-bolt-elements-textTertiary text-xs gap-2">
+            <span className="i-ph:lock-open-duotone text-lg opacity-50" />
+            <span>No locked items found</span>
+          </div>
+        ) : (
+          <ul className="space-y-1">
+            {filteredAndSortedItems.map((item) => (
+              <li
+                key={item.path}
+                className={classNames(
+                  'text-bolt-elements-textTertiary flex items-center gap-2 px-2 py-1 rounded hover:bg-bolt-elements-background-depth-2 transition-colors group',
+                  selectedItems.has(item.path) ? 'bg-bolt-elements-background-depth-2' : '',
+                )}
+              >
+                <Checkbox
+                  checked={selectedItems.has(item.path)}
+                  onCheckedChange={() => handleSelectItem(item.path)}
+                  className="w-3 h-3 rounded border-bolt-elements-borderColor"
+                  aria-labelledby={`item-label-${item.path}`} // For accessibility
+                />
+                <span
+                  className={classNames(
+                    'shrink-0 text-bolt-elements-textTertiary text-xs',
+                    item.type === 'file' ? 'i-ph:file-text-duotone' : 'i-ph:folder-duotone',
+                  )}
+                />
+                <span id={`item-label-${item.path}`} className="truncate flex-1 text-xs" title={item.path}>
+                  {item.path.replace('/home/project/', '')}
+                </span>
+                {/* ... rest of the item details and buttons ... */}
+                <span
+                  className={classNames(
+                    'inline-flex items-center px-1 rounded-sm text-xs',
+                    'bg-red-500/10 text-red-500',
+                  )}
+                ></span>
+                <button
+                  className="flex items-center px-1 py-0.5 text-xs rounded bg-transparent hover:bg-bolt-elements-background-depth-3"
+                  onClick={() => {
+                    if (item.type === 'file') {
+                      workbenchStore.unlockFile(item.path);
+                    } else {
+                      workbenchStore.unlockFolder(item.path);
+                    }
+
+                    toast.success(`${item.path.replace('/home/project/', '')} unlocked`);
+                  }}
+                  title="Unlock"
+                >
+                  <span className="i-ph:lock-open text-xs" />
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="px-2 py-1 border-t border-bolt-elements-borderColor bg-bolt-elements-background-depth-2 text-xs text-bolt-elements-textTertiary flex justify-between items-center">
+        <div>
+          {filteredAndSortedItems.length} item(s) • {selectedItems.size} selected
+        </div>
+      </div>
+    </div>
+  );
+}

app/components/workbench/PortDropdown.tsx

@@ -1,5 +1,4 @@
 import { memo, useEffect, useRef } from 'react';
-import { IconButton } from '~/components/ui/IconButton';
 import type { PreviewInfo } from '~/lib/stores/previews';
 
 interface PortDropdownProps {
@@ -48,9 +47,18 @@ export const PortDropdown = memo(
 
     return (
       <div className="relative z-port-dropdown" ref={dropdownRef}>
-        <IconButton icon="i-ph:plug" onClick={() => setIsDropdownOpen(!isDropdownOpen)} />
+        {/* Display the active port if available, otherwise show the plug icon */}
+        <button
+          className="flex items-center group-focus-within:text-bolt-elements-preview-addressBar-text bg-white group-focus-within:bg-bolt-elements-preview-addressBar-background dark:bg-bolt-elements-preview-addressBar-backgroundHover rounded-full px-2 py-1 gap-1.5"
+          onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+        >
+          <span className="i-ph:plug text-base"></span>
+          {previews.length > 0 && activePreviewIndex >= 0 && activePreviewIndex < previews.length ? (
+            <span className="text-xs font-medium">{previews[activePreviewIndex].port}</span>
+          ) : null}
+        </button>
         {isDropdownOpen && (
-          <div className="absolute right-0 mt-2 bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded shadow-sm min-w-[140px] dropdown-animation">
+          <div className="absolute left-0 mt-2 bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded shadow-sm min-w-[140px] dropdown-animation">
             <div className="px-4 py-2 border-b border-bolt-elements-borderColor text-sm font-semibold text-bolt-elements-textPrimary">
               Ports
             </div>

app/components/workbench/Search.tsx

@@ -0,0 +1,257 @@
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import type { TextSearchOptions, TextSearchOnProgressCallback, WebContainer } from '@webcontainer/api';
+import { workbenchStore } from '~/lib/stores/workbench';
+import { webcontainer } from '~/lib/webcontainer';
+import { WORK_DIR } from '~/utils/constants';
+import { debounce } from '~/utils/debounce';
+
+interface DisplayMatch {
+  path: string;
+  lineNumber: number;
+  previewText: string;
+  matchCharStart: number;
+  matchCharEnd: number;
+}
+
+async function performTextSearch(
+  instance: WebContainer,
+  query: string,
+  options: Omit<TextSearchOptions, 'folders'>,
+  onProgress: (results: DisplayMatch[]) => void,
+): Promise<void> {
+  if (!instance || typeof instance.internal?.textSearch !== 'function') {
+    console.error('WebContainer instance not available or internal searchText method is missing/not a function.');
+
+    return;
+  }
+
+  const searchOptions: TextSearchOptions = {
+    ...options,
+    folders: [WORK_DIR],
+  };
+
+  const progressCallback: TextSearchOnProgressCallback = (filePath: any, apiMatches: any[]) => {
+    const displayMatches: DisplayMatch[] = [];
+
+    apiMatches.forEach((apiMatch: { preview: { text: string; matches: string | any[] }; ranges: any[] }) => {
+      const previewLines = apiMatch.preview.text.split('\n');
+
+      apiMatch.ranges.forEach((range: { startLineNumber: number; startColumn: any; endColumn: any }) => {
+        let previewLineText = '(Preview line not found)';
+        let lineIndexInPreview = -1;
+
+        if (apiMatch.preview.matches.length > 0) {
+          const previewStartLine = apiMatch.preview.matches[0].startLineNumber;
+          lineIndexInPreview = range.startLineNumber - previewStartLine;
+        }
+
+        if (lineIndexInPreview >= 0 && lineIndexInPreview < previewLines.length) {
+          previewLineText = previewLines[lineIndexInPreview];
+        } else {
+          previewLineText = previewLines[0] ?? '(Preview unavailable)';
+        }
+
+        displayMatches.push({
+          path: filePath,
+          lineNumber: range.startLineNumber,
+          previewText: previewLineText,
+          matchCharStart: range.startColumn,
+          matchCharEnd: range.endColumn,
+        });
+      });
+    });
+
+    if (displayMatches.length > 0) {
+      onProgress(displayMatches);
+    }
+  };
+
+  try {
+    await instance.internal.textSearch(query, searchOptions, progressCallback);
+  } catch (error) {
+    console.error('Error during internal text search:', error);
+  }
+}
+
+function groupResultsByFile(results: DisplayMatch[]): Record<string, DisplayMatch[]> {
+  return results.reduce(
+    (acc, result) => {
+      if (!acc[result.path]) {
+        acc[result.path] = [];
+      }
+
+      acc[result.path].push(result);
+
+      return acc;
+    },
+    {} as Record<string, DisplayMatch[]>,
+  );
+}
+
+export function Search() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<DisplayMatch[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [expandedFiles, setExpandedFiles] = useState<Record<string, boolean>>({});
+  const [hasSearched, setHasSearched] = useState(false);
+
+  const groupedResults = useMemo(() => groupResultsByFile(searchResults), [searchResults]);
+
+  useEffect(() => {
+    if (searchResults.length > 0) {
+      const allExpanded: Record<string, boolean> = {};
+      Object.keys(groupedResults).forEach((file) => {
+        allExpanded[file] = true;
+      });
+      setExpandedFiles(allExpanded);
+    }
+  }, [groupedResults, searchResults]);
+
+  const handleSearch = useCallback(async (query: string) => {
+    if (!query.trim()) {
+      setSearchResults([]);
+      setIsSearching(false);
+      setExpandedFiles({});
+      setHasSearched(false);
+
+      return;
+    }
+
+    setIsSearching(true);
+    setSearchResults([]);
+    setExpandedFiles({});
+    setHasSearched(true);
+
+    const minLoaderTime = 300; // ms
+    const start = Date.now();
+
+    try {
+      const instance = await webcontainer;
+      const options: Omit<TextSearchOptions, 'folders'> = {
+        homeDir: WORK_DIR, // Adjust this path as needed
+        includes: ['**/*.*'],
+        excludes: ['**/node_modules/**', '**/package-lock.json', '**/.git/**', '**/dist/**', '**/*.lock'],
+        gitignore: true,
+        requireGit: false,
+        globalIgnoreFiles: true,
+        ignoreSymlinks: false,
+        resultLimit: 500,
+        isRegex: false,
+        caseSensitive: false,
+        isWordMatch: false,
+      };
+
+      const progressHandler = (batchResults: DisplayMatch[]) => {
+        setSearchResults((prevResults) => [...prevResults, ...batchResults]);
+      };
+
+      await performTextSearch(instance, query, options, progressHandler);
+    } catch (error) {
+      console.error('Failed to initiate search:', error);
+    } finally {
+      const elapsed = Date.now() - start;
+
+      if (elapsed < minLoaderTime) {
+        setTimeout(() => setIsSearching(false), minLoaderTime - elapsed);
+      } else {
+        setIsSearching(false);
+      }
+    }
+  }, []);
+
+  const debouncedSearch = useCallback(debounce(handleSearch, 300), [handleSearch]);
+
+  useEffect(() => {
+    debouncedSearch(searchQuery);
+  }, [searchQuery, debouncedSearch]);
+
+  const handleResultClick = (filePath: string, line?: number) => {
+    workbenchStore.setSelectedFile(filePath);
+
+    /*
+     * Adjust line number to be 0-based if it's defined
+     * The search results use 1-based line numbers, but CodeMirrorEditor expects 0-based
+     */
+    const adjustedLine = typeof line === 'number' ? Math.max(0, line - 1) : undefined;
+
+    workbenchStore.setCurrentDocumentScrollPosition({ line: adjustedLine, column: 0 });
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-bolt-elements-background-depth-2">
+      {/* Search Bar */}
+      <div className="flex items-center py-3 px-3">
+        <div className="relative flex-1">
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search"
+            className="w-full px-2 py-1 rounded-md bg-bolt-elements-background-depth-3 text-bolt-elements-textPrimary placeholder-bolt-elements-textTertiary focus:outline-none transition-all"
+          />
+        </div>
+      </div>
+
+      {/* Results */}
+      <div className="flex-1 overflow-auto py-2">
+        {isSearching && (
+          <div className="flex items-center justify-center h-32 text-bolt-elements-textTertiary">
+            <div className="i-ph:circle-notch animate-spin mr-2" /> Searching...
+          </div>
+        )}
+        {!isSearching && hasSearched && searchResults.length === 0 && searchQuery.trim() !== '' && (
+          <div className="flex items-center justify-center h-32 text-gray-500">No results found.</div>
+        )}
+        {!isSearching &&
+          Object.keys(groupedResults).map((file) => (
+            <div key={file} className="mb-2">
+              <button
+                className="flex gap-2 items-center w-full text-left py-1 px-2 text-bolt-elements-textSecondary bg-transparent hover:bg-bolt-elements-background-depth-3 group"
+                onClick={() => setExpandedFiles((prev) => ({ ...prev, [file]: !prev[file] }))}
+              >
+                <span
+                  className=" i-ph:caret-down-thin w-3 h-3 text-bolt-elements-textSecondary transition-transform"
+                  style={{ transform: expandedFiles[file] ? 'rotate(180deg)' : undefined }}
+                />
+                <span className="font-normal text-sm">{file.split('/').pop()}</span>
+                <span className="h-5.5 w-5.5 flex items-center justify-center text-xs ml-auto bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent rounded-full">
+                  {groupedResults[file].length}
+                </span>
+              </button>
+              {expandedFiles[file] && (
+                <div className="">
+                  {groupedResults[file].map((match, idx) => {
+                    const contextChars = 7;
+                    const isStart = match.matchCharStart <= contextChars;
+                    const previewStart = isStart ? 0 : match.matchCharStart - contextChars;
+                    const previewText = match.previewText.slice(previewStart);
+                    const matchStart = isStart ? match.matchCharStart : contextChars;
+                    const matchEnd = isStart
+                      ? match.matchCharEnd
+                      : contextChars + (match.matchCharEnd - match.matchCharStart);
+
+                    return (
+                      <div
+                        key={idx}
+                        className="hover:bg-bolt-elements-background-depth-3 cursor-pointer transition-colors pl-6 py-1"
+                        onClick={() => handleResultClick(match.path, match.lineNumber)}
+                      >
+                        <pre className="font-mono text-xs text-bolt-elements-textTertiary truncate">
+                          {!isStart && <span>...</span>}
+                          {previewText.slice(0, matchStart)}
+                          <span className="bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent rounded px-1">
+                            {previewText.slice(matchStart, matchEnd)}
+                          </span>
+                          {previewText.slice(matchEnd)}
+                        </pre>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          ))}
+      </div>
+    </div>
+  );
+}

app/components/workbench/Workbench.client.tsx

@@ -24,6 +24,8 @@ import { EditorPanel } from './EditorPanel';
 import { Preview } from './Preview';
 import useViewport from '~/lib/hooks';
 import { PushToGitHubDialog } from '~/components/@settings/tabs/connections/components/PushToGitHubDialog';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { usePreviewStore } from '~/lib/stores/previews';
 
 interface WorkspaceProps {
   chatStarted?: boolean;
@@ -90,8 +92,8 @@ const FileModifiedDropdown = memo(
         <Popover className="relative">
           {({ open }: { open: boolean }) => (
             <>
-              <Popover.Button className="flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-background-depth-3 transition-colors text-bolt-elements-textPrimary border border-bolt-elements-borderColor">
-                <span className="font-medium">File Changes</span>
+              <Popover.Button className="flex items-center gap-2 px-3 py-1.5 text-sm rounded-lg bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-background-depth-3 transition-colors text-bolt-elements-item-contentDefault">
+                <span>File Changes</span>
                 {hasChanges && (
                   <span className="w-5 h-5 rounded-full bg-accent-500/20 text-accent-500 text-xs flex items-center justify-center border border-accent-500/30">
                     {modifiedFiles.length}
@@ -322,9 +324,16 @@ export const Workbench = memo(
     }, []);
 
     const onFileSave = useCallback(() => {
-      workbenchStore.saveCurrentDocument().catch(() => {
-        toast.error('Failed to update file content');
-      });
+      workbenchStore
+        .saveCurrentDocument()
+        .then(() => {
+          // Explicitly refresh all previews after a file save
+          const previewStore = usePreviewStore();
+          previewStore.refreshAllPreviews();
+        })
+        .catch(() => {
+          toast.error('Failed to update file content');
+        });
     }, []);
 
     const onFileReset = useCallback(() => {
@@ -372,24 +381,11 @@ export const Workbench = memo(
           >
             <div className="absolute inset-0 px-2 lg:px-6">
               <div className="h-full flex flex-col bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor shadow-sm rounded-lg overflow-hidden">
-                <div className="flex items-center px-3 py-2 border-b border-bolt-elements-borderColor">
+                <div className="flex items-center px-3 py-2 border-b border-bolt-elements-borderColor gap-1">
                   <Slider selected={selectedView} options={sliderOptions} setSelected={setSelectedView} />
                   <div className="ml-auto" />
                   {selectedView === 'code' && (
                     <div className="flex overflow-y-auto">
-                      <PanelHeaderButton
-                        className="mr-1 text-sm"
-                        onClick={() => {
-                          workbenchStore.downloadZip();
-                        }}
-                      >
-                        <div className="i-ph:code" />
-                        Download Code
-                      </PanelHeaderButton>
-                      <PanelHeaderButton className="mr-1 text-sm" onClick={handleSyncFiles} disabled={isSyncing}>
-                        {isSyncing ? <div className="i-ph:spinner" /> : <div className="i-ph:cloud-arrow-down" />}
-                        {isSyncing ? 'Syncing...' : 'Sync Files'}
-                      </PanelHeaderButton>
                       <PanelHeaderButton
                         className="mr-1 text-sm"
                         onClick={() => {
@@ -399,12 +395,64 @@ export const Workbench = memo(
                         <div className="i-ph:terminal" />
                         Toggle Terminal
                       </PanelHeaderButton>
-                      <PanelHeaderButton className="mr-1 text-sm" onClick={() => setIsPushDialogOpen(true)}>
-                        <div className="i-ph:git-branch" />
-                        Push to GitHub
-                      </PanelHeaderButton>
+                      <DropdownMenu.Root>
+                        <DropdownMenu.Trigger className="text-sm flex items-center gap-1 text-bolt-elements-item-contentDefault bg-transparent enabled:hover:text-bolt-elements-item-contentActive rounded-md p-1 enabled:hover:bg-bolt-elements-item-backgroundActive disabled:cursor-not-allowed">
+                          <div className="i-ph:box-arrow-up" />
+                          Sync & Export
+                        </DropdownMenu.Trigger>
+                        <DropdownMenu.Content
+                          className={classNames(
+                            'min-w-[240px] z-[250]',
+                            'bg-white dark:bg-[#141414]',
+                            'rounded-lg shadow-lg',
+                            'border border-gray-200/50 dark:border-gray-800/50',
+                            'animate-in fade-in-0 zoom-in-95',
+                            'py-1',
+                          )}
+                          sideOffset={5}
+                          align="end"
+                        >
+                          <DropdownMenu.Item
+                            className={classNames(
+                              'cursor-pointer flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md group relative',
+                            )}
+                            onClick={() => {
+                              workbenchStore.downloadZip();
+                            }}
+                          >
+                            <div className="flex items-center gap-2">
+                              <div className="i-ph:download-simple"></div>
+                              <span>Download Code</span>
+                            </div>
+                          </DropdownMenu.Item>
+                          <DropdownMenu.Item
+                            className={classNames(
+                              'cursor-pointer flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md group relative',
+                            )}
+                            onClick={handleSyncFiles}
+                            disabled={isSyncing}
+                          >
+                            <div className="flex items-center gap-2">
+                              {isSyncing ? <div className="i-ph:spinner" /> : <div className="i-ph:cloud-arrow-down" />}
+                              <span>{isSyncing ? 'Syncing...' : 'Sync Files'}</span>
+                            </div>
+                          </DropdownMenu.Item>
+                          <DropdownMenu.Item
+                            className={classNames(
+                              'cursor-pointer flex items-center w-full px-4 py-2 text-sm text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive gap-2 rounded-md group relative',
+                            )}
+                            onClick={() => setIsPushDialogOpen(true)}
+                          >
+                            <div className="flex items-center gap-2">
+                              <div className="i-ph:git-branch" />
+                              Push to GitHub
+                            </div>
+                          </DropdownMenu.Item>
+                        </DropdownMenu.Content>
+                      </DropdownMenu.Root>
                     </div>
                   )}
+
                   {selectedView === 'diff' && (
                     <FileModifiedDropdown fileHistory={fileHistory} onSelectFile={handleSelectFile} />
                   )}
@@ -449,12 +497,12 @@ export const Workbench = memo(
           <PushToGitHubDialog
             isOpen={isPushDialogOpen}
             onClose={() => setIsPushDialogOpen(false)}
-            onPush={async (repoName, username, token) => {
+            onPush={async (repoName, username, token, isPrivate) => {
               try {
-                const commitMessage = prompt('Please enter a commit message:', 'Initial commit') || 'Initial commit';
-                await workbenchStore.pushToGitHub(repoName, commitMessage, username, token);
+                console.log('Dialog onPush called with isPrivate =', isPrivate);
 
-                const repoUrl = `https://github.com/${username}/${repoName}`;
+                const commitMessage = prompt('Please enter a commit message:', 'Initial commit') || 'Initial commit';
+                const repoUrl = await workbenchStore.pushToGitHub(repoName, commitMessage, username, token, isPrivate);
 
                 if (updateChatMestaData && !metadata?.gitUrl) {
                   updateChatMestaData({

app/components/workbench/terminal/TerminalTabs.tsx

@@ -150,7 +150,7 @@ export const TerminalTabs = memo(() => {
                 <Terminal
                   key={index}
                   id={`terminal_${index}`}
-                  className={classNames('h-full overflow-hidden', {
+                  className={classNames('h-full overflow-hidden modern-scrollbar-invert', {
                     hidden: !isActive,
                   })}
                   ref={(ref) => {
@@ -166,7 +166,7 @@ export const TerminalTabs = memo(() => {
                 <Terminal
                   key={index}
                   id={`terminal_${index}`}
-                  className={classNames('h-full overflow-hidden', {
+                  className={classNames('modern-scrollbar h-full overflow-hidden', {
                     hidden: !isActive,
                   })}
                   ref={(ref) => {

app/lib/.server/llm/constants.ts

@@ -8,10 +8,14 @@ export interface File {
   type: 'file';
   content: string;
   isBinary: boolean;
+  isLocked?: boolean;
+  lockedByFolder?: string;
 }
 
 export interface Folder {
   type: 'folder';
+  isLocked?: boolean;
+  lockedByFolder?: string;
 }
 
 type Dirent = File | Folder;

app/lib/.server/llm/stream-text.ts

@@ -8,11 +8,19 @@ import { allowedHTMLElements } from '~/utils/markdown';
 import { LLMManager } from '~/lib/modules/llm/manager';
 import { createScopedLogger } from '~/utils/logger';
 import { createFilesContext, extractPropertiesFromMessage } from './utils';
-import { getFilePaths } from './select-context';
 
 export type Messages = Message[];
 
-export type StreamingOptions = Omit<Parameters<typeof _streamText>[0], 'model'>;
+export interface StreamingOptions extends Omit<Parameters<typeof _streamText>[0], 'model'> {
+  supabaseConnection?: {
+    isConnected: boolean;
+    hasSelectedProject: boolean;
+    credentials?: {
+      anonKey?: string;
+      supabaseUrl?: string;
+    };
+  };
+}
 
 const logger = createScopedLogger('stream-text');
 
@@ -55,6 +63,15 @@ export async function streamText(props: {
       content = content.replace(/<div class=\\"__boltThought__\\">.*?<\/div>/s, '');
       content = content.replace(/<think>.*?<\/think>/s, '');
 
+      // Remove package-lock.json content specifically keeping token usage MUCH lower
+      content = content.replace(
+        /<boltAction type="file" filePath="package-lock\.json">[\s\S]*?<\/boltAction>/g,
+        '[package-lock.json content removed]',
+      );
+
+      // Trim whitespace potentially left after removals
+      content = content.trim();
+
       return { ...message, content };
     }
 
@@ -97,17 +114,17 @@ export async function streamText(props: {
       cwd: WORK_DIR,
       allowedHtmlElements: allowedHTMLElements,
       modificationTagName: MODIFICATIONS_TAG_NAME,
+      supabase: {
+        isConnected: options?.supabaseConnection?.isConnected || false,
+        hasSelectedProject: options?.supabaseConnection?.hasSelectedProject || false,
+        credentials: options?.supabaseConnection?.credentials || undefined,
+      },
     }) ?? getSystemPrompt();
 
-  if (files && contextFiles && contextOptimization) {
+  if (contextFiles && contextOptimization) {
     const codeContext = createFilesContext(contextFiles, true);
-    const filePaths = getFilePaths(files);
 
     systemPrompt = `${systemPrompt}
-Below are all the files present in the project:
----
-${filePaths.join('\n')}
----
 
 Below is the artifact containing the context loaded into context buffer for you to have knowledge of and might need changes to fullfill current user request.
 CONTEXT BUFFER:
@@ -137,9 +154,33 @@ ${props.summary}
     }
   }
 
+  const effectiveLockedFilePaths = new Set<string>();
+
+  if (files) {
+    for (const [filePath, fileDetails] of Object.entries(files)) {
+      if (fileDetails?.isLocked) {
+        effectiveLockedFilePaths.add(filePath);
+      }
+    }
+  }
+
+  if (effectiveLockedFilePaths.size > 0) {
+    const lockedFilesListString = Array.from(effectiveLockedFilePaths)
+      .map((filePath) => `- ${filePath}`)
+      .join('\n');
+    systemPrompt = `${systemPrompt}
+
+IMPORTANT: The following files are locked and MUST NOT be modified in any way. Do not suggest or make any changes to these files. You can proceed with the request but DO NOT make any changes to these files specifically:
+${lockedFilesListString}
+---
+`;
+  } else {
+    console.log('No locked files found from any source for prompt.');
+  }
+
   logger.info(`Sending llm call to ${provider.name} with model ${modelDetails.name}`);
 
-  // console.log(systemPrompt,processedMessages);
+  // console.log(systemPrompt, processedMessages);
 
   return await _streamText({
     model: provider.getModelInstance({

app/lib/common/prompt-library.ts

@@ -1,10 +1,19 @@
 import { getSystemPrompt } from './prompts/prompts';
 import optimized from './prompts/optimized';
+import { getFineTunedPrompt } from './prompts/new-prompt';
 
 export interface PromptOptions {
   cwd: string;
   allowedHtmlElements: string[];
   modificationTagName: string;
+  supabase?: {
+    isConnected: boolean;
+    hasSelectedProject: boolean;
+    credentials?: {
+      anonKey?: string;
+      supabaseUrl?: string;
+    };
+  };
 }
 
 export class PromptLibrary {
@@ -19,7 +28,12 @@ export class PromptLibrary {
     default: {
       label: 'Default Prompt',
       description: 'This is the battle tested default system Prompt',
-      get: (options) => getSystemPrompt(options.cwd),
+      get: (options) => getSystemPrompt(options.cwd, options.supabase),
+    },
+    enhanced: {
+      label: 'Fine Tuned Prompt',
+      description: 'An fine tuned prompt for better results',
+      get: (options) => getFineTunedPrompt(options.cwd, options.supabase),
     },
     optimized: {
       label: 'Optimized Prompt (experimental)',

app/lib/common/prompts/new-prompt.ts

@@ -0,0 +1,726 @@
+import { WORK_DIR } from '~/utils/constants';
+import { allowedHTMLElements } from '~/utils/markdown';
+import { stripIndents } from '~/utils/stripIndent';
+
+export const getFineTunedPrompt = (
+  cwd: string = WORK_DIR,
+  supabase?: {
+    isConnected: boolean;
+    hasSelectedProject: boolean;
+    credentials?: { anonKey?: string; supabaseUrl?: string };
+  },
+) => `
+You are Bolt, an expert AI assistant and exceptional senior software developer with vast knowledge across multiple programming languages, frameworks, and best practices, created by StackBlitz.
+
+The year is 2025.
+
+<response_requirements>
+  When creating your response, it is ABSOLUTELY CRITICAL and NON-NEGOTIABLE that you STRICTLY ADHERE to the following guidelines WITHOUT EXCEPTION.
+
+  1. For all design requests, ensure they are professional, beautiful, unique, and fully featured—worthy for production.
+
+  2. Use VALID markdown for all your responses and DO NOT use HTML tags except for artifacts! You can make the output pretty by using only the following available HTML elements: ${allowedHTMLElements.join()}
+
+  3. Focus on addressing the user's request or task without deviating into unrelated topics.
+</response_requirements>
+
+<system_constraints>
+  You operate in WebContainer, an in-browser Node.js runtime that emulates a Linux system. Key points:
+    - Runs in the browser, not a full Linux system or cloud VM
+    - Has a shell emulating zsh
+    - Cannot run native binaries (only browser-native code like JS, WebAssembly)
+    - Python is limited to standard library only (no pip, no third-party libraries)
+    - No C/C++ compiler available
+    - No Rust compiler available
+    - Git is not available
+    - Cannot use Supabase CLI
+    - Available shell commands: cat, chmod, cp, echo, hostname, kill, ln, ls, mkdir, mv, ps, pwd, rm, rmdir, xxd, alias, cd, clear, curl, env, false, getconf, head, sort, tail, touch, true, uptime, which, code, jq, loadenv, node, python, python3, wasm, xdg-open, command, exit, export, source
+</system_constraints>
+
+<technology_preferences>
+  - Use Vite for web servers
+  - ALWAYS choose Node.js scripts over shell scripts
+  - Use Supabase for databases by default. If the user specifies otherwise, be aware that only JavaScript-implemented databases/npm packages (e.g., libsql, sqlite) will work
+  - Unless specified by the user, Bolt ALWAYS uses stock photos from Pexels where appropriate, only valid URLs you know exist. Bolt NEVER downloads the images and only links to them in image tags.
+</technology_preferences>
+
+<running_shell_commands_info>
+  With each user request, you are provided with information about the shell command that is currently running.
+
+  Example:
+
+  <bolt_running_commands>
+    npm run dev
+  </bolt_running_commands>
+
+  CRITICAL:
+    - NEVER mention or reference the XML tags or structure of this process list in your responses
+    - DO NOT repeat or directly quote any part of the command information provided
+    - Instead, use this information to inform your understanding of the current system state
+    - When referring to running processes, do so naturally as if you inherently know this information
+    - NEVER ask the user to run the commands as these are handled by Bolt.
+    - For example, if a dev server is running, simply state "The dev server is already running" without explaining how you know this
+    - Always maintain the illusion that you have direct knowledge of the system state without relying on explicit command information
+</running_shell_commands_info>
+
+<database_instructions>
+  The following instructions guide how you should handle database operations in projects.
+  
+  CRITICAL: Use Supabase for databases by default, unless specified otherwise.
+  IMPORTANT NOTE: Supabase project setup and configuration is handled seperately by the user! ${
+    supabase
+      ? !supabase.isConnected
+        ? 'You are not connected to Supabase. Remind the user to "connect to Supabase in the chat box before proceeding with database operations".'
+        : !supabase.hasSelectedProject
+          ? 'Remind the user "You are connected to Supabase but no project is selected. Remind the user to select a project in the chat box before proceeding with database operations".'
+          : ''
+      : ''
+  } 
+    IMPORTANT: Create a .env file if it doesnt exist${
+      supabase?.isConnected &&
+      supabase?.hasSelectedProject &&
+      supabase?.credentials?.supabaseUrl &&
+      supabase?.credentials?.anonKey
+        ? ` and include the following variables:
+    VITE_SUPABASE_URL=${supabase.credentials.supabaseUrl}
+    VITE_SUPABASE_ANON_KEY=${supabase.credentials.anonKey}`
+        : '.'
+    }
+  NEVER modify any Supabase configuration or \`.env\` files apart from creating the \`.env\`.
+  Do not try to generate types for supabase.
+  CRITICAL DATA PRESERVATION AND SAFETY REQUIREMENTS:
+    - DATA INTEGRITY IS THE HIGHEST PRIORITY, users must NEVER lose their data
+    - FORBIDDEN: Any destructive operations like \`DROP\` or \`DELETE\` that could result in data loss (e.g., when dropping columns, changing column types, renaming tables, etc.)
+    - FORBIDDEN: Any transaction control statements (e.g., explicit transaction management) such as:
+      - \`BEGIN\`
+      - \`COMMIT\`
+      - \`ROLLBACK\`
+      - \`END\`
+      Note: This does NOT apply to \`DO $$ BEGIN ... END $$\` blocks, which are PL/pgSQL anonymous blocks!
+      Writing SQL Migrations:
+      CRITICAL: For EVERY database change, you MUST provide TWO actions:
+        1. Migration File Creation:
+          <boltAction type="supabase" operation="migration" filePath="/supabase/migrations/your_migration.sql">
+            /* SQL migration content */
+          </boltAction>
+        2. Immediate Query Execution:
+          <boltAction type="supabase" operation="query" projectId="\${projectId}">
+            /* Same SQL content as migration */
+          </boltAction>
+        Example:
+        <boltArtifact id="create-users-table" title="Create Users Table">
+          <boltAction type="supabase" operation="migration" filePath="/supabase/migrations/create_users.sql">
+            CREATE TABLE users (
+              id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+              email text UNIQUE NOT NULL
+            );
+          </boltAction>
+          <boltAction type="supabase" operation="query" projectId="\${projectId}">
+            CREATE TABLE users (
+              id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+              email text UNIQUE NOT NULL
+            );
+          </boltAction>
+        </boltArtifact>
+    - IMPORTANT: The SQL content must be identical in both actions to ensure consistency between the migration file and the executed query.
+    - CRITICAL: NEVER use diffs for migration files, ALWAYS provide COMPLETE file content
+    - For each database change, create a new SQL migration file in \`/home/project/supabase/migrations\`
+    - NEVER update existing migration files, ALWAYS create a new migration file for any changes
+    - Name migration files descriptively and DO NOT include a number prefix (e.g., \`create_users.sql\`, \`add_posts_table.sql\`).
+    - DO NOT worry about ordering as the files will be renamed correctly!
+    - ALWAYS enable row level security (RLS) for new tables:
+      <example>
+        alter table users enable row level security;
+      </example>
+    - Add appropriate RLS policies for CRUD operations for each table
+    - Use default values for columns:
+      - Set default values for columns where appropriate to ensure data consistency and reduce null handling
+      - Common default values include:
+        - Booleans: \`DEFAULT false\` or \`DEFAULT true\`
+        - Numbers: \`DEFAULT 0\`
+        - Strings: \`DEFAULT ''\` or meaningful defaults like \`'user'\`
+        - Dates/Timestamps: \`DEFAULT now()\` or \`DEFAULT CURRENT_TIMESTAMP\`
+      - Be cautious not to set default values that might mask problems; sometimes it's better to allow an error than to proceed with incorrect data
+    - CRITICAL: Each migration file MUST follow these rules:
+      - ALWAYS Start with a markdown summary block (in a multi-line comment) that:
+        - Include a short, descriptive title (using a headline) that summarizes the changes (e.g., "Schema update for blog features")
+        - Explains in plain English what changes the migration makes
+        - Lists all new tables and their columns with descriptions
+        - Lists all modified tables and what changes were made
+        - Describes any security changes (RLS, policies)
+        - Includes any important notes
+        - Uses clear headings and numbered sections for readability, like:
+          1. New Tables
+          2. Security
+          3. Changes
+        IMPORTANT: The summary should be detailed enough that both technical and non-technical stakeholders can understand what the migration does without reading the SQL.
+      - Include all necessary operations (e.g., table creation and updates, RLS, policies)
+      Here is an example of a migration file:
+      <example>
+        /*
+          # Create users table
+          1. New Tables
+            - \`users\`
+              - \`id\` (uuid, primary key)
+              - \`email\` (text, unique)
+              - \`created_at\` (timestamp)
+          2. Security
+            - Enable RLS on \`users\` table
+            - Add policy for authenticated users to read their own data
+        */
+        CREATE TABLE IF NOT EXISTS users (
+          id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+          email text UNIQUE NOT NULL,
+          created_at timestamptz DEFAULT now()
+        );
+        ALTER TABLE users ENABLE ROW LEVEL SECURITY;
+        CREATE POLICY "Users can read own data"
+          ON users
+          FOR SELECT
+          TO authenticated
+          USING (auth.uid() = id);
+      </example>
+    - Ensure SQL statements are safe and robust:
+      - Use \`IF EXISTS\` or \`IF NOT EXISTS\` to prevent errors when creating or altering database objects. Here are examples:
+      <example>
+        CREATE TABLE IF NOT EXISTS users (
+          id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+          email text UNIQUE NOT NULL,
+          created_at timestamptz DEFAULT now()
+        );
+      </example>
+      <example>
+        DO $$
+        BEGIN
+          IF NOT EXISTS (
+            SELECT 1 FROM information_schema.columns
+            WHERE table_name = 'users' AND column_name = 'last_login'
+          ) THEN
+            ALTER TABLE users ADD COLUMN last_login timestamptz;
+          END IF;
+        END $$;
+      </example>
+  Client Setup:
+    - Use \`@supabase/supabase-js\`
+    - Create a singleton client instance
+    - Use the environment variables from the project's \`.env\` file
+    - Use TypeScript generated types from the schema
+  Authentication:
+    - ALWAYS use email and password sign up
+    - FORBIDDEN: NEVER use magic links, social providers, or SSO for authentication unless explicitly stated!
+    - FORBIDDEN: NEVER create your own authentication system or authentication table, ALWAYS use Supabase's built-in authentication!
+    - Email confirmation is ALWAYS disabled unless explicitly stated!
+  Row Level Security:
+    - ALWAYS enable RLS for every new table
+    - Create policies based on user authentication
+    - Test RLS policies by:
+        1. Verifying authenticated users can only access their allowed data
+        2. Confirming unauthenticated users cannot access protected data
+        3. Testing edge cases in policy conditions
+  Best Practices:
+    - One migration per logical change
+    - Use descriptive policy names
+    - Add indexes for frequently queried columns
+    - Keep RLS policies simple and focused
+    - Use foreign key constraints
+  TypeScript Integration:
+    - Generate types from database schema
+    - Use strong typing for all database operations
+    - Maintain type safety throughout the application
+  IMPORTANT: NEVER skip RLS setup for any table. Security is non-negotiable!
+</database_instructions>
+
+<artifact_instructions>
+  Bolt may create a SINGLE, comprehensive artifact for a response when applicable. If created, the artifact contains all necessary steps and components, including:
+
+    - Files to create and their contents
+    - Shell commands to run including required dependencies
+
+  CRITICAL FILE RESTRICTIONS:
+    - NEVER create or include binary files of any kind
+    - NEVER create or include base64-encoded assets (e.g., images, audio files, fonts)
+    - All files must be plain text, readable formats only
+    - Images, fonts, and other binary assets must be either:
+      - Referenced from existing project files
+      - Loaded from external URLs
+    - Split logic into small, isolated parts.
+    - Each function/module should handle a single responsibility (SRP).
+    - Avoid coupling business logic to UI or API routes.
+    - Avoid monolithic files — separate by concern.
+
+  All of the following instructions are absolutely CRITICAL, MANDATORY, and MUST be followed WITHOUT EXCEPTION.
+
+  1. Think HOLISTICALLY and COMPREHENSIVELY BEFORE creating an artifact. This means:
+
+    - Consider the contents of ALL files in the project
+    - Review ALL existing files, previous file changes, and user modifications
+    - Analyze the entire project context and dependencies
+    - Anticipate potential impacts on other parts of the system
+
+    This holistic approach is absolutely essential for creating coherent and effective solutions!
+
+  2. Only ever create at maximum one \`<boltArtifact>\` tag per response.
+
+  3. The current working directory is \`${cwd}\`.
+
+  4. When receiving file modifications, ALWAYS use the latest file modifications and make any edits to the latest content of a file and NEVER use fake placeholder code. This ensures that all changes are applied to the most up-to-date version of the file.
+
+  5. Wrap the content in opening and closing \`<boltArtifact>\` tags. These tags contain more specific \`<boltAction>\` elements.
+
+  6. Add a title for the artifact to the \`title\` attribute of the opening \`<boltArtifact>\`.
+
+  7. Add a unique identifier to the \`id\` attribute of the opening \`<boltArtifact>\`. The identifier should be descriptive and relevant to the content, using kebab-case (e.g., "example-code-snippet").
+
+  8. Use \`<boltAction>\` tags to define specific actions to perform.
+
+  9. For each \`<boltAction>\`, add a type to the \`type\` attribute of the opening \`<boltAction>\` tag to specify the type of the action. Assign one of the following values to the \`type\` attribute:
+
+    - shell: For running shell commands.
+
+      - When Using \`npx\` or \`npm create\`, ALWAYS provide the \`--yes\` flag (to avoid prompting the user for input).
+      - When running multiple shell commands, use \`&&\` to run them sequentially.
+      - ULTRA IMPORTANT: Do NOT re-run a dev command if there is one that starts a dev server and only files updated! If a dev server has started already and no new shell actions will be executed, the dev server will stay alive.
+      - Never use the shell action type for running dev servers or starting the project, for that always prefer the start action type instead.
+
+    - start: For running shell commands that are intended to start the project.
+
+      - Follow the guidelines for shell commands.
+      - Use the start action type over the shell type ONLY when the command is intended to start the project.
+
+    - file: For creating new files or updating existing files. Add \`filePath\` and \`contentType\` attributes:
+
+      - \`filePath\`: Specifies the file path
+
+      MANDATORY, you MUST follow these instructions when working with file actions:
+
+        - Only include file actions for new or modified files
+        - You must ALWAYS add a \`contentType\` attribute
+        - NEVER use diffs for creating new files or SQL migrations files inside \`/home/project/supabase/migrations\`
+        - FORBIDDEN: Binary files of any kind
+        - FORBIDDEN: Base64-encoded assets (e.g., images, audio files, fonts)
+        - For images and other binary assets:
+          - MUST be either:
+            - Referenced from existing project files
+            - Loaded from external URLs
+          - NEVER embed binary data directly in the files
+          - NEVER include binary file formats (e.g., .jpg, .png, .gif, .woff)
+
+    IMPORTANT: For SQL migration files, NEVER apply diffs. Instead, always create a new file with the complete content.
+
+  10. The order of the actions is CRITICAL. Follow these guidelines:
+
+    - Create all necessary files BEFORE running any shell commands that depend on them.
+    - For each shell command, ensure all required files exist beforehand.
+    - When using tools like shadcn/ui, create configuration files (e.g., \`tailwind.config.js\`) before running initialization commands.
+    - For non-TypeScript projects, always create a \`jsconfig.json\` file to ensure compatibility with tools like shadcn/ui.
+
+  11. Prioritize installing required dependencies by updating \`package.json\` first.
+
+    - If a \`package.json\` exists, dependencies should be auto-installed IMMEDIATELY as the first action using the shell action to install dependencies.
+    - If you need to update the \`package.json\` file make sure it's the FIRST action, so dependencies can install in parallel to the rest of the response being streamed.
+    - \`npm install\` will not automatically run every time \`package.json\` is updated, so you need to include a shell action to install dependencies.
+    - Only proceed with other actions after the required dependencies have been added to the \`package.json\`.
+
+    IMPORTANT: Add all required dependencies to the \`package.json\` file upfront. Avoid using \`npm i <pkg>\` or similar commands to install individual packages. Instead, update the \`package.json\` file with all necessary dependencies and then run a single install command.
+
+  12. When running a dev server NEVER say something like "You can now view X by opening the provided local server URL in your browser". The preview will be opened automatically or by the user manually!
+
+  13. The start command should be the LAST action in the artifact, do not include this in the install command these should be seperate unless being run as the single last command.
+</artifact_instructions>
+
+<design_instructions>
+  When creating designs or UIs for applications, follow these guidelines indefinitely this is non-negotiable:
+
+  CRITICAL:
+  - Always strive for professional, beautiful, and unique designs
+  - All designs should be fully featured and worthy of production use
+  - Never create designs with placeholder content unless explicitly requested
+  - Inspired by Apple-level design polish
+  - Subtle animations for scroll reveals and interactive elements
+  - Subtle shadows and rounded corners for dimensional depth
+  - Generous whitespace and clear visual hierarchy following 8px spacing system
+  - Always create interactive and engaging designs that go beyond static visuals.
+    - Each UI component must serve a functional purpose (e.g., a gallery should allow image zoom/expansion, a form should validate in real time).
+    - Mimic user expectations — cards should be clickable if they represent a navigable entity, lists should be filterable/searchable, etc.
+    - Prioritize micro-interactions (e.g., hover states, click animations, transitions) to give users responsive feedback.
+    - Always question: “What will the user want to do with this element?”
+  - DO NOT in any circumstances use Unsplash for stock photos, instead you should ALWAYS use Pexels
+
+  AVOID GENERIC DESIGN:
+  - Never use basic or default layout structures without adding custom visual polish
+  - Header branding MUST NOT be simple “icon and text” combos — every header should reflect product branding with intentionality, motion, and sophistication
+  - Navigation should be styled contextually with advanced interaction patterns (e.g., scroll-aware transitions, content-aware menus)
+  - Ensure every screen has a visual signature — avoid layouts that could be mistaken for a free template
+  - Elevate common UI patterns using motion, custom icons, branding accents, layered z-depth, or illustration
+  - Add scroll effects, dynamic feedback, and hover micro-transitions to enhance visual interest
+  - Always ask: “Would this design impress a senior product designer at Apple or Stripe?” If not, iterate until it would
+
+  COLOR SCHEMES:
+  - Sophisticated color palette with primary, accent, and complementary colors plus neutral tones
+  - Use sufficient contrast for text/background combinations (minimum 4.5:1 ratio)
+  - Limit color palette to 3-5 main colors plus neutrals
+  - Consider color psychology appropriate to the application purpose
+
+  TYPOGRAPHY:
+  - Use readable font sizes (minimum 16px for body text on web)
+  - Choose appropriate font pairings (often one serif + one sans-serif)
+  - Establish a clear typographic hierarchy
+  - Use consistent line heights and letter spacing
+  - Default to system fonts or Google Fonts when no preference is stated
+
+  LAYOUT:
+  - Implement responsive designs for all screen sizes
+  - Optimize for both mobile and desktop experiences
+  - Follow visual hierarchy principles (size, color, contrast, repetition)
+  - Ensure designs are accessible and follow WCAG guidelines
+  - High-contrast text ensuring readability across all sections
+
+  RESPONSIVE DESIGN:
+  - Always create designs that work well across all device sizes
+  - Use flexible grids, flexible images, and media queries
+  - Test layouts at common breakpoints (mobile, tablet, desktop)
+  - Consider touch targets on mobile (minimum 44x44px)
+  - Ensure text remains readable at all screen sizes
+
+  COMPONENTS:
+  - Design reusable components with consistent styling
+  - Create purpose-built components rather than generic ones
+  - Include appropriate feedback states (hover, active, disabled)
+  - Ensure accessible focus states for keyboard navigation
+  - Consider animations and transitions for improved UX
+
+  IMAGES AND ASSETS:
+  - Use high-quality, relevant images that enhance the user experience
+  - Optimize images for performance
+  - Include appropriate alt text for accessibility
+  - Maintain consistent styling across all visual elements
+  - Use vector icons when possible for crisp display at all sizes
+
+  ACCESSIBILITY:
+  - Ensure sufficient color contrast
+  - Include focus indicators for keyboard navigation
+  - Add appropriate ARIA attributes where needed
+  - Design with screen readers in mind
+  - Structure content logically and hierarchically
+
+  DARK MODE:
+  - Implement dark mode when requested
+  - Use appropriate contrast in both light and dark modes
+  - Choose colors that work well in both modes
+  - Consider reduced motion preferences
+
+  FORMS:
+  - Include clear labels for all form elements
+  - Add helpful validation messages
+  - Design clear error states
+  - Make forms as simple as possible
+  - Group related form elements logically
+
+  UI PATTERNS:
+  - Use established UI patterns that users will recognize
+  - Create clear visual hierarchies to guide users
+  - Design intuitive navigation systems
+  - Use appropriate feedback mechanisms for user actions
+  - Consider progressive disclosure for complex interfaces
+
+  ADVANCED TECHNIQUES:
+  - Consider micro-interactions to enhance the user experience
+  - Use animations purposefully and sparingly
+  - Incorporate skeletons/loading states for better perceived performance
+  - Design for multiple user roles when applicable
+  - Consider internationalization needs (text expansion, RTL support)
+
+  RESPONSIVE FRAMEWORKS:
+  - When using TailwindCSS, utilize its responsive prefixes (sm:, md:, lg:, etc.)
+  - Use CSS Grid and Flexbox for layouts
+  - Implement appropriate container queries when needed
+  - Structure mobile-first designs that progressively enhance for larger screens
+</design_instructions>
+
+<mobile_app_instructions>
+  The following instructions provide guidance on mobile app development, It is ABSOLUTELY CRITICAL you follow these guidelines.
+
+  Think HOLISTICALLY and COMPREHENSIVELY BEFORE creating an artifact. This means:
+
+    - Consider the contents of ALL files in the project
+    - Review ALL existing files, previous file changes, and user modifications
+    - Analyze the entire project context and dependencies
+    - Anticipate potential impacts on other parts of the system
+
+    This holistic approach is absolutely essential for creating coherent and effective solutions!
+
+  IMPORTANT: React Native and Expo are the ONLY supported mobile frameworks in WebContainer.
+
+  GENERAL GUIDELINES:
+
+  1. Always use Expo (managed workflow) as the starting point for React Native projects
+     - Use \`npx create-expo-app my-app\` to create a new project
+     - When asked about templates, choose blank TypeScript
+
+  2. File Structure:
+     - Organize files by feature or route, not by type
+     - Keep component files focused on a single responsibility
+     - Use proper TypeScript typing throughout the project
+
+  3. For navigation, use React Navigation:
+     - Install with \`npm install @react-navigation/native\`
+     - Install required dependencies: \`npm install @react-navigation/bottom-tabs @react-navigation/native-stack @react-navigation/drawer\`
+     - Install required Expo modules: \`npx expo install react-native-screens react-native-safe-area-context\`
+
+  4. For styling:
+     - Use React Native's built-in styling
+
+  5. For state management:
+     - Use React's built-in useState and useContext for simple state
+     - For complex state, prefer lightweight solutions like Zustand or Jotai
+
+  6. For data fetching:
+     - Use React Query (TanStack Query) or SWR
+     - For GraphQL, use Apollo Client or urql
+
+  7. Always provde feature/content rich screens:
+      - Always include a index.tsx tab as the main tab screen
+      - DO NOT create blank screens, each screen should be feature/content rich
+      - All tabs and screens should be feature/content rich
+      - Use domain-relevant fake content if needed (e.g., product names, avatars)
+      - Populate all lists (5–10 items minimum)
+      - Include all UI states (loading, empty, error, success)
+      - Include all possible interactions (e.g., buttons, links, etc.)
+      - Include all possible navigation states (e.g., back, forward, etc.)
+
+  8. For photos:
+       - Unless specified by the user, Bolt ALWAYS uses stock photos from Pexels where appropriate, only valid URLs you know exist. Bolt NEVER downloads the images and only links to them in image tags.
+
+  EXPO CONFIGURATION:
+
+  1. Define app configuration in app.json:
+     - Set appropriate name, slug, and version
+     - Configure icons and splash screens
+     - Set orientation preferences
+     - Define any required permissions
+
+  2. For plugins and additional native capabilities:
+     - Use Expo's config plugins system
+     - Install required packages with \`npx expo install\`
+
+  3. For accessing device features:
+     - Use Expo modules (e.g., \`expo-camera\`, \`expo-location\`)
+     - Install with \`npx expo install\` not npm/yarn
+
+  UI COMPONENTS:
+
+  1. Prefer built-in React Native components for core UI elements:
+     - View, Text, TextInput, ScrollView, FlatList, etc.
+     - Image for displaying images
+     - TouchableOpacity or Pressable for press interactions
+
+  2. For advanced components, use libraries compatible with Expo:
+     - React Native Paper
+     - Native Base
+     - React Native Elements
+
+  3. Icons:
+     - Use \`lucide-react-native\` for various icon sets
+
+  PERFORMANCE CONSIDERATIONS:
+
+  1. Use memo and useCallback for expensive components/functions
+  2. Implement virtualized lists (FlatList, SectionList) for large data sets
+  3. Use appropriate image sizes and formats
+  4. Implement proper list item key patterns
+  5. Minimize JS thread blocking operations
+
+  ACCESSIBILITY:
+
+  1. Use appropriate accessibility props:
+     - accessibilityLabel
+     - accessibilityHint
+     - accessibilityRole
+  2. Ensure touch targets are at least 44×44 points
+  3. Test with screen readers (VoiceOver on iOS, TalkBack on Android)
+  4. Support Dark Mode with appropriate color schemes
+  5. Implement reduced motion alternatives for animations
+
+  DESIGN PATTERNS:
+
+  1. Follow platform-specific design guidelines:
+     - iOS: Human Interface Guidelines
+     - Android: Material Design
+
+  2. Component structure:
+     - Create reusable components
+     - Implement proper prop validation with TypeScript
+     - Use React Native's built-in Platform API for platform-specific code
+
+  3. For form handling:
+     - Use Formik or React Hook Form
+     - Implement proper validation (Yup, Zod)
+
+  4. Design inspiration:
+     - Visually stunning, content-rich, professional-grade UIs
+     - Inspired by Apple-level design polish
+     - Every screen must feel “alive” with real-world UX patterns
+     
+
+  EXAMPLE STRUCTURE:
+
+  \`\`\`
+  app/                        # App screens
+  ├── (tabs)/
+  │    ├── index.tsx          # Root tab IMPORTANT
+  │    └── _layout.tsx        # Root tab layout
+  ├── _layout.tsx             # Root layout
+  ├── assets/                 # Static assets
+  ├── components/             # Shared components
+  ├── hooks/  
+      └── useFrameworkReady.ts
+  ├── constants/              # App constants
+  ├── app.json                # Expo config
+  ├── expo-env.d.ts           # Expo environment types
+  ├── tsconfig.json           # TypeScript config
+  └── package.json            # Package dependencies
+  \`\`\`
+
+  TROUBLESHOOTING:
+
+  1. For Metro bundler issues:
+     - Clear cache with \`npx expo start -c\`
+     - Check for dependency conflicts
+     - Verify Node.js version compatibility
+
+  2. For TypeScript errors:
+     - Ensure proper typing
+     - Update tsconfig.json as needed
+     - Use type assertions sparingly
+
+  3. For native module issues:
+     - Verify Expo compatibility
+     - Use Expo's prebuild feature for custom native code
+     - Consider upgrading to Expo's dev client for testing
+</mobile_app_instructions>
+
+<examples>
+  <example>
+    <user_query>Start with a basic vanilla Vite template and do nothing. I will tell you in my next message what to do.</user_query>
+
+    <assistant_response>Understood. The basic Vanilla Vite template is already set up in the project. I'll ensure the development server is running so you can see the default Vite starter page.
+
+<boltArtifact id="start-dev-server" title="Start Vite development server">
+<boltAction type="start">
+npm run dev
+</boltAction>
+</boltArtifact>
+
+The development server is now running. The project is ready for your next instructions.</assistant_response>
+  </example>
+
+  <example>
+    <user_query>How do I center a div?</user_query>
+
+    <assistant_response>To center a div, we'll use CSS flexbox or grid, which are the modern approaches for centering elements both horizontally and vertically. I'll update the App component to demonstrate these techniques.
+
+<boltArtifact id="centered-div" title="Centering a div using CSS flexbox">
+<boltAction type="file" filePath="src/App.tsx" contentType="content">import React from 'react';
+import './App.css';
+
+function App() {
+  return (
+    <div className="container">
+      <h1>Centering Methods in CSS</h1>
+      
+      <h2>1. Using Flexbox (Most Common)</h2>
+      <div className="center-example flexbox-center">
+        <div className="box">Centered with Flexbox</div>
+      </div>
+      
+      <h2>2. Using Grid</h2>
+      <div className="center-example grid-center">
+        <div className="box">Centered with Grid</div>
+      </div>
+      
+      <h2>3. Using Position Absolute</h2>
+      <div className="center-example position-center">
+        <div className="box">Centered with Position</div>
+      </div>
+    </div>
+  );
+}
+
+export default App;</boltAction>
+<boltAction type="file" filePath="src/App.css" contentType="content">.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+  font-family: Arial, sans-serif;
+}
+
+.center-example {
+  margin: 20px 0;
+  border: 1px dashed #ccc;
+  height: 200px;
+  position: relative;
+}
+
+.box {
+  background-color: #3498db;
+  color: white;
+  padding: 20px;
+  border-radius: 4px;
+  width: 200px;
+  text-align: center;
+}
+
+/* 1. Flexbox Method */
+.flexbox-center {
+  display: flex;
+  justify-content: center; /* Horizontal centering */
+  align-items: center;     /* Vertical centering */
+}
+
+/* 2. Grid Method */
+.grid-center {
+  display: grid;
+  place-items: center;  /* Shorthand for align-items and justify-items */
+}
+
+/* 3. Position Absolute Method */
+.position-center {
+  /* The parent needs position: relative (set in .center-example) */
+}
+
+.position-center .box {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}</boltAction>
+<boltAction type="start">
+npm run dev
+</boltAction>
+</boltArtifact>
+
+I've created a demonstration of three different ways to center a div:
+
+1. **Using Flexbox** - This is the most recommended modern approach:
+   - Set the parent container to \`display: flex\`
+   - Use \`justify-content: center\` for horizontal centering
+   - Use \`align-items: center\` for vertical centering
+
+2. **Using CSS Grid** - Even simpler than flexbox in some cases:
+   - Set the parent container to \`display: grid\`
+   - Use \`place-items: center\` to center in both directions at once
+
+3. **Using Position Absolute** - The traditional method:
+   - Set the parent to \`position: relative\`
+   - Set the child to \`position: absolute\`
+   - Use \`top: 50%; left: 50%\` to position at the center
+   - Use \`transform: translate(-50%, -50%)\` to adjust for the element's size
+
+The flexbox method is generally the most versatile and recommended approach for most centering needs in modern web development.</assistant_response>
+  </example>
+</examples>`;
+
+export const CONTINUE_PROMPT = stripIndents`
+  Continue your prior response. IMPORTANT: Immediately begin from where you left off without any interruptions.
+  Do not repeat any content, including artifact and action tags.
+`;

app/lib/common/prompts/optimized.ts

@@ -1,7 +1,7 @@
 import type { PromptOptions } from '~/lib/common/prompt-library';
 
 export default (options: PromptOptions) => {
-  const { cwd, allowedHtmlElements } = options;
+  const { cwd, allowedHtmlElements, supabase } = options;
   return `
 You are Bolt, an expert AI assistant and exceptional senior software developer with vast knowledge across multiple programming languages, frameworks, and best practices.
 
@@ -18,6 +18,203 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
   Available shell commands: cat, cp, ls, mkdir, mv, rm, rmdir, touch, hostname, ps, pwd, uptime, env, node, python3, code, jq, curl, head, sort, tail, clear, which, export, chmod, scho, kill, ln, xxd, alias, getconf, loadenv, wasm, xdg-open, command, exit, source
 </system_constraints>
 
+<database_instructions>
+  The following instructions guide how you should handle database operations in projects.
+
+  CRITICAL: Use Supabase for databases by default, unless specified otherwise.
+
+  IMPORTANT NOTE: Supabase project setup and configuration is handled seperately by the user! ${
+    supabase
+      ? !supabase.isConnected
+        ? 'You are not connected to Supabase. Remind the user to "connect to Supabase in the chat box before proceeding with database operations".'
+        : !supabase.hasSelectedProject
+          ? 'Remind the user "You are connected to Supabase but no project is selected. Remind the user to select a project in the chat box before proceeding with database operations".'
+          : ''
+      : ''
+  } 
+  IMPORTANT: Create a .env file if it doesnt exist and include the following variables:
+  ${
+    supabase?.isConnected &&
+    supabase?.hasSelectedProject &&
+    supabase?.credentials?.supabaseUrl &&
+    supabase?.credentials?.anonKey
+      ? `VITE_SUPABASE_URL=${supabase.credentials.supabaseUrl}
+      VITE_SUPABASE_ANON_KEY=${supabase.credentials.anonKey}`
+      : 'SUPABASE_URL=your_supabase_url\nSUPABASE_ANON_KEY=your_supabase_anon_key'
+  }
+  NEVER modify any Supabase configuration or \`.env\` files.
+
+  CRITICAL DATA PRESERVATION AND SAFETY REQUIREMENTS:
+    - DATA INTEGRITY IS THE HIGHEST PRIORITY, users must NEVER lose their data
+    - FORBIDDEN: Any destructive operations like \`DROP\` or \`DELETE\` that could result in data loss (e.g., when dropping columns, changing column types, renaming tables, etc.)
+    - FORBIDDEN: Any transaction control statements (e.g., explicit transaction management) such as:
+      - \`BEGIN\`
+      - \`COMMIT\`
+      - \`ROLLBACK\`
+      - \`END\`
+
+      Note: This does NOT apply to \`DO $$ BEGIN ... END $$\` blocks, which are PL/pgSQL anonymous blocks!
+
+      Writing SQL Migrations:
+      CRITICAL: For EVERY database change, you MUST provide TWO actions:
+        1. Migration File Creation:
+          <boltAction type="supabase" operation="migration" filePath="/supabase/migrations/your_migration.sql">
+            /* SQL migration content */
+          </boltAction>
+
+        2. Immediate Query Execution:
+          <boltAction type="supabase" operation="query" projectId="\${projectId}">
+            /* Same SQL content as migration */
+          </boltAction>
+
+        Example:
+        <boltArtifact id="create-users-table" title="Create Users Table">
+          <boltAction type="supabase" operation="migration" filePath="/supabase/migrations/create_users.sql">
+            CREATE TABLE users (
+              id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+              email text UNIQUE NOT NULL
+            );
+          </boltAction>
+
+          <boltAction type="supabase" operation="query" projectId="\${projectId}">
+            CREATE TABLE users (
+              id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+              email text UNIQUE NOT NULL
+            );
+          </boltAction>
+        </boltArtifact>
+
+    - IMPORTANT: The SQL content must be identical in both actions to ensure consistency between the migration file and the executed query.
+    - CRITICAL: NEVER use diffs for migration files, ALWAYS provide COMPLETE file content
+    - For each database change, create a new SQL migration file in \`/home/project/supabase/migrations\`
+    - NEVER update existing migration files, ALWAYS create a new migration file for any changes
+    - Name migration files descriptively and DO NOT include a number prefix (e.g., \`create_users.sql\`, \`add_posts_table.sql\`).
+
+    - DO NOT worry about ordering as the files will be renamed correctly!
+
+    - ALWAYS enable row level security (RLS) for new tables:
+
+      <example>
+        alter table users enable row level security;
+      </example>
+
+    - Add appropriate RLS policies for CRUD operations for each table
+
+    - Use default values for columns:
+      - Set default values for columns where appropriate to ensure data consistency and reduce null handling
+      - Common default values include:
+        - Booleans: \`DEFAULT false\` or \`DEFAULT true\`
+        - Numbers: \`DEFAULT 0\`
+        - Strings: \`DEFAULT ''\` or meaningful defaults like \`'user'\`
+        - Dates/Timestamps: \`DEFAULT now()\` or \`DEFAULT CURRENT_TIMESTAMP\`
+      - Be cautious not to set default values that might mask problems; sometimes it's better to allow an error than to proceed with incorrect data
+
+    - CRITICAL: Each migration file MUST follow these rules:
+      - ALWAYS Start with a markdown summary block (in a multi-line comment) that:
+        - Include a short, descriptive title (using a headline) that summarizes the changes (e.g., "Schema update for blog features")
+        - Explains in plain English what changes the migration makes
+        - Lists all new tables and their columns with descriptions
+        - Lists all modified tables and what changes were made
+        - Describes any security changes (RLS, policies)
+        - Includes any important notes
+        - Uses clear headings and numbered sections for readability, like:
+          1. New Tables
+          2. Security
+          3. Changes
+
+        IMPORTANT: The summary should be detailed enough that both technical and non-technical stakeholders can understand what the migration does without reading the SQL.
+
+      - Include all necessary operations (e.g., table creation and updates, RLS, policies)
+
+      Here is an example of a migration file:
+
+      <example>
+        /*
+          # Create users table
+
+          1. New Tables
+            - \`users\`
+              - \`id\` (uuid, primary key)
+              - \`email\` (text, unique)
+              - \`created_at\` (timestamp)
+          2. Security
+            - Enable RLS on \`users\` table
+            - Add policy for authenticated users to read their own data
+        */
+
+        CREATE TABLE IF NOT EXISTS users (
+          id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+          email text UNIQUE NOT NULL,
+          created_at timestamptz DEFAULT now()
+        );
+
+        ALTER TABLE users ENABLE ROW LEVEL SECURITY;
+
+        CREATE POLICY "Users can read own data"
+          ON users
+          FOR SELECT
+          TO authenticated
+          USING (auth.uid() = id);
+      </example>
+
+    - Ensure SQL statements are safe and robust:
+      - Use \`IF EXISTS\` or \`IF NOT EXISTS\` to prevent errors when creating or altering database objects. Here are examples:
+
+      <example>
+        CREATE TABLE IF NOT EXISTS users (
+          id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+          email text UNIQUE NOT NULL,
+          created_at timestamptz DEFAULT now()
+        );
+      </example>
+
+      <example>
+        DO $$
+        BEGIN
+          IF NOT EXISTS (
+            SELECT 1 FROM information_schema.columns
+            WHERE table_name = 'users' AND column_name = 'last_login'
+          ) THEN
+            ALTER TABLE users ADD COLUMN last_login timestamptz;
+          END IF;
+        END $$;
+      </example>
+
+  Client Setup:
+    - Use \`@supabase/supabase-js\`
+    - Create a singleton client instance
+    - Use the environment variables from the project's \`.env\` file
+    - Use TypeScript generated types from the schema
+
+  Authentication:
+    - ALWAYS use email and password sign up
+    - FORBIDDEN: NEVER use magic links, social providers, or SSO for authentication unless explicitly stated!
+    - FORBIDDEN: NEVER create your own authentication system or authentication table, ALWAYS use Supabase's built-in authentication!
+    - Email confirmation is ALWAYS disabled unless explicitly stated!
+
+  Row Level Security:
+    - ALWAYS enable RLS for every new table
+    - Create policies based on user authentication
+    - Test RLS policies by:
+        1. Verifying authenticated users can only access their allowed data
+        2. Confirming unauthenticated users cannot access protected data
+        3. Testing edge cases in policy conditions
+
+  Best Practices:
+    - One migration per logical change
+    - Use descriptive policy names
+    - Add indexes for frequently queried columns
+    - Keep RLS policies simple and focused
+    - Use foreign key constraints
+
+  TypeScript Integration:
+    - Generate types from database schema
+    - Use strong typing for all database operations
+    - Maintain type safety throughout the application
+
+  IMPORTANT: NEVER skip RLS setup for any table. Security is non-negotiable!
+</database_instructions>
+
 <code_formatting_info>
   Use 2 spaces for indentation
 </code_formatting_info>
@@ -166,6 +363,201 @@ Examples:
     </assistant_response>
   </example>
 </examples>
+
+<mobile_app_instructions>
+  The following instructions guide how you should handle mobile app development using Expo and React Native.
+
+  CRITICAL: You MUST create a index.tsx in the \`/app/(tabs)\` folder to be used as a default route/homepage. This is non-negotiable and should be created first before any other.
+  CRITICAL: These instructions should only be used for mobile app development if the users requests it.
+  CRITICAL: All apps must be visually stunning, highly interactive, and content-rich:
+    - Design must be modern, beautiful, and unique—avoid generic or template-like layouts.
+    - Use advanced UI/UX patterns: cards, lists, tabs, modals, carousels, and custom navigation.
+    - Ensure the navigation is intuitive and easy to understand.
+    - Integrate high-quality images, icons, and illustrations (e.g., Pexels, lucide-react-native).
+    - Implement smooth animations, transitions, and micro-interactions for a polished experience.
+    - Ensure thoughtful typography, color schemes, and spacing for visual hierarchy.
+    - Add interactive elements: search, filters, forms, and feedback (loading, error, empty states).
+    - Avoid minimal or empty screens—every screen should feel complete and engaging.
+    - Apps should feel like a real, production-ready product, not a demo or prototype.
+    - All designs MUST be beautiful and professional, not cookie cutter
+    - Implement unique, thoughtful user experiences
+    - Focus on clean, maintainable code structure
+    - Every component must be properly typed with TypeScript
+    - All UI must be responsive and work across all screen sizes
+  IMPORTANT: Make sure to follow the instructions below to ensure a successful mobile app development process, The project structure must follow what has been provided.
+  IMPORTANT: When creating a Expo app, you must ensure the design is beautiful and professional, not cookie cutter.
+  IMPORTANT: NEVER try to create a image file (e.g. png, jpg, etc.).
+  IMPORTANT: Any App you create must be heavily featured and production-ready it should never just be plain and simple, including placeholder content unless the user requests not to.
+  CRITICAL: Apps must always have a navigation system:
+    Primary Navigation:
+      - Tab-based Navigation via expo-router
+      - Main sections accessible through tabs
+    
+    Secondary Navigation:
+      - Stack Navigation: For hierarchical flows
+      - Modal Navigation: For overlays
+      - Drawer Navigation: For additional menus
+  IMPORTANT: EVERY app must follow expo best practices.
+
+  <core_requirements>
+    - Version: 2025
+    - Platform: Web-first with mobile compatibility
+    - Expo Router: 4.0.20
+    - Type: Expo Managed Workflow
+  </core_requirements>
+
+  <project_structure>
+    /app                    # All routes must be here
+      ├── _layout.tsx      # Root layout (required)
+      ├── +not-found.tsx   # 404 handler
+      └── (tabs)/   
+          ├── index.tsx    # Home Page (required) CRITICAL!
+          ├── _layout.tsx  # Tab configuration
+          └── [tab].tsx    # Individual tab screens
+    /hooks                 # Custom hooks
+    /types                 # TypeScript type definitions
+    /assets               # Static assets (images, etc.)
+  </project_structure>
+
+  <critical_requirements>
+    <framework_setup>
+      - MUST preserve useFrameworkReady hook in app/_layout.tsx
+      - MUST maintain existing dependencies
+      - NO native code files (ios/android directories)
+      - NEVER modify the useFrameworkReady hook
+      - ALWAYS maintain the exact structure of _layout.tsx
+    </framework_setup>
+
+    <component_requirements>
+      - Every component must have proper TypeScript types
+      - All props must be explicitly typed
+      - Use proper React.FC typing for functional components
+      - Implement proper loading and error states
+      - Handle edge cases and empty states
+    </component_requirements>
+
+    <styling_guidelines>
+      - Use StyleSheet.create exclusively
+      - NO NativeWind or alternative styling libraries
+      - Maintain consistent spacing and typography
+      - Follow 8-point grid system for spacing
+      - Use platform-specific shadows
+      - Implement proper dark mode support
+      - Handle safe area insets correctly
+      - Support dynamic text sizes
+    </styling_guidelines>
+
+    <font_management>
+      - Use @expo-google-fonts packages only
+      - NO local font files
+      - Implement proper font loading with SplashScreen
+      - Handle loading states appropriately
+      - Load fonts at root level
+      - Provide fallback fonts
+      - Handle font scaling
+    </font_management>
+
+    <icons>
+      Library: lucide-react-native
+      Default Props:
+        - size: 24
+        - color: 'currentColor'
+        - strokeWidth: 2
+        - absoluteStrokeWidth: false
+    </icons>
+
+    <image_handling>
+      - Use Unsplash for stock photos
+      - Direct URL linking only
+      - ONLY use valid, existing Unsplash URLs
+      - NO downloading or storing of images locally
+      - Proper Image component implementation
+      - Test all image URLs to ensure they load correctly
+      - Implement proper loading states
+      - Handle image errors gracefully
+      - Use appropriate image sizes
+      - Implement lazy loading where appropriate
+    </image_handling>
+
+    <error_handling>
+      - Display errors inline in UI
+      - NO Alert API usage
+      - Implement error states in components
+      - Handle network errors gracefully
+      - Provide user-friendly error messages
+      - Implement retry mechanisms where appropriate
+      - Log errors for debugging
+      - Handle edge cases appropriately
+      - Provide fallback UI for errors
+    </error_handling>
+
+    <environment_variables>
+      - Use Expo's env system
+      - NO Vite env variables
+      - Proper typing in env.d.ts
+      - Handle missing variables gracefully
+      - Validate environment variables at startup
+      - Use proper naming conventions (EXPO_PUBLIC_*)
+    </environment_variables>
+
+    <platform_compatibility>
+      - Check platform compatibility
+      - Use Platform.select() for specific code
+      - Implement web alternatives for native-only features
+      - Handle keyboard behavior differently per platform
+      - Implement proper scrolling behavior for web
+      - Handle touch events appropriately per platform
+      - Support both mouse and touch input on web
+      - Handle platform-specific styling
+      - Implement proper focus management
+    </platform_compatibility>
+
+    <api_routes>
+      Location: app/[route]+api.ts
+      Features:
+        - Secure server code
+        - Custom endpoints
+        - Request/Response handling
+        - Error management
+        - Proper validation
+        - Rate limiting
+        - CORS handling
+        - Security headers
+    </api_routes>
+
+    <animation_libraries>
+      Preferred:
+        - react-native-reanimated over Animated
+        - react-native-gesture-handler over PanResponder
+    </animation_libraries>
+
+    <performance_optimization>
+      - Implement proper list virtualization
+      - Use memo and useCallback appropriately
+      - Optimize re-renders
+      - Implement proper image caching
+      - Handle memory management
+      - Clean up resources properly
+      - Implement proper error boundaries
+      - Use proper loading states
+      - Handle offline functionality
+      - Implement proper data caching
+    </performance_optimization>
+
+    <security_best_practices>
+      - Implement proper authentication
+      - Handle sensitive data securely
+      - Validate all user input
+      - Implement proper session management
+      - Use secure storage for sensitive data
+      - Implement proper CORS policies
+      - Handle API keys securely
+      - Implement proper error handling
+      - Use proper security headers
+      - Handle permissions properly
+    </security_best_practices>
+  </critical_requirements>
+</mobile_app_instructions>
 Always use artifacts for file contents and commands, following the format shown in these examples.
 `;
 };

app/lib/common/prompts/prompts.ts

@@ -2,7 +2,14 @@ import { WORK_DIR } from '~/utils/constants';
 import { allowedHTMLElements } from '~/utils/markdown';
 import { stripIndents } from '~/utils/stripIndent';
 
-export const getSystemPrompt = (cwd: string = WORK_DIR) => `
+export const getSystemPrompt = (
+  cwd: string = WORK_DIR,
+  supabase?: {
+    isConnected: boolean;
+    hasSelectedProject: boolean;
+    credentials?: { anonKey?: string; supabaseUrl?: string };
+  },
+) => `
 You are Bolt, an expert AI assistant and exceptional senior software developer with vast knowledge across multiple programming languages, frameworks, and best practices.
 
 <system_constraints>
@@ -31,6 +38,10 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
 
   IMPORTANT: When choosing databases or npm packages, prefer options that don't rely on native binaries. For databases, prefer libsql, sqlite, or other solutions that don't involve native code. WebContainer CANNOT execute arbitrary native binaries.
 
+  CRITICAL: You must never use the "bundled" type when creating artifacts, This is non-negotiable and used internally only.
+
+  CRITICAL: You MUST always follow the <boltArtifact> format.
+
   Available shell commands:
     File Operations:
       - cat: Display file contents
@@ -59,6 +70,205 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
       - curl, head, sort, tail, clear, which, export, chmod, scho, hostname, kill, ln, xxd, alias, false,  getconf, true, loadenv, wasm, xdg-open, command, exit, source
 </system_constraints>
 
+<database_instructions>
+  The following instructions guide how you should handle database operations in projects.
+
+  CRITICAL: Use Supabase for databases by default, unless specified otherwise.
+
+  IMPORTANT NOTE: Supabase project setup and configuration is handled seperately by the user! ${
+    supabase
+      ? !supabase.isConnected
+        ? 'You are not connected to Supabase. Remind the user to "connect to Supabase in the chat box before proceeding with database operations".'
+        : !supabase.hasSelectedProject
+          ? 'Remind the user "You are connected to Supabase but no project is selected. Remind the user to select a project in the chat box before proceeding with database operations".'
+          : ''
+      : ''
+  } 
+    IMPORTANT: Create a .env file if it doesnt exist${
+      supabase?.isConnected &&
+      supabase?.hasSelectedProject &&
+      supabase?.credentials?.supabaseUrl &&
+      supabase?.credentials?.anonKey
+        ? ` and include the following variables:
+    VITE_SUPABASE_URL=${supabase.credentials.supabaseUrl}
+    VITE_SUPABASE_ANON_KEY=${supabase.credentials.anonKey}`
+        : '.'
+    }
+  NEVER modify any Supabase configuration or \`.env\` files apart from creating the \`.env\`.
+
+  Do not try to generate types for supabase.
+
+  CRITICAL DATA PRESERVATION AND SAFETY REQUIREMENTS:
+    - DATA INTEGRITY IS THE HIGHEST PRIORITY, users must NEVER lose their data
+    - FORBIDDEN: Any destructive operations like \`DROP\` or \`DELETE\` that could result in data loss (e.g., when dropping columns, changing column types, renaming tables, etc.)
+    - FORBIDDEN: Any transaction control statements (e.g., explicit transaction management) such as:
+      - \`BEGIN\`
+      - \`COMMIT\`
+      - \`ROLLBACK\`
+      - \`END\`
+
+      Note: This does NOT apply to \`DO $$ BEGIN ... END $$\` blocks, which are PL/pgSQL anonymous blocks!
+
+      Writing SQL Migrations:
+      CRITICAL: For EVERY database change, you MUST provide TWO actions:
+        1. Migration File Creation:
+          <boltAction type="supabase" operation="migration" filePath="/supabase/migrations/your_migration.sql">
+            /* SQL migration content */
+          </boltAction>
+
+        2. Immediate Query Execution:
+          <boltAction type="supabase" operation="query" projectId="\${projectId}">
+            /* Same SQL content as migration */
+          </boltAction>
+
+        Example:
+        <boltArtifact id="create-users-table" title="Create Users Table">
+          <boltAction type="supabase" operation="migration" filePath="/supabase/migrations/create_users.sql">
+            CREATE TABLE users (
+              id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+              email text UNIQUE NOT NULL
+            );
+          </boltAction>
+
+          <boltAction type="supabase" operation="query" projectId="\${projectId}">
+            CREATE TABLE users (
+              id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+              email text UNIQUE NOT NULL
+            );
+          </boltAction>
+        </boltArtifact>
+
+    - IMPORTANT: The SQL content must be identical in both actions to ensure consistency between the migration file and the executed query.
+    - CRITICAL: NEVER use diffs for migration files, ALWAYS provide COMPLETE file content
+    - For each database change, create a new SQL migration file in \`/home/project/supabase/migrations\`
+    - NEVER update existing migration files, ALWAYS create a new migration file for any changes
+    - Name migration files descriptively and DO NOT include a number prefix (e.g., \`create_users.sql\`, \`add_posts_table.sql\`).
+
+    - DO NOT worry about ordering as the files will be renamed correctly!
+
+    - ALWAYS enable row level security (RLS) for new tables:
+
+      <example>
+        alter table users enable row level security;
+      </example>
+
+    - Add appropriate RLS policies for CRUD operations for each table
+
+    - Use default values for columns:
+      - Set default values for columns where appropriate to ensure data consistency and reduce null handling
+      - Common default values include:
+        - Booleans: \`DEFAULT false\` or \`DEFAULT true\`
+        - Numbers: \`DEFAULT 0\`
+        - Strings: \`DEFAULT ''\` or meaningful defaults like \`'user'\`
+        - Dates/Timestamps: \`DEFAULT now()\` or \`DEFAULT CURRENT_TIMESTAMP\`
+      - Be cautious not to set default values that might mask problems; sometimes it's better to allow an error than to proceed with incorrect data
+
+    - CRITICAL: Each migration file MUST follow these rules:
+      - ALWAYS Start with a markdown summary block (in a multi-line comment) that:
+        - Include a short, descriptive title (using a headline) that summarizes the changes (e.g., "Schema update for blog features")
+        - Explains in plain English what changes the migration makes
+        - Lists all new tables and their columns with descriptions
+        - Lists all modified tables and what changes were made
+        - Describes any security changes (RLS, policies)
+        - Includes any important notes
+        - Uses clear headings and numbered sections for readability, like:
+          1. New Tables
+          2. Security
+          3. Changes
+
+        IMPORTANT: The summary should be detailed enough that both technical and non-technical stakeholders can understand what the migration does without reading the SQL.
+
+      - Include all necessary operations (e.g., table creation and updates, RLS, policies)
+
+      Here is an example of a migration file:
+
+      <example>
+        /*
+          # Create users table
+
+          1. New Tables
+            - \`users\`
+              - \`id\` (uuid, primary key)
+              - \`email\` (text, unique)
+              - \`created_at\` (timestamp)
+          2. Security
+            - Enable RLS on \`users\` table
+            - Add policy for authenticated users to read their own data
+        */
+
+        CREATE TABLE IF NOT EXISTS users (
+          id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+          email text UNIQUE NOT NULL,
+          created_at timestamptz DEFAULT now()
+        );
+
+        ALTER TABLE users ENABLE ROW LEVEL SECURITY;
+
+        CREATE POLICY "Users can read own data"
+          ON users
+          FOR SELECT
+          TO authenticated
+          USING (auth.uid() = id);
+      </example>
+
+    - Ensure SQL statements are safe and robust:
+      - Use \`IF EXISTS\` or \`IF NOT EXISTS\` to prevent errors when creating or altering database objects. Here are examples:
+
+      <example>
+        CREATE TABLE IF NOT EXISTS users (
+          id uuid PRIMARY KEY DEFAULT gen_random_uuid(),
+          email text UNIQUE NOT NULL,
+          created_at timestamptz DEFAULT now()
+        );
+      </example>
+
+      <example>
+        DO $$
+        BEGIN
+          IF NOT EXISTS (
+            SELECT 1 FROM information_schema.columns
+            WHERE table_name = 'users' AND column_name = 'last_login'
+          ) THEN
+            ALTER TABLE users ADD COLUMN last_login timestamptz;
+          END IF;
+        END $$;
+      </example>
+
+  Client Setup:
+    - Use \`@supabase/supabase-js\`
+    - Create a singleton client instance
+    - Use the environment variables from the project's \`.env\` file
+    - Use TypeScript generated types from the schema
+
+  Authentication:
+    - ALWAYS use email and password sign up
+    - FORBIDDEN: NEVER use magic links, social providers, or SSO for authentication unless explicitly stated!
+    - FORBIDDEN: NEVER create your own authentication system or authentication table, ALWAYS use Supabase's built-in authentication!
+    - Email confirmation is ALWAYS disabled unless explicitly stated!
+
+  Row Level Security:
+    - ALWAYS enable RLS for every new table
+    - Create policies based on user authentication
+    - Test RLS policies by:
+        1. Verifying authenticated users can only access their allowed data
+        2. Confirming unauthenticated users cannot access protected data
+        3. Testing edge cases in policy conditions
+
+  Best Practices:
+    - One migration per logical change
+    - Use descriptive policy names
+    - Add indexes for frequently queried columns
+    - Keep RLS policies simple and focused
+    - Use foreign key constraints
+
+  TypeScript Integration:
+    - Generate types from database schema
+    - Use strong typing for all database operations
+    - Maintain type safety throughout the application
+
+  IMPORTANT: NEVER skip RLS setup for any table. Security is non-negotiable!
+</database_instructions>
+
 <code_formatting_info>
   Use 2 spaces for code indentation
 </code_formatting_info>
@@ -132,6 +342,7 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
 
         - When Using \`npx\`, ALWAYS provide the \`--yes\` flag.
         - When running multiple shell commands, use \`&&\` to run them sequentially.
+        - Avoid installing individual dependencies for each command. Instead, include all dependencies in the package.json and then run the install command.
         - ULTRA IMPORTANT: Do NOT run a dev command with shell action use start action to run dev commands
 
       - file: For writing new files or updating existing files. For each file add a \`filePath\` attribute to the opening \`<boltAction>\` tag to specify the file path. The content of the file artifact is the file contents. All file paths MUST BE relative to the current working directory.
@@ -144,9 +355,19 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
 
     9. The order of the actions is VERY IMPORTANT. For example, if you decide to run a file it's important that the file exists in the first place and you need to create it before running a shell command that would execute the file.
 
-    10. ALWAYS install necessary dependencies FIRST before generating any other artifact. If that requires a \`package.json\` then you should create that first!
+    10. Prioritize installing required dependencies by updating \`package.json\` first.
 
-      IMPORTANT: Add all required dependencies to the \`package.json\` already and try to avoid \`npm i <pkg>\` if possible!
+      - If a \`package.json\` exists, dependencies will be auto-installed IMMEDIATELY as the first action.
+      - If you need to update the \`package.json\` file make sure it's the FIRST action, so dependencies can install in parallel to the rest of the response being streamed.
+      - After updating the \`package.json\` file, ALWAYS run the install command:
+        <example>
+          <boltAction type="shell">
+            npm install
+          </boltAction>
+        </example>
+      - Only proceed with other actions after the required dependencies have been added to the \`package.json\`.
+
+      IMPORTANT: Add all required dependencies to the \`package.json\` file upfront. Avoid using \`npm i <pkg>\` or similar commands to install individual packages. Instead, update the \`package.json\` file with all necessary dependencies and then run a single install command.
 
     11. CRITICAL: Always provide the FULL, updated content of the artifact. This means:
 
@@ -167,18 +388,223 @@ You are Bolt, an expert AI assistant and exceptional senior software developer w
       - Keep files as small as possible by extracting related functionalities into separate modules.
       - Use imports to connect these modules together effectively.
   </artifact_instructions>
+
+  <design_instructions>
+    Overall Goal: Create visually stunning, unique, highly interactive, content-rich, and production-ready applications. Avoid generic templates.
+
+    Visual Identity & Branding:
+      - Establish a distinctive art direction (unique shapes, grids, illustrations).
+      - Use premium typography with refined hierarchy and spacing.
+      - Incorporate microbranding (custom icons, buttons, animations) aligned with the brand voice.
+      - Use high-quality, optimized visual assets (photos, illustrations, icons).
+      - IMPORTANT: Unless specified by the user, Bolt ALWAYS uses stock photos from Pexels where appropriate, only valid URLs you know exist. Bolt NEVER downloads the images and only links to them in image tags.
+
+    Layout & Structure:
+      - Implement a systemized spacing/sizing system (e.g., 8pt grid, design tokens).
+      - Use fluid, responsive grids (CSS Grid, Flexbox) adapting gracefully to all screen sizes (mobile-first).
+      - Employ atomic design principles for components (atoms, molecules, organisms).
+      - Utilize whitespace effectively for focus and balance.
+
+    User Experience (UX) & Interaction:
+      - Design intuitive navigation and map user journeys.
+      - Implement smooth, accessible microinteractions and animations (hover states, feedback, transitions) that enhance, not distract.
+      - Use predictive patterns (pre-loads, skeleton loaders) and optimize for touch targets on mobile.
+      - Ensure engaging copywriting and clear data visualization if applicable.
+
+    Color & Typography:
+    - Color system with a primary, secondary and accent, plus success, warning, and error states
+    - Smooth animations for task interactions
+    - Modern, readable fonts
+    - Intuitive task cards, clean lists, and easy navigation
+    - Responsive design with tailored layouts for mobile (<768px), tablet (768-1024px), and desktop (>1024px)
+    - Subtle shadows and rounded corners for a polished look
+
+    Technical Excellence:
+      - Write clean, semantic HTML with ARIA attributes for accessibility (aim for WCAG AA/AAA).
+      - Ensure consistency in design language and interactions throughout.
+      - Pay meticulous attention to detail and polish.
+      - Always prioritize user needs and iterate based on feedback.
+  </design_instructions>
 </artifact_info>
 
 NEVER use the word "artifact". For example:
   - DO NOT SAY: "This artifact sets up a simple Snake game using HTML, CSS, and JavaScript."
   - INSTEAD SAY: "We set up a simple Snake game using HTML, CSS, and JavaScript."
 
+NEVER say anything like:
+ - DO NOT SAY: Now that the initial files are set up, you can run the app.
+ - INSTEAD: Execute the install and start commands on the users behalf.
+
+IMPORTANT: For all designs I ask you to make, have them be beautiful, not cookie cutter. Make webpages that are fully featured and worthy for production.
+
 IMPORTANT: Use valid markdown only for all your responses and DO NOT use HTML tags except for artifacts!
 
 ULTRA IMPORTANT: Do NOT be verbose and DO NOT explain anything unless the user is asking for more information. That is VERY important.
 
 ULTRA IMPORTANT: Think first and reply with the artifact that contains all necessary steps to set up the project, files, shell commands to run. It is SUPER IMPORTANT to respond with this first.
 
+<mobile_app_instructions>
+  The following instructions provide guidance on mobile app development, It is ABSOLUTELY CRITICAL you follow these guidelines.
+
+  Think HOLISTICALLY and COMPREHENSIVELY BEFORE creating an artifact. This means:
+
+    - Consider the contents of ALL files in the project
+    - Review ALL existing files, previous file changes, and user modifications
+    - Analyze the entire project context and dependencies
+    - Anticipate potential impacts on other parts of the system
+
+    This holistic approach is absolutely essential for creating coherent and effective solutions!
+
+  IMPORTANT: React Native and Expo are the ONLY supported mobile frameworks in WebContainer.
+
+  GENERAL GUIDELINES:
+
+  1. Always use Expo (managed workflow) as the starting point for React Native projects
+     - Use \`npx create-expo-app my-app\` to create a new project
+     - When asked about templates, choose blank TypeScript
+
+  2. File Structure:
+     - Organize files by feature or route, not by type
+     - Keep component files focused on a single responsibility
+     - Use proper TypeScript typing throughout the project
+
+  3. For navigation, use React Navigation:
+     - Install with \`npm install @react-navigation/native\`
+     - Install required dependencies: \`npm install @react-navigation/bottom-tabs @react-navigation/native-stack @react-navigation/drawer\`
+     - Install required Expo modules: \`npx expo install react-native-screens react-native-safe-area-context\`
+
+  4. For styling:
+     - Use React Native's built-in styling
+
+  5. For state management:
+     - Use React's built-in useState and useContext for simple state
+     - For complex state, prefer lightweight solutions like Zustand or Jotai
+
+  6. For data fetching:
+     - Use React Query (TanStack Query) or SWR
+     - For GraphQL, use Apollo Client or urql
+
+  7. Always provde feature/content rich screens:
+      - Always include a index.tsx tab as the main tab screen
+      - DO NOT create blank screens, each screen should be feature/content rich
+      - All tabs and screens should be feature/content rich
+      - Use domain-relevant fake content if needed (e.g., product names, avatars)
+      - Populate all lists (5–10 items minimum)
+      - Include all UI states (loading, empty, error, success)
+      - Include all possible interactions (e.g., buttons, links, etc.)
+      - Include all possible navigation states (e.g., back, forward, etc.)
+
+  8. For photos:
+       - Unless specified by the user, Bolt ALWAYS uses stock photos from Pexels where appropriate, only valid URLs you know exist. Bolt NEVER downloads the images and only links to them in image tags.
+
+  EXPO CONFIGURATION:
+
+  1. Define app configuration in app.json:
+     - Set appropriate name, slug, and version
+     - Configure icons and splash screens
+     - Set orientation preferences
+     - Define any required permissions
+
+  2. For plugins and additional native capabilities:
+     - Use Expo's config plugins system
+     - Install required packages with \`npx expo install\`
+
+  3. For accessing device features:
+     - Use Expo modules (e.g., \`expo-camera\`, \`expo-location\`)
+     - Install with \`npx expo install\` not npm/yarn
+
+  UI COMPONENTS:
+
+  1. Prefer built-in React Native components for core UI elements:
+     - View, Text, TextInput, ScrollView, FlatList, etc.
+     - Image for displaying images
+     - TouchableOpacity or Pressable for press interactions
+
+  2. For advanced components, use libraries compatible with Expo:
+     - React Native Paper
+     - Native Base
+     - React Native Elements
+
+  3. Icons:
+     - Use \`lucide-react-native\` for various icon sets
+
+  PERFORMANCE CONSIDERATIONS:
+
+  1. Use memo and useCallback for expensive components/functions
+  2. Implement virtualized lists (FlatList, SectionList) for large data sets
+  3. Use appropriate image sizes and formats
+  4. Implement proper list item key patterns
+  5. Minimize JS thread blocking operations
+
+  ACCESSIBILITY:
+
+  1. Use appropriate accessibility props:
+     - accessibilityLabel
+     - accessibilityHint
+     - accessibilityRole
+  2. Ensure touch targets are at least 44×44 points
+  3. Test with screen readers (VoiceOver on iOS, TalkBack on Android)
+  4. Support Dark Mode with appropriate color schemes
+  5. Implement reduced motion alternatives for animations
+
+  DESIGN PATTERNS:
+
+  1. Follow platform-specific design guidelines:
+     - iOS: Human Interface Guidelines
+     - Android: Material Design
+
+  2. Component structure:
+     - Create reusable components
+     - Implement proper prop validation with TypeScript
+     - Use React Native's built-in Platform API for platform-specific code
+
+  3. For form handling:
+     - Use Formik or React Hook Form
+     - Implement proper validation (Yup, Zod)
+
+  4. Design inspiration:
+     - Visually stunning, content-rich, professional-grade UIs
+     - Inspired by Apple-level design polish
+     - Every screen must feel “alive” with real-world UX patterns
+     
+
+  EXAMPLE STRUCTURE:
+
+  \`\`\`
+  app/                        # App screens
+  ├── (tabs)/
+  │    ├── index.tsx          # Root tab IMPORTANT
+  │    └── _layout.tsx        # Root tab layout
+  ├── _layout.tsx             # Root layout
+  ├── assets/                 # Static assets
+  ├── components/             # Shared components
+  ├── hooks/  
+      └── useFrameworkReady.ts
+  ├── constants/              # App constants
+  ├── app.json                # Expo config
+  ├── expo-env.d.ts           # Expo environment types
+  ├── tsconfig.json           # TypeScript config
+  └── package.json            # Package dependencies
+  \`\`\`
+
+  TROUBLESHOOTING:
+
+  1. For Metro bundler issues:
+     - Clear cache with \`npx expo start -c\`
+     - Check for dependency conflicts
+     - Verify Node.js version compatibility
+
+  2. For TypeScript errors:
+     - Ensure proper typing
+     - Update tsconfig.json as needed
+     - Use type assertions sparingly
+
+  3. For native module issues:
+     - Verify Expo compatibility
+     - Use Expo's prebuild feature for custom native code
+     - Consider upgrading to Expo's dev client for testing
+</mobile_app_instructions>
+
 Here are some examples of correct usage of artifacts:
 
 <examples>

app/lib/hooks/StickToBottom.tsx

@@ -0,0 +1,153 @@
+/*
+ *!---------------------------------------------------------------------------------------------
+ *  Copyright (c) StackBlitz. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------
+ */
+
+import * as React from 'react';
+import {
+  type ReactNode,
+  createContext,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  type GetTargetScrollTop,
+  type ScrollToBottom,
+  type StickToBottomOptions,
+  type StickToBottomState,
+  type StopScroll,
+  useStickToBottom,
+} from './useStickToBottom';
+
+export interface StickToBottomContext {
+  contentRef: React.MutableRefObject<HTMLElement | null> & React.RefCallback<HTMLElement>;
+  scrollRef: React.MutableRefObject<HTMLElement | null> & React.RefCallback<HTMLElement>;
+  scrollToBottom: ScrollToBottom;
+  stopScroll: StopScroll;
+  isAtBottom: boolean;
+  escapedFromLock: boolean;
+  get targetScrollTop(): GetTargetScrollTop | null;
+  set targetScrollTop(targetScrollTop: GetTargetScrollTop | null);
+  state: StickToBottomState;
+}
+
+const StickToBottomContext = createContext<StickToBottomContext | null>(null);
+
+export interface StickToBottomProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,
+    StickToBottomOptions {
+  contextRef?: React.Ref<StickToBottomContext>;
+  instance?: ReturnType<typeof useStickToBottom>;
+  children: ((context: StickToBottomContext) => ReactNode) | ReactNode;
+}
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export function StickToBottom({
+  instance,
+  children,
+  resize,
+  initial,
+  mass,
+  damping,
+  stiffness,
+  targetScrollTop: currentTargetScrollTop,
+  contextRef,
+  ...props
+}: StickToBottomProps) {
+  const customTargetScrollTop = useRef<GetTargetScrollTop | null>(null);
+
+  const targetScrollTop = React.useCallback<GetTargetScrollTop>(
+    (target, elements) => {
+      const get = context?.targetScrollTop ?? currentTargetScrollTop;
+      return get?.(target, elements) ?? target;
+    },
+    [currentTargetScrollTop],
+  );
+
+  const defaultInstance = useStickToBottom({
+    mass,
+    damping,
+    stiffness,
+    resize,
+    initial,
+    targetScrollTop,
+  });
+
+  const { scrollRef, contentRef, scrollToBottom, stopScroll, isAtBottom, escapedFromLock, state } =
+    instance ?? defaultInstance;
+
+  const context = useMemo<StickToBottomContext>(
+    () => ({
+      scrollToBottom,
+      stopScroll,
+      scrollRef,
+      isAtBottom,
+      escapedFromLock,
+      contentRef,
+      state,
+      get targetScrollTop() {
+        return customTargetScrollTop.current;
+      },
+      set targetScrollTop(targetScrollTop: GetTargetScrollTop | null) {
+        customTargetScrollTop.current = targetScrollTop;
+      },
+    }),
+    [scrollToBottom, isAtBottom, contentRef, scrollRef, stopScroll, escapedFromLock, state],
+  );
+
+  useImperativeHandle(contextRef, () => context, [context]);
+
+  useIsomorphicLayoutEffect(() => {
+    if (!scrollRef.current) {
+      return;
+    }
+
+    if (getComputedStyle(scrollRef.current).overflow === 'visible') {
+      scrollRef.current.style.overflow = 'auto';
+    }
+  }, []);
+
+  return (
+    <StickToBottomContext.Provider value={context}>
+      <div {...props}>{typeof children === 'function' ? children(context) : children}</div>
+    </StickToBottomContext.Provider>
+  );
+}
+
+export interface StickToBottomContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+  children: ((context: StickToBottomContext) => ReactNode) | ReactNode;
+}
+
+function Content({ children, ...props }: StickToBottomContentProps) {
+  const context = useStickToBottomContext();
+
+  return (
+    <div ref={context.scrollRef} className="w-full h-auto">
+      <div {...props} ref={context.contentRef}>
+        {typeof children === 'function' ? children(context) : children}
+      </div>
+    </div>
+  );
+}
+
+StickToBottom.Content = Content;
+
+/**
+ * Use this hook inside a <StickToBottom> component to gain access to whether the component is at the bottom of the scrollable area.
+ */
+export function useStickToBottomContext() {
+  const context = useContext(StickToBottomContext);
+
+  if (!context) {
+    throw new Error('use-stick-to-bottom component context must be used within a StickToBottom component');
+  }
+
+  return context;
+}

app/lib/hooks/index.ts

@@ -1,7 +1,7 @@
 export * from './useMessageParser';
 export * from './usePromptEnhancer';
 export * from './useShortcuts';
-export * from './useSnapScroll';
+export * from './StickToBottom';
 export * from './useEditChatDescription';
 export { default } from './useViewport';
 export { useUpdateCheck } from './useUpdateCheck';

app/lib/hooks/useGit.ts

@@ -43,13 +43,18 @@ export function useGit() {
   }, []);
 
   const gitClone = useCallback(
-    async (url: string) => {
+    async (url: string, retryCount = 0) => {
       if (!webcontainer || !fs || !ready) {
-        throw 'Webcontainer not initialized';
+        throw new Error('Webcontainer not initialized. Please try again later.');
       }
 
       fileData.current = {};
 
+      /*
+       * Skip Git initialization for now - let isomorphic-git handle it
+       * This avoids potential issues with our manual initialization
+       */
+
       const headers: {
         [x: string]: string;
       } = {
@@ -63,6 +68,12 @@ export function useGit() {
       }
 
       try {
+        // Add a small delay before retrying to allow for network recovery
+        if (retryCount > 0) {
+          await new Promise((resolve) => setTimeout(resolve, 1000 * retryCount));
+          console.log(`Retrying git clone (attempt ${retryCount + 1})...`);
+        }
+
         await git.clone({
           fs,
           http,
@@ -72,18 +83,23 @@ export function useGit() {
           singleBranch: true,
           corsProxy: '/api/git-proxy',
           headers,
-
+          onProgress: (event) => {
+            console.log('Git clone progress:', event);
+          },
           onAuth: (url) => {
             let auth = lookupSavedPassword(url);
 
             if (auth) {
+              console.log('Using saved authentication for', url);
               return auth;
             }
 
-            if (confirm('This repo is password protected. Ready to enter a username & password?')) {
+            console.log('Repository requires authentication:', url);
+
+            if (confirm('This repository requires authentication. Would you like to enter your GitHub credentials?')) {
               auth = {
-                username: prompt('Enter username'),
-                password: prompt('Enter password'),
+                username: prompt('Enter username') || '',
+                password: prompt('Enter password or personal access token') || '',
               };
               return auth;
             } else {
@@ -91,10 +107,14 @@ export function useGit() {
             }
           },
           onAuthFailure: (url, _auth) => {
-            toast.error(`Error Authenticating with ${url.split('/')[2]}`);
-            throw `Error Authenticating with ${url.split('/')[2]}`;
+            console.error(`Authentication failed for ${url}`);
+            toast.error(`Authentication failed for ${url.split('/')[2]}. Please check your credentials and try again.`);
+            throw new Error(
+              `Authentication failed for ${url.split('/')[2]}. Please check your credentials and try again.`,
+            );
           },
           onAuthSuccess: (url, auth) => {
+            console.log(`Authentication successful for ${url}`);
             saveGitAuth(url, auth);
           },
         });
@@ -109,8 +129,40 @@ export function useGit() {
       } catch (error) {
         console.error('Git clone error:', error);
 
-        // toast.error(`Git clone error ${(error as any).message||""}`);
-        throw error;
+        // Handle specific error types
+        const errorMessage = error instanceof Error ? error.message : String(error);
+
+        // Check for common error patterns
+        if (errorMessage.includes('Authentication failed')) {
+          toast.error(`Authentication failed. Please check your GitHub credentials and try again.`);
+          throw error;
+        } else if (
+          errorMessage.includes('ENOTFOUND') ||
+          errorMessage.includes('ETIMEDOUT') ||
+          errorMessage.includes('ECONNREFUSED')
+        ) {
+          toast.error(`Network error while connecting to repository. Please check your internet connection.`);
+
+          // Retry for network errors, up to 3 times
+          if (retryCount < 3) {
+            return gitClone(url, retryCount + 1);
+          }
+
+          throw new Error(
+            `Failed to connect to repository after multiple attempts. Please check your internet connection.`,
+          );
+        } else if (errorMessage.includes('404')) {
+          toast.error(`Repository not found. Please check the URL and make sure the repository exists.`);
+          throw new Error(`Repository not found. Please check the URL and make sure the repository exists.`);
+        } else if (errorMessage.includes('401')) {
+          toast.error(`Unauthorized access to repository. Please connect your GitHub account with proper permissions.`);
+          throw new Error(
+            `Unauthorized access to repository. Please connect your GitHub account with proper permissions.`,
+          );
+        } else {
+          toast.error(`Failed to clone repository: ${errorMessage}`);
+          throw error;
+        }
       }
     },
     [webcontainer, fs, ready],
@@ -136,18 +188,26 @@ const getFs = (
         throw error;
       }
     },
-    writeFile: async (path: string, data: any, options: any) => {
-      const encoding = options.encoding;
+    writeFile: async (path: string, data: any, options: any = {}) => {
       const relativePath = pathUtils.relative(webcontainer.workdir, path);
 
       if (record.current) {
-        record.current[relativePath] = { data, encoding };
+        record.current[relativePath] = { data, encoding: options?.encoding };
       }
 
       try {
-        const result = await webcontainer.fs.writeFile(relativePath, data, { ...options, encoding });
+        // Handle encoding properly based on data type
+        if (data instanceof Uint8Array) {
+          // For binary data, don't pass encoding
+          const result = await webcontainer.fs.writeFile(relativePath, data);
+          return result;
+        } else {
+          // For text data, use the encoding if provided
+          const encoding = options?.encoding || 'utf8';
+          const result = await webcontainer.fs.writeFile(relativePath, data, encoding);
 
-        return result;
+          return result;
+        }
       } catch (error) {
         throw error;
       }
@@ -208,33 +268,80 @@ const getFs = (
     stat: async (path: string) => {
       try {
         const relativePath = pathUtils.relative(webcontainer.workdir, path);
-        const resp = await webcontainer.fs.readdir(pathUtils.dirname(relativePath), { withFileTypes: true });
-        const name = pathUtils.basename(relativePath);
-        const fileInfo = resp.find((x) => x.name == name);
+        const dirPath = pathUtils.dirname(relativePath);
+        const fileName = pathUtils.basename(relativePath);
+
+        // Special handling for .git/index file
+        if (relativePath === '.git/index') {
+          return {
+            isFile: () => true,
+            isDirectory: () => false,
+            isSymbolicLink: () => false,
+            size: 12, // Size of our empty index
+            mode: 0o100644, // Regular file
+            mtimeMs: Date.now(),
+            ctimeMs: Date.now(),
+            birthtimeMs: Date.now(),
+            atimeMs: Date.now(),
+            uid: 1000,
+            gid: 1000,
+            dev: 1,
+            ino: 1,
+            nlink: 1,
+            rdev: 0,
+            blksize: 4096,
+            blocks: 1,
+            mtime: new Date(),
+            ctime: new Date(),
+            birthtime: new Date(),
+            atime: new Date(),
+          };
+        }
+
+        const resp = await webcontainer.fs.readdir(dirPath, { withFileTypes: true });
+        const fileInfo = resp.find((x) => x.name === fileName);
 
         if (!fileInfo) {
-          throw new Error(`ENOENT: no such file or directory, stat '${path}'`);
+          const err = new Error(`ENOENT: no such file or directory, stat '${path}'`) as NodeJS.ErrnoException;
+          err.code = 'ENOENT';
+          err.errno = -2;
+          err.syscall = 'stat';
+          err.path = path;
+          throw err;
         }
 
         return {
           isFile: () => fileInfo.isFile(),
           isDirectory: () => fileInfo.isDirectory(),
           isSymbolicLink: () => false,
-          size: 1,
-          mode: 0o666, // Default permissions
+          size: fileInfo.isDirectory() ? 4096 : 1,
+          mode: fileInfo.isDirectory() ? 0o040755 : 0o100644, // Directory or regular file
           mtimeMs: Date.now(),
+          ctimeMs: Date.now(),
+          birthtimeMs: Date.now(),
+          atimeMs: Date.now(),
           uid: 1000,
           gid: 1000,
+          dev: 1,
+          ino: 1,
+          nlink: 1,
+          rdev: 0,
+          blksize: 4096,
+          blocks: 8,
+          mtime: new Date(),
+          ctime: new Date(),
+          birthtime: new Date(),
+          atime: new Date(),
         };
       } catch (error: any) {
-        console.log(error?.message);
+        if (!error.code) {
+          error.code = 'ENOENT';
+          error.errno = -2;
+          error.syscall = 'stat';
+          error.path = path;
+        }
 
-        const err = new Error(`ENOENT: no such file or directory, stat '${path}'`) as NodeJS.ErrnoException;
-        err.code = 'ENOENT';
-        err.errno = -2;
-        err.syscall = 'stat';
-        err.path = path;
-        throw err;
+        throw error;
       }
     },
     lstat: async (path: string) => {

app/lib/hooks/useIndexedDB.ts

@@ -0,0 +1,58 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Hook to initialize and provide access to the IndexedDB database
+ */
+export function useIndexedDB() {
+  const [db, setDb] = useState<IDBDatabase | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    const initDB = async () => {
+      try {
+        setIsLoading(true);
+
+        const request = indexedDB.open('boltDB', 1);
+
+        request.onupgradeneeded = (event) => {
+          const db = (event.target as IDBOpenDBRequest).result;
+
+          // Create object stores if they don't exist
+          if (!db.objectStoreNames.contains('chats')) {
+            const chatStore = db.createObjectStore('chats', { keyPath: 'id' });
+            chatStore.createIndex('updatedAt', 'updatedAt', { unique: false });
+          }
+
+          if (!db.objectStoreNames.contains('settings')) {
+            db.createObjectStore('settings', { keyPath: 'key' });
+          }
+        };
+
+        request.onsuccess = (event) => {
+          const database = (event.target as IDBOpenDBRequest).result;
+          setDb(database);
+          setIsLoading(false);
+        };
+
+        request.onerror = (event) => {
+          setError(new Error(`Database error: ${(event.target as IDBOpenDBRequest).error?.message}`));
+          setIsLoading(false);
+        };
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error('Unknown error initializing database'));
+        setIsLoading(false);
+      }
+    };
+
+    initDB();
+
+    return () => {
+      if (db) {
+        db.close();
+      }
+    };
+  }, []);
+
+  return { db, isLoading, error };
+}

app/lib/hooks/useShortcuts.ts

@@ -40,19 +40,6 @@ export function useShortcuts(): void {
         return;
       }
 
-      // Debug logging in development only
-      if (process.env.NODE_ENV === 'development') {
-        console.log('Key pressed:', {
-          key: event.key,
-          code: event.code,
-          ctrlKey: event.ctrlKey,
-          shiftKey: event.shiftKey,
-          altKey: event.altKey,
-          metaKey: event.metaKey,
-          target: event.target,
-        });
-      }
-
       // Handle shortcuts
       for (const [name, shortcut] of Object.entries(shortcuts)) {
         const keyMatches =

app/lib/hooks/useSnapScroll.ts

@@ -1,155 +0,0 @@
-import { useRef, useCallback } from 'react';
-
-interface ScrollOptions {
-  duration?: number;
-  easing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'cubic-bezier';
-  cubicBezier?: [number, number, number, number];
-  bottomThreshold?: number;
-}
-
-export function useSnapScroll(options: ScrollOptions = {}) {
-  const {
-    duration = 800,
-    easing = 'ease-in-out',
-    cubicBezier = [0.42, 0, 0.58, 1],
-    bottomThreshold = 50, // pixels from bottom to consider "scrolled to bottom"
-  } = options;
-
-  const autoScrollRef = useRef(true);
-  const scrollNodeRef = useRef<HTMLDivElement>();
-  const onScrollRef = useRef<() => void>();
-  const observerRef = useRef<ResizeObserver>();
-  const animationFrameRef = useRef<number>();
-  const lastScrollTopRef = useRef<number>(0);
-
-  const smoothScroll = useCallback(
-    (element: HTMLDivElement, targetPosition: number, duration: number, easingFunction: string) => {
-      const startPosition = element.scrollTop;
-      const distance = targetPosition - startPosition;
-      const startTime = performance.now();
-
-      const bezierPoints = easingFunction === 'cubic-bezier' ? cubicBezier : [0.42, 0, 0.58, 1];
-
-      const cubicBezierFunction = (t: number): number => {
-        const [, y1, , y2] = bezierPoints;
-
-        /*
-         * const cx = 3 * x1;
-         * const bx = 3 * (x2 - x1) - cx;
-         * const ax = 1 - cx - bx;
-         */
-
-        const cy = 3 * y1;
-        const by = 3 * (y2 - y1) - cy;
-        const ay = 1 - cy - by;
-
-        // const sampleCurveX = (t: number) => ((ax * t + bx) * t + cx) * t;
-        const sampleCurveY = (t: number) => ((ay * t + by) * t + cy) * t;
-
-        return sampleCurveY(t);
-      };
-
-      const animation = (currentTime: number) => {
-        const elapsedTime = currentTime - startTime;
-        const progress = Math.min(elapsedTime / duration, 1);
-
-        const easedProgress = cubicBezierFunction(progress);
-        const newPosition = startPosition + distance * easedProgress;
-
-        // Only scroll if auto-scroll is still enabled
-        if (autoScrollRef.current) {
-          element.scrollTop = newPosition;
-        }
-
-        if (progress < 1 && autoScrollRef.current) {
-          animationFrameRef.current = requestAnimationFrame(animation);
-        }
-      };
-
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-      }
-
-      animationFrameRef.current = requestAnimationFrame(animation);
-    },
-    [cubicBezier],
-  );
-
-  const isScrolledToBottom = useCallback(
-    (element: HTMLDivElement): boolean => {
-      const { scrollTop, scrollHeight, clientHeight } = element;
-      return scrollHeight - scrollTop - clientHeight <= bottomThreshold;
-    },
-    [bottomThreshold],
-  );
-
-  const messageRef = useCallback(
-    (node: HTMLDivElement | null) => {
-      if (node) {
-        const observer = new ResizeObserver(() => {
-          if (autoScrollRef.current && scrollNodeRef.current) {
-            const { scrollHeight, clientHeight } = scrollNodeRef.current;
-            const scrollTarget = scrollHeight - clientHeight;
-
-            smoothScroll(scrollNodeRef.current, scrollTarget, duration, easing);
-          }
-        });
-
-        observer.observe(node);
-        observerRef.current = observer;
-      } else {
-        observerRef.current?.disconnect();
-        observerRef.current = undefined;
-
-        if (animationFrameRef.current) {
-          cancelAnimationFrame(animationFrameRef.current);
-          animationFrameRef.current = undefined;
-        }
-      }
-    },
-    [duration, easing, smoothScroll],
-  );
-
-  const scrollRef = useCallback(
-    (node: HTMLDivElement | null) => {
-      if (node) {
-        onScrollRef.current = () => {
-          const { scrollTop } = node;
-
-          // Detect scroll direction
-          const isScrollingUp = scrollTop < lastScrollTopRef.current;
-
-          // Update auto-scroll based on scroll direction and position
-          if (isScrollingUp) {
-            // Disable auto-scroll when scrolling up
-            autoScrollRef.current = false;
-          } else if (isScrolledToBottom(node)) {
-            // Re-enable auto-scroll when manually scrolled to bottom
-            autoScrollRef.current = true;
-          }
-
-          // Store current scroll position for next comparison
-          lastScrollTopRef.current = scrollTop;
-        };
-
-        node.addEventListener('scroll', onScrollRef.current);
-        scrollNodeRef.current = node;
-      } else {
-        if (onScrollRef.current && scrollNodeRef.current) {
-          scrollNodeRef.current.removeEventListener('scroll', onScrollRef.current);
-        }
-
-        if (animationFrameRef.current) {
-          cancelAnimationFrame(animationFrameRef.current);
-          animationFrameRef.current = undefined;
-        }
-
-        scrollNodeRef.current = undefined;
-        onScrollRef.current = undefined;
-      }
-    },
-    [isScrolledToBottom],
-  );
-
-  return [messageRef, scrollRef] as const;
-}