Fresh start without binaries

.depcheckrc.json

@@ -0,0 +1,28 @@
+{
+  "ignoreMatches": [
+    "@types/*",
+    "eslint-*",
+    "prettier*",
+    "husky",
+    "rimraf",
+    "vitest",
+    "vite",
+    "typescript",
+    "wrangler",
+    "electron*"
+  ],
+  "ignoreDirs": [
+    "dist",
+    "build",
+    "node_modules",
+    ".git"
+  ],
+  "skipMissing": false,
+  "ignorePatterns": [
+    "*.d.ts",
+    "*.test.ts",
+    "*.test.tsx",
+    "*.spec.ts",
+    "*.spec.tsx"
+  ]
+}

.dockerignore

@@ -0,0 +1,26 @@
+# Ignore Git and GitHub files
+.git
+.github/
+
+# Ignore Husky configuration files
+.husky/
+
+# Ignore documentation and metadata files
+CONTRIBUTING.md
+LICENSE
+README.md
+
+# Ignore environment examples and sensitive info
+.env
+*.local
+*.example
+
+# Ignore node modules, logs and cache files
+**/*.log
+**/node_modules
+**/dist
+**/build
+**/.cache
+logs
+dist-ssr
+.DS_Store

.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 120
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.env.example

@@ -0,0 +1,221 @@
+# ======================================
+# Environment Variables for Bolt.diy
+# ======================================
+# Copy this file to .env.local and fill in your API keys
+# See README.md for setup instructions
+
+# ======================================
+# AI PROVIDER API KEYS
+# ======================================
+
+# Anthropic Claude
+# Get your API key from: https://console.anthropic.com/
+ANTHROPIC_API_KEY=your_anthropic_api_key_here
+
+# Cerebras (High-performance inference)
+# Get your API key from: https://cloud.cerebras.ai/settings
+CEREBRAS_API_KEY=your_cerebras_api_key_here
+
+# Fireworks AI (Fast inference with FireAttention engine)
+# Get your API key from: https://fireworks.ai/api-keys
+FIREWORKS_API_KEY=your_fireworks_api_key_here
+
+# OpenAI GPT models
+# Get your API key from: https://platform.openai.com/api-keys
+OPENAI_API_KEY=your_openai_api_key_here
+
+# GitHub Models (OpenAI models hosted by GitHub)
+# Get your Personal Access Token from: https://github.com/settings/tokens
+# - Select "Fine-grained tokens" 
+# - Set repository access to "All repositories" 
+# - Enable "GitHub Models" permission
+GITHUB_API_KEY=github_pat_your_personal_access_token_here
+
+# Perplexity AI (Search-augmented models)
+# Get your API key from: https://www.perplexity.ai/settings/api
+PERPLEXITY_API_KEY=your_perplexity_api_key_here
+
+# DeepSeek
+# Get your API key from: https://platform.deepseek.com/api_keys
+DEEPSEEK_API_KEY=your_deepseek_api_key_here
+
+# Google Gemini
+# Get your API key from: https://makersuite.google.com/app/apikey
+GOOGLE_GENERATIVE_AI_API_KEY=your_google_gemini_api_key_here
+
+# Cohere
+# Get your API key from: https://dashboard.cohere.ai/api-keys
+COHERE_API_KEY=your_cohere_api_key_here
+
+# Groq (Fast inference)
+# Get your API key from: https://console.groq.com/keys
+GROQ_API_KEY=your_groq_api_key_here
+
+# Mistral
+# Get your API key from: https://console.mistral.ai/api-keys/
+MISTRAL_API_KEY=your_mistral_api_key_here
+
+# Together AI
+# Get your API key from: https://api.together.xyz/settings/api-keys
+TOGETHER_API_KEY=your_together_api_key_here
+
+# X.AI (Elon Musk's company)
+# Get your API key from: https://console.x.ai/
+XAI_API_KEY=your_xai_api_key_here
+
+# Moonshot AI (Kimi models)
+# Get your API key from: https://platform.moonshot.ai/console/api-keys
+MOONSHOT_API_KEY=your_moonshot_api_key_here
+
+# Z.AI (GLM models with JWT authentication)
+# Get your API key from: https://open.bigmodel.cn/usercenter/apikeys
+ZAI_API_KEY=your_zai_api_key_here
+
+# Hugging Face
+# Get your API key from: https://huggingface.co/settings/tokens
+HuggingFace_API_KEY=your_huggingface_api_key_here
+
+# Hyperbolic
+# Get your API key from: https://app.hyperbolic.xyz/settings
+HYPERBOLIC_API_KEY=your_hyperbolic_api_key_here
+
+# OpenRouter (Meta routing for multiple providers)
+# Get your API key from: https://openrouter.ai/keys
+OPEN_ROUTER_API_KEY=your_openrouter_api_key_here
+
+# ======================================
+# CUSTOM PROVIDER BASE URLS (Optional)
+# ======================================
+
+# Ollama (Local models)
+# DON'T USE http://localhost:11434 due to IPv6 issues
+# USE: http://127.0.0.1:11434
+OLLAMA_API_BASE_URL=http://127.0.0.1:11434
+
+# OpenAI-like API (Compatible providers)
+OPENAI_LIKE_API_BASE_URL=your_openai_like_base_url_here
+OPENAI_LIKE_API_KEY=your_openai_like_api_key_here
+
+# Together AI Base URL
+TOGETHER_API_BASE_URL=your_together_base_url_here
+
+# Hyperbolic Base URL
+HYPERBOLIC_API_BASE_URL=https://api.hyperbolic.xyz/v1/chat/completions
+
+# LMStudio (Local models)
+# Make sure to enable CORS in LMStudio
+# DON'T USE http://localhost:1234 due to IPv6 issues
+# USE: http://127.0.0.1:1234
+LMSTUDIO_API_BASE_URL=http://127.0.0.1:1234
+
+# ======================================
+# CLOUD SERVICES CONFIGURATION
+# ======================================
+
+# AWS Bedrock Configuration (JSON format)
+# Get your credentials from: https://console.aws.amazon.com/iam/home
+# Example: {"region": "us-east-1", "accessKeyId": "yourAccessKeyId", "secretAccessKey": "yourSecretAccessKey"}
+AWS_BEDROCK_CONFIG=your_aws_bedrock_config_json_here
+
+# ======================================
+# GITHUB INTEGRATION
+# ======================================
+
+# GitHub Personal Access Token
+# Get from: https://github.com/settings/tokens
+# Used for importing/cloning repositories and accessing private repos
+VITE_GITHUB_ACCESS_TOKEN=your_github_personal_access_token_here
+
+# GitHub Token Type ('classic' or 'fine-grained')
+VITE_GITHUB_TOKEN_TYPE=classic
+
+# ======================================
+# GITLAB INTEGRATION
+# ======================================
+
+# GitLab Personal Access Token
+# Get your GitLab Personal Access Token here:
+# https://gitlab.com/-/profile/personal_access_tokens
+#
+# This token is used for:
+# 1. Importing/cloning GitLab repositories
+# 2. Accessing private projects
+# 3. Creating/updating branches
+# 4. Creating/updating commits and pushing code
+# 5. Creating new GitLab projects via the API
+#
+# Make sure your token has the following scopes:
+# - api (for full API access including project creation and commits)
+# - read_repository (to clone/import repositories)
+# - write_repository (to push commits and update branches)
+VITE_GITLAB_ACCESS_TOKEN=your_gitlab_personal_access_token_here
+
+# Set the GitLab instance URL (e.g., https://gitlab.com or your self-hosted domain)
+VITE_GITLAB_URL=https://gitlab.com
+
+# GitLab token type should be 'personal-access-token'
+VITE_GITLAB_TOKEN_TYPE=personal-access-token
+
+# ======================================
+# VERCEL INTEGRATION
+# ======================================
+
+# Vercel Access Token
+# Get your access token from: https://vercel.com/account/tokens
+# This token is used for:
+# 1. Deploying projects to Vercel
+# 2. Managing Vercel projects and deployments
+# 3. Accessing project analytics and logs
+VITE_VERCEL_ACCESS_TOKEN=your_vercel_access_token_here
+
+# ======================================
+# NETLIFY INTEGRATION
+# ======================================
+
+# Netlify Access Token
+# Get your access token from: https://app.netlify.com/user/applications
+# This token is used for:
+# 1. Deploying sites to Netlify
+# 2. Managing Netlify sites and deployments
+# 3. Accessing build logs and analytics
+VITE_NETLIFY_ACCESS_TOKEN=your_netlify_access_token_here
+
+# ======================================
+# SUPABASE INTEGRATION
+# ======================================
+
+# Supabase Project Configuration
+# Get your project details from: https://supabase.com/dashboard
+# Select your project → Settings → API
+VITE_SUPABASE_URL=your_supabase_project_url_here
+VITE_SUPABASE_ANON_KEY=your_supabase_anon_key_here
+
+# Supabase Access Token (for management operations)
+# Generate from: https://supabase.com/dashboard/account/tokens
+VITE_SUPABASE_ACCESS_TOKEN=your_supabase_access_token_here
+
+# ======================================
+# DEVELOPMENT SETTINGS
+# ======================================
+
+# Development Mode
+NODE_ENV=development
+
+# Application Port (optional, defaults to 5173 for development)
+PORT=5173
+
+# Logging Level (debug, info, warn, error)
+VITE_LOG_LEVEL=debug
+
+# Default Context Window Size (for local models)
+DEFAULT_NUM_CTX=32768
+
+# ======================================
+# SETUP INSTRUCTIONS
+# ======================================
+# 1. Copy this file to .env.local: cp .env.example .env.local
+# 2. Fill in the API keys for the services you want to use
+# 3. All service integration keys use VITE_ prefix for auto-connection
+# 4. Restart your development server: pnpm run dev
+# 5. Services will auto-connect on startup if tokens are provided
+# 6. Go to Settings > Service tabs to manage connections manually if needed

.env.production

@@ -0,0 +1,143 @@
+# 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=
+SOOL_API_KEY=sk_live_d9b93ba6c3d1e146f7f31b8f1c802df959755ec4b5ea6d4e
+
+# 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=
+
+# ======================================
+# SERVICE INTEGRATIONS
+# ======================================
+
+# GitLab Personal Access Token
+# Get your GitLab Personal Access Token here:
+# https://gitlab.com/-/profile/personal_access_tokens
+# Required scopes: api, read_repository, write_repository
+VITE_GITLAB_ACCESS_TOKEN=
+
+# GitLab instance URL (e.g., https://gitlab.com or your self-hosted domain)
+VITE_GITLAB_URL=https://gitlab.com
+
+# GitLab token type
+VITE_GITLAB_TOKEN_TYPE=personal-access-token
+
+# Vercel Access Token
+# Get your access token from: https://vercel.com/account/tokens
+VITE_VERCEL_ACCESS_TOKEN=
+
+# Netlify Access Token
+# Get your access token from: https://app.netlify.com/user/applications
+VITE_NETLIFY_ACCESS_TOKEN=
+
+# Supabase Configuration
+# Get your project details from: https://supabase.com/dashboard
+VITE_SUPABASE_URL=
+VITE_SUPABASE_ANON_KEY=
+VITE_SUPABASE_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=

.github/CODEOWNERS

@@ -0,0 +1,30 @@
+# Code Owners for bolt.diy
+# These users/teams will automatically be requested for review when files are modified
+
+# Global ownership - repository maintainers
+* @stackblitz-labs/bolt-maintainers
+
+# GitHub workflows and CI/CD configuration - require maintainer review
+/.github/ @stackblitz-labs/bolt-maintainers
+/package.json @stackblitz-labs/bolt-maintainers
+/pnpm-lock.yaml @stackblitz-labs/bolt-maintainers
+
+# Security-sensitive configurations - require maintainer review
+/.env* @stackblitz-labs/bolt-maintainers
+/wrangler.toml @stackblitz-labs/bolt-maintainers  
+/Dockerfile @stackblitz-labs/bolt-maintainers
+/docker-compose.yaml @stackblitz-labs/bolt-maintainers
+
+# Core application architecture - require maintainer review
+/app/lib/.server/ @stackblitz-labs/bolt-maintainers
+/app/routes/api.* @stackblitz-labs/bolt-maintainers
+
+# Build and deployment configuration - require maintainer review
+/vite*.config.ts @stackblitz-labs/bolt-maintainers
+/tsconfig.json @stackblitz-labs/bolt-maintainers
+/uno.config.ts @stackblitz-labs/bolt-maintainers
+/eslint.config.mjs @stackblitz-labs/bolt-maintainers
+
+# Documentation (optional review)
+/*.md
+/docs/

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,73 @@
+name: 'Bug report'
+description: Create a report to help us improve
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thank you for reporting an issue :pray:.
+
+        This issue tracker is for bugs and issues found with [Bolt.diy](https://bolt.diy).
+        If you experience issues related to WebContainer, please file an issue in the official [StackBlitz WebContainer repo](https://github.com/stackblitz/webcontainer-core).
+
+        The more information you fill in, the better we can help you.
+  - type: textarea
+    id: description
+    attributes:
+      label: Describe the bug
+      description: Provide a clear and concise description of what you're running into.
+    validations:
+      required: true
+  - type: input
+    id: link
+    attributes:
+      label: Link to the Bolt URL that caused the error
+      description: Please do not delete it after reporting!
+    validations:
+      required: true
+  - type: textarea
+    id: steps
+    attributes:
+      label: Steps to reproduce
+      description: Describe the steps we have to take to reproduce the behavior.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+    validations:
+      required: true
+  - type: textarea
+    id: expected
+    attributes:
+      label: Expected behavior
+      description: Provide a clear and concise description of what you expected to happen.
+    validations:
+      required: true
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screen Recording / Screenshot
+      description: If applicable, **please include a screen recording** (preferably) or screenshot showcasing the issue. This will assist us in resolving your issue <u>quickly</u>.
+  - type: textarea
+    id: platform
+    attributes:
+      label: Platform
+      value: |
+        - OS: [e.g. macOS, Windows, Linux]
+        - Browser: [e.g. Chrome, Safari, Firefox]
+        - Version: [e.g. 91.1]
+  - type: input
+    id: provider
+    attributes:
+      label: Provider Used
+      description: Tell us the provider you are using.
+  - type: input
+    id: model
+    attributes:
+      label: Model Used
+      description: Tell us the model you are using.
+  - type: textarea
+    id: additional
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,8 @@
+blank_issues_enabled: false
+contact_links:
+  - name: Bolt.new related issues
+    url: https://github.com/stackblitz/bolt.new/issues/new/choose
+    about: Report issues related to Bolt.new (not Bolt.diy)
+  - name: Chat
+    url: https://thinktank.ottomator.ai
+    about: Ask questions and discuss with other Bolt.diy users.

.github/actions/setup-and-build/action.yaml

@@ -0,0 +1,32 @@
+name: Setup and Build
+description: Generic setup action
+inputs:
+  pnpm-version:
+    required: false
+    type: string
+    default: '9.14.4'
+  node-version:
+    required: false
+    type: string
+    default: '20.18.0'
+
+runs:
+  using: composite
+
+  steps:
+    - uses: pnpm/action-setup@v4
+      with:
+        version: ${{ inputs.pnpm-version }}
+        run_install: false
+
+    - name: Set Node.js version to ${{ inputs.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ inputs.node-version }}
+        cache: pnpm
+
+    - name: Install dependencies and build project
+      shell: bash
+      run: |
+        pnpm install
+        pnpm run build

.github/scripts/generate-changelog.sh

@@ -0,0 +1,261 @@
+#!/usr/bin/env bash
+
+# Ensure we're running in bash
+if [ -z "$BASH_VERSION" ]; then
+    echo "This script requires bash. Please run with: bash $0" >&2
+    exit 1
+fi
+
+# Ensure we're using bash 4.0 or later for associative arrays
+if ((BASH_VERSINFO[0] < 4)); then
+    echo "This script requires bash version 4 or later" >&2
+    echo "Current bash version: $BASH_VERSION" >&2
+    exit 1
+fi
+
+# Set default values for required environment variables if not in GitHub Actions
+if [ -z "$GITHUB_ACTIONS" ]; then
+    : "${GITHUB_SERVER_URL:=https://github.com}"
+    : "${GITHUB_REPOSITORY:=stackblitz-labs/bolt.diy}"
+    : "${GITHUB_OUTPUT:=/tmp/github_output}"
+    touch "$GITHUB_OUTPUT"
+
+    # Running locally
+    echo "Running locally - checking for upstream remote..."
+    MAIN_REMOTE="origin"
+    if git remote -v | grep -q "upstream"; then
+        MAIN_REMOTE="upstream"
+    fi
+    MAIN_BRANCH="main"  # or "master" depending on your repository
+    
+    # Ensure we have latest tags
+    git fetch ${MAIN_REMOTE} --tags
+    
+    # Use the remote reference for git log
+    GITLOG_REF="${MAIN_REMOTE}/${MAIN_BRANCH}"
+else
+    # Running in GitHub Actions
+    GITLOG_REF="HEAD"
+fi
+
+# Get the latest tag
+LATEST_TAG=$(git describe --tags --abbrev=0 2>/dev/null || echo "")
+
+# Start changelog file
+echo "# 🚀 Release v${NEW_VERSION}" > changelog.md
+echo "" >> changelog.md
+echo "## What's Changed 🌟" >> changelog.md
+echo "" >> changelog.md
+
+if [ -z "$LATEST_TAG" ]; then
+    echo "### 🎉 First Release" >> changelog.md
+    echo "" >> changelog.md
+    echo "Exciting times! This marks our first release. Thanks to everyone who contributed! 🙌" >> changelog.md
+    echo "" >> changelog.md
+    COMPARE_BASE="$(git rev-list --max-parents=0 HEAD)"
+else
+    echo "### 🔄 Changes since $LATEST_TAG" >> changelog.md
+    echo "" >> changelog.md
+    COMPARE_BASE="$LATEST_TAG"
+fi
+
+# Function to extract conventional commit type and associated emoji
+get_commit_type() {
+    local msg="$1"
+    if [[ $msg =~ ^feat(\(.+\))?:|^feature(\(.+\))?: ]]; then echo "✨ Features"
+    elif [[ $msg =~ ^fix(\(.+\))?: ]]; then echo "🐛 Bug Fixes"
+    elif [[ $msg =~ ^docs(\(.+\))?: ]]; then echo "📚 Documentation"
+    elif [[ $msg =~ ^style(\(.+\))?: ]]; then echo "💎 Styles"
+    elif [[ $msg =~ ^refactor(\(.+\))?: ]]; then echo "♻️ Code Refactoring"
+    elif [[ $msg =~ ^perf(\(.+\))?: ]]; then echo "⚡ Performance Improvements"
+    elif [[ $msg =~ ^test(\(.+\))?: ]]; then echo "🧪 Tests"
+    elif [[ $msg =~ ^build(\(.+\))?: ]]; then echo "🛠️ Build System"
+    elif [[ $msg =~ ^ci(\(.+\))?: ]]; then echo "⚙️ CI"
+    elif [[ $msg =~ ^chore(\(.+\))?: ]]; then echo ""  # Skip chore commits
+    else echo "🔍 Other Changes"  # Default category with emoji
+    fi
+}
+
+# Initialize associative arrays
+declare -A CATEGORIES
+declare -A COMMITS_BY_CATEGORY
+declare -A ALL_AUTHORS
+declare -A NEW_CONTRIBUTORS
+
+# Get all historical authors before the compare base
+while IFS= read -r author; do
+    ALL_AUTHORS["$author"]=1
+done < <(git log "${COMPARE_BASE}" --pretty=format:"%ae" | sort -u)
+
+# Process all commits since last tag
+while IFS= read -r commit_line; do
+    if [[ ! $commit_line =~ ^[a-f0-9]+\| ]]; then
+        echo "WARNING: Skipping invalid commit line format: $commit_line" >&2
+        continue
+    fi
+    
+    HASH=$(echo "$commit_line" | cut -d'|' -f1)
+    COMMIT_MSG=$(echo "$commit_line" | cut -d'|' -f2)
+    BODY=$(echo "$commit_line" | cut -d'|' -f3)
+    # Skip if hash doesn't match the expected format
+    if [[ ! $HASH =~ ^[a-f0-9]{40}$ ]]; then
+        continue
+    fi
+
+    HASH=$(echo "$commit_line" | cut -d'|' -f1)
+    COMMIT_MSG=$(echo "$commit_line" | cut -d'|' -f2)
+    BODY=$(echo "$commit_line" | cut -d'|' -f3)
+
+    
+    # Validate hash format
+    if [[ ! $HASH =~ ^[a-f0-9]{40}$ ]]; then
+        echo "WARNING: Invalid commit hash format: $HASH" >&2
+        continue
+    fi
+    
+    # Check if it's a merge commit
+    if [[ $COMMIT_MSG =~ Merge\ pull\ request\ #([0-9]+) ]]; then
+        # echo "Processing as merge commit" >&2
+        PR_NUM="${BASH_REMATCH[1]}"
+        
+        # Extract the PR title from the merge commit body
+        PR_TITLE=$(echo "$BODY" | grep -v "^Merge pull request" | head -n 1)
+        
+        # Only process if it follows conventional commit format
+        CATEGORY=$(get_commit_type "$PR_TITLE")
+        
+        if [ -n "$CATEGORY" ]; then  # Only process if it's a conventional commit
+            # Get PR author's GitHub username
+            GITHUB_USERNAME=$(gh pr view "$PR_NUM" --json author --jq '.author.login')
+            
+            if [ -n "$GITHUB_USERNAME" ]; then
+                # Check if this is a first-time contributor
+                AUTHOR_EMAIL=$(git show -s --format='%ae' "$HASH")
+                if [ -z "${ALL_AUTHORS[$AUTHOR_EMAIL]}" ]; then
+                    NEW_CONTRIBUTORS["$GITHUB_USERNAME"]=1
+                    ALL_AUTHORS["$AUTHOR_EMAIL"]=1
+                fi
+
+                CATEGORIES["$CATEGORY"]=1
+                COMMITS_BY_CATEGORY["$CATEGORY"]+="* ${PR_TITLE#*: } ([#$PR_NUM](${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/pull/$PR_NUM)) by @$GITHUB_USERNAME"$'\n'
+            else
+                COMMITS_BY_CATEGORY["$CATEGORY"]+="* ${PR_TITLE#*: } ([#$PR_NUM](${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/pull/$PR_NUM))"$'\n'
+            fi
+        fi
+    # Check if it's a squash merge by looking for (#NUMBER) pattern
+    elif [[ $COMMIT_MSG =~ \(#([0-9]+)\) ]]; then
+        # echo "Processing as squash commit" >&2
+        PR_NUM="${BASH_REMATCH[1]}"
+        
+        # Only process if it follows conventional commit format
+        CATEGORY=$(get_commit_type "$COMMIT_MSG")
+        
+        if [ -n "$CATEGORY" ]; then  # Only process if it's a conventional commit
+            # Get PR author's GitHub username
+            GITHUB_USERNAME=$(gh pr view "$PR_NUM" --json author --jq '.author.login')
+            
+            if [ -n "$GITHUB_USERNAME" ]; then
+                # Check if this is a first-time contributor
+                AUTHOR_EMAIL=$(git show -s --format='%ae' "$HASH")
+                if [ -z "${ALL_AUTHORS[$AUTHOR_EMAIL]}" ]; then
+                    NEW_CONTRIBUTORS["$GITHUB_USERNAME"]=1
+                    ALL_AUTHORS["$AUTHOR_EMAIL"]=1
+                fi
+
+                CATEGORIES["$CATEGORY"]=1
+                COMMIT_TITLE=${COMMIT_MSG%% (#*}  # Remove the PR number suffix
+                COMMIT_TITLE=${COMMIT_TITLE#*: }  # Remove the type prefix
+                COMMITS_BY_CATEGORY["$CATEGORY"]+="* $COMMIT_TITLE ([#$PR_NUM](${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/pull/$PR_NUM)) by @$GITHUB_USERNAME"$'\n'
+            else
+                COMMIT_TITLE=${COMMIT_MSG%% (#*}  # Remove the PR number suffix
+                COMMIT_TITLE=${COMMIT_TITLE#*: }  # Remove the type prefix
+                COMMITS_BY_CATEGORY["$CATEGORY"]+="* $COMMIT_TITLE ([#$PR_NUM](${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/pull/$PR_NUM))"$'\n'
+            fi
+        fi
+    
+    else 
+        # echo "Processing as regular commit" >&2
+        # Process conventional commits without PR numbers
+        CATEGORY=$(get_commit_type "$COMMIT_MSG")
+        
+        if [ -n "$CATEGORY" ]; then  # Only process if it's a conventional commit
+            # Get commit author info
+            AUTHOR_EMAIL=$(git show -s --format='%ae' "$HASH")
+            
+            # Try to get GitHub username using gh api
+            if [ -n "$GITHUB_ACTIONS" ] || command -v gh >/dev/null 2>&1; then
+                GITHUB_USERNAME=$(gh api "/repos/${GITHUB_REPOSITORY}/commits/${HASH}" --jq '.author.login' 2>/dev/null)
+            fi
+            
+            if [ -n "$GITHUB_USERNAME" ]; then
+                # If we got GitHub username, use it
+                if [ -z "${ALL_AUTHORS[$AUTHOR_EMAIL]}" ]; then
+                    NEW_CONTRIBUTORS["$GITHUB_USERNAME"]=1
+                    ALL_AUTHORS["$AUTHOR_EMAIL"]=1
+                fi
+
+                CATEGORIES["$CATEGORY"]=1
+                COMMIT_TITLE=${COMMIT_MSG#*: }  # Remove the type prefix
+                COMMITS_BY_CATEGORY["$CATEGORY"]+="* $COMMIT_TITLE (${HASH:0:7}) by @$GITHUB_USERNAME"$'\n'
+            else
+                # Fallback to git author name if no GitHub username found
+                AUTHOR_NAME=$(git show -s --format='%an' "$HASH")
+                
+                if [ -z "${ALL_AUTHORS[$AUTHOR_EMAIL]}" ]; then
+                    NEW_CONTRIBUTORS["$AUTHOR_NAME"]=1
+                    ALL_AUTHORS["$AUTHOR_EMAIL"]=1
+                fi
+
+                CATEGORIES["$CATEGORY"]=1
+                COMMIT_TITLE=${COMMIT_MSG#*: }  # Remove the type prefix
+                COMMITS_BY_CATEGORY["$CATEGORY"]+="* $COMMIT_TITLE (${HASH:0:7}) by $AUTHOR_NAME"$'\n'
+            fi
+        fi
+    fi
+    
+done < <(git log "${COMPARE_BASE}..${GITLOG_REF}" --pretty=format:"%H|%s|%b" --reverse --first-parent)
+
+# Write categorized commits to changelog with their emojis
+for category in "✨ Features" "🐛 Bug Fixes" "📚 Documentation" "💎 Styles" "♻️ Code Refactoring" "⚡ Performance Improvements" "🧪 Tests" "🛠️ Build System" "⚙️ CI" "🔍 Other Changes"; do
+    if [ -n "${COMMITS_BY_CATEGORY[$category]}" ]; then
+        echo "### $category" >> changelog.md
+        echo "" >> changelog.md
+        echo "${COMMITS_BY_CATEGORY[$category]}" >> changelog.md
+        echo "" >> changelog.md
+    fi
+done
+
+# Add first-time contributors section if there are any
+if [ ${#NEW_CONTRIBUTORS[@]} -gt 0 ]; then
+    echo "## ✨ First-time Contributors" >> changelog.md
+    echo "" >> changelog.md
+    echo "A huge thank you to our amazing new contributors! Your first contribution marks the start of an exciting journey! 🌟" >> changelog.md
+    echo "" >> changelog.md
+    # Use readarray to sort the keys
+    readarray -t sorted_contributors < <(printf '%s\n' "${!NEW_CONTRIBUTORS[@]}" | sort)
+    for github_username in "${sorted_contributors[@]}"; do
+        echo "* 🌟 [@$github_username](https://github.com/$github_username)" >> changelog.md
+    done
+    echo "" >> changelog.md
+fi
+
+# Add compare link if not first release
+if [ -n "$LATEST_TAG" ]; then
+    echo "## 📈 Stats" >> changelog.md
+    echo "" >> changelog.md
+    echo "**Full Changelog**: [\`$LATEST_TAG..v${NEW_VERSION}\`](${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/compare/$LATEST_TAG...v${NEW_VERSION})" >> changelog.md
+fi
+
+# Output the changelog content
+CHANGELOG_CONTENT=$(cat changelog.md)
+{
+    echo "content<<EOF"
+    echo "$CHANGELOG_CONTENT"
+    echo "EOF"
+} >> "$GITHUB_OUTPUT"
+
+# Also print to stdout for local testing
+echo "Generated changelog:"
+echo "==================="
+cat changelog.md
+echo "==================="

.github/workflows/ci.yaml

@@ -0,0 +1,90 @@
+name: CI/CD
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+# Cancel in-progress runs on the same branch/PR
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup and Build
+        uses: ./.github/actions/setup-and-build
+
+      - name: Cache TypeScript compilation
+        uses: actions/cache@v4
+        with:
+          path: |
+            .tsbuildinfo
+            node_modules/.cache
+          key: ${{ runner.os }}-typescript-${{ hashFiles('**/tsconfig.json', 'app/**/*.ts', 'app/**/*.tsx') }}
+          restore-keys: |
+            ${{ runner.os }}-typescript-
+
+      - name: Run type check
+        run: pnpm run typecheck
+
+      - name: Cache ESLint
+        uses: actions/cache@v4
+        with:
+          path: node_modules/.cache/eslint
+          key: ${{ runner.os }}-eslint-${{ hashFiles('.eslintrc*', 'app/**/*.ts', 'app/**/*.tsx') }}
+          restore-keys: |
+            ${{ runner.os }}-eslint-
+
+      - name: Run ESLint
+        run: pnpm run lint
+
+      - name: Run tests
+        run: pnpm run test
+
+      - name: Upload test coverage
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: coverage-report
+          path: coverage/
+          retention-days: 7
+
+  docker-validation:
+    name: Docker Build Validation
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Validate Docker production build
+        run: |
+          echo "🐳 Testing Docker production target..."
+          docker build --target bolt-ai-production . --no-cache --progress=plain
+          echo "✅ Production target builds successfully"
+
+      - name: Validate Docker development build
+        run: |
+          echo "🐳 Testing Docker development target..."
+          docker build --target development . --no-cache --progress=plain
+          echo "✅ Development target builds successfully"
+
+      - name: Validate docker-compose configuration
+        run: |
+          echo "🐳 Validating docker-compose configuration..."
+          docker compose config --quiet
+          echo "✅ docker-compose configuration is valid"

.github/workflows/docker.yaml

@@ -0,0 +1,67 @@
+name: Docker Publish
+
+on:
+  push:
+    branches: [main, stable]
+    tags: ['v*', '*.*.*']
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  packages: write
+  contents: read
+  id-token: write
+
+env:
+  REGISTRY: ghcr.io
+
+jobs:
+  docker-build-publish:
+    runs-on: ubuntu-latest
+    # timeout-minutes: 30
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      
+      - name: Set lowercase image name
+        id: image
+        run: echo "name=$(echo '${{ github.repository }}' | tr '[:upper:]' '[:lower:]')" >> $GITHUB_OUTPUT
+      
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+        
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata for Docker image
+        id: meta
+        uses: docker/metadata-action@v4
+        with:
+          images: ${{ env.REGISTRY }}/${{ steps.image.outputs.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
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64
+          target: bolt-ai-production
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          
+          
+      - name: Check manifest
+        run: docker buildx imagetools inspect ${{ env.REGISTRY }}/${{ steps.image.outputs.name }}:${{ steps.meta.outputs.version }}

.github/workflows/docs.yaml

@@ -0,0 +1,35 @@
+name: Docs CI/CD
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'docs/**' # This will only trigger the workflow when files in docs directory change
+permissions:
+  contents: write
+jobs:
+  build_docs:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./docs
+    steps:
+      - uses: actions/checkout@v4
+      - name: Configure Git Credentials
+        run: |
+          git config user.name github-actions[bot]
+          git config user.email 41898282+github-actions[bot]@users.noreply.github.com
+      - uses: actions/setup-python@v5
+        with:
+          python-version: 3.x
+      - run: echo "cache_id=$(date --utc '+%V')" >> $GITHUB_ENV
+      - uses: actions/cache@v4
+        with:
+          key: mkdocs-material-${{ env.cache_id }}
+          path: .cache
+          restore-keys: |
+            mkdocs-material-
+
+      - run: pip install mkdocs-material
+      - run: mkdocs gh-deploy --force

.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: [20.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@v4
+        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 }}

.github/workflows/pr-release-validation.yaml

@@ -0,0 +1,125 @@
+name: PR Validation
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, labeled, unlabeled]
+    branches:
+      - main
+
+permissions:
+  contents: read
+  pull-requests: write
+  checks: write
+
+jobs:
+  quality-gates:
+    name: Quality Gates
+    runs-on: ubuntu-latest
+    
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Wait for CI checks
+        uses: lewagon/wait-on-check-action@v1.3.1
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+          check-name: 'Test'
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          wait-interval: 10
+
+      - name: Check required status checks
+        uses: actions/github-script@v7
+        continue-on-error: true
+        with:
+          script: |
+            const { data: checks } = await github.rest.checks.listForRef({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              ref: context.payload.pull_request.head.sha
+            });
+
+            const requiredChecks = ['Test', 'CodeQL Analysis'];
+            const optionalChecks = ['Quality Analysis', 'Deploy Preview'];
+            const failedChecks = [];
+            const passedChecks = [];
+
+            // Check required workflows
+            for (const checkName of requiredChecks) {
+              const check = checks.check_runs.find(c => c.name === checkName);
+              if (check && check.conclusion === 'success') {
+                passedChecks.push(checkName);
+              } else {
+                failedChecks.push(checkName);
+              }
+            }
+
+            // Report optional checks
+            for (const checkName of optionalChecks) {
+              const check = checks.check_runs.find(c => c.name === checkName);
+              if (check && check.conclusion === 'success') {
+                passedChecks.push(`${checkName} (optional)`);
+              }
+            }
+
+            console.log(`✅ Passed checks: ${passedChecks.join(', ')}`);
+            
+            if (failedChecks.length > 0) {
+              console.log(`❌ Failed required checks: ${failedChecks.join(', ')}`);
+              core.setFailed(`Required checks failed: ${failedChecks.join(', ')}`);
+            } else {
+              console.log(`✅ All required checks passed!`);
+            }
+
+  validate-release:
+    name: Release Validation
+    runs-on: ubuntu-latest
+    needs: quality-gates
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Validate PR Labels
+        run: |
+          if [[ "${{ contains(github.event.pull_request.labels.*.name, 'stable-release') }}" == "true" ]]; then
+            echo "✓ PR has stable-release label"
+            
+            # Check version bump labels
+            if [[ "${{ contains(github.event.pull_request.labels.*.name, 'major') }}" == "true" ]]; then
+              echo "✓ Major version bump requested"
+            elif [[ "${{ contains(github.event.pull_request.labels.*.name, 'minor') }}" == "true" ]]; then
+              echo "✓ Minor version bump requested"
+            else
+              echo "✓ Patch version bump will be applied"
+            fi
+          else
+            echo "This PR doesn't have the stable-release label. No release will be created." 
+          fi
+
+      - name: Check breaking changes
+        if: contains(github.event.pull_request.labels.*.name, 'major')
+        run: |
+          echo "⚠️ This PR contains breaking changes and will trigger a major release."
+          
+      - name: Validate changelog entry
+        if: contains(github.event.pull_request.labels.*.name, 'stable-release')
+        run: |
+          if ! grep -q "${{ github.event.pull_request.number }}" CHANGES.md; then
+            echo "❌ No changelog entry found for PR #${{ github.event.pull_request.number }}"
+            echo "Please add an entry to CHANGES.md"
+            exit 1
+          else
+            echo "✓ Changelog entry found"
+          fi
+
+  security-review:
+    name: Security Review Required
+    runs-on: ubuntu-latest
+    if: contains(github.event.pull_request.labels.*.name, 'security')
+    
+    steps:
+      - name: Check security label
+        run: |
+          echo "🔒 This PR has security implications and requires additional review"
+          echo "Ensure a security team member has approved this PR before merging"

.github/workflows/preview.yaml

@@ -0,0 +1,196 @@
+name: Preview Deployment
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches: [main]
+
+# Cancel in-progress runs on the same PR
+concurrency:
+  group: preview-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+  pull-requests: write
+  deployments: write
+
+jobs:
+  deploy-preview:
+    name: Deploy Preview
+    runs-on: ubuntu-latest
+    if: github.event.action != 'closed'
+    
+    steps:
+      - name: Check if preview deployment is configured
+        id: check-secrets
+        run: |
+          if [[ -n "${{ secrets.CLOUDFLARE_API_TOKEN }}" && -n "${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" ]]; then
+            echo "configured=true" >> $GITHUB_OUTPUT
+          else
+            echo "configured=false" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Checkout
+        if: steps.check-secrets.outputs.configured == 'true'
+        uses: actions/checkout@v4
+
+      - name: Setup and Build
+        if: steps.check-secrets.outputs.configured == 'true'
+        uses: ./.github/actions/setup-and-build
+
+      - name: Build for production
+        if: steps.check-secrets.outputs.configured == 'true'
+        run: pnpm run build
+        env:
+          NODE_ENV: production
+
+      - name: Deploy to Cloudflare Pages
+        if: steps.check-secrets.outputs.configured == 'true'
+        id: deploy
+        uses: cloudflare/pages-action@v1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          projectName: bolt-diy-preview
+          directory: build/client
+          gitHubToken: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Preview deployment not configured
+        if: steps.check-secrets.outputs.configured == 'false'
+        run: |
+          echo "✅ Preview deployment is not configured for this repository"
+          echo "To enable preview deployments, add the following secrets:"
+          echo "- CLOUDFLARE_API_TOKEN"
+          echo "- CLOUDFLARE_ACCOUNT_ID"
+          echo "This is optional and the workflow will pass without it."
+          echo "url=https://preview-not-configured.example.com" >> $GITHUB_OUTPUT
+
+      - name: Add preview URL comment to PR
+        uses: actions/github-script@v7
+        continue-on-error: true
+        with:
+          script: |
+            const { data: comments } = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+            });
+
+            const previewComment = comments.find(comment => 
+              comment.body.includes('🚀 Preview deployment')
+            );
+
+            const isConfigured = '${{ steps.check-secrets.outputs.configured }}' === 'true';
+            const deployUrl = '${{ steps.deploy.outputs.url }}' || 'https://preview-not-configured.example.com';
+
+            let commentBody;
+            if (isConfigured) {
+              commentBody = `🚀 Preview deployment is ready!
+
+              | Name | Link |
+              |------|------|
+              | Latest commit | ${{ github.sha }} |
+              | Preview URL | ${deployUrl} |
+
+              Built with ❤️ by [bolt.diy](https://bolt.diy)
+              `;
+            } else {
+              commentBody = `ℹ️ Preview deployment not configured
+
+              | Name | Info |
+              |------|------|
+              | Latest commit | ${{ github.sha }} |
+              | Status | Preview deployment requires Cloudflare secrets |
+
+              To enable preview deployments, repository maintainers can add:
+              - \`CLOUDFLARE_API_TOKEN\` secret
+              - \`CLOUDFLARE_ACCOUNT_ID\` secret
+
+              Built with ❤️ by [bolt.diy](https://bolt.diy)
+              `;
+            }
+
+            if (previewComment) {
+              github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: previewComment.id,
+                body: commentBody
+              });
+            } else {
+              github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.issue.number,
+                body: commentBody
+              });
+            }
+
+      - name: Run smoke tests on preview
+        run: |
+          if [[ "${{ steps.check-secrets.outputs.configured }}" == "true" ]]; then
+            echo "Running smoke tests on preview deployment..."
+            echo "Preview URL: ${{ steps.deploy.outputs.url }}"
+            # Basic HTTP check instead of Playwright tests
+            curl -f ${{ steps.deploy.outputs.url }} || echo "Preview environment check completed"
+          else
+            echo "✅ Smoke tests skipped - preview deployment not configured"
+            echo "This is normal and expected when Cloudflare secrets are not available"
+          fi
+
+      - name: Preview workflow summary
+        run: |
+          echo "✅ Preview deployment workflow completed successfully"
+          if [[ "${{ steps.check-secrets.outputs.configured }}" == "true" ]]; then
+            echo "🚀 Preview deployed to: ${{ steps.deploy.outputs.url }}"
+          else
+            echo "ℹ️ Preview deployment not configured (this is normal)"
+          fi
+
+  cleanup-preview:
+    name: Cleanup Preview
+    runs-on: ubuntu-latest
+    if: github.event.action == 'closed'
+
+    steps:
+      - name: Delete preview environment
+        uses: actions/github-script@v7
+        continue-on-error: true
+        with:
+          script: |
+            const deployments = await github.rest.repos.listDeployments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              environment: `preview-pr-${{ github.event.pull_request.number }}`,
+            });
+
+            for (const deployment of deployments.data) {
+              await github.rest.repos.createDeploymentStatus({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                deployment_id: deployment.id,
+                state: 'inactive',
+              });
+            }
+
+      - name: Remove preview comment
+        uses: actions/github-script@v7
+        continue-on-error: true
+        with:
+          script: |
+            const { data: comments } = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+            });
+
+            for (const comment of comments) {
+              if (comment.body.includes('🚀 Preview deployment')) {
+                await github.rest.issues.deleteComment({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  comment_id: comment.id,
+                });
+              }
+            }

.github/workflows/quality.yaml

@@ -0,0 +1,181 @@
+name: Code Quality
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+# Cancel in-progress runs on the same branch/PR  
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  quality-checks:
+    name: Quality Analysis
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup and Build
+        uses: ./.github/actions/setup-and-build
+
+      - name: Check for duplicate dependencies
+        run: |
+          echo "Checking for duplicate dependencies..."
+          pnpm dedupe --check || echo "✅ Duplicate dependency check completed"
+
+      - name: Check bundle size
+        run: |
+          pnpm run build
+          echo "Bundle analysis completed (bundlesize tool requires configuration)"
+        continue-on-error: true
+
+      - name: Dead code elimination check
+        run: |
+          echo "Checking for unused imports and dead code..."
+          npx unimported || echo "Unimported tool completed with warnings"
+        continue-on-error: true
+
+      - name: Check for unused dependencies
+        run: |
+          echo "Checking for unused dependencies..."
+          npx depcheck --config .depcheckrc.json || echo "Dependency check completed with findings"
+        continue-on-error: true
+
+      - name: Check package.json formatting
+        run: |
+          echo "Checking package.json formatting..."
+          npx sort-package-json package.json --check || echo "Package.json formatting check completed"
+        continue-on-error: true
+
+      - name: Generate complexity report
+        run: |
+          echo "Analyzing code complexity..."
+          npx es6-plato -r -d complexity-report app/ || echo "Complexity analysis completed"
+        continue-on-error: true
+
+      - name: Upload complexity report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: complexity-report
+          path: complexity-report/
+          retention-days: 7
+
+  accessibility-tests:
+    name: Accessibility Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup and Build
+        uses: ./.github/actions/setup-and-build
+
+      - name: Start development server
+        run: |
+          pnpm run build
+          pnpm run start &
+          sleep 15
+        env:
+          CI: true
+
+      - name: Run accessibility tests with axe
+        run: |
+          echo "Running accessibility tests..."
+          npx @axe-core/cli http://localhost:5173 --exit || echo "Accessibility tests completed with findings"
+        continue-on-error: true
+
+  performance-audit:
+    name: Performance Audit
+    runs-on: ubuntu-latest
+    timeout-minutes: 25
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup and Build
+        uses: ./.github/actions/setup-and-build
+
+      - name: Start server for Lighthouse
+        run: |
+          pnpm run build
+          pnpm run start &
+          sleep 20
+
+      - name: Run Lighthouse audit
+        run: |
+          echo "Running Lighthouse performance audit..."
+          npx lighthouse http://localhost:5173 --output-path=./lighthouse-report.html --output=html --chrome-flags="--headless --no-sandbox" || echo "Lighthouse audit completed"
+        continue-on-error: true
+
+      - name: Upload Lighthouse report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: lighthouse-report
+          path: lighthouse-report.html
+          retention-days: 7
+
+  pr-size-check:
+    name: PR Size Check
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request'
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Calculate PR size
+        id: pr-size
+        run: |
+          # Get the base branch (target branch)
+          BASE_BRANCH="${{ github.event.pull_request.base.ref }}"
+          
+          # Count additions and deletions
+          ADDITIONS=$(git diff --numstat origin/$BASE_BRANCH...HEAD | awk '{sum += $1} END {print sum}')
+          DELETIONS=$(git diff --numstat origin/$BASE_BRANCH...HEAD | awk '{sum += $2} END {print sum}')
+          TOTAL_CHANGES=$((ADDITIONS + DELETIONS))
+          
+          echo "additions=$ADDITIONS" >> $GITHUB_OUTPUT
+          echo "deletions=$DELETIONS" >> $GITHUB_OUTPUT
+          echo "total=$TOTAL_CHANGES" >> $GITHUB_OUTPUT
+          
+          # Determine size category
+          if [ $TOTAL_CHANGES -lt 50 ]; then
+            echo "size=XS" >> $GITHUB_OUTPUT
+          elif [ $TOTAL_CHANGES -lt 200 ]; then
+            echo "size=S" >> $GITHUB_OUTPUT
+          elif [ $TOTAL_CHANGES -lt 500 ]; then
+            echo "size=M" >> $GITHUB_OUTPUT
+          elif [ $TOTAL_CHANGES -lt 1000 ]; then
+            echo "size=L" >> $GITHUB_OUTPUT
+          elif [ $TOTAL_CHANGES -lt 2000 ]; then
+            echo "size=XL" >> $GITHUB_OUTPUT
+          else
+            echo "size=XXL" >> $GITHUB_OUTPUT
+          fi
+
+      - name: PR size summary
+        run: |
+          echo "✅ PR Size Analysis Complete"
+          echo "📊 Changes: +${{ steps.pr-size.outputs.additions }} -${{ steps.pr-size.outputs.deletions }}"
+          echo "📏 Size Category: ${{ steps.pr-size.outputs.size }}"
+          echo "💡 This information helps reviewers understand the scope of changes"
+          
+          if [ "${{ steps.pr-size.outputs.size }}" = "XXL" ]; then
+            echo "ℹ️ This is a large PR - consider breaking it into smaller chunks for future PRs"
+            echo "However, large PRs are acceptable for major feature additions like this one"
+          fi

.github/workflows/security.yaml

@@ -0,0 +1,121 @@
+name: Security Analysis
+
+on:
+  push:
+    branches: [main, stable]
+  pull_request:
+    branches: [main]
+  schedule:
+    # Run weekly security scan on Sundays at 2 AM
+    - cron: '0 2 * * 0'
+
+permissions:
+  actions: read
+  contents: read
+  security-events: read
+
+jobs:
+  codeql:
+    name: CodeQL Analysis
+    runs-on: ubuntu-latest
+    timeout-minutes: 45
+    
+    strategy:
+      fail-fast: false
+      matrix:
+        language: ['javascript', 'typescript']
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v3
+        with:
+          languages: ${{ matrix.language }}
+          queries: security-extended,security-and-quality
+
+      - name: Autobuild
+        uses: github/codeql-action/autobuild@v3
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v3
+        with:
+          category: "/language:${{matrix.language}}"
+          upload: false
+          output: "codeql-results"
+
+      - name: Upload CodeQL results as artifact
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: codeql-results-${{ matrix.language }}
+          path: codeql-results
+
+  dependency-scan:
+    name: Dependency Vulnerability Scan
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.18.0'
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: '9.14.4'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Run npm audit
+        run: pnpm audit --audit-level moderate
+        continue-on-error: true
+
+      - name: Generate SBOM
+        uses: anchore/sbom-action@v0
+        with:
+          path: ./
+          format: spdx-json
+          artifact-name: sbom.spdx.json
+
+      - name: Upload SBOM as artifact
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: sbom-results
+          path: |
+            sbom.spdx.json
+            **/sbom.spdx.json
+
+  secrets-scan:
+    name: Secrets Detection
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Run Trivy secrets scan
+        uses: aquasecurity/trivy-action@master
+        with:
+          scan-type: 'fs'
+          scan-ref: '.'
+          format: 'sarif'
+          output: 'trivy-secrets-results.sarif'
+          scanners: 'secret'
+
+      - name: Upload Trivy secrets results as artifact
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: trivy-secrets-results
+          path: trivy-secrets-results.sarif
+

.github/workflows/semantic-pr.yaml

@@ -0,0 +1,32 @@
+name: Semantic Pull Request
+on:
+  pull_request_target:
+    types: [opened, reopened, edited, synchronize]
+permissions:
+  pull-requests: read
+jobs:
+  main:
+    name: Validate PR Title
+    runs-on: ubuntu-latest
+    steps:
+      # https://github.com/amannn/action-semantic-pull-request/releases/tag/v5.5.3
+      - uses: amannn/action-semantic-pull-request@0723387faaf9b38adef4775cd42cfd5155ed6017
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          subjectPattern: ^(?![A-Z]).+$
+          subjectPatternError: |
+            The subject "{subject}" found in the pull request title "{title}"
+            didn't match the configured pattern. Please ensure that the subject
+            doesn't start with an uppercase character.
+          types: |
+            fix
+            feat
+            chore
+            build
+            ci
+            perf
+            docs
+            refactor
+            revert
+            test

.github/workflows/stale.yml

@@ -0,0 +1,25 @@
+name: Mark Stale Issues and Pull Requests
+
+on:
+  schedule:
+    - cron: '0 2 * * *' # Runs daily at 2:00 AM UTC
+  workflow_dispatch: # Allows manual triggering of the workflow
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Mark stale issues and pull requests
+        uses: actions/stale@v8
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          stale-issue-message: 'This issue has been marked as stale due to inactivity. If no further activity occurs, it will be closed in 7 days.'
+          stale-pr-message: 'This pull request has been marked as stale due to inactivity. If no further activity occurs, it will be closed in 7 days.'
+          days-before-stale: 10 # Number of days before marking an issue or PR as stale
+          days-before-close: 4 # Number of days after being marked stale before closing
+          stale-issue-label: 'stale' # Label to apply to stale issues
+          stale-pr-label: 'stale' # Label to apply to stale pull requests
+          exempt-issue-labels: 'pinned,important' # Issues with these labels won't be marked stale
+          exempt-pr-labels: 'pinned,important' # PRs with these labels won't be marked stale
+          operations-per-run: 75 # Limits the number of actions per run to avoid API rate limits

.github/workflows/test-workflows.yaml

@@ -0,0 +1,247 @@
+name: Test Workflows
+
+# This workflow is for testing our new workflow changes safely
+on:
+  push:
+    branches: [workflow-testing, test-*]
+  pull_request:
+    branches: [workflow-testing]
+  workflow_dispatch:
+    inputs:
+      test_type:
+        description: 'Type of test to run'
+        required: true
+        default: 'all'
+        type: choice
+        options:
+        - all
+        - ci-only
+        - security-only
+        - quality-only
+
+jobs:
+  workflow-test-info:
+    name: Workflow Test Information
+    runs-on: ubuntu-latest
+    steps:
+      - name: Display test information
+        run: |
+          echo "🧪 Testing new workflow configurations"
+          echo "Branch: ${{ github.ref_name }}"
+          echo "Event: ${{ github.event_name }}"
+          echo "Test type: ${{ github.event.inputs.test_type || 'all' }}"
+          echo ""
+          echo "This is a safe test environment - no changes will affect production workflows"
+
+  test-basic-setup:
+    name: Test Basic Setup
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Test setup-and-build action
+        uses: ./.github/actions/setup-and-build
+
+      - name: Verify Node.js version
+        run: |
+          echo "Node.js version: $(node --version)"
+          if [[ "$(node --version)" == *"20.18.0"* ]]; then
+            echo "✅ Correct Node.js version"
+          else
+            echo "❌ Wrong Node.js version"
+            exit 1
+          fi
+
+      - name: Verify pnpm version
+        run: |
+          echo "pnpm version: $(pnpm --version)"
+          if [[ "$(pnpm --version)" == *"9.14.4"* ]]; then
+            echo "✅ Correct pnpm version"
+          else
+            echo "❌ Wrong pnpm version"
+            exit 1
+          fi
+
+      - name: Test build process
+        run: |
+          echo "✅ Build completed successfully"
+
+  test-linting:
+    name: Test Linting
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup and Build
+        uses: ./.github/actions/setup-and-build
+
+      - name: Test ESLint
+        run: |
+          echo "Testing ESLint configuration..."
+          pnpm run lint --max-warnings 0 || echo "ESLint found issues (expected for testing)"
+
+      - name: Test TypeScript
+        run: |
+          echo "Testing TypeScript compilation..."
+          pnpm run typecheck
+
+  test-caching:
+    name: Test Caching Strategy
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup and Build
+        uses: ./.github/actions/setup-and-build
+
+      - name: Test TypeScript cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .tsbuildinfo
+            node_modules/.cache
+          key: test-${{ runner.os }}-typescript-${{ hashFiles('**/tsconfig.json', 'app/**/*.ts', 'app/**/*.tsx') }}
+          restore-keys: |
+            test-${{ runner.os }}-typescript-
+
+      - name: Test ESLint cache
+        uses: actions/cache@v4
+        with:
+          path: node_modules/.cache/eslint
+          key: test-${{ runner.os }}-eslint-${{ hashFiles('.eslintrc*', 'app/**/*.ts', 'app/**/*.tsx') }}
+          restore-keys: |
+            test-${{ runner.os }}-eslint-
+
+      - name: Verify caching works
+        run: |
+          echo "✅ Caching configuration tested"
+
+  test-security-tools:
+    name: Test Security Tools
+    runs-on: ubuntu-latest
+    if: github.event.inputs.test_type == 'all' || github.event.inputs.test_type == 'security-only'
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.18.0'
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: '9.14.4'
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Test dependency audit (non-blocking)
+        run: |
+          echo "Testing pnpm audit..."
+          pnpm audit --audit-level moderate || echo "Audit found issues (this is for testing)"
+
+      - name: Test Trivy installation
+        run: |
+          echo "Testing Trivy secrets scanner..."
+          docker run --rm -v ${{ github.workspace }}:/workspace aquasecurity/trivy:latest fs /workspace --exit-code 0 --no-progress --format table --scanners secret || echo "Trivy test completed"
+
+  test-quality-checks:
+    name: Test Quality Checks
+    runs-on: ubuntu-latest
+    if: github.event.inputs.test_type == 'all' || github.event.inputs.test_type == 'quality-only'
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup and Build
+        uses: ./.github/actions/setup-and-build
+
+      - name: Test bundle size analysis
+        run: |
+          echo "Testing bundle size analysis..."
+          ls -la build/client/ || echo "Build directory structure checked"
+
+      - name: Test dependency checks
+        run: |
+          echo "Testing depcheck..."
+          npx depcheck --config .depcheckrc.json || echo "Depcheck completed"
+
+      - name: Test package.json formatting
+        run: |
+          echo "Testing package.json sorting..."
+          npx sort-package-json package.json --check || echo "Package.json check completed"
+
+  validate-docker-config:
+    name: Validate Docker Configuration
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Test Docker build (without push)
+        run: |
+          echo "Testing Docker build configuration..."
+          docker build --target bolt-ai-production . --no-cache --progress=plain
+          echo "✅ Docker build test completed"
+
+  test-results-summary:
+    name: Test Results Summary
+    runs-on: ubuntu-latest
+    needs: [workflow-test-info, test-basic-setup, test-linting, test-caching, test-security-tools, test-quality-checks, validate-docker-config]
+    if: always()
+    steps:
+      - name: Check all test results
+        run: |
+          echo "🧪 Workflow Testing Results Summary"
+          echo "=================================="
+          
+          if [[ "${{ needs.test-basic-setup.result }}" == "success" ]]; then
+            echo "✅ Basic Setup: PASSED"
+          else
+            echo "❌ Basic Setup: FAILED"
+          fi
+          
+          if [[ "${{ needs.test-linting.result }}" == "success" ]]; then
+            echo "✅ Linting Tests: PASSED"
+          else
+            echo "❌ Linting Tests: FAILED"
+          fi
+          
+          if [[ "${{ needs.test-caching.result }}" == "success" ]]; then
+            echo "✅ Caching Tests: PASSED"
+          else
+            echo "❌ Caching Tests: FAILED"
+          fi
+          
+          if [[ "${{ needs.test-security-tools.result }}" == "success" ]]; then
+            echo "✅ Security Tools: PASSED"
+          else
+            echo "❌ Security Tools: FAILED"
+          fi
+          
+          if [[ "${{ needs.test-quality-checks.result }}" == "success" ]]; then
+            echo "✅ Quality Checks: PASSED"
+          else
+            echo "❌ Quality Checks: FAILED"
+          fi
+          
+          if [[ "${{ needs.validate-docker-config.result }}" == "success" ]]; then
+            echo "✅ Docker Config: PASSED"
+          else
+            echo "❌ Docker Config: FAILED"
+          fi
+          
+          echo ""
+          echo "Next steps:"
+          echo "1. Review any failures above"
+          echo "2. Fix issues in workflow configurations"
+          echo "3. Re-test until all checks pass"
+          echo "4. Create PR to merge workflow improvements"

.github/workflows/update-stable.yml

@@ -0,0 +1,127 @@
+name: Update Stable Branch
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+
+jobs:
+  prepare-release:
+    if: contains(github.event.head_commit.message, '#release')
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Configure Git
+        run: |
+          git config --global user.name 'github-actions[bot]'
+          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.18.0'
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: '9.14.4'
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Get Current Version
+        id: current_version
+        run: |
+          CURRENT_VERSION=$(node -p "require('./package.json').version")
+          echo "version=$CURRENT_VERSION" >> $GITHUB_OUTPUT
+
+      - name: Install semver
+        run: pnpm add -g semver
+
+      - name: Determine Version Bump
+        id: version_bump
+        run: |
+          COMMIT_MSG="${{ github.event.head_commit.message }}"
+          if [[ $COMMIT_MSG =~ "#release:major" ]]; then
+            echo "bump=major" >> $GITHUB_OUTPUT
+          elif [[ $COMMIT_MSG =~ "#release:minor" ]]; then
+            echo "bump=minor" >> $GITHUB_OUTPUT
+          else
+            echo "bump=patch" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Bump Version
+        id: bump_version
+        run: |
+          NEW_VERSION=$(semver -i ${{ steps.version_bump.outputs.bump }} ${{ steps.current_version.outputs.version }})
+          echo "new_version=$NEW_VERSION" >> $GITHUB_OUTPUT
+
+      - name: Update Package.json
+        run: |
+          NEW_VERSION=${{ steps.bump_version.outputs.new_version }}
+          pnpm version $NEW_VERSION --no-git-tag-version --allow-same-version
+
+      - name: Prepare changelog script
+        run: chmod +x .github/scripts/generate-changelog.sh
+
+      - name: Generate Changelog
+        id: changelog
+        env:
+          NEW_VERSION: ${{ steps.bump_version.outputs.new_version }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+        run: .github/scripts/generate-changelog.sh
+
+      - name: Get the latest commit hash and version tag
+        run: |
+          echo "COMMIT_HASH=$(git rev-parse HEAD)" >> $GITHUB_ENV
+          echo "NEW_VERSION=${{ steps.bump_version.outputs.new_version }}" >> $GITHUB_ENV
+
+      - name: Commit and Tag Release
+        run: |
+          git pull
+          git add package.json pnpm-lock.yaml changelog.md
+          git commit -m "chore: release version ${{ steps.bump_version.outputs.new_version }}"
+          git tag "v${{ steps.bump_version.outputs.new_version }}"
+          git push
+          git push --tags
+
+      - name: Update Stable Branch
+        run: |
+          if ! git checkout stable 2>/dev/null; then
+            echo "Creating new stable branch..."
+            git checkout -b stable
+          fi
+          git merge main --no-ff -m "chore: release version ${{ steps.bump_version.outputs.new_version }}"
+          git push --set-upstream origin stable --force
+
+      - name: Create GitHub Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          VERSION="v${{ steps.bump_version.outputs.new_version }}"
+          # Save changelog to a file
+          echo "${{ steps.changelog.outputs.content }}" > release_notes.md
+          gh release create "$VERSION" \
+            --title "Release $VERSION" \
+            --notes-file release_notes.md \
+            --target stable

.gitignore

@@ -0,0 +1,48 @@
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+.vscode/*
+.vscode/launch.json
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+/.history
+/.cache
+/build
+functions/build/
+.env.local
+.env
+.dev.vars
+*.vars
+.wrangler
+_worker.bundle
+
+Modelfile
+modelfiles
+
+# docs ignore
+site
+
+# commit file ignore
+app/commit.json
+changelogUI.md
+docs/instructions/Roadmap.md
+.cursorrules
+*.md
+.qodo

.husky/pre-commit

@@ -0,0 +1,32 @@
+#!/bin/sh
+
+echo "🔍 Running pre-commit hook to check the code looks good... 🔍"
+
+# Load NVM if available (useful for managing Node.js versions)
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
+
+# Ensure `pnpm` is available
+echo "Checking if pnpm is available..."
+if ! command -v pnpm >/dev/null 2>&1; then
+    echo "❌ pnpm not found! Please ensure pnpm is installed and available in PATH."
+    exit 1
+fi
+
+# Run typecheck
+echo "Running typecheck..."
+if ! pnpm typecheck; then
+    echo "❌ Type checking failed! Please review TypeScript types."
+    echo "Once you're done, don't forget to add your changes to the commit! 🚀"
+    exit 1
+fi
+
+# Run lint
+echo "Running lint..."
+if ! pnpm lint; then
+    echo "❌ Linting failed! Run 'pnpm lint:fix' to fix the easy issues."
+    echo "Once you're done, don't forget to add your beautification to the commit! 🤩"
+    exit 1
+fi
+
+echo "👍 All checks passed! Committing changes..."

.lighthouserc.json

@@ -0,0 +1,20 @@
+{
+  "ci": {
+    "collect": {
+      "url": ["http://localhost:5173/"],
+      "startServerCommand": "pnpm run start",
+      "numberOfRuns": 3
+    },
+    "assert": {
+      "assertions": {
+        "categories:performance": ["warn", {"minScore": 0.8}],
+        "categories:accessibility": ["warn", {"minScore": 0.9}],
+        "categories:best-practices": ["warn", {"minScore": 0.8}],
+        "categories:seo": ["warn", {"minScore": 0.8}]
+      }
+    },
+    "upload": {
+      "target": "temporary-public-storage"
+    }
+  }
+}

.prettierignore

@@ -0,0 +1,2 @@
+pnpm-lock.yaml
+.astro

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
+  "bracketSpacing": true
+}

Dockerfile

@@ -0,0 +1,103 @@
+# ---- build stage ----
+FROM node:22-bookworm-slim AS build
+WORKDIR /app
+
+# CI-friendly env
+ENV HUSKY=0
+ENV CI=true
+
+# Use pnpm
+RUN corepack enable && corepack prepare pnpm@9.15.9 --activate
+
+# Ensure git is available for build and runtime scripts
+RUN apt-get update && apt-get install -y --no-install-recommends git \
+  && rm -rf /var/lib/apt/lists/*
+
+# Accept (optional) build-time public URL for Remix/Vite (Coolify can pass it)
+ARG VITE_PUBLIC_APP_URL
+ENV VITE_PUBLIC_APP_URL=${VITE_PUBLIC_APP_URL}
+
+# Install deps efficiently
+COPY package.json pnpm-lock.yaml* ./
+RUN pnpm fetch
+
+# Copy source and build
+COPY . .
+# install with dev deps (needed to build)
+RUN pnpm install --offline --frozen-lockfile
+
+# Build the Remix app (SSR + client)
+RUN NODE_OPTIONS=--max-old-space-size=4096 pnpm run build
+
+# ---- production dependencies stage ----
+FROM build AS prod-deps
+
+# Keep only production deps for runtime
+RUN pnpm prune --prod --ignore-scripts
+
+
+# ---- production stage ----
+FROM prod-deps AS bolt-ai-production
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV PORT=5173
+ENV HOST=0.0.0.0
+
+# Non-sensitive build arguments
+ARG VITE_LOG_LEVEL=debug
+ARG DEFAULT_NUM_CTX
+
+# Set non-sensitive environment variables
+ENV WRANGLER_SEND_METRICS=false \
+    VITE_LOG_LEVEL=${VITE_LOG_LEVEL} \
+    DEFAULT_NUM_CTX=${DEFAULT_NUM_CTX} \
+    RUNNING_IN_DOCKER=true
+
+# Note: API keys should be provided at runtime via docker run -e or docker-compose
+# Example: docker run -e OPENAI_API_KEY=your_key_here ...
+
+# Install curl for healthchecks and copy bindings script
+RUN apt-get update && apt-get install -y --no-install-recommends curl \
+  && rm -rf /var/lib/apt/lists/*
+
+# Copy built files and scripts
+COPY --from=prod-deps /app/build /app/build
+COPY --from=prod-deps /app/node_modules /app/node_modules
+COPY --from=prod-deps /app/package.json /app/package.json
+COPY --from=prod-deps /app/bindings.sh /app/bindings.sh
+
+# Pre-configure wrangler to disable metrics
+RUN mkdir -p /root/.config/.wrangler && \
+    echo '{"enabled":false}' > /root/.config/.wrangler/metrics.json
+
+# Make bindings script executable
+RUN chmod +x /app/bindings.sh
+
+EXPOSE 5173
+
+# Healthcheck for deployment platforms
+HEALTHCHECK --interval=10s --timeout=3s --start-period=5s --retries=5 \
+  CMD curl -fsS http://localhost:5173/ || exit 1
+
+# Start using dockerstart script with Wrangler
+CMD ["pnpm", "run", "dockerstart"]
+
+
+# ---- development stage ----
+FROM build AS development
+
+# Non-sensitive development arguments
+ARG VITE_LOG_LEVEL=debug
+ARG DEFAULT_NUM_CTX
+
+# Set non-sensitive environment variables for development
+ENV VITE_LOG_LEVEL=${VITE_LOG_LEVEL} \
+    DEFAULT_NUM_CTX=${DEFAULT_NUM_CTX} \
+    RUNNING_IN_DOCKER=true
+
+# Note: API keys should be provided at runtime via docker run -e or docker-compose
+# Example: docker run -e OPENAI_API_KEY=your_key_here ...
+
+RUN mkdir -p /app/run
+CMD ["pnpm", "run", "dev", "--host"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 StackBlitz, Inc. and bolt.diy contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

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

@@ -0,0 +1,175 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { motion } from 'framer-motion';
+import { useStore } from '@nanostores/react';
+import { classNames } from '~/utils/classNames';
+import { profileStore } from '~/lib/stores/profile';
+import type { TabType, Profile } from './types';
+
+interface AvatarDropdownProps {
+  onSelectTab: (tab: TabType) => void;
+}
+
+export const AvatarDropdown = ({ onSelectTab }: AvatarDropdownProps) => {
+  const profile = useStore(profileStore) as Profile;
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <motion.button
+          className="w-10 h-10 rounded-full bg-transparent flex items-center justify-center focus:outline-none"
+          whileHover={{ scale: 1.02 }}
+          whileTap={{ scale: 0.98 }}
+        >
+          {profile?.avatar ? (
+            <img
+              src={profile.avatar}
+              alt={profile?.username || 'Profile'}
+              className="w-full h-full rounded-full object-cover"
+              loading="eager"
+              decoding="sync"
+            />
+          ) : (
+            <div className="w-full h-full rounded-full flex items-center justify-center bg-white dark:bg-gray-800 text-gray-400 dark:text-gray-500">
+              <div className="i-ph:user w-6 h-6" />
+            </div>
+          )}
+        </motion.button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Portal>
+        <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"
+        >
+          <div
+            className={classNames(
+              'px-4 py-3 flex items-center gap-3',
+              'border-b border-gray-200/50 dark:border-gray-800/50',
+            )}
+          >
+            <div className="w-10 h-10 rounded-full overflow-hidden flex-shrink-0 bg-white dark:bg-gray-800 shadow-sm">
+              {profile?.avatar ? (
+                <img
+                  src={profile.avatar}
+                  alt={profile?.username || 'Profile'}
+                  className={classNames('w-full h-full', 'object-cover', 'transform-gpu', 'image-rendering-crisp')}
+                  loading="eager"
+                  decoding="sync"
+                />
+              ) : (
+                <div className="w-full h-full flex items-center justify-center text-gray-400 dark:text-gray-500 font-medium text-lg">
+                  <div className="i-ph:user w-6 h-6" />
+                </div>
+              )}
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="font-medium text-sm text-gray-900 dark:text-white truncate">
+                {profile?.username || 'Guest User'}
+              </div>
+              {profile?.bio && <div className="text-xs text-gray-500 dark:text-gray-400 truncate">{profile.bio}</div>}
+            </div>
+          </div>
+
+          <DropdownMenu.Item
+            className={classNames(
+              'flex items-center gap-2 px-4 py-2.5',
+              'text-sm text-gray-700 dark:text-gray-200',
+              'hover:bg-purple-50 dark:hover:bg-purple-500/10',
+              'hover:text-purple-500 dark:hover:text-purple-400',
+              'cursor-pointer transition-all duration-200',
+              'outline-none',
+              'group',
+            )}
+            onClick={() => onSelectTab('profile')}
+          >
+            <div className="i-ph:user-circle w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
+            Edit Profile
+          </DropdownMenu.Item>
+
+          <DropdownMenu.Item
+            className={classNames(
+              'flex items-center gap-2 px-4 py-2.5',
+              'text-sm text-gray-700 dark:text-gray-200',
+              'hover:bg-purple-50 dark:hover:bg-purple-500/10',
+              'hover:text-purple-500 dark:hover:text-purple-400',
+              'cursor-pointer transition-all duration-200',
+              'outline-none',
+              'group',
+            )}
+            onClick={() => onSelectTab('settings')}
+          >
+            <div className="i-ph:gear-six w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
+            Settings
+          </DropdownMenu.Item>
+
+          <div className="my-1 border-t border-gray-200/50 dark:border-gray-800/50" />
+
+          <DropdownMenu.Item
+            className={classNames(
+              'flex items-center gap-2 px-4 py-2.5',
+              'text-sm text-gray-700 dark:text-gray-200',
+              'hover:bg-purple-50 dark:hover:bg-purple-500/10',
+              'hover:text-purple-500 dark:hover:text-purple-400',
+              'cursor-pointer transition-all duration-200',
+              'outline-none',
+              'group',
+            )}
+            onClick={() =>
+              window.open('https://github.com/stackblitz-labs/bolt.diy/issues/new?template=bug_report.yml', '_blank')
+            }
+          >
+            <div className="i-ph:bug w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
+            Report Bug
+          </DropdownMenu.Item>
+
+          <DropdownMenu.Item
+            className={classNames(
+              'flex items-center gap-2 px-4 py-2.5',
+              'text-sm text-gray-700 dark:text-gray-200',
+              'hover:bg-purple-50 dark:hover:bg-purple-500/10',
+              'hover:text-purple-500 dark:hover:text-purple-400',
+              'cursor-pointer transition-all duration-200',
+              'outline-none',
+              'group',
+            )}
+            onClick={async () => {
+              try {
+                const { downloadDebugLog } = await import('~/utils/debugLogger');
+                await downloadDebugLog();
+              } catch (error) {
+                console.error('Failed to download debug log:', error);
+              }
+            }}
+          >
+            <div className="i-ph:download w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
+            Download Debug Log
+          </DropdownMenu.Item>
+
+          <DropdownMenu.Item
+            className={classNames(
+              'flex items-center gap-2 px-4 py-2.5',
+              'text-sm text-gray-700 dark:text-gray-200',
+              'hover:bg-purple-50 dark:hover:bg-purple-500/10',
+              'hover:text-purple-500 dark:hover:text-purple-400',
+              'cursor-pointer transition-all duration-200',
+              'outline-none',
+              'group',
+            )}
+            onClick={() => window.open('https://stackblitz-labs.github.io/bolt.diy/', '_blank')}
+          >
+            <div className="i-ph:question w-4 h-4 text-gray-400 group-hover:text-purple-500 dark:group-hover:text-purple-400 transition-colors" />
+            Help & Documentation
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+};

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

@@ -0,0 +1,345 @@
+import { useState, useEffect, useMemo } from 'react';
+import { useStore } from '@nanostores/react';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { classNames } from '~/utils/classNames';
+import { TabTile } from '~/components/@settings/shared/components/TabTile';
+import { useFeatures } from '~/lib/hooks/useFeatures';
+import { useNotifications } from '~/lib/hooks/useNotifications';
+import { useConnectionStatus } from '~/lib/hooks/useConnectionStatus';
+import { tabConfigurationStore, resetTabConfiguration } from '~/lib/stores/settings';
+import { profileStore } from '~/lib/stores/profile';
+import type { TabType, Profile } from './types';
+import { TAB_LABELS, DEFAULT_TAB_CONFIG, TAB_DESCRIPTIONS } from './constants';
+import { DialogTitle } from '~/components/ui/Dialog';
+import { AvatarDropdown } from './AvatarDropdown';
+import BackgroundRays from '~/components/ui/BackgroundRays';
+
+// Import all tab components
+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 { EventLogsTab } from '~/components/@settings/tabs/event-logs/EventLogsTab';
+import GitHubTab from '~/components/@settings/tabs/github/GitHubTab';
+import GitLabTab from '~/components/@settings/tabs/gitlab/GitLabTab';
+import SupabaseTab from '~/components/@settings/tabs/supabase/SupabaseTab';
+import VercelTab from '~/components/@settings/tabs/vercel/VercelTab';
+import NetlifyTab from '~/components/@settings/tabs/netlify/NetlifyTab';
+import CloudProvidersTab from '~/components/@settings/tabs/providers/cloud/CloudProvidersTab';
+import LocalProvidersTab from '~/components/@settings/tabs/providers/local/LocalProvidersTab';
+import McpTab from '~/components/@settings/tabs/mcp/McpTab';
+
+interface ControlPanelProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+// Beta status for experimental features
+const BETA_TABS = new Set<TabType>(['local-providers', 'mcp']);
+
+const BetaLabel = () => (
+  <div className="absolute top-2 right-2 px-1.5 py-0.5 rounded-full bg-purple-500/10 dark:bg-purple-500/20">
+    <span className="text-[10px] font-medium text-purple-600 dark:text-purple-400">BETA</span>
+  </div>
+);
+
+export const ControlPanel = ({ open, onClose }: ControlPanelProps) => {
+  // State
+  const [activeTab, setActiveTab] = useState<TabType | null>(null);
+  const [loadingTab, setLoadingTab] = useState<TabType | null>(null);
+  const [showTabManagement, setShowTabManagement] = useState(false);
+
+  // Store values
+  const tabConfiguration = useStore(tabConfigurationStore);
+  const profile = useStore(profileStore) as Profile;
+
+  // Status hooks
+  const { hasNewFeatures, unviewedFeatures, acknowledgeAllFeatures } = useFeatures();
+  const { hasUnreadNotifications, unreadNotifications, markAllAsRead } = useNotifications();
+  const { hasConnectionIssues, currentIssue, acknowledgeIssue } = useConnectionStatus();
+
+  // Memoize the base tab configurations to avoid recalculation
+  const baseTabConfig = useMemo(() => {
+    return new Map(DEFAULT_TAB_CONFIG.map((tab) => [tab.id, tab]));
+  }, []);
+
+  // Add visibleTabs logic using useMemo with optimized calculations
+  const visibleTabs = useMemo(() => {
+    if (!tabConfiguration?.userTabs || !Array.isArray(tabConfiguration.userTabs)) {
+      console.warn('Invalid tab configuration, resetting to defaults');
+      resetTabConfiguration();
+
+      return [];
+    }
+
+    const notificationsDisabled = profile?.preferences?.notifications === false;
+
+    // Optimize user mode tab filtering
+    return tabConfiguration.userTabs
+      .filter((tab) => {
+        if (!tab?.id) {
+          return false;
+        }
+
+        if (tab.id === 'notifications' && notificationsDisabled) {
+          return false;
+        }
+
+        return tab.visible && tab.window === 'user';
+      })
+      .sort((a, b) => a.order - b.order);
+  }, [tabConfiguration, profile?.preferences?.notifications, baseTabConfig]);
+
+  // Reset to default view when modal opens/closes
+  useEffect(() => {
+    if (!open) {
+      // Reset when closing
+      setActiveTab(null);
+      setLoadingTab(null);
+      setShowTabManagement(false);
+    } else {
+      // When opening, set to null to show the main view
+      setActiveTab(null);
+    }
+  }, [open]);
+
+  // Handle closing
+  const handleClose = () => {
+    setActiveTab(null);
+    setLoadingTab(null);
+    setShowTabManagement(false);
+    onClose();
+  };
+
+  // Handlers
+  const handleBack = () => {
+    if (showTabManagement) {
+      setShowTabManagement(false);
+    } else if (activeTab) {
+      setActiveTab(null);
+    }
+  };
+
+  const getTabComponent = (tabId: TabType) => {
+    switch (tabId) {
+      case 'profile':
+        return <ProfileTab />;
+      case 'settings':
+        return <SettingsTab />;
+      case 'notifications':
+        return <NotificationsTab />;
+      case 'features':
+        return <FeaturesTab />;
+      case 'data':
+        return <DataTab />;
+      case 'cloud-providers':
+        return <CloudProvidersTab />;
+      case 'local-providers':
+        return <LocalProvidersTab />;
+      case 'github':
+        return <GitHubTab />;
+      case 'gitlab':
+        return <GitLabTab />;
+      case 'supabase':
+        return <SupabaseTab />;
+      case 'vercel':
+        return <VercelTab />;
+      case 'netlify':
+        return <NetlifyTab />;
+      case 'event-logs':
+        return <EventLogsTab />;
+      case 'mcp':
+        return <McpTab />;
+
+      default:
+        return null;
+    }
+  };
+
+  const getTabUpdateStatus = (tabId: TabType): boolean => {
+    switch (tabId) {
+      case 'features':
+        return hasNewFeatures;
+      case 'notifications':
+        return hasUnreadNotifications;
+      case 'github':
+      case 'gitlab':
+      case 'supabase':
+      case 'vercel':
+      case 'netlify':
+        return hasConnectionIssues;
+      default:
+        return false;
+    }
+  };
+
+  const getStatusMessage = (tabId: TabType): string => {
+    switch (tabId) {
+      case 'features':
+        return `${unviewedFeatures.length} new feature${unviewedFeatures.length === 1 ? '' : 's'} to explore`;
+      case 'notifications':
+        return `${unreadNotifications.length} unread notification${unreadNotifications.length === 1 ? '' : 's'}`;
+      case 'github':
+      case 'gitlab':
+      case 'supabase':
+      case 'vercel':
+      case 'netlify':
+        return currentIssue === 'disconnected'
+          ? 'Connection lost'
+          : currentIssue === 'high-latency'
+            ? 'High latency detected'
+            : 'Connection issues detected';
+      default:
+        return '';
+    }
+  };
+
+  const handleTabClick = (tabId: TabType) => {
+    setLoadingTab(tabId);
+    setActiveTab(tabId);
+    setShowTabManagement(false);
+
+    // Acknowledge notifications based on tab
+    switch (tabId) {
+      case 'features':
+        acknowledgeAllFeatures();
+        break;
+      case 'notifications':
+        markAllAsRead();
+        break;
+      case 'github':
+      case 'gitlab':
+      case 'supabase':
+      case 'vercel':
+      case 'netlify':
+        acknowledgeIssue();
+        break;
+    }
+
+    // Clear loading state after a delay
+    setTimeout(() => setLoadingTab(null), 500);
+  };
+
+  return (
+    <RadixDialog.Root open={open}>
+      <RadixDialog.Portal>
+        <div className="fixed inset-0 flex items-center justify-center z-[100] modern-scrollbar">
+          <RadixDialog.Overlay className="absolute inset-0 bg-black/70 dark:bg-black/80 backdrop-blur-sm transition-opacity duration-200" />
+
+          <RadixDialog.Content
+            aria-describedby={undefined}
+            onEscapeKeyDown={handleClose}
+            onPointerDownOutside={handleClose}
+            className="relative z-[101]"
+          >
+            <div
+              className={classNames(
+                'w-[1200px] h-[90vh]',
+                'bg-bolt-elements-background-depth-1',
+                'rounded-2xl shadow-2xl',
+                'border border-bolt-elements-borderColor',
+                'flex flex-col overflow-hidden',
+                'relative',
+                'transform transition-all duration-200 ease-out',
+                open ? 'opacity-100 scale-100 translate-y-0' : 'opacity-0 scale-95 translate-y-4',
+              )}
+            >
+              <div className="absolute inset-0 overflow-hidden rounded-2xl">
+                <BackgroundRays />
+              </div>
+              <div className="relative z-10 flex flex-col h-full">
+                {/* Header */}
+                <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
+                  <div className="flex items-center space-x-4">
+                    {(activeTab || showTabManagement) && (
+                      <button
+                        onClick={handleBack}
+                        className="flex items-center justify-center w-8 h-8 rounded-full bg-transparent hover:bg-purple-500/10 dark:hover:bg-purple-500/20 group transition-colors duration-150"
+                      >
+                        <div className="i-ph:arrow-left w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
+                      </button>
+                    )}
+                    <DialogTitle className="text-xl font-semibold text-gray-900 dark:text-white">
+                      {showTabManagement ? 'Tab Management' : activeTab ? TAB_LABELS[activeTab] : 'Control Panel'}
+                    </DialogTitle>
+                  </div>
+
+                  <div className="flex items-center gap-6">
+                    {/* Avatar and Dropdown */}
+                    <div className="pl-6">
+                      <AvatarDropdown onSelectTab={handleTabClick} />
+                    </div>
+
+                    {/* Close Button */}
+                    <button
+                      onClick={handleClose}
+                      className="flex items-center justify-center w-8 h-8 rounded-full bg-transparent hover:bg-purple-500/10 dark:hover:bg-purple-500/20 group transition-all duration-200"
+                    >
+                      <div className="i-ph:x w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
+                    </button>
+                  </div>
+                </div>
+
+                {/* Content */}
+                <div
+                  className={classNames(
+                    'flex-1',
+                    'overflow-y-auto',
+                    'hover:overflow-y-auto',
+                    'scrollbar scrollbar-w-2',
+                    'scrollbar-track-transparent',
+                    'scrollbar-thumb-[#E5E5E5] hover:scrollbar-thumb-[#CCCCCC]',
+                    'dark:scrollbar-thumb-[#333333] dark:hover:scrollbar-thumb-[#444444]',
+                    'will-change-scroll',
+                    'touch-auto',
+                  )}
+                >
+                  <div
+                    className={classNames(
+                      'p-6 transition-opacity duration-150',
+                      activeTab || showTabManagement ? 'opacity-100' : 'opacity-100',
+                    )}
+                  >
+                    {activeTab ? (
+                      getTabComponent(activeTab)
+                    ) : (
+                      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 relative">
+                        {visibleTabs.map((tab, index) => (
+                          <div
+                            key={tab.id}
+                            className={classNames(
+                              'aspect-[1.5/1] transition-transform duration-100 ease-out',
+                              'hover:scale-[1.01]',
+                            )}
+                            style={{
+                              animationDelay: `${index * 30}ms`,
+                              animation: open ? 'fadeInUp 200ms ease-out forwards' : 'none',
+                            }}
+                          >
+                            <TabTile
+                              tab={tab}
+                              onClick={() => handleTabClick(tab.id as TabType)}
+                              isActive={activeTab === tab.id}
+                              hasUpdate={getTabUpdateStatus(tab.id)}
+                              statusMessage={getStatusMessage(tab.id)}
+                              description={TAB_DESCRIPTIONS[tab.id]}
+                              isLoading={loadingTab === tab.id}
+                              className="h-full relative"
+                            >
+                              {BETA_TABS.has(tab.id) && <BetaLabel />}
+                            </TabTile>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </RadixDialog.Content>
+        </div>
+      </RadixDialog.Portal>
+    </RadixDialog.Root>
+  );
+};

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

@@ -0,0 +1,108 @@
+import type { TabType } from './types';
+import { User, Settings, Bell, Star, Database, Cloud, Laptop, Github, Wrench, List } from 'lucide-react';
+
+// GitLab icon component
+const GitLabIcon = () => (
+  <svg viewBox="0 0 24 24" className="w-4 h-4">
+    <path
+      fill="currentColor"
+      d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"
+    />
+  </svg>
+);
+
+// Vercel icon component
+const VercelIcon = () => (
+  <svg viewBox="0 0 24 24" className="w-4 h-4">
+    <path fill="currentColor" d="M12 2L2 19.777h20L12 2z" />
+  </svg>
+);
+
+// Netlify icon component
+const NetlifyIcon = () => (
+  <svg viewBox="0 0 24 24" className="w-4 h-4">
+    <path
+      fill="currentColor"
+      d="M16.934 8.519a1.044 1.044 0 0 1 .303-.23l2.349-1.045a.983.983 0 0 1 .905 0c.264.12.49.328.651.599l.518 1.065c.17.35.17.761 0 1.11l-.518 1.065a1.119 1.119 0 0 1-.651.599l-2.35 1.045a1.013 1.013 0 0 1-.904 0l-2.35-1.045a1.119 1.119 0 0 1-.651-.599L13.718 9.02a1.2 1.2 0 0 1 0-1.11l.518-1.065a1.119 1.119 0 0 1 .651-.599l2.35-1.045a.983.983 0 0 1 .697-.061zm-6.051 5.751a1.044 1.044 0 0 1 .303-.23l2.349-1.045a.983.983 0 0 1 .905 0c.264.12.49.328.651.599l.518 1.065c.17.35.17.761 0 1.11l-.518 1.065a1.119 1.119 0 0 1-.651.599l-2.35 1.045a1.013 1.013 0 0 1-.904 0l-2.35-1.045a1.119 1.119 0 0 1-.651-.599l-.518-1.065a1.2 1.2 0 0 1 0-1.11l.518-1.065a1.119 1.119 0 0 1 .651-.599l2.35-1.045a.983.983 0 0 1 .697-.061z"
+    />
+  </svg>
+);
+
+// Supabase icon component
+const SupabaseIcon = () => (
+  <svg viewBox="0 0 24 24" className="w-4 h-4">
+    <path
+      fill="currentColor"
+      d="M21.362 9.354H12V.396a.396.396 0 0 0-.716-.233L2.203 12.424l-.401.562a1.04 1.04 0 0 0 .836 1.659H12V21.6a.396.396 0 0 0 .716.233l9.081-12.261.401-.562a1.04 1.04 0 0 0-.836-1.656z"
+    />
+  </svg>
+);
+
+export const TAB_ICONS: Record<TabType, React.ComponentType<{ className?: string }>> = {
+  profile: User,
+  settings: Settings,
+  notifications: Bell,
+  features: Star,
+  data: Database,
+  'cloud-providers': Cloud,
+  'local-providers': Laptop,
+  github: Github,
+  gitlab: () => <GitLabIcon />,
+  netlify: () => <NetlifyIcon />,
+  vercel: () => <VercelIcon />,
+  supabase: () => <SupabaseIcon />,
+  'event-logs': List,
+  mcp: Wrench,
+};
+
+export const TAB_LABELS: Record<TabType, string> = {
+  profile: 'Profile',
+  settings: 'Settings',
+  notifications: 'Notifications',
+  features: 'Features',
+  data: 'Data Management',
+  'cloud-providers': 'Cloud Providers',
+  'local-providers': 'Local Providers',
+  github: 'GitHub',
+  gitlab: 'GitLab',
+  netlify: 'Netlify',
+  vercel: 'Vercel',
+  supabase: 'Supabase',
+  'event-logs': 'Event Logs',
+  mcp: 'MCP Servers',
+};
+
+export const TAB_DESCRIPTIONS: Record<TabType, string> = {
+  profile: 'Manage your profile and account settings',
+  settings: 'Configure application preferences',
+  notifications: 'View and manage your notifications',
+  features: 'Explore new and upcoming features',
+  data: 'Manage your data and storage',
+  'cloud-providers': 'Configure cloud AI providers and models',
+  'local-providers': 'Configure local AI providers and models',
+  github: 'Connect and manage GitHub integration',
+  gitlab: 'Connect and manage GitLab integration',
+  netlify: 'Configure Netlify deployment settings',
+  vercel: 'Manage Vercel projects and deployments',
+  supabase: 'Setup Supabase database connection',
+  'event-logs': 'View system events and logs',
+  mcp: 'Configure MCP (Model Context Protocol) servers',
+};
+
+export const DEFAULT_TAB_CONFIG = [
+  // User Window Tabs (Always visible by default)
+  { id: 'features', visible: true, window: 'user' as const, order: 0 },
+  { id: 'data', visible: true, window: 'user' as const, order: 1 },
+  { id: 'cloud-providers', visible: true, window: 'user' as const, order: 2 },
+  { id: 'local-providers', visible: true, window: 'user' as const, order: 3 },
+  { id: 'github', visible: true, window: 'user' as const, order: 4 },
+  { id: 'gitlab', visible: true, window: 'user' as const, order: 5 },
+  { id: 'netlify', visible: true, window: 'user' as const, order: 6 },
+  { id: 'vercel', visible: true, window: 'user' as const, order: 7 },
+  { id: 'supabase', visible: true, window: 'user' as const, order: 8 },
+  { id: 'notifications', visible: true, window: 'user' as const, order: 9 },
+  { id: 'event-logs', visible: true, window: 'user' as const, order: 10 },
+  { id: 'mcp', visible: true, window: 'user' as const, order: 11 },
+
+  // User Window Tabs (In dropdown, initially hidden)
+];

app/components/@settings/core/types.ts

@@ -0,0 +1,114 @@
+import type { ReactNode } from 'react';
+import { User, Folder, Wifi, Settings, Box, Sliders } from 'lucide-react';
+
+export type SettingCategory = 'profile' | 'file_sharing' | 'connectivity' | 'system' | 'services' | 'preferences';
+
+export type TabType =
+  | 'profile'
+  | 'settings'
+  | 'notifications'
+  | 'features'
+  | 'data'
+  | 'cloud-providers'
+  | 'local-providers'
+  | 'github'
+  | 'gitlab'
+  | 'netlify'
+  | 'vercel'
+  | 'supabase'
+  | 'event-logs'
+  | 'mcp';
+
+export type WindowType = 'user' | 'developer';
+
+export interface UserProfile {
+  nickname: any;
+  name: string;
+  email: string;
+  avatar?: string;
+  theme: 'light' | 'dark' | 'system';
+  notifications: boolean;
+  password?: string;
+  bio?: string;
+  language: string;
+  timezone: string;
+}
+
+export interface SettingItem {
+  id: TabType;
+  label: string;
+  icon: string;
+  category: SettingCategory;
+  description?: string;
+  component: () => ReactNode;
+  badge?: string;
+  keywords?: string[];
+}
+
+export interface TabVisibilityConfig {
+  id: TabType;
+  visible: boolean;
+  window: WindowType;
+  order: number;
+  isExtraDevTab?: boolean;
+  locked?: boolean;
+}
+
+export interface DevTabConfig extends TabVisibilityConfig {
+  window: 'developer';
+}
+
+export interface UserTabConfig extends TabVisibilityConfig {
+  window: 'user';
+}
+
+export interface TabWindowConfig {
+  userTabs: UserTabConfig[];
+}
+
+export const TAB_LABELS: Record<TabType, string> = {
+  profile: 'Profile',
+  settings: 'Settings',
+  notifications: 'Notifications',
+  features: 'Features',
+  data: 'Data Management',
+  'cloud-providers': 'Cloud Providers',
+  'local-providers': 'Local Providers',
+  github: 'GitHub',
+  gitlab: 'GitLab',
+  netlify: 'Netlify',
+  vercel: 'Vercel',
+  supabase: 'Supabase',
+  'event-logs': 'Event Logs',
+  mcp: 'MCP Servers',
+};
+
+export const categoryLabels: Record<SettingCategory, string> = {
+  profile: 'Profile & Account',
+  file_sharing: 'File Sharing',
+  connectivity: 'Connectivity',
+  system: 'System',
+  services: 'Services',
+  preferences: 'Preferences',
+};
+
+export const categoryIcons: Record<SettingCategory, React.ComponentType<{ className?: string }>> = {
+  profile: User,
+  file_sharing: Folder,
+  connectivity: Wifi,
+  system: Settings,
+  services: Box,
+  preferences: Sliders,
+};
+
+export interface Profile {
+  username?: string;
+  bio?: string;
+  avatar?: string;
+  preferences?: {
+    notifications?: boolean;
+    theme?: 'light' | 'dark' | 'system';
+    language?: string;
+    timezone?: string;
+  };
+}

app/components/@settings/index.ts

@@ -0,0 +1,12 @@
+// Core exports
+export { ControlPanel } from './core/ControlPanel';
+export type { TabType, TabVisibilityConfig } from './core/types';
+
+// Constants
+export { TAB_LABELS, TAB_DESCRIPTIONS, DEFAULT_TAB_CONFIG } from './core/constants';
+
+// Shared components
+export { TabTile } from './shared/components/TabTile';
+
+// Utils
+export { getVisibleTabs, reorderTabs, resetToDefaultConfig } from './utils/tab-helpers';

app/components/@settings/shared/components/TabTile.tsx

@@ -0,0 +1,151 @@
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { classNames } from '~/utils/classNames';
+import type { TabVisibilityConfig } from '~/components/@settings/core/types';
+import { TAB_LABELS, TAB_ICONS } from '~/components/@settings/core/constants';
+import { GlowingEffect } from '~/components/ui/GlowingEffect';
+
+interface TabTileProps {
+  tab: TabVisibilityConfig;
+  onClick?: () => void;
+  isActive?: boolean;
+  hasUpdate?: boolean;
+  statusMessage?: string;
+  description?: string;
+  isLoading?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const TabTile: React.FC<TabTileProps> = ({
+  tab,
+  onClick,
+  isActive,
+  hasUpdate,
+  statusMessage,
+  description,
+  isLoading,
+  className,
+  children,
+}: TabTileProps) => {
+  return (
+    <Tooltip.Provider delayDuration={0}>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <div className={classNames('min-h-[160px] list-none', className || '')}>
+            <div className="relative h-full rounded-xl border border-[#E5E5E5] dark:border-[#333333] p-0.5">
+              <GlowingEffect
+                blur={0}
+                borderWidth={1}
+                spread={20}
+                glow={true}
+                disabled={false}
+                proximity={40}
+                inactiveZone={0.3}
+                movementDuration={0.4}
+              />
+              <div
+                onClick={onClick}
+                className={classNames(
+                  'relative flex flex-col items-center justify-center h-full p-4 rounded-lg',
+                  'bg-white dark:bg-[#141414]',
+                  'group cursor-pointer',
+                  'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
+                  'transition-colors duration-100 ease-out',
+                  isActive ? 'bg-purple-500/5 dark:bg-purple-500/10' : '',
+                  isLoading ? 'cursor-wait opacity-70 pointer-events-none' : '',
+                )}
+              >
+                {/* Icon */}
+                <div
+                  className={classNames(
+                    'relative',
+                    'w-14 h-14',
+                    'flex items-center justify-center',
+                    'rounded-xl',
+                    'bg-gray-100 dark:bg-gray-800',
+                    'ring-1 ring-gray-200 dark:ring-gray-700',
+                    'group-hover:bg-purple-100 dark:group-hover:bg-gray-700/80',
+                    'group-hover:ring-purple-200 dark:group-hover:ring-purple-800/30',
+                    'transition-all duration-100 ease-out',
+                    isActive ? 'bg-purple-500/10 dark:bg-purple-500/10 ring-purple-500/30 dark:ring-purple-500/20' : '',
+                  )}
+                >
+                  {(() => {
+                    const IconComponent = TAB_ICONS[tab.id];
+                    return (
+                      <IconComponent
+                        className={classNames(
+                          'w-8 h-8',
+                          'text-gray-600 dark:text-gray-300',
+                          'group-hover:text-purple-500 dark:group-hover:text-purple-400/80',
+                          'transition-colors duration-100 ease-out',
+                          isActive ? 'text-purple-500 dark:text-purple-400/90' : '',
+                        )}
+                      />
+                    );
+                  })()}
+                </div>
+
+                {/* Label and Description */}
+                <div className="flex flex-col items-center mt-4 w-full">
+                  <h3
+                    className={classNames(
+                      'text-[15px] font-medium leading-snug mb-2',
+                      'text-gray-700 dark:text-gray-200',
+                      'group-hover:text-purple-600 dark:group-hover:text-purple-300/90',
+                      'transition-colors duration-100 ease-out',
+                      isActive ? 'text-purple-500 dark:text-purple-400/90' : '',
+                    )}
+                  >
+                    {TAB_LABELS[tab.id]}
+                  </h3>
+                  {description && (
+                    <p
+                      className={classNames(
+                        'text-[13px] leading-relaxed',
+                        'text-gray-500 dark:text-gray-400',
+                        'max-w-[85%]',
+                        'text-center',
+                        'group-hover:text-purple-500 dark:group-hover:text-purple-400/70',
+                        'transition-colors duration-100 ease-out',
+                        isActive ? 'text-purple-400 dark:text-purple-400/80' : '',
+                      )}
+                    >
+                      {description}
+                    </p>
+                  )}
+                </div>
+
+                {/* Update Indicator with Tooltip */}
+                {hasUpdate && (
+                  <>
+                    <div className="absolute top-4 right-4 w-2 h-2 rounded-full bg-purple-500 dark:bg-purple-400 animate-pulse" />
+                    <Tooltip.Portal>
+                      <Tooltip.Content
+                        className={classNames(
+                          'px-3 py-1.5 rounded-lg',
+                          'bg-[#18181B] text-white',
+                          'text-sm font-medium',
+                          'select-none',
+                          'z-[100]',
+                        )}
+                        side="top"
+                        sideOffset={5}
+                      >
+                        {statusMessage}
+                        <Tooltip.Arrow className="fill-[#18181B]" />
+                      </Tooltip.Content>
+                    </Tooltip.Portal>
+                  </>
+                )}
+
+                {/* Children (e.g. Beta Label) */}
+                {children}
+              </div>
+            </div>
+          </div>
+        </Tooltip.Trigger>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  );
+};

app/components/@settings/shared/service-integration/ConnectionForm.tsx

@@ -0,0 +1,193 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+
+interface TokenTypeOption {
+  value: string;
+  label: string;
+  description?: string;
+}
+
+interface ConnectionFormProps {
+  isConnected: boolean;
+  isConnecting: boolean;
+  token: string;
+  onTokenChange: (token: string) => void;
+  onConnect: (e: React.FormEvent) => void;
+  onDisconnect: () => void;
+  error?: string;
+  serviceName: string;
+  tokenLabel?: string;
+  tokenPlaceholder?: string;
+  getTokenUrl: string;
+  environmentVariable?: string;
+  tokenTypes?: TokenTypeOption[];
+  selectedTokenType?: string;
+  onTokenTypeChange?: (type: string) => void;
+  connectedMessage?: string;
+  children?: React.ReactNode; // For additional form fields
+}
+
+export function ConnectionForm({
+  isConnected,
+  isConnecting,
+  token,
+  onTokenChange,
+  onConnect,
+  onDisconnect,
+  error,
+  serviceName,
+  tokenLabel = 'Access Token',
+  tokenPlaceholder,
+  getTokenUrl,
+  environmentVariable,
+  tokenTypes,
+  selectedTokenType,
+  onTokenTypeChange,
+  connectedMessage = `Connected to ${serviceName}`,
+  children,
+}: ConnectionFormProps) {
+  return (
+    <motion.div
+      className="bg-bolt-elements-background dark:bg-bolt-elements-background border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.2 }}
+    >
+      <div className="p-6 space-y-6">
+        {!isConnected ? (
+          <div className="space-y-4">
+            {environmentVariable && (
+              <div className="text-xs text-bolt-elements-textSecondary bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1 p-3 rounded-lg mb-4">
+                <p className="flex items-center gap-1 mb-1">
+                  <span className="i-ph:lightbulb w-3.5 h-3.5 text-bolt-elements-icon-success dark:text-bolt-elements-icon-success" />
+                  <span className="font-medium">Tip:</span> You can also set the{' '}
+                  <code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 rounded">
+                    {environmentVariable}
+                  </code>{' '}
+                  environment variable to connect automatically.
+                </p>
+              </div>
+            )}
+
+            <form onSubmit={onConnect} className="space-y-4">
+              {tokenTypes && tokenTypes.length > 1 && onTokenTypeChange && (
+                <div>
+                  <label className="block text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mb-2">
+                    Token Type
+                  </label>
+                  <select
+                    value={selectedTokenType}
+                    onChange={(e) => onTokenTypeChange(e.target.value)}
+                    disabled={isConnecting}
+                    className={classNames(
+                      'w-full px-3 py-2 rounded-lg text-sm',
+                      'bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1',
+                      'border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor',
+                      'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
+                      'focus:outline-none focus:ring-1 focus:ring-bolt-elements-item-contentAccent dark:focus:ring-bolt-elements-item-contentAccent',
+                      'disabled:opacity-50',
+                    )}
+                  >
+                    {tokenTypes.map((type) => (
+                      <option key={type.value} value={type.value}>
+                        {type.label}
+                      </option>
+                    ))}
+                  </select>
+                  {selectedTokenType && tokenTypes.find((t) => t.value === selectedTokenType)?.description && (
+                    <p className="mt-1 text-xs text-bolt-elements-textTertiary">
+                      {tokenTypes.find((t) => t.value === selectedTokenType)?.description}
+                    </p>
+                  )}
+                </div>
+              )}
+
+              <div>
+                <label className="block text-sm text-bolt-elements-textSecondary mb-2">{tokenLabel}</label>
+                <input
+                  type="password"
+                  value={token}
+                  onChange={(e) => onTokenChange(e.target.value)}
+                  disabled={isConnecting}
+                  placeholder={tokenPlaceholder || `Enter your ${serviceName} access token`}
+                  className={classNames(
+                    'w-full px-3 py-2 rounded-lg text-sm',
+                    'bg-bolt-elements-background-depth-1',
+                    'border border-bolt-elements-borderColor',
+                    '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={getTokenUrl}
+                    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>
+
+              {children}
+
+              {error && (
+                <div className="p-4 rounded-lg bg-red-50 border border-red-200 dark:bg-red-900/20 dark:border-red-700">
+                  <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
+                </div>
+              )}
+
+              <button
+                type="submit"
+                disabled={isConnecting || !token.trim()}
+                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>
+            </form>
+          </div>
+        ) : (
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <button
+                onClick={onDisconnect}
+                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" />
+                {connectedMessage}
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+    </motion.div>
+  );
+}

app/components/@settings/shared/service-integration/ConnectionTestIndicator.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+
+export interface ConnectionTestResult {
+  status: 'success' | 'error' | 'testing';
+  message: string;
+  timestamp?: number;
+}
+
+interface ConnectionTestIndicatorProps {
+  testResult: ConnectionTestResult | null;
+  className?: string;
+}
+
+export function ConnectionTestIndicator({ testResult, className }: ConnectionTestIndicatorProps) {
+  if (!testResult) {
+    return null;
+  }
+
+  return (
+    <motion.div
+      className={classNames(
+        'p-4 rounded-lg border',
+        {
+          'bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-700': testResult.status === 'success',
+          'bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-700': testResult.status === 'error',
+          'bg-blue-50 border-blue-200 dark:bg-blue-900/20 dark:border-blue-700': testResult.status === 'testing',
+        },
+        className,
+      )}
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+    >
+      <div className="flex items-center gap-2">
+        {testResult.status === 'success' && (
+          <div className="i-ph:check-circle w-5 h-5 text-green-600 dark:text-green-400" />
+        )}
+        {testResult.status === 'error' && (
+          <div className="i-ph:warning-circle w-5 h-5 text-red-600 dark:text-red-400" />
+        )}
+        {testResult.status === 'testing' && (
+          <div className="i-ph:spinner-gap w-5 h-5 animate-spin text-blue-600 dark:text-blue-400" />
+        )}
+        <span
+          className={classNames('text-sm font-medium', {
+            'text-green-800 dark:text-green-200': testResult.status === 'success',
+            'text-red-800 dark:text-red-200': testResult.status === 'error',
+            'text-blue-800 dark:text-blue-200': testResult.status === 'testing',
+          })}
+        >
+          {testResult.message}
+        </span>
+      </div>
+      {testResult.timestamp && (
+        <p className="text-xs text-gray-500 mt-1">{new Date(testResult.timestamp).toLocaleString()}</p>
+      )}
+    </motion.div>
+  );
+}

app/components/@settings/shared/service-integration/ErrorState.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Button } from '~/components/ui/Button';
+import { classNames } from '~/utils/classNames';
+import type { ServiceError } from '~/lib/utils/serviceErrorHandler';
+
+interface ErrorStateProps {
+  error?: ServiceError | string;
+  title?: string;
+  onRetry?: () => void;
+  onDismiss?: () => void;
+  retryLabel?: string;
+  className?: string;
+  showDetails?: boolean;
+}
+
+export function ErrorState({
+  error,
+  title = 'Something went wrong',
+  onRetry,
+  onDismiss,
+  retryLabel = 'Try again',
+  className,
+  showDetails = false,
+}: ErrorStateProps) {
+  const errorMessage = typeof error === 'string' ? error : error?.message || 'An unknown error occurred';
+  const isServiceError = typeof error === 'object' && error !== null;
+
+  return (
+    <motion.div
+      className={classNames(
+        'p-6 rounded-lg border border-red-200 bg-red-50 dark:border-red-700 dark:bg-red-900/20',
+        className,
+      )}
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+    >
+      <div className="flex items-start gap-3">
+        <div className="i-ph:warning-circle w-5 h-5 text-red-600 dark:text-red-400 flex-shrink-0 mt-0.5" />
+        <div className="flex-1 min-w-0">
+          <h3 className="text-sm font-medium text-red-800 dark:text-red-200 mb-1">{title}</h3>
+          <p className="text-sm text-red-700 dark:text-red-300">{errorMessage}</p>
+
+          {showDetails && isServiceError && error.details && (
+            <details className="mt-3">
+              <summary className="text-xs text-red-600 dark:text-red-400 cursor-pointer hover:underline">
+                Technical details
+              </summary>
+              <pre className="mt-2 text-xs text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900/30 p-2 rounded overflow-auto">
+                {JSON.stringify(error.details, null, 2)}
+              </pre>
+            </details>
+          )}
+
+          <div className="flex items-center gap-2 mt-4">
+            {onRetry && (
+              <Button
+                onClick={onRetry}
+                variant="outline"
+                size="sm"
+                className="text-red-700 border-red-300 hover:bg-red-100 dark:text-red-300 dark:border-red-600 dark:hover:bg-red-900/30"
+              >
+                <div className="i-ph:arrows-clockwise w-4 h-4 mr-1" />
+                {retryLabel}
+              </Button>
+            )}
+            {onDismiss && (
+              <Button
+                onClick={onDismiss}
+                variant="outline"
+                size="sm"
+                className="text-red-700 border-red-300 hover:bg-red-100 dark:text-red-300 dark:border-red-600 dark:hover:bg-red-900/30"
+              >
+                Dismiss
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+}
+
+interface ConnectionErrorProps {
+  service: string;
+  error: ServiceError | string;
+  onRetryConnection: () => void;
+  onClearError?: () => void;
+}
+
+export function ConnectionError({ service, error, onRetryConnection, onClearError }: ConnectionErrorProps) {
+  return (
+    <ErrorState
+      error={error}
+      title={`Failed to connect to ${service}`}
+      onRetry={onRetryConnection}
+      onDismiss={onClearError}
+      retryLabel="Retry connection"
+      showDetails={true}
+    />
+  );
+}

app/components/@settings/shared/service-integration/LoadingState.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+
+interface LoadingStateProps {
+  message?: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+  showProgress?: boolean;
+  progress?: number;
+}
+
+export function LoadingState({
+  message = 'Loading...',
+  size = 'md',
+  className,
+  showProgress = false,
+  progress = 0,
+}: LoadingStateProps) {
+  const sizeClasses = {
+    sm: 'w-4 h-4',
+    md: 'w-6 h-6',
+    lg: 'w-8 h-8',
+  };
+
+  return (
+    <motion.div
+      className={classNames('flex flex-col items-center justify-center gap-3', className)}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+    >
+      <div className="flex items-center gap-2">
+        <div
+          className={classNames(
+            'i-ph:spinner-gap animate-spin text-bolt-elements-item-contentAccent',
+            sizeClasses[size],
+          )}
+        />
+        <span className="text-bolt-elements-textSecondary">{message}</span>
+      </div>
+
+      {showProgress && (
+        <div className="w-full max-w-xs">
+          <div className="w-full bg-bolt-elements-background-depth-2 rounded-full h-1">
+            <motion.div
+              className="bg-bolt-elements-item-contentAccent h-1 rounded-full"
+              initial={{ width: 0 }}
+              animate={{ width: `${progress}%` }}
+              transition={{ duration: 0.3 }}
+            />
+          </div>
+        </div>
+      )}
+    </motion.div>
+  );
+}
+
+interface SkeletonProps {
+  className?: string;
+  lines?: number;
+}
+
+export function Skeleton({ className, lines = 1 }: SkeletonProps) {
+  return (
+    <div className={classNames('animate-pulse', className)}>
+      {Array.from({ length: lines }, (_, i) => (
+        <div
+          key={i}
+          className={classNames(
+            'bg-bolt-elements-background-depth-2 rounded',
+            i === lines - 1 ? 'h-4' : 'h-4 mb-2',
+            i === lines - 1 && lines > 1 ? 'w-3/4' : 'w-full',
+          )}
+        />
+      ))}
+    </div>
+  );
+}
+
+interface ServiceLoadingProps {
+  serviceName: string;
+  operation: string;
+  progress?: number;
+}
+
+export function ServiceLoading({ serviceName, operation, progress }: ServiceLoadingProps) {
+  return (
+    <LoadingState
+      message={`${operation} ${serviceName}...`}
+      showProgress={progress !== undefined}
+      progress={progress}
+    />
+  );
+}

app/components/@settings/shared/service-integration/ServiceHeader.tsx

@@ -0,0 +1,72 @@
+import React, { memo } from 'react';
+import { motion } from 'framer-motion';
+import { Button } from '~/components/ui/Button';
+
+interface ServiceHeaderProps {
+  icon: React.ComponentType<{ className?: string }>;
+  title: string;
+  description?: string;
+  onTestConnection?: () => void;
+  isTestingConnection?: boolean;
+  additionalInfo?: React.ReactNode;
+  delay?: number;
+}
+
+export const ServiceHeader = memo(
+  ({
+    icon: Icon, // eslint-disable-line @typescript-eslint/naming-convention
+    title,
+    description,
+    onTestConnection,
+    isTestingConnection,
+    additionalInfo,
+    delay = 0.1,
+  }: ServiceHeaderProps) => {
+    return (
+      <>
+        <motion.div
+          className="flex items-center justify-between gap-2"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay }}
+        >
+          <div className="flex items-center gap-2">
+            <Icon className="w-5 h-5" />
+            <h2 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+              {title}
+            </h2>
+          </div>
+          <div className="flex items-center gap-2">
+            {additionalInfo}
+            {onTestConnection && (
+              <Button
+                onClick={onTestConnection}
+                disabled={isTestingConnection}
+                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"
+              >
+                {isTestingConnection ? (
+                  <>
+                    <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+                    Testing...
+                  </>
+                ) : (
+                  <>
+                    <div className="i-ph:plug-charging w-4 h-4" />
+                    Test Connection
+                  </>
+                )}
+              </Button>
+            )}
+          </div>
+        </motion.div>
+
+        {description && (
+          <p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+            {description}
+          </p>
+        )}
+      </>
+    );
+  },
+);

app/components/@settings/shared/service-integration/index.ts

@@ -0,0 +1,6 @@
+export { ConnectionTestIndicator } from './ConnectionTestIndicator';
+export type { ConnectionTestResult } from './ConnectionTestIndicator';
+export { ServiceHeader } from './ServiceHeader';
+export { ConnectionForm } from './ConnectionForm';
+export { LoadingState, Skeleton, ServiceLoading } from './LoadingState';
+export { ErrorState, ConnectionError } from './ErrorState';

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

@@ -0,0 +1,721 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { Button } from '~/components/ui/Button';
+import { ConfirmationDialog, SelectionDialog } from '~/components/ui/Dialog';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '~/components/ui/Card';
+import { motion } from 'framer-motion';
+import { useDataOperations } from '~/lib/hooks/useDataOperations';
+import { openDatabase } from '~/lib/persistence/db';
+import { getAllChats, type Chat } from '~/lib/persistence/chats';
+import { DataVisualization } from './DataVisualization';
+import { classNames } from '~/utils/classNames';
+import { toast } from 'react-toastify';
+
+// Create a custom hook to connect to the boltHistory database
+function useBoltHistoryDB() {
+  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 database = await openDatabase();
+        setDb(database || null);
+        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 };
+}
+
+// Extend the Chat interface to include the missing properties
+interface ExtendedChat extends Chat {
+  title?: string;
+  updatedAt?: number;
+}
+
+// Helper function to create a chat label and description
+function createChatItem(chat: Chat): ChatItem {
+  return {
+    id: chat.id,
+
+    // Use description as title if available, or format a short ID
+    label: (chat as ExtendedChat).title || chat.description || `Chat ${chat.id.slice(0, 8)}`,
+
+    // Format the description with message count and timestamp
+    description: `${chat.messages.length} messages - Last updated: ${new Date((chat as ExtendedChat).updatedAt || Date.parse(chat.timestamp)).toLocaleString()}`,
+  };
+}
+
+interface SettingsCategory {
+  id: string;
+  label: string;
+  description: string;
+}
+
+interface ChatItem {
+  id: string;
+  label: string;
+  description: string;
+}
+
+export function DataTab() {
+  // Use our custom hook for the boltHistory database
+  const { db, isLoading: dbLoading } = useBoltHistoryDB();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const apiKeyFileInputRef = useRef<HTMLInputElement>(null);
+  const chatFileInputRef = useRef<HTMLInputElement>(null);
+
+  // State for confirmation dialogs
+  const [showResetInlineConfirm, setShowResetInlineConfirm] = useState(false);
+  const [showDeleteInlineConfirm, setShowDeleteInlineConfirm] = useState(false);
+  const [showSettingsSelection, setShowSettingsSelection] = useState(false);
+  const [showChatsSelection, setShowChatsSelection] = useState(false);
+
+  // State for settings categories and available chats
+  const [settingsCategories] = useState<SettingsCategory[]>([
+    { id: 'core', label: 'Core Settings', description: 'User profile and main settings' },
+    { id: 'providers', label: 'Providers', description: 'API keys and provider configurations' },
+    { id: 'features', label: 'Features', description: 'Feature flags and settings' },
+    { id: 'ui', label: 'UI', description: 'UI configuration and preferences' },
+    { id: 'connections', label: 'Connections', description: 'External service connections' },
+    { id: 'debug', label: 'Debug', description: 'Debug settings and logs' },
+    { id: 'updates', label: 'Updates', description: 'Update settings and notifications' },
+  ]);
+
+  const [availableChats, setAvailableChats] = useState<ExtendedChat[]>([]);
+  const [chatItems, setChatItems] = useState<ChatItem[]>([]);
+
+  // Data operations hook with boltHistory database
+  const {
+    isExporting,
+    isImporting,
+    isResetting,
+    isDownloadingTemplate,
+    handleExportSettings,
+    handleExportSelectedSettings,
+    handleExportAllChats,
+    handleExportSelectedChats,
+    handleImportSettings,
+    handleImportChats,
+    handleResetSettings,
+    handleResetChats,
+    handleDownloadTemplate,
+    handleImportAPIKeys,
+  } = useDataOperations({
+    customDb: db || undefined, // Pass the boltHistory database, converting null to undefined
+    onReloadSettings: () => window.location.reload(),
+    onReloadChats: () => {
+      // Reload chats after reset
+      if (db) {
+        getAllChats(db).then((chats) => {
+          // Cast to ExtendedChat to handle additional properties
+          const extendedChats = chats as ExtendedChat[];
+          setAvailableChats(extendedChats);
+          setChatItems(extendedChats.map((chat) => createChatItem(chat)));
+        });
+      }
+    },
+    onResetSettings: () => setShowResetInlineConfirm(false),
+    onResetChats: () => setShowDeleteInlineConfirm(false),
+  });
+
+  // Loading states for operations not provided by the hook
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isImportingKeys, setIsImportingKeys] = useState(false);
+
+  // Load available chats
+  useEffect(() => {
+    if (db) {
+      console.log('Loading chats from boltHistory database', {
+        name: db.name,
+        version: db.version,
+        objectStoreNames: Array.from(db.objectStoreNames),
+      });
+
+      getAllChats(db)
+        .then((chats) => {
+          console.log('Found chats:', chats.length);
+
+          // Cast to ExtendedChat to handle additional properties
+          const extendedChats = chats as ExtendedChat[];
+          setAvailableChats(extendedChats);
+
+          // Create ChatItems for selection dialog
+          setChatItems(extendedChats.map((chat) => createChatItem(chat)));
+        })
+        .catch((error) => {
+          console.error('Error loading chats:', error);
+          toast.error('Failed to load chats: ' + (error instanceof Error ? error.message : 'Unknown error'));
+        });
+    }
+  }, [db]);
+
+  // Handle file input changes
+  const handleFileInputChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+
+      if (file) {
+        handleImportSettings(file);
+      }
+    },
+    [handleImportSettings],
+  );
+
+  const handleAPIKeyFileInputChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+
+      if (file) {
+        setIsImportingKeys(true);
+        handleImportAPIKeys(file).finally(() => setIsImportingKeys(false));
+      }
+    },
+    [handleImportAPIKeys],
+  );
+
+  const handleChatFileInputChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+
+      if (file) {
+        handleImportChats(file);
+      }
+    },
+    [handleImportChats],
+  );
+
+  // Wrapper for reset chats to handle loading state
+  const handleResetChatsWithState = useCallback(() => {
+    setIsDeleting(true);
+    handleResetChats().finally(() => setIsDeleting(false));
+  }, [handleResetChats]);
+
+  return (
+    <div className="space-y-12">
+      {/* Hidden file inputs */}
+      <input ref={fileInputRef} type="file" accept=".json" onChange={handleFileInputChange} className="hidden" />
+      <input
+        ref={apiKeyFileInputRef}
+        type="file"
+        accept=".json"
+        onChange={handleAPIKeyFileInputChange}
+        className="hidden"
+      />
+      <input
+        ref={chatFileInputRef}
+        type="file"
+        accept=".json"
+        onChange={handleChatFileInputChange}
+        className="hidden"
+      />
+
+      {/* Reset Settings Confirmation Dialog */}
+      <ConfirmationDialog
+        isOpen={showResetInlineConfirm}
+        onClose={() => setShowResetInlineConfirm(false)}
+        title="Reset All Settings?"
+        description="This will reset all your settings to their default values. This action cannot be undone."
+        confirmLabel="Reset Settings"
+        cancelLabel="Cancel"
+        variant="destructive"
+        isLoading={isResetting}
+        onConfirm={handleResetSettings}
+      />
+
+      {/* Delete Chats Confirmation Dialog */}
+      <ConfirmationDialog
+        isOpen={showDeleteInlineConfirm}
+        onClose={() => setShowDeleteInlineConfirm(false)}
+        title="Delete All Chats?"
+        description="This will permanently delete all your chat history. This action cannot be undone."
+        confirmLabel="Delete All"
+        cancelLabel="Cancel"
+        variant="destructive"
+        isLoading={isDeleting}
+        onConfirm={handleResetChatsWithState}
+      />
+
+      {/* Settings Selection Dialog */}
+      <SelectionDialog
+        isOpen={showSettingsSelection}
+        onClose={() => setShowSettingsSelection(false)}
+        title="Select Settings to Export"
+        items={settingsCategories}
+        onConfirm={(selectedIds) => {
+          handleExportSelectedSettings(selectedIds);
+          setShowSettingsSelection(false);
+        }}
+        confirmLabel="Export Selected"
+      />
+
+      {/* Chats Selection Dialog */}
+      <SelectionDialog
+        isOpen={showChatsSelection}
+        onClose={() => setShowChatsSelection(false)}
+        title="Select Chats to Export"
+        items={chatItems}
+        onConfirm={(selectedIds) => {
+          handleExportSelectedChats(selectedIds);
+          setShowChatsSelection(false);
+        }}
+        confirmLabel="Export Selected"
+      />
+
+      {/* Chats Section */}
+      <div>
+        <h2 className="text-xl font-semibold mb-4 text-bolt-elements-textPrimary">Chats</h2>
+        {dbLoading ? (
+          <div className="flex items-center justify-center p-4">
+            <div className="i-ph-spinner-gap-bold animate-spin w-6 h-6 mr-2" />
+            <span>Loading chats database...</span>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <Card>
+              <CardHeader>
+                <div className="flex items-center mb-2">
+                  <motion.div className="text-accent-500 mr-2" whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+                    <div className="i-ph-download-duotone w-5 h-5" />
+                  </motion.div>
+                  <CardTitle className="text-lg group-hover:text-bolt-elements-item-contentAccent transition-colors">
+                    Export All Chats
+                  </CardTitle>
+                </div>
+                <CardDescription>Export all your chats to a JSON file.</CardDescription>
+              </CardHeader>
+              <CardFooter>
+                <motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.97 }} className="w-full">
+                  <Button
+                    onClick={async () => {
+                      try {
+                        if (!db) {
+                          toast.error('Database not available');
+                          return;
+                        }
+
+                        console.log('Database information:', {
+                          name: db.name,
+                          version: db.version,
+                          objectStoreNames: Array.from(db.objectStoreNames),
+                        });
+
+                        if (availableChats.length === 0) {
+                          toast.warning('No chats available to export');
+                          return;
+                        }
+
+                        await handleExportAllChats();
+                      } catch (error) {
+                        console.error('Error exporting chats:', error);
+                        toast.error(
+                          `Failed to export chats: ${error instanceof Error ? error.message : 'Unknown error'}`,
+                        );
+                      }
+                    }}
+                    disabled={isExporting || availableChats.length === 0}
+                    variant="outline"
+                    size="sm"
+                    className={classNames(
+                      'hover:text-bolt-elements-item-contentAccent hover:border-bolt-elements-item-backgroundAccent hover:bg-bolt-elements-item-backgroundAccent transition-colors w-full justify-center',
+                      isExporting || availableChats.length === 0 ? 'cursor-not-allowed' : '',
+                    )}
+                  >
+                    {isExporting ? (
+                      <>
+                        <div className="i-ph-spinner-gap-bold animate-spin w-4 h-4 mr-2" />
+                        Exporting...
+                      </>
+                    ) : availableChats.length === 0 ? (
+                      'No Chats to Export'
+                    ) : (
+                      'Export All'
+                    )}
+                  </Button>
+                </motion.div>
+              </CardFooter>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <div className="flex items-center mb-2">
+                  <motion.div className="text-accent-500 mr-2" whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+                    <div className="i-ph:list-checks w-5 h-5" />
+                  </motion.div>
+                  <CardTitle className="text-lg group-hover:text-bolt-elements-item-contentAccent transition-colors">
+                    Export Selected Chats
+                  </CardTitle>
+                </div>
+                <CardDescription>Choose specific chats to export.</CardDescription>
+              </CardHeader>
+              <CardFooter>
+                <motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.97 }} className="w-full">
+                  <Button
+                    onClick={() => setShowChatsSelection(true)}
+                    disabled={isExporting || chatItems.length === 0}
+                    variant="outline"
+                    size="sm"
+                    className={classNames(
+                      'hover:text-bolt-elements-item-contentAccent hover:border-bolt-elements-item-backgroundAccent hover:bg-bolt-elements-item-backgroundAccent transition-colors w-full justify-center',
+                      isExporting || chatItems.length === 0 ? 'cursor-not-allowed' : '',
+                    )}
+                  >
+                    {isExporting ? (
+                      <>
+                        <div className="i-ph-spinner-gap-bold animate-spin w-4 h-4 mr-2" />
+                        Exporting...
+                      </>
+                    ) : (
+                      'Select Chats'
+                    )}
+                  </Button>
+                </motion.div>
+              </CardFooter>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <div className="flex items-center mb-2">
+                  <motion.div className="text-accent-500 mr-2" whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+                    <div className="i-ph-upload-duotone w-5 h-5" />
+                  </motion.div>
+                  <CardTitle className="text-lg group-hover:text-bolt-elements-item-contentAccent transition-colors">
+                    Import Chats
+                  </CardTitle>
+                </div>
+                <CardDescription>Import chats from a JSON file.</CardDescription>
+              </CardHeader>
+              <CardFooter>
+                <motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.97 }} className="w-full">
+                  <Button
+                    onClick={() => chatFileInputRef.current?.click()}
+                    disabled={isImporting}
+                    variant="outline"
+                    size="sm"
+                    className={classNames(
+                      'hover:text-bolt-elements-item-contentAccent hover:border-bolt-elements-item-backgroundAccent hover:bg-bolt-elements-item-backgroundAccent transition-colors w-full justify-center',
+                      isImporting ? 'cursor-not-allowed' : '',
+                    )}
+                  >
+                    {isImporting ? (
+                      <>
+                        <div className="i-ph-spinner-gap-bold animate-spin w-4 h-4 mr-2" />
+                        Importing...
+                      </>
+                    ) : (
+                      'Import Chats'
+                    )}
+                  </Button>
+                </motion.div>
+              </CardFooter>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <div className="flex items-center mb-2">
+                  <motion.div
+                    className="text-red-500 dark:text-red-400 mr-2"
+                    whileHover={{ scale: 1.1 }}
+                    whileTap={{ scale: 0.9 }}
+                  >
+                    <div className="i-ph-trash-duotone w-5 h-5" />
+                  </motion.div>
+                  <CardTitle className="text-lg group-hover:text-bolt-elements-item-contentAccent transition-colors">
+                    Delete All Chats
+                  </CardTitle>
+                </div>
+                <CardDescription>Delete all your chat history.</CardDescription>
+              </CardHeader>
+              <CardFooter>
+                <motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.97 }} className="w-full">
+                  <Button
+                    onClick={() => setShowDeleteInlineConfirm(true)}
+                    disabled={isDeleting || chatItems.length === 0}
+                    variant="outline"
+                    size="sm"
+                    className={classNames(
+                      'hover:text-bolt-elements-item-contentAccent hover:border-bolt-elements-item-backgroundAccent hover:bg-bolt-elements-item-backgroundAccent transition-colors w-full justify-center',
+                      isDeleting || chatItems.length === 0 ? 'cursor-not-allowed' : '',
+                    )}
+                  >
+                    {isDeleting ? (
+                      <>
+                        <div className="i-ph-spinner-gap-bold animate-spin w-4 h-4 mr-2" />
+                        Deleting...
+                      </>
+                    ) : (
+                      'Delete All'
+                    )}
+                  </Button>
+                </motion.div>
+              </CardFooter>
+            </Card>
+          </div>
+        )}
+      </div>
+
+      {/* Settings Section */}
+      <div>
+        <h2 className="text-xl font-semibold mb-4 text-bolt-elements-textPrimary">Settings</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <Card>
+            <CardHeader>
+              <div className="flex items-center mb-2">
+                <motion.div className="text-accent-500 mr-2" whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+                  <div className="i-ph-download-duotone w-5 h-5" />
+                </motion.div>
+                <CardTitle className="text-lg group-hover:text-bolt-elements-item-contentAccent transition-colors">
+                  Export All Settings
+                </CardTitle>
+              </div>
+              <CardDescription>Export all your settings to a JSON file.</CardDescription>
+            </CardHeader>
+            <CardFooter>
+              <motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.97 }} className="w-full">
+                <Button
+                  onClick={handleExportSettings}
+                  disabled={isExporting}
+                  variant="outline"
+                  size="sm"
+                  className={classNames(
+                    'hover:text-bolt-elements-item-contentAccent hover:border-bolt-elements-item-backgroundAccent hover:bg-bolt-elements-item-backgroundAccent transition-colors w-full justify-center',
+                    isExporting ? 'cursor-not-allowed' : '',
+                  )}
+                >
+                  {isExporting ? (
+                    <>
+                      <div className="i-ph-spinner-gap-bold animate-spin w-4 h-4 mr-2" />
+                      Exporting...
+                    </>
+                  ) : (
+                    'Export All'
+                  )}
+                </Button>
+              </motion.div>
+            </CardFooter>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <div className="flex items-center mb-2">
+                <motion.div className="text-accent-500 mr-2" whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+                  <div className="i-ph-filter-duotone w-5 h-5" />
+                </motion.div>
+                <CardTitle className="text-lg group-hover:text-bolt-elements-item-contentAccent transition-colors">
+                  Export Selected Settings
+                </CardTitle>
+              </div>
+              <CardDescription>Choose specific settings to export.</CardDescription>
+            </CardHeader>
+            <CardFooter>
+              <motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.97 }} className="w-full">
+                <Button
+                  onClick={() => setShowSettingsSelection(true)}
+                  disabled={isExporting || settingsCategories.length === 0}
+                  variant="outline"
+                  size="sm"
+                  className={classNames(
+                    'hover:text-bolt-elements-item-contentAccent hover:border-bolt-elements-item-backgroundAccent hover:bg-bolt-elements-item-backgroundAccent transition-colors w-full justify-center',
+                    isExporting || settingsCategories.length === 0 ? 'cursor-not-allowed' : '',
+                  )}
+                >
+                  {isExporting ? (
+                    <>
+                      <div className="i-ph-spinner-gap-bold animate-spin w-4 h-4 mr-2" />
+                      Exporting...
+                    </>
+                  ) : (
+                    'Select Settings'
+                  )}
+                </Button>
+              </motion.div>
+            </CardFooter>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <div className="flex items-center mb-2">
+                <motion.div className="text-accent-500 mr-2" whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+                  <div className="i-ph-upload-duotone w-5 h-5" />
+                </motion.div>
+                <CardTitle className="text-lg group-hover:text-bolt-elements-item-contentAccent transition-colors">
+                  Import Settings
+                </CardTitle>
+              </div>
+              <CardDescription>Import settings from a JSON file.</CardDescription>
+            </CardHeader>
+            <CardFooter>
+              <motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.97 }} className="w-full">
+                <Button
+                  onClick={() => fileInputRef.current?.click()}
+                  disabled={isImporting}
+                  variant="outline"
+                  size="sm"
+                  className={classNames(
+                    'hover:text-bolt-elements-item-contentAccent hover:border-bolt-elements-item-backgroundAccent hover:bg-bolt-elements-item-backgroundAccent transition-colors w-full justify-center',
+                    isImporting ? 'cursor-not-allowed' : '',
+                  )}
+                >
+                  {isImporting ? (
+                    <>
+                      <div className="i-ph-spinner-gap-bold animate-spin w-4 h-4 mr-2" />
+                      Importing...
+                    </>
+                  ) : (
+                    'Import Settings'
+                  )}
+                </Button>
+              </motion.div>
+            </CardFooter>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <div className="flex items-center mb-2">
+                <motion.div
+                  className="text-red-500 dark:text-red-400 mr-2"
+                  whileHover={{ scale: 1.1 }}
+                  whileTap={{ scale: 0.9 }}
+                >
+                  <div className="i-ph-arrow-counter-clockwise-duotone w-5 h-5" />
+                </motion.div>
+                <CardTitle className="text-lg group-hover:text-bolt-elements-item-contentAccent transition-colors">
+                  Reset All Settings
+                </CardTitle>
+              </div>
+              <CardDescription>Reset all settings to their default values.</CardDescription>
+            </CardHeader>
+            <CardFooter>
+              <motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.97 }} className="w-full">
+                <Button
+                  onClick={() => setShowResetInlineConfirm(true)}
+                  disabled={isResetting}
+                  variant="outline"
+                  size="sm"
+                  className={classNames(
+                    'hover:text-bolt-elements-item-contentAccent hover:border-bolt-elements-item-backgroundAccent hover:bg-bolt-elements-item-backgroundAccent transition-colors w-full justify-center',
+                    isResetting ? 'cursor-not-allowed' : '',
+                  )}
+                >
+                  {isResetting ? (
+                    <>
+                      <div className="i-ph-spinner-gap-bold animate-spin w-4 h-4 mr-2" />
+                      Resetting...
+                    </>
+                  ) : (
+                    'Reset All'
+                  )}
+                </Button>
+              </motion.div>
+            </CardFooter>
+          </Card>
+        </div>
+      </div>
+
+      {/* API Keys Section */}
+      <div>
+        <h2 className="text-xl font-semibold mb-4 text-bolt-elements-textPrimary">API Keys</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <Card>
+            <CardHeader>
+              <div className="flex items-center mb-2">
+                <motion.div className="text-accent-500 mr-2" whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+                  <div className="i-ph-file-text-duotone w-5 h-5" />
+                </motion.div>
+                <CardTitle className="text-lg group-hover:text-bolt-elements-item-contentAccent transition-colors">
+                  Download Template
+                </CardTitle>
+              </div>
+              <CardDescription>Download a template file for your API keys.</CardDescription>
+            </CardHeader>
+            <CardFooter>
+              <motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.97 }} className="w-full">
+                <Button
+                  onClick={handleDownloadTemplate}
+                  disabled={isDownloadingTemplate}
+                  variant="outline"
+                  size="sm"
+                  className={classNames(
+                    'hover:text-bolt-elements-item-contentAccent hover:border-bolt-elements-item-backgroundAccent hover:bg-bolt-elements-item-backgroundAccent transition-colors w-full justify-center',
+                    isDownloadingTemplate ? 'cursor-not-allowed' : '',
+                  )}
+                >
+                  {isDownloadingTemplate ? (
+                    <>
+                      <div className="i-ph-spinner-gap-bold animate-spin w-4 h-4 mr-2" />
+                      Downloading...
+                    </>
+                  ) : (
+                    'Download'
+                  )}
+                </Button>
+              </motion.div>
+            </CardFooter>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <div className="flex items-center mb-2">
+                <motion.div className="text-accent-500 mr-2" whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+                  <div className="i-ph-upload-duotone w-5 h-5" />
+                </motion.div>
+                <CardTitle className="text-lg group-hover:text-bolt-elements-item-contentAccent transition-colors">
+                  Import API Keys
+                </CardTitle>
+              </div>
+              <CardDescription>Import API keys from a JSON file.</CardDescription>
+            </CardHeader>
+            <CardFooter>
+              <motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.97 }} className="w-full">
+                <Button
+                  onClick={() => apiKeyFileInputRef.current?.click()}
+                  disabled={isImportingKeys}
+                  variant="outline"
+                  size="sm"
+                  className={classNames(
+                    'hover:text-bolt-elements-item-contentAccent hover:border-bolt-elements-item-backgroundAccent hover:bg-bolt-elements-item-backgroundAccent transition-colors w-full justify-center',
+                    isImportingKeys ? 'cursor-not-allowed' : '',
+                  )}
+                >
+                  {isImportingKeys ? (
+                    <>
+                      <div className="i-ph-spinner-gap-bold animate-spin w-4 h-4 mr-2" />
+                      Importing...
+                    </>
+                  ) : (
+                    'Import Keys'
+                  )}
+                </Button>
+              </motion.div>
+            </CardFooter>
+          </Card>
+        </div>
+      </div>
+
+      {/* Data Visualization */}
+      <div>
+        <h2 className="text-xl font-semibold mb-4 text-bolt-elements-textPrimary">Data Usage</h2>
+        <Card>
+          <CardContent className="p-5">
+            <DataVisualization chats={availableChats} />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

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/event-logs/EventLogsTab.tsx

@@ -0,0 +1,1013 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { motion } from 'framer-motion';
+import { Switch } from '~/components/ui/Switch';
+import { logStore, type LogEntry } from '~/lib/stores/logs';
+import { useStore } from '@nanostores/react';
+import { classNames } from '~/utils/classNames';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { Dialog, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
+import { jsPDF } from 'jspdf';
+import { toast } from 'react-toastify';
+
+interface SelectOption {
+  value: string;
+  label: string;
+  icon?: string;
+  color?: string;
+}
+
+const logLevelOptions: SelectOption[] = [
+  {
+    value: 'all',
+    label: 'All Types',
+    icon: 'i-ph:funnel',
+    color: '#9333ea',
+  },
+  {
+    value: 'provider',
+    label: 'LLM',
+    icon: 'i-ph:robot',
+    color: '#10b981',
+  },
+  {
+    value: 'api',
+    label: 'API',
+    icon: 'i-ph:cloud',
+    color: '#3b82f6',
+  },
+  {
+    value: 'error',
+    label: 'Errors',
+    icon: 'i-ph:warning-circle',
+    color: '#ef4444',
+  },
+  {
+    value: 'warning',
+    label: 'Warnings',
+    icon: 'i-ph:warning',
+    color: '#f59e0b',
+  },
+  {
+    value: 'info',
+    label: 'Info',
+    icon: 'i-ph:info',
+    color: '#3b82f6',
+  },
+  {
+    value: 'debug',
+    label: 'Debug',
+    icon: 'i-ph:bug',
+    color: '#6b7280',
+  },
+];
+
+interface LogEntryItemProps {
+  log: LogEntry;
+  isExpanded: boolean;
+  use24Hour: boolean;
+  showTimestamp: boolean;
+}
+
+const LogEntryItem = ({ log, isExpanded: forceExpanded, use24Hour, showTimestamp }: LogEntryItemProps) => {
+  const [localExpanded, setLocalExpanded] = useState(forceExpanded);
+
+  useEffect(() => {
+    setLocalExpanded(forceExpanded);
+  }, [forceExpanded]);
+
+  const timestamp = useMemo(() => {
+    const date = new Date(log.timestamp);
+    return date.toLocaleTimeString('en-US', { hour12: !use24Hour });
+  }, [log.timestamp, use24Hour]);
+
+  const style = useMemo(() => {
+    if (log.category === 'provider') {
+      return {
+        icon: 'i-ph:robot',
+        color: 'text-emerald-500 dark:text-emerald-400',
+        bg: 'hover:bg-emerald-500/10 dark:hover:bg-emerald-500/20',
+        badge: 'text-emerald-500 bg-emerald-50 dark:bg-emerald-500/10',
+      };
+    }
+
+    if (log.category === 'api') {
+      return {
+        icon: 'i-ph:cloud',
+        color: 'text-blue-500 dark:text-blue-400',
+        bg: 'hover:bg-blue-500/10 dark:hover:bg-blue-500/20',
+        badge: 'text-blue-500 bg-blue-50 dark:bg-blue-500/10',
+      };
+    }
+
+    switch (log.level) {
+      case 'error':
+        return {
+          icon: 'i-ph:warning-circle',
+          color: 'text-red-500 dark:text-red-400',
+          bg: 'hover:bg-red-500/10 dark:hover:bg-red-500/20',
+          badge: 'text-red-500 bg-red-50 dark:bg-red-500/10',
+        };
+      case 'warning':
+        return {
+          icon: 'i-ph:warning',
+          color: 'text-yellow-500 dark:text-yellow-400',
+          bg: 'hover:bg-yellow-500/10 dark:hover:bg-yellow-500/20',
+          badge: 'text-yellow-500 bg-yellow-50 dark:bg-yellow-500/10',
+        };
+      case 'debug':
+        return {
+          icon: 'i-ph:bug',
+          color: 'text-gray-500 dark:text-gray-400',
+          bg: 'hover:bg-gray-500/10 dark:hover:bg-gray-500/20',
+          badge: 'text-gray-500 bg-gray-50 dark:bg-gray-500/10',
+        };
+      default:
+        return {
+          icon: 'i-ph:info',
+          color: 'text-blue-500 dark:text-blue-400',
+          bg: 'hover:bg-blue-500/10 dark:hover:bg-blue-500/20',
+          badge: 'text-blue-500 bg-blue-50 dark:bg-blue-500/10',
+        };
+    }
+  }, [log.level, log.category]);
+
+  const renderDetails = (details: any) => {
+    if (log.category === 'provider') {
+      return (
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+            <span>Model: {details.model}</span>
+            <span>•</span>
+            <span>Tokens: {details.totalTokens}</span>
+            <span>•</span>
+            <span>Duration: {details.duration}ms</span>
+          </div>
+          {details.prompt && (
+            <div className="flex flex-col gap-1">
+              <div className="text-xs font-medium text-gray-700 dark:text-gray-300">Prompt:</div>
+              <pre className="text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded p-2 whitespace-pre-wrap">
+                {details.prompt}
+              </pre>
+            </div>
+          )}
+          {details.response && (
+            <div className="flex flex-col gap-1">
+              <div className="text-xs font-medium text-gray-700 dark:text-gray-300">Response:</div>
+              <pre className="text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded p-2 whitespace-pre-wrap">
+                {details.response}
+              </pre>
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    if (log.category === 'api') {
+      return (
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+            <span className={details.method === 'GET' ? 'text-green-500' : 'text-blue-500'}>{details.method}</span>
+            <span>•</span>
+            <span>Status: {details.statusCode}</span>
+            <span>•</span>
+            <span>Duration: {details.duration}ms</span>
+          </div>
+          <div className="text-xs text-gray-600 dark:text-gray-400 break-all">{details.url}</div>
+          {details.request && (
+            <div className="flex flex-col gap-1">
+              <div className="text-xs font-medium text-gray-700 dark:text-gray-300">Request:</div>
+              <pre className="text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded p-2 whitespace-pre-wrap">
+                {JSON.stringify(details.request, null, 2)}
+              </pre>
+            </div>
+          )}
+          {details.response && (
+            <div className="flex flex-col gap-1">
+              <div className="text-xs font-medium text-gray-700 dark:text-gray-300">Response:</div>
+              <pre className="text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded p-2 whitespace-pre-wrap">
+                {JSON.stringify(details.response, null, 2)}
+              </pre>
+            </div>
+          )}
+          {details.error && (
+            <div className="flex flex-col gap-1">
+              <div className="text-xs font-medium text-red-500">Error:</div>
+              <pre className="text-xs text-red-400 bg-red-50 dark:bg-red-500/10 rounded p-2 whitespace-pre-wrap">
+                {JSON.stringify(details.error, null, 2)}
+              </pre>
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <pre className="text-xs text-gray-600 dark:text-gray-400 bg-gray-50 dark:bg-gray-800/50 rounded whitespace-pre-wrap">
+        {JSON.stringify(details, null, 2)}
+      </pre>
+    );
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      className={classNames(
+        'flex flex-col gap-2',
+        'rounded-lg p-4',
+        'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+        'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+        style.bg,
+        'transition-all duration-200',
+      )}
+    >
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex items-start gap-3">
+          <span className={classNames('text-lg', style.icon, style.color)} />
+          <div className="flex flex-col gap-1">
+            <div className="text-sm font-medium text-gray-900 dark:text-white">{log.message}</div>
+            {log.details && (
+              <>
+                <button
+                  onClick={() => setLocalExpanded(!localExpanded)}
+                  className="text-xs text-gray-500 dark:text-gray-400 hover:text-purple-500 dark:hover:text-purple-400 transition-colors"
+                >
+                  {localExpanded ? 'Hide' : 'Show'} Details
+                </button>
+                {localExpanded && renderDetails(log.details)}
+              </>
+            )}
+            <div className="flex items-center gap-2">
+              <div className={classNames('px-2 py-0.5 rounded text-xs font-medium uppercase', style.badge)}>
+                {log.level}
+              </div>
+              {log.category && (
+                <div className="px-2 py-0.5 rounded-full text-xs bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400">
+                  {log.category}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+        {showTimestamp && <time className="shrink-0 text-xs text-gray-500 dark:text-gray-400">{timestamp}</time>}
+      </div>
+    </motion.div>
+  );
+};
+
+interface ExportFormat {
+  id: string;
+  label: string;
+  icon: string;
+  handler: () => void;
+}
+
+export function EventLogsTab() {
+  const logs = useStore(logStore.logs);
+  const [selectedLevel, setSelectedLevel] = useState<'all' | string>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [use24Hour, setUse24Hour] = useState(false);
+  const [autoExpand, setAutoExpand] = useState(false);
+  const [showTimestamps, setShowTimestamps] = useState(true);
+  const [showLevelFilter, setShowLevelFilter] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const levelFilterRef = useRef<HTMLDivElement>(null);
+
+  const filteredLogs = useMemo(() => {
+    const allLogs = Object.values(logs);
+
+    if (selectedLevel === 'all') {
+      return allLogs.filter((log) =>
+        searchQuery ? log.message.toLowerCase().includes(searchQuery.toLowerCase()) : true,
+      );
+    }
+
+    return allLogs.filter((log) => {
+      const matchesType = log.category === selectedLevel || log.level === selectedLevel;
+      const matchesSearch = searchQuery ? log.message.toLowerCase().includes(searchQuery.toLowerCase()) : true;
+
+      return matchesType && matchesSearch;
+    });
+  }, [logs, selectedLevel, searchQuery]);
+
+  // Add performance tracking on mount
+  useEffect(() => {
+    const startTime = performance.now();
+
+    logStore.logInfo('Event Logs tab mounted', {
+      type: 'component_mount',
+      message: 'Event Logs tab component mounted',
+      component: 'EventLogsTab',
+    });
+
+    return () => {
+      const duration = performance.now() - startTime;
+      logStore.logPerformanceMetric('EventLogsTab', 'mount-duration', duration);
+    };
+  }, []);
+
+  // Log filter changes
+  const handleLevelFilterChange = useCallback(
+    (newLevel: string) => {
+      logStore.logInfo('Log level filter changed', {
+        type: 'filter_change',
+        message: `Log level filter changed from ${selectedLevel} to ${newLevel}`,
+        component: 'EventLogsTab',
+        previousLevel: selectedLevel,
+        newLevel,
+      });
+      setSelectedLevel(newLevel as string);
+      setShowLevelFilter(false);
+    },
+    [selectedLevel],
+  );
+
+  // Log search changes with debounce
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      if (searchQuery) {
+        logStore.logInfo('Log search performed', {
+          type: 'search',
+          message: `Search performed with query "${searchQuery}" (${filteredLogs.length} results)`,
+          component: 'EventLogsTab',
+          query: searchQuery,
+          resultsCount: filteredLogs.length,
+        });
+      }
+    }, 1000);
+
+    return () => clearTimeout(timeoutId);
+  }, [searchQuery, filteredLogs.length]);
+
+  // Enhanced refresh handler
+  const handleRefresh = useCallback(async () => {
+    const startTime = performance.now();
+    setIsRefreshing(true);
+
+    try {
+      await logStore.refreshLogs();
+
+      const duration = performance.now() - startTime;
+
+      logStore.logSuccess('Logs refreshed successfully', {
+        type: 'refresh',
+        message: `Successfully refreshed ${Object.keys(logs).length} logs`,
+        component: 'EventLogsTab',
+        duration,
+        logsCount: Object.keys(logs).length,
+      });
+    } catch (error) {
+      logStore.logError('Failed to refresh logs', error, {
+        type: 'refresh_error',
+        message: 'Failed to refresh logs',
+        component: 'EventLogsTab',
+      });
+    } finally {
+      setTimeout(() => setIsRefreshing(false), 500);
+    }
+  }, [logs]);
+
+  // Log preference changes
+  const handlePreferenceChange = useCallback((type: string, value: boolean) => {
+    logStore.logInfo('Log preference changed', {
+      type: 'preference_change',
+      message: `Log preference "${type}" changed to ${value}`,
+      component: 'EventLogsTab',
+      preference: type,
+      value,
+    });
+
+    switch (type) {
+      case 'timestamps':
+        setShowTimestamps(value);
+        break;
+      case '24hour':
+        setUse24Hour(value);
+        break;
+      case 'autoExpand':
+        setAutoExpand(value);
+        break;
+    }
+  }, []);
+
+  // Close filters when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (levelFilterRef.current && !levelFilterRef.current.contains(event.target as Node)) {
+        setShowLevelFilter(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const selectedLevelOption = logLevelOptions.find((opt) => opt.value === selectedLevel);
+
+  // Export functions
+  const exportAsJSON = () => {
+    try {
+      const exportData = {
+        timestamp: new Date().toISOString(),
+        logs: filteredLogs,
+        filters: {
+          level: selectedLevel,
+          searchQuery,
+        },
+        preferences: {
+          use24Hour,
+          showTimestamps,
+          autoExpand,
+        },
+      };
+
+      const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `bolt-event-logs-${new Date().toISOString()}.json`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+      toast.success('Event logs exported successfully as JSON');
+    } catch (error) {
+      console.error('Failed to export JSON:', error);
+      toast.error('Failed to export event logs as JSON');
+    }
+  };
+
+  const exportAsCSV = () => {
+    try {
+      // Convert logs to CSV format
+      const headers = ['Timestamp', 'Level', 'Category', 'Message', 'Details'];
+      const csvData = [
+        headers,
+        ...filteredLogs.map((log) => [
+          new Date(log.timestamp).toISOString(),
+          log.level,
+          log.category || '',
+          log.message,
+          log.details ? JSON.stringify(log.details) : '',
+        ]),
+      ];
+
+      const csvContent = csvData
+        .map((row) => row.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(','))
+        .join('\n');
+      const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `bolt-event-logs-${new Date().toISOString()}.csv`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+      toast.success('Event logs exported successfully as CSV');
+    } catch (error) {
+      console.error('Failed to export CSV:', error);
+      toast.error('Failed to export event logs as CSV');
+    }
+  };
+
+  const exportAsPDF = () => {
+    try {
+      // Create new PDF document
+      const doc = new jsPDF();
+      const lineHeight = 7;
+      let yPos = 20;
+      const margin = 20;
+      const pageWidth = doc.internal.pageSize.getWidth();
+      const maxLineWidth = pageWidth - 2 * margin;
+
+      // Helper function to add section header
+      const addSectionHeader = (title: string) => {
+        // Check if we need a new page
+        if (yPos > doc.internal.pageSize.getHeight() - 30) {
+          doc.addPage();
+          yPos = margin;
+        }
+
+        doc.setFillColor('#F3F4F6');
+        doc.rect(margin - 2, yPos - 5, pageWidth - 2 * (margin - 2), lineHeight + 6, 'F');
+        doc.setFont('helvetica', 'bold');
+        doc.setTextColor('#111827');
+        doc.setFontSize(12);
+        doc.text(title.toUpperCase(), margin, yPos);
+        yPos += lineHeight * 2;
+      };
+
+      // Add title and header
+      doc.setFillColor('#6366F1');
+      doc.rect(0, 0, pageWidth, 50, 'F');
+      doc.setTextColor('#FFFFFF');
+      doc.setFontSize(24);
+      doc.setFont('helvetica', 'bold');
+      doc.text('Event Logs Report', margin, 35);
+
+      // Add subtitle with bolt.diy
+      doc.setFontSize(12);
+      doc.setFont('helvetica', 'normal');
+      doc.text('bolt.diy - AI Development Platform', margin, 45);
+      yPos = 70;
+
+      // Add report summary section
+      addSectionHeader('Report Summary');
+
+      doc.setFontSize(10);
+      doc.setFont('helvetica', 'normal');
+      doc.setTextColor('#374151');
+
+      const summaryItems = [
+        { label: 'Generated', value: new Date().toLocaleString() },
+        { label: 'Total Logs', value: filteredLogs.length.toString() },
+        { label: 'Filter Applied', value: selectedLevel === 'all' ? 'All Types' : selectedLevel },
+        { label: 'Search Query', value: searchQuery || 'None' },
+        { label: 'Time Format', value: use24Hour ? '24-hour' : '12-hour' },
+      ];
+
+      summaryItems.forEach((item) => {
+        doc.setFont('helvetica', 'bold');
+        doc.text(`${item.label}:`, margin, yPos);
+        doc.setFont('helvetica', 'normal');
+        doc.text(item.value, margin + 60, yPos);
+        yPos += lineHeight;
+      });
+
+      yPos += lineHeight * 2;
+
+      // Add statistics section
+      addSectionHeader('Log Statistics');
+
+      // Calculate statistics
+      const stats = {
+        error: filteredLogs.filter((log) => log.level === 'error').length,
+        warning: filteredLogs.filter((log) => log.level === 'warning').length,
+        info: filteredLogs.filter((log) => log.level === 'info').length,
+        debug: filteredLogs.filter((log) => log.level === 'debug').length,
+        provider: filteredLogs.filter((log) => log.category === 'provider').length,
+        api: filteredLogs.filter((log) => log.category === 'api').length,
+      };
+
+      // Create two columns for statistics
+      const leftStats = [
+        { label: 'Error Logs', value: stats.error, color: '#DC2626' },
+        { label: 'Warning Logs', value: stats.warning, color: '#F59E0B' },
+        { label: 'Info Logs', value: stats.info, color: '#3B82F6' },
+      ];
+
+      const rightStats = [
+        { label: 'Debug Logs', value: stats.debug, color: '#6B7280' },
+        { label: 'LLM Logs', value: stats.provider, color: '#10B981' },
+        { label: 'API Logs', value: stats.api, color: '#3B82F6' },
+      ];
+
+      const colWidth = (pageWidth - 2 * margin) / 2;
+
+      // Draw statistics in two columns
+      leftStats.forEach((stat, index) => {
+        doc.setTextColor(stat.color);
+        doc.setFont('helvetica', 'bold');
+        doc.text(stat.value.toString(), margin, yPos);
+        doc.setTextColor('#374151');
+        doc.setFont('helvetica', 'normal');
+        doc.text(stat.label, margin + 20, yPos);
+
+        if (rightStats[index]) {
+          doc.setTextColor(rightStats[index].color);
+          doc.setFont('helvetica', 'bold');
+          doc.text(rightStats[index].value.toString(), margin + colWidth, yPos);
+          doc.setTextColor('#374151');
+          doc.setFont('helvetica', 'normal');
+          doc.text(rightStats[index].label, margin + colWidth + 20, yPos);
+        }
+
+        yPos += lineHeight;
+      });
+
+      yPos += lineHeight * 2;
+
+      // Add logs section
+      addSectionHeader('Event Logs');
+
+      // Helper function to add a log entry with improved formatting
+      const addLogEntry = (log: LogEntry) => {
+        const entryHeight = 20 + (log.details ? 40 : 0); // Estimate entry height
+
+        // Check if we need a new page
+        if (yPos + entryHeight > doc.internal.pageSize.getHeight() - 20) {
+          doc.addPage();
+          yPos = margin;
+        }
+
+        // Add timestamp and level
+        const timestamp = new Date(log.timestamp).toLocaleString(undefined, {
+          year: 'numeric',
+          month: '2-digit',
+          day: '2-digit',
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          hour12: !use24Hour,
+        });
+
+        // Draw log level badge background
+        const levelColors: Record<string, string> = {
+          error: '#FEE2E2',
+          warning: '#FEF3C7',
+          info: '#DBEAFE',
+          debug: '#F3F4F6',
+        };
+
+        const textColors: Record<string, string> = {
+          error: '#DC2626',
+          warning: '#F59E0B',
+          info: '#3B82F6',
+          debug: '#6B7280',
+        };
+
+        const levelWidth = doc.getTextWidth(log.level.toUpperCase()) + 10;
+        doc.setFillColor(levelColors[log.level] || '#F3F4F6');
+        doc.roundedRect(margin, yPos - 4, levelWidth, lineHeight + 4, 1, 1, 'F');
+
+        // Add log level text
+        doc.setTextColor(textColors[log.level] || '#6B7280');
+        doc.setFont('helvetica', 'bold');
+        doc.setFontSize(8);
+        doc.text(log.level.toUpperCase(), margin + 5, yPos);
+
+        // Add timestamp
+        doc.setTextColor('#6B7280');
+        doc.setFont('helvetica', 'normal');
+        doc.setFontSize(9);
+        doc.text(timestamp, margin + levelWidth + 10, yPos);
+
+        // Add category if present
+        if (log.category) {
+          const categoryX = margin + levelWidth + doc.getTextWidth(timestamp) + 20;
+          doc.setFillColor('#F3F4F6');
+
+          const categoryWidth = doc.getTextWidth(log.category) + 10;
+          doc.roundedRect(categoryX, yPos - 4, categoryWidth, lineHeight + 4, 2, 2, 'F');
+          doc.setTextColor('#6B7280');
+          doc.text(log.category, categoryX + 5, yPos);
+        }
+
+        yPos += lineHeight * 1.5;
+
+        // Add message
+        doc.setTextColor('#111827');
+        doc.setFontSize(10);
+
+        const messageLines = doc.splitTextToSize(log.message, maxLineWidth - 10);
+        doc.text(messageLines, margin + 5, yPos);
+        yPos += messageLines.length * lineHeight;
+
+        // Add details if present
+        if (log.details) {
+          doc.setTextColor('#6B7280');
+          doc.setFontSize(8);
+
+          const detailsStr = JSON.stringify(log.details, null, 2);
+          const detailsLines = doc.splitTextToSize(detailsStr, maxLineWidth - 15);
+
+          // Add details background
+          doc.setFillColor('#F9FAFB');
+          doc.roundedRect(margin + 5, yPos - 2, maxLineWidth - 10, detailsLines.length * lineHeight + 8, 1, 1, 'F');
+
+          doc.text(detailsLines, margin + 10, yPos + 4);
+          yPos += detailsLines.length * lineHeight + 10;
+        }
+
+        // Add separator line
+        doc.setDrawColor('#E5E7EB');
+        doc.setLineWidth(0.1);
+        doc.line(margin, yPos, pageWidth - margin, yPos);
+        yPos += lineHeight * 1.5;
+      };
+
+      // Add all logs
+      filteredLogs.forEach((log) => {
+        addLogEntry(log);
+      });
+
+      // Add footer to all pages
+      const totalPages = doc.internal.pages.length - 1;
+
+      for (let i = 1; i <= totalPages; i++) {
+        doc.setPage(i);
+        doc.setFontSize(8);
+        doc.setTextColor('#9CA3AF');
+
+        // Add page numbers
+        doc.text(`Page ${i} of ${totalPages}`, pageWidth / 2, doc.internal.pageSize.getHeight() - 10, {
+          align: 'center',
+        });
+
+        // Add footer text
+        doc.text('Generated by bolt.diy', margin, doc.internal.pageSize.getHeight() - 10);
+
+        const dateStr = new Date().toLocaleDateString();
+        doc.text(dateStr, pageWidth - margin, doc.internal.pageSize.getHeight() - 10, { align: 'right' });
+      }
+
+      // Save the PDF
+      doc.save(`bolt-event-logs-${new Date().toISOString()}.pdf`);
+      toast.success('Event logs exported successfully as PDF');
+    } catch (error) {
+      console.error('Failed to export PDF:', error);
+      toast.error('Failed to export event logs as PDF');
+    }
+  };
+
+  const exportAsText = () => {
+    try {
+      const textContent = filteredLogs
+        .map((log) => {
+          const timestamp = new Date(log.timestamp).toLocaleString();
+          let content = `[${timestamp}] ${log.level.toUpperCase()}: ${log.message}\n`;
+
+          if (log.category) {
+            content += `Category: ${log.category}\n`;
+          }
+
+          if (log.details) {
+            content += `Details:\n${JSON.stringify(log.details, null, 2)}\n`;
+          }
+
+          return content + '-'.repeat(80) + '\n';
+        })
+        .join('\n');
+
+      const blob = new Blob([textContent], { type: 'text/plain' });
+      const url = window.URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `bolt-event-logs-${new Date().toISOString()}.txt`;
+      document.body.appendChild(a);
+      a.click();
+      window.URL.revokeObjectURL(url);
+      document.body.removeChild(a);
+      toast.success('Event logs exported successfully as text file');
+    } catch (error) {
+      console.error('Failed to export text file:', error);
+      toast.error('Failed to export event logs as text file');
+    }
+  };
+
+  const exportFormats: ExportFormat[] = [
+    {
+      id: 'json',
+      label: 'Export as JSON',
+      icon: 'i-ph:file-js',
+      handler: exportAsJSON,
+    },
+    {
+      id: 'csv',
+      label: 'Export as CSV',
+      icon: 'i-ph:file-csv',
+      handler: exportAsCSV,
+    },
+    {
+      id: 'pdf',
+      label: 'Export as PDF',
+      icon: 'i-ph:file-pdf',
+      handler: exportAsPDF,
+    },
+    {
+      id: 'txt',
+      label: 'Export as Text',
+      icon: 'i-ph:file-text',
+      handler: exportAsText,
+    },
+  ];
+
+  const ExportButton = () => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleOpenChange = useCallback((open: boolean) => {
+      setIsOpen(open);
+    }, []);
+
+    const handleFormatClick = useCallback((handler: () => void) => {
+      handler();
+      setIsOpen(false);
+    }, []);
+
+    return (
+      <DialogRoot open={isOpen} onOpenChange={handleOpenChange}>
+        <button
+          onClick={() => setIsOpen(true)}
+          className={classNames(
+            'group flex items-center gap-2',
+            'rounded-lg px-3 py-1.5',
+            'text-sm text-gray-900 dark:text-white',
+            'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+            'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+            'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
+            'transition-all duration-200',
+          )}
+        >
+          <span className="i-ph:download text-lg text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
+          Export
+        </button>
+
+        <Dialog showCloseButton>
+          <div className="p-6">
+            <DialogTitle className="flex items-center gap-2">
+              <div className="i-ph:download w-5 h-5" />
+              Export Event Logs
+            </DialogTitle>
+
+            <div className="mt-4 flex flex-col gap-2">
+              {exportFormats.map((format) => (
+                <button
+                  key={format.id}
+                  onClick={() => handleFormatClick(format.handler)}
+                  className={classNames(
+                    'flex items-center gap-3 px-4 py-3 text-sm rounded-lg transition-colors w-full text-left',
+                    'bg-white dark:bg-[#0A0A0A]',
+                    'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+                    'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
+                    'hover:border-purple-200 dark:hover:border-purple-900/30',
+                    'text-bolt-elements-textPrimary',
+                  )}
+                >
+                  <div className={classNames(format.icon, 'w-5 h-5')} />
+                  <div>
+                    <div className="font-medium">{format.label}</div>
+                    <div className="text-xs text-bolt-elements-textSecondary mt-0.5">
+                      {format.id === 'json' && 'Export as a structured JSON file'}
+                      {format.id === 'csv' && 'Export as a CSV spreadsheet'}
+                      {format.id === 'pdf' && 'Export as a formatted PDF document'}
+                      {format.id === 'txt' && 'Export as a formatted text file'}
+                    </div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
+        </Dialog>
+      </DialogRoot>
+    );
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-6">
+      <div className="flex items-center justify-between">
+        <DropdownMenu.Root open={showLevelFilter} onOpenChange={setShowLevelFilter}>
+          <DropdownMenu.Trigger asChild>
+            <button
+              className={classNames(
+                'flex items-center gap-2',
+                'rounded-lg px-3 py-1.5',
+                'text-sm text-gray-900 dark:text-white',
+                'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+                'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+                'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
+                'transition-all duration-200',
+              )}
+            >
+              <span
+                className={classNames('text-lg', selectedLevelOption?.icon || 'i-ph:funnel')}
+                style={{ color: selectedLevelOption?.color }}
+              />
+              {selectedLevelOption?.label || 'All Types'}
+              <span className="i-ph:caret-down text-lg text-gray-500 dark:text-gray-400" />
+            </button>
+          </DropdownMenu.Trigger>
+
+          <DropdownMenu.Portal>
+            <DropdownMenu.Content
+              className="min-w-[200px] bg-white dark:bg-[#0A0A0A] rounded-lg shadow-lg py-1 z-[250] animate-in fade-in-0 zoom-in-95 border border-[#E5E5E5] dark:border-[#1A1A1A]"
+              sideOffset={5}
+              align="start"
+              side="bottom"
+            >
+              {logLevelOptions.map((option) => (
+                <DropdownMenu.Item
+                  key={option.value}
+                  className="group flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-500/10 dark:hover:bg-purple-500/20 cursor-pointer transition-colors"
+                  onClick={() => handleLevelFilterChange(option.value)}
+                >
+                  <div className="mr-3 flex h-5 w-5 items-center justify-center">
+                    <div
+                      className={classNames(option.icon, 'text-lg group-hover:text-purple-500 transition-colors')}
+                      style={{ color: option.color }}
+                    />
+                  </div>
+                  <span className="group-hover:text-purple-500 transition-colors">{option.label}</span>
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Content>
+          </DropdownMenu.Portal>
+        </DropdownMenu.Root>
+
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <Switch
+              checked={showTimestamps}
+              onCheckedChange={(value) => handlePreferenceChange('timestamps', value)}
+              className="data-[state=checked]:bg-purple-500"
+            />
+            <span className="text-sm text-gray-500 dark:text-gray-400">Show Timestamps</span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Switch
+              checked={use24Hour}
+              onCheckedChange={(value) => handlePreferenceChange('24hour', value)}
+              className="data-[state=checked]:bg-purple-500"
+            />
+            <span className="text-sm text-gray-500 dark:text-gray-400">24h Time</span>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Switch
+              checked={autoExpand}
+              onCheckedChange={(value) => handlePreferenceChange('autoExpand', value)}
+              className="data-[state=checked]:bg-purple-500"
+            />
+            <span className="text-sm text-gray-500 dark:text-gray-400">Auto Expand</span>
+          </div>
+
+          <div className="w-px h-4 bg-gray-200 dark:bg-gray-700" />
+
+          <button
+            onClick={handleRefresh}
+            className={classNames(
+              'group flex items-center gap-2',
+              'rounded-lg px-3 py-1.5',
+              'text-sm text-gray-900 dark:text-white',
+              'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+              'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+              'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
+              'transition-all duration-200',
+              { 'animate-spin': isRefreshing },
+            )}
+          >
+            <span className="i-ph:arrows-clockwise text-lg text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
+            Refresh
+          </button>
+
+          <ExportButton />
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <div className="relative">
+          <input
+            type="text"
+            placeholder="Search logs..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className={classNames(
+              'w-full px-4 py-2 pl-10 rounded-lg',
+              'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+              'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+              'text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400',
+              'focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500',
+              'transition-all duration-200',
+            )}
+          />
+          <div className="absolute left-3 top-1/2 -translate-y-1/2">
+            <div className="i-ph:magnifying-glass text-lg text-gray-500 dark:text-gray-400" />
+          </div>
+        </div>
+
+        {filteredLogs.length === 0 ? (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className={classNames(
+              'flex flex-col items-center justify-center gap-4',
+              'rounded-lg p-8 text-center',
+              'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
+              'border border-[#E5E5E5] dark:border-[#1A1A1A]',
+            )}
+          >
+            <span className="i-ph:clipboard-text text-4xl text-gray-400 dark:text-gray-600" />
+            <div className="flex flex-col gap-1">
+              <h3 className="text-sm font-medium text-gray-900 dark:text-white">No Logs Found</h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400">Try adjusting your search or filters</p>
+            </div>
+          </motion.div>
+        ) : (
+          filteredLogs.map((log) => (
+            <LogEntryItem
+              key={log.id}
+              log={log}
+              isExpanded={autoExpand}
+              use24Hour={use24Hour}
+              showTimestamp={showTimestamps}
+            />
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

app/components/@settings/tabs/features/FeaturesTab.tsx

@@ -0,0 +1,295 @@
+// Remove unused imports
+import React, { memo, useCallback } from 'react';
+import { motion } from 'framer-motion';
+import { Switch } from '~/components/ui/Switch';
+import { useSettings } from '~/lib/hooks/useSettings';
+import { classNames } from '~/utils/classNames';
+import { toast } from 'react-toastify';
+import { PromptLibrary } from '~/lib/common/prompt-library';
+
+interface FeatureToggle {
+  id: string;
+  title: string;
+  description: string;
+  icon: string;
+  enabled: boolean;
+  beta?: boolean;
+  experimental?: boolean;
+  tooltip?: string;
+}
+
+const FeatureCard = memo(
+  ({
+    feature,
+    index,
+    onToggle,
+  }: {
+    feature: FeatureToggle;
+    index: number;
+    onToggle: (id: string, enabled: boolean) => void;
+  }) => (
+    <motion.div
+      key={feature.id}
+      layoutId={feature.id}
+      className={classNames(
+        'relative group cursor-pointer',
+        'bg-bolt-elements-background-depth-2',
+        'hover:bg-bolt-elements-background-depth-3',
+        'transition-colors duration-200',
+        'rounded-lg overflow-hidden',
+      )}
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: index * 0.1 }}
+    >
+      <div className="p-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className={classNames(feature.icon, 'w-5 h-5 text-bolt-elements-textSecondary')} />
+            <div className="flex items-center gap-2">
+              <h4 className="font-medium text-bolt-elements-textPrimary">{feature.title}</h4>
+              {feature.beta && (
+                <span className="px-2 py-0.5 text-xs rounded-full bg-blue-500/10 text-blue-500 font-medium">Beta</span>
+              )}
+              {feature.experimental && (
+                <span className="px-2 py-0.5 text-xs rounded-full bg-orange-500/10 text-orange-500 font-medium">
+                  Experimental
+                </span>
+              )}
+            </div>
+          </div>
+          <Switch checked={feature.enabled} onCheckedChange={(checked) => onToggle(feature.id, checked)} />
+        </div>
+        <p className="mt-2 text-sm text-bolt-elements-textSecondary">{feature.description}</p>
+        {feature.tooltip && <p className="mt-1 text-xs text-bolt-elements-textTertiary">{feature.tooltip}</p>}
+      </div>
+    </motion.div>
+  ),
+);
+
+const FeatureSection = memo(
+  ({
+    title,
+    features,
+    icon,
+    description,
+    onToggleFeature,
+  }: {
+    title: string;
+    features: FeatureToggle[];
+    icon: string;
+    description: string;
+    onToggleFeature: (id: string, enabled: boolean) => void;
+  }) => (
+    <motion.div
+      layout
+      className="flex flex-col gap-4"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+    >
+      <div className="flex items-center gap-3">
+        <div className={classNames(icon, 'text-xl text-purple-500')} />
+        <div>
+          <h3 className="text-lg font-medium text-bolt-elements-textPrimary">{title}</h3>
+          <p className="text-sm text-bolt-elements-textSecondary">{description}</p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {features.map((feature, index) => (
+          <FeatureCard key={feature.id} feature={feature} index={index} onToggle={onToggleFeature} />
+        ))}
+      </div>
+    </motion.div>
+  ),
+);
+
+export default function FeaturesTab() {
+  const {
+    autoSelectTemplate,
+    isLatestBranch,
+    contextOptimizationEnabled,
+    eventLogs,
+    setAutoSelectTemplate,
+    enableLatestBranch,
+    enableContextOptimization,
+    setEventLogs,
+    setPromptId,
+    promptId,
+  } = useSettings();
+
+  // Enable features by default on first load
+  React.useEffect(() => {
+    // Only set defaults if values are undefined
+    if (isLatestBranch === undefined) {
+      enableLatestBranch(false); // Default: OFF - Don't auto-update from main branch
+    }
+
+    if (contextOptimizationEnabled === undefined) {
+      enableContextOptimization(true); // Default: ON - Enable context optimization
+    }
+
+    if (autoSelectTemplate === undefined) {
+      setAutoSelectTemplate(true); // Default: ON - Enable auto-select templates
+    }
+
+    if (promptId === undefined) {
+      setPromptId('default'); // Default: 'default'
+    }
+
+    if (eventLogs === undefined) {
+      setEventLogs(true); // Default: ON - Enable event logging
+    }
+  }, []); // Only run once on component mount
+
+  const handleToggleFeature = useCallback(
+    (id: string, enabled: boolean) => {
+      switch (id) {
+        case 'latestBranch': {
+          enableLatestBranch(enabled);
+          toast.success(`Main branch updates ${enabled ? 'enabled' : 'disabled'}`);
+          break;
+        }
+
+        case 'autoSelectTemplate': {
+          setAutoSelectTemplate(enabled);
+          toast.success(`Auto select template ${enabled ? 'enabled' : 'disabled'}`);
+          break;
+        }
+
+        case 'contextOptimization': {
+          enableContextOptimization(enabled);
+          toast.success(`Context optimization ${enabled ? 'enabled' : 'disabled'}`);
+          break;
+        }
+
+        case 'eventLogs': {
+          setEventLogs(enabled);
+          toast.success(`Event logging ${enabled ? 'enabled' : 'disabled'}`);
+          break;
+        }
+
+        default:
+          break;
+      }
+    },
+    [enableLatestBranch, setAutoSelectTemplate, enableContextOptimization, setEventLogs],
+  );
+
+  const features = {
+    stable: [
+      {
+        id: 'latestBranch',
+        title: 'Main Branch Updates',
+        description: 'Get the latest updates from the main branch',
+        icon: 'i-ph:git-branch',
+        enabled: isLatestBranch,
+        tooltip: 'Enabled by default to receive updates from the main development branch',
+      },
+      {
+        id: 'autoSelectTemplate',
+        title: 'Auto Select Template',
+        description: 'Automatically select starter template',
+        icon: 'i-ph:selection',
+        enabled: autoSelectTemplate,
+        tooltip: 'Enabled by default to automatically select the most appropriate starter template',
+      },
+      {
+        id: 'contextOptimization',
+        title: 'Context Optimization',
+        description: 'Optimize context for better responses',
+        icon: 'i-ph:brain',
+        enabled: contextOptimizationEnabled,
+        tooltip: 'Enabled by default for improved AI responses',
+      },
+      {
+        id: 'eventLogs',
+        title: 'Event Logging',
+        description: 'Enable detailed event logging and history',
+        icon: 'i-ph:list-bullets',
+        enabled: eventLogs,
+        tooltip: 'Enabled by default to record detailed logs of system events and user actions',
+      },
+    ],
+    beta: [],
+  };
+
+  return (
+    <div className="flex flex-col gap-8">
+      <FeatureSection
+        title="Core Features"
+        features={features.stable}
+        icon="i-ph:check-circle"
+        description="Essential features that are enabled by default for optimal performance"
+        onToggleFeature={handleToggleFeature}
+      />
+
+      {features.beta.length > 0 && (
+        <FeatureSection
+          title="Beta Features"
+          features={features.beta}
+          icon="i-ph:test-tube"
+          description="New features that are ready for testing but may have some rough edges"
+          onToggleFeature={handleToggleFeature}
+        />
+      )}
+
+      <motion.div
+        layout
+        className={classNames(
+          'bg-bolt-elements-background-depth-2',
+          'hover:bg-bolt-elements-background-depth-3',
+          'transition-all duration-200',
+          'rounded-lg p-4',
+          'group',
+        )}
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.3 }}
+      >
+        <div className="flex items-center gap-4">
+          <div
+            className={classNames(
+              'p-2 rounded-lg text-xl',
+              'bg-bolt-elements-background-depth-3 group-hover:bg-bolt-elements-background-depth-4',
+              'transition-colors duration-200',
+              'text-purple-500',
+            )}
+          >
+            <div className="i-ph:book" />
+          </div>
+          <div className="flex-1">
+            <h4 className="text-sm font-medium text-bolt-elements-textPrimary group-hover:text-purple-500 transition-colors">
+              Prompt Library
+            </h4>
+            <p className="text-xs text-bolt-elements-textSecondary mt-0.5">
+              Choose a prompt from the library to use as the system prompt
+            </p>
+          </div>
+          <select
+            value={promptId}
+            onChange={(e) => {
+              setPromptId(e.target.value);
+              toast.success('Prompt template updated');
+            }}
+            className={classNames(
+              'p-2 rounded-lg text-sm min-w-[200px]',
+              'bg-bolt-elements-background-depth-3 border border-bolt-elements-borderColor',
+              'text-bolt-elements-textPrimary',
+              'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
+              'group-hover:border-purple-500/30',
+              'transition-all duration-200',
+            )}
+          >
+            {PromptLibrary.getList().map((x) => (
+              <option key={x.id} value={x.id}>
+                {x.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      </motion.div>
+    </div>
+  );
+}

app/components/@settings/tabs/github/GitHubTab.tsx

@@ -0,0 +1,281 @@
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { useGitHubConnection, useGitHubStats } from '~/lib/hooks';
+import { LoadingState, ErrorState, ConnectionTestIndicator, RepositoryCard } from './components/shared';
+import { GitHubConnection } from './components/GitHubConnection';
+import { GitHubUserProfile } from './components/GitHubUserProfile';
+import { GitHubStats } from './components/GitHubStats';
+import { Button } from '~/components/ui/Button';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '~/components/ui/Collapsible';
+import { classNames } from '~/utils/classNames';
+import { ChevronDown } from 'lucide-react';
+import { GitHubErrorBoundary } from './components/GitHubErrorBoundary';
+import { GitHubProgressiveLoader } from './components/GitHubProgressiveLoader';
+import { GitHubCacheManager } from './components/GitHubCacheManager';
+
+interface ConnectionTestResult {
+  status: 'success' | 'error' | 'testing';
+  message: string;
+  timestamp?: number;
+}
+
+// GitHub logo SVG component
+const GithubLogo = () => (
+  <svg viewBox="0 0 24 24" className="w-5 h-5">
+    <path
+      fill="currentColor"
+      d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+    />
+  </svg>
+);
+
+export default function GitHubTab() {
+  const { connection, isConnected, isLoading, error, testConnection } = useGitHubConnection();
+  const {
+    stats,
+    isLoading: isStatsLoading,
+    error: statsError,
+  } = useGitHubStats(
+    connection,
+    {
+      autoFetch: true,
+      cacheTimeout: 30 * 60 * 1000, // 30 minutes
+    },
+    isConnected && connection ? !connection.token : false,
+  ); // Use server-side when no token but connected
+
+  const [connectionTest, setConnectionTest] = useState<ConnectionTestResult | null>(null);
+  const [isStatsExpanded, setIsStatsExpanded] = useState(false);
+  const [isReposExpanded, setIsReposExpanded] = useState(false);
+
+  const handleTestConnection = async () => {
+    if (!connection?.user) {
+      setConnectionTest({
+        status: 'error',
+        message: 'No connection established',
+        timestamp: Date.now(),
+      });
+      return;
+    }
+
+    setConnectionTest({
+      status: 'testing',
+      message: 'Testing connection...',
+    });
+
+    try {
+      const isValid = await testConnection();
+
+      if (isValid) {
+        setConnectionTest({
+          status: 'success',
+          message: `Connected successfully as ${connection.user.login}`,
+          timestamp: Date.now(),
+        });
+      } else {
+        setConnectionTest({
+          status: 'error',
+          message: 'Connection test failed',
+          timestamp: Date.now(),
+        });
+      }
+    } catch (error) {
+      setConnectionTest({
+        status: 'error',
+        message: `Connection failed: ${error instanceof Error ? error.message : 'Unknown error'}`,
+        timestamp: Date.now(),
+      });
+    }
+  };
+
+  // Loading state for initial connection check
+  if (isLoading) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-2">
+          <GithubLogo />
+          <h2 className="text-lg font-medium text-bolt-elements-textPrimary">GitHub Integration</h2>
+        </div>
+        <LoadingState message="Checking GitHub connection..." />
+      </div>
+    );
+  }
+
+  // Error state for connection issues
+  if (error && !connection) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-2">
+          <GithubLogo />
+          <h2 className="text-lg font-medium text-bolt-elements-textPrimary">GitHub Integration</h2>
+        </div>
+        <ErrorState
+          title="Connection Error"
+          message={error}
+          onRetry={() => window.location.reload()}
+          retryLabel="Reload Page"
+        />
+      </div>
+    );
+  }
+
+  // Not connected state
+  if (!isConnected || !connection) {
+    return (
+      <div className="space-y-6">
+        <div className="flex items-center gap-2">
+          <GithubLogo />
+          <h2 className="text-lg font-medium text-bolt-elements-textPrimary">GitHub Integration</h2>
+        </div>
+        <p className="text-sm text-bolt-elements-textSecondary">
+          Connect your GitHub account to enable advanced repository management features, statistics, and seamless
+          integration.
+        </p>
+        <GitHubConnection connectionTest={connectionTest} onTestConnection={handleTestConnection} />
+      </div>
+    );
+  }
+
+  return (
+    <GitHubErrorBoundary>
+      <div className="space-y-6">
+        {/* Header */}
+        <motion.div
+          className="flex items-center justify-between gap-2"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1 }}
+        >
+          <div className="flex items-center gap-2">
+            <GithubLogo />
+            <h2 className="text-lg font-medium text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary">
+              GitHub Integration
+            </h2>
+          </div>
+          <div className="flex items-center gap-2">
+            {connection?.rateLimit && (
+              <div className="flex items-center gap-2 px-3 py-1 bg-bolt-elements-background-depth-1 rounded-lg text-xs">
+                <div className="i-ph:cloud w-4 h-4 text-bolt-elements-textSecondary" />
+                <span className="text-bolt-elements-textSecondary">
+                  API: {connection.rateLimit.remaining}/{connection.rateLimit.limit}
+                </span>
+              </div>
+            )}
+          </div>
+        </motion.div>
+
+        <p className="text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary">
+          Manage your GitHub integration with advanced repository features and comprehensive statistics
+        </p>
+
+        {/* Connection Test Results */}
+        <ConnectionTestIndicator
+          status={connectionTest?.status || null}
+          message={connectionTest?.message}
+          timestamp={connectionTest?.timestamp}
+        />
+
+        {/* Connection Component */}
+        <GitHubConnection connectionTest={connectionTest} onTestConnection={handleTestConnection} />
+
+        {/* User Profile */}
+        {connection.user && <GitHubUserProfile user={connection.user} />}
+
+        {/* Stats Section */}
+        <GitHubStats connection={connection} isExpanded={isStatsExpanded} onToggleExpanded={setIsStatsExpanded} />
+
+        {/* Repositories Section */}
+        {stats?.repos && stats.repos.length > 0 && (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.4 }}
+            className="border-t border-bolt-elements-borderColor pt-6"
+          >
+            <Collapsible open={isReposExpanded} onOpenChange={setIsReposExpanded}>
+              <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:folder w-4 h-4 text-bolt-elements-item-contentAccent" />
+                    <span className="text-sm font-medium text-bolt-elements-textPrimary">
+                      All Repositories ({stats.repos.length})
+                    </span>
+                  </div>
+                  <ChevronDown
+                    className={classNames(
+                      'w-4 h-4 transform transition-transform duration-200 text-bolt-elements-textSecondary',
+                      isReposExpanded ? 'rotate-180' : '',
+                    )}
+                  />
+                </div>
+              </CollapsibleTrigger>
+
+              <CollapsibleContent className="overflow-hidden">
+                <div className="mt-4 space-y-4">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    {(isReposExpanded ? stats.repos : stats.repos.slice(0, 12)).map((repo) => (
+                      <RepositoryCard
+                        key={repo.full_name}
+                        repository={repo}
+                        variant="detailed"
+                        showHealthScore
+                        showExtendedMetrics
+                        onSelect={() => window.open(repo.html_url, '_blank', 'noopener,noreferrer')}
+                      />
+                    ))}
+                  </div>
+
+                  {stats.repos.length > 12 && !isReposExpanded && (
+                    <div className="text-center">
+                      <Button
+                        variant="outline"
+                        onClick={() => setIsReposExpanded(true)}
+                        className="text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary"
+                      >
+                        Show {stats.repos.length - 12} more repositories
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              </CollapsibleContent>
+            </Collapsible>
+          </motion.div>
+        )}
+
+        {/* Stats Error State */}
+        {statsError && !stats && (
+          <ErrorState
+            title="Failed to Load Statistics"
+            message={statsError}
+            onRetry={() => window.location.reload()}
+            retryLabel="Retry"
+          />
+        )}
+
+        {/* Stats Loading State */}
+        {isStatsLoading && !stats && (
+          <GitHubProgressiveLoader
+            isLoading={isStatsLoading}
+            loadingMessage="Loading GitHub statistics..."
+            showProgress={true}
+            progressSteps={[
+              { key: 'user', label: 'Fetching user info', completed: !!connection?.user, loading: !connection?.user },
+              { key: 'repos', label: 'Loading repositories', completed: false, loading: true },
+              { key: 'stats', label: 'Calculating statistics', completed: false },
+              { key: 'cache', label: 'Updating cache', completed: false },
+            ]}
+          >
+            <div />
+          </GitHubProgressiveLoader>
+        )}
+
+        {/* Cache Management Section - Only show when connected */}
+        {isConnected && connection && (
+          <div className="mt-8 pt-6 border-t border-bolt-elements-borderColor">
+            <GitHubCacheManager showStats={true} />
+          </div>
+        )}
+      </div>
+    </GitHubErrorBoundary>
+  );
+}

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

@@ -0,0 +1,173 @@
+import React, { useState } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { motion } from 'framer-motion';
+import { classNames } from '~/utils/classNames';
+import { useGitHubConnection } from '~/lib/hooks';
+
+interface GitHubAuthDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess?: () => void;
+}
+
+export function GitHubAuthDialog({ isOpen, onClose, onSuccess }: GitHubAuthDialogProps) {
+  const { connect, isConnecting, error } = useGitHubConnection();
+  const [token, setToken] = useState('');
+  const [tokenType, setTokenType] = useState<'classic' | 'fine-grained'>('classic');
+
+  const handleConnect = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!token.trim()) {
+      return;
+    }
+
+    try {
+      await connect(token, tokenType);
+      setToken(''); // Clear token on successful connection
+      onSuccess?.();
+      onClose();
+    } catch {
+      // Error handling is done in the hook
+    }
+  };
+
+  const handleClose = () => {
+    setToken('');
+    onClose();
+  };
+
+  return (
+    <Dialog.Root open={isOpen}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 z-[200]" />
+        <Dialog.Content
+          className="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-[201] w-full max-w-md"
+          onEscapeKeyDown={handleClose}
+          onPointerDownOutside={handleClose}
+        >
+          <motion.div
+            className="bg-bolt-elements-background border border-bolt-elements-borderColor rounded-lg shadow-lg"
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.9 }}
+          >
+            <div className="p-6 space-y-6">
+              <div className="flex items-center justify-between">
+                <h2 className="text-lg font-semibold text-bolt-elements-textPrimary">Connect to GitHub</h2>
+                <button
+                  onClick={handleClose}
+                  className="p-1 rounded-md hover:bg-bolt-elements-item-backgroundActive/10"
+                >
+                  <div className="i-ph:x w-4 h-4 text-bolt-elements-textSecondary" />
+                </button>
+              </div>
+
+              <div className="text-xs text-bolt-elements-textSecondary bg-bolt-elements-background-depth-1 p-3 rounded-lg">
+                <p className="flex items-center gap-1 mb-1">
+                  <span className="i-ph:lightbulb w-3.5 h-3.5 text-bolt-elements-icon-success" />
+                  <span className="font-medium">Tip:</span> You need a GitHub token to deploy repositories.
+                </p>
+                <p>Required scopes: repo, read:org, read:user</p>
+              </div>
+
+              <form onSubmit={handleConnect} className="space-y-4">
+                <div>
+                  <label className="block text-sm text-bolt-elements-textSecondary mb-2">Token Type</label>
+                  <select
+                    value={tokenType}
+                    onChange={(e) => setTokenType(e.target.value as 'classic' | 'fine-grained')}
+                    disabled={isConnecting}
+                    className={classNames(
+                      'w-full px-3 py-2 rounded-lg text-sm',
+                      'bg-bolt-elements-background-depth-1',
+                      'border border-bolt-elements-borderColor',
+                      'text-bolt-elements-textPrimary',
+                      'focus:outline-none focus:ring-1 focus:ring-bolt-elements-item-contentAccent',
+                      'disabled:opacity-50',
+                    )}
+                  >
+                    <option value="classic">Personal Access Token (Classic)</option>
+                    <option value="fine-grained">Fine-grained Token</option>
+                  </select>
+                </div>
+
+                <div>
+                  <label className="block text-sm text-bolt-elements-textSecondary mb-2">
+                    {tokenType === 'classic' ? 'Personal Access Token' : 'Fine-grained Token'}
+                  </label>
+                  <input
+                    type="password"
+                    value={token}
+                    onChange={(e) => setToken(e.target.value)}
+                    disabled={isConnecting}
+                    placeholder={`Enter your GitHub ${
+                      tokenType === 'classic' ? 'personal access token' : 'fine-grained token'
+                    }`}
+                    className={classNames(
+                      'w-full px-3 py-2 rounded-lg text-sm',
+                      'bg-bolt-elements-background-depth-1',
+                      'border border-bolt-elements-borderColor',
+                      '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://github.com/settings/tokens${tokenType === 'fine-grained' ? '/beta' : '/new'}`}
+                      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>
+
+                {error && (
+                  <div className="p-4 rounded-lg bg-red-50 border border-red-200 dark:bg-red-900/20 dark:border-red-700">
+                    <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
+                  </div>
+                )}
+
+                <div className="flex items-center justify-end gap-3 pt-4">
+                  <button
+                    type="button"
+                    onClick={handleClose}
+                    className="px-4 py-2 text-sm text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    type="submit"
+                    disabled={isConnecting || !token.trim()}
+                    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',
+                    )}
+                  >
+                    {isConnecting ? (
+                      <>
+                        <div className="i-ph:spinner-gap animate-spin" />
+                        Connecting...
+                      </>
+                    ) : (
+                      <>
+                        <div className="i-ph:plug-charging w-4 h-4" />
+                        Connect
+                      </>
+                    )}
+                  </button>
+                </div>
+              </form>
+            </div>
+          </motion.div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

app/components/@settings/tabs/github/components/GitHubCacheManager.tsx

@@ -0,0 +1,367 @@
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import { Button } from '~/components/ui/Button';
+import { classNames } from '~/utils/classNames';
+import { Database, Trash2, RefreshCw, Clock, HardDrive, CheckCircle } from 'lucide-react';
+
+interface CacheEntry {
+  key: string;
+  size: number;
+  timestamp: number;
+  lastAccessed: number;
+  data: any;
+}
+
+interface CacheStats {
+  totalSize: number;
+  totalEntries: number;
+  oldestEntry: number;
+  newestEntry: number;
+  hitRate?: number;
+}
+
+interface GitHubCacheManagerProps {
+  className?: string;
+  showStats?: boolean;
+}
+
+// Cache management utilities
+class CacheManagerService {
+  private static readonly _cachePrefix = 'github_';
+  private static readonly _cacheKeys = [
+    'github_connection',
+    'github_stats_cache',
+    'github_repositories_cache',
+    'github_user_cache',
+    'github_rate_limits',
+  ];
+
+  static getCacheEntries(): CacheEntry[] {
+    const entries: CacheEntry[] = [];
+
+    for (const key of this._cacheKeys) {
+      try {
+        const data = localStorage.getItem(key);
+
+        if (data) {
+          const parsed = JSON.parse(data);
+          entries.push({
+            key,
+            size: new Blob([data]).size,
+            timestamp: parsed.timestamp || Date.now(),
+            lastAccessed: parsed.lastAccessed || Date.now(),
+            data: parsed,
+          });
+        }
+      } catch (error) {
+        console.warn(`Failed to parse cache entry: ${key}`, error);
+      }
+    }
+
+    return entries.sort((a, b) => b.lastAccessed - a.lastAccessed);
+  }
+
+  static getCacheStats(): CacheStats {
+    const entries = this.getCacheEntries();
+
+    if (entries.length === 0) {
+      return {
+        totalSize: 0,
+        totalEntries: 0,
+        oldestEntry: 0,
+        newestEntry: 0,
+      };
+    }
+
+    const totalSize = entries.reduce((sum, entry) => sum + entry.size, 0);
+    const timestamps = entries.map((e) => e.timestamp);
+
+    return {
+      totalSize,
+      totalEntries: entries.length,
+      oldestEntry: Math.min(...timestamps),
+      newestEntry: Math.max(...timestamps),
+    };
+  }
+
+  static clearCache(keys?: string[]): void {
+    const keysToRemove = keys || this._cacheKeys;
+
+    for (const key of keysToRemove) {
+      localStorage.removeItem(key);
+    }
+  }
+
+  static clearExpiredCache(maxAge: number = 24 * 60 * 60 * 1000): number {
+    const entries = this.getCacheEntries();
+    const now = Date.now();
+    let removedCount = 0;
+
+    for (const entry of entries) {
+      if (now - entry.timestamp > maxAge) {
+        localStorage.removeItem(entry.key);
+        removedCount++;
+      }
+    }
+
+    return removedCount;
+  }
+
+  static compactCache(): void {
+    const entries = this.getCacheEntries();
+
+    for (const entry of entries) {
+      try {
+        // Re-serialize with minimal data
+        const compacted = {
+          ...entry.data,
+          lastAccessed: Date.now(),
+        };
+        localStorage.setItem(entry.key, JSON.stringify(compacted));
+      } catch (error) {
+        console.warn(`Failed to compact cache entry: ${entry.key}`, error);
+      }
+    }
+  }
+
+  static formatSize(bytes: number): string {
+    if (bytes === 0) {
+      return '0 B';
+    }
+
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+  }
+}
+
+export function GitHubCacheManager({ className = '', showStats = true }: GitHubCacheManagerProps) {
+  const [cacheEntries, setCacheEntries] = useState<CacheEntry[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [lastClearTime, setLastClearTime] = useState<number | null>(null);
+
+  const refreshCacheData = useCallback(() => {
+    setCacheEntries(CacheManagerService.getCacheEntries());
+  }, []);
+
+  useEffect(() => {
+    refreshCacheData();
+  }, [refreshCacheData]);
+
+  const cacheStats = useMemo(() => CacheManagerService.getCacheStats(), [cacheEntries]);
+
+  const handleClearAll = useCallback(async () => {
+    setIsLoading(true);
+
+    try {
+      CacheManagerService.clearCache();
+      setLastClearTime(Date.now());
+      refreshCacheData();
+
+      // Trigger a page refresh to update all components
+      setTimeout(() => {
+        window.location.reload();
+      }, 1000);
+    } catch (error) {
+      console.error('Failed to clear cache:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [refreshCacheData]);
+
+  const handleClearExpired = useCallback(() => {
+    setIsLoading(true);
+
+    try {
+      const removedCount = CacheManagerService.clearExpiredCache();
+      refreshCacheData();
+
+      if (removedCount > 0) {
+        // Show success message or trigger update
+        console.log(`Removed ${removedCount} expired cache entries`);
+      }
+    } catch (error) {
+      console.error('Failed to clear expired cache:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [refreshCacheData]);
+
+  const handleCompactCache = useCallback(() => {
+    setIsLoading(true);
+
+    try {
+      CacheManagerService.compactCache();
+      refreshCacheData();
+    } catch (error) {
+      console.error('Failed to compact cache:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [refreshCacheData]);
+
+  const handleClearSpecific = useCallback(
+    (key: string) => {
+      setIsLoading(true);
+
+      try {
+        CacheManagerService.clearCache([key]);
+        refreshCacheData();
+      } catch (error) {
+        console.error(`Failed to clear cache key: ${key}`, error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [refreshCacheData],
+  );
+
+  if (!showStats && cacheEntries.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classNames(
+        'space-y-4 p-4 bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor rounded-lg',
+        className,
+      )}
+    >
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Database className="w-4 h-4 text-bolt-elements-item-contentAccent" />
+          <h3 className="text-sm font-medium text-bolt-elements-textPrimary">GitHub Cache Management</h3>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={refreshCacheData} disabled={isLoading}>
+            <RefreshCw className={classNames('w-3 h-3', isLoading ? 'animate-spin' : '')} />
+          </Button>
+        </div>
+      </div>
+
+      {showStats && (
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+          <div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg">
+            <div className="flex items-center gap-2 mb-1">
+              <HardDrive className="w-3 h-3 text-bolt-elements-textSecondary" />
+              <span className="text-xs font-medium text-bolt-elements-textSecondary">Total Size</span>
+            </div>
+            <p className="text-sm font-semibold text-bolt-elements-textPrimary">
+              {CacheManagerService.formatSize(cacheStats.totalSize)}
+            </p>
+          </div>
+
+          <div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg">
+            <div className="flex items-center gap-2 mb-1">
+              <Database className="w-3 h-3 text-bolt-elements-textSecondary" />
+              <span className="text-xs font-medium text-bolt-elements-textSecondary">Entries</span>
+            </div>
+            <p className="text-sm font-semibold text-bolt-elements-textPrimary">{cacheStats.totalEntries}</p>
+          </div>
+
+          <div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg">
+            <div className="flex items-center gap-2 mb-1">
+              <Clock className="w-3 h-3 text-bolt-elements-textSecondary" />
+              <span className="text-xs font-medium text-bolt-elements-textSecondary">Oldest</span>
+            </div>
+            <p className="text-xs text-bolt-elements-textSecondary">
+              {cacheStats.oldestEntry ? new Date(cacheStats.oldestEntry).toLocaleDateString() : 'N/A'}
+            </p>
+          </div>
+
+          <div className="bg-bolt-elements-background-depth-2 p-3 rounded-lg">
+            <div className="flex items-center gap-2 mb-1">
+              <CheckCircle className="w-3 h-3 text-bolt-elements-textSecondary" />
+              <span className="text-xs font-medium text-bolt-elements-textSecondary">Status</span>
+            </div>
+            <p className="text-xs text-green-600 dark:text-green-400">
+              {cacheStats.totalEntries > 0 ? 'Active' : 'Empty'}
+            </p>
+          </div>
+        </div>
+      )}
+
+      {cacheEntries.length > 0 && (
+        <div className="space-y-2">
+          <h4 className="text-xs font-medium text-bolt-elements-textSecondary">
+            Cache Entries ({cacheEntries.length})
+          </h4>
+
+          <div className="space-y-2 max-h-48 overflow-y-auto">
+            {cacheEntries.map((entry) => (
+              <div
+                key={entry.key}
+                className="flex items-center justify-between p-2 bg-bolt-elements-background-depth-2 rounded border border-bolt-elements-borderColor"
+              >
+                <div className="flex-1 min-w-0">
+                  <p className="text-xs font-medium text-bolt-elements-textPrimary truncate">
+                    {entry.key.replace('github_', '')}
+                  </p>
+                  <p className="text-xs text-bolt-elements-textSecondary">
+                    {CacheManagerService.formatSize(entry.size)} • {new Date(entry.lastAccessed).toLocaleString()}
+                  </p>
+                </div>
+
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handleClearSpecific(entry.key)}
+                  disabled={isLoading}
+                  className="ml-2"
+                >
+                  <Trash2 className="w-3 h-3 text-red-500" />
+                </Button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      <div className="flex flex-wrap gap-2 pt-2 border-t border-bolt-elements-borderColor">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleClearExpired}
+          disabled={isLoading}
+          className="flex items-center gap-1"
+        >
+          <Clock className="w-3 h-3" />
+          <span className="text-xs">Clear Expired</span>
+        </Button>
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={handleCompactCache}
+          disabled={isLoading}
+          className="flex items-center gap-1"
+        >
+          <RefreshCw className="w-3 h-3" />
+          <span className="text-xs">Compact</span>
+        </Button>
+
+        {cacheEntries.length > 0 && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleClearAll}
+            disabled={isLoading}
+            className="flex items-center gap-1 text-red-600 hover:text-red-700 border-red-200 hover:border-red-300"
+          >
+            <Trash2 className="w-3 h-3" />
+            <span className="text-xs">Clear All</span>
+          </Button>
+        )}
+      </div>
+
+      {lastClearTime && (
+        <div className="flex items-center gap-2 p-2 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 rounded text-xs text-green-700 dark:text-green-400">
+          <CheckCircle className="w-3 h-3" />
+          <span>Cache cleared successfully at {new Date(lastClearTime).toLocaleTimeString()}</span>
+        </div>
+      )}
+    </div>
+  );
+}

app/components/@settings/tabs/github/components/GitHubConnection.tsx

@@ -0,0 +1,233 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Button } from '~/components/ui/Button';
+import { classNames } from '~/utils/classNames';
+import { useGitHubConnection } from '~/lib/hooks';
+
+interface ConnectionTestResult {
+  status: 'success' | 'error' | 'testing';
+  message: string;
+  timestamp?: number;
+}
+
+interface GitHubConnectionProps {
+  connectionTest: ConnectionTestResult | null;
+  onTestConnection: () => void;
+}
+
+export function GitHubConnection({ connectionTest, onTestConnection }: GitHubConnectionProps) {
+  const { isConnected, isLoading, isConnecting, connect, disconnect, error } = useGitHubConnection();
+
+  const [token, setToken] = React.useState('');
+  const [tokenType, setTokenType] = React.useState<'classic' | 'fine-grained'>('classic');
+
+  const handleConnect = async (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log('handleConnect called with token:', token ? 'token provided' : 'no token', 'tokenType:', tokenType);
+
+    if (!token.trim()) {
+      console.log('No token provided, returning early');
+      return;
+    }
+
+    try {
+      console.log('Calling connect function...');
+      await connect(token, tokenType);
+      console.log('Connect function completed successfully');
+      setToken(''); // Clear token on successful connection
+    } catch (error) {
+      console.log('Connect function failed:', error);
+
+      // Error handling is done in the hook
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <div className="flex items-center gap-2">
+          <div className="i-ph:spinner-gap-bold animate-spin w-4 h-4" />
+          <span className="text-bolt-elements-textSecondary">Loading connection...</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <motion.div
+      className="bg-bolt-elements-background dark:bg-bolt-elements-background border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor rounded-lg"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.2 }}
+    >
+      <div className="p-6 space-y-6">
+        {!isConnected && (
+          <div className="text-xs text-bolt-elements-textSecondary bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1 p-3 rounded-lg mb-4">
+            <p className="flex items-center gap-1 mb-1">
+              <span className="i-ph:lightbulb w-3.5 h-3.5 text-bolt-elements-icon-success dark:text-bolt-elements-icon-success" />
+              <span className="font-medium">Tip:</span> You can also set the{' '}
+              <code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 rounded">
+                VITE_GITHUB_ACCESS_TOKEN
+              </code>{' '}
+              environment variable to connect automatically.
+            </p>
+            <p>
+              For fine-grained tokens, also set{' '}
+              <code className="px-1 py-0.5 bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-2 rounded">
+                VITE_GITHUB_TOKEN_TYPE=fine-grained
+              </code>
+            </p>
+          </div>
+        )}
+
+        <form onSubmit={handleConnect} className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mb-2">
+                Token Type
+              </label>
+              <select
+                value={tokenType}
+                onChange={(e) => setTokenType(e.target.value as 'classic' | 'fine-grained')}
+                disabled={isConnecting || isConnected}
+                className={classNames(
+                  'w-full px-3 py-2 rounded-lg text-sm',
+                  'bg-bolt-elements-background-depth-1 dark:bg-bolt-elements-background-depth-1',
+                  'border border-bolt-elements-borderColor dark:border-bolt-elements-borderColor',
+                  'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
+                  'focus:outline-none focus:ring-1 focus:ring-bolt-elements-item-contentAccent dark:focus:ring-bolt-elements-item-contentAccent',
+                  'disabled:opacity-50',
+                )}
+              >
+                <option value="classic">Personal Access Token (Classic)</option>
+                <option value="fine-grained">Fine-grained Token</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-sm text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary mb-2">
+                {tokenType === 'classic' ? 'Personal Access Token' : 'Fine-grained Token'}
+              </label>
+              <input
+                type="password"
+                value={token}
+                onChange={(e) => setToken(e.target.value)}
+                disabled={isConnecting || isConnected}
+                placeholder={`Enter your GitHub ${
+                  tokenType === 'classic' ? 'personal access token' : 'fine-grained 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://github.com/settings/tokens${tokenType === 'fine-grained' ? '/beta' : '/new'}`}
+                  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>
+                <span className="mx-2">•</span>
+                <span>
+                  Required scopes:{' '}
+                  {tokenType === 'classic' ? 'repo, read:org, read:user' : 'Repository access, Organization access'}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          {error && (
+            <div className="p-4 rounded-lg bg-red-50 border border-red-200 dark:bg-red-900/20 dark:border-red-700">
+              <p className="text-sm text-red-800 dark:text-red-200">{error}</p>
+            </div>
+          )}
+
+          <div className="flex items-center justify-between">
+            {!isConnected ? (
+              <button
+                type="submit"
+                disabled={isConnecting || !token.trim()}
+                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 className="flex items-center justify-between w-full">
+                <div className="flex items-center gap-4">
+                  <button
+                    onClick={disconnect}
+                    type="button"
+                    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 GitHub
+                  </span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    onClick={() => window.open('https://github.com/dashboard', '_blank', 'noopener,noreferrer')}
+                    className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:text-bolt-elements-textPrimary transition-colors"
+                  >
+                    <div className="i-ph:layout w-4 h-4" />
+                    Dashboard
+                  </Button>
+                  <Button
+                    onClick={onTestConnection}
+                    disabled={connectionTest?.status === 'testing'}
+                    variant="outline"
+                    className="flex items-center gap-2 hover:bg-bolt-elements-item-backgroundActive/10 hover:text-bolt-elements-textPrimary dark:hover:text-bolt-elements-textPrimary transition-colors"
+                  >
+                    {connectionTest?.status === 'testing' ? (
+                      <>
+                        <div className="i-ph:spinner-gap w-4 h-4 animate-spin" />
+                        Testing...
+                      </>
+                    ) : (
+                      <>
+                        <div className="i-ph:plug-charging w-4 h-4" />
+                        Test Connection
+                      </>
+                    )}
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        </form>
+      </div>
+    </motion.div>
+  );
+}

app/components/@settings/tabs/github/components/GitHubErrorBoundary.tsx

@@ -0,0 +1,105 @@
+import React, { Component } from 'react';
+import type { ReactNode, ErrorInfo } from 'react';
+import { Button } from '~/components/ui/Button';
+import { AlertTriangle } from 'lucide-react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class GitHubErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('GitHub Error Boundary caught an error:', error, errorInfo);
+
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+  }
+
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <div className="flex flex-col items-center justify-center p-8 text-center space-y-4 bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor rounded-lg">
+          <div className="w-12 h-12 rounded-full bg-red-50 dark:bg-red-900/20 flex items-center justify-center">
+            <AlertTriangle className="w-6 h-6 text-red-500" />
+          </div>
+
+          <div>
+            <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-2">GitHub Integration Error</h3>
+            <p className="text-sm text-bolt-elements-textSecondary mb-4 max-w-md">
+              Something went wrong while loading GitHub data. This could be due to network issues, API limits, or a
+              temporary problem.
+            </p>
+
+            {this.state.error && (
+              <details className="text-xs text-bolt-elements-textTertiary mb-4">
+                <summary className="cursor-pointer hover:text-bolt-elements-textSecondary">Show error details</summary>
+                <pre className="mt-2 p-2 bg-bolt-elements-background-depth-2 rounded text-left overflow-auto">
+                  {this.state.error.message}
+                </pre>
+              </details>
+            )}
+          </div>
+
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm" onClick={this.handleRetry}>
+              Try Again
+            </Button>
+            <Button variant="outline" size="sm" onClick={() => window.location.reload()}>
+              Reload Page
+            </Button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+// Higher-order component for wrapping components with error boundary
+export function withGitHubErrorBoundary<P extends object>(component: React.ComponentType<P>) {
+  return function WrappedComponent(props: P) {
+    return <GitHubErrorBoundary>{React.createElement(component, props)}</GitHubErrorBoundary>;
+  };
+}
+
+// Hook for handling async errors in GitHub operations
+export function useGitHubErrorHandler() {
+  const handleError = React.useCallback((error: unknown, context?: string) => {
+    console.error(`GitHub Error ${context ? `(${context})` : ''}:`, error);
+
+    /*
+     * You could integrate with error tracking services here
+     * For example: Sentry, LogRocket, etc.
+     */
+
+    return error instanceof Error ? error.message : 'An unknown error occurred';
+  }, []);
+
+  return { handleError };
+}